@import url('./avatar.css');
@import url('./layout.css');
@import url('./media.css');

:root { color-scheme:dark; --ink:#f1f1f1; --muted:#aaa; --line:#303030; --surface:#1b1b1b; --canvas:#0f0f0f; --accent:#fd0d0d; --accent-dark:#ff9696; --radius:10px; --safe-area-top:env(safe-area-inset-top,0px); --safe-area-right:env(safe-area-inset-right,0px); --safe-area-bottom:env(safe-area-inset-bottom,0px); --safe-area-left:env(safe-area-inset-left,0px); --header-height:calc(72px + var(--safe-area-top)); --sidebar-width:280px; }
* { box-sizing:border-box; }
html { background:var(--canvas); scroll-padding-top:calc(var(--header-height) + 16px); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:'Roboto', 'Arial', sans-serif; font-size:14px; line-height:1.55; }
button,input,select,textarea { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid #ff7777; outline-offset:3px; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:8px; font-size:28px; line-height:1.25; font-weight:700; overflow-wrap:anywhere; }
h2 { font-size:23px; letter-spacing:-.6px; line-height:1.3; margin-bottom:8px; }
h3 { font-size:16px; line-height:1.4; margin-bottom:6px; }
p { margin-bottom:16px; }
small { font-size:12px; }
.muted { color:var(--muted); }
.eyebrow { color:var(--accent-dark); font-size:10px; letter-spacing:1.7px; font-weight:750; margin-bottom:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; max-width:100%; border:1px solid transparent; border-radius:10px; padding:10px 17px; font-weight:600; font-size:13px; min-height:42px; transition:background .12s,border-color .12s; white-space:nowrap; }
.button:hover { border-color:#777; }
.button.primary { border-color:var(--accent); background:transparent; color:var(--ink); }
.button.primary:hover { background:#331616; }
.button.secondary { background:#1b1b1b; border-color:#474747; }
.button.secondary:hover { background:#363636; }
.button.dark { background:var(--ink); color:#0f0f0f; }
.button.quiet { background:transparent; color:var(--muted); }
.button.danger { background:#311a1a; border-color:#894040; color:#ffb5b5; }
.button.small { padding:6px 12px; min-height:34px; font-size:12px; }
.button.full { width:100%; }
.button svg,.nav-link svg,.icon-button svg { width:20px; height:20px; flex-shrink:0; }
.icon-button { display:inline-grid; place-items:center; border:0; background:transparent; font-size:28px; color:var(--ink); width:40px; height:40px; border-radius:50%; }
.icon-button:hover { background:#303030; }
.pill { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:5px; font-size:11px; line-height:1.4; font-weight:650; white-space:nowrap; background:#333; color:#d5d5d5; }
.pill.creator { background:#3b2f1b; color:#eed296; }
.pill.admin { background:#302b42; color:#d1c4f4; }
.pill.active { background:#183424; color:#a3ddba; }
.pill.active::before { content:''; width:5px; height:5px; background:currentColor; border-radius:50%; }
.pill.suspended { background:#402323; color:#ffb2ac; }
.pill.outline { border:1px solid var(--line); background:transparent; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:17px; font-size:12px; font-weight:650; }
.field input,.field textarea,.field select,.search-input { width:100%; background:#121212; color:var(--ink); border:1px solid #454545; border-radius:8px; padding:11px 13px; font-size:14px; font-weight:400; min-height:44px; }
.field input:hover,.field textarea:hover,.field select:hover { border-color:#707070; }
.field input::placeholder,.field textarea::placeholder,.search-input::placeholder { color:#999; opacity:1; }
.field input[type="file"]::file-selector-button { margin-right:12px; padding:6px 10px; border:1px solid #505050; border-radius:5px; background:#303030; color:var(--ink); cursor:pointer; }
.field textarea { min-height:80px; resize:vertical; }
.field .hint { font-size:11px; font-weight:400; color:var(--muted); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-error { margin:0 0 12px; font-size:13px; color:#ffadad; }
.form-error:empty { display:none; }
.form-notice { background:#282828; padding:12px 14px; border-radius:8px; color:#c3c3c3; font-size:12px; margin-bottom:20px; }
.forgot-link { text-align:right; font-size:12px; margin:-3px 0 20px; }
.security-notice { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:17px 20px; border:1px solid #34503c; border-radius:12px; background:#16251b; margin-bottom:26px; }
.security-notice.attention { border-color:#665137; background:#292216; }
.security-notice>div { display:flex; align-items:flex-start; gap:13px; }
.security-notice svg { width:22px; height:22px; flex-shrink:0; color:#acd2b6; margin-top:2px; }
.security-notice.attention svg { color:#e3c48d; }
.security-notice p { margin:0; }
.security-notice strong { display:block; font-size:13px; margin-bottom:3px; }
.security-notice span { display:block; color:#bac8bd; font-size:12px; }
.security-notice.attention span { color:#cfc0a6; }
.security-card { max-width:560px; margin:24px auto; padding:38px; }
.security-card h1 { font-size:29px; }
.security-card>.button { max-width:100%; white-space:normal; text-align:center; }
.security-card>.muted { margin:14px 0 25px; line-height:1.8; }
.security-card-icon { width:49px; height:49px; border-radius:14px; color:#ddd; background:#323232; display:grid; place-items:center; margin-bottom:25px; }
.security-card-icon svg { width:25px; height:25px; }
.security-stack { display:grid; gap:20px; max-width:900px; }
.security-section h2 { font-size:19px; margin-bottom:4px; }
.security-section>.muted,.security-section #mfa-content>.muted { font-size:13px; line-height:1.8; }
.security-section-heading { display:flex; align-items:center; gap:14px; margin-bottom:21px; }
.security-section-heading>div { flex:1; min-width:0; }
.security-section-heading p { margin:0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.security-section-icon { width:42px; height:42px; border-radius:12px; color:#ddd; background:#323232; display:grid; place-items:center; flex-shrink:0; }
.security-section-icon svg { width:21px; height:21px; }
.security-status { color:#a3ddba; font-size:12px; margin:14px 0; }
.security-status:empty { display:none; }
.security-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.security-help { color:var(--muted); font-size:11px; margin:13px 0 0; line-height:1.7; }
.security-section form .field { max-width:420px; }
.setup-steps { border-top:1px solid var(--line); padding-top:23px; }
.setup-steps ol { padding-left:21px; margin:15px 0; color:var(--muted); font-size:13px; line-height:1.8; }
.setup-steps li { margin-bottom:8px; padding-left:4px; }
.setup-steps .hint { font-size:12px; color:var(--muted); }
.secret-key { padding:17px 20px; border:1px solid #675339; border-radius:9px; background:#272015; color:#f1d5a4; font:600 17px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:1.5px; overflow-wrap:anywhere; margin-bottom:22px; user-select:all; }
.authenticator-qr { width:100%; max-width:320px; margin:20px 0; background:#fff; border:1px solid #fff; border-radius:8px; overflow:hidden; }
.authenticator-qr svg { display:block; width:100%; height:auto; }
.authenticator-manual { max-width:580px; margin:22px 0; }
.authenticator-manual summary { cursor:pointer; color:var(--ink); font-size:13px; font-weight:600; padding:10px 0; }
.authenticator-manual summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.authenticator-manual p { color:var(--muted); font-size:13px; line-height:1.7; }
.authenticator-manual .secret-key { margin:14px 0; }
.recovery-panel { border-top:1px solid var(--line); padding-top:23px; }
.recovery-panel>.muted { font-size:13px; line-height:1.8; }
.recovery-codes { list-style:none; padding:18px; margin:18px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; background:#282828; border:1px solid var(--line); border-radius:10px; }
.recovery-codes code { display:block; font:600 14px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.8px; user-select:all; overflow-wrap:anywhere; }
.security-acknowledgement { display:flex; align-items:flex-start; gap:11px; font-size:12px; margin:25px 0 18px; cursor:pointer; }
.security-acknowledgement input { accent-color:var(--accent); width:16px; height:16px; margin:2px 0 0; flex-shrink:0; }
.text-link { color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.avatar { display:grid; place-items:center; background:var(--avatar-background, #555); color:#fff; font-weight:650; width:36px; height:36px; border-radius:50%; flex-shrink:0; font-size:12px; text-transform:uppercase; }
.avatar.large { width:64px; height:64px; font-size:22px; border-radius:50%; }
.panel { background:#1b1b1b; border:1px solid var(--line); border-radius:var(--radius); }
.panel-padding { padding:26px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:2px 0 28px; }
.page-heading p { margin-bottom:0; color:var(--muted); }
.page-heading .eyebrow { color:#aaa; margin-bottom:9px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:28px; }
.stat-card { display:flex; justify-content:space-between; padding:22px 24px; background:#1b1b1b; border:1px solid var(--line); border-radius:12px; }
.stat-label { color:var(--muted); font-size:12px; margin-bottom:7px; }
.stat-number { font-size:30px; font-weight:700; letter-spacing:-1px; line-height:1.25; }
.stat-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#303030; color:#ddd; }
.stat-icon svg { width:21px; height:21px; }
.stat-card:nth-child(2) .stat-icon { background:#303030; color:#ddd; }
.stat-card:nth-child(3) .stat-icon { background:#323232; color:#ddd; }
.tabs { display:flex; align-items:center; overflow-x:auto; white-space:nowrap; gap:24px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tab { flex-shrink:0; padding:0 0 13px; border-bottom:2px solid transparent; font-weight:550; color:var(--muted); }
.tab.active { color:var(--ink); border-color:var(--accent); }
.table-toolbar { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; gap:16px; }
.table-toolbar h3 { margin:0; }
.table-toolbar p { color:var(--muted); margin:3px 0 0; font-size:12px; }
.search-form { display:flex; align-items:center; gap:8px; max-width:330px; width:100%; }
.search-input { min-height:38px; font-size:12px; padding:9px 12px; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:left; }
th { background:#242424; color:#bbb; padding:12px 22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.7px; font-weight:650; text-transform:uppercase; white-space:nowrap; }
td { padding:18px 22px; border-bottom:1px solid #303030; font-size:12px; vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#222; }
.member-cell { display:flex; align-items:center; gap:12px; min-width:210px; }
.member-name { font-size:13px; font-weight:650; }
.member-email { font-size:11px; color:var(--muted); margin-top:2px; }
.badges { display:flex; gap:5px; flex-wrap:wrap; }
.table-footer { flex-wrap:wrap; border-top:1px solid var(--line); padding:14px 22px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; gap:12px; }
.pagination { display:flex; gap:7px; }
.section-note { margin-top:16px; display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px; font-size:12px; color:#aaa; }
.section-note svg { width:15px; height:15px; flex-shrink:0; margin-top:2px; }
.empty-state { padding:52px 24px; text-align:center; }
.empty-state .empty-icon { margin:0 auto 18px; display:grid; place-items:center; width:64px; height:64px; border-radius:20px; color:#ccc; background:#303030; }
.empty-icon svg { width:28px; height:28px; }
.empty-state p { max-width:440px; margin:0 auto 22px; color:var(--muted); }
.group-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.group-card { min-width:0; padding:23px; display:flex; flex-direction:column; }
.group-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:21px; }
.group-card .group-icon { color:#ddd; background:#303030; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; }
.group-icon svg { width:20px; height:20px; }
.group-card p { color:var(--muted); font-size:12px; min-height:40px; }
.group-card-footer { border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:17px; font-size:11px; color:var(--muted); }
.group-meta { display:flex; gap:10px; margin:10px 0 22px; }
.permission-list { display:grid; gap:9px; margin:14px 0 22px; }
.permission-option { display:flex; align-items:flex-start; gap:11px; border:1px solid var(--line); border-radius:8px; padding:12px 13px; cursor:pointer; }
.permission-option:has(input:checked) { background:#302020; border-color:#a24343; }
.permission-option:has(input:disabled) { opacity:.6; cursor:not-allowed; }
.permission-option input { margin-top:4px; accent-color:var(--accent); width:15px; height:15px; flex-shrink:0; }
.permission-option strong { display:block; font-size:12px; }
.permission-option small { color:var(--muted); font-size:11px; }
.dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:20px; }
.dialog-heading .eyebrow { margin-bottom:8px; }
.dialog-heading h2 { margin-bottom:0; }
dialog { background:#282828; border:1px solid #484848; border-radius:12px; padding:28px; color:var(--ink); box-shadow:0 24px 100px #0009; width:min(600px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); }
dialog::backdrop { background:#000a; }
.reauth-dialog { width:min(430px,calc(100vw - 32px)); }
.dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding-top:15px; border-top:1px solid var(--line); margin-top:20px; }
.dialog-actions .push-left { margin-right:auto; }
.member-summary { display:flex; align-items:center; gap:14px; padding:15px; background:#161616; border-radius:10px; margin-bottom:22px; }
.member-summary p { margin:0; font-size:12px; }
.access-section { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
.access-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:15px; }
.access-row p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.access-row h3 { font-size:13px; }
.audit-event { padding:22px 24px; display:flex; gap:17px; border-bottom:1px solid var(--line); }
.audit-event:last-child { border-bottom:0; }
.audit-icon { width:35px; height:35px; border-radius:50%; background:#303030; color:#ccc; display:grid; place-items:center; flex-shrink:0; }
.audit-icon svg { width:16px; height:16px; }
.audit-body { min-width:0; flex:1; }
.audit-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.audit-heading time { font-size:11px; color:var(--muted); white-space:nowrap; }
.audit-body p { margin:5px 0; font-size:12px; color:var(--muted); }
.audit-body details { margin-top:9px; font-size:11px; color:#aaa; }
.audit-body pre { background:#161616; color:var(--ink); padding:12px; border-radius:8px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
#toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:100; background:#303030; color:var(--ink); border:1px solid #555; border-radius:10px; padding:14px 22px; box-shadow:0 6px 30px #0007; max-width:calc(100vw - 32px); font-size:13px; }
.notifications-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px; align-items:start; }
.notification-settings { min-width:0; }
.notification-settings>p { color:var(--muted); }
.notification-settings .hint { display:block; margin:18px 0 0; line-height:1.6; }
.notification-settings .form-error { color:#ff9696; }
.notification-devices { list-style:none; padding:0; margin:20px 0 0; }
.notification-device { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; border-top:1px solid var(--line); }
.notification-device>div { min-width:0; }
.notification-device strong { overflow-wrap:anywhere; }
.notification-device .pill { display:inline-block; margin:5px 0 0 8px; }
.notification-device p { font-size:12px; margin:6px 0 0; }
.notification-device button { flex-shrink:0; }
.subscription-actions { display:flex; gap:8px; flex-wrap:wrap; }
.safety-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:16px 0; }
.safety-editor { max-width:760px; margin:20px 0; }
.safety-list { display:grid; gap:16px; margin:20px 0; }
.safety-report-heading,.safety-member { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; }
.safety-report h2,.safety-member h2 { font-size:18px; overflow-wrap:anywhere; margin:0; }
.safety-details { white-space:pre-wrap; overflow-wrap:anywhere; }
.safety-filter { display:flex; align-items:flex-end; gap:14px; }
.safety-filter .field { margin:0; }
.deletion-panel { border-color:#7a3838; }
.comments-section { max-width:1180px; margin:32px auto; padding-top:24px; border-top:1px solid var(--line); }
.comments-section>h2 { margin-bottom:8px; }
.comments-section>.hint { display:block; margin:0 0 22px; }
.comments-section form { max-width:840px; margin:20px 0; }
.comments-section textarea { min-height:90px; resize:vertical; }
.comments-section form.comment-composer, .comment-composer { display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; max-width:none; margin:24px 0; }
.comment-composer-avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--avatar-background, #555); color:#fff; font-size:22px; line-height:1; }
.comment-composer-fields { min-width:0; }
.comment-composer textarea { display:block; width:100%; min-height:30px; max-height:180px; padding:3px 0 6px; border:0; border-bottom:1px solid #777; border-radius:0; outline:none; background:transparent; color:var(--ink); font:inherit; line-height:1.5; resize:none; overflow-y:auto; }
.comment-composer textarea::placeholder { color:#aaa; opacity:1; }
.comment-composer textarea:focus { border-bottom-color:var(--ink); box-shadow:0 1px 0 var(--ink); }
.comment-composer-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:8px; }
.comment-composer .comment-actions { gap:8px; margin:0; justify-content:flex-end; }
.comment-composer .comment-actions .button { min-height:36px; padding:8px 16px; border:0; border-radius:999px; }
.comment-composer .button.primary { background:#3ea6ff; color:#0f0f0f; }
.comment-composer .button.primary:hover:not(:disabled) { background:#65b8ff; }
.comment-composer .button.primary:disabled { opacity:1; background:#272727; color:#777; }
.comment-composer .button.quiet { color:var(--ink); }
.comment-composer .button.quiet:hover { background:#ffffff14; }
.comment-composer .form-error { margin:8px 0; }
.comment-composer .form-error:empty { display:none; }
.comment-emoji-wrap { position:relative; }
.comment-emoji-toggle { display:grid; place-items:center; width:36px; height:36px; margin-left:-6px; padding:6px; border:0; border-radius:50%; background:transparent; color:var(--ink); }
.comment-emoji-toggle svg { width:24px; height:24px; }
.comment-emoji-toggle:hover { background:#ffffff14; }
.comment-emoji-picker { position:absolute; z-index:3; bottom:calc(100% + 8px); left:0; display:grid; grid-template-columns:repeat(6,32px); gap:4px; padding:8px; border:1px solid #454545; border-radius:12px; background:#282828; box-shadow:0 4px 16px #0005; }
.comment-emoji-picker button { width:32px; height:34px; padding:0; border:0; border-radius:6px; background:transparent; font-size:22px; }
.comment-emoji-picker button:hover { background:#ffffff18; }
.comment-card { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:16px; align-items:start; padding:12px 0; border:0; }
.comment-card > * { grid-column:2; min-width:0; }
.comment-card > .comment-avatar { grid-column:1; grid-row:1 / span 3; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--avatar-background, #555); color:#fff; font-size:20px; }
.comment-card > [data-comment-content] { padding-right:36px; }
.comment-card .comment-author { gap:4px; font-size:12px; }
.comment-card .comment-author strong { font-size:13px; }
.comment-card .comment-body { margin:3px 0 4px; line-height:1.5; }
.comment-card > .comment-actions { margin:0; gap:8px; }
.comment-card > .comment-actions > .button { min-height:32px; padding:6px 12px; margin-left:-12px; border:0; border-radius:999px; color:var(--ink); font-size:12px; }
.comment-card > .comment-actions > .button:hover { background:#ffffff14; }
.comment-options { position:absolute; top:8px; right:0; z-index:2; }
.comment-options[open] { z-index:5; }
.comment-options summary { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; cursor:pointer; list-style:none; }
.comment-options summary::-webkit-details-marker { display:none; }
.comment-options summary:hover { background:#ffffff14; }
.comment-options-panel { position:absolute; top:36px; right:0; min-width:170px; padding:8px 0; border-radius:12px; background:#282828; box-shadow:0 4px 20px #0006; }
.comment-options-panel .button, .comment-options-panel .text-link { display:flex; width:100%; min-height:36px; padding:8px 16px; border:0; border-radius:0; color:var(--ink); text-decoration:none; font-size:13px; font-weight:400; }
.comment-options-panel .button:hover, .comment-options-panel .text-link:hover { background:#ffffff14; }
.comment-author { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px 12px; font-size:12px; }
.comment-author strong { font-size:13px; overflow-wrap:anywhere; }
.comment-author span,.comment-author time { color:var(--muted); }
.comment-body { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; margin:12px 0; }
.comment-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:12px 0; }
.comment-actions .text-link { font-size:12px; }
.comment-replies:not(:empty) { margin:4px 0 0; padding:0; border:0; }
.comment-replies .comment-card { grid-template-columns:26px minmax(0,1fr); column-gap:12px; padding:8px 0; }
.comment-replies .comment-avatar { width:26px; height:26px; font-size:14px; }
.comment-replies .comment-card:last-of-type { border-bottom:0; }
.comment-editor { padding:20px; border:1px solid var(--line); background:#1b1b1b; border-radius:var(--radius); }
.comment-editor h3 { margin-bottom:18px; }
.comment-editor.comment-reply-editor { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; gap:12px; margin:10px 0 16px; padding:0; border:0; border-radius:0; background:transparent; overflow-anchor:none; }
.comment-reply-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--avatar-background, #555); color:#fff; font-size:14px; font-weight:600; text-transform:uppercase; }
.comment-reply-fields { min-width:0; }
.comment-reply-editor textarea { display:block; width:100%; min-height:30px; max-height:160px; padding:2px 0 5px; border:0; border-bottom:1px solid #777; border-radius:0; outline:none; background:transparent; color:var(--ink); font:inherit; font-size:14px; line-height:1.5; resize:none; overflow-y:auto; }
.comment-reply-editor textarea:focus { border-bottom-color:var(--ink); box-shadow:0 1px 0 var(--ink); }
.comment-reply-editor .comment-actions { justify-content:flex-end; gap:8px; margin:8px 0 0; }
.comment-reply-editor .comment-actions .button { min-height:36px; padding:8px 15px; border:0; border-radius:999px; }
.comment-reply-editor .button.primary { background:#3ea6ff; color:#0f0f0f; }
.comment-reply-editor .button.primary:hover:not(:disabled) { background:#65b8ff; }
.comment-reply-editor .button.primary:disabled { opacity:1; background:#272727; color:#777; }
.comment-reply-editor .button.quiet { color:var(--ink); }
.comment-reply-editor .button.quiet:hover { background:#ffffff14; }
.comment-reply-editor .form-error { margin:8px 0 0; }
.comment-card > [data-replies] { justify-self:start; margin-left:-12px; min-height:36px; padding:8px 12px; border:0; border-radius:999px; background:transparent; color:#3ea6ff; }
.comment-card > [data-replies]:hover { background:#263b4d; }
.comment-card > [data-replies]::before { content:'⌄'; display:inline-block; font-size:18px; line-height:1; }
.comment-card > [data-replies][aria-expanded="true"]::before { transform:rotate(180deg); }
.comment-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin:20px 0; }
.comment-admin-list { display:grid; gap:16px; margin:20px 0; }
.comment-admin-list h2 { font-size:17px; margin-top:12px; overflow-wrap:anywhere; }
.comment-moderation { max-width:900px; margin:20px 0; }
.comment-moderation>.comment-author { margin-top:20px; }
.comment-moderation form { padding-top:20px; border-top:1px solid var(--line); margin-top:24px; }
@media (max-width:600px) { .comment-replies:not(:empty) { margin-left:0; padding-left:12px; } .comment-editor,.comment-moderation { padding:18px; } .comment-actions { gap:8px; } }
.pwa-status { margin:0 0 24px; }
.pwa-notice { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; margin:10px 0; background:#202020; border:1px solid #734040; border-radius:12px; }
.pwa-notice p { color:var(--muted); margin:7px 0 0; max-width:760px; line-height:1.5; }
.pwa-actions { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.pwa-notice .pwa-actions { flex-shrink:0; margin:0; }
.pwa-install-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.pwa-install-grid p,.pwa-install-grid li { color:var(--muted); line-height:1.7; }
.pwa-install-grid h2:not(:first-child) { margin-top:28px; }
.pwa-install-grid ol { padding-left:24px; }
.pwa-install-grid li { padding-left:4px; margin:8px 0; }
@media (max-width:1000px) { .pwa-notice { align-items:flex-start; flex-direction:column; } .pwa-install-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .safety-report-heading,.safety-member,.safety-filter { flex-direction:column; } .safety-editor { padding:20px; } }
@media (max-width:1100px) { .notifications-grid { grid-template-columns:1fr; } }
@media (max-width:400px) { .notification-device { align-items:flex-start; flex-direction:column; } .notification-settings { padding:20px; } }
.loading-state { display:flex; align-items:center; justify-content:center; gap:12px; min-height:320px; color:var(--muted); }
.spinner { width:19px; height:19px; border:2px solid #454545; border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:1100px) { .group-grid { grid-template-columns:repeat(2,1fr); } td,th { padding-left:16px; padding-right:16px; } }
@media (max-width:700px) { h1 { font-size:25px; } .page-heading { align-items:flex-start; flex-direction:column; } .stats-grid { gap:9px; } .stat-card { padding:16px; } .stat-icon { display:none; } .stat-number { font-size:25px; } .group-grid { grid-template-columns:1fr; } .table-toolbar { align-items:flex-start; flex-direction:column; } .search-form { max-width:none; } .field-row { grid-template-columns:1fr; gap:0; } .tabs { gap:22px; } .audit-heading { flex-direction:column; gap:3px; } .access-row { flex-wrap:wrap; } .access-row .button { white-space:normal; } dialog { padding:22px; } }
@media (max-width:700px) { .security-notice { align-items:flex-start; flex-direction:column; } .security-card { padding:26px; margin:0 auto; } .security-card h1 { font-size:26px; } .security-section { padding:23px; } .security-section-heading { display:grid; grid-template-columns:38px minmax(0,1fr); } .security-section-heading>.pill { grid-column:2; justify-self:start; margin:0; } .security-section-icon { width:38px; height:38px; } .security-actions { align-items:stretch; flex-direction:column; } .security-actions .button { white-space:normal; } .recovery-codes { grid-template-columns:1fr; padding:14px; gap:8px 12px; } .recovery-codes code { font-size:12px; letter-spacing:0; } .secret-key { padding:14px; font-size:15px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.comment-load-tail { min-height:24px; margin:12px 0; color:var(--muted); font-size:13px; text-align:center; }
.comment-load-tail[hidden] { display:none; }

/* Desktop update reminders overlay the corner without moving page content. */
.pwa-status-desktop:not(.pwa-status-connectivity) { margin:0; }
.pwa-update-badge { position:fixed; z-index:1300; top:76px; right:22px; display:flex; align-items:center; gap:12px; width:320px; max-width:calc(100vw - 32px); padding:13px 16px; border:1px solid #444; border-radius:14px; color:var(--ink); background:#242424; box-shadow:0 8px 30px #0006; font:inherit; text-align:left; cursor:pointer; }
.pwa-update-badge:hover:not(:disabled) { background:#303030; border-color:#777; }
.pwa-update-badge:focus-visible { outline:2px solid #3ea6ff; outline-offset:3px; }
.pwa-update-badge:disabled { cursor:default; opacity:1; }
.pwa-update-badge strong { display:block; font-size:13px; line-height:1.4; }
.pwa-update-caption { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:4px; color:#bbb; font-size:12px; line-height:1.4; }
.pwa-update-icon { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; color:#3ea6ff; background:#3ea6ff1a; font-size:27px; }
@media (max-width:700px) { body[data-page='watch'] #pwa-status.pwa-status-desktop:not([hidden]) { display:block; margin:0; } .pwa-update-badge { right:16px; } }

.video-load-tail { min-height:32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin:24px 0; color:var(--muted); font-size:13px; }
.video-load-tail[hidden] { display:none; }

.comment-guest { position:relative; margin:24px 0; }
.comment-guest summary { display:flex; align-items:center; gap:14px; cursor:text; list-style:none; }
.comment-guest summary::-webkit-details-marker { display:none; }
.comment-guest-avatar { width:32px; height:32px; flex:none; }
.comment-guest-avatar svg { display:block; width:100%; height:100%; }
.comment-guest-placeholder { flex:1; min-width:0; padding:4px 0 9px; border-bottom:1px solid #444; color:#aaa; font-size:14px; }
.comment-signin-prompt { position:absolute; top:100%; left:0; z-index:6; width:352px; max-width:100%; padding:26px; border-radius:24px; background:#212121; box-shadow:0 8px 24px #0005; text-align:center; }
.comment-signin-prompt h3 { margin:0 0 12px; font-size:21px; line-height:1.3; }
.comment-signin-prompt p { margin:0 0 20px; color:#aaa; font-size:14px; }
.comment-signin-prompt .button { display:flex; justify-content:center; width:100%; min-height:44px; border:0; border-radius:999px; background:#f1f1f1; color:#0f0f0f; }
.comment-signin-prompt .button:hover { background:#ddd; }

.comment-reaction { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:32px; height:32px; padding:5px; border:0; border-radius:999px; background:transparent; color:var(--ink); font-size:12px; }
.comment-reaction:hover { background:#ffffff14; }
.comment-reaction[aria-pressed="true"] svg { fill:currentColor; }
.comment-reaction:disabled { cursor:wait; opacity:.6; }
.comment-card > .comment-actions > .comment-reaction + .button { margin-left:0; }

.comment-dislike-icon { transform:rotate(180deg); }