@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap";:root{--primary:#2563eb;--primary-hover:#1d4ed8;--primary-active:#1e40af;--primary-dark:#1e3a8a;--primary-light:#eff6ff;--primary-subtle:#dbeafe;--primary-gradient:linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);--brand-gradient:linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);--accent-cyan:#06b6d4;--accent-purple:#8b5cf6;--accent-pink:#ec4899;--bg-main:#f8fafc;--bg-subtle:#f1f5f9;--bg-muted:#e2e8f0;--card-bg:#fff;--card-bg-translucent:#ffffffd9;--text-main:#0f172a;--text-color:#0f172a;--text-body:#334155;--text-muted:#64748b;--text-light:#94a3b8;--text-subtle:#cbd5e1;--border-color:#e2e8f0;--border-light:#f1f5f9;--border-focus:#93c5fd;--success:#16a34a;--success-bg:#dcfce7;--success-border:#bbf7d0;--success-text:#15803d;--warning:#d97706;--warning-bg:#fef3c7;--warning-border:#fde68a;--warning-text:#b45309;--danger:#dc2626;--danger-bg:#fee2e2;--danger-border:#fecaca;--danger-text:#b91c1c;--purple-bg:#f3e8ff;--purple-border:#e9d5ff;--purple-text:#7e22ce;--indigo-bg:#e0e7ff;--indigo-border:#c7d2fe;--indigo-text:#4338ca;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--radius-pill:9999px;--shadow-xs:0 1px 2px 0 #0f172a0d;--shadow-sm:0 1px 3px 0 #0f172a14, 0 1px 2px -1px #0f172a0d;--shadow-card:0 4px 20px -2px #0f172a0d, 0 2px 6px -1px #0f172a08;--shadow-float:0 10px 30px -4px #0f172a14, 0 4px 12px -2px #0f172a0a;--shadow-lg:0 20px 40px -8px #0f172a26, 0 8px 16px -4px #0f172a0f;--shadow-glow:0 0 20px #2563eb40;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-smooth:.35s cubic-bezier(.16, 1, .3, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-main);width:100%;min-height:100%;color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;margin:0;padding:0;font-family:Plus Jakarta Sans,Inter,system-ui,-apple-system,sans-serif;line-height:1.5;overflow-x:hidden}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}img,video,svg{vertical-align:middle;max-width:100%;display:inline-block}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit;font-size:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.app-container{background-color:var(--bg-main);width:100%;min-height:100vh;display:flex;position:relative}.sidebar-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;opacity:0;visibility:hidden;transition:all var(--transition-normal);background:#0f172a99;position:fixed;inset:0}.sidebar-overlay.active{opacity:1;visibility:visible}.sidebar{color:#94a3b8;z-index:100;width:270px;min-width:270px;height:100vh;max-height:100vh;transition:transform var(--transition-smooth);background:#090d16;border-right:1px solid #1a2234;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;overflow:hidden;box-shadow:4px 0 24px #0003}.sidebar-header{background:#090d16;border-bottom:1px solid #1a2234;flex-shrink:0;justify-content:space-between;align-items:center;padding:18px;display:flex}.brand-wrapper{align-items:center;gap:12px;display:flex}.logo-badge{color:#fff;background:linear-gradient(135deg,#2563eb 0%,#38bdf8 100%);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex;box-shadow:0 0 16px #2563eb66}.brand-info{flex-direction:column;display:flex}.brand-title{color:#fff;letter-spacing:-.3px;margin:0;font-size:16px;font-weight:800;line-height:1.2}.brand-subtitle{color:#64748b;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.sidebar-close-btn{color:#94a3b8;cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition-fast);background:0 0;border:none;padding:6px;display:none}.sidebar-close-btn:hover{color:#fff;background:#1e293b}.sidebar-nav{flex-direction:column;flex:1;gap:4px;min-height:0;padding:16px 12px;display:flex;overflow:hidden auto}.sidebar-nav::-webkit-scrollbar{width:4px}.sidebar-nav::-webkit-scrollbar-thumb{background:#1e293b;border-radius:4px}.sidebar-nav::-webkit-scrollbar-thumb:hover{background:#334155}.nav-section-title{color:#475569;text-transform:uppercase;letter-spacing:.8px;padding:14px 12px 6px;font-size:10.5px;font-weight:700}.nav-section-title:first-child{padding-top:2px}.nav-item{color:#94a3b8;cursor:pointer;text-align:left;width:100%;transition:all var(--transition-fast);background:0 0;border:none;border-radius:10px;align-items:center;gap:12px;padding:10px 14px;font-size:13.5px;font-weight:500;display:flex;position:relative}.nav-item-icon{color:#64748b;transition:color var(--transition-fast), transform var(--transition-fast);flex-shrink:0}.nav-item:hover{color:#f1f5f9;background:#141c2e}.nav-item:hover .nav-item-icon{color:#38bdf8;transform:scale(1.05)}.nav-item.active{color:#60a5fa;background:linear-gradient(90deg,#2563eb33 0%,#2563eb0d 100%);border:1px solid #3b82f640;font-weight:700}.nav-item.active .nav-item-icon{color:#38bdf8}.nav-item-indicator{background:#38bdf8;border-radius:50%;width:6px;height:6px;position:absolute;right:12px;box-shadow:0 0 8px #38bdf8}.sidebar-footer{background:#090d16;border-top:1px solid #1a2234;flex-direction:column;flex-shrink:0;gap:12px;padding:16px;display:flex}.sidebar-user-card{background:#111827;border:1px solid #1e293b;border-radius:10px;align-items:center;gap:10px;padding:6px 8px;display:flex}.sidebar-user-avatar{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:700;display:flex}.sidebar-user-info{flex:1;min-width:0}.sidebar-user-name{color:#f1f5f9;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;font-weight:700;overflow:hidden}.sidebar-user-status{color:#10b981;align-items:center;gap:6px;font-size:11px;font-weight:600;display:flex}.status-dot-pulse{background:#10b981;border-radius:50%;width:6px;height:6px;display:inline-block;box-shadow:0 0 8px #10b981}.btn-sidebar-logout{color:#cbd5e1;cursor:pointer;width:100%;transition:all var(--transition-fast);background:#1e293b;border:1px solid #334155;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px;font-weight:600;display:flex}.btn-sidebar-logout:hover{color:#fff;background:#dc2626;border-color:#dc2626}.main-wrapper{background:var(--bg-main);flex-direction:column;flex:1;width:calc(100% - 270px);min-width:0;max-width:calc(100% - 270px);margin-left:270px;display:flex;position:relative}.top-header{-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color);z-index:80;background:#ffffffe0;justify-content:space-between;align-items:center;gap:16px;height:68px;padding:0 28px;display:flex;position:sticky;top:0;box-shadow:0 1px 3px #00000005}.header-left{flex:1;align-items:center;gap:16px;min-width:0;max-width:480px;display:flex}.mobile-menu-btn{background:var(--bg-subtle);border:1px solid var(--border-color);color:var(--text-main);border-radius:var(--radius-sm);cursor:pointer;justify-content:center;align-items:center;padding:8px;display:none}.header-search{background:var(--bg-subtle);border:1px solid var(--border-color);border-radius:var(--radius-pill);width:100%;transition:all var(--transition-fast);align-items:center;gap:10px;padding:8px 16px;display:flex}.header-search:focus-within{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #2563eb1f}.header-search-icon{color:var(--text-muted);flex-shrink:0}.header-search input{width:100%;color:var(--text-main);background:0 0;border:none;outline:none;font-size:13.5px}.header-search input::placeholder{color:var(--text-light)}.search-clear-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;align-items:center;padding:2px;display:flex}.header-actions{flex-shrink:0;align-items:center;gap:12px;display:flex}.header-api-btn{background:var(--bg-subtle);border:1px solid var(--border-color);border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-family:monospace;font-size:12px;display:flex}.header-api-icon{color:var(--primary)}.header-role-badge{align-items:center;gap:6px;font-size:11px;font-weight:700;display:inline-flex}.user-badge{border-radius:var(--radius-pill);background:var(--bg-subtle);border:1px solid var(--border-color);align-items:center;gap:10px;padding:4px 12px 4px 4px;display:flex}.user-avatar{color:#fff;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:700;display:flex;box-shadow:0 2px 6px #2563eb4d}.user-badge-info{flex-direction:column;display:flex}.user-badge-name{color:var(--text-main);font-size:13px;font-weight:700;line-height:1.2}.user-badge-mobile{color:var(--text-muted);font-size:11px;font-weight:500}.content-area{flex:1;width:100%;min-width:0;max-width:1440px;margin:0 auto;padding:28px}.page-container{flex-direction:column;gap:20px;width:100%;min-width:0;display:flex}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.page-title{color:var(--text-main);letter-spacing:-.5px;align-items:center;gap:10px;margin:0;font-size:24px;font-weight:800;display:flex}.page-subtitle{color:var(--text-muted);margin-top:4px;font-size:13.5px;font-weight:400}.card{background:var(--card-bg);border-radius:var(--radius-md);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-fast), border-color var(--transition-fast);min-width:0;padding:20px;position:relative}.card:hover{box-shadow:var(--shadow-card)}.card-header{border-bottom:1px solid var(--border-color);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.card-title{color:var(--text-main);margin:0;font-size:16px;font-weight:700}.card-body{padding:20px}.stat-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;display:grid}.stat-card{background:var(--card-bg);border-radius:var(--radius-md);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast), box-shadow var(--transition-fast);align-items:center;gap:16px;min-width:0;padding:18px 20px;display:flex}.stat-card:hover{box-shadow:var(--shadow-float);border-color:#cbd5e1;transform:translateY(-2px)}.stat-icon{background:var(--primary-light);width:48px;height:48px;color:var(--primary);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.stat-value{color:var(--text-main);letter-spacing:-.5px;font-size:26px;font-weight:800;line-height:1.1}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:12px;font-weight:600;overflow:hidden}.grid-cards-auto{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;width:100%;display:grid}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:9px 16px;font-family:inherit;font-size:13.5px;font-weight:600;line-height:1.2;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 1px 3px #2563eb33}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #2563eb59}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{color:var(--text-main);border-color:var(--border-color);box-shadow:var(--shadow-xs);background:#fff}.btn-secondary:hover:not(:disabled){background:var(--bg-subtle);border-color:#cbd5e1}.btn-success{color:#fff;background:#16a34a}.btn-success:hover:not(:disabled){background:#15803d}.btn-danger{color:#fff;background:#dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-sm{border-radius:var(--radius-xs);gap:6px;padding:6px 12px;font-size:12px}.btn-lg{border-radius:var(--radius-md);padding:12px 22px;font-size:15px}.btn-icon{border-radius:var(--radius-sm);border:1px solid var(--border-color);color:var(--text-muted);background:0 0;padding:7px}.btn-icon:hover{background:var(--bg-subtle);color:var(--text-main)}.form-group{flex-direction:column;margin-bottom:16px;display:flex}.form-label{color:var(--text-main);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-control,.form-select,select.form-control,textarea.form-control{border-radius:var(--radius-sm);border:1px solid var(--border-color);width:100%;color:var(--text-main);transition:all var(--transition-fast);box-shadow:var(--shadow-xs);background:#fff;outline:none;padding:9px 13px;font-family:inherit;font-size:13.5px}.form-control:focus,.form-select:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #2563eb26}.form-control::placeholder{color:var(--text-light)}.table-container{-webkit-overflow-scrolling:touch;width:100%;position:relative;overflow-x:auto}.data-table{border-collapse:collapse;text-align:left;width:100%;font-size:13.5px}.data-table thead tr{border-bottom:1px solid var(--border-color);background:#f8fafc}.data-table th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;padding:12px 16px;font-size:11.5px;font-weight:700}.data-table td{border-bottom:1px solid var(--border-color);vertical-align:middle;color:var(--text-body);padding:14px 16px}.data-table tbody tr{transition:background-color var(--transition-fast)}.data-table tbody tr:hover{background-color:#f8fafc}.badge{border-radius:var(--radius-pill);letter-spacing:.2px;white-space:nowrap;align-items:center;gap:6px;padding:4px 10px;font-size:11.5px;font-weight:700;line-height:1.2;display:inline-flex}.badge-published,.badge-success,.badge-active,.badge-approved,.badge-paid{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}.badge-pending,.badge-warning,.badge-review{background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border)}.badge-rejected,.badge-danger,.badge-failed,.badge-expired,.badge-inactive{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger-border)}.badge-purple{background:var(--purple-bg);color:var(--purple-text);border:1px solid var(--purple-border)}.badge-indigo{background:var(--indigo-bg);color:var(--indigo-text);border:1px solid var(--indigo-border)}.badge-draft,.badge-default,.badge-muted{background:var(--bg-subtle);color:var(--text-muted);border:1px solid var(--border-color)}.modal-overlay{-webkit-backdrop-filter:blur(6px);z-index:200;background:#0f172a99;justify-content:center;align-items:center;padding:20px;animation:.15s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);background:#fff;width:100%;max-width:620px;max-height:90vh;padding:24px;animation:.2s cubic-bezier(.16,1,.3,1) modalScaleUp;position:relative;overflow-y:auto}.modal-dialog-sm{max-width:460px}.modal-dialog-md{max-width:620px}.modal-dialog-lg{max-width:840px}.modal-dialog-xl{max-width:1080px}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;display:flex}.modal-title{color:var(--text-main);letter-spacing:-.3px;margin:0;font-size:18px;font-weight:800}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalScaleUp{0%{opacity:0;transform:scale(.96)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.animate-spin,.spin-animation{animation:.85s linear infinite spin}.truncate-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (width<=1024px){.sidebar{position:fixed;top:0;bottom:0;left:-280px;transform:translate(0)}.sidebar.open{transform:translate(280px)}.main-wrapper{width:100%;max-width:100%;margin-left:0}.sidebar-close-btn,.mobile-menu-btn{display:flex}.content-area{padding:20px 16px}.top-header{padding:0 16px}}@media (width<=768px){.top-header{height:60px}.header-actions .header-api-btn,.header-role-badge,.user-badge-mobile{display:none}.stat-grid{grid-template-columns:1fr}.page-header{flex-direction:column;align-items:stretch}.page-title{font-size:20px}.grid-cards-auto{grid-template-columns:1fr}.modal-overlay{padding:12px}.modal-content{padding:16px}}