:root {
  --cream: #f7f3ea;
  --cream-2: #fffdf8;
  --ink: #2c2620;
  --ink-soft: #6b6256;
  --faint: #a99f8f;
  --gold: #b8893b;
  --gold-deep: #8a6422;
  --gold-soft: #e8d9b8;
  --line: #e6ddca;
  --green: #2f8a52;
  --red: #c0492f;
  --shadow: 0 1px 3px rgba(60,48,28,.07), 0 6px 24px rgba(60,48,28,.06);
  --r: 14px;
  --sb-w: 256px;
  /* Dark "Ryze-style" sidebar */
  --sb-bg-top: #24201a;
  --sb-bg-mid: #1b1813;
  --sb-bg-bot: #100e0b;
  --sb-text: rgba(245,239,226,.66);
  --sb-text-strong: #f6f1e6;
  --sb-faint: rgba(245,239,226,.34);
  --sb-line: rgba(245,239,226,.08);
  --sb-hover: rgba(245,239,226,.07);
  --gold-bright: #e3a64c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(1200px 500px at 80% -10%, #fdf6e6 0%, transparent 60%),
    var(--cream);
  color: var(--ink);
  min-height: 100vh;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- App shell + sidebar ---------- */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar {
  width: var(--sb-w); flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 12px;
  border-right: 1px solid var(--sb-line);
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(227,166,76,.07) 0%, transparent 42%),
    radial-gradient(100% 60% at 90% 110%, rgba(120,90,40,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--sb-bg-top) 0%, var(--sb-bg-mid) 52%, var(--sb-bg-bot) 100%);
  color: var(--sb-text);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.3);
  z-index: 20;
  transition: width .18s ease, padding .18s ease;
}
.app-content { flex: 1; min-width: 0; }

.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-toggle {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: var(--sb-faint); background: none;
  border: none; border-radius: 8px;
  cursor: pointer; transition: color .15s;
}
.sb-toggle:hover { color: var(--sb-text-strong); }
.sb-toggle svg { transition: transform .18s ease; }

.brand { display: flex; align-items: center; gap: 11px; padding: 4px 4px 2px; min-width: 0; }
.brand-mark {
  font-size: 26px; color: var(--gold-bright);
  line-height: 1; cursor: pointer;
  position: relative; top: -3px;
  user-select: none; transition: opacity .15s, transform .2s;
}
.brand-mark:hover { opacity: .8; transform: scale(1.15); }
.brand-text h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700; font-size: 20px; letter-spacing: .5px;
  color: var(--sb-text-strong); line-height: 1.05;
  white-space: nowrap;
}
.brand-text p {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--sb-faint); margin-top: 3px;
}
.tabs { display: flex; flex-direction: column; flex: 1; }
.nav-group { display: flex; flex-direction: column; }
.nav-group + .nav-group { margin-top: 10px; }

/* Collapsible group header (Ryze-style) */
.nav-head {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--sb-text-strong); background: none; border: none;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-head:hover { background: var(--sb-hover); }
.nav-head-ico { display: flex; align-items: center; justify-content: center; width: 18px; flex-shrink: 0; color: var(--gold-bright); opacity: .9; }
.nav-head-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-head-chev {
  display: flex; align-items: center; justify-content: center;
  color: var(--sb-faint); flex-shrink: 0;
  transition: transform .2s ease;
}
.nav-group.collapsed .nav-head-chev { transform: rotate(-90deg); }

/* Indented items wrapper with collapse animation */
.nav-items {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 13px; margin-left: 8px;
  border-left: 1px solid var(--sb-line);
  max-height: 360px; overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease, margin .22s ease;
}
.nav-group.collapsed .nav-items {
  max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;
}

.tab-assistant { margin-top: auto; margin-bottom: -14px; }
.tab {
  position: relative;
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--sb-text); background: none; border: none;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  transition: all .15s;
}
.tab-ico { display: flex; align-items: center; justify-content: center; width: 18px; flex-shrink: 0; opacity: .85; }
.tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.tab.active { background: rgba(227,166,76,.12); color: var(--gold-bright); font-weight: 600; }
.tab.active .tab-ico { opacity: 1; }
.tab.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--gold-bright);
}
.tab-badge {
  margin-left: auto; flex-shrink: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: 9px; color: #fff;
}
.tab-badge.hide { display: none !important; }
.tab-badge-red { background: #c0492f; }
.tab-badge-amber { background: var(--gold-bright); color: #2a2114; }
/* In the collapsed rail / mobile, shrink badges to a corner dot */
body.sb-collapsed .tab-badge {
  position: absolute; top: 5px; right: 9px; margin: 0;
  min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%;
}

/* Bottom profile row (Ryze-style) */
.sb-profile {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px; padding: 9px 10px; border-radius: 11px;
  border: 1px solid var(--sb-line); background: rgba(245,239,226,.03);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.sb-profile:hover { background: var(--sb-hover); border-color: rgba(245,239,226,.15); }
.sb-avatar {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 17px;
  color: var(--sb-bg-bot);
  background: linear-gradient(135deg, var(--gold-bright), #c98a2f);
}
.sb-profile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-profile-name { font-size: 13px; font-weight: 600; color: var(--sb-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-profile-sub { font-size: 11px; color: var(--sb-faint); white-space: nowrap; }
.sb-profile-chev { display: flex; color: var(--sb-faint); flex-shrink: 0; }

main { max-width: 1080px; margin: 0 auto; padding: 24px; }

/* ---------- Collapsed sidebar (rail) ---------- */
body.sb-collapsed { --sb-w: 64px; }
body.sb-collapsed .sidebar { padding: 14px 9px; }
body.sb-collapsed .sidebar-head { flex-direction: column-reverse; gap: 12px; }
body.sb-collapsed .brand-text { display: none; }
body.sb-collapsed .brand { padding: 0; justify-content: center; }
body.sb-collapsed .tab-label { display: none; }
body.sb-collapsed .nav-head-label,
body.sb-collapsed .nav-head-chev { display: none; }
body.sb-collapsed .nav-head { justify-content: center; padding: 9px 0; }
body.sb-collapsed .tab { justify-content: center; padding: 10px 0; }
/* In the rail, always show item icons (ignore group collapse) */
body.sb-collapsed .nav-items,
body.sb-collapsed .nav-group.collapsed .nav-items {
  max-height: none; opacity: 1; padding-left: 0; margin-left: 0; border-left: none;
}
body.sb-collapsed .nav-group + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sb-line); }
body.sb-collapsed .sb-toggle svg { transform: rotate(180deg); }
body.sb-collapsed .sb-profile { justify-content: center; padding: 8px 0; border-color: transparent; background: none; }
body.sb-collapsed .sb-profile-text,
body.sb-collapsed .sb-profile-chev { display: none; }
.panel.hide { display: none; }
.hide { display: none !important; }

/* ---------- Cards ---------- */
.card {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 18px;
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.card-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600; font-size: 21px; color: var(--ink);
}
.hint { font-size: 12.5px; color: var(--faint); }

/* ---------- Joint order ---------- */
.ch-left { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.joint-toggle {
  align-self: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-2); border: 1px solid var(--line); color: var(--ink-soft);
  cursor: pointer; transition: color .14s, border-color .14s, background .14s;
}
.joint-toggle:hover { color: var(--gold-deep); border-color: var(--gold); }
.joint-toggle.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.ch-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.joint-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); font-size: 11px; }
#o-people { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.person-block { border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: var(--cream); }
.person-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.person-num { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gold-deep); }
.person-del { border: none; background: none; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .12s; }
.person-del:hover { color: var(--red); }
.joint-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-soft); border-radius: 20px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }

/* ---------- Notes app (To-do tab) ---------- */
.notes-open-btn { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.notes-open-btn:hover { color: var(--ink); border-color: var(--gold-soft); background: var(--cream); }
.notes-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(40,32,20,.42); display: flex; align-items: center; justify-content: center; padding: 30px; animation: cmodal-fade .16s ease; }
.notes-overlay.hide { display: none; }
.notes-app { width: 100%; max-width: 880px; height: 82vh; max-height: 700px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px rgba(40,32,20,.32); display: flex; overflow: hidden; }
.notes-side { width: 236px; flex-shrink: 0; background: var(--cream); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.notes-side-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px 16px; }
.notes-side-title { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: var(--ink); }
.notes-new { width: 30px; height: 30px; border-radius: 8px; background: var(--cream-2); border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s, border-color .14s; }
.notes-new:hover { color: var(--gold-deep); border-color: var(--gold-soft); }
.notes-list { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }
.notes-tab { display: flex; align-items: center; gap: 6px; padding: 9px 8px 9px 10px; border-radius: 9px; cursor: pointer; margin-bottom: 2px; transition: background .12s; }
.notes-tab:hover { background: var(--cream-2); }
.notes-tab.active { background: var(--gold-soft); }
.notes-tab-body { flex: 1; min-width: 0; }
.notes-tab-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-tab-prev { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.notes-tab-x { flex-shrink: 0; width: 20px; height: 20px; border: none; background: none; color: var(--faint); font-size: 17px; line-height: 1; cursor: pointer; border-radius: 6px; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.notes-tab:hover .notes-tab-x { opacity: 1; }
.notes-tab-x:hover { background: rgba(192,73,47,.14); color: var(--red); }
.notes-empty { padding: 22px 12px; font-size: 12.5px; line-height: 1.6; color: var(--faint); text-align: center; }
.notes-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.notes-main-head { display: flex; align-items: center; gap: 10px; padding: 15px 14px 6px 20px; }
.note-title-in { flex: 1; min-width: 0; background: none; border: none; outline: none; font-family: 'Cormorant Garamond', serif; font-size: 25px; font-weight: 600; color: var(--ink); }
.note-title-in::placeholder { color: var(--faint); }
.note-title-in:disabled { background: none; }
.notes-x { background: none; border: none; color: var(--faint); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .14s; }
.notes-x:hover { color: var(--ink); }
.note-body { flex: 1; resize: none; background: none; border: none; outline: none; padding: 6px 20px 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.note-body::placeholder { color: var(--faint); }
.notes-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px 12px; border-top: 1px solid var(--line); }
.note-meta { font-size: 11.5px; color: var(--faint); }
.notes-status { font-size: 11.5px; color: var(--green); opacity: 0; transition: opacity .2s; }
.notes-status.show { opacity: 1; }
@media (max-width: 640px) { .notes-side { width: 150px; } .notes-app { height: 88vh; } }

/* ---------- Entry grid ---------- */
.entry-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: 18px;
  align-items: start;
}
@media (max-width: 860px) { .entry-grid { grid-template-columns: 1fr; } }

/* ---------- Fields ---------- */
.fld { display: block; margin-bottom: 15px; }
.fld > span {
  display: block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px;
}
.fld-row { display: flex; gap: 12px; }
.fld-row .fld { flex: 1; }

input[type=text], input[type=tel], input[type=number],
input[type=date], input[type=time], textarea, select {
  width: 100%; font-family: inherit; font-size: 15px;
  color: var(--ink); background: var(--cream);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,137,59,.13);
  background: var(--cream-2);
}
textarea { resize: vertical; }

/* ---------- Segmented control ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg-btn {
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); background: var(--cream);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 14px; cursor: pointer; transition: all .14s;
}
.seg-btn:hover { border-color: var(--gold); color: var(--ink); }
.seg-btn.active {
  background: var(--gold); border-color: var(--gold);
  color: #fff; box-shadow: 0 2px 8px rgba(184,137,59,.25);
}

/* ---------- Item lines ---------- */
.items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.item-line { display: flex; gap: 8px; align-items: center; }
.item-line select { flex: 1; }
.item-line .il-product { flex: 2; }
.item-line .il-variant { flex: 1; min-width: 0; color: var(--gold-deep); }
.item-line .il-qty { width: 72px; flex: none; text-align: center; }

/* ---------- Searchable item picker ---------- */
/* The native <select> stays in the DOM (invisible) as the value source; everything
   here is the visible shell drawn on top of it. */
.ipick { position: relative; min-width: 0; }
.ipick.hide { display: none; }
.item-line .ipick-product { flex: 2; }
.item-line .ipick-var { flex: 1; }
.ipick-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ipick-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: inherit; font-size: 15px; text-align: left;
  color: var(--ink); background: var(--cream);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ipick-trigger:hover { border-color: var(--gold-soft); }
.ipick.open .ipick-trigger {
  border-color: var(--gold); background: var(--cream-2);
  box-shadow: 0 0 0 3px rgba(184,137,59,.13);
}
.ipick-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* NOT .empty — that is the app's own "nothing here" block, and it is 30px-padded. */
.ipick-trigger.ipick-none .ipick-label { color: var(--faint); }
.ipick-var .ipick-label { color: var(--gold-deep); }
.ipick-price { flex: none; font-size: 13px; font-weight: 600; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.ipick-caret { flex: none; color: var(--faint); transition: transform .18s; }
.ipick.open .ipick-caret { transform: rotate(180deg); }

.ipick-menu {
  position: absolute; z-index: 240; top: calc(100% + 6px); left: 0;
  width: 100%; min-width: 252px;
  background: var(--cream-2); border: 1px solid var(--gold-soft);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(60,48,28,.18);
  overflow: hidden; animation: ipick-in .14s ease;
}
.ipick-menu.hide { display: none; }
.ipick-menu.up { top: auto; bottom: calc(100% + 6px); animation-name: ipick-in-up; }
@keyframes ipick-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ipick-in-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.ipick-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--cream);
}
.ipick-search-ico { flex: none; color: var(--faint); }
/* Scoped through .ipick-menu to outrank input[type=text], which would otherwise put a
   full bordered box inside the search bar. */
.ipick-menu .ipick-search {
  flex: 1; min-width: 0; width: 100%; border: none; border-radius: 0; background: none;
  padding: 0; font-family: inherit; font-size: 14px; color: var(--ink);
}
.ipick-menu .ipick-search:focus { outline: none; border: none; box-shadow: none; background: none; }
.ipick-menu .ipick-search::placeholder { color: var(--faint); }
.ipick-list { max-height: 268px; overflow-y: auto; padding: 5px; }
.ipick-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: none; border-radius: 9px; background: none;
  font-family: inherit; font-size: 14px; color: var(--ink);
  text-align: left; cursor: pointer;
}
.ipick-opt:hover, .ipick-opt.active { background: var(--cream); }
.ipick-opt.sel { background: var(--gold-soft); }
.ipick-opt-main { flex: 1; min-width: 0; }
.ipick-opt-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipick-opt-name mark { background: rgba(184,137,59,.26); color: inherit; border-radius: 3px; padding: 0 1px; }
.ipick-opt-meta { display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.ipick-opt-price { flex: none; font-size: 13px; font-weight: 600; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.ipick-empty { padding: 18px 12px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--faint); }
.ipick-list::-webkit-scrollbar { width: 6px; }
.ipick-list::-webkit-scrollbar-track { background: transparent; }
.ipick-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

@media (max-width: 560px) {
  .item-line { flex-wrap: wrap; }
  .item-line .ipick-product { flex: 1 1 100%; }
  .ipick-menu { min-width: 0; }
}
.il-del {
  flex: none; width: 34px; height: 41px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--cream);
  color: var(--faint); font-size: 18px; cursor: pointer; line-height: 1;
}
.il-del:hover { border-color: var(--red); color: var(--red); }

.ghost-btn {
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--gold-deep); background: none;
  border: 1px dashed var(--gold-soft); border-radius: 9px;
  padding: 9px 14px; cursor: pointer; transition: all .14s;
}
.ghost-btn:hover { border-color: var(--gold); background: var(--cream); }
.ghost-btn.wide { width: 100%; margin-top: 8px; }

/* ---------- Ticket ---------- */
.ticket-card { position: sticky; top: 90px; }
.ticket {
  background: #fffefb;
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
  padding: 18px;
  font-family: 'JetBrains Mono', monospace;
  position: relative;
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background-image: radial-gradient(circle at 6px 0, transparent 5px, #fffefb 5px);
  background-size: 14px 8px; background-repeat: repeat-x;
}
.ticket::before { top: -7px; transform: rotate(180deg); }
.ticket::after { bottom: -7px; }
.ticket-top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px dashed var(--gold-soft);
}
.ticket-logo { font-size: 10.5px; letter-spacing: 1px; color: var(--gold-deep); font-weight: 600; }
.ticket-id { font-size: 10.5px; color: var(--faint); }
.ticket-who { padding: 12px 0 4px; }
.ticket-who strong { display: block; font-size: 15px; font-family: 'Inter', sans-serif; color: var(--ink); }
.ticket-who span { font-size: 12px; color: var(--ink-soft); }
.ticket-where {
  font-size: 11.5px; color: var(--ink-soft); line-height: 1.45;
  padding-bottom: 12px; border-bottom: 1px dashed var(--gold-soft);
  font-family: 'Inter', sans-serif;
}
.ticket-lines { padding: 12px 0; display: flex; flex-direction: column; gap: 7px; min-height: 40px; }
.t-line { display: flex; justify-content: space-between; font-size: 13px; }
.t-line .ln-name { color: var(--ink); }
.t-line .ln-amt { color: var(--ink-soft); }
.t-empty { font-size: 12px; color: var(--faint); font-family: 'Inter', sans-serif; }
.ticket-totals { padding-top: 12px; border-top: 1px dashed var(--gold-soft); display: flex; flex-direction: column; gap: 6px; }
.t-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); }
.t-row.grand { font-size: 16px; font-weight: 700; color: var(--ink); padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--gold-soft); }
.t-row.profit { color: var(--green); font-size: 12px; }
.gift-row { color: var(--green); font-weight: 600; padding-top: 6px; border-top: 1px dashed var(--gold-soft); }
.gift-row select { font-family: inherit; font-size: 12px; font-weight: 500; color: var(--green); background: transparent; border: 1px solid var(--green); border-radius: 6px; padding: 3px 6px; cursor: pointer; }
.gift-picks { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.gift-pick-row { display: flex; align-items: center; gap: 4px; }
.gift-pick { min-width: 158px; }
.gift-del { border: none; background: none; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; transition: color .12s; }
.gift-del:hover { color: var(--red); }
.gift-add { width: 24px; height: 24px; flex: none; border-radius: 6px; border: 1px solid var(--green); background: transparent; color: var(--green); font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.gift-add:hover { background: var(--green); color: #fff; }

.sf-amt-wrap { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.sf-edit-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-soft); border: none; padding: 0; cursor: pointer;
  flex: none; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sf-edit-dot:hover { background: var(--gold-deep); transform: scale(1.3); }
.sf-amt-wrap.editing .sf-edit-dot { background: var(--gold-deep); box-shadow: 0 0 0 3px rgba(184, 148, 88, 0.18); }
.sf-edit-input {
  width: 0; opacity: 0; padding: 0; margin: 0; border: none; border-bottom: 1px solid var(--gold-deep);
  background: transparent; color: var(--ink); font-size: 13px; text-align: right;
  font-family: inherit; pointer-events: none;
  transition: width 0.22s cubic-bezier(.4,0,.2,1), opacity 0.18s ease;
}
.sf-amt-wrap.editing .sf-edit-input { width: 56px; opacity: 1; pointer-events: auto; }
.sf-amt-wrap.editing #t-sf { display: none; }
.sf-amt-wrap:not(.editing) .sf-edit-input { display: none; }

.ticket-note {
  margin-top: 10px; font-size: 11.5px; color: var(--gold-deep);
  font-family: 'Inter', sans-serif; min-height: 0;
}
.ticket-note:empty { display: none; }

.save-btn {
  width: 100%; margin-top: 14px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--ink);
  border: none; border-radius: 11px; padding: 13px; cursor: pointer;
  transition: all .15s;
}
.save-btn:hover { background: #1c1812; }
.save-btn:active { transform: translateY(1px); }
.save-btn.small { width: auto; padding: 11px 20px; font-size: 14px; }

/* ---------- Toolbar / filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.search { flex: 1; min-width: 200px; }
.toolbar select {
  width: auto;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6256' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ---------- Stat strip ---------- */
.strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.stat {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px;
}
.stat .s-label { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); }
.stat .s-val { font-size: 21px; font-weight: 700; color: var(--ink); margin-top: 3px; font-family: 'Inter', sans-serif; }
.stat .s-val.pos { color: var(--green); }
.stat .s-val.neg { color: var(--red); }

/* ---------- Rows ---------- */
.rows { display: flex; flex-direction: column; gap: 9px; }
/* The ledger lists grow by one row per sale forever — cap them so the card keeps its
   size and the history scrolls inside instead. Padding-right keeps the scrollbar off
   the row action buttons. */
#cash-list, #pay-list { max-height: 320px; overflow-y: auto; padding-right: 6px; }
#o-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 9px;
  max-height: 548px;
  overflow-y: auto;
  padding-right: 4px;
}
#o-list::-webkit-scrollbar { width: 5px; }
#o-list::-webkit-scrollbar-track { background: transparent; }
#o-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.listrow {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px;
}
.listrow .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.listrow .name { font-weight: 600; font-size: 15px; color: var(--ink); }
.listrow .meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.listrow .meta.mono { font-family: 'Inter', sans-serif; }
.listrow .name { cursor: pointer; }
.prow-actions { display: flex; align-items: center; gap: 9px; flex: none; }
.row-edit-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-soft); border: none; padding: 0; cursor: pointer;
  flex: none; transition: transform 0.15s ease, background 0.15s ease;
}
.row-edit-dot:hover { background: var(--gold-deep); transform: scale(1.3); }
.row-add-dot {
  width: 20px; height: 20px; border-radius: 6px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; font-weight: 600;
  color: var(--gold-deep); background: var(--cream-2); border: 1px solid var(--line);
  cursor: pointer; flex: none; transition: background .12s, border-color .12s, transform .12s;
}
.row-add-dot:hover { background: var(--gold-soft); border-color: var(--gold-soft); transform: scale(1.08); }
.p-subs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.p-subs.has-subs { margin-top: 10px; }
.p-sub {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 500; color: var(--ink);
  background: var(--gold-soft); border-radius: 20px; padding: 3px 5px 3px 11px;
}
.p-sub-del {
  border: none; background: none; color: var(--ink-soft); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 3px; border-radius: 50%;
}
.p-sub-del:hover { color: var(--red); }
.p-sub-form { display: inline-flex; gap: 6px; align-items: center; }
.p-sub-input { padding: 5px 9px; font-size: 12px; width: 150px; }
.p-sub-save {
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--cream-2);
  background: var(--ink); border: none; border-radius: 7px; padding: 6px 13px; cursor: pointer;
}
.p-sub-save:hover { background: #1c1812; }
.listrow.editing { border-color: var(--gold-deep); }
.p-edit-name {
  width: 100%; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink);
  border: none; border-bottom: 1px solid var(--gold-deep); background: transparent; padding: 0 0 1px;
}
.p-edit-price {
  width: 70px; font: inherit; font-size: 12.5px; color: var(--ink-soft);
  border: none; border-bottom: 1px solid var(--gold-deep); background: transparent; padding: 0 0 1px;
}
.pos { color: var(--green); font-weight: 600; }
.neg { color: var(--red); font-weight: 600; }

.badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase;
}
.b-confirmed { background: #ede3cd; color: var(--gold-deep); }
.b-out { background: #d8e9f5; color: #2b6a93; }
.b-delivered { background: #d9efe0; color: var(--green); }
.b-cancelled { background: #f2dcd6; color: var(--red); }
.b-birthday { background: var(--gold-soft); color: var(--gold-deep); }
.b-dispatch { background: #d8e9f5; color: #2b6a93; text-transform: none; letter-spacing: 0; }

/* ---- dispatch scheduler (Reminders) ---- */
.sched-box { display: flex; flex-direction: column; gap: 12px; }
.sched-order {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--cream); color: var(--ink); font-size: 14px; font-family: inherit;
}
.sched-pick { display: flex; gap: 10px; align-items: stretch; }
.sched-pick .sched-order { flex: 1; }
.sched-pick .sched-go { align-self: stretch; white-space: nowrap; }
.sched-modal-box { width: min(440px, 94vw); }
.sched-modal-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 2px; }
.sched-modal-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.sched-note-row { display: flex; flex-direction: column; gap: 6px; }
.sched-note {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--cream); color: var(--ink); font-size: 13px; font-family: inherit; resize: vertical; line-height: 1.4;
}
.rm-sched-note-txt { color: var(--gold-deep); font-style: italic; margin-top: 4px; }
.sched-time-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sched-time-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.sched-time-label .opt { font-weight: 400; color: var(--faint); }
.sched-time {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--cream); color: var(--ink); font-size: 13px; font-family: inherit;
}
.sched-time-clear {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--cream);
  color: var(--faint); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.sched-time-clear:hover { border-color: var(--red); color: var(--red); }
.sched-when { display: flex; gap: 8px; flex-wrap: wrap; }
.when-btn {
  flex: 1; min-width: 92px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--cream); color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.when-btn:hover { border-color: var(--gold); }
.when-btn.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.sched-days { border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: var(--cream-2); }
.sched-days-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 9px; text-align: center; }
.sched-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day-cell {
  aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 8px; background: var(--cream);
  color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s;
}
.day-cell:hover:not(:disabled) { border-color: var(--gold); }
.day-cell.today { border-color: var(--gold); color: var(--gold-deep); }
.day-cell.sel { background: var(--gold); color: #fff; border-color: var(--gold); }
.day-cell.past, .day-cell:disabled { opacity: .32; cursor: default; }
.sched-go {
  align-self: flex-end; padding: 10px 22px; border: none; border-radius: 11px;
  background: var(--gold); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.sched-go:hover { background: var(--gold-deep); }
/* card grids for the dispatch pipeline — mirrors the Orders list look */
.rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: start; margin-top: 6px; }
@media (max-width: 620px) { .rm-grid { grid-template-columns: 1fr; } }
.rm-grid .empty { grid-column: 1 / -1; }
.date-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 16px 2px 4px; }
.date-divider:first-child { margin-top: 6px; }
.date-divider::before, .date-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.date-divider span { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }
.rm-sub-label { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; color: var(--faint); text-transform: uppercase; margin: 18px 0 4px; }
.rm-sub-label.rm-sub-sched { margin-top: 22px; }
.rm-card .rm-row-actions { margin-top: 10px; }
.rm-del-scroll { max-height: 300px; overflow-y: auto; padding-right: 4px; }
/* small horizontal line separating the scheduled section from out-for-delivery */
.rm-flow-divider { width: 64px; height: 3px; border-radius: 3px; background: var(--gold-soft); margin: 30px auto 26px; }
/* bigger, more prominent "Out for delivery" section */
.rm-out-card .card-head h2 { font-size: 20px; }
.rm-out-grid { max-height: 640px; gap: 12px; }
.rm-out-grid .rm-card { padding: 17px 18px; }
.rm-out-grid .rm-card .name { font-size: 16px; }
.rm-out-grid .rm-card .meta { font-size: 13px; }
.rm-del-scroll::-webkit-scrollbar { width: 5px; }
.rm-del-scroll::-webkit-scrollbar-track { background: transparent; }
.rm-del-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.rm-del-row { padding-top: 9px; padding-bottom: 9px; position: relative; }
.sched-list { margin-top: 14px; }
.rm-disp-when { color: var(--faint); font-size: 11.5px; margin-top: 3px; }
.rm-row-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.rm-act {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--cream);
  color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.rm-markout { border-color: var(--gold); color: var(--gold-deep); }
.rm-markout:hover { background: var(--gold); color: #fff; }
.rm-delivered { border-color: var(--green); color: var(--green); }
.rm-delivered:hover { background: var(--green); color: #fff; }
.rm-unsched { padding: 6px 10px; color: var(--faint); }
.rm-unsched:hover { border-color: var(--red); color: var(--red); }
body.dark:not(.ai-active) .b-dispatch { background: rgba(43,106,147,.22); color: #6eb5e0; }

.del {
  border: none; background: none; color: var(--faint);
  font-size: 19px; cursor: pointer; line-height: 1; padding: 0 4px;
}
.del:hover { color: var(--red); }

.row-actions { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.mini-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  color: var(--ink-soft); background: var(--cream-2);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 9px; cursor: pointer; transition: all .13s;
}
.mini-btn:hover { border-color: var(--gold); color: var(--ink); }
.mini-btn.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.pay-wrap { position: relative; display: inline-flex; }
.pay-btn { color: var(--gold-deep); background: var(--gold-soft); border-color: var(--gold-soft); }
.pay-btn:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.pay-select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; cursor: pointer;
}
.qval-edit { cursor: pointer; border-radius: 6px; padding: 0 3px; transition: background .12s; }
.qval-edit:hover { background: var(--gold-soft); color: var(--gold-deep); }
.qval-in {
  width: 66px; padding: 2px 6px; border: 1px solid var(--gold); border-radius: 7px;
  background: var(--cream); color: var(--ink); font-family: inherit; font-size: inherit; text-align: center;
}
.pay-btn.paid { color: var(--green); background: #d9efe0; border-color: #d9efe0; }
.pay-btn.paid:hover { border-color: var(--green); color: var(--green); }
.pay-confirm {
  width: 15px; height: 15px; flex: 0 0 auto; padding: 0; margin-left: 2px;
  border-radius: 50%; border: 1.6px solid var(--green); background: transparent;
  cursor: pointer; transition: background .14s, box-shadow .14s;
}
.pay-confirm:hover { background: rgba(45,138,79,.18); }
.pay-confirm.on { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 2px rgba(45,138,79,.18); }
body.dark:not(.ai-active) .pay-btn.paid { background: rgba(45,138,79,.22); color: #6fce97; border-color: transparent; }

.empty { text-align: center; color: var(--faint); padding: 30px 10px; font-size: 13.5px; }

/* ---------- Ledger (advances & losses) ---------- */
.ledger-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; align-items: center; }
.ledger-form select, .ledger-form input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--ink); font-family: inherit; font-size: 13.5px; }
.ledger-form .grow { flex: 1; min-width: 130px; }
.ledger-form input[type=number] { width: 120px; }
.ledger-form input.date-mask { width: 130px; }
.adv-person .adv-bal { font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 20px; white-space: nowrap; }
.adv-bal.owes { background: #f2dcd6; color: var(--red); }
.adv-bal.credit { background: #d9efe0; color: var(--green); }
.adv-bal.settled { background: var(--gold-soft); color: var(--gold-deep); }
.adv-entries { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.adv-entry { display: grid; grid-template-columns: 82px 90px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
.adv-e-kind { font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.adv-k-advance { color: var(--red); }
.adv-k-repayment { color: var(--green); }
.adv-k-salary { color: var(--gold-deep); }
.adv-e-amt { font-weight: 600; color: var(--ink); }
.adv-e-meta { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-e-del { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.adv-e-del:hover { color: var(--red); }
.loss-reason { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: middle; }
.loss-r-delivery { background: #d8e9f5; color: #2b6a93; }
.loss-r-order { background: var(--gold-soft); color: var(--gold-deep); }
.loss-r-other { background: var(--cream-2); color: var(--ink-soft); }
.s-stat-after strong { color: var(--gold-deep); }

/* ---------- Cash box ---------- */
.cash-balance { display: flex; flex-direction: column; gap: 2px; background: var(--gold); border-radius: 14px; padding: 18px 22px; margin-bottom: 14px; }
.cash-bal-l { font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: #f3e4c8; }
.cash-bal-v { font-size: 32px; font-weight: 800; color: #fffdf8; }
.cash-bal-v.neg { color: #ffd7cf; }

/* ---------- Cash Balance (non-cash methods) ---------- */
.pay-balances { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pay-bal {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 9px 14px; border-radius: 12px; cursor: pointer;
  background: var(--cream-2); border: 1px solid var(--line);
  transition: border-color .14s, background .14s;
}
.pay-bal:hover { border-color: var(--gold); }
.pay-bal.cur { background: var(--gold-soft); border-color: var(--gold); }
.pay-bal-m { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); }
.pay-bal-v { font-size: 17px; font-weight: 700; color: var(--ink); }
.pay-bal-v.neg { color: var(--red, #c0533f); }
.pay-bal-wait { font-size: 10.5px; font-weight: 700; color: var(--gold-deep); background: var(--gold-soft); border-radius: 999px; padding: 1px 8px; margin-top: 3px; }
.cash-add { margin-top: 8px; }
.cash-dir { display: inline-flex; margin-bottom: 4px; }
.cash-recon { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.cash-recon-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--cream-2); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.cash-recon-lbl { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.cash-recon-box input { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--cream); color: var(--ink); font-family: inherit; font-size: 13.5px; width: 120px; }
.cash-row .cash-amt { font-weight: 700; }
.cash-amt.cash-in { color: var(--green); }
.cash-amt.cash-out { color: var(--red); }
.cash-cat { color: var(--ink-soft); font-weight: 500; margin-left: 6px; }
.cash-run { color: var(--gold-deep); font-weight: 600; }
.cash-sale-pick { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cash-sale-lbl { font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.cash-sale-btn { padding: 9px 15px; border: 1px solid var(--gold); border-radius: 10px; background: var(--cream); color: var(--gold-deep); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .12s, box-shadow .12s; }
.cash-sale-btn:hover { background: var(--gold-soft); box-shadow: 0 2px 8px var(--shadow); }
.cash-sale-chosen { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 999px; font-size: 13px; color: var(--ink); }
.cash-sale-clear { border: none; background: transparent; color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.cash-sale-clear:hover { color: var(--red); }

/* cash-sale picker popup — Orders-tab style card grid */
.onote-box.cash-sale-modal-box { max-width: 820px; width: 94vw; }
.cash-sale-modal-sub { font-size: 13px; color: var(--ink-soft); margin: 2px 2px 14px; }
.cash-sale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.cs-card { position: relative; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--cream); transition: border-color .12s, box-shadow .12s, transform .06s; }
.cs-card:hover { border-color: var(--gold); box-shadow: 0 3px 12px var(--shadow); transform: translateY(-1px); }
.cs-card.sel { border-color: var(--gold-deep); box-shadow: 0 0 0 2px var(--gold-deep) inset; background: var(--gold-soft); }
.cs-check { position: absolute; top: 10px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-deep); color: #fff; font-size: 12px; line-height: 20px; text-align: center; opacity: 0; transform: scale(.5); transition: opacity .12s, transform .12s; }
.cs-card.sel .cs-check { opacity: 1; transform: scale(1); }
.cs-card.sel .cs-pay { display: none; }
.cs-pay { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cs-pay.pm-cash { background: rgba(45, 138, 78, .14); color: var(--green); }
.cs-pay.pm-cashr { background: var(--gold-soft); color: var(--gold-deep); }
/* Money already in hand on an order that hasn't shipped — worth logging, worth
   flagging, so it isn't mistaken for a completed sale. */
.cs-pay.cs-pending { background: rgba(184, 148, 88, .14); color: var(--faint); font-weight: 600; }
.cs-when { color: var(--faint); }
.cs-total { position: absolute; right: 14px; bottom: 12px; font-weight: 700; color: var(--gold-deep); font-size: 15px; }
.cash-sale-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; }
.cash-sale-count { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 560px) { .cash-sale-grid { grid-template-columns: 1fr; } }

/* cash-row edit affordance + edit popup */
.cash-row-actions { display: inline-flex; align-items: center; gap: 8px; }
.cash-edit-btn { border: 1px solid var(--line); background: var(--cream); color: var(--gold-deep); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s; }
.cash-edit-btn:hover { background: var(--gold-soft); border-color: var(--gold); }
.onote-box.cash-edit-box { max-width: 420px; width: 92vw; }
.cash-edit-body { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 2px; }
.cash-edit-lbl { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.cash-edit-lbl input, .cash-edit-lbl select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--ink); font-family: inherit; font-size: 14px; }
.cash-edit-lbl input:focus, .cash-edit-lbl select:focus { outline: none; border-color: var(--gold); }
#cash-edit-dir { align-self: flex-start; }

/* ---------- Day ---------- */
.day-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.day-controls input { width: auto; }
.day-summary {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 11px; padding: 14px 16px; margin-bottom: 14px;
  font-size: 14px; color: var(--ink-soft);
}
.day-summary strong { color: var(--ink); }

/* ---------- Products ---------- */
.prod-form { display: flex; gap: 10px; align-items: center; }
.prod-form .grow { flex: 1; min-width: 0; }
.prod-form input[type=number] { width: 90px; flex-shrink: 0; }
.prod-form .save-btn.small { flex-shrink: 0; margin-top: 0; }
#p-list { margin-top: 24px; max-height: 608px; overflow-y: auto; padding-right: 4px; }

/* ---------- Materials / Stock ---------- */
.mat-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mat-form .grow { flex: 1 1 180px; min-width: 150px; }
.mat-form select { flex: 0 0 auto; width: 120px; }
.mat-form input[type=number] { width: 84px; flex-shrink: 0; }
.mat-form .m-unit-in { width: 80px; flex-shrink: 0; }
.mat-form .save-btn.small { flex-shrink: 0; margin-top: 0; }
.mat-cats { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.mat-cat-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  font-family: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 10px; padding: 2px 0;
}
.mat-cat-head:hover { color: var(--gold); }
.mat-cat-chev { display: flex; transition: transform .18s ease; }
.mat-cat.collapsed .mat-cat-chev { transform: rotate(-90deg); }
.mat-cat.collapsed .rows { display: none; }
.mat-cat.collapsed .mat-cat-head { margin-bottom: 0; }
.mat-cat-count {
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--gold-soft); border-radius: 20px; padding: 1px 9px;
}
.mat-cat.collapsed { margin-bottom: 0; }
/* price chip on each material row */
.mat-price {
  background: none; border: 1px dashed var(--line); border-radius: 7px;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  padding: 2px 8px; cursor: pointer; line-height: 1.5; white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
.mat-price:hover { border-color: var(--gold); color: var(--gold-deep); }
.mat-price-val { color: var(--gold-deep); }
.mat-price-u { color: var(--faint); font-weight: 500; margin-left: 1px; }
.mat-price-add { color: var(--faint); font-weight: 500; }
.mat-price-in {
  width: 72px; border: none; outline: none; background: none;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink);
  text-align: right;
}
.liq-uses-inline { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.mat-subgroup:first-child .mat-subhead { margin-top: 2px; }
.mat-subhead {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer; font-family: inherit;
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-soft); margin: 14px 0 7px; padding: 1px 0;
}
.mat-subhead:hover { color: var(--ink); }
.mat-subchev { display: flex; transition: transform .18s ease; }
.mat-subgroup.collapsed .mat-subchev { transform: rotate(-90deg); }
.mat-subgroup.collapsed .sub-rows { display: none; }
.mat-subgroup.collapsed .mat-subhead { margin-bottom: 0; }
.mat-subcount { font-size: 10px; font-weight: 600; color: var(--faint); background: var(--line); border-radius: 20px; padding: 1px 7px; }
.qty-stepper .liq-amt {
  width: 62px; height: 28px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--cream-2); color: var(--ink); font-size: 13px; padding: 0 8px; outline: none;
}
.qty-stepper .liq-amt:focus { border-color: var(--gold); }
.qty-stepper { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.qstep {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--cream-2); color: var(--ink); font-size: 17px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, transform .08s;
}
.qstep:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.qstep:active { transform: translateY(1px); }
.qval { min-width: 64px; text-align: center; font-size: 14px; font-weight: 600; }
.qthresh { font-size: 11px; color: var(--faint); margin-left: 4px; }
.low-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #fff; background: var(--red); border-radius: 20px; padding: 2px 9px; margin-right: 8px;
}
.mat-row.low { border-color: rgba(192,73,47,.35); background: rgba(192,73,47,.045); }
.mat-row { position: relative; }
.mat-row.flagged { background: rgba(233,196,80,.01); border-color: rgba(233,196,80,.18); }
.mat-row.flagged.low { background: rgba(233,196,80,.01); }
.oil-flag {
  position: absolute; right: 8px; bottom: 4px; z-index: 2;
  width: 22px; height: 22px; padding: 0; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
}
.oil-flag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--gold); background: transparent;
  transition: background .13s, transform .13s, border-color .13s;
}
.oil-flag:hover::before { transform: scale(1.4); border-color: var(--gold-deep); }
.oil-flag.on::before { background: var(--gold); border-color: var(--gold-deep); }

/* Oils header: map button next to the count */
.mat-cat-headrow { display: flex; align-items: center; gap: 6px; }
.mat-cat-headrow .mat-cat-head { width: auto; margin-bottom: 10px; }
.mat-cat.collapsed .mat-cat-headrow .mat-cat-head { margin-bottom: 0; }
.oil-map-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--cream-2); color: var(--ink-soft); cursor: pointer;
  transition: color .12s, border-color .12s; margin-bottom: 8px;
}
.oil-map-btn:hover { color: var(--gold-deep); border-color: var(--gold); }
.mat-cat.collapsed .oil-map-btn { margin-bottom: 0; }

/* perfume-oil map popup */
.oil-map-box { max-width: 440px; }
.omap-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 12px; }
.omap-hint { font-size: 12px; color: var(--faint); }
.omap-progress { flex: none; font-size: 11px; font-weight: 700; color: var(--gold-deep); background: var(--gold-soft); border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
.oil-map-body { max-height: 60vh; overflow-y: auto; padding-right: 3px; }
.omap-sign { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.omap-sign:last-child { border-bottom: none; }
.omap-sign-name { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.omap-vars { display: flex; flex-direction: column; gap: 6px; }
.omap-row { display: flex; align-items: center; gap: 8px; }
.omap-g { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 10.5px; font-weight: 700; }
.omap-g.f { color: #b5546e; background: rgba(197,92,120,.14); }
.omap-g.m { color: #4f6d99; background: rgba(83,115,163,.16); }
.omap-g.o { color: var(--ink-soft); background: var(--line); }
.omap-in { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; padding: 6px 9px; outline: none; transition: border-color .12s, background .12s; }
.omap-in::placeholder { color: var(--faint); }
.omap-in:focus { border-color: var(--gold); }
.omap-row.filled .omap-in { border-color: var(--gold-soft); background: rgba(233,196,80,.06); }

/* settings — activity log */
.log-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.log-toolbar input { flex: 1; min-width: 0; }
.log-count { flex: none; font-size: 11px; font-weight: 700; color: var(--gold-deep); background: var(--gold-soft); border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
.log-list { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--cream); padding: 4px 12px; }
.log-day {
  position: sticky; top: 0; z-index: 1;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--cream);
  padding: 8px 0 5px; border-bottom: 1px solid var(--line);
}
.log-row { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.log-row:last-child { border-bottom: none; }
.log-time { flex: none; width: 82px; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.log-msg { flex: 1; font-size: 12.5px; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.log-more { text-align: center; font-size: 11.5px; color: var(--faint); padding: 8px 0; }

/* Materials add-form: liquid toggle + swappable field groups */
.m-liquid-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; user-select: none;
}
.m-liquid-toggle input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
.mat-solid-fields, .mat-liquid-fields { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mat-solid-fields input[type=number], .mat-liquid-fields input[type=number] { width: 108px; flex-shrink: 0; }
.mat-solid-fields .m-unit-in { width: 80px; }

/* Liquids list */
.mat-liquids { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.liq-card { background: var(--cream-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.liq-card.low { border-color: rgba(192,73,47,.4); background: rgba(192,73,47,.04); }
.liq-cat { font-size: 11px; font-weight: 600; color: var(--gold-deep); background: var(--gold-soft); border-radius: 20px; padding: 1px 8px; margin-left: 6px; }
.liq-stat { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.liq-ml { font-size: 22px; font-weight: 700; color: var(--ink); }
.liq-uses { font-size: 14px; font-weight: 600; color: var(--gold-deep); }
.liq-per { font-size: 12px; color: var(--faint); }
.liq-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.liq-use {
  font-family: inherit; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--gold); border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer;
  transition: background .12s, transform .08s;
}
.liq-use:hover { background: var(--gold-deep); }
.liq-use:active { transform: translateY(1px); }
.liq-custom { display: inline-flex; align-items: center; gap: 6px; }
.liq-amt { width: 84px; }

/* ---------- Expenses ---------- */
.exp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.exp-form .grow { flex: 1 1 200px; min-width: 160px; }
.exp-form input[type=number] { width: 130px; flex-shrink: 0; }
.exp-form .eo-date-in { width: 150px; flex-shrink: 0; }
.exp-form .save-btn.small { flex-shrink: 0; margin-top: 0; }
#er-list, #eo-list { margin-top: 18px; }
.exp-amt { font-size: 14px; font-weight: 600; color: var(--ink); margin-right: 8px; }
.exp-per { font-size: 11px; font-weight: 500; color: var(--faint); margin-left: 1px; }
.exp-form .exp-vat-in { width: 90px; }
.exp-form .exp-qty-in { width: 70px; }
.eo-liquid-toggle { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--faint); cursor: pointer; user-select: none; opacity: .7; transition: opacity .12s, color .12s; }
.eo-liquid-toggle:hover { opacity: 1; color: var(--ink-soft); }
.eo-liquid-toggle input { width: 12px; height: 12px; accent-color: var(--gold); cursor: pointer; margin: 0; }
/* edit button + inline edit form */
.exp-edit { background: none; border: none; color: var(--faint); cursor: pointer; padding: 2px 4px; display: inline-flex; align-items: center; transition: color .12s; }
.exp-edit:hover { color: var(--gold-deep); }
.exp-edit-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.exp-edit-form input[type=text], .exp-edit-form input[type=number], .exp-edit-form input:not([type]) {
  border: 1px solid var(--line); border-radius: 8px; background: var(--cream-2); color: var(--ink);
  font-family: inherit; font-size: 13px; padding: 7px 9px; outline: none;
}
.exp-edit-form input:focus { border-color: var(--gold); }
.exp-edit-form .ee-name { flex: 1 1 150px; min-width: 110px; }
.exp-edit-form .ee-amt, .exp-edit-form .ee-vat, .exp-edit-form .ee-qty { width: 82px; flex-shrink: 0; }
.exp-edit-form .ee-date { width: 120px; flex-shrink: 0; }
.exp-edit-form .ee-save { flex-shrink: 0; margin-top: 0; }
.exp-edit-form .ee-cancel { flex-shrink: 0; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); font-family: inherit; font-size: 12.5px; padding: 6px 12px; cursor: pointer; transition: color .12s, border-color .12s; }
.exp-edit-form .ee-cancel:hover { color: var(--ink); border-color: var(--ink-soft); }
.listrow.exp-editing { padding: 10px 0; }
.exp-vat { font-size: 10.5px; font-weight: 600; color: var(--gold-deep); background: var(--gold-soft); border-radius: 20px; padding: 2px 7px; margin-left: 7px; vertical-align: middle; }
.exp-qty { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); background: var(--line); border-radius: 20px; padding: 2px 7px; margin-left: 7px; vertical-align: middle; }
.exp-total {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
  text-align: right; font-size: 13px; color: var(--ink-soft);
}
.exp-total strong { font-size: 16px; color: var(--gold-deep); font-weight: 700; margin-left: 4px; }
.exp-total:empty { display: none; }

/* Free-gift line on order rows */
.gift-meta { color: var(--gold-deep); font-weight: 600; }

/* ---------- To-do list ---------- */
.todo-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.todo-form .grow { flex: 1 1 220px; min-width: 160px; }
.todo-form .td-date-in { width: 90px; flex: none; text-align: center; }
.todo-form .td-time-in { width: 120px; flex: none; }
.todo-form .save-btn.small { flex: none; margin-top: 0; }
#td-list { margin-top: 20px; }
.todo-row.done .todo-text { text-decoration: line-through; color: var(--faint); }
.td-toggle {
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: var(--cream); border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 11px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; white-space: nowrap;
}
.td-toggle:hover { border-color: var(--gold-soft); color: var(--ink); }
.td-toggle.is-done { background: var(--green); color: #fff; border-color: transparent; }
.todo-due { color: var(--ink-soft); }
.todo-due.overdue { color: var(--red); font-weight: 600; }
.todo-due.today { color: var(--gold-deep); font-weight: 600; }

/* ---------- Settings ---------- */
.set-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 15px 4px; border-bottom: 1px solid var(--line);
}
.set-row:last-child { border-bottom: none; }
.set-row-text { display: flex; flex-direction: column; gap: 3px; }
.set-row-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.set-row-sub { font-size: 12.5px; color: var(--ink-soft); }
.set-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; cursor: pointer; }
.set-switch input { opacity: 0; width: 0; height: 0; }
.set-slider {
  position: absolute; inset: 0; border-radius: 24px;
  background: var(--line); transition: background .18s;
}
.set-slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.set-switch input:checked + .set-slider { background: var(--gold-bright); }
.set-switch input:checked + .set-slider::before { transform: translateX(20px); }
.set-btn {
  flex: none; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--gold-deep); background: var(--cream); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 16px; cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.set-btn:hover { background: var(--gold-soft); border-color: var(--gold-deep); }
.set-note { font-size: 12px; color: var(--ink-soft); padding: 12px 4px 2px; line-height: 1.5; }

.set-num { display: flex; align-items: center; gap: 7px; flex: none; }
.set-num input {
  width: 84px; font-family: inherit; font-size: 14px; font-weight: 600; text-align: right;
  color: var(--ink); background: var(--cream); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px;
}
.set-num input:focus { outline: none; border-color: var(--gold-deep); }
.set-num span { font-size: 12px; color: var(--ink-soft); }

/* a settings row whose control needs the full width under its label */
.set-row-stack { display: block; }
.set-row-stack textarea {
  width: 100%; margin-top: 9px; font-size: 14px; line-height: 1.55;
  font-family: inherit; resize: vertical;
}
.bday-preview { margin-top: 4px; }
.bday-preview.hide { display: none; }
.bday-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--cream); margin-top: 7px;
}
.bday-when {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--gold-deep); background: var(--gold-soft); border-radius: 20px; padding: 2px 9px;
}
.bday-name { font-weight: 600; }
.bday-phone { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bday-text {
  flex: 1 1 100%; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
  white-space: pre-wrap; border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 6px;
}
.bday-none { padding: 14px 12px; font-size: 13px; color: var(--faint); text-align: center; }

/* a secondary stat line — present, but not competing with the real figures */
.s-stat-row.s-stat-muted { color: var(--faint); }
.s-stat-row.s-stat-muted strong { font-weight: 500; color: var(--ink-soft); }

.pay-editor { display: flex; flex-direction: column; gap: 8px; }
.pay-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--cream);
}
.pay-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pay-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.pay-mv, .pay-rm {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; cursor: pointer;
  color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 7px;
  transition: background .14s, border-color .14s, color .14s;
}
.pay-mv:hover:not(:disabled), .pay-rm:hover:not(:disabled) { background: var(--gold-soft); border-color: var(--gold-deep); color: var(--gold-deep); }
.pay-rm:hover:not(:disabled) { color: #c0392b; border-color: #c0392b; background: rgba(192,57,43,.08); }
.pay-mv:disabled, .pay-rm:disabled { opacity: .3; cursor: default; }
.pay-add-row { display: flex; gap: 8px; margin-top: 4px; }
.pay-add-row input {
  flex: 1; font-family: inherit; font-size: 14px;
  color: var(--ink); background: var(--cream); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px;
}
.pay-add-row input:focus { outline: none; border-color: var(--gold-deep); }

/* ---------- Tab switch animation ---------- */
.panel:not(.hide):not(#tab-ai):not(#tab-whatsapp) { animation: tabIn .22s ease both; }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Recipes (Misc) ---------- */
.rec-layout { display: flex; gap: 24px; margin-top: 20px; align-items: stretch; min-height: 640px; }
.rec-list { width: 310px; flex: none; min-height: 640px; max-height: 760px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.rec-editor-pane { flex: 1; min-width: 0; border-left: 1px solid var(--line); padding-left: 24px; }
.rec-group { display: flex; flex-direction: column; }
.rec-group-title { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gold-deep); padding: 0 2px 2px; }
.rec-prod-head {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s;
}
.rec-prod-head:hover { border-color: var(--gold-deep); background: var(--gold-soft); }
.rec-group.open .rec-prod-head { border-color: var(--gold-soft); background: var(--gold-soft); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rec-prod-name { font-size: 14px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-prod-meta { font-size: 11px; color: var(--faint); flex: none; }
.rec-prod-chev { display: flex; color: var(--ink-soft); flex: none; transition: transform .18s; }
.rec-group.open .rec-prod-chev { transform: rotate(90deg); }
.rec-group-body { display: flex; flex-direction: column; gap: 5px; padding: 8px 0 6px 10px; }
.rec-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s;
}
.rec-item:hover { border-color: var(--gold-deep); background: var(--gold-soft); }
.rec-item.active { border-color: var(--gold-deep); background: var(--gold-soft); }
.rec-item-sub { margin-left: 16px; }
.rec-item-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rec-item-sum { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-item-sum.muted { color: var(--faint); font-style: italic; }
.rec-editor-head { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; color: var(--gold-deep); margin-bottom: 16px; }
/* add-variant row under each product */
.rec-addvar { display: flex; gap: 6px; margin: 6px 0 2px 16px; }
.rec-newvar { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--cream-2); color: var(--ink); font-family: inherit; font-size: 12.5px; padding: 6px 9px; outline: none; }
.rec-newvar:focus { border-color: var(--gold); }
.rec-addvar-btn { flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--cream-2); color: var(--gold-deep); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; cursor: pointer; transition: background .12s, border-color .12s; }
.rec-addvar-btn:hover { background: var(--gold-soft); border-color: var(--gold); }
/* rename + delete for the selected variant */
.rec-editor-head-var { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-editor-prod { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; color: var(--gold-deep); }
.rec-var-rename { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; color: var(--ink); background: none; border: none; border-bottom: 1.5px dashed var(--line); padding: 1px 2px 2px; outline: none; min-width: 120px; }
.rec-var-rename:focus { border-bottom-color: var(--gold); }
.rec-var-del { margin-left: auto; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--red); font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; cursor: pointer; transition: background .12s, border-color .12s; }
.rec-var-del:hover { background: rgba(192,73,47,.1); border-color: rgba(192,73,47,.4); }
.rec-placeholder { color: var(--faint); padding: 24px 0; }
.rec-lines { display: flex; flex-direction: column; gap: 9px; }
.rec-line { display: flex; align-items: center; gap: 9px; }
.rec-line .rec-mat { flex: 1; min-width: 0; }
.rec-line .rec-amt { width: 110px; flex: none; text-align: center; }
.rec-line .rec-unit { width: 38px; flex: none; font-size: 12px; color: var(--faint); }
@media (max-width: 760px) {
  .rec-layout { flex-direction: column; }
  .rec-list { width: 100%; max-height: none; }
  .rec-editor-pane { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; width: 100%; }
}
/* Recipes moved out of its own tab and into a Settings card. It used to have the whole
   page to grow into; here it gets a fixed window that scrolls as one. The inner list
   drops its own scroller so the two can't fight over the wheel. */
.set-rec-scroll { max-height: 560px; overflow-y: auto; overflow-x: hidden; padding-right: 6px; margin-top: 4px; }
.set-rec-scroll .rec-layout { min-height: 0; margin-top: 12px; align-items: flex-start; }
.set-rec-scroll .rec-list { min-height: 0; max-height: none; overflow-y: visible; }
/* The list is far taller than the window, so pin the editor — otherwise picking a
   variant near the bottom scrolls the thing you just opened out of sight. */
.set-rec-scroll .rec-editor-pane { position: sticky; top: 0; align-self: flex-start; }
.set-rec-scroll::-webkit-scrollbar { width: 5px; }
.set-rec-scroll::-webkit-scrollbar-track { background: transparent; }
.set-rec-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.listrow .p-date-added { font-size: 9px; color: var(--faint); margin-top: 1px; letter-spacing: 0.02em; }
#p-list::-webkit-scrollbar { width: 5px; }
#p-list::-webkit-scrollbar-track { background: transparent; }
#p-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.prod-preview { font-size: 12.5px; color: var(--faint); margin: 10px 0 16px; }

/* ---------- Time filters ---------- */
.time-filters { display: flex; align-items: center; gap: 6px; margin: 10px 0 12px; flex-wrap: wrap; }
.tf-btn {
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-soft); background: var(--cream);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 14px; cursor: pointer; transition: all .15s;
}
.tf-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.tf-btn.active { background: var(--ink); color: var(--cream-2); border-color: var(--ink); }
.tf-arrow { font-size: 11px; margin-left: 3px; }
.tf-from-wrap { position: relative; }
.tf-from-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px;
  box-shadow: 0 8px 30px rgba(60,48,28,.13); z-index: 30;
}
.tf-from-panel.open { display: block; }
.tf-from-right { left: auto; right: 0; }
.tf-from-inner { display: flex; gap: 20px; }
.tf-date-col { display: flex; flex-direction: column; gap: 7px; }
.tf-date-col label { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .5px; }
.tf-date-col input {
  width: 120px; flex: none;
  font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; background: var(--cream); color: var(--ink);
  text-align: center;
}

/* ---------- Backend ---------- */
.backend-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: start; }
.backend-col { display: flex; flex-direction: column; gap: 20px; }
.b-flex-card { display: flex; flex-direction: column; height: 500px; }
#b-emp-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
#b-net-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; margin-top: 4px; }
.b-assign-scroll { flex: 1; min-height: 0; }
#b-emp-list::-webkit-scrollbar { width: 5px; }
#b-emp-list::-webkit-scrollbar-track { background: transparent; }
#b-emp-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.b-net-row { display: grid; grid-template-columns: 1fr 270px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.b-net-row:last-child { border-bottom: none; }
.b-net-name { font-size: 14px; font-weight: 500; min-width: 0; }
.b-net-fields { display: flex; align-items: center; gap: 8px; }
.b-net-field { display: flex; flex-direction: column; gap: 2px; }
.b-net-field label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; }
.b-net-field input { width: 76px; font-family: inherit; font-size: 14px; text-align: right; }
.b-net-result { font-size: 13px; font-family: var(--mono, monospace); color: var(--faint); white-space: nowrap; min-width: 90px; text-align: right; }
.b-assign-scroll { overflow-y: auto; padding-right: 4px; margin-top: 12px; }
.b-assign-scroll::-webkit-scrollbar { width: 5px; }
.b-assign-scroll::-webkit-scrollbar-track { background: transparent; }
.b-assign-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.b-assign-list { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 9px; }
.b-stats-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); min-height: 160px; }
.b-stats-section { padding: 0 20px; }
.b-stats-section:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.b-stats-section:last-child { padding-right: 0; }
.b-stats-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); margin-bottom: 10px; }
.b-stats-emp-sel { width: 100%; margin-bottom: 10px; -webkit-appearance: none; appearance: none; padding-right: 32px; background-color: var(--cream); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6256' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.s-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.s-stat-row:last-child { border-bottom: none; }
.s-stat-row strong { font-family: var(--mono, monospace); font-size: 13px; }
.s-empty { font-size: 13px; color: var(--faint); padding: 6px 0; }
.s-view-btn { margin-top: 10px; font-size: 13px; padding: 6px 14px; }
#s-net-view-btn { margin-top: 22px; }
.s-emp-orders { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); max-height: 340px; overflow-y: auto; }
.s-emp-orders.hide { display: none; }
.b-assign-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; }
.b-assign-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.b-assign-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b-assign-name { font-size: 14px; font-weight: 600; }
.b-assign-date { font-size: 11.5px; color: var(--faint); margin-left: auto; white-space: nowrap; }
.b-assign-detail { font-size: 12.5px; color: var(--ink-soft); }
.b-assign-totals { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--ink-soft); }
.b-assign-sel { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 28px 6px 10px; cursor: pointer; flex-shrink: 0; align-self: flex-start; margin-top: 2px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6256' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--cream-2);
  padding: 12px 22px; border-radius: 11px; font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,.2); z-index: 50;
  transition: opacity .25s, transform .25s;
}
.toast.hide { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }

/* ---------- slide-in notifications (top-right) ---------- */
.notif-stack { position: fixed; top: 18px; right: 18px; z-index: 120; display: flex; flex-direction: column; gap: 12px; width: 340px; max-width: calc(100vw - 36px); pointer-events: none; }
.notif {
  position: relative; pointer-events: auto;
  background: var(--cream-2); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--gold-deep);
  border-radius: 12px; padding: 13px 34px 13px 15px;
  box-shadow: 0 14px 40px rgba(40,32,20,.28);
  transform: translateX(120%); opacity: 0;
  transition: transform .34s cubic-bezier(.22,.9,.31,1.2), opacity .28s ease;
}
.notif.in { transform: translateX(0); opacity: 1; }
.notif.leaving { transform: translateX(120%); opacity: 0; }
.notif-gold { border-left-color: var(--gold-deep); }
.notif-blue { border-left-color: #3b82f6; }
.notif-head { display: flex; align-items: center; gap: 8px; }
.notif-ico { font-size: 17px; line-height: 1; }
.notif-title { font-size: 14.5px; font-weight: 700; letter-spacing: .2px; }
.notif-body { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.notif-line { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.notif-line strong { color: var(--ink); font-weight: 600; }
.notif-hint { color: var(--faint); font-size: 11.5px; }
.notif-x { position: absolute; top: 8px; right: 9px; border: none; background: transparent; color: var(--faint); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 3px; }
.notif-x:hover { color: var(--ink); }

/* pay-reminder circle toggle on recurring costs */
.exp-remind { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line); background: transparent; cursor: pointer; padding: 0; margin-right: 9px; vertical-align: -2px; flex: none; transition: border-color .12s, background .12s, box-shadow .12s; }
.exp-remind:hover { border-color: var(--gold); }
.exp-remind.on { background: var(--gold-deep); border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-soft); }
.exp-emp { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--ink); font-family: inherit; font-size: 13.5px; }
.exp-salary-tag { margin-left: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gold-deep); background: var(--gold-soft); padding: 1px 7px; border-radius: 999px; vertical-align: 1px; }

/* per-order note button + small popup */
.mini-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream-2); color: var(--ink-soft); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.mini-icon:hover { color: var(--gold-deep); border-color: var(--gold); }
.order-note-btn.has-note { color: var(--gold-deep); border-color: var(--gold-soft); background: var(--gold-soft); }
.onote-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(40,32,20,.42); display: flex; align-items: center; justify-content: center; padding: 24px; }
.onote-overlay.hide { display: none; }
.onote-box { width: 100%; max-width: 380px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(40,32,20,.3); padding: 14px; }
.onote-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.onote-title { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.onote-x { background: none; border: none; color: var(--faint); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .12s; }
.onote-x:hover { color: var(--ink); }
.onote-text { width: 100%; height: 150px; resize: vertical; border: 1px solid var(--line); border-radius: 9px; background: var(--cream); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; line-height: 1.6; padding: 10px 11px; outline: none; }
.onote-text:focus { border-color: var(--gold); }
.onote-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.onote-foot .save-btn { margin-top: 0; }

/* material edit-history button + popup */
.mat-hist { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--faint); cursor: pointer; padding: 0 2px; line-height: 1; transition: color .12s; }
.mat-hist:hover { color: var(--gold-deep); }
.mat-hist-box { max-width: 400px; }
.mat-hist-body { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mh-empty { text-align: center; color: var(--faint); font-size: 13px; line-height: 1.7; padding: 26px 8px; }
.mh-row { position: relative; padding: 8px 26px 8px 2px; border-bottom: 1px solid var(--line); }
.mh-row:last-child { border-bottom: none; }
.mh-del { position: absolute; top: 6px; right: 0; border: none; background: none; color: var(--faint); font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px; transition: color .12s; }
.mh-del:hover { color: var(--red); }
.mh-line { display: flex; align-items: center; gap: 8px; }
.mh-field { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.mh-delta { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mh-delta.up { color: var(--green); }
.mh-delta.down { color: var(--red); }
.mh-change { font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.mh-change .mh-u { color: var(--faint); font-weight: 500; }
.mh-when { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

/* save-status indicator */
.save-status {
  position: fixed; bottom: 20px; right: 20px; z-index: 70;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.16); transition: opacity .25s, transform .25s;
}
.save-status.hide { opacity: 0; transform: translateY(8px); pointer-events: none; }
.save-status .ss-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.save-status.saving { background: var(--cream-2); color: var(--ink-soft); border: 1px solid var(--line); }
.save-status.saving .ss-dot { background: var(--faint); animation: ss-blink 1s ease-in-out infinite; }
.save-status.saved { background: #eaf6ee; color: #1f7a44; border: 1px solid #bfe3cd; }
.save-status.saved .ss-dot { background: #2f8a52; }
.save-status.error { background: #fbe9e6; color: #b23a24; border: 1px solid #f0c3ba; cursor: pointer; animation: ss-pulse 1.6s ease-in-out infinite; }
.save-status.error .ss-dot { background: #c0492f; }
@keyframes ss-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes ss-pulse { 0%,100% { box-shadow: 0 6px 24px rgba(192,73,47,.18); } 50% { box-shadow: 0 6px 30px rgba(192,73,47,.5); } }
body.dark .save-status.saved { background: rgba(47,138,82,.16); color: #7bc99a; border-color: rgba(47,138,82,.35); }
body.dark .save-status.error { background: rgba(192,73,47,.16); color: #e88b76; border-color: rgba(192,73,47,.4); }

/* =====================================================================
   DARK MODE — toggled by clicking the moon logo (non-AI tabs only)
===================================================================== */
body.dark:not(.ai-active) {
  --cream: #1f1d19;
  --cream-2: #272420;
  --ink: #ede9df;
  --ink-soft: #b0a890;
  --faint: #6e6658;
  --gold: #c49a4a;
  --gold-deep: #d4a855;
  --gold-soft: rgba(196,154,74,.18);
  --line: rgba(255,255,255,.1);
  --shadow: 0 1px 4px rgba(0,0,0,.4), 0 6px 24px rgba(0,0,0,.3);
  background: #181613;
  color: var(--ink);
}
body.dark:not(.ai-active) .topbar {
  background: rgba(24,22,19,.9);
  border-bottom-color: rgba(255,255,255,.08);
}
body.dark:not(.ai-active) .ticket {
  background: var(--cream-2);
}
body.dark:not(.ai-active) .ticket::before {
  background-image: radial-gradient(circle at 6px 0, transparent 5px, #272420 5px);
}
body.dark:not(.ai-active) .ticket::after {
  background-image: radial-gradient(circle at 6px 0, transparent 5px, #272420 5px);
}
body.dark:not(.ai-active) .b-confirmed { background: rgba(185,137,59,.2); color: #d4a855; }
body.dark:not(.ai-active) .b-out { background: rgba(43,106,147,.22); color: #6eb5e0; }
body.dark:not(.ai-active) .b-delivered { background: rgba(47,138,82,.2); color: #5cc085; }
body.dark:not(.ai-active) .b-cancelled { background: rgba(192,73,47,.2); color: #e07a6a; }
body.dark:not(.ai-active) .tf-from-panel { box-shadow: 0 8px 30px rgba(0,0,0,.4); }
body.dark:not(.ai-active) .save-btn { background: #d4a855; color: #1a1715; }
body.dark:not(.ai-active) .save-btn:hover { background: #c49a4a; }

/* =====================================================================
   AI DARK MODE — whole page switches when AI tab active
===================================================================== */
/* The palette below is also handed to the top-level dialogs, which live outside the AI
   and Content tabs — those are the only places body.ai-active is set, so without this
   they render with no background, no borders and no text colour at all. Any new
   .cmodal placed outside those tabs must be added here too. */
body.ai-active, #report-modal, #cashorders-modal, #qr-modal, #pw-modal {
  --ai-bg: #262624;
  --ai-sidebar: #1f1e1d;
  --ai-surface: #30302e;
  --ai-surface-2: #3a3937;
  --ai-hover: rgba(255,255,255,.055);
  --ai-border: rgba(255,255,255,.085);
  --ai-border-2: rgba(255,255,255,.16);
  --ai-text: #f0eee6;
  --ai-text-2: #c5c2b8;
  --ai-text-3: #8c8a82;
  --ai-accent: #d97757;
  --ai-accent-soft: #e0a282;
  --ai-user: #34322e;
}
/* Kept separate: #report-modal takes the palette above but must NOT take a page
   background — its overlay is deliberately a translucent scrim. */
body.ai-active { background: var(--ai-bg); }
/* Sidebar keeps its consistent Ryze-style theme on the Veridon tab too —
   only the main content area switches to the AI theme above. */

/* =====================================================================
   AI CHAT  —  Claude-accurate
===================================================================== */
#tab-ai { position: fixed; top: 0; left: var(--sb-w); right: 0; bottom: 0; z-index: 15; margin: 0; height: auto; overflow: hidden; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; transition: left .18s ease; }
.ai-layout { display: flex; height: 100%; }

/* --- Sidebar --- */
.ai-sidebar { width: 264px; flex-shrink: 0; background: var(--ai-sidebar); display: flex; flex-direction: column; height: 100%; border-right: 1px solid var(--ai-border); }
.ai-sidebar-top { padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.ai-new-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; background: transparent; border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text-2); font-size: 13.5px; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; cursor: pointer; transition: all .15s; letter-spacing: -0.01em; }
.ai-new-btn svg { color: var(--ai-accent); }
.ai-new-btn:hover { background: var(--ai-hover); border-color: var(--ai-border-2); color: var(--ai-text); }
.ai-search-wrap { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: rgba(255,255,255,.035); border: 1px solid transparent; border-radius: 8px; transition: border-color .15s; }
.ai-search-wrap:focus-within { border-color: var(--ai-border); }
.ai-search-ico { color: var(--ai-text-3); flex-shrink: 0; }
.ai-search-input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--ai-text); font-size: 12.5px; font-family: 'Inter', system-ui, sans-serif; }
.ai-search-input::placeholder { color: var(--ai-text-3); }
.ai-search-input:focus { background: none; box-shadow: none; }
.ai-conv-list { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.ai-conv-list::-webkit-scrollbar { width: 4px; }
.ai-conv-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.ai-conv-empty { font-size: 12px; color: var(--ai-text-3); text-align: center; padding: 28px 12px; font-family: 'Inter', system-ui, sans-serif; }
.ai-conv-group { margin-bottom: 10px; }
.ai-conv-group-label { font-size: 10.5px; font-weight: 600; color: var(--ai-text-3); text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px 5px; }
.ai-conv-item { display: flex; align-items: center; gap: 4px; padding: 7px 8px 7px 10px; border-radius: 7px; cursor: pointer; color: var(--ai-text-2); font-size: 13px; font-family: 'Inter', system-ui, sans-serif; transition: background .1s; letter-spacing: -0.01em; }
.ai-conv-item:hover { background: var(--ai-hover); }
.ai-conv-item.active { background: rgba(255,255,255,0.085); color: var(--ai-text); }
.ai-conv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-conv-act { background: none; border: none; color: var(--ai-text-3); cursor: pointer; padding: 3px; border-radius: 5px; opacity: 0; transition: opacity .1s, color .1s, background .1s; flex-shrink: 0; line-height: 0; }
.ai-conv-item:hover .ai-conv-act { opacity: 1; }
.ai-conv-act:hover { color: var(--ai-text); background: rgba(255,255,255,.08); }
.ai-sidebar-footer { padding: 8px; border-top: 1px solid var(--ai-border); }
.ai-conn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; background: none; border: none; border-radius: 8px; cursor: pointer; color: var(--ai-text-2); font-size: 12.5px; font-family: 'Inter', system-ui, sans-serif; transition: background .12s; }
.ai-conn:hover { background: var(--ai-hover); }
.ai-conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-text-3); flex-shrink: 0; transition: background .2s; }
.ai-conn-dot.online { background: #4caf72; box-shadow: 0 0 7px rgba(76,175,114,.6); }
.ai-conn-dot.offline { background: #c0492f; }
.ai-conn-dot.checking { background: var(--ai-accent); animation: ai-pulse 1s infinite; }
@keyframes ai-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.ai-conn-label { flex: 1; text-align: left; }
.ai-conn-chev { color: var(--ai-text-3); transition: transform .2s; }
.ai-conn-toggle.open .ai-conn-chev { transform: rotate(180deg); }
.ai-conn-body { max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; padding: 0 10px; }
.ai-conn-body.open { max-height: 420px; overflow-y: auto; padding: 8px 10px 8px; }
select.ai-field-input { font-family: 'Inter', system-ui, sans-serif; cursor: pointer; }
.ai-fast-toggle { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--ai-text-2); cursor: pointer; }
.ai-fast-toggle input { accent-color: var(--ai-accent); cursor: pointer; flex-shrink: 0; }
.ai-key-status { text-transform: none; letter-spacing: 0; font-size: 9px; }
.ai-key-status.set { color: var(--green, #2fae66); }
.ai-key-status.set::before { content: '● '; }
.ai-key-status.unset { color: var(--ai-text-3); }
.set-subhead { margin-top: 16px; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--ai-text-2, #444); display: flex; align-items: center; gap: 7px; }
.set-badge-free { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #2fae66; border: 1px solid rgba(47,174,102,.4); border-radius: 20px; padding: 1px 7px; }
.ai-key-row { display: flex; gap: 6px; margin-top: 6px; align-items: stretch; }
.ai-key-row .ai-field-input { flex: 1; min-width: 0; }
.ai-key-save, .ai-key-clear { font-size: 10px; padding: 5px 9px; border-radius: 6px; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; border: 1px solid var(--ai-border); background: rgba(255,255,255,0.04); color: var(--ai-text-2); white-space: nowrap; }
.ai-key-save { background: var(--gold-deep, #b8912f); border-color: var(--gold-deep, #b8912f); color: #fff; font-weight: 600; }
.ai-key-save:hover { filter: brightness(1.07); }
.ai-key-clear:hover { border-color: var(--ai-border-2); }
.ai-key-note { font-size: 9px; color: var(--ai-text-3); margin-top: 6px; line-height: 1.4; }
.ai-field-label { display: block; font-size: 9px; color: var(--ai-text-3); text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 5px; font-family: 'Inter', system-ui, sans-serif; }
.ai-field-input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--ai-border); border-radius: 6px; color: var(--ai-text-2); font-size: 11px; padding: 6px 9px; font-family: 'JetBrains Mono', monospace; box-sizing: border-box; }
.ai-field-input:focus { outline: none; border-color: var(--ai-border-2); background: rgba(255,255,255,0.04); box-shadow: none; }

/* --- Main chat area --- */
.ai-main { flex: 1; position: relative; display: flex; flex-direction: column; height: 100%; background: var(--ai-bg); min-width: 0; }
.ai-scroll { flex: 1; overflow-y: auto; padding: 36px 0 14px; scroll-behavior: smooth; }
.ai-scroll::-webkit-scrollbar { width: 7px; }
.ai-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 7px; }
.ai-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* --- Welcome / empty state --- */
.ai-main.welcome { justify-content: center; align-items: stretch; }
.ai-main.welcome .ai-scroll { flex: 0 0 auto; overflow: visible; padding: 0; }
.ai-main.welcome .ai-composer { padding-top: 4px; }
.ai-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px 8px; animation: ai-rise .55s cubic-bezier(.2,.7,.3,1); }
.ai-welcome-logo { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--ai-accent); margin-bottom: 18px; background: radial-gradient(circle at 50% 40%, rgba(217,119,87,.18), transparent 70%); animation: ai-float 4s ease-in-out infinite; }
.ai-welcome-greet { font-size: 32px; font-weight: 500; color: var(--ai-text); letter-spacing: -0.025em; font-family: 'Inter', system-ui, sans-serif; line-height: 1.15; }
.ai-welcome-sub { font-size: 15px; color: var(--ai-text-3); margin-top: 8px; font-family: 'Inter', system-ui, sans-serif; }
.ai-welcome-extra { display: none; }
.ai-main.welcome .ai-welcome-extra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 46rem; margin: 0 auto; padding: 2px 24px 28px; }
.ai-chip { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 11px; color: var(--ai-text-2); font-size: 13px; cursor: pointer; transition: all .15s; font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; }
.ai-chip:hover { background: var(--ai-surface-2); border-color: var(--ai-border-2); color: var(--ai-text); transform: translateY(-1px); }
.ai-chip-ico { color: var(--ai-accent); display: flex; flex-shrink: 0; }
@keyframes ai-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ai-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* --- Messages --- */
.ai-msg { width: 100%; max-width: 47rem; margin: 0 auto; padding: 7px 28px; box-sizing: border-box; animation: ai-msg-in .4s cubic-bezier(.2,.7,.3,1); }
@keyframes ai-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ai-msg.user { display: flex; justify-content: flex-end; }
.ai-msg.user .ai-msg-wrap { display: flex; flex-direction: column; align-items: flex-end; max-width: 88%; }
.ai-msg.assistant { display: flex; gap: 13px; align-items: flex-start; }
.ai-msg-avatar { width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(140deg, #e08a64, #d97757); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; box-shadow: 0 2px 8px rgba(217,119,87,.3); }
.ai-msg-main { min-width: 0; flex: 1; }
.ai-msg.user .ai-msg-body { background: var(--ai-user); color: var(--ai-text); border-radius: 18px 18px 5px 18px; padding: 11px 17px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; }
.ai-msg.assistant .ai-msg-body { font-size: 15px; line-height: 1.72; color: var(--ai-text); font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; word-wrap: break-word; }
.ai-msg-body strong { color: #fbf8f1; font-weight: 600; }
.ai-msg-body em { color: var(--ai-text); font-style: italic; }
.ai-msg-body del { color: var(--ai-text-3); }
.ai-msg-body > :first-child { margin-top: 0; }
.ai-msg-body > :last-child { margin-bottom: 0; }
.ai-msg-body p { margin: 0 0 13px; }
.ai-md-h { color: var(--ai-text); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; font-family: 'Inter', system-ui, sans-serif; }
h1.ai-md-h { font-size: 1.46em; margin: 20px 0 11px; }
h2.ai-md-h { font-size: 1.26em; margin: 18px 0 10px; }
h3.ai-md-h { font-size: 1.1em; margin: 15px 0 8px; }
h4.ai-md-h { font-size: 1em; margin: 13px 0 6px; }
.ai-msg-body ul, .ai-msg-body ol { margin: 9px 0 14px; padding-left: 25px; }
.ai-msg-body li { margin: 5px 0; padding-left: 3px; }
.ai-msg-body li::marker { color: var(--ai-text-3); }
.ai-msg-body blockquote { margin: 13px 0; padding: 3px 16px; border-left: 3px solid var(--ai-accent); color: var(--ai-text-2); }
.ai-md-hr { border: none; border-top: 1px solid var(--ai-border); margin: 20px 0; }
.ai-msg-body a { color: var(--ai-accent-soft); text-decoration: none; border-bottom: 1px solid rgba(224,162,130,.35); transition: border-color .12s; }
.ai-msg-body a:hover { border-bottom-color: var(--ai-accent-soft); }
.ai-md-table-wrap { overflow-x: auto; margin: 13px 0; border-radius: 8px; }
.ai-md-table { border-collapse: collapse; font-size: 13.5px; }
.ai-md-table th, .ai-md-table td { border: 1px solid var(--ai-border); padding: 7px 13px; text-align: left; }
.ai-md-table th { background: rgba(255,255,255,.04); color: var(--ai-text); font-weight: 600; }
/* inline code */
.ai-msg-body code { background: rgba(255,255,255,0.08); border-radius: 5px; padding: 1.5px 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.86em; color: #e6b89c; letter-spacing: 0; }
/* code block */
.ai-code { margin: 14px 0; border: 1px solid var(--ai-border); border-radius: 11px; overflow: hidden; background: #1c1b1a; }
.ai-code-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px 7px 14px; background: rgba(255,255,255,.025); border-bottom: 1px solid var(--ai-border); }
.ai-code-lang { font-size: 11px; color: var(--ai-text-3); font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; }
.ai-code-copy { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ai-text-3); font-size: 11.5px; cursor: pointer; padding: 3px 7px; border-radius: 6px; font-family: 'Inter', system-ui, sans-serif; transition: all .12s; }
.ai-code-copy:hover { background: var(--ai-hover); color: var(--ai-text-2); }
.ai-code-copy.done { color: var(--ai-accent); }
.ai-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; background: none; }
.ai-code pre::-webkit-scrollbar { height: 7px; }
.ai-code pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 7px; }
.ai-code pre code { background: none; padding: 0; font-size: 13px; color: #d9d0c4; font-family: 'JetBrains Mono', monospace; line-height: 1.62; letter-spacing: 0; }
/* live "writing code" panel — grey GUI shown while code streams in */
.ai-code-gen { background: #232220; border-color: rgba(255,255,255,.09); box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 8px 30px rgba(0,0,0,.28); }
.ai-code-gen .ai-code-head { background: rgba(255,255,255,.04); }
.ai-code-gen .ai-code-lang { display: inline-flex; align-items: center; gap: 7px; color: var(--ai-text-2); }
.ai-code-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ai-accent); box-shadow: 0 0 8px var(--ai-accent); animation: ai-pulse 1s ease-in-out infinite; }
.ai-code-status { font-size: 11px; color: var(--ai-text-3); font-family: 'Inter', system-ui, sans-serif; }
.ai-code-ell { display: inline-block; animation: ai-pulse 1.1s step-start infinite; }
.ai-code-gen pre { max-height: 340px; overflow-y: auto; scroll-behavior: smooth; }
.ai-code-gen pre::-webkit-scrollbar { width: 7px; }
.ai-code-gen pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 7px; }
/* message action row */
.ai-msg-actions { display: flex; gap: 1px; margin-top: 7px; opacity: 0; transition: opacity .15s; }
.ai-msg.assistant .ai-msg-actions { margin-left: -7px; }
.ai-msg:hover .ai-msg-actions { opacity: 1; }
.ai-act { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ai-text-3); font-size: 12px; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; transition: all .12s; line-height: 1; }
.ai-act:hover { background: var(--ai-hover); color: var(--ai-text-2); }
.ai-act svg { flex-shrink: 0; }
/* typing + cursor */
.ai-typing { display: inline-flex; gap: 5px; padding: 6px 0; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ai-text-3); animation: ai-bounce 1.3s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: .16s; }
.ai-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes ai-bounce { 0%,65%,100% { transform: translateY(0); opacity: .35; } 32% { transform: translateY(-5px); opacity: 1; } }
.ai-cursor { display: inline-block; width: 8px; height: 16px; background: var(--ai-accent); margin-left: 2px; border-radius: 1px; vertical-align: text-bottom; animation: ai-blink 1.1s step-end infinite; }
@keyframes ai-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* scroll-to-bottom */
.ai-scroll-btn { position: absolute; bottom: 108px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--ai-surface); border: 1px solid var(--ai-border); color: var(--ai-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.35); transition: opacity .18s, transform .18s, background .12s; z-index: 6; }
.ai-scroll-btn:hover { background: var(--ai-surface-2); color: var(--ai-text); }
.ai-scroll-btn.hide { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px); }

/* --- Composer --- */
.ai-composer { padding: 6px 24px 22px; background: var(--ai-bg); flex-shrink: 0; }
.ai-input-wrap { max-width: 46rem; margin: 0 auto; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 16px; padding: 8px 8px 8px 18px; transition: border-color .15s, box-shadow .15s; }
.ai-input-wrap:focus-within { border-color: var(--ai-border-2); box-shadow: 0 0 0 4px rgba(217,119,87,.06); }
.ai-textarea { display: block; width: 100%; resize: none; border: none; background: transparent; font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.55; color: var(--ai-text); outline: none; max-height: 220px; overflow-y: auto; letter-spacing: -0.01em; padding: 6px 0 2px; }
.ai-textarea::placeholder { color: var(--ai-text-3); }
.ai-textarea:focus { background: transparent; box-shadow: none; }
.ai-textarea::-webkit-scrollbar { width: 5px; }
.ai-textarea::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 5px; }
.ai-input-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ai-model-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: auto; background-color: rgba(255,255,255,.045); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2.5 4L5 6.5L7.5 4' stroke='%238c8a82' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text-2); font-size: 12.5px; font-family: 'Inter', system-ui, sans-serif; padding: 7px 30px 7px 12px; cursor: pointer; max-width: 220px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: background-color .15s, border-color .15s, color .15s; }
.ai-model-select:hover { background-color: var(--ai-hover); border-color: var(--ai-border-2); color: var(--ai-text); }
.ai-model-select:focus { outline: none; border-color: var(--ai-border-2); background-color: rgba(255,255,255,.045); box-shadow: none; }
.ai-model-select option { background: #2a2927; color: var(--ai-text); }
.ai-model-select optgroup { background: #2a2927; color: var(--ai-text-3); font-style: normal; font-weight: 600; font-size: 11px; }

/* custom model dropdown */
.ai-model-picker { position: relative; }
.ai-model-trigger { display: flex; align-items: center; gap: 7px; max-width: 240px; padding: 7px 11px; background: rgba(255,255,255,.045); border: 1px solid var(--ai-border); border-radius: 10px; color: var(--ai-text-2); font-size: 12.5px; font-family: 'Inter', system-ui, sans-serif; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.ai-model-trigger:hover { background: var(--ai-hover); border-color: var(--ai-border-2); color: var(--ai-text); }
.ai-model-picker.open .ai-model-trigger { border-color: var(--ai-border-2); color: var(--ai-text); background: rgba(255,255,255,.07); }
.ai-model-spark { color: var(--ai-accent); flex-shrink: 0; }
.ai-model-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; letter-spacing: -0.01em; }
.ai-model-caret { color: var(--ai-text-3); flex-shrink: 0; transition: transform .2s; }
.ai-model-picker.open .ai-model-caret { transform: rotate(180deg); }
.ai-model-menu { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 258px; max-height: 330px; overflow-y: auto; background: var(--ai-surface); border: 1px solid var(--ai-border-2); border-radius: 14px; padding: 6px; box-shadow: 0 14px 38px rgba(0,0,0,.46); z-index: 60; animation: ai-menu-in .16s cubic-bezier(.22,.9,.31,1.05); }
.ai-model-menu.hide { display: none; }
@keyframes ai-menu-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.ai-model-menu-head { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ai-text-3); padding: 6px 10px 8px; }
.ai-model-opt { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--ai-text-2); font-size: 13px; font-family: 'Inter', system-ui, sans-serif; transition: background .12s, color .12s; }
.ai-model-opt:hover { background: var(--ai-hover); color: var(--ai-text); }
.ai-model-opt.sel { color: var(--ai-text); background: rgba(217,119,87,.10); }
.ai-model-opt-check { flex-shrink: 0; color: var(--ai-accent); opacity: 0; }
.ai-model-opt.sel .ai-model-opt-check { opacity: 1; }
.ai-model-opt-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.ai-model-menu-empty { padding: 16px 12px; font-size: 12px; color: var(--ai-text-3); text-align: center; line-height: 1.5; }
.ai-model-menu-foot { border-top: 1px solid var(--ai-border); margin-top: 5px; padding-top: 5px; }
.ai-model-manage { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 10px; background: none; border: none; color: var(--ai-text-3); font-size: 12.5px; font-family: 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .12s, color .12s; }
.ai-model-manage:hover { background: var(--ai-hover); color: var(--ai-text-2); }

/* canvas (live-rendered HTML dashboards) */
.ai-canvas { margin: 14px 0; border: 1px solid var(--ai-border-2); border-radius: 13px; overflow: hidden; background: var(--ai-sidebar); }
.ai-canvas-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--ai-border); background: rgba(255,255,255,.02); }
.ai-canvas-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; }
.ai-canvas-title svg { color: var(--ai-accent); }
.ai-canvas-tabs { display: flex; gap: 3px; padding: 2px; background: rgba(0,0,0,.22); border-radius: 8px; }
.ai-canvas-tab { border: none; background: none; color: var(--ai-text-3); font-size: 11.5px; font-weight: 500; font-family: 'Inter', system-ui, sans-serif; padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: background .12s, color .12s; }
.ai-canvas-tab.active { background: var(--ai-surface-2); color: var(--ai-text); }
.ai-canvas-tools { margin-left: auto; display: flex; gap: 4px; }
.ai-canvas-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--ai-border); background: none; border-radius: 7px; color: var(--ai-text-3); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ai-canvas-btn:hover { background: var(--ai-hover); color: var(--ai-text); border-color: var(--ai-border-2); }
.ai-canvas-stage { position: relative; }
.ai-canvas-frame { display: block; width: 100%; height: 460px; border: none; background: #262624; }
.ai-canvas-frame.hide { display: none; }
.ai-canvas-code { margin: 0; max-height: 460px; overflow: auto; padding: 14px; background: #1c1b1a; }
.ai-canvas-code.hide { display: none; }
.ai-canvas-code code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ai-text-2); white-space: pre; }

.ai-canvas-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.ai-canvas-overlay.hide { display: none; }
.ai-canvas-overlay-box { display: flex; flex-direction: column; width: 100%; max-width: 1100px; height: 94vh; background: var(--ai-sidebar); border: 1px solid var(--ai-border-2); border-radius: 15px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.ai-canvas-overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--ai-border); }
.ai-canvas-overlay-head .ai-canvas-title { font-size: 13px; }
.ai-canvas-overlay-head .ai-canvas-btn { width: 30px; height: 30px; font-size: 18px; line-height: 1; }
.ai-canvas-overlay-frame { flex: 1; width: 100%; border: none; background: #262624; }
/* image-mode composer buttons */
.ai-foot-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; background: rgba(255,255,255,.045); border: 1px solid var(--ai-border); border-radius: 10px; color: var(--ai-text-2); font-size: 12.5px; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.ai-foot-btn:hover { background: var(--ai-hover); border-color: var(--ai-border-2); color: var(--ai-text); }
.ai-img-toggle svg { flex-shrink: 0; }
.ai-img-toggle.active { background: rgba(217,119,87,.16); border-color: rgba(217,119,87,.5); color: var(--ai-accent); }
.ai-model-tag { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 20px; padding: 1px 6px; white-space: nowrap; vertical-align: middle; }
.ai-model-tag.oll { color: #8c8a82; border: 1px solid var(--ai-border, rgba(255,255,255,.12)); }
.ai-model-tag.rep { color: #d97757; border: 1px solid rgba(217,119,87,.45); }
.ai-model-opt .ai-model-tag { margin-left: auto; }
.ai-img-prov { font-size: 11px; color: var(--ai-text-2); background-color: rgba(255,255,255,.04); border: 1px solid var(--ai-border); border-radius: 20px; padding: 4px 22px 4px 10px; white-space: nowrap; -webkit-appearance: none; appearance: none; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; line-height: 1.4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2.5 3.8L5 6.3l2.5-2.5' stroke='%23999' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; transition: background-color .15s, border-color .15s, color .15s; }
.ai-img-prov:hover { background-color: var(--ai-hover); border-color: var(--ai-border-2); color: var(--ai-text); }
.ai-img-prov:focus { outline: none; border-color: var(--ai-accent); }
.ai-img-prov.hide { display: none; }
/* Slideshow count control (composer, image mode) */
.ai-img-opts { display: inline-flex; align-items: center; gap: 10px; }
.ai-img-opts.hide { display: none; }
.ai-img-ss { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--ai-border); border-radius: 20px; cursor: pointer; }
.ai-img-ss-label { font-size: 11px; font-weight: 600; color: var(--ai-text-2); white-space: nowrap; }
.ai-img-count { -webkit-appearance: none; appearance: none; width: 88px; height: 4px; border-radius: 4px; background: var(--ai-border-2, rgba(255,255,255,.18)); outline: none; cursor: pointer; }
.ai-img-count::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--ai-accent); border: 2px solid var(--ai-surface, #1c1b1a); cursor: pointer; }
.ai-img-count::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--ai-accent); border: 2px solid var(--ai-surface, #1c1b1a); cursor: pointer; }
.ai-img-count:disabled { opacity: .4; cursor: not-allowed; }
.ai-img-count-val { font-size: 11.5px; font-weight: 700; color: var(--ai-accent); min-width: 14px; text-align: center; font-variant-numeric: tabular-nums; }
/* Settings: model rename */
.ai-model-id { font-size: 10.5px; color: var(--ai-text-3, #8c8a82); font-family: 'JetBrains Mono', monospace; margin-left: 4px; opacity: .85; }
.ai-model-ren-inp { font-size: 13px; font-family: 'Inter', system-ui, sans-serif; padding: 3px 8px; border: 1px solid var(--ai-accent); border-radius: 7px; background: var(--ai-surface-2, rgba(255,255,255,.04)); color: var(--ai-text, #f0eee6); min-width: 160px; outline: none; }
.ai-model-ren-ok, .ai-model-ren-cancel { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; margin-left: 4px; border-radius: 6px; }
.ai-model-ren-ok { color: var(--ai-accent); }
.ai-model-ren-cancel { color: var(--ai-text-3, #8c8a82); }
.ai-model-ren-ok:hover, .ai-model-ren-cancel:hover { background: var(--ai-hover, rgba(255,255,255,.06)); }
.ss-provider { font-size: 11.5px; color: var(--ai-text-3); margin-top: 8px; }
.ai-img-attach-btn { display: none; padding: 7px 9px; }
.ai-composer.img-mode .ai-img-attach-btn { display: inline-flex; }
/* attached source-image chip */
.ai-img-attach { margin: 0 0 8px; }
.ai-img-attach.hide { display: none; }
.ai-img-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; background: var(--ai-surface-2); border: 1px solid var(--ai-border); border-radius: 10px; font-size: 12px; color: var(--ai-text-2); }
.ai-img-chip img { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.ai-img-chip button { background: none; border: none; color: var(--ai-text-3); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 3px; }
.ai-img-chip button:hover { color: var(--ai-text); }
/* generated-image messages */
.ai-msg-src { display: block; max-width: 190px; max-height: 190px; border-radius: 10px; margin-bottom: 8px; }
.ai-gen-imgs { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0; }
.ai-gen-fig { margin: 0; max-width: 340px; }
.ai-gen-img { display: block; width: 100%; max-width: 340px; border-radius: 12px; border: 1px solid var(--ai-border); background: var(--ai-surface-2); }
.ai-gen-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--ai-text-3); }
.ai-gen-model { font-family: 'SF Mono', ui-monospace, monospace; letter-spacing: -0.02em; }
.ai-gen-dl { display: inline-flex; align-items: center; gap: 4px; color: var(--ai-text-2); text-decoration: none; padding: 3px 8px; border: 1px solid var(--ai-border); border-radius: 7px; transition: background-color .15s, color .15s, border-color .15s; }
.ai-gen-dl:hover { background: var(--ai-hover); color: var(--ai-text); border-color: var(--ai-border-2); }
.ai-gen-loading { display: inline-flex; align-items: center; gap: 9px; color: var(--ai-text-2); font-size: 13px; }
/* Multi-image slideshow (swipe left/right) */
.ai-slideshow { position: relative; max-width: 360px; margin: 4px 0; }
.ai-ss-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; border-radius: 12px; scrollbar-width: none; }
.ai-ss-track::-webkit-scrollbar { display: none; }
.ai-ss-slide { margin: 0; flex: 0 0 100%; scroll-snap-align: center; padding: 0 1px; }
.ai-ss-slide .ai-gen-img { max-width: 100%; }
.ai-ss-nav { position: absolute; top: calc(50% - 22px); transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ai-border); background: rgba(20,19,18,.72); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background-color .15s, opacity .15s; opacity: .85; }
.ai-ss-nav:hover { background: rgba(20,19,18,.92); opacity: 1; }
.ai-ss-prev { left: 8px; }
.ai-ss-next { right: 8px; }
.ai-ss-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.ai-ss-dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: none; background: var(--ai-border-2, rgba(255,255,255,.22)); cursor: pointer; transition: background-color .15s, transform .15s; }
.ai-ss-dot.on { background: var(--ai-accent); transform: scale(1.25); }
.ai-gen-loading .ai-gen-model { color: var(--ai-text-3); font-size: 11px; }
.ai-gen-spin { width: 15px; height: 15px; border: 2px solid var(--ai-border-2); border-top-color: var(--ai-accent); border-radius: 50%; animation: ai-gen-spin .7s linear infinite; flex-shrink: 0; }
@keyframes ai-gen-spin { to { transform: rotate(360deg); } }
.ai-gen-note { display: inline-flex; align-items: center; gap: 6px; color: var(--ai-text-3); font-size: 12.5px; font-style: italic; }
.ai-send-btn { width: 33px; height: 33px; border-radius: 50%; background: var(--ai-accent); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .15s, transform .12s, background .15s; }
.ai-send-btn:hover { background: #e0825f; }
.ai-send-btn:active { transform: scale(.92); }
.ai-send-btn:disabled { opacity: 0.28; cursor: default; background: var(--ai-text-3); }
.ai-send-btn .ai-ico-stop { display: none; }
.ai-send-btn.streaming { background: var(--ai-surface-2); }
.ai-send-btn.streaming .ai-ico-send { display: none; }
.ai-send-btn.streaming .ai-ico-stop { display: block; color: var(--ai-text); }
.ai-disclaimer { text-align: center; font-size: 11px; color: var(--ai-text-3); margin-top: 9px; font-family: 'Inter', system-ui, sans-serif; }

/* =====================================================================
   CONTENT STUDIO  —  day timeline + assistant bar + modals
===================================================================== */
#tab-content { position: fixed; top: 0; left: var(--sb-w); right: 0; bottom: 0; z-index: 15; margin: 0; height: auto; overflow: hidden; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; transition: left .18s ease; background: var(--ai-bg); }
.studio { display: flex; flex-direction: column; height: 100%; }

/* --- Timeline (top) --- */
.studio-top { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 30px 10px; }
.studio-top::-webkit-scrollbar { width: 8px; }
.studio-top::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 8px; }
.studio-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.studio-title { font-size: 21px; font-weight: 600; color: var(--ai-text); letter-spacing: -0.025em; }
.studio-sub { font-size: 13px; color: var(--ai-text-3); margin-left: 2px; }
.studio-title-wrap { display: flex; flex-direction: column; gap: 3px; }
.studio-today-btn { padding: 8px 14px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.studio-today-btn:hover { background: var(--ai-surface-2); color: var(--ai-text); border-color: var(--ai-border-2); }
.studio-slideshow-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.studio-slideshow-btn:hover { background: var(--ai-surface-2); color: var(--ai-text); border-color: var(--ai-border-2); }
.studio-slideshow-btn svg { color: var(--ai-accent); }
.studio-slideshow-btn.on { background: var(--ai-accent); border-color: var(--ai-accent); color: #fff; }
.studio-slideshow-btn.on svg { color: #fff; }

/* ---- custom dropdown (replaces native <select> whose open popup Windows Chrome paints white) ---- */
.csel { position: relative; display: inline-block; }
.csel-native { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.csel-trigger { text-align: left; }
.csel-menu { position: absolute; z-index: 200; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 280px; overflow-y: auto; background: var(--ai-bg); border: 1px solid var(--ai-border-2); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.45); padding: 5px; }
.csel-menu.hide { display: none; }
.csel-opt { display: block; width: 100%; text-align: left; padding: 8px 11px; border-radius: 7px; background: transparent; border: none; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.csel-opt:hover { background: var(--ai-surface-2); color: var(--ai-text); }
.csel-opt.sel { color: var(--ai-accent-soft); background: var(--ai-surface); }

/* ---- slideshow card editor ---- */
.cmodal-slide { max-width: 620px; }
.slide-count-sel { appearance: none; -webkit-appearance: none; height: 34px; padding: 0 28px 0 11px; background-color: var(--ai-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1.5L5 5.5L9 1.5' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1px solid var(--ai-border); border-radius: 8px; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; cursor: pointer; }
.slide-count-sel:hover { border-color: var(--ai-border-2); color: var(--ai-text); }
.slide-help { font-size: 11.5px; color: var(--ai-text-3); margin: 8px 0 4px; line-height: 1.5; }
.slide-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.slide-empty { font-size: 12.5px; color: var(--ai-text-3); padding: 22px 0; text-align: center; }
.slide-row { border: 1px solid var(--ai-border); border-radius: 10px; padding: 10px 11px; background: var(--ai-surface); }
.slide-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.slide-row-num { font-size: 12px; font-weight: 600; color: var(--ai-text); }
.slide-row-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 20px; background: rgba(217,119,87,.16); color: var(--ai-accent-soft); }
.slide-row-tag.chain { background: var(--ai-surface-2); color: var(--ai-text-3); }
.slide-row-tag.done { background: rgba(76,175,80,.18); color: #7fd48a; }
.slide-row .slide-prompt { margin-bottom: 7px; line-height: 1.5; }
.slide-row .slide-caption { font-weight: 500; }
.slide-row-thumb { display: block; width: 100%; max-width: 150px; border-radius: 8px; margin: 0 0 8px; border: 1px solid var(--ai-border); }

/* ---- chained ChatGPT image generation ---- */
.slide-img-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ai-border); }
.slide-img-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slide-img-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.slide-img-thumb { position: relative; display: block; width: 74px; height: 74px; border-radius: 8px; overflow: hidden; border: 1px solid var(--ai-border); }
.slide-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-img-thumb span { position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); border-radius: 5px; padding: 1px 5px; }

/* ---- slideshow maker modal ---- */
.cmodal-slides { max-width: 640px; }
.ss-setup { display: flex; flex-direction: column; gap: 6px; }
.ss-opts { display: flex; gap: 10px; margin-top: 4px; }
.ss-opt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ss-opt .cm-input { cursor: pointer; }
.ss-gen-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ss-progress { font-size: 12px; color: var(--ai-text-3); }
.ss-note { color: #e0825f; font-size: 12px; margin-top: 6px; min-height: 0; }
.ss-note:empty { display: none; }
.ss-viewer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ai-border); }
.ss-viewer.hide { display: none; }
.ss-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.ss-frame { max-width: 320px; width: 100%; border-radius: 14px; overflow: hidden; background: var(--ai-surface-2); border: 1px solid var(--ai-border); }
.ss-main { display: block; width: 100%; height: auto; }
.ss-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ai-border-2); background: rgba(20,20,19,.72); color: var(--ai-text); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s; }
.ss-nav:hover { background: rgba(20,20,19,.92); }
.ss-nav.hide { display: none; }
.ss-prev { left: calc(50% - 178px); }
.ss-next { right: calc(50% - 178px); }
.ss-caption { text-align: center; color: var(--ai-text-3); font-size: 12px; margin-top: 10px; }
.ss-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.ss-thumb { width: 46px; height: 60px; padding: 0; border-radius: 7px; overflow: hidden; border: 2px solid transparent; background: var(--ai-surface-2); cursor: pointer; }
.ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-thumb.on { border-color: var(--ai-accent); }
.ss-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.ss-saved-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ai-border); }
.ss-saved-head { font-size: 12px; font-weight: 600; color: var(--ai-text-2); margin-bottom: 10px; }
.ss-saved { display: flex; flex-wrap: wrap; gap: 12px; }
.ss-saved-empty { color: var(--ai-text-3); font-size: 12px; }
.ss-card { width: 92px; cursor: pointer; }
.ss-card-cover { position: relative; width: 92px; height: 118px; border-radius: 10px; overflow: hidden; background: var(--ai-surface-2); border: 1px solid var(--ai-border); }
.ss-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s; }
.ss-card:hover .ss-card-cover img { transform: scale(1.05); }
.ss-card-count { position: absolute; right: 5px; bottom: 5px; background: rgba(20,20,19,.8); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 20px; }
.ss-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 5px; }
.ss-card-topic { font-size: 11px; color: var(--ai-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-card-del { background: none; border: none; color: var(--ai-text-3); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.ss-card-del:hover { color: #e0825f; }
@media (max-width: 560px) { .ss-prev { left: 4px; } .ss-next { right: 4px; } .ss-opts { flex-wrap: wrap; } }
.studio-head-actions { display: flex; align-items: center; gap: 7px; }

/* ---- header clock + next-post countdown ---- */
.studio-clock { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 12px; margin-left: 1px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; }
.studio-clock-time { font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ai-text); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.studio-clock-next { position: absolute; top: -8px; right: -7px; font-family: 'Inter', system-ui, sans-serif; font-size: 9.5px; font-weight: 700; line-height: 1; color: #7fd48a; background: var(--ai-bg); border: 1px solid rgba(127, 212, 138, .38); border-radius: 20px; padding: 3px 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.studio-clock-next.hide { display: none; }
.studio-model-wrap { position: relative; display: inline-flex; align-items: center; }
.studio-model-sel { appearance: none; -webkit-appearance: none; height: 38px; padding: 0 30px 0 13px; background-color: var(--ai-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1.5L5 5.5L9 1.5' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; cursor: pointer; max-width: 200px; text-overflow: ellipsis; transition: background-color .14s, color .14s, border-color .14s; }
.studio-model-sel:hover { background-color: var(--ai-surface-2); color: var(--ai-text); border-color: var(--ai-border-2); }
.studio-model-sel:focus { outline: none; border-color: var(--ai-border-2); box-shadow: 0 0 0 3px rgba(217,119,87,.07); }
/* Make room for the clock on narrower windows — the model pill shrinks first.
   Must come AFTER the max-width:200px rule above to win on equal specificity. */
@media (max-width: 1180px) { .studio-model-sel, .csel-trigger.studio-model-sel { max-width: 140px; } }
@media (max-width: 1040px) { .studio-model-sel, .csel-trigger.studio-model-sel { max-width: 104px; } .studio-head-actions { gap: 6px; } }
.notebook-wrap { position: relative; }
.studio-icon-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; background: var(--ai-surface); border: 1px solid var(--ai-border); color: var(--ai-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s, border-color .14s; }
.studio-icon-btn:hover { background: var(--ai-surface-2); color: var(--ai-text); border-color: var(--ai-border-2); }
.studio-icon-btn.on { border-color: var(--ai-accent); color: var(--ai-accent-soft); }
.notebook-pop { position: absolute; top: 46px; right: 0; width: 300px; background: var(--ai-bg); border: 1px solid var(--ai-border-2); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.42); padding: 12px; z-index: 30; }
.notebook-pop.hide { display: none; }
.notebook-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ai-text); margin-bottom: 8px; }
.notebook-status { font-size: 11px; color: var(--ai-accent-soft); opacity: 0; transition: opacity .2s; }
.notebook-status.show { opacity: 1; }
.notebook-text { width: 100%; min-height: 190px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; line-height: 1.6; padding: 9px 11px; resize: vertical; outline: none; }
.notebook-text:focus { border-color: var(--ai-border-2); box-shadow: 0 0 0 3px rgba(217,119,87,.07); }

/* day strip */
.day-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scroll-behavior: smooth; }
.day-strip::-webkit-scrollbar { height: 6px; }
.day-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 6px; }
.day-chip { flex: 0 0 auto; width: 66px; padding: 9px 6px 8px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 12px; color: var(--ai-text-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: background .14s, border-color .14s, transform .12s; font-family: 'Inter', system-ui, sans-serif; }
.day-chip:hover { background: var(--ai-surface-2); border-color: var(--ai-border-2); }
.day-chip.sel { border-color: var(--ai-accent); background: rgba(217,119,87,.1); }
.day-chip-dow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ai-text-3); }
.day-chip.sel .day-chip-dow { color: var(--ai-accent-soft); }
.day-chip-num { font-size: 19px; font-weight: 600; color: var(--ai-text); line-height: 1.1; }
.day-chip-mon { font-size: 10px; color: var(--ai-text-3); }
.day-chip.today .day-chip-num { color: var(--ai-accent); }
.day-chip-dots { display: flex; gap: 3px; margin-top: 3px; height: 6px; }
.day-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.16); }
.day-chip-dot.on { background: var(--ai-accent); }

/* day panel */
.day-panel-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 12px; }
.day-panel-date { font-size: 16px; font-weight: 600; color: var(--ai-text); letter-spacing: -0.02em; }
.day-panel-prog { font-size: 12.5px; color: var(--ai-text-3); margin-top: 2px; }
.day-gen-all { padding: 8px 15px; background: var(--ai-accent); color: #fff; border: none; border-radius: 9px; font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .14s, opacity .14s; }
.day-gen-all:hover { background: #e0825f; }
.day-gen-all:disabled { opacity: .4; cursor: default; }
.day-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vcard { position: relative; text-align: left; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 14px; padding: 15px 15px 13px; min-height: 148px; cursor: pointer; display: flex; flex-direction: column; transition: border-color .14s, transform .12s, background .14s; font-family: 'Inter', system-ui, sans-serif; }

/* Yellow "when does this get generated" chip — top-right of a slideshow slot.
   Removed by refreshSlotEtas() once the slot has all its images. */
.slot-eta { position: absolute; top: 7px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 20px; background: rgba(230, 183, 74, .12); border: 1px solid rgba(230, 183, 74, .3); font-size: 9px; font-weight: 700; line-height: 1.5; color: #e6b74a; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.slot-eta-at { opacity: .8; font-weight: 600; }
.slot-eta-left { letter-spacing: .01em; }
/* On a filled card the chip sits in a column under the status badge instead of
   being pinned, so "Idea" and the time can never overlap. */
.vcard-badges { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vcard-badges .slot-eta { position: static; }
/* In the modal it sits inline next to the generate button rather than pinned. */
#slide-eta-mount .slot-eta { position: static; }
.vcard:hover { border-color: var(--ai-border-2); transform: translateY(-2px); }
.vcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.vcard-num { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--ai-text-3); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.vcard-status { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.vcard-status.s-idea { background: rgba(255,255,255,.07); color: var(--ai-text-3); }
.vcard-status.s-shot { background: rgba(217,119,87,.16); color: var(--ai-accent-soft); }
.vcard-status.s-posted { background: rgba(90,180,120,.16); color: #7bc99a; }
.vcard-title { font-size: 14px; font-weight: 600; color: var(--ai-text); line-height: 1.3; margin-bottom: 6px; letter-spacing: -0.01em; }
.vcard-hook { font-size: 12.5px; color: var(--ai-text-2); line-height: 1.45; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.vcard-open { font-size: 11.5px; color: var(--ai-text-3); margin-top: 9px; }
.vcard:hover .vcard-open { color: var(--ai-accent-soft); }
.vcard-empty { align-items: center; justify-content: center; color: var(--ai-text-3); border-style: dashed; gap: 7px; font-size: 12.5px; font-weight: 500; }
.vcard-empty:hover { color: var(--ai-accent-soft); }
.vcard-plus { font-size: 26px; line-height: 1; font-weight: 300; }

/* --- Assistant bar (bottom) --- */
.assistant-bar { flex-shrink: 0; background: var(--ai-sidebar); border-top: 1px solid var(--ai-border); display: flex; flex-direction: column; max-height: 330px; }
.asst-head { display: flex; align-items: center; gap: 9px; padding: 9px 16px; cursor: pointer; }
.asst-collapse { background: none; border: none; color: var(--ai-text-3); cursor: pointer; display: flex; padding: 2px; transition: transform .2s, color .14s; }
.asst-collapse:hover { color: var(--ai-text); }
.assistant-bar.collapsed .asst-collapse { transform: rotate(180deg); }
.asst-title { font-size: 13.5px; font-weight: 600; color: var(--ai-text); letter-spacing: -0.01em; }
.asst-sub { font-size: 12px; color: var(--ai-text-3); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.asst-head-actions { display: flex; gap: 4px; margin-left: auto; }
.asst-ico-btn { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: none; color: var(--ai-text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s; }
.asst-ico-btn:hover { background: var(--ai-hover); color: var(--ai-text); }
.asst-body { display: flex; min-height: 0; flex: 1; }
.assistant-bar.collapsed .asst-body { display: none; }
.asst-history { width: 210px; flex-shrink: 0; border-right: 1px solid var(--ai-border); overflow-y: auto; padding: 6px; }
.asst-history.hide { display: none; }
.asst-hist-item { display: flex; align-items: center; gap: 6px; padding: 8px 9px; border-radius: 8px; cursor: pointer; color: var(--ai-text-2); font-size: 12.5px; transition: background .12s; }
.asst-hist-item:hover { background: var(--ai-hover); }
.asst-hist-item.active { background: var(--ai-hover); color: var(--ai-text); }
.asst-hist-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.asst-hist-del { background: none; border: none; color: var(--ai-text-3); cursor: pointer; padding: 2px; opacity: 0; transition: opacity .12s, color .12s; }
.asst-hist-item:hover .asst-hist-del { opacity: 1; }
.asst-hist-del:hover { color: #e07a63; }
.asst-hist-empty { padding: 14px 10px; font-size: 12px; color: var(--ai-text-3); text-align: center; }
.asst-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.asst-messages { flex: 1; overflow-y: auto; padding: 8px 20px; min-height: 90px; }
.asst-messages::-webkit-scrollbar { width: 7px; }
.asst-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 7px; }
.asst-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ai-text-3); font-size: 13px; text-align: center; }
.asst-composer { padding: 4px 16px 12px; flex-shrink: 0; }

/* --- Modals (card editor + memory) --- */
.cmodal-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 24px; animation: cmodal-fade .16s ease; }
.cmodal-overlay.hide { display: none; }
@keyframes cmodal-fade { from { opacity: 0; } to { opacity: 1; } }
.cmodal { width: 100%; max-width: 620px; max-height: 88vh; background: var(--ai-bg); border: 1px solid var(--ai-border-2); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: ai-rise .22s cubic-bezier(.2,.7,.3,1); }
.cmodal-mem { max-width: 560px; }
.cmodal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ai-border); }
.cmodal-title { font-size: 15px; font-weight: 600; color: var(--ai-text); }
.card-topic-input { flex: 1; background: transparent; border: none; color: var(--ai-text); font-family: 'Inter', system-ui, sans-serif; font-size: 15.5px; font-weight: 600; outline: none; letter-spacing: -0.01em; }
.card-topic-input::placeholder { color: var(--ai-text-3); font-weight: 500; }
.cmodal-x { background: none; border: none; color: var(--ai-text-3); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .14s; }
.cmodal-x:hover { color: var(--ai-text); }
.cmodal-body { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 5px; }
.cmodal-body::-webkit-scrollbar { width: 8px; }
.cmodal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 8px; }
.card-gen-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.card-gen-btn { padding: 9px 16px; background: var(--ai-accent); color: #fff; border: none; border-radius: 9px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .14s; }
.card-gen-btn:hover { background: #e0825f; }
.card-gen-btn.streaming { background: var(--ai-surface-2); }
.card-gen-note { font-size: 12px; color: var(--ai-text-3); }
.card-flabel { font-size: 12px; font-weight: 600; color: var(--ai-text-2); margin-top: 8px; }
.card-flabel-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.hook-regen-btn { padding: 4px 10px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 20px; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; font-weight: 500; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.hook-regen-btn:hover { background: var(--ai-surface-2); color: var(--ai-text); border-color: var(--ai-border-2); }
.hook-regen-btn:disabled { opacity: .5; cursor: default; }
.hook-options { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; padding: 7px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 10px; }
.hook-options.hide { display: none; }
.hook-opt-note { font-size: 11.5px; color: var(--ai-text-3); padding: 3px 4px; }
.hook-opt { text-align: left; padding: 8px 10px; background: var(--ai-bg); border: 1px solid var(--ai-border); border-radius: 8px; color: var(--ai-text); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; line-height: 1.4; cursor: pointer; transition: border-color .14s, background .14s; }
.hook-opt:hover { border-color: var(--ai-accent); background: rgba(217,119,87,.08); }
.card-perf { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ai-border); display: flex; flex-direction: column; gap: 8px; }
.card-perf.hide { display: none; }
.perf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perf-btns { display: flex; gap: 6px; }
.perf-btn { padding: 7px 13px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.perf-btn:hover { background: var(--ai-surface-2); color: var(--ai-text); }
.perf-btn.active { border-color: var(--ai-accent); background: rgba(217,119,87,.14); color: var(--ai-text); }
.perf-views { width: 140px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; padding: 8px 10px; outline: none; }
.perf-views:focus { border-color: var(--ai-border-2); }
.perf-note { font-size: 11px; color: var(--ai-text-3); }
.card-field { width: 100%; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text); font-family: 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1.55; padding: 9px 11px; resize: vertical; outline: none; transition: border-color .15s, box-shadow .15s; }
.card-field:focus { border-color: var(--ai-border-2); box-shadow: 0 0 0 3px rgba(217,119,87,.07); }
.cmodal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ai-border); }
.card-status-sel { appearance: none; -webkit-appearance: none; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; padding: 8px 12px; cursor: pointer; }
.card-status-sel option { background: #2a2927; color: var(--ai-text); }
.cmodal-btn { padding: 8px 15px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text-2); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.cmodal-btn:hover { background: var(--ai-surface-2); color: var(--ai-text); border-color: var(--ai-border-2); }
.cmodal-btn.primary { background: var(--ai-accent); border-color: var(--ai-accent); color: #fff; }
.cmodal-btn.primary:hover { background: #e0825f; }
.cmodal-btn.danger { color: #e07a63; }
.cmodal-btn.danger:hover { background: rgba(224,122,99,.12); border-color: rgba(224,122,99,.4); color: #e88; }
.cmodal-foot .card-status-wrap { margin-right: auto; }

/* memory fields inside modal */
.cm-sub { font-size: 12px; line-height: 1.5; color: var(--ai-text-3); margin-bottom: 4px; }
.cm-label { font-size: 11.5px; font-weight: 600; color: var(--ai-text-2); margin-top: 9px; }
.cm-input { width: 100%; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px; color: var(--ai-text); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; line-height: 1.5; padding: 8px 10px; resize: vertical; outline: none; transition: border-color .15s, box-shadow .15s; }
.cm-input:focus { border-color: var(--ai-border-2); box-shadow: 0 0 0 3px rgba(217,119,87,.07); }
/* Windows Chrome paints optgroup labels light-on-white unless told otherwise */
.cm-input optgroup { background: #2a2927; color: var(--ai-text-3); font-style: normal; font-weight: 600; font-size: 11px; }
.cm-input option { background: #30302e; color: var(--ai-text); font-weight: 400; }

/* Keep native controls (select popups, date pickers) and Chrome autofill dark instead of white */
input, select, textarea { color-scheme: dark; }
/* Windows Chrome ignores color-scheme for <select> popups — style the options directly */
option { background-color: #30302e; color: #f0eee6; }
/* Stop Chrome autofill from repainting inputs white */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: #f0eee6 !important;
  -webkit-box-shadow: 0 0 0 1000px #30302e inset !important;
  box-shadow: 0 0 0 1000px #30302e inset !important;
  caret-color: #f0eee6 !important;
  transition: background-color 9999s ease 0s;
}
.cm-conn-note { font-size: 11px; color: var(--ai-text-3); margin-top: 4px; }
.cm-status { font-size: 12px; color: var(--ai-accent-soft); opacity: 0; margin-right: auto; transition: opacity .2s; }
.cm-status.show { opacity: 1; }
.cmodal-foot .cm-status { margin-right: 0; }

/* ---------- ready-to-post block (slide modal) ---------- */
.slide-post { margin-top: 14px; padding: 13px 14px 14px; border: 1px solid var(--ai-border-2); border-radius: 13px; background: var(--ai-surface); display: flex; flex-direction: column; gap: 4px; }
.slide-post.hide { display: none; }
.slide-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.slide-post-title { font-size: 13px; font-weight: 700; color: var(--ai-text); }
.slide-post-count { font-size: 11px; color: var(--ai-text-3); margin-right: auto; }
.slide-post-topic { font-size: 14px; font-weight: 600; color: var(--ai-text); background: var(--ai-surface-2); border: 1px solid var(--ai-border); border-radius: 9px; padding: 8px 10px; }
.slide-post-imgs { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 6px; }
.slide-post-imgs a { position: relative; flex: 0 0 auto; border-radius: 9px; overflow: hidden; border: 1px solid var(--ai-border); line-height: 0; }
.slide-post-imgs img { width: 62px; height: 84px; object-fit: cover; display: block; }
.slide-post-imgs span { position: absolute; top: 3px; left: 3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 5px; background: rgba(0,0,0,.66); color: #fff; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.slide-post-saved { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ai-border); }
.slide-post-saved.hide { display: none; }
.slide-post-savedlbl { font-size: 11px; color: var(--ai-text-3); flex: 0 0 auto; }
.slide-post-dir { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--ai-text-2); background: var(--ai-surface-2); border: 1px solid var(--ai-border); border-radius: 7px; padding: 3px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; cursor: text; }
.slide-post-ico { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; background: var(--ai-surface-2); border: 1px solid var(--ai-border); color: var(--ai-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s, border-color .14s; }
.slide-post-ico:hover { background: var(--ai-surface); color: var(--ai-text); border-color: var(--ai-border-2); }
/* Push the close button to the right edge on the dialogs that have a header chip.
   Scoped rather than changing .cmodal-x, which every other modal already relies on. */
#report-modal .cmodal-title, #cashorders-modal .cmodal-title { flex: 1 1 auto; }

/* ---- orders behind a cash entry ---- */
.cmodal-cashorders { max-width: 520px; }
.cash-view-btn { padding: 3px 9px; margin-right: 2px; background: var(--ai-surface, #30302e); border: 1px solid var(--ai-border, rgba(255,255,255,.085));
  border-radius: 7px; color: var(--ai-text-2, #c5c2b8); font-family: inherit; font-size: 11.5px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s; }
.cash-view-btn:hover { background: var(--ai-surface-2, #3a3937); color: var(--ai-text, #f0eee6); border-color: var(--ai-border-2, rgba(255,255,255,.16)); }
.cash-ord-count { font-size: 11px; color: var(--ai-text-3); white-space: nowrap; }
.cash-ord-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding: 9px 11px; margin-bottom: 9px;
  border-radius: 10px; background: var(--ai-surface-2); border: 1px solid var(--ai-border); }
.cash-ord-amt { font-size: 15px; font-weight: 700; }
.cash-ord-amt.cash-in { color: #8fd4b4; }
.cash-ord-amt.cash-out { color: #e0a08c; }
.cash-ord-cat { font-size: 12px; color: var(--ai-text); }
.cash-ord-when { font-size: 11px; color: var(--ai-text-3); margin-left: auto; }
.cash-ord-list { display: flex; flex-direction: column; gap: 7px; }
.cash-ord { padding: 9px 11px; border-radius: 10px; background: var(--ai-surface); border: 1px solid var(--ai-border); }
.cash-ord-top { display: flex; align-items: baseline; gap: 8px; }
.cash-ord-name { font-size: 13px; font-weight: 600; color: var(--ai-text); flex: 1 1 auto; min-width: 0; }
.cash-ord-total { font-size: 13px; font-weight: 700; color: var(--ai-text); white-space: nowrap; }
.cash-ord-meta { font-size: 10.5px; color: var(--ai-text-3); margin-top: 2px; }
.cash-ord-items { font-size: 11.5px; color: var(--ai-text-2); margin-top: 4px; }
.cash-ord-gone { opacity: .6; }

/* ---- quick receipt (LoveIn7, stand-alone — not part of the order data) ---- */
.cmodal-qr { max-width: 440px; }
.qr-items { display: flex; flex-direction: column; gap: 7px; margin: 8px 0; }
.qr-item-row { display: flex; gap: 6px; align-items: center; }
.qr-item-row .qr-i-name { flex: 1 1 auto; min-width: 0; }
.qr-item-row .qr-i-price { width: 76px; flex: 0 0 auto; }
.qr-item-row .qr-i-qty { width: 52px; flex: 0 0 auto; }
.qr-item-row .qr-i-name, .qr-item-row .qr-i-price, .qr-item-row .qr-i-qty {
  background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 9px;
  color: var(--ai-text); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px;
  padding: 7px 9px; outline: none; transition: border-color .15s;
}
.qr-item-row input:focus { border-color: var(--ai-border-2); }
.qr-i-del { flex: 0 0 auto; width: 26px; height: 26px; border: none; background: none;
  color: var(--ai-text-3); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px;
  transition: background .14s, color .14s; }
.qr-i-del:hover { color: #e07a63; background: rgba(224,122,99,.12); }
.qr-item-wrap { display: flex; flex-direction: column; }
.qr-pretax-row { display: flex; align-items: center; gap: 6px; margin: 3px 0 0 2px; }
.qr-pretax-lbl { font-size: 10.5px; color: var(--ai-text-3); }
.qr-i-pretax { width: 74px; background: transparent; border: none; border-bottom: 1px dashed var(--ai-border);
  color: var(--ai-text-3); font-size: 11px; font-family: 'Inter', system-ui, sans-serif; padding: 2px 1px;
  outline: none; transition: border-color .15s, color .15s; }
.qr-i-pretax:focus { border-bottom-color: var(--ai-border-2); color: var(--ai-text-2); }
.qr-empty { font-size: 12.5px; color: var(--ai-text-3); padding: 4px 0; }
.qr-add-btn { width: 100%; justify-content: center; display: flex; }
.qr-totals { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ai-border); display: flex; flex-direction: column; gap: 4px; }
.qr-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ai-text-2); }
.qr-row.grand { font-size: 15.5px; font-weight: 700; color: var(--ai-text); padding-top: 6px; margin-top: 2px; border-top: 1px dashed var(--ai-border); }
.qr-amt-input { width: 100px; text-align: right; background: var(--ai-surface); border: 1px solid var(--ai-border);
  border-radius: 8px; color: var(--ai-text); font-family: 'Inter', system-ui, sans-serif; font-size: 13px;
  font-weight: 600; padding: 5px 8px; outline: none; transition: border-color .15s; }
.qr-row.grand .qr-amt-input { font-size: 14px; }
.qr-amt-input:focus { border-color: var(--ai-border-2); }

/* ---- monthly report export ---- */
.cmodal-report { max-width: 460px; }
.rep-fmt { display: flex; gap: 8px; margin-top: 4px; }
.rep-fmt-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 9px 11px; border-radius: 10px; cursor: pointer; font: inherit;
  background: var(--ai-surface-2); border: 1px solid var(--ai-border); color: var(--ai-text-2);
  transition: background .14s, color .14s, border-color .14s; }
.rep-fmt-btn:hover { background: var(--ai-surface); border-color: var(--ai-border-2); }
.rep-fmt-btn.on { background: rgba(217,119,87,.14); border-color: rgba(217,119,87,.45); color: var(--ai-text); }
.rep-fmt-t { font-size: 12.5px; font-weight: 700; }
.rep-fmt-s { font-size: 10.5px; color: var(--ai-text-3); line-height: 1.35; }
.rep-fmt-btn.on .rep-fmt-s { color: var(--ai-text-2); }
.rep-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; cursor: pointer; }
.rep-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.rep-check-box { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 5px;
  background: var(--ai-surface-2); border: 1px solid var(--ai-border-2); position: relative; transition: background .14s, border-color .14s; }
.rep-check-box::after { content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.6); opacity: 0; transition: opacity .12s, transform .12s; }
.rep-check input:checked + .rep-check-box { background: var(--ai-accent); border-color: var(--ai-accent); }
.rep-check input:checked + .rep-check-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.rep-check:hover .rep-check-box { border-color: var(--ai-accent-soft); }
.rep-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-check-t { font-size: 12.5px; color: var(--ai-text); }
.rep-check-s { font-size: 10.5px; color: var(--ai-text-3); line-height: 1.4; }

.rep-preview { margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--ai-surface-2); border: 1px solid var(--ai-border); font-size: 11.5px; color: var(--ai-text-2); line-height: 1.6; }
.rep-preview.empty { color: var(--ai-text-3); }
.rep-preview b { color: var(--ai-text); font-weight: 700; }
#report-emp-wrap.hide { display: none; }

.slide-post-ico[disabled] { opacity: .55; cursor: default; }
/* the WhatsApp push reads as its own action, not a second download */
#slide-post-wa:hover:not([disabled]) { color: #8fd4b4; border-color: rgba(110,205,160,.45); background: rgba(110,205,160,.1); }
.slide-post-cap { min-height: 96px; }
.slide-post-foot { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.slide-post-tags { font-size: 11px; color: var(--ai-text-3); margin-right: auto; }
.slide-post-tags.bad { color: #e0a08c; }
.slide-post-write { background: none; border: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--ai-accent-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.slide-post-write:hover { color: var(--ai-accent); }
.slide-post-write[disabled] { opacity: .5; cursor: default; text-decoration: none; }

/* What kind of post a slideshow card is — occasion / product ad / aesthetic / … */
.vcard-mode { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; background: var(--ai-surface-2); color: var(--ai-text-2); border: 1px solid var(--ai-border); }
.vcard-mode.m-event { background: rgba(217,119,87,.16); border-color: rgba(217,119,87,.4); color: #e8a184; }
.vcard-mode.m-product { background: rgba(96,165,250,.14); border-color: rgba(96,165,250,.35); color: #93bdf7; }
.vcard-mode.m-aesthetic { background: rgba(196,151,224,.14); border-color: rgba(196,151,224,.35); color: #c9a7e0; }
.vcard-mode.m-trend { background: rgba(110,205,160,.14); border-color: rgba(110,205,160,.35); color: #8fd4b4; }
.vcard-mode.m-free { background: rgba(255,255,255,.06); border-color: var(--ai-border); color: var(--ai-text-3); }

/* ---------- reference images folder ---------- */
.cmodal-refs { max-width: 620px; }
.ref-count { font-size: 11.5px; font-weight: 600; color: var(--ai-text-3); background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 999px; padding: 2px 9px; margin-right: auto; }
.ref-path { font-size: 11px; color: var(--ai-text-3); margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

.ref-drop { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 16px; border: 1.5px dashed var(--ai-border-2); border-radius: 13px; background: var(--ai-surface); color: var(--ai-text-3); text-align: center; transition: border-color .15s, background .15s, color .15s; }
.ref-drop.over { border-color: var(--ai-accent); background: rgba(217,119,87,.08); color: var(--ai-text-2); }
.ref-drop-t { font-size: 13px; font-weight: 600; color: var(--ai-text-2); }
.ref-drop-s { font-size: 11.5px; }
.ref-pick { background: none; border: none; padding: 0; font: inherit; color: var(--ai-accent-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ref-pick:hover { color: var(--ai-accent); }

.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin-top: 12px; }
.ref-empty { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--ai-text-3); padding: 14px 0 4px; }
.ref-tile { position: relative; border: 1px solid var(--ai-border); border-radius: 12px; overflow: hidden; background: var(--ai-surface); transition: border-color .15s, transform .12s; }
.ref-tile:hover { border-color: var(--ai-border-2); transform: translateY(-1px); }
.ref-tile.unused { opacity: .5; }
.ref-tile img { display: block; width: 100%; height: 108px; object-fit: contain; background: repeating-conic-gradient(rgba(255,255,255,.045) 0 25%, transparent 0 50%) 0 0 / 14px 14px; }
.ref-num { position: absolute; top: 6px; left: 6px; z-index: 2; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 6px; background: var(--ai-accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.ref-num.off { background: rgba(0,0,0,.6); color: var(--ai-text-3); font-weight: 600; }
.ref-tile-foot { padding: 6px 8px 7px; border-top: 1px solid var(--ai-border); }
.ref-name { display: block; font-size: 11.5px; color: var(--ai-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-size { font-size: 10.5px; color: var(--ai-text-3); }
.ref-acts { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; gap: 4px; opacity: 0; transition: opacity .14s; }
.ref-tile:hover .ref-acts, .ref-tile:focus-within .ref-acts { opacity: 1; }
.ref-act { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); background: rgba(20,20,19,.82); color: var(--ai-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s, border-color .14s; }
.ref-act:hover { background: var(--ai-surface-2); color: var(--ai-text); }
.ref-act.danger:hover { background: rgba(224,122,99,.25); border-color: rgba(224,122,99,.5); color: #f0a08c; }
.ref-rename { width: 100%; background: var(--ai-surface-2); border: 1px solid var(--ai-accent); border-radius: 6px; color: var(--ai-text); font-family: inherit; font-size: 11.5px; padding: 2px 5px; outline: none; }

@media (max-width: 760px) {
  :root { --sb-w: 58px; }
  .sidebar { padding: 14px 9px; }
  .brand { justify-content: center; padding: 4px 0 2px; }
  .brand-text { display: none; }
  .tab { justify-content: center; padding: 10px 0; }
  .tab-label { display: none; }
  .tab-badge {
    position: absolute; top: 5px; right: 9px; margin: 0;
    min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%;
  }
  .nav-head-label, .nav-head-chev { display: none; }
  .nav-head { justify-content: center; padding: 9px 0; }
  .nav-items, .nav-group.collapsed .nav-items {
    max-height: none; opacity: 1; padding-left: 0; margin-left: 0; border-left: none;
  }
  .nav-group + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sb-line); }
  .sb-profile { justify-content: center; padding: 8px 0; border-color: transparent; background: none; }
  .sb-profile-text, .sb-profile-chev { display: none; }
  .ai-sidebar { width: 0; border: none; overflow: hidden; }
  .ai-msg { padding: 7px 16px; }
  .studio-top { padding: 16px 14px 8px; }
  .day-slots { grid-template-columns: 1fr; }
  .asst-history { width: 150px; }
}

/* ===================== WhatsApp archive =====================
   Full-bleed, like the Veridon tab: a chat client inside a card is a cramped
   chat client. Same shape as Veridon — fixed to the right of the sidebar, its
   own dark chrome — but the accent is the desk's gold rather than Veridon's
   terracotta, so the two read as siblings and not as the same screen.

   EVERY colour is a variable, and the ones below are only the defaults. The
   theme editor in Settings writes overrides into a <style> tag, so a theme has
   to be expressible here or it cannot be themed at all — no hard-coded greys,
   no rgba(255,255,255,…) that only works on a dark background. The handful that
   are computed rather than picked (borders, the veil, text on the accent) are
   derived in app.js from the colours that were picked, because getting those
   wrong is what makes a light theme look broken. */
#tab-whatsapp {
  position: fixed; top: 0; left: var(--sb-w); right: 0; bottom: 0;
  z-index: 15; margin: 0; height: auto; overflow: hidden;
  transition: left .18s ease;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --wa-side-w: 340px;
  --wa-prof-w: 320px;
  --wa-bg: #1e1c19;               /* the thread */
  --wa-chrome: #171614;           /* sidebar and bars */
  --wa-raise: #272522;            /* inputs */
  --wa-raise-2: #322f2a;
  --wa-in-bg: #272522;            /* what they sent */
  --wa-out-bg: #46381d;           /* what the shop sent */
  --wa-out-text: #f6efdf;
  --wa-text: #ece7dc;
  --wa-text-2: #b3ada1;
  --wa-text-3: #7d786f;
  --wa-accent: #e3a64c;
  --wa-on-accent: #241d10;
  --wa-del: #e8836c;
  --wa-del-bg: rgba(192,73,47,.15);
  --wa-ok: #55b97f;
  --wa-wait: var(--wa-accent);
  /* Derived — overwritten by the theme editor, kept here so the tab still looks
     right before any theme has ever been applied. */
  --wa-line: rgba(255,255,255,.075);
  --wa-line-2: rgba(255,255,255,.15);
  --wa-hover: rgba(255,255,255,.045);
  --wa-tex: rgba(255,255,255,.022);
  --wa-veil: rgba(30,28,25,.92);
  --wa-shadow: 0 1px 2px rgba(0,0,0,.22);
  --wa-radius: 13px;
  --wa-av-sat: 34%;
  --wa-av-light: 40%;
}
/* :not(.ai-active) is not decoration — the dark theme's own body rule carries it,
   and without matching that specificity here the page behind the tab stays the
   desk's dark brown however the tab is themed. */
body.wa-active:not(.ai-active) { background: #1e1c19; }

.wa-app { height: 100%; display: flex; background: var(--wa-bg); color: var(--wa-text); position: relative; }

/* Thin, quiet scrollbars everywhere in the tab — the default Windows ones are
   as wide as a bubble's padding. */
#tab-whatsapp ::-webkit-scrollbar { width: 8px; height: 8px; }
#tab-whatsapp ::-webkit-scrollbar-thumb { background: var(--wa-line-2); border-radius: 8px; }
#tab-whatsapp ::-webkit-scrollbar-thumb:hover { background: var(--wa-text-3); }
#tab-whatsapp ::-webkit-scrollbar-track { background: transparent; }

/* --- shared bits --- */
.wa-btn {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--wa-on-accent); background: var(--wa-accent); border: 1px solid var(--wa-accent);
  border-radius: 8px; padding: 7px 14px;
}
.wa-btn:hover { filter: brightness(1.08); }
.wa-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.wa-btn.ghost { background: none; color: var(--wa-text-2); border-color: var(--wa-line-2); }
.wa-btn.ghost:hover { color: var(--wa-text); border-color: var(--wa-text-3); filter: none; }
.wa-btn.danger { background: none; color: var(--wa-del); border-color: var(--wa-del); }
.wa-btn.danger:hover { background: var(--wa-del-bg); filter: none; }

/* avatars — a real profile picture when WhatsApp has given us one, and initials
   on a hue derived from the number when it has not, so they still differ */
.wa-av {
  position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; letter-spacing: .3px; overflow: hidden;
  font-size: 14px; font-weight: 700; color: #fff;
  background: hsl(var(--wa-av-h, 30) var(--wa-av-sat) var(--wa-av-light));
}
.wa-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-av-big { width: 92px; height: 92px; font-size: 30px; margin: 0 auto 12px; }
.wa-av-sm { width: 34px; height: 34px; font-size: 11px; }
.wa-av-group { border-radius: 32%; }

/* connection light */
.wa-conn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 10.5px; font-weight: 600; color: var(--wa-text-2);
  padding: 4px 9px; border: 1px solid var(--wa-line); border-radius: 20px;
}
.wa-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wa-text-3); flex: none; }
.wa-conn.wa-ok .wa-dot { background: var(--wa-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-ok) 22%, transparent); }
.wa-conn.wa-wait .wa-dot { background: var(--wa-wait); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-wait) 22%, transparent); }
.wa-conn.wa-bad .wa-dot { background: var(--wa-del); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-del) 22%, transparent); }

/* --- pairing --- */
.wa-link { flex: 1; min-width: 0; display: grid; place-items: center; padding: 28px; overflow-y: auto; }
.wa-link.hide { display: none; }
.wa-link-card {
  display: flex; gap: 34px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: var(--wa-chrome); border: 1px solid var(--wa-line);
  border-radius: 18px; padding: 30px 32px; max-width: 780px;
}
.wa-link-steps { flex: 1 1 320px; min-width: 280px; }
.wa-link-steps h3 { font-family: 'Cormorant Garamond', serif; font-size: 25px; color: var(--wa-accent); margin-bottom: 12px; }
.wa-link-steps ol { margin: 0 0 14px 18px; font-size: 13px; color: var(--wa-text-2); line-height: 1.95; }
.wa-link-steps strong { color: var(--wa-text); }
.wa-link-note { font-size: 12px; color: var(--wa-text-3); line-height: 1.65; max-width: 46ch; }
.wa-link-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.wa-link-status { font-size: 12px; color: var(--wa-text-2); max-width: 50ch; line-height: 1.6; }
.wa-link-status code { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: var(--wa-hover); padding: 1px 5px; border-radius: 5px; }
.wa-qr {
  flex: none; width: 244px; height: 244px; display: grid; place-items: center;
  background: #fff; border-radius: 14px; padding: 12px;
}
.wa-qr:empty::after { content: 'The code appears here'; font-size: 11.5px; color: #9a9089; }
.wa-qr svg { width: 100%; height: 100%; display: block; }

/* --- the three panes ---
   One explicit, shrinkable row. Without it the row is sized to its content, the
   list grows past the bottom of the window, and nothing scrolls at all. */
.wa-main {
  flex: 1; min-width: 0; height: 100%;
  display: grid;
  grid-template-columns: var(--wa-side-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.wa-main.hide { display: none; }
.wa-main.wa-with-profile { grid-template-columns: var(--wa-side-w) minmax(0, 1fr) var(--wa-prof-w); }
.wa-main > * { min-width: 0; min-height: 0; }

/* --- sidebar --- */
.wa-side { display: flex; flex-direction: column; background: var(--wa-chrome); border-right: 1px solid var(--wa-line); position: relative; }
.wa-side-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; flex: none; }

/* the account: its real picture and name, and the way to the others */
.wa-me {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  background: none; border: 1px solid transparent; border-radius: 12px;
  padding: 5px 8px 5px 5px; cursor: pointer; font-family: inherit; text-align: left;
  transition: background .14s, border-color .14s;
}
.wa-me:hover { background: var(--wa-hover); border-color: var(--wa-line); }
.wa-me-av {
  position: relative; width: 38px; height: 38px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--wa-on-accent);
  background: var(--wa-accent);
}
.wa-me-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A slow turn on hover — it is the control that swaps accounts, and a picture
   that never moves does not read as one. */
.wa-me:hover .wa-me-av, .wa-me[aria-expanded="true"] .wa-me-av { animation: wa-spin 1.6s linear infinite; }
@keyframes wa-spin { to { transform: rotate(360deg); } }
.wa-me-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa-me-txt b {
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--wa-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-me-txt span { font-size: 10.5px; color: var(--wa-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-me-chev { color: var(--wa-text-3); flex: none; transition: transform .16s; }
.wa-me[aria-expanded="true"] .wa-me-chev { transform: rotate(180deg); }

/* the account switcher */
.wa-acc-menu {
  position: absolute; z-index: 30; top: 58px; left: 12px; right: 12px;
  background: var(--wa-raise); border: 1px solid var(--wa-line-2); border-radius: 13px;
  padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.wa-acc-menu.hide { display: none; }
.wa-acc-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 9px; padding: 8px 9px; cursor: pointer;
  font-family: inherit; color: var(--wa-text);
}
.wa-acc-row:hover { background: var(--wa-hover); }
.wa-acc-row.on { background: color-mix(in srgb, var(--wa-accent) 14%, transparent); }
.wa-acc-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa-acc-txt b { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-acc-txt span { font-size: 10px; color: var(--wa-text-3); }
.wa-acc-row.on .wa-acc-txt b { color: var(--wa-accent); }
.wa-acc-n {
  font-size: 9.5px; font-weight: 800; color: var(--wa-on-accent); background: var(--wa-accent);
  border-radius: 20px; padding: 1px 7px; flex: none;
}
.wa-acc-sep { height: 1px; background: var(--wa-line); margin: 5px 4px; }
.wa-acc-add { color: var(--wa-accent); }
.wa-acc-add .wa-acc-plus {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px dashed var(--wa-accent); font-size: 17px; line-height: 1;
}

/* search
   Full-bleed: no side margin, no pill, square corners, the whole width of the
   column. Inset behind its own padding it read as a widget sitting on top of
   the list; flush, with a rule under it, it reads as the top of the list. */
.wa-search-wrap {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 0; flex: none;
  background: var(--wa-chrome); border: none; border-radius: 0; padding: 11px 16px;
  border-top: 1px solid var(--wa-line); border-bottom: 1px solid var(--wa-line);
  transition: background .15s;
}
.wa-search-wrap:focus-within { background: var(--wa-hover); }
/* The focus mark is a line along the bottom edge rather than a ring: a ring on
   a full-width bar draws a box around the whole column. */
.wa-search-wrap::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--wa-accent); transform: scaleX(0); transition: transform .16s ease;
}
.wa-search-wrap:focus-within::after { transform: scaleX(1); }
.wa-search-ico { color: var(--wa-text-3); flex: none; transition: color .15s; }
.wa-search-wrap:focus-within .wa-search-ico { color: var(--wa-accent); }
.wa-search {
  flex: 1; min-width: 0; background: none; border: none; outline: none; padding: 0;
  font-family: inherit; font-size: 13px; color: var(--wa-text);
}
.wa-search::placeholder { color: var(--wa-text-3); }
.wa-search:focus { background: none; box-shadow: none; border: none; }
.wa-search-x {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--wa-line-2); color: var(--wa-text); font-size: 13px; line-height: 1; padding: 0;
}
.wa-search-x:hover { background: var(--wa-text-3); }

/* filters */
/* Wrapping rather than scrolling sideways: five chips with counts on them do not
   fit a 340px column, and a filter you cannot see is a filter you do not know
   exists. A second row costs 30px once. */
.wa-filters {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 9px; flex: none;
}
.wa-fchip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--wa-text-2);
  background: var(--wa-raise); border: 1px solid transparent; border-radius: 20px; padding: 5px 11px;
  transition: color .12s, background .12s, border-color .12s;
}
.wa-fchip:hover { color: var(--wa-text); }
.wa-fchip.on {
  color: var(--wa-on-accent); background: var(--wa-accent); border-color: var(--wa-accent);
}
.wa-fchip-n {
  font-size: 9.5px; font-weight: 800; border-radius: 20px; padding: 0 5px;
  background: var(--wa-line-2); color: var(--wa-text);
}
.wa-fchip.on .wa-fchip-n { background: color-mix(in srgb, var(--wa-on-accent) 18%, transparent); color: var(--wa-on-accent); }
.wa-fchip-n:empty { display: none; }

/* The one that actually has to scroll. flex:1 + min-height:0 inside a row that
   cannot grow is what makes overflow-y do anything here. */
.wa-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 6px; }
.wa-item {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; position: relative;
  background: none; border: none; padding: 10px 14px; cursor: pointer;
  font-family: inherit; transition: background .12s;
}
.wa-item + .wa-item::before {
  content: ''; position: absolute; left: 70px; right: 0; top: 0; height: 1px; background: var(--wa-line);
}
.wa-item:hover { background: var(--wa-hover); }
.wa-item.active { background: color-mix(in srgb, var(--wa-accent) 12%, transparent); }
.wa-item.active::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--wa-accent); }
.wa-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wa-item-top { display: flex; align-items: baseline; gap: 8px; }
.wa-item-name {
  font-size: 13.5px; font-weight: 600; color: var(--wa-text); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-item.active .wa-item-name { color: var(--wa-accent); }
.wa-item.wa-unread .wa-item-name { font-weight: 750; }
.wa-item-time { font-size: 10.5px; color: var(--wa-text-3); flex: none; }
.wa-item.wa-unread .wa-item-time { color: var(--wa-accent); font-weight: 700; }
.wa-item-prev {
  font-size: 12px; color: var(--wa-text-2); display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-item-prev span { overflow: hidden; text-overflow: ellipsis; }
.wa-prev-you { color: var(--wa-text-3); flex: none; }
.wa-prev-del { color: var(--wa-del); font-style: italic; }
.wa-item-meta { font-size: 10px; color: var(--wa-text-3); display: flex; gap: 7px; align-items: center; }
.wa-item-num { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.wa-item-count { margin-left: auto; }
.wa-chip-del {
  background: var(--wa-del-bg); color: var(--wa-del);
  font-weight: 700; padding: 1px 7px; border-radius: 20px; font-size: 9.5px;
}
.wa-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  background: var(--wa-accent); color: var(--wa-on-accent);
}
.wa-star {
  border: none; background: none; padding: 0 2px; cursor: pointer; flex: none;
  color: var(--wa-text-3); line-height: 1; font-size: 13px;
}
.wa-star:hover { color: var(--wa-accent); }
.wa-star.on { color: var(--wa-accent); }
.wa-item-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--wa-text-3); border: 1px solid var(--wa-line-2); border-radius: 4px; padding: 0 4px;
}

.wa-side-foot {
  display: flex; flex-direction: column; gap: 6px; flex: none;
  padding: 9px 12px; border-top: 1px solid var(--wa-line);
}
.wa-foot-row { display: flex; align-items: center; gap: 8px; }
.wa-foot-row .wa-conn { margin-left: auto; }
.wa-foot-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--wa-text-2);
  background: none; border: 1px solid var(--wa-line-2); border-radius: 8px; padding: 6px 11px;
  transition: color .12s, border-color .12s, background .12s;
}
.wa-foot-btn:hover { color: var(--wa-accent); border-color: var(--wa-accent); background: color-mix(in srgb, var(--wa-accent) 10%, transparent); }
.wa-stats { font-size: 10.5px; color: var(--wa-text-3); line-height: 1.45; min-width: 0; text-align: right; }

/* the icon buttons beside the account */
.wa-head-ico {
  flex: none; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--wa-line); color: var(--wa-text-2);
  transition: color .12s, border-color .12s, background .12s;
}
.wa-head-ico:hover { color: var(--wa-accent); border-color: var(--wa-accent); background: color-mix(in srgb, var(--wa-accent) 10%, transparent); }

/* --- thread --- */
.wa-thread-wrap { display: flex; flex-direction: column; background: var(--wa-bg); position: relative; }
.wa-thread-head {
  flex: none; min-height: 62px; display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--wa-line); background: var(--wa-chrome); padding-right: 10px;
}
.wa-th-id {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left;
  background: none; border: none; padding: 10px 16px; cursor: pointer; font-family: inherit;
  transition: background .12s;
}
.wa-th-id:hover { background: var(--wa-hover); }
.wa-th-id .wa-av { width: 40px; height: 40px; font-size: 13px; }
.wa-th-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-th-name { font-size: 14.5px; font-weight: 600; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-th-sub { font-size: 11.5px; color: var(--wa-text-3); font-variant-numeric: tabular-nums; }
.wa-th-sub b { color: var(--wa-text-2); font-weight: 600; letter-spacing: .2px; }
.wa-th-act {
  flex: none; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: none; border: 1px solid var(--wa-line); color: var(--wa-text-3);
}
.wa-th-act:hover { color: var(--wa-accent); border-color: var(--wa-accent); }
.wa-th-act.on { color: var(--wa-accent); border-color: var(--wa-accent); }
.wa-back {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; margin-left: 10px; border-radius: 9px;
  background: none; border: 1px solid var(--wa-line-2); color: var(--wa-text-2);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.wa-back:hover { color: var(--wa-text); border-color: var(--wa-text-3); }

.wa-thread {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px;
  /* A whisper of texture so the bubbles sit on something, done with a gradient
     rather than an image — the tab has to work with no network at all. */
  background-image: radial-gradient(var(--wa-tex) 1px, transparent 1px);
  background-size: 22px 22px;
}
.wa-day { text-align: center; margin: 14px 0 8px; }
.wa-day span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--wa-text-3); background: var(--wa-chrome);
  border: 1px solid var(--wa-line); border-radius: 20px; padding: 4px 12px;
}
.wa-msg { display: flex; }
.wa-msg.wa-run { margin-top: -5px; }
.wa-in { justify-content: flex-start; }
.wa-out { justify-content: flex-end; }
.wa-bubble {
  max-width: min(72%, 560px); border-radius: var(--wa-radius);
  padding: 8px 12px 5px; background: var(--wa-in-bg);
  box-shadow: var(--wa-shadow);
}
.wa-in .wa-bubble { border-top-left-radius: 4px; }
.wa-out .wa-bubble { background: var(--wa-out-bg); border-top-right-radius: 4px; }
.wa-run .wa-bubble { border-radius: var(--wa-radius); }
.wa-body { font-size: 13.5px; line-height: 1.5; color: var(--wa-text); white-space: pre-wrap; word-break: break-word; }
.wa-out .wa-body { color: var(--wa-out-text); }
.wa-media-lbl { font-style: italic; color: var(--wa-text-2); }
.wa-meta { font-size: 9.5px; color: var(--wa-text-3); text-align: right; margin-top: 3px; }
/* who spoke, in a group */
.wa-who { font-size: 11px; font-weight: 700; color: var(--wa-accent); margin-bottom: 3px; }

/* media inside a bubble */
.wa-shot { display: block; padding: 0; border: none; background: none; cursor: pointer; margin: -2px -6px 6px; }
.wa-shot img { display: block; max-width: 100%; max-height: 330px; border-radius: 10px; }
.wa-shot-thumb { position: relative; cursor: default; }
.wa-shot-thumb img { opacity: .9; }
.wa-shot-note {
  position: absolute; left: 8px; bottom: 8px; font-size: 9.5px; font-weight: 700;
  background: rgba(0,0,0,.68); color: #fff; padding: 3px 8px; border-radius: 20px;
}
/* A <video> takes its intrinsic size from its poster until it is played, and the
   thumbnail WhatsApp ships inside the message is 40x72 pixels — which is exactly
   why one used to sit there as a stamp until a double-click into fullscreen
   forced a re-layout. So the size is stated here instead: the shape comes from
   the video's own dimensions (--wa-ar, off the message, or read off the file the
   moment its metadata lands) and the box is fitted to that, which is what keeps
   a portrait clip from being letterboxed inside a landscape frame. */
.wa-vid {
  --wa-ar: 1;
  display: block; width: min(340px, calc(400px * var(--wa-ar))); max-width: 100%;
  aspect-ratio: var(--wa-ar); height: auto;
  border-radius: 10px; margin: -2px -6px 6px; background: #000;
  object-fit: contain;
}
.wa-nofile {
  font-size: 12px; font-style: italic; color: var(--wa-text-2);
  background: var(--wa-hover); border-radius: 9px; padding: 8px 11px; margin-bottom: 4px;
}

/* --- voice notes and audio ---
   The browser's own <audio> control is a light-grey slab that ignores every
   colour in this file and is 300px wide whatever the bubble is. This is the
   same three parts it has — play, position, length — drawn to match, with the
   bars being the real waveform WhatsApp sends alongside a voice note. */
/* The width lives on the bubble, for the same reason the album's does: a bubble
   is sized to its contents, so asking the player itself for 258px makes a bubble
   that cannot shrink below it, and on a phone the difference hangs off the side
   of the conversation. A definite bubble lets the bars flex into whatever is
   actually available. */
.wa-bubble.wa-has-aud { width: min(310px, 100%); }
.wa-aud {
  display: flex; align-items: center; gap: 11px; margin: 1px 0 5px; min-width: 0;
}
.wa-aud-play {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: none;
  background: var(--wa-accent); color: var(--wa-on-accent);
  transition: filter .12s;
}
.wa-aud-play:hover { filter: brightness(1.1); }
.wa-aud-play .wa-ico-pause { display: none; }
.wa-aud.playing .wa-ico-play { display: none; }
.wa-aud.playing .wa-ico-pause { display: block; }
.wa-aud-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wa-aud-bars {
  position: relative; height: 26px; cursor: pointer;
}
.wa-aud-row {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 2px;
}
.wa-aud-row i {
  flex: 1; min-width: 1px; border-radius: 2px; background: var(--wa-text-3);
  height: var(--h, 30%);
}
/* The played part is the same bars again, clipped. clip-path costs no layout,
   so there is nothing to measure and nothing to keep in sync. */
.wa-aud-fill { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.wa-aud-fill i { background: var(--wa-accent); }
.wa-out .wa-aud-row i { background: color-mix(in srgb, var(--wa-out-text) 40%, transparent); }
.wa-out .wa-aud-fill i { background: var(--wa-out-text); }
.wa-aud-t {
  flex: none; font-size: 10.5px; color: var(--wa-text-3);
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
}
.wa-out .wa-aud-t { color: color-mix(in srgb, var(--wa-out-text) 70%, transparent); }
.wa-aud-ptt { font-size: 9px; color: var(--wa-text-3); letter-spacing: .4px; text-transform: uppercase; font-weight: 700; }

.wa-doc {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--wa-hover); border-radius: 10px; padding: 9px 11px; margin-bottom: 4px;
}
.wa-doc-ico {
  font-size: 8.5px; font-weight: 800; letter-spacing: .5px; color: var(--wa-on-accent);
  background: var(--wa-accent); border-radius: 5px; padding: 4px 5px; flex: none;
}
.wa-doc-nm { font-size: 12.5px; color: var(--wa-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-doc-go { font-size: 10.5px; font-weight: 700; color: var(--wa-accent); flex: none; }
.wa-doc-dead .wa-doc-go { color: var(--wa-text-3); font-weight: 500; font-style: italic; }

/* the deleted flag — this is the feature, so it is meant to be loud */
.wa-revoked .wa-bubble { background: var(--wa-del-bg); border: 1px dashed var(--wa-del); }
.wa-del-body { text-decoration: line-through; text-decoration-color: var(--wa-del); color: var(--wa-text-2); }
.wa-del-tag {
  display: block; margin-top: 4px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .7px; text-transform: uppercase; color: var(--wa-del);
}

/* --- composer --- */
.wa-composer {
  display: flex; flex-direction: column; gap: 10px; flex: none;
  padding: 12px 16px; border-top: 1px solid var(--wa-line); background: var(--wa-chrome);
}
.wa-comp-row { display: flex; gap: 9px; align-items: flex-end; }
.wa-comp-row.hide { display: none; }
.wa-attach, .wa-mic {
  flex: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--wa-text-2);
  background: none; border: 1px solid var(--wa-line-2); transition: color .12s, border-color .12s, background .12s;
}
.wa-attach:hover, .wa-mic:hover { color: var(--wa-accent); border-color: var(--wa-accent); background: color-mix(in srgb, var(--wa-accent) 10%, transparent); }
.wa-attach:disabled, .wa-mic:disabled { opacity: .35; cursor: not-allowed; }

/* files queued to send */
.wa-tray { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.wa-tray.hide { display: none; }
.wa-chip {
  position: relative; display: flex; align-items: center; gap: 9px;
  background: var(--wa-raise); border: 1px solid var(--wa-line); border-radius: 11px;
  padding: 8px 30px 8px 8px; max-width: 260px;
}
.wa-chip-thumb {
  width: 42px; height: 42px; border-radius: 8px; flex: none; object-fit: cover;
  display: grid; place-items: center; background: var(--wa-raise-2);
  font-size: 8.5px; font-weight: 800; letter-spacing: .4px; color: var(--wa-accent);
}
img.wa-chip-thumb { display: block; }
.wa-chip-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-chip-nm { font-size: 12px; color: var(--wa-text); max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chip-sz { font-size: 10px; color: var(--wa-text-3); }
.wa-chip-x {
  position: absolute; top: 4px; right: 5px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: none; color: var(--wa-text-3); font-size: 15px; line-height: 1; cursor: pointer;
}
.wa-chip-x:hover { color: var(--wa-text); background: var(--wa-hover); }
.wa-chip-bad { border-color: var(--wa-del); }
.wa-chip-bad .wa-chip-sz { color: var(--wa-del); }
.wa-tray-note { font-size: 11px; color: var(--wa-text-3); align-self: center; }

/* recording */
.wa-rec {
  display: flex; align-items: center; gap: 11px;
  background: var(--wa-raise); border: 1px solid var(--wa-del); border-radius: 22px; padding: 5px 6px 5px 6px;
}
.wa-rec.hide { display: none; }
.wa-rec-x {
  flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: none; background: none; color: var(--wa-text-2);
}
.wa-rec-x:hover { color: var(--wa-del); background: var(--wa-del-bg); }
.wa-rec-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--wa-del);
  animation: wa-pulse 1.1s ease-in-out infinite;
}
@keyframes wa-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.wa-rec-t { flex: none; font-size: 12.5px; font-weight: 700; color: var(--wa-text); font-variant-numeric: tabular-nums; min-width: 38px; }
.wa-rec-wave { flex: 1; min-width: 0; height: 34px; display: block; }
.wa-rec-hint { flex: none; font-size: 10.5px; color: var(--wa-text-3); }
.wa-rec-ok { margin-left: 2px; }

/* drag a file anywhere over the conversation */
.wa-drop {
  position: absolute; inset: 0; z-index: 5; display: none; place-items: center;
  background: var(--wa-veil); border: 2px dashed var(--wa-accent); border-radius: 4px;
  pointer-events: none;
}
.wa-drop.on { display: grid; }
.wa-drop span { font-size: 15px; font-weight: 600; color: var(--wa-accent); }
.wa-composer textarea {
  flex: 1; min-width: 0; resize: none; font-family: inherit; font-size: 13.5px; line-height: 1.5;
  color: var(--wa-text); background: var(--wa-raise);
  border: 1px solid transparent; border-radius: 12px; padding: 10px 14px; max-height: 150px;
  transition: border-color .15s;
}
.wa-composer textarea:focus { outline: none; border-color: var(--wa-line-2); box-shadow: none; background: var(--wa-raise); }
.wa-composer textarea::placeholder { color: var(--wa-text-3); }
.wa-composer textarea:disabled { opacity: .5; cursor: not-allowed; }
.wa-send {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: var(--wa-on-accent); background: var(--wa-accent);
  transition: filter .12s, opacity .12s;
}
.wa-send:hover { filter: brightness(1.09); }
.wa-send:disabled { opacity: .35; cursor: not-allowed; filter: none; }
.wa-send svg { margin-left: 2px; }

/* --- contact panel --- */
.wa-profile { border-left: 1px solid var(--wa-line); background: var(--wa-chrome); overflow-y: auto; padding-bottom: 20px; }
.wa-profile.hide { display: none; }
.wa-prof-head { position: relative; text-align: center; padding: 24px 18px 16px; border-bottom: 1px solid var(--wa-line); }
.wa-prof-x {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 21px; line-height: 1; color: var(--wa-text-3); cursor: pointer; padding: 2px 7px; border-radius: 7px;
}
.wa-prof-x:hover { color: var(--wa-text); background: var(--wa-hover); }
.wa-prof-name { font-size: 16px; font-weight: 700; color: var(--wa-text); }
.wa-prof-num { font-size: 13px; color: var(--wa-text-2); font-variant-numeric: tabular-nums; margin-top: 3px; letter-spacing: .3px; }
.wa-prof-noref { font-size: 11px; color: var(--wa-text-3); line-height: 1.6; }
.wa-prof-noref small { font-size: 10px; font-style: italic; }
.wa-prof-warn { font-size: 10.5px; color: var(--wa-del); margin-top: 8px; font-weight: 600; }
.wa-prof-ok { font-size: 10.5px; color: var(--wa-ok); margin-top: 8px; font-weight: 600; }
.wa-prof-stats { display: flex; border-bottom: 1px solid var(--wa-line); }
.wa-prof-stats > div { flex: 1; text-align: center; padding: 13px 4px; }
.wa-prof-stats b { display: block; font-size: 17px; font-weight: 700; color: var(--wa-text); }
.wa-prof-stats span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--wa-text-3); }
.wa-prof-red b { color: var(--wa-del); }
.wa-prof-dates { font-size: 10.5px; color: var(--wa-text-3); padding: 11px 16px; line-height: 1.75; border-bottom: 1px solid var(--wa-line); }
.wa-prof-h {
  font-size: 9.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--wa-accent); padding: 16px 16px 8px;
}
.wa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 10px; }
.wa-cell { position: relative; aspect-ratio: 1; padding: 0; border: none; background: var(--wa-raise); border-radius: 7px; overflow: hidden; cursor: pointer; }
.wa-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-cell-dim img { opacity: .55; }
.wa-cell-none { display: grid; place-items: center; font-size: 9px; color: var(--wa-text-3); cursor: default; }
.wa-cell-play {
  position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 13px solid rgba(255,255,255,.92); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.wa-prof-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--wa-line); }
.wa-prof-row .wa-aud { flex: 1; min-width: 0; margin: 0; }
.wa-prof-ico { color: var(--wa-accent); font-size: 14px; flex: none; }
.wa-prof-txt { font-size: 12px; color: var(--wa-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-prof-when { display: block; font-size: 9.5px; color: var(--wa-text-3); }
.wa-prof-go { font-size: 10.5px; font-weight: 700; color: var(--wa-accent); text-decoration: none; flex: none; }
.wa-prof-dead { font-size: 10px; color: var(--wa-text-3); font-style: italic; flex: none; }
.wa-prof-none { font-size: 11.5px; color: var(--wa-text-3); padding: 2px 16px 10px; font-style: italic; }

/* --- settings ---
   Over the whole tab, not tucked into the footer: half of what is in here
   changes the real WhatsApp account rather than this app's idea of it. */
.wa-sheet {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: var(--wa-veil); padding: 26px;
}
.wa-sheet.hide { display: none; }
.wa-sheet-card {
  width: min(680px, 100%); max-height: 100%; display: flex; flex-direction: column;
  background: var(--wa-chrome); border: 1px solid var(--wa-line-2); border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.45); overflow: hidden;
}
.wa-sheet-head {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: 15px 18px; border-bottom: 1px solid var(--wa-line);
}
.wa-sheet-head h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--wa-accent); }
.wa-sheet-x { border: none; background: none; font-size: 24px; line-height: 1; color: var(--wa-text-3); cursor: pointer; padding: 0 6px; border-radius: 7px; }
.wa-sheet-x:hover { color: var(--wa-text); background: var(--wa-hover); }
.wa-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 18px 20px; }
.wa-sec { padding: 16px 0; border-bottom: 1px solid var(--wa-line); }
.wa-sec:last-child { border-bottom: none; }
.wa-sec > h4 {
  font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--wa-accent); margin-bottom: 12px;
}
.wa-sec-note { font-size: 11px; color: var(--wa-text-3); line-height: 1.65; margin-top: 8px; }
.wa-profile-edit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wa-pe-av { position: relative; flex: none; }
.wa-pe-av .wa-av { width: 76px; height: 76px; font-size: 24px; }
.wa-pe-cam {
  position: absolute; right: -3px; bottom: -3px; width: 27px; height: 27px; border-radius: 50%;
  border: 2px solid var(--wa-chrome); background: var(--wa-accent); color: var(--wa-on-accent);
  display: grid; place-items: center; cursor: pointer; font-size: 12px; line-height: 1;
}
.wa-pe-fields { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.wa-field { display: flex; gap: 8px; align-items: center; }
.wa-field label { font-size: 10.5px; color: var(--wa-text-3); flex: none; width: 76px; }
.wa-input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 13px; color: var(--wa-text);
  background: var(--wa-raise); border: 1px solid var(--wa-line); border-radius: 9px; padding: 8px 11px;
}
.wa-input:focus { outline: none; border-color: var(--wa-accent); background: var(--wa-raise); box-shadow: none; }
.wa-input:disabled { opacity: .55; cursor: not-allowed; }
.wa-static { font-size: 12.5px; color: var(--wa-text-2); font-variant-numeric: tabular-nums; }
.wa-row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.wa-toggle { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; padding: 7px 0; }
.wa-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.wa-toggle-box {
  flex: none; width: 36px; height: 20px; border-radius: 20px; margin-top: 1px;
  background: var(--wa-raise-2); border: 1px solid var(--wa-line-2); position: relative; transition: background .15s;
}
.wa-toggle-box::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--wa-text-3); transition: transform .15s, background .15s;
}
.wa-toggle input:checked + .wa-toggle-box { background: var(--wa-accent); border-color: var(--wa-accent); }
.wa-toggle input:checked + .wa-toggle-box::after { transform: translateX(16px); background: var(--wa-on-accent); }
.wa-toggle-txt b { display: block; font-size: 12.5px; font-weight: 600; color: var(--wa-text); }
.wa-toggle-txt span { font-size: 10.5px; color: var(--wa-text-3); line-height: 1.55; }

.wa-acc-list { display: flex; flex-direction: column; gap: 6px; }
.wa-acc-item {
  display: flex; align-items: center; gap: 11px;
  background: var(--wa-raise); border: 1px solid var(--wa-line); border-radius: 11px; padding: 9px 11px;
}
.wa-acc-item.on { border-color: var(--wa-accent); }
.wa-acc-item .wa-acc-txt { flex: 1; }
.wa-mini {
  font-family: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; flex: none;
  color: var(--wa-text-2); background: none; border: 1px solid var(--wa-line-2);
  border-radius: 7px; padding: 4px 9px;
}
.wa-mini:hover { color: var(--wa-accent); border-color: var(--wa-accent); }
.wa-mini.danger:hover { color: var(--wa-del); border-color: var(--wa-del); }

/* theme editor */
.wa-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.wa-preset {
  display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--wa-text-2);
  background: var(--wa-raise); border: 1px solid var(--wa-line); border-radius: 10px; padding: 6px 11px 6px 7px;
}
.wa-preset:hover { color: var(--wa-text); border-color: var(--wa-line-2); }
.wa-preset.on { border-color: var(--wa-accent); color: var(--wa-accent); }
.wa-swatches { display: flex; gap: 2px; }
.wa-swatches i { width: 11px; height: 18px; border-radius: 3px; display: block; }
.wa-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 9px; }
.wa-color { display: flex; align-items: center; gap: 9px; }
.wa-color input[type="color"] {
  flex: none; width: 34px; height: 30px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--wa-line-2); border-radius: 8px;
}
.wa-color span { font-size: 11px; color: var(--wa-text-2); line-height: 1.35; }

/* =====================================================================
   Message furniture: ticks, the hover menu, reactions, replies, albums
   ===================================================================== */

/* --- delivery ticks ---
   One tick sent, two delivered, two in the accent read. Only ever on our own
   messages: there is nothing to report about somebody else's. */
.wa-ticks { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: currentColor; opacity: .75; }
.wa-ticks svg { display: block; }
.wa-tick-read { color: var(--wa-accent); opacity: 1; }
.wa-tick-wait { opacity: .5; }
.wa-out .wa-meta { color: color-mix(in srgb, var(--wa-out-text) 62%, transparent); }
/* A themed accent can be close to the outgoing bubble; read ticks stay legible
   by leaning on the bubble's own text colour when they would otherwise vanish. */
.wa-out .wa-tick-read { color: var(--wa-accent); filter: saturate(1.3); }

/* --- the hover arrow and its menu --- */
.wa-bubble { position: relative; }
.wa-caret {
  position: absolute; top: 2px; right: 2px; width: 26px; height: 24px; padding: 0;
  border: none; cursor: pointer; border-radius: 0 var(--wa-radius) 0 8px;
  display: grid; place-items: center; color: var(--wa-text-2);
  background: linear-gradient(105deg, transparent 0%, var(--wa-in-bg) 42%, var(--wa-in-bg) 100%);
  opacity: 0; transform: translateY(-2px); transition: opacity .13s ease, transform .13s ease;
}
.wa-out .wa-caret { background: linear-gradient(105deg, transparent 0%, var(--wa-out-bg) 42%, var(--wa-out-bg) 100%); color: var(--wa-out-text); }
.wa-msg:hover .wa-caret, .wa-caret:focus-visible, .wa-msg.wa-menu-on .wa-caret { opacity: 1; transform: translateY(0); }
.wa-msg.wa-menu-on .wa-bubble { box-shadow: var(--wa-shadow), 0 0 0 1px var(--wa-accent); }

.wa-menu {
  position: fixed; z-index: 210; min-width: 208px; max-width: 260px; padding: 6px;
  background: var(--wa-raise); border: 1px solid var(--wa-line-2); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.wa-menu.hide { display: none; }
/* the reaction row, sitting above the list like WhatsApp's */
.wa-react-row {
  display: flex; gap: 2px; padding: 2px 2px 7px; margin-bottom: 5px;
  border-bottom: 1px solid var(--wa-line);
}
.wa-react-b {
  flex: 1; border: none; background: none; cursor: pointer; border-radius: 9px;
  font-size: 19px; line-height: 1; padding: 5px 0; transition: background .1s, transform .1s;
}
.wa-react-b:hover { background: var(--wa-hover); transform: scale(1.18); }
.wa-react-b.on { background: color-mix(in srgb, var(--wa-accent) 22%, transparent); }
.wa-mi {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--wa-text);
  background: none; border: none; border-radius: 8px; padding: 8px 10px;
}
.wa-mi:hover { background: var(--wa-hover); }
.wa-mi-ico { flex: none; width: 15px; display: grid; place-items: center; color: var(--wa-text-3); }
.wa-mi:hover .wa-mi-ico { color: var(--wa-accent); }
.wa-mi.danger { color: var(--wa-del); }
.wa-mi.danger .wa-mi-ico { color: var(--wa-del); }
.wa-mi.danger:hover { background: var(--wa-del-bg); }
.wa-mi-sub { display: block; font-size: 10px; color: var(--wa-text-3); margin-top: 1px; }
.wa-mi-sep { height: 1px; background: var(--wa-line); margin: 5px 4px; }

/* --- reactions under a bubble --- */
.wa-reacts {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 4px -4px -2px;
}
.wa-react-chip {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer; font-family: inherit;
  font-size: 12px; line-height: 1; color: var(--wa-text-2);
  background: var(--wa-bg); border: 1px solid var(--wa-line-2); border-radius: 20px; padding: 3px 7px;
}
.wa-react-chip b { font-size: 9.5px; font-weight: 700; }
.wa-react-chip.mine { border-color: var(--wa-accent); color: var(--wa-accent); }
.wa-react-chip:hover { border-color: var(--wa-accent); }

/* --- a reply, quoted inside the bubble --- */
.wa-quote {
  display: flex; gap: 8px; align-items: stretch; cursor: pointer; text-align: left; width: 100%;
  background: color-mix(in srgb, var(--wa-text) 8%, transparent);
  border: none; border-radius: 7px; padding: 6px 9px; margin: 0 0 5px; font-family: inherit;
}
.wa-quote:hover { background: color-mix(in srgb, var(--wa-text) 13%, transparent); }
.wa-quote-line { flex: none; width: 3px; border-radius: 3px; background: var(--wa-accent); }
.wa-quote-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-quote-who { font-size: 11px; font-weight: 700; color: var(--wa-accent); }
.wa-quote-body {
  font-size: 12px; color: var(--wa-text-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wa-out .wa-quote-body { color: color-mix(in srgb, var(--wa-out-text) 78%, transparent); }
/* jumped to from a quote, or landed on by the in-chat search */
@keyframes wa-flash { 0%, 62% { box-shadow: 0 0 0 2px var(--wa-accent); } 100% { box-shadow: none; } }
.wa-msg.wa-flash .wa-bubble { animation: wa-flash 1.5s ease-out; }

/* the reply being composed */
.wa-reply-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--wa-raise); border-left: 3px solid var(--wa-accent);
  border-radius: 8px; padding: 7px 10px;
}
.wa-reply-bar.hide { display: none; }
.wa-reply-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wa-reply-txt b { font-size: 11px; color: var(--wa-accent); font-weight: 700; }
.wa-reply-txt span {
  font-size: 11.5px; color: var(--wa-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-reply-x {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  background: none; color: var(--wa-text-3); font-size: 16px; line-height: 1;
}
.wa-reply-x:hover { color: var(--wa-text); background: var(--wa-hover); }

/* --- albums ---
   Several photos sent together are one thing, not six. Same grid WhatsApp
   uses, with the overflow counted on the last tile. */
/* The width goes on the BUBBLE, not on the grid. A bubble is otherwise sized to
   its contents, so a percentage width inside it is a percentage of something
   that does not exist yet and the grid collapses to four postage stamps. Giving
   the bubble a definite width fixes that — and unlike a vw measurement it stays
   inside the bubble's own max-width, so an album cannot hang off the edge of the
   thread on a narrow window. */
.wa-bubble.wa-has-album { width: min(332px, 100%); }
.wa-album {
  display: grid; gap: 3px; margin: -2px -6px 6px; border-radius: 10px; overflow: hidden;
  width: auto;
}
.wa-album-2 { grid-template-columns: 1fr 1fr; }
.wa-album-3 { grid-template-columns: 1fr 1fr; }
.wa-album-3 > :first-child { grid-row: span 2; }
.wa-album-4 { grid-template-columns: 1fr 1fr; }
.wa-album-cell {
  position: relative; padding: 0; border: none; cursor: pointer; overflow: hidden;
  background: var(--wa-raise); aspect-ratio: 1;
}
.wa-album-3 > .wa-album-cell:first-child { aspect-ratio: 1 / 2.03; }
.wa-album-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-album-cell.dim img { opacity: .5; }
.wa-album-more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 21px; font-weight: 700;
}
.wa-album-play {
  position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 15px solid rgba(255,255,255,.94); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}

/* =====================================================================
   The emoji keyboard
   ===================================================================== */
.wa-emoji {
  position: absolute; left: 14px; bottom: 78px; z-index: 60; width: min(348px, calc(100% - 28px));
  display: flex; flex-direction: column;
  background: var(--wa-raise); border: 1px solid var(--wa-line-2); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.45); overflow: hidden;
}
.wa-emoji.hide { display: none; }
.wa-emoji-tabs { display: flex; gap: 2px; padding: 7px 8px 5px; border-bottom: 1px solid var(--wa-line); }
.wa-emoji-tab {
  flex: 1; border: none; background: none; cursor: pointer; border-radius: 8px;
  font-size: 16px; line-height: 1; padding: 5px 0; opacity: .55; transition: opacity .12s, background .12s;
}
.wa-emoji-tab:hover { opacity: 1; background: var(--wa-hover); }
.wa-emoji-tab.on { opacity: 1; background: color-mix(in srgb, var(--wa-accent) 18%, transparent); }
.wa-emoji-find {
  margin: 8px 10px 4px; font-family: inherit; font-size: 12.5px; color: var(--wa-text);
  background: var(--wa-bg); border: 1px solid var(--wa-line); border-radius: 9px; padding: 7px 10px;
}
.wa-emoji-find:focus { outline: none; border-color: var(--wa-accent); box-shadow: none; background: var(--wa-bg); }
.wa-emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  padding: 6px 8px 10px; max-height: 236px; overflow-y: auto;
}
.wa-emoji-h {
  grid-column: 1 / -1; font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--wa-text-3); padding: 8px 3px 3px;
}
.wa-emoji-b {
  border: none; background: none; cursor: pointer; border-radius: 8px;
  font-size: 21px; line-height: 1; padding: 5px 0; transition: background .1s, transform .1s;
}
.wa-emoji-b:hover { background: var(--wa-hover); transform: scale(1.16); }
.wa-emoji-none { grid-column: 1 / -1; font-size: 11.5px; color: var(--wa-text-3); padding: 14px 4px; text-align: center; }

/* =====================================================================
   Searching inside the open conversation
   ===================================================================== */
.wa-find {
  flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 14px;
  background: var(--wa-chrome); border-bottom: 1px solid var(--wa-line); color: var(--wa-text-3);
}
.wa-find.hide { display: none; }
.wa-find input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 12.5px; color: var(--wa-text);
  background: var(--wa-raise); border: 1px solid var(--wa-line); border-radius: 8px; padding: 6px 10px;
}
.wa-find input:focus { outline: none; border-color: var(--wa-accent); box-shadow: none; background: var(--wa-raise); }
.wa-find-n { font-size: 11px; color: var(--wa-text-3); flex: none; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.wa-find-b {
  flex: none; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: none; border: 1px solid var(--wa-line); color: var(--wa-text-2); font-size: 13px; line-height: 1;
}
.wa-find-b:hover { color: var(--wa-accent); border-color: var(--wa-accent); }
.wa-find-b:disabled { opacity: .4; cursor: not-allowed; }
mark.wa-hit { background: color-mix(in srgb, var(--wa-accent) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.wa-msg.wa-hit-on .wa-bubble { box-shadow: var(--wa-shadow), 0 0 0 2px var(--wa-accent); }

/* =====================================================================
   Group and contact management
   ===================================================================== */
.wa-th-acts { display: flex; align-items: center; gap: 6px; flex: none; position: relative; }
.wa-th-menu {
  position: absolute; z-index: 50; top: 40px; right: 0; min-width: 216px; padding: 6px;
  background: var(--wa-raise); border: 1px solid var(--wa-line-2); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.wa-th-menu.hide { display: none; }
/* the member list, in the info panel */
.wa-mem {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px; position: relative;
}
.wa-mem:hover { background: var(--wa-hover); }
.wa-mem .wa-av { width: 34px; height: 34px; font-size: 11px; }
.wa-mem-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-mem-nm { font-size: 12.5px; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-mem-num { font-size: 10.5px; color: var(--wa-text-3); font-variant-numeric: tabular-nums; }
.wa-mem-tag {
  flex: none; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--wa-accent); border: 1px solid var(--wa-accent); border-radius: 5px; padding: 1px 5px;
}
.wa-mem-act {
  flex: none; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 1;
  background: none; border: 1px solid transparent; color: var(--wa-text-3);
}
.wa-mem:hover .wa-mem-act { border-color: var(--wa-line-2); }
.wa-mem-act:hover { color: var(--wa-accent); border-color: var(--wa-accent); }
.wa-prof-actions { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-bottom: 1px solid var(--wa-line); }
.wa-prof-act {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--wa-text);
  background: none; border: none; padding: 10px 16px;
}
.wa-prof-act:hover { background: var(--wa-hover); }
.wa-prof-act .wa-mi-ico { width: 17px; }
.wa-prof-act.danger { color: var(--wa-del); }
.wa-prof-act.danger .wa-mi-ico { color: var(--wa-del); }
.wa-prof-about {
  font-size: 12.5px; color: var(--wa-text-2); line-height: 1.6; padding: 10px 16px 12px;
  border-bottom: 1px solid var(--wa-line); white-space: pre-wrap; word-break: break-word;
}
.wa-prof-editable { display: flex; align-items: center; gap: 8px; justify-content: center; }
.wa-prof-edit {
  border: none; background: none; cursor: pointer; color: var(--wa-text-3); font-size: 13px;
  padding: 2px 5px; border-radius: 6px; flex: none;
}
.wa-prof-edit:hover { color: var(--wa-accent); background: var(--wa-hover); }
.wa-prof-blocked { font-size: 10.5px; color: var(--wa-del); font-weight: 700; margin-top: 8px; }

/* =====================================================================
   The media library — everything this account has, in one grid
   ===================================================================== */
.wa-lib {
  position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column;
  background: var(--wa-bg);
}
.wa-lib.hide { display: none; }
.wa-lib-head {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  background: var(--wa-chrome); border-bottom: 1px solid var(--wa-line);
}
.wa-lib-head h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--wa-accent); flex: none; }
.wa-lib-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.wa-lib-n { font-size: 11px; color: var(--wa-text-3); flex: none; }
.wa-lib-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 26px; }
.wa-lib-month {
  font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--wa-accent); margin: 18px 0 9px;
}
.wa-lib-month:first-child { margin-top: 0; }
.wa-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 6px; }
.wa-lib-cell {
  position: relative; aspect-ratio: 1; padding: 0; border: none; cursor: pointer; overflow: hidden;
  background: var(--wa-raise); border-radius: 9px;
}
.wa-lib-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-lib-cell.dim img { opacity: .5; }
.wa-lib-who {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 7px 5px;
  font-size: 9.5px; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-lib-file {
  display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px;
  font-size: 10.5px; color: var(--wa-text-2); text-align: left; aspect-ratio: auto; min-height: 78px;
}
.wa-lib-file b { font-size: 11.5px; color: var(--wa-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-lib-file .wa-aud { min-width: 0; }
.wa-lib-more { display: grid; place-items: center; padding: 20px; }

/* =====================================================================
   One small dialog for short questions
   ===================================================================== */
.wa-modal {
  position: absolute; inset: 0; z-index: 120; display: grid; place-items: center;
  background: var(--wa-veil); padding: 26px;
}
.wa-modal.hide { display: none; }
.wa-modal-card {
  width: min(430px, 100%); max-height: 100%; display: flex; flex-direction: column;
  background: var(--wa-chrome); border: 1px solid var(--wa-line-2); border-radius: 15px;
  box-shadow: 0 20px 55px rgba(0,0,0,.45); overflow: hidden;
}
.wa-modal-head {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: 14px 17px; border-bottom: 1px solid var(--wa-line);
}
.wa-modal-head h3 { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--wa-accent); }
.wa-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 15px 17px 17px; }
.wa-modal-body .wa-input { width: 100%; }
.wa-hint { font-size: 11px; color: var(--wa-text-3); line-height: 1.6; margin-top: 9px; }
.wa-pick { max-height: 250px; overflow-y: auto; margin-top: 12px; border-top: 1px solid var(--wa-line); }
.wa-pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; padding: 8px 6px; font-family: inherit; color: var(--wa-text);
  border-radius: 9px;
}
.wa-pick-row:hover { background: var(--wa-hover); }
.wa-pick-row .wa-av { width: 32px; height: 32px; font-size: 10.5px; }
.wa-pick-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa-pick-txt b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-pick-txt span { font-size: 10.5px; color: var(--wa-text-3); font-variant-numeric: tabular-nums; }

/* --- full-size viewer --- */
.wa-lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(12,11,9,.94);
  display: grid; place-items: center; padding: 34px;
}
.wa-lightbox.hide { display: none; }
.wa-lb-x {
  position: absolute; top: 16px; right: 22px; border: none; background: none;
  color: #fff; font-size: 32px; line-height: 1; cursor: pointer; padding: 4px 10px;
}
.wa-lb-body { max-width: min(92vw, 940px); max-height: 86vh; overflow-y: auto; text-align: center; }
.wa-lb-body img, .wa-lb-body video { max-width: 100%; max-height: 68vh; border-radius: 11px; display: block; margin: 0 auto; }
.wa-lb-note { color: #ded5c4; font-size: 12px; margin-top: 13px; font-style: italic; }
.wa-lb-when { color: rgba(255,255,255,.6); font-size: 11px; margin-top: 13px; }
.wa-lb-cap { color: #f2ece0; font-size: 13.5px; margin-top: 7px; line-height: 1.5; }
.wa-lb-save {
  display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700;
  color: var(--wa-on-accent); background: var(--wa-accent); text-decoration: none;
  padding: 8px 18px; border-radius: 20px;
}

/* --- empty states --- */
.wa-empty { padding: 30px 18px; text-align: center; font-size: 12.5px; color: var(--wa-text-3); line-height: 1.7; }
.wa-blank { flex: 1; display: grid; place-items: center; padding: 30px; text-align: center; }
.wa-blank-in { max-width: 34ch; color: var(--wa-text-3); }
.wa-blank-mark {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; background: color-mix(in srgb, var(--wa-accent) 12%, transparent); color: var(--wa-accent);
}
.wa-blank-in b { display: block; font-size: 15px; font-weight: 600; color: var(--wa-text-2); margin-bottom: 6px; }
.wa-blank-in span { font-size: 12.5px; line-height: 1.7; }

/* Held for one frame while the theme is swapped — see waApplyTheme(). */
#tab-whatsapp.wa-no-anim, #tab-whatsapp.wa-no-anim * { transition: none !important; }

/* Keyboard users must be able to see where they are. */
#tab-whatsapp :is(button, input, textarea, a, [tabindex]):focus-visible {
  outline: 2px solid var(--wa-accent); outline-offset: 2px; border-radius: 8px;
}

/* The profile panel takes the thread's place before it takes the list's — the
   list is how you get anywhere else. */
@media (max-width: 1200px) {
  .wa-main.wa-with-profile { grid-template-columns: var(--wa-side-w) minmax(0, 1fr); }
  .wa-main.wa-with-profile .wa-thread-wrap { display: none; }
}
@media (max-width: 880px) {
  .wa-main, .wa-main.wa-with-profile { grid-template-columns: minmax(0, 1fr); }
  .wa-side { border-right: none; }
  /* One pane at a time: the list, or the open conversation. */
  .wa-thread-wrap, .wa-profile { display: none; }
  .wa-main.wa-open .wa-side { display: none; }
  .wa-main.wa-open .wa-thread-wrap { display: flex; }
  .wa-main.wa-open.wa-with-profile .wa-thread-wrap { display: none; }
  .wa-main.wa-open.wa-with-profile .wa-profile { display: block; }
  .wa-back { display: inline-flex; }
  .wa-th-id { padding-left: 8px; }
  .wa-bubble { max-width: 86%; }
  .wa-thread { padding: 14px 12px 16px; }
  .wa-link-card { padding: 22px; gap: 22px; }
  .wa-qr { width: 100%; max-width: 250px; height: auto; aspect-ratio: 1; }
  .wa-vid { width: 100%; }
  .wa-sheet { padding: 0; }
  .wa-sheet-card { border-radius: 0; height: 100%; width: 100%; }
  .wa-rec-hint { display: none; }
  .wa-modal { padding: 0; }
  .wa-modal-card { border-radius: 0; height: 100%; width: 100%; }
  .wa-emoji { left: 8px; right: 8px; width: auto; }
  .wa-lib-head { flex-wrap: wrap; }
  /* A hover arrow is useless without a pointer, so on a touch layout the whole
     bubble opens the menu on a long press instead — see waBindMenu(). */
  .wa-caret { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- LoveIn7 edition: no slideshows ----
   The slideshow maker, its reference-image folder, the schedule clock, Veridon's
   multi-image slider and the "send slideshow to WhatsApp" setting are switched off
   here rather than cut out of the markup, so the rest of the app's wiring is untouched. */
#studio-slideshow-btn, #studio-refimg-btn, #studio-clock, .ai-img-ss, .no-slideshow { display: none !important; }

/* ---- LoveIn7 wordmark ----
   Cormorant draws old-style figures, so the 7 hung below the letters. A plain sans
   with lining figures keeps the name on one baseline everywhere it is shown. */
body { font-variant-numeric: lining-nums; }
.brand-text h1 {
  font-family: 'Inter', system-ui, 'Segoe UI', sans-serif;
  font-weight: 700; font-size: 19px; letter-spacing: .2px;
  font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
}
.ticket-logo { font-family: 'Inter', system-ui, 'Segoe UI', sans-serif; font-feature-settings: 'lnum' 1; }

/* ---- Sell: the scan-to-sell till ---- */
.pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .pos-grid { grid-template-columns: 1fr; } }
.pos-left { min-height: 420px; }
.pos-right { position: sticky; top: 16px; }
.pos-scanbar { position: relative; display: flex; align-items: center; }
.pos-scan-ico { position: absolute; left: 14px; color: var(--gold); pointer-events: none; }
#pos-scan {
  width: 100%; font-family: inherit; font-size: 17px; color: var(--ink);
  background: var(--cream); border: 2px solid var(--line); border-radius: 12px;
  padding: 14px 14px 14px 44px; outline: none; transition: border-color .15s, box-shadow .15s;
}
#pos-scan:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184,137,59,.16); }
.pos-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22); overflow: hidden;
}
.pos-results.hide { display: none; }
.pos-res {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  font-family: inherit; font-size: 14px; color: var(--ink); background: none; border: none;
  border-bottom: 1px solid var(--line); padding: 10px 14px; cursor: pointer;
}
.pos-res:last-child { border-bottom: none; }
.pos-res.on, .pos-res:hover { background: rgba(184,137,59,.14); }
.pos-res .mono { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.pos-editing { margin-top: 12px; padding: 9px 12px; border-radius: 10px; font-size: 13px; color: var(--ink); background: rgba(184,137,59,.14); border: 1px solid var(--gold-soft); }
.pos-editing.hide { display: none; }
.pos-cart { margin-top: 14px; display: flex; flex-direction: column; }
.pos-empty { text-align: center; color: var(--faint); padding: 70px 10px; font-size: 15px; }
.pos-empty.small { padding: 18px 10px; font-size: 13.5px; }
.pos-line { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.pos-line.flash { animation: pos-flash .7s ease-out; }
@keyframes pos-flash { from { background: rgba(184,137,59,.30); } to { background: transparent; } }
.pos-line-main { flex: 1 1 auto; min-width: 0; }
.pos-line-name { font-size: 15.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-line-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.pos-qty { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pos-qbtn {
  width: 36px; height: 36px; font-size: 19px; line-height: 1; font-family: inherit; cursor: pointer;
  color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 9px;
}
.pos-qbtn:hover { border-color: var(--gold); }
.pos-qin {
  width: 54px; height: 36px; text-align: center; font-family: inherit; font-size: 16px; font-weight: 600;
  color: var(--ink); background: var(--cream-2); border: 1px solid var(--line); border-radius: 9px; outline: none;
  -moz-appearance: textfield;
}
.pos-qin::-webkit-outer-spin-button, .pos-qin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-qin:focus { border-color: var(--gold); }
.pos-line-amt { flex: 0 0 86px; text-align: right; font-size: 15px; font-weight: 600; color: var(--ink); }
.pos-line-del { flex: 0 0 auto; width: 30px; height: 30px; border: none; background: none; color: var(--faint); font-size: 21px; line-height: 1; cursor: pointer; border-radius: 7px; }
.pos-line-del:hover { color: var(--red); background: rgba(192,73,47,.12); }
.pos-count { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }
.pos-link { font-family: inherit; font-size: 12.5px; color: var(--gold-deep); background: none; border: none; cursor: pointer; padding: 2px 4px; text-decoration: underline; text-underline-offset: 2px; }
.pos-link.danger { color: var(--red); }
body.dark .pos-link { color: #d4a855; }
body.dark .pos-link.danger { color: #e07a6a; }
.pos-tot-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-soft); padding: 3px 0; }
.pos-tot-row.pos-grand { font-size: 26px; font-weight: 700; color: var(--ink); padding: 10px 0 4px; margin-top: 6px; border-top: 1px dashed var(--line); }
.pos-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin: 16px 0 7px; }
.pos-label .opt { text-transform: none; letter-spacing: 0; }
.pos-pay { display: flex; flex-wrap: wrap; gap: 7px; }
.pos-pay .seg-btn { flex: 1 1 auto; padding: 11px 12px; font-size: 14px; }
.pos-cash { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.pos-cash.hide { display: none; }
.pos-cash input { width: 96px; margin-left: 6px; text-align: right; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; outline: none; }
#pos-change { font-size: 13px; font-weight: 600; color: var(--green); }
.pos-emp { width: 100%; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; }
.pos-right .save-btn { font-size: 16px; padding: 16px; margin-top: 18px; }
.pos-done-plain { width: 100%; margin-top: 8px; font-family: inherit; font-size: 13.5px; color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: 11px; padding: 10px; cursor: pointer; }
.pos-done-plain:hover { border-color: var(--gold); color: var(--ink); }
.pos-today-list { display: flex; flex-direction: column; }
.pos-sale { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.pos-sale:last-child { border-bottom: none; }
.pos-sale.void { opacity: .5; text-decoration: line-through; }
.pos-sale-time { flex: 0 0 72px; color: var(--ink-soft); font-size: 12px; }
.pos-sale-name { flex: 0 0 auto; font-weight: 600; }
.pos-sale-meta { flex: 1 1 auto; color: var(--ink-soft); font-size: 12.5px; }
.pos-sale-amt { flex: 0 0 auto; font-weight: 600; }
.p-nobar { color: var(--red); }
.p-edit-barcode { width: 130px; } .p-edit-code { width: 90px; }

/* ---- Add-product rows (Products and Stock) ----
   The barcode box was taking the whole row and squeezing the name box down to a sliver. */
.prod-form { flex-wrap: wrap; }
.prod-form .grow { flex: 2 1 240px; min-width: 200px; }
.prod-form input[type=text]:not(.grow) { flex: 1 1 170px; width: auto; min-width: 140px; }
.prod-form input[type=number] { flex: 0 0 140px; width: 140px; }

/* ---- Delivery features, hidden while DELIVERY_MODE is off in app.js ----
   Status buttons, the delivery-fee part of an order line, and the city / status filters.
   Nothing is removed: a delivery edition switches the flag and these come straight back. */
body.no-delivery .dlv,
body.no-delivery #f-city, body.no-delivery #f-status { display: none !important; }
#d-city, #d-status { display: none !important; }   /* Day & money: no status or city filter in either shop */

/* ---- The two shops ---- */
/* The slider: knob left = Warqa Shop, knob right = Burjuman Shop. */
.shop-slide { display: inline-flex; align-items: center; gap: 10px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; }
.shop-slide input { position: absolute; opacity: 0; width: 1px; height: 1px; flex: none; padding: 0; border: 0; }
.shop-slide-track { flex: 0 0 auto; position: relative; width: 46px; height: 26px; border-radius: 999px; background: rgba(227,166,76,.22); border: 1px solid rgba(227,166,76,.55); }
.shop-slide-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #e3a64c; transition: transform .18s ease; }
.shop-slide input:checked + .shop-slide-track::after { transform: translateX(20px); }
.shop-slide input:focus-visible + .shop-slide-track { box-shadow: 0 0 0 3px rgba(227,166,76,.3); }
.shop-slide-l, .shop-slide-r { color: var(--faint, rgba(245,239,226,.4)); transition: color .15s; }
.shop-slide[data-shop="warqa"] .shop-slide-l, .shop-slide[data-shop="burjuman"] .shop-slide-r { color: #e3a64c; }
.shop-slide.off { opacity: .4; cursor: default; }
.login-shop { position: absolute; top: 22px; right: 26px; }
.login-shop .shop-slide-l, .login-shop .shop-slide-r { color: rgba(245,239,226,.4); }
.login-shop[data-shop="warqa"] .shop-slide-l, .login-shop[data-shop="burjuman"] .shop-slide-r { color: #e3a64c; }
.nu-shop { flex: 0 0 auto; padding: 0 4px; font-size: 12.5px; }
/* The switch at the top of the menu (admins and owners). */
.shop-switch { display: flex; gap: 3px; padding: 3px; margin: 2px 2px 4px; border-radius: 10px; background: var(--sb-hover); border: 1px solid var(--sb-line); }
.shop-switch.hide { display: none; }
.shop-switch button { flex: 1; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--sb-text); background: none; border: none; border-radius: 7px; padding: 6px 2px; cursor: pointer; }
.shop-switch button.hide { display: none; }
.shop-switch button:hover { color: var(--sb-text-strong); }
.shop-switch button.active { background: #e3a64c; color: #1a1715; cursor: default; }
body.sb-collapsed .shop-switch { display: none; }
.user-shop, .users-form select.user-shop { flex: 0 0 auto; font-family: inherit; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: none; border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; outline: none; }
.users-form select.user-shop { padding: 9px 12px; font-size: 13px; }
select.user-shop { width: auto !important; min-width: 0; flex: 0 0 auto !important; }
select.user-shop option { background: #1d1914; color: #f6f1e6; }
select.user-shop:hover, select.user-shop:focus { border-color: var(--gold); }
select.user-shop:disabled { opacity: .4; cursor: default; }
.shop-slide.hide { display: none; }
.login-back { font-family: inherit; font-size: 13px; color: rgba(245,239,226,.6); background: none; border: none; padding: 4px; cursor: pointer; }
.login-back:hover { color: #e3a64c; }
.login-back.hide { display: none; }
.user-shop.any { cursor: default; color: var(--faint); border-style: dashed; }

/* ---- Things this edition does not use (kept in the page only for the wiring) ---- */
.l7-gone { display: none !important; }

/* ---- Stock ---- */
.stk-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }
.stk-bar .search { flex: 1 1 280px; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; outline: none; }
.stk-bar .search:focus { border-color: var(--gold); }
.stk-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.stk-filters .seg-btn { padding: 8px 13px; font-size: 13px; }
.stk-list { display: flex; flex-direction: column; }
.stk-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.stk-row:last-child { border-bottom: none; }
.stk-main { flex: 1 1 auto; min-width: 0; }
.stk-name { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.stk-tag { flex: 0 0 96px; text-align: center; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.stk-tag.stk-ok { background: rgba(47,138,82,.16); color: var(--green); }
.stk-tag.stk-low { background: rgba(184,137,59,.20); color: var(--gold-deep); }
.stk-tag.stk-out { background: rgba(192,73,47,.16); color: var(--red); }
.stk-tag.stk-none { background: transparent; color: var(--faint); border: 1px dashed var(--line); }
body.dark .stk-tag.stk-ok { color: #6fce97; } body.dark .stk-tag.stk-low { color: #e3a64c; } body.dark .stk-tag.stk-out { color: #e88b76; }
.stk-qin { width: 66px; }
.stk-recv { display: flex; gap: 5px; flex: 0 0 auto; }
.stk-add-in { width: 70px; font-family: inherit; font-size: 13.5px; text-align: center; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 9px; padding: 8px 6px; outline: none; }
.stk-add-in:focus { border-color: var(--gold); }
.stk-out { color: var(--red); } body.dark .stk-out { color: #e88b76; }
@media (max-width: 900px) { .stk-row { flex-wrap: wrap; } .stk-main { flex-basis: 100%; } }

/* ---- Cashbox ---- */
.cbx-top { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cbx-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); }
.cbx-amount { font-size: 46px; font-weight: 700; color: var(--ink); line-height: 1.15; margin-top: 4px; }
.cbx-amount.neg { color: var(--red); }
.cbx-side { display: flex; flex-direction: column; gap: 6px; min-width: 250px; }
.cbx-stat { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; color: var(--ink-soft); }
.cbx-stat b { color: var(--ink); font-weight: 600; }
.cbx-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.cbx-dir { display: flex; gap: 6px; }
.cbx-form input { font-family: inherit; font-size: 14px; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; outline: none; }
.cbx-form input:focus { border-color: var(--gold); }
.cbx-form #cbx-amt { width: 150px; }
.cbx-form .grow { flex: 1 1 220px; }
.cbx-form .save-btn { width: auto; margin-top: 0; padding: 10px 20px; }
.cbx-list { display: flex; flex-direction: column; }
.cbx-day { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: 14px 2px 6px; }
.cbx-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.cbx-time { flex: 0 0 72px; font-size: 12px; color: var(--ink-soft); }
.cbx-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cbx-what b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-what small { font-size: 11.5px; color: var(--ink-soft); }
.cbx-amt { flex: 0 0 auto; font-weight: 600; }
.cbx-amt.pos { color: var(--green); } .cbx-amt.neg { color: var(--red); }
body.dark .cbx-amt.pos { color: #6fce97; } body.dark .cbx-amt.neg { color: #e88b76; }
.cbx-nodel { flex: 0 0 30px; }

/* ---- Logs ---- */
.log-row .cbx-time { flex-basis: 96px; }
.log-tag { flex: 0 0 118px; text-align: center; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(184,137,59,.16); color: var(--gold-deep); }
body.dark .log-tag { color: #d4a855; }
.log-tag.log-sale { background: rgba(47,138,82,.16); color: var(--green); }
.log-tag.log-void, .log-tag.log-cash-out, .log-tag.log-cash-del { background: rgba(192,73,47,.16); color: var(--red); }
body.dark .log-tag.log-sale { color: #6fce97; }
body.dark .log-tag.log-void, body.dark .log-tag.log-cash-out, body.dark .log-tag.log-cash-del { color: #e88b76; }
.log-row .cbx-what b { white-space: normal; }

/* ---- Calendar on the From / To date boxes ---- */
.cal-pop {
  position: fixed; z-index: 400; width: 266px; padding: 12px; border-radius: 14px;
  background: var(--cream-2); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.32);
  font-family: 'Inter', system-ui, sans-serif; color: var(--ink);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-size: 14px; font-weight: 600; }
.cal-nav { width: 30px; height: 30px; font-size: 20px; line-height: 1; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.cal-nav:hover:not(:disabled) { border-color: var(--gold); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow span { text-align: center; font-size: 10.5px; color: var(--faint); padding: 4px 0; }
.cal-day { height: 32px; font-family: inherit; font-size: 13px; color: var(--ink); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.cal-day:hover:not(:disabled) { border-color: var(--gold); }
.cal-day.today { font-weight: 700; color: var(--gold-deep); }
body.dark .cal-day.today { color: #e3a64c; }
.cal-day.sel { background: var(--gold); color: #fff; border-color: var(--gold); }
.cal-day:disabled { opacity: .25; cursor: default; }
.cal-foot { display: flex; justify-content: space-between; margin-top: 8px; }

/* ---- Sign-in, roles and users ---- */
.login-screen {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(900px 500px at 50% -10%, rgba(227,166,76,.10) 0%, transparent 60%), #14110d;
}
.login-screen.hide { display: none; }
.login-box {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px;
  background: #1d1914; border: 1px solid rgba(245,239,226,.10); border-radius: 18px; padding: 30px 28px 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5); color: #f6f1e6; font-family: 'Inter', system-ui, 'Segoe UI', sans-serif;
}
.login-brand { font-size: 28px; font-weight: 700; letter-spacing: .3px; text-align: center; font-feature-settings: 'lnum' 1; }
.login-sub { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; text-align: center; color: rgba(245,239,226,.45); margin-bottom: 8px; }
.login-box label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: rgba(245,239,226,.6); }
.login-box label.hide { display: none; }
.login-box input {
  font-family: inherit; font-size: 16px; color: #f6f1e6; background: #14110d;
  border: 1px solid rgba(245,239,226,.14); border-radius: 10px; padding: 12px 13px; outline: none;
}
.login-box input:focus { border-color: #e3a64c; box-shadow: 0 0 0 3px rgba(227,166,76,.18); }
.login-err { min-height: 18px; font-size: 13px; color: #e88b76; }
.login-go { font-family: inherit; font-size: 16px; font-weight: 600; color: #1a1715; background: #e3a64c; border: none; border-radius: 11px; padding: 13px; cursor: pointer; }
.login-go:hover { background: #d4a855; }
.login-go:disabled { opacity: .5; cursor: default; }
.login-note { font-size: 12px; line-height: 1.5; color: rgba(245,239,226,.45); text-align: center; }
.login-note:empty { display: none; }
.role-hide { display: none !important; }
/* What a missing permission hides. The classes are set on <body> by applyRole(); the
   server refuses the same actions on its side, so these only keep the screen honest. */
body.no-day-all .day-all-only,
body.no-orders-edit #tab-orders .row-actions > :not([data-print]):not([data-edit]):not([data-advance]),
body.no-orders-edit #tab-day .row-actions > :not([data-print]):not([data-edit]):not([data-advance]),
body.no-orders-status .row-actions > [data-advance],
body.no-pos-fix .row-actions > [data-edit],
body.no-pos-fix #pos-today-list [data-ed], body.no-pos-fix #pos-today-list [data-vd],
body.no-reports #o-export, body.no-reports #d-export,
body.no-notes .sb-profile-chev,
body.no-cash-move .cbx-form,
body.no-stock-edit .stk-row .pos-qbtn, body.no-stock-edit .stk-recv,
body.no-products .stk-del, body.no-products .needs-products { display: none !important; }
body.no-notes .sb-profile { cursor: default; }
body.no-stock-edit .stk-qin { pointer-events: none; border-color: transparent; background: none; }

/* ---- Permissions editor ---- */
.cmodal.cmodal-perms { max-width: 520px; }
.perm-roles { display: flex; gap: 8px; }
.perm-roles .seg-btn { flex: 1; padding: 10px; font-size: 14px; color: var(--ai-text-2); background: var(--ai-surface); border-color: var(--ai-border); }
.perm-roles .seg-btn.active { background: #e3a64c; border-color: #e3a64c; color: #1a1715; }
.perm-note { margin: 12px 2px 10px; font-size: 12.5px; color: var(--ai-text-3); }
.perm-tree {
  max-height: 54vh; overflow-y: auto; margin-right: -8px; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(245,239,226,.22) transparent;
}
.cmodal-perms .cmodal-body { overflow: visible; }   /* only the list scrolls, not the window around it */
.perm-tree::-webkit-scrollbar { width: 8px; }
.perm-tree::-webkit-scrollbar-track { background: transparent; }
.perm-tree::-webkit-scrollbar-thumb { background: rgba(245,239,226,.18); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.perm-tree::-webkit-scrollbar-thumb:hover { background: rgba(245,239,226,.34); background-clip: padding-box; }
.perm-tree::-webkit-scrollbar-button { display: none; }
.perm-sec { background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 12px; padding: 4px 14px 6px; margin-bottom: 10px; }
.perm-sec:last-child { margin-bottom: 0; }
.perm-sec-title { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ai-text-3); padding: 10px 0 4px; }
.perm-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14px; color: var(--ai-text); cursor: pointer; }
.perm-row + .perm-row { border-top: 1px solid var(--ai-border); }
.perm-row.child { padding-left: 16px; font-size: 13.5px; color: var(--ai-text-2); }
.perm-text { min-width: 0; }
.perm-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.perm-sw { flex: 0 0 auto; position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(245,239,226,.14); transition: background .15s; }
.perm-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #f6f1e6; transition: transform .15s; }
.perm-cb:checked + .perm-sw { background: #e3a64c; }
.perm-cb:checked + .perm-sw::after { transform: translateX(16px); background: #1a1715; }
.perm-cb:focus-visible + .perm-sw { box-shadow: 0 0 0 3px rgba(227,166,76,.3); }
.perm-cb:disabled + .perm-sw { opacity: .55; }
.perm-row:has(.perm-cb:disabled) { cursor: default; }
button.user-role { font-family: inherit; border: 1px solid transparent; cursor: pointer; }
button.user-role:hover { border-color: var(--gold); }
.nu-perms { flex: 0 0 auto; padding: 9px 14px; font-size: 13px; }
.sb-account { display: flex; gap: 6px; padding: 0 4px; margin-top: -8px; }
.sb-account button {
  flex: 1; font-family: inherit; font-size: 11.5px; color: var(--sb-text); background: var(--sb-hover);
  border: 1px solid var(--sb-line); border-radius: 8px; padding: 7px 6px; cursor: pointer;
}
.sb-account button:hover { color: var(--sb-text-strong); border-color: rgba(245,239,226,.2); }
.users-list { display: flex; flex-direction: column; margin-top: 6px; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.user-name { flex: 1 1 auto; font-weight: 600; min-width: 0; }
.user-you { font-size: 10.5px; font-weight: 500; color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.user-login { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-soft); }
.user-role { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: rgba(184,137,59,.16); color: var(--gold-deep); }
body.dark .user-role { color: #d4a855; }
.user-role.role-cashier { background: rgba(47,138,82,.16); color: var(--green); }
.users-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.users-form input, .users-form select {
  flex: 1 1 150px; min-width: 0; font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; outline: none;
}
.users-form select { flex: 2 1 260px; }
.users-form input:focus, .users-form select:focus { border-color: var(--gold); }
#pw-modal .cm-input { width: 100%; }

/* ---- Delivery orders at the till (Warqa Shop) ---- */
.pos-dlv { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.pos-dlv-mode { display: flex; gap: 6px; margin-bottom: 10px; }
.pos-dlv-mode .seg-btn { flex: 1; }
.pos-dlv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-dlv-fields.hide { display: none; }
.pos-dlv-fields .wide { grid-column: 1 / -1; }
.pos-dlv-fields input, .pos-dlv-fields textarea {
  width: 100%; min-width: 0; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--cream);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; outline: none; resize: vertical;
}
.pos-dlv-fields input:focus, .pos-dlv-fields textarea:focus { border-color: var(--gold); }
.pos-tot-row.hide { display: none; }
.mini-btn.go { background: #e3a64c; color: #1a1715; border-color: #e3a64c; font-weight: 600; }
.mini-btn.danger { color: #e88b76; }
.dlv-note { font-style: italic; }
.dlv-collect { color: #e3a64c; font-weight: 600; }

/* ---- Close day ---- */
.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .cl-grid { grid-template-columns: 1fr; } }
.cl-row { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; font-size: 14px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.cl-row b { color: var(--ink); font-weight: 600; }
.cl-row.big { border-bottom: none; padding-top: 12px; font-size: 16px; color: var(--ink); }
.cl-row.big b { font-size: 24px; font-weight: 700; }
.cl-form { display: flex; flex-direction: column; gap: 10px; }
.cl-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.cl-form input { font-family: inherit; font-size: 16px; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; outline: none; }
.cl-form input:focus { border-color: var(--gold); }
.cl-diff { min-height: 20px; font-size: 14px; font-weight: 600; }
.cl-diff.ok, .cl-d.ok b { color: var(--green); }
.cl-diff.over, .cl-d.over b { color: #e3a64c; }
.cl-diff.short, .cl-d.short b { color: #e88b76; }
.cl-item { flex-wrap: wrap; }
.cl-num { display: flex; flex-direction: column; align-items: flex-end; min-width: 104px; }
.cl-num small { font-size: 10.5px; color: var(--faint); }

/* ---- The LoveIn7 logo (drawn from a mask, so it takes the theme's colour) ---- */
.brand-mark.brand-logo {
  display: inline-block; flex: 0 0 auto; width: 32px; height: 33px; top: 0; font-size: 0;
  background: var(--gold-bright);
  -webkit-mask: url(logo-figure.png) center / contain no-repeat; mask: url(logo-figure.png) center / contain no-repeat;
}
.login-brand.login-logo {
  width: 150px; height: 176px; margin: 0 auto 6px; font-size: 0;
  background: linear-gradient(180deg, #f0c476 0%, #e3a64c 55%, #c98a35 100%);
  -webkit-mask: url(logo-mask.png) center / contain no-repeat; mask: url(logo-mask.png) center / contain no-repeat;
}

/* ---- "A new version is ready" (shown when the server was updated) ---- */
.l7-update-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 12px;
  background: #1d1914; border: 1px solid rgba(227,166,76,.6); box-shadow: 0 12px 40px rgba(0,0,0,.45);
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: #f6f1e6;
}
.l7-update-bar button { font-family: inherit; font-size: 13.5px; font-weight: 600; color: #1a1715; background: #e3a64c; border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; }

/* ---- discounts at the till ---- */
.pos-disc-btn { margin-left: auto; margin-right: 12px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold-bright); background: rgba(227,166,76,.1); border: 1px solid rgba(227,166,76,.4); border-radius: 8px; padding: 5px 11px; cursor: pointer; }
.pos-disc-btn:hover { background: rgba(227,166,76,.18); }
.pos-disc-row { color: var(--gold-bright); }
.pos-disc-row > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 10px; }
.pos-disc-row small { flex-basis: 100%; font-size: 11.5px; opacity: .8; }
.pos-disc-row > span:last-child { white-space: nowrap; }
.disc-tag { color: var(--gold-bright); }

.disc-overlay { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8,6,4,.62); font-family: 'Inter', system-ui, sans-serif; }
.disc-box { width: 100%; max-width: 430px; max-height: 90vh; overflow-y: auto; background: #1d1914; color: #f6f1e6; border: 1px solid rgba(245,239,226,.14); border-radius: 16px; padding: 18px 20px 18px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.disc-box .hide { display: none !important; }
.disc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.disc-head h3 { flex: 1; margin: 0; font-family: inherit; font-size: 17px; font-weight: 600; }
.disc-keybtn, .disc-x { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: none; color: rgba(245,239,226,.45); cursor: pointer; }
.disc-keybtn:hover, .disc-x:hover { color: #e3a64c; border-color: rgba(227,166,76,.4); }
.disc-x { font-size: 22px; line-height: 1; }
.disc-label { margin: 14px 0 6px; font-size: 12.5px; color: rgba(245,239,226,.6); }
.disc-seg { display: flex; gap: 6px; }
.disc-seg button { flex: 1; font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: #f6f1e6; background: #14110d; border: 1px solid rgba(245,239,226,.16); }
.disc-seg button.on { background: #e3a64c; border-color: #e3a64c; color: #1a1715; }
.disc-items { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; max-height: 190px; overflow-y: auto; }
.disc-item { display: flex; justify-content: space-between; gap: 12px; text-align: left; font-family: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: 9px; cursor: pointer; color: #f6f1e6; background: #14110d; border: 1px solid rgba(245,239,226,.12); }
.disc-item span:last-child { color: rgba(245,239,226,.55); white-space: nowrap; }
.disc-item.on { border-color: #e3a64c; background: rgba(227,166,76,.12); }
.disc-amt { display: flex; gap: 8px; }
.disc-amt .disc-seg { flex: 0 0 132px; }
.disc-amt input, .disc-keybox input { flex: 1; min-width: 0; font-family: inherit; font-size: 18px; font-weight: 600; color: #f6f1e6; background: #14110d; border: 1px solid rgba(245,239,226,.18); border-radius: 10px; padding: 8px 12px; outline: none; }
.disc-amt input:focus, .disc-keybox input:focus { border-color: #e3a64c; }
.disc-sum { margin-top: 10px; font-size: 13.5px; color: rgba(245,239,226,.75); }
.disc-keybox { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(245,239,226,.16); }
.disc-keybox input { font-size: 15px; font-weight: 500; }
.disc-keybox button { font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 0 14px; border-radius: 10px; cursor: pointer; color: #e3a64c; background: rgba(227,166,76,.1); border: 1px solid rgba(227,166,76,.5); white-space: nowrap; }
.disc-err { min-height: 18px; margin-top: 10px; font-size: 13px; color: #e88b76; }
.disc-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.disc-btn { font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 10px; cursor: pointer; color: #f6f1e6; background: none; border: 1px solid rgba(245,239,226,.18); }
.disc-btn.go { background: #e3a64c; border-color: #e3a64c; color: #1a1715; }
.disc-wait { text-align: center; padding: 26px 0 8px; }
.disc-wait-t { font-size: 16px; font-weight: 600; margin-top: 14px; }
.disc-wait-s { font-size: 13px; color: rgba(245,239,226,.6); margin-top: 4px; }
.disc-pulse { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; border: 3px solid rgba(227,166,76,.22); border-top-color: #e3a64c; animation: disc-spin 1s linear infinite; }
@keyframes disc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .disc-pulse { animation-duration: 4s; } }

/* requests, top right of the approver's screen */
.disc-asks { position: fixed; top: 16px; right: 16px; z-index: 9500; display: flex; flex-direction: column; gap: 10px; width: 310px; max-width: calc(100vw - 32px); font-family: 'Inter', system-ui, sans-serif; }
.disc-ask { background: #1d1914; color: #f6f1e6; border: 1px solid rgba(227,166,76,.65); border-radius: 14px; padding: 14px 15px; box-shadow: 0 14px 44px rgba(0,0,0,.5); }
.disc-ask-top { font-size: 12.5px; color: #e3a64c; font-weight: 600; }
.disc-ask-what { font-size: 16px; font-weight: 600; margin-top: 4px; }
.disc-ask-nums { font-size: 13px; color: rgba(245,239,226,.7); margin-top: 4px; }
.disc-ask-nums b { color: #f6f1e6; }
.disc-ask-btns { display: flex; gap: 8px; margin-top: 12px; }
.disc-ask-btns button { flex: 1; font-family: inherit; font-size: 14px; font-weight: 600; padding: 9px 0; border-radius: 9px; cursor: pointer; color: #f6f1e6; background: none; border: 1px solid rgba(245,239,226,.2); }
.disc-ask-btns button.go { background: #e3a64c; border-color: #e3a64c; color: #1a1715; }

/* the owner's card in Settings */
.disc-set { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.disc-set input { flex: 1 1 240px; max-width: 320px; }
.disc-set .set-note { flex: 1 1 100%; margin: 0; }

/* ---- scroll bars: slim and dark instead of the white Windows one ---- */
html { scrollbar-width: thin; scrollbar-color: rgba(245,239,226,.16) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,239,226,.16); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(227,166,76,.5); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* nothing to scroll behind the sign-in screen */
body:has(#login-screen:not(.hide)) { overflow: hidden; }

/* ---- the shop app's own top strip (replaces the Windows title bar) ---- */
.l7-titlebar {
  position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 99990;
  display: flex; align-items: center; gap: 8px; padding: 0 150px 0 8px;
  background: #14110d; border-bottom: 1px solid rgba(245,239,226,.07);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .2px; color: rgba(245,239,226,.5);
  -webkit-app-region: drag; user-select: none;
}
.l7-tb-menu { -webkit-app-region: no-drag; order: -1; display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; border: none; border-radius: 7px; background: none; color: rgba(245,239,226,.5); cursor: pointer; }
.l7-tb-menu:hover { background: rgba(245,239,226,.08); color: #e3a64c; }
.l7-tb-logo { width: 15px; height: 17px; background: linear-gradient(180deg, #f0c476, #c98a35); -webkit-mask: url(logo-figure.png) center / contain no-repeat; mask: url(logo-figure.png) center / contain no-repeat; }
html.l7-app body { padding-top: 34px; min-height: calc(100vh - 34px); }
html.l7-app .app-shell { min-height: calc(100vh - 34px); }
html.l7-app .sidebar { top: 34px; height: calc(100vh - 34px); }
html.l7-app .login-screen { top: 34px; }
html.l7-app .notif-stack { top: 52px; }
html.l7-app .disc-asks { top: 48px; }