/* ============================================================
   TAKT DESIGN SYSTEM v2
   Premium, calm, purposeful. Violet accent, warm neutrals,
   always-dark sidebar. DM Sans headings, Inter body.
   ============================================================ */

:root {
  --bg-app:#F6F6F4;--bg-page:#FFFFFF;--bg-surface:#FFFFFF;--bg-elevated:#FFFFFF;--bg-hover:#F0EFED;--bg-active:#E8E7E5;
  --bg-sidebar:#1B1B1B;--sidebar-text:rgba(255,255,255,0.50);--sidebar-text-hover:rgba(255,255,255,0.85);--sidebar-text-active:#FFF;--sidebar-active-bg:rgba(255,255,255,0.08);--sidebar-border:rgba(255,255,255,0.06);
  --text-primary:#0F0F0F;--text-secondary:#4A4A4A;--text-tertiary:#8A8A8A;--text-disabled:#BCBCBC;
  --border-subtle:rgba(0,0,0,0.06);--border-default:rgba(0,0,0,0.10);--border-strong:rgba(0,0,0,0.18);
  --color-border:#E2E2E2;--color-surface:#F0EFED;--color-navy:#0F0F0F;--color-gray:#8A8A8A;
  --color-blue:#7C3AED;--accent:#7C3AED;--accent-hover:#6D28D9;--accent-muted:rgba(124,58,237,0.08);--accent-text:#6D28D9;--accent-glow:rgba(124,58,237,0.15);
  --color-green:#059669;--color-amber:#D97706;--color-red:#DC2626;
  --success:#059669;--success-muted:rgba(5,150,105,0.08);--warning:#D97706;--warning-muted:rgba(217,119,6,0.08);--error:#DC2626;--error-muted:rgba(220,38,38,0.06);
  --color-blue-tint:rgba(124,58,237,0.08);--color-green-tint:rgba(5,150,105,0.08);--color-amber-tint:rgba(217,119,6,0.08);--color-red-tint:rgba(220,38,38,0.06);--color-gray-tint:rgba(0,0,0,0.04);--color-lightBlue:rgba(124,58,237,0.08);
  --tofu:#0EA5E9;--tofu-muted:rgba(14,165,233,0.08);--tofu-border:rgba(14,165,233,0.20);
  --mofu:#D97706;--mofu-muted:rgba(217,119,6,0.08);--mofu-border:rgba(217,119,6,0.20);
  --bofu:#059669;--bofu-muted:rgba(5,150,105,0.08);--bofu-border:rgba(5,150,105,0.20);
  --sidebar-width:220px;--sidebar-width-collapsed:52px;
  --font-heading:'DM Sans','Inter',system-ui,sans-serif;--font-body:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --fs-page-title:20px;--fw-page-title:600;--fs-section-header:16px;--fw-section-header:600;
  --fs-card-title:14px;--fw-card-title:500;--fs-body:14px;--fw-body:400;
  --fs-meta:12px;--fw-meta:400;--fs-badge:11px;--fw-badge:600;--fs-button:13px;--fw-button:500;
  --page-px:28px;--page-py:20px;--card-padding:14px;--card-gap:10px;--section-spacing:20px;
  --radius-card:8px;--radius-button:6px;--radius-badge:4px;--max-content-width:1200px;
  --shadow-card:0 1px 2px rgba(0,0,0,0.03),0 2px 8px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.03);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.06),0 8px 24px rgba(0,0,0,0.04);
  --shadow-elevated:0 4px 12px rgba(0,0,0,0.06),0 12px 32px rgba(0,0,0,0.08);
  --ease:cubic-bezier(0.4,0,0.2,1);--ease-spring:cubic-bezier(0.16,1,0.3,1);--duration-fast:120ms;--duration-base:180ms;
}
html.dark {
  --bg-app:#0C0C0C;--bg-page:#121212;--bg-surface:#1A1A1A;--bg-elevated:#242424;--bg-hover:#2A2A2A;--bg-active:#353535;
  --bg-sidebar:#080808;--sidebar-border:rgba(255,255,255,0.05);
  --text-primary:#F0F0F0;--text-secondary:#A0A0A0;--text-tertiary:#606060;--text-disabled:#404040;
  --border-subtle:rgba(255,255,255,0.05);--border-default:rgba(255,255,255,0.08);--border-strong:rgba(255,255,255,0.14);
  --color-border:#2E2E2E;--color-surface:#1A1A1A;--color-navy:#F0F0F0;--color-gray:#606060;
  --color-blue:#A78BFA;--accent:#A78BFA;--accent-hover:#C4B5FD;--accent-muted:rgba(167,139,250,0.10);--accent-text:#A78BFA;--accent-glow:rgba(167,139,250,0.12);
  --color-green:#34D399;--color-amber:#FBBF24;--color-red:#F87171;
  --success:#34D399;--success-muted:rgba(52,211,153,0.10);--warning:#FBBF24;--warning-muted:rgba(251,191,36,0.10);--error:#F87171;--error-muted:rgba(248,113,113,0.10);
  --color-blue-tint:rgba(167,139,250,0.10);--color-green-tint:rgba(52,211,153,0.10);--color-amber-tint:rgba(251,191,36,0.10);--color-red-tint:rgba(248,113,113,0.10);--color-gray-tint:rgba(255,255,255,0.04);--color-lightBlue:rgba(167,139,250,0.10);
  --tofu:#38BDF8;--tofu-muted:rgba(56,189,248,0.10);--tofu-border:rgba(56,189,248,0.20);
  --mofu:#FBBF24;--mofu-muted:rgba(251,191,36,0.10);--mofu-border:rgba(251,191,36,0.18);
  --bofu:#34D399;--bofu-muted:rgba(52,211,153,0.10);--bofu-border:rgba(52,211,153,0.20);
  --shadow-card:0 1px 4px rgba(0,0,0,0.5);--shadow-card-hover:0 2px 8px rgba(0,0,0,0.6);--shadow-elevated:0 8px 32px rgba(0,0,0,0.6);
}

/* ── Global Base ──────────────────────────────────────── */
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:"cv02","cv03","cv04","cv11"; }

/* ── Noise Texture ────────────────────────────────────── */
body::after { content:''; position:fixed; inset:0; opacity:0.018; pointer-events:none; z-index:9999; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Typography ───────────────────────────────────────── */
.ds-page-title { font-family:var(--font-heading); font-size:var(--fs-page-title); font-weight:var(--fw-page-title); color:var(--text-primary); line-height:1.25; letter-spacing:-0.025em; }
.ds-section-header { font-family:var(--font-heading); font-size:var(--fs-section-header); font-weight:var(--fw-section-header); color:var(--text-primary); line-height:1.3; letter-spacing:-0.015em; }
.ds-card-title { font-size:var(--fs-card-title); font-weight:var(--fw-card-title); color:var(--text-primary); line-height:1.4; }
.ds-body { font-size:var(--fs-body); font-weight:var(--fw-body); color:var(--text-secondary); line-height:1.5; }
.ds-meta { font-size:var(--fs-meta); font-weight:var(--fw-meta); color:var(--text-tertiary); line-height:1.4; }

/* ── Layout ───────────────────────────────────────────── */
.ds-content-wrap { max-width:var(--max-content-width); margin:0 auto; padding:var(--page-py) var(--page-px); width:100%; }

/* ── Buttons ──────────────────────────────────────────── */
.btn-primary,.btn-secondary,.btn-tertiary,.btn-destructive { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-button); font-weight:var(--fw-button); border-radius:var(--radius-button); cursor:pointer; white-space:nowrap; font-family:var(--font-body); transition:all var(--duration-fast) var(--ease); }
.btn-primary:active,.btn-secondary:active,.btn-tertiary:active,.btn-destructive:active { transform:scale(0.97); transition:transform 80ms; }
.btn-primary:disabled,.btn-secondary:disabled,.btn-tertiary:disabled,.btn-destructive:disabled { opacity:0.5; cursor:not-allowed; }
.btn-primary { padding:7px 14px; color:#fff; background:var(--accent); border:1px solid var(--accent); box-shadow:0 1px 2px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.12); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:0 2px 8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,0.12); }
.btn-secondary { padding:7px 14px; color:var(--text-secondary); background:var(--bg-surface); border:1px solid var(--border-default); box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.btn-secondary:hover { background:var(--bg-hover); color:var(--text-primary); border-color:var(--border-strong); }
.btn-tertiary { padding:6px 10px; color:var(--text-tertiary); background:transparent; border:none; }
.btn-tertiary:hover { color:var(--text-secondary); background:var(--bg-hover); }
.btn-destructive { padding:7px 14px; color:var(--error); background:transparent; border:1px solid var(--error); }
.btn-destructive:hover { background:var(--error-muted); }

/* ── Cards ────────────────────────────────────────────── */
.ds-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-card); box-shadow:none; padding:var(--card-padding); overflow:hidden; transition:box-shadow var(--duration-base) var(--ease),transform var(--duration-base) var(--ease),border-color var(--duration-base) var(--ease); }
.ds-card:hover { box-shadow:var(--shadow-card); transform:translateY(-1px); border-color:var(--border-default); }
.ds-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.ds-card-middle { margin-bottom:10px; font-size:var(--fs-body); color:var(--text-secondary); line-height:1.5; }
.ds-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.card-detail-section { border-top:1px solid var(--border-subtle); background:var(--bg-hover); padding:16px; margin:0 -14px -14px; border-radius:0 0 var(--radius-card) var(--radius-card); }
.ds-card-meta { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Rule category indicators */
.rule-btn[data-categories*="all"] { border-left:3px solid var(--text-tertiary); }
.rule-btn[data-categories*="comment"]:not([data-categories*="all"]) { border-left:3px solid var(--accent); }
.rule-btn[data-categories*="message"]:not([data-categories*="all"]) { border-left:3px solid var(--success); }
.rule-btn[data-categories*="post"]:not([data-categories*="all"]) { border-left:3px solid #7c3aed; }

/* ── Badges ───────────────────────────────────────────── */
.ds-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; font-size:var(--fs-badge); font-weight:var(--fw-badge); border-radius:var(--radius-badge); white-space:nowrap; line-height:1.4; letter-spacing:0.02em; }
.ds-badge-category { background:var(--accent-muted); color:var(--accent); }
.ds-badge-success { background:var(--success-muted); color:var(--success); }
.ds-badge-warning { background:var(--warning-muted); color:var(--warning); }
.ds-badge-danger { background:var(--error-muted); color:var(--error); }
.ds-badge-neutral { background:var(--color-gray-tint); color:var(--text-tertiary); }
.ds-badge-info { background:var(--accent-muted); color:var(--accent); }
.ds-badge-warm { background:var(--warning-muted); color:var(--warning); }
.ds-badge-cold { background:var(--color-gray-tint); color:var(--text-tertiary); }

/* ── Filter Bar ───────────────────────────────────────── */
.ds-filter-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:var(--card-gap); }
.ds-filter-pill { display:inline-flex; align-items:center; padding:5px 12px; font-size:var(--fs-badge); font-weight:var(--fw-badge); border:1px solid var(--border-default); border-radius:999px; background:var(--bg-surface); color:var(--text-tertiary); cursor:pointer; transition:all var(--duration-fast) var(--ease); white-space:nowrap; }
.ds-filter-pill:hover { border-color:var(--accent); color:var(--accent); }
.ds-filter-pill.active,.ds-filter-pill[aria-selected="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── Engagement ───────────────────────────────────────── */
.ds-engagement { display:flex; align-items:center; gap:12px; font-size:var(--fs-meta); color:var(--text-tertiary); }
.ds-engagement-item { display:inline-flex; align-items:center; gap:3px; }

/* ── Utilities ────────────────────────────────────────── */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.htmx-request .htmx-indicator { display:inline-block; }
.htmx-indicator { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin 0.6s linear infinite; }

/* ── Sidebar ──────────────────────────────────────────── */
#sidebar { width:var(--sidebar-width); flex-shrink:0; display:flex; flex-direction:column; background:var(--bg-sidebar); border-right:1px solid var(--sidebar-border); overflow:hidden; transition:width 0.2s ease; position:relative; z-index:20; }
#sidebar.collapsed { width:var(--sidebar-width-collapsed); }
.sidebar-header { display:flex; align-items:center; padding:12px 14px; flex-shrink:0; min-height:48px; }
.sidebar-logo { display:flex; align-items:center; gap:10px; text-decoration:none; overflow:hidden; flex:1; }
.sidebar-logo-icon { width:26px; height:26px; background:linear-gradient(135deg,#7C3AED,#9333EA); border-radius:var(--radius-button); display:flex; align-items:center; justify-content:center; color:white; font-size:11px; font-weight:700; flex-shrink:0; font-family:var(--font-heading); }
.sidebar-logo-text { font-family:var(--font-heading); color:#FFF; font-size:15px; font-weight:600; letter-spacing:-0.03em; white-space:nowrap; }
.sidebar-nav { flex:1; overflow-y:auto; padding:4px 8px 8px; }
.sidebar-section { margin-top:20px; }
.sidebar-section:first-child { margin-top:0; }
.sidebar-section-header { font-size:10px; font-weight:600; color:rgba(255,255,255,0.25); text-transform:uppercase; letter-spacing:0.06em; padding:0 8px 4px; white-space:nowrap; }
.sidebar-nav-item { display:flex; align-items:center; gap:8px; margin:1px 0; padding:6px 10px; font-size:13px; font-weight:430; color:var(--sidebar-text); text-decoration:none; border-radius:var(--radius-button); transition:all var(--duration-fast) var(--ease); white-space:nowrap; position:relative; }
.sidebar-nav-item:hover { background:rgba(255,255,255,0.04); color:var(--sidebar-text-hover); }
.sidebar-nav-item.active { background:var(--sidebar-active-bg); color:var(--sidebar-text-active); font-weight:500; }
.sidebar-nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:2px; height:14px; border-radius:1px; background:var(--accent); }
.sidebar-icon { width:16px; height:16px; flex-shrink:0; }
.sidebar-label { flex:1; overflow:hidden; text-overflow:ellipsis; }
.sidebar-badge { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.5); font-size:10px; font-weight:600; padding:1px 6px; border-radius:999px; min-width:18px; text-align:center; flex-shrink:0; font-variant-numeric:tabular-nums; }
.sidebar-footer { flex-shrink:0; border-top:1px solid var(--sidebar-border); padding:8px; display:flex; flex-direction:column; gap:2px; }
.sidebar-theme-btn { display:flex; align-items:center; gap:8px; width:100%; padding:6px 10px; border:none; background:transparent; border-radius:var(--radius-button); cursor:pointer; font-size:12px; color:var(--sidebar-text); transition:all var(--duration-fast) var(--ease); text-align:left; font-family:var(--font-body); }
.sidebar-theme-btn:hover { background:rgba(255,255,255,0.04); color:var(--sidebar-text-hover); }
.sidebar-collapse-toggle { display:flex; align-items:center; justify-content:center; width:100%; padding:6px; border:none; background:transparent; border-radius:var(--radius-button); cursor:pointer; color:var(--sidebar-text); transition:all var(--duration-fast) var(--ease); }
.sidebar-collapse-toggle:hover { background:rgba(255,255,255,0.04); color:var(--sidebar-text-hover); }

#sidebar.collapsed .sidebar-logo-text { display:none; }
#sidebar.collapsed .sidebar-section-header { display:none; }
#sidebar.collapsed .sidebar-label { display:none; }
#sidebar.collapsed .sidebar-badge { display:none !important; }
#sidebar.collapsed .sidebar-section { margin-top:12px; }
#sidebar.collapsed .sidebar-nav-item { justify-content:center; padding:8px 0; margin:1px 4px; }
#sidebar.collapsed .sidebar-theme-btn { justify-content:center; padding:7px 0; }

#mobile-topbar { display:none; align-items:center; padding:0 16px; height:48px; background:var(--bg-sidebar); flex-shrink:0; }
.mobile-hamburger { display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:rgba(255,255,255,0.9); cursor:pointer; padding:6px; border-radius:4px; }
.mobile-hamburger:hover { background:rgba(255,255,255,0.1); }

@media (max-width:767px) {
  #sidebar { position:fixed; left:0; top:0; bottom:0; height:100%; width:var(--sidebar-width) !important; transform:translateX(-100%); transition:transform 0.25s ease; z-index:40; }
  #sidebar.mobile-open { transform:translateX(0); }
  #mobile-topbar { display:flex; }
}
@media (min-width:768px) {
  #mobile-topbar { display:none !important; }
  #sidebar-backdrop { display:none !important; }
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-default); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-strong); }