/* /admin: personal accounts. Builds on the game's stylesheet (variables, .card, .glass, buttons). */
html,body{height:auto;min-height:100%;overflow:auto;-webkit-user-select:text;user-select:text}
body.adminPage{background:radial-gradient(80rem 40rem at 10% -10%,rgba(227,173,53,.12),transparent 60%),var(--bg);padding:max(1rem,env(safe-area-inset-top)) 1rem 2rem}
.adminPage .card{max-height:none}
.sysTools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.8rem}
.sysTools .field-in{flex:1;min-width:10rem}
.sysSelect{appearance:none;padding:.3rem 1.6rem .3rem .55rem;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a9bcc4'/%3E%3C/svg%3E") no-repeat right .5rem center;color:var(--ink);font:500 .75rem var(--ui);cursor:pointer}
.sysSelect:disabled{opacity:.5;cursor:default}
.sysBadge{padding:.1rem .45rem;border-radius:99px;font-size:.7rem;white-space:nowrap;border:1px solid var(--line);color:var(--soft)}
.sysBadge.on{color:#bff3da;border-color:rgba(60,207,142,.45)}
.sysBadge.ban{color:#ffc2b3;border-color:rgba(255,122,92,.45)}
.sysBadge.mute{color:#ffe0a3;border-color:rgba(227,173,53,.5)}
.sysMore{display:block;margin:.8rem auto 0}
.sysNote{margin:.2rem 0 .8rem;color:var(--soft);font-size:.82rem;line-height:1.45}
.sysSeg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sysSeg button{appearance:none;padding:.35rem .7rem;border:0;border-right:1px solid var(--line);background:transparent;color:var(--soft);font:600 .76rem var(--ui);cursor:pointer}
.sysSeg button:last-child{border-right:0}
.sysSeg button[aria-pressed="true"]{background:rgba(227,173,53,.18);color:#ffd98a}
.sysSeg button[aria-pressed="true"][data-mode="public"]{background:rgba(60,207,142,.16);color:#bff3da}
.sysSeg button[aria-pressed="true"][data-mode="off"]{background:rgba(255,122,92,.14);color:#ffc2b3}
.sysSeg button:disabled{cursor:default}
.sysAccessRow{display:flex;align-items:center;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--line)}
.sysAccessRow span{flex:1}
.sysOutcome{padding:.1rem .45rem;border-radius:6px;font-size:.7rem;background:var(--seg);color:var(--soft);white-space:nowrap}
.sysOutcome.applied,.sysOutcome.sent{background:rgba(60,207,142,.14);color:#bff3da}
.sysOutcome.reported_applied{background:rgba(95,196,255,.14);color:#bfe6ff}
.sysOutcome.failed,.sysOutcome.reported_failed{background:rgba(255,122,92,.14);color:#ffc2b3}
.sysOutcome.unknown,.sysOutcome.requested{background:rgba(227,173,53,.14);color:#ffe0a3}
.sysLog{list-style:none;margin:0;padding:0;font-size:.84rem}
.sysLog li{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.2rem .8rem;align-items:baseline;padding:.5rem 0;border-top:1px solid var(--line)}
.sysLog time{color:var(--soft);font-size:.74rem;font-variant-numeric:tabular-nums}
.sysLog .who{color:var(--soft)}
.sysPerms{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.3rem .8rem;margin:.6rem 0}
.sysPerms label{display:flex;gap:.4rem;align-items:center;font-size:.8rem;color:var(--soft)}
.sysRoleCard{padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--card2);margin-top:.7rem}
.sysRoleCard header{display:flex;align-items:center;gap:.6rem}
.sysRoleCard header strong{flex:1}
.sysForm{display:grid;grid-template-columns:1fr 1fr auto auto;gap:.5rem;align-items:center;margin:.6rem 0 1rem}
.sysLogin form{display:grid;gap:.6rem;margin-top:1rem;text-align:left}
.sysLogin label{display:grid;gap:.3rem;font-size:.8rem;color:var(--soft)}
/* ads and music */
.sysThumb{flex:none;width:4.2rem;height:2.36rem;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#000}
.sysAudio{height:2rem;max-width:14rem}
.sysAdForm{display:grid;gap:.6rem;margin:.6rem 0 1rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--card2)}
.sysAdForm label{display:grid;gap:.3rem;font-size:.8rem;color:var(--soft)}
.sysAdRow{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.6rem}
.sysAdForm .primary{justify-self:start}
.sysSlots .sysAll{display:flex;gap:.45rem;align-items:center;font-size:.84rem;color:var(--ink)}
.sysSlotGrid{display:grid;gap:.35rem;margin-top:.5rem}
.sysSlotMap{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .8rem;font-size:.8rem;color:var(--soft)}
.sysSlotMap b{min-width:8.5rem;color:var(--ink);font-weight:600}
.sysSlotMap label{display:inline-flex;gap:.25rem;align-items:center}
.sysAccessRow .sysAudio{flex:none}
@media (max-width:640px){.sysAdRow{grid-template-columns:1fr}.sysPerson{flex-wrap:wrap}.sysPersonName{flex-basis:calc(100% - 2.6rem)}.sysRoom{padding:.8rem}.sysForm{grid-template-columns:1fr}.sysLog li{grid-template-columns:1fr auto}.sysLog time{grid-column:1/-1}}

/* Admin page. Panel look carried over from the former in-game window. */
.sysCard{--ok:#3ccf8e;--bad:#ff7a5c;--info:#5fc4ff;--card2:rgba(255,255,255,.035);
  width:min(64rem,100%);display:flex;flex-direction:column;padding:0;overflow:hidden;margin:0 auto;
  background:linear-gradient(180deg,rgba(227,173,53,.07),transparent 9rem),rgba(10,18,25,.94)}
.sysCard:has(#sysLogin:not([hidden])){width:min(30rem,100%)}
.sysCard h3{margin:1.2rem 0 .35rem;font:700 .74rem var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.sysCard h3:first-child{margin-top:.2rem}
.sysCard code{font:600 .82em ui-monospace,SFMono-Regular,Menlo,monospace;color:#ffd98a}
.sysTop{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.4rem .9rem}
.sysBrand{margin-right:auto}.sysBrand h2{font-size:2.3rem;letter-spacing:.01em}
.sysEyebrow{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem;font:700 .68rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.sysLive{width:.55rem;height:.55rem;border-radius:50%;background:#5b6b73}
.sysLive.on{background:var(--ok);box-shadow:0 0 0 0 rgba(60,207,142,.6);animation:sysPulse 2s infinite}
@keyframes sysPulse{70%{box-shadow:0 0 0 .5rem rgba(60,207,142,0)}100%{box-shadow:0 0 0 0 rgba(60,207,142,0)}}
.sysStatsText{color:var(--soft);font-size:.82rem;font-variant-numeric:tabular-nums}
.sysIconBtn{appearance:none;width:2.2rem;height:2.2rem;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--soft);font:600 .9rem var(--ui);cursor:pointer}
.sysIconBtn:hover{color:var(--ink);background:var(--seg-h)}
.sysMsg{margin:0 1.4rem;min-height:0;max-height:0;overflow:hidden;border-radius:10px;font-size:.84rem;transition:max-height .25s,padding .25s,margin .25s;background:rgba(60,207,142,.12);color:#bff3da;border:0}
.sysMsg:empty{background:none}
.sysMsg:not(:empty){max-height:4rem;padding:.55rem .8rem;margin-bottom:.6rem;border:1px solid rgba(60,207,142,.35)}
.sysMsg.bad{background:rgba(255,122,92,.12);color:#ffc2b3}.sysMsg.bad:not(:empty){border-color:rgba(255,122,92,.4)}

.sysCard .field-in{appearance:none;box-sizing:border-box;width:100%;min-width:0;padding:.62rem .75rem;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.28);color:var(--ink);font:500 .95rem var(--ui);transition:border-color .15s,box-shadow .15s}
.sysCard .field-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(227,173,53,.18)}
.sysCard .field-in::placeholder{color:#6f8490}
.sysRow{display:flex;gap:.5rem}.sysRow .field-in{flex:1}

.sysLogin{padding:1.5rem 1.4rem 2rem;max-width:26rem;margin:auto;text-align:center}
.sysLogin .sysRow{margin-top:1rem}
.sysLock{font-size:2.4rem}.sysLead{margin:.4rem 0 0;color:var(--ink)}

#sysPanel{display:flex;flex-direction:column;flex:1;min-height:0}
#sysPanel[hidden]{display:none}
.sysKpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:0 1.4rem;margin-top:.3rem}
.sysKpi{padding:.7rem .85rem;border:1px solid var(--line);border-radius:14px;background:var(--card2)}
.sysKpi b{display:block;font:700 1.9rem/1 var(--display);font-variant-numeric:tabular-nums}
.sysKpi span{display:block;margin-top:.3rem;font-size:.74rem;color:var(--soft)}
.sysKpi:nth-child(3) b{color:var(--accent)}.sysKpi:nth-child(4) b{color:var(--bad)}

.sysTabs{display:flex;gap:.2rem;margin:1rem 1.4rem 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sysTabs button{appearance:none;position:relative;padding:.7rem .85rem;border:0;background:none;color:var(--soft);font:600 .88rem var(--ui);cursor:pointer;white-space:nowrap}
.sysTabs button:hover{color:var(--ink)}
.sysTabs button[aria-selected="true"]{color:var(--ink)}
.sysTabs button[aria-selected="true"]::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.sysCount{display:inline-block;min-width:1.2rem;margin-left:.25rem;padding:.05rem .35rem;border-radius:99px;background:var(--seg-h);font-size:.72rem;text-align:center}
.sysCount:empty{display:none}
.sysPane{flex:1;min-height:0;overflow:auto;padding:1rem 1.4rem 1.2rem}

.sysEmpty{display:grid;place-items:center;gap:.3rem;padding:2.6rem 1rem;border:1px dashed var(--line);border-radius:16px;color:var(--soft);text-align:center;font-size:.9rem}
.sysEmpty b{font-size:1.8rem}

.sysRooms{display:grid;gap:.8rem}
.sysRoom{padding:1rem;border:1px solid var(--line);border-radius:16px;background:var(--card2)}
.sysRoomHead{display:flex;align-items:flex-start;gap:.8rem}
.sysRoomTitle{flex:1;min-width:0}.sysRoomTitle strong{display:block;font-size:1.05rem;overflow-wrap:anywhere}
.sysTags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.sysTag{padding:.16rem .5rem;border-radius:99px;border:1px solid var(--line);font-size:.72rem;color:var(--soft);white-space:nowrap}
.sysTag.public{color:#bff3da;border-color:rgba(60,207,142,.4)}
.sysTag.private{color:#c9d8ff;border-color:rgba(95,196,255,.4)}
.sysTag.password{color:#ffe0a3;border-color:rgba(227,173,53,.5)}
.sysTag.egg{color:#e2d2ff;border-color:rgba(155,122,232,.5)}
.sysCode{appearance:none;padding:.3rem .6rem;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.25);color:var(--ink);font:700 1.2rem var(--display);letter-spacing:.14em;cursor:pointer}
.sysCode:hover{border-color:var(--accent)}
.sysFill{margin:.85rem 0 .2rem}
.sysFillBar{height:.4rem;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.sysFillBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#f5d27a)}
.sysFillBar i.full{background:var(--bad)}
.sysFill small{display:flex;justify-content:space-between;margin-top:.3rem;color:var(--soft);font-size:.74rem}
.sysActs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.sysGroup{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sysGroup button{appearance:none;padding:.45rem .65rem;border:0;border-right:1px solid var(--line);background:transparent;color:var(--ink);font:500 .8rem var(--ui);cursor:pointer}
.sysGroup button:last-child{border-right:0}
.sysGroup button:hover{background:var(--seg-h)}
.sysActs .spacer{flex:1}

.sysPeople,.sysHistory{list-style:none;margin:.8rem 0 0;padding:0;font-size:.86rem}
.sysPerson{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-top:1px solid var(--line)}
.sysAvatar{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;font:700 .8rem var(--ui);color:#0c161d}
.sysPersonName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sysPersonName small{margin-left:.4rem;color:var(--soft)}
.sysRole{padding:.1rem .4rem;border-radius:6px;background:var(--seg);font-size:.7rem;color:var(--soft)}
.sysRole.host{background:rgba(227,173,53,.16);color:#ffd98a}.sysRole.admin{background:rgba(95,196,255,.14);color:#bfe6ff}
.sysPerson .ghost.small{padding:.3rem .55rem;font-size:.75rem;opacity:.75}
.sysPerson:hover .ghost.small{opacity:1}

.sysAnnounceBox{display:flex;align-items:center;gap:.5rem}
.sysAnnounceBox .field-in{flex:1}
.sysCounter{color:var(--soft);font-size:.74rem;font-variant-numeric:tabular-nums}
.sysCmds{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.55rem;margin-top:.7rem}
.sysCmd{appearance:none;display:grid;gap:.25rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--card2);color:var(--soft);text-align:left;font:400 .8rem var(--ui);cursor:pointer;transition:border-color .15s,transform .15s}
.sysCmd code{font-size:.95rem}
.sysCmd:hover{border-color:var(--accent);transform:translateY(-1px)}
.sysCmd.danger code{color:#ffb3a1}.sysCmd.danger:hover{border-color:var(--bad)}
.sysCmd.copied{border-color:var(--ok)}

.sysEggHero{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-radius:14px;background:linear-gradient(120deg,rgba(155,122,232,.18),rgba(47,191,168,.1));border:1px solid rgba(155,122,232,.3)}
.sysEggHero .hint{margin:.15rem 0 0}.sysEggIcon{font-size:1.8rem}
.sysEggSummary{margin:.9rem 0 .2rem;font-size:.88rem;line-height:1.5;color:var(--ink)}
.sysEggSummary b{color:var(--accent)}
.sysGrid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem;margin:.8rem 0 .2rem}
.sysGrid label{display:grid;gap:.35rem;font-size:.8rem;color:var(--soft)}
.sysUnit{position:relative;display:block}
.sysUnit i{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);font-style:normal;font-size:.8rem;color:var(--soft);pointer-events:none}
.sysUnit .field-in{padding-right:3rem}
.sysHistory{counter-reset:none}
.sysHistory li{position:relative;padding:.1rem 0 .8rem 1.2rem;color:var(--soft);border-left:2px solid var(--line);margin-left:.35rem}
.sysHistory li::before{content:"";position:absolute;left:-.4rem;top:.3rem;width:.6rem;height:.6rem;border-radius:50%;background:#9b7ae8}
.sysHistory li.forced::before{background:var(--accent)}
.sysHistory li b{color:var(--ink);font-weight:600}
.sysHistory li small{display:block;font-size:.74rem}
.sysHistory li.sysEmpty{border:1px dashed var(--line);margin:0;padding:1.2rem}.sysHistory li.sysEmpty::before{display:none}

.sysFoot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.4rem;border-top:1px solid var(--line)}
.sysFoot .hint{margin:0}

@media (max-width:640px){
  .sysTop,.sysPane{padding-left:1rem;padding-right:1rem}.sysKpis,.sysTabs{margin-left:1rem;margin-right:1rem;padding:0}
  .sysMsg{margin-left:1rem;margin-right:1rem}.sysFoot{padding:.7rem 1rem}
  .sysKpis{gap:.4rem}.sysKpi{padding:.5rem .55rem;border-radius:11px}.sysKpi b{font-size:1.35rem}.sysKpi span{font-size:.66rem}
  .sysGrid{grid-template-columns:1fr}
  .sysStatsText{display:none}.sysBrand h2{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){.sysLive.on{animation:none}.sysCmd:hover{transform:none}}

.sysHistoryHead{display:flex;align-items:center;justify-content:space-between;gap:1rem}.sysHistoryHead h3{margin:0}.roomHistoryList .hint{margin:.35rem 0 0;overflow-wrap:anywhere}.roomHistoryList b{overflow-wrap:anywhere}