/* ═══════════════════════════════════════════
   JETONOMY CSS DESIGN SYSTEM
   Theme-adaptive via CSS Custom Properties
   Inherits from WP theme.json, falls back to neutral defaults
   ═══════════════════════════════════════════ */

  :root, .jt-app {
    /* Typography — BuddyNext first, then WP theme.json, then inherit for classic themes */
    --jt-font: var(--font-body, var(--wp--preset--font-family--body, inherit));
    --jt-font-heading: var(--font-display, var(--wp--preset--font-family--heading, inherit));
    --jt-font-mono: var(--wp--preset--font-family--monospace, ui-monospace, SFMono-Regular, Menlo, monospace);

    /* Colors — BuddyNext first, then WP theme.json, then neutral fallback */
    --jt-accent: var(--brand, var(--wp--preset--color--primary, #3B82F6));
    --jt-accent-hover: #2563EB;
    --jt-accent-hover: color-mix(in srgb, var(--jt-accent) 85%, black);
    --jt-accent-light: #EFF6FF;
    --jt-accent-light: color-mix(in srgb, var(--jt-accent) 10%, white);
    --jt-accent-muted: #DBEAFE;
    --jt-accent-muted: color-mix(in srgb, var(--jt-accent) 15%, white);

    --jt-text: var(--text-1, var(--wp--preset--color--contrast, #1a1a1a));
    --jt-text-secondary: #4B5563;
    --jt-text-secondary: color-mix(in srgb, var(--jt-text) 70%, transparent);
    --jt-text-tertiary: #6B7280;
    --jt-text-tertiary: color-mix(in srgb, var(--jt-text) 60%, transparent);

    --jt-bg: var(--bg, var(--wp--preset--color--base, #ffffff));
    --jt-bg-subtle: #F9FAFB;
    --jt-bg-subtle: color-mix(in srgb, var(--jt-text) 3%, var(--jt-bg));
    --jt-bg-muted: #F3F4F6;
    --jt-bg-muted: color-mix(in srgb, var(--jt-text) 6%, var(--jt-bg));
    --jt-bg-hover: #F9FAFB;
    --jt-bg-hover: color-mix(in srgb, var(--jt-text) 4%, var(--jt-bg));

    --jt-border: rgba(0,0,0,0.1);
    --jt-border: color-mix(in srgb, var(--jt-text) 10%, transparent);
    --jt-border-strong: rgba(0,0,0,0.18);
    --jt-border-strong: color-mix(in srgb, var(--jt-text) 18%, transparent);

    /* Semantic colors — BuddyNext first, then hardcoded fallback */
    --jt-success: var(--green, #16a34a);
    --jt-success-light: var(--green-bg, #dcfce7);
    --jt-warn: var(--amber, #ca8a04);
    --jt-warn-light: var(--amber-bg, #fef9c3);
    --jt-danger: var(--red, #dc2626);
    --jt-danger-light: var(--red-bg, #fee2e2);

    /* Trust level colors */
    --jt-tl0: #9ca3af;
    --jt-tl1: #60a5fa;
    --jt-tl2: #34d399;
    --jt-tl3: #a78bfa;
    --jt-tl4: #f472b6;
    --jt-tl5: #fbbf24;

    /* Badge tiers */
    --jt-badge-bronze: #cd7f32;
    --jt-badge-silver: #9ca3af;
    --jt-badge-gold: #f59e0b;

    /* Spacing — BuddyNext first, then WP custom, then hardcoded */
    --jt-radius: var(--r-md, var(--wp--custom--border-radius, 8px));
    --jt-radius-sm: var(--r-sm, calc(var(--jt-radius) * 0.5));
    --jt-radius-lg: var(--r-lg, calc(var(--jt-radius) * 1.5));
    --jt-radius-full: var(--r-full, 9999px);

    /* Transitions */
    --jt-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --jt-dur: 0.15s;

    /* Constants — absolute values that do NOT adapt to the active theme */
    --jt-white: #ffffff;                 /* text/icons on colored backgrounds */
    --jt-code-bg: #1e1e1e;              /* code block bg — always dark (syntax highlighter) */
    --jt-code-fg: #d4d4d4;              /* code block text — always light */

    /* Warning variants */
    --jt-warn-dark: #7c5c00;
    --jt-warn-dark: color-mix(in srgb, var(--jt-warn) 80%, black);
    --jt-warn-border: #ffe082;
    --jt-warn-border: color-mix(in srgb, var(--jt-warn) 50%, white);
  }

  /* Dark mode — ONLY via theme class, never OS preference.
     Themes that support dark mode add .jt-dark class to body or .jt-app.
     This ensures the plugin always matches the theme, not the OS. */
  .jt-dark .jt-app, .jt-app.jt-dark {
    --jt-text: #e5e5e5;
    --jt-text-secondary: rgba(229, 229, 229, 0.65);
    --jt-text-tertiary: rgba(229, 229, 229, 0.4);
    --jt-bg: #171717;
    --jt-bg-subtle: #1e1e1e;
    --jt-bg-muted: #262626;
    --jt-bg-hover: #1f1f1f;
    --jt-border: rgba(255, 255, 255, 0.1);
    --jt-border-strong: rgba(255, 255, 255, 0.18);
    --jt-success-light: #052e16;
    --jt-warn-light: #422006;
    --jt-danger-light: #450a0a;
  }

  /* ── Font size scaling (A / A+ / A++) ─────────────────────────────────────
     Uses the same data-bn-font-scale attribute and bn_font_scale localStorage
     key as BuddyNext so the preference is shared across both plugins.
     Since .jt-app uses rem-based type scale, html font-size % scales everything
     uniformly — just like browser zoom. */
  html[data-bn-font-scale="110"] { font-size: 110%; }
  html[data-bn-font-scale="120"] { font-size: 120%; }

  /* Reset within app — lock down ALL typography so theme styles never leak in.
     Follows BuddyNext type scale: base 15px, headings 1.375→0.8125rem.
     Works identically with or without BuddyNext active. */
  .jt-app { font-family: var(--jt-font); font-size: 0.9375rem; line-height: 1.65; color: var(--jt-text); }
  .jt-app *, .jt-app *::before, .jt-app *::after { box-sizing: border-box; }

  /* Heading reset — override BuddyX/WordPress heading styles within the app */
  .jt-app h1 { font-family: var(--jt-font-heading); font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin: 0; }
  .jt-app h2 { font-family: var(--jt-font-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 0; }
  .jt-app h3 { font-family: var(--jt-font-heading); font-size: 1.125rem; font-weight: 700; line-height: 1.35; margin: 0; }
  .jt-app h4 { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--jt-text-tertiary); margin: 0; }
  .jt-app h5 { font-size: 0.8125rem; font-weight: 600; margin: 0; }
  .jt-app h6 { font-size: 0.75rem; font-weight: 600; margin: 0; }
  .jt-app p { margin: 0 0 0.75em; }
  .jt-app button, .jt-app input, .jt-app select, .jt-app textarea { font-family: var(--jt-font); font-size: inherit; }

  /* Links inherit text color by default (Notion-style).
     Only explicit .jt-link or interactive elements use accent color. */
  .jt-app a { color: inherit; text-decoration: none; transition: color var(--jt-dur); }
  .jt-app a:hover { color: var(--jt-text-secondary); }

  /* ── Community Sub-Navigation (below theme header) ── */
  .jt-community-nav { border-bottom: 1px solid var(--jt-border); margin-bottom: 24px; }
  .jt-community-nav-inner { display: flex; align-items: center; justify-content: space-between; }
  .jt-community-nav-links { display: flex; gap: 2px; }
  .jt-community-nav-links a { font-size: 0.9375rem; color: var(--jt-text-secondary); font-weight: 500; padding: 10px 14px; border-bottom: 2px solid transparent; transition: all var(--jt-dur) var(--jt-ease); }
  .jt-community-nav-links a:hover { color: var(--jt-text); border-bottom-color: var(--jt-border-strong); }
  .jt-community-nav-links a.active { color: var(--jt-text); border-bottom-color: var(--jt-accent); font-weight: 600; }
  .jt-community-nav-actions { display: flex; align-items: center; gap: 8px; }
  .jt-community-nav-notif { background: none; color: var(--jt-text-secondary); display: flex; align-items: center; gap: 4px; padding: 8px; border: none; border-radius: var(--jt-radius-full); transition: all var(--jt-dur); position: relative; }
  .jt-community-nav-notif:hover { color: var(--jt-text); background: var(--jt-bg-muted); border: none; }
  .jt-community-nav-badge { background: var(--jt-danger); color: var(--jt-white); font-size: 0.75rem; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }

  /* Legacy header classes kept for backward compatibility */
  .jt-header { display: none; } /* Hidden — theme header handles this */

  /* ── Avatar ── */
  .jt-avatar { border-radius: 50%; background: var(--jt-bg-muted); color: var(--jt-text-secondary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-family: var(--jt-font); flex-shrink: 0; }
  .jt-avatar-sm { width: 30px; height: 30px; font-size: 0.75em; }
  .jt-avatar-md { width: 36px; height: 36px; font-size: 0.875em; }
  .jt-avatar-lg { width: 48px; height: 48px; font-size: 1.125em; }
  .jt-avatar img, img.jt-avatar { border-radius: 50%; object-fit: cover; }

  /* ── Online status indicator ── */
  .jt-avatar-wrap { position: relative; display: inline-block; }
  .jt-avatar-wrap.is-online::after { content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: var(--jt-success); border-radius: var(--jt-radius-full); border: 2px solid var(--jt-bg); box-sizing: content-box; }

  /* ── Layout ── */
  /* Force the app wrapper to fill the theme's container — prevents flex/grid parents from shrinking it. */
  #jetonomy-app { width: 100%; min-width: 0; flex: 1 1 100%; }
  /* max-width is set dynamically via --jt-container-width (injected by PHP from theme settings).
     Detection order: Jetonomy setting → theme.json wideSize → $content_width → 1200px fallback. */
  .jt-container { max-width: var(--jt-container-width, 1200px); margin: 0 auto; padding: 12px 24px 24px; }
  .jt-two-col { display: grid !important; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
  .jt-two-col > main { min-width: 0; }
  .jt-two-col > .jt-sidebar,
  .jt-two-col > aside { position: sticky; top: 24px; align-self: start; }

  /* ── Theme compatibility ── */
  /* Hide the theme's page title/header on Jetonomy pages — themes inject titles
     like "Recent Posts" or "Blog" because WP sees the community as a blog page. */
  body.jt-page > .page-header,
  body.jt-page .site-main > .page-header,
  body.jt-page .site-content > .page-header,
  body.jt-page #content > .page-header { display: none; }

  /* ── Breadcrumb ── */
  .jt-crumb { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--jt-text-secondary); margin-bottom: 20px; }
  .jt-crumb a { color: var(--jt-text-tertiary); }
  .jt-crumb a:hover { color: var(--jt-text-secondary); }

  /* ── Space cover image ── */
  .jt-space-cover {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--jt-radius, 6px);
    margin-bottom: 16px;
  }
  @media (max-width: 640px) {
    .jt-space-cover { height: 120px; border-radius: 0; margin-left: -16px; margin-right: -16px; }
  }

  /* ── Space header ── */
  .jt-space-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--jt-border); }
  .jt-space-emoji { font-size: 2em; }
  .jt-space-head h1 { font-family: var(--jt-font-heading); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  .jt-space-desc { color: var(--jt-text-secondary); font-size: 0.9375rem; line-height: 1.5; margin-top: 6px; }
  .jt-space-nums { display: flex; gap: 20px; margin-left: auto; }
  .jt-num { text-align: center; }
  .jt-num-val { font-family: var(--jt-font-mono); font-size: 1.25rem; font-weight: 700; }
  .jt-num-lbl { font-size: 0.8125rem; color: var(--jt-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }

  /* ── Toolbar ── */
  .jt-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .jt-pills { display: flex; gap: 2px; background: var(--jt-bg-muted); border-radius: var(--jt-radius-full); padding: 3px; }
  .jt-pill { padding: 5px 14px; font-size: 0.875rem; font-weight: 500; color: var(--jt-text-secondary); border-radius: var(--jt-radius-full); transition: all var(--jt-dur) var(--jt-ease); border: none; background: none; cursor: pointer; font-family: var(--jt-font); }
  .jt-pill:hover { color: var(--jt-text); }
  .jt-pill.on, .jt-pill.active { background: var(--jt-bg); color: var(--jt-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 -2px 0 var(--jt-accent); }

  /* ── Buttons ── */
  .jt-app .jt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--jt-radius-full); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: all var(--jt-dur) var(--jt-ease); border: none; cursor: pointer; font-family: var(--jt-font); }
  .jt-app .jt-btn-fill, .jt-app a.jt-btn-fill, .jt-app button.jt-btn-fill { background: var(--jt-accent); color: var(--jt-white); }
  .jt-app .jt-btn-fill:hover, .jt-app a.jt-btn-fill:hover { background: var(--jt-accent-hover); color: var(--jt-white); text-decoration: none; }
  .jt-app .jt-btn-ghost, .jt-app a.jt-btn-ghost { color: var(--jt-text-secondary); border: 1.5px solid var(--jt-border-strong); background: var(--jt-bg); }
  .jt-app .jt-btn-ghost:hover, .jt-app a.jt-btn-ghost:hover { background: var(--jt-bg-hover); color: var(--jt-text); border-color: var(--jt-border-strong); text-decoration: none; }

  /* ── Topic list ── */
  .jt-topics { border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); overflow: hidden; }
  .jt-row { display: grid !important; grid-template-columns: 48px 1fr 80px 80px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--jt-border); transition: background 0.1s; cursor: pointer; }
  .jt-row:last-child { border-bottom: none; }
  .jt-row:hover { background: var(--jt-bg-hover); }
  .jt-row.pinned { background: var(--jt-accent-muted); }
  a.jt-row { text-decoration: none; color: inherit; display: grid; grid-template-columns: 48px 1fr 80px 80px; gap: 12px; align-items: center; }
  a.jt-row:hover { color: inherit; }
  .jt-row-main { min-width: 0; }
  .jt-row-title { font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--jt-text); }
  .jt-row:hover .jt-row-title { color: var(--jt-text-secondary); }
  .jt-row-sub { font-size: 0.8125rem; color: var(--jt-text-tertiary); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .jt-row-stat { text-align: center; }
  .jt-row-stat-n { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 600; }
  .jt-row-stat-l { font-size: 0.9375rem; color: var(--jt-text-secondary); }

  /* ── Vote buttons ── */
  .jt-votes { display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .jt-v-btn { width: 26px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--jt-text-secondary); font-size: 0.8125rem; border-radius: 3px; transition: all 0.1s; border: none; background: none; cursor: pointer; }
  .jt-v-btn:hover { color: var(--jt-text-secondary); background: var(--jt-accent-muted); }
  .jt-v-btn.jt-voted { color: var(--jt-accent); }
  .jt-act.voted { color: var(--jt-accent); }
  .jt-v-num { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 700; }

  /* ── Tags ── */
  .jt-tag { font-size: 0.9375rem; font-weight: 500; padding: 1px 7px; border-radius: var(--jt-radius-full); background: var(--jt-bg-muted); color: var(--jt-text-secondary); display: inline-block; }
  .jt-tag-qa { background: var(--jt-success-light); color: var(--jt-success); }
  .jt-tag-ideas { background: var(--jt-warn-light); color: var(--jt-warn); }

  /* ── Inline mentions & hashtag links ── */
  .jt-mention { color: var(--jt-accent); font-weight: 600; }
  .jt-mention:hover { text-decoration: underline; }
  .jt-tag-link { color: var(--jt-accent); }
  .jt-tag-link:hover { text-decoration: underline; }

  /* ── Trust level badge ── */
  .jt-tl { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; color: var(--jt-white); font-family: var(--jt-font-mono); }
  .jt-tl[data-jt-tl="0"] { background: var(--jt-tl0); }
  .jt-tl[data-jt-tl="1"] { background: var(--jt-tl1); }
  .jt-tl[data-jt-tl="2"] { background: var(--jt-tl2); }
  .jt-tl[data-jt-tl="3"] { background: var(--jt-tl3); }
  .jt-tl[data-jt-tl="4"] { background: var(--jt-tl4); }
  .jt-tl[data-jt-tl="5"] { background: var(--jt-tl5); }

  /* ── Post ── */
  .jt-post { border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); overflow: hidden; margin-bottom: 20px; }
  .jt-post-head { padding: 20px; border-bottom: 1px solid var(--jt-border); position: relative; }
  .jt-post-head h1 { font-family: var(--jt-font-heading); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 10px; padding-right: 6rem; }
  .jt-post-head > .jt-btn-sm { position: absolute; top: 20px; right: 20px; }
  .jt-meta { display: flex; align-items: center; gap: 10px; color: var(--jt-text-secondary); }
  .jt-meta strong { color: var(--jt-text); }
  .jt-post-body { padding: 24px; font-size: 1rem; line-height: 1.8; }
  .jt-post-body p { margin: 0 0 12px; }
  .jt-post-body code { background: var(--jt-bg-muted); padding: 2px 6px; border-radius: 4px; font-family: var(--jt-font-mono); }
  .jt-post-body pre { background: var(--jt-code-bg); color: var(--jt-code-fg); padding: 16px; border-radius: var(--jt-radius); overflow-x: auto; font-family: var(--jt-font-mono); line-height: 1.6; margin: 0 0 12px; }
  .jt-post-foot { display: flex; align-items: center; gap: 4px; padding: 10px 16px; border-top: 1px solid var(--jt-border); }

  /* ── Action buttons ── */
  .jt-act { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--jt-radius-full); font-size: 0.8125rem; color: var(--jt-text-tertiary); font-weight: 500; transition: all 0.1s; border: none; background: none; cursor: pointer; font-family: var(--jt-font); }
  .jt-act:hover { background: var(--jt-bg-muted); color: var(--jt-text-secondary); border: none; }
  .jt-act .n { font-family: var(--jt-font-mono); font-weight: 700; }

  /* ── Replies ── */
  .jt-replies-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .jt-replies-head h3 { font-family: var(--jt-font-heading); font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .jt-count-pill { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 600; padding: 2px 8px; border-radius: var(--jt-radius-full); background: var(--jt-accent); color: var(--jt-white); }

  .jt-reply { border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); margin-bottom: 10px; overflow: hidden; transition: border-color var(--jt-dur); }
  .jt-reply:hover { border-color: var(--jt-border-strong); }
  .jt-reply.accepted { border-color: var(--jt-success); border-width: 2px; }
  .jt-reply.accepted .jt-reply-head { background: var(--jt-success-light); }
  .jt-reply-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--jt-bg-subtle); }
  .jt-reply-body { padding: 16px 18px; font-size: 1rem; line-height: 1.75; }
  .jt-reply-body p { margin: 0 0 10px; }
  .jt-reply-foot { display: flex; gap: 4px; padding: 6px 12px 10px; }
  .jt-accepted-tag { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 0.9375rem; font-weight: 600; color: var(--jt-success); }
  /* Threaded reply nesting — up to 3 levels */
  .jt-nested { margin-left: 24px; position: relative; }
  .jt-nested::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px; background: var(--jt-border); border-radius: 1px; }
  .jt-nested-1 { margin-left: 24px; }
  .jt-nested-2 { margin-left: 24px; }
  .jt-nested-3 { margin-left: 24px; }

  /* Gap loader — in-between divider */
  .jt-load-gap { text-align: center; padding: 16px 0; position: relative; }
  .jt-load-gap::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--jt-border); }
  .jt-load-gap-btn { position: relative; z-index: 1; background: var(--jt-bg) !important; padding: 8px 20px; border-radius: var(--jt-radius-full); }

  /* Reply-to indicator */
  .jt-replying-to { font-size: 0.9375rem; color: var(--jt-text-tertiary); padding: 8px 14px; border-left: 3px solid var(--jt-accent); background: var(--jt-bg-subtle); margin-bottom: 8px; border-radius: 0 var(--jt-radius) var(--jt-radius) 0; display: flex; align-items: center; justify-content: space-between; }
  .jt-replying-to-cancel { cursor: pointer; color: var(--jt-text-tertiary); border: none; background: none; padding: 4px; }

  /* ── Composer ── */
  .jt-editor { border: 1.5px solid var(--jt-border-strong); border-radius: var(--jt-radius-lg); overflow: hidden; background: var(--jt-bg); transition: border-color 0.2s; }
  .jt-editor:focus-within { border-color: var(--jt-accent); box-shadow: 0 0 0 3px var(--jt-accent-muted); }
  .jt-editor-bar { display: flex; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--jt-border); background: var(--jt-bg-subtle); position: relative; }
  .jt-editor-bar button { min-width: 32px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--jt-radius-sm); color: var(--jt-text-secondary); font-size: 1rem; transition: all 0.1s; border: none; background: none; cursor: pointer; padding: 0; }
  .jt-editor-bar button:hover, .jt-editor-bar button:focus { background: var(--jt-bg); color: var(--jt-text); border: none; }
  .jt-editor-body { padding: 16px; min-height: 120px; color: var(--jt-text); outline: none; font-family: var(--jt-font); font-size: 1rem; line-height: 1.75; }
  .jt-editor-body:empty::before { content: attr(data-placeholder); color: var(--jt-text-secondary); }
  .jt-editor-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--jt-border); }
  .jt-editor-hint { font-size: 0.9375rem; color: var(--jt-text-tertiary); font-family: var(--jt-font-mono); }

  /* ── Card (sidebar) ── */
  .jt-card { border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); padding: 16px; }
  .jt-card h4 { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--jt-text-tertiary); margin: 0 0 12px; }

  /* ── Space card (grid) ── */
  .jt-space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .jt-space-card { transition: all var(--jt-dur); cursor: pointer; }
  .jt-space-card:hover { border-color: var(--jt-border-strong); }

  /* ── Progress bar ── */
  .jt-progress { height: 4px; background: var(--jt-bg-muted); border-radius: 2px; overflow: hidden; }
  .jt-progress-fill { height: 100%; background: var(--jt-accent); border-radius: 2px; transition: width 0.8s var(--jt-ease); }

  /* ── Profile ── */
  .jt-profile { border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); overflow: hidden; margin-bottom: 20px; }
  .jt-profile-banner { height: 120px; background: linear-gradient(135deg, var(--jt-accent), #1e40af); background: linear-gradient(135deg, var(--jt-accent), color-mix(in srgb, var(--jt-accent) 60%, black)); }
  .jt-profile-body { padding: 0 20px 20px; margin-top: -32px; }
  .jt-profile-av { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--jt-bg); background: var(--jt-accent); color: var(--jt-white); display: flex; align-items: center; justify-content: center; font-size: 1.375em; font-weight: 700; margin-bottom: 10px; }
  .jt-profile-name { font-family: var(--jt-font-heading); font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
  .jt-level-tag { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 600; padding: 2px 8px; border-radius: var(--jt-radius-full); background: var(--jt-accent); color: var(--jt-white); }

  .jt-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; padding: 12px; background: var(--jt-bg-subtle); border-radius: var(--jt-radius); }
  .jt-stat { text-align: center; }
  .jt-stat-n { font-family: var(--jt-font-mono); font-size: 1.15rem; font-weight: 700; }
  .jt-stat-l { font-size: 0.8125rem; color: var(--jt-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }

  /* ── Badges ── */
  .jt-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .jt-badge-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: var(--jt-radius); background: var(--jt-bg-subtle); transition: all var(--jt-dur); }
  .jt-badge-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
  .jt-badge-emoji { font-size: 1.5em; }
  .jt-badge-label { font-size: 0.9375rem; font-weight: 600; text-align: center; }
  .jt-badge-tier { font-size: 0.8125rem; font-family: var(--jt-font-mono); color: var(--jt-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }

  /* ── Kanban (ideas) ── */
  .jt-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .jt-col { background: var(--jt-bg-subtle); border-radius: var(--jt-radius-lg); padding: 12px; min-height: 350px; }
  .jt-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid; }
  .jt-col-title { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .jt-col-n { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 600; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--jt-bg); }
  .jt-idea { background: var(--jt-bg); border: 1px solid var(--jt-border); border-radius: var(--jt-radius); padding: 12px; margin-bottom: 8px; cursor: pointer; transition: all var(--jt-dur); }
  .jt-idea:hover { border-color: var(--jt-border-strong); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
  .jt-idea-title { font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
  .jt-idea-votes { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 600; color: var(--jt-text-secondary); }
  .jt-idea-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.9375rem; color: var(--jt-text-tertiary); }

  /* ── Leaderboard ── */
  .jt-leader { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--jt-border); }
  .jt-leader:last-child { border-bottom: none; }
  .jt-leader-rank { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 700; color: var(--jt-text-tertiary); width: 20px; text-align: center; }
  .jt-leader-name { flex: 1; font-weight: 500; }
  .jt-leader-pts { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 600; color: var(--jt-text-secondary); }

  /* ── Trending ── */
  .jt-trend { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--jt-border); }
  .jt-trend:last-child { border-bottom: none; }
  .jt-trend-n { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 700; color: var(--jt-border-strong); min-width: 24px; }
  .jt-trend-title { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; cursor: pointer; }
  .jt-trend-title:hover { color: var(--jt-text-secondary); }
  .jt-trend-meta { font-size: 0.9375rem; color: var(--jt-text-tertiary); margin-top: 2px; }

  /* ── Tags cloud ── */
  .jt-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .jt-tags .jt-tag { cursor: pointer; transition: all 0.1s; }
  .jt-tags .jt-tag:hover { background: var(--jt-accent-muted); color: var(--jt-text-secondary); }

  /* ── Loading ── */
  .jt-loading { text-align: center; padding: 40px; color: var(--jt-text-tertiary); }
  .jt-spinner { width: 24px; height: 24px; border: 2px solid var(--jt-border); border-top-color: var(--jt-text-secondary); border-radius: 50%; animation: jt-spin 0.6s linear infinite; margin: 0 auto 8px; }
  @keyframes jt-spin { to { transform: rotate(360deg); } }

  /* ── Empty state ── */
  .jt-empty { background: var(--jt-bg-muted); text-align: center; padding: 60px 20px; color: var(--jt-text-tertiary); border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); }
  .jt-empty-icon { font-size: 3em; margin-bottom: 12px; }
  .jt-empty-text { font-size: 0.9375rem; margin-bottom: 16px; }

  /* ── Animations ── */
  @keyframes jt-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .jt-anim { animation: jt-fadeIn 0.3s var(--jt-ease) both; }
  .jt-d1 { animation-delay: 0.04s; }
  .jt-d2 { animation-delay: 0.08s; }
  .jt-d3 { animation-delay: 0.12s; }
  .jt-d4 { animation-delay: 0.16s; }

  /* Mobile hamburger */
  .jt-mobile-toggle { display: none; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; color: var(--jt-text-secondary); border: none; background: none; cursor: pointer; }

  @media (max-width: 900px) {
    .jt-two-col { grid-template-columns: 1fr; }
    .jt-sidebar { display: none; }
    .jt-kanban { grid-template-columns: repeat(2, 1fr); }
    .jt-space-head { flex-direction: column; text-align: center; }
    .jt-space-nums { margin-left: 0; }
    .jt-header { padding: 10px 16px; }
    .jt-mobile-toggle { display: flex; }
    .jt-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--jt-bg); z-index: 200; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
    .jt-nav.open { display: flex; }
    .jt-nav.open a { font-size: 1.1rem; padding: 12px 24px; }
    .jt-search { display: none; }
    .jt-nav.open .jt-mobile-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--jt-text-secondary); background: none; border: none; cursor: pointer; }
  }
  @media (max-width: 640px) {
    .jt-container { padding: 16px; }
    .jt-row { grid-template-columns: 40px 1fr 60px; }
    .jt-row-stat:last-child { display: none; }
    .jt-kanban { grid-template-columns: 1fr; }
    .jt-badges { grid-template-columns: repeat(2, 1fr); }
    .jt-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .jt-nested, .jt-nested-1, .jt-nested-2, .jt-nested-3 { margin-left: 12px; }

    /* Mobile: toolbar bar wraps — new post goes full width */
    .jt-bar { flex-wrap: wrap; gap: 8px; }
    .jt-bar > .jt-btn-fill,
    .jt-bar > a.jt-btn-fill { order: 10; width: 100%; text-align: center; justify-content: center; }

    /* Mobile: breadcrumb truncation */
    .jt-crumb { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
    .jt-crumb a, .jt-crumb span { display: inline; }

    /* Mobile: post title size */
    .jt-post-head h1 { font-size: 1.125rem; padding-right: 0; }
    .jt-post-head > .jt-btn-sm { position: static; margin-top: 8px; }

    /* Mobile: action bar wrap */
    .jt-post-foot { flex-wrap: wrap; gap: 6px; }
    .jt-reply-foot { flex-wrap: wrap; gap: 6px; }

    /* Mobile: reply composer */
    .jt-editor-foot { flex-direction: column; gap: 6px; align-items: stretch; }
    .jt-editor-foot .jt-btn { width: 100%; justify-content: center; }
  }

  .jt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  .jt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jt-hidden { display: none !important; }
  .jt-flex { display: flex; }
  .jt-flex-col { display: flex; flex-direction: column; }
  .jt-items-center { align-items: center; }
  .jt-items-start { align-items: flex-start; }
  .jt-justify-between { justify-content: space-between; }
  .jt-flex-1 { flex: 1; min-width: 0; }
  .jt-flex-shrink-0 { flex-shrink: 0; }
  .jt-ml-auto { margin-left: auto; }
  .jt-gap-xs { gap: 4px; }
  .jt-gap-sm { gap: 8px; }
  .jt-gap-10 { gap: 10px; }
  .jt-gap-md { gap: 16px; }
  .jt-gap-12 { gap: 12px; }
  .jt-mt-sm { margin-top: 8px; }
  .jt-mt-10 { margin-top: 10px; }
  .jt-mt-md { margin-top: 16px; }
  .jt-mt-lg { margin-top: 24px; }
  .jt-mb-sm { margin-bottom: 8px; }
  .jt-mb-10 { margin-bottom: 10px; }
  .jt-mb-12 { margin-bottom: 12px; }
  .jt-mb-md { margin-bottom: 16px; }
  .jt-mb-20 { margin-bottom: 20px; }
  .jt-mb-lg { margin-bottom: 24px; }
  .jt-p-md { padding: 16px; }
  .jt-w-full { width: 100%; }
  .jt-text-center { text-align: center; }
  .jt-text-right { text-align: right; }
  .jt-block { display: block; }
  .jt-no-underline { text-decoration: none; }

  /* ── Category header ── */
  .jt-cat-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
  .jt-cat-emoji { font-size: 1.25em; }
  .jt-cat-name { font-family: var(--jt-font-heading); font-size: 1.25rem; font-weight: 700; margin: 0; }
  .jt-cat-desc { font-size: 0.9375rem; color: var(--jt-text-tertiary); }
  .jt-cat-empty { color: var(--jt-text-tertiary); padding: 8px 0; }

  /* ── Space card (home/category) ── */
  .jt-space-card-inner { display: flex; align-items: center; gap: 12px; }
  .jt-space-card-emoji { font-size: 1.75em; flex-shrink: 0; line-height: 1; }
  .jt-space-card-body { min-width: 0; flex: 1; }
  .jt-space-card-title { font-size: 0.9375rem; font-weight: 600; color: var(--jt-text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .jt-space-card-excerpt { font-size: 0.8125rem; color: var(--jt-text-tertiary); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .jt-space-card-stats { display: flex; gap: 12px; margin-top: 6px; }
  .jt-space-card-stat { font-size: 0.8125rem; color: var(--jt-text-tertiary); }
  .jt-space-card-stat strong { color: var(--jt-text-secondary); font-weight: 600; }

  /* ── Space status banner ── */
  .jt-status-banner { padding: 10px 16px; border-radius: var(--jt-radius); font-size: 0.9375rem; font-weight: 500; margin-bottom: 12px; }
  .jt-status-banner--archived { background: var(--jt-bg-muted); color: var(--jt-text-secondary); border: 1px solid var(--jt-border); }
  .jt-status-banner--locked { background: var(--jt-warn-light); color: var(--jt-warn-dark); border: 1px solid var(--jt-warn-border); }

  /* ── Status badges ── */
  .jt-badge-resolved { background: var(--jt-success-light); color: var(--jt-success); font-size: 0.8125rem; font-weight: 600; padding: 2px 8px; border-radius: var(--jt-radius-full); }
  .jt-badge-closed { background: var(--jt-bg-muted); color: var(--jt-text-tertiary); font-size: 0.8125rem; font-weight: 600; padding: 2px 8px; border-radius: var(--jt-radius-full); }
  .jt-badge-danger { background: var(--jt-danger); color: var(--jt-white); font-size: 0.8125rem; font-weight: 700; padding: 3px 10px; border-radius: var(--jt-radius-full); }
  .jt-badge-accent { font-size: 0.8125rem; font-weight: 600; background: var(--jt-accent-muted); color: var(--jt-text-secondary); padding: 2px 8px; border-radius: var(--jt-radius-full); }

  /* ── Inline notices (pending, spam, etc.) ── */
  .jt-notice { padding: 10px 16px; border-radius: var(--jt-radius); font-size: 0.9375rem; margin-bottom: 16px; }
  .jt-notice-warning { background: var(--jt-warn-light); color: var(--jt-warn-dark); border-left: 4px solid var(--jt-warn); }

  /* ── View count ── */
  .jt-view-count { margin-left: auto; font-size: 0.9375rem; color: var(--jt-text-tertiary); }

  /* ── Mod/edit actions ── */
  .jt-actions-group { display: flex; gap: 4px; margin-left: 8px; }

  /* ── Empty with padding ── */
  .jt-empty-compact { text-align: center; padding: 30px 20px; color: var(--jt-text-tertiary); }

  /* ── Reply composer wrapper ── */
  .jt-reply-composer { margin-top: 24px; }
  .jt-reply-composer h4 { font-weight: 600; margin-bottom: 10px; }

  /* ── Closed post notice ── */
  .jt-closed-notice { text-align: center; padding: 20px; color: var(--jt-text-tertiary); background: var(--jt-bg-subtle); border-radius: var(--jt-radius); margin-top: 20px; }

  /* ── Leaderboard ── */
  /* Leaderboard uses jt-two-col now — no max-width needed */
  .jt-page-title { font-family: var(--jt-font-heading); font-size: 1.375rem; font-weight: 700; margin: 0; }
  .jt-page-title-sm { font-size: 1.25rem; }
  .jt-leader-stats { display: flex; gap: 16px; margin-left: auto; text-align: right; }
  .jt-leader-stat-val { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 600; }
  .jt-leader-stat-lbl { font-size: 0.8125rem; color: var(--jt-text-tertiary); text-transform: uppercase; letter-spacing: .05em; }
  .jt-leader-pad { padding: 10px 0; }

  /* ── Sidebar extras ── */
  .jt-sidebar-link { margin-top: 10px; }
  .jt-sidebar-link a { font-size: 0.9375rem; color: var(--jt-text-secondary); }
  .jt-sidebar-about { color: var(--jt-text-secondary); line-height: 1.5; margin-bottom: 12px; }
  .jt-sidebar-stats { display: flex; gap: 20px; margin-bottom: 12px; }
  .jt-sidebar-stat { display: flex; flex-direction: column; }
  .jt-sidebar-stat strong { font-family: var(--jt-font-mono); font-size: 1.125rem; font-weight: 700; }
  .jt-sidebar-stat span { font-size: 0.8125rem; color: var(--jt-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
  .jt-sidebar-meta { display: flex; gap: 6px; flex-wrap: wrap; }
  .jt-sidebar-link-text { font-size: 0.9375rem; color: var(--jt-accent); font-weight: 500; }
  .jt-tag-count { color: var(--jt-text-tertiary); font-size: 0.9375rem; margin-left: 3px; }

  /* ── Notification list ── */
  /* Notifications uses jt-two-col now — no max-width needed */
  .jt-notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--jt-border); text-decoration: none; color: inherit; }
  .jt-notif-item.unread { background: var(--jt-accent-muted); }
  .jt-notif-body { flex: 1; min-width: 0; }
  .jt-notif-text { font-size: 0.9375rem; line-height: 1.5; }
  .jt-notif-time { font-size: 0.75rem; color: var(--jt-text-tertiary); margin-top: 2px; }
  .jt-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jt-accent); flex-shrink: 0; margin-top: 4px; }

  /* ── Moderation ── */
  /* Moderation — full width in container */
  .jt-mod-flag { padding: 16px; border-bottom: 1px solid var(--jt-border); }
  .jt-mod-flag-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .jt-mod-flag-type { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: var(--jt-radius-full); background: var(--jt-danger-light); color: var(--jt-danger); }
  .jt-mod-flag-reason { font-size: 0.9375rem; font-weight: 500; color: var(--jt-text-secondary); }
  .jt-mod-flag-reporter { margin-left: auto; font-size: 0.9375rem; color: var(--jt-text-tertiary); }
  .jt-mod-flag-note { font-size: 0.875rem; color: var(--jt-text-secondary); margin-bottom: 8px; padding: 8px; background: var(--jt-bg-subtle); border-radius: var(--jt-radius-sm); }
  .jt-mod-flag-actions { display: flex; gap: 8px; align-items: center; }
  .jt-app .jt-btn-danger, .jt-app a.jt-btn-danger { background: var(--jt-danger); color: var(--jt-white); }
  .jt-app .jt-btn-danger:hover { color: var(--jt-white); }

  /* ── Search ── */
  /* ── Search page form (separate from header search) ── */
  .jt-search-page-form { margin-bottom: 24px; }
  .jt-search-page-input { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 14px 20px; border: 2px solid var(--jt-border); border-radius: var(--jt-radius-lg); background: var(--jt-bg); transition: border-color 0.2s, box-shadow 0.2s; }
  .jt-search-page-input:focus-within { border-color: var(--jt-accent); box-shadow: 0 0 0 3px var(--jt-accent-muted); }
  .jt-search-page-icon { flex-shrink: 0; color: var(--jt-text-tertiary); }
  .jt-search-page-input input { flex: 1; border: none !important; background: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; font-family: inherit; font-size: inherit; color: var(--jt-text); box-shadow: none !important; }
  .jt-search-page-input input::placeholder { color: var(--jt-text-tertiary); }
  .jt-section-label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--jt-text-tertiary); margin-bottom: 8px; }
  .jt-search-result-count { color: var(--jt-text-tertiary); }

  /* ── Tag page ── */
  .jt-tag-hero { font-size: 1.125rem; padding: 4px 14px; }
  .jt-tag-count-label { color: var(--jt-text-tertiary); }

  /* ── Profile page extras ── */
  .jt-profile-bio { font-size: 0.9375rem; color: var(--jt-text-secondary); margin-top: 8px; line-height: 1.6; }
  .jt-profile-meta { font-size: 0.8125rem; display: flex; gap: 16px; margin-top: 10px; color: var(--jt-text-tertiary); }
  .jt-section-heading { font-family: var(--jt-font-heading); font-size: 1.125rem; font-weight: 700; margin-bottom: 12px; }

  /* ── Reply card extras ── */
  .jt-reply-author { }
  .jt-reply-op { font-size: 0.9375rem; color: var(--jt-text-secondary); font-weight: 600; }
  .jt-reply-time { color: var(--jt-text-tertiary); font-size: 0.9375rem; }
  .jt-reply-edit { color: var(--jt-text-tertiary); margin-left: auto; }

  /* ── Time stat on post rows ── */
  .jt-row-time { font-size: 0.9375rem; color: var(--jt-text-secondary); }

  /* ── Category page header ── */
  .jt-cat-page-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .jt-cat-page-emoji { font-size: 1.75em; }
  .jt-cat-page-desc { color: var(--jt-text-secondary); margin-top: 4px; }

  /* ── Space members ── */
  .jt-member-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--jt-border); }
  .jt-member-name { font-weight: 600; color: var(--jt-text); }
  .jt-member-joined { font-size: 0.9375rem; color: var(--jt-text-tertiary); margin-top: 2px; }
  .jt-member-rep { font-family: var(--jt-font-mono); font-size: 0.9375rem; font-weight: 600; color: var(--jt-text-secondary); }
  .jt-member-rep-label { font-weight: 400; color: var(--jt-text-tertiary); }
  .jt-member-sub { color: var(--jt-text-tertiary); margin-top: 2px; }

  /* ── Space roadmap extras ── */
  .jt-idea-excerpt { font-size: 0.9375rem; color: var(--jt-text-tertiary); margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .jt-kanban-empty { font-size: 0.9375rem; color: var(--jt-text-tertiary); text-align: center; padding: 20px 0; }

  /* ── Edit profile ── */
  .jt-avatar-row { display: flex; align-items: center; gap: 12px; }
  .jt-avatar-round { border-radius: 50%; }
  .jt-avatar-hint { font-size: 0.8125rem; color: var(--jt-text-tertiary); }

  /* ── Composer login ── */
  .jt-editor-login { text-align: center; padding: 20px; }

  /* ── Narrow container ── */
  .jt-narrow { max-width: 860px; margin-inline: auto; }
  .jt-narrower { max-width: 600px; }

  /* ── Card flush (no padding, overflow hidden) ── */
  .jt-card-flush { padding: 0; overflow: hidden; }

  /* ── Forms ── */
  .jt-form-group { margin-bottom: 16px; }
  .jt-label { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--jt-text); margin-bottom: 6px; }
  .jt-label-hint { font-size: 0.8125rem; font-weight: 400; color: var(--jt-text-tertiary); }
  .jt-input { width: 100%; padding: 11px 16px; border: 1.5px solid var(--jt-border-strong) !important; border-radius: var(--jt-radius); font-family: var(--jt-font); font-size: 1rem; color: var(--jt-text); background: var(--jt-bg); transition: border-color 0.15s, box-shadow 0.15s; box-shadow: none !important; outline: none !important; -webkit-appearance: none; }
  .jt-input:focus { outline: none !important; border-color: var(--jt-accent) !important; box-shadow: 0 0 0 3px var(--jt-accent-muted) !important; }
  .jt-input::placeholder { color: var(--jt-text-secondary); }
  .jt-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; align-items: center; }
  .jt-new-post-form { margin-top: 16px; }
  .jt-post-create-title { font-family: var(--jt-font-heading); font-size: 1.375rem; font-weight: 700; margin: 0; }
  .jt-post-create-subtitle { color: var(--jt-text-secondary); font-size: 1rem; margin: 6px 0 24px; }

  /* ── Publish mode split-button ── */
  .jt-publish-mode { position: relative; display: inline-flex; }
  .jt-publish-mode__submit { border-radius: var(--jt-radius) 0 0 var(--jt-radius); }
  .jt-publish-mode__toggle { border-radius: 0 var(--jt-radius) var(--jt-radius) 0; border-left: 1px solid rgba(255,255,255,0.25); min-width: 34px; padding-left: 8px; padding-right: 8px; }
  .jt-publish-mode__menu { position: absolute; bottom: calc(100% + 6px); right: 0; background: var(--jt-bg); border: 1px solid var(--jt-border); border-radius: var(--jt-radius); box-shadow: 0 4px 16px rgba(0,0,0,0.12); min-width: 180px; z-index: 200; overflow: hidden; }
  .jt-publish-mode__menu[hidden] { display: none; }
  .jt-publish-mode__option { display: block; width: 100%; padding: 10px 16px; background: none; border: none; text-align: left; font-size: 0.9375rem; color: var(--jt-text); cursor: pointer; transition: background var(--jt-dur); }
  .jt-publish-mode__option:hover { background: var(--jt-bg-hover); }

  /* ── Schedule panel ── */
  .jt-schedule-panel { margin-top: 16px; padding: 16px; background: var(--jt-bg-subtle); border-radius: var(--jt-radius); border: 1px solid var(--jt-border); }
  .jt-schedule-panel[hidden] { display: none; }
  .jt-input--datetime { font-family: var(--jt-font); }

  /* ── Draft / scheduled badges on profile ── */
  .jt-badge--draft { background: var(--jt-warn-light); color: var(--jt-warn); font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: var(--jt-radius-full); display: inline-block; margin-left: 8px; vertical-align: middle; }
  .jt-badge--scheduled { background: var(--jt-accent-light); color: var(--jt-accent); font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: var(--jt-radius-full); display: inline-block; margin-left: 8px; vertical-align: middle; }
  .jt-row--draft { opacity: 0.9; }

  @media (max-width: 640px) {
    .jt-form-actions { flex-wrap: wrap; }
    .jt-publish-mode { width: 100%; }
    .jt-publish-mode__submit { flex: 1; border-radius: var(--jt-radius) 0 0 var(--jt-radius); }
    .jt-publish-mode__menu { right: 0; left: 0; min-width: unset; }
  }

  /* ── Pagination ── */
  .jt-pagination { text-align: center; margin: 20px 0; }
  .jt-pagination-btn { min-width: 200px; justify-content: center; }

  /* ── Prism.js override for theme consistency ── */
  .jt-app pre[class*="language-"], .jt-app code[class*="language-"] { font-family: var(--jt-font-mono); }
  .jt-dark .jt-app pre[class*="language-"] { filter: invert(1) hue-rotate(180deg); }

  /* ── User profile links ── */
  .jt-user-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
  .jt-user-link:hover { color: inherit; }
  .jt-user-link:hover .jt-user-name { text-decoration: underline; }
  .jt-user-name { font-weight: 500; }

  /* ── Search result excerpt ── */
  .jt-row-excerpt { color: var(--jt-text-tertiary); margin-top: 4px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* ── Replies section ── */
  .jt-replies-section { scroll-margin-top: 80px; }
  .jt-replies-controls { display: flex; align-items: center; gap: 12px; }
  .jt-replies-status { font-size: 0.9375rem; color: var(--jt-text-tertiary); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--jt-border); }

  /* Load More button — centered, prominent */
  .jt-load-more { text-align: center; padding: 24px 0; }
  .jt-load-more-btn { width: 100%; max-width: 400px; justify-content: center; padding: 12px 24px; font-size: 0.9375rem; font-weight: 600; border: 2px solid var(--jt-border); border-radius: var(--jt-radius-lg); transition: all 0.2s; }
  .jt-load-more-btn:hover { border-color: var(--jt-accent); background: var(--jt-accent-muted); }
  .jt-load-more-btn:disabled { opacity: 0.6; cursor: wait; }

  /* ── Thread collapse/expand ── */
  .jt-thread-toggle-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; margin: 4px 0 4px 24px;
    border: none; background: none; color: var(--jt-text-tertiary);
    font-size: 0.9375rem; font-weight: 500; cursor: pointer;
    border-radius: var(--jt-radius-full);
    transition: all 0.2s;
    font-family: var(--jt-font);
  }
  .jt-thread-toggle-btn:hover { color: var(--jt-text-secondary); background: var(--jt-bg-muted); }

  .jt-thread-children {
    overflow: hidden;
    max-height: 5000px;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 1;
  }
  .jt-thread-children.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
  }

  /* ── Reply entrance animation ── */
  .jt-reply {
    animation: jt-slideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes jt-slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Stagger animation for server-rendered replies */
  .jt-replies-list > :nth-child(1) .jt-reply { animation-delay: 0s; }
  .jt-replies-list > :nth-child(2) .jt-reply { animation-delay: 0.03s; }
  .jt-replies-list > :nth-child(3) .jt-reply { animation-delay: 0.06s; }
  .jt-replies-list > :nth-child(4) .jt-reply { animation-delay: 0.09s; }
  .jt-replies-list > :nth-child(5) .jt-reply { animation-delay: 0.12s; }

  /* ── Voting micro-interaction ── */
  .jt-v-btn:active { transform: scale(1.3); }
  .jt-v-num { transition: transform 0.2s ease; }

  /* ── Reply card hover — subtle shift ── */
  .jt-reply { transition: border-color 0.2s, transform 0.15s ease; }
  .jt-reply:hover { transform: translateX(2px); }

  /* ── New replies indicator banner ── */
  .jt-new-replies-banner {
    position: sticky; bottom: 20px; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    margin: 16px auto; max-width: 300px;
    padding: 10px 20px; border-radius: var(--jt-radius-full);
    background: var(--jt-accent); color: var(--jt-white);
    font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    animation: jt-bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.2s;
  }
  .jt-new-replies-banner:hover { transform: scale(1.05); }
  @keyframes jt-bounceIn {
    from { opacity: 0; transform: scale(0.8) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* ── Infinite scroll sentinel ── */
  .jt-scroll-sentinel { height: 1px; margin-top: -1px; }

  /* ── Gap loader line with pulse ── */
  .jt-load-gap::before {
    animation: jt-pulse 2s ease infinite;
  }
  @keyframes jt-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }

  /* ── Replying-to indicator slide in ── */
  .jt-replying-to {
    animation: jt-slideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes jt-slideDown {
    from { opacity: 0; transform: translateY(-8px); max-height: 0; padding: 0 14px; }
    to { opacity: 1; transform: translateY(0); max-height: 60px; padding: 8px 14px; }
  }

  /* ── Post actions — hover reveal ── */
  .jt-post-foot .jt-act { opacity: 0.7; transition: opacity 0.15s; }
  .jt-post-foot:hover .jt-act { opacity: 1; }
  .jt-post-foot .jt-act:first-child { opacity: 1; }

  /* ── Smooth focus transitions ── */
  .jt-editor-body:focus { box-shadow: inset 0 0 0 1px var(--jt-accent-muted); }

  /* ── Reply depth visual indicator (colored thread lines) ── */
  .jt-nested-1::before { background: var(--jt-accent); opacity: 0.3; }
  .jt-nested-2::before { background: var(--jt-success); opacity: 0.3; }
  .jt-nested-3::before { background: var(--jt-warn); opacity: 0.3; }

  /* ═══════════════════════════════════════════
     PREMIUM UX — Uniform Across All Pages
     Entrance animations, hover states, micro-interactions
     ═══════════════════════════════════════════ */

  /* ── 1. Entrance Animations — staggered fade-in ── */

  /* Topic list rows */
  .jt-topics > a:nth-child(1) { animation: jt-slideUp 0.3s ease both; animation-delay: 0s; }
  .jt-topics > a:nth-child(2) { animation: jt-slideUp 0.3s ease both; animation-delay: 0.03s; }
  .jt-topics > a:nth-child(3) { animation: jt-slideUp 0.3s ease both; animation-delay: 0.05s; }
  .jt-topics > a:nth-child(4) { animation: jt-slideUp 0.3s ease both; animation-delay: 0.07s; }
  .jt-topics > a:nth-child(5) { animation: jt-slideUp 0.3s ease both; animation-delay: 0.09s; }
  .jt-topics > a:nth-child(n+6) { animation: jt-slideUp 0.3s ease both; animation-delay: 0.1s; }

  /* Search results (div-wrapped rows) */
  .jt-topics > div { animation: jt-slideUp 0.3s ease both; }

  /* Space cards */
  .jt-space-grid > * { animation: jt-slideUp 0.3s ease both; }
  .jt-space-grid > :nth-child(1) { animation-delay: 0s; }
  .jt-space-grid > :nth-child(2) { animation-delay: 0.05s; }
  .jt-space-grid > :nth-child(3) { animation-delay: 0.1s; }
  .jt-space-grid > :nth-child(4) { animation-delay: 0.12s; }
  .jt-space-grid > :nth-child(5) { animation-delay: 0.14s; }
  .jt-space-grid > :nth-child(n+6) { animation-delay: 0.15s; }

  /* Sidebar cards */
  .jt-sidebar > * { animation: jt-slideUp 0.35s ease both; }
  .jt-sidebar > :nth-child(1) { animation-delay: 0.1s; }
  .jt-sidebar > :nth-child(2) { animation-delay: 0.2s; }
  .jt-sidebar > :nth-child(3) { animation-delay: 0.3s; }

  /* Category sections on home page */
  section { animation: jt-slideUp 0.4s ease both; }

  /* Leaderboard rows */
  .jt-leader { animation: jt-slideUp 0.3s ease both; }

  /* Badge cards */
  .jt-badge-card { animation: jt-slideUp 0.3s ease both; }

  /* ── 2. Hover States — ALL Interactive Elements ── */

  /* Space cards — lift on hover */
  .jt-space-card { transition: border-color 0.2s, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .jt-space-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

  /* Topic rows — lift on hover */
  a.jt-row { transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.15s; }
  a.jt-row:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }

  /* Leaderboard rows — hover background */
  .jt-leader { transition: background 0.15s; padding: 8px 12px; margin: 0 -12px; border-radius: var(--jt-radius); }
  .jt-leader:hover { background: var(--jt-bg-hover); }

  /* Sidebar trending items — hover background */
  .jt-trend { transition: background 0.15s; padding: 6px 8px; margin: 0 -8px; border-radius: var(--jt-radius); }
  .jt-trend:hover { background: var(--jt-bg-hover); }

  /* Tag pills */
  .jt-tag { transition: all 0.15s; }
  .jt-tag:hover { transform: translateY(-1px); }

  /* Notification items */
  .jt-notif-item { transition: background 0.15s; }
  .jt-notif-item:hover { background: var(--jt-bg-hover); }

  /* Member items */
  .jt-member-item { transition: background 0.15s; }
  .jt-member-item:hover { background: var(--jt-bg-hover); }

  /* User profile links */
  .jt-user-link { transition: opacity 0.15s; }
  .jt-user-link:hover { opacity: 0.8; }

  /* Buttons — press effect */
  .jt-btn:active { transform: scale(0.97); }
  .jt-pill:active { transform: scale(0.95); }

  /* Cards — lift and shadow on hover */
  .jt-card { transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .jt-card:hover { border-color: var(--jt-border-strong); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }

  /* ── 3. Community Nav — Active State Animation ── */
  .jt-community-nav-links a { position: relative; }
  .jt-community-nav-links a.active::after {
    content: '';
    position: absolute; bottom: -2px; left: 14px; right: 14px;
    height: 2px; background: var(--jt-accent);
    animation: jt-navUnderline 0.3s ease;
  }
  @keyframes jt-navUnderline {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  /* Use ::after underline instead of static border-bottom */
  .jt-community-nav-links a.active { border-bottom-color: transparent; }

  /* ── 4. Page Title / Heading Animation ── */
  @keyframes jt-fadeTitle {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .jt-space-head h1, .jt-post-head h1, .jt-page-title {
    animation: jt-fadeTitle 0.5s ease both;
  }

  /* ── 5. Breadcrumb Trail Animation ── */
  .jt-crumb { animation: jt-fadeIn 0.4s ease both; animation-delay: 0.05s; }
  .jt-crumb a { transition: color 0.15s; }

  /* ── 6. Empty State Animation ── */
  .jt-empty { animation: jt-fadeIn 0.6s ease both; animation-delay: 0.2s; }
  .jt-empty-icon { animation: jt-emptyPulse 3s ease infinite; }
  @keyframes jt-emptyPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 1; }
  }

  /* ── 7. Sort Pills — Active State Transition ── */
  .jt-pill.on, .jt-pill.active {
    transition: background 0.2s, color 0.15s, box-shadow 0.2s;
  }

  /* ── 8. Profile Page Premium ── */

  /* Profile banner gradient shimmer */
  .jt-profile-banner {
    background-size: 200% 200%;
    animation: jt-gradientShift 8s ease infinite;
  }
  @keyframes jt-gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Stats counter — number pop on load */
  .jt-stat-n { animation: jt-countPop 0.5s ease both; animation-delay: 0.3s; }
  @keyframes jt-countPop {
    from { opacity: 0; transform: scale(0.5); }
    70% { transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Badge cards — staggered entrance */
  .jt-badge-card:nth-child(1) { animation-delay: 0.1s; }
  .jt-badge-card:nth-child(2) { animation-delay: 0.15s; }
  .jt-badge-card:nth-child(3) { animation-delay: 0.2s; }
  .jt-badge-card:nth-child(4) { animation-delay: 0.25s; }
  .jt-badge-card:nth-child(5) { animation-delay: 0.3s; }
  .jt-badge-card:nth-child(6) { animation-delay: 0.35s; }

  /* ── 9. Idea Cards (Kanban) Premium ── */
  .jt-idea { transition: all 0.2s ease; }
  .jt-idea:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }

  /* Kanban columns stagger in */
  .jt-kanban > .jt-col:nth-child(1) { animation: jt-slideUp 0.4s ease both; animation-delay: 0s; }
  .jt-kanban > .jt-col:nth-child(2) { animation: jt-slideUp 0.4s ease both; animation-delay: 0.1s; }
  .jt-kanban > .jt-col:nth-child(3) { animation: jt-slideUp 0.4s ease both; animation-delay: 0.2s; }
  .jt-kanban > .jt-col:nth-child(4) { animation: jt-slideUp 0.4s ease both; animation-delay: 0.3s; }

  /* ── 10. Focus Visible Rings (Accessibility + Premium) ── */
  .jt-app *:focus-visible {
    outline: 2px solid var(--jt-accent);
    outline-offset: 2px;
    border-radius: var(--jt-radius-sm);
  }
  .jt-app *:focus:not(:focus-visible) { outline: none; }

  /* ── 12. Progress Bar Animation ── */
  .jt-progress-fill {
    animation: jt-progressGrow 0.8s ease both;
    animation-delay: 0.3s;
  }
  @keyframes jt-progressGrow {
    from { width: 0; }
  }

  /* ── 11. Reduced Motion — Respect User Preference ── */
  /* Must be last to override all animation rules above */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }


/* Mentions */
.jt-mention { color: var(--jt-accent); font-weight: 500; }

/* ── Image Upload: Drag-over state ── */
.jt-editor-dragover { border-color: var(--jt-accent) !important; background: var(--jt-accent-muted); }
.jt-upload-placeholder { padding: 12px; text-align: center; color: var(--jt-text-tertiary); background: var(--jt-bg-muted); border-radius: var(--jt-radius); margin: 8px 0; animation: jt-pulse 1.5s ease infinite; }

/* ── oEmbed wrappers ── */
.jt-embed { margin: 12px 0; border-radius: var(--jt-radius); overflow: hidden; }
.jt-embed iframe { max-width: 100%; border-radius: var(--jt-radius); }
.jt-embed .twitter-tweet { margin: 0 !important; }

/* ── Instant Search Dropdown ── */
.jt-search-page-form { position: relative; }
.jt-instant-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--jt-bg); border: 1px solid var(--jt-border); border-top: none; border-radius: 0 0 var(--jt-radius-lg) var(--jt-radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: 100; max-height: 400px; overflow-y: auto; }
.jt-instant-result-item { display: block; padding: 12px 18px; border-bottom: 1px solid var(--jt-border); transition: background 0.1s; color: inherit; text-decoration: none; }
.jt-instant-result-item:last-child { border-bottom: none; }
.jt-instant-result-item:hover { background: var(--jt-bg-hover); }
.jt-instant-result-item strong { display: block; font-weight: 600; margin-bottom: 2px; }
.jt-instant-result-item span { color: var(--jt-text-tertiary); font-size: 0.9375rem; }

/* ── G5: Quote Button ── */
.jt-quote-btn { position: absolute; z-index: 200; padding: 6px 14px; background: var(--jt-text); color: var(--jt-bg); border: none; border-radius: var(--jt-radius-full); cursor: pointer; font-weight: 600; font-size: 0.9375rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.1s; }
.jt-quote-btn:hover { transform: scale(1.05); }
.jt-quote { border-left: 3px solid var(--jt-accent); padding: 8px 14px; margin: 8px 0; background: var(--jt-bg-subtle); border-radius: 0 var(--jt-radius) var(--jt-radius) 0; color: var(--jt-text-secondary); }
.jt-quote cite { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--jt-text-tertiary); margin-bottom: 4px; font-style: normal; }

/* ── G6: User Hover Cards ── */
.jt-hover-card { position: absolute; z-index: 300; background: var(--jt-bg); border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); padding: 16px; width: 280px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); animation: jt-fadeIn 0.2s ease; }
.jt-hc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.jt-hc-avatar { border-radius: 50%; }
.jt-hc-name { font-weight: 600; display: block; }
.jt-hc-trust { font-size: 0.9375rem; color: var(--jt-text-tertiary); }
.jt-hc-bio { font-size: 1rem; color: var(--jt-text-secondary); margin: 0 0 8px; line-height: 1.4; }
.jt-hc-stats { display: flex; gap: 16px; font-size: 0.9375rem; color: var(--jt-text-tertiary); font-weight: 500; }

/* ── G8: Keyboard Shortcuts ── */
.jt-kb-focus { outline: 2px solid var(--jt-accent) !important; outline-offset: -2px; }
.jt-shortcut-help { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.jt-shortcut-modal { background: var(--jt-bg); border-radius: var(--jt-radius-lg); padding: 24px; max-width: 360px; width: 90%; box-shadow: 0 16px 48px rgba(0,0,0,0.2); }
.jt-shortcut-modal h3 { margin: 0 0 16px; }
.jt-shortcut-modal table { width: 100%; }
.jt-shortcut-modal td { padding: 6px 0; }
.jt-shortcut-modal kbd { background: var(--jt-bg-muted); padding: 2px 8px; border-radius: 4px; font-family: var(--jt-font-mono); border: 1px solid var(--jt-border); }
.jt-shortcut-modal button { margin-top: 16px; width: 100%; padding: 8px; border-radius: var(--jt-radius); border: 1px solid var(--jt-border); background: none; cursor: pointer; }

/* ── G9: Emoji Picker ── */
.jt-emoji-picker { position: fixed; background: var(--jt-bg); border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); padding: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 9999; width: 220px; }
.jt-emoji-option { border: none; background: none; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 6px; border-radius: var(--jt-radius-sm); transition: background 0.1s; }
.jt-emoji-option:hover { border: none; background: var(--jt-bg-muted); }

/* ── Gate message inline feedback (JS-toggled classes) ── */
.jt-gate-msg--error   { color: var(--jt-danger); }
.jt-gate-msg--success { color: var(--jt-success); }

/* ── Follow button ── */
.jt-btn-sm { font-size: 0.8125rem; padding: 0.25rem 0.75rem; border-radius: var(--jt-radius); }
.jt-following { background: var(--jt-accent); color: #fff; border-color: var(--jt-accent); }
.jt-following:hover { background: var(--jt-danger); border-color: var(--jt-danger); }

/* ── Share dropdown ── */
.jt-share-btn { position: relative; }
.jt-share-dropdown { position: absolute; bottom: 100%; left: 0; background: var(--jt-bg); border: 1px solid var(--jt-border); border-radius: var(--jt-radius); box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 100; min-width: 10rem; padding: 0.25rem 0; margin-bottom: 0.25rem; }
.jt-share-item { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; border: none; background: none; color: var(--jt-text); font-size: 0.875rem; cursor: pointer; white-space: nowrap; }
.jt-share-item:hover { background: var(--jt-bg-hover); }

/* ── Bookmark button ── */
.jt-bookmark-btn.bookmarked { color: var(--jt-accent); }

/* ── Notification preferences grid ── */
.jt-notif-prefs { border: 1px solid var(--jt-border); border-radius: var(--jt-radius); overflow: hidden; }
.jt-notif-row { display: grid; grid-template-columns: 1fr 3.5rem 3.5rem; align-items: center; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--jt-border); font-size: 0.875rem; color: var(--jt-text); }
.jt-notif-row:last-child { border-bottom: none; }
.jt-notif-header { font-weight: 600; background: var(--jt-bg-subtle); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--jt-text-secondary); }
.jt-notif-header span:not(:first-child) { text-align: center; }
.jt-toggle { position: relative; display: inline-block; width: 2rem; height: 1.125rem; margin: 0 auto; }
.jt-toggle input { opacity: 0; width: 0; height: 0; }
.jt-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--jt-border-strong); border-radius: var(--jt-radius-full); transition: background var(--jt-dur) var(--jt-ease); }
.jt-toggle-slider::before { content: ''; position: absolute; height: 0.875rem; width: 0.875rem; left: 0.125rem; bottom: 0.125rem; background: var(--jt-bg); border-radius: 50%; transition: transform var(--jt-dur) var(--jt-ease); }
.jt-toggle input:checked + .jt-toggle-slider { background: var(--jt-accent); }
.jt-toggle input:checked + .jt-toggle-slider::before { transform: translateX(0.875rem); }

/* ── Profile tabs ── */
.jt-profile-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--jt-border); margin-bottom: 1rem; }
.jt-profile-tab { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--jt-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--jt-dur) var(--jt-ease), border-color var(--jt-dur) var(--jt-ease); }
.jt-profile-tab:hover { color: var(--jt-text); }
.jt-profile-tab.active { color: var(--jt-accent); border-bottom-color: var(--jt-accent); }

/* ── More menu (post action overflow) ── */
.jt-more-menu { position: relative; display: inline-flex; margin-left: 8px; }
.jt-more-trigger { font-size: 1.125rem; letter-spacing: 0.1em; }
.jt-more-dropdown { position: absolute; bottom: 100%; right: 0; background: var(--jt-bg); border: 1px solid var(--jt-border); border-radius: var(--jt-radius); box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 100; min-width: 10rem; padding: 0.25rem 0; margin-bottom: 0.25rem; }
.jt-more-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 0.5rem 0.75rem; border: none; background: none; color: var(--jt-text); font-size: 0.875rem; cursor: pointer; white-space: nowrap; font-family: var(--jt-font); text-decoration: none; }
.jt-more-item:hover { background: var(--jt-bg-hover); color: var(--jt-text); }
.jt-more-item--danger { color: var(--jt-danger); }
.jt-more-item--danger:hover { background: var(--jt-danger-light); color: var(--jt-danger); }

/* ── Mobile Bottom Tab Bar ── */
.jt-mobile-tabs {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: var(--jt-bg);
  border-top: 1px solid var(--jt-border);
  padding: 6px 0 env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
@media (max-width: 640px) {
  .jt-mobile-tabs { display: flex; justify-content: space-around; align-items: center; }
  /* Add bottom padding to body so content isn't hidden behind the tab bar */
  .jt-app { padding-bottom: 68px; }
}
.jt-mobile-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 8px; min-width: 56px;
  color: var(--jt-text-tertiary); text-decoration: none;
  font-size: 0.625rem; font-weight: 500;
  transition: color var(--jt-dur);
  position: relative;
}
.jt-mobile-tab svg { display: block; }
.jt-mobile-tab:hover, .jt-mobile-tab.active { color: var(--jt-accent); }
.jt-mobile-tab-badge {
  position: absolute; top: 2px; right: 4px;
  background: var(--jt-danger); color: var(--jt-white);
  font-size: 0.625rem; font-weight: 700;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Toast notification (standalone fallback) ── */
.jt-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 10001; background: var(--jt-text, #1a1a1a); color: var(--jt-bg, #fff);
  padding: 10px 24px; border-radius: var(--jt-radius-full, 20px);
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.jt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Custom Modal (replaces browser alert/confirm/prompt) ── */
.jt-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  animation: jt-fadeIn 0.15s ease;
}
.jt-modal-box {
  background: var(--jt-bg); border-radius: var(--jt-radius-lg);
  padding: 24px; width: 400px; max-width: calc(100vw - 32px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.jt-modal-msg { font-size: 0.9375rem; line-height: 1.5; margin: 0 0 16px; color: var(--jt-text); }
.jt-modal-input { width: 100%; margin-bottom: 16px; resize: vertical; }
.jt-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.jt-modal-actions .jt-btn { min-width: 90px; justify-content: center; }

/* ── Link Preview Cards ── */
.jt-link-preview {
  display: flex; gap: 12px; align-items: stretch;
  border: 1px solid var(--jt-border); border-radius: var(--jt-radius);
  overflow: hidden; margin: 8px 0; text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  max-width: 520px;
}
.jt-link-preview:hover {
  border-color: var(--jt-border-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  color: inherit;
}
.jt-link-preview-body {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; min-width: 0; flex: 1;
}
.jt-link-preview-title {
  font-size: 0.875rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jt-link-preview-desc {
  font-size: 0.8125rem; color: var(--jt-text-secondary); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jt-link-preview-domain {
  font-size: 0.75rem; color: var(--jt-text-tertiary); margin-top: auto;
}
.jt-link-preview-img {
  width: 120px; min-height: 80px; object-fit: cover; flex-shrink: 0;
}
@media (max-width: 640px) {
  .jt-link-preview { flex-direction: column; }
  .jt-link-preview-img { width: 100%; height: 140px; }
}

/* ── Notification Dropdown Panel ── */
.jt-notif-dropdown-wrap { position: relative; display: inline-flex; }
.jt-notif-panel {
  position: absolute; top: 100%; right: 0; z-index: 200;
  width: 340px; max-height: 420px;
  background: var(--jt-bg); border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
  animation: jt-fadeIn 0.2s ease;
}
.jt-notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--jt-border);
}
.jt-notif-panel-head strong { font-size: 0.875rem; }
.jt-notif-mark-read {
  border: none; background: none; color: var(--jt-accent);
  font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0;
  font-family: var(--jt-font);
}
.jt-notif-mark-read:hover { border: none; background: none; color: var(--jt-accent); text-decoration: underline; }
.jt-notif-panel-body { max-height: 280px; overflow-y: auto; }
.jt-notif-panel-loading, .jt-notif-panel-empty {
  padding: 24px 16px; text-align: center;
  color: var(--jt-text-tertiary); font-size: 0.875rem;
}
.jt-notif-panel-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; border-bottom: 1px solid var(--jt-border);
  text-decoration: none; color: inherit; transition: background 0.1s;
}
.jt-notif-panel-item:last-child { border-bottom: none; }
.jt-notif-panel-item:hover { background: var(--jt-bg-hover); }
.jt-notif-panel-item.unread { background: var(--jt-accent-light); }
.jt-notif-panel-text { font-size: 0.8125rem; line-height: 1.4; }
.jt-notif-panel-time { font-size: 0.6875rem; color: var(--jt-text-tertiary); }
.jt-notif-panel-footer {
  display: block; text-align: center;
  padding: 10px 16px; border-top: 1px solid var(--jt-border);
  font-size: 0.8125rem; font-weight: 600; color: var(--jt-accent);
  text-decoration: none; transition: background 0.1s;
}
.jt-notif-panel-footer:hover { background: var(--jt-bg-hover); color: var(--jt-accent); }
@media (max-width: 640px) {
  .jt-notif-panel { width: calc(100vw - 32px); right: -16px; }
}

/* ── Search Overlay (Cmd+K) ── */
.jt-search-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.4);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
}
.jt-search-overlay.open { display: flex; }
.jt-search-overlay-inner {
  width: 560px; max-width: calc(100vw - 32px);
  background: var(--jt-bg); border-radius: var(--jt-radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: jt-fadeIn 0.15s ease;
}
.jt-search-overlay-field {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--jt-border);
}
.jt-search-overlay-icon { flex-shrink: 0; color: var(--jt-text-tertiary); display: flex; }
.jt-search-overlay-input {
  flex: 1; border: none; background: none; outline: none;
  font-family: var(--jt-font); font-size: 1.0625rem; color: var(--jt-text);
  padding: 0;
}
.jt-search-overlay-input::placeholder { color: var(--jt-text-tertiary); }
.jt-search-overlay-kbd {
  font-family: var(--jt-font-mono); font-size: 0.6875rem;
  padding: 2px 6px; border-radius: 4px;
  background: var(--jt-bg-muted); border: 1px solid var(--jt-border);
  color: var(--jt-text-tertiary);
}
.jt-search-overlay-results { max-height: 360px; overflow-y: auto; }
.jt-search-overlay-empty {
  padding: 24px 20px; text-align: center;
  color: var(--jt-text-tertiary); font-size: 0.875rem;
}
.jt-search-overlay-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 20px; border-bottom: 1px solid var(--jt-border);
  text-decoration: none; color: inherit; transition: background 0.1s;
}
.jt-search-overlay-item:last-child { border-bottom: none; }
.jt-search-overlay-item:hover { background: var(--jt-bg-hover); }
.jt-search-overlay-item strong { font-size: 0.9375rem; }
.jt-search-overlay-item span { font-size: 0.8125rem; color: var(--jt-text-tertiary); }

/* ── Skeleton Loading Placeholders ── */
@keyframes jt-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.jt-skeleton {
  background: linear-gradient(90deg, var(--jt-bg-muted) 25%, var(--jt-bg-subtle) 50%, var(--jt-bg-muted) 75%);
  background-size: 800px 100%;
  animation: jt-shimmer 1.5s infinite linear;
  border-radius: var(--jt-radius-sm);
}
.jt-skeleton-text { height: 0.875rem; margin-bottom: 6px; }
.jt-skeleton-text--sm { width: 40%; }
.jt-skeleton-text--md { width: 65%; }
.jt-skeleton-text--lg { width: 90%; }
.jt-skeleton-circle { border-radius: 50%; }
.jt-skeleton-row {
  display: grid; grid-template-columns: 48px 1fr 80px; gap: 12px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--jt-border);
}
.jt-skeleton-row .jt-skeleton-vote { width: 32px; height: 32px; border-radius: var(--jt-radius-sm); }
.jt-skeleton-row .jt-skeleton-main { display: flex; flex-direction: column; gap: 6px; }
.jt-skeleton-row .jt-skeleton-stat { width: 40px; height: 24px; border-radius: var(--jt-radius-sm); }

/* Skeleton topic list — 5 placeholder rows */
.jt-skeleton-topics { border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); overflow: hidden; }

/* Skeleton reply card */
.jt-skeleton-reply {
  border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg);
  margin-bottom: 10px; overflow: hidden;
}
.jt-skeleton-reply-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--jt-bg-subtle); }
.jt-skeleton-reply-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.jt-skeleton-reply-foot { display: flex; gap: 12px; padding: 8px 16px; }

/* Skeleton sidebar card */
.jt-skeleton-card { border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); padding: 16px; margin-bottom: 12px; }
.jt-skeleton-card-title { height: 0.75rem; width: 50%; margin-bottom: 14px; }
.jt-skeleton-card-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

/* Skeleton profile */
.jt-skeleton-profile { border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg); overflow: hidden; margin-bottom: 20px; }
.jt-skeleton-profile-banner { height: 120px; }
.jt-skeleton-profile-body { padding: 0 20px 20px; margin-top: -20px; }
.jt-skeleton-profile-avatar { width: 64px; height: 64px; border: 3px solid var(--jt-bg); margin-bottom: 10px; }
.jt-skeleton-profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; padding: 12px; background: var(--jt-bg-subtle); border-radius: var(--jt-radius); }
.jt-skeleton-profile-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ── Search filters ── */
.jt-search-filters {
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius);
	padding: 0;
	margin-bottom: 1.25rem;
}
.jt-search-filters[open] {
	padding: 0 1rem 1rem;
}
.jt-search-filters-toggle {
	padding: 0.75rem 1rem;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--jt-text-secondary);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
}
.jt-search-filters-toggle::-webkit-details-marker { display: none; }
.jt-search-filters[open] .jt-search-filters-toggle svg {
	transform: rotate(180deg);
}
.jt-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}
.jt-filter-row label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.8125rem;
	color: var(--jt-text-secondary);
	flex: 1;
	min-width: 140px;
}
.jt-filter-actions {
	display: flex;
	gap: 0.5rem;
}
@media (max-width: 640px) {
	.jt-filter-row {
		flex-direction: column;
	}
	.jt-filter-row label {
		min-width: 100%;
	}
}

/* ── Discussion row hover effects (non-anchor rows) ── */
.jt-row { box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.1s; }
.jt-row:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }