:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #0b1020; color: #e8ecf5; }
a { color: inherit; }
.container { width: min(1180px, calc(100% - 32px)); margin: 36px auto; }
.card { background: #141b2d; border: 1px solid #26314c; border-radius: 14px; padding: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.login { width: min(440px, calc(100% - 32px)); margin: 12vh auto; }
h1,h2 { margin-top: 0; }
input, select, textarea, button { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #33415f; background: #0f1628; color: #fff; }
button,.button { cursor: pointer; background: #4277ff; border: 0; text-decoration: none; display: inline-block; width: auto; padding: 10px 14px; border-radius: 8px; }
.button.secondary, button.secondary { background: #27344f; }
.button.danger, button.danger { background: #c03c52; }
.row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.stat { padding:16px; border-radius:12px; background:#10182a; border:1px solid #26314c; }
.stat strong { display:block; font-size:28px; }
table { width:100%; border-collapse:collapse; margin-top:16px; }
th,td { text-align:left; padding:11px 8px; border-bottom:1px solid #26314c; vertical-align:middle; }
code { background:#0a1020; padding:3px 6px; border-radius:6px; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; background:#27344f; }
.badge.ok { background:#174c38; }
.badge.bad { background:#672b3a; }
.error { background:#672b3a; padding:10px; border-radius:8px; margin-bottom:12px; }
.notice { background:#174c38; padding:10px; border-radius:8px; margin-bottom:12px; }
.small { opacity:.72; font-size:13px; }
.inline-form { display:inline; }
.inline-form button { width:auto; padding:7px 10px; }
@media(max-width:850px){ .row,.stats{grid-template-columns:1fr 1fr;} table{display:block;overflow:auto;} }
@media(max-width:520px){ .row,.stats{grid-template-columns:1fr;} }
.program-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin:14px 0; }
.program-card { display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid #2b3755; border-radius:10px; text-decoration:none; background:#0f1628; }
.program-card.selected { border-color:#4277ff; box-shadow:0 0 0 1px #4277ff inset; }
.program-card code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.program-create { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:12px; }
.program-info { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.program-info h2 { margin:2px 0 0; }
.app-id { user-select:all; font-size:14px; }
button:disabled { opacity:.45; cursor:not-allowed; }
@media(max-width:600px){.program-create{grid-template-columns:1fr}.program-info{align-items:flex-start;flex-direction:column}}

.expiry-form { display:inline-flex; align-items:center; gap:6px; }
.expiry-form input[type="number"] { width:72px; padding:7px 8px; }
.expiry-form button { white-space:nowrap; }
.stream-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}.stream-card{display:flex;flex-direction:column;gap:9px;padding:16px;border:1px solid #2b3755;border-radius:12px;background:#0f1628;text-decoration:none}.stream-card.online{border-color:#2f9e74}.stream-card.offline{opacity:.62}.stream-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.viewer-card{text-align:center}.screen-view{display:block;max-width:100%;width:100%;height:auto;background:#05070c;border-radius:10px;border:1px solid #26314c;margin-bottom:10px}


/* Newly created key flash */
.created-notice { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.created-notice strong { white-space:nowrap; }
.created-key-list { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.created-key { user-select:all; font-size:14px; background:#0a1020; border:1px solid rgba(255,255,255,.08); }
.copy-created-keys { padding:7px 11px; white-space:nowrap; }