/* UAE editor styles scoped to preserve the root header and footer. */
/* Page-specific additions follow the scoped source rules at the end. */
.ae-app {--primary: #234f40; --primary-hover: #173d2f; --primary-light: #edf3ee; --slate-50: #f8f9f6; --slate-100: #f0f2ed; --slate-200: #e0e5dd; --slate-300: #cbd3c8; --slate-400: #829084; --slate-500: #657268; --slate-600: #526056; --slate-700: #3d4d42; --slate-800: #263c30; --slate-900: #1e3226; --danger: #ad4237; --radius: 14px; --radius-sm: 7px; --font-sans: Inter,"Segoe UI",Arial,sans-serif; --font-mono: Consolas,monospace;}
.ae-app * {box-sizing: border-box;}
.ae-app {scroll-behavior: smooth; scroll-padding-top: 25px;}
.ae-app {margin: 0px; background: rgb(248, 249, 245); color: var(--slate-900); font-family: var(--font-sans); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased;}
.ae-app h1, .ae-app h2, .ae-app h3, .ae-app h4, .ae-app p {margin: 0px;}
.ae-app a {color: var(--primary); text-decoration: none;}
.ae-app a:hover {text-decoration: underline;}
.ae-app button, .ae-app input, .ae-app select, .ae-app textarea {font: inherit;}
.ae-app button, .ae-app a, .ae-app input, .ae-app select, .ae-app textarea, .ae-app summary {-webkit-tap-highlight-color: transparent;}
.ae-app button {cursor: pointer;}
.ae-app button:disabled {opacity: 0.65; cursor: wait;}
.ae-app svg {flex-shrink: 0; vertical-align: middle;}
.ae-app button:focus-visible, .ae-app a:focus-visible, .ae-app summary:focus-visible {outline: rgb(139, 173, 113) solid 3px; outline-offset: 4px;}
.ae-app input:focus, .ae-app select:focus, .ae-app textarea:focus {outline: rgb(116, 152, 123) solid 2px; outline-offset: 2px;}
.ae-app input, .ae-app textarea {min-width: 0px;}
.ae-app button {transition: background 0.18s, box-shadow 0.18s;}
.ae-app button:hover {filter: brightness(0.97);}
.ae-app .visually-hidden {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.ae-app .skip-link {position: fixed; top: -60px; left: 12px; padding: 10px 20px; background: white; z-index: 99;}
.ae-app .skip-link:focus {top: 10px;}
.ae-app .site-header {background: rgb(255, 255, 255); border-bottom: 1px solid var(--slate-200);}
.ae-app .header-inner {max-width: 1280px; margin: auto; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px;}
.ae-app .brand-container {display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;}
.ae-app .brand-container:hover {text-decoration: none;}
.ae-app .brand-mark {width: 36px; height: 39px; background: var(--primary); border-radius: 9px; color: white; display: grid; place-items: center;}
.ae-app .brand-word {font-size: 22px; font-weight: 750; letter-spacing: -0.9px; color: rgb(33, 62, 47);}
.ae-app .brand-word > span {color: rgb(120, 131, 117); font-weight: 400;}
.ae-app .header-inner nav {display: flex; gap: 32px;}
.ae-app .header-inner nav a {color: rgb(83, 96, 80); font-size: 13px; font-weight: 500;}
.ae-app .header-inner nav a:first-child {color: var(--primary); font-weight: 650;}
.ae-app .header-free {font-size: 11px; color: rgb(76, 99, 80); display: flex; align-items: center; gap: 7px;}
.ae-app .header-free > span, .ae-app .eyebrow > span {width: 6px; height: 6px; border-radius: 50%; background: rgb(86, 133, 90);}
.ae-app.main-wrapper {max-width: 1280px; margin: auto; padding: 0px 40px; width: 100%;}
.ae-app .hero {display: flex; align-items: center; justify-content: space-between; padding: 54px 0px 46px; gap: 30px;}
.ae-app .eyebrow {font-size: 10px; font-weight: 650; letter-spacing: 1.6px; color: rgb(88, 112, 76); display: flex; align-items: center; gap: 8px;}
.ae-app .hero h1 {font-size: 54px; line-height: 1.12; letter-spacing: -2.4px; font-weight: 600; margin: 17px 0px;}
.ae-app .hero h1 em {font-style: normal; color: rgb(93, 126, 76);}
.ae-app .hero-copy > p {font-size: 15px; color: rgb(104, 113, 100); line-height: 1.8;}
.ae-app .hero-benefits {display: flex; gap: 23px; margin-top: 23px; font-size: 11px; color: rgb(78, 92, 72);}
.ae-app .hero-benefits > span {display: flex; align-items: center; gap: 6px;}
.ae-app .hero-benefits svg {color: rgb(79, 116, 74);}
.ae-app .hero-note {width: 293px; margin: 9px 51px 0px 0px; border-left: 1px solid rgb(217, 226, 209); padding: 0px 0px 0px 29px; transform: rotate(-3deg);}
.ae-app .note-star {font-size: 48px; color: rgb(144, 161, 111); line-height: 1.1; display: block; margin-bottom: 11px;}
.ae-app .hero-note p {font-family: Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.5; color: rgb(86, 112, 71);}
.ae-app .hero-note > span:last-child {font-size: 8px; letter-spacing: 1.1px; color: rgb(119, 129, 109); display: block; margin-top: 14px;}
.ae-app .builder-section {scroll-margin-top: 20px;}
.ae-app .workspace-heading {border-top: 1px solid var(--slate-200); display: flex; align-items: center; justify-content: space-between; padding: 27px 0px 23px;}
.ae-app .workspace-heading h2 {font-size: 19px; font-weight: 650; letter-spacing: -0.4px; margin-bottom: 3px;}
.ae-app .workspace-heading > div > span {font-size: 12px; color: rgb(118, 128, 112);}
.ae-app .local-status {display: flex; align-items: center; gap: 6px; font-size: 10px; color: rgb(104, 118, 97);}
.ae-app .app-grid {display: grid; grid-template-columns: 350px minmax(0px, 1fr); gap: 26px; align-items: start;}
.ae-app .control-panel {display: grid; gap: 18px; min-width: 0px;}
.ae-app .card {background: rgb(255, 255, 255); border: 1px solid var(--slate-200); border-radius: var(--radius); overflow: hidden;}
.ae-app .card-header {display: flex; align-items: center; gap: 12px; padding: 22px 22px 18px;}
.ae-app .step-number {font-size: 11px; font-weight: 600; background: rgb(239, 243, 233); color: rgb(102, 124, 80); border: 1px solid rgb(224, 232, 213); border-radius: 8px; width: 33px; height: 33px; display: grid; place-items: center;}
.ae-app .card-header h2 {font-size: 15px; letter-spacing: -0.2px; font-weight: 650;}
.ae-app .card-header p {font-size: 10px; color: rgb(119, 129, 110); margin-top: 2px;}
.ae-app .card-header > svg {margin-left: auto; color: rgb(121, 148, 103);}
.ae-app .card-body {padding: 0px 22px 21px;}
.ae-app .form-group {margin-bottom: 15px;}
.ae-app .form-label {display: block; font-size: 11px; font-weight: 600; color: rgb(71, 83, 64); margin-bottom: 6px;}
.ae-app .form-input, .ae-app .form-select {width: 100%; border: 1px solid rgb(223, 228, 217); background: rgb(255, 255, 255); border-radius: 7px; padding: 11px 12px; color: rgb(48, 67, 45); font-size: 12px; min-height: 42px;}
.ae-app .form-input::placeholder {color: rgb(140, 150, 133);}
.ae-app .form-select {padding-right: 24px;}
.ae-app .logo-upload-wrapper {display: flex; gap: 12px; align-items: center; border: 1px dashed rgb(220, 226, 212); border-radius: 8px; padding: 12px; margin: 19px 0px 17px;}
.ae-app .logo-preview-box {height: 40px; width: 40px; border-radius: 7px; background: rgb(243, 245, 238); display: grid; place-items: center; overflow: hidden; color: rgb(130, 149, 113); flex-shrink: 0;}
.ae-app .logo-preview-img {width: 100%; height: 100%; object-fit: contain;}
.ae-app .logo-upload-controls {display: flex; flex-direction: column; gap: 3px;}
.ae-app .btn-upload-label {font-size: 11px; color: rgb(67, 86, 56); font-weight: 600; cursor: pointer;}
.ae-app .btn-upload-label > span {font-size: 9px; color: rgb(129, 139, 118); font-weight: 400; margin-left: 5px;}
.ae-app .logo-help-text {font-size: 9px; color: rgb(129, 138, 120);}
.ae-app .logo-upload-wrapper:focus-within {outline: rgb(116, 152, 123) solid 2px; outline-offset: 2px;}
.ae-app .btn-link-danger {background: none; border: 0px; color: var(--danger); text-align: left; padding: 0px; font-size: 10px;}
.ae-app .business-extras {border-top: 1px solid rgb(238, 240, 233); padding-top: 15px;}
.ae-app .business-extras summary, .ae-app .syntax-helper summary {font-size: 11px; font-weight: 500; cursor: pointer; color: rgb(96, 117, 79);}
.ae-app .business-extras summary {list-style: none; display: flex; justify-content: space-between;}
.ae-app .business-extras summary::-webkit-details-marker {display: none;}
.ae-app .business-extras summary > span {font-size: 17px; line-height: 1;}
.ae-app .extra-fields {margin-top: 17px;}
.ae-app .extra-fields .form-group:last-child {margin-bottom: 0px;}
.ae-app .label-row {display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.ae-app .label-row .form-label {font-size: 10px;}
.ae-app .text-button {background: none; border: 0px; color: rgb(99, 113, 91); font-size: 11px; padding: 4px 0px; display: inline-flex; align-items: center; gap: 5px; min-height: 30px;}
.ae-app .label-row .text-button {font-size: 10px; padding: 0px; margin-bottom: 6px; min-height: 0px;}
.ae-app .prompt-textarea {width: 100%; resize: vertical; min-height: 157px; border: 1px solid rgb(220, 227, 212); background: rgb(249, 250, 246); color: rgb(63, 82, 52); border-radius: 8px; padding: 14px; font: 11px/1.95 var(--font-mono);}
.ae-app .field-help {font-size: 10px; color: rgb(123, 133, 114); line-height: 1.65; margin-top: 8px;}
.ae-app .presets-section {margin-top: 20px;}
.ae-app .presets-label {font-size: 10px; color: rgb(119, 131, 107); display: block; margin-bottom: 8px;}
.ae-app .preset-chips {display: flex; flex-wrap: wrap; gap: 6px;}
.ae-app .preset-chip {border: 1px solid rgb(227, 231, 220); border-radius: 5px; background: rgb(255, 255, 255); padding: 5px 9px; font-size: 10px; color: rgb(101, 116, 90); min-height: 30px;}
.ae-app .preset-chip:hover, .ae-app .preset-chip.active {background: rgb(237, 243, 230); border-color: rgb(195, 210, 181); color: rgb(59, 89, 49);}
.ae-app .syntax-helper {margin-top: 19px;}
.ae-app .syntax-helper p {font-size: 10px; color: rgb(106, 120, 94); margin: 12px 0px 5px;}
.ae-app .syntax-helper code {display: block; background: rgb(242, 245, 236); padding: 8px; font-size: 10px; overflow-wrap: anywhere;}
.ae-app .syntax-helper a {display: flex; align-items: center; gap: 6px; margin-top: 13px; font-size: 10px;}
.ae-app .privacy-note {display: flex; gap: 11px; padding: 0px 10px; color: rgb(109, 128, 92);}
.ae-app .privacy-note > svg {margin-top: 4px;}
.ae-app .privacy-note p {font-size: 10px; line-height: 1.8;}
.ae-app .privacy-note strong {font-weight: 550; color: rgb(88, 107, 72);}
.ae-app .preview-panel {min-width: 0px; background: rgb(240, 242, 235); border: 1px solid rgb(221, 227, 212); border-radius: 14px; padding: 0px 20px 15px;}
.ae-app .toolbar-card {display: flex; align-items: center; justify-content: space-between; padding: 16px 1px;}
.ae-app .toolbar-status {display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 550; color: rgb(83, 100, 71);}
.ae-app .live-pulse {width: 6px; height: 6px; background: rgb(98, 137, 81); border-radius: 50%;}
.ae-app .preview-format {font-size: 9px; font-weight: 400; color: rgb(125, 137, 114); border-left: 1px solid rgb(205, 215, 196); margin-left: 5px; padding-left: 12px;}
.ae-app .toolbar-card .text-button {font-size: 10px;}
.ae-app .invoice-sheet-container {overflow: auto; border-radius: 3px; box-shadow: rgba(41, 61, 32, 0.063) 0px 4px 18px;}
.ae-app .invoice-sheet {background: rgb(255, 255, 255); color: rgb(52, 67, 50); border: 1px solid rgb(227, 230, 221); min-height: 580px; padding: 34px 31px 22px; display: flex; flex-direction: column; font-size: 11px;}
.ae-app .inv-top-bar {display: flex; justify-content: space-between; gap: 20px; min-height: 104px;}
.ae-app .inv-sender {max-width: 55%; overflow-wrap: anywhere;}
.ae-app .inv-business-title {font-size: 21px; font-weight: 650; letter-spacing: -0.5px; color: rgb(37, 67, 51);}
.ae-app .inv-sender-meta {font-size: 10px; color: rgb(125, 134, 119); line-height: 1.6; margin-top: 7px;}
.ae-app .inv-sender-logo {max-width: 100px; max-height: 55px; object-fit: contain; margin-bottom: 10px;}
.ae-app .inv-meta-right {text-align: right; max-width: 46%;}
.ae-app .inv-main-heading {font-size: 25px; letter-spacing: 3px; line-height: 1.25; font-weight: 400; color: rgb(49, 80, 61); margin-bottom: 12px;}
.ae-app .inv-details-table {font-size: 9px; margin-left: auto; border-spacing: 0px 3px;}
.ae-app .inv-details-table .label {color: rgb(132, 144, 123); padding-right: 14px; text-align: left;}
.ae-app .inv-details-table .value {text-align: right; color: rgb(84, 99, 74);}
.ae-app .inv-client-section {display: flex; justify-content: space-between; align-items: center; padding: 22px 0px; margin-top: 10px; border-top: 1px solid rgb(235, 238, 229); gap: 20px;}
.ae-app .inv-section-title {font-size: 8px; text-transform: uppercase; letter-spacing: 1.3px; color: rgb(135, 145, 126); margin-bottom: 5px;}
.ae-app .inv-client-name {font-weight: 600; font-size: 13px;}
.ae-app .inv-client-details {font-size: 9px; color: rgb(139, 147, 131); max-width: 275px;}
.ae-app .inv-payment-terms > div:last-child {font-size: 9px !important; text-transform: none !important; border-radius: 30px !important; background: rgb(247, 244, 231) !important; color: rgb(141, 128, 80) !important; padding: 3px 12px !important; font-weight: 500 !important;}
.ae-app .inv-items-table {width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px;}
.ae-app .inv-items-table th {font-size: 8px; background: rgb(241, 244, 237); color: rgb(100, 121, 86); font-weight: 600; letter-spacing: 0.25px; padding: 11px 5px; text-align: left;}
.ae-app .inv-items-table td {padding: 16px 5px; border-bottom: 1px solid rgb(237, 240, 231); overflow-wrap: anywhere; vertical-align: top;}
.ae-app .col-num {width: 6%; color: rgb(137, 148, 126);}
.ae-app .col-desc {width: 39%;}
.ae-app .col-qty {width: 10%; text-align: center !important;}
.ae-app .col-rate {width: 19%; text-align: right !important;}
.ae-app .col-amt {width: 22%; font-variant-numeric: tabular-nums; white-space: normal; text-align: right !important;}
.ae-app .col-actions {width: 4%; text-align: right;}
.ae-app .btn-del-row {border: 0px; background: none; color: rgb(158, 170, 148); padding: 0px 2px; font-size: 15px; line-height: 1.2;}
.ae-app .btn-del-row:hover {color: var(--danger);}
.ae-app .inv-add-row-bar {padding-top: 9px;}
.ae-app .btn-add-item {background: none; border: 0px; font-size: 10px; color: rgb(107, 133, 88); display: flex; align-items: center; gap: 5px; padding: 6px 0px;}
.ae-app .inv-summary-container {display: grid; grid-template-columns: minmax(0px, 1fr) minmax(170px, 0.9fr); gap: 35px; margin: 23px 0px 35px;}
.ae-app .inv-notes-terms {font-size: 9px; color: rgb(138, 147, 128); line-height: 1.75; overflow-wrap: anywhere;}
.ae-app .inv-notes-title {font-size: 8px; color: rgb(115, 131, 104); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;}
.ae-app .inv-notes-block {margin-bottom: 14px;}
.ae-app .totals-table {width: 100%; border-collapse: collapse; font-size: 10px;}
.ae-app .totals-table td {padding: 7px 0px;}
.ae-app .t-label {color: rgb(127, 139, 114);}
.ae-app .t-val {text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;}
.ae-app .tax-badge {font-size: 8px; color: rgb(114, 131, 101); display: block;}
.ae-app .grand-total-row {border-top: 1px solid rgb(220, 228, 211);}
.ae-app .grand-total-row td {padding-top: 12px; color: rgb(49, 80, 51); font-size: 15px; font-weight: 600;}
.ae-app .grand-total-row .t-label {font-size: 11px;}
.ae-app .inv-footer {margin-top: auto; border-top: 1px solid rgb(237, 240, 231); padding-top: 17px; display: flex; justify-content: space-between; gap: 10px; color: rgb(160, 168, 149); font-size: 8px;}
.ae-app .inv-brand-link {color: rgb(148, 161, 134); font-size: 8px;}
.ae-app .inv-brand-link strong {font-weight: 500; color: rgb(111, 134, 94);}
.ae-app [contenteditable="true"] {outline: none; border-radius: 3px; min-width: 12px; cursor: text;}
.ae-app [contenteditable="true"]:hover {background: rgb(242, 246, 236);}
.ae-app [contenteditable="true"]:focus {background: rgb(242, 246, 236); box-shadow: rgb(171, 199, 149) 0px 0px 0px 2px;}
.ae-app [contenteditable="true"]:empty::before {content: attr(data-placeholder); color: rgb(160, 168, 149);}
.ae-app .preview-actions {display: flex; align-items: center; justify-content: space-between; padding: 10px 1px 14px; color: rgb(138, 148, 125); font-size: 9px; gap: 12px;}
.ae-app .preview-actions > span {display: flex; gap: 5px; align-items: center;}
.ae-app .preview-actions > div {display: flex; align-items: center; gap: 12px;}
.ae-app .preview-actions .text-button {font-size: 9px;}
.ae-app .icon-button {background: none; border: 0px; color: rgb(125, 139, 110); min-height: 30px; min-width: 30px;}
.ae-app .download-bar {background: rgb(255, 255, 255); border: 1px solid rgb(224, 230, 215); border-radius: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 15px;}
.ae-app .download-bar > div:first-child {display: grid; gap: 3px;}
.ae-app .download-bar strong {font-size: 11px; font-weight: 600; color: rgb(74, 94, 61);}
.ae-app .download-bar span {font-size: 9px; color: rgb(136, 148, 121);}
.ae-app .toolbar-buttons {display: flex; gap: 8px;}
.ae-app .btn {border: 1px solid transparent; border-radius: 7px; min-height: 42px; padding: 10px 14px; display: inline-flex; gap: 7px; align-items: center; justify-content: center; font-weight: 550; font-size: 11px; white-space: nowrap;}
.ae-app .btn-primary {background: var(--primary); color: white; box-shadow: rgba(35, 79, 64, 0.082) 0px 2px 3px;}
.ae-app .btn-primary:hover {background: var(--primary-hover);}
.ae-app .btn-secondary {border-color: rgb(220, 227, 212); color: rgb(96, 115, 79); background: rgb(255, 255, 255);}
.ae-app .download-caption {text-align: center; font-size: 9px; color: rgb(139, 149, 127); margin-top: 12px;}
.ae-app .how-section {margin-top: 76px; padding-bottom: 44px;}
.ae-app .section-intro {text-align: center;}
.ae-app .section-intro .eyebrow {justify-content: center; font-size: 9px;}
.ae-app .section-intro h2, .ae-app .faq-section h2 {font-size: 29px; line-height: 1.25; font-weight: 550; letter-spacing: -1px; margin-top: 13px;}
.ae-app .steps-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 55px; margin-top: 36px; padding: 0px 25px;}
.ae-app .steps-grid article > span {font-family: Georgia, serif; font-size: 22px; color: rgb(140, 159, 116);}
.ae-app .steps-grid h3 {font-size: 14px; font-weight: 600; margin: 9px 0px 7px;}
.ae-app .steps-grid p {font-size: 12px; color: rgb(123, 134, 112); line-height: 1.8;}
.ae-app .feature-strip {display: grid; grid-template-columns: repeat(3, 1fr); background: rgb(237, 241, 229); border: 1px solid rgb(226, 232, 215); border-radius: 12px; padding: 25px 28px; gap: 20px;}
.ae-app .feature-strip > div {position: relative; padding-left: 39px;}
.ae-app .feature-strip svg {position: absolute; left: 0px; top: 4px; color: rgb(118, 144, 93);}
.ae-app .feature-strip h3 {font-size: 12px; font-weight: 600;}
.ae-app .feature-strip p {font-size: 10px; color: rgb(119, 136, 104); margin-top: 4px;}
.ae-app .faq-section {display: grid; grid-template-columns: 1fr 1.4fr; gap: 75px; padding: 65px 25px;}
.ae-app .faq-section .eyebrow {font-size: 8px;}
.ae-app .faq-section h2 {margin: 13px 0px 19px; font-size: 31px;}
.ae-app .faq-section > div > a {display: inline-flex; align-items: center; gap: 9px; font-size: 11px; color: rgb(107, 129, 86);}
.ae-app .faq-list details {border-bottom: 1px solid rgb(224, 230, 215);}
.ae-app .faq-list summary {cursor: pointer; font-size: 12px; font-weight: 500; padding: 16px 27px 16px 0px; list-style: none; position: relative;}
.ae-app .faq-list summary::after {content: "+"; position: absolute; right: 1px; font-size: 18px; line-height: 1; color: rgb(129, 147, 109);}
.ae-app .faq-list details[open] summary::after {content: "−";}
.ae-app .faq-list p {font-size: 12px; color: rgb(113, 129, 101); padding: 0px 20px 18px 0px;}
.ae-app .faq-list summary::-webkit-details-marker {display: none;}
.ae-app .upgrade-note {display: flex; justify-content: center; gap: 20px; border-top: 1px solid rgb(225, 230, 217); padding: 24px 0px; color: rgb(138, 149, 123); font-size: 10px;}
.ae-app .upgrade-note a {font-weight: 550; display: flex; gap: 5px; align-items: center; white-space: nowrap;}
.ae-app .site-footer {border-top: 1px solid rgb(224, 230, 215); background: rgb(255, 255, 255); padding: 40px 40px 0px;}
.ae-app .footer-inner, .ae-app .footer-bottom {max-width: 1200px; margin: auto; display: flex; justify-content: space-between; gap: 50px;}
.ae-app .footer-inner {padding-bottom: 30px;}
.ae-app .footer-about {flex: 1 1 0%;}
.ae-app .footer-about p {font-size: 11px; line-height: 1.85; color: rgb(124, 136, 112); margin-top: 14px;}
.ae-app .footer-inner > div:not(:first-child) {min-width: 160px;}
.ae-app .footer-inner h4 {font-size: 11px; font-weight: 600; margin: 3px 0px 12px;}
.ae-app .footer-inner > div > a:not(.brand-container) {display: block; font-size: 11px; color: rgb(123, 136, 110); margin-bottom: 9px;}
.ae-app .footer-bottom {border-top: 1px solid rgb(236, 240, 229); padding: 18px 0px; font-size: 9px; color: rgb(149, 161, 135);}
.ae-app .toast-msg {position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: rgb(35, 79, 64); color: rgb(255, 255, 255); padding: 12px 20px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.133) 0px 6px 24px; display: flex; gap: 10px; align-items: center; opacity: 0; pointer-events: none; transition: 0.2s; z-index: 100; font-size: 12px; max-width: calc(100% - 30px);}
.ae-app .toast-msg.show {opacity: 1; transform: translate(-50%, 0px);}
.ae-app .noscript-notice {position: fixed; bottom: 0px; background: rgb(255, 244, 206); width: 100%; padding: 15px; text-align: center;}
.ae-app .animate-spin {animation: 1s linear 0s infinite normal none running spin;}
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.ae-app .page-container {max-width: 850px; background: white; margin: 44px auto 60px; border: 1px solid var(--slate-200); border-radius: 14px; padding: 44px;}
.ae-app .page-title {font-size: 32px; font-weight: 600; letter-spacing: -1px; line-height: 1.2;}
.ae-app .page-subtitle {color: var(--slate-500); margin: 15px 0px 30px;}
.ae-app .page-content {font-size: 14px; color: var(--slate-600);}
.ae-app .page-content h2 {font-size: 20px; color: var(--primary); margin: 28px 0px 12px;}
.ae-app .page-content h3 {font-size: 16px; margin: 22px 0px 9px;}
.ae-app .page-content p {margin-bottom: 14px;}
.ae-app .page-content li {margin-bottom: 8px;}
.ae-app .page-content code {overflow-wrap: anywhere;}
.ae-app .highlight-box {padding: 22px; background: var(--primary-light); border-radius: 8px; margin: 22px 0px;}
.ae-app .page-content table {width: 100%; border-collapse: collapse;}
.ae-app .page-content th, .ae-app .page-content td {padding: 10px; border: 1px solid var(--slate-200);}
.ae-app .pdf-export .no-print {display: none !important;}
.ae-app .invoice-sheet.pdf-export {width: 718px !important; min-width: 718px !important; max-width: none !important; min-height: 820px !important; padding: 36px !important; border: 0px !important; box-shadow: none !important; border-radius: 0px !important;}
.ae-app .pdf-export .inv-footer {display: none !important;}
.ae-app .pdf-export [contenteditable] {background: transparent !important; box-shadow: none !important;}
.ae-app .pdf-export .inv-items-table tr {break-inside: avoid;}
.ae-app .pdf-export .inv-summary-container {break-inside: avoid;}
@media (min-width: 1400px) {
.ae-app .hero {padding-top: 62px; padding-bottom: 51px;}
.ae-app .invoice-sheet {min-height: 620px;}
}
@media (max-width: 1100px) {
.ae-app .header-inner, .ae-app.main-wrapper {padding-left: 25px; padding-right: 25px;}
.ae-app .header-inner nav {gap: 20px;}
.ae-app .header-free {display: none;}
.ae-app .app-grid {grid-template-columns: 310px minmax(0px, 1fr); gap: 20px;}
.ae-app .card-header {padding: 20px 18px 17px;}
.ae-app .card-body {padding: 0px 18px 19px;}
.ae-app .preview-panel {padding-left: 14px; padding-right: 14px;}
.ae-app .invoice-sheet {padding: 27px 22px; min-height: 565px;}
.ae-app .download-bar {flex-wrap: wrap;}
.ae-app .download-bar > div:first-child {display: none;}
.ae-app .toolbar-buttons {width: 100%;}
.ae-app .btn-primary {flex: 1 1 0%;}
.ae-app .hero-note {margin-right: 10px;}
.ae-app .inv-summary-container {gap: 20px; grid-template-columns: 1fr 1fr;}
.ae-app .steps-grid {gap: 30px;}
.ae-app .feature-strip p {line-height: 1.5;}
.ae-app .faq-section {gap: 40px;}
}
@media (max-width: 820px) {
.ae-app .app-grid {grid-template-columns: 1fr;}
.ae-app .control-panel {grid-template-columns: 1fr 1fr; align-items: start;}
.ae-app .privacy-note {grid-column: 1 / -1; margin-bottom: 5px;}
.ae-app .hero {padding: 38px 0px;}
.ae-app .hero h1 {font-size: 46px;}
.ae-app .hero-note {width: 210px; padding-left: 20px;}
.ae-app .hero-note p {font-size: 18px;}
.ae-app .hero-note > span:last-child {font-size: 7px;}
.ae-app .invoice-sheet {min-height: 630px; padding: 35px;}
.ae-app .download-bar > div:first-child {display: grid;}
.ae-app .toolbar-buttons {width: auto;}
.ae-app .header-inner {padding-top: 17px; padding-bottom: 17px;}
.ae-app .header-inner nav a {font-size: 11px;}
.ae-app .header-inner nav {gap: 16px;}
.ae-app .header-inner nav a:first-child {display: none;}
.ae-app .hero-benefits {gap: 14px; font-size: 10px;}
.ae-app .inv-summary-container {grid-template-columns: 1fr 250px;}
.ae-app .feature-strip {padding: 22px 17px; gap: 14px;}
.ae-app .feature-strip > div {padding-left: 0px;}
.ae-app .feature-strip svg {position: static; margin-bottom: 8px;}
.ae-app .footer-inner {gap: 25px;}
.ae-app .footer-inner > div:not(:first-child) {min-width: 110px;}
.ae-app .footer-about p {max-width: 220px;}
}
@media (max-width: 560px) {
.ae-app .header-inner, .ae-app.main-wrapper {padding-left: 18px; padding-right: 18px;}
.ae-app .brand-word {font-size: 20px;}
.ae-app .brand-mark {width: 31px; height: 34px;}
.ae-app .header-inner nav a {font-size: 10px;}
.ae-app .header-inner nav a:last-child {display: none;}
.ae-app .hero {padding: 33px 0px 30px;}
.ae-app .hero h1 {font-size: 42px; letter-spacing: -1.8px;}
.ae-app .eyebrow {font-size: 8px; letter-spacing: 1.2px;}
.ae-app .hero-copy > p {font-size: 12px;}
.ae-app .hero-copy > p br {display: none;}
.ae-app .hero-benefits {gap: 12px; flex-wrap: wrap; font-size: 9px; margin-top: 19px;}
.ae-app .hero-benefits > span {gap: 3px;}
.ae-app .hero-note {display: none;}
.ae-app .workspace-heading {padding: 23px 0px 18px; align-items: start; gap: 10px;}
.ae-app .workspace-heading h2 {font-size: 18px;}
.ae-app .workspace-heading > div > span {font-size: 10px;}
.ae-app .local-status {font-size: 8px; max-width: 90px; line-height: 1.5;}
.ae-app .local-status svg {width: 13px;}
.ae-app .control-panel {grid-template-columns: 1fr; gap: 14px;}
.ae-app .card-header {padding: 20px;}
.ae-app .card-body {padding: 0px 20px 20px;}
.ae-app .card-header h2 {font-size: 16px;}
.ae-app .card-header p {font-size: 11px;}
.ae-app .form-label {font-size: 12px;}
.ae-app .form-input, .ae-app .form-select {font-size: 16px;}
.ae-app .prompt-textarea {font-size: 16px; line-height: 1.9; min-height: 163px;}
.ae-app .label-row .form-label {font-size: 11px;}
.ae-app .logo-help-text {font-size: 10px;}
.ae-app .btn-upload-label, .ae-app .business-extras summary, .ae-app .syntax-helper summary {font-size: 12px;}
.ae-app .field-help {font-size: 11px;}
.ae-app .preset-chip {font-size: 11px; padding: 7px 10px; min-height: 34px;}
.ae-app .privacy-note {margin: 2px 0px 5px;}
.ae-app .privacy-note p {font-size: 11px;}
.ae-app .preview-panel {padding: 0px 10px 13px; border-radius: 11px;}
.ae-app .preview-format {display: none;}
.ae-app .toolbar-card {padding: 14px 3px;}
.ae-app .invoice-sheet {padding: 23px 15px; min-height: 515px; font-size: 9px;}
.ae-app .inv-top-bar {gap: 12px; min-height: 97px;}
.ae-app .inv-business-title {font-size: 17px;}
.ae-app .inv-main-heading {font-size: 21px;}
.ae-app .inv-details-table {font-size: 8px;}
.ae-app .inv-details-table .label {padding-right: 8px;}
.ae-app .inv-sender-meta {font-size: 8px;}
.ae-app .inv-client-section {padding: 18px 0px; gap: 10px;}
.ae-app .inv-client-details {font-size: 8px; max-width: 170px;}
.ae-app .inv-client-name {font-size: 12px;}
.ae-app .inv-items-table {font-size: 9px;}
.ae-app .inv-items-table th {font-size: 7px; padding: 9px 2px;}
.ae-app .inv-items-table td {padding: 13px 2px;}
.ae-app .col-num {width: 5%;}
.ae-app .col-desc {width: 34%;}
.ae-app .col-qty {width: 10%;}
.ae-app .col-rate {width: 20%;}
.ae-app .col-amt {width: 25%;}
.ae-app .col-actions {width: 6%;}
.ae-app .btn-del-row {padding: 0px 3px; font-size: 18px;}
.ae-app .inv-summary-container {gap: 15px; grid-template-columns: minmax(0px, 1fr) minmax(130px, 1fr); margin: 20px 0px 30px;}
.ae-app .inv-notes-terms {font-size: 8px;}
.ae-app .inv-notes-title {font-size: 7px;}
.ae-app .totals-table {font-size: 9px;}
.ae-app .grand-total-row td {font-size: 13px;}
.ae-app .grand-total-row .t-label {font-size: 9px;}
.ae-app .inv-footer {font-size: 6px; gap: 5px;}
.ae-app .inv-brand-link {font-size: 6px;}
.ae-app .preview-actions {font-size: 8px; gap: 5px;}
.ae-app .preview-actions > div {gap: 3px;}
.ae-app .preview-actions .text-button {font-size: 8px;}
.ae-app .download-bar {padding: 12px;}
.ae-app .download-bar > div:first-child {display: none;}
.ae-app .toolbar-buttons {width: 100%;}
.ae-app .btn {font-size: 12px; padding: 11px 14px;}
.ae-app .btn-primary {flex: 1 1 0%;}
.ae-app .download-caption {font-size: 9px;}
.ae-app .how-section {margin-top: 48px; padding-bottom: 30px;}
.ae-app .section-intro h2 {font-size: 24px;}
.ae-app .section-intro .eyebrow {font-size: 8px;}
.ae-app .steps-grid {grid-template-columns: 1fr; gap: 24px; margin-top: 25px; padding: 0px 10px;}
.ae-app .steps-grid article {position: relative; padding-left: 44px;}
.ae-app .steps-grid article > span {position: absolute; left: 0px; top: 5px;}
.ae-app .steps-grid h3 {margin-top: 4px;}
.ae-app .steps-grid p {font-size: 12px;}
.ae-app .feature-strip {grid-template-columns: 1fr; gap: 21px; padding: 25px;}
.ae-app .feature-strip > div {padding-left: 38px;}
.ae-app .feature-strip svg {position: absolute;}
.ae-app .feature-strip h3 {font-size: 13px;}
.ae-app .feature-strip p {font-size: 11px;}
.ae-app .faq-section {padding: 38px 5px; grid-template-columns: 1fr; gap: 20px;}
.ae-app .faq-section h2 {font-size: 27px;}
.ae-app .faq-section h2 br {display: none;}
.ae-app .faq-section .eyebrow {font-size: 8px;}
.ae-app .faq-list summary {font-size: 12px; min-height: 50px;}
.ae-app .upgrade-note {font-size: 10px; align-items: start; gap: 15px;}
.ae-app .site-footer {padding: 30px 23px 0px;}
.ae-app .footer-inner {flex-wrap: wrap; gap: 25px;}
.ae-app .footer-about {flex-basis: 100%;}
.ae-app .footer-about p {max-width: 100%;}
.ae-app .footer-inner > div:not(:first-child) {min-width: 0px; flex: 1 1 0%;}
.ae-app .footer-bottom {gap: 20px; align-items: start; font-size: 8px;}
.ae-app .page-container {margin: 25px 0px 40px; padding: 24px 20px;}
.ae-app .page-title {font-size: 26px;}
.ae-app .page-subtitle {font-size: 12px;}
.ae-app .page-content {font-size: 13px;}
.ae-app .page-content h2 {font-size: 18px;}
}
@media (prefers-reduced-motion: reduce) {
.ae-app {scroll-behavior: auto;}
.ae-app *, .ae-app ::before, .ae-app ::after {animation: auto ease 0s 1 normal none running none !important; transition: none !important;}
}
.ae-app .pdf-export .inv-top-bar {min-height: 115px; gap: 25px;}
.ae-app .pdf-export .inv-business-title {font-size: 25px;}
.ae-app .pdf-export .inv-main-heading {font-size: 29px;}
.ae-app .pdf-export .inv-sender-meta, .ae-app .pdf-export .inv-client-details, .ae-app .pdf-export .inv-details-table {font-size: 11px;}
.ae-app .pdf-export .inv-client-name {font-size: 15px;}
.ae-app .pdf-export .inv-client-section {padding: 24px 0px;}
.ae-app .pdf-export .inv-section-title {font-size: 10px;}
.ae-app .pdf-export .inv-items-table {font-size: 12px;}
.ae-app .pdf-export .inv-items-table th {font-size: 10px; padding: 12px 6px;}
.ae-app .pdf-export .inv-items-table td {padding: 18px 6px;}
.ae-app .pdf-export .col-num {width: 6%;}
.ae-app .pdf-export .col-desc {width: 39%;}
.ae-app .pdf-export .col-qty {width: 10%;}
.ae-app .pdf-export .col-rate {width: 20%;}
.ae-app .pdf-export .col-amt {width: 25%;}
.ae-app .pdf-export .inv-summary-container {grid-template-columns: 1fr 250px; gap: 35px; margin-top: 30px;}
.ae-app .pdf-export .inv-notes-terms, .ae-app .pdf-export .totals-table {font-size: 11px;}
.ae-app .pdf-export .inv-notes-title {font-size: 9px;}
.ae-app .pdf-export .grand-total-row td {font-size: 17px;}
.ae-app .pdf-export .grand-total-row .t-label {font-size: 12px;}
.ae-app .card-header h2 {font-size: 16px;}
.ae-app .card-header p, .ae-app .field-help, .ae-app .presets-label, .ae-app .logo-help-text {color: rgb(100, 114, 92);}
.ae-app .form-input, .ae-app .form-select {font-size: 13px;}
.ae-app .form-label {font-size: 12px;}
.ae-app .workspace-heading > div > span, .ae-app .steps-grid p, .ae-app .feature-strip p, .ae-app .faq-list p, .ae-app .footer-about p {color: rgb(100, 115, 91);}
.ae-app .hero-copy > p br::after {content: " ";}
@media (max-width: 560px) {
.ae-app .form-input, .ae-app .form-select {font-size: 16px;}
.ae-app .hero-copy > p br {display: initial;}
}
@media screen {
.ae-app {--primary: #143f8f; --primary-hover: #102f6c; --primary-light: #eff4ff; --slate-900: #162744; --slate-800: #203350; --slate-600: #42536b; --slate-500: #526179; --slate-200: #d1dbea;}
.ae-app {background: rgb(245, 247, 252); color: rgb(22, 39, 68); font-size: 15px; line-height: 1.6;}
.ae-app.main-wrapper, .ae-app .header-inner {max-width: 1380px; padding-left: 28px; padding-right: 28px;}
.ae-app .header-inner {padding-top: 10px; padding-bottom: 10px; gap: 24px;}
.ae-app .site-header {border-color: rgb(209, 219, 234);}
.ae-app .site-logo {display: block; width: 250px; height: 63px; object-fit: contain;}
.ae-app .header-free {font-size: 14px; font-weight: 650; color: rgb(36, 67, 35);}
.ae-app .header-inner nav a {font-size: 14px; font-weight: 650; color: rgb(39, 60, 92);}
.ae-app .header-inner nav {gap: 26px;}
.ae-app .workspace-heading {border: 0px; padding: 20px 0px; gap: 16px; flex-wrap: wrap;}
.ae-app .workspace-heading > div {flex: 1 1 0%; min-width: 250px;}
.ae-app .workspace-heading h1 {font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 5px;}
.ae-app .workspace-heading > div > span {font-size: 14px; color: rgb(66, 83, 107); font-weight: 550;}
.ae-app .workspace-heading .local-status {font-size: 13px; color: rgb(38, 75, 49); font-weight: 650; max-width: 260px; line-height: 1.4;}
.ae-app .app-grid {display: block;}
.ae-app .control-panel {display: grid; grid-template-columns: minmax(310px, 0.8fr) minmax(0px, 1.4fr); gap: 22px; align-items: start;}
.ae-app .card {border: 1px solid rgb(201, 213, 231); border-radius: 12px; box-shadow: rgba(33, 52, 93, 0.024) 0px 2px 6px;}
.ae-app .card-header {padding: 18px 20px 14px; gap: 12px;}
.ae-app .card-header h2 {font-size: 19px; font-weight: 700; color: rgb(20, 44, 82); line-height: 1.25;}
.ae-app .card-header p {font-size: 14px; color: rgb(75, 91, 114); font-weight: 500; line-height: 1.5; margin-top: 5px;}
.ae-app .step-number {background: rgb(234, 240, 255); border-color: rgb(196, 211, 240); color: rgb(20, 63, 143); font-size: 14px; font-weight: 700; min-width: 38px; height: 38px;}
.ae-app .card-header > svg {color: rgb(20, 63, 143);}
.ae-app .card-body {padding: 0px 20px 20px;}
.ae-app .form-group {margin-bottom: 14px;}
.ae-app .form-label {font-size: 14px; font-weight: 650; line-height: 1.4; color: rgb(32, 56, 88); margin-bottom: 7px;}
.ae-app .form-input, .ae-app .form-select {font-size: 15px; min-height: 48px; padding: 10px 12px; border: 1px solid rgb(168, 186, 210); background: rgb(255, 255, 255); color: rgb(22, 39, 68); font-weight: 550; border-radius: 7px;}
.ae-app .form-input::placeholder, .ae-app .prompt-textarea::placeholder {color: rgb(82, 97, 121); opacity: 1;}
.ae-app .form-input:focus, .ae-app .form-select:focus, .ae-app .prompt-textarea:focus {outline: rgb(37, 93, 199) solid 3px; outline-offset: 2px;}
.ae-app .business-extras {border-color: rgb(217, 225, 237); padding-top: 10px;}
.ae-app .business-extras summary, .ae-app .syntax-helper summary {font-size: 14px; font-weight: 700; color: rgb(20, 63, 143); min-height: 44px; align-items: center; line-height: 1.5; padding: 8px 0px;}
.ae-app .extra-fields {margin-top: 10px;}
.ae-app .logo-upload-wrapper {border-color: rgb(168, 186, 210); padding: 12px; margin: 6px 0px 16px;}
.ae-app .logo-preview-box {height: 48px; width: 48px; background: rgb(238, 243, 252); color: rgb(20, 63, 143);}
.ae-app .btn-upload-label {font-size: 14px; font-weight: 650; display: block; min-height: 32px; color: rgb(20, 63, 143);}
.ae-app .btn-upload-label > span, .ae-app .logo-help-text {font-size: 13px; color: rgb(82, 97, 121);}
.ae-app .btn-link-danger {font-size: 14px; font-weight: 650; min-height: 36px;}
.ae-app .logo-help-text {line-height: 1.4;}
.ae-app .label-row {align-items: start;}
.ae-app .label-row .form-label {font-size: 14px;}
.ae-app .label-row .text-button {font-size: 14px; min-height: 30px; font-weight: 700;}
.ae-app .text-button {font-size: 14px; min-height: 44px; font-weight: 700; color: rgb(20, 63, 143); padding: 7px;}
.ae-app .prompt-textarea {font-size: 15px; font-weight: 550; line-height: 1.65; min-height: 162px; height: 162px; padding: 14px; border: 1px solid rgb(168, 186, 210); background: rgb(251, 252, 255); color: rgb(22, 39, 68);}
.ae-app .field-help {font-size: 13px; line-height: 1.55; color: rgb(66, 83, 107); margin-top: 8px;}
.ae-app .presets-section {margin-top: 17px;}
.ae-app .presets-label {font-size: 14px; color: rgb(32, 56, 88); font-weight: 650; margin-bottom: 9px;}
.ae-app .preset-chips {gap: 7px;}
.ae-app .preset-chip {min-height: 44px; padding: 9px 12px; font-size: 14px; font-weight: 650; border: 1px solid rgb(168, 186, 210); border-radius: 7px; color: rgb(32, 56, 88); background: white;}
.ae-app .preset-chip:hover {background: rgb(234, 240, 255); border-color: rgb(20, 63, 143);}
.ae-app .preset-chip.active {background: rgb(20, 63, 143); color: rgb(255, 255, 255); border-color: rgb(20, 63, 143); box-shadow: rgba(20, 63, 143, 0.125) 0px 0px 0px 2px;}
.ae-app .syntax-helper {margin-top: 12px;}
.ae-app .syntax-helper p, .ae-app .syntax-helper code, .ae-app .syntax-helper a {font-size: 14px; color: rgb(39, 60, 92);}
.ae-app .syntax-helper code {background: rgb(237, 243, 255); line-height: 1.7; padding: 10px;}
.ae-app .syntax-helper a {color: rgb(20, 63, 143); font-weight: 650;}
.ae-app .tax-rate-control {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;}
.ae-app .tax-rate-control[hidden] {display: none;}
.ae-app .tax-rate-control label {font-size: 14px; font-weight: 650;}
.ae-app .tax-rate-control input {width: 100px; min-height: 44px; border: 1px solid rgb(168, 186, 210); border-radius: 7px; padding: 8px; font-size: 15px; font-weight: 650;}
.ae-app .tax-rate-control > span {font-size: 13px; color: rgb(66, 83, 107);}
.ae-app .privacy-note {display: none;}
.ae-app .preview-panel {max-width: 1050px; margin: 26px auto 0px; padding: 0px 24px 20px; background: rgb(234, 240, 248); border: 1px solid rgb(201, 213, 231); border-radius: 12px;}
.ae-app .toolbar-card {padding: 14px 0px; gap: 15px;}
.ae-app .toolbar-status {font-size: 16px; font-weight: 700; color: rgb(32, 56, 88);}
.ae-app .live-pulse {background: rgb(40, 112, 56); width: 8px; height: 8px;}
.ae-app .preview-format {font-size: 13px; color: rgb(66, 83, 107); font-weight: 550; border-color: rgb(186, 200, 221);}
.ae-app .toolbar-card .text-button {font-size: 14px;}
.ae-app .preview-scroll-help {font-size: 14px; color: rgb(66, 83, 107); margin-bottom: 12px; font-weight: 550;}
.ae-app .invoice-sheet-container {border: 1px solid rgb(202, 213, 229); overflow: auto; background: white; scrollbar-color: rgb(115, 139, 173) rgb(234, 240, 248);}
.ae-app .invoice-sheet-container:focus-visible {outline: rgb(37, 93, 199) solid 3px; outline-offset: 3px;}
.ae-app .invoice-sheet:not(.pdf-export) {min-width: 650px; min-height: 770px; padding: 40px; font-size: 14px; border: 0px; color: rgb(32, 51, 77);}
.ae-app .invoice-sheet:not(.pdf-export) .inv-top-bar {min-height: 150px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-business-title {font-size: 24px; font-weight: 700; color: rgb(22, 61, 122);}
.ae-app .invoice-sheet:not(.pdf-export) .inv-main-heading {font-size: 28px; font-weight: 650; color: rgb(22, 61, 122);}
.ae-app .invoice-sheet:not(.pdf-export) .inv-details-table {font-size: 14px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-sender-meta, .ae-app .invoice-sheet:not(.pdf-export) .inv-client-details {font-size: 14px; color: rgb(70, 87, 113);}
.ae-app .invoice-sheet:not(.pdf-export) .inv-section-title {font-size: 13px; font-weight: 700; color: rgb(70, 87, 113);}
.ae-app .invoice-sheet:not(.pdf-export) .inv-client-name {font-size: 18px; font-weight: 650;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-client-details {max-width: 400px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-client-section {padding: 24px 0px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-payment-terms > div:last-child {font-size: 13px !important; font-weight: 700 !important; color: rgb(105, 85, 23) !important; background: rgb(255, 244, 212) !important; padding: 5px 14px !important;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-items-table {font-size: 14px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-items-table th {font-size: 13px; font-weight: 650; padding: 14px 6px; background: rgb(237, 242, 251); color: rgb(40, 71, 114);}
.ae-app .invoice-sheet:not(.pdf-export) .inv-items-table td {padding: 17px 6px; border-color: rgb(218, 226, 239);}
.ae-app .invoice-sheet:not(.pdf-export) .col-num {color: rgb(82, 97, 121);}
.ae-app .invoice-sheet:not(.pdf-export) .col-desc {width: 34%;}
.ae-app .invoice-sheet:not(.pdf-export) .col-qty {width: 9%;}
.ae-app .invoice-sheet:not(.pdf-export) .col-rate {width: 18%;}
.ae-app .invoice-sheet:not(.pdf-export) .col-amt {width: 26%;}
.ae-app .invoice-sheet:not(.pdf-export) .col-actions {width: 7%;}
.ae-app .btn-del-row {font-size: 22px; min-width: 38px; min-height: 44px; color: rgb(154, 44, 44);}
.ae-app .btn-add-item {font-size: 14px; min-height: 44px; font-weight: 650; color: rgb(20, 63, 143);}
.ae-app .inv-add-row-bar {padding-top: 10px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-summary-container {grid-template-columns: minmax(0px, 1fr) minmax(230px, 0.8fr); gap: 28px; margin: 28px 0px 36px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-notes-terms {font-size: 13px; color: rgb(66, 83, 107);}
.ae-app .invoice-sheet:not(.pdf-export) .inv-notes-title {font-size: 13px; font-weight: 700; color: rgb(66, 83, 107);}
.ae-app .invoice-sheet:not(.pdf-export) .totals-table {font-size: 14px;}
.ae-app .invoice-sheet:not(.pdf-export) .totals-table .t-label {color: rgb(66, 83, 107);}
.ae-app .invoice-sheet:not(.pdf-export) .tax-badge {font-size: 13px; color: rgb(66, 83, 107);}
.ae-app .invoice-sheet:not(.pdf-export) .grand-total-row td {font-size: 20px; font-weight: 700; color: rgb(20, 63, 143);}
.ae-app .invoice-sheet:not(.pdf-export) .grand-total-row .t-label {font-size: 15px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-footer, .ae-app .invoice-sheet:not(.pdf-export) .inv-brand-link {font-size: 12px; color: rgb(82, 97, 121);}
.ae-app .invoice-sheet:not(.pdf-export) .inv-brand-link strong {color: rgb(20, 63, 143); font-weight: 700;}
.ae-app .preview-actions {font-size: 13px; font-weight: 550; color: rgb(66, 83, 107); gap: 16px; flex-wrap: wrap; padding: 12px 0px;}
.ae-app .preview-actions .text-button {font-size: 14px;}
.ae-app .icon-button {min-width: 44px; min-height: 44px; color: rgb(20, 63, 143);}
.ae-app .download-bar {border-color: rgb(196, 210, 230); padding: 18px; gap: 18px; flex-wrap: wrap;}
.ae-app .download-bar > div:first-child {display: grid;}
.ae-app .download-bar strong {font-size: 15px; color: rgb(32, 56, 88); font-weight: 700;}
.ae-app .download-bar span {font-size: 13px; color: rgb(66, 83, 107);}
.ae-app .toolbar-buttons {gap: 10px; flex-wrap: wrap; width: auto;}
.ae-app .btn {min-height: 48px; font-size: 15px; font-weight: 650; padding: 11px 17px; border-radius: 7px; gap: 9px;}
.ae-app .btn-primary {background: rgb(20, 63, 143); color: white;}
.ae-app .btn-secondary {border: 1px solid rgb(168, 186, 210); color: rgb(20, 63, 143); background: white;}
.ae-app .btn-delete {border: 1px solid rgb(199, 146, 146); color: rgb(151, 45, 45); background: white;}
.ae-app .download-caption {font-size: 13px; font-weight: 600; color: rgb(66, 83, 107);}
.ae-app .btn:focus-visible, .ae-app a:focus-visible, .ae-app summary:focus-visible, .ae-app button:focus-visible {outline: rgb(37, 93, 199) solid 3px; outline-offset: 3px;}
.ae-app #historyCount {background: rgb(234, 240, 255); color: rgb(20, 63, 143); padding: 1px 8px; border-radius: 20px; font-size: 14px;}
.ae-app .history-dialog {width: min(850px, 100% - 24px); max-height: 85vh; border: 1px solid rgb(168, 186, 210); border-radius: 14px; padding: 26px; color: rgb(22, 39, 68); box-shadow: rgba(20, 39, 68, 0.25) 0px 18px 60px; font-size: 15px;}
.ae-app .history-dialog::backdrop {background: rgba(16, 43, 82, 0.4);}
.ae-app .history-heading {display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px;}
.ae-app .history-heading h2 {font-size: 22px; font-weight: 700;}
.ae-app .history-dialog > p {margin: 15px 0px; color: rgb(66, 83, 107); line-height: 1.6;}
.ae-app .history-dialog .form-label {margin-top: 20px;}
.ae-app .history-list {margin-top: 18px;}
.ae-app .history-row {display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgb(209, 219, 234); padding: 18px 0px; gap: 18px; overflow-wrap: anywhere;}
.ae-app .history-row > div:first-child {min-width: 0px;}
.ae-app .history-row h3 {font-size: 16px; font-weight: 650;}
.ae-app .history-row p {font-size: 14px; color: rgb(66, 83, 107);}
.ae-app .history-row-actions {display: flex; gap: 8px; flex-shrink: 0;}
.ae-app .history-storage-note {font-size: 14px;}
.ae-app .toast-msg {font-size: 14px; line-height: 1.5; background: rgb(20, 63, 143); max-width: calc(100% - 24px); bottom: 18px; padding: 14px 20px; min-width: 260px;}
.ae-app .how-section {margin-top: 50px;}
.ae-app .section-intro h2, .ae-app .faq-section h2 {font-size: 26px; font-weight: 650; color: rgb(32, 56, 88);}
.ae-app .eyebrow, .ae-app .section-intro .eyebrow, .ae-app .faq-section .eyebrow {font-size: 13px; color: rgb(66, 83, 107); font-weight: 700; letter-spacing: 1px;}
.ae-app .steps-grid h3 {font-size: 18px; font-weight: 650;}
.ae-app .steps-grid p {font-size: 15px; color: rgb(66, 83, 107);}
.ae-app .steps-grid article > span {color: rgb(20, 63, 143); font-weight: 700;}
.ae-app .feature-strip {background: rgb(234, 240, 255); border-color: rgb(201, 213, 231);}
.ae-app .feature-strip h3 {font-size: 15px; font-weight: 650;}
.ae-app .feature-strip p {font-size: 14px; color: rgb(66, 83, 107);}
.ae-app .feature-strip svg {color: rgb(20, 63, 143);}
.ae-app .faq-list summary {font-size: 15px; font-weight: 650; padding-top: 20px; padding-bottom: 20px; color: rgb(32, 56, 88);}
.ae-app .faq-list p {font-size: 15px; color: rgb(66, 83, 107);}
.ae-app .faq-section > div > a {font-size: 15px; font-weight: 700; color: rgb(20, 63, 143);}
.ae-app .faq-list details {border-color: rgb(201, 213, 231);}
.ae-app .upgrade-note, .ae-app .upgrade-note a {font-size: 14px; color: rgb(66, 83, 107);}
.ae-app .footer-inner h4 {font-size: 15px;}
.ae-app .footer-about p, .ae-app .footer-inner > div > a:not(.brand-container) {font-size: 14px; color: rgb(66, 83, 107);}
.ae-app .footer-bottom {font-size: 13px; color: rgb(66, 83, 107);}
.ae-app .footer-inner > div:not(:first-child) {min-width: 180px;}
.ae-app .page-container {max-width: 950px; border-color: rgb(201, 213, 231);}
.ae-app .page-content {font-size: 15px; color: rgb(40, 59, 85);}
.ae-app .page-title {font-size: 28px; font-weight: 700; color: rgb(22, 39, 68);}
.ae-app .page-subtitle {font-size: 14px; color: rgb(66, 83, 107);}
.ae-app .page-content h2 {font-size: 22px; font-weight: 650;}
.ae-app .page-content h3 {font-size: 18px;}
.ae-app .page-content div[style*="font-family: monospace"] {font-size: 14px !important;}
.ae-app .brand-feature {max-width: 720px; margin: 10px auto 42px;}
.ae-app .brand-feature img {display: block; width: 100%; height: auto; border: 1px solid rgb(201, 213, 231); border-radius: 10px;}
.ae-app .brand-feature figcaption {font-size: 14px; color: rgb(66, 83, 107); text-align: center; margin-top: 10px;}
@media (max-width: 1100px) {
.ae-app .control-panel {grid-template-columns: minmax(280px, 0.8fr) minmax(0px, 1.2fr);}
.ae-app .header-free {display: none;}
.ae-app .workspace-heading .local-status {flex-basis: 100%; max-width: none;}
.ae-app .download-bar > div:first-child {display: none;}
.ae-app .toolbar-buttons {width: 100%;}
.ae-app .steps-grid {gap: 25px;}
.ae-app .faq-section {gap: 30px;}
.ae-app .feature-strip {grid-template-columns: 1fr; gap: 20px;}
.ae-app .feature-strip > div {padding-left: 42px;}
.ae-app .feature-strip svg {position: absolute;}
.ae-app .footer-inner {flex-wrap: wrap;}
.ae-app .footer-about {flex-basis: 100%;}
}
@media (max-width: 760px) {
.ae-app .header-inner, .ae-app.main-wrapper {padding-left: 16px; padding-right: 16px;}
.ae-app .header-inner nav {display: none;}
.ae-app .header-inner {justify-content: center;}
.ae-app .site-logo {width: 230px; height: auto;}
.ae-app .workspace-heading {padding: 14px 0px; gap: 10px; align-items: center;}
.ae-app .workspace-heading > div {min-width: 100%; flex-basis: 100%;}
.ae-app .workspace-heading h1 {font-size: 22px;}
.ae-app .workspace-heading > div > span {font-size: 14px;}
.ae-app .workspace-heading .local-status {font-size: 13px; flex: 1 1 0%; min-width: 100px;}
.ae-app .workspace-heading .btn {font-size: 14px; min-height: 44px; padding: 8px 12px;}
.ae-app .control-panel {grid-template-columns: 1fr; gap: 14px;}
.ae-app .card-header {padding: 14px 14px 10px;}
.ae-app .card-header h2 {font-size: 18px;}
.ae-app .card-header p {display: none;}
.ae-app .step-number {min-width: 32px; width: 32px; height: 32px; font-size: 14px;}
.ae-app .card-body {padding: 0px 14px 14px;}
.ae-app .control-panel > .card:first-child .card-body {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.ae-app .control-panel > .card:first-child .form-group {margin-bottom: 0px;}
.ae-app .control-panel > .card:first-child .business-extras {grid-column: 1 / -1;}
.ae-app .form-label {font-size: 14px;}
.ae-app .form-input, .ae-app .form-select {font-size: 15px; padding: 8px; min-height: 44px;}
.ae-app .business-extras {padding-top: 0px;}
.ae-app .business-extras summary {font-size: 14px; padding: 6px 0px; min-height: 38px;}
.ae-app .extra-fields .form-group {margin-bottom: 14px !important;}
.ae-app .label-row .form-label {font-size: 14px;}
.ae-app .prompt-textarea {font-size: 15px; line-height: 1.7; height: 142px; min-height: 142px; padding: 10px;}
.ae-app .preset-chip {font-size: 14px; padding: 8px 10px;}
.ae-app .presets-label {font-size: 14px;}
.ae-app .field-help {font-size: 13px;}
.ae-app .preview-panel {padding: 0px 12px 16px; margin-top: 20px;}
.ae-app .toolbar-status {font-size: 15px;}
.ae-app .toolbar-card .text-button {font-size: 14px;}
.ae-app .preview-format {display: none;}
.ae-app .preview-scroll-help {font-size: 13px;}
.ae-app .invoice-sheet:not(.pdf-export) {padding: 28px; min-height: 720px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-top-bar {min-height: 145px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-items-table {font-size: 14px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-business-title {font-size: 22px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-main-heading {font-size: 25px;}
.ae-app .preview-actions {font-size: 13px; gap: 4px;}
.ae-app .preview-actions .text-button {font-size: 13px;}
.ae-app .btn {font-size: 14px; min-height: 46px; padding: 10px 12px;}
.ae-app .toolbar-buttons {display: grid; grid-template-columns: 1fr 1fr; width: 100%;}
.ae-app .toolbar-buttons .btn-primary {grid-column: 1 / -1;}
.ae-app .download-caption {font-size: 13px;}
.ae-app .download-bar {padding: 12px;}
.ae-app .history-dialog {padding: 18px;}
.ae-app .history-heading h2 {font-size: 19px;}
.ae-app .history-row {flex-wrap: wrap; gap: 12px;}
.ae-app .history-row-actions {width: 100%;}
.ae-app .history-row-actions .btn {flex: 1 1 0%;}
.ae-app .history-row p {font-size: 14px;}
.ae-app .how-section {margin-top: 38px;}
.ae-app .section-intro h2, .ae-app .faq-section h2 {font-size: 24px;}
.ae-app .steps-grid {grid-template-columns: 1fr; padding: 0px 8px; gap: 25px;}
.ae-app .steps-grid h3 {font-size: 18px;}
.ae-app .steps-grid p {font-size: 14px;}
.ae-app .feature-strip p {font-size: 14px;}
.ae-app .faq-section {grid-template-columns: 1fr; padding: 35px 4px; gap: 18px;}
.ae-app .faq-list summary {font-size: 15px;}
.ae-app .faq-list p {font-size: 14px;}
.ae-app .upgrade-note {flex-wrap: wrap; gap: 8px; font-size: 14px; justify-content: start;}
.ae-app .footer-inner > div:not(:first-child) {min-width: 0px;}
.ae-app .footer-about p, .ae-app .footer-inner > div > a:not(.brand-container) {font-size: 14px;}
.ae-app .footer-bottom {font-size: 13px; flex-direction: column; gap: 8px;}
.ae-app .page-container {padding: 24px 18px;}
.ae-app .page-content {font-size: 15px;}
.ae-app .page-content h2 {font-size: 19px;}
.ae-app .page-content h3 {font-size: 18px;}
.ae-app .page-title {font-size: 25px;}
.ae-app .brand-feature {margin: 0px auto 30px;}
.ae-app .eyebrow, .ae-app .section-intro .eyebrow, .ae-app .faq-section .eyebrow {font-size: 12px; letter-spacing: 0.5px;}
.ae-app .brand-feature figcaption {font-size: 13px;}
}
@media (prefers-contrast: more) {
.ae-app {color: rgb(0, 0, 0);}
.ae-app .card, .ae-app .form-input, .ae-app .form-select, .ae-app .prompt-textarea, .ae-app .preset-chip {border-color: rgb(23, 43, 77);}
.ae-app .field-help, .ae-app .card-header p, .ae-app .form-label {color: rgb(23, 43, 77);}
}
}
@media screen {
.ae-app .header-inner {padding-top: 9px; padding-bottom: 9px;}
.ae-app .site-logo {width: 210px; height: auto;}
.ae-app .header-inner nav a {font-size: 14px; font-weight: 600;}
.ae-app .header-free {font-size: 13px;}
.ae-app .workspace-heading {padding: 17px 0px; gap: 15px;}
.ae-app .workspace-heading h1 {font-size: 24px;}
.ae-app .workspace-heading > div > span {font-size: 14px;}
.ae-app .workspace-heading .local-status {font-size: 13px; flex-basis: auto; max-width: 260px;}
.ae-app .app-grid {display: grid; grid-template-columns: 360px minmax(0px, 1fr); gap: 24px; align-items: start;}
.ae-app .control-panel {display: grid; grid-template-columns: 1fr; gap: 16px;}
.ae-app .preview-panel {margin: 0px; padding: 0px 18px 16px; width: 100%; max-width: none;}
.ae-app .card-header {padding: 16px 17px 12px;}
.ae-app .card-header h2 {font-size: 18px; font-weight: 700;}
.ae-app .card-header p {font-size: 13px;}
.ae-app .card-body {padding: 0px 17px 17px;}
.ae-app .step-number {font-size: 13px; min-width: 32px; width: 32px; height: 32px;}
.ae-app .form-label, .ae-app .label-row .form-label {font-size: 14px; font-weight: 650;}
.ae-app .form-input, .ae-app .form-select {font-size: 15px; min-height: 43px; padding: 9px 11px; font-weight: 500;}
.ae-app .form-group {margin-bottom: 12px;}
.ae-app .field-help {font-size: 13px; line-height: 1.5;}
.ae-app .business-extras summary, .ae-app .syntax-helper summary {font-size: 14px; min-height: 38px; font-weight: 600;}
.ae-app .business-extras {padding-top: 4px;}
.ae-app .prompt-textarea {font-size: 15px; font-weight: 500; line-height: 1.8; height: 150px; min-height: 150px; padding: 11px;}
.ae-app .card-header > svg {width: 18px;}
.ae-app .presets-section {margin-top: 14px;}
.ae-app .presets-label {font-size: 14px;}
.ae-app .preset-chips {gap: 6px;}
.ae-app .preset-chip {font-size: 13px; font-weight: 650; padding: 7px 9px; min-height: 36px;}
.ae-app .syntax-helper {margin-top: 8px;}
.ae-app .tax-rate-control {gap: 8px;}
.ae-app .tax-rate-control label, .ae-app .tax-rate-control > span {font-size: 13px;}
.ae-app .tax-rate-control input {min-height: 40px; font-size: 15px; width: 83px;}
.ae-app .toolbar-card {padding: 12px 0px; gap: 10px;}
.ae-app .toolbar-status {font-size: 16px;}
.ae-app .toolbar-card .text-button {font-size: 14px;}
.ae-app .preview-format {font-size: 12px;}
.ae-app .preview-scroll-help {font-size: 13px; margin-bottom: 10px;}
.ae-app .text-button {font-size: 14px; min-height: 38px;}
.ae-app .label-row .text-button {font-size: 13px;}
.ae-app .btn {font-size: 14px; font-weight: 650; min-height: 42px; padding: 9px 13px;}
.ae-app .workspace-heading .btn {font-size: 14px;}
.ae-app .download-bar {padding: 12px; gap: 10px;}
.ae-app .download-bar > div:first-child {display: none;}
.ae-app .toolbar-buttons {display: flex; flex-wrap: wrap; gap: 8px; width: 100%;}
.ae-app .toolbar-buttons .btn-primary {flex: 1 1 0%;}
.ae-app .download-caption {font-size: 12px;}
.ae-app .preview-actions, .ae-app .preview-actions .text-button {font-size: 13px;}
.ae-app .invoice-sheet:not(.pdf-export) {min-width: 550px; min-height: 670px; padding: 28px; font-size: 14px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-top-bar {min-height: 120px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-business-title {font-size: 24px; font-weight: 700;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-main-heading {font-size: 27px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-details-table, .ae-app .invoice-sheet:not(.pdf-export) .inv-sender-meta, .ae-app .invoice-sheet:not(.pdf-export) .inv-client-details {font-size: 12px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-section-title {font-size: 11px; letter-spacing: 0.8px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-client-name {font-size: 17px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-client-section {padding: 20px 0px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-payment-terms > div:last-child {font-size: 12px !important;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-items-table {font-size: 13px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-items-table th {font-size: 12px; padding: 12px 4px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-items-table td {padding: 14px 4px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-summary-container {grid-template-columns: minmax(0px, 1fr) minmax(180px, 0.85fr); gap: 22px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-notes-terms {font-size: 12px;}
.ae-app .invoice-sheet:not(.pdf-export) .inv-notes-title {font-size: 11px;}
.ae-app .invoice-sheet:not(.pdf-export) .totals-table {font-size: 13px;}
.ae-app .invoice-sheet:not(.pdf-export) .grand-total-row td {font-size: 21px;}
.ae-app .invoice-sheet:not(.pdf-export) .grand-total-row .t-label {font-size: 15px;}
.ae-app .btn-add-item {font-size: 14px;}
.ae-app .btn-del-row {font-size: 22px; min-width: 30px; min-height: 36px;}
.ae-app .invoice-sheet:not(.pdf-export) .invoice-branding {justify-content: center; flex-wrap: wrap; gap: 5px 18px; margin-top: auto; padding: 14px 6px 0px; border-top: 1px solid rgb(209, 219, 234); font-size: 11px; color: rgb(82, 97, 121);}
.ae-app .invoice-branding a {color: rgb(20, 63, 143);}
.ae-app .invoice-branding strong {font-weight: 700;}
@media (min-width: 1101px) and (max-width: 1250px) {
.ae-app .app-grid {grid-template-columns: 330px minmax(0px, 1fr); gap: 18px;}
.ae-app .preview-panel {padding-left: 13px; padding-right: 13px;}
}
@media (max-width: 1100px) {
.ae-app .app-grid {grid-template-columns: 1fr;}
.ae-app .control-panel {grid-template-columns: 1fr 1fr; align-items: start;}
.ae-app .preview-panel {max-width: 900px; margin: 0px auto;}
.ae-app .workspace-heading .local-status {max-width: none;}
.ae-app .invoice-sheet:not(.pdf-export) {min-height: 690px;}
.ae-app .header-free {display: none;}
}
@media (max-width: 760px) {
.ae-app .control-panel {grid-template-columns: 1fr;}
.ae-app .app-grid {gap: 17px;}
.ae-app .header-inner {justify-content: space-between;}
.ae-app .workspace-heading {padding: 14px 0px; gap: 9px;}
.ae-app .workspace-heading > div {min-width: 100%;}
.ae-app .workspace-heading .btn {font-size: 13px; min-height: 40px;}
.ae-app .workspace-heading .local-status {font-size: 12px; min-width: 100px;}
.ae-app .card-header {padding: 13px 14px 10px;}
.ae-app .card-body {padding: 0px 14px 14px;}
.ae-app .card-header h2 {font-size: 18px;}
.ae-app .form-input, .ae-app .form-select, .ae-app .prompt-textarea {font-size: 16px;}
.ae-app .form-label {font-size: 13px;}
.ae-app .control-panel > .card:first-child .card-body {grid-template-columns: 1fr 1fr; gap: 9px;}
.ae-app .control-panel > .card:first-child .business-extras {grid-column: 1 / -1;}
.ae-app .control-panel > .card:first-child .field-help {font-size: 12px;}
.ae-app .prompt-textarea {height: 142px; min-height: 142px;}
.ae-app .preset-chip {font-size: 13px; min-height: 38px;}
.ae-app .preview-panel {padding: 0px 10px 14px;}
.ae-app .invoice-sheet:not(.pdf-export) {min-height: 630px;}
.ae-app .toolbar-status {font-size: 15px;}
.ae-app .toolbar-card .text-button {font-size: 13px;}
.ae-app .preview-scroll-help {font-size: 12px;}
.ae-app .toolbar-buttons {display: flex;}
.ae-app .toolbar-buttons .btn {font-size: 13px; padding: 9px;}
.ae-app .history-dialog {font-size: 15px;}
.ae-app .history-heading h2 {font-size: 22px;}
.ae-app .history-row h3 {font-size: 17px;}
}
}
@media screen {
.ae-app .builder-section {margin-top: 0px; padding-top: 0px;}
.ae-app.main-wrapper {padding-top: 0px;}
.ae-app .card-header h1 {font-size: 18px; font-weight: 700; line-height: 1.4; color: rgb(32, 56, 88); margin: 0px; letter-spacing: normal;}
.ae-app .workspace-actions {display: flex; gap: 14px; align-items: center; flex-wrap: wrap;}
.ae-app .toolbar-card {flex-wrap: wrap;}
.ae-app .preview-format {display: none;}
.ae-app .business-save-note {grid-column: 1 / -1; margin-top: 8px;}
.ae-app .heading-control {display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}
.ae-app .heading-control .form-label {margin: 0px; flex: 1 1 0%;}
.ae-app .heading-control .form-select {width: 155px;}
.ae-app .preview-actions > div {flex-wrap: wrap;}
.ae-app .inv-main-heading {text-transform: uppercase; overflow-wrap: anywhere; letter-spacing: 1px;}
.ae-app .shipping-preview {margin: 20px 0px; border: 1px solid rgb(201, 213, 231); border-radius: 8px;}
.ae-app .shipping-slip {padding: 22px;}
.ae-app #shippingSheet {display: none;}
.ae-app #shippingForm .form-label {margin-top: 14px;}
.ae-app #shippingForm textarea {resize: vertical;}
}
.ae-app .shipping-slip {color: rgb(32, 56, 88); background: white; overflow-wrap: anywhere; font: 15px / 1.6 Arial, sans-serif;}
.ae-app .shipping-slip header {display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid rgb(20, 63, 143); padding-bottom: 16px;}
.ae-app .shipping-slip h2 {font-size: 26px; margin: 0px; color: rgb(20, 63, 143);}
.ae-app .shipping-slip h3 {font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin: 0px 0px 8px; color: rgb(82, 97, 121);}
.ae-app .shipping-slip p {margin: 3px 0px; white-space: pre-line;}
.ae-app .shipping-addresses {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 0px;}
.ae-app .shipping-slip table {width: 100%; border-collapse: collapse; table-layout: fixed;}
.ae-app .shipping-slip th, .ae-app .shipping-slip td {text-align: left; padding: 10px; border-bottom: 1px solid rgb(209, 219, 234);}
.ae-app .shipping-slip th {background: rgb(237, 242, 251);}
.ae-app .shipping-slip th:last-child, .ae-app .shipping-slip td:last-child {width: 90px; text-align: right;}
.ae-app .shipping-slip footer {text-align: center; border-top: 1px solid rgb(209, 219, 234); margin-top: 36px; padding-top: 16px; font-size: 11px;}
.ae-app .shipping-slip a {color: rgb(20, 63, 143);}
@media screen and (max-width: 760px) {
.ae-app .workspace-actions {gap: 12px;}
.ae-app .shipping-slip {font-size: 13px; padding: 14px;}
.ae-app .shipping-slip h2 {font-size: 21px;}
.ae-app .shipping-slip header {flex-wrap: wrap; gap: 8px;}
.ae-app .shipping-addresses {grid-template-columns: 1fr; gap: 18px;}
.ae-app .preview-actions > div {gap: 12px;}
}
.ae-app #invClientDetails, .ae-app #invSenderAddress, .ae-app #invNotes, .ae-app #invTerms {white-space: pre-line;}
/* UAE page navigation, document fields, and AED VAT columns. */
.ae-app.main-wrapper { max-width:1440px; padding:0 28px 48px; }
.ae-app .uae-nav { display:flex; gap:8px; flex-wrap:wrap; padding:20px 0; border-bottom:1px solid #d1dbea; }
.ae-app .uae-nav a { font-size:13px; padding:8px 12px; border-radius:6px; color:#264367; }
.ae-app .uae-nav a[aria-current] { background:#163e79; color:white; font-weight:700; }
.ae-app .uae-intro { padding:27px 0; max-width:850px; }
.ae-app .uae-eyebrow { color:#345c95; letter-spacing:.08em; font-size:11px; font-weight:750; margin-bottom:9px; }
.ae-app .uae-intro h1 { font-size:clamp(25px,3vw,35px); line-height:1.2; letter-spacing:-.035em; margin-bottom:12px; }
.ae-app .uae-intro>p:last-child { color:#526179; font-size:15px; line-height:1.7; }
.ae-app .uae-currency { color:#36567b; font-size:13px; background:#edf3fc; padding:10px; border-radius:6px; margin-bottom:12px; }
.ae-app .uae-guide { display:grid; grid-template-columns:1fr 1fr; gap:45px; padding:35px; margin:45px 0 30px; border:1px solid #d1dbea; border-radius:12px; background:white; }
.ae-app .uae-guide h2,.ae-app .uae-faq h2,.ae-app .uae-related h2 { font-size:24px; line-height:1.3; margin-bottom:15px; }
.ae-app .uae-guide p,.ae-app .uae-guide li { color:#526179; font-size:14px; line-height:1.85; }
.ae-app .uae-guide ol { padding-left:20px; }.ae-app .uae-guide li+li { margin-top:16px; }
.ae-app .uae-faq { max-width:1000px; margin:35px auto; }.ae-app .uae-faq details { border-bottom:1px solid #d1dbea; padding:17px 0; }
.ae-app .uae-faq summary { font-size:15px; font-weight:650; cursor:pointer; }.ae-app .uae-faq p { font-size:14px; color:#526179; line-height:1.8; padding-top:12px; }
.ae-app .uae-faq a { text-decoration:underline; }.ae-app .uae-related { padding-top:30px; border-top:1px solid #d1dbea; }
.ae-app .uae-related>div { display:flex; flex-wrap:wrap; gap:15px 30px; }.ae-app .uae-related a { font-size:14px; }
.ae-app .uae-document-details { font-size:11px; white-space:pre-line; line-height:1.7; padding-bottom:12px; color:#334a66; }
.ae-app .uae-treatment { font-size:11px; padding:9px 0; color:#334a66; border-top:1px solid #d1dbea; }
.ae-app .uae-confirm { display:flex; gap:10px; font-size:13px; align-items:flex-start; line-height:1.6; }.ae-app .uae-confirm input { margin-top:4px; width:18px; height:18px; flex-shrink:0; }
.ae-app .uae-validation { background:#fff2eb; color:#903a13; padding:15px; border:1px solid #eac2a9; border-radius:8px; margin:10px 0; font-size:14px; }
.ae-app .invoice-sheet:not(.pdf-export) { min-width:700px; }
.ae-app .invoice-sheet .inv-items-table { table-layout:fixed; }
.ae-app .invoice-sheet .col-num { width:4%; }.ae-app .invoice-sheet .col-desc { width:27%; }.ae-app .invoice-sheet .col-qty { width:7%; }
.ae-app .invoice-sheet .col-rate { width:15%; }.ae-app .invoice-sheet .col-amt { width:17%; }.ae-app .invoice-sheet .col-vat-rate { width:9%; text-align:right; }.ae-app .invoice-sheet .col-vat { width:17%; text-align:right; }.ae-app .invoice-sheet .col-actions { width:4%; }
.ae-app .invoice-sheet .inv-items-table td { overflow-wrap:anywhere; }.ae-app .invoice-sheet .inv-client-section { flex-wrap:wrap; }
.ae-app .invoice-sheet .inv-main-heading { font-size:25px; }
.ae-app .invoice-sheet .inv-items-table th { font-size:10px; }.ae-app .invoice-sheet .inv-items-table td { font-size:11px; }
.ae-app .invoice-sheet .discount-row { color:#526179; }
.ae-app .invoice-sheet.pdf-export { width:718px!important; min-width:718px!important; }
.ae-app .invoice-sheet.pdf-export .inv-items-table th { font-size:9px; }.ae-app .invoice-sheet.pdf-export .inv-items-table td { font-size:10px; padding:12px 4px; }
.ae-app .invoice-sheet.pdf-export .col-actions { display:none!important; }
.ae-app .invoice-sheet .inv-sender-meta,.ae-app .invoice-sheet .inv-client-details,.ae-app .invoice-sheet .inv-notes-terms { color:#42536b; }
@media (min-width:1101px) { .ae-app .app-grid { grid-template-columns:345px minmax(0,1fr); } }
@media (max-width:1100px) { .ae-app .control-panel { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .ae-app.main-wrapper { padding:0 16px 35px; }.ae-app .uae-guide { grid-template-columns:1fr; gap:24px; padding:24px; }.ae-app .control-panel { grid-template-columns:1fr; }.ae-app .uae-nav { gap:4px; }.ae-app .uae-nav a { font-size:12px; padding:8px; }.ae-app .uae-intro { padding:22px 0; }.ae-app .privacy-note { grid-column:auto; }.ae-app .toolbar-buttons { flex-wrap:wrap; } }
@media print { .ae-app.main-wrapper { padding:0!important; }.ae-overlays { display:none!important; }.ae-app .uae-document-details,.ae-app .uae-treatment { font-size:9pt; } }