/* ============================================================
   MaxGoal — Internal Marketing Ops (prototype skeleton)
   Look & feel: AXIUS-inspired — dark sidebar, bright canvas,
   pastel KPI cards with bold colored icon badges. Friendly + pro.
   ============================================================ */

:root {
  /* Canvas */
  --bg: #f7f8fe;
  --surface: #ffffff;
  --surface-2: #f4f5fc;
  --border: #eef0f8;
  --border-strong: #e3e5f0;

  /* Text */
  --text: #1b1d2a;
  --text-muted: #6c7080;
  --text-faint: #a3a7b6;

  /* Sidebar (deep indigo — bright & colorful) */
  --side-bg: #241f44;
  --side-bg-2: #322b5c;
  --side-text: #aeabd4;
  --side-text-dim: #7d77a8;
  --side-active-bg: #ffffff;
  --side-active-text: #17181f;

  /* Accent solids (icon badges) */
  --violet: #7c5cff;
  --green: #14c279;
  --coral: #ff6b6b;
  --amber: #ffb81f;
  --blue: #3a8dff;
  --teal: #12ccaa;
  --pink: #f857b0;

  /* Pastel tints (card backgrounds) — brighter */
  --violet-soft: #f0ebff;
  --green-soft: #dcf7ea;
  --coral-soft: #ffe9e9;
  --amber-soft: #fff3d6;
  --blue-soft: #e6f1ff;
  --teal-soft: #dbf7f1;
  --pink-soft: #ffe6f3;
  --slate-soft: #eef0f6;

  /* Shape */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(20, 22, 38, .05);
  --shadow: 0 10px 30px rgba(20, 22, 38, .07);
  --shadow-lg: 0 24px 60px rgba(20, 22, 38, .16);

  --sidebar-w: 252px;
  --topbar-h: 78px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---------- Inline icons (icons.js / Lucide) ----------
   Every icon() call emits .ic, so it follows the text it sits next to:
   same size, same colour, never squashed by a flex parent. Containers that
   want a fixed size (.empty-ico svg, .tmpl-ico svg, …) override below. */
.ic { width: 1em; height: 1em; vertical-align: -.14em; flex: none; color: currentColor; }
/* fallback for a name icons.js doesn't know (e.g. an emoji left in library-config.js) */
.ic-glyph { display: inline-block; width: auto; height: auto; line-height: 1; font-style: normal; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; padding: 14px; gap: 14px; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 14px;
  height: calc(100vh - 28px);
}
.sidebar-panel {
  flex: 1; min-height: 0;
  background: linear-gradient(185deg, #2c2658 0%, #241f44 55%, #201b3a 100%);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.brand { height: var(--topbar-h); display: flex; align-items: flex-end; padding: 0 0 10px; }
.brand-logo { display: block; width: 100%; height: auto; }
.brand-logo-card { background: #fff; border-radius: 16px; padding: 14px 20px; display: inline-block; box-shadow: 0 12px 34px rgba(0,0,0,.22); }
.brand-logo-card img { display: block; width: 100%; max-width: 270px; height: auto; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: conic-gradient(from 200deg, var(--violet), var(--coral), var(--amber), var(--teal), var(--violet));
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 15px;
}
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: -.3px; color: #fff; }
img.brand-mark { object-fit: cover; padding: 0; background: none; }
.brand-tag { font-size: 8.5px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255,255,255,.55); text-transform: uppercase; margin-top: 2px; }

.nav { padding: 6px 14px; flex: 1; overflow-y: auto; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: #2c2d38; border-radius: 6px; }
.nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--side-text-dim); padding: 16px 10px 7px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--side-text); font-weight: 600; font-size: 13.5px;
  margin: 3px 0; transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--side-bg-2); color: #d7d9e3; }
.nav-item.active { background: var(--side-active-bg); color: var(--side-active-text); font-weight: 700; box-shadow: var(--shadow-sm); }
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-badge {
  margin-left: auto; font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: rgba(109,94,252,.22); color: #b6abff; text-transform: uppercase; letter-spacing: .4px;
}
.nav-item.active .nav-badge { background: var(--violet-soft); color: var(--violet); }

/* expandable nav groups */
.nav-group { margin: 3px 0; }
.nav-parent {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  color: var(--side-text); font-weight: 600; font-size: 13.5px;
  transition: background .15s, color .15s; user-select: none;
}
.nav-parent:hover { background: var(--side-bg-2); color: #d7d9e3; }
.nav-parent svg.lead { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-caret { margin-left: auto; width: 15px; height: 15px; transition: transform .2s; opacity: .7; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-group.open > .nav-parent { color: #d7d9e3; }
.nav-children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.nav-group.open .nav-children { grid-template-rows: 1fr; }
.nav-children-inner { overflow: hidden; }
.nav-sub {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 44px; margin: 2px 0; border-radius: 10px;
  color: var(--side-text); font-weight: 600; font-size: 13px;
  transition: background .15s, color .15s;
}
.nav-sub:hover { background: var(--side-bg-2); color: #fff; }
.nav-sub .sd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex: 0 0 6px; }
.nav-sub.active { background: var(--side-bg-2); color: #fff; font-weight: 700; }
.nav-sub.active .sd { opacity: 1; background: var(--violet); }
/* highlighted "+ Add Transaction" item */
.nav-sub.add { background: rgba(124,92,255,.20); color: #d6c8ff; font-weight: 800; padding-left: 18px; margin: 4px 0 6px; }
.nav-sub.add:hover { background: rgba(124,92,255,.34); color: #fff; }
.nav-sub.add.active { background: var(--violet); color: #fff; box-shadow: 0 6px 16px rgba(124,92,255,.4); }

/* accordion (budget bank cards) */
.acc-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: var(--surface); }
.acc-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; }
.acc-head:hover { background: var(--surface-2); }
.acc-card-ico { width: 44px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 11px; flex: 0 0 44px; }
.acc-title b { font-size: 14px; font-weight: 800; display: block; }
.acc-title span { font-size: 12px; color: var(--text-faint); }
.acc-meta { margin-left: auto; text-align: right; }
.acc-meta b { font-size: 14px; font-weight: 800; }
.acc-meta span { font-size: 11.5px; color: var(--text-faint); display: block; }
.acc-caret { width: 18px; height: 18px; color: var(--text-faint); transition: transform .2s; margin-left: 12px; }
.acc-item.open .acc-caret { transform: rotate(180deg); }
.acc-body { display: none; padding: 4px 18px 16px; }
.acc-item.open .acc-body { display: block; }
.pay-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.pay-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 11px; flex: 0 0 34px; }
.pay-name { font-weight: 700; font-size: 13.5px; }
.pay-name span { display: block; font-size: 11.5px; color: var(--text-faint); font-weight: 500; }
.pay-val { margin-left: auto; font-weight: 800; font-size: 13.5px; }

/* sidebar promo */
.sidebar-foot { padding: 14px; }
.promo {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #2a2440 0%, #3a2d5e 55%, #5a2f63 130%);
  border-radius: var(--radius); padding: 18px; color: #fff;
}
.promo h4 { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
.promo p { font-size: 11.5px; opacity: .8; margin-bottom: 14px; line-height: 1.45; }
.promo .btn { width: 100%; justify-content: center; background: #fff; color: #2a2440; padding: 9px; }
.promo .rocket { position: absolute; right: -6px; top: -8px; font-size: 34px; opacity: .25; transform: rotate(12deg); }
.promo .rocket svg { width: 34px; height: 34px; stroke-width: 1.6; vertical-align: 0; }

/* ---------- Main column ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Topbar ---------- */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 6px 0 4px; margin-bottom: 4px;
}
.user-pill {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 8px 14px 8px 8px; box-shadow: var(--shadow-sm);
}
.user-pill .avatar {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 15px;
}
.user-meta b { font-size: 13.5px; font-weight: 800; display: block; line-height: 1.2; }
.user-meta span { font-size: 11.5px; color: var(--text-faint); }
.user-pill { cursor: pointer; }
.user-pill .chev { color: var(--text-faint); margin-left: 4px; }
.user-pill .chev svg { transition: transform .2s; }
.user-menu-wrap { position: relative; }
.user-menu-wrap.open .chev svg { transform: rotate(180deg); }
.user-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 224px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 55;
}
.user-menu[hidden] { display: none; }
.um-head { padding: 9px 12px 11px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.um-head b { display: block; font-size: 13.5px; font-weight: 800; }
.um-head span { font-size: 11.5px; color: var(--text-faint); }
.um-role { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--violet); background: var(--violet-soft); padding: 2px 8px; border-radius: 6px; }
.um-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: none; background: none; font: inherit; font-weight: 700;
  font-size: 13.5px; color: var(--text); border-radius: 10px; cursor: pointer; text-align: left;
}
.um-item:hover { background: var(--surface-2); }
.um-item.danger { color: #e0483c; }
.um-item.danger:hover { background: var(--coral-soft); }

.role-switch {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 8px 12px; box-shadow: var(--shadow-sm);
}
.role-switch label { font-size: 10px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.role-switch select { border: none; outline: none; background: none; font: inherit; font-weight: 800; color: var(--violet); cursor: pointer; font-size: 13px; }

/* keep the option-list font matching the app/control (Inter), don't restyle the control */
select, select option { font-family: var(--font); }

.search {
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 11px 16px; width: 280px; color: var(--text-faint); box-shadow: var(--shadow-sm);
}
.search input { border: none; outline: none; background: none; font: inherit; flex: 1; color: var(--text); }
.search svg { width: 17px; height: 17px; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-muted);
  cursor: pointer; position: relative; box-shadow: var(--shadow-sm);
}
.icon-btn:hover { color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }
.dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); border: 2px solid var(--surface); }
.menu-btn { display: none; }

/* ---------- Content ---------- */
.content { padding: 0 6px 40px; max-width: 1340px; width: 100%; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-dash { grid-template-columns: 2fr 1fr; }
.gap-16 { gap: 16px; }
.mb-16 { margin-bottom: 16px; }
.hide { display: none !important; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 22px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 20px 22px 14px; }
.card-head h3 { font-size: 15.5px; font-weight: 800; }
.card-head .right { margin-left: auto; }
.card-body { padding: 0 22px 20px; }

/* KPI cards (pastel) */
.kpi { padding: 20px; border-radius: var(--radius); position: relative; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.kpi-title { font-size: 13px; font-weight: 700; color: #444a59; }
.kpi-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.kpi-ico svg { width: 19px; height: 19px; }
.kpi-val { font-size: 27px; font-weight: 800; letter-spacing: -.8px; }
.kpi-trend { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; margin-top: 8px; }
.kpi-trend .vs { color: var(--text-muted); font-weight: 600; }
.trend-up { color: #15a05f; }
.trend-down { color: #e0483c; }

/* tints */
.tint-violet { background: var(--violet-soft); } .ic-violet { background: var(--violet); }
.tint-green { background: var(--green-soft); } .ic-green { background: var(--green); }
.tint-coral { background: var(--coral-soft); } .ic-coral { background: var(--coral); }
.tint-amber { background: var(--amber-soft); } .ic-amber { background: var(--amber); }
.tint-blue { background: var(--blue-soft); } .ic-blue { background: var(--blue); }
.tint-teal { background: var(--teal-soft); } .ic-teal { background: var(--teal); }
.tint-pink { background: var(--pink-soft); } .ic-pink { background: var(--pink); }

.soft-violet { background: var(--violet-soft); color: var(--violet); }
.soft-green { background: var(--green-soft); color: #15a05f; }
.soft-coral { background: var(--coral-soft); color: #d6453a; }
.soft-amber { background: var(--amber-soft); color: #b07d00; }
.soft-blue { background: var(--blue-soft); color: var(--blue); }
.soft-teal { background: var(--teal-soft); color: #128f76; }
.soft-slate { background: var(--slate-soft); color: var(--text-muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 13.5px;
  padding: 10px 16px; border-radius: 13px; cursor: pointer;
  border: 1px solid transparent; transition: transform .08s, background .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 8px 18px rgba(109,94,252,.32); }
.btn-primary:hover { background: #5d4ef0; }
.btn-dark { background: var(--side-bg); color: #fff; }
.btn-dark:hover { background: #25262f; }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 11px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); padding: 12px 22px; }
td { padding: 14px 22px; border-top: 1px solid var(--border); font-size: 13.5px; }
tbody tr:hover { background: var(--surface-2); }
.t-strong { font-weight: 700; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Platform chip */
.plat { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.plat-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; }
.p-fb { background: #1877f2; } .p-ig { background: linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }
.p-tt { background: #111; } .p-gg { background: #ea4335; } .p-yt { background: #ff0000; } .p-li { background: #0a66c2; }

/* Alerts / activity list */
.alert-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); }
.alert-item:first-child { border-top: none; }
.alert-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 34px; }
.alert-ico svg { width: 17px; height: 17px; }
.alert-body { flex: 1; min-width: 0; }
.alert-body b { font-size: 13px; font-weight: 700; display: block; }
.alert-body span { font-size: 11.5px; color: var(--text-faint); }

/* Bar chart */
.bars { display: flex; align-items: flex-end; gap: 16px; height: 200px; padding: 12px 4px 0; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; max-width: 30px; border-radius: 8px; background: #edeef3; }
.bar.hi { background: linear-gradient(180deg, var(--violet), #9a8cff); }
.bar.hi2 { background: linear-gradient(180deg, var(--amber), #ffd25e); }
.bar-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* split / progress */
.split-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.split-row .plat { min-width: 120px; }
.split-bar { flex: 1; height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.split-bar span { display: block; height: 100%; border-radius: 999px; }
.split-val { font-weight: 800; font-size: 13px; min-width: 64px; text-align: right; }

/* Empty state */
.empty { text-align: center; padding: 52px 24px; color: var(--text-muted); }
.empty-ico { width: 70px; height: 70px; border-radius: 20px; margin: 0 auto 16px; display: grid; place-items: center; }
.empty-ico svg { width: 32px; height: 32px; }
.empty h4 { color: var(--text); font-size: 17px; margin-bottom: 6px; }
.empty p { max-width: 400px; margin: 0 auto 18px; }

/* Section heading */
.section-title { display: flex; align-items: center; gap: 12px; margin: 6px 2px 16px; }
.section-title h2 { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.section-title p { font-size: 12.5px; color: var(--text-muted); }
.section-title .right { margin-left: auto; display: flex; gap: 10px; }

/* Page intro banner */
.banner {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(115deg, #6d5efc 0%, #8a6bff 55%, #ff6b5e 135%);
  color: #fff; border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.banner h2 { font-size: 20px; font-weight: 800; }
.banner p { opacity: .92; font-size: 13.5px; margin-top: 2px; }
.banner .spacer { margin-left: auto; }
.banner .btn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.banner .btn:hover { background: rgba(255,255,255,.26); }
.banner .emoji { font-size: 40px; }

/* role-gated: visible by default; hidden only when the current role is insufficient.
   Driven by body[data-role] (set by app.js) so each element keeps its natural display. */
body:not([data-role]) [data-role-min] { display: none; }
/* hide an element when the user's role ranks below data-role-min.
   ranks: member < team_lead < manager < admin */
body[data-role="member"]    [data-role-min="team_lead"],
body[data-role="member"]    [data-role-min="manager"],
body[data-role="member"]    [data-role-min="admin"],
body[data-role="team_lead"] [data-role-min="manager"],
body[data-role="team_lead"] [data-role-min="admin"],
body[data-role="manager"]   [data-role-min="admin"] { display: none; }

/* template/SOP cards */
.tmpl { padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 168px; }
.tmpl-top { display: flex; align-items: center; gap: 10px; }
.tmpl-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.tmpl-ico svg { width: 18px; height: 18px; }
.tmpl h4 { font-size: 14.5px; font-weight: 800; }
.tmpl p { font-size: 12.5px; color: var(--text-muted); flex: 1; }
.tmpl-foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); }

/* misc */
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.tag-soon { font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--slate-soft); color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.flex { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 4px; }

/* Login */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-art {
  background: linear-gradient(155deg, #17181f 0%, #2a2440 55%, #5a2f63 120%);
  color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.auth-art .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.auth-art .b1 { width: 320px; height: 320px; background: var(--violet); top: -60px; right: -80px; }
.auth-art .b2 { width: 260px; height: 260px; background: var(--coral); bottom: -60px; left: -40px; opacity: .35; }
.auth-art .brand { padding: 0; position: relative; z-index: 2; }
.auth-copy { position: relative; z-index: 2; }
.auth-copy h2 { font-size: 36px; font-weight: 800; line-height: 1.12; letter-spacing: -.8px; margin-bottom: 16px; }
.auth-copy p { opacity: .85; font-size: 15px; max-width: 420px; }
.auth-features { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.auth-feature { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.auth-feature .fi { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.14); display: grid; place-items: center; flex: none; }
.auth-feature .fi svg { width: 18px; height: 18px; vertical-align: 0; }
.auth-form-wrap { display: grid; place-items: center; padding: 40px; }
.auth-form { width: 100%; max-width: 372px; }
.auth-form h1 { font-size: 25px; font-weight: 800; margin-bottom: 6px; }
.auth-form > .muted { margin-bottom: 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: 12px; outline: none; background: var(--surface);
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.btn-block { width: 100%; justify-content: center; padding: 13px; }

/* inline add inputs (minutes / todo) */
.mm-in { flex: 1; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; font: inherit; outline: none; }
.mm-in:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.mm-item { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.mm-item:first-child { border-top: none; }
.mm-date { color: var(--text-faint); font-weight: 700; font-size: 12px; min-width: 52px; flex: 0 0 52px; }
.td-item { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; cursor: pointer; }
.td-item:first-child { border-top: none; }
.td-item.done span { text-decoration: line-through; color: var(--text-faint); }
.td-item input { width: 17px; height: 17px; accent-color: var(--violet); }

/* clickable pill button */
button.pill { border: none; font: inherit; cursor: pointer; }
button.pill:hover { filter: brightness(.97); }

/* Receipt modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,22,38,.5); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 24px; }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 520px; box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700; word-break: break-all; flex: 1; }
.modal-x { border: none; background: var(--surface-2); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--text-muted); display: grid; place-items: center; }
.modal-x svg { width: 16px; height: 16px; vertical-align: 0; }
.modal-x:hover { color: var(--text); }
.modal-body { padding: 20px; }
.receipt-doc { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; background: linear-gradient(180deg, #fff, var(--surface-2)); }
.rc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rc-logo { font-weight: 900; font-size: 18px; color: #0866ff; }
.rc-amt { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 2px; }
.rc-line { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.rc-line span:first-child { color: var(--text-muted); }
.rc-line span:last-child { font-weight: 700; }

/* Responsive */
@media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-dash { grid-template-columns: 1fr; } }
@media (max-width: 980px) {
  .app { padding: 0; gap: 0; }
  .sidebar { position: fixed; left: -280px; top: 0; height: 100vh; border-radius: 0; transition: left .2s; z-index: 60; }
  .sidebar.open { left: 0; box-shadow: var(--shadow-lg); }
  .main { padding: 12px; }
  .search { display: none; }
  .menu-btn { display: grid; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; } .auth-art { display: none; }
  .user-meta { display: none; }
}

/* ============================================================
   Shared dropdown (dropdown.js) — used for every menu on the site.
   Native <select>s are enhanced in place; the select stays in the DOM
   as the source of truth and is hidden with .dd-native.
   ============================================================ */
.ms { position: relative; display: inline-block; }
.ms.block { display: block; width: 100%; }
/* !important so a page-level rule (e.g. .tb-select's height) can't give the
   hidden native select a real box again */
.dd-native {
  position: absolute !important; opacity: 0 !important; pointer-events: none !important;
  width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important;
  margin: 0 !important; min-width: 0 !important;
}

.ms-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 150px;
  height: 36px; padding: 0 12px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); text-align: left;
  border: 1px solid var(--border-strong); border-radius: 11px; background: var(--surface);
  transition: border-color .14s, box-shadow .14s;
}
.ms-btn:hover:not(:disabled) { border-color: var(--violet); }
.ms-btn:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.ms-btn[aria-expanded="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.ms-btn:disabled { opacity: .55; cursor: not-allowed; }
.ms-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-label.none { color: var(--text-faint); font-weight: 500; }
.ms-caret { width: 14px; height: 14px; flex: none; color: var(--text-faint); }

/* compact variant for toolbars (e.g. the editor's font size) */
.ms.compact .ms-btn { min-width: 0; height: 30px; padding: 0 9px; font-size: 12.5px; border-radius: 8px; }

/* popover lives on <body> and is positioned fixed, so nothing can clip it */
.ms-pop {
  position: fixed; z-index: 200; width: max-content; max-width: min(320px, 92vw);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; max-height: 300px; overflow-y: auto;
}
/* a row is just text with a tick on the right — no checkbox, no filled state */
.ms-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 9px 12px; border: none; border-radius: 9px; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: left; white-space: nowrap;
}
.ms-opt > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ms-opt:hover, .ms-opt:focus-visible { background: var(--surface-2); outline: none; }
.ms-opt.on { color: var(--text-muted); font-weight: 500; }   /* chosen = muted, the tick carries the meaning */
.ms-opt.ms-empty { color: var(--text-faint); cursor: default; }
.ms-tick { width: 16px; height: 16px; flex: none; color: var(--violet); opacity: 0; }
.ms-opt.on .ms-tick { opacity: 1; }

/* ---------- Scrollbars ----------
   No arrow buttons, no track, just the thumb — and it only appears while the
   area is being used: hovered, or actively scrolling (app.js adds .scrolling
   for a moment after each scroll, since CSS alone can't see that).
   The thumb is drawn as a padded content-box so it reads as a thin bar inside a
   wider, easier-to-grab hit area. */
.thin-scroll, .ms-pop, #dBody, #paneEdit, .rte, .gen-left, .table-wrap, .modal-body {
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  /* Stop at the end instead of handing the wheel to whatever is behind. Without
     this, scrolling to the bottom of a dialog carries on scrolling the library
     grid underneath, and closing the dialog leaves you somewhere else. */
  overscroll-behavior: contain;
}
.modal-backdrop { overscroll-behavior: contain; }
/* …and while a dialog is open the page behind it does not scroll at all, even
   with the pointer out on the backdrop. The padding replaces the width the page
   scrollbar was taking, so nothing shifts sideways as it disappears. */
body.modal-open { overflow: hidden; }
.thin-scroll:hover, .ms-pop:hover, #dBody:hover, #paneEdit:hover, .rte:hover, .gen-left:hover, .table-wrap:hover, .modal-body:hover,
.thin-scroll.scrolling, .ms-pop.scrolling, #dBody.scrolling, #paneEdit.scrolling, .rte.scrolling, .gen-left.scrolling, .table-wrap.scrolling, .modal-body.scrolling {
  scrollbar-color: var(--border-strong) transparent;
}
.thin-scroll::-webkit-scrollbar, .ms-pop::-webkit-scrollbar, #dBody::-webkit-scrollbar, #paneEdit::-webkit-scrollbar,
.rte::-webkit-scrollbar, .gen-left::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
.thin-scroll::-webkit-scrollbar-button, .ms-pop::-webkit-scrollbar-button, #dBody::-webkit-scrollbar-button, #paneEdit::-webkit-scrollbar-button,
.rte::-webkit-scrollbar-button, .gen-left::-webkit-scrollbar-button, .table-wrap::-webkit-scrollbar-button, .modal-body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.thin-scroll::-webkit-scrollbar-track, .ms-pop::-webkit-scrollbar-track, #dBody::-webkit-scrollbar-track, #paneEdit::-webkit-scrollbar-track,
.rte::-webkit-scrollbar-track, .gen-left::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb, .ms-pop::-webkit-scrollbar-thumb, #dBody::-webkit-scrollbar-thumb, #paneEdit::-webkit-scrollbar-thumb,
.rte::-webkit-scrollbar-thumb, .gen-left::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
  transition: background-color .15s;
}
.thin-scroll:hover::-webkit-scrollbar-thumb, .ms-pop:hover::-webkit-scrollbar-thumb, #dBody:hover::-webkit-scrollbar-thumb, #paneEdit:hover::-webkit-scrollbar-thumb,
.rte:hover::-webkit-scrollbar-thumb, .gen-left:hover::-webkit-scrollbar-thumb, .table-wrap:hover::-webkit-scrollbar-thumb, .modal-body:hover::-webkit-scrollbar-thumb,
.thin-scroll.scrolling::-webkit-scrollbar-thumb, .ms-pop.scrolling::-webkit-scrollbar-thumb, #dBody.scrolling::-webkit-scrollbar-thumb, #paneEdit.scrolling::-webkit-scrollbar-thumb,
.rte.scrolling::-webkit-scrollbar-thumb, .gen-left.scrolling::-webkit-scrollbar-thumb, .table-wrap.scrolling::-webkit-scrollbar-thumb, .modal-body.scrolling::-webkit-scrollbar-thumb {
  background: var(--border-strong); background-clip: content-box;
}
.thin-scroll::-webkit-scrollbar-thumb:hover, .ms-pop::-webkit-scrollbar-thumb:hover, #dBody::-webkit-scrollbar-thumb:hover, #paneEdit::-webkit-scrollbar-thumb:hover,
.rte::-webkit-scrollbar-thumb:hover, .gen-left::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint); background-clip: content-box;
}

.ms-clear { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.ms-clear button {
  width: 100%; text-align: left; padding: 7px 10px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--violet); border-radius: 8px;
}
.ms-clear button:hover { background: var(--violet-soft); }