/* Shared admin presentation. Deliberately scoped away from player/game screens. */
body[data-screen="db"] {
  --app-shell-width: 1280px;
  background: #0c1423;
}
body[data-screen="db"] > .app-header, body[data-screen="db"] > .sub { display: none; }
body[data-screen="db"] > .card {
  max-width: 1280px;
  padding: 0;
  border-radius: 18px;
  background: #101c2e;
  box-shadow: 0 12px 40px #0002;
  overflow: clip;
}
#db {
  --admin-border: #2a3a50;
  --admin-surface: #152338;
  --admin-inset: #101c2e;
  --admin-accent: #7dd3fc;
  --muted: #a3b2c7;
  --text: #edf3fb;
  color-scheme: dark;
  font-size: 14px;
  line-height: 1.55;
}
#db > .topbar { display: none; }
#db .admin-workspace { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: start; min-height: 650px; }
#db .admin-sidebar { padding: 26px 14px; position: sticky; top: 0; }
#db .admin-brand { display: flex; align-items: center; gap: 10px; margin: 0 10px 28px; }
#db .admin-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #164c66; color: #bae6fd; font-weight: 800; }
#db .admin-brand strong { display: block; font-size: 16px; letter-spacing: .04em; }
#db .admin-brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
#db .admin-panel-tabs { display: grid; gap: 20px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; }
#db .admin-nav-group { display: grid; gap: 4px; }
#db .admin-nav-label { color: #8295af; padding: 0 12px 5px; font-size: 11px; letter-spacing: .12em; }
#db .admin-panel-tab { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; text-align: left; background: none; box-shadow: none; color: #b9c8dc; font-size: 14px; font-weight: 600; min-height: 44px; }
#db .admin-panel-tab:hover { background: #1b2b42; color: #fff; }
#db .admin-panel-tab.active { background: #12384e; color: #a5e2ff; border-color: #24536a; }
#db .admin-feedback-count { margin-left: auto; border-radius: 20px; padding: 0 7px; background: #614620; color: #fde68a; font-size: 11px; }
#db .admin-home { width: 100%; text-align: left; padding: 12px; margin-top: 28px; background: none; border: 0; border-top: 1px solid var(--admin-border); color: var(--muted); cursor: pointer; font: inherit; }
#db .admin-main { min-width: 0; padding: 28px; border-left: 1px solid var(--admin-border); background: #111e31; min-height: 650px; }
#db .admin-page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
#db .admin-breadcrumb { font-size: 11px; letter-spacing: .04em; color: var(--muted); margin: 0 0 10px; }
#db .admin-page-head h1 { font-size: 25px; line-height: 1.3; letter-spacing: .03em; margin: 0 0 6px; font-weight: 750; text-align: left; color: var(--text); background: none; -webkit-text-fill-color: var(--text); }
#db #adminPageDescription { color: var(--muted); margin: 0; font-size: 13px; }
#db .admin-page-head > .btn { flex-shrink: 0; }
#db .admin-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 14px; margin-bottom: 16px; border: 1px solid #66522e; border-radius: 9px; background: #332c20; color: #ead5a7; cursor: pointer; text-align: left; font: inherit; font-size: 13px; }
#db .admin-leave-dialog { width: min(430px, calc(100vw - 32px)); padding: 24px; border: 1px solid #3a4c64; border-radius: 14px; background: #152338; color: var(--text); box-shadow: 0 24px 80px #0008; }
#db .admin-leave-dialog::backdrop { background: #060d19bb; }
#db .admin-leave-dialog h2 { margin: 0 0 10px; font-size: 18px; }
#db .admin-leave-dialog p { color: var(--muted); font-size: 14px; }
#db .admin-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
#db .admin-dialog-description { white-space: pre-wrap; max-height: 45vh; overflow: auto; }
#db .admin-dialog-fields { display: grid; gap: 14px; }
#db .admin-dialog-fields label { display: grid; gap: 7px; }
#db .admin-panel-body { display: grid; gap: 18px; min-width: 0; }
#db .rank-section { min-width: 0; margin: 0; padding: 20px; background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: 12px; box-shadow: none; }
#db .rank-title { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0; }
#db .info-box { margin-bottom: 16px; padding: 10px 12px; background: #122033; border: 1px solid var(--admin-border); border-radius: 8px; font-size: 12px; line-height: 1.65; color: var(--muted); }
#db .btn, #db a.btn { min-height: 38px; width: auto; padding: 8px 13px !important; border-radius: 7px; border: 1px solid #4bb4d0; background: #14758a; color: #f0fcff; box-shadow: none !important; font: inherit; font-size: 13px !important; font-weight: 600; line-height: 1.4; text-decoration: none; }
#db .btn.alt, #db .qa-pack-btns [data-act="edit"] { border-color: #3a4c64; background: #1b2c43; color: #d4e0f1; }
#db .btn:hover { filter: brightness(1.13); transform: none; }
#db :is(button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #7dd3fc; outline-offset: 3px; }
#db :is(button, input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
#db :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  min-width: 0; max-width: 100%; width: 100%; min-height: 40px; padding: 9px 11px !important; border-radius: 7px !important; border: 1px solid #3a4c64 !important; background: #0f1c2e !important; color: var(--text) !important; box-shadow: none; font-family: inherit; font-size: 14px !important; line-height: 1.5;
}
#db input::placeholder, #db textarea::placeholder { color: #8195af; opacity: 1; }
#db textarea { resize: vertical; min-height: 100px; }
#db :is(input[type="checkbox"], input[type="radio"]) { accent-color: #38bdf8; width: 17px; height: 17px; flex: 0 0 auto; }
#db label { color: #b9c8dc; font-size: 12px; }
#db [hidden] { display: none !important; }
#db .empty, #db .quest-empty, #db .ko-empty { padding: 24px 16px; color: var(--muted); font-size: 13px; text-align: center; }
#db .admin-loading { min-height: 200px; display: grid; place-content: center; }
#db .admin-disclosure { margin: 12px 0; border: 1px solid var(--admin-border); border-radius: 9px; background: var(--admin-inset); min-width: 0; }
#db .admin-disclosure > summary { padding: 12px 14px; color: #b9e6ff; font-size: 13px; font-weight: 650; cursor: pointer; min-height: 44px; }
#db .admin-disclosure[open] > summary { border-bottom: 1px solid var(--admin-border); }
#db .admin-disclosure > :not(summary) { margin: 0; border: 0; border-radius: 0; padding: 16px; background: transparent; }
#db .admin-disclosure .challenge-admin-form-title, #db .admin-disclosure .qa-section > h4 { display: none; }
#db .admin-disclosure .challenge-admin-history-heading { display: none; }
#db .admin-search-toolbar { display: flex; align-items: end; gap: 14px; margin: 0 0 14px; }
#db .admin-search-label { flex: 1; display: grid; gap: 6px; }
#db .admin-search-label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#db .admin-search-count { color: var(--muted); font-size: 12px; white-space: nowrap; padding-bottom: 10px; font-variant-numeric: tabular-nums; }
#db .admin-add-user-grid { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; }
#db .admin-add-user-grid label { display: grid; gap: 6px; }
#db .db-user-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
#db .db-user-toolbar > input { flex: 1 1 220px; }
#db .db-user-details, #db .announcement-admin-row, #db .feedback-admin-item, #db .qa-pack-row { background: var(--admin-inset); border: 1px solid var(--admin-border); border-radius: 9px; box-shadow: none; min-width: 0; }
#db .db-user-summary { min-height: 72px; }
#db .db-user-body { border-top: 1px solid var(--admin-border); }
#db .db-user-name { font-size: 15px; }
#db .db-user-id { color: var(--muted); overflow-wrap: anywhere; }
#db .db-user-actions { gap: 14px; }
#db .db-action-group { padding-top: 10px; }
#db .db-action-label { color: var(--muted); font-size: 12px; }
#db :is([data-delete-user], [data-clear], [data-clear-password], [data-clear-email], [data-feedback-delete], [data-announcement-delete], [data-challenge-delete], [data-drawing-delete-artwork], [data-drawing-delete-all], [data-drawing-cleanup-missing], #dbWipe, [data-act="del"]) { background: #36232c !important; border: 1px solid #6f3b49 !important; color: #f6b2bf !important; }
#db [data-points-action="add"] { background: #14758a !important; }
#db .admin-backup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#db .announcement-admin-row-title, #db .qa-pack-title { font-size: 14px; }
#db .announcement-admin-row-title b { border: 1px solid #3c5e52; background: #1b392f; color: #94dabb; font-size: 11px; font-weight: 600; }
#db .announcement-admin-row.inactive .announcement-admin-row-title b, #db .announcement-admin-row.expired .announcement-admin-row-title b { background: #263248; border-color: #3e4c61; color: #b1bdd0; }
#db .announcement-admin-row, #db .qa-pack-row { gap: 12px; padding: 13px; }
#db .announcement-admin-row-main, #db .qa-pack-title { min-width: 0; overflow-wrap: anywhere; }
#db .announcement-admin-row-actions, #db .qa-pack-btns { flex-shrink: 0; flex-wrap: wrap; }
#db .feedback-admin-meta { color: var(--muted); line-height: 1.7; }
#db .feedback-admin-message { margin: 12px 0; font-size: 14px; }
#db .feedback-answered-group { margin-top: 20px; }
#db .feedback-answered-group > summary { padding: 12px 0; cursor: pointer; color: var(--muted); }
#db .ko-card { padding: 18px; border: 1px solid var(--admin-border); background: var(--admin-inset); border-radius: 10px; }
#db .ko-name { font-size: 17px; font-weight: 700; }
#db .ko-stat-grid { gap: 8px; }
#db .ko-stat { background: #17263b; border: 1px solid #27384e; border-radius: 8px; }
#db .ko-stat b { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
#db .ko-card-head { flex-wrap: wrap; }
#db .ko-last-active { font-size: 12px; }
#db .ko-actions { flex-wrap: wrap; }
#db .ko-learning-details { margin: 14px 0; border-top: 1px solid var(--admin-border); }
#db .ko-learning-details > summary { padding: 12px 0; cursor: pointer; color: #addcf5; font-size: 13px; }
#db .admin-quest-editor > summary { padding: 12px 0; cursor: pointer; font-weight: 650; color: #addcf5; }
#db .admin-panel-body > .rank-section:first-child > .rank-title { display: none; }
#db .presence-filter-panel, #db .marble-stats-filter-panel { border: 1px solid var(--admin-border); border-radius: 9px; background: var(--admin-inset); padding: 14px; }
#db .presence-range-buttons button, #db .marble-stats-presets button, #db .marble-stats-game-switch button { min-height: 36px; border-radius: 7px; background: #1b2c43; border-color: #3a4c64; color: #c1d0e4; font-weight: 600; box-shadow: none; }
#db .presence-range-buttons button.active, #db .marble-stats-presets button.active, #db .marble-stats-game-switch button.active { background: #123e53; border-color: #39839f; color: #b0eaff; }
#db .marble-stats-summary-card { background: #14283a; border: 1px solid var(--admin-border); border-radius: 9px; box-shadow: none; }
#db .marble-stats-summary-card b { font-size: 24px; font-weight: 650; }
#db table { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
#db th { color: #a9bdd6; font-weight: 600; background: #17283e; }
#db :is(th, td) { border-color: var(--admin-border); padding: 11px 12px; }
#db tbody tr:hover { background: #20324b66; }
#db .presence-admin-split { gap: 16px; }
#db .challenge-admin-stage-flow { gap: 8px; }
#db .challenge-admin-flow-step { border-radius: 8px; background: #18283d; border-color: var(--admin-border); }
#db .challenge-admin-flow-step.current { background: #123c4e; border-color: #34718a; }
#db .challenge-admin-card, #db .challenge-admin-form-group, #db .challenge-admin-history-group { border-radius: 9px; background: var(--admin-inset); border-color: var(--admin-border); box-shadow: none; }
#db .challenge-admin-kid-row { border-radius: 6px; }
#db .qa-section { border-color: var(--admin-border); }
#db .qa-publish-box, #db .qa-mode-box { background: var(--admin-inset); border-color: var(--admin-border); border-radius: 8px; }
#db .qa-help, #db .qa-pack-meta { color: var(--muted); font-size: 12px; line-height: 1.65; }
#db .qa-pack-meta { display: block; margin-top: 4px; }
#db .qa-actions { flex-wrap: wrap; }
#db .admin-drawing-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#db .admin-drawing-columns > div { min-width: 0; }
#db .admin-artwork-row, #db .admin-template-row { min-width: 0; overflow-wrap: anywhere; }
#db .admin-artwork-row { display: grid !important; grid-template-columns: 54px minmax(0, 1fr) !important; }
#db .admin-artwork-row > div:last-child { grid-column: 2; justify-content: flex-start !important; }
#db .admin-template-list { display: grid; gap: 8px; max-height: 650px; overflow: auto; }
@media (min-width: 1100px) {
  #db .ko-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #db .admin-workspace { grid-template-columns: 166px minmax(0, 1fr); }
  #db .admin-main { padding: 20px; }
  #db .admin-sidebar { padding: 22px 10px; }
  #db .rank-section { padding: 16px; }
  #db .admin-drawing-columns { grid-template-columns: 1fr; }
  #db .presence-admin-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  body[data-screen="db"] { padding: 10px; }
  body[data-screen="db"] > .card { border-radius: 12px; }
  #db .admin-workspace { display: block; }
  #db .admin-sidebar { position: static; padding: 14px 12px 12px; }
  #db .admin-brand { margin: 0 0 14px; }
  #db .admin-brand-mark { width: 30px; height: 30px; border-radius: 8px; }
  #db .admin-brand small { display: none; }
  #db .admin-panel-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #db .admin-nav-group { display: contents; }
  #db .admin-nav-label { display: none; }
  #db .admin-panel-tab { padding: 9px 6px; font-size: 12px; justify-content: center; background: #17263b; border-color: #26394f; }
  #db .admin-feedback-count { margin-left: 0; padding: 0 5px; }
  #db .admin-home { margin: 10px 0 0; padding: 8px 0 0; text-align: right; font-size: 12px; }
  #db .admin-main { padding: 18px 12px; border-left: 0; border-top: 1px solid var(--admin-border); min-height: 450px; }
  #db .admin-page-head { gap: 10px; margin-bottom: 18px; align-items: start; }
  #db .admin-page-head h1 { font-size: 22px; }
  #db .admin-breadcrumb { display: none; }
  #db #adminPageDescription { font-size: 12px; }
  #db .admin-page-head > .btn { font-size: 12px !important; padding: 8px !important; }
  #db .rank-section { padding: 14px 12px; }
  #db .admin-panel-body { gap: 14px; }
  #db .admin-disclosure > :not(summary) { padding: 12px; }
  #db .admin-add-user-grid { grid-template-columns: minmax(0, 1fr); }
  #db .admin-add-user-grid .btn { justify-self: start; }
  #db .announcement-admin-grid, #db .challenge-admin-grid, #db .qa-batch-grid, #db .qa-twocol, #db .marble-stats-filter-grid { grid-template-columns: minmax(0, 1fr); }
  #db .announcement-admin-row, #db .qa-pack-row { flex-direction: column; align-items: stretch; }
  #db .announcement-admin-row-actions, #db .qa-pack-btns { justify-content: flex-start; }
  #db .ko-card { padding: 14px 10px; }
  #db .ko-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #db .ko-stat b { font-size: 19px; }
  #db .ko-last-active { margin-left: 0; width: 100%; }
  #db .challenge-admin-page-head, #db .challenge-admin-section-heading { flex-wrap: wrap; gap: 8px; }
  #db .challenge-admin-stage-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #db .challenge-admin-flow-step { padding: 10px 8px 10px 40px; min-height: 60px; }
  #db .challenge-admin-flow-step > span { left: 8px; width: 25px; height: 25px; }
  #db .db-user-summary { padding: 10px; gap: 8px; }
  #db .db-user-id { display: block; }
  #db .db-user-body { padding: 12px; }
  #db .db-action-group { flex-wrap: wrap; }
  #db .db-action-label { width: 100%; }
  #db .admin-notice { font-size: 12px; }
  #db :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #db, #db * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}