/* ============================================================
   HELIOS — Console (Backend Viewer)
   Editorial dashboard. Inherits design tokens from styles.css.
   ============================================================ */

.backend-body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    margin: 0;
    min-height: 100vh;
}

/* ====== HEADER ====== */
.backend-header {
    background: var(--paper);
    padding: var(--s-6) var(--s-7) 0;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(160%) blur(8px);
    background: rgba(244, 245, 247, 0.92);
}
.backend-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-5);
    flex-wrap: wrap;
}
.backend-title h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1;
}
.backend-title h1::before {
    content: "Console";
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
    margin-bottom: 6px;
}
.backend-home-fixed {
    position: fixed;
    left: 18px;
    bottom: 14px;
    z-index: 30;
    color: var(--ink-mute);
    text-decoration: none;
    font-size: 0.85rem;
    font-family: var(--mono);
    letter-spacing: 0.04em;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: rgba(244, 245, 247, 0.92);
    backdrop-filter: saturate(160%) blur(8px);
    transition: all 120ms;
    box-shadow: var(--shadow-sm);
}
.backend-home-fixed:hover {
    background: var(--paper-deep);
    color: var(--ink);
    border-color: var(--rule-strong);
    text-decoration: none;
}

/* Lock / unlock banner */
.lock-banner {
    background: var(--warning-soft);
    color: var(--warning);
    padding: 8px 14px;
    border-radius: var(--r-1);
    margin-top: var(--s-5);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--mono);
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(156,111,27,0.15);
}
.lock-banner-unlocked {
    background: var(--success-soft);
    color: var(--success);
    border-color: rgba(46,93,67,0.15);
}

/* Connection pills */
.connection-banner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
}
.connection-banner span {
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Tabs */
.bk-tabs {
    display: flex;
    gap: var(--s-5);
    margin-top: var(--s-6);
    border-bottom: none;
    flex-wrap: wrap;
}
.bk-tab {
    background: transparent;
    color: var(--ink-mute);
    border: none;
    padding: 12px 0;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    font-family: var(--sans);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms, border-color 120ms;
    letter-spacing: -0.005em;
}
.bk-tab:hover { color: var(--ink); }
.bk-tab.active {
    color: var(--ink);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.bk-tab-panel { display: block; }
.bk-tab-panel[hidden] { display: none; }

/* ====== MAIN ====== */
.backend-main {
    padding: var(--s-7) var(--s-7) var(--s-9);
    max-width: 1280px;
    margin: 0 auto;
}

.bk-section { margin-bottom: var(--s-8); }

section.bk-tab-panel > h2 {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--s-2);
}

.bk-help {
    color: var(--ink-mute);
    font-size: 0.95rem;
    margin: 0 0 var(--s-6);
    max-width: 640px;
    line-height: 1.55;
}

.bk-subheading {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: var(--s-7) 0 var(--s-4);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--rule);
}

.bk-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    display: block;
    margin-bottom: var(--s-2);
    font-weight: 600;
}

/* ====== OVERVIEW TILES ====== */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-3);
}
.tile {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-5);
    position: relative;
    transition: border-color 120ms;
}
.tile:hover { border-color: var(--rule-strong); }
.tile-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    font-weight: 600;
    margin-bottom: var(--s-3);
}
.tile-value {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.015em;
    word-break: break-word;
    line-height: 1.15;
}
.tile-sub {
    font-size: 0.78rem;
    color: var(--ink-mute);
    margin-top: var(--s-2);
    font-family: var(--mono);
    letter-spacing: 0.02em;
}
.tile-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ink-faint);
    position: absolute;
    top: var(--s-5);
    right: var(--s-5);
}
.tile-dot-green { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.tile-dot-red   { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.tile-dot-amber { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.tile-dot-yellow { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }

/* ====== RUNTIME PIPELINE ====== */
.runtime-pipeline {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 28px minmax(150px, 1fr) 28px minmax(150px, 1fr) 28px minmax(150px, 1fr);
    gap: var(--s-2);
    align-items: stretch;
    margin: 0 0 var(--s-5);
}
.pipeline-step {
    min-height: 112px;
    padding: var(--s-4);
    background:
        linear-gradient(135deg, rgba(12, 74, 76, 0.08), rgba(255, 255, 255, 0) 52%),
        var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    position: relative;
    box-shadow: var(--shadow-sm);
}
.pipeline-step::after {
    content: "";
    position: absolute;
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-3);
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(12, 74, 76, 0.45) 0 8px, transparent 8px 14px);
    opacity: 0.7;
}
.pipeline-kicker {
    display: block;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 700;
    margin-bottom: var(--s-3);
}
.pipeline-step strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.2;
    word-break: break-word;
}
.pipeline-step small {
    display: block;
    margin-top: var(--s-2);
    color: var(--ink-mute);
    font-family: var(--mono);
    font-size: 0.72rem;
}
.pipeline-link {
    align-self: center;
    height: 1px;
    background: var(--rule-strong);
    position: relative;
}
.pipeline-link::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--rule-strong);
    border-right: 1px solid var(--rule-strong);
    transform: rotate(45deg);
    background: var(--paper);
}

/* ====== METRICS SIGNAL BOARD ====== */
.metric-scope-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}
.metric-scope {
    min-height: 178px;
    background:
        linear-gradient(180deg, rgba(12, 74, 76, 0.045), rgba(255, 255, 255, 0) 42%),
        var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-5);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.metric-scope::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(12, 74, 76, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 74, 76, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.72), transparent 74%);
    pointer-events: none;
}
.metric-scope-wide {
    grid-column: span 2;
}
.metric-topline,
.budget-readout,
.metric-value,
.metric-bar,
.metric-meta,
.metric-spark {
    position: relative;
    z-index: 1;
}
.metric-topline {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    align-items: center;
    margin-bottom: var(--s-4);
}
.metric-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    font-weight: 600;
}
.metric-unit {
    font-family: var(--mono);
    font-size: 0.64rem;
    color: var(--ink-mute);
    background: var(--paper-tint);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
}
.metric-value {
    font-family: var(--serif);
    font-size: 2.25rem;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1;
}
.metric-value-tight {
    font-size: 1.55rem;
    line-height: 1.1;
    word-break: break-word;
}
.metric-value small {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-mute);
    letter-spacing: 0;
    margin-left: 4px;
}
.metric-bar {
    height: 9px;
    margin-top: var(--s-5);
    border-radius: 999px;
    overflow: hidden;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
}
.metric-bar span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #2E5D43);
    transition: width 220ms ease;
}
.metric-bar-warm span { background: linear-gradient(90deg, #2E5D43, var(--warning)); }
.metric-bar-cool span { background: linear-gradient(90deg, #2B6970, var(--accent)); }
.metric-bar-budget span { background: linear-gradient(90deg, var(--accent), var(--warning), var(--danger)); }
.metric-meta {
    margin-top: var(--s-3);
    color: var(--ink-mute);
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.45;
}
.metric-spark {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    align-items: end;
    height: 42px;
    margin-top: var(--s-4);
}
.metric-spark span {
    display: block;
    min-height: 8px;
    border-radius: 3px 3px 0 0;
    background: var(--accent-soft);
    border: 1px solid rgba(12, 74, 76, 0.12);
}
.metric-spark span:nth-child(1) { height: 26%; }
.metric-spark span:nth-child(2) { height: 58%; }
.metric-spark span:nth-child(3) { height: 38%; }
.metric-spark span:nth-child(4) { height: 72%; }
.metric-spark span:nth-child(5) {
    height: 18%;
    background: var(--accent);
    transition: height 220ms ease;
}
.budget-readout {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    align-items: center;
}
.budget-ring {
    --budget-deg: 0deg;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(var(--accent) var(--budget-deg), var(--paper-deep) 0deg);
    border: 1px solid var(--rule);
    position: relative;
    flex: 0 0 auto;
}
.budget-ring::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--rule);
}
.budget-ring span {
    display: none;
}

/* Config dump */
.config-dump {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-4) var(--s-5);
    margin-top: var(--s-5);
}
.config-dump summary {
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--ink-soft);
    font-weight: 500;
    padding: 4px 0;
    user-select: none;
}
.config-dump summary:hover { color: var(--ink); }
.config-dump[open] summary { margin-bottom: var(--s-4); }
.config-dump pre {
    background: var(--paper-tint);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    padding: var(--s-4);
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.55;
    overflow-x: auto;
    margin: 0;
}

/* ====== SOURCES TAB ====== */
.source-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr);
    gap: var(--s-5);
    align-items: start;
}
.source-control-panel,
.source-list-panel {
    margin-bottom: 0;
}
.source-upload-queue {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule);
}
.source-upload-queue[hidden] { display: none; }
.source-file-list {
    margin-bottom: var(--s-3);
    color: var(--ink-mute);
    font-size: 0.9rem;
}
.source-upload-progress {
    margin-top: var(--s-2);
    color: var(--ink-mute);
    font-size: 0.82rem;
    font-family: var(--mono);
}
.operator-token {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule);
}
.operator-token-row {
    display: flex;
    gap: var(--s-2);
}
.operator-token-row input {
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--sans);
}
.operator-token-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ====== MODELS TAB ====== */
.model-dropdowns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}
.model-toggle {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-2);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: 0.95rem;
    font-family: var(--sans);
    transition: border-color 120ms;
}
.model-toggle:hover { border-color: var(--rule-strong); }
.model-role {
    font-family: var(--mono);
    font-size: 0.62rem;
    background: var(--accent);
    color: var(--accent-on);
    padding: 3px 8px;
    border-radius: var(--r-1);
    letter-spacing: 0.12em;
    font-weight: 600;
}
.model-active {
    flex: 1;
    font-weight: 600;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink);
}
.model-chevron {
    color: var(--ink-mute);
    font-family: var(--mono);
    font-size: 0.85rem;
}

.model-list {
    margin-top: var(--s-2);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    overflow: hidden;
}
.model-list[hidden] { display: none; }
.model-row {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--rule);
    transition: background 120ms;
}
.model-row:last-child { border-bottom: none; }
.model-row:hover { background: var(--paper-tint); }
.model-row.active { background: var(--accent-soft); }
.model-row-name {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--ink);
    display: flex;
    gap: var(--s-2);
    align-items: center;
    font-size: 1rem;
}
.model-row-meta {
    color: var(--ink-mute);
    font-size: 0.78rem;
    margin-top: 4px;
    font-family: var(--mono);
    letter-spacing: 0.02em;
}
.model-row-desc {
    color: var(--ink-soft);
    font-size: 0.88rem;
    margin-top: 6px;
    line-height: 1.5;
}

.model-apply {
    margin-top: var(--s-5);
    padding: 10px 18px;
    background: var(--ink-faint);
    color: var(--surface);
    border: none;
    border-radius: var(--r-2);
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.5;
    font-family: var(--sans);
    font-size: 0.9rem;
}

/* ====== PROMPT PLAYGROUND ====== */
.playground-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
}
.prompt-area, .prompt-preview {
    width: 100%;
    min-height: 380px;
    background: var(--ink);
    color: #E5E0D5;
    border: 1px solid var(--ink);
    border-radius: var(--r-2);
    padding: var(--s-4);
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.6;
    resize: vertical;
}
.prompt-area:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent);
    border-color: var(--accent);
}
.prompt-preview {
    overflow: auto;
    white-space: pre-wrap;
}
.playground-actions {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-3);
    flex-wrap: wrap;
}
.playground-actions button {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    padding: 6px 12px;
    border-radius: var(--r-2);
    cursor: pointer;
    font-size: 0.82rem;
    font-family: var(--sans);
    font-weight: 500;
    transition: background 120ms;
}
.playground-actions button:hover { background: var(--paper-deep); }
.playground-send {
    margin-top: var(--s-3);
    width: 100%;
    background: var(--ink-faint);
    color: var(--surface);
    padding: var(--s-3);
    border: none;
    border-radius: var(--r-2);
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.5;
    font-family: var(--sans);
}
.playground-note {
    color: var(--ink-mute);
    font-size: 0.78rem;
    margin-top: var(--s-2);
    font-family: var(--mono);
    letter-spacing: 0.02em;
}

/* ====== USAGE HISTORY ====== */
.usage-summary {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-5);
    margin-bottom: var(--s-5);
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}
.chart-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-5);
}
.chart-card h4 {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 var(--s-3);
}
.chart-canvas-wrap {
    position: relative;
    height: 220px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .backend-header { padding: var(--s-5) var(--s-4) 0; }
    .backend-title h1 { font-size: 1.85rem; }
    .backend-main { padding: var(--s-5) var(--s-4); }
    .runtime-pipeline {
        grid-template-columns: 1fr;
    }
    .pipeline-link {
        width: 1px;
        height: 18px;
        justify-self: center;
    }
    .pipeline-link::after {
        right: -4px;
        top: auto;
        bottom: -1px;
        transform: rotate(135deg);
    }
    .tile-grid { grid-template-columns: 1fr 1fr; }
    .metric-scope-grid { grid-template-columns: 1fr 1fr; }
    .metric-scope-wide { grid-column: span 2; }
    .source-grid { grid-template-columns: 1fr; }
    .model-dropdowns { grid-template-columns: 1fr; }
    .playground-grid { grid-template-columns: 1fr; }
    .chart-grid { grid-template-columns: 1fr; }
    .bk-tabs { gap: var(--s-3); }
    .metric-value { font-size: 1.65rem; }
}

@media (max-width: 540px) {
    .tile-grid { grid-template-columns: 1fr; }
    .metric-scope-grid { grid-template-columns: 1fr; }
    .metric-scope-wide { grid-column: span 1; }
    .metric-topline { align-items: flex-start; flex-direction: column; }
    .budget-readout { align-items: flex-start; flex-direction: column; }
    .backend-title h1 { font-size: 1.5rem; }
    .backend-home-fixed {
        left: 12px;
        bottom: 10px;
        font-size: 0.78rem;
        padding: 7px 10px;
    }
}

/* ---------- Conversations tab ---------- */
.conv-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.conv-actions { display: flex; gap: 0.5rem; }
.conv-table-wrap { overflow-x: auto; margin-top: 1rem; }
.conv-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.conv-table th, .conv-table td {
    text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(0,0,0,0.08);
    vertical-align: top;
}
.conv-table th { font-weight: 600; color: #555; background: rgba(0,0,0,0.02); position: sticky; top: 0; }
.conv-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conv-table td.mono { font-family: var(--mono); font-size: 0.78rem; color: #555; }
.conv-table td { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.conv-del {
    border: none; background: transparent; color: #b91c1c; font-size: 1.1rem;
    cursor: pointer; padding: 0.1rem 0.45rem; border-radius: 0.25rem;
}
.conv-del:hover { background: rgba(185, 28, 28, 0.1); }
.conv-readonly {
    font-family: var(--mono, monospace);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute, #6b7280);
}

.conv-btn {
    padding: 8px 16px;
    background: var(--ink-faint, #374151);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-family: var(--sans, inherit);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.conv-btn:hover { background: #1f2937; }
.conv-btn-danger { background: #b91c1c; }
.conv-btn-danger:hover { background: #991b1b; }