@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";:root,[data-theme=dark]{--bg-main:#090d16;--bg-card:#111827;--bg-surface:#1e293bb3;--bg-sidebar:#0b0f19;--border:#ffffff14;--border-hover:#ffffff2e;--card-bg:var(--bg-card);--border-color:var(--border);--hover-bg:#ffffff08;--text-primary:var(--text-main);--text-secondary:var(--text-muted);--accent-color:var(--accent-primary);--accent-primary:#38bdf8;--accent-primary-hover:#0284c7;--accent-success:#34d399;--accent-warning:#fbbf24;--accent-danger:#f87171;--accent-purple:#a855f7;--text-main:#f8fafc;--text-muted:#94a3b8;--shadow-glow:0 0 25px #38bdf826;--glass-blur:blur(12px)}[data-theme=light]{--bg-main:#f1f5f9;--bg-card:#fff;--bg-surface:#ffffffd9;--bg-sidebar:#fff;--border:#00000014;--border-hover:#00000026;--card-bg:var(--bg-card);--border-color:var(--border);--hover-bg:#00000008;--text-primary:var(--text-main);--text-secondary:var(--text-muted);--accent-color:var(--accent-primary);--accent-primary:#0284c7;--accent-primary-hover:#0369a1;--accent-success:#059669;--accent-warning:#d97706;--accent-danger:#e11d48;--accent-purple:#9333ea;--text-main:#0f172a;--text-muted:#64748b;--shadow-glow:0 4px 20px #0000000f;--glass-blur:blur(12px)}[data-theme=midnight]{--bg-main:#000;--bg-card:#050811;--bg-surface:#0a0e1a;--bg-sidebar:#03050a;--border:#38bdf826;--border-hover:#38bdf859;--card-bg:var(--bg-card);--border-color:var(--border);--hover-bg:#38bdf80d;--text-primary:var(--text-main);--text-secondary:var(--text-muted);--accent-color:var(--accent-primary);--accent-primary:#00f2fe;--accent-primary-hover:#4facfe;--accent-success:#00ff87;--accent-warning:#ffb100;--accent-danger:#ff0844;--accent-purple:#b000ff;--text-main:#fff;--text-muted:#8899a6;--shadow-glow:0 0 30px #00f2fe33;--glass-blur:blur(16px)}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;transition:background-color .25s,border-color .25s,color .15s}body,button,input,select,textarea,table,th,td,h1,h2,h3,h4,h5,h6,span,p,div{font-family:Arial,Helvetica,sans-serif}body{background-color:var(--bg-main);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.app-container{background:linear-gradient(-45deg,#0f172a,#020617,#064e3b,#1e1b4b) 0 0/400% 400%;height:100vh;animation:15s infinite bg-pan;display:flex;position:relative;overflow:hidden}@keyframes bg-pan{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes glow{0%{box-shadow:0 0 10px #00f3ff33}50%{box-shadow:0 0 25px #00f3ff99}to{box-shadow:0 0 10px #00f3ff33}}.futuristic-input:focus{border-color:#00f3ff!important;box-shadow:0 0 15px #00f3ff66!important}.sidebar{-webkit-backdrop-filter:blur(24px);z-index:10;background:#0f172a99;border-right:1px solid #00f3ff33;flex-direction:column;width:280px;padding:2rem 1.5rem;display:flex}.brand-3d-container{perspective:1000px;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:12px;margin-bottom:2.5rem;display:flex}.brand-3d-icon{width:42px;height:42px;transform-style:preserve-3d;background:linear-gradient(135deg,#0284c7 0%,#6366f1 50%,#a855f7 100%);border-radius:12px;justify-content:center;align-items:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;animation:3.5s ease-in-out infinite floatIcon;display:flex;box-shadow:0 0 20px #38bdf873,0 8px 16px #0000004d}.brand-3d-container:hover .brand-3d-icon{transform:rotateY(20deg)rotateX(10deg)scale(1.08)translateZ(10px);box-shadow:0 0 30px #38bdf8b3,0 12px 24px #6366f166}.brand-3d-text{letter-spacing:2px;background:linear-gradient(135deg,#38bdf8 0%,#818cf8 30%,#c084fc 60%,#38bdf8 90%) 0 0/300% 300%;-webkit-text-fill-color:transparent;text-transform:uppercase;transform-style:preserve-3d;filter:drop-shadow(0 2px 4px #0006)drop-shadow(0 0 12px #38bdf866);-webkit-background-clip:text;font-size:1.45rem;font-weight:900;line-height:1.1;transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s;animation:5s ease-in-out infinite alternate shimmer3D;display:block}.brand-3d-container:hover .brand-3d-text{filter:drop-shadow(0 4px 8px #0009)drop-shadow(0 0 22px #818cf8cc);transform:rotateX(8deg)rotateY(-8deg)scale(1.04)translateZ(15px)}@keyframes shimmer3D{0%{background-position:0%;transform:perspective(600px)rotateX(4deg)rotateY(-3deg)}50%{background-position:100%;transform:perspective(600px)rotateX(-2deg)rotateY(4deg)}to{background-position:0%;transform:perspective(600px)rotateX(4deg)rotateY(-3deg)}}@keyframes floatIcon{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-4px)rotate(3deg)}}.nav-menu{flex-direction:column;gap:.75rem;list-style:none;display:flex}.nav-item{cursor:pointer;color:var(--text-muted);border:1px solid #0000;border-radius:12px;align-items:center;gap:12px;padding:1rem 1.25rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.nav-item:hover{color:var(--text-main);background:#ffffff08}.nav-item.active{color:var(--text-main);background:#3b82f61a;border:1px solid #3b82f633;box-shadow:inset 0 0 20px #3b82f60d}.main-content{flex-direction:column;flex:1;display:flex;position:relative;overflow-y:auto}.header{-webkit-backdrop-filter:blur(24px);z-index:5;background:#0f172a99;border-bottom:1px solid #00f3ff33;justify-content:space-between;align-items:center;height:80px;padding:0 3rem;display:flex;position:sticky;top:0}.search-bar input{color:var(--text-main);background:#020617b3;border:1px solid #00f3ff33;border-radius:999px;outline:none;width:300px;padding:.75rem 1.5rem;transition:all .2s}.search-bar input:focus{border-color:#00f3ff;box-shadow:0 0 15px #00f3ff66}.user-info{align-items:center;gap:1.25rem;display:flex}.role-badge{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f64d;border-radius:999px;padding:.35rem 1rem;font-size:.85rem;font-weight:600}.dashboard{width:100%;max-width:1400px;margin:0 auto;padding:3rem}.page-title{letter-spacing:-.5px;text-transform:uppercase;margin-bottom:2.5rem;font-size:2rem;font-weight:600}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem;display:grid}.stat-card{-webkit-backdrop-filter:blur(24px);background:#0f172a99;border:1px solid #00f3ff33;border-radius:20px;padding:2rem;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 0 30px #00f3ff0d}.stat-card:before{content:"";height:4px;position:absolute;top:0;left:0;right:0}.stat-card.blue:before{background:linear-gradient(90deg,#3b82f6,#00f3ff)}.stat-card.green:before{background:linear-gradient(90deg,#10b981,#34d399)}.stat-card.red:before{background:linear-gradient(90deg,#f43f5e,#fb7185)}.stat-card:hover{border-color:#00f3ff80;transform:translateY(-5px);box-shadow:0 0 30px #00f3ff33}.stat-title{color:#00f3ff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:1rem;font-size:.95rem;font-weight:500}.stat-value{color:var(--text-main);letter-spacing:-1px;font-size:2.5rem;font-weight:700}.stat-success{color:#34d399}.stat-danger{color:#fb7185}.upload-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:20px;margin-bottom:3rem;padding:2.5rem}.upload-section h2{margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}.upload-grid{grid-template-columns:1fr 1fr;gap:2.5rem;display:grid}.upload-box{text-align:center;cursor:pointer;background:#0000001a;border:2px dashed #ffffff26;border-radius:16px;padding:3rem 2rem;transition:all .3s}.upload-box:hover{border-color:var(--accent-primary);background:#3b82f60d}.upload-box p{color:var(--text-muted);margin:1rem 0;font-size:.9rem}.data-table-container{background:var(--bg-surface);border:1px solid var(--border);border-radius:20px;overflow:hidden}.table-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.data-table{border-collapse:collapse;width:100%}.data-table th,.data-table td{text-align:left;border-bottom:1px solid #ffffff0d;padding:1.25rem 2rem}.data-table th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;font-weight:500}.data-table tr:hover td{background:#ffffff05}.badge{border-radius:999px;padding:.25rem .75rem;font-size:.8rem;font-weight:600}.badge.ck{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f64d}.badge.atm{color:#c084fc;background:#a855f726;border:1px solid #a855f74d}.badge.cash{color:#34d399;background:#10b98126;border:1px solid #10b9814d}.badge.grab{color:#00b050;background:#00b05026;border:1px solid #00b0504d}.badge.shopee{color:#ee4d2d;background:#ee4d2d26;border:1px solid #ee4d2d4d}.btn{background:var(--accent-primary);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s}.btn:hover{background:var(--accent-primary-hover);box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-danger{color:#fb7185;background:#f43f5e1a;border:1px solid #f43f5e4d}.btn-danger:hover{background:#f43f5e33}.btn-success{background:var(--accent-success)}.btn-success:hover{background:#059669;box-shadow:0 0 20px #10b98133}.sync-btn{border:1px solid var(--border);background:#ffffff0d;align-items:center;gap:.5rem;display:flex}.sync-btn:hover{background:#ffffff1a}.inventory-dashboard{flex-direction:column;gap:1.5rem;display:flex}.subtabs-bar{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px;padding-bottom:.75rem;display:flex}.subtab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;align-items:center;gap:8px;padding:.65rem 1.2rem;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.subtab-btn:hover{color:var(--text-main);background:#ffffff0d}.subtab-btn.active{color:#60a5fa;background:#3b82f626;border-color:#3b82f64d}.filter-controls-bar{background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding:1rem 1.5rem;display:flex}.filter-group{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.input-search{border:1px solid var(--border);color:var(--text-main);background:#0003;border-radius:8px;outline:none;min-width:250px;padding:.6rem 1rem}.input-search:focus{border-color:var(--accent-primary)}.btn-secondary{color:var(--text-main);border:1px solid var(--border);background:#ffffff14}.btn-secondary:hover{background:#ffffff26}.btn-xs{border-radius:6px;padding:.3rem .6rem;font-size:.8rem}.input-inline{border:1px solid var(--accent-primary);color:var(--text-main);text-align:right;background:#0006;border-radius:6px;width:110px;padding:.3rem .5rem}.editable-price{cursor:pointer;border-radius:4px;align-items:center;padding:.2rem .4rem;transition:background .2s;display:inline-flex}.editable-price:hover{color:#60a5fa;background:#3b82f626}.badge.method-qty{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f64d}.badge.method-weight{color:#34d399;background:#10b98126;border:1px solid #10b9814d}.badge.method-fullweight{color:#fbbf24;background:#f59e0b26;border:1px solid #f59e0b4d}.badge-pkg{color:#c084fc;background:#a855f726;border:1px solid #a855f74d;border-radius:4px;margin-left:6px;padding:.1rem .4rem;font-size:.7rem}.recipes-grid{grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:1.5rem;display:grid}.recipe-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.recipe-card-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;padding-bottom:.75rem;display:flex}.recipe-cost-breakdown{background:#00000026;border-radius:12px;grid-template-columns:repeat(2,1fr);gap:.75rem;padding:1rem;display:grid}.cost-box{flex-direction:column;gap:2px;display:flex}.cost-box span{color:var(--text-muted);font-size:.75rem}.cost-box strong{font-size:1rem}.cost-box.highlight strong{color:var(--accent-primary);font-size:1.1rem}.mini-table{border-collapse:collapse;width:100%;font-size:.85rem}.mini-table th,.mini-table td{border-bottom:1px solid #ffffff0d;padding:.5rem .75rem}.mini-table th{color:var(--text-muted);text-align:left;font-weight:500}.pwa-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:20px;padding:1.5rem}.input-qty{border:1px solid var(--border);color:var(--text-main);text-align:center;background:#0000004d;border-radius:8px;width:80px;padding:.4rem .6rem;font-weight:600}.input-qty:focus{border-color:var(--accent-primary)}.analysis-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:20px;margin-top:1rem;padding:2rem}.analysis-box h3{margin:0 0 1.25rem;font-size:1.15rem}.wastage-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.wastage-item{border:1px solid var(--border);background:#0003;border-radius:14px;flex-direction:column;gap:.5rem;padding:1.25rem;display:flex}.wastage-item.danger{background:#f43f5e0d;border-color:#f43f5e4d}.wastage-label{color:var(--text-muted);font-size:.85rem;font-weight:500}.wastage-val{font-size:1.5rem;font-weight:700}.wastage-item p{color:var(--text-muted);margin:0;font-size:.8rem;line-height:1.4}.alert-toast{border-radius:10px;padding:.75rem 1.25rem;font-size:.9rem;font-weight:500}.alert-toast.success{color:#34d399;background:#10b98126;border:1px solid #10b9814d}.stat-card.amber:before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{border:1px solid var(--border);width:90%;color:var(--text-main);background:#1e293b;border-radius:16px;padding:2rem}.mobile-topbar,.mobile-sidebar-backdrop{display:none}@media (width<=992px){.app-container{flex-direction:column;height:100vh;overflow:hidden}.mobile-topbar{-webkit-backdrop-filter:blur(16px);z-index:90;background:#0f172af2;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:10px 16px;display:flex;position:sticky;top:0;box-shadow:0 4px 16px #0006}.sidebar{z-index:1000;-webkit-backdrop-filter:blur(28px);border-right:1px solid var(--border);background:#0f172af2;width:280px;transition:left .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;left:-320px;overflow-y:auto;box-shadow:12px 0 32px #000000b3}.sidebar.open{left:0}.mobile-sidebar-backdrop{-webkit-backdrop-filter:blur(4px);z-index:999;opacity:0;pointer-events:none;background:#0009;transition:opacity .3s;display:block;position:fixed;inset:0}.mobile-sidebar-backdrop.active{opacity:1;pointer-events:auto}.main-content{-webkit-overflow-scrolling:touch;width:100%;height:calc(100vh - 58px);padding:0;overflow-y:auto}.header{gap:10px!important;padding:12px 16px!important}.modal-content{max-height:90vh;overflow-y:auto;width:95%!important;padding:1.25rem!important}}@media (width<=640px){.nav-item{padding:.85rem 1rem;font-size:.9rem}.brand-3d-text{font-size:1.2rem}.touch-scroll-x{white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;overflow-x:auto}.touch-scroll-x::-webkit-scrollbar{display:none}button,input,select,textarea{touch-action:manipulation;min-height:40px}}