/* ═══════════════════════════════════════════════════════════════════════════
   BagStorage — UI v2  ·  ULTRA-PREMIUM SaaS Restyle
   ─────────────────────────────────────────────────────────────────────────
   All rules under .ui-v2. Same palette. Total visual transformation.
   Fixes: white-on-white, hover flicker (no translateY on hover),
          login dark card, admin KPI labels, refresh btns, index full-width.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ━━━  §0 — DESIGN TOKENS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 {
  --v2-ease: cubic-bezier(.22,1,.36,1);
  --v2-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --v2-ease-elastic: cubic-bezier(.68,-.55,.265,1.55);
  --v2-fast: 180ms;
  --v2-med: 280ms;
  --v2-slow: 420ms;
  --v2-xslow: 600ms;

  --v2-r-xs: 8px;
  --v2-r-sm: 12px;
  --v2-r: 18px;
  --v2-r-lg: 24px;
  --v2-r-xl: 32px;
  --v2-r-pill: 999px;

  --v2-s-xs: 0 1px 2px rgba(0,0,0,.04);
  --v2-s-sm: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.03);
  --v2-s: 0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --v2-s-lg: 0 16px 48px rgba(0,0,0,.1), 0 6px 16px rgba(0,0,0,.05);
  --v2-s-xl: 0 28px 64px rgba(0,0,0,.14), 0 10px 24px rgba(0,0,0,.06);
  --v2-s-glow-b: 0 8px 36px rgba(14,58,138,.22);
  --v2-s-glow-o: 0 8px 36px rgba(249,115,22,.22);

  /* ── lift shadows (replace translateY hover) ── */
  --v2-lift-sm: 0 6px 20px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.04);
  --v2-lift: 0 14px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.05);
  --v2-lift-lg: 0 20px 56px rgba(0,0,0,.14), 0 8px 20px rgba(0,0,0,.06);

  --v2-text: #111;
  --v2-text-muted: #555;
  --v2-text-soft: #777;
}

/* ━━━  §1 — GLOBAL BASE & ANIMATED MESH BG  ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  letter-spacing: -.01em;
  color: var(--v2-text) !important;
}

.ui-v2::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(14,58,138,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(249,115,22,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(30,94,214,.04) 0%, transparent 60%);
  pointer-events: none;
  animation: v2-mesh 25s ease-in-out infinite alternate;
}

@keyframes v2-mesh {
  0%   { background-size: 100% 100%, 100% 100%, 100% 100%; opacity: .7; }
  50%  { background-size: 130% 130%, 110% 110%, 140% 140%; opacity: 1; }
  100% { background-size: 110% 110%, 140% 140%, 120% 120%; opacity: .8; }
}

/* Page load — stagger fade+slide */
.ui-v2 > * {
  animation: v2-page-in 600ms var(--v2-ease) both;
}
.ui-v2 > *:nth-child(1) { animation-delay: 0ms; }
.ui-v2 > *:nth-child(2) { animation-delay: 80ms; }
.ui-v2 > *:nth-child(3) { animation-delay: 160ms; }
.ui-v2 > *:nth-child(4) { animation-delay: 240ms; }
.ui-v2 > *:nth-child(5) { animation-delay: 320ms; }

@keyframes v2-page-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ui-v2 ::selection {
  background: rgba(14,58,138,.15);
  color: #0E3A8A;
}

/* ━━━  §2 — TOPBAR  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .top {
  background: linear-gradient(135deg, #0E3A8A 0%, #1E5ED6 40%, #0E3A8A 100%) !important;
  background-size: 250% 250% !important;
  animation: v2-topbar 12s ease infinite;
  padding: 0 28px;
  min-height: 64px;
  box-shadow: 0 4px 24px rgba(14,58,138,.35), inset 0 1px 0 rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  z-index: 200;
  gap: 16px;
  backdrop-filter: saturate(1.3);
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  color: #fff !important;
}

.ui-v2 .top * { color: #fff !important; }

@keyframes v2-topbar {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* Animated accent line */
.ui-v2 .top::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #F97316 20%, #EA580C 40%, #1E5ED6 60%, #0E3A8A 80%, transparent 100%);
  background-size: 200% 100%;
  animation: v2-accent-slide 4s linear infinite;
}

@keyframes v2-accent-slide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ui-v2 .top img {
  transition: all var(--v2-slow) var(--v2-ease-bounce);
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.3));
}
.ui-v2 .top img:hover {
  transform: scale(1.1) rotate(-3deg);
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.45));
}

/* ━━━  §3 — TOPBAR BUTTONS & LINKS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .top .logout,
.ui-v2 .top .refresh-btn {
  border-radius: var(--v2-r-sm) !important;
  backdrop-filter: blur(12px) saturate(1.5);
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 12px !important;
  padding: 10px 18px !important;
  position: relative;
  overflow: hidden;
  transition: all var(--v2-med) var(--v2-ease);
}
.ui-v2 .top .logout:hover,
.ui-v2 .top .refresh-btn:hover {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: var(--v2-lift-sm);
}
.ui-v2 .top .logout:active,
.ui-v2 .top .refresh-btn:active {
  transform: scale(.95);
}

.ui-v2 .top a,
.ui-v2 .top-right a {
  padding: 8px 16px !important;
  border-radius: var(--v2-r-sm) !important;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: all var(--v2-med) var(--v2-ease);
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ui-v2 .top a:hover,
.ui-v2 .top-right a:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

/* ━━━  §4 — CARDS (GLASS MORPHISM)  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .card {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(236,236,241,.5) !important;
  border-radius: var(--v2-r-lg) !important;
  box-shadow: var(--v2-s);
  position: relative;
  overflow: hidden;
  transition: all var(--v2-med) var(--v2-ease);
  color: var(--v2-text) !important;
  animation: v2-card-appear 500ms var(--v2-ease) both;
}

@keyframes v2-card-appear {
  from { opacity: 0; transform: translateY(30px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gradient top accent stripe */
.ui-v2 .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, #0E3A8A 0%, #1E5ED6 50%, #F97316 100%);
  opacity: 0;
  transition: opacity var(--v2-med) var(--v2-ease);
  z-index: 1;
}

/* Decorative orb */
.ui-v2 .card::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(14,58,138,.06), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: all var(--v2-xslow) var(--v2-ease);
}

/* ── CARD HOVER: scale only, NO translateY ── */
.ui-v2 .card:hover {
  box-shadow: var(--v2-lift);
  border-color: rgba(14,58,138,.12) !important;
  transform: scale(1.008);
}
.ui-v2 .card:hover::before { opacity: 1; }
.ui-v2 .card:hover::after {
  top: -30px; right: -30px;
  width: 180px; height: 180px;
}

.ui-v2 .card h2 {
  font-weight: 900 !important;
  letter-spacing: -.02em;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 20px !important;
  color: var(--v2-text) !important;
}
.ui-v2 .card h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 50px; height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #F97316, #EA580C);
  transition: width var(--v2-slow) var(--v2-ease);
}
.ui-v2 .card:hover h2::after { width: 90px; }

/* ━━━  §5 — KPI CARDS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .kpi-card {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(236,236,241,.4) !important;
  border-radius: var(--v2-r-lg) !important;
  padding: 26px !important;
  box-shadow: var(--v2-s);
  position: relative;
  overflow: hidden;
  transition: all var(--v2-med) var(--v2-ease);
  color: var(--v2-text) !important;
}

/* Left accent bar */
.ui-v2 .kpi-card::before {
  content: '';
  position: absolute;
  top: 14px; left: 0; bottom: 14px;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(180deg, #0E3A8A, #1E5ED6);
  transition: all var(--v2-med) var(--v2-ease);
}

/* Decorative bg circle */
.ui-v2 .kpi-card::after {
  content: '';
  position: absolute;
  bottom: -25px; right: -25px;
  width: 90px; height: 90px;
  background: radial-gradient(circle, rgba(14,58,138,.07), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── KPI HOVER: scale only, NO translateY ── */
.ui-v2 .kpi-card:hover {
  transform: scale(1.03);
  box-shadow: var(--v2-lift), var(--v2-s-glow-b);
}
.ui-v2 .kpi-card:hover::before {
  width: 6px;
  background: linear-gradient(180deg, #F97316, #EA580C);
}

/* Gradient text value */
.ui-v2 .kpi-card .value {
  background: linear-gradient(135deg, #0E3A8A, #1E5ED6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  animation: v2-counter 800ms var(--v2-ease) both;
}

@keyframes v2-counter {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* FIX: dark text for label & subtext */
.ui-v2 .kpi-card .label {
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--v2-text-muted) !important;
  -webkit-text-fill-color: var(--v2-text-muted) !important;
  opacity: 1 !important;
}

.ui-v2 .kpi-card .subtext {
  font-size: 12px !important;
  color: var(--v2-text-soft) !important;
  -webkit-text-fill-color: var(--v2-text-soft) !important;
  opacity: 1 !important;
}

/* Stagger entrance */
.ui-v2 .kpi-card {
  animation: v2-kpi-in 600ms var(--v2-ease-bounce) both;
}
.ui-v2 .grid-2 > :nth-child(1) { animation-delay: 0ms; }
.ui-v2 .grid-2 > :nth-child(2) { animation-delay: 100ms; }
.ui-v2 .grid-2 > :nth-child(3) { animation-delay: 200ms; }
.ui-v2 .grid-2 > :nth-child(4) { animation-delay: 300ms; }
.ui-v2 .grid-2 > :nth-child(5) { animation-delay: 400ms; }
.ui-v2 .grid-2 > :nth-child(6) { animation-delay: 500ms; }

@keyframes v2-kpi-in {
  from { opacity: 0; transform: translateY(28px) scale(.94) rotate(-1deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* ━━━  §6 — GRID LAYOUTS & CONTAINER  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .grid-2 { gap: 24px !important; }
.ui-v2 .grid-3 { gap: 24px !important; margin-bottom: 28px; }

.ui-v2 .grid-3 > * {
  animation: v2-card-appear 500ms var(--v2-ease) both;
}
.ui-v2 .grid-3 > :nth-child(1) { animation-delay: 0ms; }
.ui-v2 .grid-3 > :nth-child(2) { animation-delay: 120ms; }
.ui-v2 .grid-3 > :nth-child(3) { animation-delay: 240ms; }

.ui-v2 .container {
  padding: 28px 32px !important;
  max-width: 1500px;
}

/* ── INDEX FULL-WIDTH: remove max-width, let .wrap breathe ── */
.ui-v2 .wrap {
  max-width: none !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* ━━━  §7 — TABLES  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .table-wrapper {
  border-radius: var(--v2-r) !important;
  overflow: hidden;
  border: 1px solid rgba(236,236,241,.5);
  box-shadow: var(--v2-s-sm);
  animation: v2-card-appear 600ms var(--v2-ease) 200ms both;
}

.ui-v2 .stat-table,
.ui-v2 .audit-table,
.ui-v2 .table {
  border-collapse: separate;
  border-spacing: 0;
}

.ui-v2 .stat-table th,
.ui-v2 .audit-table th,
.ui-v2 .table th {
  background: linear-gradient(180deg, #0E3A8A, #1a4faa) !important;
  color: #fff !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  padding: 16px 18px !important;
  border-bottom: none !important;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

.ui-v2 .stat-table th:first-child,
.ui-v2 .audit-table th:first-child,
.ui-v2 .table th:first-child { border-radius: var(--v2-r-sm) 0 0 0; }
.ui-v2 .stat-table th:last-child,
.ui-v2 .audit-table th:last-child,
.ui-v2 .table th:last-child { border-radius: 0 var(--v2-r-sm) 0 0; }

.ui-v2 .stat-table td,
.ui-v2 .audit-table td,
.ui-v2 .table td {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(236,236,241,.35);
  transition: all var(--v2-fast) var(--v2-ease);
  font-size: 14px;
  color: var(--v2-text);
}

/* Zebra */
.ui-v2 .stat-table tbody tr:nth-child(even),
.ui-v2 .audit-table tbody tr:nth-child(even),
.ui-v2 .table tbody tr:nth-child(even) {
  background: rgba(244,247,251,.5);
}

/* Row hover — NO translateY, just bg + shadow */
.ui-v2 .stat-table tbody tr,
.ui-v2 .audit-table tbody tr,
.ui-v2 .table tbody tr {
  transition: all var(--v2-med) var(--v2-ease);
}
.ui-v2 .stat-table tbody tr:hover,
.ui-v2 .audit-table tbody tr:hover,
.ui-v2 .table tbody tr:hover {
  background: rgba(14,58,138,.04) !important;
}
.ui-v2 .stat-table tbody tr:hover td:first-child,
.ui-v2 .audit-table tbody tr:hover td:first-child,
.ui-v2 .table tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 #F97316;
}

/* Row entrance stagger */
.ui-v2 .stat-table tbody tr,
.ui-v2 .audit-table tbody tr {
  animation: v2-row-in 400ms var(--v2-ease) both;
}
.ui-v2 .stat-table tbody tr:nth-child(1),
.ui-v2 .audit-table tbody tr:nth-child(1) { animation-delay: 50ms; }
.ui-v2 .stat-table tbody tr:nth-child(2),
.ui-v2 .audit-table tbody tr:nth-child(2) { animation-delay: 100ms; }
.ui-v2 .stat-table tbody tr:nth-child(3),
.ui-v2 .audit-table tbody tr:nth-child(3) { animation-delay: 150ms; }
.ui-v2 .stat-table tbody tr:nth-child(4),
.ui-v2 .audit-table tbody tr:nth-child(4) { animation-delay: 200ms; }
.ui-v2 .stat-table tbody tr:nth-child(5),
.ui-v2 .audit-table tbody tr:nth-child(5) { animation-delay: 250ms; }

@keyframes v2-row-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ━━━  §8 — FORMS & INPUTS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 input:not([type="checkbox"]):not([type="radio"]):not(.switch input),
.ui-v2 select {
  border-radius: var(--v2-r-sm) !important;
  border: 2px solid rgba(217,217,227,.6) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.03);
  transition: all var(--v2-med) var(--v2-ease) !important;
  font-weight: 500;
  color: var(--v2-text) !important;
}

.ui-v2 input:not([type="checkbox"]):not([type="radio"]):hover,
.ui-v2 select:hover {
  border-color: rgba(30,94,214,.35) !important;
  box-shadow: 0 2px 10px rgba(14,58,138,.08);
}

.ui-v2 input:not([type="checkbox"]):not([type="radio"]):focus,
.ui-v2 select:focus {
  outline: none !important;
  border-color: #0E3A8A !important;
  box-shadow: 0 0 0 4px rgba(14,58,138,.1), 0 4px 16px rgba(14,58,138,.08) !important;
  background: #fff !important;
  animation: v2-focus-pop 300ms var(--v2-ease-bounce);
}

@keyframes v2-focus-pop {
  0%   { box-shadow: 0 0 0 0 rgba(14,58,138,0); }
  50%  { box-shadow: 0 0 0 8px rgba(14,58,138,.12); }
  100% { box-shadow: 0 0 0 4px rgba(14,58,138,.1); }
}

.ui-v2 input:disabled,
.ui-v2 select:disabled {
  opacity: .4;
  cursor: not-allowed;
  background: rgba(246,247,251,.8) !important;
}

.ui-v2 label {
  font-weight: 800 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 12px !important;
  color: var(--v2-text-muted) !important;
}

.ui-v2 .filter-row {
  gap: 16px;
  padding: 20px 0;
  border-bottom: 2px solid rgba(236,236,241,.3);
  margin-bottom: 24px;
  animation: v2-card-appear 500ms var(--v2-ease) 100ms both;
}

/* ━━━  §9 — BUTTONS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Shimmer sweep on all buttons */
.ui-v2 button,
.ui-v2 .btn,
.ui-v2 .btn-small {
  position: relative;
  overflow: hidden;
}
.ui-v2 button::after,
.ui-v2 .btn::after,
.ui-v2 .btn-small::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transition: left 600ms var(--v2-ease);
  z-index: 0;
  pointer-events: none;
}
.ui-v2 button:hover::after,
.ui-v2 .btn:hover::after,
.ui-v2 .btn-small:hover::after {
  left: 130%;
}

/* Main CTA — scale only, NO translateY */
.ui-v2 button:not(.logout):not(.btn-small):not(.kp-btn):not(.refresh-btn):not(.btn):not(.slider):not([class*="badge"]):not(.switch *) {
  border-radius: var(--v2-r) !important;
  background: linear-gradient(135deg, #0E3A8A, #1E5ED6) !important;
  color: #fff !important;
  box-shadow: var(--v2-s-sm), 0 4px 16px rgba(14,58,138,.2);
  font-weight: 800;
  letter-spacing: .02em;
  transition: all var(--v2-med) var(--v2-ease);
}
.ui-v2 button:not(.logout):not(.btn-small):not(.kp-btn):not(.refresh-btn):not(.btn):not(.slider):not([class*="badge"]):not(.switch *):hover {
  box-shadow: var(--v2-lift), 0 10px 28px rgba(14,58,138,.25);
  transform: scale(1.02);
}
.ui-v2 button:not(.logout):not(.btn-small):not(.kp-btn):not(.refresh-btn):not(.btn):not(.slider):not([class*="badge"]):not(.switch *):active {
  transform: scale(.96);
  box-shadow: var(--v2-s-sm);
}

/* btn-small — scale only */
.ui-v2 .btn-small {
  border-radius: var(--v2-r-sm) !important;
  font-weight: 800;
  box-shadow: var(--v2-s-xs);
  letter-spacing: .01em;
  transition: all var(--v2-med) var(--v2-ease);
}
.ui-v2 .btn-small:hover {
  transform: scale(1.04);
  box-shadow: var(--v2-lift-sm);
}
.ui-v2 .btn-small.primary {
  background: linear-gradient(135deg, #0E3A8A, #1E5ED6) !important;
  box-shadow: var(--v2-s-xs), 0 4px 16px rgba(14,58,138,.2);
  color: #fff !important;
}
.ui-v2 .btn-small.primary:hover { box-shadow: var(--v2-lift-sm), var(--v2-s-glow-b); }
.ui-v2 .btn-small.ok {
  background: linear-gradient(135deg, #F97316, #EA580C) !important;
  box-shadow: var(--v2-s-xs), 0 4px 16px rgba(249,115,22,.2);
  color: #fff !important;
}
.ui-v2 .btn-small.ok:hover { box-shadow: var(--v2-lift-sm), var(--v2-s-glow-o); }
.ui-v2 .btn-small.danger {
  box-shadow: var(--v2-s-xs), 0 2px 8px rgba(176,0,32,.1);
}
.ui-v2 .btn-small.danger:hover { box-shadow: var(--v2-lift-sm), 0 4px 14px rgba(176,0,32,.15); }
.ui-v2 .btn-small:active { transform: scale(.95); }

/* .btn (dashboard, audit) */
.ui-v2 .btn {
  border-radius: var(--v2-r-sm) !important;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: var(--v2-s-xs), 0 4px 14px rgba(14,58,138,.15);
  transition: all var(--v2-med) var(--v2-ease);
}
.ui-v2 .btn:hover {
  transform: scale(1.04);
  box-shadow: var(--v2-lift-sm), 0 8px 24px rgba(14,58,138,.18);
}
.ui-v2 .btn.secondary {
  box-shadow: var(--v2-s-xs);
  background: rgba(233,233,242,.8) !important;
  color: var(--v2-text) !important;
  backdrop-filter: blur(4px);
}
.ui-v2 .btn.secondary:hover {
  box-shadow: var(--v2-lift-sm);
  background: rgba(220,220,230,.9) !important;
}
.ui-v2 .btn:active { transform: scale(.96); }

/* .refresh-btn OUTSIDE topbar — solid blue with white text */
.ui-v2 .refresh-btn {
  border-radius: var(--v2-r-sm) !important;
  background: linear-gradient(135deg, #0E3A8A, #1E5ED6) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: var(--v2-s-sm), 0 4px 16px rgba(14,58,138,.2);
  transition: all var(--v2-med) var(--v2-ease);
  position: relative;
  overflow: hidden;
}
.ui-v2 .refresh-btn:hover {
  transform: scale(1.04);
  box-shadow: var(--v2-lift-sm), var(--v2-s-glow-b);
}
.ui-v2 .refresh-btn:active { transform: scale(.95); }

/* Override for topbar refresh — glass */
.ui-v2 .top .refresh-btn {
  background: rgba(255,255,255,.12) !important;
  box-shadow: none;
}
.ui-v2 .top .refresh-btn:hover {
  background: rgba(255,255,255,.22) !important;
  box-shadow: var(--v2-lift-sm);
  transform: none;
}

/* Focus ring */
.ui-v2 button:focus-visible,
.ui-v2 .btn:focus-visible,
.ui-v2 .btn-small:focus-visible {
  outline: 3px solid #1E5ED6;
  outline-offset: 3px;
}

/* Disabled */
.ui-v2 button:disabled,
.ui-v2 .btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(.3);
}
.ui-v2 button:disabled::after { display: none; }

/* ━━━  §10 — BADGES  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .badge {
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  text-transform: uppercase;
  font-size: 11px !important;
  padding: 6px 16px !important;
  border-radius: var(--v2-r-pill);
  transition: all var(--v2-med) var(--v2-ease);
  animation: v2-badge-pop 350ms var(--v2-ease-bounce) both;
}

@keyframes v2-badge-pop {
  from { opacity: 0; transform: scale(.6); }
  60%  { transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

.ui-v2 .badge.active {
  animation: v2-badge-pop 350ms var(--v2-ease-bounce) both, v2-badge-pulse 2.5s ease-in-out infinite 350ms;
}

@keyframes v2-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,58,138,.2); }
  50%      { box-shadow: 0 0 0 10px rgba(14,58,138,.03); }
}

.ui-v2 .badge.done { box-shadow: 0 2px 10px rgba(249,115,22,.15); }

.ui-v2 .action-badge {
  border-radius: var(--v2-r-xs) !important;
  font-weight: 700;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  animation: v2-badge-pop 300ms var(--v2-ease-bounce) both;
}

.ui-v2 .status-badge {
  border-radius: var(--v2-r-xs) !important;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  animation: v2-badge-pop 300ms var(--v2-ease-bounce) both;
}

/* ━━━  §11 — MODALS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .modal-backdrop {
  backdrop-filter: blur(14px) saturate(.7) brightness(.85) !important;
  background: rgba(0,0,0,.4) !important;
  animation: v2-backdrop-in 300ms var(--v2-ease) both;
}

@keyframes v2-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0) saturate(1) brightness(1); }
  to   { opacity: 1; }
}

.ui-v2 .modal {
  border-radius: var(--v2-r-xl) !important;
  box-shadow: var(--v2-s-xl) !important;
  border: 1px solid rgba(236,236,241,.3) !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(24px);
  animation: v2-modal-wow 500ms var(--v2-ease-bounce) both;
  position: relative;
  overflow: hidden;
  color: var(--v2-text) !important;
}

@keyframes v2-modal-wow {
  0%   { opacity: 0; transform: scale(.7) translateY(60px) rotateX(8deg); filter: blur(8px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(-4px) rotateX(-1deg); filter: blur(0); }
  100% { transform: scale(1) translateY(0) rotateX(0); }
}

.ui-v2 .modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #0E3A8A, #1E5ED6, #F97316, #EA580C);
  z-index: 1;
  animation: v2-modal-bar 3s linear infinite;
  background-size: 200% 100%;
}

@keyframes v2-modal-bar {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.ui-v2 .modal h3 {
  letter-spacing: -.02em;
  font-weight: 900 !important;
  padding-top: 8px;
  color: var(--v2-text) !important;
}

.ui-v2 .modal p { color: var(--v2-text) !important; }

.ui-v2 .modal-actions {
  padding-top: 16px;
  border-top: 1px solid rgba(236,236,241,.4);
  margin-top: 20px !important;
}

/* ━━━  §12 — ORDER ITEMS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .order-item {
  padding: 18px 16px !important;
  margin: 8px 0 !important;
  border-bottom: none !important;
  border: 1px solid rgba(236,236,241,.4) !important;
  border-radius: var(--v2-r) !important;
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(6px);
  transition: all var(--v2-med) var(--v2-ease);
  position: relative;
  overflow: hidden;
  animation: v2-order-slide 400ms var(--v2-ease) both;
  color: var(--v2-text) !important;
}

@keyframes v2-order-slide {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.ui-v2 .order-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0E3A8A, #1E5ED6);
  opacity: 0;
  transition: opacity var(--v2-fast) var(--v2-ease);
}

/* ── ORDER HOVER: no translateX (causes same flicker), use left-border + bg ── */
.ui-v2 .order-item:hover {
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--v2-lift-sm);
  border-color: rgba(14,58,138,.1) !important;
}
.ui-v2 .order-item:hover::before { opacity: 1; }

/* ━━━  §13 — SWITCH / TOGGLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .switch-row {
  padding: 14px 16px;
  background: rgba(244,247,251,.5);
  border-radius: var(--v2-r-sm);
  border: 1px solid rgba(236,236,241,.4);
  margin-top: 16px !important;
}

.ui-v2 .switch .slider {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
  transition: all var(--v2-med) var(--v2-ease);
}
.ui-v2 .switch .slider:before {
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: all var(--v2-med) var(--v2-ease-bounce);
}
.ui-v2 .switch input:checked + .slider {
  background: linear-gradient(135deg, #0E3A8A, #1E5ED6) !important;
  border-color: #0E3A8A !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12), 0 0 14px rgba(14,58,138,.3);
}

.ui-v2 .switch-label {
  font-weight: 700;
  font-size: 14px !important;
  color: var(--v2-text) !important;
}

/* ━━━  §14 — KEYPAD (PC)  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .kp-display {
  border-radius: var(--v2-r) !important;
  border: 2px solid rgba(217,217,227,.5) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,247,251,.92)) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.04), var(--v2-s-sm);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
  color: var(--v2-text) !important;
}

.ui-v2 .kp-grid { gap: 10px !important; }

.ui-v2 .kp-btn {
  border-radius: var(--v2-r) !important;
  border: 1px solid rgba(217,217,227,.5) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,243,248,.92)) !important;
  box-shadow: var(--v2-s-xs), 0 2px 4px rgba(0,0,0,.04);
  transition: all var(--v2-fast) var(--v2-ease);
  font-weight: 900;
  color: var(--v2-text) !important;
}
/* ── KP HOVER: scale only ── */
.ui-v2 .kp-btn:hover {
  background: linear-gradient(180deg, #fff, rgba(242,243,248,.96)) !important;
  box-shadow: var(--v2-lift-sm);
  transform: scale(1.06);
}
.ui-v2 .kp-btn:active {
  animation: v2-key-press 200ms var(--v2-ease) !important;
}

@keyframes v2-key-press {
  0%   { transform: scale(1); }
  40%  { transform: scale(.88); background: rgba(14,58,138,.08); }
  100% { transform: scale(1); }
}

.ui-v2 .kp-btn.ok {
  background: linear-gradient(135deg, #111, #222) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(17,17,17,.25);
}
.ui-v2 .kp-btn.ok:hover { box-shadow: 0 8px 28px rgba(17,17,17,.35); }
.ui-v2 .kp-btn.danger {
  color: #b00020 !important;
  box-shadow: 0 2px 8px rgba(176,0,32,.08);
}
.ui-v2 .kp-btn[disabled] { transform: none !important; box-shadow: none !important; }

.ui-v2 .kp-wrap {
  animation: v2-card-appear 500ms var(--v2-ease) 150ms both;
}

/* ━━━  §15 — GREEN-OK OVERLAY  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .green-ok {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 60%, #F97316 100%) !important;
  background-size: 200% 200%;
  animation: v2-flash-in 350ms var(--v2-ease) both, v2-overlay-pulse 2s ease infinite 350ms;
  color: #fff !important;
}

@keyframes v2-flash-in {
  from { opacity: 0; transform: scale(1.15); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes v2-overlay-pulse {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.ui-v2 .green-ok .title {
  text-shadow: 0 4px 30px rgba(0,0,0,.25);
  animation: v2-title-drop 600ms var(--v2-ease-bounce) 150ms both;
}

@keyframes v2-title-drop {
  0%   { opacity: 0; transform: scale(.4) translateY(40px) rotate(-5deg); }
  60%  { transform: scale(1.1) translateY(-6px) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}

.ui-v2 .green-ok .line  { animation: v2-line-up 400ms var(--v2-ease) 250ms both; }
.ui-v2 .green-ok .small { animation: v2-line-up 400ms var(--v2-ease) 400ms both; }

@keyframes v2-line-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ━━━  §16 — ALERT CARDS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .alert-card {
  border-radius: var(--v2-r-sm) !important;
  border-left-width: 6px !important;
  padding: 20px 24px !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(10px);
  box-shadow: var(--v2-s);
  animation: v2-alert-slide 500ms var(--v2-ease-bounce) both;
  position: relative;
  overflow: hidden;
  color: var(--v2-text) !important;
}

@keyframes v2-alert-slide {
  from { opacity: 0; transform: translateX(-30px) scale(.96); }
  60%  { transform: translateX(4px) scale(1.01); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.ui-v2 .alert-card.critical { box-shadow: var(--v2-s), 0 4px 18px rgba(220,38,38,.12); }
.ui-v2 .alert-card.warning  { box-shadow: var(--v2-s), 0 4px 18px rgba(245,158,11,.12); }
.ui-v2 .alert-card.info     { box-shadow: var(--v2-s), 0 4px 18px rgba(14,165,233,.12); }

.ui-v2 .alert-card:nth-child(1) { animation-delay: 0ms; }
.ui-v2 .alert-card:nth-child(2) { animation-delay: 120ms; }
.ui-v2 .alert-card:nth-child(3) { animation-delay: 240ms; }

/* ━━━  §17 — SUMMARY CARDS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .summary-card {
  border-radius: var(--v2-r) !important;
  box-shadow: 0 10px 36px rgba(14,58,138,.22);
  position: relative;
  overflow: hidden;
  transition: all var(--v2-med) var(--v2-ease);
  animation: v2-summary-up 500ms var(--v2-ease-bounce) both;
}

@keyframes v2-summary-up {
  from { opacity: 0; transform: translateY(24px) scale(.92); }
  60%  { transform: translateY(-4px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Glass reflection overlay */
.ui-v2 .summary-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 50%, rgba(0,0,0,.08) 100%);
  pointer-events: none;
}

/* ── SUMMARY HOVER: scale only ── */
.ui-v2 .summary-card:hover {
  transform: scale(1.04);
  box-shadow: 0 16px 48px rgba(14,58,138,.3);
}

.ui-v2 .summary-card .value {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,.12);
  animation: v2-counter 700ms var(--v2-ease) 300ms both;
}

.ui-v2 .summary > :nth-child(1) { animation-delay: 0ms; }
.ui-v2 .summary > :nth-child(2) { animation-delay: 120ms; }
.ui-v2 .summary > :nth-child(3) { animation-delay: 240ms; }
.ui-v2 .summary > :nth-child(4) { animation-delay: 360ms; }

/* ━━━  §18 — PAGINATION  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .pagination {
  padding-top: 20px;
  animation: v2-card-appear 400ms var(--v2-ease) 300ms both;
}
.ui-v2 .pagination button {
  border-radius: var(--v2-r-sm) !important;
  font-weight: 700;
  min-width: 42px;
  min-height: 42px;
  box-shadow: var(--v2-s-xs);
  border: 1px solid rgba(217,217,227,.5) !important;
  color: var(--v2-text) !important;
  transition: all var(--v2-med) var(--v2-ease);
}
/* ── PAGINATION HOVER: scale only ── */
.ui-v2 .pagination button:hover {
  background: rgba(14,58,138,.06) !important;
  transform: scale(1.08);
  box-shadow: var(--v2-lift-sm);
  border-color: rgba(14,58,138,.2) !important;
}
.ui-v2 .pagination button.active {
  background: linear-gradient(135deg, #0E3A8A, #1E5ED6) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(14,58,138,.3);
  border-color: transparent !important;
  animation: v2-badge-pop 300ms var(--v2-ease-bounce);
}

/* ━━━  §19 — CHART WRAPPERS  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .chart-wrapper {
  border-radius: var(--v2-r);
  padding: 18px;
  background: rgba(244,247,251,.35);
  border: 1px solid rgba(236,236,241,.25);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.02);
  animation: v2-card-appear 500ms var(--v2-ease) 250ms both;
}

/* ━━━  §20 — CAMERA / PHOTO  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .photo-preview {
  border-radius: var(--v2-r) !important;
  box-shadow: var(--v2-s);
  border: 2px solid rgba(236,236,241,.4) !important;
  transition: all var(--v2-med) var(--v2-ease);
  animation: v2-card-appear 400ms var(--v2-ease) both;
}
.ui-v2 .photo-preview:hover {
  box-shadow: var(--v2-lift);
  transform: scale(1.01);
}

.ui-v2 video {
  border-radius: var(--v2-r) !important;
  box-shadow: var(--v2-s);
  border: 2px solid rgba(236,236,241,.25);
}

.ui-v2 .cam-wrap {
  border-radius: var(--v2-r);
  overflow: hidden;
  box-shadow: var(--v2-s-sm);
}

/* ━━━  §21 — CUBE PILL / BADGE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .cube-pill {
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.6);
}
.ui-v2 .cube-badge {
  box-shadow: var(--v2-s-sm);
  background: rgba(14,58,138,.06) !important;
  border-color: #0E3A8A !important;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--v2-text) !important;
}

/* ━━━  §22 — FLOATING QR  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 #floatingQRBtn {
  border-radius: 50% !important;
  width: 66px !important;
  height: 66px !important;
  box-shadow: 0 8px 32px rgba(249,115,22,.4), 0 0 0 4px rgba(249,115,22,.15) !important;
  background: linear-gradient(135deg, #F97316, #EA580C) !important;
  color: #fff !important;
  animation: v2-fab-breathe 3s ease-in-out infinite, v2-fab-enter 600ms var(--v2-ease-bounce) both;
  transition: all var(--v2-med) var(--v2-ease);
}

@keyframes v2-fab-breathe {
  0%, 100% { box-shadow: 0 8px 32px rgba(249,115,22,.4), 0 0 0 4px rgba(249,115,22,.15); }
  50%      { box-shadow: 0 14px 40px rgba(249,115,22,.5), 0 0 0 10px rgba(249,115,22,.08); }
}

@keyframes v2-fab-enter {
  from { opacity: 0; transform: scale(.3) rotate(-90deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* ── FAB HOVER: scale only ── */
.ui-v2 #floatingQRBtn:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 16px 44px rgba(249,115,22,.5), 0 0 0 8px rgba(249,115,22,.18) !important;
}
.ui-v2 #floatingQRBtn:active {
  transform: scale(.9) !important;
}

/* ━━━  §23 — SEARCH INPUT  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .search {
  border-radius: var(--v2-r) !important;
  padding-left: 18px !important;
  border: 2px solid rgba(217,217,227,.35) !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(6px);
  color: var(--v2-text) !important;
}
.ui-v2 .search:focus {
  border-color: #0E3A8A !important;
  box-shadow: 0 0 0 4px rgba(14,58,138,.08), var(--v2-s) !important;
  background: #fff !important;
  animation: v2-focus-pop 300ms var(--v2-ease-bounce);
}

/* ━━━  §24 — LOADING SKELETON  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .loading {
  position: relative;
  overflow: hidden;
  color: #999;
}
.ui-v2 .loading::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(14,58,138,.08), rgba(30,94,214,.05), transparent);
  animation: v2-skel 1.8s ease-in-out infinite;
}

@keyframes v2-skel {
  0%   { left: -60%; }
  100% { left: 160%; }
}

/* ━━━  §25 — ERROR / SUCCESS / OUTPUT  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .error {
  border-radius: var(--v2-r-sm) !important;
  animation: v2-shake 500ms var(--v2-ease);
  box-shadow: 0 4px 16px rgba(176,0,32,.08);
}

@keyframes v2-shake {
  0%, 100% { transform: translateX(0); }
  12%      { transform: translateX(-8px) rotate(-.5deg); }
  24%      { transform: translateX(8px) rotate(.5deg); }
  36%      { transform: translateX(-6px) rotate(-.3deg); }
  48%      { transform: translateX(6px) rotate(.3deg); }
  60%      { transform: translateX(-3px); }
  72%      { transform: translateX(3px); }
  84%      { transform: translateX(-1px); }
}

.ui-v2 .out {
  border-radius: var(--v2-r-sm) !important;
  box-shadow: var(--v2-s-sm);
  animation: v2-result-in 400ms var(--v2-ease-bounce) both;
  border-left: 5px solid #16a34a !important;
  color: var(--v2-text) !important;
}

@keyframes v2-result-in {
  from { opacity: 0; transform: translateY(-16px) scale(.97); }
  60%  { transform: translateY(2px) scale(1.01); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ━━━  §26 — PRINT TOAST  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 #printToast {
  border-radius: var(--v2-r) !important;
  backdrop-filter: blur(18px) saturate(1.5);
  background: rgba(17,17,17,.93) !important;
  box-shadow: var(--v2-s-xl);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff !important;
  animation: v2-toast-up 400ms var(--v2-ease-bounce) both;
}

@keyframes v2-toast-up {
  from { opacity: 0; transform: translateY(30px) scale(.9); }
  60%  { transform: translateY(-4px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ━━━  §27 — NOTIFICATION STACK  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 #notifyStack > div {
  border-radius: var(--v2-r) !important;
  backdrop-filter: blur(14px);
  box-shadow: var(--v2-s-lg) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  animation: v2-notify-in 450ms var(--v2-ease-bounce) both;
}

@keyframes v2-notify-in {
  from { opacity: 0; transform: translateX(80px) scale(.85) rotate(2deg); }
  60%  { transform: translateX(-6px) scale(1.02) rotate(0); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.ui-v2 #notifyMuteBtn {
  border-radius: var(--v2-r-sm) !important;
  backdrop-filter: blur(8px);
  box-shadow: var(--v2-s);
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ━━━  §28 — LOGIN PAGE — KEEP DARK CARD  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .logo-container img {
  filter: drop-shadow(0 12px 50px rgba(0,0,0,.35));
  transition: all 800ms var(--v2-ease-bounce);
  animation: v2-logo-float 4s ease-in-out infinite;
}

@keyframes v2-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.ui-v2 .logo-container img:hover {
  transform: scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 18px 64px rgba(0,0,0,.5));
}

/* PIN display */
.ui-v2 .display {
  border-radius: var(--v2-r) !important;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 2px 12px rgba(0,0,0,.25), 0 4px 18px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.14) !important;
  animation: v2-card-appear 500ms var(--v2-ease) 200ms both;
}

/* Login keypad buttons — dark glass bg so white text visible */
.ui-v2 .grid .btn {
  border-radius: var(--v2-r) !important;
  backdrop-filter: blur(10px);
  background: rgba(60,60,80,.35) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1) !important;
  transition: all var(--v2-med) var(--v2-ease);
  animation: v2-key-stagger 400ms var(--v2-ease-bounce) both;
}
/* ── LOGIN BTN HOVER: scale only ── */
.ui-v2 .grid .btn:hover {
  background: rgba(80,80,105,.5) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transform: scale(1.08);
  border-color: rgba(255,255,255,.2) !important;
}
.ui-v2 .grid .btn:active {
  transform: scale(.92);
  background: rgba(100,100,130,.5) !important;
}

@keyframes v2-key-stagger {
  from { opacity: 0; transform: scale(.7) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ui-v2 .grid .btn:nth-child(1)  { animation-delay: 50ms; }
.ui-v2 .grid .btn:nth-child(2)  { animation-delay: 80ms; }
.ui-v2 .grid .btn:nth-child(3)  { animation-delay: 110ms; }
.ui-v2 .grid .btn:nth-child(4)  { animation-delay: 140ms; }
.ui-v2 .grid .btn:nth-child(5)  { animation-delay: 170ms; }
.ui-v2 .grid .btn:nth-child(6)  { animation-delay: 200ms; }
.ui-v2 .grid .btn:nth-child(7)  { animation-delay: 230ms; }
.ui-v2 .grid .btn:nth-child(8)  { animation-delay: 260ms; }
.ui-v2 .grid .btn:nth-child(9)  { animation-delay: 290ms; }
.ui-v2 .grid .btn:nth-child(10) { animation-delay: 320ms; }
.ui-v2 .grid .btn:nth-child(11) { animation-delay: 350ms; }
.ui-v2 .grid .btn:nth-child(12) { animation-delay: 380ms; }

/* Login .btn.danger — red tint */
.ui-v2 .grid .btn.danger {
  background: rgba(255,75,75,.2) !important;
  color: #ff8888 !important;
}
.ui-v2 .grid .btn.danger:hover {
  background: rgba(255,75,75,.35) !important;
}

/* Login .btn.ok — orange */
.ui-v2 .grid .btn.ok,
.ui-v2 .btn.ok {
  background: linear-gradient(135deg, #F97316, #EA580C) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(249,115,22,.35);
}
.ui-v2 .grid .btn.ok:hover,
.ui-v2 .btn.ok:hover {
  box-shadow: 0 14px 40px rgba(249,115,22,.45);
  transform: scale(1.06);
}

/* Login error */
.ui-v2 .err {
  border-radius: var(--v2-r) !important;
  animation: v2-shake 500ms var(--v2-ease);
  color: #ff9494 !important;
}

/* Login muted — on dark card */
.ui-v2 .card .muted {
  color: rgba(255,255,255,.6) !important;
  -webkit-text-fill-color: rgba(255,255,255,.6) !important;
}

/* On light pages, muted should be dark text */
.ui-v2 .wrap .muted,
.ui-v2 .container .muted {
  color: var(--v2-text-muted) !important;
  -webkit-text-fill-color: var(--v2-text-muted) !important;
}

/* ━━━  §29 — SCAN PAGE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 #reader {
  border-radius: var(--v2-r) !important;
  box-shadow: var(--v2-s-lg), 0 0 0 3px rgba(14,58,138,.1);
  border: 2px solid rgba(236,236,241,.25) !important;
  overflow: hidden;
  animation: v2-card-appear 500ms var(--v2-ease) both;
}

.ui-v2 #reader.scanning {
  animation: v2-scan-ring 2s ease infinite;
}

@keyframes v2-scan-ring {
  0%   { box-shadow: var(--v2-s-lg), 0 0 0 3px rgba(14,58,138,.15); }
  50%  { box-shadow: var(--v2-s-lg), 0 0 0 8px rgba(14,58,138,.08); }
  100% { box-shadow: var(--v2-s-lg), 0 0 0 3px rgba(14,58,138,.15); }
}

.ui-v2 .box {
  border-radius: var(--v2-r-sm) !important;
  border: 2px dashed rgba(217,217,227,.45) !important;
  box-shadow: var(--v2-s-xs);
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(4px);
  color: var(--v2-text) !important;
}

/* ━━━  §30 — SCROLLBAR  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 ::-webkit-scrollbar { width: 6px; height: 6px; }
.ui-v2 ::-webkit-scrollbar-track { background: transparent; }
.ui-v2 ::-webkit-scrollbar-thumb {
  background: rgba(14,58,138,.15);
  border-radius: 6px;
}
.ui-v2 ::-webkit-scrollbar-thumb:hover { background: rgba(14,58,138,.3); }
.ui-v2 { scrollbar-width: thin; scrollbar-color: rgba(14,58,138,.15) transparent; }

/* ━━━  §31 — MISC  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 .btn-row {
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(236,236,241,.25);
}

.ui-v2 .row { gap: 14px !important; }

.ui-v2 h2 {
  font-weight: 900 !important;
  letter-spacing: -.02em;
  color: var(--v2-text) !important;
  animation: v2-h2-in 500ms var(--v2-ease) both;
}

@keyframes v2-h2-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.ui-v2 .muted { letter-spacing: .01em; line-height: 1.5; }

/* Health/Config cards */
.ui-v2 .health-card,
.ui-v2 .config-card {
  animation: v2-card-appear 500ms var(--v2-ease) both;
  color: var(--v2-text) !important;
}
.ui-v2 .health-card .label,
.ui-v2 .config-card .label {
  color: var(--v2-text-muted) !important;
}

/* ━━━  §31b — BOOKLY BOOKINGS TABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 #booklySection {
  animation: v2-card-appear 500ms var(--v2-ease) 350ms both;
}

.ui-v2 #booklySection h2 {
  background: linear-gradient(135deg, #0E3A8A, #1E5ED6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ui-v2 #booklyTable tbody tr {
  animation: v2-row-in 400ms var(--v2-ease) both;
}
.ui-v2 #booklyTable tbody tr:nth-child(1) { animation-delay: 50ms; }
.ui-v2 #booklyTable tbody tr:nth-child(2) { animation-delay: 100ms; }
.ui-v2 #booklyTable tbody tr:nth-child(3) { animation-delay: 150ms; }
.ui-v2 #booklyTable tbody tr:nth-child(4) { animation-delay: 200ms; }
.ui-v2 #booklyTable tbody tr:nth-child(5) { animation-delay: 250ms; }
.ui-v2 #booklyTable tbody tr:nth-child(6) { animation-delay: 300ms; }
.ui-v2 #booklyTable tbody tr:nth-child(7) { animation-delay: 350ms; }
.ui-v2 #booklyTable tbody tr:nth-child(8) { animation-delay: 400ms; }

/* Bookly status badges get extra animation */
.ui-v2 #booklyTable .status-badge {
  animation: v2-badge-pop 350ms var(--v2-ease-bounce) both;
}

/* Bookly row highlight on real-time update */
@keyframes v2-bookly-flash {
  0%   { background: rgba(249,115,22,.15); }
  100% { background: transparent; }
}
.ui-v2 #booklyTable tbody tr.bookly-new {
  animation: v2-bookly-flash 1.5s ease both;
}

/* ━━━  §32 — RESPONSIVE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .ui-v2 .container { padding: 22px 20px !important; }
}

@media (max-width: 768px) {
  .ui-v2 .top { padding: 0 16px; min-height: 56px; }
  .ui-v2 .container { padding: 16px !important; }
  .ui-v2 .card { border-radius: var(--v2-r) !important; }
  .ui-v2 .card::after { display: none; }
  .ui-v2 .modal { border-radius: var(--v2-r-lg) !important; margin: 8px; }
  .ui-v2 .kpi-card { padding: 18px !important; }
  .ui-v2 .kpi-card:hover { transform: scale(1.02); }
}

@media (max-width: 520px) {
  .ui-v2 .card { border-radius: 16px !important; padding: 16px; }
  .ui-v2 .top { padding: 0 12px; min-height: 52px; }
  .ui-v2 .wrap { padding-left: 14px !important; padding-right: 14px !important; }
  .ui-v2 .kp-btn { border-radius: 14px !important; }
  .ui-v2 .order-item { padding: 14px 12px !important; border-radius: 14px !important; }
  .ui-v2 .modal { border-radius: var(--v2-r) !important; }
}

/* ━━━  §33 — ACCESSIBILITY  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 *:focus-visible {
  outline: 3px solid #1E5ED6;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-v2,
  .ui-v2 *,
  .ui-v2 *::before,
  .ui-v2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  .ui-v2 .card { border-width: 2px; background: #fff !important; }
  .ui-v2 input, .ui-v2 select { border-width: 3px !important; }
  .ui-v2 .badge, .ui-v2 .action-badge, .ui-v2 .status-badge { border: 2px solid currentColor; }
}

/* ━━━  §34 — PRINT  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
  .ui-v2 .top,
  .ui-v2 .logout,
  .ui-v2 .btn,
  .ui-v2 .refresh-btn,
  .ui-v2 .filter-row,
  .ui-v2 .pagination,
  .ui-v2 #floatingQRBtn,
  .ui-v2 #notifyStack,
  .ui-v2 #notifyMuteBtn,
  .ui-v2 #printToast { display: none !important; }

  .ui-v2 .card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
    background: #fff !important;
  }
  .ui-v2::before { display: none; }
}

/* ━━━  §35 — GLOBAL TRANSITION LAYER  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-v2 button,
.ui-v2 input,
.ui-v2 select,
.ui-v2 a,
.ui-v2 .card,
.ui-v2 .kpi-card,
.ui-v2 .badge,
.ui-v2 .btn-small,
.ui-v2 .btn,
.ui-v2 .refresh-btn,
.ui-v2 .alert-card,
.ui-v2 .summary-card,
.ui-v2 .action-badge,
.ui-v2 .status-badge,
.ui-v2 .pagination button,
.ui-v2 .order-item,
.ui-v2 .kp-btn,
.ui-v2 .photo-preview,
.ui-v2 video,
.ui-v2 .switch .slider,
.ui-v2 .switch .slider:before {
  transition: all var(--v2-med) var(--v2-ease);
}

/* ━━━  §36 — LOGIN: KEEP DARK CARD (class fallback + :has)  ━━━━━━━━━━━ */
/* .login-card class = fallback for browsers that don't support :has() */
.ui-v2 .card.login-card,
.ui-v2 .card:has(.display) {
  background: rgba(22,22,28,.92) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 80px rgba(14,58,138,.08);
}

.ui-v2 .card.login-card h2,
.ui-v2 .card.login-card h1,
.ui-v2 .card.login-card p,
.ui-v2 .card.login-card span,
.ui-v2 .card.login-card .muted,
.ui-v2 .card:has(.display) h2,
.ui-v2 .card:has(.display) p,
.ui-v2 .card:has(.display) span,
.ui-v2 .card:has(.display) .muted {
  color: rgba(255,255,255,.75) !important;
  -webkit-text-fill-color: rgba(255,255,255,.75) !important;
}

.ui-v2 .card.login-card::before,
.ui-v2 .card:has(.display)::before {
  opacity: 1;
  background: linear-gradient(90deg, #F97316, #EA580C, #1E5ED6, #0E3A8A);
}

/* ═══════════════════════════════════════════════════════════════════════════
   END — ui-v2.css  ·  v3 — flicker-free, full-width index, all text visible
   ═══════════════════════════════════════════════════════════════════════════ */