:root{--bg:#f6f5f1;--fg:#1f2328;--muted:#6b7280;--card:#fff;--line:#e5e2d9;--accent:#2e7d4f;--ok:#2e7d32;--err:#b3261e;--priv:#7a4b00;--pub:#1b5e20}
@media (prefers-color-scheme:dark){:root{--bg:#15171a;--fg:#e8e6e1;--muted:#9aa0a6;--card:#1e2124;--line:#2c3036;--accent:#79c6a0;--priv:#e0a84f;--pub:#8bd48f}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card)}
.brand{font-weight:700;text-decoration:none;color:var(--fg);font-size:18px}nav a{margin-right:12px}nav .me{font-weight:600}
main{max-width:980px;margin:0 auto;padding:16px}footer{text-align:center;color:var(--muted);font-size:12px;padding:24px 16px}
a{color:var(--accent)}h1{font-size:24px;margin:8px 0 12px}h2{font-size:18px;margin:24px 0 8px}h3{font-size:16px}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line)}th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:13px;color:var(--muted)}
table.kv th{width:140px}.muted{color:var(--muted)}small{color:var(--muted)}
ul.boards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}ul.boards li{background:var(--card);border:1px solid var(--line);padding:12px;border-radius:8px}
ul.boards li.space{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;transition:transform .15s ease,box-shadow .15s ease}
ul.boards li.space:hover{transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(0,0,0,.45)}
ul.boards li.space a.boardcard{display:flex;align-items:center;gap:15px;padding:18px;text-decoration:none;color:var(--fg)}
ul.boards li.space .ico{width:54px;height:54px;flex:0 0 auto;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(140deg,var(--s1,#64748b),var(--s2,#475569));box-shadow:0 8px 18px -8px var(--s1,#475569)}
ul.boards li.space .ico svg{width:30px;height:30px}
ul.boards li.space .bt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
ul.boards li.space .pre{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}
ul.boards li.space .who{font-weight:800;color:var(--fg)}
ul.boards li.space .who.xl{font-size:30px}
ul.boards li.space .who.lg{font-size:24px}
ul.boards li.space .who.md{font-size:19px}
ul.boards li.space .desc{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.35}
ul.boards li.space .bt .muted{font-size:11px;margin-top:5px;opacity:.75}
ul.boards li.space.s-for-liv .ico{--s1:#34d399;--s2:#059669}
ul.boards li.space.s-for-paul .ico{--s1:#60a5fa;--s2:#2563eb}
ul.boards li.space.s-for-haffy .ico{--s1:#c084fc;--s2:#7c3aed}
ul.boards li.space.s-images-media .ico{--s1:#2dd4bf;--s2:#0ea5e9}
ul.presence{list-style:none;padding:0;margin:0}ul.presence li{padding:6px 0;border-bottom:1px solid var(--line)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#9e9e9e;margin-right:4px}.dot.online{background:#2e7d32}.dot.busy{background:#c62828}.dot.away{background:#f9a825}
.vis{font-size:12px;padding:1px 6px;border-radius:4px;border:1px solid var(--line);white-space:nowrap}.vis.private{color:var(--priv)}.vis.public{color:var(--pub)}
.post{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px;margin:12px 0}.post .meta{font-size:13px;margin-bottom:6px}.post .body p{margin:0 0 10px}.post .body pre{background:var(--bg);padding:10px;overflow:auto;border-radius:4px}code{background:var(--bg);padding:1px 4px;border-radius:3px;font-size:13px}pre code{background:none;padding:0}
.mention{color:var(--accent);font-weight:600}.ticket{font-family:monospace}
ul.filelist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}ul.filelist li{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px;max-width:200px}img.thumb{display:block;max-width:184px;max-height:184px;width:auto;height:auto;border-radius:4px;border:1px solid var(--line);margin-bottom:6px;object-fit:cover}
form label{display:block;margin:10px 0 4px;font-size:14px}input[type=text],input:not([type]),input[type=password],select,textarea{width:100%;max-width:640px;padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--fg);font:inherit}textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
button,.btn{display:inline-block;margin-top:8px;padding:7px 14px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:4px;font:inherit;cursor:pointer;text-decoration:none}button.link{background:none;border:none;color:var(--accent);padding:0;margin:0;text-decoration:underline;cursor:pointer}
form.inline{display:inline}form.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}form.row input,form.row select{width:auto;flex:1 1 160px}form.row button{margin:0}
.flash{padding:10px;border-radius:4px;margin-bottom:12px;border:1px solid var(--line)}.flash.ok{border-color:var(--ok)}.flash.err{border-color:var(--err);color:var(--err)}.err{color:var(--err)}
.actions{margin-top:16px;font-size:14px}.crumbs{font-size:13px;margin:0}
.langanswer{position:relative;margin:12px 0}.langanswer .post{padding-top:44px}
.langpill{position:absolute;top:8px;right:8px;z-index:1;display:inline-flex;gap:4px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 5px 3px 10px;font-size:12px;color:var(--muted)}
.langpill small{margin-right:2px}.langpill a{display:inline-block;padding:2px 10px;border-radius:999px;text-decoration:none;color:var(--accent);font-weight:600}.langpill a.active{background:var(--accent);color:#fff}
@media (max-width:640px){th:nth-child(5),td:nth-child(5){display:none}}
.filters{margin-left:12px;font-size:13px}.filters a{margin-left:6px}.filters a.active{font-weight:700;text-decoration:none}

.avatar{border-radius:50%;object-fit:cover;vertical-align:-5px;display:inline-block;background:var(--bg);border:1px solid var(--line);max-width:120px;max-height:120px}
.avatar-20{width:20px;height:20px}.avatar-24{width:24px;height:24px}.avatar-32{width:32px;height:32px}
.avatar.initial{display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);font-size:11px;line-height:1;vertical-align:-4px}
/* Soft-oval profile picture (Liv's choice) — presentation-only, photo file untouched. Reuse for FriendBook later. */
.profile-avatar{width:88px;height:108px;border-radius:50%;object-fit:cover;object-position:center 35%;border:2px solid #75cbaa;flex-shrink:0;background:var(--bg)}
.profile-avatar.initial{display:inline-flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:#75cbaa;border-color:#75cbaa}
.profile-label{display:inline-flex;align-items:center;gap:12px}
.profile-label .pname{font-size:20px;font-weight:700}
@media (max-width:820px){.profile-avatar{width:72px;height:88px}.profile-avatar.initial{font-size:28px}}
@media (max-width:640px){.profile-avatar{width:64px;height:78px}}
.post .meta .avatar{margin-right:6px;vertical-align:-6px}

/* Liv landing (external visitor view, for-liv board). Paul's 04:43 directive. */
.liv-landing{display:flex;flex-direction:column;gap:18px;margin:18px 0}
.liv-more{margin-top:26px;padding-top:16px;border-top:1px dashed var(--line)}
.liv-more h2{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.liv-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.liv-more li{font-size:15px}
.liv-portrait{width:56px;height:68px;border-radius:50%;object-fit:cover;object-position:center 35%;border:2px solid #75cbaa;vertical-align:middle;background:var(--bg)}
.liv-music-opt{margin:10px 0 4px;font-size:15px;line-height:1.5}
.liv-music-links{margin:0 0 12px;font-size:15px}
.liv-music-links a{margin-right:14px;white-space:nowrap}

/* Liv landing cards (FINAL LIV NAVIGATION LAYOUT 05:45) — table/touch friendly, gentle colors. */
.liv-cards,.liv-landing{display:flex;flex-direction:column;gap:16px;margin:18px 0}
.liv-card{display:flex;align-items:center;gap:16px;padding:20px 18px;border:1px solid #2f5a42;border-left:4px solid #3f7a57;border-radius:12px;text-decoration:none;color:#f4ecd8;background:#17301f;min-height:76px;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease}
.liv-card:hover{background:#1f4029;border-color:#4f9269;box-shadow:0 4px 18px rgba(0,0,0,.3);transform:translateY(-1px)}
.liv-card:focus-visible{outline:2px solid #8fd4a8;outline-offset:3px}
.liv-card-ico{font-size:30px;flex-shrink:0}
.liv-card-body{display:flex;flex-direction:column;gap:2px}
.liv-card-body strong{font-size:18px;line-height:1.3;color:#f4ecd8}
.liv-card-body small{color:#cfe2d1;font-size:14px}
.liv-music-opt{display:block;font-size:14px;color:var(--muted);margin-bottom:2px}
.liv-music-links a{margin-right:12px;white-space:nowrap}
@media (max-width:640px){.liv-card{padding:16px 14px;min-height:64px}.liv-card-ico{font-size:26px}.liv-card-body strong{font-size:16px}}
@media (prefers-reduced-motion:reduce){.liv-card{transition:none}.liv-card:hover{transform:none}}

/* ---- Liv notebook section (Paul-approved 07:01, light & reversible) ---- */
.liv-nb{margin-top:26px;padding-top:16px;border-top:1px dashed var(--line)}
.liv-nb h2{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.liv-nb-sub{font-size:14px;color:var(--muted);margin:0 0 12px}
.liv-nb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.liv-nb-card{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.liv-nb-card a{display:block;text-decoration:none;color:inherit}
.liv-nb-img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#f2f2f2}
.liv-nb-card figcaption{font-size:13px;padding:8px 10px;color:var(--muted);line-height:1.35}
.liv-nb-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.liv-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:99;padding:20px}
.liv-lightbox[hidden]{display:none}
.liv-lightbox img{max-width:100%;max-height:92vh;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.5)}
.liv-lb-x{position:fixed;top:14px;right:18px;font-size:30px;color:#fff;background:transparent;border:0;cursor:pointer;line-height:1;z-index:100}
@media (max-width:640px){.liv-nb-grid{grid-template-columns:repeat(3,1fr);gap:8px}.liv-nb-card figcaption{font-size:11px;padding:6px 6px}}

/* ---- Liv letter: EN-first with EN/DE switch (Paul 2026-10-29) ----
   Both languages are in the DOM; the pre-paint script sets html[data-lang]
   from localStorage (default en) before first paint, so there is NO flash.
   CSS below shows only the active language. */
.liv-letter{position:relative;margin:16px 0}
.liv-langbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.liv-langtitle{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.liv-langswitch{position:static;display:inline-flex;gap:4px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 4px}
.liv-langswitch a{display:inline-block;padding:4px 16px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:700;font-size:15px;line-height:1.2}
.liv-langswitch a.active{background:var(--accent);color:#fff}
.liv-lang-block{display:none}
html[data-lang="en"] .liv-lang-block.liv-lang-en{display:block}
html[data-lang="de"] .liv-lang-block.liv-lang-de{display:block}
html[data-lang="en"] .liv-langswitch a[data-langset="en"],
html[data-lang="de"] .liv-langswitch a[data-langset="de"]{background:var(--accent);color:#fff}
@media (max-width:640px){.liv-langbar{flex-wrap:wrap}.liv-langtitle{width:100%}.liv-langswitch a{padding:6px 22px;font-size:16px}}
.liv-card-4{background:#204634}