/* ==========================================================================
   CONNECT SRMAP — Faculty Ranking · light theme (white + sky blue)
   Instagram-style layout: flat full-width feed on phones, compact type.
   ========================================================================== */
:root {
  --bg: #ffffff;
  --wash: #f5f9fc;
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-900: #0c4a6e;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e5eaf0;
  --line-soft: #eff3f7;
  /* one calm palette: sky blue + neutrals (stars stay amber) */
  --att: #0284c7; --att-bg: #f1f6fa;
  --cor: #0369a1; --cor-bg: #f1f6fa;
  --tea: #0ea5e9; --tea-bg: #f1f6fa;
  --star: #f59e0b;
  --heart: #ef4444;
  --ok: #15803d;
  --bad: #dc2626;
  --ring: conic-gradient(from 210deg, #38bdf8, #0284c7, #6366f1, #38bdf8);
  --display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --top: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
html.ov-open, html.ov-open body { overflow: hidden; }
body { font-family: var(--body); background: var(--bg); color: var(--ink); line-height: 1.5; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; text-align: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--sky-400); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 760px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--top); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand > img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text b { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; max-width: 52vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: 10.5px; color: var(--sky-600); font-weight: 700; letter-spacing: .02em; }
.top-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.top-actions > span { display: contents; }
.icon-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); font-size: 18px; flex-shrink: 0; transition: background .15s; }
.icon-btn:hover { background: var(--wash); }
.icon-btn.sm { width: 32px; height: 32px; font-size: 14px; color: var(--ink-2); }
.icon-btn .dot { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--heart); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; line-height: 1; }
.icon-btn .dot.green { background: #16a34a; }
.me-chip { display: block; margin-left: 4px; }
.me-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--sky-400); }
.btn-login { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--sky-600); color: #fff; font-weight: 700; font-size: 13px; margin-left: 4px; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, var(--sky-50) 0%, #fff 100%); }
.hero-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: end; padding-top: 36px; padding-bottom: 26px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--sky-700); margin-bottom: 12px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: live 1.8s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4.4vw, 46px); line-height: 1.04; letter-spacing: -.035em; color: var(--sky-900); max-width: 16ch; }
.hero-sub { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; max-width: 50ch; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.hero-stats > div { display: flex; flex-direction: column; padding: 4px 0; }
.hero-stats dd { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hero-stats dt { font-size: 12px; color: var(--muted); font-weight: 600; }
.hero-stats .mine dd { color: var(--sky-600); }

/* ---------- Controls ---------- */
.controls { position: sticky; top: calc(var(--top) + env(safe-area-inset-top, 0px)); z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); padding: 10px 0 0; }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-box { position: relative; flex: 1; display: flex; align-items: center; height: 40px; border-radius: 10px; background: #eff3f7; padding: 0 12px; gap: 8px; transition: box-shadow .15s, background .15s; }
.search-box:focus-within { background: #fff; box-shadow: 0 0 0 1.5px var(--sky-400); }
.search-box > i { color: var(--muted); font-size: 14px; }
.search-box input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14.5px; min-width: 0; height: 100%; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear { width: 22px; height: 22px; border-radius: 50%; background: #cbd5e1; color: #fff; display: grid; place-items: center; font-size: 11px; }
.filter-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #eff3f7; color: var(--ink); font-size: 16px; flex-shrink: 0; }
.filter-btn:hover { background: var(--sky-100); color: var(--sky-700); }
.filter-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--sky-600); border: 2px solid #eff3f7; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; background: #eff3f7; font-size: 13px; font-weight: 700; color: var(--ink); transition: background .15s, color .15s; }
.chip i { font-size: 12px; color: var(--sky-600); }
.chip:hover { background: var(--sky-100); }
.chip.on { background: var(--ink); color: #fff; }
.chip.on i { color: var(--sky-300); }



/* ---------- Confirm popup (remove rating) ---------- */
.cf-scrim { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(15, 23, 42, .4); opacity: 0; transition: opacity .2s; }
.cf-scrim.show { opacity: 1; }
.cf-card { box-sizing: border-box; width: 100%; max-width: 330px; padding: 20px 18px 16px; background: #fff; border-radius: 24px; text-align: center; font-family: var(--body); box-shadow: 0 24px 60px -16px rgba(15, 23, 42, .5); transform: translateY(28px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.2, .9, .25, 1), opacity .2s; }
.cf-scrim.show .cf-card { transform: none; opacity: 1; }
.cf-icon { width: 46px; height: 46px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; font-size: 19px; color: #0284c7; background: #e0f2fe; }
.cf-danger .cf-icon { color: #dc2626; background: #fee2e2; }
.cf-title { margin-bottom: 6px; font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.25; color: #0f172a; }
.cf-text { margin-bottom: 18px; font-size: 14px; line-height: 1.55; color: #475569; overflow-wrap: anywhere; }
.cf-text b { color: #0284c7; font-weight: 700; }
.cf-btns { display: flex; gap: 10px; }
.cf-btns button { flex: 1; height: 44px; padding: 0 10px; border: 0; border-radius: 999px; font: 700 14px/1 var(--body); cursor: pointer; }
.cf-no { background: #f1f5f9; color: #0f172a; }
.cf-yes { background: #0284c7; color: #fff; }
.cf-danger .cf-yes { background: #dc2626; }
@media (min-width: 640px) { .cf-scrim { align-items: center; } }

/* ---------- Rating submitted (sky blue) ---------- */
.rs { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 14px 18px; text-align: center; font-family: var(--body); }
.rs-tick { width: 88px; height: 88px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #e0f2fe 0, #f0f9ff 70%); }
.rs-tick svg { width: 64px; height: 64px; }
.rs-tick circle { fill: none; stroke: #0ea5e9; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: rsc .6s ease forwards; }
.rs-tick path { fill: none; stroke: #0284c7; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: rsc .35s .5s ease forwards; }
@keyframes rsc { to { stroke-dashoffset: 0; } }
.rs-title { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #0369a1; }
.rs-msg { max-width: 30ch; font-size: 14px; line-height: 1.5; color: #475569; }
.rs-msg b { color: #0284c7; font-weight: 700; }
.rs-pill { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 10px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #0369a1; background: #e0f2fe; border: 1px solid #bae6fd; }
.rs-btn { height: 42px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; font: 700 14px/1 var(--body); color: #fff; cursor: pointer; background: linear-gradient(135deg, #0ea5e9, #0284c7); box-shadow: 0 10px 22px -10px rgba(2, 132, 199, .7); }
.rs-timer { width: 120px; height: 3px; margin-top: 10px; border-radius: 3px; background: #e0f2fe; overflow: hidden; }
.rs-timer i { display: block; height: 100%; background: #0ea5e9; transform-origin: left; animation: rst 3s linear forwards; }
@keyframes rst { from { transform: scaleX(1); } to { transform: scaleX(0); } }


/* ---------- Suggestions ---------- */
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(12, 74, 110, .3); padding: 6px; max-height: 60vh; overflow-y: auto; z-index: 5; }
.sg-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; text-align: left; }
.sg-item:hover, .sg-item.on { background: var(--wash); }
.sg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sg-txt b { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-txt b mark { background: var(--sky-100); color: var(--sky-900); border-radius: 3px; }
.sg-txt small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-item em { font-style: normal; font-weight: 800; font-size: 12.5px; color: var(--sky-700); }
.sg-empty { padding: 12px; color: var(--muted); font-size: 13.5px; }
.sg-all { width: 100%; text-align: left; padding: 11px 10px; margin-top: 2px; border-top: 1px solid var(--line-soft); color: var(--sky-700); font-weight: 700; font-size: 13px; display: flex; gap: 8px; align-items: center; }

/* ---------- Avatars & story rings ---------- */
.av { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--sky-100), #f8fbff); color: var(--sky-700); overflow: hidden; }
.av b { font-family: var(--display); font-weight: 800; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; background: #fff; }
.av-sm { width: 40px; height: 40px; } .av-sm b { font-size: 16px; }
.av-md { width: 44px; height: 44px; } .av-md b { font-size: 18px; }
.av-post { width: 40px; height: 40px; } .av-post b { font-size: 16px; }
.av-story { width: 62px; height: 62px; } .av-story b { font-size: 24px; }
.av-ig { width: 86px; height: 86px; } .av-ig b { font-size: 34px; }
.story-ring { display: inline-grid; place-items: center; padding: 2.5px; border-radius: 50%; background: var(--ring); flex-shrink: 0; }
.story-ring > .av { box-shadow: 0 0 0 2.5px #fff; }
.story-ring.dim { background: var(--line); }
.story-ring.big { padding: 3px; }
.story-ring.big > .av { box-shadow: 0 0 0 3px #fff; }

/* ---------- Blocks ---------- */
.block { margin-top: 18px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.block-head h2 { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.block-tools { display: flex; align-items: center; gap: 6px; }
.hint { font-size: 12px; color: var(--muted); font-weight: 600; }
.share-banner { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sky-50); border: 1px solid var(--sky-200); color: var(--sky-900); font-size: 13px; }
.share-banner > span { flex: 1; min-width: 0; }

/* ---------- Stories (most rated) ---------- */
.stories { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.stories::-webkit-scrollbar { display: none; }
.story { position: relative; flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; scroll-snap-align: start; }
.story-rank { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 800; color: #fff; background: var(--sky-600); padding: 0 6px; border-radius: 6px; border: 2px solid #fff; line-height: 15px; }
.story-name { font-size: 11.5px; font-weight: 600; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.story-score { font-size: 11px; font-weight: 800; color: var(--ink-2); }
.story-score i { color: var(--star); font-size: 9px; }

/* ---------- Feed posts ---------- */
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.post { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; }
.post-av { flex-shrink: 0; border-radius: 50%; }
.post-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.post-id b { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-id small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-rank { font-family: var(--display); font-weight: 800; font-size: 12px; color: var(--sky-700); background: var(--sky-50); border: 1px solid var(--sky-100); padding: 1px 8px; border-radius: 7px; }
.post-body { cursor: pointer; padding: 4px 12px 0; }
.post-score { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.post-score .big { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.post-score .lbl { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--sky-50); color: var(--sky-700); margin-left: auto; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tile { border-radius: 10px; padding: 8px 9px; display: flex; flex-direction: column; gap: 3px; }
.tile span:first-child { font-size: 10.5px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tile b { font-family: var(--display); font-size: 17px; font-weight: 800; line-height: 1.1; }
.tile.m-att { background: var(--att-bg); } .tile.m-att b, .tile.m-att i { color: var(--att); }
.tile.m-cor { background: var(--cor-bg); } .tile.m-cor b, .tile.m-cor i { color: var(--cor); }
.tile.m-tea { background: var(--tea-bg); } .tile.m-tea b, .tile.m-tea i { color: var(--tea); }
.tile .bar { height: 4px; background: rgba(255, 255, 255, .7); }
.tiles-empty { padding: 14px 12px; border-radius: 10px; background: var(--wash); color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.post-actions { display: flex; align-items: center; gap: 2px; padding: 6px 6px 0; }
.pa { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; color: var(--ink); transition: transform .15s; }
.pa:hover { color: var(--ink-2); }
.pa.on { color: var(--heart); }
.pa.pop, .fav-btn.pop { animation: pop .3s ease; }
@keyframes pop { 40% { transform: scale(1.25); } }
.sp { flex: 1; }
.post-meta { flex: 1; padding: 0 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 13px; }
.soc { display: inline-flex; align-items: center; gap: 7px; text-align: left; font-size: 13px; color: var(--ink); padding: 1px 0; }
.soc b { font-weight: 800; }
.soc-heart { color: var(--heart); }
.stack { display: inline-flex; flex-shrink: 0; }
.stack img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; margin-left: -7px; background: var(--wash); }
.stack img:first-child { margin-left: 0; }
.post-link { color: var(--muted); font-size: 13px; padding: 1px 0; }
.post-rate { margin: 10px 12px 12px; height: 38px; border-radius: 9px; background: var(--sky-600); color: #fff; font-weight: 800; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; transition: background .15s; }
.post-rate:hover { background: var(--sky-700); }
.post-rate.rated { background: #eff3f7; color: var(--ink); }
.post-rate.rated:hover { background: var(--sky-100); }
.post-rate small { font-weight: 700; color: var(--muted); }

.bar { display: block; height: 6px; border-radius: 99px; background: #e8eef4; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--sky-500); transition: width .4s; }
.m-att .bar i { background: var(--att); } .m-cor .bar i { background: var(--cor); } .m-tea .bar i { background: var(--tea); }
.stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; }
.stars::before { content: '★★★★★'; color: #dfe5ec; letter-spacing: 1px; }
.stars i { position: absolute; inset: 0; overflow: hidden; width: calc(var(--v, 0) / 5 * 100%); }
.stars i::before { content: '★★★★★'; color: var(--star); letter-spacing: 1px; }
.lv-excellent { background: #ecfdf5 !important; color: var(--ok) !important; }
.lv-needs-improvement { background: #fef2f2 !important; color: var(--bad) !important; }

/* ---------- Buttons ---------- */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; background: var(--sky-600); color: #fff; font-weight: 800; font-size: 14px; transition: background .15s; }
.btn-primary:hover { background: var(--sky-700); }
.btn-primary.sm, .btn-plain.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 13.5px; }
.btn-outline:hover { background: var(--wash); }
.btn-plain { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 10px; font-weight: 700; color: var(--sky-700); font-size: 13.5px; background: transparent; }
.btn-plain:hover { background: var(--wash); }
.w-full { display: flex; width: 100%; }
.pill { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--sky-100); color: var(--sky-700); font-size: 11px; font-weight: 800; }



.rv-link { color: #0ea5e9; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.rv-link:hover { color: #0284c7; }


.rated-ok { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 12px 20px; }
.rated-ok h3 { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.rated-ok p { color: var(--ink-2); font-size: 13.5px; max-width: 32ch; margin-bottom: 0; }
.ok-mark { width: 78px; height: 78px; }
.ok-how { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; }
.ok-how.pub { color: #15803d; }
.ok-how.anon { color: #7c3aed; }

/* ---------- Bottom confirm sheet (small) ---------- */
.sheet-scrim { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(15, 23, 42, .35); opacity: 0; transition: opacity .2s; }
.sheet-scrim.show { opacity: 1; }
.sheet { width: 100%; max-width: 340px; padding: 16px 16px 14px; background: #fff; border-radius: 22px; box-shadow: 0 18px 50px -12px rgba(15, 23, 42, .45); transform: translateY(24px); opacity: 0; transition: transform .28s cubic-bezier(.2, .9, .25, 1), opacity .2s; }
.sheet-scrim.show .sheet { transform: none; opacity: 1; }
.sheet-top { display: flex; align-items: center; gap: 10px; }
.sheet-ic { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; font-size: 15px; color: #fff; background: linear-gradient(135deg, #4285f4, #9b72cb, #d96570); }
.sheet.danger .sheet-ic { background: linear-gradient(135deg, #f97316, #dc2626); }
.sheet h4 { font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.sheet p { margin: 8px 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.sheet-btns { display: flex; gap: 8px; }
.sheet-btns button { flex: 1; height: 40px; border-radius: 999px; font-size: 13.5px; font-weight: 800; }
.sheet-no { background: #f1f5f9; color: var(--ink); }
.sheet-yes { background: var(--sky-600); color: #fff; }
.sheet.danger .sheet-yes { background: var(--bad); }
@media (min-width: 640px) { .sheet-scrim { align-items: center; } }
/* ---------- Loading / empty ---------- */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; color: var(--muted); font-weight: 600; font-size: 13px; }
.loading.big { padding: 90px 0; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--sky-100); border-top-color: var(--sky-600); animation: spin .7s linear infinite; display: inline-block; }
.spinner.light { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; width: 16px; height: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-note { text-align: center; padding: 30px 16px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.empty-note > i { display: block; font-size: 24px; color: var(--sky-300); margin-bottom: 8px; }
.empty-note .btn-primary { margin-top: 12px; }
.list-end-note { text-align: center; color: var(--muted); font-size: 12.5px; padding: 18px 0 4px; }
#sentinel { height: 2px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 48px; border-top: 1px solid var(--line); background: var(--wash); padding: 30px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.thanks { max-width: 720px; }
.thanks-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--sky-700); background: #fff; border: 1px solid var(--sky-100); padding: 3px 9px; border-radius: 999px; }
.thanks h3 { font-family: var(--display); font-size: 16px; margin: 8px 0 4px; letter-spacing: -.01em; }
.thanks p { color: var(--ink-2); font-size: 13px; max-width: 70ch; }
.thanks a, .foot-credit a { color: var(--sky-700); font-weight: 800; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.foot-brand { display: flex; align-items: center; gap: 9px; }
.foot-brand img { width: 30px; height: 30px; border-radius: 8px; }
.foot-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.foot-brand b { font-family: var(--display); font-weight: 800; font-size: 14px; }
.foot-brand small { color: var(--sky-600); font-weight: 700; font-size: 11px; }
.foot-credit { font-size: 13px; color: var(--ink-2); }
.foot-fine { margin-top: 10px; font-size: 11.5px; color: var(--muted); max-width: 80ch; }

/* ---------- Layers ---------- */
.layer { position: fixed; inset: 0; z-index: 90; }
.layer-bg { position: absolute; inset: 0; background: rgba(15, 23, 42, .4); opacity: 0; transition: opacity .25s; }
.layer.open .layer-bg { opacity: 1; }
.layer-panel { position: absolute; background: #fff; display: flex; flex-direction: column; outline: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .25s; overscroll-behavior: contain; }

/* drawer: side panel on desktop */
.layer-drawer .layer-panel { top: 0; right: 0; bottom: 0; width: min(460px, 100%); transform: translateX(104%); box-shadow: -20px 0 50px -20px rgba(12, 74, 110, .35); }
.layer-drawer.open .layer-panel { transform: none; }
/* sheet: centered card on desktop */
.layer-sheet .layer-panel { left: 50%; top: 50%; width: min(440px, calc(100% - 32px)); max-height: min(640px, 86vh); border-radius: 16px; transform: translate(-50%, -46%); opacity: 0; box-shadow: 0 30px 70px -20px rgba(12, 74, 110, .45); overflow: hidden; }
.layer-sheet.open .layer-panel { transform: translate(-50%, -50%); opacity: 1; }
/* modal */
.layer-modal { z-index: 110; }
.layer-modal .layer-panel { left: 50%; top: 50%; width: min(380px, calc(100% - 32px)); border-radius: 18px; transform: translate(-50%, -46%) scale(.98); opacity: 0; box-shadow: 0 30px 80px -20px rgba(12, 74, 110, .45); }
.layer-modal.open .layer-panel { transform: translate(-50%, -50%); opacity: 1; }
/* lightbox */
.layer-lightbox { z-index: 120; }
.layer-lightbox .layer-bg { background: rgba(0, 0, 0, .94); }
.layer-lightbox .layer-panel { inset: 0; background: #000; opacity: 0; transform: scale(.96); }
.layer-lightbox.open .layer-panel { opacity: 1; transform: none; }
.lb-stage { flex: 1; display: grid; place-items: center; padding: calc(56px + env(safe-area-inset-top, 0px)) 12px 12px; min-height: 0; }
.lb-stage img { max-width: min(560px, 100%); max-height: 100%; object-fit: contain; border-radius: 6px; }
.lb-x { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 22px; background: rgba(255, 255, 255, .12); z-index: 2; }
.lb-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); color: #fff; }
.lb-cap div { display: flex; flex-direction: column; min-width: 0; }
.lb-cap b { font-size: 15px; }
.lb-cap small { color: rgba(255, 255, 255, .7); font-size: 12.5px; }

/* drawer internals */
.grab { display: none; }
.dr-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; background: #fff; border-bottom: 1px solid var(--line-soft); }
.dr-back { display: none; width: 36px; height: 36px; border-radius: 50%; place-items: center; font-size: 18px; flex-shrink: 0; }
.dr-av { border-radius: 50%; flex-shrink: 0; }
.dr-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dr-id b { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-id small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); font-size: 18px; flex-shrink: 0; }
.dr-x:hover, .dr-back:hover { background: var(--wash); }
.dr-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.dr-tab { height: 44px; font-weight: 700; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dr-tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.dr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.dr-pane { padding: 14px 16px 20px; }
.dr-pane[data-pane="reviews"] { padding: 0; }
.dr-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--sky-50); border-top: 1px solid var(--sky-100); font-size: 13px; flex-shrink: 0; }
.dr-foot > i { color: var(--sky-600); }
.dr-foot span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-foot b { color: var(--sky-700); }
.dr-foot em { font-style: normal; font-weight: 800; color: var(--sky-700); white-space: nowrap; font-size: 12.5px; }

/* sheet internals */
.sheet-head { position: relative; display: flex; flex-direction: column; align-items: center; padding: 14px 50px 12px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; }
.sheet-head b { font-weight: 800; font-size: 15px; }
.sheet-head small { color: var(--muted); font-size: 12px; }
.sheet-head .dr-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; }
.sheet-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-soft); flex-shrink: 0; }
.sheet-foot .btn-primary { flex: 1; }

/* people list */
.ppl-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.ppl-row:hover { background: var(--wash); }
.ppl-av img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--wash); }
.ppl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ppl-txt b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppl-txt small { color: var(--muted); font-size: 12px; }
.ppl-foot { padding: 8px 16px 12px; }

/* filter sheet */
.fs-title { font-size: 12px; font-weight: 800; color: var(--muted); padding: 12px 16px 6px; text-transform: none; }
.fs-sorts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; }
.fs-opt { height: 34px; padding: 0 12px; border-radius: 8px; background: #eff3f7; font-size: 13px; font-weight: 700; }
.fs-opt.on { background: var(--ink); color: #fff; }
.fs-search { display: flex; align-items: center; gap: 8px; margin: 2px 16px 6px; height: 38px; padding: 0 12px; border-radius: 10px; background: #eff3f7; color: var(--muted); }
.fs-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--ink); min-width: 0; }
.fs-depts { display: flex; flex-direction: column; }
.fs-dept { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13.5px; text-align: left; }
.fs-dept span { flex: 1; }
.fs-dept small { color: var(--muted); font-size: 12px; }
.fs-dept i { color: var(--sky-600); visibility: hidden; }
.fs-dept.on { font-weight: 800; }
.fs-dept.on i { visibility: visible; }
.fs-dept:hover { background: var(--wash); }

/* panels */
.pl-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-50); color: var(--sky-600); font-size: 16px; flex-shrink: 0; }
.pl-list { display: flex; flex-direction: column; padding: 6px 0 14px; }
.pl-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.pl-row:hover { background: var(--wash); }
.pl-av { border-radius: 50%; flex-shrink: 0; }
.pl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.pl-txt b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-txt small.added, .pl-txt small.yours { color: var(--sky-700); font-weight: 700; }
.pl-score { font-weight: 800; font-size: 13px; white-space: nowrap; }
.pl-score i { color: var(--star); font-size: 11px; }
.sync-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--sky-50); margin: 4px 16px 8px; }
.sync-card > i { color: var(--sky-600); margin-top: 3px; }
.sync-card div { display: flex; flex-direction: column; font-size: 13px; }
.sync-card small { color: var(--muted); }
.sync-logs { display: flex; flex-direction: column; gap: 4px; margin: 0 16px 10px; }
.sync-log { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 10px; border-radius: 8px; background: var(--wash); color: var(--ink-2); }
.sync-log.st-failed { background: #fef2f2; color: var(--bad); }
.sync-log.st-running { background: #fffbeb; }

/* ---------- Rate form ---------- */
.rf-title { font-family: var(--display); font-size: 19px; font-weight: 800; text-align: center; letter-spacing: -.015em; }
.rf-sub { text-align: center; color: var(--muted); font-size: 12.5px; margin: 2px 0 6px; }
.rf-note { text-align: center; font-size: 12.5px; color: var(--ok); background: #f0fdf4; border-radius: 10px; padding: 7px 10px; margin: 8px 0; }
.rf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.rf-row.err { background: #fef2f2; border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.rf-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rf-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.m-att .rf-ic { background: var(--att-bg); color: var(--att); }
.m-cor .rf-ic { background: var(--cor-bg); color: var(--cor); }
.m-tea .rf-ic { background: var(--tea-bg); color: var(--tea); }
.rf-label > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rf-label b { font-size: 14px; }
.rf-label small { font-size: 11px; color: var(--muted); }
.rf-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.rf-stars { display: flex; }
.rf-stars .st { width: 32px; height: 32px; display: grid; place-items: center; font-size: 22px; color: #d9e0e8; border-radius: 8px; transition: color .1s; }
.rf-stars .st.on { color: var(--star); }
.rf-stars .st.pop { animation: pop .25s ease; }
.rf-word { font-size: 11px; font-weight: 700; color: var(--muted); padding-right: 4px; }
@property --an-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes anSpin { to { --an-ang: 360deg; } }

.anon-card { position: relative; display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; transition: background .15s, box-shadow .2s; }
.anon-card::before {            /* the rotating colour ring */
    content: ''; position: absolute; inset: -1px; border-radius: 13px; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--an-ang), #38bdf8, #6366f1, #ec4899, #f59e0b, #22c55e, #38bdf8);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: anSpin 4s linear infinite; opacity: .75;
}


/* ---------- success: anonymous / public badge ---------- */
.ok-who { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .01em; animation: okPop .45s cubic-bezier(.2, .9, .3, 1.3) both; }
.ok-who.anon { background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899); box-shadow: 0 8px 20px -8px rgba(139, 92, 246, .7); }
.ok-who.pub  { background: linear-gradient(135deg, #0ea5e9, #0284c7, #22c55e); box-shadow: 0 8px 20px -8px rgba(2, 132, 199, .7); }
.rated-ok p.ok-note { font-size: 12.5px; color: var(--muted); margin: -2px 0 6px; }
@keyframes okPop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }


.anon-card:has(input:checked) { border-color: transparent; background: var(--sky-50); box-shadow: 0 8px 24px -10px rgba(99, 102, 241, .55); }
.anon-card:has(input:checked)::before { animation-duration: 2s; opacity: 1; }   /* faster + brighter when ticked */
@media (prefers-reduced-motion: reduce) { .anon-card::before { animation: none; } }
.anon-card input { position: absolute; opacity: 0; pointer-events: none; }
.anon-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #cbd5e1; display: grid; place-items: center; color: transparent; font-size: 11px; flex-shrink: 0; transition: all .15s; }
.anon-card input:checked + .anon-check { background: var(--sky-600); border-color: var(--sky-600); color: #fff; }
.anon-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--sky-100); color: var(--sky-700); flex-shrink: 0; }
.anon-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.anon-txt b { font-size: 13.5px; }
.anon-txt small { font-size: 11.5px; color: var(--muted); }
.anon-shield { color: var(--ok); }
.rf-text { position: relative; }
.rf-text textarea { width: 100%; min-height: 92px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 14px; outline: 0; background: #fff; }
.rf-text textarea:focus { border-color: var(--sky-400); box-shadow: 0 0 0 3px var(--sky-100); }
.rf-count { position: absolute; right: 10px; bottom: 8px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.btn-submit { width: 100%; height: 46px; margin-top: 12px; border-radius: 11px; background: var(--sky-600); color: #fff; font-weight: 800; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.btn-submit:hover { background: var(--sky-700); }
.btn-submit:disabled { opacity: .75; cursor: progress; }
.rf-delete { width: 100%; margin-top: 6px; padding: 9px; color: var(--bad); font-weight: 700; font-size: 13px; border-radius: 10px; text-align: center; }
.rf-delete:hover { background: #fef2f2; }
.rf-guest { text-align: center; margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.rate-wrap { max-width: 520px; margin: 0 auto; padding: 4px 0 10px; }

/* ---------- Reviews ---------- */
.verdict { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.verdict-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.verdict h3 { font-size: 15px; font-weight: 800; }
.verdict small { color: var(--muted); font-size: 12px; }
.verdict-score { font-family: var(--display); font-weight: 800; font-size: 20px; white-space: nowrap; }
.verdict-score i { color: var(--star); font-size: 15px; }
.verdict-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.verdict-boxes div { border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; }
.verdict-boxes span { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.verdict-boxes b { font-family: var(--display); font-size: 17px; }
.verdict-boxes .m-att { background: var(--att-bg); color: var(--att); } .verdict-boxes .m-cor { background: var(--cor-bg); color: var(--cor); } .verdict-boxes .m-tea { background: var(--tea-bg); color: var(--tea); }
.rv-list { padding: 0 16px; }
.rv-month { padding: 14px 0 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.rv { display: flex; gap: 10px; padding: 10px 0; }
.rv.mine { background: var(--sky-50); margin: 0 -16px; padding: 10px 16px; }
.rv-av { position: relative; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; }
.rv-av img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.rv-av.anon { background: #eff3f7; color: var(--ink-2); font-size: 15px; }
.rv-main { flex: 1; min-width: 0; }
.rv-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
.rv-top b { font-size: 13.5px; font-weight: 800; }
.rv-tick { color: var(--sky-500); font-size: 11px; }
.rv-top em { font-style: normal; font-size: 10px; font-weight: 800; background: var(--sky-600); color: #fff; padding: 1px 6px; border-radius: 5px; }
.rv-top small { color: var(--muted); font-size: 12px; }
.rv-score { margin-left: auto; font-weight: 800; font-size: 13px; white-space: nowrap; }
.rv-score i { color: var(--star); font-size: 11px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rv-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.rv-chip.m-att { background: var(--att-bg); color: var(--att); } .rv-chip.m-cor { background: var(--cor-bg); color: var(--cor); } .rv-chip.m-tea { background: var(--tea-bg); color: var(--tea); }
.rv-text { margin-top: 6px; font-size: 13.5px; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.rv-foot { padding: 12px 16px 16px; }
.lock-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--sky-50); border: 1px solid var(--sky-200); }
.lock-card > i { color: var(--sky-600); font-size: 18px; }
.lock-card div { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.lock-card small { color: var(--muted); }

/* ---------- Login modal ---------- */
.modal-card { padding: 24px 20px 14px; text-align: center; }
.modal-ic { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--sky-50); color: var(--sky-600); border: 2px solid var(--ink); }
.modal-card h3 { font-size: 18px; font-weight: 800; }
.modal-card p { color: var(--muted); font-size: 13.5px; margin: 6px 0 18px; }
.modal-card .btn-plain { margin-top: 4px; color: var(--muted); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, calc(100% + 60px)); visibility: hidden; z-index: 130; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; box-shadow: 0 14px 40px -10px rgba(15, 23, 42, .5); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), visibility .3s; text-align: center; }
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast.err { background: var(--bad); }

/* ---------- Profile (Instagram-style) ---------- */
.ig-head { padding-top: 18px; padding-bottom: 6px; }
.ig-top { display: flex; align-items: center; gap: 22px; }
.ig-avatar { border-radius: 50%; flex-shrink: 0; }
.ig-stats { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.ig-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; }
.ig-stat b { font-family: var(--display); font-size: 19px; font-weight: 800; }
.ig-stat span { font-size: 12px; color: var(--ink-2); }
button.ig-stat:hover b { color: var(--sky-700); }
.ig-bio { margin-top: 12px; font-size: 13.5px; line-height: 1.45; }
.ig-bio h1 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 5px; }
.ig-bio .verified { color: var(--sky-500); font-size: 13px; }
.ig-des { color: var(--sky-700); font-weight: 700; }
.ig-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--sky-900); font-weight: 600; font-size: 13px; }
.ig-actions { display: flex; gap: 6px; margin-top: 12px; }
.ig-btn { flex: 1; height: 34px; border-radius: 8px; background: #eff3f7; font-weight: 700; font-size: 13px; display: grid; place-items: center; text-align: center; }
.ig-btn:hover { background: var(--sky-100); }
.ig-btn.primary { background: var(--sky-600); color: #fff; }
.ig-btn.primary:hover { background: var(--sky-700); }
.ig-btn.icon { flex: 0 0 40px; font-size: 16px; }
.ig-btn.fav-btn.on { color: var(--heart); }
.ig-social { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ig-social:empty { display: none; }
.highlights { display: flex; gap: 16px; overflow-x: auto; padding: 16px 0 6px; scrollbar-width: none; }
.highlights::-webkit-scrollbar { display: none; }
.hl { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; --c: var(--sky-500); }
.hl.m-att { --c: var(--att); } .hl.m-cor { --c: var(--cor); } .hl.m-tea { --c: var(--tea); } .hl.m-all { --c: var(--star); }
.hl-ring { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p, 0) * 1%), #e8eef4 0); transition: background .5s; }
.hl-in { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.hl-in i { color: var(--c); font-size: 12px; }
.hl-in b { font-family: var(--display); font-size: 16px; font-weight: 800; }
.hl-l { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.ig-tabs { position: sticky; top: calc(var(--top) + env(safe-area-inset-top, 0px)); z-index: 30; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); margin-top: 8px; }
.ig-tabs-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.p-tab { height: 46px; font-weight: 700; font-size: 12.5px; color: var(--muted); border-top: 1.5px solid transparent; margin-top: -1px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; letter-spacing: .01em; }
.p-tab i { font-size: 15px; }
.p-tab.on { color: var(--ink); border-top-color: var(--ink); }
.p-body { padding-top: 6px; padding-bottom: 20px; }
.p-pane { display: none; }
.p-pane.on { display: block; }
.flat-sec { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.sec-title { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.summary { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center; }
.sum-big { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.sum-num { font-family: var(--display); font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.sum-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.label-pill { margin-top: 3px; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--sky-50); color: var(--sky-700); }
.dist { display: flex; flex-direction: column; gap: 7px; }
.dist-row { display: grid; grid-template-columns: 30px 1fr 28px; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.dist-row i { color: var(--star); font-size: 10px; }
.dist-row .bar i { background: var(--star); }
.dist-row .n { text-align: right; color: var(--muted); }
.report { display: flex; gap: 12px; }
.report-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-50); color: var(--sky-600); flex-shrink: 0; }
.report h3 { font-size: 14px; font-weight: 800; }
.report p { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; max-width: 70ch; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tags:empty { display: none; }
.tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--sky-50); color: var(--sky-700); }
.tag.m-att { background: var(--att-bg); color: var(--att); } .tag.m-cor { background: var(--cor-bg); color: var(--cor); } .tag.m-tea { background: var(--tea-bg); color: var(--tea); }
.info-list { display: flex; flex-direction: column; }
.info-list div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 0; font-size: 13.5px; }
.info-list dt { color: var(--muted); }
.info-list dd { font-weight: 600; overflow-wrap: anywhere; }
.info-list a { color: var(--sky-700); }
.prose { font-size: 13.5px; color: var(--ink-2); max-width: 75ch; overflow-wrap: anywhere; }
details.sec summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
details.sec summary::-webkit-details-marker { display: none; }
details.sec summary i { color: var(--muted); font-size: 12px; transition: transform .2s; }
details.sec[open] summary i { transform: rotate(180deg); }
details.sec[open] summary { margin-bottom: 8px; }
.browse-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.browse-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-50); color: var(--sky-600); }
.browse-row > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.browse-row small { color: var(--muted); font-size: 12px; }
.browse-row > i { color: var(--muted); }
#reviewsMount .verdict, #reviewsMount .rv-list, #reviewsMount .rv-foot { padding-left: 0; padding-right: 0; }
#reviewsMount .rv.mine { margin: 0; padding: 10px; border-radius: 12px; }
.rate-nudge { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 160%); z-index: 50; width: min(520px, calc(100% - 20px)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px -14px rgba(12, 74, 110, .4); transition: transform .4s cubic-bezier(.2, .9, .3, 1.1); }
.rate-nudge.show { transform: translate(-50%, 0); }
.nudge-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fffbeb; color: var(--star); flex-shrink: 0; }
.rate-nudge > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-size: 13px; min-width: 0; line-height: 1.3; }
.rate-nudge small { color: var(--muted); font-size: 12px; }
.nudge-x { width: 30px; height: 30px; border-radius: 50%; color: var(--muted); display: grid; place-items: center; }
.notfound { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 30px; }
.notfound h1 { font-family: var(--display); font-size: 24px; }
.notfound p { color: var(--muted); max-width: 44ch; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 18px; }
  .hide-sm { display: none !important; }
}
@media (max-width: 680px) {
  .container { padding: 0 14px; }
  .hero-inner { padding-top: 18px; padding-bottom: 14px; gap: 14px; }
  .hero h1 { font-size: 25px; }
  .hero-sub { font-size: 13.5px; }
  .hero-stats { border-top: 1px solid var(--line-soft); padding-top: 10px; }
  .hero-stats dd { font-size: 18px; }
  .hero-stats dt { font-size: 11.5px; }
  .btn-login span { display: none; }
  .btn-login { width: 32px; padding: 0; justify-content: center; }
  .icon-btn { width: 36px; height: 36px; font-size: 17px; }
  .chips { padding: 8px 0; }

  /* Feed: flat, edge-to-edge posts — no boxes, no shadows */
  #listBlock .block-head, #mostRatedBlock .block-head { padding: 0; }
  .feed { grid-template-columns: 1fr; gap: 0; margin: 0 -14px; }
  .post { border: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .post-head { padding: 12px 14px 8px; }
  .post-body, .post-meta { padding-left: 14px; padding-right: 14px; }
  .post-actions { padding-left: 6px; padding-right: 6px; }
  .post-rate { margin: 10px 14px 14px; }
  .stories { margin: 0 -14px; padding: 2px 14px 10px; gap: 12px; }

  /* Popups: full page on phones, swipe down or back gesture to close */
  .layer-drawer .layer-panel { width: 100%; transform: translateY(100%); box-shadow: none; }
  .layer-drawer.open .layer-panel { transform: none; }
  .layer-drawer .dr-back { display: grid; }
  .layer-drawer .dr-x { display: none; }
  .layer-sheet .layer-panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; transform: translateY(100%); opacity: 1; }
  .layer-sheet.open .layer-panel { transform: none; }
  .layer-sheet .grab { display: block; width: 38px; height: 4px; border-radius: 4px; background: #cbd5e1; margin: -6px auto 8px; }
  .sheet-head { padding-top: 12px; }
  .dr-pane { padding: 12px 14px 18px; }

  .ig-top { gap: 14px; }
  .av-ig { width: 78px; height: 78px; }
  .ig-stat b { font-size: 16px; }
  .ig-stat span { font-size: 11.5px; }
  .p-tab span { display: none; }
  .p-tab i { font-size: 18px; }
  .summary { grid-template-columns: 110px 1fr; gap: 14px; }
  .sum-num { font-size: 38px; }
  .info-list div { grid-template-columns: 1fr; gap: 0; }
  .rf-label small { display: none; }
  .rf-stars .st { width: 30px; height: 30px; font-size: 21px; }
  .lb-stage img { max-width: 100%; }
}
@media (max-width: 370px) {
  .tile span:first-child i { display: none; }
  .rf-stars .st { width: 26px; font-size: 19px; }
  .ig-stats { grid-template-columns: repeat(2, 1fr); row-gap: 6px; }
}


/* ==========================================================================
   v3 additions
   ========================================================================== */
/* Scroll without visible scrollbars (whole page and every panel) */
html, body, .dr-body, .sheet-body, .suggest, .feed, .stories, .chips { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* default faculty / student icons are images, never letters */
.av img { object-position: center 18%; }
.tile b, .verdict-boxes b, .hl-in b { color: var(--ink) !important; }
.tile i, .hl-in i { color: var(--sky-600) !important; }
.rv-chip { background: #f1f6fa !important; color: var(--ink-2) !important; }
.rv-chip b { color: var(--ink); }
.tag.m-att, .tag.m-cor, .tag.m-tea { background: var(--sky-50); color: var(--sky-700); }

/* skeletons */
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, #eef2f6 25%, #f7f9fb 37%, #eef2f6 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-c { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sk-l { height: 12px; width: 62%; }
.sk-s { height: 10px; width: 40%; }
.sk-block { height: 78px; border-radius: 12px; }
.sk-btn { height: 38px; margin: 12px; border-radius: 9px; }
.skel-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.skel-post { pointer-events: none; }
.skel-post .post-head { padding-bottom: 12px; }
.skel-post .post-meta { padding-top: 12px; }

/* empty states */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 24px; }
.empty-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); font-size: 24px; color: var(--ink); margin-bottom: 6px; }
.empty b { font-size: 15px; font-weight: 800; }
.empty p { color: var(--muted); font-size: 13px; max-width: 34ch; }
.empty .btn-primary { margin-top: 8px; }

/* social lines */
.muted-soc { color: var(--muted); }
.muted-soc i { font-size: 14px; }
.soc-ok { color: var(--sky-600); }
.stack em { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; margin-left: -6px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 800; font-style: normal; border: 1.5px solid #fff; }
.post-link { display: inline-flex; align-items: center; gap: 6px; }
.post-link b { color: var(--ink); }
.post-link .live-dot { width: 6px; height: 6px; }

/* rating success */
.rf-privacy { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.rf-privacy i { color: var(--sky-600); }
.rated-ok { position: relative; display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 12px 14px 15px; border-radius: 16px; background: #f0fdf4; border: 1px solid #bbf7d0; text-align: left; overflow: hidden; animation: okIn .3s ease both; }
.rated-ok.anon { background: #f5f3ff; border-color: #ddd6fe; }
.ok-mark { width: 36px; height: 36px; flex-shrink: 0; }
.rated-ok .ok-mark circle, .rated-ok .ok-mark path { stroke: #16a34a; }
.rated-ok.anon .ok-mark circle, .rated-ok.anon .ok-mark path { stroke: #7c3aed; }
.ok-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ok-txt b { font-size: 14px; }
.ok-txt small { font-size: 12px; color: var(--muted); }
.ok-go { height: 32px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; font-weight: 800; }
.rated-ok .ok-timer { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 3px; margin: 0; border-radius: 0; background: transparent; }
.rated-ok .ok-timer i { background: #16a34a; }
.rated-ok.anon .ok-timer i { background: #7c3aed; }
@keyframes okIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


/* ---------- Bottom confirm sheet ---------- */
.sheet-scrim { position: fixed; inset: 0; z-index: 140; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px); opacity: 0; transition: opacity .2s; }
.sheet-scrim.show { opacity: 1; }
.sheet { width: 100%; max-width: 480px; padding: 10px 22px calc(22px + env(safe-area-inset-bottom, 0px)); background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px -20px rgba(15, 23, 42, .4); transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .25, 1); }
.sheet-scrim.show .sheet { transform: none; }
.sheet-grab { width: 36px; height: 4px; margin: 0 auto 18px; border-radius: 4px; background: #d5dbe3; }
.sheet-ic { width: 48px; height: 48px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 16px; font-size: 20px; color: #fff; background: linear-gradient(135deg, #4285f4, #9b72cb, #d96570); }
.sheet.danger .sheet-ic { background: linear-gradient(135deg, #f97316, #dc2626); }
.sheet h4 { margin-bottom: 6px; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.sheet p { margin-bottom: 20px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sheet-btns { display: flex; gap: 10px; }
.sheet-btns button { flex: 1; height: 48px; border-radius: 999px; font-size: 14.5px; font-weight: 800; }
.sheet-no { background: #f1f5f9; color: var(--ink); }
.sheet-yes { background: var(--sky-600); color: #fff; }
.sheet.danger .sheet-yes { background: var(--bad); }
@media (min-width: 640px) { .sheet-scrim { align-items: center; } .sheet { border-radius: 28px; transform: translateY(24px); opacity: 0; transition: transform .3s, opacity .3s; } .sheet-scrim.show .sheet { opacity: 1; } }
.ok-mark circle { fill: none; stroke: var(--sky-600); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: okc .6s ease forwards; }
.ok-mark path { fill: none; stroke: var(--sky-600); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: okp .35s .5s ease forwards; }
@keyframes okc { to { stroke-dashoffset: 0; } }
@keyframes okp { to { stroke-dashoffset: 0; } }
.ok-timer { width: 120px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px; }
.ok-timer i { display: block; height: 100%; width: 100%; background: var(--sky-600); transform-origin: left; animation: okt 3s linear forwards; }
@keyframes okt { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* feedback list: date headers + live arrivals */
.rv-day { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 6px; font-size: 12.5px; font-weight: 800; border-bottom: 1px solid var(--line-soft); margin-bottom: 2px; }
.rv-day small { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.rv.fresh { animation: fresh 2.4s ease; }
@keyframes fresh { 0% { background: var(--sky-100); } 100% { background: transparent; } }
.rv.mine.fresh { animation: none; box-shadow: inset 3px 0 0 var(--sky-600); }
.verdict small .live-dot { display: inline-block; width: 6px; height: 6px; vertical-align: 1px; margin-right: 2px; }

/* panels: date groups + rows open the profile page */
.pl-day { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.pl-day-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--wash); color: var(--sky-700); font-size: 12px; }
.pl-day span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.pl-day b { font-size: 13px; font-weight: 800; }
.pl-day small { font-size: 11.5px; color: var(--muted); }
a.pl-row { color: inherit; }
.pl-go { color: #cbd5e1; font-size: 11px; }


/* ==========================================================================
   v4: card buttons, anonymous box, overflow → ellipsis everywhere
   ========================================================================== */
.post-btns { display: flex; gap: 8px; margin: 10px 12px 12px; }
.post-btns .post-rate { flex: 1.25; margin: 0; min-width: 0; }
.post-fb { flex: 1; min-width: 0; height: 38px; border-radius: 9px; background: #eff3f7; color: var(--ink); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; }
.post-fb:hover { background: var(--sky-100); }
.post-fb b { font-weight: 800; color: var(--sky-700); }
.post-fb .live-dot { width: 6px; height: 6px; flex-shrink: 0; }
.post-rate span, .post-fb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.post-rate small { flex-shrink: 0; }
@media (max-width: 680px) { .post-btns { margin: 10px 14px 14px; } }
.tiles-empty { gap: 12px; padding: 12px; }
.te-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--ink); color: var(--ink); flex-shrink: 0; }
.tiles-empty > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tiles-empty b { color: var(--ink); font-size: 13.5px; }
.tiles-empty small { color: var(--muted); font-size: 12px; }

/* single-line text never overlaps: it ends with … */
.ell, .post-id b, .post-id small, .story-name, .sg-txt b, .sg-txt small, .dr-id b, .dr-id small,
.pl-txt b, .pl-txt small, .ppl-txt b, .ppl-txt small, .brand-text b, .brand-text span, .chip,
.soc > span:last-child, .post-link, .lb-cap b, .lb-cap small, .fs-dept span, .tile span:first-child,
.rv-top b, .dr-foot span, .sync-log span, .pl-day b, .pl-day small, .ig-btn, .ig-btn span,
.hl-l, .verdict-boxes span, .label-pill, .post-score .lbl, .hint, .block-head h2, .share-banner > span,
.foot-brand b, .row-top b, .row-sub, .kpi span, .adm-tab, .mini {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.soc { max-width: 100%; min-width: 0; }
.soc .stack { flex-shrink: 0; }
.ig-bio h1 { min-width: 0; }
.ig-bio h1, .ig-bio p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ig-btn { display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.rv-top { min-width: 0; }
.rv-top small, .rv-score { flex-shrink: 0; }
.rv-text, .row-text, .prose, .report p { overflow-wrap: anywhere; }
.anon-card { margin: 12px 0 0; }
.rf-text { margin-top: 12px; }
.post-id { overflow: hidden; }
.post-rank, .post-av { flex-shrink: 0; }
.ig-actions { flex-wrap: wrap; }
@media (max-width: 420px) {
  .ig-btn:not(.icon) { flex: 1 1 calc(50% - 3px); }
  .ig-btn.icon { flex: 1 1 0; }
}


/* ---------- Review Guard ---------- */
.rf-text textarea.rg-bad { border-color: var(--bad); box-shadow: 0 0 0 3px #fee2e2; }
.rf-text textarea.rg-warn { border-color: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.rg-box { margin-top: 10px; }
.rg { border-radius: 14px; padding: 12px; border: 1px solid var(--line); background: #fff; animation: rgIn .25s ease; }
.rg.block { background: #fef2f2; border-color: #fecaca; }
.rg.warn { background: #fffbeb; border-color: #fde68a; }
.rg.ok { background: #f0fdf4; border-color: #bbf7d0; }
@keyframes rgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rg-head { display: flex; gap: 10px; align-items: center; }
.rg-head b { display: block; font-size: 14px; line-height: 1.25; }
.rg-head span:not(.rg-ic) { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.rg-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--bad); }
.rg.warn .rg-ic { background: #f59e0b; }
.rg-msg { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #334155; }
.rg-msg.alt { font-size: 12.5px; color: #475569; border-left: 3px solid rgba(0, 0, 0, .12); padding-left: 8px; }
.rg-label { margin: 11px 0 5px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rg-label small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.rg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-chip { display: inline-flex; flex-direction: column; padding: 4px 9px; border-radius: 10px; background: #fff; border: 1px solid #fecaca; line-height: 1.2; }
.rg-chip.warn { border-color: #fde68a; }
.rg-chip s { font-weight: 800; font-size: 13px; color: var(--bad); text-decoration-thickness: 2px; }
.rg-chip.warn s { color: #b45309; }
.rg-chip small { font-size: 10px; color: var(--muted); font-weight: 700; }
.rg-preview { background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: auto; }
.rg-preview mark { padding: 0 3px; border-radius: 4px; font-weight: 700; }
.rg-preview mark.rg-block { background: #fecaca; color: #991b1b; }
.rg-preview mark.rg-warn { background: #fde68a; color: #92400e; }
.rg-exs { display: flex; flex-direction: column; gap: 6px; }
.rg-ex { text-align: left; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; border-radius: 10px; background: #fff; border: 1px solid #bbf7d0; color: #166534; font-weight: 600; }
.rg-ex:hover { background: #f0fdf4; }
.rg-tips { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; color: #475569; display: grid; gap: 4px; }
.rg-tips i { color: #f59e0b; margin-right: 4px; }
.rg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rg-btn { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.rg-btn.pri { background: var(--sky-600); border-color: var(--sky-600); color: #fff; }
.rg-btn.ghost { color: var(--muted); }

/* ---------- share sheet ---------- */
.sh-body { padding: 14px 16px 18px; }
.sh-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--wash); min-width: 0; }
.sh-list-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--sky-600); font-size: 18px; flex-shrink: 0; }
.sh-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.sh-meta b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-meta small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; margin: 18px 0 16px; }
.sh-grid .loading { grid-column: 1 / -1; }
.sh-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.sh-opt span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; color: #fff; transition: transform .15s; }
.sh-opt:hover .sh-ic { transform: translateY(-2px); }
.sh-ic.wa { background: #25d366; } .sh-ic.tg { background: #229ed9; } .sh-ic.x { background: #0f172a; } .sh-ic.li { background: #0a66c2; }
.sh-ic.em, .sh-ic.cp, .sh-ic.mo { background: #eff3f7; color: var(--ink); }
.sh-link { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 12px; }
.sh-link input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--ink-2); }

/* people list note + QR in share sheet */
.ppl-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 6px 0 4px; }
.sh-qr-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; height: 38px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--wash); }
.sh-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.sh-qr-box { width: 184px; height: 184px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; }
.sh-qr-box img, .sh-qr-box canvas { width: 168px !important; height: 168px !important; }
.sh-qr small { font-size: 11.5px; color: var(--muted); }

/* ==========================================================================
   v5 · Profile page — one clean palette (white + sky blue, stars amber)
   Overview · Feedback · Rate · About now share the same look.
   ========================================================================== */
.page-profile { --pf: var(--sky-600); --pf-soft: var(--sky-50); --pf-line: var(--sky-200); }

/* tabs: sky-blue active tab with an underline, same on all four */
.page-profile .ig-tabs { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-profile .p-tab { color: var(--muted); border-top: 0; margin-top: 0; border-bottom: 2.5px solid transparent; transition: color .15s, background .15s, border-color .15s; }
.page-profile .p-tab:hover { color: var(--sky-700); background: var(--sky-50); }
.page-profile .p-tab.on { color: var(--sky-700); border-bottom-color: var(--sky-600); background: var(--sky-50); }
.page-profile .p-tab.on i { color: var(--sky-600); }

/* highlight rings: all sky blue (no green / orange / purple mix) */
.page-profile .hl, .page-profile .hl.m-att, .page-profile .hl.m-cor, .page-profile .hl.m-tea, .page-profile .hl.m-all { --c: var(--sky-500); }
.page-profile .hl-ring { background: conic-gradient(var(--sky-500) calc(var(--p, 0) * 1%), var(--sky-100) 0); }
.page-profile .hl.m-all .hl-in i { color: var(--star) !important; }

/* every card / chip / tag / bar in the 4 tabs */
.page-profile .flat-sec { border-bottom: 1px solid var(--line); }
.page-profile .sec-title, .page-profile .report h3, .page-profile .verdict h3 { color: var(--ink); }
.page-profile .label-pill, .page-profile .tag, .page-profile .tag.m-att, .page-profile .tag.m-cor, .page-profile .tag.m-tea,
.page-profile .ig-chip { background: var(--sky-50); color: var(--sky-700); border: 1px solid var(--sky-100); }
.page-profile .ig-chip.like { background: #fff1f2; color: #be123c; border-color: #ffe4e6; }
.page-profile .report-ic, .page-profile .browse-ic { background: var(--sky-100); color: var(--sky-700); }
.page-profile .dist-row .bar { background: var(--sky-100); }
.page-profile .dist-row .bar i, .page-profile .m-att .bar i, .page-profile .m-cor .bar i, .page-profile .m-tea .bar i { background: var(--sky-500); }
.page-profile .dist-row > span:first-child i { color: var(--star); }
.page-profile .mf-card:hover, .page-profile .mf-card:focus-visible { border-color: var(--sky-300); }
.page-profile .mf-score { background: var(--sky-50); }
.page-profile .mf-score.new { background: var(--wash); }

/* Feedback tab */
.page-profile .verdict { background: var(--sky-50); border: 1px solid var(--sky-100); border-radius: 14px; margin-top: 12px; }
.page-profile .verdict-boxes div, .page-profile .verdict-boxes .m-att, .page-profile .verdict-boxes .m-cor, .page-profile .verdict-boxes .m-tea { background: #fff; color: var(--sky-700); border: 1px solid var(--sky-100); }
.page-profile .verdict-boxes b { color: var(--ink) !important; }
.page-profile .rv-chip, .page-profile .rv-chip.m-att, .page-profile .rv-chip.m-cor, .page-profile .rv-chip.m-tea { background: var(--sky-50) !important; color: var(--sky-700) !important; }
.page-profile .rv-chip b { color: var(--ink) !important; }
.page-profile .rv { border-bottom: 1px solid var(--line-soft); }
.page-profile .rv.mine { background: var(--sky-50); border: 1px solid var(--sky-100); }
.page-profile .rv-day { color: var(--sky-700); border-bottom-color: var(--sky-100); }
.page-profile .rv-link, .rv-link { color: #0ea5e9; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; }
.page-profile .rv-link:hover, .rv-link:hover { color: #0284c7; }
.page-profile .prose .rv-link { color: #0ea5e9; }

/* Rate tab */
.page-profile .rate-wrap { background: #fff; }
.page-profile .rf-ic, .page-profile .m-att .rf-ic, .page-profile .m-cor .rf-ic, .page-profile .m-tea .rf-ic { background: var(--sky-100); color: var(--sky-700); }
.page-profile .rf-stars .st.on, .page-profile .rf-stars .st:hover { color: var(--star); }

/* About tab */
.page-profile .info-list dt { color: var(--muted); }
.page-profile .info-list a { color: var(--sky-600); font-weight: 600; }
.page-profile details.sec summary { color: var(--ink); }
.page-profile details.sec[open] summary { color: var(--sky-700); }
.page-profile .empty-note { background: var(--sky-50); color: var(--sky-700); border: 1px dashed var(--sky-200); border-radius: 12px; padding: 14px; }