/* ── AiO Profile / Package / Family pages ─────────────────────────────── */
.prof-tab { display:flex;align-items:center;gap:.375rem;padding:.625rem 1rem;font-size:.8125rem;font-weight:700;border-bottom:2.5px solid transparent;color:#64748b;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap;background:transparent;border-top:none;border-left:none;border-right:none; }
.prof-tab:hover { color:#7c3aed; }
.prof-tab.active { color:#7c3aed;border-bottom-color:#7c3aed; }
.dark .prof-tab { color:#64748b; }
.dark .prof-tab.active { color:#a78bfa;border-bottom-color:#a78bfa; }
.dark .prof-tab:hover { color:#c4b5fd; }

.card { background:white;border-radius:1rem;box-shadow:0 1px 4px rgba(0,0,0,.07); }
.dark .card { background:#1e293b; }

.inp { width:100%;padding:.6rem .875rem;border:1.5px solid #e2e8f0;border-radius:.625rem;font-size:.875rem;background:#fff;color:#1e293b;transition:border-color .2s,box-shadow .2s; }
.inp:focus { outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.1); }
.inp:disabled { background:#f8fafc;color:#94a3b8;cursor:not-allowed; }
.dark .inp { background:#0f172a;border-color:#334155;color:#e2e8f0; }
.dark .inp:focus { border-color:#7c3aed; }
.dark .inp:disabled { background:#1e293b; }

.flabel { display:block;font-size:.8125rem;font-weight:700;color:#374151;margin-bottom:.375rem; }
.dark .flabel { color:#cbd5e1; }

.btn { padding:.6rem 1.25rem;font-weight:700;font-size:.875rem;border-radius:.625rem;border:none;cursor:pointer;transition:background .2s; }
.btn-sm { padding:.4rem .875rem;font-size:.8rem; }
.btn-violet { background:#7c3aed;color:white; } .btn-violet:hover { background:#6d28d9; }
.btn-blue   { background:#2563eb;color:white; } .btn-blue:hover   { background:#1d4ed8; }
.btn-green  { background:#16a34a;color:white; } .btn-green:hover  { background:#15803d; }
.btn-ghost  { background:#f1f5f9;color:#374151;border:1.5px solid #e2e8f0; } .btn-ghost:hover { background:#e2e8f0; }
.dark .btn-ghost  { background:#334155;color:#e2e8f0;border-color:#475569; } .dark .btn-ghost:hover { background:#475569; }
.btn-red    { background:#fef2f2;color:#dc2626;border:1.5px solid #fca5a5; } .btn-red:hover { background:#fee2e2; }
.dark .btn-red    { background:rgba(220,38,38,.1);border-color:rgba(248,113,113,.3);color:#f87171; }
.btn-amber  { background:#fffbeb;color:#d97706;border:1.5px solid #fde68a; } .btn-amber:hover { background:#fef3c7; }

.toggle-track { position:relative;display:inline-flex;align-items:center;width:44px;height:24px;background:#e2e8f0;border-radius:9999px;cursor:pointer;transition:background .2s;flex-shrink:0; }
.toggle-track.on { background:#7c3aed; }
.toggle-thumb { position:absolute;left:3px;width:18px;height:18px;background:white;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:left .2s; }
.toggle-track.on .toggle-thumb { left:calc(100% - 21px); }
.dark .toggle-track { background:#334155; }

.session-card { display:flex;align-items:center;gap:.75rem;padding:.75rem;border:1.5px solid #e2e8f0;border-radius:.75rem; }
.dark .session-card { border-color:#334155; }
.session-card.current { border-color:#7c3aed;background:#f5f3ff; }
.dark .session-card.current { border-color:#7c3aed;background:rgba(124,58,237,.1); }

.exp-bar { height:5px;border-radius:9999px;background:#e2e8f0;overflow:hidden; }
.dark .exp-bar { background:#334155; }

.htab { padding:.45rem .875rem;font-size:.8rem;font-weight:700;border-radius:.5rem;color:#64748b;cursor:pointer;transition:all .15s;border:none;background:transparent; }
.htab.active { background:#ede9fe;color:#7c3aed; }
.dark .htab.active { background:rgba(124,58,237,.2);color:#c4b5fd; }
.htab:hover:not(.active) { background:#f1f5f9;color:#374151; }
.dark .htab:hover:not(.active) { background:#334155;color:#e2e8f0; }

.badge-card { display:flex;flex-direction:column;align-items:center;text-align:center;padding:1rem .75rem;border-radius:1rem;border:1.5px solid #e2e8f0;background:white;gap:.5rem; }
.dark .badge-card { background:#1e293b;border-color:#334155; }
.badge-card.locked { opacity:.38;filter:grayscale(1); }

.family-card { display:flex;align-items:center;gap:.75rem;padding:.875rem;border-radius:.875rem;border:1.5px solid #e2e8f0;background:white; }
.dark .family-card { background:#1e293b;border-color:#334155; }
.family-card.host { border-color:#7c3aed;background:#f5f3ff; }
.dark .family-card.host { background:rgba(124,58,237,.1); }

.str-bar { height:4px;border-radius:9999px;background:#e2e8f0;overflow:hidden;margin-top:.375rem; }
.str-fill { height:100%;border-radius:9999px;transition:width .3s,background .3s; }

.badge { display:inline-flex;align-items:center;gap:.25rem;padding:.175rem .625rem;border-radius:9999px;font-size:.6875rem;font-weight:700; }

.modal-bg { position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(4px);z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem; }
.modal-bg.hidden { display:none!important; }
.modal-box { background:white;border-radius:1.25rem;box-shadow:0 24px 80px rgba(0,0,0,.3);width:100%;overflow-y:auto;max-height:92vh; }
.dark .modal-box { background:#1e293b; }

.consent-row { display:flex;align-items:flex-start;gap:.625rem;padding:.35rem 0; }
.consent-row input[type="checkbox"] { margin-top:.15rem;width:1rem;height:1rem;accent-color:#7c3aed;flex-shrink:0; }

.tbl-row:hover td { background:#f8fafc; }
.dark .tbl-row:hover td { background:#0f172a; }

.stock-tag { display:inline-flex;align-items:center;gap:.375rem;padding:.3rem .75rem;border-radius:9999px;font-size:.8125rem;font-weight:700;background:#ede9fe;color:#7c3aed; }
.dark .stock-tag { background:rgba(124,58,237,.2);color:#c4b5fd; }

/* Package page */
.pkg-card{background:white;border-radius:1.25rem;box-shadow:0 2px 8px rgba(0,0,0,.07),0 0 0 1.5px rgba(0,0,0,.05);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .2s;position:relative;}
.pkg-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.14);transform:translateY(-3px);}
.pkg-card.featured{box-shadow:0 0 0 3px #7c3aed,0 8px 32px rgba(124,58,237,.22);}
.pkg-card.featured:hover{box-shadow:0 0 0 3px #7c3aed,0 12px 40px rgba(124,58,237,.30);}
.dark .pkg-card{background:#1e293b;box-shadow:0 0 0 1.5px rgba(255,255,255,.06);}
.dark .pkg-card.featured{box-shadow:0 0 0 3px #7c3aed,0 8px 32px rgba(124,58,237,.30);}
.pkg-header{padding:0.9rem 0.9rem 0.9rem;}
.pkg-price-num{font-size:2.75rem;font-weight:900;line-height:1;}
.pkg-body{padding:0.1rem 0.9rem 0.9rem;flex:1;}
.pkg-footer{padding:0 0.9rem 0.9rem;}
.feature-row{display:flex;align-items:flex-start;gap:.625rem;font-size:.8125rem;font-weight:600;color:#374151;line-height:1.4;padding:.2rem 0;}
.dark .feature-row{color:#cbd5e1;}
.feature-check{width:1rem;height:1rem;flex-shrink:0;color:#16a34a;margin-top:.1rem;}
.feature-minus{width:1rem;height:1rem;flex-shrink:0;color:#94a3b8;margin-top:.1rem;}
.billing-track{position:relative;display:inline-flex;align-items:center;background:#f1f5f9;border-radius:9999px;padding:.25rem;gap:0;border:1.5px solid #e2e8f0;}
.dark .billing-track{background:#1e293b;border-color:#334155;}
.billing-btn{padding:.4rem 1.25rem;border-radius:9999px;font-size:.875rem;font-weight:700;cursor:pointer;border:none;background:transparent;color:#64748b;transition:all .2s;white-space:nowrap;}
.billing-btn.active{background:white;color:#1e293b;box-shadow:0 1px 6px rgba(0,0,0,.12);}
.dark .billing-btn{color:#64748b;}
.dark .billing-btn.active{background:#0f172a;color:#e2e8f0;}
.pay-modal{background:rgba(15,23,42,.65);backdrop-filter:blur(4px);}
.pay-modal-box{background:white;border-radius:1rem;box-shadow:0 24px 80px rgba(0,0,0,.3);width:100%;max-width:520px;overflow-y:auto;max-height:92vh;}
.dark .pay-modal-box{background:#1e293b;}
.coin-bar{height:6px;border-radius:9999px;background:#e2e8f0;overflow:hidden;}
.dark .coin-bar{background:#334155;}