/* components: cards, buttons, chips, tables, forms (cut from app.css, order preserved) */
/* ---------- components ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 15px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .row.end { justify-content: flex-end; }
.grow { flex: 1 1 220px; min-width: 0; }
input, select, textarea { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font: inherit; outline: none; transition: border-color .12s, box-shadow .12s; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
input[type=file] { padding: 6px; max-width: 260px; } input[type=file]::file-selector-button { background: var(--surface-3); color: var(--text); border: 0; border-radius: 6px; padding: 4px 10px; margin-right: 8px; cursor: pointer; }
input[type=checkbox] { accent-color: var(--amber); }
textarea { width: 100%; min-height: 240px; font-family: var(--mono); font-size: 12px; resize: vertical; }
.btn, button.go { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, transform .05s; }
.btn:hover, button.go:hover { background: var(--surface-3); } .btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; } .btn.primary:hover { filter: brightness(1.08); background: var(--amber); }
.btn.sm, button.go.sm { padding: 4px 10px; font-size: 12px; }
.btn.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.chip.amber, .sys-ecw { background: var(--amber-soft); color: var(--amber); } .chip.green, .sys-epic { background: var(--green-soft); color: var(--green); }
.chip.red { background: var(--red-soft); color: var(--red); } .chip.sky { background: var(--sky-soft); color: var(--sky); } .chip.violet { background: var(--violet-soft); color: var(--violet); }
.sys-unknown { background: var(--surface-3); color: var(--muted); }
.t-condition { background: var(--red-soft); color: var(--red); } .t-medication { background: var(--amber-soft); color: var(--amber); } .t-vital { background: var(--green-soft); color: var(--green); }
.t-note { background: var(--surface-3); color: var(--text); }
.t-result { background: var(--sky-soft); color: var(--sky); } .t-procedure { background: var(--violet-soft); color: var(--violet); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--green-soft); color: var(--green); } .pill.warn { background: var(--amber-soft); color: var(--amber); } .pill.bad { background: var(--red-soft); color: var(--red); }
.xbadge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat .k { color: var(--muted); font-size: 12px; font-weight: 500; } .stat .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; } .stat.bad .v { color: var(--red); } .stat.good .v { color: var(--green); } .stat.hot .v { color: var(--amber); }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } tbody tr:last-child td, table tr:last-child td { border-bottom: 0; }
tr.hover:hover td, .xread tr:hover td { background: var(--surface-2); } tr.hover { cursor: pointer; }
tr.detail { display: none; } tr.detail.open { display: table-row; } tr.detail td { background: var(--surface-2); }
td.mono, .nowrap { white-space: nowrap; }
#xbody:empty { display: none; }
.tbl-wrap { overflow: auto; max-height: calc(62vh / var(--z, 1)); border: 1px solid var(--border); border-radius: 8px; } .tbl-wrap table th { top: 0; }
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow: auto; max-height: 340px; font-size: 12px; margin: 0; }
details > summary { cursor: pointer; color: var(--muted); font-weight: 500; padding: 4px 0; } details[open] > summary { margin-bottom: 8px; }
.empty { text-align: center; color: var(--muted); padding: 34px 10px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; font-size: 13px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }
.patient { display: grid; grid-template-columns: 56px 1fr; gap: 16px; }
.avatar { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 20px; color: var(--primary-ink); background: linear-gradient(135deg, var(--primary), var(--green)); }
.patient h3 { font-size: 17px; margin-bottom: 2px; } .patient .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.pre { white-space: pre-wrap; word-break: break-word; }
.panel-card { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--surface-2); }
.panel-card > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; color: var(--text); margin: 0; }
.panel-card[open] > summary { border-bottom: 1px solid var(--border); margin: 0; }
.panel-card > summary::before { content: "▸"; color: var(--amber); } .panel-card[open] > summary::before { content: "▾"; }
.panel-body { padding: 14px; background: var(--surface); border-radius: 0 0 10px 10px; }
.chip.link { cursor: pointer; } .chip.link:hover { filter: brightness(1.25); }
.rel { display: flex; gap: 4px; flex-wrap: wrap; max-width: 260px; }
.bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; } .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--green)); }
.err { color: var(--red); } .ok-t { color: var(--green); }
#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 50; }
.toast { background: var(--surface-3); border: 1px solid var(--border-strong); border-left: 3px solid var(--green); border-radius: 8px; padding: 10px 14px; min-width: 240px; max-width: 420px; box-shadow: var(--shadow); animation: fade .2s; }
.toast.bad { border-left-color: var(--red); } .toast.warn { border-left-color: var(--amber); }
.soon-page { text-align: center; padding: 70px 20px; } .soon-page .logo { margin: 0 auto 14px; width: 46px; height: 46px; font-size: 22px; border-radius: 12px; }