:root { --brand:#0f766e; --brand-dark:#115e59; --accent:#f59e0b; --bg:#f7fafc; --text:#0f172a; --muted:#64748b; --card:#fff; --border:#dbe3ea; --danger:#b91c1c; --ok:#047857; }
* { box-sizing: border-box; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
a { color:inherit; }
.shell { min-height:100vh; display:grid; grid-template-columns:280px 1fr; }
.sidebar { background:linear-gradient(180deg,var(--brand),var(--brand-dark)); color:white; padding:28px 22px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:10px; font-size:1.2rem; font-weight:900; letter-spacing:.02em; margin-bottom:30px; }
.logo { width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; font-weight:900; }
.nav { display:grid; gap:8px; }
.nav a { text-decoration:none; padding:12px 14px; border-radius:14px; color:#dff7f4; font-weight:800; }
.nav a.active, .nav a:hover { background:rgba(255,255,255,.15); color:#fff; }
.sidebar small { position:absolute; bottom:24px; left:22px; right:22px; color:#bde7e1; line-height:1.45; }
.main { padding:28px clamp(18px,4vw,54px); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:26px; }
.topbar h1 { margin:0; font-size:clamp(1.8rem,4vw,3.2rem); line-height:1; }
.pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:white; border-radius:999px; padding:9px 13px; color:var(--muted); font-weight:800; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.two { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:20px; align-items:start; }
.card, form, .page-card { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:24px; box-shadow:0 18px 45px rgba(15,23,42,.06); }
.card h2, .card h3, form h2 { margin-top:0; }
.muted { color:var(--muted); }
.hero { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:white; border-radius:30px; padding:44px; margin-bottom:22px; }
.hero h1 { max-width:850px; font-size:clamp(2.4rem,6vw,5rem); margin:0 0 16px; line-height:.95; }
.hero p { color:#d7fffb; max-width:760px; font-size:1.1rem; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.button, button { border:0; border-radius:14px; padding:13px 16px; background:var(--brand); color:white; font-weight:900; cursor:pointer; text-decoration:none; display:inline-flex; justify-content:center; align-items:center; }
.button.secondary, button.secondary { background:#e2e8f0; color:#0f172a; }
.button.light { background:white; color:var(--brand-dark); }
label { display:grid; gap:7px; font-weight:850; color:#243b53; margin-bottom:14px; }
input, select, textarea { width:100%; border:1px solid var(--border); border-radius:14px; padding:13px 14px; font:inherit; background:white; }
input[type="checkbox"] { width:auto; }
.check { display:flex; grid-template-columns:none; align-items:center; gap:10px; }
.status { border-radius:16px; padding:14px; background:#ecfeff; color:#155e75; border:1px solid #a5f3fc; margin-top:14px; white-space:pre-wrap; }
.status.error { background:#fef2f2; color:var(--danger); border-color:#fecaca; }
.table { width:100%; border-collapse:collapse; }
.table th,.table td { text-align:left; padding:13px; border-bottom:1px solid var(--border); }
.table th { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
.steps { counter-reset:step; display:grid; gap:14px; }
.step { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; }
.step:before { counter-increment:step; content:counter(step); width:34px; height:34px; border-radius:12px; background:#ccfbf1; color:#115e59; display:grid; place-items:center; font-weight:900; }
.code { background:#0f172a; color:#d1fae5; border-radius:18px; padding:18px; overflow:auto; font-family:"SFMono-Regular", Consolas, monospace; font-size:.9rem; }
.notice { border-left:5px solid var(--accent); background:#fffbeb; padding:14px 16px; border-radius:14px; color:#78350f; }
@media (max-width:980px) { .shell { grid-template-columns:1fr; } .sidebar { position:relative; height:auto; } .sidebar small { position:static; display:block; margin-top:20px; } .grid,.two { grid-template-columns:1fr; } .hero { padding:28px; } }