/* TESPAM Eğitim Akademisi — public site styles (spec §9 tokens) */
:root{
  --night:#050F16; --night-2:#0A1A24; --night-3:#10283A;
  --cyan:#1FB8E6; --cyan-strong:#0C8DB8; --cyan-ink:#086A8C; --cyan-tint:#E3F5FB;
  --red:#E0242B; --red-strong:#B81A20; --red-tint:#FCE7E8;
  --bg:#EEF2F4; --surface:#FFFFFF; --surface-2:#F4F7F8; --line:#CFD8DC; --line-soft:#E0E7EA;
  --ink:#0F1B22; --ink-soft:#43545E; --ink-faint:#6C7E88;
  --ok:#1E7F4F; --warn:#A86A00; --danger:#B81A20;
  /* primary button: darkened cyan so white label text meets WCAG AA (4.8:1) */
  --btn:#0A7AA2; --btn-hover:#086A8C;
  --mod-a:#4E7388; --mod-b:#B8732A; --mod-c:#3B8A5A; --mod-d:#0F8A8F; --mod-e:#76598F;
  --r-s:6px; --r-l:10px;
  --shadow-s:0 1px 2px rgba(15,27,34,.05);
  --shadow:0 1px 2px rgba(15,27,34,.05), 0 10px 28px -14px rgba(15,27,34,.22);
  --shadow-lg:0 6px 16px rgba(5,15,22,.12), 0 28px 60px -24px rgba(5,15,22,.45);
  --font-sans:'IBM Plex Sans', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif:'IBM Plex Serif', Georgia, 'Times New Roman', 'Noto Sans Arabic', serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Noto Sans Arabic', monospace;
  --header-h:68px;
  color-scheme:light;
}
html:lang(ar){
  --font-sans:'Noto Sans Arabic', 'IBM Plex Sans', system-ui, Tahoma, Arial, sans-serif;
  --font-serif:'Noto Sans Arabic', 'IBM Plex Serif', Tahoma, serif;
}
html:lang(zh-Hans), html:lang(zh){
  --font-sans:'IBM Plex Sans', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Hiragino Sans GB', sans-serif;
  --font-serif:'IBM Plex Serif', 'PingFang SC', 'Microsoft YaHei', 'Noto Serif SC', 'Noto Serif CJK SC', 'Noto Sans SC', serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
main{flex:1 0 auto; outline:none}
img{max-width:100%; height:auto}
a{color:var(--cyan-ink)}
button, input, select, textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--font-serif); font-weight:600; line-height:1.2; margin:0; color:var(--ink); text-wrap:balance}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
fieldset{margin:0; padding:0; border:0; min-width:0}
[hidden]{display:none !important}
::selection{background:var(--cyan-tint); color:var(--cyan-ink)}
:focus-visible{outline:2px solid var(--cyan-strong); outline-offset:2px}
.mono{font-family:var(--font-mono)}
.muted{color:var(--ink-soft)}
.small{font-size:13px}
.ico{flex:none; display:inline-block; vertical-align:middle}
.arrow{display:inline-block; transition:transform .15s ease}
[dir="rtl"] .arrow{transform:scaleX(-1)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

.wrap{width:100%; max-width:1240px; margin-inline:auto; padding-inline:28px}
.wrap-narrow{max-width:860px}
.wrap-mid{max-width:1000px}
@media (max-width:640px){ .wrap{padding-inline:16px} }

.skip-link{
  position:absolute; inset-inline-start:12px; top:-60px; z-index:200; background:var(--surface); color:var(--ink);
  padding:10px 14px; border-radius:var(--r-s); box-shadow:var(--shadow); text-decoration:none; font-weight:600;
}
.skip-link:focus{top:12px}

/* ================= header ================= */
.site-header{
  position:sticky; top:0; z-index:60; background:var(--night); color:#fff;
  border-bottom:1px solid rgba(31,184,230,.16);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
.header-inner{display:flex; align-items:center; gap:20px; height:var(--header-h)}
.brand{display:flex; align-items:center; text-decoration:none; color:#fff; min-width:0; flex:0 0 auto; margin-inline-end:auto; height:100%;}
.brand-emblem{height:68px; width:102px; object-fit:contain; object-position:center; flex:none; display:block}
.brand-text{display:flex; flex-direction:column; min-width:0; line-height:1.15}
.brand-name{font-family:var(--font-serif); font-weight:600; font-size:17px; letter-spacing:.005em; color:#fff; white-space:nowrap}
.brand-tagline{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(214,238,246,.62); white-space:nowrap; margin-top:3px}
html:lang(ar) .brand-tagline{letter-spacing:0; font-family:var(--font-sans); font-size:12px}
html:lang(zh-Hans) .brand-tagline{letter-spacing:.04em}

.main-nav{display:flex; align-items:center; gap:2px; flex:none}
.main-nav a{
  position:relative; display:block; padding:9px 10px; border-radius:var(--r-s); text-decoration:none; white-space:nowrap;
  color:rgba(233,244,248,.76); font-size:14px; font-weight:500; transition:color .15s ease, background .15s ease;
}
.main-nav a:hover{color:#fff; background:rgba(255,255,255,.06)}
.main-nav a.active{color:#fff}
.main-nav a.active::after{content:""; position:absolute; inset-inline:11px; bottom:-14px; height:2px; background:var(--cyan); border-radius:2px; box-shadow:0 0 10px rgba(31,184,230,.8)}
.header-tools{display:flex; align-items:center; gap:8px; flex:none}

.lang-switch{position:relative}
.lang-btn{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 11px; cursor:pointer;
  background:transparent; color:#E9F4F8; border:1px solid rgba(255,255,255,.2); border-radius:var(--r-s);
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.05em;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"]{border-color:rgba(31,184,230,.6); background:rgba(31,184,230,.08)}
.lang-btn .chev{opacity:.7}
.lang-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:80; min-width:168px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-l); box-shadow:var(--shadow-lg);
  padding:6px; display:flex; flex-direction:column; gap:2px;
}
.lang-option{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  text-align:start; background:none; border:0; border-radius:var(--r-s); padding:9px 12px; cursor:pointer;
  font-family:'IBM Plex Sans', 'Noto Sans Arabic', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; font-size:14.5px; color:var(--ink);
}
.lang-option:hover, .lang-option:focus-visible{background:var(--surface-2)}
.lang-option.active{background:var(--cyan-tint); color:var(--cyan-ink); font-weight:600}
.lang-option.active::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan-strong)}

.nav-toggle{
  display:none; align-items:center; justify-content:center; width:40px; height:38px; cursor:pointer;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:var(--r-s);
}
.nav-toggle:hover{border-color:rgba(31,184,230,.6)}

/* compact header: set by JS when the full nav would not fit, and always below 900px */
.site-header.is-compact .nav-toggle{display:inline-flex}
.site-header.no-tagline .brand-tagline{display:none}
.brand-text{display:none !important}
.site-header.nav-tight .main-nav a{padding-inline:7px; font-size:13.5px}
.site-header.nav-tight .main-nav a.active::after{inset-inline:7px}
.site-header.is-compact .main-nav{
  display:none; position:absolute; top:100%; inset-inline:0; flex-direction:column; align-items:stretch; gap:0;
  background:var(--night-2); border-bottom:1px solid rgba(31,184,230,.16); padding:8px 16px 16px;
  box-shadow:0 18px 30px -12px rgba(0,0,0,.6); max-height:calc(100vh - var(--header-h)); overflow-y:auto;
}
.site-header.is-compact .main-nav.open{display:flex}
.site-header.is-compact .main-nav a{padding:13px 12px; font-size:15.5px; border-bottom:1px solid rgba(255,255,255,.06); border-radius:0}
.site-header.is-compact .main-nav a:last-child{border-bottom:0}
.site-header.is-compact .main-nav a.active{background:rgba(31,184,230,.1); border-radius:var(--r-s)}
.site-header.is-compact .main-nav a.active::after{inset-inline:auto; inset-inline-start:0; top:10px; bottom:10px; width:3px; height:auto}
@media (max-width:560px){
  :root{--header-h:68px}
  .header-inner{gap:10px}
  .brand{gap:9px}
  .brand-emblem{height:56px; width:84px}
  .brand-name{font-size:15px; white-space:normal}
  .brand-tagline{display:none}
  .lang-btn{padding:0 9px; gap:5px}
  .lang-btn .chev{display:none}
}
@media (max-width:370px){
  .brand-emblem{height:50px; width:75px}
  .brand-name{font-size:14px}
}

/* ================= buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px;
  border-radius:var(--r-s); border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-family:var(--font-sans); font-size:14.5px; font-weight:600; line-height:1.15; letter-spacing:.005em;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn); color:#fff}
.btn-primary:hover{background:var(--btn-hover); color:#fff}
.btn-dark{background:var(--night-3); color:#fff}
.btn-dark:hover{background:var(--night-2)}
.btn-outline{background:var(--surface); border-color:var(--line); color:var(--ink)}
.btn-outline:hover{border-color:var(--cyan-strong); color:var(--cyan-ink)}
.btn-ghost-light{background:rgba(255,255,255,.03); border-color:rgba(214,238,246,.3); color:#fff}
.btn-ghost-light:hover{background:rgba(31,184,230,.12); border-color:rgba(31,184,230,.6); color:#fff}
.btn-sm{min-height:36px; padding:0 13px; font-size:13.5px}
.btn-lg{min-height:50px; padding:0 24px; font-size:15.5px}
.btn-block{display:flex; width:100%}
.btn[disabled], .btn[disabled]:hover{opacity:.5; cursor:not-allowed; transform:none; background:var(--surface-2); color:var(--ink-faint); border-color:var(--line-soft)}
.btn:hover .arrow{transform:translateX(3px)}
[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(3px)}
.linklike{background:none; border:0; padding:0; cursor:pointer; color:var(--cyan-ink); font-weight:600; text-decoration:underline; text-decoration-color:rgba(8,106,140,.35); text-underline-offset:3px}
.linklike:hover{text-decoration-color:currentColor}
.linklike.inline{font-weight:600; font-size:inherit}
.spinner{width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; display:inline-block; animation:spin .7s linear infinite; opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= hero ================= */
.hero{
  position:relative; overflow:hidden; color:#E6F3F8;
  background:
    radial-gradient(ellipse 46% 78% at 74% 46%, rgba(2,54,67,.98) 0%, rgba(2,46,58,.88) 38%, rgba(3,30,40,.55) 62%, rgba(4,20,28,0) 82%),
    radial-gradient(ellipse 70% 55% at 12% -10%, rgba(31,184,230,.10), rgba(31,184,230,0) 70%),
    linear-gradient(180deg, #03161E 0%, #04131B 55%, #030B10 100%);
}
[dir="rtl"] .hero{
  background:
    radial-gradient(ellipse 46% 78% at 26% 46%, rgba(2,54,67,.98) 0%, rgba(2,46,58,.88) 38%, rgba(3,30,40,.55) 62%, rgba(4,20,28,0) 82%),
    radial-gradient(ellipse 70% 55% at 88% -10%, rgba(31,184,230,.10), rgba(31,184,230,0) 70%),
    linear-gradient(180deg, #03161E 0%, #04131B 55%, #030B10 100%);
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; padding-block:56px 64px}
.hero-copy{position:relative; z-index:1}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:20px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#8FDCF4;
}
.hero-eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.7; flex:none}
html:lang(ar) .hero-eyebrow{letter-spacing:0; font-family:var(--font-sans); font-size:13.5px}
.hero-title{font-size:clamp(31px, 3.9vw, 52px); line-height:1.12; color:#fff; margin-bottom:20px; letter-spacing:-.005em}
.hero-title em{font-style:normal; color:var(--cyan); text-shadow:0 0 28px rgba(31,184,230,.35)}
html:lang(ar) .hero-title, html:lang(zh-Hans) .hero-title{line-height:1.3}
.hero-lead{font-size:17px; line-height:1.65; color:rgba(221,238,244,.8); max-width:58ch; margin-bottom:30px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-art{position:relative; display:flex; justify-content:center; isolation:isolate}
/* the official logo is shown intact as a framed panel (no masking / fading of the mark) */
.hero-art::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%; width:calc(min(100%, 560px) * 1.25); aspect-ratio:3/2.2; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(31,184,230,.16), rgba(31,184,230,.05) 60%, rgba(31,184,230,0) 100%);
  pointer-events:none;
}
.hero-logo{
  position:relative; display:block; width:100%; max-width:560px; height:auto; aspect-ratio:3/2;
  border-radius:18px; border:1px solid rgba(31,184,230,.24); background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 34px 80px -28px rgba(0,0,0,.85), 0 0 70px -18px rgba(31,184,230,.35);
}
.strata{display:flex; height:5px; width:100%}
.strata-band{display:block; background:var(--m); min-width:4px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:28px; padding-block:28px 44px}
  .hero-art{order:-1}
  .hero-logo{max-width:520px; margin-inline:auto}
  .hero, [dir="rtl"] .hero{
    background:
      radial-gradient(ellipse 90% 42% at 50% 22%, rgba(2,54,67,.98) 0%, rgba(2,46,58,.85) 40%, rgba(4,20,28,0) 80%),
      linear-gradient(180deg, #03161E 0%, #04131B 55%, #030B10 100%);
  }
  .hero-lead{font-size:16px}
}
@media (max-width:560px){
  .hero-logo{border-radius:14px}
  .hero-cta .btn{flex:1 1 100%}
}

/* ================= stats ================= */
.stats{background:var(--surface); border-bottom:1px solid var(--line-soft)}
.stats-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr))}
.stat{padding:26px 24px; border-inline-start:1px solid var(--line-soft); display:flex; flex-direction:column; gap:2px}
.stat:first-child{border-inline-start:0; padding-inline-start:0}
.stat-value{font-family:var(--font-mono); font-size:32px; font-weight:600; line-height:1.1; color:var(--cyan-ink); letter-spacing:-.02em}
.stat-label{font-family:var(--font-serif); font-size:15.5px; font-weight:600; color:var(--ink)}
.stat-detail{font-size:13px; color:var(--ink-faint); line-height:1.45; margin-top:4px}
@media (max-width:900px){
  .stats-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .stat{padding:20px 16px}
  .stat:nth-child(odd){border-inline-start:0; padding-inline-start:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

/* ================= sections ================= */
.section{padding-block:68px}
.section-alt{background:var(--surface-2); border-top:1px solid var(--line-soft)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; margin-bottom:30px; flex-wrap:wrap}
.section-head-text{min-width:0; max-width:760px}
.section-title{font-size:clamp(25px, 2.7vw, 34px)}
.section-desc{color:var(--ink-soft); margin-top:10px; max-width:66ch; font-size:16px}
.kicker{display:block; margin-bottom:8px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-ink)}
.label-mono{display:block; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
html:lang(ar) .kicker, html:lang(ar) .label-mono{letter-spacing:0; font-family:var(--font-sans); font-size:13px; font-weight:600}
html:lang(zh-Hans) .kicker, html:lang(zh-Hans) .label-mono{letter-spacing:.06em}
.more-link{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px; color:var(--cyan-ink); text-decoration:none; white-space:nowrap}
.more-link:hover{text-decoration:underline; text-underline-offset:3px}
.empty{padding:36px 20px; text-align:center; color:var(--ink-faint); border:1px dashed var(--line); border-radius:var(--r-l); background:var(--surface)}
.card{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:28px; box-shadow:var(--shadow-s)}
.card-head{margin-bottom:18px}
.card-title{display:flex; align-items:center; gap:10px; font-size:20px; margin-bottom:6px}
.card-title .ico{color:var(--cyan-ink); width:20px; height:20px}
@media (max-width:640px){ .section{padding-block:44px} .card{padding:20px} .section-head{margin-bottom:22px} }
.page-loading{display:flex; align-items:center; justify-content:center; gap:12px; min-height:50vh; color:var(--ink-faint)}

/* ================= modules ================= */
.modules-grid{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px}
.module-card{
  --m:var(--mod-a);
  position:relative; display:flex; flex-direction:column; gap:10px; padding:20px 18px 18px; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-l); overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.module-card::before{content:""; position:absolute; inset-inline:0; top:0; height:4px; background:var(--m)}
.module-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--m) 40%, var(--line-soft))}
.module-code{font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; color:color-mix(in srgb, var(--m) 72%, #000)}
html:lang(ar) .module-code{letter-spacing:0}
.module-title{font-size:17px; line-height:1.25}
.module-focus{font-size:13.5px; color:var(--ink-soft); flex:1; line-height:1.5}
.module-count{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); padding-top:10px; border-top:1px solid var(--line-soft)}
.module-card:hover .module-count{color:var(--cyan-ink)}
.module-card:hover .arrow{transform:translateX(3px)}
[dir="rtl"] .module-card:hover .arrow{transform:scaleX(-1) translateX(3px)}
@media (max-width:1100px){ .modules-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:760px){ .modules-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:480px){ .modules-grid{grid-template-columns:1fr} }

/* ================= home split ================= */
.home-split{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:40px; align-items:start}
.section-head-row{align-items:flex-end; margin-bottom:20px}
.section-head-row .section-title{font-size:clamp(22px, 2.2vw, 27px)}
@media (max-width:1000px){ .home-split{grid-template-columns:1fr; gap:48px} }

/* ================= sessions ================= */
.session-list{display:flex; flex-direction:column; gap:12px}
.session-row{
  --m:var(--mod-a);
  display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:18px; align-items:center;
  background:var(--surface); border:1px solid var(--line-soft); border-inline-start:3px solid var(--m);
  border-radius:var(--r-s); padding:16px 18px; box-shadow:var(--shadow-s);
}
.session-row.compact{grid-template-columns:78px minmax(0,1fr) auto; padding:14px 16px; gap:14px}
.session-row.is-muted{opacity:.82}
.session-row.is-past{opacity:.7}
.date-block{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1px; padding:10px 6px; background:var(--surface-2); border-radius:var(--r-s); border:1px solid var(--line-soft); min-height:74px}
.db-days{font-family:var(--font-mono); font-weight:600; font-size:18px; line-height:1.1; color:var(--ink); white-space:nowrap}
.db-month{font-size:12.5px; font-weight:600; color:var(--cyan-ink); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
.db-year{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint)}
.date-block-split .db-days{font-size:13.5px}
.date-block-split .db-month{font-size:13.5px; font-family:var(--font-mono); color:var(--ink); text-transform:none}
.compact .db-days{font-size:16px}
html:lang(ar) .db-month{letter-spacing:0}
.session-main{min-width:0}
.session-when{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.p-session .session-when{position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; font-family:var(--font-mono); font-size:14px; color:var(--ink); margin:4px 0 10px}
.session-title{font-size:16.5px; line-height:1.3; margin-bottom:8px}
.compact .session-title{font-size:15.5px}
.session-title a{color:var(--ink); text-decoration:none}
.session-title a:hover{color:var(--cyan-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.code{font-family:var(--font-mono); font-size:.78em; font-weight:600; letter-spacing:.02em; color:color-mix(in srgb, var(--m, var(--mod-a)) 72%, #000); white-space:nowrap}
.meta{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13.5px; color:var(--ink-soft)}
.meta-item{display:inline-flex; align-items:center; gap:6px}
.meta-item .ico{color:var(--ink-faint); width:15px; height:15px}
.session-note{font-size:13px; color:var(--ink-faint); margin-top:8px; font-style:italic}
html:lang(ar) .session-note, html:lang(zh-Hans) .session-note{font-style:normal}
.session-side{display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.compact .meta{font-size:13px}
@media (max-width:720px){
  .session-row, .session-row.compact{grid-template-columns:70px minmax(0,1fr); gap:14px; padding:14px}
  .session-side{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line-soft)}
  .date-block{min-height:64px}
  .db-days{font-size:15px}
}

.avail, .status-pill{
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px; white-space:nowrap;
  font-size:12.5px; font-weight:600; line-height:1.3; background:#E8EDF0; color:#4F5F68;
}
.avail-dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.avail-open{background:#E2F2E9; color:var(--ok)}
.avail-limited{background:#FBEFD6; color:#865400}
.avail-full{background:var(--red-tint); color:var(--red-strong)}
.avail-closed, .avail-cancelled{background:#E8EDF0; color:#56666F}
.avail-planned{background:var(--cyan-tint); color:var(--cyan-ink)}
.sp-cyan{background:var(--cyan-tint); color:var(--cyan-ink)}
.sp-violet{background:#EEEBFB; color:#5747C4}
.sp-ok{background:#E2F2E9; color:var(--ok)}
.sp-warn{background:#FBEFD6; color:#865400}
.sp-danger{background:var(--red-tint); color:var(--danger)}
.sp-grey{background:#E8EDF0; color:#56666F}
.sp-teal{background:#DFEEF3; color:#0F5E7A}
.status-pill{font-size:14px; padding:7px 14px; white-space:normal}

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line-soft);
}
html:lang(ar) .pill{font-family:var(--font-sans); font-size:12.5px}
.pill .ico{width:13px; height:13px}
.pill-cyan{background:var(--cyan-tint); border-color:transparent; color:var(--cyan-ink)}
.tag{display:inline-flex; align-items:center; padding:3px 8px; border-radius:4px; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
html:lang(ar) .tag{letter-spacing:0; font-family:var(--font-sans); font-size:12px}
.tag-red{background:var(--red-tint); color:var(--red-strong)}

details.past{margin-top:36px; border-top:1px solid var(--line); padding-top:18px}
details.past summary{cursor:pointer; display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--ink-soft); padding:6px 0; list-style:none}
details.past summary::-webkit-details-marker{display:none}
details.past summary::before{content:""; width:8px; height:8px; border-inline-end:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s ease}
[dir="rtl"] details.past summary::before{transform:rotate(45deg)}
details.past[open] summary::before{transform:rotate(45deg)}
[dir="rtl"] details.past[open] summary::before{transform:rotate(45deg)}
details.past[open] > .session-list{margin-top:14px}
.count-badge{font-family:var(--font-mono); font-size:12px; background:var(--surface); border:1px solid var(--line-soft); border-radius:999px; padding:1px 8px}

/* ================= announcements ================= */
.announce-list{display:flex; flex-direction:column; gap:14px}
.announce-card{position:relative; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:22px 24px; box-shadow:var(--shadow-s)}
.announce-card.pinned{border-color:rgba(184,26,32,.28); box-shadow:inset 3px 0 0 var(--red), var(--shadow-s)}
[dir="rtl"] .announce-card.pinned{box-shadow:inset -3px 0 0 var(--red), var(--shadow-s)}
.announce-card.compact{padding:18px 20px}
.announce-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px}
.announce-date{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint)}
.announce-title{font-size:18px; margin-bottom:8px}
.announce-card.compact .announce-title{font-size:16px}
.announce-body{color:var(--ink-soft); font-size:15px; white-space:pre-line}
.announce-card.compact .announce-body{font-size:14px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}

/* ================= catalog ================= */
.catalog-layout{display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; align-items:start}
.filters{position:sticky; top:calc(var(--header-h) + 20px); display:flex; flex-direction:column; gap:22px; padding:20px}
.filter-group{display:flex; flex-direction:column; gap:10px}
.chip-list{display:flex; flex-direction:column; gap:6px}
.chip{
  --m:var(--mod-a);
  display:flex; align-items:center; gap:9px; width:100%; text-align:start; cursor:pointer;
  padding:8px 10px; border:1px solid var(--line-soft); border-radius:var(--r-s); background:var(--surface);
  font-size:13.5px; color:var(--ink-soft); line-height:1.3; transition:background .12s ease, border-color .12s ease;
}
.chip:hover{border-color:var(--line); background:var(--surface-2)}
.chip-dot{width:10px; height:10px; border-radius:3px; background:var(--m); flex:none}
.chip-code{font-family:var(--font-mono); font-weight:600; font-size:12px; color:var(--ink)}
.chip-label{min-width:0}
.chip[aria-pressed="true"]{background:color-mix(in srgb, var(--m) 11%, #fff); border-color:color-mix(in srgb, var(--m) 55%, #fff); color:var(--ink)}
.chip[aria-pressed="true"] .chip-dot{box-shadow:0 0 0 3px color-mix(in srgb, var(--m) 25%, transparent)}
.filter-reset{align-self:flex-start; font-size:13.5px}
.result-count{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); margin-bottom:14px}
html:lang(ar) .result-count{font-family:var(--font-sans); font-size:13.5px}
.course-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:12px}
.course-card{
  --m:var(--mod-a);
  display:flex; flex-direction:column; gap:10px; padding:16px 16px 14px; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-soft); border-inline-start:3px solid var(--m); border-radius:var(--r-s);
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.course-card:hover{box-shadow:var(--shadow); border-color:var(--line); border-inline-start-color:var(--m); transform:translateY(-1px)}
.course-card-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.course-card .code{font-size:12px}
.course-name{font-size:15.5px; line-height:1.32; flex:1}
.course-meta{display:flex; flex-wrap:wrap; gap:6px}
@media (max-width:900px){
  .catalog-layout{grid-template-columns:1fr; gap:18px}
  .filters{position:static; display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .filter-group:nth-child(2){grid-column:1 / -1}
  .chip-list{flex-direction:row; flex-wrap:wrap}
  .chip{width:auto}
}
@media (max-width:560px){
  .filters{grid-template-columns:1fr}
  .chip-label{display:none}
  .chip{padding:8px 12px}
  .course-grid{grid-template-columns:1fr}
}

/* ================= drawer ================= */
.drawer-overlay{position:fixed; inset:0; z-index:90; background:rgba(5,15,22,.55); opacity:0; transition:opacity .2s ease}
.drawer-overlay.open{opacity:1}
.drawer{
  --m:var(--mod-a);
  position:fixed; top:0; bottom:0; inset-inline-end:0; z-index:100; width:min(620px, 100%);
  display:flex; flex-direction:column; background:var(--surface); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .22s cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.open, [dir="rtl"] .drawer.open{transform:translateX(0)}
body.drawer-open{overflow:hidden}
.drawer-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:24px 26px 20px; border-bottom:1px solid var(--line-soft); border-top:4px solid var(--m)}
.drawer-headings{min-width:0}
.drawer-headings .kicker{color:color-mix(in srgb, var(--m) 72%, #000); margin-bottom:6px}
.drawer-code{font-size:13px; font-weight:600; color:var(--ink-faint); margin-bottom:4px}
.drawer-title{font-size:22px; line-height:1.25}
.drawer-body{flex:1; overflow-y:auto; padding:20px 26px 28px; overscroll-behavior:contain}
.drawer-foot{padding:16px 26px; border-top:1px solid var(--line-soft); background:var(--surface-2)}
.drawer-section{margin-top:24px}
.drawer-section > .label-mono{margin-bottom:10px}
.prose{color:var(--ink-soft); font-size:15px; line-height:1.7}
.prose + .prose{margin-top:12px}
.topic-list{display:grid; grid-template-columns:1fr 1fr; gap:8px 20px}
.topic-list li{position:relative; padding-inline-start:18px; font-size:14px; color:var(--ink-soft); line-height:1.45}
.topic-list li::before{content:""; position:absolute; inset-inline-start:0; top:.62em; width:9px; height:2px; background:var(--m)}
.drawer-sessions{display:flex; flex-direction:column; gap:10px}
.ds-item{border:1px solid var(--line-soft); border-radius:var(--r-s); padding:14px; background:var(--surface-2)}
.ds-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.ds-date{font-weight:600; font-size:15px}
.ds-actions{margin-top:12px}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s); color:var(--ink-soft)}
.icon-btn:hover{color:var(--ink); border-color:var(--ink-faint)}
@media (max-width:560px){
  .drawer-head{padding:18px 16px 16px}
  .drawer-body{padding:16px 16px 24px}
  .drawer-foot{padding:12px 16px}
  .topic-list{grid-template-columns:1fr}
  .drawer-title{font-size:19px}
}

/* documents */
.doc-list{display:flex; flex-direction:column; gap:8px}
.doc-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line-soft); border-radius:var(--r-s); background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .12s ease, background .12s ease}
a.doc-item:hover{border-color:var(--cyan-strong); background:var(--cyan-tint)}
.doc-ext{flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-s); background:var(--night-3); color:#BFEAF7; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.04em}
.doc-text{display:flex; flex-direction:column; min-width:0; flex:1}
.doc-title{font-weight:600; font-size:14.5px; overflow-wrap:anywhere}
.doc-desc{font-size:13px; color:var(--ink-soft)}
.doc-meta{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint)}
.doc-dl{flex:none; display:inline-flex; align-items:center; gap:6px; color:var(--cyan-ink); font-weight:600; font-size:13px}
@media (max-width:480px){ .doc-dl-label{display:none} }

/* ================= forms ================= */
.apply-layout{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:28px; align-items:start}
.apply-side{position:sticky; top:calc(var(--header-h) + 20px)}
@media (max-width:1020px){ .apply-layout{grid-template-columns:1fr} .apply-side{position:static} }
.form-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 18px}
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field.span-2{grid-column:1 / -1}
.field-label{font-size:13.5px; font-weight:600; color:var(--ink-soft); padding:0}
.req{color:var(--red-strong)}
.field-hint{font-size:12.5px; color:var(--ink-faint)}
.field-error{font-size:12.5px; color:var(--danger); font-weight:500}
.input{
  width:100%; min-height:46px; padding:10px 12px; font-size:15px; line-height:1.4;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-s);
  transition:border-color .12s ease, box-shadow .12s ease;
}
textarea.input{min-height:96px; resize:vertical}
select.input{appearance:none; -webkit-appearance:none; padding-inline-end:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2343545E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center}
[dir="rtl"] select.input{background-position:left 13px center}
select.input:disabled{background-color:var(--surface-2); color:var(--ink-faint); cursor:not-allowed}
.input::placeholder{color:#8C9CA4}
.input:hover{border-color:#B6C3C9}
.input:focus{outline:none; border-color:var(--cyan-strong); box-shadow:0 0 0 3px rgba(12,141,184,.18)}
.input[aria-invalid="true"]{border-color:var(--danger); box-shadow:0 0 0 3px rgba(184,26,32,.12)}
.mono-input, .code-input{font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase}
.code-input{font-size:19px; letter-spacing:.22em; font-weight:600}
.code-input::placeholder{letter-spacing:.06em}
.radio-group legend{margin-bottom:7px}
.segmented{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.seg{position:relative; display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-s); cursor:pointer; font-size:14.5px; font-weight:500; background:var(--surface); transition:border-color .12s ease, background .12s ease}
.seg input{accent-color:var(--btn); width:17px; height:17px; margin:0; flex:none}
.seg:has(input:checked){border-color:var(--cyan-strong); background:var(--cyan-tint); color:var(--cyan-ink)}
.seg:hover{border-color:#B6C3C9}
.check-row{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line-soft); border-radius:var(--r-s); background:var(--surface-2)}
.check-row input{accent-color:var(--btn); width:19px; height:19px; margin:2px 0 0; flex:none; cursor:pointer}
.check-text{font-size:14px; color:var(--ink-soft); line-height:1.55}
.check-text label{cursor:pointer}
.check-row.invalid{border-color:var(--danger); background:#FDF3F3}
.hp{position:absolute !important; inset-inline-start:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.form-msg:not(:empty){margin-top:18px}
.form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px}
.form-note{font-size:13px; color:var(--ink-faint)}
.apply-form > .banner:first-child{margin-bottom:22px}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .segmented{grid-template-columns:1fr}
  .form-actions .btn{width:100%}
}

.banner{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-s); font-size:14.5px; line-height:1.5; border:1px solid transparent}
.banner .ico{width:18px; height:18px; margin-top:2px}
.banner-text{min-width:0}
.banner-text a{font-weight:600}
.banner-info{background:var(--cyan-tint); color:#0B4F68; border-color:#C4E7F3}
.banner-error{background:#FDF0F0; color:#8F1419; border-color:#F3C9CB}
.banner-warn{background:#FBF2DF; color:#6F4700; border-color:#F0DDB3}

/* success */
.success{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding-block:18px; outline:none}
.success-icon{width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#E2F2E9; color:var(--ok); margin-bottom:4px}
.success-icon .ico{width:30px; height:30px; stroke-width:2.2}
.success-title{font-size:26px}
.ref-box{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; padding:14px 18px; border:1px dashed #9FC9D8; border-radius:var(--r-l); background:var(--cyan-tint)}
.ref{font-family:var(--font-mono); font-size:clamp(22px, 3.4vw, 32px); font-weight:600; letter-spacing:.04em; color:var(--night-3)}
.small-ref{font-size:13px; color:var(--ink-soft)}
.copy-btn.copied{border-color:var(--ok); color:var(--ok)}
.success-note{max-width:56ch; color:var(--ink-soft); font-size:14.5px; margin-bottom:6px}
.success .banner{text-align:start; max-width:560px}

/* status lookup */
.status-card .card-title{font-size:21px}
.status-form{display:flex; flex-direction:column; gap:14px}
.status-out:not(:empty){margin-top:18px}
.status-result{border:1px solid var(--line-soft); border-radius:var(--r-l); padding:16px; background:var(--surface-2); display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.status-result-head{display:flex; justify-content:space-between; align-items:center; width:100%; gap:10px}
.kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:0; font-size:14px; width:100%}
.kv dt{color:var(--ink-faint)}
.kv dd{margin:0; color:var(--ink); font-weight:500; overflow-wrap:anywhere}

/* participant */
.participant-body{display:flex; flex-direction:column; gap:20px}
.code-card{max-width:560px}
.code-row{display:flex; gap:12px; align-items:flex-end}
.code-row .field{flex:1}
.code-row .btn{min-height:46px}
@media (max-width:480px){ .code-row{flex-direction:column; align-items:stretch} }
.p-session{--m:var(--mod-a); border-top:4px solid var(--m)}
.p-session-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.p-title{font-size:22px; margin-top:6px}
.p-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; align-items:start}
.p-grid .card-title{margin-bottom:16px; font-size:18px}
@media (max-width:860px){ .p-grid{grid-template-columns:1fr} }
.survey-list{display:flex; flex-direction:column; gap:10px}
.survey-item{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line-soft); border-radius:var(--r-s); background:var(--surface-2)}
.survey-name{font-weight:600; font-size:14.5px; min-width:0}
.back-row{margin-top:16px}

/* survey */
.survey-form{display:flex; flex-direction:column; gap:14px}
.q-card{padding:22px 24px}
.q-card.invalid{border-color:var(--danger); box-shadow:0 0 0 3px rgba(184,26,32,.08)}
.q-label{display:flex; align-items:baseline; gap:10px; font-weight:600; font-size:16px; margin-bottom:6px}
.q-num{flex:none; font-family:var(--font-mono); font-size:12px; color:var(--cyan-ink); background:var(--cyan-tint); border-radius:4px; padding:2px 7px}
.q-help{font-size:13.5px; color:var(--ink-faint); margin-bottom:6px}
.q-card > .input, .q-card > .scale, .q-card > .choice-list{margin-top:12px}
.scale-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(42px, 1fr)); gap:6px}
.scale-nps .scale-row{grid-template-columns:repeat(11, minmax(0,1fr)); gap:5px}
.scale-opt{position:relative; cursor:pointer}
.scale-opt input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.scale-opt span{display:flex; align-items:center; justify-content:center; height:46px; border:1px solid var(--line); border-radius:var(--r-s); font-family:var(--font-mono); font-weight:600; font-size:15px; background:var(--surface); transition:background .12s ease, border-color .12s ease, color .12s ease}
.scale-opt:hover span{border-color:var(--cyan-strong)}
.scale-opt input:checked + span{background:var(--btn); border-color:var(--btn); color:#fff}
.scale-opt input:focus-visible + span{outline:2px solid var(--cyan-strong); outline-offset:2px}
.scale-caps{display:flex; justify-content:space-between; gap:12px; margin-top:8px; font-size:12.5px; color:var(--ink-faint)}
.choice-list{display:flex; flex-direction:column; gap:8px}
.choice{display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border:1px solid var(--line-soft); border-radius:var(--r-s); cursor:pointer; font-size:15px; background:var(--surface)}
.choice:hover{border-color:var(--line)}
.choice:has(input:checked){border-color:var(--cyan-strong); background:var(--cyan-tint)}
.choice input{accent-color:var(--btn); width:18px; height:18px; margin:2px 0 0; flex:none}
@media (max-width:560px){
  .q-card{padding:18px 16px}
  .scale-nps .scale-row{grid-template-columns:repeat(6, minmax(0,1fr))}
  .scale-opt span{height:42px}
}

/* ================= about ================= */
.about-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:start}
.about-text .prose{font-size:16px}
.lead-p{color:var(--ink); font-size:17px !important}
.offices{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.office{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:13.5px; color:var(--ink-soft)}
.office .ico{width:14px; height:14px; color:var(--red)}
.contacts{display:flex; flex-direction:column; gap:10px; margin-top:24px; align-items:flex-start}
.contact{display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--cyan-ink); text-decoration:none; font-size:15px}
.contact .ico{width:18px; height:18px}
.contact:hover span{text-decoration:underline; text-underline-offset:3px}
.formats{display:flex; flex-direction:column}
.format-item{padding-block:16px; border-top:1px solid var(--line-soft)}
.format-item:first-child{border-top:0; padding-top:6px}
.format-name{font-size:16.5px; margin-bottom:6px}
.format-desc{font-size:14.5px; color:var(--ink-soft)}
.format-best{display:flex; flex-direction:column; gap:3px; margin-top:10px; font-size:14px; color:var(--ink)}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} }

/* ================= footer ================= */
.site-footer{background:var(--night); color:rgba(214,234,242,.72); margin-top:0; border-top:1px solid rgba(31,184,230,.14)}
.footer-main{display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; padding-block:36px 28px}
.footer-brand{display:flex; align-items:center; gap:14px}
.footer-emblem{height:48px; width:auto; display:block}
.footer-name{display:block; font-family:var(--font-serif); font-size:16px; font-weight:600; color:#fff}
.footer-tagline{display:block; font-size:13px; color:rgba(214,234,242,.6)}
.footer-links{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center}
.footer-links a, .footer-links .linklike{color:rgba(223,240,246,.78); text-decoration:none; font-size:14px; font-weight:500}
.footer-links .linklike{text-decoration:none}
.footer-links a:hover, .footer-links .linklike:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.footer-email{font-family:var(--font-mono); font-size:13.5px !important; color:#8FDCF4 !important}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:14px 24px; flex-wrap:wrap; padding-block:18px 22px; border-top:1px solid rgba(255,255,255,.07)}
.footer-bottom small{font-size:12.5px; color:rgba(214,234,242,.5)}
.footer-admin{font-size:11.5px; color:rgba(214,234,242,.3); text-decoration:none; letter-spacing:.02em}
.footer-admin:hover{color:rgba(214,234,242,.6); text-decoration:underline}

/* ================= modal ================= */
.modal{
  width:min(700px, calc(100% - 32px)); max-height:min(80vh, 760px); padding:0; border:0; border-radius:var(--r-l);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); overflow:hidden;
}
.modal[open]{display:flex; flex-direction:column}
.modal::backdrop{background:rgba(5,15,22,.62)}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line-soft); border-top:4px solid var(--cyan-strong)}
.modal-head h2{font-size:19px}
.modal-body{padding:20px 24px 26px; overflow-y:auto; color:var(--ink-soft); font-size:15px; line-height:1.7}
.modal-body p + p{margin-top:12px}

/* toast */
.toast-host{position:fixed; bottom:20px; inset-inline:0; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:150; pointer-events:none}
.toast{display:inline-flex; align-items:center; gap:8px; background:var(--night-3); color:#fff; padding:10px 16px; border-radius:var(--r-s); box-shadow:var(--shadow-lg); font-size:14px; animation:toast-in .18s ease}
@keyframes toast-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
body.is-busy{cursor:progress}