:root {
    --ink: #071526;
    --muted: #66758b;
    --line: #d7e0ec;
    --panel: #ffffff;
    --wash: #f3f7fb;
    --blue: #1769aa;
    --cyan: #1a9fb7;
    --green: #18824d;
    --amber: #a56500;
    --red: #c93535;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--wash);
    color: var(--ink);
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 14px;
}

.content { padding: 14px 18px 90px; max-width: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
h1 { font-size: 25px; margin: 0; font-weight: 650; }
.subtitle { color: var(--muted); display: block; margin-top: 4px; }
.identity { color: var(--muted); font-size: 12px; word-break: break-word; }
.identity a { color: var(--blue); text-decoration: none; }
.tabs { display: flex; gap: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tabs a { color: #00345f; text-decoration: none; padding: 12px 18px; border: 1px solid transparent; border-radius: 6px 6px 0 0; font-weight: 650; }
.tabs a.active { background: #fff; border-color: var(--line); border-bottom-color: #fff; margin-bottom: -1px; }
.access-note { color: var(--muted); font-size: 12px; margin: -4px 0 12px; }

.filter-panel, .panel, .review-package, .confirm-box, .empty-state, .review-rail, .settings-intro {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    margin-bottom: 16px;
}
.filter-panel form { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 14px; padding: 16px; align-items: end; }
label { display: grid; gap: 6px; color: #27384d; font-weight: 650; }
input, select { border: 1px solid #c7d3e2; border-radius: 5px; padding: 9px 10px; min-height: 38px; background: #fff; }
button, .button { border: 1px solid #0d5f9d; background: var(--blue); color: #fff; border-radius: 4px; padding: 8px 12px; font-weight: 650; cursor: pointer; text-decoration: none; display: inline-block; }
button.secondary, .page-link { border: 1px solid #c8d3df; background: #fff; color: #1d3147; }
button.danger { background: var(--red); border-color: #a32323; }
button.warning { background: #a56500; border-color: #7d4d00; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-head span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.panel-meta { display: flex; align-items: center; gap: 10px; }
.bulkbar { margin: 12px; border: 1px solid #d8e2ee; background: #fbfdff; border-radius: 6px; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bulk-note { color: var(--muted); margin-left: 4px; }
.package-grid-head { display: none; }
.package-list { display: grid; gap: 14px; padding: 12px; align-items: start; }
.package-card { border: 1px solid #d6e1ec; background: #f9fbfe; border-radius: 7px; overflow: hidden; box-shadow: 0 1px 0 rgba(7,21,38,.03); }
.package-card:hover { border-color: #b7cbdf; box-shadow: 0 8px 22px rgba(35, 58, 82, .08); }
.package-head {
    display: grid;
    grid-template-columns: 145px minmax(280px, 1.3fr) 190px minmax(260px, 1fr) 230px 76px;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fbfdff, #f5f9fd);
}
.select-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trash {
    color: #00345f;
    font-weight: 800;
    border: 1px solid #bcd0e5;
    background: #eef6ff;
    border-radius: 4px;
    padding: 3px 6px;
    white-space: nowrap;
}
.package-main { min-width: 0; }
.package-main strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.package-main span { color: var(--muted); overflow-wrap: anywhere; }
.package-facts { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.package-facts span { white-space: nowrap; }
.package-systems, .package-state { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.package-state { justify-content: flex-end; }
.package-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.tag { border: 1px solid #c8d5e5; background: #f6f9fd; color: #16304b; border-radius: 5px; padding: 3px 6px; font-size: 11px; font-weight: 750; }
.tag.whmcs { border-color: #9cc8f0; color: #075fa5; background: #edf7ff; }
.tag.vcloud { border-color: #8ed4d5; color: #03676a; background: #eefcfc; }
.tag.odoo { border-color: #a9dfb7; color: #176b32; background: #f0fff4; }
.tag.payments { border-color: #f2c56b; color: #8b5200; background: #fff8e8; }
.tag.danger, .tag.failed, .tag.completed_with_errors { border-color: #ff9a9a; color: #b01818; background: #fff0f0; }
.tag.success, .tag.completed { border-color: #9bd7ac; color: #146b31; background: #effbf2; }
.tag.running, .tag.queued { border-color: #8fc9ec; color: #0a638f; background: #edf8ff; }
.toggle-link { background: transparent; border: 0; color: var(--blue); padding: 0; font-weight: 700; justify-self: end; }
.package-body { border-top: 1px solid #dce6ef; background: #fff; padding: 10px 16px 18px; }
.package-summary { display: flex; gap: 18px; color: #536680; font-size: 12px; margin-bottom: 10px; }
.package-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.review-package .package-head { grid-template-columns: minmax(260px, 1fr) 76px; }
.review-package .package-main { grid-column: 1; }
.record-section { border: 1px solid #dce7f1; border-left: 4px solid var(--blue); border-radius: 6px; margin: 10px 0; overflow: hidden; background: #fff; }
.record-section.whmcs { border-left-color: #2684c7; }
.record-section.payments { border-left-color: #d78700; }
.record-section.vcloud { border-left-color: #008985; }
.record-section.odoo { border-left-color: #22964a; }
.record-section-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: #eef6ff; }
.record-section.payments .record-section-head { background: #fff8e8; }
.record-section.vcloud .record-section-head { background: #eafafa; }
.record-section.odoo .record-section-head { background: #effbf2; }
.record-row { display: grid; grid-template-columns: minmax(260px, 1fr) 120px minmax(180px, 260px) 80px; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid #edf1f6; }
.record-row span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.package-sections .record-row { grid-template-columns: minmax(0, 1fr); gap: 7px; align-items: start; }
.package-sections .record-row .tag, .package-sections .record-row code { justify-self: start; }
.sticky-action { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; background: #10243a; color: #fff; padding: 14px 18px; border-radius: 0 0 7px 7px; z-index: 4; }
.pagination-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 12px 12px; border: 1px solid #d8e2ee; background: #fbfdff; border-radius: 6px; padding: 10px 12px; }
.pagination-bar div { display: flex; gap: 4px; }
.page-link { text-decoration: none; padding: 8px 11px; border-radius: 4px; }
.page-link.active { background: #e7eef6; color: #071526; box-shadow: inset 0 0 0 1px #aebdcb; }
.review-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; background: #fff8eb; border-color: #f1c56f; }
.deletion-plan { border: 1px solid #b8d4e8; border-left: 4px solid var(--blue); border-radius: 7px; background: #fff; margin-bottom: 16px; overflow: hidden; }
.deletion-plan-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 13px 15px; background: #edf6fd; border-bottom: 1px solid #cfe0ed; }
.deletion-plan-head strong, .teardown-scope strong { display: block; font-size: 15px; }
.deletion-plan-head span, .teardown-scope span { color: var(--muted); font-size: 12px; margin-top: 3px; display: block; }
.review-stats { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px; padding: 12px 15px; border-bottom: 1px solid #dce7f1; background: #fbfdff; }
.review-stats div { border: 1px solid #dce7f1; border-radius: 6px; padding: 11px 12px; background: #fff; }
.review-stats strong { display: block; font-size: 20px; line-height: 1; text-transform: uppercase; }
.review-stats span { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.deletion-order { padding: 13px 15px; display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }
.deletion-order ol { margin: 0; padding-left: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.deletion-order li { padding: 8px; border: 1px solid #dce7f1; border-radius: 5px; background: #fbfdff; }
.cleanup-timeline ol { padding-left: 0; counter-reset: none; list-style: none; }
.cleanup-timeline li { position: relative; min-height: 58px; padding: 10px 12px 10px 44px; display: flex; align-items: center; line-height: 1.35; }
.cleanup-timeline li span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: #dcecff; color: #075fa5; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.cleanup-timeline li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50%; width: 12px; height: 2px; background: #bfd3e6; }
.teardown-scope { padding: 13px 15px; border-top: 1px solid #dce7f1; background: #effafa; display: grid; gap: 10px; }
.teardown-scope.in-package { margin-top: 12px; border: 1px solid #c4e7e7; border-left: 4px solid #008985; border-radius: 6px; }
.scope-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.step { border: 1px solid #efc778; border-radius: 6px; padding: 10px; font-weight: 700; }
.step.danger { color: var(--red); }
.review-package { margin-bottom: 14px; }
.review-package h2 { margin: 0 0 12px; font-size: 21px; }
.review-package h2 span { color: var(--muted); font-size: 14px; font-weight: 400; }
.review-package h3 { font-size: 15px; text-transform: uppercase; color: #31516e; margin-top: 18px; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #e4ebf3; padding: 9px; text-align: left; }
code { color: #c40045; background: #fff3f7; padding: 2px 5px; border-radius: 4px; }
.confirm-box { padding: 18px 20px 20px; display: grid; gap: 14px; border-color: #ff9a9a; background: #fff7f7; }
.sticky-confirmation { position: sticky; bottom: 0; z-index: 5; grid-template-columns: minmax(220px, 1.3fr) minmax(260px, 1.1fr) minmax(320px, 1.4fr) minmax(220px, .9fr); align-items: end; box-shadow: 0 -12px 34px rgba(16, 36, 58, .12); }
.confirm-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding-bottom: 4px; }
.sticky-confirmation .confirm-head { display: grid; gap: 4px; padding-bottom: 0; align-self: center; }
.confirm-head strong { font-size: 16px; color: #7d1717; }
.confirm-head span { color: #8a4b4b; font-size: 12px; }
.confirm-check {
    display: flex;
    gap: 10px;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    color: #071526;
}
.confirm-check input {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--red);
}
.confirm-check span { line-height: 1.35; }
.confirm-phrase { gap: 8px; color: #071526; }
.confirm-phrase input { width: 100%; border-color: #e0a0a0; background: #fff; }
.confirm-phrase input:focus { outline: 2px solid rgba(201, 53, 53, .18); border-color: var(--red); }
.confirm-submit { width: 100%; min-height: 42px; }
.confirm-submit:disabled { cursor: not-allowed; opacity: .45; background: #9aa9bc; border-color: #7e8b9a; }
.run-table { padding: 12px; }
.run-table-head, .run-head {
    display: grid;
    grid-template-columns: 44px 170px 86px 72px minmax(260px, 1fr) minmax(260px, 1.1fr) minmax(160px, .7fr) 165px 76px;
    gap: 12px;
    align-items: center;
}
.run-table-head { padding: 0 14px 9px; color: #27384d; font-weight: 800; border-bottom: 1px solid var(--line); }
.run-card { border-bottom: 1px solid #e1e8f0; background: #fff; }
.run-card:nth-child(even) { background: #fbfcfe; }
.run-head { padding: 10px 14px; }
.run-id { font-weight: 800; color: #00345f; }
.run-clients, .run-admin { overflow-wrap: anywhere; }
.run-admin { color: var(--muted); font-size: 12px; }
.run-body { margin: 0 14px 12px; border: 1px solid #d6e1ec; border-radius: 7px; background: #fff; }
.run-detail-meta { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 14px; color: #36506d; }
.retry-panel { margin: 0 14px 12px; border: 1px solid #edc46f; border-left: 4px solid var(--amber); border-radius: 6px; background: #fff9ec; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.retry-panel > div { display: grid; gap: 2px; margin-right: auto; }
.retry-panel span { color: #75551b; font-size: 12px; }
.retry-confirm, .retry-step-form label { display: flex; align-items: center; gap: 6px; }
.retry-confirm input, .retry-step-form input[type="checkbox"] { min-height: 0; width: 16px; height: 16px; }
.retry-step-form { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 8px; }
.retry-step-form button { padding: 5px 8px; }
.retry-history { margin: 0 14px 12px; border: 1px solid #dce5ef; border-radius: 6px; background: #f8fbfe; padding: 9px 12px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.retry-history span { color: var(--muted); font-size: 12px; }
.run-blockers { display: grid; gap: 8px; padding: 0 14px 12px; }
.run-blocker { border: 1px solid #e3e9f0; border-left: 4px solid #9aa9bc; border-radius: 6px; padding: 10px 12px; background: #fbfdff; display: grid; gap: 3px; }
.run-blocker strong { color: #17314c; }
.run-blocker span { color: var(--muted); line-height: 1.4; }
.run-blocker.danger { border-color: #ffc9c9; border-left-color: var(--red); background: #fff7f7; }
.run-blocker.danger strong { color: #861c1c; }
.run-blocker.ok { border-color: #b8dfc4; border-left-color: var(--green); background: #f3fff6; }
.run-blocker.ok strong { color: #13602c; }
.run-items-summary { padding: 0 14px 12px; display: grid; gap: 12px; }
.run-client-summary { border: 1px solid #dce7f1; border-radius: 7px; overflow: hidden; background: #fff; }
.run-client-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; background: #f5f9fd; border-bottom: 1px solid #dce7f1; }
.run-client-head span { color: var(--muted); font-size: 12px; }
.run-item-ledger { display: grid; }
.run-item-line {
    display: grid;
    grid-template-columns: 96px minmax(260px, 1fr) minmax(150px, .55fr) 110px;
    gap: 12px;
    align-items: center;
    min-height: 42px;
    padding: 8px 12px;
    border-bottom: 1px solid #edf2f7;
    border-left: 3px solid var(--blue);
}
.run-item-line:last-child { border-bottom: 0; }
.run-item-line.vcloud { border-left-color: #008985; }
.run-item-line.odoo { border-left-color: #22964a; }
.run-item-line.payments { border-left-color: #d78700; }
.run-item-kind, .run-item-status { display: flex; align-items: center; }
.run-item-name { overflow-wrap: anywhere; }
.run-item-entity { color: var(--muted); font-size: 12px; }
.run-event-list { grid-column: 2 / 5; display: grid; gap: 5px; margin-top: 2px; padding-top: 7px; border-top: 1px solid #edf2f7; }
.run-event { display: grid; grid-template-columns: 10px 1fr; gap: 7px; align-items: start; }
.run-event-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: #9aa9bc; }
.run-event.success .run-event-dot { background: var(--green); }
.run-event.warning .run-event-dot { background: #d78700; }
.run-event strong { display: block; font-size: 12px; }
.run-event span { display: block; line-height: 1.35; }
.run-step-table { padding: 0 14px 12px; }
.run-step-head, .run-step-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) 90px minmax(170px, .85fr) minmax(190px, 1fr) 90px minmax(160px, .9fr) 160px;
    gap: 12px;
    align-items: center;
}
.run-step-head { padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 800; }
.run-step-row { padding: 8px 0; border-bottom: 1px solid #edf1f6; }
.run-step-row:last-child { border-bottom: 0; }
.run-error { color: var(--muted); overflow-wrap: anywhere; }
.runs { background: #fff; }
.progress-list { padding: 12px; display: grid; gap: 8px; }
.progress-row { display: grid; grid-template-columns: 16px minmax(260px, 1fr) auto auto; gap: 12px; align-items: center; border: 1px solid #dce5ef; border-radius: 6px; padding: 10px; }
.progress-row span { color: var(--muted); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa9bc; }
.progress-row.running .status-dot { background: var(--blue); }
.progress-row.success .status-dot { background: var(--green); }
.progress-row.failed .status-dot { background: var(--red); }
.step-error { margin: -4px 0 6px 28px; color: var(--red); }
.empty-state { padding: 36px; color: var(--muted); }
.login-shell { display: grid; place-items: center; min-height: 100vh; background: #10243a; }
.login-panel { width: min(420px, calc(100vw - 28px)); background: #fff; border-radius: 8px; padding: 24px; box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.alert { padding: 10px; border-radius: 6px; margin: 10px 0; }
.alert.danger { background: #fff0f0; color: var(--red); border: 1px solid #ffb0b0; }
.alert.muted { background: #f1f5f9; color: var(--muted); border: 1px solid #d7e0ec; }
.alert.success { background: #effbf2; color: var(--green); border: 1px solid #9bd7ac; }
.settings-intro { padding: 15px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.settings-intro span { color: var(--muted); }
.settings-grid { padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; }
.connection-grid { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 16px; }
.connection-card { border: 1px solid #d7e2ef; border-radius: 7px; background: #fbfdff; overflow: hidden; }
.connection-card:nth-child(2) { background: #fffdf8; }
.connection-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #dfe8f2; background: #eef6ff; }
.connection-card:nth-child(2) .connection-head { background: #fff7e6; }
.connection-fields { padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 14px; }
.field-note { color: var(--green); font-size: 12px; font-weight: 500; }
.field-note.muted { color: var(--muted); }
.user-list { display: grid; gap: 12px; padding: 14px; }
.user-card {
    display: grid;
    grid-template-columns: minmax(230px, 1.2fr) 150px 150px minmax(240px, 1fr) minmax(180px, .8fr) 110px;
    gap: 14px;
    align-items: end;
    padding: 14px;
    border: 1px solid #dce5ef;
    border-left: 4px solid var(--blue);
    border-radius: 6px;
    background: #fbfdff;
}
.user-identity { display: grid; gap: 3px; align-self: center; }
.user-identity strong { font-size: 15px; }
.user-identity span, .user-meta span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.user-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; align-self: center; }
.tag.pending { border-color: #f2c56b; color: #8b5200; background: #fff8e8; }
.tag.disabled { border-color: #c8d5e5; color: #52657b; background: #f2f5f8; }

@media (max-width: 900px) {
    .filter-panel form, .review-rail, .settings-grid, .connection-grid, .connection-fields, .deletion-order, .deletion-order ol, .review-stats, .sticky-confirmation { grid-template-columns: 1fr; }
    .package-grid-head { display: none; }
    .package-head, .record-row, .run-head, .run-step-row, .progress-row, .user-card { grid-template-columns: 1fr; background: #f9fbfe; }
    .run-table-head, .run-step-head { display: none; }
    .run-body { margin: 0 0 12px; border-left: 0; border-right: 0; border-radius: 0; }
    .run-item-line { grid-template-columns: 1fr; gap: 6px; }
    .run-event-list { grid-column: 1; }
    .package-sections { grid-template-columns: 1fr; }
    .package-systems, .package-state, .package-tags { justify-content: flex-start; }
    .cleanup-timeline li:not(:last-child)::after { display: none; }
    .tabs { overflow-x: auto; }
    .pagination-bar { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (max-width: 1500px) {
    .package-head { grid-template-columns: 135px minmax(250px, 1.2fr) 165px minmax(220px, 1fr) 76px; }
    .package-state { grid-column: 2 / 5; justify-content: flex-start; }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .package-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .run-item-line { grid-template-columns: 88px minmax(220px, 1fr) minmax(130px, .55fr) 100px; }
}