* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; background: #0a0a0a; color: #fff; }

/* Login */
.login-wrap { display: flex; justify-content: center; align-items: center; height: 100dvh; }
.login-box { text-align: center; width: 100%; max-width: 320px; padding: 0 1.5rem; }
.login-box h1 { font-size: 1.6rem; font-weight: 300; letter-spacing: 0.35em; margin-bottom: 0.25rem; }
.login-box .sub { color: #555; font-size: 0.8rem; margin-bottom: 2.5rem; letter-spacing: 0.05em; }
.login-box form { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; }
.login-box label { font-size: 0.7rem; color: #555; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: -0.3rem; }
.login-box .error { color: #f87171; font-size: 0.8rem; text-align: center; margin-bottom: 0.25rem; }

/* Nav */
nav { background: #111; padding: 0.6rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222; position: sticky; top: 0; z-index: 100; }
.nav-left { display: flex; align-items: center; gap: 2rem; }
nav h1 { font-size: 0.85rem; font-weight: 300; letter-spacing: 0.2em; margin: 0; white-space: nowrap; }
nav .brand { color: #555; font-size: 0.7rem; letter-spacing: 0.05em; margin-left: 0.5rem; }
nav .version { color: #333; font-size: 0.65rem; margin-left: 0.5rem; }
nav .env-badge, .login-box .env-badge { background: #1a1a00; color: #fbbf24; font-size: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 3px; letter-spacing: 0.08em; font-weight: 500; margin-left: 0.5rem; }
.env-badge.env-prod { background: #3b0000; color: #f87171; }
.env-badge.env-stage { background: #0c1a3d; color: #60a5fa; }
.env-warning { background: #7f1d1d; color: #fca5a5; text-align: center; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; position: sticky; top: 0; z-index: 200; }
nav .right { color: #666; font-size: 0.8rem; white-space: nowrap; }
nav .right a { color: #888; text-decoration: none; margin-left: 1rem; font-size: 0.8rem; }
nav .right a:hover { color: #fff; }

/* Nav links */
.nav-links { display: flex; gap: 0; }
.nav-link { color: #555; text-decoration: none; font-size: 0.8rem; padding: 0.4rem 0.75rem; border-radius: 4px; transition: all 0.15s; }
.nav-link:hover { color: #999; background: #1a1a1a; }
.nav-link.active { color: #fff; background: #222; }

/* Content */
.content { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem; }

/* Form controls */
input[type="text"], input[type="password"], input[type="number"] { padding: 0.6rem 0.75rem; background: #111; border: 1px solid #222; color: #fff; border-radius: 6px; font-size: 14px; -webkit-appearance: none; width: 100%; }
input:focus { outline: none; border-color: #444; }
.search { width: 100%; padding: 0.75rem 1rem; background: #111; border: 1px solid #333; color: #fff; border-radius: 6px; font-size: 16px; margin-bottom: 1rem; -webkit-appearance: none; }
.search:focus { outline: none; border-color: #555; }
select { padding: 0.6rem 0.75rem; background: #111; border: 1px solid #222; color: #fff; border-radius: 6px; font-size: 14px; width: 100%; }
select:focus { outline: none; border-color: #444; }
button { padding: 0.6rem 1rem; background: #fff; color: #0a0a0a; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; }
button:hover { opacity: 0.85; }
button.secondary { background: #222; color: #ccc; }
button.secondary:hover { background: #333; }
button.danger { background: #7f1d1d; color: #fca5a5; }
button.danger:hover { background: #991b1b; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.7rem; }

/* Sections */
.section { margin-bottom: 2rem; }
.section h2 { font-size: 0.8rem; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.section-header h2 { margin-bottom: 0; }

/* Form layout */
.form-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.form-group { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.form-group label { font-size: 0.7rem; color: #555; text-transform: uppercase; letter-spacing: 0.05em; }
.inline-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 140px; }

/* Toggle */
.toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #888; cursor: pointer; padding-top: 0.4rem; }
.toggle input { width: auto; }

/* Result box */
.result-box { background: #111; border: 1px solid #222; border-radius: 6px; padding: 1rem; font-size: 0.8rem; color: #888; overflow-x: auto; white-space: pre-wrap; max-height: 500px; min-height: 60px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }

/* Table */
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { text-align: left; padding: 0.5rem; color: #666; font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #222; }
td { padding: 0.5rem; font-size: 0.8rem; border-bottom: 1px solid #111; font-family: monospace; }
.status-active { color: #4ade80; }
.status-expired { color: #f87171; }
.status-notstarted { color: #fbbf24; }
.empty { color: #444; text-align: center; padding: 2rem; }

/* Stats grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stat-card { background: #111; border: 1px solid #1a1a1a; border-radius: 8px; padding: 0.75rem; text-align: center; }
.stat-card.clickable { cursor: pointer; transition: border-color 0.15s; }
.stat-card.clickable:hover { border-color: #333; }
.stat-value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.65rem; color: #555; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.15rem; }
.metric-window { font-weight: 300; color: #444; font-size: 0.7rem; text-transform: none; letter-spacing: 0; }
.stat-unit { font-size: 0.7rem; font-weight: 400; color: #555; margin-left: 0.1rem; }
.stat-sublabel { font-size: 0.65rem; color: #444; margin-top: 0.2rem; }

/* Sub-tabs */
.sub-tabs { display: flex; gap: 0; margin-bottom: 0.75rem; border-bottom: 1px solid #222; }
.sub-tab { background: none; border: none; color: #555; font-size: 0.75rem; padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.sub-tab:hover { color: #999; }
.sub-tab.active { color: #fff; border-bottom-color: #fff; }

/* Service cards */
.service-card { transition: border-color 0.15s; }
.service-card:hover { border-color: #333; }

/* Filter pills */
.filter-pills { display: flex; gap: 0.25rem; }
.pill { background: #1a1a1a; border: 1px solid #222; color: #666; font-size: 0.7rem; padding: 0.25rem 0.6rem; border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.pill:hover { color: #999; border-color: #333; }
.pill.active { color: #fff; background: #222; border-color: #444; }

/* Charts */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.6rem; }
.chart-card { background: #111; border: 1px solid #1a1a1a; border-radius: 8px; padding: 0.75rem; }
.chart-card h2 { font-size: 0.7rem; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; }
.chart-card canvas { max-height: 200px; }

/* User cards */
.user-card { background: #111; border: 1px solid #1a1a1a; border-radius: 8px; margin-bottom: 0.4rem; overflow: hidden; }
.user-card-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; cursor: pointer; transition: background 0.1s; }
.user-card-header:hover { background: #161616; }
.user-id { font-family: monospace; font-size: 0.85rem; color: #fff; min-width: 140px; }
.user-summary { display: flex; gap: 0.35rem; flex: 1; flex-wrap: wrap; }
.user-date { font-size: 0.7rem; color: #444; white-space: nowrap; }
.user-card-detail { padding: 0 0.75rem 0.6rem; overflow-x: auto; }

/* Key-value detail grid */
.kv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #0d0d0d; border-radius: 6px; padding: 0.5rem; margin: 0.25rem 0; }
.kv { padding: 0.4rem 0.5rem; }
.kv-label { font-size: 0.6rem; color: #444; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; }
.kv-value { font-size: 0.8rem; font-family: monospace; word-break: break-all; }

/* Badges */
.badge { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.65rem; background: #1a1a1a; color: #888; font-variant-numeric: tabular-nums; }
.badge-green { background: #052e16; color: #4ade80; }
.badge-blue { background: #0c1a3d; color: #60a5fa; }
.badge-yellow { background: #2a1f00; color: #fbbf24; }

@media (max-width: 639px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .chart-row { grid-template-columns: 1fr; }
    .nav-left { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    nav { flex-wrap: wrap; gap: 0.5rem; }
    .user-card-header { flex-wrap: wrap; }
    .user-date { width: 100%; }
}

@media (min-width: 640px) {
    nav { padding: 0.6rem 2rem; }
    nav h1 { font-size: 1rem; }
    .content { padding: 2rem; }
}