/* Shared look of the landing page and the cabinet: the same indigo-to-violet gradients, gold accent and Inter as the Telegram bot. */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/static/fonts/Inter-Regular.otf) format("opentype")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/static/fonts/Inter-SemiBold.otf) format("opentype")}
@font-face{font-family:"Inter";font-weight:700 800;font-display:swap;src:url(/static/fonts/Inter-Bold.otf) format("opentype")}
:root{
  --bg:#f5f4fb;--surface:#fff;--surface-2:#faf9ff;--ink:#1b1640;--muted:#5b5880;--line:#e1def2;--soft:#efecfb;
  --brand:#4b3aa8;--brand-2:#7a4fd0;--gold:#e9a400;--gold-ink:#3a2a00;--ok:#1f8f63;--warn:#c2571a;--bad:#c0364d;--teal:#16808a;
  --hero-a:#181f54;--hero-b:#5636b0;--shadow:0 10px 30px rgba(40,24,110,.10);--radius:18px;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f0c26;--surface:#1a1640;--surface-2:#16123a;--ink:#efedff;--muted:#a9a5d0;--line:#332e66;--soft:#241f52;
  --brand:#a99cff;--brand-2:#b794ff;--gold:#ffc43d;--gold-ink:#2a1d00;--ok:#4fd6a0;--warn:#ff9a5c;--bad:#ff7a8c;--teal:#4fc3cc;
  --shadow:0 10px 30px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f0c26;--surface:#1a1640;--surface-2:#16123a;--ink:#efedff;--muted:#a9a5d0;--line:#332e66;--soft:#241f52;
  --brand:#a99cff;--brand-2:#b794ff;--gold:#ffc43d;--gold-ink:#2a1d00;--ok:#4fd6a0;--warn:#ff9a5c;--bad:#ff7a8c;--teal:#4fc3cc;--shadow:0 10px 30px rgba(0,0,0,.35);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
p{margin:0}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.ico{width:1.25em;height:1.25em;flex:none;vertical-align:-.22em}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.muted{color:var(--muted)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.hide{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 20px;font:700 15px/1 var(--f);cursor:pointer;
  background:var(--soft);color:var(--ink);transition:transform .15s,box-shadow .15s,background .15s;text-decoration:none;min-height:44px}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-2) 55%,transparent);outline-offset:2px}
.btn-gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 8px 20px rgba(233,164,0,.28)}
.btn-brand{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
:root:not([data-theme="light"]) .btn-brand{color:#150f3a}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-line{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-danger{background:transparent;border:1.5px solid var(--bad);color:var(--bad)}
.btn-sm{padding:8px 14px;min-height:36px;font-size:14px;border-radius:12px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* cards and forms */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 12px;background:var(--soft);font:600 13px/1.4 var(--f);color:var(--ink)}
.pill.gold{background:var(--gold);color:var(--gold-ink)}
.pill.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.pill.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.pill.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
input[type=text],input[type=url],input[type=email],textarea,select{width:100%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:11px 14px;font:400 15px/1.4 var(--f)}
textarea{min-height:92px;resize:vertical}
label{display:block;font:600 14px var(--f);margin-bottom:6px}
.seg{display:inline-flex;background:var(--soft);border-radius:14px;padding:4px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--muted);font:700 13px var(--f);padding:8px 14px;border-radius:10px;cursor:pointer;min-height:36px}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.seg button[disabled]{opacity:.45;cursor:not-allowed}

/* the 4-step progress track, as on the bot's task card */
.track{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin:18px 0 6px}
.track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:10px;height:4px;background:var(--line);border-radius:4px}
.track i{position:absolute;left:12.5%;top:10px;height:4px;background:var(--gold);border-radius:4px;transition:width .6s}
.track div{position:relative;text-align:center;font:600 12px var(--f);color:var(--muted)}
.track div b{display:block;width:24px;height:24px;border-radius:50%;margin:0 auto 6px;background:var(--line);border:3px solid var(--surface)}
.track div.done b{background:var(--gold)}
.track div.cur b{background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 35%,transparent)}
.track div.done,.track div.cur{color:var(--ink)}

/* toasts and modal */
#toasts{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:grid;gap:8px;width:min(92vw,420px);pointer-events:none}
.toast{background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:14px;font:600 14px var(--f);box-shadow:var(--shadow);animation:rise .25s}
.toast.bad{background:var(--bad);color:#fff}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.modal-bg{position:fixed;inset:0;background:rgba(10,6,40,.6);z-index:50;display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.modal{background:var(--surface);border-radius:22px;padding:24px;width:min(560px,100%);max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.skeleton{background:linear-gradient(90deg,var(--soft),var(--surface-2),var(--soft));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:14px;min-height:80px}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.rich b{font-weight:700}.rich code{font-family:ui-monospace,Consolas,monospace;background:var(--soft);padding:1px 6px;border-radius:6px;font-size:.92em}
.rich s{opacity:.6}