:root {
    --qd-critical: #dc2626;
    --qd-critical-soft: #fef2f2;
    --qd-today: #d97706;
    --qd-today-soft: #fffbeb;
    --qd-improvement: #2563eb;
    --qd-improvement-soft: #eff6ff;
}

.qd-grid { display: grid; gap: 18px; }
.qd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.qd-kpi { min-height: 126px; padding: 19px 20px; border: 1px solid var(--bankco-line); border-radius: 12px; background: #fff; }
.qd-kpi-label { color: var(--bankco-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.qd-kpi-value { margin-top: 8px; color: var(--bankco-ink); font-size: 28px; font-weight: 800; letter-spacing: -.035em; }
.qd-kpi-meta { margin-top: 5px; color: var(--bankco-muted); font-size: 12px; }
.qd-kpi.is-critical { border-color: #fecaca; background: var(--qd-critical-soft); }
.qd-kpi.is-critical .qd-kpi-value { color: var(--qd-critical); }
.qd-section { margin-bottom: 20px; }
.qd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.qd-section-head h2 { margin: 0; font-size: 17px; }
.qd-link { color: var(--bankco-success-dark); font-size: 13px; font-weight: 700; text-decoration: none; }
.qd-actions { display: grid; gap: 9px; }
.qd-action { position: relative; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; align-items: stretch; overflow: hidden; border: 1px solid var(--bankco-line); border-radius: 10px; background: #fff; }
.qd-action-bar { background: var(--qd-improvement); }
.qd-action.is-critical .qd-action-bar { background: var(--qd-critical); }
.qd-action.is-today .qd-action-bar { background: var(--qd-today); }
.qd-action-body { min-width: 0; padding: 14px 16px; }
.qd-action-title { color: var(--bankco-ink); font-size: 14px; font-weight: 750; }
.qd-action-meta { margin-top: 4px; color: var(--bankco-muted); font-size: 12px; }
.qd-action-copy { margin-top: 8px; color: var(--bankco-copy); font-size: 13px; }
.qd-action-controls { display: flex; align-items: center; gap: 7px; padding: 12px 14px; }
.qd-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 750; white-space: nowrap; }
.qd-status::before { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; content: ""; }
.qd-status.is-active, .qd-status.is-on, .qd-status.is-published { background: #ecfdf3; color: #168541; }
.qd-status.is-active::before, .qd-status.is-on::before, .qd-status.is-published::before { background: #22c55e; }
.qd-status.is-error, .qd-status.is-critical, .qd-status.is-failed { background: #fef2f2; color: #c2413b; }
.qd-status.is-error::before, .qd-status.is-critical::before, .qd-status.is-failed::before { background: #ef4444; }
.qd-status.is-pending, .qd-status.is-review, .qd-status.is-reviewed { background: #fffbeb; color: #b45309; }
.qd-status.is-pending::before, .qd-status.is-review::before, .qd-status.is-reviewed::before { background: #f59e0b; }
.qd-status.is-sandbox { background: #eff6ff; color: #1d4ed8; }
.qd-status.is-sandbox::before { background: #3b82f6; }
.qd-table-title { color: var(--bankco-ink); font-weight: 700; text-decoration: none; }
.qd-table-title:hover { color: var(--bankco-success-dark); text-decoration: none; }
.qd-table-sub { margin-top: 2px; color: var(--bankco-muted); font-size: 12px; }
.qd-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; padding: 13px; border: 1px solid var(--bankco-line); border-radius: 10px; background: #fff; }
.qd-filter .form-group { min-width: 160px; margin: 0; }
.qd-filter label { margin-bottom: 4px; font-size: 11px; }
.qd-filter .form-control { min-height: 38px; }
.qd-empty { padding: 48px 20px; color: var(--bankco-muted); text-align: center; }
.qd-empty i { display: block; margin-bottom: 10px; color: #94a3b8; font-size: 28px; }
.qd-detail { display: grid; gap: 12px; }
.qd-detail-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding-bottom: 12px; border-bottom: 1px solid #edf2f7; }
.qd-detail-row:last-child { padding-bottom: 0; border: 0; }
.qd-detail-label { color: var(--bankco-muted); font-size: 12px; font-weight: 700; }
.qd-detail-value { min-width: 0; color: var(--bankco-ink); overflow-wrap: anywhere; }
.qd-client-head { display: flex; align-items: center; gap: 14px; }
.qd-client-mark { display: inline-flex; width: 48px; height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; border-radius: 13px; background: #eafbf0; color: var(--bankco-success-dark); font-size: 18px; font-weight: 850; }
.qd-inline-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.qd-inline-stats span { color: var(--bankco-muted); font-size: 12px; }
.qd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.qd-form-grid .is-wide { grid-column: 1 / -1; }
.qd-form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.qd-callout { padding: 13px 15px; border-left: 3px solid var(--bankco-success); background: #f0fdf4; color: var(--bankco-copy); font-size: 13px; }
.qd-callout.is-warning { border-color: #f59e0b; background: #fffbeb; }
.qd-callout.is-danger { border-color: #ef4444; background: #fef2f2; }
.qd-explanation-fields { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bankco-line); }
.qd-limit { color: var(--bankco-muted); font-size: 10px; font-weight: 500; }
.qd-impact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qd-impact { padding: 13px 15px; border: 1px solid var(--bankco-line); border-radius: 9px; background: #fff; }
.qd-impact span { display: block; color: var(--bankco-muted); font-size: 11px; }
.qd-impact strong { display: block; margin-top: 3px; color: var(--bankco-ink); font-size: 22px; }
.qd-selection-list { display: grid; gap: 8px; max-height: 460px; overflow: auto; }
.qd-selection-list > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #edf2f7; font-size: 12px; }
.qd-selection-list span { color: var(--bankco-muted); white-space: nowrap; }
.qd-confirm-danger { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 12px; }
.qd-bulk-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--bankco-line); border-radius: 10px; background: #fff; }
.qd-bulk-toolbar > div { min-width: 210px; margin-right: auto; }
.qd-bulk-toolbar strong, .qd-bulk-toolbar span { display: block; }
.qd-bulk-toolbar span { color: var(--bankco-muted); font-size: 11px; }
.qd-bulk-toolbar .form-control { width: 210px; min-height: 36px; }
.qd-check-cell { width: 36px; text-align: center; }

.qd-workspace { display: grid; min-height: calc(100vh - 168px); min-height: calc(100dvh - 168px); grid-template-columns: 250px minmax(360px, 1fr) 290px; grid-template-rows: minmax(450px, 1fr) 180px; overflow: hidden; border: 1px solid var(--bankco-line); border-radius: 12px; background: #fff; }
.qd-workspace-panel { min-width: 0; min-height: 0; overflow: auto; }
.qd-explorer { grid-row: 1 / 3; border-right: 1px solid var(--bankco-line); background: #fbfdff; }
.qd-editor { padding: 18px; }
.qd-inspector { border-left: 1px solid var(--bankco-line); background: #fbfdff; }
.qd-console { grid-column: 2 / 4; border-top: 1px solid var(--bankco-line); background: #111827; color: #dbe4ef; }
.qd-panel-title { position: sticky; top: 0; z-index: 2; padding: 12px 14px; border-bottom: 1px solid var(--bankco-line); background: inherit; color: var(--bankco-ink); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.qd-tree { padding: 8px; }
.qd-tree-item { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 8px; border-radius: 6px; color: var(--bankco-copy); font-size: 13px; text-decoration: none; }
.qd-tree-item:hover, .qd-tree-item.is-active { background: #eafbf0; color: var(--bankco-success-dark); text-decoration: none; }
.qd-tree-item.is-group { margin-top: 4px; font-weight: 700; }
.qd-tree-item.is-create { color: var(--bankco-success-dark); font-size: 11px; font-weight: 750; }
.qd-tree-indent .qd-tree-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-tree-indent { padding-left: 18px; }
.qd-editor-tabs { display: flex; gap: 4px; margin: -18px -18px 18px; padding: 8px 10px 0; border-bottom: 1px solid var(--bankco-line); background: #f8fafc; }
.qd-editor-tab { padding: 8px 11px; border: 1px solid var(--bankco-line); border-bottom: 0; border-radius: 7px 7px 0 0; background: #fff; color: var(--bankco-ink); font-size: 12px; font-weight: 700; }
.qd-object-title { margin-bottom: 18px; }
.qd-object-title h2 { margin-bottom: 4px; font-size: 20px; }
.qd-object-title p { margin: 0; color: var(--bankco-muted); font-size: 12px; }
.qd-inspector-body { padding: 14px; }
.qd-inspector-section { margin-bottom: 18px; }
.qd-inspector-section h3 { margin-bottom: 8px; font-size: 12px; }
.qd-console .qd-panel-title { border-color: #263244; background: #111827; color: #94a3b8; }
.qd-console-body { padding: 12px 14px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qd-console-line { color: #94a3b8; }
.qd-console-line.is-success { color: #86efac; }
.qd-console-line.is-warning { color: #fde68a; }
.qd-bulk-zone { padding-top: 18px; border-top: 1px solid var(--bankco-line); }
.qd-bulk-zone h3 { margin-bottom: 12px; font-size: 15px; }
.qd-bulk-box { padding: 13px; border: 1px solid var(--bankco-line); border-radius: 9px; background: #f8fafc; }
.qd-bulk-list { display: grid; gap: 5px; max-height: 180px; margin: 9px 0; overflow: auto; }
.qd-bulk-list label { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--bankco-copy); font-size: 11px; font-weight: 500; }

.qd-patch-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.qd-patch-stat { padding: 12px; border: 1px solid var(--bankco-line); border-radius: 9px; background: #f8fafc; }
.qd-patch-stat span { display: block; color: var(--bankco-muted); font-size: 11px; }
.qd-patch-stat strong { display: block; margin-top: 3px; color: var(--bankco-ink); font-size: 15px; }
.qd-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--bankco-line); border-radius: 8px; background: var(--bankco-line); }
.qd-diff > div { padding: 12px; background: #fff; }
.qd-diff-label { margin-bottom: 7px; color: var(--bankco-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.qd-json { max-height: 260px; margin: 0; overflow: auto; color: #334155; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qd-timeline { position: relative; display: grid; gap: 0; }
.qd-event { position: relative; display: grid; grid-template-columns: 120px 18px minmax(0, 1fr); gap: 12px; min-height: 88px; }
.qd-event-time { padding-top: 2px; color: var(--bankco-muted); font-size: 11px; text-align: right; }
.qd-event-axis { position: relative; }
.qd-event-axis::before { position: absolute; top: 0; bottom: 0; left: 8px; width: 1px; background: #dbe3ec; content: ""; }
.qd-event-dot { position: relative; z-index: 1; width: 9px; height: 9px; margin: 4px 0 0 4px; border: 2px solid #fff; border-radius: 50%; background: var(--bankco-success); box-shadow: 0 0 0 1px var(--bankco-success); }
.qd-event-content { padding: 0 0 22px; }
.qd-event-title { color: var(--bankco-ink); font-weight: 750; }
.qd-event-copy { margin-top: 5px; color: var(--bankco-copy); font-size: 13px; }
.qd-chart { display: flex; height: 180px; align-items: end; gap: 3px; padding: 14px 10px 24px; border-bottom: 1px solid var(--bankco-line); }
.qd-chart-bar { position: relative; min-width: 4px; flex: 1 1 0; border-radius: 3px 3px 0 0; background: #86efac; }
.qd-chart-bar:hover { background: #22c55e; }
.qd-chart-bar span { position: absolute; left: 50%; bottom: calc(100% + 5px); display: none; padding: 4px 6px; border-radius: 4px; background: #172033; color: #fff; font-size: 10px; white-space: nowrap; transform: translateX(-50%); }
.qd-chart-bar:hover span { display: block; }
.qd-auth { display: grid; min-height: 100vh; min-height: 100dvh; place-items: center; padding: 24px; background: #f7fafc; }
.qd-auth-card { width: min(100%, 430px); overflow: hidden; border: 1px solid var(--bankco-line); border-radius: 16px; background: #fff; }
.qd-auth-brand { display: flex; align-items: center; gap: 12px; padding: 25px 28px; border-bottom: 1px solid #edf2f7; }
.qd-auth-body { padding: 28px; }
.qd-auth-body h1 { margin-bottom: 6px; font-size: 22px; }
.qd-auth-body > p { margin-bottom: 22px; color: var(--bankco-muted); font-size: 13px; }
.qd-secret-note { color: var(--bankco-muted); font-size: 11px; }
.qd-brand-mark-detail { position: absolute; right: 4px; bottom: 2px; font-size: 10px; font-weight: 850; }
.qt-brand-mark { position: relative; }
.qd-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.qd-user-access { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(105px, .75fr) auto; gap: 7px; align-items: center; }
.qd-user-access .form-control { min-height: 36px; padding-top: 5px; padding-bottom: 5px; }
.qd-details, .qd-manual-connect { border-top: 1px solid var(--bankco-line); padding-top: 11px; }
.qd-details summary, .qd-manual-connect summary { color: var(--bankco-success-dark); font-size: 12px; font-weight: 750; cursor: pointer; }
.qd-manual-connect { border: 0; padding: 16px 18px 18px; }
.qd-oauth-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.qd-oauth-steps span { display: flex; min-width: 0; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--bankco-line); border-radius: 8px; color: var(--bankco-copy); font-size: 11px; }
.qd-oauth-steps b { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; align-items: center; justify-content: center; border-radius: 50%; background: #eafbf0; color: var(--bankco-success-dark); font-size: 10px; }

@media (max-width: 1200px) {
    .qd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qd-workspace { grid-template-columns: 220px minmax(320px, 1fr); }
    .qd-inspector { display: none; }
    .qd-console { grid-column: 2; }
}

@media (max-width: 900px) {
    .qd-grid-2, .qd-grid-3 { grid-template-columns: 1fr; }
    .qd-workspace { min-height: auto; grid-template-columns: 1fr; grid-template-rows: auto; }
    .qd-explorer, .qd-editor, .qd-console { grid-column: 1; grid-row: auto; }
    .qd-explorer { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--bankco-line); }
    .qd-console { min-height: 150px; }
    .qd-user-access { min-width: 420px; }
    .qd-bulk-toolbar { align-items: stretch; flex-direction: column; }
    .qd-bulk-toolbar > div { width: 100%; margin: 0; }
    .qd-bulk-toolbar .form-control { width: 100%; }
}

@media (max-width: 640px) {
    .qd-kpis, .qd-patch-summary, .qd-impact-grid { grid-template-columns: 1fr 1fr; }
    .qd-action { grid-template-columns: 5px minmax(0, 1fr); }
    .qd-action-controls { grid-column: 2; justify-content: flex-start; padding-top: 0; }
    .qd-form-grid { grid-template-columns: 1fr; }
    .qd-form-grid .is-wide { grid-column: auto; }
    .qd-detail-row { grid-template-columns: 1fr; gap: 3px; }
    .qd-diff { grid-template-columns: 1fr; }
    .qd-event { grid-template-columns: 18px minmax(0, 1fr); gap: 9px; }
    .qd-event-time { grid-column: 2; grid-row: 1; padding: 0; text-align: left; }
    .qd-event-axis { grid-column: 1; grid-row: 1 / 3; }
    .qd-event-content { grid-column: 2; }
    .qd-copy-row, .qd-oauth-steps { grid-template-columns: 1fr; }
}