/* Share post SX · Noir / Champagne. Local fonts and assets only. */
:root {
  color-scheme: dark;
  --bg:#0b0d10; --white:#14171b; --ink:#f3f0e9; --muted:#a3a5aa;
  --green:#d5b779; --gold:#d5b779; --pale:#232119; --border:#2b2e32;
  --surface:#14171b; --surface-raised:#1b1e23; --accent-soft:#d5b77912;
  --success:#8fc9ae; --danger:#f1a28e;
}
html { scroll-padding-top:100px; scrollbar-color:#4d473b #111317; }
body { background:radial-gradient(ellipse at 76% 0%,#d5b77907,transparent 38%),var(--bg); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#d5b77940; color:#fff; }
button { transition:background .18s,border-color .18s,box-shadow .18s; }
button:hover { filter:none; }
button:disabled { opacity:.42; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
input,select,textarea { color-scheme:dark; accent-color:var(--gold); }
input::placeholder,textarea::placeholder { color:#858991; opacity:1; }
input:-webkit-autofill { -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 1000px #181b20 inset; }
button,summary { -webkit-tap-highlight-color:transparent; }
.ui-icon { width:20px;height:20px;display:block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round; }
.sidebar { width:238px; padding:34px 20px 24px; background:linear-gradient(160deg,#14161a,#0d0f12 70%); border-right:1px solid #d5b7791c; }
.brand { margin:0 7px;gap:12px; }
.brand-mark { width:43px;height:43px; border-radius:13px;box-shadow:0 4px 24px #0005; }
.brand-wordmark { font-size:19px;letter-spacing:-.65px;font-weight:650; }
.brand-wordmark small { display:block;color:var(--gold);font-size:10px;letter-spacing:4px;font-weight:600;margin-top:6px; }
.workspace-label { color:#777e87; font-size:9px;letter-spacing:2.1px;margin:60px 14px 18px; }
.nav-item { min-height:52px;padding:14px 15px;gap:12px;border:1px solid transparent;color:#9c9fa7;border-radius:11px;font-size:13px;margin:6px 0; }
.nav-item:hover { background:#ffffff05;color:var(--ink); }
.nav-item.active { background:linear-gradient(100deg,#d5b77919,#d5b77907);border-color:#d5b77924;color:#e8cf9d; }
.nav-item>span:first-child { display:grid;place-items:center; }
.count { color:var(--gold);background:#d5b7791a;font-weight:650;min-width:23px;text-align:center; }
.sidebar-bottom { border-color:#2a2b2e;color:#95979c;font-size:10px;gap:8px;padding:20px 10px 0; }
.version { color:#8a9098; }
.small-dot,.pill i,.preview-heading i { background:var(--success);box-shadow:0 0 8px #8fc9ae30; }
.main-shell { margin-left:238px;width:calc(100% - 238px);min-width:0; }
.topbar { height:78px;padding:0 44px;background:#0e1013d9;border-color:#ffffff09;backdrop-filter:blur(20px);color:#9499a2; }
.topbar #breadcrumb { font-size:11px;letter-spacing:.2px; }
.pill { color:#bac4bd;background:#8fc9ae08;border-color:#8fc9ae22;font-size:10px;padding:8px 12px;gap:7px; }
.icon-button { background:#191c21;color:var(--gold);border-color:#33343a;width:38px;height:38px;border-radius:10px;display:inline-grid;place-items:center; }
.icon-button:hover { background:#24262b;border-color:#89764f; }
main { max-width:1450px;padding:44px 44px 0; }
.page-heading { margin-bottom:26px;align-items:center; }
.eyebrow { color:var(--gold);font-size:9px;letter-spacing:2.5px;margin-bottom:16px;font-weight:600; }
h1 { font-size:clamp(30px,3vw,45px);line-height:1.17;font-weight:550;letter-spacing:-1.9px; margin-bottom:15px; }
h1 em { color:#dec895;font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1.4px; }
.page-heading p { font-size:13px;line-height:1.65;color:#a0a4ac; }
.demo-label { position:static;border-color:#d5b77935;color:#d6bd8c;background:#d5b77906;border-radius:30px;padding:9px 13px;font-size:8px;letter-spacing:1.5px; }
.demo-label span { color:var(--gold);font-size:9px; }
.notice { background:#d5b77907;border-color:#d5b77924;border-radius:12px;color:#b9af99;padding:14px 17px;line-height:1.7;font-size:11px;margin-bottom:25px; }
.notice-icon { border-color:#8d7852;color:var(--gold); }
.notice strong { color:#dfcfaf; }
.notice .text-button { color:var(--gold);min-height:32px; }
.composer-layout { grid-template-columns:minmax(0,1.65fr) minmax(295px,1fr);gap:32px;align-items:start; }
.card { border-color:var(--border);background:linear-gradient(145deg,#171a1f,#13161a);border-radius:16px;box-shadow:0 6px 24px #0000000c; }
.connection { padding:18px 20px;gap:12px;margin-bottom:14px; }
.connection-icon { color:var(--gold);background:#d5b77910;border:1px solid #d5b77920;width:40px;height:40px;border-radius:12px;font-size:23px;flex-shrink:0; }
.connection>div:nth-child(2) { min-width:0;flex:1; }
.connection h2 { font-size:12px;color:var(--ink);line-height:1.6; }
.connection p { color:#9daba7;font-size:10px;line-height:1.6;overflow-wrap:anywhere; }
.cloud-card,.auth-card { padding:17px 20px;margin-bottom:18px;background:#101316;box-shadow:none; }
.cloud-card .section-heading h2,.auth-card .section-heading h2 { font-size:11px;font-weight:550;letter-spacing:.2px;color:#b7b9bf; }
.cloud-card #cloud-status,.auth-card #auth-status { font-size:11px;color:#c7b58e;font-weight:400;line-height:1.65;margin-top:9px; }
.cloud-card .text-button,.auth-card .text-button { font-size:10px;min-height:32px; }
.sync-details { margin-top:9px;font-size:10px;color:#92969f; }
.sync-details summary { cursor:pointer;padding:4px 0;min-height:28px; }
.sync-details p { margin:5px 0 0; }
.mode-switch { border-color:#2c2e33;background:#0b0e11;padding:5px;gap:5px;border-radius:11px;margin-bottom:20px; }
.mode-switch button { min-height:40px;color:#999da5;font-size:11px;border:1px solid transparent;border-radius:7px; }
.mode-switch button.selected { border-color:#d5b77935;background:linear-gradient(110deg,#d5b7791b,#d5b7790a);color:#e5ce9c;box-shadow:none; }
.editor-card { padding:23px 22px 0;margin-bottom:20px; }
.section-heading { gap:12px; }
.section-heading h2 { font-size:13px;font-weight:600;color:#efebe4; }
.step { background:#d5b7790c;border-color:#d5b77929;color:#d6bd8c;border-radius:6px;padding:5px 6px;min-width:27px;text-align:center;font-size:9px; }
.save-status { color:#9aab9f;font-size:9px;white-space:nowrap; }
.rich-controls { margin-top:19px;gap:8px;padding-bottom:15px;border-color:#292c31; }
.rich-controls p { font-size:10px;line-height:1.75;color:#8b9099; }
.secondary-button { color:#d9d6cf;background:#1c1f24;border-color:#36383e;border-radius:8px;padding:11px 13px;font-size:11px;min-height:40px; }
.secondary-button:hover { background:#272a30;border-color:#807052;color:#f0dfb9; }
.import-source-button { color:#d9c08f;background:#d5b7790b;border-color:#d5b77931;font-size:11px; }
.text-button { color:var(--gold);font-size:11px;border-radius:5px; }
.text-button:hover { color:#f6dfaf;background:#d5b77908; }
textarea { background:transparent;color:#edeae3;font-size:14px;line-height:1.9;min-height:230px;padding:23px 0 20px;caret-color:var(--gold); }
textarea::placeholder { font-size:13px;color:#8d939e; }
textarea:focus-visible { outline:none;box-shadow:inset 0 -1px var(--gold); }
textarea[readonly] { background:#111418;color:#b5b8bd; }
.editor-footer { border-color:#2a2d32;min-height:62px;color:#868c96;font-size:10px; }
.attachment-actions { gap:14px; }
.attachment-button { background:#1d2025;border-color:#34373d;color:#d8c49b;border-radius:7px;font-size:11px;padding:9px 11px;min-height:38px; }
.attachment-actions .text-button { color:#9b9da5;font-size:10px;min-height:38px; }
.mobile-preview-trigger { display:none; }
#attachment { border-color:#2a2d32;color:#b9b9ba;padding:12px 0; }
.attachment-row { border-color:#2a2d32; }
.destination-card { padding:23px 22px; }
.form-label,.field label { color:#b1b3b9;font-weight:500; }
.form-input,.field select,.group-choice input[type=search] { border-color:#34373f;background:#0f1216;color:#e0dcd4;border-radius:8px;min-height:44px;font-size:13px;padding:12px; }
input[type="date"],input[type="time"],input[type="datetime-local"]{color-scheme:light;background:#fff;color:#1a1c1f;}
input[type="date"]::-webkit-datetime-edit,input[type="time"]::-webkit-datetime-edit,input[type="datetime-local"]::-webkit-datetime-edit,input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,input[type="datetime-local"]::-webkit-datetime-edit-text,input[type="datetime-local"]::-webkit-datetime-edit-day-field,input[type="datetime-local"]::-webkit-datetime-edit-month-field,input[type="datetime-local"]::-webkit-datetime-edit-year-field,input[type="datetime-local"]::-webkit-datetime-edit-hour-field,input[type="datetime-local"]::-webkit-datetime-edit-minute-field{color:#1a1c1f;}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator{opacity:1;filter:none;}
.form-input:focus,.field select:focus,.group-choice input[type=search]:focus { border-color:#ab925e; }
.field-note { color:#9b9fa8;font-size:11px;line-height:1.75; }
.tiny-label { color:#8e929a; }
.checkbox-label { color:#b8babd;font-size:12px;line-height:1.7;gap:10px; }
.checkbox-label input,.topic-choice input { width:19px;height:19px;accent-color:var(--gold); }
.group-tree { background:#0f1216;border-color:#303339;padding:4px 10px;border-radius:11px;margin-top:16px; }
.group-choice { padding:3px 3px;border-color:#292c32; }
.group-choice summary { min-height:55px;font-size:12px;color:#dfdcd5;padding:14px 3px;gap:10px; }
.group-choice summary:before { color:#a48a58;font-size:20px; }
.group-choice summary small { color:#e2c793;background:#d5b77919;font-size:10px; }
.group-tools { gap:10px;justify-content:space-between;align-items:center; }
.group-tools small { color:#969ca5;font-size:10px; }
.group-tools button { color:#9a9fa8;font-size:10px; }
.topic-choice { color:#c1c4c9;border-color:#24272d;min-height:48px;padding:12px 8px;font-size:12px;gap:12px; }
.topic-choice:has(input:checked) { color:#e6d0a4;background:#d5b7790a;border-radius:7px; }
.topic-choice:has(input:disabled) { color:#777e87;cursor:not-allowed; }
.selection-heading { color:#cbc7bf;font-size:12px;margin-top:21px; }
.selected-destinations,.hidden-groups { color:#9ea3ab; }
.selected-chip { border-color:#2b2e34;color:#bdbfc4;gap:12px; }
.hidden-groups summary,.selected-destinations summary { min-height:40px;padding:11px 0; }
.connection-test,.target-picker-actions { border-color:#2c2f34; }
.target-row { background:#181b20;border-color:#35373b; }
.target-row small { color:#a3a6ac; }
.primary-button { background:linear-gradient(115deg,#e7cd94,#c8a664);color:#191610;border:1px solid #e3c98e;border-radius:9px;font-size:12px;font-weight:650;padding:15px 22px;min-height:48px;box-shadow:0 4px 18px #d5b77910; }
.primary-button:hover:not(:disabled) { background:linear-gradient(115deg,#f0dbaa,#d7b675);box-shadow:0 5px 22px #d5b77920; }
.primary-button span { color:#544223; }
.action-row { margin-top:22px; }
.quiet { color:#90979c;font-size:10px; }
.preview-column { padding:2px 0 0;position:sticky;top:28px;align-self:start;min-width:0; }
.preview-heading { color:#a6a8ae;margin:0 4px 17px;font-size:9px;letter-spacing:2px;min-height:24px; }
.preview-heading>span:last-child { color:#b8a682; }
.preview-fold-button { display:none; }
.phone-preview { background:#0f1216;border:1px solid #d5b77929;border-radius:23px;box-shadow:0 20px 50px #0004,0 0 0 5px #ffffff02;min-height:495px; }
.phone-top { background:#191c22;border-color:#2e3137;padding:18px 17px; }
.back-arrow,.phone-menu { color:#aa9365; }
.group-avatar { width:36px;height:36px;color:#e0c58d;background:#d5b77915;border:1px solid #d5b77926;font-size:13px; }
.phone-top strong { color:#e1dcd2;font-size:11px;overflow-wrap:anywhere; }
.phone-top>div:has(strong) { min-width:0; }
.phone-top>div>span { color:#8f98a4;font-size:9px; }
.chat-surface { background-color:#10151b;background-image:radial-gradient(#d5b7790d .6px,transparent .6px);background-size:16px 16px;padding:24px 15px;min-height:325px; }
.chat-day { background:#24272d;color:#949da9;font-size:8px;padding:5px 11px;margin-bottom:24px; }
.chat-message { background:#242b33;box-shadow:0 2px 10px #0002;border:1px solid #3b424a80;padding:14px 14px 10px;border-radius:13px 13px 13px 3px; }
.sender-name { color:#e3c78f;font-size:10px;letter-spacing:.1px; }
.chat-message p { color:#eceef0;font-size:14px;line-height:1.75; }
.chat-message p.placeholder-text { color:#9ba4b0; }
.message-meta { color:#99a5b4;font-size:8px; }
.message-meta>span:last-child { color:#b5c0c9; }
.chat-label { color:#7f8997;font-size:9px; }
.phone-bottom { background:#191c22;color:#8d98a8;padding:14px 17px; }
.phone-bottom>div { background:#12151b;border-color:#303640;color:#778291; }
.preview-tip { color:#ab9977;margin-top:23px;gap:12px; }
.preview-tip>span { color:#ccb27c; }
.preview-tip strong { color:#d0c09f;font-size:11px; }
.preview-tip p { color:#9499a3;font-size:11px;max-width:270px;line-height:1.75; }
#preview-media img,#preview-media video { background:#161b21; }
.rich-code { background:#383c43;color:#eee3c8; }
.rich-spoiler { background:#4c4e50; }
.premium-badge { color:#b8bdc7;background:#2a2e35;font-size:9px; }
.premium-badge.is-premium { color:#dec38d;background:#d5b77916;border:1px solid #d5b7792a; }
.batch-card { padding:23px 22px; }
.batch-text { background:#0f1216;color:#d1cabe;border-color:#30333a;font-size:12px; }
.batch-row { border-color:#2c3036;font-size:12px;padding:15px 0; }
.batch-row p { color:#9ca2ac;font-size:11px; }
.batch-row .batch-state { color:#b2a68c; }
.batch-row[data-status=sent] .batch-state,.live-success { color:var(--success)!important; }
.batch-row[data-status=error] .batch-state { color:var(--danger); }
.batch-row[data-status=sending] .batch-state { color:var(--gold); }
.history-section-title { color:#a9a194;font-size:11px;text-transform:uppercase;letter-spacing:1.8px;margin-top:32px; }
.history-item { padding:25px;margin:16px 0; }
.history-item header { color:#ece6da;line-height:1.6; }
.history-item header span { color:#8e949f; }
.history-item p { color:#b3b7bf;font-size:13px;line-height:1.8; }
.campaign-item .campaign-count { color:#d5b779;font-size:11px; }
.campaign-destinations { border-color:#30333a; }
.campaign-destinations p { border-color:#292d33;color:#a8adb7;font-size:12px; }
.campaign-actions { padding-top:7px; }
.campaign-actions .text-button { color:#b0a18a; }
.history-tag { color:#c5b08a;background:#d5b7790d;font-size:9px; }
.history-empty .empty-icon { color:var(--gold); }
.history-empty p { color:#a0a4ad; }
.help-grid .card { padding:28px; }
.help-grid h2 { color:#e9e2d6;font-weight:500;font-size:19px; }
.help-grid p { color:#a7acb5;font-size:13px;line-height:1.9; }
footer { border-color:#272a30;color:#7f8590;margin-top:42px;padding:25px 0; }
footer>span:first-child { color:#b5b0a4;font-weight:550;font-size:14px;letter-spacing:-.3px; }
.footer-brand b { color:var(--gold);font-size:10px; }
dialog { background:#15181d;border-color:#555040;color:var(--ink);border-radius:20px;width:calc(100% - 36px);max-width:570px;max-height:calc(100dvh - 48px);box-shadow:0 28px 110px #000a; }
dialog::backdrop { background:#050609bd;backdrop-filter:blur(9px); }
.modal-content { padding:38px 30px 30px; }
.modal-content h2 { color:#f0e8da;font-weight:500;font-size:26px;letter-spacing:-.8px;max-width:calc(100% - 20px);line-height:1.25; }
.modal-content p,.modal-content li { color:#acb0b8;font-size:13px;line-height:1.8; }
.modal-content .modal-kicker { color:var(--gold);font-size:9px;letter-spacing:2px;margin-right:25px; }
.modal-content a { color:#dec58e; }
.modal-content .field-note { color:#9da3ae;font-size:12px; }
.modal-preview { color:#dedbd4;background:#0e1115;border-color:#35383f;border-radius:10px;padding:17px; }
.modal-destination { color:#dfc899;background:#d5b7790c;border:1px solid #d5b77924;border-radius:9px;line-height:1.8; }
.form-error { color:#f3b59f!important;background:#4d291f33;border-color:#b6754c60; }
.modal-actions { flex-wrap:wrap; }
.modal-actions>button { min-height:46px;white-space:normal; }
.emoji-choice,.saved-original,.import-message-choice,.import-preview { background:#1c2026;color:var(--ink);border-color:#363b43;border-radius:10px; }
.emoji-choice:hover,.import-message-choice:hover,.saved-original:hover { background:#d5b7790c;border-color:#9b8355; }
.emoji-choice small { color:#aca8a0; }
.import-message-choice>small { color:#9aa2af; }
.import-preview { background:#101419; }
.toast { background:#e4cfaa;color:#1d1a15;border:1px solid #fff1ca40;border-radius:11px;box-shadow:0 8px 35px #0007;font-size:12px;max-width:min(520px,90%); }
.mobile-brand { color:#ece7dd; }
.mobile-brand b { color:var(--gold); }
@media(min-width:1500px) {
 main { padding-top:52px; }
 .composer-layout { gap:44px;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr); }
}
@media(max-width:1190px) {
 .sidebar { width:210px;padding:30px 14px 22px; }
 .main-shell { margin-left:210px;width:calc(100% - 210px); }
 .brand-wordmark { font-size:17px; }
 .brand-mark { width:38px;height:38px; }
 main { padding:34px 28px 0; }
 .topbar { padding:0 28px; }
 .composer-layout { gap:24px;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr); }
 h1 { font-size:36px; }
 .connection { flex-wrap:wrap; }
 .connection .secondary-button { min-height:38px; }
}
@media(max-width:980px) {
 .sidebar { width:196px; }
 .main-shell { margin-left:196px;width:calc(100% - 196px); }
 .composer-layout { grid-template-columns:minmax(0,1fr); }
 .preview-column { position:static;max-width:440px;width:100%;margin:24px auto 0; }
 .phone-preview { min-height:460px; }
 .help-grid { grid-template-columns:minmax(0,1fr); }
 .workspace-label { font-size:8px;letter-spacing:1.5px;margin-left:10px; }
 .nav-item { padding:13px 10px;font-size:12px;gap:10px; }
 .page-heading { align-items:flex-start; }
 .demo-label { font-size:7px;letter-spacing:.7px; }
}
@media(max-width:700px) {
 body { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
 .sidebar { display:none; }
 .main-shell { margin:0;width:100%; }
 .topbar { height:68px;padding:0 20px;position:relative; }
 .mobile-brand { display:flex;align-items:center;gap:9px;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:-.3px; }
 .mobile-brand img { width:32px;height:32px;border-radius:9px; }
 #breadcrumb { display:none; }
 .topbar-actions { gap:8px; }
 .pill { font-size:0;width:28px;height:28px;justify-content:center;gap:0;padding:0;border:0;background:none; }
 .pill i { width:6px;height:6px; }
 #install-button { width:38px;height:38px; }
 main { padding:29px 20px 0; }
 .eyebrow { font-size:8px;letter-spacing:2px;margin-bottom:13px; }
 h1 { font-size:35px;line-height:1.18;letter-spacing:-1.5px; }
 h1 em { letter-spacing:-1.1px; }
 .page-heading { position:relative;margin-bottom:23px;gap:10px; }
 .page-heading p { font-size:12px;max-width:260px;line-height:1.8; }
 .demo-label { position:absolute;top:0;right:0;font-size:6px;padding:6px 8px;letter-spacing:.7px;gap:4px; }
 .demo-label span { font-size:7px; }
 .notice { margin-bottom:20px;padding:13px 14px;font-size:11px;gap:10px;line-height:1.8;align-items:flex-start; }
 .notice-icon { margin-top:4px; }
 .notice div span { display:inline; }
 .notice .text-button { display:none; }
 .connection { padding:16px;gap:11px;border-radius:14px;flex-wrap:nowrap;margin-bottom:12px; }
 .connection h2 { font-size:12px; }
 .connection p { font-size:10px; }
 .connection-icon { width:35px;height:35px;border-radius:11px; }
 .connection>div:nth-child(2) { min-width:0; }
 .connection .secondary-button { padding:10px;font-size:10px;min-height:44px;white-space:normal;max-width:112px; }
 .cloud-card { padding:13px 16px 14px;border-radius:14px;margin-bottom:17px; }
 .cloud-card .section-heading { gap:4px; }
 .cloud-card .text-button { min-height:36px;font-size:10px; }
 .cloud-card #cloud-status { font-size:11px;margin-top:4px; }
 .sync-details { margin-top:4px; }
 .sync-details summary { min-height:32px; }
 .mode-switch { margin-bottom:18px; }
 .mode-switch button { min-height:44px;font-size:11px; }
 .editor-card { padding:20px 17px 0;border-radius:15px; }
 .section-heading { gap:8px; }
 .section-heading h2 { font-size:13px; }
 .save-status { font-size:9px; }
 .rich-controls { margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px; }
 .rich-controls .secondary-button { width:100%;min-height:46px;font-size:10px;text-align:center;padding:10px 8px; }
 .rich-controls .text-button,.rich-controls p { grid-column:1/-1; }
 .rich-controls p { font-size:10px;line-height:1.7; }
 textarea { font-size:16px;line-height:1.8;min-height:240px;padding:20px 0; }
 textarea::placeholder { font-size:14px; }
 .editor-footer { min-height:66px;font-size:9px; }
 .attachment-actions { gap:9px; }
 .attachment-button { min-height:44px;padding:10px;font-size:10px;gap:4px; }
 .attachment-actions .text-button { font-size:9px;min-height:44px; }
 .mobile-preview-trigger { display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:49px;padding:12px 0;border-top:1px solid #2b2e34;background:none;color:#cfb780;font-size:11px;text-align:left; }
 .mobile-preview-trigger .ui-icon { width:17px;height:17px; }
 .destination-card { padding:20px 17px;border-radius:15px; }
 .fields-row { grid-template-columns:minmax(0,1fr); }
 .form-label,.field label { font-size:12px; }
 .form-input,.field select,.group-choice input[type=search] { font-size:16px;min-height:48px; }
 .field-note { font-size:11px;line-height:1.8; }
 .group-tree { max-height:390px;padding:3px 7px; }
 .group-choice summary { font-size:13px;min-height:58px; }
 .topic-choice { font-size:13px;min-height:50px;padding:13px 6px; }
 .group-choice .topic-search-row { flex-wrap:wrap;gap:7px; }
 .group-choice .topic-search-row .secondary-button { min-height:44px; }
 .group-tools button { min-height:44px; }
 .checkbox-label { font-size:12px;gap:11px;margin-top:20px; }
 .checkbox-label input,.topic-choice input { width:20px;height:20px;margin-top:2px; }
 .selected-chip { font-size:12px; }
 .selected-chip button { min-width:44px;min-height:44px; }
 .selected-destinations,.hidden-groups { font-size:12px; }
 .primary-button,.secondary-button { min-height:46px; }
 .action-row { position:sticky;bottom:calc(77px + env(safe-area-inset-bottom));z-index:4;background:#0b0d10eb;backdrop-filter:blur(16px);border:1px solid #d5b7791f;box-shadow:0 -8px 24px #0002;border-radius:13px;margin:18px -5px 0;padding:9px;display:flex;flex-direction:row;align-items:center; }
 .action-row>.primary-button { width:100%;font-size:13px;min-height:49px;padding:14px 17px;gap:16px; }
 .action-row .quiet { display:none; }
 .preview-column { position:static;max-width:100%;margin:26px 0 0;padding:0;border-top:1px solid #2a2d32; }
 .preview-heading { margin:0;min-height:65px;gap:10px;font-size:9px; }
 .preview-heading>span:last-child { margin-left:auto;font-size:7px; }
 .preview-fold-button { display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;color:#d6bd8c;font-size:11px;border-radius:8px; }
 .preview-column:not([data-open=true]) .phone-preview,.preview-column:not([data-open=true]) .preview-tip { display:none; }
 .phone-preview { min-height:430px;border-radius:20px; }
 .phone-top { padding:17px; }
 .phone-top strong { font-size:12px; }
 .chat-surface { padding:24px 12px;min-height:280px; }
 .chat-message p { font-size:16px;line-height:1.7; }
 .chat-message { padding:14px 12px 10px; }
 .preview-tip p { font-size:12px; }
 .mobile-nav { display:flex;position:fixed;inset:auto 0 0;z-index:8;gap:5px;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:#111419f2;backdrop-filter:blur(24px);border-top:1px solid #d5b77924; }
 .mobile-nav button { position:relative;flex:1;min-height:51px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:none;color:#8e95a1;border-radius:10px; }
 .mobile-nav button .ui-icon { width:21px;height:21px; }
 .mobile-nav button span { font-size:10px;font-weight:500;letter-spacing:.2px; }
 .mobile-nav button.active { color:#e0c38b;background:#d5b7790c; }
 .mobile-nav button.active:before { content:'';position:absolute;top:0;width:20px;height:2px;border-radius:2px;background:#d5b779; }
 .toast { bottom:calc(94px + env(safe-area-inset-bottom));font-size:12px;width:max-content; }
 .batch-card { padding:20px 17px; }
 .batch-row { font-size:12px;gap:8px; }
 .batch-row .batch-state { font-size:10px;min-width:70px; }
 .batch-actions>button { min-height:46px; }
 .history-item { padding:20px 17px;border-radius:15px; }
 .history-item header { flex-direction:column;font-size:15px; }
 .history-item header span { font-size:10px; }
 .campaign-actions { flex-direction:column;align-items:stretch; }
 .campaign-actions .text-button { min-height:44px; }
 .history-item p { font-size:13px; }
 .page-heading>#clear-history { max-width:100px;white-space:normal;font-size:10px;padding:10px; }
 .history-item footer { flex-wrap:wrap; }
 .history-item footer button { min-height:44px; }
 .help-grid .card { padding:24px 20px; }
 footer { margin-top:28px;padding:25px 0 15px; }
 footer>span:nth-child(2) { display:none; }
 .modal-content { padding:38px 21px 23px; }
 .modal-content h2 { font-size:25px; }
 dialog { width:calc(100% - 24px);max-height:calc(100dvh - 32px);border-radius:18px; }
 .modal-content .form-input,.modal-content select { font-size:16px; }
 .modal-actions { flex-direction:column;gap:9px; }
 .modal-actions>button { width:100%;min-height:48px;font-size:12px; }
 .import-section>button { width:100%;min-height:46px; }
 #import-preview-text { font-size:16px; }
}
@media(max-width:370px) {
 main { padding-left:14px;padding-right:14px; }
 .topbar { padding:0 14px; }
 h1 { font-size:31px; }
 .demo-label { display:none; }
 .connection-icon { display:none; }
 .rich-controls { grid-template-columns:minmax(0,1fr); }
 .editor-card,.destination-card { padding-left:14px;padding-right:14px; }
 .attachment-actions { gap:4px; }
 .attachment-actions .text-button { padding:3px; }
 .save-status { font-size:8px; }
 .cloud-card .section-heading { align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }button,.view { transition:none;animation:none; } }

/* Separate preview view shares the same live DOM and draft. */
.composer-layout { grid-template-columns:minmax(0,1fr); max-width:850px; }
#view-preview .preview-column { position:static; max-width:500px; width:100%; margin:0; padding:0; border:0; }
#view-preview .preview-fold-button { display:none; }
#view-preview .phone-preview,#view-preview .preview-tip { display:flex; }
.preview-back { margin-top:25px; }
@media(max-width:700px) { #view-preview .preview-column { max-width:100%; } #view-preview .preview-heading { min-height:45px; } .preview-back { width:100%;min-height:48px; } }