* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0f1419;
    color: #e0e0e0;
}

#app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Layers ─────────────────────────────────────── */
.layer { display: none; flex-direction: column; gap: 16px; }
.layer.active { display: flex; }

/* ── Page header ─────────────────────────────────── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: #1a1f2e;
    border: 1px solid #2a3142;
    border-radius: 8px;
}
.page-header h1 { font-size: 24px; color: #4a9eff; }
.page-header p  { color: #808090; font-size: 13px; margin-top: 4px; }

/* ── Panel ───────────────────────────────────────── */
.panel {
    background: #1a1f2e;
    border: 1px solid #2a3142;
    border-radius: 8px;
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    background: #1e2435;
    border-bottom: 1px solid #2a3142;
    transition: background 0.15s;
}
.panel-header:hover { background: #242a3d; }

.panel-title {
    font-size: 13px;
    font-weight: 600;
    color: #4a9eff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-toggle {
    font-size: 18px;
    line-height: 1;
    color: #607090;
    font-weight: 300;
    transition: color 0.15s;
}
.panel-header:hover .panel-toggle { color: #4a9eff; }

.panel-body {
    padding: 20px;
    display: block;
}

.panel.collapsed .panel-body { display: none; }

/* ── Input control cards ─────────────────────────── */
.control-card {
    margin-top: 14px;
    border: 1px solid #2a3142;
    border-radius: 8px;
    background: #141a26;
    overflow: hidden;
}

.control-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #1d2435;
    border-bottom: 1px solid #2a3142;
}

.control-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #9ab8e6;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.control-card-toggle {
    font-size: 16px;
    color: #6d86ad;
}

.control-card-body {
    padding: 14px;
}

.control-card.collapsed .control-card-body {
    display: none;
}

.control-card.collapsed .control-card-header {
    border-bottom: none;
    cursor: pointer;
}

/* ── Agent Trace ─────────────────────────────────── */
.agent-trace-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
}

.agent-trace-item {
    border: 1px solid #2a3142;
    border-radius: 6px;
    padding: 10px;
    background: #141922;
}

.agent-trace-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.agent-trace-name {
    font-size: 12px;
    font-weight: 700;
    color: #c9d4e8;
}

.agent-trace-status {
    font-size: 11px;
    border: 1px solid #32415c;
    color: #8fb2ea;
    border-radius: 12px;
    padding: 2px 8px;
}

.agent-trace-status.done {
    color: #6ad18d;
    border-color: #2f6842;
}

.agent-trace-status.error {
    color: #e07d7d;
    border-color: #714040;
}

.agent-trace-io {
    display: grid;
    gap: 8px;
}

.agent-trace-block {
    border: 1px solid #263249;
    border-radius: 4px;
    overflow: hidden;
}

.agent-trace-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
    color: #87a3cd;
    background: #172131;
    border-bottom: 1px solid #263249;
    padding: 5px 7px;
}

.agent-trace-json {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #d5e2f8;
    background: #101722;
    padding: 8px;
    overflow: auto;
    max-height: 140px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── DD Flow ─────────────────────────────────────── */
.dd-flow-meta {
    font-size: 12px;
    color: #8ea4c8;
    margin-bottom: 10px;
}

.dd-flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.dd-flow-card {
    border: 1px solid #2a3142;
    border-radius: 6px;
    padding: 10px 12px;
    background: #141922;
}

.dd-flow-card .dd-flow-title {
    font-size: 12px;
    color: #d0d8e8;
    margin-bottom: 6px;
}

.dd-flow-card .dd-flow-status {
    font-size: 11px;
    color: #7080a0;
}

.dd-flow-card.running {
    border-color: #2a5080;
    background: #0e1a28;
}

.dd-flow-card.running .dd-flow-status {
    color: #4a9eff;
}

.dd-flow-card.completed {
    border-color: #1a5030;
    background: #0e2018;
}

.dd-flow-card.completed .dd-flow-status {
    color: #5dc87d;
}

/* ── L0 Flow ─────────────────────────────────────── */
.l0-flow-row {
    margin-bottom: 10px;
}

.l0-flow-stage {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8ea4c8;
    margin-bottom: 8px;
}

.l0-flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.l0-flow-card {
    border: 1px solid #2a3142;
    border-radius: 6px;
    padding: 10px 12px;
    background: #141922;
}

.l0-flow-title {
    font-size: 12px;
    color: #d0d8e8;
    margin-bottom: 4px;
}

.l0-flow-status {
    font-size: 11px;
    color: #7080a0;
}

.l0-flow-meta {
    font-size: 10px;
    color: #8297ba;
    margin-top: 5px;
}

.l0-flow-card.running {
    border-color: #2a5080;
    background: #0e1a28;
}

.l0-flow-card.running .l0-flow-status {
    color: #4a9eff;
}

.l0-flow-card.completed {
    border-color: #1a5030;
    background: #0e2018;
}

.l0-flow-card.completed .l0-flow-status {
    color: #5dc87d;
}

.l0-flow-card.error {
    border-color: #7a3434;
    background: #2b1515;
}

.l0-flow-card.error .l0-flow-status {
    color: #e38a8a;
}

.l0-flow-arrow {
    font-size: 11px;
    color: #7f96ba;
    margin: 4px 0 10px 2px;
}

/* ── Quick flowchart ────────────────────────────── */
.quick-flowchart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-node {
    border: 1px solid #2a3142;
    border-radius: 6px;
    padding: 10px 12px;
    background: #141922;
}

.quick-node-title {
    font-size: 12px;
    color: #d0d8e8;
    margin-bottom: 4px;
}

.quick-node-status {
    font-size: 11px;
    color: #7080a0;
}

.quick-node-meta {
    font-size: 10px;
    color: #8297ba;
    margin-top: 4px;
}

.quick-node.running {
    border-color: #2a5080;
    background: #0e1a28;
}

.quick-node.running .quick-node-status {
    color: #4a9eff;
}

.quick-node.queued {
    border-color: #355079;
    background: #111a26;
}

.quick-node.queued .quick-node-status {
    color: #7fb2ff;
}

.quick-node.completed {
    border-color: #1a5030;
    background: #0e2018;
}

.quick-node.completed .quick-node-status {
    color: #5dc87d;
}

.quick-node.error {
    border-color: #7a3434;
    background: #2b1515;
}

.quick-node.error .quick-node-status {
    color: #e38a8a;
}

.quick-arrow {
    text-align: center;
    font-size: 14px;
    color: #7f96ba;
    line-height: 1;
}

.quick-parallel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.quick-dd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.quick-spinner {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    border: 2px solid rgba(127, 178, 255, 0.25);
    border-top-color: #7fb2ff;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 3px;
}

/* ── Runtime flow (advanced) ────────────────────── */
.runtime-flow-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.runtime-flow-block {
    border: 1px solid #2a3142;
    border-radius: 8px;
    padding: 10px;
    background: #141922;
}

.runtime-flow-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8ea4c8;
    margin-bottom: 8px;
}

/* ── Buttons ─────────────────────────────────────── */
.btn-primary, .btn-secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}
.btn-primary  { background: #4a9eff; color: #0f1419; }
.btn-primary:hover  { background: #3a8eef; }
.btn-secondary { background: #2a3245; color: #c0cce0; border: 1px solid #3a4460; }
.btn-secondary:hover { background: #333d55; }

.btn-full { width: 100%; margin-top: 16px; padding: 12px; font-size: 14px; }

/* ── Advanced controls ───────────────────────────── */
.advanced-controls-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.advanced-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#advanced-controls-card .btn-action {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    appearance: none;
}

#advanced-controls-card .btn-assessment {
    background: #1f3f67 !important;
    border-color: #2f5f97 !important;
    color: #d6e8ff !important;
}
#advanced-controls-card .btn-assessment:hover { background: #255181 !important; }

#advanced-controls-card .btn-probability {
    background: #4e3a1a !important;
    border-color: #805d26 !important;
    color: #ffe6b8 !important;
}
#advanced-controls-card .btn-probability:hover { background: #644b20 !important; }

#advanced-controls-card .btn-treatment {
    background: #1f4f3c !important;
    border-color: #2d7a5b !important;
    color: #d2ffe9 !important;
}
#advanced-controls-card .btn-treatment:hover { background: #28624a !important; }

@media (max-width: 720px) {
    .advanced-action-grid { grid-template-columns: 1fr; }
}

/* ── Form ────────────────────────────────────────── */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; font-weight: 600; color: #8090a8; text-transform: uppercase; letter-spacing: 0.4px; }

.form-group input,
.form-group select,
.form-group textarea {
    padding: 9px 12px;
    border: 1px solid #2e3850;
    border-radius: 5px;
    background: #141922;
    color: #e0e0e0;
    font-size: 13px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4a9eff;
    box-shadow: 0 0 0 2px rgba(74,158,255,0.15);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #404858; }

.paragraph-input {
    resize: vertical;
    min-height: 110px;
    line-height: 1.4;
}

/* ── Tabs ────────────────────────────────────────── */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-btn {
    padding: 7px 14px;
    border: 1px solid #2e3850;
    background: #141922;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #7080a0;
    transition: all 0.15s;
}
.tab-btn:hover { border-color: #4a9eff; color: #4a9eff; }
.tab-btn.active { background: #4a9eff; color: #0f1419; border-color: #4a9eff; }

/* ── Item list (suggested symptoms/history) ──────── */
.items-list { display: flex; flex-direction: column; gap: 8px; }

.item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #141922;
    border: 1px solid #2a3142;
    border-radius: 6px;
    transition: border-color 0.15s;
}
.item:hover { border-color: #3a4460; }

.item-text { flex: 1; font-size: 13px; color: #d0d8e8; }
.item-relevance {
    font-size: 11px;
    background: #0e1a28;
    color: #4a9eff;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.item-feature {
    font-size: 12px;
    color: #8a9ab3;
    margin-top: 6px;
}

.item-action-buttons { display: flex; gap: 6px; }
.item-action-buttons button {
    padding: 5px 11px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.15s;
}
.btn-include   { background: #1a3828; color: #5dc87d; border: 1px solid #2a5038; }
.btn-include:hover { background: #234d38; }
.btn-included  { background: #1a4830; color: #5dc87d; border: 1px solid #5dc87d; }
.btn-included:hover { background: #1a3828; }
.btn-exclude   { background: #2e1e22; color: #d07070; border: 1px solid #3e2e32; }
.btn-exclude:hover { background: #3e2830; }
.btn-excluded  { background: #3e1a1a; color: #e07070; border: 1px solid #e07070; }
.btn-excluded:hover { background: #2e1616; }

/* ── Custom entry form ───────────────────────────── */
.custom-entry-form {
    margin-top: 16px;
    padding: 16px;
    background: #141922;
    border: 1px dashed #2e3850;
    border-radius: 6px;
}
.custom-entry-label {
    font-size: 11px;
    font-weight: 700;
    color: #4a9eff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.custom-entry-input {
    width: 100%;
    padding: 8px 11px;
    margin-bottom: 10px;
    border: 1px solid #2e3850;
    border-radius: 4px;
    background: #0f1419;
    color: #e0e0e0;
    font-size: 13px;
}
.custom-entry-input::placeholder { color: #404858; }
.custom-entry-input:focus { outline: none; border-color: #4a9eff; }
.custom-entry-controls { display: flex; gap: 16px; margin-bottom: 10px; }
.custom-radio { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #7080a0; cursor: pointer; }

/* ── Context panel ───────────────────────────────── */
.context-group {
    margin-bottom: 16px;
    border: 1px solid #2a3142;
    border-radius: 6px;
    overflow: hidden;
}
.context-group:last-child { margin-bottom: 0; }

.context-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #1e2435;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #2a3142;
}
.context-group-header:hover { background: #242a3d; }

.context-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a9eff;
}
.context-group-count {
    font-size: 11px;
    background: #0e1a28;
    color: #4a9eff;
    padding: 2px 8px;
    border-radius: 10px;
}
.context-group-toggle {
    font-size: 16px;
    color: #607090;
    margin-left: 8px;
}
.context-group.collapsed .context-group-body { display: none; }

.context-group-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.context-item-wrapper {
    padding: 10px 12px;
    background: #141922;
    border: 1px solid #2a3040;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.context-item-text {
    font-size: 13px;
    color: #d0d8e8;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.context-item-text.excluded { color: #d07070; text-decoration: line-through; opacity: 0.7; }

.remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #607090;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 8px;
}
.remove-btn:hover { color: #e07070; }

.context-controls {
    display: flex;
    gap: 14px;
}
.inclusion-radio {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #7080a0;
    cursor: pointer;
}
.inclusion-radio input { cursor: pointer; }

.context-comment {
    padding: 6px 10px;
    border: 1px solid #2e3850;
    border-radius: 4px;
    background: #0f1419;
    color: #e0e0e0;
    font-size: 12px;
    width: 100%;
}
.context-comment::placeholder { color: #404858; }
.context-comment:focus { outline: none; border-color: #4a9eff; }

/* ── Panel actions bar ───────────────────────────── */
.panel-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.panel-actions button {
    width: 100%;
    flex: none;
    padding: 12px;
    font-size: 14px;
}

/* ── Agent status ────────────────────────────────── */
.agent-status-header {
    font-size: 13px;
    color: #a0b0c8;
    margin-bottom: 14px;
}
.agent-status-header strong { color: #4a9eff; }
.error-badge {
    display: inline-block;
    margin-left: 10px;
    background: #3d2020;
    color: #e07070;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}
.agent-section { margin-bottom: 16px; }
.agent-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #607090;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}
.agent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #2a3142;
    border-radius: 6px;
    font-size: 12px;
    background: #141922;
    color: #7080a0;
}
.agent-item.running  { border-color: #2a5080; background: #0e1a28; color: #4a9eff; }
.agent-item.completed { border-color: #1a5030; background: #0e2018; color: #5dc87d; }
.agent-item.error    { border-color: #5a2020; background: #200e0e; color: #e07070; }

.agent-icon { font-size: 14px; font-weight: bold; }
.agent-item.running .agent-icon { animation: spin 0.8s linear infinite; display: inline-block; }
.agent-name { flex: 1; font-weight: 500; }
.agent-duration { font-size: 10px; color: #505868; }
.agent-note { font-size: 10px; color: #8ea4c8; margin-left: 4px; }
.success-msg {
    text-align: center;
    color: #5dc87d;
    font-size: 13px;
    font-weight: 600;
    padding: 10px;
    background: #0e2018;
    border-radius: 5px;
    margin-top: 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── DD cards ────────────────────────────────────── */
.dd-list { display: flex; flex-direction: column; gap: 12px; }
.dd-card {
    padding: 18px 20px;
    background: #141922;
    border: 1px solid #2a3142;
    border-left: 4px solid #4a9eff;
    border-radius: 6px;
}
.dd-card.high   { border-left-color: #e07070; }
.dd-card.medium { border-left-color: #e09040; }
.dd-card.low    { border-left-color: #5dc87d; }
.provisional-subcard { padding: 0; overflow: hidden; }
.provisional-subcard .provisional-subcard-header {
    list-style: none;
    margin: 0;
    padding: 14px 16px;
    cursor: pointer;
}
.provisional-subcard .provisional-subcard-header::-webkit-details-marker { display: none; }
.provisional-subcard .provisional-subcard-body { padding: 0 16px 14px; }

.dd-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.dd-card h4 { font-size: 15px; color: #e0e8f0; }
.dd-tier {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}
.dd-tier.high   { background: #3d1a1a; color: #e07070; }
.dd-tier.medium { background: #3d2a10; color: #e09040; }
.dd-tier.low    { background: #0e2018; color: #5dc87d; }
.dd-feature {
    font-size: 12px;
    color: #8090a8;
    margin-top: 6px;
    padding: 7px 10px;
    background: #0f1419;
    border-radius: 4px;
}

.dd-summary {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #2a3142;
    border-radius: 6px;
    background: #101722;
    font-size: 12px;
    color: #b8c7df;
}

.diag-agent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.diag-agent-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #1e2d44;
    border: 1px solid #334c74;
    color: #8fc0ff;
}

/* ── Investigations ──────────────────────────────── */
.investigation-list,
.treatment-list { display: flex; flex-direction: column; gap: 14px; }
.investigation-dd {
    padding: 18px 20px;
    background: #141922;
    border: 1px solid #2a3142;
    border-radius: 6px;
}
.investigation-dd h4,
.treatment-group h4 { color: #4a9eff; font-size: 14px; margin-bottom: 12px; }
.investigation-item {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1e2838;
}
.investigation-item:last-child,
.treatment-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.investigation-test,
.treatment-action { font-size: 13px; font-weight: 500; color: #d0d8e8; }
.investigation-urgency,
.treatment-urgency {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    margin-left: 8px;
}
.investigation-urgency.stat   { background: #3d1a1a; color: #e07070; }
.investigation-urgency.urgent { background: #3d2a10; color: #e09040; }
.investigation-urgency.routine { background: #0e2018; color: #5dc87d; }
.investigation-rationale,
.treatment-detail { font-size: 12px; color: #607090; margin-top: 4px; }

/* ── Treatment ──────────────────────────────────── */
.treatment-group {
    padding: 18px 20px;
    background: #141922;
    border: 1px solid #2a3142;
    border-radius: 6px;
}
.treatment-item {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1e2838;
}
.treatment-urgency.now    { background: #3d1a1a; color: #e07070; }
.treatment-urgency.urgent { background: #3d2a10; color: #e09040; }
.treatment-urgency.routine { background: #0e2018; color: #5dc87d; }

/* ── Misc ────────────────────────────────────────── */
.muted { font-size: 13px; color: #505868; font-style: italic; }

@media (max-width: 700px) {
    .form-row { grid-template-columns: 1fr; }
    .agent-grid { grid-template-columns: 1fr 1fr; }
}