:root {
    --bg: #050b18;
    --bg-2: #0a1628;
    --bg-3: #0f1f3d;
    --card: rgba(255, 255, 255, 0.04);
    --border: rgba(0, 212, 255, 0.14);
    --border-strong: rgba(0, 212, 255, 0.4);
    --cyan: #00d4ff;
    --cyan-dark: #0099cc;
    --green: #00ff88;
    --amber: #ffb547;
    --red: #ff6b6b;
    --text: #ffffff;
    --text-2: #9aafc4;
    --text-3: #5d6b80;
    --radius: 12px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-head: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
    font-family: var(--font);
    background: var(--bg);
    background-image:
        radial-gradient(ellipse 60% 50% at 10% 0%, rgba(0, 212, 255, 0.07), transparent 70%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(0, 255, 136, 0.04), transparent 70%);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); }
h1, h2, h3 { font-family: var(--font-head); letter-spacing: -0.01em; line-height: 1.2; }

.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--cyan), var(--green)); display: grid; place-items: center; color: var(--bg); font-size: 0.75rem; font-weight: 800; }
.brand small { font-family: var(--font); font-weight: 500; color: var(--text-2); font-size: 0.85rem; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(10px); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    font: 600 0.875rem var(--font); border-radius: 8px; padding: 0.65rem 1.15rem;
    border: 1px solid var(--border); background: transparent; color: var(--text);
    cursor: pointer; transition: border-color .2s, background .2s, color .2s, box-shadow .2s; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--cyan); color: var(--cyan); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: var(--bg); border-color: transparent; box-shadow: 0 0 18px rgba(0, 212, 255, 0.25); }
.btn-primary:hover { color: var(--bg); box-shadow: 0 0 28px rgba(0, 212, 255, 0.45); }
.btn-danger { border-color: rgba(255, 107, 107, 0.4); color: var(--red); }
.btn-danger:hover { border-color: var(--red); color: var(--red); background: rgba(255, 107, 107, 0.08); }
.btn-sm { padding: 0.4rem 0.7rem; font-size: 0.8rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
input, select, textarea {
    font: 0.92rem var(--font); color: var(--text); background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.85rem; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12); }
select option { background: var(--bg-2); }
textarea { resize: vertical; min-height: 80px; }

.alert { padding: 0.8rem 1rem; border-radius: 8px; font-size: 0.875rem; border: 1px solid; }
.alert-error { background: rgba(255, 107, 107, 0.08); border-color: rgba(255, 107, 107, 0.35); color: var(--red); }
.alert-ok { background: rgba(0, 255, 136, 0.07); border-color: rgba(0, 255, 136, 0.3); color: var(--green); }
.alert-warn { background: rgba(255, 181, 71, 0.08); border-color: rgba(255, 181, 71, 0.35); color: var(--amber); }

.mono { font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }