/* eNew Responsive UI 1.2 — Prompt >= 13px, iPhone 14 / iPad / MacBook */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&display=swap');
:root {
  color-scheme: light;
  --navy:#132b4c; --navy2:#0d213c; --gold:#cba354; --gold-dark:#a47c35;
  --ink:#1e2b40; --muted:#63748a; --line:#e2e9f2;
  --page:#f4f7fb; --white:#fff; --surface:#fff;
  --shadow:0 8px 28px rgba(26,46,74,.055);
  --radius:15px;
}
*,*::before,*::after { box-sizing:border-box; }
html { min-width:320px; font-size:14px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--page); color:var(--ink); font:400 14px/1.7 'Prompt',Arial,sans-serif; }
body,button,input,select,textarea { font-family:'Prompt',Arial,sans-serif; }
button,input,select,textarea { font-size:14px; }
a { color:#205b96; text-decoration:none; }
a:hover { text-decoration:underline; }
button,.btn { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #86b4e7; outline-offset:2px;
}
img,video,svg { max-width:100%; }
small { font-size:13px; }
p { margin-top:0; }
.shell { min-height:100vh; display:flex; }
.sidebar { position:sticky; top:0; height:100vh; width:242px; flex:0 0 242px; min-width:0;
  display:flex; flex-direction:column; padding:29px 19px; color:#d1dceb; background:var(--navy2); z-index:5; }
.logo { width:max-content; font-size:31px; font-weight:700; letter-spacing:-1.2px; line-height:1.15; color:#fff; }
.logo span { color:var(--gold); }
.logo b { font-size:18px; vertical-align:top; margin-left:5px; color:var(--gold); }
.logo:hover { text-decoration:none; }
.sublogo { font-size:13px; letter-spacing:1px; color:#9baec7; margin:8px 0 32px 2px; }
.sidebar nav { display:grid; gap:6px; }
.sidebar nav a { display:block; border-radius:10px; padding:12px 13px; color:#c3d2e5;
  font-size:14px; font-weight:500; white-space:nowrap; }
.sidebar nav a.selected,.sidebar nav a:hover { color:#fff; background:#264463; text-decoration:none; }
.sidefoot { margin-top:auto; padding:15px 12px 2px; border-top:1px solid #2e4968; font-size:13px; color:#dbe3f0; }
.sidefoot span { display:block; color:#a4b7d0; font-size:13px; }
.sidefoot a { display:block; width:max-content; margin-top:12px; color:#f0c879; font-size:13px; }
.content { width:100%; min-width:0; max-width:1710px; padding:30px clamp(20px,3vw,42px) 0; margin:0 auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.eyebrow { font-size:13px; letter-spacing:.8px; color:#7c8da4; font-weight:500; }
.topbar h1 { font-size:clamp(22px,2.3vw,28px); line-height:1.4; margin:3px 0; font-weight:600; color:var(--navy); }
.avatar { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; background:#e2ebf5; color:var(--navy); font-size:16px; font-weight:700; }
.welcome { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:203px; padding:26px clamp(22px,3vw,35px); color:#fff; overflow:hidden;
  border-radius:var(--radius); background:linear-gradient(115deg,#112b4c 0%,#1c416a 72%,#274f79 100%); box-shadow:var(--shadow); }
.welcome .eyebrow { color:#f0ca7d; font-size:13px; }
.welcome h2 { font-size:clamp(21px,2.3vw,27px); line-height:1.5; margin:7px 0 8px; font-weight:600; }
.welcome p { color:#dfebf9; margin:0 0 15px; font-size:14px; }
.welcome-art { font-size:112px; color:#e2bc75; opacity:.82; transform:rotate(-10deg); line-height:1.3; margin-right:7%; }
.welcome-art span { position:absolute; right:12%; top:9%; font-size:47px; }
.btn { display:inline-flex; justify-content:center; align-items:center; min-height:42px; gap:8px;
  padding:10px 18px; border:0; border-radius:10px; font-size:14px; font-weight:500;
  line-height:1.5; text-align:center; cursor:pointer; max-width:100%; }
.btn:hover { filter:brightness(.97); text-decoration:none; }
.btn.gold { background:var(--gold); color:var(--navy); }
.btn.primary { background:var(--navy); color:#fff; }
.btn.secondary { background:#e8f0fa; color:#294c74; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0 22px; }
.stat,.panel { min-width:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); }
.stat { min-height:125px; padding:18px 20px; }
.stat small { display:block; font-size:13px; color:var(--muted); line-height:1.6; }
.stat strong { display:block; font-size:clamp(24px,2.4vw,31px); font-weight:600;
  color:var(--navy); margin:3px 0; font-variant-numeric:tabular-nums; }
.stat span { display:block; font-size:13px; color:#6f8298; line-height:1.5; }
.panel { padding:22px; margin-bottom:19px; }
.panel h3 { margin:0 0 14px; color:#183354; font-size:17px; line-height:1.5; font-weight:600; }
.panel-title { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px 15px; margin-bottom:16px; }
.panel-title h3 { margin:0; }
.panel-title > span { font-size:13px; color:var(--muted); }
.standalone { margin-top:5px; }
.table-wrap { min-width:0; max-width:100%; overflow:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; white-space:nowrap; text-align:left; }
th,td { padding:13px 12px; border-bottom:1px solid #e8edf4; vertical-align:middle; }
th { background:#f8fafd; color:#62738a; font-size:13px; font-weight:600; }
td { color:var(--ink); font-size:14px; }
td a { font-weight:500; }
tr:last-child td { border-bottom:0; }
.pill { display:inline-block; border-radius:50px; padding:5px 10px; font-size:13px;
  font-weight:500; line-height:1.4; color:#5b6f83; background:#eef2f7; }
.pill.subscribed,.pill.sent { color:#216848; background:#e5f5ec; }
.pill.draft,.pill.prospect { color:#627184; background:#edf1f5; }
.pill.prepared { color:#8b5b0f; background:#fff0d8; }
.pill.unsubscribed,.pill.bounced { color:#a83c51; background:#ffebee; }
.empty { padding:26px 12px; color:var(--muted); text-align:center; font-size:14px; }
.twocol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:18px; }
.form-grid { display:grid; gap:13px; }
label { display:block; color:#465b73; font-size:13px; font-weight:500; }
input:not([type=checkbox]),select,textarea { display:block; width:100%; min-width:0; margin-top:7px;
  border:1px solid #d8e2ef; border-radius:10px; padding:11px 13px; color:#192b43;
  background:#fff; line-height:1.5; outline:none; }
input:not([type=checkbox]),select { min-height:44px; }
input:focus,select:focus,textarea:focus { border-color:#739bca; box-shadow:0 0 0 3px rgba(90,142,203,.14); }
input:disabled,select:disabled,textarea:disabled { color:#657286; background:#f4f7fb; }
textarea { min-height:110px; resize:vertical; }
input[type=checkbox] { width:18px; height:18px; flex:0 0 18px; accent-color:var(--navy); }
.check { display:flex; align-items:flex-start; gap:10px; line-height:1.65; font-weight:400; }
.check input { margin-top:3px; }
.hint { margin:5px 0 13px; color:#697a90; font-size:13px; line-height:1.75; }
.muted { color:var(--muted); }
.alert { margin-bottom:16px; padding:13px 15px; border-radius:10px; font-size:14px; overflow-wrap:anywhere; }
.alert.ok { color:#246c4a; background:#e8f7ee; }
.alert.danger { color:#97354c; background:#ffebef; }
.editor-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  align-items:start; gap:18px; }
.preview-panel { position:sticky; top:15px; align-self:start; }
.mail-frame { width:100%; max-width:640px; margin:12px auto; padding:0 12px 14px;
  background:#f2f5f9; border-radius:8px; overflow:hidden; }
.mail-bar { padding:12px 4px; color:#677b93; font-size:13px; overflow-wrap:anywhere; }
.mail-brand { padding:20px clamp(16px,3vw,28px); background:#132a4a; color:#fff; font-size:18px; font-weight:600; }
.mail-brand b { color:#d2a855; }
.mail-body { padding:24px clamp(16px,3vw,28px); background:#fff; overflow-wrap:anywhere; }
.mail-body small { color:#a97f32; font-size:13px; font-weight:600; letter-spacing:.5px; }
.mail-body h2 { margin:13px 0; color:#132a4a; font:600 clamp(21px,2.3vw,27px)/1.5 'Prompt',Arial,sans-serif; }
.mail-body p { font:400 15px/1.9 'Prompt',Arial,sans-serif; white-space:pre-line; }
.mail-body a { display:inline-block; margin:12px 0; max-width:100%; padding:12px 16px;
  border-radius:6px; color:#fff; background:#132a4a; font-size:14px; overflow-wrap:anywhere; }
.mail-foot { padding:17px clamp(16px,3vw,28px); color:#67798d; background:#fff;
  border-top:1px solid #e9edf1; font:400 13px/1.8 'Prompt',Arial,sans-serif; overflow-wrap:anywhere; }
.mail-foot u { color:#132a4a; }
.detail>div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 15px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.detail b { font-size:14px; text-align:right; overflow-wrap:anywhere; }
.checklist { padding-left:20px; line-height:2.2; }
.foot { text-align:center; padding:24px 10px 30px; color:#708198; font-size:13px; }
.install { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:22px 14px;
  background:linear-gradient(135deg,#102949,#1d476f); }
.login-card { width:min(100%,460px); padding:clamp(20px,4vw,34px); display:grid; gap:15px;
  border-radius:18px; background:#fff; box-shadow:0 15px 55px rgba(5,24,50,.25); }
.login-card h1,.login-card h2,.login-card p { margin:0; }
.login-card p { color:var(--muted); }
.login-card h1 { font-size:24px; }
.login-card h2 { font-size:20px; }
.login-card .logo { color:var(--navy); }
.login-card .btn { margin-top:5px; width:100%; }
.login-card form { min-width:0; }
/* Medium and small MacBooks */
@media (max-width:1320px) {
  .editor-layout { grid-template-columns:1fr; }
  .preview-panel { position:static; }
}
/* iPad landscape / portrait and compact desktops: horizontal app navigation */
@media (max-width:1100px) {
  .shell { display:block; }
  .sidebar { position:relative; width:100%; height:auto; min-height:0; padding:15px 22px 13px;
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 12px; }
  .sidebar .logo { grid-column:1; grid-row:1; font-size:28px; }
  .sublogo { display:none; }
  .sidebar nav { grid-column:1/-1; grid-row:2; display:flex; gap:7px; overflow-x:auto;
    scrollbar-width:thin; padding:4px 0 2px; }
  .sidebar nav a { flex:0 0 auto; padding:10px 12px; font-size:14px; }
  .sidefoot { grid-column:2; grid-row:1; margin:0; padding:0; border:0; font-size:0; }
  .sidefoot br,.sidefoot span { display:none; }
  .sidefoot a { margin:0; padding:9px 11px; border:1px solid #536c89; border-radius:9px;
    font-size:13px; color:#f3cc84; }
  .content { padding:23px 22px 0; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preview-panel { position:static; }
  /* Card records on touch-oriented tablet layouts, but leave original table semantics intact */
  .table-wrap.responsive-cards { overflow:visible; }
  .table-wrap.responsive-cards table,.table-wrap.responsive-cards tbody { display:block; width:100%; white-space:normal; }
  .table-wrap.responsive-cards thead { display:none; }
  .table-wrap.responsive-cards tbody { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .table-wrap.responsive-cards tr { display:block; min-width:0; padding:13px 15px;
    background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 5px 16px rgba(25,47,75,.035); }
  .table-wrap.responsive-cards td { display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
    min-width:0; padding:7px 0; border:0; text-align:right; white-space:normal;
    font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
  .table-wrap.responsive-cards td::before { content:attr(data-label); flex:0 0 38%; min-width:0;
    text-align:left; color:#64768d; font-weight:400; font-size:13px; }
  .table-wrap.responsive-cards td:first-child { display:block; border-bottom:1px solid var(--line);
    margin-bottom:6px; padding:4px 0 11px; font-size:15px; font-weight:600; text-align:left; color:var(--navy); }
  .table-wrap.responsive-cards td:first-child::before { display:block; margin-bottom:3px; font-size:13px; font-weight:400; }
  .table-wrap.responsive-cards td:first-child a { color:var(--navy); font-weight:600; }
}
/* iPad portrait and large phones */
@media (max-width:800px) {
  .twocol { grid-template-columns:1fr; gap:0; }
  .editor-layout { display:block; }
  .stats { gap:12px; }
  .welcome-art { margin-right:2%; font-size:80px; }
  .content { padding:19px 16px 0; }
}
/* iPhone 14 (390px viewport) and similar phones: single-column cards and touch controls */
@media (max-width:600px) {
  .sidebar { padding:12px 14px 10px; }
  .sidebar .logo { font-size:27px; }
  .sidebar nav { gap:5px; }
  .sidebar nav a { padding:9px 11px; border-radius:9px; }
  .content { padding:15px 13px 0; }
  .topbar { margin-bottom:15px; }
  .topbar h1 { font-size:23px; line-height:1.4; }
  .topbar .eyebrow { font-size:13px; letter-spacing:.1px; }
  .avatar { width:38px; height:38px; flex-basis:38px; }
  .welcome { min-height:0; padding:21px; border-radius:15px; }
  .welcome h2 { font-size:21px; }
  .welcome p { font-size:13px; }
  .welcome-art { display:none; }
  .welcome .btn { width:100%; }
  .stats { gap:10px; margin:12px 0 17px; }
  .stat { min-height:112px; padding:13px; border-radius:13px; }
  .stat strong { font-size:25px; }
  .panel { padding:16px 14px; margin-bottom:14px; border-radius:14px; }
  .panel-title { align-items:stretch; }
  .panel-title > .btn { width:100%; }
  .table-wrap.responsive-cards tbody { grid-template-columns:1fr; gap:10px; }
  .table-wrap.responsive-cards tr { padding:12px 14px; }
  .form-grid .btn, .panel form > .btn { width:100%; }
  input:not([type=checkbox]),select,textarea { font-size:16px; } /* No iOS input focus zoom */
  .mail-frame { padding:0 7px 9px; }
  .mail-brand { padding:17px; font-size:16px; }
  .mail-body { padding:19px 16px; }
  .mail-body h2 { font-size:21px; }
  .mail-foot { padding:15px 16px; }
  .detail > div { display:block; }
  .detail b { display:block; text-align:left; }
  .foot { padding:21px 5px; }
}
@media (max-width:360px) {
  .stat { padding:11px; }
  .stat strong { font-size:23px; }
  .sidefoot a { padding:8px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }