@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap");:root{--bg-from:#1e2d3d;--bg-to:#16232f;--surface:#fff;--surface-hover:#f0f6fc;--border:rgba(255,152,0,.4);--border-active:rgba(255,152,0,.8);--text-primary:#1a3a5e;--text-secondary:#2d5a8c;--text-muted:#5a7a9c;--accent:#ff9800;--accent-glow:rgba(255,152,0,.3);--accent-light:#ffb74d;--success:#4caf50;--success-bg:rgba(76,175,80,.12);--success-border:rgba(76,175,80,.3);--warning:#ffb300;--warning-bg:rgba(255,179,0,.12);--warning-border:rgba(255,179,0,.3);--danger:#f44336;--danger-bg:rgba(244,67,54,.12);--danger-border:rgba(244,67,54,.3);--card-radius:14px;--tab-radius:10px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(145deg,var(--bg-from) 0,var(--bg-to) 100%);background-attachment:fixed;color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:1.25rem .75rem 3rem;overflow-x:hidden;-webkit-text-size-adjust:100%}.dashboard-container{width:100%;max-width:960px;animation:fadeSlideUp .5s cubic-bezier(.16,1,.3,1) both}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.dashboard-header{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.5rem 1.5rem 2rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#e8f4fc,#d4e9f7);border:1px solid rgba(168,204,232,.6);border-radius:20px;position:relative;overflow:hidden}.header-logo{width:clamp(200px,32vw,300px);height:auto;margin-bottom:1rem;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,81,186,.15));animation:fadeSlideUp .5s cubic-bezier(.16,1,.3,1) both;display:block;background:transparent;padding:0;border:none;border-radius:0;box-shadow:none}.dashboard-header h1{font-size:clamp(1.6rem,5vw,2.5rem);font-weight:900;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(135deg,#0051ba 30%,#4a90e2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:.4rem}.dashboard-header h1 .title-id{background:linear-gradient(135deg,#e65100 30%,#ff9800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dashboard-header .subtitle{display:block!important;font-size:.85rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:.8rem}.dashboard-header .subtitle,.header-date{color:var(--text-secondary);font-weight:500}.header-date{font-size:.95rem;margin:.4rem 0 .8rem;opacity:.9}.dashboard-header .update-info,.dashboard-header p:not(.subtitle){display:none!important}.tabs-container{display:flex;gap:.4rem;margin-bottom:1.25rem;background:var(--surface);padding:4px;border-radius:calc(var(--tab-radius) + 4px);border:1px solid var(--border);width:100%;min-width:0}.tab-btn{flex:1 1;min-width:0;background:transparent;color:var(--text-secondary);border:none;padding:.6rem .5rem;border-radius:var(--tab-radius);font-family:inherit;font-weight:700;font-size:clamp(.65rem,2.2vw,.82rem);letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:40px;-webkit-tap-highlight-color:transparent}.tab-btn:hover{color:var(--text-primary);background:var(--surface-hover)}.tab-btn.active{background:var(--accent);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}.state-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 2rem;gap:1rem;color:var(--text-secondary)}.state-container.hidden{display:none}.spinner{width:36px;height:36px;border:3px solid hsla(0,0%,100%,.08);border-top:3px solid var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.error-icon{font-size:2.5rem}#error-message{color:var(--danger);font-weight:600}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:.55rem;gap:.55rem}.card-grid.grid-circle{grid-template-columns:repeat(3,1fr)}.card-grid.hidden{display:none}@media (max-width:720px){.card-grid,.card-grid.grid-circle{grid-template-columns:repeat(3,1fr);gap:.45rem}}@media (max-width:480px){.card-grid,.card-grid.grid-circle{grid-template-columns:repeat(3,1fr);gap:.35rem}}@media (max-width:360px){.card-grid,.card-grid.grid-circle{grid-template-columns:repeat(3,1fr);gap:.28rem}}.stock-card{background:var(--surface);border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:10px;padding:.6rem .65rem;display:flex;flex-direction:column;gap:.3rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,border-top-color .2s ease;position:relative;overflow:hidden;min-width:0;word-break:break-word}.stock-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,hsla(0,0%,100%,.03),transparent 60%);pointer-events:none;border-radius:inherit}.stock-card:hover{transform:translateY(-3px);border-color:var(--border-active);box-shadow:0 8px 32px rgba(0,0,0,.25),0 0 0 1px rgba(99,179,237,.1)}@media (hover:none){.stock-card:hover{transform:none;box-shadow:none}}.stock-card.card-available{border-left:3px solid var(--success)}.stock-card.card-low{border-left:3px solid var(--warning)}.stock-card.card-empty{border-top:3px solid var(--danger);border:3px solid var(--danger);opacity:.65}.card-header-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:.4rem}.card-title{font-size:clamp(.6rem,2.4vw,.92rem);font-weight:700;color:var(--text-primary);line-height:1.25;flex:1 1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.check-icon{width:14px;height:14px;min-width:14px;background:var(--success);border-radius:50%;justify-content:center;font-size:8px;color:#fff;box-shadow:0 0 6px rgba(16,185,129,.5)}.card-stock,.check-icon{display:flex;align-items:center}.card-stock{gap:.2rem;font-size:clamp(.58rem,1.8vw,.76rem);font-weight:600;color:var(--text-secondary);flex-wrap:wrap}.card-stock span{font-size:clamp(.82rem,2.8vw,1.1rem);font-weight:800;color:var(--success)!important}.card-stock.empty span{color:var(--danger)!important}.card-stock.empty{color:var(--danger)}.stock-habis{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger);font-size:clamp(.52rem,1.5vw,.6rem);font-weight:700;letter-spacing:.8px;padding:.08rem .3rem;border-radius:3px}.status-badge,.stock-habis{display:inline-block;text-transform:uppercase}.status-badge{font-size:clamp(.52rem,1.5vw,.65rem);font-weight:800;letter-spacing:1px;padding:.12rem .45rem;border-radius:4px;margin-top:.1rem}.status-badge.ready{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success)}.status-badge.empty{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger);font-weight:900}.circle-quota-box{background:#fff;color:var(--text-primary);font-size:clamp(.75rem,2.8vw,1.1rem);font-weight:800;padding:.35rem .45rem;border-radius:6px;text-align:center;margin-top:.25rem;box-shadow:0 2px 6px rgba(0,0,0,.1);border:1px solid rgba(0,0,0,.08)}.card-body{display:flex;flex-direction:column;gap:.15rem;margin-top:.15rem;border-top:1px solid var(--border);padding-top:.3rem}.area-row{display:flex;justify-content:space-between;align-items:center;padding:.12rem .25rem;border-radius:4px;transition:background .15s ease;gap:.2rem}.area-row:hover{background:var(--surface-hover)}.area-name{color:var(--text-secondary);font-size:clamp(.55rem,1.6vw,.72rem);font-weight:500;flex:1 1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.area-quota{color:var(--text-primary);font-size:clamp(.58rem,1.7vw,.78rem);font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}@keyframes cardIn{0%{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-row{animation:cardIn .35s cubic-bezier(.16,1,.3,1) both;opacity:0}@media (max-width:640px){body{padding:.75rem .5rem 2rem}.dashboard-container{padding:0}.dashboard-header{padding:1.25rem .85rem 1rem;border-radius:12px;margin-bottom:.85rem}.dashboard-header h1{letter-spacing:1px}}@media (max-width:480px){body{padding:.6rem .4rem 2rem}.stock-card{padding:.5rem .55rem;border-radius:8px}.tabs-container{gap:.3rem;padding:3px;margin-bottom:.85rem}}@media (max-width:360px){body{padding:.5rem .3rem 1.5rem}.stock-card{padding:.45rem}.tabs-container{gap:.2rem;padding:2px}}.kuota-wrapper{background:var(--surface);border-radius:16px;padding:1.75rem;box-shadow:0 4px 24px rgba(0,0,0,.08);max-width:480px;margin:0 auto;animation:fadeSlideUp .4s ease both}.kuota-form{display:flex;flex-direction:column;gap:1rem}.kuota-label{font-size:.85rem;font-weight:600;color:var(--text-secondary);letter-spacing:.5px}.kuota-input{width:100%;border:2px solid var(--border);border-radius:10px;padding:.85rem 1rem;font-family:inherit;font-size:1rem;font-weight:600;color:var(--text-primary);outline:none;transition:border-color .2s ease,box-shadow .2s ease}.kuota-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.kuota-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:.9rem;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:background .2s ease,transform .1s ease,box-shadow .2s ease;box-shadow:0 4px 16px var(--accent-glow)}.kuota-btn:hover:not(:disabled){background:#e68900;transform:translateY(-1px)}.kuota-btn:disabled{opacity:.65;cursor:not-allowed}.kuota-error{margin-top:1rem;background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger);border-radius:10px;padding:.85rem 1rem;font-weight:600;font-size:.9rem}.kuota-result{margin-top:1.5rem;animation:fadeSlideUp .35s ease both}.kuota-result-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--border)}.kuota-result-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:.75rem;gap:.75rem;margin-bottom:1.25rem}.kuota-stat{background:var(--surface-hover);border:1px solid var(--border);border-radius:10px;padding:.85rem;text-align:center}.kuota-stat-label{font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.35rem}.kuota-stat-value{font-size:1.3rem;font-weight:800;color:var(--text-primary)}.kuota-stat-value.success{color:var(--success)}.kuota-stat-value.danger{color:var(--danger)}.kuota-progress-label{display:flex;justify-content:space-between;font-size:.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:.4rem}.kuota-progress-bar{width:100%;height:10px;background:var(--surface-hover);border-radius:99px;overflow:hidden;border:1px solid var(--border)}.kuota-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent) 0,#ff6f00 100%);border-radius:99px;transition:width .6s cubic-bezier(.16,1,.3,1)}.kuota-subtabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:1.5rem}.kuota-subtab-btn{flex:1 1;background:transparent;padding:.75rem .5rem;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s}.kuota-subtab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.kuota-subtab-btn:hover:not(.active){color:var(--text-secondary)}.kuota-btn.validasi{background:var(--success);box-shadow:0 4px 16px rgba(76,175,80,.3)}.kuota-btn.validasi:hover:not(:disabled){background:#43a047}.validate-result{margin-top:1.25rem;border-radius:12px;padding:1.25rem;text-align:center;animation:fadeSlideUp .35s ease both}.validate-result.valid{background:var(--success-bg);border:2px solid var(--success-border)}.validate-result.invalid{background:var(--danger-bg);border:2px solid var(--danger-border)}.validate-icon{font-size:2.5rem;margin-bottom:.5rem}.validate-message{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.panduan-wrapper{display:flex;flex-direction:column;gap:1.5rem;max-width:480px;margin:0 auto;animation:fadeSlideUp .4s ease both}.panduan-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.5rem;box-shadow:0 4px 16px rgba(0,0,0,.06)}.panduan-card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.panduan-icon{font-size:1.5rem}.panduan-card-header h2{font-size:1.1rem;font-weight:800;color:var(--text-primary)}.panduan-desc{font-size:.9rem;color:var(--text-secondary);margin-bottom:1rem}.panduan-list{padding-left:1.25rem;margin-bottom:1rem}.panduan-list li{font-size:.9rem;color:var(--text-primary);margin-bottom:.5rem}.panduan-tip{display:flex;align-items:flex-start;gap:.5rem;background:var(--surface-hover);padding:.75rem;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--text-secondary)}.panduan-tip-icon{font-size:1.1rem}.panduan-footer{text-align:center;font-size:.85rem;color:var(--text-muted);margin-top:1rem}