:root{--bg:#0a0a0f;--bg-card:#12121a;--bg-card-hover:#1a1a25;--bg-elevated:#16161f;--bg-input:#0d0d14;--border:#2a2a3a;--border-light:#35354a;--text:#e8e8f0;--text-secondary:#9898b0;--text-muted:#6a6a80;--primary:#6c5ce7;--primary-light:#8577ed;--primary-dark:#5a4bd6;--primary-bg:rgba(108,92,231,.1);--for-color:#00b894;--for-bg:rgba(0,184,148,.1);--for-border:rgba(0,184,148,.3);--against-color:#e74c3c;--against-bg:rgba(231,76,60,.1);--against-border:rgba(231,76,60,.3);--live-color:#ff6b6b;--live-bg:rgba(255,107,107,.1);--gold:#ffd700;--radius:12px;--radius-sm:8px;--radius-lg:16px;--shadow:0 4px 20px rgba(0,0,0,.3);--transition:.2s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}a{color:var(--primary-light);text-decoration:none}a:hover{text-decoration:underline}.navbar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:#0a0a0fe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.navbar-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}.navbar-logo{font-size:1.5rem}.navbar-title{font-size:1.25rem;font-weight:800;background:linear-gradient(135deg,var(--primary-light),var(--for-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar-links{display:flex;align-items:center;gap:.75rem}.nav-link{color:var(--text-secondary);font-size:.9rem;font-weight:500;padding:.5rem .75rem;border-radius:var(--radius-sm);transition:var(--transition)}.nav-link:hover{color:var(--text);background:var(--primary-bg);text-decoration:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;border:none;cursor:pointer;transition:var(--transition);font-family:inherit}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:.4rem .85rem;font-size:.8rem}.btn-lg{padding:.85rem 1.75rem;font-size:1rem}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-light);transform:translateY(-1px)}.btn-outline{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-outline:hover:not(:disabled){color:var(--text);border-color:var(--border-light);background:var(--bg-card)}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover:not(:disabled){color:var(--text-secondary);background:var(--bg-card)}.btn-for{background:var(--for-color);color:#fff}.btn-for:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.btn-against{background:var(--against-color);color:#fff}.btn-against:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.form-group{margin-bottom:1.25rem;text-align:left}.form-group label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.5rem;color:var(--text)}.helper{font-size:.8rem;color:var(--text-muted);margin-top:.35rem}.input,.select,.textarea{width:100%;padding:.75rem 1rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;font-family:inherit;transition:var(--transition)}.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}.input::placeholder,.textarea::placeholder{color:var(--text-muted)}.textarea{resize:vertical;min-height:80px}.select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239898b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;max-width:600px;margin:0 auto}.form-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;max-width:420px;width:100%;text-align:center}.modal-card h2{margin-bottom:.5rem}.modal-card p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.9rem}.hero{position:relative;text-align:center;padding:5rem 2rem 4rem;overflow:hidden}.hero-decoration{position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(100px);opacity:.15;pointer-events:none}.hero-decoration.left{background:var(--primary);top:-100px;left:-100px}.hero-decoration.right{background:var(--for-color);bottom:-100px;right:-100px}.hero h1{font-size:3.5rem;font-weight:900;line-height:1.1;margin-bottom:1rem;background:linear-gradient(135deg,var(--text),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero>p{color:var(--text-secondary);font-size:1.15rem;max-width:550px;margin:0 auto 2.5rem}.hero-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}.stats-row{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}.stat-item{text-align:center}.stat-number{font-size:2rem;font-weight:800;color:var(--primary-light)}.stat-label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding:0 2rem;flex-wrap:wrap;gap:1rem}.section-title{font-size:1.5rem;font-weight:700}.debates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem;padding:0 2rem 3rem}.debate-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;cursor:pointer;transition:var(--transition)}.debate-card:hover{background:var(--bg-card-hover);border-color:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow)}.debate-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.debate-status{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:.25rem .6rem;border-radius:999px}.status-live{color:var(--live-color);background:var(--live-bg)}.status-waiting{color:var(--gold);background:#ffd7001a}.status-ended{color:var(--text-muted);background:#6464641a}.debate-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;line-height:1.3}.debate-card-description{color:var(--text-secondary);font-size:.85rem;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sides-preview{display:flex;gap:.5rem;margin-bottom:1rem}.side-badge{font-size:.75rem;font-weight:600;padding:.3rem .6rem;border-radius:999px}.side-badge.for{color:var(--for-color);background:var(--for-bg)}.side-badge.against{color:var(--against-color);background:var(--against-bg)}.debate-card-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:var(--text-muted);padding-top:.75rem;border-top:1px solid var(--border)}.empty-state{text-align:center;padding:3rem 2rem;color:var(--text-muted)}.empty-icon{font-size:3rem;margin-bottom:1rem}.empty-state h3{color:var(--text-secondary);margin-bottom:.5rem}.join-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 60px);padding:2rem}.join-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;max-width:480px;width:100%;text-align:center}.join-card .topic{color:var(--text-secondary);font-size:1rem;margin:.75rem 0 2rem;font-style:italic}.side-picker{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.side-option{padding:1.5rem 1rem;border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:2px solid var(--border)}.side-option.for{background:var(--for-bg)}.side-option.for:hover,.side-option.for.selected{border-color:var(--for-color);box-shadow:0 0 20px var(--for-bg)}.side-option.against{background:var(--against-bg)}.side-option.against:hover,.side-option.against.selected{border-color:var(--against-color);box-shadow:0 0 20px var(--against-bg)}.side-icon{font-size:2rem;margin-bottom:.5rem}.side-option.for .side-icon{color:var(--for-color)}.side-option.against .side-icon{color:var(--against-color)}.side-label{font-weight:700;font-size:1.1rem;margin-bottom:.25rem}.side-count{font-size:.8rem;color:var(--text-muted)}.create-page{max-width:700px;margin:0 auto;padding:3rem 2rem}.create-page h1{text-align:center;margin-bottom:.5rem}.create-page .subtitle{text-align:center;color:var(--text-secondary);margin-bottom:2rem}.debate-room{display:flex;flex-direction:column;height:calc(100vh - 57px);overflow:hidden}.debate-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:var(--bg-card);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.75rem}.debate-header h1{font-size:1.2rem;font-weight:700;line-height:1.3;max-width:500px}.debate-meta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;font-size:.8rem;color:var(--text-muted);margin-top:.5rem}.badge{padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600}.badge-live{color:var(--live-color);background:var(--live-bg)}.badge-spectators{color:var(--text-secondary);background:var(--bg-elevated)}.debate-controls{display:flex;align-items:center;gap:.75rem}.timer-display{padding:.5rem 1rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums}.timer-display .time{font-size:1.25rem;font-weight:700}.timer-display.running .time{color:var(--live-color)}.timer-display.ended .time{color:var(--text-muted)}.side-tabs{display:none;background:var(--bg-card);border-bottom:1px solid var(--border)}.side-tab{flex:1;padding:.75rem;border:none;background:transparent;color:var(--text-muted);font-weight:600;font-size:.85rem;cursor:pointer;border-bottom:2px solid transparent;font-family:inherit}.side-tab.active{color:var(--text)}.side-tab.for.active{border-bottom-color:var(--for-color);color:var(--for-color)}.side-tab.against.active{border-bottom-color:var(--against-color);color:var(--against-color)}.messages-area{flex:1;display:flex;overflow:hidden}.message-column{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--border)}.message-column:last-child{border-right:none}.column-header{display:flex;align-items:center;padding:.75rem 1rem;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}.column-header.for{color:var(--for-color);background:var(--for-bg)}.column-header.against{color:var(--against-color);background:var(--against-bg)}.messages-list{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.message-bubble{max-width:90%;padding:.75rem 1rem;border-radius:var(--radius);position:relative}.message-bubble.for{align-self:flex-start;background:var(--for-bg);border:1px solid var(--for-border)}.message-bubble.against{align-self:flex-end;background:var(--against-bg);border:1px solid var(--against-border)}.message-author{font-weight:700;font-size:.8rem;margin-bottom:.25rem}.message-bubble.for .message-author{color:var(--for-color)}.message-bubble.against .message-author{color:var(--against-color)}.message-text{font-size:.9rem;line-height:1.5;word-wrap:break-word}.message-time{font-size:.7rem;color:var(--text-muted);margin-top:.35rem;text-align:right}.message-reactions{display:flex;gap:.35rem;margin-top:.4rem}.reaction-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:.15rem .45rem;font-size:.75rem;cursor:pointer;transition:var(--transition);color:var(--text-muted)}.reaction-btn:hover{border-color:var(--border-light);background:var(--bg-elevated)}.reaction-btn.active{border-color:var(--primary);background:var(--primary-bg);color:var(--primary-light)}.message-input-area{display:flex;gap:0;border-top:1px solid var(--border);background:var(--bg-card)}.input-column{flex:1;display:flex;align-items:flex-end;padding:.5rem;gap:.5rem}.input-column:first-child{border-right:1px solid var(--border)}.input-wrapper{flex:1}.input-wrapper textarea{width:100%;padding:.65rem .85rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.85rem;font-family:inherit;resize:none;line-height:1.4}.input-wrapper textarea:focus{outline:none;border-color:var(--primary)}.input-wrapper textarea:disabled{opacity:.5;cursor:not-allowed}.send-btn{width:38px;height:38px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--transition);color:#fff;flex-shrink:0}.send-btn:disabled{opacity:.4;cursor:not-allowed}.send-btn.for{background:var(--for-color)}.send-btn.against{background:var(--against-color)}.send-btn:hover:not(:disabled){opacity:.9;transform:scale(1.05)}.vote-panel{padding:1.5rem;background:var(--bg-card)}.winner-banner{text-align:center;padding:1rem;background:linear-gradient(135deg,var(--primary-bg),var(--for-bg));border:1px solid var(--border);border-radius:var(--radius);font-weight:700;font-size:1.1rem;margin-bottom:1rem}.vote-bar-container{margin-bottom:1rem}.vote-bar{height:12px;background:var(--against-color);border-radius:999px;overflow:hidden;display:flex;margin-bottom:.75rem}.vote-bar .for-fill{background:var(--for-color);height:100%;transition:width .5s ease}.vote-bar .against-fill{background:var(--against-color);height:100%;transition:width .5s ease}.vote-stats{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600}.vote-buttons{display:flex;gap:.75rem;justify-content:center;margin-top:1rem}@media(max-width:768px){.hero h1{font-size:2.25rem}.hero{padding:3rem 1rem 2rem}.stats-row{gap:1.5rem}.stat-number{font-size:1.5rem}.section-header{padding:0 1rem}.debates-grid{padding:0 1rem 2rem;grid-template-columns:1fr}.side-tabs{display:flex}.messages-area{flex-direction:column}.message-column{border-right:none}.message-input-area{flex-direction:column}.input-column:first-child{border-right:none;border-bottom:1px solid var(--border)}.debate-header{padding:.75rem 1rem}.debate-header h1{font-size:1rem;max-width:100%}.debate-header-info{flex:1;min-width:0}.debate-controls{flex-wrap:wrap}.hero-actions{flex-direction:column}.form-card{padding:1.5rem}.navbar-links{gap:.35rem}.nav-link{padding:.4rem .5rem;font-size:.8rem}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}