/* Aizada Admin - ekran layoutları, cədvəl, qrafik, imza elementləri (wake-ring, tri-zolaq). */
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.pg-title { margin: 0; font: var(--weight-semibold) var(--size-2xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.pg-sub { margin: var(--space-1) 0 0; font-size: var(--size-sm); color: var(--text-muted); max-width: 70ch; }

.card { min-width: 0; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card__h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.card__h h2 { margin: 0; font-size: var(--size-md); font-weight: var(--weight-semibold); }
.card__h > .icon { color: var(--primary); }
.card__h > :last-child:not(h2):not(.icon) { margin-left: auto; }
.card__f { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.kvs { margin: 0; display: grid; gap: var(--space-2); }
.kv { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--size-sm); padding-bottom: var(--space-2); border-bottom: 1px dashed var(--border); }
.kv:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; text-align: right; }

/* İcmal */
.ov-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-4); }
.card--status { border-top: 2px solid var(--success); }
.card--device { border-top: 2px solid var(--primary); }
.dev { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.dev__state { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: var(--size-xs); color: var(--primary); }
.wake-ring { position: relative; width: 6.5rem; height: 6.5rem; display: grid; place-items: center; }
.wake-ring span { position: absolute; border-radius: 50%; border: 1.5px solid var(--primary); }
.wake-ring span:nth-child(1) { inset: 0; opacity: 0.25; border-style: dashed; animation: jv-spin 30s linear infinite; }
.wake-ring span:nth-child(2) { inset: 14%; opacity: 0.55; border-color: var(--primary) transparent var(--primary) transparent; animation: jv-spin 6s linear infinite reverse; }
.wake-ring span:nth-child(3) { inset: 32%; background: radial-gradient(circle, color-mix(in oklab, var(--primary) 45%, transparent), transparent 70%); border-color: var(--primary); animation: jv-breathe 3s var(--ease-in-out) infinite; }
@keyframes jv-breathe { 50% { transform: scale(0.86); opacity: 0.7; } }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.kpi { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.kpi__l { font-size: var(--size-xs); color: var(--text-muted); }
.kpi__v { font: var(--weight-semibold) var(--size-3xl)/1.1 var(--font-mono); letter-spacing: -0.02em; color: var(--text); }
.kpi__s { font-size: var(--size-2xs); color: var(--text-subtle); }
.kpi--warn .kpi__v { color: var(--warning); }
.ov-bottom { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); }
.rcs { list-style: none; margin: 0; padding: 0; }
.rc { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--size-sm); }
.rc:last-child { border-bottom: 0; }
.rc__q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Qrafiklər */
.ch { display: block; width: 100%; height: auto; }
.ch-grid { stroke: var(--border); stroke-width: 1; }
.ch-ax { fill: var(--text-subtle); font: 10px var(--font-mono); }
.ch-big { fill: var(--text); font: 600 22px var(--font-mono); }
.ch-track { stroke: var(--surface-3); }
.ch-area { fill: color-mix(in oklab, var(--primary) 16%, transparent); }
.ch-line { fill: none; stroke: var(--primary); stroke-width: 2; }
.ch-pt { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.c-ok, .c-stt { fill: var(--primary); stroke: var(--primary); }
.c-miss { fill: color-mix(in oklab, var(--text-subtle) 32%, transparent); }
.c-llm { fill: var(--accent); stroke: var(--accent); }
.c-tts { fill: var(--info); stroke: var(--info); }
.lgd { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--size-2xs); color: var(--text-muted); }
.lgd__i { display: inline-flex; align-items: center; gap: 0.35rem; }
.lgd__i::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--k, var(--text-subtle)); }
.c-ok-k, .c-stt-k { --k: var(--primary); } .c-miss-k { --k: color-mix(in oklab, var(--text-subtle) 32%, transparent); } .c-llm-k { --k: var(--accent); } .c-tts-k { --k: var(--info); }

/* Tri-zolaq: STT / LLM / TTS imzası */
.tri { display: flex; gap: 2px; width: 100%; max-width: 9rem; height: 0.4rem; margin-bottom: 0.3rem; background: var(--surface-2); border-radius: var(--radius-full); overflow: hidden; }
.detail .tri { max-width: none; height: 0.6rem; margin: var(--space-2) 0 var(--space-3); }
.tri__s { display: block; height: 100%; }
.tri__s--stt { background: var(--primary); } .tri__s--llm { background: var(--accent); } .tri__s--tts { background: var(--info); }

/* Filtr, cədvəl */
.fbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.fbar__n { margin-left: auto; font-size: var(--size-xs); color: var(--text-muted); }
.tbl-wrap { min-width: 0; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--size-sm); }
.tbl th { position: sticky; top: 0; text-align: left; padding: var(--space-3); font-size: var(--size-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-subtle); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-rid] { cursor: pointer; transition: background var(--duration-fast); }
.tbl tbody tr[data-rid]:hover { background: var(--hover-veil); }
.tbl tr.is-sel { background: var(--selected); box-shadow: inset 3px 0 0 var(--primary); }
.tbl tr.is-miss td { color: var(--text-subtle); }
.td-qa { min-width: 18rem; }
.qa { display: block; line-height: var(--leading-snug); }
.qa b { font: var(--weight-semibold) var(--size-2xs) var(--font-mono); color: var(--primary); letter-spacing: var(--tracking-wide); }
.qa--a { margin-top: 0.2rem; color: var(--text-muted); }
.qa--a b { color: var(--accent); }
.td-ms { min-width: 9.5rem; }
.ms { font-size: var(--size-2xs); color: var(--text-muted); white-space: nowrap; }
.cv { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-4); align-items: start; }
.detail { position: sticky; top: var(--space-4); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.detail__h { display: flex; align-items: center; justify-content: space-between; } .detail__h h2 { margin: 0; font-size: var(--size-md); }
.detail__rid { margin: var(--space-1) 0 var(--space-4); font-size: var(--size-2xs); color: var(--text-subtle); }
.detail__s { margin: var(--space-4) 0 0; font-size: var(--size-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-subtle); }
.bubble { padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--size-sm); line-height: var(--leading-normal); }
.bubble b { display: block; font: var(--weight-semibold) var(--size-2xs) var(--font-mono); letter-spacing: var(--tracking-wide); margin-bottom: 0.2rem; }
.bubble--q { background: var(--primary-subtle); } .bubble--q b { color: var(--primary); }
.bubble--a { margin-top: var(--space-2); background: var(--surface-2); } .bubble--a b { color: var(--accent); }
.hid--block { display: block; padding: var(--space-3); line-height: var(--leading-normal); }
.tm { display: grid; grid-template-columns: 0.6rem 1fr auto; gap: var(--space-2); align-items: center; padding: 0.3rem 0; font-size: var(--size-sm); }
.tm__k { width: 0.6rem; height: 0.6rem; border-radius: 2px; }
.tm--tot { border-top: 1px solid var(--border); margin-top: 0.2rem; font-weight: var(--weight-semibold); }
.code { margin: var(--space-3) 0; padding: var(--space-3); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); font: var(--size-xs) var(--font-mono); color: var(--primary); overflow: auto; }
.empty { padding: var(--space-12) var(--space-6); text-align: center; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.empty h3 { margin: 0 0 var(--space-2); } .empty p { margin: 0 0 var(--space-4); color: var(--text-muted); }

/* Loqlar */
.fbar--chips { flex-direction: column; align-items: flex-start; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.chips__l { min-width: 5rem; font-size: var(--size-2xs); color: var(--text-muted); }
.chip { padding: 0.25rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: transparent; color: var(--text-muted); font: var(--size-xs) var(--font-mono); cursor: pointer; }
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip[aria-pressed="true"] { background: var(--primary-subtle); color: var(--primary); border-color: var(--primary-border); }
.term { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.term__h { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--size-xs); background: var(--surface); }
.term__n { margin-left: auto; color: var(--text-subtle); }
.lgs { list-style: none; margin: 0; padding: var(--space-2) 0; max-height: 34rem; overflow: auto; font: var(--size-xs)/1.7 var(--font-mono); }
.lg { display: grid; grid-template-columns: 6.5rem 3.5rem 6.5rem minmax(0, 1fr); gap: var(--space-3); padding: 0.1rem var(--space-4); }
.lg:hover { background: var(--hover-veil); }
.lg__ts { color: var(--text-subtle); } .lg__ev { color: var(--primary); } .lg__f { color: var(--text-muted); word-break: break-all; }
.lg--info .lg__lv { color: var(--info); } .lg--warn .lg__lv { color: var(--warning); } .lg--error .lg__lv { color: var(--danger); }
.lg--error { background: color-mix(in oklab, var(--danger) 8%, transparent); }
.lg--new { animation: jv-new 1.2s var(--ease-out-quart); }
@keyframes jv-new { from { background: color-mix(in oklab, var(--primary) 22%, transparent); } }