:root {
  color-scheme: dark;
  --bg:#0b1120; --sidebar:#111827; --surface:#172233; --elevated:#202e42;
  --input:#101b2c; --text:#f3f6fc; --secondary:#cbd5e1; --muted:#a7b6cb;
  --border:#465773; --subtle:#293a52; --accent:#a5a8ff; --primary:#5b5fdf;
  --success:#68e0ba; --warning:#ffd081; --danger:#ffaaaa; --radius:14px;
}
* {box-sizing:border-box; scrollbar-width:thin; scrollbar-color:#60708a var(--sidebar)}
html {scroll-behavior:smooth; background:var(--bg); scrollbar-gutter:stable}
body {margin:0; background:var(--bg); color:var(--text); font:14px/1.65 Inter,"Segoe UI",Arial,sans-serif}
button,input,select,textarea {font:inherit}
button,a {touch-action:manipulation}
button {cursor:pointer}
a {color:var(--accent); text-decoration:none}
a:hover {color:#d2d4ff}
:focus-visible {outline:3px solid #b7b9ff; outline-offset:4px}
::selection {background:#5458b9; color:white}
h1,h2,h3 {color:var(--text); line-height:1.3; letter-spacing:-.035em; margin:0 0 12px}
h1 {font-size:clamp(26px,2.3vw,36px); font-weight:750}
h2 {font-size:21px; font-weight:700}
h3 {font-size:17px; font-weight:650}
p {margin:0 0 18px}
small {font-size:12px}
.muted {color:var(--muted)}
.icon {width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.shell {display:flex; min-height:100dvh}
.sidebar {position:fixed; inset:0 auto 0 0; z-index:30; display:flex; flex-direction:column; width:248px; background:var(--sidebar); border-right:1px solid var(--subtle); padding:28px 18px 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable}
.brand {display:flex; gap:11px; align-items:center; color:var(--text); font-size:16px; font-weight:750; line-height:1.3; flex:none}
.brand img {width:42px; height:42px; object-fit:contain; flex:none}
.brand small {display:block; font-size:9px; letter-spacing:1.3px; font-weight:600; color:var(--muted); margin-top:6px}
.nav {margin-top:36px}
.nav-caption {display:block; margin:0 12px 12px; font-size:10px; font-weight:700; letter-spacing:1.4px; color:var(--muted)}
.nav-link {min-height:48px; padding:11px 13px; margin:5px 0; border-radius:9px; display:flex; align-items:center; gap:12px; color:var(--secondary); font-size:14px; border:1px solid transparent}
.nav-link:hover {background:var(--elevated); color:white}
.nav-link.active {background:#2c2d58; color:#dbdcff; border-color:#54599b; font-weight:650}
.nav-icon {display:grid; place-items:center; width:23px; font-size:20px}
.nav-dot,.live-dot {width:7px; height:7px; background:var(--success); border-radius:50%; display:inline-block; flex:none}
.nav-dot {margin-left:auto; background:var(--accent)}
.sidebar-bottom {margin-top:auto; padding-top:25px}
.help-card {border:1px solid #424472; background:#1c2541; border-radius:12px; padding:18px; margin-bottom:22px}
.help-card>span {display:block; color:var(--accent); font-size:23px; margin-bottom:8px}
.help-card strong {font-size:13px}
.help-card p {font-size:12px; color:var(--muted); margin:9px 0 12px}
.help-card a {font-size:12px; font-weight:650}
.profile {border-top:1px solid var(--subtle); display:flex; gap:10px; align-items:center; padding:19px 0; min-width:0}
.avatar,.top-avatar {width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#34345e; color:#e2ddff; font-weight:700; flex:none}
.profile>div:nth-child(2) {min-width:0}
.profile strong {display:block; max-width:115px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px}
.profile small {display:block; color:var(--muted); font-size:11px}
.profile form {margin-left:auto}
.icon-button,.mobile-toggle {border:1px solid transparent; border-radius:8px; background:transparent; color:var(--secondary); min-width:40px; min-height:40px; padding:7px; display:inline-flex; justify-content:center; align-items:center}
.icon-button:hover,.mobile-toggle:hover {background:var(--elevated); border-color:var(--border); color:white}
.workspace {margin-left:248px; flex:1; min-width:0}
.topbar {height:76px; border-bottom:1px solid var(--subtle); padding:0 36px; display:flex; align-items:center; justify-content:space-between; background:var(--bg); gap:15px; font-size:12px}
.crumb {padding:0 13px; color:var(--muted)}
.top-actions {display:flex; align-items:center; gap:9px; color:var(--secondary); font-size:12px}
.top-avatar {margin-left:10px; width:32px; height:32px}
.main {max-width:1600px; margin:auto; padding:34px 36px 0; min-width:0}
.page-heading {display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:28px; min-width:0}
.page-heading>div {min-width:0}
.page-heading h1 {margin:8px 0; overflow-wrap:anywhere}
.page-heading p {font-size:14px; color:var(--muted); margin:7px 0 0}
.eyebrow {font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--accent)}
.wave {color:#c7b3ff; margin-left:5px}
.button {min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 17px; border:1px solid transparent; border-radius:8px; font-size:13px; font-weight:650; line-height:1.5; text-align:center; transition:background .15s,border-color .15s}
.primary {background:var(--primary); color:white; border-color:#8183fc}
.primary:hover {background:#5155d9; color:white; border-color:#babaff}
.secondary,.white {background:var(--elevated); color:var(--text); border-color:#71829c}
.secondary:hover,.white:hover {background:#303f59; color:white; border-color:#8c9fc1}
button:disabled,.button:disabled {cursor:not-allowed; background:#263348; color:#b1bfd2; border-color:#53627b; opacity:1}
.button[aria-busy=true]::after {content:""; width:13px; height:13px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .75s linear infinite}
@keyframes spin {to {transform:rotate(360deg)}}
.actions {display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.hero-card {background:#17233b; border:1px solid #3f4b72; border-radius:var(--radius); display:grid; grid-template-columns:1.35fr 1fr; overflow:hidden; position:relative; margin-bottom:25px}
.hero-copy {padding:32px 34px; position:relative; z-index:1}
.hero-label {font-size:10px; font-weight:700; letter-spacing:1.2px; display:flex; align-items:center; gap:8px; color:#c8c6ff}
.hero-copy h2 {font-size:clamp(26px,2.5vw,38px); line-height:1.35; margin:16px 0 14px}
.hero-copy h2 span {color:#bcbbff}
.hero-copy p {color:var(--secondary); font-size:14px; margin-bottom:22px}
.hero-foot {color:var(--muted); margin-top:16px; font-size:12px}
.hero-art {position:relative; display:flex; align-items:center; justify-content:center; min-width:0}
.hero-art img {width:min(65%,240px); height:auto; aspect-ratio:1; object-fit:contain; transform:rotate(-7deg); position:relative; z-index:1}
.orbit {position:absolute; width:min(90%,320px); aspect-ratio:1; border:1px solid #3b4871; border-radius:50%; transform:rotate(-25deg) scaleY(.8)}
.orbit-two {width:110%; transform:rotate(35deg) scaleY(.8)}
.floating-badge {position:absolute; padding:8px 11px; background:#26334e; border:1px solid #617294; color:#e4e9f5; border-radius:8px; font-size:11px; z-index:2}
.badge-top {top:30px; right:15px}.badge-bottom {bottom:30px; left:10px}
.green-check {color:var(--success); padding-right:5px}
.stats-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px}
.stat-card {background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; min-width:0}
.stat-top {display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--secondary); font-size:13px}
.stat-card>span {color:var(--secondary); font-size:13px}
.stat-card>strong {display:block; font-size:32px; font-weight:750; line-height:1.4; margin:7px 0 5px; letter-spacing:-1px}
.stat-card>small {display:block; color:var(--muted); font-size:12px}
.stat-icon {width:36px; height:36px; display:inline-grid; place-items:center; border-radius:9px; font-size:20px; flex:none}
.purple {background:#38305c; color:#d3c2ff}.blue {background:#243f60; color:#aacdff}.green {background:#1d453f; color:#9aecd2}.orange {background:#4a3928; color:#ffcf9a}
.content-grid {display:grid; grid-template-columns:1.6fr 1fr; gap:22px; margin-bottom:24px; align-items:stretch}
.panel {background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:25px; margin-bottom:24px; min-width:0}
.content-grid .panel {margin:0}
.section-heading {display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:19px}
.section-heading h2 {display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:0 0 7px; font-size:18px}
.section-heading p {font-size:13px; color:var(--muted); margin:0}
.pill {display:inline-block; border-radius:5px; padding:4px 7px; font-size:9px; font-weight:700; letter-spacing:.5px; color:#d3c8ff; background:#343158}
.guide-step {display:flex; gap:15px; align-items:center; padding:17px 0; border-bottom:1px solid var(--subtle); color:var(--text); min-width:0}
.guide-step:last-child {border:0; padding-bottom:0}
.guide-step:hover {color:#ddd7ff}
.step-number {display:grid; place-items:center; width:36px; height:36px; border-radius:10px; border:1px solid #647191; background:#233047; color:#ddd5ff; flex:none; font-size:12px}
.step-number.done {background:#1c4238; color:var(--success); border-color:#458c77}
.guide-step p {color:var(--muted); font-size:12px; margin:5px 0 0}
.step-arrow {margin-left:auto; color:var(--accent); font-size:18px}
.tip-card {background:#292c32; border:1px solid #79684d; border-radius:var(--radius); padding:26px; position:relative; overflow:hidden}
.tip-icon {display:block; color:var(--warning); font-size:27px; margin-bottom:15px}
.tip-card .eyebrow {color:var(--warning)}
.tip-card h2 {font-size:22px; margin:12px 0 16px}
.tip-card p {color:#d4ccbe; font-size:13px; line-height:1.8}
.tip-card a {color:#ffd89c; font-weight:650; font-size:13px; position:relative; z-index:1}
.tip-squiggle {display:none}
.text-link {font-size:13px; font-weight:600}
.table-wrap {max-width:100%; overflow-x:auto; padding-bottom:8px; scrollbar-gutter:stable; overscroll-behavior-x:contain; border-radius:7px}
table {border-collapse:collapse; width:100%; text-align:left; font-size:13px}
th {font-size:11px; text-transform:uppercase; letter-spacing:.7px; background:#111e31; color:var(--secondary); padding:15px 12px; font-weight:650; white-space:nowrap}
td {padding:18px 12px; color:var(--secondary); border-bottom:1px solid var(--subtle); vertical-align:middle; max-width:380px; overflow-wrap:anywhere}
tbody tr:last-child td {border:0}
tbody tr:hover {background:#1d2a3e}
td strong {color:var(--text); font-size:13px; font-weight:600}
td small {display:block; font-size:12px; color:var(--muted); margin-top:5px}
.campaign-name {display:flex; align-items:center; gap:12px; min-width:190px}
.campaign-icon {width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:9px; background:#343155; color:#d0c7ff; font-size:19px}
.status {display:inline-block; padding:4px 9px; border-radius:5px; border:1px solid #65708a; background:#2c3447; color:#e0e5f4; font-size:11px; text-transform:capitalize; white-space:nowrap}
.status.sent,.status.completed,.status.subscribed {color:#97edcf; background:#1c3d36; border-color:#408a72}
.status.sending,.status.scheduled {color:#bbcfff; background:#24385a; border-color:#627eb9}
.status.uncertain,.status.paused {color:#ffda9c; background:#483a26; border-color:#9a7b44}
.status.bounced,.status.complained,.status.unsubscribed,.status.cancelled {color:#ffbdbd; background:#492c36; border-color:#a46a7c}
.empty-state {text-align:center; padding:30px 15px}
.empty-state>span {display:inline-grid; place-items:center; font-size:30px; width:62px; height:62px; color:#ccbbff; background:#342e50; border-radius:15px; margin-bottom:18px}
.empty-state h3 {font-size:17px}.empty-state p {color:var(--muted); font-size:13px}
.page-footer {display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; font-size:11px; color:var(--muted); padding:25px 0}
.footer-star {color:var(--accent); margin-left:5px}
.notice {padding:15px 18px; background:#242d50; border:1px solid #6769a2; color:#e0e2ff; border-radius:10px; margin-bottom:22px; font-size:13px; overflow-wrap:anywhere}
.notice.success {background:#193b32; border-color:#408972; color:#9febcc}
.notice.error {background:#432a32; border-color:#aa687a; color:#ffcad0}
.notice a {text-decoration:underline; color:inherit}
.audience-grid {display:flex; gap:16px; overflow-x:auto; padding-bottom:12px; margin-bottom:20px; scrollbar-gutter:stable}
.audience-card {background:var(--surface); padding:22px; min-width:220px; border:1px solid var(--border); border-radius:12px; text-align:left; color:var(--text)}
.audience-card h3 {margin-top:14px}.audience-card p,.audience-card small {font-size:13px; color:var(--muted); margin:0}
.add-audience {display:flex; flex-direction:column; justify-content:center; gap:8px; background:#202541; border:1px dashed #8b83c0; color:#ddd4ff}
.add-audience>span {font-size:26px}.add-audience:hover {background:#2c3154}
.search-form {display:flex; gap:8px; align-items:center; flex-wrap:wrap}.search-form input {margin:0; max-width:250px}
.form-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px}
label {display:block; font-size:13px; font-weight:600; margin:18px 0; color:var(--secondary); min-width:0}
label small {display:block; font-weight:400; color:var(--muted); margin:5px 0}
input,select,textarea {display:block; width:100%; min-width:0; min-height:44px; border:1px solid #71829c; border-radius:8px; background:var(--input); color:var(--text); padding:11px 13px; margin-top:8px; font-size:14px; line-height:1.5}
input::placeholder,textarea::placeholder {color:#a6b3c8; opacity:1}
input:hover,select:hover,textarea:hover {border-color:#a2b3ce}
input:focus,select:focus,textarea:focus {border-color:#bebaff; outline:2px solid #9b9af3; outline-offset:2px}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true] {border-color:var(--danger)}
input:disabled,textarea:disabled,select:disabled {color:#b6c2d2; background:#263348; border-color:#53627b}
textarea {resize:vertical; min-height:100px}
select {cursor:pointer}option {background:var(--input); color:var(--text)}
input[type=file] {padding:8px; font-size:12px; overflow:hidden}
input[type=file]::file-selector-button {color:var(--text); background:var(--elevated); border:1px solid var(--border); border-radius:5px; padding:7px 10px; margin-right:10px}
.check {display:flex; align-items:flex-start; gap:10px; font-weight:400; line-height:1.8; color:var(--secondary)}
.check input {width:20px; height:20px; min-height:0; padding:0; margin:3px 0 0; flex:none; accent-color:#a5a8ff}
.inline-form {display:flex; gap:10px; align-items:center; flex-wrap:wrap}.inline-form select {max-width:260px; margin:0}
.template-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.template-card {border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; display:flex; flex-direction:column}
.template-preview {background:#242e46!important; padding:28px 25px 0; height:270px; overflow:hidden}
.paper {background:#29374e; border:1px solid #61718f; padding:22px; text-align:center; min-height:280px; border-radius:7px; color:var(--text)}
.paper>small {font-size:10px; letter-spacing:1.4px; color:#c4b8f2}.paper-art {font-size:44px; margin:13px; color:#c2afff}.paper h3 {font-size:20px}
.fake-lines {height:28px; margin:16px 0; background:repeating-linear-gradient(to bottom,#64738f 0,#64738f 2px,transparent 2px,transparent 9px)}
.fake-button {display:inline-block; padding:8px 14px; border-radius:5px; background:#5b5dcc; color:white; font-size:11px}
.template-bottom {padding:22px; flex:1; display:flex; flex-direction:column}.template-bottom p {font-size:13px; color:var(--muted)}.template-bottom form {margin-top:auto}
.advanced {margin-top:20px}.advanced summary {font-size:13px; color:var(--secondary); cursor:pointer; padding:10px 0; font-weight:650}.advanced summary:hover {color:white}
.settings-form {max-width:1000px}.settings-form h3 {margin-top:28px}.settings-form>.button {margin-bottom:15px}
.password-wrap {position:relative}.password-wrap input {padding-right:55px}.password-wrap button {position:absolute; right:3px; top:3px; min-height:40px; min-width:44px}
.field-error {display:block; font-size:12px; color:var(--danger); margin-top:6px; font-weight:400}
.pagination {margin-top:18px; max-width:100%; overflow-wrap:anywhere}.pagination svg {width:20px; height:20px}.pagination nav {display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}.pagination a,.pagination span.page-number {display:inline-flex; min-width:40px; min-height:40px; align-items:center; justify-content:center; padding:8px 12px; border-radius:7px; border:1px solid var(--border); background:var(--elevated); color:var(--text)}.pagination .current {border-color:#aaa5ff!important; background:#36355e!important}
.toast {position:fixed; z-index:100; bottom:24px; left:50%; transform:translateX(-50%); background:#293c59; border:1px solid #8e9fc2; color:#fff; padding:15px 20px; border-radius:10px; font-size:14px; width:max-content; max-width:calc(100vw - 30px); box-shadow:0 12px 40px #0005; display:none; overflow-wrap:anywhere}.toast.visible {display:block}
dialog {width:min(580px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; scrollbar-gutter:stable; border:1px solid #7786a1; border-radius:16px; padding:28px; background:var(--surface); color:var(--text); box-shadow:0 25px 70px #0008; overscroll-behavior:contain}
dialog::backdrop {background:#030711bb; backdrop-filter:blur(3px)}dialog p {color:var(--secondary); font-size:14px}dialog .button {margin-top:8px}
.dialog-heading {display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:15px}.dialog-heading h2 {font-size:23px; margin:0}.dialog-heading button {display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border); border-radius:8px; background:var(--elevated); color:white; font-size:25px; flex:none}
.import-preview {margin-top:20px; font-size:13px; max-height:300px; overflow:auto; padding:4px 8px 8px 0}.import-preview>div {padding:6px 0; overflow-wrap:anywhere}
.mobile-toggle {display:none}
.mobile-session {display:none}
.mode-switch {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;margin:0 0 24px;padding:5px;background:var(--input);border:1px solid var(--border);border-radius:10px}
.mode-switch-form {min-width:0}
.mode-button {width:100%;min-height:44px;background:transparent;border:1px solid transparent;border-radius:7px;color:var(--secondary);font-size:12px;padding:7px 3px;font-weight:600}
.mode-button:hover {background:var(--elevated);color:white}
.mode-button.selected {background:#34335d;border-color:#9694d8;color:white}
fieldset[data-connection-fields] {border:1px solid var(--border);padding:4px 17px 12px;margin:20px 0;border-radius:10px;min-width:0}
fieldset[data-connection-fields] legend {font-weight:650;padding:0 7px;color:var(--secondary)}
.toast.visible {display:flex;align-items:center;gap:15px}
.toast .icon-button {border-color:#8e9fc2;color:white;flex:none}
@media(max-width:700px){.mobile-session{display:block;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}}
.wizard-tabs {display:flex; padding:10px; gap:6px; border:1px solid var(--border); border-radius:12px; background:var(--surface); margin-bottom:24px}
.wizard-tab {min-height:48px; flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:10px 6px; border:1px solid transparent; border-radius:8px; background:none; color:var(--secondary); font-size:13px}
.wizard-tab>span {width:25px; height:25px; border:1px solid #7b89a3; border-radius:50%; display:grid; place-items:center; font-size:11px; flex:none}
.wizard-tab:hover {background:var(--elevated); color:white}.wizard-tab.active {background:#34335d; color:white; border-color:#8480c2}.wizard-tab.active>span {background:#6765cb; border-color:#c1bfff; color:white}
.wizard-panel {min-height:350px}.wizard-panel h2 {font-size:25px; margin-top:10px}.wizard-panel>.muted {font-size:14px}
.wizard-bottom {display:flex; gap:15px; justify-content:space-between; align-items:center; padding:22px 0}.wizard-bottom>span {color:var(--muted); font-size:12px}
.design-options {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:26px 0}
.design-option {padding:27px 15px; border:1px solid #71809a; border-radius:12px; background:#202d45; text-align:center; color:var(--text)}
.design-option:hover,.design-option.selected {background:#34345b; border-color:#b3adff}.design-option>span {display:block; font-size:32px; color:#c7baff; margin-bottom:15px}.design-option strong,.design-option small {display:block}.design-option small {color:var(--secondary); font-size:12px; margin-top:8px}
.editor-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start}.editor-controls {margin:0}.field-tip {color:#d4cbff; background:#2b2d4e; border:1px solid #616090; padding:11px; border-radius:8px; font-size:12px}
.block-card {padding:14px; border:1px solid #566882; border-radius:10px; margin:14px 0; background:#142033}.block-card:focus-within {border-color:#b8adff}
.block-card header {display:flex; align-items:center; gap:5px; font-size:11px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:9px; color:var(--secondary)}
.block-card header>span {margin-right:auto}.block-card header button {width:36px; height:36px; border:1px solid #596a85; border-radius:6px; background:#25344c; color:#e2e8f8; font-size:19px}.block-card header button:hover {background:#3b4668}
.block-card input,.block-card textarea {font-size:14px}.block-card label {font-size:12px}
.block-toolbar {border:1px dashed #8983bc; border-radius:10px; padding:15px; display:flex; flex-wrap:wrap; gap:8px}.block-toolbar>span {width:100%; font-size:12px; color:var(--secondary); margin-bottom:4px}.block-toolbar button {min-height:40px; padding:8px 10px; border:1px solid #71809a; border-radius:7px; background:#25324a; color:#e2deff; font-size:12px}.block-toolbar button:hover {background:#36395d}
.preview-column {background:#111a2a; border:1px solid var(--border); border-radius:12px; padding:13px; position:sticky; top:20px; text-align:center; min-width:0}
.preview-toolbar {display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--secondary); font-size:13px; padding-bottom:12px}.preview-toolbar>div {display:flex; gap:4px}
.preview-column iframe {display:block; margin:auto; width:100%; height:630px; border:1px solid #73849c; border-radius:8px; background:#fff; color-scheme:light}
.preview-column>small {display:block; padding-top:13px; font-size:11px}.review-checks {display:grid; gap:14px; padding:20px; margin:25px 0; border-radius:10px; border:1px solid #477e6c; color:#a9e6cf; background:#1a352f; font-size:14px}.save-template {border-top:1px solid var(--border); margin-top:32px; padding-top:12px}.save-status {font-size:12px; color:#b6c4da; min-height:24px}.send-summary {padding:18px; background:#292e50; border:1px solid #7370a9; border-radius:9px; margin:20px 0; color:#e0dcff; overflow-wrap:anywhere}
.login-body {min-height:100dvh; background:var(--bg)}.login-top {display:flex; justify-content:space-between; align-items:center; padding:32px 6%; gap:20px}.login-top>.muted {font-size:13px}.login-grid {display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:8%; max-width:1240px; margin:50px auto 65px; padding:0 35px}.login-grid h1 {font-size:clamp(32px,4vw,50px); margin:22px 0; line-height:1.3; letter-spacing:-1.7px}.login-grid h1 em {font-style:normal; color:#c0b6ff}.login-lead {font-size:16px; color:var(--secondary); line-height:1.9; max-width:490px}.login-perks {display:grid; gap:13px; color:#c7d5e9; font-size:14px; margin:28px 0}.mini-proof {display:flex; gap:15px; align-items:center; color:var(--muted); font-size:12px}.mini-avatars {display:flex; padding-left:6px}.mini-avatars i {display:grid; place-items:center; width:32px; height:32px; border:2px solid var(--bg); margin-left:-6px; border-radius:50%; font-style:normal; background:#413761; color:#e1d4ff}.mini-avatars i:nth-child(2) {background:#23473f; color:#aff0d9}.mini-avatars i:nth-child(3) {background:#4d3d29; color:#ffe0ac}
.login-card {background:var(--surface); border:1px solid #52627d; border-radius:18px; padding:38px 32px; text-align:center}.logo-halo {display:grid; place-items:center; width:120px; height:120px; margin:0 auto 25px; border-radius:24px; background:#202b46}.logo-halo img {width:90px; height:90px; object-fit:contain; aspect-ratio:1}.login-card h2 {font-size:25px; margin:21px 0 12px}.login-card>p {color:var(--secondary); font-size:14px}.login-button {display:flex; white-space:normal; margin:26px 0 15px; min-height:52px}.login-card>small {color:var(--muted); font-size:12px}.login-divider {height:1px; background:var(--border); margin:28px 0 23px}.secure-note {display:flex; gap:13px; align-items:center; text-align:left}.secure-note>span {font-size:25px; color:#bfb6f4}.secure-note strong {font-size:13px}.secure-note small {display:block; font-size:12px; color:var(--muted); margin-top:5px}.login-footer {display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; padding:24px 6%; color:var(--muted); font-size:12px}.preference-body {display:grid; place-items:center; min-height:100dvh; padding:24px}.preference-body .login-card {max-width:540px}.preference-body h1 {font-size:29px}
[hidden] {display:none!important}
@media(min-width:1600px) {.main {padding-top:40px}.hero-copy {padding:38px 40px}.hero-art img {width:240px}}
@media(max-width:1200px) {.sidebar {width:222px; padding-inline:15px}.workspace {margin-left:222px}.brand {font-size:14px}.brand small {font-size:8px}.main {padding:28px 25px 0}.topbar {padding:0 25px}.hero-copy {padding:28px}.hero-art img {width:70%}.floating-badge {font-size:10px}.stats-grid {gap:12px}.stat-card {padding:17px}.stat-card>small {font-size:11px}.content-grid {grid-template-columns:1.4fr 1fr}.template-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.editor-grid {grid-template-columns:1fr}.preview-column {position:static}.preview-column iframe {max-width:650px}.profile strong {max-width:100px}}
@media(max-width:900px) {.sidebar {width:190px; padding-inline:12px}.workspace {margin-left:190px}.brand {font-size:13px; gap:8px}.brand img {width:34px; height:34px}.brand small {font-size:7px; letter-spacing:.8px}.nav-link {font-size:13px; padding:10px; gap:9px}.sidebar .help-card {padding:12px}.help-card strong {font-size:12px}.profile {gap:7px}.profile strong {max-width:70px}.profile .avatar {width:28px; height:28px}.profile .icon-button {min-width:32px}.stats-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid {grid-template-columns:1fr}.hero-card {grid-template-columns:1.5fr 1fr}.hero-art img {width:80%}.floating-badge {display:none}.top-actions>span:not(.top-avatar) {display:none}.page-heading {align-items:flex-start; flex-wrap:wrap}.section-heading {flex-wrap:wrap}.design-options {grid-template-columns:1fr}.design-option {display:grid; grid-template-columns:50px 1fr; text-align:left; padding:18px}.design-option>span {grid-row:span 2; margin:0}.design-option small {margin-top:3px}.wizard-tab {font-size:12px; flex-direction:column; gap:5px}.login-grid {gap:5%; padding:0 25px}.login-grid h1 {font-size:34px}.login-card {padding:28px 24px}}
@media(max-width:700px) {.sidebar {width:100%; height:72px; inset:0 0 auto; padding:12px 18px; flex-direction:row; align-items:center; overflow:visible; border-right:0; border-bottom:1px solid var(--border)}.sidebar .brand {font-size:15px}.sidebar .brand img {width:38px; height:38px}.sidebar .brand small {font-size:8px; letter-spacing:1px}.mobile-toggle {display:inline-flex; margin-left:auto; border-color:var(--border); background:var(--surface)}.nav {display:none; position:absolute; top:71px; left:0; right:0; margin:0; padding:18px; max-height:calc(100dvh - 86px); overflow-y:auto; background:var(--sidebar); border-bottom:1px solid var(--border); box-shadow:0 15px 25px #0005; scrollbar-gutter:stable}.nav.open {display:block}.nav-link {font-size:14px; min-height:48px}.sidebar-bottom {display:none}.workspace {margin-left:0; padding-top:72px}.topbar {height:56px; padding:0 18px}.main {padding:25px 18px 0}.hero-copy {padding:24px}.hero-card {grid-template-columns:1fr}.hero-art {display:none}.hero-copy h2 {font-size:29px}.hero-copy p {font-size:14px}.stats-grid {gap:12px}.stat-card {padding:17px 14px}.stat-card>strong {font-size:29px}.stat-card>small {font-size:11px}.stat-top {font-size:12px}.stat-icon {width:30px; height:30px}.stat-icon .icon {width:18px; height:18px}.panel {padding:20px}.form-grid {grid-template-columns:1fr}.template-grid {grid-template-columns:1fr}.template-preview {height:250px}.page-heading {gap:16px}.page-heading p {font-size:13px}.eyebrow {font-size:9px; letter-spacing:1px}.page-heading>.actions {width:100%}.page-heading .button {font-size:12px}.search-form {width:100%; flex-wrap:nowrap}.search-form input {max-width:none; flex:1; width:0}.table-wrap table {min-width:570px}.empty-state {padding:22px 5px}.table-wrap:has(.empty-state) table {min-width:0}.wizard-tabs {padding:6px; gap:2px}.wizard-tab {font-size:10px; padding:8px 3px; min-height:64px}.wizard-tab>span {width:23px; height:23px}.wizard-bottom {gap:8px}.wizard-bottom .button {font-size:12px; padding:10px 12px}.wizard-bottom>span {font-size:11px; text-align:center}.wizard-panel h2 {font-size:23px}.preview-column iframe {height:520px}.preview-column {padding:10px}.block-card header button {width:38px; height:38px}.login-top {padding:24px; justify-content:center}.login-top>.muted {display:none}.login-grid {grid-template-columns:1fr; max-width:560px; margin:22px auto 36px; padding:0 20px; gap:32px}.login-grid>section:first-child {text-align:center}.login-grid h1 {font-size:35px; letter-spacing:-1.2px; margin:16px 0}.login-lead {font-size:14px}.login-perks,.mini-proof {display:none}.login-card {padding:30px 24px}.login-footer {padding:20px; font-size:11px}.page-footer {font-size:10px}.inline-form select {max-width:none}.settings-form .panel {padding:20px}}
@media(max-width:375px) {.main {padding-inline:13px}.sidebar {padding-inline:13px}.stats-grid {gap:9px}.stat-card {padding:14px 11px}.stat-top {font-size:11px}.stat-card>small {font-size:11px}.stat-icon {width:27px; height:27px}.panel {padding:17px}.button {padding-inline:13px;font-size:12px}.login-grid {padding-inline:14px}.login-grid h1 {font-size:30px}.login-card {padding:25px 18px}.wizard-tab {font-size:9px}.wizard-bottom>span {font-size:10px}.dialog-heading h2 {font-size:20px}dialog {padding:20px}.block-card {padding:11px}.review-checks {padding:15px;font-size:13px}.hero-copy {padding:22px}.hero-copy h2 {font-size:27px}.actions {gap:8px}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}*,*::before,*::after {animation:none!important;transition:none!important}}
@media(max-width:700px) {
  .table-wrap .contact-table {min-width:0; display:block}
  .contact-table thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .contact-table tbody {display:block}
  .contact-table tr {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 16px;padding:18px 0;border-bottom:1px solid var(--border)}
  .contact-table td {display:block;border:0;padding:7px 0;min-width:0}
  .contact-table td:first-child,.contact-table td:last-child,.contact-table td[colspan] {grid-column:1/-1}
  .contact-table td::before {content:attr(data-label);display:block;color:var(--muted);font-size:11px;margin-bottom:5px}
  .contact-table td:first-child::before,.contact-table td[colspan]::before {display:none}
  .contact-table td strong {font-size:14px}
}