:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --ink: #1d2633;
    --muted: #627084;
    --brand: #0f8b8d;
    --brand-dark: #0b6264;
    --line: #d9e1ea;
    --warn: #b54708;
    --danger: #b42318;
    --btn-info: #2563eb;
    --btn-print: #4f46e5;
    --btn-payment: #0f766e;
    --btn-success: #138a4c;
    --btn-new-sale: #138a4c;
    --btn-new-quote: #2563eb;
    --btn-new-product: #0f766e;
    --metric-green: #138a4c;
    --metric-blue: #2563eb;
    --metric-purple: #4f46e5;
    --metric-orange: #b94700;
    --sidebar-bg: #17212f;
    --sidebar-active: #22344a;
    --module-1: #138a4c;
    --module-2: #0f766e;
    --module-3: #2563eb;
    --module-4: #d65f00;
    --module-5: #4f46e5;
    --module-6: #2563eb;
    --module-7: #138a4c;
    --module-8: #0f766e;
    --module-9: #4f46e5;
    --module-10: #b42318;
    --module-11: #2563eb;
    --module-12: #2563eb;
    --module-13: #2563eb;
    --module-14: #2563eb;
    --module-15: #2563eb;
    --module-16: #2563eb;
    --module-17: #2563eb;
    --module-18: #b42318;
}

.email-button { background: #7c3aed; color: #fff; }
.email-settings-grid,
.email-compose-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 14px;
    align-items: start;
}
.smtp-test-panel form,
.email-compose-form { display: grid; gap: 12px; }
.smtp-test-panel form button { width: max-content; }
.smtp-guidance { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border, #d8e0e8); }
.smtp-guidance p { margin-bottom: 0; color: var(--muted, #526173); }
.email-compose-form textarea { min-height: 250px; resize: vertical; }
.email-attachment {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border, #d8e0e8);
    border-left: 4px solid #7c3aed;
    border-radius: 6px;
    background: var(--panel-soft, #f7f9fc);
}
.email-document-summary dl { display: grid; grid-template-columns: 90px 1fr; gap: 10px; margin: 16px 0 20px; }
.email-document-summary dt { color: var(--muted, #526173); }
.email-document-summary dd { margin: 0; font-weight: 700; }
body.theme-dark .email-attachment { background: #111827; border-color: var(--line); }
button:disabled { opacity: .55; cursor: not-allowed; }
.settings-subnav {
    display: flex;
    gap: 4px;
    margin: 0 0 14px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    scrollbar-width: thin;
}
.settings-subnav a {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 5px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.settings-subnav a:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.settings-subnav a.active { background: var(--brand); color: #fff; }
.settings-intro { margin-bottom: 12px; }
.settings-intro h2 { margin-bottom: 4px; }
.settings-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.settings-overview a {
    min-height: 108px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 7px;
    background: var(--panel);
    color: var(--ink);
    text-decoration: none;
}
.settings-overview a:hover { border-color: var(--brand); box-shadow: 0 5px 16px rgba(15, 23, 42, .08); }
.settings-overview strong { font-size: 16px; }
.settings-overview span { color: var(--muted); line-height: 1.4; }
@media (max-width: 860px) {
    .email-settings-grid,
    .email-compose-layout { grid-template-columns: 1fr; }
    .email-attachment { flex-direction: column; }
    .settings-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .settings-subnav { margin-inline: -4px; }
    .settings-overview { grid-template-columns: 1fr; }
    .settings-overview a { min-height: 88px; }
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: var(--bg);
}
body.theme-dark {
    --bg: #111827;
    --panel: #1f2937;
    --ink: #f3f4f6;
    --muted: #cbd5e1;
    --line: #475569;
    --brand-dark: #5eead4;
}
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #111827;
    color: var(--ink);
    color-scheme: dark;
}
body.theme-dark .desktop-module-menu a,
body.theme-dark .product-search-results,
body.theme-dark .filter-tabs a,
body.theme-dark .modal {
    background: var(--panel);
    color: var(--ink);
}
body.theme-dark .product-result,
body.theme-dark .image-preview,
body.theme-dark .thumb,
body.theme-dark .color-group,
body.theme-dark .notice,
body.theme-dark .checkbox-grid,
body.theme-dark .checklist {
    background: #273449;
}
body.theme-dark .product-result:hover { background: #334155; }
body.theme-dark .whatsapp-actions { background: #173a39; border-color: #28645f; }
body.theme-dark .alert { background: #173a39; border-color: #28645f; }
body.theme-dark .alert.danger { background: #4c1d1d; border-color: #7f1d1d; }
body.theme-dark .success-notice { background: #123c2c; border-color: #237a57; color: #a7f3d0; }
body.theme-dark .payment-pending-notice { background: #4a2c16; border-color: #9a5b24; color: #fed7aa; }
body.theme-dark .bar-row div { background: #334155; }
a { color: var(--brand-dark); text-decoration: none; }
input, select, textarea, button {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit;
}
textarea { min-height: 90px; }
button, .button {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 6px;
    line-height: 1.2;
    white-space: nowrap;
}
table .button, table button { min-height: 34px; padding: 8px 12px; }
button.secondary, .button.secondary {
    background: #475569;
    border-color: #475569;
    color: #fff;
}
button.secondary:hover, .button.secondary:hover {
    background: #334155;
    border-color: #334155;
    color: #fff;
}
button.info, .button.info {
    background: var(--btn-info);
    border-color: var(--btn-info);
    color: #fff;
}
button.print, .button.print {
    background: var(--btn-print);
    border-color: var(--btn-print);
    color: #fff;
}
button.payment, .button.payment {
    background: var(--btn-payment);
    border-color: var(--btn-payment);
    color: #fff;
}
button.danger, .button.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
button.warning, .button.warning {
    background: var(--warn);
    border-color: var(--warn);
    color: #fff;
}
button.success, .button.success {
    background: var(--btn-success);
    border-color: var(--btn-success);
    color: #fff;
}
button.new-sale, .button.new-sale {
    background: var(--btn-new-sale);
    border-color: var(--btn-new-sale);
    color: #fff;
}
button.new-quote, .button.new-quote {
    background: var(--btn-new-quote);
    border-color: var(--btn-new-quote);
    color: #fff;
}
button.new-product, .button.new-product {
    background: var(--btn-new-product);
    border-color: var(--btn-new-product);
    color: #fff;
}
label { display: grid; gap: 6px; font-weight: 700; color: var(--muted); }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 13px; }
.compact-table th, .compact-table td { padding: 8px 10px; }
.compact-table strong { color: var(--ink); }
.install, .login { min-height: 100vh; display: grid; place-items: center; }
.install-box, .login-box {
    width: min(760px, calc(100vw - 32px));
    background: var(--panel);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.login-box { max-width: 420px; }
.grid-form, .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-form button, .full { grid-column: 1 / -1; }
.app { display: grid; grid-template-columns: 74px minmax(0, 1fr); min-height: 100vh; }
.mobile-header, .mobile-menu-toggle, .mobile-menu-overlay { display: none; }
.sidebar { background: var(--sidebar-bg); color: #fff; padding: 12px 9px; }
.brand {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 58px;
    overflow: hidden;
    text-align: center;
}
.brand-logo {
    display: block;
    width: 100%;
    max-width: 54px;
    height: 48px;
    object-fit: contain;
    object-position: center;
}
.sidebar-actions {
    display: none;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: -4px 0 18px;
    padding: 0 2px;
}
.sidebar-actions .button {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}
.sidebar-desktop-toggle {
    width: 100%;
    min-height: 42px;
    padding: 0;
    margin: 0 0 12px;
    border-radius: 8px;
    background: var(--sidebar-active);
    border-color: var(--sidebar-active);
    color: #fff;
    display: grid;
    place-items: center;
}
.sidebar-desktop-toggle .toggle-icon {
    font-size: 20px;
    line-height: 1;
}
.sidebar-desktop-toggle .toggle-text {
    display: none;
}
.sidebar nav { display: grid; gap: 6px; }
.sidebar a {
    color: #dbe7f3;
    min-height: 48px;
    padding: 0;
    border-radius: 8px;
    display: grid;
    align-items: center;
    justify-items: center;
    gap: 0;
}
.sidebar a img { width: 22px; height: 22px; flex: 0 0 22px; }
.sidebar a span { display: none; }
.sidebar a.active, .sidebar a:hover { background: var(--sidebar-active); color: #fff; }
body.sidebar-expanded .app { grid-template-columns: 250px minmax(0, 1fr); }
body.sidebar-expanded .sidebar { padding: 20px; }
body.sidebar-expanded .brand {
    min-height: 96px;
    margin-bottom: 12px;
}
body.sidebar-expanded .brand-logo {
    max-width: 200px;
    height: 90px;
}
body.sidebar-expanded .sidebar-desktop-toggle {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
}
body.sidebar-expanded .sidebar-desktop-toggle .toggle-text {
    display: inline;
}
body.sidebar-expanded .sidebar-actions {
    display: grid;
}
body.sidebar-expanded .sidebar a {
    min-height: auto;
    padding: 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-items: start;
    gap: 10px;
}
body.sidebar-expanded .sidebar a img {
    width: 18px;
    height: 18px;
}
body.sidebar-expanded .sidebar a span {
    display: inline;
}
.content { padding: 24px; }
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-bottom: 12px; gap: 12px; }
.topbar h1 { margin: 0; }
.topbar-search-panel { padding: 16px; margin-bottom: 14px; }
.topbar-search-panel h2 { margin: 0 0 14px; }
.topbar-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 144px;
    gap: 10px;
    align-items: end;
}
.topbar-search input { min-width: 0; }
.topbar-search button { width: 100%; min-width: 0; }
.topbar-brand {
    display: none;
    justify-content: center;
    align-items: center;
    min-width: 160px;
}
.topbar-brand img {
    display: block;
    max-width: 190px;
    height: 58px;
    object-fit: contain;
}
.topbar-user {
    display: grid;
    gap: 3px;
    justify-items: end;
    text-align: right;
    color: var(--muted);
    font-size: 13px;
}
.topbar-user strong {
    color: var(--ink);
    font-size: 14px;
}
.topbar-account {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.theme-toggle,
.notification-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 50%;
    background: var(--panel);
    border-color: var(--line);
    color: var(--ink);
    font-size: 21px;
}
.theme-toggle:hover,
.notification-toggle:hover { border-color: var(--brand); }
.notification-toggle { position: relative; }
.notification-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--bg);
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    line-height: 1;
}
.notification-badge[hidden] { display: none; }
.preference-panel { max-width: 760px; }
.preference-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 14px;
    margin-top: 18px;
}
.preference-form button { width: auto; min-width: 160px; }
.alert-preference-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alert-preference-form button { justify-self: start; }
.preference-check {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
}
.preference-check input { width: 18px; height: 18px; padding: 0; }
.security-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.security-status {
    min-height: 112px;
    padding: 13px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--btn-success);
    border-radius: 7px;
    background: var(--bg);
    display: grid;
    align-content: start;
    gap: 6px;
}
.security-status.warning { border-top-color: var(--warn); }
.security-status strong { font-size: 15px; }
.security-status span { color: var(--btn-success); font-weight: 800; font-size: 13px; }
.security-status.warning span { color: var(--warn); }
.security-status small { color: var(--muted); line-height: 1.3; }
.security-settings-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
}
.security-settings-form .preference-check,
.security-settings-form button { grid-column: 1 / -1; }
.security-settings-form button { width: auto; min-width: 180px; justify-self: start; }
.security-settings-form label small { font-weight: 400; }
.security-form-note { grid-column: 1 / -1; margin: -5px 0 0; }
.security-section-gap { margin-top: 22px; }
.notification-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(15, 23, 42, .45);
}
.notification-overlay[hidden] { display: none; }
.notification-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: min(440px, 94vw);
    padding: 18px;
    overflow-y: auto;
    background: var(--panel);
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 40px rgba(15, 23, 42, .22);
    transform: translateX(105%);
    transition: transform .2s ease;
}
body.notifications-open { overflow: hidden; }
body.notifications-open .notification-drawer { transform: translateX(0); }
.notification-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.notification-header h2 { margin: 0 0 4px; }
.notification-header p { margin: 0; }
.notification-close { width: 36px; min-width: 36px; min-height: 36px; padding: 0; font-size: 24px; }
.notification-list { display: grid; gap: 9px; }
.notification-empty { padding: 30px 12px; text-align: center; color: var(--muted); }
.notification-item {
    border: 1px solid var(--line);
    border-left: 5px solid var(--btn-info);
    border-radius: 7px;
    padding: 11px;
    background: var(--bg);
}
.notification-item.seen { opacity: .68; }
.notification-item.danger { border-left-color: var(--danger); }
.notification-item.warning { border-left-color: var(--warn); }
.notification-item.notice { border-left-color: #d4a017; }
.notification-item h3 { margin: 0 0 5px; font-size: 15px; }
.notification-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.notification-item-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.notification-item-actions .button,
.notification-item-actions button { width: auto; min-height: 30px; padding: 6px 9px; font-size: 12px; }
.alert-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    width: min(360px, calc(100vw - 28px));
    padding: 13px 15px;
    border: 1px solid #f0a39d;
    border-left: 5px solid var(--danger);
    border-radius: 7px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .24);
}
.alert-toast[hidden] { display: none; }
.report-filter-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}
.report-filter-form button { width: auto; min-width: 110px; }
.top-actions, .quick-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.top-actions .button, .quick-actions .button { width: auto; padding: 9px 14px; }
.quick-actions { margin-bottom: 18px; }
.quick-actions .button.active {
    box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.18);
    outline: 2px solid rgba(15, 139, 141, 0.35);
}
.dashboard-action-block {
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--line);
}
.dashboard-action-block h2,
.dashboard-section-title {
    margin: 0 0 10px;
    font-size: 17px;
}
.dashboard-action-block .quick-actions { margin-bottom: 0; }
.dashboard-section-title { color: var(--ink); }
.desktop-module-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    align-items: stretch;
    gap: 7px;
    margin: 0 0 14px;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: visible;
}
.desktop-module-menu a {
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    display: grid;
    justify-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
}
.desktop-module-menu a.active,
.desktop-module-menu a:hover {
    border-color: var(--btn-info);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
}
.module-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--btn-info);
}
.desktop-module-menu a:nth-child(1) .module-icon { background: var(--module-1); }
.desktop-module-menu a:nth-child(2) .module-icon { background: var(--module-2); }
.desktop-module-menu a:nth-child(3) .module-icon { background: var(--module-3); }
.desktop-module-menu a:nth-child(4) .module-icon { background: var(--module-4); }
.desktop-module-menu a:nth-child(5) .module-icon { background: var(--module-5); }
.desktop-module-menu a:nth-child(6) .module-icon { background: var(--module-6); }
.desktop-module-menu a:nth-child(7) .module-icon { background: var(--module-7); }
.desktop-module-menu a:nth-child(8) .module-icon { background: var(--module-8); }
.desktop-module-menu a:nth-child(9) .module-icon { background: var(--module-9); }
.desktop-module-menu a:nth-child(10) .module-icon { background: var(--module-10); }
.desktop-module-menu a:nth-child(11) .module-icon { background: var(--module-11); }
.desktop-module-menu a:nth-child(12) .module-icon { background: var(--module-12); }
.desktop-module-menu a:nth-child(13) .module-icon { background: var(--module-13); }
.desktop-module-menu a:nth-child(14) .module-icon { background: var(--module-14); }
.desktop-module-menu a:nth-child(15) .module-icon { background: var(--module-15); }
.desktop-module-menu a:nth-child(16) .module-icon { background: var(--module-16); }
.desktop-module-menu a:nth-child(17) .module-icon { background: var(--module-17); }
.desktop-module-menu a:nth-child(18) .module-icon { background: var(--module-18); }
.desktop-module-menu a[href*="page=preferences"] .module-icon { background: var(--btn-info); }
.desktop-module-menu a:last-child .module-icon { background: var(--module-18); }
.module-icon img {
    width: 19px;
    height: 19px;
    filter: brightness(0) invert(1);
}
.module-icon.danger { background: var(--module-18); }
.unified-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px auto;
    gap: 10px;
    align-items: end;
}
.unified-search-form .button,
.unified-search-form button {
    width: 100%;
}
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 18px;
}
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.metric { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.metric strong { display: block; font-size: 24px; margin-top: 8px; }
.metric span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.dashboard-metrics .metric { color: #fff; border: 0; }
.dashboard-metrics .metric strong, .dashboard-metrics .metric span { color: #fff; }
.metric-green { background: var(--metric-green); }
.metric-blue { background: var(--metric-blue); }
.metric-purple { background: var(--metric-purple); }
.metric-orange { background: var(--metric-orange); }
.alert { padding: 12px; border-radius: 6px; margin-bottom: 14px; background: #e6f6f4; border: 1px solid #b7dfdb; }
.alert.danger { background: #fff0ed; border-color: #ffd0c8; color: var(--danger); }
.status { font-weight: 700; color: var(--brand-dark); }
.quick-status-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 250px;
}
.quick-status-form select {
    min-height: 34px;
    padding: 7px 9px;
    font-weight: 700;
    color: var(--brand-dark);
}
.quick-status-form button {
    min-height: 34px;
    padding: 8px 10px;
}
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.actions .button, .actions button { width: auto; min-height: 32px; padding: 7px 10px; font-size: 14px; }
.action-group-title {
    flex: 0 0 100%;
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.whatsapp-actions {
    min-width: 300px;
    padding: 8px;
    border-radius: 8px;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 22px;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
}
.product-search-results {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.product-search-results[hidden] { display: none; }
.product-result {
    width: 100%;
    text-align: left;
    background: #f8fafc;
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 9px 10px;
}
.product-result:hover {
    background: #eef6ff;
    border-color: var(--btn-info);
}
.product-result strong,
.product-result small {
    display: block;
}
.product-result small {
    margin-top: 3px;
    color: var(--muted);
}
.low { color: var(--danger); font-weight: 700; }
.muted { color: var(--muted); }
.product-form {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
}
.product-fields, .advanced-grid, .search-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.product-stock-toggle {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
}
.product-stock-toggle input[type="hidden"] { display: none; }
.product-stock-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    padding: 0;
}
.product-stock-toggle span { display: grid; gap: 4px; }
.product-stock-toggle small { color: var(--muted); font-weight: 400; line-height: 1.3; }
.product-stock-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.product-stock-fields[hidden] { display: none; }
.image-field { display: grid; gap: 12px; align-content: start; }
.image-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--muted);
}
.image-preview img, .thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.logo-preview {
    aspect-ratio: 3 / 1;
    min-height: 100px;
}
.logo-preview img {
    object-fit: contain;
    padding: 10px;
}
.thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #f8fafc;
}
.search-form { grid-template-columns: minmax(0, 1fr) 160px; }
.discount-form {
    display: grid;
    grid-template-columns: 180px minmax(180px, 260px) 170px;
    gap: 10px;
    align-items: end;
    margin: 12px 0;
}
.bar-chart { display: grid; gap: 12px; }
.bar-row {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr) 110px;
    gap: 10px;
    align-items: center;
}
.bar-row div { height: 12px; background: #e8eef5; border-radius: 999px; overflow: hidden; }
.bar-row i { display: block; height: 100%; background: var(--brand); }
.bar-row i.status-bar { background: var(--btn-print); }
.color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.color-grid input[type="color"] {
    min-height: 44px;
    padding: 4px;
}
.style-color-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.color-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    background: #fbfdff;
}
.color-group h3 {
    margin: 0 0 10px;
    font-size: 16px;
}
.color-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.color-pill {
    position: relative;
    width: 78px;
    min-height: 34px;
    margin: 0;
    border-radius: 7px;
    background: var(--pill);
    color: #fff;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.color-pill input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.color-pill span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    pointer-events: none;
}
.module-color-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(72px, 1fr));
}
.module-color-grid .color-pill {
    width: 100%;
}
.color-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.whatsapp-template-form { margin-top: 16px; }
.whatsapp-template-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.whatsapp-template-tabs {
    display: grid;
    gap: 7px;
}
.whatsapp-template-tabs button {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    justify-content: flex-start;
    background: var(--panel);
    border-color: var(--line);
    color: var(--ink);
    white-space: normal;
    text-align: left;
}
.whatsapp-template-tabs button.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.whatsapp-template-editor {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
}
.whatsapp-variable-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.whatsapp-variable-bar strong { margin-right: 3px; color: var(--muted); font-size: 12px; }
.whatsapp-variable-bar button {
    width: auto;
    min-height: 28px;
    padding: 5px 8px;
    background: var(--panel);
    border-color: var(--line);
    color: var(--brand-dark);
    font-size: 12px;
}
.whatsapp-template-panel[hidden] { display: none; }
.whatsapp-template-panel textarea {
    min-height: 320px;
    margin-top: 3px;
    resize: vertical;
    line-height: 1.45;
}
.whatsapp-template-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
}
.whatsapp-template-footer button { width: auto; min-width: 170px; }
.panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.panel-title-row h2 { margin: 0 0 6px; }
.panel-title-row p { margin: 0; }
.panel-title-row .button, .panel-title-row button { width: auto; white-space: nowrap; }
.section-subtitle {
    margin: 18px 0 6px;
    font-size: 18px;
}
.update-packages-grid,
.update-config-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 14px;
    align-items: start;
}
.update-config-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}
.update-upload-form,
.update-settings-form {
    display: grid;
    gap: 12px;
    align-items: end;
}
.update-upload-form button,
.update-settings-form button {
    width: auto;
    min-width: 160px;
    justify-self: start;
    min-height: 34px;
    padding: 8px 14px;
}
.update-check {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    font-weight: 700;
}
.update-check input {
    width: 18px;
    height: 18px;
    padding: 0;
}
.update-packages-grid .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}
.update-packages-grid .actions:last-child {
    border-bottom: 0;
}
.update-packages-grid .actions button {
    width: auto;
    min-width: 112px;
    min-height: 32px;
    padding: 7px 12px;
}
.update-tabs {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}
.update-tabs a {
    min-width: 128px;
    justify-content: center;
    font-weight: 800;
}
.form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.form-header h2 { margin: 0; }
.form-header .button { width: auto; white-space: nowrap; }
.form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}
.form-footer .button, .form-footer button {
    width: auto;
}
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.filter-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--brand);
    font-weight: 700;
}
.filter-tabs a.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #f8fafc;
}
.success-notice {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}
.payment-pending-notice {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}
.measure-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.checkbox-grid {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 14px;
    background: #f8fafc;
}
.checkbox-grid legend {
    padding: 0 6px;
    font-weight: 700;
    color: var(--muted);
}
.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.checkbox-grid input { width: auto; }
.checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}
.checklist strong { grid-column: 1 / -1; }
.checklist label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 400;
}
.checklist input { width: auto; }
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 50;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    width: min(460px, 100%);
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--line);
    padding: 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.modal h2 { margin-top: 0; }
@media (max-width: 900px) {
    .app { display: block; min-height: 100vh; }
    .desktop-module-menu {
        display: none;
    }
    .sidebar-desktop-toggle {
        display: none;
    }
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        display: grid;
        grid-template-columns: 48px minmax(96px, 1fr) minmax(116px, 1fr);
        align-items: center;
        gap: 10px;
        min-height: 58px;
        padding: 8px 12px;
        background: var(--sidebar-bg);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
    }
    .mobile-menu-toggle {
        display: inline-flex;
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        justify-content: center;
        background: var(--sidebar-active);
        border-color: var(--sidebar-active);
        border-radius: 8px;
        box-shadow: none;
    }
    .mobile-menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 999px;
    }
    .mobile-header-brand {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 800;
        overflow: hidden;
    }
    .mobile-header-brand img {
        display: block;
        width: auto;
        max-width: 150px;
        height: 42px;
        object-fit: contain;
        object-position: center;
    }
    .mobile-header-meta {
        min-width: 0;
        display: grid;
        gap: 2px;
        color: #dbe7f3;
        font-size: 10px;
        line-height: 1.15;
        text-align: right;
    }
    .mobile-header-meta strong {
        color: #fff;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: block;
        background: rgba(15, 23, 42, .46);
    }
    .mobile-menu-overlay[hidden] {
        display: none;
    }
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        width: min(82vw, 290px);
        overflow-y: auto;
        padding-top: 68px;
        padding-left: 20px;
        padding-right: 20px;
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: 20px 0 35px rgba(15, 23, 42, .25);
    }
    body.sidebar-open .sidebar {
        transform: translateX(0);
    }
    body.sidebar-open {
        overflow: hidden;
    }
    .brand {
        min-height: 76px;
        margin-bottom: 14px;
    }
    .brand-logo {
        max-width: 170px;
        height: 70px;
    }
    .sidebar-actions {
        display: grid;
    }
    .sidebar a {
        min-height: auto;
        padding: 10px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-items: start;
        gap: 10px;
    }
    .sidebar a img {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }
    .sidebar a span {
        display: inline;
    }
    .content { padding: 74px 12px 16px; }
    .topbar { grid-template-columns: 1fr; align-items: start; }
    .topbar-brand { display: none; }
    .topbar-user {
        justify-items: start;
        text-align: left;
        font-size: 12px;
    }
    .topbar-account { justify-content: space-between; }
    .preference-form { grid-template-columns: 1fr; }
    .preference-form button { width: 100%; }
    .alert-preference-form { grid-template-columns: 1fr; }
    .preference-check { grid-column: auto; }
    .security-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .security-settings-form { grid-template-columns: 1fr; }
    .security-settings-form .preference-check,
    .security-settings-form button,
    .security-form-note { grid-column: auto; }
    .security-settings-form button { width: 100%; }
    .notification-drawer { width: min(380px, 96vw); padding: 14px; }
    .topbar h1 { font-size: 26px; }
    .top-actions, .quick-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    .top-actions .button, .quick-actions .button {
        width: 100%;
        min-height: 42px;
        padding: 8px 6px;
        font-size: 14px;
        white-space: normal;
    }
    .dashboard-action-block {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }
    .dashboard-action-block h2,
    .dashboard-section-title {
        font-size: 16px;
        margin-bottom: 9px;
    }
    .unified-search-form {
        grid-template-columns: 1fr;
    }
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .dashboard-grid, .grid-form, .form-grid, .product-form, .product-fields, .advanced-grid, .search-form, .discount-form, .report-filter-form, .update-packages-grid, .update-config-grid, .checklist, .bar-row, .style-color-layout { grid-template-columns: 1fr; }
    .product-stock-fields { grid-template-columns: 1fr; }
    .topbar-search { grid-template-columns: 1fr; width: 100%; }
    .topbar-search button, .report-filter-form button { width: 100%; }
    .module-color-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .whatsapp-template-layout { grid-template-columns: 1fr; }
    .whatsapp-template-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .whatsapp-template-tabs button { justify-content: center; text-align: center; }
    .whatsapp-template-editor { padding: 10px; }
    .whatsapp-template-panel textarea { min-height: 300px; }
    .whatsapp-template-footer button { width: 100%; }
    .metric {
        min-height: 98px;
        padding: 10px;
        border-radius: 8px;
    }
    .metric strong {
        font-size: 19px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }
    .metric span {
        font-size: 11px;
        line-height: 1.25;
    }
    .dashboard-metrics .metric {
        display: grid;
        align-content: center;
    }
    .panel-title-row { display: grid; }
    .actions { gap: 6px; }
    .actions .button, .actions button { min-height: 34px; padding: 8px 10px; }
    table.mobile-card-table {
        display: block;
        width: 100%;
        background: transparent;
        border-collapse: separate;
    }
    table.mobile-card-table tbody,
    table.mobile-card-table tr,
    table.mobile-card-table td {
        display: block;
        width: 100%;
    }
    table.mobile-card-table tr:first-child {
        display: none;
    }
    table.mobile-card-table tr {
        margin: 0 0 12px;
        padding: 12px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    }
    table.mobile-card-table td {
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        padding: 8px 0;
        border-bottom: 1px solid #edf2f7;
        word-break: break-word;
    }
    table.mobile-card-table td:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    table.mobile-card-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-weight: 700;
        font-size: 12px;
    }
    table.mobile-card-table td:has(.actions),
    table.mobile-card-table td.actions {
        display: block;
    }
    table.mobile-card-table td:has(.actions)::before,
    table.mobile-card-table td.actions::before {
        display: block;
        margin-bottom: 8px;
    }
    table.mobile-card-table td .actions,
    table.mobile-card-table td.actions {
        gap: 7px;
    }
    table.mobile-card-table td.actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    table.mobile-card-table td.actions::before {
        grid-column: 1 / -1;
    }
    table.mobile-card-table td.actions form {
        display: contents;
    }
    table.mobile-card-table td .actions .button,
    table.mobile-card-table td .actions button,
    table.mobile-card-table td.actions .button,
    table.mobile-card-table td.actions button {
        width: 100%;
        flex: none;
        min-width: 0;
        min-height: 36px;
        padding: 8px 7px;
        font-size: 13px;
        white-space: normal;
    }
    table.mobile-card-table input,
    table.mobile-card-table select {
        min-width: 0;
    }
}
@media (max-width: 380px) {
    .mobile-header {
        grid-template-columns: 44px minmax(82px, 1fr) minmax(96px, 1fr);
        gap: 6px;
        padding-inline: 8px;
    }
    .mobile-header-brand img { max-width: 120px; }
    .mobile-header-meta { font-size: 9px; }
    .top-actions, .quick-actions,
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    table.mobile-card-table td.actions {
        grid-template-columns: 1fr;
    }
    .metric strong { font-size: 18px; }
    .security-status-grid { grid-template-columns: 1fr; }
}