:root{
  /* light (default) */
  --bg-primary:#ffffff;
  --bg-secondary:#f8fafc;
  --bg-card:#ffffff;
  --bg-muted:#f5f5f5;
  --bg-muted-hover:#ffffff;
  --bg-highlight:#fffdf7;
  --text-primary:#1c1a17;
  --text-secondary:#737373;
  --border:#e5e7eb;
  --input-border:#9ca3af;
  --menu-border:#d1d5db;  --primary:#0284c7;
  --primary-hover:#0369a1;
  --primary-a08:rgba(2,132,199,.08);
  --primary-a12:rgba(2,132,199,.12);
  --primary-a25:rgba(2,132,199,.25);
  --primary-a35:rgba(2,132,199,.35);
  --focus-ring:rgba(2,132,199,.35);
  --on-primary:#ffffff;
  --on-primary-a15:rgba(255,255,255,.15);
  --link:#0284c7;
  --link-hover:#0369a1;
  --danger:#991b1b;
  --danger-bg-hover:#fef2f2;  --shadow:0 1px 2px rgba(0,0,0,.06);
  --radius:8px;
  --font:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --nav-link-color:#ffffff;
  --nav-link-hover-color:#ffffff;
  --footer-link-color:var(--link);
  --badge-pill-bg:rgba(255,255,255,.15);
  --badge-pill-border:rgba(255,255,255,.25);
  --badge-pill-color:#ffffff;
  --header-pill-bg:rgba(255,255,255,.15);
  --header-pill-border:rgba(255,255,255,.25);
  --header-pill-color:#ffffff;
  --header-bg:#0284c7;
  --header-fg:#ffffff;
  --header-border:#0369a1;
  --multiquote-bar-bg:rgba(255,255,255,.92);
  --placeholder-bg:#ddd;
  --placeholder-gradient-start:#e8e4dc;
  --placeholder-gradient-end:#d8cfaf;
  --hero-from:#7dd3fc;
  --hero-to:#38bdf8;
  --hero-fg:#ffffff;
  --hero-subtle-fg:#f5f5f5;
  --hero-btn-bg:#ffffff;
  --hero-btn-bg-hover:#f5f5f5;
  --hero-btn-fg:#0284c7;
  --hero-btn-border:transparent;
  --charm-pill-bg:#f8fafc;
  --charm-pill-hover:#f1f5f9;
  --charm-pill-active-bg:#e0f2fe;
  --charm-pill-active-hover:#bae6fd;
  --charm-pill-active-ring:rgba(14,165,233,.5);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg-primary:#0f172a;
  --bg-secondary:#1e293b;
  --bg-card:#1e293b;
  --bg-muted:#334155;
  --bg-muted-hover:#475569;
  --bg-highlight:rgba(56,189,248,.15);
  --text-primary:#f8fafc;
  --text-secondary:#94a3b8;
  --border:#334155;
  --input-border:#64748b;
  --menu-border:#4b5563;  --primary:#38bdf8;
  --primary-hover:#7dd3fc;
  --primary-a08:rgba(56,189,248,.08);
  --primary-a12:rgba(56,189,248,.12);
  --primary-a25:rgba(56,189,248,.25);
  --primary-a35:rgba(56,189,248,.35);
  --focus-ring:rgba(56,189,248,.55);
  --on-primary:#0f172a;
  --on-primary-a15:rgba(15,23,42,.15);
  --link:#38bdf8;
  --link-hover:#7dd3fc;
  --danger:#f87171;
  --danger-bg-hover:rgba(239,68,68,.1);  --shadow:0 1px 2px rgba(0,0,0,.35);
  --nav-link-color:#e5e7eb;
  --nav-link-hover-color:#ffffff;
  --badge-pill-bg:var(--primary-a12);
  --badge-pill-border:var(--primary-a25);
  --badge-pill-color:var(--text-primary);
  --header-bg:#0f172a;
  --header-fg:#f8fafc;
  --header-border:#1e293b;
  --multiquote-bar-bg:rgba(15,23,42,.92);
  --placeholder-bg:#334155;
  --placeholder-gradient-start:#334155;
  --placeholder-gradient-end:#1e293b;
  --hero-from:#0c4a6e;
  --hero-to:#075985;
  --hero-fg:#ffffff;
  --hero-subtle-fg:#e2e8f0;
  --hero-btn-bg:#f1f5f9;
  --hero-btn-bg-hover:#e2e8f0;
  --hero-btn-fg:#0284c7;
  --hero-btn-border:transparent;
  --charm-pill-bg:#1e293b;
  --charm-pill-hover:#334155;
  --charm-pill-active-bg:rgba(12,74,110,.3);
  --charm-pill-active-hover:rgba(3,105,161,.4);
  --charm-pill-active-ring:rgba(56,189,248,.5);
}

html[data-theme="browncafe"]{
  --bg-primary:#bdb189;
  --bg-secondary:#bdb189;
  --bg-card:#d8cfaf;
  --bg-muted:#f5ede4;
  --bg-muted-hover:#d9d1c2;
  --bg-highlight:#fff6e6;
  --text-primary:#1c1a17;
  --text-secondary:#514f47;
  --border:#d9d1c2;
  --input-border:#a39770;
  --menu-border:#bdb189;  --primary:#613a04;
  --primary-hover:#4d2e03;
  --primary-a08:rgba(97,58,4,.08);
  --primary-a12:rgba(97,58,4,.12);
  --primary-a25:rgba(97,58,4,.25);
  --primary-a35:rgba(97,58,4,.35);
  --focus-ring:rgba(97,58,4,.55);
  --on-primary:#ffffff;
  --link:#613a04;
  --link-hover:#a69562;
  --danger:#dc2626;
  --danger-bg-hover:#fef2f2;  --shadow:0 1px 2px rgba(0,0,0,.05);
  --nav-link-color:#ffffff;
  --nav-link-hover-color:#ffffff;
  --footer-link-color:var(--text-primary);
  --header-pill-bg:rgba(252,251,248,.15);
  --header-pill-border:rgba(252,251,248,.25);
  --header-pill-color:#fcfbf8;
  --header-bg:#493d22;
  --header-fg:#ffffff;
  --header-border:#4d2e03;
  --multiquote-bar-bg:rgba(252,251,248,.92);
  --hero-from:#aaa282;
  --hero-to:#766a4f;
  --hero-fg:#1c1a17;
  --hero-subtle-fg:#f5ede4;
  --hero-btn-bg:#d8cfaf;
  --hero-btn-bg-hover:#f5ede4;
  --hero-btn-fg:#613a04;
  --hero-btn-border:transparent;
  --charm-pill-bg:#d8cfaf;
  --charm-pill-hover:#f5ede4;
  --charm-pill-active-bg:#f8eddc;
  --charm-pill-active-hover:#efd6b1;
  --charm-pill-active-ring:rgba(166,149,98,.5);
}

html[data-theme="matrix"]{
  color-scheme:dark;
  --bg-primary:#020a04;
  --bg-secondary:#000000;
  --bg-card:rgba(0,12,4,.88);
  --bg-muted:rgba(0,255,65,.08);
  --bg-muted-hover:rgba(0,255,65,.14);
  --bg-highlight:rgba(0,255,65,.18);
  --text-primary:#d4ffe2;
  --text-secondary:rgba(212,255,226,.72);
  --border:rgba(0,255,65,.22);
  --input-border:rgba(0,255,65,.5);
  --menu-border:rgba(0,255,65,.35);  --primary:#00ff41;
  --primary-hover:#7cffb4;
  --primary-a08:rgba(0,255,65,.08);
  --primary-a12:rgba(0,255,65,.12);
  --primary-a25:rgba(0,255,65,.25);
  --primary-a35:rgba(0,255,65,.35);
  --focus-ring:rgba(0,255,65,.55);
  --on-primary:#001208;
  --on-primary-a15:rgba(0,18,8,.15);
  --link:#00ff41;
  --link-hover:#7dff99;
  --danger:#ff6b6b;
  --danger-bg-hover:rgba(255,107,107,.08);  --shadow:0 1px 2px rgba(0,0,0,.55);
  --nav-link-color:var(--text-primary);
  --nav-link-hover-color:var(--link);
  --footer-link-color:var(--link);
  --badge-pill-bg:var(--primary-a12);
  --badge-pill-border:var(--primary-a25);
  --badge-pill-color:var(--text-primary);
  --header-pill-bg:rgba(0,255,65,.12);
  --header-pill-border:rgba(0,255,65,.25);
  --header-pill-color:var(--text-primary);
  --header-bg:rgba(0,0,0,.86);
  --header-fg:var(--text-primary);
  --header-border:rgba(0,255,65,.22);
  --multiquote-bar-bg:rgba(0,0,0,.92);
  --placeholder-bg:#072113;
  --placeholder-gradient-start:#0a2b16;
  --placeholder-gradient-end:#000000;
  --hero-from:#002b12;
  --hero-to:#001307;
  --hero-fg:var(--text-primary);
  --hero-subtle-fg:rgba(212,255,226,.85);
  --hero-btn-bg:rgba(0,255,65,.92);
  --hero-btn-bg-hover:#00ff41;
  --hero-btn-fg:var(--on-primary);
  --hero-btn-border:transparent;
  --charm-pill-bg:rgba(0,12,4,.88);
  --charm-pill-hover:rgba(0,255,65,.14);
  --charm-pill-active-bg:rgba(0,255,65,.12);
  --charm-pill-active-hover:rgba(0,255,65,.25);
  --charm-pill-active-ring:rgba(0,255,65,.5);
  --font:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html[data-theme="matrix"] body{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(0,255,65,.10), transparent 55%),
    radial-gradient(1000px 700px at 80% 0%, rgba(0,255,65,.07), transparent 52%),
    radial-gradient(900px 650px at 50% 100%, rgba(0,255,65,.06), transparent 60%),
    var(--bg-secondary);
}

html[data-theme="matrix"] #matrix-rain{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:-1;
  opacity:.28;
}

html[data-theme="matrix"] .btn-primary{box-shadow:0 0 0 1px rgba(0,255,65,.25),0 0 18px rgba(0,255,65,.18)}

@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))){
  html[data-theme="matrix"] .card,
  html[data-theme="matrix"] .board,
  html[data-theme="matrix"] .notif-menu,
  html[data-theme="matrix"] .nav-user-menu,
  html[data-theme="matrix"] .modal{
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
}

@media (prefers-reduced-motion: reduce){
  html[data-theme="matrix"] #matrix-rain{display:none!important}
}

html,body{height:100%}
html{overflow:hidden;height:100%;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg-secondary);color:var(--text-primary);min-height:100%;overflow-x:hidden;overflow-y:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
.site-footer a{color:var(--footer-link-color)}
.footer-link-btn{border:none;background:transparent;color:var(--footer-link-color);padding:0;font:inherit;cursor:pointer}
.footer-link-btn:hover{text-decoration:none}
input[type="checkbox"],input[type="radio"],input[type="range"],progress{accent-color:var(--primary)}
mark{background:var(--bg-highlight);color:inherit;padding:0 .12em;border-radius:.2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.nav-link{color:var(--nav-link-color);opacity:.92}
.nav-link:hover{opacity:1;text-decoration:none;color:var(--nav-link-hover-color)}
html[data-theme="browncafe"] .site-header .nav-link:hover{text-decoration:none}
html[data-theme="browncafe"] .site-header{border-bottom-width:2px}
html[data-theme="browncafe"] a:hover{color:var(--link-hover);text-decoration:none}
html[data-theme="browncafe"] .site-header a,html[data-theme="browncafe"] .site-header button,html[data-theme="browncafe"] .site-header span{color:#ffffff}
html[data-theme="browncafe"] .nav-user-menu a{color:var(--text-secondary)}
html[data-theme="browncafe"] .nav-user-menu button{color:var(--text-secondary)}
html[data-theme="browncafe"] .nav-user-menu a:hover,html[data-theme="browncafe"] .nav-user-menu button:hover{color:var(--text-primary)}
html[data-theme="browncafe"] .card{background:#d8cfaf;box-shadow:0 1px 2px rgba(0,0,0,.05)}
html[data-theme="browncafe"] .category-card-header{background:transparent}
html[data-theme="browncafe"] .board{background:#d8cfaf}
html[data-theme="browncafe"] .board-title{background:#995e18;color:#ffffff}
.site-logo{width:32px;height:32px;object-fit:contain;flex:0 0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);color:var(--header-fg);border-bottom:1px solid var(--header-border)}
.site-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.125rem;color:inherit}
.site-brand:hover{text-decoration:none}
.site-header-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:1rem}
.site-nav{display:contents}
.site-nav-links{grid-column:2;justify-self:center;display:flex;align-items:center;gap:2rem;font-size:.875rem;min-width:0}
.site-nav-links .nav-link{white-space:nowrap}
.site-nav-mobile{display:none}
.site-header-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:1rem;font-size:.875rem}
.nav-desktop-only{display:inline-flex}
.nav-mobile-only{display:none}
.site-header .btn-secondary{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:inherit}
.site-header .btn-secondary:hover{background:rgba(255,255,255,.2);text-decoration:none}
.site-header .btn-primary{background:rgba(255,255,255,.92);color:var(--primary);border-color:rgba(255,255,255,.75)}
.site-header .btn-primary:hover{background:#ffffff;text-decoration:none}
html[data-theme="browncafe"] .site-header .btn-primary{background:#613a04;color:#ffffff;border-color:#613a04}
html[data-theme="browncafe"] .site-header .btn-primary:hover{background:#4d2e03}

/* Keep authenticated desktop nav on one line (avoid “two columns”) */
header[data-auth="1"] .site-nav-links{gap:1.25rem}
.nav-user-name{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width: 900px){header[data-auth="1"] .nav-user-name{display:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-toggle-svg{width:24px;height:24px;display:block}
.nav-toggle-icon{display:inline-flex;align-items:center;justify-content:center}
.nav-toggle-icon-close{display:none}
header[data-nav-open="1"] .nav-toggle-icon-open{display:none}
header[data-nav-open="1"] .nav-toggle-icon-close{display:inline-flex}

.nav-icon-svg{width:24px;height:24px;display:block}
.nav-icon{display:inline-flex;align-items:center;justify-content:center}
.nav-icon-unread{display:none}
[data-unread="1"] .nav-icon-unread{display:inline-flex}
[data-unread="1"] .nav-icon-read{display:none}
.nav-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.5rem;border-radius:.375rem;border:1px solid transparent;background:transparent;color:rgba(255,255,255,.92);cursor:pointer;line-height:1}
.nav-icon-btn:hover{text-decoration:none;color:#ffffff;background:rgba(255,255,255,.12)}
.nav-icon-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.nav-badge{position:absolute;top:.1rem;right:.1rem;min-width:20px;height:20px;padding:0 .35rem;border-radius:999px;background:#dc2626;color:#fff;font-size:.75rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--header-bg);box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:10}

.nav-notifications{position:relative}
.notif-menu{display:none;position:absolute;right:0;top:calc(100% + .5rem);width:20rem;max-width:calc(100vw - 2rem);background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);overflow:hidden;z-index:1000}
header[data-notifications-open="1"] .notif-menu{display:block}
.notif-menu-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.notif-menu-header .font-bold{font-size:1.05rem;font-weight:600}
.notif-menu-action{background:transparent;border:0;padding:0;color:var(--primary);font-size:.8125rem;font-weight:500;cursor:pointer}
.notif-menu-action:hover{color:var(--primary-hover);text-decoration:none}
.notif-menu-body{max-height:24rem;overflow-y:auto}
.notif-menu-empty{padding:1rem;color:var(--text-secondary);font-size:.875rem;text-align:center}
.notif-item{display:block;padding:.75rem 1rem;border-bottom:1px solid var(--border);text-decoration:none;transition:background .15s}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--bg-muted);text-decoration:none}
.notif-item-title{font-weight:500;font-size:.875rem;color:var(--text-primary);overflow-wrap:anywhere;word-break:break-word}
.notif-item-body{margin-top:.25rem;color:var(--text-secondary);font-size:.8125rem;overflow-wrap:anywhere;word-break:break-word}
.notif-item-meta{margin-top:.25rem;font-size:.75rem;color:var(--text-secondary);opacity:.75}
.notif-item-unread{background:var(--primary-a08)}
.notif-menu-footer{display:block;padding:.75rem 1rem;text-align:center;font-size:.875rem;color:var(--primary);font-weight:500;border-top:1px solid var(--border);text-decoration:none}
.notif-menu-footer:hover{color:var(--primary-hover);text-decoration:none}

.nav-user{position:relative}
.nav-user-toggle{display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:0;color:rgba(255,255,255,.92);cursor:pointer;padding:.25rem;border-radius:.5rem}
.nav-user-toggle:hover{color:#ffffff;background:rgba(255,255,255,.12)}
.nav-user-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.nav-user-avatar{width:32px;height:32px;border-radius:999px;background:var(--bg-muted);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.nav-user-avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.nav-user-avatar-fallback{font-weight:800}
.nav-user-name{font-weight:700}
	.nav-user-caret{width:16px;height:16px;opacity:.85}
	.nav-user-menu{display:none;position:absolute;right:0;top:calc(100% + .5rem);width:12rem;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);border-radius:.375rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);padding:.25rem 0;z-index:1000}
	.nav-user[open] .nav-user-menu{display:block}
	.nav-user-toggle{list-style:none}
	.nav-user-toggle::-webkit-details-marker{display:none}
	.nav-user-item{display:block;padding:.5rem 1rem;color:var(--text-secondary);text-decoration:none;font-size:.875rem}
	.nav-user-item:hover{background:var(--bg-muted);text-decoration:none}
	.nav-user-divider{height:0;border:0;border-top:1px solid var(--border);margin:.25rem 0}
	.nav-user-item-button{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;font-size:.875rem;color:var(--text-secondary)}
	.nav-user-item-button:hover{background:var(--bg-muted);color:var(--text-primary)}
	.nav-user-logout{margin:0}

/* “utility-ish” classes used in templates */
.max-w-md{max-width:28rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.mx-auto{margin-left:auto;margin-right:auto}
.block{display:block}
.w-full{width:100%}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.mt-1{margin-top:.25rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.ml-2{margin-left:.5rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-center{text-align:center}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.underline{text-decoration:underline}
.flex{display:flex}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.inline-flex{display:inline-flex}
.space-y-3>*+*{margin-top:.75rem}
.space-y-6>*+*{margin-top:1.5rem}
.rounded-lg{border-radius:.5rem}
.border-b{border-bottom:1px solid var(--border)}
.border-border-primary{border-color:var(--border)}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-red-600{color:#dc2626}
.text-primary-600{color:var(--primary)}
.text-text-primary{color:var(--text-primary)}
.text-text-secondary{color:var(--text-secondary)}
.bg-background-primary{background:var(--bg-primary)}
.bg-background-secondary{background:var(--bg-secondary)}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}

.btn-primary,.btn-secondary{border-radius:.5rem;border:1px solid var(--border);font-weight:600;cursor:pointer;line-height:1.25rem}
.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);text-decoration:none}
.btn-secondary{background:var(--bg-muted);color:var(--text-primary)}
.btn-secondary:hover{background:var(--bg-muted-hover);text-decoration:none}
.btn-secondary:disabled,.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary.disabled{opacity:.5;pointer-events:none}

.input{width:100%;max-width:32rem;padding:.6rem .75rem;border-radius:.5rem;border:1px solid var(--input-border);font-size:.95rem;background:var(--bg-card);color:var(--text-primary)}
.input::placeholder{color:var(--text-secondary);opacity:.85}
.input:focus{outline:2px solid var(--focus-ring);border-color:var(--primary)}

input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="url"],input[type="tel"],input[type="date"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="time"],textarea,select{border-color:var(--input-border);background:var(--bg-card);color:var(--text-primary)}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="url"]:focus,input[type="tel"]:focus,input[type="date"]:focus,input[type="datetime-local"]:focus,input[type="month"]:focus,input[type="week"]:focus,input[type="time"]:focus,textarea:focus,select:focus{outline:2px solid var(--focus-ring);border-color:var(--primary)}
input::placeholder,textarea::placeholder{color:var(--text-secondary);opacity:.85}

.board-grid{display:grid;gap:1rem}
@media (min-width: 768px){.board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.board{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden}
.board-title{background:var(--cat-accent, var(--primary));color:var(--cat-accent-fg, var(--on-primary));padding:.5rem 1rem;font-weight:700;font-size:.95rem}
.board-title a{color:inherit;display:flex;align-items:center;gap:.5rem}
.board-title a:hover{text-decoration:none}
.board-icon{width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.4rem;background:var(--cat-accent-icon-bg, var(--on-primary-a15));flex:0 0 auto}
.board-icon svg{width:1.05rem;height:1.05rem;display:block}
.board-description{padding:1rem}
.board-stats{padding:0 1rem 1rem 1rem}

/* Category list (parity with overworkt.com) */
.category-list{display:flex;flex-direction:column;gap:1rem}
.category-card{overflow:hidden}
.category-card-header{padding:1rem;background:var(--bg-muted);display:flex;flex-direction:column;gap:.75rem}
.category-card-header-with-children{border-bottom:1px solid var(--border)}
.category-card-main{min-width:0}
.category-card-title-row{display:flex;align-items:flex-start;gap:.75rem}
.category-icon-box{width:40px;height:40px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.category-icon-box svg{width:20px;height:20px;display:block}
.category-card-title-block{min-width:0}
.category-card-title{font-size:1.125rem;font-weight:700;color:var(--text-primary);text-decoration:none}
.category-card-title:hover{color:var(--link);text-decoration:none}
.category-card-desc{margin:.2rem 0 0 0;font-size:.875rem;color:var(--text-secondary)}
.category-card-stats{display:flex;gap:1rem;flex-wrap:wrap}

.subcategory-list{display:flex;flex-direction:column}
.subcategory-row{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding:1rem;border-top:1px solid var(--border);background:var(--bg-card)}
.subcategory-row:first-child{border-top:none}
.subcategory-row:hover{background:var(--bg-highlight)}
.subcategory-name{flex:1;min-width:0}
.subcategory-link{font-weight:500;color:var(--text-primary);text-decoration:none;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subcategory-link:hover{color:var(--link);text-decoration:none}
.subcategory-counts{display:none;flex:0 0 8.5rem}
.subcategory-latest{min-width:0;flex:1}
.subcategory-latest-title{font-size:.875rem;font-weight:600;color:var(--text-primary);text-decoration:none;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:1}
.subcategory-latest-title:hover{color:var(--link);text-decoration:none}
.subcategory-latest-meta{margin-top:.2rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.subcategory-avatar-link{display:none;flex:0 0 auto}
.avatar.subcat-avatar{width:48px;height:48px}
.subcat-avatar-fallback{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-secondary)}
.subcat-avatar-spacer{width:48px;height:48px}
.subcat-date-full{display:none}
.subcat-date-short{display:inline}
.subcat-sep{opacity:.7}

@media (min-width: 640px){
  .category-card-header{flex-direction:row;align-items:center;justify-content:space-between}
  .category-card-stats{flex-direction:column;align-items:flex-end;gap:.2rem;flex-wrap:nowrap}
  .subcategory-row{flex-direction:row;align-items:center;gap:1rem}
  .subcategory-latest{text-align:right}
  .subcategory-latest-meta{justify-content:flex-end}
  .subcategory-avatar-link{display:block}
  .subcat-date-full{display:inline}
  .subcat-date-short{display:none}
}

@media (min-width: 768px){
  .subcategory-counts{display:block}
}

/* Home hero */
.hero{background:linear-gradient(90deg,var(--hero-from),var(--hero-to));color:var(--hero-fg);border-radius:var(--radius);padding:2rem;margin-bottom:2rem}
.hero-title{margin:0 0 1rem 0;font-size:1.875rem;line-height:2.25rem;font-weight:700}
.hero-lede{margin:0 0 .5rem 0;font-size:1.125rem;line-height:1.75rem;color:var(--hero-subtle-fg)}
.hero-lede:last-of-type{margin-bottom:1.5rem}
.hero-cta{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:.375rem;border:1px solid transparent;background:var(--hero-btn-bg);color:var(--hero-btn-fg);font-size:.875rem;font-weight:500;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);transition:color .2s,background-color .2s,border-color .2s}
.hero-cta:hover{background:var(--hero-btn-bg-hover);text-decoration:none}
.hero-cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (max-width: 640px){
  .hero{padding:1.5rem}
  .hero-title{font-size:1.5rem;line-height:2rem}
  .hero-lede{font-size:1rem}
}
.subcats{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.5rem}

/* Apps page */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.apps-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
.apps-card:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.08);text-decoration:none}
.apps-card-icon{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}
.apps-card-icon svg{width:24px;height:24px}
.apps-card-body{flex:1;min-width:0}
.apps-card-title{font-weight:600;font-size:.95rem}
.apps-card-desc{margin-top:.2rem;line-height:1.4}
.apps-card-badge{flex-shrink:0;align-self:flex-start}
.subcat{display:inline-block;padding:.15rem .5rem;border:1px solid var(--border);border-radius:999px;background:var(--bg-muted);font-size:.8rem}
.subcat:hover{text-decoration:none;background:var(--bg-muted-hover)}
.thread-tags{margin-top:.25rem;display:flex;flex-wrap:wrap;gap:.5rem}
.tag-pill{display:inline-block;padding:.15rem .5rem;border:1px solid var(--border);border-radius:999px;background:var(--bg-muted);font-size:.8rem}
.tag-pill:hover{text-decoration:none;background:var(--bg-muted-hover)}

.thread-list{display:flex;flex-direction:column}
.p-6 > .thread-list{margin-left:-1.5rem;margin-right:-1.5rem;margin-bottom:-1.5rem}
.thread-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-top:1px solid var(--border)}
.p-6 > .thread-list > .thread-row{padding-left:1.5rem;padding-right:1.5rem}
.p-6 > .thread-list > .thread-row:last-child{border-bottom-left-radius:var(--radius,0.5rem);border-bottom-right-radius:var(--radius,0.5rem)}
.thread-row:first-child{border-top:none}
.thread-row:hover{background:var(--bg-highlight)}
.thread-main{min-width:0}
.thread-title{font-weight:400;overflow-wrap:anywhere;word-break:break-word}
.thread-title-unread{font-weight:700}
.thread-title:hover{text-decoration:none}
.thread-meta{margin-top:.25rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.thread-meta span{opacity:.8}
.thread-preview{margin-top:.35rem;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
.thread-stats{white-space:nowrap;align-self:center}

/* Category thread list (advanced) */
.category-thread-tools{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap}
.category-thread-tools-left{display:flex;flex-direction:column;gap:.1rem}
.category-thread-tools-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}
.category-sort{padding:.25rem .5rem;font-size:.9rem;min-width:14rem}

.thread-row-advanced{align-items:center}
.thread-avatar-link{flex:0 0 auto}
.thread-avatar-spacer{width:48px;height:48px}
.thread-row-advanced .avatar{width:48px;height:48px}
.thread-row-advanced .avatar-placeholder{font-size:1.05rem}
.thread-avatar-fallback{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-secondary)}
.thread-main-advanced{flex:1;min-width:0}
.thread-title-line{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.thread-title-left{min-width:0}
.thread-title-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.25rem}
.thread-list-advanced .thread-title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}
.thread-pages{display:flex;align-items:center;gap:.35rem;white-space:nowrap;flex:0 0 auto}
.thread-page-link{display:inline-flex;align-items:center;justify-content:center;min-width:1.6rem;height:1.6rem;padding:0 .35rem;border:1px solid var(--border);border-radius:.4rem;background:var(--bg-muted);font-size:.75rem;color:var(--text-secondary);text-decoration:none}
.thread-page-link:hover{background:var(--bg-muted-hover);text-decoration:none}
.thread-page-ellipsis{color:var(--text-secondary);opacity:.7}
.thread-stats-advanced{white-space:nowrap;align-self:center;text-align:right;min-width:9rem}
.thread-meta-mobile-only{display:none}

@media (min-width: 640px){
  .thread-list-advanced .thread-title{-webkit-line-clamp:1}
}

.badge{display:inline-block;padding:.1rem .4rem;border-radius:999px;border:1px solid var(--border);background:var(--bg-muted);font-size:.72rem}
.badge-featured{background:var(--badge-pill-bg);border-color:var(--badge-pill-border);color:var(--badge-pill-color)}
.badge-pill{margin-left:.35rem;background:var(--badge-pill-bg);border-color:var(--badge-pill-border);color:var(--badge-pill-color)}
.site-header .badge-pill{background:var(--header-pill-bg);border-color:var(--header-pill-border);color:var(--header-pill-color)}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;font-size:.875rem;background:var(--bg-card);border-radius:.5rem;padding:.75rem 1rem;margin-bottom:.75rem;border:1px solid var(--border);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.breadcrumb a{color:var(--text-secondary);text-decoration:none;display:flex;align-items:center}
.breadcrumb a:hover{color:var(--primary);text-decoration:underline}
.breadcrumb-sep{color:var(--text-tertiary,var(--text-secondary));margin:0 .5rem;width:1rem;height:1rem;flex-shrink:0}
.breadcrumb-current{color:var(--text-primary);font-weight:500}
.breadcrumb-icon{width:1rem;height:1rem;flex-shrink:0;margin-right:.25rem}
[data-theme="browncafe"] .breadcrumb{border-color:var(--border);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
[data-theme="browncafe"] .breadcrumb a{color:var(--primary)}
[data-theme="browncafe"] .breadcrumb a:hover{color:var(--link-hover)}
[data-theme="browncafe"] .breadcrumb-sep{color:#a39770}
.thread-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}
.thread-toolbar-items{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}
.thread-toolbar-more{margin-left:auto;flex-shrink:0}

.settings-layout{display:flex;flex-direction:column;gap:2rem}
@media(min-width:768px){.settings-layout{flex-direction:row}}
.settings-sidebar{display:flex;flex-direction:row;gap:.25rem;flex-wrap:wrap;width:100%}
@media(min-width:768px){.settings-sidebar{flex-direction:column;width:16rem;flex-shrink:0}}
.settings-sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:.5rem;color:var(--text-secondary);text-decoration:none;transition:background-color .15s,color .15s;white-space:nowrap}
.settings-sidebar-link:hover{background:var(--bg-muted);color:var(--text-primary)}
.settings-sidebar-link.active{background:var(--primary-a12,rgba(59,130,246,.1));color:var(--primary)}
.settings-sidebar-icon{width:1.25rem;height:1.25rem;flex-shrink:0}
.settings-content{flex:1;min-width:0}

.post-list{display:flex;flex-direction:column;gap:1rem}
.post{overflow:visible;scroll-margin-top:5rem}
.post-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem 0 1rem}
.post-user{display:flex;align-items:flex-start;gap:.75rem;min-width:0;flex:1}
.post-user-info{min-width:0;display:flex;flex-direction:column}
.post-user-name{display:flex;align-items:center;gap:.5rem;min-width:0}
.post-meta-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.post-number-link{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;color:var(--text-tertiary,var(--text-secondary));transition:color .2s}
.post-number-link:hover{color:var(--primary)}
@media(min-width:640px){.post-number-link{font-size:.875rem}}
.post-content{padding:1rem;overflow-wrap:anywhere;word-break:break-word;overflow:hidden}
.post-actions{padding:0 1rem 1rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.post-actions-left{display:flex;align-items:center;gap:.375rem;min-width:0;flex-wrap:wrap;flex:1 1 0}
.post-actions-right{display:flex;align-items:center;gap:.25rem;flex-shrink:0}
.post-action-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;font-size:.875rem;line-height:1;color:var(--text-secondary);border:none;background:none;border-radius:.5rem;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap}
.post-action-btn:hover{color:var(--primary);background:var(--bg-muted)}
.post-action-danger{color:var(--danger,#dc2626)}
.post-action-danger:hover{color:#b91c1c;background:var(--danger-bg-hover,#fef2f2)}
.post-action-report:hover{color:var(--danger,#dc2626);background:var(--danger-bg-hover,#fef2f2)}
.post-action-icon{width:1rem;height:1rem;flex-shrink:0}
.post-action-label{display:none}
@media(min-width:640px){.post-action-label{display:inline}}
.post-actions-desktop{display:none}
.post-actions-mobile{position:relative}
@media(min-width:640px){.post-actions-desktop{display:flex;align-items:center;gap:.25rem}.post-actions-mobile{display:none}}
.post-overflow-toggle{padding:.5rem;border-radius:.5rem}
.post-overflow-menu{display:none;position:absolute;right:0;top:100%;margin-top:.25rem;width:12rem;background-color:var(--bg-card);border:1px solid var(--menu-border);border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);padding:.25rem 0;z-index:40}
.post-overflow-menu.open{display:block}
.post-overflow-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem 1rem;font-size:.875rem;color:var(--text-primary);background:none;border:none;cursor:pointer;text-decoration:none;text-align:left}
.post-overflow-item:hover{background:var(--bg-muted)}
.post-overflow-danger{color:var(--danger,#dc2626)}
.post-overflow-danger:hover{color:#b91c1c;background:var(--danger-bg-hover,#fef2f2)}
.post-overflow-divider{border-top:1px solid var(--border);margin:.25rem 0}
.blocked-post-details{margin-top:.5rem}
.blocked-post-details>summary{cursor:pointer}
.blocked-post-body{margin-top:.75rem}
.blocked-thread-details{margin-top:.35rem}
.blocked-thread-details>summary{cursor:pointer}
.blocked-thread-body{margin-top:.35rem;overflow-wrap:anywhere;word-break:break-word}
.reaction-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.reaction-form{display:inline}
.reaction-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border);background:var(--bg-muted);border-radius:999px;padding:.2rem .55rem;font-size:.9rem;cursor:pointer}
.reaction-btn:hover{background:var(--bg-muted-hover)}
.reaction-active{border-color:var(--primary);background:var(--bg-muted-hover)}
.reaction-count{font-size:.75rem;color:var(--text-secondary)}
.reaction-pill{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border);background:var(--bg-muted);border-radius:999px;padding:.2rem .55rem;font-size:.85rem;color:var(--text-secondary)}
.charm-bar{align-items:center}
	.charm-pills{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;min-width:0}
	.charm-pill{display:inline-flex;align-items:center;gap:.375rem;border:1px solid var(--border);background:var(--charm-pill-bg);border-radius:9999px;padding:.375rem .625rem;font-size:.875rem;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:all .2s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative}
	.charm-pill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}
	.charm-pill:hover{background:var(--charm-pill-hover);box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
	.charm-pill-active{border-color:transparent;background:var(--charm-pill-active-bg);box-shadow:0 0 0 2px var(--charm-pill-active-ring),0 1px 2px rgba(0,0,0,.05)}
	.charm-pill-active:hover{background:var(--charm-pill-active-hover)}
	.charm-icon{width:16px;height:16px;vertical-align:middle;flex:0 0 auto;pointer-events:none;-webkit-touch-callout:none;user-select:none}
	.charm-choice .charm-icon{width:24px;height:24px}
	.charm-count{font-size:.875rem;font-weight:700;color:var(--text-secondary)}
	.charm-give-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .2s;flex:0 0 auto;padding:4px}
	.charm-give-icon svg{width:28px;height:28px}
	.charm-give-icon:hover{color:var(--text-primary);box-shadow:0 0 0 2px var(--primary-a35);transition:box-shadow .2s,color .2s}
	.charm-give-icon-active{color:var(--primary)}
	.charm-give-icon-active:hover{color:var(--primary-hover,var(--primary))}
.post-highlight{outline:3px solid var(--primary-a25)}
.post:target{outline:3px solid var(--primary-a25)}
.post-new{border-color:var(--primary-a35);box-shadow:0 0 0 3px var(--primary-a12)}

.modal-open{overflow:hidden}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:60}
.modal{position:fixed;z-index:61;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 2rem));max-height:calc(100vh - 2rem);overflow:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal-wide{width:min(960px,calc(100% - 2rem))}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:1px solid var(--border);background:var(--bg-muted)}
.modal-body{padding:1rem}

/* Cookie consent */
@keyframes cookie-slide-up{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
body[data-cookie-banner-open="1"]{padding-bottom:6.5rem;padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
body[data-multiquote-open="1"][data-cookie-banner-open="1"]{padding-bottom:10.75rem;padding-bottom:calc(10.75rem + env(safe-area-inset-bottom))}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:95;border-top:1px solid var(--border);background:var(--bg-card);box-shadow:0 -16px 40px rgba(0,0,0,.12);padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));animation:cookie-slide-up .2s ease both}
.cookie-banner-inner{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between}
.cookie-banner-main{flex:1;min-width:0}
.cookie-banner-title{font-weight:800;margin-bottom:.25rem}
.cookie-banner-text{margin:.25rem 0 0 0}
.cookie-banner-link{color:var(--link);margin-left:.25rem}
.cookie-banner-link:hover{text-decoration:none}
.cookie-banner-customize{margin-top:.4rem;border:none;background:transparent;color:var(--link);padding:0;font-size:.9rem;text-decoration:none;cursor:pointer}
.cookie-banner-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cookie-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:120}
.cookie-modal{position:fixed;z-index:121;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100% - 2rem));max-height:calc(100vh - 2rem);overflow:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;box-shadow:0 20px 60px rgba(0,0,0,.35);outline:none}
.cookie-modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:1px solid var(--border);background:var(--bg-muted)}
.cookie-modal-body{padding:1rem}
.cookie-pref{border:1px solid var(--border);border-radius:.75rem;padding:.75rem;background:var(--bg-primary);margin-bottom:.75rem}
.cookie-pref-row{display:flex;gap:.75rem;align-items:flex-start}
.cookie-pref-row input{margin-top:.2rem}
.cookie-pref-name{display:block;font-weight:700}
.cookie-pref-desc{display:block;margin-top:.1rem}
.cookie-modal-actions{display:flex;gap:.5rem;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:1rem}

@media (max-width: 640px){
  .cookie-banner-inner{flex-direction:column;align-items:stretch}
  .cookie-banner-actions{justify-content:flex-start}
  .cookie-banner-actions button{flex:1}
}

@media (max-width: 768px){.modal{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;margin:1rem;max-height:calc(100vh - 2rem)}}
.charm-picker-modal{width:min(420px,calc(100% - 2rem))}
.charm-picker-inner{padding:1rem 1.5rem 1.5rem}
.charm-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.charm-picker-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0}
.charm-picker-close{display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.5rem;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;transition:background .15s,color .15s}
.charm-picker-close:hover{background:var(--bg-muted-hover);color:var(--text-primary)}
.charm-picker-hint{margin-top:1rem;font-size:.875rem;color:var(--text-secondary);text-align:center}
.charm-picker-restricted{margin-top:.5rem;font-size:.75rem;color:var(--danger);text-align:center}
.charm-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem .75rem;max-width:24rem;margin:0 auto}
@media (max-width: 480px){.charm-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}}
	.charm-choice{display:flex;align-items:center;justify-content:center;border:none;background:var(--bg-muted);border-radius:.5rem;padding:.625rem;cursor:pointer;transition:all .2s}
.charm-choice:hover{background:var(--bg-muted-hover);transform:scale(1.1)}
.charm-choice:hover .charm-icon{transform:rotate(30deg) scale(1.5);transition:transform .2s}
.charm-choice:disabled{opacity:.5;cursor:not-allowed;transform:none}
.charm-choice-active{background:var(--primary-a12);box-shadow:0 0 0 2px var(--primary);transform:scale(1.1)}
.charm-users-modal{width:min(400px,calc(100% - 2rem))}
.charm-users-inner{padding:1rem 1.5rem 1.5rem}
.charm-users-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.charm-users-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0;display:flex;align-items:center;gap:.5rem}
.charm-users-body{display:flex;flex-direction:column;gap:.5rem;max-height:24rem;overflow-y:auto}
.charm-user-row{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:.5rem;transition:background .15s}
.charm-user-row:hover{text-decoration:none;background:var(--bg-muted)}
.charm-user-row .avatar{width:2.5rem;height:2.5rem;border-radius:9999px;object-fit:cover;flex:0 0 auto}
.charm-user-row .avatar-placeholder{width:2.5rem;height:2.5rem;border-radius:9999px;background:var(--bg-muted);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.charm-user-info{flex:1;min-width:0}
.charm-user-display{font-size:.875rem;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.charm-user-handle{font-size:.875rem;color:var(--text-secondary)}

.history-layout{display:flex;flex-direction:column;gap:1rem}
.history-list{min-width:0}
.history-detail{min-width:0}
.history-link{display:block;padding:.5rem .6rem;border:1px solid transparent;border-radius:.6rem}
.history-link:hover{text-decoration:none;background:var(--bg-muted)}
.history-link-active{border-color:var(--primary);background:var(--bg-muted)}
.history-link-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.history-link-main{min-width:0}
.history-link-title{font-weight:600;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.history-link-reason{margin-top:.15rem;overflow-wrap:anywhere;word-break:break-word}
.history-beforeafter{margin-top:1rem}
.history-beforeafter>summary{cursor:pointer}
.history-sides{display:flex;flex-direction:column;gap:1rem;margin-top:.75rem}
.history-side{border:1px solid var(--border);border-radius:.75rem;overflow:hidden}
.history-side .post-content{padding:.85rem}
@media (min-width: 900px){.history-layout{flex-direction:row}.history-list{flex:0 0 320px}.history-detail{flex:1}}
@media (min-width: 900px){.history-sides{flex-direction:row}.history-side{flex:1}}

.diff-block{border:1px solid var(--border);background:var(--bg-muted);border-radius:.75rem;padding:.75rem;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9rem;line-height:1.4}
.diff-del{background:rgba(220,38,38,.12);color:var(--text-primary)}
.diff-ins{background:rgba(34,197,94,.12);text-decoration:none}

.avatar{width:32px;height:32px;border-radius:999px;object-fit:cover;background:var(--placeholder-bg);flex:0 0 auto}
.avatar-lg{width:64px;height:64px}
.avatar-placeholder{background:linear-gradient(135deg,var(--placeholder-gradient-start),var(--placeholder-gradient-end))}
.avatar-fallback{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-secondary)}
.avatar-lg.avatar-fallback{font-size:2rem}

.profile-card .profile-header{display:flex;gap:1rem;align-items:flex-start}
.grid-2{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width: 900px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

.list{list-style:none;padding:0;margin:0}
.list-row{padding:.5rem 0;border-top:1px solid var(--border)}
.list-row:first-child{border-top:none}
.notification{padding:.75rem 0}
.notification-unread{background:var(--bg-highlight)}
.notification-unread .thread-title{color:var(--link);font-weight:600}
.notif-dot{display:inline-block;width:.5rem;height:.5rem;background:var(--primary);border-radius:9999px;flex-shrink:0}
.notif-item-unread .notif-item-title{font-weight:600}

/* Notification page row highlights */
.notif-row-unread{background:var(--primary-a08)}
.notif-row-unread:hover{background:var(--primary-a12)}
.notif-row-unread .thread-title{font-weight:600;color:var(--link)}
.notif-type-label{display:inline-block;padding:1px 6px;font-size:.6875rem;font-weight:500;border-radius:4px;background:var(--bg-muted);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}

.message-row{display:flex;gap:.75rem;align-items:flex-start}
.message-main{flex:1;min-width:0}
.message-left{flex:0 0 auto}
.badge-muted{background:var(--bg-muted);color:var(--text-secondary)}
.badge-premium{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:0.7rem;padding:1px 5px;border-radius:var(--radius)}

.message-thread{display:flex;flex-direction:column;gap:1rem}
.message-bubble{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:.75rem}
.message-out{background:var(--bg-highlight);border-color:var(--primary-a25)}
.message-meta{margin-bottom:.25rem}

/* Chat interface */
.chat-card{padding:0;overflow:hidden}
.chat-messages{display:flex;flex-direction:column;gap:2px;padding:1rem 1rem .75rem}
.chat-row{display:flex;align-items:flex-end;gap:.5rem;max-width:85%}
.chat-row--me{margin-left:auto;flex-direction:row-reverse}
.chat-row--them{margin-right:auto}
.chat-row--grouped{margin-top:-6px}
.chat-row--grouped .chat-avatar-col{width:36px}
.chat-avatar-col{flex:0 0 36px;display:flex;align-items:flex-end;padding-bottom:1.1rem}
.chat-avatar{width:36px;height:36px}
.chat-bubble-wrap{min-width:0;max-width:100%}
.chat-sender{font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:2px;padding-left:4px}
.chat-sender a{color:var(--text-secondary);text-decoration:none}
.chat-sender a:hover{color:var(--link)}
.chat-bubble{padding:.5rem .75rem;border-radius:1rem;word-break:break-word;overflow-wrap:anywhere;line-height:1.45}
.chat-bubble .post-content{font-size:.9375rem}
.chat-bubble .post-content p{margin:0}
.chat-bubble .post-content p+p{margin-top:.375rem}
.chat-bubble--them{background:var(--bg-muted);color:var(--text-primary);border-bottom-left-radius:.25rem}
.chat-bubble--me{background:var(--primary);color:var(--on-primary);border-bottom-right-radius:.25rem}
.chat-bubble--me a{color:var(--on-primary);text-decoration:underline}
.chat-bubble--me .post-content{color:var(--on-primary)}
.chat-row--grouped .chat-bubble--them{border-top-left-radius:.25rem}
.chat-row--grouped .chat-bubble--me{border-top-right-radius:.25rem}
.chat-time{font-size:.6875rem;color:var(--text-secondary);padding:2px 4px;display:flex;align-items:center;gap:.375rem;opacity:.7}
.chat-row--me .chat-time{justify-content:flex-end}
.chat-time a,.chat-time-action{color:var(--text-secondary);text-decoration:none;background:none;border:none;font:inherit;font-size:inherit;cursor:pointer;padding:0}
.chat-time a:hover,.chat-time-action:hover{color:var(--link)}
.chat-date-sep{text-align:center;padding:.75rem 0;position:relative}
.chat-date-sep span{background:var(--bg-card);padding:0 .75rem;font-size:.75rem;color:var(--text-secondary);position:relative;z-index:1}
.chat-date-sep::before{content:'';position:absolute;left:1rem;right:1rem;top:50%;border-top:1px solid var(--border)}
.chat-older{padding:.75rem 1rem;border-bottom:1px solid var(--border);text-align:center}
.chat-empty{padding:3rem 1rem;text-align:center;color:var(--text-secondary)}
.chat-compose-card{padding:.5rem .75rem;border-top:1px solid var(--border)}
.chat-input-row{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}
.chat-text-input{flex:1;min-width:0;border:1px solid var(--border);outline:none;background:var(--bg-muted);font:inherit;font-size:.9375rem;color:var(--text-primary);padding:.5rem .75rem;border-radius:1.375rem;transition:border-color .15s}
.chat-text-input:focus{border-color:var(--primary);background:var(--bg-card)}
.chat-text-input::placeholder{color:var(--text-secondary);opacity:.6}
.chat-attach-btn{flex:0 0 auto;cursor:pointer;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;transition:color .15s,background .15s}
.chat-attach-btn:hover{color:var(--primary);background:var(--primary-a08)}
.chat-attach-btn svg{display:block}
.chat-send-btn{flex:0 0 auto;height:2.25rem;width:2.25rem;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;line-height:0}
.chat-send-btn svg{display:block}
.chat-upload-preview{padding:.5rem .5rem .25rem 2.75rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chat-upload-thumb{position:relative;width:3.5rem;height:3.5rem;border-radius:.5rem;overflow:hidden;border:1px solid var(--border)}
.chat-upload-thumb img{width:100%;height:100%;object-fit:cover}
.chat-upload-thumb-remove{position:absolute;top:1px;right:1px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:1.125rem;height:1.125rem;font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}

.admin-layout{display:block}
.admin-content{min-width:0}
.admin-nav{overflow:hidden;margin-bottom:1rem;border-right:none}
.admin-nav-summary{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;cursor:pointer;user-select:none;list-style:none}
.admin-nav-summary::-webkit-details-marker{display:none}
.admin-nav-summary::marker{content:''}
.admin-nav-summary-title{font-size:1.125rem;font-weight:600;color:var(--text-primary)}
.admin-nav-summary-meta{font-size:.75rem;color:var(--text-secondary);font-weight:700}
.admin-nav-summary-caret{margin-left:auto;width:18px;height:18px;opacity:.85;transition:transform .15s ease}
.admin-nav[open] .admin-nav-summary{border-bottom:1px solid var(--border)}
.admin-nav[open] .admin-nav-summary-caret{transform:rotate(180deg)}
.admin-nav-body{padding:.5rem .75rem .75rem .75rem}
.admin-nav-section{margin-top:.75rem}
.admin-nav-section:first-child{margin-top:0}
.admin-nav-section-title{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);font-weight:700;margin-bottom:.25rem;padding-left:.75rem}
.admin-nav-links{display:flex;flex-direction:column;gap:1px}
.admin-nav-link{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:.5rem;color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .15s,background .15s}
.admin-nav-link:hover{text-decoration:none;background:var(--bg-muted);color:var(--text-primary)}
.admin-nav-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.admin-nav-link-active{background:var(--primary-a12);color:var(--primary)}
.admin-nav-link-active:hover{background:var(--primary-a12)}
.admin-nav-link svg,.admin-nav-link .admin-nav-icon{width:1.25rem;height:1.25rem;flex-shrink:0}
.admin-nav-back{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;margin-bottom:.5rem;transition:color .15s}
.admin-nav-back:hover{color:var(--text-primary);text-decoration:none}
.admin-nav-back svg{width:1.25rem;height:1.25rem}
.admin-nav-section-footer{margin-top:.75rem;padding-top:.5rem;border-top:1px solid var(--border)}

@media (min-width: 900px){
  .admin-layout{display:grid;grid-template-columns:256px minmax(0,1fr);gap:1rem;align-items:start}
  .admin-layout>.admin-nav{grid-column:1;position:sticky;top:1rem;max-height:calc(100vh - 2rem);border-right:1px solid var(--border)}
  .admin-nav{margin-bottom:0}
  .admin-layout>.admin-nav .admin-nav-body{max-height:calc(100vh - 5.5rem);overflow:auto}
  .admin-layout>.admin-content{grid-column:2}
  .admin-nav-summary{cursor:default}
  .admin-nav-summary-caret{display:none}
}

.admin-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width: 900px){.admin-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.admin-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (min-width:640px){.admin-stats-grid{gap:1rem}}
@media (min-width:900px){.admin-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.admin-stat-card{display:flex;align-items:center;justify-content:space-between;padding:1rem}
@media (min-width:640px){.admin-stat-card{padding:1.5rem}}
.admin-stat-icon{color:var(--text-secondary);opacity:.5;flex-shrink:0}
.admin-info-grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.admin-info-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
@media (min-width:1024px){.admin-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.admin-stat-card{padding:.75rem 1rem}.admin-stat-icon{width:32px;height:32px}}
.cat-action-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:none;cursor:pointer;border-radius:0.375rem;color:var(--text-secondary);font-size:0.875rem;text-decoration:none;transition:background 0.15s,color 0.15s}
.cat-action-btn:hover{background:var(--bg-muted);color:var(--primary)}
.cat-action-delete:hover{color:#dc2626}
.cat-delete-confirm{border:1px solid var(--border)}
.cat-drag-handle{cursor:grab;color:var(--text-secondary);display:inline-flex;align-items:center;touch-action:none;padding:0.125rem}
.cat-drag-handle:hover{color:var(--primary)}
.cat-row.cat-dragging{opacity:0.4;background:var(--bg-muted)}
.cat-drop-placeholder td{padding:0!important}
.cat-th{text-align:left;padding:0.75rem 1rem;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-secondary);font-weight:600}
.cat-td{padding:0.75rem 1rem;font-size:0.875rem}
.cat-desc{color:var(--text-secondary);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-num{color:var(--text-secondary);white-space:nowrap}
.cat-status-badge{display:inline-flex;align-items:center;font-size:0.75rem;font-weight:500;padding:0.15rem 0.5rem;border-radius:9999px}
.cat-status-active{background:#dcfce7;color:#166534}
.cat-status-inactive{background:#fee2e2;color:#991b1b}
.cat-badge-sub{font-size:0.7rem;background:var(--bg-highlight);color:var(--text-secondary);padding:0.1rem 0.4rem;border-radius:9999px}
html[data-theme="dark"] .cat-status-active{background:rgba(22,101,52,.25);color:#86efac}
html[data-theme="dark"] .cat-status-inactive{background:rgba(153,27,27,.25);color:#fca5a5}
.cat-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
.cat-modal{background:var(--bg-card);border-radius:0.75rem;padding:1.5rem;max-width:28rem;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-height:90vh;overflow-y:auto}
.stat{border:1px solid var(--border);border-radius:.75rem;background:var(--bg-muted);padding:.75rem}
.stat-label{font-size:.75rem;color:var(--text-secondary)}
.stat-value{font-size:1.25rem;font-weight:700}
.text-green-600{color:#16a34a}
.text-blue-600{color:#2563eb}

.analytics-range-active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.analytics-range-active:hover{text-decoration:none;background:var(--primary-hover);border-color:var(--primary-hover)}
.analytics-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width: 900px){.analytics-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.analytics-chart{margin-top:1rem;position:relative}
.analytics-chart svg{width:100%;height:auto;display:block}
.analytics-series-toggle{background:transparent;border:none;padding:0;cursor:pointer;color:inherit;font:inherit}
.analytics-series-toggle:focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.analytics-series-toggle[data-enabled="0"]{opacity:.45}
.analytics-series-toggle[data-enabled="0"] .analytics-series-label{text-decoration:line-through}
.analytics-tooltip{position:absolute;display:none;pointer-events:none;z-index:5;max-width:16rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.5rem .6rem}
.analytics-tooltip-date{font-size:.8rem;font-weight:600;margin-bottom:.35rem}
.analytics-tooltip-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.75rem}
.analytics-tooltip-left{display:inline-flex;align-items:center;gap:.4rem;min-width:0}
.analytics-tooltip-swatch{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.analytics-tooltip-label{color:var(--text-secondary);white-space:nowrap}
.analytics-tooltip-value{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.analytics-legend{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.analytics-legend-item{display:inline-flex;align-items:center;gap:.4rem}
.analytics-swatch{width:10px;height:10px;border-radius:3px;display:inline-block}
.analytics-map{height:380px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-muted)}

.analytics-leaderboard{display:flex;flex-direction:column;gap:.75rem}
.analytics-leaderboard-row{display:flex;align-items:center;gap:1rem;border:1px solid var(--border);background:var(--bg-muted);border-radius:.75rem;padding:.5rem .75rem}
.analytics-rank{width:3rem;text-align:center;flex:0 0 auto}
.analytics-medal{font-size:1.35rem;line-height:1}
.analytics-user{display:flex;align-items:center;gap:.6rem;min-width:0;flex:1}
.analytics-user-meta{min-width:0}
.analytics-leaderboard-stats{flex:0 0 auto;text-align:right;white-space:nowrap}

.analytics-bars{display:flex;flex-direction:column;gap:.5rem}
.analytics-bar-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.analytics-bar-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.analytics-bar-track{width:9rem;height:10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-secondary);overflow:hidden}
.analytics-bar-fill{height:100%;background:var(--primary);border-radius:999px}

.analytics-top-pages{display:flex;flex-direction:column;gap:.5rem}
.analytics-top-pages-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.analytics-top-pages-path{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.analytics-top-pages-stats{display:flex;gap:1rem;white-space:nowrap}

.analytics-hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;align-items:end}
.analytics-hour{display:flex;flex-direction:column;align-items:center;gap:4px}
.analytics-hour-bar{width:100%;height:80px;border:1px solid var(--border);background:var(--bg-muted);border-radius:4px;display:flex;align-items:flex-end;overflow:hidden}
.analytics-hour-fill{width:100%;background:var(--primary)}
.analytics-hour-label{min-height:1rem}

.analytics-table-wrap{overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch}
.analytics-table{width:100%;border-collapse:collapse;min-width:720px}
.analytics-table th{font-size:.75rem;color:var(--text-secondary);font-weight:600;text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--border)}
.analytics-table td{padding:.6rem .5rem;border-top:1px solid var(--border);vertical-align:top}
.analytics-table tbody tr:hover{background:var(--bg-muted)}
.analytics-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem}

/* Mobile-friendly card layout for wide tables that otherwise collapse into unreadable columns. */
@media (max-width: 640px){
  .analytics-table-wrap-activity{overflow-x:visible}
  .analytics-table-activity{min-width:0}
  .analytics-table-activity thead{display:none}
  .analytics-table-activity tbody{display:block}
  .analytics-table-activity tbody tr{display:block;border:1px solid var(--border);border-radius:.75rem;overflow:hidden;background:var(--bg-card);margin-bottom:.75rem}
  .analytics-table-activity tbody tr:last-child{margin-bottom:0}
  .analytics-table-activity td{display:grid;grid-template-columns:5.75rem minmax(0,1fr);gap:.75rem;padding:.6rem .75rem;border-top:1px solid var(--border)}
  .analytics-table-activity td::before{content:attr(data-label);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);font-weight:800;line-height:1.1;padding-top:.15rem}
  .analytics-table-activity td[data-label="User"]{grid-template-columns:1fr;padding:.75rem .75rem .65rem .75rem;border-top:none}
  .analytics-table-activity td[data-label="User"]::before{display:none}
  .analytics-table-activity td .analytics-activity-value{min-width:0}
  .analytics-table-activity td .badge{white-space:nowrap}
}

.analytics-top-countries{display:flex;flex-direction:column;gap:.5rem}
.analytics-country-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.badge-secondary{background:var(--bg-muted);color:var(--text-secondary)}
.badge-success{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.35);color:var(--text-primary)}
.badge-info{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.35);color:var(--text-primary)}
.badge-primary{background:var(--badge-pill-bg);border-color:var(--badge-pill-border);color:var(--badge-pill-color)}
.badge-warning{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.35);color:var(--text-primary)}

.admin-sep{border:none;border-top:1px solid var(--border);margin:1rem 0}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media (min-width: 900px){.checkbox-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.checkbox{display:flex;gap:.5rem;align-items:center;font-size:.85rem}
.form-inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}

.search-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pagination{display:flex;gap:.25rem;align-items:center;justify-content:center;flex-wrap:nowrap;padding:1rem 0}
.pagination-btn,.pagination-page{min-width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;border:1px solid var(--border);background:var(--bg-card);font-size:.875rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;padding:.375rem .75rem;text-decoration:none;line-height:1}
.pagination-btn:hover,.pagination-page:hover{background:var(--bg-muted)}
.pagination-btn:focus,.pagination-page:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--focus-ring)}
.pagination-page-current{cursor:default;border-color:var(--primary);background:var(--primary);color:var(--on-primary)}
.pagination-page-current:hover{background:var(--primary-hover)}
.pagination-btn.disabled,.pagination-page.disabled{cursor:not-allowed;opacity:.5}
.pagination-btn.disabled:hover,.pagination-page.disabled:hover{background:var(--bg-card)}
.pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem;font-size:.875rem;font-weight:500;color:var(--text-secondary);min-width:1.5rem}
@media(max-width:480px){.pagination-btn,.pagination-page{min-width:1.5rem;height:1.75rem;font-size:.75rem;padding:.25rem}}
html[data-theme="browncafe"] .pagination-btn,html[data-theme="browncafe"] .pagination-page{background:#fff;border-color:#d9d1c2;color:#332f29;font-size:13px;padding:.375rem 1rem}
html[data-theme="browncafe"] .pagination-btn:hover,html[data-theme="browncafe"] .pagination-page:hover{background:#f5ede4;border-color:#613a04}
html[data-theme="browncafe"] .pagination-page-current{background:#613a04;color:#fff;border-color:#4d2e03}
html[data-theme="browncafe"] .pagination-page-current:hover{background:#a69562}
html[data-theme="browncafe"] .pagination-btn.disabled:hover{background:#fff;border-color:#d9d1c2}
html[data-theme="browncafe"] .pagination-ellipsis{color:#665f53;font-size:13px}
html[data-theme="browncafe"] .pagination-ellipsis:hover{color:#613a04;text-decoration:underline}

.form{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}
.label{display:flex;flex-direction:column;gap:.25rem}
.textarea{resize:vertical;min-height:10rem;max-width:100%}
.error-text{color:var(--danger)}
.quote-preview{border:1px solid var(--border);background:var(--bg-muted);border-radius:.5rem;padding:.5rem .75rem}
.quote-preview-header{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.quote-preview-list{margin-top:.5rem;display:flex;flex-direction:column;gap:.5rem}
.quote-preview-item{border:1px solid var(--border);background:var(--bg-card);border-radius:.5rem;padding:.5rem}
.quote-preview-item-header{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.quote-preview-body{margin-top:.35rem;max-height:220px;overflow:auto}
.quote-preview-body img{max-height:160px}

/* Multi-quote */
.multiquote-toggle[data-selected="1"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.multiquote-toggle[data-selected="1"]:hover{text-decoration:none;background:var(--primary-hover);border-color:var(--primary-hover)}
body[data-multiquote-open="1"]{padding-bottom:4.25rem;padding-bottom:calc(4.25rem + env(safe-area-inset-bottom))}
.multiquote-bar{position:fixed;left:0;right:0;bottom:0;z-index:100;border-top:1px solid var(--border);background:var(--multiquote-bar-bg);backdrop-filter:blur(10px);padding:.5rem 0;padding-bottom:calc(.5rem + env(safe-area-inset-bottom))}
.multiquote-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.multiquote-count{font-size:.9rem;font-weight:600}
.multiquote-bar-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
@media (max-width: 640px){
  .multiquote-bar-inner{flex-direction:column;align-items:flex-start}
  .multiquote-bar-actions{width:100%}
  .multiquote-bar-actions button{flex:1}
}

/* Forum post content (from Quill) */
.post-content img{max-width:100%;height:auto;border-radius:.5rem}
.post-content a{color:var(--link);text-decoration:none}
.post-content a:hover{color:var(--link-hover);text-decoration:none}
.ql-mention{color:var(--primary);font-weight:600}
.ql-image-blot{margin:1rem 0}
.ql-image-container{display:inline-block;max-width:100%;border-radius:.5rem;overflow:hidden;line-height:0}
.ql-image-blot .ql-image{display:block;max-width:100%;height:auto;border-radius:.5rem;cursor:pointer;transition:opacity .15s}
.ql-image-blot .ql-image:hover{opacity:.92}
.ql-image-blot.selected .ql-image-container{outline:2px solid var(--primary);outline-offset:2px}
.ql-image-loading{background:var(--bg-muted);border-radius:.375rem;padding:3rem;min-width:200px;text-align:center;color:var(--text-secondary)}
.ql-image-loader{text-align:center;color:var(--text-secondary)}
.ql-spinner{display:inline-block;width:2rem;height:2rem;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:.5rem}
@keyframes spin{to{transform:rotate(360deg)}}
.ql-image-error{background:var(--danger-bg-hover);border:1px solid var(--danger);border-radius:.375rem;padding:2rem;text-align:center;color:var(--danger)}
html[data-theme="dark"] .ql-image-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
html[data-theme="browncafe"] .ql-image-error{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.25)}
.ql-image-error-url{font-size:.75rem;color:var(--text-secondary);margin-top:.5rem;word-break:break-all}
blockquote{margin:0}
.ql-quote-blot{margin:1rem 0}
.ql-quote{border-left:4px solid var(--border);padding:.75rem;background:var(--bg-muted);border-radius:.375rem}
.ql-quote-header{font-size:.875rem;color:var(--text-secondary);margin-bottom:.75rem}
.ql-quote-link{color:var(--primary)}
.ql-quote-link:hover{text-decoration:none}
.post-content pre{background:var(--bg-muted);border:1px solid var(--border);padding:.75rem;border-radius:.5rem;overflow:auto}
.post-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9em}
.post-content pre code{display:block;white-space:pre}
.post-content blockquote{border-left:4px solid var(--input-border);margin:5px 0;padding-left:16px;color:var(--text-secondary)}

.ql-embed-blot{margin:1rem 0}
.link-preview-card{border:1px solid var(--border);border-radius:.5rem;overflow:hidden;margin:.75rem 0;max-width:550px;background:var(--bg-muted);box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);transition:box-shadow .15s ease}
.link-preview-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06)}
.link-preview-img-wrap{display:block;line-height:0;border-bottom:1px solid var(--border)}
.link-preview-img{width:100%;max-height:260px;object-fit:cover}
.link-preview-body{padding:.875rem 1rem}
.link-preview-site{font-size:.6875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem;font-weight:600}
.link-preview-title{display:block;font-weight:700;font-size:1rem;color:var(--text-primary);text-decoration:none;line-height:1.35}
.link-preview-title:hover{color:var(--link)}
.link-preview-desc{font-size:.8125rem;color:var(--text-secondary);margin-top:.375rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.link-preview-domain{font-size:.6875rem;color:var(--text-secondary);margin-top:.5rem;display:flex;align-items:center;gap:.25rem}
.ql-embed-container{max-width:100%}
.ql-embed-twitter{max-width:550px;margin-left:auto;margin-right:auto}
.ql-embed-reddit{max-width:550px;margin-left:auto;margin-right:auto}
.embed-card{border:1px solid var(--border);background:var(--bg-card);border-radius:.5rem;padding:.75rem;overflow-wrap:anywhere;word-break:break-word}
.embed-card-title{font-size:.75rem;color:var(--text-secondary);margin-bottom:.25rem;font-weight:600}
.embed-card-link{color:var(--primary);font-weight:600}
.embed-card-truthsocial{max-width:550px;margin-left:auto;margin-right:auto}
.embed-responsive{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:.5rem;background:#000}
.embed-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.ql-embed-tiktok iframe{width:100%;border:0;border-radius:.5rem}
.ql-embed-soundcloud iframe{width:100%;border:0;border-radius:.5rem}
.ql-embed-spotify iframe{width:100%;border:0;border-radius:.5rem}
.ql-embed-truthsocial{max-width:550px;margin-left:auto;margin-right:auto}
.ql-embed-truthsocial iframe{width:100%;border:0;display:block}
.ql-embed-instagram{max-width:540px;margin-left:auto;margin-right:auto}
.instagram-media{max-width:540px!important;width:100%!important;min-width:326px!important}
.twitter-tweet{max-width:550px;margin-left:auto;margin-right:auto;border:1px solid var(--border);border-radius:.5rem;padding:.75rem;background:var(--bg-card);overflow:hidden}

/* Composer (progressive enhancement) */
.composer{position:relative;display:flex;flex-direction:column;background:var(--bg-secondary);border-radius:.5rem;border:1px solid var(--border);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.composer:focus-within{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.composer-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:.5rem;background:var(--bg-card);border-bottom:1px solid var(--border);flex-shrink:0}
.composer-toolbar .composer-size-select{height:28px;padding:0 4px;border:1px solid var(--border);border-radius:.25rem;background:var(--bg-card);color:var(--text-secondary);font-size:.75rem;cursor:pointer;outline:none;min-width:54px}
.composer-toolbar .composer-size-select:hover{background:var(--bg-highlight);color:var(--text-primary)}
.composer-toolbar .composer-size-select:focus{border-color:var(--primary)}
.composer-toolbar .composer-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;min-height:28px;padding:0;margin:0;border:none;border-radius:.25rem;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.8rem;font-weight:600;line-height:1;transition:background .1s,color .1s;flex-shrink:0}
.composer-toolbar .composer-btn:hover{background:var(--bg-highlight);color:var(--text-primary)}
.composer-toolbar .composer-btn.active{background:var(--bg-highlight);color:var(--primary)}
.composer-toolbar .composer-btn-wide{width:auto;padding:0 8px;font-size:.75rem;font-weight:500}
.composer-toolbar .composer-sep{width:1px;height:20px;background:var(--border);margin:4px 4px;align-self:center}
.composer-editor{min-height:150px;max-height:400px;white-space:pre-wrap;overflow:hidden;overflow-y:auto;max-width:100%;padding:.75rem;font-size:1rem;line-height:1.5;color:var(--text-primary);border:none;border-radius:0;background:transparent;flex:1 1 auto}
.composer-editor:focus{outline:none;box-shadow:none;border-color:transparent}
.composer-editor img{max-width:100%;height:auto;border-radius:.375rem}
.composer-editor[data-composer-empty="1"]:not(:focus)::before{content:attr(data-placeholder);color:var(--text-secondary);opacity:.7;pointer-events:none;font-style:normal}
.composer-editor blockquote{border-left:4px solid var(--border);margin:5px 0;padding-left:16px}
.composer-editor code{background:var(--bg-muted);border-radius:3px;font-size:85%;padding:2px 4px}
.composer-editor pre{background:var(--bg-muted);border-radius:.375rem;margin:5px 0;padding:8px 12px;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}
.composer-editor pre code{display:block;min-height:1.5em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem}
.composer-editor h2{font-size:1.5em;font-weight:700;margin:.5em 0 .25em}
.composer-editor a{color:var(--primary);text-decoration:underline}
.composer-status{min-height:1rem;padding:0 .75rem .25rem;font-size:.75rem}
@media (max-width:768px){.composer-editor{min-height:120px;max-height:300px;font-size:16px}.composer-toolbar .composer-btn{width:26px;height:26px}}
.composer-mentions{margin-top:.5rem;border:1px solid var(--border);border-radius:.5rem;background:var(--bg-card);box-shadow:var(--shadow);max-height:220px;overflow:auto}
.composer-mention-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer}
.composer-mention-item:hover,.composer-mention-active{background:var(--bg-highlight)}
.composer-mention-avatar{width:24px;height:24px;border-radius:999px;object-fit:cover;flex:0 0 auto;background:var(--placeholder-bg)}
.composer-mention-avatar-placeholder{background:linear-gradient(135deg,var(--placeholder-gradient-start),var(--placeholder-gradient-end))}
.composer-mention-name{font-size:.9rem;font-weight:600}
.user-suggest{width:100%;max-width:32rem}

.composer-image-resizer{position:absolute;z-index:100;box-sizing:border-box;border:2px solid var(--primary);border-radius:.6rem;pointer-events:none}
.composer-image-resizer[data-resizing]{border-style:dashed}
.composer-image-resizer-handle{position:absolute;width:16px;height:16px;border-radius:999px;background:var(--bg-card);border:2px solid var(--primary);box-sizing:border-box;pointer-events:auto;touch-action:none}
.composer-image-resizer-handle-nw{top:-8px;left:-8px;cursor:nwse-resize}
.composer-image-resizer-handle-ne{top:-8px;right:-8px;cursor:nesw-resize}
.composer-image-resizer-handle-sw{bottom:-8px;left:-8px;cursor:nesw-resize}
.composer-image-resizer-handle-se{bottom:-8px;right:-8px;cursor:nwse-resize}
html.composer-image-resizing,html.composer-image-resizing *{user-select:none}

/* Quill format display classes (for rendering posts created with Quill editor) */
.ql-align-center{text-align:center}
.ql-align-right{text-align:right}
.ql-align-justify{text-align:justify}
.ql-size-small,.ql-size-10px{font-size:.75em}.ql-size-large,.ql-size-18px,.ql-size-20px{font-size:1.5em}.ql-size-huge,.ql-size-24px,.ql-size-28px,.ql-size-32px,.ql-size-36px{font-size:2.5em}
.ql-size-12px{font-size:12px}.ql-size-14px{font-size:14px}.ql-size-16px{font-size:16px}
.ql-font-serif{font-family:Georgia,Times New Roman,serif}
.ql-font-monospace{font-family:Monaco,Courier New,monospace}
.ql-color-white{color:#fff}.ql-color-red{color:#e60000}.ql-color-orange{color:#f90}.ql-color-yellow{color:#ff0}.ql-color-green{color:#008a00}.ql-color-blue{color:#06c}.ql-color-purple{color:#93f}
.ql-bg-black{background-color:#000}.ql-bg-red{background-color:#e60000}.ql-bg-orange{background-color:#f90}.ql-bg-yellow{background-color:#ff0}.ql-bg-green{background-color:#008a00}.ql-bg-blue{background-color:#06c}.ql-bg-purple{background-color:#93f}

.tag-suggest{margin-top:.35rem;border:1px solid var(--border);border-radius:.5rem;background:var(--bg-card);box-shadow:var(--shadow);max-height:220px;overflow:auto}
.tag-suggest-item{padding:.5rem .75rem;cursor:pointer;font-weight:600}
.tag-suggest-item:hover,.tag-suggest-active{background:var(--bg-highlight)}
.search-suggest{margin-top:.35rem;border:1px solid var(--border);border-radius:.5rem;background:var(--bg-card);box-shadow:var(--shadow);max-height:220px;overflow:auto}
.search-suggest-item{padding:.5rem .75rem;cursor:pointer}
.search-suggest-item:hover,.search-suggest-active{background:var(--bg-highlight)}

/* Header (mobile) */
[data-nav-collapsed]{display:none !important}
.nav-overflow-item{display:none}
.nav-overflow-item.nav-overflow-visible{display:block}
.nav-toggle{display:none;align-items:center;justify-content:center;padding:.5rem;border-radius:.375rem;border:1px solid transparent;background:transparent;color:rgba(255,255,255,.92);cursor:pointer}
.nav-toggle:hover{text-decoration:none;background:rgba(255,255,255,.12)}
.nav-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.nav-logout-form{display:inline}
@media (max-width: 768px){
  html.js .nav-toggle{display:inline-flex}
  .site-header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .site-header-right{gap:.25rem}
  .nav-desktop-only{display:none}
  .nav-mobile-only{display:inline-flex}
  .site-nav{display:flex;width:100%;flex-direction:column;align-items:stretch;gap:.75rem;padding-top:.75rem;margin-top:.25rem;border-top:1px solid var(--header-border)}
  .site-nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
  .site-nav-mobile{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
  html.js .site-nav{display:none}
  html.js header[data-nav-open="1"] .site-nav{display:flex}
  html.js header[data-nav-open="1"] .site-nav a,
  html.js header[data-nav-open="1"] .site-nav form{width:100%}
  html.js header[data-nav-open="1"] .site-nav a{padding:.15rem 0}
  html.js header[data-nav-open="1"] .site-nav a.btn-primary,
  html.js header[data-nav-open="1"] .site-nav a.btn-secondary{text-align:center;padding:.4rem .75rem}
  html.js header[data-nav-open="1"] .site-nav form button{width:100%}
  html.js .nav-logout-form{display:block}

  /* Notifications dropdown behaves like a drawer on mobile */
  .notif-menu{position:fixed;left:0;right:0;top:64px;width:auto;max-width:none;border-radius:0;border-left:0;border-right:0}
}

/* Mobile layout tweaks */
@media (max-width: 640px){
  .p-6{padding:1rem}
  .p-6 > .thread-list{margin-left:-1rem;margin-right:-1rem;margin-bottom:-1rem}
  .p-6 > .thread-list > .thread-row{padding-left:1rem;padding-right:1rem}
  .px-4{padding-left:.75rem;padding-right:.75rem}
  .post-header{align-items:flex-start}
  .post-content{padding:.85rem}
  .post-actions{padding:0 .85rem .85rem .85rem}
  .thread-row{flex-direction:column}
  .thread-stats{align-self:flex-start;white-space:normal}
  .category-thread-tools-right{justify-content:flex-start}
  .category-sort{min-width:0;width:100%}
  .thread-avatar-link{display:none}
  .thread-stats-advanced{display:none}
  .thread-title-line{flex-direction:column;align-items:stretch}
  .thread-pages{justify-content:flex-start}
  .thread-meta-mobile-only{display:inline}
  .profile-card .profile-header{flex-direction:column;align-items:center;text-align:center}
  .message-row{flex-direction:column}
  .chat-row{max-width:92%}
  .chat-avatar-col{flex:0 0 28px;width:28px}
  .chat-avatar{width:28px!important;height:28px!important}
  .chat-row--grouped .chat-avatar-col{width:28px}
  .admin-stats{grid-template-columns:repeat(1,minmax(0,1fr))}
  .admin-stats-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
  .admin-info-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
  .checkbox-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
}

/* Post tables */
.post-content table{width:100%;border-collapse:collapse}
.post-content table,.post-content th,.post-content td{border:1px solid var(--border)}
.post-content th,.post-content td{padding:.5rem;vertical-align:top}
@media (max-width: 640px){
  .post-content table{display:block;overflow-x:auto;max-width:100%}
}

/* Polls */
.poll-card{overflow:hidden}
.poll-options{display:flex;flex-direction:column;gap:.5rem}
.poll-option-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;border:1px solid var(--border);background:var(--bg-muted);border-radius:.75rem;padding:.6rem .75rem}
.poll-option-row input{margin:0}
.poll-option-label{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.poll-option-meta{margin-left:auto;white-space:nowrap}
.poll-my-vote{display:inline-block;margin-right:.35rem;color:var(--primary);font-weight:700}
.poll-bar{height:10px;border-radius:999px;background:var(--bg-primary);border:1px solid var(--border);overflow:hidden;margin:.35rem .1rem .65rem .1rem}
.poll-bar-fill{height:100%;background:var(--primary);border-radius:999px}

.poll-voters{margin:.15rem 0 .75rem 0}
.poll-voters-list{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.35rem}
.poll-voter{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border);background:var(--bg-primary);border-radius:999px;padding:.25rem .5rem;font-size:.85rem}
.poll-voter:hover{text-decoration:none}
.poll-voter-avatar{width:18px;height:18px;border-radius:999px;object-fit:cover;background:var(--placeholder-bg);flex:0 0 auto}

.poll-builder{margin-top:1rem}
.poll-builder>summary{cursor:pointer}
html.js .poll-builder[data-poll-enabled-state="0"] [data-poll-fields]{display:none}
.poll-builder-options{display:flex;flex-direction:column;gap:.5rem}
.poll-builder-option-row{display:flex;gap:.5rem;align-items:center}
.poll-builder-option-row .input{flex:1;max-width:none}
.poll-builder-option-row button{flex:0 0 auto;white-space:nowrap}
@media (max-width: 640px){
  .poll-option-meta{margin-left:0;width:100%;white-space:normal}
  .poll-builder-option-row{flex-direction:column;align-items:stretch}
  .poll-builder-option-row button{width:100%}
}

/* Avatar cropper (settings/profile) */
.avatar-cropper{position:relative;width:100%;height:360px;background:#000;border-radius:1rem;overflow:hidden;border:1px solid var(--border)}
.avatar-cropper img{display:block;max-width:100%}
.avatar-cropper .cropper-container{width:100%!important;height:100%!important}
.avatar-cropper .cropper-view-box,
.avatar-cropper .cropper-face{border-radius:50%}
.avatar-cropper .cropper-dashed,
.avatar-cropper .cropper-center,
.avatar-cropper .cropper-line,
.avatar-cropper .cropper-point{display:none!important}
.avatar-crop-range{flex:1;min-width:12rem}
@media (max-width: 640px){
  .avatar-cropper{height:300px}
  .avatar-crop-range{min-width:10rem}
}

/* Settings tabs */
.settings-tab{display:inline-flex;align-items:center;gap:0.375rem;padding:0.75rem 1.25rem;font-size:0.8125rem;font-weight:500;color:var(--text-secondary);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.settings-tab:hover{color:var(--text-primary)}
.settings-tab-active{color:var(--primary);border-bottom-color:var(--primary)}
.settings-cat-tab{display:inline-flex;align-items:center;gap:0.25rem;padding:0.375rem 0.75rem;font-size:0.75rem;font-weight:500;color:var(--text-secondary);background:var(--bg-muted);border:1px solid var(--border);border-radius:9999px;cursor:pointer;transition:all .15s}
.settings-cat-tab:hover{color:var(--text-primary);border-color:var(--text-secondary)}
.settings-cat-tab-active{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}