/* ==========================================================================
   R&B-Bird V2 — "Feather Pop" theme
   Design tokens + base layout + shared components.
   Change the palette/fonts here — every /v2 page reads from these variables.
   ========================================================================== */

/* ---- Fonts (self-hosted, thai+latin subsets) ---- */
@font-face{font-family:'Chonburi';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/v2/chonburi-400-thai.woff2') format('woff2');
  unicode-range:U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Chonburi';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/v2/chonburi-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F, U+2122;}

@font-face{font-family:'Mitr';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/v2/mitr-400-thai.woff2') format('woff2');
  unicode-range:U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Mitr';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/v2/mitr-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F, U+2122;}
@font-face{font-family:'Mitr';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/v2/mitr-500-thai.woff2') format('woff2');
  unicode-range:U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Mitr';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/v2/mitr-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F, U+2122;}
@font-face{font-family:'Mitr';font-style:normal;font-weight:600;font-display:swap;
  src:url('../../fonts/v2/mitr-600-thai.woff2') format('woff2');
  unicode-range:U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Mitr';font-style:normal;font-weight:600;font-display:swap;
  src:url('../../fonts/v2/mitr-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F, U+2122;}
@font-face{font-family:'Mitr';font-style:normal;font-weight:700;font-display:swap;
  src:url('../../fonts/v2/mitr-700-thai.woff2') format('woff2');
  unicode-range:U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Mitr';font-style:normal;font-weight:700;font-display:swap;
  src:url('../../fonts/v2/mitr-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F, U+2122;}

/* ---- Design tokens ---- */
:root{
  --canvas: #FEFBFF;
  --surface: #FFFFFF;
  --surface-2: #FBF2FF;
  --ink: #4A3768;
  --ink-soft: #8A7BA8;
  --ink-faint: #C1B3DC;
  --border: #F0E2FA;
  --border-soft: #F6ECFC;

  --accent: #A566FF;
  --accent-ink: #6A2FD9;
  --accent-soft: #F1E4FF;

  --pink: #FF63B0;
  --pink-ink: #C22B85;
  --pink-soft: #FFE3F1;

  --sky: #22C1F5;
  --sky-soft: #D7F5FE;
  --sage: #1FCB93;
  --sage-soft: #D6FAEC;
  --berry: #FF6685;
  --berry-soft: #FFE3E9;
  --sun: #FFB020;
  --sun-soft: #FFF1D6;

  --perch: #7B3FE0;
  --perch-2: #C15FE0;
  --perch-ink: #FFFFFF;
  --perch-ink-soft: #E9D4FA;
  --perch-border: #9758E8;

  --shadow-sm: 0 2px 6px rgba(165,102,255,.10), 0 1px 2px rgba(165,102,255,.08);
  --shadow-md: 0 12px 28px rgba(165,102,255,.16), 0 3px 8px rgba(165,102,255,.10);
  --shadow-lg: 0 20px 46px rgba(165,102,255,.22), 0 5px 14px rgba(165,102,255,.12);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  color-scheme: light;
}

/* NOTE: intentionally does NOT auto-switch on prefers-color-scheme —
   this app stays bright/light for everyone regardless of OS setting.
   The dark values below are kept only for a possible future manual
   toggle (nothing sets data-theme="dark" today). */
:root[data-theme="dark"]{
  --canvas: #221542; --surface: #2C1B54; --surface-2: #352163;
  --ink: #FBF6FF; --ink-soft: #D2BFEE; --ink-faint: #8F76B8;
  --border: #452C78; --border-soft: #3A2266;
  --accent: #C79BFF; --accent-ink: #FFFFFF; --accent-soft: #4A2C8C;
  --pink: #FFA0D6; --pink-ink: #FFFFFF; --pink-soft: #5C2C56;
  --sky: #7FDCFA; --sky-soft: #1E4A63;
  --sage: #6FF0BE; --sage-soft: #1B4E3D;
  --berry: #FFA6B7; --berry-soft: #5C2A3B;
  --sun: #FFCE6E; --sun-soft: #5A4318;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --canvas: #FEFBFF; --surface: #FFFFFF; --surface-2: #FBF2FF;
  --ink: #4A3768; --ink-soft: #8A7BA8; --ink-faint: #C1B3DC;
  --border: #F0E2FA; --border-soft: #F6ECFC;
  --accent: #A566FF; --accent-ink: #6A2FD9; --accent-soft: #F1E4FF;
  --pink: #FF63B0; --pink-ink: #C22B85; --pink-soft: #FFE3F1;
  --sky: #22C1F5; --sky-soft: #D7F5FE;
  --sage: #1FCB93; --sage-soft: #D6FAEC;
  --berry: #FF6685; --berry-soft: #FFE3E9;
  --sun: #FFB020; --sun-soft: #FFF1D6;
  color-scheme: light;
}

/* ---- Page-transition loading bar (shown on nav/search/save — see widgets.js) ---- */
#v2LoadingBar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--pink));z-index:200;box-shadow:0 0 10px var(--accent);transition:width .4s ease;pointer-events:none;}
#v2LoadingBar.active{width:78%;}

/* ---- Base ---- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  overflow-x:hidden;
  max-width:100vw;
  background:
    radial-gradient(60% 45% at 8% 0%, var(--pink-soft), transparent 60%),
    radial-gradient(55% 50% at 100% 12%, var(--sky-soft), transparent 60%),
    radial-gradient(50% 45% at 50% 100%, var(--accent-soft), transparent 60%),
    var(--canvas);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Mitr','Chonburi',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Chonburi','Mitr',sans-serif;
  font-weight:400;
  margin:0;
  text-wrap:balance;
  letter-spacing:.01em;
}
a{color:inherit;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--accent-soft);color:var(--accent-ink);}
.tabular{font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ---- Shell layout ---- */
.shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh;}
@media (max-width: 900px){
  .shell{grid-template-columns:1fr;}
  .sidebar{position:fixed;inset:0 auto 0 0;width:264px;z-index:40;transform:translateX(-100%);transition:transform .25s ease;}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg);}
  .scrim{position:fixed;inset:0;background:rgba(20,10,35,.45);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:35;}
  .scrim.show{opacity:1;pointer-events:auto;}
}

/* ---- Sidebar "roost" — deliberate vivid chrome, fixed across both themes ---- */
.sidebar{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,99,176,.40), transparent 60%),
    linear-gradient(180deg,var(--perch),var(--perch-2));
  color:var(--perch-ink);
  padding:22px 16px 20px;
  display:flex;flex-direction:column;gap:4px;
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:11px;padding:2px 10px 20px;margin-bottom:6px;border-bottom:1px solid var(--perch-border);}
.brand-mark{width:42px;height:42px;border-radius:14px;flex:none;}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;}
.brand-name{font-family:'Chonburi',sans-serif;font-size:19px;line-height:1.1;color:#fff;}
.brand-name b{color:var(--pink);}
.brand-sub{font-size:11px;color:var(--perch-ink-soft);letter-spacing:.06em;margin-top:2px;}

.nav-group-label{font-size:11px;color:var(--perch-ink-soft);letter-spacing:.08em;margin:16px 10px 6px;text-transform:uppercase;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:999px;color:var(--perch-ink-soft);font-size:14.5px;text-decoration:none;transition:background .15s ease,color .15s ease;}
.nav-item svg{flex:none;opacity:.9;}
.nav-item:hover{background:rgba(255,255,255,.08);color:var(--perch-ink);}
.nav-item.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:var(--shadow-sm);}
.nav-item.active svg{opacity:1;}
.nav-badge{margin-left:auto;background:var(--berry);color:#fff;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;}
.sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--perch-border);display:flex;flex-direction:column;gap:10px;}
.user-chip{display:flex;align-items:center;gap:10px;padding:0 10px;}
.logout-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,102,133,.16);color:#FFD3DB;font-size:13.5px;font-weight:600;text-decoration:none;transition:background .15s ease,color .15s ease;}
.logout-btn:hover{background:var(--berry);color:#fff;}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none;}
.user-meta{font-size:12.5px;color:var(--perch-ink-soft);line-height:1.3;}
.user-meta b{color:#fff;font-weight:500;display:block;font-size:13.5px;}

/* ---- Topbar ---- */
.topbar{display:flex;align-items:center;gap:14px;padding:14px 26px;background:var(--surface);border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:20;}
.hamburger{display:none;border:none;background:none;color:var(--ink);cursor:pointer;padding:6px;}
@media (max-width:900px){.hamburger{display:flex;}}
.search-pill{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:8px 16px;flex:1;max-width:380px;color:var(--ink-faint);}
.search-pill input{border:none;background:none;outline:none;color:var(--ink);font-family:inherit;font-size:13.5px;width:100%;}
.topbar-spacer{flex:1;}
.icon-btn{border:1px solid var(--border);background:var(--surface);color:var(--ink-soft);width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;}
.icon-btn:hover{color:var(--accent);border-color:var(--accent-soft);}

/* ---- Mobile bottom tab bar + FAB ---- */
/* Anchored flush to the screen edge (not an inset floating pill) so it reads as a
   permanent part of the frame rather than a card hovering over the content. */
.tabbar,.fab{display:none;}
@media (max-width:640px){
  .tabbar{display:flex;justify-content:space-around;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--border-soft);padding:7px 2px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -4px 14px rgba(20,10,35,.08);}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink-faint);text-decoration:none;font-size:9.5px;white-space:nowrap;padding:6px 5px;border-radius:14px;}
  .tabbar a.active{color:var(--accent);background:var(--accent-soft);}
  .fab{display:flex;align-items:center;justify-content:center;position:fixed;right:18px;bottom:calc(60px + env(safe-area-inset-bottom));z-index:31;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,var(--accent),var(--pink));color:#fff;box-shadow:var(--shadow-lg);border:none;cursor:pointer;text-decoration:none;}
  .content{padding-bottom:90px;}
}
@media (max-width:360px){
  .tabbar a{font-size:8.5px;padding:6px 3px;}
  .tabbar a svg{width:17px;height:17px;}
}

/* ---- Content ---- */
.content{padding:26px 26px 60px;max-width:1760px;}
.page-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.page-title{font-size:26px;}
.page-title .count{color:var(--ink-faint);font-family:'Mitr',sans-serif;font-size:15px;margin-left:8px;white-space:nowrap;}
.crumbs{font-size:12.5px;color:var(--ink-faint);margin-bottom:6px;}
@media (max-width:480px){
  .page-title{font-size:19px;}
  .page-title .count{display:block;margin-left:0;margin-top:4px;font-size:12.5px;}
}

/* ---- Stat tiles ---- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px;}
@media (max-width:820px){.stat-row{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:18px 20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;}
.stat-top{display:flex;align-items:center;justify-content:space-between;}
.stat-label{font-size:12.5px;color:var(--ink-soft);}
.stat-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;}
.stat-value{font-family:'Chonburi',sans-serif;font-size:30px;}
.stat-delta{font-size:12px;color:var(--ink-faint);}

/* ---- Filter bar ---- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px;}
.chip-group{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--border);padding:4px;border-radius:999px;flex-wrap:wrap;}
.chip{border:none;background:none;padding:7px 14px;border-radius:999px;font-size:13px;color:var(--ink-soft);cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;}
.chip.active{background:var(--accent);color:#fff;font-weight:600;}
/* Sort chip-group must always stay one row (pill shape depends on it). Some
   pages have long chip labels, so on narrow phones shrink the chip
   font/padding to keep both chips fitting side by side; if a screen is still
   too narrow even for that, scroll horizontally rather than wrap. Must come
   after the base .chip-group/.chip rules above — same specificity, so an
   earlier position would lose the cascade tie and never apply. */
@media (max-width:480px){
  .chip-group{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
  .chip{font-size:11.5px;padding:7px 10px;}
}
.search-box{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 16px;flex:1;min-width:200px;max-width:420px;}
.search-box input{border:none;background:none;outline:none;color:var(--ink);font-family:inherit;font-size:13.5px;width:100%;}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 20px;font-size:13.5px;font-weight:500;cursor:pointer;border:1px solid transparent;text-decoration:none;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-outline{background:var(--surface);border-color:var(--border);color:var(--ink);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-ink);}
.btn-ghost{background:none;color:var(--ink-soft);}
.btn-danger{background:var(--berry);color:#fff;}
.btn-sm{padding:7px 14px;font-size:12.5px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---- Pills (status) ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;}
.pill-sage{background:var(--sage-soft);color:var(--sage);}
.pill-sky{background:var(--sky-soft);color:var(--sky);}
.pill-accent{background:var(--accent-soft);color:var(--accent-ink);}
.pill-berry{background:var(--berry-soft);color:var(--berry);}
.pill-sun{background:var(--sun-soft);color:var(--sun);}

/* ---- Bird cards ---- */
.bird-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px;margin-bottom:36px;}
.bird-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease;position:relative;border-left:4px solid var(--stripe,var(--sage));}
.bird-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.bird-photo{aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 140% at 20% 0%, var(--sage-soft), transparent 60%),radial-gradient(120% 140% at 100% 100%, var(--sky-soft), transparent 60%),var(--surface-2);cursor:pointer;}
.bird-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.bird-photo .pill{position:absolute;top:10px;right:10px;}

/* shown instead of a real photo when a bird/couple record has none yet — sized
   down and faded like the old placeholder icon it replaces, and never
   cover-cropped (a logo, unlike a photo, shouldn't get zoomed/cut into) */
.bird-photo img.no-photo-fallback,
.couple-half img.no-photo-fallback{width:44%;height:44%;object-fit:contain;opacity:.55;}

/* couple (breeding pair) split photo — used on the hatch/egg list */
.couple-photo{aspect-ratio:3/2;position:relative;display:flex;}
.couple-photo .pill{position:absolute;top:10px;right:10px;z-index:2;}
.couple-half{
  flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;
  background:radial-gradient(120% 140% at 20% 0%, var(--sage-soft), transparent 60%),var(--surface-2);
}
.couple-half + .couple-half{border-left:1px solid var(--border-soft);
  background:radial-gradient(120% 140% at 100% 0%, var(--sky-soft), transparent 60%),var(--surface-2);}
.couple-half img{width:100%;height:100%;object-fit:contain;display:block;}
.couple-half-label{
  position:absolute;bottom:6px;left:6px;font-size:10px;font-weight:600;color:#fff;
  background:rgba(20,10,35,.5);padding:2px 8px;border-radius:999px;z-index:1;
}
.hatch-soon{color:var(--sun);font-weight:700;}
.hatch-urgent{color:var(--berry);font-weight:700;}
.bird-body{padding:14px 16px 16px;}
.bird-name{font-family:'Chonburi',sans-serif;font-size:17px;margin-bottom:6px;}
.bird-meta{font-size:12.5px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px;}
.bird-meta b{color:var(--ink);font-weight:500;}
/* compact facts (breed/color/sex/age/birthday) shown only on the mobile
   2-per-row grid below — hidden here, .bird-meta above covers desktop */
.bird-meta-compact{display:none;}
.bird-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:10px;border-top:1px dashed var(--border);font-size:12px;color:var(--ink-faint);gap:8px 14px;row-gap:8px;}
.bird-edit{display:flex;align-items:center;gap:5px;color:var(--accent-ink);font-weight:600;font-size:12.5px;text-decoration:none;flex:none;border:none;background:none;cursor:pointer;font-family:inherit;padding:0;white-space:nowrap;}
.bird-edit.danger{color:var(--berry);}

/* Mobile: one field per line instead of inline-wrapping chips — reads as
   cluttered on a narrow single-column card (list_hatch.php's couple cards;
   list_all.php's .bird-card hides .bird-meta entirely on mobile via the
   higher-specificity .bird-grid-2col rule further below, so this is a no-op
   there and only visibly affects the hatch page). */
@media (max-width:640px){
  .bird-meta{flex-direction:column;gap:3px;}
}

/* Mobile: 2 cards per row instead of 1 full-width. Pared down to photo + name
   + status pill only — the rest of .bird-meta is already one tap away via
   "ดูเพิ่มเติม" (v2ShowDetail), so hiding it here isn't a data loss, just a
   denser grid. Footer actions collapse to icon-only circular buttons (labels
   are still in the DOM via .btn-label, just visually hidden, so screen
   readers/title tooltips keep working) since two lines of Thai button text
   don't fit a half-width card.
   IMPORTANT: list_hatch.php's couple cards reuse these exact same
   .bird-card/.bird-body/.bird-name/.bird-meta classes (only the photo part
   differs: .couple-photo vs .bird-photo) — a bare `.bird-card{...}` selector
   here previously leaked into the hatch page too and hid its data. Every
   selector below MUST stay scoped under `.bird-grid-2col` (only list_all.php's
   wrapper has that class) so this block can only ever match list_all.php's
   cards. Do not shorten these selectors back to bare `.bird-card`. */
@media (max-width:640px){
  .bird-grid-2col{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:28px;}
  .bird-grid-2col .bird-card{border-radius:14px;border-left-width:3px;}
  .bird-grid-2col .bird-card:hover{transform:none;}
  .bird-grid-2col .bird-card .bird-photo{aspect-ratio:1/1;}
  .bird-grid-2col .bird-card .bird-photo .pill{top:6px;right:6px;font-size:9.5px;padding:3px 7px;gap:3px;}
  .bird-grid-2col .bird-card .bird-body{padding:8px 9px 9px;}
  .bird-grid-2col .bird-card .bird-name{font-size:13px;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bird-grid-2col .bird-card .bird-meta{display:none;}
  .bird-grid-2col .bird-card .bird-meta-compact{display:flex;flex-direction:column;gap:2px;font-size:10.5px;color:var(--ink-soft);margin-bottom:6px;}
  .bird-grid-2col .bird-card .bird-meta-compact b{color:var(--ink);font-weight:500;}
  .bird-grid-2col .bird-card .bird-foot{border-top:none;padding-top:6px;gap:4px;}
  .bird-grid-2col .bird-card .bird-foot>div:first-child{gap:4px;}
  .bird-grid-2col .bird-card .bird-actions{gap:4px;}
  .bird-grid-2col .bird-card .bird-actions>span{display:none;}
  .bird-grid-2col .bird-card .btn-label{display:none;}
  .bird-grid-2col .bird-card .bird-more,.bird-grid-2col .bird-card .bird-edit{width:30px;height:30px;justify-content:center;border-radius:50%;background:var(--surface-2);}
  .bird-grid-2col .bird-card .bird-edit{color:var(--accent-ink);}
}

/* ---- Card / table ---- */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:30px;}
.card-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border-soft);}
.card-head h3{font-size:16px;}
.card-head .dot{width:8px;height:8px;border-radius:50%;background:var(--sun);}
.table-wrap{overflow-x:auto;}
table{width:auto;min-width:100%;border-collapse:collapse;font-size:13px;}
thead th{text-align:left;font-weight:600;color:var(--ink-soft);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:10px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap;}
tbody td{padding:13px 18px;border-bottom:1px solid var(--border-soft);color:var(--ink);white-space:nowrap;}
tbody td.wrap{white-space:normal;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--surface-2);}

/* ---- Log cards (sick / deworm history) — card grid on desktop and mobile alike ---- */
.log-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;padding:20px;}
.log-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);border-left:4px solid var(--stripe,var(--sky));
  transition:transform .18s ease, box-shadow .18s ease;
}
.log-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.log-card-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:6px;}
.log-card-head b{font-family:'Chonburi',sans-serif;font-size:16px;flex:1;min-width:0;}
.log-card-sub{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;}
.log-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--border-soft);}
.log-row:last-child{border-bottom:none;}
.log-row label{color:var(--ink-soft);flex:none;}
.log-row span{text-align:right;color:var(--ink);}
.log-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-size:12px;color:var(--ink-faint);gap:8px;}
@media (max-width:640px){.log-grid{grid-template-columns:1fr;padding:16px;gap:12px;}}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:20px;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12.5px;color:var(--ink-soft);font-weight:500;}
.field input,.field select,.field textarea{border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:var(--radius-sm);padding:10px 13px;font-size:13.5px;font-family:inherit;outline:none;}
.field textarea{resize:vertical;min-height:80px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:var(--surface);}
.field input[readonly]{cursor:default;color:var(--ink-soft);border-style:dashed;}
.field-hint{font-size:11.5px;color:var(--ink-faint);}
.form-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 20px 20px;}

/* ---- Searchable select (progressively enhances a plain <select>) ---- */
.v2-select{position:relative;}
.v2-select-native{position:absolute;inset:0;opacity:0;pointer-events:none;}
.v2-select-trigger{width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:var(--radius-sm);padding:10px 13px;font-size:13.5px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;}
.v2-select-trigger.placeholder{color:var(--ink-faint);}
.v2-select-trigger svg{flex:none;color:var(--ink-faint);}
.v2-select-chevron{transition:transform .15s ease;}
.v2-select.open .v2-select-trigger{border-color:var(--accent);background:var(--surface);}
.v2-select.open .v2-select-chevron{transform:rotate(180deg);}
.v2-select-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);overflow:hidden;}
.v2-select.open .v2-select-panel{display:block;}
.v2-select-search{width:100%;border:none;border-bottom:1px solid var(--border-soft);background:var(--surface-2);padding:10px 13px;font-size:13.5px;font-family:inherit;outline:none;color:var(--ink);}
.v2-select-list{max-height:220px;overflow-y:auto;}
.v2-select-option{padding:9px 13px;font-size:13.5px;cursor:pointer;}
.v2-select-option:hover,.v2-select-option.selected{background:var(--accent-soft);color:var(--accent-ink);}
.v2-select-empty{padding:12px 13px;font-size:13px;color:var(--ink-faint);}

/* ---- Date picker (progressively enhances <input type=date>; reuses .v2-select trigger/panel) ---- */
/* trigger has icon+label only (no chevron) — left-align the pair instead of
   the select trigger's space-between (which was shoving the label to the
   far right with an empty gap, since space-between only reads right with
   two items when the second one is meant to be a trailing chevron) */
.v2-date-trigger{justify-content:flex-start;gap:9px;}
.v2-date-panel{padding:12px;}
.v2-date-nav{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.v2-date-arrow{border:1px solid var(--border);background:var(--surface-2);color:var(--ink-soft);width:28px;height:28px;border-radius:var(--radius-sm);cursor:pointer;font-size:16px;line-height:1;flex:none;}
.v2-date-arrow:hover{border-color:var(--accent);color:var(--accent-ink);}
.v2-date-month,.v2-date-year{border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:var(--radius-sm);padding:6px 7px;font-size:12px;font-family:inherit;outline:none;}
.v2-date-month{flex:1;min-width:0;}
.v2-date-year{flex:none;width:72px;}
.v2-date-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--ink-faint);margin-bottom:4px;}
.v2-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.v2-date-day{border:none;background:none;color:var(--ink);border-radius:10px;height:32px;font-size:12.5px;cursor:pointer;font-family:inherit;}
.v2-date-day:hover{background:var(--accent-soft);color:var(--accent-ink);}
.v2-date-day.today{font-weight:700;color:var(--accent-ink);}
.v2-date-day.selected{background:var(--accent);color:#fff;}
.v2-date-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft);}
.v2-date-footer button{border:none;background:none;color:var(--accent-ink);font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px;font-family:inherit;}
.v2-date-footer button:hover{text-decoration:underline;}

/* ---- Image upload (add/edit bird form) ---- */
.img-upload{border:2px dashed var(--border);border-radius:var(--radius-md);padding:16px;background:var(--surface-2);text-align:center;}
.img-upload input[type=file]{width:100%;font-size:13px;color:var(--ink-soft);}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:14px;}
.img-thumb{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);border:1px solid var(--border-soft);}
.img-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;}
.img-thumb .img-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(20,10,35,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.img-thumb .img-remove:hover{background:var(--berry);}
.img-thumb.new{border-color:var(--accent);}
.img-thumb{touch-action:none;user-select:none;-webkit-user-select:none;}
.img-thumb.dragging{opacity:.55;transform:scale(1.06);z-index:5;box-shadow:var(--shadow-lg);}
.img-thumb .img-tag{position:absolute;bottom:4px;left:4px;font-size:9.5px;font-weight:600;color:#fff;background:rgba(20,10,35,.5);padding:1px 7px;border-radius:999px;}
.img-thumb .img-reorder{position:absolute;bottom:4px;right:4px;display:flex;gap:3px;}
.img-thumb .img-reorder button{width:20px;height:20px;border-radius:50%;border:none;background:rgba(20,10,35,.6);color:#fff;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.img-thumb .img-reorder button:hover:not(:disabled){background:var(--accent);}
.img-thumb .img-reorder button:disabled{opacity:.3;cursor:default;}

/* ---- Pagination ---- */
.pager-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:24px 0 40px;}
@media (max-width:480px){.pager-bar{justify-content:center;}}
.page-size{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);}
.page-size select{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;font-family:inherit;outline:none;cursor:pointer;}
.pager{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:0;}
.pager a,.pager span{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:13px;text-decoration:none;color:var(--ink-soft);border:1px solid var(--border-soft);background:var(--surface);}
.pager a:hover{border-color:var(--accent);color:var(--accent-ink);}
.pager .active{background:var(--accent);color:#fff;border-color:transparent;font-weight:600;}
.pager .disabled{opacity:.4;pointer-events:none;}

/* ---- Simple modal (replaces Bootstrap modal JS dependency) ---- */
.v2-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;z-index:100;}
.v2-modal.show{display:flex;}
.v2-modal .backdrop{position:absolute;inset:0;background:rgba(20,10,35,.55);}
.v2-modal .box{position:relative;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:420px;width:100%;max-height:86vh;overflow:auto;padding:20px;}
.v2-modal .box img{width:100%;border-radius:var(--radius-md);display:block;touch-action:pan-y;}
.v2-modal .close-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.v2-modal .box.wide{max-width:760px;}
/* the base .box already adds its own 20px padding on top of .v2-modal's own
   20px backdrop padding — for every other modal that's fine (the box has a
   visible white panel to pad), but here it was silently shrinking the card
   ~40px narrower than the same card on the public share page (which only
   has one layer of padding), most visible on mobile and in the PNG export.
   Keep just enough top padding to clear the close button, trim the rest. */
.v2-modal .box.plain{background:none;box-shadow:none;max-width:640px;padding:44px 8px 12px;}

/* image popup prev/next arrows */
.img-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);z-index:2;
}
.img-nav:hover{color:var(--accent-ink);border-color:var(--accent-soft);}
.img-nav.prev{left:8px;}
.img-nav.next{right:8px;}
.img-count{
  position:absolute;top:10px;left:14px;background:rgba(20,10,35,.55);color:#fff;
  font-size:11.5px;padding:3px 10px;border-radius:999px;z-index:2;
}

/* ---- Bird detail popup ---- */
.detail-head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:6px;margin-bottom:18px;padding-right:30px;}
.detail-head .pill{flex:none;}
.detail-head h3{font-size:20px;font-family:'Chonburi',sans-serif;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;}
@media (max-width:480px){.detail-grid{grid-template-columns:1fr;}}
.detail-row{display:flex;flex-direction:column;gap:3px;}
.detail-row.full{grid-column:1/-1;}
.detail-row label{font-size:11.5px;color:var(--ink-soft);letter-spacing:.02em;}
.detail-row .val{font-size:14.5px;color:var(--ink);font-weight:500;}
.detail-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:16px;border-top:1px dashed var(--border);}
.bird-actions{display:flex;gap:10px;align-items:center;white-space:nowrap;}
.bird-more{background:none;border:none;color:var(--ink-soft);font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;padding:0;font-family:inherit;white-space:nowrap;}
.bird-more:hover{color:var(--accent-ink);}

/* ---- Login page ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(60% 50% at 15% 10%, var(--pink-soft), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, var(--sky-soft), transparent 60%),
    var(--canvas);
}
.login-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:28px;box-shadow:var(--shadow-lg);width:100%;max-width:380px;padding:36px 32px;text-align:center;}
.login-logo{width:76px;height:76px;margin:0 auto 14px;}
.login-logo img{width:100%;height:100%;object-fit:contain;}
.login-card h1{font-size:22px;margin-bottom:4px;}
.login-card p.sub{color:var(--ink-soft);font-size:13px;margin-bottom:24px;}
.login-card .field{text-align:left;margin-bottom:14px;}
.login-card .btn{width:100%;justify-content:center;margin-top:6px;}
.login-error{background:var(--berry-soft);color:var(--berry);border-radius:12px;padding:10px 14px;font-size:12.5px;margin-bottom:14px;text-align:left;}

/* ==========================================================================
   Bird ID card ("บัตรประจำตัวนก") — design approved as a preview artifact
   before being ported here. Two toggleable modes (variant-a "มาตรฐาน" /
   variant-c "พรีเมียม") deliberately use their own palette, not the site's
   --accent/--pink tokens, matching a Thai national ID card pastiche rather
   than a reskin of the app chrome. Used by both the admin popup
   (list_all.php) and the public share page (card_public.php).
   ========================================================================== */
/* container-type turns every cqw below into "% of the card's own current
   width" — so the card looks correctly proportioned whether it renders at
   580px on desktop or ~320px in a mobile popup, with no separate mobile
   breakpoint to keep in sync. clamp() floors/ceilings keep text legible at
   extreme sizes.
   Height is deliberately NOT aspect-ratio-locked: a fixed ratio + those same
   clamp() floors fought each other on narrow screens (text couldn't shrink
   past its floor, but the locked height kept shrinking with the width), so
   the bottom row got clipped by overflow:hidden instead of just reflowing.
   Auto height means the card is always exactly as tall as its content needs,
   at any width — it grows a little on longer breed/color names instead of
   clipping them. */
.idcard{width:580px;max-width:100%;container-type:inline-size;border-radius:5px;position:relative;overflow:hidden;box-shadow:0 2px 10px rgba(120,60,220,.10), 0 20px 44px -14px rgba(80,30,160,.35);transition:opacity .18s ease;margin:0 auto;}
.idcard-inner{position:relative;display:flex;flex-direction:column;padding:3.5cqw 3.8cqw 3cqw;}
.idcard-pattern{position:absolute;inset:0;pointer-events:none;}

.idcard-head{display:flex;align-items:center;gap:2.2cqw;margin-bottom:1.7cqw;}
.idcard-seal{width:6.9cqw;height:6.9cqw;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.idcard-seal img{width:100%;height:100%;object-fit:contain;}
.idcard-titles{flex:1;line-height:1.25;}
.idcard-title-th{font-family:'Chonburi',sans-serif;font-size:clamp(13px,3.3cqw,22px);}
.idcard-title-en{font-size:clamp(7.5px,1.9cqw,12px);letter-spacing:.09em;text-transform:uppercase;opacity:.75;margin-top:1px;}
.idcard-issuer{font-size:clamp(7px,1.8cqw,11px);letter-spacing:.06em;text-transform:uppercase;text-align:right;opacity:.7;max-width:21.5cqw;line-height:1.3;}

.idcard-idno{font-size:clamp(8px,2.1cqw,13px);letter-spacing:.02em;margin-bottom:2.2cqw;display:flex;gap:1.2cqw;align-items:baseline;}
.idcard-idno .num{font-size:clamp(11px,2.9cqw,19px);font-weight:600;letter-spacing:.06em;}

.idcard-body{flex:1;display:flex;gap:3.3cqw;min-height:0;}
.idcard-photo{width:20cqw;flex:none;border-radius:5px;overflow:hidden;position:relative;align-self:flex-start;background:#fff;}
.idcard-photo img{width:100%;height:24.8cqw;object-fit:cover;display:block;}
/* higher-specificity id override: inside the admin popup this img also matches
   the more specific .v2-modal .box img rule above (which sets a rounded corner
   for every other modal image), so a plain .idcard-photo img rule would lose
   to it there — target the ids directly to guarantee the card photo stays square */
#cardModalPhoto,#cardPhotoImg{border-radius:0;}
.idcard-photo-edit{position:absolute;right:4%;bottom:4%;width:5.9cqw;height:5.9cqw;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.35);color:var(--accent);cursor:pointer;border:none;padding:0;}
.idcard-photo-edit svg{width:clamp(10px,2.6cqw,17px);height:clamp(10px,2.6cqw,17px);}
.idcard-photo-edit input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.idcard.capturing .idcard-photo-edit{display:none;}

.idcard-fields{flex:1;display:flex;flex-direction:column;gap:1.4cqw;min-width:0;padding-top:3px;}
.idcard-fields .field label{display:block;font-size:clamp(6.5px,1.7cqw,11px);letter-spacing:.05em;text-transform:uppercase;opacity:.62;margin-bottom:1px;}
.idcard-fields .field .value{font-size:clamp(10px,2.8cqw,18px);font-weight:500;line-height:1.25;overflow-wrap:break-word;word-break:break-word;}
.idcard-fields .field-row{display:flex;gap:2.4cqw;}
.idcard-fields .field-row .field{flex:1;min-width:0;}

.idcard-name-value{display:flex;align-items:center;gap:.9cqw;}
.idcard-name-edit{flex:none;width:4.2cqw;min-width:15px;max-width:20px;height:4.2cqw;min-height:15px;max-height:20px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.3);color:var(--accent);cursor:pointer;border:none;padding:0;}
.idcard-name-edit svg{width:60%;height:60%;}
.idcard.capturing .idcard-name-edit{display:none;}

.idcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2.1cqw;padding-top:1.6cqw;border-top:.75px solid currentColor;opacity:.9;}
.idcard-issued{font-size:clamp(6px,1.4cqw,10px);letter-spacing:.03em;opacity:.75;}

.idcard.variant-a{background:#F6F1FC;color:#3E2E63;border:1px solid #DCC9F2;}
.idcard.variant-a .idcard-inner{border:1px solid #E4D4F6;border-radius:5px;margin:2.5px;padding:11.5px 14px 9.5px;}
.idcard.variant-a .idcard-pattern{background-image:repeating-radial-gradient(circle at 0 0, rgba(120,55,200,.05) 0, rgba(120,55,200,.05) .5px, transparent .5px, transparent 5px);}
.idcard.variant-a .idcard-seal{background:#5B2C9E;}
.idcard.variant-a .idcard-title-en{color:#5B2C9E;}
.idcard.variant-a .idcard-idno{color:#6B4A9E;}
.idcard.variant-a .idcard-idno .num{color:#3E2E63;}
.idcard.variant-a .idcard-photo{border:2px solid #fff;box-shadow:0 0 0 1px #C9AEE8;}
.idcard.variant-a .idcard-fields .field .value{color:#3E2E63;}
.idcard.variant-a .idcard-foot{border-color:#D8C4EF;}
.idcard.variant-a .idcard-issued{color:#6B4A9E;}

.idcard.variant-c{background:linear-gradient(155deg,#241238,#170B24 65%);color:#EFE2FF;}
.idcard.variant-c .idcard-pattern{
  background:
    linear-gradient(115deg, transparent 40%, rgba(230,190,110,.10) 48%, transparent 56%),
    repeating-linear-gradient(60deg, rgba(230,190,110,.045) 0 1px, transparent 1px 7px);
}
.idcard.variant-c .idcard-seal{background:linear-gradient(135deg,#E6C36E,#B4863A);}
.idcard.variant-c .idcard-title-en{color:#D9B872;}
.idcard.variant-c .idcard-issuer{color:#C9B7EA;}
.idcard.variant-c .idcard-idno{color:#B7A3D6;}
.idcard.variant-c .idcard-idno .num{color:#EFE2FF;}
.idcard.variant-c .idcard-photo{border:1.5px solid #D9B872;box-shadow:0 0 0 3px rgba(230,190,110,.15);}
.idcard.variant-c .idcard-fields label{color:#C9B7EA;}
.idcard.variant-c .idcard-fields .field .value{color:#F6EFFF;}
.idcard.variant-c .idcard-foot{border-color:rgba(230,190,110,.35);}
.idcard.variant-c .idcard-issued{color:#B7A3D6;}

/* mode switch (segmented pill) */
.mode-switch{display:flex;gap:3px;background:var(--surface);border:1px solid var(--border-soft);padding:3px;border-radius:999px;box-shadow:var(--shadow-sm);margin:0 auto 14px;width:max-content;}
.mode-btn{border:none;background:none;font-family:inherit;font-size:11.5px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;gap:5px;transition:background .2s ease,color .2s ease;}
.mode-btn .dot{width:6px;height:6px;border-radius:50%;flex:none;}
.mode-btn[data-mode="a"] .dot{background:#5B2C9E;}
.mode-btn[data-mode="c"] .dot{background:linear-gradient(135deg,#E6C36E,#B4863A);}
.mode-btn.active{background:var(--accent);color:#fff;}
.mode-btn.active .dot{background:#fff !important;}

/* share-link creation result + management list chips */
.share-result{background:var(--accent-soft);border-radius:5px;padding:16px 18px;margin-top:18px;}
.share-result .row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.share-result .row:first-child{margin-top:0;}
.share-result label{font-size:11px;color:var(--accent-ink);font-weight:600;flex:none;width:56px;}
.share-result .val{flex:1;font-size:13px;color:var(--ink);background:var(--surface);border-radius:5px;padding:8px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.share-copy{border:none;background:var(--accent);color:#fff;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;flex:none;font-family:inherit;}
.status-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;flex:none;}
.status-chip.on{background:var(--sage-soft);color:#0F8F65;}
.status-chip.off{background:var(--berry-soft);color:var(--berry);}

/* code-gate (public share page, before the correct code is entered) */
.gate-box{width:100%;max-width:360px;margin:0 auto;background:var(--surface);border-radius:5px;box-shadow:var(--shadow-lg);border:1px solid var(--border-soft);padding:30px 26px;text-align:center;}
.gate-lock{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(135deg,var(--accent-soft),var(--pink-soft));display:flex;align-items:center;justify-content:center;color:var(--accent-ink);}
.gate-box h2{font-size:18px;margin-bottom:6px;}
.gate-box p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 18px;}
.gate-otp{display:flex;gap:7px;justify-content:center;margin-bottom:16px;}
.gate-otp input{width:34px;height:44px;text-align:center;font-size:18px;font-weight:600;border:1.5px solid var(--border);border-radius:5px;background:var(--surface-2);color:var(--ink);font-family:'Mitr',sans-serif;outline:none;}
.gate-otp input:focus{border-color:var(--accent);background:var(--surface);}
.gate-error{font-size:12px;color:var(--berry);margin:-6px 0 14px;display:none;}
.gate-error.show{display:block;}

/* "link closed / not found" state on the public page */
.card-gone{max-width:360px;margin:0 auto;text-align:center;background:var(--surface);border-radius:5px;box-shadow:var(--shadow-lg);border:1px solid var(--border-soft);padding:36px 26px;}
.card-gone .icon{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;background:var(--berry-soft);color:var(--berry);display:flex;align-items:center;justify-content:center;}
.card-gone h2{font-size:17px;margin-bottom:6px;}
.card-gone p{font-size:13px;color:var(--ink-soft);line-height:1.6;}