/* Channel management below the player (design/admin-ux/index.html). Uses the tokens of style.css. */
.admin{margin:30px auto 8px;display:grid;gap:14px;max-width:960px}
.admin .eyebrow{font:600 1.5rem/1 var(--hand);color:var(--deep);margin:0}
.admin h2{margin:0;font-size:2rem;line-height:1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.admin .quota{font:600 .8rem var(--body);text-transform:none;background:var(--lime);border:2px solid var(--fg);border-radius:999px;padding:3px 10px;box-shadow:2px 2px 0 var(--fg)}
.admin .quota:empty{display:none}
.admin .who{margin:0;color:var(--muted);font-size:.9rem}
.admin .create{display:flex;gap:10px;flex-wrap:wrap}
.admin input,.admin textarea,.admin select{font:500 1rem var(--body);padding:10px 14px;border:2px solid var(--fg);border-radius:12px;background:#fff;color:var(--fg);min-height:48px;max-width:100%;min-width:0}
.admin textarea{min-height:5rem}
.admin .create input{flex:1 1 16rem}
.admin input::placeholder{color:rgba(28,28,28,.5)}
.admin button{font:600 .95rem var(--body);min-height:44px;padding:8px 16px;border-radius:999px;cursor:pointer;border:2px solid var(--fg);background:#fff;color:var(--fg);box-shadow:2px 2px 0 var(--fg)}
.admin button.primary{background:var(--fg);color:var(--cream);box-shadow:3px 3px 0 var(--lime)}
.admin .create button.primary{min-height:48px;padding:8px 22px}
.admin button.danger{background:var(--accent);color:#fff}
.admin button.text{background:none;border:0;box-shadow:none;color:var(--deep);padding:4px 0;min-height:32px;text-decoration:underline;text-underline-offset:3px}
.admin button:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}
.admin button:disabled{opacity:.5;cursor:default}
.admin :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.admin .msg{margin:0;font-family:var(--body)}.admin .msg:empty{display:none}
.admin .msg.bad{color:var(--deep);font-weight:700}
.admin .hint{color:var(--muted);font:500 .95rem var(--body);margin:0}
.admin .chans{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.admin .chans:empty{display:none}
.admin .chans>li{background:#fff;border:2px solid var(--fg);border-radius:16px;box-shadow:3px 3px 0 var(--fg);padding:12px 14px;display:grid;gap:8px;min-width:0}
.admin .chans>li.gone{background:var(--cream);box-shadow:none;border-style:dashed}
.admin .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.admin .name{font:1.15rem/1.1 var(--display);text-transform:uppercase;padding-top:3px;color:var(--fg);text-decoration:none;overflow-wrap:anywhere}
.admin a.name:hover{text-decoration:underline}
.admin .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.admin .pill{display:inline-flex;align-items:center;gap:6px;font:600 .8rem var(--body);padding:2px 10px;border-radius:999px;border:2px solid var(--fg);background:var(--cream)}
.admin .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fg)}
.admin .p-live{background:var(--lime)}.admin .p-live::before{background:var(--accent)}
.admin .p-make{background:var(--orange)}.admin .p-bad{background:var(--pink)}
.admin .bar{height:12px;background:var(--cream);border:2px solid var(--fg);border-radius:999px;overflow:hidden}
.admin .bar span{display:block;height:100%;background:var(--orange)}
.admin .steps{margin:0;padding-left:1.3rem;font:500 .95rem var(--body);color:var(--muted)}
.admin .steps .done{color:var(--fg)}.admin .steps .now{color:var(--fg);font-weight:600}
.admin .confirm{background:var(--cream);border:2px dashed var(--fg);border-radius:12px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin .confirm p{margin:0;flex:1 1 14rem;font-family:var(--body)}
.admin .edit{display:grid;gap:10px;background:var(--cream);border:2px dashed var(--fg);border-radius:12px;padding:12px}
.admin .edit label{display:grid;gap:4px;font:600 .95rem var(--body)}
.admin .edit label small{font-weight:400;color:var(--muted)}
.admin .settings{display:grid;gap:10px}
.admin .row{display:flex;gap:8px;flex-wrap:wrap}
.admin .people{background:var(--fg);color:var(--cream);border-radius:18px;padding:14px 16px;border:2px solid var(--fg);display:grid;gap:10px}
.admin .people summary{cursor:pointer;font:1.15rem/1 var(--display);text-transform:uppercase;min-height:32px;padding-top:6px}
.admin .people .hint,.admin .people .msg{color:rgba(250,249,240,.8)}
.admin .people .msg.bad{color:var(--pink)}
.admin .people button.primary{background:var(--lime);color:var(--fg);box-shadow:none}
.admin .people .chans>li{box-shadow:none;color:var(--fg)}
.admin .people .name{font:600 1rem var(--body);text-transform:none;padding:0}
.admin .people code{background:rgba(250,249,240,.15);padding:1px 6px;border-radius:4px;overflow-wrap:anywhere}
@media (prefers-reduced-motion:no-preference){.admin .bar span{transition:width .6s}}