/* Admin area in the member palette ("Aurora glass"). Loaded after material.css and scoped to .theme-material:
   the admin markup and its .md-* classes are unchanged, this file only re-maps the theme's custom properties to
   the member app's navy/teal canvas, cyan->blue accent and frosted panels, and rounds things off to match.
   MUST be copied to MagikRae.Maui/wwwroot/css/ on change (the admin is reachable in the app too). */

.theme-material {
    --bg: #0a1024;
    --sidebar-bg: rgba(14, 22, 48, 0.72);
    --surface: rgba(255, 255, 255, 0.06);
    --surface-alt: rgba(255, 255, 255, 0.1);
    --surface-hover: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.22);
    --text: #eaf2ff;
    --text-secondary: #93a4c4;
    --accent: #3fe0d0;
    --accent-strong: #5b8cff;
    --accent-text: #04121a;
    --accent-tint: rgba(63, 224, 208, 0.16);
    --accent-glow: rgba(63, 224, 208, 0.28);
    --danger: #f0706a;
    --danger-tint: rgba(240, 112, 106, 0.16);
    --success: #3fe0d0;
    --success-tint: rgba(63, 224, 208, 0.14);
    background:
        radial-gradient(ellipse 80% 50% at 15% 0%, rgba(63, 224, 208, 0.16), transparent 60%),
        radial-gradient(ellipse 70% 45% at 95% 10%, rgba(91, 140, 255, 0.2), transparent 60%),
        #070b1a;
}

.theme-material.light-mode {
    --bg: #eef6fb;
    --sidebar-bg: rgba(255, 255, 255, 0.8);
    --surface: rgba(255, 255, 255, 0.7);
    --surface-alt: rgba(255, 255, 255, 0.95);
    --surface-hover: rgba(10, 30, 60, 0.06);
    --border: rgba(13, 27, 51, 0.7);
    --border-strong: #0d1b33;
    --text: #0d1b33;
    --text-secondary: #566a88;
    --accent: #0d9fa0;
    --accent-strong: #3f6fe0;
    --accent-text: #ffffff;
    --accent-tint: rgba(13, 159, 160, 0.14);
    --accent-glow: rgba(13, 159, 160, 0.25);
    background:
        radial-gradient(ellipse 80% 50% at 15% 0%, rgba(63, 224, 208, 0.28), transparent 60%),
        radial-gradient(ellipse 70% 45% at 95% 10%, rgba(91, 140, 255, 0.24), transparent 60%),
        #eef6fb;
}

/* Links, headings */
.theme-material a { color: var(--accent); }
.theme-material .md-sidebar a, .theme-material .btn { text-decoration: none; }

/* Frosted sidebar and panels */
.md-sidebar { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.theme-material .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: none;
}
.theme-material.light-mode .card { border-color: rgba(13, 27, 51, 0.18); }

/* Buttons: pills, cyan->blue gradient for the primary action */
.theme-material .btn { border-radius: 10px; }
.theme-material .btn-primary {
    background: linear-gradient(135deg, #3fe0d0, #5b8cff);
    color: #04121a;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(63, 224, 208, 0.22);
}
.theme-material.light-mode .btn-primary { background: linear-gradient(135deg, #0d9fa0, #3f6fe0); color: #fff; box-shadow: 0 6px 18px rgba(13, 159, 160, 0.25); }
.theme-material .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #3fe0d0, #5b8cff);
    filter: brightness(1.06);
    box-shadow: 0 8px 26px rgba(63, 224, 208, 0.3);
}
.theme-material.light-mode .btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #0d9fa0, #3f6fe0); color: #fff; }
.theme-material .btn-danger { border-radius: 10px; }

/* Inputs */
.theme-material .input { border-radius: 16px; background: var(--surface); border-color: var(--border-strong); }
.theme-material .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.theme-material select.input option { background: #0f1830; color: #eaf2ff; }
.theme-material.light-mode select.input option { background: #ffffff; color: #0d1b33; }

/* Sidebar navigation: pill items with the accent tint when active */
.theme-material .md-sidebar nav a { border-radius: 14px; }
.theme-material .md-sidebar nav a.active { background: var(--accent-tint); color: var(--accent); }
.theme-material .md-sidebar nav a.active i { color: var(--accent); }

/* Tables and badges */
.theme-material table { border-radius: 18px; }
.theme-material .badge { border-radius: 999px; }

/* Toggle switches use the accent */
.theme-material .md-switch input:checked + .track { background: var(--accent); }

/* Scrollbars */
.theme-material ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

/* The blanket link colour above must not tint navigation and buttons-as-links. */
.theme-material .md-nav-links a { color: var(--text-secondary); }
.theme-material .md-nav-links a:hover { color: var(--text); }
.theme-material .md-nav-links a.active { color: var(--accent); }
.theme-material .md-brand { color: var(--text); }
.theme-material .btn { color: var(--text); }
.theme-material .btn-primary, .theme-material .btn-primary:hover { color: #04121a; }
.theme-material.light-mode .btn-primary, .theme-material.light-mode .btn-primary:hover { color: #fff; }
.theme-material .btn-danger { color: var(--danger); }

/* Collapsible sidebar groups */
.theme-material .md-nav-links .md-nav-group { display: flex; align-items: center; width: 100%; }
.theme-material .md-nav-links .md-nav-group .md-nav-chevron { margin: 0 0 0 auto; font-size: 0.7rem; transition: transform 0.15s; }
.theme-material .md-nav-links .md-nav-group.open .md-nav-chevron { transform: rotate(180deg); }
.theme-material .md-nav-links .md-nav-group.open { color: var(--text); }
.theme-material .md-nav-sub { display: flex; flex-direction: column; gap: 0.1rem; margin: 0.1rem 0 0.3rem 0.9rem; padding-left: 0.4rem; border-left: 1px solid var(--border, rgba(255,255,255,0.12)); }
/* Sidebar: room between each icon and its label */
.theme-material .md-nav-links a, .theme-material .md-nav-links .md-nav-group { display: flex; align-items: center; gap: 0.8rem; }
.theme-material .md-nav-links a i, .theme-material .md-nav-links .md-nav-group > i:first-child { width: 1.3rem; margin-right: 0; text-align: center; flex-shrink: 0; }
.theme-material .md-nav-links .md-nav-group .md-nav-chevron { width: auto; }
.theme-material .md-nav-sub a { gap: 0.7rem; }


/* Status bar: keep the admin top bar (and the slide-out menu) below the clock/notification area.
   --app-inset-top is pushed in by the Android shell (edge-to-edge); env() covers browsers/iOS. */
@media (max-width: 860px) {
    .theme-material .md-topbar { padding-top: calc(max(env(safe-area-inset-top, 0px), var(--app-inset-top, 0px)) + 0.85rem); }
    .theme-material .md-sidebar { padding-top: max(env(safe-area-inset-top, 0px), var(--app-inset-top, 0px)); }
}

/* Push message preview (Admin -> Push messages) */
.theme-material .push-preview { display: flex; flex-direction: column; gap: 0.15rem; max-width: 22rem; margin: 0.4rem 0 1rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.85rem; }
.theme-material .push-preview .push-app { font-size: 0.7rem; color: var(--text-dim, #9aa3c7); }

/* Popups must be readable: --surface is see-through here, so dialogs get a solid panel and the toasts a solid fill. */
.theme-material { --pop-bg: #131a38; }
.theme-material.light-mode { --pop-bg: #ffffff; }
.theme-material .md-confirm-dialog { background: var(--pop-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.theme-material .md-confirm-overlay { background: rgba(3, 5, 16, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.theme-material .md-toast-success { background: #0f3d2e; color: #86efac; }
.theme-material .md-toast-error { background: #4a1616; color: #fca5a5; }
.theme-material.light-mode .md-toast-success { background: #dcfce7; color: #166534; }
.theme-material.light-mode .md-toast-error { background: #fee2e2; color: #991b1b; }

/* Every admin page: cards fill the content column, so widths line up from page to page (some pages had their own
   480-720 px caps set inline). */
.theme-material .md-content .card { max-width: none !important; width: 100%; box-sizing: border-box; }
.md-setup .hx-release-history { max-width: none; margin-top: 0; }
.hx-release-history { max-width: 480px; margin-top: 1rem; }

/* Same content width on every page, with or without a vertical scrollbar. */
html:has(.theme-material) { scrollbar-gutter: stable; }


/* Square-ish buttons, scrollable tables, no overlapping action buttons (mobile) */
.theme-material .btn-sm { border-radius: 8px; line-height: 1.25; }
.theme-material .btn { line-height: 1.25; white-space: nowrap; }
.theme-material .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.theme-material .card:has(> .table-wrap) { padding: 0.5rem; }
.theme-material td .btn, .theme-material td form { margin: 0.15rem 0.25rem 0.15rem 0; vertical-align: middle; }
.theme-material td:last-child:has(.btn) { white-space: nowrap; }
.theme-material td, .theme-material th { vertical-align: middle; }
.theme-material td .badge { margin: 0.1rem 0.25rem 0.1rem 0; }
@media (max-width: 860px) {
    .theme-material td, .theme-material th { padding: 0.6rem 0.6rem; }
    .theme-material td:first-child { min-width: 7rem; }
    .theme-material .md-content { overflow-x: hidden; }
    .theme-material .md-content .card { max-width: 100%; box-sizing: border-box; }
    .theme-material .btn { min-height: 2.25rem; }
    .theme-material .md-content input.input, .theme-material .md-content select.input, .theme-material .md-content textarea.input { max-width: 100%; box-sizing: border-box; }
}

/* Mobile: every table row becomes a card (labels come from js/admin-tables.js), so nothing hides off-screen */
@media (max-width: 860px) {
    .theme-material .table-wrap { overflow-x: visible; }
    .theme-material .card:has(> .table-wrap) { padding: 0.25rem 0.75rem; }
    .theme-material .table-wrap table, .theme-material .table-wrap tbody { display: block; }
    .theme-material .table-wrap thead { display: none; }
    .theme-material .table-wrap tr { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
    .theme-material .table-wrap tr:last-child { border-bottom: none; }
    .theme-material .table-wrap td { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; padding: 0.25rem 0; border: none; white-space: normal; min-width: 0; max-width: none; }
    .theme-material .table-wrap tr:hover td { background: none; }
    .theme-material .table-wrap td[data-label]::before { content: attr(data-label); flex: 0 0 6.5rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 600; }
    .theme-material .table-wrap td:empty { display: none; }
    .theme-material .table-wrap td:first-child { font-weight: 600; font-size: 0.98rem; }
    .theme-material .table-wrap td.muted { overflow: visible; text-overflow: clip; }
    .theme-material .table-wrap td:last-child:has(.btn) { padding-top: 0.5rem; }
    .theme-material .table-wrap td:last-child:has(.btn)::before { display: none; }
}

/* Admin chat history: week strip (same idea as the member's Pulse) */
.theme-material .cw-card { margin: 0.6rem 0 1rem; padding: 0.9rem 1rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); max-width: 640px; }
.theme-material .cw-month { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 0.7rem; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--text-secondary); }
.theme-material .cw-month button { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-alt); color: var(--text); cursor: pointer; }
.theme-material .cw-month button:disabled { opacity: 0.35; cursor: default; }
.theme-material .cw-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.2rem; }
.theme-material .cw-day { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.45rem 0 0.35rem; border-radius: 14px; border: 0; background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.theme-material .cw-day:disabled { opacity: 0.35; cursor: default; }
.theme-material .cw-day.sel { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.theme-material .cw-dow { font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-secondary); }
.theme-material .cw-num { font-size: 1.25rem; font-weight: 700; }
.theme-material .cw-pip { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: transparent; }
.theme-material .cw-pip.on { background: #e8695f; }
.theme-material .cw-foot { margin-top: 0.6rem; text-align: center; font-size: 0.82rem; color: var(--text-secondary); }

/* ---- Playground (Admin -> AI -> Playground) ---- */
.pg-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.1rem; }
.pg-head h1 { margin: 0 0 0.25rem; }
.pg-head p { margin: 0; max-width: 46rem; }

.pg-tabs { display: inline-flex; gap: 0.2rem; padding: 0.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pg-tabs button { display: inline-flex; align-items: center; gap: 0.45rem; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.88rem; padding: 0.5rem 0.95rem; border-radius: 9px; cursor: pointer; }
.pg-tabs button:hover { color: var(--text); }
.pg-tabs button.active { background: var(--accent-tint); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-glow); }

.pg-panel { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; min-height: 34rem; height: calc(100vh - 12rem); max-height: 60rem; }

.pg-bar { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; align-items: center; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); }
.pg-bar-group { display: flex; align-items: center; gap: 0.55rem; }
.pg-bar-group.pg-grow { flex: 1 1 14rem; min-width: 12rem; }
.pg-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.pg-select { min-width: 10rem; max-width: 16rem; }
.pg-model { flex: 1; min-width: 0; }
.pg-model .field, .pg-model select, .pg-model input { margin: 0; width: 100%; }
.pg-num { width: 6.5rem; }
.pg-range { width: 7rem; accent-color: var(--accent); }
.pg-value { min-width: 3.4rem; font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pg-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }

.pg-mini-switch { position: relative; display: inline-block; width: 2rem; height: 1.1rem; flex: none; }
.pg-mini-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; margin: 0; }
.pg-mini-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--border-strong); transition: background 0.15s; }
.pg-mini-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.1rem - 4px); height: calc(1.1rem - 4px); border-radius: 50%; background: #fff; transition: transform 0.15s; }
.pg-mini-switch input:checked + span { background: var(--accent); }
.pg-mini-switch input:checked + span::after { transform: translateX(0.9rem); }

.pg-thread { flex: 1; overflow-y: auto; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.pg-row { display: flex; width: 100%; max-width: 52rem; margin: 0 auto; }
.pg-row.pg-user { justify-content: flex-end; }
.pg-bubble { max-width: 80%; padding: 0.65rem 0.95rem; border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, var(--accent-strong), var(--accent)); color: var(--accent-text); white-space: pre-wrap; word-break: break-word; font-size: 0.93rem; }
.pg-user-col { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; max-width: 80%; }
.pg-user-col .pg-bubble { max-width: 100%; }
.pg-user-foot { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pg-time { font-variant-numeric: tabular-nums; opacity: 0.85; }
.pg-retry { display: inline-flex; align-items: center; gap: 0.32rem; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.72rem; padding: 0.15rem 0.45rem; cursor: pointer; }
.pg-retry:hover:not(:disabled) { background: var(--surface-alt); color: var(--text); }
.pg-retry:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-reply { width: 100%; padding: 0.2rem 0.1rem; font-size: 0.93rem; line-height: 1.55; }
.pg-raw { white-space: pre-wrap; word-break: break-word; }
.pg-md p, .pg-md ul, .pg-md ol { margin: 0 0 0.6rem; }
.pg-pending { display: flex; align-items: center; gap: 0.6rem; color: var(--text-secondary); }
.pg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; margin-top: 0.55rem; font-size: 0.74rem; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pg-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; border-radius: 99px; font-family: inherit; }
.pg-pill.pg-ok { background: var(--success-tint); color: var(--success); }
.pg-pill.pg-attempt { background: var(--surface-alt); color: var(--text-secondary); }

.pg-error { width: 100%; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid rgba(240, 112, 106, 0.45); background: var(--danger-tint); color: var(--text); }
.pg-error-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--danger); margin-bottom: 0.35rem; }
.pg-error-body { font-size: 0.86rem; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.pg-error-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.6rem; font-size: 0.74rem; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pg-error-foot .btn { margin-left: auto; }

.pg-save { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-top: 0.7rem; padding: 0.55rem 0.8rem; border-radius: 10px; border: 1px dashed var(--accent-glow); background: var(--accent-tint); font-size: 0.82rem; }
.pg-save span { flex: 1 1 14rem; }

.pg-empty { margin: auto; text-align: center; color: var(--text-secondary); max-width: 26rem; }
.pg-empty-icon { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 14px; border: 1px solid var(--border); font-size: 1.3rem; margin-bottom: 0.7rem; }

.pg-compose { padding: 0.8rem 1.1rem 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.6rem; }
.pg-system summary { cursor: pointer; font-size: 0.78rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.4rem; list-style: none; }
.pg-system summary::-webkit-details-marker { display: none; }
.pg-system textarea { margin-top: 0.5rem; }
.pg-input { position: relative; }
.pg-input textarea { width: 100%; padding-right: 3.6rem; resize: vertical; min-height: 3.4rem; }
.pg-send { position: absolute; right: 0.55rem; bottom: 0.55rem; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--accent-strong), var(--accent)); color: var(--accent-text); cursor: pointer; display: grid; place-items: center; font-size: 1rem; }
.pg-send:disabled { opacity: 0.35; cursor: not-allowed; }
.pg-hint { margin: 0; font-size: 0.74rem; color: var(--text-secondary); }

.pg-gallery { padding: 1.2rem; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.pg-tile { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface-alt); display: flex; flex-direction: column; }
.pg-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pg-tile-state { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 1rem; text-align: center; color: var(--text-secondary); font-size: 0.82rem; }
.pg-tile-state i { font-size: 1.6rem; color: var(--accent); }
.pg-tile-state p { margin: 0.3rem 0 0; font-size: 0.75rem; word-break: break-word; max-height: 6rem; overflow: auto; }
.pg-tile-failed i { color: var(--danger); }
.pg-tile-meta { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.75rem; font-size: 0.72rem; color: var(--text-secondary); }
.pg-tile-prompt { color: var(--text); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.8rem; }
.pg-stats > div { border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.9rem; }
.pg-stats small { display: block; color: var(--text-secondary); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.pg-stats strong { font-size: 1.25rem; }
.pg-values { margin-top: 0.8rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--text-secondary); word-break: break-all; }

@media (max-width: 720px) {
    .pg-panel { height: auto; min-height: 30rem; max-height: none; }
    .pg-thread { min-height: 18rem; max-height: 60vh; }
    .pg-bubble { max-width: 92%; }
    .pg-user-col { max-width: 92%; }
    .pg-retry { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
    .pg-compose { padding: 0.7rem 0.8rem 0.85rem; }
    .pg-input textarea { min-height: 4rem; font-size: 1rem; padding-right: 4rem; }
    .theme-material .pg-input.pg-input-attach textarea { padding-left: 4.25rem; }
    .theme-material .pg-attach,
    .pg-send { width: 2.75rem; height: 2.75rem; bottom: 0.5rem; border-radius: 12px; font-size: 1.15rem; }
    .theme-material .pg-attach { left: 0.5rem; }
    .pg-send { right: 0.5rem; }
}

.pg-model { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pg-model > input, .pg-model > select { flex: 1 1 12rem; min-width: 0; margin-top: 0 !important; }
.pg-model > p { margin: 0 !important; flex-basis: 100%; }

.pg-tile-x { float: right; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0 0.2rem; }
.pg-tile-x:hover { color: var(--danger); }

/* ---- Analytics + dashboard (Admin -> AI -> Analytics, Admin Dashboard) ---- */
.an { --an-tokens: #b79cf0; --an-requests: #3ddc84; --an-errors: #f0706a; }
.an-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.1rem; }
.an-head h1 { margin: 0 0 0.25rem; }
.an-head p { margin: 0; max-width: 46rem; }
.an-controls { display: flex; align-items: center; gap: 0.6rem; }
.an-section-title { margin: 2rem 0 0.8rem; font-size: 1rem; color: var(--text-secondary); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.an-seg { display: inline-flex; padding: 0.2rem; gap: 0.15rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.an-seg button { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.82rem; padding: 0.38rem 0.8rem; border-radius: 8px; cursor: pointer; }
.an-seg button.on { background: var(--surface-alt); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.an-seg.small button { font-size: 0.76rem; padding: 0.28rem 0.65rem; }

.an-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.an-stats-3 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.an-stat { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); min-width: 0; }
.an-stat-label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); }
.an-stat strong { font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.01em; }
.an-stat small { color: var(--text-secondary); font-size: 0.78rem; }
.an-badge-delta { font-size: 0.7rem; padding: 0.12rem 0.45rem; border-radius: 7px; font-weight: 600; }
.an-badge-delta.up { background: rgba(61, 220, 132, 0.16); color: var(--an-requests); }
.an-badge-delta.down { background: var(--danger-tint); color: var(--danger); }
.an-meter { height: 5px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 0.4rem; }
.an-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--an-requests)); border-radius: 99px; }

.an-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 1.1rem 1.25rem 1.25rem; margin-bottom: 1rem; min-width: 0; }
.an-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.an-card-head h2 { margin: 0; font-size: 0.98rem; font-weight: 600; }
.an-card-head .muted { font-size: 0.78rem; }
.an-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
.an-two > .an-card { margin-bottom: 0; }
.an-two { margin-bottom: 1rem; }
.an-empty { padding: 1rem 0; text-align: center; }
.an-bad { color: var(--an-errors) !important; }

.an-legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-secondary); }
.an-key { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 3px; }
.an-key-tokens { background: var(--an-tokens); }
.an-key-requests { background: var(--an-requests); }
.an-key-errors { background: var(--an-errors); }

.an-bignum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-bottom: 0.8rem; }
.an-bignum strong { font-size: 2.3rem; letter-spacing: -0.02em; line-height: 1.1; }
.an-chip { font-size: 0.74rem; padding: 0.25rem 0.6rem; border-radius: 8px; background: var(--surface-alt); color: var(--an-requests); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.an-chip.neutral { color: var(--text); }

/* line chart */
.an-chart { position: relative; width: 100%; }
.an-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.an-grid { stroke: var(--border); stroke-width: 1; }
.an-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-line-tokens { stroke: var(--an-tokens); }
.an-line-requests { stroke: var(--an-requests); }
.an-hover-line { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.an-dot { position: absolute; width: 0.7rem; height: 0.7rem; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--bg); pointer-events: none; }
.an-dot-tokens { background: var(--an-tokens); }
.an-dot-requests { background: var(--an-requests); }
.an-hit { position: absolute; inset: 0; display: flex; }
.an-hit span { flex: 1; cursor: crosshair; }
.an-tip { position: absolute; top: 8%; transform: translateX(0.9rem); z-index: 3; min-width: 9.5rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: #0b1226; border: 1px solid var(--border-strong); color: #eaf2ff; font-size: 0.78rem; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.an-tip.left { transform: translateX(calc(-100% - 0.9rem)); }
.an-tip strong { display: block; margin-bottom: 0.3rem; }
.an-tip div { display: flex; align-items: center; gap: 0.4rem; }
.an-tip b { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; }
.an-axis { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.7rem; color: var(--text-secondary); }

/* hour bars */
.an-bars { display: flex; align-items: flex-end; gap: 3px; height: 8.5rem; }
.an-bar { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--an-tokens); opacity: 0.55; transition: opacity 0.15s; }
.an-bar:hover { opacity: 1; }
.an-bars-requests .an-bar { background: var(--an-requests); }
.an-bars-axis { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.7rem; color: var(--text-secondary); }

/* ranking */
.an-rank { list-style: none; margin: 0; padding: 0; }
.an-rank li { display: grid; grid-template-columns: 1.6rem minmax(0, 1.4fr) minmax(4rem, 1fr) minmax(4.5rem, auto); align-items: center; gap: 0.7rem; padding: 0.7rem 0; border-top: 1px solid var(--border); }
.an-rank li:first-child { border-top: 0; }
.an-rank-n { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 7px; background: var(--surface-alt); color: var(--text-secondary); font-size: 0.72rem; }
.an-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.9rem; }
.an-rank-name small { display: block; font-weight: 400; color: var(--text-secondary); font-size: 0.7rem; }
.an-rank-bar { height: 5px; border-radius: 99px; background: var(--border); overflow: hidden; }
.an-rank-bar i { display: block; height: 100%; border-radius: 99px; }
.an-fill-tokens { background: var(--an-tokens); }
.an-fill-requests { background: var(--an-requests); }
.an-rank-val { text-align: right; font-weight: 700; font-size: 0.95rem; }
.an-rank-val small { display: block; font-weight: 400; color: var(--text-secondary); font-size: 0.66rem; letter-spacing: 0.04em; }

/* request logs */
.an-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.an-filters .input { width: auto; min-width: 9rem; flex: 1 1 9rem; }
.an-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; }
.an-live input { display: none; }
.an-live i { font-size: 0.5rem; color: var(--text-secondary); }
.an-live.on { color: var(--an-requests); }
.an-live.on i { color: var(--an-requests); animation: an-pulse 1.6s ease-in-out infinite; }
@keyframes an-pulse { 50% { opacity: 0.3; } }
.an-logs-tools { display: flex; align-items: center; gap: 0.7rem; }
.an-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.8rem; margin-bottom: 0.9rem; }
.an-mini > div { border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.1rem; }
.an-mini small { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.an-mini strong { font-size: 1.35rem; }
.an-mini span { font-size: 0.72rem; color: var(--text-secondary); }
.an-table th.r, .an-table td.r { text-align: right; }
.an-table code { font-size: 0.82rem; display: block; }
.an-table small { display: block; font-size: 0.7rem; }
.an-badge { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 6px; font-size: 0.7rem; background: rgba(91, 140, 255, 0.18); color: #8fb0ff; }
.an-badge-image { background: rgba(255, 140, 190, 0.18); color: #ff9cc7; }
.an-badge-embedding { background: rgba(255, 190, 90, 0.18); color: #ffc46b; }
.an-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; background: none; border: 0; padding: 0; font-family: inherit; }
.an-status.ok { color: var(--an-requests); }
.an-status.err { color: var(--an-errors); cursor: pointer; }
.an-err-row td { background: var(--danger-tint); color: var(--text); font-size: 0.8rem; word-break: break-word; }
.an-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.9rem; font-size: 0.82rem; color: var(--text-secondary); }

/* dashboard */
.an-dash { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
.an-dash-main, .an-dash-side { min-width: 0; }
.an-facts { margin: 0 0 1rem; }
.an-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--border); font-size: 0.85rem; }
.an-facts dt { color: var(--text-secondary); }
.an-facts dd { margin: 0; font-weight: 600; }
.btn-block { display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.5rem; }

@media (max-width: 1100px) { .an-dash { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
    .an-two { grid-template-columns: minmax(0, 1fr); }
    .an-rank li { grid-template-columns: 1.6rem minmax(0, 1fr) minmax(4.5rem, auto); }
    .an-rank-bar { display: none; }
    .an-stat strong { font-size: 1.6rem; }
}

/* Admin content: the scroll container spans the whole area (the scrollbar sits at the screen edge) and the content itself grows to a wide cap instead of the old 1040px column. */
.theme-material .md-content { max-width: none; padding-left: clamp(1.25rem, 3vw, 3rem); padding-right: clamp(1.25rem, 3vw, 3rem); }
.theme-material .md-content > * { max-width: 1680px; }

.pg-send.pg-stop { background: var(--danger); color: #fff; }
.pg-pending .btn { margin-left: auto; }

.md-probe { margin: 0.2rem 0 0.9rem; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); }
.md-probe-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.md-probe-line span { color: var(--text-secondary); font-size: 0.85rem; flex: 1 1 14rem; }
.md-probe-bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; margin: 0.6rem 0 0.3rem; }
.md-probe-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width 0.6s; }
.md-probe-table { width: 100%; margin-top: 0.8rem; font-size: 0.82rem; }
.md-probe-table small { color: var(--text-secondary); word-break: break-word; }
.md-probe-ok { color: var(--success); }
.md-probe-bad { color: var(--danger); }

/* Playground attachments. Scoped under .theme-material because material.css's `.theme-material label`
   (display:block, margin-bottom, font-size:.8rem) otherwise outranks a bare `.pg-attach` and the icon is
   left-aligned and undersized. */
.theme-material .pg-attach {
    position: absolute; left: 0.55rem; bottom: 0.55rem;
    display: grid; place-items: center;
    width: 2.3rem; height: 2.3rem; margin: 0;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-alt); color: var(--text-secondary);
    font-size: 1rem; font-weight: 400; line-height: 1;
    cursor: pointer; user-select: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.theme-material .pg-attach:hover { background: var(--accent-tint); border-color: var(--accent-glow); color: var(--text); }
.theme-material .pg-attach:active { transform: scale(0.94); }
.theme-material .pg-input-attach textarea { padding-left: 3.9rem; }
.pg-pending-files { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pg-chip { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%; padding: 0.3rem 0.4rem 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); font-size: 0.78rem; }
.pg-chip img { width: 2rem; height: 2rem; object-fit: cover; border-radius: 6px; }
.pg-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.pg-chip small { color: var(--text-secondary); }
.pg-chip button { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0 0.25rem; }
.pg-chip button:hover { color: var(--danger); }
.pg-chip-warn { color: var(--danger); border-color: rgba(240, 112, 106, 0.45); background: var(--danger-tint); }
.pg-thumbs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.pg-thumbs img { width: 4.2rem; height: 4.2rem; object-fit: cover; border-radius: 8px; }
.pg-files { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-bottom: 0.4rem; font-size: 0.78rem; opacity: 0.85; }