/* Super Admin console: same ThesisFlow design language (theme.css colours, glass, rc- components from rec.css). */
.sa-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px clamp(14px, 3vw, 32px); background: var(--bg-nav, var(--bg-card)); border-bottom: 1px solid var(--border-card); backdrop-filter: blur(var(--glass-blur, 16px)); -webkit-backdrop-filter: blur(var(--glass-blur, 16px)); }
.sa-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-heading); } .sa-brand i { color: var(--text-accent); font-size: 20px; } .sa-brand b { font-size: 17px; } .sa-brand span { padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--accent-soft); color: var(--text-accent); }
.sa-bar-r { display: flex; align-items: center; gap: 10px; } .sa-who { font-size: 13px; color: var(--text-muted); }
.sa-main { max-width: 1240px; margin: 0 auto; padding: 22px clamp(14px, 3vw, 32px) 60px; position: relative; z-index: 1; }
.sa-login-body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px; font-family: system-ui, sans-serif; color: var(--text-primary); }
.sa-login { position: relative; z-index: 1; width: min(420px, 100%); padding: 34px 30px; border-radius: 24px; background: var(--bg-modal, var(--bg-card)); border: 1px solid var(--border-card); box-shadow: var(--card-shadow); }
.sa-login h1 { margin: 10px 0 4px; font-size: 1.7rem; color: var(--text-heading); } .sa-login > p { margin: 0 0 18px; color: var(--text-muted); font-size: 14px; }
.sa-mark { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--accent-soft); color: var(--text-accent); }
.sa-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sa-plan { display: flex; flex-direction: column; gap: 8px; } .sa-plan .price { font-size: 1.6rem; font-weight: 800; color: var(--text-heading); } .sa-plan .price small { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sa-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--text-secondary); } .sa-plan li.off { color: var(--text-faint); text-decoration: line-through; }
.sa-meter { margin: 0 0 12px; } .sa-meter .t { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); } .sa-meter .t b { color: var(--text-heading); }
.sa-meter .b { height: 8px; border-radius: 99px; background: var(--bg-input); overflow: hidden; margin-top: 5px; } .sa-meter .b i { display: block; height: 100%; background: var(--accent); } .sa-meter .b i.hot { background: #ef4444; }
.sa-secret { font-family: ui-monospace, Menlo, monospace; font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--bg-input); border: 1px dashed var(--border-input); overflow-wrap: anywhere; user-select: all; }
.sa-feat { display: grid; gap: 8px; } .sa-feat label { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--text-primary); } .sa-feat select { height: 32px; width: auto; font-size: 12.5px; }
.rc-pill.trial { background: rgba(59,130,246,.16); color: #60a5fa; border-color: transparent; } .rc-pill.active { background: rgba(34,197,94,.15); color: #22c55e; border-color: transparent; } .rc-pill.past_due { background: rgba(245,158,11,.16); color: #f59e0b; border-color: transparent; }
.rc-pill.expired, .rc-pill.suspended, .rc-pill.cancelled, .rc-pill.unpaid { background: rgba(239,68,68,.15); color: #f87171; border-color: transparent; } .rc-pill.paid { background: rgba(34,197,94,.15); color: #22c55e; border-color: transparent; } .rc-pill.void { opacity: .6; }

[hidden] { display: none !important; }