/* Admin panel. Reuses the portal's theme variables from style.css. */
.admin-body { display: block; }

/* Lock screen */
.lock { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--bg); }
.lock-box {
  width: min(360px, 90vw); background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; text-align: center;
  display: flex; flex-direction: column; gap: 12px;
}
.lock-icon { font-size: 3rem; }
.lock-box h1 { margin: 0; font-size: 1.4rem; }
.lock-box .hint { margin: 0; }
.lock-box input {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 12px 14px; font-size: 1rem; outline: none; text-align: center;
}
.lock-box input:focus { border-color: var(--accent); }
.lock-msg { color: var(--danger); font-weight: 700; margin: 0; }
.lock-note { font-size: .75rem; opacity: .7; }
.lock-note code { background: rgba(128,128,128,.2); border-radius: 4px; padding: 1px 4px; }

/* Layout */
.admin-main { padding: 18px; max-width: 1200px; margin: 0 auto; width: 100%; }
.admin-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.admin-toolbar .search { max-width: 280px; }
.admin-toolbar .spacer { flex: 1; }
.cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.panel-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
}
.panel-card h3 { margin: 0 0 6px; }
.panel-card .row { margin-top: 10px; }
.narrow { max-width: 70px; text-align: center; }

/* Table */
.table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 760px; }
.admin-table th {
  position: sticky; top: 0; background: var(--bg2); text-align: left;
  padding: 10px 12px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border); z-index: 2;
}
.admin-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr.off { opacity: .45; }
.admin-table tr:hover td { background: var(--card-hover); }
.c-on, .c-pin { width: 52px; text-align: center; }
.c-art { width: 46px; }
.c-emoji { width: 74px; }
.c-cat { width: 130px; }
.admin-table td:nth-child(3) { max-width: 340px; }
.c-num { width: 70px; text-align: right; }
.admin-table td.c-num { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-art { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 1.05rem; }
.g-id { color: var(--muted); font-size: .72rem; display: block; }
.cell-in {
  width: 100%; background: transparent; border: 1px solid transparent; color: var(--text);
  border-radius: 8px; padding: 5px 7px; font: inherit; outline: none;
}
.cell-in:hover { border-color: var(--border); }
.cell-in:focus { border-color: var(--accent); background: var(--bg2); }
.cell-in.changed { border-color: var(--accent2); }
.cell-sel { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 5px 7px; font: inherit; width: 100%; }
.sw { width: 34px; height: 20px; border-radius: 999px; border: 0; background: var(--border); position: relative; cursor: pointer; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.sw.on { background: var(--accent); }
.sw.on::after { left: 16px; }
.pinbtn { background: none; border: 0; font-size: 1.1rem; opacity: .3; }
.pinbtn.on { opacity: 1; }

/* Stats */
.stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; }
.tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.tile b { display: block; font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span { color: var(--muted); font-size: .82rem; }
.bar-row { display: grid; grid-template-columns: 1fr 46px; gap: 10px; align-items: center; margin: 7px 0; font-size: .88rem; }
.bar { background: var(--bg2); border-radius: 999px; height: 22px; overflow: hidden; position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.bar span { position: relative; padding-left: 9px; line-height: 22px; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.bar-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Publish */
.steps { margin: 8px 0 14px; padding-left: 20px; line-height: 1.7; }
.cmd, .preview {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; overflow: auto; font-family: ui-monospace, monospace; font-size: .82rem;
  white-space: pre; margin: 0;
}
.preview { max-height: 420px; }
.dev-tag { background: var(--danger); }

/* hacks tab pills */
.pill.on { background: #a21caf; color: #fff; border-color: #a21caf; }