@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";:root{--primary:#22c55e;--primary-hover:#16a34a;--primary-soft:#f0fdf4;--secondary:#64748b;--background:#f8fafc;--surface:#fff;--text-main:#0f172a;--text-muted:#64748b;--border:#e2e8f0;--shadow:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--sidebar-width:260px;--bottom-nav-height:64px;--radius:12px;--touch-target:44px}[data-theme=dark]{--primary-soft:#052e16;--background:#0f172a;--surface:#1e293b;--text-main:#f1f5f9;--text-muted:#94a3b8;--border:#334155;--shadow:0 4px 6px -1px #0000004d, 0 2px 4px -2px #0003;--shadow-lg:0 10px 15px -3px #0000004d, 0 4px 6px -4px #0003}[data-theme=dark] .glass{background:#1e293bcc;border:1px solid #33415580}[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{color:#f1f5f9;background:#1e293b;border-color:#334155}[data-theme=dark] input:focus,[data-theme=dark] select:focus,[data-theme=dark] textarea:focus{border-color:var(--primary)}[data-theme=dark] .stat-icon.green{color:#4ade80;background:#052e16}[data-theme=dark] .stat-icon.blue{color:#60a5fa;background:#172554}[data-theme=dark] .stat-icon.purple{color:#c084fc;background:#3b0764}[data-theme=dark] .stat-icon.orange{color:#fb923c;background:#431407}[data-theme=dark] .progress-container{background:#334155}[data-theme=dark] .info-badge{color:#94a3b8;background:#334155}[data-theme=dark] .info-badge.success{color:#4ade80;background:#052e16}[data-theme=dark] .current-date{background:#1e293b;border-color:#334155}[data-theme=dark] .current-date input{color:#f1f5f9}[data-theme=dark] .reminder-banner{background:linear-gradient(135deg,#422006 0%,#1c1917 100%);border-color:#78350f}[data-theme=dark] .reminder-text strong{color:#fbbf24}[data-theme=dark] .reminder-text span{color:#d97706}[data-theme=dark] .data-table th{color:#94a3b8;border-color:#334155}[data-theme=dark] .data-table td{border-color:#334155}[data-theme=dark] .smart-fields,[data-theme=dark] .form-hint{background:#0f172a}[data-theme=dark] .cat-badge.marketing{color:#4ade80;background:#052e16}[data-theme=dark] .cat-badge.sales{color:#60a5fa;background:#172554}[data-theme=dark] .cat-badge.operasional{color:#fbbf24;background:#422006}[data-theme=dark] .cat-badge.amaliyah{color:#c084fc;background:#3b0764}[data-theme=dark] .cat-badge.kebersihan{color:#2dd4bf;background:#042f2e}[data-theme=dark] .status-badge.active{color:#4ade80;background:#052e16}[data-theme=dark] .status-badge.nonactive{color:#94a3b8;background:#334155}[data-theme=dark] .row-disabled,[data-theme=dark] .target-item:hover{background:#1e293b}[data-theme=dark] .hint-box{color:#fbbf24;background:#422006;border-color:#78350f}[data-theme=dark] .profile-card{background:linear-gradient(135deg,#052e16,#0f172a);border-color:#22c55e33}[data-theme=dark] .info-item{background:#0f172a;border-color:#334155}[data-theme=dark] .info-icon{background:#1e293b;border-color:#334155}[data-theme=dark] .team-card{background:#0f172a;border-color:#334155}[data-theme=dark] .team-card:hover{border-color:var(--primary);background:#1e293b}[data-theme=dark] .about-item{background:#0f172a;border-color:#334155}[data-theme=dark] .footer-credit{color:#f472b6;background:#1e1225}[data-theme=dark] .color-chip{background:#1e293b;border-color:#334155}[data-theme=dark] .color-chip.selected{background:#052e16}[data-theme=dark] .theme-card{color:#94a3b8;background:#1e293b;border-color:#334155}[data-theme=dark] .theme-card.selected{color:var(--primary);border-color:var(--primary);background:#052e16}[data-theme=dark] .search-box input,[data-theme=dark] .filter-box select{color:#f1f5f9;background:#1e293b;border-color:#334155}[data-theme=dark] .card-footer{background:#0f172a}[data-theme=dark] .btn-cancel{color:#94a3b8;background:#334155}[data-theme=dark] .btn-cancel:hover{background:#475569}[data-theme=dark] .role-select{color:#f1f5f9;background:#1e293b;border-color:#334155}[data-theme=dark] .toggle-btn.active{color:#4ade80;background:#052e16}[data-theme=dark] .toggle-btn.inactive{color:#94a3b8;background:#334155}[data-theme=dark] .trend-badge.up{color:#4ade80;background:#052e16}[data-theme=dark] .trend-badge.down{color:#f87171;background:#450a0a}[data-theme=dark] .trend-badge.neutral{color:#94a3b8;background:#334155}[data-theme=dark] .user-badge{background:#334155}[data-theme=dark] .badge-outline,[data-theme=dark] .upload-area{border-color:#475569}[data-theme=dark] .preview-container{background:#0f172a;border-color:#334155}[data-theme=dark] .rank-card:hover{box-shadow:0 8px 24px #0000004d}[data-theme=dark] .period-tabs{background:#1e293b80}[data-theme=dark] .period-tabs button.active,[data-theme=dark] .add-modal{background:#1e293b}[data-theme=dark] .add-error,[data-theme=dark] .error-badge{color:#f87171;background:#450a0a}[data-theme=dark] .success-toast{color:#4ade80;background:#052e16}[data-theme=dark] .summary-card{border-color:#334155}[data-theme=dark] .alert-info{border-color:var(--primary);background:#052e16}[data-theme=dark] .alert-info p{color:#4ade80}[data-theme=dark] .loading-screen{color:#94a3b8;background:#0f172a}*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}body,input,select,textarea,button{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Poppins,sans-serif;transition:background-color .3s,color .3s}body{background-color:var(--background);color:var(--text-main);overscroll-behavior-y:none;line-height:1.5;overflow-x:hidden}button,.btn,.tab,.nav-item{-webkit-user-select:none;user-select:none}button{cursor:pointer;background:0 0;border:none;transition:all .2s}a{color:inherit;text-decoration:none}.glass{-webkit-backdrop-filter:blur(8px);background:#fffc;border:1px solid #ffffff4d}.card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);padding:1.5rem;transition:background-color .3s,border-color .3s}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius);padding:.75rem 1.5rem;font-weight:600}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.font-bold{font-weight:700}.btn-primary{align-items:center;gap:.5rem;display:flex}.data-table{border-collapse:collapse;text-align:left;width:100%}.data-table th{border-bottom:2px solid var(--border);color:var(--text-muted);white-space:nowrap;padding:1rem;font-size:.875rem;font-weight:600}.data-table td{border-bottom:1px solid var(--border);vertical-align:middle;padding:1rem}.table-container{-webkit-overflow-scrolling:touch;overflow-x:auto}.loading-screen{height:100vh;color:var(--text-muted);background:var(--background);justify-content:center;align-items:center;font-size:1.125rem;display:flex}@media (width<=768px){h1{font-size:1.25rem!important}.card{padding:1rem}.btn-primary{padding:.625rem 1rem;font-size:.8rem}.page-header{flex-direction:column!important;align-items:stretch!important;gap:1rem!important}.page-header .btn-primary{align-self:flex-start}.data-table th,.data-table td{padding:.75rem .625rem;font-size:.8rem}}.flex-col{flex-direction:column;display:flex}.flex-1{flex:1}.hidden-desktop{display:none}.hidden-mobile{display:block}.fab{bottom:calc(var(--bottom-nav-height) + 1.5rem);background:var(--primary);color:#fff;z-index:80;border-radius:28px;justify-content:center;align-items:center;width:56px;height:56px;transition:transform .2s,background .2s;display:flex;position:fixed;right:1.5rem;box-shadow:0 4px 12px #22c55e66}.fab:hover{background:var(--primary-hover);transform:scale(1.05)}.fab:active{transform:scale(.95)}.mobile-card-list{flex-direction:column;gap:.75rem;display:none}.mobile-data-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);flex-direction:column;gap:.75rem;padding:1rem;display:flex}.card-row{justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.card-label{color:var(--text-muted);text-transform:uppercase;font-size:.7rem;font-weight:600}.card-value{color:var(--text-main);font-size:.875rem;font-weight:500}@media (width<=768px){.hidden-desktop{display:flex}.hidden-mobile{display:none!important}.mobile-card-list{display:flex}.table-container.card{box-shadow:none;background:0 0;border:none;padding:0}input,select,textarea,.btn-primary,.btn-secondary{min-height:var(--touch-target)}}
