/* SYCU Social Review: base + shell + shared components (Hubs Studio look; tokens in tokens.css). No color-mix(): all
   mixes are precomputed (WebKit dark-mode crash). One accent (Grow green); unread = Volunteers teal, never red. */
html.lk-studio { --hdr: 64px; --stripe-h: 4px; --shell: 1360px; --gut: 24px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; min-height: 100dvh; background: var(--canvas); color: var(--ink); font: 500 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.sheet-open { overflow: hidden; }
::selection { background: #BFE478; color: #1F2328; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.ic { width: 18px; height: 18px; flex: none; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.024em; }
h2 { font-size: 18px; font-weight: 800; }
h3 { font-size: 15px; font-weight: 750; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--acc-ring); outline-offset: 2px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: 10px; z-index: 100; background: var(--sf); color: var(--ink); padding: 10px 14px; border-radius: 12px; box-shadow: var(--e2); font-weight: 700; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.skip:focus { clip-path: none; width: auto; height: auto; overflow: visible; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink-3); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.boot-wait { min-height: 60vh; display: grid; place-items: center; }
.wm-dark { display: none; }
html[data-mode="dark"] .wm-light { display: none; }
html[data-mode="dark"] .wm-dark { display: inline-block; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--sf); box-shadow: 0 1px 0 var(--hair); }
.hdr-stripe { height: var(--stripe-h); background: var(--stripe); }
.hdr-in { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); height: var(--hdr); display: flex; align-items: center; gap: 18px; min-width: 0; }
html, body { overflow-x: clip; }
.sr-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.sr-logo .wm { height: 27px; width: auto; }
.sr-logo .wm-light, html[data-mode="dark"] .sr-logo .wm-dark { display: block; }
.sr-logo .wm-dark, html[data-mode="dark"] .sr-logo .wm-light { display: none; }
.sr-logo .rule { width: 2px; height: 28px; border-radius: 1px; background: var(--line-2); }
.sr-logo .word { font-weight: 750; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.sr-logo .w-short { display: none; }
.hdr-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.hdr-nav a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: 14px; white-space: nowrap; transition: background .15s, color .15s; }
.hdr-nav a svg { width: 18px; height: 18px; }
.hdr-nav a:hover { background: var(--bg); color: var(--ink); }
.hdr-nav a[aria-current="page"] { background: var(--sel-bg); color: var(--sel-ink); }
html[data-mode="dark"] .hdr-nav a[aria-current="page"] { background: #434A50; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.hdr-nav a .cnt { margin-left: 2px; }
.hdr-nav a[aria-current="page"] .cnt { background: #E5F6F8; color: #1D616C; box-shadow: none; }
.hdr-util { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ibtn { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.ibtn:hover { background: var(--bg); color: var(--ink); }
.ibtn svg { width: 20px; height: 20px; }
.ibtn.sm { width: 34px; height: 34px; border-radius: 8px; }
.ibtn.sm svg { width: 18px; height: 18px; }
.ibtn .cnt { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%; background: var(--unread); color: transparent; font-size: 0; line-height: 0; overflow: hidden; box-shadow: 0 0 0 2px var(--sf); }
.hdr-inbox { display: none; }
.hdr-burger { display: none; }
.av-btn { display: inline-flex; align-items: center; gap: 3px; height: 42px; padding: 0 8px 0 4px; border: 0; background: none; border-radius: 12px; cursor: pointer; color: var(--ink-3); transition: background .15s; }
.av-btn:hover, .av-btn[aria-expanded="true"] { background: var(--bg); }
.av-caret { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.av-btn[aria-expanded="true"] .av-caret { transform: rotate(180deg); }
.av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--lead-soft); color: var(--ink-2); font-weight: 800; font-size: 13px; letter-spacing: .01em; }
.av-me { background: #434A50; color: #FFFFFF; }
.av.sm { width: 28px; height: 28px; font-size: 11.5px; }
.av.bot { background: var(--sycu-soft); color: var(--sycu-ink); }
.pop-wrap { position: relative; }
.pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 250px; background: var(--sf); border-radius: 18px; box-shadow: var(--e3); padding: 8px; animation: popIn .18s var(--ease); transform-origin: top right; }
@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.pop hr { border: 0; height: 1px; background: var(--hair); margin: 6px 4px; }
.acct-id { padding: 10px 12px 8px; display: grid; gap: 2px; }
.acct-id b { font-size: 15px; font-weight: 750; }
.acct-id small { color: var(--ink-3); font-size: 13px; word-break: break-all; }
.acct-id .tag { justify-self: start; margin-top: 6px; }
.mm-row { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 0; border-radius: 11px; background: none; color: var(--ink); font-weight: 600; font-size: 14.5px; cursor: pointer; text-align: left; }
.mm-row:hover { background: var(--bg); }
.mm-row svg { width: 18px; height: 18px; color: var(--ink-3); }

/* phone sheet */
.sheet { position: fixed; z-index: 48; top: calc(var(--hdr) + var(--stripe-h)); left: 0; right: 0; bottom: 0; background: var(--sf); overflow-y: auto; overscroll-behavior: contain; box-shadow: inset 0 1px 0 var(--hair); }
.sheet-in { max-width: 640px; margin: 0 auto; padding: 16px var(--gut) calc(40px + env(safe-area-inset-bottom)); }
.sheet-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sheet-main a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 80px; padding: 10px 6px; border-radius: 14px; background: var(--bg); color: var(--ink); text-decoration: none; font-weight: 650; font-size: 14px; }
.sheet-main a[aria-current="page"] { background: #434A50; color: #FFFFFF; }
.sheet-main svg { width: 21px; height: 21px; }
.sheet-main .cnt { position: absolute; top: 8px; right: 10px; }
.sheet-h { margin: 24px 4px 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.sheet-acct { display: flex; align-items: center; gap: 12px; padding: 4px 4px 10px; }
.sheet-acct b { display: block; font-weight: 750; }
.sheet-acct small { display: block; color: var(--ink-3); font-size: 13px; word-break: break-all; }
.sheet-links { list-style: none; margin: 0; padding: 0; }
.sheet-links button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border: 0; border-radius: 12px; background: none; font-weight: 650; cursor: pointer; text-align: left; }
.sheet-links button:hover { background: var(--bg); }
.sheet-links svg { width: 19px; height: 19px; color: var(--ink-3); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; border-radius: 10px; font-weight: 650; font-size: 14.5px; letter-spacing: -.005em; padding: 11px 18px; line-height: 1.2; min-height: 44px; transition: background .15s, box-shadow .15s, transform .15s, color .15s; }
.btn svg { width: 18px; height: 18px; }
.btn-sm { padding: 8px 13px; font-size: 13.5px; border-radius: 9px; min-height: 36px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-block { width: 100%; }
.btn-acc { background: var(--acc); color: var(--acc-on); box-shadow: inset 0 0 0 1px var(--acc-edge), 0 1px 2px var(--shd); }
.btn-acc:hover { background: var(--acc-hover); transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--acc-edge), 0 6px 14px -6px var(--acc-glow), 0 1px 2px var(--shd); }
.btn-acc:active { transform: none; }
.btn-ghost { background: var(--sf); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px var(--shd); }
.btn-ghost:hover { background: var(--bg); }
.btn-dark { background: var(--sel-bg); color: var(--sel-ink); }
.btn-dark:hover { background: var(--btn-dark-hover); }
html[data-mode="dark"] .btn-dark { background: #434A50; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
html[data-mode="dark"] .btn-dark:hover { background: #495057; }
.btn-quiet { background: none; color: var(--ink-2); }
.btn-quiet:hover { background: var(--bg); color: var(--ink); }
.btn-warn { background: var(--sf); color: var(--disc-ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px var(--shd); }
.btn-warn:hover { background: var(--disc-soft); }
.btn-stop { background: var(--sf); color: var(--teach-ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px var(--shd); }
.btn-stop:hover { background: var(--teach-soft); }
.btn-quiet.btn-stop, .ctx .btn-stop { background: none; box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn[aria-busy="true"] { cursor: progress; }
.lbl { display: block; font-weight: 650; font-size: 13.5px; color: var(--ink-2); margin: 0 0 6px; }
.inp, .ta, .sel { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--r-ctl); background: var(--sf); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; font-size: 15px; transition: box-shadow .15s; }
.ta { min-height: 92px; resize: vertical; line-height: 1.5; display: block; }
.sel { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6873' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; }
html[data-mode="dark"] .sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BAC0C5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.inp:hover, .ta:hover, .sel:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.inp:focus, .ta:focus, .sel:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--acc-ring), 0 0 0 3px var(--acc-ring-soft); }
.inp::placeholder, .ta::placeholder { color: var(--ph); opacity: 1; }
.inp[aria-invalid="true"], .ta[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--teach-ink), 0 0 0 3px rgba(232,78,78,.18); }
.inp.sm, .sel.sm { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.sel.sm { padding-right: 30px; }
.seg { display: inline-flex; border-radius: 10px; padding: 3px; gap: 2px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.seg button:hover { background: var(--seg-hover); color: var(--ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--sf); color: var(--ink); box-shadow: 0 0 0 1px var(--hair-2), 0 1px 2px var(--shd); }
.seg button .n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 700; }
.chk { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 0; accent-color: #6D941E; cursor: pointer; flex: none; }
.tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; min-height: 22px; padding: 0 8px; font-weight: 650; font-size: 12px; white-space: nowrap; background: var(--sf); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.tag svg { width: 13px; height: 13px; }
.tag.plain { background: none; }
.tag.dark { background: var(--sel-bg); color: var(--sel-ink); box-shadow: none; }
html[data-mode="dark"] .tag.dark { background: #E4E7EB; color: #1F2328; }
.cnt { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--unread-soft); color: var(--unread-ink); box-shadow: inset 0 0 0 1px rgba(29,97,108,.16); font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.dot-new { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--unread); flex: none; }
/* status pills: tinted strategy-area tones; unread never uses these */
.st { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.t-lead { background: var(--lead-soft); color: var(--ink-2); }
.t-env { background: var(--env-soft); color: var(--env-ink); }
.t-disc { background: var(--disc-soft); color: var(--disc-ink); }
.t-acc { background: var(--acc-soft); color: var(--acc-ink); }
.t-games { background: var(--games-soft); color: var(--games-ink); }
.t-char { background: #434A50; color: #FFFFFF; }
.t-teach { background: var(--teach-soft); color: var(--teach-ink); }
.t-evt { background: var(--evt-soft); color: var(--evt-ink); }
.t-fam { background: var(--fam-soft); color: var(--fam-ink); }
.t-vol { background: var(--vol-soft); color: var(--vol-ink); }
html[data-mode="light"] .t-acc { box-shadow: inset 0 0 0 1px rgba(109,148,30,.28); }
.card { background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); }
.panel { background: var(--sf); border-radius: var(--r-panel); box-shadow: var(--e1); }
.page { max-width: var(--shell); margin: 0 auto; padding: 26px var(--gut) 72px; }
.page-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-hd p { color: var(--ink-3); margin-top: 4px; }
.empty { padding: 34px 24px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.empty h1, .empty h2 { font-size: 19px; }
.empty p { color: var(--ink-3); max-width: 46ch; }
.empty .em-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc-ink); }
.empty .em-ico svg { width: 26px; height: 26px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 120; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 14px; background: #23272B; color: #FFFFFF; font-weight: 600; font-size: 14.5px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); transition: opacity .2s, transform .25s var(--ease); }
html[data-mode="dark"] .toast { background: #434A50; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 30px -10px rgba(0,0,0,.6); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.bad { box-shadow: inset 4px 0 0 #F19191, 0 14px 30px -10px rgba(0,0,0,.45); }
.toast button { flex: none; border: 0; background: rgba(255,255,255,.14); color: #FFFFFF; font-weight: 800; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
body.has-actbar .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* ---------- sign in ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px 16px; }
.auth-card { position: relative; width: min(420px, calc(100vw - 32px)); background: var(--sf); border-radius: 22px; box-shadow: var(--e2); padding: 34px 30px 28px; overflow: hidden; }
.auth-stripe { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--stripe); }
.auth-wm { height: 32px; width: auto; margin-bottom: 18px; }
.auth-wm.wm-light, html[data-mode="dark"] .auth-wm.wm-dark { display: block; }
.auth-wm.wm-dark, html[data-mode="dark"] .auth-wm.wm-light { display: none; }
.auth h1 { font-size: 24px; }
.auth-lede { color: var(--ink-3); margin: 6px 0 20px; }
.auth-form { display: grid; gap: 10px; }
.auth-form .lbl { margin: 0; }
.auth-msg { margin: -4px 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--disc-soft); color: var(--disc-ink); font-weight: 600; font-size: 14px; }
.auth-sent { padding: 10px 12px; border-radius: 10px; background: var(--vol-soft); color: var(--vol-ink); font-weight: 600; font-size: 14px; }
.inp-code { font-size: 24px; letter-spacing: .3em; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.auth-foot { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13.5px; }
.auth-foot svg { width: 15px; height: 15px; }
.mode-mini { position: absolute; top: 18px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--ink-3); cursor: pointer; overflow: hidden; }
.mode-mini:hover { background: var(--bg); color: var(--ink); }
.mode-mini .mi { position: absolute; inset: 0; margin: auto; width: 19px; height: 19px; transition: transform .38s var(--ease), opacity .2s ease; }
html:not([data-mode="dark"]) .mode-mini .mi-sun { opacity: 0; transform: rotate(-80deg) scale(.4); }
html[data-mode="dark"] .mode-mini .mi-moon { opacity: 0; transform: rotate(80deg) scale(.4); }

@media (max-width: 1080px) {
  .hdr-nav a span:not(.cnt) { display: none; }
  .hdr-nav a { padding: 0 11px; }
}
@media (max-width: 860px) {
  html.lk-studio { --gut: 16px; --hdr: 58px; }
  .hdr-nav, .hdr-acct { display: none; }
  .hdr-burger, .hdr-inbox { display: inline-grid; }
  .hdr-in { gap: 10px; }
  .sr-logo .wm { height: 22px; }
  .sr-logo .rule { height: 22px; }
  .sr-logo .word { font-size: 15px; }
  h1 { font-size: 22px; }
  .page { padding-top: 18px; }
}
@media (max-width: 480px) {
  .hdr-util { gap: 2px; }
  .sr-logo { gap: 8px; min-width: 0; }
  .sr-logo .wm { height: 19px; }
  .sr-logo .rule { height: 20px; }
  .sr-logo .word { font-size: 14.5px; }
  .sr-logo .w-long { display: none; }
  .sr-logo .w-short { display: inline; }
  .auth-card { padding: 30px 22px 24px; }
}
@media (max-width: 340px) { .sr-logo .rule, .sr-logo .word { display: none; } }