* { font-family:'Inter',sans-serif; }
body { background:#f1f3f9; min-height:100vh; }
.hero-bg { background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 60%,#6366f1 100%); }

/* tabs */
.tab-on  { background:#4f46e5;color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.35); }
.tab-off { background:#fff;color:#6b7280;border:1px solid #e5e7eb; }
.tab-off:hover { background:#f5f3ff;color:#4f46e5;border-color:#c7d2fe; }

/* view toggle */
.von  { background:#4f46e5;color:#fff; }
.voff { background:#fff;color:#9ca3af;border:1px solid #e5e7eb; }
.voff:hover { color:#4f46e5;border-color:#c7d2fe; }

/* list row */
.lrow { border-left:4px solid transparent;transition:background .15s; }
.lrow:hover { background:#f8f7ff; }
.lrow.tn { border-left-color:#6366f1; }
.lrow.ts { border-left-color:#8b5cf6; }
.lrow.tc { border-left-color:#10b981; }

.icon-n { background:#eef2ff;color:#4f46e5; }
.icon-s { background:#f5f3ff;color:#7c3aed; }
.icon-c { background:#ecfdf5;color:#059669; }

.tb-n { background:#eef2ff;color:#4f46e5;border:1px solid #c7d2fe; }
.tb-s { background:#f5f3ff;color:#7c3aed;border:1px solid #ddd6fe; }
.tb-c { background:#ecfdf5;color:#059669;border:1px solid #a7f3d0; }

.ab-free { background:#d1fae5;color:#065f46;border:1px solid #6ee7b7; }
.ab-prem { background:#fef3c7;color:#92400e;border:1px solid #fcd34d; }
.ab-lock { background:#fee2e2;color:#991b1b;border:1px solid #fca5a5; }

.btn-v { background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff; }
.btn-v:hover { opacity:.88; }
.btn-b { background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff; }
.btn-b:hover { opacity:.88; }
.btn-p { background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff; }
.btn-p:hover { opacity:.88; }

/* grid card */
.gcard { transition:transform .2s,box-shadow .2s; }
.gcard:hover { transform:translateY(-3px);box-shadow:0 16px 36px -10px rgba(0,0,0,.12); }

/* view switch */
.vl .gv { display:none; }
.vg .lv { display:none; }