:root {
    --ink: #ffffff;
    --pink: #E6007E;
    --pink-deep: #C90068;
    --pink-light: #FCE7F3;
    --green: #6B9F45;
    --glass: #ffffff;
    --glass-strong: #ffffff;
    --line: #f3c1dc;
    --text: #3b1230;
    --muted: #8d5b73;
    --gold: #E6007E;
    --good: #6B9F45;
    --bad: #C90068;
    --info: #E6007E;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
@font-face {
    font-family: "Noto Sans Myanmar";
    src: url("../fonts/NotoSansMyanmar-Regular.woff2") format("woff2"),
         url("../fonts/NotoSansMyanmar-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Myanmar";
    src: url("../fonts/NotoSansMyanmar-Medium.woff2") format("woff2");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}
body {
    margin: 0;
    color: var(--text);
    font-family: "Noto Sans Myanmar", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    background: var(--ink);
}
a { color: inherit; }
.glass {
    background: var(--glass);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(230, 0, 126, 0.08);
}
.shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 248px;
    flex: none;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
    padding: 16px 12px;
    background: #ffffff;
    border-right: 1px solid var(--pink-light);
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
}
.nav-link svg { width: 18px; height: 18px; }
.nav-link.active, .nav-link:hover { background: var(--pink-light); color: var(--pink-deep); }
.main { flex: 1; min-width: 0; }
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
    border-bottom: 1px solid var(--pink-light);
}
.header-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.header-tools .btn { width: auto; flex: 0 0 auto; white-space: nowrap; }
.week-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.week-switch a { padding: 6px 14px; font-size: 13px; line-height: 1.3; text-decoration: none; color: var(--muted); }
.week-switch a.on { background: var(--pink); color: #fff; }
.section-label { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.content { padding: 16px; min-width: 0; max-width: 100%; }
.field, .btn, select.field {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--text);
    padding: 9px 12px;
    font-size: 14px;
    width: 100%;
}
.field::placeholder { color: #c48aaa; }
.field:focus { outline: 2px solid rgba(230, 0, 126, 0.35); }
select.field option { background: #fff; color: var(--text); }
.btn {
    width: auto;
    cursor: pointer;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.btn-gold { background: var(--pink); color: #fff; border-color: transparent; }
.btn-gold:hover { background: var(--pink-deep); }
.btn-ghost { background: #fff; color: var(--pink-deep); }
.btn-bad { background: var(--pink-light); color: var(--pink-deep); }
.btn-good { background: #eef6e6; color: #3f6b24; }
.table-wrap { overflow: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--pink-light); white-space: nowrap; }
table.data th { color: var(--muted); font-weight: 650; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.pill { border-radius: 999px; padding: 2px 8px; font-size: 11px; border: 1px solid var(--line); }
.pill-paid { color: #3f6b24; background: #eef6e6; }
.pill-partial { color: var(--pink-deep); background: var(--pink-light); }
.pill-unpaid, .pill-cancelled, .pill-overdue { color: #fff; background: var(--pink); }
.desk-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-width: 0; }
.desk-search-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.desk-search { width: 100%; padding-left: 2.5rem; }
.desk-filters .desk-search,
.desk-filters .desk-category { height: 48px; min-height: 48px; line-height: 1.3; }
.desk-filters .desk-category { flex: 0 1 13.5rem; width: 13.5rem; max-width: 42%; min-width: 0; }
html[lang="my"] .desk-filters .desk-search,
html[lang="my"] .desk-filters .desk-category { height: 48px; min-height: 48px; line-height: 1.3; }
.desk-search-icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #9a5a7a; pointer-events: none; }
.stat-value { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--pink-deep); overflow-wrap: anywhere; }
.muted { color: var(--muted); }
label.lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.grid-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; width: 100%; }
.stat-card { min-height: 108px; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.stat-card .stat-foot { min-height: 1.15rem; margin-top: auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal-shade { position: absolute; inset: 0; background: rgba(59, 18, 48, 0.35); }
.modal-card { position: relative; width: min(100%, 32rem); max-height: min(90vh, 720px); overflow: auto; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.filter-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.filter-bar .field, .filter-bar select.field, .filter-fields .field, .filter-fields select.field { width: 11.5rem; max-width: 100%; flex: 0 1 11.5rem; min-width: 0; }
.filter-bar .btn, .filter-fields .btn { flex: 0 0 auto; align-self: center; }
.filter-create { margin-left: auto; flex: 0 0 auto; align-self: center; white-space: nowrap; }
.page-head > .filter-bar { flex: 1 1 100%; }
.report-toolbar { display: flex; flex-flow: row nowrap; align-items: center; gap: 8px; overflow-x: auto; }
.report-date { display: inline-flex; flex-flow: row nowrap; align-items: center; gap: 6px; flex: 0 0 auto; margin: 0; }
.report-date span { font-size: 13px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.report-date input { width: 9.75rem; height: 34px; min-height: 34px; padding: 4px 8px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 14px; line-height: 1.2; }
html[lang="my"] .report-date input { height: 34px; min-height: 34px; line-height: 1.2; }
.report-toolbar .btn { flex: 0 0 auto; align-self: center; }
.report-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.report-metrics .stat-card { min-height: 0; justify-content: space-between; }
.report-profit { background: #f7fbf3; }
.report-sections .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-sections { display: grid; gap: 16px; }
.profit-products { min-width: 0; }
.profit-scroll { max-width: 100%; overflow-x: auto; }
.profit-table { width: 100%; }
.profit-table th, .profit-table td { vertical-align: middle; }
.profit-table th:nth-child(1), .profit-table td:nth-child(1) { width: 4.5rem; }
.profit-table th:nth-child(4), .profit-table td:nth-child(4) { width: 6rem; }
.profit-table th:nth-child(5), .profit-table th:nth-child(6), .profit-table th:nth-child(7),
.profit-table td:nth-child(5), .profit-table td:nth-child(6), .profit-table td:nth-child(7) { width: 9rem; }
.profit-table td:nth-child(2), .profit-table td:nth-child(3),
.profit-table th:nth-child(2), .profit-table th:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
html[lang="my"] .profit-table td.num, html[lang="my"] .profit-table th.num { white-space: nowrap; }
.best-head, .best-row { display: grid; grid-template-columns: 4.25rem minmax(0, 1.7fr) minmax(0, 1fr) 8.5rem 10rem; align-items: center; column-gap: 16px; }
.best-head { padding: 0 4px 8px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--pink-light); }
.best-head span:nth-child(4), .best-head span:nth-child(5) { text-align: right; }
.best-row { padding: 12px 4px; border-bottom: 1px solid var(--pink-light); }
.best-row:last-child { border-bottom: 0; }
.best-rank { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--pink-light); color: var(--pink-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.best-row.is-top .best-rank { background: var(--pink); color: #fff; }
.best-name { font-weight: 650; line-height: 1.35; }
.best-cat { color: var(--muted); line-height: 1.35; }
.best-qty, .best-sales { text-align: right; font-variant-numeric: tabular-nums; }
.best-sales { font-weight: 700; color: var(--pink-deep); }
.best-label { display: none; }
.print-only { display: none; }
@media (max-width: 900px) {
    .profit-scroll { overflow: visible; }
    .profit-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .profit-table, .profit-table tbody, .profit-table tr, .profit-table td { display: block; width: auto; }
    .profit-table tr { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100% !important; padding: 14px 0; border-bottom: 1px solid var(--pink-light); }
    .profit-table tr:last-child { border-bottom: 0; }
    .profit-table th:nth-child(n), .profit-table td:nth-child(n) { width: auto !important; }
    .profit-table td { display: flex !important; width: 100% !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0; border: 0; }
    .profit-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 650; }
    .profit-table td span { min-width: 0; overflow-wrap: anywhere; text-align: right; }
    .profit-table td:nth-child(2) span, .profit-table td:nth-child(3) span { text-align: left; }
    html[lang="my"] .profit-table td { white-space: normal; }
}
@media (max-width: 800px) {
    .report-metrics { grid-template-columns: 1fr 1fr; }
    .best-head { display: none; }
    .best-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "rank name sales" "rank cat qty"; row-gap: 2px; column-gap: 12px; padding: 14px 0; }
    .best-rank { grid-area: rank; align-self: center; }
    .best-name { grid-area: name; }
    .best-cat { grid-area: cat; font-size: 13px; }
    .best-sales { grid-area: sales; }
    .best-qty { grid-area: qty; }
    .best-label { display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; }
}
@media (max-width: 520px) {
    .report-metrics { grid-template-columns: 1fr; }
}
.filter-pair { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; max-width: 100%; }
.filter-pair .field { flex: 1 1 9rem; width: 9rem; }
.btn-sm, html[lang="my"] .btn-sm { min-height: 34px; padding: 5px 10px; font-size: 13px; line-height: 1.3; width: auto; }
.pay-status { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.pay-status form { display: inline-flex; margin: 0; }
.pay-mark, html[lang="my"] .pay-mark { min-height: 0; height: auto; padding: 2px 8px; font-size: 11px; line-height: 1.35; border-radius: 8px; width: auto; white-space: nowrap; }
.order-status-form { display: inline-flex; margin: 0; }
select.order-status, html[lang="my"] select.order-status { min-height: 32px; height: 32px; width: auto; max-width: 11rem; padding: 2px 8px; font-size: 13px; line-height: 1.3; }
table.data td.pay-cell, html[lang="my"] table.data td.pay-cell { vertical-align: middle; white-space: nowrap; }
.row-actions { display: inline-flex; align-items: center; gap: 6px; }
.row-actions form { display: inline-flex; margin: 0; }
.icon-btn {
    position: relative;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--pink-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 34px;
    line-height: 0;
    text-decoration: none;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--pink-light); outline: none; }
.icon-btn-bad { color: var(--pink); }
.icon-btn[title]:hover::after,
.icon-btn[title]:focus-visible::after {
    content: attr(title);
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    background: #3b1230;
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 30;
    pointer-events: none;
}
table.data td.actions { position: sticky; right: 0; background: #fff; vertical-align: middle; white-space: nowrap; width: 1%; z-index: 1; box-shadow: -8px 0 8px #fff; }
.card { border-radius: 18px; padding: 14px; }
.flash { border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.flash-ok { background: #eef6e6; border: 1px solid #c9e2b4; color: #3f6b24; }
.flash-bad { background: var(--pink-light); border: 1px solid #f3c1dc; color: var(--pink-deep); }
nav[role="navigation"] svg { width: 16px; }
nav[role="navigation"] a, nav[role="navigation"] span { color: var(--pink-deep) !important; }
.text-rose-300 { color: var(--pink-deep) !important; }
.text-amber-200 { color: var(--pink) !important; }
@media (max-width: 1024px) {
    .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sidebar { position: fixed; z-index: 40; transform: translateX(-105%); transition: transform .2s ease; }
    .sidebar.open { transform: none; }
    .backdrop { position: fixed; inset: 0; background: rgba(59, 18, 48, 0.35); z-index: 30; }
}
@media (max-width: 640px) {
    .grid-stats { grid-template-columns: 1fr; gap: 10px; }
    .stat-card { min-height: 0; }
    .stat-value { font-size: 20px; }
    .content { padding: 12px; }
    .hide-sm { display: none; }
}
html[lang="my"] body { line-height: 1.65; }
html[lang="my"] .sidebar { width: 272px; }
html[lang="my"] .nav-link { min-height: 40px; line-height: 1.45; }
html[lang="my"] .btn, html[lang="my"] .field, html[lang="my"] select.field { min-height: 42px; line-height: 1.45; }
html[lang="my"] .btn-sm { min-height: 34px; padding: 5px 10px; }
html[lang="my"] .pay-mark { min-height: 0; height: auto; padding: 2px 8px; font-size: 11px; line-height: 1.35; }
html[lang="my"] select.order-status { min-height: 32px; height: 32px; padding: 2px 8px; font-size: 13px; line-height: 1.3; }
html[lang="my"] .icon-btn { min-height: 34px; width: 34px; height: 34px; padding: 0; line-height: 0; }
html[lang="my"] table.data td.actions { vertical-align: middle; white-space: nowrap; }
html[lang="my"] table.data th, html[lang="my"] table.data td { white-space: normal; line-height: 1.5; vertical-align: top; }
html[lang="my"] .pill { line-height: 1.5; padding: 3px 8px; }
.locale-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.locale-switch form { margin: 0; }
.locale-switch button { width: auto; border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 6px 10px; font-size: 13px; cursor: pointer; }
.locale-switch button.on { background: var(--pink); color: #fff; }
@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    .print-only { display: block; }
    .report-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profit-scroll { overflow: visible; }
    .profit-table thead { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; display: table-header-group !important; }
    .profit-table { display: table !important; }
    .profit-table tbody { display: table-row-group !important; }
    .profit-table tr { display: table-row !important; padding: 0 !important; border: 0 !important; }
    .profit-table td, .profit-table th { display: table-cell !important; }
    .profit-table td::before { content: none !important; }
    .best-head { display: grid !important; }
    .best-label { display: none !important; }
    .best-row { grid-template-columns: 4.25rem minmax(0, 1.7fr) minmax(0, 1fr) 8.5rem 10rem !important; grid-template-areas: none !important; }
    body { background: white; color: #3b1230; font-family: "Noto Sans Myanmar", sans-serif; }
    table.data th, table.data td, .best-name, .best-row { overflow-wrap: anywhere; }
    .glass { box-shadow: none; background: white; }
}
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: var(--text);
    background:
        radial-gradient(880px 380px at 50% -80px, #fce7f3 0%, rgba(252, 231, 243, 0) 72%),
        linear-gradient(180deg, #ffffff 0%, #fff7fb 100%);
}
.login-shell { width: min(440px, 100%); }
.login-card {
    position: relative;
    background: #fff;
    border: 1px solid #f3c1dc;
    border-radius: 28px;
    padding: 64px 32px 32px;
    box-shadow: 0 24px 60px rgba(201, 0, 104, 0.10), 0 2px 8px rgba(59, 18, 48, 0.04);
}
.login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #fce7f3, #e6007e 45%, #c90068);
}
.login-locale { position: absolute; top: 18px; right: 18px; }
.login-brand { text-align: center; margin-bottom: 28px; }
.login-logo, .login-mark {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    margin: 0 auto 16px;
}
.login-logo { display: block; object-fit: cover; box-shadow: 0 8px 20px rgba(201, 0, 104, 0.16); }
.login-mark {
    display: grid;
    place-items: center;
    background: #e6007e;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(201, 0, 104, 0.18);
}
.login-brand h1 { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.login-brand p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.login-form { display: grid; gap: 16px; }
.login-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: #6d314c; }
.login-control { position: relative; }
.login-icon, .login-reveal {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #9a5a7a;
}
.login-icon { left: 14px; width: 18px; height: 18px; display: grid; pointer-events: none; }
.login-icon svg, .login-reveal svg { width: 18px; height: 18px; }
.login-input {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid #f3c1dc;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    padding: 10px 14px 10px 42px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-control:has(.login-reveal) .login-input { padding-right: 46px; }
.login-input:focus {
    outline: none;
    border-color: #e6007e;
    box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.14);
}
.login-control:focus-within .login-icon { color: #e6007e; }
.login-input[aria-invalid="true"] { border-color: #c90068; background: #fff7fb; }
.login-reveal {
    right: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.login-reveal:hover, .login-reveal[aria-pressed="true"] { background: #fce7f3; color: #c90068; }
.login-reveal:focus-visible { outline: 2px solid #e6007e; outline-offset: 2px; }
.login-error { margin: 6px 0 0; color: #c90068; font-size: 13px; line-height: 1.45; }
.login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}
.login-remember input { width: 16px; height: 16px; accent-color: #e6007e; }
.login-submit {
    position: relative;
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    border: 0;
    border-radius: 14px;
    background: #e6007e;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(230, 0, 126, 0.22);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.login-submit:hover { background: #c90068; box-shadow: 0 12px 28px rgba(201, 0, 104, 0.28); }
.login-submit:active { transform: translateY(1px); }
.login-submit:focus-visible { outline: 2px solid #e6007e; outline-offset: 3px; }
.login-submit[aria-busy="true"] { cursor: progress; }
.login-submit[aria-busy="true"] .login-submit-label { visibility: hidden; }
.login-spinner {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin .7s linear infinite;
}
.login-submit[aria-busy="true"] .login-spinner { display: block; }
button.login-webclip { font: inherit; cursor: pointer; }
.login-webclip[hidden] { display: none; }
.login-webclip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    border: 1px solid #f3c1dc;
    border-radius: 14px;
    background: #fff;
    color: #c90068;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}
.login-webclip svg { width: 18px; height: 18px; flex: 0 0 auto; }
.login-webclip:hover { background: #fff5fa; }
.login-webclip:focus-visible { outline: 2px solid #e6007e; outline-offset: 3px; }
.login-webclip-note { margin: 8px 0 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.45; }
@keyframes login-spin { to { transform: rotate(360deg); } }
html[lang="my"] .login-brand h1 { letter-spacing: 0; font-size: 26px; line-height: 1.45; }
html[lang="my"] .login-label, html[lang="my"] .login-input, html[lang="my"] .login-submit, html[lang="my"] .login-remember { line-height: 1.5; }
@media (max-width: 640px) {
    .login-page { align-items: flex-start; padding: 20px 12px; }
    .login-card { border-radius: 22px; padding: 60px 18px 22px; }
    .login-card::before { left: 18px; right: 18px; }
    .login-logo, .login-mark { width: 64px; height: 64px; border-radius: 18px; }
    .login-brand h1 { font-size: 24px; }
}
@media (min-width: 768px) {
    .login-shell { width: min(460px, 100%); }
    .login-card { padding: 68px 40px 36px; }
}
.topbar h1, .topbar .muted { overflow-wrap: anywhere; }
.table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
.day-chart { overflow-x: auto; }
.day-chart > div { min-width: 2rem; }
.doc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 100%; }
.doc-actions .pill { white-space: normal; overflow-wrap: anywhere; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem 5.6rem auto; gap: 4px; align-items: center; font-size: 14px; }
.cart-name { min-width: 0; overflow-wrap: anywhere; }
.variant-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
nav[role="navigation"] { max-width: 100%; overflow-x: auto; }
input[type="file"].field, input[type="date"].field, input[type="number"].field { max-width: 100%; min-width: 0; }
@media (min-width: 1100px) {
    .variant-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .sidebar { width: min(272px, 86vw); }
    .topbar { align-items: flex-start; }
    .header-tools { width: 100%; margin-left: 0; justify-content: flex-start; }
    .week-switch { display: flex; max-width: 100%; }
    .week-switch a { flex: 1 1 auto; text-align: center; }
    .filter-bar, .filter-fields { align-items: stretch; }
    .filter-fields, .filter-create { width: 100%; }
    .filter-bar .field, .filter-fields .field, .filter-bar select.field, .filter-fields select.field,
    .filter-create, .filter-fields > .btn, .filter-bar > .btn {
        width: 100%;
        max-width: none;
        flex: 1 1 100%;
    }
    .filter-create { margin-left: 0; }
    .report-toolbar { flex-wrap: wrap; overflow: visible; }
    .report-date { flex: 1 1 100%; }
    .report-date input { width: auto; min-width: 0; flex: 1 1 auto; }
    .desk-filters { flex-wrap: wrap; }
    .desk-search-wrap, .desk-filters .desk-category { flex: 1 1 100%; width: 100%; max-width: 100%; }
    table.data td.actions { position: static; box-shadow: none; }
    .pay-facts { grid-template-columns: 1fr 1fr; }
    .field, select.field, textarea.field, .login-input { font-size: 16px; }
    select.order-status, html[lang="my"] select.order-status { font-size: 16px; min-height: 36px; height: 36px; }
    .icon-btn[title]:hover::after, .icon-btn[title]:focus-visible::after { content: none; }
    .doc-actions { justify-content: stretch; }
    .doc-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
    .cart-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .cart-name { grid-column: 1 / -1; }
    .grid-stats, .report-metrics { grid-template-columns: 1fr; }
    .pay-facts { grid-template-columns: 1fr; }
}