/* =====================================================================
   App — route transition, start modal, panels, wizard, popovers, toast
   ===================================================================== */
.view{min-height:100vh}
:root[dir="rtl"] .i-dir.i-back{transform:scaleX(-1)}
:root[dir="ltr"] .i-dir.i-back{transform:none}
.btn--danger{background:var(--danger); color:var(--white)}
.btn--danger:hover{background:#912018}
.btn.is-loading{pointer-events:none}
.btn.is-loading svg{animation:nudge .8s var(--ease-io) infinite alternate}
@keyframes nudge{to{transform:translateX(-6px)}}

/* ---------- Route veil: a gold line travels in the path's bearing ---------- */
.route-veil{position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden}
.route-veil__line{position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0}
.route-veil.is-run .route-veil__line{animation:veil 560ms var(--ease-io)}
@keyframes veil{0%{opacity:0; transform:translate(calc(var(--vx,0) * -100%), 0) scaleX(.2)} 30%{opacity:1} 100%{opacity:0; transform:translate(calc(var(--vx,0) * 100%), 0) scaleX(1)}}

/* ---------- Start modal ---------- */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px}
.modal__scrim{position:absolute; inset:0; background:rgba(4,9,17,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity var(--t3) var(--ease)}
.modal__panel{position:relative; width:min(720px, 100%); max-height:calc(100dvh - 48px); overflow:auto; border-radius:var(--r-l); background:var(--warm-white); color:var(--navy); box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  opacity:0; transform:translateY(16px) scale(.97); transition:opacity var(--t3) var(--ease), transform var(--t4) var(--ease-out)}
.modal.is-open .modal__scrim{opacity:1}
.modal.is-open .modal__panel{opacity:1; transform:none}
.modal__grab{display:none}
.modal__head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s5); padding:var(--s6) var(--s6) var(--s4)}
.modal__head h2{font-size:clamp(1.5rem, 1.3rem + .8vw, 2rem)}
.modal__head p.muted{margin-top:6px; font-size:var(--fs-sm)}
.modal__head .kicker{margin-bottom:var(--s3)}
.modal__body{display:grid; grid-template-columns:132px minmax(0,1fr); gap:var(--s5); padding:var(--s3) var(--s6) var(--s5); align-items:center}
.mini-compass{position:relative; width:132px; aspect-ratio:1; color:var(--navy)}
.mini-compass svg{width:100%; height:100%}
.mini-compass text{font-family:var(--mono); font-size:8px; fill:var(--navy); fill-opacity:.55}
.mini-compass__needle{position:absolute; inset:0; transform:rotate(var(--bearing)); transition:transform 700ms cubic-bezier(.34,1.3,.5,1)}
.opts{display:flex; flex-direction:column; gap:10px}
.opt{position:relative; display:grid; grid-template-columns:48px minmax(0,1fr) 28px; gap:var(--s4); align-items:center; width:100%; padding:14px 16px; text-align:start; border-radius:var(--r-m); background:var(--white); border:1px solid var(--border); isolation:isolate;
  transition:border-color var(--t2) var(--ease), box-shadow var(--t3) var(--ease), transform var(--t2) var(--ease-out)}
.opt::before{content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1.5px; background:conic-gradient(from var(--ang,0deg), transparent 0 60%, var(--gold) 80%, transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity:0; transition:opacity var(--t3)}
.opt:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
.opt:hover::before{opacity:1; animation:spin 2.8s linear infinite}
.opt.is-active{border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy), var(--shadow-1); background:var(--gold-soft)}
.opt__icon{width:48px; height:48px; border-radius:var(--r-s); display:grid; place-items:center; background:var(--navy); color:var(--gold-on-dark); transition:transform var(--t3) var(--ease-out)}
.opt__icon svg{width:24px; height:24px}
.opt.is-active .opt__icon{transform:rotate(-8deg)}
.opt__text{display:flex; flex-direction:column; gap:2px}
.opt__title{display:flex; align-items:center; gap:10px; font-weight:650; font-size:var(--fs-body)}
.opt__title .mono{color:var(--gold-text)}
.opt__desc{font-size:var(--fs-xs); color:var(--slate)}
.opt__check{width:28px; height:28px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; color:var(--white); transition:background-color var(--t2), border-color var(--t2), transform var(--t3) var(--ease-out)}
.opt__check svg{width:14px; height:14px; transform:scale(0); transition:transform var(--t3) var(--ease-out)}
.opt.is-active .opt__check{background:var(--navy); border-color:var(--navy)}
.opt.is-active .opt__check svg{transform:scale(1)}
.modal__foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s4) var(--s6) var(--s6); border-top:1px solid var(--border); margin-top:var(--s2)}
.modal__hint{font-size:var(--fs-xs)}
@media (max-width:639px){
  .modal{place-items:end stretch; padding:0}
  .modal__panel{width:100%; max-height:92dvh; border-radius:var(--r-l) var(--r-l) 0 0; transform:translateY(100%); padding-bottom:env(safe-area-inset-bottom,0px)}
  .modal.is-open .modal__panel{transform:none}
  .modal__grab{display:block; width:40px; height:4px; border-radius:4px; background:#C4C8CF; margin:10px auto 0}
  .modal__head{padding:var(--s4) var(--s5) var(--s3)}
  .modal__body{grid-template-columns:minmax(0,1fr); padding:var(--s2) var(--s5) var(--s4)}
  .mini-compass{display:none}
  .modal__foot{flex-direction:column-reverse; align-items:stretch; padding:var(--s4) var(--s5) var(--s5)}
  .modal__foot .btn{width:100%}
  .modal__hint{text-align:center; display:none}
}

/* =====================================================================
   Panels
   ===================================================================== */
.app{--side-w:300px; --side-bg:var(--navy-deep); --side-fg:var(--white); --side-muted:var(--text-on-dark-3); --side-line:var(--line-dark); --side-accent:var(--gold-on-dark);
  --banner-bg:var(--navy); --banner-fg:var(--white); --banner-muted:var(--text-on-dark-2); --banner-rose:var(--white);
  display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh; background:var(--warm-white)}
/* identities */
.app[data-theme="north"]{--banner-bg:radial-gradient(120% 140% at 90% 0%, var(--navy-2), var(--navy-deep) 60%)}
.app[data-theme="east"]{--side-bg:var(--white); --side-fg:var(--navy); --side-muted:var(--slate); --side-line:var(--border); --side-accent:var(--gold-text);
  --banner-bg:linear-gradient(180deg, var(--gold-soft), var(--warm-white)); --banner-fg:var(--navy); --banner-muted:var(--slate); --banner-rose:var(--navy)}
.app[data-theme="west"]{--side-bg:var(--navy-2); --banner-bg:linear-gradient(180deg, var(--soft), var(--warm-white)); --banner-fg:var(--navy); --banner-muted:var(--slate); --banner-rose:var(--navy)}
.app[data-theme="east"] .side{border-inline-end:1px solid var(--border)}

.side{position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto; display:flex; flex-direction:column; gap:var(--s5); padding:var(--s5); background:var(--side-bg); color:var(--side-fg); scrollbar-width:thin}
.side__top{display:flex; align-items:center; justify-content:space-between}
.side__x{display:none}
.side .icon-btn{border-color:var(--side-line)}
.brand--side{font-size:1rem}
.brand--side svg{width:28px; height:28px}
.side__path{display:flex; align-items:center; gap:14px; padding:var(--s4); border-radius:var(--r-m); border:1px solid var(--side-line)}
.side__path > span:last-child{display:flex; flex-direction:column; min-width:0}
.side__path .mono{color:var(--side-accent); font-size:.6875rem}
.side__path strong{font-size:1.0625rem}
.side__path em{font-style:normal; font-size:var(--fs-xs); color:var(--side-muted)}
.side__rose{position:relative; flex:none; width:52px; height:52px; color:var(--side-fg)}
.side__rose svg{position:absolute; inset:0; width:100%; height:100%}
.side__needle{transform:rotate(var(--bearing)); animation:needleIn 1100ms cubic-bezier(.34,1.3,.5,1)}
@keyframes needleIn{from{transform:rotate(calc(var(--bearing) - 140deg))}}
.side__steps ol{display:flex; flex-direction:column; gap:2px; position:relative}
.side__steps li button{position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:6px 10px; border-radius:var(--r-s); text-align:start; color:var(--side-muted); transition:background-color var(--t2), color var(--t2)}
.side__steps li button:not([disabled]):hover{background:rgba(127,140,160,.10); color:var(--side-fg)}
.side__steps li button[disabled]{cursor:default; opacity:.6}
.side__steps li.is-current button{color:var(--side-fg); background:rgba(184,134,59,.12); opacity:1}
.side__steps li.is-done button{color:var(--side-fg); opacity:1}
.step__dot{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--side-line); transition:background-color var(--t3), border-color var(--t3)}
.step__dot .mono{font-size:.625rem; letter-spacing:.04em}
.step__dot svg{width:14px; height:14px}
.is-current .step__dot{border-color:var(--gold); box-shadow:0 0 0 4px rgba(184,134,59,.14)}
.is-done .step__dot{background:var(--gold); border-color:var(--gold); color:var(--navy-deep)}
.step__name{font-size:var(--fs-sm); font-weight:500}
.side__steps li:not(:last-child) button::after{content:""; position:absolute; inset-inline-start:24px; top:42px; width:1px; height:12px; background:var(--side-line)}
.side__progress-row{display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--side-muted); margin-bottom:8px}
.side__progress-row .mono{color:var(--side-accent); letter-spacing:.04em}
.bar{height:6px; border-radius:6px; background:var(--side-line); overflow:hidden}
.bar span{display:block; height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-on-dark)); transform-origin:var(--origin, right); transform:scaleX(0); transition:transform 600ms var(--ease-out)}
:root[dir="ltr"] .bar span{--origin:left}
.side__help{padding:var(--s4); border-radius:var(--r-m); background:rgba(127,140,160,.08); font-size:var(--fs-xs); line-height:1.8; color:var(--side-muted)}
.side__help-t{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--side-fg); margin-bottom:6px; font-size:var(--fs-sm)}
.side__help-t svg{width:18px; height:18px; color:var(--side-accent)}
.side__help ul{display:flex; flex-direction:column; gap:6px; padding-inline-start:14px; list-style:disc}
.side__other{margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:var(--s4); border-top:1px solid var(--side-line)}
.side__other p{font-size:var(--fs-xs); color:var(--side-muted); margin-bottom:4px}
.side__other a,.side__home{display:flex; align-items:center; gap:10px; min-height:44px; padding:0 8px; border-radius:var(--r-s); font-size:var(--fs-sm); color:var(--side-fg); transition:background-color var(--t2)}
.side__other a:hover,.side__home:hover{background:rgba(127,140,160,.10)}
.side__other a svg,.side__home svg{width:20px; height:20px; color:var(--side-accent); flex:none}
.side__other a .mono{margin-inline-start:auto; color:var(--side-muted)}
.side-scrim{display:none}

.app__main{min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:var(--s4); min-height:68px; padding:10px var(--s7); background:rgba(250,249,246,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.topbar__steps{display:none; border-color:var(--border); color:var(--navy)}
.crumbs{display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--slate); min-width:0}
.crumbs a{min-height:44px; display:inline-flex; align-items:center}
.crumbs a:hover{color:var(--navy)}
.crumbs [aria-current]{color:var(--navy); font-weight:600}
.topbar__end{margin-inline-start:auto; display:flex; align-items:center; gap:var(--s3)}
.topbar__bar{position:absolute; inset-inline:0; bottom:-1px; height:2px; overflow:hidden}
.topbar__bar span{display:block; height:100%; background:var(--gold); transform-origin:var(--origin,right); transform:scaleX(0); transition:transform 600ms var(--ease-out)}
:root[dir="ltr"] .topbar__bar span{--origin:left}
.saved{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--success); white-space:nowrap; transition:opacity var(--t2)}
.saved svg{width:14px; height:14px}
.saved.is-saving{color:var(--slate)}
.avatar{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--white); font-weight:600; font-size:.875rem; border:2px solid var(--white); box-shadow:0 0 0 1px var(--border); flex:none}
.avatar svg{width:20px; height:20px}
.avatar--lg{width:48px; height:48px}
.badge{position:absolute; top:6px; inset-inline-end:6px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--gold); color:var(--navy-deep); font-size:.625rem; font-weight:700; line-height:16px; text-align:center}
.pop{position:relative}
.pop .icon-btn{position:relative}
.pop__panel{position:absolute; top:calc(100% + 10px); inset-inline-end:0; z-index:40; width:320px; max-width:calc(100vw - 32px); padding:var(--s4); border-radius:var(--r-m); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-2);
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top; transition:opacity var(--t2) var(--ease), transform var(--t3) var(--ease-out)}
.pop__panel.is-open{opacity:1; transform:none}
.pop__title{font-size:var(--fs-xs); font-weight:600; color:var(--slate); margin-bottom:var(--s3)}
.pop__empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:var(--s5) 0; color:var(--slate); font-size:var(--fs-sm)}
.pop__empty svg{width:28px; height:28px; opacity:.5}
.pop__note{margin-block:var(--s3); font-size:var(--fs-xs); color:var(--slate); line-height:1.7}
.notifs{display:flex; flex-direction:column; gap:4px; max-height:320px; overflow:auto}
.notifs li{display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; padding:8px; border-radius:var(--r-s); font-size:var(--fs-xs); line-height:1.6}
.notifs li.is-new{background:var(--gold-soft)}
.notifs__i{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--soft); color:var(--navy)}
.notifs__i svg{width:16px; height:16px}
.notifs__m{display:block; color:var(--navy); font-weight:500; overflow-wrap:anywhere}
.notifs__t{display:block; color:var(--slate)}
.prof{display:flex; align-items:center; gap:12px}
.prof > span:last-child{display:flex; flex-direction:column; min-width:0}
.prof strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prof em{font-style:normal; font-size:var(--fs-xs); color:var(--slate)}
.refs{display:flex; flex-direction:column; gap:4px; margin-bottom:var(--s3)}
.refs li{display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-xs); padding:6px 8px; border-radius:var(--r-xs); background:var(--soft)}
.refs li span:first-child{font-family:var(--mono); font-size:.6875rem}
.danger-zone{padding-top:var(--s3); border-top:1px solid var(--border)}
.danger-zone .btn{width:100%}
.danger-zone__q{font-size:var(--fs-xs); color:var(--danger); margin-bottom:8px; line-height:1.7}
.danger-zone__row{display:flex; gap:8px}
.danger-zone__row .btn{flex:1}

/* banner */
.banner{position:relative; overflow:hidden; padding:var(--s8) var(--s7) var(--s7); background:var(--banner-bg); color:var(--banner-fg); isolation:isolate}
.banner__rose{position:absolute; z-index:-1; inset-inline-end:-80px; top:50%; width:420px; height:420px; transform:translateY(-50%); color:var(--banner-rose)}
.banner__needle{transform-origin:200px 200px; transform:rotate(var(--bearing)); animation:needleIn 1200ms cubic-bezier(.34,1.3,.5,1)}
.banner__in{max-width:980px; margin-inline:auto; padding-inline-end:min(30%, 300px)}
.banner__deg{display:flex; gap:14px; margin-bottom:var(--s3)}
.banner__deg .mono{color:var(--gold-on-dark)}
.app[data-theme="east"] .banner__deg .mono,.app[data-theme="west"] .banner__deg .mono{color:var(--gold-text)}
.banner h1{font-size:clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight:700; line-height:1.2}
.banner h1 span{display:block; font-size:var(--fs-lead); font-weight:500; color:var(--banner-muted); margin-top:6px}
.banner__intro{margin-top:var(--s4); color:var(--banner-muted); max-width:36em; line-height:1.8}
.app[data-theme="west"] .banner::before{content:""; position:absolute; inset:0; z-index:-2; background-image:linear-gradient(rgba(15,27,44,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,27,44,.05) 1px, transparent 1px); background-size:40px 40px; -webkit-mask-image:linear-gradient(to bottom, #000, transparent); mask-image:linear-gradient(to bottom, #000, transparent)}
.app[data-theme="east"] .banner::after{content:""; position:absolute; inset-inline:var(--s7); bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent)}

.app__content{flex:1; width:100%; max-width:980px; margin-inline:auto; padding:var(--s7) var(--s7) var(--s8); outline:none}
.app__foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s3); padding:var(--s5) var(--s7); border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--slate)}

/* ---------- Wizard ---------- */
.wz__head{margin-bottom:var(--s6)}
.wz__count{display:flex; align-items:center; gap:12px; font-size:var(--fs-xs); color:var(--slate); margin-bottom:var(--s2)}
.wz__count .mono{color:var(--gold-text)}
.wz__title{font-size:clamp(1.5rem, 1.3rem + .8vw, 2rem); outline:none}
.wz__desc{margin-top:6px; color:var(--slate)}
.wz__alert{display:flex; align-items:center; gap:10px; margin-bottom:var(--s5); padding:12px 16px; border-radius:var(--r-s); background:#FDF1EF; border:1px solid rgba(180,35,24,.25); color:var(--danger); font-size:var(--fs-sm); font-weight:500}
.wz__alert svg{width:18px; height:18px; flex:none}
.wz__alert.shake{animation:shake 420ms var(--ease-io)}
@keyframes shake{20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)}}
.wz__grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s5) var(--s4)}
fieldset.field{border:0; margin:0; padding:0; min-width:0}
fieldset.field legend{padding:0; margin-bottom:8px; width:100%}
.field__meta{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.range-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 150px; gap:8px}
.range-row__in{display:flex; flex-direction:column; gap:4px}
.wz__nav{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--border)}
.wz__nav .btn--lg{min-width:180px}
.agree{margin-top:var(--s5)}
.agree__box{display:flex; align-items:flex-start; gap:12px; padding:var(--s4); border-radius:var(--r-s); border:1px solid var(--border); background:var(--white); cursor:pointer; font-size:var(--fs-sm); line-height:1.8}
.agree__box input{position:absolute; opacity:0; width:1px; height:1px}
.agree__mark{flex:none; width:22px; height:22px; margin-top:3px; border-radius:6px; border:1.5px solid #9AA1AC; display:grid; place-items:center; color:var(--white); transition:background-color var(--t2), border-color var(--t2)}
.agree__mark svg{width:14px; height:14px; transform:scale(0); transition:transform var(--t3) var(--ease-out)}
.agree__box input:checked + .agree__mark{background:var(--navy); border-color:var(--navy)}
.agree__box input:checked + .agree__mark svg{transform:scale(1)}
.agree__box input:focus-visible + .agree__mark{outline:2px solid var(--gold); outline-offset:2px}
.agree.is-invalid .agree__box{border-color:var(--danger)}

/* review */
.rv-list{display:flex; flex-direction:column; gap:var(--s4)}
.rv{border-radius:var(--r-m); background:var(--white); border:1px solid var(--border); overflow:hidden}
.rv--warn{border-color:rgba(180,35,24,.4)}
.rv__head{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:12px var(--s5); background:var(--soft); border-bottom:1px solid var(--border)}
.rv__head h3{display:flex; align-items:center; gap:10px; font-size:var(--fs-body)}
.rv__head .mono{color:var(--gold-text)}
.rv dl{padding:var(--s2) var(--s5)}
.rv__row{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:var(--s4); padding:10px 0; border-bottom:1px dashed var(--border); font-size:var(--fs-sm)}
.rv__row:last-child{border-bottom:0}
.rv__row dt{color:var(--slate)}
.rv__row dd{font-weight:500; white-space:pre-line; overflow-wrap:anywhere; display:flex; align-items:center; gap:10px}
.rv__row dd.ltr{justify-content:flex-end}
:root[dir="ltr"] .rv__row dd.ltr{justify-content:flex-start}
.rv__logo{width:36px; height:36px; border-radius:6px; background:var(--soft) center/contain no-repeat; border:1px solid var(--border); flex:none}

/* success */
.wz--done{display:flex; flex-direction:column; align-items:flex-start}
.done__mark{width:80px; height:80px; margin-bottom:var(--s5)}
.done__mark svg{width:100%; height:100%}
.done__ring{fill:none; stroke:var(--gold); stroke-width:2; stroke-dasharray:227; stroke-dashoffset:227; animation:draw 900ms var(--ease-out) forwards; transform:rotate(-90deg); transform-origin:center}
.done__tick{fill:none; stroke:var(--navy); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:50; stroke-dashoffset:50; animation:draw 500ms var(--ease-out) 600ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ref{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); width:100%; margin-top:var(--s6); padding:var(--s5); border-radius:var(--r-m); background:var(--navy-deep); color:var(--white)}
.ref > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.ref__label{font-size:var(--fs-xs); color:var(--text-on-dark-3)}
.ref__id{font-family:var(--mono); font-size:clamp(1rem, .9rem + .6vw, 1.375rem); letter-spacing:.06em; color:var(--gold-on-dark); overflow-wrap:anywhere}
.ref__at{font-size:var(--fs-xs); color:var(--text-on-dark-3)}
.ref .btn--line{background:transparent; color:var(--white); border-color:var(--line-dark-2)}
.ref .btn--line:hover{border-color:var(--gold-on-dark)}
.ref .btn.is-copied{border-color:var(--gold); color:var(--gold-on-dark)}
.status{width:100%; margin-top:var(--s6); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3)}
.status li{position:relative; display:flex; gap:12px; align-items:flex-start; padding:var(--s4); border-radius:var(--r-m); border:1px solid var(--border); background:var(--white); font-size:var(--fs-sm)}
.status li > span:last-child{display:flex; flex-direction:column}
.status em{font-style:normal; font-size:var(--fs-xs); color:var(--slate)}
.status__dot{flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--border); display:grid; place-items:center; margin-top:2px}
.status__dot svg{width:12px; height:12px}
.status .is-done .status__dot{background:var(--success); border-color:var(--success); color:var(--white)}
.status .is-next .status__dot{border-color:var(--gold); position:relative}
.status .is-next .status__dot::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); animation:pulse 1.6s var(--ease-io) infinite}
@keyframes pulse{50%{transform:scale(.5); opacity:.4}}
.done__actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7)}
.demo-note{margin-top:var(--s5); font-size:var(--fs-xs); color:var(--slate); padding:10px 14px; border-radius:var(--r-s); background:var(--soft); border:1px dashed var(--border)}

/* toast */
.toast{position:fixed; z-index:95; bottom:24px; left:50%; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); padding:12px 18px; border-radius:var(--r-full); background:var(--navy-deep); color:var(--white); font-size:var(--fs-sm); box-shadow:var(--shadow-dark);
  opacity:0; transform:translate(-50%, 16px); pointer-events:none; transition:opacity var(--t3) var(--ease), transform var(--t3) var(--ease-out)}
.toast svg{width:16px; height:16px; color:var(--gold-on-dark)}
.toast.is-on{opacity:1; transform:translate(-50%, 0)}

/* ---------- Panel responsive ---------- */
@media (max-width:1199px){ .app{--side-w:260px} .topbar,.banner,.app__content,.app__foot{padding-inline:var(--s6)} }
@media (max-width:899px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed; z-index:70; inset-block:0; inset-inline-start:0; width:min(340px, 88vw); height:100dvh; transform:translateX(105%); transition:transform 420ms var(--ease-out); box-shadow:var(--shadow-dark)}
  :root[dir="ltr"] .side{transform:translateX(-105%)}
  .side.is-open,:root[dir="ltr"] .side.is-open{transform:none}
  .side__x{display:inline-flex}
  .side-scrim{display:block; position:fixed; inset:0; z-index:69; background:rgba(4,9,17,.55); opacity:0; transition:opacity var(--t3)}
  .side-scrim.is-open{opacity:1}
  .topbar__steps{display:inline-flex}
  .banner__rose{width:300px; height:300px; inset-inline-end:-120px}
}
@media (max-width:639px){
  .topbar{padding:8px var(--gutter); gap:var(--s2); min-height:60px}
  .crumbs a,.crumbs > span[aria-hidden]{display:none}
  .saved span{display:none}
  .topbar__end{gap:6px}
  .lang--sm .lang__btn{min-width:34px; padding:0 6px}
  .banner{padding:var(--s6) var(--gutter)}
  .banner__rose{opacity:.6}
  .app__content{padding:var(--s6) var(--gutter) var(--s7)}
  .app__foot{padding-inline:var(--gutter)}
  .wz__grid{grid-template-columns:minmax(0,1fr)}
  .range-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .range-row__in:last-child{grid-column:1 / -1}
  .wz__nav{flex-direction:column-reverse; align-items:stretch}
  .wz__nav .btn{width:100%}
  .wz__nav > span:empty{display:none}
  .rv__row{grid-template-columns:minmax(0,1fr); gap:2px}
  .rv__row dd.ltr{justify-content:flex-start}
  :root[dir="rtl"] .rv__row dd.ltr{justify-content:flex-end}
  .status{grid-template-columns:minmax(0,1fr)}
  .ref{flex-direction:column; align-items:stretch}
  .done__actions .btn{flex:1 1 100%}
  .file{flex-wrap:wrap}
  .file__actions{width:100%}
  .file__actions .btn{flex:1}
  .pop__panel{position:fixed; top:66px; inset-inline:12px; width:auto}
}