/* Guide workspace */
.guide .g-body{display:flex;flex-direction:column;gap:14px;padding-bottom:40px}
.guide .g-load{padding:40px 0;text-align:center;color:var(--mut)}
.guide .sc-big{display:none}

/* header */
.g-head{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--bg2)}
.gh-top{display:flex;align-items:center;gap:16px}
.gh-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.gh-tx h2{margin:0;font:600 24px/1.15 var(--serif);text-wrap:balance}
.gh-sub{margin:0;color:var(--mut);font-size:14.5px;line-height:1.4}
.gh-st{margin-top:6px;font:600 14px/1.3 var(--sans);color:var(--ink)}
.gh-acts{display:flex;gap:8px;flex-wrap:wrap}
.btn.ghost{background:transparent;border-color:transparent;color:var(--mut)}
.btn.ghost:hover{background:var(--tint);color:var(--ink)}
.gr-ring{position:relative;flex:none;width:64px;height:64px;display:grid;place-items:center}
.gr-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.gr-ring circle{fill:none;stroke-width:3.4}
.gr-bg{stroke:var(--line)}
.gr-fg{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0)*100);transition:stroke-dashoffset .7s var(--ease,cubic-bezier(.2,.8,.2,1))}
.gr-pct{font:700 15px var(--sans);font-variant-numeric:tabular-nums}

/* tabs */
.g-tabs{position:sticky;top:0;z-index:5;display:flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:16px;background:var(--bg);overflow-x:auto;scrollbar-width:none;box-shadow:var(--shadow-sm)}
.g-tabs::-webkit-scrollbar{display:none}
.g-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 14px;border:0;border-radius:12px;background:transparent;color:var(--mut);font:600 14.5px var(--sans);white-space:nowrap;transition:background-color .2s,color .2s,transform .12s}
.g-tab small{font:600 12px var(--sans);padding:2px 7px;border-radius:99px;background:var(--tint);color:var(--mut);font-variant-numeric:tabular-nums}
.g-tab:hover{color:var(--ink)}
.g-tab:active{transform:scale(.97)}
.g-tab[aria-selected=true]{background:var(--ink);color:var(--bg)}
.g-tab[aria-selected=true] small{background:color-mix(in srgb,var(--bg) 22%,transparent);color:var(--bg)}

/* panes */
.g-pane{display:flex;flex-direction:column;gap:14px}
.g-pane.in>*{animation:gin .32s var(--ease,ease) both}
.g-pane.in>*:nth-child(2){animation-delay:.04s}.g-pane.in>*:nth-child(3){animation-delay:.08s}.g-pane.in>*:nth-child(4){animation-delay:.12s}
@keyframes gin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.g-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--bg)}
.g-h{margin:0 0 10px;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.g-lead{color:var(--mut);font-size:15px;line-height:1.5}
.g-progress{display:flex;align-items:center;gap:12px;font:600 14px var(--sans);font-variant-numeric:tabular-nums}
.g-progress span{flex:none}
.g-progress .gm{flex:1;height:8px;background:var(--bg2);border:1px solid var(--line)}
.g-progress .gm i{background:var(--ink);transform:scaleX(var(--v,0))}
.g-info{white-space:pre-line;line-height:1.6;font-size:15.5px}

/* route finder */
.find{display:flex;flex-direction:column;gap:14px;padding:22px}
.fd-top{display:flex;justify-content:space-between;align-items:center}
.fd-k{font:600 12.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.fd-n{font-size:13px;color:var(--mut)}
.fd-q{margin:0;font:600 21px/1.3 var(--serif);text-wrap:balance}
.fd-opts{display:flex;flex-wrap:wrap;gap:10px}
.fd-opts.col{flex-direction:column;align-items:stretch}
.fd-o{flex:1 1 140px;min-height:52px;padding:12px 18px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);font:600 16px var(--sans);text-align:center;transition:background-color .15s,border-color .15s,transform .12s}
.fd-o:hover{background:var(--bg2);border-color:var(--ink)}
.fd-o:active{transform:scale(.97)}
.fd-back{align-self:flex-start}

/* route banner */
.route{display:flex;flex-direction:column;gap:10px;background:var(--bg2)}
.rt-tx{line-height:1.55;font-size:15.5px;white-space:pre-line}
.rt-acts{display:flex;gap:16px;flex-wrap:wrap}

/* steps */
.stp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.stp-i{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--bg);transition:border-color .2s,background-color .2s,box-shadow .2s;animation:gin .36s var(--ease,ease) both;animation-delay:calc(var(--i,0)*35ms)}
.stp-i.cur{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.stp-i.done{background:var(--bg2)}
.stp-i.done .stp-t{color:var(--mut)}
.stp-m{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.stp-n{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.stp-t{font-size:15.5px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
.stp-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.stp-ask{align-self:flex-start;font-size:13.5px}
.gk{flex:none;width:28px;height:28px;margin-top:1px;display:grid;place-items:center;border:1.8px solid var(--mut);border-radius:50%;background:transparent;color:transparent;transition:background-color .2s,border-color .2s,color .2s,transform .18s}
.gk:hover{border-color:var(--ink)}
.gk:active{transform:scale(.9)}
.gk.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.gk svg{transform:scale(.6);opacity:0;transition:transform .22s cubic-bezier(.3,1.6,.5,1),opacity .15s}
.gk.on svg{transform:none;opacity:1}

/* finished */
.fin{display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:var(--bg2)}
.fin h3{margin:0;font:600 22px var(--serif)}
.fin p{margin:0}
.fin-ic{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.fin .stack{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:6px}

/* watch-outs */
.tp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tp li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
.tp li:first-child{border-top:0;padding-top:0}
.tp svg{flex:none;margin-top:2px;color:var(--mut)}

/* documents */
.dcl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dcl-i{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--bg);transition:background-color .2s;animation:gin .34s var(--ease,ease) both;animation-delay:calc(var(--i,0)*30ms)}
.dcl-i.done{background:var(--bg2)}
.dcl-i.done .dcl-m>b{color:var(--mut);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--mut) 60%,transparent)}
.dcl-m{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.dcl-m>b{font:600 16px/1.35 var(--sans)}
.dcl-h{color:var(--mut);font-size:14px;line-height:1.5}
.dcl-c{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;border:1px solid var(--line);border-radius:99px;background:var(--bg);font:600 13px var(--sans);color:var(--ink)}
button.chip:hover{background:var(--bg2);border-color:var(--ink)}
.chip.ok{background:var(--tint);border-color:transparent}

/* fees */
.calc{display:flex;flex-direction:column;gap:6px}
.cf{display:flex;flex-direction:column;gap:18px}
.cf-f{display:flex;flex-direction:column;gap:8px;animation:gin .28s var(--ease,ease) both}
.cf-f.sw-row{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.cf-f.sw-row .fld-l{flex:1}
.seg.wrap{flex-wrap:wrap;height:auto}
.seg.wrap button{flex:1 1 auto;min-height:44px}
.sw{position:relative;flex:none;width:52px;height:32px;border:0;border-radius:99px;background:var(--line);transition:background-color .2s}
.sw i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.sw.on{background:var(--ink)}
.sw.on i{transform:translateX(20px)}
.stepper{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:1px solid var(--line);border-radius:14px;padding:4px}
.stepper b{min-width:36px;text-align:center;font:700 18px var(--sans);font-variant-numeric:tabular-nums}
.stepper .icon-btn{width:40px;height:40px;font-size:20px;border-radius:10px}
.total{display:flex;flex-direction:column;gap:12px;background:var(--bg2)}
.ln{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ln li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
.ln-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.ln-l small{color:var(--mut);font-size:13px}
.ln-a{font-variant-numeric:tabular-nums;white-space:nowrap}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:4px}
.tot>span{font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.tot-v{font:700 34px/1.05 var(--serif);font-variant-numeric:tabular-nums;text-align:right;animation:gin .3s var(--ease,ease)}
.tot-n{margin:0;color:var(--mut);font-size:14px;line-height:1.5}
.g-det summary{cursor:pointer;font:600 14px var(--sans);color:var(--mut);padding:6px 0}
.fee-tx{white-space:pre-line;line-height:1.6;font-size:15px}
.tp.plain{margin-top:12px}

/* my details */
.me{padding:6px 18px}
.me-r{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);animation:gin .3s var(--ease,ease) both;animation-delay:calc(var(--i,0)*30ms)}
.me-r:last-of-type{border-bottom:0}
.me-l{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.me-l .l{font-size:13px;color:var(--mut);letter-spacing:.02em}
.me-l .v{font:600 16.5px/1.35 var(--sans);overflow-wrap:anywhere}
.me-l .v.pk-dots{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mut);letter-spacing:.06em}
.me-l .v.pk-dots.on{color:var(--ink);letter-spacing:.02em;animation:pkin .25s ease}
.me-a{display:flex;gap:6px;flex:none}
.me-a .copy{min-width:0;padding:6px 11px;min-height:34px;font-size:13px}

@media (max-width:520px){
  .g-head{padding:16px}
  .gh-tx h2{font-size:21px}
  .g-card{padding:16px}
  .tot-v{font-size:28px}
  .stp-i,.dcl-i{padding:14px;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .g-pane.in>*,.stp-i,.dcl-i,.me-r,.cf-f,.tot-v{animation:none}
  .gr-fg,.gk svg,.sw i{transition:none}
}
@media (max-width:520px){
  .g-tabs{gap:2px;padding:4px}
  .g-tab{flex:1 1 0;flex-direction:column;gap:1px;min-height:50px;padding:6px 4px;font-size:13.5px}
  .g-tab small{padding:0;background:none;font-size:11.5px}
  .g-tab[aria-selected=true] small{background:none}
}