:root {
    --font-family-base: 'Montserrat', Arial, sans-serif;
    --font-family-heading: 'Montserrat', Arial, sans-serif;
    --font-weight-base: 400;
    --font-weight-heading: 700;
    --bg: #f4efe7;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-strong: #ffffff;
    --text: #1f1a16;
    --muted: #72675d;
    --line: rgba(31, 26, 22, 0.08);
    --accent: #0f766e;
    --accent-strong: #12403a;
    --accent-soft: #def5f1;
    --accent-dark: #123a36;
    --danger: #c2410c;
    --danger-soft: #fff0e4;
    --shadow: 0 20px 60px rgba(34, 28, 20, 0.1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-base);
    font-size: 15px;
    color: var(--text);
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.13), transparent 22%),
        radial-gradient(circle at bottom left, rgba(194, 65, 12, 0.09), transparent 24%),
        linear-gradient(135deg, #f7f2eb 0%, #f0e7da 100%);
}

body * {
    font-family: var(--font-family-base) !important;
    font-weight: var(--font-weight-base);
}

h1,
h2,
h3,
h4,
h5,
h6,
.eyebrow,
.panel-head h2,
.panel-head h3,
.topbar h1,
.hero-card h2,
.auth-copy h1,
.auth-card h2,
.public-hero-stage h1,
.public-page-hero h1,
.public-showcase-card h2,
.public-login-card h2,
.public-dealer-application-head h2,
.public-corporate-page-head h1,
.contact-hero-copy h1,
.statement-modal-head h2,
.checkout-modal-head h3,
.compact-head h2,
.invoice-head h3 {
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-heading) !important;
}

p,
a,
span,
small,
label,
input,
select,
textarea,
button,
li,
td,
th,
div:not(.brand-mark):not(.public-announcement-card-placeholder):not(.public-catalog-card-placeholder),
strong,
b {
    font-weight: var(--font-weight-base) !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
}

.admin-shell {
    grid-template-columns: 268px 1fr;
}

.sidebar {
    padding: 28px;
    background: rgba(26, 22, 18, 0.9);
    color: #f6f0e9;
    backdrop-filter: blur(14px);
}

.admin-sidebar {
    background: linear-gradient(180deg, rgba(18, 58, 54, 0.96), rgba(11, 38, 45, 0.96));
}

.admin-shell .sidebar {
    padding: 24px 20px;
}

.brand {
    display: grid;
    gap: 14px;
    margin-bottom: 36px;
    padding: 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-top {
    width: 100%;
    min-height: 64px;
    margin-bottom: 10px;
    padding: 0 4px;
}

.brand-logo img {
    width: 100%;
    max-width: 220px;
    max-height: 56px;
    object-fit: contain;
}

.brand-body {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.brand-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    align-content: center;
}

.brand-meta {
    display: grid;
    gap: 2px;
    justify-items: start;
}

.brand strong,
.hero-card h2,
.topbar h1,
.auth-copy h1 {
    font-family: 'Space Grotesk', sans-serif;
}

.brand span,
.eyebrow,
.row-card span,
.product-name small,
.sidebar-card span,
.sidebar-card small,
.stat-card span,
.panel-head p,
.auth-note {
    color: var(--muted);
}

.brand span,
.sidebar-card small {
    display: block;
}

.brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f766e, #f59e0b);
    color: #fff;
    font-weight: 800;
}

.brand-avatar {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav a {
    padding: 13px 15px;
    border-radius: 15px;
    color: rgba(246, 240, 233, 0.82);
    transition: 0.2s ease;
}

.admin-shell .brand {
    gap: 12px;
    margin-bottom: 28px;
    padding: 12px;
    border-radius: 18px;
}

.admin-shell .brand strong {
    font-size: 1rem;
    line-height: 1.15;
}

.admin-shell .brand span {
    font-size: 0.76rem;
    line-height: 1.2;
}

.admin-shell .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 0.88rem;
}

.admin-shell .brand-copy {
    gap: 5px;
}

.admin-shell .brand-body {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
}

.admin-shell .brand-logo-top {
    min-height: 72px;
    margin-bottom: 10px;
    padding: 0 2px;
}

.admin-shell .brand-logo img {
    max-width: 100%;
    max-height: 64px;
}

.admin-shell .nav {
    gap: 6px;
}

.admin-shell .nav a {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
}

.nav a.active,
.nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-section-title {
    margin: 8px 10px 0;
    color: rgba(246, 240, 233, 0.52);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.nav-group {
    display: grid;
    gap: 5px;
}

.nav-section-toggle {
    width: calc(100% - 8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 4px 0;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.nav-section-toggle:hover,
.nav-group.is-open .nav-section-toggle {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-section-toggle b {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
    opacity: 0.75;
}

.nav-group.is-open .nav-section-toggle b {
    transform: rotate(225deg);
}

.nav-submenu {
    display: grid;
    gap: 5px;
    padding-left: 10px;
}

.admin-shell .nav-submenu a {
    padding: 9px 12px;
    border-radius: 11px;
    font-size: 0.8rem;
}

.nav-submenu[hidden] {
    display: none;
}

.sidebar-card,
.panel-card,
.hero-card,
.stat-card,
.auth-card,
.auth-copy {
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.sidebar-card {
    margin-top: 28px;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
}

.admin-shell .sidebar-card {
    margin-top: 22px;
    padding: 16px;
    border-radius: 18px;
}

.sidebar-card strong {
    display: block;
    margin: 8px 0 6px;
    color: #fff;
    font-size: 1.3rem;
}

.admin-shell .sidebar-card span,
.admin-shell .sidebar-card small {
    font-size: 0.76rem;
}

.admin-shell .sidebar-card strong {
    margin: 6px 0 4px;
    font-size: 1rem;
}

.main {
    padding: 26px;
}

.admin-shell .main {
    padding: 16px 18px 18px;
}

.topbar,
.panel-head,
.cart-row,
.cart-controls,
.row-card,
.auth-panel,
.auth-metrics,
.form-split,
.form-actions,
.order-admin-controls {
    display: flex;
    align-items: center;
}

.topbar,
.panel-head,
.cart-row,
.row-card {
    justify-content: space-between;
}

.topbar {
    margin-bottom: 20px;
}

.admin-shell .topbar {
    margin-bottom: 16px;
    padding: 2px 0 8px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.exchange-rate-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    color: var(--accent-dark);
    box-shadow: 0 10px 30px rgba(34, 28, 20, 0.07);
    white-space: nowrap;
}

.exchange-rate-pill span {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 800;
}

.exchange-rate-pill strong {
    font-size: 0.78rem;
    line-height: 1;
}

.public-utilitybar .public-exchange-rate-pill {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.9);
}

.public-utilitybar .public-exchange-rate-pill span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
}

.public-utilitybar .public-exchange-rate-pill strong {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
}

.info-pill-group {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.info-pill {
    position: relative;
    min-width: 150px;
    padding: 9px 13px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid var(--line);
    display: grid;
    gap: 2px;
    box-shadow: 0 10px 30px rgba(34, 28, 20, 0.07);
}

.info-pill-label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 800;
}

.info-pill strong {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-size: 0.9rem;
    line-height: 1.1;
}

.info-pill small {
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.2;
}

.rep-pill {
    min-width: 140px;
}

.info-popup {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 250px;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(18, 58, 54, 0.97);
    color: #f6fbfa;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(12, 24, 28, 0.24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
    z-index: 45;
}

.info-popup span {
    font-size: 0.74rem;
    color: #f6fbfa;
    white-space: nowrap;
}

.info-popup b {
    color: #9fe3d9;
}

.info-pill:hover .info-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.eyebrow {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
}

.admin-shell .eyebrow {
    margin-bottom: 4px;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
}

.admin-shell .topbar h1 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.topbar h1,
.panel-head h2,
.panel-head h3,
.hero-card h2,
.auth-copy h1,
.auth-card h2 {
    margin: 0;
}

.hero-card,
.panel-card,
.stat-card {
    border-radius: 28px;
    background: var(--surface);
    backdrop-filter: blur(16px);
}

.hero-card {
    padding: 34px;
    overflow: hidden;
    margin-bottom: 20px;
}

.hero-accent {
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.9), rgba(245, 158, 11, 0.8));
    filter: blur(10px);
}

.stats-grid,
.panel-grid {
    display: grid;
    gap: 18px;
}

.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 20px;
}

.admin-shell .stats-grid,
.admin-shell .panel-grid {
    gap: 14px;
}

.admin-shell .stats-grid {
    margin-bottom: 14px;
}

.stat-card {
    padding: 20px;
}

.admin-shell .stat-card {
    padding: 16px;
    border-radius: 22px;
}

.stat-card strong {
    display: block;
    margin-top: 10px;
    font-size: 1.55rem;
}

.admin-shell .stat-card span {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-shell .stat-card strong {
    margin-top: 8px;
    font-size: 1.18rem;
}

.panel-grid {
    grid-template-columns: 1.2fr 0.8fr;
}

.admin-grid,
.payment-grid {
    grid-template-columns: 0.95fr 1.05fr;
}

.admin-grid.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.soft-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 246, 238, 0.82));
}

.mini-link {
    display: inline-flex;
    margin-top: 6px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.rep-order-lines {
    display: grid;
    gap: 10px;
}

.rep-work-page {
    background:
        radial-gradient(circle at 88% 10%, rgba(15, 118, 110, 0.13), transparent 24%),
        rgba(255, 255, 255, 0.9);
}

.rep-order-card,
.rep-customer-card {
    max-width: 1180px;
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 246, 238, 0.84));
    box-shadow: 0 22px 56px rgba(34, 28, 20, 0.08);
}

.rep-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 6px;
}

.rep-form-head h3 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
}

.rep-form-head p {
    margin: 4px 0 0;
    color: var(--muted);
}

.rep-order-line {
    padding: 12px;
    border: 1px solid rgba(31, 26, 22, 0.06);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.68);
}

.rep-product-filter {
    margin: 16px 0 0;
}

.rep-product-order-form {
    max-width: none;
}

.rep-order-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(320px, 1fr);
    gap: 12px;
}

.rep-product-head,
.rep-product-row {
    grid-template-columns: 46px 92px minmax(260px, 1.8fr) 160px 110px 54px 74px;
}

.rep-product-table {
    margin-top: 6px;
}

.rep-order-submit-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.rep-order-submit-row .primary-button {
    min-width: 240px;
}

.rep-stock-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rep-stock-cell small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.rep-price-cell .price-trigger {
    display: grid;
    gap: 2px;
    text-align: left;
}

.rep-price-cell small {
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
}

.rep-price-cell em {
    color: #f5fbfa;
    font-style: normal;
}

.rep-customer-side {
    display: grid;
    grid-template-columns: repeat(4, 168px) auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.rep-customer-metric {
    display: grid;
    gap: 2px;
    min-width: 0;
    min-height: 58px;
    padding: 8px 11px;
    border: 1px solid rgba(31, 26, 22, 0.07);
    border-radius: 16px;
    background: rgba(250, 248, 244, 0.84);
    align-content: center;
}

.rep-customer-metric span {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rep-customer-metric strong {
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
}

.rep-customer-metric small {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.15;
}

.location-auto-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed rgba(15, 118, 110, 0.24);
    border-radius: 16px;
    background: rgba(222, 245, 241, 0.42);
}

.location-auto-row span {
    color: var(--muted);
    font-size: 0.82rem;
}

.checkout-account-closed {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(194, 65, 12, 0.18);
    border-radius: 16px;
    background: var(--danger-soft);
}

.checkout-account-closed strong {
    color: var(--danger);
    font-size: 0.88rem;
}

.checkout-account-closed span {
    color: #8a4b2c;
    font-size: 0.82rem;
}

.open-account-limit-card {
    max-width: 520px;
    padding: 28px;
    border: 1px solid rgba(194, 65, 12, 0.16);
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 34%),
        #fff;
}

.open-account-limit-card h3 {
    margin: 0;
    color: var(--danger);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
}

.open-account-limit-card p {
    margin: 10px 0 20px;
    color: var(--muted);
    line-height: 1.5;
}

.statement-detail-layout {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.statement-customer-summary {
    position: sticky;
    top: 18px;
    padding: 22px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.16), transparent 26%),
        linear-gradient(155deg, #123a36 0%, #0f766e 100%);
    box-shadow: 0 24px 60px rgba(18, 58, 54, 0.18);
}

.statement-customer-summary .eyebrow,
.statement-customer-summary p {
    color: rgba(255, 255, 255, 0.72);
}

.statement-customer-summary h3 {
    margin: 8px 0 2px;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
}

.statement-summary-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.statement-summary-list div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
}

.statement-summary-list div.highlight {
    background: rgba(255, 255, 255, 0.16);
}

.statement-summary-list span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.statement-summary-list strong {
    color: #fff;
    font-size: 1rem;
}

.statement-detail-main {
    min-width: 0;
}

.statement-head-actions-inline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.statement-customer-jump {
    margin: 0;
}

.statement-customer-jump select {
    min-width: 220px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text);
    font-weight: 700;
}

.statement-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
}

.statement-pagination > span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.statement-pagination > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.statement-pagination a {
    min-width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 900;
}

.statement-pagination a.active {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
}

.user-admin-page {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 12%, rgba(15, 118, 110, 0.12), transparent 24%),
        radial-gradient(circle at 94% 8%, rgba(245, 158, 11, 0.16), transparent 22%),
        rgba(255, 255, 255, 0.9);
}

.user-admin-hero {
    align-items: center;
    padding: 8px 4px 18px;
    border-bottom: 1px solid var(--line);
}

.user-admin-hero h2 {
    margin-top: 4px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 2.2vw, 2.25rem);
}

.user-admin-counts {
    display: grid;
    min-width: 170px;
    padding: 16px 18px;
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(222, 245, 241, 0.95), rgba(255, 255, 255, 0.72));
    box-shadow: 0 18px 36px rgba(15, 64, 58, 0.08);
}

.user-admin-counts span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.user-admin-counts strong {
    margin-top: 4px;
    color: var(--accent-strong);
    font-size: 1.15rem;
}

.user-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 18px;
    margin-top: 20px;
}

.user-action-card {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(31, 26, 22, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 60px rgba(34, 28, 20, 0.08);
}

.user-create-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(247, 242, 235, 0.9)),
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.18), transparent 36%);
}

.user-assign-card {
    background:
        linear-gradient(145deg, rgba(18, 64, 58, 0.96), rgba(15, 118, 110, 0.9)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 30%);
    color: #fff;
}

.user-assign-card .admin-form label > span,
.user-assign-card label > span,
.user-assign-card p {
    color: rgba(255, 255, 255, 0.72);
}

.user-assign-card label > span {
    color: #fff;
}

.user-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-card-head h3,
.user-directory-head h3 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
}

.user-card-head p,
.user-directory-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.user-assign-card .user-card-head p {
    color: rgba(255, 255, 255, 0.7);
}

.user-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 900;
    font-size: 1.3rem;
}

.user-card-icon.route {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.user-form-grid.assign-grid {
    grid-template-columns: 1fr;
}

.user-action-card input,
.user-action-card select {
    min-height: 46px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.user-wide-button {
    min-height: 48px;
    border-radius: 16px;
}

.user-inline-note {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 26, 22, 0.06);
}

.user-inline-note strong {
    color: var(--accent-dark);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.user-inline-note span {
    color: #5f554c;
    font-size: 0.84rem;
    line-height: 1.5;
}

.user-directory {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.72);
}

.user-directory-head {
    margin-bottom: 14px;
}

.user-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.user-directory-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(31, 26, 22, 0.07);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 30px rgba(34, 28, 20, 0.05);
}

.user-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    font-weight: 900;
}

.user-avatar.admin {
    background: linear-gradient(135deg, #123a36, #0f766e);
}

.user-avatar.rep {
    background: linear-gradient(135deg, #b45309, #f59e0b);
}

.user-avatar.shipment {
    background: linear-gradient(135deg, #1d4ed8, #60a5fa);
}

.user-avatar.support {
    background: linear-gradient(135deg, #7c3aed, #22c55e);
}

.user-directory-copy {
    display: grid;
    gap: 2px;
}

.user-directory-copy span {
    color: var(--muted);
    font-size: 0.86rem;
}

.user-role-badge {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.user-role-badge.admin {
    color: #0f3f39;
    background: #dff4ef;
}

.user-role-badge.rep {
    color: #7c2d12;
    background: #ffedd5;
}

.user-role-badge.shipment {
    color: #1e3a8a;
    background: #dbeafe;
}

.user-role-badge.support {
    color: #4c1d95;
    background: #ede9fe;
}

.user-permission-list {
    gap: 16px;
}

.user-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.user-summary-card {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid rgba(31, 26, 22, 0.08);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 40px rgba(34, 28, 20, 0.05);
}

.user-summary-card span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.user-summary-card strong {
    font-size: 1.8rem;
    line-height: 1;
}

.user-summary-card small {
    color: var(--muted);
    font-size: 0.84rem;
}

.user-directory-compact {
    padding: 20px;
}

.user-directory-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.user-list-table {
    display: grid;
    gap: 12px;
}

.user-list-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) 200px minmax(260px, 1.3fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid rgba(31, 26, 22, 0.07);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px rgba(34, 28, 20, 0.05);
}

.user-list-main {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
}

.user-list-role {
    display: flex;
    justify-content: flex-start;
}

.user-list-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.user-module-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f5f7fb;
    border: 1px solid #dde5ee;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 700;
}

.user-module-pill.muted {
    color: #64748b;
    background: #f8fafc;
}

.user-list-actions {
    display: flex;
    justify-content: flex-end;
}

.user-management-modal-card {
    width: min(980px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 36px);
    margin: 18px auto;
    overflow: hidden;
}

.user-management-form {
    gap: 16px;
}

.user-management-modal-card .panel-head {
    padding-right: 42px;
}

.user-management-modal-card .user-management-form {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    padding-right: 6px;
}

.user-management-modal-card .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 4px;
    padding-top: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), #fff 24px);
}

.user-permission-card {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.user-permission-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
}

.user-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-module-permissions {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.82);
}

.user-management-modal-card .user-module-permissions {
    max-height: 48vh;
    overflow-y: auto;
}

.user-module-head {
    display: grid;
    gap: 2px;
}

.user-module-head span {
    color: var(--muted);
    font-size: 0.82rem;
}

.user-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.user-module-tree-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.user-module-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #fff;
}

.user-module-group {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.user-module-parent-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.user-module-parent,
.user-submodule-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
}

.user-submodule-list {
    display: grid;
    gap: 6px;
    padding-top: 2px;
    padding-left: 12px;
    border-top: 1px solid #e7edf4;
}

.user-submodule-list[hidden] {
    display: none !important;
}

.user-submodule-option {
    padding: 8px 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.user-submodule-option strong {
    font-size: 0.8rem;
}

.user-submodule-option small {
    font-size: 0.71rem;
}

.user-module-toggle {
    min-width: 116px;
    justify-content: center;
}

.user-module-toggle[aria-expanded="true"] {
    background: rgba(15, 118, 110, 0.08);
    color: var(--accent-dark);
    border-color: rgba(15, 118, 110, 0.18);
}

.user-module-option input {
    margin-top: 3px;
}

.user-module-option span {
    display: grid;
    gap: 4px;
}

.user-module-option strong {
    color: #0f172a;
    font-size: 0.9rem;
}

.user-module-option small {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.admin-shell .user-assign-card.admin-form label > span {
    color: #fff;
}

.user-admin-counts {
    min-width: 146px;
    padding: 12px 14px;
}

.user-admin-counts span {
    font-size: 0.7rem;
}

.user-admin-counts strong {
    font-size: 0.98rem;
}

.panel-card {
    padding: 22px;
}

.admin-shell .panel-card {
    padding: 18px;
    border-radius: 24px;
}

.panel-head {
    gap: 12px;
    margin-bottom: 16px;
}

.admin-shell .panel-head {
    gap: 10px;
    margin-bottom: 14px;
}

.admin-shell .panel-head h2,
.admin-shell .panel-head h3 {
    font-size: 1.1rem;
    line-height: 1.15;
}

.admin-shell .panel-head p {
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-form input,
.search-form select,
.auth-card input,
.qty-input,
.admin-form input,
.admin-form select,
.admin-form textarea,
.order-admin-controls select,
.order-admin-controls input {
    border: 1px solid var(--line);
    background: var(--surface-strong);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text);
}

.search-form input {
    min-width: 220px;
}

.search-form select {
    min-width: 180px;
}

.order-filter-form {
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.order-filter-form input {
    min-width: 260px;
}

.order-filter-form .ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-shell .order-filter-form {
    gap: 8px;
    margin-bottom: 12px;
}

.admin-shell .order-filter-form input,
.admin-shell .order-filter-form select {
    min-height: 38px;
    padding: 7px 11px;
    border-radius: 11px;
    font-size: 0.78rem;
    line-height: 1.25;
}

.admin-shell .order-filter-form input {
    min-width: 220px;
}

.admin-shell .order-filter-form select {
    min-width: 150px;
}

.admin-shell .order-filter-form .primary-button,
.admin-shell .order-filter-form .ghost-button {
    min-height: 38px;
    padding: 7px 12px;
    font-size: 0.76rem;
    border-radius: 11px;
}

.primary-button,
.ghost-button,
.icon-button,
.icon-cart-button {
    border: 0;
    cursor: pointer;
    transition: 0.2s ease;
}

.primary-button,
.ghost-button {
    border-radius: 14px;
    padding: 11px 16px;
}

.admin-shell .primary-button,
.admin-shell .ghost-button {
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 0.82rem;
    font-weight: 700;
}

.primary-button {
    background: linear-gradient(135deg, var(--accent), #0ea5a1);
    color: #fff;
}

.ghost-button {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
}

.mini-button {
    padding: 8px 12px;
    border-radius: 10px;
}

.admin-shell .mini-button {
    padding: 7px 11px;
    border-radius: 10px;
    white-space: nowrap;
}

.admin-shell .icon-mini-button {
    width: 38px;
    min-width: 38px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-shell .icon-mini-button svg {
    width: 19px;
    height: 19px;
}

.primary-button:hover,
.ghost-button:hover,
.action-tile:hover,
.icon-button:hover,
.icon-cart-button:hover {
    transform: translateY(-1px);
}

.product-table,
.table-list,
.action-stack,
.admin-form {
    display: grid;
    gap: 10px;
}

.product-head,
.product-row {
    display: grid;
    grid-template-columns: 46px 92px minmax(260px, 1.8fr) 160px 110px 54px 70px 54px;
    gap: 8px;
    align-items: center;
}

.product-head {
    padding: 0 4px 4px;
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-row,
.cart-row,
.row-card {
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
}

.product-row {
    min-height: 46px;
}

.product-name,
.price-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
}

.product-name strong,
.product-code,
.product-category,
.price-cell {
    font-size: 0.86rem;
}

.product-name small {
    font-size: 0.72rem;
}

.price-cell strong {
    font-size: 0.86rem;
    font-weight: 700;
}

.price-trigger {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.product-category {
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price-popup {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    min-width: 250px;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(18, 58, 54, 0.96);
    color: #f5fbfa;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(12, 24, 28, 0.24);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 30;
}

.price-popup span {
    color: #f5fbfa;
    font-size: 0.74rem;
    white-space: nowrap;
}

.price-popup b {
    color: #9fe3d9;
    font-weight: 700;
}

.price-cell.is-open .price-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.stock-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: inline-block;
}

.stock-dot.in {
    background: #16a34a;
}

.stock-dot.low {
    background: #eab308;
}

.stock-dot.out {
    background: #dc2626;
}

.qty-input {
    width: 62px;
    min-width: 62px;
    padding: 7px 8px;
    border-radius: 9px;
}

.icon-button,
.icon-cart-button {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.icon-button {
    background: #f3f7f6;
    border: 1px solid var(--line);
    color: var(--accent-dark);
}

.icon-cart-button {
    background: linear-gradient(135deg, var(--accent), #0ea5a1);
    color: #fff;
}

.icon-button svg,
.icon-cart-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.summary-badge,
.pill {
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
}

.cart-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.cart-info-pill {
    position: relative;
    min-width: 164px;
    text-decoration: none;
    color: inherit;
}

.cart-info-title {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}

.cart-info-title svg {
    width: 18px;
    height: 18px;
    color: var(--accent-dark);
    flex-shrink: 0;
}

.cart-pill-popup {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 260px;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(18, 58, 54, 0.97);
    color: #f6fbfa;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(12, 24, 28, 0.24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
    z-index: 40;
}

.cart-pill-popup span {
    font-size: 0.74rem;
    color: #f6fbfa;
    white-space: nowrap;
}

.cart-pill-popup b {
    color: #9fe3d9;
}

.cart-pill:hover .cart-pill-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-info-pill:hover .cart-pill-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-controls,
.row-end,
.order-admin-controls {
    gap: 14px;
}

.cart-actions,
.order-submit {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

.wide {
    min-width: 220px;
}

.action-stack {
    gap: 14px;
}

.action-tile {
    display: block;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(245, 158, 11, 0.12));
    border: 1px solid var(--line);
}

.flash {
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 18px;
}

.admin-shell .flash {
    padding: 11px 13px;
    border-radius: 14px;
    font-size: 0.8rem;
    margin-bottom: 14px;
}

.flash-success {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.flash-error {
    background: var(--danger-soft);
    color: var(--danger);
}

.empty-state {
    padding: 18px;
    text-align: center;
    color: var(--muted);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.public-site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 0 28px;
}

.public-topbar,
.public-footer-grid,
.public-grid-two,
.public-card-list-three,
.landing-hero,
.public-utilitybar-inner,
.public-topbar-inner,
.public-hero-shell {
    display: grid;
}

.public-utilitybar {
    width: 100%;
    background: var(--accent-dark);
    color: rgba(255, 255, 255, 0.9);
}

.public-utilitybar-inner {
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    width: min(1220px, 100%);
    margin: 0 auto;
    padding: 9px 0;
}

.public-utility-left,
.public-utility-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.public-utilitybar a,
.public-utilitybar span {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.82rem;
    font-weight: 600;
}

.utility-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.84);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.utility-link-button:hover {
    color: #fff;
}

.public-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.public-lang-switch a {
    color: inherit;
    text-decoration: none;
    opacity: .72;
}

.public-lang-switch a.active {
    opacity: 1;
    font-weight: 800;
}

.public-custom-file {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 7px 10px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68);
}

.public-custom-file input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.public-custom-file-button {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-radius: 12px;
    background: #def5f1;
    color: #0f766e;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}

.public-custom-file-name {
    min-width: 0;
    overflow: hidden;
    color: #667085;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-topbar {
    width: 100%;
    margin: 0;
    padding: 22px 0 24px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(31, 26, 22, 0.08);
}

.public-topbar-inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    width: min(1220px, 100%);
    margin: 0 auto;
}

.public-brand img {
    width: auto;
    max-width: 260px;
    max-height: 58px;
    object-fit: contain;
}

.public-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.public-nav-item {
    position: relative;
}

.public-nav a {
    padding: 8px 0;
    border-radius: 0;
    color: #3b332d;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.public-nav a.active,
.public-nav a:hover {
    background: transparent;
    color: var(--accent);
}

.public-subnav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(31, 26, 22, 0.08);
    box-shadow: 0 18px 40px rgba(34, 28, 20, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 30;
}

.public-subnav .public-nav-item {
    width: 100%;
}

.public-subnav a {
    width: 100%;
    border-radius: 12px;
    padding: 10px 12px;
}

.public-nav-item:hover > .public-subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.public-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.public-main {
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    flex: 1 0 auto;
    gap: 28px;
    padding: 0 22px;
}

.public-hero-shell,
.public-grid-two {
    grid-template-columns: minmax(0, 1.72fr) 360px;
    gap: 24px;
}

.public-hero-banner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.landing-copy-card,
.public-showcase-card {
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 55px rgba(34, 28, 20, 0.08);
}

.public-hero-stage h1,
.public-page-hero h1,
.public-showcase-card h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.03em;
}

.public-hero-stage h1,
.public-page-hero h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.02;
}

.public-hero-stage p,
.public-page-hero p,
.public-showcase-card p,
.public-announcement-body,
.public-mini-card span,
.public-info-stack span {
    color: #6d6359;
    line-height: 1.7;
}

.public-showcase-card {
    padding: 28px;
}

.public-hero-stage {
    position: relative;
    overflow: hidden;
    min-height: 680px;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(18, 58, 54, 0.95), rgba(15, 118, 110, 0.7));
}

.public-hero-image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 680px;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.55s ease;
}

.public-hero-image.active {
    opacity: 1;
}

.hero-reference-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 1;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.hero-reference-dots button {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.38);
    display: block;
    cursor: pointer;
}

.hero-reference-dots button.active {
    background: #fff;
}

.public-login-card {
    display: grid;
    gap: 16px;
    align-self: center;
    padding: 30px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(31, 26, 22, 0.08);
    box-shadow: 0 20px 55px rgba(34, 28, 20, 0.08);
}

.public-login-card h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
}

.hero-reference-login {
    margin-top: 0;
}

.admin-modal .public-dealer-application-card,
.public-dealer-application-card {
    width: min(1320px, calc(100vw - 32px));
    max-height: none;
    margin: 18px auto;
    padding: 22px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 237, 0.42));
    box-shadow: var(--shadow);
    overflow: visible;
}

.public-dealer-application-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.public-dealer-application-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding-right: 42px;
}

.public-dealer-application-head h2 {
    margin: 6px 0 10px;
    font-size: clamp(2rem, 2.8vw, 2.8rem);
}

.public-dealer-application-head p {
    max-width: 920px;
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--muted);
}

.public-dealer-modal-body {
    display: grid;
    gap: 12px;
}

.public-dealer-company-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-dealer-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 12px;
    align-items: stretch;
}

.public-dealer-section {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 237, 0.42));
    border: 1px solid rgba(18, 83, 75, 0.1);
    min-width: 0;
}

.public-dealer-file-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.public-dealer-two-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.public-dealer-address-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.public-dealer-file-grid label,
.public-dealer-two-grid label,
.public-dealer-address-grid label,
.public-dealer-section > label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.public-dealer-section label span {
    font-size: 0.82rem;
    font-weight: 600;
    color: #3f3730;
}

.public-dealer-application-form input,
.public-dealer-application-form select,
.public-dealer-application-form textarea {
    min-width: 0;
    font-size: 0.87rem;
}

.public-dealer-application-form input,
.public-dealer-application-form select {
    min-height: 38px;
}

.public-dealer-section input[type="file"] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 15px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: #f6fbfa;
    color: rgba(15, 23, 42, 0.62);
    font-size: 0.84rem;
}

.public-dealer-section input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 9px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.18), rgba(125, 211, 252, 0.18));
    color: #0b5b58;
    font-weight: 700;
    cursor: pointer;
}

.public-dealer-section-title {
    display: grid;
    gap: 4px;
}

.public-dealer-section-title h3 {
    margin: 0;
    font-size: 0.95rem;
}

.public-dealer-section-title p {
    margin: 0;
    color: #766d64;
    font-size: 0.78rem;
    line-height: 1.45;
}

.public-dealer-application-form .form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.public-dealer-location-row {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(238, 243, 242, 0.72);
    border: 1px solid rgba(18, 83, 75, 0.1);
    min-width: 0;
}

.public-dealer-location-row,
.public-dealer-location-row span {
    font-size: 0.76rem;
    line-height: 1.45;
}

.public-dealer-location-row span,
.public-dealer-application-head > div,
.public-dealer-application-head p,
.public-dealer-section,
.public-dealer-file-grid,
.public-dealer-two-grid,
.public-dealer-address-grid,
.public-dealer-lower-grid,
.public-dealer-company-grid {
    min-width: 0;
}

.public-dealer-location-row span {
    overflow-wrap: anywhere;
}

.public-dealer-verify {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(238, 243, 242, 0.72);
    border: 1px solid rgba(18, 83, 75, 0.1);
}

.public-dealer-verify p {
    margin: 0;
    color: #766d64;
    font-size: 0.76rem;
    line-height: 1.45;
}

.public-dealer-actions-note {
    display: none;
}

.public-dealer-application-card textarea {
    min-height: 90px;
}

.public-dealer-application-form .primary-button,
.public-dealer-application-form .ghost-button {
    min-width: 96px;
    min-height: 40px;
    font-weight: 700;
    font-size: 0.76rem;
    border-radius: 13px;
    padding: 0 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.public-dealer-application-form .primary-button {
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.18);
}

.public-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.public-dealer-span-2 {
    grid-column: span 2;
}

.public-home-lower {
    align-items: start;
}

.public-home-lower .public-home-section {
    height: 100%;
}

.public-login-card label {
    display: grid;
    gap: 8px;
}

.public-card-list {
    display: grid;
    gap: 14px;
}

.public-card-list-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.public-announcement-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-mini-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(15, 118, 110, 0.06);
    border: 1px solid rgba(15, 118, 110, 0.08);
}

.public-mini-card strong,
.public-showcase-card h2 {
    font-size: 1.1rem;
}

.public-announcement-slider {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 24px;
}

.public-announcement-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(18, 83, 75, 0.1);
    box-shadow: 0 12px 30px rgba(34, 28, 20, 0.06);
}

.public-announcement-slider .public-announcement-card {
    display: none;
}

.public-announcement-card.active {
    display: grid;
}

.public-announcement-card img,
.public-announcement-card-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 14px;
}

.public-announcement-card img {
    object-fit: cover;
    display: block;
}

.public-announcement-card-placeholder {
    display: grid;
    place-items: center;
    background: rgba(15, 118, 110, 0.1);
    color: var(--accent-dark);
    font-size: 1.6rem;
    font-weight: 800;
}

.public-announcement-card-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.public-announcement-card-copy small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.public-announcement-card-copy strong {
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.35;
}

.public-announcement-card-copy span,
.public-announcement-card-copy .public-announcement-body {
    color: var(--muted);
    line-height: 1.55;
    font-size: 0.88rem;
}

.public-announcement-card-copy a,
.public-announcement-card-copy button {
    width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-dark);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.public-announcement-card-copy a b,
.public-announcement-card-copy button b {
    margin-left: 4px;
}

.public-announcement-modal-card {
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 22px;
    display: grid;
    gap: 18px;
}

.public-announcement-modal-card > img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}

.public-announcement-modal-copy {
    display: grid;
    gap: 12px;
    padding-right: 36px;
}

.public-announcement-modal-copy h2 {
    margin: 0;
    font-size: 1.45rem;
}

.public-announcement-modal-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.public-announcement-slider-dots {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.public-announcement-slider-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.22);
    cursor: pointer;
}

.public-announcement-slider-dots button.active {
    width: 24px;
    background: var(--accent);
}

.public-announcement-grid .public-announcement-card {
    min-height: 100%;
}

.announcement-admin-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(238, 243, 242, 0.7);
    border: 1px solid rgba(18, 83, 75, 0.1);
}

.announcement-admin-preview img,
.announcement-admin-row > img,
.announcement-admin-image-placeholder {
    width: 58px;
    height: 58px;
    border-radius: 12px;
}

.announcement-admin-preview img,
.announcement-admin-row > img {
    object-fit: cover;
    display: block;
}

.announcement-admin-preview span,
.announcement-admin-row small {
    color: var(--muted);
    font-size: 0.78rem;
}

.announcement-admin-row {
    grid-template-columns: 58px minmax(0, 1fr) auto auto;
    align-items: center;
}

.announcement-admin-image-placeholder {
    display: grid;
    place-items: center;
    background: rgba(15, 118, 110, 0.1);
    color: var(--accent-dark);
    font-weight: 800;
}

.dealer-announcement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
    max-width: 1120px;
}

.dealer-announcement-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(18, 83, 75, 0.1);
    box-shadow: 0 14px 34px rgba(34, 28, 20, 0.08);
}

.dealer-announcement-card img,
.dealer-announcement-placeholder {
    width: 92px;
    height: 92px;
    border-radius: 16px;
}

.dealer-announcement-card img {
    object-fit: cover;
    display: block;
}

.dealer-announcement-placeholder {
    display: grid;
    place-items: center;
    background: rgba(15, 118, 110, 0.1);
    color: var(--accent-dark);
    font-weight: 900;
    font-size: 1.2rem;
}

.dealer-announcement-card strong,
.dealer-announcement-card span {
    display: block;
}

.dealer-announcement-card strong {
    margin-bottom: 5px;
    font-size: 0.98rem;
}

.dealer-announcement-card span {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.dealer-announcement-card .ghost-button {
    margin-top: 10px;
    padding: 7px 12px;
    min-height: 0;
}

.dealer-announcement-modal-card {
    width: min(720px, calc(100vw - 28px));
}

.dealer-announcement-modal-card > img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 22px;
    margin-bottom: 18px;
}

.dealer-announcement-modal-copy {
    display: grid;
    gap: 10px;
}

.dealer-announcement-modal-copy h2 {
    margin: 0;
}

.dealer-announcement-modal-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.report-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.report-card {
    overflow: hidden;
}

.report-card h3 {
    margin: 0 0 14px;
}

.report-card h3 a {
    color: inherit;
    text-decoration: none;
}

.report-card h3 a:hover {
    color: var(--accent);
}

.report-table {
    display: grid;
    gap: 8px;
    overflow-x: auto;
}

.report-row {
    display: grid;
    grid-template-columns: inherit;
    gap: 10px;
    min-width: 760px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(18, 83, 75, 0.08);
}

.report-head,
.report-table .report-head {
    grid-template-columns: inherit;
    background: rgba(15, 118, 110, 0.1);
    color: var(--accent-dark);
    font-weight: 800;
}

.report-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

.dashboard-kpi-grid,
.dashboard-lower-grid,
.dashboard-chart-grid {
    display: grid;
    gap: 14px;
}

.dashboard-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
}

.dashboard-secondary-kpi-grid {
    margin-top: 0;
}

.dashboard-kpi-card {
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(18, 83, 75, 0.12);
    box-shadow: 0 12px 30px rgba(34, 28, 20, 0.06);
}

.dashboard-kpi-card span {
    display: block;
    margin-bottom: 14px;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-kpi-card strong {
    display: block;
    font-size: 1.35rem;
    color: #07111f;
}

.dashboard-kpi-card small {
    display: block;
    margin-top: 10px;
    color: #637083;
}

.dashboard-orders-card {
    margin-top: 14px;
}

.dashboard-tab-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    border-radius: 14px;
    background: rgba(241, 245, 249, 0.75);
}

.dashboard-tab-strip a {
    color: #52627a;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-order-table {
    display: grid;
    overflow-x: auto;
}

.dashboard-order-row {
    display: grid;
    grid-template-columns: 130px 1.35fr 135px 150px 115px 145px 80px;
    min-width: 940px;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(18, 83, 75, 0.08);
    font-size: 0.84rem;
}

.dashboard-order-head {
    border-radius: 14px 14px 0 0;
    background: rgba(15, 118, 110, 0.08);
    color: #52627a;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-order-row > span,
.dashboard-order-row > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-order-row .mini-button {
    padding: 7px 11px;
    font-size: 0.76rem;
}

.dashboard-status {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
}

.dashboard-status.ok {
    color: #16834a;
    background: #dcfce7;
}

.dashboard-status.pending {
    color: #a15c00;
    background: #fef3c7;
}

.dashboard-lower-grid {
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 14px;
}

.dashboard-action-list,
.dashboard-event-list,
.dashboard-customer-list,
.chart-legend {
    display: grid;
    gap: 10px;
}

.dashboard-action-list a,
.dashboard-customer-list div,
.dashboard-event-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.9);
    color: inherit;
    text-decoration: none;
}

.dashboard-action-list strong {
    margin-left: auto;
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: #fff1d6;
    color: #b25b00;
}

.dashboard-event-list i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--accent);
    flex: 0 0 auto;
}

.dashboard-event-list span,
.dashboard-customer-list span {
    display: grid;
    min-width: 0;
}

.dashboard-event-list small,
.dashboard-customer-list small {
    color: var(--muted);
}

.dashboard-customer-list b {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    background: #e8f7f4;
    color: var(--accent-dark);
}

.dashboard-chart-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.dashboard-chart-card {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.dashboard-chart-card h2 {
    justify-self: start;
}

.pie-chart {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(var(--accent) 0 var(--a), #94d9cf var(--a) calc(var(--a) + var(--b)), #e5e7eb 0);
    box-shadow: inset 0 0 0 28px #fff, 0 14px 32px rgba(34, 28, 20, 0.08);
}

.pie-chart.alt {
    background: conic-gradient(#2563eb 0 var(--a), #93c5fd var(--a) calc(var(--a) + var(--b)), #e5e7eb 0);
}

.pie-chart.warm {
    background: conic-gradient(#f59e0b 0 var(--a), #fcd34d var(--a) calc(var(--a) + var(--b)), #e5e7eb 0);
}

.pie-chart.online {
    background: conic-gradient(#0f766e 0 var(--a), #38bdf8 var(--a) calc(var(--a) + var(--b)), #e5e7eb 0);
}

.pie-chart.payment {
    background: conic-gradient(#16a34a 0 var(--a), #fde68a var(--a) calc(var(--a) + var(--b)), #e5e7eb 0);
}

.pie-chart.danger {
    background: conic-gradient(#dc2626 0 var(--a), #86efac var(--a) calc(var(--a) + var(--b)), #e5e7eb 0);
}

.chart-legend {
    width: 100%;
}

.chart-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #52627a;
    font-size: 0.82rem;
}

.chart-legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent);
}

.dashboard-chart-card .chart-legend span:nth-child(2) i {
    background: #94d9cf;
}

.dashboard-chart-card .chart-legend span:nth-child(3) i {
    background: #e5e7eb;
}

.dashboard-chart-card:has(.pie-chart.alt) .chart-legend span:nth-child(1) i {
    background: #2563eb;
}

.dashboard-chart-card:has(.pie-chart.alt) .chart-legend span:nth-child(2) i {
    background: #93c5fd;
}

.dashboard-chart-card:has(.pie-chart.warm) .chart-legend span:nth-child(1) i {
    background: #f59e0b;
}

.dashboard-chart-card:has(.pie-chart.warm) .chart-legend span:nth-child(2) i {
    background: #fcd34d;
}

.dashboard-chart-card:has(.pie-chart.online) .chart-legend span:nth-child(1) i {
    background: #0f766e;
}

.dashboard-chart-card:has(.pie-chart.online) .chart-legend span:nth-child(2) i {
    background: #38bdf8;
}

.dashboard-chart-card:has(.pie-chart.payment) .chart-legend span:nth-child(1) i {
    background: #16a34a;
}

.dashboard-chart-card:has(.pie-chart.payment) .chart-legend span:nth-child(2) i {
    background: #fde68a;
}

.dashboard-chart-card:has(.pie-chart.danger) .chart-legend span:nth-child(1) i {
    background: #dc2626;
}

.dashboard-chart-card:has(.pie-chart.danger) .chart-legend span:nth-child(2) i {
    background: #86efac;
}

.inline-chart-link {
    color: #52627a;
    text-decoration: none;
}

.inline-chart-link:hover {
    color: var(--accent-dark);
}

.dashboard-insight-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.dashboard-insight-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dashboard-insight-card span {
    display: block;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-insight-card strong {
    display: block;
    margin-top: 8px;
    font-size: 1.45rem;
    color: #07111f;
}

.dashboard-insight-card small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.dashboard-online-list {
    display: grid;
    gap: 6px;
    min-width: 220px;
}

.dashboard-online-list span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    color: var(--accent-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.public-page-hero {
    gap: 10px;
    padding: 22px 6px 8px;
}

.public-page-banner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: none;
}

.public-page-banner img {
    width: 100%;
    height: clamp(140px, 16vw, 230px);
    object-fit: cover;
    display: block;
}

.public-corporate-page-banner img {
    height: clamp(170px, 18vw, 260px);
}

.public-corporate-page {
    display: grid;
    gap: 22px;
}

.public-corporate-page-head {
    display: grid;
    gap: 10px;
    max-width: 920px;
    padding: 18px 0 0;
}

.public-corporate-page-head h1 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.15rem;
    line-height: 1.15;
}

.public-corporate-page-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.public-corporate-page-body article {
    border: 1px solid rgba(18, 83, 75, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.public-corporate-page-body article {
    padding: clamp(24px, 4vw, 42px);
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(34, 28, 20, 0.06);
}

.public-corporate-page-body .public-announcement-body {
    color: #4d443c;
    font-size: 1rem;
    line-height: 1.9;
}

.public-info-stack {
    display: grid;
    gap: 16px;
}

.public-info-stack div {
    display: grid;
    gap: 5px;
}

.career-page-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.career-page-intro {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 18px;
}

.career-steps {
    display: grid;
    gap: 12px;
}

.career-steps div {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.career-application-form {
    display: grid;
    gap: 18px;
}

.career-application-form label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.career-form-section {
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(18, 83, 75, 0.09);
    background: rgba(248, 251, 250, 0.72);
    min-width: 0;
}

.career-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: start;
}

.career-form-section label > span {
    color: #3f3730;
    font-size: 0.9rem;
    line-height: 1.3;
}

.career-application-form input,
.career-application-form select,
.career-application-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(18, 83, 75, 0.14);
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.career-application-form input,
.career-application-form select {
    min-height: 46px;
}

.career-application-form textarea {
    min-height: 120px;
    resize: vertical;
}

.career-application-form input[type="file"] {
    padding: 8px 10px;
    background: #f7fbfa;
    color: rgba(15, 23, 42, 0.68);
}

.career-application-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: rgba(15, 118, 110, 0.12);
    color: var(--accent-dark);
    cursor: pointer;
}

.career-application-form input:focus,
.career-application-form select:focus,
.career-application-form textarea:focus {
    outline: none;
    border-color: rgba(15, 118, 110, 0.42);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.08);
}

.career-span-2 {
    grid-column: span 2;
}

.career-consent-row {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.career-consent-row input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    box-shadow: none;
    flex: 0 0 auto;
}

.career-consent-row span {
    line-height: 1.45;
}

.career-application-list {
    display: grid;
    gap: 14px;
}

.career-application-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(18, 83, 75, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

.career-application-main,
.career-application-meta,
.career-application-actions,
.career-application-detail-grid,
.career-application-detail-block {
    display: grid;
}

.career-application-main,
.career-application-meta {
    gap: 6px;
}

.career-application-item.unread {
    border-color: rgba(15, 118, 110, 0.28);
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.08);
}

.career-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.1);
    color: var(--accent-dark);
    font-size: 0.82rem;
}

.career-status-badge.muted {
    background: rgba(114, 103, 93, 0.12);
    color: var(--muted);
}

.career-application-actions {
    gap: 10px;
    justify-items: end;
    align-content: start;
}

.career-application-actions form {
    margin: 0;
}

.career-application-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.career-application-detail-block {
    gap: 5px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(247, 249, 248, 0.95);
    border: 1px solid rgba(18, 83, 75, 0.08);
}

.career-application-detail-block.full {
    grid-column: 1 / -1;
}

.career-application-detail-photo {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid rgba(18, 83, 75, 0.08);
}

.public-map-embed iframe {
    width: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 24px;
}

.contact-hero,
.contact-grid {
    display: grid;
}

.contact-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    padding: 8px 6px 4px;
}

.contact-hero-copy {
    display: grid;
    gap: 12px;
}

.contact-hero-copy h1 {
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-family: 'Space Grotesk', sans-serif;
}

.contact-hero-copy p {
    max-width: 720px;
    margin: 0;
    color: #6d6359;
    line-height: 1.75;
}

.contact-card {
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 55px rgba(34, 28, 20, 0.08);
}

.contact-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 420px);
    gap: 24px;
}

.contact-card {
    padding: 28px;
}

.contact-details-card {
    display: grid;
    gap: 24px;
}

.contact-detail-list {
    display: grid;
    gap: 14px;
}

.contact-detail-item {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 249, 248, 0.96));
    border: 1px solid rgba(15, 118, 110, 0.08);
}

.contact-detail-item small {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 800;
    color: #7b7269;
}

.contact-detail-item strong {
    font-size: 1.18rem;
    line-height: 1.45;
    color: #1f1a16;
}

.contact-address-item strong {
    font-size: 1.02rem;
    font-weight: 600;
}

.contact-map-shell {
    display: grid;
    gap: 14px;
}

.contact-map-head {
    display: grid;
    gap: 5px;
}

.contact-map-head strong {
    font-size: 1.08rem;
    font-family: 'Space Grotesk', sans-serif;
}

.contact-map-head span {
    color: #6d6359;
}

.contact-map-frame {
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(15, 118, 110, 0.08);
    box-shadow: 0 14px 30px rgba(34, 28, 20, 0.08);
}

.contact-map-frame iframe {
    min-height: 380px;
    border-radius: 28px;
}

.contact-bank-card {
    display: grid;
    gap: 18px;
    align-content: start;
}

.contact-bank-head {
    align-items: start;
}

.contact-bank-list {
    display: grid;
    gap: 14px;
}

.contact-bank-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(241, 248, 247, 0.92), rgba(232, 243, 241, 0.92));
    border: 1px solid rgba(15, 118, 110, 0.08);
}

.contact-bank-accent {
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent), #5fd0c5);
}

.contact-bank-copy {
    display: grid;
    gap: 7px;
}

.contact-bank-copy strong {
    font-size: 1.2rem;
    font-family: 'Space Grotesk', sans-serif;
}

.contact-bank-copy span {
    color: #6d6359;
}

.contact-bank-copy code {
    display: inline-flex;
    width: fit-content;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    color: #173f3a;
    font-size: 0.92rem;
}

.public-form-card input,
.public-form-card select,
.public-form-card textarea {
    width: 100%;
}

.contact-message-section {
    margin-top: 26px;
}

.contact-message-card {
    display: grid;
    gap: 20px;
}

.contact-message-form {
    gap: 18px;
}

.contact-message-verify {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
    padding: 18px;
    border: 1px solid rgba(15, 118, 110, 0.1);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(241, 248, 247, 0.92), rgba(234, 244, 242, 0.88));
}

.contact-message-verify p {
    margin: 0;
    color: #6d6359;
    line-height: 1.65;
}

.panel-divider {
    height: 1px;
    margin: 8px 0 2px;
    background: rgba(31, 26, 22, 0.08);
}

.settings-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.inline-actions,
.inline-form {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.table-pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.table-pagination a {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(31, 26, 22, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
}

.table-pagination a.active {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}

.message-row.is-unread {
    border-left: 4px solid var(--accent);
}

.message-row.is-read {
    opacity: 0.88;
}

.message-detail-card {
    display: grid;
    gap: 18px;
}

.message-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.message-detail-grid div,
.message-detail-body {
    display: grid;
    gap: 6px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 26, 22, 0.06);
}

.message-detail-body p {
    margin: 0;
    color: #5f554b;
    line-height: 1.7;
}

.admin-toast-stack {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 70;
    width: min(360px, calc(100vw - 30px));
    display: grid;
    gap: 12px;
    pointer-events: none;
}

.admin-toast {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(18, 58, 54, 0.96);
    color: #fff;
    box-shadow: 0 18px 38px rgba(10, 32, 29, 0.28);
    transform: translateY(18px);
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: auto;
    position: relative;
}

.admin-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.admin-toast.is-clickable {
    cursor: pointer;
}

.admin-toast-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.admin-toast-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.admin-toast-title {
    font-weight: 700 !important;
    font-family: var(--font-family-heading) !important;
    padding-right: 26px;
}

.admin-toast-text,
.admin-toast-time {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
}

.admin-toast-time {
    font-size: 0.82rem;
}

.danger-button {
    color: #b45309 !important;
    border-color: rgba(180, 83, 9, 0.16) !important;
    background: rgba(255, 247, 237, 0.9) !important;
}

.live-support-widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 65;
    display: grid;
    justify-items: end;
    gap: 12px;
}

.live-support-widget [hidden] {
    display: none !important;
}

.live-support-toggle {
    min-width: 176px;
    padding: 14px 18px 15px;
    border: 0;
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 36%),
        linear-gradient(135deg, var(--accent), #0b4f49);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 18px 35px rgba(18, 58, 54, 0.24);
}

.live-support-toggle-copy {
    display: grid;
    gap: 2px;
    text-align: left;
}

.live-support-toggle-copy strong {
    color: #fff;
}

.live-support-toggle-copy small {
    color: rgba(255, 255, 255, 0.76);
}

.live-support-panel {
    width: min(430px, calc(100vw - 20px));
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 28px 70px rgba(18, 20, 28, 0.22);
    overflow: hidden;
    backdrop-filter: blur(18px);
}

.live-support-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(236, 247, 245, 0.96), rgba(255, 255, 255, 0.7));
}

.live-support-head strong {
    display: block;
    margin-bottom: 3px;
    font-size: 1rem;
}

.live-support-head small {
    display: block;
    color: var(--muted);
    line-height: 1.45;
}

.live-support-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(18, 58, 54, 0.08);
    cursor: pointer;
}

.live-support-body {
    display: grid;
    gap: 14px;
    padding: 0 14px 14px;
}

.live-support-hero {
    display: grid;
    gap: 8px;
    padding: 0 4px;
}

.live-support-hero h3,
.live-support-hero p {
    margin: 0;
}

.live-support-hero p {
    color: #52627a;
    font-size: 0.92rem;
    line-height: 1.45;
}

.live-support-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0f766e;
}

.live-support-start-form,
.live-support-send-form {
    display: grid;
    gap: 13px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 247, 0.88));
    border: 1px solid rgba(15, 118, 110, 0.12);
    box-shadow: 0 14px 38px rgba(18, 58, 54, 0.08);
}

.live-support-start-form label,
.live-support-send-form label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.live-support-start-form label span,
.live-support-send-form label span {
    color: #344054;
    font-size: 0.86rem;
    font-weight: 700;
}

.live-support-start-form input,
.live-support-start-form textarea,
.live-support-send-form textarea,
.live-support-rating-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: #1f2937;
    font: inherit;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.live-support-start-form textarea,
.live-support-send-form textarea,
.live-support-rating-form textarea {
    min-height: 110px;
    resize: vertical;
}

.live-support-start-form input:focus,
.live-support-start-form textarea:focus,
.live-support-send-form textarea:focus,
.live-support-rating-form textarea:focus {
    border-color: rgba(15, 118, 110, 0.46);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.09);
}

.live-support-start-form .primary-button {
    width: 100%;
    margin-top: 2px;
    min-height: 48px;
    border-radius: 15px;
}

.live-support-chat {
    display: grid;
    gap: 14px;
}

.live-support-status {
    padding: 13px 15px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(222, 245, 241, 0.78), rgba(235, 250, 247, 0.92));
    color: #0f3f39;
    font-size: 0.9rem;
    border: 1px solid rgba(15, 118, 110, 0.08);
}

.live-support-messages {
    max-height: 360px;
    overflow-y: auto;
    display: grid;
    gap: 12px;
    padding: 4px 4px 2px;
}

.live-support-bubble,
.support-message-bubble {
    max-width: 88%;
    display: grid;
    gap: 6px;
    padding: 14px 15px;
    border-radius: 18px 18px 18px 8px;
    background: linear-gradient(180deg, rgba(248, 244, 239, 0.95), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(31, 26, 22, 0.05);
}

.live-support-bubble.visitor,
.support-message-bubble.visitor {
    justify-self: end;
    border-radius: 18px 18px 8px 18px;
    background: linear-gradient(180deg, rgba(222, 245, 241, 0.96), rgba(236, 250, 247, 0.94));
}

.live-support-bubble p,
.support-message-bubble p {
    margin: 0;
    line-height: 1.65;
}

.live-support-bubble small,
.support-message-bubble small {
    color: var(--muted);
    font-size: 0.78rem;
}

.live-support-error {
    margin: 0;
    color: #b91c1c;
    font-size: 0.88rem;
}

.live-support-input-shell {
    display: grid;
    gap: 12px;
}

.live-support-rating-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 248, 238, 0.96), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(180, 83, 9, 0.12);
}

.live-support-rating-head {
    display: grid;
    gap: 4px;
}

.live-support-rating-head span,
.live-support-rating-result {
    color: var(--muted);
}

.live-support-rating-form {
    display: grid;
    gap: 12px;
}

.live-support-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 6px;
}

.live-support-stars input {
    display: none;
}

.live-support-stars span {
    font-size: 1.8rem;
    color: rgba(180, 83, 9, 0.28);
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}

.live-support-stars label:hover span,
.live-support-stars label:hover ~ label span,
.live-support-stars label input:checked + span {
    color: #f59e0b;
}

.live-support-stars label:hover span {
    transform: translateY(-1px);
}

.live-support-rating-result {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(222, 245, 241, 0.72);
}

.support-page-grid {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    align-items: start;
}

.support-queue-card,
.support-chat-card {
    display: grid;
    gap: 18px;
}

.support-status-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.support-status-pill {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 26, 22, 0.08);
}

.support-status-pill.active {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}

.support-conversation-list {
    display: grid;
    gap: 12px;
}

.support-conversation-row {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(31, 26, 22, 0.08);
    background: rgba(255, 255, 255, 0.74);
}

.support-conversation-row.active {
    border-color: rgba(15, 118, 110, 0.28);
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.1);
}

.support-conversation-top,
.support-conversation-meta,
.support-admin-actions,
.support-chat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.support-badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    background: rgba(255, 255, 255, 0.8);
}

.support-badge.waiting {
    color: #9a3412;
    background: #ffedd5;
}

.support-badge.active {
    color: #115e59;
    background: #ccfbf1;
}

.support-badge.closed {
    color: #475569;
    background: #e2e8f0;
}

.support-chat-meta {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 26, 22, 0.06);
}

.support-chat-meta div {
    display: grid;
    gap: 4px;
}

.support-message-thread {
    min-height: 360px;
    max-height: 520px;
    overflow-y: auto;
    display: grid;
    gap: 12px;
    padding: 8px 4px 8px 0;
}

.support-rating-summary {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 250, 241, 0.94), rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(180, 83, 9, 0.12);
}

.support-rating-summary p,
.support-rating-summary small {
    margin: 0;
    color: var(--muted);
}

.public-announcement-body {
    margin-top: 12px;
}

.public-catalog-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(18, 83, 75, 0.1);
    box-shadow: 0 12px 30px rgba(34, 28, 20, 0.06);
    color: inherit;
    text-decoration: none;
}

.public-catalog-card img,
.public-catalog-card-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 14px;
}

.public-catalog-card img {
    object-fit: cover;
    display: block;
}

.public-catalog-card-placeholder {
    display: grid;
    place-items: center;
    background: rgba(15, 118, 110, 0.1);
    color: var(--accent-dark);
    font-size: 1.6rem;
    font-weight: 800;
}

.public-catalog-card-copy {
    display: grid;
    gap: 8px;
}

.public-catalog-card-copy h2 {
    margin: 0;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.35;
}

.public-catalog-card-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.public-catalog-card-copy span {
    width: max-content;
    color: var(--accent-dark);
    font-weight: 800;
    font-size: 0.9rem;
}

.public-catalog-card-copy span b {
    margin-left: 4px;
}

.public-footer {
    width: 100%;
    margin: 20px 0 0;
    flex-shrink: 0;
    padding: 42px 36px 20px;
    border-radius: 0;
    background: var(--accent-dark);
    color: #edf8f6;
}

.public-footer-grid {
    width: min(1220px, 100%);
    margin: 0 auto;
    grid-template-columns: 1fr 1.2fr 1fr 1fr;
    gap: 34px;
    align-items: start;
}

.public-footer h3,
.public-footer strong {
    margin: 0 0 14px;
    color: #fff;
}

.public-footer h3 {
    color: var(--accent);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Space Grotesk', sans-serif;
}

.public-footer p,
.public-footer a,
.public-footer span,
.public-footer input,
.public-footer button {
    color: rgba(237, 248, 246, 0.9);
    line-height: 1.45;
    font-size: 0.95rem;
    font-weight: 400;
}

.public-footer-links,
.public-footer-meta,
.public-footer-contact {
    display: grid;
    gap: 10px;
}

.public-footer-links a.is-child {
    padding-left: 14px;
    font-size: 0.9rem;
    opacity: 0.92;
}

.public-footer-links a {
    font-weight: 400;
}

.public-footer-contact strong {
    margin-bottom: 4px;
    font-size: 1.08rem;
    line-height: 1.4;
    font-weight: 500;
}

.public-footer-contact a,
.public-footer-contact span {
    color: rgba(237, 248, 246, 0.68);
}

.public-footer-subscribe {
    display: grid;
    gap: 12px;
}

.public-footer-subscribe input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #f5fbfa;
    font-weight: 400;
}

.public-footer-subscribe input::placeholder {
    color: rgba(237, 248, 246, 0.6);
}

.public-footer-subscribe button {
    border: 0;
    border-radius: 14px;
    padding: 13px 18px;
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.public-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.public-footer-socials a {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-weight: 500;
    transition: 0.2s ease;
}

.public-footer-socials a span {
    color: #fff;
    font-size: 0.95rem;
}

.public-footer-socials a svg {
    width: 20px;
    height: 20px;
    display: block;
}

.public-footer-socials a svg rect,
.public-footer-socials a svg circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.public-footer-socials a svg path {
    fill: currentColor;
}

.public-footer-socials a:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
}

.public-footer-bottom {
    width: min(1220px, 100%);
    margin-left: auto;
    margin-right: auto;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.public-footer-bottom span {
    color: rgba(237, 248, 246, 0.82);
    font-weight: 400;
}

.design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

@media (max-width: 980px) {
    .public-utilitybar-inner,
    .public-topbar-inner,
    .public-hero-shell,
    .public-grid-two,
    .contact-hero,
    .contact-grid,
    .public-footer-grid,
    .public-card-list-three,
    .design-grid,
    .dashboard-kpi-grid,
    .dashboard-lower-grid,
    .dashboard-chart-grid,
    .dashboard-insight-grid {
        grid-template-columns: 1fr;
    }

    .public-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-topbar {
        padding: 18px 18px 20px;
    }

    .public-topbar-inner {
        justify-items: start;
        width: 100%;
    }

    .public-nav,
    .public-utility-left,
    .public-utility-right,
    .public-topbar-actions {
        justify-content: flex-start;
    }

    .public-hero-image {
        height: 360px;
    }
}

.auth-panel {
    width: min(1100px, 100%);
    gap: 24px;
}

.auth-copy,
.auth-card {
    flex: 1;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    padding: 34px;
}

.auth-copy p {
    max-width: 560px;
    color: var(--muted);
}

.auth-card {
    max-width: 420px;
    display: grid;
    gap: 16px;
}

.auth-card label,
.admin-form label {
    display: grid;
    gap: 8px;
}

.admin-shell .admin-form label {
    gap: 6px;
}

.auth-metrics {
    gap: 12px;
    margin-top: 28px;
}

.auth-metrics div {
    flex: 1;
    padding: 16px;
    border-radius: 20px;
    background: rgba(15, 118, 110, 0.06);
}

.auth-metrics strong {
    display: block;
    font-size: 1.4rem;
}

.admin-form {
    gap: 14px;
}

.admin-shell .admin-form {
    gap: 12px;
}

.admin-shell .admin-form label > span {
    font-size: 0.78rem;
    font-weight: 700;
    color: #5f554c;
}

.cart-page-grid {
    grid-template-columns: minmax(0, 1.5fr) 360px;
}

.cart-table {
    display: grid;
    gap: 8px;
}

.cart-head,
.cart-line {
    display: grid;
    grid-template-columns: 46px 84px minmax(220px, 1.5fr) 100px 100px 90px 100px 68px 110px 44px;
    gap: 8px;
    align-items: center;
}

.cart-head {
    padding: 0 4px 4px;
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cart-line {
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.74);
}

.cart-product {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.cart-product strong {
    font-size: 0.9rem;
}

.cart-product small,
.price-cell-inline {
    font-size: 0.78rem;
}

.price-cell-inline {
    white-space: nowrap;
}

.total-cell {
    font-weight: 800;
}

.danger-button {
    background: #fff1ef;
    color: #c2410c;
}

.summary-stack {
    display: grid;
    gap: 12px;
}

.checkout-panel {
    display: grid;
    gap: 14px;
    width: min(780px, 100%);
}

.checkout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.checkout-grid label {
    display: grid;
    gap: 8px;
}

.modern-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 14px 44px 14px 16px !important;
    padding-right: 42px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.04), rgba(14, 165, 161, 0.07)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2312403a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
    border: 1px solid rgba(15, 118, 110, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: #1f1a16;
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.modern-select:focus,
.order-note-field textarea:focus {
    outline: none;
    border-color: rgba(15, 118, 110, 0.42) !important;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.08);
}

.checkout-grid span,
.delivery-option-card span {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.order-note-field {
    display: grid;
    gap: 8px;
}

.order-note-field textarea {
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.04), rgba(14, 165, 161, 0.06));
    border-radius: 16px;
    padding: 14px 16px;
    resize: vertical;
    min-height: 110px;
    color: var(--text);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    gap: 14px;
}

.summary-row span {
    color: var(--muted);
    font-size: 0.82rem;
}

.summary-row strong {
    font-size: 0.92rem;
}

.total-summary {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(14, 165, 161, 0.12));
}

.payment-summary-discount-row {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.12);
}

.payment-summary-term-row {
    background: rgba(15, 118, 110, 0.05);
    border-color: rgba(15, 118, 110, 0.1);
}

.payment-summary-term-row strong {
    color: var(--accent-dark);
}

.payment-summary-discount-row strong {
    color: var(--accent-dark);
}

.total-summary span,
.total-summary strong {
    font-size: 0.9rem;
}

.admin-form textarea {
    resize: vertical;
}

.admin-shell .admin-form input,
.admin-shell .admin-form select,
.admin-shell .admin-form textarea,
.admin-shell .order-admin-controls select,
.admin-shell .order-admin-controls input {
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 0.84rem;
    line-height: 1.35;
    background: rgba(255, 255, 255, 0.92);
}

.admin-shell .admin-form textarea {
    min-height: 118px;
}

.form-split {
    gap: 12px;
    align-items: stretch;
}

.admin-shell .form-split {
    gap: 10px;
}

.form-split > label {
    flex: 1;
}

.product-currency-form .product-price-row,
.product-currency-form .product-detail-row {
    display: grid;
    gap: 12px;
}

.product-currency-form .product-price-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-currency-form .product-detail-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.currency-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.option-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(18, 83, 75, 0.12);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(239, 246, 242, 0.92), rgba(255, 255, 255, 0.96));
}

.option-card input {
    margin-top: 5px;
}

.option-card strong,
.option-card small {
    display: block;
}

.option-card small {
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.45;
}

.currency-info-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-size: 0.84rem;
}

.currency-info-strip span {
    padding: 10px 12px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}

.form-actions {
    justify-content: flex-start;
    gap: 10px;
}

.admin-shell .form-actions {
    padding-top: 4px;
}

.checkbox-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.admin-shell .checkbox-row {
    gap: 8px;
    font-size: 0.82rem;
}

.admin-shell .checkbox-row input {
    min-height: auto;
}

.compact-list .row-card {
    padding: 12px 14px;
}

.admin-shell .compact-list {
    gap: 8px;
}

.admin-shell .compact-list .row-card {
    padding: 10px 12px;
    border-radius: 14px;
}

.admin-shell .row-card strong {
    font-size: 0.88rem;
    line-height: 1.3;
}

.admin-shell .row-card span {
    font-size: 0.76rem;
    line-height: 1.35;
}

.product-admin-list .row-card {
    align-items: center;
    gap: 12px;
}

.product-admin-main {
    min-width: 0;
}

.product-admin-main strong,
.product-admin-main span {
    display: block;
}

.product-admin-main span {
    margin-top: 2px;
}

.admin-shell .product-admin-list .row-end {
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.admin-shell .product-admin-list .row-end strong {
    font-size: 0.92rem;
    white-space: nowrap;
}

.product-admin-layout {
    align-items: start;
}

.admin-stack {
    display: grid;
    gap: 14px;
}

.import-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.import-form {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid var(--line);
}

.admin-note {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--muted);
}

.admin-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 0.8fr)) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-shell .admin-filter-bar input,
.admin-shell .admin-filter-bar select {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.84rem;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-filter-bar .filter-actions .primary-button,
.admin-filter-bar .filter-actions .ghost-button {
    min-height: 42px;
}

.customer-inline-select {
    min-width: 170px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
}

.module-page-card {
    display: grid;
    gap: 18px;
}

.module-eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.module-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.module-feature-card,
.module-next-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 249, 0.86));
}

.module-feature-card {
    display: grid;
    gap: 8px;
}

.module-feature-card span {
    color: #766d64;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.module-feature-card strong,
.module-next-card strong {
    font-size: 1rem;
}

.module-feature-card p,
.module-next-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.warehouse-stock-row,
.warehouse-picking-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.warehouse-picking-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1fr) auto;
}

.warehouse-picking-row small {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.warehouse-picking-row .warehouse-picking-meta {
    margin-top: 8px;
    color: #0f766e;
    font-weight: 700;
}

.warehouse-location-page {
    grid-template-columns: minmax(420px, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
}

.warehouse-location-form-card,
.warehouse-location-list-card {
    overflow: hidden;
}

.warehouse-location-form {
    gap: 14px;
}

.warehouse-form-section {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 18px;
    background: rgba(248, 250, 249, 0.7);
}

.warehouse-location-form .form-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.warehouse-location-form .warehouse-address-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.warehouse-location-form input,
.warehouse-location-form select {
    width: 100%;
    min-width: 0;
}

.warehouse-location-list {
    display: grid;
    gap: 10px;
}

.warehouse-location-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.72fr) 88px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

.warehouse-location-card.passive {
    opacity: 0.68;
}

.warehouse-location-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.warehouse-location-main span,
.warehouse-location-stats span {
    color: #766d64;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.warehouse-location-main strong,
.warehouse-location-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.warehouse-location-main small {
    color: var(--muted);
    font-size: 0.78rem;
}

.warehouse-location-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.warehouse-location-stats div {
    display: grid;
    gap: 3px;
    min-height: 58px;
    padding: 10px 11px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 14px;
    background: rgba(248, 250, 249, 0.92);
}

.warehouse-location-stats strong {
    font-size: 0.84rem;
    white-space: nowrap;
}

.product-picker {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1.1fr);
    gap: 10px;
    align-items: end;
}

.product-lookup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.product-lookup-row input {
    min-width: 0;
}

.barcode-scan-button {
    white-space: nowrap;
}

.barcode-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.62);
}

.barcode-card {
    width: min(520px, 100%);
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow);
}

.barcode-card video {
    width: 100%;
    max-height: 360px;
    border-radius: 16px;
    background: #0f172a;
}

.stock-badge,
.image-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.stock-badge.in {
    background: rgba(22, 163, 74, 0.1);
    color: #166534;
}

.stock-badge.out {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
}

.image-badge {
    background: rgba(15, 118, 110, 0.09);
    color: var(--accent-strong);
}

.product-list-page {
    display: grid;
    gap: 14px;
}

.product-list-head {
    margin-bottom: 0;
}

.full-list .row-card {
    justify-content: space-between;
}

.product-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 528px;
    align-items: center;
    gap: 14px;
}

.product-list-meta {
    display: grid;
    align-items: center;
    grid-template-columns: 206px 78px 104px 84px;
    gap: 12px;
    justify-items: end;
    min-width: 0;
}

.product-list-meta strong {
    display: block;
    min-width: 98px;
    text-align: right;
    white-space: nowrap;
}

.product-list-meta .stock-badge,
.product-list-meta .image-badge,
.product-list-meta .mini-button {
    width: 100%;
}

.product-list-meta .mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding-left: 0;
    padding-right: 0;
    line-height: 1;
}

.quick-stock-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 4px;
    border: 1px solid rgba(22, 101, 52, 0.12);
    border-radius: 999px;
    background: #ecfdf3;
}

.quick-stock-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 3px 4px 3px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    flex: 1;
    white-space: nowrap;
}

.quick-stock-control.in {
    color: #166534;
    background: transparent;
}

.quick-stock-control.out {
    color: #991b1b;
    background: transparent;
}

.quick-stock-control input {
    width: 72px;
    height: 26px;
    padding: 2px 6px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    color: inherit;
    font-size: 0.8rem;
    font-weight: 900;
    text-align: center;
}

.quick-stock-control input:focus {
    outline: 2px solid rgba(15, 118, 110, 0.24);
}

.product-list-meta .quick-stock-button {
    min-width: 64px;
    width: auto;
    min-height: 30px;
    padding: 6px 10px;
    border-color: rgba(20, 184, 166, 0.25);
    background: #ffffff;
    color: #164e46;
    font-size: 0.76rem;
    font-weight: 800;
}

.customer-admin-page {
    display: grid;
    gap: 18px;
    min-height: calc(100vh - 170px);
}

.customer-filter-bar {
    grid-template-columns: minmax(260px, 1.4fr) 180px 180px auto;
}

.supplier-admin-page {
    grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
}

.supplier-row {
    display: grid;
    grid-template-columns: 74px minmax(160px, 1.2fr) minmax(110px, 0.8fr) 105px minmax(135px, 0.9fr) minmax(140px, 1fr) 74px 106px 66px 66px 70px;
    gap: 8px;
    align-items: center;
}

.supplier-row input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.8rem;
}

.supplier-row .checkbox-row {
    align-items: center;
    justify-content: center;
}

.supplier-balance {
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(238, 243, 242, 0.9);
    font-size: 0.78rem;
    text-align: right;
    white-space: nowrap;
}

.supplier-directory-card {
    margin-bottom: 18px;
}

.supplier-card-list {
    display: grid;
    gap: 10px;
}

.supplier-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px 132px 142px 110px auto;
    gap: 12px;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
}

.supplier-card > div:first-child {
    display: grid;
    gap: 3px;
}

.supplier-card span {
    color: #766d64;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.supplier-card strong {
    font-size: 0.96rem;
}

.supplier-card small {
    color: var(--muted);
    font-size: 0.78rem;
}

.supplier-card-meta {
    padding: 10px 12px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 14px;
    background: rgba(248, 250, 249, 0.9);
    display: grid;
    gap: 3px;
}

.supplier-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.supplier-account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 12px;
    margin: 12px 0;
}

.supplier-ledger-form,
.supplier-bank-card {
    padding: 14px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(248, 250, 249, 0.92), rgba(255, 255, 255, 0.96));
}

.supplier-bank-card {
    display: grid;
    gap: 7px;
    align-content: start;
}

.supplier-bank-card span {
    color: #766d64;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.supplier-bank-card small {
    color: var(--muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.supplier-modal-card {
    width: min(920px, calc(100vw - 32px));
}

.supplier-statement-card .statement-table-head,
.supplier-statement-card .statement-table-row {
    grid-template-columns: 150px 120px minmax(0, 1fr) 140px 140px 104px;
}

.supplier-entry-modal-card {
    width: min(920px, calc(100vw - 32px));
}

.supplier-entry-document {
    display: grid;
    gap: 16px;
}

.supplier-entry-document-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.supplier-entry-document-head span,
.supplier-entry-document-grid span,
.supplier-entry-note span {
    color: #766d64;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.supplier-entry-document-head h2 {
    margin: 4px 0;
    font-size: 1.55rem;
}

.supplier-entry-document-head p,
.supplier-entry-document-head small {
    color: var(--muted);
}

.supplier-entry-document-head > div:last-child {
    text-align: right;
    display: grid;
    gap: 5px;
}

.supplier-entry-document-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.supplier-entry-document-grid div,
.supplier-entry-note {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(248, 250, 249, 0.86);
    display: grid;
    gap: 6px;
}

.supplier-invoice-lines {
    display: grid;
    gap: 8px;
}

.supplier-invoice-line-head,
.supplier-invoice-line-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px 116px 72px 72px 118px;
    gap: 10px;
    align-items: center;
}

.supplier-invoice-line-head {
    color: #766d64;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.supplier-invoice-line-row {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.purchase-invoice-page,
.purchase-history-card,
.supplier-statement-card {
    margin-bottom: 18px;
}

.purchase-invoice-form {
    gap: 14px;
}

.purchase-invoice-head {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(130px, 0.7fr) minmax(130px, 0.7fr) minmax(150px, 0.75fr) minmax(180px, 0.9fr);
    gap: 10px;
}

.purchase-item-table {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 18px;
    background: rgba(248, 250, 249, 0.76);
}

.purchase-item-head,
.purchase-item-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 90px 130px 105px 90px 140px;
    gap: 8px;
    align-items: center;
}

.purchase-item-head {
    color: #766d64;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.purchase-item-row select,
.purchase-item-row input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 0.82rem;
}

.purchase-item-row strong {
    min-height: 38px;
    padding: 9px 10px;
    border-radius: 12px;
    background: #eef3f2;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.purchase-total-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.purchase-total-panel div {
    padding: 14px 16px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 16px;
    background: rgba(248, 250, 249, 0.9);
    display: grid;
    gap: 6px;
}

.purchase-total-panel span {
    color: #766d64;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.purchase-total-panel strong {
    font-size: 1.02rem;
}

.purchase-total-panel .grand {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
}

.purchase-total-panel .grand span {
    color: rgba(255, 255, 255, 0.78);
}

.stock-admin-page {
    grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
}

.stock-purchase-divider {
    height: 1px;
    margin: 18px 0;
    background: linear-gradient(90deg, transparent, rgba(18, 83, 75, 0.16), transparent);
}

.compact-head {
    margin-bottom: 2px;
}

.compact-head h2 {
    font-size: 1rem;
}

.purchase-stock-form {
    padding: 14px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(239, 246, 242, 0.82), rgba(255, 255, 255, 0.92));
}

.pagination-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.pagination-row .mini-button {
    min-width: 38px;
    justify-content: center;
    text-align: center;
}

.pagination-row .active-page {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.stock-movement-list {
    gap: 8px;
}

.stock-movement-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 237, 0.48));
}

.stock-movement-main {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.stock-movement-main strong {
    font-size: 0.88rem;
}

.stock-movement-main span {
    color: #7a7168;
    font-size: 0.78rem;
    font-weight: 700;
}

.stock-movement-main small {
    color: var(--muted);
    font-size: 0.78rem;
}

.stock-movement-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.stock-movement-badge {
    min-width: 70px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1;
    text-align: center;
}

.stock-movement-badge b {
    font-size: 0.76rem;
}

.stock-movement-badge.in {
    color: #166534;
    background: #dcfce7;
}

.stock-movement-badge.out {
    color: #9a3412;
    background: #ffedd5;
}

.stock-movement-meta span {
    color: #8a8178;
    font-size: 0.76rem;
}

.payment-options-page-grid {
    grid-template-columns: 1fr;
}

.payment-options-card {
    position: relative;
    overflow: hidden;
}

.payment-options-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.1), transparent 28%),
        radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.08), transparent 26%);
    pointer-events: none;
}

.payment-options-card > * {
    position: relative;
    z-index: 1;
}

.payment-options-head {
    align-items: flex-start;
}

.payment-options-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.payment-options-form {
    gap: 16px;
}

.payment-option-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.payment-option-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(31, 26, 22, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 250, 248, 0.9));
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.payment-option-create-card {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.06), rgba(255, 255, 255, 0.92));
    border-style: dashed;
}

.payment-option-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.payment-option-card-head strong {
    display: block;
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-size: 1rem;
    line-height: 1.2;
}

.payment-option-order {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.payment-option-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.payment-option-field-grid label {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(31, 26, 22, 0.06);
}

.switch-field {
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    align-self: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 118, 110, 0.07);
    border: 1px solid rgba(15, 118, 110, 0.08);
}

.switch-field span {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--accent-dark) !important;
}

.payment-options-actions {
    justify-content: flex-start;
    padding-top: 2px;
}

.payment-discount-note {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.06), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(31, 26, 22, 0.06);
}

.payment-discount-note > span {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5f554c;
}

.payment-discount-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.payment-discount-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(31, 26, 22, 0.06);
    font-size: 0.76rem;
    font-weight: 700;
    color: #4d443c;
}

.payment-discount-tag strong {
    color: var(--accent-dark);
}

.customer-list-frame {
    position: relative;
    border-radius: 26px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(245, 158, 11, 0.1));
}

.customer-admin-list {
    border-radius: 25px;
    background: radial-gradient(circle at top right, rgba(15, 118, 110, 0.06), transparent 28%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 252, 249, 0.94));
    padding: 14px;
}

.customer-row-card {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.customer-list-header {
    display: grid;
    grid-template-columns: minmax(250px, 1.4fr) minmax(620px, 2.4fr) minmax(220px, 0.9fr);
    gap: 16px;
    padding: 0 12px 10px 12px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.customer-term-fields-wide {
    grid-template-columns: repeat(5, minmax(88px, 1fr));
}

.customer-term-meta-rich {
    min-width: 220px;
    align-content: start;
}

.customer-modal-card {
    width: min(1500px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    margin: 12px auto;
    padding: 22px;
    overflow: auto;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(247, 244, 237, 0.42));
}

.customer-modal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-address-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-modal-form {
    display: grid;
    gap: 12px;
}

.customer-modal-body {
    display: grid;
    gap: 12px;
}

.customer-modal-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.customer-modal-lower-grid.has-docs {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
}

.customer-form-section {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 237, 0.42));
    border: 1px solid rgba(18, 83, 75, 0.1);
    min-width: 0;
}

.customer-form-section .form-split {
    margin: 0;
}

.customer-form-section-main,
.customer-form-section-address,
.customer-form-section-docs {
    min-width: 0;
}

.customer-form-section-docs {
    align-content: start;
}

.customer-modal-form > label,
.customer-modal-form .form-split > label {
    min-width: 0;
}

.customer-modal-form .form-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.customer-modal-form .customer-modal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-modal-form .customer-address-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-modal-form textarea {
    min-height: 110px;
    font-size: 0.87rem;
    border-radius: 15px;
}

.customer-modal-form .checkbox-row {
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(238, 243, 242, 0.72);
    border: 1px solid rgba(18, 83, 75, 0.1);
}

.customer-modal-form .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    justify-content: flex-end;
}

.customer-modal-form .primary-button,
.customer-modal-form .ghost-button {
    min-height: 40px;
}

.customer-action-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.customer-action-group-wide {
    justify-content: flex-end;
}

.customer-action-group .mini-button,
.customer-action-group .ghost-button,
.customer-action-group .primary-button {
    min-width: 96px;
    height: 38px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    flex: 0 0 auto;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.customer-action-group .ghost-button {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(31, 26, 22, 0.08);
    color: #4d443c;
}

.customer-modal-form input,
.customer-modal-form select {
    min-height: 38px;
    min-width: 0;
    font-size: 0.87rem;
}

.customer-modal-form label span {
    font-size: 0.82rem;
    font-weight: 600;
    color: #3f3730;
}

.customer-modal-location-row {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(238, 243, 242, 0.72);
    border: 1px solid rgba(18, 83, 75, 0.1);
    min-width: 0;
}

.customer-modal-location-row,
.customer-modal-location-row span {
    font-size: 0.76rem;
    line-height: 1.45;
}

.customer-modal-location-row span {
    overflow-wrap: anywhere;
}

.customer-modal-doc-grid {
    grid-template-columns: minmax(0, 1fr);
}

.customer-modal-doc-wide {
    grid-column: 1 / -1;
}

.customer-modal-form input[type="file"] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 15px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: #f6fbfa;
    color: rgba(15, 23, 42, 0.62);
    font-size: 0.84rem;
    overflow: hidden;
}

.customer-modal-form input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 9px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.18), rgba(125, 211, 252, 0.18));
    color: #0b5b58;
    font-weight: 700;
    cursor: pointer;
}

.customer-uploaded-documents {
    gap: 12px;
}

.customer-uploaded-documents-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.customer-uploaded-documents-head h3 {
    margin: 0;
    font-size: 0.95rem;
}

.customer-uploaded-documents-head span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.customer-uploaded-document-list {
    display: grid;
    gap: 8px;
}

.customer-uploaded-document-item {
    display: grid;
    grid-template-columns: minmax(160px, 0.34fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    color: inherit;
    text-decoration: none;
}

.customer-uploaded-document-item strong {
    font-size: 0.82rem;
}

.customer-uploaded-document-item span {
    min-width: 0;
    color: var(--muted);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-uploaded-document-item:hover {
    border-color: rgba(15, 118, 110, 0.22);
    background: #fff;
}

.customer-uploaded-document-empty {
    padding: 12px;
    border-radius: 14px;
}

@media (max-width: 900px) {
    .public-announcement-slider,
    .public-announcement-grid,
    .public-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .career-page-layout,
    .career-form-grid,
    .career-application-detail-grid,
    .career-application-item {
        grid-template-columns: 1fr;
    }

    .career-page-intro {
        position: static;
    }

    .career-span-2,
    .career-application-detail-block.full {
        grid-column: auto;
    }

    .public-corporate-page-body {
        grid-template-columns: 1fr;
    }

    .customer-modal-lower-grid.has-docs {
        grid-template-columns: 1fr;
    }

    .customer-form-section-docs {
        order: 2;
    }

    .customer-modal-card {
        width: min(100vw - 16px, 1320px);
    }
}

.customer-action-group .ghost-button:hover {
    background: #ffffff;
    border-color: rgba(15, 118, 110, 0.18);
    color: var(--accent-dark);
}

.customer-action-group .primary-button {
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.18);
}

.ledger-limit-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ledger-limit-box {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px 18px;
    background: rgba(248, 250, 249, 0.9);
    display: grid;
    gap: 6px;
}

.ledger-limit-box span {
    color: var(--muted);
    font-size: 0.82rem;
}

.admin-modal .modal-card {
    width: min(760px, calc(100vw - 32px));
    padding: 22px;
}

.admin-modal .customer-modal-card {
    width: min(1500px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    margin: 12px auto;
    overflow: auto;
}

.form-modal-card {
    display: grid;
    gap: 12px;
}

.admin-modal .product-modal-card {
    width: min(1320px, calc(100vw - 32px));
    max-height: none;
    margin: 18px auto;
    padding: 22px;
    overflow: visible;
}

.product-modal-card .panel-head {
    padding-right: 42px;
}

.product-currency-form {
    display: grid;
    gap: 12px;
}

.product-modal-body {
    overflow: visible;
    padding: 0;
    display: grid;
    gap: 12px;
}

.product-form-section {
    padding: 12px 14px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 237, 0.42));
    display: grid;
    gap: 10px;
    min-width: 0;
}

.product-identity-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-identity-grid .span-2 {
    grid-column: span 2;
}

.product-modal-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 12px;
    align-items: stretch;
}

.product-pricing-section .product-price-row,
.product-pricing-section .product-detail-row {
    gap: 8px;
}

.product-pricing-section .product-price-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-pricing-section .product-detail-row {
    grid-template-columns: minmax(120px, 0.8fr) minmax(110px, 0.72fr) minmax(150px, 1fr) minmax(205px, 1.34fr);
}

.product-pricing-section input,
.product-pricing-section select {
    min-height: 38px;
    min-width: 0;
}

.product-subsection-title {
    margin-top: 2px;
    color: #5f554c;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-supplier-grid {
    display: grid;
    grid-template-columns: minmax(125px, 0.8fr) minmax(140px, 0.86fr) minmax(190px, 1.2fr) minmax(125px, 0.74fr);
    gap: 8px;
}

.stock-aging-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(126px, 1fr));
    gap: 8px;
}

.stock-aging-panel div {
    padding: 10px 11px;
    border: 1px solid rgba(18, 83, 75, 0.1);
    border-radius: 14px;
    background: rgba(238, 243, 242, 0.72);
    display: grid;
    gap: 4px;
}

.stock-aging-panel span {
    color: #766d64;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.stock-aging-panel strong {
    color: #1f2624;
    font-size: 0.78rem;
    white-space: nowrap;
}

.product-media-section textarea {
    min-height: 92px;
}

.product-media-section {
    align-content: start;
}

.product-thumb-strip {
    display: grid;
    gap: 7px;
}

.product-thumb-strip > span {
    color: #5f554c;
    font-size: 0.78rem;
    font-weight: 700;
}

.product-thumb-strip > div {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.product-thumb-button {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    padding: 0;
    border: 1px solid rgba(18, 83, 75, 0.14);
    border-radius: 14px;
    background: #f6fbfa;
    overflow: hidden;
    cursor: pointer;
}

.product-thumb-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-thumb-button:hover {
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.12);
}

.product-media-section input[type="file"] {
    padding: 8px 10px;
}

.product-media-section .checkbox-row {
    align-self: end;
}

.product-currency-form label,
.product-currency-form input,
.product-currency-form select,
.product-currency-form textarea {
    min-width: 0;
}

.product-modal-card .form-actions {
    margin: 0;
    padding: 0;
}

.modal-dismiss {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #eef3f2;
    color: var(--accent-dark);
    font-size: 1.2rem;
    font-weight: 700;
}

.import-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.import-hero-grid {
    align-items: stretch;
}

.import-card {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
}

.import-card::before,
.import-summary-card::before,
.import-mapper-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.import-card-accent::before {
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(15, 118, 110, 0.03), transparent 58%);
}

.import-card-plain::before {
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.09), transparent 28%),
        linear-gradient(180deg, rgba(194, 65, 12, 0.02), transparent 62%);
}

.standalone-import-form {
    min-height: 100%;
    align-content: start;
}

.import-mapping-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    align-items: start;
    gap: 16px;
}

.import-summary-card::before {
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(14, 165, 161, 0.03)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.35), transparent 34%);
}

.import-mapper-card::before {
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 30%);
}

.import-card > *,
.import-summary-card > *,
.import-mapper-card > * {
    position: relative;
    z-index: 1;
}

.import-inline-actions {
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.import-tip-box {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(15, 118, 110, 0.08);
}

.import-tip-box.soft {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.1);
}

.import-tip-box strong {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent-strong);
    letter-spacing: 0.02em;
}

.import-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.import-toolbar-note {
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.5;
}

.import-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.import-stat-tile {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(31, 26, 22, 0.06);
}

.import-stat-tile.wide {
    grid-column: 1 / -1;
}

.import-stat-tile span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 800;
}

.import-stat-tile strong {
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
}

.import-summary-head {
    align-items: flex-start;
}

.import-cancel-form {
    flex-shrink: 0;
}

.xml-sample-table {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    max-height: 540px;
    overflow: auto;
    padding-right: 4px;
}

.xml-sample-row {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(28, 25, 23, 0.04);
}

.xml-sample-row strong {
    font-size: 0.82rem;
}

.xml-sample-row span {
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.45;
}

.xml-mapping-form {
    gap: 16px;
}

.xml-mapping-grid,
.xml-defaults-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.xml-mapping-grid label,
.xml-defaults-grid label {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(31, 26, 22, 0.06);
}

.match-mode-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(15, 118, 110, 0.06);
    border: 1px solid rgba(15, 118, 110, 0.1);
}

.xml-image-picker {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(31, 26, 22, 0.06);
}

.xml-image-picker > span {
    font-size: 0.78rem;
    font-weight: 700;
    color: #5f554c;
}

.xml-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.xml-checkbox-grid .checkbox-row {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(245, 247, 246, 0.92);
    border: 1px solid rgba(31, 26, 22, 0.06);
}

.xml-checkbox-grid .checkbox-row span {
    font-size: 0.76rem;
    font-weight: 700;
    color: #4d443c;
}

.import-submit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: 4px;
}

.order-admin-row {
    gap: 14px;
}

.order-customer-card {
    display: grid;
    gap: 8px;
}

.order-customer-card .row-card {
    padding: 12px 14px;
    border-radius: 16px;
}

.order-main-info {
    min-width: 0;
}

.order-inline-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.order-customer-card .row-card strong {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.order-inline-meta span {
    font-size: 0.76rem;
    font-weight: 600;
    color: #7a6e64;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.order-inline-meta span::before {
    content: "•";
    margin-right: 8px;
    color: #b3a59a;
}

.order-customer-card .row-end strong {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    color: #1f1a16;
}

.order-customer-card .row-end span {
    font-size: 0.8rem;
    color: #7a6e64;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.order-note-text,
.cancel-note {
    display: block;
    margin-top: 4px;
    font-size: 0.74rem;
    line-height: 1.35;
    color: #8a7d73;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cancel-note {
    color: var(--danger);
    font-size: 0.72rem;
    font-weight: 600;
}

.cancel-request-form {
    display: grid;
    gap: 10px;
    padding: 0 8px 6px 8px;
}

.cancel-toggle-button {
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.order-summary-meta .mini-button {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #4d443c;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(31, 26, 22, 0.08);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.order-summary-meta .mini-button:hover {
    background: #ffffff;
    border-color: rgba(15, 118, 110, 0.16);
    color: var(--accent-dark);
}

.order-summary-meta .cancel-toggle-button {
    font-size: 0.74rem;
    font-weight: 700;
}

.cancel-request-panel {
    display: grid;
    gap: 10px;
}

.cancel-request-panel[hidden] {
    display: none !important;
}

.cancel-request-form textarea {
    border: 1px solid rgba(194, 65, 12, 0.14);
    background: rgba(255, 255, 255, 0.86);
    border-radius: 14px;
    padding: 12px 14px;
    resize: vertical;
    min-height: 84px;
}

.order-summary-row.is-overdue {
    border: 1px solid rgba(220, 38, 38, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(254, 242, 242, 0.96));
}

.order-summary-meta {
    align-items: flex-end;
    gap: 8px;
}

.order-due-note,
.order-due-warning {
    font-size: 0.76rem;
    font-weight: 700;
}

.order-due-note {
    color: var(--muted);
}

.order-due-warning {
    color: #b91c1c;
}

.order-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.order-alert-badge.overdue {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.95);
}

.order-alert-badge.neutral {
    color: #0f766e;
    background: rgba(204, 251, 241, 0.95);
}

.order-modal {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 14px 16px;
}

.order-modal .invoice-modal-card {
    width: min(1320px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 28px);
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 22px;
    background: linear-gradient(180deg, #fffdf8, #ffffff);
}

.warehouse-picking-modal-card {
    width: min(1360px, calc(100vw - 32px));
}

.order-modal .modal-backdrop {
    position: fixed;
}

.invoice-sheet {
    display: grid;
    gap: 18px;
}

.invoice-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 0 8px 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.invoice-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.invoice-head h3 {
    margin: 0;
    font-size: 1.28rem;
}

.invoice-head p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.packing-list-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.packing-shipment-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.packing-shipment-wide {
    grid-column: 1 / -1;
}

.packing-line-head,
.packing-line-row {
    grid-template-columns: minmax(0, 1.6fr) 80px 110px 90px;
}

.packing-line-head > span,
.packing-line-row > span {
    display: flex;
    align-items: center;
}

.packing-line-head > span:last-child,
.packing-line-row > span:last-child {
    justify-content: center;
    text-align: center;
}

.packing-check-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.packing-check-box {
    width: 22px;
    height: 22px;
    border: 2px solid #94a3b8;
    border-radius: 6px;
    background: #fff;
}

.packing-list-foot {
    align-items: start;
}

.packing-list-actions {
    align-content: start;
}

.packing-list-actions .print-invoice-button {
    width: 100%;
    justify-content: center;
}

.packing-form-head {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.warehouse-shipment-form {
    gap: 16px;
}

.warehouse-shipment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.warehouse-shipment-fields {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.warehouse-shipment-wide {
    grid-column: 1 / -1;
}

.warehouse-shipment-form textarea {
    min-height: 96px;
    resize: vertical;
}

.invoice-status-stack {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.invoice-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    color: var(--accent-dark);
    font-size: 0.76rem;
    font-weight: 800;
}

.invoice-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}

.invoice-info-box,
.invoice-address-box,
.invoice-note-box,
.invoice-total-box {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.invoice-info-box {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
}

.invoice-info-box span,
.invoice-address-box span,
.invoice-note-box span,
.invoice-total-box span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.invoice-info-box strong,
.invoice-address-box strong,
.invoice-note-box strong {
    font-size: 0.88rem;
    line-height: 1.5;
}

.invoice-address-box {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
}

.invoice-line-items {
    display: grid;
    gap: 10px;
}

.invoice-line-head,
.invoice-line-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) minmax(54px, 0.34fr) minmax(112px, 0.58fr) minmax(150px, 0.88fr) minmax(112px, 0.58fr) minmax(124px, 0.64fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.invoice-line-head {
    padding: 0 14px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.invoice-line-row {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.invoice-line-row > span,
.invoice-line-row > strong {
    min-width: 0;
}

.invoice-product-cell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.invoice-product-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(15, 118, 110, 0.08);
    color: var(--accent-dark);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.invoice-product-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.invoice-product-copy strong {
    font-size: 0.9rem;
    line-height: 1.35;
}

.invoice-product-copy span {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.invoice-line-row strong {
    font-size: 0.86rem;
}

.invoice-line-row span {
    color: var(--muted);
    font-size: 0.78rem;
}

.invoice-discount-cell {
    display: grid;
    gap: 3px;
    color: var(--muted);
    line-height: 1.25;
}

.invoice-discount-cell strong {
    color: var(--accent-dark);
    font-size: 0.82rem;
}

.invoice-discount-cell small,
.invoice-discount-cell em {
    display: block;
    color: var(--muted);
    font-size: 0.68rem;
    font-style: normal;
    white-space: normal;
}

.invoice-foot {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
    gap: 16px;
}

.invoice-note-box {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
}

.invoice-note-box em {
    color: #b45309;
    font-size: 0.76rem;
    font-style: normal;
    line-height: 1.45;
}

.invoice-total-box {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
}

.invoice-total-box > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.invoice-total-box > div span {
    min-width: 0;
    line-height: 1.25;
}

.invoice-total-box > div strong {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

.invoice-total-box strong {
    font-size: 0.88rem;
}

.invoice-total-box .discount strong {
    color: var(--accent-dark);
}

.invoice-total-box .grand {
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.invoice-total-box .grand strong {
    font-size: 1rem;
}

.invoice-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.customer-term-row {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(250px, 1.4fr) minmax(620px, 2.4fr) minmax(220px, 0.9fr);
    gap: 16px;
}

.customer-action-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.customer-term-main {
    display: grid;
    gap: 5px;
}

.customer-term-main strong {
    font-size: 0.92rem;
    line-height: 1.3;
}

.customer-term-main span {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.customer-term-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(88px, 1fr));
    gap: 12px;
    align-items: end;
}

.customer-term-fields label,
.customer-term-meta {
    display: grid;
    gap: 6px;
}

.customer-term-fields label span,
.customer-term-meta span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.customer-term-fields label input,
.customer-term-fields label select {
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(248, 250, 252, 0.95);
    padding: 0 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}

.term-input {
    width: 100%;
    min-width: 0;
}

.customer-select-field select {
    width: 100%;
}

.customer-term-meta {
    justify-items: stretch;
    align-items: center;
    gap: 8px;
}

.customer-figure,
.customer-status-text {
    display: grid;
    gap: 4px;
    justify-items: end;
    text-align: right;
}

.customer-figure strong,
.customer-status-text strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.customer-figure .stock-badge {
    justify-self: end;
    min-width: 0;
}

.customer-term-meta .mini-button {
    justify-self: stretch;
    min-width: 0;
    height: 40px;
}

.admin-modal .statement-modal-card {
    width: min(1680px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100vh - 24px);
    margin: 12px auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    gap: 16px;
    padding: 24px 28px 26px;
}

.statement-modal-head {
    align-items: flex-start;
    margin-bottom: 0;
}

.statement-modal-head > div {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 4px 2px 0;
}

.statement-modal-head h2 {
    font-size: 1.65rem;
    letter-spacing: 0;
}

.statement-modal-head p {
    max-width: 820px;
    font-size: 0.86rem;
    line-height: 1.55;
}

.statement-filter-form {
    display: grid;
    gap: 14px;
    margin-bottom: 0;
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(249, 250, 251, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.statement-filter-grid {
    display: grid;
    gap: 12px;
}

.statement-filter-row {
    display: grid;
    gap: 12px;
    align-items: center;
}

.statement-filter-row-top {
    grid-template-columns: repeat(2, minmax(170px, 190px)) minmax(200px, 240px);
}

.statement-filter-row-bottom {
    grid-template-columns: minmax(360px, 1fr) auto auto;
}

.statement-filter-form input,
.statement-filter-form select {
    min-width: 0;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.83rem;
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.statement-filter-form .primary-button,
.statement-filter-form .ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 18px;
    border-radius: 14px;
    font-size: 0.78rem;
}

.statement-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.statement-summary-grid .import-stat-tile {
    min-height: 104px;
    padding: 18px 18px 16px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.statement-summary-grid .import-stat-tile span {
    font-size: 0.71rem;
    letter-spacing: 0.08em;
}

.statement-summary-grid .import-stat-tile strong {
    font-size: 1.55rem;
    line-height: 1.15;
}

.statement-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 2px 2px 0;
}

.statement-action-row .mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
}

.statement-print-area {
    display: grid;
    gap: 14px;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(250, 250, 249, 0.98), rgba(255, 255, 255, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.statement-table-head,
.statement-table-row {
    display: grid;
    grid-template-columns: minmax(138px, 0.9fr) minmax(124px, 0.76fr) minmax(220px, 1.8fr) minmax(118px, 0.72fr) minmax(128px, 0.78fr) minmax(166px, 0.86fr);
    column-gap: 18px;
    align-items: center;
    min-width: 0;
    width: 100%;
}

.statement-print-area-readonly .statement-table-head,
.statement-print-area-readonly .statement-table-row {
    grid-template-columns: minmax(138px, 0.9fr) minmax(124px, 0.76fr) minmax(220px, 1.8fr) minmax(118px, 0.72fr) minmax(128px, 0.78fr);
}

.statement-table-head {
    padding: 0 14px;
    color: var(--muted);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.statement-table-list {
    display: grid;
    gap: 10px;
}

.statement-table-row {
    position: relative;
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
    font-variant-numeric: tabular-nums;
}

.statement-table-row-actionable {
    cursor: pointer;
    padding-right: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.statement-table-row-actionable:hover,
.statement-table-row-actionable:focus-visible,
.statement-table-row-actionable.is-open {
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    outline: none;
}

.statement-table-row span,
.statement-table-row strong {
    font-size: 0.78rem;
    line-height: 1.4;
}

.statement-table-row span:first-child,
.statement-table-row span:nth-child(2) {
    white-space: nowrap;
    min-width: 0;
}

.statement-table-row span:nth-child(3) {
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.statement-head-amount,
.statement-head-balance,
.statement-head-actions,
.statement-amount,
.statement-balance,
.statement-row-actions-cell {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

.statement-debit {
    color: #92400e;
}

.statement-credit {
    color: #0f766e;
}

.statement-row-action-popover {
    position: static;
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.statement-table-row-actionable.is-open .statement-row-action-popover {
    display: inline-flex;
}

.statement-row-action-popover form {
    margin: 0;
}

.statement-row-action-popover .mini-button {
    display: inline-flex;
    align-items: center;
    min-width: 78px;
    height: 34px;
    padding: 0 12px;
    font-size: 0.72rem;
    justify-content: center;
}

.statement-row-action-popover .print-receipt-button {
    min-width: 116px;
}

.statement-preview-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(15, 118, 110, 0.06);
    border: 1px solid rgba(15, 118, 110, 0.1);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.statement-preview-note a {
    color: var(--accent-dark);
    text-decoration: none;
}

.statement-page-card {
    display: grid;
    gap: 16px;
}

.statement-page-head {
    align-items: flex-start;
    margin-bottom: 0;
}

.statement-page-filter {
    margin-bottom: 0;
}

.customer-statement-page {
    max-width: none;
}

.overdue-notice-card {
    width: min(460px, calc(100vw - 32px));
    display: grid;
    gap: 12px;
    padding: 26px;
    text-align: left;
}

.overdue-notice-card > span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.overdue-notice-card > strong {
    color: #991b1b;
    font-size: 2rem;
    line-height: 1.1;
}

.overdue-notice-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.overdue-notice-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.ledger-entry-modal-card {
    width: min(620px, calc(100vw - 32px));
    display: grid;
    gap: 14px;
}

.return-order-modal-card {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    display: grid;
    gap: 14px;
}

.return-items-list {
    display: grid;
    gap: 10px;
}

.return-item-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 12px !important;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.86);
}

.return-item-row > span {
    display: grid;
    gap: 4px;
}

.return-item-row strong {
    font-size: 0.86rem;
}

.return-item-row small {
    color: var(--muted);
    font-size: 0.74rem;
}

.return-item-row input {
    width: 100%;
    min-width: 0;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
}

.order-admin-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 16, 19, 0.62);
    backdrop-filter: blur(4px);
}

.modal-card {
    position: relative;
    width: min(760px, calc(100vw - 32px));
    margin: 48px auto;
    border-radius: 24px;
    background: #fff;
    padding: 24px;
    box-shadow: var(--shadow);
    z-index: 1;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #eef3f2;
    cursor: pointer;
}

@media (max-width: 860px) {
    .public-dealer-company-grid,
    .public-dealer-two-grid,
    .public-dealer-address-grid,
    .public-dealer-file-grid,
    .public-dealer-lower-grid {
        grid-template-columns: 1fr;
    }

    .public-dealer-span-2 {
        grid-column: auto;
    }

    .public-dealer-application-form .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .public-dealer-application-form .primary-button,
    .public-dealer-application-form .ghost-button {
        width: 100%;
    }
}

.modal-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.modal-gallery figure {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: #f8faf9;
}

.modal-gallery img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: contain;
}

.modal-gallery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-right: 36px;
}

.modal-gallery-head strong {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-size: 1rem;
}

.modal-gallery-head span {
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
}

.modal-gallery-stage {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
}

.modal-nav {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f4f7f6;
    color: var(--accent-dark);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
}

.modal-nav:disabled {
    opacity: 0.45;
    cursor: default;
}

.checkout-modal-card {
    width: min(720px, calc(100vw - 32px));
    display: grid;
    gap: 16px;
}

.checkout-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-right: 34px;
}

.checkout-modal-head h3 {
    margin: 0;
    font-size: 1.18rem;
}

.checkout-modal-head p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.checkout-modal-amount {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    color: var(--accent-dark);
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-size: 0.92rem;
}

.checkout-modal-form {
    gap: 12px;
}

.checkout-modal-actions {
    justify-content: flex-start;
}

.bank-account-popup-list,
.payment-settings-stack {
    display: grid;
    gap: 12px;
}

.bank-account-popup-list {
    max-height: 320px;
    overflow: auto;
    padding-right: 4px;
}

.bank-account-popup-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(31, 26, 22, 0.08);
    background: rgba(255, 255, 255, 0.86);
}

.bank-account-popup-card strong {
    font-size: 0.9rem;
}

.bank-account-popup-card span {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.bank-account-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto auto;
    gap: 8px;
    align-items: center;
}

.bank-account-row input {
    min-width: 0;
}

.bank-account-row .checkbox-row {
    white-space: nowrap;
}

.bank-account-row-create {
    background: rgba(15, 118, 110, 0.04);
    border-style: dashed;
}

.collection-row-actions {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.collection-page-card {
    display: grid;
    gap: 18px;
}

.collection-page-head {
    align-items: flex-start;
    margin-bottom: 0;
}

.collection-filter-form {
    margin-bottom: 0;
}

.collection-filter-row-top {
    grid-template-columns: repeat(2, minmax(170px, 190px)) minmax(260px, 320px);
}

.collection-filter-row-bottom {
    grid-template-columns: minmax(420px, 1fr) auto auto;
}

.collection-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.collection-summary-strip .import-stat-tile {
    min-height: 96px;
}

.collection-list-frame {
    display: grid;
    gap: 12px;
}

.collection-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 18px;
    padding: 0 14px;
    color: var(--muted);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.collection-list-head > span:last-child {
    justify-self: end;
}

.collection-list-table {
    gap: 12px;
}

.collection-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
}

.collection-list-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.collection-list-main strong,
.collection-row-actions strong {
    font-size: 1rem;
}

.collection-list-main span,
.collection-list-main small {
    color: var(--muted);
}

.collection-create-modal-card {
    width: min(760px, calc(100vw - 32px));
    display: grid;
    gap: 16px;
}

.collection-receipt-modal-card {
    width: min(980px, calc(100vw - 32px));
    display: grid;
    gap: 18px;
    padding: 28px;
}

.collection-receipt-sheet {
    display: grid;
    gap: 18px;
}

.collection-receipt-head {
    padding-right: 46px;
}

.collection-receipt-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collection-receipt-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    gap: 14px;
}

.collection-receipt-party,
.collection-receipt-note,
.collection-receipt-total {
    background: linear-gradient(180deg, #fffef9 0%, #ffffff 100%);
}

.collection-receipt-party {
    display: grid;
    gap: 8px;
    align-content: start;
}

.collection-receipt-party small {
    color: var(--muted);
    font-size: 0.76rem;
}

.collection-receipt-total {
    display: grid;
    gap: 14px;
}

.collection-receipt-total strong {
    font-size: 1.5rem;
}

.collection-receipt-note {
    min-height: 136px;
}

.collection-receipt-signatures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.collection-signature-box {
    display: grid;
    gap: 22px;
    min-height: 120px;
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

.collection-signature-box span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.collection-signature-box strong {
    align-self: end;
    padding-top: 16px;
    border-top: 1px dashed rgba(100, 116, 139, 0.38);
    font-size: 0.9rem;
}

.collection-receipt-actions {
    justify-content: flex-end;
}

.image-trigger {
    border: 0;
    cursor: pointer;
}

@media (max-width: 1180px) {
    .shell,
    .panel-grid,
    .stats-grid,
    .auth-panel,
    .admin-grid,
    .user-admin-layout,
    .user-form-grid,
    .statement-detail-layout,
    .payment-grid,
    .cart-page-grid {
        grid-template-columns: 1fr;
    }

    .statement-customer-summary {
        position: static;
    }

    .collection-receipt-grid,
    .collection-receipt-summary,
    .collection-receipt-signatures {
        grid-template-columns: 1fr;
    }

    .collection-summary-strip {
        grid-template-columns: 1fr;
    }

    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .import-grid,
    .admin-filter-bar,
    .import-page-grid,
    .import-mapping-grid,
    .match-mode-box,
    .bank-account-row,
    .payment-option-list,
    .payment-option-field-grid,
    .xml-mapping-grid,
    .xml-defaults-grid,
    .xml-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .shell {
        display: block;
    }

    .sidebar {
        padding-bottom: 18px;
    }

    .product-head,
    .product-row {
        grid-template-columns: 40px 80px minmax(180px, 1fr) 120px 90px 46px 62px 46px;
    }

    .rep-product-head,
    .rep-product-row {
        grid-template-columns: 40px 80px minmax(180px, 1fr) 120px 90px 46px 62px;
    }

    .rep-order-toolbar {
        grid-template-columns: 1fr;
    }

    .cart-head,
    .cart-line {
        grid-template-columns: 40px 72px minmax(170px, 1fr) 90px 90px 80px 90px 62px 100px 40px;
    }
}

@media (max-width: 860px) {
    .product-head {
        display: none;
    }

    .product-row {
        grid-template-columns: 40px 1fr 70px 46px 62px 46px;
    }

    .rep-product-row {
        grid-template-columns: 40px 1fr 70px 46px 62px;
    }

    .product-category,
    .price-cell {
        display: none;
    }

    .cart-head {
        display: none;
    }

    .cart-line {
        grid-template-columns: 40px 1fr 64px 90px 40px;
    }

    .cart-line > span:nth-child(2),
    .cart-line > span:nth-child(4),
    .cart-line > span:nth-child(5),
    .cart-line > span:nth-child(6),
    .cart-line > span:nth-child(7) {
        display: none;
    }
}

@media (max-width: 720px) {
    .main,
    .sidebar,
    .auth-copy,
    .auth-card,
    .panel-card {
        padding: 18px;
    }

    .search-form,
    .topbar,
    .cart-row,
    .cart-controls,
    .checkout-modal-head,
    .payment-option-card-head,
    .order-admin-controls,
    .row-card,
    .filter-actions,
    .import-submit-row,
    .import-inline-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-split {
        flex-direction: column;
        align-items: stretch;
    }

    .product-currency-form .product-price-row,
    .product-currency-form .product-detail-row,
    .currency-mode-grid,
    .product-identity-grid,
    .product-modal-lower-grid,
    .product-supplier-grid,
    .stock-aging-panel,
    .supplier-admin-page,
    .supplier-row,
    .stock-admin-page,
    .stock-movement-row,
    .purchase-invoice-head,
    .purchase-item-head,
    .purchase-item-row,
    .purchase-total-panel,
    .supplier-card,
    .supplier-account-layout,
    .module-feature-grid,
    .warehouse-stock-row,
    .warehouse-picking-row,
    .warehouse-location-page,
    .warehouse-location-card,
    .warehouse-location-stats,
    .warehouse-location-form .form-split,
    .warehouse-location-form .warehouse-address-grid,
    .product-picker,
    .product-lookup-row,
    .announcement-admin-row {
        grid-template-columns: 1fr;
    }

    .public-announcement-slider,
    .public-announcement-grid,
    .public-catalog-grid,
    .dealer-announcement-grid {
        grid-template-columns: 1fr;
    }

    .packing-list-info-grid,
    .packing-shipment-summary,
    .warehouse-shipment-grid,
    .packing-line-head,
    .packing-line-row,
    .packing-list-foot {
        grid-template-columns: 1fr;
    }

    .packing-check-cell {
        justify-content: flex-start;
    }

    .admin-modal .product-modal-card {
        width: min(100vw - 22px, 760px);
        margin: 11px auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    .product-modal-card .form-actions {
        padding-left: 16px;
        padding-right: 16px;
    }

    .user-admin-hero {
        align-items: flex-start;
    }

    .user-admin-counts {
        width: 100%;
    }

    .user-edit-grid,
    .user-module-grid,
    .user-permission-top,
    .user-summary-strip,
    .user-list-row {
        grid-template-columns: 1fr;
    }

    .user-directory-toolbar,
    .user-list-actions,
    .user-list-role {
        justify-content: flex-start;
    }

    .user-module-parent-row {
        grid-template-columns: 1fr;
    }

    .user-directory-card {
        grid-template-columns: auto 1fr;
    }

    .user-role-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .rep-customer-side {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .location-auto-row {
        align-items: stretch;
        flex-direction: column;
    }

    .statement-head-actions-inline {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .statement-customer-jump select {
        width: 100%;
    }

    .statement-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .statement-pagination > div {
        justify-content: flex-start;
    }

    .rep-customer-metric {
        min-width: 0;
    }

    .product-list-meta {
        grid-template-columns: 1fr 1fr;
        justify-items: start;
    }

    .product-list-row {
        grid-template-columns: 1fr;
    }

    .product-list-meta strong {
        text-align: left;
    }

    .product-list-meta .mini-button,
    .product-list-meta .stock-badge,
    .product-list-meta .image-badge {
        width: auto;
    }

    .info-pill-group {
        width: 100%;
        flex-direction: column;
    }

    .customer-term-row {
        grid-template-columns: 1fr;
    }

    .customer-list-header {
        display: none;
    }

    .customer-term-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-term-fields-wide,
    .ledger-limit-strip {
        grid-template-columns: 1fr;
    }

    .customer-modal-card {
        width: min(100vw - 12px, 1320px);
        padding: 18px 16px;
        border-radius: 26px;
    }

    .customer-modal-form .form-split,
    .customer-modal-form .customer-modal-grid,
    .customer-modal-form .customer-address-grid,
    .customer-modal-lower-grid,
    .customer-modal-doc-grid,
    .customer-modal-grid,
    .customer-address-grid {
        grid-template-columns: 1fr;
    }

    .customer-modal-doc-wide {
        grid-column: auto;
    }

    .customer-form-section {
        padding: 18px;
        border-radius: 22px;
    }

    .invoice-info-grid,
    .invoice-foot {
        grid-template-columns: 1fr;
    }

    .invoice-head {
        flex-direction: column;
    }

    .invoice-line-head,
    .invoice-line-row {
        grid-template-columns: 1fr;
    }

    .invoice-status-stack {
        justify-items: start;
    }

    .customer-term-meta {
        justify-items: start;
    }

    .customer-figure,
    .customer-status-text {
        justify-items: start;
        text-align: left;
    }

    .customer-term-meta .mini-button,
    .customer-figure .stock-badge {
        justify-self: start;
    }

    .customer-action-group,
    .customer-filter-bar {
        grid-template-columns: 1fr;
    }

    .customer-action-group-wide {
        justify-content: flex-start;
    }

    .customer-action-row {
        justify-content: flex-start;
    }

    .statement-summary-grid,
    .statement-table-head,
    .statement-table-row {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .collection-list-head,
    .collection-list-row,
    .collection-filter-row-top,
    .collection-filter-row-bottom {
        grid-template-columns: 1fr;
    }

    .collection-list-head {
        display: none;
    }

    .collection-row-actions {
        justify-items: start;
    }

    .admin-modal .public-dealer-application-card,
    .public-dealer-application-card {
        width: min(100vw - 12px, 1320px);
        max-height: none;
        padding: 18px 16px;
        border-radius: 26px;
    }

    .public-dealer-application-form,
    .public-dealer-application-head {
        grid-template-columns: 1fr;
    }

    .public-dealer-company-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-dealer-lower-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-dealer-section {
        padding: 18px;
        border-radius: 22px;
    }

    .public-dealer-span-2 {
        grid-column: 1 / -1;
    }

    .public-dealer-file-grid {
        grid-template-columns: 1fr;
    }

    .public-dealer-two-grid,
    .public-dealer-address-grid {
        grid-template-columns: 1fr;
    }

    .contact-message-verify,
    .settings-check-grid,
    .message-detail-grid,
    .support-page-grid {
        grid-template-columns: 1fr;
    }

    .live-support-widget {
        right: 12px;
        bottom: 12px;
    }

    .live-support-panel {
        width: min(100vw - 16px, 380px);
    }

    .public-dealer-application-form .form-actions {
        align-items: stretch;
    }

    .statement-filter-grid,
    .statement-filter-row,
    .statement-filter-row-top,
    .statement-filter-row-bottom {
        grid-template-columns: 1fr;
    }

    .statement-row-actions {
        justify-content: flex-start;
    }

    .statement-head-amount,
    .statement-head-balance,
    .statement-head-actions,
    .statement-amount,
    .statement-balance,
    .statement-row-actions-cell,
    .statement-system-note {
        justify-self: start;
        text-align: left;
    }

    .admin-modal .statement-modal-card {
        width: min(1520px, calc(100vw - 16px));
        max-height: calc(100vh - 16px);
        padding: 20px 16px 18px;
    }

    .statement-filter-form,
    .statement-print-area {
        padding: 14px;
        border-radius: 20px;
    }

    .statement-table-row-actionable {
        padding-right: 14px;
    }

    .statement-row-action-popover {
        position: static;
        justify-content: flex-start;
    }

    .search-form input {
        min-width: 0;
    }

    .product-row {
        grid-template-columns: 36px 1fr 56px 42px;
    }

    .rep-product-row {
        grid-template-columns: 36px 1fr 56px 42px;
    }

    .product-code,
    .qty-input {
        width: 100%;
    }

    .modal-gallery {
        grid-template-columns: 1fr;
    }

    .modal-gallery-stage {
        grid-template-columns: 1fr;
    }

    .modal-nav {
        display: none;
    }
}