:root{
  --primary-700:#30AFDF;
  --primary-500:#4CB8E2;
  --primary-300:#60BDE1;
  --teal:#63A9C1;
  --accent:#F6BF55;
  --ink:#0F172A;
  --muted:#64748B;
  --surface:#FFFFFF;
  --bg:#F7FAFD;
  --shadow:0 6px 20px rgba(15,23,42,.12);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Noto Sans Thai", "Noto Sans Thai UI", sans-serif;
  background:linear-gradient(180deg, var(--primary-300) 0%, var(--primary-500) 40%, var(--primary-700) 100%);
  background-attachment: fixed;
  color:var(--ink);
}

.container{
  max-width: 720px;
  margin:0 auto;
  padding: 16px;
}

.card{
  background:var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  margin:12px 0;
}
.card .title{font-weight:700; font-size:1.05rem}
.card .subtitle{color:var(--muted); margin-top:4px}
.card .meta{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:.9rem; margin-top:8px}
.card .desc{margin:8px 0 0 0; color:#1f2937}
.card .row-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.card.mini{padding:12px}

header.app{
  position: sticky; top:0; z-index:20;
  backdrop-filter: saturate(140%) blur(4px);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75));
  box-shadow: var(--shadow);
}
.app-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 16px;}
.brand{display:flex; align-items:center; gap:10px}
.brand .dot{width:12px; height:12px; background:var(--accent); border-radius:50%}
.brand .name{font-weight:800; color:#0B3B4E}

.tabs{
  display:flex; gap:8px; padding:8px 16px;
}
.tabs .tab{flex:1; text-align:center; padding:10px; border-radius:999px; background:rgba(255,255,255,.6); color:#0B3B4E; font-weight:600; border:1px solid rgba(255,255,255,.6)}
.tabs .tab.active{background:var(--surface); border-color:var(--accent)}

.section{padding:8px 16px}

.hidden{display:none !important}

.btn{
  appearance:none; border:0; border-radius:12px; padding:12px 16px;
  background:var(--primary-700); color:white; font-weight:700;
  box-shadow: var(--shadow);
}
.btn:hover{filter:brightness(.98)}
.btn.ghost{background:rgba(99,169,193,.15); color:#0B3B4E; box-shadow:none}
.btn.warn{background:#ffd166; color:#7a4b00}
.btn.ok{background:#30C48D}
a.btn{display:inline-block; text-decoration:none}

.input, input, select, textarea{
  width:100%; border:1px solid rgba(99,169,193,.4);
  background:rgba(255,255,255,.9); border-radius:12px; padding:12px 14px; font-size:16px;
}
label{display:block; font-size:.9rem; color:#0B3B4E; margin:8px 0 4px}
.form{display:grid; gap:12px}
.form-row{display:grid; gap:8px}
.form-grid{display:grid; gap:12px}
@media(min-width:560px){ .form-grid{grid-template-columns:1fr 1fr} .form-grid textarea{grid-column:1/-1} }
/* Keep grid buttons from stretching full width */
.form-grid .btn {
  justify-self: start;   /* no more stretch */
  width: auto;           /* size to content */
  max-width: 220px;      /* cap width on large screens */
}
@media (min-width: 560px) {
  .form-grid .btn { max-width: 240px; }
}

.actions{display:flex; gap:8px; margin-top:12px}
.counts{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.chip{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid rgba(12,74,110,.12); font-weight:600; color:#0B3B4E}
.chip.ok{background:rgba(48,196,141,.1); color:#065f46}
.chip.warn{background:rgba(246,191,85,.15); color:#9a6a00}
.chip.active{outline:2px solid var(--accent)}

.empty{padding:16px; color:#0B3B4E; background:rgba(255,255,255,.7); border-radius:12px}

.footer-space{height:30px}

.toast-host{
  position: fixed; left:0; right:0; bottom:12px; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:50;
}
.toast{
  background:#0F172A; color:white; border-radius:999px; padding:10px 14px; opacity:0; transform: translateY(10px);
  transition: all .25s ease;
}
.toast.in{opacity:1; transform: translateY(0)}
.toast.ok{background:#16a34a}
.toast.warn{background:#f59e0b}
.toast.error{background:#dc2626}

.spinner-overlay{
  position: fixed; inset:0; background:rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; z-index:40;
}
.spinner{width:36px; height:36px; border-radius:50%; border:4px solid rgba(12,74,110,.2); border-top-color:var(--primary-700); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.sheet-wrap{position:fixed; inset:0; display:flex; align-items:flex-end; z-index:60; pointer-events:none}
.sheet-wrap .sheet-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.2); opacity:0; transition:opacity .2s}
.sheet-wrap .sheet{position:relative; width:100%; max-height:80%; background:var(--surface); border-top-left-radius:16px; border-top-right-radius:16px; box-shadow: var(--shadow); transform:translateY(20px); opacity:.95; transition: transform .2s}
.sheet-wrap.in{pointer-events:auto}
.sheet-wrap.in .sheet{transform:translateY(0)}
.sheet-wrap.in .sheet-backdrop{opacity:1}
.sheet-handle{width:42px; height:5px; background:#e5e7eb; border-radius:999px; margin:8px auto}
.sheet-content{padding:12px 16px}
.sheet-title{font-weight:800; margin-bottom:8px}
.kv{display:flex; justify-content:space-between; gap:16px; padding:6px 0; border-bottom:1px dashed #e5e7eb}
.kv span{color:#6b7280}

header.login{
  min-height: 30vh;
  background: linear-gradient(160deg, var(--primary-300) 0%, var(--primary-500) 60%, var(--accent) 120%);
  display:flex; align-items:flex-end; padding: 24px 16px 12px;
}
.login-card{margin-top:-40px}
.logo-circle{width:56px; height:56px; background:var(--accent); border-radius:50%; box-shadow: var(--shadow)}
.brand-title{font-weight:900; color:#0B3B4E; font-size:1.25rem}
/* --- Tabs bar placed one line below the header --- */
.tabs-bar{
  position: sticky;       /* keep it attached under header on scroll */
  top: 0;                 /* sits at top of viewport, header should not also be sticky above this;
                             if your header is sticky, set .tabs-bar{ top: <header-height> } */
  z-index: 90;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* tighten inner padding so tabs align nicely under header */
.tabs-bar .app-inner{ padding: 6px 16px; }

/* existing .tabs/.tab styles should continue to work;
   if you need a bit more separation from content: */
.tabs-bar + main{ margin-top: 4px; }
/* --- Tabs bar (stays under header) --- */
.tabs-bar{
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.tabs-bar .app-inner{ padding: 6px 16px; }
.tabs-bar + main{ margin-top: 4px; }

/* --- Sheet: full width variant --- */
.sheet-wrap{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 100;
  display: flex;
  align-items: flex-end; /* bottom sheet default */
}
.sheet-wrap.in{ opacity: 1; }
.sheet{
  width: min(860px, 100%);
  max-height: 86vh;
  background: #fff;
  border-top-left-radius: var(--radius,14px);
  border-top-right-radius: var(--radius,14px);
  box-shadow: var(--shadow, 0 6px 20px rgba(15,23,42,.12));
  margin: 0 auto;
  transform: translateY(8px);
  transition: transform .2s ease;
}
.sheet-wrap.in .sheet{ transform: translateY(0); }
.sheet--full{
  width: 100vw !important;
  max-width: 100vw !important;
  border-radius: 0 !important;
  max-height: 92vh;
}
.sheet-handle{width:42px; height:5px; background:#e5e7eb; border-radius:999px; margin:8px auto}
.sheet-content{padding:12px 16px}
.sheet-title{font-weight:800; margin: 4px 0 8px}
.sheet-close{
  position:absolute; right:10px; top:6px; border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; padding:4px;
}

/* --- Stacked incident cards --- */
.incident-card{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  margin-bottom: 10px;
}
.inc-head{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.8rem; background:#eef2ff; color:#374151;
  text-transform: capitalize;
}
.badge.approved{ background:#dcfce7; color:#166534; }
.badge.pending{ background:#fef9c3; color:#854d0e; }
.badge.deleted{ background:#fee2e2; color:#991b1b; }
.inc-row{
  display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dashed #eee;
}
.inc-row span{ color:#6b7280; }
.inc-row:last-child{ border-bottom:0; }

.sheet-content {
  padding: 12px 16px;
  overflow-y: auto;      /* enable vertical scrolling */
  max-height: calc(86vh - 40px); /* stay within sheet height minus header/handle/close */
}
.sheet-wrap .sheet {
  /* ...existing styles... */
  overflow-y: auto;   /* enable scrolling */
}

.sheet {
  /* ...existing styles... */
  overflow-y: auto;   /* enable scrolling */
}

.sheet--full {
  /* ...existing styles... */
  overflow-y: auto;   /* enable scrolling */
}

.tabs{ gap:0; padding:0 16px; }
.tabs .tab{
  flex:0;
  appearance:none;
  border:0;
  background:transparent;
  border-bottom:3px solid transparent;
  color:#0B3B4E;
  font-weight:700;
  padding:12px 12px;
  border-radius:0;
  cursor:pointer;
}
.tabs .tab:hover{ background:rgba(15,23,42,.04); }
.tabs .tab.active{
  border-bottom-color: var(--primary-500);
  background:transparent;
}

/* ============================================================
   DARK THEME (non-destructive overrides; shared across pages)
   ============================================================ */

/* 1) Token overrides for dark mode */
:root[data-theme="dark"]{
  --surface: #0F1F25;          /* card/sheet base */
  --bg:       #0B1418;
  --ink:      #E6F1F4;         /* primary text */
  --muted:    #A8C1CB;         /* secondary text */
  --shadow:   0 10px 28px rgba(0,0,0,.55);
}

/* 2) Page background + header/tabs surfaces */
:root[data-theme="dark"] body{
  background: radial-gradient(1200px 800px at 10% -10%, #0E2A33 0%, #0B1418 55%) fixed;
  color: var(--ink);
}
:root[data-theme="dark"] header.app{
  background: linear-gradient(180deg, rgba(5,14,18,.85), rgba(5,14,18,.75));
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .brand .name{ color: var(--ink); }

:root[data-theme="dark"] .tabs-bar{
  background: rgba(12,27,33,.80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(103,159,179,.18);
}

/* 3) Tabs */
:root[data-theme="dark"] .tabs .tab{
  color: var(--ink);
  background: transparent;
  border-bottom-color: transparent;
}
:root[data-theme="dark"] .tabs .tab:hover{ background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .tabs .tab.active{
  border-bottom-color: var(--primary-500);
  background: transparent;
}

/* 4) Cards and text blocks */
:root[data-theme="dark"] .card{
  background: var(--surface);
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .card .subtitle{ color: var(--muted); }
:root[data-theme="dark"] .card .meta{ color: var(--muted); }
:root[data-theme="dark"] .card .desc{ color: #D8E6EA; }

/* 5) Buttons */
:root[data-theme="dark"] .btn{
  background: #28C0F0;
  color: #061015;
  border: 1px solid transparent;
}
:root[data-theme="dark"] .btn:hover{ filter:none; background:#1FB0DD; }
:root[data-theme="dark"] .btn.ghost{
  background: rgba(99,169,193,.14);
  color: var(--ink);
  box-shadow:none;
  border: 1px solid rgba(96, 189, 225, .20);
}
:root[data-theme="dark"] .btn.warn{ background:#F6C85C; color:#432F00; }
:root[data-theme="dark"] .btn.ok{ background:#23C48F; color:#011a13; }

/* 6) Inputs */
:root[data-theme="dark"] .input,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{
  background:#13262E;
  color: var(--ink);
  border:1px solid #1E3A44;
}
:root[data-theme="dark"] label{ color: var(--ink); }
:root[data-theme="dark"] ::placeholder{ color: rgba(230,241,244,.55); }

/* 7) Chips / counts / empties */
:root[data-theme="dark"] .chip{
  background:#143540;
  border-color:#2B4A55;
  color: var(--ink);
}
:root[data-theme="dark"] .chip.ok{ background:rgba(35,196,143,.12); color:#7CE9C2; }
:root[data-theme="dark"] .chip.warn{ background:rgba(246,200,92,.15); color:#F6C85C; }
:root[data-theme="dark"] .chip.active{ outline-color:#28C0F0; }

:root[data-theme="dark"] .empty{
  background:#102129;
  color: var(--ink);
}

/* 8) Toasts */
:root[data-theme="dark"] .toast{ background:#0C1A20; color:#E6F1F4; }
:root[data-theme="dark"] .toast.ok{ background:#1D6B4D; }
:root[data-theme="dark"] .toast.warn{ background:#8A6A15; }
:root[data-theme="dark"] .toast.error{ background:#7D2020; }

/* 9) Spinner overlay */
:root[data-theme="dark"] .spinner-overlay{
  background:rgba(0,0,0,.45);
}
:root[data-theme="dark"] .spinner{
  border-color: rgba(140,200,220,.20);
  border-top-color: var(--primary-700);
}

/* 10) SHEET (profile/incidents) */
:root[data-theme="dark"] .sheet-wrap{
  background: rgba(0,0,0,.55);
}
:root[data-theme="dark"] .sheet{
  background: #0F1F25;
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .sheet--full{ background:#0F1F25; }
:root[data-theme="dark"] .sheet-handle{ background:#2C4854; }
:root[data-theme="dark"] .sheet-title{ color: var(--ink); }
:root[data-theme="dark"] .sheet-content{ color: var(--ink); }
:root[data-theme="dark"] .kv{ border-bottom-color:#1E3A44; }
:root[data-theme="dark"] .kv span{ color:#9DB7C0; }

/* Close button visible on dark */
:root[data-theme="dark"] .sheet-close{
  color: var(--ink);
}

/* Incident cards inside sheet */
:root[data-theme="dark"] .incident-card{
  background:#12262D;
  border-color:#1E3A44;
  color: var(--ink);
}
:root[data-theme="dark"] .inc-row{ border-bottom-color:#1E3A44; }
:root[data-theme="dark"] .inc-row span{ color:#9DB7C0; }
:root[data-theme="dark"] .badge{ background:#203742; color:#DDE9ED; }
:root[data-theme="dark"] .badge.approved{ background:#103B2B; color:#7CE9C2; }
:root[data-theme="dark"] .badge.pending{ background:#3B3610; color:#F6C85C; }
:root[data-theme="dark"] .badge.deleted{ background:#3B1414; color:#FF8C8C; }

/* 11) Tabs-row (toggle alignment) + toggle button */
.tabs-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:32px; border-radius:10px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.12);
  cursor:pointer; line-height:1; padding:0; transition:transform .1s ease, background .15s ease;
}
.theme-toggle:hover{ filter: brightness(.98); }
.theme-toggle:active{ transform: scale(0.96); }
:root[data-theme="dark"] .theme-toggle{
  background: #12313A;
  border-color:#1E3A44;
  color: var(--ink);
}

/* 12) Choices.js dark overrides (use !important to defeat CDN stylesheet order) */
:root[data-theme="dark"] .choices{ color: var(--ink) !important; }
:root[data-theme="dark"] .choices__inner{
  background-color: #13262E !important;
  color: var(--ink) !important;
  border: 1px solid #1E3A44 !important;
}
:root[data-theme="dark"] .choices.is-open .choices__inner{
  border-color: #2B4A55 !important;
}
:root[data-theme="dark"] .choices__list--dropdown,
:root[data-theme="dark"] .choices__list[aria-expanded]{
  background-color: #0F1F25 !important;
  border: 1px solid #1E3A44 !important;
  color: var(--ink) !important;
}
:root[data-theme="dark"] .choices__list--dropdown .choices__item,
:root[data-theme="dark"] .choices__list--single .choices__item{
  color: var(--ink) !important;
}
:root[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
:root[data-theme="dark"] .choices__list--dropdown .choices__item--highlighted{
  background-color: #123541 !important;
  color: var(--ink) !important;
}
:root[data-theme="dark"] .choices .choices__placeholder{
  color: rgba(230,241,244,.60) !important;
}
:root[data-theme="dark"] .choices__input{
  background-color: #13262E !important;
  color: var(--ink) !important;
}
:root[data-theme="dark"] .choices[data-type*="select-one"]::after{
  border-color: var(--muted) transparent transparent !important; /* caret */
}
/* Stop form buttons from stretching full width, and cap size */
.form .btn {
  width: auto;              /* let the button size to its content */
  justify-self: start;      /* override grid default (stretch) */
  align-self: center;
  display: inline-flex;     /* tidy vertical alignment */
  align-items: center;
  justify-content: center;
  max-width: 240px;         /* <— tweak value to taste */
}

/* If you want the search button a bit narrower */
.form .btn[data-variant="search"] {
  max-width: 200px;
}
#admin-create .btn {
  padding: 8px 12px;     /* was ~12px 16px */
  font-size: 14px;       /* slightly smaller */
  line-height: 1.1;
}
/* 1) Stop vertical stretching in form grids */
.form-grid { 
  align-items: start;          /* prevent row children from stretching vertically */
}

/* 2) Make buttons size to content (both search + admin + overlay) */
.form-grid .btn,
.form .btn {
  align-self: start;           /* no vertical stretch */
  justify-self: start;         /* no horizontal stretch */
  width: auto;
  max-width: 240px;            /* general cap */
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  padding: 10px 14px;          /* slightly tighter */
}

/* 3) Optional, tighter caps per form without touching HTML */
#search-form .btn { max-width: 200px; }
#admin-create .btn { max-width: 200px; padding: 8px 12px; }
/* Put certain form buttons on their own row on desktop */
@media (min-width: 560px) {
  /* Search tab */
  #search-form .btn[type="submit"] {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
  }
  /* (optional) also move "Create New" under the fields */
  #search-form a.btn {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
  }

  /* Admin → Create user */
  #admin-create .btn[type="submit"] {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
  }
}
/* === Unified button sizing (laptop + mobile) === */
:root{
  --btn-h: 40px;           /* default button height (laptop) */
  --btn-font: 14px;
  --btn-pad-x: 14px;
  --btn-radius: 8px;
  --btn-min-w: 112px;      /* standard minimum width for visual consistency */

  --tab-h: var(--btn-h);
  --chip-h: 32px;          /* chips are a bit smaller by design */
}

/* Bigger touch targets on mobile */
@media (max-width: 640px){
  :root{
    --btn-h: 44px;
    --btn-font: 15px;
    --btn-min-w: 128px;
    --chip-h: 36px;
  }
}

/* Buttons (covers <button class="btn"> and <a class="btn">) */
button.btn,
a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  min-width: var(--btn-min-w);
  padding: 0 var(--btn-pad-x);
  line-height: 1;
  font-weight: 600;
  font-size: var(--btn-font);
  border-radius: var(--btn-radius);
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
}

/* Keep ghost/warn purely as visual variants; sizing already applied above */
button.btn.ghost,
a.btn.ghost,
button.btn.warn,
a.btn.warn{}

/* Dense rows of small actions (e.g., View / Approve / Delete) */
.row-actions,
.actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.row-actions .btn,
.actions .btn{
  min-width: 108px;  /* slightly tighter to fit multiple buttons on one row */
}

/* Tabs look like buttons too: give them the same vertical rhythm */
.tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tab-h);
  padding: 0 12px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
}

/* Filter chips (queue tab) */
.chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--chip-h);
  padding: 0 12px;
  border-radius: 9999px;
  font-size: calc(var(--btn-font) - 1px);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

/* Square icon buttons: theme toggle + sheet close */
.theme-toggle,
.sheet-close{
  display: inline-grid;
  place-items: center;
  width: var(--btn-h);
  height: var(--btn-h);
  border-radius: 50%;
  line-height: 1;
}

/* On small screens, action rows wrap into 2-per-row for comfortable tapping */
@media (max-width: 640px){
  .row-actions .btn,
  .actions .btn{
    flex: 1 1 calc(50% - 8px);
    min-width: 0; /* allow the flex-basis to control width */
  }
}

/* Accessible focus ring for all clickable controls */
button.btn:focus-visible,
a.btn:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.theme-toggle:focus-visible,
.sheet-close:focus-visible{
  outline: 2px solid var(--focus-ring, #5b9fff);
  outline-offset: 2px;
}

/* Floating action–style install button */
.install-fab {
  /* hidden until beforeinstallprompt fires */
  display: none;

  position: fixed;
  right: 1.25rem;
  /* respect safe area (iOS) while looking good on Android too */
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
  z-index: 1000;

  /* Android-ish pill */
  padding: 0.8rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #0a84ff, #007aff);
  color: #fff;
  font: 600 0.95rem/1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  letter-spacing: .01em;

  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Icon tint */
.install-fab > svg {
  fill: currentColor;
  display: block;
}

/* Hover/press states (desktop + touch) */
.install-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.14);
}

.install-fab:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.12);
}

/* Focus ring for accessibility */
.install-fab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.9),
    0 0 0 6px rgba(10,132,255,.55),
    0 8px 24px rgba(0,0,0,0.18);
}

/* Larger touch target on small screens */
@media (max-width: 480px) {
  .install-fab {
    padding: 0.9rem 1.2rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  }
}

/* Optional: dark theme tweak (if your app supports it) */
@media (prefers-color-scheme: dark) {
  .install-fab {
    background: linear-gradient(135deg, #1e88e5, #1976d2);
    box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.35);
  }
}
.install-fab { display: none; }         /* default, already present */
.install-fab.show { display: inline-flex; }