/* NoddedOn palette, taken from the real app's css/app.css (light scheme). Option 04 only. */
  :root {
    --accent:#00696e; --ink:#1c1b1f; --ink2:#4a454e; --ink3:#7c757e;
    --line:#e4dbe3; --line2:#f1eaf0; --bg:#fdf7fb; --card:#ffffff;
    --tint:#e2f0f0; --good:#2e7d32; --stop:#ba1a1a; --warn:#8a5a00; --r:14px;
  }
  body { background:#e8e0e8; }
  .optbar { background:#00363a; }

  .brand { display:flex; align-items:center; gap:7px; font-weight:700; font-size:14px; }
  .brand img { width:22px; height:22px; border-radius:6px; display:block; }
  .toplogo { width:26px; height:26px; border-radius:7px; display:block; flex:none; }

  .grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
  .tile { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:12px; text-decoration:none; color:inherit; display:block; }
  .tile:hover { background:var(--tint); }
  .tile .n { font-size:30px; font-weight:750; line-height:1; }
  .tile .l { font-size:13px; color:var(--ink2); margin-top:6px; }
  .tile.hot { border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,105,110,.14); }
  .tile.hot .n { color:var(--accent); }

  /* ---- discussion, plain flat thread ---- */
  .discbar { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:10px 12px; margin-bottom:12px; font-size:13px; color:var(--ink2);
    display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; }
  .discbar b { color:var(--ink); }
  .pool { font-weight:800; color:var(--accent); font-size:15px; }
  .thread { background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  .line { display:flex; align-items:flex-start; gap:8px; padding:8px 11px;
    border-bottom:1px solid var(--line2); font-size:14px; line-height:1.35; }
  .line:last-child { border-bottom:0; }
  .line .who { font-weight:700; color:var(--accent); flex:none; }
  .line .dash { color:var(--ink3); flex:none; }
  .line .t { color:var(--ink3); flex:none; font-variant-numeric:tabular-nums; }
  .line .tx { flex:1; min-width:0; }
  .line .sv { flex:none; border:1px solid var(--line); background:#fff; border-radius:7px;
    font:inherit; font-size:11px; font-weight:700; padding:3px 8px; cursor:pointer; color:var(--ink3); }
  .line .sv:hover { background:var(--tint); }
  .line.saved { background:#fffaea; }
  .line.saved .sv { background:#ffe9a8; border-color:#e8cf82; color:#6b5200; }
  .line.mine .who { color:#8a4a6f; }

  /* ---- entry journey ---- */
  .entry { padding:26px 18px; }
  .entry .mark { text-align:center; margin-bottom:22px; }
  .entry .mark img { width:64px; height:64px; border-radius:16px; }
  .entry .mark h2 { margin:12px 0 0; font-size:21px; }
  .entry h1 { font-size:21px; text-align:center; margin:0 0 6px; }
  .entry p.lede { text-align:center; color:var(--ink2); font-size:14px; margin:0 0 18px; }
  .fieldbox { margin-bottom:14px; }
  .fieldbox label { display:block; font-size:13px; font-weight:700; margin-bottom:5px; }
  .fieldbox .hint { font-size:12px; color:var(--ink3); margin-top:4px; }
  .fieldbox .hint.bad { color:var(--stop); }
  .btn.block { display:block; width:100%; text-align:center; padding:13px; font-size:16px; }
  .btn:disabled { opacity:.45; cursor:not-allowed; }
  .textlink { display:block; width:100%; text-align:center; background:none; border:0;
    font:inherit; font-size:14px; color:var(--accent); text-decoration:underline;
    cursor:pointer; padding:12px 0; }
  .consent { border:2px solid var(--accent); border-radius:var(--r); padding:13px;
    margin:16px 0; background:#f4fafa; }
  .consent .req { font-size:11px; font-weight:800; letter-spacing:.09em; color:var(--accent);
    margin-bottom:7px; }
  .consent label { display:flex; gap:10px; align-items:flex-start; font-size:14px; cursor:pointer; }
  .consent input { margin-top:3px; width:19px; height:19px; flex:none; }
  .stateline { font-size:11px; font-weight:800; letter-spacing:.09em; color:var(--ink3);
    border:1px solid var(--line); border-radius:6px; padding:4px 8px; display:inline-block;
    margin-bottom:14px; }
  .moneynote { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:12px; font-size:13px; color:var(--ink2); margin-bottom:16px; }
  .moneynote b { color:var(--ink); }

  /* ---- founder nod rule ---- */
  .notify { background:#e2f0f0; border:2px solid var(--accent); border-radius:var(--r);
    padding:12px 13px; margin-bottom:12px; font-size:14px; color:#00474b; font-weight:600; }
  .rulechoice { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:13px; margin-bottom:12px; }
  .rulechoice h3 { margin:0 0 4px; font-size:16px; }
  .rulechoice p { margin:0 0 10px; font-size:13px; color:var(--ink3); }
  .rulechoice .rowin { display:flex; gap:8px; align-items:center; }
  .rulechoice .rowin input { flex:1; }
  .rulechoice .rowin .btn { flex:none; }
  .rulenow { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:13px; margin-bottom:12px; }
  .rulenow .lab { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink3); margin-bottom:4px; }
  .rulenow .val { font-size:19px; font-weight:700; }

  /* ---- voucher wallet ---- */
  .vrow { display:flex; align-items:center; gap:10px; padding:11px 12px;
    border-bottom:1px solid var(--line2); }
  .vrow:last-child { border-bottom:0; }
  .vrow.done { background:#f6f3f6; }
  .vmain { flex:1; min-width:0; }
  .vname { display:block; font-weight:700; }
  .vrow.done .vname { color:var(--ink3); }
  .vcode { display:block; font-size:12px; color:var(--ink3); }
  .vbtn { padding:7px 14px; font-size:13px; flex:none; }

  /* ---- placeholder pictures ---- */
  .pic { border-radius:var(--r); display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; letter-spacing:.04em; }
  .pic.hero { height:150px; font-size:15px; margin-bottom:12px; }
  .pic.avatar { width:96px; height:96px; border-radius:50%; font-size:26px; }
  .photos { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .photos .cell { position:relative; }
  .photos .pic { height:92px; font-size:20px; }
  .photos .rm { position:absolute; top:5px; right:5px; border:0; background:rgba(0,0,0,.55);
    color:#fff; border-radius:6px; font:inherit; font-size:11px; font-weight:700;
    padding:3px 7px; cursor:pointer; }
  .swatches { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px; }
  .swatches button { height:52px; border-radius:10px; border:2px solid transparent; cursor:pointer; }
  .swatches button.on { border-color:var(--ink); }

  /* ---- event details ---- */
  .field { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:11px 13px; margin-bottom:9px; }
  .field .lab { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink3); margin-bottom:4px; }
  .field .val { font-size:16px; font-weight:600; }
  .field .val.small { font-size:14px; font-weight:400; color:var(--ink2); }
  .zoomlink { color:var(--accent); text-decoration:underline; font-size:14px; word-break:break-all; }
  .pinned { background:#e2f0f0; border-color:var(--accent); }
  .alpha { font-size:12px; letter-spacing:.1em; color:var(--ink3); font-weight:700; margin:16px 0 6px; }