/* IS shared design tokens + base components (GTA-flavored neon dark). Used by site and admin. */
:root {
    --bg: #05060b;
    --bg-2: #0a0d16;
    --card: #10141f;
    --card-2: #161b29;
    --line: #232b40;
    --line-2: #2f3a55;
    --text: #eef2fb;
    --muted: #8d99b5;

    /* GTA loading-screen neon trio */
    --p1: #ff2d6f;   /* hot pink  */
    --p2: #19e3ff;   /* cyan      */
    --p3: #ffb020;   /* sun orange*/

    --ok: #2ee6a0;
    --warn: #ffc14d;
    --danger: #ff415c;

    --radius: 14px;
    --glow-p1: 0 0 24px rgba(255, 45, 111, .45);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
    font-family: "Anton", "Be Vietnam Pro", sans-serif;
    font-weight: 400;
    letter-spacing: .5px;
    line-height: 1.02;
}

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: var(--card-2);
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .3px;
    transition: transform .12s ease, box-shadow .18s ease, filter .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--p2); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary {
    background: linear-gradient(135deg, var(--p1), var(--p3));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-p1);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 34px rgba(255, 45, 111, .6); }
.btn-ghost { background: transparent; }
.btn-danger { background: rgba(255, 65, 92, .14); border-color: rgba(255, 65, 92, .5); color: #ff9aa6; }
.btn-ok { background: rgba(46, 230, 160, .12); border-color: rgba(46, 230, 160, .5); color: #7bf0c6; }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-2);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--p1); box-shadow: 0 0 0 3px rgba(255, 45, 111, .2); }

.alert { padding: 11px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; border: 1px solid; }
.alert-error { background: rgba(255, 65, 92, .1); border-color: rgba(255, 65, 92, .4); color: #ffb3bc; }
.alert-ok { background: rgba(46, 230, 160, .1); border-color: rgba(46, 230, 160, .4); color: #a2f2d4; }
.alert-info { background: rgba(25, 227, 255, .08); border-color: rgba(25, 227, 255, .35); color: #abeeff; }
.hidden { display: none !important; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid var(--line-2); background: var(--card-2); white-space: nowrap; letter-spacing: .3px; }
.badge-danger { color: #ff9aa6; border-color: rgba(255, 65, 92, .5); background: rgba(255, 65, 92, .12); }
.badge-ok { color: #8af2cb; border-color: rgba(46, 230, 160, .45); background: rgba(46, 230, 160, .1); }
.badge-warn { color: #ffd37a; border-color: rgba(255, 193, 77, .5); background: rgba(255, 193, 77, .1); }

.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; word-break: break-all; }
.muted { color: var(--muted); }
.spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }