:root{
    --bg:#0A0C10; --bg-2:#0F1319; --panel:#13181F; --panel-2:#1A2029; --line:#1F2630; --line-2:#2C3540;
    --ink:#EEF2F5; --ink-2:#A3AEB9; --ink-3:#6E7A86;
    --accent:#D7DDE3; --accent-2:#8E99A3; --accent-dim:rgba(215,221,227,.10); --accent-ink:#0B0E11; --steel:linear-gradient(180deg,#F2F4F6 0%,#C9D1D8 55%,#AEB8C1 100%);
    --warn:#E3B04B; --warn-dim:rgba(227,176,75,.12); --bad:#E8826C; --good:#6FCB9A;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    --r:14px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; min-height:100dvh; color:var(--ink); font:16px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(900px 500px at 15% -10%, rgba(200,208,216,.14), transparent 60%),
      radial-gradient(700px 400px at 110% 10%, rgba(200,208,216,.05), transparent 60%),
      var(--bg);
  }
  a{color:var(--ink-2)}
  .wrap{max-width:560px; margin:0 auto; padding:0 20px 120px}

  header{padding:34px 0 26px; display:flex; align-items:center; justify-content:space-between}
  .brand{display:flex; align-items:center; gap:11px}
  .mark{width:50px;height:50px;flex:none;mix-blend-mode:screen;border-radius:12px}
  .brand h1{font-size:22px; margin:0; letter-spacing:-.03em; font-weight:700}
  .brand small{display:block; font-size:12px; color:var(--ink-3); letter-spacing:.01em; margin-top:1px}
  .count{font:12px var(--mono); color:var(--ink-3); letter-spacing:.06em}
  .side{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
  a.track{font-size:12.5px; color:var(--ink-2); text-decoration:none; border:1px solid var(--line-2); padding:6px 10px; border-radius:999px}
  a.track:hover{border-color:var(--accent); color:var(--ink)}
  .slot.link{border-style:solid; border-color:var(--line)}
  .slot .depositLink{font:500 13.5px/1.5 var(--mono); word-break:break-all; color:var(--ink-2)}

  .bar{height:3px; background:var(--line); border-radius:3px; overflow:hidden; margin-bottom:34px}
  .bar i{display:block; width:0; height:100%; background:linear-gradient(90deg,#8E99A3,#E6EAEE); border-radius:3px; transition:width .35s ease}

  .q{font-size:27px; line-height:1.18; font-weight:700; letter-spacing:-.025em; margin:0 0 8px}
  .hint{font-size:14.5px; color:var(--ink-2); margin:0 0 22px; line-height:1.5}
  .breakall{word-break:break-all; overflow-wrap:anywhere}
  .timeline .t, .timeline .d{overflow-wrap:anywhere; min-width:0}
  .hint b{color:var(--ink)}

  .sum{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px}
  .chip{font:12px var(--mono); background:var(--panel); border:1px solid var(--line); color:var(--ink-3); padding:6px 10px; border-radius:999px}
  .chip b{color:var(--ink-2); font-weight:600}

  .list{display:flex; flex-direction:column; gap:8px}
  .grid{display:grid; gap:8px}
  .grid.two{grid-template-columns:1fr 1fr}
  .grid.three{grid-template-columns:repeat(3,1fr)}
  button.cell{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; cursor:pointer; text-align:left;
    background:var(--panel); border:1px solid var(--line); color:var(--ink);
    padding:12px 14px; border-radius:var(--r); font:500 15px var(--sans);
    transition:border-color .15s, background .15s, transform .08s;
  }
  button.cell b{font:600 13px var(--mono); color:var(--accent); letter-spacing:.02em}
  button.cell small{font-size:12px; color:var(--ink-3); font-weight:400}
  button.cell.sym{align-items:center; justify-content:center; padding:13px 8px; font:600 14px var(--mono); letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; text-align:center}
  button.cell:hover, button.cell:focus-visible{border-color:var(--accent); background:var(--panel-2); outline:none}
  button.cell:active{transform:scale(.995)}
  button.opt{
    display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
    background:var(--panel); border:1px solid var(--line); color:var(--ink);
    padding:15px 16px; border-radius:var(--r); font:500 16px var(--sans);
    transition:border-color .15s, background .15s, transform .08s;
  }
  button.opt:hover, button.opt:focus-visible{border-color:var(--accent); background:var(--panel-2); outline:none}
  button.opt:active{transform:scale(.995)}
  .mono-badge{width:38px;height:38px;border-radius:11px;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;font:600 14px var(--mono);color:var(--accent);flex:none;letter-spacing:-.02em}
  button.opt .chev{margin-left:auto; color:var(--ink-3); font-size:18px}
  button.opt .sub{display:block; font-size:12.5px; color:var(--ink-3); font-weight:400; margin-top:1px}

  .field{position:relative; margin-top:4px}
  input{
    width:100%; background:var(--panel); border:1px solid var(--line-2); color:var(--ink);
    padding:18px 16px; border-radius:var(--r); font:500 20px var(--mono); letter-spacing:-.01em;
  }
  input::placeholder{color:var(--ink-3)}
  input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
  .suffix{position:absolute; right:16px; top:50%; transform:translateY(-50%); font:600 14px var(--mono); color:var(--ink-3); pointer-events:none}
  .err{color:var(--bad); font-size:14px; margin-top:10px; min-height:20px; line-height:1.45}

  .actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
  button.go{
    flex:1 1 auto; min-width:160px; background:var(--steel); border:0; color:var(--accent-ink); padding:16px 22px; border-radius:var(--r); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(0,0,0,.4);
    font:650 16px var(--sans); cursor:pointer; transition:filter .15s, transform .08s;
  }
  button.go:hover{filter:brightness(1.06)}
  button.go:active{transform:scale(.99)}
  button.go:disabled{opacity:.35; cursor:default; filter:none}
  button.back{background:transparent; border:1px solid var(--line-2); color:var(--ink-2); padding:16px 18px; border-radius:var(--r); font:500 15px var(--sans); cursor:pointer}
  button.back:hover{border-color:var(--ink-3); color:var(--ink)}

  .quote{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 16px; margin-bottom:10px; cursor:pointer; transition:border-color .15s, background .15s}
  .quote:hover{border-color:var(--line-2)}
  .quote.best{border-color:rgba(215,221,227,.45)}
  .quote.chosen{border-color:var(--accent); background:linear-gradient(180deg,var(--accent-dim),transparent 70%), var(--panel)}
  .quote .lbl{font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; padding-right:34px}
  .badge{font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:999px; background:var(--accent-dim); color:var(--accent)}
  .out{font:600 28px/1.1 var(--mono); letter-spacing:-.03em; word-break:break-all}
  .out small{font-size:15px; color:var(--ink-2); font-weight:500; margin-left:6px; letter-spacing:0}
  .via{font-size:14px; color:var(--ink-2); margin-top:10px}
  .via b{color:var(--ink); font-weight:600}
  .meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
  .meta span{font:12px var(--mono); color:var(--ink-3); background:var(--bg-2); border:1px solid var(--line); padding:5px 9px; border-radius:999px}
  .meta span b{color:var(--ink-2); font-weight:600}
  .meta .flag{color:var(--warn); border-color:rgba(227,176,75,.35)}
  .qr{display:block; width:180px; height:180px; border-radius:10px; margin:4px 0 14px; background:#fff}
  .terms{font-size:12.5px; color:var(--ink-3); margin-top:12px; line-height:1.5; padding-top:10px; border-top:1px dashed var(--line)}
  .quote .tick{position:absolute; top:16px; right:16px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; font-size:12px; color:transparent}
  .quote.chosen .tick{background:var(--steel); border-color:#E6EAEE; color:var(--accent-ink)}

  .note{font-size:13.5px; color:var(--ink-3); margin-top:22px; line-height:1.6}
  .note strong{color:var(--ink-2); font-weight:600}
  .spin{color:var(--ink-2); font-size:15px; padding:18px 0; display:flex; align-items:center; gap:10px}
  .spin:before{content:""; width:14px; height:14px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--accent); animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  .preview{display:flex; gap:10px; align-items:flex-start; background:var(--warn-dim); border:1px solid rgba(227,176,75,.35); color:#EBCF8D; border-radius:12px; padding:11px 13px; font-size:13px; line-height:1.5; margin-bottom:22px}
  .preview b{color:var(--warn); font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; padding-top:3px}

  .hero{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-bottom:12px}
  .hero .lbl{font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
  .hero .big{font:600 32px/1.1 var(--mono); letter-spacing:-.03em; word-break:break-all}
  .hero .big small{font-size:16px; color:var(--ink-2); font-weight:500; margin-left:6px; letter-spacing:0}
  .kv{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:14px; margin:14px 0 0}
  .kv dt{color:var(--ink-3); margin:0}
  .kv dd{margin:0; font-family:var(--mono); word-break:break-all; color:var(--ink)}

  .slot{background:var(--bg-2); border:1px dashed var(--line-2); border-radius:var(--r); padding:18px; margin:12px 0}
  .slot .lbl{font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
  .slot .depositAddress{font:600 18px/1.55 var(--mono); word-break:break-all; letter-spacing:.02em; color:var(--ink)}
  .slot .placeholder{font:14.5px/1.55 var(--sans); color:var(--ink-3)}
  .slot .row{display:flex; gap:8px; margin-top:14px}
  button.mini{background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink); padding:10px 14px; border-radius:10px; font:500 14px var(--sans); cursor:pointer}
  button.mini:hover{border-color:var(--accent)}
  button.mini:disabled{opacity:.35; cursor:default}
  .owner{font-size:13.5px; color:var(--ink-3); margin-top:12px; line-height:1.5}
  .owner b{color:var(--ink-2)}

  .timeline{list-style:none; margin:4px 0 20px; padding:0; position:relative}
  .timeline:before{content:""; position:absolute; left:9px; top:14px; bottom:14px; width:2px; background:var(--line)}
  .timeline li{display:flex; gap:16px; align-items:flex-start; padding:11px 0; position:relative}
  .timeline .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex:none;background:var(--bg);display:grid;place-items:center;font-size:11px;color:transparent}
  .timeline li.done .dot{background:var(--good);border-color:var(--good);color:#06301B}
  .timeline li.now .dot{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim);background:var(--panel)}
  .timeline li.now .dot:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
  .timeline .t{font-weight:600;font-size:15px}
  .timeline li.todo .t{color:var(--ink-3);font-weight:500}
  .timeline .d{font-size:13px;color:var(--ink-3);line-height:1.45;margin-top:2px}
  .timeline li.now .d{color:var(--ink-2)}

  .done-head{display:flex; align-items:center; gap:14px; margin:4px 0 18px}
  .ring{width:46px;height:46px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--accent);display:grid;place-items:center;color:var(--accent);font-size:20px;font-weight:700;flex:none}
  .receipt{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin:12px 0}
  .receipt .lbl{font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
  .receipt .kv{margin-top:10px}
  .receipt .big{font:600 24px/1.1 var(--mono); letter-spacing:-.03em}

  footer{position:fixed; left:0; right:0; bottom:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); text-align:center; font-size:12px; color:var(--ink-3); background:linear-gradient(transparent, var(--bg) 40%); pointer-events:none}

  .fade{animation:fade .22s ease}
  @keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
  @media (prefers-reduced-motion: reduce){ .fade{animation:none} .bar i{transition:none} .spin:before{animation:none} }
  .m0{margin:0}
  .mt12{margin-top:12px}
  textarea{width:100%; background:var(--panel); border:1px solid var(--line-2); color:var(--ink); padding:14px 16px; border-radius:var(--r); font:500 15px/1.5 var(--mono); resize:vertical; min-height:120px}
  textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
  .seg{display:flex; gap:8px; margin-top:8px}
  .seg button.opt{flex:1; justify-content:center; padding:11px 10px}
  .seg button.opt.on{border-color:var(--accent); background:var(--accent-dim); color:var(--ink)}
  .slot[data-i]{margin:10px 0}
  .slot .lbl b{color:var(--ink); text-transform:none; letter-spacing:0; font:600 13px var(--mono)}