@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap";:root{--bg-color:#08080c;--bg-gradient:radial-gradient(circle at 50% 0%, #151522 0%, #08080c 70%);--panel-bg:#12121da6;--border-light:#ffffff14;--border-focus:#9333ea80;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--primary:#9333ea;--primary-glow:#9333ea59;--cyan:#06b6d4;--cyan-glow:#06b6d459;--emerald:#10b981;--emerald-glow:#10b9814d;--amber:#f59e0b;--rose:#ef4444;--font-sans:"Plus Jakarta Sans", sans-serif;--font-mono:"Share Tech Mono", monospace;--shadow-premium:0 8px 32px 0 #0000005e;--shadow-glow:0 0 15px #9333ea33}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);background-image:var(--bg-gradient);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}#root{text-align:left;border:none;flex-direction:column;width:100%;min-height:100vh;margin:0;display:flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}.glass-card{background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-light);box-shadow:var(--shadow-premium);border-radius:16px;padding:24px;transition:transform .2s,border-color .2s,box-shadow .2s}.glass-card:hover{border-color:#ffffff26}.glass-card.interactive:hover{box-shadow:0 12px 40px 0 #00000073, var(--shadow-glow);border-color:#9333ea40;transform:translateY(-2px)}.input-field{border:1px solid var(--border-light);width:100%;color:var(--text-primary);font-family:var(--font-sans);background:#ffffff08;border-radius:8px;outline:none;padding:12px 16px;font-size:14px;transition:all .2s}.input-field:focus{border-color:var(--border-focus);background:#ffffff0f;box-shadow:0 0 10px #9333ea26}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#9333ea 0%,#6b21a8 100%);border:none;border-radius:8px;padding:12px 24px;font-weight:600;transition:all .2s;box-shadow:0 4px 14px #9333ea66}.btn-primary:hover{box-shadow:0 6px 20px 0 #9333ea99, var(--shadow-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(1px)}.btn-primary:disabled{box-shadow:none;cursor:not-allowed;background:#4b5563;transform:none}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-light);cursor:pointer;background:#ffffff0d;border-radius:8px;padding:12px 24px;font-weight:600;transition:all .2s}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.status-dot{border-radius:50%;width:10px;height:10px;display:inline-block;position:relative}.status-dot.online{background-color:var(--emerald);box-shadow:0 0 8px var(--emerald)}.status-dot.online:after{content:"";border:2px solid var(--emerald);opacity:0;border-radius:50%;animation:1.8s infinite pulse;position:absolute;inset:-2px}.status-dot.offline{background-color:var(--rose);box-shadow:0 0 8px var(--rose)}@keyframes pulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}.premium-table{border-collapse:collapse;text-align:left;width:100%}.premium-table th{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-light);padding:16px;font-size:13px;font-weight:600}.premium-table td{color:var(--text-primary);border-bottom:1px solid #ffffff08;padding:16px;font-size:14px}.premium-table tr:hover td{background:#ffffff04}.vending-cabinet{background:linear-gradient(#1b1b22 0%,#0c0c10 100%);border:4px solid #374151;border-radius:12px;flex-direction:column;gap:15px;width:100%;max-width:380px;padding:20px;display:flex;position:relative;box-shadow:0 25px 50px -12px #000c}.vending-glass{background:linear-gradient(135deg,#ffffff0d 0%,#ffffff03 100%);border:3px solid #1f2937;border-radius:8px;grid-template-columns:repeat(2,1fr);gap:10px;height:240px;padding:12px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #000c}.vending-glass:before{content:"";pointer-events:none;background:linear-gradient(115deg,#ffffff14 0%,#fff0 30%,#ffffff08 70%,#fff0 100%);position:absolute;inset:0}.vending-slot-item{background:#ffffff05;border:1px solid #ffffff0a;border-radius:6px;flex-direction:column;justify-content:space-between;align-items:center;padding:8px;transition:transform .2s;display:flex;position:relative}.vending-slot-item.active:hover{background:#9333ea0d;border-color:#9333ea33;transform:scale(1.03)}.vending-slot-item .slot-code-label{font-family:var(--font-mono);color:#f3f4f6;background:#374151;border-radius:3px;padding:2px 4px;font-size:10px;font-weight:700;position:absolute;top:4px;left:4px}.vending-slot-item .stock-pills{justify-content:center;gap:2px;width:100%;margin-top:4px;display:flex}.vending-slot-item .stock-pill{background:#fff3;border-radius:50%;width:6px;height:6px}.vending-slot-item .stock-pill.filled{background:var(--cyan)}.vending-slot-item .stock-pill.alert{background:var(--rose)}.vending-keypad{background:#111827;border:1px solid #374151;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;display:grid}.keypad-btn{color:#fff;font-family:var(--font-mono);cursor:pointer;background:linear-gradient(#374151 0%,#1f2937 100%);border:1px solid #4b5563;border-radius:4px;padding:10px;font-size:14px;font-weight:700;transition:all .1s;box-shadow:0 2px #111827}.keypad-btn:active{box-shadow:none;transform:translateY(2px)}.vending-lcd{font-family:var(--font-mono);color:#34d399;text-shadow:0 0 6px #059669;background:#022c22;border:2px solid #065f46;border-radius:6px;flex-direction:column;justify-content:center;height:70px;padding:12px;font-size:13px;line-height:1.4;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 10px #000c}.vending-lcd:after{content:"";pointer-events:none;background:linear-gradient(#12101000 50%,#00000040 50%) 0 0/100% 4px,linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f) 0 0/6px 100%;position:absolute;inset:0}.dispensing-door{background:#0f172a;border:2px solid #374151;border-radius:8px;justify-content:center;align-items:center;height:60px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 5px 15px #000c}.dispensing-flap{z-index:10;transform-origin:top;background:linear-gradient(#1e293b 0%,#0f172a 100%);border-bottom:2px solid #475569;transition:transform .8s ease-in-out;position:absolute;inset:0}.dispensing-flap.open{transform:rotateX(-75deg)}.dispensed-item{background:var(--cyan);width:25px;height:40px;box-shadow:0 0 10px var(--cyan-glow);z-index:5;color:#000;border-radius:4px;justify-content:center;align-items:center;font-size:8px;font-weight:700;animation:.6s ease-in-out forwards dropItem;display:flex}@keyframes dropItem{0%{opacity:0;transform:translateY(-60px)rotate(0)}60%{opacity:1;transform:translateY(10px)rotate(15deg)}80%{transform:translateY(5px)rotate(5deg)}to{transform:translateY(8px)rotate(10deg)}}.layout-container{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--border-light);background:#0a0a12e6;flex-direction:column;gap:30px;width:260px;padding:30px 20px;display:flex}.sidebar-logo{letter-spacing:-.5px;background:linear-gradient(135deg,#a855f7 0%,#06b6d4 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:10px;font-size:20px;font-weight:700;display:flex}.sidebar-menu{flex-direction:column;flex:1;gap:8px;display:flex}.sidebar-link{color:var(--text-secondary);cursor:pointer;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.sidebar-link:hover{color:var(--text-primary);background:#ffffff08}.sidebar-link.active{color:#d8b4fe;background:#9333ea1a;border:1px solid #9333ea26}.main-content{flex:1;padding:40px;overflow-y:auto}