*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#fafaf8;--color-surface:#fff;--color-border:#d8d5cf;--color-text:#1c1c1a;--color-text-muted:#6b6965;--color-primary:#3b6fd4;--color-primary-dark:#2f5ab8;--color-success:#2d9e5f;--color-danger:#c0392b;--color-progress-bg:#e8e5de;--radius:6px;--max-width:680px}body{background:var(--color-bg);color:var(--color-text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5}nav{background:var(--color-surface);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:16px;height:52px;padding:0 24px;display:flex}.nav-brand{color:var(--color-text);cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0;font-size:18px;font-weight:700}.nav-brand:hover{color:var(--color-primary)}.nav-links{align-items:center;gap:20px;display:flex}.nav-link{color:var(--color-text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;font-size:14px}.nav-link:hover{color:var(--color-text)}.nav-theme-btn{border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-muted);cursor:pointer;white-space:nowrap;background:0 0;padding:3px 10px;font-family:inherit;font-size:13px;transition:background-color .15s,color .15s}.nav-theme-btn:hover{background:var(--color-progress-bg);color:var(--color-text)}main{max-width:var(--max-width);margin:0 auto;padding:48px 24px 64px}h1{margin-bottom:8px;font-size:26px;font-weight:700}.subtitle{color:var(--color-text-muted);margin-bottom:36px}.form-group{margin-bottom:22px}label{margin-bottom:6px;font-size:14px;font-weight:500;display:block}input[type=text],input[type=number]{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);width:100%;color:var(--color-text);outline:none;padding:10px 12px;font-family:inherit;font-size:16px;transition:border-color .15s}input:focus{border-color:var(--color-primary)}.field-error{color:var(--color-danger);min-height:18px;margin-top:5px;font-size:13px}button{cursor:pointer;border-radius:var(--radius);border:none;padding:10px 20px;font-family:inherit;font-size:15px;font-weight:500;transition:background-color .15s,opacity .15s}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark)}.btn-secondary{background:var(--color-progress-bg);color:var(--color-text)}.btn-secondary:hover:not(:disabled){background:var(--color-border)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){opacity:.88}.btn-row{flex-wrap:wrap;gap:12px;margin-top:20px;display:flex}.progress-wrap{margin-bottom:16px}.progress-labels{color:var(--color-text-muted);justify-content:space-between;margin-bottom:6px;font-size:13px;display:flex}.progress-track{background:var(--color-progress-bg);border-radius:999px;height:10px;overflow:hidden}.progress-fill{background:var(--color-primary);border-radius:999px;width:0%;height:100%;transition:width .6s cubic-bezier(.4,0,.2,1),background-color .4s}.progress-fill.complete{background:var(--color-success)}.session-meta{color:var(--color-text-muted);margin-bottom:28px;font-size:14px}.countdown-wrap{flex-direction:column;align-items:center;padding:64px 0;display:flex}.countdown-number{color:var(--color-primary);font-size:96px;font-weight:700;line-height:1}.countdown-label{color:var(--color-text-muted);margin-top:16px;font-size:16px}.ended-writing-wrap{margin-top:24px}.won-banner{background:var(--color-success);color:#fff;border-radius:var(--radius);margin-bottom:18px;padding:14px 18px;font-size:17px;font-weight:600}textarea{border:1px solid var(--color-border);border-radius:var(--radius);resize:vertical;background:var(--color-surface);width:100%;min-height:360px;color:var(--color-text);outline:none;padding:16px;font-family:Georgia,Times New Roman,serif;font-size:17px;line-height:1.75;transition:border-color .15s}textarea:focus{border-color:var(--color-primary)}textarea:disabled{background:var(--color-bg);color:var(--color-text-muted);cursor:not-allowed}.session-list{flex-direction:column;gap:16px;display:flex}.session-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.session-card-header{background:var(--color-bg);border-bottom:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;display:flex}.session-card-title{font-size:15px;font-weight:600}.session-card-meta{color:var(--color-text-muted);font-size:13px}.session-card-body{white-space:pre-wrap;word-break:break-word;max-height:220px;padding:16px;font-family:Georgia,Times New Roman,serif;font-size:15px;line-height:1.7;overflow-y:auto}.session-card-actions{border-top:1px solid var(--color-border);gap:8px;padding:8px 16px;display:flex}.filter-bar{gap:8px;margin-bottom:24px;display:flex}.filter-btn{background:var(--color-progress-bg);color:var(--color-text-muted);border:1px solid var(--color-border)}.filter-btn:hover:not(:disabled){background:var(--color-border);color:var(--color-text)}.filter-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.pagination{justify-content:center;align-items:center;gap:16px;margin-top:24px;display:flex}.pagination-info{color:var(--color-text-muted);font-size:14px}.pagination-btn{background:var(--color-progress-bg);color:var(--color-text);border:1px solid var(--color-border)}.pagination-btn:hover:not(:disabled){background:var(--color-border)}.session-card-body.empty{color:var(--color-text-muted);font-family:inherit;font-size:14px;font-style:italic}.empty-state{text-align:center;color:var(--color-text-muted);padding:64px 0}.empty-state p+p{margin-top:8px;font-size:14px}.danger-zone{border-top:1px solid var(--color-border);margin-top:48px;padding-top:24px}.danger-zone h2{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:12px;font-size:13px;font-weight:600}.link{color:var(--color-primary);cursor:pointer;text-decoration:underline}.participant-list{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.participant-item{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);align-items:center;gap:10px;height:60px;padding:0 14px;transition:opacity .3s;display:flex}.participant-item--self{border-color:var(--color-primary)}.participant-item--disconnected{opacity:.45}.participant-item--disconnected .progress-fill{transition:none;background:var(--color-border)!important}.participant-item--completed .progress-fill{background:var(--color-success)}.participant-rank{text-align:center;flex-shrink:0;min-width:28px;font-size:18px}.participant-info{flex:1;min-width:0}.participant-name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.participant-wc{color:var(--color-text-muted);white-space:nowrap;flex-shrink:0;font-size:12px}.you-badge{color:var(--color-primary);font-size:12px;font-weight:400}.disconnected-badge{color:var(--color-text-muted);font-size:11px;font-weight:400}.lobby-url-wrap{margin-bottom:24px}.lobby-url-label{margin-bottom:6px;font-size:14px;font-weight:500;display:block}.lobby-url-row{gap:8px;display:flex}.lobby-url-input{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text-muted);outline:none;flex:1;padding:9px 12px;font-family:inherit;font-size:14px}.lobby-waiting-msg{color:var(--color-text-muted);margin-top:8px;font-size:14px}.joining-spinner{color:var(--color-text-muted);flex-direction:column;align-items:center;gap:16px;padding:64px 0;display:flex}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:32px;height:32px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.btn-sm{padding:7px 14px;font-size:14px}html.theme-switching *,html.theme-switching :before,html.theme-switching :after{transition:background-color .35s,border-color .35s,color .35s!important}html.dark{--color-bg:#1c1c1a;--color-surface:#252522;--color-border:#3c3a36;--color-text:#e8e5de;--color-text-muted:#98948e;--color-primary:#6090e8;--color-primary-dark:#4f7ed4;--color-success:#3dbb72;--color-danger:#e05c4b;--color-progress-bg:#302e2a}html.dark input[type=text],html.dark input[type=number],html.dark textarea{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}html.dark textarea:disabled{background:var(--color-bg)}