/* SensoryGift Enhanced CSS */

:root{
  --brand:#36AB9C;
  --accent:#F58A48;
  --bg:#f7faf9;
  --ink:#1b2b2a;
  --muted:#6b7f7d;
  --radius:12px;
  --shadow:0 8px 20px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}
.app-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  padding:8px 12px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  align-items:center;
}
.brand{
  display:flex;
  gap:8px;
  align-items:center;
}
.logo{font-size:20px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{
  border:1px solid #d7e5e3;
  background:#fff;
  padding:6px 10px;
  border-radius:999px;
}
.tabs button.active{
  border-color:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand);
}
.actions{display:flex;gap:8px}
button{
  border:0;
  border-radius:10px;
  padding:10px 12px;
  background:#e8f3f1;
  color:var(--ink);
  cursor:pointer;
}
button.primary{background:var(--brand);color:#fff}
button.ghost{background:#fff;border:1px solid #d7e5e3}
button.danger{border-color:#f1c1c1;color:#a52828}
button:disabled{opacity:0.5;pointer-events:none}

main{padding:16px;max-width:980px;margin:0 auto}
.row{display:flex;gap:8px;align-items:center}
.row.between{justify-content:space-between}
.gap{gap:12px}
.small{font-size:12px}
.muted{color:var(--muted)}
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#eef6f5;
  color:#25645c;
  font-size:12px;
}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{
  display:flex;
  gap:8px;
  align-items:center;
  background:#fff;
  border-radius:var(--radius);
  padding:8px;
  box-shadow:var(--shadow);
}
.list .drag-handle{cursor:grab;opacity:.6}
.card{
  background:#fff;
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
  margin:12px 0;
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.grid .card{margin:0}
.grid-week{display:grid;grid-template-columns:repeat(1,1fr);gap:12px}
@media(min-width:700px){.grid-week{grid-template-columns:repeat(3,1fr)}}
.grid-week .day{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:140px;
}
.pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#eef6f5;
  font-size:12px;
}
/* Category color accents */
[data-cat="proprioceptive"], .cat-proprioceptive{--cat:#8B5CF6}
[data-cat="vestibular"], .cat-vestibular{--cat:#F59E0B}
[data-cat="tactile"], .cat-tactile{--cat:#EF4444}
[data-cat="visual"], .cat-visual{--cat:#3B82F6}
[data-cat="auditory"], .cat-auditory{--cat:#10B981}
[data-cat="oral"], .cat-oral{--cat:#EC4899}
[data-cat="olfactory"], .cat-olfactory{--cat:#EAB308}
.pill, .badge, .list li{border-left:6px solid var(--cat,#d7e5e3)}

/* Filters */
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  background:#fff;
  border-radius:var(--radius);
  padding:10px;
  box-shadow:var(--shadow);
}
.filters label{display:flex;align-items:center;gap:4px;font-size:14px}

/* Modal styles (auth + any overlay) */
.sg-auth-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(.5px);
  z-index:9998;
}
.sg-auth-modal{
  position:fixed;
  left:12px;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  max-width:560px;
  margin:0 auto;
  background:#fff;
  border-radius:12px;
  z-index:9999;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.sg-auth-hidden{display:none !important}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #eee}
.modal-body{padding:12px}
.back-link{color:var(--muted);text-decoration:none}

/* Editable input styles */
label{display:flex;flex-direction:column;gap:4px;font-size:14px;margin-bottom:8px}
input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="date"], select, textarea{
  padding:8px;
  border:1px solid #ccdcd8;
  border-radius:8px;
  font-size:14px;
}
textarea{resize:vertical}
pre{background:#f1f5f4;padding:12px;border-radius:var(--radius);overflow:auto}

/* Manage row for logs table */
.stack{display:flex;flex-direction:column;gap:8px}

/* Additional classes for summary charts */
.summary-bar{display:flex;align-items:center;margin:4px 0;height:14px;background:#eef6f5;border-radius:999px;overflow:hidden}
.summary-bar span{display:block;height:100%}

/* Lock the UI when auth modal is open */
.sg-auth-lock header,
.sg-auth-lock main {
  filter: blur(2px);
  pointer-events: none;
}

/* Floating action button used in Week view */
.fab {
  position: fixed;
  right: 16px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 56px;
  text-align: center;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 2000;
}

/* Empty-state helper text */
.empty-note {
  margin: 8px 0 12px;
  padding: 8px 10px;
  background: #fffaf1;
  border: 1px dashed #f3c27a;
  color: #6a4b1f;
  border-radius: 10px;
}

/* Mobile fixes for Logs select overflow */
@media (max-width: 520px){
  .row.gap{flex-wrap: wrap;}
  .row.gap .inline{flex: 1 1 100%; min-width: 0;}
  #logActivity{max-width: 100%; width: 100%;}
}

/* Global FAB and empty state styles */
.sg-fab{
  position:fixed;
  right:16px;
  bottom:16px;
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  background:var(--accent);
  color:#fff;
  font-size:28px;
  line-height:56px;
  text-align:center;
  box-shadow:var(--shadow);
  cursor:pointer;
  z-index:3000;
}
.sg-fab:active{
  transform:scale(0.97);
}
.empty-state{
  background:#fff;
  border-radius:var(--radius);
  padding:16px;
  margin-top:12px;
  border:1px dashed var(--brand);
}
.empty-state p{
  margin:0 0 10px;
  color:var(--muted);
}
/* Outcome emojis */
.outcome-emoji{margin-left:6px}

/* Favorite button styles */
.fav-btn{
  background:transparent;
  border:none;
  font-size:16px;
  cursor:pointer;
  color:var(--accent);
  margin-right:4px;
  padding:0;
}
.fav-btn.active{
  color:var(--brand);
}

/* Compact outcome dropdown in routine items (mobile friendly) */
li .log-select{
  max-width: 160px;
  width: auto;
  font-size: 0.95rem;
  padding: 6px 8px;
}
/* Prevent the select from stretching the row */
li .log-select { flex: 0 0 auto; }

/* ===== Outcome pill selector ===== */
.log-choice{ position:relative; display:inline-block; }
.log-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--ln); background:#fff; border-radius:9999px;
  padding:6px 12px; font:inherit; line-height:1; cursor:pointer;
}
.log-pill.logged{ opacity:.65; cursor:default; }
.log-menu{
  position:absolute; z-index:30; top:calc(100% + 6px); left:0;
  background:#fff; border:1px solid var(--ln); border-radius:10px;
  box-shadow: var(--shadow-md); padding:4px; min-width:190px;
}
.log-menu li{ list-style:none; padding:8px 10px; border-radius:8px; display:flex; align-items:center; gap:8px; cursor:pointer; }
.log-menu li:hover{ background:#f1f5f9; }
.log-menu[hidden]{ display:none; }

/* Don't let the pill stretch the row */
li .log-choice{ flex:0 0 auto; }

/* Emoji-only on small screens */
@media (max-width: 420px){
  .log-pill .txt{ display:none; }
  .log-menu{ min-width: 44px; }
  .log-menu li .txt{ display:none; }
}

/* Space to the left of right-aligned pill */
li .log-choice{ margin-left:8px; }


/* hideclose-20250917040704: hide login modal close (X) button */
.sg-auth-modal .close,
#login-modal .close,
.sg-auth-modal [aria-label="Close"],
#login-modal [aria-label="Close"] {
  display: none !important;
}

/* Rewards & Streaks (Clean v1) */
.rr-cell{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:34px;height:34px;margin:2px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#334155;font-size:12px}
.rr-cell .star{line-height:14px;font-size:14px}
.rr-cell.done{background:#fff7cc;border-color:#fde68a}
.rr-badge{display:inline-block;margin:2px 6px 2px 0;padding:.35rem .5rem;border-radius:10px;border:1px solid #e2e8f0;font-weight:600;background:#fff}


/* Tags + Therapist note */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.tag{display:inline-block;padding:.2rem .5rem;border:1px solid var(--ln,#e5e7eb);border-radius:999px;font-size:.75rem;color:#334155;background:#fff}
.note{margin-top:6px;padding:.5rem .6rem;border-left:3px solid var(--brand,#36AB9C);background:#f0fdfa;color:#0f5132;border-radius:6px}


/* === Activity card ordering helpers (safe minimal) === */
.tags { display:flex; flex-wrap:wrap; gap:.35rem; margin:.25rem 0 .15rem; }
.tag { font-size:.8rem; padding:.15rem .5rem; border-radius:999px; background:#eef6f5; color:#1b2b2a; }
.instructions { margin:.25rem 0; }
.note { margin:.35rem 0 .15rem; font-style: italic; opacity:.95; }
.tts-btn { margin:.2rem 0 .1rem; }


/* === Menu actions (search + add) row === */
.menu-actions { gap: .5rem; }
.menu-actions .inline.flex1 { display:flex; align-items:center; gap:.4rem; flex:1; min-width:0; }
.menu-actions input[type="search"] { flex:1; min-width:0; }
#btnAddCustom { white-space: nowrap; }


/* ======= Menu toolbar ======= */
.menu-toolbar{
  --ring:#10b981;
  --ink:#0f172a;
  --mut:#64748b;
  --line:#e5e7eb;
  --bg:#ffffff;
  --chip:#f1f5f9;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin:.75rem 0 1rem;
  padding:.5rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.menu-toolbar .toolbar-left{ flex:1; min-width:0; }
.menu-toolbar .input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:10px;
  padding:.45rem .6rem .45rem 2.15rem;
}
.menu-toolbar .input-wrap .icon{
  position:absolute; left:.6rem;
  width:18px; height:18px; fill:var(--mut);
}
.menu-toolbar input[type="search"]{
  width:100%; min-width:0; border:0; background:transparent;
  font-size:1rem; color:var(--ink); outline:none;
}
.menu-toolbar input[type="search"]::placeholder{ color:var(--mut); }

.menu-toolbar .toolbar-right{ flex:0 0 auto; }
.menu-toolbar .btn-add{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.5rem .85rem;
  font-weight:600; color:var(--ink);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.menu-toolbar .btn-add:hover{ background:#f8fafc; }
.menu-toolbar .btn-plus{
  display:inline-grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  background:#f1f5f9; font-size:18px; line-height:1;
}

/* Accessibility */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,1px,1px);white-space:nowrap;border:0;
}
.menu-toolbar .btn-add:focus-visible,
.menu-toolbar input[type="search"]:focus-visible,
.filters select:focus-visible,
.filters input[type="checkbox"]:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 60%, transparent);
  border-color:var(--ring);
}

/* Mobile stacking */
@media (max-width: 640px){
  .menu-toolbar{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .menu-toolbar .toolbar-right{ order:2; }
  .menu-toolbar .toolbar-left{ order:1; }
  .menu-toolbar .btn-add{ width:100%; justify-content:center; }
}

/* Filters cohesion */
.filters{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:.75rem .9rem;
  margin:.75rem 0 .5rem;
}
.filters label.inline,
.filters > label{
  margin-right:.75rem;
  margin-bottom:.35rem;
}

/* Sticky (opt-in via .sticky class) */
@supports (position: sticky){
  .filters.sticky, .menu-toolbar.sticky{
    position: sticky;
    top: var(--stickyTop, 64px);
    z-index: 2;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(120%) blur(6px);
  }
}

/* Compact: extra narrow devices */
@media (max-width: 360px){
  .menu-toolbar .btn-add .btn-text{ display:none; }
}



/* Disable sticky behavior for toolbar/filters (user preference) */
.menu-toolbar, .filters { position: static !important; top: auto !important; backdrop-filter: none !important; }




/* === Multi-select Tags (curated first + dynamic extras) === */
#tagSelect {
  min-width: 14rem;
  padding: .35rem .5rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}
@media (max-width: 640px){
  #tagSelect { width: 100%; min-width: 0; }
}




/* --- Tag multiselect UX polish & sizing --- */
label[for="tagSelect"]{ display:inline-flex; align-items:center; gap:.5rem; }
#tagSelect{
  min-width:18rem; max-width:100%;
  padding:.35rem .5rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}
.btn.ghost.small{ font-size:.9rem; padding:.35rem .6rem; border-radius:10px; border:1px solid #e5e7eb; background:#fff; }
@media (max-width:640px){ #tagSelect{ width:100%; min-width:0; } }




/* ================= Toolbar / Filters polish ================ */
.filters {
  border-radius: 14px;
  padding: 1rem .9rem;
  gap: .75rem 1rem;
}
/* Grid only if not already defined */
@supports (display: grid){
  .filters { display: grid; grid-template-columns: 1fr; }
  @media (min-width: 761px){
    .filters { grid-template-columns: 1fr; } /* keep simple & safe */
  }
}

/* Row helper */
.filters .row { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

/* Tag select + label */
label[for="tagSelect"]{ display:inline-flex; align-items:center; gap:.5rem; }
#tagSelect{
  min-width: 18rem;
  max-width: 100%;
  padding: .45rem .5rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size:16px; /* prevent iOS zoom */
}
@media (max-width: 640px){
  #tagSelect { width:100%; min-width:0; }
}

/* Clear button look */
.btn.ghost.small{
  font-size:.95rem;
  padding:.45rem .7rem;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
}

/* Sense checkbox enhancements: chip-like (progressive, non-breaking) */
.filters input[type="checkbox"]{ width:1.1rem; height:1.1rem; accent-color:#10b981; }
.filters input[type="checkbox"] + label{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .65rem; border:1px solid #e5e7eb; border-radius:999px;
  background:#fff; cursor:pointer; margin-right:.25rem;
}
.filters input[type="checkbox"]:checked + label{
  background:#e8faf3; border-color:#34d399;
}

/* Focus rings and motion */
button, select, .filters input[type="checkbox"] + label {
  transition: box-shadow .12s ease, transform .08s ease, border-color .12s ease;
}
button:active { transform: translateY(1px); }
:focus-visible { outline:2px solid #0ea5e9; outline-offset:2px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }




/* === Toolbar layout fix: use flex-wrap so controls sit inline and don't stretch === */
.filters{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1rem;
  padding: 1rem .9rem;
  border-radius:14px;
}
/* Keep each child size to content */
.filters > * { flex: 0 0 auto; }

/* Keep Tags label and Clear inline */
label[for="tagSelect"]{ display:inline-flex; align-items:center; gap:.5rem; margin-right:.25rem; }
#tagSelect{ min-width:16rem; max-width:100%; }
.btn.ghost.small{ display:inline-flex; align-items:center; justify-content:center; }

/* Sense pills inline, wrapping */
.filters .sense-chip,
.filters input[type="checkbox"] + label{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .65rem;
  border:1px solid #e5e7eb;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  margin: .2rem .25rem .2rem 0;
}
.filters input[type="checkbox"]{ width:1.1rem; height:1.1rem; accent-color:#10b981; margin-right:.25rem; }
.filters input[type="checkbox"]:checked + label{ background:#e8faf3; border-color:#34d399; }

/* Mobile: full-width select, controls wrap beneath neatly */
@media (max-width:640px){
  #tagSelect{ width:100%; min-width:0; }
}


/* Premium toggle pill */
.premium-toggle {display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #ddd;border-radius:20px;padding:4px 10px;font-size:14px;cursor:pointer;}
#premiumToggle {accent-color: var(--sg-brand, #36AB9C);}
#libGrid.hide-premium .card.is-premium { display: none !important; }


/* --- Force inline layout for Tags label + select (last-wins) --- */
fieldset.filters label[for="tagSelect"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  flex-direction: row !important;
  margin: 0 .6rem .4rem 0 !important;
}
fieldset.filters label[for="tagSelect"] > select#tagSelect {
  min-width: 180px;
  max-width: 52vw;
}
@media (min-width: 900px) {
  fieldset.filters label[for="tagSelect"] > select#tagSelect { max-width: 360px; }
}



/* --- Align tag selector and Clear tightly on one row --- */
fieldset.filters .tag-select-group{
  display:inline-flex !important;
  align-items:center !important;
  gap:.25rem !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
  margin:0 .6rem .4rem 0 !important;
}
/* remove stray margins */
fieldset.filters .tag-select-group > label.inline{ margin:0 !important; display:inline-flex; align-items:center; }
/* unify control heights across common select widgets */
fieldset.filters .tag-select-group #tagSelect{ width:auto !important; }
fieldset.filters .tag-select-group #tagClear{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; line-height:40px; padding:0 12px; margin:0 !important;
}
/* SlimSelect */
fieldset.filters .tag-select-group .ss-main{ height:40px; }
fieldset.filters .tag-select-group .ss-single-selected{ height:40px; line-height:40px; }
/* Choices.js */
fieldset.filters .tag-select-group .choices{ display:inline-flex; align-items:center; }
fieldset.filters .tag-select-group .choices__inner{ min-height:40px; }
/* Multiple Select (ms-choice) */
fieldset.filters .tag-select-group .ms-choice{ height:40px; line-height:40px; }
/* Small baseline nudge for Safari/iOS */
@supports (-webkit-touch-callout: none){
  fieldset.filters .tag-select-group #tagClear{ position:relative; top:-1px; }
}


/* Soft highlight for current day in Planner */
.day.is-today{
  background: rgba(54,171,156,0.08); /* brand teal, very soft */
  border: 1px solid rgba(54,171,156,0.18);
  border-radius: 12px;
}
.day.is-today h4{ color: #2b746b; }
.badge-today{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:#36AB9C;
  vertical-align:middle;
  margin-left:.25rem;
}

/* time chip inside planner week pills */
.pill-time{
  font-weight:600;
  margin-right:.35rem;
  opacity:.9;
}

.card{ border-left:6px solid var(--cat, transparent); }


/* SG Collapsible note */
.note { --note-bg:#e7f5ef; background:var(--note-bg); border-radius:12px; margin-top:8px; }
.note-c-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-weight:600; background:transparent; border:0; cursor:pointer; }
.note-c-caret{ transition: transform .2s ease; }
.note-c-open .note-c-caret{ transform: rotate(180deg); }
.note-c-panel{ padding:8px 12px 12px; }



/* Favorites modal improvements */
.sg-auth-modal{ 
  display:flex; flex-direction:column; 
  max-height:92dvh; overflow:hidden; 
}
@supports not (max-height: 92dvh){
  .sg-auth-modal{ max-height:92vh; }
}
.modal-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  max-height: calc(92dvh - 56px - 64px);
}
@supports not (height: 100dvh){
  .modal-body{ max-height: calc(92vh - 56px - 64px); }
}
.modal-footer{
  position: sticky; bottom:0; background:#fff;
  border-top:1px solid #eee;
  display:flex; gap:12px; justify-content:flex-end;
  padding:12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}



/* Premium modal tweaks */
#premiumModal .plans { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
#premiumModal .benefits { margin: 0 0 8px; padding-left: 18px; }
#premiumModal .btn-accent { font-weight: 700; }



/* Premium modal must not auto-open on load */
#premiumBackdrop[hidden], #premiumModal[hidden] { display: none !important; }
#premiumBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); z-index: 1000; }
#premiumModal { position: fixed; left: 50%; top: 48px; transform: translateX(-50%); max-width: 560px; width: calc(100% - 32px); z-index: 1001; }



/* --- Premium modal wired buttons & educator panel --- */
.premium-plans { display:flex; gap:.5rem; flex-wrap:wrap; }
.btn-pill.is-best { font-weight:600; box-shadow:0 0 0 2px var(--accent-500, #ffd54f) inset; }
.btn-ghost { background:transparent; border:1px solid var(--border-200, #e5e7eb); }
.edu-panel { display:grid; gap:.5rem; margin-top:.5rem; }
.btn-premium { display:inline-block; }
.redeem-link { display:inline-block; margin-top:.25rem; font-size:.9rem; text-decoration:underline; }



/* --- Premium modal polish --- */
.sg-auth-backdrop{ z-index: 100000; }
.sg-auth-modal{ z-index: 100001; max-width: 640px; }
.sg-auth-modal .modal-body{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.sg-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.sg-tabs button{ border:1px solid #cbd5e1; background:#fff; border-radius:999px; padding:.4rem .8rem; cursor:pointer; }
.sg-tabs button.is-active{ background:#eef9f6; border-color:#10b981; }
.sg-field{ display:grid; gap:6px; margin:8px 0 12px; }
.sg-field select{ padding:.5rem .6rem; font:inherit; border:1px solid #cbd5e1; border-radius:10px; background:#fff; }
.sg-plan{ display:block; padding:.65rem .8rem; margin:.25rem 0; border:1px solid #cbd5e1; border-radius:10px; text-decoration:none; }
.sg-plan:hover{ background:#f8fafc; }