:root {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --ink: #07111f;
  --muted: #62728a;
  --line: #dce4ef;
  --blue: #3578f6;
  --blue-dark: #0f1b2f;
  --green: #0aa678;
  --red: #ef4444;
  --amber: #f0a000;
  --violet: #8b5cf6;
  --shadow: 0 12px 28px rgba(15, 27, 47, .08);
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

.public {
  background: #090f20;
  color: #f8fbff;
}

.public-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(18px, 5vw, 72px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(9,15,32,.93);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .2px;
}

.brand-mark {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #15d4ff, #8b5cf6);
  color: #04111f;
  font-weight: 900;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: #d8e1ef;
  font-weight: 700;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero {
  min-height: 76vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: 44px;
  align-items: center;
  padding: 72px clamp(18px, 6vw, 96px) 44px;
}

.hero h1 {
  max-width: 780px;
  margin: 0 0 18px;
  font-size: clamp(40px, 7vw, 82px);
  line-height: .98;
  letter-spacing: 0;
}

.hero p {
  max-width: 660px;
  color: #aab8cf;
  font-size: 20px;
  line-height: 1.6;
}

.hero-panel {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}

.step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 18px 0;
}

.step-no {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  background: #16d8f4;
  color: #06101f;
  font-weight: 900;
}

.step:nth-child(2) .step-no {
  background: #8b5cf6;
  color: #fff;
}

.step:nth-child(3) .step-no {
  background: #d946ef;
  color: #fff;
}

.step h3 {
  margin: 0 0 6px;
  font-size: 22px;
}

.step p {
  margin: 0;
  color: #aab8cf;
  line-height: 1.5;
}

.section {
  padding: 56px clamp(18px, 6vw, 96px);
}

.section h2 {
  margin: 0 0 16px;
  font-size: 34px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-card,
.admin-card,
.auth-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.public-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  padding: 24px;
  color: #f8fbff;
}

.public-card p {
  color: #aab8cf;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  padding: 10px 16px;
}

.btn.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.btn.danger {
  border-color: #fecaca;
  color: var(--red);
}

.btn.ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.2);
}

.btn.purple {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  border: 0;
  color: #fff;
}

.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(440px, 100%);
  padding: 28px;
}

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 264px 1fr;
}

.sidebar {
  background: #0f1b2f;
  color: #eaf1fb;
  padding: 24px 0;
}

.sidebar .brand {
  padding: 0 22px 24px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  color: #dbe7f6;
  font-weight: 800;
}

.side-link.active,
.side-link:hover {
  background: rgba(255,255,255,.08);
  border-left: 4px solid var(--blue);
  padding-left: 20px;
}

.side-link.logout {
  margin-top: 44px;
  color: #ff7474;
}

.main {
  padding: 36px 44px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page-head h1 {
  margin: 0 0 6px;
  font-size: 34px;
}

.page-head p {
  margin: 0;
  color: var(--muted);
}

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
}

.stat-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}

.stat strong {
  display: block;
  font-size: 32px;
}

.stat span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.admin-card {
  padding: 26px;
  margin-bottom: 26px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  background: #f5f7fb;
  color: #5f7088;
  font-size: 13px;
  letter-spacing: .4px;
  text-align: left;
  text-transform: uppercase;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 14px 12px;
  vertical-align: middle;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
}

.badge.green {
  background: #d1fae5;
  color: #047857;
}

.badge.red {
  background: #fee2e2;
  color: #b91c1c;
}

.badge.blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge.amber {
  background: #fef3c7;
  color: #92400e;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  color: #5f7088;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.entitlement-field {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px 12px;
}

.entitlement-field label:last-of-type {
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 12px 14px;
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flash {
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  font-weight: 800;
}

.flash.success {
  background: #d1fae5;
  color: #047857;
}

.flash.error {
  background: #fee2e2;
  color: #b91c1c;
}

.muted {
  color: var(--muted);
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.plan-card {
  padding: 24px;
}

.plan-price {
  color: var(--blue);
  font-size: 38px;
  font-weight: 900;
}

.inline-form {
  display: inline;
}

@media (max-width: 1100px) {
  .hero,
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .stats,
  .plans,
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .public-nav,
  .nav-links,
  .nav-actions,
  .page-head,
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .hero {
    padding-top: 42px;
  }
  .main {
    padding: 24px 16px;
  }
  .stats,
  .plans,
  .grid,
  .form-grid,
  .form-grid.five {
    grid-template-columns: 1fr;
  }
  .table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

.msh-chat-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #5b6cff, #8b5cf6);
  color: #fff;
  box-shadow: 0 12px 30px rgba(91,108,255,.35);
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
}

.msh-chat {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 81;
  width: min(340px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid #ddd8ff;
  border-radius: 8px;
  background: #fff;
  color: #06123f;
  box-shadow: 0 18px 45px rgba(15,23,42,.22);
}

.msh-chat-head {
  display: grid;
  grid-template-columns: 38px 1fr 34px;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, #5b6cff, #8b5cf6);
  color: #fff;
}

.msh-chat-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  font-weight: 900;
}

.msh-chat-head strong,
.msh-chat-head span {
  display: block;
}

.msh-chat-head span {
  margin-top: 2px;
  font-size: 12px;
  opacity: .9;
}

.msh-chat-close {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
}

.msh-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid #eef1f7;
}

.msh-chat-chips button {
  min-height: 26px;
  border: 1px solid #91a3ff;
  border-radius: 999px;
  background: #fff;
  color: #425cff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
}

.msh-chat-list {
  display: flex;
  min-height: 168px;
  max-height: 300px;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 14px 12px;
}

.msh-chat-message {
  max-width: 86%;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
  white-space: pre-wrap;
}

.msh-chat-message.assistant {
  align-self: flex-start;
  background: #eef2ff;
  color: #06123f;
}

.msh-chat-message.user {
  align-self: flex-end;
  background: #5b6cff;
  color: #fff;
}

.msh-chat-message.loading {
  color: #637083;
}

.msh-chat-form {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #eef1f7;
}

.msh-chat-form input {
  height: 38px;
  border: 2px solid #5b6cff;
  border-radius: 999px;
  padding: 8px 13px;
}

.msh-chat-form button {
  display: grid;
  width: 42px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #5b6cff;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
}

@media (max-width: 480px) {
  .msh-chat {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }

  .msh-chat-launcher {
    right: 16px;
    bottom: 16px;
  }
}

/* ===== Sachin Ecom: landing footer, legal pages, small buttons ===== */
.btn.sm{padding:7px 12px;font-size:12.5px;margin-top:10px;display:inline-block;}
.public-footer{margin-top:48px;background:#0f172a;color:#cbd5e1;padding:40px 6vw 22px;}
.public-footer .brand{color:#fff;}
.public-footer h4{color:#fff;font-size:14px;margin:0 0 10px;}
.public-footer a{color:#cbd5e1;text-decoration:none;display:block;margin:6px 0;font-size:13.5px;}
.public-footer a:hover{color:#fff;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;max-width:1100px;margin:0 auto 26px;}
.foot-grid .muted{color:#94a3b8;margin-top:10px;max-width:280px;}
.foot-copy{text-align:center;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;color:#94a3b8;font-size:13px;}
.foot-copy a{color:#cbd5e1;text-decoration:none;}
.legal-page{max-width:860px;margin:24px auto;}
.legal-page h1{font-size:24px;margin:0 0 16px;}
.legal-body{line-height:1.7;color:#334155;font-size:15px;}
.legal-body h3{margin:20px 0 8px;font-size:17px;color:#0f172a;}
.legal-body ul{padding-left:20px;}
.legal-body li{margin:6px 0;}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }

/* ===== Sachin Ecom: Google sign-in button + divider ===== */
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#1f2937;border:1.5px solid #dadce0;font-weight:600;margin-bottom:6px;text-decoration:none;}
.google-btn:hover{background:#f8fafc;}
.google-btn .g-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0 100%);color:#fff;font-weight:800;font-size:12px;}
.auth-or{display:flex;align-items:center;text-align:center;color:#94a3b8;font-size:12px;margin:12px 0;}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:#e2e8f0;}
.auth-or span{padding:0 12px;}

/* ============================================================
   Sachin Ecom — Professional Admin Panel theme (override)
   ============================================================ */
body.admin{background:#eef2f9;}
.app-shell{display:flex;min-height:100vh;background:#eef2f9;}
.sidebar{width:248px;flex:0 0 248px;background:linear-gradient(185deg,#0f172a,#1e1b4b);color:#cbd5e1;padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;color:#fff;font-weight:800;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px;}
.sidebar .brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#6366f1,#4338ca);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;}
.side-link{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;color:#aebbd4;text-decoration:none;font-weight:600;font-size:14px;transition:.15s;}
.side-link:hover{background:rgba(255,255,255,.07);color:#fff;}
.side-link.active{background:linear-gradient(145deg,#6366f1,#4338ca);color:#fff;box-shadow:0 8px 20px rgba(67,56,202,.35);}
.side-link.logout{margin-top:auto;color:#fca5a5;}
.side-link.logout:hover{background:rgba(239,68,68,.12);color:#fecaca;}
.main{flex:1;padding:28px 32px;max-width:100%;overflow-x:hidden;}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.page-head h1{font-size:26px;font-weight:800;color:#0f172a;margin:0;}
.page-head p{color:#64748b;margin:4px 0 0;font-size:14px;}
.page-head input{border:1.5px solid #d7e0f3;border-radius:10px;padding:9px 13px;font-size:13.5px;outline:none;min-width:240px;}
.admin-card{background:#fff;border:1px solid #e8edf6;border-radius:16px;padding:20px 22px;margin-bottom:18px;box-shadow:0 6px 22px rgba(15,30,80,.05);}
.admin-card h2{font-size:17px;font-weight:800;color:#0f172a;margin:0 0 12px;}
.admin-card h3{font-size:14px;color:#334155;}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px;}
.stats .admin-card{margin:0;}
.stat{display:flex;align-items:center;gap:13px;}
.stat-icon{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,#eef2ff,#e0e7ff);color:#4338ca;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex:0 0 auto;}
.stat strong{font-size:22px;color:#0f172a;display:block;line-height:1.1;}
.stat span{font-size:12.5px;color:#64748b;}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;}
.table th{text-align:left;padding:11px 12px;background:#f5f8fd;color:#64748b;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #e8edf6;}
.table th:first-child{border-top-left-radius:10px;} .table th:last-child{border-top-right-radius:10px;}
.table td{padding:12px;border-bottom:1px solid #eef2f9;vertical-align:top;color:#334155;}
.table tr:hover td{background:#fafcff;}
.table .muted{color:#94a3b8;font-size:12px;}
.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;}
.badge.green{background:#dcfce7;color:#15803d;} .badge.red{background:#fee2e2;color:#b91c1c;} .badge.blue{background:#e0e7ff;color:#4338ca;}
.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:10px;padding:9px 15px;font-weight:700;font-size:13px;cursor:pointer;background:#eef2f9;color:#334155;text-decoration:none;transition:.15s;}
.btn:hover{background:#e2e8f5;}
.btn.primary{background:linear-gradient(145deg,#6366f1,#4338ca);color:#fff;box-shadow:0 8px 18px rgba(67,56,202,.28);}
.btn.primary:hover{transform:translateY(-1px);}
.btn.danger{background:#fff;color:#dc2626;border:1.5px solid #fecaca;}
.btn.danger:hover{background:#fef2f2;}
.inline-form{display:inline-block;margin:2px 3px 2px 0;}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end;}
.form-grid.five{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.field label{display:block;font-size:12px;font-weight:700;color:#475569;margin-bottom:5px;}
.field input,.field select,.field textarea{width:100%;box-sizing:border-box;border:1.5px solid #d7e0f3;border-radius:10px;padding:10px 12px;font-size:13.5px;outline:none;font-family:inherit;background:#fff;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12);}
.flash{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-weight:600;font-size:14px;}
.flash.success{background:#dcfce7;color:#15803d;} .flash.error{background:#fee2e2;color:#b91c1c;}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:18px;}
.plan-card .plan-price{font-size:24px;font-weight:800;color:#4338ca;margin:6px 0;}
.plan-card ul{padding-left:18px;margin:8px 0;} .plan-card li{font-size:13px;color:#475569;margin:4px 0;}
@media(max-width:780px){
  .app-shell{flex-direction:column;}
  .sidebar{width:100%;flex:none;height:auto;position:static;flex-direction:row;flex-wrap:wrap;gap:6px;}
  .side-link{padding:8px 11px;font-size:13px;} .side-link.logout{margin:0;}
  .main{padding:18px 14px;}
}

.btn{white-space:nowrap;}
.actions{flex-wrap:nowrap;}
@media(max-width:780px){.actions{flex-wrap:wrap;}}

/* ============================================================
   Sachin Ecom — Admin polish pass (premium SaaS look)
   ============================================================ */
body.admin{font-family:var(--font-sans);}
.sidebar .brand,.page-head h1,.admin-card h2,.stat strong,.plan-card .plan-price{font-family:var(--font-display);letter-spacing:-.01em;}
.page-head h1{font-size:27px;font-weight:800;letter-spacing:-.02em;}
.sidebar{box-shadow:4px 0 24px rgba(15,23,42,.12);}
.side-link{letter-spacing:.01em;}
/* Section label above the nav links */
.sidebar .nav-label{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5b6b8c;padding:14px 14px 4px;}
.side-ic{width:20px;display:inline-flex;justify-content:center;font-size:15px;line-height:1;}
/* Cards lift slightly on hover for a dynamic feel */
.admin-card{transition:box-shadow .18s ease,transform .18s ease;}
.admin-card:hover{box-shadow:0 12px 34px rgba(15,30,80,.09);}
.stats .admin-card.stat:hover{transform:translateY(-2px);}
/* Coloured accent bar on stat cards */
.stat{position:relative;overflow:hidden;}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#6366f1,#4338ca);border-radius:4px;}
.stat{padding-left:6px;}
.stat-icon{box-shadow:0 4px 12px rgba(67,56,202,.16);}
/* Tables: rounder, cleaner */
.table{font-variant-numeric:tabular-nums;}
.table tbody tr:last-child td{border-bottom:0;}
.badge{letter-spacing:.01em;}
.badge.amber{background:#fef3c7;color:#b45309;}
.badge.gray{background:#eef2f9;color:#475569;}
/* Buttons: crisper focus + active feedback */
.btn:active{transform:translateY(1px);}
.btn.primary:hover{box-shadow:0 10px 24px rgba(67,56,202,.34);}
.btn.success{background:linear-gradient(145deg,#10b981,#059669);color:#fff;}
.btn.success:hover{box-shadow:0 10px 22px rgba(5,150,105,.3);}
/* Page head gets a subtle divider for structure */
.page-head{border-bottom:1px solid #e6ecf6;padding-bottom:16px;}

/* ============================================================
   Sachin Ecom — Dynamic Admin v2 (clickable cards, modals,
   period chips, numbered/selectable tables, icon actions)
   ============================================================ */

/* Clickable stat cards — whole card is a link that redirects to a filtered view */
a.stat{text-decoration:none;color:inherit;cursor:pointer;position:relative;}
a.stat:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(15,30,80,.12);}
a.stat .stat-go{position:absolute;top:12px;right:14px;color:#c7d2fe;font-size:13px;opacity:0;transition:.15s;}
a.stat:hover .stat-go{opacity:1;color:#6366f1;}
.stat .stat-sub{font-size:11px;color:#94a3b8;margin-top:2px;display:block;}
/* Coloured accent variants for stat cards */
.stat.accent-green::before{background:linear-gradient(180deg,#34d399,#059669);}
.stat.accent-green .stat-icon{background:linear-gradient(145deg,#d1fae5,#a7f3d0);color:#059669;}
.stat.accent-amber::before{background:linear-gradient(180deg,#fbbf24,#d97706);}
.stat.accent-amber .stat-icon{background:linear-gradient(145deg,#fef3c7,#fde68a);color:#b45309;}
.stat.accent-red::before{background:linear-gradient(180deg,#f87171,#dc2626);}
.stat.accent-red .stat-icon{background:linear-gradient(145deg,#fee2e2,#fecaca);color:#dc2626;}
.stat.accent-cyan::before{background:linear-gradient(180deg,#22d3ee,#0891b2);}
.stat.accent-cyan .stat-icon{background:linear-gradient(145deg,#cffafe,#a5f3fc);color:#0891b2;}

/* Period / filter chip bar (7 days · 30 days · This month · Custom) */
.period-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #e8edf6;border-radius:14px;padding:10px 14px;margin-bottom:18px;box-shadow:0 6px 22px rgba(15,30,80,.05);}
.period-bar .pb-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin-right:2px;}
.chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #e2e8f5;background:#f8fafc;color:#475569;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:.15s;}
.chip:hover{border-color:#c7d2fe;color:#4338ca;}
.chip.active{background:linear-gradient(145deg,#6366f1,#4338ca);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(67,56,202,.28);}
.period-bar input[type=date]{border:1.5px solid #d7e0f3;border-radius:10px;padding:7px 10px;font-size:13px;outline:none;}
.period-bar .pb-range{margin-left:auto;font-size:12px;color:#94a3b8;font-weight:600;}

/* Smart search bar */
.searchbar{position:relative;flex:1;min-width:220px;}
.searchbar input{width:100%;box-sizing:border-box;border:1.5px solid #d7e0f3;border-radius:12px;padding:11px 14px 11px 40px;font-size:14px;outline:none;background:#fff;}
.searchbar input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12);}
.searchbar .si-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:15px;pointer-events:none;}
.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.filter-row select{border:1.5px solid #d7e0f3;border-radius:12px;padding:10px 12px;font-size:13.5px;outline:none;background:#fff;font-weight:600;color:#334155;}

/* Numbered + selectable tables */
.table th.col-num,.table td.col-num{width:42px;text-align:center;color:#94a3b8;font-weight:700;}
.table th.col-chk,.table td.col-chk{width:36px;text-align:center;}
.table input[type=checkbox]{width:16px;height:16px;accent-color:#4338ca;cursor:pointer;vertical-align:middle;}
.table tr.row-link{cursor:pointer;}
.table tr.row-link:hover td{background:#f1f5ff;}

/* Selection bulk-bar (appears when rows are ticked) */
.bulkbar{display:none;align-items:center;gap:12px;background:linear-gradient(145deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;border-radius:12px;padding:11px 16px;margin-bottom:14px;}
.bulkbar.show{display:flex;}
.bulkbar .bb-count{font-weight:800;color:#4338ca;}
.bulkbar .bb-spacer{margin-left:auto;}

/* Small square icon action buttons (pencil / trash) */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1.5px solid #e2e8f5;background:#fff;color:#64748b;cursor:pointer;font-size:14px;text-decoration:none;transition:.15s;}
.icon-btn:hover{border-color:#c7d2fe;color:#4338ca;background:#f5f8ff;}
.icon-btn.danger:hover{border-color:#fecaca;color:#dc2626;background:#fef2f2;}

/* Inline status select styled as a coloured pill */
.status-sel{border:1.5px solid transparent;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-position:right 8px center;}
.status-sel.green{background:#dcfce7;color:#15803d;} .status-sel.red{background:#fee2e2;color:#b91c1c;}
.status-sel:focus{box-shadow:0 0 0 3px rgba(99,102,241,.14);}

/* Modal dialog (Add / Edit user popups) */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;z-index:200;padding:40px 16px;overflow:auto;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:18px;width:100%;max-width:680px;box-shadow:0 30px 80px rgba(15,23,42,.4);animation:modalIn .18s ease;}
.modal.modal--wide{max-width:880px;}
.modal .form-grid{grid-template-columns:repeat(2,1fr);}
.modal--wide .form-grid{grid-template-columns:repeat(3,1fr);}
@media(max-width:680px){.modal .form-grid,.modal--wide .form-grid{grid-template-columns:1fr;}}
.modal .field input[readonly]{color:#64748b;}
@keyframes modalIn{from{opacity:0;transform:translateY(-12px) scale(.98);}to{opacity:1;transform:none;}}
.modal-head{display:flex;align-items:center;gap:10px;padding:20px 24px;border-bottom:1px solid #eef2f9;}
.modal-head h2{margin:0;font-size:18px;font-weight:800;color:#0f172a;flex:1;}
.modal-head .mc-x{background:none;border:0;font-size:20px;color:#94a3b8;cursor:pointer;line-height:1;}
.modal-body{padding:20px 24px;}
.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid #eef2f9;background:#fafcff;border-radius:0 0 18px 18px;}
.modal-foot .mf-left{margin-right:auto;}

/* Quick-actions grid (dashboard) */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.qa-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #e8edf6;border-radius:14px;background:#fff;text-decoration:none;color:#0f172a;font-weight:700;font-size:14px;transition:.15s;}
.qa-card:hover{border-color:#c7d2fe;background:#f5f8ff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,30,80,.07);}
.qa-card .qa-ic{width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,#eef2ff,#e0e7ff);color:#4338ca;display:flex;align-items:center;justify-content:center;font-size:18px;}
.qa-card small{display:block;font-weight:500;color:#94a3b8;font-size:11.5px;margin-top:2px;}

/* Two-column dashboard layout */
.dash-2col{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start;}
@media(max-width:980px){.dash-2col{grid-template-columns:1fr;}}

/* Activity feed */
.feed{list-style:none;margin:0;padding:0;}
.feed li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid #f1f5f9;font-size:13px;}
.feed li:last-child{border-bottom:0;}
.feed .fd-dot{width:30px;height:30px;border-radius:9px;background:#eef2ff;color:#4338ca;display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto;}
.feed .fd-time{color:#94a3b8;font-size:11.5px;}
.tag-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:800;background:#f3e8ff;color:#7c3aed;letter-spacing:.02em;}
.tag-pill.student{background:#dbeafe;color:#1d4ed8;}
.tag-pill.client{background:#dcfce7;color:#15803d;}

/* ── admin premium polish v2 (Sachin Ecom) — additive, non-breaking ── */
.admin-card{transition:box-shadow .18s ease, transform .18s ease;}
.admin-card:hover{box-shadow:0 12px 34px rgba(15,30,80,.09);}
.admin-card>h2:first-child,.admin-card>h3:first-child{display:flex;align-items:center;gap:9px;}
.admin-card>h2:first-child::before{content:"";flex:0 0 auto;width:4px;height:17px;border-radius:3px;background:linear-gradient(180deg,#6366f1,#4338ca);}
.stats .admin-card:hover{transform:translateY(-2px);}
.table{border:1px solid #eef2f9;border-radius:12px;overflow:hidden;}
.table th:first-child,.table td:first-child{padding-left:16px;}
.table th:last-child,.table td:last-child{padding-right:16px;}
.table tr:last-child td{border-bottom:0;}
.badge.gray{background:#e2e8f0;color:#475569;} .badge.amber{background:#fef3c7;color:#b45309;}
.btn.primary{box-shadow:0 8px 20px rgba(67,56,202,.30);}
.btn.primary:hover{box-shadow:0 12px 26px rgba(67,56,202,.40);}
.side-link{position:relative;}
.side-link.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:4px;height:20px;border-radius:0 3px 3px 0;background:#a5b4fc;}

/* ============================================================
   Admin — phone/tablet pass (MUST stay last: it wins the cascade)
   Root fix: the premium `.table{overflow:hidden}` above was clipping
   wide tables on phones, so they could not be scrolled sideways.
   ============================================================ */
@media (max-width: 900px) {
  body.admin { overflow-x: hidden; }

  /* Sidebar becomes a horizontal, swipeable tab strip */
  .app-shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 40;
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    padding: 10px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar .brand { flex: 0 0 auto; margin: 0 6px 0 0; font-size: 15px; }
  .side-link { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 13px; }
  .side-link.active::before { display: none; }
  .main { padding: 14px 12px; }

  /* Tables: scroll sideways instead of being cut off */
  .table { display: block; width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; white-space: nowrap; border-radius: 12px; }
  .table thead, .table tbody, .table tr { display: table; width: 100%; table-layout: auto; }
  .table th, .table td { font-size: 12.5px; padding: 9px 10px; }
  .admin-card { padding: 14px 12px; overflow-x: hidden; }

  /* Headers + toolbars stack instead of overflowing */
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head .actions, .toolbar { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .page-head .actions .btn, .toolbar .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
  .toolbar input, .toolbar select { flex: 1 1 140px; min-width: 0; }

  /* Action buttons wrap under each other rather than being clipped */
  .actions { flex-wrap: wrap !important; gap: 6px; white-space: normal; }
  .actions .btn, .actions .icon-btn { font-size: 12px; padding: 7px 10px; }

  /* Stat cards two-up, forms single column, modals full-width */
  .stats, .grid, .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .dash-2col, .form-grid, .form-grid.five, .plans { grid-template-columns: 1fr !important; }
  .modal, .modal--wide { width: 96vw; max-width: 96vw; max-height: 92vh; overflow-y: auto; }
  .modal-foot { flex-wrap: wrap; gap: 8px; }
  .modal-foot .btn { flex: 1 1 auto; }
  .bulkbar { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 560px) {
  .stats, .grid, .qa-grid { grid-template-columns: 1fr !important; }
  .page-head h1 { font-size: 20px; }
  .main { padding: 12px 10px; }
}

/* ==========================================================================
   AUTH REDESIGN (login.php / signup.php) — appended block, additive only.
   Two-panel premium auth card. Scoped to body.auth-page + .auth-shell so no
   existing rule (admin panel, public site) changes behaviour. Do not edit
   rules above this banner.
   ========================================================================== */
body.auth-page {
  background:
    radial-gradient(1000px 520px at 12% -10%, #e8e9ff 0%, rgba(232,233,255,0) 60%),
    radial-gradient(900px 520px at 100% 0%, #f2e7ff 0%, rgba(242,231,255,0) 55%),
    #f4f6fc;
  color: var(--ink);
}

body.auth-page .auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

.auth-shell {
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  background: #fff;
  border: 1px solid rgba(15, 30, 80, .07);
  border-radius: 24px;
  box-shadow: 0 30px 75px rgba(15, 30, 80, .18);
  overflow: hidden;
}

/* ---- left / brand panel ---- */
.auth-side {
  position: relative;
  padding: 40px 36px;
  color: #fff;
  background: linear-gradient(150deg, #4f46e5 0%, #6d28d9 55%, #7c3aed 100%);
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
}
.auth-side::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  pointer-events: none;
}
.auth-side .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  padding: 0;
}
.auth-side .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .5px;
}
.auth-side h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -.4px;
}
.auth-side .auth-sub {
  margin: -10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.auth-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.auth-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, .95);
}
.auth-points li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .20);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}
.auth-side .auth-pill {
  align-self: flex-start;
  margin-top: auto;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* ---- right / form panel ---- */
.auth-shell .auth-card {
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
}
.auth-shell .auth-card h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.3px;
}
.auth-shell .auth-card .auth-lede {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}
.auth-shell .flash {
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 16px;
  border: 1px solid transparent;
}
.auth-shell .flash.error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.auth-shell .flash.success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }

.auth-shell .google-btn {
  min-height: 46px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  font-size: 14px;
  margin-bottom: 0;
}
.auth-shell .google-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.auth-shell .auth-or { margin: 16px 0; font-size: 12px; font-weight: 600; }

.auth-shell .field { margin-bottom: 14px; }
.auth-shell .field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.auth-shell .field input {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14.5px;
  font-family: inherit;
  background: #fbfcfe;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-shell .field input:hover { border-color: #cbd5e1; }
.auth-shell .field input:focus {
  background: #fff;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
}

.auth-pw { position: relative; }
.auth-pw input { padding-right: 62px; }
.auth-pw .pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4f46e5;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.auth-pw .pw-toggle:hover { background: #eef2ff; }
.auth-pw .pw-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.auth-shell .btn.primary {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 12px 26px rgba(79, 70, 229, .28);
  cursor: pointer;
  transition: transform .12s, box-shadow .15s;
}
.auth-shell .btn.primary:hover { box-shadow: 0 16px 32px rgba(79, 70, 229, .34); }
.auth-shell .btn.primary:active { transform: translateY(1px); }

.auth-shell a:focus-visible,
.auth-shell .btn:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

.auth-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 11px 13px;
}
.auth-note a { color: #4f46e5; font-weight: 700; text-decoration: underline; }
.auth-alt {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.auth-alt a { color: #4f46e5; font-weight: 700; }
.auth-alt a:hover { text-decoration: underline; }

/* Compact brand row shown only when the gradient panel is hidden */
.auth-mini-brand {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}
.auth-mini-brand .brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(145deg, #4f46e5, #7c3aed);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
}

@media (max-width: 820px) {
  .auth-side { display: none; }
  .auth-shell { grid-template-columns: 1fr; width: min(460px, 100%); border-radius: 20px; }
  .auth-shell .auth-card { padding: 28px 20px; }
  .auth-mini-brand { display: flex; }
}

@media (max-width: 380px) {
  body.auth-page .auth-wrap { padding: 16px 10px; }
  .auth-shell .auth-card { padding: 22px 15px; }
  .auth-shell .auth-card h2 { font-size: 20px; }
}

/* ============================================================
   Admin — mobile drawer nav + sidebar action badges (last block wins)
   ============================================================ */
.admin-burger { display: none; }
.admin-scrim { display: none; }
.side-badge {
  margin-left: auto; background: #ef4444; color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 900; line-height: 1.6;
}
.side-link { display: flex; align-items: center; gap: 10px; }

/* Inline SVG sidebar icons — inherit the link colour, so they light up with the row
   instead of staying multi-coloured emoji. */
.side-ic { width: 20px; display: inline-flex; align-items: center; justify-content: center; }
.side-svg { display: block; opacity: .78; transition: opacity .15s; }
.side-link:hover .side-svg,
.side-link.active .side-svg { opacity: 1; }

/* Collapsible "New Lead" card — a proper clickable row instead of the browser's default
   disclosure triangle, so it reads as a button ("+ New Lead") rather than a raw form
   sitting open on every page load. */
.lead-form-card > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  user-select: none;
}
.lead-form-card > summary::-webkit-details-marker { display: none; }
.lead-form-card > summary::before {
  content: '▸'; display: inline-block; font-size: 13px; color: #4f46e5;
  transition: transform .15s ease; flex: 0 0 auto;
}
.lead-form-card[open] > summary::before { transform: rotate(90deg); }
.lead-form-card .lead-form-hint { color: #64748b; font-size: 12.5px; font-weight: 600; margin-left: 4px; }
.lead-form-card > summary:hover h2 { color: #4f46e5; }
.lead-form-card > .form-grid,
.lead-form-card > div { margin-top: 16px; }

/* Collapsible AI block inside the Add/Edit User modals. Provider, model and key are
   rarely touched (most accounts run on the shared global key), so they stay folded away
   instead of making the form look twice as complicated as it is. */
.ai-block { border: 1px solid #e6ebf5; border-radius: 10px; padding: 11px 13px; background: #f8fafc; }
.ai-block > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  user-select: none; font-size: 13.5px;
}
.ai-block > summary::-webkit-details-marker { display: none; }
.ai-block > summary::before {
  content: '▸'; display: inline-block; font-size: 13px; color: #4f46e5;
  transition: transform .15s ease; flex: 0 0 auto;
}
.ai-block[open] > summary::before { transform: rotate(90deg); }
.ai-block > summary:hover b { color: #4f46e5; }

/* Impersonation bar — sits at the top of <main> while a superadmin views another account. */
.imper-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff;
  border-radius: 14px; padding: 12px 16px; margin-bottom: 18px;
  box-shadow: 0 10px 26px rgba(79, 70, 229, .28);
}
.imper-who { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.imper-who small { display: block; font-size: 11.5px; opacity: .82; font-weight: 600; text-transform: capitalize; }
.imper-av {
  width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .2);
  display: grid; place-items: center; font-weight: 900; font-size: 15px; flex: 0 0 36px;
}
.imper-back {
  background: #fff; color: #4f46e5; border: 0; border-radius: 10px;
  padding: 9px 15px; font-weight: 800; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.imper-back:hover { background: #eef2ff; }

/* The sidebar is a fixed-height (100vh) flex column, so once the menu grows past the
   viewport the last items (Settings / Visit Website / Logout) were clipped with no way
   to reach them. Let it scroll internally, and keep the scrollbar subtle on the dark bg. */
.sidebar {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 99px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .35); }
/* `margin-top:auto` on Logout pushes it to the bottom of the FLEX box; in a scrolling
   column that fights the scroll. Keep it last in flow instead. */
.sidebar .side-link.logout { margin-top: 6px; }

@media (max-width: 900px) {
  /* Hamburger floats above everything; the sidebar becomes a slide-in drawer so the
     content gets the full screen instead of being squeezed. */
  .admin-burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 10px; z-index: 60;
    width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: linear-gradient(145deg, #1e1b4b, #0f172a); color: #fff;
    font-size: 20px; cursor: pointer; box-shadow: 0 8px 20px rgba(15, 23, 42, .35);
  }
  .admin-scrim.on {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(15, 23, 42, .5);
  }
  .app-shell > .sidebar,
  .sidebar {
    position: fixed !important; top: 0; left: 0; z-index: 50;
    width: 260px !important; max-width: 82vw; height: 100vh !important;
    flex-direction: column !important; flex-wrap: nowrap !important;
    overflow-y: auto; padding: 16px 14px !important;
    transform: translateX(-105%); transition: transform .22s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .main { padding-top: 62px !important; }   /* clear the floating burger */
  .side-link { white-space: normal; }
}