:root{--color-blue-600: #0052a3;--color-blue-500: #007acc;--color-blue-400: #2196f3;--color-blue-300: #0af;--color-green-600: #388e3c;--color-green-500: #4caf50;--color-green-400: #81c784;--color-red-600: #c62828;--color-red-500: #f44336;--color-red-400: #e57373;--color-orange-600: #ef6c00;--color-orange-500: #ff9800;--color-orange-400: #ffb74d;--color-gray-900: #0a0a0a;--color-gray-800: #1a1a1a;--color-gray-700: #222;--color-gray-600: #333;--color-gray-500: #444;--color-gray-400: #555;--color-gray-300: #666;--color-gray-200: #888;--color-gray-100: #aaa;--color-gray-50: #f5f5f5;--color-gray-75: #e0e0e0;--color-white: #fff;--color-black: #000;--color-alpha-5: rgb(255 255 255 / 5%);--color-alpha-8: rgb(255 255 255 / 8%);--color-alpha-50: rgb(0 0 0 / 50%);--color-alpha-95: rgb(0 0 0 / 95%)}:root{--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "Consolas", "Monaco", "Fira Code", monospace;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--text-xs: var(--font-size-xs);--text-sm: var(--font-size-sm);--text-base: var(--font-size-base);--text-lg: var(--font-size-lg);--text-xl: var(--font-size-xl);--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.75}:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--touch-target-min: 44px;--touch-target-comfortable: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--z-dropdown: 100;--z-modal: 500;--z-overlay: 1000;--z-toast: 1500;--breakpoint-mobile: 480px;--breakpoint-tablet: 768px;--breakpoint-desktop: 1024px}:root{--bg-primary: var(--color-gray-800);--bg-secondary: var(--color-gray-900);--bg-surface: var(--color-gray-700);--bg-overlay: var(--color-alpha-95);--bg-hover: var(--color-alpha-5);--bg-hover-strong: var(--color-alpha-8);--bg-light: var(--color-gray-50);--bg-card: var(--color-white);--border-primary: var(--color-gray-600);--border-secondary: var(--color-gray-700);--border-light: var(--color-gray-75);--border-accent: var(--color-blue-500);--text-primary: var(--color-white);--text-secondary: var(--color-gray-100);--text-muted: var(--color-gray-300);--text-dark: var(--color-gray-600);--text-dark-secondary: var(--color-gray-300);--interactive-primary: var(--color-blue-500);--interactive-primary-hover: var(--color-blue-600);--interactive-primary-text: var(--color-white);--interactive-success: var(--color-green-500);--interactive-success-hover: var(--color-green-600);--interactive-success-text: var(--color-white);--interactive-warning: var(--color-orange-500);--interactive-warning-hover: var(--color-orange-600);--interactive-warning-text: var(--color-white);--interactive-danger: var(--color-red-500);--interactive-danger-hover: var(--color-red-600);--interactive-danger-text: var(--color-white);--interactive-neutral: var(--color-gray-600);--interactive-neutral-hover: var(--color-gray-500);--interactive-neutral-text: var(--color-white);--msg-log: var(--color-blue-400);--msg-info: var(--color-green-500);--msg-warn: var(--color-orange-500);--msg-error: var(--color-red-500);--log-source-client: var(--color-blue-400);--log-source-server: var(--color-orange-500);--shadow-sm: 0 1px 2px var(--color-alpha-50);--shadow-md: 0 2px 4px var(--color-alpha-50);--shadow-elevated: 0 -4px 12px var(--color-alpha-50)}.ds-button{min-height:var(--touch-target-min);padding:var(--space-3) var(--space-4);cursor:pointer;touch-action:manipulation;transition:transform var(--transition-fast),background var(--transition-fast);font-size:var(--font-size-base);font-family:var(--font-sans);border-radius:var(--radius-sm);border:1px solid var(--border-primary);background:var(--bg-surface);color:var(--text-primary)}.ds-button:active{transform:scale(.98)}.ds-button:disabled{opacity:50%;cursor:not-allowed;transform:none}.ds-button.primary{background:var(--interactive-primary);border-color:var(--interactive-primary);color:var(--interactive-primary-text)}.ds-button.primary:hover:not(:disabled){background:var(--interactive-primary-hover)}.ds-button.ghost{background:transparent;border-color:var(--border-primary)}.ds-button.ghost:hover:not(:disabled){background:var(--bg-hover)}.ds-button.sm{min-height:36px;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm)}.ds-input{min-height:var(--touch-target-min);padding:var(--space-3) var(--space-4);font-size:var(--font-size-base);font-family:var(--font-sans);border-radius:var(--radius-sm);border:1px solid var(--border-primary);background:var(--bg-surface);color:var(--text-primary)}.ds-input::placeholder{color:var(--text-muted)}.ds-input:focus{outline:none;border-color:var(--border-accent)}.chat{--accent: var(--msg-log);display:flex;flex-direction:column;flex:1;overflow:hidden}.chat .header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3);background:var(--bg-primary);border-bottom:1px solid var(--border-primary);min-height:var(--touch-target-min);font-weight:var(--font-semibold);color:var(--accent)}.chat .messages{flex:1;overflow-y:auto;padding:var(--space-3)}.chat .message{padding:var(--space-1) 0;font-size:var(--font-size-sm);color:var(--text-secondary)}.chat .message.system{color:var(--text-muted);font-style:italic}.chat .user{color:var(--accent);margin-right:var(--space-2)}.chat .input-row{display:flex;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--border-primary)}.chat .input-row .ds-input{flex:1}.chat .input-row .ds-button{background:var(--accent);border-color:var(--accent);font-weight:var(--font-semibold)}.log-panel{--accent: var(--msg-info);display:flex;flex-direction:column;flex:1;overflow:hidden}.room{position:fixed;inset:0;display:flex;overflow:hidden;background:var(--bg-primary)}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:var(--font-sans);background:var(--bg-secondary);color:var(--text-primary)}