body{
    background:#111827;
    color:white;
    font-family:Arial;
    margin:0;
}

.nav{
    background:#0f172a;
    padding:15px 20px;
    display:flex;
    gap:20px;
    align-items:center;
}

.nav .brand, .nav a.brand{
    display:flex;
    align-items:center;
    gap:8px;
    flex:none;
    color:#38bdf8;
    font-size:20px;
    font-weight:bold;
    margin-right:auto;
}

.nav a{
    color:#94a3b8;
    text-decoration:none;
}

.nav a:hover{
    color:white;
}

.auth{
    background:#1e293b;
    padding:30px;
    border-radius:10px;
    max-width:380px;
    margin:60px auto;
}

.auth h1{
    color:#38bdf8;
    margin-top:0;
}

.auth label{
    display:block;
    margin-top:15px;
}

.auth input{
    margin-top:5px;
    padding:10px;
    width:100%;
    box-sizing:border-box;
    border-radius:5px;
    border:none;
}

.auth button{
    background:#38bdf8;
    border:none;
    padding:12px 20px;
    border-radius:5px;
    cursor:pointer;
    margin-top:20px;
    width:100%;
    font-weight:bold;
}

.auth .err{
    color:#f87171;
}

.auth .hint{
    color:#94a3b8;
    font-size:14px;
    margin-top:20px;
}

.auth a{
    color:#38bdf8;
}

.trailer-btn{
    background:none;
    border:1px solid #38bdf8;
    color:#38bdf8;
    padding:6px 12px;
    border-radius:5px;
    cursor:pointer;
    font-size:14px;
}

.trailer-btn:hover{
    background:#38bdf8;
    color:#0f172a;
}

#trailer-box{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
    padding:16px;
}

#trailer-box .trailer-frame{
    position:relative;
    width:min(960px, 100%);
    aspect-ratio:16/9;
    background:#000;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
}

#trailer-box iframe{
    width:100%;
    height:100%;
    border:0;
    border-radius:8px;
}

#trailer-box .trailer-close{
    position:absolute;
    top:-40px;
    right:0;
    background:none;
    border:none;
    color:white;
    font-size:32px;
    cursor:pointer;
}

#trailer-box .trailer-msg{
    color:#94a3b8;
}

.tile-search{
    margin-top:14px;
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.tile-search input{
    flex:1;
    min-width:200px;
    max-width:420px;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #334155;
    background:#0f172a;
    color:white;
    font-size:15px;
}

.tile-search input:focus{
    outline:2px solid #38bdf8;
    border-color:transparent;
}

[hidden]{ display:none !important; }

.search-more{
    color:#38bdf8;
    font-size:14px;
    text-decoration:none;
}

.search-more:hover{ text-decoration:underline; }

/* Live game card, ESPN Gamecast style */
.live-card{background:linear-gradient(135deg, color-mix(in srgb, var(--away) 45%, #0b1220) 0%, #0b1220 45%, #0b1220 55%, color-mix(in srgb, var(--home) 45%, #0b1220) 100%);border:1px solid #334155;border-radius:12px;padding:14px 16px;margin-bottom:20px;}
.lc-top{display:flex;gap:10px;align-items:center;font-size:13px;color:#cbd5e1;margin-bottom:10px;}
.lc-live{color:#f87171;font-weight:bold;letter-spacing:.5px;}
.lc-net{margin-left:auto;background:#1e293b;padding:2px 8px;border-radius:10px;}
.lc-score{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.lc-team{display:flex;align-items:center;gap:10px;min-width:0;}
.lc-home{flex-direction:row-reverse;text-align:right;}
.lc-team img{width:56px;height:56px;object-fit:contain;flex-shrink:0;}
.lc-abbr{font-size:20px;font-weight:bold;}
.lc-rec{color:#94a3b8;font-size:12px;}
.lc-ball{font-size:15px;}
.lc-nums{display:flex;gap:10px;align-items:center;font-size:40px;font-weight:bold;font-variant-numeric:tabular-nums;}
.lc-dash{color:#64748b;font-size:28px;}
.lc-lines{width:100%;margin:10px 0 4px;border-collapse:collapse;font-size:13px;color:#cbd5e1;}
.lc-lines th{color:#94a3b8;font-weight:normal;}
.lc-lines th,.lc-lines td{padding:3px 6px;text-align:center;}
.lc-lines td:first-child{text-align:left;font-weight:bold;}
.lc-dd{margin-top:10px;font-weight:bold;font-size:15px;}
.lc-dd.lc-red{color:#f87171;}
.lc-field{display:flex;height:44px;margin-top:8px;border-radius:6px;overflow:hidden;border:1px solid #14532d;}
.lc-ez{width:9%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:bold;writing-mode:vertical-rl;transform:rotate(180deg);}
.lc-ez-away{background:var(--away);}
.lc-ez-home{background:var(--home);transform:none;}
.lc-turf{position:relative;flex:1;background:repeating-linear-gradient(90deg,#166534 0 10%,#15803d 10% 20%);}
.lc-yd{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.35);}
.lc-yd b{position:absolute;bottom:2px;left:-8px;width:16px;text-align:center;font-size:10px;color:rgba(255,255,255,.75);}
.lc-first{position:absolute;top:0;bottom:0;width:3px;margin-left:-1px;background:#facc15;}
.lc-spot{position:absolute;top:50%;width:14px;height:9px;margin:-5px 0 0 -7px;background:#7c2d12;border:1px solid #fde68a;border-radius:50%;}
.lc-drive{color:#94a3b8;font-size:12px;margin-top:6px;}
.lc-play{margin-top:10px;font-size:14px;background:rgba(15,23,42,.7);padding:8px 10px;border-radius:8px;}
.lc-play span{color:#38bdf8;font-weight:bold;margin-right:6px;}
.lc-watch{display:block;margin-top:12px;text-align:center;background:#dc2626;color:white;font-weight:bold;padding:11px;border-radius:8px;text-decoration:none;font-size:16px;}
.lc-watch:hover{background:#ef4444;}
.lc-nowatch{margin-top:12px;text-align:center;color:#94a3b8;font-size:13px;background:rgba(15,23,42,.7);padding:8px;border-radius:8px;}
.lc-prob{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:#cbd5e1;}
.lc-bar{flex:1;height:6px;border-radius:3px;background:var(--home);overflow:hidden;}
.lc-bar i{display:block;height:100%;background:var(--away);}

@media (max-width:560px){ .lc-nums{font-size:30px;} .lc-team img{width:40px;height:40px;} .lc-abbr{font-size:16px;} }

/* Dashboard: compact live score lines that open the tracker */
.live-item{margin-bottom:8px;}
.live-item > summary{list-style:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#1e293b;padding:10px 14px;border-radius:10px;cursor:pointer;border:1px solid #334155;}
.live-item > summary::-webkit-details-marker{display:none;}
.live-item > summary:hover{border-color:#64748b;}
.live-item[open] > summary{border-radius:10px 10px 0 0;border-bottom-color:transparent;}
.live-item[open] > .live-card{border-radius:0 0 12px 12px;border-top:none;margin-bottom:0;}
.ll-live{color:#f87171;}
.ll-teams{display:flex;align-items:center;gap:6px;font-size:16px;}
.ll-teams img{width:24px;height:24px;object-fit:contain;}
.ll-score{font-weight:bold;font-size:18px;margin:0 6px;font-variant-numeric:tabular-nums;}
.ll-meta{color:#94a3b8;font-size:13px;}
.ll-open{margin-left:auto;color:#38bdf8;font-size:13px;font-weight:bold;}
.live-item[open] .ll-open{visibility:hidden;}

.live-item.fav > summary{border-color:#b45309;}
.ll-fav{color:#fbbf24;font-size:16px;}
.ll-rank{color:#94a3b8;font-size:11px;margin-right:2px;}
.lc-slot .live-card{border-radius:0 0 12px 12px;border-top:none;margin-bottom:0;}

/* Fallback layout for pages without their own card styles (onboarding, clip, bookmarklet, import review).
   :where() keeps these at zero specificity so each page's own .card / .meta rules still win. */
:where(.card){background:#1e293b;padding:20px;border-radius:10px;max-width:700px;margin:20px auto;box-sizing:border-box;}
:where(.card h1){color:#38bdf8;margin-top:0;}
:where(.meta){color:#94a3b8;font-size:14px;}
@media (max-width:740px){ :where(.card){margin:16px;} }
/* Links never break mid-name; on mid-size screens they flow to a second row, on phones the bar scrolls */
.nav{flex-wrap:wrap;row-gap:8px;}
.nav a{white-space:nowrap;}
@media (max-width:1300px){ .nav{gap:14px;} }
@media (max-width:740px){ .nav{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;} .nav a{flex:none;} }
/* Login card: padding inside its width, and phone-width margins */
.auth{box-sizing:border-box;}
@media (max-width:440px){ .auth{margin:24px 16px;} }

.nav .brand img{width:30px;height:30px;}
.auth-logo{display:block;width:120px;height:120px;margin:0 auto 8px;}
.auth .auth-brand{margin:0 0 12px;}
.auth-lockup{display:block;width:100%;max-width:320px;height:auto;margin:0 auto;}
.auth .auth-logo + h1{text-align:center;}
.slogan{color:#f6a04d;font-weight:bold;}
.auth .slogan{text-align:center;font-size:15px;margin:-12px 0 8px;}
.card h1 + .slogan{font-size:16px;margin:-8px 0 10px;}
.nav .brand-text{display:flex;flex-direction:column;line-height:1.1;}
.nav .brand-text .slogan{font-size:11px;margin-top:2px;}
@media (max-width:900px){ .nav .brand-text .slogan{display:none;} }
:where(.profile-picker select, .profile-picker input){padding:8px;border-radius:5px;border:none;font:inherit;}
.profile-picker input:not([hidden]){display:block;margin-top:6px;}
.ll-fan{color:#f6a04d;font-size:12px;font-weight:bold;white-space:nowrap;}

/* Live UFC card on the Dashboard */
.ll-event{font-weight:bold;font-size:15px;}
.ue-card{background:#0b1220;border:1px solid #334155;border-top:none;border-radius:0 0 10px 10px;padding:6px 14px 10px;}
.ue-bout{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:7px 0;border-bottom:1px solid #1e293b;font-size:14px;}
.ue-bout:last-child{border-bottom:none;}
.ue-bout.now{background:#1e1b2e;margin:0 -14px;padding:7px 14px;}
.ue-weight{color:#94a3b8;font-size:12px;min-width:150px;}
.ue-result{flex:1;min-width:200px;}
.ue-live{color:#f87171;font-weight:bold;font-size:12px;min-width:62px;}
.ue-done{color:#94a3b8;font-size:12px;min-width:62px;}
.ue-next{color:#38bdf8;font-size:12px;min-width:62px;}
.ue-par{font-weight:bold;min-width:44px;font-variant-numeric:tabular-nums;}
.ue-bout.followed{background:#2a1f0a;margin:0 -14px;padding:7px 14px;border-left:3px solid #fbbf24;}

/* How-to players (api/howto.php, js/howto.js): a phone that plays through the steps */
.howto-player{display:flex;gap:24px;align-items:center;flex-wrap:wrap;background:#0f172a;border:1px solid #334155;border-radius:14px;padding:18px;margin:12px 0;}
.howto-player.video video{width:100%;max-width:360px;border-radius:12px;background:#000;}
.hp-phone{position:relative;width:230px;height:410px;flex:none;border:10px solid #020617;border-radius:32px;background:#f8fafc;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);margin:0 auto;}
.hp-screen{position:absolute;inset:0;opacity:0;transition:opacity .45s;color:#0f172a;font-size:13px;}
.hp-screen.on{opacity:1;}
.hp-bar{background:#e2e8f0;color:#334155;font-size:10px;padding:8px 10px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #cbd5e1;}
.hp-bar.url{font-family:Menlo,monospace;}
.hp-body{padding:14px 12px;}
.hp-side{flex:1;min-width:230px;}
.hp-captions{min-height:96px;}
.hp-caption{display:none;margin:0;font-size:16px;line-height:1.5;color:#e2e8f0;}
.hp-caption.on{display:block;}
.hp-num{display:block;color:#f6a04d;font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.hp-dots{display:flex;gap:6px;margin:14px 0;}
.hp-dots span{width:9px;height:9px;border-radius:50%;background:#334155;cursor:pointer;}
.hp-dots span.on{background:#38bdf8;}
.hp-controls{display:flex;gap:8px;flex-wrap:wrap;}
.hp-controls button{background:#334155;color:#e2e8f0;border:none;border-radius:6px;padding:7px 12px;cursor:pointer;font-weight:bold;}
.hp-controls button[data-play]{background:#38bdf8;color:#0f172a;}
/* Screen content pieces */
.hs-h{font-weight:bold;font-size:15px;margin-bottom:10px;}
.hs-note{color:#64748b;font-size:11px;margin:8px 0;}
.hs-row{background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:8px;margin:6px 0;font-size:12px;}
.hs-btn{display:inline-block;background:#38bdf8;color:#0f172a;font-weight:bold;border-radius:6px;padding:7px 12px;margin-top:10px;font-size:12px;}
.hs-btn.alt{background:#e2e8f0;}
.hs-field{background:#fff;border:1px solid #94a3b8;border-radius:6px;padding:8px;margin:8px 0;font-size:12px;}
.hs-file{background:#ecfeff;border:1px dashed #0891b2;border-radius:6px;padding:8px;font-size:11px;margin:8px 0;word-break:break-all;}
.hs-tiles{display:flex;gap:8px;justify-content:center;margin-top:30px;}
.hs-tiles span{width:58px;height:58px;border-radius:8px;background:#94a3b8;color:#fff;display:flex;align-items:flex-end;justify-content:center;font-size:11px;padding-bottom:4px;}
.hs-tiles span:nth-child(1){background:#38bdf8;}.hs-tiles span:nth-child(2){background:#a78bfa;}.hs-tiles span:nth-child(3){background:#f6a04d;}
.hs-toast{background:#0f172a;color:#fff;border-radius:10px;padding:12px;margin-top:120px;text-align:center;font-size:12px;}
.hs-push{background:#fff;border-radius:12px;padding:12px;margin-top:40px;box-shadow:0 4px 14px rgba(0,0,0,.2);font-size:12px;border-left:4px solid #f6a04d;}
.hs-sheet{margin-top:150px;}
.hs-menu{float:right;font-size:20px;padding:0 8px;border-radius:6px;}
.hs-stats{display:flex;gap:8px;margin-bottom:8px;}
.hs-stats span{flex:1;background:#0f172a;color:#fff;border-radius:6px;padding:6px;font-size:11px;text-align:center;}
.hs-stats b{display:block;font-size:18px;color:#38bdf8;}
.hs-tag{display:inline-block;background:#dcfce7;color:#166534;border-radius:8px;padding:1px 6px;font-size:10px;font-weight:bold;}
.hs-live{color:#dc2626;font-weight:bold;}
.hs-scroll{animation:hs-scroll 3s ease-in-out infinite alternate;}
@keyframes hs-scroll{to{transform:translateY(-14px);}}
/* "Tap here": a pulsing ring on the thing to press */
.hp-screen.on .tap{box-shadow:0 0 0 0 rgba(56,189,248,.7);animation:hs-tap 1.4s ease-out .8s infinite;outline:2px solid #0ea5e9;}
@keyframes hs-tap{to{box-shadow:0 0 0 12px rgba(56,189,248,0);}}
/* Typing: text reveals left to right each time the step comes on */
.hs-typing{overflow:hidden;white-space:nowrap;font-family:Menlo,monospace;}
.hp-screen.on .hs-typing{animation:hs-type 1.6s steps(28) both;}
@keyframes hs-type{from{max-width:0;}to{max-width:100%;}}
@media (prefers-reduced-motion: reduce){ .hp-screen{transition:none;} .hp-screen.on .tap,.hp-screen.on .hs-typing,.hs-scroll{animation:none;} }

/* Credits footer on every page (api/footer.php) */
.site-footer{max-width:1100px;margin:30px auto 20px;padding:12px 16px;color:#64748b;font-size:12px;line-height:1.6;text-align:center;border-top:1px solid #1e293b;}
.site-footer a{color:#94a3b8;}