:root{color-scheme:dark;--bg:#0b0b0c;--panel:#151516;--panel-2:#1b1b1d;--line:#29292b;--text:#f5f5f5;--muted:#a1a1a5;--orange:#f06418;--orange-soft:#3a1d0d;--green:#9bd75d;--red:#ff7168;--blue:#65b7ff;--purple:#be82ff;--yellow:#f1c644}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:14px}
button,input,select{font:inherit}
button{cursor:pointer}
#app{min-height:100vh}
.sidebar{width:150px;background:#0a0a0b;border-right:1px solid #222;position:fixed;inset:0 auto 0 0;z-index:12;display:flex;flex-direction:column;padding:25px 10px 12px}
.brand{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.brand-mark{font:italic 900 44px/1 Georgia,serif;color:var(--orange);letter-spacing:-8px;padding-right:8px;transform:rotate(-8deg)}
.brand-name{font-size:10px;letter-spacing:.5px;color:#eee}
.brand small{font-size:8px;letter-spacing:2px;color:var(--muted)}
nav{display:grid;gap:4px;margin-top:28px}
.nav{display:flex;align-items:center;gap:10px;min-height:35px;border:0;border-radius:7px;background:transparent;color:#b5b5b8;text-align:left;padding:8px;font-size:12px;transition:background .18s,color .18s}
.nav:hover,.nav.active{background:#4a230e;color:#fff}
.nav.active{box-shadow:inset 2px 0 var(--orange)}
.nav-icon{display:inline-grid;place-items:center;width:16px;color:#c8c8ca;font-size:15px;flex:none}
.nav.active .nav-icon{color:var(--orange)}
.sidebar-bottom{margin-top:auto}
.outline{width:100%;background:transparent;border:1px solid #404044;border-radius:6px;color:var(--text);padding:9px;font-size:10px;font-weight:700}
.sync{display:flex;align-items:center;gap:7px;color:#888;font-size:9px;margin:13px 1px}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.user-box{display:flex;align-items:center;gap:8px;border-top:1px solid #242426;padding-top:12px}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#29292c;color:#fff;font-size:9px;font-weight:800}
.user-info{min-width:0;flex:1}
.user-info #userEmail{display:block;color:#ddd;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0 5px}
.logout{border:0;background:none;color:#999;padding:0;font-size:8px;font-weight:700}
.main{margin-left:150px;min-height:100vh;padding:0 16px 36px;max-width:1800px}
.topbar{height:54px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #202022}
.top-heading{display:flex;align-items:center;gap:14px}
.menu-toggle{width:27px;height:27px;border-radius:50%;border:1px solid #303034;color:#ddd;background:#171719;font-size:13px}
.eyebrow{display:none}
h1{font-size:14px;font-weight:500;margin:0;letter-spacing:0}
.top-actions{display:flex;align-items:center;gap:8px}
.today-label{font-size:10px;color:#ccc;border:1px solid #28282b;border-radius:18px;padding:8px 11px}
.primary,.danger,.secondary{border:1px solid transparent;border-radius:6px;padding:10px 13px;background:var(--orange);color:#fff;font-size:11px;font-weight:700;transition:filter .15s,background .15s}
.primary:hover,.danger:hover,.secondary:hover{filter:brightness(1.13)}
.secondary{background:#242427;border-color:#343438;color:#eee}
.danger{background:#371a18;border-color:#5a2825;color:#ff978f}
.small{padding:7px 9px;font-size:10px}
.delete-button{background:transparent;border:1px solid #422724;color:#ff8c82;border-radius:5px;padding:6px 8px;font-size:9px;font-weight:700}
.content-intro{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:14px 0}
.content-intro h2{font-size:18px;margin:0 0 4px}
.content-intro p{margin:0;color:var(--muted);font-size:11px}
.grid{display:grid;gap:10px}
.dashboard-hero{grid-template-columns:minmax(0,1.65fr) minmax(220px,.9fr);align-items:stretch}
.card{background:linear-gradient(145deg,#19191b,#141415);border:1px solid #252527;border-radius:12px;padding:15px;min-width:0}
.hero-card{padding:18px}
.hero-heading{display:flex;justify-content:space-between;align-items:center;color:#e5e5e5;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.hero-heading span:first-child:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:8px}
.hero-total{font-size:clamp(34px,5vw,60px);line-height:1.05;font-weight:700;letter-spacing:-2px;margin:17px 0 10px}
.hero-total small{font-size:11px;color:var(--muted);letter-spacing:0}
.chart{display:flex;align-items:end;gap:clamp(5px,1vw,14px);height:116px;padding:7px 4px 0;border-bottom:1px solid #373739}
.chart-item{height:100%;flex:1;display:flex;align-items:end;justify-content:center;position:relative}
.chart-bar{width:min(20px,70%);min-height:3px;border-radius:5px 5px 2px 2px;background:#343436}
.chart-item.today .chart-bar{background:var(--orange)}
.chart-label{position:absolute;bottom:-19px;color:#999;font-size:8px}
.chart-axis{display:flex;justify-content:space-between;color:#777;font-size:8px;margin-top:23px}
.hero-side{display:grid;gap:9px}
.metric-card{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px}
.metric-left{display:flex;align-items:center;gap:10px;min-width:0}
.metric-icon{width:27px;height:27px;border-radius:8px;background:#31200f;color:var(--orange);display:grid;place-items:center;font-size:13px;flex:none}
.metric-icon.green{background:#1d2c17;color:var(--green)}
.metric-icon.blue{background:#142334;color:var(--blue)}
.metric-icon.purple{background:#271832;color:var(--purple)}
.metric-icon.yellow{background:#302810;color:var(--yellow)}
.label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#c9c9cb}
.metric{font-size:16px;font-weight:700;margin-top:4px}
.orange{color:var(--orange)}
.metric-note{color:var(--green);font-size:9px;white-space:nowrap}
.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin:10px 0}
.stat-card{display:flex;align-items:center;gap:10px;padding:11px 12px}
.stat-card .metric{font-size:14px}
.dashboard-lower{grid-template-columns:1.15fr .82fr 1fr;margin-top:10px}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:17px 0 10px}
.section-title h2{font-size:14px;font-weight:600;margin:0}
.section-title .muted{font-size:10px}
.chart-card{min-height:248px}
.chart-card .chart{height:130px;margin-top:13px}
.chart-card .chart-bar{width:min(25px,70%)}
.chart-card .chart-axis{margin-top:25px}
.table-wrap{overflow:auto;background:#141415;border:1px solid #252527;border-radius:9px}
table{width:100%;border-collapse:collapse;font-size:11px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #252527;white-space:nowrap}
th{font-size:8px;text-transform:uppercase;letter-spacing:.8px;color:#96969a}
td{color:#e3e3e4}
tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:4px 6px;font-size:8px;font-weight:700;text-transform:uppercase;border-radius:4px;background:#29292c;color:#ccc}
.badge.green{background:#1e2b17;color:var(--green)}
.badge.orange{background:#3a210f;color:#ff9a54}
.badge.red{background:#3a1b19;color:#ff9389}
.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.product-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.product .product-head{display:flex;justify-content:space-between;align-items:start;gap:10px}
.product .stock{font-size:20px;font-weight:700;margin-top:11px}
.product h3{font-size:13px;margin:10px 0 4px}
.muted{color:var(--muted);font-size:10px}
.bar{height:5px;background:#303033;margin-top:12px;border-radius:10px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--orange);border-radius:inherit}
.form{display:grid;gap:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{font-size:9px;color:#d6d6d8;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.form input,.form select{display:block;width:100%;margin-top:5px}
input,select{border:1px solid #343438;background:#101011;color:#f4f4f4;padding:11px 12px;border-radius:6px;outline:none}
input:focus,select:focus{border-color:var(--orange)}
input::placeholder{color:#737377}
.total-box{background:#101011;border:1px solid #29292c;color:#fff;padding:15px;border-radius:8px}
.total-box strong{display:block;font-size:27px;margin-top:6px}
.total-box small{display:block;color:#aaa;margin-top:5px;font-size:10px}
.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;padding:18px;z-index:30}
.modal.hidden{display:none}
.modal-card{width:min(590px,100%);max-height:90vh;overflow:auto;background:#18181a;border:1px solid #303034;padding:24px;border-radius:12px;position:relative}
.modal-card h2{font-size:18px;margin:0 36px 18px 0}
.modal-card p{color:#ccc}
.close{position:absolute;right:13px;top:10px;border:0;background:none;color:#ddd;font-size:26px}
.receipt{background:#fff;color:#111;border:1px dashed #aaa;padding:25px;max-width:420px;margin:auto}
.receipt-head{font-size:24px;font-weight:800;letter-spacing:-1px}
.receipt hr{border:0;border-top:1px solid #ddd;margin:18px 0}
.receipt-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:12px}
.receipt-total{font-size:22px}
.receipt .muted{color:#777}
.payment-list{display:grid;gap:7px;margin-top:10px}
.payment-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #28282a;padding:8px 0}
.payment-row:first-child{border-top:0}
.payment-amount{font-size:11px;font-weight:700}
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,100px);background:#222;color:#fff;border:1px solid #3a3a3c;padding:11px 16px;border-radius:8px;font-size:11px;font-weight:700;transition:transform .22s;z-index:50;max-width:calc(100vw - 28px);text-align:center}
.toast.show{transform:translate(-50%,0)}
.hidden{display:none!important}
.hidden-app{visibility:hidden}
.app-visible{visibility:visible}
.login-screen{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;padding:20px;z-index:100}
.login-card{width:min(440px,100%);background:#f8f8f7;color:#151515;padding:34px;border-radius:8px;box-shadow:0 20px 60px #0008}
.login-brand{color:#101010;margin:0 auto 28px}
.login-brand .brand-mark{display:none}
.login-brand .brand-name{font-size:18px;color:#111;font-weight:900;letter-spacing:-.5px}
.login-brand small{color:var(--orange)}
.login-card h1{font-size:28px;font-weight:800;margin:8px 0}
.login-copy{margin:0 0 20px;color:#777}
.login-card .form label{color:#171717}
.login-card .form input{background:#fff;border-color:#d8d8d8;color:#111}
.login-card .primary{background:#090909;width:100%;padding:13px}
.login-error{min-height:18px;color:#b84727;font-size:11px;font-weight:700;margin:0}
.light-button{color:#111!important;border-color:#ddd!important;background:#fff!important}
.sidebar.menu-open{width:180px;box-shadow:8px 0 28px #0009}
.receipt{font-family:Inter,Arial,sans-serif}
@media(min-width:1440px){.main{padding-inline:24px}.dashboard-hero{grid-template-columns:minmax(0,1.75fr) minmax(260px,.9fr)}}
@media(max-width:1050px){.dashboard-lower{grid-template-columns:1fr 1fr}.chart-card:first-child{grid-column:1/-1}.dashboard-hero{grid-template-columns:minmax(0,1.4fr) minmax(210px,.9fr)}.product-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sidebar{width:62px;padding:15px 6px}.brand-mark{font-size:32px}.brand-name,.brand small{display:none}nav{margin-top:25px}.nav{justify-content:center;padding:9px 3px;font-size:0}.nav-icon{font-size:16px}.sidebar-bottom .outline,.sync,.user-info{display:none}.user-box{justify-content:center}.sidebar.menu-open{width:180px}.sidebar.menu-open .brand-name,.sidebar.menu-open .brand small{display:block}.sidebar.menu-open .nav{justify-content:flex-start;padding:8px;font-size:12px}.main{margin-left:62px;padding-inline:11px}.topbar{height:50px}.top-heading{gap:8px}.dashboard-hero{grid-template-columns:1fr}.hero-side{grid-template-columns:1fr 1fr}.metric-card{padding:10px}.dashboard-lower{grid-template-columns:1fr}.chart-card:first-child{grid-column:auto}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.today-label{display:none}.top-actions{gap:5px}.primary{padding:9px 10px;font-size:10px}.content-intro{align-items:start;flex-direction:column}.hero-side{grid-template-columns:1fr 1fr}.hero-total{font-size:36px}.hero-card{padding:14px}.chart{height:96px}.product-list{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.modal-card{padding:20px}.table-wrap{margin-inline:-1px}th,td{padding:9px 8px;font-size:10px}}

:root{--orange:#ff5817;--orange-soft:#32180f;--green:#33c99b}
body{background:#090909}
.notification-button{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid #2b2b2e;border-radius:15px;background:#151517;color:#b9b9bd}
.notification-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notification-button i{position:absolute;right:8px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.menu-backdrop{display:none}
.overview-metrics{gap:14px;margin:10px 0 20px}
.overview-metrics .metric-card{min-height:110px;padding:20px 24px}
.overview-metrics .metric-icon{width:58px;height:58px;border-radius:16px;font-size:24px}
.overview-metrics .label{font-size:12px;letter-spacing:.4px;color:#aaa}
.overview-metrics .metric{font-size:24px;margin-top:6px}
.overview-metrics .metric-note{background:#332610;border:1px solid #5b4514;border-radius:9px;padding:8px 11px;color:#f3c438;font-size:12px}
.inventory-cost-card .metric-left>div{min-width:0}
.inventory-cost-currency-control{display:grid;gap:5px;justify-items:end;color:#888;font-size:9px}
.inventory-cost-currency-control select{width:66px;padding:7px 8px;border-radius:9px;background:#101011;font-size:10px}
.featured-inventory{margin:24px 0;padding:22px}
.featured-inventory .section-title{margin:0 0 15px}
.featured-inventory .section-title h2{text-transform:uppercase;letter-spacing:1px}
.text-action{border:0;background:none;color:var(--orange);font-weight:700;padding:6px}
.featured-list{display:grid;gap:10px}
.featured-product{display:flex;align-items:center;gap:14px;min-width:0;border:1px solid #29292c;border-radius:18px;padding:14px 16px}
.featured-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:15px;background:#242427;color:#a2a2a7;font-size:27px}
.featured-info{display:grid;gap:4px;min-width:0;flex:1}
.featured-info b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.featured-info small{color:#88888e;font-size:11px}
.featured-product strong{white-space:nowrap;font-size:14px}
.inventory-add{border-radius:14px;padding:14px 18px;font-size:13px}
.inventory-table{border-radius:20px}
.inventory-table table{min-width:680px;font-size:13px}
.inventory-table th{font-size:11px;padding:16px}
.inventory-table td{padding:18px 16px;font-size:13px;white-space:normal}
.inventory-name{display:flex;align-items:center;gap:10px;font-weight:600;max-width:280px}
.inventory-thumb{width:48px;height:48px;display:grid;place-items:center;flex:none;overflow:hidden;border:1px solid #343438;border-radius:9px;background:#101011;color:#85858a;font-size:22px}
.inventory-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.inventory-product-info{display:grid;justify-items:start;gap:6px;min-width:0}
.inventory-product-info>span{display:block}
.inventory-cost-edit,.inventory-photo-edit{margin-top:0;white-space:nowrap;font-size:8px}
.product-photo-preview{display:block;width:min(100%,320px);max-height:320px;aspect-ratio:1;object-fit:contain;margin:0 auto;border:1px solid #343438;border-radius:12px;background:#101011}
.product-photo-empty{display:grid;place-items:center;width:min(100%,320px);aspect-ratio:1;margin:0 auto;border:1px dashed #454549;border-radius:12px;background:#101011;color:#85858a;font-size:48px}
.product-photo-empty[hidden],.product-photo-preview[hidden]{display:none}
#saveProductPhotoButton:disabled{opacity:.5;cursor:not-allowed}
.inventory-price{font-weight:700;color:#fff!important}
.stock-badge{display:inline-block;background:#102c24;color:#36d0a1;padding:6px 9px;border-radius:9px;font-weight:700}
.installment-list{display:grid;gap:16px}
.installment-card{padding:22px;border-radius:22px}
.installment-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}
.installment-heading h3{font-size:16px;margin:0 0 7px}
.installment-heading p{margin:0;color:#a1a1a5;font-size:14px}
.installment-heading .badge{font-size:11px;border-radius:9px;padding:8px 11px}
.installment-heading .badge.orange{background:#382b12;color:#f1c644}
.installment-totals{display:flex;justify-content:space-between;gap:10px;margin:22px 0 10px;color:#aaa;font-size:13px}
.installment-totals b{color:#fff;font-size:14px}
.installment-totals b.orange{color:var(--orange)}
.progress-track{height:9px;background:#29292c;border-radius:12px;overflow:hidden}
.progress-track span{display:block;height:100%;background:var(--orange);border-radius:inherit}
.installment-actions{display:flex;gap:10px;margin-top:20px}
.installment-pay{flex:1;border:1px solid #783618;background:#301b14;color:var(--orange);border-radius:15px;padding:13px;font-size:15px;font-weight:700}
.dashboard-quick-stats{margin-top:12px}
.sales-overview{margin:0 0 16px;padding:20px 22px;border-radius:22px;background:linear-gradient(145deg,#1c1b1b,#131313);border-color:#302d2b}
.sales-overview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sales-overview .label{font-size:11px;color:#aaa;letter-spacing:.7px}
.sales-overview-total{margin-top:8px;font-size:clamp(27px,5vw,38px);line-height:1.1;font-weight:800;letter-spacing:-1px}
.sales-overview-total small{font-size:11px;color:#999;letter-spacing:0}
.sales-currency-control{display:grid;gap:6px;color:#aaa;font-size:10px}
.sales-currency-control select{min-width:142px;padding:9px 11px;border-color:#3a2b22;border-radius:10px;background:#2b1b13;color:#f5a06e;font-size:11px;font-weight:700}
.sales-overview-chart{width:100%;margin-top:18px;overflow:hidden}
.sales-overview-chart svg{display:block;width:100%;height:auto;overflow:visible}
.sales-chart-gridline{stroke:#ffffff12;stroke-width:1}
.sales-chart-tick,.sales-chart-date{fill:#89898e;font-family:Inter,Arial,sans-serif;font-size:10px}
.sales-chart-date{text-anchor:middle}
.sales-chart-area{fill:url(#salesChartGradient)}
.sales-chart-line{fill:none;stroke:#ff7845;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sales-chart-point{fill:#ff7845;stroke:#1a1716;stroke-width:2;vector-effect:non-scaling-stroke}
.sales-chart-point.is-today{fill:#ffc092}
.login-screen{background:radial-gradient(ellipse at 50% 0,#33180f 0,transparent 44%),#090909}
.login-card{background:linear-gradient(145deg,#19191b,#111112);color:#f5f5f5;border:1px solid #2d2d30;border-radius:24px;padding:38px;box-shadow:0 28px 80px #0009}
.login-brand{margin-bottom:30px}
.login-brand .brand-mark{display:grid;place-items:center;width:70px;height:70px;padding:0;border:1px solid #783719;border-radius:22px;background:#32190f;color:var(--orange);font-size:34px;letter-spacing:-5px}
.login-brand .brand-name{font-size:16px;color:#fff;letter-spacing:1px}
.login-brand small{color:var(--orange);font-size:9px}
.login-card h1{font-size:26px;color:#fff;letter-spacing:-.5px}
.login-copy{color:#a1a1a5;line-height:1.5}
.login-card .form label{color:#ddd;font-size:11px}
.login-card .form input{background:#101011;border-color:#353538;color:#fff;padding:13px 14px;border-radius:10px}
.login-card .form input:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ff58171c}
.login-card .primary{background:var(--orange);border-radius:11px;padding:14px;width:100%;box-shadow:0 8px 24px #ff58172b}
.login-error{color:#ff9185}
.login-card .login-copy{font-size:13px}
.sale-actions{min-width:145px}
.sale-actions .delete-button{border-color:#452523;color:#ff8c82}
.receipt{max-height:55vh;overflow:auto}
.receipt .receipt-row b{overflow-wrap:anywhere;text-align:right}

@media(max-width:760px){
  .sidebar{width:min(78vw,280px);padding:28px 18px 18px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:none}
  .sidebar.menu-open{width:min(78vw,280px);transform:translateX(0);box-shadow:12px 0 36px #000b}
  .sidebar .brand-mark{font-size:40px}
  .sidebar .brand-name,.sidebar .brand small{display:block}
  .sidebar nav{margin-top:30px}
  .sidebar .nav{justify-content:flex-start;padding:12px 10px;font-size:14px}
  .sidebar-bottom .outline,.sidebar-bottom .sync,.sidebar .user-info{display:block}
  .sidebar .user-box{justify-content:flex-start}
  .menu-backdrop.visible{display:block;position:fixed;inset:0;z-index:11;border:0;background:#0009}
  .main{margin-left:0;padding:0 16px 32px}
  .topbar{position:sticky;top:0;z-index:10;height:calc(72px + env(safe-area-inset-top));margin:0 -16px;padding:env(safe-area-inset-top) 20px 0;background:#0a0a0af2;border-bottom:1px solid #242426;backdrop-filter:blur(14px)}
  .top-heading{gap:17px}
  .menu-toggle{width:30px;height:36px;padding:0;border:0;border-radius:0;background:transparent;font-size:0}
  .menu-toggle:before{content:"";display:block;width:20px;height:2px;background:#aaa;box-shadow:0 6px #aaa,0 -6px #aaa}
  .top-heading h1{font-size:17px;font-weight:700}
  .eyebrow,.today-label,#newSaleBtn{display:none}
  .notification-button{width:48px;height:48px;border-radius:16px}
  #content{padding-top:16px}
  .content-intro{margin:22px 0 18px;align-items:flex-start}
  .content-intro h2{font-size:24px;letter-spacing:-.5px}
  .content-intro p{font-size:14px;margin-top:5px}
  .sales-overview{padding:20px 18px;margin-bottom:16px}
  .sales-overview-chart{margin-top:20px}
  .sales-overview-chart svg{height:145px}
  .sales-chart-tick,.sales-chart-date{font-size:22px}
  .overview-metrics{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .overview-metrics .metric-card{min-height:104px;padding:18px 20px;border-radius:22px}
  .overview-metrics .metric-icon{width:58px;height:58px}
  .overview-metrics .label{font-size:12px}
  .overview-metrics .metric{font-size:24px}
  .featured-inventory{margin:24px 0;padding:20px 16px;border-radius:24px}
  .featured-inventory .section-title h2{font-size:15px}
  .featured-product{padding:12px;border-radius:19px;gap:11px}
  .featured-info b{font-size:13px}
  .featured-product strong{font-size:12px}
  .inventory-add{font-size:14px;padding:14px 18px}
  .inventory-table{margin-inline:0}
  .inventory-table table{min-width:690px}
  .installment-list{gap:16px}
  .installment-card{padding:22px 20px;border-radius:24px}
  .installment-heading h3{font-size:16px}
  .installment-heading p{font-size:14px;max-width:230px;line-height:1.4}
  .installment-totals{font-size:13px}
  .installment-pay{padding:13px 10px}
  .dashboard-lower{margin-top:20px}
  .dashboard-quick-stats{margin-top:14px}
}
@media(max-width:480px){
  .content-intro{flex-direction:column}
  .inventory-add{width:max-content}
  .installment-heading p{max-width:190px}
  .modal-card{border-radius:20px}
  .login-card{padding:28px 22px}
}