/* =====================================================================
   v4 extensions — new functionality styled with the EXISTING tokens,
   card language and motion. Nothing here restyles v3 components.
   ===================================================================== */

/* ---------- Hero: language switch veil (fade → swap → fade) ---------- */
.stage__veil{position:absolute; inset:0; z-index:2; background:#040D1B; opacity:0; pointer-events:none; transition:opacity var(--t3) var(--ease)}
.stage.is-switching .stage__veil{opacity:1}

/* ---------- small reusable bits ---------- */
button.tlink{font:inherit; font-weight:600; font-size:var(--fs-sm); cursor:pointer}
.ftr__link{display:inline-flex; align-items:center; min-height:36px; font-size:var(--fs-sm); color:var(--text-on-dark-3); transition:color var(--t2); text-align:start}
.ftr__link:hover{color:var(--gold-on-dark)}
.btn--quiet{min-height:44px; padding:0 14px; color:var(--slate); font-weight:500; border-color:transparent; background:transparent}
.btn--quiet:hover{color:var(--navy); background:var(--soft)}
.btn--quiet svg{width:14px; height:14px; opacity:.5; transition:opacity var(--t2), transform var(--t3) var(--ease-out)}
.btn--quiet.is-saved svg{opacity:1; color:var(--success); animation:pop var(--t4) var(--ease-out)}
@keyframes pop{0%{transform:scale(.4)} 60%{transform:scale(1.25)} 100%{transform:scale(1)}}
.wz__nav-end{display:flex; align-items:center; gap:var(--s2); margin-inline-start:auto}
.nav a[data-route].is-active,.drawer__nav a.is-active{color:var(--white)}
.drawer__nav a.is-active .mono{color:var(--gold-on-dark)}

/* ---------- Field micro-interaction: gold focus line that draws from the start edge ---------- */
.control::after{content:""; position:absolute; inset-inline:10px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--gold), var(--gold-on-dark)); transform:scaleX(0); transform-origin:var(--origin, right); transition:transform var(--t3) var(--ease-out); pointer-events:none}
:root[dir="ltr"] .control::after{--origin:left}
.control:focus-within::after{transform:scaleX(1)}
.field.is-invalid .control::after{background:var(--danger)}

/* ---------- Logo field: progress + preview reveal ---------- */
.file{position:relative; overflow:hidden}
.file__bar{position:absolute; inset-inline:0; bottom:0; height:2px; background:transparent}
.file__bar i{display:block; height:100%; background:var(--gold); transform:scaleX(0); transform-origin:var(--origin, right); transition:none}
:root[dir="ltr"] .file__bar i{--origin:left}
.file.is-busy{border-style:solid; border-color:var(--navy)}
.file.has-file{border-style:solid}
.file__ok{display:inline-flex; align-items:center; gap:6px; color:var(--success); font-weight:500}
.file__ok svg{width:14px; height:14px}
.just-added .file__thumb.is-in{animation:logoIn var(--t4) var(--ease-out)}
.just-added .file__ok svg,.just-added .upload__meta .file__ok svg{animation:pop var(--t4) var(--ease-out)}
@keyframes logoIn{from{opacity:0; transform:scale(.82)} to{opacity:1; transform:none}}

/* ---------- General file upload ---------- */
.upload{display:flex; flex-direction:column; gap:10px}
.upload__zone{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:var(--s5) var(--s4); text-align:center; border:1px dashed #B8BDC6; border-radius:var(--r-s); background:var(--white); transition:border-color var(--t2) var(--ease), background-color var(--t2), transform var(--t2) var(--ease-out)}
.upload__zone:hover{border-color:var(--navy)}
.upload__zone.is-drag{border-color:var(--gold); background:var(--gold-soft); transform:scale(1.01)}
.upload__zone:focus-within{border-color:var(--navy); box-shadow:0 0 0 4px rgba(15,27,44,.08)}
.upload__zone input{position:absolute; width:1px; height:1px; opacity:0}
.upload__icon{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--soft); color:var(--navy); transition:transform var(--t3) var(--ease-out)}
.upload__icon svg{width:18px; height:18px}
.upload__zone:hover .upload__icon,.upload__zone.is-drag .upload__icon{transform:translateY(-3px)}
.upload__txt{font-size:var(--fs-sm); color:var(--navy)}
.upload__browse{color:var(--gold-text); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.upload__zone input:focus-visible ~ *,.upload__zone input:focus-visible{outline:none}
.upload__zone:has(input:focus-visible){outline:2px solid var(--gold); outline-offset:3px}
.upload__item{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:var(--s4); align-items:center; padding:12px; border:1px solid var(--border); border-radius:var(--r-s); background:var(--white); animation:errIn var(--t3) var(--ease-out)}
.upload__type{width:56px; height:56px; border-radius:var(--r-s); display:grid; place-items:center; background:var(--navy); color:var(--gold-on-dark); font-size:.6875rem; letter-spacing:.08em}
.upload__meta{display:flex; flex-direction:column; gap:2px; min-width:0; font-size:var(--fs-xs); color:var(--slate)}
.upload__meta strong{font-size:var(--fs-sm); color:var(--navy); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; unicode-bidi:plaintext; text-align:start}
.upload__bar{display:block; height:3px; margin-top:6px; border-radius:3px; background:var(--soft); overflow:hidden}
.upload__bar i{display:block; height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-on-dark)); transform:scaleX(0); transform-origin:var(--origin, right)}
:root[dir="ltr"] .upload__bar i{--origin:left}
.upload.is-done .upload__bar{display:none}
.upload.is-busy .upload__actions{visibility:hidden}
.upload__actions{display:flex; gap:8px}
.upload__actions .btn svg{width:14px; height:14px}
.upload__empty{font-size:var(--fs-xs); color:var(--slate)}
.upload__private{display:flex; gap:6px; align-items:flex-start; font-size:var(--fs-xs); color:var(--slate); line-height:1.7}
.upload__private svg{width:14px; height:14px; flex:none; margin-top:3px}
@media (max-width:639px){
  .upload__item{grid-template-columns:44px minmax(0,1fr)}
  .upload__type{width:44px; height:44px}
  .upload__actions{grid-column:1 / -1}
  .upload__actions .btn{flex:1}
}

/* ---------- Review: showcase consent + summary ---------- */
.agree--soft .agree__box{background:var(--gold-soft); border-color:rgba(184,134,59,.35); align-items:center}
.agree__logo{flex:none; width:44px; height:44px; border-radius:var(--r-s); background:var(--white) center/contain no-repeat; border:1px solid var(--border)}
.agree__box small{display:block; font-size:var(--fs-xs); color:var(--slate)}
.agree + .agree{margin-top:var(--s3)}
.sum{width:100%; margin-top:var(--s5); padding:var(--s5); border-radius:var(--r-m); background:var(--white); border:1px solid var(--border); animation:errIn var(--t4) var(--ease-out) .2s both}
.sum__t{font-size:var(--fs-sm); color:var(--slate); font-weight:600; margin-bottom:var(--s3)}
.sum__grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3) var(--s5)}
.sum__grid dt{font-size:var(--fs-xs); color:var(--slate)}
.sum__grid dd{font-size:var(--fs-sm); font-weight:600; overflow-wrap:anywhere}
.sum__files{margin-top:var(--s4); padding-top:var(--s3); border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:6px; font-size:var(--fs-sm)}
.sum__files li{display:flex; align-items:center; gap:8px}
.sum__files svg{width:16px; height:16px; color:var(--gold-text); flex:none}
.next-act{display:flex; gap:var(--s4); align-items:flex-start; width:100%; margin-top:var(--s5); padding:var(--s4) var(--s5); border-inline-start:2px solid var(--gold); background:var(--soft); border-radius:0 var(--r-s) var(--r-s) 0}
:root[dir="rtl"] .next-act{border-radius:var(--r-s) 0 0 var(--r-s)}
.next-act .mono{color:var(--gold-text); padding-top:3px}
.next-act p{font-size:var(--fs-sm); line-height:1.8}
.next-act strong{display:block}
@media (max-width:899px){ .sum__grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:479px){ .sum__grid{grid-template-columns:minmax(0,1fr)} .wz__nav-end{flex-direction:column-reverse; align-items:stretch; width:100%} }

/* ---------- Network showcase ---------- */
.showcase{min-height:160px}
.sc-note{margin-top:var(--s4); font-size:var(--fs-xs); color:var(--slate); display:flex; gap:6px}
.sc-empty{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:var(--s5); align-items:center; padding:var(--s6); border-radius:var(--r-l); background:var(--white); border:1px dashed #C3C8D0}
.sc-empty__ring{width:64px; height:64px; color:var(--navy)}
.sc-empty__ring svg{width:100%; height:100%; animation:slowspin 24s linear infinite}
.sc-empty strong{display:block; font-size:var(--fs-h3)}
.sc-empty .muted{font-size:var(--fs-sm)}
.sc-single{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s6); align-items:center; max-width:720px; padding:var(--s6); padding-inline-end:150px; border-radius:var(--r-l); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-1); overflow:hidden; isolation:isolate; transition:box-shadow var(--t3), transform var(--t3) var(--ease-out)}
.sc-single:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.sc-single::after{content:""; position:absolute; inset-inline:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent)}
.sc-single__logo{width:160px; height:112px; border-radius:var(--r-m); background:var(--warm-white) center/68% no-repeat; border:1px solid var(--border); animation:logoIn 700ms var(--ease-out)}
.sc-single__body{display:flex; flex-direction:column; gap:4px}
.sc-label{font-size:var(--fs-xs); font-weight:600; color:var(--gold-text)}
.sc-single__body strong{font-size:var(--fs-h3)}
.sc-single__rose{position:absolute; z-index:-1; inset-inline-end:28px; top:50%; width:104px; height:104px; margin-top:-52px; color:var(--navy); opacity:.55}
.sc-single__rose svg{width:100%; height:100%; animation:slowspin 40s linear infinite}
.sc-head{display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4); font-size:var(--fs-xs)}

.sc-marquee{position:relative; overflow:hidden; border-radius:var(--r-l); padding-block:var(--s3); direction:ltr;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.sc-marquee:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.sc-track{display:flex; width:max-content; animation:marquee var(--dur, 36s) linear infinite}
:root[dir="rtl"] .sc-track{animation-direction:reverse}
.sc-marquee:hover .sc-track,.sc-marquee:focus-within .sc-track{animation-play-state:paused}
.is-offscreen .sc-track{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.sc-lane{display:flex; gap:var(--s4); padding-inline-end:var(--s4)}
.sc-item{flex:none}
.sc-logo{width:200px; margin:0; display:flex; flex-direction:column; gap:10px; padding:var(--s4); border-radius:var(--r-m); background:var(--white); border:1px solid var(--border); transition:border-color var(--t3), box-shadow var(--t3), transform var(--t3) var(--ease-out)}
.sc-logo__img{display:block; height:72px; background:center/contain no-repeat; filter:grayscale(1); opacity:.7; transition:filter var(--t4) var(--ease), opacity var(--t4) var(--ease), transform var(--t4) var(--ease-out)}
.sc-logo figcaption{font-size:var(--fs-xs); font-weight:600; color:var(--slate); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:auto; unicode-bidi:plaintext; transition:color var(--t3)}
.sc-logo:hover{border-color:rgba(184,134,59,.55); box-shadow:0 0 0 1px rgba(184,134,59,.25), var(--shadow-2); transform:translateY(-3px)}
.sc-logo:hover .sc-logo__img{filter:none; opacity:1; transform:scale(1.04)}
.sc-logo:hover figcaption{color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .sc-track{animation:none; width:auto; flex-wrap:wrap}
  .sc-lane[aria-hidden="true"],.sc-item[aria-hidden="true"]{display:none}
  .sc-marquee{-webkit-mask-image:none; mask-image:none}
  .sc-lane{flex-wrap:wrap}
}
@media (max-width:639px){
  .sc-empty{grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; padding:var(--s5)}
  .sc-single{grid-template-columns:minmax(0,1fr); justify-items:start; padding:var(--s5)}
  .sc-single__rose{display:none}
  .sc-logo{width:156px}
  .sc-logo__img{height:56px}
}

/* ---------- Route pages shell ---------- */
.page-main{display:block; min-height:70vh; padding-top:var(--header-h); outline:none}
.phead{max-width:760px; margin-bottom:var(--s7)}
.phead__t{margin-bottom:var(--s3)}
.demo-banner{display:flex; gap:10px; align-items:flex-start; margin-top:var(--s5); padding:12px 16px; border-radius:var(--r-s); background:var(--gold-soft); border:1px solid rgba(184,134,59,.3); color:var(--navy); font-size:var(--fs-xs); line-height:1.8}
.demo-banner svg{width:16px; height:16px; flex:none; margin-top:3px; color:var(--gold-text)}

/* ---------- News ---------- */
.nfilter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s6)}
.nchip{min-height:40px; padding:0 16px; border-radius:var(--r-full); border:1px solid var(--border); background:var(--white); font-size:var(--fs-sm); color:var(--navy); transition:background-color var(--t2), color var(--t2), border-color var(--t2)}
.nchip:hover{border-color:var(--navy)}
.nchip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--white)}
.nmeta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:var(--fs-xs); color:var(--slate)}
.ncat{color:var(--gold-text); font-weight:600}
.nsample{padding:1px 8px; border-radius:var(--r-full); border:1px dashed #C3C8D0; font-size:.6875rem}
.nmore{display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:var(--s3); font-size:var(--fs-sm); font-weight:600; color:var(--gold-text)}
.nmore svg{width:14px; height:14px; transition:transform var(--t3) var(--ease-out)}
a:hover .nmore svg{transform:translateX(-5px)}
:root[dir="ltr"] a:hover .nmore svg{transform:scaleX(-1) translateX(-5px)}
.nart{display:block; width:100%; height:100%}
.nart__rose{transform-origin:160px 120px; transition:transform 900ms var(--ease-out)}
.nart__grid{transition:transform 900ms var(--ease-out)}
a:hover .nart__rose{transform:rotate(-18deg) scale(1.06)}
a:hover .nart__grid{transform:translate3d(-8px, 4px, 0)}
.nfeat{margin-bottom:var(--s6)}
.nfeat__link{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); border-radius:var(--r-l); overflow:hidden; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-1); transition:box-shadow var(--t3), transform var(--t3) var(--ease-out)}
.nfeat__link:hover{box-shadow:var(--shadow-2); transform:translateY(-3px)}
.nfeat__media{position:relative; min-height:340px; overflow:hidden}
.nfeat__badge{position:absolute; top:16px; inset-inline-start:16px; padding:6px 12px; border-radius:var(--r-full); background:rgba(9,19,33,.7); color:var(--gold-on-dark); font-size:var(--fs-xs); font-weight:600}
.nfeat__body{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s7) var(--s6)}
.nfeat__t{font-size:clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height:1.35}
.nfeat__x{color:var(--slate); line-height:1.9}
.nfeat__foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-top:auto; font-size:var(--fs-xs)}
.ngrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s4)}
.ncard{height:100%}
.ncard__link{display:flex; flex-direction:column; height:100%; border-radius:var(--r-m); overflow:hidden; background:var(--white); border:1px solid var(--border); transition:box-shadow var(--t3), transform var(--t3) var(--ease-out), border-color var(--t3)}
.ncard__link:hover{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:#C9CDD4}
.ncard__media{display:block; aspect-ratio:16 / 10; overflow:hidden}
.ncard__body{display:flex; flex-direction:column; gap:8px; flex:1; padding:var(--s5)}
.ncard__t{font-size:var(--fs-h3); line-height:1.45}
.ncard__x{font-size:var(--fs-sm); color:var(--slate); line-height:1.8}
.ngrid--more{margin-top:var(--s8)}
.narticle__in{max-width:820px}
.nback{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-bottom:var(--s5); font-size:var(--fs-sm); font-weight:600; color:var(--gold-text)}
.nback svg{width:14px; height:14px}
.narticle__head{display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s6)}
.narticle__t{font-size:var(--fs-h2); line-height:1.3}
.narticle__media{border-radius:var(--r-l); overflow:hidden; aspect-ratio:16 / 8; margin-bottom:var(--s6)}
.narticle__body p{font-size:var(--fs-lead); line-height:2; color:var(--navy); margin-bottom:var(--s4)}
:root[lang="en"] .narticle__body p{line-height:1.8}
@media (max-width:1023px){ .ngrid{grid-template-columns:repeat(2, minmax(0,1fr))} .nfeat__link{grid-template-columns:minmax(0,1fr)} .nfeat__media{min-height:240px} }
@media (max-width:639px){ .ngrid{grid-template-columns:minmax(0,1fr)} .nfeat__body{padding:var(--s5)} }

/* ---------- Academy · Coming soon ---------- */
.acp{min-height:calc(100vh - var(--header-h)); overflow:hidden}
.acp__in{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--s8); align-items:center}
.acp__soon{display:inline-flex; align-items:center; gap:10px; padding:6px 12px; border:1px solid rgba(184,134,59,.45); border-radius:var(--r-full); color:var(--gold-on-dark); margin-bottom:var(--s4)}
.acp__dot{width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 1.8s var(--ease-io) infinite}
.acp__t{font-size:clamp(2.25rem, 1.4rem + 3vw, 4rem); font-weight:700; line-height:1.15; margin-bottom:var(--s4)}
.acp .lead{max-width:34em}
.acp__status{display:flex; align-items:center; gap:var(--s4); margin-top:var(--s6); font-size:var(--fs-xs); color:var(--text-on-dark-3)}
.acp__track{position:relative; flex:1; max-width:260px; height:2px; border-radius:2px; background:var(--line-dark-2); overflow:hidden}
.acp__track i{position:absolute; inset-block:0; width:34%; background:linear-gradient(90deg, transparent, var(--gold), transparent); animation:scan 2.6s var(--ease-io) infinite}
@keyframes scan{from{transform:translateX(-110%)} to{transform:translateX(310%)}}
:root[dir="rtl"] .acp__track i{animation-direction:reverse}
.acp__form{margin-top:var(--s7); padding:var(--s5); border-radius:var(--r-m); background:rgba(255,255,255,.035); border:1px solid var(--line-dark); max-width:560px}
.acp__ft{font-weight:600}
.acp__fd{font-size:var(--fs-sm); margin:4px 0 var(--s4)}
.acp__row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px}
.acp .input{background:rgba(9,19,33,.6); border-color:var(--line-dark-2); color:var(--white)}
.acp .input::placeholder{color:rgba(255,255,255,.45)}
.acp .input:focus{border-color:var(--gold-on-dark); box-shadow:0 0 0 4px rgba(184,134,59,.15)}
.acp .field.is-invalid .input{border-color:var(--danger-on-dark)}
.acp__msg{min-height:1.6em; margin-top:8px; font-size:var(--fs-sm)}
.acp__msg.is-err{color:var(--danger-on-dark)}
.acp__msg.is-ok{color:#9FD8B8}
.acp__msg.is-info{color:var(--gold-on-dark)}
.acp__form.is-done{border-color:rgba(184,134,59,.45)}
.acp__local{margin-top:var(--s2); font-size:var(--fs-xs); color:var(--text-on-dark-3)}
.acp__visual{display:grid; place-items:center}
.acp__compass{position:relative; width:min(100%, 420px); aspect-ratio:1; color:var(--white)}
.acp__ring,.acp__needle{position:absolute; inset:0; width:100%; height:100%}
.acp__ring--1{animation:slowspin 90s linear infinite}
.acp__ring--2{animation:slowspin 50s linear infinite reverse}
.acp__ring--3 text{font-family:var(--mono); font-size:12px; fill:rgba(255,255,255,.45); letter-spacing:.1em}
.acp__ring--3 text.is-s{fill:var(--gold-on-dark)}
.acp__needle{animation:seek 7s var(--ease-io) infinite; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
@keyframes seek{0%{transform:rotate(150deg)} 35%{transform:rotate(172deg)} 55%{transform:rotate(186deg)} 75%{transform:rotate(178deg)} 100%{transform:rotate(150deg)}}
.is-offscreen .acp__ring--1,.is-offscreen .acp__ring--2,.is-offscreen .acp__needle{animation-play-state:paused}
.acp__areas{margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--line-dark)}
.acp__al{font-size:var(--fs-sm); color:var(--text-on-dark-3); margin-bottom:var(--s4)}
.acp__areas ul{display:flex; flex-wrap:wrap; gap:10px}
.acp__areas li{display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:var(--r-full); border:1px solid var(--line-dark-2); font-size:var(--fs-sm); color:var(--text-on-dark-2)}
.acp__areas .mono{color:var(--gold-on-dark)}
.acp__home{margin-top:var(--s6)}
@media (max-width:1023px){ .acp__in{grid-template-columns:minmax(0,1fr); gap:var(--s6)} .acp__visual{order:-1} .acp__compass{width:min(64vw, 300px)} }
@media (max-width:479px){ .acp__row{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .acp__needle{transform:rotate(180deg)} }

/* programmatic focus targets (route headings) should not show a keyboard ring */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,.wz__title:focus,#pageMain:focus{outline:none}
section[tabindex="-1"]:focus,main[tabindex="-1"]:focus{outline:none}
.acp__soonfa{font-family:var(--font); letter-spacing:0; text-transform:none}