:root {
    --bg: #0e0e12;
    --panel: #17171f;
    --panel-2: #1e1e28;
    --text: #ffffff;
    --muted: #ccccd6;
    --line: rgba(255,255,255,.1);
    --red: #b3001b;
    --gold: #d4af37;
    --white: #ffffff;
    --success: #24b36b;
    --danger: #d64545;
    --shadow: 0 12px 30px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #09090d 0%, #12121a 100%);
    color: var(--text);
}
a { color: var(--gold); text-decoration: none; }
.container { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.topbar {
    border-bottom: 1px solid var(--line);
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
}
.topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 72px; gap: 16px;
}
.brand {
    font-size: 26px; font-weight: 700; letter-spacing: .5px;
}
.brand span { color: var(--gold); }
.nav { display: flex; gap: 18px; flex-wrap: wrap; }
.hero { padding: 60px 0 40px; }
.hero-grid {
    display: grid; grid-template-columns: 1.3fr .9fr; gap: 24px;
}
.card {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--shadow);
}
.card h1, .card h2, .card h3 { margin-top: 0; }
.badge {
    display: inline-block; padding: 8px 12px; border-radius: 999px;
    background: rgba(212,175,55,.12); color: var(--gold); border: 1px solid rgba(212,175,55,.25);
    font-size: 13px; font-weight: 700;
}
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0;
    cursor: pointer; font-weight: 700; text-decoration: none;
}
.btn-red { background: var(--red); color: var(--white); }
.btn-gold { background: var(--gold); color: #101010; }
.btn-ghost { background: transparent; color: var(--white); border: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
label { display:block; font-weight:700; margin-bottom:8px; }
input, select, textarea {
    width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid var(--line);
    background: #0f0f15; color: var(--white); padding: 12px 14px;
}
textarea { min-height: 110px; resize: vertical; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--gold); font-size: 13px; text-transform: uppercase; }
.notice {
    padding: 14px 16px; border-radius: 12px; margin-bottom: 16px;
    border: 1px solid var(--line); background: rgba(255,255,255,.04);
}
.notice-success { background: rgba(36,179,107,.12); border-color: rgba(36,179,107,.3); }
.notice-error { background: rgba(214,69,69,.12); border-color: rgba(214,69,69,.3); }
.kpis { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.kpi strong { display:block; font-size: 28px; margin-top: 8px; }
.footer { padding: 26px 0 50px; color: var(--muted); }
.code-box {
    background:#0b0b10; border:1px dashed rgba(212,175,55,.25); border-radius: 14px; padding: 16px;
    font-family: monospace; word-break: break-all;
}
@media (max-width: 860px) {
    .hero-grid, .grid-2, .kpis { grid-template-columns: 1fr; }
}