:root{--bg-system: #f2f2f7;--bg-card: #ffffff;--bg-elevated: #ffffff;--bg-tertiary: #e5e5ea;--bg-hover: #f8f8fc;--text-primary: #1c1c1e;--text-secondary: #6c6c70;--text-tertiary: #8e8e93;--text-quaternary: #aeaeb2;--border-color: #e5e5ea;--border-subtle: #f2f2f7;--accent-blue: #007aff;--accent-blue-light: rgba(0, 122, 255, .1);--accent-indigo: #5856d6;--accent-indigo-light: rgba(88, 86, 214, .1);--accent-purple: #af52de;--accent-purple-light: rgba(175, 82, 222, .1);--accent-teal: #30b0c7;--accent-teal-light: rgba(48, 176, 199, .1);--status-success: #34c759;--status-success-light: rgba(52, 199, 89, .12);--status-warning: #ff9500;--status-warning-light: rgba(255, 149, 0, .12);--status-danger: #ff3b30;--status-danger-light: rgba(255, 59, 48, .12);--status-expired: #3a3a3c;--status-expired-light: rgba(58, 58, 60, .12);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06);--shadow-lg: 0 12px 28px rgba(0, 0, 0, .1);--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-heading: "Lexend", "Inter", sans-serif;--font-brand: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-system);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:600;color:var(--text-primary)}a{color:var(--accent-blue);text-decoration:none}.app-container{display:flex;height:100vh;max-height:100vh;overflow:hidden;background-color:var(--bg-system)}.desktop-sidebar{width:260px;height:100vh;flex-shrink:0;display:flex;flex-direction:column;position:relative;z-index:40}.main-wrapper{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;max-height:100vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.content-area{padding:24px 32px;flex:1;max-width:1400px;margin:0 auto;width:100%}.card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);padding:20px;transition:transform .2s ease,box-shadow .2s ease}.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-size:14px;font-weight:500;padding:10px 18px;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:all .15s ease}.btn-primary{background:var(--accent-blue);color:#fff}.btn-primary:hover{background:#0066d6}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background:#d8d8dc}.btn-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-primary)}.btn-outline:hover{background:var(--bg-hover)}.btn-danger{background:var(--status-danger-light);color:var(--status-danger)}.btn-danger:hover{background:#ff3b3033}.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-full)}.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--radius-full)}.badge-success{background:var(--status-success-light);color:var(--status-success)}.badge-warning{background:var(--status-warning-light);color:var(--status-warning)}.badge-danger{background:var(--status-danger-light);color:var(--status-danger)}.badge-expired{background:var(--status-expired-light);color:var(--status-expired)}.input{width:100%;padding:10px 14px;font-size:14px;font-family:var(--font-body);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#fff;color:var(--text-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px var(--accent-blue-light)}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.form-label{font-size:13px;font-weight:600;color:var(--text-secondary)}.grid-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.icon-box{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.table-container{background:#fff;border-radius:var(--radius-md);border:1px solid var(--border-color);overflow:hidden;box-shadow:var(--shadow-sm)}.table{width:100%;border-collapse:collapse;text-align:left}.table th{background:var(--bg-hover);padding:12px 16px;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-color)}.table td{padding:14px 16px;border-bottom:1px solid var(--border-subtle);font-size:14px}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:var(--bg-hover)}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100000;padding:20px}.modal-card{background:#fff;border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalPop .2s cubic-bezier(.16,1,.3,1)}@keyframes modalPop{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulseRing{0%{box-shadow:0 0 0 2px #007aff66,0 8px 32px #00000040}50%{box-shadow:0 0 0 8px #007aff33,0 12px 40px #00000059}to{box-shadow:0 0 0 2px #007aff66,0 8px 32px #00000040}}.desktop-only{display:block}.mobile-only{display:none!important}.desktop-table-container{display:block}.mobile-cards-container,.mobile-bottom-nav{display:none!important}.sheet-handle{display:none}.dashboard-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;width:100%}html,body,#root{width:100%;max-width:100%;overflow-x:clip;margin:0;padding:0}@media (max-width: 768px){html,body,#root{width:100vw!important;max-width:100vw!important;overflow-x:hidden!important}.app-container{flex-direction:column;height:auto!important;min-height:100vh!important;max-height:none!important;overflow:visible!important;width:100vw!important;max-width:100vw!important;overflow-x:hidden!important}.main-wrapper{height:auto!important;max-height:none!important;overflow-y:visible!important;width:100vw!important;max-width:100vw!important;min-width:0!important;overflow-x:hidden!important}.desktop-sidebar,.desktop-only{display:none!important}.mobile-only{display:block}.mobile-bottom-nav{display:flex!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;width:100vw!important;max-width:100vw!important;z-index:9999!important;pointer-events:auto!important}.desktop-table-container{display:none!important}.mobile-cards-container{display:flex!important;flex-direction:column;gap:10px;width:100%!important;max-width:100%!important}.mobile-cards-container .category-badge .category-badge-text,.category-badge-mobile-icon-only .category-badge-text,.category-badge-text.hide-on-mobile{display:none!important}.mobile-cards-container .category-badge,.category-badge-mobile-icon-only{padding:5px 6px!important;gap:0!important;justify-content:center!important;min-width:26px!important;height:26px!important;box-sizing:border-box!important}.content-area{padding:12px;padding-bottom:calc(76px + env(safe-area-inset-bottom,12px));width:100vw!important;max-width:100vw!important;min-width:0!important;overflow-x:hidden!important;box-sizing:border-box!important}.content-area>*{max-width:100%!important;box-sizing:border-box!important}.dashboard-action-grid{grid-template-columns:1fr!important;gap:12px!important}.grid-stats{grid-template-columns:repeat(2,1fr)!important;gap:8px!important;width:100%!important;max-width:100%!important}.grid-boxes{grid-template-columns:1fr!important;gap:10px!important;width:100%!important;max-width:100%!important}.card{border-radius:12px;padding:14px;width:100%!important;max-width:100%!important;box-sizing:border-box!important}.form-grid-responsive{grid-template-columns:1fr!important;gap:10px!important}.batch-row-responsive{grid-template-columns:1fr 1fr!important;gap:8px!important}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%!important}.modal-backdrop{align-items:flex-end;padding:0;z-index:100000!important}.modal-card{width:100%!important;max-width:100%!important;max-height:92vh!important;border-radius:20px 20px 0 0!important;padding:14px 16px 20px!important;padding-bottom:max(20px,calc(16px + env(safe-area-inset-bottom,16px)))!important;animation:slideUp .28s cubic-bezier(.16,1,.3,1)}.modal-card.modal-card-flush{padding:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;max-height:94vh!important}.sheet-handle{display:block;width:36px;height:4px;background:var(--border-color);border-radius:2px;margin:0 auto 12px}.btn-primary:not(.btn-compact),.btn-secondary:not(.btn-compact){min-height:42px}.quantity-adjuster-btn{width:30px!important;height:30px!important;min-height:30px!important;padding:0!important}.btn-compact{min-height:auto!important}.form-group .input,.form-group select,.form-group textarea{font-size:16px}.spotlight-backdrop{align-items:flex-start!important;padding:0!important}.spotlight-dialog{width:100vw!important;max-width:100vw!important;height:100vh!important;max-height:100vh!important;border-radius:0!important;padding:0!important;display:flex!important;flex-direction:column!important;box-shadow:none!important}.spotlight-header-bar{padding:14px 16px!important;padding-top:max(14px,env(safe-area-inset-top,14px))!important}.spotlight-results-list{flex:1!important;max-height:none!important;padding:12px!important;overflow-y:auto!important;padding-bottom:calc(40px + env(safe-area-inset-bottom,20px))!important}.spotlight-item-card{flex-direction:column!important;align-items:stretch!important;padding:12px!important;gap:8px!important}.spotlight-item-main{flex-direction:column!important;align-items:stretch!important;gap:6px!important}.spotlight-item-header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}.spotlight-item-actions{width:100%!important;margin-top:6px!important;gap:8px!important}.spotlight-item-actions .btn-consume{flex:1!important;height:38px!important;justify-content:center!important;font-size:13px!important}.spotlight-item-actions .btn-add{height:38px!important;padding:0 16px!important;font-size:13px!important}.spotlight-footer{display:none!important}}.spotlight-backdrop{align-items:flex-start;padding-top:60px}.spotlight-dialog{padding:0;overflow:hidden;max-width:680px;width:92%;box-shadow:0 20px 40px #0000002e;border-radius:var(--radius-lg);display:flex;flex-direction:column}.spotlight-header-bar{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-card)}.spotlight-results-list{max-height:440px;overflow-y:auto;padding:12px 16px}.spotlight-item-card{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px;margin-bottom:6px;background:var(--bg-card);border:1px solid var(--border-color);transition:all .1s ease;gap:12px}.spotlight-item-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.spotlight-item-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.spotlight-item-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.spotlight-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:var(--bg-system);border-top:1px solid var(--border-color);font-size:12px;color:var(--text-secondary)}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes itemHighlightPulse{0%{background-color:var(--accent-blue-light)!important;outline:2px solid var(--accent-blue);transform:scale(1.015)}40%{background-color:#007aff38!important;outline:3px solid var(--accent-blue)}to{background-color:transparent;outline:2px solid transparent;transform:scale(1)}}.highlight-item-pulse{animation:itemHighlightPulse 2.5s cubic-bezier(.16,1,.3,1)!important;transition:transform .2s ease,outline .2s ease}.landing-header{position:sticky;top:0;z-index:50;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;background-color:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color)}.landing-nav-links{display:flex;align-items:center;gap:6px}.landing-nav-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);text-decoration:none;line-height:1}.landing-nav-btn:hover{color:var(--accent-blue);background-color:#007aff14;border-color:#007aff38;box-shadow:0 2px 10px #007aff29,0 0 14px #007aff1f;transform:translateY(-1px)}.landing-nav-btn:active{transform:translateY(0);background-color:#007aff24}.landing-header-cta{transition:all .2s cubic-bezier(.16,1,.3,1)}.landing-header-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px #007aff73!important}.landing-lang-btn{padding:5px 10px;border-radius:6px;border:none;font-size:12px;cursor:pointer;transition:all .18s ease}.landing-lang-btn:hover:not(.active){background-color:#007aff1a;color:var(--accent-blue)}.landing-hero{padding:64px 20px 40px;text-align:center;max-width:960px;margin:0 auto}.landing-hero-title{font-size:clamp(28px,6vw,48px);font-weight:800;line-height:1.18;letter-spacing:-1px;margin-bottom:18px}.landing-hero-sub{font-size:clamp(15px,3.5vw,18px);color:var(--text-secondary);max-width:720px;margin:0 auto 32px;line-height:1.6}.landing-hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.landing-demo-section{padding:20px 16px 64px;max-width:1140px;margin:0 auto}.landing-demo-frame{background-color:#fff;border-radius:16px;box-shadow:0 24px 60px -12px #00000026;border:1px solid var(--border-color);overflow:hidden;display:flex;flex-direction:column}.landing-demo-body{display:flex;min-height:480px}.landing-demo-sidebar{width:220px;border-right:1px solid var(--border-color);background:var(--bg-system);padding:16px 12px;display:flex;flex-direction:column;gap:4px}.landing-demo-content{flex:1;padding:24px;background-color:#fff;display:flex;flex-direction:column;gap:18px;min-width:0}.landing-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.landing-table-wrapper{border:1px solid var(--border-color);border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}.landing-section{padding:64px 20px}.landing-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}@media (max-width: 768px){.landing-header{padding:12px 16px}.landing-nav-links,.landing-demo-sidebar{display:none!important}.landing-demo-content{padding:16px}.landing-kpi-grid{grid-template-columns:repeat(3,1fr);gap:8px}.landing-section{padding:40px 16px}.landing-hero-actions{flex-direction:column;width:100%;max-width:320px;margin:0 auto}.landing-hero-actions .btn{width:100%}}@media (max-width: 480px){.landing-kpi-grid{grid-template-columns:1fr}}