:root{
  --bg:#f7f4ee;
  --bg-alt:#f2eee7;
  --surface:#ffffff;
  --surface-soft:#fcfaf6;
  --surface-ink:#fffefb;
  --text:#1f1a17;
  --muted:#766b61;
  --muted-2:#9a8f84;
  --line:#e6ddd2;
  --line-strong:#d9cebf;
  --shadow-sm:0 10px 24px rgba(47, 33, 18, .05);
  --shadow-md:0 22px 50px rgba(47, 33, 18, .08);
  --shadow-lg:0 30px 72px rgba(47, 33, 18, .14);
  --accent:#b88a4b;
  --accent-2:#8f6834;
  --accent-soft:#f7ead7;
  --accent-soft-2:#fff4e6;
  --success:#2f7f57;
  --success-soft:#ebf8f0;
  --warning:#ba7a18;
  --warning-soft:#fff6e5;
  --danger:#b24a3d;
  --danger-soft:#fdeeea;
  --info:#34516f;
  --info-soft:#eef4fb;
  --sidebar:#171311;
  --sidebar-soft:#221b17;
  --sidebar-line:rgba(255,255,255,.09);
  --sidebar-text:#f5f1ea;
  --sidebar-muted:rgba(245,241,234,.66);
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --radius-xl:34px;
  --sidebar-width:288px;
  --content-width:1480px;
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font:14px/1.45 "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(184,138,75,.12), transparent 24%),
    radial-gradient(circle at bottom left, rgba(184,138,75,.08), transparent 22%),
    linear-gradient(180deg, #fbf8f3 0%, var(--bg) 100%);
}

body.auth-body{background:
  radial-gradient(circle at 15% 15%, rgba(184,138,75,.14), transparent 20%),
  radial-gradient(circle at 85% 10%, rgba(143,104,52,.12), transparent 18%),
  linear-gradient(180deg, #faf7f1 0%, #f3eee6 100%);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
::selection{background:rgba(184,138,75,.22)}

.app-layout{display:flex;min-height:100vh;position:relative}
.app-overlay{
  position:fixed; inset:0; background:rgba(18,14,12,.28); opacity:0; visibility:hidden; transition:.22s ease;
  z-index:34;
}
.app-main{flex:1; min-width:0; margin-left:var(--sidebar-width)}
.app-sidebar{
  position:fixed; left:0; top:0; bottom:0; z-index:40; width:var(--sidebar-width);
  display:flex; flex-direction:column; padding:22px 18px 18px;
  color:var(--sidebar-text);
  background:
    radial-gradient(circle at top right, rgba(184,138,75,.18), transparent 22%),
    linear-gradient(180deg, #1a1512 0%, #15110f 100%);
  border-right:1px solid var(--sidebar-line);
  box-shadow:18px 0 42px rgba(10,8,7,.12);
}
.sidebar-brand{display:flex; align-items:center; gap:14px; padding:8px 6px 18px; border-bottom:1px solid var(--sidebar-line)}
.sidebar-brand__mark{
  width:50px; height:50px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(145deg, #caa163 0%, #90642b 100%); color:#fff; font-weight:900; letter-spacing:.08em;
  box-shadow:0 12px 28px rgba(184,138,75,.26);
}
.sidebar-brand__name{font-size:16px; font-weight:800; letter-spacing:.01em}
.sidebar-brand__tag{margin-top:4px; font-size:12px; color:var(--sidebar-muted)}
.sidebar-scroll{padding-top:18px; overflow:auto; scrollbar-width:thin}
.sidebar-section{margin-bottom:18px}
.sidebar-section__label{
  padding:0 10px 8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--sidebar-muted)
}
.sidebar-link{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:16px;
  color:var(--sidebar-muted); transition:.18s ease; font-weight:700;
  border:1px solid transparent;
}
.sidebar-link:hover{background:rgba(255,255,255,.05); color:#fff; transform:translateX(2px)}
.sidebar-link.is-active{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color:rgba(202,161,99,.26); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)
}
.sidebar-link__icon{
  width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px;
}
.sidebar-link__icon svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.sidebar-link__meta{display:flex; flex-direction:column; gap:2px; min-width:0}
.sidebar-link__meta span:last-child{font-size:11px; font-weight:600; color:inherit; opacity:.7}
.sidebar-foot{margin-top:auto; padding-top:18px; border-top:1px solid var(--sidebar-line); display:grid; gap:12px}
.sidebar-user{
  padding:14px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)
}
.sidebar-user__name{font-weight:800}
.sidebar-user__meta{margin-top:4px; font-size:12px; color:var(--sidebar-muted)}
.sidebar-note{
  padding:12px 14px; border-radius:16px; background:rgba(202,161,99,.12); border:1px solid rgba(202,161,99,.2);
  color:#f6ead9; font-size:12px; line-height:1.55
}

.app-topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:18px; justify-content:space-between;
  padding:18px 30px; background:rgba(250,247,241,.82); backdrop-filter:blur(14px); border-bottom:1px solid rgba(217,206,191,.72)
}
.icon-btn{
  width:42px; height:42px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.82);
  display:none; align-items:center; justify-content:center; color:var(--text); box-shadow:var(--shadow-sm)
}
.icon-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.topbar-main{display:flex; align-items:center; gap:16px; min-width:0}
.topbar-heading{min-width:0}
.topbar-heading .eyebrow{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--muted-2)}
.topbar-heading .title{margin-top:4px; font-size:22px; font-weight:850; letter-spacing:-.02em}
.topbar-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.app-content{padding:28px 30px 36px; max-width:calc(var(--content-width) + 60px)}
.page-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:0 0 22px; padding:24px 28px;
  border-radius:28px; background:
    linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(252,250,246,.98) 100%);
  border:1px solid rgba(217,206,191,.9); box-shadow:var(--shadow-sm)
}
.page-head__eyebrow{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--muted-2)}
.page-head h1{margin:10px 0 8px; font-size:34px; line-height:1.05; letter-spacing:-.04em}
.page-head p{margin:0; max-width:820px; color:var(--muted); font-size:15px; line-height:1.7}
.page-head__meta{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.page-grid{display:grid; gap:22px}
.grid-2{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.9fr); gap:22px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.grid-dashboard{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(360px,.95fr); gap:22px}
.sales-workspace{display:grid; grid-template-columns:minmax(0,1.72fr) minmax(340px,.92fr); gap:22px; align-items:start}
.sales-side{position:sticky; top:108px}

.card{
  position:relative; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(254,252,249,.98));
  border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow-sm); overflow:hidden
}
.card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg, rgba(184,138,75,.7), rgba(184,138,75,0)); opacity:.35
}
.card-h{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:24px 26px 18px;
  border-bottom:1px solid rgba(230,221,210,.7); background:linear-gradient(180deg, rgba(255,251,245,.94), rgba(255,255,255,.65))
}
.card-b{padding:22px 26px 26px}
.card-h .t{font-size:22px; font-weight:850; letter-spacing:-.02em}
.card-h .s{margin-top:6px; max-width:860px; color:var(--muted); line-height:1.65}
.section-title{font-size:12px; color:var(--muted-2); font-weight:800; text-transform:uppercase; letter-spacing:.16em; margin-bottom:10px}

.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.kpi{
  padding:18px; border-radius:22px; border:1px solid rgba(217,206,191,.9);
  background:linear-gradient(180deg, #fffdfa 0%, #fff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)
}
.kpi.highlight{
  background:linear-gradient(135deg, rgba(247,234,215,.92), rgba(255,255,255,.98)); border-color:rgba(184,138,75,.25)
}
.kpi .k{font-size:11px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.16em; font-weight:800}
.kpi .v{margin-top:10px; font-size:30px; font-weight:860; line-height:1.05; letter-spacing:-.03em}
.kpi .h{margin-top:10px; font-size:12px; color:var(--muted); line-height:1.6}
.stats-inline{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.metric-box{
  padding:16px 18px; border-radius:20px; border:1px solid rgba(217,206,191,.9);
  background:linear-gradient(180deg, var(--surface-soft), var(--surface));
}
.metric-box .label{font-size:11px; color:var(--muted-2); font-weight:800; text-transform:uppercase; letter-spacing:.16em}
.metric-box .value{margin-top:8px; font-size:24px; font-weight:850; letter-spacing:-.03em}

.summary-box{border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg, #fffaf2, #ffffff); padding:20px 22px}
.summary-box h3{margin:0 0 12px; font-size:16px; font-weight:800}
.summary-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.summary-item{padding:14px 16px; border-radius:18px; background:#fff; border:1px solid rgba(230,221,210,.95)}
.summary-item .label{font-size:11px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.16em; font-weight:800}
.summary-item .value{margin-top:8px; font-size:24px; font-weight:850; line-height:1.1; letter-spacing:-.03em}

.list-stack{display:grid; gap:12px}
.list-card{
  padding:16px 18px; border-radius:20px; border:1px solid rgba(230,221,210,.95); background:linear-gradient(180deg, #fffefb, #fff9f2)
}
.list-card .title{font-size:15px; font-weight:800}
.list-card .meta{margin-top:6px; font-size:12px; color:var(--muted); line-height:1.55}
.list-card .value{margin-top:8px; font-size:18px; font-weight:850; letter-spacing:-.02em}
.price-preview{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.price-card{padding:18px; border-radius:22px; border:1px solid rgba(230,221,210,.95); background:linear-gradient(180deg, #fffefb, #fff6ea)}
.price-card .label{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted-2); font-weight:800}
.price-card .value{margin-top:9px; font-size:24px; font-weight:850; letter-spacing:-.03em}
.price-card .helper{margin-top:7px; font-size:12px; color:var(--muted)}

.toolbar{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; padding:18px; border-radius:22px; background:linear-gradient(180deg, #fcfaf6, #fff); border:1px solid rgba(230,221,210,.95)}
.toolbar .toolbar-actions{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.form-grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.form-span{grid-column:1/-1}
label{display:block; margin-bottom:7px; font-size:11px; font-weight:800; color:var(--muted-2); letter-spacing:.16em; text-transform:uppercase}
.input, select, textarea{
  width:100%; min-height:50px; padding:12px 14px; border-radius:16px; border:1px solid var(--line-strong);
  background:#fff; color:var(--text); outline:none; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease
}
.input:hover, select:hover, textarea:hover{border-color:#cbb9a2}
.input:focus, select:focus, textarea:focus{
  border-color:rgba(184,138,75,.72); box-shadow:0 0 0 4px rgba(184,138,75,.12); transform:translateY(-1px)
}
textarea{min-height:118px; resize:vertical}
input[type="checkbox"]{accent-color:var(--accent)}
.help{margin-top:7px; font-size:12px; color:var(--muted); line-height:1.55}
.readonly-box{min-height:50px; display:flex; align-items:center; padding:12px 14px; border-radius:16px; border:1px solid var(--line); background:var(--surface-soft); font-weight:700}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 16px;
  border:none; border-radius:15px; background:linear-gradient(180deg, #fffdfa, #f8f3ec);
  color:var(--text); font-weight:800; box-shadow:inset 0 0 0 1px rgba(184,138,75,.14), 0 8px 18px rgba(47,33,18,.04); transition:.18s ease
}
.btn:hover{transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(184,138,75,.18), 0 12px 24px rgba(47,33,18,.08)}
.btn-primary{background:linear-gradient(135deg, #c39a5d, #94672d); color:#fff; box-shadow:0 14px 28px rgba(184,138,75,.24)}
.btn-primary:hover{box-shadow:0 18px 30px rgba(184,138,75,.28)}
.btn-green{background:linear-gradient(135deg, #3f9466, #2f7f57); color:#fff; box-shadow:0 14px 28px rgba(47,127,87,.22)}
.btn-danger{background:linear-gradient(135deg, #cc685b, #b24a3d); color:#fff; box-shadow:0 14px 28px rgba(178,74,61,.18)}
.btn-ghost{background:rgba(255,255,255,.68); box-shadow:inset 0 0 0 1px rgba(31,26,23,.08)}
.btn-sm{min-height:36px; padding:7px 11px; border-radius:12px; font-size:12px}
.btn:disabled{opacity:.58; cursor:not-allowed; transform:none; box-shadow:none}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.spacer{flex:1}
.inline-note{font-size:12px; color:var(--muted); line-height:1.6}
.small{font-size:12px; color:var(--muted)}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.text-right{text-align:right}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.hr{height:1px; background:linear-gradient(90deg, rgba(230,221,210,.12), rgba(230,221,210,.9), rgba(230,221,210,.12)); margin:18px 0}

.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.78); border:1px solid rgba(217,206,191,.88); font-size:12px; font-weight:700; color:var(--muted)
}
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800;
  letter-spacing:.03em; border:1px solid transparent
}
.badge.ok{background:var(--success-soft); color:var(--success); border-color:#cfe8d8}
.badge.warn{background:var(--warning-soft); color:var(--warning); border-color:#efd7a8}
.badge.err{background:var(--danger-soft); color:var(--danger); border-color:#efc9c3}
.badge.primary{background:var(--accent-soft); color:var(--accent-2); border-color:#edd6ae}

.toast{
  position:relative; margin:0 0 14px; padding:15px 44px 15px 16px; border-radius:18px; font-weight:700;
  border:1px solid rgba(230,221,210,.95); box-shadow:var(--shadow-sm); background:#fff
}
.toast.ok{background:var(--success-soft); border-color:#cfe8d8}
.toast.err{background:var(--danger-soft); border-color:#efc9c3}
.toast.warn{background:var(--warning-soft); border-color:#efd7a8}
.toast::after{content:""; position:absolute; right:16px; top:16px; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,.18)}

.table-wrap{
  overflow:auto; border:1px solid rgba(230,221,210,.95); border-radius:24px; background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)
}
table{width:100%; border-collapse:separate; border-spacing:0; min-width:880px}
th,td{padding:14px 14px; border-bottom:1px solid rgba(230,221,210,.8); text-align:left; vertical-align:top; font-size:13px}
th{
  position:sticky; top:0; z-index:1; background:linear-gradient(180deg, #fbf7f1, #f7f1e8); color:#5f5449;
  font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:800
}
tbody tr{transition:background .16s ease}
tbody tr:hover td{background:#fffaf2}
tr:last-child td{border-bottom:none}
td.num{text-align:right; font-variant-numeric:tabular-nums}
.cart-table td,.cart-table th{white-space:nowrap}
.cart-product-meta{margin-top:8px; font-size:12px; color:var(--muted); line-height:1.55; white-space:normal}
.stock-pill{margin-top:7px; display:inline-flex}
.empty-state{padding:30px 20px; text-align:center; color:var(--muted); line-height:1.7}
.pagination{display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:16px}
.pagination a,.pagination span{
  min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px;
  border-radius:14px; border:1px solid rgba(230,221,210,.95); background:#fff; font-size:13px; font-weight:800; box-shadow:var(--shadow-sm)
}
.pagination .current{background:linear-gradient(180deg, var(--accent-soft), #fff8ef); border-color:#e6c894; color:var(--accent-2)}

.auth-frame{min-height:100vh; display:flex; flex-direction:column}
.auth-brandbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 28px}
.auth-brand{display:flex; align-items:center; gap:14px}
.auth-brand .mark{width:50px; height:50px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(145deg, #caa163 0%, #90642b 100%); color:#fff; font-weight:900; letter-spacing:.08em; box-shadow:0 12px 28px rgba(184,138,75,.24)}
.auth-brand .name{font-size:16px; font-weight:850}
.auth-brand .tag{margin-top:4px; font-size:12px; color:var(--muted)}
.auth-main{flex:1; display:grid; place-items:center; padding:20px 28px 36px}
.login-shell{width:min(1260px, calc(100vw - 56px))}
.login{
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr); border-radius:36px; overflow:hidden;
  border:1px solid rgba(217,206,191,.92); box-shadow:var(--shadow-lg); background:rgba(255,255,255,.9)
}
.login__hero{
  position:relative; padding:48px 48px 44px; color:#fff; background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.13), transparent 18%),
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(145deg, #ba8b46 0%, #8a612f 54%, #2d251f 100%)
}
.login__hero::after{content:""; position:absolute; inset:24px; border-radius:28px; border:1px solid rgba(255,255,255,.10); pointer-events:none}
.login__badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.14em}
.login__hero h1{margin:18px 0 0; font-size:44px; line-height:1.02; letter-spacing:-.05em; max-width:620px}
.login__hero p{margin:16px 0 0; max-width:560px; color:rgba(255,255,255,.84); font-size:15px; line-height:1.8}
.login-points{margin-top:28px; display:grid; gap:12px}
.login__point{padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(2px)}
.login__stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:28px}
.login__stat{padding:14px 16px; border-radius:18px; background:rgba(17,12,8,.18); border:1px solid rgba(255,255,255,.12)}
.login__stat strong{display:block; font-size:24px; letter-spacing:-.03em}
.login__stat span{display:block; margin-top:6px; font-size:12px; color:rgba(255,255,255,.74)}
.login__card{padding:40px 34px; background:linear-gradient(180deg, #fff 0%, #fbf8f2 100%)}
.login__card h2{margin:12px 0 8px; font-size:28px; line-height:1.1; letter-spacing:-.03em}
.login__card .muted{margin:0 0 22px; color:var(--muted); line-height:1.65}
.login__card form{display:grid; gap:14px}
.login__safe{display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:#f6efe3; color:var(--accent-2); font-size:12px; font-weight:800}
.login__hint{margin-top:16px; padding:14px 16px; border-radius:16px; background:#f8f4ed; border:1px solid var(--line)}

.finder-results{display:grid; gap:8px; margin-top:14px; max-height:320px; overflow:auto}
.finder-item{
  width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px;
  border:1px solid rgba(230,221,210,.95); background:linear-gradient(180deg, #fffefb, #fff8ef); color:var(--text); font-weight:700
}
.finder-item:hover{border-color:#dcc8ad; background:#fff5e8}
.finder-item__code{display:inline-flex; padding:5px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-2); font-size:11px; font-weight:800}
.finder-item__meta{display:flex; flex-direction:column; gap:4px; min-width:0}
.finder-item__meta strong{font-size:13px}
.finder-item__meta span{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.finder-empty{padding:16px; border-radius:16px; background:#faf7f1; border:1px dashed var(--line-strong); color:var(--muted); text-align:center}

.screen-loader{
  position:fixed; inset:0; background:rgba(18,14,12,.28); backdrop-filter:blur(4px); display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:.18s ease; z-index:70
}
.loader-card{padding:18px 20px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:14px; font-weight:800}
.loader-ring{width:22px; height:22px; border-radius:50%; border:2px solid rgba(184,138,75,.22); border-top-color:var(--accent); animation:spin .8s linear infinite}
body.is-loading .screen-loader{opacity:1; visibility:visible}
@keyframes spin{to{transform:rotate(360deg)}}

.print-hide{}
@media (max-width:1280px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats-inline,.price-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-dashboard,.grid-2,.sales-workspace{grid-template-columns:1fr}
  .sales-side{position:static}
}
@media (max-width:1080px){
  .app-main{margin-left:0}
  .app-sidebar{transform:translateX(-100%); transition:transform .22s ease}
  .app-sidebar.is-open{transform:translateX(0)}
  .app-overlay.is-open{opacity:1; visibility:visible}
  .icon-btn{display:inline-flex}
  .app-content{padding:22px 18px 28px}
  .app-topbar{padding:16px 18px}
  .page-head{padding:20px 20px 18px; flex-direction:column}
  .page-head h1{font-size:30px}
}
@media (max-width:860px){
  .toolbar,.form-grid,.form-grid-3,.summary-grid,.stats-inline,.price-preview,.kpis{grid-template-columns:1fr}
  .login{grid-template-columns:1fr}
  .login__hero{padding:36px 28px}
  .login__hero h1{font-size:36px}
  .login__stats{grid-template-columns:1fr}
  .login__card{padding:30px 24px}
  .page-head__meta,.topbar-actions{justify-content:flex-start}
  .topbar-heading .title{font-size:18px}
}
@media (max-width:640px){
  .auth-brandbar{padding:18px}
  .auth-main{padding:6px 16px 24px}
  .login-shell{width:min(100%, calc(100vw - 32px))}
  .card-h,.card-b{padding-left:18px; padding-right:18px}
  th,td{padding:12px 10px}
}
@media print{
  body{background:#fff}
  .app-sidebar,.app-topbar,.page-head,.print-hide,.screen-loader,.toast{display:none !important}
  .app-main{margin-left:0}
  .app-content{padding:0; max-width:none}
  .card{box-shadow:none; border:1px solid #ccc}
  .table-wrap{box-shadow:none}
}

.manual-price-grid .price-card{display:flex;flex-direction:column;gap:10px}
.manual-price-grid .price-card .input{margin:0}
.manual-price-grid .price-card .value{font-size:1.15rem}
#quickProductFilter{min-width:280px}