/* vesting — claim helper для получателей LAB.
   Скин дизайн-системы LAB: тёмная база + acid-акцент, Rubik / Dela Gothic One,
   цифры моноширинные. Подписи английские. */

@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/Rubik.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dela Gothic One";
  src: url("/assets/fonts/DelaGothicOne.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  --acid:#a0ff06; --acid-soft:#cfff8a;
  --ink:#050505; --panel:#101208; --panel-2:#14160c; --panel-head:#0b0c07;
  --line:#343434; --line-soft:#232323;
  --text:#f5f6f1; --muted:#9b9b9b; --dim:#858585;
  --up:#4daf62; --down:#d3485d; --orange:#ffb649;
  --font:"Rubik", ui-sans-serif, system-ui, sans-serif;
  --display:"Dela Gothic One", "Rubik", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

* { box-sizing:border-box; }
html { background:var(--ink); }
body {
  margin:0; background:radial-gradient(circle at 82% -4%, rgba(160,255,6,.07), transparent 30rem), var(--ink);
  color:var(--text); font-family:var(--font); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { color:var(--acid); text-decoration:none; }
a:hover { text-decoration:underline; }

.wrap { max-width:860px; margin:0 auto; padding:26px 20px 80px; }

header.top { padding-bottom:18px; border-bottom:1px solid var(--line-soft); margin-bottom:26px; }
.brand { font-family:var(--display); font-size:26px; }
.brand em { font-style:normal; color:var(--acid); }
.tag { display:block; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }

h1 { font-family:var(--display); font-size:22px; margin:0 0 10px; line-height:1.35; }
h2 { font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); font-weight:500; margin:0 0 12px; }
p { margin:0 0 14px; color:var(--muted); }
p.lead { color:var(--text); }

.panel { background:var(--panel); border:1px solid var(--line-soft); border-radius:16px; padding:20px; margin-bottom:18px; }

form { display:flex; gap:10px; flex-wrap:wrap; }
input[type=text] {
  flex:1; min-width:260px; font:inherit; font-family:var(--mono); font-size:14px;
  padding:13px 15px; border-radius:11px; background:var(--panel-2);
  border:1px solid var(--line-soft); color:var(--text);
}
input[type=text]:focus { outline:none; border-color:var(--acid); }
button {
  font:inherit; font-weight:600; font-size:14px; padding:13px 24px; border-radius:11px; cursor:pointer;
  background:var(--acid); border:1px solid var(--acid); color:#0a0f00;
}
button:hover { background:var(--acid-soft); border-color:var(--acid-soft); }
button:disabled { opacity:.5; cursor:default; }

.hint { font-size:13px; color:var(--dim); margin-top:12px; }

.note {
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px;
  border:1px solid; font-size:13.5px; line-height:1.55; margin-bottom:16px;
}
.note .dot { width:9px; height:9px; border-radius:50%; margin-top:6px; flex:none; }
.note.warn { border-color:rgba(255,182,73,.45); background:rgba(255,182,73,.08); }
.note.warn .dot { background:var(--orange); }
.note.calm { border-color:rgba(77,175,98,.4); background:rgba(77,175,98,.08); }
.note.calm .dot { background:var(--up); }
.note.bad { border-color:rgba(211,72,93,.5); background:rgba(211,72,93,.1); }
.note.bad .dot { background:var(--down); }
.note b { color:var(--text); }

.grant { border:1px solid var(--line-soft); border-radius:16px; overflow:hidden; margin-bottom:18px; }
.grant .head { background:var(--panel-head); padding:16px 20px; border-bottom:1px solid var(--line-soft); }
.grant .amount { font-family:var(--display); font-size:27px; color:var(--acid); line-height:1.2; }
.grant .amount span { font-size:15px; color:var(--muted); }
.grant .when { font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:7px; }
.grant .body { padding:18px 20px; background:var(--panel); }

dl { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin:0 0 18px; font-size:13.5px; }
dt { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding-top:4px; }
dd { margin:0; font-family:var(--mono); font-size:12.5px; word-break:break-all; }

.steps { counter-reset:step; margin:0 0 6px; padding:0; list-style:none; }
.steps li { counter-increment:step; position:relative; padding-left:32px; margin-bottom:9px; font-size:13.5px; color:var(--muted); }
.steps li::before {
  content:counter(step); position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--line); color:var(--acid);
  font-family:var(--mono); font-size:11px; display:flex; align-items:center; justify-content:center;
}
.steps b, .steps code { color:var(--text); }

code, .copy {
  font-family:var(--mono); font-size:12px; background:var(--panel-2);
  border:1px solid var(--line-soft); border-radius:8px; padding:2px 6px; word-break:break-all;
}
.copy { display:block; padding:11px 13px; margin:6px 0 4px; cursor:pointer; position:relative; }
.copy:hover { border-color:var(--acid); }
.copy::after {
  content:"copy"; position:absolute; right:9px; top:9px; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.copy.done::after { content:"copied"; color:var(--acid); }

details { border-top:1px solid var(--line-soft); margin-top:16px; padding-top:14px; }
summary { cursor:pointer; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
summary:hover { color:var(--acid); }
details[open] summary { color:var(--text); margin-bottom:12px; }

footer.foot {
  margin-top:36px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10.5px; line-height:1.85; color:var(--dim);
}

.spin { display:inline-block; width:13px; height:13px; border:2px solid var(--line); border-top-color:var(--acid); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; }
@keyframes sp { to { transform:rotate(360deg); } }

@media (max-width:560px) {
  dl { grid-template-columns:1fr; gap:3px 0; }
  dt { padding-top:9px; }
  .grant .amount { font-size:22px; }
}