:root{--bg:#0F172A;--bg2:#1E293B;--bg3:#334155;--border:#334155;--border2:#475569;--text:#F1F5F9;--text2:#94A3B8;--text3:#64748B;--info:#3B82F6;--info-bg:#1E3A5F;--red:#EF4444;--green:#10B981;--radius:10px;--radius-sm:6px;--font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.light-mode{--bg:#FAF7F2;--bg2:#FFFFFF;--bg3:#F1ECE3;--border:#E7E0D4;--border2:#D8CFBF;--text:#2A2620;--text2:#6B6457;--text3:#8C8475;--info:#2563EB;--info-bg:#DCEAFE}
html.light-mode{background:#FAF7F2}
.light-mode .header,.light-mode .card,.light-mode .tab-bar{box-shadow:0 1px 3px rgba(40,30,10,.06)}
.light-mode .btn{background:var(--bg2);border-color:var(--border2)}
.light-mode input,.light-mode textarea,.light-mode select{background:var(--bg2);border-color:var(--border2);color:var(--text)}
.light-mode .overlay{background:rgba(40,30,10,.55)}
.light-mode .side-banner{display:none!important}
html{height:100%;background:#0F172A}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);min-height:100vh;overflow-x:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
#app{max-width:1280px;margin:0 auto;position:relative;z-index:2;background:var(--bg)}
.tab-bar{display:flex;overflow-x:auto;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.tab-btn{padding:10px 13px;font-size:12px;font-weight:500;border:none;cursor:pointer;background:transparent;color:var(--text2);border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:5px}
.tab-btn i{font-size:14px}.tab-btn.active{color:var(--info);border-bottom-color:var(--info)}
.header{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.btn{padding:5px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer;font-size:12px;font-weight:500}
.btn:hover{background:var(--bg3)}.btn-p{background:var(--info-bg);color:var(--info);border-color:#2563EB44}
input,textarea,select{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;color:var(--text);width:100%;font-family:var(--font)}
select option{background:var(--bg2)}textarea{resize:vertical;min-height:70px}
.btn-rem{width:26px;height:26px;border-radius:50%;border:1.5px solid #FCA5A5;background:#450a0a;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;color:#FCA5A5;flex-shrink:0}
.btn-rem:hover{background:#7f1d1d}
.btn-add{width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;background:transparent;padding-bottom:1px;flex-shrink:0}
.qbtn{width:22px;height:22px;border-radius:5px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.prog-bar{height:5px;border-radius:3px;background:var(--bg3);overflow:hidden}.prog-fill{height:100%;border-radius:3px;transition:width .3s}
.lvl-bar{height:7px;border-radius:4px;background:var(--bg3);overflow:hidden}.lvl-fill{height:100%;border-radius:4px;transition:width .4s}
.cpop{position:absolute;top:14px;left:0;z-index:60;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:8px;display:flex;flex-wrap:wrap;gap:6px;width:152px;box-shadow:0 4px 20px rgba(0,0,0,.6)}
.cdot{width:14px;height:14px;border-radius:50%;cursor:pointer;border:2px solid transparent}.cdot:hover,.cdot.sel{transform:scale(1.3);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px currentColor}
.overlay{position:fixed;inset:0;background:rgba(8,14,28,.97);z-index:200;display:flex;align-items:center;justify-content:center;padding:12px}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:20px;max-width:600px;width:100%;max-height:92vh;overflow-y:auto}
.tr-row{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;border-left:3px solid transparent}
.tr-row:hover{background:var(--bg3)}.tr-row.sel{background:var(--bg3)}
.clk{cursor:pointer}.clk:hover{transform:scale(1.07)}
.lockedframe.clk{cursor:default}.lockedframe.clk:hover{transform:none}
.ntab{padding:6px 13px;font-size:12px;font-weight:500;border:none;cursor:pointer;background:transparent;color:var(--text2);border-bottom:2px solid transparent}.ntab.on{color:var(--info);border-bottom-color:var(--info)}
.save-pill{font-size:11px;padding:3px 8px;border-radius:10px;font-weight:500;display:flex;align-items:center;gap:4px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@media (max-width: 480px){
  .star-row{flex-wrap:wrap;row-gap:6px}
  .star-row-name{width:84px}
  .star-row-actions{order:5;margin-left:auto}
  .star-row-bar{order:4;flex-basis:100%;margin-left:0}
  .star-row-totals{order:6;width:auto;margin-left:auto}
}
.app-root.compact .card{padding:9px}
.app-root.compact .header{padding:7px 12px}
.app-root.compact .tab-btn{padding:7px 10px}
.side-banner{
  display:none;
  position:fixed;top:0;bottom:0;
  width:calc((100vw - 1280px) / 2);
  min-width:140px;max-width:340px;
  background-image:url('assets/side-banner.svg');
  background-repeat:repeat-y;
  background-size:200px auto;
  background-position:top center;
  z-index:1;
  pointer-events:none;
}
.side-banner-left{left:0}
.side-banner-right{right:0;transform:scaleX(-1)}
@media (min-width: 1640px){
  .side-banner{display:block}
}
@keyframes welcomeFade{0%{opacity:0}100%{opacity:1}}
.welcome-splash{animation:welcomeFade .35s ease-out}