/* Sign-in, waiting and admin pages, in the control page's colors and type */
@font-face { font-family: 'Kanit'; font-weight: 400; font-display: swap; src: url('fonts/kanit-400.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-weight: 500; font-display: swap; src: url('fonts/kanit-500.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-weight: 600; font-display: swap; src: url('fonts/kanit-600.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/kanit-800i.woff2') format('woff2'); }

:root {
    --page: #171A26;
    --panel: #272C40;
    --line: #3B4158;
    --muted: #AEB3C6;
    --live: #E0261C;
    --replay: #2F55FF;
    --play: #1FBF5B;
    --pause: #FFB400;
    --neutral: #4A4F63;
}

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

body {
    min-height: 100vh;
    background: var(--page);
    color: #fff;
    font-family: 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

button, input { font: inherit; }

button {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--neutral);
    color: #fff;
    font-weight: 500;
    cursor: pointer;
}

button.primary { background: var(--replay); }
button.danger { background: #8C2420; }
button.small { min-height: 32px; padding: 0 10px; font-size: 14px; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--page);
    color: #fff;
}

a { color: #A9B8FF; }

/* Sign-in and waiting */
.gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.gate-box {
    width: min(100%, 400px);
    padding: 24px;
    border-radius: 10px;
    background: var(--panel);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gate-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

h1 { font-style: italic; font-weight: 800; font-size: 34px; line-height: 1; }
.logo-plate { padding: 5px; background: #fff; border-radius: 6px; }
.logo-plate img { height: 30px; width: auto; display: block; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.gate-box form { display: flex; flex-direction: column; gap: 14px; }
.message { color: #FF9A92; font-weight: 500; }
.note { color: var(--muted); }
.big-ip { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Admin */
.admin {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-head h1 { margin-right: auto; }
.admin-head a { color: #fff; }

.panel {
    padding: 16px;
    border-radius: 10px;
    background: var(--panel);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.panel.alert { box-shadow: inset 0 0 0 2px var(--pause); }
h2 { font-size: 20px; font-weight: 600; line-height: 1.2; }

.status-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
}

.dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--live);
}

.dot.good { background: var(--play); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { color: var(--muted); font-weight: 500; font-size: 14px; text-align: left; white-space: nowrap; }
th, td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.ip { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
td.device { color: var(--muted); font-size: 14px; }
td.when { color: var(--muted); font-size: 14px; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--neutral);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.tag.control { background: var(--play); color: #04200F; }
.tag.pending { background: var(--pause); color: #241900; }
.tag.denied { background: #8C2420; }

.ip-list { display: flex; flex-direction: column; gap: 6px; }
.ip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-variant-numeric: tabular-nums; }

.inline-form { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form input { flex: 1 1 180px; width: auto; min-height: 40px; }

.reveal {
    padding: 12px;
    border-radius: 8px;
    background: var(--page);
    box-shadow: inset 0 0 0 2px var(--play);
    display: flex;
    flex-direction: column;
    gap: 6px;
    user-select: text;
}

.reveal strong { font-size: 20px; overflow-wrap: anywhere; }
.empty { color: var(--muted); }