/* ANTIGRAVITY — minimalist monochrome interface */
:root {
  color-scheme: light;
  --ink: #151719;
  --muted: #707478;
  --muted-2: #969a9d;
  --paper: rgba(250,250,248,.88);
  --panel: rgba(255,255,255,.91);
  --panel-solid: #fff;
  --line: rgba(23,25,27,.12);
  --line-strong: rgba(23,25,27,.2);
  --soft: #f1f1ee;
  --accent: #17191b;
  --shadow: 0 24px 80px rgba(11,13,14,.13);
  --radius: 26px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif; background: #d8d9d7;
  transition: color .35s ease, background .35s ease;
  -webkit-font-smoothing: antialiased;
}
body.dark {
  color-scheme: dark; --ink: #f4f4f1; --muted: #b0b3b4; --muted-2: #777d80;
  --paper: rgba(23,25,26,.87); --panel: rgba(28,30,31,.94); --panel-solid: #222526;
  --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.23);
  --soft: #2a2d2e; --accent: #f4f4f1; --shadow: 0 24px 90px rgba(0,0,0,.34);
}
button, input, select { font: inherit; }
button { color: inherit; }
.backdrop { position: fixed; inset: 0; z-index: -2; overflow: hidden; background:
  linear-gradient(115deg, rgba(17,22,24,.48), rgba(17,22,24,.08) 48%, rgba(17,22,24,.24)),
  radial-gradient(ellipse at 50% 12%, rgba(255,255,255,.92), transparent 48%),
  linear-gradient(145deg,#c4c8c7 0%,#89908f 38%,#333b3b 100%); }
.backdrop:before, .backdrop:after { content:""; position:absolute; inset:-10%; pointer-events:none; }
.backdrop:before { opacity:.33; background:
  repeating-linear-gradient(112deg, transparent 0 48px, rgba(255,255,255,.12) 49px, transparent 51px),
  repeating-linear-gradient(72deg, transparent 0 71px, rgba(0,0,0,.08) 72px, transparent 74px);
  transform:scale(1.2); animation: drift 38s linear infinite; }
.backdrop:after { background: linear-gradient(180deg,rgba(255,255,255,.12),transparent 35%,rgba(8,12,13,.28)); }
.backdrop__glow { position:absolute; width:40vw; height:40vw; border-radius:50%; filter:blur(90px); opacity:.18; animation: float 16s ease-in-out infinite alternate; }
.backdrop__glow--one { left:-12vw; top:10vh; background:#e7eeeb; }
.backdrop__glow--two { right:-12vw; bottom:-18vh; background:#182426; animation-delay:-7s; }
.backdrop__grain { position:absolute; inset:0; opacity:.1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }
body.dark .backdrop { background: linear-gradient(120deg,rgba(0,0,0,.72),rgba(9,12,13,.55)),radial-gradient(ellipse at 50% 0%,#495052 0%,#1e2426 48%,#101314 100%); }
body.dark .backdrop:before { opacity:.12; }
.topbar { position:relative; width:min(1500px, calc(100% - 64px)); margin:0 auto; height:102px; display:flex; align-items:center; justify-content:center; }
.wordmark { color:var(--ink); text-decoration:none; font-family:"Space Grotesk",sans-serif; font-size:clamp(15px,2vw,27px); font-weight:700; letter-spacing:.42em; padding-left:.42em; transition:letter-spacing .3s ease; }
.wordmark:hover { letter-spacing:.5em; }
.top-actions { position:absolute; right:0; top:26px; display:flex; align-items:center; gap:12px; padding:7px 8px 7px 18px; border:1px solid var(--line-strong); background:var(--panel); backdrop-filter:blur(18px); border-radius:999px; box-shadow:0 5px 22px rgba(0,0,0,.06); }
.top-caption { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); min-width:70px; }
.theme-toggle { width:40px; height:40px; border:1px solid var(--line-strong); border-radius:50%; background:var(--soft); display:grid; place-items:center; cursor:pointer; transition:transform .25s, background .25s; }
.theme-toggle:hover { transform:rotate(-12deg) scale(1.06); }
.theme-toggle__icon { font-size:23px; line-height:1; }
.page { width:min(790px, calc(100% - 36px)); margin:24px auto 0; }
.intro { text-align:center; margin:0 auto 26px; animation:rise .7s both; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.17em; font-weight:800; color:var(--muted); }
.eyebrow__dot { width:6px; height:6px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 4px color-mix(in srgb, var(--ink) 9%, transparent); }
.intro h1 { margin:15px 0 9px; font-family:"Space Grotesk",sans-serif; font-size:clamp(32px,5vw,48px); line-height:1.08; letter-spacing:-.065em; font-weight:600; }
.intro h1 span { font-weight:400; color:var(--muted); }
.intro p { color:var(--muted); font-size:13px; line-height:1.7; margin:0; }
.calculator-shell,.table-shell { border:1px solid rgba(255,255,255,.68); background:var(--paper); backdrop-filter:blur(24px); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; animation:rise .8s .06s both; }
.shell-top { display:flex; align-items:center; gap:13px; padding:22px 26px 19px; border-bottom:1px solid var(--line); }
.shell-mark { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; background:var(--ink); color:var(--panel-solid); border-radius:14px; }
.shell-mark__symbol { font-family:"Space Grotesk",sans-serif; font-size:25px; transform:rotate(45deg); }
.shell-title { flex:1; }
.shell-title h2 { font-size:15px; margin:0 0 3px; letter-spacing:-.025em; }
.shell-title p { margin:0; color:var(--muted); font-size:11px; }
.live-chip { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:99px; font-size:9px; letter-spacing:.12em; font-weight:800; color:var(--muted); }
.live-chip span { width:6px;height:6px;border-radius:50%;background:#67a78b;box-shadow:0 0 0 4px rgba(103,167,139,.13); }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:23px 26px 0; }
.field { min-width:0; display:flex; flex-direction:column; gap:9px; }
.field__label { font-size:11px; font-weight:800; color:var(--muted); }
.select-wrap,.input-suffix,.exp-input-wrap { display:flex; align-items:center; min-width:0; height:48px; border:1px solid var(--line-strong); background:var(--panel-solid); border-radius:13px; transition:border-color .2s, box-shadow .2s, transform .2s; }
.select-wrap:focus-within,.input-suffix:focus-within,.exp-input-wrap:focus-within { border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 8%,transparent); }
.select-wrap { position:relative; }
select { width:100%; appearance:none; border:0; outline:0; color:var(--ink); background:transparent; padding:0 35px 0 13px; height:100%; font-size:12px; font-weight:700; cursor:pointer; }
select option { color:#17191b; background:#fff; }
.select-chevron { position:absolute; right:13px; top:10px; pointer-events:none; color:var(--muted); font-size:18px; }
.input-suffix { padding:0 13px; gap:8px; }
.input-suffix input,.exp-input-wrap input { min-width:0; width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:13px; font-weight:700; }
.input-suffix span { color:var(--muted); font-size:12px; }
.progress-block { padding:19px 26px 0; }
.progress-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; font-weight:700; margin-bottom:9px; }
.progress-meta strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.progress-track { height:5px; border-radius:10px; background:var(--line); overflow:hidden; }
.progress-fill { width:0%; height:100%; border-radius:10px; background:var(--ink); transition:width .4s cubic-bezier(.2,.8,.2,1); }
.field--wide { padding:20px 26px 0; }
.exp-input-wrap { height:54px; padding:0 14px; gap:11px; }
.exp-input-icon { color:var(--muted); font-size:20px; }
.exp-input-wrap input { font-size:14px; }
.exp-unit { white-space:nowrap; color:var(--muted-2); font-size:9px; letter-spacing:.1em; font-weight:800; }
.field__hint { color:var(--muted-2); font-size:10px; line-height:1.5; }
.button-row { display:flex; gap:10px; padding:21px 26px 25px; }
.button { height:46px; border-radius:13px; border:1px solid var(--line-strong); padding:0 17px; display:inline-flex; align-items:center; justify-content:center; gap:14px; font-size:12px; font-weight:800; cursor:pointer; transition:transform .2s, background .2s, box-shadow .2s; }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(0) scale(.99); }
.button--primary { flex:1; color:var(--panel-solid); background:var(--ink); border-color:var(--ink); }
.button--primary:hover { box-shadow:0 8px 20px color-mix(in srgb,var(--ink) 20%,transparent); }
.button--primary span:last-child { font-size:18px; }
.button--secondary { background:transparent; color:var(--ink); }
.button--secondary span { font-size:18px; }
.result-area { padding:19px 26px 25px; background:color-mix(in srgb,var(--soft) 60%,transparent); border-top:1px solid var(--line); }
.result-heading { display:flex; align-items:center; gap:11px; font-size:9px; letter-spacing:.15em; font-weight:800; color:var(--muted); margin-bottom:13px; }
.result-line { height:1px; flex:1; background:var(--line); }
.result-status { font-size:8px; padding:5px 7px; border:1px solid var(--line); border-radius:5px; letter-spacing:.08em; }
.result-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; }
.result-card { min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:15px; background:var(--panel); border:1px solid var(--line); border-radius:15px; }
.result-card--main { background:var(--panel-solid); }
.result-card__label { color:var(--muted); font-size:10px; font-weight:700; margin-bottom:12px; }
.result-card strong { font-family:"Space Grotesk",sans-serif; font-size:clamp(17px,2.5vw,24px); letter-spacing:-.06em; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.result-card--main strong { font-size:clamp(17px,2.5vw,22px); }
.result-date { font-size:clamp(13px,1.8vw,17px)!important; letter-spacing:-.04em!important; line-height:1.4; min-height:28px; }
.result-card__hint { color:var(--muted-2); font-size:9px; line-height:1.5; margin-top:7px; }
.warning { margin:13px 0 0; padding:10px 12px; color:var(--ink); background:var(--panel); border:1px solid var(--line-strong); border-radius:10px; font-size:11px; }
.table-shell { margin-top:15px; animation-delay:.12s; }
.table-toggle { width:100%; display:flex; align-items:center; gap:13px; text-align:left; padding:18px 21px; background:transparent; border:0; cursor:pointer; }
.table-toggle__icon { width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;font-size:19px; }
.table-toggle__copy { display:flex;flex:1;flex-direction:column;gap:4px; }
.table-toggle__copy strong { font-size:12px; }
.table-toggle__copy small { font-size:10px;color:var(--muted); }
.table-toggle__arrow { font-size:19px; color:var(--muted); transition:transform .25s; }
.table-toggle[aria-expanded="true"] .table-toggle__arrow { transform:rotate(45deg); }
.table-content { border-top:1px solid var(--line); }
.table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 20px; color:var(--muted); font-size:9px; letter-spacing:.12em; font-weight:800; }
.table-toolbar input { width:155px; padding:9px 11px; border:1px solid var(--line); background:var(--panel-solid); color:var(--ink); border-radius:9px; outline:none; font-size:11px; letter-spacing:0; }
.table-scroll { max-height:300px; overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:11px; font-variant-numeric:tabular-nums; }
th { position:sticky;top:0;background:var(--soft);z-index:1;color:var(--muted);font-size:9px;letter-spacing:.06em;text-align:left; }
th,td { padding:12px 20px; border-bottom:1px solid var(--line); }
tbody tr { cursor:pointer; transition:background .18s; }
tbody tr:hover { background:color-mix(in srgb,var(--ink) 5%,transparent); }
.level-pill { display:inline-flex;min-width:32px;justify-content:center;padding:5px 7px;border:1px solid var(--line);border-radius:7px;font-weight:800; }
.footer { display:flex;justify-content:space-between;gap:15px;padding:25px 4px 35px;color:rgba(255,255,255,.88);font-size:9px;letter-spacing:.05em; }
body.dark .footer { color:var(--muted); }
.footer-dot { margin:0 7px;opacity:.55; }
.footer-heart { margin-left:5px; }
@keyframes rise { from { opacity:0;transform:translateY(15px); } to { opacity:1;transform:translateY(0); } }
@keyframes drift { from { transform:translate3d(-1%,0,0) scale(1.2); } to { transform:translate3d(1%,1%,0) scale(1.2); } }
@keyframes float { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(7vw,-4vh,0) scale(1.15); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
@media (max-width:700px) {
  .topbar { width:calc(100% - 28px); height:83px; justify-content:flex-start; }
  .wordmark { font-size:13px; letter-spacing:.25em; padding-left:.25em; }
  .wordmark:hover { letter-spacing:.25em; }
  .top-actions { top:20px; gap:7px; padding:5px 6px 5px 11px; }
  .top-caption { font-size:9px; min-width:54px; }
  .theme-toggle { width:34px;height:34px; }
  .page { width:calc(100% - 24px); margin-top:14px; }
  .intro { margin-bottom:19px; }
  .intro h1 { font-size:34px; }
  .intro p { max-width:310px; margin:auto; font-size:12px; }
  .calculator-shell,.table-shell { border-radius:21px; }
  .shell-top { padding:17px; }
  .shell-mark { width:38px;height:38px;flex-basis:38px; }
  .shell-title h2 { font-size:13px; }
  .live-chip { font-size:8px; padding:6px 7px; }
  .form-grid { grid-template-columns:1fr 1fr; padding:18px 17px 0; gap:12px; }
  .form-grid .field:last-child { grid-column:1/-1; }
  .progress-block { padding:18px 17px 0; }
  .field--wide { padding:18px 17px 0; }
  .button-row { padding:18px 17px 20px; }
  .result-area { padding:17px; }
  .result-grid { grid-template-columns:1fr 1fr; }
  .result-card--main { grid-column:1/-1; }
  .result-card { padding:13px; }
  .result-card strong { font-size:21px; }
  .result-card--main strong { font-size:23px; }
  .result-date { font-size:14px!important; }
  .table-toggle { padding:15px; }
  .table-toggle__copy small { line-height:1.5; }
  th,td { padding:11px 12px; }
  .table-toolbar { padding:12px; }
  .footer { flex-direction:column; align-items:center; text-align:center; padding-bottom:24px; }
}
@media (max-width:380px) {
  .top-caption { display:none; }
  .wordmark { font-size:11px; }
  .button { padding:0 12px; gap:8px; }
  .exp-unit { font-size:8px; }
}



/* ================= TOP MENU + TOOL SIDEBAR ================= */
.topbar{
  width:min(1500px, calc(100% - 64px));
  margin:0 auto;
  height:102px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:16px;
}
.wordmark{ justify-self:start; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-actions{ position:static; top:auto; right:auto; justify-self:end; }

.mainnav{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:6px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--panel);
  backdrop-filter:blur(18px);
  box-shadow:0 5px 22px rgba(0,0,0,.06);
}
.mainnav__pill{
  position:absolute;
  top:6px; bottom:6px; left:0;
  width:0;
  border-radius:999px;
  background:var(--ink);
  z-index:0;
  transition:left .42s cubic-bezier(.32,.72,0,1), width .42s cubic-bezier(.32,.72,0,1), background .3s ease;
}
.mainnav__link{
  position:relative; z-index:1;
  display:inline-flex; align-items:center;
  height:34px; padding:0 15px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  color:var(--muted);
  font-size:11.5px; font-weight:800; letter-spacing:.01em;
  transition:color .3s ease;
}
.mainnav__link:hover,
.mainnav__link.is-active:hover{ color:var(--ink); }
.mainnav__link.is-active{ color:var(--panel-solid); }
.mainnav__link:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.page{ width:min(1140px, calc(100% - 64px)); margin:32px auto 0; }
.workspace{ display:grid; grid-template-columns:216px minmax(0,1fr); gap:16px; align-items:start; }
.workspace__main{ min-width:0; }
.workspace .intro{ text-align:left; margin:0 0 20px; }
.workspace .intro p{ margin:0; max-width:390px; }

.toolmenu{
  position:sticky; top:16px;
  padding:16px 12px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:22px;
  background:var(--paper);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
  animation:rise .8s .04s both;
}
.toolmenu__title{
  margin:0 0 10px; padding:0 10px;
  font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2);
}
.toolmenu__list{ display:flex; flex-direction:column; gap:3px; }
.toolmenu__item{
  display:flex; align-items:center; gap:8px;
  width:100%;
  padding:10px 11px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--muted);
  font-family:inherit; font-size:11.5px; font-weight:700; line-height:1.25;
  text-align:left;
  cursor:pointer;
  transition:background .24s ease, color .24s ease, border-color .24s ease, transform .24s ease;
}
.toolmenu__item:hover:not(:disabled){
  color:var(--ink);
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  transform:translateX(2px);
}
.toolmenu__item.is-active{ color:var(--panel-solid); background:var(--ink); border-color:var(--ink); }
.toolmenu__item.is-active:hover{ transform:none; }
.toolmenu__item:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.toolmenu__item:disabled{ color:var(--muted-2); opacity:.72; cursor:not-allowed; }
.toolmenu__badge{
  margin-left:auto;
  padding:3px 7px;
  border:1px solid var(--line-strong);
  border-radius:99px;
  color:var(--muted);
  font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}

.toolpanel{ display:none; }
.toolpanel.is-visible{ display:block; animation:panelIn .5s cubic-bezier(.22,.8,.2,1) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.placeholder-shell .shell-mark__symbol{ font-size:19px; transform:none; }
.placeholder{ padding:32px 26px 38px; }
.placeholder__title{
  margin:0 0 9px;
  font-family:"Space Grotesk",sans-serif;
  font-size:22px; font-weight:600; letter-spacing:-.05em;
}
.placeholder__text{ margin:0; max-width:430px; color:var(--muted); font-size:12px; line-height:1.7; }
.live-chip--soon span{ background:var(--muted-2); box-shadow:0 0 0 4px color-mix(in srgb, var(--muted-2) 14%, transparent); }

@media (max-width:1000px){
  .topbar{
    width:calc(100% - 32px);
    height:auto;
    padding:18px 0 0;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions" "nav nav";
    gap:12px;
  }
  .wordmark{ grid-area:brand; grid-column:1; grid-row:1; }
  .top-actions{ grid-area:actions; grid-column:2; grid-row:1; }
  .mainnav{ grid-area:nav; grid-column:1/-1; grid-row:2; justify-self:stretch; overflow-x:auto; padding:5px; scrollbar-width:none; }
  .mainnav::-webkit-scrollbar{ display:none; }
  .mainnav__link{ flex:0 0 auto; padding:0 13px; font-size:11px; }
  .page{ width:calc(100% - 32px); margin-top:20px; }
  .workspace{ grid-template-columns:1fr; gap:14px; }
  .toolmenu{ position:static; padding:11px; border-radius:18px; }
  .toolmenu__title{ display:none; }
  .toolmenu__list{ flex-direction:row; gap:7px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .toolmenu__list::-webkit-scrollbar{ display:none; }
  .toolmenu__item{ width:auto; flex:0 0 auto; white-space:nowrap; padding:9px 13px; border-radius:10px; }
  .toolmenu__item:hover:not(:disabled){ transform:none; }
  .toolmenu__badge{ margin-left:0; }
}
@media (max-width:700px){
  .page{ width:calc(100% - 24px); }
  .wordmark{ font-size:13px; letter-spacing:.25em; padding-left:.25em; }
  .top-caption{ font-size:9px; min-width:54px; }
  .theme-toggle{ width:34px; height:34px; }
  .workspace .intro h1{ font-size:32px; }
  .placeholder{ padding:24px 17px 30px; }
  .placeholder__title{ font-size:19px; }
}



/* ================= HOME PAGE ================= */
.page--home{ width:min(1040px, calc(100% - 64px)); margin:30px auto 0; }

.hero{ animation:rise .7s both; }
.hero h1{
  margin:18px 0 14px; max-width:780px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(36px,6vw,60px); line-height:1.03;
  letter-spacing:-.07em; font-weight:600;
}
.hero h1 span{ font-weight:400; color:var(--muted); }
.hero p{ margin:0; max-width:505px; color:var(--muted); font-size:13px; line-height:1.75; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.hero__actions .button{ text-decoration:none; }
.hero__actions .button--secondary{ padding:0 20px; }

.home-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:15px;
  margin-top:26px; align-items:start;
}
.about-body{ padding:22px 26px 24px; }
.about-body .about-lead{ margin:0 0 12px; color:var(--ink); font-size:14px; line-height:1.65; }
.about-body p{ margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.75; }
.about-body p:last-child{ margin-bottom:0; }

.stat-list{ display:flex; flex-direction:column; padding:12px 14px 16px; }
.stat{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 8px; border-bottom:1px solid var(--line); }
.stat:last-child{ border-bottom:0; }
.stat span{ color:var(--muted); font-size:10.5px; font-weight:700; }
.stat strong{ font-family:"Space Grotesk",sans-serif; font-size:12.5px; font-weight:600; letter-spacing:-.02em; text-align:right; }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:30px 0 14px; }
.section-head h2{ margin:0; font-family:"Space Grotesk",sans-serif; font-size:clamp(19px,2.4vw,25px); font-weight:600; letter-spacing:-.05em; }
.section-head p{ margin:0; max-width:340px; color:var(--muted); font-size:11.5px; line-height:1.6; }

.link-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.link-card{
  display:flex; align-items:center; gap:12px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:18px;
  background:var(--paper);
  backdrop-filter:blur(22px);
  box-shadow:var(--shadow);
  color:var(--ink); text-decoration:none;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease;
}
.link-card:hover{ transform:translateY(-3px); }
.link-card__mark{
  flex:0 0 38px; width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px;
  font-size:15px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.link-card:hover .link-card__mark{ background:var(--ink); border-color:var(--ink); color:var(--panel-solid); }
.link-card__copy{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.link-card__copy strong{ font-size:12px; letter-spacing:-.01em; }
.link-card__copy small{ color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.link-card__arrow{ color:var(--muted); font-size:14px; transition:transform .3s ease, color .3s ease; }
.link-card:hover .link-card__arrow{ transform:translate(2px,-2px); color:var(--ink); }

@media (max-width:960px){
  .page--home{ width:calc(100% - 32px); }
  .home-grid{ grid-template-columns:1fr; }
  .link-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .page--home{ width:calc(100% - 24px); margin-top:20px; }
  .hero h1{ font-size:34px; }
  .hero p{ font-size:12px; }
  .hero__actions .button{ flex:1; }
  .link-grid{ grid-template-columns:1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:7px; }
  .about-body{ padding:18px 17px 20px; }
  .stat{ padding:11px 6px; }
}


/* ================= STREAM PAGE ================= */
.page--stream{ width:min(1240px, calc(100% - 64px)); margin:30px auto 0; }

.stream-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:15px;
  margin-top:22px;
}
.stream-shell, .chat-shell{
  display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.68);
  border-radius:var(--radius);
  background:var(--paper);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
  overflow:hidden;
  animation:rise .8s both;
}
.stream-shell{ animation-delay:.05s; }
.chat-shell{ animation-delay:.11s; }

.stream-stage{ position:relative; aspect-ratio:16/9; background:#0b0e0f; }
.stream-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

.stream-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.stream-bar__hint{ color:var(--muted); font-size:10.5px; line-height:1.55; max-width:440px; }
.stream-bar__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.stream-bar .button{ height:38px; padding:0 15px; font-size:11px; text-decoration:none; }

.chat-stage{ position:relative; flex:1; min-height:340px; background:var(--panel-solid); }
.chat-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

.live-chip--off span{ background:var(--muted-2); box-shadow:0 0 0 4px color-mix(in srgb, var(--muted-2) 14%, transparent); }

@media (max-width:1040px){
  .page--stream{ width:calc(100% - 32px); }
  .stream-layout{ grid-template-columns:1fr; }
  .chat-stage{ flex:0 0 auto; height:400px; min-height:0; }
  .stream-bar__hint{ max-width:none; }
}
@media (max-width:620px){
  .page--stream{ width:calc(100% - 24px); margin-top:20px; }
  .stream-bar{ padding:13px 15px; gap:10px; }
  .stream-bar__actions, .stream-bar .button{ width:100%; margin-left:0; }
  .stream-bar .button{ justify-content:center; }
  .chat-stage{ height:340px; }
}




/* ================= LIVE DOT ================= */
.mainnav__link--live{ gap:7px; }

.mainnav__live{
  flex:0 0 auto;
  width:6px; height:6px;
  border-radius:50%;
  background:#ef4a3c;
  box-shadow:
    0 0 0 3px color-mix(in srgb, #ef4a3c 16%, transparent),
    0 0 9px 1px color-mix(in srgb, #ef4a3c 70%, transparent);
  animation:livePulse 2.6s ease-in-out infinite;
  transition:background .3s ease;
}

@keyframes livePulse{
  0%, 100%{
    opacity:1;
    transform:scale(1);
    box-shadow:
      0 0 0 3px color-mix(in srgb, #ef4a3c 14%, transparent),
      0 0 8px 0 color-mix(in srgb, #ef4a3c 55%, transparent);
  }
  50%{
    opacity:.9;
    transform:scale(1.15);
    box-shadow:
      0 0 0 5px color-mix(in srgb, #ef4a3c 6%, transparent),
      0 0 14px 3px color-mix(in srgb, #ef4a3c 85%, transparent);
  }
}

/* На активной тёмной пилюле кольцо должно читаться, а не сливаться */
.mainnav__link.is-active .mainnav__live{
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--panel-solid) 24%, transparent),
    0 0 10px 1px color-mix(in srgb, #ef4a3c 80%, transparent);
}

/* Стрим оффлайн — точка гаснет */
.mainnav__live--off{
  background:var(--muted-2);
  box-shadow:none;
  animation:none;
}










/* ================= MOBILE HARDENING ================= */
html, body{ max-width:100%; overflow-x:clip; }
img, svg, video, iframe, canvas{ max-width:100%; height:auto; }

@media (max-width:860px){
  /* --- шапка в две строки --- */
  .topbar{
    width:calc(100% - 24px);
    height:auto;
    padding:14px 0 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions" "nav nav";
    gap:10px;
  }
  .wordmark{
    grid-area:brand;
    font-size:12px; letter-spacing:.22em; padding-left:.22em;
    max-width:58vw;
  }
  .wordmark:hover{ letter-spacing:.22em; }
  .top-actions{ grid-area:actions; }
  .mainnav{
    grid-area:nav;
    display:flex;
    width:100%;
    padding:5px;
    border-radius:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mainnav::-webkit-scrollbar{ display:none; }
  .mainnav__link{ flex:0 0 auto; height:32px; padding:0 12px; font-size:11px; }
  .mainnav__live{ width:5px; height:5px; }

  /* --- страница и меню инструментов --- */
  .page{ width:calc(100% - 24px); margin-top:18px; }
  .workspace{ grid-template-columns:1fr; gap:12px; }
  .toolmenu{ position:static; padding:10px; border-radius:16px; }
  .toolmenu__title{ display:none; }
  .toolmenu__list{
    flex-direction:row; gap:6px; padding-bottom:2px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .toolmenu__list::-webkit-scrollbar{ display:none; }
  .toolmenu__item{ width:auto; flex:0 0 auto; white-space:nowrap; padding:8px 12px; }
  .toolmenu__item:hover:not(:disabled){ transform:none; }
  .toolmenu__badge{ margin-left:0; }
  .workspace .intro{ margin:0 0 14px; }
  .intro h1{ font-size:clamp(26px,8vw,34px); }
  .intro p{ max-width:100%; font-size:12px; }

  /* --- iOS: без автозума при фокусе на поле --- */
  input, select, textarea{ font-size:16px; }
}

@media (max-width:560px){
  .calculator-shell, .table-shell{ border-radius:18px; }
  .shell-top{ padding:14px 14px 12px; gap:10px; }
  .shell-mark{ flex:0 0 34px; width:34px; height:34px; border-radius:11px; }
  .shell-mark__symbol{ font-size:18px; }
  .shell-title h2{ font-size:12.5px; }
  .shell-title p{ font-size:10px; }
  .live-chip{ font-size:8px; padding:5px 7px; gap:5px; }

  /* форма: одна колонка */
  .form-grid{ grid-template-columns:1fr; padding:14px 14px 0; gap:10px; }
  .form-grid .field:last-child{ grid-column:auto; }
  .field__label{ font-size:10px; }
  .select-wrap, .input-suffix{ height:44px; }
  select{ padding:0 32px 0 12px; }
  .select-chevron{ top:8px; font-size:16px; }
  .progress-block, .field--wide{ padding:14px 14px 0; }
  .exp-input-wrap{ height:48px; padding:0 12px; gap:8px; }
  .exp-input-wrap input{ font-size:15px; }
  .exp-unit{ display:none; }
  .field__hint{ font-size:9.5px; }
  .button-row{ flex-direction:column; padding:14px 14px 16px; gap:8px; }
  .button{ width:100%; height:44px; }

  /* результаты: друг под другом, крупные числа переносятся */
  .result-area{ padding:14px; }
  .result-grid{ grid-template-columns:1fr; gap:8px; }
  .result-card--main{ grid-column:auto; }
  .result-card{ padding:12px; }
  .result-card strong{ font-size:19px; overflow-wrap:anywhere; word-break:break-word; }
  .result-card--main strong{ font-size:21px; }
  .result-date{ font-size:14px !important; }

  /* таблица: скролл внутри карточки, а не по странице */
  .table-toggle{ padding:13px; gap:10px; }
  .table-toggle__copy small{ display:none; }
  .table-toolbar{ padding:10px 12px; }
  .table-toolbar input{ width:120px; }
  .table-scroll{ max-height:340px; -webkit-overflow-scrolling:touch; }
  table{ min-width:440px; font-size:11px; }
  th, td{ padding:10px 12px; }

  .placeholder{ padding:20px 14px 24px; }
  .placeholder__title{ font-size:18px; }
  .footer{ flex-direction:column; align-items:center; text-align:center; gap:6px; padding:20px 4px 26px; }
}

@media (max-width:380px){
  .top-caption{ display:none; }
  .wordmark{ font-size:11px; letter-spacing:.16em; padding-left:.16em; max-width:48vw; }
  .mainnav__link{ padding:0 10px; font-size:10.5px; }
  .toolmenu__item{ padding:7px 10px; font-size:10.5px; }
  .button{ padding:0 12px; gap:8px; }
}




/* ============ TOOLMENU RESET (must be last) ============ */
.workspace,
.toolmenu,
.toolmenu__list,
.workspace__main{ min-width:0; }
.toolmenu__list{ max-width:100%; }

@media (max-width:860px){
  html body .workspace{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
  }

  html body .toolmenu{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;      /* ключевая строка */
    padding:10px !important;
    border-radius:16px !important;
  }

  html body .toolmenu__title{ display:none !important; }

  html body .toolmenu__list{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:auto !important;
    gap:6px !important;
    padding:0 0 2px !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html body .toolmenu__list::-webkit-scrollbar{ display:none; }

  html body .toolmenu__item{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    white-space:nowrap !important;
    padding:8px 12px !important;
    font-size:11px !important;
    text-align:center;
  }
  html body .toolmenu__item:hover:not(:disabled){ transform:none !important; }
  html body .toolmenu__badge{ margin-left:6px !important; }
}

@media (max-width:380px){
  html body .toolmenu__item{ padding:7px 10px !important; font-size:10.5px !important; }
}











/* ================= SNOW ================= */
.snow-toggle .theme-toggle__icon{ font-size:19px; line-height:1; }
.snow-toggle.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--panel-solid);
}
.snow-toggle.is-active:hover{ transform:rotate(12deg) scale(1.06); }

.snow-canvas{
  position:fixed;
  inset:0;
  display:block;
  z-index:60;
  pointer-events:none;
  opacity:0;
  transition:opacity .7s ease;
}
.snow-canvas.is-on{ opacity:1; }

@media (max-width:520px){
  .top-caption{ display:none; }
  .top-actions{ padding:5px 6px; gap:6px; }
  .snow-canvas{ opacity:0; }
  .snow-canvas.is-on{ opacity:.85; }
}






/* ================= ONLINE PAGE ================= */
.page--online{ width:min(1100px, calc(100% - 64px)); margin:30px auto 0; }

.online-summary{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:22px; }
.summary-card{
  display:flex; flex-direction:column; gap:8px;
  padding:18px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:20px;
  background:var(--paper);
  backdrop-filter:blur(22px);
  box-shadow:var(--shadow);
}
.summary-card__label{ font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.summary-card strong{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(22px,3.4vw,30px); font-weight:600; letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
}
.summary-card__hint, .summary-card .field__hint{ font-size:10px; color:var(--muted-2); line-height:1.5; }
.summary-card--action{ justify-content:space-between; gap:12px; }
.summary-card--action .button{ text-decoration:none; }

.server-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.server-card{
  display:flex; flex-direction:column;
  padding:16px 16px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.server-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.server-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.server-card__name{ font-size:11.5px; font-weight:800; }
.server-card__dot{
  width:6px; height:6px; border-radius:50%;
  background:#67a78b;
  box-shadow:0 0 0 4px rgba(103,167,139,.14);
}
.server-card.is-empty .server-card__dot{ background:var(--muted-2); box-shadow:none; }
.server-card__value{
  margin-top:12px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(24px,3.6vw,32px); font-weight:600; letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.server-card__label{ margin-top:2px; font-size:9.5px; color:var(--muted-2); }
.server-card__track{ margin-top:12px; height:4px; border-radius:10px; background:var(--line); overflow:hidden; }
.server-card__fill{
  display:block; width:0; height:100%;
  border-radius:10px; background:var(--ink);
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}

@media (max-width:900px){
  .page--online{ width:calc(100% - 32px); }
  .server-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
  .online-summary{ grid-template-columns:1fr 1fr; }
  .summary-card--action{
    grid-column:1/-1;
    flex-direction:row; align-items:center; justify-content:space-between;
  }
}
@media (max-width:560px){
  .page--online{ width:calc(100% - 24px); margin-top:18px; }
  .server-grid{ grid-template-columns:1fr 1fr; gap:9px; }
  .server-card{ padding:13px; border-radius:15px; }
  .server-card__value{ font-size:23px; }
  .summary-card{ padding:14px; border-radius:16px; }
  .summary-card--action{ flex-direction:column; align-items:stretch; }
  .summary-card--action .button{ width:100%; }
}



/* ================= PORTAL TIMER ================= */
.portal-shell{
  display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.68);
  border-radius:var(--radius);
  background:var(--paper);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
  overflow:hidden;
  animation:rise .8s .06s both;
}
.portal-body{ display:flex; flex-direction:column; gap:14px; padding:20px 26px 22px; }

.portal-label{
  display:flex; align-items:center; gap:8px;
  margin:0;
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}

.timer-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.timer-cell{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.timer-cell:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.timer-value{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(22px,3vw,30px);
  font-weight:600; letter-spacing:-.05em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.timer-name{
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2);
}
.portal-note{ display:flex; align-items:center; gap:7px; margin:0; font-size:10px; color:var(--muted-2); }

@media (max-width:620px){
  .portal-body{ padding:16px 14px 18px; gap:12px; }
  .timer-grid{ gap:6px; }
  .timer-cell{ padding:11px 4px; border-radius:12px; }
  .timer-value{ font-size:20px; }
  .timer-name{ font-size:8px; }
}


/* ============ выравнивание карточек в home-grid по высоте ============ */
.home-grid{ align-items:stretch; }

.home-grid > .calculator-shell,
.home-grid > .portal-shell{
  display:flex;
  flex-direction:column;
}

/* «Коротко»: строки распределяются по всей высоте карточки */
.home-grid > .calculator-shell > .stat-list{
  flex:1;
  justify-content:space-between;
}

/* Таймер: подпись сверху, блок цифр по центру, примечание снизу */
.home-grid > .portal-shell > .portal-body{
  flex:1;
  justify-content:space-between;
}



/* ================= AUTH ================= */
.page--auth{ width:min(520px, calc(100% - 64px)); margin:34px auto 0; }
.page--account{ width:min(1100px, calc(100% - 64px)); margin:30px auto 0; }

.auth-shell{
  border:1px solid rgba(255,255,255,.68);
  border-radius:var(--radius);
  background:var(--paper);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
  overflow:hidden;
  animation:rise .8s both;
}
.auth-form{ display:flex; flex-direction:column; gap:14px; padding:22px 26px 26px; }
.auth-field{ display:flex; flex-direction:column; gap:8px; }
.auth-input{
  display:flex; align-items:center;
  height:48px; padding:0 14px;
  border:1px solid var(--line-strong);
  border-radius:13px;
  background:var(--panel-solid);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.auth-input:focus-within{
  border-color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent);
}
.auth-input input{
  width:100%; border:0; outline:0; background:transparent;
  color:var(--ink); font-size:13px; font-weight:600;
}
.auth-form .button{ width:100%; margin-top:4px; }
.auth-alert{
  display:flex; flex-direction:column; gap:6px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb, #ef4a3c 42%, transparent);
  border-radius:11px;
  background:color-mix(in srgb, #ef4a3c 8%, transparent);
  font-size:11.5px; line-height:1.5;
}
.auth-alert p{ margin:0; }
.auth-alt{
  margin:0; padding:15px 26px 20px;
  border-top:1px solid var(--line);
  text-align:center; font-size:11px; color:var(--muted);
}
.auth-alt a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong); }

@media (max-width:620px){
  .page--auth, .page--account{ width:calc(100% - 24px); margin-top:18px; }
  .auth-form{ padding:16px 14px 18px; gap:12px; }
  .auth-input{ height:46px; }
  .auth-input input{ font-size:16px; }
  .auth-alt{ padding:13px 14px 16px; }
}