:root {
  color-scheme: dark;
  --bg: #070a09;
  --sidebar: #090d0b;
  --surface: #0d1210;
  --surface-2: #111815;
  --surface-3: #17201c;
  --surface-raised: #151d19;
  --border: #25332d;
  --border-soft: #19231f;
  --text: #eff7f3;
  --text-soft: #c9d5cf;
  --muted: #8e9d96;
  --muted-2: #74827a;
  --primary: #10e69a;
  --primary-strong: #00c983;
  --primary-ink: #002a1c;
  --purple: #8f6cf5;
  --purple-soft: #c5b5ff;
  --danger: #f0626f;
  --warning: #f3b84b;
  --info: #65c7f7;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .42);
  --sidebar-width: 244px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { color: #00291b; background: var(--primary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #2a3832; background-clip: padding-box; }

.loading-screen,
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(16, 230, 154, .1), transparent 34%),
    radial-gradient(circle at 70% 76%, rgba(143, 108, 245, .06), transparent 32%),
    var(--bg);
}
.brand-symbol {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--primary-ink);
  background: linear-gradient(145deg, #54ffc4, var(--primary));
  border-radius: 16px;
  box-shadow: 0 12px 38px rgba(16, 230, 154, .2);
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -.06em;
}
.brand-symbol.small { width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }
.loading-copy { display: grid; gap: 5px; }
.loading-copy strong { font-size: 16px; }
.loading-copy span { color: var(--muted); font-size: 12px; }
.loader { width: 22px; height: 22px; border: 2px solid #24322c; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-card { width: min(100%, 450px); display: grid; justify-items: center; padding: 36px; background: rgba(13, 18, 16, .94); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); }
.auth-card .overline { margin-top: 20px; }
.auth-card h1 { margin: 8px 0 0; max-width: 360px; font-size: clamp(24px, 5vw, 34px); line-height: 1.08; letter-spacing: -.045em; }
.auth-card > p { margin: 15px 0 24px; max-width: 360px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.auth-form { width: 100%; display: grid; gap: 14px; text-align: left; }
.auth-form .form-error { margin: 0; }
.password-control { position: relative; display: block; }
.password-control input { padding-right: 76px; }
.password-toggle { position: absolute; top: 50%; right: 8px; min-height: 30px; padding: 4px 7px; transform: translateY(-50%); color: var(--primary); background: transparent; border: 0; border-radius: 7px; font-size: 10px; font-weight: 750; cursor: pointer; }
.password-toggle:hover { background: rgba(16,230,154,.08); }
.auth-card .auth-note { margin-top: 17px; max-width: 350px; color: var(--muted-2); font-size: 9px; line-height: 1.5; }

.app-shell { min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  background: var(--sidebar);
  border-right: 1px solid var(--border-soft);
}
.sidebar-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.sidebar-brand { min-width: 0; display: flex; align-items: center; gap: 11px; text-decoration: none; }
.sidebar-brand > span:last-child { min-width: 0; display: grid; gap: 2px; }
.sidebar-brand strong { font-size: 14px; letter-spacing: -.02em; }
.sidebar-brand small { color: var(--muted); font-size: 10px; }
.sidebar-close { display: none !important; }
.sidebar-create { width: 100%; margin: 22px 0 18px; }
.sidebar-nav { display: grid; gap: 4px; }
.nav-label { margin: 8px 10px 6px; color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-nav a {
  min-height: 43px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: #9eaca5;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 680;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.sidebar-nav a:hover { color: var(--text); background: var(--surface-2); transform: translateX(1px); }
.sidebar-nav a.active { color: var(--primary); background: rgba(16, 230, 154, .075); border-color: rgba(16, 230, 154, .16); }
.nav-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: inherit; background: rgba(255,255,255,.025); font-size: 15px; }
.sidebar-nav a.active .nav-icon { background: rgba(16, 230, 154, .1); }
.admin-navigation { display: grid; gap: 4px; }
.nav-count { min-width: 21px; padding: 4px 6px; color: var(--muted); background: var(--surface-3); border-radius: 999px; text-align: center; font-size: 9px; }
.sidebar-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.session-identity { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 10px; background: rgba(143,108,245,.045); border: 1px solid rgba(143,108,245,.14); border-radius: 11px; }
.session-identity > span:last-child { min-width: 0; display: grid; gap: 3px; }
.session-identity strong, .session-identity small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-identity strong { font-size: 10px; }
.session-identity small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }
.session-avatar { width: 32px; height: 32px; display: grid; place-items: center; color: #1d133d; background: var(--purple-soft); border-radius: 10px; font-size: 12px; font-weight: 900; }
.role-badge { padding: 3px 5px; color: var(--purple-soft); background: rgba(143,108,245,.1); border-radius: 999px; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.account-health { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 11px; }
.account-health > span:last-child { min-width: 0; display: grid; gap: 2px; }
.account-health strong, .account-health small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-health strong { font-size: 10px; }
.account-health small { color: var(--muted); font-size: 9px; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(243, 184, 75, .08); }
.health-dot.ok { background: var(--primary); box-shadow: 0 0 0 4px rgba(16, 230, 154, .08); }
.manager-link { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; color: var(--muted); text-decoration: none; font-size: 10px; }
.manager-link:hover { color: var(--primary); }
.manager-link-button { width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer; }
.sidebar-foot > p { margin: 0; padding: 0 8px; color: #536159; font-size: 8px; line-height: 1.45; }
.sidebar-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }

.app-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
  min-height: 78px;
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 13px 24px;
  background: rgba(7, 10, 9, .88);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(18px);
}
.menu-button { display: none !important; }
.page-heading { min-width: 0; }
.page-heading h1 { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; letter-spacing: -.035em; }
.page-heading p { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.overline { display: block; color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.workspace-banner {
  position: sticky;
  top: 78px;
  z-index: 39;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 11px 24px;
  color: #fff5d8;
  background: rgba(64, 42, 5, .97);
  border-bottom: 1px solid rgba(243, 184, 75, .42);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.workspace-banner-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--warning); background: rgba(243, 184, 75, .12); border: 1px solid rgba(243, 184, 75, .25); border-radius: 10px; }
.workspace-banner-copy { min-width: 0; display: grid; gap: 3px; }
.workspace-banner-copy strong, .workspace-banner-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-banner-copy strong { font-size: 12px; }
.workspace-banner-copy small { color: #cfbea0; font-size: 9px; }
.workspace-return { min-height: 36px; color: #2a1b03; background: var(--warning); white-space: nowrap; }
.workspace-readonly #view input:disabled,
.workspace-readonly #view select:disabled,
.workspace-readonly #view textarea:disabled { color: #a8b2ad; background: #101512; cursor: not-allowed; }
.workspace-readonly #view button:disabled { opacity: .38; cursor: not-allowed; }
.status-badge,
.pill,
.count-badge,
.draft-badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}
.status-badge { min-height: 34px; padding: 8px 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.status-badge.ok { color: var(--primary); background: rgba(16,230,154,.07); border-color: rgba(16,230,154,.22); }
.status-badge.warn { color: var(--warning); }
.pill { padding: 6px 8px; color: var(--purple-soft); background: rgba(143,108,245,.1); border: 1px solid rgba(143,108,245,.18); }
.pill.green { color: var(--primary); background: rgba(16,230,154,.08); border-color: rgba(16,230,154,.18); }
.count-badge { min-width: 25px; padding: 7px; color: var(--muted); background: var(--surface-3); }
.draft-badge { padding: 6px 8px; color: var(--warning); background: rgba(243,184,75,.08); border: 1px solid rgba(243,184,75,.18); }

.button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.button.primary { color: var(--primary-ink); background: var(--primary); box-shadow: 0 7px 20px rgba(16,230,154,.08); }
.button.primary:hover { background: #3af0b0; }
.button.accent { color: #fff; background: var(--purple); }
.button.accent:hover { background: #9e82f7; }
.button.secondary { color: var(--text-soft); background: var(--surface-2); border-color: var(--border); }
.button.ghost { color: var(--text-soft); background: transparent; border-color: var(--border); }
.button.secondary:hover, .button.ghost:hover { color: var(--text); background: var(--surface-3); border-color: #3c5047; }
.button.danger { color: #ff929b; background: rgba(240,98,111,.08); border-color: rgba(240,98,111,.22); }
.button.compact { min-height: 38px; padding: 8px 12px; font-size: 11px; border-radius: 8px; }
.button.wide { width: 100%; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 9px; font-size: 18px; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.icon-button:hover { color: var(--text); background: var(--surface-3); border-color: #3c5047; }
.icon-button.danger:hover { color: var(--danger); background: rgba(240,98,111,.08); border-color: rgba(240,98,111,.3); }
.text-action { padding: 2px; color: var(--primary); background: none; border: 0; font-size: 11px; font-weight: 700; cursor: pointer; }
.text-action.danger { color: var(--danger); }
.text-button-reset { width: 100%; color: inherit; background: none; border: 0; text-align: left; cursor: pointer; }
.disabled-link { opacity: .4; pointer-events: none; }

.view { min-height: calc(100vh - 78px); padding: 24px; }
.page-container { width: min(100%, 1440px); margin: 0 auto; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-card { min-width: 0; padding: 17px; background: linear-gradient(145deg, var(--surface), #0b100e); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-sm); }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 700; }
.stat-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--primary); background: rgba(16,230,154,.08); border: 1px solid rgba(16,230,154,.12); border-radius: 9px; font-size: 14px; }
.stat-icon.purple { color: var(--purple-soft); background: rgba(143,108,245,.09); border-color: rgba(143,108,245,.14); }
.stat-value { display: block; margin-top: 14px; font-size: 28px; font-weight: 850; letter-spacing: -.05em; }
.stat-foot { display: block; margin-top: 5px; color: var(--muted-2); font-size: 9px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 14px; margin-top: 14px; }
.panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 15px; box-shadow: var(--shadow-sm); }
.panel-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 17px; border-bottom: 1px solid var(--border-soft); }
.panel-head h3 { margin: 0; font-size: 14px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.panel-body { padding: 17px; }
.panel-head.no-panel { min-height: auto; padding: 0 0 11px; border: 0; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.quick-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px; color: inherit; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; text-align: left; text-decoration: none; cursor: pointer; }
.quick-card:hover { border-color: rgba(16,230,154,.3); background: var(--surface-3); }
.quick-card > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; color: var(--primary); background: rgba(16,230,154,.08); border-radius: 10px; font-size: 17px; }
.quick-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.quick-card strong { font-size: 11px; }
.quick-card small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.quick-card > span:last-child { color: var(--muted); }
.checklist { display: grid; gap: 8px; }
.check-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.check-row:last-child { border-bottom: 0; }
.check-mark { width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); background: var(--surface-3); border-radius: 50%; font-size: 10px; }
.check-row.done .check-mark { color: var(--primary-ink); background: var(--primary); }
.check-row span:nth-child(2) { font-size: 10px; }
.check-row a { color: var(--primary); font-size: 9px; text-decoration: none; }
.recent-list { display: grid; }
.recent-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.recent-row:last-child { border-bottom: 0; }
.recent-row-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--primary); background: rgba(16,230,154,.07); border-radius: 10px; }
.recent-row > div { min-width: 0; display: grid; gap: 3px; }
.recent-row strong, .recent-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row strong { font-size: 11px; }
.recent-row span { color: var(--muted); font-size: 9px; }

.hero-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-bottom: 16px; padding: 24px; overflow: hidden; background: linear-gradient(120deg, rgba(16,230,154,.105), rgba(143,108,245,.055) 58%, var(--surface)); border: 1px solid rgba(16,230,154,.18); border-radius: 17px; }
.hero-card h2 { margin: 7px 0 0; max-width: 650px; font-size: clamp(20px, 3vw, 29px); line-height: 1.16; letter-spacing: -.045em; }
.hero-card p { margin: 10px 0 0; max-width: 660px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.account-card { min-width: 0; padding: 17px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; }
.account-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-avatar { width: 42px; height: 42px; display: grid; place-items: center; color: var(--primary-ink); background: linear-gradient(145deg, #48f6b8, var(--primary)); border-radius: 13px; font-weight: 850; }
.account-card h3 { margin: 14px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.account-card p { margin: 0; color: var(--muted); font-size: 10px; }
.account-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0; }
.meta-box { min-width: 0; padding: 9px; background: var(--surface-2); border-radius: 9px; }
.meta-box small, .meta-box strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-box small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.meta-box strong { margin-top: 4px; font-size: 10px; }
.account-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.account-delete-button { margin-left: auto; }

.toolbar-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 11px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 13px; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-control { min-width: min(320px, 100%); position: relative; display: flex; align-items: center; }
.search-control > span { position: absolute; left: 12px; z-index: 1; color: var(--muted); font-size: 18px; }
.search-control input { padding-left: 37px; }
.segmented { display: inline-flex; gap: 3px; padding: 3px; background: #090d0b; border: 1px solid var(--border); border-radius: 10px; }
.segment { min-height: 31px; padding: 6px 10px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; font-size: 10px; font-weight: 700; cursor: pointer; }
.segment.active { color: var(--primary-ink); background: var(--primary); }

input, textarea, select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text);
  background: #090d0b;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: 0;
  font-size: 12px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select { cursor: pointer; }
input:focus, textarea:focus, select:focus { border-color: rgba(16,230,154,.55); box-shadow: 0 0 0 3px rgba(16,230,154,.075); }
input::placeholder, textarea::placeholder { color: #526059; }
input[readonly] { color: var(--muted); cursor: default; }
.field { min-width: 0; display: grid; align-content: start; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field > span, .field-head > span { color: var(--text-soft); font-size: 11px; font-weight: 680; }
.field small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.required::after { content: " *"; color: var(--primary); }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.char-count { color: var(--muted-2); font-size: 8px; font-weight: 600; }
.field-error { color: #ff9ba4 !important; }
.input-with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.form-error { padding: 10px 12px; color: #ffabb2; background: rgba(240,98,111,.075); border: 1px solid rgba(240,98,111,.2); border-radius: 9px; font-size: 10px; line-height: 1.5; }

.starter-section { margin-bottom: 18px; }
.starter-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.starter-card { min-width: 0; display: grid; grid-template-rows: 92px auto; padding: 0; overflow: hidden; color: inherit; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 13px; text-align: left; cursor: pointer; }
.starter-card:hover { border-color: rgba(143,108,245,.35); transform: translateY(-1px); }
.starter-art { display: grid; place-items: center; background: linear-gradient(145deg, rgba(16,230,154,.11), rgba(143,108,245,.1)); color: var(--primary); font-size: 28px; }
.starter-art.purple { color: var(--purple-soft); background: linear-gradient(145deg, rgba(143,108,245,.15), rgba(16,230,154,.055)); }
.starter-copy { min-width: 0; display: grid; gap: 4px; padding: 11px; }
.starter-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.starter-copy span { color: var(--muted); font-size: 9px; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.template-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; transition: border-color .15s, transform .15s; }
.template-card:hover { border-color: #34473e; transform: translateY(-1px); }
.template-card-preview { height: 120px; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 120%, rgba(16,230,154,.13), transparent 58%), #0b100e; }
.template-card-preview img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.template-preview-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--primary); background: rgba(16,230,154,.08); border: 1px solid rgba(16,230,154,.14); border-radius: 13px; font-size: 21px; }
.template-preview-icon.purple { color: var(--purple-soft); background: rgba(143,108,245,.09); border-color: rgba(143,108,245,.16); }
.template-card-preview .pill { position: absolute; top: 10px; left: 10px; backdrop-filter: blur(8px); }
.template-card-body { padding: 14px; }
.template-card-body h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.template-card-body p { height: 30px; margin: 6px 0 11px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.5; }
.template-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); color: var(--muted-2); font-size: 8px; }
.template-card-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-top: 11px; }

.empty-state { min-height: 250px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 28px; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 15px; text-align: center; }
.empty-state-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--primary); background: rgba(16,230,154,.07); border-radius: 14px; font-size: 21px; }
.empty-state h3 { margin: 0; color: var(--text); font-size: 14px; }
.empty-state p { max-width: 400px; margin: 0; font-size: 10px; line-height: 1.55; }
.small-empty { min-height: 74px; padding: 12px; }

.drop-zone { min-height: 150px; display: grid; place-content: center; justify-items: center; gap: 8px; margin-bottom: 14px; padding: 24px; color: var(--muted); background: linear-gradient(145deg, rgba(16,230,154,.025), rgba(143,108,245,.02)); border: 1px dashed #35463f; border-radius: 15px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop-zone:hover, .drop-zone.dragover, .drop-zone:focus-within { border-color: var(--primary); background: rgba(16,230,154,.055); }
.drop-zone:focus-within, label.button:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.drop-zone > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; color: var(--primary); background: rgba(16,230,154,.08); border-radius: 12px; font-size: 20px; }
.drop-zone strong { color: var(--text); font-size: 12px; }
.drop-zone small { font-size: 9px; }
.media-grid, .media-picker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.media-item { min-width: 0; position: relative; overflow: hidden; color: inherit; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; text-align: left; }
button.media-item { width: 100%; padding: 0; font: inherit; }
.media-item.selectable { cursor: pointer; }
.media-item.selectable:hover { border-color: var(--primary); }
.media-thumb-large { aspect-ratio: 1.35; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: #101713; }
.media-thumb-large img { width: 100%; height: 100%; object-fit: cover; }
.media-item-copy { min-width: 0; display: grid; gap: 3px; padding: 9px; }
.media-item-copy strong, .media-item-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item-copy strong { font-size: 9px; }
.media-item-copy span { color: var(--muted); font-size: 8px; }
.media-item-actions { position: absolute; top: 7px; right: 7px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.media-item:hover .media-item-actions { opacity: 1; }
.media-item-actions .icon-button { width: 29px; height: 29px; color: #fff; background: rgba(5,8,7,.8); border-color: rgba(255,255,255,.15); font-size: 13px; }

.send-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 14px; }
.send-card { padding: 18px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 15px; }
.send-card h3 { margin: 0 0 4px; font-size: 14px; }
.send-card > p { margin: 0 0 17px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.send-form { display: grid; gap: 14px; }
.lead-lists-card { margin-bottom: 14px; padding: 15px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 15px; }
.lead-lists-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lead-lists-heading h3 { margin: 3px 0 0; font-size: 14px; }
.lead-list-grid { max-height: 224px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; overflow: auto; padding: 1px; }
.lead-list-choice { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 11px 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.lead-list-choice:hover { border-color: rgba(16,230,154,.36); background: rgba(16,230,154,.035); }
.lead-list-choice:focus-visible { border-color: var(--primary); outline: 2px solid rgba(16,230,154,.24); outline-offset: 2px; }
.lead-list-choice.active { background: rgba(16,230,154,.07); border-color: rgba(16,230,154,.48); box-shadow: inset 3px 0 0 var(--primary); }
.lead-list-choice > span:first-child { min-width: 0; display: grid; gap: 4px; }
.lead-list-choice strong, .lead-list-choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-list-choice strong { font-size: 10px; }
.lead-list-choice small { color: var(--muted); font-size: 9px; }
.lead-list-choice > span:last-child { color: var(--primary); font-size: 17px; }
.lead-lists-empty { display: grid; gap: 4px; padding: 14px; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 11px; font-size: 9px; }
.lead-lists-empty strong { color: var(--text-soft); font-size: 10px; }
.lead-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.user-create-card { margin-bottom: 14px; }
.user-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.role-note { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.user-table { min-width: 880px; }
.workspace-active-row td { background: rgba(243, 184, 75, .035); }
.audit-card { margin-top: 14px; }
.audit-card .compact-heading { align-items: center; }
.audit-list { display: grid; gap: 7px; }
.audit-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; }
.audit-mark { width: 27px; height: 27px; display: grid; place-items: center; color: var(--warning); background: rgba(243, 184, 75, .08); border-radius: 8px; }
.audit-row > div { min-width: 0; display: grid; gap: 3px; }
.audit-row strong, .audit-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-row strong { font-size: 10px; }
.audit-row small, .audit-row time, .audit-empty { color: var(--muted); font-size: 9px; }
.audit-row time { white-space: nowrap; }
.audit-empty { margin: 0; padding: 12px; background: var(--surface-2); border-radius: 9px; }
.lead-form-grid code, .send-card code { padding: 2px 5px; color: var(--primary); background: rgba(16,230,154,.07); border-radius: 5px; font-size: .95em; }
.inline-actions, .row-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.account-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.account-rotation, .recipient-source { min-width: 0; margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: 11px; }
.account-rotation legend, .recipient-source legend { padding: 0 5px; color: var(--text-soft); font-size: 11px; font-weight: 700; }
.account-rotation > p, .recipient-source > p { margin: 0 0 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.account-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.campaign-lead-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.campaign-lead-mode { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 8px; padding: 10px; background: #090d0b; border: 1px solid var(--border-soft); border-radius: 9px; cursor: pointer; }
.campaign-lead-mode:has(input:checked) { background: rgba(16,230,154,.055); border-color: rgba(16,230,154,.4); }
.campaign-lead-mode input { width: 15px; min-height: 15px; margin: 1px 0 0; padding: 0; accent-color: var(--primary); }
.campaign-lead-mode span { min-width: 0; display: grid; gap: 4px; }
.campaign-lead-mode strong { font-size: 10px; }
.campaign-lead-mode small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.campaign-lead-panel { display: grid; gap: 8px; }
.campaign-lead-list-grid { max-height: 240px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow: auto; padding-right: 3px; }
.campaign-selection-summary, .campaign-selection-limit { display: grid; gap: 4px; padding: 10px 11px; color: var(--muted); background: rgba(16,230,154,.04); border: 1px solid rgba(16,230,154,.14); border-radius: 9px; font-size: 9px; line-height: 1.45; }
.campaign-selection-summary strong, .campaign-selection-limit strong { color: var(--text-soft); font-size: 10px; }
.campaign-selection-limit { margin-top: 10px; }
.campaign-selection-limit.error { color: #ffabb2; background: rgba(240,98,111,.075); border-color: rgba(240,98,111,.24); }
.campaign-selection-limit.error strong { color: #ffd3d7; }
.campaign-selection-count { color: var(--muted); font-size: 9px; line-height: 1.45; }
.campaign-individual-context { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.45; }
.lead-picker { max-height: 230px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow: auto; padding-right: 3px; }
.account-choice { min-width: 0; display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px; background: #090d0b; border: 1px solid var(--border-soft); border-radius: 9px; cursor: pointer; }
.account-choice:hover { border-color: rgba(16,230,154,.3); }
.account-choice input, .lead-table input[type="checkbox"] { width: 15px; min-height: 15px; margin: 1px 0 0; padding: 0; accent-color: var(--primary); }
.account-choice span { min-width: 0; display: grid; gap: 3px; }
.account-choice strong, .account-choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-choice strong { font-size: 10px; }
.account-choice small { color: var(--muted); font-size: 8px; }
.choice-empty { margin: 0; padding: 10px; color: var(--muted); background: rgba(255,255,255,.02); border: 1px dashed var(--border); border-radius: 9px; font-size: 9px; }
.choice-empty a { color: var(--primary); }
.import-feedback { padding: 10px 12px; color: #cceee2; background: rgba(16,230,154,.06); border: 1px solid rgba(16,230,154,.18); border-radius: 9px; font-size: 10px; line-height: 1.5; }
.import-feedback.error { color: #ffabb2; background: rgba(240,98,111,.075); border-color: rgba(240,98,111,.2); }
.lead-table { min-width: 900px; }
.lead-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding: 11px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 13px; }
.lead-pagination-pages { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.lead-pagination .lead-page-number { min-width: 34px; padding-inline: 9px; }
.lead-pagination .lead-page-number.active { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.lead-pagination .pagination-step { white-space: nowrap; }
.pagination-ellipsis { min-width: 22px; color: var(--muted); text-align: center; font-size: 11px; }
.send-summary { position: sticky; top: 98px; align-self: start; }
.summary-template { margin-top: 15px; padding: 12px; background: #090d0b; border: 1px solid var(--border); border-radius: 11px; }
.summary-template strong, .summary-template span { display: block; }
.summary-template strong { font-size: 11px; }
.summary-template span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.guardrail { margin-top: 13px; padding: 11px; color: var(--muted); background: rgba(243,184,75,.045); border-left: 2px solid rgba(243,184,75,.55); border-radius: 5px; font-size: 9px; line-height: 1.55; }
.consent-row { display: flex; align-items: flex-start; gap: 9px; color: var(--text-soft); font-size: 10px; line-height: 1.5; cursor: pointer; }
.consent-row input { width: auto; min-height: auto; margin: 2px 0 0; accent-color: var(--primary); }
.campaign-unavailable { padding: 12px; color: var(--muted); background: rgba(101,199,247,.04); border: 1px solid rgba(101,199,247,.14); border-radius: 10px; font-size: 9px; line-height: 1.5; }
.campaign-section { margin-top: 22px; }
.compact-heading { margin-bottom: 12px; }
.campaign-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campaign-card { min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-sm); }
.campaign-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.campaign-card-head > div { min-width: 0; }
.campaign-card-head h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.campaign-card-head div > span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.campaign-progress { width: 100%; height: 7px; margin: 15px 0 12px; overflow: hidden; appearance: none; border: 0; border-radius: 999px; background: var(--surface-3); }
.campaign-progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
.campaign-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--primary-strong), var(--primary)); border-radius: 999px; }
.campaign-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--primary-strong), var(--primary)); border-radius: 999px; }
.campaign-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.campaign-metrics span { min-width: 0; display: grid; gap: 2px; padding: 8px; color: var(--muted); background: var(--surface-2); border-radius: 8px; font-size: 9px; }
.campaign-metrics strong { color: var(--text); font-size: 13px; }
.campaign-error { margin: 10px 0 0; color: #ffabb2; font-size: 10px; line-height: 1.45; }
.campaign-card-actions { min-height: 35px; display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.campaign-finished { margin-right: auto; color: var(--muted); font-size: 10px; }

.table-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; }
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); text-align: left; font-size: 10px; }
.data-table th { color: var(--muted); background: #0b100e; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(255,255,255,.014); }
.table-primary { display: grid; gap: 3px; }
.table-primary strong { font-size: 10px; }
.table-primary span { color: var(--muted); font-size: 8px; }
.status-pill { padding: 6px 8px; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); }
.status-pill.success { color: var(--primary); background: rgba(16,230,154,.07); border-color: rgba(16,230,154,.18); }
.status-pill.error { color: #ff9ca5; background: rgba(240,98,111,.07); border-color: rgba(240,98,111,.18); }
.status-pill.unknown { color: #c7b8ff; background: rgba(139,99,232,.09); border-color: rgba(139,99,232,.24); }
.status-pill.pending { color: var(--warning); background: rgba(243,184,75,.06); border-color: rgba(243,184,75,.18); }

.editor-page { width: min(100%, 1800px); margin: 0 auto; }
.editor-toolbar { position: sticky; top: 78px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -24px -24px 18px; padding: 13px 24px; background: rgba(10,14,12,.94); border-bottom: 1px solid var(--border-soft); backdrop-filter: blur(15px); }
.editor-title { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; }
.editor-title > div { min-width: 0; }
.editor-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.editor-title h2 { max-width: min(46vw, 520px); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.editor-title p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.save-state,
.editor-validation-summary,
.card-readiness,
.card-limit {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}
.save-state > span:first-child,
.editor-validation-summary > span:first-child { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; font-size: 9px; }
.save-state.pending { color: var(--warning); background: rgba(243,184,75,.07); border-color: rgba(243,184,75,.22); }
.save-state.saving { color: var(--info); background: rgba(101,199,247,.07); border-color: rgba(101,199,247,.22); }
.save-state.saving > span:first-child { animation: spin .8s linear infinite; }
.save-state.error { color: #ff9ca5; background: rgba(240,98,111,.07); border-color: rgba(240,98,111,.24); }
.save-state.saved { color: var(--primary); background: rgba(16,230,154,.07); border-color: rgba(16,230,154,.2); }
.editor-validation-summary { color: var(--muted); background: transparent; cursor: pointer; }
.editor-validation-summary:hover { color: var(--text); background: var(--surface-3); }
.editor-validation-summary.pending { color: #ffabb2; border-color: rgba(240,98,111,.24); }
.editor-validation-summary.ready { color: var(--primary); border-color: rgba(16,230,154,.2); }
.editor-more { position: relative; }
.editor-more > summary { list-style: none; }
.editor-more > summary::-webkit-details-marker { display: none; }
.editor-more[open] > summary { color: var(--text); background: var(--surface-3); border-color: #3c5047; }
.editor-more-menu { min-width: 190px; position: absolute; top: calc(100% + 7px); right: 0; z-index: 45; display: grid; gap: 3px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow-lg); }
.editor-more-menu button { min-height: 38px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 9px; color: var(--text-soft); background: transparent; border: 0; border-radius: 7px; text-align: left; font-size: 11px; cursor: pointer; }
.editor-more-menu button:hover { color: var(--text); background: var(--surface-3); }
.editor-more-menu button.danger { color: #ff9ca5; }
.editor-more-menu button:disabled { opacity: .42; cursor: not-allowed; }
.editor-layout { display: grid; grid-template-columns: minmax(560px, 1fr) minmax(360px, 400px); gap: 20px; align-items: start; }
.editor-fields { min-width: 0; }
.editor-required-note { margin: 0 0 9px; color: var(--muted); font-size: 10px; text-align: right; }
.editor-required-note span { color: var(--primary); font-weight: 850; }
.form-section { margin-bottom: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; }
.form-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.form-section-head h3 { margin: 0; font-size: 15px; }
.form-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.editor-fields .field > span,
.editor-fields .field-head > span { font-size: 12px; }
.editor-fields .field small { font-size: 10px; }
.editor-fields input,
.editor-fields textarea,
.editor-fields select { font-size: 13px; }
.char-count { font-variant-numeric: tabular-nums; transition: color .15s; }
.char-count.near-limit { color: var(--warning); }
.char-count.at-limit { color: #ff9ca5; font-weight: 800; }
.hint { margin: 11px 0 0; padding: 11px 12px; color: var(--muted); background: rgba(16,230,154,.035); border-left: 2px solid rgba(16,230,154,.4); border-radius: 5px; font-size: 10px; line-height: 1.55; }
.hint.warning { background: rgba(243,184,75,.045); border-color: rgba(243,184,75,.55); }
.media-control { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.media-inline-preview { margin-top: 8px; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; background: #090d0b; border: 1px solid var(--border); border-radius: 10px; }
.media-inline-preview img { width: 78px; height: 56px; object-fit: cover; background: var(--surface-3); border-radius: 7px; }
.media-inline-preview > div { min-width: 0; display: grid; gap: 3px; }
.media-inline-preview strong, .media-inline-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-inline-preview strong { font-size: 11px; }
.media-inline-preview span { color: var(--muted); font-size: 9px; }
.button-editor-list { display: grid; gap: 8px; }
.button-editor { position: relative; display: grid; grid-template-columns: 118px minmax(130px, .8fr) minmax(190px, 1.4fr) 34px; align-items: end; gap: 8px; padding: 10px; background: #090d0b; border: 1px solid var(--border); border-radius: 11px; }
.mini-field { min-width: 0; display: grid; gap: 5px; }
.mini-field > span { color: var(--muted); font-size: 9px; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.button-editor input, .button-editor select { min-height: 40px; padding: 8px 9px; font-size: 11px; }
.target-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.target-control .icon-button { width: 40px; height: 40px; font-size: 13px; }
.add-row { width: 100%; margin-top: 9px; color: var(--primary); border-style: dashed; }
.card-section-actions { display: grid; justify-items: end; gap: 7px; }
.card-limit { color: var(--muted); background: var(--surface-2); }
.card-navigator-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.card-navigator { min-width: 0; display: flex; gap: 8px; padding: 2px 1px 10px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; }
.card-tab { min-width: 154px; min-height: 54px; flex: 0 0 auto; display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; align-items: center; gap: 9px; padding: 7px; color: var(--muted); background: #090d0b; border: 1px solid var(--border); border-radius: 11px; text-align: left; cursor: pointer; scroll-snap-align: start; }
.card-tab:hover { border-color: #3b4e46; }
.card-tab.active { color: var(--text); background: rgba(143,108,245,.1); border-color: rgba(143,108,245,.62); box-shadow: inset 0 0 0 1px rgba(143,108,245,.12); }
.card-tab.incomplete:not(.active) { border-color: rgba(243,184,75,.18); }
.card-tab.dragging { opacity: .45; }
.card-tab-thumb { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; color: var(--purple-soft); background: rgba(143,108,245,.1); border-radius: 8px; }
.card-tab-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-tab-copy { min-width: 0; display: grid; gap: 3px; }
.card-tab-copy strong, .card-tab-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-tab-copy strong { font-size: 10px; }
.card-tab-copy span { font-size: 9px; }
.card-tab-status { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 9px; font-weight: 850; }
.card-tab-status.pending { color: #241900; background: var(--warning); }
.card-tab-status.ready { color: var(--primary-ink); background: var(--primary); }
.card-tab.add { min-width: 118px; grid-template-columns: 1fr; place-items: center; border-style: dashed; color: var(--primary); text-align: center; }
.card-tab:disabled { opacity: .42; cursor: not-allowed; }
.card-tools { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.card-tools .icon-compact { width: 38px; padding-inline: 0; }
.card-readiness { color: var(--muted); background: var(--surface-2); }
.card-readiness.pending { color: var(--warning); border-color: rgba(243,184,75,.22); }
.card-readiness.ready { color: var(--primary); border-color: rgba(16,230,154,.2); }
.validation-list { display: grid; gap: 6px; }
.validation-row { display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: 9px; align-items: start; color: var(--muted); font-size: 10px; line-height: 1.5; }
.validation-row > span:first-child { width: 19px; height: 19px; display: grid; place-items: center; color: #ff9ca5; background: rgba(240,98,111,.08); border-radius: 50%; font-size: 9px; }
.validation-ok { display: flex; align-items: center; gap: 9px; color: var(--primary); font-size: 11px; }
.validation-ok > span { width: 22px; height: 22px; display: grid; place-items: center; color: var(--primary-ink); background: var(--primary); border-radius: 50%; }

.preview-column { position: sticky; top: 155px; display: grid; gap: 11px; }
.preview-panel { padding: 16px; background: #090d0b; border: 1px solid var(--border-soft); border-radius: 15px; }
.preview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.preview-head h3 { margin: 0; font-size: 13px; }
.preview-head span { color: var(--muted); font-size: 9px; }
.preview-meta { display: grid; justify-items: end; gap: 4px; text-align: right; }
.preview-head .preview-source { color: var(--primary); font-size: 9px; font-weight: 760; }
.preview-head .preview-source.draft { color: var(--warning); }
.phone-shell { max-width: 360px; margin: 0 auto; overflow: hidden; background: #0b100e; border: 1px solid #2b3933; border-radius: 21px; box-shadow: var(--shadow-lg); }
.phone-top { height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 12px; background: #17221e; }
.phone-avatar { width: 32px; height: 32px; display: grid; place-items: center; color: var(--primary-ink); background: var(--primary); border-radius: 50%; font-size: 11px; font-weight: 850; }
.phone-contact { min-width: 0; display: grid; gap: 2px; }
.phone-contact strong { font-size: 10px; }
.phone-contact span { color: var(--muted); font-size: 8px; }
.chat-wall { min-height: 470px; max-height: 560px; padding: 21px 11px; overflow: auto; background-color: #0c1411; background-image: radial-gradient(rgba(154,184,171,.052) 1px, transparent 1px); background-size: 15px 15px; }
.phone-input { height: 45px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 11px; color: #718078; background: #101713; font-size: 10px; }
.phone-input span:nth-child(2) { padding: 7px 10px; background: #1a231f; border-radius: 999px; }
.message-bubble { max-width: 100%; margin-left: auto; padding: 7px; background: #165b45; border-radius: 10px 3px 10px 10px; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.bubble-media { width: 100%; max-height: 176px; object-fit: cover; background: #203029; border-radius: 7px; }
.bubble-title { margin: 7px 6px 2px; font-size: 11px; font-weight: 800; }
.bubble-body { margin: 5px 6px; white-space: pre-wrap; font-size: 10px; line-height: 1.45; }
.bubble-footer { margin: 5px 6px 1px; color: #a7c1b5; font-size: 8px; }
.bubble-time { display: block; margin: 3px 3px 0; color: #a2b8ae; font-size: 7px; text-align: right; }
.preview-buttons { display: grid; gap: 1px; margin: 7px -7px -7px; border-top: 1px solid rgba(255,255,255,.12); }
.preview-button { padding: 8px 7px; color: #79ddff; background: rgba(6,28,22,.3); text-align: center; font-size: 9px; font-weight: 720; }
.empty-preview { padding: 32px 18px; color: #94a49d; text-align: center; font-size: 9px; line-height: 1.55; }
.preview-carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 1px 7px; color: #9bb0a6; font-size: 8px; }
.preview-carousel-head span:first-child { color: var(--text-soft); font-weight: 760; }
.carousel-preview { display: flex; gap: 7px; padding: 1px 1px 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.preview-card { min-width: 250px; max-width: 250px; overflow: hidden; background: #165b45; border: 1px solid transparent; border-radius: 10px; scroll-snap-align: start; box-shadow: 0 3px 12px rgba(0,0,0,.2); transition: border-color .15s, box-shadow .15s; }
.preview-card.active { border-color: rgba(143,108,245,.72); box-shadow: 0 0 0 2px rgba(143,108,245,.16), 0 3px 12px rgba(0,0,0,.2); }
.preview-card img { width: 100%; height: 128px; object-fit: cover; background: #203029; }
.preview-card-copy { padding: 7px 8px 3px; }
.preview-card-title { font-size: 10px; font-weight: 800; }
.preview-card-subtitle { margin-top: 2px; color: #bee1d2; font-size: 8px; }
.preview-card-body { margin-top: 6px; white-space: pre-wrap; font-size: 9px; line-height: 1.4; }
.preview-card-footer { margin-top: 6px; color: #a7c1b5; font-size: 7px; }
.preview-card .preview-buttons { margin: 6px 0 0; }
.preview-main-copy { max-width: 95%; margin: 0 0 7px auto; padding: 8px 9px; white-space: pre-wrap; overflow-wrap: anywhere; background: #165b45; border-radius: 10px 3px 10px 10px; font-size: 9px; }
.validation-panel:focus { border-color: rgba(143,108,245,.55); box-shadow: 0 0 0 3px rgba(143,108,245,.08); outline: 0; }
.compatibility-note { padding: 11px 12px; color: var(--muted); background: rgba(143,108,245,.045); border: 1px solid rgba(143,108,245,.14); border-radius: 10px; font-size: 9px; line-height: 1.55; }

.dialog { width: min(94vw, 620px); max-height: min(88vh, 850px); padding: 0; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); }
.dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(5px); }
.dialog-card { padding: 21px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-head h2 { margin: 5px 0 0; font-size: 19px; letter-spacing: -.035em; }
.dialog-copy { margin: 11px 0 17px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.compact-dialog { width: min(94vw, 540px); }
.kind-grid { display: grid; gap: 9px; margin-top: 18px; }
.kind-card { width: 100%; display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; color: inherit; background: #090d0b; border: 1px solid var(--border); border-radius: 12px; text-align: left; cursor: pointer; }
.kind-card:hover { border-color: rgba(16,230,154,.35); background: var(--surface-2); }
.kind-card > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.kind-card strong { font-size: 11px; }
.kind-card small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.kind-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; }
.kind-icon.green { color: var(--primary); background: rgba(16,230,154,.08); }
.kind-icon.purple { color: var(--purple-soft); background: rgba(143,108,245,.1); }
.media-dialog { width: min(94vw, 900px); }
.media-dialog .dialog-card { max-height: 85vh; display: flex; flex-direction: column; }
.dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 16px 0 12px; }
.media-picker-grid { min-height: 220px; overflow: auto; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.send-dialog { width: min(94vw, 520px); }
.connect-tabs { margin-top: 17px; }
.connect-panel { min-height: 265px; display: grid; place-content: center; padding: 20px 0 6px; }
.connect-form { width: min(100%, 420px); display: grid; gap: 14px; }
.connect-form > p, .connect-intro p, .qr-state p, .pairing-result p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.connect-intro, .qr-state, .pairing-result { width: min(100%, 420px); display: grid; justify-items: center; gap: 12px; text-align: center; }
.connect-intro h3, .qr-state strong { margin: 0; font-size: 14px; }
.qr-image { width: min(280px, 70vw); aspect-ratio: 1; padding: 8px; background: #fff; border-radius: 14px; }
.pairing-result > strong { padding: 13px 18px; color: var(--primary); background: rgba(16,230,154,.07); border: 1px solid rgba(16,230,154,.2); border-radius: 11px; font-size: 25px; letter-spacing: .12em; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; pointer-events: none; }
.toast { width: min(390px, calc(100vw - 36px)); display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 12px 13px; color: #dffbef; background: #10251d; border: 1px solid rgba(16,230,154,.28); border-radius: 11px; box-shadow: var(--shadow-lg); font-size: 10px; line-height: 1.45; pointer-events: auto; animation: toast-in .2s ease-out; }
.toast.error { color: #ffd9dc; background: #30161a; border-color: rgba(240,98,111,.32); }
.toast.info { color: #d9f3ff; background: #10212a; border-color: rgba(101,199,247,.28); }
.toast > span:first-child { width: 23px; height: 23px; display: grid; place-items: center; background: rgba(255,255,255,.07); border-radius: 50%; }
.toast button { padding: 3px; color: inherit; background: none; border: 0; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1260px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-grid, .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .editor-layout { grid-template-columns: minmax(440px, 1fr) 360px; gap: 16px; }
  .button-editor { grid-template-columns: 105px 1fr; padding-right: 48px; }
  .button-editor .mini-field:nth-child(3) { grid-column: 1 / -1; }
  .button-editor > .icon-button { position: absolute; top: 10px; right: 10px; }
}

@media (max-width: 1120px) {
  :root { --sidebar-width: 218px; }
  .view { padding: 19px; }
  .topbar { padding-inline: 19px; }
  .dashboard-grid, .send-layout, .campaign-grid, .lead-form-grid { grid-template-columns: 1fr; }
  .send-summary { position: static; }
  .editor-toolbar { margin: -19px -19px 15px; padding: 12px 19px; }
  .editor-layout { grid-template-columns: 1fr; }
  .preview-column { position: static; }
  .preview-panel { max-width: 620px; margin: 0 auto; }
  .media-grid, .media-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .sidebar { width: min(84vw, 290px); transform: translateX(-102%); box-shadow: var(--shadow-lg); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: grid !important; }
  .app-main { margin-left: 0; }
  .topbar { min-height: 68px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 9px 12px; }
  .menu-button { display: grid !important; }
  .page-heading p, .page-heading .overline, .status-badge, .desktop-action { display: none; }
  .workspace-banner { top: 68px; grid-template-columns: 32px minmax(0, 1fr); padding: 10px 14px; }
  .workspace-banner-icon { width: 30px; height: 30px; }
  .workspace-return { grid-column: 1 / -1; width: 100%; }
  .page-heading h1 { font-size: 16px; }
  .view { min-height: calc(100vh - 68px); padding: 14px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-actions { width: 100%; justify-content: flex-start; }
  .hero-card { grid-template-columns: 1fr; padding: 18px; }
  .hero-actions { justify-content: flex-start; }
  .stat-grid, .account-grid, .template-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr; }
  .toolbar-card { align-items: stretch; flex-direction: column; }
  .lead-lists-heading { align-items: flex-start; }
  .lead-list-grid { grid-template-columns: 1fr; }
  .toolbar-left, .toolbar-right { width: 100%; }
  .search-control { width: 100%; min-width: 0; }
  .lead-pagination { align-items: stretch; flex-wrap: wrap; }
  .lead-pagination-pages { order: -1; width: 100%; }
  .lead-pagination .pagination-step { flex: 1; }
  .starter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starter-card { grid-template-rows: 70px auto; }
  .media-grid, .media-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-item-actions { opacity: 1; }
  .editor-toolbar { top: 68px; align-items: flex-start; flex-direction: column; margin: -14px -14px 13px; padding: 10px 14px; }
  .editor-title h2 { max-width: min(68vw, 420px); }
  .editor-actions { width: 100%; display: grid; grid-template-columns: 38px repeat(2, minmax(0, 1fr)); }
  .editor-actions .button { width: 100%; }
  .editor-more, .editor-more > summary { width: 38px; }
  .editor-more-menu { right: auto; left: 0; }
  .form-grid, .user-create-grid { grid-template-columns: 1fr; }
  .account-mode-grid, .account-checklist, .lead-picker, .campaign-lead-modes, .campaign-lead-list-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .button-editor { grid-template-columns: 1fr; }
  .button-editor .mini-field:nth-child(3) { grid-column: auto; }
  .form-section { padding: 14px; }
  .form-section-head { align-items: flex-start; }
  .carousel-manager .form-section-head { flex-direction: column; }
  .card-section-actions { width: 100%; justify-items: start; }
  .card-tools { width: 100%; justify-content: flex-start; }
  .card-navigator-row { grid-template-columns: 1fr; }
  .card-tab.add { width: 100%; min-height: 42px; }
  .media-control { grid-template-columns: 1fr 1fr; }
  .media-control input[readonly] { grid-column: 1 / -1; }
  .phone-shell { max-width: 370px; }
  .dialog-toolbar { align-items: stretch; flex-direction: column; }
}

@media (max-width: 480px) {
  .topbar-actions > .icon-button:first-child { display: none; }
  .section-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .section-actions .button { width: 100%; }
  .stat-grid { gap: 8px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 24px; }
  .starter-row { grid-template-columns: 1fr; }
  .template-card-preview { height: 105px; }
  .media-grid, .media-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .media-item-copy { padding: 7px; }
  .editor-title-row { gap: 6px; }
  .save-state, .editor-validation-summary { font-size: 9px; }
  .editor-actions { grid-template-columns: 38px 1fr 1fr; }
  .card-tools .button { flex: 1; }
  .campaign-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-inline-preview { grid-template-columns: 62px minmax(0, 1fr) auto; }
  .media-inline-preview img { width: 62px; height: 50px; }
  .dialog-card { padding: 16px; }
  .dialog-actions { grid-template-columns: 1fr; }
}