:root{--ink:#172227;--paper:#f5f3ed;--panel:#fffefa;--muted:#798285;--line:#dfe3dc;--orange:#ef693c;--orange-dark:#ba4427;--green:#46aa77;--red:#dc6558;--gray:#b8bfbb;--navy:#1b2b32;--shadow:0 18px 50px rgba(23,34,39,.09);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(239,105,60,.35);outline-offset:2px}.hidden{display:none!important}.screen{min-height:100vh}.login-screen{background:var(--navy);color:#f8f7f0;display:grid;grid-template-columns:minmax(320px,520px) 1fr;align-items:center;padding:8vw 10vw;position:relative;overflow:hidden}.login-screen:after{content:"";position:absolute;right:-16vw;top:-14vw;width:58vw;height:58vw;border:1px solid rgba(248,247,240,.15);border-radius:50%;box-shadow:0 0 0 30px rgba(248,247,240,.025),0 0 0 90px rgba(248,247,240,.02)}.login-card{position:relative;z-index:1}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--orange);text-transform:uppercase}.login-screen h1{font-family:Georgia,serif;font-size:clamp(58px,8vw,112px);line-height:.84;letter-spacing:-.07em;font-weight:400;margin:28px 0}.login-screen h1 em,h2 em{color:var(--orange);font-weight:400}.lede{color:#b9c5c4;max-width:390px;line-height:1.55;margin-bottom:38px}.login-card form{max-width:370px;display:grid;gap:16px}.login-card label{font-size:11px;color:#b9c5c4;text-transform:uppercase;letter-spacing:.12em}.login-card input{display:block;width:100%;margin-top:7px;border:1px solid #526369;background:#263940;border-radius:2px;padding:13px 14px;color:#fff}.primary{border:0;background:var(--orange);color:white;padding:13px 17px;font-weight:800;letter-spacing:.01em;border-radius:2px;transition:transform .15s,background .15s}.primary:hover{background:var(--orange-dark);transform:translateY(-1px)}.primary span{float:right;font-size:18px;line-height:12px}.login-note{margin-top:25px;color:#789093;font-size:11px}.login-note code{color:#d5dedb}.login-mark{position:absolute;bottom:35px;right:42px;color:#769093;font-size:11px;letter-spacing:.15em}.login-mark span{color:var(--orange);margin:0 7px}.topbar{height:56px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,78px);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em}.brand-mark{font-size:10px;letter-spacing:.05em;background:var(--navy);color:var(--orange);padding:8px 6px}.top-actions{display:flex;align-items:center;gap:18px}.user-label{font-size:12px;color:var(--muted)}.quiet{border:0;background:transparent;color:var(--ink);font-size:12px;font-weight:700;padding:9px}.quiet:hover{color:var(--orange)}.page{max-width:1500px;margin:0 auto;padding:clamp(36px,5vw,80px) clamp(22px,5vw,78px)}.page-intro{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:54px}.page-intro.compact{margin-bottom:40px}.page-intro h2{font-family:Georgia,serif;font-size:clamp(42px,6vw,78px);font-weight:400;line-height:.9;letter-spacing:-.07em;margin:18px 0 0}.intro-side{max-width:330px}.intro-side p,.muted{color:var(--muted);font-size:13px;line-height:1.6}.mode-toggle{display:flex;gap:9px;align-items:center}.mode-toggle select{border:1px solid var(--line);background:transparent;color:var(--ink);padding:7px 9px;font-size:11px}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:16px}.video-card{background:var(--panel);border:1px solid var(--line);min-height:260px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#bec9c3}.card-top{background:var(--navy);height:120px;padding:18px;display:flex;justify-content:space-between;align-items:start;color:#f6f4ed}.card-index{font:11px Georgia,serif;color:#aebdbc}.card-title{font-family:Georgia,serif;font-size:21px;line-height:1.05;letter-spacing:-.04em;word-break:break-word;margin-top:auto;max-width:210px}.card-body{padding:17px 18px 16px;display:flex;flex-direction:column;gap:12px;flex:1}.progress-meta{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.progress-meta span:last-child{color:var(--muted);font-weight:500}.card-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-top:auto}.card-arrow{font-size:18px;color:var(--orange)}.empty{padding:70px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);grid-column:1/-1}.admin-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}.panel{background:var(--panel);border:1px solid var(--line);padding:25px}.panel:nth-child(3){grid-column:1/-1}.panel-head{display:flex;justify-content:space-between;align-items:start;gap:15px}.panel h3{font:400 30px Georgia,serif;letter-spacing:-.05em;margin:10px 0 20px}.small{font-size:11px;padding:10px 12px}.table-list{border-top:1px solid var(--line)}.table-row{display:grid;grid-template-columns:1fr 100px auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}.table-row .sub{font-size:10px;color:var(--muted);display:block;margin-top:4px}.table-row button{border:0;background:transparent;color:var(--orange-dark);font-size:10px;font-weight:700}.inline-form{display:flex;align-items:center;gap:8px}.inline-form input{width:90px;border:1px solid var(--line);padding:10px;background:var(--paper)}.inline-form span{font-size:12px;color:var(--muted)}.upload-label{display:inline-block;cursor:pointer}.upload-label input{display:none}.annotator-shell{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px}.annotator-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:18px}.annotator-head h2{font:400 37px Georgia,serif;letter-spacing:-.06em;margin:9px 0 0;word-break:break-word}.annotator-head .segment-note{text-align:right;font-size:11px;line-height:1.6;color:var(--muted)}.stage{background:#101c20;position:relative;min-height:360px;display:flex;align-items:center;justify-content:center;overflow:hidden}.stage video{display:block;width:100%;max-height:68vh;object-fit:contain}.stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}.player-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}.player-tools button{border:1px solid var(--line);background:var(--panel);padding:10px 12px;font-size:11px;font-weight:700;color:var(--ink)}.player-tools button:hover{border-color:var(--orange);color:var(--orange)}.player-tools .danger{color:var(--red)}.player-tools .tool-label{font-size:10px;color:var(--muted);margin-left:auto;text-transform:uppercase;letter-spacing:.1em}.timeline-panel{background:var(--panel);border:1px solid var(--line);padding:20px;height:max-content}.timeline-panel h3{font:400 25px Georgia,serif;margin:0 0 8px;letter-spacing:-.05em}.timeline-panel p{font-size:11px;color:var(--muted);line-height:1.5}.timeline{display:grid;grid-template-columns:repeat(60,1fr);height:36px;gap:1px;background:var(--paper);margin:18px 0;cursor:pointer}.timeline i{background:var(--gray);min-width:1px}.timeline i.red{background:var(--red)}.timeline i.green{background:var(--green)}.timeline i.current{box-shadow:inset 0 0 0 2px white}.toast{position:fixed;right:25px;bottom:25px;background:var(--navy);color:white;padding:13px 17px;font-size:12px;box-shadow:var(--shadow);transform:translateY(140%);transition:transform .25s;z-index:20}.toast.show{transform:translateY(0)}.error{color:#ff9f83;font-size:12px;min-height:18px;margin:0}@media(max-width:800px){.login-screen{display:block;padding:22vh 8vw}.login-screen:after{right:-30vw;top:8vh;width:90vw;height:90vw}.page-intro{display:block}.intro-side{margin-top:28px}.admin-layout{grid-template-columns:1fr}.panel:nth-child(3){grid-column:auto}.annotator-shell{grid-template-columns:1fr}.timeline-panel{order:2}.annotator-head .segment-note{text-align:left}.stage{min-height:240px}.topbar{padding:0 18px}.user-label{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.stats-strip{display:flex;flex-wrap:wrap;align-items:stretch;margin:0 0 22px;padding-bottom:18px}.stats-cell{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:2px 24px;border-left:1px solid var(--line)}.stats-cell:first-child{padding-left:0;border-left:0}.stats-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.stats-value{font-size:30px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.stats-activity{flex:1 1 240px;min-width:180px}.stats-bars{display:flex;align-items:flex-end;gap:3px;height:30px}.stats-bar{flex:1 1 auto;min-width:3px;max-width:9px;height:var(--fill);min-height:2px;background:var(--green)}.stats-bar.empty{background:var(--gray);opacity:.4}

/* Aggregate library stats strip (replaces the old personal daily-bar cells). */
.stats-strip{display:flex;flex-wrap:wrap;gap:22px;align-items:stretch;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.agg-cell{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-width:170px}
.agg-cell + .agg-cell{padding-left:22px;border-left:1px solid var(--line)}
.agg-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.agg-value{font-size:24px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.agg-progress{flex:1 1 300px}
/* Shared progress bar: 24px tall, the percentage centred inside it in
   monospace. The label is drawn twice — a light layer over the empty track and
   a dark layer clipped to the filled span — so it reads on both halves. */
.prog-bar{position:relative;isolation:isolate;height:24px;border-radius:12px;overflow:hidden;background:var(--gray)}
.prog-fill{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-radius:12px;transition:width .3s ease}
.prog-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,"Cascadia Mono","JetBrains Mono",Consolas,monospace;font-size:12px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#f2f7ff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.prog-label.cut{color:#07130d;text-shadow:none}
.agg-bar{height:24px;background:var(--gray);border-radius:12px;overflow:hidden}
.agg-bar .prog-label{font-size:13px}
.agg-bar-fill{height:100%;background:var(--green);border-radius:12px;transition:width .3s ease}
/* Stat lines are segment boxes so a narrow card wraps between them. */
.agg-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:0 8px}
.card-meta .card-duration{font-variant-numeric:tabular-nums}
.stat-sep{font-style:normal;opacity:.5}
/* Loot store, item cards, leaderboard, profile. */
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;text-align:left}
.modal-head h3{margin:0;font-size:20px}
.modal-close{background:none;border:0;font-size:16px;color:var(--muted);padding:2px 6px;border-radius:3px}
.modal-close:hover{color:var(--ink)}
.store-card,.leaderboard-card,.profile-card{text-align:left}
.store-card{width:440px}
.leaderboard-card{width:380px}
.profile-card{width:800px}
.store-note{margin-top:14px}
.crate-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.crate-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:5px}
.crate-icon{font-size:20px;width:34px;height:34px;display:grid;place-items:center;border-radius:4px;background:var(--panel);border:1px solid var(--line)}
.crate-info{flex:1;min-width:0}
.crate-info strong{display:block}
.crate-info .sub{display:block;font-size:11px;color:var(--muted)}
.crate-price{font-variant-numeric:tabular-nums;font-weight:700;color:#d9a441}
.crate-row button:disabled{opacity:.45;cursor:not-allowed}
.crate-result{margin-top:8px;padding:14px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.crate-item{display:flex;gap:14px;align-items:flex-start}
.item-art{flex:0 0 auto}
.item-art img,.inventory-item img{image-rendering:pixelated;image-rendering:crisp-edges;background:repeating-conic-gradient(#1c2733 0 25%,#16202b 0 50%) 0 0/16px 16px;border:1px solid var(--line);border-radius:4px}
.item-meta{flex:1;min-width:0}
.item-quality{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.item-name{font-size:18px;font-weight:800;line-height:1.2}
.item-family{font-size:11px;color:var(--muted);text-transform:capitalize;margin:2px 0 8px}
.item-props{margin:0 0 8px;padding:0;list-style:none;font-size:13px}
.item-props li{margin:2px 0}
.item-total{font-size:14px}
.item-synergies{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.synergy{font-size:11px;padding:2px 6px;border-radius:3px;border:1px solid var(--line)}
.synergy.up{color:#3fbf7f;border-color:rgba(63,191,127,.4)}
.synergy.down{color:#e06a5e;border-color:rgba(224,106,94,.4)}
.leaderboard-card .table-row .rank{width:24px;color:var(--muted);font-variant-numeric:tabular-nums}
.leaderboard-card .coins{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.leaderboard-card .coins .coin-dot{color:#d9a441}
.inventory-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.inventory-item:last-child{border-bottom:0}
.inventory-item .item-props{font-size:12px;color:var(--muted)}
.inventory-item .item-total{font-size:13px;font-weight:700}
.inventory-item button{margin-left:auto}
.coin-display{cursor:pointer}
.coin-display:hover{filter:brightness(1.15)}
.user-label{cursor:pointer}
.user-label:hover{color:var(--orange)}

/* Crate reveal modal: glow behind the sprite, drop shadow, aspect-preserved. */
.modal-over { z-index: 80; }
.crate-result-card { width: 430px; }
.crate-item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 0 4px; }
.item-art { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 160px; height: 160px; padding: 18px; border-radius: 10px; background: radial-gradient(closest-side at 50% 42%, rgba(20, 30, 42, .95), rgba(10, 15, 22, .9)); border: 1px solid var(--line); overflow: visible; }
.item-art::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow, #4f8cff), transparent 72%); filter: blur(14px); opacity: .55; animation: item-glow 2.4s ease-in-out infinite; pointer-events: none; }
.item-art img { position: relative; width: 108px; height: 108px; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
@keyframes item-glow { 0%, 100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.1); } }
.inventory-item img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }

/* Admin: back link, users table, role chips, row buttons. */
.admin-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px; padding: 4px 0; background: none; border: 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.admin-back:hover { color: var(--orange-dark); }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.admin-table th { padding: 0 10px 8px 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; text-align: left; }
.admin-table th.th-actions { text-align: right; }
.admin-table td { padding: 10px 10px 10px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.admin-table td.td-actions { text-align: right; white-space: nowrap; }
.admin-table .user-cell { font-weight: 600; }
.you-chip { margin-left: 6px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green); border-radius: 8px; padding: 1px 6px; vertical-align: 1px; }
.role-chip { display: inline-block; padding: 2px 9px; border: 1px solid var(--line); border-radius: 10px; font-size: 10px; text-transform: capitalize; }
.role-chip.admin { color: var(--orange-dark); border-color: var(--orange); }
.btn-mini { padding: 6px 11px; margin-left: 8px; font-size: 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); cursor: pointer; }
.btn-mini:hover { border-color: var(--orange); color: var(--orange-dark); }
.btn-mini.danger:hover { border-color: var(--red); color: var(--red); }
.rewards-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px 20px; margin-top: 14px; align-items: center; max-width: 640px; }
.rewards-form label { display: contents; }
.rewards-form label span { font-size: 12px; color: var(--muted); }
.rewards-form input { width: 110px; justify-self: end; padding: 9px 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--ink); }
.rewards-form button { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }