:root {
  --ink: #182033;
  --muted: #687386;
  --line: #dce1e8;
  --surface: #ffffff;
  --canvas: #eef1f5;
  --brand: #f97316;
  --brand-dark: #ea580c;
  --accent: #ffedd5;
  --blue: #f97316;
  --focus: #f97316;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
body.register-modal-open { overflow: hidden; }
body.auth-gate-open { overflow: hidden; }
body.whatsapp-share-open { overflow: hidden; }
body.client-workspace-theme {
  --brand: #f97316;
  --brand-dark: #ea580c;
  --accent: #ffedd5;
  --blue: #f97316;
  --focus: #f97316;
}
body.client-workspace-theme .button-primary { box-shadow: 0 6px 15px #f9731638; }
body.client-workspace-theme .filter-button.active,
body.client-workspace-theme .size-card.active,
body.client-workspace-theme .pattern-option.active { background: #fff7ed; box-shadow: 0 0 0 3px #ffedd5; }
body.client-workspace-theme .background-option.active { box-shadow: 0 0 0 3px #ffedd5; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }
.product-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.product-modal-backdrop { position: absolute; inset: 0; background: #18203399; backdrop-filter: blur(4px); }
.product-modal-card { position: relative; width: min(100%, 720px); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px #18203340; }
.product-modal-card header, .product-modal-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-modal-card header { margin-bottom: 22px; }
.product-modal-card h2 { margin: 5px 0 0; color: var(--ink); }
.product-modal-card label { display: grid; gap: 6px; margin: 14px 0; color: #566074; font-size: .76rem; font-weight: 800; }
.product-modal-card input, .product-modal-card select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid #cfd6e0; border-radius: 9px; background: #fff; color: var(--ink); }
.product-modal-card input[type="file"] { padding: 8px; }
.whatsapp-progress-modal { position: fixed; inset: 0; z-index: 460; display: grid; place-items: center; padding: 20px; }
.whatsapp-progress-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, #0d3b2ca8, #071912e6 72%); backdrop-filter: blur(9px); }
.whatsapp-progress-card { --share-color: #25d366; position: relative; width: min(100%, 440px); padding: 36px 34px 30px; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 30px; background: linear-gradient(145deg, #fbfffd 0%, #f3fff8 55%, #eafff2 100%); color: #113126; box-shadow: 0 34px 100px #001c1266, inset 0 1px #fff; text-align: center; animation: whatsapp-card-in .42s cubic-bezier(.16, 1, .3, 1); }
.whatsapp-progress-card::before { content: ""; position: absolute; width: 260px; height: 260px; top: -170px; right: -110px; border-radius: 50%; background: #25d3662b; filter: blur(2px); }
.whatsapp-progress-visual { position: relative; width: 148px; height: 148px; margin: 0 auto 16px; display: grid; place-items: center; }
.whatsapp-progress-icon { position: relative; z-index: 3; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 24px; background: linear-gradient(145deg, #38df78, #16b954); color: #fff; box-shadow: 0 16px 32px #25d3664d, inset 0 1px 1px #ffffff80; animation: whatsapp-icon-breathe 1.8s ease-in-out infinite; }
.whatsapp-progress-icon svg { width: 39px; height: 39px; fill: currentColor; }
.whatsapp-progress-check { position: absolute; inset: 0; display: none; place-items: center; color: #fff; font-size: 2.25rem; font-weight: 950; }
.whatsapp-orbit { position: absolute; inset: 8px; border: 1px solid #25d3663d; border-radius: 50%; animation: whatsapp-orbit-spin 4.6s linear infinite; }
.whatsapp-orbit::before, .whatsapp-orbit::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 6px #25d36616; }
.whatsapp-orbit::before { top: 12px; left: 14px; }
.whatsapp-orbit::after { right: -2px; bottom: 38px; width: 6px; height: 6px; opacity: .55; }
.whatsapp-orbit-two { inset: 22px; border-style: dashed; animation-duration: 3.5s; animation-direction: reverse; }
.whatsapp-orbit-two::before { top: auto; bottom: 3px; left: 18px; width: 6px; height: 6px; }
.whatsapp-orbit-two::after { display: none; }
.whatsapp-particle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #9ae6b4; animation: whatsapp-particle-float 2.3s ease-in-out infinite; }
.whatsapp-particle-one { top: 11px; right: 29px; }
.whatsapp-particle-two { bottom: 20px; left: 11px; animation-delay: -.7s; }
.whatsapp-particle-three { right: 4px; bottom: 32px; animation-delay: -1.2s; }
.whatsapp-progress-eyebrow { position: relative; color: #168f49; font-size: .66rem; font-weight: 950; letter-spacing: .14em; }
.whatsapp-progress-card h2 { position: relative; margin: 8px 0 7px; color: #102a21; font-size: clamp(1.55rem, 5vw, 2rem); letter-spacing: -.035em; }
.whatsapp-progress-card > p { min-height: 42px; margin: 0 auto 22px; color: #567065; font-size: .86rem; line-height: 1.5; }
.whatsapp-loading-dots::after { content: ""; display: inline-block; width: 1.25em; text-align: left; animation: whatsapp-loading-dots 1.25s steps(4, end) infinite; }
.whatsapp-progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: #dff4e7; box-shadow: inset 0 1px 2px #0d42211a; }
.whatsapp-progress-track > span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #25d366, #7bf0a6, #25d366); background-size: 210% 100%; box-shadow: 0 0 16px #25d36680; transition: width .4s cubic-bezier(.16, 1, .3, 1); animation: whatsapp-progress-shimmer 1.4s linear infinite; }
.whatsapp-progress-meta { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #779187; font-size: .67rem; }
.whatsapp-progress-meta strong { color: #28734c; font-weight: 850; }
.whatsapp-progress-action { width: 100%; min-height: 50px; margin-top: 22px; border: 0; border-radius: 15px; background: linear-gradient(135deg, #25d366, #18ad51); color: #fff; font-weight: 900; box-shadow: 0 12px 26px #25d36642; }
.whatsapp-progress-action:hover { transform: translateY(-1px); box-shadow: 0 15px 30px #25d36655; }
.whatsapp-progress-close { margin: 14px auto 0; padding: 4px 10px; border: 0; background: transparent; color: #70867c; font-size: .75rem; font-weight: 750; }
.whatsapp-progress-card[data-state="ready"] .whatsapp-progress-icon { animation: whatsapp-ready-pop .45s cubic-bezier(.16, 1, .3, 1); }
.whatsapp-progress-card[data-state="sharing"] .whatsapp-progress-icon { animation: whatsapp-icon-breathe .75s ease-in-out infinite; }
.whatsapp-progress-card[data-state="success"] .whatsapp-progress-icon { animation: whatsapp-ready-pop .45s cubic-bezier(.16, 1, .3, 1); }
.whatsapp-progress-card[data-state="success"] .whatsapp-progress-icon svg { display: none; }
.whatsapp-progress-card[data-state="success"] .whatsapp-progress-check { display: grid; }
.whatsapp-progress-card[data-state="error"] { --share-color: #f97316; background: linear-gradient(145deg, #fff, #fff7ed); }
.whatsapp-progress-card[data-state="error"] .whatsapp-progress-icon { background: linear-gradient(145deg, #fb923c, #ea580c); box-shadow: 0 16px 32px #f9731640; animation: none; }
.whatsapp-progress-card[data-state="error"] .whatsapp-progress-track > span { background: #f97316; }
@keyframes whatsapp-card-in { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes whatsapp-icon-breathe { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.07) rotate(2deg); } }
@keyframes whatsapp-orbit-spin { to { transform: rotate(360deg); } }
@keyframes whatsapp-particle-float { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-9px); opacity: 1; } }
@keyframes whatsapp-loading-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
@keyframes whatsapp-progress-shimmer { to { background-position: -210% 0; } }
@keyframes whatsapp-ready-pop { 0% { transform: scale(.75) rotate(-7deg); } 65% { transform: scale(1.1) rotate(3deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .whatsapp-progress-card, .whatsapp-progress-icon, .whatsapp-orbit, .whatsapp-particle, .whatsapp-progress-track > span, .whatsapp-loading-dots::after { animation: none !important; }
}
.register-card { width: min(100%, 640px); padding: 0; overflow: hidden; }
.auth-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; overflow: auto; }
.auth-modal-backdrop { position: absolute; inset: 0; background: #101828b8; backdrop-filter: blur(6px); }
.auth-modal-card { position: relative; z-index: 1; max-height: calc(100vh - 40px); border: 1px solid #dfe3e9; border-radius: 22px; background: #fff; box-shadow: 0 30px 90px #10182855; }
.register-card > header { margin: 0; padding: 24px 28px 18px; }
.register-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.register-card > header h2 { margin: 5px 0 0; font-size: 1.45rem; }
.register-card .auth-fields { display: none; }
.register-card label { display: grid; gap: 6px; margin: 14px 0; color: #566074; font-size: .78rem; font-weight: 800; }
.register-card input:not([type="file"]), .register-card select { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #cfd6e0; border-radius: 9px; background: #fff; color: var(--ink); }
.register-card input[type="file"] { width: 100%; padding: 8px; border: 1px dashed #cfd6e0; border-radius: 9px; background: #fff; color: var(--ink); }
.register-progress { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 15px 28px; list-style: none; border-block: 1px solid #edf0f3; background: #fafbfc; }
.register-progress li { position: relative; display: grid; justify-items: center; gap: 5px; color: #98a2b3; font-size: .72rem; font-weight: 800; }
.register-progress li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: #dfe3e9; }
.register-progress li.complete:not(:last-child)::after { background: var(--brand); }
.register-progress li span { z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e5e7eb; color: #667085; }
.register-progress li.active, .register-progress li.complete { color: var(--ink); }
.register-progress li.active span, .register-progress li.complete span { background: var(--brand); color: #fff; }
.register-step { min-height: 330px; padding: 25px 28px 10px; }
.register-heading span:not(.finish-badge) { color: var(--brand); font-size: .72rem; font-weight: 900; }
.register-heading h3 { margin: 5px 0 4px; font-size: 1.35rem; }
.register-heading p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.register-card label > small { color: #98a2b3; font-weight: 650; }
.register-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: #98a2b3; font-size: .72rem; font-weight: 700; }
.register-divider::before, .register-divider::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.market-identifier { margin: -5px 0 12px; padding: 10px 12px; border-radius: 9px; background: #f6f7f9; color: #687386; font-size: .78rem; }
.market-identifier strong { color: var(--ink); }
.finish-heading { text-align: center; }
.finish-badge { width: 48px; height: 48px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 1.5rem; font-weight: 900; }
.logo-challenge { grid-template-columns: 42px 1fr; align-items: center; padding: 16px; border: 2px dashed #f4bf13; border-radius: 13px; background: #fffbea; }
.logo-challenge-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: #684d00; font-size: 1.15rem; }
.logo-challenge strong, .logo-challenge small { display: block; }
.logo-challenge input { grid-column: 1 / -1; background: #fff; }
.finish-note { text-align: center; color: var(--muted); font-size: .78rem; }
.register-card > .inline-status { min-height: 20px; margin: 0; padding: 0 28px; }
.register-card > footer { padding: 18px 28px 24px; border-top: 1px solid #edf0f3; }
.register-card > footer span { margin-left: auto; color: #98a2b3; font-size: .74rem; font-weight: 800; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
.plan-card.current { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.plan-card > strong { display: block; margin-top: 12px; color: var(--ink); font-size: 1.6rem; }
.plan-card > strong small { color: var(--muted); font-size: .72rem; font-weight: 700; }
.plan-card p { min-height: 48px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.plan-card .button { width: 100%; }

.subscription-modal { padding: 14px; }
.subscription-card { width: min(100%, 1020px); max-height: 92vh; padding: 32px; border: 1px solid #f1f5f9; border-radius: 24px; overflow-y: auto; font-family: "Plus Jakarta Sans", Inter, sans-serif; }
.subscription-card.modal-enter { animation: subscription-enter .24s cubic-bezier(.16, 1, .3, 1); }
.subscription-card.modal-exit { animation: subscription-exit .18s cubic-bezier(.7, 0, .84, 0) forwards; }
.subscription-close { position: absolute; z-index: 2; top: 20px; right: 20px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.subscription-close:hover { background: #e2e8f0; color: #1e293b; }
.subscription-close svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.product-modal-card .subscription-header { margin: 0 0 28px; padding: 0 50px 20px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid #f1f5f9; }
.subscription-header-copy { min-width: 0; }
.subscription-header h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -.035em; }
.subscription-header p { max-width: 610px; margin: 6px 0 0; color: #64748b; font-size: .84rem; line-height: 1.45; }
.subscription-kickers { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.subscription-kickers > span { padding: 4px 10px; border-radius: 999px; background: #ffedd5; color: #c2410c; font-size: .62rem; font-weight: 850; letter-spacing: .08em; }
.subscription-kickers .subscription-success { border: 1px solid #bbf7d0; background: #ecfdf5; color: #059669; letter-spacing: 0; }
.subscription-pioneer { flex: 0 1 410px; align-self: flex-start; padding: 11px 16px; display: flex; align-items: center; gap: 10px; border: 2px solid #fdba7470; border-radius: 16px; background: linear-gradient(90deg, #fff7ed, #fffbeb, #fff7ed); color: #7c2d12; box-shadow: 0 2px 8px #9a34120a; }
.subscription-pioneer > span:last-child { display: grid; gap: 2px; }
.subscription-pioneer b { color: #ea580c; font-size: .62rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.subscription-pioneer strong { color: #0f172a; font-size: .76rem; font-weight: 900; line-height: 1.3; }
.subscription-pioneer-dot { position: relative; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: #f97316; }
.subscription-pioneer-dot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fb923c; animation: subscription-pulse 1.5s ease-out infinite; }
.subscription-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 20px; }
.subscription-plan { position: relative; min-width: 0; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border: 1px solid #e2e8f0; border-radius: 24px; background: #f8fafc80; }
.subscription-plan-featured { z-index: 1; border: 2px solid #f97316; background: #fff; box-shadow: 0 24px 52px #f9731633, 0 0 0 4px #f9731626; transform: scale(1.04); }
.subscription-plan-unavailable { border: 2px dashed #cbd5e1; background: #f8fafccc; }
.subscription-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.subscription-plan-heading h3 { margin: 0; color: #475569; font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.subscription-plan-heading > span { padding: 3px 8px; border-radius: 999px; background: #e2e8f0; color: #64748b; font-size: .6rem; font-weight: 800; text-align: center; }
.subscription-basic-heading h3 { color: #ea580c; }
.subscription-basic-heading > span { border: 1px solid #a7f3d0; background: #d1fae5; color: #047857; }
.subscription-price { min-height: 44px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.subscription-price strong { color: #0f172a; font-size: 1.9rem; font-weight: 900; letter-spacing: -.04em; }
.subscription-price small { color: #64748b; font-size: .72rem; font-weight: 700; }
.subscription-basic-price del { flex-basis: 100%; margin-bottom: -5px; color: #94a3b8; font-size: .72rem; font-weight: 750; }
.subscription-basic-price strong { font-size: 2.25rem; }
.subscription-pioneer-banner { margin: 0 0 12px; padding: 9px 10px; border: 1px solid #fcd34d99; border-radius: 11px; background: linear-gradient(90deg, #fef3c7, #ffedd5, #fef3c7); color: #78350f; font-size: .67rem; font-weight: 900; line-height: 1.35; text-align: center; }
.subscription-plan > div > p { margin: 2px 0 18px; color: #64748b; font-size: .75rem; line-height: 1.45; }
.subscription-offer { margin: 8px 0 16px; padding: 8px 10px; border: 1px solid #a7f3d0; border-radius: 9px; background: #ecfdf5; color: #065f46; font-size: .7rem; font-weight: 750; line-height: 1.4; }
.subscription-features { padding-top: 15px; display: grid; gap: 10px; border-top: 1px solid #e2e8f0; }
.subscription-features h4 { margin: 0 0 2px; color: #64748b; font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.subscription-features p { min-height: 0; margin: 0; display: flex; align-items: flex-start; gap: 8px; color: #334155; font-size: .72rem; line-height: 1.4; }
.subscription-featured-features { border-color: #ffedd5; }
.subscription-featured-features h4 { color: #9a3412; }
.feature-check { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #ffedd5; color: #ea580c; font-size: .65rem; font-weight: 950; }
.subscription-plan-free .feature-check { background: transparent; color: #059669; font-size: .9rem; }
.subscription-features .feature-disabled { color: #94a3b8; text-decoration: line-through; }
.feature-disabled > span { flex: 0 0 16px; color: #cbd5e1; font-size: 1rem; line-height: 14px; }
.feature-coming { flex: 0 0 16px; color: #d97706; }
.subscription-popular, .subscription-coming { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; white-space: nowrap; color: #fff; font-size: .62rem; font-weight: 950; letter-spacing: .07em; }
.subscription-popular { background: linear-gradient(90deg, #f97316, #f59e0b, #ea580c); box-shadow: 0 4px 12px #ea580c44; background-size: 200% auto; animation: subscription-shine 3s linear infinite; }
.subscription-coming { background: #1e293b; color: #fcd34d; }
.subscription-development { margin: 14px 0; padding: 12px; display: grid; gap: 5px; border: 1px solid #fde68a; border-radius: 14px; background: #fffbeb; color: #78350f; font-size: .7rem; line-height: 1.4; }
.subscription-development strong { color: #ea580c; }
.subscription-button { width: 100%; min-height: 44px; padding: 11px 14px; border-radius: 14px; font-size: .72rem; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.subscription-button-primary { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: linear-gradient(90deg, #f97316, #ea580c); color: #fff; box-shadow: 0 8px 18px #f9731640; }
.subscription-button-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px #f9731655; }
.subscription-button-primary:disabled { cursor: wait; opacity: .7; }
.subscription-button-current { border: 2px solid #e2e8f0; background: #f1f5f9; color: #64748b; cursor: not-allowed; }
.subscription-button-note { display: block; margin-top: 8px; color: #64748b; font-size: .61rem; font-weight: 650; text-align: center; }
.subscription-status { min-height: 20px; margin: 16px 0 0; text-align: center; }
.product-modal-card .subscription-footer { margin-top: 8px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid #f1f5f9; color: #64748b; font-size: .72rem; }
.subscription-footer b { color: #334155; }
.subscription-footer i { padding-inline: 7px; font-style: normal; }
@keyframes subscription-enter { from { opacity: 0; transform: scale(.96) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes subscription-exit { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.96); } }
@keyframes subscription-shine { to { background-position: 200% center; } }
@keyframes subscription-pulse { 0% { opacity: .75; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(2); } }

.login-page { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 32px 20px; }
.login-page.auth-gate { position: fixed; inset: 0; z-index: 300; min-height: 100vh; overflow: auto; background: #10182866; backdrop-filter: blur(5px); }
.login-card { width: min(100%, 430px); padding: 38px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 24px 60px #27324a18; }
.login-card h1 { margin: 10px 0 8px; font-size: 2rem; }
.login-card p { color: var(--muted); line-height: 1.5; }
.login-card label, .tenant-form label { display: grid; gap: 6px; margin: 16px 0; color: #566074; font-size: .78rem; font-weight: 800; }
.login-card input, .tenant-form input:not([type="color"]) { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #cfd6e0; border-radius: 9px; background: #fff; color: var(--ink); }
.admin-card { grid-column: 1 / -1; width: min(100%, 1180px); margin: 0 auto 24px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.admin-card h2 { margin: 4px 0 0; }
.muted-copy { color: var(--muted); font-size: .88rem; }
#tenantList { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.tenant-form { padding: 16px; border: 1px solid #e3e7ed; border-radius: 12px; background: #fafbfc; }
.tenant-form > strong, .tenant-form > small { display: block; }
.tenant-form > small { margin-top: 3px; color: var(--muted); }
.tenant-form input[type="color"] { width: 100%; height: 40px; padding: 3px; border: 1px solid #cfd6e0; border-radius: 9px; background: #fff; }
.tenant-form input[type="file"] { width: 100%; padding: 8px; border: 1px dashed #cfd6e0; border-radius: 9px; background: #fff; }
.tenant-form .button { width: 100%; }
.tenant-actions { display: grid; gap: 7px; }
.tenant-actions .button { width: 100%; }
.tenant-delete { margin: 0; }

@media (max-width: 760px) {
  .register-card > header, .register-step, .register-card > footer { padding-left: 20px; padding-right: 20px; }
  .register-progress { padding-inline: 20px; }
  .register-progress small { display: none; }
  .register-step { min-height: 350px; }
  .register-card .control-grid { grid-template-columns: 1fr; gap: 0; }
  .register-card > footer { flex-wrap: wrap; }
  .plans-grid { grid-template-columns: 1fr; }
  .subscription-card { padding: 24px 18px; border-radius: 20px; }
  .product-modal-card .subscription-header { padding-right: 36px; flex-direction: column; align-items: stretch; }
  .subscription-pioneer { flex-basis: auto; width: 100%; }
  .subscription-grid { grid-template-columns: 1fr; gap: 26px; }
  .subscription-plan-featured { transform: none; }
  .admin-page { display: block; }
  .admin-sidebar { width: 100%; min-height: auto; }
  .admin-nav { display: flex; gap: 6px; padding: 12px 14px; overflow-x: auto; }
  .admin-nav > span { display: none; }
  .admin-nav a { white-space: nowrap; }
  .admin-logout { margin: 0 14px 14px; }
  .admin-topbar { padding: 14px 18px; }
  .admin-content { padding: 20px 18px; }
  .admin-stats { grid-template-columns: 1fr; gap: 10px; }
}

.topbar { height: 68px; padding: 0 28px; display: flex; align-items: center; gap: 22px; position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 1.05rem; font-weight: 850; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 950; transform: rotate(-2deg); }
.brand-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.mode-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: #f2f4f7; color: #4b5565; font-size: .78rem; font-weight: 700; }
.mode-pill span { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px #dcfce7; }
.topbar-action { margin-left: auto; }
.topbar-plan { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.topbar-plan svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.button-secondary.topbar-plan-basic { border-color: #fb923c; background: linear-gradient(135deg, #fb923c 0%, #f97316 48%, #ea580c 100%); color: #fff; box-shadow: 0 7px 18px #f9731645, inset 0 1px 0 #ffffff4d; }
.button-secondary.topbar-plan-basic:hover { border-color: #ea580c; background: linear-gradient(135deg, #f97316 0%, #ea580c 58%, #c2410c 100%); color: #fff; box-shadow: 0 9px 22px #ea580c55, inset 0 1px 0 #ffffff38; }
.topbar-plan-basic svg { color: #fef3c7; filter: drop-shadow(0 1px 1px #9a341255); }

.button { min-height: 42px; padding: 10px 16px; border: 1px solid transparent; border-radius: 10px; font-weight: 800; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 15px #f9731638; }
.button-primary:hover { background: var(--brand-dark); }
.button-secondary { background: #fff; color: #344054; border-color: #d0d5dd; }
.button-secondary:hover { background: #f8fafc; }
.button-large { min-height: 50px; padding: 13px 22px; }
.full-width { width: 100%; }
.text-button { padding: 4px; border: 0; background: transparent; color: var(--blue); font-weight: 800; }
.danger-text { margin: 15px auto 0; display: block; color: #b42318; font-size: .8rem; }
.icon-button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #f1f3f6; color: #475467; font-size: 1.5rem; }
.eyebrow { color: var(--brand); font-size: .68rem; font-weight: 900; letter-spacing: .13em; }

.start-page { min-height: calc(100vh - 68px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 470px); align-items: center; gap: clamp(40px, 8vw, 120px); max-width: 1180px; margin: auto; padding: 64px 40px; }
.client-start-page { display: grid; grid-template-columns: 1fr; max-width: none; padding: 48px 24px; background: #f8fafc; }
.client-home { width: min(760px, 100%); margin: auto; text-align: center; }
.client-home h1 { margin: 0 0 10px; color: #0f172a; font-size: clamp(2rem, 4vw, 2.65rem); letter-spacing: -.04em; }
.client-home > p { max-width: 560px; margin: 0 auto 42px; color: #64748b; font-size: 1rem; font-weight: 600; }
.client-home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.client-home-actions:has(.client-action-card[hidden]) { grid-template-columns: minmax(0, 360px); justify-content: center; }
.client-action-card { min-height: 290px; padding: 30px; display: flex; flex-direction: column; align-items: center; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; color: #0f172a; box-shadow: 0 4px 20px #0f172a08; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.client-action-card:hover { transform: translateY(-2px); border-color: #f97316; box-shadow: 0 18px 38px #0f172a12; }
.client-action-icon { width: 56px; height: 56px; margin-bottom: 20px; display: grid; place-items: center; border-radius: 50%; background: #f97316; color: #fff; font-size: 1.8rem; font-weight: 700; }
.client-action-draft { border: 1px solid #e2e8f0; background: #f1f5f9; color: #64748b; }
.client-action-card strong { margin-bottom: 9px; font-size: 1.08rem; }
.client-action-card small { flex: 1; color: #64748b; font-size: .86rem; font-weight: 600; }
.client-action-card b { width: 100%; margin-top: 24px; padding: 12px 16px; border-radius: 11px; background: #f1f5f9; font-size: .85rem; }
.client-action-primary:hover b { background: #f97316; color: #fff; }
.admin-page { min-height: calc(100vh - 68px); display: flex; background: #f1f5f9; color: #334155; }
.admin-sidebar { width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; background: #0f172a; color: #94a3b8; }
.admin-brand { height: 70px; display: flex; align-items: center; gap: 11px; padding: 0 22px; border-bottom: 1px solid #ffffff1a; color: #fff; letter-spacing: .02em; }
.admin-brand-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; font-weight: 900; }
.admin-nav { padding: 28px 14px; flex: 1; }
.admin-nav > span { display: block; padding: 0 11px 11px; color: #64748b; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.admin-nav a { display: block; margin-bottom: 4px; padding: 11px 12px; border-left: 3px solid transparent; border-radius: 7px; color: #94a3b8; text-decoration: none; font-size: .84rem; font-weight: 700; }
.admin-nav a:hover, .admin-nav a.active { border-left-color: #3b82f6; background: #3b82f626; color: #60a5fa; }
.admin-logout { margin: 20px 14px; padding: 11px 12px; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; text-align: left; font-weight: 700; }
.admin-logout:hover { background: #ffffff0d; color: #fff; }
.admin-workspace { min-width: 0; flex: 1; }
.admin-topbar { min-height: 70px; display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.admin-topbar h1 { margin: 4px 0 0; color: #1e293b; font-size: 1.25rem; }
.admin-user { display: flex; align-items: center; gap: 10px; }
.admin-user strong, .admin-user small { display: block; }
.admin-user strong { color: #1e293b; font-size: .82rem; }
.admin-user small { margin-top: 3px; color: #64748b; font-size: .7rem; }
.admin-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #3b82f6; color: #fff; font-weight: 900; }
.admin-content { max-width: 1400px; margin: 0 auto; padding: 28px 32px; }
.admin-page-heading { margin-bottom: 18px; }
.admin-page-heading p { margin: 0; color: #64748b; }
.admin-overview-card { padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.admin-overview-card h2 { margin: 7px 0; color: #1e293b; font-size: 1.15rem; }
.admin-overview-card p { margin: 0; color: #64748b; line-height: 1.6; }
.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.admin-stats > div { padding: 18px 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #00000005; }
.admin-stats small, .admin-stats strong { display: block; }
.admin-stats small { color: #64748b; font-size: .78rem; font-weight: 700; }
.admin-stats strong { margin-top: 8px; color: #1e293b; font-size: 1.8rem; }
.admin-page .admin-card { max-width: none; margin: 0; border-color: #e2e8f0; border-radius: 12px; }
.tenant-table-wrap { overflow-x: auto; }
.tenant-table { width: 100%; border-collapse: collapse; }
.tenant-table th { padding: 12px 14px; border-bottom: 1px solid #e2e8f0; color: #64748b; font-size: .68rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.tenant-table td { padding: 16px 14px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.tenant-table tr:last-child td { border-bottom: 0; }
.tenant-table td strong, .tenant-table td small { display: block; }
.tenant-table td strong { color: #1e293b; font-size: .86rem; }
.tenant-table td small { margin-top: 4px; color: #94a3b8; font-size: .72rem; }
.tenant-table code { padding: 4px 7px; border-radius: 5px; background: #f1f5f9; color: #475569; font-size: .76rem; }
.status-chip { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.status-chip.active { background: #ecfdf5; color: #047857; }
.status-chip.archived { background: #fff7ed; color: #c2410c; }
.color-swatch { display: inline-block; width: 24px; height: 24px; margin-right: 5px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #cbd5e1; vertical-align: middle; }
.tenant-table .button { min-height: 34px; padding: 7px 11px; font-size: .72rem; }
.admin-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.admin-modal-backdrop { position: absolute; inset: 0; background: #0f172a99; backdrop-filter: blur(3px); }
.admin-modal-card { position: relative; width: min(100%, 560px); max-height: calc(100vh - 40px); overflow: auto; padding: 26px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px #0f172a40; }
.admin-modal-card header, .admin-modal-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-modal-card header { margin-bottom: 22px; }
.admin-modal-card h2 { margin: 5px 0 0; color: #1e293b; font-size: 1.25rem; }
.admin-modal-card label { display: grid; gap: 6px; margin: 15px 0; color: #475569; font-size: .76rem; font-weight: 800; }
.admin-modal-card input[type="text"] { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #cbd5e1; border-radius: 8px; }
.admin-modal-card input[type="file"] { padding: 8px; border: 1px dashed #cbd5e1; border-radius: 8px; }
.admin-modal-card input[type="color"] { width: 100%; height: 40px; padding: 3px; border: 1px solid #cbd5e1; border-radius: 8px; }
.admin-modal-card footer { margin-top: 24px; flex-wrap: wrap; justify-content: flex-end; }
.admin-modal-card footer .danger-text { margin: 0 auto 0 0; }
.tenant-modal-status { min-height: 20px; color: #b42318; font-size: .78rem; }
.start-copy h1 { max-width: 650px; margin: 12px 0 16px; font-size: clamp(2.6rem, 5.5vw, 5.4rem); line-height: .98; letter-spacing: -.055em; }
.start-copy p { max-width: 600px; margin: 0; color: var(--muted); font-size: 1.12rem; line-height: 1.65; }
.start-actions { display: flex; gap: 10px; margin-top: 30px; }
.start-demo { aspect-ratio: 4 / 5; padding: clamp(28px, 5vw, 52px); display: flex; flex-direction: column; justify-content: center; border: 8px solid #fff; border-radius: 28px; background: #fff; box-shadow: 0 28px 70px #27324a2a; transform: rotate(2.2deg); overflow: hidden; }
.demo-ribbon { width: 100%; margin-top: 22px; padding: 10px 14px; background: var(--accent); color: #172033; font-size: .82rem; font-weight: 950; letter-spacing: .12em; text-align: center; }
.start-demo > strong { font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.02; letter-spacing: -.045em; }
.demo-price { display: flex; align-items: flex-start; margin-top: 24px; color: var(--brand); line-height: .8; }
.demo-price small { margin: 12px 8px 0 0; font-size: 1.1rem; font-weight: 900; }
.demo-price b { font-size: clamp(5rem, 10vw, 8rem); letter-spacing: -.09em; }
.demo-price sup { margin-top: 8px; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 950; }

.mobile-editor-action { display: none; }
.editor-page { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 390px minmax(0, 1fr); }
.editor-sidebar { height: calc(100vh - 68px); overflow: auto; background: #fff; border-right: 1px solid var(--line); }
.sidebar-heading, .panel-section { padding: 22px 24px; border-bottom: 1px solid #eaedf1; }
.sidebar-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sidebar-heading h1 { margin: 4px 0 0; font-size: 1.35rem; }
.save-state { padding: 6px 8px; border-radius: 999px; background: #ecfdf3; color: #067647; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.section-title h2 { margin: 0; font-size: .98rem; }
.offer-list { display: grid; gap: 8px; max-height: 330px; margin-bottom: 12px; overflow: auto; }
.editor-offer { width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px; border: 1px solid #e3e7ed; border-radius: 10px; background: #fafbfc; color: var(--ink); text-align: left; }
.editor-offer:hover { border-color: #b8c4d6; }
.editor-offer.active { border-color: var(--focus); background: #f3f7ff; box-shadow: 0 0 0 3px #dbeafe; }
.editor-offer-number { color: #98a2b3; font-size: .72rem; font-weight: 800; }
.editor-offer-copy { min-width: 0; }
.editor-offer-copy strong, .editor-offer-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-offer-copy strong { font-size: .78rem; }
.editor-offer-copy small { margin-top: 2px; color: var(--brand); font-weight: 850; }
.offer-actions { display: flex; gap: 3px; }
.offer-actions button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: #eef1f5; color: #475467; }
.compact-controls label { color: #566074; font-size: .74rem; font-weight: 750; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
select, input[type="number"], textarea { width: 100%; border: 1px solid #cfd6e0; border-radius: 9px; background: #fff; color: var(--ink); }
select, input[type="number"] { height: 40px; margin-top: 6px; padding: 0 10px; }
textarea { padding: 14px; resize: vertical; line-height: 1.55; }
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.theme-option { min-width: 0; padding: 7px; border: 2px solid #e3e7ed; border-radius: 10px; background: #fff; text-align: left; }
.theme-option.active { border-color: var(--focus); box-shadow: 0 0 0 3px #dbeafe; }
.theme-swatch { height: 43px; display: grid; place-items: center; border-radius: 7px; font-size: .7rem; font-weight: 950; }
.theme-option small { display: block; margin-top: 6px; color: #667085; font-size: .65rem; text-align: center; }
.color-controls input[type="color"] { display: block; width: 100%; height: 38px; margin-top: 6px; padding: 3px; border: 1px solid #cfd6e0; border-radius: 8px; background: #fff; }
.range-label { display: block; margin-top: 13px; color: #566074; font-size: .74rem; font-weight: 750; }
.range-label output { float: right; color: var(--brand); }
input[type="range"] { width: 100%; margin-top: 9px; accent-color: var(--brand); }
.export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; }
.export-grid .button { padding-inline: 6px; font-size: .76rem; }

.preview-workspace { min-width: 0; min-height: calc(100vh - 68px); display: flex; flex-direction: column; background: #e9edf2; }
.preview-toolbar { min-height: 64px; padding: 11px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border-bottom: 1px solid var(--line); }
.preview-toolbar strong, .preview-toolbar small { display: block; }
.preview-toolbar strong { font-size: .84rem; }
.preview-toolbar small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.zoom-controls { display: flex; align-items: center; gap: 8px; }
.zoom-controls button, .page-navigation button { width: 34px; height: 34px; padding: 0; border: 1px solid #d5dae2; border-radius: 9px; background: #fff; color: #344054; font-weight: 900; }
.zoom-controls span { min-width: 56px; color: #667085; font-size: .72rem; text-align: center; }
.canvas-stage { position: relative; flex: 1; min-height: 400px; padding: 28px; display: grid; place-items: center; overflow: auto; background-color: #e9edf2; background-image: radial-gradient(#cfd5df 1px, transparent 1px); background-size: 20px 20px; }
canvas { display: block; max-width: 100%; max-height: calc(100vh - 210px); background: #fff; box-shadow: 0 18px 45px #23304a25; transform-origin: center; transition: transform .18s ease; }
.page-navigation { min-height: 58px; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border-top: 1px solid var(--line); }
.page-navigation > div { display: flex; gap: 5px; }
.page-navigation .page-button.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.modal { position: fixed; inset: 0; z-index: 100; padding: 20px; display: grid; place-items: center; }
.modal-backdrop { position: absolute; inset: 0; background: #101828b5; backdrop-filter: blur(4px); }
.guided-dialog { position: relative; width: min(980px, 100%); height: min(790px, calc(100vh - 40px)); display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 30px 90px #10182855; }
.guided-header { padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f3; }
.guided-header h2 { margin: 4px 0 0; font-size: 1.45rem; }
.progress { margin: 0; padding: 17px 30px; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; background: #fafbfc; border-bottom: 1px solid #edf0f3; }
.progress li { position: relative; display: grid; justify-items: center; gap: 5px; color: #98a2b3; font-size: .68rem; font-weight: 750; }
.progress li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: #dfe3e9; }
.progress li.complete:not(:last-child)::after { background: var(--brand); }
.progress li span { width: 28px; height: 28px; z-index: 1; display: grid; place-items: center; border-radius: 50%; background: #e5e7eb; color: #667085; }
.progress li.active, .progress li.complete { color: var(--ink); }
.progress li.active span, .progress li.complete span { background: var(--brand); color: #fff; }
.guided-body { overflow: auto; padding: 28px 32px; }
.guided-step { display: none; }
.guided-step.active { display: block; }
.step-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.step-number { color: #d0d5dd; font-size: 2rem; font-weight: 950; letter-spacing: -.06em; line-height: 1; }
.step-heading h3 { margin: 0 0 5px; font-size: 1.3rem; }
.step-heading p { margin: 0; color: var(--muted); font-size: .86rem; }
.step-heading code { padding: 2px 5px; border-radius: 4px; background: #f2f4f7; color: #344054; }
#guidedText { min-height: 280px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.import-row { margin-top: 12px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .74rem; }
.inline-status { min-height: 20px; margin: 11px 0 0; color: var(--muted); font-size: .78rem; }
.inline-status.error { color: #b42318; }
.review-list { display: grid; gap: 9px; }
.review-row { display: grid; grid-template-columns: 32px minmax(0, 1.8fr) minmax(130px, .8fr) 36px; align-items: start; gap: 10px; padding: 10px; border: 1px solid #e4e7ec; border-radius: 11px; background: #fafbfc; }
.review-row.invalid { border-color: #fda29b; background: #fff6f5; }
.review-index { padding-top: 11px; color: #98a2b3; font-size: .75rem; font-weight: 850; text-align: center; }
.review-row label { color: #667085; font-size: .68rem; font-weight: 750; }
.review-row input { width: 100%; height: 39px; margin-top: 5px; padding: 0 10px; border: 1px solid #cfd6e0; border-radius: 8px; }
.review-delete { width: 34px; height: 34px; margin-top: 17px; padding: 0; border: 0; border-radius: 8px; background: #fee4e2; color: #b42318; font-size: 1.2rem; }
.review-error { grid-column: 2 / 4; color: #b42318; font-size: .7rem; }
.size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.size-card { min-height: 105px; padding: 13px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; border: 2px solid #e4e7ec; border-radius: 12px; background: #fff; color: var(--ink); text-align: left; }
.size-card::before { content: ""; width: 28px; height: 38px; margin-bottom: auto; border: 2px solid var(--brand); border-radius: 3px; }
.size-card.landscape::before { width: 48px; height: 29px; }
.size-card.square::before { width: 34px; height: 34px; }
.size-card.active { border-color: var(--focus); background: #f5f9ff; box-shadow: 0 0 0 3px #dbeafe; }
.size-card strong { font-size: .78rem; }
.size-card small { margin-top: 3px; color: var(--muted); font-size: .65rem; }
.custom-size { margin-top: 16px; padding: 14px; display: flex; align-items: flex-end; gap: 10px; border-radius: 12px; background: #f5f7fa; }
.custom-size label { flex: 1; color: #566074; font-size: .72rem; font-weight: 750; }
.custom-size span { padding-bottom: 10px; color: #98a2b3; }
.appearance-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.appearance-layout h4 { margin: 0 0 12px; font-size: .86rem; }
.theme-options.large .theme-swatch { height: 78px; font-size: .9rem; }
.summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.summary-cards > div { padding: 16px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fafbfc; }
.summary-cards span, .summary-cards strong { display: block; }
.summary-cards span { color: #667085; font-size: .7rem; }
.summary-cards strong { margin-top: 6px; font-size: 1rem; }
.final-review { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.final-review div { padding: 10px 12px; border-radius: 9px; background: #f2f4f7; font-size: .76rem; }
.final-review strong { color: var(--brand); }
.guided-footer { padding: 16px 26px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; border-top: 1px solid #edf0f3; }
.guided-footer #guidedBackButton { justify-self: start; }
.guided-footer #guidedNextButton { justify-self: end; }
.guided-footer span { color: #667085; font-size: .73rem; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 200; max-width: 360px; padding: 13px 16px; border-radius: 11px; background: #101828; color: #fff; box-shadow: 0 12px 35px #10182840; font-size: .82rem; }

.native-prompt-modal { z-index: 180; }
.name-dialog { position: relative; width: min(480px, 100%); overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 30px 90px #10182865; }
.name-dialog-header { padding: 21px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #edf0f3; }
.name-dialog-header h2 { margin: 4px 0 0; font-size: 1.22rem; }
.name-dialog-body { padding: 24px; }
.name-dialog-body label { display: block; margin-bottom: 8px; color: #344054; font-size: .82rem; font-weight: 850; }
.name-dialog-body input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid #cfd6e0; border-radius: 10px; color: var(--ink); font-size: .95rem; }
.name-dialog-body p { margin: 10px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.name-dialog-body .inline-status { display: block; }
.name-dialog-footer { padding: 15px 24px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #edf0f3; background: #fafbfc; }

@media (max-width: 980px) {
  .editor-page { grid-template-columns: 330px minmax(0, 1fr); }
  .size-grid { grid-template-columns: repeat(3, 1fr); }
  .appearance-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .topbar { padding: 0 14px; }
  .mode-pill { display: none; }
  .start-page { grid-template-columns: 1fr; padding: 40px 20px; }
  .client-start-page { min-height: calc(100dvh - 68px); align-items: start; padding: 20px 16px 24px; }
  .client-home { margin: 0 auto; }
  .client-home h1 { margin-bottom: 6px; font-size: 1.55rem; }
  .client-home > p { margin-bottom: 20px; font-size: .86rem; line-height: 1.45; }
  .client-home-actions { grid-template-columns: 1fr; }
  .client-action-card { min-height: 0; padding: 20px; border-radius: 14px; }
  .client-action-icon { width: 48px; height: 48px; margin-bottom: 12px; font-size: 1.5rem; }
  .client-action-card strong { margin-bottom: 6px; }
  .client-action-card small { flex: none; line-height: 1.4; }
  .client-action-card b { min-height: 40px; margin-top: 16px; padding: 10px 14px; }
  .start-demo { max-width: 390px; justify-self: center; }
  .editor-page { display: block; }
  .editor-sidebar { height: auto; max-height: none; }
  .preview-workspace { min-height: 75vh; }
  .canvas-stage { padding: 16px; }
  canvas { max-height: 70vh; }
  .progress small { display: none; }
  .guided-body { padding: 22px 18px; }
  .size-grid { grid-template-columns: repeat(2, 1fr); }
  .review-row { grid-template-columns: 28px 1fr 36px; }
  .review-row label:nth-of-type(2) { grid-column: 2; }
  .review-delete { grid-column: 3; grid-row: 1; }
  .review-error { grid-column: 2 / 4; }
  .summary-cards { grid-template-columns: repeat(2, 1fr); }
  .final-review { grid-template-columns: 1fr; }
}

/* Fluxo de fundos, padrões antigos e revisão de uma placa por vez */
.editor-fields > label, .editor-fields .control-grid label { display: block; margin-bottom: 12px; color: #566074; font-size: .74rem; font-weight: 750; }
.editor-fields input { width: 100%; height: 40px; margin-top: 6px; padding: 0 10px; border: 1px solid #cfd6e0; border-radius: 9px; }
.editor-fields .section-title span { color: #98a2b3; font-size: .7rem; font-weight: 800; }
.order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.order-actions .danger-text { grid-column: 1 / -1; margin-top: 3px; }
.selected-visual-summary { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 11px; margin-bottom: 12px; }
.selected-background-thumb { height: 58px; overflow: hidden; border: 1px solid #d8dde6; border-radius: 9px; background: #f2f4f7; }
.selected-background-thumb img { width: 100%; height: 100%; object-fit: contain; }
.selected-visual-summary strong, .selected-visual-summary small { display: block; }
.selected-visual-summary strong { font-size: .8rem; }
.selected-visual-summary small { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.pattern-strip { display: flex; gap: 6px; overflow-x: auto; padding: 3px; }
.pattern-strip .pattern-option.compact { min-width: 72px; display: block; padding: 5px; }
.pattern-strip .pattern-option.compact > span:last-child { display: none; }
.pattern-strip .pattern-swatch { height: 46px; }
canvas#canvas { cursor: pointer; }
.quick-adjust { position: absolute; right: 22px; top: 22px; z-index: 5; width: min(300px, calc(100% - 44px)); padding: 19px; border: 1px solid #d8dde6; border-radius: 16px; background: #fffffff5; box-shadow: 0 18px 45px #10182830; backdrop-filter: blur(12px); }
.quick-adjust header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.quick-adjust h2 { margin: 4px 0 0; font-size: 1.05rem; }
.quick-adjust p { margin: 11px 0 15px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.quick-adjust label { color: #566074; font-size: .74rem; font-weight: 800; }
.quick-adjust output { float: right; color: var(--brand); }
.quick-adjust .button { margin-top: 13px; }
.price-border-controls { margin-top: 17px; padding-top: 15px; border-top: 1px solid #e4e7ec; }
.price-border-heading { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-border-heading strong { font-size: .8rem; }
.switch-label { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; }
.switch-label input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.price-border-controls input[type="color"] { width: 100%; height: 42px; margin-top: 7px; padding: 3px; border: 1px solid #cfd6e0; border-radius: 9px; background: #fff; cursor: pointer; }
.price-border-controls input[type="range"] { width: 100%; margin-top: 9px; accent-color: var(--brand); }
.quick-adjust-propagate { margin-top: 16px; padding: 11px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid #d8dde6; border-radius: 10px; background: #f8fafc; cursor: pointer; line-height: 1.35; }
.quick-adjust-propagate input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.seal-color-panel input[type="color"] { width: 100%; height: 54px; margin-top: 8px; padding: 4px; border: 1px solid #cfd6e0; border-radius: 10px; background: #fff; cursor: pointer; }
.seal-color-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seal-color-actions .button { padding-inline: 8px; font-size: .75rem; }
.review-row.four-fields { grid-template-columns: 32px minmax(180px, 1.7fr) minmax(110px, .75fr) minmax(100px, .65fr) minmax(120px, .85fr) 36px; }
.review-row.four-fields .review-error { grid-column: 2 / 6; }
.background-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-button { padding: 6px 12px; border: 1px solid #cfd6e0; border-radius: 20px; background: #fff; color: #566074; font-size: .75rem; font-weight: 800; transition: background .15s, border-color .15s, color .15s; }
.filter-button:hover { background: #f8fafc; }
.filter-button.active { border-color: var(--focus); background: #f5f9ff; color: var(--focus); }
.background-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.background-add, .background-option { min-height: 190px; padding: 10px; display: flex; flex-direction: column; align-items: stretch; border: 2px solid #e4e7ec; border-radius: 13px; background: #fff; color: var(--ink); text-align: left; }
.background-card { position: relative; display: grid; }
.background-card.horizontal { grid-column: span 2; }
.background-card .background-option { width: 100%; }
.background-model-actions { position: absolute; right: 17px; top: 17px; z-index: 2; display: flex; gap: 5px; }
.background-model-actions button { padding: 6px 8px; border: 1px solid #cfd6e0; border-radius: 8px; background: #fffffff2; color: #344054; font-size: .65rem; font-weight: 850; box-shadow: 0 3px 10px #10182820; }
.background-card.pending .background-option { border-color: #f79009; background: #fffcf5; }
.background-area-state { margin-top: 7px !important; color: #067647 !important; font-weight: 800; }
.background-card.pending .background-area-state { color: #b54708 !important; }
.background-add { align-items: center; justify-content: center; border-style: dashed; color: var(--blue); text-align: center; }
.background-add > span { font-size: 2.5rem; font-weight: 300; line-height: 1; }
.background-add strong, .background-option strong { margin-top: 9px; font-size: .78rem; }
.background-add small, .background-option small { margin-top: 4px; color: var(--muted); font-size: .66rem; }
.background-option.active { border-color: var(--focus); box-shadow: 0 0 0 3px #dbeafe; }
.background-thumb { min-height: 130px; flex: 1; overflow: hidden; border-radius: 8px; background: #f2f4f7; }
.background-thumb img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pattern-composer { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(340px, 1.2fr); gap: 22px; align-items: stretch; }
.pattern-gallery { max-height: 470px; display: grid; gap: 8px; overflow: auto; padding: 3px; }
.pattern-option { display: grid; grid-template-columns: 94px 1fr; align-items: center; gap: 11px; padding: 8px; border: 2px solid #e4e7ec; border-radius: 11px; background: #fff; color: var(--ink); text-align: left; }
.pattern-option:hover { border-color: #b8c4d6; }
.pattern-option.active { border-color: var(--focus); background: #f5f9ff; box-shadow: 0 0 0 3px #dbeafe; }
.pattern-option > span:last-child strong, .pattern-option > span:last-child small { display: block; }
.pattern-option > span:last-child strong { font-size: .77rem; }
.pattern-option > span:last-child small { margin-top: 3px; color: var(--muted); font-size: .65rem; }
.pattern-swatch { height: 58px; display: flex; align-items: center; justify-content: center; border: 1px solid #d8dde6; border-radius: 8px; overflow: hidden; color: var(--price-fill); -webkit-text-stroke: 1px var(--price-outline); paint-order: stroke fill; font-weight: 950; }
.pattern-swatch small { margin-right: 3px; font-size: .55rem; }
.pattern-swatch b { font-size: 1.3rem; letter-spacing: -.08em; }
.pattern-swatch sup { align-self: flex-start; margin-top: 13px; font-size: .55rem; }
.combination-preview { min-width: 0; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 14px; background: #edf0f4; }
.combination-preview canvas { max-width: 100%; max-height: 430px; box-shadow: 0 12px 30px #10182826; }
.combination-preview small { margin-top: 11px; color: var(--muted); font-size: .68rem; font-weight: 750; }

.area-modal { z-index: 160; }
.area-dialog { position: relative; width: min(1120px, 100%); height: min(900px, calc(100vh - 40px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 30px 90px #10182865; }
.area-header { padding: 19px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #e4e7ec; }
.area-header h2 { margin: 4px 0 0; font-size: 1.25rem; }
.area-body { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 18px 24px; }
.area-instructions { display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; }
.area-instructions strong { font-size: .85rem; }
.area-instructions span { color: var(--muted); font-size: .75rem; }
.area-workspace { min-height: 0; display: grid; place-items: center; overflow: auto; padding: 18px; border-radius: 15px; background-color: #dfe4eb; background-image: radial-gradient(#bac3d0 1px, transparent 1px); background-size: 18px 18px; }
.area-stage { position: relative; display: inline-block; max-width: 100%; max-height: 100%; line-height: 0; overflow: hidden; user-select: none; touch-action: none; box-shadow: 0 16px 42px #10182835; }
.area-stage canvas { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 285px); box-shadow: none; transition: none; }
.area-selection { position: absolute; z-index: 2; border: 3px solid #1677ff; background: #1677ff18; cursor: move; line-height: normal; box-shadow: 0 0 0 9999px #10182842, inset 0 0 0 1px #ffffffaa; }
.area-stage .area-render-preview { width: 100%; height: 100%; max-width: none; max-height: none; display: block; pointer-events: none; }
.area-handle { position: absolute; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #1677ff; box-shadow: 0 1px 4px #10182855; }
.area-handle.north-west { left: -7px; top: -7px; cursor: nwse-resize; }.area-handle.north { left: 50%; top: -7px; transform: translateX(-50%); cursor: ns-resize; }.area-handle.north-east { right: -7px; top: -7px; cursor: nesw-resize; }
.area-handle.east { right: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }.area-handle.south-east { right: -7px; bottom: -7px; cursor: nwse-resize; }.area-handle.south { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
.area-handle.south-west { left: -7px; bottom: -7px; cursor: nesw-resize; }.area-handle.west { left: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.area-footer { padding: 15px 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; border-top: 1px solid #e4e7ec; }
.area-footer > span { color: var(--muted); font-size: .7rem; text-align: center; }
.area-footer > div { display: flex; gap: 8px; }

.model-price-modal { z-index: 170; }
.model-price-dialog { position: relative; width: min(1080px, 100%); height: min(850px, calc(100vh - 40px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 30px 90px #10182865; }
.model-price-body { min-height: 0; display: grid; grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); gap: 22px; padding: 20px 24px 10px; overflow: hidden; }
.model-price-patterns { min-height: 0; display: flex; flex-direction: column; }
.model-price-patterns > strong { font-size: .9rem; }
.model-price-patterns > p { margin: 5px 0 13px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.model-price-patterns .pattern-gallery { min-height: 0; flex: 1; }
.model-price-preview { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 13px; }
.model-price-preview .combination-preview { min-height: 0; }
.model-price-preview .combination-preview canvas { max-height: 390px; }
.model-price-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 15px; padding: 14px; border: 1px solid #e4e7ec; border-radius: 13px; background: #fafbfc; }
.model-price-colors label { display: grid; gap: 7px; color: #566074; font-size: .72rem; font-weight: 800; }
.model-price-colors input[type="color"] { width: 100%; height: 43px; padding: 3px; border: 1px solid #cfd6e0; border-radius: 9px; background: #fff; cursor: pointer; }
.model-price-border-heading { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.model-price-border-heading strong { font-size: .75rem; }
.model-price-status { grid-column: 1 / -1; margin: 0; }
.model-price-footer { grid-template-columns: 1fr auto; }
.model-price-footer > span { text-align: left; }

@media(max-width: 960px) {
  .review-row.four-fields { grid-template-columns: 32px 1fr 1fr 36px; }
  .review-row.four-fields label:nth-of-type(3), .review-row.four-fields label:nth-of-type(4) { grid-row: 2; }
  .review-row.four-fields label:nth-of-type(3) { grid-column: 2; }
  .review-row.four-fields label:nth-of-type(4) { grid-column: 3; }
  .review-row.four-fields .review-delete { grid-column: 4; grid-row: 1; }
  .review-row.four-fields .review-error { grid-column: 2 / 4; }
}

@media(max-width: 760px) {
  #backgroundGallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  #backgroundGallery .background-card.horizontal { grid-column: span 1; }
  #backgroundGallery .background-add,
  #backgroundGallery .background-option { min-width: 0; min-height: 0; padding: 5px; border-width: 1.5px; border-radius: 9px; }
  #backgroundGallery .background-thumb { min-height: 0; height: 92px; flex: none; border-radius: 6px; }
  #backgroundGallery .background-thumb img { object-fit: contain; }
  #backgroundGallery .background-add { height: 126px; }
  #backgroundGallery .background-add > span { font-size: 1.7rem; }
  #backgroundGallery .background-add strong,
  #backgroundGallery .background-option strong { margin-top: 5px; overflow: hidden; font-size: .63rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  #backgroundGallery .background-add small,
  #backgroundGallery .background-option small { display: none; }
  .pattern-composer { grid-template-columns: 1fr; }
  .pattern-gallery { max-height: 300px; }
  .review-row.four-fields { grid-template-columns: 30px 1fr 36px; }
  .review-row.four-fields label { grid-column: 2 !important; grid-row: auto !important; }
  .review-row.four-fields .review-delete { grid-column: 3; grid-row: 1; }
  .review-row.four-fields .review-error { grid-column: 2 / 3; }
  .area-dialog { height: calc(100vh - 20px); }
  .area-instructions { display: grid; gap: 4px; }
  .area-footer { grid-template-columns: 1fr 1fr; }
  .area-footer > span { display: none; }
  .area-footer > div { justify-content: flex-end; }
  .model-price-dialog { height: calc(100vh - 20px); }
  .model-price-body { grid-template-columns: 1fr; overflow: auto; }
  .model-price-patterns .pattern-gallery { max-height: 260px; }
  .model-price-preview { min-height: 520px; }
  .model-price-footer { grid-template-columns: 1fr; }
}

.price-swatch-image { display: block; width: 100%; height: 100px; object-fit: contain; }
.model-price-colors select, .model-price-colors input:not([type="color"]):not([type="checkbox"]) { width: 100%; min-height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; }
#downloadLimitModal { z-index: 350; }
#downloadLimitModal p { line-height: 1.65; color: var(--muted); }
#downloadLimitModal footer { flex-wrap: wrap; }
#downloadLimitModal.authenticated-limit footer .button { width: 100%; }
@media (max-width: 760px) {
  .topbar { height: auto; min-height: 68px; flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .topbar .brand { flex: 1; }
  #accountIdentity { flex-basis: 100%; font-size: .8rem; overflow-wrap: anywhere; }
  .admin-page { display: block; }
  .admin-topbar { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .admin-content { padding: 18px 14px; }
  .admin-stats { grid-template-columns: 1fr; }
  .model-price-modal { padding: 10px; }
  .model-price-dialog { width: 100%; height: calc(100dvh - 20px); }
  .model-price-body { display: block; padding: 16px; overflow-y: auto; }
  .model-price-patterns .pattern-gallery { max-height: 240px; overflow-y: auto; flex: none; margin-bottom: 20px; }
  .model-price-preview { min-height: 0; display: block; }
  .model-price-preview .combination-preview { margin-bottom: 14px; }
  .model-price-status { margin-top: 14px; }
  .model-price-colors { padding: 10px; gap: 12px 10px; }
  .model-price-colors > * { min-width: 0; }
  .model-price-footer { padding: 12px 16px; }
}
.history-panel { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid #e8ecf2; border-radius: 1rem; background: #fff; }
.history-row { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .25rem; }
.history-item { flex: 0 0 12rem; padding: .9rem; border: 1px solid #edf0f4; border-radius: .75rem; text-align: left; background: #fafbfc; }
.history-item:hover { border-color: #f59e0b; background: #fffaf0; }
.signup-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Mobile review: artwork first, downloads below, optional settings last. */
@media (max-width: 760px) {
  body:has(#editorPage:not([hidden])) .topbar { position: static; min-height: 60px; padding: 10px 14px; gap: 8px; }
  body:has(#editorPage:not([hidden])) .topbar #accountIdentity,
  body:has(#editorPage:not([hidden])) .topbar #billingButton,
  body:has(#editorPage:not([hidden])) .topbar #newProjectButton { display: none; }
  body:has(#editorPage:not([hidden])) .topbar #switchAccountButton { min-height: 40px; padding: 8px; font-size: .7rem; }
  .editor-page { display: flex; flex-direction: column; min-height: 0; background: #fff; }
  .editor-page .mobile-editor-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; }
  .editor-page .preview-workspace { order: 0; min-height: 0; background: #fff; }
  .editor-page .editor-sidebar { order: 1; display: none; border: 0; border-top: 1px solid var(--line); }
  .editor-page.mobile-settings-open .editor-sidebar { display: block; }
  .editor-page .sidebar-heading { align-items: center; flex-wrap: wrap; padding: 18px; }
  .editor-page .preview-toolbar { min-height: 60px; padding: 10px 18px; border: 0; }
  .editor-page .preview-toolbar > div:first-child { min-width: 0; }
  .editor-page #formatLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .editor-page .zoom-controls { display: none; }
  .editor-page .canvas-stage { flex: none; min-height: 0; padding: 12px 18px; background: #f7f8fa; overflow: visible; }
  .editor-page #canvas { width: auto; height: auto; max-width: 100%; max-height: 46vh; max-height: 46svh; transform: none !important; object-fit: contain; border-radius: 8px; box-shadow: 0 6px 20px #23304a18; }
  .editor-page .page-navigation { min-height: 52px; padding: 8px 18px; border: 0; }
  .editor-page .page-navigation > button { flex-shrink: 0; min-width: 44px; min-height: 44px; }
  .editor-page #pageButtons { min-width: 0; overflow-x: auto; padding: 3px; }
  .editor-page #pageButtons button { flex-shrink: 0; min-width: 44px; min-height: 44px; }
  .editor-page .export-section { padding: 8px 18px max(20px, env(safe-area-inset-bottom)); border: 0; }
  .editor-page .export-section .section-title { margin-bottom: 10px; }
  .editor-page .export-section .button { min-height: 44px; border-radius: 12px; }
  .editor-page .export-grid { gap: 8px; }
  .editor-page #clearDraftButton { display: block; margin: 14px auto 0; min-height: 44px; font-size: .75rem; }
  .editor-page .editor-fields input { font-size: 16px; }
  .editor-page .quick-adjust { right: 18px; top: 12px; width: min(300px, calc(100% - 36px)); max-height: 65svh; overflow-y: auto; }
}