/* Host account pages (sign in, register, account, manage hosts) and the privacy FAQ. Same midcentury TV-studio look as the front page
   (site/index.html): warm near-black stage with red light from the top, black rounded "TV screen" boards with brass trim, ivory text,
   SBU red buttons with a brass edge. Type is the "Marquee Lights" pair: Limelight (an art-deco theater-marquee face) for titles and headings only,
   Jost (a Futura-style geometric sans) for everything else, with wide-tracked capitals for labels and buttons. Same pair as the front page. */
:root{
  --bg:#130b0a; --board:#0c0908; --board-2:#1c1210; --red:#990000; --red-bright:#b3101c; --red-deep:#5c0a0d;
  --ivory:#f6ecd8; --muted:#bfb1a0; --brass:#c9a35a; --brass-light:#e8cd8f; --ink:#24130f; --ok:#8fd19e; --bad:#ff9d8f;
  --display:"Jost","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif; --body:var(--display); --serif:"Limelight","Didot",Georgia,serif;
  --r:10px; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;color:var(--ivory);font-family:var(--body);font-weight:500;line-height:1.5;background:var(--bg);
  background-image:radial-gradient(ellipse 85% 420px at 50% 40px,rgba(153,0,0,.42),transparent 72%),radial-gradient(ellipse 45% 240px at 50% 0,rgba(255,214,150,.09),transparent 70%)}
.wrap{max-width:480px;margin:0 auto;padding-block:26px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap.wide{max-width:1040px}
button,input,select{font:inherit}
a{color:var(--brass-light)}

/* page header: Duncan's round close-up and the site name, like the title board on the front page */
.top{display:flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;color:var(--ivory);margin-bottom:20px}
.top img{height:58px;width:58px;border-radius:50%;box-shadow:0 0 0 2.5px var(--brass),0 6px 14px rgba(0,0,0,.5)}
.top b{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1;letter-spacing:.02em}
.top b span{color:var(--brass-light)}

.card{position:relative;background:var(--board);color:var(--ivory);border:3px solid var(--brass);border-radius:24px/30px;padding:22px 24px;box-shadow:0 0 0 6px rgba(201,163,90,.12),0 20px 44px rgba(0,0,0,.5);display:grid;gap:10px;margin-bottom:24px}
.card h1,.card h2{font-family:var(--serif);font-weight:400;margin:0;color:var(--ivory);line-height:1.15;text-wrap:balance}
.card h1{font-size:1.65rem}.card h2{font-size:1.25rem;color:var(--brass-light)}
/* the brass HOST name badge (site/studio/host-badge.webp) pinned to the top corner of the host account cards; decorative only */
.hostbadge{position:absolute;top:-24px;right:16px;width:112px;height:auto;transform:rotate(5deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));pointer-events:none}
.card:has(.hostbadge) h1{padding-right:110px}
/* a heading with its studio icon (the invitation ticket on the admin's invite card) */
.card h1.withicon{display:flex;align-items:center;gap:12px}
.card h1.withicon img{width:56px;height:auto;flex:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
@media (max-width:420px){.hostbadge{width:90px;top:-20px}.card:has(.hostbadge) h1{padding-right:84px}}
.card p{margin:0;color:var(--muted)}
.card b{color:var(--ivory)}
.card ul{margin:0;padding-left:1.2em;color:var(--muted);display:grid;gap:4px}
.card small{color:var(--muted)}
.card label{font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.card input,.card select{border:2px solid var(--brass);border-radius:var(--r);padding:11px 13px;font-family:var(--body);font-weight:500;font-size:1.05rem;color:var(--ink);background:#fffaf0;width:100%}
.card input:focus-visible,.card select:focus-visible{outline:3px solid var(--ivory);outline-offset:2px;border-color:var(--brass-light)}
.btn{display:inline-block;text-align:center;text-decoration:none;border:0;border-bottom:5px solid var(--red-deep);background:var(--red);color:var(--ivory);padding:12px 18px;border-radius:var(--r);cursor:pointer;font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;margin-top:6px;box-shadow:inset 0 0 0 1.5px var(--brass)}
.btn:hover{background:var(--red-bright);box-shadow:inset 0 0 0 1.5px var(--brass-light)}
.btn:active{transform:translateY(2px);border-bottom-width:3px}
.btn.ghost{background:transparent;border-bottom-color:transparent;color:var(--ivory);box-shadow:inset 0 0 0 2px var(--brass)}
.btn.ghost:hover{background:rgba(201,163,90,.14)}
.btn.small{font-size:.72rem;letter-spacing:.08em;padding:7px 11px;border-bottom-width:3px;margin:0}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--ivory);outline-offset:2px}
.status{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--muted);min-height:1.4em;margin:0}
.status.err{color:var(--bad)}
.status.ok{color:var(--ok)}
.note{color:var(--muted);text-align:center;font-size:.95rem;margin:0}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.row>div{display:grid;gap:4px;align-content:start}
.linkbox{display:flex;gap:8px;align-items:stretch;background:#fffaf0;border:2px dashed var(--brass);border-radius:var(--r);padding:8px}
.linkbox code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:.9rem;align-self:center;color:var(--ink)}
.tablewrap{overflow-x:auto;margin:0 -6px}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid rgba(201,163,90,.22);vertical-align:middle}
th{font-family:var(--display);font-weight:600;font-size:.74rem;color:var(--brass-light);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
td small{display:block;color:var(--muted);font-weight:600}
td.acts,td.d{white-space:nowrap}
td.acts .btn+.btn{margin-left:6px}
.tag{display:inline-block;font-family:var(--display);font-weight:800;font-size:.72rem;padding:2px 7px;border-radius:99px;background:var(--board-2);color:var(--muted);box-shadow:inset 0 0 0 1px rgba(201,163,90,.35);text-transform:uppercase;letter-spacing:.04em}
.tag.admin{background:var(--brass);color:var(--ink);box-shadow:none}
.tag.live{background:#1d3a24;color:var(--ok);box-shadow:none}
.tag.off{background:#3e1412;color:var(--bad);box-shadow:none}
.empty{color:var(--muted);text-align:center;padding:14px}