*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#000;--bg2:#121212;--bg3:#1e1e1e;--bg4:#2a2a2a;--bg5:#353535;--surface:#1e1e1e;--surface2:#2a2a2a;--border:#ffffff14;--border2:#ffffff24;--text:#fff;--text2:#b0b0b0;--text3:#6e6e6e;--on-surface-variant:#9e9e9e;--primary:#bb86fc;--primary2:#9c60e0;--r:12px;--r-lg:16px;--r-xl:24px;--nav-w:280px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Roboto,Inter,sans-serif;font-size:14px;line-height:1.5}h1,h2,h3{letter-spacing:.01em;font-weight:500;line-height:1.3}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;outline:none;font-family:inherit}input,select,textarea{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);color:var(--text);width:100%;padding:12px 16px;font-family:inherit;font-size:14px;transition:border-color .2s}input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none}select option{background:var(--bg3)}.btn{border-radius:var(--r);cursor:pointer;letter-spacing:.01em;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .18s;display:inline-flex}.btn-primary{background:var(--primary);color:#000;border:none}.btn-primary:hover{filter:brightness(1.1)}.btn-secondary{color:var(--primary);border:1px solid var(--border2);background:0 0}.btn-secondary:hover{background:#bb86fc14}.btn-danger{color:#cf6679;background:#cf667926;border:1px solid #cf66794d}.btn-sm{padding:6px 14px;font-size:12px}.btn-lg{padding:14px 28px;font-size:16px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}.chip{border:1px solid var(--border2);background:var(--surface2);color:var(--text2);border-radius:20px;align-items:center;gap:4px;padding:4px 12px;font-size:12px;font-weight:500;display:inline-flex}.badge{border-radius:20px;padding:2px 8px;font-size:11px;font-weight:500;display:inline-block}.badge-red{color:#ef5350;background:#e539352e;border:1px solid #e539354d}.badge-blue{color:#42a5f5;background:#1e88e52e;border:1px solid #1e88e54d}.badge-green{color:#66bb6a;background:#43a0472e;border:1px solid #43a0474d}.badge-amber{color:#ffb300;background:#ff8f002e;border:1px solid #ff8f004d}.badge-purple{color:#ba68c8;background:#8e24aa2e;border:1px solid #8e24aa4d}.badge-teal{color:#26a69a;background:#00897b2e;border:1px solid #00897b4d}.badge-cyan{color:#26c6da;background:#00acc12e;border:1px solid #00acc14d}.tag{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:6px;margin:2px;padding:2px 8px;font-size:11px;display:inline-block}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border2);background:var(--surface);padding:10px 14px;font-size:11px;font-weight:600}td{border-bottom:1px solid var(--border);color:var(--text);padding:12px 14px}tr:hover td{background:#ffffff08}tr:last-child td{border-bottom:none}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--text2);font-size:12px;font-weight:500}.form-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.page{padding:16px}.section-label{text-transform:uppercase;letter-spacing:.1em;color:var(--on-surface-variant);padding:12px 16px 6px;font-size:11px;font-weight:700;display:block}.scroll-x{-webkit-overflow-scrolling:touch;overflow-x:auto}.divider{border:none;border-top:1px solid var(--border);margin:8px 0}.loading{min-height:200px;color:var(--text2);justify-content:center;align-items:center;gap:12px;font-size:14px;display:flex}.spinner{border:2px solid var(--border2);border-top-color:var(--primary);border-radius:50%;width:24px;height:24px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;color:var(--text2);padding:48px 24px}.app-layout{min-height:100vh;display:flex}.sidebar{width:var(--nav-w);background:var(--bg2);z-index:50;flex-direction:column;flex-shrink:0;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--border);background:#3a1a1a;flex-shrink:0;align-items:center;gap:12px;padding:20px 16px 16px;display:flex}.sidebar-header-icon{border-radius:12px;justify-content:center;align-items:center;width:52px;height:52px;font-size:28px;display:flex;overflow:hidden}.sidebar-header-title{color:#fff;font-size:18px;font-weight:700}.sidebar-header-sub{color:#fff9;margin-top:2px;font-size:12px}.sidebar-nav{flex:1;padding:4px 0;overflow-y:auto}.nav-item{color:var(--on-surface-variant);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:100px;align-items:center;gap:12px;width:calc(100% - 16px);margin:1px 8px;padding:14px 16px;font-size:14px;font-weight:400;transition:background .15s;display:flex}.nav-item:hover{background:#ffffff0f}.nav-item.active{color:#fff;background:#ffffff1f;font-weight:500}.nav-item .nav-icon{text-align:center;flex-shrink:0;width:24px;font-size:20px}.nav-group{color:var(--on-surface-variant);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:100px;justify-content:space-between;align-items:center;gap:12px;width:calc(100% - 16px);margin:1px 8px;padding:14px 16px;font-size:14px;font-weight:400;transition:background .15s;display:flex}.nav-group:hover{background:#ffffff0f}.nav-group-inner{align-items:center;gap:12px;display:flex}.nav-sub{padding-left:20px}.main-content{margin-left:var(--nav-w);flex:1;min-width:0}.topbar{z-index:100;background:var(--bg2);border-bottom:1px solid var(--border);align-items:center;gap:4px;height:56px;padding:0 4px;display:none;position:fixed;top:0;left:0;right:0}.topbar-title{flex:1;padding-left:4px;font-size:20px;font-weight:700}.drawer-overlay{z-index:99;background:#0009;display:none;position:fixed;inset:0}.drawer-overlay.open{display:block}.drawer{width:var(--nav-w);background:var(--bg2);z-index:100;transition:transform .28s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-100%)}.drawer.open{transform:translate(0)}.roll-result{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;transition:all .2s}.roll-result.highlighted{border-color:var(--primary);background:#bb86fc12}.roll-badge{background:var(--surface2);border:1px solid var(--border2);color:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;min-width:52px;height:36px;font-size:14px;font-weight:700;display:inline-flex}.dice-face{background:var(--surface2);border:2px solid var(--border2);-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:80px;height:80px;transition:all .15s;display:flex}.dice-face:hover{border-color:var(--primary);background:#bb86fc14}.dice-face:active{transform:scale(.9)}@keyframes diceRoll{0%{transform:rotate(0)scale(1)}30%{transform:rotate(20deg)scale(.88)}70%{transform:rotate(-12deg)scale(1.06)}to{transform:rotate(0)scale(1)}}.rolling{animation:.35s diceRoll}.timer-display{color:#fff;letter-spacing:.04em;font-size:clamp(64px,16vw,128px);font-weight:700;line-height:1}.timer-display.warning{color:#f44336}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:2px}@media (width<=768px){.sidebar{display:none}.main-content{margin-left:0;padding-top:56px}.topbar{display:flex}.page{padding:12px}.form-grid{grid-template-columns:1fr}}