/**
 * ============================================
 * SoulOS — The Operating System of Your Soul
 * app.css — Shared portal component styles
 * Covers: dev portal panels, auth pages, forms
 * ============================================
 * @company    Kohli Media LLP
 * @author     Dr. Sahil Kohli
 * @copyright  2026 Kohli Media LLP. All rights reserved.
 * ============================================
 */

/* ══════════════════════════════════════════════
   AUTH PAGES (login.php, register.php)
   Standalone pages — full-page centered layout
   ══════════════════════════════════════════════ */

.l-card  { width:100%; max-width:400px; }
.r-card  { width:100%; max-width:420px; }

.l-logo, .r-logo {
  display:flex; align-items:center; gap:0.5rem;
  font-size:1rem; font-weight:800; color:var(--s-text); margin-bottom:0.75rem;
}
.l-logo em, .r-logo em { color:var(--s-gold); font-style:normal; }

.l-live, .r-live {
  font-size:0.69rem; color:#5a5a5a; letter-spacing:0.06em;
  text-transform:uppercase; display:flex; align-items:center; gap:0.45rem;
  margin-bottom:2.25rem;
}
.l-live-dot, .r-live-dot {
  width:6px; height:6px; border-radius:50%;
  background:#34d399; box-shadow:0 0 6px #34d399; flex-shrink:0;
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }

.l-title, .r-title { font-size:1.5rem; font-weight:800; color:var(--s-text); letter-spacing:-0.02em; margin-bottom:0.35rem; }
.l-sub,   .r-sub   { font-size:0.84rem; color:#5a5a5a; margin-bottom:1.75rem; }
.l-sub a, .r-sub a { color:var(--s-gold); font-weight:600; }
.l-sub a:hover, .r-sub a:hover { text-decoration:underline !important; }

.l-foot, .r-foot {
  text-align:center; margin-top:1.5rem;
  font-size:0.67rem; color:#3a3a3a;
}

.f-row-between {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem;
}
.f-check-label {
  display:flex; align-items:center; gap:0.45rem;
  font-size:0.8rem; color:#9a9a9a; cursor:pointer;
}
.f-check-label input[type=checkbox] { accent-color:var(--s-gold); width:14px; height:14px; }
.f-forgot { font-size:0.8rem; color:#5a5a5a; }
.f-forgot:hover { color:var(--s-gold); }

.r-success { text-align:center; padding:1rem 0; }

/* ══════════════════════════════════════════════
   SHARED FORM COMPONENTS
   Used across: login, register, keys, settings
   ══════════════════════════════════════════════ */

.f-group { margin-bottom:1rem; }

.f-label {
  display:block; font-size:0.72rem; font-weight:600;
  color:#9a9a9a; text-transform:uppercase; letter-spacing:0.05em;
  margin-bottom:0.35rem;
}
.f-input {
  width:100%; padding:0.7rem 0.85rem;
  background:var(--s-card); border:1px solid var(--s-border);
  border-radius:0.55rem; color:var(--s-text);
  font-size:0.875rem; font-family:inherit;
  transition:border-color 0.15s, box-shadow 0.15s;
  outline:none; box-sizing:border-box;
}
.f-input:focus {
  border-color:var(--s-gold-dim);
  box-shadow:0 0 0 3px var(--s-gold-dim);
}
.f-input::placeholder { color:#3a3a3a; }

.f-pw-wrap { position:relative; }
.f-pw-wrap .f-input { padding-right:2.5rem; }
.f-pw-toggle {
  position:absolute; right:0.75rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#5a5a5a; cursor:pointer;
  padding:0; font-size:0.8rem; line-height:1;
}
.f-pw-toggle:hover { color:#9a9a9a; }

.f-strength { margin-top:0.4rem; display:flex; gap:0.3rem; align-items:center; }
.f-strength-bar { flex:1; height:3px; border-radius:2px; background:var(--s-border); transition:background 0.3s; }
.f-strength-label { font-size:0.66rem; color:#5a5a5a; white-space:nowrap; width:50px; text-align:right; }

.f-hint { font-size:0.71rem; color:#5a5a5a; margin-top:0.3rem; display:block; }

.f-errors {
  background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.15);
  border-radius:0.55rem; padding:0.75rem 0.9rem; margin-bottom:1rem;
}
.f-error-item {
  font-size:0.81rem; color:#f87171;
  display:flex; align-items:flex-start; gap:0.4rem; line-height:1.5;
}
.f-error-item + .f-error-item { margin-top:0.35rem; }

.btn-submit {
  width:100%; padding:0.75rem;
  background:var(--s-gold); color:#000 !important;
  border:none; border-radius:0.55rem;
  font-size:0.9rem; font-weight:700;
  cursor:pointer; transition:all 0.15s; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
}
.btn-submit:hover { background:var(--s-gold-h); box-shadow:0 0 24px var(--s-gold-dim); }

/* ══════════════════════════════════════════════
   ALERTS
   Used across: keys, usage, settings, plans
   ══════════════════════════════════════════════ */

.s-alert {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.75rem 1rem; border-radius:0.55rem;
  font-size:0.84rem; margin-bottom:1rem;
}
.s-alert-ok   { background:rgba(34,197,94,0.08);  color:#4ade80; border:1px solid rgba(34,197,94,0.2); }
.s-alert-err  { background:rgba(239,68,68,0.08);  color:#f87171; border:1px solid rgba(239,68,68,0.2); }
.s-alert-info { background:var(--s-gold-dim); color:var(--s-gold); border:1px solid var(--s-gold-dim); }

/* ══════════════════════════════════════════════
   PAGE HEADER (usage, keys, plans pages)
   ══════════════════════════════════════════════ */

.s-page-head  { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.s-page-title { font-size:1.35rem; font-weight:800; color:var(--s-text); letter-spacing:-0.3px; margin:0 0 0.2rem; }
.s-page-sub   { font-size:0.82rem; color:var(--s-muted); margin:0; }

/* ══════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════ */

.s-empty-state { text-align:center; padding:3.5rem 1rem; }
.s-empty-icon  { font-size:2.5rem; color:var(--s-muted); opacity:0.3; margin-bottom:1rem; }
.s-empty-title { font-size:1.05rem; font-weight:700; color:var(--s-text); margin-bottom:0.45rem; }
.s-empty-sub   { font-size:0.84rem; color:var(--s-muted); margin-bottom:1.5rem; }

/* ══════════════════════════════════════════════
   CARD / TABLE / BADGE (panel-page variants)
   ══════════════════════════════════════════════ */

.s-card { background:var(--s-card); border:1px solid var(--s-border); border-radius:0.875rem; overflow:hidden; }

.s-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.s-table th {
  text-align:left; padding:0.6rem 1rem; color:var(--s-muted);
  font-weight:600; font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.06em; border-bottom:1px solid var(--s-border); white-space:nowrap;
}
.s-table td {
  padding:0.78rem 1rem; border-bottom:1px solid rgba(255,255,255,0.025);
  color:var(--s-subtle); vertical-align:middle;
}
.s-table tr:last-child td { border-bottom:none; }
.s-table tbody tr:hover td { background:rgba(255,255,255,0.013); }

.s-badge { display:inline-flex; align-items:center; padding:0.18rem 0.52rem; border-radius:999px; font-size:0.68rem; font-weight:700; }
.s-badge-green { background:rgba(34,197,94,0.08); color:#4ade80; border:1px solid rgba(34,197,94,0.15); }
.s-badge-red   { background:rgba(239,68,68,0.08); color:#f87171; border:1px solid rgba(239,68,68,0.15); }
.s-badge-gold  { background:var(--s-gold-dim); color:var(--s-gold); border:1px solid var(--s-gold-dim); }

/* ══════════════════════════════════════════════
   DANGER BUTTON (small — revoke, delete)
   ══════════════════════════════════════════════ */

.btn-s-danger-sm {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.35rem 0.65rem; border-radius:0.45rem;
  font-size:0.75rem; font-weight:600; cursor:pointer;
  background:rgba(239,68,68,0.08); color:#f87171;
  border:1px solid rgba(239,68,68,0.2); transition:all 0.15s; line-height:1;
}
.btn-s-danger-sm:hover { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.35); color:#fca5a5; }

/* ══════════════════════════════════════════════
   MODAL (dark theme overrides for rm-sheet)
   ══════════════════════════════════════════════ */

.soul-rm-sheet {
  background:var(--s-card) !important;
  color:var(--s-text) !important;
  border:1px solid var(--s-border) !important;
}
@media (min-width:1024px) { .rm-sheet-sm { width:min(500px, 92vw) !important; } }

.s-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.4rem 0.85rem; border-bottom:1px solid var(--s-border);
}
.s-modal-head > span { font-weight:700; font-size:0.95rem; color:var(--s-text); }
.s-modal-body { padding:1.25rem 1.4rem; }
.s-modal-close {
  background:none; border:1px solid var(--s-border); border-radius:0.4rem;
  color:var(--s-muted); width:28px; height:28px; cursor:pointer;
  font-size:1rem; display:flex; align-items:center; justify-content:center;
  transition:all 0.12s; flex-shrink:0;
}
.s-modal-close:hover { background:rgba(255,255,255,0.05); color:var(--s-text); }

.key-reveal-box {
  background:var(--s-surface); border:1px solid var(--s-gold-dim);
  border-radius:0.55rem; padding:0.85rem 1rem;
  font-family:'Courier New', Courier, monospace;
  font-size:0.81rem; color:var(--s-gold);
  word-break:break-all; letter-spacing:0.03em;
  margin:0.75rem 0 1rem; user-select:all;
}
.key-warn {
  font-size:0.79rem; color:#fb923c;
  background:rgba(249,115,22,0.07); border:1px solid rgba(249,115,22,0.18);
  border-radius:0.45rem; padding:0.6rem 0.8rem; margin-bottom:1rem; line-height:1.55;
}

/* ══════════════════════════════════════════════
   DASHBOARD PAGE
   ══════════════════════════════════════════════ */

.stat-card { padding:1.25rem 1.15rem 1.1rem; display:flex; flex-direction:column; }
.stat-icon-wrap {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem; flex-shrink:0;
}
.stat-icon-gold   { background:var(--s-gold-dim); border:1px solid var(--s-gold-dim); color:var(--s-gold); }
.stat-icon-amber  { background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.14); color:var(--s-gold-h); }
.stat-icon-purple { background:rgba(168,85,247,0.08); border:1px solid rgba(168,85,247,0.14); color:#c084fc; }
.stat-icon-crown  { background:rgba(52,211,153,0.08); border:1px solid rgba(52,211,153,0.14); color:#34d399; }
.stat-icon-wrap i { font-size:0.9rem; }
.stat-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--s-muted); margin-bottom:0.45rem; }
.stat-num { font-size:2.1rem; font-weight:800; color:var(--s-text); line-height:1; letter-spacing:-0.03em; margin-bottom:0.35rem; }
.stat-num-gold { color:var(--s-gold); }
.stat-sub { font-size:0.76rem; color:var(--s-muted); margin-bottom:0.65rem; line-height:1.4; }
.stat-sub strong { color:var(--s-subtle); font-weight:600; }
.stat-cta { font-size:0.75rem; color:var(--s-gold); font-weight:600; margin-top:auto; }
.stat-cta:hover { text-decoration:underline !important; }

.upgrade-bar {
  background:var(--s-card-h);
  border:1px solid rgba(217,178,74,0.22); border-radius:1rem;
  box-shadow:none;
  padding:1.1rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.5rem; position:relative; overflow:hidden;
}
.upgrade-bar::before {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:1px;
  background:rgba(217,178,74,0.32);
  pointer-events:none;
}
.upgrade-bar::after {
  content:'';
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:2px;
  border-radius:999px;
  background:rgba(217,178,74,0.88);
}
.upgrade-bar-title { font-weight:700; font-size:0.9rem; color:var(--s-text); margin-bottom:0.2rem; }
.upgrade-bar-sub   { font-size:0.79rem; color:rgba(232,224,208,0.58); }

.code-pre {
  background:var(--s-surface); border:1px solid var(--s-border); border-radius:0.6rem;
  padding:0.95rem; font-size:0.71rem; color:#86efac; margin:0;
  line-height:1.7; font-family:'Courier New',monospace; overflow-x:auto;
}

.key-box {
  background:var(--s-surface); border:1px solid var(--s-border); border-radius:0.55rem;
  padding:0.62rem 0.9rem;
  font-family:'Courier New', monospace; font-size:0.82rem; color:var(--s-gold);
  letter-spacing:0.03em; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.dash-grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; margin-bottom:1.25rem; }
.dash-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
@media (max-width:960px) { .dash-grid-4 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px) { .dash-grid-2 { grid-template-columns:1fr; } }
@media (max-width:420px) { .dash-grid-4 { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════
   KEYS PAGE
   ══════════════════════════════════════════════ */

.keys-page-head  { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.keys-page-title { font-size:1.35rem; font-weight:800; color:var(--s-text); letter-spacing:-0.3px; margin:0 0 0.2rem; }
.keys-page-sub   { font-size:0.82rem; color:var(--s-muted); margin:0; }

/* ══════════════════════════════════════════════
   USAGE PAGE
   ══════════════════════════════════════════════ */

.usage-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0.85rem; margin-bottom:1.5rem; }
.usage-stat  { padding:1.1rem 1rem; }
.usage-stat-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--s-muted); margin-bottom:0.4rem; }
.usage-stat-val   { font-size:1.6rem; font-weight:800; color:var(--s-text); line-height:1; letter-spacing:-0.02em; }
.usage-stat-sub   { font-size:0.72rem; color:var(--s-muted); margin-top:0.3rem; }
.usage-pct-bar    { margin-top:0.6rem; }
.usage-section    { margin-bottom:1.5rem; }
.usage-section-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--s-muted); margin-bottom:0.65rem; display:flex; align-items:center; gap:0.4rem; }
.usage-section-title i { color:var(--s-gold); font-size:0.66rem; }
.status-row { display:flex; align-items:center; gap:0.75rem; padding:0.55rem 0; border-bottom:1px solid rgba(255,255,255,0.03); }
.status-row:last-child { border-bottom:none; }
.status-bar-track { flex:1; height:4px; background:var(--s-border); border-radius:999px; overflow:hidden; }
.status-bar-fill  { height:4px; border-radius:999px; }
.no-data { text-align:center; padding:3rem 1rem; color:var(--s-muted); }
.no-data i { font-size:2rem; margin-bottom:0.75rem; opacity:0.3; display:block; }
.no-data p { font-size:0.85rem; }
.no-data a { color:var(--s-gold); }
@media (max-width:767px) { .usage-stats { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .usage-stats { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════
   SETTINGS PAGE (scoped under .dev-settings-page)
   ══════════════════════════════════════════════ */

.dev-settings-page .s-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.dev-settings-page .s-page-title { font-size:1.25rem; font-weight:800; color:var(--s-text); margin:0 0 0.2rem; letter-spacing:-0.02em; }
.dev-settings-page .s-page-sub   { font-size:0.82rem; color:#5a5a5a; margin:0; }
.dev-settings-page .s-alert { padding:0.7rem 1rem; border-radius:0.55rem; font-size:0.84rem; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }
.dev-settings-page .s-alert-ok  { background:rgba(52,211,153,0.07); border:1px solid rgba(52,211,153,0.15); color:#34d399; }
.dev-settings-page .s-alert-err { background:rgba(239,68,68,0.07);  border:1px solid rgba(239,68,68,0.15);  color:#f87171; }

.dev-settings-page .s-tabs { display:flex; gap:0.15rem; margin-bottom:1.5rem; border-bottom:1px solid var(--s-border); padding-bottom:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dev-settings-page .s-tab {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.55rem 0.9rem; font-size:0.84rem; font-weight:600; color:#5a5a5a;
  border-radius:0.45rem 0.45rem 0 0; border:1px solid transparent;
  border-bottom:none; cursor:pointer; text-decoration:none !important;
  transition:all 0.15s; margin-bottom:-1px;
}
.dev-settings-page .s-tab:hover { color:#9a9a9a; }
.dev-settings-page .s-tab.active { color:var(--s-text); background:var(--s-card); border-color:var(--s-border); border-bottom-color:var(--s-card); }

.dev-settings-page .s-card { background:var(--s-card); border:1px solid var(--s-border); border-radius:0.75rem; overflow:visible; }
.dev-settings-page .s-settings-form { padding:1.5rem; }
.dev-settings-page .sg-row { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; margin-bottom:0.85rem; }
.dev-settings-page .sg-col { display:flex; flex-direction:column; }
.dev-settings-page .sg-group { margin-bottom:0.85rem; }
.dev-settings-page .sg-actions { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--s-border); }
.dev-settings-page .optional { font-weight:400; text-transform:none; letter-spacing:0; color:#3a3a3a; }

.dev-settings-page .f-label { display:block; font-size:0.71rem; font-weight:600; color:#9a9a9a; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.35rem; }
.dev-settings-page .f-input { width:100%; padding:0.65rem 0.85rem; background:var(--s-surface); border:1px solid var(--s-border); border-radius:0.5rem; color:var(--s-text); font-size:0.875rem; font-family:inherit; outline:none; transition:border-color 0.15s, box-shadow 0.15s; }
.dev-settings-page .f-input:focus { border-color:var(--s-gold-dim); box-shadow:0 0 0 3px var(--s-gold-dim); }
.dev-settings-page .f-input::placeholder { color:#3a3a3a; }
.dev-settings-page .f-hint { font-size:0.71rem; color:#5a5a5a; margin-top:0.3rem; display:block; }
.dev-settings-page .f-pw-wrap { position:relative; }
.dev-settings-page .f-pw-wrap .f-input { padding-right:2.5rem; }
.dev-settings-page .f-pw-toggle { position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); background:none; border:none; color:#5a5a5a; cursor:pointer; padding:0; font-size:0.8rem; }
.dev-settings-page .f-pw-toggle:hover { color:#9a9a9a; }
.dev-settings-page .f-strength { display:flex; gap:0.3rem; align-items:center; }
.dev-settings-page .f-strength-bar { flex:1; height:3px; border-radius:2px; background:var(--s-border); transition:background 0.3s; }
.dev-settings-page .f-strength-label { font-size:0.66rem; color:#5a5a5a; white-space:nowrap; width:50px; text-align:right; }

@media (max-width:640px) { .dev-settings-page .sg-row { grid-template-columns:1fr; } }
@media (max-width:640px) { .dev-settings-page .s-tab { white-space:nowrap; font-size:0.75rem; } }

/* select dark theme — match f-input appearance */
.dev-settings-page select.f-input {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a5a5a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.85rem center;
  padding-right:2.25rem; cursor:pointer;
}
.dev-settings-page select.f-input option { background:var(--s-surface); color:var(--s-text); }

/* intl-tel-input dark theme */
.dev-settings-page .iti { width:100%; font-family:inherit; }
.dev-settings-page .iti__flag-container .iti__selected-dial-code { color:#9a9a9a; font-size:0.85rem; font-family:inherit; }
.dev-settings-page .iti__dropdown-content { background:var(--s-card); border:1px solid var(--s-border); border-radius:0.5rem; box-shadow:0 8px 32px rgba(0,0,0,0.6); }
.dev-settings-page .iti__country { color:var(--s-text); padding:0.45rem 0.75rem; font-family:inherit; }
.dev-settings-page .iti__country:hover,.dev-settings-page .iti__country.iti__highlight { background:var(--s-border); }
.dev-settings-page .iti__dial-code { color:#5a5a5a; }
.dev-settings-page .iti__search-input { background:var(--s-surface); border:1px solid var(--s-border); color:var(--s-text); padding:0.5rem 0.75rem; border-radius:0.35rem; width:calc(100% - 1.5rem); margin:0.5rem 0.75rem; font-size:0.85rem; font-family:inherit; outline:none; }
.dev-settings-page .iti--separate-dial-code .iti__selected-flag { background:var(--s-surface); border-right:1px solid var(--s-border); border-radius:0.5rem 0 0 0.5rem; }
.dev-settings-page .iti--separate-dial-code input { border-radius:0 0.5rem 0.5rem 0 !important; }

/* ══════════════════════════════════════════════
   PLANS PAGE
   ══════════════════════════════════════════════ */

.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:2rem; }
.plan-card {
  background:var(--s-card); border:1px solid var(--s-border);
  border-radius:1rem; padding:1.75rem 1.5rem;
  display:flex; flex-direction:column; position:relative; transition:border-color 0.2s;
}
.plan-card:hover { border-color:var(--s-border-h); }
.plan-card-popular {
  border-color:var(--s-gold-dim);
  box-shadow:0 0 0 1px var(--s-gold-dim), 0 8px 32px var(--s-gold-dim);
}
.plan-card-popular:hover { border-color:var(--s-gold-dim); }
.plan-popular-chip {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--s-gold); color:#000;
  font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em;
  padding:0.22rem 0.7rem; border-radius:999px; white-space:nowrap;
}
.plan-name  { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--s-muted); margin-bottom:0.65rem; }
.plan-price { display:flex; align-items:baseline; gap:0.2rem; margin-bottom:0.3rem; }
.plan-price-amt { font-size:2.2rem; font-weight:800; color:var(--s-text); letter-spacing:-0.03em; line-height:1; }
.plan-price-cur { font-size:1rem; font-weight:700; color:var(--s-subtle); margin-bottom:0.25rem; }
.plan-price-per { font-size:0.75rem; color:var(--s-muted); }
.plan-desc  { font-size:0.8rem; color:var(--s-muted); margin-bottom:1.25rem; line-height:1.55; }
.plan-features { list-style:none; padding:0; margin:0 0 1.75rem; display:flex; flex-direction:column; gap:0.5rem; }
.plan-features li { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.82rem; color:var(--s-subtle); line-height:1.4; }
.plan-features li i { color:#4ade80; font-size:0.72rem; margin-top:0.18rem; flex-shrink:0; }
.plan-features li.plan-feat-no i { color:var(--s-muted); }
.plan-features li.plan-feat-no { color:var(--s-muted); }
.plan-cta { margin-top:auto; }

.plan-current-chip {
  display:inline-flex; align-items:center; gap:0.35rem;
  font-size:0.72rem; font-weight:700; color:#4ade80;
  background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2);
  border-radius:999px; padding:0.28rem 0.65rem;
}

.plans-faq { margin-top:1rem; }
.plans-faq-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--s-muted); margin-bottom:0.85rem; }

@media (max-width:768px) { .plans-grid { grid-template-columns:1fr; } }
@media (max-width:960px) { .plans-grid { grid-template-columns:1fr 1fr; } }

/* ══════════════════════════════════════════════
   UTILITY CLASSES — replaces per-element inline styles
   ══════════════════════════════════════════════ */

/* Page header */
.p-header { margin-bottom:1.5rem; }
.p-label  { font-size:0.75rem; font-weight:600; color:var(--s-muted); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:0.35rem; }
.p-title  { font-size:1.4rem; font-weight:800; color:var(--s-text); margin:0 0 0.3rem; letter-spacing:-0.02em; }
.p-sub    { color:var(--s-muted); font-size:0.855rem; margin:0; }

/* Section headings inside cards */
.sec-label { font-size:0.7rem; font-weight:700; color:var(--s-gold); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.5rem; }
.sec-title { font-size:1.6rem; font-weight:800; color:var(--s-text); letter-spacing:-0.03em; margin:0 0 0.5rem; line-height:1.2; }
.sec-sub   { font-size:0.88rem; color:var(--s-muted); margin:0 0 1.1rem; max-width:520px; line-height:1.6; }

/* Empty states */
.empty-state { text-align:center; padding:2.5rem 1rem; }
.empty-icon  { font-size:1.6rem; color:var(--s-muted); opacity:0.25; margin-bottom:0.75rem; display:block; }
.empty-text  { font-size:0.84rem; color:var(--s-muted); margin:0; }

/* Warning / notice box */
.notice-warn { display:flex; align-items:flex-start; gap:0.45rem; background:rgba(249,115,22,0.05); border:1px solid rgba(249,115,22,0.1); border-radius:0.55rem; padding:0.6rem 0.7rem; margin-top:0.85rem; }
.notice-icon { color:#f97316; font-size:0.75rem; margin-top:0.1rem; flex-shrink:0; }
.notice-text { font-size:0.77rem; color:var(--s-muted); line-height:1.55; }

/* Card padding */
.card-body    { padding:1.25rem; }
.card-body-sm { padding:1.1rem 1.15rem; }

/* Gold link with chevron */
.link-arrow   { display:inline-flex; align-items:center; gap:0.35rem; margin-top:0.8rem; font-size:0.78rem; color:var(--s-gold); font-weight:600; }
.link-arrow i { font-size:0.68rem; }

/* Inline code span */
.inline-code { font-family:monospace; color:var(--s-gold); font-size:0.79rem; background:var(--s-gold-dim); padding:0.15rem 0.4rem; border-radius:4px; }

/* Table cell variants */
.td-mono  { font-family:'Courier New',monospace; font-size:0.79rem; color:var(--s-subtle); }
.td-muted { color:var(--s-muted); font-size:0.78rem; }
.td-muted-nb { color:var(--s-muted); }

/* Flex / layout helpers */
.flex-end   { display:flex; justify-content:flex-end; gap:0.6rem; flex-wrap:wrap; }
.overflow-x { overflow-x:auto; }
.mt-auto    { margin-top:auto; }
.text-green { font-size:0.75rem; color:#4ade80; font-weight:600; }

/* Stats grid */
.stats-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; margin-bottom:1.5rem; }

/* Settings field constraints */
.sf-field     { max-width:380px; }
.sf-field-sm  { max-width:320px; }
.sg-divider   { border-top:1px solid var(--s-border); margin:1.25rem 0; padding-top:1.25rem; }
.sg-label     { font-size:0.78rem; font-weight:700; color:var(--s-subtle); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1rem; }

/* 404 page */
.not-found-wrap  { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:50vh; text-align:center; padding:2rem; }
.not-found-icon  { font-size:3.5rem; margin-bottom:1rem; opacity:0.2; }
.not-found-title { font-size:1.2rem; font-weight:700; color:var(--s-text); margin:0 0 0.5rem; }

/* Debug panel (panel_shell) */
.debug-file   { padding:0.6rem 0.8rem; margin-bottom:0.85rem; border-radius:0.45rem; background:var(--s-surface); border:1px solid var(--s-border); color:var(--s-gold); font-size:0.85rem; }
.debug-output { margin-top:0.75rem; padding:0.6rem; border-radius:0.45rem; background:#071017; border:1px solid #15232a; color:#9ae6ff; font-size:0.78rem; }
.debug-text   { margin-top:0.4rem; color:#cfeff8; max-height:6rem; overflow:auto; }

/* ── Extra utilities ─────────────────────────────────────── */
.text-gold   { color: var(--s-gold); }
.text-subtle { color: var(--s-subtle); }
.text-green  { font-size:0.75rem; color:#4ade80; font-weight:600; }
.p-note      { font-size:0.72rem; color:var(--s-muted); }
.p-hint      { font-size:0.77rem; color:var(--s-muted); line-height:1.55; margin:0 0 0.85rem; }
.key-row     { display:flex; align-items:center; gap:0.45rem; margin-bottom:0.9rem; }
.card-px     { padding-left:1.25rem; padding-right:1.25rem; }
.card-top-pad { padding:1.25rem 0 0.5rem; }
.flex-shrink-0 { flex-shrink:0; }
.mt-auto     { margin-top:auto; }
.stat-num-lg { font-size:1.8rem; }
.d-inline-flex { display:inline-flex; }
.align-center  { display:flex; align-items:center; }

/* Table cell helpers */
.td-subtle   { color:var(--s-subtle); }
.td-code     { font-size:0.76rem; color:var(--s-text); font-family:monospace; }
.td-mono-sm  { font-family:monospace; font-size:0.75rem; color:var(--s-muted); }
.td-nowrap   { color:var(--s-muted); font-size:0.78rem; white-space:nowrap; }
.td-pl       { padding-left:1.25rem; }
.td-pr       { padding-right:1.25rem; }

/* Settings section divider */
.sg-section       { border-top:1px solid var(--s-border); margin:1.25rem 0; padding-top:1.25rem; }
.sg-section-title { font-size:0.78rem; font-weight:700; color:var(--s-subtle); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1rem; }

/* Usage sub-label */
.usage-stat-ms { font-size:0.9rem; font-weight:500; color:var(--s-muted); }

.s-user-initial { width:26px; height:26px; font-size:0.65rem; }
.text-uppercase { text-transform:uppercase; }
.text-bold      { color:var(--s-text); font-weight:500; }
.d-none         { display:none; }

.text-red    { color:#f87171; }
.icon-mr     { margin-right:0.45rem; }
.icon-ml     { margin-left:0.5rem; }