.ChannelList{border-right:1px solid var(--color-border);flex-direction:column;width:180px;display:flex;overflow-y:auto;&>.title{padding:var(--space-2);font-weight:700;font-size:var(--font-size-base);border-bottom:1px solid var(--color-border);align-items:center;display:flex;&>.close-button{cursor:pointer;padding:var(--space-1);margin-right:var(--space-2);font-size:1.5em;line-height:var(--line-height-tight);text-align:center;background:0 0;border:none;width:1.5em;height:1.5em;display:none;&:focus{outline:2px solid var(--color-accent-soft);outline-offset:1px;border-color:var(--color-accent)}}}&>.separator{height:var(--space-2)}&>.section-title{padding:.4em var(--space-2).2em;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);font-size:.85em}&>.channel{padding:var(--space-1)var(--space-2);cursor:pointer;color:inherit;justify-content:space-between;align-items:center;text-decoration:none;display:flex;&:hover{background:var(--color-surface-hover)}&.active{background:var(--color-accent-soft)}&.unread{font-weight:700}&>.badge{background:var(--color-badge-bg);color:var(--color-text-on-accent);border-radius:var(--radius-pill);text-align:center;min-width:1.2em;padding:.1em .4em;font-size:.75em;font-weight:700;&.mention{background:var(--color-danger-badge)}}&>.member-count{color:var(--color-text-subtle);font-size:.75em}}}@media (max-width:600px){.ChannelList>.title>.close-button{justify-content:center;align-items:center;display:flex}}.PasswordModal{z-index:1000;font-family:var(--font-mono);justify-content:center;align-items:center;display:flex;position:fixed;inset:0;&>.backdrop{background:var(--color-overlay);position:absolute;inset:0}&>.dialog{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;gap:16px;min-width:300px;max-width:400px;padding:24px;display:flex;position:relative;&>h3{color:var(--color-text-heading);margin:0}&>label{color:var(--color-text-muted);flex-direction:column;gap:4px;font-size:.9em;display:flex;&>input{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-heading);font-size:1em;font-family:var(--font-mono);padding:8px;&:focus{border-color:var(--color-accent);outline:none}}}&>.error{color:var(--color-danger);margin:0;font-size:.9em}&>.buttons{justify-content:flex-end;gap:8px;display:flex;&>button{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-hover);color:var(--color-text-heading);cursor:pointer;font-size:.9em;font-family:var(--font-mono);padding:8px 16px;&:hover{background:var(--color-surface-active)}&[type=submit]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-accent);&:hover{background:var(--color-accent-hover)}}&:disabled{opacity:.5;cursor:not-allowed}}}}}.ProfileModal{z-index:1000;font-family:var(--font-mono);justify-content:center;align-items:center;display:flex;position:fixed;inset:0;&>.backdrop{background:var(--color-overlay);position:absolute;inset:0}&>.dialog{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;gap:16px;width:calc(100% - 32px);max-width:420px;padding:24px;display:flex;position:relative;&>.close-x{color:var(--color-text-subtle);cursor:pointer;font-size:1.4em;line-height:var(--line-height-tight);background:0 0;border:none;padding:0 4px;position:absolute;top:12px;right:12px;&:hover{color:var(--color-text-heading)}}&>h3{color:var(--color-text-heading);margin:0}&>label{color:var(--color-text-muted);flex-direction:column;gap:4px;font-size:.9em;display:flex;&>.nick-row{gap:8px;display:flex;&>input{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-heading);font-size:1em;font-family:var(--font-mono);flex:1;padding:8px;&:focus{border-color:var(--color-accent);outline:none}}&>button{border:1px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-text-on-accent);cursor:pointer;font-size:.9em;font-family:var(--font-mono);padding:8px 12px;&:hover{background:var(--color-accent-hover)}&:disabled{opacity:.5;cursor:not-allowed}}}&>textarea{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-heading);font-size:1em;font-family:var(--font-mono);resize:vertical;padding:8px;&:focus{border-color:var(--color-accent);outline:none}}&>input[type=url]{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-heading);font-size:1em;font-family:var(--font-mono);padding:8px;&:focus{border-color:var(--color-accent);outline:none}}}&>.error{color:var(--color-danger);margin:0;font-size:.9em}&>.success{color:var(--color-success);margin:0;font-size:.9em}&>.buttons{justify-content:flex-end;gap:8px;display:flex;&>button{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-hover);color:var(--color-text-heading);cursor:pointer;font-size:.9em;font-family:var(--font-mono);padding:8px 16px;&:hover{background:var(--color-surface-active)}}&>.save-profile{border:1px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-text-on-accent);cursor:pointer;font-size:.9em;font-family:var(--font-mono);padding:8px 16px;&:hover:not(:disabled){background:var(--color-accent-hover)}&:disabled{opacity:.5;cursor:not-allowed}}}}}.ProfileModal>.dialog>.type-section{flex-direction:column;gap:8px;display:flex;&>.type-label{color:var(--color-text-muted);font-size:.9em}&>.type-options{flex-wrap:wrap;gap:8px;display:flex;&>.type-option{border:2px solid var(--color-border-type);border-radius:var(--radius-lg);background:var(--color-surface-soft);cursor:pointer;font-family:var(--font-mono);transition:border-color var(--duration-fast),background var(--duration-fast);flex-direction:column;flex:1;align-items:center;gap:4px;padding:12px 8px;display:flex;&:hover,&.active{border-color:var(--color-accent);background:var(--color-accent-soft)}&:disabled{opacity:.5;cursor:not-allowed}&>.type-icon{font-size:1.5em}&>.type-name{color:var(--color-text-secondary);font-size:.8em}}}}.LoginModal{z-index:1000;font-family:var(--font-mono);justify-content:center;align-items:center;display:flex;position:fixed;inset:0;&>.backdrop{background:var(--color-overlay);position:absolute;inset:0}&>.dialog{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;gap:16px;min-width:300px;max-width:400px;padding:24px;display:flex;position:relative;&>h3{color:var(--color-text-heading);margin:0}&>label{color:var(--color-text-muted);flex-direction:column;gap:4px;font-size:.9em;display:flex;&>input{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-heading);font-size:1em;font-family:var(--font-mono);padding:8px;&:focus{border-color:var(--color-accent);outline:none}}}&>.error{color:var(--color-danger);margin:0;font-size:.9em}&>.buttons{justify-content:flex-end;gap:8px;display:flex;&>button{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-hover);color:var(--color-text-heading);cursor:pointer;font-size:.9em;font-family:var(--font-mono);padding:8px 16px;&:hover{background:var(--color-surface-active)}&[type=submit]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-accent);&:hover{background:var(--color-accent-hover)}}&:disabled{opacity:.5;cursor:not-allowed}}}}}.MigrationBanner{background:var(--color-accent-soft);border-bottom:2px solid var(--color-accent-border);padding:var(--space-3)var(--space-4);font-family:var(--font-mono);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);&>.title{font-weight:700;font-size:var(--font-size-base);margin-bottom:.4em}&>.steps{padding-left:var(--space-5);margin:0;&>li{margin:.15em 0}& .cmd{background:var(--color-bg);border:1px solid var(--color-accent-border);border-radius:var(--radius-sm);padding:.05em .35em;font-weight:700}& a{color:var(--color-accent-deep);font-weight:700}}}