*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #08091A;--surface: #0E1229;--card: #141830;--border: rgba(100,120,200,.15);--blue: #4F8EF7;--blue2: #3B6FD8;--purple: #8B5CF6;--green: #22C55E;--red: #EF4444;--orange: #F97316;--text: #EEF2FF;--text2: #94A3B8;--text3: #475569;--canvas-bg:#FFFFFF;--toolbar: #111828;--radius: 12px;--shadow: 0 4px 24px rgba(0,0,0,.4);--glow: 0 0 20px rgba(79,142,247,.25)}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased;touch-action:none;-webkit-user-select:none;user-select:none}#root{width:100%;height:100%}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.splash{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:1000}.splash-logo{font-family:Syne,sans-serif;font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1px}.splash-ring{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-screen{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at top,#0D1535 0%,var(--bg) 70%);padding:20px}.auth-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:48px 40px;width:100%;max-width:400px;box-shadow:var(--shadow);animation:fadeUp .4s ease}.auth-logo{font-family:Syne,sans-serif;font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;margin-bottom:6px}.auth-tagline{color:var(--text2);text-align:center;font-size:13px;margin-bottom:32px}.auth-btn{width:100%;padding:13px 20px;border-radius:var(--radius);border:1px solid var(--border);font-family:DM Sans,sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}.auth-btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}.auth-btn-primary:hover{background:var(--blue2);box-shadow:var(--glow)}.auth-btn-ghost{background:transparent;color:var(--text2)}.auth-btn-ghost:hover{background:#ffffff0d;color:var(--text)}.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text3);font-size:12px}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.home-screen{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 20%,#0D1535 0%,var(--bg) 60%);padding:20px}.home-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:40px;width:100%;max-width:440px;box-shadow:var(--shadow);animation:fadeUp .3s ease}.home-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.home-logo{font-family:Syne,sans-serif;font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.user-info{display:flex;align-items:center;gap:8px}.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff}.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.action-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;cursor:pointer;transition:all .2s;text-align:center}.action-card:hover{border-color:var(--blue);box-shadow:var(--glow);transform:translateY(-2px)}.action-icon{font-size:2rem;margin-bottom:8px}.action-title{font-family:Syne,sans-serif;font-weight:700;margin-bottom:4px}.action-desc{color:var(--text2);font-size:12px}.input-group{margin-bottom:12px}.input-group input{width:100%;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:DM Sans,sans-serif;font-size:14px;outline:none;transition:border-color .2s;text-transform:uppercase;letter-spacing:3px;text-align:center;font-weight:600}.input-group input:focus{border-color:var(--blue)}.input-group input::placeholder{text-transform:none;letter-spacing:0;color:var(--text3)}.btn-main{width:100%;padding:12px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius);font-family:DM Sans,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-main:hover{background:var(--blue2);box-shadow:var(--glow)}.btn-main:disabled{opacity:.5;cursor:not-allowed}.app-layout{width:100vw;height:100vh;display:flex;overflow:hidden;position:relative}@media (min-width: 900px){.panel-chat{width:340px;min-width:340px;border-right:1px solid var(--border)}.panel-board{flex:1}.mobile-tabs{display:none!important}}@media (max-width: 899px){.panel-chat{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:var(--bg);transition:transform .3s cubic-bezier(.4,0,.2,1)}.panel-chat.hidden{transform:translate(-100%)}.panel-board{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;transition:transform .3s cubic-bezier(.4,0,.2,1)}.panel-board.hidden{transform:translate(100%)}.mobile-tabs{bottom:0}}.mobile-tabs{position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--toolbar);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:4px;z-index:100;padding:0 8px;padding-bottom:env(safe-area-inset-bottom)}.tab-btn{flex:1;height:44px;border-radius:10px;border:none;background:transparent;color:var(--text2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;gap:2px;cursor:pointer;transition:all .2s;font-family:DM Sans,sans-serif}.tab-btn.active{background:#4f8ef726;color:var(--blue)}.tab-btn svg{width:20px;height:20px}.chat-panel{height:100%;display:flex;flex-direction:column;background:var(--bg);padding-bottom:60px}@media (min-width: 900px){.chat-panel{padding-bottom:0}}.chat-header{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.chat-header-title{font-family:Syne,sans-serif;font-weight:700;font-size:14px}.ai-badge{background:#8b5cf633;color:var(--purple);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid rgba(139,92,246,.3);margin-left:auto}.api-key-banner{margin:12px;padding:12px 14px;background:#f973161a;border:1px solid rgba(249,115,22,.3);border-radius:10px;font-size:12px;color:var(--orange)}.api-key-banner input{width:100%;margin-top:8px;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:monospace;outline:none}.api-key-banner button{margin-top:6px;padding:6px 12px;background:var(--orange);border:none;border-radius:6px;color:#fff;font-size:12px;cursor:pointer;font-weight:600}.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}.msg{max-width:85%;animation:fadeUp .2s ease}.msg-user{align-self:flex-end}.msg-ai{align-self:flex-start}.msg-bubble{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5;word-break:break-word}.msg-user .msg-bubble{background:var(--blue);color:#fff;border-bottom-right-radius:4px}.msg-ai .msg-bubble{background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px}.msg-ai .msg-bubble a{color:var(--blue)}.msg-meta{font-size:10px;color:var(--text3);margin-top:3px;padding:0 4px}.msg-user .msg-meta{text-align:right}.typing-indicator{display:flex;gap:4px;padding:12px 14px}.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--text2);animation:bounce 1.2s infinite}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.chat-input-area{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end;background:var(--bg)}.chat-textarea{flex:1;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-family:DM Sans,sans-serif;font-size:13px;outline:none;resize:none;min-height:40px;max-height:100px;line-height:1.4;transition:border-color .2s;overflow-y:auto}.chat-textarea:focus{border-color:#4f8ef780}.send-btn{width:40px;height:40px;border-radius:10px;background:var(--blue);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}.send-btn:hover{background:var(--blue2)}.send-btn:disabled{opacity:.4;cursor:not-allowed}.board-panel{height:100%;display:flex;flex-direction:column;background:var(--bg);position:relative;padding-bottom:60px}@media (min-width: 900px){.board-panel{padding-bottom:0}}.board-topbar{padding:10px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);position:absolute;top:0;left:0;right:0;z-index:20;background:#08091ae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);height:52px}.room-code-badge{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 10px;font-family:Syne,sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;color:var(--blue);cursor:pointer}.room-code-badge:hover{border-color:var(--blue)}.board-title{font-family:Syne,sans-serif;font-size:13px;font-weight:700;flex:1}.participants-btn{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:12px;color:var(--text2);cursor:pointer;transition:all .2s}.participants-btn:hover{border-color:var(--blue);color:var(--text)}.dot-online{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 4px var(--green);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.canvas-container{flex:1;position:relative;overflow:hidden;margin-top:52px}#main-canvas,#overlay-canvas{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;cursor:crosshair}#overlay-canvas{pointer-events:none;z-index:2}.toolbar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:30;display:flex;align-items:center;gap:4px;background:var(--toolbar);border:1px solid var(--border);border-radius:16px;padding:6px 10px;box-shadow:0 8px 32px #00000080;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);max-width:calc(100vw - 32px);overflow-x:auto}.tool-btn{width:36px;height:36px;border-radius:10px;border:none;background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-size:15px;position:relative;flex-shrink:0}.tool-btn:hover{background:#ffffff14;color:var(--text)}.tool-btn.active{background:#4f8ef733;color:var(--blue)}.tool-btn svg{width:18px;height:18px}.toolbar-divider{width:1px;height:24px;background:var(--border);margin:0 2px;flex-shrink:0}.color-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s;flex-shrink:0}.color-swatch.active{border-color:#fff;transform:scale(1.2)}.size-slider{-webkit-appearance:none;width:60px;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer;flex-shrink:0}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--blue);cursor:pointer}.participants-panel{position:absolute;top:62px;right:12px;z-index:40;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;min-width:200px;box-shadow:var(--shadow);animation:fadeDown .2s ease}.participants-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}.participant-row{display:flex;align-items:center;gap:8px;padding:5px 0}.participant-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}.participant-name{font-size:13px;flex:1}.participant-host{background:#4f8ef733;color:var(--blue);font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600}.voice-btn{width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:16px}.voice-btn.off{background:var(--card);color:var(--text2);border:1px solid var(--border)}.voice-btn.on{background:var(--green);color:#fff;animation:voicePulse 1.5s infinite}.voice-btn.muted{background:var(--red);color:#fff}@keyframes voicePulse{0%,to{box-shadow:0 0 #22c55e66}50%{box-shadow:0 0 0 8px #22c55e00}}.toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 18px;font-size:13px;color:var(--text);z-index:9999;animation:toastIn .3s ease,toastOut .3s ease 2.7s;box-shadow:var(--shadow);white-space:nowrap}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0}}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.hidden{display:none!important}button{cursor:pointer}