:root{color-scheme:dark;font:13px/1.45 Arial,Helvetica,sans-serif;color:#e3eceb;background:#091a24}
*{box-sizing:border-box}
body{margin:0;width:420px;max-height:520px;overflow:hidden}
button,input,select{font:inherit}
button,a,input,select{outline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ecd298}
button{cursor:pointer;color:inherit}
button:hover{filter:brightness(1.15)}
[hidden]{display:none!important}
.lookout{display:flex;flex-direction:column;min-height:300px;max-height:520px;padding:14px;background:radial-gradient(at 90% 0,rgba(47,125,117,.15),transparent 50%),#0d222d}
header{display:flex;gap:9px;align-items:center;flex:none;margin-bottom:8px}
header img{width:34px;height:34px;object-fit:contain;flex:none}
header>div{min-width:0}
.eyebrow{font-size:7px;color:#8acac0;letter-spacing:1.1px;font-weight:700}
h1{font:20px/1.2 Georgia,serif;color:#f3ddb0;margin:2px 0 0;white-space:nowrap}
h1 em{font-weight:400}
header button{margin-left:auto;width:30px;height:30px;flex:none;background:transparent;border:1px solid #385460;border-radius:7px}
.intro{flex:none;font-size:11px;color:#a8c4c9;margin:0 0 8px}
nav{display:flex;flex:none;border-bottom:1px solid #35515e;gap:4px}
nav button{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:9px 3px;color:#a9bfc4;font-size:12px;font-weight:bold;white-space:nowrap}
nav .selected{border-bottom-color:#e4c27e;color:#f5ddb0}
nav span{font-size:10px;margin-left:4px}
.status{flex:none;font-size:10px;color:#8faeb5;margin:9px 0}
#content,#preferences{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding:0 4px 0 0;scrollbar-width:thin;scrollbar-color:#456572 transparent}
.card{border:1px solid #314d59;border-radius:8px;margin:0 0 8px;padding:10px 11px;background:#112934;border-left:3px solid var(--accent,#7baaa5)}
.card.cup{--accent:#e6bf66}.card.rift{--accent:#6fb7ef}.card.earn{--accent:#b696e8}.card.mission{--accent:#eca36a}.card.rally{--accent:#9edbc4}
.card .label{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:9px;letter-spacing:.6px;color:var(--accent,#b4cfcb);text-transform:uppercase;font-weight:bold}
.card h2{font:17px/1.25 Georgia,serif;margin:5px 0;color:#e9dcc1;overflow-wrap:anywhere}
.card p{margin:5px 0;font-size:11px;color:#b4c7cd}
.card .port{font-size:12px;color:#8fd4c5;font-weight:bold;overflow-wrap:anywhere}
.card .meta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px}
.card .time{font-size:11px;font-variant-numeric:tabular-nums;color:#d6ded9;margin:0}
.card .links{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:7px}
.card .meta .links{margin-top:0;margin-left:auto;gap:10px}
.card a{font-size:11px;color:#9ed8cf;text-decoration:underline;text-underline-offset:3px;min-height:20px;display:inline-flex;align-items:center}
.card .summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.news h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .rules{font-size:10px;color:#91acb4;margin:5px 0 0}
.cup-host{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #2d4954;padding:5px 0}
.cup-hosts .label{margin-bottom:5px}.cup-hosts .label h2{font:14px/1.35 Georgia,serif;margin:0;text-transform:none;letter-spacing:0}
.cup-host .host-name{min-width:0;overflow-wrap:anywhere}.cup-host .host-name a{font-weight:bold;font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cup-host .time{white-space:nowrap;flex:none}.cup-hosts .links{margin-top:3px}
.event-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:1px 0 7px;font-size:11px;color:#a8c4c9}
.event-toolbar select{display:inline-block;max-width:160px;padding:3px 5px;font-size:11px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 6px;font-size:11px;color:#a9c1c5}
#pagination{flex:none}
.pager button{background:#183540;border:1px solid #385862;border-radius:5px;padding:5px 9px;font-size:11px;min-height:29px}.pager button:disabled{opacity:.4;cursor:default}
.pill{border:1px solid #446760;border-radius:20px;padding:1px 6px;color:#a3dcc1;background:#173b34;white-space:nowrap;letter-spacing:.2px}
.empty{padding:20px 14px;text-align:center;border:1px dashed #3b5660;border-radius:8px;color:#b0c6cb}
.empty strong{display:block;font:18px Georgia,serif;color:#e1cead}.empty p{font-size:12px}
.preview{flex:none;background:#3d351e;color:#f8e1a7;font-size:10px;padding:6px 8px;margin:0 0 8px;border:1px solid #766333;border-radius:5px}
.preview summary{cursor:pointer}.preview p{margin:5px 0 0;line-height:1.5}
.dim{color:#9fb8bf;font-size:11px}.check{display:flex;gap:8px;align-items:center;padding:6px 0}.check input{accent-color:#97dac5}
.pref-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 7px}.hours{display:flex;gap:12px;margin:7px 0}.hours label{font-size:12px}
.hours input,select{display:block;padding:7px;color:#dfebe9;background:#122e39;border:1px solid #44636a;border-radius:5px;max-width:100%}
.select-label{display:block;font-size:12px;margin:10px 0}.select-label select{width:100%;margin-top:4px}
.primary{background:#e8ca90;border:0;color:#102630;font-weight:bold;padding:9px 14px;border-radius:6px}
h2{font:21px Georgia,serif;color:#e5d6b5;margin:7px 0}#preferences>p{font-size:12px}
footer{display:flex;flex:none;align-items:center;justify-content:space-between;border-top:1px solid #35515e;padding-top:9px;margin-top:4px;font-size:10px;color:#99b8bf}
footer button{background:none;border:0;color:#a8d5c9;font-size:11px;min-height:24px}
#pref-status{min-height:20px;color:#bce4d5}
body.preview-mode{width:auto;height:auto;min-height:100vh;overflow:auto;background:radial-gradient(at 50% 20%,#284953,#071722 70%);padding:24px}
.preview-mode .lookout{width:420px;max-width:100%;margin:auto;border:1px solid #486571;border-radius:12px;box-shadow:0 18px 70px #020c1480}
@media(max-width:467px){body.preview-mode{padding:8px}.preview-mode .lookout{padding:12px;max-height:min(520px,calc(100dvh - 16px));min-height:300px}.preview-mode h1{font-size:18px}.preview-mode .eyebrow{letter-spacing:.5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}