/* Insight Outpatient - Treatment Plan Tracker
   Dark "liquid glass" theme. Deep ocean blues from The Insight Program's
   palette (#259ED7 sky / #2A3779 navy), animated flowing background,
   frosted glass surfaces. Mobile-first, built for Add-to-Home-Screen. */

:root {
  --bg0: #0b1430;
  --bg1: #13275c;
  --cyan: #4ec9ff;
  --blue: #2f8fe8;
  --ink: #eef5fd;
  --muted: #94aacb;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-2: rgba(255, 255, 255, 0.11);
  --line: rgba(255, 255, 255, 0.13);
  --amber: #ffce7a;
  --violet: #c9bcff;
  --red: #ff8080;
  --red-deep: #e25555;
  --green: #3ddc84;
  --radius: 20px;
  --radius-sm: 14px;
  --grad: linear-gradient(135deg, #58d2ff, #2f8fe8 55%, #3d63e0);
  --glow: 0 6px 22px rgba(63, 170, 255, 0.35);
  --tabbar-h: 66px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Tell the browser we're a dark app so native widgets (select dropdowns,
   date pickers, scrollbars) render dark instead of white-on-white. */
:root { color-scheme: dark; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: linear-gradient(165deg, #0c1636 0%, #14295f 45%, #0d1d4b 75%, #0a1330 100%) fixed;
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* ---- liquid background: two glowing blobs drifting slowly ---- */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 65vmax; height: 65vmax;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
body::before {
  top: -28vmax; right: -20vmax;
  background: radial-gradient(circle at 50% 50%, rgba(78, 201, 255, 0.34), rgba(78, 201, 255, 0.06) 55%, transparent 70%);
  animation: drift1 26s ease-in-out infinite alternate;
}
body::after {
  bottom: -30vmax; left: -22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(97, 108, 255, 0.30), rgba(97, 108, 255, 0.05) 55%, transparent 70%);
  animation: drift2 32s ease-in-out infinite alternate;
}
@keyframes drift1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-9vmax, 7vmax) scale(1.15); }
  100% { transform: translate(4vmax, 13vmax) scale(0.95); }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(10vmax, -6vmax) scale(1.12); }
  100% { transform: translate(2vmax, -12vmax) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

.hidden { display: none !important; }

#app {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px
           calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 26px);
}

.boot { text-align: center; padding: 40vh 0; color: var(--muted); }

/* subtle entrance for views */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card, .thread-row, .scan-zone, .empty, .pagehead { animation: rise .35s cubic-bezier(.22,1,.36,1) both; }

/* ---------- header ---------- */
.pagehead { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 16px; gap: 10px; }
.pagehead h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.pagehead .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ---------- buttons & inputs (big touch targets) ---------- */
button, .btn {
  font: inherit; border: none; cursor: pointer;
  border-radius: var(--radius);
  min-height: 48px;
  padding: 12px 18px;
  font-weight: 700; font-size: 16px;
  background: var(--grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--glow);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), opacity .15s, box-shadow .2s;
  touch-action: manipulation;
}
button:active { transform: scale(.955); box-shadow: 0 3px 10px rgba(63, 170, 255, 0.28); }
button:disabled { opacity: .45; }
.btn-block { width: 100%; }
.btn-ghost {
  background: var(--glass-2); color: var(--cyan);
  border: 1px solid rgba(78, 201, 255, 0.4); box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-quiet { background: var(--glass-2); color: var(--ink); font-weight: 600; box-shadow: none; border: 1px solid var(--line); }
.btn-danger { background: rgba(255, 128, 128, 0.12); color: var(--red); border: 1px solid rgba(255, 128, 128, 0.35); box-shadow: none; }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; border-radius: 13px; }

input[type=text], input[type=password], textarea, select {
  font: inherit; width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(9, 18, 44, 0.55); color: var(--ink);
  font-size: 16px; /* prevents iOS zoom-on-focus */
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: rgba(148, 170, 203, 0.75); }
select { background: #16224d; }
select option { background: #16224d; color: var(--ink); }
input[type=date] { color-scheme: dark; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
textarea { resize: vertical; min-height: 70px; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--cyan);
  background: rgba(9, 18, 44, 0.75);
  box-shadow: 0 0 0 3.5px rgba(78, 201, 255, 0.22);
}

label.fieldlabel { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- auth ---------- */
.auth-wrap { max-width: 420px; margin: 0 auto; padding-top: 5vh; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo .mark {
  width: 84px; height: 84px; border-radius: 26px; margin: 0 auto 14px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 42px; font-weight: 900;
  box-shadow: 0 12px 36px rgba(63, 170, 255, .45);
}
.auth-logo h1 { font-size: 26px; letter-spacing: -.02em; color: #fff; }
.auth-logo p { color: var(--muted); font-size: 14px; margin-top: 4px; }

.card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
  box-shadow: 0 8px 32px rgba(4, 10, 30, 0.35);
  margin-bottom: 14px;
}

.seg { display: flex; background: rgba(9, 18, 44, 0.5); border-radius: var(--radius-sm); padding: 4px; gap: 4px; border: 1px solid var(--line); }
.seg button {
  flex: 1; min-height: 46px; background: transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 700; padding: 8px 4px; border-radius: 11px;
  box-shadow: none;
}
.seg button.on { background: var(--grad); color: #fff; box-shadow: 0 3px 12px rgba(63,170,255,.35); }

.hint { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 10px; }
.hint b { color: var(--ink); }
.error-box { background: rgba(226, 85, 85, 0.16); border: 1px solid rgba(255,128,128,.3); color: var(--red); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; margin-top: 12px; }
.ok-box { background: rgba(78, 201, 255, 0.12); border: 1px solid rgba(78, 201, 255, 0.3); color: var(--cyan); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; margin-top: 12px; line-height: 1.5; }
.linkline { text-align: center; margin-top: 16px; font-size: 15px; color: var(--muted); }
.linkline a { color: var(--cyan); font-weight: 700; text-decoration: none; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 3.5px 9px; border-radius: 99px; letter-spacing: .03em; vertical-align: middle; }
.badge.OG { background: rgba(150, 130, 255, 0.16); color: var(--violet); border: 1px solid rgba(150, 130, 255, 0.3); }
.badge.YG { background: rgba(255, 190, 100, 0.14); color: var(--amber); border: 1px solid rgba(255, 190, 100, 0.3); }
.badge.COUNSELOR { background: rgba(78, 201, 255, 0.14); color: var(--cyan); border: 1px solid rgba(78, 201, 255, 0.32); }
.badge.YOU { background: var(--glass-2); color: var(--muted); border: 1px solid var(--line); }
/* Director wears the same gold as Admin - it's the other role that carries
   authority, and it should read that way at a glance. */
.badge.ADMIN, .badge.DIRECTOR {
  background: rgba(255, 200, 64, 0.14); color: #ffc840;
  border: 1px solid rgba(255, 200, 64, 0.45);
  box-shadow: 0 0 8px rgba(255, 200, 64, 0.25);
}

/* Outpatient's own tag. Sits BESIDE the OG/YG tag, never instead of it. */
.badge.OP { background: rgba(61, 220, 132, 0.14); color: var(--green); border: 1px solid rgba(61, 220, 132, 0.32); }

/* Special-role marks that attach to a name (steering wheel, coffee cup).
   Drawn as inline SVG so they stay sharp at any size and take their colour
   from here rather than depending on an emoji font being installed. */
.sp-icon { display: inline-block; vertical-align: -3px; line-height: 0; }
.sp-icon svg { width: 100%; height: 100%; display: block; }
.sp-steering { color: var(--cyan); filter: drop-shadow(0 0 3px rgba(78, 201, 255, 0.45)); }
.sp-outpatient { color: var(--green); filter: drop-shadow(0 0 3px rgba(61, 220, 132, 0.45)); }

/* Counselor identifier: monkey's fist knot (The Insight Program's logo mark) */
.cicon { display: inline-block; vertical-align: -3px; object-fit: contain; }

/* Sobriety milestone knots: bronze 30 days / silver 6 months / gold 1 year */
.knot-bronze { filter: drop-shadow(0 0 3px rgba(193, 122, 65, 0.55)); }
.knot-silver { filter: drop-shadow(0 0 3px rgba(203, 213, 225, 0.55)); }
.knot-gold   { filter: drop-shadow(0 0 4px rgba(255, 200, 64, 0.65)); }

/* Sobriety tab */
.sober-hero { padding: 22px 16px; }
.sober-hero img { display: block; margin: 0 auto 8px; }
.sober-hero-label { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: .01em; }
/* Sobriety totals: one row per unit, each showing the whole elapsed time
   expressed in that unit. Stacked rather than tiled because the seconds
   count runs to seven digits and won't fit in a narrow tile. */
.sober-list { padding: 2px 18px; }
.sober-row {
  display: flex; align-items: baseline; justify-content: center; gap: 9px;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
}
.sober-row:last-child { border-bottom: none; }
.sober-row b {
  font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sober-row span { font-size: 15px; color: var(--muted); font-weight: 600; }
/* fixed-width digits so ticking numbers don't shift their row */
.stat b { font-variant-numeric: tabular-nums; }

/* ---------- plan cards ---------- */
.plan-card { padding: 0; overflow: hidden; }
.plan-head { padding: 14px 16px 10px; display: flex; align-items: center; gap: 11px; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--grad);
  color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
  box-shadow: 0 4px 14px rgba(63, 170, 255, .35);
}
.plan-who { flex: 1; min-width: 0; }
.plan-who .who-name { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: #fff; }
.plan-who .who-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

.progress { height: 9px; background: rgba(255, 255, 255, 0.09); border-radius: 99px; overflow: hidden; margin: 0 16px 4px; }
.progress > div { height: 100%; background: var(--grad); border-radius: 99px; transition: width .5s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 12px rgba(78, 201, 255, 0.55); }
.progress-label { font-size: 12px; color: var(--muted); padding: 4px 16px 8px; }

.items { list-style: none; }
.item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.item .tick {
  flex: none; width: 30px; height: 30px; margin-top: 1px;
  border: 2px solid rgba(78, 201, 255, 0.45); border-radius: 10px;
  background: rgba(9, 18, 44, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: transparent; padding: 0; min-height: 0; box-shadow: none;
  transition: background .18s, border-color .18s, transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.item.done .tick { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 0 14px rgba(78, 201, 255, 0.5); }
.item .tick:active { transform: scale(.85); }
.item.readonly .tick { pointer-events: none; }
.item-main { flex: 1; min-width: 0; }
.item-text { font-size: 15.5px; line-height: 1.45; word-wrap: break-word; }
.item.done .item-text { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(148,170,203,.5); }
.item-note { font-size: 13.5px; color: #bcd2ec; margin-top: 5px; padding: 8px 11px; background: rgba(78, 201, 255, 0.09); border-left: 2.5px solid rgba(78, 201, 255, 0.45); border-radius: 8px; white-space: pre-wrap; }
.item-comment {
  font-size: 13px; color: #bcd2ec; margin-top: 5px; padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05); border-left: 2.5px solid rgba(148, 170, 203, 0.4);
  border-radius: 8px; word-wrap: break-word;
}
.item-comment b { color: var(--cyan); font-weight: 700; }
.item-cbtn {
  flex: none; min-height: 0; width: 34px; height: 34px; padding: 0; margin-top: 0;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; box-shadow: none; opacity: .8;
}
.item-actions { display: flex; gap: 16px; margin-top: 6px; }
.item-actions button { background: none; color: var(--cyan); font-size: 13px; font-weight: 700; padding: 4px 0; min-height: 0; box-shadow: none; }

.note-edit textarea { margin-top: 6px; }
.note-edit .row { display: flex; gap: 8px; margin-top: 8px; }

/* ---------- comments ---------- */
.comments { border-top: 1px solid rgba(255,255,255,.07); background: rgba(6, 12, 32, 0.35); padding: 12px 16px; }
.comments h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 9px; }
.comment { display: flex; gap: 9px; margin-bottom: 10px; }
.comment .cavatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: rgba(78, 201, 255, 0.14); border: 1px solid rgba(78, 201, 255, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--cyan);
}
.comment-body { background: var(--glass-2); border: 1px solid var(--line); border-radius: 5px 16px 16px 16px; padding: 8px 12px; font-size: 14px; flex: 1; }
.comment-body .cname { font-weight: 800; font-size: 12.5px; color: var(--cyan); margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.comment-body .ctime { font-size: 11px; color: var(--muted); margin-top: 3px; }
.comment-form { display: flex; gap: 8px; margin-top: 4px; }
.comment-form input { min-height: 44px; }
.comment-form button { min-height: 44px; padding: 0 16px; flex: none; }

.card-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.07); display: flex; gap: 10px; }

/* ---------- scan / new plan ---------- */
.scan-zone {
  border: 1.5px dashed rgba(78, 201, 255, 0.4); border-radius: var(--radius);
  background: var(--glass); padding: 36px 18px; text-align: center; color: var(--muted);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.scan-zone .big { font-size: 46px; margin-bottom: 8px; }
.scan-zone b { color: #fff; font-size: 17px; }
.scan-zone p { font-size: 14px; margin: 8px 0 18px; line-height: 1.5; }
.preview-img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
.edit-item-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.edit-item-row input { flex: 1; }
.edit-item-row .del { flex: none; width: 44px; min-height: 44px; padding: 0; background: rgba(226, 85, 85, 0.14); color: var(--red); font-size: 18px; border-radius: var(--radius-sm); box-shadow: none; border: 1px solid rgba(255,128,128,.25); }
.spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
.spin.dark { border-color: rgba(78,201,255,.25); border-top-color: var(--cyan); }
@keyframes spin { to { transform: rotate(360deg); } }
.center { text-align: center; }

.ocr-progress { height: 7px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; margin-top: 12px; }
.ocr-progress > div { height: 100%; background: var(--grad); border-radius: 99px; transition: width .25s ease; box-shadow: 0 0 10px rgba(78,201,255,.5); }

/* ---------- messages ---------- */
.thread-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  padding: 13px 14px; margin-bottom: 10px; color: var(--ink); font: inherit; text-align: left;
  box-shadow: 0 4px 18px rgba(4, 10, 30, 0.25);
}
.thread-row:active { transform: scale(.985); }
.thread-row .tmeta { flex: 1; min-width: 0; }
.thread-row .tname { font-weight: 800; font-size: 15px; display: flex; gap: 7px; align-items: center; color: #fff; }
.thread-row .tlast { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.unread-dot { min-width: 22px; height: 22px; border-radius: 99px; background: var(--red-deep); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 0 10px rgba(226,85,85,.5); }

.chat { display: flex; flex-direction: column; gap: 8px; padding-bottom: 76px; }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 19px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.bubble.mine { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 4px 14px rgba(63,170,255,.3); }
.bubble.theirs { align-self: flex-start; background: var(--glass-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bubble .btime { display: block; font-size: 10.5px; opacity: .7; margin-top: 3px; }
.chatbar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 20, 48, 0.72);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: 8px 14px; display: flex; gap: 8px;
  max-width: 640px; margin: 0 auto;
}
.chatbar input { flex: 1; }
.chatbar button { flex: none; }
/* Photo button sits left of the text field, sized to match the send button. */
.chatbar .photo-btn { font-size: 19px; padding: 0 12px; line-height: 1; }

/* A photo inside a bubble. Capped so a tall portrait shot can't push the whole
   conversation off screen. */
.chat-photo {
  display: block; max-width: 100%; max-height: 320px; width: auto;
  border-radius: 13px; margin-bottom: 4px; cursor: zoom-in; background: var(--glass);
}
/* Shown in place of a photo KV has already aged out. */
.photo-gone {
  font-size: 13px; opacity: .75; padding: 14px 16px; text-align: center;
  border: 1px dashed var(--line); border-radius: 13px; margin-bottom: 4px;
}

/* Search box above the thread list */
.searchbar { margin-bottom: 12px; }
.searchbar input { width: 100%; }

/* Manage tab: who currently holds each special role */
.sp-group { margin-top: 15px; }
.sp-group-head { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sp-holder {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink);
}
.sp-holder:last-child { border-bottom: none; }

/* ---------- archive ---------- */
.arch-meta { flex: 1; min-width: 0; }
.arch-title { font-weight: 800; font-size: 15px; color: #fff; }
.arch-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pill-done { background: rgba(61, 220, 132, 0.14); color: var(--green); border: 1px solid rgba(61, 220, 132, 0.32); font-size: 11px; font-weight: 800; padding: 3.5px 9px; border-radius: 99px; flex: none; }
.pill-replaced { background: var(--glass-2); color: var(--muted); border: 1px solid var(--line); font-size: 11px; font-weight: 800; padding: 3.5px 9px; border-radius: 99px; flex: none; }

/* ---------- bottom tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: rgba(10, 18, 44, 0.72);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.tabbar button {
  flex: 1; max-width: 110px; background: none; color: var(--muted);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  font-size: 10.5px; font-weight: 700; min-height: 52px; padding: 4px 2px; position: relative;
  box-shadow: none; border-radius: var(--radius-sm);
  transition: color .15s;
}
.tabbar button .ticon { font-size: 22px; line-height: 1; }
.tabbar button.on { color: var(--cyan); }
.tabbar button.on::after {
  content: ""; position: absolute; bottom: 0; width: 22px; height: 3.5px;
  border-radius: 99px; background: var(--grad); box-shadow: 0 0 10px rgba(78,201,255,.6);
}
.tabbar .tbadge {
  position: absolute; top: 0; right: calc(50% - 22px);
  min-width: 17px; height: 17px; border-radius: 99px; background: var(--red-deep); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  background: rgba(20, 34, 74, 0.9); color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(78, 201, 255, 0.35);
  padding: 11px 18px; border-radius: 99px;
  font-size: 14px; font-weight: 600; z-index: 100; max-width: 90vw; text-align: center;
  box-shadow: 0 8px 28px rgba(4, 10, 30, .55), 0 0 18px rgba(78, 201, 255, .25);
}

/* ---------- admin: manage ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: 12px 10px; text-align: center;
}
.stat b { display: block; font-size: 24px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.35; font-weight: 600; }
.cardtitle { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.weekline { font-size: 14px; color: var(--ink); padding: 4px 0; }
.healthline { font-size: 14px; color: var(--ink); padding: 4px 0; display: flex; gap: 7px; align-items: baseline; }
.healthline span { color: var(--muted); font-size: 13px; }
.mgmt-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); }
.mgmt-row:first-of-type { border-top: none; }
.mgmt-meta { flex: 1; min-width: 0; }
.mgmt-name { font-weight: 700; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mgmt-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.mgmt-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.mgmt-actions select {
  min-height: 38px; width: auto; padding: 6px 8px; font-size: 13px; font-weight: 700;
  background: #16224d; color: var(--ink); border: 1px solid var(--line); border-radius: 11px;
}
.mgmt-actions button { min-height: 38px; width: 40px; padding: 0; font-size: 15px; }
@media (max-width: 420px) {
  .mgmt-row { flex-wrap: wrap; }
  .mgmt-actions { width: 100%; justify-content: flex-end; }
}

.empty { text-align: center; color: var(--muted); padding: 48px 20px; font-size: 15px; line-height: 1.55; }
.empty .big { font-size: 44px; margin-bottom: 10px; }
.empty b { color: var(--ink); }

@media (min-width: 641px) {
  .tabbar { max-width: 640px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 18px 18px 0 0; }
}