/* ============================================================
   Volts Connect — premium design system
   Dark-first. Light via [data-theme="light"]. No behavior changes;
   restyles the existing class contract used by index.php + app.js.
   ============================================================ */

:root{
  --bg:#0A0D14;
  --surface-1:#10141F;
  --surface-2:#161B29;
  --surface-3:#1C2233;
  --surface-hover:#202840;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.13);
  --text:#E7ECF5;
  --muted:#A7B0C4;
  --faint:#6B7488;
  --accent:#4C82FB;
  --accent-strong:#6A9BFF;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(76,130,251,.16);
  --accent-line:rgba(76,130,251,.45);
  --live:#2DD4BF;
  --success:#43C08A;
  --warning:#E9A23B;
  --danger:#F0616D;
  --danger-soft:rgba(240,97,109,.15);
  --bubble-in:#1A2130;
  --bubble-out:linear-gradient(180deg,#3D6FE8,#3665D6);
  --shadow-sm:0 2px 8px rgba(0,0,0,.30);
  --shadow:0 18px 50px rgba(0,0,0,.50);
  --ring:0 0 0 3px rgba(76,130,251,.35);
  --radius:14px;
  --avatar-1:linear-gradient(135deg,#4C82FB,#6A5CF0);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#F4F6FB;
  --surface-1:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#EEF2FA;
  --surface-hover:#E7EDF8;
  --border:rgba(16,24,40,.09);
  --border-strong:rgba(16,24,40,.16);
  --text:#101828;
  --muted:#49546B;
  --faint:#8A93A6;
  --accent:#2F6BF0;
  --accent-strong:#2258D8;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(47,107,240,.10);
  --accent-line:rgba(47,107,240,.40);
  --live:#0E9E92;
  --success:#1F9D63;
  --warning:#B7791F;
  --danger:#D64550;
  --danger-soft:rgba(214,69,80,.10);
  --bubble-in:#F0F3F9;
  --bubble-out:linear-gradient(180deg,#3D74F0,#2F6BF0);
  --shadow-sm:0 2px 8px rgba(16,24,40,.06);
  --shadow:0 18px 50px rgba(16,24,40,.12);
  --ring:0 0 0 3px rgba(47,107,240,.22);
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-y:auto;
}
a{color:var(--accent-strong)}
button{font:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:10px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
input,textarea,select,button{font-variant-numeric:tabular-nums}

/* ---------- login / simple pages ---------- */
.container{max-width:440px;margin:0 auto;padding:min(12vh,110px) 24px 40px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.brand{font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;font-size:15px}
.brandLogo{width:170px;height:auto;display:block}
.brandLogoLight{display:none}
[data-theme="light"] .brandLogoDark{display:none}
[data-theme="light"] .brandLogoLight{display:block}

/* ---------- primitives ---------- */
.card{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:920px){.grid{grid-template-columns:420px 1fr}}
.row{display:flex;gap:10px;flex-wrap:wrap}
.small{font-size:12.5px;color:var(--muted)}
.label{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}

.input{
  width:100%;padding:11px 12px;border-radius:10px;
  border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
[data-theme="light"] .input{background:#fff}
.input::placeholder{color:var(--faint)}
.input:focus{border-color:var(--accent-line);box-shadow:var(--ring)}
select.input{cursor:pointer}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:10px;font-weight:550;font-size:13.5px;
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);
  cursor:pointer;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,transform .05s ease,color .15s ease;
}
.btn:hover{background:var(--surface-hover)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);box-shadow:0 4px 14px rgba(76,130,251,.32)}
.btn.primary:hover{background:var(--accent-strong)}
.btn.danger{background:var(--danger-soft);border-color:rgba(240,97,109,.35);color:var(--danger)}
.btn.danger:hover{background:rgba(240,97,109,.22)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.badge{font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-weight:600}
.chip{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:550;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:pointer;transition:background .13s,color .13s,border-color .13s}
.chip:hover{background:var(--surface-hover);color:var(--text)}
.chip.active{background:var(--accent-soft);color:var(--text);border-color:var(--accent-line)}
.pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.pill.lead{color:var(--accent-strong);background:var(--accent-soft)}
.pill.optout{color:var(--danger);background:var(--danger-soft)}
.pill.ok{color:var(--success);background:rgba(67,192,138,.15)}
.pill.warn{color:var(--warning);background:rgba(233,162,59,.15)}
.pill.err{color:var(--danger);background:var(--danger-soft)}
.pill.neutral{color:var(--muted);background:var(--surface-hover)}
.callDir{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;text-transform:capitalize;color:var(--muted)}
.callDir svg{flex:none}
.callDir.inbound{color:var(--live)}
.callDir.outbound{color:var(--accent-strong)}

/* Getting-started onboarding checklist */
.obGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:14px}
.obStep{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);text-decoration:none;color:var(--text);transition:border-color .12s ease}
.obStep:hover{border-color:var(--accent)}
.obStep.done{opacity:.62}
.obTick{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.obStep.done .obTick{background:var(--success);border-color:var(--success)}
.obLabel{display:block;font-weight:600;font-size:13.5px}
.obStep.done .obLabel{text-decoration:line-through}
.obHint{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.aiFields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 16px}
.aiField{display:flex;flex-direction:column;gap:1px;padding:6px 0;border-top:1px solid var(--border)}
.aiFieldKey{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.aiFieldVal{font-size:13px;color:var(--text);font-weight:500;word-break:break-word}

.error{color:var(--danger);background:var(--danger-soft);border:1px solid rgba(240,97,109,.3);padding:11px 13px;border-radius:10px;margin:12px 0;font-weight:500}
.ok{color:var(--success);background:rgba(67,192,138,.12);border:1px solid rgba(67,192,138,.28);padding:11px 13px;border-radius:10px;margin:12px 0;font-weight:500}

/* status badges (used by app.js delivery states where present) */
.smsStatus{display:inline-block;font-size:10px;padding:1px 7px;border-radius:999px;font-weight:600;margin-left:6px;vertical-align:middle;border:1px solid transparent}
.smsStatus.sent{background:var(--accent-soft);color:var(--accent-strong)}
.smsStatus.delivered{background:rgba(67,192,138,.16);color:var(--success)}
.smsStatus.queued,.smsStatus.sending{background:rgba(233,162,59,.16);color:var(--warning)}
.smsStatus.failed,.smsStatus.undelivered{background:var(--danger-soft);color:var(--danger)}

.list{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto;padding-right:4px}
#conversationList.list{max-height:none;flex:1}
.item{padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2)}

/* ============================================================
   APP SHELL
   ============================================================ */
.appShell{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.appTop{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--border);
  background:var(--surface-1);
}
.appTop .brand{gap:10px}
.appTop .brandLogo{width:150px}
.topActions{display:flex;align-items:center;gap:10px}

.dashboard{
  display:grid;grid-template-columns:236px 1fr;gap:14px;
  padding:14px;overflow:visible;flex:1;min-height:0;
}
@media (max-width:920px){.dashboard{grid-template-columns:1fr}}

/* ---------- nav ---------- */
.nav{
  border:1px solid var(--border);border-radius:16px;
  background:var(--surface-1);box-shadow:var(--shadow-sm);
  padding:12px;display:flex;flex-direction:column;gap:3px;min-height:0;
}
.navTitle{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:4px 10px 8px}
.navLinks{display:flex;flex-direction:column;gap:3px}
.navItem{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:10px;
  color:var(--muted);text-decoration:none;font-weight:500;font-size:13.5px;
  border:1px solid transparent;
  transition:background .13s ease,color .13s ease;
}
.navItem svg{color:var(--faint);flex:none;transition:color .13s ease}
.navItem:hover{background:var(--surface-2);color:var(--text)}
.navItem:hover svg{color:var(--muted)}
.navItem.active{background:var(--accent-soft);color:var(--text);border-color:var(--accent-line);font-weight:600}
.navItem.active svg{color:var(--accent-strong)}
.navSpacer{flex:1}

/* ---------- views ---------- */
.view{min-width:0}
.dashboard>.view{height:auto;overflow:visible}
.pageHeader{margin-bottom:16px}
.pageTitle{font-weight:800;font-size:19px;letter-spacing:-.01em}
.pageGrid{display:grid;grid-template-columns:420px 1fr;gap:14px}
@media (max-width:920px){.pageGrid{grid-template-columns:1fr}}

/* KPI stat tiles (analytics + dialpad overview) */
.statGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.stat{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2)}
.statIcon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong);flex:none}
.statBody{min-width:0}
.statLabel{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.statValue{font-size:25px;font-weight:750;letter-spacing:-.02em;margin-top:3px;line-height:1.1;font-variant-numeric:tabular-nums}

/* settings tabs -> segmented control */
#settingsTabs{display:inline-flex;flex-wrap:wrap;gap:5px;padding:5px;border-radius:12px;border:1px solid var(--border);background:var(--surface-1)}
#settingsTabs .btn{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none;font-weight:550}
#settingsTabs .btn:hover{background:var(--surface-2);color:var(--text)}
#settingsTabs .btn.primary{background:var(--accent);color:var(--accent-ink)}

/* ============================================================
   INBOX
   ============================================================ */
.inboxGrid{min-height:0;height:100%;display:grid;grid-template-columns:340px 1fr 340px;gap:14px}
@media (max-width:1080px){.inboxGrid{grid-template-columns:320px 1fr}.rightPanel{display:none!important}}
/* Phone: list-first drill-down — the conversation list IS the inbox until a
   chat is opened (html.chat-open), then the chat takes over with a back button. */
@media (max-width:860px){
  .inboxGrid{grid-template-columns:1fr}
  .rightPanel{display:none!important}
  html:not(.chat-open) .inboxGrid .chat{display:none}
  html.chat-open .inboxGrid .sidebar{display:none}
}

/* full-height inbox handling (preserved from prior layout) */
html[data-view="inbox"] .appShell{height:100vh;height:100dvh;min-height:0}
html[data-view="inbox"] .dashboard{flex:1;min-height:0;grid-template-rows:1fr;overflow:hidden}
html[data-view="inbox"] .dashboard>.view{height:100%;overflow:hidden}
html[data-view="inbox"] #viewInbox{height:100%;overflow:hidden}
html:not([data-view="inbox"]) #viewBroadcast{max-height:calc(100vh - 130px);overflow:auto}
#viewSettings{padding-right:4px;padding-bottom:14px}
#viewBroadcast{padding-right:4px;padding-bottom:14px}

.sidebar,.chat,.rightPanel{
  min-height:0;height:100%;
  border:1px solid var(--border);border-radius:16px;
  background:var(--surface-1);box-shadow:var(--shadow-sm);
}
.sidebar{padding:14px;display:flex;flex-direction:column}
.panelHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panelTitle{font-weight:700;font-size:16px;letter-spacing:-.01em}

.conversationItem{
  position:relative;display:grid;grid-template-columns:40px 1fr;gap:11px;
  padding:11px;border-radius:12px;border:1px solid transparent;
  background:transparent;cursor:pointer;transition:background .12s ease;
}
.conversationItem:hover{background:var(--surface-2)}
.conversationItem.active{background:var(--surface-3);border-color:var(--border)}
.conversationItem.active::before{content:"";position:absolute;left:-8px;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--accent)}
.conversationItem.empty{display:block;text-align:center;color:var(--faint);padding:26px 12px;cursor:default}
.convWho{min-width:0}
.conversationTop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.conversationName{font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convTime{font-size:11.5px;color:var(--faint);flex:none;font-variant-numeric:tabular-nums}
.convNum{font-size:12px;color:var(--faint);margin-top:1px;font-variant-numeric:tabular-nums}
.convPrev{font-size:13px;color:var(--muted);margin-top:5px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.convMeta{display:flex;align-items:center;gap:6px;margin-top:7px;min-height:2px}
.conversationItem.unread .conversationName{font-weight:700;color:var(--text)}
.conversationItem.unread .convPrev{color:var(--text);font-weight:500}
.unreadDot{margin-left:auto;width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 3px var(--accent-soft)}

/* avatars */
.avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:650;font-size:13px;letter-spacing:.01em;background:var(--avatar-1)}
.avatar.a0{background:linear-gradient(135deg,#4C82FB,#6A5CF0)}
.avatar.a1{background:linear-gradient(135deg,#2DD4BF,#3B9BE8)}
.avatar.a2{background:linear-gradient(135deg,#F0616D,#F2955A)}
.avatar.a3{background:linear-gradient(135deg,#8B5CF6,#6366F1)}
.avatar.a4{background:linear-gradient(135deg,#43C08A,#2DD4BF)}
.avwrap{position:relative}

/* chat column */
.chat{display:flex;flex-direction:column;min-width:0}
.chatHeader{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.chatTitle{font-weight:700;font-size:15px;letter-spacing:-.01em}
.chatSub{margin-top:2px}
.messages{flex:1;min-height:0;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:8px}

.bubbleRow{display:flex;width:100%}
.bubbleRow.in{justify-content:flex-start}
.bubbleRow.out{justify-content:flex-end}
.bubbleRow.out>div{display:flex;flex-direction:column;align-items:flex-end}
.bubble{max-width:74%;padding:10px 13px;border-radius:16px;border:1px solid var(--border);white-space:pre-wrap;word-wrap:break-word;line-height:1.45}
.bubble.in{background:var(--bubble-in);border-bottom-left-radius:6px}
.bubble.out{background:var(--bubble-out);color:#fff;border-color:transparent;border-bottom-right-radius:6px}
.bubbleMedia{margin-top:6px;display:flex;flex-direction:column;gap:8px}
.bubbleMedia .mediaBox{width:240px;height:240px;max-width:100%;border-radius:12px;border:1px solid var(--border);overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.bubbleMedia .mediaBox img,.bubbleMedia .mediaBox video{width:100%;height:100%;object-fit:contain;display:block}
.bubbleMedia .mediaBox audio{width:100%}
.bubbleMeta{font-size:11.5px;color:var(--faint);margin-top:6px}

.composer{padding:14px 16px;border-top:1px solid var(--border)}
.incomingBar{margin:12px 16px 0;padding:12px 14px;border-radius:14px;border:1px solid var(--accent-line);background:var(--accent-soft);display:flex;align-items:center;justify-content:space-between;gap:12px}

/* right panel */
.rightPanel{padding:14px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.notes{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow:auto}
.noteItem{padding:11px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2)}

.inboxEditHeader{position:sticky;top:0;z-index:5;margin:-18px -18px 0;padding:14px 18px 12px;background:var(--surface-1);border-bottom:1px solid var(--border)}

.tip{position:relative;display:inline-flex;align-items:center;margin-left:6px}
.tipIcon{cursor:help;user-select:none}
.tipContent{display:none;position:absolute;left:0;top:calc(100% + 8px);min-width:240px;max-width:320px;padding:10px 12px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);box-shadow:var(--shadow);z-index:20001;line-height:1.4}
.tip:hover .tipContent{display:block}

/* ============================================================
   DIALPAD
   ============================================================ */
.dial{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.key{
  padding:15px 0;border-radius:12px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);font-size:17px;font-weight:600;cursor:pointer;
  transition:background .12s ease,transform .05s ease;font-variant-numeric:tabular-nums;
}
.key:hover{background:var(--surface-hover)}
.key:active{transform:translateY(1px)}

/* ============================================================
   VOICE — call bar + incoming modal
   ============================================================ */
.callBar{
  position:fixed;right:16px;top:88px;z-index:9999;
  display:flex;flex-direction:column;gap:12px;width:min(380px,calc(100vw - 32px));
  padding:16px;border-radius:18px;border:1px solid var(--accent-line);
  background:var(--surface-1);box-shadow:var(--shadow);
}
.callTitle{font-weight:800;letter-spacing:-.01em}

.incomingModal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.incomingCard{width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;border-radius:20px;border:1px solid var(--border-strong);color:var(--text);background:var(--surface-1);box-shadow:var(--shadow);padding:20px}
.incomingCard .small{color:var(--muted)}
.incomingTitle{font-weight:900;font-size:19px;letter-spacing:-.01em}

/* ============================================================
   TOASTS
   ============================================================ */
.toastHost{position:fixed;right:16px;bottom:16px;z-index:20000;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;padding:12px 14px;border-radius:14px;border:1px solid var(--border-strong);box-shadow:var(--shadow);background:var(--surface-1);color:var(--text);animation:toastIn .18s ease-out}
.toast.success{border-color:rgba(67,192,138,.4)}
.toast.error{border-color:rgba(240,97,109,.45)}
.toast.hide{opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
#navHamburger{display:none}
#navOverlay{display:none}
#chatBackBtn{display:none}
@media (max-width:920px){
  #navHamburger{display:inline-flex}
  .appTop{position:sticky;top:0;z-index:12000;flex-wrap:wrap;padding:10px 12px}
  .brand{min-width:0}
  .appTop .brandLogo{width:120px}
  .topActions{flex-wrap:wrap}
  .dashboard{padding:10px;gap:10px}
  .callBar{top:64px}

  /* The sidebar nav lives ONLY in the drawer on mobile — never inline. */
  .dashboard>.nav{display:none}
  html.nav-open,html.nav-open body{overflow:hidden}
  html.nav-open #navOverlay{display:block;position:fixed;inset:0;z-index:15000;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
  html.nav-open .dashboard>.nav{
    display:flex;position:fixed;top:0;left:0;bottom:0;
    width:min(320px,calc(100vw - 48px));z-index:15001;border-radius:0;overflow:auto;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 0 60px rgba(0,0,0,.45);
  }

  /* Comfortable thumb targets in the drawer. */
  .navItem{padding:13px 14px;font-size:15px}
  .navItem svg{width:19px;height:19px}

  /* iOS zooms any focused input under 16px — keep form text at 16px. */
  .input,select.input,textarea.input{font-size:16px}
  .btn{min-height:40px}

  /* Chat back button (inbox drill-down) + roomier composer on phones. */
  #chatBackBtn{display:inline-flex;align-items:center;gap:6px;flex:none}
  .chatHeader{gap:10px}
  .composer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}

  /* Wide content scrolls inside its container, never the page. */
  .card{overflow-x:auto}

  /* List-item headers (workflows, AI calls, numbers): let the title keep its
     width and the action buttons wrap underneath instead of squeezing it. */
  #workflowsList .item>.row,#aiCallsList .item>.row{flex-wrap:wrap;row-gap:8px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}