/* SHARED 4-THEME SYSTEM for /facebook/* */
:root, [data-theme="burnt"]{
  --bg:#f4ecdb; --surface:#ffffff; --surface-2:#fff8e8; --surface-3:#ebe1c8;
  --ink:#1c1814; --ink-2:#3a342c; --ink-3:#6a6053;
  --rule:#bfae87; --accent:#BF5700; --accent-2:#7a2517; --highlight:#FFD27A;
  --shadow:0 1px 2px rgba(60,40,15,.08), 0 4px 14px rgba(60,40,15,.10);
  --shadow-lg:0 8px 32px rgba(60,40,15,.18);
  --serif:"Source Serif 4","Georgia",serif;
  --display:"Cormorant Garamond",serif;
  --topbar-h:60px;
}
[data-theme="light"]{
  --bg:#f0f2f5; --surface:#ffffff; --surface-2:#f7f8fa; --surface-3:#e4e6eb;
  --ink:#050505; --ink-2:#3a3b3c; --ink-3:#65676b;
  --rule:#dadde1; --accent:#1877F2; --accent-2:#0866ff; --highlight:#e7f3ff;
  --shadow:0 1px 2px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05);
  --shadow-lg:0 12px 28px rgba(0,0,0,.15);
  --serif:-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Cormorant Garamond",serif;
}
[data-theme="dark"]{
  --bg:#18191a; --surface:#242526; --surface-2:#3a3b3c; --surface-3:#4e4f50;
  --ink:#e4e6eb; --ink-2:#b0b3b8; --ink-3:#8a8d91;
  --rule:#3e4042; --accent:#2374e1; --accent-2:#5ba0ff; --highlight:#263951;
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.40);
  --shadow-lg:0 12px 32px rgba(0,0,0,.55);
  --serif:-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Cormorant Garamond",serif;
}
[data-theme="teal"]{
  --bg:#e6f5f3; --surface:#ffffff; --surface-2:#d6efeb; --surface-3:#bfe5df;
  --ink:#0f3331; --ink-2:#1b4f4b; --ink-3:#5a7b78;
  --rule:#9bcdc6; --accent:#00897B; --accent-2:#FF6F61; --highlight:#FFE082;
  --shadow:0 1px 2px rgba(0,80,75,.12), 0 4px 14px rgba(0,80,75,.15);
  --shadow-lg:0 12px 32px rgba(0,80,75,.25);
  --serif:-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Cormorant Garamond",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.5;transition:background .25s, color .25s}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-decoration:underline}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--rule);padding:10px 22px;box-shadow:var(--shadow)}
.topbar-inner{max-width:1600px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--ink);display:flex;align-items:center;gap:12px;line-height:1;letter-spacing:-.01em}
.brand .logo{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.3rem;box-shadow:var(--shadow)}
.brand .text{display:flex;flex-direction:column;gap:2px}
.brand .text .name{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1}
.brand .text .sub{font-family:Inter,sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);line-height:1}
.brand a.back{font-family:Inter,sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);border-bottom:none;margin-left:14px}
.brand a.back:hover{color:var(--accent);text-decoration:none}
.nav-links{display:flex;gap:4px;font-family:Inter,sans-serif;font-size:.82rem;font-weight:600}
.nav-links a{color:var(--ink-2);padding:6px 12px;border-radius:6px;transition:all .12s}
.nav-links a:hover{background:var(--surface-2);color:var(--accent);text-decoration:none}
.nav-links a.on{background:var(--accent);color:#fff}
.search-wrap{flex:1 1 auto;min-width:180px;max-width:340px;position:relative}
.search-wrap input{width:100%;padding:8px 14px 8px 36px;background:var(--surface-2);border:1px solid var(--rule);font-family:Inter,sans-serif;font-size:.9rem;outline:none;color:var(--ink);border-radius:24px;transition:all .15s}
.search-wrap input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}
.search-wrap::before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:1.05rem;pointer-events:none}

/* THEME PICKER */
.theme-picker{display:flex;gap:4px;background:var(--surface-2);border-radius:24px;padding:3px;border:1px solid var(--rule)}
.theme-picker button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;background-clip:padding-box;padding:0;transition:transform .12s,border-color .15s}
.theme-picker button:hover{transform:scale(1.08)}
.theme-picker button.on{border-color:var(--ink)}
.theme-picker button[data-set="burnt"]{background:linear-gradient(135deg,#BF5700,#7a2517)}
.theme-picker button[data-set="light"]{background:linear-gradient(135deg,#fff,#1877F2)}
.theme-picker button[data-set="dark"]{background:linear-gradient(135deg,#242526,#2374e1)}
.theme-picker button[data-set="teal"]{background:linear-gradient(135deg,#00897B,#FF6F61)}