/* What the admin area and My space share (panel.js), in the look of the rest of the site: fine borders,
   soft tinted shadows, a little colour where it says something. Loaded after admin.css (whose frame it
   refines) and before myspace.css; every rule is under .admin-page. The shadow tokens are in home.css. */

.admin-page { --pc-cyan: #00A9CE; --pc-green: #5BC236; --pc-amber: #F5A524; --pc-violet: #7C5CFF; padding-block: 32px 72px; }
.admin-page .admin-shell { gap: 44px; }

/* ------------------------------------------------------------ the side column */
.admin-page .admin-side-head .store-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.admin-page .admin-side-head .store-eyebrow::before { content: ''; width: 20px; height: 20px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--pc-green)); box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.admin-page .admin-nav { gap: 22px; }
.admin-page .admin-nav-group { gap: 3px; }
.admin-page .admin-nav-label { padding: 0 12px 6px; letter-spacing: .14em; }
.admin-page .admin-nav-item { position: relative; height: 40px; padding: 0 12px; border-radius: 12px; font-weight: 550; transition: background .15s, color .15s; }
.admin-page .admin-nav-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.admin-page .admin-nav-item[aria-current='page'] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.admin-page .admin-nav-item[aria-current='page']::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); }
.admin-page .pill-count { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ------------------------------------------------------------ the head of each section */
.admin-page .admin-section-head { padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.admin-page .admin-section-head .store-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--text-3); margin-bottom: 8px; }
.admin-page .admin-section-head h1 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.admin-page .admin-section-sub { margin-top: 10px; font-size: 15px; color: var(--text-2); }

/* ------------------------------------------------------------ cards */
.admin-page .admin-card { padding: 24px 26px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px var(--shadow-a), 0 14px 30px -22px var(--shadow-b); }
.admin-page .admin-card-flush { padding: 22px 0 18px; }
.admin-page .admin-card-copy h2 { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.admin-page .admin-card-copy p { font-size: 13.5px; }
.admin-page .admin-card-badge { width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); }
.admin-page .admin-empty { border-radius: 16px; }
.admin-page .oops-banner { border-radius: 14px; }

/* ------------------------------------------------------------ the numbers */
.admin-page .kpi-row { gap: 16px; }
.admin-page .kpi {
  --tc: var(--pc-cyan); isolation: isolate; overflow: hidden; padding: 20px 22px 0; min-height: 168px; border: 1px solid var(--border); border-radius: 20px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 12%, var(--surface)), var(--surface) 62%); box-shadow: 0 1px 2px var(--shadow-a), 0 14px 30px -22px var(--shadow-b);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s; }
.admin-page .kpi-row > .kpi:nth-child(2) { --tc: var(--pc-violet); }
.admin-page .kpi-row > .kpi:nth-child(3) { --tc: var(--pc-amber); }
.admin-page .kpi-row > .kpi:nth-child(4) { --tc: var(--pc-green); }
.admin-page .kpi.kpi-compact { min-height: 0; padding: 18px 22px; }
.admin-page a.kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tc) 40%, var(--border)); box-shadow: 0 2px 4px var(--shadow-a), 0 22px 40px -22px color-mix(in srgb, var(--tc) 50%, var(--shadow-b)); }
.admin-page .kpi-label { font-size: 13px; font-weight: 600; }
.admin-page .kpi-value { font-size: clamp(32px, 3vw, 40px); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.admin-page .kpi-compact .kpi-value { font-size: clamp(26px, 2.4vw, 32px); }
.admin-page .kpi .spark-wrap { --chart: var(--tc); }
.admin-page .kpi-delta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px; padding: 2px 10px; border-radius: 12px; font-size: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); width: fit-content; }
.admin-page .kpi-delta-up { background: color-mix(in srgb, var(--good) 14%, transparent); }
.admin-page .kpi-delta-down { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.admin-page .spark-area { opacity: .16; }
.admin-page .spark-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--chart) 22%, transparent); }
.admin-page .retention-bar { height: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.admin-page .retention-bar span { background: linear-gradient(90deg, color-mix(in srgb, var(--chart) 55%, transparent), var(--chart)); }

/* ------------------------------------------------------------ the controls above a section */
.admin-page .stats-presets, .admin-page .stats-report { border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px var(--shadow-a); }
.admin-page .stats-preset[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); font-weight: 650; }
.admin-page .stats-custom.is-active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.admin-page .admin-pills .category-pill { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--text-2); transition: background .15s, border-color .15s, color .15s; }
.admin-page .admin-pills .category-pill:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); }
.admin-page .admin-pills .category-pill[aria-selected='true'] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); box-shadow: none; }

/* ------------------------------------------------------------ charts, bars and tables */
.admin-page .chart-bar { background: linear-gradient(180deg, var(--chart), color-mix(in srgb, var(--chart) 55%, transparent)); border-radius: 6px 6px 0 0; }
.admin-page .chart-col.is-active { background: color-mix(in srgb, var(--chart) 10%, transparent); }
.admin-page .chart-grid { height: 0; background: transparent; border-top: 1px dashed color-mix(in srgb, var(--border) 90%, transparent); }
.admin-page .chart-plot { border-bottom-color: var(--border); }
.admin-page .chart-tip { border-radius: 12px; box-shadow: 0 1px 2px var(--shadow-a), 0 18px 34px -16px var(--shadow-b); }
.admin-page .bar-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.admin-page .bar-fill { border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--chart) 55%, transparent), var(--chart)); }
.admin-page .top-list li { transition: background .12s; }
.admin-page .top-list li:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.admin-page .top-list .product-logo { box-shadow: 0 0 0 1px var(--card-ring); }
.admin-page .admin-table-wrap { border: 1px solid var(--border); border-radius: 14px; }
.admin-page .admin-card-flush .admin-table-wrap, .admin-page .log-scroll { border-radius: 0; border-inline: 0; }
.admin-page .admin-table thead tr, .admin-page .log-table thead tr { background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); }
.admin-page .admin-table th, .admin-page .log-table th { background: transparent; }
.admin-page .admin-table tbody tr { transition: background .12s; }
.admin-page .admin-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.admin-page .log-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.admin-page .chart-table summary { font-weight: 600; }
.admin-page .avatar-sm { box-shadow: 0 0 0 1px var(--card-ring); }
.admin-page .act { height: 24px; padding: 0 10px; }

/* ------------------------------------------------------------ forms */
.admin-page .input, .admin-page .select, .admin-page .textarea { border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.admin-page .input:focus, .admin-page .select:focus, .admin-page .textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.admin-page .field > label, .admin-page .give-label { font-weight: 600; }
.admin-page .hint { color: var(--text-3); }
.admin-page .check-row { padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); width: fit-content; }
.admin-page .btn-primary { box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 80%, transparent); }
.admin-page .btn { font-weight: 600; }
.admin-page .notice { border-radius: 14px; }
.admin-page .notice-preview-box { border-radius: 16px; }

/* ------------------------------------------------------------ the review queue */
.admin-page .queue-pane { border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px var(--shadow-a), 0 14px 30px -22px var(--shadow-b); }
.admin-page .queue-pane-list { background: color-mix(in srgb, var(--accent) 3%, var(--surface-2)); }
.admin-page .queue-row { border-radius: 14px; transition: background .15s, box-shadow .15s; }
.admin-page .queue-row:hover { background: var(--surface); }
.admin-page .queue-row[aria-current='true'] { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--border)), 0 10px 20px -14px var(--shadow-b); }
.admin-page .queue-row .icon-tile, .admin-page .queue-detail-head .icon-tile { box-shadow: 0 0 0 1px var(--card-ring); }
.admin-page .queue-pane-detail { padding: 28px 30px; }
.admin-page .queue-detail-copy h2 { font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.admin-page .queue-facts { border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--accent) 4%, var(--surface-2)); }
.admin-page .queue-checklist li .admin-icon { color: var(--good); }
.admin-page .queue-detail .queue-actions .btn { border-radius: 999px; }

/* ------------------------------------------------------------ the catalogue */
.admin-page .feat-slot { border-radius: 20px; padding: 14px; box-shadow: 0 1px 2px var(--shadow-a), 0 12px 24px -20px var(--shadow-b); transition: border-color .2s, box-shadow .2s, transform .2s; }
.admin-page .feat-slot:not(.feat-slot-empty):hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); transform: translateY(-2px); }
.admin-page .feat-slot-empty { box-shadow: none; border-style: dashed; }
.admin-page .feat-pos { box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.admin-page .feat-hit { border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.admin-page .feat-hit:hover:not(:disabled) { box-shadow: 0 8px 18px -12px var(--shadow-b); }
.admin-page .tax-chip { height: 32px; background: var(--surface); box-shadow: 0 1px 2px var(--shadow-a); }
.admin-page .tax-chip-curated { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* ------------------------------------------------------------ settings: status banners, dangerous things */
.admin-page .idp-status { border-radius: 20px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 1px 2px var(--shadow-a); }
.admin-page .idp-status.is-on, .admin-page .db-status.is-ready { background: color-mix(in srgb, var(--good) 8%, var(--surface)); border-color: color-mix(in srgb, var(--good) 30%, var(--border)); }
.admin-page .db-status.is-connecting { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 32%, var(--border)); }
.admin-page .db-status.is-error { background: color-mix(in srgb, var(--bad) 8%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 32%, var(--border)); }
.admin-page .idp-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-3) 18%, transparent); }
.admin-page .idp-status.is-on .idp-dot, .admin-page .db-status.is-ready .idp-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); }
.admin-page .danger-zone { border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--bad) 8%, var(--surface)), var(--surface) 60%); border-color: color-mix(in srgb, var(--bad) 30%, var(--border)); box-shadow: none; }
.admin-page .danger-row { border: 1px solid var(--border); border-radius: 16px; }
.admin-page .medal-people tr.is-manual td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.admin-page .special-form { border-radius: 16px; }

/* ------------------------------------------------------------ server status */
.admin-page .status-hero { padding: 22px 26px; border-radius: 20px; box-shadow: 0 1px 2px var(--shadow-a), 0 14px 30px -22px var(--shadow-b); }
.admin-page .status-hero.is-ok { background: linear-gradient(160deg, color-mix(in srgb, var(--good) 10%, var(--surface)), var(--surface) 70%); }
.admin-page .status-hero.is-warn { background: linear-gradient(160deg, color-mix(in srgb, var(--warn) 10%, var(--surface)), var(--surface) 70%); }
.admin-page .status-hero.is-bad { background: linear-gradient(160deg, color-mix(in srgb, var(--bad) 10%, var(--surface)), var(--surface) 70%); }
.admin-page .status-hero-icon { box-shadow: 0 10px 20px -10px currentColor; }
.admin-page .status-hero-copy h2 { font-weight: 700; letter-spacing: -.02em; }
.admin-page .status-tile { border-radius: 20px; padding: 16px 16px 18px; box-shadow: 0 1px 2px var(--shadow-a); background: linear-gradient(160deg, color-mix(in srgb, var(--good) 9%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--good) 28%, var(--border)); }
.admin-page .status-tile.is-warn { background: linear-gradient(160deg, color-mix(in srgb, var(--warn) 10%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.admin-page .status-tile.is-bad { background: linear-gradient(160deg, color-mix(in srgb, var(--bad) 10%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--bad) 38%, var(--border)); }
.admin-page .status-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px var(--shadow-a), 0 20px 36px -22px var(--shadow-b); }
.admin-page .status-tile-value { font-weight: 700; }
.admin-page .status-type { border-radius: 18px; box-shadow: 0 1px 2px var(--shadow-a); }
.admin-page .status-update { border-radius: 20px; }

@media (max-width: 1100px) {
  .admin-page .admin-nav { scrollbar-width: none; }
  .admin-page .admin-nav::-webkit-scrollbar { display: none; }
  .admin-page .admin-nav-item { border-radius: 999px; }
  .admin-page .admin-nav-item[aria-current='page']::before { display: none; }
}
@media (max-width: 640px) {
  .admin-page { padding-block: 20px 56px; }
  .admin-page .admin-card { padding: 20px 18px; }
  .admin-page .admin-card-flush { padding: 20px 0 16px; }
  .admin-page .kpi-value { font-size: 30px; }
  .admin-page .queue-pane-detail { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page .kpi, .admin-page .feat-slot, .admin-page .status-tile, .admin-page .admin-nav-item, .admin-page .queue-row { transition: none; }
  .admin-page a.kpi:hover, .admin-page .feat-slot:hover, .admin-page .status-tile:hover { transform: none; }
}