/* === RESET + VARIABLES === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0F0F1A;--bg2:#1A1A2E;--bg3:#252540;--bg4:#2F2F4A;
  --card:#1E1E35;--card2:#282845;--border:rgba(255,255,255,0.06);
  --text-1:#F0F0FF;--text-2:#A0A0C0;--text-3:#6B6B8D;
  --accent:#007EFF;--accent2:#00C2FF;--accent-glow:rgba(0,126,255,0.3);
  --green:#00E676;--green-glow:rgba(0,230,118,0.2);
  --orange:#FFB74D;--orange-glow:rgba(255,183,77,0.2);
  --pink:#FF6B9D;--pink-glow:rgba(255,107,157,0.2);
  --cyan:#00E5FF;--cyan-glow:rgba(0,229,255,0.2);
  --red:#FF5252;
  --c1:#007EFF;--c2:#00E676;--c3:#FF6B9D;--c4:#FFB74D;
  --c1g:linear-gradient(135deg,#007EFF,#00C2FF);
  --c2g:linear-gradient(135deg,#00E676,#69F0AE);
  --c3g:linear-gradient(135deg,#FF6B9D,#FF8A80);
  --c4g:linear-gradient(135deg,#FFB74D,#FFD54F);
  --radius:16px;--radius-sm:10px;
  --shadow:0 8px 32px rgba(0,0,0,0.3);
  --topbar-bg:rgba(15,15,26,0.85);
}
html.light{
  --bg:#F4F5F9;--bg2:#FFFFFF;--bg3:#EEF0F5;--bg4:#E2E5EC;
  --card:#FFFFFF;--card2:#F8F9FC;--border:rgba(0,0,0,0.07);
  --text-1:#1A1A2E;--text-2:#555570;--text-3:#8E8EA8;
  --accent:#007EFF;--accent2:#0A74E8;--accent-glow:rgba(0,126,255,0.15);
  --green:#00C853;--green-glow:rgba(0,200,83,0.12);
  --orange:#F57C00;--orange-glow:rgba(245,124,0,0.12);
  --pink:#E91E63;--pink-glow:rgba(233,30,99,0.1);
  --cyan:#0097A7;--cyan-glow:rgba(0,151,167,0.1);
  --red:#D32F2F;
  --c1:#007EFF;--c2:#00C853;--c3:#E91E63;--c4:#F57C00;
  --shadow:0 4px 20px rgba(0,0,0,0.06);
  --topbar-bg:rgba(255,255,255,0.88);
}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","SF Pro Display",sans-serif;background:var(--bg);color:var(--text-1);line-height:1.6;overflow:hidden;height:100vh}

/* === LOGIN === */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 0,rgba(0,126,255,0.16),transparent 34%),var(--bg)}
.login-card{width:min(420px,100%);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:34px 28px;text-align:center;box-shadow:var(--shadow)}
.login-mark{width:56px;height:56px;margin:0 auto 18px;border-radius:16px;background:var(--c1g);display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:800}
.login-card h1{font-size:24px;line-height:1.2;margin-bottom:10px}
.login-card p{font-size:14px;color:var(--text-3);margin-bottom:22px}
.login-main{width:100%;margin-bottom:12px}
.login-link{border:none;background:transparent;color:var(--text-3);font-size:13px;cursor:pointer;padding:6px 10px}
.login-link:hover{color:var(--accent2)}

/* === TOP BAR === */
.top-bar{position:sticky;top:0;z-index:100;background:var(--topbar-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:18px;font-weight:800;display:flex;align-items:center;gap:12px;background:var(--c1g);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.brand-icon{width:34px;height:34px;background:var(--c1g);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;-webkit-text-fill-color:#fff}
.top-right{display:flex;align-items:center;gap:14px}
.theme-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.theme-btn:hover{border-color:var(--accent);background:var(--accent-glow)}
.sync-badge{font-size:11px;padding:4px 10px;border-radius:12px;font-weight:600}
.sync-badge.synced{background:var(--green-glow);color:var(--green)}
.sync-badge.syncing{background:var(--accent-glow);color:var(--accent2)}
.sync-badge.offline{background:var(--bg3);color:var(--text-3)}
.observer-note{margin-top:12px;padding:12px;border-radius:10px;background:var(--bg3);color:var(--text-2);font-size:12px;line-height:1.6}
.toast{position:fixed;top:72px;left:50%;transform:translate(-50%,-10px);z-index:900;min-width:220px;max-width:min(460px,calc(100vw - 32px));padding:12px 18px;border-radius:14px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);color:var(--text-1);font-size:14px;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:all .22s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.success{border-color:rgba(0,200,83,.25);background:linear-gradient(135deg,var(--green-glow),var(--card))}
.toast.error{border-color:rgba(255,82,82,.28);background:linear-gradient(135deg,rgba(255,82,82,.12),var(--card))}
.toast.info{border-color:rgba(0,126,255,.25);background:linear-gradient(135deg,var(--accent-glow),var(--card))}

/* === MAIN LAYOUT === */
.main-split{display:flex;height:calc(100vh - 56px);overflow:hidden}
.left-panel{width:400px;min-width:400px;border-right:1px solid var(--border);background:var(--bg2);overflow-y:auto;flex-shrink:0}
.right-panel{flex:1;overflow-y:auto;background:var(--bg)}
.left-panel::-webkit-scrollbar,.right-panel::-webkit-scrollbar{width:5px}
.left-panel::-webkit-scrollbar-thumb,.right-panel::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
.left-panel::-webkit-scrollbar-track,.right-panel::-webkit-scrollbar-track{background:transparent}

/* === LEFT PANEL === */
.lp-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;position:relative;flex-shrink:0}
.lp-avatar .lv-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--accent);border-top-color:transparent;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* === PHASE GROUP === */
.phase-group{padding:0 12px 4px}
.pg-header{display:flex;align-items:center;gap:10px;padding:14px 8px 8px;cursor:pointer;user-select:none}
.pg-icon{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.pg-icon.p1{background:rgba(0,126,255,0.15)}.pg-icon.p2{background:rgba(0,230,118,0.12)}
.pg-icon.p3{background:rgba(255,107,157,0.12)}.pg-icon.p4{background:rgba(255,183,77,0.12)}
.pg-info{flex:1;min-width:0}
.pg-name{font-size:14px;font-weight:700}.pg-sub{font-size:12px;color:var(--text-3)}
.pg-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:10px;flex-shrink:0}
.pg-badge.p1{background:rgba(0,126,255,0.15);color:var(--accent2)}
.pg-badge.p2{background:rgba(0,230,118,0.12);color:var(--green)}
.pg-badge.p3{background:rgba(255,107,157,0.12);color:var(--pink)}
.pg-badge.p4{background:rgba(255,183,77,0.12);color:var(--orange)}

/* === WEEK ITEM === */
.wk-list{position:relative;padding-left:22px;margin-left:17px}
.wk-list::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--border);border-radius:1px}
.wk-item{position:relative;margin-bottom:3px;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:10px}
.wk-item:hover{background:var(--bg3)}
.wk-item.selected{background:rgba(0,126,255,0.12);border:1px solid rgba(0,126,255,0.2)}
.wk-item.selected .wk-title{color:var(--accent2)}
.wk-dot{position:absolute;left:-27px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;transition:all .2s}
.wk-dot.todo{background:var(--bg2);border:2px solid var(--bg4)}
.wk-dot.current{background:var(--accent);border:2px solid var(--accent);box-shadow:0 0 8px var(--accent-glow);animation:glow 2s ease-in-out infinite}
.wk-dot.done{background:var(--green);border:2px solid var(--green);box-shadow:0 0 6px var(--green-glow)}
@keyframes glow{0%,100%{box-shadow:0 0 6px var(--accent-glow)}50%{box-shadow:0 0 14px var(--accent-glow)}}
.wk-badge{min-width:36px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.wk-badge.p1{background:var(--c1g)}.wk-badge.p2{background:var(--c2g)}
.wk-badge.p3{background:var(--c3g)}.wk-badge.p4{background:var(--c4g);color:#333}
.wk-info{flex:1;min-width:0}
.wk-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-desc{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-status{font-size:11px;font-weight:700;padding:3px 9px;border-radius:5px;flex-shrink:0}
.wk-status.s-todo{background:var(--bg);color:var(--text-3)}
.wk-status.s-current{background:rgba(0,126,255,0.15);color:var(--accent2)}
.wk-status.s-done{background:var(--green-glow);color:var(--green)}

/* === RIGHT PANEL === */
.detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-3);gap:16px}
.detail-empty .de-icon{font-size:64px;opacity:.1}
.detail-empty p{font-size:14px}
.detail-scroll{padding:32px 40px 80px;max-width:740px;margin:0 auto;animation:slideUp .3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Quest hero card */
.quest-hero{position:relative;padding:28px;border-radius:20px;margin-bottom:24px;overflow:hidden;border:1px solid var(--border)}
.quest-hero.p1{background:linear-gradient(135deg,rgba(0,126,255,0.12),rgba(0,194,255,0.05))}
.quest-hero.p2{background:linear-gradient(135deg,rgba(0,230,118,0.1),rgba(105,240,174,0.03))}
.quest-hero.p3{background:linear-gradient(135deg,rgba(255,107,157,0.1),rgba(255,138,128,0.03))}
.quest-hero.p4{background:linear-gradient(135deg,rgba(255,183,77,0.1),rgba(255,213,79,0.03))}
.quest-hero::before{content:'';position:absolute;top:-50%;right:-20%;width:300px;height:300px;border-radius:50%;opacity:.05;pointer-events:none}
.quest-hero.p1::before{background:var(--c1)}.quest-hero.p2::before{background:var(--c2)}
.quest-hero.p3::before{background:var(--c3)}.quest-hero.p4::before{background:var(--c4)}
.quest-top{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.quest-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#fff;flex-shrink:0}
.quest-icon.p1{background:var(--c1g)}.quest-icon.p2{background:var(--c2g)}
.quest-icon.p3{background:var(--c3g)}.quest-icon.p4{background:var(--c4g);color:#333}
.quest-meta{flex:1}
.quest-meta h1{font-size:24px;font-weight:800;margin-bottom:2px}
.quest-meta .qm-sub{font-size:14px;color:var(--text-3);margin-bottom:10px}
.quest-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.q-tag{padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.3px}
.q-tag.t-spec{background:rgba(0,126,255,0.15);color:var(--accent2)}
.q-tag.t-basic{background:rgba(0,230,118,0.12);color:var(--green)}
.q-tag.t-ai{background:rgba(255,107,157,0.12);color:var(--pink)}
.q-tag.t-code{background:rgba(255,183,77,0.12);color:var(--orange)}
.q-tag.t-copy{background:rgba(0,229,255,0.12);color:var(--cyan)}
.q-status{padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700}
.q-status.s-todo{background:var(--bg3);color:var(--text-3)}
.q-status.s-current{background:rgba(0,126,255,0.15);color:var(--accent2)}
.q-status.s-done{background:var(--green-glow);color:var(--green)}

/* Content blocks */
.d-block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:16px}
.d-block h3{font-size:16px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.d-block h3 em{font-style:normal}
.d-block ul{list-style:none;padding:0}
.d-block li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-2);line-height:1.7}
.d-block li:last-child{border-bottom:none}
.d-block li::before{content:'';position:absolute;left:2px;top:14px;width:16px;height:16px;border-radius:5px;background:var(--bg);border:1.5px solid var(--bg4)}

/* Deliverable */
.del-card{position:relative;border-radius:14px;padding:18px 20px;margin-bottom:16px;overflow:hidden}
.del-card.p1{background:linear-gradient(135deg,rgba(0,126,255,0.1),rgba(0,126,255,0.02));border:1px solid rgba(0,126,255,0.15)}
.del-card.p2{background:linear-gradient(135deg,rgba(0,230,118,0.08),rgba(0,230,118,0.02));border:1px solid rgba(0,230,118,0.12)}
.del-card.p3{background:linear-gradient(135deg,rgba(255,107,157,0.08),rgba(255,107,157,0.02));border:1px solid rgba(255,107,157,0.12)}
.del-card.p4{background:linear-gradient(135deg,rgba(255,183,77,0.08),rgba(255,183,77,0.02));border:1px solid rgba(255,183,77,0.12)}
.del-card .lbl{font-size:12px;font-weight:800;margin-bottom:4px;text-transform:uppercase;letter-spacing:.8px}
.del-card.p1 .lbl{color:var(--accent2)}.del-card.p2 .lbl{color:var(--green)}
.del-card.p3 .lbl{color:var(--pink)}.del-card.p4 .lbl{color:var(--orange)}
.del-card .txt{font-size:14px;color:var(--text-2);font-weight:500;line-height:1.7}
.viewer-card{padding:16px 18px;margin-bottom:16px;border-radius:var(--radius-sm);background:var(--bg3);border:1px solid var(--border);color:var(--text-2);font-size:14px}

/* Submit block */
.sub-block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:16px}
.sub-block h3{font-size:16px;font-weight:700;margin-bottom:12px}
.s-ta{width:100%;min-height:100px;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-size:14px;font-family:inherit;resize:vertical;outline:none;transition:all .2s;line-height:1.7;background:var(--bg);color:var(--text-1)}
.s-ta:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.s-ta::placeholder{color:var(--text-3)}
.s-act{display:flex;align-items:center;gap:14px;margin-top:14px}
.btn{padding:11px 30px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;cursor:pointer;border:none;transition:all .25s}
.btn-p{background:var(--c1g);color:#fff;box-shadow:0 4px 15px var(--accent-glow)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--accent-glow)}
.btn-p:active{transform:translateY(0)}
.s-badge{font-size:12px;color:var(--green);font-weight:600}

/* Upload */
.upload-area{border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:16px;margin-top:12px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg)}
.upload-area:hover{border-color:var(--accent);background:rgba(0,126,255,0.05)}
.upload-area .ua-icon{font-size:22px;opacity:.2;margin-bottom:4px}
.upload-area .ua-text{font-size:13px;color:var(--text-3)}
.upload-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* Attachments */
.att-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.att-item{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--bg3);transition:all .2s;cursor:pointer}
.att-item:hover{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.att-item img{display:block;width:120px;height:80px;object-fit:cover}
.att-item.file-type{width:120px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.att-item.file-type.openable{cursor:pointer}
.att-item .file-icon{font-size:22px;opacity:.4}
.att-item .file-label{font-size:9px;color:var(--text-3);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px}
.att-item .file-open{font-size:10px;color:var(--accent);font-weight:700;opacity:.72}
.att-item .att-del{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;border:none;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.att-item:hover .att-del{opacity:1}

/* Peers */
.peer{background:var(--bg3);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:8px}
.peer-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.peer-n{font-size:14px;font-weight:600}.peer-t{font-size:12px;color:var(--text-3);margin-left:auto}
.peer-c{font-size:14px;color:var(--text-2);line-height:1.7;white-space:pre-wrap}

/* Nav buttons */
.dt-nav{display:flex;gap:8px;margin-top:24px}
.dt-nav-btn{flex:1;padding:14px 16px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border);cursor:pointer;transition:all .2s;text-align:left;color:var(--text-1)}
.dt-nav-btn:hover{border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow)}
.dt-nav-btn .nav-dir{font-size:12px;color:var(--text-3);margin-bottom:2px}
.dt-nav-btn .nav-title{font-size:14px;font-weight:600}
.dt-nav-btn.disabled{opacity:.2;pointer-events:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:500;display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:fadeIn .2s}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,0.5)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Confetti canvas */
#confetti{position:fixed;inset:0;z-index:999;pointer-events:none}

/* Achievements toast */
.achievement-toast{position:fixed;top:80px;right:24px;z-index:400;padding:16px 22px;border-radius:14px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;animation:toastIn .4s ease,toastOut .4s ease 2.6s forwards;max-width:320px}
@keyframes toastIn{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(100px)}}
.achievement-toast .at-icon{font-size:32px;flex-shrink:0}
.achievement-toast .at-info{flex:1}
.achievement-toast .at-title{font-size:11px;font-weight:800;color:var(--orange);text-transform:uppercase;letter-spacing:.5px}
.achievement-toast .at-desc{font-size:13px;font-weight:600;color:var(--text-1)}

html.light .wk-dot.todo{background:var(--bg3);border-color:var(--bg4)}
html.light .wk-dot.current{background:var(--accent);border-color:var(--accent)}
html.light .brand{-webkit-text-fill-color:var(--accent)}
html.light .lp-avatar .lv-ring{border-color:var(--accent);border-top-color:transparent}

/* Reference docs */
.ref-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.ref-card .lbl{font-size:12px;font-weight:800;color:var(--cyan);margin-bottom:10px;text-transform:uppercase;letter-spacing:.8px}
.ref-list{list-style:none;padding:0;margin:0}
.ref-list li{padding:8px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.ref-list li:last-child{border-bottom:none}
.ref-list a{color:var(--accent2);font-size:14px;font-weight:600;text-decoration:none;transition:color .2s}
.ref-list a:hover{color:var(--accent);text-decoration:underline}
.ref-list .ref-desc{font-size:12px;color:var(--text-3);margin-left:auto}
.ref-list .ref-icon{font-size:16px;flex-shrink:0}

/* Book grid */
.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.book-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .2s;cursor:default}
.book-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.book-cover{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--bg4)}
.book-info{padding:10px 12px}
.book-name{font-size:13px;font-weight:700;color:var(--text-1);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-author{font-size:11px;color:var(--text-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Progress bar (user panel) */
.up-progress{height:4px;background:var(--bg);border-radius:2px;overflow:hidden;margin:12px 0 4px}
.up-progress .fill{height:100%;border-radius:2px;background:var(--c1g);transition:width .6s cubic-bezier(.4,0,.2,1)}

/* === AVATAR DROPDOWN PANEL === */
.avatar-trigger{position:relative;cursor:pointer}
.av-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;transition:box-shadow .2s}
.av-btn:hover{box-shadow:0 0 0 3px var(--accent-glow)}
.user-panel{position:absolute;top:56px;right:20px;width:320px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:200;padding:20px;animation:fadeIn .15s ease}
.up-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ach-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;opacity:.45;filter:grayscale(1)}
.ach-row.unlocked{opacity:1;filter:none;background:rgba(0,126,255,0.06)}
.panel-btn{width:100%;margin-top:14px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg3);color:var(--text-2);font-size:13px;font-weight:700;cursor:pointer}
.panel-btn:hover{border-color:var(--accent);color:var(--accent2);background:var(--accent-glow)}
.panel-btn:disabled{opacity:.55;cursor:not-allowed;border-color:var(--border);color:var(--text-3);background:var(--bg3)}
.logout-btn{width:100%;margin-top:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg3);color:var(--text-2);font-size:13px;font-weight:700;cursor:pointer}
.logout-btn:hover{border-color:var(--red);color:var(--red);background:rgba(255,82,82,0.08)}

/* === MOBILE BOTTOM TAB === */
.mob-tab{display:none}

/* === Responsive === */
@media(max-width:900px){.left-panel{width:320px;min-width:320px}}
@media(max-width:700px){
  /* Top bar compact */
  .top-bar{padding:0 14px;height:48px}
  .brand{font-size:15px;gap:8px}
  .brand-icon{width:28px;height:28px;font-size:14px;border-radius:8px}
  .top-right{gap:8px}
  .theme-btn{width:32px;height:32px;font-size:14px}
  .av-btn{width:32px;height:32px;font-size:12px}
  .sync-badge{padding:3px 7px;font-size:10px}
  /* User panel full-width on mobile */
  .user-panel{top:48px;right:0;left:0;width:auto;border-radius:0 0 var(--radius) var(--radius)}
  /* Main layout: tab-based, one panel at a time */
  .main-split{flex-direction:column;height:calc(100vh - 48px - 52px - env(safe-area-inset-bottom,0px))}
  .left-panel{width:100%;min-width:0;height:100%;border-right:none;border-bottom:none;display:none}
  .left-panel.mob-active{display:block}
  .right-panel{height:100%;display:none}
  .right-panel.mob-active{display:block}
  /* Bottom tab bar */
  .mob-tab{display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(52px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--topbar-bg);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:100}
  .mob-tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:none;cursor:pointer;color:var(--text-3);font-size:10px;font-weight:600;transition:color .2s;-webkit-tap-highlight-color:transparent}
  .mob-tab-btn.active{color:var(--accent2)}
  .mob-tab-btn .mob-tab-icon{font-size:20px;line-height:1}
  /* Left panel: compact items */
  .phase-group{padding:0 8px 2px}
  .pg-header{padding:10px 6px 6px;gap:8px}
  .pg-icon{width:30px;height:30px;font-size:14px;border-radius:10px}
  .pg-name{font-size:13px}
  .pg-sub{font-size:11px}
  .pg-badge{font-size:11px;padding:2px 8px}
  .wk-list{padding-left:18px;margin-left:14px}
  .wk-item{padding:10px 10px;gap:8px}
  .wk-dot{left:-23px;width:12px;height:12px}
  .wk-badge{min-width:32px;height:22px;font-size:10px;border-radius:5px}
  .wk-title{font-size:13px}
  .wk-desc{display:none}
  .wk-status{font-size:10px;padding:2px 7px}
  /* Right panel: tighter padding */
  .detail-scroll{padding:16px 14px 32px}
  .quest-hero{padding:18px;border-radius:14px;margin-bottom:16px}
  .quest-icon{width:44px;height:44px;font-size:16px;border-radius:12px}
  .quest-top{gap:12px;margin-bottom:12px}
  .quest-meta h1{font-size:18px}
  .quest-meta .qm-sub{font-size:12px;margin-bottom:8px}
  .q-tag{padding:3px 8px;font-size:11px}
  .d-block{padding:16px;border-radius:12px;margin-bottom:12px}
  .d-block h3{font-size:14px;margin-bottom:10px}
  .d-block li{padding:8px 0 8px 26px;font-size:13px}
  .d-block li::before{left:0;top:12px;width:14px;height:14px;border-radius:4px}
  .del-card{padding:14px 16px;border-radius:12px;margin-bottom:12px}
  .del-card .lbl{font-size:11px}
  .del-card .txt{font-size:13px}
  .ref-card{padding:14px 16px;border-radius:12px;margin-bottom:12px}
  .ref-card .lbl{font-size:11px;margin-bottom:8px}
  .ref-list li{padding:6px 0;gap:8px;flex-wrap:wrap}
  .ref-list a{font-size:13px}
  .ref-list .ref-desc{font-size:11px;margin-left:0;flex-basis:100%;padding-left:26px}
  .sub-block{padding:16px;border-radius:12px;margin-bottom:12px}
  .sub-block h3{font-size:14px}
  .s-ta{min-height:80px;padding:12px;font-size:13px}
  .upload-area{padding:12px}
  .upload-area .ua-text{font-size:12px}
  .btn{padding:10px 24px;font-size:13px}
  .s-act{flex-wrap:wrap;gap:10px}
  .s-badge{font-size:11px}
  .peer{padding:12px}
  .peer-c{font-size:13px}
  .att-item img{width:100px;height:66px}
  .att-item.file-type{width:100px;height:66px}
  .dt-nav{gap:6px;margin-top:16px}
  .dt-nav-btn{padding:10px 12px}
  .dt-nav-btn .nav-title{font-size:13px}
  .dt-nav-btn .nav-dir{font-size:11px}
  .bb-card{padding:14px}
  .mat-card{padding:10px 12px}
  .mat-name{font-size:13px}
  .mat-desc{font-size:12px}
  /* Book grid mobile */
  .book-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .book-name{font-size:11px}
  .book-author{font-size:10px}
  .book-info{padding:6px 8px}
  /* Achievement toast */
  .achievement-toast{top:auto;bottom:60px;right:12px;left:12px;max-width:none}
}

/* === CARD COMPONENTS === */
.dp-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;transition:all .2s}
.dp-card:hover{border-color:rgba(0,126,255,0.2)}
.dp-card-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dp-card-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.dp-card-title{font-size:15px;font-weight:700}
.dp-card-sub{font-size:12px;color:var(--text-3)}

/* Material card */
.mat-card{background:var(--bg3);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:all .2s;border:1px solid transparent}
.mat-card:hover{border-color:var(--accent);background:var(--bg4)}
.mat-card.mat-active{border-color:var(--green);background:rgba(0,230,118,0.05)}
.mat-filter{transition:all .2s;padding:3px 10px;border-radius:5px}
.mat-filter.sel{outline:2px solid var(--accent);outline-offset:1px}
.mat-card-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mat-diff{font-size:10px;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:.5px}
.mat-diff.easy{background:rgba(0,230,118,0.12);color:var(--green)}
.mat-diff.medium{background:rgba(255,183,77,0.12);color:var(--orange)}
.mat-diff.hard{background:rgba(255,107,157,0.12);color:var(--pink)}
.mat-name{font-size:14px;font-weight:600}
.mat-source{font-size:12px;color:var(--text-3)}
.mat-desc{font-size:13px;color:var(--text-3);line-height:1.5}

/* Blind box */
.bb-card{background:linear-gradient(135deg,rgba(0,126,255,0.08),rgba(0,194,255,0.04));border:1px solid rgba(0,126,255,0.15);border-radius:var(--radius);padding:20px;margin-bottom:16px;position:relative;overflow:hidden}
.bb-card::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(0,126,255,0.06)}

/* Auth toast */
.auth-toast{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:500;padding:10px 18px;border-radius:20px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);font-size:13px;color:var(--text-2);animation:fadeIn .2s ease}
@media(max-width:700px){.auth-toast{top:60px;font-size:12px;padding:8px 14px}}

/* === Visual refresh 20260708 === */
:root{
  --bg:#0B1020;
  --bg2:#10172A;
  --bg3:#172033;
  --bg4:#26324A;
  --card:#121B2E;
  --card2:#172033;
  --border:rgba(226,232,240,0.10);
  --text-1:#F8FAFC;
  --text-2:#C5CDDA;
  --text-3:#8793A6;
  --accent:#007EFF;
  --accent2:#00C2FF;
  --accent-glow:rgba(0,126,255,0.16);
  --green:#22C55E;
  --green-glow:rgba(34,197,94,0.12);
  --orange:#F59E0B;
  --orange-glow:rgba(245,158,11,0.12);
  --pink:#EC4899;
  --pink-glow:rgba(236,72,153,0.10);
  --cyan:#06B6D4;
  --cyan-glow:rgba(6,182,212,0.10);
  --red:#EF4444;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 16px 50px rgba(0,0,0,0.26);
  --topbar-bg:rgba(11,16,32,0.82);
}

html.light{
  --bg:#F6F7FB;
  --bg2:#FFFFFF;
  --bg3:#F0F3F8;
  --bg4:#E4E9F2;
  --card:#FFFFFF;
  --card2:#F8FAFC;
  --border:rgba(15,23,42,0.08);
  --text-1:#101828;
  --text-2:#4B5565;
  --text-3:#8A94A6;
  --accent:#007EFF;
  --accent2:#0A74E8;
  --accent-glow:rgba(0,126,255,0.10);
  --green:#16A34A;
  --green-glow:rgba(22,163,74,0.10);
  --orange:#D97706;
  --orange-glow:rgba(217,119,6,0.10);
  --pink:#DB2777;
  --pink-glow:rgba(219,39,119,0.08);
  --cyan:#0891B2;
  --cyan-glow:rgba(8,145,178,0.08);
  --shadow:0 18px 48px rgba(15,23,42,0.08);
  --topbar-bg:rgba(255,255,255,0.86);
}

body{
  letter-spacing:0;
  background:
    linear-gradient(180deg,rgba(0,126,255,0.06),transparent 260px),
    var(--bg);
}

html.light body{
  background:
    linear-gradient(180deg,rgba(0,126,255,0.06),transparent 260px),
    var(--bg);
}

.top-bar{
  height:64px;
  padding:0 32px;
  border-bottom-color:var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,0.04);
}

.brand-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.menu-btn{
  display:none;
  width:34px;
  height:34px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card2);
  color:var(--text-1);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.brand{
  font-size:19px;
  letter-spacing:0;
}

.brand-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,126,255,0.22);
}

.theme-btn,.av-btn{
  box-shadow:0 1px 2px rgba(15,23,42,0.08);
}

.main-split{height:calc(100vh - 64px)}

.left-panel{
  width:356px;
  min-width:356px;
  background:color-mix(in srgb,var(--bg2) 88%,var(--bg) 12%);
  border-right-color:var(--border);
}
.sidebar-resizer{
  width:10px;
  margin-left:-5px;
  margin-right:-5px;
  cursor:col-resize;
  flex:0 0 10px;
  position:relative;
  z-index:20;
}
.sidebar-resizer::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:4px;
  width:2px;
  background:transparent;
  transition:background .16s ease;
}
.sidebar-resizer:hover::after,
body.resizing-sidebar .sidebar-resizer::after{
  background:var(--accent);
}
body.resizing-sidebar{
  cursor:col-resize;
  user-select:none;
}
.mobile-scrim{display:none}

.right-panel{
  background:transparent;
}

.phase-group{padding:0 10px 6px}
.pg-header{padding:16px 8px 10px}
.pg-icon{width:34px;height:34px;border-radius:10px}
.pg-name{font-size:13px;font-weight:800}
.pg-sub{font-size:11px;line-height:1.35}
.pg-badge{border-radius:999px;font-size:11px}

.wk-list{padding-left:18px;margin-left:15px}
.wk-list::before{background:var(--bg4);opacity:.7}
.wk-item{
  padding:11px 12px;
  margin-bottom:6px;
  border:1px solid transparent;
  border-radius:10px;
}
.wk-item:hover{
  background:var(--card2);
  border-color:var(--border);
}
.wk-item.selected{
  background:linear-gradient(180deg,rgba(0,126,255,0.11),rgba(0,126,255,0.06));
  border-color:rgba(0,126,255,0.24);
  box-shadow:none;
}
.wk-dot{left:-24px;width:11px;height:11px}
.wk-dot.current,.wk-dot.done{box-shadow:none;animation:none}
.wk-badge{border-radius:7px;height:24px;min-width:38px;font-size:11px}
.wk-title{font-size:13px;font-weight:750}
.wk-desc{font-size:11px;line-height:1.35}
.wk-status{
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  background:var(--bg3);
}

.detail-scroll{
  max-width:780px;
  padding:36px 36px 88px;
}

.quest-hero{
  padding:28px;
  border-radius:16px;
  margin-bottom:18px;
  background:var(--card)!important;
  box-shadow:var(--shadow);
}
.quest-hero::before{display:none}
.quest-icon{
  width:58px;
  height:58px;
  border-radius:14px;
  box-shadow:none;
}
.quest-meta h1{
  font-size:25px;
  letter-spacing:0;
}
.quest-meta .qm-sub{font-size:13px;color:var(--text-3)}
.q-tag,.q-status{
  border-radius:999px;
  padding:5px 11px;
  font-size:11px;
}

.d-block,.sub-block,.ref-card{
  border-radius:14px;
  padding:22px 24px;
  box-shadow:none;
  background:var(--card);
}
.d-block h3,.sub-block h3{
  font-size:15px;
  margin-bottom:14px;
}
.d-block li{
  padding:11px 0 11px 28px;
  color:var(--text-2);
}
.d-block li::before{
  width:15px;
  height:15px;
  border-radius:5px;
  background:transparent;
  border-color:var(--bg4);
}

.del-card{
  border-radius:14px;
  padding:18px 22px;
  background:var(--card)!important;
  border-color:var(--border)!important;
}
.del-card .lbl{
  letter-spacing:0;
  text-transform:none;
  font-size:13px;
}

.ref-card .lbl{
  color:var(--text-1);
  letter-spacing:0;
  text-transform:none;
  font-size:15px;
  margin-bottom:12px;
}
.ref-list li{
  padding:10px 0;
}
.ref-list a{
  color:var(--accent2);
  font-size:14px;
}
.ref-list .ref-desc{
  color:var(--text-3);
}

.s-ta,.upload-area{
  background:var(--card2);
  border-color:var(--border);
}
.upload-area:hover{
  background:var(--bg3);
}
.btn{
  border-radius:10px;
  padding:10px 24px;
}
.btn-p{
  box-shadow:none;
}
.btn-p:hover{
  transform:none;
  box-shadow:0 8px 22px var(--accent-glow);
}

.peer,.mat-card,.book-card{
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:10px;
}
.book-card:hover,.mat-card:hover{
  transform:none;
  box-shadow:none;
}

.bb-card{
  background:var(--card);
  border-color:var(--border);
  border-radius:14px;
}
.bb-card::before{display:none}
.mat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}
.mat-grid .mat-card{
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:250px;
}
.mat-shot{
  aspect-ratio:16/10;
  background:var(--bg3);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.mat-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.mat-body{
  padding:13px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.mat-grid .mat-card-top{
  margin-bottom:0;
  justify-content:space-between;
}
.mat-grid .mat-diff{
  font-size:10px;
}
.mat-grid .mat-source{
  margin-left:auto;
}
.mat-grid .mat-name{
  font-size:15px;
  font-weight:800;
  color:var(--text-1);
}
.mat-grid .mat-desc{
  color:var(--text-3);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.wk-badge,.quest-icon{
  flex-direction:column;
  line-height:1;
  white-space:normal;
  overflow:hidden;
  text-align:center;
  gap:1px;
}
.wk-badge span,.quest-icon span{
  display:block;
  max-width:100%;
}
.wk-badge{
  width:40px;
  min-width:40px;
  height:32px;
  padding:0 2px;
  font-size:10px;
}
.quest-icon{
  font-size:22px;
  line-height:.95;
}
.av-btn img,.lp-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

.user-panel{
  top:64px;
  border-radius:14px;
  box-shadow:var(--shadow);
}
.lp-avatar .lv-ring{animation:none}
.ach-row{border-radius:8px}
.panel-btn,.logout-btn{
  border-radius:10px;
  background:var(--card2);
}

/* Profile achievement panel */
.user-panel{
  width:380px;
  padding:0;
  overflow:hidden;
  border-radius:18px;
  background:
    radial-gradient(circle at 18% 0,rgba(0,126,255,0.20),transparent 34%),
    radial-gradient(circle at 92% 10%,rgba(0,200,83,0.10),transparent 30%),
    var(--card);
}
.user-panel::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.profile-hero{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 20px 16px;
}
.profile-avatar{
  width:60px!important;
  height:60px!important;
  font-size:22px!important;
  box-shadow:0 10px 28px rgba(0,126,255,0.25);
}
.profile-avatar .lv-ring{
  inset:-4px;
  border-width:3px;
  border-color:var(--accent);
  border-right-color:rgba(0,126,255,0.18);
}
.profile-main{
  flex:1;
  min-width:0;
}
.profile-kicker{
  font-size:11px;
  font-weight:800;
  color:var(--accent2);
  letter-spacing:.08em;
}
.profile-name{
  margin-top:2px;
  font-size:22px;
  font-weight:900;
  color:var(--text-1);
  line-height:1.15;
}
.profile-meta{
  margin-top:4px;
  font-size:13px;
  color:var(--text-3);
}
.level-pill{
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(0,126,255,0.16),rgba(0,194,255,0.10));
  border:1px solid rgba(0,126,255,0.22);
  color:var(--accent2);
  font-size:12px;
  font-weight:900;
}
.progress-card{
  margin:0 20px 16px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
}
html.light .progress-card{
  background:rgba(248,250,252,0.78);
}
.progress-copy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  font-weight:800;
  color:var(--text-2);
}
.progress-copy strong{
  font-size:22px;
  line-height:1;
  color:var(--text-1);
}
.progress-card .up-progress{
  height:8px;
  margin:12px 0 10px;
  border-radius:999px;
  background:var(--bg3);
}
.progress-card .up-progress .fill{
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),var(--green));
  box-shadow:0 0 18px rgba(0,126,255,0.25);
}
.next-ach{
  font-size:12px;
  color:var(--text-3);
  line-height:1.45;
}
.ach-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px 10px;
  font-size:14px;
  font-weight:900;
  color:var(--text-1);
}
.ach-title strong{
  color:var(--accent2);
  font-size:13px;
}
.ach-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:0 20px 18px;
}
.ach-card{
  position:relative;
  min-height:106px;
  padding:12px;
  border-radius:14px;
  background:var(--card2);
  border:1px solid var(--border);
  opacity:.48;
  filter:grayscale(1);
  overflow:hidden;
}
.ach-card.unlocked{
  opacity:1;
  filter:none;
  background:linear-gradient(135deg,rgba(0,126,255,0.14),rgba(255,255,255,0.04));
  border-color:rgba(0,126,255,0.22);
}
.ach-card.unlocked::after{
  content:'';
  position:absolute;
  right:-28px;
  top:-30px;
  width:72px;
  height:72px;
  border-radius:50%;
  background:rgba(0,126,255,0.12);
}
.ach-icon{
  font-size:22px;
  line-height:1;
  margin-bottom:10px;
}
.ach-name{
  font-size:13px;
  font-weight:900;
  color:var(--text-1);
}
.ach-desc{
  margin-top:3px;
  font-size:11px;
  line-height:1.35;
  color:var(--text-3);
}
.ach-check{
  position:absolute;
  top:10px;
  right:10px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background:var(--green);
  opacity:0;
}
.ach-card.unlocked .ach-check{opacity:1}
.panel-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:14px 20px 20px;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,0.03);
}
.panel-actions .panel-btn,
.panel-actions .logout-btn{
  margin:0;
  min-height:42px;
}

.toast{
  top:80px;
  border-radius:12px;
  box-shadow:var(--shadow);
}

@media(max-width:900px){
  .left-panel{width:320px;min-width:320px}
}

@media(max-width:700px){
  .top-bar{height:52px;padding:0 14px}
  .main-split{height:calc(100vh - 52px);display:block;position:relative}
  .menu-btn{display:flex;align-items:center;justify-content:center}
  .brand{font-size:15px}
  .brand-icon{width:30px;height:30px;border-radius:9px}
  .top-right{gap:10px}
  .user-panel{top:52px}
  .user-panel{
    left:12px;
    right:12px;
    width:auto;
    max-height:calc(100vh - 68px);
    overflow-y:auto;
    border-radius:16px;
  }
  .profile-hero{padding:18px 18px 14px}
  .profile-avatar{width:54px!important;height:54px!important}
  .profile-name{font-size:20px}
  .progress-card{margin:0 18px 14px}
  .ach-grid{padding:0 18px 16px;gap:8px}
  .ach-card{min-height:96px;padding:11px}
  .panel-actions{padding:12px 18px 18px}
  .left-panel{
    display:block!important;
    position:fixed;
    top:52px;
    left:0;
    bottom:0;
    width:min(86vw,360px)!important;
    min-width:0!important;
    height:auto!important;
    z-index:260;
    border-right:1px solid var(--border);
    border-bottom:none;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:24px 0 54px rgba(15,23,42,0.18);
  }
  .left-panel.mobile-open{transform:translateX(0)}
  .right-panel{
    display:block!important;
    height:100%;
    overflow-y:auto;
  }
  .sidebar-resizer{display:none}
  .mobile-scrim{
    display:block;
    position:fixed;
    inset:52px 0 0;
    background:rgba(15,23,42,0.24);
    backdrop-filter:blur(2px);
    z-index:250;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  .mobile-scrim.show{
    opacity:1;
    pointer-events:auto;
  }
  .mob-tab{display:none!important}
  .detail-scroll{padding:14px 12px 32px}
  .quest-hero{padding:18px;border-radius:14px}
  .quest-meta h1{font-size:18px}
  .d-block,.sub-block,.ref-card{padding:16px;border-radius:12px}
  .book-grid{grid-template-columns:repeat(2,1fr)}
  .mat-grid{grid-template-columns:1fr;gap:10px}
  .mat-grid .mat-card{min-height:0}
}

/* === DingTalk blue refinement 20260708 === */
:root{
  --accent:#007EFF;
  --accent2:#1D9BF0;
  --accent-glow:rgba(0,126,255,0.16);
  --c1:#007EFF;
  --c1g:linear-gradient(135deg,#007EFF,#00C2FF);
}
html.light{
  --accent:#007EFF;
  --accent2:#0A74E8;
  --accent-glow:rgba(0,126,255,0.12);
  --c1:#007EFF;
  --c1g:linear-gradient(135deg,#007EFF,#00B8FF);
}
body{
  background:
    linear-gradient(180deg,rgba(0,126,255,0.055),transparent 280px),
    radial-gradient(circle at 78% 0,rgba(0,194,255,0.08),transparent 260px),
    var(--bg);
}
html.light body{
  background:
    linear-gradient(180deg,rgba(0,126,255,0.055),transparent 280px),
    radial-gradient(circle at 80% 0,rgba(0,194,255,0.08),transparent 260px),
    var(--bg);
}
.brand,
html.light .brand{
  background:var(--c1g);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-icon,.login-mark{
  background:var(--c1g);
  box-shadow:0 10px 24px rgba(0,126,255,0.22);
}
.left-panel{
  background:color-mix(in srgb,var(--bg2) 92%,var(--accent) 8%);
}
.wk-item.selected{
  background:linear-gradient(180deg,rgba(0,126,255,0.12),rgba(0,126,255,0.055));
  border-color:rgba(0,126,255,0.22);
}
.wk-dot.current{
  background:var(--accent);
  border-color:var(--accent);
}
.wk-status.s-current,.q-status.s-current{
  background:rgba(0,126,255,0.12);
  color:var(--accent2);
}
.wk-status.s-todo,.q-status.s-todo{
  background:var(--bg3);
  color:var(--text-2);
}
.quest-hero{
  background:
    linear-gradient(135deg,rgba(0,126,255,0.06),transparent 48%),
    var(--card)!important;
  border-color:rgba(0,126,255,0.10);
}
.quest-icon.p1,.wk-badge.p1{
  background:var(--c1g);
}
.focus-card{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin:16px 0 2px;
  padding:15px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(0,126,255,0.12),rgba(0,194,255,0.055));
  border:1px solid rgba(0,126,255,0.16);
}
.focus-kicker{
  font-size:11px;
  font-weight:900;
  color:var(--accent2);
  letter-spacing:.08em;
}
.focus-title{
  margin-top:3px;
  color:var(--text-1);
  font-size:15px;
  font-weight:900;
}
.focus-date{
  flex-shrink:0;
  min-width:132px;
  padding-left:16px;
  border-left:1px solid rgba(0,126,255,0.16);
}
.focus-date span{
  display:block;
  font-size:11px;
  color:var(--text-3);
}
.focus-date strong{
  display:block;
  margin-top:2px;
  color:var(--text-1);
  font-size:14px;
}
.focus-action{
  flex-shrink:0;
  border:none;
  border-radius:999px;
  padding:10px 16px;
  background:var(--c1g);
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,126,255,0.18);
  transition:transform .16s ease,box-shadow .16s ease;
}
.focus-action:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,126,255,0.22);
}
.btn-p{
  background:var(--c1g);
}
.up-progress .fill,
.progress-card .up-progress .fill{
  background:linear-gradient(90deg,#007EFF,#00C2FF,#22C55E);
  box-shadow:0 0 18px rgba(0,126,255,0.20);
}
.user-panel{
  background:
    radial-gradient(circle at 18% 0,rgba(0,126,255,0.18),transparent 34%),
    radial-gradient(circle at 92% 10%,rgba(0,194,255,0.12),transparent 30%),
    var(--card);
}
.profile-avatar{
  box-shadow:0 10px 28px rgba(0,126,255,0.22);
}
.profile-avatar .lv-ring{
  border-color:var(--accent);
  border-right-color:rgba(0,126,255,0.18);
}
.level-pill,
.ach-card.unlocked{
  background:linear-gradient(135deg,rgba(0,126,255,0.13),rgba(0,194,255,0.055));
  border-color:rgba(0,126,255,0.20);
}
.ach-card.unlocked::after{
  background:rgba(0,126,255,0.10);
}
.bb-card{
  background:linear-gradient(135deg,rgba(0,126,255,0.06),rgba(0,194,255,0.035)),var(--card);
  border-color:rgba(0,126,255,0.12);
}

@media(max-width:700px){
  .focus-card{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .focus-date{
    width:100%;
    min-width:0;
    padding-left:0;
    padding-top:10px;
    border-left:0;
    border-top:1px solid rgba(0,126,255,0.16);
  }
  .focus-action{
    width:100%;
  }
}

/* Login and loading refinement */
.login-page,.loading-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:
    radial-gradient(circle at 50% -10%,rgba(0,126,255,0.18),transparent 34%),
    radial-gradient(circle at 82% 18%,rgba(0,194,255,0.10),transparent 28%),
    linear-gradient(180deg,#081426,var(--bg));
}
html.light .login-page,
html.light .loading-page{
  background:
    radial-gradient(circle at 50% -10%,rgba(0,126,255,0.15),transparent 34%),
    radial-gradient(circle at 82% 18%,rgba(0,194,255,0.12),transparent 28%),
    linear-gradient(180deg,#F7FBFF,#F4F7FB);
}
.login-card,.loading-card{
  position:relative;
  width:min(520px,100%);
  padding:34px;
  border-radius:22px;
  background:color-mix(in srgb,var(--card) 92%,var(--accent) 8%);
  border:1px solid rgba(0,126,255,0.18);
  box-shadow:0 28px 80px rgba(0,0,0,0.28);
  overflow:hidden;
}
html.light .login-card,
html.light .loading-card{
  background:rgba(255,255,255,0.88);
  box-shadow:0 28px 80px rgba(15,23,42,0.10);
}
.login-card::before,.loading-card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(0,126,255,0.13),transparent 42%),
    radial-gradient(circle at 100% 0,rgba(0,194,255,0.12),transparent 34%);
}
.login-card>*,
.loading-card>*{
  position:relative;
}
.login-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
  color:var(--accent2);
  font-size:14px;
  font-weight:900;
}
.login-mark{
  width:44px;
  height:44px;
  margin:0;
  border-radius:13px;
  font-size:21px;
}
.login-card h1{
  max-width:420px;
  font-size:30px;
  line-height:1.18;
  letter-spacing:0;
  margin:0 0 12px;
}
.login-card p{
  max-width:430px;
  font-size:15px;
  line-height:1.65;
  color:var(--text-2);
  margin:0 0 28px;
}
.login-main{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#007EFF,#00A7FF);
  color:#fff;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(0,126,255,0.24);
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
}
.login-main:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 42px rgba(0,126,255,0.30);
}
.login-main:disabled{
  opacity:.78;
  cursor:wait;
  transform:none;
}
.login-main b{
  font-size:18px;
  line-height:1;
}
.btn-spinner{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.45);
  border-top-color:#fff;
  animation:spin .8s linear infinite;
}
.login-link{
  display:block;
  margin:16px auto 0;
  padding:8px 12px;
  color:var(--text-3);
  font-size:14px;
}
.loading-card{
  width:min(420px,100%);
  text-align:center;
}
.loading-mark{
  width:54px;
  height:54px;
  margin:0 auto 18px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#007EFF,#00C2FF);
  box-shadow:0 18px 34px rgba(0,126,255,0.24);
}
.loading-mark span{
  width:24px;
  height:24px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.45);
  border-top-color:#fff;
  animation:spin .8s linear infinite;
}
.loading-card h1{
  font-size:24px;
  margin-bottom:8px;
}
.loading-card p{
  color:var(--text-2);
  font-size:14px;
  line-height:1.6;
  margin-bottom:18px;
}
.loading-rail{
  height:6px;
  border-radius:999px;
  background:var(--bg3);
  overflow:hidden;
}
.loading-rail i{
  display:block;
  width:38%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#007EFF,#00C2FF);
  animation:loadingRail 1.2s ease-in-out infinite;
}
.loading-step{
  margin-top:12px;
  color:var(--accent2);
  font-size:12px;
  font-weight:900;
}
.boot-shell{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  padding:28px 32px;
  background:var(--bg);
}
@keyframes loadingRail{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(270%)}
}

@media(max-width:700px){
  .login-page,.loading-page{padding:18px}
  .login-card,.loading-card{padding:26px 22px;border-radius:18px}
  .login-card h1{font-size:24px}
  .login-card p{font-size:14px}
}

/* Task layout polish */
.left-panel{
  background:var(--bg2)!important;
}
html.light .left-panel{
  background:#FFFFFF!important;
}
.pg-icon{
  background:var(--card2)!important;
  border:1px solid var(--border);
  color:var(--text-2);
}
html.light .pg-icon{
  background:#F4F8FF!important;
}
.pg-icon.p3{
  color:var(--accent2);
}
.wk-badge,
.quest-icon{
  background:linear-gradient(180deg,#20D98B,#17C878)!important;
  color:#fff!important;
  box-shadow:none!important;
  border:1px solid rgba(0,0,0,0.02);
}
.wk-badge{
  width:62px;
  min-width:62px;
  height:26px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:0;
}
.quest-icon{
  width:78px;
  height:46px;
  border-radius:15px;
  font-size:18px;
}
.wk-badge span,.quest-icon span{white-space:nowrap}
.wk-badge.p1,.quest-icon.p1{background:linear-gradient(135deg,#007EFF,#00A7FF)!important}
.wk-badge.p2,.quest-icon.p2{background:linear-gradient(135deg,#18C978,#43E39B)!important}
.wk-badge.p3,.quest-icon.p3{background:linear-gradient(135deg,#FF5C8A,#FF7A7A)!important}
.wk-badge.p4,.quest-icon.p4{background:linear-gradient(135deg,#FFB238,#FFD45C)!important;color:#3B2A00!important}
.wk-item{
  border-color:transparent!important;
}
.wk-item.selected{
  background:rgba(0,126,255,0.08)!important;
  border-color:rgba(0,126,255,0.18)!important;
}
.wk-status{
  background:#F5F7FA!important;
  color:var(--text-2)!important;
}
.wk-status.s-current{
  background:rgba(0,126,255,0.10)!important;
  color:var(--accent2)!important;
}
.wk-status.s-done{
  background:var(--green-glow)!important;
  color:var(--green)!important;
}
.quest-hero{
  box-shadow:0 18px 46px rgba(15,23,42,0.06);
  border-color:rgba(15,23,42,0.06)!important;
}
.task-suite{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  margin-bottom:18px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(15,23,42,0.045);
}
.task-suite .d-block,
.task-suite .del-card,
.task-suite .ref-card{
  margin:0;
  border:0!important;
  border-radius:0!important;
  box-shadow:none;
  background:transparent!important;
}
.task-suite .d-block,
.task-suite .del-card{
  border-bottom:1px solid var(--border)!important;
}
.task-suite .d-block h3,
.task-suite .ref-card .lbl{
  font-size:15px;
}
.task-suite .del-card{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  align-items:start;
}
.task-suite .del-card .lbl{
  margin:0;
  color:var(--green)!important;
  font-size:14px;
}
.task-suite .del-card .txt{
  color:var(--text-1);
  font-weight:700;
}
.ref-list li{
  border-bottom-color:var(--border);
}
.sub-block{
  border-radius:18px;
  box-shadow:0 12px 32px rgba(15,23,42,0.045);
}
.submit-primary{
  min-width:150px;
  min-height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,#007EFF,#00A7FF)!important;
  box-shadow:0 14px 30px rgba(0,126,255,0.26)!important;
  font-size:15px;
}
.submit-primary:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 18px 38px rgba(0,126,255,0.32)!important;
}
.mobile-submit-bar{
  display:none;
}
.ach-icon{
  color:var(--accent2);
}

@media(max-width:700px){
  .detail-scroll{
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  }
  .mobile-submit-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:220;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(255,255,255,0),var(--bg) 28%,var(--bg) 100%);
    pointer-events:none;
  }
  .mobile-submit-bar .submit-primary{
    width:100%;
    max-width:420px;
    min-height:48px;
    pointer-events:auto;
  }
  html.light .mobile-submit-bar{
    background:linear-gradient(180deg,rgba(244,245,249,0),#F4F5F9 28%,#F4F5F9 100%);
  }
  .task-suite .del-card{
    grid-template-columns:1fr;
    gap:6px;
  }
  .quest-icon{
    width:48px;
    height:48px;
    font-size:18px;
  }
}

/* Cleaner task package */
.level-pill{
  display:none!important;
}
.task-suite{
  padding:22px 24px!important;
  overflow:visible!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,var(--card),var(--card2))!important;
}
.task-suite .d-block,
.task-suite .del-card,
.task-suite .ref-card{
  padding:0!important;
}
.task-suite .d-block,
.task-suite .del-card{
  border-bottom:0!important;
}
.task-suite .d-block h3,
.task-suite .ref-card .lbl{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  color:var(--text-1);
  font-size:16px;
  font-weight:900;
}
.task-suite .d-block h3 em,
.task-suite .ref-card .lbl{
  font-style:normal;
}
.task-suite .d-block ul{
  display:grid;
  gap:10px;
  margin:0;
}
.task-suite .d-block li{
  min-height:44px;
  display:flex;
  align-items:center;
  border:1px solid var(--border)!important;
  border-radius:13px;
  background:rgba(255,255,255,0.62);
  padding:10px 14px 10px 42px!important;
  color:var(--text-1);
  font-size:15px;
  line-height:1.55;
}
.task-suite .d-block li::before{
  left:14px;
  top:50%;
  width:15px;
  height:15px;
  border-radius:5px;
  transform:translateY(-50%);
  border-color:#D5E0EF;
  background:#fff;
}
.task-suite .del-card{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:14px;
  align-items:center;
  margin-top:16px!important;
  padding:14px 16px!important;
  border:1px solid rgba(0,126,255,0.16)!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,rgba(0,126,255,0.08),rgba(32,217,139,0.06))!important;
}
.task-suite .del-card .lbl{
  color:var(--accent2)!important;
  font-size:14px;
  font-weight:900;
  margin:0;
  white-space:nowrap;
}
.task-suite .del-card .txt{
  color:var(--text-1);
  font-size:15px;
  font-weight:800;
  line-height:1.55;
}
.task-suite .ref-card{
  margin-top:18px!important;
  padding-top:18px!important;
  border-top:1px solid var(--border)!important;
}
.task-suite .ref-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0;
}
.task-suite .ref-list li{
  min-height:86px;
  align-items:flex-start;
  gap:8px;
  padding:13px 14px!important;
  border:1px solid var(--border)!important;
  border-radius:14px;
  background:rgba(255,255,255,0.7);
  box-shadow:none;
  flex-direction:column;
}
.task-suite .ref-list li:last-child{
  border-bottom:1px solid var(--border)!important;
}
.task-suite .ref-list .ref-icon{
  display:none;
}
.task-suite .ref-list a{
  color:var(--accent2);
  font-size:14px;
  font-weight:900;
  line-height:1.35;
}
.task-suite .ref-list .ref-desc{
  margin:0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.45;
}
html:not(.light) .task-suite .d-block li,
html:not(.light) .task-suite .ref-list li{
  background:rgba(255,255,255,0.04);
}
@media(max-width:900px){
  .task-suite .ref-list{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .task-suite{
    padding:18px!important;
  }
  .task-suite .del-card{
    grid-template-columns:1fr;
  }
}

/* Chapter tone, timeline alignment, and calmer loading */
.right-panel{
  transition:background .25s ease;
}
.right-panel.phase-1{
  background:
    radial-gradient(circle at 18% 0,rgba(0,126,255,0.14),transparent 34%),
    linear-gradient(180deg,rgba(0,126,255,0.045),var(--bg) 42%)!important;
}
.right-panel.phase-2{
  background:
    radial-gradient(circle at 18% 0,rgba(24,201,120,0.15),transparent 34%),
    linear-gradient(180deg,rgba(24,201,120,0.045),var(--bg) 42%)!important;
}
.right-panel.phase-3{
  background:
    radial-gradient(circle at 18% 0,rgba(255,92,138,0.13),transparent 34%),
    linear-gradient(180deg,rgba(255,92,138,0.04),var(--bg) 42%)!important;
}
.right-panel.phase-4{
  background:
    radial-gradient(circle at 18% 0,rgba(255,178,56,0.16),transparent 34%),
    linear-gradient(180deg,rgba(255,178,56,0.045),var(--bg) 42%)!important;
}
.quest-hero.p1{
  background:linear-gradient(135deg,rgba(0,126,255,0.12),rgba(0,167,255,0.045),var(--card))!important;
}
.quest-hero.p2{
  background:linear-gradient(135deg,rgba(24,201,120,0.13),rgba(67,227,155,0.045),var(--card))!important;
}
.quest-hero.p3{
  background:linear-gradient(135deg,rgba(255,92,138,0.12),rgba(255,122,122,0.045),var(--card))!important;
}
.quest-hero.p4{
  background:linear-gradient(135deg,rgba(255,178,56,0.15),rgba(255,212,92,0.05),var(--card))!important;
}
.quest-hero.p1 .focus-card,
.task-suite .del-card.p1{
  border-color:rgba(0,126,255,0.20)!important;
  background:linear-gradient(135deg,rgba(0,126,255,0.10),rgba(0,167,255,0.04))!important;
}
.quest-hero.p2 .focus-card,
.task-suite .del-card.p2{
  border-color:rgba(24,201,120,0.22)!important;
  background:linear-gradient(135deg,rgba(24,201,120,0.10),rgba(67,227,155,0.04))!important;
}
.quest-hero.p3 .focus-card,
.task-suite .del-card.p3{
  border-color:rgba(255,92,138,0.20)!important;
  background:linear-gradient(135deg,rgba(255,92,138,0.10),rgba(255,122,122,0.04))!important;
}
.quest-hero.p4 .focus-card,
.task-suite .del-card.p4{
  border-color:rgba(255,178,56,0.24)!important;
  background:linear-gradient(135deg,rgba(255,178,56,0.12),rgba(255,212,92,0.045))!important;
}
.focus-action.s-done{
  background:linear-gradient(135deg,#18C978,#43E39B)!important;
  box-shadow:0 12px 26px rgba(24,201,120,0.24)!important;
}
.focus-action.s-done:hover{
  box-shadow:0 16px 34px rgba(24,201,120,0.30)!important;
}
.phase-group{
  padding:0 12px 10px!important;
}
.pg-header{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:10px!important;
  align-items:center!important;
  padding:16px 8px 12px!important;
}
.pg-icon{
  justify-self:center;
}
.wk-list{
  margin-left:34px!important;
  padding-left:30px!important;
}
.wk-list::before{
  left:0!important;
  width:2px!important;
  background:linear-gradient(180deg,transparent 0,#DDE6F2 10%,#DDE6F2 90%,transparent 100%)!important;
}
.wk-item{
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr) auto;
  gap:12px!important;
  align-items:center!important;
  min-height:56px;
}
.wk-dot{
  left:-37px!important;
  width:14px!important;
  height:14px!important;
  border:3px solid var(--bg2)!important;
  outline:2px solid #DDE6F2;
  box-shadow:none!important;
}
.wk-dot.done{
  background:var(--green)!important;
  outline-color:rgba(0,200,83,0.22);
}
.wk-dot.current{
  background:var(--accent)!important;
  outline-color:rgba(0,126,255,0.22);
}
.wk-dot.todo{
  background:var(--bg2)!important;
  outline-color:#DDE6F2;
}
.wk-badge{
  justify-self:start;
}
.loading-mark span{
  display:none!important;
}
.loading-mark::before{
  content:'\26A1';
  color:#fff;
  font-size:24px;
  line-height:1;
}
.loading-card h1{
  margin-top:4px;
}
.loading-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  margin-top:12px;
  padding:3px 10px;
  border-radius:999px;
  color:var(--text-3)!important;
  background:var(--bg3);
  font-size:12px;
  font-weight:700;
}

/* Final cleanup: keep the page surface clean */
.right-panel.phase-1,
.right-panel.phase-2,
.right-panel.phase-3,
.right-panel.phase-4{
  background:var(--bg)!important;
}
.loading-step{
  display:none!important;
}

/* Blind box draw and locked result */
.bb-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.game-blind{
  position:relative;
  overflow:hidden;
  border-radius:22px!important;
}
.game-blind::after{
  content:'';
  position:absolute;
  right:-42px;
  top:-42px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,126,255,0.18),transparent 66%);
  pointer-events:none;
}
.blind-box{
  background:
    linear-gradient(135deg,rgba(0,126,255,0.10),rgba(32,217,139,0.055)),
    var(--card)!important;
  border-color:rgba(0,126,255,0.22)!important;
}
.blind-draw-btn{
  border:none;
  border-radius:999px;
  padding:13px 24px;
  background:linear-gradient(135deg,#007EFF,#00A7FF);
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,126,255,0.28);
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
  white-space:nowrap;
}
.blind-draw-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(0,126,255,0.28);
}
.blind-draw-btn:disabled{
  opacity:.46;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.blind-draw-btn.secondary{
  background:rgba(255,255,255,0.75);
  color:var(--accent2);
  border:1px solid var(--border);
  box-shadow:none;
}
.blind-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.blind-chance{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  color:var(--text-2);
  background:var(--card2);
  border:1px solid var(--border);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.blind-rules{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.blind-rules div{
  position:relative;
  padding:16px 14px;
  border:1px solid rgba(0,126,255,0.16);
  border-radius:16px;
  background:rgba(255,255,255,0.68);
  box-shadow:0 10px 24px rgba(15,23,42,0.04);
}
.blind-rules strong{
  display:block;
  color:var(--text-1);
  font-size:22px;
  line-height:1.1;
}
.blind-rules span{
  display:block;
  margin-top:6px;
  color:var(--text-3);
  font-size:12px;
  font-weight:700;
}
.blind-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
  padding:8px;
  border-radius:999px;
  background:rgba(148,163,184,0.10);
}
.blind-filters .mat-filter{
  cursor:pointer;
  border-radius:999px;
  padding:6px 12px;
  font-weight:900;
}
.blind-filters .mat-filter:not(.easy):not(.medium):not(.hard){
  background:var(--bg3);
  color:var(--text-2);
}
.blind-note{
  color:var(--text-3);
  font-size:13px;
  line-height:1.65;
}
.blind-lock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--green-glow);
  color:var(--green);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.locked-material{
  display:grid;
  grid-template-columns:minmax(180px,260px) minmax(0,1fr);
  gap:16px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,0.60);
}
html:not(.light) .blind-box{
  background:
    linear-gradient(135deg,rgba(0,126,255,0.12),rgba(32,217,139,0.06)),
    rgba(15,23,42,0.76)!important;
}
html:not(.light) .blind-rules div,
html:not(.light) .blind-chance,
html:not(.light) .blind-draw-btn.secondary{
  background:rgba(255,255,255,0.055)!important;
}
.locked-shot{
  aspect-ratio:16/10;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg3);
}
.locked-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.locked-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.locked-eyebrow{
  color:var(--accent2);
  font-size:12px;
  font-weight:900;
}
.locked-title{
  color:var(--text-1);
  font-size:18px;
  line-height:1.3;
  font-weight:900;
}
.locked-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:var(--text-3);
  font-size:12px;
  font-weight:700;
}
.locked-desc{
  color:var(--text-2);
  font-size:13px;
  line-height:1.6;
}
html:not(.light) .blind-rules div,
html:not(.light) .locked-material{
  background:rgba(255,255,255,0.04);
}
@media(max-width:700px){
  .bb-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .blind-draw-btn{
    width:100%;
  }
  .blind-actions{
    width:100%;
    align-items:stretch;
    flex-direction:column;
  }
  .blind-chance{
    justify-content:center;
  }
  .blind-rules{
    grid-template-columns:1fr;
  }
  .locked-material{
    grid-template-columns:1fr;
  }
}

/* Blind box card flip: make the draw feel like opening a physical card */
.blind-card-stage{
  position:relative;
  z-index:1;
  width:min(100%,680px);
  margin:6px auto 18px;
  perspective:1200px;
}
.blind-card-stage.undrawn{
  width:min(100%,360px);
  margin-bottom:2px;
}
.blind-card-flip{
  position:relative;
  width:100%;
  min-height:236px;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.9,.2,1);
}
.blind-card-stage.drawn .blind-card-flip{
  transform:rotateY(180deg);
}
.blind-card-stage.drawn.reveal-now .blind-card-flip{
  animation:blindReveal .88s cubic-bezier(.2,.9,.18,1) both;
}
.blind-card-button{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  text-align:inherit;
}
.blind-card-button:disabled{
  cursor:not-allowed;
  opacity:.62;
}
.blind-card-button:not(:disabled):hover .blind-card-back{
  transform:translateY(-3px) rotateX(2deg);
  box-shadow:0 26px 54px rgba(0,126,255,.26), inset 0 1px 0 rgba(255,255,255,.68);
}
.blind-card-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:24px;
}
.blind-card-back{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  overflow:hidden;
  min-height:236px;
  border:1px solid rgba(0,126,255,.28);
  background:
    radial-gradient(circle at 18% 14%,rgba(255,255,255,.86),transparent 24%),
    radial-gradient(circle at 86% 20%,rgba(32,217,139,.22),transparent 30%),
    linear-gradient(145deg,#007eff 0%,#00a7ff 48%,#13d4bf 100%);
  color:#fff;
  box-shadow:0 22px 46px rgba(0,126,255,.22), inset 0 1px 0 rgba(255,255,255,.62);
  transition:transform .18s ease,box-shadow .18s ease;
}
.blind-card-back::before{
  content:'';
  position:absolute;
  inset:14px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:18px;
}
.blind-card-back::after{
  content:'';
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  right:-54px;
  bottom:-62px;
  background:rgba(255,255,255,.16);
}
.blind-card-shine{
  position:absolute;
  inset:-35% auto auto -42%;
  width:46%;
  height:170%;
  transform:rotate(28deg);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.30) 42%,rgba(255,255,255,.08) 58%,transparent 100%);
  animation:blindShine 2.6s ease-in-out infinite;
}
.blind-card-mark{
  position:relative;
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:22px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.36);
  font-size:42px;
  line-height:1;
  font-weight:1000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36);
}
.blind-card-back-title{
  position:relative;
  font-size:24px;
  font-weight:1000;
  letter-spacing:0;
}
.blind-card-back-sub{
  position:relative;
  color:rgba(255,255,255,.82);
  font-size:13px;
  font-weight:800;
}
.blind-card-cta{
  position:relative;
  margin-top:6px;
  padding:9px 18px;
  border-radius:999px;
  color:#007eff;
  background:#fff;
  font-size:13px;
  font-weight:1000;
  box-shadow:0 10px 24px rgba(15,23,42,.14);
}
.blind-card-front{
  transform:rotateY(180deg);
}
.blind-card-front .locked-material{
  height:100%;
  min-height:236px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(244,249,255,.86)),
    var(--card);
  border-color:rgba(0,126,255,.18);
  box-shadow:0 22px 48px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.82);
}
.blind-card-front .locked-shot{
  box-shadow:0 14px 30px rgba(15,23,42,.10);
}
.blind-card-front .locked-eyebrow{
  display:inline-flex;
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(0,126,255,.10);
  color:var(--accent2);
}
@keyframes blindReveal{
  0%{transform:rotateY(0deg) scale(.98)}
  54%{transform:rotateY(96deg) scale(1.03)}
  100%{transform:rotateY(180deg) scale(1)}
}
@keyframes blindShine{
  0%,28%{transform:translateX(-30%) rotate(28deg);opacity:0}
  48%{opacity:.72}
  76%,100%{transform:translateX(360%) rotate(28deg);opacity:0}
}
html:not(.light) .blind-card-front .locked-material{
  background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(17,34,56,.92));
  border-color:rgba(0,126,255,.28);
}
html:not(.light) .blind-card-back{
  background:
    radial-gradient(circle at 18% 14%,rgba(255,255,255,.18),transparent 24%),
    radial-gradient(circle at 86% 20%,rgba(32,217,139,.18),transparent 30%),
    linear-gradient(145deg,#0068d7 0%,#008cf5 46%,#00b99f 100%);
}
@media(max-width:700px){
  .blind-card-stage{
    width:100%;
  }
  .blind-card-flip,
  .blind-card-back,
  .blind-card-front .locked-material{
    min-height:220px;
  }
  .blind-card-back-title{
    font-size:22px;
  }
}

/* Dark polish: softer timeline, quieter pending state, cleaner task/profile cards */
.profile-avatar{
  box-shadow:none!important;
  border:1px solid var(--border);
}
.profile-avatar .lv-ring{
  display:none!important;
}
.profile-hero{
  align-items:center!important;
  padding:22px 24px 14px!important;
}
.profile-kicker{
  color:var(--accent2);
  font-size:12px!important;
  letter-spacing:0!important;
}
.profile-name{
  font-size:24px!important;
}
.profile-meta{
  color:var(--text-2)!important;
}
.progress-card{
  margin:0 24px 18px!important;
  padding:16px!important;
  background:var(--card2)!important;
  border-color:var(--border)!important;
}
.progress-copy strong{
  font-size:26px;
  line-height:1;
}
.next-ach{
  display:none!important;
}
html:not(.light) .wk-list::before{
  background:linear-gradient(180deg,transparent 0,rgba(226,232,240,0.20) 12%,rgba(226,232,240,0.20) 88%,transparent 100%)!important;
}
html:not(.light) .wk-dot{
  border-color:#0E1728!important;
  outline-color:rgba(226,232,240,0.28)!important;
}
html:not(.light) .wk-dot.todo{
  background:#101A2C!important;
  outline-color:rgba(226,232,240,0.30)!important;
}
html:not(.light) .wk-status.s-todo,
html:not(.light) .q-status.s-todo{
  background:rgba(148,163,184,0.12)!important;
  color:rgba(226,232,240,0.66)!important;
  border:1px solid rgba(226,232,240,0.08);
}
html:not(.light) .wk-item.selected{
  background:rgba(0,126,255,0.10)!important;
  border-color:rgba(0,126,255,0.28)!important;
}
.quest-hero{
  padding:24px 26px!important;
  border-radius:22px!important;
}
.quest-top{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px!important;
  align-items:center!important;
  margin-bottom:18px!important;
}
.quest-icon{
  width:74px!important;
  height:54px!important;
  border-radius:18px!important;
  font-size:18px!important;
}
.quest-meta h1{
  font-size:26px!important;
  line-height:1.18!important;
  margin:0 0 7px!important;
}
.quest-meta .qm-sub{
  margin-bottom:10px!important;
}
.quest-tags{
  gap:8px!important;
}
.q-tag,.q-status{
  border-radius:999px!important;
  padding:5px 12px!important;
}
.focus-card{
  border-radius:16px!important;
  padding:16px 18px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(150px,auto) auto;
  align-items:center!important;
  gap:18px!important;
}
.focus-title{
  font-size:16px!important;
}
.focus-date{
  padding-left:18px!important;
}
.task-suite{
  border-radius:20px!important;
}
html:not(.light) .task-suite,
html:not(.light) .sub-block,
html:not(.light) .quest-hero{
  background-color:rgba(15,23,42,0.72)!important;
  border-color:rgba(226,232,240,0.10)!important;
}
html:not(.light) .task-suite .d-block li{
  background:rgba(255,255,255,0.035)!important;
  border-color:rgba(226,232,240,0.08)!important;
}
html:not(.light) .task-suite .d-block li::before{
  border-color:rgba(226,232,240,0.22)!important;
  background:rgba(15,23,42,0.72)!important;
}
@media(max-width:700px){
  .quest-top,
  .focus-card{
    grid-template-columns:1fr!important;
  }
  .focus-date{
    padding-left:0!important;
  }
}

/* Cleaner observer dropdown */
.user-panel{
  width:360px!important;
}
.user-panel .observer-note{
  margin:0 20px 16px!important;
  padding:14px 16px!important;
  border-radius:14px!important;
  background:rgba(148,163,184,0.10)!important;
  border:1px solid var(--border);
  color:var(--text-2)!important;
  font-size:13px!important;
  line-height:1.7!important;
}
.user-panel .profile-avatar{
  width:52px!important;
  height:52px!important;
  font-size:20px!important;
  border-radius:16px!important;
}
.user-panel .profile-hero{
  gap:12px!important;
  padding:20px 20px 14px!important;
}
.user-panel .profile-kicker{
  font-size:11px!important;
  color:var(--text-3)!important;
  font-weight:800!important;
}
.user-panel .profile-name{
  margin-top:0!important;
  font-size:22px!important;
  line-height:1.2!important;
}
.user-panel .profile-meta{
  margin-top:2px!important;
  font-size:13px!important;
}
.user-panel .panel-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:10px!important;
  padding:14px 20px 20px!important;
  border-top:1px solid var(--border);
  background:rgba(148,163,184,0.04);
}
.user-panel .panel-actions .panel-btn,
.user-panel .panel-actions .logout-btn{
  margin:0!important;
  min-height:42px;
  border-radius:12px!important;
  background:var(--card2)!important;
  color:var(--text-2)!important;
  box-shadow:none!important;
}
.user-panel .panel-actions .panel-btn:hover{
  color:var(--accent2)!important;
  border-color:rgba(0,126,255,0.28)!important;
}
.user-panel .panel-actions .logout-btn:hover{
  color:var(--red)!important;
  border-color:rgba(255,82,82,0.28)!important;
}
html.light .user-panel .observer-note{
  background:#F5F8FC!important;
}
@media(max-width:700px){
  .user-panel{
    width:auto!important;
  }
}

/* Profile header reset: cleaner avatar and compact identity row */
.brand-icon,
.login-mark{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  -webkit-text-fill-color:initial!important;
}
.brand-icon{
  background:linear-gradient(135deg,#00a870,#60d937)!important;
  box-shadow:0 10px 24px rgba(0,168,112,.18)!important;
}
.login-mark{
  background:linear-gradient(135deg,#00a870,#60d937)!important;
  box-shadow:0 12px 28px rgba(0,168,112,.18)!important;
}
.user-panel .profile-hero{
  align-items:center!important;
  gap:14px!important;
  padding:22px 22px 16px!important;
}
.user-panel .profile-avatar{
  width:62px!important;
  height:62px!important;
  border-radius:50%!important;
  overflow:hidden!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:0 10px 26px rgba(15,23,42,.10)!important;
}
.user-panel .profile-avatar img{
  border-radius:50%!important;
}
.user-panel .profile-title-row{
  display:flex!important;
  align-items:baseline!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  min-width:0!important;
}
.user-panel .profile-name{
  margin:0!important;
  font-size:24px!important;
  line-height:1.15!important;
  letter-spacing:0!important;
}
.user-panel .profile-meta{
  margin:0!important;
  color:var(--text-3)!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.4!important;
}
.user-panel .observer-meta{
  margin-top:4px!important;
}
html:not(.light) .user-panel .profile-avatar{
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
}

/* Sharper light cards and a more card-like blind-box result */
html.light .quest-hero{
  border:1px solid rgba(15,23,42,.12)!important;
  box-shadow:0 18px 42px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.82)!important;
}
html.light .quest-hero.p1{border-color:rgba(0,126,255,.22)!important}
html.light .quest-hero.p2{border-color:rgba(24,201,120,.24)!important}
html.light .quest-hero.p3{border-color:rgba(255,92,138,.24)!important}
html.light .quest-hero.p4{border-color:rgba(255,178,56,.28)!important}
html.light .quest-hero .focus-card{
  border-width:1px!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.76)!important;
}
.blind-drawn.game-blind{
  background:
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.86),transparent 28%),
    linear-gradient(135deg,rgba(0,126,255,.095),rgba(32,217,139,.055)),
    var(--card)!important;
  border:1px solid rgba(0,126,255,.24)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.75)!important;
}
.blind-drawn .bb-head{
  margin-bottom:14px!important;
}
.blind-drawn .dp-card-title{
  font-size:18px!important;
  line-height:1.25!important;
}
.blind-drawn .dp-card-sub{
  margin-top:4px!important;
  color:var(--text-3)!important;
}
.blind-drawn .blind-card-stage{
  width:100%!important;
  max-width:980px!important;
  margin:0 auto 2px!important;
}
.blind-drawn .blind-card-flip,
.blind-drawn .blind-card-back,
.blind-drawn .blind-card-front .locked-material{
  min-height:214px!important;
}
.blind-card-front .locked-material{
  grid-template-columns:minmax(220px,360px) minmax(0,1fr)!important;
  gap:24px!important;
  padding:16px!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 0 0,rgba(0,126,255,.10),transparent 36%),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(244,249,255,.90))!important;
  border:1px solid rgba(0,126,255,.24)!important;
  box-shadow:0 18px 40px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.blind-card-front .locked-shot{
  border-radius:18px!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:0 18px 34px rgba(15,23,42,.10)!important;
}
.blind-card-front .locked-body{
  justify-content:center!important;
  gap:12px!important;
}
.blind-card-front .locked-eyebrow{
  background:linear-gradient(135deg,rgba(0,126,255,.16),rgba(0,167,255,.08))!important;
  border:1px solid rgba(0,126,255,.16)!important;
}
.blind-card-front .locked-title{
  font-size:24px!important;
  line-height:1.18!important;
}
.blind-card-front .locked-meta{
  gap:10px!important;
  font-size:14px!important;
}
.blind-card-front .locked-desc{
  max-width:560px!important;
  font-size:15px!important;
  line-height:1.7!important;
}
.blind-drawn .blind-chance{
  min-height:40px!important;
  padding:9px 14px!important;
  background:rgba(255,255,255,.80)!important;
  border-color:rgba(15,23,42,.12)!important;
}
.blind-drawn .blind-draw-btn.secondary{
  min-height:46px!important;
  padding:11px 24px!important;
  background:#fff!important;
  color:var(--accent2)!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
}
html:not(.light) .blind-drawn.game-blind{
  background:
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(135deg,rgba(0,126,255,.14),rgba(32,217,139,.06)),
    rgba(15,23,42,.76)!important;
  border-color:rgba(0,126,255,.26)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
html:not(.light) .blind-card-front .locked-material{
  background:
    radial-gradient(circle at 0 0,rgba(0,126,255,.14),transparent 36%),
    linear-gradient(135deg,rgba(15,23,42,.96),rgba(17,34,56,.92))!important;
  border-color:rgba(0,126,255,.30)!important;
}
html:not(.light) .blind-drawn .blind-chance,
html:not(.light) .blind-drawn .blind-draw-btn.secondary{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.12)!important;
}
@media(max-width:700px){
  .blind-card-front .locked-material{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .blind-card-front .locked-title{
    font-size:20px!important;
  }
}

/* Final cleanup: simpler loading, blue brand mark, stronger blind result preview */
.loading-card{
  width:min(560px,100%)!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html.light .loading-card,
html:not(.light) .loading-card{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
.loading-card::before,
.loading-mark{
  display:none!important;
}
.loading-card h1{
  margin-top:0!important;
}
.brand-icon,
.login-mark{
  background:linear-gradient(135deg,#007EFF,#00C2FF)!important;
  box-shadow:0 10px 24px rgba(0,126,255,.22)!important;
}
.blind-card-front .locked-material{
  grid-template-columns:minmax(360px,52%) minmax(0,1fr)!important;
  gap:28px!important;
  align-items:center!important;
  padding:18px!important;
}
.blind-card-front .locked-shot{
  appearance:none!important;
  border:none!important;
  padding:0!important;
  width:100%!important;
  min-height:260px!important;
  cursor:zoom-in!important;
  position:relative!important;
  background:var(--bg3)!important;
}
.blind-card-front .locked-shot img{
  width:100%!important;
  height:100%!important;
  min-height:260px!important;
  object-fit:cover!important;
  display:block!important;
}
.locked-zoom{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.68);
  color:#fff;
  font-size:12px;
  font-weight:800;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
}
.locked-shot:hover .locked-zoom{
  opacity:1;
  transform:translateY(0);
}
.blind-card-front .locked-eyebrow{
  font-size:13px!important;
}
.blind-card-front .locked-title{
  font-size:26px!important;
  max-width:440px!important;
}
.blind-card-front .locked-desc{
  display:none!important;
}
@media(max-width:900px){
  .blind-card-front .locked-material{
    grid-template-columns:1fr!important;
  }
}

/* Result card reset: no awkward split layout, image first */
.blind-drawn.game-blind{
  padding:24px!important;
  background:
    linear-gradient(180deg,rgba(0,126,255,.055),rgba(255,255,255,.86)),
    var(--card)!important;
}
.blind-drawn .bb-head{
  align-items:center!important;
  margin-bottom:18px!important;
}
.blind-drawn .blind-card-stage{
  width:100%!important;
  max-width:720px!important;
  margin:0 auto!important;
}
.blind-drawn .blind-card-flip{
  min-height:430px!important;
}
.blind-drawn .blind-card-stage.drawn .blind-card-flip{
  transform:none!important;
  animation:none!important;
}
.blind-drawn .blind-card-back{
  display:none!important;
}
.blind-drawn .blind-card-front{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  backface-visibility:visible!important;
}
.blind-card-front .locked-result-card{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  width:100%!important;
  min-height:0!important;
  padding:12px!important;
  border-radius:24px!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.blind-card-front .locked-result-card .result-shot{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  border-radius:18px!important;
  overflow:hidden!important;
  border:1px solid rgba(15,23,42,.08)!important;
  background:#F4F8FD!important;
  box-shadow:none!important;
}
.blind-card-front .locked-result-card .result-shot img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
}
.locked-result-info{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:10px 16px!important;
  padding:16px 4px 4px!important;
}
.locked-result-info .locked-eyebrow{
  grid-column:1/-1;
  width:max-content!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  background:rgba(0,126,255,.10)!important;
  color:var(--accent2)!important;
  font-size:12px!important;
  font-weight:900!important;
}
.locked-result-info .locked-title{
  margin:0!important;
  font-size:24px!important;
  line-height:1.2!important;
  max-width:none!important;
}
.locked-result-info .locked-meta{
  justify-self:end!important;
  white-space:nowrap!important;
  font-size:13px!important;
}
html:not(.light) .blind-card-front .locked-result-card{
  background:rgba(15,23,42,.90)!important;
  border-color:rgba(255,255,255,.10)!important;
}
html:not(.light) .blind-drawn.game-blind{
  background:
    linear-gradient(180deg,rgba(0,126,255,.13),rgba(15,23,42,.78)),
    rgba(15,23,42,.76)!important;
}
@media(max-width:700px){
  .blind-drawn.game-blind{
    padding:18px!important;
  }
  .blind-drawn .blind-card-flip{
    min-height:360px!important;
  }
  .locked-result-info{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  .locked-result-info .locked-meta{
    justify-self:start!important;
  }
  .locked-result-info .locked-title{
    font-size:20px!important;
  }
}

/* iOS Safari safe area fix: prevent page color from leaking behind the status bar */
@supports (padding-top: env(safe-area-inset-top)){
  @media(max-width:700px){
    body{
      background:var(--topbar-bg)!important;
    }
    .top-bar{
      position:sticky!important;
      top:0!important;
      height:calc(52px + env(safe-area-inset-top,0px))!important;
      padding:env(safe-area-inset-top,0px) 14px 0!important;
      background:var(--topbar-bg)!important;
      -webkit-backdrop-filter:none!important;
      backdrop-filter:none!important;
      box-shadow:0 1px 0 var(--border),0 8px 22px rgba(15,23,42,.06)!important;
    }
    html.light .top-bar{
      background:#fff!important;
    }
    html:not(.light) .top-bar{
      background:#071121!important;
    }
    .main-split{
      height:calc(100vh - 52px - env(safe-area-inset-top,0px))!important;
    }
  }
}

/* Blind draw refinement: same-size pre-draw card, cleaner dark result, subtitle instead of badge */
.blind-card-stage.undrawn{
  width:100%!important;
  max-width:720px!important;
  margin:12px auto 4px!important;
}
.blind-card-stage.undrawn .blind-card-flip,
.blind-card-stage.undrawn .blind-card-back{
  min-height:405px!important;
}
.blind-card-stage.undrawn .blind-card-back{
  border-radius:28px!important;
}
.blind-card-stage.undrawn .blind-card-mark{
  width:86px!important;
  height:86px!important;
  border-radius:26px!important;
  font-size:48px!important;
}
.blind-card-stage.undrawn .blind-card-back-title{
  font-size:30px!important;
}
.blind-card-stage.undrawn .blind-card-back-sub{
  font-size:15px!important;
}
.blind-card-stage.undrawn .blind-card-cta{
  margin-top:12px!important;
  padding:11px 24px!important;
}
.locked-result-info{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
}
.locked-result-info .locked-eyebrow{
  display:none!important;
}
.locked-result-info .locked-title{
  grid-column:1/2!important;
}
.locked-subtitle{
  grid-column:1/2;
  color:var(--text-2);
  font-size:15px;
  line-height:1.55;
  font-weight:700;
  margin-top:-2px;
  max-width:760px;
}
.locked-result-info .locked-meta{
  grid-column:2/3!important;
  grid-row:1/3!important;
  align-self:end!important;
}
html:not(.light) .blind-drawn.game-blind{
  background:
    radial-gradient(circle at 18% 0,rgba(0,126,255,.18),transparent 34%),
    linear-gradient(180deg,rgba(8,22,42,.92),rgba(6,14,28,.96))!important;
  border-color:rgba(0,126,255,.30)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
html:not(.light) .blind-card-front .locked-result-card{
  background:linear-gradient(180deg,rgba(17,30,50,.94),rgba(11,19,34,.96))!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
html:not(.light) .blind-card-front .locked-result-card .result-shot{
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 18px 34px rgba(0,0,0,.28)!important;
  background:#0B1320!important;
}
html:not(.light) .locked-subtitle{
  color:rgba(226,232,240,.72)!important;
}
html:not(.light) .locked-result-info .locked-meta{
  color:rgba(226,232,240,.60)!important;
}
@media(max-width:700px){
  .blind-card-stage.undrawn .blind-card-flip,
  .blind-card-stage.undrawn .blind-card-back{
    min-height:300px!important;
  }
  .blind-card-stage.undrawn .blind-card-back-title{
    font-size:24px!important;
  }
  .locked-result-info{
    grid-template-columns:1fr!important;
  }
  .locked-result-info .locked-title,
  .locked-subtitle,
  .locked-result-info .locked-meta{
    grid-column:1/-1!important;
    grid-row:auto!important;
    justify-self:start!important;
  }
}