*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#404040;--bg-sidebar:#363636;--bg-section:#404040;--bg-input:#2d2d2d;--bg-table:#2d2d2d;--bg-row-hover:#3a3a3a;--bg-row-stripe:#ffffff05;--bg-card:#404040;--border:#555;--text:#e0e0e0;--text-dim:#b0b0b0;--text-label:#999;--btn-add-bg:#555;--btn-add-hover:#666;--accent:#ff7f2a;--accent-hover:#e66e1e;--close-hover:#e81123;--status-ok:#4caf50;--status-err:#e81123;--badge-bg:#555;--badge-ok-text:#7ee08a;--badge-ok-bg:#4caf502e;--badge-ok-border:#4caf5059;--badge-err-text:#ff9c9c;--badge-err-bg:#e8112329;--badge-err-border:#e8112359;--badge-warn-text:#ffd479;--badge-warn-bg:#ffb70329;--badge-warn-border:#ffb70352;--badge-info-text:#8ec5ff;--badge-info-bg:#0969da33;--badge-info-border:#0969da61;--badge-accent-text:#d3a4ff;--badge-accent-bg:#6f42c138;--badge-accent-border:#6f42c166;--badge-neutral-text:var(--text-dim);--badge-neutral-bg:#ffffff12;--badge-neutral-border:#ffffff1f}[data-theme=light]{--bg:#f0f0f0;--bg-sidebar:#e8e8e8;--bg-section:#f5f5f5;--bg-input:#fff;--bg-table:#fff;--bg-row-hover:#f0f0f0;--bg-row-stripe:#00000005;--bg-card:#fff;--border:#ccc;--text:#333;--text-dim:#666;--text-label:#777;--btn-add-bg:#ddd;--btn-add-hover:#ccc;--badge-bg:#ddd;--badge-ok-text:#1a7f37;--badge-ok-bg:#e8f5ec;--badge-ok-border:#cfe8d6;--badge-err-text:#c62828;--badge-err-bg:#fdeaea;--badge-err-border:#f5cfcf;--badge-warn-text:#b7791f;--badge-warn-bg:#fdf3e3;--badge-warn-border:#f0dfc0;--badge-info-text:#0969da;--badge-info-bg:#ddf4ff;--badge-info-border:#c2e4f7;--badge-accent-text:#6f42c1;--badge-accent-bg:#f3eefc;--badge-accent-border:#e0d4f5;--badge-neutral-text:#666;--badge-neutral-bg:#f0f1f3;--badge-neutral-border:#e2e4e8}body{background:var(--bg);color:var(--text);height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:13px;overflow:hidden}#root{flex-direction:column;height:100vh;display:flex;overflow:hidden}#toolbar{background:var(--bg-sidebar);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:36px;display:flex}.toolbar-drag{-webkit-user-select:none;user-select:none;flex:1;align-items:center;gap:8px;height:100%;padding:0 10px;display:flex}.toolbar-logo{object-fit:contain;width:22px;height:22px}.toolbar-title{color:var(--text);font-size:13px;font-weight:600}.toolbar-controls{height:100%;display:flex}.toolbar-btn{width:46px;height:100%;color:var(--text-dim);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.toolbar-btn:hover{background:var(--bg-row-hover);color:var(--accent)}#app{flex:1;display:flex;overflow:hidden}#sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border);flex-direction:column;gap:10px;width:220px;min-width:220px;padding:12px;display:flex}#nav-menu{flex-direction:column;gap:2px;display:flex}.nav-item{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text);text-align:left;background:0 0;border:none;border-left:3px solid #0000;border-radius:5px;align-items:center;gap:8px;width:100%;padding:9px 10px;font-size:12px;text-decoration:none;transition:background .15s,color .15s;display:flex}.nav-item:hover{background:#ff7f2a14}.nav-item.active{border-left-color:var(--accent);color:var(--accent);background:#ff7f2a1f}.nav-icon{flex-shrink:0;width:16px;height:16px}.nav-badge{background:var(--badge-bg);color:var(--text-dim);border-radius:8px;margin-left:auto;padding:1px 6px;font-size:10px}#main-area{background:var(--bg);flex-direction:column;flex:1;display:flex;overflow:hidden}#main-header{background:var(--bg-sidebar);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;min-height:44px;padding:6px 16px;display:flex}#header-left{flex-shrink:0;align-items:center;gap:10px;display:flex}#view-title{color:var(--accent);font-size:14px;font-weight:600}#total-count{color:var(--text-label);font-size:11px}#header-center{flex:1;align-items:center;gap:4px;max-width:350px;display:flex}#header-right{align-items:center;gap:8px;margin-left:auto;display:flex}#search-input{background:var(--bg-input);border:1px solid var(--border);color:var(--text);border-radius:4px;flex:1;padding:5px 8px;font-size:12px}#search-input:focus{border-color:var(--accent);outline:none}#search-input::placeholder{color:var(--text-label)}.filter-select{background:var(--bg-input);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:4px 6px;font-size:11px}.filter-select:focus{border-color:var(--accent);outline:none}.btn-accent{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:5px 14px;font-size:12px;font-weight:600}.btn-accent:hover{background:var(--accent-hover)}.btn-accent:disabled{opacity:.6;cursor:not-allowed}.btn-plain{background:var(--btn-add-bg);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:4px;padding:5px 12px;font-size:12px}.btn-plain:hover{background:var(--btn-add-hover)}#content-area{flex:1;padding:12px 16px;position:relative;overflow:auto}.tiles{flex-wrap:wrap;gap:10px;margin-bottom:14px;display:flex}.tile{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;min-width:150px;padding:10px 16px}.tile .label{color:var(--text-label);margin-bottom:4px;font-size:11px}.tile .value{font-size:20px;font-weight:700}.tile .value.free{color:var(--status-ok)}.tile .value.order{color:var(--badge-info-text)}.tile .value.reserve{color:var(--badge-warn-text)}#data-table{border-collapse:collapse;border:1px solid var(--border);background:var(--bg-table);width:100%;font-size:12px}#data-table thead{z-index:10;position:sticky;top:0}#data-table thead th{background:var(--bg-sidebar);color:var(--text-dim);text-align:left;border-bottom:2px solid var(--accent);border-right:1px solid var(--border);white-space:nowrap;text-transform:uppercase;letter-spacing:.4px;-webkit-user-select:none;user-select:none;padding:8px 12px;font-size:11px;font-weight:600}#data-table thead th:last-child{border-right:none}#data-table tbody td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:7px 12px}#data-table tbody td:last-child{border-right:none}#data-table tbody tr:hover{background:var(--bg-row-hover)}#data-table tbody tr.clickable{cursor:pointer}#data-table tbody tr:last-child td{border-bottom:none}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}td.code{font-family:Consolas,Courier New,monospace}.qty-free{color:var(--status-ok);font-weight:600}.qty-order{color:var(--badge-info-text)}.qty-reserve{color:var(--badge-warn-text)}.muted{color:var(--text-label)}.badge-info,.badge-ok,.badge-neutral,.badge-warn{border:1px solid #0000;border-radius:10px;padding:2px 10px;font-size:11px;font-weight:600;display:inline-block}.badge-info{color:var(--badge-info-text);background:var(--badge-info-bg);border-color:var(--badge-info-border)}.badge-ok{color:var(--badge-ok-text);background:var(--badge-ok-bg);border-color:var(--badge-ok-border)}.badge-warn{color:var(--badge-warn-text);background:var(--badge-warn-bg);border-color:var(--badge-warn-border)}.badge-neutral{color:var(--badge-neutral-text);background:var(--badge-neutral-bg);border-color:var(--badge-neutral-border)}.empty-msg{height:60%;color:var(--text-label);text-align:center;flex-direction:column;justify-content:center;align-items:center;font-size:13px;line-height:1.7;display:flex}#status-bar{background:var(--bg-sidebar);border-top:1px solid var(--border);color:var(--text-label);flex-shrink:0;justify-content:space-between;padding:3px 16px;font-size:10px;display:flex}#login-overlay{background:var(--bg);z-index:300;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.login-box{text-align:center;background:var(--bg-sidebar);border:1px solid var(--border);border-radius:12px;width:90%;max-width:380px;padding:40px 32px}.login-logo{margin-bottom:24px}.login-logo-img{object-fit:contain;width:64px;height:64px;margin-bottom:8px}.login-app-name{color:var(--accent);letter-spacing:-.5px;font-size:20px;font-weight:700}.login-message{color:var(--text-dim);margin-bottom:24px;font-size:13px;line-height:1.5}.login-input{background:var(--bg-input);border:1px solid var(--border);width:100%;color:var(--text);border-radius:6px;outline:none;margin-bottom:10px;padding:10px 14px;font-size:14px;transition:border-color .15s;display:block}.login-input:focus{border-color:var(--accent)}.login-input::placeholder{color:var(--text-label)}.btn-login-submit{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;margin-bottom:16px;padding:11px 0;font-size:15px;font-weight:600;transition:background .2s,transform .1s;display:block}.btn-login-submit:hover{background:var(--accent-hover)}.btn-login-submit:active{transform:scale(.98)}.btn-login-submit:disabled{opacity:.6;cursor:not-allowed}.login-error{color:var(--close-hover);margin-top:16px;font-size:13px}#user-info-section{border-top:1px solid var(--border);align-items:center;gap:8px;margin-top:auto;padding:8px;display:flex}.user-info-avatar{background:var(--border);border-radius:50%;flex-shrink:0;width:32px;height:32px;overflow:hidden}.user-info-avatar img{object-fit:cover;width:100%;height:100%}.user-info-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px;overflow:hidden}.user-info-role{color:var(--text-label);font-size:10px}.btn-logout{background:var(--btn-add-bg);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:4px;padding:4px 10px;font-size:11px}.btn-logout:hover{background:var(--close-hover);border-color:var(--close-hover);color:#fff}.panel-backdrop{z-index:50;background:#00000080;justify-content:flex-end;display:flex;position:fixed;inset:0}.panel{background:var(--bg-sidebar);border-left:1px solid var(--border);width:640px;max-width:92vw;padding:18px;overflow:auto}.panel h3{color:var(--accent);margin:0 0 2px;font-size:16px}.panel .sub{color:var(--text-dim);margin-bottom:16px;font-size:12px}.panel h4{color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;margin:20px 0 8px;font-size:11px}.panel .close{background:var(--btn-add-bg);border:1px solid var(--border);color:var(--text);float:right;border-radius:4px;padding:5px 12px;font-size:12px}.panel .close:hover{background:var(--btn-add-hover)}.kv{border-bottom:1px solid var(--border);gap:10px;padding:6px 0;display:flex}.kv .k{color:var(--text-dim);min-width:190px;font-size:12px}.kv .v{font-size:12px}.loading{text-align:center;color:var(--text-dim);padding:30px}.error-box{background:var(--badge-err-bg);border:1px solid var(--badge-err-border);color:var(--badge-err-text);border-radius:4px;margin-bottom:12px;padding:8px 11px;font-size:12px}