:root{--color-bg: #fafafa;--color-surface: #ffffff;--color-text: #1a1a1a;--color-text-secondary: #6b7280;--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-border: #e5e7eb;--color-border-hover: #d1d5db;--color-status-active: #22c55e;--color-status-idle: #eab308;--color-status-disconnected: #ef4444;--color-card-selected: #e0e7ff;--color-card-border-selected: #6366f1;--color-danger: #ef4444;--color-danger-hover: #dc2626;--color-warning-bg: #fef3c7;--color-warning-text: #92400e;--color-danger-bg: #fee2e2;--color-danger-text: #991b1b;--color-danger-text-dark: #7f1d1d;--color-consensus: #dcfce7;--color-overlay: rgba(0, 0, 0, .4);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07);--shadow-card: 0 2px 8px rgba(0, 0, 0, .1);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px}@media(prefers-color-scheme:dark){:root{--color-bg: #121212;--color-surface: #1e1e1e;--color-text: #f0f0f0;--color-text-secondary: #a1a1aa;--color-primary: #818cf8;--color-primary-hover: #6366f1;--color-border: #3a3a3a;--color-border-hover: #505050;--color-status-active: #4ade80;--color-status-idle: #facc15;--color-status-disconnected: #f87171;--color-card-selected: #312e81;--color-card-border-selected: #818cf8;--color-consensus: #052e16;--color-overlay: rgba(0, 0, 0, .6);--color-danger: #f87171;--color-danger-hover: #ef4444;--color-danger-bg: #450a0a;--color-danger-text: #fca5a5;--color-danger-text-dark: #f87171;--color-warning-bg: #451a03;--color-warning-text: #fcd34d;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-card: 0 2px 8px rgba(0, 0, 0, .5)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit;font-size:inherit;border:none;outline:none}button:disabled{cursor:not-allowed;opacity:.5}#app{min-height:100vh;display:flex;flex-direction:column}.home{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}.home__card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-2xl);box-shadow:var(--shadow-card);max-width:420px;width:100%;text-align:center}.home__title{font-size:32px;font-weight:700;color:var(--color-primary);margin-bottom:var(--space-xs)}.home__subtitle{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--space-xl)}.home__form{display:flex;flex-direction:column;gap:var(--space-md)}.home__input{width:100%;padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-sm);font-size:16px;transition:border-color .15s}.home__input:focus{border-color:var(--color-primary)}.home__btn{width:100%;padding:var(--space-sm) var(--space-md);background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-size:16px;font-weight:600;transition:background .15s}.home__btn:hover:not(:disabled){background:var(--color-primary-hover)}.edit-name-modal__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;z-index:850;animation:edit-name-overlay-in .15s ease-out}.edit-name-modal{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:360px;width:90%;box-shadow:var(--shadow-card)}.edit-name-modal__label{display:block;font-size:18px;font-weight:600;margin-bottom:var(--space-md)}.edit-name-modal__input{width:100%;padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-sm);font-size:16px;margin-bottom:var(--space-md);transition:border-color .15s}.edit-name-modal__input:focus{border-color:var(--color-primary)}.edit-name-modal__actions{display:flex;gap:var(--space-sm)}.edit-name-modal__btn{flex:1;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:14px;font-weight:500;transition:background .15s}.edit-name-modal__btn--cancel{background:var(--color-border);color:var(--color-text)}.edit-name-modal__btn--cancel:hover{background:var(--color-border-hover)}.edit-name-modal__btn--save{background:var(--color-primary);color:#fff}.edit-name-modal__btn--save:hover:not(:disabled){background:var(--color-primary-hover)}.edit-name-modal__btn--save:disabled{opacity:.5;cursor:not-allowed}@keyframes edit-name-overlay-in{0%{opacity:0}to{opacity:1}}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) 0;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-md)}.header__left{display:flex;align-items:center;gap:var(--space-md);min-width:0}.header__logo{font-size:20px;font-weight:700;color:var(--color-primary);flex-shrink:0}.header__room-name{font-size:16px;font-weight:500;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header__right{display:flex;align-items:center;gap:var(--space-sm);min-width:0}.header__user-name{font-size:14px;font-weight:500;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.header__edit-btn{display:flex;align-items:center;justify-content:center;padding:var(--space-xs);background:none;border:none;color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:color .15s,background .15s;flex-shrink:0}.header__edit-btn:hover{color:var(--color-primary);background:var(--color-border)}.header__copy-btn{padding:var(--space-sm) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--color-text-secondary);white-space:nowrap;transition:border-color .15s,color .15s;flex-shrink:0}.header__copy-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.participant-card{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:44px}.participant-card--disconnected{opacity:.6}.participant-card--self{border-color:var(--color-primary);border-width:2px}.participant-card__status{width:8px;height:8px;border-radius:50%;flex-shrink:0}.participant-card__status--active{background:var(--color-status-active)}.participant-card__status--idle{background:var(--color-status-idle)}.participant-card__status--disconnected{background:var(--color-status-disconnected)}.participant-card__name{flex:1;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.participant-card__vote-flipper{position:relative;min-width:32px;height:32px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);transition-delay:var(--flip-delay, 0s)}.participant-card__vote-flipper--revealed{transform:perspective(400px) rotateY(180deg)}.participant-card__vote-face{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;font-size:14px;font-weight:600;font-family:var(--font-mono);min-width:24px;text-align:center}.participant-card__vote-face--back{transform:rotateY(180deg);color:var(--color-primary)}.participant-card__vote--check{color:var(--color-status-active)}.participant-card__vote--empty{color:var(--color-text-secondary)}@media(prefers-reduced-motion:reduce){.participant-card__vote-flipper{transition:none}}.participant-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-sm);padding:var(--space-md) 0}@media(max-width:639px){.participant-list{grid-template-columns:repeat(2,1fr)}}.card{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:56px;padding:var(--space-sm) var(--space-sm);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:16px;font-weight:600;font-family:var(--font-mono);color:var(--color-text);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;box-shadow:var(--shadow-sm)}.card:hover:not(.card--disabled){border-color:var(--color-primary);box-shadow:var(--shadow-md)}.card--selected{background:var(--color-card-selected);border-color:var(--color-card-border-selected);transform:translateY(-4px);box-shadow:var(--shadow-card)}.card--disabled{cursor:not-allowed;opacity:.6}.card-deck{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;padding:var(--space-md) 0}.card-deck--disabled{opacity:.5;pointer-events:none}@media(max-width:639px){.card-deck{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-sm)}}.name-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;z-index:800}.name-modal{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:360px;width:90%;box-shadow:var(--shadow-card)}.name-modal__label{display:block;font-size:18px;font-weight:600;margin-bottom:var(--space-md)}.name-modal__input{width:100%;padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-sm);font-size:16px;margin-bottom:var(--space-md);transition:border-color .15s}.name-modal__input:focus{border-color:var(--color-primary)}.name-modal__btn{width:100%;padding:var(--space-sm) var(--space-md);background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-size:16px;font-weight:600;transition:background .15s}.name-modal__btn:hover:not(:disabled){background:var(--color-primary-hover)}@keyframes connection-banner-slide-down{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes connection-banner-spin{to{transform:rotate(360deg)}}.connection-banner{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;animation:connection-banner-slide-down .3s ease-out}.connection-banner--reconnecting{background-color:var(--color-warning-bg);color:var(--color-warning-text)}.connection-banner--lost{background-color:var(--color-danger-bg);color:var(--color-danger-text)}.connection-banner__text{line-height:1.4}.connection-banner__spinner{display:inline-block;width:.875rem;height:.875rem;border:2px solid var(--color-warning-text);border-top-color:transparent;border-radius:50%;animation:connection-banner-spin .8s linear infinite;flex-shrink:0}.connection-banner__retry{margin-left:.5rem;padding:.25rem .75rem;background-color:var(--color-danger-text);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background-color .15s}.connection-banner__retry:hover{background-color:var(--color-danger-text-dark)}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;z-index:900;animation:overlay-in .15s ease-out}.confirm-dialog{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg);max-width:360px;width:90%;box-shadow:var(--shadow-card)}.confirm-dialog__title{font-size:18px;font-weight:600;margin-bottom:var(--space-sm)}.confirm-dialog__message{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.confirm-dialog__actions{display:flex;gap:var(--space-sm);justify-content:flex-end}.confirm-dialog__btn{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:14px;font-weight:500;transition:background .15s}.confirm-dialog__btn--cancel{background:var(--color-border);color:var(--color-text)}.confirm-dialog__btn--cancel:hover{background:var(--color-border-hover)}.confirm-dialog__btn--confirm{background:var(--color-status-disconnected);color:#fff}.confirm-dialog__btn--confirm:hover{background:var(--color-danger-hover)}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.room{flex:1;max-width:960px;width:100%;margin:0 auto;padding:0 var(--space-md);display:flex;flex-direction:column}.room__actions{display:flex;gap:var(--space-sm);justify-content:center;padding:var(--space-md) 0;flex-wrap:wrap}.room__action-btn{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-sm);font-size:14px;font-weight:600;transition:background .15s,color .15s}.room__action-btn--primary{background:var(--color-primary);color:#fff}.room__action-btn--primary:hover:not(:disabled){background:var(--color-primary-hover)}.room__action-btn--secondary{background:var(--color-border);color:var(--color-text)}.room__action-btn--secondary:hover{background:var(--color-border-hover)}.room__action-btn--danger{background:transparent;color:var(--color-status-disconnected);border:1px solid var(--color-status-disconnected)}.room__action-btn--danger:hover{background:var(--color-status-disconnected);color:#fff}.room__result{text-align:center;padding:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-md)}.room__result--consensus{background:var(--color-consensus);border-color:var(--color-status-active)}.room__result-stats{display:flex;gap:var(--space-xl);justify-content:center;flex-wrap:wrap}.room__result-stat{text-align:center}.room__result-value{font-size:24px;font-weight:700;font-family:var(--font-mono);color:var(--color-primary)}.room__result-label{font-size:12px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.room__connecting{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);font-size:16px}.toast-container{position:fixed;top:var(--space-md);left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;gap:var(--space-sm);pointer-events:none}.toast{background:var(--color-text);color:var(--color-surface);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:14px;font-weight:500;box-shadow:var(--shadow-md);animation:toast-in .2s ease-out;white-space:nowrap;pointer-events:auto}.toast--error{background:var(--color-status-disconnected)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}