@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';

:root { --ink:#0b0d13; --surface:#131722; --paper:#f5f4ef; --yellow:#ffc52f; --muted:#8f98aa; --line:rgba(255,255,255,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:#fff; background:var(--ink); font-family:var(--font-body),Arial,sans-serif; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
.site-header { height:78px; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); background:rgba(11,13,19,.94); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:850; letter-spacing:.04em; }
.brand img { width:43px; height:43px; border-radius:50%; }
.brand small { display:block; margin-top:3px; color:var(--muted); font-family:var(--font-body); font-size:10px; font-weight:550; letter-spacing:.02em; }
nav { display:flex; gap:32px; color:#bdc3cf; font-size:14px; }
nav a:hover { color:var(--yellow); }
.header-action { display:flex; align-items:center; gap:8px; padding:12px 17px; color:#0c0d10; background:var(--yellow); border-radius:8px; font-size:13px; font-weight:800; }
.workspace { min-height:calc(100vh - 78px); display:grid; grid-template-columns:minmax(340px,.82fr) minmax(520px,1.18fr); }
aside { padding:clamp(50px,6vw,90px) clamp(24px,5vw,80px); background:radial-gradient(circle at 15% 12%,rgba(255,197,47,.09),transparent 30%),var(--ink); border-right:1px solid var(--line); }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 18px; color:var(--yellow); font-size:11px; font-weight:850; letter-spacing:.16em; }
h1 { margin:0 0 42px; font-family:var(--font-display); font-size:clamp(42px,4.5vw,68px); line-height:.98; letter-spacing:-.055em; }
h1 em { color:var(--yellow); font-style:normal; }
.calculator-list { display:flex; flex-direction:column; gap:9px; }
.calculator-item { width:100%; min-height:78px; padding:13px 16px; display:grid; grid-template-columns:49px 1fr 24px; align-items:center; gap:14px; color:#fff; text-align:left; background:transparent; border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:.2s ease; }
.calculator-item:hover,.calculator-item.active { border-color:var(--accent); background:rgba(255,255,255,.055); transform:translateX(4px); }
.item-icon { width:47px; height:47px; display:grid; place-items:center; color:var(--accent); background:rgba(255,255,255,.055); border-radius:10px; }
.item-icon svg { width:23px; }
.calculator-item strong,.calculator-item small { display:block; }
.calculator-item strong { font-size:15px; }
.calculator-item small { margin-top:5px; color:var(--muted); font-size:11px; }
.item-arrow { width:17px; color:var(--muted); opacity:0; transform:translateX(-5px); transition:.2s; }
.calculator-item.active .item-arrow { color:var(--accent); opacity:1; transform:none; }
.calculator-panel { background:linear-gradient(145deg,#191e2b,var(--surface) 45%); }
.panel-top { height:48px; padding:0 clamp(24px,5vw,72px); display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.12em; }
.panel-top > span:last-child { margin-left:auto; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.panel-content { width:min(720px,calc(100% - 48px)); margin:0 auto; padding:clamp(42px,6vw,78px) 0; }
.panel-icon { width:42px; height:42px; color:var(--accent); stroke-width:1.5; }
.panel-kicker { margin:24px 0 10px; color:var(--accent); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
h2 { margin:0; font-family:var(--font-display); font-size:clamp(34px,4.5vw,60px); line-height:1.06; letter-spacing:-.045em; }
.fields { margin:37px 0 25px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.fields label { padding:14px 16px; color:#afb6c4; background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:10px; font-size:12px; }
.fields label > span { margin-top:9px; display:flex; align-items:center; gap:8px; color:#858e9f; }
.fields input { width:105px; padding:0; color:#fff; background:transparent; border:0; outline:0; font-family:var(--font-display); font-size:28px; font-weight:800; }
.fields input:focus { color:var(--accent); }
.result-card { min-height:290px; padding:30px clamp(24px,4vw,42px); position:relative; overflow:hidden; color:#101219; background:var(--accent); border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.28); }
.result-mark { position:absolute; width:190px; height:190px; right:-25px; top:-24px; opacity:.11; stroke-width:1; }
.result-card p { margin:0; font-size:10px; font-weight:900; letter-spacing:.16em; }
.result-card > strong { display:block; margin:18px 0 0; font-family:var(--font-display); font-size:clamp(48px,7vw,84px); line-height:.95; letter-spacing:-.06em; }
.result-card h3 { max-width:500px; margin:10px 0 12px; font-family:var(--font-display); font-size:clamp(22px,2.5vw,31px); line-height:1.12; }
.result-card small { display:block; max-width:480px; font-size:13px; line-height:1.5; opacity:.7; }
.result-card button { margin-top:23px; padding:11px 14px; display:flex; align-items:center; gap:8px; color:#fff; background:#101219; border:0; border-radius:8px; cursor:pointer; font-size:13px; font-weight:750; }
.disclaimer { margin:13px 0 0; color:#6f788a; font-size:11px; }
.how { padding:110px max(24px,calc((100% - 1180px)/2)); background:var(--paper); color:#11131a; }
.how .eyebrow { color:#8c6b00; }
.how > div { display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:end; }
.how p:not(.eyebrow) { margin:0; color:#616675; font-size:17px; line-height:1.7; }
footer { padding:34px clamp(20px,4vw,64px); display:flex; align-items:center; gap:40px; border-top:1px solid var(--line); color:var(--muted); }
footer .brand { color:#fff; }
footer p:last-child { margin-left:auto; }
@media(max-width:900px){ nav{display:none}.workspace{grid-template-columns:1fr}.calculator-panel{min-height:auto}aside{border-right:0}.calculator-list{display:grid;grid-template-columns:1fr 1fr}.how>div{grid-template-columns:1fr;gap:25px} }
@media(max-width:600px){ .site-header{height:68px;padding:0 14px}.brand span{font-size:13px}.brand small{display:none}.header-action{width:42px;height:42px;padding:0;font-size:0}.workspace{min-height:0}aside{padding:42px 16px}.calculator-list{grid-template-columns:1fr}.calculator-item{min-height:69px}h1{margin-bottom:30px}.panel-top{padding:0 18px}.panel-content{width:calc(100% - 30px);padding:40px 0 55px}.fields{grid-template-columns:1fr}.result-card{min-height:315px;padding:27px 22px}.how{padding:75px 18px}footer{align-items:flex-start;flex-direction:column;gap:10px}footer p{margin:0}footer p:last-child{margin-left:0} }