/* Layan.ai — AI infrastructure admin (one screen over /api/admin/config) */
.adm-lock { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.adm-lock label { display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.adm-input { width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--paper); background: rgba(2, 9, 31, 0.55); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 9px 12px; outline: none; transition: border-color var(--t-fast); }
.adm-input:focus { border-color: var(--signal); }
.adm-input[type="number"] { width: 110px; font-family: var(--font-mono); }
.adm-note { font-size: var(--fs-xs); color: var(--muted); }
.adm-note b { color: var(--frost); font-weight: 500; }
.adm-locked .needs-token { opacity: 0.45; pointer-events: none; }

/* option cards: decision engine, billing mode */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(2, 9, 31, 0.45); text-align: left; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); cursor: pointer; }
.opt:hover { background: rgba(170, 206, 253, 0.05); }
.opt.is-on { border-color: rgba(96, 157, 252, 0.7); background: rgba(37, 78, 193, 0.18); box-shadow: 0 0 40px -20px rgba(96, 157, 252, 0.8); }
.opt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--paper); }
.opt p { font-size: var(--fs-xs); color: var(--paper-2); }
.opt .pill { font-size: 0.66rem; padding: 2px 8px; }
.opt-field { display: grid; gap: 4px; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* harness registry rows */
.hz { display: grid; gap: 8px; }
.hz-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(2, 9, 31, 0.45); }
.hz-row.is-off { opacity: 0.6; }
.hz-main { display: grid; gap: 3px; min-width: 0; }
.hz-name { font-size: var(--fs-sm); font-weight: 500; color: var(--paper); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hz-meta { font-size: var(--fs-xs); color: var(--muted); }
.hz-meta code { font-family: var(--font-mono); font-size: 0.68rem; color: var(--frost); }
.sw { position: relative; width: 44px; height: 24px; border-radius: 12px; background: rgba(170, 206, 253, 0.18); border: 1px solid var(--line-strong); transition: background var(--t-fast); flex-shrink: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); transition: transform var(--t-ui) var(--ease-out); }
.sw[aria-checked="true"] { background: var(--cobalt); border-color: var(--cobalt); }
.sw[aria-checked="true"]::after { transform: translateX(20px); }
.sw:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* credits and pricing */
.cred { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cred label { display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.price { display: grid; gap: 6px; }
.price-row { display: grid; grid-template-columns: 1fr 110px 110px 32px; gap: 8px; align-items: center; }
.price-head { font-size: var(--fs-xs); color: var(--muted); }
.price-row .adm-input { width: 100%; }
.price-row .btn-quiet { height: 28px; padding: 0 6px; font-size: var(--fs-xs); }

/* live status */
.stat { display: grid; gap: 6px; font-size: var(--fs-xs); }
.stat li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--paper-2); }
.stat li:last-child { border-bottom: 0; }
.stat b { font-weight: 500; color: var(--frost); }
.stat code { font-family: var(--font-mono); font-size: 0.68rem; }
.chain { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chain .arrow { color: var(--muted); }
.adm-save { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.adm-save .muted { margin-right: auto; font-size: var(--fs-xs); }

@media (max-width: 700px) {
  .opts { grid-template-columns: 1fr; }
  .adm-lock { grid-template-columns: 1fr; }
  .price-row { grid-template-columns: 1fr 80px 80px 28px; }
  .stat li { grid-template-columns: 1fr; gap: 2px; }
}

/* wallet and models */
#topup-form { grid-template-columns: 140px 1fr auto; }
@media (max-width: 700px) { #topup-form { grid-template-columns: 1fr; } }
.hz-row .chk { width: 18px; height: 18px; accent-color: var(--cobalt); justify-self: center; }
.hz-row .price-tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--frost); white-space: nowrap; }

/* account keys */
.key-card { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(2, 9, 31, 0.45); }
.key-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#muapi-accounts { margin-top: 4px; }

/* the hidden attribute must win over .btn and .stat display rules */
[hidden] { display: none !important; }

/* Hermes login */
.hz-code { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: .12em; color: var(--paper); background: rgba(96, 157, 252, .14); border: 1px solid rgba(96, 157, 252, .4); border-radius: var(--r-sm); padding: 2px 8px; }
#hz-url { color: var(--signal); word-break: break-all; }