/* ============================================================
   EnoSend — Design System
   Indigo · Plus Jakarta Sans · sleek dashboard
   ============================================================ */

/* ── Reset & tokens ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#0F172A;
  --ink-2:#1E293B;
  --text:#334155;
  --mute:#64748B;
  --mute-2:#94A3B8;
  --line:#E2E8F0;
  --line-2:#F1F5F9;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --primary:#4F46E5;
  --primary-hover:#4338CA;
  --primary-deep:#3730A3;
  --primary-light:#EEF2FF;
  --primary-border:#C7D2FE;
  --success:#10B981;
  --success-light:#D1FAE5;
  --warn:#F59E0B;
  --warn-light:#FEF3C7;
  --danger:#EF4444;
  --danger-light:#FEE2E2;
  --info:#0EA5E9;
  --info-light:#E0F2FE;
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow:0 2px 8px rgba(15,23,42,.05),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.04);
  --grad-primary:linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%);
  --grad-deep:linear-gradient(160deg,#1E1B4B 0%,#4F46E5 50%,#3730A3 100%);
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,monospace;
}

/* Use `min-height` not `height` so the body grows with content. `height: 100%`
   pins the body to one viewport tall, which makes `position: sticky` release
   at the bottom of that single viewport instead of sticking through the whole page. */
html,body{min-height:100%;}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-hover);}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
img,svg{max-width:100%;display:block;}
h1,h2,h3,h4,h5,h6{color:var(--ink);font-weight:700;line-height:1.25;letter-spacing:-0.01em;}

/* ── App shell ──────────────────────────────────────────────── */
.app-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh;transition:grid-template-columns .2s;}
/* Collapsed: hide sidebar entirely on desktop */
.app-shell.sidebar-collapsed{grid-template-columns:0 1fr;}
.app-shell.sidebar-collapsed .sidebar{width:0;overflow:hidden;border-right-width:0;}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar{
  background:#FFFFFF;
  border-right:1px solid var(--line);
  position:sticky;top:0;
  height:100vh;
  overflow-y:auto;
  display:flex;flex-direction:column;
}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-thumb{background:#E2E8F0;border-radius:3px;}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:22px 24px 20px;
  font-weight:800;font-size:17px;color:var(--ink);
  letter-spacing:-0.01em;
}
.sidebar-brand .logo{
  width:32px;height:32px;border-radius:8px;
  background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:15px;
  box-shadow:0 4px 12px rgba(79,70,229,.3);
}
.sidebar-nav{flex:1;padding:0 14px 20px;}
.nav-group{margin-bottom:22px;}
.nav-group-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--mute-2);font-weight:700;
  padding:0 12px 8px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:9px;
  color:var(--text);font-size:13.5px;font-weight:600;
  margin-bottom:2px;
  transition:background .12s,color .12s;
}
.nav-item:hover{background:var(--line-2);color:var(--ink);}
.nav-item.active{background:var(--primary-light);color:var(--primary);}
.nav-item .ic{width:18px;height:18px;flex-shrink:0;stroke:currentColor;}
.nav-item .badge-soon{
  font-size:9px;background:var(--warn-light);color:#92400E;
  padding:2px 7px;border-radius:50px;margin-left:auto;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.nav-sub{
  margin:4px 0 6px 12px;
  padding-left:14px;
  border-left:1.5px solid var(--line);
  display:flex;flex-direction:column;
}
.nav-sub-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:7px;
  color:var(--mute);font-size:13px;font-weight:500;
  transition:background .12s,color .12s;
}
.nav-sub-item:hover{background:var(--line-2);color:var(--ink);}
.nav-sub-item.active{background:var(--primary-light);color:var(--primary);font-weight:600;}
.nav-sub-item .ic{width:14px;height:14px;flex-shrink:0;stroke:currentColor;}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar{
  background:#fff;border-bottom:1px solid var(--line);
  padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  position:sticky;top:0;z-index:50;
}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0;}
/* min-width:0 is load-bearing: without it this flex item defaults to
   min-width:auto, refuses to shrink below the title's width, and pushes
   the title under the wallet chip while squeezing the burger to a sliver. */
.topbar-heading{min-width:0;}
.topbar-title{font-size:15px;font-weight:700;color:var(--ink);}
.topbar-sub{font-size:12.5px;color:var(--mute);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.topbar-balance{
  background:var(--primary-light);color:var(--primary);
  font-size:12.5px;font-weight:700;
  padding:7px 14px;border-radius:50px;
  display:inline-flex;align-items:center;gap:6px;
}
.topbar-balance .ic{width:14px;height:14px;stroke:currentColor;}
.topbar-user{
  display:flex;align-items:center;gap:10px;
  padding:6px 12px 6px 6px;border-radius:50px;
  cursor:pointer;transition:background .12s;
}
.topbar-user:hover{background:var(--line-2);}
.topbar-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--grad-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;
}
.topbar-user-name{font-size:13px;font-weight:600;color:var(--ink);}
.topbar-mobile-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:6px;cursor:pointer;color:var(--ink);border-radius:7px;flex-shrink:0;}
.topbar-mobile-toggle:hover{background:var(--line-2);}

/* ── Main + content ─────────────────────────────────────────── */
.app-main{display:flex;flex-direction:column;min-width:0;}
.content{flex:1;padding:28px 32px;}
.content-narrow{max-width:1080px;margin:0 auto;}

/* ── Page header ────────────────────────────────────────────── */
.page-header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:24px;flex-wrap:wrap;
}
.page-title{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;}
.page-sub{font-size:14px;color:var(--mute);margin-top:4px;}
.page-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:10px;
  font-family:var(--font);font-size:13.5px;font-weight:700;
  border:1.5px solid transparent;cursor:pointer;
  transition:all .15s;white-space:nowrap;text-decoration:none;
}
.btn .ic{width:15px;height:15px;stroke:currentColor;}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff;}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{background:var(--line-2);color:var(--ink);}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary-border);}
.btn-outline:hover{background:var(--primary-light);color:var(--primary);}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn-danger:hover{background:#DC2626;border-color:#DC2626;color:#fff;}
.btn-success{background:var(--success);color:#fff;border-color:var(--success);}
.btn-success:hover{background:#059669;border-color:#059669;color:#fff;}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:8px;}
.btn-sm .ic{width:13px;height:13px;}
.btn-lg{padding:13px 24px;font-size:14.5px;border-radius:12px;}
.btn-block{display:flex;width:100%;}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ── Button loading state ───────────────────────────────────── */
/* Trigger by adding `.is-loading` to a button OR submitting a form.
   The spinner replaces the icon; text dims; pointer events blocked. */
.btn.is-loading{
  position:relative;color:transparent !important;pointer-events:none;
  opacity:.85;cursor:wait;
}
.btn.is-loading > *{visibility:hidden;}
.btn.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;
  width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;
  border:2.5px solid currentColor;
  border-top-color:transparent;
  color:#fff;
  animation:btn-spin .7s linear infinite;
}
.btn-ghost.is-loading::after,.btn-outline.is-loading::after{color:var(--primary);}
.btn-sm.is-loading::after{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-width:2px;}
.btn-lg.is-loading::after{width:18px;height:18px;margin:-9px 0 0 -9px;}
@keyframes btn-spin{to{transform:rotate(360deg);}}

/* ── Cards ──────────────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-header{
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.card-header h3{font-size:15px;font-weight:700;color:var(--ink);}
.card-header .sub{font-size:12.5px;color:var(--mute);margin-top:2px;}
.card-body{padding:22px;}
.card-footer{padding:14px 22px;border-top:1px solid var(--line);background:var(--bg);border-radius:0 0 var(--radius-lg) var(--radius-lg);}

/* ── Stat tiles ─────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px;}
.stat{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:18px 20px;
  display:flex;flex-direction:column;gap:6px;
  transition:box-shadow .15s,transform .15s;
}
.stat:hover{box-shadow:var(--shadow);transform:translateY(-1px);}
.stat-label{font-size:11.5px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;}
.stat-value{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;}
.stat-trend{font-size:11.5px;font-weight:600;color:var(--success);display:inline-flex;align-items:center;gap:4px;}
.stat-trend.down{color:var(--danger);}
.stat-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  align-self:flex-start;margin-bottom:4px;
}
.stat-icon .ic{width:18px;height:18px;stroke:currentColor;}

/* ── Forms ──────────────────────────────────────────────────── */
.field{margin-bottom:16px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:.01em;}
.label .req{color:var(--danger);margin-left:3px;}
.hint{font-size:12px;color:var(--mute);margin-top:5px;}
.input,.select,.textarea{
  width:100%;padding:10px 13px;
  background:#fff;border:1.5px solid var(--line);
  border-radius:9px;font-size:13.5px;color:var(--ink);
  transition:border-color .12s,box-shadow .12s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}
.textarea{resize:vertical;min-height:90px;font-family:inherit;}
.input-group{position:relative;}
.input-group .input{padding-left:38px;}
.input-group .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mute);}

/* ── Checkbox row (global — was auth-only, promoted) ────────── */
.auth-checkbox{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--text);cursor:pointer;
  user-select:none;line-height:1.5;
}
.auth-checkbox > input[type="checkbox"]{
  width:16px;height:16px;
  accent-color:var(--primary);
  flex-shrink:0;
  margin-top:1px;
}
/* When the label is a wrapped card with a body div */
.auth-checkbox > div{flex:1;min-width:0;}

/* ── Phone input component ──────────────────────────────────── */
.phone-input-row{display:flex;gap:8px;align-items:stretch;}
.phone-input-row .phone-cc{
  flex:0 0 auto;width:auto;min-width:118px;
  font-weight:600;
  background-image:none;
  padding-right:30px;
}
.phone-input-row .phone-local{flex:1;}

/* ── Badges ─────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:50px;
  text-transform:uppercase;letter-spacing:.04em;
}
.badge-primary{background:var(--primary-light);color:var(--primary);}
.badge-success{background:var(--success-light);color:#047857;}
.badge-warn{background:var(--warn-light);color:#92400E;}
.badge-danger{background:var(--danger-light);color:#991B1B;}
.badge-info{background:var(--info-light);color:#0369A1;}
.badge-muted{background:var(--line-2);color:var(--mute);}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.table{width:100%;border-collapse:collapse;}
.table th{
  text-align:left;font-size:11.5px;font-weight:700;
  color:var(--mute);text-transform:uppercase;letter-spacing:.05em;
  padding:13px 18px;background:var(--bg);border-bottom:1px solid var(--line);
}
.table td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--text);}
.table tr:last-child td{border-bottom:none;}
.table tbody tr:hover{background:var(--line-2);}
.table .actions{display:flex;gap:6px;justify-content:flex-end;}

/* ── Key/value grid (detail pages) ─────────────────────────── */
.kv-grid{display:grid;grid-template-columns:140px 1fr;row-gap:10px;column-gap:14px;font-size:13.5px;}
.kv-grid .k{color:var(--mute);}
.kv-grid .v{color:var(--ink);}

/* ── Alerts ─────────────────────────────────────────────────── */
/* Block, not flex. As a flex container every text run and every <strong>
   inside became its own column — fine on a wide screen, but on a phone
   "Started from the <strong>Contact Us</strong> draft." broke into three
   narrow stacked columns. The icon floats instead, which lays out the
   same and leaves the sentence a sentence. */
.alert{
  padding:13px 16px;border-radius:10px;
  font-size:13.5px;font-weight:600;line-height:1.5;
  margin-bottom:14px;
}
.alert::after{content:'';display:block;clear:both;}
.alert .ic{width:18px;height:18px;flex-shrink:0;stroke:currentColor;
  float:left;margin:2px 10px 0 0;}
.alert-success{background:var(--success-light);color:#065F46;border:1px solid #A7F3D0;}
.alert-info{background:var(--primary-light);color:var(--primary-deep);border:1px solid var(--primary-border);}
.alert-warn{background:var(--warn-light);color:#92400E;border:1px solid #FDE68A;}
.alert-danger{background:var(--danger-light);color:#991B1B;border:1px solid #FECACA;}

/* ── Image upload previews ───────────────────────────────────
   Lived in store_settings.html, so the preview only existed on that one
   page. They are here now because platform.js shows the picked file on
   ANY image input, and the box it creates needs styling wherever it
   lands. Empty boxes are hidden — a grey square with nothing in it reads
   as a broken image. */
.img-preview{display:inline-block;width:80px;height:80px;border-radius:10px;
  background:#f1f5f9;overflow:hidden;margin-right:10px;vertical-align:middle;}
.img-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.cover-preview{width:100%;max-width:480px;height:140px;border-radius:10px;
  background:#f1f5f9;overflow:hidden;margin-bottom:8px;}
.cover-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.img-preview:empty,.cover-preview:empty{display:none;}

/* ── Flash messages (Django messages) ───────────────────────── */
.flash-stack{padding:16px 32px 0;}
.flash-stack .alert{margin-bottom:8px;}

/* ── Empty state ────────────────────────────────────────────── */
.empty{
  padding:60px 24px;text-align:center;
  background:#fff;border:1px dashed var(--line);
  border-radius:var(--radius-lg);
}
.empty-icon{
  width:60px;height:60px;border-radius:16px;
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
.empty-icon .ic{width:28px;height:28px;stroke:currentColor;}
.empty-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.empty-sub{font-size:13.5px;color:var(--mute);max-width:380px;margin:0 auto 18px;}

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--line);margin-bottom:22px;}
.tab{
  padding:11px 18px;border:none;background:none;
  font-size:13.5px;font-weight:600;color:var(--mute);
  cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1.5px;transition:all .12s;
}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);}

/* ── Code block ─────────────────────────────────────────────── */
.code{
  background:#0F172A;color:#E2E8F0;
  border-radius:var(--radius);overflow:hidden;
  font-family:var(--font-mono);font-size:12.5px;
}
.code-head{
  padding:9px 14px;background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;
}
.code-head .lang{font-size:11px;color:#94A3B8;font-weight:500;letter-spacing:.04em;}
.code-head .copy{
  background:rgba(255,255,255,.06);color:#CBD5E1;
  border:none;padding:4px 10px;border-radius:6px;
  font-size:11px;font-weight:600;cursor:pointer;
}
.code-head .copy:hover{background:rgba(255,255,255,.12);color:#fff;}
.code pre{padding:16px 18px;overflow-x:auto;line-height:1.7;}
.code .k{color:#A78BFA;}
.code .s{color:#86EFAC;}
.code .c{color:#64748B;font-style:italic;}
.code .f{color:#FCD34D;}
.code .n{color:#F472B6;}

/* ── Inline code ────────────────────────────────────────────── */
code{font-family:var(--font-mono);font-size:.92em;background:var(--primary-light);color:var(--primary-deep);padding:2px 6px;border-radius:4px;}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:100;padding:20px;backdrop-filter:blur(4px);
}
.modal-backdrop[hidden]{display:none;}
.modal{
  background:#fff;border-radius:var(--radius-xl);
  max-width:480px;width:100%;
  box-shadow:var(--shadow-lg);
  max-height:90vh;overflow-y:auto;
}
.modal-head{padding:20px 24px 0;display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{font-size:17px;font-weight:800;color:var(--ink);}
.modal-close{background:none;border:none;color:var(--mute);cursor:pointer;padding:4px;}
.modal-body{padding:18px 24px 24px;}
.modal-foot{padding:14px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--bg);border-radius:0 0 var(--radius-xl) var(--radius-xl);}

/* ── Utilities ──────────────────────────────────────────────── */
.muted{color:var(--mute);}
.text-sm{font-size:12.5px;}
.text-xs{font-size:11.5px;}
.fw-700{font-weight:700;}
.fw-800{font-weight:800;}
.mono{font-family:var(--font-mono);}
.flex{display:flex;}
.flex-col{display:flex;flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-2{gap:8px;}.gap-3{gap:12px;}.gap-4{gap:16px;}
.mt-2{margin-top:8px;}.mt-3{margin-top:12px;}.mt-4{margin-top:16px;}
.mb-2{margin-bottom:8px;}.mb-3{margin-bottom:12px;}.mb-4{margin-bottom:16px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
/* Grid items default to min-width:auto, which lets wide children
   (tables with min-width, long code strings, etc.) push the whole
   column past its 1fr allocation and burst the viewport on phones.
   Force min-width:0 so cells respect their track. */
.grid-2 > *,.grid-3 > *,.field-row > *,.stat-grid > *{min-width:0;}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 980px){
  .app-shell{grid-template-columns:1fr;}
  .sidebar{
    position:fixed;left:0;top:0;z-index:200;
    width:280px;height:100vh;
    transform:translateX(-100%);
    transition:transform .25s;
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-overlay{
    position:fixed;inset:0;background:rgba(15,23,42,.4);
    z-index:150;opacity:0;pointer-events:none;
    transition:opacity .2s;
  }
  .sidebar-overlay.show{opacity:1;pointer-events:auto;}
  .topbar{padding:11px 14px;gap:10px;}
  .topbar-mobile-toggle{display:inline-flex;}
  .topbar-title{font-size:14px;}
  .topbar-sub{display:none;}
  .topbar-balance{padding:5px 10px;font-size:11.5px;}
  .topbar-balance .ic{display:none;}
  .topbar-user{padding:4px 4px 4px 4px;gap:6px;}
  .topbar-user-name{display:none;}
  .topbar-avatar{width:28px;height:28px;font-size:11px;}

  .content{padding:18px 14px;}
  .content-narrow{max-width:100%;}
  .field-row,.grid-2,.grid-3{grid-template-columns:1fr;}

  /* Page header — title wraps, action buttons drop below */
  .page-header{flex-direction:column;align-items:stretch;gap:12px;}
  .page-title{font-size:20px;}
  .page-sub{font-size:13px;}
  .page-actions{justify-content:flex-start;flex-wrap:wrap;}
  .page-actions .btn{flex:1;min-width:0;}

  /* Stats — 2 per row on tablets, 1 on phones */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stat{padding:14px 16px;}
  .stat-value{font-size:20px;}

  /* Tables — give them their own horizontal scroll inside the card.
     Scroll lives on the wrapper (.table-wrap or .card-body around the
     table) so the table keeps its natural table-layout and the parent
     card never bursts out of the viewport. */
  .card{min-width:0;overflow:hidden;}
  .table-wrap,
  .card > .card-body{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table{min-width:540px;}
  .table th,.table td{padding:10px 12px;font-size:12.5px;}

  /* Tabs — horizontal scroll */
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:1px;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{flex-shrink:0;white-space:nowrap;padding:10px 14px;}

  /* Cards: shrink padding */
  .card-body{padding:16px;}
  .card-header{padding:14px 16px;flex-wrap:wrap;}

  /* Flash messages: tighter gutters */
  .flash-stack{padding:12px 14px 0;}

  /* Stat icon row at the top of a stat tile shouldn't dominate */
  .stat-icon{width:32px;height:32px;}

  /* Forms: make selects/inputs comfortable */
  .input,.select,.textarea{font-size:14px;padding:11px 12px;}

  /* Filter rows on list pages — every field spans full width so
     selects and buttons stack cleanly instead of half-collapsing. */
  .filter-row{gap:8px;}
  .filter-row > *{flex:1 1 100%;min-width:0;}
  .filter-row .btn{flex:1 1 auto;}

  /* Key/value grids used across detail pages: drop the fixed 140px
     label column and stack label→value so long values (addresses,
     UUIDs, references) never get squeezed into a narrow strip. */
  .kv-grid{grid-template-columns:1fr;row-gap:4px;column-gap:0;}
  .kv-grid .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
  .kv-grid .v{margin-bottom:8px;word-break:break-word;overflow-wrap:anywhere;}
  .kv-grid .v code{word-break:break-all;}
}
@media (max-width: 720px){
  /* Declutter the topbar on phones: the platform-status pill and the
     persona-mode switcher are secondary — drop them so the wallet,
     notifications and avatar always fit without overflowing. */
  .topbar-hide-sm{display:none !important;}
  .topbar{gap:8px;}
  .topbar-left{min-width:0;flex:1;}
  .topbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar-right{gap:8px;flex-shrink:0;}
  .topbar-balance{padding:5px 9px;}
}
@media (max-width: 540px){
  .stat-grid{grid-template-columns:1fr;}
  .page-actions{display:flex;flex-direction:column;}
  .page-actions .btn{width:100%;}
}

/* ── Brand logo + partner attribution ─────────────────────── */
.brand-logo-img{
  height:28px;width:auto;max-width:132px;max-height:32px;
  display:block;object-fit:contain;object-position:left center;
}
.brand-logo-img--sm{height:24px;max-width:28px;}
.brand-logo-img--md{height:28px;max-width:132px;}
.brand-logo-img--lg{height:36px;max-width:160px;}
.brand-logo-link{display:inline-flex;align-items:center;max-width:140px;}
.sidebar-brand .brand-logo-img{height:28px;max-width:128px;}
.sidebar-brand{align-items:center;}
.partner-attribution{
  font-size:12px;color:var(--mute-2);text-align:center;
  line-height:1.55;padding:10px 24px 0;
}
.partner-attribution a{color:var(--mute);text-decoration:none;font-weight:600;}
.partner-attribution a:hover{text-decoration:underline;color:var(--text);}
.app-partner-footer{
  margin-top:auto;padding:14px 24px 18px;border-top:1px solid var(--line);
  background:var(--surface);
}
.app-main{display:flex;flex-direction:column;min-height:100vh;}
.app-main .content{flex:1;}

/* --- Team / workspace (Phase 4.7) --- */
.ava{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  background:var(--primary-light);color:var(--primary);
}
.ava.ava-muted{background:var(--line-2);color:var(--mute);}
.seat-meter{
  height:8px;border-radius:999px;background:var(--line-2);
  overflow:hidden;flex:1;min-width:120px;
}
.seat-meter > span{display:block;height:100%;background:var(--primary);border-radius:999px;}
.team-id{display:flex;align-items:center;gap:12px;}
.team-id .name{font-weight:600;color:var(--ink);font-size:13.5px;}
.team-id .mail{color:var(--mute);font-size:12px;}
.invite-link{font-size:11.5px;color:var(--mute);word-break:break-all;margin-top:2px;}

/* ── Plan picker (dashboard-native compact cards) ─────────────────── */
.plan-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;margin-top:8px;
}
.plan-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:20px 18px;
  display:flex;flex-direction:column;gap:12px;
}
.plan-card.is-popular{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;}
.plan-card.is-current{background:var(--primary-light);}
.plan-card-pop{
  position:absolute;top:-10px;left:16px;background:var(--primary);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
}
.plan-card-name{font-size:15px;font-weight:700;color:var(--ink);}
.plan-card-price{display:flex;align-items:baseline;gap:4px;color:var(--ink);}
.plan-card-price .cur{font-size:11px;font-weight:700;color:var(--mute);}
.plan-card-price .num{font-size:28px;font-weight:800;letter-spacing:-0.02em;}
.plan-card-price .per{font-size:12px;color:var(--mute);}
.plan-card-feats{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:6px;}
.plan-card-feats li{
  font-size:12.5px;color:var(--ink);padding-left:18px;position:relative;line-height:1.35;
}
.plan-card-feats li::before{
  content:"";position:absolute;left:0;top:6px;width:10px;height:10px;
  border-radius:50%;background:var(--primary-light);
  box-shadow:inset 0 0 0 2px var(--primary);
}
.plan-card-cta{margin-top:auto;padding-top:4px;}

/* ── Responsive action cluster ──────────────────────────────────────────
   Row / header actions that show as inline buttons on desktop and collapse
   into a single "⋯" menu on mobile, so small screens don't stack buttons
   awkwardly at the top. Wrap the inline buttons in `.actions-cluster` and
   provide a mirror set inside `.actions-kebab > .actions-pop`. */
.actions-wrap{display:inline-flex;align-items:center;justify-content:flex-end;}
.actions-cluster{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.actions-kebab{display:none;position:relative;}
.actions-kebab>summary{list-style:none;cursor:pointer;width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);font-size:18px;line-height:1;}
.actions-kebab>summary::-webkit-details-marker{display:none;}
.actions-kebab[open]>summary{background:var(--soft-2,#f1f3f7);}
.actions-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:172px;
  background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.16);padding:6px;display:flex;flex-direction:column;gap:2px;}
.actions-pop form{margin:0;}
.actions-pop .btn,.actions-pop button,.actions-pop a{width:100%;justify-content:flex-start;
  border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:8px;box-shadow:none;}
.actions-pop .btn:hover,.actions-pop button:hover,.actions-pop a:hover{background:var(--soft-2,#f1f3f7);}
@media (max-width:640px){
  .actions-cluster{display:none;}
  .actions-kebab{display:inline-block;}
}