:root { --ink:#16352d; --muted:#6d7e78; --green:#166b52; --green-dark:#105541; --mint:#eaf5f0; --line:#dde6e2; --cream:#f6f7f3; --gold:#bd852a; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px 1fr; }
.sidebar { background:#123e33; color:white; padding:28px 18px 20px; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; width:248px; }
.brand,.mobile-brand { display:flex; align-items:center; gap:11px; color:white; font:800 22px Manrope,sans-serif; text-decoration:none; padding:0 10px 31px; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#e5b561; color:#173f35; font-size:20px; }
nav { display:grid; gap:7px; }
.nav-item { min-height:45px; padding:0 13px; border-radius:9px; display:flex; align-items:center; gap:13px; text-decoration:none; color:#b9cec7; font-size:14px; font-weight:600; }
.nav-item span { width:19px; font-size:18px; text-align:center; }.nav-item b { margin-left:auto; background:#28574b; border-radius:20px; padding:2px 8px; font-size:11px; }
.nav-item.active { background:#285a4d; color:white; }
.sidebar-footer { margin-top:auto; }
.support-card { margin:16px 5px 17px; padding:17px; border:1px solid #37675b; border-radius:12px; background:#1b4a3e; }
.support-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; color:#173f35; background:#e9bb69; font-weight:800; margin-bottom:12px; }
.support-card strong { font-size:13px; }.support-card p { color:#b7cac4; font-size:11px; line-height:1.5; margin:5px 0 13px; }.support-card button { width:100%; border:0; border-radius:7px; padding:8px; color:white; background:#326356; font-size:11px; font-weight:700; }
.profile { border-top:1px solid #376358; padding:18px 7px 0; display:flex; align-items:center; gap:10px; }.avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#e7bc70; color:#173f35; font-weight:700; font-size:12px; }.profile strong,.profile small { display:block; }.profile strong { font-size:12px; }.profile small { color:#a7beb7; font-size:10px; margin-top:2px; }.profile button { color:#aec4bd; border:0; background:none; margin-left:auto; }
main { grid-column:2; min-width:0; }.topbar { height:72px; background:white; border-bottom:1px solid var(--line); padding:0 38px; display:flex; align-items:center; justify-content:flex-end; position:sticky; top:0; z-index:4; }.mobile-brand { display:none; }.store-pill { margin-right:auto; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:8px; }.store-dot { width:7px; height:7px; background:#31a376; border-radius:50%; }.top-actions { display:flex; gap:12px; align-items:center; }
.icon-button { border:1px solid var(--line); border-radius:8px; background:white; width:38px; height:38px; position:relative; }.icon-button i { position:absolute; width:6px; height:6px; border-radius:50%; background:#e35d52; right:8px; top:7px; }
.primary-button,.secondary-button { border-radius:8px; padding:11px 16px; border:0; font-weight:700; font-size:12px; }.primary-button { background:var(--green); color:white; box-shadow:0 3px 7px #0f5c4530; }.primary-button:hover { background:var(--green-dark); }.secondary-button { background:white; color:var(--ink); border:1px solid var(--line); }
.content { max-width:1190px; margin:auto; padding:44px 42px 60px; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; }.eyebrow { color:#a4742c!important; font-weight:800!important; letter-spacing:1.6px; font-size:10px!important; margin:0 0 7px!important; }.page-heading h1 { font:800 29px Manrope,sans-serif; letter-spacing:-.7px; margin:0 0 7px; }.page-heading p { margin:0; color:var(--muted); font-size:13px; }.date-chip { color:var(--muted); font-size:11px; padding:8px 11px; border:1px solid var(--line); background:#fafbf9; border-radius:8px; }
.upload-card { background:linear-gradient(120deg,#173f35,#1a5948); color:white; border-radius:14px; padding:25px 28px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 7px 18px #173f351f; position:relative; overflow:hidden; }.upload-card:after { content:""; position:absolute; width:240px; height:240px; border:45px solid #ffffff07; border-radius:50%; right:15%; top:-120px; }.upload-copy { display:flex; align-items:center; gap:18px; z-index:1; }.scan-icon { width:54px; height:54px; border-radius:12px; display:grid; place-items:center; background:#ffffff13; border:1px solid #ffffff18; font-size:25px; position:relative; }.scan-icon span { position:absolute; width:27px; height:2px; background:#efb658; box-shadow:0 0 6px #efb658; }.upload-card h2 { font:700 17px Manrope,sans-serif; margin:0 0 6px; }.upload-card p { margin:0; color:#c5d7d1; font-size:12px; }.upload-actions { display:flex; gap:10px; z-index:1; }.upload-actions .secondary-button { background:#ffffff12; color:white; border-color:#ffffff2b; }.upload-actions .primary-button { background:#e7b35d; color:#173f35; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px 0 35px; }.stat-card { background:white; border:1px solid var(--line); border-radius:12px; padding:20px; display:flex; gap:15px; align-items:flex-start; }.stat-icon { width:39px; height:39px; border-radius:10px; display:grid; place-items:center; font-weight:700; }.mint { color:#287760; background:#e7f3ee; }.gold { color:#a87121; background:#fbf1de; }.blue { color:#55768e; background:#eaf1f5; }.stat-card span { color:#85938e; font-size:9px; font-weight:800; letter-spacing:.7px; display:block; }.stat-card strong { display:block; font:700 21px Manrope,sans-serif; margin:4px 0 3px; }.stat-card small { font-size:10px; color:#788982; }.stat-card small.positive { color:#23815f; font-weight:700; }.stat-card small em { font-style:normal; color:#8b9894; font-weight:400; }
.section-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:15px; }.section-header h2 { font:700 17px Manrope,sans-serif; margin:0 0 4px; }.section-header p { margin:0; color:var(--muted); font-size:11px; }.text-button { border:0; background:none; color:var(--green); font-size:11px; font-weight:700; }.invoice-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; background:white; }.invoice-table { width:100%; border-collapse:collapse; min-width:780px; }.invoice-table th { background:#fafbf9; color:#8b9894; font-size:9px; letter-spacing:.7px; text-align:left; padding:13px 17px; }.invoice-table td { border-top:1px solid #edf1ef; padding:14px 17px; font-size:11px; color:#536760; }.invoice-table td strong { color:var(--ink); }.dist-logo { display:inline-grid; place-items:center; width:29px; height:29px; border-radius:7px; margin-right:9px; font-size:8px; font-weight:800; }.rn { background:#eaf1eb; color:#397050; }.sg { background:#edf0f8; color:#4d5d89; }.br { background:#f8ede6; color:#945e3d; }.status { display:inline-block; padding:5px 8px; border-radius:20px; font-size:9px; font-weight:700; }.status.complete { background:#eaf5ef; color:#2b7b5d; }.status.review { background:#fdf2df; color:#a56a16; }
.modal { display:none; position:fixed; inset:0; z-index:20; }.modal.open { display:block; }.modal-backdrop { position:absolute; inset:0; background:#102c25a8; backdrop-filter:blur(3px); }.modal-panel { position:absolute; inset:5vh 4vw auto; max-width:1100px; max-height:90vh; overflow:auto; margin:auto; background:#fbfcfa; border-radius:16px; box-shadow:0 30px 80px #0c261f50; }.modal-top { display:flex; justify-content:space-between; align-items:start; padding:23px 27px 18px; border-bottom:1px solid var(--line); background:white; border-radius:16px 16px 0 0; }.modal-top h2 { margin:0; font:700 21px Manrope,sans-serif; }.close-button { border:0; background:#f1f4f2; width:33px; height:33px; border-radius:50%; font-size:22px; color:#60716b; }
.processing-state { padding:70px 20px 80px; text-align:center; }.document-loader { position:relative; width:95px; height:110px; margin:0 auto 25px; }.paper { margin:auto; width:75px; height:96px; background:white; border:1px solid var(--line); border-radius:7px; box-shadow:0 10px 22px #153f3520; padding:25px 13px; }.paper span { display:block; background:#dce6e2; height:5px; border-radius:5px; margin:8px 0; }.paper span:nth-child(2) { width:75%; }.scan-line { position:absolute; left:0; right:0; top:20px; height:3px; background:#e6ad4c; box-shadow:0 0 12px #e6ad4c; animation:scan 1.4s ease-in-out infinite alternate; }@keyframes scan { to { transform:translateY(75px); } }.processing-state h3 { font:700 19px Manrope; margin:0 0 7px; }.processing-state p,.processing-state small { color:var(--muted); font-size:12px; }.progress { width:280px; max-width:85%; height:6px; background:#e3eae7; border-radius:10px; overflow:hidden; margin:25px auto 12px; }.progress span { display:block; width:10%; height:100%; background:#278365; transition:width .35s; }
.review-state { padding:22px 27px 27px; }.success-banner { background:#eaf5f0; border:1px solid #cae6da; border-radius:10px; padding:12px 15px; display:flex; gap:11px; align-items:center; }.success-banner>span { width:28px; height:28px; display:grid; place-items:center; background:#2e8a68; color:white; border-radius:50%; }.success-banner strong { font-size:12px; }.success-banner p { margin:2px 0 0; font-size:10px; color:#60776f; }.invoice-meta { display:grid; grid-template-columns:2fr 1fr 1fr; gap:13px; margin:18px 0; }.invoice-meta label { font-size:9px; font-weight:800; color:#71817c; letter-spacing:.5px; }.invoice-meta input,.review-table input { width:100%; border:1px solid var(--line); border-radius:7px; background:white; padding:9px 10px; color:var(--ink); margin-top:5px; font-size:11px; outline:none; }.invoice-meta input:focus,.review-table input:focus { border-color:#4b9b7f; box-shadow:0 0 0 3px #4b9b7f18; }.review-table-wrap { border:1px solid var(--line); border-radius:10px; overflow:auto; background:white; }.review-table { border-collapse:collapse; width:100%; min-width:900px; }.review-table th { text-align:left; padding:10px 9px; font-size:8px; letter-spacing:.5px; color:#87958f; background:#f8faf8; }.review-table td { padding:7px 5px; border-top:1px solid #edf1ef; }.review-table input { margin:0; }.review-table td:first-child { width:24%; }.review-table td:nth-child(2) { width:15%; }.review-table td:not(:first-child):not(:nth-child(2)):not(:last-child) { width:11%; }.review-table input.flagged { border-color:#e2a541; background:#fffaf0; }.remove-row { border:0; background:none; color:#a1aca8; font-size:16px; }.add-row-button { border:0; background:none; color:var(--green); font-size:11px; font-weight:700; margin:13px 0; }.review-footer { display:flex; align-items:center; justify-content:space-between; padding-top:15px; border-top:1px solid var(--line); }.review-footer>div:last-child { display:flex; gap:9px; }.totals span { color:var(--muted); font-size:10px; display:block; }.totals strong { font-size:12px; }.totals b { font:700 19px Manrope; margin-left:9px; }.toast { position:fixed; right:25px; bottom:25px; z-index:30; padding:13px 18px; border-radius:10px; background:#163f35; color:white; display:flex; gap:10px; align-items:center; box-shadow:0 12px 30px #102f2760; transform:translateY(130px); transition:.3s; }.toast.show { transform:none; }.toast>span { color:#f0bf69; }.toast strong,.toast small { display:block; font-size:11px; }.toast small { color:#b8cdc6; margin-top:2px; }
@media(max-width:800px) { .app-shell { display:block; }.sidebar { display:none; } main { display:block; }.topbar { padding:0 17px; height:63px; }.mobile-brand { display:flex; padding:0; color:var(--ink); margin-right:auto; font-size:17px; }.mobile-brand .brand-mark { width:29px; height:29px; font-size:15px; }.store-pill,.icon-button { display:none; }.content { padding:27px 17px 50px; }.page-heading { align-items:start; }.date-chip { display:none; }.page-heading h1 { font-size:24px; }.upload-card { align-items:flex-start; padding:21px; flex-direction:column; gap:22px; }.upload-card p { line-height:1.5; }.upload-actions { width:100%; }.upload-actions button { flex:1; }.stats-grid { grid-template-columns:1fr; }.modal-panel { inset:2vh 2vw auto; max-height:96vh; }.invoice-meta { grid-template-columns:1fr; }.review-footer { align-items:flex-start; gap:15px; flex-direction:column; }.review-footer>div:last-child { width:100%; }.review-footer button { flex:1; } }