.dbm-page { max-width: 1380px; margin: 0 auto; padding: 2rem 1rem 4rem; color: #17211b; }
.dbm-hero { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; margin-bottom: 1rem; }
.dbm-kicker { color: #447c59; font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
.dbm-hero h1 { margin: .35rem 0; font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 760; }
.dbm-hero p { max-width: 760px; color: #5f6f65; margin: 0; }
.dbm-mode { border-radius: 999px; padding: .55rem .9rem; color: #765b16; background: #fff1c7; white-space: nowrap; font-weight: 700; }
.dbm-mode.is-maintenance { color: #17603b; background: #dff7e8; }
.dbm-warning { padding: 1rem 1.2rem; border-left: 4px solid #e0a829; border-radius: 10px; background: #fff8e7; color: #694f12; margin-bottom: 1.2rem; }
.dbm-warning.is-safe { border-color: #39a866; background: #eaf8ef; color: #195f38; }
.dbm-panel, .dbm-operation-card { border: 1px solid #dfe8e2; background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(25, 62, 39, .055); }
.dbm-panel { padding: 1.2rem; margin-bottom: 1.2rem; }
.dbm-panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.dbm-panel-head h2 { margin: 0; font-size: 1.15rem; }
.dbm-panel-head p { margin: .2rem 0 0; color: #718077; font-size: .88rem; }
.dbm-config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.dbm-config-grid > div { padding: .8rem; border-radius: 10px; background: #f5f8f6; min-width: 0; }
.dbm-config-grid span { display: block; color: #77837b; font-size: .78rem; margin-bottom: .2rem; }
.dbm-config-grid strong { display: block; overflow-wrap: anywhere; }
.dbm-operations { display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; margin-bottom: 1.2rem; }
.dbm-operation-card { padding: 1.15rem; display: flex; min-height: 240px; flex-direction: column; }
.dbm-operation-card--danger { border-color: #efcaca; }
.dbm-step { font-size: .72rem; letter-spacing: .12em; color: #4c8862; font-weight: 800; }
.dbm-operation-card h2 { font-size: 1.05rem; margin: .55rem 0; }
.dbm-operation-card p { color: #69776e; font-size: .87rem; flex: 1; }
.dbm-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.dbm-empty { padding: 1.4rem; color: #7c8980; text-align: center; }
.dbm-active-run > div { display: flex; align-items: center; gap: .6rem; }
.dbm-active-run p { color: #68776d; }
.dbm-spinner { width: 13px; height: 13px; border: 2px solid #c8ddcf; border-top-color: #3b8e5a; border-radius: 50%; animation: dbm-spin .8s linear infinite; }
@keyframes dbm-spin { to { transform: rotate(360deg); } }
.dbm-script-row { display: flex; gap: 1rem; justify-content: space-between; align-items: center; border-bottom: 1px solid #edf1ee; padding: .7rem 0; }
.dbm-script-row:last-child { border-bottom: 0; }
.dbm-script-row code { display: block; max-width: 450px; overflow: hidden; text-overflow: ellipsis; color: #748078; font-size: .7rem; }
.dbm-status { display: inline-block; border-radius: 999px; padding: .25rem .55rem; background: #edf1ee; font-size: .75rem; white-space: nowrap; }
.dbm-status--succeeded, .dbm-status--applied { color: #166039; background: #dff5e7; }
.dbm-status--running { color: #765b16; background: #fff1c7; }
.dbm-status--failed, .dbm-status--drifted { color: #8b2727; background: #fde3e3; }
.dbm-status--interrupted, .dbm-status--unavailable { color: #5e6470; background: #eceef1; }
.dbm-status--pending { color: #285b8d; background: #e4f0fb; }
.dbm-table tbody tr { cursor: pointer; }
.dbm-table tbody tr:hover { background: #f5f9f6; }
.dbm-dialog { width: min(900px, calc(100vw - 2rem)); max-height: 88vh; border: 0; border-radius: 16px; padding: 1.2rem; box-shadow: 0 25px 80px rgba(0,0,0,.25); }
.dbm-dialog::backdrop { background: rgba(10, 26, 16, .52); }
.dbm-dialog-head { display: flex; justify-content: space-between; align-items: center; }
.dbm-dialog-head h2 { margin: 0; }
.dbm-dialog-head button { border: 0; background: transparent; font-size: 2rem; line-height: 1; }
.dbm-dialog h3 { font-size: 1rem; margin-top: 1.2rem; }
.dbm-dialog pre { max-height: 340px; overflow: auto; border-radius: 10px; background: #102019; color: #d8f0df; padding: 1rem; font-size: .78rem; }
.dbm-progress-list { max-height: 240px; overflow: auto; padding-left: 1.5rem; }
.dbm-progress-list li { margin: .35rem 0; }
.dbm-progress-list time { display: inline-block; min-width: 82px; color: #78847c; font-size: .75rem; }
@media (max-width: 1100px) { .dbm-operations { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .dbm-hero { display: block; } .dbm-mode { display: inline-block; margin-top: 1rem; } .dbm-config-grid, .dbm-detail-grid, .dbm-operations { grid-template-columns: 1fr; } }