/* ═══════════════════════════════════════════════════════════════════════
   _mobile.css — Native mobile & tablet experience layer
   Appended to app.css. Overrides must use same or higher specificity.

   Breakpoint tokens (canonical — all other files should conform):
     xs  : max-width 479px   (small phones, portrait)
     sm  : max-width 767px   (all phones)
     md  : max-width 1023px  (tablet portrait + landscape phone)
     lg  : min-width 1024px  (desktop)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. CSS CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
  --touch-min:        44px;   /* WCAG 2.5.5 / Apple HIG minimum */
  --safe-top:         env(safe-area-inset-top,    0px);
  --safe-right:       env(safe-area-inset-right,  0px);
  --safe-bottom:      env(safe-area-inset-bottom, 0px);
  --safe-left:        env(safe-area-inset-left,   0px);
  --mobile-radius:    16px;
  --card-gap:         12px;
  --page-px:          16px;   /* horizontal page padding on mobile */
}

/* ── 2. GLOBAL TOUCH TARGETS ──────────────────────────────────────── */
/* Every interactive element gets at least 44×44px tap zone */
a,
button,
[role="button"],
input[type="checkbox"],
input[type="radio"],
select,
.bn-item,
.bn-sub-link,
.crud-btn,
.pl-action-btn,
.sidebar-link,
.table-action,
.dc-carousel__arrow {
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}

/* Inputs and textareas need 44px height on mobile */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="url"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* prevent iOS zoom-on-focus */
    border-radius: 10px;
  }

  /* Checkboxes and radios: 20px visual with 44px tap padding */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: unset;
  }
}

/* ── 3. SAFE-AREA INSET HANDLING ──────────────────────────────────── */
/* Notch / Dynamic Island / home indicator coverage */

/* Bottom nav already accounts for safe-area; other sticky elements: */
.topbar,
.crud-bulkbar,
.db-sticky-stats,
.pl-hd {
  padding-left:  max(var(--page-px), var(--safe-left));
  padding-right: max(var(--page-px), var(--safe-right));
}

/* Modals on notched phones */
@media (max-width: 767px) {
  .crud-modal-box {
    padding-bottom: max(1.5rem, calc(var(--safe-bottom) + 1rem));
  }
}

/* ── 4. LAYOUT — SIDEBAR DRAWER ON MOBILE ────────────────────────── */
@media (max-width: 767px) {
  /* CRITICAL: switch from "fixed shell + .main internal scroll" to
     "natural body scroll" on mobile. This matches the website + login
     pages, fixes iOS 100vh quirks, and makes vertical scrolling work
     reliably across every authenticated page (dashboard, plots, emi,
     refunds, profile, etc.). */
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }

  /* App shell: single column, height grows with content (no 100vh) */
  .app {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "topbar"
      "main" !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: 100vw;
    overflow: visible !important;
  }

  /* Main area: NOT a scroll container on mobile — body scrolls instead */
  .main {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    overscroll-behavior-y: auto !important;
  }

  /* Topbar stays pinned at viewport top via sticky body context */
  .topbar {
    position: sticky !important;
    top: 0;
    z-index: 50;
  }

  /* Sidebar hides off-screen left by default */
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    width: min(280px, 85vw) !important;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1),
                box-shadow .25s ease;
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--safe-bottom) + 1rem);
  }

  /* Sidebar open state — toggled by existing crud.js or hamburger */
  .sidebar.is-open,
  [data-sidebar="open"] .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,.35);
  }

  /* Scrim behind open sidebar */
  .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  [data-sidebar="open"] .sidebar-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* Main area: full width, extra bottom padding for bottom-nav */
  .main {
    padding: 0 var(--page-px)
             calc(var(--bottom-nav-h, 64px) + var(--safe-bottom) + 1.5rem)
             var(--page-px) !important;
  }
}

/* Tablet: narrower sidebar — also switch to body scroll for consistency */
@media (min-width: 768px) and (max-width: 1023px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .app {
    grid-template-columns: 220px 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .main {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .sidebar {
    width: 220px !important;
  }
  .topbar {
    position: sticky !important;
    top: 0;
  }
}

/* ── 5. TOPBAR — MOBILE ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .topbar {
    height: 56px;
    padding: 0 var(--page-px);
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Hamburger button — shows the sidebar on mobile */
  .topbar__hamburger {
    display: flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Collapse search bar to icon on very small phones */
  .topbar__search {
    display: none;
  }
  .topbar__search-icon {
    display: flex !important;
  }
}

/* ── 6. DATA TABLES → CARD LISTS ON MOBILE ───────────────────────── */
/*
  Pattern: on ≤767px, any .crud-table, .data-table, or table with
  [data-mobile="cards"] becomes a stacked card list.
  Each <tr> becomes a card; <td> rows are labeled via data-label attr.
*/
@media (max-width: 767px) {
  /* Generic table wrapper scroll — fallback for tables not opted into card mode */
  .table-responsive,
  .crud-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--mobile-radius);
    margin: 0 calc(-1 * var(--page-px));
    padding: 0 var(--page-px);
  }

  /* Card-mode tables */
  table[data-mobile="cards"],
  .crud-table[data-mobile="cards"] {
    display: block;
    border: none;
    background: transparent;
  }
  table[data-mobile="cards"] thead,
  .crud-table[data-mobile="cards"] thead {
    display: none; /* hide column headers — labels come from data-label */
  }
  table[data-mobile="cards"] tbody,
  table[data-mobile="cards"] tr,
  .crud-table[data-mobile="cards"] tbody,
  .crud-table[data-mobile="cards"] tr {
    display: block;
  }
  table[data-mobile="cards"] tr,
  .crud-table[data-mobile="cards"] tr {
    background: var(--surface, #fff);
    border-radius: var(--mobile-radius);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    margin-bottom: var(--card-gap);
    padding: 14px 16px;
    position: relative;
  }
  table[data-mobile="cards"] td,
  .crud-table[data-mobile="cards"] td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border: none;
    font-size: .875rem;
    gap: 8px;
  }
  table[data-mobile="cards"] td::before,
  .crud-table[data-mobile="cards"] td::before {
    content: attr(data-label);
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex: 0 0 auto;
    min-width: 80px;
  }
  table[data-mobile="cards"] td:last-child,
  .crud-table[data-mobile="cards"] td:last-child {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,.07));
    justify-content: flex-end;
  }
  table[data-mobile="cards"] td:last-child::before,
  .crud-table[data-mobile="cards"] td:last-child::before {
    display: none;
  }

  /* Bulk action bar: fixed bottom */
  .crud-bulkbar {
    position: fixed !important;
    bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-bottom));
    left: 0;
    right: 0;
    border-radius: 0 !important;
    z-index: 100;
    padding-bottom: 8px;
  }
}

/* ── 7. PAGE HEADER — STACK ON MOBILE ────────────────────────────── */
@media (max-width: 767px) {
  /* Generic two-part page headers (title + actions) */
  .page-header,
  .pl-hd,
  .rfi-page-header,
  .rfa-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px var(--page-px) 10px !important;
  }
  .pl-hd__actions,
  .rfi-page-header .btn,
  .rfa-page-header .btn {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .pl-hd__actions a,
  .pl-hd__actions button {
    flex: 1;
    justify-content: center;
  }
}

/* ── 8. KPI STRIPS — 2-COL GRID ON MOBILE ───────────────────────── */
@media (max-width: 767px) {
  /* Plots KPI strip */
  .pl-kpi-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 var(--page-px) !important;
  }
  .pl-kpi {
    flex-direction: row !important;
    gap: 10px;
    padding: 10px 12px !important;
    border-radius: 12px;
  }

  /* Dashboard KPI cards */
  .db-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Refund KPI bar */
  .rfi-kpi-bar,
  .rfa-kpi-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
}

@media (max-width: 479px) {
  .pl-kpi-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .pl-kpi {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    padding: 8px 6px !important;
    font-size: .75rem;
  }
  .pl-kpi__icon { font-size: .9rem; }
  .pl-kpi__val  { font-size: 1rem; }
  .pl-kpi__lbl  { font-size: .65rem; }
}

/* ── 9. FILTER CARDS — STACK ON MOBILE ──────────────────────────── */
@media (max-width: 767px) {
  .pl-filter-card {
    margin: 0 var(--page-px);
    border-radius: var(--mobile-radius);
    padding: 12px !important;
  }
  .pl-filter-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pl-filter-search,
  .pl-filter-select {
    width: 100% !important;
    height: 44px;
  }
  .pl-filter-row button {
    height: 44px;
    border-radius: 10px;
  }
  .pl-adv-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
}

/* ── 10. PLOT CARDS — 1-COL ON MOBILE ───────────────────────────── */
@media (max-width: 767px) {
  /* Grid view: single column */
  .pl-grid {
    grid-template-columns: 1fr !important;
    padding: 0 var(--page-px) !important;
  }

  /* Plot card: horizontal layout on mobile */
  .pl-card {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: 90px;
    border-radius: 12px;
    overflow: hidden;
  }
  .pl-card__stripe {
    width: 5px !important;
    height: auto !important;
    grid-row: 1 / -1;
  }
  .pl-card__body {
    padding: 10px 12px !important;
  }
  .pl-card__footer {
    grid-column: 2;
    padding: 0 12px 10px !important;
    border-top: none !important;
  }

  /* List view: compact rows */
  .pl-list .pl-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px var(--page-px);
    gap: 4px;
  }
  .pl-row-actions { width: 100%; justify-content: flex-end; }
}

/* ── 11. MODALS — FULL-SCREEN SHEET ON MOBILE ───────────────────── */
@media (max-width: 767px) {
  .crud-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .crud-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--safe-bottom) + 1.5rem) !important;
    /* Slide up animation */
    animation: mobileSheetIn .3s cubic-bezier(.4,0,.2,1);
  }
  @keyframes mobileSheetIn {
    from { transform: translateY(100%); opacity: .6; }
    to   { transform: translateY(0);   opacity: 1; }
  }

  /* Drag handle */
  .crud-modal-box::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border, rgba(0,0,0,.12));
    border-radius: 2px;
    margin: 10px auto 14px;
  }

  /* Modal header: sticky */
  .crud-modal-header {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
    border-radius: 20px 20px 0 0;
    padding-top: 0 !important;
  }

  /* Footer actions: row at bottom */
  .crud-modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding: 12px 20px calc(var(--safe-bottom) + 12px);
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,.07));
    display: flex;
    gap: 8px;
  }
  .crud-modal-footer button,
  .crud-modal-footer a {
    flex: 1;
    justify-content: center;
  }
}

/* ── 12. BOTTOM NAV ENHANCEMENTS ─────────────────────────────────── */
@media (max-width: 767px) {
  /* Sub-nav panel: wider on narrow phones */
  .bn-subnav {
    left: var(--page-px) !important;
    right: var(--page-px) !important;
    width: auto !important;
    border-radius: 16px !important;
  }

  /* Links: full width, 44px height */
  .bn-sub-link {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    min-height: var(--touch-min);
  }

  /* Bottom nav rules moved to bottom-nav-fix.css (single source of truth).
     Old rules left disabled to prevent regression — do not re-enable.
  .bottom-nav {
    padding-bottom: max(8px, var(--safe-bottom)) !important;
    height: calc(60px + max(0px, var(--safe-bottom))) !important;
  } */

  /* Active tab indicator: larger dot */
  .bn-item.is-active .bn-item__dot {
    width: 5px;
    height: 5px;
  }
}

@media (max-width: 479px) {
  /* Sub-nav grid: 2 cols on tiny phones */
  .bn-subnav-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Nav labels: smaller */
  .bn-item__label {
    font-size: 10px !important;
  }
}

/* ── 13. DASHBOARD MOBILE IMPROVEMENTS ───────────────────────────── */
@media (max-width: 767px) {
  /* Main content padding clears topbar + extra breathing room */
  .main[data-page="dashboard"] {
    padding-top: 8px !important;
  }

  /* Announce banner: 2-line stacked */
  .db-announce {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px;
    padding: 10px 14px !important;
    border-radius: 12px;
    margin: 0 var(--page-px) 8px !important;
  }
  .db-announce__close {
    position: absolute;
    top: 10px;
    right: 12px;
  }

  /* PTR indicator: centered */
  .db-ptr-indicator {
    padding-top: max(12px, var(--safe-top)) !important;
  }

  /* Sticky stats bar: horizontal scroll if too many items */
  .db-sticky-stats {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    scrollbar-width: none;
  }
  .db-sticky-stats::-webkit-scrollbar { display: none; }
  .db-sticky-stat { flex: 0 0 auto; padding: 0 10px; }

  /* Goal rings: 2×2 grid */
  .db-goal-rings {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Quick actions: 2×2 grid */
  .db-quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .db-qa-card {
    padding: 14px !important;
    border-radius: 14px;
  }

  /* Activity feed: full-width */
  .db-activity-feed {
    margin: 0 !important;
    border-radius: var(--mobile-radius);
  }
  .db-activity-item {
    padding: 10px 12px !important;
  }

  /* Heatmap: horizontal scroll */
  .db-heatmap-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  /* FAB: visible on mobile */
  .db-fab-wrap {
    display: flex !important;
    bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-bottom) + 12px) !important;
    right: max(16px, var(--safe-right)) !important;
  }
}

/* ── 14. FORMS — MOBILE-FIRST ────────────────────────────────────── */
@media (max-width: 767px) {
  /* Two-column form grids collapse to single column */
  .form-grid,
  .crud-form-grid,
  .profile-grid {
    grid-template-columns: 1fr !important;
  }

  /* Labels: above inputs (never side-by-side on small screens) */
  .form-group,
  .crud-field {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .form-label,
  .crud-label {
    margin-bottom: 4px;
    font-weight: 600;
  }

  /* Submit buttons: full width */
  .form-actions,
  .crud-form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .form-actions .btn,
  .crud-form-actions button {
    width: 100%;
    justify-content: center;
  }
}

/* ── 15. PAGINATION — COMPACT ON MOBILE ──────────────────────────── */
@media (max-width: 767px) {
  .pagination {
    gap: 4px !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .pagination::-webkit-scrollbar { display: none; }
  .pagination .page-item:not(.active):not(.prev):not(.next) {
    display: none; /* hide middle pages, keep prev/next/active */
  }
  .pagination .page-item.active,
  .pagination .page-item.prev,
  .pagination .page-item.next {
    display: flex !important;
  }
  .pagination a,
  .pagination button {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    justify-content: center;
  }

  /* Compact pagination with ... elision (handled by PHP already) */
  .crud-pagination-info {
    font-size: .8rem;
    text-align: center;
  }
}

/* ── 16. NOTIFICATIONS PAGE — MOBILE ─────────────────────────────── */
@media (max-width: 767px) {
  .notif-list-item {
    padding: 12px var(--page-px) !important;
    border-radius: 0 !important;
  }
  .notif-list-item + .notif-list-item {
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,.06));
  }
}

/* ── 17. LANDSCAPE PHONE HANDLING ────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  /* Bottom-nav landscape rules moved to bottom-nav-fix.css.
  .bottom-nav {
    height: 52px !important;
    padding-bottom: 4px !important;
  }
  .main {
    padding-bottom: calc(52px + var(--safe-bottom) + 1rem) !important;
  }
  */

  /* Topbar: shorter */
  .topbar {
    height: 48px;
  }

  /* Sub-nav panels: scrollable if content overflows height */
  .bn-subnav {
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Dashboard: horizontal scroll for KPI strip in landscape */
  .pl-kpi-strip,
  .db-kpi-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 18. TABLET LAYOUT (768–1023px) ──────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 2-column grids for cards */
  .dc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* KPI strips: 3 per row */
  .db-kpi-grid,
  .pl-kpi-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Quick actions: 3 per row */
  .db-quick-actions {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Filter rows: 2 per line */
  .pl-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pl-filter-search {
    grid-column: 1 / -1;
  }
  .pl-filter-row button {
    grid-column: 1 / -1;
    justify-self: end;
    width: auto;
  }

  /* Modal: centered, not full-screen */
  .crud-modal-box {
    max-width: 640px !important;
    border-radius: 16px !important;
  }
}

/* ── 19. PRINT OVERRIDES ─────────────────────────────────────────── */
@media print {
  .sidebar,
  .topbar,
  .bottom-nav,
  .db-fab-wrap,
  .crud-bulkbar,
  .pl-filter-card,
  .db-announce,
  .db-pwa-banner { display: none !important; }

  .app { display: block !important; }
  .main { padding: 0 !important; }
  .dc-carousel { display: block !important; overflow: visible !important; }
  .dc-carousel__card { width: 100% !important; margin-bottom: 1rem; }
}

/* ── 20. ACCESSIBILITY — FOCUS VISIBLE ───────────────────────────── */
/* Ensure visible focus ring on touch devices (not just keyboard) */
@media (pointer: coarse) {
  :focus-visible {
    outline: 3px solid var(--accent, #2563eb) !important;
    outline-offset: 2px;
  }
  /* Larger interactive elements for fat fingers */
  .crud-btn.crud-btn--sm,
  .pl-action-btn {
    padding: 10px 16px !important;
    min-height: var(--touch-min) !important;
  }
}

/* ── 21. SCROLL PERFORMANCE ──────────────────────────────────────── */
/* Already have will-change on carousel; add containment for feed items */
.db-activity-item,
.notif-list-item,
.rfi-stacked-item,
.pl-row {
  contain: layout style;
}

/* Momentum scrolling on all scroll containers */
.dc-carousel,
.crud-table-wrap,
.table-responsive,
.bn-subnav,
.db-heatmap-wrap,
.pagination {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── 22. TYPOGRAPHY FLUID SCALING ────────────────────────────────── */
/* clamp(min, preferred, max) — scales smoothly between 360px and 1280px */
.db-kpi-val,
.pl-kpi__val,
.rfi-kpi-num {
  font-size: clamp(1.1rem, 3vw, 1.75rem);
}

.db-greeting-name,
.page-title {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
}

.db-announce__text,
.card-body,
.dc-grid__card .card-body {
  font-size: clamp(.8125rem, 2vw, .9375rem);
}

/* ── 23. PULL-TO-REFRESH REFINEMENTS ─────────────────────────────── */
@media (max-width: 767px) {
  .db-ptr-indicator {
    position: fixed;
    top: max(56px, calc(56px + var(--safe-top)));
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    transition: transform .2s ease, opacity .2s ease;
    z-index: 60;
    pointer-events: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: .8rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }
  .db-ptr-indicator.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* ── 24. EMPTY STATES — MOBILE SIZING ───────────────────────────── */
@media (max-width: 767px) {
  .crud-empty,
  .pl-empty,
  .dc-empty {
    padding: 40px var(--page-px) !important;
  }
  .crud-empty__icon,
  .pl-empty__icon { font-size: 2.5rem; }
  .crud-empty__title,
  .pl-empty__title { font-size: 1.1rem; }
}

/* ── 25. CARDS GRID — MOBILE ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Smart summary: full width */
  .dc-smart {
    margin: 0 !important;
    border-radius: var(--mobile-radius) !important;
  }

  /* Interactive cards: touch-safe padding */
  .dc-icard {
    padding: 14px !important;
  }
  .dc-icard:active {
    transform: scale(.98);
    transition: transform .1s ease;
  }

  /* Stack view: full width */
  .dc-stack__item {
    border-radius: var(--mobile-radius) !important;
  }
}

/* ── 26. SETTINGS / ADMIN TABLES — MOBILE ───────────────────────── */
@media (max-width: 767px) {
  /* Settings groups: single column */
  .settings-grid,
  .addon-grid {
    grid-template-columns: 1fr !important;
  }

  /* Permissions table: scrollable */
  .perm-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--page-px));
    padding: 0 var(--page-px);
  }

  /* Audit log table: card mode */
  .audit-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,.07));
    border-radius: 0;
    box-shadow: none;
  }
  .audit-table th { display: none; }
  .audit-table td { padding: 4px 4px; font-size: .8rem; }
}

/* ── 27. REPORTS PAGE MOBILE ──────────────────────────────────────── */
@media (max-width: 767px) {
  /* Aging grid: 2 columns */
  .reports-aging-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Chart containers: full width, scrollable */
  .reports-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .reports-chart-wrap canvas {
    min-width: 300px;
  }
}

/* ── 28. SIDEBAR SCRIM ELEMENT (injected by JS) ──────────────────── */
/* If the sidebar scrim isn't already in the DOM, create it via ::after on body */
@media (max-width: 767px) {
  body[data-sidebar="open"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 199;
    backdrop-filter: blur(2px);
  }
}

/* ── 29. EMI TIMELINE — PERFORMANCE & LAYOUT PATCHES ────────────── */

/* Disable per-item backdrop-filter: with 12–48 items each blurring,
   scroll jank is severe on mid-range Android. */
@media (max-width: 767px) {
  .emi-tl-item,
  .emi-hero-card,
  .emi-side-stat {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--surface, #fff) !important;
  }
  [data-theme="dark"] .emi-tl-item {
    background: rgba(30,41,59,.92) !important;
  }
  [data-theme="dark"] .emi-hero-card,
  [data-theme="dark"] .emi-side-stat {
    background: rgba(30,41,59,.96) !important;
  }
}

/* 2-row grid on xs phones prevents 3-column squeeze */
@media (max-width: 479px) {
  .emi-tl-item {
    grid-template-columns: 36px 1fr !important;
    grid-template-rows: auto auto;
    gap: .45rem .55rem !important;
    padding: .7rem .85rem !important;
  }
  .emi-tl-num {
    grid-row: 1 / span 2;
    align-self: flex-start;
    width: 36px !important;
    height: 36px !important;
    font-size: .72rem !important;
    border-radius: 10px !important;
  }
  .emi-tl-body  { grid-column: 2; grid-row: 1; }
  .emi-tl-right {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .35rem !important;
    padding-top: .35rem;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  [data-theme="dark"] .emi-tl-right { border-top-color: rgba(255,255,255,.08); }
  .emi-tl-right__amt { font-size: .88rem !important; margin-right: auto; }
}

/* Allow body sub-text and title to wrap on mobile */
@media (max-width: 767px) {
  .emi-tl-body__sub {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.45;
  }
  .emi-hero-info__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

/* ── 30. GLOBAL SCROLL & OVERSCROLL ─────────────────────────────── */
.emi-tl-item--paid { contain: layout style; }

.main { overscroll-behavior-y: contain; }

.main,
.emi-timeline-wrap,
.crud-table-wrap,
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ── 31. REFERRAL WALLET — WITHDRAW BUTTON + HEADER GROUP ────────── */
.ref-wallet-header__btns {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}
.ref-wallet-withdraw-btn {
  display: inline-flex;
  align-items: center;
  font-size: .78rem; font-weight: 700;
  padding: .3rem .8rem;
  background: linear-gradient(135deg,#059669,#10b981);
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.ref-wallet-withdraw-btn:hover  { opacity: .88; color: #fff; }
.ref-wallet-withdraw-btn:active { transform: scale(.95); }

/* ── 32. REFERRAL PAGE MOBILE LAYOUT FIXES ───────────────────────── */
@media (max-width: 479px) {
  .ref-kpi-wrap { padding-left: .1rem; padding-right: .1rem; }
  .ref-copy-strip { gap: .35rem; }
  .ref-copy-btn { padding: .32rem .65rem; font-size: .7rem; }
  .ref-wallet-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .ref-wallet-kpi:nth-child(2) { border-right: none; }
  .ref-wallet-header { flex-wrap: wrap; gap: .4rem; }
  .ref-wallet-header__btns { flex-wrap: wrap; gap: .35rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v17 — Premium bottom-nav + section theming (EMI / Plots / Referrals)
   Elevates the nav into a floating glass pill, gives each section its
   own accent color glow, and polishes the elevated EMI centre button.
   ═══════════════════════════════════════════════════════════════════════ */

/* Section accent palette (matches footer.php $bnPanels colors) */
:root {
  --bn-plots-c:   #7c3aed;  /* purple */
  --bn-plots-rgb: 124,58,237;
  --bn-emi-c:     #059669;  /* emerald */
  --bn-emi-rgb:   5,150,105;
  --bn-ref-c:     #d97706;  /* amber */
  --bn-ref-rgb:   217,119,6;
  --bn-life-c:    #e11d48;  /* rose */
  --bn-life-rgb:  225,29,72;
}

/* ── Floating glass pill bottom-nav — DISABLED ────────────────────────
   These rules previously fought bottom-nav-fix.css and broke the layout
   (only 3 of 6 tabs visible on phones). They are commented out in bulk
   below. The single source of truth for the bottom-nav now lives in
   assets/css/bottom-nav-fix.css. Do not re-enable.
   ─────────────────────────────────────────────────────────────────── */
@media not all {
@media (max-width: 1199px) {
  .bottom-nav {
    /* Float above the page surface with margin from edges */
    margin: 0 .65rem;
    margin-bottom: max(env(safe-area-inset-bottom, 0), 0px);
    border-radius: 26px 26px 0 0;
    border: 1px solid rgba(255,255,255,.32);
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    backdrop-filter: saturate(200%) blur(28px);
    box-shadow:
      0 -1px 0 rgba(255,255,255,.85) inset,
      0 -10px 32px -2px rgba(13,27,46,.10),
      0 -22px 48px -12px rgba(124,58,237,.07);
    overflow: visible;
  }
  [data-theme="dark"] .bottom-nav {
    background: rgba(10,15,28,.82);
    border-color: rgba(255,255,255,.06);
    box-shadow:
      0 -1px 0 rgba(255,255,255,.04) inset,
      0 -10px 32px -2px rgba(0,0,0,.55),
      0 -22px 48px -12px rgba(124,58,237,.18);
  }

  /* Subtle gradient sheen above the pill (premium depth) */
  .bottom-nav::before {
    content: '';
    position: absolute;
    top: -1px; left: 18%; right: 18%; height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(124,58,237,.45) 30%,
      rgba(37,99,235,.55) 50%,
      rgba(217,119,6,.45) 70%,
      transparent 100%);
    border-radius: 2px;
    opacity: .6;
    pointer-events: none;
  }

  /* Premium tab base */
  .bottom-nav__item {
    border-radius: 18px;
    transition: color .2s ease, transform .15s cubic-bezier(.34,1.36,.64,1);
  }

  /* Replace top-line indicator with a soft gradient pill */
  .bottom-nav__item.is-active::before {
    top: 50%; left: 50%;
    width: 46px; height: 32px;
    transform: translate(-50%,-50%);
    background: linear-gradient(135deg,
      rgba(var(--brand-rgb), .14),
      rgba(124,58,237, .12));
    border-radius: 14px;
    border: 1px solid rgba(var(--brand-rgb), .18);
    box-shadow: 0 2px 8px -2px rgba(var(--brand-rgb), .25);
    z-index: -1;
  }

  /* ── PLOTS tab — purple accent ────────────────────────────── */
  .bottom-nav__item[data-bn-tab="plots"].is-active {
    color: var(--bn-plots-c) !important;
  }
  .bottom-nav__item[data-bn-tab="plots"].is-active::before {
    background: linear-gradient(135deg,
      rgba(var(--bn-plots-rgb), .16),
      rgba(var(--bn-plots-rgb), .08));
    border-color: rgba(var(--bn-plots-rgb), .25);
    box-shadow:
      0 2px 10px -2px rgba(var(--bn-plots-rgb), .30),
      0 0 0 1px rgba(var(--bn-plots-rgb), .08);
  }
  .bottom-nav__item[data-bn-tab="plots"].is-active .bottom-nav__icon svg {
    filter: drop-shadow(0 2px 6px rgba(var(--bn-plots-rgb), .55));
  }

  /* ── REFERRALS tab — amber accent + sparkle hint ─────────── */
  .bottom-nav__item[data-bn-tab="referral"].is-active {
    color: var(--bn-ref-c) !important;
  }
  .bottom-nav__item[data-bn-tab="referral"].is-active::before {
    background: linear-gradient(135deg,
      rgba(var(--bn-ref-rgb), .18),
      rgba(245,158,11, .10));
    border-color: rgba(var(--bn-ref-rgb), .28);
    box-shadow:
      0 2px 10px -2px rgba(var(--bn-ref-rgb), .35),
      0 0 0 1px rgba(var(--bn-ref-rgb), .10);
  }
  .bottom-nav__item[data-bn-tab="referral"].is-active .bottom-nav__icon svg {
    filter: drop-shadow(0 2px 6px rgba(var(--bn-ref-rgb), .55));
  }

  /* ── HOME tab — brand blue accent ─────────────────────────── */
  .bottom-nav__item[data-bn-tab="home"].is-active {
    color: var(--brand) !important;
  }
  .bottom-nav__item[data-bn-tab="home"].is-active::before {
    background: linear-gradient(135deg,
      rgba(var(--brand-rgb), .16),
      rgba(99,102,241, .10));
    border-color: rgba(var(--brand-rgb), .28);
    box-shadow: 0 2px 10px -2px rgba(var(--brand-rgb), .35);
  }
  .bottom-nav__item[data-bn-tab="home"].is-active .bottom-nav__icon svg {
    filter: drop-shadow(0 2px 6px rgba(var(--brand-rgb), .55));
  }

  /* ── LIFE tab — rose accent ───────────────────────────────── */
  .bottom-nav__item[data-bn-tab="life"].is-active {
    color: var(--bn-life-c) !important;
  }
  .bottom-nav__item[data-bn-tab="life"].is-active::before {
    background: linear-gradient(135deg,
      rgba(var(--bn-life-rgb), .14),
      rgba(244,63,94, .08));
    border-color: rgba(var(--bn-life-rgb), .25);
    box-shadow: 0 2px 10px -2px rgba(var(--bn-life-rgb), .30);
  }

  /* ── PROFILE tab — cyan accent ────────────────────────────── */
  .bottom-nav__item[data-bn-tab="profile"].is-active {
    color: #0891b2 !important;
  }
  .bottom-nav__item[data-bn-tab="profile"].is-active::before {
    background: linear-gradient(135deg,
      rgba(8,145,178,.14),
      rgba(14,165,233,.08));
    border-color: rgba(8,145,178,.25);
    box-shadow: 0 2px 10px -2px rgba(8,145,178,.30);
  }
}

/* ── EMI elevated centre button — premium FAB polish ─────────── */
@media (max-width: 1199px) {
  .bottom-nav__item--emi {
    /* Lift further above the bar */
    z-index: 2;
  }
  .bottom-nav__item--emi .bottom-nav__icon {
    width: 50px !important; height: 50px !important;
    margin-top: -16px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
    box-shadow:
      0 0 0 4px rgba(255,255,255,.85),
      0 6px 18px rgba(5,150,105,.42),
      0 12px 32px -4px rgba(5,150,105,.32),
      inset 0 1px 0 rgba(255,255,255,.35);
    border: 0;
    /* Subtle continuous breathing animation when not active */
    animation: emiBnBreathe 3.4s ease-in-out infinite;
  }
  [data-theme="dark"] .bottom-nav__item--emi .bottom-nav__icon {
    box-shadow:
      0 0 0 4px rgba(10,15,28,.85),
      0 6px 18px rgba(5,150,105,.5),
      0 12px 32px -4px rgba(5,150,105,.4),
      inset 0 1px 0 rgba(255,255,255,.20);
  }
  @keyframes emiBnBreathe {
    0%, 100% { box-shadow:
      0 0 0 4px rgba(255,255,255,.85),
      0 6px 18px rgba(5,150,105,.42),
      0 12px 32px -4px rgba(5,150,105,.32),
      inset 0 1px 0 rgba(255,255,255,.35); }
    50% { box-shadow:
      0 0 0 4px rgba(255,255,255,.85),
      0 8px 22px rgba(5,150,105,.55),
      0 16px 38px -4px rgba(5,150,105,.42),
      inset 0 1px 0 rgba(255,255,255,.4); }
  }
  .bottom-nav__item--emi .bottom-nav__icon svg {
    width: 24px !important; height: 24px !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
  }

  /* When EMI active — pulse ring */
  .bottom-nav__item--emi.is-active .bottom-nav__icon {
    animation: emiBnPulse 1.6s ease-in-out infinite;
  }
  @keyframes emiBnPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
  }

  /* Tap feedback */
  .bottom-nav__item--emi:active .bottom-nav__icon {
    transform: scale(.92);
    animation: none;
  }

  /* EMI label always emerald */
  .bottom-nav__item--emi .bottom-nav__label {
    color: var(--bn-emi-c) !important;
    font-weight: 700;
  }
}
} /* close @media not all wrapper — see comment above for rationale */

/* ── Premium badge polish (notification dot / counts) ────────── */
@media (max-width: 1199px) {
  .bn-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 6px rgba(220,38,38,.45),
                0 0 0 2px var(--bg-elev, #fff);
    font-weight: 800;
    animation: bnBadgePop .35s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes bnBadgePop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .bn-badge--brand {
    background: linear-gradient(135deg, var(--brand), #6366f1);
    box-shadow: 0 2px 6px rgba(var(--brand-rgb), .45),
                0 0 0 2px var(--bg-elev, #fff);
  }
}

/* ── Sub-nav panel — section-color theming ───────────────────── */
.bn-subnav__panel {
  /* Premium glass surface */
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  box-shadow:
    0 -2px 0 rgba(255,255,255,.6) inset,
    0 -16px 48px -8px rgba(13,27,46,.18),
    0 -24px 64px -16px rgba(var(--bnp-accent-rgb, 37,99,235),.18);
  border-top: 1px solid rgba(var(--bnp-accent-rgb, 37,99,235),.22);
}
[data-theme="dark"] .bn-subnav__panel {
  background: rgba(13,18,32,.94);
  box-shadow:
    0 -2px 0 rgba(255,255,255,.05) inset,
    0 -16px 48px -8px rgba(0,0,0,.6),
    0 -24px 64px -16px rgba(var(--bnp-accent-rgb, 37,99,235),.30);
}

/* Sub-nav header gets accent gradient */
.bn-subnav__hd {
  background: linear-gradient(135deg,
    rgba(var(--bnp-accent-rgb, 37,99,235), .08),
    transparent 60%);
  border-bottom: 1px solid rgba(var(--bnp-accent-rgb, 37,99,235), .12);
}
.bn-subnav__hd-icon {
  border-radius: 14px;
  font-size: 1.4rem;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  color: #fff;
}

/* Sub-nav goto link */
.bn-subnav__hd-goto {
  color: var(--bnp-accent, var(--brand));
  font-weight: 700;
}
.bn-subnav__hd-goto:hover {
  text-decoration: underline;
}

/* Sub-nav links: premium card-style, accent border on hover */
.bn-subnav__link {
  border-radius: 14px;
  padding: .85rem .9rem !important;
  transition: background .18s, transform .12s ease,
              border-color .18s, box-shadow .18s;
  border: 1px solid transparent;
}
.bn-subnav__link:active {
  transform: scale(.96);
  background: rgba(var(--bnp-accent-rgb, 37,99,235), .08);
  border-color: rgba(var(--bnp-accent-rgb, 37,99,235), .22);
  box-shadow: 0 2px 8px -2px rgba(var(--bnp-accent-rgb, 37,99,235), .15);
}
.bn-subnav__link-icon {
  border-radius: 11px !important;
  width: 38px !important; height: 38px !important;
  display: grid !important; place-items: center !important;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* ── Page-tabs polish on EMI/Plots/Referrals pages ─────────────
   When the user lands on a section page, the page-tabs (sub-nav
   strip below the hero) gets the section's accent color treatment. */
@media (max-width: 767px) {
  /* EMI section pages */
  body[class*="emi"] .page-tabs__item.is-active,
  .emi-admin .page-tabs__item.is-active,
  .emi-purchase-success .page-tabs__item.is-active {
    background: linear-gradient(135deg,
      rgba(var(--bn-emi-rgb), .12),
      rgba(13,148,136, .08)) !important;
    border-color: rgba(var(--bn-emi-rgb), .30) !important;
    color: var(--bn-emi-c) !important;
    box-shadow: 0 2px 8px -2px rgba(var(--bn-emi-rgb), .22);
  }

  /* Plots section pages */
  [data-page="plots"] .page-tabs__item.is-active,
  body.plots-page .page-tabs__item.is-active {
    background: linear-gradient(135deg,
      rgba(var(--bn-plots-rgb), .12),
      rgba(99,102,241, .08)) !important;
    border-color: rgba(var(--bn-plots-rgb), .30) !important;
    color: var(--bn-plots-c) !important;
    box-shadow: 0 2px 8px -2px rgba(var(--bn-plots-rgb), .22);
  }

  /* Referrals section pages */
  body.referrals-page .page-tabs__item.is-active,
  [data-page="referrals"] .page-tabs__item.is-active {
    background: linear-gradient(135deg,
      rgba(var(--bn-ref-rgb), .14),
      rgba(245,158,11, .08)) !important;
    border-color: rgba(var(--bn-ref-rgb), .30) !important;
    color: var(--bn-ref-c) !important;
    box-shadow: 0 2px 8px -2px rgba(var(--bn-ref-rgb), .22);
  }
}

/* ── Section-themed sub-nav header colors via aria-expanded ──── */
.bottom-nav__item[data-bn-tab="plots"][aria-expanded="true"] ~ #bnSubnav .bn-subnav__hd-icon {
  background: linear-gradient(135deg, var(--bn-plots-c), #5b21b6) !important;
}
.bottom-nav__item[data-bn-tab="emi"][aria-expanded="true"] ~ #bnSubnav .bn-subnav__hd-icon {
  background: linear-gradient(135deg, var(--bn-emi-c), #047857) !important;
}
.bottom-nav__item[data-bn-tab="referral"][aria-expanded="true"] ~ #bnSubnav .bn-subnav__hd-icon {
  background: linear-gradient(135deg, var(--bn-ref-c), #b45309) !important;
}

/* ── Reduced motion — disable breathing/pulse animations ─────── */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav__item--emi .bottom-nav__icon,
  .bottom-nav__item--emi.is-active .bottom-nav__icon,
  .bottom-nav,
  .bn-badge {
    animation: none !important;
  }
}

/* ── Tiny phones (≤ 360px) — keep elevated EMI button proportional ── */
@media (max-width: 360px) {
  .bottom-nav { margin: 0 .35rem; border-radius: 20px 20px 0 0; }
  .bottom-nav__item--emi .bottom-nav__icon {
    width: 44px !important; height: 44px !important;
    margin-top: -12px !important;
  }
  .bottom-nav__item--emi .bottom-nav__icon svg {
    width: 20px !important; height: 20px !important;
  }
  .bottom-nav__item.is-active::before {
    width: 38px; height: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v18 — TRUE FLOATING BOTTOM-NAV
   All-corners rounded, lifted from edge, magnetic active indicator,
   glass shimmer, 3D depth, scroll-aware hide/show.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  /* ── Lift the bar away from the screen edge — true floating ── */
  .bottom-nav {
    bottom: max(env(safe-area-inset-bottom, 0), .5rem) !important;
    left: .65rem !important;
    right: .65rem !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 28px !important;
    height: var(--bn-h) !important;
    padding: 0 !important;
    /* 3D depth: highlight, surface, edge-glow */
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.78) 100%);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow:
      0 1px 0 rgba(255,255,255,.95) inset,
      0 -1px 0 rgba(0,0,0,.04) inset,
      0 8px 24px -4px rgba(13,27,46,.14),
      0 18px 44px -8px rgba(13,27,46,.10),
      0 28px 70px -16px rgba(124,58,237,.12);
    will-change: transform, opacity;
    transition:
      transform .35s cubic-bezier(.34,1.36,.64,1),
      opacity .25s ease;
  }
  [data-theme="dark"] .bottom-nav {
    background:
      linear-gradient(180deg,
        rgba(20,28,48,.88) 0%,
        rgba(10,15,28,.92) 100%);
    border-color: rgba(255,255,255,.08);
    box-shadow:
      0 1px 0 rgba(255,255,255,.06) inset,
      0 -1px 0 rgba(0,0,0,.30) inset,
      0 8px 24px -4px rgba(0,0,0,.55),
      0 18px 44px -8px rgba(0,0,0,.45),
      0 28px 70px -16px rgba(124,58,237,.22);
  }

  /* Adjust .main bottom-padding so content doesn't hide behind floating bar */
  .main {
    padding-bottom: calc(
      var(--bn-h, 60px) +
      max(env(safe-area-inset-bottom, 0), .5rem) +
      1.25rem
    ) !important;
  }

  /* ── Animated glass shimmer that sweeps across the bar ──────── */
  .bottom-nav::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,.45) 50%,
      transparent 70%);
    opacity: 0;
    pointer-events: none;
    animation: bnShimmer 6s ease-in-out infinite;
    animation-delay: 2s;
  }
  @keyframes bnShimmer {
    0%, 80%, 100% { opacity: 0; transform: translateX(-100%); }
    85%           { opacity: .55; }
    95%           { opacity: 0;   transform: translateX(100%); }
  }
  [data-theme="dark"] .bottom-nav::after {
    background: linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,.10) 50%,
      transparent 70%);
  }

  /* Reposition the top sheen line for the new all-rounded shape */
  .bottom-nav::before {
    top: 8px !important;
    left: 22% !important;
    right: 22% !important;
    height: 2px !important;
    border-radius: 2px;
    opacity: .55;
  }

  /* ── Magnetic active indicator — uses transform for smooth slide ── */
  .bottom-nav__item.is-active::before {
    /* Smoother spring transition */
    transition:
      background .25s ease,
      box-shadow .25s ease,
      transform .35s cubic-bezier(.34,1.6,.5,1) !important;
  }
  /* Active tab: subtle 3D lift */
  .bottom-nav__item.is-active {
    transform: translateY(-1px);
  }
  .bottom-nav__item.is-active .bottom-nav__icon svg {
    transform: translateY(-2px) scale(1.15) !important;
  }

  /* ── Tab tap feedback — ripple from center ────────────────── */
  .bottom-nav__item {
    overflow: hidden;
    position: relative;
  }
  .bottom-nav__item::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(var(--brand-rgb), .25) 0%,
      transparent 70%);
    transform: translate(-50%,-50%);
    pointer-events: none;
    transition: width .4s ease, height .4s ease, opacity .4s ease;
    opacity: 0;
  }
  .bottom-nav__item:active::after {
    width: 100px; height: 100px;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0s;
  }
  /* Section-color ripple */
  .bottom-nav__item[data-bn-tab="plots"]::after  { background: radial-gradient(circle, rgba(var(--bn-plots-rgb),.30) 0%, transparent 70%); }
  .bottom-nav__item[data-bn-tab="emi"]::after    { background: radial-gradient(circle, rgba(var(--bn-emi-rgb),.40)   0%, transparent 70%); }
  .bottom-nav__item[data-bn-tab="referral"]::after { background: radial-gradient(circle, rgba(var(--bn-ref-rgb),.30)  0%, transparent 70%); }
  .bottom-nav__item[data-bn-tab="life"]::after   { background: radial-gradient(circle, rgba(var(--bn-life-rgb),.28)  0%, transparent 70%); }
  .bottom-nav__item[data-bn-tab="profile"]::after { background: radial-gradient(circle, rgba(8,145,178,.28) 0%, transparent 70%); }

  /* ── EMI centre button — even more premium with halo glow ──── */
  .bottom-nav__item--emi {
    overflow: visible !important;  /* allow the elevated icon to extend */
  }
  .bottom-nav__item--emi .bottom-nav__icon::before {
    /* Outer glow ring that pulses */
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(var(--bn-emi-rgb), .35) 0%,
      rgba(var(--bn-emi-rgb), 0) 70%);
    z-index: -1;
    animation: emiHaloPulse 2.6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes emiHaloPulse {
    0%, 100% { transform: scale(.85); opacity: .65; }
    50%      { transform: scale(1.15); opacity: .35; }
  }
  /* Inner sparkle highlight */
  .bottom-nav__item--emi .bottom-nav__icon::after {
    content: '';
    position: absolute;
    top: 22%; left: 28%;
    width: 24%; height: 18%;
    border-radius: 50%;
    background: radial-gradient(ellipse,
      rgba(255,255,255,.65) 0%,
      rgba(255,255,255,0) 70%);
    pointer-events: none;
    animation: emiSparkle 4s ease-in-out infinite;
  }
  @keyframes emiSparkle {
    0%, 100% { opacity: .7; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.15); }
  }

  /* ── Premium label fade ──────────────────────────────────── */
  .bottom-nav__label {
    transition: color .2s ease, letter-spacing .25s ease, opacity .2s ease;
  }
  .bottom-nav__item.is-active .bottom-nav__label {
    letter-spacing: .04em;
  }

  /* ── Scroll-aware hide/show: gracefully tuck away when scrolling down ── */
  body.bn-hide .bottom-nav {
    transform: translateY(calc(100% + 1rem));
    opacity: .85;
    pointer-events: none;
  }
}

/* ── Reduced motion — disable shimmer, halo, sparkle ──────────── */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav::after,
  .bottom-nav__item--emi .bottom-nav__icon::before,
  .bottom-nav__item--emi .bottom-nav__icon::after {
    animation: none !important;
  }
  .bottom-nav__item.is-active {
    transform: none !important;
  }
}

/* ── Tiny phones — keep float but reduce gaps ─────────────────── */
@media (max-width: 360px) {
  .bottom-nav {
    bottom: max(env(safe-area-inset-bottom, 0), .35rem) !important;
    left: .35rem !important;
    right: .35rem !important;
    border-radius: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v19 — ADVANCED ADMIN SIDEBAR
   System health strip · pinned shortcuts · pin star · keyboard focus
   ═══════════════════════════════════════════════════════════════════════ */

/* ── System Health Strip ─────────────────────────────────────────── */
.sb-health {
  margin: .5rem .65rem .65rem;
  padding: .65rem .75rem .55rem;
  background: linear-gradient(135deg,
    rgba(34,197,94,.06),
    rgba(16,185,129,.04));
  border: 1px solid rgba(34,197,94,.18);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.sb-health[data-state="warn"] {
  background: linear-gradient(135deg, rgba(234,179,8,.08), rgba(217,119,6,.05));
  border-color: rgba(217,119,6,.22);
}
.sb-health[data-state="attention"] {
  background: linear-gradient(135deg, rgba(59,130,246,.07), rgba(99,102,241,.04));
  border-color: rgba(59,130,246,.22);
}
.sb-health[data-state="critical"] {
  background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(220,38,38,.06));
  border-color: rgba(220,38,38,.30);
}

[data-theme="dark"] .sb-health {
  background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(16,185,129,.06));
  border-color: rgba(34,197,94,.22);
}

.sb-health__hd {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: .5rem;
}
.sb-health__title {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
  flex: 1;
}
.sb-health__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  position: relative;
  display: inline-block;
}
.sb-health__pulse::before,
.sb-health__pulse::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
}
.sb-health[data-state="ok"] .sb-health__pulse { background: #22c55e; }
.sb-health[data-state="ok"] .sb-health__pulse::before {
  background: #22c55e;
  animation: sbPulseRing 2.4s cubic-bezier(.32,.18,.45,1) infinite;
}
.sb-health[data-state="warn"]      .sb-health__pulse { background: #d97706; }
.sb-health[data-state="warn"]      .sb-health__pulse::before { background: #d97706; animation: sbPulseRing 1.8s cubic-bezier(.32,.18,.45,1) infinite; }
.sb-health[data-state="attention"] .sb-health__pulse { background: #3b82f6; }
.sb-health[data-state="attention"] .sb-health__pulse::before { background: #3b82f6; animation: sbPulseRing 2s cubic-bezier(.32,.18,.45,1) infinite; }
.sb-health[data-state="critical"]  .sb-health__pulse { background: #dc2626; }
.sb-health[data-state="critical"]  .sb-health__pulse::before { background: #dc2626; animation: sbPulseRing 1.2s cubic-bezier(.32,.18,.45,1) infinite; }
@keyframes sbPulseRing {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.4); opacity: 0; }
}

.sb-health__badge {
  font-size: .62rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 99px;
  letter-spacing: .02em;
}
.sb-health__badge--ok        { background: rgba(34,197,94,.14);  color: #16a34a; }
.sb-health__badge--warn      { background: rgba(217,119,6,.16);  color: #b45309; }
.sb-health__badge--attention { background: rgba(59,130,246,.14); color: #2563eb; }
.sb-health__badge--critical  { background: rgba(220,38,38,.16);  color: #dc2626;
  animation: sbBadgeBlink 1.6s ease-in-out infinite; }
@keyframes sbBadgeBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .65; }
}

/* Health pills row (horizontal scroll on mobile) */
.sb-health__pills {
  display: flex; gap: .35rem; flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sb-health__pills::-webkit-scrollbar { display: none; }

.sb-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .55rem .25rem .45rem;
  border-radius: 99px;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border);
  font-size: .68rem; font-weight: 600;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
  transition: all .18s ease;
  cursor: pointer;
}
.sb-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.08);
}
.sb-pill:active { transform: translateY(0) scale(.96); }
.sb-pill__icon  { font-size: .82rem; line-height: 1; }
.sb-pill__lbl   { font-weight: 600; }
.sb-pill__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 99px; font-size: .62rem; font-weight: 800;
  background: rgba(0,0,0,.08); color: inherit;
}
[data-theme="dark"] .sb-pill__n { background: rgba(255,255,255,.10); }

.sb-pill--warn   { color: #b45309; border-color: rgba(217,119,6,.3); }
.sb-pill--warn   .sb-pill__n { background: rgba(217,119,6,.18); color: #b45309; }
.sb-pill--info   { color: #2563eb; border-color: rgba(37,99,235,.3); }
.sb-pill--info   .sb-pill__n { background: rgba(37,99,235,.18); color: #2563eb; }
.sb-pill--brand  { color: #7c3aed; border-color: rgba(124,58,237,.3); }
.sb-pill--brand  .sb-pill__n { background: rgba(124,58,237,.18); color: #7c3aed; }
.sb-pill--purple { color: #7c3aed; border-color: rgba(124,58,237,.3); }
.sb-pill--purple .sb-pill__n { background: rgba(124,58,237,.18); color: #7c3aed; }
.sb-pill--danger { color: #dc2626; border-color: rgba(220,38,38,.3); }
.sb-pill--danger .sb-pill__n { background: rgba(220,38,38,.18); color: #dc2626; }
.sb-pill--ok     { color: #16a34a; border-color: rgba(34,197,94,.3); cursor: default; }
.sb-pill--ok:hover { transform: none; box-shadow: none; }

/* ── Pinned Shortcuts ──────────────────────────────────────────── */
.sb-pinned {
  margin: 0 .65rem .5rem;
  padding: .5rem .55rem .55rem;
  background: linear-gradient(135deg,
    rgba(245,158,11,.06),
    rgba(217,119,6,.03));
  border: 1px solid rgba(217,119,6,.18);
  border-radius: 12px;
}
[data-theme="dark"] .sb-pinned {
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(217,119,6,.05));
  border-color: rgba(245,158,11,.20);
}
.sb-pinned__hd {
  display: flex; align-items: center; gap: .35rem;
  margin-bottom: .35rem; padding: 0 .15rem;
}
.sb-pinned__icon {
  color: #d97706; font-size: .85rem; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(217,119,6,.35));
}
.sb-pinned__title {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
  flex: 1;
}
.sb-pinned__clear {
  background: transparent; border: 0; color: var(--text-muted);
  padding: .15rem .35rem; cursor: pointer; border-radius: 6px;
  font-size: .7rem; transition: background .15s, color .15s;
}
.sb-pinned__clear:hover {
  background: rgba(220,38,38,.08); color: #dc2626;
}
.sb-pinned__list {
  display: flex; flex-direction: column; gap: .15rem;
}
.sb-pinned-link {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .55rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: .82rem;
  position: relative;
  transition: background .15s, transform .12s;
}
.sb-pinned-link:hover {
  background: rgba(217,119,6,.08);
  transform: translateX(2px);
}
.sb-pinned-link.is-active {
  background: linear-gradient(90deg,
    rgba(217,119,6,.15),
    rgba(217,119,6,.05));
  color: #b45309;
  font-weight: 600;
}
.sb-pinned-link .sb-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: grid; place-items: center;
  color: #d97706;
}
.sb-pinned-link .label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-pinned-x {
  background: transparent; border: 0; color: var(--text-muted);
  padding: 0; width: 18px; height: 18px;
  cursor: pointer; border-radius: 50%;
  font-size: .7rem; opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
}
.sb-pinned-link:hover .sb-pinned-x { opacity: 1; }
.sb-pinned-x:hover {
  background: rgba(220,38,38,.12); color: #dc2626;
}

/* ── Pin star button on each sidebar link ──────────────────────── */
.sidebar__link { position: relative; }
.sb-pin-btn {
  background: transparent; border: 0; padding: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-faint, #94a3b8);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, color .18s, transform .15s;
  flex-shrink: 0;
  margin-left: .15rem;
}
.sidebar__link:hover .sb-pin-btn,
.sb-pin-btn.is-pinned,
.sb-pin-btn:focus-visible {
  opacity: 1;
}
.sb-pin-btn:hover {
  background: rgba(217,119,6,.10);
  color: #d97706;
  transform: scale(1.15);
}
.sb-pin-btn.is-pinned {
  color: #d97706;
  background: rgba(217,119,6,.14);
}
.sb-pin-btn.is-pinned svg {
  fill: #d97706;
  filter: drop-shadow(0 0 6px rgba(217,119,6,.5));
  animation: sbPinPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sbPinPop {
  0%   { transform: scale(.6) rotate(-15deg); }
  60%  { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ── Keyboard focus state (j/k navigation) ─────────────────────── */
.sidebar__link.is-kb-focus,
.sb-pinned-link.is-kb-focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: rgba(var(--brand-rgb), .10);
  z-index: 1;
}

/* ── Profile actions row (multi-button) ────────────────────────── */
.sidebar__profile-actions {
  display: flex; gap: .25rem; align-items: center;
}

/* ── Compact mode (data-menu="small") — health strip becomes
   icon-only, pinned items show only icons, hide labels ─────────── */
.app[data-menu="small"] .sb-health__title,
.app[data-menu="small"] .sb-health__badge,
.app[data-menu="small"] .sb-pill__lbl,
.app[data-menu="small"] .sb-pinned__title,
.app[data-menu="small"] .sb-pinned-link .label,
.app[data-menu="small"] .sb-pinned__clear {
  display: none;
}
.app[data-menu="small"] .sb-health,
.app[data-menu="small"] .sb-pinned {
  margin-left: .35rem; margin-right: .35rem;
  padding: .4rem .35rem;
}
.app[data-menu="small"] .sb-pill {
  padding: .25rem; min-width: 32px; justify-content: center;
}
.app[data-menu="small"] .sb-pinned-link {
  justify-content: center; padding: .4rem .25rem;
}
.app[data-menu="small"] .sb-pin-btn { display: none; }

/* ── Hide pin star on mobile when sidebar is being used as drawer
   (saves horizontal space; users still pin via desktop) ────────── */
@media (max-width: 767px) {
  .sb-pin-btn { width: 26px; height: 26px; opacity: 1; }
  .sidebar__link { padding-right: .35rem; }
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sb-health__pulse::before,
  .sb-health__badge--critical,
  .sb-pin-btn.is-pinned svg {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v20 — TASK COMMAND CENTER (super-admin slide-in panel)
   ═══════════════════════════════════════════════════════════════════════ */

/* Overlay backdrop */
.tc-overlay {
  position: fixed; inset: 0;
  background: rgba(13,27,46,.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 950;
  opacity: 0;
  transition: opacity .25s ease;
}
.tc-overlay.is-open { opacity: 1; }

/* Slide-in panel (desktop: right side, mobile: full-width bottom-sheet) */
.tc-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--bg-elev, #fff);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 48px -12px rgba(13,27,46,.18),
              -32px 0 80px -24px rgba(124,58,237,.10);
  z-index: 951;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.34,1.18,.64,1);
}
.tc-panel.is-open { transform: translateX(0); }

[data-theme="dark"] .tc-panel {
  background: rgba(13,18,32,.98);
  box-shadow: -16px 0 48px -12px rgba(0,0,0,.55),
              -32px 0 80px -24px rgba(124,58,237,.20);
}

@media (max-width: 600px) {
  .tc-panel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: 88vh; height: 88dvh;
    border-radius: 22px 22px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    transform: translateY(100%);
  }
  .tc-panel.is-open { transform: translateY(0); }
}

/* Body lock */
body.tc-open { overflow: hidden; }

/* Header */
.tc-hd {
  padding: 1rem 1.1rem .85rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg,
    rgba(124,58,237,.04) 0%,
    transparent 100%);
}
.tc-hd__title-row {
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: .35rem;
}
.tc-hd__icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(124,58,237,.4);
}
.tc-hd__title {
  flex: 1;
  font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
  margin: 0;
}
.tc-hd__count {
  font-size: .7rem; font-weight: 800;
  padding: .15rem .55rem;
  background: rgba(124,58,237,.14);
  color: #7c3aed;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.tc-hd__close {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: var(--bg-card, var(--bg-elev));
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-muted);
  display: grid; place-items: center;
  transition: background .15s, color .15s, transform .15s;
}
.tc-hd__close:hover {
  background: rgba(220,38,38,.08);
  color: #dc2626;
  transform: rotate(90deg);
}

.tc-hd__sub {
  display: flex; align-items: center; gap: .45rem;
  font-size: .76rem; color: var(--text-muted);
}
.tc-hd__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  position: relative; display: inline-block; flex-shrink: 0;
}
.tc-hd__pulse[data-state="critical"] { background: #dc2626; }
.tc-hd__pulse[data-state="critical"]::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #dc2626;
  animation: tcPulseRing 1.4s cubic-bezier(.32,.18,.45,1) infinite;
}
.tc-hd__pulse[data-state="active"] { background: #d97706; }
.tc-hd__pulse[data-state="active"]::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #d97706;
  animation: tcPulseRing 2s cubic-bezier(.32,.18,.45,1) infinite;
}
.tc-hd__pulse[data-state="idle"] { background: #16a34a; }
@keyframes tcPulseRing {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}
#tcHdSub { flex: 1; }
.tc-hd__refresh {
  background: transparent; border: 0; padding: .25rem;
  color: var(--text-muted); cursor: pointer;
  border-radius: 6px;
  transition: background .15s, color .15s, transform .35s;
}
.tc-hd__refresh:hover {
  background: rgba(var(--brand-rgb), .1);
  color: var(--brand);
  transform: rotate(180deg);
}
.tc-hd__refresh.is-stale {
  color: #d97706;
  animation: tcRefreshPulse 1.2s ease-in-out infinite;
}
@keyframes tcRefreshPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* Filter chips */
.tc-filters {
  display: flex; gap: .35rem;
  padding: .65rem 1.1rem .55rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.tc-filters::-webkit-scrollbar { display: none; }
.tc-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  flex-shrink: 0;
  padding: .35rem .7rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-card, var(--bg-elev));
  color: var(--text-muted);
  font-size: .74rem; font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}
.tc-chip:hover { background: var(--bg-muted); color: var(--text); }
.tc-chip.is-active {
  background: linear-gradient(135deg, var(--brand), #6366f1);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(var(--brand-rgb), .4);
}
.tc-chip[style*="--chip-c"].is-active {
  background: var(--chip-c);
  box-shadow: 0 2px 8px -2px var(--chip-c);
}
.tc-chip--danger.is-active {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 2px 8px -2px rgba(220,38,38,.5);
}
.tc-chip__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem;
  border-radius: 99px;
  background: rgba(0,0,0,.08); color: inherit;
  font-size: .62rem; font-weight: 800;
}
.tc-chip.is-active .tc-chip__n { background: rgba(255,255,255,.25); color: #fff; }

/* Search */
.tc-search {
  position: relative;
  margin: .55rem 1.1rem;
}
.tc-search__icon {
  position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
#tcSearch {
  width: 100%;
  padding: .55rem .65rem .55rem 2rem;
  border: 1px solid var(--border);
  background: var(--bg-card, var(--bg-elev));
  border-radius: 10px;
  font-size: .82rem;
  transition: border-color .15s, box-shadow .15s;
}
#tcSearch:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15);
  outline: none;
}
.tc-search__kbd {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  padding: .12rem .4rem;
  background: var(--bg-muted);
  color: var(--text-muted);
  border-radius: 5px;
  font-size: .65rem; font-weight: 700;
  font-family: ui-monospace, monospace;
  pointer-events: none;
}

/* Bulk action bar */
.tc-bulk {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 1.1rem .55rem;
  padding: .5rem .65rem;
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb), .08),
    rgba(124,58,237, .06));
  border: 1px solid rgba(var(--brand-rgb), .25);
  border-radius: 10px;
  animation: tcBulkSlide .25s cubic-bezier(.34,1.36,.64,1);
}
@keyframes tcBulkSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tc-bulk__count {
  flex: 1; font-size: .76rem; font-weight: 700; color: var(--text);
}
.tc-bulk__btn {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .35rem .65rem;
  font-size: .72rem; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.tc-bulk__btn:hover {
  background: var(--bg-card);
  transform: translateY(-1px);
}
.tc-bulk__btn--danger:hover {
  background: rgba(220,38,38,.1);
  border-color: rgba(220,38,38,.3);
  color: #dc2626;
}

/* Body — scrollable list */
.tc-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.1rem 1rem;
}

/* Empty state */
.tc-empty {
  text-align: center;
  padding: 3rem 1rem;
}
.tc-empty__icon { font-size: 3rem; margin-bottom: .65rem; }
.tc-empty__title { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.tc-empty__sub { font-size: .82rem; color: var(--text-muted); }

/* Bucket header */
.tc-bucket { margin-bottom: 1rem; }
.tc-bucket__hd {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem 0 .35rem;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: .55rem;
  position: sticky; top: 0;
  background: var(--bg-elev);
  z-index: 1;
}
.tc-bucket__icon { font-size: .9rem; line-height: 1; }
.tc-bucket__title { flex: 1; color: var(--b-c); font-weight: 800; }
.tc-bucket__count {
  font-size: .65rem; font-weight: 800;
  padding: .1rem .45rem;
  background: rgba(0,0,0,.06);
  color: var(--text-muted);
  border-radius: 99px;
}
.tc-bucket__bulk {
  background: transparent; border: 0; padding: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  cursor: pointer; color: var(--text-muted);
  display: grid; place-items: center;
  transition: background .15s, color .15s;
  font-size: 1rem;
}
.tc-bucket__bulk:hover {
  background: rgba(var(--brand-rgb), .12);
  color: var(--brand);
}
.tc-bucket__list { display: flex; flex-direction: column; gap: .4rem; }

/* Task card */
.tc-task {
  position: relative;
  display: grid;
  grid-template-columns: auto 3px 36px 1fr auto;
  gap: .55rem;
  align-items: start;
  padding: .65rem .7rem;
  border-radius: 12px;
  background: var(--bg-card, var(--bg-elev));
  border: 1px solid var(--border);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.tc-task:hover {
  transform: translateX(-2px);
  box-shadow: 0 4px 12px -2px rgba(13,27,46,.08);
  border-color: var(--task-c);
}
.tc-task--critical { border-left: 0; }
.tc-task--critical .tc-task__bar {
  background: linear-gradient(180deg, #dc2626, #991b1b);
  animation: tcCritPulse 1.6s ease-in-out infinite;
}
.tc-task--high      .tc-task__bar { background: #d97706; }
.tc-task--medium    .tc-task__bar { background: #2563eb; }
.tc-task--low       .tc-task__bar { background: #64748b; }
.tc-task--info      .tc-task__bar { background: #0891b2; }

@keyframes tcCritPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

.tc-task__check {
  margin-top: .35rem;
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--brand);
}
.tc-task__bar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
}
.tc-task__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: -2px;
}
.tc-task__body { min-width: 0; }
.tc-task__title {
  font-size: .85rem; font-weight: 700;
  margin-bottom: .15rem; line-height: 1.3;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-task__detail {
  font-size: .72rem; color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .35rem;
}
.tc-task__meta {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap;
}
.tc-task__chip {
  font-size: .62rem; font-weight: 700;
  padding: .12rem .45rem;
  border-radius: 99px;
}
.tc-task__age {
  font-size: .62rem; font-weight: 600;
  color: var(--text-faint, #94a3b8);
  font-variant-numeric: tabular-nums;
}
.tc-task__sev {
  font-size: .58rem; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .08rem .35rem;
  border-radius: 4px;
}
.tc-task__sev--critical { background: rgba(220,38,38,.14); color: #dc2626; }
.tc-task__sev--high     { background: rgba(217,119,6,.14); color: #d97706; }
.tc-task__sev--medium   { background: rgba(37,99,235,.14); color: #2563eb; }
.tc-task__sev--low      { background: rgba(100,116,139,.14); color: #64748b; }
.tc-task__sev--info     { background: rgba(8,145,178,.14); color: #0891b2; }

.tc-task__actions {
  display: flex; flex-direction: column; gap: .2rem;
}
.tc-task__open,
.tc-task__menu {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .15s;
  text-decoration: none;
}
.tc-task__open:hover {
  background: rgba(var(--brand-rgb), .12);
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), .25);
}
.tc-task__menu:hover {
  background: var(--bg-muted);
  color: var(--text);
}

/* Hidden indicator */
.tc-hidden-note {
  text-align: center;
  padding: .65rem 0;
  font-size: .76rem;
  color: var(--text-muted);
}
.tc-hidden-note button {
  background: transparent; border: 0; padding: 0;
  color: var(--brand); font-weight: 700;
  cursor: pointer; text-decoration: underline;
}

/* Footer keyboard hints */
.tc-ft {
  padding: .55rem 1.1rem;
  border-top: 1px solid var(--border);
  font-size: .68rem;
  color: var(--text-faint, #94a3b8);
  text-align: center;
  background: var(--bg-card, var(--bg-elev));
}
.tc-ft kbd {
  padding: .1rem .35rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .62rem; font-weight: 700;
  font-family: ui-monospace, monospace;
  color: var(--text);
  margin: 0 .15rem;
}

/* Popover menu (per-task ⋮ actions) */
.tc-pop {
  position: fixed;
  min-width: 180px;
  padding: .35rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px -4px rgba(13,27,46,.15);
  z-index: 952;
  opacity: 0;
  transform: scale(.92) translateY(-4px);
  transform-origin: top right;
  transition: opacity .18s, transform .18s cubic-bezier(.34,1.36,.64,1);
  pointer-events: none;
}
.tc-pop.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.tc-pop__item {
  display: flex; align-items: center; gap: .45rem;
  width: 100%;
  padding: .45rem .6rem;
  background: transparent;
  border: 0; cursor: pointer;
  border-radius: 7px;
  font-size: .8rem;
  color: var(--text);
  text-align: left;
  transition: background .12s;
}
.tc-pop__item:hover {
  background: var(--bg-muted);
}
.tc-pop__item--danger {
  color: #dc2626;
}
.tc-pop__item--danger:hover {
  background: rgba(220,38,38,.08);
}
.tc-pop__sep {
  border: 0;
  border-top: 1px solid var(--border);
  margin: .25rem 0;
}

/* Topbar Task Center button */
.topbar__tc-btn {
  position: relative;
}
.topbar__tc-btn .topbar__badge--danger {
  animation: tcBadgePulse 1.8s ease-in-out infinite;
}
@keyframes tcBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tc-task--critical .tc-task__bar,
  .topbar__tc-btn .topbar__badge--danger,
  .tc-hd__pulse::before,
  .tc-hd__refresh.is-stale {
    animation: none !important;
  }
  .tc-panel { transition: none !important; }
  .tc-overlay { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v21 — Task Center advanced polish
   Pin star · pinned glow · keyboard focus · batch hint · swipe
   ═══════════════════════════════════════════════════════════════════════ */

/* Pin star button */
.tc-task__pin {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint, #94a3b8);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .15s ease;
}
.tc-task__pin:hover {
  background: rgba(217,119,6,.10);
  color: #d97706;
  border-color: rgba(217,119,6,.25);
  transform: scale(1.1);
}
.tc-task__pin.is-pinned {
  background: rgba(217,119,6,.14);
  color: #d97706;
}
.tc-task__pin.is-pinned svg {
  fill: #d97706;
  filter: drop-shadow(0 0 6px rgba(217,119,6,.5));
  animation: tcPinPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes tcPinPop {
  0%   { transform: scale(.6) rotate(-15deg); }
  60%  { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Pinned task — gold left edge + subtle gold tint */
.tc-task--pinned {
  border-left: 3px solid #d97706;
  background: linear-gradient(90deg,
    rgba(217,119,6,.05) 0%,
    var(--bg-card, var(--bg-elev)) 8%) !important;
  position: relative;
}
.tc-task--pinned::after {
  content: '★ pinned';
  position: absolute;
  top: 4px; right: 6px;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #d97706;
  background: rgba(217,119,6,.12);
  padding: .08rem .4rem;
  border-radius: 99px;
  pointer-events: none;
  text-transform: uppercase;
}
[data-theme="dark"] .tc-task--pinned {
  background: linear-gradient(90deg,
    rgba(245,158,11,.10) 0%,
    var(--bg-card, var(--bg-elev)) 8%) !important;
}

/* Keyboard focus — brand outline */
.tc-task.is-kb-focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  background: rgba(var(--brand-rgb), .06);
  z-index: 1;
}
.tc-task.is-kb-focus::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 24px;
  background: var(--brand);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(var(--brand-rgb), .5);
}

/* Smart batch hint chip */
.tc-task__batch {
  font-size: .58rem; font-weight: 800;
  padding: .1rem .4rem;
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(99,102,241,.10));
  border: 1px solid rgba(124,58,237,.25);
  color: #7c3aed;
  border-radius: 99px;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: help;
  animation: tcBatchPulse 2.4s ease-in-out infinite;
}
@keyframes tcBatchPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
  50%      { box-shadow: 0 0 0 3px rgba(124,58,237,.10); }
}

/* Swipe hint icon (mobile only) — subtle indicator on first interaction */
@media (hover: none) and (pointer: coarse) {
  .tc-task {
    touch-action: pan-y;
    user-select: none;
  }
  /* Hide pin button on mobile — gestures handle most actions */
  .tc-task__pin { display: none; }
  /* Slightly tighter actions column on mobile */
  .tc-task__actions { gap: .15rem; }
}

/* Reduced motion guards for new animations */
@media (prefers-reduced-motion: reduce) {
  .tc-task__pin.is-pinned svg,
  .tc-task__batch {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v22 — Task Center: Workload meter + SLA indicators
   ═══════════════════════════════════════════════════════════════════════ */

/* Workload meter (under header) */
.tc-workload {
  margin-top: .65rem;
  padding-top: .55rem;
  border-top: 1px dashed var(--border);
}
.tc-workload__meta {
  display: flex; align-items: center;
  gap: .5rem; margin-bottom: .35rem;
}
.tc-workload__lbl {
  font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); flex: 1;
}
.tc-workload__sla {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700;
  padding: .12rem .5rem;
  border-radius: 99px;
  background: rgba(220,38,38,.12);
  color: #dc2626;
  border: 1px solid rgba(220,38,38,.25);
}
.tc-workload__sla-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #dc2626;
  animation: tcSlaBlink 1.2s ease-in-out infinite;
}
@keyframes tcSlaBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.4); }
}

.tc-workload__bar {
  display: flex;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--bg-muted);
  margin-bottom: .35rem;
}
.tc-workload__seg {
  height: 100%;
  transition: width 1s cubic-bezier(.34,1.36,.64,1);
}
.tc-workload__seg--critical { background: linear-gradient(90deg, #b91c1c, #dc2626); }
.tc-workload__seg--high     { background: linear-gradient(90deg, #d97706, #f59e0b); }
.tc-workload__seg--medium   { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.tc-workload__seg--low      { background: linear-gradient(90deg, #64748b, #94a3b8); }
.tc-workload__seg + .tc-workload__seg { border-left: 1px solid rgba(0,0,0,.15); }

.tc-workload__legend {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: .5rem;
  font-size: .62rem;
  font-weight: 700;
}
.tc-workload__leg {
  display: inline-flex; align-items: center;
  padding: .08rem .45rem;
  border-radius: 99px;
  font-weight: 600;
  letter-spacing: .02em;
}
.tc-workload__leg::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: .3rem;
}
.tc-workload__leg--critical { color: #dc2626; }
.tc-workload__leg--critical::before { background: #dc2626; }
.tc-workload__leg--high     { color: #d97706; }
.tc-workload__leg--high::before     { background: #d97706; }
.tc-workload__leg--medium   { color: #2563eb; }
.tc-workload__leg--medium::before   { background: #2563eb; }
.tc-workload__leg--low      { color: #64748b; }
.tc-workload__leg--low::before      { background: #64748b; }

.tc-workload__cap {
  display: inline-flex; align-items: center;
  gap: .35rem;
  margin-left: auto;
  color: var(--text-muted);
}
.tc-workload__cap-lbl {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tc-workload__cap-bar {
  width: 50px; height: 5px;
  background: var(--bg-muted);
  border-radius: 99px;
  overflow: hidden;
}
.tc-workload__cap-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #16a34a, #d97706, #dc2626);
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: width 1s ease;
}

/* ── SLA indicator on each task card ────────────────────────── */
.tc-task__sla {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .08rem .35rem;
  border-radius: 4px;
}
.tc-task__sla-bar {
  position: relative;
  display: inline-block;
  width: 28px; height: 4px;
  background: rgba(0,0,0,.08);
  border-radius: 99px;
  overflow: hidden;
}
.tc-task__sla-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 99px;
  transition: width 1s cubic-bezier(.34,1.36,.64,1);
}
.tc-task__sla--ok      { background: rgba(34,197,94,.10);  color: #16a34a; }
.tc-task__sla--ok      .tc-task__sla-fill { background: #16a34a; }
.tc-task__sla--watch   { background: rgba(37,99,235,.10);  color: #2563eb; }
.tc-task__sla--watch   .tc-task__sla-fill { background: #2563eb; }
.tc-task__sla--risk    { background: rgba(217,119,6,.12);  color: #d97706; }
.tc-task__sla--risk    .tc-task__sla-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.tc-task__sla--breach  {
  background: rgba(220,38,38,.14);
  color: #dc2626;
  animation: tcSlaBreach 1.6s ease-in-out infinite;
}
.tc-task__sla--breach  .tc-task__sla-fill {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
}
@keyframes tcSlaBreach {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%      { box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
}

/* SLA-breached tasks get a glowing left edge */
.tc-task[data-tc-sla="breach"] {
  border-color: rgba(220,38,38,.4);
}
.tc-task[data-tc-sla="breach"] .tc-task__bar {
  background: linear-gradient(180deg, #ef4444, #991b1b) !important;
  box-shadow: 0 0 8px rgba(220,38,38,.45);
}

/* SLA-risk tasks get amber bar */
.tc-task[data-tc-sla="risk"] .tc-task__bar {
  background: linear-gradient(180deg, #f59e0b, #b45309) !important;
}

@media (prefers-reduced-motion: reduce) {
  .tc-workload__sla-dot,
  .tc-task__sla--breach,
  .tc-task__sla-fill,
  .tc-workload__seg {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v23 — Smart System Optimizer panel (admin sidebar)
   ═══════════════════════════════════════════════════════════════════════ */
.sb-optimizer {
  margin: 0 .65rem .5rem;
  background: linear-gradient(135deg,
    rgba(124,58,237,.05),
    rgba(37,99,235,.03));
  border: 1px solid rgba(124,58,237,.18);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.sb-optimizer[open] {
  border-color: rgba(124,58,237,.30);
  box-shadow: 0 4px 12px -4px rgba(124,58,237,.15);
}
[data-theme="dark"] .sb-optimizer {
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(37,99,235,.06));
}

.sb-optimizer__hd {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .65rem;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.sb-optimizer__hd::-webkit-details-marker { display: none; }
.sb-optimizer__hd::marker { content: ''; }
.sb-optimizer__hd:hover {
  background: rgba(124,58,237,.04);
}
.sb-optimizer__icon {
  font-size: .95rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(124,58,237,.30));
  animation: sbOptIconPulse 3s ease-in-out infinite;
}
@keyframes sbOptIconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.sb-optimizer__title {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
}
.sb-optimizer__score {
  font-size: .68rem;
  font-weight: 800;
  padding: .12rem .5rem;
  border-radius: 99px;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.sb-optimizer__chev {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-faint, #94a3b8);
  transition: transform .25s cubic-bezier(.34,1.36,.64,1);
  line-height: 1;
}
.sb-optimizer[open] .sb-optimizer__chev {
  transform: rotate(90deg);
  color: #7c3aed;
}

.sb-optimizer__body {
  padding: 0 .65rem .65rem;
  animation: sbOptSlide .25s ease;
}
@keyframes sbOptSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Score gauge bar */
.sb-optimizer__gauge {
  margin-bottom: .65rem;
}
.sb-optimizer__gauge-track {
  height: 6px;
  background: var(--bg-muted);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: .25rem;
}
.sb-optimizer__gauge-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 1.2s cubic-bezier(.34,1.36,.64,1);
}
.sb-optimizer__gauge-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .65rem;
}
.sb-optimizer__gauge-state {
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.sb-optimizer__gauge-pct {
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Quick action buttons */
.sb-optimizer__actions {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .55rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed rgba(124,58,237,.2);
}
.sb-optimizer__act {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .55rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 600;
  text-align: left;
  width: 100%;
  transition: background .15s, transform .12s;
}
.sb-optimizer__act:hover {
  background: rgba(124,58,237,.08);
  transform: translateX(2px);
  color: #7c3aed;
}
.sb-optimizer__act-icon {
  font-size: .9rem;
  width: 18px;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}
.sb-optimizer__act-lbl {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-optimizer__act-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 .3rem;
  border-radius: 99px;
  background: rgba(124,58,237,.18);
  color: #7c3aed;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: 0;
}
.sb-optimizer__act-n--warn {
  background: rgba(217,119,6,.18);
  color: #d97706;
}
.sb-optimizer__act-kbd {
  font-size: .56rem;
  font-weight: 800;
  padding: .08rem .28rem;
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}

/* Diagnostic mini-checks */
.sb-optimizer__diag {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.sb-optimizer__diag-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .7rem;
  color: var(--text-muted);
}
.sb-optimizer__diag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
  position: relative;
}
.sb-optimizer__diag-dot[data-ok="1"] { background: #16a34a; }
.sb-optimizer__diag-dot[data-ok="1"]::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #16a34a;
  opacity: .35;
  animation: sbDiagPulse 2.4s ease-in-out infinite;
}
.sb-optimizer__diag-dot[data-ok="0"] { background: #d97706; }
@keyframes sbDiagPulse {
  0%, 100% { transform: scale(1); opacity: .35; }
  50%      { transform: scale(1.7); opacity: 0; }
}
.sb-optimizer__diag-row:has(.sb-optimizer__diag-dot[data-ok="0"]) {
  color: #d97706;
  font-weight: 600;
}

/* Compact mode (data-menu="small") — collapse to icon only */
.app[data-menu="small"] .sb-optimizer__title,
.app[data-menu="small"] .sb-optimizer__chev,
.app[data-menu="small"] .sb-optimizer__act-lbl,
.app[data-menu="small"] .sb-optimizer__act-kbd,
.app[data-menu="small"] .sb-optimizer__diag-lbl,
.app[data-menu="small"] .sb-optimizer__gauge-meta {
  display: none;
}
.app[data-menu="small"] .sb-optimizer {
  margin-left: .35rem;
  margin-right: .35rem;
}
.app[data-menu="small"] .sb-optimizer__hd {
  justify-content: center;
  padding: .5rem;
}
.app[data-menu="small"] .sb-optimizer__act {
  justify-content: center;
  padding: .4rem .25rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sb-optimizer__icon,
  .sb-optimizer__diag-dot::before,
  .sb-optimizer__gauge-fill {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v24 — Smart Workflow Engine (per-task suggestions + stage tracker
   + bulk workflow templates)
   ═══════════════════════════════════════════════════════════════════════ */

/* Workflow row at the bottom of each task card */
.tc-task__wf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px dashed var(--border);
}

/* 4-step stage indicator */
.tc-task__wf-stages {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.tc-task__wf-step {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  position: relative;
}
.tc-task__wf-step:not(:last-of-type)::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 1.5px;
  background: var(--border);
}
.tc-task__wf-step.is-done:not(:last-of-type)::after {
  background: linear-gradient(90deg, #16a34a, var(--border));
}
.tc-task__wf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg-muted);
  border: 1.5px solid var(--text-faint, #94a3b8);
  transition: all .2s ease;
}
.tc-task__wf-step.is-done .tc-task__wf-dot {
  background: #16a34a;
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(34,197,94,.15);
}
.tc-task__wf-step.is-current .tc-task__wf-dot {
  background: var(--brand);
  border-color: var(--brand);
  width: 9px;
  height: 9px;
  animation: tcWfPulse 1.6s ease-in-out infinite;
}
@keyframes tcWfPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .35); }
  50%      { box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .15); }
}
.tc-task__wf-stage-lbl {
  margin-left: .35rem;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Smart action suggestion */
.tc-task__wf-suggest {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .55rem;
  border-radius: 99px;
  background: rgba(var(--brand-rgb), .08);
  border: 1px solid rgba(var(--brand-rgb), .2);
  color: var(--brand);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .12s, background .15s, box-shadow .15s, border-color .15s;
}
.tc-task__wf-suggest:hover {
  transform: translateX(2px);
  background: rgba(var(--brand-rgb), .14);
  box-shadow: 0 2px 6px -1px rgba(var(--brand-rgb), .25);
}
.tc-task__wf-suggest-icon { font-size: .82rem; line-height: 1; flex-shrink: 0; }
.tc-task__wf-suggest-lbl  {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tone variants */
.tc-task__wf-suggest--high {
  background: rgba(217,119,6,.10);
  border-color: rgba(217,119,6,.28);
  color: #d97706;
}
.tc-task__wf-suggest--high:hover {
  background: rgba(217,119,6,.18);
  box-shadow: 0 2px 6px -1px rgba(217,119,6,.30);
}
.tc-task__wf-suggest--urgent {
  background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(220,38,38,.10));
  border-color: rgba(220,38,38,.40);
  color: #dc2626;
  font-weight: 800;
  animation: tcWfUrgent 1.6s ease-in-out infinite;
}
@keyframes tcWfUrgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%      { box-shadow: 0 0 0 4px rgba(220,38,38,.18); }
}

/* ── Bulk workflow popover ────────────────────────────────── */
.tc-bulk__wf {
  position: relative;
  display: inline-block;
}
.tc-bulk__wf summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tc-bulk__wf summary::-webkit-details-marker { display: none; }
.tc-bulk__wf summary::marker { content: ''; }

.tc-bulk__btn--brand {
  background: linear-gradient(135deg, var(--brand), #6366f1);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 6px -1px rgba(var(--brand-rgb), .35);
}
.tc-bulk__btn--brand:hover {
  background: linear-gradient(135deg, #1d4ed8, #4f46e5);
  transform: translateY(-1px);
}

.tc-bulk__wf-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  padding: .35rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 8px 24px -4px rgba(13,27,46,.12),
    0 16px 40px -8px rgba(124,58,237,.15);
  z-index: 10;
  animation: tcBulkWfRise .2s cubic-bezier(.34,1.36,.64,1);
}
@keyframes tcBulkWfRise {
  from { opacity: 0; transform: translateY(-4px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.tc-bulk__wf-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .55rem .65rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.tc-bulk__wf-item:hover {
  background: rgba(var(--brand-rgb), .08);
}
.tc-bulk__wf-item--danger:hover {
  background: rgba(220,38,38,.08);
}
.tc-bulk__wf-icon {
  font-size: 1.1rem;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(var(--brand-rgb), .10);
  flex-shrink: 0;
}
.tc-bulk__wf-item--danger .tc-bulk__wf-icon {
  background: rgba(220,38,38,.10);
}
.tc-bulk__wf-body {
  flex: 1;
  min-width: 0;
}
.tc-bulk__wf-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.005em;
  margin-bottom: .12rem;
}
.tc-bulk__wf-sub {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 500;
}
.tc-bulk__wf-sep {
  margin: .25rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* Mobile: workflow row stacks neatly */
@media (max-width: 480px) {
  .tc-task__wf {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
  }
  .tc-task__wf-suggest {
    max-width: 100%;
  }
  .tc-bulk__wf-menu {
    left: auto;
    right: 0;
    min-width: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-task__wf-step.is-current .tc-task__wf-dot,
  .tc-task__wf-suggest--urgent,
  .tc-bulk__wf-menu {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v25 — AI Daily Digest card (Task Center)
   ═══════════════════════════════════════════════════════════════════════ */
.tc-digest {
  margin: 0 1.1rem .65rem;
  padding: .85rem 1rem .9rem;
  border-radius: 14px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.tc-digest::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--digest-glow, rgba(124,58,237,.15)), transparent 70%);
  pointer-events: none;
}
.tc-digest--ok {
  background: linear-gradient(135deg, rgba(34,197,94,.06), rgba(16,185,129,.04));
  border-color: rgba(34,197,94,.25);
  --digest-glow: rgba(34,197,94,.15);
}
.tc-digest--attention {
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.04));
  border-color: rgba(37,99,235,.25);
  --digest-glow: rgba(37,99,235,.18);
}
.tc-digest--high {
  background: linear-gradient(135deg, rgba(217,119,6,.07), rgba(245,158,11,.04));
  border-color: rgba(217,119,6,.28);
  --digest-glow: rgba(217,119,6,.18);
}
.tc-digest--urgent {
  background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(220,38,38,.05));
  border-color: rgba(220,38,38,.32);
  --digest-glow: rgba(220,38,38,.20);
  animation: tcDigestUrgentGlow 2.4s ease-in-out infinite;
}
@keyframes tcDigestUrgentGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%      { box-shadow: 0 0 0 4px rgba(220,38,38,.10); }
}
[data-theme="dark"] .tc-digest--ok        { background: linear-gradient(135deg, rgba(34,197,94,.10),  rgba(16,185,129,.06)); }
[data-theme="dark"] .tc-digest--attention { background: linear-gradient(135deg, rgba(37,99,235,.12),  rgba(124,58,237,.06)); }
[data-theme="dark"] .tc-digest--high      { background: linear-gradient(135deg, rgba(217,119,6,.14),  rgba(245,158,11,.06)); }
[data-theme="dark"] .tc-digest--urgent    { background: linear-gradient(135deg, rgba(239,68,68,.16),  rgba(220,38,38,.08)); }

.tc-digest__hd {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .4rem;
  position: relative; z-index: 1;
}
.tc-digest__icon {
  font-size: 1.05rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
}
.tc-digest--urgent .tc-digest__icon {
  animation: tcDigestIconBounce 1.4s ease-in-out infinite;
}
@keyframes tcDigestIconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.08); }
}
.tc-digest__tag {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .12rem .45rem;
  border-radius: 99px;
  background: rgba(0,0,0,.06);
  color: var(--text-muted);
  flex: 1;
}
.tc-digest--urgent .tc-digest__tag {
  background: rgba(220,38,38,.15);
  color: #dc2626;
}
.tc-digest--high .tc-digest__tag {
  background: rgba(217,119,6,.15);
  color: #d97706;
}
.tc-digest--attention .tc-digest__tag {
  background: rgba(37,99,235,.15);
  color: #2563eb;
}
.tc-digest--ok .tc-digest__tag {
  background: rgba(34,197,94,.15);
  color: #16a34a;
}
.tc-digest__time {
  font-size: .62rem;
  color: var(--text-faint, #94a3b8);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tc-digest__body {
  position: relative; z-index: 1;
}
.tc-digest__headline {
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: .25rem;
  color: var(--text);
  line-height: 1.35;
}
.tc-digest__sub {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.tc-digest__trend {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin-top: .55rem;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: rgba(255,255,255,.55);
  border-left: 2px solid var(--brand);
  font-size: .74rem;
  line-height: 1.4;
  color: var(--text);
}
[data-theme="dark"] .tc-digest__trend {
  background: rgba(255,255,255,.04);
}
.tc-digest__trend-icon {
  font-size: .85rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tc-digest--urgent,
  .tc-digest--urgent .tc-digest__icon {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v26 — Compliance & Safety Console (admin sidebar)
   ═══════════════════════════════════════════════════════════════════════ */
.sb-safety {
  margin: 0 .65rem .5rem;
  background: linear-gradient(135deg,
    rgba(34,197,94,.05),
    rgba(16,185,129,.03));
  border: 1px solid rgba(34,197,94,.18);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.sb-safety[open] {
  border-color: rgba(34,197,94,.30);
  box-shadow: 0 4px 12px -4px rgba(34,197,94,.15);
}
[data-theme="dark"] .sb-safety {
  background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(16,185,129,.06));
}

.sb-safety__hd {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .65rem;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.sb-safety__hd::-webkit-details-marker { display: none; }
.sb-safety__hd::marker { content: ''; }
.sb-safety__hd:hover { background: rgba(34,197,94,.04); }

.sb-safety__shield {
  width: 22px; height: 22px;
  border-radius: 7px;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.sb-safety__title {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
}
.sb-safety__score {
  font-size: .7rem;
  font-weight: 800;
  padding: .12rem .5rem;
  border-radius: 99px;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
}
.sb-safety__chev {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-faint, #94a3b8);
  transition: transform .25s cubic-bezier(.34,1.36,.64,1);
  line-height: 1;
}
.sb-safety[open] .sb-safety__chev {
  transform: rotate(90deg);
  color: #16a34a;
}

.sb-safety__body {
  padding: 0 .65rem .65rem;
  animation: sbSafetySlide .25s ease;
}
@keyframes sbSafetySlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sb-safety__badge {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .65rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sf-c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sf-c) 25%, transparent);
  margin-bottom: .65rem;
}
.sb-safety__badge-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sf-c);
  position: relative;
  flex-shrink: 0;
}
.sb-safety__badge-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sf-c);
  animation: sbSafetyPulse 1.8s cubic-bezier(.32,.18,.45,1) infinite;
}
.sb-safety__badge[data-state="breach"] .sb-safety__badge-pulse::before {
  animation-duration: 1s;
}
@keyframes sbSafetyPulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}
.sb-safety__badge-lbl {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--sf-c);
}
.sb-safety__badge-meta {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sb-safety__sectionlbl {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint, #94a3b8);
  margin: .55rem 0 .25rem;
}
.sb-safety__row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .15rem;
  font-size: .72rem;
  color: var(--text-muted);
}
.sb-safety__row[data-ok="1"] { color: var(--text); }
.sb-safety__row[data-ok="0"] { color: #d97706; font-weight: 600; }
.sb-safety__row-icon {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 800;
  flex-shrink: 0;
}
.sb-safety__row[data-ok="1"] .sb-safety__row-icon {
  background: rgba(34,197,94,.16);
  color: #16a34a;
}
.sb-safety__row[data-ok="0"] .sb-safety__row-icon {
  background: rgba(217,119,6,.18);
  color: #d97706;
}

.sb-safety__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px dashed rgba(34,197,94,.2);
}
.sb-safety__act {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .45rem;
  border-radius: 6px;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.sb-safety__act:hover {
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.25);
  color: #16a34a;
  transform: translateY(-1px);
}
.sb-safety__act--danger:hover {
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.3);
  color: #dc2626;
}
.sb-safety__act span {
  font-size: .82rem;
  line-height: 1;
}

/* Compact mode */
.app[data-menu="small"] .sb-safety__title,
.app[data-menu="small"] .sb-safety__chev,
.app[data-menu="small"] .sb-safety__body {
  display: none;
}
.app[data-menu="small"] .sb-safety {
  margin-left: .35rem;
  margin-right: .35rem;
}
.app[data-menu="small"] .sb-safety__hd {
  justify-content: center;
  padding: .5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   v26b — Sensitive-Action Confirmation Guard modal
   ═══════════════════════════════════════════════════════════════════════ */
.land-sg-bg {
  position: fixed; inset: 0;
  background: rgba(13,27,46,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  z-index: 9999;
  opacity: 0;
  padding: 1rem;
  transition: opacity .22s ease;
}
.land-sg-bg.is-open { opacity: 1; }
.land-sg-bg.is-closing { opacity: 0; }

.land-sg {
  width: min(440px, 100%);
  background: var(--bg-elev, #fff);
  border-radius: 18px;
  padding: 1.5rem 1.6rem 1.25rem;
  box-shadow:
    0 20px 60px -12px rgba(13,27,46,.30),
    0 32px 80px -24px rgba(220,38,38,.20);
  border: 1px solid rgba(220,38,38,.2);
  border-top: 4px solid #dc2626;
  transform: scale(.94) translateY(8px);
  transition: transform .25s cubic-bezier(.34,1.36,.64,1);
}
.land-sg-bg.is-open .land-sg { transform: scale(1) translateY(0); }
.land-sg-bg.is-closing .land-sg { transform: scale(.96) translateY(4px); }

.land-sg__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(220,38,38,.14), rgba(239,68,68,.08));
  color: #dc2626;
  font-size: 1.7rem;
  margin: 0 auto .85rem;
  border: 1.5px solid rgba(220,38,38,.25);
  animation: sgIconPulse 1.6s ease-in-out infinite;
}
@keyframes sgIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,.10); }
}
.land-sg__title {
  margin: 0 0 .35rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}
.land-sg__msg {
  margin: 0 0 .85rem;
  text-align: center;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.land-sg__warn {
  padding: .65rem .75rem;
  background: rgba(220,38,38,.06);
  border: 1px solid rgba(220,38,38,.18);
  border-left: 3px solid #dc2626;
  border-radius: 8px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: .85rem;
}
.land-sg__warn kbd {
  display: inline-block;
  padding: .12rem .4rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: .8rem;
  font-weight: 800;
  color: #dc2626;
}
.land-sg__input {
  width: 100%;
  padding: .65rem .85rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-family: ui-monospace, monospace;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .85rem;
  transition: border-color .15s, box-shadow .15s;
  background: var(--bg-elev, #fff);
  color: var(--text);
}
.land-sg__input:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}
.land-sg__reason {
  display: block;
  margin-bottom: 1rem;
}
.land-sg__reason span {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.land-sg__reason textarea {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: .85rem;
  resize: vertical;
  background: var(--bg-elev, #fff);
  color: var(--text);
  transition: border-color .15s;
}
.land-sg__reason textarea:focus {
  outline: none;
  border-color: var(--brand, #2563eb);
}
.land-sg__actions {
  display: flex;
  gap: .55rem;
}
.land-sg__btn {
  flex: 1;
  padding: .65rem 1rem;
  border-radius: 10px;
  border: 1.5px solid;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.land-sg__btn--ghost {
  background: var(--bg-elev, #fff);
  border-color: var(--border);
  color: var(--text);
}
.land-sg__btn--ghost:hover {
  background: var(--bg-muted);
}
.land-sg__btn--danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(220,38,38,.4);
}
.land-sg__btn--danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  box-shadow: 0 4px 12px -2px rgba(220,38,38,.55);
  transform: translateY(-1px);
}
.land-sg__btn--danger:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--bg-muted);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sb-safety__badge-pulse::before,
  .land-sg__icon { animation: none !important; }
  .land-sg-bg, .land-sg { transition: none !important; }
}