:root{
  --bg:#f5f7fb;--panel:#fff;--ink:#172033;--muted:#778096;--line:#e4e8f1;
  --blue:#3153c6;--blue2:#4267da;--blue-soft:#eef2ff;--green:#1f9d6a;--red:#c45364;
  --orange:#d9822b;--sidebar:#111a32;--sidebar2:#17223f;--topbar:66px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app-shell{min-height:100vh}.sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:236px;padding:14px;background:linear-gradient(180deg,var(--sidebar),#0d1529);color:#fff;display:flex;flex-direction:column;gap:10px}
.brand{height:54px;display:flex;align-items:center;gap:11px;padding:7px}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#465fd2,#7a5be8);display:grid;place-items:center;font-weight:900}.brand strong,.brand span{display:block}.brand strong{font-size:17px;letter-spacing:.08em}.brand span{font-size:9px;color:#99a6d0;letter-spacing:.22em}
.branch-card{display:flex;gap:10px;align-items:center;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.045)}.branch-card small,.branch-card strong{display:block}.branch-card small{font-size:9px;color:#9aa6c8}.branch-card strong{font-size:11px;margin-top:2px}
.nav-kicker{margin:11px 8px 5px;color:#6f7a9e;font-size:8px;font-weight:800;letter-spacing:.14em}.nav{display:grid;gap:3px;overflow-y:auto}.nav button{min-height:39px;padding:0 11px;border:0;border-radius:9px;background:transparent;color:#aeb8d6;display:flex;align-items:center;gap:10px;text-align:left;font-size:11px;font-weight:700}.nav button:hover,.nav button.active{background:#27365f;color:#fff}.nav .ico{width:20px;text-align:center;font-size:15px}
.sidebar-footer{margin-top:auto}.sync-card{padding:10px 11px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.04);font-size:9px;color:#aeb8d6}.sync-card strong{display:block;color:#fff;font-size:10px;margin-bottom:2px}.profile-chip{margin-top:7px;width:100%;padding:8px;border:0;border-radius:10px;background:transparent;color:#fff;display:flex;align-items:center;gap:9px}.profile-chip:hover{background:rgba(255,255,255,.05)}.avatar{width:32px;height:32px;border-radius:10px;background:#3851ae;display:grid;place-items:center;font-size:10px;font-weight:900}.profile-chip strong,.profile-chip small{display:block;text-align:left}.profile-chip strong{font-size:10px}.profile-chip small{font-size:8px;color:#9ba7c8}
.workspace{margin-left:236px;min-height:100vh}.topbar{position:sticky;z-index:30;top:0;height:var(--topbar);padding:0 20px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}.page-title strong,.page-title small{display:block}.page-title strong{font-size:14px}.page-title small{margin-top:3px;font-size:9px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:8px}.chip,.icon-btn,.outline-btn,.primary-btn,.danger-btn{border:1px solid var(--line);background:#fff;color:#59657a;border-radius:9px;font-weight:750}.chip{height:34px;padding:0 11px;display:flex;align-items:center;gap:7px;font-size:9px}.chip.live{color:#18764e;background:#f1fbf6;border-color:#d0efe0}.icon-btn{width:34px;height:34px;display:grid;place-items:center}.primary-btn{min-height:36px;padding:0 13px;background:linear-gradient(125deg,#2945af,#3c5ed1);border-color:transparent;color:#fff}.outline-btn{min-height:36px;padding:0 13px}.danger-btn{min-height:36px;padding:0 13px;color:#b83f50;background:#fff7f8;border-color:#efccd2}
.content{padding:20px}.view-header{padding:20px 22px;border:1px solid var(--line);background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:14px}.view-header .eyebrow{color:var(--blue);font-size:9px;font-weight:850;letter-spacing:.11em}.view-header h1{margin:4px 0 3px;font-size:24px}.view-header p{margin:0;color:var(--muted);font-size:10px}.view-actions{display:flex;gap:8px;flex-wrap:wrap}
.panel{margin-top:14px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 8px 30px rgba(28,42,82,.05)}.panel-head{min-height:56px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:14px}.panel-head span{display:block;margin-top:3px;color:var(--muted);font-size:9px}
.stats-grid,.mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}.stat-card,.mini-stats article{min-height:94px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff}.stat-card span,.stat-card strong,.mini-stats span,.mini-stats strong{display:block}.stat-card span,.mini-stats span{font-size:9px;color:var(--muted)}.stat-card strong,.mini-stats strong{margin-top:7px;font-size:19px;color:#23304d}
.badge{display:inline-flex!important;width:max-content;margin-top:8px!important;padding:4px 7px;border-radius:999px;background:#f2f4f8;color:#657085;font-size:8px!important;font-weight:800}.badge.green{background:#eaf8f1;color:#18764e}.badge.orange{background:#fff2e6;color:#b4671c}.badge.blue{background:#edf2ff;color:#3854b7}
.billing-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:calc(100vh - var(--topbar));margin:-20px}.catalog-panel{padding:20px;min-width:0}.billing-banner{min-height:122px;padding:20px;border-radius:16px;background:linear-gradient(135deg,#253da6,#5069d6 58%,#6f5bd7);color:#fff;display:flex;justify-content:space-between;gap:18px}.billing-banner h1{margin:6px 0 4px;font-size:24px}.billing-banner p{margin:0;color:#dce2ff;font-size:10px}.eyebrow-light{font-size:8px;font-weight:850;letter-spacing:.12em}.invoice-pill{min-width:120px;height:max-content;padding:10px 13px;border-radius:10px;background:rgba(255,255,255,.13)}.invoice-pill span,.invoice-pill strong{display:block}.invoice-pill span{font-size:8px;color:#dce2ff}.invoice-pill strong{margin-top:3px;font-size:12px}
.scanner-row{margin-top:12px;display:grid;grid-template-columns:1fr 100px;gap:8px}.scanner-input{height:46px;padding:0 12px;border:1.5px solid #cfd7ed;border-radius:11px;background:#fff;display:flex;align-items:center;gap:8px}.scanner-input input{min-width:0;flex:1;border:0;outline:0;font-size:12px}.scan-button{border:0;border-radius:11px;background:#fff;border:1px solid var(--line);color:#4255a8;font-weight:800;font-size:10px}
.category-row{display:flex;gap:7px;overflow:auto;padding:12px 0}.category-row button{white-space:nowrap;min-height:31px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#687187;font-size:9px;font-weight:750}.category-row button.active{background:var(--blue-soft);color:var(--blue);border-color:#cdd7fb}
.catalog-heading{display:flex;justify-content:space-between;align-items:center;margin:2px 0 9px}.catalog-heading h2{margin:0;font-size:14px}.catalog-heading small{color:var(--muted);font-size:9px}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}.product-card{position:relative;min-height:78px;padding:12px 34px 12px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.product-card:hover{border-color:#b9c5ee;box-shadow:0 6px 18px rgba(45,66,130,.08)}.product-card strong,.product-card small{display:block}.product-card strong{font-size:11px}.product-card small{margin-top:4px;color:var(--muted);font-size:8px}.product-price{text-align:right}.product-price b{display:block;font-size:12px}.product-price s{font-size:8px;color:#9ba1ae}.add-dot{position:absolute;right:8px;bottom:8px;width:21px;height:21px;border-radius:99px;background:#edf1ff;color:var(--blue);display:grid;place-items:center;font-weight:900}
.cart-panel{position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));padding:18px 16px 12px;border-left:1px solid var(--line);background:#fff;overflow:hidden;display:flex;flex-direction:column}.cart-head{display:flex;justify-content:space-between;align-items:center}.cart-head h2{margin:0;font-size:14px}.cart-head small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.bill-search{margin-top:10px;position:relative}.bill-search input{width:100%;height:42px;padding:0 11px;border:1.5px solid #cfd7ed;border-radius:10px;outline:0;font-size:11px}.search-results{position:absolute;z-index:8;left:0;right:0;top:47px;max-height:220px;overflow:auto;padding:5px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 16px 35px rgba(30,42,80,.14)}.search-results button{width:100%;padding:8px;border:0;border-radius:7px;background:transparent;text-align:left;display:flex;justify-content:space-between}.search-results button:hover{background:#f4f6fb}.search-results strong,.search-results small{display:block}.search-results strong{font-size:10px}.search-results small{font-size:8px;color:var(--muted)}
.customer-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:9px 0}.customer-row input{width:100%;height:36px;padding:0 9px;border:1px solid var(--line);border-radius:8px;font-size:10px}.cart-items{flex:1;min-height:150px;overflow:auto;border-top:1px solid #eef0f4;border-bottom:1px solid #eef0f4}.cart-empty{min-height:150px;display:grid;place-items:center;text-align:center;color:#9ca3b3;font-size:10px}.cart-item{padding:9px 0;border-bottom:1px dashed #e0e4eb;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.cart-item strong,.cart-item small{display:block}.cart-item strong{font-size:10px}.cart-item small{margin-top:3px;color:var(--muted);font-size:8px}.qty{display:flex;align-items:center;gap:5px;margin-top:6px}.qty button{width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:#fff}.qty b{min-width:22px;text-align:center;font-size:9px}.cart-line{text-align:right}.cart-line b{font-size:10px}.cart-line button{display:block;margin:8px 0 0 auto;border:0;background:transparent;color:#b1b5bf}
.totals{padding:8px 0}.totals>div{min-height:25px;display:grid;grid-template-columns:1fr auto;align-items:center;color:#768096;font-size:9px}.totals strong{color:#3c475e}.discount-row{grid-template-columns:1fr auto auto!important;gap:8px}.discount-input{height:29px;padding:0 7px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;gap:3px}.discount-input input{width:58px;border:0;outline:0;text-align:right;font-size:9px}.discount-row>strong{color:var(--red)}.savings-row strong{color:var(--green)}.grand-total{margin-top:5px;padding-top:8px;border-top:1px solid var(--line);align-items:end!important}.grand-total span{font-size:11px;font-weight:800;color:#303a4f}.grand-total span small{display:block;margin-top:2px;color:#9aa0ad;font-size:7px;font-weight:500}.grand-total strong{font-size:18px!important;color:#142044!important}.checkout{width:100%;min-height:46px;border:0;border-radius:10px;background:linear-gradient(125deg,#2945af,#3c5ed1);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-weight:800}.cart-actions{display:flex;gap:7px;margin:4px 0 7px}.cart-actions button{flex:1}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:10px 12px;border-bottom:1px solid #edf0f5;text-align:left;font-size:10px;vertical-align:middle}.data-table th{background:#f8f9fc;color:#7f889b;font-size:8px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0}.data-table td strong{font-size:10px}.data-table td small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.right{text-align:right!important}.nowrap{white-space:nowrap}
.toolbar{margin-top:14px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar input,.toolbar select{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:10px}.toolbar .grow{flex:1;min-width:180px}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px}.feature-btn{min-height:92px;padding:13px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:left;display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center}.feature-btn:hover{border-color:#bbc7ed}.feature-icon{width:38px;height:38px;border-radius:11px;background:#eef2ff;color:#3a57b8;display:grid;place-items:center;font-size:18px}.feature-btn strong,.feature-btn small{display:block}.feature-btn strong{font-size:10px}.feature-btn small{margin-top:4px;color:var(--muted);font-size:8px;line-height:1.4}.feature-btn em{font-style:normal;font-size:7px;padding:4px 6px;border-radius:99px;background:#edf7f2;color:#1b7c53}
.command-bar{margin-top:12px;padding:5px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;gap:4px;overflow:auto}.command-bar button{min-height:32px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#69738a;font-size:9px;font-weight:800;white-space:nowrap}.command-bar button.active{background:#edf1ff;color:var(--blue)}
.modal-layer{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(14,22,45,.48);backdrop-filter:blur(2px)}.modal{position:relative;z-index:1;width:min(650px,95vw);max-height:90vh;overflow:auto;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 28px 80px rgba(17,27,55,.28)}.modal.wide{width:min(900px,96vw)}.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding-bottom:13px;border-bottom:1px solid var(--line)}.modal-head h2{margin:4px 0;font-size:18px}.modal-head p{margin:0;color:var(--muted);font-size:9px}.modal-head .eyebrow{font-size:8px;color:var(--blue);font-weight:850;letter-spacing:.11em}.modal-close{width:33px;height:33px;border:1px solid var(--line);border-radius:8px;background:#fff}.form{display:grid;gap:10px;padding-top:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-row.three{grid-template-columns:repeat(3,1fr)}.field{display:grid;gap:5px}.field>span{font-size:9px;font-weight:750;color:#5c6679}.field input,.field select,.field textarea{width:100%;min-height:40px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;outline:0;background:#fff;color:var(--ink);font-size:10px}.field textarea{min-height:72px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#8193d5;box-shadow:0 0 0 3px rgba(49,83,198,.07)}.form-note{padding:9px 10px;border-radius:8px;background:#f7f8fc;color:#6c7689;font-size:9px}.form-error{padding:9px 10px;border-radius:8px;background:#fff2f3;color:#b43c4c;font-size:9px}
.payment-total{margin:14px 0;padding:14px;border-radius:12px;background:#f5f7ff}.payment-total span,.payment-total strong,.payment-total small{display:block}.payment-total span{font-size:9px;color:var(--muted)}.payment-total strong{margin-top:4px;font-size:22px}.payment-total small{margin-top:4px;color:var(--green);font-size:8px}.payment-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.payment-modes button{min-height:70px;border:1px solid var(--line);border-radius:10px;background:#fff}.payment-modes button.active{background:#edf1ff;border-color:#abbbed;color:#2948aa}.payment-modes strong,.payment-modes small{display:block}.payment-modes strong{font-size:10px}.payment-modes small{margin-top:3px;font-size:8px;color:var(--muted)}.cash-box{margin-top:11px;padding:12px;border:1px solid var(--line);border-radius:10px}.cash-box input{width:100%;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:8px}.cash-shortcuts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.cash-shortcuts button{padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:9px}.change-row{display:flex;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:10px}
.auth-card{width:min(450px,94vw)}.auth-brand{text-align:center;padding:10px}.auth-brand .brand-mark{margin:auto;width:48px;height:48px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;background:#f3f5fa;border-radius:9px}.auth-tabs button{height:34px;border:0;border-radius:7px;background:transparent;font-size:9px;font-weight:800}.auth-tabs button.active{background:#fff;box-shadow:0 2px 7px rgba(30,40,70,.08);color:var(--blue)}
.toast{position:fixed;z-index:200;right:18px;bottom:18px;max-width:360px;padding:12px 15px;border-radius:11px;background:#18223d;color:#fff;font-size:10px;box-shadow:0 14px 40px rgba(0,0,0,.2);transform:translateY(80px);opacity:0;transition:.2s}.toast.show{transform:translateY(0);opacity:1}.toast.error{background:#9f3444}
.undo-bar{position:fixed;z-index:90;right:20px;bottom:72px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 12px 35px rgba(20,30,60,.15);display:flex;gap:12px;align-items:center;font-size:9px}.undo-bar button{border:0;border-radius:7px;padding:7px 9px;background:#2947ad;color:#fff;font-weight:800}
.report-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:12px}.report-summary article{padding:10px;border:1px solid var(--line);border-radius:9px;background:#fafbfe}.report-summary span,.report-summary strong{display:block}.report-summary span{font-size:8px;color:var(--muted)}.report-summary strong{margin-top:4px;font-size:13px}
.settings-layout{display:grid;grid-template-columns:190px 1fr;gap:12px;margin-top:14px}.settings-nav{padding:7px;border:1px solid var(--line);border-radius:12px;background:#fff;display:grid;gap:4px;height:max-content}.settings-nav button{min-height:39px;border:0;border-radius:8px;background:transparent;text-align:left;padding:0 10px;color:#687187;font-size:9px;font-weight:750}.settings-nav button.active{background:#edf1ff;color:var(--blue)}.setting-section{display:none}.setting-section.active{display:block}.switch-row{min-height:60px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fafbfe;display:flex;justify-content:space-between;align-items:center;gap:15px}.switch-row strong,.switch-row small{display:block}.switch-row strong{font-size:10px}.switch-row small{margin-top:3px;color:var(--muted);font-size:8px}.switch-row input[type=checkbox]{width:40px;height:22px}
.login-required{padding:50px 20px;text-align:center;color:var(--muted)}.login-required strong{display:block;color:var(--ink);font-size:16px;margin-bottom:5px}
.mobile-menu{display:none}
@media(max-width:1020px){.billing-layout{grid-template-columns:minmax(0,1fr) 350px}.sidebar{width:210px}.workspace{margin-left:210px}}
@media(max-width:760px){
  .sidebar{transform:translateX(-105%);transition:.2s;width:245px}.sidebar.open{transform:translateX(0)}.workspace{margin-left:0}.mobile-menu{display:grid}.topbar{padding:0 10px}.content{padding:12px}.billing-layout{display:block;margin:-12px}.catalog-panel{padding:12px}.cart-panel{position:relative;top:auto;height:auto;min-height:560px;border-left:0;border-top:1px solid var(--line)}.billing-banner{min-height:105px;padding:15px}.billing-banner h1{font-size:20px}.invoice-pill{display:none}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-row{grid-template-columns:1fr}.view-header{display:block}.view-actions{padding-top:10px}.form-row,.form-row.three{grid-template-columns:1fr}.settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow:auto}.settings-nav button{min-width:max-content}.top-actions .optional{display:none}.payment-modes{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){.product-grid{grid-template-columns:1fr}.scanner-row{grid-template-columns:1fr 80px}.stats-grid,.mini-stats{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.view-actions,.toolbar,.feature-grid,.command-bar,.no-print{display:none!important}.workspace{margin:0}.content{padding:0}.panel{border:0;box-shadow:none}.data-table th,.data-table td{font-size:9px}}