:root{--bg-primary:#fff;--bg-secondary:#f4f5f7;--bg-tertiary:#e2e8f0;--bg-sidebar:#0f172a;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;--text-inverse:#fff;--color-positive:#10b981;--color-positive-bg:#ecfdf5;--color-negative:#ef4444;--color-negative-bg:#fef2f2;--color-warning:#f59e0b;--color-warning-bg:#fffbeb;--color-info:#4f46e5;--color-info-bg:#e0e7ff;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--border-color:#e2e8f0;--border-light:#f1f5f9;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000000d, 0 2px 4px -1px #00000008;--shadow-lg:0 10px 15px -3px #0000000d, 0 4px 6px -2px #00000006;--sidebar-width:240px;--topbar-height:64px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-primary);background:var(--bg-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:22px}.login-page{min-height:100vh;padding:var(--space-lg);background:linear-gradient(135deg,#f8f9fa 0%,#fff 50%,#f0f2f5 100%);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.login-page:before{content:"";background:radial-gradient(circle,#1890ff08 0%,#0000 70%);border-radius:50%;width:600px;height:600px;position:absolute;top:-50%;right:-20%}.login-page:after{content:"";background:radial-gradient(circle,#52c41a08 0%,#0000 70%);border-radius:50%;width:500px;height:500px;position:absolute;bottom:-30%;left:-10%}.login-card{background:var(--bg-primary);border-radius:var(--radius-lg);width:100%;max-width:420px;box-shadow:var(--shadow-lg);z-index:1;padding:40px;animation:.5s ease-out fadeInUp;position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-logo{text-align:center;margin-bottom:32px}.login-logo .logo-icon{background:linear-gradient(135deg, var(--color-info), #096dd9);border-radius:var(--radius-md);justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 16px;display:flex}.login-logo .logo-icon svg{color:#fff;width:28px;height:28px}.login-logo h1{color:var(--text-primary);letter-spacing:-.3px;font-size:20px;font-weight:700}.login-logo p{color:var(--text-secondary);margin-top:4px;font-size:13px}.login-form{flex-direction:column;gap:20px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:var(--text-secondary);font-size:13px;font-weight:500}.input-wrapper{align-items:center;display:flex;position:relative}.input-wrapper .input-icon{color:var(--text-tertiary);pointer-events:none;display:flex;position:absolute;left:12px}.input-wrapper .input-icon svg{width:18px;height:18px}.input-wrapper input{border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;height:44px;color:var(--text-primary);background:var(--bg-primary);outline:none;padding:0 12px 0 40px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}.input-wrapper input::placeholder{color:var(--text-tertiary)}.input-wrapper input:focus{border-color:var(--color-info);box-shadow:0 0 0 3px #1890ff1a}.input-wrapper input.error{border-color:var(--color-negative);box-shadow:0 0 0 3px #ff4d4f1a}.input-wrapper .toggle-password{cursor:pointer;color:var(--text-tertiary);background:0 0;border:none;padding:4px;transition:color .2s;display:flex;position:absolute;right:12px}.input-wrapper .toggle-password:hover{color:var(--text-secondary)}.input-wrapper .toggle-password svg{width:18px;height:18px}.error-message{background:var(--color-negative-bg);border-radius:var(--radius-sm);color:var(--color-negative);border:1px solid #ff4d4f33;align-items:center;gap:8px;padding:10px 14px;font-size:13px;animation:.4s shakeX;display:none}.error-message.visible{display:flex}.error-message svg{flex-shrink:0;width:16px;height:16px}@keyframes shakeX{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.btn-login{background:linear-gradient(135deg, var(--color-info), #096dd9);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;height:44px;font-family:inherit;font-size:15px;font-weight:600;transition:all .2s;display:flex;position:relative;overflow:hidden}.btn-login:hover{background:linear-gradient(135deg,#40a9ff,#1890ff);transform:translateY(-1px);box-shadow:0 4px 14px #1890ff4d}.btn-login:active{transform:translateY(0);box-shadow:0 2px 6px #1890ff33}.btn-login.loading{pointer-events:none;opacity:.85}.btn-login .spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin;display:none}.btn-login.loading .spinner{display:block}.btn-login.loading .btn-text{display:none}@keyframes spin{to{transform:rotate(360deg)}}.login-footer{text-align:center;color:var(--text-tertiary);margin-top:32px;font-size:12px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInPage{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.filter-preset-group{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);gap:2px;padding:3px;display:flex}.filter-preset-btn{color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:4px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:500;transition:all .15s}.filter-preset-btn:hover{background:var(--bg-primary);color:var(--text-primary)}.date-range-picker{animation:.2s fadeIn}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.bar-chart-wrapper{flex:1;width:100%;height:260px;min-height:0;position:relative}.bar-chart-wrapper canvas{width:100%!important;height:100%!important}.leaderboard-list{max-height:280px;overflow-y:auto}.leaderboard-rank{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:11px;font-weight:700;display:flex}.leaderboard-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.leaderboard-meta{color:var(--text-tertiary);margin-top:1px;font-size:11px}.filter-select{border:1px solid var(--border-color);border-radius:var(--radius-sm);height:34px;color:var(--text-primary);background:var(--bg-primary);cursor:pointer;outline:none;padding:0 12px;font-family:inherit;font-size:13px;transition:border-color .2s}.filter-select:focus{border-color:var(--color-info)}.btn-export{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;padding:6px 14px;font-family:inherit;font-size:13px;transition:all .15s;display:flex}.btn-export:hover{border-color:var(--color-info);color:var(--color-info)}.btn-export svg{width:14px;height:14px}table{border-collapse:collapse;width:100%}thead{background:var(--bg-secondary)}th{text-align:left;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--border-light);white-space:nowrap;padding:12px 16px;font-size:11px;font-weight:600}td{color:var(--text-primary);border-bottom:1px solid var(--border-light);white-space:nowrap;font-variant-numeric:tabular-nums;padding:12px 16px;font-size:13px}tbody tr{transition:background .2s}tbody tr:nth-child(2n){background:#fafafa}tbody tr:hover{background:#f0f7ff}tbody tr:last-child td{border-bottom:none}.status-badge{border-radius:20px;align-items:center;gap:5px;padding:2px 10px;font-size:12px;font-weight:500;display:inline-flex}.status-badge.success{background:var(--color-positive-bg);color:var(--color-positive)}.status-badge .status-dot{border-radius:50%;width:6px;height:6px}.status-badge.success .status-dot{background:var(--color-positive)}.platform-tag{border-radius:4px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:500;display:inline-flex}.platform-tag.shopee{color:#ff6b00;background:#fff0e6}.platform-tag.tiktok{color:#7b00ff;background:#f0e6ff}.platform-tag.internal{background:var(--color-info-bg);color:var(--color-info)}.table-pagination{border-top:1px solid var(--border-light);color:var(--text-secondary);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;font-size:13px;display:flex}.pagination-controls{align-items:center;gap:4px;display:flex}.platform-logo.shopee{background:#fff0e6}.platform-logo.tiktok{background:#f0e6ff}.platform-logo.facebook{background:#e6f0ff}.profile-form{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form-field label{color:var(--text-secondary);font-size:12px;font-weight:500}.form-field input{border:1px solid var(--border-color);border-radius:var(--radius-sm);height:36px;color:var(--text-primary);background:var(--bg-primary);outline:none;padding:0 12px;font-family:inherit;font-size:13px;transition:border-color .2s}.form-field input:focus{border-color:var(--color-info)}.form-field input:disabled{background:var(--bg-secondary);color:var(--text-tertiary)}.toast-container{z-index:9999;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:24px;right:24px}.toast{border-radius:var(--radius-md);box-shadow:var(--shadow-lg);pointer-events:auto;align-items:center;gap:10px;max-width:360px;padding:12px 20px;font-size:13px;font-weight:500;animation:.3s forwards toastIn;display:flex}.toast.exiting{animation:.3s forwards toastOut}.toast.success{background:var(--color-positive);color:#fff}.toast.error{background:var(--color-negative);color:#fff}.toast.warning{background:var(--color-warning);color:#fff}.toast.info{background:var(--color-info);color:#fff}@keyframes toastIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080;justify-content:center;align-items:center;padding:24px;display:none;position:fixed;inset:0}.modal-overlay.active{display:flex}.modal-card{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:520px;animation:.3s cubic-bezier(.34,1.56,.64,1) modalIn;position:relative}@keyframes modalIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.modal-close{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;transition:color .15s;display:flex;position:absolute;top:16px;right:16px}.modal-close:hover{color:var(--text-primary)}.modal-close svg{width:18px;height:18px}.modal-header{align-items:center;gap:16px;padding:24px 24px 0;display:flex}.modal-title{color:var(--text-primary);font-size:18px;font-weight:700}.modal-subtitle{color:var(--text-secondary);margin-top:2px;font-size:13px}.modal-body{padding:0 24px 24px}.modal-footer{justify-content:flex-end;padding:0 24px 24px;display:flex}.login-page.hidden{display:none}@media (width<=900px){.profile-form{grid-template-columns:1fr}}@media (width<=480px){.login-card{padding:28px 20px}}.api-header-stats{gap:32px;display:flex}.platform-card{border-radius:var(--radius-lg);border:1px solid var(--border-color);background:#fff;transition:all .2s;overflow:hidden}.platform-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000014}.platform-card.connected{border-color:#10b9814d}.platform-logo{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.platform-logo svg{width:24px;height:24px}.platform-logo.shopee{color:#ff6b00;background:#fff0e6}.platform-logo.tiktok{color:#fff;background:linear-gradient(135deg,#00f2ea,#ff0050)}.platform-logo.lazada{color:#f53d2d;background:#fff5f5}.platform-logo.tiki{color:#1890ff;background:#e6f7ff}.platform-info{flex:1}.platform-info h3{color:var(--text-primary);margin:0 0 2px;font-size:16px;font-weight:600}.platform-info p{color:var(--text-tertiary);margin:0;font-family:monospace;font-size:12px}.platform-metrics{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px;display:grid}@media (width<=768px){.api-header-stats{justify-content:center}.platform-grid{grid-template-columns:1fr}}body.app-body{background:var(--bg-secondary);color:var(--text-primary);flex-direction:column;min-height:100vh;display:flex}body.login-body{background:linear-gradient(135deg,#f8f9fa 0%,#fff 50%,#f0f2f5 100%)}.topnav{z-index:50;background:var(--bg-primary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);position:sticky;top:0}.topnav-inner{align-items:center;gap:24px;max-width:1440px;margin:0 auto;padding:12px 24px;display:flex}.topnav-brand{color:var(--text-primary);flex-shrink:0;align-items:center;gap:12px;text-decoration:none;display:flex}.topnav-brand-logo{background:linear-gradient(135deg, var(--color-info), #096dd9);border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.topnav-brand-logo svg{color:#fff;width:18px;height:18px}.topnav-brand-text strong{font-size:15px;font-weight:700;line-height:1.1;display:block}.topnav-brand-text small{color:var(--text-tertiary);font-size:11px;display:block}.topnav-nav{flex:1;gap:4px;margin-left:8px;display:flex}.topnav-item{color:var(--text-secondary);border-radius:10px;align-items:center;gap:8px;padding:10px 14px;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:inline-flex;position:relative}.topnav-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.topnav-item.active{background:var(--color-info-bg);color:var(--color-info)}.topnav-icon{width:18px;height:18px;display:inline-flex}.topnav-icon svg{width:18px;height:18px}.topnav-locked{color:var(--text-tertiary);margin-left:6px;display:inline-flex}.topnav-locked svg{width:13px;height:13px}.topnav-user{align-items:center;gap:12px;display:flex}.topnav-user-block{background:var(--bg-secondary);border-radius:999px;align-items:center;gap:10px;padding:4px 10px 4px 4px;display:flex}.topnav-user-avatar{background:linear-gradient(135deg, var(--color-info), #096dd9);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-weight:600;display:flex}.topnav-user-name{font-size:13px;font-weight:600;line-height:1.1}.topnav-user-role{color:var(--text-tertiary);font-size:11px}.topnav-logout{border:1px solid var(--border-color);cursor:pointer;width:36px;height:36px;color:var(--text-secondary);background:0 0;border-radius:10px;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:flex}.topnav-logout:hover{background:var(--color-negative-bg);color:var(--color-negative);border-color:var(--color-negative)}.topnav-logout svg{width:16px;height:16px}.locale-toggle{border:1px solid var(--border-color);border-radius:10px;align-items:center;height:36px;display:flex;overflow:hidden}.locale-toggle-btn{cursor:pointer;letter-spacing:.02em;min-width:34px;height:100%;color:var(--text-secondary);background:0 0;border:0;padding:0 8px;font-size:12px;font-weight:600;transition:background .15s,color .15s}.locale-toggle-btn+.locale-toggle-btn{border-left:1px solid var(--border-color)}.locale-toggle-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.locale-toggle-btn.active{background:var(--color-primary,#4f46e5);color:#fff}.login-locale{z-index:10;position:fixed;top:20px;right:20px}.login-locale .locale-toggle{background:#ffffffe6}.page-shell{flex-direction:column;gap:24px;width:100%;max-width:1440px;margin:0 auto;padding:24px;display:flex}.appfooter{background:var(--bg-primary);border-top:1px solid var(--border-color);color:var(--text-tertiary);text-align:center;margin-top:auto;padding:16px 24px;font-size:12px}.appfooter-sep{margin:0 8px}.filterbar{background:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;display:flex}.page-h1{margin:0;font-size:1.25rem;font-weight:700;line-height:1.1}.page-sub{color:var(--text-tertiary);margin:4px 0 0;font-size:13px}.filterbar-right{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.filter-select-wrap{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.4px;flex-direction:column;gap:4px;font-size:11px;display:flex}.filter-select-wrap select,.filter-text{border:1px solid var(--border-color);background:var(--bg-primary);height:40px;color:var(--text-primary);font:inherit;border-radius:8px;min-width:160px;padding:0 10px}.filter-text{min-width:220px}.filter-preset-group{background:var(--bg-secondary);border-radius:10px;align-items:center;gap:2px;height:40px;padding:4px;display:inline-flex}.filter-preset-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:6px 12px;font-family:inherit;font-size:13px;font-weight:500;transition:background .15s,color .15s}.filter-preset-btn:hover{background:#0000000a}.filter-preset-btn.active{background:var(--bg-primary);color:var(--color-info);box-shadow:var(--shadow-sm)}.date-range-picker{border:1px solid var(--border-color);background:var(--bg-primary);border-radius:8px;align-items:center;gap:6px;height:40px;padding:4px 8px;display:inline-flex;position:relative}.btn-apply-range{background:var(--color-info);color:#fff;cursor:pointer;font:inherit;border:0;border-radius:6px;padding:4px 10px;font-size:12px}.alert-banner{border-radius:var(--radius-md);color:#92400e;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#f59e0b14,#f59e0b24);border:1px solid #f59e0b4d;align-items:center;gap:12px;padding:12px 16px;display:flex}.alert-banner[hidden]{display:none}.alert-icon{color:#f59e0b;background:#fff7ed;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;display:inline-flex}.alert-icon svg{width:14px;height:14px}.alert-text{flex:1;font-size:13px;line-height:1.4}.alert-dismiss{color:#92400e;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:4px}.alert-dismiss:hover{background:#92400e14}.alert-dismiss svg{width:16px;height:16px}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.kpi-card{background:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);padding:18px 18px 16px;position:relative;overflow:hidden}.kpi-card:after{content:"";opacity:.08;z-index:0;border-radius:50%;width:120px;height:120px;position:absolute;inset:auto -30px -30px auto}.kpi-card-blue:after{background:var(--color-info)}.kpi-card-violet:after{background:#7c3aed}.kpi-card-red:after{background:var(--color-negative)}.kpi-card-amber:after{background:var(--color-warning)}.kpi-card-green:after{background:var(--color-positive)}.kpi-card>*{z-index:1;position:relative}.kpi-card-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.kpi-card-label{text-transform:uppercase;letter-spacing:.4px;color:var(--text-tertiary);font-size:12px;font-weight:600}.kpi-card-icon{background:var(--color-info-bg);width:32px;height:32px;color:var(--color-info);border-radius:10px;justify-content:center;align-items:center;display:inline-flex}.kpi-card-blue .kpi-card-icon{color:#2563eb;background:#dbeafe}.kpi-card-violet .kpi-card-icon{color:#7c3aed;background:#ede9fe}.kpi-card-red .kpi-card-icon{color:#dc2626;background:#fee2e2}.kpi-card-amber .kpi-card-icon{color:#d97706;background:#fef3c7}.kpi-card-green .kpi-card-icon{color:#059669;background:#d1fae5}.kpi-card-icon svg{width:16px;height:16px}.kpi-card-value{color:var(--text-primary);font-size:1.6rem;font-weight:700;line-height:1.2}.kpi-card-meta{color:var(--text-tertiary);margin-top:6px;font-size:11.5px;line-height:1.4}.kpi-card-negative .kpi-card-value{color:var(--color-negative)}.kpi-card-negative .kpi-card-icon{color:#dc2626;background:#fee2e2}.panel{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:18px 18px 14px}.panel[hidden]{display:none}.panel-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.panel-head-title{align-items:center;gap:12px;display:flex}.panel-icon{background:var(--color-info-bg);width:36px;height:36px;color:var(--color-info);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.panel-icon.amber{color:#d97706;background:#fef3c7}.panel-icon.green{color:#059669;background:#d1fae5}.panel-icon svg{width:18px;height:18px}.panel-title{font-size:1rem;font-weight:600;line-height:1.1}.panel-sub{color:var(--text-tertiary);margin-top:4px;font-size:12px}.dual-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;display:grid}@media (width<=980px){.dual-grid{grid-template-columns:1fr}}.donut-wrap{aspect-ratio:1;width:100%;max-width:280px;margin:8px auto 12px;position:relative}.donut-center-label{pointer-events:none;text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.donut-center-cap{text-transform:uppercase;letter-spacing:.6px;color:var(--text-tertiary);font-size:11px}.donut-center-label strong{color:var(--text-primary);font-size:1.15rem}.donut-legend{gap:8px;margin:0;padding:0;list-style:none;display:grid}.donut-legend li{background:var(--bg-secondary);border-radius:8px;grid-template-columns:16px 1fr auto;align-items:center;gap:10px;padding:8px 10px;font-size:13px;display:grid}.donut-legend .dot{border-radius:4px;width:12px;height:12px}.donut-legend .legend-label{color:var(--text-secondary)}.donut-legend .legend-value{color:var(--text-primary);font-weight:600}.kpi-tracker{flex-direction:column;gap:14px;display:flex}.kpi-track-row{background:var(--bg-secondary);border-radius:10px;padding:12px 14px}.kpi-track-meta{justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;display:flex}.kpi-track-label{color:var(--text-primary);font-weight:600}.kpi-track-value{color:var(--text-secondary)}.kpi-track-value em{color:var(--text-tertiary);font-style:normal}.kpi-track-bar{background:#0000000f;border-radius:999px;height:8px;overflow:hidden}.kpi-track-bar span{border-radius:999px;height:100%;transition:width .4s;display:block}.kpi-track-foot{justify-content:space-between;align-items:center;margin-top:6px;font-size:12px;display:flex}.kpi-track-caption{color:var(--text-tertiary)}.badge{border-radius:999px;align-items:center;padding:3px 10px;font-size:11.5px;font-weight:600;display:inline-flex}.badge.good{color:#047857;background:#d1fae5}.badge.ok{color:#b45309;background:#fef3c7}.badge.bad{color:#b91c1c;background:#fee2e2}.badge.muted{background:var(--bg-tertiary);color:var(--text-tertiary)}.leaderboard-list{flex-direction:column;gap:8px;display:flex}.leaderboard-row-item{background:var(--bg-secondary);border-radius:10px;grid-template-columns:36px 1fr auto;align-items:center;gap:14px;padding:12px 14px;display:grid}.leaderboard-rank{background:var(--bg-primary);border:1px solid var(--border-color);width:36px;height:36px;color:var(--text-secondary);border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex}.leaderboard-row-item:first-child .leaderboard-rank{color:#fff;background:linear-gradient(135deg,#fef3c7,#f59e0b);border-color:#0000}.leaderboard-row-item:nth-child(2) .leaderboard-rank{color:#fff;background:linear-gradient(135deg,#e5e7eb,#9ca3af);border-color:#0000}.leaderboard-row-item:nth-child(3) .leaderboard-rank{color:#fff;background:linear-gradient(135deg,#fde68a,#d97706);border-color:#0000}.leaderboard-name{font-weight:600}.leaderboard-sub{color:var(--text-tertiary);margin-top:2px;font-size:12px}.roi-pill{background:var(--color-info-bg);color:var(--color-info);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600;display:inline-flex}.leaderboard-sub-mini{color:var(--text-tertiary);text-align:right;margin-top:2px;font-size:11px}.table-wrap{border-radius:10px;overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:13px}.data-table thead th{background:var(--bg-secondary);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.4px;text-align:left;border-bottom:1px solid var(--border-color);padding:10px 12px;font-size:11px}.data-table tbody td{border-bottom:1px solid var(--border-light);color:var(--text-secondary);vertical-align:middle;padding:12px}.data-table tbody tr:hover{background:var(--bg-secondary)}.data-table code{background:var(--bg-secondary);border-radius:6px;padding:2px 6px;font-size:12px}.data-table th.th-num,.data-table td.th-num,.th-num{text-align:right}.table-pagination{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px 4px 4px;display:flex}.pagination-info{color:var(--text-tertiary);font-size:12px}.pagination-controls{gap:4px;display:flex}.pg-btn{border:1px solid var(--border-color);background:var(--bg-primary);min-width:30px;height:30px;color:var(--text-secondary);cursor:pointer;border-radius:8px;font-family:inherit;font-size:12px}.pg-btn:hover{background:var(--bg-secondary)}.pg-btn.active{background:var(--color-info);color:#fff;border-color:var(--color-info)}.pg-btn:disabled{opacity:.5;cursor:not-allowed}.chip{text-transform:lowercase;border-radius:999px;align-items:center;padding:2px 10px;font-size:11.5px;font-weight:600;display:inline-flex}.chip-shopname{text-transform:none}.chip-shopee{color:#c2410c;background:#fff7ed}.chip-tiktok{color:#0369a1;background:#f0f9ff}.chip-internal{color:#475569;background:#f1f5f9}.chip-cash{color:#047857;background:#d1fae5}.chip-bank{color:#6d28d9;background:#ede9fe}.status-pill{border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:11.5px;font-weight:600;display:inline-flex}.status-pill:before{content:"";border-radius:50%;width:6px;height:6px}.status-completed{color:#047857;background:#d1fae5}.status-completed:before{background:#10b981}.status-pending{color:#b45309;background:#fef3c7}.status-pending:before{background:#f59e0b}.status-cancelled{color:#b91c1c;background:#fee2e2}.status-cancelled:before{background:#ef4444}.filter-select{border:1px solid var(--border-color);background:var(--bg-primary);height:36px;color:var(--text-primary);font:inherit;border-radius:8px;padding:0 10px}.btn-export,.btn-primary,.btn-ghost{font:inherit;cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;display:inline-flex}.btn-export,.btn-primary{background:var(--color-info);color:#fff}.btn-export:hover,.btn-primary:hover{background:#4338ca}.btn-export svg,.btn-primary svg,.btn-ghost svg{flex-shrink:0;width:14px;height:14px}.btn-ghost{background:var(--bg-primary);color:var(--text-secondary);border-color:var(--border-color)}.btn-ghost:hover{background:var(--bg-secondary)}.btn-ghost.small{padding:5px 10px;font-size:12px}.api-header{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:20px;display:flex}.api-header-stats{flex-wrap:wrap;gap:16px;display:flex}.stat-card{background:var(--bg-secondary);text-align:center;border-radius:10px;min-width:130px;padding:12px 16px}.stat-card strong{color:var(--color-info);font-size:1.5rem;line-height:1.2;display:block}.stat-card span{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.4px;font-size:11.5px}.platform-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.platform-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);flex-direction:column;display:flex;overflow:hidden}.platform-card.is-connected{box-shadow:0 0 0 1px #10b9814d}.platform-card-head{background:var(--bg-secondary);grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:12px;display:grid}.platform-logo{color:#fff;border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;font-weight:700;display:flex}.platform-shopee{background:linear-gradient(135deg,#fb923c,#ea580c)}.platform-tiktok{background:linear-gradient(135deg,#1f2937,#111827)}.platform-lazada{background:linear-gradient(135deg,#1e40af,#1e3a8a)}.platform-tiki{color:#1e293b;background:linear-gradient(135deg,#f1f5f9,#cbd5e1)}.platform-facebook{background:linear-gradient(135deg,#2563eb,#1d4ed8)}.platform-name{font-weight:600}.platform-sub{color:var(--text-tertiary);font-size:11.5px}.platform-stats{grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:12px;list-style:none;display:grid}.platform-stats li{text-align:center;background:var(--bg-secondary);border-radius:8px;padding:8px}.platform-stats span{font-size:14px;font-weight:600;display:block}.platform-stats em{color:var(--text-tertiary);font-size:11px;font-style:normal;display:block}.platform-card-foot{border-top:1px solid var(--border-light);justify-content:space-between;gap:8px;padding:12px;display:flex}.platform-card-foot .btn-primary,.platform-card-foot .btn-ghost{flex:1;justify-content:center}.apikey-list{overflow-x:auto}.apikey-code{background:var(--bg-secondary);color:var(--text-secondary);border-radius:6px;padding:4px 8px;font-size:12px}.apikey-table th{white-space:nowrap}.muted-text{color:var(--text-tertiary);font-size:12px}.user-form,.profile-form,.voucher-form,.kpi-targets{background:var(--bg-secondary);border:1px dashed var(--border-color);border-radius:10px;margin-bottom:12px;padding:14px}.form-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.form-grid .form-field.full{grid-column:1/-1}.form-field{flex-direction:column;gap:4px;display:flex}.form-field span{color:var(--text-secondary);font-size:12px;font-weight:500}.form-field em{color:var(--color-negative);margin-left:2px;font-style:normal}.form-field input,.form-field select,.form-field textarea{border:1px solid var(--border-color);background:var(--bg-primary);font:inherit;color:var(--text-primary);border-radius:8px;padding:9px 10px;transition:border-color .15s,box-shadow .15s}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--color-info);outline:none;box-shadow:0 0 0 3px #4f46e51f}.user-form-actions,.profile-actions{justify-content:flex-end;gap:8px;margin-top:12px;display:flex}.profile-actions.full{grid-column:1/-1}.user-form input:disabled,.user-form button:disabled{opacity:.5;pointer-events:none}.role-pill{border-radius:999px;align-items:center;padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex}.role-pill.admin{background:var(--color-info-bg);color:var(--color-info)}.role-pill.user{color:#0369a1;background:#e0f2fe}.toast-container{z-index:200;flex-direction:column;gap:10px;display:flex;position:fixed;top:80px;right:20px}.toast{background:var(--bg-primary);border:1px solid var(--border-color);border-left:4px solid var(--color-positive);box-shadow:var(--shadow-lg);border-radius:10px;align-items:center;gap:10px;min-width:240px;padding:12px 16px;font-size:13px;animation:.3s toastSlide;display:flex}.toast.success{border-left-color:var(--color-positive)}.toast.error{border-left-color:var(--color-negative)}.toast.warning{border-left-color:var(--color-warning)}.toast.info{border-left-color:var(--color-info)}.toast svg{flex-shrink:0;width:18px;height:18px}.toast.success svg{color:var(--color-positive)}.toast.error svg{color:var(--color-negative)}.toast.warning svg{color:var(--color-warning)}.toast.info svg{color:var(--color-info)}.toast.exiting{opacity:0;transition:opacity .3s,transform .3s;transform:translate(20px)}@keyframes toastSlide{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (width<=880px){.topnav-inner{gap:12px;padding:12px 16px}.topnav-nav{flex-wrap:wrap}.filterbar{flex-direction:column;align-items:stretch}.filterbar-right{justify-content:flex-start}.kpi-grid{grid-template-columns:1fr 1fr}}@media (width<=560px){.kpi-grid{grid-template-columns:1fr}.leaderboard-row-item{grid-template-columns:32px 1fr}.leaderboard-roi{grid-column:2/-1}.topnav-user-meta{display:none}}.kpi-card-trend{background:var(--bg-secondary);width:fit-content;color:var(--text-tertiary);border-radius:999px;align-items:center;gap:4px;margin-top:6px;padding:2px 8px;font-size:12px;font-weight:600;line-height:1.4;display:inline-flex}.kpi-card-trend.trend-up{background:var(--color-positive-bg);color:var(--color-positive)}.kpi-card-trend.trend-down{background:var(--color-negative-bg);color:var(--color-negative)}.kpi-card-trend.trend-flat{background:var(--bg-secondary);color:var(--text-tertiary)}.donut-status-rows{border-top:1px solid var(--bg-tertiary);flex-direction:column;gap:6px;margin-top:14px;padding-top:12px;display:flex}.donut-status-row{justify-content:space-between;align-items:center;font-size:13px;display:flex}.donut-status-label{color:var(--text-secondary)}.donut-status-value{font-weight:600}.donut-status-row.neg .donut-status-value{color:var(--color-negative)}.voucher-desc{max-width:280px;color:var(--text-secondary);font-size:13px}.data-table input.cell-input{border:1px solid var(--border-color);width:120px;font:inherit;text-align:right;background:var(--bg-primary);color:var(--text-primary);border-radius:6px;padding:6px 8px;font-size:13px}.data-table input.cell-input:focus{border-color:var(--color-info);outline:none}[hidden]{display:none!important}.range-display{font:inherit;color:var(--text-primary);cursor:pointer;white-space:nowrap;background:0 0;border:0;align-items:center;gap:6px;padding:4px 2px;font-size:13px;display:inline-flex}.range-display svg{width:15px;height:15px;color:var(--text-tertiary)}.range-calendar{z-index:80;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);border-radius:12px;padding:14px 16px;position:absolute;top:calc(100% + 8px);right:0}.rc-months{gap:24px;display:flex}.rc-month-title{text-align:center;margin-bottom:8px;font-size:13px;font-weight:600}.rc-grid{grid-template-columns:repeat(7,34px);row-gap:2px;display:grid}.rc-dow{color:var(--text-tertiary);text-align:center;text-transform:uppercase;padding:4px 0;font-size:11px}.rc-day{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;justify-content:center;align-items:center;height:32px;font-size:13px;display:flex}.rc-day:hover:not(.empty):not(.disabled):not(.sel){background:var(--bg-secondary)}.rc-day.empty{cursor:default}.rc-day.disabled{color:var(--text-tertiary);opacity:.45;cursor:not-allowed}.rc-day.today{color:var(--color-info);font-weight:700}.rc-day.in-range{background:var(--color-info-bg);border-radius:0}.rc-day.sel{background:var(--color-info);color:#fff;font-weight:600}.rc-day.sel-start{border-radius:8px 0 0 8px}.rc-day.sel-end{border-radius:0 8px 8px 0}.rc-day.sel-start.sel-end{border-radius:8px}.rc-nav{border:1px solid var(--border-color);background:var(--bg-primary);cursor:pointer;width:28px;height:28px;color:var(--text-secondary);border-radius:8px;font-size:16px;line-height:1;position:absolute;top:12px}.rc-nav:hover{background:var(--bg-secondary)}.rc-prev{left:12px}.rc-next{right:12px}@media (width<=760px){.rc-months{flex-direction:column;gap:12px}.range-calendar{left:0;right:auto}}.ledger-tabs{border-bottom:1px solid var(--color-border,#e5e7eb);gap:4px;margin-bottom:14px;display:flex}.ledger-tab{cursor:pointer;font:inherit;color:#6b7280;background:0 0;border:none;border-bottom:2px solid #0000;padding:9px 18px;font-weight:600}.ledger-tab.active{color:var(--color-info,#4f46e5);border-bottom-color:var(--color-info,#4f46e5)}.backlog-tabs .ledger-tab{font-size:14px}.pane-filters{flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:14px;display:flex}.export-cols-list{flex-direction:column;gap:2px;display:flex}.export-cols-row{cursor:pointer;align-items:center;gap:8px;padding:5px 2px;font-size:13.5px;display:flex}.export-cols-row input{cursor:pointer}.export-cols-all{border-bottom:1px solid var(--color-border,#e5e7eb);margin-bottom:6px;padding-bottom:8px;font-weight:600}.btn-export:disabled,.btn-primary:disabled,.btn-ghost:disabled{opacity:.5;cursor:not-allowed}