:root {
--mo-bg: #FAF9F6; --mo-surface: #FFFFFF; --mo-border: #DDDDDD;
--mo-ink: #2C2C2C; --mo-ink-muted: #5C5C5C;
--mo-blue: #2D588F; --mo-blue-hover: #234570;
--mo-green: #2B7A44; --mo-green-hover: #226138;
--mo-red: #B3261E;
--mo-link: var(--mo-blue); --mo-accent: var(--mo-blue); --mo-accent-hover: var(--mo-blue-hover);
--container-wide: 1200px; --container-read: 680px; --container-form: 420px; --container-chat: 760px;
--space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px;
}
* { box-sizing: border-box; }
body { background: var(--mo-bg); color: var(--mo-ink); margin: 0; -webkit-text-size-adjust: 100%; }
a { color: var(--mo-link); }
button { background: var(--mo-blue); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-family: inherit; }
button:hover { background: var(--mo-blue-hover); }
input[type="checkbox"], input[type="radio"] { width: auto !important; padding: 0 !important; margin: 0 !important; flex: none; }
label.cat-check, label.check-row { display: flex !important; align-items: center; gap: 8px; }
/* Full-bleed outer chrome; page content sits in .mo-page (fluid/grid pages)
   or .mo-read (reading & chat pages, capped for legibility) or .mo-form (auth/invite). */
/* Every page sits in the SAME frame, so the header, footer and content edges
   line up no matter which screen you are on. Only the measure inside varies,
   because a 1200px line of prose is unreadable: reading, form and chat pages
   centre their own contents at a comfortable width within that shared band. */
.mo-page, .mo-read, .mo-form, .mo-chat { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-4); box-sizing: border-box; }
/* Centring with auto margins only works on block-level children, which left
   inputs and inline-block buttons stuck against the left edge of the frame.
   A flex column centres every child whatever its display type, and width:100%
   makes them all share one edge. */
.mo-read, .mo-form, .mo-chat { display: flex; flex-direction: column; align-items: center; }
.mo-read > *, .mo-form > *, .mo-chat > * { width: 100%; max-width: var(--inner-measure); box-sizing: border-box; }
.mo-read { --inner-measure: var(--container-read); }
.mo-form { --inner-measure: var(--container-form); }
.mo-chat { --inner-measure: var(--container-chat); }
@media (max-width: 480px) {
  .mo-page, .mo-read, .mo-form, .mo-chat { padding-left: var(--space-3); padding-right: var(--space-3); }
}
.mo-bar { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 16px 0; border-bottom: 1px solid var(--mo-border); background: var(--mo-surface); position: relative; }
.mo-bar-inner { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-4); box-sizing: border-box; position: relative; display: flex; align-items: center; justify-content: center; min-height: 42px; }
/* The header band matches the one page frame below, so the hamburger always
   sits directly above the content on every screen. */
.mo-burger { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border: 1px solid var(--mo-border); border-radius: 10px; background: var(--mo-surface); cursor: pointer; padding: 0; }
.mo-burger span { display: block; width: 18px; height: 2px; background: var(--mo-ink); margin: 0 auto; }
.mo-logo { display: flex; align-items: center; text-decoration: none; }
.mo-logo img { height: 44px; width: auto; display: block; }
.mo-menu { display: none; position: absolute; top: 60px; left: var(--space-4); width: 230px; background: var(--mo-surface); border: 1px solid var(--mo-border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.14); padding: 8px; z-index: 50; flex-direction: column; gap: 2px; }
.mo-menu.open { display: flex; }
.mo-menu a { padding: 11px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; display: block; color: var(--mo-ink); text-decoration: none; }
.mo-menu a:hover { background: var(--mo-bg); }
.mo-logout-form { margin: 0; }
.mo-menu .mo-logout { display: block; width: 100%; text-align: left; padding: 11px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--mo-ink); background: transparent; border: none; cursor: pointer; font-family: inherit; }
.mo-menu .mo-logout:hover { background: var(--mo-bg); }
.mo-menu-divider { height: 1px; background: var(--mo-border); margin: 6px 4px; }
.mo-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); background: var(--mo-ink); color: #fff; border-radius: 10px; padding: 12px 14px; font-size: 0.9em; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,0.25); z-index: 100; display: flex; gap: 12px; align-items: center; }
.mo-toast button { background: #fff; color: var(--mo-ink); border: none; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 0.85em; cursor: pointer; flex: none; }
.mo-toast .mo-toast-x { background: transparent; color: #fff; padding: 2px 6px; }
.mo-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; padding: 10px 12px; border: 1px solid #E8B4AE; background: #FDF1EF; border-radius: 8px; font-size: 0.9em; color: var(--mo-ink); }
.mo-confirm span { flex: 1 1 200px; }
.mo-confirm button { border-radius: 6px; padding: 6px 12px; font-weight: 700; font-size: 0.85em; cursor: pointer; border: 1px solid var(--mo-border); background: var(--mo-surface); color: var(--mo-ink); }
.mo-confirm .mo-confirm-yes { background: #B3261E; border-color: #B3261E; color: #fff; }
.site-footer { text-align: center; padding: 24px 16px 32px; color: var(--mo-ink-muted); font-size: 0.85em; margin-top: 40px; border-top: 1px solid var(--mo-border); background: var(--mo-surface); }
.site-footer a { color: var(--mo-ink); text-decoration: none; margin: 0 8px; font-weight: 700; }
.site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px; }
.site-footer a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .mo-bar-inner { padding: 0 var(--space-3); min-height: 38px; }
  .mo-burger { left: var(--space-3); width: 40px; height: 40px; }
  .mo-logo img { height: 32px; }
  .mo-menu { left: var(--space-3); top: 54px; width: 200px; }
}

body { font-family: system-ui, sans-serif; }
h2 { margin-bottom: 4px; }
.nav { margin-bottom: 20px; font-size: 0.9em; }
.nav a { color: var(--mo-link); margin-right: 16px; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.card { background: var(--mo-surface); border: 1px solid var(--mo-border); border-radius: 10px; padding: 16px; cursor: pointer; transition: background 0.15s; }
.card:hover { background: #F1EFE9; }
.card h3 { margin: 0 0 6px; font-size: 1.05em; }
.card .meta { color: var(--mo-ink-muted); font-size: 0.85em; }
.badge { display: inline-block; background: #F1EFE9; color: var(--mo-ink-muted); border: none; border-radius: 12px; padding: 2px 10px; font-size: 0.78em; margin-right: 6px; margin-top: 6px; cursor: pointer; font-family: inherit; }
.badge:hover { background: var(--mo-link); color: #fff; }
.empty { color: var(--mo-ink-muted); margin-top: 30px; text-align: center; }
.section { margin-top: 28px; }
.section h3 { border-bottom: 1px solid var(--mo-border); padding-bottom: 6px; }
.fact-row { padding: 8px 0; border-bottom: 1px solid var(--mo-border); font-size: 0.92em; }
.fact-row .tags { color: var(--mo-ink-muted); font-size: 0.8em; margin-left: 8px; }
.doc-row { padding: 8px 0; border-bottom: 1px solid var(--mo-border); font-size: 0.92em; }
input, select, textarea { padding: 8px; border-radius: 6px; border: 1px solid var(--mo-border); background: var(--mo-surface); color: var(--mo-ink); }
button { padding: 8px 16px; border-radius: 6px; border: none; color: white; cursor: pointer; }
button:hover { opacity: 0.92; }
.inline-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }