* { 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; }

/* ── 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; }

/* ── 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 {
    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 {
    outline: none;
    border-color: #4a9eff;
    box-shadow: 0 0 0 2px rgba(74,158,255,0.15);
}
.form-group input::placeholder { color: #404858; }

/* ── 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-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;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #2a3142;
}
.panel-actions button { flex: 1; }

/* ── 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; }
.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; }

.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;
}

/* ── Investigations ──────────────────────────────── */
.investigation-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 { 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 { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.investigation-test { font-size: 13px; font-weight: 500; color: #d0d8e8; }
.investigation-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 { font-size: 12px; color: #607090; margin-top: 4px; }

/* ── 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; }
}