:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #071b33; color: #f4f8fc; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #123b66 0, #071b33 46%, #04101e 100%); }
.shell { width: 100%; min-height: 100vh; padding: clamp(20px, 4vw, 64px); }
.panel { width: min(100%, 620px); margin: 5vh auto; padding: clamp(28px, 5vw, 56px); border: 1px solid #2c5a84; border-radius: 22px; background: rgba(7, 27, 51, .94); box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.activation-panel { text-align: center; }
.brand-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 16px; background: #e5a900; color: #071b33; font-size: 38px; font-weight: 900; }
.eyebrow { margin: 0 0 8px; color: #f0b51b; font-size: clamp(12px, 1.5vw, 18px); font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(30px, 5vw, 64px); line-height: 1; }
.muted, .hint { color: #a9bfd5; line-height: 1.5; }
.hint { margin: 24px 0 0; font-size: 12px; opacity: .75; }
form { display: grid; gap: 10px; margin-top: 28px; text-align: left; }
label { color: #c9d9e8; font-size: 14px; font-weight: 700; }
input, button { min-height: 54px; border: 1px solid #3b688d; border-radius: 10px; padding: 0 16px; font: inherit; font-size: 18px; }
input { background: #0d2a49; color: #fff; }
button { margin-top: 8px; border: 0; background: #e5a900; color: #071b33; font-weight: 800; cursor: pointer; }
button:focus, input:focus { outline: 3px solid #63b7ff; outline-offset: 2px; }
.error { min-height: 1.2em; color: #ff9b9b; }
.hidden { display: none !important; }
.dashboard { max-width: 1900px; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; gap: 24px; align-items: end; border-bottom: 1px solid #2c5a84; padding-bottom: 22px; }
.session-meta { display: grid; gap: 8px; color: #a9bfd5; text-align: right; font-size: clamp(13px, 1.3vw, 20px); }
.schedule-message { margin: 24px 0; padding: 18px; border: 1px solid #e5a900; border-radius: 12px; color: #ffe49a; text-align: center; font-size: clamp(20px, 3vw, 38px); font-weight: 800; }
.indicators { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0; }
.indicator { padding: 22px; border-radius: 14px; background: #0d2a49; border-left: 5px solid #e5a900; }
.indicator strong { display: block; margin-top: 8px; font-size: clamp(32px, 5vw, 64px); }
.pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.piece { padding: 24px; border-radius: 16px; background: #f4f8fc; color: #071b33; }
.piece h2 { margin: 0 0 14px; font-size: clamp(20px, 2.3vw, 34px); }
.piece .detail { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: #36516b; }
.piece .remaining { margin-top: 22px; font-size: clamp(30px, 4vw, 52px); font-weight: 900; }
.piece.orange { border-top: 10px solid #e5a900; }
.piece.red { border-top: 10px solid #d73545; }
@media (max-width: 680px) { .topbar { align-items: start; flex-direction: column; } .session-meta { text-align: left; } .indicators { grid-template-columns: 1fr; } }