:root{--ink:#17231f;--muted:#78817d;--line:#e9ece9;--paper:#fff;--bg:#f5f7f5;--green:#164b3c;--mint:#dff4e8;--lime:#b7df69;--orange:#ef7d45;--red:#dc5d51;--shadow:0 12px 35px rgba(26,45,37,.07)}*{box-sizing:border-box}body{margin:0;font-family:'IBM Plex Sans Thai',sans-serif;color:var(--ink);background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.eyebrow{font:700 11px Manrope,sans-serif;letter-spacing:.16em;color:#477869;margin:0 0 8px}.muted{color:var(--muted);margin:4px 0}.auth-shell{min-height:100vh;display:grid;grid-template-columns:48% 52%;background:#f8faf8}.brand-panel{background:var(--green);position:relative;overflow:hidden;padding:55px 70px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.brand-panel:before,.brand-panel:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12);width:520px;height:520px;right:-190px;bottom:-180px}.brand-panel:after{width:360px;height:360px;right:-90px;bottom:-90px}.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--lime);color:var(--green);display:grid;place-items:center;font:800 14px Manrope}.brand-copy{position:relative;z-index:1;max-width:520px}.brand-copy .eyebrow{color:var(--lime)}.brand-copy h1{font-size:clamp(52px,6vw,88px);line-height:1.02;letter-spacing:-.05em;margin:16px 0 28px}.brand-copy>p:last-child{font-size:18px;line-height:1.7;color:#c8d9d3;max-width:430px}.mini-preview{width:310px;padding:20px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);border-radius:18px;position:relative;z-index:1}.mini-preview>div:first-child{display:flex;justify-content:space-between}.mini-preview strong{color:var(--lime)}.wave{display:flex;align-items:flex-end;height:50px;gap:8px;margin-top:14px}.wave i{display:block;background:rgba(183,223,105,.75);width:24px;border-radius:4px 4px 0 0}.wave i:nth-child(1){height:30%}.wave i:nth-child(2){height:55%}.wave i:nth-child(3){height:42%}.wave i:nth-child(4){height:80%}.wave i:nth-child(5){height:65%}.wave i:nth-child(6){height:92%}.wave i:nth-child(7){height:70%}.wave i:nth-child(8){height:100%}.auth-panel{display:grid;place-items:center;padding:48px}.auth-box{width:min(430px,100%)}.mobile-logo{display:none}.auth-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:46px}.tab{flex:1;border:0;background:none;padding:13px;color:#919995;border-bottom:2px solid transparent}.tab.active{color:var(--green);font-weight:700;border-color:var(--green)}.auth-form{display:flex;flex-direction:column;gap:21px}.auth-form h2{font-size:36px;letter-spacing:-.03em;margin:0}.auth-form label,.setup-card label,.modal label{font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:8px}.auth-form input,.setup-card input,.modal input,.modal select{height:50px;border:1px solid #dfe4e1;border-radius:10px;padding:0 15px;background:#fff;outline:none}.auth-form input:focus,.setup-card input:focus,.modal input:focus,.modal select:focus{border-color:#44806c;box-shadow:0 0 0 3px #e5f1ed}.form-row{display:flex;justify-content:space-between}.check{flex-direction:row!important;align-items:center;gap:7px!important;font-weight:400!important}.link-btn,.text-btn{border:0;background:transparent;color:#286a55;font-weight:600}.primary-btn,.add-btn{border:0;border-radius:10px;background:var(--green);color:#fff;font-weight:700;padding:14px 18px;display:flex;align-items:center;justify-content:center;gap:12px}.primary-btn span{margin-left:auto}.demo-hint{font-size:12px;color:#9aa19e;text-align:center}.app-shell{display:flex;min-height:100vh}.sidebar{width:244px;position:fixed;inset:0 auto 0 0;background:#133e33;color:#fff;padding:28px 18px 20px;display:flex;flex-direction:column;z-index:10}.logo{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;padding:0 10px 28px}.logo b{font:700 18px Manrope}.logo small{display:block;font:600 8px Manrope;letter-spacing:.18em;color:#83a69a}.sidebar nav{flex:1}.sidebar nav>p{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#6f9588;margin:22px 12px 8px}.nav-item{width:100%;border:0;border-radius:9px;background:transparent;color:#a8c1b9;text-align:left;padding:11px 13px;margin:3px 0;display:flex;align-items:center;gap:12px}.nav-item span{font-size:20px;width:20px;text-align:center}.nav-item.active,.nav-item:hover{background:#205346;color:#fff}.nav-item b{margin-left:auto;background:var(--orange);font-size:10px;padding:2px 6px;border-radius:8px}.sync-card{border-top:1px solid rgba(255,255,255,.1);padding:17px 10px;display:flex;gap:10px;align-items:center}.sync-card>i,.connection-status i{width:8px;height:8px;background:#74d995;border-radius:50%;box-shadow:0 0 0 4px rgba(116,217,149,.12)}.sync-card div{display:flex;flex-direction:column}.sync-card strong{font-size:11px}.sync-card small{font-size:10px;color:#799d91}.profile{border:0;background:#0e342b;color:#fff;border-radius:10px;padding:10px;display:flex;align-items:center;gap:9px;text-align:left}.profile>span{background:#e5ba7a;color:#3e2c14;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-weight:700}.profile div{display:flex;flex-direction:column;flex:1}.profile b{font-size:11px}.profile small{font-size:9px;color:#81a296}.workspace{margin-left:244px;width:calc(100% - 244px)}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:8}.search{width:420px;height:40px;background:#f5f7f5;border-radius:9px;display:flex;align-items:center;padding:0 13px;color:#909894}.search input{border:0;outline:0;background:transparent;flex:1;padding:0 10px}.search kbd{font-size:10px;border:1px solid #d8dedb;border-radius:5px;padding:2px 6px;background:#fff}.top-actions{display:flex;align-items:center;gap:12px}.live{font:700 10px Manrope;color:#438269;background:#eaf7f0;padding:7px 10px;border-radius:20px}.live i{display:inline-block;width:6px;height:6px;background:#54b981;border-radius:50%;margin-right:4px;animation:pulse 1.5s infinite}@keyframes pulse{50%{opacity:.3}}.icon-btn{border:1px solid var(--line);background:#fff;width:39px;height:39px;border-radius:9px;position:relative}.icon-btn b{position:absolute;width:6px;height:6px;background:var(--orange);border-radius:50%;right:8px;top:7px}.menu-btn{display:none}.add-btn{padding:10px 16px}.content{padding:30px 34px 60px;max-width:1500px;margin:auto}.page{display:none}.page.active{display:block}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:25px}.page-heading h2{font-size:28px;letter-spacing:-.02em;margin:0}.date-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;padding:8px 13px;border-radius:10px}.date-chip>span{font-size:20px;color:#477869}.date-chip div{display:flex;flex-direction:column}.date-chip small{font-size:9px;color:var(--muted)}.date-chip strong{font-size:11px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:17px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 5px 14px rgba(20,60,48,.025)}.stat-icon{width:43px;height:43px;border-radius:10px;background:#e9f4ef;color:#21624e;display:grid;place-items:center;font-size:21px}.stat-card.orange .stat-icon{background:#fff0e8;color:var(--orange)}.stat-card.red .stat-icon{background:#fdecea;color:var(--red)}.stat-body{flex:1}.stat-body small{display:block;color:var(--muted);font-size:11px}.stat-body strong{font:700 26px Manrope;letter-spacing:-.04em}.stat-meta{font-size:10px;color:#4c966e;display:block;margin-top:5px}.stat-meta.warn{color:var(--orange)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);gap:17px;margin-bottom:17px}.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.card-head{padding:19px 21px 13px;display:flex;justify-content:space-between;align-items:flex-start}.card-head h3,.setup-card h3,.guide-card h3{font-size:15px;margin:0}.card-head p{font-size:10px;color:var(--muted);margin:4px 0}.legend{display:flex;gap:12px;font-size:10px;color:var(--muted)}.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}.legend .in{background:#9fd3bd}.legend .out{background:#ef8a55}.chart{height:245px;padding:10px 18px 18px;display:flex;align-items:flex-end;gap:13px;border-top:1px solid #f3f4f3}.chart-day{flex:1;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}.bars{height:190px;display:flex;gap:4px;align-items:flex-end;justify-content:center;border-bottom:1px solid #e7ebe8;background:repeating-linear-gradient(to top,transparent 0,transparent 46px,#f1f3f1 47px)}.bar{width:min(18px,35%);border-radius:4px 4px 1px 1px;transition:height .5s}.bar.in{background:#9fd3bd}.bar.out{background:#ef8a55}.chart-day small{font-size:9px;color:var(--muted)}.alert-list{padding:0 17px 11px}.alert-item{display:grid;grid-template-columns:39px 1fr auto;gap:10px;align-items:center;border-top:1px solid #f0f2f0;padding:12px 3px}.product-thumb{width:39px;height:39px;border-radius:9px;background:var(--thumb,#e8f1ed);display:grid;place-items:center;font-size:18px}.alert-item b{display:block;font-size:11px}.alert-item small{font-size:9px;color:var(--muted)}.stock-count{text-align:right}.stock-count strong{color:var(--red);font:700 14px Manrope}.stock-count small{display:block}.table-card{overflow:hidden}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#8c9591;background:#fafbfa;padding:11px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}td{padding:12px 20px;border-bottom:1px solid #f0f2f0;font-size:11px}tr:last-child td{border-bottom:0}.product-cell{display:flex;align-items:center;gap:10px}.product-cell b{display:block}.product-cell small{color:var(--muted)}.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:12px;font-size:9px;font-weight:600}.pill.in,.pill.done,.pill.normal{background:#e8f5ee;color:#2d795b}.pill.out{background:#fff0e8;color:#c95d29}.pill.low,.pill.returned{background:#fdecea;color:#bb4d44}.pill.pending{background:#fff6df;color:#9b731a}.filterbar{padding:16px 20px;display:flex;gap:10px}.filterbar input,.filterbar select{border:1px solid var(--line);height:39px;padding:0 12px;border-radius:8px;background:#fff;min-width:190px}.settings-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.setup-card,.guide-card{padding:28px}.sheet-icon{width:55px;height:55px;border-radius:14px;background:#e7f5ed;color:#267052;display:grid;place-items:center;font-size:27px;margin-bottom:20px}.setup-card>p,.guide-card>p{color:var(--muted);font-size:12px;line-height:1.7}.setup-card label{margin-top:22px}.button-row{display:flex;gap:10px;margin-top:15px}.secondary-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 16px}.connection-status{display:flex;align-items:center;gap:10px;margin-top:20px;background:#f6f8f6;padding:12px;border-radius:8px;font-size:11px}.schema{display:flex;flex-direction:column;gap:7px;margin:20px 0}.schema b{font-size:11px;margin-top:5px}.schema code{font-size:10px;background:#f4f6f4;padding:10px;border-radius:7px;white-space:normal}.guide-card a{font-size:11px;color:#247055;font-weight:700}.modal{border:0;border-radius:16px;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.22);width:min(480px,calc(100% - 30px))}.modal::backdrop{background:rgba(8,28,23,.55);backdrop-filter:blur(3px)}.modal form{padding:25px;display:flex;flex-direction:column;gap:18px}.modal-head{display:flex;justify-content:space-between}.modal-head h3{margin:0}.modal-head button{border:0;background:#f1f3f1;width:32px;height:32px;border-radius:8px;font-size:20px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.toast{position:fixed;z-index:100;right:25px;bottom:25px;background:#163f34;color:#fff;padding:13px 18px;border-radius:10px;box-shadow:var(--shadow);font-size:12px;transform:translateY(100px);opacity:0;transition:.3s}.toast.show{transform:none;opacity:1}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.brand-panel{padding:45px}.settings-grid{grid-template-columns:1fr}}
@media(max-width:760px){.auth-shell{grid-template-columns:1fr}.brand-panel{display:none}.auth-panel{padding:30px 22px}.mobile-logo{display:flex;align-items:center;gap:10px;margin-bottom:35px}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.2)}.workspace{margin-left:0;width:100%}.topbar{padding:0 14px}.menu-btn{display:block}.search{width:auto;flex:1;margin:0 10px}.search kbd,.top-actions .icon-btn,.live{display:none}.content{padding:22px 14px 45px}.page-heading{align-items:flex-start}.date-chip{display:none}.stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:14px;gap:9px}.stat-icon{width:35px;height:35px}.stat-body strong{font-size:20px}.dashboard-grid{grid-template-columns:1fr}.chart{gap:4px}.alert-card{min-width:0}.add-btn{font-size:11px}.page-heading h2{font-size:23px}.filterbar{flex-direction:column}.filterbar input,.filterbar select{width:100%}.settings-grid{grid-template-columns:1fr}.setup-card,.guide-card{padding:20px}.button-row{flex-direction:column}.top-actions .add-btn{padding:10px;font-size:0}.top-actions .add-btn:first-letter{font-size:18px}}
@media(max-width:420px){.stats-grid{grid-template-columns:1fr}.auth-panel{padding:22px}.auth-tabs{margin-bottom:34px}.two-col{grid-template-columns:1fr}}

/* monstock — blue data-infographic theme */
:root{--ink:#17253d;--muted:#7e91aa;--line:#dce5f1;--paper:#fff;--bg:#f5f8fd;--green:#315f9f;--mint:#e4eefb;--lime:#77b8e8;--orange:#4f96cf;--red:#315f9f;--shadow:none}
body{background:var(--bg);color:var(--ink)}
.brand-panel{background:#eef4fc;color:var(--ink);border-right:1px solid #d6e1ef}
.brand-panel:before,.brand-panel:after{border-color:#bfd1e8}
.brand-copy .eyebrow{color:#4b8cc4}.brand-copy>p:last-child{color:#68809f}
.brand-mark{border-radius:50%;background:linear-gradient(135deg,#274d8a 0 48%,#75b9e9 49% 76%,#a9c7e8 77%);color:#fff;text-transform:lowercase;box-shadow:0 0 0 5px #e1eaf6}
.mini-preview{border-color:#c9d8ea;background:rgba(255,255,255,.52)}.mini-preview strong{color:#3979b4}.wave i{background:#70addd}
.auth-shell{background:#fbfcff}.tab.active{color:#315f9f;border-color:#315f9f}.auth-form input:focus,.setup-card input:focus,.modal input:focus,.modal select:focus{border-color:#6ea9d9;box-shadow:0 0 0 3px #e7f1fa}.link-btn,.text-btn{color:#3c7db7}.primary-btn,.add-btn{background:#315f9f;border-radius:4px}
.sidebar{background:#f8fbff;color:var(--ink);border-right:1px solid #d8e3f0}.logo{color:var(--ink);border-bottom:1px solid var(--line)}.logo b{text-transform:lowercase}.logo small{color:#7f96b3}.sidebar nav>p{color:#9aabc0}.nav-item{color:#66809e;border-radius:3px}.nav-item.active,.nav-item:hover{background:#dfeaf7;color:#234d86;border-left:3px solid #397cc0}.nav-item b{background:#4d95ce;color:white}.sync-card{border-color:var(--line)}.sync-card>i,.connection-status i{background:#69a9da;box-shadow:0 0 0 4px #e0eef9}.sync-card strong{color:#385f8c}.sync-card small{color:#8ba0b7}.profile{background:#e8f0fa;color:var(--ink);border:1px solid #d6e2ef;border-radius:3px}.profile>span{background:#79afe0;color:white}.profile small{color:#7b91aa}
.topbar{background:#fbfdff;border-color:#dbe5f0}.search{background:#eef3f9;border:1px solid #e0e8f2}.live{color:#306eaa;background:#e0eef9}.live i{background:#4a95cc}.content{max-width:1540px}.page-heading{padding-bottom:18px;border-bottom:1px solid #bfcddd}.page-heading h2{font-size:31px}.eyebrow{color:#4d8ec5}.date-chip,.card,.stat-card{border-radius:2px;box-shadow:none}.date-chip{border-color:#cad8e8}.date-chip>span{color:#4c8dc6}
.stats-grid{gap:0;border-top:1px solid #c9d6e5;border-bottom:1px solid #c9d6e5;background:#f8fbff}.stat-card{border:0;border-right:1px solid #d8e2ee;background:transparent;padding:22px 20px;align-items:center}.stat-card:last-child{border-right:0}.stat-icon,.stat-card.orange .stat-icon,.stat-card.red .stat-icon{width:66px;height:66px;flex:0 0 66px;border-radius:50%;background:conic-gradient(#397cc0 0 68%,#dce6f3 68% 100%);color:#315f9f;border:9px solid #edf3fa;outline:2px solid #87b5dd;font-size:17px}.stat-card:nth-child(2) .stat-icon{background:conic-gradient(#6aabe0 0 52%,#dce6f3 52%)}.stat-card:nth-child(3) .stat-icon{background:conic-gradient(#315f9f 0 36%,#dce6f3 36%)}.stat-card:nth-child(4) .stat-icon{background:conic-gradient(#8abce5 0 24%,#dce6f3 24%)}.stat-body strong{color:#315f9f}.stat-meta,.stat-meta.warn{color:#6f91b3}
.card{border-color:#cfdbe9}.card-head{border-bottom:1px solid #e1e8f1}.legend .in,.bar.in{background:#80b9e4}.legend .out,.bar.out{background:#315f9f}.chart{border-top:0}.bars{border-color:#cad7e6;background:repeating-linear-gradient(to top,transparent 0,transparent 46px,#e7edf5 47px)}.bar{border-radius:0}.alert-item{border-color:#e1e8f1}.product-thumb{border-radius:50%;filter:saturate(.35)}.stock-count strong{color:#315f9f}
th{background:#edf3fa;color:#607b9c;border-color:#d7e1ed}td{border-color:#e5ebf3}.pill{border-radius:2px}.pill.in,.pill.done,.pill.normal{background:#e0eef9;color:#326f9f}.pill.out{background:#dce8f7;color:#284f88}.pill.low,.pill.returned{background:#cfdef1;color:#244d86}.pill.pending{background:#edf3fa;color:#54789e}.filterbar input,.filterbar select,.secondary-btn{border-radius:2px}.sheet-icon{border-radius:50%;background:#e0eef9;color:#3478b1}.connection-status,.schema code{background:#edf3f9}.guide-card a{color:#397cb6}.modal{border-radius:3px}.modal::backdrop{background:rgba(28,52,84,.55)}.modal-head button{border-radius:2px;background:#e7eef7}.toast{background:#315f9f;border-radius:2px}
@media(max-width:760px){.stats-grid{gap:1px;background:#d8e2ee}.stat-card{background:#f8fbff;border:0}.brand-panel{border:0}}
.template-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.template-actions a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;text-decoration:none;font-size:11px;font-weight:700;border:1px solid #315f9f}.template-download{background:#315f9f;color:#fff!important}.template-open{background:#eef4fb;color:#315f9f!important}@media(max-width:420px){.template-actions{grid-template-columns:1fr}}

/* monstock — bold minimal blue redesign */
:root{--ink:#090e1c;--muted:#697386;--line:#e8ebf1;--paper:#fff;--bg:#fff;--green:#0a43f5;--mint:#eff3ff;--lime:#0a43f5;--orange:#0a43f5;--red:#0a43f5;--shadow:0 12px 38px rgba(25,45,90,.06)}
body{background:#fff;color:var(--ink)}.brand-lockup{display:block;width:185px;height:auto}.brand-panel>.brand-lockup{position:relative;z-index:2;width:210px}.mobile-logo .brand-lockup{width:190px}
.brand-panel{background:#fff;border-right:1px solid #eef0f4;padding:48px 64px}.brand-panel:before{width:128px;height:128px;border:0;border-radius:0;right:45px;top:38px;bottom:auto;background-image:radial-gradient(#0a43f5 2px,transparent 2px);background-size:20px 20px;opacity:.9}.brand-panel:after{width:100%;height:8px;border:0;border-radius:0;background:#0a43f5;bottom:0;left:0;right:auto}.brand-copy{max-width:550px}.brand-copy .eyebrow{display:none}.brand-copy h1{font-family:Manrope,'IBM Plex Sans Thai',sans-serif;font-size:clamp(58px,6.5vw,92px);line-height:.96;letter-spacing:-.065em;text-transform:uppercase;margin:0 0 30px;max-width:520px}.brand-copy h1::first-line{color:#090e1c}.brand-copy>p:last-child{color:#2e374a;font-size:19px;max-width:390px;border-left:5px solid #0a43f5;padding-left:18px}.mini-preview{width:360px;border:1px solid #e6e9f0;border-radius:14px;background:#fff;box-shadow:var(--shadow)}.mini-preview strong{color:#0a43f5}.wave i{background:#0a43f5}.wave i:nth-child(even){background:#7999ff}
.auth-panel{background:#fafbfe}.auth-tabs{border-color:#e4e8ef}.tab.active{color:#0a43f5;border-color:#0a43f5}.auth-form h2{font-family:Manrope,'IBM Plex Sans Thai',sans-serif;font-weight:800;font-size:42px}.auth-form input,.setup-card input,.modal input,.modal select{border-radius:7px;border-color:#dfe3eb}.auth-form input:focus,.setup-card input:focus,.modal input:focus,.modal select:focus{border-color:#0a43f5;box-shadow:0 0 0 3px #e7edff}.primary-btn,.add-btn{background:#0a43f5;border-radius:7px;box-shadow:0 8px 18px rgba(10,67,245,.18)}.link-btn,.text-btn{color:#0a43f5}
.sidebar{background:#fff;border-right:1px solid #e9ecf2;width:250px;padding:26px 18px 20px}.sidebar .logo{padding:0 8px 24px}.sidebar .brand-lockup{width:175px}.sidebar nav>p{color:#a1a8b5}.nav-item{color:#697386;border-radius:7px;font-weight:500}.nav-item.active,.nav-item:hover{background:#eef2ff;color:#0a43f5;border-left:0}.nav-item.active span{color:#0a43f5}.nav-item b{background:#0a43f5}.sync-card{border-color:#eaedf3}.sync-card>i,.connection-status i{background:#0a43f5;box-shadow:0 0 0 4px #e8edff}.sync-card strong{color:#172038}.profile{background:#f7f8fb;color:#111827;border-color:#eaedf2;border-radius:8px}.profile>span{background:#0a43f5;color:#fff}.profile small{color:#7d8797}.workspace{margin-left:250px;width:calc(100% - 250px)}
.topbar{background:rgba(255,255,255,.94);border-color:#eceef3;backdrop-filter:blur(14px)}.search{background:#f7f8fa;border-color:#eceef2}.live{background:#ebf0ff;color:#0a43f5}.live i{background:#0a43f5}.content{max-width:1480px;padding-top:38px}.page-heading{border:0;padding:0;margin-bottom:28px;position:relative}.page-heading:after{content:"";position:absolute;width:72px;height:5px;background:#0a43f5;left:0;bottom:-13px;border-radius:8px}.page-heading h2{font-family:Manrope,'IBM Plex Sans Thai',sans-serif;font-size:36px;font-weight:800;letter-spacing:-.04em}.eyebrow{color:#0a43f5}.date-chip{border-radius:8px}.date-chip>span{color:#0a43f5}
.stats-grid{gap:15px;border:0;background:transparent}.stat-card{border:1px solid #e9ecf2!important;border-radius:12px;background:#fff;padding:20px;box-shadow:0 8px 26px rgba(28,45,80,.045);position:relative;overflow:hidden}.stat-card:first-child{background:linear-gradient(135deg,#0737da,#0a54ff);border-color:#0a43f5!important;color:#fff}.stat-card:first-child:after{content:"";position:absolute;width:150px;height:150px;border:1px solid rgba(255,255,255,.2);border-radius:50%;right:-48px;top:-65px}.stat-card:first-child .stat-body small,.stat-card:first-child .stat-meta{color:#dfe8ff}.stat-card:first-child .stat-body strong{color:#fff}.stat-icon,.stat-card.orange .stat-icon,.stat-card.red .stat-icon{width:54px;height:54px;flex-basis:54px;border:0;outline:0;border-radius:50%;background:#eef2ff;color:#0a43f5;font-size:20px}.stat-card:first-child .stat-icon{background:rgba(255,255,255,.15);color:#fff}.stat-card:nth-child(n+2) .stat-icon{background:#f0f3ff}.stat-body strong{color:#0a43f5;font-size:29px}.stat-meta,.stat-meta.warn{color:#52617a}
.card{border:1px solid #e8ebf1;border-radius:12px;box-shadow:0 10px 32px rgba(22,43,85,.05)}.card-head{border-color:#edf0f4;padding:21px 23px 15px}.card-head h3,.setup-card h3,.guide-card h3{font-family:Manrope,'IBM Plex Sans Thai',sans-serif;font-size:16px;font-weight:800}.legend .in,.bar.in{background:#87a7ff}.legend .out,.bar.out{background:#0a43f5}.chart{padding-left:23px;padding-right:23px}.bars{background:repeating-linear-gradient(to top,transparent 0,transparent 46px,#edf0f5 47px);border-color:#e5e9f0}.bar{border-radius:5px 5px 0 0}.product-thumb{border-radius:10px;filter:saturate(.55)}.stock-count strong{color:#0a43f5}
th{background:#f7f8fb;color:#7b8494;border-color:#e8ebf0}td{border-color:#edf0f4}.pill{border-radius:20px}.pill.in,.pill.done,.pill.normal{background:#eaf0ff;color:#0a43f5}.pill.out{background:#eef1f8;color:#344766}.pill.low,.pill.returned{background:#e0e7ff;color:#0a43f5}.pill.pending{background:#f0f2f7;color:#4b5d78}.filterbar input,.filterbar select,.secondary-btn{border-radius:7px}.sheet-icon{border-radius:12px;background:#eaf0ff;color:#0a43f5}.connection-status,.schema code{background:#f7f8fb}.guide-card a{color:#0a43f5}.template-actions a{border-color:#0a43f5;border-radius:7px}.template-download{background:#0a43f5}.template-open{background:#eef2ff}.modal{border-radius:12px}.modal::backdrop{background:rgba(8,17,40,.6)}.toast{background:#0a43f5;border-radius:8px}
@media(max-width:760px){.workspace{margin-left:0;width:100%}.stats-grid{background:transparent;gap:10px}.brand-panel{display:none}.sidebar{width:250px}.stat-card{background:#fff}.stat-card:first-child{background:linear-gradient(135deg,#0737da,#0a54ff)}}
.top-products-card{margin-bottom:17px;overflow:hidden}.top-products-card .card-head{align-items:center}.top-products-card .eyebrow{font-size:9px;margin-bottom:4px}.ranking-summary{text-align:right;background:#eef2ff;padding:9px 14px;border-radius:8px;min-width:130px}.ranking-summary small{display:block;color:#697386;font-size:9px}.ranking-summary strong{display:block;color:#0a43f5;font:800 17px Manrope}.top-products-list{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;padding:5px 22px 18px}.top-product-row{display:grid;grid-template-columns:31px 39px 1fr;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #edf0f4}.top-product-row:nth-last-child(-n+2){border-bottom:0}.rank{font:700 11px Manrope;color:#9aa3b2;text-align:center}.rank-1,.rank-2,.rank-3{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#0a43f5;color:#fff}.rank-2{background:#4773f4}.rank-3{background:#7b98ee}.top-product-info{display:grid;grid-template-columns:1fr auto;gap:2px 12px;min-width:0}.top-product-info b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-product-info small{display:block;color:#8a94a4;font-size:9px}.top-product-value{text-align:right;grid-row:1 / 3;grid-column:2}.top-product-value strong{font:800 17px Manrope;color:#0a43f5}.top-product-value small{margin-left:3px}.ranking-track{grid-column:1 / 3;height:4px;background:#eef1f6;border-radius:8px;overflow:hidden;margin-top:5px}.ranking-track i{display:block;height:100%;background:linear-gradient(90deg,#8aa5ff,#0a43f5);border-radius:8px}.empty-ranking{grid-column:1/-1;text-align:center;color:#8b95a5;padding:25px}@media(max-width:900px){.top-products-list{grid-template-columns:1fr}.top-product-row:nth-last-child(-n+2){border-bottom:1px solid #edf0f4}.top-product-row:last-child{border-bottom:0}}@media(max-width:480px){.top-products-list{padding:5px 14px 15px}.top-product-row{grid-template-columns:28px 34px 1fr}.ranking-summary{display:none}}
.scan-btn{height:40px;border:1px solid #0a43f5;background:#eef2ff;color:#0a43f5;border-radius:7px;padding:0 14px;font-weight:700;font-size:11px}.scan-btn:hover{background:#e2e9ff}.barcode-modal{width:min(540px,calc(100% - 24px))}.barcode-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f1f3f8;padding:5px;border-radius:9px}.mode-btn{border:0;background:transparent;color:#697386;border-radius:6px;padding:10px;font-weight:700}.mode-btn.active{background:#0a43f5;color:#fff;box-shadow:0 4px 12px rgba(10,67,245,.2)}.barcode-input-wrap{display:grid;grid-template-columns:34px 1fr auto;align-items:center;border:2px solid #dfe4ed;border-radius:8px;overflow:hidden;background:#fff}.barcode-input-wrap:focus-within{border-color:#0a43f5;box-shadow:0 0 0 3px #e7edff}.barcode-input-wrap>span{text-align:center;color:#0a43f5;font-size:20px}.barcode-input-wrap input{border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 5px!important;min-width:0}.barcode-input-wrap button{height:36px;margin-right:6px;border:0;border-radius:5px;background:#eef2ff;color:#0a43f5;font-size:10px;font-weight:700;padding:0 10px}.camera-area{height:240px;background:#081020;border-radius:9px;overflow:hidden;position:relative}.camera-area video{width:100%;height:100%;object-fit:cover}.camera-area:after{content:"";position:absolute;inset:35px 45px;border:2px solid rgba(255,255,255,.8);border-radius:8px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}.camera-area .scan-line{position:absolute;z-index:2;height:2px;background:#0a43f5;box-shadow:0 0 8px #fff;left:50px;right:50px;top:50%;animation:barcodeScan 2s ease-in-out infinite}.camera-area small{position:absolute;z-index:3;bottom:9px;left:0;right:0;text-align:center;color:#fff}@keyframes barcodeScan{0%,100%{transform:translateY(-60px)}50%{transform:translateY(60px)}}.scanned-product{min-height:70px;border:1px solid #dce3ee;background:#f7f9fd;border-radius:9px;padding:12px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px}.scanned-product.empty{display:grid;place-items:center;border-style:dashed;color:#8b95a6}.scanned-product b{display:block;font-size:12px}.scanned-product small{display:block;color:#7d8797;font-size:9px}.scan-stock{text-align:right}.scan-stock strong{display:block;color:#0a43f5;font:800 15px Manrope}.scanner-hint{font-size:9px;color:#8a94a4;text-align:center;margin:0}.primary-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}@media(max-width:760px){.top-actions .scan-btn{font-size:0;width:40px;padding:0}.top-actions .scan-btn:first-letter{font-size:18px}}@media(max-width:480px){.camera-area{height:210px}.scanned-product{grid-template-columns:38px 1fr}.scan-stock{grid-column:2;text-align:left;display:flex;gap:5px}.barcode-input-wrap{grid-template-columns:30px 1fr auto}.barcode-input-wrap button{font-size:0;width:35px}.barcode-input-wrap button:first-letter{font-size:15px}}

/* Responsive: tablet and mobile */
.sidebar-backdrop{display:none;position:fixed;inset:0;border:0;background:rgba(8,16,32,.42);backdrop-filter:blur(2px);z-index:9}.sidebar-backdrop.show{display:block}.table-wrap{-webkit-overflow-scrolling:touch;scrollbar-width:thin}.nav-item,.icon-btn,.scan-btn,.add-btn,.mode-btn{touch-action:manipulation}
@media(max-width:1100px){body.nav-open{overflow:hidden}.sidebar{z-index:12;transform:translateX(-102%);transition:transform .25s ease;width:min(300px,84vw);box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:20px 0 55px rgba(8,20,48,.2)}.workspace{margin-left:0;width:100%}.menu-btn{display:block;flex:0 0 40px}.topbar{padding:0 20px}.search{width:min(390px,45vw)}.content{padding:30px 24px 55px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:minmax(0,1fr)}.settings-grid{grid-template-columns:1fr}.top-products-list{grid-template-columns:1fr 1fr}.auth-shell{grid-template-columns:42% 58%}.brand-panel{padding:38px}.brand-copy h1{font-size:clamp(44px,6vw,68px)}}
@media(min-width:761px) and (max-width:1100px){.sidebar .nav-item{min-height:46px}.topbar{height:68px}.card-head{padding:18px}.chart{height:260px}.table-wrap:after{content:"เลื่อนตารางด้านข้างเพื่อดูข้อมูลเพิ่มเติม →";display:block;padding:8px 18px;color:#929baa;font-size:9px;background:#fafbfc}.modal{max-height:calc(100dvh - 40px);overflow:auto}}
@media(max-width:760px){body{font-size:15px}.topbar{height:62px;padding:0 10px;gap:8px}.menu-btn{width:42px;height:42px}.search{min-width:0;width:auto;flex:1;margin:0}.search input{font-size:12px}.top-actions{gap:6px}.top-actions .add-btn,.top-actions .scan-btn{width:42px;height:42px;padding:0;display:grid;place-items:center}.content{padding:22px 12px 42px}.page-heading{margin-bottom:24px;gap:10px}.page-heading h2{font-size:25px}.page-heading .add-btn{min-height:42px;white-space:nowrap}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-card{min-width:0;padding:14px 12px}.stat-icon,.stat-card.orange .stat-icon,.stat-card.red .stat-icon{width:42px;height:42px;flex-basis:42px;font-size:16px}.stat-body{min-width:0}.stat-body strong{font-size:21px;white-space:nowrap}.stat-meta{white-space:normal}.dashboard-grid{gap:12px}.card{border-radius:10px}.card-head{padding:16px;gap:10px}.card-head h3{font-size:14px}.chart{height:230px;padding:8px 10px 14px}.bars{height:170px}.alert-list{padding:0 12px 10px}.top-products-list{grid-template-columns:1fr;padding:4px 14px 15px}.top-product-row{grid-template-columns:30px 36px minmax(0,1fr)}.top-product-info{min-width:0}.top-product-info b{max-width:48vw}.table-card{margin-left:0;margin-right:0}.table-wrap{width:100%;overflow-x:auto}.table-wrap table{min-width:760px}.filterbar{padding:13px}.filterbar input,.filterbar select{min-height:44px}.setup-card,.guide-card{padding:18px}.modal{width:100%;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:16px 16px 0 0;overflow:auto}.modal form{padding:18px 16px calc(18px + env(safe-area-inset-bottom));gap:15px}.modal-head{position:sticky;top:-18px;background:#fff;z-index:4;padding:10px 0}.modal-head button{width:40px;height:40px}.barcode-modal{width:100%}.camera-area{height:min(42dvh,280px)}.toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));text-align:center}.auth-panel{min-height:100dvh;padding:24px 20px}.auth-box{width:100%}.auth-form input{font-size:16px}.mobile-logo{margin-bottom:25px}.button-row{gap:8px}.button-row>*{min-height:44px}}
@media(max-width:430px){.stats-grid{grid-template-columns:1fr}.stat-card{min-height:86px}.page-heading{align-items:flex-start}.page-heading>button{padding:10px;font-size:0}.page-heading>button:first-letter{font-size:18px}.legend{flex-direction:column;gap:3px}.top-product-info b{max-width:42vw}.two-col{grid-template-columns:1fr}.template-actions{grid-template-columns:1fr}.scanned-product{grid-template-columns:38px minmax(0,1fr)}.scan-stock{grid-column:2;text-align:left}.barcode-input-wrap input{font-size:16px}.scanner-hint{line-height:1.5}}
@media(orientation:landscape) and (max-height:600px){.modal{max-height:96dvh}.modal form{gap:10px}.camera-area{height:180px}.sidebar{overflow-y:auto}.sync-card{display:none}}

/* SaaS team, tenant and RBAC */
.permission-hidden{display:none!important}.tenant-security-note{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:15px 18px;margin-bottom:17px;border:1px solid #cfd9ff;background:#f2f5ff;border-radius:10px}.tenant-security-note>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#0a43f5;color:#fff}.tenant-security-note b{font-size:12px}.tenant-security-note p{font-size:10px;color:#647086;margin:2px 0}.tenant-security-note>strong{font:800 10px Manrope;color:#0a43f5;background:#fff;border:1px solid #cfd9ff;padding:7px 10px;border-radius:20px}.roles-card,.permission-card{margin-bottom:17px}.role-board{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:10px;padding:15px;overflow-x:auto;-webkit-overflow-scrolling:touch}.role-column{background:#f7f8fb;border:1px solid #e5e9f0;border-top:3px solid var(--role-color);border-radius:9px;padding:10px;min-height:190px}.role-column.drag-over{background:#edf1ff;border-color:#0a43f5;box-shadow:0 0 0 2px #dbe3ff}.role-column>header{display:flex;justify-content:space-between;align-items:flex-start;padding:2px 3px 10px}.role-column>header b{font:800 12px Manrope}.role-column>header small{display:block;color:#8993a3;font-size:8px;margin-top:2px}.role-column>header span{background:#fff;border:1px solid #e1e5ec;border-radius:12px;padding:2px 7px;font:700 9px Manrope}.role-members{display:flex;flex-direction:column;gap:7px}.member-card{display:grid;grid-template-columns:31px 1fr 10px;align-items:center;gap:8px;background:#fff;border:1px solid #e4e8ef;border-radius:7px;padding:8px;box-shadow:0 3px 10px rgba(25,40,75,.04)}.member-card[draggable="true"]{cursor:grab}.member-card[draggable="true"]:active{cursor:grabbing}.member-card.dragging{opacity:.45}.member-card>span{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#eaf0ff;color:#0a43f5;font-weight:800}.member-card b{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card small{display:block;color:#919aa8;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card i{font-style:normal;color:#35a56b;font-size:7px}.role-empty{border:1px dashed #ccd3df;border-radius:7px;padding:20px 8px;text-align:center;color:#a0a8b5;font-size:8px}.permission-table{min-width:720px}.permission-table th:not(:first-child),.permission-table td:not(:first-child){text-align:center}.permission-table td:first-child b{display:block;font-size:10px}.permission-table td:first-child small{display:block;color:#9aa3b1;font:500 7px Manrope}.permission-toggle{display:inline-grid;place-items:center;width:25px;height:25px;margin:auto;border:0;border-radius:50%;background:transparent;color:#ccd1da;font-weight:800}.permission-toggle.on{background:#e9efff;color:#0a43f5}.permission-toggle:disabled{cursor:default}.permission-editing .permission-toggle:not(:disabled){cursor:pointer;outline:2px dashed #9fb1ef;outline-offset:2px}.audit-list{padding:5px 20px 15px}.audit-row{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #edf0f4}.audit-row:last-child{border-bottom:0}.audit-row>span{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#eef2ff;color:#0a43f5}.audit-row b{display:block;font-size:10px}.audit-row small{display:block;font-size:8px;color:#929ba9}.audit-empty{text-align:center;color:#949dac;font-size:10px;padding:20px}.invite-note{font-size:10px;line-height:1.5;color:#748095;background:#f6f8fb;padding:10px;border-radius:7px;margin:0}
.member-role-select{display:none;width:100%;margin-top:5px;border:1px solid #dce2ee;border-radius:5px;background:#f8f9fc;padding:6px;font:700 9px Manrope;color:#33405a}
@media(max-width:1100px){.role-board{grid-template-columns:repeat(5,210px)}.roles-card .card-head{align-items:center}.member-card{grid-template-columns:31px 1fr 10px}.member-role-select{display:block}.member-card[draggable="true"]{cursor:default}}@media(max-width:760px){.tenant-security-note{grid-template-columns:34px 1fr;padding:12px}.tenant-security-note>strong{grid-column:2;justify-self:start}.role-board{grid-template-columns:repeat(5,205px);padding:12px}.role-column{min-height:170px}.roles-card .card-head{align-items:flex-start}.roles-card .card-head button{font-size:0;width:42px;height:42px;padding:0}.roles-card .card-head button:first-letter{font-size:17px}.permission-card .table-wrap table{min-width:720px}}