/* =====================================================================
 *  draconium-admin.css — the Draconium skin for the admin TOOL pages.
 *  Every rule is gated on html[data-dashboard^="draconium"], so it only
 *  paints when the admin has chosen the Draconium layout. Colour and type
 *  come from the active design language's tokens (var(--primary) …);
 *  transparency is uniform PER TYPE via the --dr-* tokens below.
 * ===================================================================== */
html[data-dashboard^="draconium"] main.dr-shell-admin{
  --dr-panel: color-mix(in srgb, var(--cb-text, #fff) 4%, transparent);   /* every container */
  --dr-pill:  color-mix(in srgb, var(--cb-text, #fff) 5%, transparent);   /* every pill / button / field */
  --dr-inset: color-mix(in srgb, var(--primary, #C40E2E) 9%, transparent);
  --dr-line:      rgba(var(--primary-rgb, 196,14,46), .30);
  --dr-line-soft: rgba(var(--primary-rgb, 196,14,46), .14);
  --dr-glow:      rgba(var(--primary-rgb, 196,14,46), .32);
}
/* Container fill toggle — data-dash-containers="solid" makes the Draconium
   admin shell's containers opaque (same tint over the theme ink instead of
   transparent). See dashboard-layouts.css for the full rationale. */
html[data-dash-containers="solid"] main.dr-shell-admin{
  --dr-panel: color-mix(in srgb, var(--cb-text, #fff) 4%, var(--cb-ink, #0e0f16));
  --dr-pill:  color-mix(in srgb, var(--cb-text, #fff) 5%, var(--cb-ink, #0e0f16));
  --dr-inset: color-mix(in srgb, var(--primary, #C40E2E) 9%, var(--cb-ink, #0e0f16));
}

/* The page's original <header> is kept — the shell lives inside <main>, below it. */

/* shell: full-width top band (title / tabs / stats / controls), then a rail+table row */
html[data-dashboard^="draconium"] main.dr-shell-admin{
  display:flex; flex-direction:column; gap:20px;
  max-width:1440px; margin:0 auto; padding:26px 30px 60px;
  color:var(--cb-text,#eee); font-family:var(--cb-ui,system-ui,sans-serif);
}
html[data-dashboard^="draconium"] main.dr-shell-admin *{ box-sizing:border-box; }
html[data-dashboard^="draconium"] .dr-top{ display:flex; flex-direction:column; gap:18px; }
html[data-dashboard^="draconium"] .dr-band{ display:flex; flex-direction:column; gap:16px; }
html[data-dashboard^="draconium"] .dr-work{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:22px; align-items:start; }
html[data-dashboard^="draconium"] .dr-views{ min-width:0; display:flex; flex-direction:column; gap:18px; }

/* ---- the ChicaBate nav rail — drops to line up with the table; its height
 *      follows its own content (it does NOT stretch to the data column). ---- */
html[data-dashboard^="draconium"] .dr-aside{
  align-self:start; background:var(--dr-panel);
  border:1px solid var(--dr-line-soft); border-radius:26px; padding:22px 14px;
}
html[data-dashboard^="draconium"] .dr-brand{
  font-family:var(--cb-display,sans-serif); font-weight:800; font-size:20px;
  color:var(--cb-text,#fff); padding:2px 12px 6px;
}
html[data-dashboard^="draconium"] .dr-sgroup{
  font-family:var(--cb-mono,monospace); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cb-faint,#999); padding:16px 12px 8px;
}
/* "Admin Console" title mid-rail (unified rail only — the split dashboard
   rail has its own copy at the top of the second column). Same .dr-brand
   look; just breathing room below the divider above it. Double-class
   specificity so the minimal-density .dr-brand padding SHORTHAND (later
   in this file) can't squash the top gap. */
html[data-dashboard^="draconium"] .dr-brand.dr-brand-console{ padding-top:10px; }
html[data-dashboard^="draconium"] .dr-sdiv{ height:1px; margin:12px 10px; background:var(--dr-line-soft); }
html[data-dashboard^="draconium"] .dr-snav{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:999px;
  color:var(--cb-muted,#bbb); font-size:13.5px; font-weight:600; text-decoration:none;
  /* Every rail button reads as a ROUNDED PILL whether selected or not
     (requested 2026-07-26) — same visible pill treatment as the Draconium
     dashboard rails' .dr-navlink, instead of invisible-until-hover rows. */
  background:var(--dr-pill); border:1px solid var(--dr-line-soft);
  margin-bottom:8px; white-space:nowrap;
  transition:color .18s, background .18s, border-color .18s, box-shadow .18s;
}
html[data-dashboard^="draconium"] .dr-snav:last-child{ margin-bottom:0; }
html[data-dashboard^="draconium"] .dr-snav .ic{ font-size:17px; color:var(--primary); opacity:.9; flex:none; }
html[data-dashboard^="draconium"] .dr-snav:hover{ color:var(--cb-text); border-color:var(--dr-line); box-shadow:0 0 18px -10px var(--dr-glow); }
html[data-dashboard^="draconium"] .dr-snav[aria-current="page"]{
  color:#0a0710; background:var(--gradient-active, var(--gradient, linear-gradient(100deg,var(--primary),var(--secondary))));
  box-shadow:0 8px 22px -8px var(--dr-glow);
}
html[data-dashboard^="draconium"] .dr-snav[aria-current="page"] .ic{ color:#0a0710; opacity:1; }
html[data-dashboard^="draconium"] .dr-slogout{ color:var(--cb-faint,#999); }

/* masthead — the title sits DIRECTLY on the page, no panel of any kind.
   backdrop-filter must be reset too: several pages' own .page-header
   styles carry `backdrop-filter: blur(20px)`, and with the background
   stripped that blur still frosted the page backdrop into a rounded
   "banner" behind the title (the admin-users / admin-uploads band,
   reported 2026-08-04). */
html[data-dashboard^="draconium"] main.dr-shell-admin .page-header{
  background:none; border:0; padding:0; margin:0;
  box-shadow:none; border-radius:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .page-header h1{
  font-family:var(--cb-display,serif); font-weight:700; font-size:clamp(26px,3vw,34px);
  line-height:1.15; margin:0; letter-spacing:-.01em; color:var(--cb-text,#fff); padding-right:.16em;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .page-header h1 em{ font-style:italic; color:var(--accent,#FFB3C0); }
html[data-dashboard^="draconium"] main.dr-shell-admin .page-header > p{ color:var(--cb-muted,#bbb); font-size:13px; margin:6px 0 0; }
html[data-dashboard^="draconium"] main.dr-shell-admin .users-export-row{ display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
html[data-dashboard^="draconium"] main.dr-shell-admin .users-export-label{ font-family:var(--cb-mono,monospace); font-size:11px; color:var(--cb-faint,#999); letter-spacing:.06em; }
html[data-dashboard^="draconium"] main.dr-shell-admin .users-export-btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:var(--dr-pill); border:1px solid var(--dr-line-soft); color:var(--cb-text,#eee);
  font-size:12px; font-weight:600; cursor:pointer;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .users-export-btn:hover{ border-color:var(--dr-line); }
html[data-dashboard^="draconium"] main.dr-shell-admin .users-export-btn .ic{ color:var(--primary); }

/* stat ribbon — the stat cards become a row of capsules */
html[data-dashboard^="draconium"] main.dr-shell-admin .stats-grid{
  display:flex; flex-wrap:wrap; gap:12px; margin:0;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .stat-card{
  flex:1 1 130px; min-width:120px; background:var(--dr-panel); border:1px solid var(--dr-line);
  border-radius:18px; padding:14px 20px; text-align:left;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .stat-card h3{
  font-family:var(--cb-mono,monospace); font-weight:700; font-size:26px; line-height:1; margin:0;
  color:var(--cb-text,#fff); text-shadow:0 0 20px var(--dr-glow);
}
html[data-dashboard^="draconium"] main.dr-shell-admin .stat-card p{
  font-family:var(--cb-mono,monospace); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cb-faint,#999); margin:8px 0 0;
}

/* category tabs (Members / Guests …) → a segmented pill control */
html[data-dashboard^="draconium"] main.dr-shell-admin .category-tabs{
  display:inline-flex; gap:6px; padding:6px; background:var(--dr-panel);
  border:1px solid var(--dr-line-soft); border-radius:999px; margin:0;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .category-tab{
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px;
  color:var(--cb-muted,#bbb); font-size:13px; font-weight:600; cursor:pointer; border:0; background:none;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .category-tab .ic{ color:var(--primary); }
html[data-dashboard^="draconium"] main.dr-shell-admin .category-tab.active{
  color:#0a0710; background:var(--gradient-active, var(--gradient, linear-gradient(100deg,var(--primary),var(--secondary))));
}
html[data-dashboard^="draconium"] main.dr-shell-admin .category-tab.active .ic{ color:#0a0710; }
html[data-dashboard^="draconium"] main.dr-shell-admin .category-tab .tab-count{
  font-family:var(--cb-mono,monospace); font-size:11px; padding:1px 7px; border-radius:999px;
  background:rgba(0,0,0,.16);
}

/* controls bar */
html[data-dashboard^="draconium"] main.dr-shell-admin .controls-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:var(--dr-panel);
  border:1px solid var(--dr-line-soft); border-radius:20px; padding:16px 18px; margin:0;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .search-box{ display:flex; flex:1 1 260px; gap:14px; }
/* the Search button sits clearly apart from the input */
html[data-dashboard^="draconium"] main.dr-shell-admin .search-box button{ margin-left:2px; }
html[data-dashboard^="draconium"] main.dr-shell-admin .search-box input{
  flex:1; min-width:0; padding:11px 15px; border-radius:12px; background:var(--dr-pill);
  border:1px solid var(--dr-line-soft); color:var(--cb-text,#eee); font-size:13px;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .search-box input::placeholder{ color:var(--cb-faint,#999); }
html[data-dashboard^="draconium"] main.dr-shell-admin .search-box button,
html[data-dashboard^="draconium"] main.dr-shell-admin .controls-bar .btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:12px;
  font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--dr-line-soft);
  background:var(--dr-pill); color:var(--cb-text,#eee);
}
html[data-dashboard^="draconium"] main.dr-shell-admin .controls-bar .btn-primary{
  color:#0a0710; background:var(--gradient, linear-gradient(100deg,var(--primary),var(--secondary))); border-color:transparent;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .search-box button .ic,
html[data-dashboard^="draconium"] main.dr-shell-admin .controls-bar .btn .ic{ color:inherit; }
html[data-dashboard^="draconium"] main.dr-shell-admin .filter-group select{
  padding:11px 15px; border-radius:12px; background:var(--dr-pill); border:1px solid var(--dr-line-soft);
  color:var(--cb-text,#eee); font-size:13px; cursor:pointer;
  /* renders the native option list in dark, so it matches the theme */
  color-scheme:dark;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .filter-group select option{
  background-color:var(--cb-ink, #160c22); color:var(--cb-text,#eee);
}
html[data-dashboard^="draconium"] main.dr-shell-admin .filter-group select option:checked{
  background:rgba(var(--primary-rgb,196,14,46), .28); color:#fff;
}

/* table */
/* a lifted "view" (User Management's Members/Guests) fills the row so its data
 * panel bottom lines up with the rail. Only .dr-fill views stretch — pagination
 * and other content keep their natural height. */
html[data-dashboard^="draconium"] main.dr-shell-admin .dr-views > .dr-fill{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
html[data-dashboard^="draconium"] main.dr-shell-admin .users-table-container{
  background:var(--dr-panel); border:1px solid var(--dr-line-soft); border-radius:22px;
  padding:8px; overflow:hidden;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .dr-fill .users-table-container{ flex:1 1 auto; display:flex; flex-direction:column; }
html[data-dashboard^="draconium"] main.dr-shell-admin .dr-fill .table-wrapper{ flex:1 1 auto; }
html[data-dashboard^="draconium"] main.dr-shell-admin .table-wrapper{ overflow-x:auto; border-radius:16px; }
/* auto-fit: columns size to their content and share the full width — no scroll */
html[data-dashboard^="draconium"] main.dr-shell-admin .users-table-container table{ width:100%; table-layout:auto; border-collapse:collapse; }
html[data-dashboard^="draconium"] main.dr-shell-admin .users-table-container thead th{
  font-family:var(--cb-mono,monospace); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cb-faint,#999); text-align:left; padding:13px 11px; border-bottom:1px solid var(--dr-line-soft);
  background:none; white-space:nowrap;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .users-table-container tbody td{
  padding:12px 11px; border-bottom:1px solid var(--dr-line-soft); font-size:13px; color:var(--cb-text,#eee);
  vertical-align:middle;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .users-table-container tbody tr:hover{ background:rgba(var(--primary-rgb),.05); }
html[data-dashboard^="draconium"] main.dr-shell-admin .pagination{ display:flex; align-items:center; justify-content:center; gap:14px; padding:14px; }
html[data-dashboard^="draconium"] main.dr-shell-admin .pagination button{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:11px;
  background:var(--dr-pill); border:1px solid var(--dr-line-soft); color:var(--cb-text,#eee); font-size:13px; cursor:pointer;
}

/* ── Upload Management specifics ─────────────────────────────────────── */
/* Public/Private/Selling (.cat-tab) + Photos/Videos/Items (.tabs .tab) → pills */
html[data-dashboard^="draconium"] main.dr-shell-admin .tabs{
  display:inline-flex; gap:6px; padding:6px; background:var(--dr-panel);
  border:1px solid var(--dr-line-soft); border-radius:999px; margin:0;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .cat-tab,
html[data-dashboard^="draconium"] main.dr-shell-admin .tabs .tab{
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px;
  color:var(--cb-muted,#bbb); font-size:13px; font-weight:600; cursor:pointer; border:0; background:none;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .cat-tab .ic,
html[data-dashboard^="draconium"] main.dr-shell-admin .tabs .tab .ic{ color:var(--primary); }
html[data-dashboard^="draconium"] main.dr-shell-admin .cat-tab:hover,
html[data-dashboard^="draconium"] main.dr-shell-admin .tabs .tab:hover{ color:var(--cb-text,#fff); }
html[data-dashboard^="draconium"] main.dr-shell-admin .cat-tab.active,
html[data-dashboard^="draconium"] main.dr-shell-admin .tabs .tab.active{
  color:#0a0710; background:var(--gradient-active, var(--gradient, linear-gradient(100deg,var(--primary),var(--secondary))));
}
html[data-dashboard^="draconium"] main.dr-shell-admin .cat-tab.active .ic,
html[data-dashboard^="draconium"] main.dr-shell-admin .tabs .tab.active .ic{ color:#0a0710; }

/* controls bar action buttons (Add Upload / Refresh) + the filter group */
html[data-dashboard^="draconium"] main.dr-shell-admin .filter-group{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
html[data-dashboard^="draconium"] main.dr-shell-admin .controls-bar .action-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:12px;
  font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--dr-line-soft);
  background:var(--dr-pill); color:var(--cb-text,#eee);
}
html[data-dashboard^="draconium"] main.dr-shell-admin .controls-bar .action-btn-primary{
  color:#0a0710; background:var(--gradient, linear-gradient(100deg,var(--primary),var(--secondary))); border-color:transparent;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .controls-bar .action-btn .ic{ color:inherit; }

/* Grid / List view toggle */
html[data-dashboard^="draconium"] main.dr-shell-admin .view-mode-bar{ display:flex; justify-content:flex-end; margin:0; }
html[data-dashboard^="draconium"] main.dr-shell-admin .view-mode-toggle{
  display:inline-flex; gap:4px; padding:5px; background:var(--dr-panel);
  border:1px solid var(--dr-line-soft); border-radius:999px;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .view-mode-btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px;
  color:var(--cb-muted,#bbb); font-size:12.5px; font-weight:600; cursor:pointer; border:0; background:none;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .view-mode-btn svg{ width:15px; height:15px; }
html[data-dashboard^="draconium"] main.dr-shell-admin .view-mode-btn.active{
  color:#0a0710; background:var(--gradient-active, var(--gradient, linear-gradient(100deg,var(--primary),var(--secondary))));
}

/* the media-card grid */
html[data-dashboard^="draconium"] main.dr-shell-admin .uploads-grid{ gap:16px; margin:0; }
/* only the grid view uses card columns; List view keeps its 1-column rows */
html[data-dashboard^="draconium"] main.dr-shell-admin .uploads-grid:not(.view-list){
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
}
html[data-dashboard^="draconium"] main.dr-shell-admin .upload-card{
  background:var(--dr-panel); border:1px solid var(--dr-line-soft); border-radius:16px;
  overflow:hidden; transition:border-color .18s, box-shadow .18s;
}
html[data-dashboard^="draconium"] main.dr-shell-admin .upload-card:hover{ border-color:var(--dr-line); box-shadow:0 0 22px -8px var(--dr-glow); }
html[data-dashboard^="draconium"] main.dr-shell-admin .upload-thumbnail{ background:var(--dr-pill); }
html[data-dashboard^="draconium"] main.dr-shell-admin .upload-info{ padding:12px 14px; }
html[data-dashboard^="draconium"] main.dr-shell-admin .selling-summary{
  background:var(--dr-panel); border:1px solid var(--dr-line-soft); border-radius:18px; padding:18px 20px;
}

/* ── Website Theme specifics ─────────────────────────────────────────── */
/* the old page-embed section + breadcrumb are replaced by the shell */
html[data-dashboard^="draconium"] main.dr-theme > #themeModal,
html[data-dashboard^="draconium"] main.dr-theme > .breadcrumb{ display:none !important; }

/* masthead — keep the serif title, drop the panel chrome */
html[data-dashboard^="draconium"] main.dr-theme .modal-header{ display:block; background:none; border:0; padding:0; margin:0; }
html[data-dashboard^="draconium"] main.dr-theme .modal-header .tm-eyebrow{ display:block; font-family:var(--cb-mono,monospace); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--cb-faint,#999); }
html[data-dashboard^="draconium"] main.dr-theme .modal-header .tm-title{ margin:4px 0 0; padding-right:.18em; }

/* the four-section tab bar */
html[data-dashboard^="draconium"] main.dr-theme .dr-ttabs{
  display:inline-flex; flex-wrap:wrap; gap:6px; padding:6px; background:var(--dr-panel);
  border:1px solid var(--dr-line-soft); border-radius:999px;
}
html[data-dashboard^="draconium"] main.dr-theme .dr-ttab{
  padding:10px 20px; border-radius:999px; border:0; background:none; cursor:pointer;
  color:var(--cb-muted,#bbb); font-size:13px; font-weight:600; font-family:var(--cb-ui,sans-serif); white-space:nowrap;
}
html[data-dashboard^="draconium"] main.dr-theme .dr-ttab:hover{ color:var(--cb-text,#fff); }
html[data-dashboard^="draconium"] main.dr-theme .dr-ttab.active{
  color:#0a0710; background:var(--gradient-active, var(--gradient, linear-gradient(100deg,var(--primary),var(--secondary))));
}

/* the active section → a clean transparent panel */
html[data-dashboard^="draconium"] main.dr-theme .dr-tgroup{ display:flex; flex-direction:column; gap:16px; }
html[data-dashboard^="draconium"] main.dr-theme .tm-cell{
  background:var(--dr-panel); border:1px solid var(--dr-line-soft); border-radius:20px; padding:22px 24px; margin:0;
}
html[data-dashboard^="draconium"] main.dr-theme .tm-cell .tm-eyebrow{ color:var(--cb-faint,#999); }
html[data-dashboard^="draconium"] main.dr-theme .tm-cell .theme-current-line{ color:var(--cb-muted,#bbb); }

/* picker cards (Experience / Palette / Page bg / Dashboard) in the Draconium look */
html[data-dashboard^="draconium"] main.dr-theme .pal-card,
html[data-dashboard^="draconium"] main.dr-theme .exp-card,
html[data-dashboard^="draconium"] main.dr-theme .dash-card{
  background:var(--dr-pill); border:1px solid var(--dr-line-soft); color:var(--cb-text,#eee);
}
html[data-dashboard^="draconium"] main.dr-theme .pal-card:hover,
html[data-dashboard^="draconium"] main.dr-theme .exp-card:hover,
html[data-dashboard^="draconium"] main.dr-theme .dash-card:hover{ border-color:var(--dr-line); box-shadow:0 0 18px -8px var(--dr-glow); }
html[data-dashboard^="draconium"] main.dr-theme .pal-card.active,
html[data-dashboard^="draconium"] main.dr-theme .pal-card.selected,
html[data-dashboard^="draconium"] main.dr-theme .exp-card.active,
html[data-dashboard^="draconium"] main.dr-theme .exp-card.selected,
html[data-dashboard^="draconium"] main.dr-theme .dash-card.active,
html[data-dashboard^="draconium"] main.dr-theme .dash-card.selected{
  border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), 0 0 22px -8px var(--dr-glow);
}

/* ── responsive ───────────────────────────────────────────────────────
 * The rail + content grid lives on .dr-work (NOT on main, which is a
 * flex column — the old rule targeted main and therefore never
 * collapsed anything: phones got a 236px rail and a sliver of content).
 * Below 1000px the shell stacks: the ChicaBate rail becomes a swipeable
 * horizontal pill strip on top, and the working column takes the full
 * width. */
@media (max-width:1000px){
  html[data-dashboard^="draconium"] main.dr-shell-admin{ padding:22px 18px 50px; }
  html[data-dashboard^="draconium"] .dr-work{ grid-template-columns:1fr; gap:16px; }

  /* rail → horizontal chip nav: one swipeable row, groups hidden,
     dividers become short vertical ticks. Native scrollbar hidden —
     the strip clips mid-pill, which is its own scroll affordance. */
  html[data-dashboard^="draconium"] .dr-aside{
    position:static; display:flex; align-items:center; gap:4px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:10px 12px; border-radius:18px;
    scrollbar-width:none;
  }
  html[data-dashboard^="draconium"] .dr-aside::-webkit-scrollbar{ display:none; }
  html[data-dashboard^="draconium"] .dr-brand,
  html[data-dashboard^="draconium"] .dr-sgroup{ display:none; }   /* header already brands the page */
  html[data-dashboard^="draconium"] .dr-sdiv{ width:1px; height:22px; margin:0 6px; flex:none; }
  html[data-dashboard^="draconium"] .dr-snav{ flex:none; padding:11px 13px; font-size:12.5px; margin-bottom:0; }
}
@media (max-width:768px){
  /* AXIS-FLIP GUARD: .search-box carries flex:1 1 260px for the desktop
     ROW controls bar. The content-manage pages switch .content-controls
     to flex-direction:column on phones, where that 260px basis becomes
     HEIGHT — the search input ballooned to 260px tall. Auto basis sizes
     naturally on either axis. */
  html[data-dashboard^="draconium"] main.dr-shell-admin .search-box{ flex:1 1 auto; }

  /* Pill-bar containers (Website Theme tabs, category/type tabs): when
     their pills wrapped, the 999px-radius container turned into a ragged
     blob with pills hanging past the rounded corners. On phones they are
     ONE swipeable row instead — same affordance as the nav rail strip.
     !important beats perf-mobile's generic flex-wrap:wrap on .tabs. */
  html[data-dashboard^="draconium"] main.dr-theme .dr-ttabs,
  html[data-dashboard^="draconium"] main.dr-shell-admin .tabs,
  html[data-dashboard^="draconium"] main.dr-shell-admin .category-tabs{
    display:flex; flex-wrap:nowrap !important; overflow-x:auto;
    -webkit-overflow-scrolling:touch; max-width:100%;
    border-radius:18px; scrollbar-width:none;
  }
  html[data-dashboard^="draconium"] main.dr-theme .dr-ttabs::-webkit-scrollbar,
  html[data-dashboard^="draconium"] main.dr-shell-admin .tabs::-webkit-scrollbar,
  html[data-dashboard^="draconium"] main.dr-shell-admin .category-tabs::-webkit-scrollbar{ display:none; }
  html[data-dashboard^="draconium"] main.dr-theme .dr-ttab,
  html[data-dashboard^="draconium"] main.dr-shell-admin .tabs .tab,
  html[data-dashboard^="draconium"] main.dr-shell-admin .cat-tab,
  html[data-dashboard^="draconium"] main.dr-shell-admin .category-tab{ flex:none; white-space:nowrap; }
}
@media (max-width:520px){
  html[data-dashboard^="draconium"] main.dr-shell-admin{ padding:16px 12px 40px; }
  html[data-dashboard^="draconium"] main.dr-theme .tm-cell{ padding:16px 14px; }
  html[data-dashboard^="draconium"] main.dr-theme .dr-ttab{ padding:10px 14px; font-size:12.5px; }
}

/* =====================================================================
 *  DRACONIUM MINIMAL — the same shell, stripped to hairlines.
 *  Every structural rule above is shared (the ^= gate matches both
 *  keys); this section only QUIETS the skin when the admin picked
 *  "Draconium Minimal": transparent containers, neutral text-tinted
 *  hairlines instead of lit primary borders, no glow, no gradient fills
 *  — active states become a flat primary tint. Shapes (the capsule
 *  radius) are the site-wide button contract and stay as they are.
 * ===================================================================== */
html[data-dashboard="draconium-min"] main.dr-shell-admin{
  --dr-panel: transparent;
  --dr-pill:  transparent;
  --dr-inset: transparent;
  --dr-line:      color-mix(in srgb, var(--cb-text, #fff) 24%, transparent);
  --dr-line-soft: color-mix(in srgb, var(--cb-text, #fff) 10%, transparent);
  --dr-glow: transparent;
}
/* Container fill toggle still works: Solid = flat ink, still no tint. */
html[data-dashboard="draconium-min"][data-dash-containers="solid"] main.dr-shell-admin{
  --dr-panel: var(--cb-ink, #0e0f16);
  --dr-pill:  color-mix(in srgb, var(--cb-text, #fff) 3%, var(--cb-ink, #0e0f16));
  --dr-inset: var(--cb-ink, #0e0f16);
}

/* Gradient actives → a flat, quiet primary tint with primary text. */
html[data-dashboard="draconium-min"] .dr-snav[aria-current="page"],
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab.active,
html[data-dashboard="draconium-min"] main.dr-shell-admin .cat-tab.active,
html[data-dashboard="draconium-min"] main.dr-shell-admin .tabs .tab.active,
html[data-dashboard="draconium-min"] main.dr-shell-admin .view-mode-btn.active,
html[data-dashboard="draconium-min"] main.dr-theme .dr-ttab.active{
  color:var(--primary, #C40E2E);
  background:rgba(var(--primary-rgb, 196,14,46), .10);
  box-shadow:none;
}
html[data-dashboard="draconium-min"] .dr-snav[aria-current="page"] .ic,
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab.active .ic,
html[data-dashboard="draconium-min"] main.dr-shell-admin .cat-tab.active .ic,
html[data-dashboard="draconium-min"] main.dr-shell-admin .tabs .tab.active .ic{
  color:var(--primary, #C40E2E);
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab .tab-count{
  background:rgba(var(--primary-rgb, 196,14,46), .14);
}

/* The one strong action keeps its weight, but flat — no gradient. */
html[data-dashboard="draconium-min"] main.dr-shell-admin .controls-bar .btn-primary,
html[data-dashboard="draconium-min"] main.dr-shell-admin .controls-bar .action-btn-primary{
  background:var(--primary, #C40E2E); color:#fff; border-color:transparent;
}

/* No glow anywhere: hovers speak with the border alone. */
html[data-dashboard="draconium-min"] .dr-snav:hover,
html[data-dashboard="draconium-min"] main.dr-shell-admin .upload-card:hover,
html[data-dashboard="draconium-min"] main.dr-theme .pal-card:hover,
html[data-dashboard="draconium-min"] main.dr-theme .exp-card:hover,
html[data-dashboard="draconium-min"] main.dr-theme .dash-card:hover{
  box-shadow:none;
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .stat-card h3{ text-shadow:none; }
/* Stat capsules read as quiet outlines, not lit instruments. */
html[data-dashboard="draconium-min"] main.dr-shell-admin .stat-card{
  border-color:var(--dr-line-soft);
}

/* Picker tiles: selection is a plain primary ring, nothing radiates. */
html[data-dashboard="draconium-min"] main.dr-theme .pal-card.active,
html[data-dashboard="draconium-min"] main.dr-theme .pal-card.selected,
html[data-dashboard="draconium-min"] main.dr-theme .exp-card.active,
html[data-dashboard="draconium-min"] main.dr-theme .exp-card.selected,
html[data-dashboard="draconium-min"] main.dr-theme .dash-card.active,
html[data-dashboard="draconium-min"] main.dr-theme .dash-card.selected{
  box-shadow:0 0 0 1px var(--primary, #C40E2E);
}

/* Toggle switches: the checked track goes flat primary, no gradient. */
html[data-dashboard="draconium-min"] .hc-toggle input:checked + .hc-slider,
html[data-dashboard="draconium-min"] .cf-switch input:checked + .cf-slider{
  background:var(--primary, #C40E2E);
}

/* ── Minimal DENSITY — smaller, tighter, quieter ─────────────────────
 * Minimal is also a SIZE: every container, card, rail, button, tab and
 * switch drops roughly one size class — reduced paddings, gaps, radii
 * follow the capsule contract untouched. These sit AFTER the responsive
 * blocks above on purpose: equal specificity, later source order, so
 * the compact metrics hold on phones too. */
html[data-dashboard="draconium-min"] main.dr-shell-admin{ gap:14px; padding:18px 22px 44px; }
html[data-dashboard="draconium-min"] .dr-top{ gap:12px; }
html[data-dashboard="draconium-min"] .dr-band{ gap:10px; }
html[data-dashboard="draconium-min"] .dr-work{ grid-template-columns:200px minmax(0,1fr); gap:14px; }
html[data-dashboard="draconium-min"] .dr-views{ gap:12px; }

/* rail */
html[data-dashboard="draconium-min"] .dr-aside{ padding:14px 10px; border-radius:18px; }
html[data-dashboard="draconium-min"] .dr-brand{ font-size:17px; padding:2px 10px 4px; }
html[data-dashboard="draconium-min"] .dr-sgroup{ font-size:9.5px; padding:10px 10px 6px; }
html[data-dashboard="draconium-min"] .dr-sdiv{ margin:8px 8px; }
html[data-dashboard="draconium-min"] .dr-snav{ gap:9px; padding:8px 11px; font-size:12.5px; margin-bottom:5px; }
html[data-dashboard="draconium-min"] .dr-snav .ic{ font-size:15px; }

/* masthead */
html[data-dashboard="draconium-min"] main.dr-shell-admin .page-header h1{ font-size:clamp(21px,2.4vw,26px); }
html[data-dashboard="draconium-min"] main.dr-shell-admin .page-header > p{ font-size:12px; margin-top:4px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .users-export-row{ margin-top:10px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .users-export-btn{ padding:6px 11px; font-size:11.5px; }

/* stat ribbon */
html[data-dashboard="draconium-min"] main.dr-shell-admin .stats-grid{ gap:8px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .stat-card{ padding:10px 14px; border-radius:14px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .stat-card h3{ font-size:20px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .stat-card p{ font-size:9.5px; margin-top:5px; }

/* tabs (category / type / view toggles) */
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tabs,
html[data-dashboard="draconium-min"] main.dr-shell-admin .tabs{ padding:4px; gap:4px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab,
html[data-dashboard="draconium-min"] main.dr-shell-admin .cat-tab,
html[data-dashboard="draconium-min"] main.dr-shell-admin .tabs .tab{ padding:7px 13px; font-size:12px; gap:6px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab .tab-count{ font-size:10px; padding:1px 6px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .view-mode-toggle{ padding:3px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .view-mode-btn{ padding:6px 11px; font-size:11.5px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .view-mode-btn svg{ width:13px; height:13px; }

/* controls bar: inputs, selects, buttons */
html[data-dashboard="draconium-min"] main.dr-shell-admin .controls-bar{ padding:10px 12px; border-radius:14px; gap:8px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .search-box{ gap:8px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .search-box input{ padding:8px 12px; font-size:12.5px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .search-box button,
html[data-dashboard="draconium-min"] main.dr-shell-admin .controls-bar .btn,
html[data-dashboard="draconium-min"] main.dr-shell-admin .controls-bar .action-btn{ padding:8px 13px; font-size:12px; gap:6px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .filter-group{ gap:7px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .filter-group select{ padding:8px 12px; font-size:12.5px; }

/* table + pagination */
html[data-dashboard="draconium-min"] main.dr-shell-admin .users-table-container{ padding:5px; border-radius:16px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .users-table-container thead th{ padding:9px 9px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .users-table-container tbody td{ padding:8px 9px; font-size:12.5px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .pagination{ padding:10px; gap:10px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .pagination button{ padding:7px 12px; font-size:12.5px; }

/* upload cards */
html[data-dashboard="draconium-min"] main.dr-shell-admin .uploads-grid{ gap:10px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .uploads-grid:not(.view-list){
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .upload-info{ padding:9px 10px; }
html[data-dashboard="draconium-min"] main.dr-shell-admin .selling-summary{ padding:12px 14px; border-radius:14px; }

/* Website Theme page */
html[data-dashboard="draconium-min"] main.dr-theme .dr-ttabs{ padding:4px; gap:4px; }
html[data-dashboard="draconium-min"] main.dr-theme .dr-ttab{ padding:7px 14px; font-size:12px; }
html[data-dashboard="draconium-min"] main.dr-theme .dr-tgroup{ gap:12px; }
html[data-dashboard="draconium-min"] main.dr-theme .tm-cell{ padding:14px 16px; border-radius:14px; }

/* toggle switches + segmented controls, one size down. The knob's size
 * and travel move TOGETHER (16px knob, 16px travel in a 38px track) or
 * the switch jams half-open. */
html[data-dashboard="draconium-min"] .hc-toggle{ width:38px; height:22px; }
html[data-dashboard="draconium-min"] .hc-slider::before{ width:16px; height:16px; }
html[data-dashboard="draconium-min"] .hc-toggle input:checked + .hc-slider::before{ transform:translateX(16px); }
/* ── Slider read-out ──────────────────────────────────────────────────
 * The number beside a range input. range-entry.js turns anything matching
 * this class into a typeable field, so it is the class that makes a
 * slider also accept a manual value. It was defined only inside
 * admin-theme.html, so the Automation tab's size and angle read-outs
 * rendered as bare text. */
.hero-op-val{ font-family:var(--cb-mono, monospace); font-size:12.5px; color:#ccc;
  width:44px; text-align:right; flex:none; }

/* ── Kink Test switch row, tight variant ──────────────────────────────
 * Label and switch read as one control and sit together, pushed to the
 * right edge of the form row (margin-left:auto eats the slack).
 * A modifier on .kt-switch-row, which each page still styles itself. It
 * was defined in admin-kinktest-questions.html and admindashboard.html but
 * NOT in admin-kinktest.html, which uses it — so the row there spread out
 * instead of hugging the right edge.
 * BOTH classes are in the selector on purpose. It overrides justify-content
 * and gap from .kt-switch-row, which every page still declares in its own
 * <style> — that is LATER in source order than this sheet, so a lone
 * .kt-switch-row-tight (equal specificity) would silently lose. Chaining
 * them makes it 0,2,0 and it wins wherever it is loaded from.
 * Every use site carries both classes; check that before adding another. */
.kt-switch-row.kt-switch-row-tight{
  flex:0 0 auto; justify-content:flex-end; gap:10px; margin-left:auto; }

/* ── Small outline button, shared by admin panels ─────────────────────
 * Used by Maintenance › Automation and by Website Theme's 18+ logo panel
 * ("Reset position"). It was defined only in admin-maintenance.html, so
 * the Theme copy rendered as a bare browser button. */
.au-mini{ border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#e6dee1; font:inherit; font-size:12.5px; font-weight:600;
  padding:8px 13px; border-radius:999px; cursor:pointer; }
.au-mini:hover{ background:rgba(255,255,255,.14); }
.au-mini:disabled{ opacity:.45; cursor:default; }

/* ── Segmented control, base look ─────────────────────────────────────
 * This lived inside admin-theme.html's <style> and nowhere else, so the
 * first .hc-seg on ANY other admin page rendered as bare unstyled buttons
 * (caught on Maintenance › Automation "What moves it on"). It belongs in
 * the shared admin sheet, which every .hc-seg user already loads.
 * border-radius is deliberately absent: the site-wide capsule rule in
 * chicabate-os.css carries !important and owns button corners. */
.hc-seg{ display:inline-flex; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:3px; gap:2px; }
.hc-seg button{ border:none; background:transparent; color:#cfcfd8; font:inherit;
  font-size:12.5px; font-weight:600; padding:7px 13px; cursor:pointer;
  transition:background .15s, color .15s; }
.hc-seg button:hover{ color:#fff; }
.hc-seg button.on{ background:var(--gradient-active, var(--gradient, linear-gradient(120deg,#FF4D6A,#C40E2E)));
  color:#fff; }

html[data-dashboard="draconium-min"] .hc-seg{ padding:2px; }
html[data-dashboard="draconium-min"] .hc-seg button{ padding:5px 10px; font-size:11.5px; }
html[data-dashboard="draconium-min"] .hc-seg button.on{
  background:rgba(var(--primary-rgb, 196,14,46), .14); color:var(--primary, #C40E2E);
}

/* Phone: the responsive blocks higher up LOSE to the density rules above
 * (equal specificity, later source order wins), so every geometry the
 * ≤1000px block sets must be re-asserted HERE, after the density section.
 * .dr-work was the missing one: phones kept the 200px rail column and the
 * working column got a sliver on every admin page under Minimal. */
@media (max-width:1000px){
  html[data-dashboard="draconium-min"] .dr-work{ grid-template-columns:1fr; }
  html[data-dashboard="draconium-min"] main.dr-shell-admin{ padding:18px 16px 44px; }
  html[data-dashboard="draconium-min"] .dr-aside{ padding:8px 10px; border-radius:14px; }
  html[data-dashboard="draconium-min"] .dr-snav{ margin-bottom:0; }
}
@media (max-width:520px){
  html[data-dashboard="draconium-min"] main.dr-shell-admin{ padding:14px 12px 36px; }
}

/* =====================================================================
 *  DRACONIUM MINIMAL — UNIFORM TAB SYSTEM, shell re-assertions
 *  (2026-08-04 — the base recipes live at the end of cb-components.css;
 *  keep the two sections in sync when editing.)
 *
 *  The shell rules earlier in this file draw tabs as pill-panel
 *  segments at main.dr-shell-admin specificity, which out-ranks the
 *  cb-components recipes. So the uniform language is restated here,
 *  AFTER every earlier shell rule, at the same shell specificity:
 *  MAIN rows sit on a hairline with a 3px primary underline on the
 *  active tab; SUB rows are capsule chips with a gradient active.
 *  On Upload Management the category row (Public / Private / Selling)
 *  is the MAIN row and the type row (.tabs) becomes chips under it.
 *  The ≤768px swipe-strip rules above still win where they use
 *  !important (flex-wrap), so phone rows keep the one-line scroll.
 * ===================================================================== */

/* main rows: admin category tabs + the Website Theme section bar */
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tabs,
html[data-dashboard="draconium-min"] main.dr-theme .dr-ttabs{
  display:flex; flex-wrap:wrap;
  background:none; border:none; border-radius:0; padding:0; gap:6px;
  border-bottom:1px solid rgba(var(--primary-rgb, 196,14,46), .18);
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab,
html[data-dashboard="draconium-min"] main.dr-shell-admin .cat-tab,
html[data-dashboard="draconium-min"] main.dr-theme .dr-ttab{
  display:inline-flex; align-items:center; gap:7px; margin:0; padding:8px 14px;
  background:none; border:none; border-bottom:3px solid transparent;
  border-radius:999px; box-shadow:none; transform:none;
  color:#999; font-family:inherit; font-size:13.5px; font-weight:600;
  letter-spacing:normal; text-transform:none; line-height:1.4;
  white-space:nowrap; cursor:pointer; user-select:none;
  transition:color .2s, border-color .2s, background .2s;
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab:hover,
html[data-dashboard="draconium-min"] main.dr-shell-admin .cat-tab:hover,
html[data-dashboard="draconium-min"] main.dr-theme .dr-ttab:hover{
  color:#fff; background:none; box-shadow:none; transform:none;
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab.active,
html[data-dashboard="draconium-min"] main.dr-shell-admin .cat-tab.active,
html[data-dashboard="draconium-min"] main.dr-theme .dr-ttab.active{
  color:#fff; background:none; border-bottom-color:var(--primary, #C40E2E);
  box-shadow:none; transform:none;
}
/* count pills read the same on active and inactive tabs */
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab .tab-count,
html[data-dashboard="draconium-min"] main.dr-shell-admin .category-tab.active .tab-count{
  min-width:20px; height:auto; padding:1px 7px; border-radius:10px;
  background:rgba(var(--primary-rgb, 196,14,46), .22); color:inherit;
  font-family:inherit; font-size:11px; font-weight:700;
  letter-spacing:normal; text-transform:none; line-height:1.5; text-align:center;
}

/* sub rows: Upload Management's type tabs → capsule chips */
html[data-dashboard="draconium-min"] main.dr-shell-admin .tabs{
  display:flex; flex-wrap:wrap;
  background:none; border:none; border-radius:0; padding:0; gap:8px;
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .tabs .tab,
html[data-dashboard="draconium-min"] main.dr-shell-admin .view-mode-btn{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  background:rgba(26,26,26,.8);
  border:1px solid rgba(var(--primary-rgb, 196,14,46), .22);
  border-radius:999px; box-shadow:none; transform:none;
  color:#aaa; font-family:inherit; font-size:12px; font-weight:600;
  letter-spacing:normal; text-transform:none; line-height:1.4;
  white-space:nowrap; cursor:pointer; user-select:none;
  transition:color .2s, background .2s, border-color .2s;
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .tabs .tab:hover,
html[data-dashboard="draconium-min"] main.dr-shell-admin .view-mode-btn:hover{
  color:#fff; border-color:rgba(var(--primary-rgb, 196,14,46), .5);
  box-shadow:none; transform:none;
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .tabs .tab.active,
html[data-dashboard="draconium-min"] main.dr-shell-admin .view-mode-btn.active{
  background:var(--gradient-active, var(--gradient, linear-gradient(100deg, var(--primary, #C40E2E), var(--secondary, #7A0920))));
  color:#fff; border-color:transparent; box-shadow:none;
}
/* icons on a gradient chip go white (the shell paints them primary) */
html[data-dashboard="draconium-min"] main.dr-shell-admin .tabs .tab.active .ic{ color:#fff; }
/* Grid/List switcher: the pill panel dissolves, the chips stand alone */
html[data-dashboard="draconium-min"] main.dr-shell-admin .view-mode-toggle{
  background:none; border:none; border-radius:0; padding:0; gap:8px; box-shadow:none;
}
html[data-dashboard="draconium-min"] main.dr-shell-admin .view-mode-btn svg{ width:13px; height:13px; }

/* keyboard focus ring survives the box-shadow resets above */
html[data-dashboard="draconium-min"] main.dr-shell-admin :is(.category-tab, .cat-tab, .tabs .tab, .view-mode-btn):focus-visible,
html[data-dashboard="draconium-min"] main.dr-theme .dr-ttab:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(var(--primary-rgb, 196,14,46), .45);
}