/* ============================================================
   FABLE ATLAS v3 — style.css
   Every element has an ID for user CSS overrides.
   All colors use CSS vars — override in Theme Editor panel.
   ============================================================ */

   :root {
    --lf-bg:           #0a0910;
    --lf-deep:         #0f0d1a;
    --lf-surface:      #141220;
    --lf-card:         #1a1728;
    --lf-card2:        #1e1b2e;
    --lf-border:       #2a2540;
    --lf-border2:      #332e50;
    --lf-muted:        #6b6485;
    --lf-text:         #c8c0d8;
    --lf-bright:       #e8e0f0;
    --lf-gold:         #c9a84c;
    --lf-gold-glow:    #e8c96a;
    --lf-ember:        #e05c3a;
    --lf-accent:       #8b5cf6;
    --lf-accent-soft:  #a78bfa;
    --lf-new-bg:       #1e3a2e;
    --lf-new-text:     #5ecf8a;
    --lf-hot-bg:       #3a1e10;
    --lf-hot-text:     #f08040;
    --lf-rec-bg:       #1e1e3a;
    --lf-rec-text:     #8080f0;
    --lf-cat-header-bg:   #1e1b2e;
    --lf-cat-header-text: #e8e0f0;
    --lf-cat-accent:      #8b5cf6;
    --lf-post-bg:      #1a1728;
    --lf-post-author-bg: #16142a;
    --lf-sidebar-bg:   #0f0d1a;
    --lf-link:         #a78bfa;
    --lf-link-hover:   #c4b5fd;
    /* Character profile */
    --lf-char-banner-bg:    linear-gradient(135deg, #0d1a2a, #2a0d1a);
    --lf-char-card-bg:      #1a1728;
    --lf-char-name-color:   #e8e0f0;
    --lf-char-alias-color:  #6b6485;
    --lf-char-stat-bg:      #1a1728;
    --lf-char-tab-active:   #a78bfa;
    --lf-char-hp-color:     #5ecf8a;
    --lf-char-mp-color:     #8b5cf6;
    --lf-char-stamina-color:#c9a84c;
    --lf-font-body:    'Crimson Pro', serif;
    --lf-font-ui:      'Cinzel', serif;
    --lf-font-display: 'Cinzel Decorative', serif;
    --lf-radius:       8px;
    --lf-radius-sm:    4px;
  }
  
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  
  #lf-body {
    background: var(--lf-bg); color: var(--lf-text);
    font-family: var(--lf-font-body); font-size: 17px; line-height: 1.65; overflow-x: hidden;
  }
  #lf-body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .3;
    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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  }
  .page { display: none; }
  .page.active { display: block; }
  a { color: var(--lf-link); text-decoration: none; transition: color .15s; }
  a:hover { color: var(--lf-link-hover); }
  
  /* === NAV #lf-nav === */
  #lf-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; padding: 0 40px; height: 60px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom,rgba(10,9,16,.98),rgba(10,9,16,.85)); backdrop-filter: blur(14px); border-bottom: 1px solid var(--lf-border); }
  #lf-nav-logo { font-family: var(--lf-font-display); font-size: 1rem; font-weight: 700; color: var(--lf-gold); letter-spacing: .08em; display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
  #lf-nav-logo .logo-hex { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; background: linear-gradient(135deg,var(--lf-gold),var(--lf-ember)); clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); }
  #lf-nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
  #lf-nav-links a { font-family: var(--lf-font-ui); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-muted); transition: color .2s; }
  #lf-nav-links a:hover { color: var(--lf-bright); }
  #lf-nav-actions { display: flex; gap: 10px; align-items: center; }
  #lf-nav-breadcrumb { display: none; align-items: center; gap: 8px; font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); }
  #lf-nav-breadcrumb.visible { display: flex; }
  #lf-nav-breadcrumb .bc-sep { color: var(--lf-border2); }
  #lf-nav-breadcrumb a { color: var(--lf-muted); cursor: pointer; transition: color .2s; }
  #lf-nav-breadcrumb a:hover { color: var(--lf-bright); }
  #lf-nav-breadcrumb .bc-current { color: var(--lf-text); }
  
  /* === BUTTONS === */
  .btn { font-family: var(--lf-font-ui); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: 8px 20px; border-radius: var(--lf-radius-sm); cursor: pointer; text-decoration: none; transition: all .2s; border: none; display: inline-block; }
  .btn-ghost  { background: transparent; color: var(--lf-muted); border: 1px solid var(--lf-border); }
  .btn-ghost:hover  { color: var(--lf-bright); border-color: var(--lf-muted); }
  .btn-gold   { background: linear-gradient(135deg,#c9a84c,#e8c96a); color: var(--lf-bg); font-weight: 700; }
  .btn-gold:hover   { background: linear-gradient(135deg,#e8c96a,#f0d880); transform: translateY(-1px); }
  .btn-accent { background: var(--lf-accent); color: #fff; font-weight: 600; }
  .btn-accent:hover { background: var(--lf-accent-soft); }
  .btn-surface { background: var(--lf-surface); color: var(--lf-text); border: 1px solid var(--lf-border); }
  .btn-surface:hover { border-color: var(--lf-border2); color: var(--lf-bright); }
  .btn-danger { background: rgba(180,40,40,.12); color: #e06060; border: 1px solid rgba(180,40,40,.25); }
  .btn-danger:hover { background: rgba(180,40,40,.22); }
  .btn-sm { padding: 5px 12px; font-size: .58rem; }
  .btn-xs { padding: 3px 9px; font-size: .54rem; }
  .btn-large { padding: 12px 32px; font-size: .76rem; border-radius: var(--lf-radius); }
  
  /* === TAGS === */
  .tag { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; font-weight: 600; }
  .tag-new  { background: var(--lf-new-bg); color: var(--lf-new-text); }
  .tag-hot  { background: var(--lf-hot-bg); color: var(--lf-hot-text); }
  .tag-rec  { background: var(--lf-rec-bg); color: var(--lf-rec-text); }
  .tag-genre{ background: rgba(42,37,64,.8); color: var(--lf-muted); border: 1px solid var(--lf-border); }
  .tag-sponsored { background: rgba(201,168,76,.1); color: var(--lf-gold); border: 1px solid rgba(201,168,76,.22); }
  .tag-open { background: rgba(94,207,138,.1); color: var(--lf-new-text); border: 1px solid rgba(94,207,138,.2); }
  .tag-closed { background: rgba(107,100,133,.15); color: var(--lf-muted); border: 1px solid var(--lf-border); }
  
  /* === PLACEHOLDERS === */
  .ph-1 { background: linear-gradient(135deg,#0d1a2a 0%,#1a0d2a 50%,#2a1a0d 100%); }
  .ph-2 { background: linear-gradient(135deg,#0a1a14 0%,#141a0a 60%,#0a1210 100%); }
  .ph-3 { background: linear-gradient(135deg,#1a0d0a 0%,#0a0a1a 70%,#0d0a1a 100%); }
  .ph-4 { background: linear-gradient(135deg,#1a1a0a 0%,#0a1a1a 100%); }
  .ph-5 { background: linear-gradient(135deg,#0a0a1a 0%,#1a0a1a 100%); }
  .ph-6 { background: linear-gradient(135deg,#0a1a10 0%,#1a0a18 100%); }
  .upload-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(10,9,16,.45); opacity: 0; transition: opacity .2s; }
  .upload-hint svg { width: 20px; height: 20px; color: #fff; opacity: .7; }
  .upload-hint span { font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
  .rp-card:hover .upload-hint { opacity: 1; }
  .placeholder-upload { border: 2px dashed var(--lf-border2); border-radius: var(--lf-radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px; cursor: pointer; transition: border-color .2s; }
  .placeholder-upload:hover { border-color: var(--lf-accent); }
  .placeholder-upload svg { width: 24px; height: 24px; color: var(--lf-muted); }
  .placeholder-upload span { font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lf-muted); }
  
  /* === HUB HERO #lf-hero === */
  #lf-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; padding: 110px 40px 80px; overflow: hidden; }
  #lf-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(139,92,246,.11) 0%,transparent 60%), radial-gradient(ellipse 50% 50% at 20% 80%,rgba(201,168,76,.08) 0%,transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%,rgba(224,92,58,.05) 0%,transparent 50%), var(--lf-bg); }
  #lf-hero-content { position: relative; z-index: 2; max-width: 860px; }
  .hero-eyebrow { font-family: var(--lf-font-ui); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--lf-gold); margin-bottom: 26px; display: flex; align-items: center; justify-content: center; gap: 14px; }
  .hero-eyebrow::before,.hero-eyebrow::after { content: ''; height: 1px; width: 42px; background: linear-gradient(to right,transparent,var(--lf-gold)); }
  .hero-eyebrow::after { background: linear-gradient(to left,transparent,var(--lf-gold)); }
  #lf-hero h1 { font-family: var(--lf-font-display); font-size: clamp(2.6rem,6.5vw,5rem); font-weight: 900; line-height: 1.05; color: var(--lf-bright); margin-bottom: 22px; }
  #lf-hero h1 em { font-style: normal; background: linear-gradient(135deg,var(--lf-gold) 0%,var(--lf-gold-glow) 50%,var(--lf-ember) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .hero-sub { font-size: 1.15rem; color: var(--lf-muted); max-width: 520px; margin: 0 auto 38px; font-weight: 300; font-style: italic; }
  .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  #lf-hero-stats { display: flex; gap: 44px; justify-content: center; margin-top: 60px; padding-top: 38px; border-top: 1px solid var(--lf-border); }
  .stat-item { text-align: center; }
  .stat-num { font-family: var(--lf-font-ui); font-size: 1.7rem; font-weight: 700; color: var(--lf-bright); display: block; }
  .stat-label { font-size: .72rem; color: var(--lf-muted); letter-spacing: .12em; text-transform: uppercase; font-family: var(--lf-font-ui); }
  
  /* === TICKER #lf-ticker === */
  #lf-ticker { background: var(--lf-surface); border-top: 1px solid var(--lf-border); border-bottom: 1px solid var(--lf-border); overflow: hidden; height: 36px; display: flex; align-items: center; }
  #lf-ticker-label { font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lf-gold); background: var(--lf-surface); padding: 0 14px 0 18px; white-space: nowrap; position: relative; z-index: 2; border-right: 1px solid var(--lf-border); height: 100%; display: flex; align-items: center; flex-shrink: 0; }
  .ticker-track { display: flex; animation: ticker 44s linear infinite; white-space: nowrap; }
  .ticker-item { font-size: .78rem; color: var(--lf-muted); padding: 0 22px; border-right: 1px solid var(--lf-border); height: 36px; display: flex; align-items: center; gap: 8px; }
  .ticker-item strong { color: var(--lf-bright); font-weight: 400; }
  .activity-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lf-new-text); display: inline-block; flex-shrink: 0; box-shadow: 0 0 5px var(--lf-new-text); }
  @keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  
  /* === HUB SECTIONS === */
  #lf-hub-section-hot, #lf-hub-section-recruiting, #lf-hub-section-features, #lf-hub-section-cta { padding: 72px 40px; max-width: 1280px; margin: 0 auto; }
  .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; border-bottom: 1px solid var(--lf-border); padding-bottom: 14px; }
  .section-title { font-family: var(--lf-font-ui); font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--lf-gold); display: flex; align-items: center; gap: 10px; }
  .section-title::before { content: ''; width: 3px; height: 13px; background: var(--lf-gold); border-radius: 2px; }
  .section-link { font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--lf-muted); text-decoration: none; transition: color .2s; }
  .section-link:hover { color: var(--lf-bright); }
  .divider { height: 1px; background: var(--lf-border); max-width: 1280px; margin: 0 auto; }
  
  /* genre pills #lf-genre-filter */
  #lf-genre-filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; margin-bottom: 32px; }
  #lf-genre-filter::-webkit-scrollbar { display: none; }
  .genre-pill { font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 7px 15px; border-radius: 100px; white-space: nowrap; cursor: pointer; border: 1px solid var(--lf-border); background: var(--lf-surface); color: var(--lf-muted); transition: all .2s; }
  .genre-pill:hover, .genre-pill.active { background: var(--lf-accent); border-color: var(--lf-accent); color: #fff; }
  
  /* RP cards #lf-rp-grid */
  #lf-rp-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: 16px; }
  .rp-card { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); overflow: hidden; cursor: pointer; transition: transform .2s,border-color .2s,box-shadow .2s; position: relative; text-decoration: none; display: block; color: inherit; }
  .rp-card:hover { transform: translateY(-3px); border-color: rgba(139,92,246,.4); box-shadow: 0 8px 28px rgba(0,0,0,.4),0 0 0 1px rgba(139,92,246,.1); }
  .rp-card.rp-featured { grid-row: span 2; }
  .rp-banner { height: 130px; position: relative; overflow: hidden; }
  .rp-card.rp-featured .rp-banner { height: 100%; min-height: 210px; }
  .rp-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rp-banner-ph { width: 100%; height: 100%; position: relative; }
  .rp-banner-ph::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to top,var(--lf-card),transparent); }
  .rp-body { padding: 14px 16px 16px; }
  .rp-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
  .rp-name { font-family: var(--lf-font-ui); font-size: .96rem; font-weight: 700; color: var(--lf-bright); margin-bottom: 5px; line-height: 1.3; }
  .rp-card.rp-featured .rp-name { font-size: 1.25rem; }
  .rp-desc { font-size: .85rem; color: var(--lf-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rp-card.rp-featured .rp-desc { -webkit-line-clamp: 3; }
  .rp-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lf-border); font-size: .76rem; color: var(--lf-muted); }
  .rp-members { display: flex; align-items: center; gap: 6px; font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
  .member-avatars { display: flex; }
  .member-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--lf-card); margin-left: -5px; }
  .member-dot:first-child { margin-left: 0; }
  
  /* recruiting #lf-recruiting-list */
  #lf-recruiting-list { display: flex; flex-direction: column; gap: 8px; }
  .recruiting-row { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: 6px; padding: 11px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all .2s; text-decoration: none; color: inherit; }
  .recruiting-row:hover { border-color: rgba(80,80,240,.4); background: rgba(42,37,64,.5); }
  .rec-thumb { width: 40px; height: 40px; border-radius: 5px; overflow: hidden; flex-shrink: 0; background: var(--lf-surface); }
  .rec-thumb .ph { width: 100%; height: 100%; }
  .rec-info { flex: 1; min-width: 0; }
  .rec-name { font-family: var(--lf-font-ui); font-size: .78rem; color: var(--lf-bright); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rec-meta { font-size: .75rem; color: var(--lf-muted); }
  .rec-slots { font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-rec-text); background: var(--lf-rec-bg); padding: 4px 10px; border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
  
  /* shop #lf-shop-section */
  #lf-shop-section { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 12px; padding: 44px; margin: 0 40px; position: relative; overflow: hidden; }
  #lf-shop-section::before { content: ''; position: absolute; top: 0; right: 0; width: 320px; height: 320px; background: radial-gradient(circle,rgba(201,168,76,.07) 0%,transparent 70%); pointer-events: none; }
  #lf-shop-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 28px; }
  .shop-item { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 18px; text-align: center; cursor: pointer; transition: all .2s; position: relative; }
  .shop-item:hover { border-color: var(--lf-gold); box-shadow: 0 4px 18px rgba(201,168,76,.1); }
  .shop-img { width: 52px; height: 52px; border-radius: 8px; margin: 0 auto 10px; background: var(--lf-surface); display: flex; align-items: center; justify-content: center; border: 1px solid var(--lf-border); }
  .shop-img svg { width: 24px; height: 24px; color: var(--lf-muted); opacity: .5; }
  .shop-name { font-family: var(--lf-font-ui); font-size: .73rem; color: var(--lf-bright); font-weight: 600; margin-bottom: 4px; }
  .shop-desc { font-size: .74rem; color: var(--lf-muted); line-height: 1.4; }
  .shop-price { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-family: var(--lf-font-ui); font-size: .66rem; color: var(--lf-gold); letter-spacing: .08em; }
  .shop-badge { position: absolute; top: -5px; right: 10px; background: var(--lf-ember); color: #fff; font-family: var(--lf-font-ui); font-size: .5rem; letter-spacing: .1em; padding: 2px 7px; border-radius: 2px; text-transform: uppercase; }
  .coin { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; background: linear-gradient(135deg,var(--lf-gold),var(--lf-gold-glow)); border-radius: 50%; font-size: .5rem; color: var(--lf-bg); font-weight: 900; }
  .currency-bar { background: rgba(201,168,76,.06); border: 1px solid rgba(201,168,76,.15); border-radius: 5px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--lf-font-ui); font-size: .64rem; color: var(--lf-gold); letter-spacing: .08em; }
  
  /* features #lf-features-grid */
  #lf-features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--lf-border); border-radius: 12px; overflow: hidden; }
  .feature-card { background: var(--lf-surface); padding: 30px 28px; transition: background .2s; }
  .feature-card:hover { background: var(--lf-card); }
  .feature-icon-box { width: 38px; height: 38px; border-radius: 7px; margin-bottom: 14px; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.18); display: flex; align-items: center; justify-content: center; }
  .feature-icon-box svg { width: 18px; height: 18px; color: var(--lf-accent-soft); }
  .feature-name { font-family: var(--lf-font-ui); font-size: .78rem; font-weight: 700; color: var(--lf-bright); letter-spacing: .06em; margin-bottom: 7px; }
  .feature-desc { font-size: .85rem; color: var(--lf-muted); line-height: 1.6; }
  
  /* CTA #lf-cta */
  #lf-cta { text-align: center; position: relative; overflow: hidden; }
  #lf-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at center,rgba(139,92,246,.07) 0%,transparent 70%); }
  #lf-cta h2 { font-family: var(--lf-font-display); font-size: clamp(1.8rem,4.5vw,3rem); color: var(--lf-bright); margin-bottom: 14px; position: relative; }
  #lf-cta p { font-size: 1.05rem; color: var(--lf-muted); max-width: 480px; margin: 0 auto 32px; font-style: italic; position: relative; }
  
  /* footer #lf-footer */
  #lf-footer { background: var(--lf-deep); border-top: 1px solid var(--lf-border); padding: 44px 40px 28px; }
  #lf-footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 36px; }
  .footer-brand p { font-size: .86rem; color: var(--lf-muted); margin-top: 10px; line-height: 1.6; max-width: 270px; }
  .footer-col h4 { font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lf-gold); margin-bottom: 14px; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
  .footer-col a { font-size: .86rem; color: var(--lf-muted); text-decoration: none; transition: color .2s; }
  .footer-col a:hover { color: var(--lf-bright); }
  #lf-footer-bottom { max-width: 1280px; margin: 0 auto; padding-top: 22px; border-top: 1px solid var(--lf-border); display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--lf-muted); font-family: var(--lf-font-ui); letter-spacing: .06em; }
  
  /* ===== FORUM PAGE #lf-forum-page ===== */
  #lf-forum-page { padding-top: 60px; }
  
  /* realm banner #lf-realm-banner */
  #lf-realm-banner { position: relative; height: 260px; overflow: hidden; background: linear-gradient(135deg,#0d1a2a 0%,#1a0d2a 45%,#2a1a0d 100%); }
  #lf-realm-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #lf-realm-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(10,9,16,1) 0%,rgba(10,9,16,.5) 45%,rgba(10,9,16,.1) 100%); }
  #lf-realm-banner-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 44px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
  #lf-realm-identity { display: flex; align-items: flex-end; gap: 18px; }
  #lf-realm-avatar { width: 66px; height: 66px; border-radius: 10px; overflow: hidden; flex-shrink: 0; border: 2px solid var(--lf-border2); background: var(--lf-surface); }
  #lf-realm-avatar .ph { width: 100%; height: 100%; background: linear-gradient(135deg,#1a0d2a,#0d1a2a); }
  #lf-realm-title { font-family: var(--lf-font-display); font-size: 1.6rem; font-weight: 700; color: var(--lf-bright); margin-bottom: 4px; }
  #lf-realm-meta { font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-muted); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  #lf-realm-meta span { display: flex; align-items: center; gap: 4px; }
  #lf-realm-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
  
  /* stats bar #lf-forum-statsbar */
  #lf-forum-statsbar { background: var(--lf-surface); border-bottom: 1px solid var(--lf-border); padding: 8px 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .statsbar-left { display: flex; align-items: center; gap: 18px; font-size: .78rem; color: var(--lf-muted); flex-wrap: wrap; }
  .statsbar-left strong { color: var(--lf-text); font-weight: 400; }
  .statsbar-sep { color: var(--lf-border2); }
  .statsbar-right { display: flex; gap: 8px; }
  #lf-forum-statsbar a { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); transition: color .15s; }
  #lf-forum-statsbar a:hover { color: var(--lf-bright); }
  
  /* forum layout #lf-forum-layout */
  #lf-forum-layout { display: grid; grid-template-columns: minmax(0,240px) 1fr; min-height: calc(100vh - 60px - 260px); transition: grid-template-columns .25s ease; }
  
  /* sidebar #lf-forum-sidebar */
  #lf-forum-sidebar { background: var(--lf-sidebar-bg); border-right: 1px solid var(--lf-border); padding: 24px 0; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lf-border) transparent; }
  .sidebar-section { margin-bottom: 28px; }
  .sidebar-label { font-family: var(--lf-font-ui); font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lf-muted); padding: 0 18px; margin-bottom: 8px; }
  .sidebar-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 18px; cursor: pointer; transition: background .15s,color .15s; font-size: .84rem; color: var(--lf-muted); text-decoration: none; border-left: 2px solid transparent; }
  .sidebar-nav-item:hover { background: rgba(42,37,64,.35); color: var(--lf-text); }
  .sidebar-nav-item.active { background: rgba(139,92,246,.08); color: var(--lf-accent-soft); border-left-color: var(--lf-accent); }
  .sidebar-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .6; }
  .sidebar-nav-item.active svg { opacity: 1; color: var(--lf-accent-soft); }
  .sidebar-cat { display: flex; align-items: center; gap: 8px; padding: 6px 18px; cursor: pointer; transition: all .15s; font-size: .82rem; color: var(--lf-muted); border-left: 2px solid transparent; }
  .sidebar-cat:hover { background: rgba(42,37,64,.25); color: var(--lf-text); }
  .sidebar-cat.active { color: var(--lf-gold); border-left-color: var(--lf-gold); }
  .sidebar-cat-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lf-border2); flex-shrink: 0; }
  .sidebar-cat.active .sidebar-cat-dot { background: var(--lf-gold); }
  .online-list { padding: 0 18px; display: flex; flex-direction: column; gap: 5px; }
  .online-member { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--lf-muted); }
  .online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lf-new-text); box-shadow: 0 0 4px var(--lf-new-text); flex-shrink: 0; }
  .online-name { color: var(--lf-text); }
  .online-role { margin-left: auto; font-family: var(--lf-font-ui); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); background: var(--lf-surface); border: 1px solid var(--lf-border); padding: 2px 5px; border-radius: 2px; }
  
  /* main area #lf-forum-main */
  #lf-forum-main { background: var(--lf-bg); padding: 28px 36px; }
  #lf-forum-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 14px; flex-wrap: wrap; }
  #lf-forum-topbar-left { display: flex; align-items: center; gap: 10px; }
  #lf-forum-search { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-sm); padding: 7px 12px; font-family: var(--lf-font-body); font-size: .88rem; color: var(--lf-text); width: 220px; transition: border-color .2s; }
  #lf-forum-search::placeholder { color: var(--lf-muted); }
  #lf-forum-search:focus { outline: none; border-color: var(--lf-accent); }
  #lf-forum-topbar-right { display: flex; gap: 8px; align-items: center; }
  
  /* col headers #lf-forum-col-headers */
  #lf-forum-col-headers { display: grid; grid-template-columns: 1fr 80px 80px 210px; gap: 0; padding: 5px 14px 5px 52px; }
  .forum-col-header { font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-muted); }
  .forum-col-header:not(:first-child) { text-align: center; }
  .forum-col-header:last-child { text-align: left; }
  
  /* category blocks .lf-category-block */
  .lf-category-block { border: 1px solid var(--lf-border); border-radius: var(--lf-radius); overflow: hidden; margin-bottom: 14px; }
  .lf-category-header { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; min-height: 40px; background: var(--lf-cat-header-bg); border-bottom: 1px solid var(--lf-border); cursor: pointer; transition: filter .15s; gap: 12px; }
  .lf-category-header:hover { filter: brightness(1.1); }
  .lf-cat-title-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .lf-cat-chevron { width: 15px; height: 15px; color: var(--lf-muted); transition: transform .2s; flex-shrink: 0; }
  .lf-category-block.collapsed .lf-cat-chevron { transform: rotate(-90deg); }
  .lf-cat-name { font-family: var(--lf-font-ui); font-size: .76rem; font-weight: 700; color: var(--lf-cat-header-text); letter-spacing: .06em; }
  .lf-cat-desc { font-size: .74rem; color: var(--lf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lf-cat-stats { font-family: var(--lf-font-ui); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); display: flex; gap: 12px; flex-shrink: 0; }
  .lf-category-body { background: var(--lf-card); }
  .lf-category-block.collapsed .lf-category-body { display: none; }
  
  /* subforum rows .lf-subforum-row */
  .lf-subforum-row { display: grid; grid-template-columns: 1fr 80px 80px 210px; align-items: center; border-bottom: 1px solid var(--lf-border); transition: background .12s; cursor: pointer; }
  .lf-subforum-row:last-child { border-bottom: none; }
  .lf-subforum-row:hover { background: rgba(42,37,64,.18); }
  .lf-subforum-main { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
  .lf-subforum-icon { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.14); display: flex; align-items: center; justify-content: center; position: relative; }
  .lf-subforum-icon svg { width: 15px; height: 15px; color: var(--lf-accent-soft); opacity: .65; }
  .lf-subforum-icon.has-unread::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--lf-new-text); border: 2px solid var(--lf-card); }
  .lf-subforum-info { flex: 1; min-width: 0; }
  .lf-subforum-name { font-family: var(--lf-font-ui); font-size: .78rem; font-weight: 600; color: var(--lf-bright); margin-bottom: 2px; }
  .lf-subforum-desc { font-size: .74rem; color: var(--lf-muted); line-height: 1.35; }
  .lf-subforum-mods { font-size: .68rem; color: var(--lf-muted); margin-top: 3px; }
  .lf-subforum-mods a { color: var(--lf-accent-soft); font-size: .68rem; }
  .lf-child-boards { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .lf-child-board { font-size: .68rem; color: var(--lf-accent-soft); background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.15); padding: 1px 7px; border-radius: 2px; cursor: pointer; }
  .lf-child-board:hover { background: rgba(139,92,246,.16); }
  .lf-subforum-stat { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-muted); text-align: center; padding: 11px 8px; }
  .lf-subforum-stat span { display: block; font-size: .92rem; color: var(--lf-text); font-family: var(--lf-font-body); font-weight: 600; letter-spacing: 0; text-transform: none; }
  .lf-subforum-lastpost { padding: 11px 14px; font-size: .74rem; color: var(--lf-muted); line-height: 1.35; }
  .lf-subforum-lastpost-title { color: var(--lf-text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 185px; margin-bottom: 2px; cursor: pointer; }
  .lf-subforum-lastpost-title:hover { color: var(--lf-accent-soft); }
  .lf-lastpost-meta { display: flex; align-items: center; gap: 5px; }
  .lf-lastpost-avatar { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; overflow: hidden; }
  .lf-lastpost-avatar .ph { width: 100%; height: 100%; border-radius: 3px; }
  
  .lf-add-category-btn { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px; border: 2px dashed var(--lf-border2); border-radius: var(--lf-radius); cursor: pointer; transition: all .2s; color: var(--lf-muted); font-family: var(--lf-font-ui); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
  .lf-add-category-btn:hover { border-color: var(--lf-accent); color: var(--lf-accent-soft); background: rgba(139,92,246,.04); }
  .lf-add-category-btn svg { width: 16px; height: 16px; }
  
  /* ===== THREAD PAGE #lf-thread-page ===== */
  #lf-thread-page { padding-top: 60px; }
  #lf-thread-header { background: var(--lf-surface); border-bottom: 1px solid var(--lf-border); padding: 28px 36px 22px; }
  #lf-thread-title-row { margin-bottom: 10px; }
  .thread-tags-row { display: flex; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
  #lf-thread-title { font-family: var(--lf-font-ui); font-size: 1.35rem; font-weight: 700; color: var(--lf-bright); }
  #lf-thread-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .thread-meta-item { font-size: .76rem; color: var(--lf-muted); display: flex; align-items: center; gap: 4px; }
  .thread-meta-item svg { width: 12px; height: 12px; }
  
  
  
  .lf-post-card { background: var(--lf-post-bg); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); margin-bottom: 12px; overflow: hidden; }
  .lf-post-card.lf-post-op { border-color: rgba(201,168,76,.2); }
  .lf-post-layout { display: grid; grid-template-columns: 160px 1fr; min-width: 0; width: 100%; }
  
  /* post author .lf-post-author */
  .lf-post-author { background: var(--lf-post-author-bg); border-right: 1px solid var(--lf-border); padding: 22px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; min-width: 0; width: 100%; box-sizing: border-box; overflow: hidden; align-self: stretch; }
  .lf-post-avatar { width: 72px; height: 72px; border-radius: var(--lf-radius); overflow: hidden; background: var(--lf-surface); border: 1px solid var(--lf-border2); flex-shrink: 0; }
  .lf-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .lf-post-avatar .ph { width: 100%; height: 100%; }
  .lf-post-username { font-family: var(--lf-font-ui); font-size: .74rem; font-weight: 700; color: var(--lf-bright); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
  .lf-post-rank { font-family: var(--lf-font-ui); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-gold); background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.18); padding: 2px 7px; border-radius: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lf-post-character { font-size: .7rem; color: var(--lf-muted); font-style: italic; margin-top: 2px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lf-post-stats { font-size: .68rem; color: var(--lf-muted); display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--lf-border); }
  .lf-post-stats span { display: flex; justify-content: space-between; align-items: center; width: 100%; }
  .lf-post-stats strong { color: var(--lf-text); font-weight: 500; }
  .lf-post-pronouns { font-size: .64rem; color: var(--lf-muted); opacity: .65; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  
  /* post body .lf-post-body */
  .lf-post-body { padding: 18px 22px; display: flex; flex-direction: column; min-width: 0; }
  .lf-post-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid var(--lf-border); padding-bottom: 8px; }
  .lf-post-date { font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .08em; color: var(--lf-muted); }
  .lf-post-num { font-family: var(--lf-font-ui); font-size: .56rem; color: var(--lf-muted); letter-spacing: .1em; display: flex; align-items: center; gap: 8px; }
  .lf-post-num a { color: var(--lf-muted); }
  .lf-post-num a:hover { color: var(--lf-accent-soft); }
  
  /* post content .lf-post-content */
  .lf-post-content { font-size: .9rem; line-height: 1.82; color: var(--lf-text); flex: 1; }
  .lf-post-content img { display: block; border-radius: 0 !important; margin: 0; line-height: 0; max-width: 100%; }
  /* Float images */
  .bbc-img-left  { float: left;  margin: 2px 14px 8px 0; display: block; border-radius: 0; max-width: 50%; }
  .bbc-img-right { float: right; margin: 2px 0 8px 14px; display: block; border-radius: 0; max-width: 50%; }
  /* Clearfix so floats don't bleed past the post card */
  .lf-post-content::after { content: ''; display: table; clear: both; }
  .lf-post-content p { margin-bottom: 10px; }
  .lf-post-content p:last-child { margin-bottom: 0; }
  .lf-post-content strong { color: var(--lf-bright); }
  .lf-post-content a { color: var(--lf-accent-soft); text-decoration: underline; text-underline-offset: 2px; }
  .lf-post-content blockquote { border-left: 3px solid var(--lf-border2); padding: 8px 12px; margin: 10px 0; background: rgba(42,37,64,.2); border-radius: 0 4px 4px 0; font-style: italic; color: var(--lf-muted); }
  .lf-post-content blockquote cite { display: block; font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .1em; color: var(--lf-accent-soft); font-style: normal; margin-bottom: 5px; }
  .lf-post-content pre { background: rgba(0,0,0,.3); border: 1px solid var(--lf-border); border-radius: 4px; padding: 10px; overflow-x: auto; font-size: .8rem; margin: 10px 0; }
  .lf-post-content code { font-family: monospace; background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 3px; font-size: .82em; }
  .lf-post-content .bbc-center { text-align: center; }
  .lf-post-content .bbc-right { text-align: right; }
  .lf-post-content .bbc-left { text-align: left; }
  .lf-post-content hr { border: none; border-top: 1px solid var(--lf-border); margin: 12px 0; }
  .lf-post-content .bbc-spoiler-block { border: 1px solid var(--lf-border); border-radius: 4px; overflow: hidden; margin: 8px 0; }
  .lf-post-content .bbc-spoiler-label { background: var(--lf-surface); padding: 7px 12px; font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .lf-post-content .bbc-spoiler-label:hover { background: var(--lf-card2); }
  .lf-post-content .bbc-spoiler-label-arrow { font-size: .7rem; transition: transform .2s; }
  .lf-post-content .bbc-spoiler-label.open .bbc-spoiler-label-arrow { transform: rotate(90deg); }
  .lf-post-content .bbc-spoiler-body { padding: 10px 12px; display: none; font-size: .9rem; line-height: 1.7; }
  .lf-post-content .bbc-spoiler-body.open { display: block; }
  .lf-post-content .bbc-fieldset { border: 1px solid var(--lf-border2); border-radius: 4px; padding: 10px 12px; margin: 10px 0; }
  .lf-post-content .bbc-fieldset-legend { font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-accent-soft); margin-bottom: 6px; border-bottom: 1px solid var(--lf-border); padding-bottom: 4px; }
  
  .lf-post-footer-actions { display: flex; gap: 4px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--lf-border); align-items: center; flex-wrap: wrap; }
  .post-action-btn { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); background: none; border: 1px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 4px; transition: all .12s; }
  .post-action-btn:hover { background: rgba(42,37,64,.5); color: var(--lf-bright); border-color: var(--lf-border); }
  .post-action-btn svg { width: 11px; height: 11px; }
  
  /* BBC REPLY BOX #lf-reply-box */
  #lf-reply-box { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); margin-top: 18px; overflow: hidden; }
  #lf-reply-box-header { padding: 9px 13px; border-bottom: 1px solid var(--lf-border); background: rgba(42,37,64,.2); display: flex; align-items: center; justify-content: space-between; }
  #lf-reply-box-header span { font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); }
  .reply-mode-tabs { display: flex; gap: 2px; }
  .reply-mode-tab { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; cursor: pointer; color: var(--lf-muted); border: 1px solid transparent; transition: all .12s; }
  .reply-mode-tab:hover { color: var(--lf-text); }
  .reply-mode-tab.active { color: var(--lf-accent-soft); background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.25); }
  
  /* BBC Toolbar #lf-bbc-toolbar */
  #lf-bbc-toolbar { display: flex; flex-direction: column; border-bottom: 1px solid var(--lf-border); background: rgba(16,14,28,.5); }
  .bbc-toolbar-row { display: flex; flex-direction: row; align-items: center; gap: 1px; padding: 4px 8px; flex-wrap: wrap; }
  .bbc-toolbar-row + .bbc-toolbar-row { border-top: 1px solid rgba(42,37,64,.6); }
  .bbc-sep { width: 1px; height: 16px; background: var(--lf-border); margin: 0 4px; flex-shrink: 0; }
  .bbc-btn { height: 26px; min-width: 26px; padding: 0 5px; border-radius: 3px; border: none; background: none; cursor: pointer; color: var(--lf-muted); display: flex; align-items: center; justify-content: center; gap: 3px; transition: all .12s; font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .06em; white-space: nowrap; }
  .bbc-btn:hover { background: rgba(42,37,64,.6); color: var(--lf-bright); }
  .bbc-btn.active { background: rgba(139,92,246,.2); color: var(--lf-accent-soft); }
  .bbc-btn svg { width: 12px; height: 12px; }
  .bbc-btn .lbl { font-weight: 700; font-size: .72rem; font-family: serif; }
  
  .bbc-dropdown { position: relative; }
  .bbc-dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 300; background: var(--lf-card2); border: 1px solid var(--lf-border2); border-radius: 5px; min-width: 120px; display: none; padding: 4px 0; margin-top: 2px; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
  .bbc-dropdown-menu.open { display: block; }
  .bbc-dropdown-item { padding: 5px 13px; cursor: pointer; font-size: .82rem; color: var(--lf-text); transition: background .1s; display: flex; align-items: center; gap: 8px; }
  .bbc-dropdown-item:hover { background: rgba(42,37,64,.5); color: var(--lf-bright); }
  .swatch { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
  
  /* textarea / preview */
  #lf-reply-textarea { width: 100%; padding: 12px 14px; background: none; border: none; font-family: var(--lf-font-body); font-size: .9rem; color: var(--lf-text); resize: vertical; min-height: 130px; line-height: 1.7; display: block; }
  #lf-reply-textarea::placeholder { color: var(--lf-muted); }
  #lf-reply-textarea:focus { outline: none; }
  #lf-reply-preview { display: none; padding: 12px 14px; min-height: 130px; font-size: .9rem; line-height: 1.82; color: var(--lf-text); border-top: 1px dashed var(--lf-border); }
  #lf-reply-preview.visible { display: block; }
  #lf-reply-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--lf-border); flex-wrap: wrap; gap: 7px; }
  .reply-footer-left { font-size: .76rem; color: var(--lf-muted); }
  .reply-footer-right { display: flex; gap: 7px; }
  
  
  .thread-sidebar-section { margin-bottom: 26px; }
  .thread-sidebar-label { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
  .thread-sidebar-label::after { content: ''; flex: 1; height: 1px; background: var(--lf-border); }
  .participant-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
  .part-avatar { width: 24px; height: 24px; border-radius: 4px; overflow: hidden; background: var(--lf-surface); border: 1px solid var(--lf-border); flex-shrink: 0; }
  .part-avatar .ph { width: 100%; height: 100%; }
  .part-name { font-size: .78rem; color: var(--lf-text); cursor: pointer; } .part-name:hover { color: var(--lf-accent-soft); }
  .part-posts { font-size: .68rem; color: var(--lf-muted); margin-left: auto; }
  
  /* ===== CREATE PAGE #lf-create-page ===== */
  #lf-create-page { padding-top: 60px; min-height: 100vh; }
  #lf-create-layout { max-width: 760px; margin: 0 auto; padding: 50px 36px; }
  #lf-create-header { text-align: center; margin-bottom: 42px; }
  #lf-create-header h2 { font-family: var(--lf-font-display); font-size: 1.85rem; color: var(--lf-bright); margin-bottom: 7px; }
  #lf-create-header p { font-size: .94rem; color: var(--lf-muted); font-style: italic; }
  #lf-create-steps { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
  .step-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 18px; }
  .step-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--lf-border2); background: var(--lf-surface); display: flex; align-items: center; justify-content: center; font-family: var(--lf-font-ui); font-size: .66rem; color: var(--lf-muted); font-weight: 700; transition: all .3s; flex-shrink: 0; }
  .step-dot.active { border-color: var(--lf-accent); background: var(--lf-accent); color: #fff; }
  .step-dot.done { border-color: var(--lf-new-text); background: var(--lf-new-bg); color: var(--lf-new-text); }
  .step-label { font-family: var(--lf-font-ui); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lf-muted); margin-top: 5px; text-align: center; position: absolute; bottom: 0; white-space: nowrap; }
  .step-line { width: 54px; height: 1px; background: var(--lf-border); flex-shrink: 0; }
  .form-block { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 26px; margin-bottom: 14px; }
  .form-block-title { font-family: var(--lf-font-ui); font-size: .72rem; font-weight: 700; color: var(--lf-bright); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--lf-border); }
  .form-row { margin-bottom: 14px; }
  .form-row:last-child { margin-bottom: 0; }
  label { display: block; font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 6px; }
  .form-input, .form-textarea, .form-select { width: 100%; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-sm); padding: 9px 12px; font-family: var(--lf-font-body); font-size: .9rem; color: var(--lf-text); transition: border-color .2s; }
  .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--lf-accent); background: var(--lf-card); }
  .form-textarea { resize: vertical; min-height: 86px; line-height: 1.6; }
  .form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6485' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
  .form-hint { font-size: .74rem; color: var(--lf-muted); margin-top: 4px; font-style: italic; }
  .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .skin-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 8px; }
  .skin-option { border: 2px solid var(--lf-border); border-radius: 5px; overflow: hidden; cursor: pointer; transition: border-color .2s; position: relative; }
  .skin-option.selected { border-color: var(--lf-accent); }
  .skin-option.selected::after { content: ''; position: absolute; inset: 0; background: rgba(139,92,246,.14); }
  .skin-preview { height: 48px; }
  .skin-s1 { background: linear-gradient(135deg,#0a0910,#1a1728); }
  .skin-s2 { background: linear-gradient(135deg,#0a1a14,#141a0a); }
  .skin-s3 { background: linear-gradient(135deg,#1a0d0a,#2a1a1a); }
  .skin-s4 { background: linear-gradient(135deg,#0a0a1a,#1a1a2a); }
  .skin-name { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); padding: 4px 5px; text-align: center; background: var(--lf-card); }
  .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--lf-border); }
  .toggle-row:last-child { border-bottom: none; }
  .toggle-info { flex: 1; }
  .toggle-name { font-size: .87rem; color: var(--lf-bright); }
  .toggle-desc { font-size: .74rem; color: var(--lf-muted); }
  .toggle { width: 38px; height: 20px; border-radius: 10px; background: var(--lf-border2); border: none; cursor: pointer; position: relative; transition: background .2s; flex-shrink: 0; }
  .toggle.on { background: var(--lf-accent); }
  .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
  .toggle.on::after { left: 20px; }
  #lf-create-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
  
  /* ===== THEME EDITOR PANEL #lf-theme-panel ===== */
  #lf-theme-panel { position: fixed; top: 60px; right: -430px; bottom: 0; width: 430px; background: var(--lf-deep); border-left: 1px solid var(--lf-border2); z-index: 870; transition: right .3s ease; overflow: hidden; display: flex; flex-direction: column; }
  #lf-theme-panel.open { right: 0; }
  #lf-theme-panel-header { padding: 14px 18px; border-bottom: 1px solid var(--lf-border); background: var(--lf-surface); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  #lf-theme-panel-header h3 { font-family: var(--lf-font-ui); font-size: .8rem; font-weight: 700; color: var(--lf-bright); letter-spacing: .08em; }
  .theme-panel-close { background: none; border: none; cursor: pointer; color: var(--lf-muted); padding: 3px; border-radius: 3px; transition: color .15s; display: flex; }
  .theme-panel-close:hover { color: var(--lf-bright); }
  .theme-tabs { display: flex; border-bottom: 1px solid var(--lf-border); flex-shrink: 0; background: var(--lf-surface); }
  .theme-tab { flex: 1; padding: 9px 6px; text-align: center; font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--lf-muted); border-bottom: 2px solid transparent; transition: all .15s; }
  .theme-tab:hover { color: var(--lf-text); }
  .theme-tab.active { color: var(--lf-accent-soft); border-bottom-color: var(--lf-accent); }
  .theme-panel-body { padding: 16px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lf-border) transparent; }
  .color-var-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--lf-border); gap: 10px; }
  .color-var-row:last-child { border-bottom: none; }
  .color-var-info { flex: 1; min-width: 0; }
  .color-var-name { font-family: monospace; font-size: .74rem; color: var(--lf-accent-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .color-var-label { font-size: .72rem; color: var(--lf-muted); }
  .color-swatch-wrap { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
  .color-input-text { width: 72px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 3px; padding: 3px 6px; font-family: monospace; font-size: .7rem; color: var(--lf-text); }
  .color-swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--lf-border); cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden; }
  .color-swatch input[type="color"] { position: absolute; inset: -4px; opacity: 0; cursor: pointer; width: calc(100% + 8px); height: calc(100% + 8px); }
  #lf-custom-css-editor { width: 100%; min-height: 240px; background: #0d1117; border: 1px solid var(--lf-border); border-radius: var(--lf-radius-sm); padding: 12px; font-family: monospace; font-size: .76rem; color: #a6e22e; resize: vertical; line-height: 1.6; }
  #lf-custom-css-editor:focus { outline: none; border-color: var(--lf-accent); }
  .css-actions { display: flex; gap: 8px; margin-top: 10px; }
  .css-hint { font-size: .74rem; color: var(--lf-muted); margin-bottom: 10px; line-height: 1.5; font-style: italic; }
  .id-ref-list { display: flex; flex-direction: column; gap: 4px; }
  .id-ref-item { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 4px; padding: 8px 10px; cursor: pointer; transition: border-color .15s; }
  .id-ref-item:hover { border-color: var(--lf-accent); }
  .id-ref-selector { font-family: monospace; font-size: .74rem; color: var(--lf-accent-soft); }
  .id-ref-desc { font-size: .7rem; color: var(--lf-muted); margin-top: 2px; }
  .id-ref-copy { font-family: var(--lf-font-ui); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); }
  .id-ref-section-head { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lf-gold); padding: 10px 0 5px; border-top: 1px solid var(--lf-border); margin-top: 6px; }
  .id-ref-section-head:first-child { border-top: none; margin-top: 0; }
  
  /* copy toast */
  #lf-copy-toast { position: fixed; bottom: 80px; right: 26px; z-index: 9999; background: var(--lf-card2); border: 1px solid var(--lf-accent); border-radius: 6px; padding: 8px 16px; font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-accent-soft); opacity: 0; transition: opacity .3s; pointer-events: none; }
  #lf-copy-toast.show { opacity: 1; }
  
  /* modals */
  .modal-overlay { position: fixed; inset: 0; background: rgba(10,9,16,.85); backdrop-filter: blur(4px); z-index: 9000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .modal-overlay.open { opacity: 1; pointer-events: all; }
  .modal { background: var(--lf-card); border: 1px solid var(--lf-border2); border-radius: 12px; width: 100%; max-width: 530px; max-height: 80vh; overflow-y: auto; transform: translateY(12px); transition: transform .2s; }
  .modal-overlay.open .modal { transform: translateY(0); }
  .modal-header { padding: 17px 20px; border-bottom: 1px solid var(--lf-border); display: flex; align-items: center; justify-content: space-between; }
  .modal-title { font-family: var(--lf-font-ui); font-size: .82rem; font-weight: 700; color: var(--lf-bright); letter-spacing: .06em; }
  .modal-close { background: none; border: none; cursor: pointer; color: var(--lf-muted); padding: 3px; border-radius: 3px; transition: color .15s; display: flex; }
  .modal-close:hover { color: var(--lf-bright); }
  .modal-body { padding: 20px; }
  .modal-footer { padding: 13px 20px; border-top: 1px solid var(--lf-border); display: flex; justify-content: flex-end; gap: 8px; }
  
  /* === NAV DROPDOWNS (settings, theme) === */
  .nav-dropdown { position: relative; }
  .nav-dropdown-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 950;
    background: var(--lf-card2); border: 1px solid var(--lf-border2);
    border-radius: var(--lf-radius); min-width: 280px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity .18s, transform .18s;
  }
  .nav-dropdown-menu.open { opacity: 1; pointer-events: all; transform: translateY(0); }
  .nav-dropdown-header {
    padding: 12px 16px; border-bottom: 1px solid var(--lf-border);
    font-family: var(--lf-font-ui); font-size: .64rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--lf-muted);
  }
  .nav-dropdown-body { padding: 8px 0; }
  .nav-dropdown-footer { padding: 10px 16px; border-top: 1px solid var(--lf-border); }
  
  /* Settings toggles inside nav dropdown */
  .settings-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px; gap: 12px; transition: background .12s;
  }
  .settings-toggle-row:hover { background: rgba(42,37,64,.3); }
  .settings-toggle-info { flex: 1; min-width: 0; }
  .settings-toggle-name { font-size: .84rem; color: var(--lf-bright); }
  .settings-toggle-desc { font-size: .72rem; color: var(--lf-muted); }
  .settings-sep { height: 1px; background: var(--lf-border); margin: 4px 16px; }
  
  /* nav icon button */
  .nav-icon-btn {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius-sm); padding: 5px 11px; cursor: pointer;
    font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--lf-muted); transition: all .15s;
  }
  .nav-icon-btn:hover { color: var(--lf-bright); border-color: var(--lf-muted); }
  .nav-icon-btn svg { width: 13px; height: 13px; }
  
  /* === FULL-PAGE EDITOR  #lf-fullpage-editor === */
  #lf-fullpage-editor {
    position: fixed; inset: 0; z-index: 8500;
    background: var(--lf-bg);
    display: flex; flex-direction: column;
    transform: translateY(100%); transition: transform .3s ease;
  }
  #lf-fullpage-editor.open { transform: translateY(0); }
  
  #lf-fpe-header {
    height: 58px; background: var(--lf-surface); border-bottom: 1px solid var(--lf-border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; flex-shrink: 0;
  }
  #lf-fpe-header-left { display: flex; align-items: center; gap: 14px; }
  #lf-fpe-title { font-family: var(--lf-font-ui); font-size: .78rem; font-weight: 700; color: var(--lf-bright); letter-spacing: .08em; }
  #lf-fpe-thread { font-size: .76rem; color: var(--lf-muted); font-style: italic; }
  #lf-fpe-header-right { display: flex; gap: 8px; align-items: center; }
  
  #lf-fpe-toolbar-wrap { background: rgba(16,14,28,.7); border-bottom: 1px solid var(--lf-border); flex-shrink: 0; }
  
  #lf-fpe-body {
    display: grid; grid-template-columns: 1fr 1fr;
    flex: 1; overflow: hidden;
  }
  #lf-fpe-write-pane { display: flex; flex-direction: column; border-right: 1px solid var(--lf-border); }
  #lf-fpe-preview-pane { display: flex; flex-direction: column; overflow-y: auto; }
  
  .fpe-pane-label {
    font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--lf-muted);
    padding: 7px 16px; background: rgba(42,37,64,.12);
    border-bottom: 1px solid var(--lf-border); flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
  }
  .fpe-pane-label span { display: flex; align-items: center; gap: 5px; }
  
  #lf-fpe-textarea {
    flex: 1; width: 100%; padding: 20px 24px;
    background: none; border: none; resize: none;
    font-family: var(--lf-font-body); font-size: .96rem; color: var(--lf-text);
    line-height: 1.75;
  }
  #lf-fpe-textarea:focus { outline: none; }
  
  #lf-fpe-preview-content {
    flex: 1; padding: 20px 24px;
    font-size: .96rem; line-height: 1.82; color: var(--lf-text);
  }
  
  #lf-fpe-footer {
    background: var(--lf-surface); border-top: 1px solid var(--lf-border);
    padding: 10px 24px; display: flex; align-items: center;
    justify-content: space-between; flex-shrink: 0;
  }
  #lf-fpe-char-count { font-size: .76rem; color: var(--lf-muted); font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .08em; }
  #lf-fpe-footer-actions { display: flex; gap: 8px; }
  
  /* mobile: stack panes */
  @media(max-width:860px) {
    #lf-fpe-body { grid-template-columns: 1fr; }
    #lf-fpe-preview-pane { display: none; }
    #lf-fpe-preview-pane.mobile-visible { display: flex; }
  }
  
  /* === CHARACTER PROFILE PAGE  #page-character === */
  #page-character { padding-top: 60px; }
  
  #lf-char-banner {
    position: relative; height: 220px; overflow: hidden;
    background: var(--lf-char-banner-bg, linear-gradient(135deg, #0d1a2a, #2a0d1a));
  }
  #lf-char-banner img { width: 100%; height: 100%; object-fit: cover; }
  #lf-char-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,16,1) 0%, rgba(10,9,16,.3) 60%, transparent 100%); }
  
  #lf-char-profile-layout { display: grid; grid-template-columns: 260px 1fr; max-width: 1100px; margin: 0 auto; padding: 0 36px 60px; gap: 32px; }
  
  /* left col: character card  #lf-char-card */
  #lf-char-card { margin-top: -60px; position: relative; z-index: 2; }
  #lf-char-avatar-wrap { width: 120px; height: 120px; border-radius: 12px; overflow: hidden; border: 3px solid var(--lf-border2); background: var(--lf-surface); margin-bottom: 16px; position: relative; }
  #lf-char-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
  #lf-char-avatar-wrap .ph { width: 100%; height: 100%; }
  #lf-char-avatar-edit { position: absolute; inset: 0; background: rgba(10,9,16,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; cursor: pointer; border-radius: 10px; }
  #lf-char-avatar-wrap:hover #lf-char-avatar-edit { opacity: 1; }
  #lf-char-avatar-edit svg { width: 22px; height: 22px; color: #fff; }
  
  #lf-char-name { font-family: var(--lf-font-display); font-size: 1.4rem; color: var(--lf-char-name-color, var(--lf-bright)); margin-bottom: 4px; }
  #lf-char-alias { font-size: .88rem; color: var(--lf-char-alias-color, var(--lf-muted)); font-style: italic; margin-bottom: 8px; }
  #lf-char-status-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; margin-bottom: 16px; }
  #lf-char-status-badge.active { background: var(--lf-new-bg); color: var(--lf-new-text); }
  #lf-char-status-badge.hiatus { background: rgba(107,100,133,.2); color: var(--lf-muted); }
  
  .char-stat-block { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 16px; margin-bottom: 12px; }
  .char-stat-block-title { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 10px; }
  .char-stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--lf-border); font-size: .82rem; }
  .char-stat-row:last-child { border-bottom: none; }
  .char-stat-key { color: var(--lf-muted); }
  .char-stat-val { color: var(--lf-text); font-family: var(--lf-font-ui); font-size: .74rem; letter-spacing: .04em; text-align: right; max-width: 130px; }
  
  /* game stats bar (HP, etc) */
  #lf-char-game-stats { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 14px; margin-bottom: 12px; }
  .stat-bar-label { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-muted); display: flex; justify-content: space-between; margin-bottom: 4px; }
  .stat-bar-track { height: 6px; background: var(--lf-border); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
  .stat-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
  .stat-bar-fill.hp { background: linear-gradient(90deg, var(--lf-char-hp-color, #5ecf8a), color-mix(in srgb, var(--lf-char-hp-color, #5ecf8a) 70%, #fff 30%)); }
  .stat-bar-fill.mp { background: linear-gradient(90deg, var(--lf-char-mp-color, var(--lf-accent)), color-mix(in srgb, var(--lf-char-mp-color, var(--lf-accent)) 70%, #fff 30%)); }
  .stat-bar-fill.stamina { background: linear-gradient(90deg, var(--lf-char-stamina-color, var(--lf-gold)), color-mix(in srgb, var(--lf-char-stamina-color, var(--lf-gold)) 70%, #fff 30%)); }
  
  /* inventory in char card */
  #lf-char-inventory { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 14px; margin-bottom: 12px; }
  .inv-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 8px; }
  .inv-slot { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--lf-border); background: var(--lf-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s; position: relative; }
  .inv-slot:hover { border-color: var(--lf-accent); }
  .inv-slot.filled { border-color: var(--lf-border2); background: var(--lf-card2); }
  .inv-slot svg { width: 14px; height: 14px; color: var(--lf-muted); opacity: .4; }
  .inv-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
  .inv-item-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: .58rem; color: var(--lf-muted); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
  .inv-slot:hover .inv-item-label { opacity: 1; }
  
  /* right col: profile content  #lf-char-content */
  #lf-char-content { padding-top: 24px; }
  
  #lf-char-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--lf-border); margin-bottom: 24px; }
  .char-tab { font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; color: var(--lf-muted); border-bottom: 2px solid transparent; transition: all .15s; }
  .char-tab:hover { color: var(--lf-text); }
  .char-tab.active { color: var(--lf-accent-soft); border-bottom-color: var(--lf-accent); }
  
  .char-tab-body { display: none; }
  .char-tab-body.active { display: block; }
  
  /* biography section  #lf-char-bio */
  #lf-char-bio { font-size: .94rem; line-height: 1.85; color: var(--lf-text); }
  #lf-char-bio h3 { font-family: var(--lf-font-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-gold); margin: 22px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--lf-border); }
  #lf-char-bio p { margin-bottom: 12px; }
  
  /* relationships  #lf-char-relationships */
  #lf-char-relationships { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rel-card { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; transition: border-color .15s; }
  .rel-card:hover { border-color: rgba(139,92,246,.35); }
  .rel-avatar { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--lf-surface); }
  .rel-avatar .ph { width: 100%; height: 100%; }
  .rel-info { flex: 1; min-width: 0; }
  .rel-name { font-family: var(--lf-font-ui); font-size: .76rem; color: var(--lf-bright); margin-bottom: 2px; }
  .rel-type { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; display: inline-block; margin-bottom: 4px; }
  .rel-type.ally     { background: var(--lf-new-bg); color: var(--lf-new-text); }
  .rel-type.enemy    { background: var(--lf-hot-bg); color: var(--lf-hot-text); }
  .rel-type.neutral  { background: rgba(107,100,133,.2); color: var(--lf-muted); }
  .rel-type.romantic { background: rgba(224,92,200,.12); color: #e05cc8; }
  .rel-type.family   { background: rgba(201,168,76,.1); color: var(--lf-gold); }
  .rel-desc { font-size: .76rem; color: var(--lf-muted); line-height: 1.4; }
  
  /* post history  #lf-char-posts */
  #lf-char-posts { display: flex; flex-direction: column; gap: 8px; }
  .char-post-row { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: 6px; padding: 12px 14px; cursor: pointer; transition: border-color .15s; }
  .char-post-row:hover { border-color: rgba(139,92,246,.3); }
  .char-post-thread { font-family: var(--lf-font-ui); font-size: .78rem; color: var(--lf-bright); margin-bottom: 4px; }
  .char-post-excerpt { font-size: .82rem; color: var(--lf-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .char-post-meta { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-muted); margin-top: 6px; }
  
  /* gallery  #lf-char-gallery */
  #lf-char-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .gallery-slot { aspect-ratio: 3/4; border-radius: var(--lf-radius-sm); overflow: hidden; background: var(--lf-surface); border: 1px solid var(--lf-border); cursor: pointer; transition: border-color .15s; position: relative; }
  .gallery-slot:hover { border-color: var(--lf-accent); }
  .gallery-slot .ph { width: 100%; height: 100%; }
  .gallery-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--lf-border2); }
  .gallery-add svg { width: 20px; height: 20px; color: var(--lf-muted); }
  .gallery-add span { font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); }
  .gallery-add:hover { border-color: var(--lf-accent); }
  
  @media(max-width:900px){
    #lf-char-profile-layout { grid-template-columns: 1fr; }
    #lf-char-card { margin-top: 0; }
    #lf-char-relationships { grid-template-columns: 1fr; }
    #lf-char-gallery { grid-template-columns: repeat(2,1fr); }
  }
  
  /* === SETTINGS PANEL (realm) #lf-settings-panel === */
  #lf-settings-panel {
    position: fixed; top: 60px; right: -430px; bottom: 0; width: 430px;
    background: var(--lf-deep); border-left: 1px solid var(--lf-border2);
    z-index: 880; transition: right .3s ease;
    display: flex; flex-direction: column; overflow: hidden;
  }
  #lf-settings-panel.open { right: 0; }
  #lf-settings-panel-header {
    padding: 14px 18px; border-bottom: 1px solid var(--lf-border);
    background: var(--lf-surface); display: flex; align-items: center;
    justify-content: space-between; flex-shrink: 0;
  }
  #lf-settings-panel-header h3 { font-family: var(--lf-font-ui); font-size: .8rem; font-weight: 700; color: var(--lf-bright); letter-spacing: .08em; }
  .settings-panel-body { padding: 0; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lf-border) transparent; }
  .settings-section-head { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lf-gold); padding: 14px 18px 6px; border-top: 1px solid var(--lf-border); margin-top: 0; }
  .settings-section-head:first-child { border-top: none; }
  .settings-panel-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px; gap: 12px; border-bottom: 1px solid rgba(42,37,64,.4); }
  .settings-panel-toggle-row:last-of-type { border-bottom: none; }
  .settings-panel-toggle-info { flex: 1; }
  .settings-panel-toggle-name { font-size: .86rem; color: var(--lf-bright); }
  .settings-panel-toggle-desc { font-size: .72rem; color: var(--lf-muted); margin-top: 2px; }
  .settings-panel-footer { padding: 14px 18px; border-top: 1px solid var(--lf-border); display: flex; gap: 8px; background: var(--lf-surface); flex-shrink: 0; }
  
  /* color group header in theme panel */
  .color-group-head { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lf-gold); padding: 12px 0 5px; border-top: 1px solid var(--lf-border); margin-top: 6px; }
  .color-group-head:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
  
  /* === POST DESIGN PANEL === */
  .post-design-panel { background: var(--lf-deep); border: 1px solid var(--lf-border2); border-radius: 6px; margin-top: 10px; }
  .pdp-inner { padding: 14px; }
  .pdp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .pdp-header span { font-family: var(--lf-font-ui); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-bright); }
  .pdp-section-label { font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 8px; }
  .post-skin-grid { display: flex; gap: 6px; flex-wrap: wrap; }
  .post-skin-thumb { padding: 5px 10px; border-radius: 4px; border: 2px solid var(--lf-border); cursor: pointer; font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .08em; color: var(--lf-muted); transition: border-color .15s; }
  .post-skin-thumb:hover { border-color: var(--lf-border2); color: var(--lf-text); }
  .post-skin-thumb.active { border-color: var(--lf-accent); color: var(--lf-accent-soft); }
  .pdp-css-ta { width: 100%; min-height: 80px; background: #0d1117; border: 1px solid var(--lf-border); border-radius: 4px; padding: 10px; font-family: monospace; font-size: .74rem; color: #a6e22e; resize: vertical; line-height: 1.6; }
  .pdp-css-ta:focus { outline: none; border-color: var(--lf-accent); }
  
  /* post inline editor */
  .post-inline-editor { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lf-border); }
  .post-edit-ta { width: 100%; min-height: 100px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 4px; padding: 10px; font-family: var(--lf-font-body); font-size: .9rem; color: var(--lf-text); resize: vertical; line-height: 1.7; }
  .post-edit-ta:focus { outline: none; border-color: var(--lf-accent); }
  .post-edit-actions { display: flex; gap: 7px; margin-top: 8px; }
  
  /* === CUSTOM BBC BUTTONS TAB === */
  .cbb-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--lf-border); gap: 10px; }
  .cbb-item:last-child { border-bottom: none; }
  .cbb-item-info { flex: 1; min-width: 0; }
  .cbb-item-label { font-family: var(--lf-font-ui); font-size: .74rem; color: var(--lf-bright); display: block; }
  .cbb-item-tags { font-family: monospace; font-size: .68rem; color: var(--lf-muted); }
  .cbb-form { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 6px; padding: 14px; margin-top: 14px; }
  .cbb-form-title { font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 12px; }
  .cbb-form-row { margin-bottom: 10px; }
  .cbb-form-row label { display: block; font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 4px; }
  .cbb-form-row input { width: 100%; background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: 3px; padding: 7px 10px; font-family: monospace; font-size: .82rem; color: var(--lf-text); }
  .cbb-form-row input:focus { outline: none; border-color: var(--lf-accent); }
  .cbb-hint { font-size: .72rem; color: var(--lf-muted); font-style: italic; margin-top: 4px; }
  .cbb-preview-row { background: rgba(42,37,64,.2); border-radius: 4px; padding: 8px; margin-top: 10px; }
  .cbb-custom-row-label { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-muted); padding: 3px 8px; }
  #lf-custom-bbc-row, #lf-fpe-custom-bbc-row { display: flex; gap: 2px; flex-wrap: wrap; padding: 4px 8px; min-height: 34px; background: rgba(16,14,28,.3); border-top: 1px solid rgba(42,37,64,.4); }
  
  /* animations */
  .fade-in { opacity: 0; transform: translateY(18px); transition: opacity .6s ease,transform .6s ease; }
  .fade-in.visible { opacity: 1; transform: translateY(0); }
  .stagger > * { opacity: 0; transform: translateY(13px); transition: opacity .5s ease,transform .5s ease; }
  .stagger.visible > *:nth-child(1){opacity:1;transform:none;transition-delay:.00s}
  .stagger.visible > *:nth-child(2){opacity:1;transform:none;transition-delay:.07s}
  .stagger.visible > *:nth-child(3){opacity:1;transform:none;transition-delay:.14s}
  .stagger.visible > *:nth-child(4){opacity:1;transform:none;transition-delay:.21s}
  .stagger.visible > *:nth-child(5){opacity:1;transform:none;transition-delay:.28s}
  .stagger.visible > *:nth-child(6){opacity:1;transform:none;transition-delay:.35s}
  
  
  /* ============================================================
     SETTINGS-DRIVEN VISIBILITY CLASSES
     Applied to #lf-body by saveSettings() in main.js
     ============================================================ */
  
  /* Dice system */
  body:not(.setting-dice) .dice-roll-btn { display: none !important; }
  
  /* HP bar */
  body:not(.setting-hp) .stat-bar-fill.hp,
  body:not(.setting-hp) .stat-bar-fill.hp + .stat-bar-track { display: none !important; }
  body:not(.setting-hp) .stat-bar-label:has(+ .stat-bar-track .stat-bar-fill.hp) { display: none !important; }
  
  /* MP bar */
  body:not(.setting-mp) .stat-bar-fill.mp { display: none !important; }
  
  /* Stamina bar */
  body:not(.setting-stamina) .stat-bar-fill.stamina { display: none !important; }
  
  /* Hide whole game stats block if all bars off */
  body:not(.setting-hp):not(.setting-mp):not(.setting-stamina) #lf-char-game-stats { display: none !important; }
  
  /* Inventory */
  body:not(.setting-inv) #lf-char-inventory { display: none !important; }
  
  /* Post count */
  body:not(.setting-postcount) .lf-post-stats { display: none !important; }
  
  /* Online members sidebar section */
  body:not(.setting-online) .sidebar-section:has(.online-list) { display: none !important; }
  
  /* Guest viewing — visual indicator only in this prototype */
  body.setting-guests #lf-forum-statsbar::after { content: '· Guests: viewing enabled'; font-size:.7rem; color: var(--lf-new-text); }
  
  /* Content warnings tag visibility */
  body:not(.setting-cw) .tag-cw { display: none !important; }
  
  /* Word count display on posts */
  body.setting-wc .lf-post-date::after { content: ' · ' attr(data-words) ' words'; }
  
  /* Post dating label */
  body.setting-dating .lf-post-ic-date { display: inline !important; }
  body:not(.setting-dating) .lf-post-ic-date { display: none !important; }
  
  /* Character application required badge on forum */
  body.setting-apps #lf-forum-main::before {
    content: 'Applications required to post IC';
    display: block; text-align: center;
    font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--lf-gold); background: rgba(201,168,76,.06);
    border: 1px solid rgba(201,168,76,.15); border-radius: 4px;
    padding: 6px; margin-bottom: 14px;
  }
  
  /* responsive */
  @media(max-width:1100px){
    #lf-forum-layout{grid-template-columns:1fr}
    #lf-forum-sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--lf-border)}
  
  
    .lf-subforum-row{grid-template-columns:1fr 70px 70px}
    .lf-subforum-lastpost{display:none}
    #lf-forum-col-headers{grid-template-columns:1fr 70px 70px}
    #lf-forum-col-headers .forum-col-header:last-child{display:none}
  }
  @media(max-width:900px){
    #lf-rp-grid{grid-template-columns:1fr 1fr}
    .rp-card.rp-featured{grid-row:auto}
    #lf-shop-grid{grid-template-columns:1fr 1fr}
    #lf-features-grid{grid-template-columns:1fr 1fr}
    #lf-footer-inner{grid-template-columns:1fr 1fr}
    .lf-post-layout{grid-template-columns:1fr}
    .lf-post-author{flex-direction:row;border-right:none;border-bottom:1px solid var(--lf-border)}
    #lf-realm-banner-content{padding:18px 22px}
    #lf-forum-main{padding:18px}
    #lf-theme-panel{width:100%;right:-100%}
  }
  @media(max-width:680px){
    #lf-nav{padding:0 18px}
    #lf-nav-links{display:none}
    #lf-hub-section-hot,#lf-hub-section-recruiting,#lf-hub-section-features,#lf-hub-section-cta{padding:50px 18px}
    #lf-rp-grid{grid-template-columns:1fr}
    #lf-features-grid{grid-template-columns:1fr}
    #lf-shop-section{padding:22px 18px;margin:0 18px}
    #lf-shop-grid{grid-template-columns:1fr 1fr}
    #lf-hero-stats{gap:16px;flex-wrap:wrap}
    #lf-footer-inner{grid-template-columns:1fr}
    .form-2col{grid-template-columns:1fr}
    .skin-grid{grid-template-columns:repeat(2,1fr)}
  
    #lf-forum-statsbar{padding:7px 16px}
  }
  
  /* ============================================================
     ADMIN PROFILE BUILDER  #page-admin-profile
     ============================================================ */
  #page-admin-profile { padding-top: 60px; min-height: 100vh; background: var(--lf-bg); }
  #lf-apb-layout { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - 60px); }
  
  /* sidebar */
  #lf-apb-sidebar { background: var(--lf-sidebar-bg); border-right: 1px solid var(--lf-border); padding: 24px 0; overflow-y: auto; height: calc(100vh - 60px); position: sticky; top: 60px; display: flex; flex-direction: column; }
  #lf-apb-sidebar-header { padding: 0 18px 16px; border-bottom: 1px solid var(--lf-border); margin-bottom: 8px; }
  #lf-apb-sidebar-header h2 { font-family: var(--lf-font-display); font-size: 1rem; color: var(--lf-bright); }
  #lf-apb-sidebar-header p { font-size: .78rem; color: var(--lf-muted); margin-top: 4px; }
  .apb-section-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; flex: 1; overflow-y: auto; }
  .apb-nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 5px; cursor: pointer; font-size: .84rem; color: var(--lf-muted); transition: all .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .apb-nav-item:hover { background: rgba(42,37,64,.4); color: var(--lf-text); }
  .apb-nav-item.active { background: rgba(139,92,246,.1); color: var(--lf-accent-soft); }
  .apb-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
  
  /* main canvas */
  #lf-apb-main { padding: 32px 40px; overflow-y: auto; }
  .apb-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--lf-border); }
  .apb-section-title { font-family: var(--lf-font-display); font-size: 1.1rem; color: var(--lf-bright); }
  
  /* layout toggle */
  .apb-layout-toggle { display: flex; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); overflow: hidden; }
  .apb-layout-opt { padding: 8px 20px; cursor: pointer; font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); display: flex; align-items: center; gap: 6px; transition: all .15s; }
  .apb-layout-opt:hover { color: var(--lf-text); }
  .apb-layout-opt.active { background: var(--lf-accent); color: #fff; }
  .apb-layout-opt svg { width: 13px; height: 13px; }
  
  /* section builder */
  .apb-section-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .apb-section-card { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); overflow: hidden; }
  .apb-section-card-header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: rgba(42,37,64,.2); border-bottom: 1px solid var(--lf-border); cursor: pointer; }
  .apb-drag-handle { color: var(--lf-border2); cursor: grab; flex-shrink: 0; }
  .apb-drag-handle svg { width: 14px; height: 14px; display: block; }
  .apb-section-card-title-input { flex: 1; background: none; border: none; font-family: var(--lf-font-ui); font-size: .78rem; font-weight: 700; color: var(--lf-bright); letter-spacing: .06em; padding: 0; min-width: 0; }
  .apb-section-card-title-input:focus { outline: none; }
  .apb-section-card-actions { display: flex; gap: 5px; align-items: center; }
  .apb-toggle-vis { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; cursor: pointer; border: 1px solid var(--lf-border); background: none; color: var(--lf-muted); transition: all .15s; }
  .apb-toggle-vis.visible { background: rgba(94,207,138,.1); color: var(--lf-new-text); border-color: rgba(94,207,138,.25); }
  .apb-section-card-body { padding: 14px; display: none; }
  .apb-section-card.expanded .apb-section-card-body { display: block; }
  .apb-chevron { transition: transform .2s; color: var(--lf-muted); }
  .apb-section-card.expanded .apb-chevron { transform: rotate(180deg); }
  
  /* field rows */
  .apb-field-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .apb-field-row { display: flex; align-items: center; gap: 8px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 5px; padding: 8px 10px; }
  .apb-field-row input[type="text"] { flex: 1; background: none; border: none; font-size: .84rem; color: var(--lf-text); min-width: 0; }
  .apb-field-row input[type="text"]:focus { outline: none; }
  .apb-field-type-badge { font-family: var(--lf-font-ui); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; background: rgba(139,92,246,.12); color: var(--lf-accent-soft); border: 1px solid rgba(139,92,246,.2); flex-shrink: 0; cursor: pointer; }
  .apb-field-required { width: 14px; height: 14px; accent-color: var(--lf-accent); flex-shrink: 0; }
  .apb-add-field-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
  .apb-field-type-btn { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; cursor: pointer; background: var(--lf-surface); border: 1px solid var(--lf-border); color: var(--lf-muted); transition: all .15s; display: flex; align-items: center; gap: 5px; }
  .apb-field-type-btn:hover { border-color: var(--lf-accent); color: var(--lf-accent-soft); }
  .apb-field-type-btn svg { width: 11px; height: 11px; }
  
  /* stat builder */
  .apb-stat-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
  .apb-stat-row { display: flex; align-items: center; gap: 8px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 5px; padding: 7px 10px; }
  .apb-stat-row input[type="text"] { flex: 1; background: none; border: none; font-size: .84rem; color: var(--lf-text); min-width: 0; }
  .apb-stat-row input[type="text"]:focus { outline: none; }
  .apb-color-swatch-mini { width: 20px; height: 20px; border-radius: 3px; border: 1px solid var(--lf-border); position: relative; overflow: hidden; flex-shrink: 0; cursor: pointer; }
  .apb-color-swatch-mini input[type="color"] { position: absolute; inset: -4px; opacity: 0; cursor: pointer; width: calc(100%+8px); height: calc(100%+8px); }
  .apb-stat-type-select { background: var(--lf-card2); border: 1px solid var(--lf-border); border-radius: 3px; font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-muted); padding: 3px 5px; cursor: pointer; }
  .apb-remove-btn { background: none; border: none; color: var(--lf-muted); cursor: pointer; padding: 2px; border-radius: 3px; display: flex; align-items: center; transition: color .15s; flex-shrink: 0; }
  .apb-remove-btn:hover { color: #e06060; }
  .apb-remove-btn svg { width: 13px; height: 13px; }
  .apb-add-btn { display: flex; align-items: center; gap: 7px; padding: 9px; border: 2px dashed var(--lf-border2); border-radius: 5px; cursor: pointer; color: var(--lf-muted); font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; width: 100%; background: none; transition: all .15s; }
  .apb-add-btn:hover { border-color: var(--lf-accent); color: var(--lf-accent-soft); background: rgba(139,92,246,.04); }
  .apb-add-btn svg { width: 14px; height: 14px; }
  
  /* resource bar builder */
  .apb-resource-row { display: flex; align-items: center; gap: 8px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 5px; padding: 8px 10px; margin-bottom: 7px; }
  .apb-resource-row input[type="text"] { flex: 1; background: none; border: none; font-size: .84rem; color: var(--lf-text); min-width: 0; }
  .apb-resource-row input[type="text"]:focus { outline: none; }
  .apb-resource-max { width: 52px; background: var(--lf-card2); border: 1px solid var(--lf-border); border-radius: 3px; padding: 3px 6px; font-size: .82rem; color: var(--lf-text); text-align: center; }
  
  /* preview section */
  #lf-apb-preview { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 20px; margin-top: 20px; }
  .apb-preview-title { font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lf-gold); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
  .apb-preview-title::after { content: ''; flex: 1; height: 1px; background: var(--lf-border); }
  .apb-preview-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--lf-border); margin-bottom: 14px; flex-wrap: wrap; }
  .apb-preview-tab { font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; color: var(--lf-muted); border-bottom: 2px solid transparent; }
  .apb-preview-tab.active { color: var(--lf-accent-soft); border-bottom-color: var(--lf-accent); }
  .apb-preview-field { padding: 8px 0; border-bottom: 1px solid var(--lf-border); display: flex; flex-direction: column; gap: 4px; }
  .apb-preview-field:last-child { border-bottom: none; }
  .apb-preview-field-label { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lf-muted); }
  .apb-preview-field-input { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 3px; padding: 6px 10px; font-size: .84rem; color: var(--lf-muted); font-style: italic; }
  .apb-preview-bar { height: 6px; border-radius: 3px; margin-top: 3px; }
  .apb-preview-stat { display: flex; justify-content: space-between; font-size: .82rem; color: var(--lf-muted); padding: 5px 0; border-bottom: 1px solid var(--lf-border); }
  .apb-preview-stat:last-child { border-bottom: none; }
  .apb-preview-stat-key { color: var(--lf-muted); }
  .apb-preview-stat-val { font-family: var(--lf-font-ui); font-size: .72rem; color: var(--lf-text); }
  
  /* ============================================================
     FULL-PAGE PROFILE EDITOR  #page-profile-edit
     ============================================================ */
  #page-profile-edit { padding-top: 60px; min-height: 100vh; background: var(--lf-bg); }
  #lf-fpe2-header { background: var(--lf-surface); border-bottom: 1px solid var(--lf-border); padding: 22px 44px; display: flex; align-items: center; justify-content: space-between; }
  #lf-fpe2-header-left h2 { font-family: var(--lf-font-display); font-size: 1.2rem; color: var(--lf-bright); }
  #lf-fpe2-header-left p { font-size: .84rem; color: var(--lf-muted); margin-top: 3px; }
  #lf-fpe2-header-right { display: flex; gap: 8px; }
  
  #lf-fpe2-layout { display: grid; grid-template-columns: 260px 1fr; max-width: 1200px; margin: 0 auto; padding: 0; }
  
  /* left nav */
  #lf-fpe2-nav { padding: 24px 0; border-right: 1px solid var(--lf-border); background: var(--lf-sidebar-bg); position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
  .fpe2-nav-section { margin-bottom: 4px; }
  .fpe2-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 18px; cursor: pointer; font-size: .84rem; color: var(--lf-muted); border-left: 2px solid transparent; transition: all .15s; }
  .fpe2-nav-item:hover { background: rgba(42,37,64,.3); color: var(--lf-text); }
  .fpe2-nav-item.active { background: rgba(139,92,246,.08); color: var(--lf-accent-soft); border-left-color: var(--lf-accent); }
  .fpe2-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lf-border2); flex-shrink: 0; }
  .fpe2-nav-item.active .fpe2-nav-dot { background: var(--lf-accent); }
  .fpe2-nav-complete { width: 14px; height: 14px; border-radius: 50%; background: var(--lf-new-text); margin-left: auto; flex-shrink: 0; display: none; align-items: center; justify-content: center; }
  .fpe2-nav-complete.show { display: flex; }
  .fpe2-nav-complete svg { width: 8px; height: 8px; color: #fff; }
  .fpe2-nav-label { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lf-muted); padding: 10px 18px 5px; }
  
  /* right content */
  #lf-fpe2-content { padding: 32px 44px; overflow-y: auto; }
  .fpe2-section { margin-bottom: 40px; scroll-margin-top: 80px; }
  .fpe2-section-header { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--lf-border); }
  .fpe2-section-title { font-family: var(--lf-font-display); font-size: 1rem; color: var(--lf-bright); }
  .fpe2-section-hint { font-size: .78rem; color: var(--lf-muted); margin-top: 3px; }
  .fpe2-field-group { display: flex; flex-direction: column; gap: 18px; }
  .fpe2-field { display: flex; flex-direction: column; gap: 7px; }
  .fpe2-field label { font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-muted); display: flex; align-items: center; gap: 6px; }
  .fpe2-required-badge { font-size: .5rem; background: rgba(224,92,58,.15); color: var(--lf-ember); border: 1px solid rgba(224,92,58,.25); padding: 1px 5px; border-radius: 2px; }
  .fpe2-input { width: 100%; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-sm); padding: 10px 14px; font-family: var(--lf-font-body); font-size: .92rem; color: var(--lf-text); transition: border-color .2s; }
  .fpe2-input:focus { outline: none; border-color: var(--lf-accent); background: var(--lf-card); }
  .fpe2-textarea { width: 100%; min-height: 120px; resize: vertical; line-height: 1.7; }
  .fpe2-hint { font-size: .74rem; color: var(--lf-muted); font-style: italic; }
  .fpe2-stars { display: flex; gap: 4px; }
  .fpe2-star { width: 26px; height: 26px; border-radius: 3px; border: 1px solid var(--lf-border); background: var(--lf-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background .15s; }
  .fpe2-star.filled { background: rgba(201,168,76,.15); border-color: rgba(201,168,76,.35); }
  .fpe2-select { width: 100%; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-sm); padding: 10px 14px; font-family: var(--lf-font-body); font-size: .92rem; color: var(--lf-text); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6485' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
  .fpe2-select:focus { outline: none; border-color: var(--lf-accent); }
  /* resource slider in profile edit */
  .fpe2-resource-row { display: flex; align-items: center; gap: 12px; }
  .fpe2-resource-label { font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; width: 60px; flex-shrink: 0; }
  .fpe2-resource-track { flex: 1; height: 8px; background: var(--lf-border); border-radius: 4px; position: relative; }
  .fpe2-resource-fill { height: 100%; border-radius: 4px; transition: width .3s; }
  .fpe2-resource-val { font-family: var(--lf-font-ui); font-size: .7rem; color: var(--lf-text); width: 60px; text-align: right; flex-shrink: 0; }
  .fpe2-resource-input { width: 60px; background: var(--lf-card2); border: 1px solid var(--lf-border); border-radius: 3px; padding: 3px 6px; font-size: .82rem; color: var(--lf-text); text-align: center; }
  .fpe2-tags-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .fpe2-tag-chip { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.22); color: var(--lf-accent-soft); padding: 4px 10px; border-radius: 100px; font-size: .78rem; display: flex; align-items: center; gap: 5px; cursor: pointer; }
  .fpe2-tag-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: .7rem; line-height: 1; padding: 0; }
  .fpe2-tag-add { background: none; border: 1px dashed var(--lf-border2); color: var(--lf-muted); padding: 4px 10px; border-radius: 100px; font-size: .78rem; cursor: pointer; display: flex; align-items: center; gap: 4px; }
  .fpe2-tag-add:hover { border-color: var(--lf-accent); color: var(--lf-accent-soft); }
  .fpe2-avatar-upload { width: 100px; height: 100px; border-radius: 10px; border: 2px dashed var(--lf-border2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: border-color .2s; }
  .fpe2-avatar-upload:hover { border-color: var(--lf-accent); }
  .fpe2-avatar-upload svg { width: 22px; height: 22px; color: var(--lf-muted); }
  .fpe2-avatar-upload span { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); text-align: center; }
  
  /* save bar */
  #lf-fpe2-save-bar { position: sticky; bottom: 0; background: var(--lf-surface); border-top: 1px solid var(--lf-border); padding: 12px 44px; display: flex; align-items: center; justify-content: space-between; }
  .fpe2-save-info { font-size: .78rem; color: var(--lf-muted); }
  .fpe2-save-actions { display: flex; gap: 8px; }
  
  @media(max-width:900px){
    #lf-apb-layout { grid-template-columns: 1fr; }
    #lf-apb-sidebar { height: auto; }
    #lf-fpe2-layout { grid-template-columns: 1fr; }
    #lf-fpe2-nav { position: static; height: auto; }
    #lf-fpe2-content { padding: 24px 20px; }
  }
  
  /* Single-page profile mode section heading */
  .char-single-section-head {
    font-family: var(--lf-font-ui);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lf-gold);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lf-border);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .char-single-section-head::before {
    content: '';
    width: 3px;
    height: 12px;
    background: var(--lf-gold);
    border-radius: 2px;
    flex-shrink: 0;
  }
  
  /* Single-page mode: all char-tab-bodies visible and spaced */
  #lf-char-content.single-layout .char-tab-body {
    display: block !important;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--lf-border);
  }
  #lf-char-content.single-layout .char-tab-body:last-child {
    border-bottom: none;
  }
  
  /* ============================================================
     USER STATUS BAR  #lf-user-status-bar
     ============================================================ */
  #lf-user-status-bar {
    position: sticky;
    top: 60px;
    z-index: 820;
    background: var(--lf-surface);
    border-bottom: 1px solid var(--lf-border);
  }
  #lf-usb-inner {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 20px;
    cursor: pointer;
    transition: background .15s;
    gap: 14px;
  }
  #lf-usb-inner:hover { background: rgba(42,37,64,.25); }
  #lf-usb-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  #lf-usb-avatar {
    width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
    border: 1px solid var(--lf-border2); overflow: hidden;
  }
  #lf-usb-info { min-width: 0; }
  #lf-usb-name { font-family: var(--lf-font-ui); font-size: .76rem; font-weight: 700; color: var(--lf-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #lf-usb-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  #lf-usb-rank { font-family: var(--lf-font-ui); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(201,168,76,.1); color: var(--lf-gold); border: 1px solid rgba(201,168,76,.2); padding: 1px 6px; border-radius: 2px; }
  #lf-usb-realm, #lf-usb-pronouns, #lf-usb-posts { font-size: .72rem; color: var(--lf-muted); }
  #lf-usb-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
  #lf-usb-guest-badge { display: flex; align-items: center; gap: 6px; font-family: var(--lf-font-ui); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); padding: 7px 20px; }
  
  /* Character switcher modal */
  #lf-csm-mini-profile { background: var(--lf-surface); border-bottom: 1px solid var(--lf-border); }
  #lf-csm-banner { overflow: hidden; position: relative; }
  #lf-csm-profile-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
  #lf-csm-avatar { width: 48px; height: 48px; border-radius: 8px; border: 2px solid var(--lf-border2); flex-shrink: 0; margin-top: -24px; position: relative; }
  #lf-csm-name { font-family: var(--lf-font-ui); font-size: .84rem; font-weight: 700; color: var(--lf-bright); }
  #lf-csm-alias { font-size: .76rem; color: var(--lf-muted); font-style: italic; }
  #lf-csm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--lf-border); }
  .csm-stat { display: flex; justify-content: space-between; padding: 6px 20px; font-size: .78rem; border-bottom: 1px solid var(--lf-border); }
  .csm-stat:nth-child(odd) { border-right: 1px solid var(--lf-border); }
  .csm-stat span:first-child { color: var(--lf-muted); }
  .csm-stat span:last-child { color: var(--lf-text); font-family: var(--lf-font-ui); font-size: .72rem; }
  #lf-csm-divider { height: 1px; background: var(--lf-border); }
  #lf-csm-switcher { padding: 14px 20px 18px; }
  #lf-csm-switcher-label { font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 10px; }
  #lf-csm-char-list { display: flex; flex-direction: column; gap: 7px; }
  .csm-char-card { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--lf-border); background: var(--lf-surface); cursor: pointer; transition: all .15s; position: relative; }
  .csm-char-card:hover { border-color: rgba(139,92,246,.35); background: rgba(42,37,64,.3); }
  .csm-char-card.active { border-color: rgba(139,92,246,.4); background: rgba(139,92,246,.07); }
  .csm-char-avatar { width: 36px; height: 36px; border-radius: 5px; border: 1px solid var(--lf-border); flex-shrink: 0; }
  .csm-char-name { font-family: var(--lf-font-ui); font-size: .78rem; color: var(--lf-bright); }
  .csm-char-alias { font-size: .72rem; color: var(--lf-muted); font-style: italic; }
  .csm-char-rank { font-size: .68rem; color: var(--lf-muted); margin-top: 2px; }
  .csm-active-badge { position: absolute; top: 8px; right: 10px; font-family: var(--lf-font-ui); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(94,207,138,.12); color: var(--lf-new-text); border: 1px solid rgba(94,207,138,.25); padding: 2px 6px; border-radius: 2px; }
  
  /* ============================================================
     TRACKER SECTION on character profile
     ============================================================ */
  #lf-char-trackers { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 14px; margin-bottom: 12px; }
  
  /* ============================================================
     TRACKER ADMIN ROW in builder
     ============================================================ */
  .apb-tracker-preview { border-top: 1px solid var(--lf-border); padding-top: 8px; margin-top: 4px; }
  
  /* ============================================================
     SIDEBAR COLLAPSE TOGGLE  #lf-sidebar-toggle
     ============================================================ */
  #lf-forum-layout { position: relative; }
  
  #lf-sidebar-toggle {
    position: absolute; top: 14px; left: 240px; z-index: 10;
    width: 20px; height: 36px; background: var(--lf-surface);
    border: 1px solid var(--lf-border); border-left: none;
    border-radius: 0 4px 4px 0; cursor: pointer; color: var(--lf-muted);
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
  }
  #lf-sidebar-toggle:hover { background: var(--lf-card); color: var(--lf-bright); }
  /* sidebar collapse rules consolidated below */
  
  /* Admin sidebar items */
  .sidebar-admin-item { border-left: 2px solid transparent !important; }
  .sidebar-admin-item:hover { color: var(--lf-gold) !important; border-left-color: var(--lf-gold) !important; }
  
  /* ============================================================
     THEME / SETTINGS PANEL CLOSE — ensure always visible
     ============================================================ */
  #lf-theme-panel-header,
  #lf-settings-panel-header {
    min-height: 52px;
    padding: 0 18px;
    flex-shrink: 0;
  }
  #btn-close-theme,
  #btn-close-settings {
    min-width: 32px; min-height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--lf-card); border: 1px solid var(--lf-border);
    border-radius: 5px; color: var(--lf-muted); cursor: pointer;
    transition: all .15s;
  }
  #btn-close-theme:hover,
  #btn-close-settings:hover {
    background: var(--lf-border2); color: var(--lf-bright);
    border-color: var(--lf-border2);
  }
  
  /* ============================================================
     GUIDELINES MODAL — rich content layout
     ============================================================ */
  .guidelines-section { margin-bottom: 22px; }
  .guidelines-section h3 {
    font-family: var(--lf-font-ui); font-size: .76rem; font-weight: 700;
    color: var(--lf-gold); letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 10px; padding-bottom: 7px;
    border-bottom: 1px solid var(--lf-border);
    display: flex; align-items: center; gap: 8px;
  }
  .guidelines-section h3::before {
    content: ''; width: 3px; height: 12px; background: var(--lf-gold);
    border-radius: 2px; flex-shrink: 0;
  }
  .guidelines-rule {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; border-bottom: 1px solid rgba(42,37,64,.4);
    font-size: .9rem; line-height: 1.6; color: var(--lf-text);
  }
  .guidelines-rule:last-child { border-bottom: none; }
  .guidelines-rule-num {
    font-family: var(--lf-font-ui); font-size: .64rem; font-weight: 700;
    color: var(--lf-accent-soft); min-width: 22px; text-align: center;
    padding-top: 2px;
  }
  
  /* Staff modal */
  .staff-card {
    display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--lf-border);
  }
  .staff-card:last-child { border-bottom: none; }
  .staff-avatar { width: 38px; height: 38px; border-radius: 6px; flex-shrink: 0; }
  .staff-info { flex: 1; }
  .staff-name { font-family: var(--lf-font-ui); font-size: .8rem; color: var(--lf-bright); }
  .staff-role { font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; }
  .staff-role.admin { color: var(--lf-gold); }
  .staff-role.mod   { color: var(--lf-accent-soft); }
  .staff-desc { font-size: .76rem; color: var(--lf-muted); margin-top: 2px; }
  
  /* Members modal */
  .member-list-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--lf-border); cursor: pointer; transition: background .12s;
  }
  .member-list-row:hover { background: rgba(42,37,64,.2); margin: 0 -20px; padding: 8px 20px; }
  .member-list-row:last-child { border-bottom: none; }
  .member-list-avatar { width: 32px; height: 32px; border-radius: 5px; flex-shrink: 0; }
  .member-list-name { font-family: var(--lf-font-ui); font-size: .78rem; color: var(--lf-bright); }
  .member-list-char { font-size: .74rem; color: var(--lf-muted); font-style: italic; }
  .member-list-meta { margin-left: auto; font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-muted); }
  
  /* Shop modal items */
  .shop-modal-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--lf-border);
  }
  .shop-modal-item:last-child { border-bottom: none; }
  .shop-modal-icon { width: 42px; height: 42px; border-radius: 7px; background: var(--lf-surface); border: 1px solid var(--lf-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .shop-modal-icon svg { width: 18px; height: 18px; color: var(--lf-muted); }
  .shop-modal-info { flex: 1; }
  .shop-modal-name { font-family: var(--lf-font-ui); font-size: .8rem; color: var(--lf-bright); margin-bottom: 2px; }
  .shop-modal-desc { font-size: .76rem; color: var(--lf-muted); }
  .shop-modal-price { font-family: var(--lf-font-ui); font-size: .7rem; color: var(--lf-gold); display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  
  /* Wiki modal */
  .wiki-entry { padding: 10px 0; border-bottom: 1px solid var(--lf-border); cursor: pointer; }
  .wiki-entry:hover { background: rgba(42,37,64,.15); margin: 0 -20px; padding: 10px 20px; }
  .wiki-entry:last-child { border-bottom: none; }
  .wiki-entry-title { font-family: var(--lf-font-ui); font-size: .82rem; color: var(--lf-bright); margin-bottom: 3px; }
  .wiki-entry-excerpt { font-size: .8rem; color: var(--lf-muted); line-height: 1.4; }
  .wiki-entry-cat { font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lf-accent-soft); margin-top: 3px; }
  
  /* ============================================================
     FORUM SIDEBAR COLLAPSE — nav only, forum main stays full width
     ============================================================ */
  /* Collapsed state: grid first column → 0 (minmax allows this) */
  #lf-forum-layout.sidebar-collapsed { grid-template-columns: 0 1fr; }
  /* Sidebar itself: no overflow, no padding, invisible */
  #lf-forum-layout.sidebar-collapsed #lf-forum-sidebar {
    overflow: hidden; padding: 0; border-right: none;
    pointer-events: none;
  }
  /* Toggle button moves flush left */
  #lf-forum-layout.sidebar-collapsed #lf-sidebar-toggle { left: 0; }
  /* Arrow flips */
  #lf-forum-layout.sidebar-collapsed #lf-sidebar-toggle-icon { transform: rotate(180deg); }
  /* Forum main takes full width — no grid-column span needed since column is 0 */
  
  /* ============================================================
     THREAD SIDEBAR COLLAPSE
     ============================================================ */
  #lf-thread-sidebar-toggle {
    position: absolute; top: 14px; right: 255px; z-index: 10;
    width: 20px; height: 36px; background: var(--lf-surface);
    border: 1px solid var(--lf-border); border-right: none;
    border-radius: 4px 0 0 4px; cursor: pointer; color: var(--lf-muted);
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
  }
  #lf-thread-sidebar-toggle:hover { background: var(--lf-card); color: var(--lf-bright); }
  
  
  
  
  
  /* ============================================================
     CHARACTERS LIST MODAL
     ============================================================ */
  .char-list-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 0;
    border-bottom: 1px solid var(--lf-border); cursor: pointer; transition: background .12s;
  }
  .char-list-row:hover { background: rgba(42,37,64,.2); margin: 0 -20px; padding: 9px 20px; }
  .char-list-row:last-child { border-bottom: none; }
  .char-list-avatar { width: 44px; height: 44px; border-radius: 7px; flex-shrink: 0; }
  .char-list-name { font-family: var(--lf-font-ui); font-size: .82rem; color: var(--lf-bright); }
  .char-list-alias { font-size: .76rem; color: var(--lf-muted); font-style: italic; }
  .char-list-meta { font-size: .72rem; color: var(--lf-muted); margin-top: 2px; }
  
  /* ============================================================
     USB INNER — ensure not cut off by nav
     ============================================================ */
  #lf-user-status-bar {
    /* move it below nav so it's never partially hidden */
    top: 60px;
    z-index: 820;
  }
  /* forum page has USB — shift content down */
  #lf-forum-page.has-usb { padding-top: 60px; }
  #lf-forum-page.has-usb #lf-user-status-bar { top: 0; position: relative; }
  
  /* ============================================================
     NEWS PANEL display in forum
     ============================================================ */
  #lf-forum-news-panel {
    background: rgba(139,92,246,.05); border: 1px solid rgba(139,92,246,.15);
    border-radius: 6px; padding: 12px 16px; margin-bottom: 14px;
  }
  .news-panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .news-panel-title { font-family: var(--lf-font-ui); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lf-accent-soft); }
  .news-item { padding: 7px 0; border-bottom: 1px solid rgba(42,37,64,.4); display: flex; gap: 10px; align-items: flex-start; }
  .news-item:last-child { border-bottom: none; padding-bottom: 0; }
  .news-pin { color: var(--lf-gold); font-size: .7rem; flex-shrink: 0; padding-top: 2px; }
  .news-body { flex: 1; }
  .news-item-title { font-family: var(--lf-font-ui); font-size: .76rem; color: var(--lf-bright); margin-bottom: 2px; }
  .news-item-text { font-size: .78rem; color: var(--lf-muted); line-height: 1.4; }
  .news-item-date { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-muted); flex-shrink: 0; }
  
  /* profile content mode classes */
  .lf-char-content-mode-card { }
  .lf-char-content-mode-magazine { }
  .lf-char-content-mode-minimal { }
  
  /* ============================================================
     BROWSE REALMS MODAL rows
     ============================================================ */
  .browse-realm-row {
    display: flex; align-items: center; gap: 14px; padding: 10px 0;
    border-bottom: 1px solid var(--lf-border); cursor: pointer; transition: background .12s;
  }
  .browse-realm-row:hover { background: rgba(42,37,64,.2); margin: 0 -20px; padding: 10px 20px; }
  .browse-realm-row:last-child { border-bottom: none; }
  .browse-thumb { width: 58px; height: 42px; border-radius: 5px; flex-shrink: 0; background-size: cover !important; background-position: center !important; }
  .browse-info { flex: 1; min-width: 0; }
  .browse-realm-name { font-family: var(--lf-font-ui); font-size: .82rem; color: var(--lf-bright); margin-bottom: 2px; }
  .browse-realm-meta { font-size: .72rem; color: var(--lf-muted); margin-bottom: 2px; }
  .browse-realm-desc { font-size: .78rem; color: var(--lf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  
  /* ============================================================
     WIKI MODAL entries
     ============================================================ */
  .wiki-entry { border-bottom: 1px solid var(--lf-border); }
  .wiki-entry:last-child { border-bottom: none; }
  .wiki-entry-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 0; cursor: pointer; transition: background .12s; }
  .wiki-entry-header:hover { background: rgba(42,37,64,.15); margin: 0 -20px; padding: 10px 20px; }
  .wiki-chevron { transition: transform .2s; flex-shrink: 0; margin-top: 2px; color: var(--lf-muted); }
  
  /* ============================================================
     RECRUITMENT ADMIN page form helpers
     ============================================================ */
  .arb-panel { }
  .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  
  /* ============================================================
     WIKI ENTRY full-page
     ============================================================ */
  #page-wiki-entry { padding-top: 60px; min-height: 100vh; background: var(--lf-bg); }
  
  /* ============================================================
     FORUM THREAD ROW LAYOUT MODES
     Controlled by profileAdminConfig.threadBuilder.design.forumLayout
     ============================================================ */
  
  /* Default: standard JCINK-style list rows */
  .forum-layout-single .lf-category-body { display: block; }
  
  /* 2-column subforum grid */
  .forum-layout-2col .lf-category-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--lf-border);
  }
  .forum-layout-2col .lf-subforum-row { background: var(--lf-deep); }
  
  /* 3-column subforum grid */
  .forum-layout-3col .lf-category-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--lf-border);
  }
  .forum-layout-3col .lf-subforum-row {
    background: var(--lf-deep);
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 4px;
  }
  .forum-layout-3col .lf-subforum-stat,
  .forum-layout-3col .lf-subforum-lastpost { display: none; }
  
  /* Flex/card layout */
  .forum-layout-flex .lf-category-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: transparent;
  }
  .forum-layout-flex .lf-subforum-row {
    flex: 1; min-width: 220px; max-width: calc(33% - 8px);
    border: 1px solid var(--lf-border);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--lf-card);
  }
  .forum-layout-flex .lf-subforum-stat { display: none; }
  .forum-layout-flex .lf-subforum-lastpost { border-top: 1px solid var(--lf-border); padding-top: 8px; }
  .forum-layout-flex #lf-forum-col-headers { display: none; }
  
  /* Profile display modes on character page */
  .lf-char-content-mode-sidebar #lf-char-profile-layout { grid-template-columns: 200px 1fr; }
  .lf-char-content-mode-card #lf-char-card { display: none; }
  .lf-char-content-mode-magazine #lf-char-card { display: none; }
  .lf-char-content-mode-minimal #lf-char-card { display: none; }
  .lf-char-content-mode-minimal #lf-char-profile-layout { grid-template-columns: 1fr; max-width: 680px; }
  
  /* ============================================================
     PROFILE BUILDER — Mode Cards (replaces apb-layout-opt grid)
     ============================================================ */
  #apb-display-modes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .apb-mode-card {
    background: var(--lf-surface);
    border: 2px solid var(--lf-border);
    border-radius: 7px;
    padding: 14px 12px;
    cursor: pointer;
    transition: all .18s;
    display: flex; flex-direction: column; gap: 4px;
  }
  .apb-mode-card:hover { border-color: rgba(139,92,246,.4); background: rgba(42,37,64,.3); }
  .apb-mode-card.active { border-color: var(--lf-accent); background: rgba(139,92,246,.1); }
  .apb-mode-icon { font-size: 1.2rem; line-height: 1; }
  .apb-mode-label { font-family: var(--lf-font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-bright); }
  .apb-mode-card.active .apb-mode-label { color: var(--lf-accent-soft); }
  .apb-mode-desc { font-size: .72rem; color: var(--lf-muted); line-height: 1.3; }
  
  /* ============================================================
     ADMIN SHOP / POST DESIGN — page panels
     ============================================================ */
  .ash-panel { }
  .apd-panel { }
  .apd-nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 5px; cursor: pointer; font-size: .84rem; color: var(--lf-muted); transition: all .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apd-nav-item:hover { background: rgba(42,37,64,.4); color: var(--lf-text); }
  .apd-nav-item.active { background: rgba(139,92,246,.1); color: var(--lf-accent-soft); }
  
  /* Shop item admin row */
  .ash-item-row { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 8px; padding: 14px; }
  .ash-item-row .ash-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .ash-item-icon-input { width: 44px; height: 44px; background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: 7px; text-align: center; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
  
  /* Realm shop popup items */
  .realm-shop-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--lf-border);
  }
  .realm-shop-item:last-child { border-bottom: none; }
  .realm-shop-item-icon { width: 48px; height: 48px; border-radius: 8px; background: var(--lf-surface); border: 1px solid var(--lf-border); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
  .realm-shop-item-info { flex: 1; }
  .realm-shop-item-name { font-family: var(--lf-font-ui); font-size: .82rem; font-weight: 700; color: var(--lf-bright); }
  .realm-shop-item-desc { font-size: .78rem; color: var(--lf-muted); margin-top: 2px; line-height: 1.4; }
  .realm-shop-item-price { display: flex; align-items: center; gap: 5px; font-family: var(--lf-font-ui); font-size: .78rem; color: var(--lf-gold); flex-shrink: 0; }
  
  /* Post design preview */
  .apd-post-preview { border: 1px solid var(--lf-border); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
  
  /* Add category input modal */
  .form-block { margin-bottom: 16px; }
  
  /* Post reactions */
  .lf-post-reactions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lf-border); }
  .lf-reaction { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--lf-border); background: var(--lf-surface); cursor: pointer; font-size: .78rem; color: var(--lf-muted); transition: all .15s; }
  .lf-reaction:hover { border-color: var(--lf-accent); color: var(--lf-accent-soft); }
  .lf-reaction.active { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.35); color: var(--lf-accent-soft); }
  .lf-reaction .lf-reaction-emoji { font-size: .9rem; }
  .lf-reaction .lf-reaction-count { font-family: var(--lf-font-ui); font-size: .62rem; font-weight: 700; }
  .lf-reaction-add { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px dashed var(--lf-border2); cursor: pointer; font-size: .9rem; color: var(--lf-muted); transition: all .15s; }
  .lf-reaction-add:hover { border-color: var(--lf-accent); color: var(--lf-accent-soft); background: rgba(139,92,246,.08); }
  
  /* Category add modal */
  .modal-input-group { margin-bottom: 12px; }
  
  /* ============================================================
     FORUM — Category + Thread delete buttons
     ============================================================ */
  .lf-cat-stats { display: flex; align-items: center; gap: 10px; }
  .btn-del-cat {
    background: none; border: none; color: var(--lf-muted); cursor: pointer;
    padding: 3px 8px; border-radius: 4px; font-family: var(--lf-font-ui);
    font-size: .6rem; letter-spacing: .08em; opacity: .4; transition: all .15s;
    text-transform: uppercase;
  }
  .btn-del-cat:hover { background: rgba(224,92,58,.12); color: #e05c3a; opacity: 1; }
  
  /* ============================================================
     POST BUILDER — page top spacing fix + preview nav
     ============================================================ */
  #page-admin-post-design #lf-apb-sidebar { padding-top: 24px; }
  #apd-nav-preview { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 5px; cursor: pointer; font-size: .84rem; color: var(--lf-muted); transition: all .15s; white-space: nowrap; }
  #apd-nav-preview:hover { background: rgba(42,37,64,.4); color: var(--lf-text); }
  #apd-nav-preview.active { background: rgba(139,92,246,.1); color: var(--lf-accent-soft); }
  #apd-nav-preview svg { width: 14px; height: 14px; flex-shrink: 0; }
  
  /* Post Builder preview container */
  #apd-preview-container { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: 8px; padding: 20px; }
  
  /* ============================================================
     FORUM LAYOUT — category body display reset for clean class switching
     ============================================================ */
  /* Single (default): no class needed on body, just inherit */
  #lf-forum-main:not([class*="forum-layout"]) .lf-category-body,
  #lf-forum-main.forum-layout-single .lf-category-body { display: block !important; }
  
  /* ============================================================
     PROFILE DISPLAY MODES — additional CSS support
     ============================================================ */
  /* Dossier: compact 2-column */
  #page-character.profile-mode-dossier #lf-char-profile-layout {
    grid-template-columns: 240px 1fr;
  }
  #page-character.profile-mode-dossier #lf-char-content {
    padding: 24px;
  }
  
  /* Portrait: large banner, info below */
  #page-character.profile-mode-portrait #lf-char-banner {
    height: 360px;
  }
  #page-character.profile-mode-portrait #lf-char-profile-layout {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
  }
  #page-character.profile-mode-portrait #lf-char-card {
    display: none !important;
  }
  
  /* Scroll: parchment feel */
  #page-character.profile-mode-scroll #lf-char-profile-layout {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin: 0 auto;
  }
  #page-character.profile-mode-scroll #lf-char-card { display: none !important; }
  #page-character.profile-mode-scroll .char-tab-body {
    border-bottom: 1px solid rgba(201,168,76,.15);
    padding-bottom: 28px;
    margin-bottom: 28px;
  }
  
  /* Magazine: banner hero at top */
  #page-character.profile-mode-magazine #lf-char-card { display: none !important; }
  #page-character.profile-mode-magazine #lf-char-profile-layout { grid-template-columns: 1fr; }
  #page-character.profile-mode-magazine #lf-char-banner { height: 320px; }
  
  /* ============================================================
     ADMIN PAGES — universal top padding fix
     ============================================================ */
  #page-admin-threads,
  #page-admin-shop,
  #page-admin-post-design,
  #page-admin-recruitment,
  #page-admin-profile { padding-top: 60px !important; min-height: 100vh; background: var(--lf-bg); }
  
  /* ============================================================
     PROFILE EDITOR — Inventory grid
     ============================================================ */
  .fpe2-inv-slot {
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid var(--lf-border);
    background: var(--lf-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    overflow: hidden;
    position: relative;
    padding: 6px 4px 4px;
    gap: 3px;
  }
  .fpe2-inv-slot:hover { border-color: var(--lf-accent); background: rgba(42,37,64,.3); }
  .fpe2-inv-slot.filled { border-color: var(--lf-border2); background: var(--lf-card); }
  .fpe2-inv-icon { font-size: 1.3rem; line-height: 1; }
  .fpe2-inv-label { font-size: .58rem; color: var(--lf-text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; padding: 0 2px; }
  .fpe2-inv-cat { position: absolute; top: 2px; right: 2px; font-family: var(--lf-font-ui); font-size: .44rem; letter-spacing: .06em; text-transform: uppercase; background: rgba(139,92,246,.15); color: var(--lf-accent-soft); padding: 1px 3px; border-radius: 2px; }
  .fpe2-inv-rarity { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
  .rarity-uncommon { background: #5ecf8a; }
  .rarity-rare      { background: #60aef0; }
  .rarity-epic      { background: #a78bfa; }
  .rarity-legendary { background: linear-gradient(90deg,#c9a84c,#f0d060); }
  
  /* Category filter pills in FPE */
  .fpe2-cat-filter {
    background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 100px;
    padding: 4px 12px; font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--lf-muted); cursor: pointer; transition: all .15s;
  }
  .fpe2-cat-filter:hover { border-color: var(--lf-accent); color: var(--lf-accent-soft); }
  .fpe2-cat-filter.active { background: rgba(139,92,246,.12); border-color: var(--lf-accent); color: var(--lf-accent-soft); }
  
  /* ============================================================
     TOPIC EDITOR — page
     ============================================================ */
  #page-topic-editor .form-block-title { font-family: var(--lf-font-ui); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 7px; }
  #topic-edit-content { font-family: var(--lf-font-body); font-size: .92rem; line-height: 1.8; color: var(--lf-text); }
  
  /* ============================================================
     FORUM STRUCTURE — CW badges on subforum rows
     ============================================================ */
  .lf-subforum-cw-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
  .lf-cw-badge {
    font-family: var(--lf-font-ui); font-size: .52rem; letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 2px;
    background: rgba(224,92,58,.1); border: 1px solid rgba(224,92,58,.2); color: var(--lf-ember);
  }
  .lf-cw-badge.cw-romance  { background: rgba(240,128,64,.1); border-color: rgba(240,128,64,.2); color: #f08040; }
  .lf-cw-badge.cw-violence { background: rgba(224,92,58,.1); border-color: rgba(224,92,58,.2); color: var(--lf-ember); }
  
  /* ============================================================
     BUILDER SIDEBAR — fix top cutoff
     ============================================================ */
  /* All admin builder pages: ensure sidebar header never gets clipped */
  
  
  /* ============================================================
     CHARACTER APPROVAL
     ============================================================ */
  .char-approval-approved {
    background: rgba(94,207,138,.1); border: 1px solid rgba(94,207,138,.25);
    border-radius: 5px; padding: 7px 10px; margin-bottom: 8px;
  }
  .char-approval-pending {
    background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.2);
    border-radius: 5px; padding: 7px 10px; margin-bottom: 8px;
  }
  
  /* Forum Order button */
  .btn-xs { padding: 3px 8px; font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; cursor: pointer; border: 1px solid var(--lf-border); background: var(--lf-surface); color: var(--lf-muted); transition: all .15s; }
  .btn-xs:hover { border-color: var(--lf-accent); color: var(--lf-accent-soft); }
  
  /* ============================================================
     PROFILE EDITOR — Admin / Mod Section
     ============================================================ */
  .fpe2-admin-section {
    border-left: 3px solid var(--lf-gold);
    padding-left: 20px;
    margin-left: 4px;
  }
  .fpe2-admin-section .fpe2-section-title {
    color: var(--lf-gold) !important;
  }
  .fpe2-admin-section .fpe2-section-header {
    border-bottom-color: rgba(201,168,76,.2);
  }
  /* Admin nav separator label */
  #lf-fpe2-nav .fpe2-nav-label[style*="gold"] {
    color: var(--lf-gold);
    border-top: 1px solid var(--lf-border);
    padding-top: 12px;
    margin-top: 8px;
  }
  
  /* ============================================================
     USER STATUS BAR — Role badge
     ============================================================ */
  #lf-usb-role-badge {
    font-family: var(--lf-font-ui);
    font-size: .52rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: all .15s;
  }
  #lf-usb-role-badge:hover { opacity: .8; }
  
  /* ============================================================
     PROFILE EDITOR — Admin section visibility
     Regular members never see this section at all.
     Rendered by JS only when isStaffMember() === true.
     ============================================================ */
  .fpe2-admin-section {
    border-left: 3px solid var(--lf-gold);
    padding-left: 20px;
    margin-left: 4px;
    position: relative;
  }
  /* Staff-only watermark */
  .fpe2-admin-section::before {
    content: 'STAFF ONLY';
    position: absolute;
    top: 14px; right: 14px;
    font-family: var(--lf-font-ui);
    font-size: .48rem;
    letter-spacing: .2em;
    color: rgba(201,168,76,.25);
    pointer-events: none;
  }
  .fpe2-admin-section .fpe2-section-title { color: var(--lf-gold) !important; }
  .fpe2-admin-section .fpe2-section-header { border-bottom-color: rgba(201,168,76,.2); }
  
  /* Admin clock widget in profile editor */
  #fpe2-sec-adminclocks .fpe2-field { padding: 12px; background: rgba(201,168,76,.04); border-radius: 6px; border: 1px solid rgba(201,168,76,.1); }
  
  /* ============================================================
     USER PROFILE PAGE — polished
     ============================================================ */
  #page-user-profile { padding-top: 60px; min-height: 100vh; background: var(--lf-bg); }
  
  /* Banner */
  #up-banner {
    height: 200px;
    background: linear-gradient(135deg, var(--lf-surface) 0%, var(--lf-deep) 100%);
    position: relative; overflow: hidden;
  }
  #up-banner-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
  #up-avatar-wrap {
    position: absolute; bottom: -46px; left: 44px; z-index: 2;
  }
  #up-avatar {
    width: 92px; height: 92px; border-radius: 50%;
    border: 3px solid var(--lf-bg);
    background: var(--lf-card);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
  }
  #up-avatar img { width: 100%; height: 100%; object-fit: cover; }
  #up-edit-banner-btn { position: absolute; top: 14px; right: 14px; }
  
  /* Info bar */
  #up-info-bar {
    padding: 62px 44px 20px;
    display: flex; align-items: flex-end;
    justify-content: space-between; gap: 16px;
    border-bottom: 1px solid var(--lf-border);
  }
  .up-info-left { flex: 1; min-width: 0; }
  .up-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
  #up-writer-name {
    font-family: var(--lf-font-display); font-size: 1.5rem;
    color: var(--lf-bright); letter-spacing: .02em;
  }
  #up-bio { font-size: .86rem; color: var(--lf-muted); line-height: 1.6; max-width: 520px; }
  .up-badge {
    font-family: var(--lf-font-ui); font-size: .54rem; letter-spacing: .12em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
    border: 1px solid var(--lf-border); color: var(--lf-muted);
  }
  .up-info-actions { display: flex; gap: 8px; flex-shrink: 0; }
  
  /* Main grid */
  #up-main {
    display: grid; grid-template-columns: 260px 1fr;
    min-height: calc(100vh - 360px);
  }
  
  /* Sidebar */
  #up-sidebar {
    padding: 28px 22px;
    border-right: 1px solid var(--lf-border);
    display: flex; flex-direction: column; gap: 0;
    background: var(--lf-deep);
  }
  .up-sidebar-section { margin-bottom: 26px; }
  .up-sidebar-section:last-child { margin-bottom: 0; }
  .up-sidebar-label {
    font-family: var(--lf-font-ui); font-size: .56rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--lf-muted);
    margin-bottom: 10px; padding-bottom: 7px;
    border-bottom: 1px solid var(--lf-border);
    display: flex; align-items: center; gap: 8px;
  }
  .up-sidebar-label::after { content: ''; flex: 1; height: 1px; background: transparent; }
  .up-stat-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .78rem; color: var(--lf-muted); padding: 5px 0;
    border-bottom: 1px solid rgba(42,37,64,.3);
  }
  .up-stat-row:last-child { border-bottom: none; }
  .up-stat-row span:last-child {
    color: var(--lf-bright); font-family: var(--lf-font-ui);
    font-size: .72rem; font-weight: 500;
  }
  
  /* Content area */
  #up-content { padding: 28px 36px; min-width: 0; }
  
  /* Tabs */
  #up-tabs {
    display: flex; gap: 0;
    border-bottom: 2px solid var(--lf-border);
    margin-bottom: 24px;
  }
  .up-tab {
    background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: 8px 20px; font-family: var(--lf-font-ui); font-size: .66rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted);
    cursor: pointer; transition: all .14s; flex-shrink: 0;
  }
  .up-tab:hover { color: var(--lf-text); }
  .up-tab.active { color: var(--lf-bright); border-bottom-color: var(--lf-accent); }
  
  /* Characters grid */
  #up-chars-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
  }
  
  /* Subscriptions */
  .up-sub-section { margin-bottom: 28px; }
  .up-sub-head {
    font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--lf-gold);
    margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
  }
  .up-sub-line { flex: 1; height: 1px; background: var(--lf-border); display: block; }
  
  /* Tracker polish */
  .lf-tracker-bar {
    background: var(--lf-card); border: 1px solid var(--lf-border);
    border-radius: 6px; padding: 10px 14px; margin-bottom: 10px;
  }
  .lf-tracker-label {
    font-family: var(--lf-font-ui); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--lf-muted); margin-bottom: 6px;
  }
  .lf-tracker-bar-track {
    height: 7px; background: var(--lf-border); border-radius: 4px; overflow: hidden;
    position: relative;
  }
  .lf-tracker-bar-fill {
    height: 100%; border-radius: 4px; transition: width .4s ease;
  }
  .lf-tracker-checkbox-row {
    display: flex; flex-wrap: wrap; gap: 5px;
  }
  .lf-tracker-box {
    width: 18px; height: 18px; border: 1.5px solid var(--lf-border);
    border-radius: 3px; cursor: pointer; transition: all .12s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .lf-tracker-box.filled { background: var(--lf-accent); border-color: var(--lf-accent); }
  .lf-tracker-box.filled::after { content: '✓'; font-size: .56rem; color: #fff; font-weight: 700; }
  
  /* Responsive */
  @media (max-width: 900px) {
    #up-main { grid-template-columns: 1fr; }
    #up-sidebar { border-right: none; border-bottom: 1px solid var(--lf-border); }
    #up-info-bar { padding: 62px 22px 20px; }
    #up-content { padding: 20px 22px; }
  }
  
  /* ============================================================
     HUB — Mature filter + 18+ badge
     ============================================================ */
  #lf-hub-filters { margin-bottom: 8px; }
  #lf-mature-filter .genre-pill {
    font-size: .56rem; padding: 4px 10px;
    background: none; border: 1px solid var(--lf-border);
    color: var(--lf-muted); cursor: pointer; border-radius: 100px;
    transition: all .15s; font-family: var(--lf-font-ui); letter-spacing: .08em; text-transform: uppercase;
  }
  #lf-mature-filter .genre-pill.active { background: rgba(139,92,246,.12); border-color: var(--lf-accent); color: var(--lf-accent-soft); }
  #lf-mature-filter .genre-pill#mc-adult.active { background: rgba(224,92,58,.12); border-color: rgba(224,92,58,.3); color: var(--lf-ember); }
  
  /* ============================================================
     NAV — Clean state
     ============================================================ */
  #lf-nav-links { display: none !important; }
  
  /* ============================================================
     JCINK FORUM THREAD LIST VIEW
     ============================================================ */
  #lf-forum-view-header {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border-bottom: 1px solid var(--lf-border);
    background: var(--lf-surface);
  }
  #lf-forum-view-title { flex: 1; }
  #lf-forum-view-col-headers {
    display: grid; grid-template-columns: 1fr 60px 60px 200px;
    padding: 5px 14px; gap: 0; background: var(--lf-surface);
    border-bottom: 1px solid var(--lf-border);
  }
  #lf-forum-view-col-headers .forum-col-header { font-family: var(--lf-font-ui); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lf-muted); padding: 5px 0; }
  
  /* Thread rows */
  .lf-thread-row {
    display: grid; grid-template-columns: 1fr 60px 60px 200px;
    align-items: center; padding: 10px 14px;
    border-bottom: 1px solid var(--lf-border);
    cursor: pointer; transition: background .12s;
  }
  .lf-thread-row:hover { background: rgba(42,37,64,.18); }
  .lf-thread-row:last-child { border-bottom: none; }
  .lf-thread-row-main { min-width: 0; }
  .lf-thread-row-title { font-family: var(--lf-font-ui); font-size: .84rem; font-weight: 600; color: var(--lf-bright); }
  .lf-thread-row-stat { font-family: var(--lf-font-ui); font-size: .72rem; color: var(--lf-muted); text-align: center; }
  .lf-thread-row-lastpost { font-size: .74rem; min-width: 0; }
  
  /* ============================================================
     ADMIN SIDEBAR — always full height, save button always visible
     ============================================================ */
  
  
  /* ============================================================
     NEW THREAD PAGE — breadcrumb improvements
     ============================================================ */
  #lf-nav-breadcrumb a {
    cursor: pointer !important;
    color: var(--lf-muted);
    text-decoration: none;
    transition: color .12s;
  }
  #lf-nav-breadcrumb a:hover { color: var(--lf-bright); }
  #lf-nav-breadcrumb #bc-thread,
  #lf-nav-breadcrumb #bc-forum { color: var(--lf-text); }
  #lf-nav-breadcrumb .bc-current { color: var(--lf-text); }
  
  /* ============================================================
     ADMIN BUILDER SIDEBARS — definitive fix
     All builder pages: header visible, nav scrolls, buttons pinned
     ============================================================ */
  
  /* Override the original sidebar rule fully */
  #lf-apb-sidebar {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 60px) !important;
    position: sticky !important;
    top: 60px !important;
  }
  
  #lf-apb-sidebar > #lf-apb-sidebar-header {
    flex-shrink: 0 !important;
    padding: 22px 18px 14px !important;
    border-bottom: 1px solid var(--lf-border);
  }
  
  #lf-apb-sidebar > .apb-section-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
  }
  
  /* Bottom save/back button area — always sticks to bottom */
  .apb-sidebar-actions {
    flex-shrink: 0 !important;
    padding: 14px 10px 20px !important;
    border-top: 1px solid var(--lf-border) !important;
    background: var(--lf-sidebar-bg) !important;
    margin-top: 0 !important;
  }
  
  /* Main content area */
  #lf-apb-main {
    overflow-y: auto !important;
    max-height: calc(100vh - 60px) !important;
  }
  
  /* ============================================================
     POST HISTORY — turn order pulse animation
     ============================================================ */
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.3); }
  }
  
  /* Subforum delete button reveals on row hover */
  .lf-subforum-row .sub-del-btn { opacity: 0 !important; }
  .lf-subforum-row:hover .sub-del-btn { opacity: 1 !important; }
  
  /* Thread row delete button reveals on row hover */
  .lf-thread-row .thread-del-btn { opacity: 0; }
  .lf-thread-row:hover .thread-del-btn { opacity: 1; }
  
  /* Breadcrumb links always clickable */
  #lf-nav-breadcrumb a,
  #bc-realm, #bc-forum, #bc-thread {
    cursor: pointer !important;
    text-decoration: none !important;
    transition: color .12s !important;
  }
  #bc-realm:hover { color: var(--lf-bright) !important; }
  
  /* ============================================================
     THREAD PAGE — top spacing and banner
     ============================================================ */
  #page-thread { padding-top: 60px !important; }
  
  
  /* Thread banner strip */
  #lf-thread-banner-wrap { overflow: hidden; }
  #lf-thread-banner { transition: height .2s; }
  
  /* Give the posts area breathing room from the header */
  
  
  /* Hide the Add Category dashed button when inside a forum/subforum view */
  #lf-forum-main.in-forum-view .lf-add-category-btn { display: none !important; }
  .lf-child-board {
    cursor: pointer !important;
    transition: background .12s, color .12s;
  }
  .lf-child-board:hover {
    background: rgba(139,92,246,.25) !important;
    color: var(--lf-bright) !important;
  }
  
  /* ============================================================
     THEME PANEL — polished layout
     ============================================================ */
  #lf-theme-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #lf-theme-panel-header {
    flex-shrink: 0;
  }
  .theme-tabs {
    flex-shrink: 0;
  }
  /* Each panel body fills and scrolls */
  .theme-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 16px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--lf-border) transparent;
  }
  /* Search bar stays pinned at top of ID ref tab */
  #theme-body-ids {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #theme-id-search {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--lf-deep);
    margin-bottom: 10px;
  }
  #theme-body-ids-list {
    flex: 1;
    overflow-y: auto;
  }
  
  /* ============================================================
     SITE POLISH — global refinements
     ============================================================ */
  
  /* Smoother hover transitions on all interactive elements */
  a, button, .btn, .sidebar-nav-item, .apb-nav-item, .lf-subforum-row,
  .lf-thread-row, .lf-post-card, .inv-slot, .lf-child-board {
    transition: all .14s ease;
  }
  
  /* Better focus rings */
  input:focus, textarea:focus, select:focus {
    border-color: var(--lf-accent) !important;
    box-shadow: 0 0 0 2px rgba(139,92,246,.15);
  }
  
  /* Scrollbar polish everywhere */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,.25) transparent;
  }
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(139,92,246,.3); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,.5); }
  
  /* Category headers — subtle glow on hover */
  .lf-category-header:hover {
    background: rgba(139,92,246,.04);
  }
  .lf-category-header:hover .lf-cat-name {
    color: var(--lf-bright);
  }
  
  /* Forum rows — crisper hover */
  .lf-subforum-row:hover {
    background: rgba(139,92,246,.06);
  }
  .lf-subforum-row:hover .lf-subforum-name {
    color: var(--lf-bright);
  }
  
  /* Post cards — subtle lift */
  .lf-post-card {
    transition: box-shadow .15s;
  }
  .lf-post-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.22);
  }
  
  /* Breadcrumb — cleaner separator */
  .bc-sep {
    color: var(--lf-border);
    margin: 0 5px;
    font-size: .7rem;
  }
  
  /* Buttons — stronger accent */
  .btn-accent {
    background: var(--lf-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: .04em;
  }
  .btn-accent:hover {
    background: color-mix(in srgb, var(--lf-accent) 85%, white);
    box-shadow: 0 2px 10px rgba(139,92,246,.35);
  }
  
  /* Modal refinements */
  .modal {
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
  }
  .modal-header {
    border-radius: 10px 10px 0 0;
  }
  
  /* Toast notification */
  #lf-copy-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-left: 3px solid var(--lf-accent);
    padding: 9px 20px;
    border-radius: 6px;
    font-family: var(--lf-font-ui);
    font-size: .76rem;
    color: var(--lf-bright);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    white-space: nowrap;
  }
  #lf-copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  
  /* Forum view header — cleaner */
  #lf-forum-view-header {
    background: var(--lf-surface);
    border-bottom: 2px solid var(--lf-accent);
  }
  
  /* Thread banner — fade in */
  #lf-thread-banner-wrap {
    animation: fadeIn .3s ease;
  }
  
  /* Settings panel polish */
  .settings-panel-toggle-row {
    transition: background .12s;
  }
  .settings-panel-toggle-row:hover {
    background: rgba(139,92,246,.04);
    border-radius: 6px;
  }
  
  /* Admin nav items — tighter selected state */
  .apb-nav-item.active {
    background: rgba(139,92,246,.12);
    color: var(--lf-accent-soft);
    border-radius: 5px;
  }
  .apb-nav-item:hover:not(.active) {
    background: rgba(139,92,246,.06);
    border-radius: 5px;
  }
  
  @keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
  
  /* ============================================================
     STAFF TOGGLE — same CSS pattern as online
     ============================================================ */
  body:not(.setting-staff) #sidebar-staff-section { display: none !important; }
  
  /* ============================================================
     SIDEBAR NAV — drag-and-drop edit mode
     ============================================================ */
  [data-nav-id][draggable="true"] {
    cursor: grab !important;
    border: 1px dashed var(--lf-border);
    border-radius: 5px;
  }
  [data-nav-id][draggable="true"]:active { cursor: grabbing !important; }
  .nav-drag-handle {
    display: inline-flex;
    align-items: center;
    color: var(--lf-muted);
    margin-right: 2px;
  }
  
  /* ============================================================
     POST NUMBERING + COPY LINK BUTTON
     ============================================================ */
  .lf-post-num {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .post-num-link {
    font-family: var(--lf-font-ui);
    font-size: .68rem;
    color: var(--lf-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color .12s;
  }
  .post-num-link:hover { color: var(--lf-accent-soft); }
  
  .post-copy-btn {
    background: none;
    border: none;
    font-size: .7rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
    padding: 1px 3px;
    border-radius: 3px;
    color: var(--lf-muted);
    line-height: 1;
  }
  .lf-post-header:hover .post-copy-btn,
  .lf-post-card:hover .post-copy-btn { opacity: .6; }
  .post-copy-btn:hover { opacity: 1 !important; background: rgba(139,92,246,.12); }
  
  /* Deleted post — dimmed but still counts */
  .lf-post-card[data-deleted="true"] {
    opacity: .65;
    background: var(--lf-deep) !important;
  }
  
  /* ============================================================
     THREAD LAYOUT — consolidated, single source of truth
     Grid: [#lf-posts-col  1fr] [#lf-thread-sidebar  255px]
     lf-posts-col contains: lf-thread-posts + lf-reply-area
     ============================================================ */
  #lf-thread-layout {
    display: grid;
    grid-template-columns: 1fr 255px;
    position: relative;
    transition: grid-template-columns .25s ease;
    align-items: stretch;
    min-height: calc(100vh - 160px);
  }
  
  /* Posts column — flex so posts + reply stack vertically */
  #lf-posts-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--lf-border);
  }
  
  /* Post cards sit inside padded container — keep their own border-radius + spacing */
  #lf-thread-posts .lf-post-card { margin-bottom: 16px; }
  #lf-thread-posts .lf-post-card:last-child { margin-bottom: 0; }
  
  
  
  /* Thread posts area — matches forum main padding */
  #lf-thread-posts {
    padding: 28px 36px 0;
    min-width: 0;
  }
  
  /* Reply area — matches forum padding */
  #lf-reply-area {
    border-top: 1px solid var(--lf-border);
    min-width: 0;
    padding: 28px 36px;
  }
  
  /* The post-layout grid inside each card fills the posts column width */
  
  /* Sidebar */
  #lf-thread-sidebar {
    padding: 22px 18px;
    background: var(--lf-deep);
    border-left: 1px solid var(--lf-border);
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--lf-border) transparent;
    box-sizing: border-box;
  }
  
  /* Sidebar collapse */
  #lf-thread-layout.thread-sidebar-collapsed {
    grid-template-columns: 1fr 0;
  }
  #lf-thread-layout.thread-sidebar-collapsed #lf-thread-sidebar {
    width: 0;
    padding: 0;
    overflow: hidden;
    border: none;
  }
  #lf-thread-layout.thread-sidebar-collapsed #lf-thread-sidebar-toggle {
    right: 0;
  }
  
  /* Mobile */
  @media (max-width: 768px) {
    #lf-thread-layout { grid-template-columns: 1fr; }
    #lf-posts-col { border-right: none; }
    #lf-thread-sidebar { border-top: 1px solid var(--lf-border); position: static; max-height: none; }
  }
  
  /* ============================================================
     FORUM → FORUM VIEW POLISH
     ============================================================ */
  /* Thread row hover */
  .lf-thread-row {
    cursor: pointer;
    transition: background .12s;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 4px;
  }
  .lf-thread-row:hover { background: rgba(139,92,246,.06); }
  .lf-thread-row-title {
    font-family: var(--lf-font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--lf-bright);
    transition: color .12s;
  }
  .lf-thread-row:hover .lf-thread-row-title { color: var(--lf-accent-soft); }
  
  /* Forum view header description */
  #lf-forum-view-desc {
    font-size: .82rem;
    color: var(--lf-muted);
    margin-top: 4px;
    font-style: italic;
  }
  
  /* ============================================================
     REPLY BOX POLISH
     ============================================================ */
  #lf-reply-box {
    background: var(--lf-surface);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--lf-border);
  }
  #lf-reply-box-header {
    background: var(--lf-deep);
    border-bottom: 1px solid var(--lf-border);
    padding: 10px 18px;
  }
  #lf-reply-textarea {
    background: var(--lf-deep);
    color: var(--lf-text);
    font-family: var(--lf-font-body);
    font-size: .9rem;
    line-height: 1.7;
    border: none;
    width: 100%;
    min-height: 160px;
    padding: 16px 18px;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
  }
  #lf-reply-textarea:focus { background: var(--lf-bg); }
  #lf-reply-footer {
    background: var(--lf-deep);
    border-top: 1px solid var(--lf-border);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .reply-footer-left {
    font-family: var(--lf-font-ui);
    font-size: .62rem;
    letter-spacing: .06em;
    color: var(--lf-muted);
  }
  .reply-mode-tabs { display: flex; gap: 2px; }
  .reply-mode-tab {
    font-family: var(--lf-font-ui);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--lf-muted);
    transition: all .12s;
  }
  .reply-mode-tab.active,
  .reply-mode-tab[data-mode="write"].active {
    background: rgba(139,92,246,.15);
    color: var(--lf-accent-soft);
  }
  .reply-mode-tab:hover:not(.active) { color: var(--lf-text); }
  
  /* ============================================================
     THREAD HEADER POLISH
     ============================================================ */
  .thread-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--lf-font-ui);
    font-size: .66rem;
    color: var(--lf-muted);
  }
  .thread-meta-item svg { width: 11px; height: 11px; opacity: .6; }
  #lf-thread-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
  }
  .thread-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }
  #lf-thread-title {
    font-family: var(--lf-font-display);
    font-size: 1.4rem;
    color: var(--lf-bright);
    letter-spacing: .01em;
  }
  
  /* ============================================================
     PROFILE EDITOR SHARED — create & edit uniformity
     ============================================================ */
  
  /* Staff instructions banner (join form) */
  .fpe2-staff-banner {
    background: rgba(139,92,246,.05);
    border: 1px solid rgba(139,92,246,.15);
    border-radius: 7px;
    margin-bottom: 4px;
  }
  .fpe2-staff-title { color: var(--lf-accent-soft) !important; }
  .fpe2-staff-body  { font-size: .88rem; line-height: 1.7; padding-bottom: 4px; }
  
  /* BBC toolbar inside fpe2 sections */
  .fpe2-bbc-toolbar {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: 5px 5px 0 0;
    padding: 5px 8px;
    display: flex;
    flex-direction: row;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
  }
  .fpe2-bbc-toolbar + .fpe2-input {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
  }
  .fpe2-bbc-toolbar + .fpe2-textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
  }
  
  /* Sheet textarea (character sheet application area) */
  .fpe2-sheet-textarea {
    min-height: 260px;
    resize: vertical;
    font-family: var(--lf-font-body);
    font-size: .92rem;
    line-height: 1.7;
  }
  
  /* Preview panel */
  .fpe2-preview-panel {
    display: none;
    background: var(--lf-card);
    border: 1px solid var(--lf-border);
    border-radius: 5px;
    padding: 14px 16px;
    margin-top: 6px;
  }
  
  /* Join mode header distinction */
  #lf-fpe2-header.join-mode {
    border-bottom-color: rgba(139,92,246,.3);
    background: linear-gradient(to right, rgba(139,92,246,.04), transparent);
  }
  #lf-fpe2-header.join-mode #lf-fpe2-header-left h2 {
    color: var(--lf-bright);
  }
  #lf-fpe2-header.join-mode #lf-fpe2-header-left p {
    color: var(--lf-accent-soft);
    font-style: italic;
  }
  
  /* ============================================================
     POST AUTHOR LINKS — character vs writer distinction
     ============================================================ */
  /* Character name (primary) — accent on hover */
  .lf-post-username {
    cursor: pointer;
    transition: color .12s;
  }
  .lf-post-username:hover {
    color: var(--lf-accent-soft) !important;
  }
  
  /* Writer "by" line — muted link, gold on hover */
  .lf-post-character a {
    display: inline;
    transition: color .12s;
  }
  .lf-post-character a:hover {
    color: var(--lf-gold) !important;
    text-decoration: underline;
  }
  
  /* Participants sidebar character name */
  .part-name {
    transition: color .12s;
  }
  .part-name:hover {
    color: var(--lf-accent-soft) !important;
  }
  
  /* ============================================================
     MY REALMS TAB — profile grid
     ============================================================ */
  #up-my-realms-grid .realm-card-strip {
    height: 64px;
    background: var(--lf-surface);
    position: relative;
    overflow: hidden;
  }
  #up-my-realms-grid .realm-card-strip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,9,16,.8), transparent);
  }
  
  /* ============================================================
     PARTICIPANT SIDEBAR — character + writer layout
     ============================================================ */
  .participant-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid var(--lf-border);
  }
  .participant-row:last-child { border-bottom: none; }
  .part-avatar {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: var(--lf-surface);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
  }
  .part-name {
    font-family: var(--lf-font-ui);
    font-size: .78rem;
    color: var(--lf-bright);
    font-weight: 600;
  }
  .part-posts {
    font-family: var(--lf-font-ui);
    font-size: .62rem;
    color: var(--lf-muted);
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 2px;
  }
  
  /* ============================================================
     POST AUTHOR — "by [writer]" line alignment
     ============================================================ */
  .lf-post-character {
    font-size: .62rem;
    color: var(--lf-muted);
    font-style: italic;
    line-height: 1.4;
    margin-top: 1px;
  }