#app-container{min-height:100vh;background:var(--c-bg);color:var(--c-text)}.top-nav{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:56px;background:var(--c-bg-nav);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:100}.nav-left .logo{font-size:22px;font-weight:700;color:var(--c-primary);cursor:pointer;letter-spacing:2px}.nav-link-btn{margin-left:18px;background:transparent;border:none;color:var(--c-text-dim);font-size:15px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .2s}.nav-link-btn:hover{color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 12%,transparent)}.nav-right{display:flex;align-items:center;gap:16px}.user-info{display:flex;align-items:center;gap:10px}.points-badge{background:linear-gradient(135deg,var(--c-primary-dark),var(--c-primary));padding:4px 12px;border-radius:12px;font-size:13px;color:#fff;font-weight:700}.guest-badge{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));padding:4px 12px;border-radius:12px;font-size:13px;color:#fff;font-weight:700}.nickname{font-size:14px;color:#ccc}.role-badge{background:var(--c-primary);padding:2px 8px;border-radius:8px;font-size:12px;color:#fff}.btn-sm{padding:6px 16px;border:none;border-radius:6px;background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));color:#fff;cursor:pointer;font-size:13px;transition:all .3s}.btn-sm:hover{opacity:.85;transform:translateY(-1px)}.btn-sm:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-outline{background:transparent;border:1px solid #4a4a6a;color:#ccc}.btn-outline:hover{background:color-mix(in srgb,var(--c-primary) 10%,transparent);border-color:var(--c-primary);color:var(--c-primary)}.btn-invite{background:transparent;border:1px dashed var(--c-primary);color:var(--c-primary);padding:2px 10px;border-radius:8px;font-size:12px;cursor:pointer}.btn-invite:hover{border-style:solid}.invite-popup{position:absolute;top:48px;right:120px;background:var(--c-bg-elev);border:1px solid var(--c-border-strong);border-radius:10px;padding:14px 18px;z-index:300;box-shadow:0 4px 20px var(--c-shadow);min-width:260px}.invite-popup p{font-size:13px;color:var(--c-text-dim);margin:4px 0}.invite-popup strong{color:var(--c-primary);font-size:16px;letter-spacing:2px}.invite-url{font-size:11px;color:#555;word-break:break-all}main{min-height:calc(100vh - 56px)}.theme-switcher{position:relative}.theme-btn{font-size:12px;padding:5px 12px}.theme-popup{position:fixed;top:56px;right:16px;background:var(--c-bg-elev);border:1px solid var(--c-border-strong);border-radius:10px;box-shadow:0 8px 30px var(--c-shadow);z-index:400;padding:14px;width:240px}.theme-popup-inner{display:flex;flex-direction:column;gap:12px}.theme-title{font-size:13px;color:var(--c-text);margin:0;font-weight:700}.theme-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--c-border);border-radius:6px;background:transparent;color:var(--c-text-dim);cursor:pointer;font-size:12px;transition:all .2s}.theme-opt:hover{border-color:var(--c-primary);color:var(--c-primary)}.theme-opt.active{border-color:var(--c-primary);color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 12%,transparent)}.theme-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}.theme-custom{border-top:1px solid var(--c-border);padding-top:10px}.theme-custom label{display:block;font-size:11px;color:var(--c-text-mute);margin-bottom:6px}.theme-custom-row{display:flex;align-items:center;gap:8px}.theme-custom-row input[type=color]{width:40px;height:30px;padding:0;border:1px solid var(--c-border-strong);border-radius:6px;background:var(--c-bg-input);cursor:pointer}:root{--c-primary: #4a9eff;--c-primary-dark: #2980b9;--c-bg: #0f0f1a;--c-bg-nav: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);--c-bg-panel: rgba(22, 33, 62, .7);--c-bg-panel-solid: #16213e;--c-bg-elev: #16213e;--c-bg-input: #0f0f2a;--c-border: #2a2a4a;--c-border-strong: #3a3a5a;--c-text: #e0e0e0;--c-text-dim: #aaa;--c-text-mute: #777;--c-text-faint: #555;--c-success: #4caf50;--c-warn: #f0a500;--c-danger: #e94560;--c-shadow: rgba(0, 0, 0, .4);--c-overlay: rgba(0, 0, 0, .6);--c-overlay-strong: rgba(0, 0, 0, .7)}[data-theme=bright]{--c-primary: #2f6bff;--c-primary-dark: #1c47c9;--c-bg: #eef1f6;--c-bg-nav: linear-gradient(135deg, #ffffff 0%, #eef2f8 100%);--c-bg-panel: #ffffff;--c-bg-panel-solid: #ffffff;--c-bg-elev: #ffffff;--c-bg-input: #f4f6fa;--c-border: #e2e6ee;--c-border-strong: #cdd3df;--c-text: #1a1f2e;--c-text-dim: #5a6478;--c-text-mute: #8a93a6;--c-text-faint: #aab1c0;--c-success: #2e9e4b;--c-warn: #c47f00;--c-danger: #e94560;--c-shadow: rgba(0, 0, 0, .12);--c-overlay: rgba(0, 0, 0, .35);--c-overlay-strong: rgba(0, 0, 0, .45)}[data-theme=dark]{--c-primary: #5aa6ff;--c-primary-dark: #2c6fd6;--c-bg: #07070d;--c-bg-nav: linear-gradient(135deg, #0c0c16 0%, #101020 100%);--c-bg-panel: rgba(12, 14, 24, .85);--c-bg-panel-solid: #0e0f1c;--c-bg-elev: #0e0f1c;--c-bg-input: #08080f;--c-border: #1c1c2e;--c-border-strong: #2a2a40;--c-text: #e8e8f0;--c-text-dim: #b0b4c4;--c-text-mute: #707688;--c-text-faint: #4a4d5e;--c-success: #54c46b;--c-warn: #ffb02e;--c-danger: #e94560;--c-shadow: rgba(0, 0, 0, .5);--c-overlay: rgba(0, 0, 0, .7);--c-overlay-strong: rgba(0, 0, 0, .8)}[data-theme=emerald]{--c-primary: #21c08b;--c-primary-dark: #149e6f;--c-bg: #08120f;--c-bg-nav: linear-gradient(135deg, #0d1f1a 0%, #0a1612 100%);--c-bg-panel: rgba(13, 31, 26, .7);--c-bg-panel-solid: #0d1f1a;--c-bg-elev: #0d1f1a;--c-bg-input: #07140f;--c-border: #1c3a30;--c-border-strong: #2a4a3e;--c-text: #e0f0ea;--c-text-dim: #9fc0b4;--c-text-mute: #6f9387;--c-text-faint: #4f6a60;--c-success: #4caf50;--c-warn: #f0a500;--c-danger: #e94560;--c-shadow: rgba(0, 0, 0, .4);--c-overlay: rgba(0, 0, 0, .6);--c-overlay-strong: rgba(0, 0, 0, .7)}[data-theme=rose]{--c-primary: #ff6b9d;--c-primary-dark: #e0397a;--c-bg: #160a12;--c-bg-nav: linear-gradient(135deg, #1f0d18 0%, #190a14 100%);--c-bg-panel: rgba(31, 13, 24, .7);--c-bg-panel-solid: #1f0d18;--c-bg-elev: #1f0d18;--c-bg-input: #140810;--c-border: #3a1c2e;--c-border-strong: #502a40;--c-text: #f0e0e8;--c-text-dim: #c4a0b4;--c-text-mute: #926f82;--c-text-faint: #6a4f5e;--c-success: #4caf50;--c-warn: #f0a500;--c-danger: #e94560;--c-shadow: rgba(0, 0, 0, .4);--c-overlay: rgba(0, 0, 0, .6);--c-overlay-strong: rgba(0, 0, 0, .7)}