/* Staff pages (students, income, payments, access, instructor) and the public instructor page.
   Uses the site variables from app.css so light and dark both work. Everything is scoped under .st or .ins. */
.st{--st-gap:14px}
.st .btn,.st button.btn{width:auto;margin-top:0;padding:9px 16px!important;font-size:13px!important}
.st .btn.sm{padding:6px 11px!important;font-size:12px!important}
.st .btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.st h2{margin:28px 0 12px;font-size:18px}
.st h3{margin:0 0 10px;font-size:15px}
.st .muted{color:var(--muted)}
.st-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.st-head h1{margin:0}
.st-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.st-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;margin:0 0 var(--st-gap)}
.st-card.flush{padding:0;overflow:hidden}
.st-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.st-grid.half{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:920px){.st-grid,.st-grid.half{grid-template-columns:1fr}}
.st-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--st-gap)}
/* inputs */
.st label.fl{display:block;font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
.st input[type=text],.st input[type=email],.st input[type=search],.st input[type=url],.st input[type=number],.st input[type=date],.st input[type=password],.st select,.st textarea{width:100%;padding:9px 11px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;border-radius:10px}
.st select option{background:var(--bg);color:var(--fg)}
.st textarea{font-family:var(--mono);font-size:14px;resize:vertical}
.st .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.st .row>*{flex:0 1 auto}.st .row>.grow{flex:1 1 200px}
.st .tick{display:flex;gap:8px;align-items:center;margin:8px 0;font:400 14px var(--sans)}
.st .tick input{width:auto}
.st .help{font:12px/1.5 var(--mono);color:var(--muted);margin:6px 0 0}
.st .errorlist{list-style:none;margin:4px 0 0;padding:0;color:var(--bad);font:12px var(--mono)}
.st .linkb{background:none;border:0;color:var(--accent);cursor:pointer;font:13px var(--mono);padding:0}
.st .linkb.bad{color:var(--bad)}
/* chips */
.st-chip{display:inline-block;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--muted);white-space:nowrap;margin:1px 3px 1px 0;background:transparent;text-decoration:none}
.st-chip.ok{border-color:var(--ok);color:var(--ok)}
.st-chip.bad{border-color:var(--bad);color:var(--bad)}
.st-chip.warn{border-color:var(--warn);color:var(--warn)}
.st-chip.free{border-color:var(--trunk);color:var(--trunk)}
a.st-chip:hover,a.st-chip.on{border-color:var(--accent);color:var(--fg)}
/* banners */
.st-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border:1px solid var(--line);border-left-width:4px;border-radius:10px;background:var(--surface);margin:0 0 16px;font-size:14px}
.st-banner.warn{border-left-color:var(--warn)}.st-banner.bad{border-left-color:var(--bad)}.st-banner.info{border-left-color:var(--accent)}
.st-banner b{font-family:var(--mono)}
.st-banner a{white-space:nowrap}
/* tables */
.st-tbl{overflow-x:auto}
.st-tbl table{width:100%;border-collapse:collapse;font-size:14px}
.st-tbl th{text-align:left;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.st-tbl th a{color:inherit;text-decoration:none}.st-tbl th a:hover,.st-tbl th a.on{color:var(--fg)}
.st-tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.st-tbl tr:last-child td{border-bottom:0}
.st-tbl td.num,.st-tbl th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.st-tbl td.chk,.st-tbl th.chk{width:34px;padding-right:0}
.st-tbl td.chk input{width:auto}
/* progress bars */
.st-bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;min-width:70px}
.st-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.st-bar.thin{height:6px}
.st-pct{display:flex;gap:8px;align-items:center;font:12px var(--mono);color:var(--muted)}.st-pct .st-bar{flex:1}
/* KPI */
.st-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 20px}
.st-kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.st-kpi span{display:block;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st-kpi b{display:block;font:700 26px var(--mono);margin-top:6px;letter-spacing:-.02em}
.st-kpi small{display:block;font:12px var(--mono);color:var(--muted);margin-top:2px}
.st-kpi.main{border-color:var(--accent)}
.st-activity{display:flex;gap:10px 26px;flex-wrap:wrap;padding:12px 16px;border:1px dashed var(--line);border-radius:12px;margin:0 0 20px;font-size:14px}
.st-activity b{font-family:var(--mono)}
/* chart */
.st-chart{display:flex;gap:6px;align-items:stretch;height:210px;padding-top:6px}
.st-chart .axis{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font:10px var(--mono);color:var(--muted);padding-bottom:22px;min-width:52px}
.st-chart .cols{flex:1;display:flex;gap:6px;align-items:stretch;overflow-x:auto;border-left:1px solid var(--line)}
.st-chart .col{flex:1;min-width:34px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.st-chart .col .v{font:10px var(--mono);color:var(--muted);margin-bottom:3px;white-space:nowrap}
.st-chart .col .barwrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line)}
.st-chart .col i{display:block;width:62%;max-width:46px;min-height:2px;background:var(--accent);border-radius:6px 6px 0 0}
.st-chart .col i.zero{background:var(--line)}
.st-chart .col span.l{font:10px var(--mono);color:var(--muted);margin-top:5px;white-space:nowrap}
.st-empty{padding:34px 16px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:14px}
.st-empty b{display:block;color:var(--fg);font-size:16px;margin-bottom:4px}
.st-share{display:flex;gap:8px;align-items:center;min-width:130px}.st-share .st-bar{flex:1}.st-share span{font:12px var(--mono);color:var(--muted);width:36px;text-align:right}
/* filters + pills */
.st-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.st-filters .grow{flex:1 1 220px}
.st-filters input,.st-filters select{width:auto}
.st-pills{display:flex;gap:4px;flex-wrap:wrap}
.st-pills a{font:500 13px var(--sans);padding:7px 12px;border:1px solid var(--line);color:var(--muted);text-decoration:none;border-radius:8px}
.st-pills a.on{border-color:var(--accent);color:var(--fg)}
.st-pager{display:flex;gap:14px;align-items:center;justify-content:center;font:13px var(--mono);color:var(--muted);margin:16px 0}
.st-bulk{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.st-bulk select,.st-bulk input[type=text]{width:auto!important}
/* detail page */
.st-secret{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--accent);border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,transparent);margin:0 0 16px}
.st-secret input{flex:1 1 280px;font-family:var(--mono)!important}
.st-timeline{list-style:none;margin:0;padding:0}
.st-timeline li{display:grid;grid-template-columns:110px 130px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.st-timeline li:last-child{border:0}
.st-timeline time,.st-timeline em{font:12px var(--mono);color:var(--muted);font-style:normal}
@media(max-width:600px){.st-timeline li{grid-template-columns:1fr}}
.st details{margin:10px 0}.st summary{cursor:pointer;font:500 13px var(--mono);color:var(--accent)}
.st-course h3{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.st-mini{font:12px/1.6 var(--mono);color:var(--muted);margin:8px 0 0}
/* import page */
.st-cheat{width:100%;border-collapse:collapse;font-size:13px}
.st-cheat td{padding:6px 10px 6px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.st-cheat td:first-child{font-family:var(--mono);white-space:nowrap;color:var(--accent)}
.st pre.sample{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:13px/1.55 var(--mono);overflow:auto;max-height:340px;margin:8px 0 0;white-space:pre}
.st-steps{margin:0;padding-left:20px}.st-steps li{margin:6px 0}
.st code{font-family:var(--mono);font-size:.92em;background:color-mix(in srgb,var(--accent) 10%,transparent);padding:1px 5px;border-radius:5px}
.st-cfg{display:grid;grid-template-columns:230px 1fr;gap:6px 14px;font-size:14px}
.st-cfg dt{font-family:var(--mono);font-size:13px}.st-cfg dd{margin:0}
@media(max-width:600px){.st-cfg{grid-template-columns:1fr}}
.st-url{display:flex;gap:8px}.st-url input{font-family:var(--mono)!important}
/* instructor page (public) */
.ins{max-width:900px;margin:0 auto}
.ins-hero{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;margin-bottom:28px}
@media(max-width:640px){.ins-hero{grid-template-columns:1fr;text-align:left}.ins-photo{max-width:200px}}
.ins-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:3px solid var(--accent);background:var(--surface)}
.ins-hero h1{margin:0 0 6px}
.ins-headline{font:500 16px var(--mono);color:var(--accent);margin:0 0 8px}
.ins-meta{font:13px var(--mono);color:var(--muted);margin:0}
.ins-links{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.ins-bio p{font-size:17px;line-height:1.7;max-width:68ch}
.ins-creds{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ins-creds li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.ins-creds b{display:block}.ins-creds span{font:12px var(--mono);color:var(--muted)}

/* credentials editor cards */
.cr-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 12px;background:var(--bg)}
.cr-card.gone{opacity:.55}.cr-card.gone>*:not(.cr-top):not(.cr-gone){display:none}
.cr-top{display:flex;justify-content:space-between;align-items:center}.cr-mv{display:flex;gap:4px}
.cr-two{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px}
.cr-badge{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.cr-badge img{border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.cr-bot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.ins-creds img.cb{width:40px;height:40px;object-fit:contain;border-radius:8px;background:#fff}
.cred img.cb{width:20px;height:20px;object-fit:contain;border-radius:4px;background:#fff}

.cr-tg{display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;color:inherit;font:inherit;cursor:pointer;text-align:left;flex:1;min-width:0}.cr-tg b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cr-ch{display:inline-block;transition:transform .15s;color:var(--muted)}.cr-card.open .cr-ch{transform:rotate(90deg)}
.cr-card:not(.open) .cr-body{display:none}.cr-card.gone .cr-body{display:none}
.st-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 20px;overflow-x:auto}
.st-tabs button{font:600 13px var(--mono);background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);padding:10px 14px;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.st-tabs button:hover{color:var(--fg)}
.st-tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.st-tabs .n{display:inline-block;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:0 7px;margin-left:4px}
.st-pane[hidden]{display:none}
.site-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.site-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.site-row label.grow{flex:1 1 260px}
.site-row label.tog{flex-direction:row;align-items:center;gap:6px;color:var(--fg);font-size:14px;padding-bottom:8px}
.site-row .row{display:flex;gap:10px;align-items:center}