:root {
    --night: #070b16;
    --ink: #10182e;
    --orange: #ff7a18;
    --gold: #ffd54a;
    --blue: #2f6bff;
    --gi-blue: #1a3f86;
    --red: #e10600;
    --text: #f4f7ff;
    --muted: #b7c3de;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    color: var(--text);
    font-family: "Exo 2", "Trebuchet MS", sans-serif;
    background: var(--night);
}

a { color: var(--gold); }

.sky {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(47, 107, 255, .28), transparent 28%),
        radial-gradient(circle at 85% 0%, rgba(255, 122, 24, .22), transparent 26%),
        linear-gradient(180deg, #121a33 0%, var(--night) 42%, #05070f 100%);
}

.sky::before,
.sky::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sky::before {
    background-image:
        radial-gradient(1px 1px at 8% 18%, #fff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 22% 72%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 38% 28%, #d6e4ff 50%, transparent 52%),
        radial-gradient(1px 1px at 52% 84%, #fff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 68% 16%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 76% 62%, #ffe7a3 50%, transparent 52%),
        radial-gradient(1px 1px at 90% 34%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 14% 46%, #fff 50%, transparent 52%);
    background-size: 180px 220px;
    opacity: .75;
}

.sky::after {
    background: radial-gradient(ellipse at center bottom, rgba(255, 122, 24, .38), rgba(47, 107, 255, .08) 36%, transparent 68%);
}

.auth-stage {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem 1rem;
}

.public-card {
    width: min(640px, 100%);
}

.public-card h1 {
    margin: 0 0 1rem;
    font-family: "Russo One", Impact, sans-serif;
    font-weight: 400;
    letter-spacing: .04em;
}

.dragon-ball {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--red);
    font-weight: 700;
    line-height: .9;
    text-align: center;
    background: radial-gradient(circle at 32% 30%, #fff1c2, #ffb03a 36%, #f06a00 72%, #c24100);
    box-shadow:
        inset -10px -14px 18px rgba(110, 28, 0, .45),
        inset 6px 6px 10px rgba(255, 255, 255, .35),
        0 10px 24px rgba(0, 0, 0, .35),
        0 0 22px rgba(255, 140, 0, .45);
    animation: float 5.5s ease-in-out infinite;
}

.dragon-ball span { text-shadow: 0 1px 0 #6d0000; }

.ball-1 { top: 7%; left: 8%; width: 72px; height: 72px; font-size: 22px; }
.ball-2 { top: 24%; left: 16%; width: 48px; height: 48px; font-size: 11px; animation-delay: -1.2s; }
.ball-3 { top: 12%; right: 11%; width: 86px; height: 86px; font-size: 13px; animation-delay: -2s; }
.ball-4 { bottom: 12%; left: 9%; width: 118px; height: 118px; font-size: 22px; animation-delay: -.6s; }
.ball-5 { bottom: 18%; right: 8%; width: 70px; height: 70px; font-size: 13px; animation-delay: -2.8s; }
.ball-6 { top: 46%; left: 3%; width: 54px; height: 54px; font-size: 10px; animation-delay: -3.4s; }
.ball-7 { bottom: 7%; right: 24%; width: 62px; height: 62px; font-size: 10px; animation-delay: -1.8s; }

.login-wrap { position: relative; width: min(460px, 100%); }

.aura {
    position: absolute;
    inset: -48px;
    background: radial-gradient(circle, rgba(255, 213, 74, .55), rgba(255, 122, 24, .18) 42%, transparent 70%);
    filter: blur(6px);
    animation: pulse 2.6s ease-in-out infinite;
    z-index: 0;
}

.login-card,
.panel,
.topbar {
    position: relative;
    z-index: 1;
}

.login-card {
    padding: 1.35rem 1.35rem 1rem;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(16, 24, 48, .94), rgba(7, 11, 22, .96));
    border: 1px solid rgba(255, 176, 46, .5);
    box-shadow:
        0 0 0 4px rgba(26, 63, 134, .55),
        0 24px 70px rgba(0, 0, 0, .45);
}

.eyebrow {
    margin: 0 0 .35rem;
    color: var(--gold);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
}

h1 {
    margin: 0;
    font-family: "Russo One", Impact, sans-serif;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: .95;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 2px 0 #c45a00, 3px 4px 0 var(--gi-blue), 0 0 18px rgba(255, 210, 60, .55);
}

h1 span { color: var(--orange); }

.tagline { margin: .55rem 0 .85rem; color: var(--muted); }

.login-card h1 { font-size: clamp(1.8rem, 4vw, 2.45rem); }

.stack { display: grid; gap: .9rem; }

.field { display: grid; gap: .35rem; }

.field label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffe7a8;
}

.field small { color: var(--muted); }

input, select, button { font: inherit; }

input, select {
    width: 100%;
    padding: .85rem 1rem;
    color: white;
    background: rgba(5, 10, 24, .78);
    border: 1px solid rgba(255, 166, 0, .38);
    border-radius: 14px;
}

input:focus, select:focus {
    outline: 2px solid var(--gold);
    border-color: transparent;
}

.btn-ki, .btn-ghost, .btn-danger, .actions button, .actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-ki {
    border: 0;
    cursor: pointer;
    padding: .9rem 1.2rem;
    border-radius: 999px;
    color: #2a1200;
    font-family: "Russo One", Impact, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: linear-gradient(#ffe38a, #ff9a2e 42%, #e85d04);
    box-shadow: 0 0 0 3px var(--gi-blue), 0 10px 24px rgba(255, 122, 24, .35);
}

.btn-ki:hover { filter: brightness(1.06); }

.btn-ghost, .btn-danger {
    border-radius: 999px;
    padding: .7rem 1rem;
    cursor: pointer;
}

.btn-ghost {
    color: var(--text);
    background: transparent;
    border: 1px solid rgba(255, 213, 74, .45);
}

.btn-danger {
    color: white;
    background: linear-gradient(#ff5a4a, var(--red));
    border: 0;
}

.alert, .error-list {
    border-radius: 14px;
    padding: .75rem .9rem;
}

.alert { margin-bottom: 1rem; }

.alert--error, .error-list {
    color: #ffd5d5;
    background: rgba(160, 18, 18, .28);
    border: 1px solid rgba(255, 90, 90, .45);
}

.alert--success {
    color: #dcffe8;
    background: rgba(12, 90, 40, .4);
    border: 1px solid rgba(90, 220, 130, .4);
}

.error-list { margin: 0 0 1rem; }

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 6vw;
    background: rgba(7, 11, 22, .78);
    border-bottom: 4px solid var(--orange);
    box-shadow: inset 0 -4px 0 var(--gi-blue);
}

.brand {
    font-family: "Russo One", Impact, sans-serif;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 1.35rem;
    text-shadow: 2px 2px 0 var(--gi-blue);
}

.brand span { color: var(--orange); }

.topbar__meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.who { font-weight: 700; }

.nav-link {
    color: var(--text);
    text-decoration: none;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 213, 74, .3);
}

.nav-link--exit { color: #ffb4a8; }

.shell { position: relative; z-index: 1; width: min(980px, calc(100% - 2rem)); margin: 1.5rem auto 3rem; }

.page-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.page-head h1 { font-size: 2.2rem; }

.response-count {
    margin: .35rem 0 0;
    color: var(--gold);
    font-family: "Russo One", Impact, sans-serif;
    letter-spacing: .04em;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.tool-card {
    display: grid;
    gap: .45rem;
    min-height: 150px;
    align-content: end;
    padding: 1.2rem;
    text-decoration: none;
    color: var(--text);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 122, 24, .35), transparent 42%),
        rgba(10, 16, 34, .9);
    border: 1px solid rgba(255, 176, 46, .4);
    box-shadow: 0 0 0 3px rgba(26, 63, 134, .45), 0 16px 40px rgba(0, 0, 0, .28);
}

.tool-card:hover { filter: brightness(1.08); }

.tool-card__name {
    font-family: "Russo One", Impact, sans-serif;
    font-size: 1.45rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 2px 2px 0 var(--gi-blue);
}

.tool-card__text { color: var(--muted); }

.panel + .panel { margin-top: 1rem; }

.panel {
    padding: 1.1rem;
    border-radius: 22px;
    background: rgba(10, 16, 34, .88);
    border: 1px solid rgba(255, 166, 0, .28);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}

.table-wrap { overflow-x: auto; }

.user-table { width: 100%; border-collapse: collapse; }

.user-table th {
    text-align: left;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    padding: .4rem .5rem  .8rem;
}

.user-table td {
    padding: .85rem .5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    vertical-align: middle;
}

.actions { display: flex; gap: .7rem; justify-content: flex-end; align-items: center; }

.receipts {
    display: inline-flex;
    align-items: center;
    min-width: 1.7rem;
}

.tick {
    width: 1.05rem;
    height: 1.05rem;
    color: rgba(232, 238, 252, .22);
}

.tick + .tick { margin-left: -.42rem; }

.tick.is-on { color: #c5d0e6; }

.tick.is-copied { color: #53bdeb; }

.actions form { margin: 0; }

.actions a, .actions button {
    background: none;
    border: 0;
    color: var(--gold);
    cursor: pointer;
    padding: 0;
}

.actions button { color: #ff8d7d; }

.role {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.role-manager { color: #2a1200; background: linear-gradient(#ffe38a, #ff9a2e); }
.role-user { color: white; background: var(--gi-blue); }

.role-lock { margin: 0; }

.form-panel { max-width: 560px; }

.form-panel--wide { max-width: 720px; }

.form-actions { margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .6rem; }

.field-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffe7a8;
}

.hint { margin: .2rem 0 .7rem; color: var(--muted); }

.people {
    display: grid;
    gap: .45rem;
    max-height: 320px;
    overflow: auto;
}

.check {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .65rem .75rem;
    border-radius: 14px;
    background: rgba(5, 10, 24, .55);
    border: 1px solid rgba(255, 166, 0, .22);
}

.check input { width: auto; }

.check small, .check em { display: block; color: var(--muted); font-style: normal; font-size: .85rem; }

.status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.status-active { color: #063018; background: #8dffb0; }
.status-blocked { color: #2a1200; background: #ffd54a; }
.status-deleted { color: #fff; background: #8a2430; }

.is-muted td { opacity: .55; }
.is-muted .actions, .is-muted .actions * { opacity: 1; }

.action-ok { color: #9dffb8 !important; }

.danger-zone { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 90, 90, .25); }

.empty { margin: .4rem; color: var(--muted); }

textarea {
    width: 100%;
    padding: .85rem 1rem;
    color: white;
    background: rgba(5, 10, 24, .78);
    border: 1px solid rgba(255, 166, 0, .38);
    border-radius: 14px;
    resize: vertical;
}

textarea:focus {
    outline: 2px solid var(--gold);
    border-color: transparent;
}

.field-board { margin-top: 1rem; }

.field-board h2, .log-board h2 {
    margin: 0 0 .35rem;
    font-family: "Russo One", Impact, sans-serif;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gold);
}

.field-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: .7rem;
    padding: .8rem .9rem;
    border-radius: 16px;
    background: rgba(5, 10, 24, .55);
    border: 1px solid rgba(255, 166, 0, .22);
}

.field-card p {
    margin: .25rem 0 0;
    white-space: pre-wrap;
    color: var(--muted);
}

.field-card small, .api-url {
    color: var(--muted);
}

.api-url {
    margin: 0 0 .8rem;
    word-break: break-all;
}

.api-example {
    margin: 0;
    padding: .8rem .9rem;
    overflow: auto;
    border-radius: 14px;
    background: rgba(5, 10, 24, .78);
    border: 1px solid rgba(255, 166, 0, .38);
    color: #ffe7a8;
    font-size: .85rem;
    white-space: pre-wrap;
}

.field-card button {
    background: none;
    border: 0;
    color: #ff8d7d;
    cursor: pointer;
}

.message {
    padding: 1.3rem 1.2rem;
    border-radius: 24px 24px 24px 8px;
    background:
        linear-gradient(180deg, rgba(18, 32, 68, .95), rgba(8, 12, 24, .95));
    border: 1px solid rgba(255, 176, 46, .45);
    box-shadow: 0 0 0 3px rgba(26, 63, 134, .4);
}

.message__field + .message__field { margin-top: 1rem; }

.message__field h2 {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffe7a8;
}

.message__field p {
    margin: .35rem 0 0;
    white-space: pre-wrap;
    font-size: 1.05rem;
    line-height: 1.5;
}

.message .btn-ghost { margin-top: 1rem; }

.message-reply, .log-board, .response-card { margin-top: 1rem; }

.response-card h2, .message__field h3 {
    margin: 0;
    font-family: "Russo One", Impact, sans-serif;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gold);
}

.message__field h3 { font-size: .78rem; color: #ffe7a8; }

.response-card .message__field + .message__field { margin-top: .8rem; }

.response-card .table-wrap { margin-top: .8rem; }

.live-alerts {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 30;
    display: grid;
    gap: .6rem;
    width: min(320px, calc(100% - 2rem));
    pointer-events: none;
}

.live-alert {
    padding: .9rem 1rem;
    border-radius: 16px;
    color: #fff8e8;
    background: linear-gradient(180deg, rgba(18, 32, 68, .98), rgba(8, 12, 24, .98));
    border: 1px solid var(--gold);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
    animation: live-in .25s ease;
}

.live-alert.is-out { opacity: 0; transition: opacity .3s ease; }

@keyframes live-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message-reply { display: grid; gap: .9rem; }

.log { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }

.log__line { display: flex; flex-wrap: wrap; gap: .45rem .8rem; align-items: baseline; }

.log__line time, .log__line span { color: var(--muted); }

.log__answers {
    margin-top: .35rem;
    padding-left: .8rem;
    border-left: 3px solid var(--orange);
}

.log__answers p { margin: .2rem 0; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes pulse {
    0%, 100% { opacity: .75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

@media (max-width: 760px) {
    .dragon-ball { display: none; }
    .ball-1, .ball-4 { display: grid; }
    .ball-4 { width: 78px; height: 78px; font-size: 16px; }
    .topbar, .page-head { align-items: flex-start; flex-direction: column; }
    .login-card { padding: 1.4rem 1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dragon-ball, .aura { animation: none; }
}