*,:before,:after{box-sizing:border-box}html{font-size:14px}html,body,#root{min-height:100%}body{color:#1e293b;-webkit-font-smoothing:antialiased;background:#f4f7fb;margin:0;font-family:Poppins,system-ui,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.boot-loading,.page-loading{color:#64748b;padding:24px}.login-page{background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 50%,#eef2ff 100%);place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:#fff;border-radius:20px;gap:16px;width:min(420px,100%);padding:32px;display:grid;box-shadow:0 20px 50px #0f172a14}.login-brand{align-items:center;gap:14px;margin-bottom:8px;display:flex}.login-logo-img{object-fit:cover;border-radius:14px;width:48px;height:48px}.login-brand h1{margin:0;font-size:1.25rem}.login-brand p{color:#64748b;margin:4px 0 0;font-size:.875rem}.login-card label{gap:6px;font-size:.875rem;font-weight:500;display:grid}.login-card input{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px}.login-card button[type=submit]{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:12px;margin-top:8px;padding:12px 16px;font-weight:600}.admin-shell{grid-template-columns:260px 1fr;min-height:100vh;display:grid}.admin-sidebar{background:#fff;border-right:1px solid #e8edf3;flex-direction:column;gap:24px;padding:24px 16px;display:flex}.sidebar-brand{align-items:center;gap:12px;padding:0 8px;display:flex}.sidebar-logo-img{object-fit:cover;border-radius:12px;width:42px;height:42px}.sidebar-brand strong{font-size:1rem;display:block}.sidebar-brand small{color:#64748b;font-size:.75rem}.sidebar-user{background:#f8fafc;border-radius:16px;align-items:center;gap:12px;padding:14px;display:flex}.sidebar-avatar{color:#1d4ed8;background:#dbeafe;border-radius:50%;place-items:center;width:42px;height:42px;font-weight:700;display:grid}.sidebar-user-name{margin:0;font-size:.875rem;font-weight:600}.sidebar-user-role{color:#64748b;margin:2px 0 0;font-size:.75rem}.sidebar-nav{gap:6px;display:grid}.sidebar-link{color:#475569;border-radius:12px;align-items:center;gap:10px;padding:12px 14px;font-size:.9375rem;font-weight:500;display:flex}.sidebar-link--active{color:#1d4ed8;background:#eff6ff}.sidebar-logout{cursor:pointer;color:#64748b;background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-top:auto;padding:12px 14px}.admin-main{padding:28px 32px 40px;overflow:auto}.page{gap:24px;display:grid}.page-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.page-header h1{margin:0;font-size:1.75rem}.page-header p{color:#64748b;margin:6px 0 0}.btn{cursor:pointer;border:none;border-radius:12px;padding:10px 18px;font-weight:600}.btn--primary{color:#fff;background:#2563eb}.btn--ghost{color:#334155;background:#fff;border:1px solid #e2e8f0}.btn--white{color:#1d4ed8;background:#fff}.promo-banner{color:#fff;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border-radius:18px;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px;display:flex}.promo-banner h2{margin:0 0 6px}.promo-banner p{opacity:.9;margin:0}.stat-grid{gap:16px;margin-bottom:16px;display:grid}.stat-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card{border-radius:16px;align-content:start;gap:10px;min-height:148px;padding:20px 22px;display:grid}.stat-card-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.stat-card-icon{color:#2563eb;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.stat-card-icon svg{width:22px;height:22px}.stat-card-period{color:#94a3b8;font-size:.75rem;font-weight:500}.stat-card-label{font-size:.9375rem;font-weight:600;display:block}.stat-card-foot{flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:auto;display:flex}.stat-card-value{color:#0f172a;font-size:2rem;font-weight:700;line-height:1}.stat-card-trend{align-items:center;gap:4px;font-size:.875rem;font-weight:600;display:inline-flex}.stat-card-trend-icon{font-size:1rem;line-height:1}.stat-card-trend--up{color:#16a34a}.stat-card-trend--down{color:#dc2626}.stat-card--blue{background:#eef2f9}.stat-card--blue .stat-card-label{color:#1e3a8a}.stat-card--green{background:#ecfdf3}.stat-card--green .stat-card-label{color:#166534}.stat-card--orange{background:#fff7ed}.stat-card--orange .stat-card-label{color:#c2410c}.stat-card--purple{background:#f5f3ff}.stat-card--purple .stat-card-label{color:#6d28d9}.quick-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px;display:grid}.dashboard-charts{grid-template-columns:1fr;gap:20px;display:grid}.dashboard-charts--loading{opacity:.72;pointer-events:none}.user-adoption-card{background:#fff;border-radius:18px;padding:24px;box-shadow:0 8px 24px #0f172a0a}.user-adoption-top{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:4px;display:flex}.user-adoption-metrics{gap:6px;display:grid}.user-adoption-title{color:#64748b;font-size:.9375rem;font-weight:500}.user-adoption-value{color:#0f172a;font-size:2.5rem;font-weight:700;line-height:1}.user-adoption-trend{align-items:center;gap:4px;font-size:.875rem;font-weight:600;display:inline-flex}.user-adoption-trend--up{color:#16a34a}.user-adoption-trend--down{color:#dc2626}.user-adoption-trend-icon{font-size:1rem;line-height:1}.user-adoption-controls{justify-items:end;gap:12px;display:grid}.user-adoption-select-wrap{display:block}.user-adoption-select{appearance:none;color:#334155;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") right 12px center no-repeat;border:1px solid #e2e8f0;border-radius:10px;padding:8px 34px 8px 12px;font-size:.875rem}.user-adoption-legend{align-items:center;gap:16px;display:flex}.user-adoption-legend-item{color:#64748b;align-items:center;gap:8px;font-size:.8125rem;display:inline-flex}.user-adoption-dot{border-radius:2px;width:10px;height:10px;display:inline-block}.user-adoption-dot--current{background:#3b82f6}.user-adoption-dot--previous{background:#cbd5e1}.user-adoption-chart{min-width:0;margin-top:12px}.dashboard-selling{background:#fff;border-radius:18px;grid-template-columns:220px 1fr;gap:16px;padding:20px;display:grid;box-shadow:0 8px 24px #0f172a0a}.selling-summary span{color:#64748b;font-size:.875rem}.selling-summary strong{margin-top:8px;font-size:2rem;display:block}.selling-summary em.up{color:#16a34a;font-style:normal;font-weight:600}.selling-summary em.down{color:#dc2626;font-style:normal;font-weight:600}.mini-stat-grid{gap:12px;margin-top:20px;display:grid}.mini-stat span{color:#64748b;font-size:.75rem}.mini-stat strong{margin-top:4px;display:block}.mini-stat em{margin-top:4px;font-size:.75rem;font-style:normal;display:block}.mini-stat em.up{color:#16a34a}.mini-stat em.down{color:#dc2626}.dashboard-chart{min-width:0}.chart-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.chart-head h3{margin:0}.chart-badge,.chart-sub{color:#64748b;font-size:.8125rem}.panel{background:#fff;border-radius:18px;padding:20px;box-shadow:0 8px 24px #0f172a0a}.panel-grid{gap:16px;margin-bottom:16px;display:grid}.panel-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-title{margin:0 0 16px;font-size:1rem;font-weight:600}.panel-head h3{margin:0 0 16px}.panel-toolbar{margin-bottom:16px}.panel-toolbar input{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;width:min(320px,100%);padding:10px 14px}.table-wrap{overflow:auto}.data-table{border-collapse:collapse;width:100%}.data-table th,.data-table td{text-align:left;vertical-align:middle;border-bottom:1px solid #eef2f7;padding:14px 12px}.data-table th{color:#64748b;font-size:.8125rem;font-weight:600}.table-game{align-items:center;gap:12px;display:flex}.table-game img{object-fit:cover;background:#e2e8f0;border-radius:10px;width:44px;height:44px}.table-game strong{display:block}.data-table tbody tr.data-table-row--clickable{cursor:pointer}.data-table tbody tr.data-table-row--clickable:hover td{background:#f8fafc}.table-actions{text-align:right;white-space:nowrap}.table-actions button+button{margin-left:8px}.table-actions button{cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px}.table-actions button.danger{color:#dc2626;border-color:#fecaca}.badge{text-transform:capitalize;border-radius:999px;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-block}.badge--admin{color:#1d4ed8;background:#dbeafe}.badge--user{color:#475569;background:#f1f5f9}.badge--published,.badge--active{color:#166534;background:#dcfce7}.badge--completed{color:#3730a3;background:#e0e7ff}.badge--draft{color:#92400e;background:#fef3c7}.badge--hidden{color:#475569;background:#f1f5f9}.pagination{justify-content:flex-end;align-items:center;gap:12px;margin-top:16px;display:flex}.pagination button{cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px}.pagination button:disabled{opacity:.5;cursor:not-allowed}.modal-backdrop{z-index:1000;background:#0f172a73;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:18px;width:min(480px,100%);max-height:90vh;overflow:auto;box-shadow:0 24px 60px #0f172a2e}.modal--wide{width:min(760px,100%)}.modal-head{border-bottom:1px solid #eef2f7;justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.modal-head h2{margin:0;font-size:1.125rem}.modal-close{cursor:pointer;color:#64748b;background:0 0;border:none;font-size:1.5rem}.modal-body{padding:20px}.form-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.form-grid label{gap:6px;font-size:.875rem;font-weight:500;display:grid}.form-grid label.full{grid-column:1/-1}.form-grid label.checkbox{align-items:center;gap:8px;display:flex}.form-grid input,.form-grid select,.form-grid textarea{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px}.form-grid select[multiple]{min-height:100px}.form-actions{justify-content:flex-end;gap:10px;display:flex}.form-actions.full{background:#f8fafc;border-top:1px solid #eef2f7;grid-column:1/-1;margin:10px -20px -20px;padding:16px 20px 20px}.form-actions.full .btn{min-width:120px;padding:12px 24px;font-size:.9375rem}.form-error{color:#dc2626;grid-column:1/-1;margin:0;font-size:.875rem}.form-media-preview{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;margin-top:8px;overflow:hidden}.form-media-preview img{object-fit:contain;background:#fff;width:100%;max-height:160px}.form-media-preview video{background:#0f172a;width:100%;max-height:220px;display:block}.form-media-preview iframe{background:#fff;border:none;width:100%;height:320px;display:block}@media (width<=1200px){.stat-grid--4,.quick-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-charts,.dashboard-selling{grid-template-columns:1fr}}@media (width<=900px){.admin-shell{grid-template-columns:1fr}.admin-sidebar{display:none}.admin-main{padding:20px 16px}.user-adoption-top{flex-direction:column;gap:16px}.user-adoption-controls{grid-template-columns:1fr auto;place-items:center stretch;width:100%}.user-adoption-legend{justify-self:end}}