@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&display=swap');

:root {
    --bg: #FAF9FC;
    --surface: #FFFFFF;
    --surface-2: #F7F3FF;
    --text: #25212B;
    --muted: #756F7E;
    --accent: #512BD4;
    --accent-2: #7C3AED;
    --accent-bg: #F0E9FF;
    --divider: #DDD8E5;
    --danger: #D9485F;
    --success: #168A5B;
    --shadow: 0 14px 40px rgba(52, 35, 85, .10);
    --nav-h: 72px;
    color-scheme: light;
}
:root[data-theme="dawn"] {
    color-scheme: light;
}
:root[data-theme="nocturne"] {
    --bg: #100F14;
    --surface: #18161E;
    --surface-2: #211D2B;
    --text: #F6F2FA;
    --muted: #AAA3B4;
    --accent: #9B6BFF;
    --accent-2: #C173FF;
    --accent-bg: #2B2140;
    --divider: #342F3D;
    --shadow: 0 16px 44px rgba(0,0,0,.26);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --bg: #100F14; --surface: #18161E; --surface-2: #211D2B; --text: #F6F2FA;
        --muted: #AAA3B4; --accent: #9B6BFF; --accent-2: #C173FF; --accent-bg: #2B2140;
        --divider: #342F3D; --shadow: 0 16px 44px rgba(0,0,0,.26); color-scheme: dark;
    }
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { min-width: 0; overflow-x: hidden; }
button, input, textarea { font:inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color:inherit; }
img { max-width:100%; }
.mi { font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal; font-size:22px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; font-feature-settings:'liga'; }
.app-frame { min-height:100dvh; }
.main-content { min-height:calc(100dvh - var(--nav-h)); padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.page-shell { width:min(100%,760px); margin:0 auto; padding:24px 18px 36px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:.12em; }
.brand img { width:38px; height:38px; object-fit:contain; }
.brand.small img { width:34px; height:34px; }
.brand.small span { font-size:14px; }
.eyebrow { display:block; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.btn { min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--divider); background:var(--surface); color:var(--text); display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:700; cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost { background:transparent; }
.btn.danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn.danger-soft { color:var(--danger); }
.btn.full { width:100%; }
.btn.compact { min-height:38px; padding:0 14px; font-size:13px; }
.btn:disabled { opacity:.55; cursor:default; }
.icon-btn { width:40px; height:40px; border-radius:50%; border:0; background:transparent; color:var(--text); cursor:pointer; display:grid; place-items:center; }
.subtle { color:var(--muted); }
.alert { border-radius:14px; padding:12px 14px; font-size:13px; }
.alert.error { background:rgba(217,72,95,.10); color:var(--danger); border:1px solid rgba(217,72,95,.25); }
.alert.success { background:rgba(22,138,91,.10); color:var(--success); border:1px solid rgba(22,138,91,.22); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.spinner { width:18px; height:18px; border:2px solid var(--divider); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.skeleton { background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 37%,var(--surface-2) 63%); background-size:400% 100%; animation:shimmer 1.3s ease infinite; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;} }

.bottom-nav { position:fixed; z-index:100; left:0; right:0; bottom:0; height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding:5px max(12px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-right)); display:grid; grid-template-columns:repeat(5,1fr); align-items:center; background:color-mix(in srgb,var(--surface) 94%,transparent); border-top:1px solid var(--divider); backdrop-filter:blur(20px); }
.bottom-nav .nav-item { height:58px; border:0; background:transparent; color:var(--text); border-radius:18px; cursor:pointer; display:grid; place-items:center; text-decoration:none; }
.bottom-nav .nav-item.active { color:var(--accent); }
.bottom-nav .nav-item.muted { color:#9CA3AF; opacity:.68; }
.create-nav .mic-glyph { width:44px; height:44px; border-radius:50%; background:var(--accent); color:white; display:grid; place-items:center; box-shadow:0 8px 24px rgba(124,58,237,.25); font-size:0; }
.create-nav .mic-glyph::after { content:"mic"; font-family:"Material Symbols Rounded"; font-size:24px; font-feature-settings:'liga'; }

.landing { min-height:100dvh; background:
radial-gradient(circle at 78% 20%,rgba(168,85,247,.16),transparent 28rem),
radial-gradient(circle at 15% 45%,rgba(124,58,237,.10),transparent 24rem),var(--bg); padding:0 max(22px,5vw); }
.landing-header { min-height:82px; display:flex; justify-content:space-between; align-items:center; max-width:1180px; margin:auto; }
.landing-header nav { display:flex; gap:18px; align-items:center; }
.landing-header nav>a:not(.btn){text-decoration:none;font-size:14px;font-weight:700;}
.hero { min-height:72dvh; max-width:1180px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; padding:36px 0 72px; }
.hero-copy h1 { font-size:clamp(46px,7vw,86px); line-height:.96; letter-spacing:-.055em; margin:14px 0 20px; max-width:760px; }
.hero-copy h1 em { font-style:normal; color:var(--accent); }
.hero-copy>p { color:var(--muted); font-size:clamp(17px,2vw,21px); max-width:620px; line-height:1.55; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.install-note { margin-top:22px; color:var(--muted); display:flex; gap:8px; align-items:center; font-size:13px; }
.hero-visual { position:relative; min-height:500px; display:grid; place-items:center; }
.hero-visual>img { width:min(70%,340px); position:relative; z-index:2; filter:drop-shadow(0 28px 40px rgba(71,33,138,.28)); }
.orb-halo { position:absolute; width:390px; height:390px; max-width:90%; border-radius:50%; background:radial-gradient(circle,rgba(124,58,237,.25),rgba(168,85,247,.08) 50%,transparent 70%); filter:blur(10px); }
.voice-card { position:absolute; z-index:3; padding:14px 18px; min-width:185px; border:1px solid var(--divider); background:color-mix(in srgb,var(--surface) 86%,transparent); backdrop-filter:blur(16px); border-radius:22px; box-shadow:var(--shadow); }
.voice-card span { color:var(--accent); letter-spacing:3px; }
.voice-card small { display:block; color:var(--muted); margin-top:6px; }
.vc1 { left:0; top:24%; transform:rotate(-5deg); }
.vc2 { right:0; bottom:22%; transform:rotate(5deg); }
.landing-features { max-width:1180px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 0 90px; }
.landing-features article { padding:26px; border-radius:26px; border:1px solid var(--divider); background:var(--surface); }
.landing-features article>.mi { width:46px; height:46px; border-radius:16px; display:grid; place-items:center; background:var(--accent-bg); color:var(--accent); }
.landing-features h2 { font-size:18px; margin:18px 0 8px; }
.landing-features p { color:var(--muted); line-height:1.55; font-size:14px; }
.landing-footer { max-width:1180px; margin:auto; padding:25px 0 40px; border-top:1px solid var(--divider); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }
.landing-footer nav { display:flex; gap:16px; flex-wrap:wrap; }

.auth-page { min-height:100dvh; padding:26px 18px 50px; display:grid; place-items:center; background:radial-gradient(circle at 50% -15%,rgba(124,58,237,.16),transparent 30rem),var(--bg); }
.auth-brand { position:absolute; top:24px; left:max(20px,calc((100vw - 1180px)/2)); }
.auth-card { width:min(100%,440px); padding:32px; background:var(--surface); border:1px solid var(--divider); border-radius:30px; box-shadow:var(--shadow); }
.auth-card h1 { font-size:32px; letter-spacing:-.035em; margin:9px 0 8px; }
.auth-card .subtle { margin:0 0 24px; }
.form-stack { display:grid; gap:15px; }
.form-stack label, .settings-card label { display:grid; gap:7px; font-size:12px; font-weight:700; color:var(--muted); }
.form-stack input, .settings-card input, .settings-card textarea, .record-card textarea, .search-box input {
    width:100%; border:1px solid var(--divider); background:var(--bg); color:var(--text); border-radius:14px; padding:12px 13px; outline:none;
}
.form-stack input:focus, textarea:focus, .search-box input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.form-link { justify-self:end; color:var(--accent); font-size:12px; font-weight:700; text-decoration:none; }
.auth-switch,.legal-copy { text-align:center; color:var(--muted); font-size:12px; margin:20px 0 0; }
.auth-switch a,.legal-copy a { color:var(--accent); font-weight:700; }

.feed-page { width:min(100%,680px); margin:auto; }
.feed-header { height:72px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(16px); border-bottom:1px solid var(--divider); }
.feed-header-actions { display:flex; align-items:center; gap:4px; }
.avatar-button { width:42px; height:42px; border-radius:50%; border:1px solid var(--divider); background:var(--surface); padding:2px; overflow:hidden; }
.avatar-button img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.feed-tabs { position:sticky; top:72px; z-index:35; display:grid; grid-template-columns:1fr 1fr; background:var(--bg); border-bottom:1px solid var(--divider); }
.feed-tabs button { height:48px; border:0; background:transparent; color:var(--muted); font-weight:700; position:relative; }
.feed-tabs button.active { color:var(--text); }
.feed-tabs button.active::after { content:""; position:absolute; bottom:0; left:36%; right:36%; height:3px; border-radius:3px; background:var(--accent); }
.feed-list { display:grid; gap:0; }
.post-card { position:relative; padding:18px 16px 14px; border-bottom:1px solid var(--divider); background:var(--surface); }
.post-head { display:flex; justify-content:space-between; align-items:center; }
.author-link { display:flex; gap:10px; align-items:center; min-width:0; background:none; border:0; padding:0; color:var(--text); text-align:left; cursor:pointer; }
.author-link>span { display:grid; gap:2px; min-width:0; }
.author-link b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.author-link small { color:var(--muted); font-size:11px; }
.avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; background:var(--accent-bg); border:1px solid var(--divider); }
.small-avatar { width:34px; height:34px; }
.post-caption { margin:14px 0 12px 52px; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.voice-shell { margin-left:52px; padding:14px; border-radius:20px; background:var(--accent-bg); display:grid; gap:10px; }
.voice-audio,.comment-card audio,.review-card audio { width:100%; height:38px; }
.wave-static { display:flex; gap:3px; align-items:center; height:26px; overflow:hidden; }
.wave-static i { width:3px; height:12px; border-radius:4px; background:var(--accent); opacity:.75; }
.wave-static i:nth-child(2n){height:21px}.wave-static i:nth-child(3n){height:16px}.wave-static i:nth-child(5n){height:25px}
.post-actions { margin:10px 0 0 50px; display:flex; gap:6px; }
.post-actions button { min-width:48px; height:38px; padding:0 10px; border:0; border-radius:15px; background:transparent; color:var(--muted); display:flex; align-items:center; gap:5px; cursor:pointer; }
.post-actions button:hover { background:var(--surface-2); color:var(--accent); }
.post-menu { position:absolute; right:20px; top:56px; z-index:15; background:var(--surface); border:1px solid var(--divider); box-shadow:var(--shadow); border-radius:14px; overflow:hidden; }
.post-menu button { border:0; background:transparent; color:var(--text); padding:12px 15px; display:flex; gap:8px; align-items:center; }
.post-skeleton { height:250px; border-bottom:1px solid var(--divider); }
.loading-more { display:flex; align-items:center; justify-content:center; gap:10px; min-height:64px; color:var(--muted); font-size:12px; }
.feed-sentinel { height:2px; }

.drawer-backdrop { position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.34); opacity:0; pointer-events:none; transition:opacity .18s ease; }
.drawer-backdrop.show { opacity:1; pointer-events:auto; }
.account-drawer { position:absolute; top:0; right:0; height:100%; width:min(86vw,350px); background:var(--surface); padding:calc(24px + env(safe-area-inset-top)) 18px 24px; transform:translateX(102%); transition:transform .22s cubic-bezier(.2,.8,.2,1); box-shadow:-20px 0 60px rgba(0,0,0,.15); }
.account-drawer.show { transform:translateX(0); }
.drawer-brand { display:grid; grid-template-columns:46px 1fr 40px; align-items:center; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--divider); }
.drawer-brand img { width:44px; height:44px; }
.drawer-brand>div { display:grid; gap:3px; }
.drawer-brand strong { letter-spacing:.08em; font-size:13px; }
.drawer-brand small { color:var(--muted); font-size:10px; }
.drawer-links { display:grid; gap:5px; margin-top:14px; }
.drawer-links a,.drawer-links button { min-height:62px; border:0; border-radius:18px; background:transparent; color:var(--text); text-decoration:none; padding:8px 10px; display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; text-align:left; cursor:pointer; }
.drawer-links a:hover,.drawer-links button:hover { background:var(--surface-2); }
.drawer-links>a>.mi,.drawer-links>button>.mi { width:36px; height:36px; border-radius:50%; background:var(--accent-bg); color:var(--accent); display:grid; place-items:center; }
.drawer-links span:nth-child(2){display:grid;gap:2px}.drawer-links b{font-size:13px}.drawer-links small{font-size:10px;color:var(--muted)}.drawer-links em{font-size:9px;color:var(--accent);font-style:normal;font-weight:800;}

.page-head { margin-bottom:22px; }
.page-head h1 { font-size:30px; letter-spacing:-.035em; margin:7px 0 5px; }
.page-head p { color:var(--muted); margin:0; line-height:1.5; }
.create-page { max-width:650px; }
.record-card { padding:20px; border:1px solid var(--divider); border-radius:28px; background:var(--surface); }
.record-card textarea { min-height:92px; resize:vertical; margin-bottom:18px; }
.recorder-stage { min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; background:radial-gradient(circle,rgba(124,58,237,.08),transparent 60%); border-radius:24px; }
.record-button { width:86px; height:86px; border-radius:50%; border:0; background:var(--accent); color:white; display:grid; place-items:center; box-shadow:0 18px 40px rgba(124,58,237,.28); cursor:pointer; }
.record-button .mi { font-size:34px; }
.record-button.recording { background:var(--danger); animation:pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 14px rgba(217,72,95,.08),0 18px 40px rgba(217,72,95,.25); } }
.record-wave { display:flex; gap:4px; height:50px; align-items:center; }
.record-wave i { width:4px; height:12px; background:var(--accent); border-radius:5px; opacity:.45; }
.record-wave.live i { animation:wave .75s ease-in-out infinite alternate; }
.record-wave.live i:nth-child(2n){animation-delay:-.22s}.record-wave.live i:nth-child(3n){animation-delay:-.45s}.record-wave.live i:nth-child(5n){animation-delay:-.1s}
@keyframes wave { from{height:10px;opacity:.45} to{height:46px;opacity:1} }
.record-time { font-variant-numeric:tabular-nums; font-size:24px; font-weight:700; }
.recorder-stage p { color:var(--muted); font-size:12px; }
.review-card { margin-top:16px; padding:16px; border-radius:20px; background:var(--surface-2); display:grid; gap:14px; }
.review-card>span { font-weight:700; font-size:13px; }

.comments-section { margin-top:22px; }
.section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.section-head h2 { font-size:17px; }
.section-head a { color:var(--accent); font-size:13px; font-weight:700; text-decoration:none; }
.comment-card { display:grid; grid-template-columns:36px 1fr; gap:10px; padding:14px 0; border-bottom:1px solid var(--divider); }
.comment-main { display:grid; gap:8px; }
.comment-main b { font-size:12px; }
.back-link { display:flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--muted); padding:0 0 14px; cursor:pointer; }

.profile-hero { display:grid; grid-template-columns:110px 1fr; gap:22px; padding:24px 0 26px; border-bottom:1px solid var(--divider); }
.profile-avatar { width:108px; height:108px; border-radius:50%; object-fit:cover; background:var(--accent-bg); border:1px solid var(--divider); }
.profile-main h1 { margin:0; font-size:28px; letter-spacing:-.035em; }
.handle { color:var(--muted); margin:3px 0 12px; }
.bio { line-height:1.5; font-size:14px; }
.profile-counts { display:flex; gap:22px; margin:15px 0; font-size:12px; color:var(--muted); }
.profile-counts b { color:var(--text); }
.profile-posts { margin-top:18px; }
.profile-skeleton { height:240px; border-radius:28px; }

.search-box { height:52px; border:1px solid var(--divider); border-radius:18px; background:var(--surface); display:grid; grid-template-columns:42px 1fr; align-items:center; padding:0 8px; }
.search-box>.mi { color:var(--muted); justify-self:center; }
.search-box input { border:0; background:transparent; padding:0 4px; }
.search-box input:focus { box-shadow:none; }
.search-results h2 { font-size:14px; margin:24px 0 10px; }
.person-result { display:flex; gap:11px; align-items:center; padding:10px 2px; text-decoration:none; border-bottom:1px solid var(--divider); }
.person-result>span { display:grid; gap:3px; }
.person-result small { color:var(--muted); }

.settings-page { max-width:680px; }
.settings-card { padding:18px; border:1px solid var(--divider); border-radius:22px; background:var(--surface); margin-bottom:14px; display:grid; gap:14px; }
.settings-card h2 { margin:0; font-size:15px; }
.settings-card textarea { min-height:100px; resize:vertical; }
.theme-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.theme-options button { min-height:42px; border:1px solid var(--divider); background:var(--bg); color:var(--text); border-radius:14px; cursor:pointer; }
.settings-link { min-height:48px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--divider); text-decoration:none; font-size:13px; }
.danger-zone p { color:var(--muted); font-size:12px; line-height:1.5; }
.settings-skeleton { height:360px; border-radius:24px; }

.legal-page { max-width:700px; padding-top:48px; }
.legal-page h1 { font-size:40px; letter-spacing:-.045em; margin:8px 0 14px; }
.legal-intro { font-size:17px; color:var(--muted); line-height:1.6; }
.legal-page h2 { font-size:17px; margin:28px 0 7px; }
.legal-page p { line-height:1.7; color:var(--muted); }
.legal-date { margin-top:34px; font-size:11px; }
.coming-soon { min-height:70dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; max-width:520px; }
.coming-icon { width:90px; height:90px; border-radius:50%; display:grid; place-items:center; background:var(--accent-bg); color:var(--accent); margin-bottom:18px; }
.coming-icon .mi { font-size:38px; }
.coming-soon h1 { font-size:34px; letter-spacing:-.04em; margin:10px 0; }
.coming-soon p { color:var(--muted); line-height:1.6; margin:0 0 24px; }

.empty-state { min-height:45dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:34px; }
.empty-state>.mi { color:var(--accent); font-size:42px; }
.empty-state h1 { font-size:24px; margin:10px 0 5px; }
.empty-state p { color:var(--muted); max-width:420px; line-height:1.5; }
.empty-state.compact { min-height:180px; }
.offline-banner { position:fixed; z-index:500; top:env(safe-area-inset-top); left:50%; transform:translateX(-50%); padding:8px 14px; border-radius:0 0 12px 12px; background:#2D2834; color:#fff; font-size:11px; }
.toast { position:fixed; z-index:600; left:50%; bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom)); transform:translate(-50%,16px); opacity:0; pointer-events:none; background:#25212B; color:white; padding:11px 15px; border-radius:14px; font-size:12px; transition:.18s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
#blazor-error-ui { display:none; position:fixed; bottom:0; left:0; right:0; background:#fff3cd; color:#443; padding:12px; z-index:1000; text-align:center; }

@media (max-width:780px) {
    .landing { padding:0 18px; }
    .landing-header { min-height:70px; }
    .landing-header .brand span { font-size:12px; }
    .landing-header nav>a:not(.btn) { display:none; }
    .hero { grid-template-columns:1fr; min-height:auto; padding:55px 0 40px; gap:5px; }
    .hero-copy { text-align:center; }
    .hero-copy>p { margin-left:auto; margin-right:auto; }
    .hero-actions { justify-content:center; }
    .install-note { justify-content:center; }
    .hero-visual { min-height:360px; }
    .hero-visual>img { width:220px; }
    .orb-halo { width:300px; height:300px; }
    .vc1 { left:3%; top:22%; }.vc2 { right:3%; bottom:18%; }
    .voice-card { min-width:140px; padding:10px 12px; font-size:10px; }
    .landing-features { grid-template-columns:1fr; padding-bottom:55px; }
    .landing-footer { flex-direction:column; }
    .auth-card { padding:26px 20px; border-radius:24px; }
    .auth-brand { top:18px; left:18px; }
    .profile-hero { grid-template-columns:82px 1fr; gap:15px; }
    .profile-avatar { width:80px; height:80px; }
    .post-caption,.voice-shell { margin-left:0; }
    .post-actions { margin-left:0; }
}
@media (min-width:900px) {
    .bottom-nav { left:50%; right:auto; width:680px; transform:translateX(-50%); border-left:1px solid var(--divider); border-right:1px solid var(--divider); border-radius:22px 22px 0 0; }
    .feed-page { border-left:1px solid var(--divider); border-right:1px solid var(--divider); min-height:100dvh; background:var(--surface); }
}

.profile-counts a{text-decoration:none;color:var(--muted)} .profile-counts a b{color:var(--text)} .profile-edit-avatar{display:flex;align-items:center;gap:12px}.profile-edit-avatar input[hidden]{display:none}


/* Voice reply moderation actions */
.comment-actions { display:flex; gap:.75rem; margin-top:.35rem; }
.text-action { border:0; background:transparent; color:var(--muted); padding:.2rem 0; font:inherit; font-size:.78rem; cursor:pointer; }
.text-action:hover, .text-action:focus-visible { color:var(--accent); text-decoration:underline; }
.text-action.danger-soft { color:var(--danger); }
.recorder-stage > .btn.compact { margin-top:.45rem; }

.blocked-list { display:grid; gap:.55rem; }
.blocked-person { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem; padding:.55rem 0; }
.blocked-person span { min-width:0; display:flex; flex-direction:column; }
.blocked-person small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; }


/* Persistent appearance control */
.theme-switcher {
    position: fixed;
    z-index: 350;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
}
.theme-gear {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--divider);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.theme-gear:hover,
.theme-gear:focus-visible {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--divider));
}
.theme-popover {
    position: absolute;
    top: 50px;
    right: 0;
    width: 210px;
    padding: 10px;
    border: 1px solid var(--divider);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    display: grid;
    gap: 4px;
}
.theme-popover > strong {
    padding: 7px 9px 9px;
    font-size: 12px;
}
.theme-choice {
    min-height: 44px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--text);
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    gap: 7px;
    align-items: center;
    padding: 0 10px;
    text-align: left;
    cursor: pointer;
}
.theme-choice:hover,
.theme-choice.selected {
    background: var(--accent-bg);
}
.theme-choice.selected {
    color: var(--accent);
    font-weight: 700;
}
.theme-choice .check {
    font-size: 18px;
}
.settings-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
}

/* Reserve space for the global appearance gear on pages with top-right actions. */
.feed-header,
.landing-header {
    padding-right: 54px;
}

.verify-card strong {
    color: var(--text);
}

/* Small page-entry polish; no artificial navigation delay. */
.main-content > * {
    animation: wayasay-page-in 120ms ease-out;
}
@keyframes wayasay-page-in {
    from { opacity: .72; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .main-content > * { animation: none; }
}

/* WAYASAY animated voice waveforms */
.wave-animated { width:100%; height:42px; gap:3px; justify-content:space-between; overflow:hidden; }
.wave-animated i { flex:1 1 0; min-width:2px; max-width:5px; height:var(--bar); opacity:.68; transform-origin:center; }
.wave-animated.is-playing i { animation:wayasay-wave 850ms ease-in-out infinite alternate; animation-delay:var(--delay); opacity:1; }
@keyframes wayasay-wave { 0% { transform:scaleY(.35); } 100% { transform:scaleY(1.25); } }
@media (prefers-reduced-motion:reduce) { .wave-animated.is-playing i { animation:none; } }
.inline-comments { margin:14px 0 0 52px; padding:12px 14px; border-radius:16px; background:var(--surface-2); }
.inline-comments-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; }
.inline-comments-heading a { color:var(--accent); text-decoration:none; }
.inline-comments .comment-card { grid-template-columns:34px minmax(0,1fr); }
.comment-wave-shell { display:grid; gap:6px; min-width:0; }
.comment-wave-shell audio { width:100%; min-width:0; }
@media (max-width:600px) { .inline-comments { margin-left:0; } .wave-animated { gap:2px; } }