/* Karto · Franchise Admin styles — overlays the ops/styles.css base */
:root{
  --fx-primary:#3B2510; --fx-primary-hover:#5A3A1F;
  --fx-mid:#7A4F2A; --fx-muted:#9A7A55;
  --fx-accent:#D4A574; --fx-accent-hover:#C49056;
  --fx-primary-rgb:59,37,16; --fx-accent-rgb:212,165,116; --fx-mid-rgb:122,79,42;
}

/* Brand-tinted login screen */
.fx-login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:32px;overflow:auto;background:#1a0e05}
.fx-login-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fx-login-bg::before{content:'';position:absolute;top:-30%;left:-15%;width:80vmin;height:80vmin;border-radius:50%;background:radial-gradient(circle,var(--fx-accent) 0%, transparent 70%);opacity:.22;filter:blur(40px)}
.fx-login-bg::after{content:'';position:absolute;bottom:-30%;right:-15%;width:80vmin;height:80vmin;border-radius:50%;background:radial-gradient(circle,var(--fx-primary) 0%, transparent 65%);opacity:.55;filter:blur(60px)}
.fx-login-bg-grain{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>")}
.fx-login-stack{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:440px}
.fx-login-eyebrow{display:flex;align-items:center;gap:9px;color:#F5F0E6;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.72}
.fx-login-eyebrow img{width:22px;height:22px}
.fx-login-card{position:relative;background:#FBF8F1;border-radius:18px;padding:32px 32px 28px;width:100%;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.fx-login-brand-row{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid rgba(var(--fx-primary-rgb),.12);margin-bottom:22px}
.fx-login-brand-logo{width:46px;height:46px;border-radius:10px;object-fit:contain;background:#fff;padding:4px;border:1px solid rgba(var(--fx-primary-rgb),.1)}
.fx-login-brand-name{font-size:16px;font-weight:600;letter-spacing:-0.01em;color:var(--fx-primary)}
.fx-login-brand-sub{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-muted);margin-top:3px}
.fx-login-h1{font-size:26px;font-weight:600;letter-spacing:-0.025em;line-height:1.15;margin:0;color:#0A0E27}
.fx-login-h1-dot{color:var(--fx-accent)}
.fx-login-h1-sub{font-size:13px;color:#6B7280;margin:8px 0 22px;line-height:1.55}
.fx-login-field{margin-bottom:14px}
.fx-login-field label{display:block;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-muted);margin-bottom:6px;font-weight:500}
.fx-login-field input{width:100%;padding:11px 13px;background:#fff;border:1.5px solid rgba(var(--fx-primary-rgb),.14);border-radius:9px;font-size:13.5px;outline:0;transition:border-color .12s;font-family:inherit;color:#0A0E27}
.fx-login-field input:focus{border-color:var(--fx-accent);box-shadow:0 0 0 3px rgba(var(--fx-accent-rgb),.18)}
.fx-login-field input::placeholder{color:#B8A98C}
.fx-login-error{background:rgba(217,48,37,.08);border:1px solid rgba(217,48,37,.22);color:#B8261D;padding:9px 13px;border-radius:7px;font-size:12.5px;margin-bottom:14px}
.fx-login-btn{width:100%;padding:13px;background:var(--fx-primary);color:#FBF8F1;border-radius:10px;font-size:13.5px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s;border:0;cursor:pointer;font-family:inherit;margin-top:6px}
.fx-login-btn:hover{background:var(--fx-primary-hover)}
.fx-login-btn:disabled{opacity:.4;cursor:not-allowed}
.fx-login-hint{margin-top:14px;display:flex;align-items:center;gap:7px;font-family:'Geist Mono',monospace;font-size:10.5px;color:var(--fx-muted);background:rgba(var(--fx-accent-rgb),.1);padding:8px 12px;border-radius:6px;justify-content:center}
.fx-login-hint code{font-family:'Geist Mono',monospace;color:var(--fx-primary);font-weight:500}
.fx-login-foot{display:flex;align-items:center;gap:10px;color:#F5F0E6;opacity:.55;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.fx-login-foot .dot{opacity:.5}

/* Franchise sidebar — brand-tinted */
.app[data-franchise="1"]{
  --paper:#FBF8F1;
  --bg:#F6F3EC;
}
.app[data-franchise="1"] .sidebar,
.fx-shell .sidebar{background:#FBF8F1;border-right-color:rgba(var(--fx-primary-rgb),.12)}

/* Sidebar uses the original hover-to-reveal behavior from styles.css. */
@media(max-width:900px){
  .fx-shell .sidebar{display:none}
}
.app[data-franchise="1"] .sb-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:18px 18px 16px}
.fx-brand-strip{display:flex;align-items:center;gap:10px;width:100%}
.fx-brand-strip img{width:36px;height:36px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid rgba(var(--fx-primary-rgb),.1);padding:2px}
.fx-brand-strip-name{font-size:14px;font-weight:600;letter-spacing:-0.01em;color:var(--fx-primary);line-height:1}
.fx-brand-strip-sub{font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--fx-muted);letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.fx-powered{display:flex;align-items:center;gap:7px;font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fx-muted);width:100%;padding-top:10px;border-top:1px dashed rgba(var(--fx-primary-rgb),.12)}
.fx-powered img{width:14px;height:14px;opacity:.7}
.app[data-franchise="1"] .sb-item.active,
.fx-shell .sb-item.active{background:var(--fx-primary);color:#FBF8F1}
.app[data-franchise="1"] .sb-item .badge.alert,
.fx-shell .sb-item .badge.alert{background:var(--fx-accent);color:var(--fx-primary)}

/* Branded topbar accent — applies in both .app and .fx-shell hosts */
.app[data-franchise="1"] .topbar,
.fx-shell .topbar{background:#F6F3EC}
.app[data-franchise="1"] .crumbs .cur,
.fx-shell .crumbs .cur{color:var(--fx-primary)}
.fx-shell .topbar{gap:18px}
.fx-shell .topbar .crumbs{flex-shrink:0}
.fx-shell .fx-topbar-search{flex:1;max-width:none;min-width:0;margin-left:0}
.fx-shell .fx-topbar-brand{flex-shrink:0;white-space:nowrap}
.fx-liab-cell .l{white-space:nowrap}
.fx-topbar-search{
  margin-left:18px;display:flex;align-items:center;gap:9px;
  background:#FBF8F1;border:1px solid rgba(var(--fx-primary-rgb),.14);border-radius:8px;
  padding:6px 12px;width:340px;max-width:38vw;color:var(--fx-muted);
  transition:border-color .15s, box-shadow .15s;
}
.fx-topbar-search:focus-within{border-color:var(--fx-primary);box-shadow:0 0 0 3px rgba(var(--fx-primary-rgb),.06)}
.fx-topbar-search input{border:0;outline:0;background:transparent;font-size:12.5px;flex:1;color:var(--fx-primary);font-family:inherit;min-width:0}
.fx-topbar-search input::placeholder{color:var(--fx-muted)}
.fx-topbar-search kbd{font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--fx-muted);background:rgba(var(--fx-primary-rgb),.06);border-radius:4px;padding:2px 5px;flex-shrink:0;letter-spacing:.04em}
.fx-topbar-brand{display:flex;align-items:center;gap:9px;padding:5px 11px 5px 6px;border-radius:999px;background:rgba(var(--fx-accent-rgb),.16);border:1px solid rgba(var(--fx-accent-rgb),.34);margin-left:auto}
.fx-topbar-brand img{width:22px;height:22px;border-radius:50%;object-fit:contain;background:#fff;padding:2px}
.fx-topbar-brand-nm{font-size:11.5px;font-weight:600;letter-spacing:-0.005em;color:var(--fx-primary)}
.fx-topbar-brand-meta{font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--fx-muted);letter-spacing:.08em;text-transform:uppercase;margin-left:6px}

/* Branded primary buttons */
.app[data-franchise="1"] .btn-primary,
.fx-shell .btn-primary{background:var(--fx-primary)}
.app[data-franchise="1"] .btn-primary:hover,
.fx-shell .btn-primary:hover{background:var(--fx-primary-hover)}
.app[data-franchise="1"] .btn-cobalt,
.fx-shell .btn-cobalt{background:var(--fx-accent);color:var(--fx-primary)}
.app[data-franchise="1"] .btn-cobalt:hover,
.fx-shell .btn-cobalt:hover{background:var(--fx-accent-hover)}

/* Page head — title in brand brown */
.app[data-franchise="1"] .page-head h1,
.fx-shell .page-head h1{color:var(--fx-primary)}
.app[data-franchise="1"] .ital,
.fx-shell .ital{color:var(--fx-accent);font-family:'Instrument Serif',serif;font-style:italic}

/* Liability strip — branded */
.fx-liab{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(var(--fx-primary-rgb),.14);border:1px solid rgba(var(--fx-primary-rgb),.14);border-radius:12px;overflow:hidden;margin-bottom:20px}
.fx-liab-cell{padding:18px 22px;background:#FBF8F1;position:relative}
.fx-liab-cell.accent{background:#F5EFDF}
.fx-liab-cell.accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--fx-primary),var(--fx-mid))}
.fx-liab-cell .l{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-muted);display:flex;align-items:center;gap:6px}
.fx-liab-cell.accent .l::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--fx-primary)}
.fx-liab-cell .v{font-size:24px;font-weight:600;letter-spacing:-0.025em;margin-top:5px;color:var(--fx-primary)}
.fx-liab-cell .v .u{font-size:11px;font-family:'Geist Mono',monospace;color:var(--fx-muted);margin-left:4px;font-weight:500}
.fx-liab-cell .m{font-family:'Geist Mono',monospace;font-size:10px;color:var(--fx-muted);letter-spacing:.04em;margin-top:4px}

/* Sales chart in branded colors */
.fx-bars-bar{fill:var(--fx-accent);transition:fill .15s}
.fx-bars-bar:hover{fill:var(--fx-primary)}
.fx-bars-line{fill:none;stroke:var(--fx-primary);stroke-width:2}

/* Map overrides */
.app[data-franchise="1"] .gov-path[data-active="1"],
.fx-shell .gov-path[data-active="1"]{fill:var(--fx-accent) !important}
.app[data-franchise="1"] .gov-path:hover,
.fx-shell .gov-path:hover{fill:var(--fx-primary) !important}
.app[data-franchise="1"] .gov-tooltip,
.fx-shell .gov-tooltip{background:var(--fx-primary);color:#FBF8F1}
.app[data-franchise="1"] .gov-tooltip .rv,
.fx-shell .gov-tooltip .rv{color:var(--fx-accent)}

/* Branch row + status pills */
.fx-branch-status-flagship{background:rgba(var(--fx-accent-rgb),.16);color:#7A5320;border-color:rgba(var(--fx-accent-rgb),.4)}
.fx-branch-status-opening{background:rgba(232,163,0,.1);color:#A87100;border-color:rgba(232,163,0,.3)}
.fx-branch-status-pending{background:rgba(107,114,128,.1);color:#6B7280;border-color:rgba(107,114,128,.25)}

/* Card preview (denominations) — wallet-card */
.fx-cardart{position:relative;width:100%;aspect-ratio:1.586/1;border-radius:14px;overflow:hidden;color:#3B2510;display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px;cursor:pointer;border:1px solid rgba(59,37,16,.18);transition:transform .15s, box-shadow .15s}
.fx-cardart:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(var(--fx-primary-rgb),.35)}
.fx-cardart.classic-gold{background:linear-gradient(135deg,#E8C892 0%,#D4A574 50%,#A6814F 100%)}
.fx-cardart.eid-edition{background:linear-gradient(135deg,#3B2510 0%,#5A3A1F 50%,#3B2510 100%);color:#E8C892}
.fx-cardart.platinum{background:linear-gradient(135deg,#0E0905 0%,#1F1407 100%);color:#D4A574}
.fx-cardart-pattern{position:absolute;inset:0;opacity:.18;background-image:radial-gradient(circle at 20% 80%,#fff 0%,transparent 40%),radial-gradient(circle at 80% 20%,#000 0%,transparent 50%);pointer-events:none}
.fx-cardart-decor{position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none}
.fx-cardart-decor2{position:absolute;left:-40px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:rgba(0,0,0,.08);pointer-events:none}
.fx-cardart-brand{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.fx-cardart-brand img{width:28px;height:28px;border-radius:6px;background:#fff;padding:2px}
.fx-cardart-brand-nm{font-size:13px;font-weight:600;letter-spacing:-0.01em}
.fx-cardart-amount{font-size:30px;font-weight:600;letter-spacing:-0.03em;line-height:1;position:relative;z-index:1;font-family:'Instrument Serif',serif;font-style:italic}
.fx-cardart-amount-u{font-family:'Geist Mono',monospace;font-style:normal;font-size:13px;font-weight:500;letter-spacing:.05em;margin-left:6px;opacity:.7}
.fx-cardart-foot{display:flex;justify-content:space-between;align-items:flex-end;font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;position:relative;z-index:1}
.fx-cardart-chip{width:28px;height:20px;border-radius:4px;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.15));border:1px solid rgba(255,255,255,.3)}

/* Denomination grid */
.fx-denom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fx-denom-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px;padding:10px 12px;background:#FBF8F1;border:1px solid rgba(var(--fx-primary-rgb),.1);border-radius:8px}
.fx-denom-meta-cell .l{font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-muted)}
.fx-denom-meta-cell .v{font-size:13px;font-weight:600;color:var(--fx-primary);margin-top:2px;letter-spacing:-0.005em}

/* Add denomination card */
.fx-add-denom{aspect-ratio:1.586/1;border-radius:14px;border:1.5px dashed rgba(var(--fx-primary-rgb),.3);background:#FBF8F1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--fx-muted);cursor:pointer;transition:all .15s}
.fx-add-denom:hover{border-color:var(--fx-primary);color:var(--fx-primary);background:rgba(var(--fx-accent-rgb),.08)}
.fx-add-denom-amount{font-size:14px;font-weight:600;letter-spacing:-0.01em}

/* Card design picker (panel under preview) */
.fx-design-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.fx-design-swatch{aspect-ratio:1.586/1;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:all .12s;position:relative;overflow:hidden}
.fx-design-swatch.classic-gold{background:linear-gradient(135deg,#E8C892 0%,#D4A574 50%,#A6814F 100%)}
.fx-design-swatch.eid-edition{background:linear-gradient(135deg,#3B2510 0%,#5A3A1F 50%,#3B2510 100%)}
.fx-design-swatch.platinum{background:linear-gradient(135deg,#0E0905 0%,#1F1407 100%)}
.fx-design-swatch.active{border-color:var(--fx-primary);box-shadow:0 0 0 3px rgba(var(--fx-accent-rgb),.32)}
.fx-design-swatch-label{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-family:'Geist Mono',monospace;font-size:9px;padding:3px 6px;letter-spacing:.1em;text-align:center;text-transform:uppercase}

/* User row avatar with status */
.fx-user-status-active{background:rgba(0,195,137,.08);color:#00C389;border-color:rgba(0,195,137,.3)}
.fx-user-status-pending{background:rgba(232,163,0,.1);color:#A87100;border-color:rgba(232,163,0,.3)}
.fx-user-status-disabled{background:rgba(107,114,128,.1);color:#6B7280;border-color:rgba(107,114,128,.25)}

/* Live ticker */
.fx-ticker{display:flex;flex-direction:column;gap:0}
.fx-ticker-row{display:grid;grid-template-columns:80px 1.4fr 1fr 1fr 110px;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid rgba(var(--fx-primary-rgb),.07);font-size:13px}
.fx-ticker-row:last-child{border-bottom:none}
.fx-ticker-row.live{background:rgba(var(--fx-accent-rgb),.07);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:6px;border-bottom-color:transparent;animation:fxLive .6s ease}
@keyframes fxLive{from{background:rgba(var(--fx-accent-rgb),.3)}to{background:rgba(var(--fx-accent-rgb),.07)}}
.fx-ticker-time{font-family:'Geist Mono',monospace;font-size:11px;color:var(--fx-muted);letter-spacing:.04em}
.fx-ticker-amt{font-weight:600;font-family:'Geist Mono',monospace;letter-spacing:-0.01em;text-align:right;color:var(--fx-primary)}
.fx-ticker-amt em{font-style:normal;color:var(--fx-muted);font-size:10px;margin-left:4px;font-weight:500}
.fx-ticker-id{font-family:'Geist Mono',monospace;font-size:11px;color:var(--fx-primary);letter-spacing:.04em}

/* Branch detail card */
.fx-branch-card{background:#FBF8F1;border:1px solid rgba(var(--fx-primary-rgb),.1);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:border-color .12s}
.fx-branch-card:hover{border-color:var(--fx-primary)}
.fx-branch-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fx-branch-nm{font-size:14.5px;font-weight:600;letter-spacing:-0.01em;color:var(--fx-primary);line-height:1.2}
.fx-branch-code{font-family:'Geist Mono',monospace;font-size:10px;color:var(--fx-muted);letter-spacing:.1em;margin-top:4px}
.fx-branch-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(var(--fx-primary-rgb),.1);border-radius:8px;overflow:hidden;border:1px solid rgba(var(--fx-primary-rgb),.1)}
.fx-branch-stat{background:#fff;padding:10px 12px}
.fx-branch-stat .l{font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-muted)}
.fx-branch-stat .v{font-size:13.5px;font-weight:600;letter-spacing:-0.005em;color:var(--fx-primary);margin-top:3px}

/* Sortable column header indicator */
.fx-sort{cursor:pointer;display:inline-flex;align-items:center;gap:4px;color:inherit}
.fx-sort:hover{color:var(--fx-primary)}
.fx-sort.active{color:var(--fx-primary);font-weight:600}

/* Empty state */
.fx-empty{padding:40px 20px;text-align:center;color:var(--fx-muted)}
.fx-empty .ic{width:42px;height:42px;border-radius:10px;background:rgba(var(--fx-accent-rgb),.18);color:var(--fx-muted);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.fx-empty h3{font-size:14px;color:var(--fx-primary);font-weight:600;margin:0 0 4px}
.fx-empty p{font-size:12.5px;margin:0;line-height:1.5}

/* Modal — branded */
.fx-modal-hd h2{color:var(--fx-primary) !important}
.fx-modal-hd .sub{color:var(--fx-muted) !important}

/* Pill helper for KPI deltas */
.fx-kpi-delta-up{color:#00C389}
.fx-kpi-delta-down{color:#D93025}

/* Section header */
.fx-section-h{display:flex;align-items:flex-end;justify-content:space-between;margin:28px 0 14px;gap:14px}
.fx-section-h h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--fx-primary)}
.fx-section-h .meta{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-muted)}

/* ─── Karto Admin login v2 (kt2-*) — single centered card, paper bg ───────── */
.kt2-login{position:fixed;inset:0;display:flex;flex-direction:column;background:#FBF8F1;color:#0A0E27;overflow:auto;font-family:'Geist',system-ui,sans-serif}

/* subtle ambient pattern (gold dots in cobalt corner) */
.kt2-login::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 1px 1px, rgba(10,14,39,.06) 1px, transparent 0);background-size:24px 24px;opacity:.6;z-index:0}
.kt2-login::after{content:'';position:absolute;top:-30vh;right:-20vw;width:80vmin;height:80vmin;border-radius:50%;background:radial-gradient(circle,#1C2BE0 0%,transparent 65%);opacity:.06;filter:blur(60px);z-index:0;pointer-events:none}

/* top bar */
.kt2-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:24px 40px}
.kt2-mark{display:inline-flex;align-items:center;gap:8px;font-size:22px;font-weight:700;letter-spacing:-0.03em;color:#0A0E27;text-decoration:none}
.kt2-mark img{width:28px;height:28px;object-fit:contain}
.kt2-mark span{color:#1C2BE0;letter-spacing:-0.045em;margin-left:-2px}
.kt2-top-right{display:flex;align-items:center;gap:14px}
.kt2-top-meta{font-size:13px;color:#1A1F3A;opacity:.65}
@media(max-width:540px){.kt2-top-meta{display:none}}
.kt2-top-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:500;color:#FBF8F1;background:#0A0E27;text-decoration:none;transition:all .15s}
.kt2-top-cta:hover{background:#1C2BE0;transform:translateY(-1px)}

/* centered stage */
.kt2-stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 24px 48px;gap:24px}

/* the card */
.kt2-card{
  position:relative;
  width:100%;max-width:440px;
  background:#fff;
  border:1px solid rgba(10,14,39,.06);
  border-radius:20px;
  padding:40px 40px 32px;
  box-shadow:
    0 1px 0 rgba(10,14,39,.02),
    0 30px 80px -30px rgba(10,14,39,.18),
    0 12px 32px -12px rgba(28,43,224,.06);
}
@media(max-width:520px){.kt2-card{padding:32px 24px 26px}}

.kt2-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#1C2BE0;font-weight:500;margin-bottom:18px}
.kt2-pulse{width:6px;height:6px;border-radius:50%;background:#1C2BE0;box-shadow:0 0 0 0 rgba(28,43,224,.5);animation:kt2-pulse 1.8s infinite}
@keyframes kt2-pulse{0%{box-shadow:0 0 0 0 rgba(28,43,224,.5)}70%{box-shadow:0 0 0 8px rgba(28,43,224,0)}100%{box-shadow:0 0 0 0 rgba(28,43,224,0)}}

.kt2-h1{font-size:34px;font-weight:600;letter-spacing:-0.035em;line-height:1.05;margin:0 0 8px;color:#0A0E27}
.kt2-h1-i{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:#1C2BE0}
.kt2-h1-sub{font-size:14px;line-height:1.5;color:#1A1F3A;opacity:.7;margin:0 0 28px}

.kt2-field{margin-bottom:14px}
.kt2-field label{display:block;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#1A1F3A;opacity:.62;margin-bottom:7px;font-weight:500}
.kt2-field input{width:100%;padding:13px 14px;background:#FBF8F1;border:1.5px solid rgba(10,14,39,.08);border-radius:10px;font-size:13px;outline:0;transition:all .15s;font-family:inherit;color:#0A0E27;font-weight:500}
.kt2-field input:focus{border-color:#1C2BE0;background:#fff;box-shadow:0 0 0 4px rgba(28,43,224,.1)}
.kt2-field input::placeholder{color:#1A1F3A;opacity:.32;font-weight:400}

/* OTP step */
.kt2-otp-sub{
  font-size:13px;line-height:1.5;color:#1A1F3A;opacity:.7;
  margin:-8px 0 18px;letter-spacing:-0.005em;
}
.kt2-otp-sub strong{font-weight:600;color:#0A0E27;opacity:1}
.kt2-otp-edit{
  background:none;border:0;padding:0;margin-left:4px;
  font-size:13px;color:#1C2BE0;font-weight:500;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.kt2-otp-edit:hover{opacity:.75}

.kt2-otp-row{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  margin:4px 0 16px;
}
.kt2-otp-input{
  width:100%;aspect-ratio:1/1.15;
  text-align:center;
  font-family:'Geist Mono','SF Mono',ui-monospace,monospace;
  font-size:22px;font-weight:600;color:#0A0E27;
  background:#FBF8F1;
  border:1.5px solid rgba(10,14,39,.12);
  border-radius:10px;
  outline:none;
  transition:all .12s;
  caret-color:#1C2BE0;
}
.kt2-otp-input:focus{
  border-color:#1C2BE0;
  background:#fff;
  box-shadow:0 0 0 3px rgba(28,43,224,.12);
}

.kt2-otp-resend{
  margin-top:14px;text-align:center;
  font-size:12.5px;color:#1A1F3A;opacity:.6;
}
.kt2-link{
  background:none;border:0;padding:0;cursor:pointer;
  color:#1C2BE0;font-weight:500;font-size:12.5px;
  text-decoration:underline;text-underline-offset:2px;
}
.kt2-link:hover{opacity:.8}

.kt2-error{display:flex;align-items:center;gap:8px;background:rgba(217,48,37,.06);border:1px solid rgba(217,48,37,.18);color:#B8261D;padding:10px 13px;border-radius:9px;font-size:12.5px;margin:6px 0 14px;line-height:1.4}

.kt2-btn{
  width:100%;padding:14px;
  background:#0A0E27;color:#FBF8F1;
  border-radius:11px;font-size:14px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:20px;
  transition:all .15s;border:0;cursor:pointer;font-family:inherit;
}
.kt2-btn:hover:not(:disabled){background:#1C2BE0;transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(28,43,224,.4)}
.kt2-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.kt2-spinner{width:14px;height:14px;border:2px solid rgba(251,248,241,.3);border-top-color:#FBF8F1;border-radius:50%;animation:kt2-spin .7s linear infinite}
@keyframes kt2-spin{to{transform:rotate(360deg)}}

.kt2-btn-secondary-removed{
  width:100%;padding:13px;
  background:#fff;color:#0A0E27;
  border:1.5px solid rgba(10,14,39,.1);border-radius:11px;
  font-size:13.5px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.kt2-removed-tag-stub{
  margin-top:22px;padding-top:18px;
  border-top:1px dashed rgba(10,14,39,.08);
  display:flex;align-items:center;gap:7px;
  font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.04em;
  color:#1A1F3A;opacity:.6;
}
.kt2-demo-tag code{font-family:'Geist Mono',monospace;color:#1C2BE0;font-weight:600;background:rgba(28,43,224,.08);padding:1.5px 7px;border-radius:4px;letter-spacing:.02em}

.kt2-footer{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#1A1F3A;opacity:.5;
}
.kt2-footer a{color:inherit;text-decoration:none}
.kt2-footer a:hover{color:#1C2BE0;opacity:1}
.kt2-footer-dot{opacity:.5}


/* ═══════════════════════════════════════════════════════════════════
 * Per-page integration helpers — appended for the API-driven admin
 * pages (sales / redemptions / cards / branches / users). Mirrors the
 * design's existing tokens (cream / brown / gold) so nothing clashes.
 * ═══════════════════════════════════════════════════════════════════ */

/* Loading + error blocks shown during API fetch */
.fx-loading{padding:32px;text-align:center;font-size:13px;color:var(--fx-mid);background:rgba(var(--fx-accent-rgb),.06);border:1px dashed rgba(var(--fx-accent-rgb),.3);border-radius:10px;margin:12px 0}
.fx-error{padding:14px 16px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);color:#A8302D;border-radius:8px;font-size:13px;margin:8px 0}

/* Modals (used by branch add/edit, card template, cashier add) */
.modal-backdrop{position:fixed;inset:0;background:rgba(var(--fx-primary-rgb),.32);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:1000;animation:fx-modal-fade 140ms ease-out}
.modal{background:#FBF8F1;border:1px solid rgba(var(--fx-primary-rgb),.12);border-radius:14px;box-shadow:0 30px 80px -20px rgba(var(--fx-primary-rgb),.35);width:min(92vw,560px);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal-lg{width:min(94vw,820px)}
.modal-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 22px;border-bottom:1px solid rgba(var(--fx-primary-rgb),.08)}
.modal-hd h2{font-size:18px;font-weight:600;letter-spacing:-0.01em;color:var(--fx-primary);margin:0}
.modal-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid rgba(var(--fx-primary-rgb),.08);background:rgba(var(--fx-accent-rgb),.06)}
@keyframes fx-modal-fade{from{opacity:0}to{opacity:1}}

/* Form fields used inside modals */
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-mid);font-weight:600}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.input,.select,textarea.input{
  width:100%;padding:9px 12px;background:#FFFFFF;
  border:1px solid rgba(var(--fx-primary-rgb),.18);border-radius:8px;
  font:inherit;font-size:13px;color:var(--fx-primary);
  transition:border-color .15s,box-shadow .15s;
}
.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--fx-mid);box-shadow:0 0 0 3px rgba(var(--fx-mid-rgb),.12)}
textarea.input{resize:vertical;min-height:60px;font-family:inherit}

/* Key-value rows (branch detail drawer) */
.kv-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed rgba(var(--fx-primary-rgb),.1);font-size:13px}
.kv-row:last-child{border-bottom:none}
.kv-k{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-mid);min-width:130px}
.kv-v{flex:1;text-align:right;color:var(--fx-primary);word-break:break-word}

/* Icon-only buttons used in modal headers */
.icon-btn{background:none;border:none;padding:6px;border-radius:6px;cursor:pointer;color:var(--fx-mid);display:inline-grid;place-items:center;transition:background .12s}
.icon-btn:hover{background:rgba(var(--fx-mid-rgb),.08);color:var(--fx-primary)}

/* Danger button variant */
.btn.danger,.btn-ghost.danger{color:#A8302D}
.btn-ghost.danger:hover{background:rgba(168,48,45,.08);color:#7A1F1C}

/* Empty-state used by every page-*.jsx — earthier palette than ops */
.fx-empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 16px;color:var(--fx-mid);text-align:center}
.fx-empty-state-ic{width:48px;height:48px;border-radius:12px;background:rgba(var(--fx-accent-rgb),.18);display:grid;place-items:center;color:var(--fx-primary);margin-bottom:6px}
.fx-empty-state-title{font-size:14px;font-weight:600;color:var(--fx-primary)}
.fx-empty-state-sub{font-size:12.5px;line-height:1.5;max-width:380px;color:var(--fx-mid)}

/* Settings page section headers */
.fx-settings-h3{font-size:14px;font-weight:600;letter-spacing:-0.005em;color:var(--fx-primary);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid rgba(var(--fx-primary-rgb),.08)}
.fx-settings-form .field+.field,.fx-settings-form .field-row+.field{margin-top:12px}
