/* Page frame from the approved mockup A · Wayfinding:
 * fixed side rail (96px) + sticky top strip; ≤900px — strip + docked bottom bar.
 * Sections keep the mockup's 32px side padding (16px on mobile). */

.main, .foot { margin-left: var(--rail-w); }
main { display: block; }

.wrap { padding-inline: var(--page-pad); }
.sec { padding: var(--space-64) var(--page-pad); border-bottom: 1px solid var(--color-border); }
.sec--tight { padding-block: var(--space-44); }
.sec--flush { border-bottom: 0; }

/* ── side rail ─────────────────────────────────────────────────────────── */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: var(--z-rail);
  width: var(--rail-w);
  display: flex; flex-direction: column;
  background: var(--color-rail); border-right: 1px solid var(--color-border);
}
.rail__logo {
  display: grid; place-items: center; height: 104px; flex: none;
  background: var(--color-brand); color: var(--color-brand-ink); text-decoration: none;
  font: 900 15px/.92 var(--font-display); font-stretch: 125%; letter-spacing: .02em; text-align: center; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease);
}
.rail__logo b { display: block; font-size: 30px; font-stretch: 62%; letter-spacing: -.01em; }
.rail__logo:hover { background: var(--color-brand-hover); }
.rail__nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; flex: 1; overflow-y: auto; scrollbar-width: none; }
.rail .ri {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 11px 4px; color: var(--color-muted); text-decoration: none;
  font: 600 11px/1.1 var(--font-body); letter-spacing: .02em; text-align: center;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.rail .ri .icon { width: 22px; height: 22px; }
.rail .ri:hover { color: var(--color-text); background: var(--color-surface); }
.rail .ri[aria-current] { color: var(--color-brand); }
.rail .ri[aria-current]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--color-brand); }
.rail__foot { border-top: 1px solid var(--color-border); padding: 10px 8px 14px; display: grid; gap: 8px; justify-items: center; }
.rail__foot .ri { width: 100%; }

/* ── top strip ─────────────────────────────────────────────────────────── */
.strip {
  position: sticky; top: 0; z-index: var(--z-strip);
  margin-left: var(--rail-w);
  display: flex; align-items: center; gap: 20px; height: var(--strip-h); padding: 0 var(--page-pad);
  background: rgb(15 18 22 / .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.strip__brand { display: none; align-items: center; gap: 8px; text-decoration: none; font: 900 18px/1 var(--font-display); font-stretch: 70%; text-transform: uppercase; }
.strip__brand i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--color-brand); color: var(--color-brand-ink); font-style: normal; font-size: 13px; font-stretch: 100%; }
.strip__lic { display: flex; align-items: center; gap: 10px; min-width: 0; font: 500 12px/1.3 var(--font-mono); color: var(--color-muted); letter-spacing: .02em; }
.strip__lic span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__ksa { display: block; flex: none; border-radius: var(--radius-sm); }
.strip__ksa img { height: 28px; width: auto; filter: invert(1) brightness(1.1); }
.strip__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.search {
  display: flex; align-items: center; gap: 10px; height: 42px; width: 280px; padding: 0 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-muted);
  transition: border-color var(--dur-fast) var(--ease);
}
.search:hover, .search:focus-within { border-color: var(--color-muted); }
.search .icon { width: 18px; height: 18px; flex: none; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--color-text); font-size: 14px; outline: none; }
.search input::placeholder { color: var(--color-muted); }
.search:focus-within { box-shadow: var(--focus-ring); }
.balance { display: grid; gap: 2px; padding: 4px 12px; border-left: 1px solid var(--color-border); text-decoration: none; line-height: 1; }
.balance__lab { font: 500 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.balance__val { font: 800 16px/1 var(--font-display); font-stretch: 85%; }
.balance:hover .balance__val { color: var(--color-brand); }
.sess { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius); font: 500 13px/1 var(--font-mono); color: var(--color-text-2); }
.sess .icon { width: 16px; height: 16px; color: var(--color-go); }
.strip .menu-btn { display: none; }

/* ── mobile overlay menu ───────────────────────────────────────────────── */
.overlay--menu { place-items: stretch end; padding: 0; }
.mmenu { width: min(100%, 420px); height: 100%; max-height: none; border-radius: 0; padding: 16px; display: flex; flex-direction: column; gap: 16px; background: var(--color-bg); border-left: 1px solid var(--color-border); }
.mmenu__top { display: flex; align-items: center; justify-content: space-between; }
.mmenu .strip__brand { display: flex; }
.search--menu { width: 100%; }
.mmenu__nav { display: grid; gap: 6px; }
.mmenu__sign {
  display: grid; grid-template-columns: 48px 28px 1fr 28px; align-items: center; gap: 10px; min-height: 56px; padding-right: 12px;
  background: var(--color-brand); color: var(--color-brand-ink); border-radius: var(--radius); overflow: hidden; text-decoration: none;
  font: 900 20px/1 var(--font-display); font-stretch: 80%; text-transform: uppercase;
  transition: transform var(--dur-base) var(--ease), background-color var(--dur-fast) var(--ease);
}
.mmenu__sign:hover { transform: translateX(4px); background: var(--color-sign-hover); }
.mmenu__sign[aria-current] { box-shadow: inset 0 0 0 3px var(--color-brand-ink); }
.mmenu__code { display: grid; place-items: center; height: 100%; background: var(--color-brand-ink); color: var(--color-brand); font-size: 18px; font-stretch: 62%; }
.mmenu__sign .icon { width: 24px; height: 24px; }
.mmenu__sign--dark { background: var(--color-surface-2); color: var(--color-text); }
.mmenu__sign--dark:hover { background: var(--color-surface-hover); }
.mmenu__sign--dark .mmenu__code { background: var(--color-brand); color: var(--color-brand-ink); }
.mmenu__links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.mmenu__links a { position: relative; padding: 10px 0; color: var(--color-text-2); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--color-border); }
.mmenu__links a:hover { color: var(--color-brand); }
.mmenu__actions { margin-top: auto; display: grid; gap: 8px; }

/* ── dock (≤900) ───────────────────────────────────────────────────────── */
.dock { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock); grid-template-columns: repeat(5, 1fr); background: var(--color-rail); border-top: 1px solid var(--color-border); padding-bottom: env(safe-area-inset-bottom); }
.dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 2px; color: var(--color-muted); text-decoration: none; font: 600 11px/1 var(--font-body); transition: color var(--dur-fast) var(--ease); }
.dock a .icon { width: 22px; height: 22px; }
.dock a:hover { color: var(--color-text); }
.dock a[aria-current] { color: var(--color-brand); box-shadow: inset 0 3px 0 var(--color-brand); }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--color-border); background: #0B0D10; }
.foot__in { padding: var(--space-56) var(--page-pad) 40px; display: grid; gap: var(--space-44); }
.foot__cols { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--space-32); }
.foot__title { font: 700 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand); margin-bottom: 16px; }
.foot__col ul { display: grid; gap: 4px; }
.foot__col--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.foot a { position: relative; color: var(--color-text-2); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.foot__col a, .foot__legal a { display: inline-block; padding: 4px 0; font-size: 15px; }
.foot a:hover { color: var(--color-brand); }
.foot__legal { padding-top: 24px; border-top: 1px solid var(--color-border); }
.foot__legal ul { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.foot__data { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.fdata { background: var(--color-surface); padding: 20px 22px; }
.fdata__k { font: 700 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 10px; }
.fdata p { font-size: 14px; color: var(--color-text-2); line-height: 1.6; overflow-wrap: anywhere; }
.fdata a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.foot__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mark { display: grid; place-items: center; height: 52px; padding: 8px 14px; background: var(--color-text); border-radius: var(--radius); transition: transform var(--dur-fast) var(--ease); }
a.mark:hover { transform: translateY(-2px); }
.mark img { height: 36px; width: auto; }
.foot__copy { font: 500 12px/1.6 var(--font-mono); color: var(--color-muted); }

/* ── back to top ───────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-header);
  display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--radius);
  background: var(--color-brand); color: var(--color-brand-ink); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.to-top:hover { background: var(--color-brand-hover); transform: translateY(-2px); }
.to-top .icon { width: 22px; height: 22px; }

/* ── responsive frame ──────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .search { width: 200px; }
  .sess { display: none; }
}
@media (max-width: 1100px) {
  .strip__lic span { display: none; }
  .foot__data { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1360px) {
  .strip__lic .lic-long { display: none; }
}
@media (min-width: 1361px) {
  .strip__lic .lic-short { display: none; }
}
@media (max-width: 900px) {
  :root { --page-pad: 16px; }
  .rail { display: none; }
  .strip, .main, .foot { margin-left: 0; }
  .strip { gap: 10px; }
  .strip__lic, .strip .search, .balance__lab { display: none; }
  .strip__brand { display: flex; }
  .strip .menu-btn { display: inline-flex; width: 44px; padding: 0; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); }
  .dock { display: grid; }
  body { padding-bottom: calc(61px + env(safe-area-inset-bottom)); }   /* dock: 60 + 1px border */
  .to-top { bottom: 76px; right: 16px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__col--wide { grid-column: 1 / -1; order: -1; }
  .sec { padding-block: var(--space-44); }
}
@media (max-width: 520px) {
  .hide-s, .btn.hide-s { display: none; }
  .strip .btn--sign .icon { margin: 0; }
  .foot__cols { grid-template-columns: 1fr; }
  .foot__data { grid-template-columns: 1fr; }
  .foot__col--wide ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 389px) {
  .strip__brand span { display: none; }
}