:root{
  --aqua:#00B8B0;
  --aqua-deep:#0E9C95;
  --aqua-light:#4FCFC7;
  --aqua-lighter:#9FE3DF;
  --aqua-pale:#E0F5F3;
  --bg:#FAF9F6;
  --card:#FFFFFF;
  --ink:#17302D;
  --ink-soft:#5B6664;
  --ink-faint:#8B9694;
  --line:#E1E9E7;
  --line-soft:#EEF3F2;
  --warn:#C4573F;
  --sand-bg:#F2F1EC;
  --sand-ink:#8B7A55;
  --grey-bg:#EEF0F0;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--aqua-deep); text-decoration:none; }
a:hover{ color:var(--aqua); }
table{ border-collapse:collapse; width:100%; font-size:12.5px; }
h1,h2{ font-family:'Manrope', sans-serif; margin:0; }

.layout{ display:flex; min-height:100vh; }

/* SIDEBAR */
.sidebar{
  width:252px; flex:none; background:var(--card);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:22px 16px 14px; gap:18px;
  /* Stay in place while the page scrolls; scroll inside only if the menu is taller than the screen. */
  position:sticky; top:0; height:100vh; overflow-y:auto; align-self:flex-start;
  scrollbar-width:none; /* Firefox: no visible scrollbar */
}
.sidebar::-webkit-scrollbar{ display:none; } /* Chrome / Edge */
.brand{ display:flex; align-items:center; gap:10px; padding:0 8px; }
.brand .mark{
  width:32px; height:32px; border-radius:9px; background:var(--aqua);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.brand .name{ font-family:'Manrope', sans-serif; font-weight:800; font-size:16.5px; letter-spacing:-.2px; color:var(--ink); }

.nav{ display:flex; flex-direction:column; gap:2px; }
.nav a{
  display:flex; align-items:center; gap:12px; padding:8px 12px;
  border-radius:10px; color:var(--ink-soft); font-weight:500; font-size:13.5px;
}
.nav a.active{ background:var(--aqua-pale); color:var(--aqua-deep); font-weight:600; }
.nav a:hover{ background:#F5F5F2; color:var(--ink); }
.nav a.active:hover{ background:var(--aqua-pale); color:var(--aqua-deep); }
.nav svg{ flex:none; }

.sidebar-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:2px; }
.account{
  display:flex; align-items:center; gap:10px; padding:10px 12px 4px;
  margin-top:10px; border-top:1px solid var(--line);
}
.avatar-sm{
  width:32px; height:32px; border-radius:50%; background:var(--aqua-pale);
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope', sans-serif; font-weight:700; font-size:12.5px; color:var(--aqua-deep); flex:none;
}
.account-name{ font-size:12.5px; font-weight:600; color:var(--ink); }
.account-role{ font-size:11px; color:var(--ink-faint); }

/* MAIN */
.main{ flex-grow:1; display:flex; flex-direction:column; min-width:0; overflow-x:clip; }
.content{ min-width:0; }

.topbar{
  height:72px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 36px; border-bottom:1px solid var(--line); background:var(--card);
}
.search{
  display:flex; align-items:center; gap:10px; width:340px; margin:0;
  background:#F2FAF9; border:1px solid #D8E6E4; border-radius:10px; padding:8px 12px;
}
.search input{
  border:none; background:transparent; outline:none; font-size:13px;
  font-family:'IBM Plex Sans', sans-serif; color:var(--ink); width:100%;
}
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.top-actions{ display:flex; align-items:center; gap:18px; }
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; padding:0;
}
.dot-badge{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--aqua); }
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--aqua-deep); color:#fff;
  font-family:'Manrope', sans-serif; font-weight:700; font-size:12.5px;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
}

.content{ padding:36px; display:flex; flex-direction:column; gap:28px; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.page-head h1{ font-weight:800; font-size:24px; color:var(--ink); letter-spacing:-.3px; }
.page-head p{ margin:6px 0 0; font-size:13.5px; color:var(--ink-soft); }
.btn-primary{
  display:flex; align-items:center; gap:8px; background:var(--aqua); color:#fff;
  border:none; padding:11px 18px; border-radius:10px; font-family:'IBM Plex Sans', sans-serif;
  font-weight:600; font-size:13.5px; cursor:pointer;
}
.btn-primary:hover{ background:var(--aqua-deep); color:#fff; }

.stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.stat-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; display:flex; flex-direction:column; gap:10px;
}
.stat-label{ font-size:12.5px; color:var(--ink-soft); font-weight:500; }
.stat-value{ font-family:'Manrope', sans-serif; font-weight:800; font-size:27px; color:var(--ink); }
.stat-delta{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; }
.stat-delta.up{ color:var(--aqua-deep); }
.stat-delta.down{ color:var(--warn); }

.grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start; }
.col{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; }
figure.card{ margin:0; }
.card-title{ font-family:'Manrope', sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); }

.chart{ display:flex; align-items:flex-end; gap:22px; height:160px; padding:0 6px; margin-top:20px; }
.bar-col{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
.bar{ width:34px; border-radius:7px 7px 0 0; }
.bar-label{ font-size:11.5px; color:var(--ink-soft); text-align:center; }

.card-head-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-head-row a{ font-size:12.5px; font-weight:600; }

th{ text-align:left; padding:9px 10px; color:var(--ink-soft); font-weight:600; border-bottom:1px solid var(--line); }
td{ padding:11px 10px; border-bottom:1px solid var(--line-soft); color:var(--ink); }
tr:last-child td{ border-bottom:none; }
td.name{ font-weight:500; }
td.score{ font-weight:600; }
.table-wrap{ overflow-x:auto; }
.empty{ color:var(--ink-faint); text-align:center; padding:18px 10px; }
.badge{ font-weight:600; padding:3px 10px; border-radius:999px; font-size:11.5px; display:inline-block; }
.badge-qualified{ background:var(--aqua-pale); color:var(--aqua-deep); }
.badge-contacted{ background:var(--sand-bg); color:var(--sand-ink); }
.badge-new{ background:var(--grey-bg); color:var(--ink-soft); }

.convo-list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.convo-item{ display:flex; gap:12px; align-items:flex-start; }
.convo-avatar{
  width:30px; height:30px; border-radius:50%; font-family:'Manrope', sans-serif;
  font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; flex:none;
}
.convo-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.convo-top{ display:flex; align-items:center; gap:8px; }
.convo-name{ font-size:12.5px; font-weight:600; color:var(--ink); }
.convo-score{ font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px; }
.convo-note{ font-size:12px; color:var(--ink-soft); line-height:1.4; }

/* Tone helpers for chatbot avatars and score pills */
.tone-aqua{ background:var(--aqua-pale); color:var(--aqua-deep); }
.tone-sand{ background:var(--sand-bg); color:var(--sand-ink); }
.tone-grey{ background:var(--grey-bg); color:var(--ink-soft); }

.niche-list{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.niche-row-top{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
.niche-name{ color:var(--ink); font-weight:500; }
.niche-count{ color:var(--ink-soft); }
.niche-track{ height:7px; background:var(--line-soft); border-radius:999px; overflow:hidden; }
.niche-fill{ height:100%; background:var(--aqua); }

/* ---------- App-wide components ---------- */
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.small{ font-size:12px; }
.nowrap{ white-space:nowrap; }
.text-right{ text-align:right; }
.mt-0{ margin-top:0; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.stack-sm{ display:flex; flex-direction:column; gap:8px; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.grid-2-even{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; align-items:start; }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.card-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 0; }
.divider{ border:none; border-top:1px solid var(--line-soft); margin:18px 0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 15px; border-radius:10px; font-family:'IBM Plex Sans', sans-serif;
  font-weight:600; font-size:13px; cursor:pointer; border:1px solid var(--line);
  background:var(--card); color:var(--ink); text-decoration:none; line-height:1.2;
}
.btn:hover{ background:#F5F5F2; color:var(--ink); }
.btn-sm{ padding:6px 11px; font-size:12px; border-radius:8px; }
.btn-aqua{ background:var(--aqua); border-color:var(--aqua); color:#fff; }
.btn-aqua:hover{ background:var(--aqua-deep); border-color:var(--aqua-deep); color:#fff; }
.btn-danger{ color:var(--warn); border-color:#EBCFC7; }
.btn-danger:hover{ background:#FBEFEC; color:var(--warn); }
.btn-link{ background:none; border:none; padding:0; color:var(--aqua-deep); font-weight:600; cursor:pointer; font-size:12.5px; font-family:inherit; }
.btn-whatsapp{ background:#25D366; border-color:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1EBE5A; color:#fff; }
button:disabled{ opacity:.55; cursor:not-allowed; }
.inline{ display:inline; margin:0; }

.alert{ padding:12px 16px; border-radius:10px; font-size:13px; border:1px solid; }
.alert-success{ background:var(--aqua-pale); border-color:#BDE9E4; color:var(--aqua-deep); }
.alert-info{ background:#EEF4FB; border-color:#D5E3F3; color:#34597E; }
.alert-error{ background:#FBEFEC; border-color:#EBCFC7; color:var(--warn); }
.alert ul{ margin:6px 0 0; padding-left:18px; }

.form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 20px; }
.form-grid .full{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field label, .label{ font-size:12.5px; font-weight:600; color:var(--ink); }
.field .hint{ font-size:11.5px; color:var(--ink-faint); }
.input, .select, .textarea{
  width:100%; border:1px solid #D8E6E4; background:#FCFDFD; border-radius:9px;
  padding:9px 11px; font-size:13px; font-family:'IBM Plex Sans', sans-serif; color:var(--ink);
}
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--aqua); box-shadow:0 0 0 3px rgba(0,184,176,.14); }
.textarea{ min-height:120px; resize:vertical; line-height:1.5; }

/* Dropdowns in the app theme: own chevron, hover and focus colours */
select.select{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  padding-right:34px; font-weight:500;
  background-color:#FCFDFD;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230E9C95' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
select.select:hover{ border-color:var(--aqua-lighter); background-color:#F7FCFB; }
select.select:focus{ background-color:var(--card); }
select.select option{ color:var(--ink); background:var(--card); }

/* Newer Chrome / Edge: the opened list can be styled too */
@supports (appearance: base-select){
  select.select, select.select::picker(select){ appearance:base-select; }
  select.select{ background-image:none; display:flex; align-items:center; }
  select.select::picker-icon{
    content:''; width:12px; height:12px; margin-left:auto;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230E9C95' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
    transition:transform .2s;
  }
  select.select:open::picker-icon{ transform:rotate(180deg); }
  select.select::picker(select){
    border:1px solid var(--line); border-radius:12px; padding:6px; margin-top:6px;
    background:var(--card); box-shadow:0 16px 40px rgba(23,48,45,.16);
    max-height:320px; overflow-y:auto;
  }
  select.select option{
    padding:8px 10px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer;
    background:transparent; color:var(--ink);
  }
  select.select option::checkmark{ content:'✓'; color:var(--aqua-deep); font-weight:800; order:1; margin-left:auto; }
  select.select option:hover, select.select option:focus-visible{ background:var(--aqua-pale); color:var(--aqua-deep); outline:none; }
  select.select option:checked{ background:var(--aqua); color:#fff; }
  select.select option:checked::checkmark{ color:#fff; }
}
.check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); }
.check input{ width:16px; height:16px; accent-color:var(--aqua); }
.field-error{ font-size:11.5px; color:var(--warn); }
.form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }

.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.filters .input, .filters .select{ width:auto; min-width:140px; }
.filters .grow{ flex:1; min-width:200px; }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap; }
.tabs a{ padding:10px 14px; font-size:13px; font-weight:600; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a.active{ color:var(--aqua-deep); border-bottom-color:var(--aqua); }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--line); color:var(--ink-soft); background:var(--card); }
.chip.active{ background:var(--aqua-pale); border-color:#BDE9E4; color:var(--aqua-deep); }

.table-wrap table td, .table-wrap table th{ vertical-align:middle; }
td .sub{ display:block; font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
tr.clickable:hover td{ background:#FAFCFC; }
.score-pill{ display:inline-block; min-width:34px; text-align:center; font-weight:700; font-size:11.5px; padding:2px 8px; border-radius:999px; }
.badge-replied{ background:#EEF4FB; color:#34597E; }
.badge-won{ background:#DDF3E4; color:#1F7A45; }
.badge-lost{ background:#FBEFEC; color:var(--warn); }
.badge-active, .badge-completed, .badge-good, .badge-valid, .badge-sent{ background:var(--aqua-pale); color:var(--aqua-deep); }
.badge-published{ background:var(--aqua-pale); color:var(--aqua-deep); }
.badge-scheduled, .badge-publishing{ background:var(--sand-bg); color:var(--sand-ink); }
.badge-draft, .badge-unknown, .badge-pending, .badge-stopped, .badge-archived{ background:var(--grey-bg); color:var(--ink-soft); }
.badge-paused, .badge-risky, .badge-warning, .badge-running, .badge-opened, .badge-clicked{ background:var(--sand-bg); color:var(--sand-ink); }
.badge-failed, .badge-invalid, .badge-failing, .badge-bounced, .badge-unsubscribed{ background:#FBEFEC; color:var(--warn); }

.empty-state{ text-align:center; padding:36px 16px; color:var(--ink-soft); font-size:13px; }
.empty-state strong{ display:block; color:var(--ink); font-family:'Manrope', sans-serif; font-size:15px; margin-bottom:6px; }

.dl{ display:grid; grid-template-columns:140px 1fr; gap:10px 14px; font-size:13px; margin:0; }
.dl dt{ color:var(--ink-soft); }
.dl dd{ margin:0; color:var(--ink); word-break:break-word; }

.list-plain{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.list-plain li{ font-size:13px; }

.timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.timeline li{ display:flex; gap:12px; font-size:12.5px; }
.timeline .dot{ width:8px; height:8px; border-radius:50%; background:var(--aqua-lighter); margin-top:6px; flex:none; }
.timeline .when{ color:var(--ink-faint); font-size:11.5px; }

.chat{ display:flex; flex-direction:column; gap:10px; }
.bubble{ max-width:78%; padding:10px 13px; border-radius:12px; font-size:13px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.bubble .meta{ display:block; font-size:10.5px; color:var(--ink-faint); margin-bottom:3px; }
.bubble.visitor{ background:var(--aqua-pale); align-self:flex-start; border-bottom-left-radius:4px; }
.bubble.agent{ background:#F2F4F4; align-self:flex-end; border-bottom-right-radius:4px; }
.bubble.system{ background:transparent; align-self:center; color:var(--ink-faint); font-size:12px; }

.signal{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.signal:last-child{ border-bottom:none; }
.signal .yes{ color:var(--aqua-deep); font-weight:700; }
.signal .no{ color:var(--ink-faint); }
.meter{ height:9px; background:var(--line-soft); border-radius:999px; overflow:hidden; position:relative; }
.meter span{ display:block; height:100%; background:var(--aqua); }
.meter i{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); }

.step-card{ border:1px solid var(--line); border-radius:12px; padding:18px; background:#FCFDFD; }
.step-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.step-num{ font-family:'Manrope', sans-serif; font-weight:800; font-size:13px; color:var(--aqua-deep); }
.placeholder-list{ display:flex; flex-wrap:wrap; gap:6px; }
.placeholder-list code{ background:var(--line-soft); padding:3px 7px; border-radius:6px; font-size:11.5px; cursor:pointer; }
.preview-box{ border:1px dashed var(--line); border-radius:10px; padding:16px; font-size:13px; line-height:1.55; background:#fff; }
pre.code{ background:#F4F7F7; border:1px solid var(--line); border-radius:10px; padding:14px; font-size:12px; white-space:pre-wrap; margin:0; }

.pagination{ display:flex; gap:6px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.pagination a, .pagination span{ padding:6px 11px; border-radius:8px; border:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); background:var(--card); }
.pagination span.current{ background:var(--aqua); border-color:var(--aqua); color:#fff; font-weight:600; }
.pagination span.disabled{ opacity:.5; }

.setup-card summary{ cursor:pointer; list-style:none; }
.setup-card summary::-webkit-details-marker{ display:none; }
.setup-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.setup-item{ display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:10px; }
.setup-item.done{ background:#FAFDFC; }
.setup-check{ width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:#FBEFEC; color:var(--warn); }
.setup-item.done .setup-check{ background:var(--aqua-pale); color:var(--aqua-deep); }
.setup-label{ font-size:13px; font-weight:600; color:var(--ink); }
@media (max-width: 1080px){ .setup-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .setup-grid{ grid-template-columns:1fr; } }

/* Leads: filter card */
.filter-card{ display:flex; flex-direction:column; gap:16px; padding:18px 20px; }
.filter-search{
  display:flex; align-items:center; gap:10px; background:#F7FBFA; border:1px solid #D8E6E4;
  border-radius:12px; padding:6px 6px 6px 14px; color:var(--ink-faint);
}
.filter-search:focus-within{ border-color:var(--aqua); box-shadow:0 0 0 3px rgba(0,184,176,.14); }
.filter-search input{ flex:1; min-width:0; border:none; background:transparent; outline:none; font-size:14px; font-family:inherit; color:var(--ink); padding:6px 0; }
.filter-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(124px, 1fr)); gap:10px; }
.filter-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.filter-field > span{ font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-faint); }
.filter-field .select{ padding:8px 10px; }
.filter-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line-soft); }
.toggle{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  padding:6px 12px; border-radius:999px; border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--card);
}
.toggle input{ position:absolute; opacity:0; pointer-events:none; }
.toggle.on{ background:var(--aqua-pale); border-color:#BDE9E4; color:var(--aqua-deep); }
.toggle:has(input:checked){ background:var(--aqua-pale); border-color:#BDE9E4; color:var(--aqua-deep); }
.toggle:has(input:focus-visible){ outline:2px solid var(--aqua); outline-offset:2px; }

.wa-link{ display:inline-flex; vertical-align:middle; color:#1EBE5A; margin-left:4px; }
.wa-link:hover{ color:#128C4A; }
.wa-link svg{ width:16px; height:16px; }

.spinner{ width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; flex:none; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.bulk-bar{ display:none; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; border:1px solid #BDE9E4; background:var(--aqua-pale); border-radius:10px; margin-bottom:14px; font-size:13px; }
.bulk-bar.show{ display:flex; }
.bulk-bar .select{ width:auto; }

.notif-count{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--warn); color:#fff; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.nav-section{ font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-faint); padding:10px 12px 4px; }
.logout-btn{ margin-left:auto; background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:4px; }
.logout-btn:hover{ color:var(--warn); }

@media (max-width: 1080px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-2-even, .grid-3{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.menu-btn{ display:none; }
@media (max-width: 720px){
  .menu-btn{ display:flex; }
  .sidebar{ display:none; position:fixed; inset:0 auto 0 0; z-index:50; overflow-y:auto; box-shadow:0 0 40px rgba(0,0,0,.18); }
  .sidebar.open{ display:flex; }
  .topbar{ padding:0 18px; }
  .search{ width:100%; max-width:220px; }
  .content{ padding:20px; }
  .stats{ grid-template-columns:1fr; }
  .chart{ gap:10px; }
  .form-grid{ grid-template-columns:1fr; }
  .dl{ grid-template-columns:1fr; gap:2px 0; }
  .dl dd{ margin-bottom:8px; }
  .bubble{ max-width:92%; }
}