:root{--color-primary: #005A9C;--color-primary-light: #1a7fd4;--color-primary-dark: #004578;--color-primary-subtle: #e8f2fc;--color-bg: #ffffff;--color-bg-secondary: #f5f5f7;--color-bg-tertiary: #e8e8ed;--color-bg-hover: #f0f0f5;--color-bg-active: #e5e5ea;--color-surface: #ffffff;--color-surface-raised: #ffffff;--color-text: #1d1d1f;--color-text-secondary: #6e6e73;--color-text-tertiary: #aeaeb2;--color-text-inverse: #ffffff;--color-text-link: #005A9C;--color-border: #d2d2d7;--color-border-light: #e5e5ea;--color-border-focus: #005A9C;--color-online: #34c759;--color-away: #ff9f0a;--color-busy: #ff3b30;--color-offline: #aeaeb2;--color-error: #ff3b30;--color-success: #34c759;--color-warning: #ff9f0a;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 2px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .12);--shadow-xl: 0 8px 32px rgba(0, 0, 0, .16);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--font-sans: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;--text-xs: 11px;--text-sm: 13px;--text-base: 15px;--text-lg: 17px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 32px;--text-4xl: 40px;--leading-tight: 1.2;--leading-normal: 1.5;--leading-relaxed: 1.7;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--transition-fast: .12s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--sidebar-width: 260px;--userlist-width: 220px;--header-height: 52px;--input-height: 44px}body{-webkit-user-select:none;user-select:none}input,textarea,[contenteditable=true],.chat-message-content{-webkit-user-select:text;user-select:text}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background:var(--color-bg)}#root{min-height:100vh}a{color:var(--color-text-link);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit}input,textarea,select{font-family:inherit;font-size:inherit}ul,ol{list-style:none}img{max-width:100%;display:block}::-webkit-scrollbar{width:16px;height:16px}::-webkit-scrollbar-track{background:silver}::-webkit-scrollbar-thumb{background:#d4d0c8;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-radius:0}::-webkit-scrollbar-button:single-button:vertical:decrement{height:16px;background:#d4d0c8;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4'%3E%3Cpolygon points='3,0 6,4 0,4' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}::-webkit-scrollbar-button:single-button:vertical:increment{height:16px;background:#d4d0c8;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4'%3E%3Cpolygon points='3,4 6,0 0,0' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}::-webkit-scrollbar-corner{background:#d4d0c8}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1;height:36px;transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none}.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}.btn-primary:hover{background:var(--color-primary-light)}.btn-primary:active{background:var(--color-primary-dark);transform:scale(.98)}.btn-secondary{background:var(--color-bg-secondary);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-bg-hover)}.btn-ghost{color:var(--color-text-secondary)}.btn-ghost:hover{background:var(--color-bg-hover);color:var(--color-text)}.btn-lg{height:44px;padding:var(--space-md) var(--space-xl);font-size:var(--text-base);border-radius:var(--radius-lg)}.btn-sm{height:28px;padding:var(--space-xs) var(--space-md);font-size:var(--text-xs)}.btn-icon{width:36px;padding:0}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.input{width:100%;height:var(--input-height);padding:0 var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--text-base);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-subtle)}.input::placeholder{color:var(--color-text-tertiary)}.input-error{border-color:var(--color-error)}.input-error:focus{box-shadow:0 0 0 3px #ff3b3026}.input-group{display:flex;flex-direction:column;gap:var(--space-xs)}.input-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}.input-hint{font-size:var(--text-xs);color:var(--color-text-tertiary)}.input-error-text{font-size:var(--text-xs);color:var(--color-error)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn var(--transition-base)}.modal{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:var(--space-2xl);max-width:480px;width:90%;max-height:85vh;overflow-y:auto;animation:slideUp var(--transition-slow)}.modal-title{font-size:var(--text-xl);font-weight:var(--weight-bold);margin-bottom:var(--space-lg)}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-xl)}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1.4}.badge-primary{background:var(--color-primary-subtle);color:var(--color-primary)}.badge-count{background:var(--color-bg-tertiary);color:var(--color-text-secondary);min-width:20px;text-align:center}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.status-dot-online{background:var(--color-online)}.status-dot-away{background:var(--color-away)}.status-dot-busy{background:var(--color-busy)}.status-dot-offline{background:var(--color-offline)}.status-dot-lg{width:10px;height:10px;border:2px solid var(--color-bg)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes typingDot{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}@keyframes marquee{0%{transform:translate(100%)}to{transform:translate(-100%)}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:1023px){:root{--sidebar-width: 64px;--userlist-width: 0px}}@media(max-width:767px){:root{--sidebar-width: 0px;--userlist-width: 0px;--header-height: 48px}.mobile-page{padding:4px 4px 0!important;min-height:100dvh!important}.mobile-window{border-radius:8px!important;margin-bottom:4px!important}.mobile-chat-body{height:calc(100dvh - 130px)!important;flex-direction:column!important}.mobile-hide{display:none!important}.mobile-titlebar{padding:0 8px!important;height:40px!important;min-height:40px!important}.mobile-titlebar .mobile-title-text{font-size:13px!important}.mobile-titlebar button{height:28px!important;padding:0 10px!important;font-size:11px!important}.mobile-input-area{padding:6px 8px!important}.mobile-input-area textarea{height:38px!important;line-height:38px!important;font-size:16px!important}.mobile-input-area button{height:38px!important;padding:0 16px!important;font-size:13px!important}.mobile-user-bar{height:28px!important;padding:0 8px!important;font-size:11px!important}.mobile-save-banner{flex-direction:column!important;gap:6px!important;padding:8px 10px!important;align-items:stretch!important}.mobile-save-banner input{width:100%!important;height:32px!important;font-size:14px!important}.mobile-save-banner button{height:32px!important;font-size:12px!important}.mobile-rd-grid{grid-template-columns:1fr!important;grid-template-rows:auto 1fr!important}.mobile-rd-grid>:first-child{height:auto!important;max-height:120px!important;border-right:none!important;border-bottom:1px solid rgba(15,23,42,.08)!important}.mobile-rd-grid>:nth-child(2){height:auto!important;flex:1!important;border-right:none!important}.mobile-rd-grid>:nth-child(3){display:none!important}.mobile-rd-header{padding:0 10px!important;height:44px!important;flex-wrap:wrap!important;gap:6px!important}.mobile-rd-header input{width:120px!important;height:28px!important;font-size:13px!important}.mobile-rd-actions{height:auto!important;padding:8px!important;flex-wrap:wrap!important;gap:6px!important}.mobile-rd-actions button{height:38px!important;font-size:13px!important;flex:1!important;min-width:100px!important}.mobile-spectator-bar{flex-direction:column!important;gap:8px!important;padding:10px!important;align-items:stretch!important}.mobile-spectator-bar input{width:100%!important;height:38px!important;font-size:16px!important}.mobile-spectator-bar button{height:38px!important;font-size:13px!important;width:100%!important}.mobile-hero-grid{grid-template-columns:1fr!important;grid-template-rows:auto!important;min-height:auto!important;border-radius:16px!important}.mobile-hero-heading{font-size:28px!important}.mobile-action-grid{grid-template-columns:repeat(3,1fr)!important}.mobile-announce-hide,.mobile-ad-hide{display:none!important}.rd-scroll::-webkit-scrollbar{width:4px!important}}