:root{--bg:#eef1f4;--surface:#fff;--surface-2:#f7f8fa;--surface-3:#f0f2f5;--line:#d7dce2;--line-strong:#c5cbd3;--text:#20252b;--muted:#68717c;--red:#c8102e;--red-dark:#a90c25;--red-soft:#fff1f3;--green:#16834b;--orange:#d17a00;--blue:#2867a6;--shadow:0 8px 28px rgba(27,35,44,.08);--shadow-lg:0 18px 55px rgba(18,25,32,.18);--app-header-h:78px}
*{box-sizing:border-box}html,body{background:var(--bg)}body{margin:0;color:var(--text);font-family:"Segoe UI",Inter,Arial,sans-serif;font-size:14px;letter-spacing:.01em}.app{height:100vh;display:flex;overflow:hidden;padding-top:var(--app-header-h)}.side{width:226px;background:linear-gradient(#252b31,#1f252b);border-right:0;box-shadow:4px 0 18px rgba(20,26,32,.1);z-index:20;display:flex;flex-direction:column;height:calc(100vh - var(--app-header-h));flex-shrink:0}.side>.brand{display:none}.nav{overflow:auto;padding:12px 10px 18px}.nav .section{padding:14px 11px 7px;color:#8f99a4;font-size:10px;font-weight:700;letter-spacing:.12em}.nav button{position:relative;width:100%;border:0;border-left:3px solid transparent;background:transparent;text-align:left;padding:10px 13px;color:#cbd1d7;border-radius:7px;margin:2px 0;transition:background .15s,color .15s,transform .12s}.nav button:hover{background:#ffffff12;color:#fff}.nav button.active{background:linear-gradient(90deg,rgba(200,16,46,.98),rgba(169,12,37,.94));color:#fff;border-left-color:#ff6077;font-weight:650;box-shadow:0 5px 15px rgba(200,16,46,.22)}.nav button.nav-sub{padding-left:38px;font-size:13px;color:#aeb6bf}.nav-chevron{float:right;font-size:11px;opacity:.7;margin-right:4px;line-height:1.2}.nav-group{padding:0 0 3px}.nav-group>button{padding-left:30px!important}.nav-group>button.nav-sub{padding-left:48px!important}.nav-submenu{padding:3px 0 6px 18px;border-left:1px solid #ffffff1a;margin:0 0 3px 20px}#catalogSubmenu.nav-submenu,#reportsSubmenu.reports-subnav{position:relative;margin:1px 0 5px 38px;padding:2px 0;border-left:0!important}#reportsSubmenu.reports-subnav>button.nav-sub{position:relative;min-height:34px;padding-left:27px!important;border-left:0!important}.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);height:calc(100vh - var(--app-header-h))}.top{position:fixed;inset:0 0 auto;z-index:1200;height:var(--app-header-h);display:grid;grid-template-columns:226px minmax(0,1fr) auto;align-items:center;gap:0;padding:0;background:linear-gradient(90deg,#171f24 0%,#252b31 28%,#30363d 100%);border-bottom:1px solid #151a1e;box-shadow:0 3px 14px rgba(0,0,0,.22);color:#fff}.top-howo{height:100%;min-width:0;display:flex;align-items:center;padding:6px 5px;overflow:hidden}.top-howo img{display:block;width:100%;max-width:none;height:auto;max-height:66px;object-fit:contain;object-position:left center}.top-left{height:100%;min-width:0;display:flex;align-items:center;gap:14px;padding:0 18px}.top b{font-size:17px;font-weight:650;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-right{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 14px 0 8px;white-space:nowrap}.top .who{display:flex;align-items:center;gap:4px;color:#cbd1d7;font-size:12px;flex:0 1 auto}.top .logout-btn{margin-left:2px;padding:7px 12px;border:1px solid #c9ced5;background:#fff;color:#2f3740;border-radius:7px;font:inherit;font-size:12px;font-weight:600}.logout-btn:hover{background:#f5f6f7;border-color:#aeb5bd}.top-sino{width:132px;height:66px;display:flex;align-items:center;justify-content:flex-end;margin-left:6px;overflow:hidden}.top-sino img{display:block;width:128px;max-height:62px;object-fit:contain;object-position:right center}.back-btn{background:#f1f3f5;color:#30363d;border:1px solid #d8dde3;border-radius:7px;padding:7px 13px;font-size:13px;box-shadow:0 1px 2px #00000014}.back-btn:hover{background:#fff;transform:translateY(-1px)}.back-btn:disabled{opacity:.45;cursor:default}.content{padding:18px 20px 24px;overflow:auto}.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:18px;margin-bottom:15px;box-shadow:var(--shadow)}.card h2{margin:0 0 12px;font-size:19px;letter-spacing:-.01em}button{font:inherit;border:0;border-radius:7px;padding:9px 13px;cursor:pointer;transition:transform .1s,box-shadow .15s,background .15s,border-color .15s}button:active{transform:translateY(1px)}input,select,textarea,button{max-width:100%;box-sizing:border-box}.primary{background:linear-gradient(#d01937,#bd0f2c);color:#fff;box-shadow:0 3px 9px rgba(200,16,46,.18)}.primary:hover{background:linear-gradient(#dc2342,#aa0b26);box-shadow:0 5px 14px #c8102e3d}.secondary{background:#edf0f3;color:#30363d;border:1px solid #d8dde3}.secondary:hover{background:#e3e7eb;border-color:#c8ced5}.muted{color:#6f7882}.hint{font-size:12px;color:#7a838d;margin-top:8px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:16px;box-shadow:var(--shadow)}.stat .n{font-size:25px;font-weight:700;margin-top:5px;color:#252b31}.stat.clickable{cursor:pointer;transition:.12s}.stat.clickable:hover{border-color:#e1a1ad;background:#fffafb;box-shadow:0 10px 25px #1b232c1a}.stat.clickable:active{transform:translateY(1px)}.hidden{display:none!important}.actions{display:flex;gap:8px;flex-wrap:wrap}.home-search{position:relative;margin:18px 0}.home-search input{width:100%;padding:12px 14px;border:1px solid #b8bdc2;border-radius:8px;font-size:16px}.search-clear-wrap{position:relative;width:100%;display:block}.search-clear-wrap>input{width:100%;padding-right:36px!important}.search-clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:0;border-radius:50%;background:#e9edf2;color:#59636f;font-size:16px;line-height:20px;padding:0;display:none;align-items:center;justify-content:center;z-index:3}.search-clear-btn:hover{background:#d7dde5;color:#20262d}.home-quick-actions .actions{display:flex;gap:8px;flex-wrap:wrap}.login{position:fixed;inset:0;background:radial-gradient(circle at 50% 25%,#fff,#edf0f3 72%);display:flex;align-items:center;justify-content:center;z-index:100}.loginbox{width:380px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 20px 60px rgba(22,29,36,.14)}.loginbox img{display:block;width:180px;margin:0 auto 22px}.loginbox input,.loginbox select{width:100%;padding:10px;border:1px solid var(--line-strong);border-radius:7px;margin-bottom:10px;font:inherit;background:#fff}.loginbox button{width:100%;margin-top:5px}.loginbox input:focus,.field:focus{outline:none;border-color:#d43a52;box-shadow:0 0 0 3px #c8102e1a}.modal{position:fixed;inset:var(--app-header-h) 0 0;background:#0f141985;backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:50;overflow:auto;padding:18px;max-height:calc(100vh - var(--app-header-h))}.modalbox{background:#fff;border:1px solid #d2d8dee6;border-radius:12px;width:min(520px,92vw);padding:22px;box-shadow:var(--shadow-lg);max-width:calc(100vw - 24px);max-height:calc(100vh - var(--app-header-h) - 36px);overflow:auto hidden}.modalbox h3{margin:0 0 9px;color:#252b31}.modalactions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(max-width:1100px){.top{grid-template-columns:195px minmax(0,1fr) auto}.top-howo img{max-height:62px}.top-sino{width:106px}.top-sino img{width:102px}.top-right{gap:6px;padding-right:8px}.top .who{font-size:11px}}
@media(max-width:900px){.side{width:195px}.grid{grid-template-columns:repeat(2,1fr)}.content{padding:14px}}
@media(max-width:700px){.modal{padding:10px}.modalbox{max-height:calc(100vh - var(--app-header-h) - 20px)}}

input::placeholder{color:#929aa3}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.history-link{border:0;background:none;padding:0;color:#243f67;text-decoration:none;font:inherit;cursor:pointer}.history-link:hover{text-decoration:underline}.product-sale-history-link{cursor:pointer}.product-photo-lightbox{position:fixed;inset:0;z-index:100001;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:35px}.product-photo-lightbox-inner{position:relative;max-width:94vw;max-height:94vh;display:flex;align-items:center;justify-content:center}.product-photo-lightbox img{display:block;max-width:92vw;max-height:90vh;object-fit:contain;background:#fff;border-radius:6px}.product-photo-lightbox-close{position:absolute;right:-12px;top:-12px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#c90024;color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif}.product-photo-lightbox-close::first-letter{line-height:1}
#storeNav.active{background:#c20a24;color:#fff;border-left-color:#c20a24;font-weight:600}
.toolbar{display:flex;gap:9px;align-items:center;margin-bottom:13px}.toolbar input,.field{border:1px solid var(--line-strong);border-radius:7px;padding:9px 11px;font:inherit;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s}.toolbar input{flex:1;min-height:38px}.toolbar input:focus,.product-card-grid input:focus,.product-card-grid select:focus,.product-card-grid textarea:focus{outline:none;border-color:#d43a52;box-shadow:0 0 0 3px rgba(200,16,46,.1)}table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--surface)}th,td{padding:10px;border-bottom:1px solid #e2e5e9;text-align:left;white-space:nowrap;color:#293039}th{background:#f5f7f9;color:#4b5560;font-size:12px;font-weight:700;letter-spacing:.02em;border-bottom:1px solid #cfd5dc;position:sticky;top:0;z-index:1}tbody tr:nth-child(even) td{background:#fbfcfd}tbody tr:hover td{background:#fff4f5}.tablewrap{overflow:scroll auto;max-height:calc(100vh - 190px);border:1px solid var(--line);border-radius:9px;scrollbar-width:auto;background:#fff;box-shadow:0 2px 8px rgba(24,31,38,.04);max-width:100%;overscroll-behavior-x:contain}.tablewrap table{min-width:max-content;width:100%;border-radius:9px;overflow:hidden}.ok{color:var(--green);font-weight:800}.low{color:var(--red);font-weight:800}.catalog-sort-btn{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;padding:0;margin:0;text-align:left;width:100%}.catalog-sort-btn:hover,.catalog-sort-btn.active{color:#c8102e}.catalog-sort-arrow{display:inline-block;min-width:12px;margin-left:3px;font-weight:800}.catalog-page-title{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap}.catalog-page-count{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:26px;padding:3px 11px;border-radius:14px;background:#eef1f4;border:1px solid #d9e0e7;color:#5e6872;font-size:13px;font-weight:700;line-height:18px}.nav-subitem{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:calc(100% - 4px)!important;min-height:32px!important;padding:7px 10px!important;margin:1px 0!important;text-align:left!important;background:transparent!important;border:0!important;border-radius:6px!important;color:#b9c1c9!important;font-size:12px!important;font-weight:500!important;box-shadow:none!important}.nav-subitem:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}.nav-subitem.active{background:rgba(200,16,46,.18)!important;color:#fff!important}.nav-subitem-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catalog-count{flex:0 0 auto;min-width:22px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.1);color:#aeb7c0;font-size:11px;font-weight:700;line-height:20px}.nav-subitem.active .catalog-count{background:rgba(255,255,255,.16);color:#fff}#catalogSubmenu.nav-submenu::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.18)}#catalogSubmenu.nav-submenu>button.nav-subitem{position:relative;padding-left:27px!important;min-height:34px!important}#catalogSubmenu.nav-submenu>button.nav-subitem::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:#aeb6bf;border:2px solid #222930;box-shadow:0 0 0 1px rgba(255,255,255,.1);z-index:1}#catalogSubmenu.nav-submenu>button.nav-subitem:hover::before{background:#fff}#catalogSubmenu.nav-submenu>button.nav-subitem.active::before{background:#ff4964;box-shadow:0 0 0 2px rgba(255,73,100,.18)}.modal.show{display:flex;align-items:flex-start}.modalbox.product-card-modal{width:max-content;min-width:min(900px,calc(100vw - 36px));max-width:none;max-height:calc(100vh - var(--app-header-h) - 36px);height:auto;overflow:auto;padding:22px;box-shadow:0 24px 70px rgba(14,20,26,.24)}.product-card-grid label{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr) auto;align-items:center;gap:8px}.product-card-grid label input,.product-card-grid label select{width:100%;min-width:0}.product-photo-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}.product-photo-slot{min-width:0}.product-photo-preview{height:190px;margin-top:7px;border:1px dashed #cbd2d9;border-radius:6px;background:#f8fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.product-photo-preview:hover{border-color:#d96a7c;background:#fffafb}.modalbox #mText{max-width:none;overflow-x:auto}
@media(max-width:900px){.modalbox.product-card-modal{width:calc(100vw - 20px);min-width:calc(100vw - 20px);max-width:calc(100vw - 20px)}.product-photo-inputs{grid-template-columns:1fr}.product-photo-preview{height:220px}}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#e8ebee}::-webkit-scrollbar-thumb{background:#b7bec6;border-radius:8px;border:2px solid #e8ebee}::-webkit-scrollbar-thumb:hover{background:#9da6b0}.nav::-webkit-scrollbar-track{background:#1f252b}.nav::-webkit-scrollbar-thumb{background:#4c555e;border-color:#1f252b}
#reportsSubmenu.reports-subnav::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.18)}#reportsSubmenu.reports-subnav>button.nav-sub::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:#aeb6bf;border:2px solid #222930;box-shadow:0 0 0 1px rgba(255,255,255,.1);z-index:1}#reportsSubmenu.reports-subnav>button.nav-sub:hover::before{background:#fff}#reportsSubmenu.reports-subnav>button.nav-sub.active::before{background:#ff4964;box-shadow:0 0 0 2px rgba(255,73,100,.18)}
.home-search-results{margin-top:8px;border:1px solid #b8bdc2;border-radius:8px;background:#fff;overflow:hidden}.home-search-row{display:grid;grid-template-columns:180px minmax(220px,1fr) 150px 150px;gap:12px;padding:10px 12px;border-bottom:1px solid #e2e4e6;align-items:center}.home-search-row:last-child{border-bottom:0}.home-search-row.head{font-weight:700;background:#eef0f2}.home-search-part{font-weight:600}.home-search-num{text-align:right}.home-search-empty{padding:14px;color:#68727c}.home-search-row:hover:not(.head){background:#f5f6f7}.home-search-clickable{cursor:pointer}.home-search-clickable:hover{background:#eaf0f6!important}

.input-suffix{display:inline-block;margin-left:-24px;position:relative;pointer-events:none;color:#555}.warn{color:var(--orange);font-weight:800}
.modalbox:has(table),.modalbox:has(.tablewrap),.modalbox:has(.history-detail),.modalbox:has(.settings-form-grid){width:max-content;min-width:min(900px,calc(100vw - 36px));max-width:none}
#modal .modalbox:has(#mText table){width:max-content;min-width:min(1100px,calc(100vw - 36px));max-width:none}

.card h3{font-size:15px}

.modalbox.customer-base-modal{overflow:auto hidden}

::selection{background:rgba(200,16,46,.18)}

.report-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.report-tabs button{border:1px solid #d5dce3;background:#f3f5f7;border-radius:8px;padding:9px 15px;cursor:pointer;font-weight:700;color:#59636d}
.report-tabs button.active{background:var(--red);border-color:var(--red);color:#fff}

.search-clear-wrap.has-value .search-clear-btn{display:flex}

.nav button.nav-sub.active{background:rgba(200,16,46,.15);color:#ff667b;border-left-color:#ff667b;box-shadow:none}