:root {
    --page:#eae9e3;
    --surface:#f9f8f4;
    --ink:#151612;
    --muted:#686960;
    --line:#d8d7cf;
    --accent:#171813;
    --soft:#e2e2d9;
    --lime:#d4ff45;
    --radius:10px;
    color-scheme:light
}

* {
    box-sizing:border-box
}

body,input,button,select,textarea {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important
}

body {
    margin:0;
    background:var(--page);
    color:var(--ink)
}

button,input,select,textarea {
    font-size:14px
}

button {
    cursor:pointer
}

button:disabled {
    cursor:wait;
    opacity:.55
}

input,select,textarea {
    color:var(--ink)
}

input:not([type=checkbox]),select,textarea {
    min-height:44px
}

input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible {
    outline:3px solid #005fcc;
    outline-offset:3px
}

button {
    min-height:40px
}

p {
    line-height:1.55
}

h1,h2,h3,h4 {
    letter-spacing:-.025em
}

h2 {
    font-weight:650!important
}

table {
    width:100%;
    border-collapse:collapse
}

th {
    text-align:left;
    font-size:12px;
    color:var(--muted);
    font-weight:600;
    padding:14px 16px;
    white-space:nowrap
}

td {
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    font-size:14px
}

td.reference {
    font-family:monospace
}

label {
    color:var(--ink)
}

.font-black {
    font-weight:650!important
}

.uppercase {
    letter-spacing:.035em;
    text-transform:none!important
}

.text-emerald-500,.text-emerald-600 {
    color:var(--accent)!important
}

.bg-emerald-500,.bg-emerald-600 {
    background:var(--accent)!important;
    color:white!important
}

.bg-emerald-500:hover,.bg-emerald-600:hover {
    background:#34352e!important
}

.rounded-2xl {
    border-radius:12px!important
}

.rounded-xl {
    border-radius:10px!important
}

.shadow-md,.shadow-2xl {
    box-shadow:0 5px 22px #1d1d1f0b!important
}

.animate-bounce {
    animation:none!important
}

[class~="text-[10px]"],[class~="text-[9px]"] {
    font-size:12px!important
}

#app {
    display:flex;
    height:100dvh;
    overflow:hidden
}

#app>aside {
    width:224px;
    background:#fff!important;
    border-color:var(--line)!important
}

#app>aside>div {
    background:#fff!important
}

aside .bg-slate-950,aside .bg-slate-950\/40 {
    background:#fff!important;
    border-color:var(--line)!important
}

aside .text-white,aside h4 {
    color:var(--ink)!important
}

aside nav button {
    font-size:14px;
    font-weight:500;
    color:var(--muted)!important;
    min-height:44px;
    margin-bottom:3px
}

aside nav button.bg-emerald-600,aside nav button.selected {
    color:var(--accent)!important;
    background:var(--soft)!important
}

aside nav button:hover {
    background:var(--page)!important;
    color:var(--ink)!important
}

aside nav i {
    opacity:.85
}

aside img {
    box-shadow:none!important
}

#app>div.flex-1 {
    min-width:0;
    background:var(--page)
}

header {
    background:#fff!important;
    border-color:var(--line)!important
}

header h1 {
    font-size:18px!important;
    font-weight:600!important;
    text-transform:capitalize
}

.save-status {
    height:38px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 24px;
    border-bottom:1px solid var(--line);
    background:#fff;
    color:var(--muted);
    font-size:12px;
    flex-shrink:0
}

.save-status>span:nth-of-type(2) {
    margin-left:auto
}

.save-status button {
    min-height:28px;
    padding:0 10px;
    color:var(--accent)
}

.save-status.warning {
    background:#fff6e8;
    color:#864800
}

.status-dot {
    height:6px;
    width:6px;
    flex-shrink:0;
    border-radius:100%;
    background:var(--accent)
}

main {
    background:var(--page)!important
}

main:focus {
    outline:none
}

main>.p-4,main>.p-6 {
    padding:24px!important
}

.argus-nav {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:10px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    text-align:left
}

.argus-nav i {
    width:20px;
    height:20px
}

.eyebrow {
    font-size:11px!important;
    font-weight:650;
    letter-spacing:.13em!important;
    color:var(--accent);
    margin:0 0 12px;
    text-transform:uppercase!important
}

.auth-shell {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:10%;
    width:min(100%,1140px);
    padding:64px;
    margin:auto;
    overflow:auto;
    max-height:100dvh
}

.auth-intro h1 {
    font-size:clamp(40px,4vw,62px);
    font-weight:650;
    line-height:1.08;
    margin:18px 0 24px;
    letter-spacing:-.055em
}

.auth-intro>p:not(.eyebrow) {
    font-size:18px;
    color:var(--muted);
    max-width:360px
}

.auth-intro>img {
    margin-bottom:35px
}

.local-note {
    margin-top:48px;
    padding-left:16px;
    border-left:2px solid #c4c6b4;
    font-size:13px;
    color:var(--muted);
    line-height:1.7
}

.auth-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:36px;
    box-shadow:0 12px 50px #20202004
}

.auth-card h2 {
    font-size:28px;
    margin:0 0 10px
}

.auth-card>p:not(.eyebrow) {
    color:var(--muted);
    font-size:14px;
    margin:0 0 24px
}

.auth-card>small {
    display:block;
    margin-top:24px;
    color:var(--muted);
    font-size:11px
}

.argus-form {
    display:flex;
    flex-direction:column;
    gap:18px
}

.argus-form label,.argus-label {
    font-weight:550;
    font-size:13px;
    display:flex;
    flex-direction:column;
    gap:7px
}

.argus-form input:not([type=checkbox]),.argus-form select,.argus-form textarea,.argus-label select,.external-payment input {
    display:block;
    width:100%;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface);
    color:var(--ink);
    font-size:16px;
    font-weight:400
}

.argus-form small {
    font-size:12px;
    color:var(--muted);
    font-weight:400
}

.primary,.secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 18px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    border:1px solid transparent
}

.primary {
    background:var(--accent);
    color:white
}

.primary:hover {
    background:#34352e
}

.secondary {
    background:var(--surface);
    border-color:var(--line);
    color:var(--ink)
}

.text-button {
    background:transparent;
    border:0;
    padding:12px 0 0;
    color:var(--accent);
    font-size:13px;
    text-align:left
}

.form-error {
    background:#fff1f0;
    border:1px solid #efc4c0;
    padding:12px;
    border-radius:8px;
    color:#98231d;
    font-size:13px;
    margin:0
}

.shop-code-input {
    text-transform:uppercase
}

.feature-screen {
    padding:28px;
    max-width:1400px;
    margin:auto
}

.screen-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:0 0 24px
}

.screen-heading h2 {
    font-size:26px;
    margin:0 0 8px
}

.screen-heading p:not(.eyebrow) {
    margin:0;
    color:var(--muted);
    font-size:14px
}

.feature-panel {
    padding:24px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:20px
}

.feature-panel h3 {
    font-size:17px;
    margin:0 0 16px
}

.feature-panel.argus-form {
    max-width:560px
}

.feature-columns {
    display:grid;
    grid-template-columns:minmax(260px,380px) 1fr;
    gap:24px
}

.feature-columns .feature-panel {
    margin:0
}

.supplier-row {
    padding:18px 0;
    border-bottom:1px solid var(--line)
}

.supplier-row h4 {
    margin:0 0 6px;
    font-size:16px;
    font-weight:600
}

.supplier-row p,.empty-copy {
    font-size:14px;
    color:var(--muted);
    margin:4px 0
}

.table-wrap {
    overflow-x:auto
}

.account-banner {
    margin:0 0 24px;
    padding:24px;
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:12px
}

.account-banner h2 {
    font-size:22px;
    margin:0 0 12px
}

.account-banner small {
    font-size:13px;
    color:var(--muted)
}

.shop-code {
    font-family:monospace;
    font-size:18px;
    letter-spacing:.1em
}

.permission-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:8px
}

.permission-grid legend {
    font-size:13px;
    padding:0 5px
}

.permission-grid label {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    text-transform:capitalize
}

.permission-grid input {
    width:18px;
    height:18px;
    accent-color:var(--accent)
}

.external-payment,.pending-notice {
    padding:14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--soft);
    font-size:13px;
    line-height:1.55
}

.external-payment label {
    display:block;
    margin-top:16px
}

.external-payment input {
    margin-top:7px
}

.pending-notice {
    margin:14px 20px
}

.modal-overlay {
    position:fixed;
    inset:0;
    z-index:80;
    background:#141b2480;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px
}

.modal-card {
    background:var(--surface);
    padding:28px;
    max-width:460px;
    width:100%;
    max-height:90dvh;
    overflow:auto;
    border-radius:14px;
    border:1px solid var(--line)
}

.modal-card h2 {
    font-size:22px;
    margin:0
}

.modal-card>p {
    color:var(--muted);
    font-size:14px;
    margin:0
}

.button-row {
    display:flex;
    gap:10px;
    justify-content:flex-end
}

.products-grid>div {
    box-shadow:none!important;
    transition:border-color .15s
}

.products-grid>div:hover {
    border-color:var(--accent)!important;
    box-shadow:none!important
}

#receipt-print-area {
    background:white;
    color:#111;
    font-variant-numeric:tabular-nums
}

.dark {
    --page:#1c1d18;
    --surface:#252620;
    --ink:#f6f5ec;
    --muted:#b1b2a7;
    --line:#43453b;
    --accent:#e7e9d8;
    --soft:#303229;
    color-scheme:dark
}

.dark aside,.dark header,.dark .save-status {
    background:var(--surface)!important
}

.dark .primary,.dark .bg-emerald-500,.dark .bg-emerald-600 {
    background:#171813!important;
    color:white!important
}

.dark .auth-card {
    box-shadow:none
}

.dark .account-banner {
    background:var(--soft);
    border-color:var(--line)
}

.dark .form-error {
    background:#402321;
    color:#ffb5ae;
    border-color:#6a3330
}

@media(max-width:767px) {
    .auth-shell {
        grid-template-columns:1fr;
        padding:24px;
        gap:24px
    }

    .auth-intro>img {
        margin-bottom:14px
    }

    .auth-intro h1 {
        font-size:34px;
        margin:10px 0
    }

    .auth-intro h1 br {
        display:none
    }

    .auth-intro>p:not(.eyebrow),.local-note {
        display:none
    }

    .auth-card {
        padding:24px
    }

    .auth-intro .eyebrow {
        margin:0
    }

    .save-status {
        padding:0 12px;
        font-size:11px;
        height:auto;
        min-height:36px;
        flex-wrap:wrap
    }

    .save-status>span:nth-of-type(2) {
        display:none
    }

    .save-status button {
        margin-left:auto
    }

    .feature-screen {
        padding:20px 14px
    }

    .feature-columns {
        grid-template-columns:1fr;
        gap:16px
    }

    .feature-panel {
        padding:18px
    }

    .screen-heading {
        align-items:flex-start
    }

    .screen-heading h2 {
        font-size:23px
    }

    main>.p-4,main>.p-6 {
        padding:16px!important
    }

    header h1 {
        font-size:16px!important
    }

    .products-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))!important
    }

    table {
        min-width:560px
    }

    .modal-card {
        padding:22px
    }

    .fixed.inset-0.z-50 {
        padding:12px!important
    }

    .fixed.inset-0.z-50>div {
        max-height:95dvh!important;
        overflow:auto
    }

    .button-row {
        flex-wrap:wrap
    }

}

@media print {
    .save-status,aside,header {
        display:none!important
    }

    #receipt-print-area {
        font-size:12px!important;
        max-width:80mm!important
    }

    #receipt-print-area table {
        min-width:0!important
    }

    #receipt-print-area th,#receipt-print-area td {
        padding:3px!important;
        font-size:11px!important
    }

}

/* Argus palette: warm neutral surfaces, ink actions and a restrained lime accent. */

html,body {
    background:var(--page)!important;
    color:var(--ink)!important
}

html body #app *,html body #app *::before,html body #app *::after {
    box-shadow:none!important;
    text-shadow:none!important;
    background-image:none!important
}

html body #app {
    background:var(--page)!important
}

html body #app>aside,html body #app>aside>div {
    background:var(--page)!important;
    border-color:#d0cfc7!important
}

html body #app aside .bg-slate-950,html body #app aside .bg-slate-950\/40 {
    background:var(--page)!important;
    border-color:var(--line)!important
}

html body #app header,html body #app .save-status {
    background:var(--page)!important;
    border-color:var(--line)!important
}

html body #app main {
    background:var(--page)!important
}

html body #app [class*="bg-emerald-"],html body #app [class*="bg-blue-"],html body #app [class*="bg-indigo-"],html body #app [class*="bg-purple-"],html body #app [class*="bg-amber-"] {
    background-color:var(--soft)!important;
    border-color:var(--line)!important;
    color:var(--ink)!important
}

html body #app [class*="text-emerald-"],html body #app [class*="text-blue-"],html body #app [class*="text-indigo-"],html body #app [class*="text-purple-"],html body #app [class*="text-amber-"] {
    color:var(--ink)!important
}

html body #app [class~="bg-white"],html body #app [class~="bg-slate-50"],html body #app .auth-card,html body #app .feature-panel,html body #app .modal-card {
    background:var(--surface)!important;
    border-color:var(--line)!important
}

html body #app [class~="bg-slate-100"],html body #app [class~="bg-slate-200"] {
    background:var(--soft)!important;
    border-color:var(--line)!important
}

html body #app [class~="text-slate-900"],html body #app [class~="text-slate-950"],html body #app [class~="text-slate-800"] {
    color:var(--ink)!important
}

html body #app [class~="text-slate-400"],html body #app [class~="text-slate-500"],html body #app [class~="text-slate-600"] {
    color:var(--muted)!important
}

html body #app [class*="border-slate-"] {
    border-color:var(--line)!important
}

html body #app button[class~="bg-emerald-500"],html body #app button[class~="bg-emerald-600"],html body #app .primary {
    background:var(--ink)!important;
    color:#fbfbf7!important;
    border:1px solid var(--ink)!important
}

html body #app button[class~="bg-emerald-500"]:hover,html body #app .primary:hover {
    background:#34352e!important;
    color:#fff!important
}

html body #app aside nav button.bg-emerald-600,html body #app .argus-nav.selected {
    background:#dbdad2!important;
    border-color:transparent!important;
    color:var(--ink)!important
}

html body #app aside nav button:hover,html body #app .argus-nav:hover {
    background:#e0dfd7!important;
    color:var(--ink)!important
}

html body #app .products-grid>div,html body #app .products-grid>div:hover {
    background:var(--surface)!important;
    border-color:var(--line)!important;
    box-shadow:none!important;
    transform:none!important
}

html body #app .products-grid .aspect-square {
    background:#efeee8!important;
    border-color:var(--line)!important
}

html body #app .bg-slate-900\/80,html body #app .modal-overlay {
    background:rgba(20,21,17,.38)!important;
    backdrop-filter:none!important
}

html body #app .fixed.inset-0.z-50 {
    backdrop-filter:none!important
}

html body #app .animate-pulse,html body #app .animate-bounce,html body #app .pulse-emerald {
    animation:none!important;
    box-shadow:none!important
}

html body #app .primary:focus-visible,html body #app button:focus-visible,html body #app input:focus-visible,html body #app select:focus-visible {
    outline:2px solid #626e2c!important;
    outline-offset:3px
}

html body #app .status-dot {
    background:#6c7b26
}

html body #app .auth-card {
    border-radius:18px;
    padding:36px
}

html body #app .auth-intro h1 {
    font-weight:600;
    letter-spacing:-.055em
}

html body #app .local-note {
    border-color:#c4c6b4
}

html body #app .account-banner,html body #app .external-payment,html body #app .pending-notice {
    background:#eeeee5!important;
    border-color:var(--line)!important;
    color:var(--ink)!important
}

html body #app .dark input,html body #app .dark select {
    color:var(--ink)
}

.inventory-categories {
    padding:20px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin:0 0 20px
}

.category-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:14px
}

.category-heading h3 {
    margin:0 0 4px;
    font-size:16px;
    font-weight:600
}

.category-heading p,.category-empty p {
    margin:0;
    font-size:13px;
    color:var(--muted)
}

.category-heading .primary {
    gap:8px;
    white-space:nowrap
}

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

.category-item {
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    border-radius:9px;
    overflow:hidden;
    background:var(--surface)
}

.category-filter {
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--surface);
    padding:8px 12px;
    min-height:40px;
    font-size:13px;
    text-align:left
}

.category-item .category-filter {
    border:0;
    border-radius:0
}

.category-filter.selected {
    background:#daddc8!important;
    color:var(--ink);
    font-weight:600
}

.category-filter span {
    margin-left:8px;
    color:var(--muted);
    font-variant-numeric:tabular-nums
}

.category-edit {
    border:0;
    border-left:1px solid var(--line);
    background:transparent;
    padding:8px 10px;
    min-height:40px;
    color:var(--muted);
    font-size:12px
}

.inline-action {
    border:0;
    background:transparent;
    color:var(--ink);
    padding:7px 0;
    min-height:32px;
    font-size:13px;
    font-weight:550;
    text-align:left;
    text-decoration:underline;
    text-underline-offset:3px
}

.category-dialog {
    z-index:100!important
}

.category-empty {
    padding:12px 0 2px
}

.discount-entry {
    padding:10px 0 14px;
    border-bottom:1px solid var(--line)
}

.discount-entry>label {
    display:block;
    font-size:13px;
    font-weight:550;
    margin-bottom:8px
}

.discount-entry>div {
    display:grid;
    grid-template-columns:1fr 110px;
    gap:8px
}

.discount-entry select,.discount-entry input {
    width:100%;
    min-height:42px;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--surface);
    color:var(--ink);
    padding:8px 10px
}

.discount-entry small {
    display:block;
    margin-top:7px;
    font-size:12px;
    color:var(--muted)
}

.inline-error,.discount-entry small.inline-error {
    color:#a6342a!important;
    font-size:13px
}

.cash-summary {
    display:grid;
    grid-template-columns:1fr;
    margin-bottom:22px;
    gap:12px
}

.cash-summary.with-credit {
    grid-template-columns:repeat(3,minmax(0,1fr))
}

.cash-summary article {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:23px
}

.cash-summary article p {
    font-size:13px;
    margin:0 0 14px;
    color:var(--muted)
}

.cash-summary article strong {
    font-size:32px;
    font-weight:600;
    letter-spacing:-.045em;
    font-variant-numeric:tabular-nums;
    line-height:1.2
}

.cash-summary article small {
    display:block;
    margin-top:12px;
    font-size:12px;
    color:var(--muted)
}

.cash-summary .credit-summary {
    border-left:4px solid #c1df4a
}

.summary-explanation {
    grid-column:1/-1;
    font-size:11px;
    line-height:1.6;
    color:var(--muted);
    margin:0 2px
}

.credit-checkout {
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px;
    background:#eeeee7;
    gap:12px
}

.credit-checkout p {
    font-size:13px;
    margin:0;
    color:var(--muted)
}

.credit-balance-line {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    font-size:14px;
    padding:12px 0;
    border-top:1px solid var(--line);
    font-variant-numeric:tabular-nums
}

.credit-balance-line strong {
    font-size:20px
}

.credit-sale-label {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:5px
}

.customer-balance {
    font-size:12px;
    color:var(--ink);
    margin-top:8px
}

.outstanding-total {
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:right;
    white-space:nowrap
}

.outstanding-total span {
    font-size:12px;
    color:var(--muted)
}

.outstanding-total strong {
    font-size:28px;
    letter-spacing:-.04em;
    font-weight:600
}

.credit-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
    font-size:13px
}

.credit-toolbar input {
    accent-color:#181913;
    margin-right:8px;
    vertical-align:middle
}

.receipt-credit {
    padding:12px 0;
    border-top:1px dashed #999;
    border-bottom:1px dashed #999;
    margin:12px 0;
    font-size:12px
}

.receipt-credit>div {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin:5px 0
}

.receipt-credit p {
    margin:6px 0 0
}

.credit-checkout input,.credit-checkout select {
    background:var(--surface)
}

html.dark {
    --page:#1c1d18;
    --surface:#252620;
    --ink:#f6f5ec;
    --muted:#b1b2a7;
    --line:#43453b;
    --accent:#e7e9d8;
    --soft:#303229;
    --lime:#d4ff45;
    color-scheme:dark
}

html.dark body #app>aside,html.dark body #app>aside>div {
    border-color:var(--line)!important
}

html.dark body #app aside nav button.bg-emerald-600,html.dark body #app .argus-nav.selected {
    background:#3c4030!important
}

html.dark body #app .primary,html.dark body #app button[class~="bg-emerald-500"],html.dark body #app button[class~="bg-emerald-600"] {
    background:var(--lime)!important;
    color:#141510!important;
    border-color:var(--lime)!important
}

html.dark body #app .account-banner,html.dark body #app .external-payment,html.dark body #app .pending-notice,html.dark body #app .credit-checkout {
    background:#303229!important
}

html.dark body #app .category-filter.selected {
    background:#424b2a!important
}

html.dark body #app .products-grid .aspect-square {
    background:#303229!important
}

@media(max-width:767px) {
    .cash-summary.with-credit {
        grid-template-columns:1fr
    }

    .cash-summary article {
        padding:18px
    }

    .cash-summary article strong {
        font-size:29px
    }

    .category-heading {
        align-items:flex-start
    }

    .category-heading p {
        max-width:180px
    }

    .category-heading .primary {
        padding:8px 12px;
        font-size:12px
    }

    .credit-toolbar {
        align-items:flex-start
    }

    .outstanding-total strong {
        font-size:24px
    }

    .screen-heading .outstanding-total {
        white-space:normal
    }

    .credit-checkout {
        padding:13px
    }

    .auth-card {
        padding:24px!important
    }

}

@media print {
    html body #app #receipt-print-area,html body #app #receipt-print-area * {
        background:white!important;
        color:#111!important
    }

    .receipt-credit {
        break-inside:avoid
    }

    .summary-explanation {
        display:none
    }

}

html.dark body {
    background:var(--page)!important;
    color:var(--ink)!important
}

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

/* Argus 0.3: quiet workspace, matching the supplied overview reference. */
:root { --page:#f6f5f0; --surface:#ffffff; --line:#e0dfda; --soft:#e5e4de; --lime:#c5e98c; }
button { border:1px solid transparent; background:transparent; font-family:inherit; }
html body #app > aside, html body #app > aside > div { background:#eeede7!important; width:212px; }
html body #app aside .bg-slate-950, html body #app aside .bg-slate-950\/40 { background:transparent!important; border:0!important; }
html body #app aside nav button { border:0!important; border-radius:10px; background:transparent; color:var(--ink)!important; font-weight:400; text-align:left; padding:11px 15px; min-height:43px; }
html body #app aside nav button.bg-emerald-600, html body #app aside nav button.selected { background:var(--soft)!important; }
html body #app aside nav i { display:none; }
html body #app aside nav { padding:12px 10px; }
html body #app aside .sidebar-profile { margin:8px 12px 12px; padding:12px; }
.sidebar-profile > img { display:none; }
.sidebar-profile h4 { font-weight:500!important; }
.sidebar-profile button { min-height:26px; font-size:11px; }
.argus-wordmark { display:flex; align-items:center; gap:7px; font-size:24px; font-weight:400; letter-spacing:6px; color:#10110e; padding:6px 12px; white-space:nowrap; }
.argus-wordmark span { letter-spacing:0; margin-right:0; font-size:26px; font-weight:300; }
html body #app .workspace-header { height:auto; min-height:120px; padding:24px 44px; background:var(--page)!important; border:0!important; }
.workspace-breadcrumb { font-size:12px; color:var(--muted); margin:0 0 9px; text-transform:capitalize; }
html body #app .workspace-header h1 { font-size:38px!important; line-height:1.15; font-weight:400!important; letter-spacing:-1px; }
.workspace-header h1 i { display:none; }
html body #app .save-status { background:var(--page)!important; border:0!important; padding:0 44px 12px; height:32px; font-size:11px; }
html body #app main { background:var(--page)!important; }
html body #app main > .p-4, html body #app main > .p-6 { padding:12px 44px 40px; }
.overview-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.overview-metrics article { background:var(--surface); padding:22px 24px; border:1px solid var(--line); border-radius:16px; }
.overview-metrics p { font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin:0 0 8px; }
.overview-metrics strong { display:block; font-size:32px; line-height:1.2; font-weight:400; letter-spacing:-1px; }
.overview-metrics small { display:block; font-size:11px; color:var(--muted); margin-top:12px; }
.earnings-panel { padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.earnings-panel h2 { margin:0 0 8px; font-size:20px; }
.earnings-panel h3 { margin:28px 0 12px; font-size:17px; }
.earnings-panel p { font-size:13px; color:var(--muted); }
.earnings-lines { margin:20px 0; }
.earnings-lines > div { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
.earnings-lines dd { margin:0; font-variant-numeric:tabular-nums; white-space:nowrap; }
.earnings-lines small { display:block; color:var(--muted); font-size:12px; font-weight:400; margin-top:4px; }
.earnings-detail { padding-left:20px!important; color:var(--muted); font-size:14px; }
.earnings-subtotal { font-weight:600; }
.earnings-result { font-size:22px; font-weight:500; }
.earnings-result dd { background:#e5f3ce; color:#151612; padding:12px; border-radius:8px; }
.table-scroll { overflow-x:auto; }
.sell-credit-button { display:block; width:100%; text-align:left; border:1px solid var(--line); border-radius:10px; padding:12px; margin-top:12px; font-weight:600; background:var(--soft); }
.sell-credit-button span { display:block; font-size:11px; font-weight:400; margin-top:4px; }
.payment-methods button { min-height:64px; }
@media(max-width:900px) {
 html body #app .workspace-header { padding:18px 20px; min-height:100px; }
 html body #app .save-status { padding-left:20px; padding-right:20px; }
 html body #app main > .p-4, html body #app main > .p-6 { padding:12px 20px 24px; }
 .overview-metrics { gap:10px; } .overview-metrics article { padding:18px; } .overview-metrics strong { font-size:26px; }
}
@media(max-width:600px) { .overview-metrics { grid-template-columns:1fr; } .earnings-panel { padding:18px; } html body #app .workspace-header h1 { font-size:28px!important; } }
html.dark body #app > aside, html.dark body #app > aside > div { background:#20211d!important; }
html.dark .argus-wordmark { color:var(--ink); }

html body #app main { padding:12px 44px 40px!important; }
@media(max-width:900px) { html body #app main { padding:12px 20px 24px!important; } }

.category-list { max-height:240px; overflow-y:auto; }

/* 0.4: usable basket height, compact account actions and reactive charts. */
html body #app .receive-payment { display:inline-flex; align-items:center; width:auto; min-height:32px; height:32px; padding:0 12px; font-size:12px; border-radius:7px; margin-right:12px; white-space:nowrap; }
html body #app .register-layout { height:auto; min-height:100%; align-items:flex-start; }
html body #app .register-layout > div:first-child { height:calc(100dvh - 200px); min-height:480px; }
html body #app .basket-panel { width:420px; flex:0 0 420px; height:auto!important; min-height:620px; overflow:visible; }
html body #app .basket-items { flex:none; min-height:260px; max-height:440px; overflow-y:auto; padding:14px; }
html body #app .basket-items > div { min-height:64px; }
html body #app .basket-items p.truncate { white-space:normal; font-size:13px; }
html body #app .basket-items button { min-height:30px; }
html body #app .basket-totals { flex:none; padding:14px; }
.basket-totals .discount-entry { margin:0; padding:8px 0; }
.basket-totals .discount-entry input,.basket-totals .discount-entry select { min-height:36px; height:36px; }
.basket-totals .sell-credit-button { padding:9px 12px; }
.inventory-filter { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:16px; }
.inventory-filter label { font-size:13px; color:var(--muted); }
.inventory-filter select { min-width:240px; max-width:100%; padding:10px 36px 10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.inventory-filter > span { font-size:12px; color:var(--muted); }
.auth-intro .argus-wordmark { justify-content:flex-start; padding:0; margin-bottom:42px; font-size:28px; }
html body #app .auth-intro h1 { font-weight:400!important; }
.chart-legend { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; }
.chart-legend span:first-child { color:var(--ink); }
.chart-legend span:nth-child(2) { color:#637c28; }
.chart-legend small { color:var(--muted); }
.trend-chart svg { display:block; width:100%; height:auto; min-height:220px; overflow:visible; }
.trend-chart svg text { fill:var(--muted); font-family:inherit; font-size:10px; }
.chart-grid { stroke:var(--line); stroke-width:1; }
.revenue-line,.profit-line { fill:none; stroke-width:2.5; stroke-linejoin:round; }
.revenue-line { stroke:var(--ink); }.profit-line { stroke:#90b64b; }
.revenue-dot { fill:var(--ink); }.profit-dot { fill:#90b64b; }
.chart-empty { display:flex; align-items:center; justify-content:center; min-height:230px; padding:24px; color:var(--muted); text-align:center; font-size:14px; }
.chart-data summary { cursor:pointer; font-size:12px; color:var(--muted); }
.chart-data .table-scroll { max-height:250px; }
.category-chart { max-height:320px; overflow-y:auto; padding:12px 0; }
.category-chart-row { margin-bottom:20px; }
.category-chart-row > div:first-child { display:flex; justify-content:space-between; gap:16px; font-size:12px; margin-bottom:8px; }
.category-chart-row strong { font-weight:500; white-space:nowrap; }
.category-bar-track { height:8px; border-radius:8px; background:var(--soft); }
.category-bar-track > div { height:8px; border-radius:8px; background:#b8dc7e; }
.category-bar-track > div.negative { background:#ba6e63; }
@media(max-width:1100px) { html body #app .basket-panel { width:360px; flex-basis:360px; } }
@media(max-width:1023px) { html body #app .register-layout { flex-direction:column; } html body #app .register-layout > div:first-child { width:100%; height:480px; min-height:0; } html body #app .basket-panel { width:100%; flex-basis:auto; } }

.basket-quantity { width:70px; min-height:34px!important; height:34px; padding:4px; border:1px solid var(--line); border-radius:6px; text-align:center; }

.history-filters { display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:14px 0; }.history-filters label{min-width:140px}.history-note{font-size:12px;color:var(--muted)}.shift-summary>div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--line)}.refund-dialog{width:min(900px,96vw)!important;max-width:900px!important}.refund-dialog fieldset{border:0;padding:0;min-width:0}.refund-dialog td input[type=number]{width:110px}.refund-dialog td input[type=checkbox]{width:20px;height:20px}.receipt-actions{flex-wrap:wrap}.receipt-refunds{border-top:1px solid var(--line);padding-top:12px;font-size:12px}

/* 0.7: same Argus palette, simpler task navigation. */
.section-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:12px}.section-tabs button,.period-button{padding:8px 14px;border-radius:8px;color:var(--muted)}.section-tabs button.active,.period-button.active{background:var(--soft);color:var(--ink)}.action-briefing{display:grid;grid-template-columns:1fr 1fr;gap:28px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}.action-briefing h2{font-size:24px;margin:6px 0}.action-briefing p{color:var(--muted);font-size:13px}.action-list button{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);width:100%;text-align:left;font-size:14px}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.statement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}.statement-grid span{display:block;font-size:12px;color:var(--muted)}.statement-grid strong{display:block;margin-top:8px;font-size:23px;font-weight:500}.purchase-dialog{width:min(1000px,96vw)!important;max-width:1000px!important}.purchase-dialog fieldset{border:0;padding:0;min-width:0}.purchase-dialog td input{width:110px}.purchase-dialog td select{max-width:340px}.close-steps{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.close-steps button{padding:10px 14px;border:1px solid var(--line);border-radius:8px}.close-steps button.active{background:var(--soft)}.feature-panel details{font-size:12px}.feature-panel summary{cursor:pointer;font-weight:500;padding:6px 0}.stock-insights>p{color:var(--muted);font-size:13px}.pending-banner{padding:14px;margin-bottom:16px;background:#edf3df;border:1px solid var(--line);border-radius:10px}.pending-banner button{font-weight:600;text-decoration:underline}.stock-metrics{margin:16px 0}.feature-screen>.overview-metrics{margin:20px 0}.feature-screen>.feature-panel,.feature-screen>details{margin-bottom:20px}.feature-screen .history-filters{margin:12px 0}.feature-panel h3{margin-top:0}.feature-panel section .primary{margin-top:16px}.feature-panel label input[type=checkbox]{margin-right:8px}.product-grid img{object-fit:contain}
@media(max-width:750px){.action-briefing,.form-two{grid-template-columns:1fr}.statement-grid{grid-template-columns:1fr 1fr}.purchase-dialog td select{max-width:220px}.overview-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.overview-metrics,.statement-grid{grid-template-columns:1fr}}