:root {
  color-scheme: dark;
  --bg: #06111c;
  --bg-deep: #030a11;
  --surface: rgba(12, 31, 49, .88);
  --surface-2: rgba(16, 42, 65, .78);
  --surface-3: #10283d;
  --line: rgba(155, 190, 210, .15);
  --line-strong: rgba(0, 229, 255, .35);
  --text: #edfafe;
  --muted: #93afbc;
  --cyan: #00d8ef;
  --cyan-deep: #0396a9;
  --green: #4ade80;
  --violet: #a78bfa;
  --amber: #fbbf24;
  --red: #fb7185;
  --shadow: 0 28px 80px rgba(0, 0, 0, .34);
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-deep); }
body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(rgba(123, 172, 195, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 172, 195, .025) 1px, transparent 1px),
    radial-gradient(circle at 92% -10%, rgba(0, 229, 255, .12), transparent 30rem),
    linear-gradient(145deg, #06111c 0%, #071725 48%, #030a11 100%);
  background-size: 32px 32px, 32px 32px, auto, auto;
  color: var(--text);
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .18;
  pointer-events: none;
}
.ambient-one { top: 18%; right: -14rem; background: #00d8ef; }
.ambient-two { bottom: -12rem; left: -10rem; background: #5b5ff0; }

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 18px;
}
.login-card {
  width: min(100%, 440px);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(16, 42, 65, .95), rgba(7, 22, 35, .96));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-lockup img { flex: 0 0 auto; filter: drop-shadow(0 10px 18px rgba(0, 216, 239, .16)); }
.brand-lockup h1 { margin: 1px 0 0; font-size: 20px; letter-spacing: -.2px; }
.brand-lockup-login { margin-bottom: 30px; align-items: flex-start; }
.brand-lockup-login h1 { margin-top: 4px; font-size: 32px; }
.brand-lockup-login p { margin: 7px 0 0; color: var(--muted); line-height: 1.7; }
.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; }

.login-form { display: grid; gap: 18px; }
label { display: grid; gap: 9px; color: #c6dbe4; font-size: 13px; font-weight: 800; }
label > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
label em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 500; direction: ltr; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  background: rgba(2, 12, 20, .72);
  color: var(--text);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input, select { min-height: 50px; padding: 0 14px; }
textarea { min-height: 126px; resize: vertical; padding: 13px 14px; line-height: 1.75; }
input::placeholder, textarea::placeholder { color: #607d8a; }
input:focus, textarea:focus, select:focus {
  border-color: var(--cyan);
  background: rgba(4, 19, 30, .92);
  box-shadow: 0 0 0 4px rgba(0, 216, 239, .09);
}
.password-field { position: relative; }
.password-field input { padding-left: 48px; }
.password-field .icon-button { position: absolute; left: 6px; top: 5px; }
.security-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 11px; }

.primary-button, .danger-button, .ghost-button, .icon-button {
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .16s, opacity .16s, background .16s, border-color .16s;
}
.primary-button {
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #021014;
  background: linear-gradient(135deg, #00e5ff, #16c6d9 58%, #54e3ae);
  box-shadow: 0 14px 32px rgba(0, 216, 239, .18);
}
.primary-button:hover, .danger-button:hover { transform: translateY(-1px); }
.primary-button:disabled, .danger-button:disabled, .ghost-button:disabled { cursor: not-allowed; opacity: .52; transform: none; }
.danger-button { min-height: 46px; padding: 0 18px; color: #06111c; background: var(--cyan); }
.ghost-button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); color: #d9edf4; background: rgba(255,255,255,.035); }
.ghost-button:hover { border-color: var(--line-strong); background: rgba(0,216,239,.06); }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; color: #cce5ed; background: transparent; }
.icon-button:hover { background: rgba(255,255,255,.06); }

.form-error {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgba(251, 113, 133, .3);
  border-radius: 12px;
  background: rgba(251, 113, 133, .08);
  color: #fecdd3;
  font-size: 12px;
  line-height: 1.6;
}

.panel-view { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px max(24px, calc((100vw - 1280px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(5, 16, 26, .86);
  backdrop-filter: blur(18px);
}
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.service-state { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(251,191,36,.1); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(74,222,128,.1); }
.status-dot.offline { background: var(--red); box-shadow: 0 0 0 4px rgba(251,113,133,.1); }

.panel-shell { width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 60px; }
.hero-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 25px 27px;
  border: 1px solid rgba(0,216,239,.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 30%, rgba(0,216,239,.13), transparent 27rem),
    linear-gradient(115deg, rgba(14,43,64,.94), rgba(7,24,38,.92));
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.hero-strip h2 { margin: 5px 0 8px; font-size: clamp(23px, 3vw, 36px); letter-spacing: -.7px; }
.hero-strip p { margin: 0; color: var(--muted); line-height: 1.7; }
.package-stack { min-width: 285px; display: grid; gap: 8px; }
.package-stack span { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2,12,20,.44); }
.package-stack b { color: #d8eff6; font-size: 11px; }
code { direction: ltr; unicode-bidi: isolate; color: #79e7f5; font-family: Consolas, "Courier New", monospace; font-size: 11px; }
.market-ticker { min-height: 48px; display: flex; align-items: center; gap: 18px; margin-top: 10px; padding: 0 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: rgba(2,12,20,.6); scrollbar-width: none; }
.market-ticker::-webkit-scrollbar { display: none; }
.market-ticker div { min-width: max-content; display: flex; align-items: center; gap: 8px; }
.market-ticker span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .3px; }
.market-ticker b { color: #d8edf4; font-size: 10px; }
.market-ticker .trend-up { color: var(--green); }
.market-ticker .trend-down { color: var(--red); }
.market-ticker i { width: 1px; height: 17px; flex: 0 0 auto; background: var(--line); }

.reach-board {
  display: grid;
  grid-template-columns: minmax(250px, 1.15fr) minmax(330px, 1fr) minmax(220px, .72fr);
  align-items: stretch;
  gap: 12px;
  margin-top: 17px;
  padding: 16px;
  border: 1px solid rgba(0,216,239,.23);
  border-radius: 20px;
  background: linear-gradient(118deg, rgba(0,216,239,.09), rgba(10,29,44,.86) 45%, rgba(167,139,250,.06));
  box-shadow: 0 15px 40px rgba(0,0,0,.14);
}
.reach-main { display: flex; flex-direction: column; justify-content: center; padding: 5px 8px; }
.reach-main h3 { margin: 5px 0 6px; font-size: clamp(20px, 2.4vw, 31px); }
.reach-main h3 b { color: var(--cyan); white-space: nowrap; }
.reach-main p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.reach-packages { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.reach-packages div, .reach-caveat { display: flex; flex-direction: column; justify-content: center; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(2,12,20,.46); }
.reach-packages span, .reach-caveat span { color: var(--muted); font-size: 9px; font-weight: 900; }
.reach-packages b { margin: 6px 0 3px; color: #e9faff; font-size: 18px; direction: ltr; unicode-bidi: isolate; }
.reach-packages small { color: #6f929f; font-size: 8px; direction: ltr; unicode-bidi: isolate; }
.reach-caveat { border-color: rgba(251,191,36,.18); background: rgba(251,191,36,.045); }
.reach-caveat b { margin: 6px 0 4px; color: #fde68a; font-size: 12px; line-height: 1.45; }
.reach-caveat small { color: var(--muted); font-size: 9px; line-height: 1.55; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 17px; }
.stat-card { position: relative; min-height: 132px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 7px 12px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 14px 36px rgba(0,0,0,.12); overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 80px; height: 80px; left: -28px; bottom: -40px; border-radius: 50%; background: rgba(0,216,239,.05); }
.stat-icon { width: 38px; height: 38px; grid-row: span 2; display: grid; place-items: center; border-radius: 12px; font-size: 19px; font-weight: 900; }
.stat-icon.cyan { color: var(--cyan); background: rgba(0,216,239,.1); }
.stat-icon.green { color: var(--green); background: rgba(74,222,128,.1); }
.stat-icon.violet { color: var(--violet); background: rgba(167,139,250,.1); }
.stat-icon.amber { color: var(--amber); background: rgba(251,191,36,.1); }
.stat-card div { display: flex; align-items: baseline; gap: 8px; }
.stat-card b { font-size: 25px; }
.stat-card span:not(.stat-icon) { color: #d1e7ef; font-size: 12px; font-weight: 800; }
.stat-card small { grid-column: 1/-1; color: var(--muted); font-size: 10px; line-height: 1.5; }

.tabs { display: flex; gap: 6px; margin: 28px 0 16px; padding: 5px; width: max-content; max-width: 100%; border: 1px solid var(--line); border-radius: 15px; background: rgba(3,12,20,.58); }
.tab { min-height: 40px; padding: 0 19px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 900; }
.tab.active { color: #031014; background: var(--cyan); box-shadow: 0 8px 22px rgba(0,216,239,.17); }
.tab-panel { animation: rise .24s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(340px, .84fr); gap: 18px; align-items: start; }
.composer-card, .preview-card, .truth-card, .history-card { border: 1px solid var(--line); border-radius: 21px; background: var(--surface); box-shadow: 0 17px 48px rgba(0,0,0,.14); }
.composer-card { padding: 23px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.section-heading.spaced { margin-top: 28px; }
.section-heading > div { display: flex; align-items: center; gap: 10px; }
.section-heading h3 { margin: 0; font-size: 17px; }
.step { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--cyan); background: rgba(0,216,239,.1); font-size: 12px; font-weight: 900; }
.verified-pill { padding: 6px 9px; border-radius: 999px; color: #a7f3d0; background: rgba(74,222,128,.09); border: 1px solid rgba(74,222,128,.18); font-size: 10px; font-weight: 900; }
.audience-card { width: 100%; min-height: 82px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 14px; text-align: right; border: 1px solid var(--line-strong); border-radius: 16px; color: var(--text); background: linear-gradient(120deg, rgba(0,216,239,.09), rgba(12,31,49,.58)); }
.audience-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #00181c; background: var(--cyan); font-size: 24px; font-weight: 900; }
.audience-card b { display: block; margin-bottom: 6px; font-size: 15px; }
.audience-card small { color: var(--muted); font-size: 11px; }
.checkmark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #06201b; background: var(--green); font-weight: 900; }
.field-help { margin: 9px 3px 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.full-field { grid-column: 1/-1; }
label small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.send-button { width: 100%; margin-top: 20px; }

.preview-column { position: sticky; top: 95px; display: grid; gap: 14px; }
.preview-card { padding: 18px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: #d7edf4; font-size: 12px; font-weight: 900; }
.preview-head i { padding: 5px 8px; border-radius: 999px; color: var(--cyan); background: rgba(0,216,239,.08); font-size: 9px; font-style: normal; }
.phone-preview { max-width: 390px; min-height: 217px; margin: 0 auto; padding: 14px 13px; border: 7px solid #02080d; border-radius: 27px; background: linear-gradient(140deg, #233849, #0d1923); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 22px 50px rgba(0,0,0,.26); }
.phone-status { display: flex; align-items: center; justify-content: space-between; padding: 1px 5px 10px; color: #d9eaf0; font-size: 9px; direction: ltr; }
.notification-preview { display: grid; grid-template-columns: auto 1fr; gap: 11px; padding: 13px; border-radius: 16px; background: rgba(242,248,250,.96); color: #13232b; direction: rtl; box-shadow: 0 12px 34px rgba(0,0,0,.22); }
.notification-preview img { border-radius: 12px; }
.notification-app { display: flex; justify-content: space-between; gap: 8px; color: #49616b; font-size: 9px; }
.notification-app b { color: #1b444d; }
.notification-preview strong { display: block; margin-top: 7px; font-size: 13px; }
.notification-preview p { margin: 4px 0 0; color: #445a64; font-size: 10px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.dispatch-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 17px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.dispatch-summary div { padding: 11px 12px; background: #0a1d2c; }
.dispatch-summary dt { color: var(--muted); font-size: 9px; }
.dispatch-summary dd { margin: 4px 0 0; color: #e0f3f8; font-size: 11px; font-weight: 900; }
.truth-card { padding: 16px 17px; border-color: rgba(251,191,36,.16); background: linear-gradient(120deg, rgba(251,191,36,.06), rgba(12,31,49,.82)); }
.truth-card b { color: #fde68a; font-size: 12px; }
.truth-card p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.truth-card strong { color: #dceef4; }

.history-card { padding: 22px; }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.history-head h3 { margin: 0 0 5px; font-size: 19px; }
.history-head p { margin: 0; color: var(--muted); font-size: 11px; }
.fcm-sync-status { margin: -4px 0 16px; padding: 11px 13px; border: 1px solid rgba(0,216,239,.18); border-radius: 13px; color: #bfeef5; background: rgba(0,216,239,.055); font-size: 10px; line-height: 1.7; }
.fcm-sync-status.warning { border-color: rgba(251,191,36,.25); color: #fde68a; background: rgba(251,191,36,.06); }
.campaign-list { display: grid; gap: 10px; }
.campaign-item { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(100px, .55fr)) auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(3,14,23,.46); }
.campaign-copy b { display: block; margin-bottom: 5px; font-size: 13px; }
.campaign-copy p { margin: 0; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campaign-metric { display: grid; gap: 3px; }
.campaign-metric span { color: var(--muted); font-size: 9px; }
.campaign-metric b { font-size: 13px; }
.campaign-status { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 9px; border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.campaign-status.accepted { color: #a7f3d0; background: rgba(74,222,128,.1); }
.campaign-status.queued, .campaign-status.retry_wait, .campaign-status.dispatching { color: #a5f3fc; background: rgba(0,216,239,.09); }
.campaign-status.failed, .campaign-status.uncertain, .campaign-status.cancelled { color: #fecdd3; background: rgba(251,113,133,.1); }
.campaign-fcm-report { grid-column: 1/-1; display: grid; gap: 9px; padding: 11px 12px; border: 1px solid rgba(167,139,250,.16); border-radius: 12px; background: rgba(167,139,250,.045); }
.campaign-fcm-report.pending { border-color: rgba(251,191,36,.16); background: rgba(251,191,36,.035); }
.campaign-fcm-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.campaign-fcm-heading strong { font-size: 10px; color: #ddd6fe; }
.campaign-fcm-heading span { padding: 4px 7px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.04); font-size: 8px; font-weight: 900; }
.fcm-app-samples { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fcm-app-sample { display: grid; gap: 4px; padding: 8px 9px; border-radius: 9px; background: rgba(3,14,23,.42); }
.fcm-app-sample span { color: var(--muted); font-size: 8px; }
.fcm-app-sample b { font-size: 10px; line-height: 1.5; }
.campaign-fcm-report small { color: var(--muted); font-size: 8px; line-height: 1.55; }
.campaign-empty { padding: 40px 18px; text-align: center; border: 1px dashed var(--line); border-radius: 15px; color: var(--muted); font-size: 12px; }
.load-more { display: block; margin: 15px auto 0; }

.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,7,12,.76); backdrop-filter: blur(10px); }
.modal-card { position: relative; width: min(100%, 510px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 27px; border: 1px solid var(--line-strong); border-radius: 23px; background: #0b2031; box-shadow: 0 30px 100px rgba(0,0,0,.58); animation: rise .2s ease both; }
.modal-close { position: absolute; top: 12px; left: 12px; width: 35px; height: 35px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 24px; }
.modal-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 16px; color: #00171a; background: var(--cyan); font-size: 24px; font-weight: 900; }
.modal-card h2 { margin: 0 0 8px; font-size: 22px; }
.modal-card > p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 12px; }
.confirm-copy { display: grid; gap: 8px; margin: 18px 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(2,12,20,.52); }
.confirm-copy b { font-size: 13px; }
.confirm-copy span { color: #c8dce4; font-size: 11px; line-height: 1.6; white-space: pre-wrap; }
.confirm-copy code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm-reach { display: grid; gap: 5px; margin: -6px 0 18px; padding: 13px 14px; border: 1px solid rgba(0,216,239,.2); border-radius: 14px; background: rgba(0,216,239,.055); }
.confirm-reach span { color: var(--muted); font-size: 9px; font-weight: 900; }
.confirm-reach b { color: var(--cyan); font-size: 21px; direction: ltr; unicode-bidi: isolate; }
.confirm-reach small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }

.toast { position: fixed; z-index: 100; left: 22px; bottom: 22px; max-width: min(420px, calc(100% - 44px)); padding: 13px 16px; border: 1px solid rgba(74,222,128,.25); border-radius: 13px; background: #102a2a; color: #d1fae5; box-shadow: 0 18px 55px rgba(0,0,0,.4); font-size: 12px; font-weight: 800; opacity: 0; transform: translateY(14px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(251,113,133,.3); background: #30161d; color: #ffe4e6; }

@media (max-width: 980px) {
  .reach-board { grid-template-columns: 1fr 1fr; }
  .reach-main { grid-column: 1/-1; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-grid { grid-template-columns: 1fr; }
  .preview-column { position: static; grid-template-columns: minmax(0,1fr) minmax(260px,.65fr); }
}

@media (max-width: 720px) {
  .topbar { min-height: 68px; padding: calc(9px + env(safe-area-inset-top)) 14px 9px; }
  .topbar .brand-lockup img { width: 42px; height: 42px; }
  .topbar .brand-lockup h1 { font-size: 15px; }
  .topbar .eyebrow, .service-state span:last-child { display: none; }
  .topbar-actions { gap: 4px; }
  .topbar .ghost-button { padding: 0 10px; font-size: 10px; }
  .panel-shell { width: min(100% - 24px, 1280px); padding-top: 17px; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .hero-strip { align-items: stretch; flex-direction: column; padding: 20px; border-radius: 19px; }
  .hero-strip h2 { font-size: 24px; }
  .package-stack { min-width: 0; }
  .market-ticker { gap: 13px; padding: 0 13px; }
  .reach-board { grid-template-columns: 1fr; padding: 13px; border-radius: 17px; }
  .reach-main { grid-column: auto; }
  .reach-packages { grid-template-columns: 1fr 1fr; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 118px; padding: 14px; }
  .stat-card div { display: grid; gap: 1px; }
  .stat-card b { font-size: 21px; }
  .tabs { width: 100%; }
  .tab { flex: 1; padding: 0 10px; font-size: 11px; }
  .composer-card, .preview-card, .history-card { border-radius: 17px; }
  .composer-card { padding: 17px; }
  .form-grid { grid-template-columns: 1fr; }
  .full-field { grid-column: auto; }
  .preview-column { grid-template-columns: 1fr; }
  .send-button { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 10; box-shadow: 0 0 0 7px rgba(6,17,28,.86), 0 15px 35px rgba(0,216,239,.2); }
  .history-card { padding: 15px; }
  .history-head { align-items: flex-start; }
  .campaign-item { grid-template-columns: 1fr 1fr; gap: 11px; }
  .campaign-copy { grid-column: 1/-1; }
  .campaign-status { justify-self: end; }
  .modal-card { padding: 22px 18px 18px; }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions .danger-button { order: -1; }
}

@media (max-width: 430px) {
  .login-card { padding: 25px 20px; border-radius: 22px; }
  .brand-lockup-login h1 { font-size: 27px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { grid-template-columns: 1fr; align-content: start; min-height: 140px; }
  .stat-icon { width: 34px; height: 34px; grid-row: auto; }
  .stat-card small { grid-column: auto; }
  .audience-card { grid-template-columns: auto 1fr; }
  .checkmark { display: none; }
  .package-stack span { align-items: flex-start; flex-direction: column; gap: 4px; }
  .reach-packages { grid-template-columns: 1fr; }
  .phone-preview { border-width: 5px; }
  .dispatch-summary { grid-template-columns: 1fr; }
  .history-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .history-head .ghost-button { width: 100%; }
  .campaign-item { grid-template-columns: 1fr; }
  .campaign-copy { grid-column: auto; }
  .campaign-status { justify-self: stretch; }
  .fcm-app-samples { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}