:root {
    font-family: Tahoma, Arial, sans-serif;
    color-scheme: dark;
    --bg: #080d13;
    --bg-soft: #0b1119;
    --panel: #101821;
    --panel-soft: #0d151e;
    --panel-hover: #131e2a;
    --border: #203044;
    --border-soft: #182536;
    --text: #eef4fb;
    --muted: #8ea3ba;
    --muted-2: #60758d;
    --accent: #6ab5ff;
    --accent-soft: rgba(106,181,255,.11);
    --green: #59d99a;
    --red: #ff7c86;
    --yellow: #efc36a;
    --sidebar: 264px;
    --radius: 14px;
    --shadow: 0 14px 42px rgba(0,0,0,.18);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% -10%, #101b28 0, transparent 30%), var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
button, input, textarea, select { font: inherit; }
code, pre, .ltr { direction: ltr; text-align: left; font-family: Consolas, "Courier New", monospace; }

/* Sidebar */
.sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--sidebar);
    padding: 18px 14px;
    background: rgba(11,18,27,.98);
    border-left: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    z-index: 50;
    box-shadow: -16px 0 48px rgba(0,0,0,.16);
}
.sidebar-top { padding: 2px 2px 18px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); padding: 6px; }
.brand-mark {
    width: 39px; height: 39px; border-radius: 11px;
    display: grid; place-items: center;
    background: linear-gradient(145deg,#74beff,#4b8fd8);
    color: #07111b; font-weight: 900; letter-spacing: -.5px;
    box-shadow: 0 8px 24px rgba(83,155,226,.18);
}
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { font-size: 16px; }
.brand-copy small { color: var(--muted-2); font-size: 10px; direction: ltr; }
.navgroup { color: var(--muted-2); font-size: 11px; font-weight: 700; padding: 7px 13px 6px; }
.navgroup-spaced { margin-top: 14px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav a {
    min-height: 43px; display: flex; align-items: center; gap: 11px;
    color: #b7c7d9; padding: 9px 11px; border-radius: 10px;
    border: 1px solid transparent; transition: .16s ease;
}
.sidebar-nav a:hover { color: #fff; background: #111c28; border-color: #1a2a3b; }
.sidebar-nav a.active { color: #dff0ff; background: var(--accent-soft); border-color: rgba(106,181,255,.18); }
.nav-icon { width: 25px; height: 25px; display: grid; place-items: center; color: #88c5ff; direction: ltr; font-size: 14px; }
.logout-form { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.sidebar-logout {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    background: transparent; color: #dba5aa; border: 1px solid #38242b;
    border-radius: 10px; padding: 10px 12px; cursor: pointer;
}
.sidebar-logout:hover { background: #201319; color: #ffc1c7; }

/* Main */
.page.with-sidebar { margin-right: var(--sidebar); min-height: 100vh; }
.content-shell { width: min(1380px, 100%); margin: 0 auto; padding: 34px 34px 64px; }
h1 { margin: 0; font-size: 28px; letter-spacing: -.4px; }
h2 { margin: 34px 0 14px; font-size: 20px; }
h3 { margin: 6px 0; }
.muted { color: var(--muted); }
.page-head, .top { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.page-head p { margin: 7px 0 0; }

.card { background: linear-gradient(180deg, rgba(17,26,36,.98), rgba(14,22,31,.98)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cards-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border); }
.kv { margin: 18px 0 0; }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* Buttons/forms */
.button, .primary, button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; border: 1px solid transparent; border-radius: 9px; padding: 9px 15px; background: #e8f0f8; color: #0a1119; cursor: pointer; font-weight: 700; }
.button:hover, .primary:hover, button:hover { filter: brightness(.95); }
.button.secondary { background: #142130; border-color: #24374c; color: #cce4fb; }
input, textarea, select { width: 100%; background: #0a1119; border: 1px solid #26384c; color: var(--text); border-radius: 9px; padding: 10px 11px; margin: 7px 0 15px; outline: none; }
input:focus, textarea:focus, select:focus { border-color: #4c86bb; box-shadow: 0 0 0 3px rgba(83,152,219,.1); }
select { cursor: pointer; }
textarea.codeinput, pre { direction: ltr; text-align: left; font-family: Consolas, monospace; }
.formcard { max-width: 850px; margin: 0 auto; }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.check input { width: auto; margin: 0; }
.danger { background: #55242a; color: #fff; }
.error { color: #ff9b9b; }
.auth { max-width: 390px; margin: 100px auto; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); }

/* Dashboard */
.grid { display: grid; gap: 15px; }
.metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.metric-card { position: relative; overflow: hidden; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-card::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgba(106,181,255,.045); left: -25px; bottom: -35px; }
.metric-label { color: #aebed0; font-size: 13px; }
.metric-value { font-size: 31px; line-height: 1; font-weight: 900; direction: ltr; text-align: right; }
.metric-sub { color: var(--muted); font-size: 12px; direction: ltr; text-align: right; }
.quick-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-top: 16px; }
.quick-card { min-height: 98px; color: var(--text); display: flex; flex-direction: column; justify-content: center; gap: 8px; transition: .16s ease; box-shadow: none; }
.quick-card:hover { transform: translateY(-2px); background: var(--panel-hover); border-color: #35516e; }
.quick-card b { font-size: 15px; }
.quick-card span { color: var(--muted); font-size: 12px; line-height: 1.7; }
.section-head { display: flex; justify-content: space-between; align-items: end; margin: 32px 0 12px; }
.section-head h2 { margin: 0; }

/* Tables */
.tablewrap { overflow: auto; padding: 6px 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: right; padding: 14px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; vertical-align: middle; }
th { color: #93a8bf; font-size: 12px; font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255,255,255,.012); }
.status, .pill { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: #263240; font-size: 11px; font-weight: 700; direction: ltr; }
.up { background: rgba(37,154,99,.22); color: #91e9b9; border: 1px solid rgba(75,196,130,.14); }
.down { background: rgba(187,55,68,.22); color: #ffadb5; border: 1px solid rgba(225,82,95,.14); }
.unknown { background: #302b35; color: #d5c4dc; }
.block { display: block; color: var(--muted); margin-top: 3px; font-size: 11px; direction: ltr; }
.server-picker { min-width: 225px; }
.server-picker select { margin: 0; background: #0d151e; }

/* Snippets */
.search { display: flex; gap: 10px; margin-bottom: 20px; }
.search input:first-child { flex: 1; }
.snippetgrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.snippethead { display: flex; justify-content: space-between; align-items: start; }
pre { background: #060a0f; border: 1px solid #192636; border-radius: 9px; padding: 14px; overflow: auto; max-height: 420px; color: #d7e5f7; }
.tags { color: var(--muted); font-size: 13px; }

/* Command center */
.command-layout { display: grid; grid-template-columns: 390px minmax(0,1fr); gap: 18px; align-items: stretch; }
.command-panel { min-height: 500px; }
.dynamic-field { display: none; }
.command-preview { position: relative; background: #070b10; border: 1px solid #26364a; border-radius: 9px; min-height: 48px; padding: 14px 75px 14px 14px; direction: ltr; text-align: left; overflow-wrap: anywhere; }
.copy-mini { padding: 6px 10px; min-height: auto; font-size: 11px; background: #1e2c3d; color: #cfe4ff; }
.command-preview .copy-mini { position: absolute; right: 7px; top: 7px; }
.run-button { margin-top: 16px; width: 100%; background: #67b4fb; color: #06101a; }
.terminal-card { padding: 0; overflow: hidden; min-height: 500px; }
.terminal-head { height: 48px; background: #111a25; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 16px; direction: ltr; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #41536a; display: inline-block; margin-right: 5px; }
.terminal-output { margin: 0; border: 0; border-radius: 0; height: 452px; max-height: none; white-space: pre-wrap; }
.command-library { margin-top: 28px; }
.command-card pre { max-height: 120px; margin-bottom: 0; }
.card-actions-inline { display: flex; align-items: center; gap: 10px; }

@media (max-width: 1150px) {
    .metrics, .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .command-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    :root { --sidebar: 72px; }
    .sidebar { padding: 14px 8px; }
    .brand { justify-content: center; padding-bottom: 14px; }
    .brand-copy, .navgroup, .sidebar-nav a span:not(.nav-icon), .sidebar-logout span:first-child { display: none; }
    .sidebar-nav a { justify-content: center; padding: 8px; }
    .nav-icon { width: 30px; height: 30px; }
    .sidebar-logout { justify-content: center; }
    .content-shell { padding: 24px 15px 48px; }
    .page-head, .top { flex-direction: column; align-items: stretch; }
    .metrics, .quick-grid, .snippetgrid, .twocol, .cards-grid { grid-template-columns: 1fr; }
    .search { flex-direction: column; }
    .server-picker { min-width: 0; }
}

/* List search / filtering */
.filterbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(150px, 210px)) auto auto;
    gap: 10px;
    align-items: center;
    margin: 0 0 16px;
    padding: 12px;
    background: rgba(13, 21, 30, .78);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}
.filterbar input,
.filterbar select { margin: 0; }
.filterbar .filter-search { position: relative; }
.filterbar .filter-search input { padding-inline-start: 38px; }
.filterbar .filter-search::before {
    content: "⌕";
    position: absolute;
    inset-inline-start: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-2);
    font-size: 18px;
    pointer-events: none;
}
.filter-summary {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}
.filter-clear {
    min-height: 39px;
    background: #111c28;
    border-color: #24374c;
    color: #c7d9eb;
    font-weight: 600;
}
.filter-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
}
[data-filter-item][hidden] { display: none !important; }
.cards-grid > [data-filter-empty],
.snippetgrid > [data-filter-empty] { grid-column: 1 / -1; }

@media (max-width: 980px) {
    .filterbar { grid-template-columns: 1fr 1fr; }
    .filterbar .filter-search { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .filterbar { grid-template-columns: 1fr; }
    .filterbar .filter-search { grid-column: auto; }
}

/* Command visual results */
.command-result-card { padding: 0; overflow: hidden; min-height: 560px; }
.result-head {
    min-height: 56px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #111a25; direction: ltr;
}
.result-head > div:first-child { display: flex; align-items: center; gap: 10px; }
.result-tabs { display: inline-flex; background: #091019; border: 1px solid #223247; border-radius: 9px; padding: 3px; }
.result-tab { min-height: 31px; padding: 5px 12px; border-radius: 7px; background: transparent; color: #8fa6bd; border: 0; font-size: 12px; }
.result-tab:hover { filter: none; color: #fff; }
.result-tab.active { background: #1b2a3b; color: #dbeeff; }
.result-pane { display: none; min-height: 500px; }
.result-pane.active { display: block; }
.empty-result { min-height: 500px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 30px; }
.empty-result-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 16px; background: #0a1119; border: 1px solid #213348; color: #78bbf7; font: 700 23px Consolas, monospace; margin-bottom: 10px; direction: ltr; }
.empty-result h3 { margin: 5px 0; }
.empty-result p { max-width: 420px; line-height: 1.8; }
.visual-result { padding: 22px; }
.visual-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.visual-title-row h2 { margin: 0 0 5px; font-size: 21px; direction: ltr; text-align: left; }
.visual-title-row p { margin: 0; }
.visual-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 18px; }
.visual-field { min-width: 0; background: #0a1119; border: 1px solid #1e3044; border-radius: 10px; padding: 12px; }
.visual-field span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 7px; }
.visual-field strong { display: block; direction: ltr; text-align: left; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; }
.visual-field.success { border-color: rgba(75,196,130,.28); background: rgba(37,154,99,.08); }
.visual-field.danger { border-color: rgba(225,82,95,.28); background: rgba(187,55,68,.08); }
.visual-field.warning { border-color: rgba(239,195,106,.28); background: rgba(239,195,106,.07); }
.visual-progress-list { display: grid; gap: 14px; margin-top: 20px; }
.visual-progress-item { display: grid; grid-template-columns: minmax(150px,220px) minmax(150px,1fr) 58px; align-items: center; gap: 14px; background: #0a1119; border: 1px solid #1d2c3e; border-radius: 10px; padding: 12px 14px; }
.visual-progress-label { min-width: 0; }
.visual-progress-label strong { display: block; direction: ltr; text-align: left; }
.visual-progress-label span { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; direction: ltr; text-align: left; }
.progress-track { height: 8px; border-radius: 999px; background: #162230; overflow: hidden; }
.progress-value { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5b9dde,#75c1ff); }
.visual-progress-item small { direction: ltr; text-align: left; color: #b8cee4; }
.visual-table-wrap { margin-top: 18px; border: 1px solid #1d2d40; border-radius: 10px; overflow: auto; max-height: 360px; }
.visual-table { min-width: 680px; }
.visual-table th { position: sticky; top: 0; background: #101a25; z-index: 2; }
.visual-table td { font-size: 12px; color: #c9d8e7; }
.log-viewer { margin-top: 18px; overflow: hidden; border: 1px solid #1c2b3c; border-radius: 10px; background: #060a0f; direction: ltr; }
.log-toolbar { min-height: 42px; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 6px 14px; background: #0e1721; border-bottom: 1px solid #1c2b3c; color: #839aaf; font-size: 11px; }
.log-lines { max-height: 420px; overflow: auto; }
.log-line { display: grid; grid-template-columns: 48px minmax(0,1fr); border-bottom: 1px solid rgba(255,255,255,.025); }
.log-line > span { padding: 5px 9px; color: #4d6278; text-align: right; user-select: none; border-right: 1px solid #142130; font: 11px Consolas, monospace; }
.log-line code { display: block; padding: 5px 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: #cbd9e8; font-size: 11px; }
.raw-head { border-radius: 0; }
.result-pane .terminal-output { height: 452px; max-height: 452px; }

@media (max-width: 900px) {
    .visual-fields { grid-template-columns: 1fr 1fr; }
    .visual-progress-item { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 620px) {
    .visual-fields { grid-template-columns: 1fr; }
    .result-head { align-items: stretch; flex-direction: column; direction: rtl; }
    .result-tabs { align-self: flex-start; direction: ltr; }
}

/* Deployment Manager */
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-actions form, .deployment-actions form { margin: 0; }
.notice { border-radius: 10px; padding: 12px 15px; margin-bottom: 18px; border: 1px solid; }
.success-notice { background: rgba(45,151,96,.12); border-color: rgba(75,196,130,.28); color: #a6efc5; }
.error-notice { background: rgba(188,55,68,.13); border-color: rgba(225,82,95,.3); color: #ffb5bc; }
.deployment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.deployment-card { display: flex; flex-direction: column; min-height: 360px; }
.deployment-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.deployment-title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deployment-title-line h3, .deployment-title-line h1 { margin: 0; }
.deployment-meta { color: var(--muted); margin-top: 7px; font-size: 12px; direction: ltr; text-align: right; }
.deploy-flow { margin: 17px 0 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; direction: ltr; }
.deploy-flow span { background: #0a121a; border: 1px solid #1d3043; color: #b8d1e8; border-radius: 999px; padding: 5px 9px; font-size: 10px; }
.deploy-flow i { color: #51718d; font-style: normal; }
.deployment-kv { flex: 1; }
.deployment-kv dd { max-width: 70%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.deployment-time { display: inline-block; color: var(--muted); margin-right: 7px; direction: ltr; }
.deployment-actions { align-items: center; }
.deployment-actions > a:not(.button) { padding: 8px 4px; }
.deploy-button { background: linear-gradient(135deg,#6cb9ff,#66d7ad); color: #06121a; border: 0; min-height: 39px; }
.deploy-button:hover { filter: brightness(1.07); }
.deployment-form-card { max-width: 980px; margin: 0 auto; }
.form-section-title { margin: 25px 0 12px; color: #b9d3ec; font-weight: 800; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.form-section-title:first-child { margin-top: 0; }
.field-help { color: var(--muted-2); font-size: 11px; margin-top: -10px; margin-bottom: 14px; }
.deployment-options { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 18px 0; }
.deployment-options .check { margin: 0; }
.delete-project-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.deployment-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.deployment-summary-grid .card { display: flex; flex-direction: column; gap: 8px; min-height: 125px; justify-content: center; }
.deploy-summary-value { font-size: 21px; overflow-wrap: anywhere; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.deployment-config-card { margin-top: 16px; }
.compact-head { margin: 0 0 12px; }
.deployment-config-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 22px; }
.deployment-config-grid > div { min-width: 0; background: #0b121a; border: 1px solid var(--border-soft); border-radius: 9px; padding: 11px 12px; }
.deployment-config-grid span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.deployment-config-grid code { display: block; color: #d7e7f8; overflow-wrap: anywhere; }
.deployment-history { display: flex; flex-direction: column; gap: 12px; }
.deploy-run { padding: 0; overflow: hidden; }
.deploy-run-head { min-height: 60px; display: grid; grid-template-columns: 55px 90px 110px minmax(180px,1fr) 90px; gap: 12px; align-items: center; padding: 12px 16px; direction: ltr; }
.deploy-run-id { color: var(--muted); font-weight: 800; }
.deploy-run-commit { font-family: Consolas,monospace; color: #b8d9f6; }
.deploy-run-time, .deploy-run-duration { color: var(--muted); font-size: 12px; }
.deploy-failed-step { padding: 9px 16px; background: rgba(179,56,67,.1); border-top: 1px solid rgba(214,73,86,.15); color: #f0aeb5; }
.deploy-log-details { border-top: 1px solid var(--border-soft); }
.deploy-log-details summary { cursor: pointer; color: #a9c8e5; padding: 12px 16px; user-select: none; }
.deploy-log-details[open] summary { border-bottom: 1px solid var(--border-soft); }
.deployment-log { margin: 0; max-height: 620px; border: 0; border-radius: 0; white-space: pre-wrap; }
.deploy-log-details .log-toolbar { border-radius: 0; }
.empty-deployment { text-align: center; padding: 40px 18px; }

@media (max-width: 1100px) {
    .deployment-grid { grid-template-columns: 1fr; }
    .deployment-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
    .deployment-summary-grid, .deployment-config-grid { grid-template-columns: 1fr; }
    .deploy-run-head { grid-template-columns: 45px 80px 1fr; }
    .deploy-run-time { grid-column: 1 / -1; }
    .deploy-run-duration { display: none; }
    .deployment-actions { align-items: stretch; }
    .deployment-actions > * { flex: 1; }
    .deployment-actions form button { width: 100%; }
}

/* Database Manager */
.compact-page-head { margin-bottom: 16px; }
.database-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.database-card { min-height: 330px; display: flex; flex-direction: column; }
.database-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.database-title-line { display: flex; align-items: center; gap: 12px; }
.database-title-line h3 { margin: 0 0 5px; }
.db-provider-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg,#14283c,#17364d); border: 1px solid #2b4a64; color: #8fd0ff; font: 800 12px Consolas,monospace; direction: ltr; }
.database-meta { color: var(--muted); font-size: 12px; direction: ltr; text-align: right; }
.database-actions { margin-top: auto; align-items: center; }
.database-actions form { margin: 0; }
.warning-pill { color: #f3c96c !important; border-color: rgba(239,195,106,.3) !important; background: rgba(239,195,106,.08) !important; }
.database-form-card { max-width: 980px; margin: 0 auto; }
.threecol { display: grid; grid-template-columns: 1.2fr .55fr 1.2fr; gap: 14px; }
.database-options { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 12px 0; }
.database-options .check { margin: 0; }
.security-hint { color: #efc36a; border: 1px solid rgba(239,195,106,.2); background: rgba(239,195,106,.06); border-radius: 9px; padding: 10px 12px; margin: 8px 0 18px; font-size: 12px; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.sql-console-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 16px; align-items: start; }
.sql-main { min-width: 0; display: grid; gap: 16px; }
.sql-editor-card { padding: 0; overflow: hidden; }
.sql-toolbar { min-height: 70px; display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 14px 16px; background: #0d1721; border-bottom: 1px solid var(--border-soft); }
.sql-connection-picker { min-width: 300px; }
.sql-connection-picker label { margin: 0 0 6px; }
.sql-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sql-editor { min-height: 300px; margin: 0; border: 0; border-radius: 0; resize: vertical; direction: ltr; text-align: left; font: 13px/1.75 Consolas,"Courier New",monospace; background: #070c12; color: #d6e8f9; padding: 18px; outline: none; }
.sql-editor:focus { box-shadow: inset 0 0 0 1px #2a5270; }
.sql-editor-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border-soft); background: #0d1721; }
.sql-editor-actions .muted { margin-right: auto; font-size: 11px; }
.sql-side { display: grid; gap: 16px; position: sticky; top: 16px; }
.sql-side-card { padding: 0; overflow: hidden; }
.sql-side-card > h3 { margin: 0; padding: 14px 15px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.save-query-form { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border-soft); }
.save-query-form input { margin: 0; }
.saved-query-list, .query-history-list { max-height: 360px; overflow: auto; }
.saved-query-item { display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,.04); }
.saved-query-load { appearance: none; border: 0; background: transparent; color: inherit; text-align: right; padding: 11px 12px; cursor: pointer; }
.saved-query-load:hover { background: rgba(95,163,223,.07); filter: none; }
.saved-query-load strong { display: block; font-size: 12px; margin-bottom: 4px; }
.saved-query-load span { color: var(--muted); font-size: 10px; }
.saved-query-item form { margin: 0; display: grid; }
.saved-query-delete { border: 0; border-radius: 0; background: transparent; color: #7c91a5; padding: 0; min-height: 100%; }
.saved-query-delete:hover { color: var(--red); background: rgba(211,69,81,.08); filter: none; }
.sql-side-empty { padding: 18px 14px; text-align: center; font-size: 11px; }
.query-history-item { width: 100%; display: grid; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.04); }
.query-history-item > div { display: flex; align-items: center; gap: 8px; direction: ltr; justify-content: flex-start; }
.query-history-item small, .query-history-item time { color: var(--muted); font-size: 10px; }
.query-history-item code { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: left; color: #b9cfe3; }
.query-history-item time { direction: ltr; text-align: left; }

.query-result-card { padding: 0; overflow: hidden; }
.query-result-head { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.query-result-head > div:first-child { display: flex; align-items: center; gap: 10px; }
.query-result-head h3 { margin: 0; }
.query-result-stats { display: flex; gap: 8px; direction: ltr; }
.query-result-stats span { border: 1px solid #26394c; background: #0a121a; padding: 5px 8px; border-radius: 7px; color: #a9bfd3; font-size: 11px; }
.query-result-table-wrap { max-height: 560px; overflow: auto; direction: ltr; }
.query-result-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 11px; }
.query-result-table th { position: sticky; top: 0; z-index: 2; background: #101b26; color: #bcd0e3; text-align: left; padding: 9px 11px; border-bottom: 1px solid #26394b; white-space: nowrap; }
.query-result-table td { padding: 8px 11px; border-bottom: 1px solid rgba(255,255,255,.035); border-right: 1px solid rgba(255,255,255,.025); color: #d0deeb; max-width: 420px; white-space: pre-wrap; overflow-wrap: anywhere; vertical-align: top; }
.query-result-table tbody tr:hover td { background: rgba(85,153,210,.045); }
.db-error-output { margin: 0; padding: 18px; min-height: 120px; white-space: pre-wrap; direction: ltr; text-align: left; background: rgba(164,48,61,.09); color: #ffb9c0; border: 0; }
.query-warning { padding: 9px 14px; background: rgba(239,195,106,.08); color: #efc36a; border-bottom: 1px solid rgba(239,195,106,.14); font-size: 11px; }
.query-success-box { min-height: 150px; display: grid; place-content: center; justify-items: center; gap: 8px; }
.query-success-box strong { font-size: 38px; color: var(--green); direction: ltr; }
.query-success-box span { color: var(--muted); }

@media (max-width: 1100px) {
    .database-grid { grid-template-columns: 1fr; }
    .sql-console-layout { grid-template-columns: 1fr; }
    .sql-side { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
    .threecol, .sql-side { grid-template-columns: 1fr; }
    .sql-toolbar { align-items: stretch; flex-direction: column; }
    .sql-connection-picker { min-width: 0; width: 100%; }
    .sql-mode { align-items: flex-start; }
    .sql-editor-actions .muted { width: 100%; margin-right: 0; }
}

/* Backup Center */
.backup-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.backup-card { min-height: 355px; display: flex; flex-direction: column; }
.backup-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.backup-title-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.backup-title-line h3 { margin: 0 0 5px; }
.backup-icon { width: 43px; height: 43px; flex: 0 0 43px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg,#14283c,#17364d); border: 1px solid #2b4a64; color: #8fd0ff; font: 800 12px Consolas,monospace; direction: ltr; }
.backup-kv { margin-top: 18px; }
.backup-time { color: var(--muted); margin-inline-start: 8px; font-size: 11px; direction: ltr; }
.backup-actions { margin-top: auto; }
.backup-actions form, .page-actions form, .backup-run-actions form { margin: 0; }
.backup-now { background: linear-gradient(135deg,#197b58,#22966b); border-color: #2ea77a; color: #fff; }
.backup-now:hover { filter: brightness(1.08); }
.backup-form-card { max-width: 1000px; margin: 0 auto; }
.backup-target-panel { margin: 16px 0; padding: 16px; border: 1px solid var(--border-soft); border-radius: 11px; background: #0a121a; }
.backup-target-panel[hidden] { display: none; }
.backup-schedule-box { display: flex; gap: 28px; align-items: end; flex-wrap: wrap; margin: 14px 0 18px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(94,155,209,.035); }
.backup-schedule-box > .check { margin: 0 0 10px; }
.backup-time-fields { display: grid; grid-template-columns: 110px 110px; gap: 10px; }
.backup-time-fields[hidden] { display: none; }
.backup-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.backup-summary-grid .card { min-height: 112px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.backup-summary-grid strong { overflow-wrap: anywhere; }
.backup-history-section { margin-top: 18px; }
.backup-history-list { display: grid; gap: 12px; }
.backup-run { padding: 0; overflow: hidden; }
.backup-run-head { min-height: 76px; display: grid; grid-template-columns: 88px minmax(220px,1fr) 100px 100px auto; align-items: center; gap: 14px; padding: 12px 15px; direction: ltr; }
.backup-run-file { min-width: 0; }
.backup-run-file strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.backup-run-file small { display: block; color: var(--muted); margin-top: 5px; text-align: left; }
.backup-run-stat { display: flex; flex-direction: column; gap: 4px; }
.backup-run-stat span { color: var(--muted); font-size: 10px; }
.backup-run-stat strong { font-size: 12px; }
.backup-run-actions { display: flex; gap: 7px; align-items: center; }
.backup-run-error { padding: 10px 15px; background: rgba(179,56,67,.1); border-top: 1px solid rgba(214,73,86,.15); color: #f0aeb5; direction: ltr; text-align: left; overflow-wrap: anywhere; }
.subtle-danger { padding: 7px 10px; min-height: 34px; }

@media (max-width: 1100px) {
    .backup-grid { grid-template-columns: 1fr; }
    .backup-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .backup-run-head { grid-template-columns: 85px minmax(190px,1fr) 90px auto; }
    .backup-run-stat:nth-of-type(2) { display: none; }
}
@media (max-width: 720px) {
    .backup-summary-grid { grid-template-columns: 1fr; }
    .backup-time-fields { grid-template-columns: 1fr 1fr; width: 100%; }
    .backup-run-head { grid-template-columns: 78px 1fr; }
    .backup-run-stat { display: none; }
    .backup-run-actions { grid-column: 1 / -1; flex-wrap: wrap; }
}