:root {
    color-scheme: light dark;
    --bg: #0f1115;
    --fg: #e8e8ea;
    --card: #1a1d24;
    --border: #2a2e37;
    --accent: #4c8dff;
    --danger: #ff4c4c;
    --warn: #f5a623;
    --ok: #3ecf8e;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f5f6f8;
        --fg: #16181d;
        --card: #ffffff;
        --border: #dfe2e8;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    background: var(--bg);
    color: var(--fg);
    max-width: 640px;
    margin-inline: auto;
    padding: 0 1rem 3rem;
    line-height: 1.6;
}

header.app-header {
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.banner-emergency {
    background: var(--danger);
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
}

.tier-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.tier-3 { color: var(--danger); border-color: var(--danger); }
.tier-2 { color: var(--warn); border-color: var(--warn); }

.btn-row { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }

button, input[type=submit] {
    font-size: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--fg);
    cursor: pointer;
}
button.ok { background: var(--ok); border-color: var(--ok); color: #06281a; font-weight: 700; }
button.ng { background: var(--danger); border-color: var(--danger); color: #2a0a0a; font-weight: 700; }
button.hold { background: var(--warn); border-color: var(--warn); color: #2a1a00; font-weight: 700; }

input[type=text], input[type=password] {
    width: 100%;
    font-size: 1rem;
    padding: 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--fg);
}

.muted { color: #888; font-size: 0.85rem; }
.pc-flag { font-size: 0.75rem; border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.4rem; }
.error { color: var(--danger); }