:root {
  color-scheme: dark;
  --bg: #090b0e;
  --surface: #11151a;
  --surface-2: #171c22;
  --line: #252c34;
  --muted: #87919c;
  --text: #f4f7fa;
  --red: #e33b45;
  --red-soft: rgba(227, 59, 69, .14);
  --green: #55d69e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% -20%, rgba(155, 28, 40, .18), transparent 38%), var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 258px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 32px 22px; border-right: 1px solid var(--line); background: rgba(9, 11, 14, .82); display: flex; flex-direction: column; backdrop-filter: blur(18px); }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; font-weight: 900; letter-spacing: -.06em; background: linear-gradient(145deg, #f0525a, #981d2b); box-shadow: 0 12px 28px rgba(227, 59, 69, .25); }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: -.02em; }
.brand small { color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-top: 2px; }
.mobile-menu-toggle { display: none; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: #d8e0e7; padding: 9px 12px; font: inherit; font-size: 12px; cursor: pointer; }
nav { margin-top: 52px; display: grid; gap: 8px; }
.nav-link { color: #9ba5af; display: flex; gap: 13px; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 11px; font-size: 14px; font-weight: 650; }
.nav-link span { width: 19px; color: #6d7781; }
.nav-link:hover { color: white; background: var(--surface); }
.nav-link.active { color: white; background: var(--red-soft); box-shadow: inset 3px 0 var(--red); }
.nav-link.active span { color: var(--red); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 10px; }
.sidebar-status { padding: 15px 13px; border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 10px; color: #d8e0e7; font-size: 12px; }
.sidebar-status i { width: 8px; height: 8px; margin-top: 4px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(85, 214, 158, .09); }
.sidebar-status small { display: block; color: var(--muted); margin-top: 4px; }
main { padding: 34px clamp(28px, 4vw, 64px) 60px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; }
.topbar h1 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.03em; }
.eyebrow { margin: 0; color: var(--red); font-size: 10px; font-weight: 850; letter-spacing: .2em; }
.identity { display: flex; align-items: center; gap: 12px; }
.rank { border: 1px solid rgba(227, 59, 69, .4); background: var(--red-soft); color: #ff737b; border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.master-rank { border-color: rgba(248, 186, 66, .5); background: rgba(248, 186, 66, .1); color: #ffd173; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #3a434d; border-radius: 11px; background: var(--surface-2); font-weight: 800; }
.hero { min-height: 260px; margin-top: 30px; padding: clamp(30px, 4vw, 54px); display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(120deg, rgba(24, 29, 35, .96), rgba(15, 18, 23, .94)), repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.02) 14px 15px); overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; width: 290px; height: 290px; right: -70px; top: -110px; border: 48px solid rgba(227, 59, 69, .07); border-radius: 50%; }
.hero h2 { margin: 8px 0 14px; max-width: 650px; font-size: clamp(34px, 5vw, 64px); line-height: .98; letter-spacing: -.055em; }
.hero h2 em { color: var(--red); font-style: normal; }
.hero p:not(.eyebrow) { max-width: 610px; color: #a6b0ba; line-height: 1.65; margin: 0; }
.primary-button { position: relative; z-index: 1; border: 0; border-radius: 11px; padding: 14px 16px; background: var(--red); color: white; font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 28px rgba(227, 59, 69, .2); }
.primary-button:hover { background: #f04953; transform: translateY(-1px); }
.primary-button span { padding-left: 18px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 16px; margin-top: 18px; background: rgba(17, 21, 26, .76); overflow: hidden; }
.stats article { padding: 20px 22px; border-right: 1px solid var(--line); }
.stats article:last-child { border: 0; }
.stats span, .stats small { display: block; color: var(--muted); }
.stats span { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.stats strong { display: block; margin: 8px 0 4px; font-size: 26px; letter-spacing: -.04em; }
.stats small { font-size: 11px; }
.stats .positive { color: var(--green); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .8fr); gap: 18px; margin-top: 18px; }
.panel { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: rgba(17, 21, 26, .76); }
.panel h3 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.03em; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; }
.panel-heading > a { color: #aab4be; font-size: 12px; border-bottom: 1px solid #4a545e; }
.activity-list { margin-top: 18px; }
.activity-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }
.activity-row > div strong, .activity-row > div span { display: block; }
.activity-row > div strong { font-size: 13px; }
.activity-row > div span, .activity-row time { color: var(--muted); font-size: 11px; margin-top: 3px; }
.action { width: fit-content; border-radius: 6px; padding: 5px 7px; font-family: ui-monospace, monospace; font-size: 10px; font-weight: 850; }
.action-update { background: rgba(248, 186, 66, .12); color: #f8ba42; }
.action-insert { background: rgba(85, 214, 158, .12); color: var(--green); }
.action-role { background: var(--red-soft); color: #ff737b; }
.guard-panel { background: linear-gradient(145deg, rgba(36, 17, 21, .95), rgba(17, 21, 26, .84)); }
.guard-panel ul { list-style: none; padding: 0; margin: 25px 0 0; display: grid; gap: 16px; }
.guard-panel li { display: flex; align-items: center; gap: 10px; color: #b4bec8; font-size: 12px; }
.guard-panel li i { width: 18px; height: 18px; border: 1px solid rgba(85, 214, 158, .35); border-radius: 50%; background: radial-gradient(circle, var(--green) 0 2px, transparent 3px); }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 430px); padding: 38px; border: 1px solid var(--line); border-radius: 20px; background: rgba(17, 21, 26, .9); box-shadow: 0 32px 90px rgba(0,0,0,.45); }
.login-brand { margin-bottom: 42px; }
.login-card h1 { margin: 7px 0 10px; font-size: 34px; letter-spacing: -.05em; }
.login-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.login-card form { display: grid; gap: 18px; margin-top: 26px; }
.login-card label { color: #bac3cc; font-size: 12px; font-weight: 700; }
.login-card input { width: 100%; height: 46px; margin-top: 8px; border: 1px solid #303943; border-radius: 10px; background: #0c0f13; color: white; padding: 0 13px; outline: 0; }
.login-card input:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.login-card button { width: 100%; margin-top: 4px; }
.login-note { display: block; margin-top: 22px; text-align: center; color: #68727c; }
.logout-button { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.logout-button:hover { color: white; border-color: #46515c; }
.flash-stack { display: grid; gap: 8px; margin-top: 20px; }
.flash { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: #cad3dc; background: var(--surface); font-size: 13px; }
.flash-success { border-color: rgba(85,214,158,.3); background: rgba(85,214,158,.08); color: #8ce5bb; }
.flash-error { border-color: rgba(227,59,69,.35); background: var(--red-soft); color: #ff8b91; }
.flash-info { border-color: rgba(92,160,255,.3); background: rgba(92,160,255,.08); color: #99c4ff; }
.login-card .flash { margin-top: 20px; }
.page-intro { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; margin: 46px 0 24px; }
.page-intro.compact { margin-top: 34px; }
.page-intro h2, .form-heading h2, .narrow-form h2 { margin: 7px 0 7px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.055em; }
.page-intro p:not(.eyebrow), .form-heading p, .narrow-form > p { margin: 0; color: var(--muted); line-height: 1.6; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.count-badge, .readonly-pill, .audit-pill, .chain-status { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: #b8c1ca; background: var(--surface); font-size: 11px; font-weight: 800; white-space: nowrap; }
.readonly-pill { border-color: rgba(85,214,158,.28); color: var(--green); }
.audit-pill { border-color: rgba(227,59,69,.3); color: #ff777e; background: var(--red-soft); }
.table-cards { display: grid; gap: 10px; }
.table-card[hidden] { display: none; }
.table-card { min-height: 78px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto 22px; align-items: center; gap: 15px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 13px; background: rgba(17,21,26,.72); }
.table-card:hover { border-color: #3d4752; background: var(--surface-2); transform: translateY(-1px); }
.table-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; background: var(--red-soft); color: var(--red); }
.table-card strong, .table-card small { display: block; }
.table-card strong { font-size: 14px; }
.table-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.table-meta { display: flex; gap: 20px; color: #7e8994; font: 11px ui-monospace, monospace; }
.card-arrow { color: #65717c; }
.empty-state { padding: 40px; border: 1px dashed #303943; border-radius: 14px; color: var(--muted); text-align: center; }
.back-link { color: #87929d; font-size: 12px; }
.back-link:hover { color: white; }
.table-workbench { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: #0c0f13; }
.table-workbench a { min-height: 34px; display: inline-grid; place-items: center; padding: 0 13px; border: 1px solid transparent; border-radius: 8px; color: #98a4af; font-size: 11px; font-weight: 750; }
.table-workbench a:hover { color: #fff; border-color: #35404a; background: var(--surface); }
.table-workbench a.active { color: #fff; border-color: rgba(227,59,69,.38); background: var(--red-soft); }
.search-row, .filter-bar { display: flex; gap: 9px; align-items: center; margin: 0 0 12px; }
.search-row input, .filter-bar input { min-width: 240px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #0c0f13; color: white; padding: 0 12px; outline: 0; }
.filter-bar input { min-width: 0; flex: 1; }
.search-row input:focus, .filter-bar input:focus { border-color: var(--red); }
.search-row button, .filter-bar button, .search-row a, .filter-bar a { height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: #b8c2cc; padding: 0 14px; font: inherit; font-size: 12px; cursor: pointer; }
.table-filter { flex-wrap: wrap; }
.table-filter-count { color: var(--muted); font-size: 11px; }
.data-panel { border: 1px solid var(--line); border-radius: 14px; background: rgba(17,21,26,.76); overflow: hidden; }
.data-scroll { overflow: auto; max-width: 100%; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { position: sticky; top: 0; z-index: 1; text-align: left; background: #151a20; color: #dfe6ec; padding: 13px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table th span, .data-table th small { display: block; }
.data-table th .column-sort { display: block; color: inherit; }
.data-table th .column-sort:hover span { color: #fff; }
.data-table th small { color: #65717c; font: 9px ui-monospace, monospace; margin-top: 3px; }
.data-table td { max-width: 310px; padding: 12px 14px; border-bottom: 1px solid #20262d; color: #b8c2cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.data-table tr:hover td { background: rgba(255,255,255,.018); color: #e7edf2; }
.data-table .null-cell { color: #616c76; font-style: italic; }
.secret-cell { color: #a36b70; }
.inline-editable-cell { cursor: text; }
.inline-editable-cell:focus-visible { outline: 1px solid var(--red); outline-offset: -2px; }
.inline-editable-cell.inline-cell-loading { color: var(--muted); }
.inline-editable-cell.inline-cell-active { min-width: 280px; padding: 7px; overflow: visible; white-space: normal; background: rgba(227,59,69,.045); }
.inline-editable-cell.inline-cell-saving { cursor: wait; }
.inline-cell-editor { display: grid; gap: 7px; }
.inline-cell-editor > input, .inline-cell-editor > textarea, .inline-cell-reason { width: 100%; min-width: 0; border: 1px solid #3b4651; border-radius: 7px; background: #090c0f; color: #fff; padding: 8px 9px; font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; outline: 0; }
.inline-cell-editor > textarea { min-height: 88px; resize: both; }
.inline-cell-editor > input:focus, .inline-cell-editor > textarea:focus, .inline-cell-reason:focus { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
.inline-cell-controls { display: grid; grid-template-columns: auto minmax(120px,1fr) auto auto; gap: 6px; align-items: center; }
.inline-cell-controls label { color: #9da8b2; font: 10px ui-monospace, monospace; }
.inline-cell-controls button { min-height: 30px; border: 1px solid #3a4650; border-radius: 7px; background: #151b21; color: #dce4eb; padding: 0 8px; font: inherit; font-size: 10px; cursor: pointer; }
.inline-cell-controls button[type="submit"] { border-color: rgba(85,214,158,.34); color: var(--green); }
.inline-cell-status { display: block; margin-top: 5px; color: #ff8b91; font: 10px/1.4 ui-monospace, monospace; white-space: normal; }
.inline-cell-error { overflow: visible !important; }
.structure-grid { min-width: 1880px; }
.structure-grid td { vertical-align: top; }
.structure-grid.structure-grid-editing [data-structure-row]:not(.structure-row-editing) { display: none; }
.structure-grid.structure-grid-saving { cursor: wait; }
.structure-edit-control { display: none; }
.structure-row-editing .structure-view { display: none; }
.structure-row-editing .structure-edit-control { display: block; }
.structure-row-editing td { min-width: 150px; max-width: none; overflow: visible; white-space: normal; background: rgba(248,186,66,.035); }
.structure-row-editing td:first-child, .structure-row-editing td:nth-child(10) { min-width: 52px; }
.structure-row-editing td:nth-child(2), .structure-row-editing td:nth-child(3), .structure-row-editing td:nth-child(4), .structure-row-editing td:nth-child(13), .structure-row-editing td:nth-child(14) { min-width: 210px; }
.structure-row-editing.structure-row-error td { background: rgba(227,59,69,.04); }
.structure-edit-control input, .structure-edit-control select, input.structure-edit-control, select.structure-edit-control { width: 100%; min-height: 34px; border: 1px solid #3b4651; border-radius: 7px; background: #090c0f; color: #fff; padding: 6px 8px; font: 10px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; outline: 0; }
.structure-edit-control input:focus, .structure-edit-control select:focus, input.structure-edit-control:focus, select.structure-edit-control:focus { border-color: #f8ba42; box-shadow: 0 0 0 2px rgba(248,186,66,.09); }
.structure-type-input { min-width: 190px; }
.structure-length-values input { min-width: 230px; }
.structure-default-controls, .structure-extra-controls, .structure-position-controls { min-width: 220px; gap: 6px; }
.structure-row-editing .structure-default-controls, .structure-row-editing .structure-extra-controls, .structure-row-editing .structure-position-controls, .structure-row-editing .structure-field { display: grid; }
.structure-field { gap: 5px; color: #89949e; font: 9px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; }
.structure-field > span { min-height: 12px; text-transform: uppercase; letter-spacing: .04em; }
.structure-check { align-items: center; gap: 7px; min-width: 118px; color: #dce4eb; font: 10px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer; }
.structure-row-editing .structure-check { display: flex; }
.structure-check input { width: auto; min-height: 0; margin: 0; padding: 0; accent-color: #f8ba42; }
.structure-check small { color: #89949e; font-size: 8px; }
.structure-generated-expression input { min-width: 250px; }
.structure-position-controls { grid-template-columns: minmax(135px, .85fr) minmax(170px, 1.15fr); }
.structure-position-controls select:disabled, .structure-generated-expression input:disabled, .structure-default-controls input:disabled { opacity: .4; cursor: not-allowed; }
.structure-edit-form { min-width: 220px; }
.structure-row-editing .structure-edit-form { display: grid; gap: 6px; }
.structure-edit-form > input { width: 100%; min-height: 32px; border: 1px solid #3b4651; border-radius: 7px; background: #090c0f; color: #fff; padding: 0 8px; font: inherit; font-size: 10px; }
.structure-edit-form > div { display: flex; gap: 6px; }
.structure-edit-form button { min-height: 30px; border: 1px solid #3a4650; border-radius: 7px; background: #151b21; color: #dce4eb; padding: 0 8px; font: inherit; font-size: 10px; cursor: pointer; }
.structure-edit-form button:disabled { opacity: .45; cursor: wait; }
.structure-edit-form button[type="submit"] { border-color: rgba(85,214,158,.34); color: var(--green); }
.structure-edit-form small { min-height: 14px; color: #ff9da3; white-space: normal; }
.actions-cell { overflow: visible !important; font-family: inherit !important; }
.small-button, .danger-link { display: inline-block; border: 1px solid #37414b; border-radius: 7px; padding: 6px 8px; color: #ccd4dc; font-size: 10px; cursor: pointer; }
.danger-link { color: #ff7c83; margin-top: 6px; }
.danger-form { width: 270px; margin-top: 9px; padding: 12px; border: 1px solid rgba(227,59,69,.3); border-radius: 9px; background: #171114; display: grid; gap: 9px; }
.danger-form label { color: #d5a5a8; font-size: 10px; }
.danger-form input { width: 100%; margin-top: 4px; height: 34px; border: 1px solid #4c2d32; border-radius: 7px; background: #0d0a0b; color: white; padding: 0 8px; }
.danger-form button { border: 0; border-radius: 7px; padding: 8px; background: #b72734; color: white; cursor: pointer; }
.pagination { min-height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; color: var(--muted); font-size: 11px; }
.pagination div { display: flex; gap: 14px; }
.pagination a { color: #c1cad3; }
.form-panel { margin-top: 34px; border: 1px solid var(--line); border-radius: 16px; background: rgba(17,21,26,.78); padding: clamp(22px, 4vw, 36px); }
.form-panel.narrow-form { max-width: 620px; }
.form-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.field-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.field-card { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #0e1115; }
.field-label { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.field-label label { color: #dce3e9; font-size: 12px; font-weight: 750; }
.field-label code { color: #727e89; font-size: 9px; }
.field-card > input, .field-card > textarea, .profile-grid input, .profile-grid select, .stack-form input, .stack-form select, .stack-form textarea, .reason-field textarea { width: 100%; border: 1px solid #2d3640; border-radius: 8px; background: #090c0f; color: white; padding: 10px 11px; outline: 0; font: 12px ui-monospace, monospace; }
.field-card > input:focus, .field-card > textarea:focus, .stack-form input:focus, .reason-field textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.field-card > input:disabled, .field-card > textarea:disabled { opacity: .35; }
.field-options { min-height: 22px; display: flex; gap: 15px; align-items: flex-end; margin-top: 8px; color: #7f8b96; font-size: 10px; }
.reason-field { display: block; margin-top: 22px; color: #d9e0e6; font-size: 12px; font-weight: 750; }
.reason-field span { color: #747f89; font-weight: 500; margin-left: 6px; }
.reason-field textarea { min-height: 82px; display: block; margin-top: 8px; resize: vertical; font-family: inherit; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 20px; }
.form-actions > a { color: var(--muted); font-size: 12px; }
.sql-panel { border: 1px solid var(--line); border-radius: 14px; background: #0d1014; overflow: hidden; }
.sql-workbench { margin-bottom: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(17,21,26,.76); }
.sql-workbench h3 { margin: 5px 0 0; font-size: 18px; }
.sql-workbench-note { margin: 12px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.sql-workbench-actions, .sql-workbench-list-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sql-workbench-actions button, .sql-workbench-list-actions button { min-height: 36px; border: 1px solid #37414b; border-radius: 8px; padding: 0 11px; background: #0c0f13; color: #ccd4dc; font: inherit; font-size: 11px; cursor: pointer; }
.sql-workbench-actions button:hover, .sql-workbench-list-actions button:hover { border-color: #56616d; color: #fff; }
.sql-workbench-actions button small { margin-left: 5px; color: var(--muted); font-size: 9px; }
.sql-completion { margin-top: 12px; padding: 11px; border: 1px solid #303943; border-radius: 9px; background: #090c0f; }
.sql-completion p { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.sql-completion [role="listbox"] { display: flex; flex-wrap: wrap; gap: 6px; }
.sql-completion [role="option"] { min-height: 31px; border: 1px solid #34404b; border-radius: 7px; padding: 0 9px; background: #11161c; color: #cdd7df; font: 700 10px/1 monospace; cursor: pointer; }
.sql-completion [role="option"]:hover, .sql-completion [role="option"]:focus-visible { border-color: #e33b45; color: #fff; outline: none; }
.sql-workbench-lists { display: grid; grid-template-columns: minmax(240px,1fr) auto; gap: 9px 12px; align-items: end; margin-top: 14px; }
.sql-workbench-lists label { color: #dbe2e8; font-size: 11px; font-weight: 750; }
.sql-workbench-lists label small { margin-left: 6px; color: var(--muted); font-weight: 500; }
.sql-workbench-lists select { width: 100%; height: 38px; display: block; margin-top: 6px; border: 1px solid #303943; border-radius: 8px; background: #090c0f; color: #dfe6ec; padding: 0 9px; }
.sql-workbench-status { min-height: 17px; margin: 10px 0 0; color: #9cc8ff; font-size: 11px; }
.query-export-menu { display: inline-block; position: relative; }
.query-export-menu summary { min-height: 36px; display: inline-flex; align-items: center; border: 1px solid #37414b; border-radius: 8px; padding: 0 11px; color: #ccd4dc; font-size: 11px; cursor: pointer; list-style: none; }
.query-export-menu summary::-webkit-details-marker { display: none; }
.query-export-menu[open] > div { min-width: 190px; display: grid; gap: 6px; position: absolute; z-index: 8; right: 0; bottom: calc(100% + 6px); padding: 8px; border: 1px solid #37414b; border-radius: 9px; background: #0c0f13; box-shadow: 0 12px 28px rgba(0,0,0,.38); }
.query-export-menu[open] > div button { width: 100%; margin: 0; }
.binary-field-list { display: grid; gap: 14px; }
.binary-field-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(17,21,26,.76); }
.binary-field-actions, .binary-destructive-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.binary-field-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.binary-upload-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.binary-upload-form input[type="file"] { width: 100%; margin-top: 6px; }
.binary-destructive-actions form { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.binary-destructive-actions input { min-height: 34px; border: 1px solid #303943; border-radius: 7px; background: #090c0f; color: #dfe6ec; padding: 0 9px; }
.muted-note { color: var(--muted); font-size: 11px; }
.sql-panel textarea { width: 100%; min-height: 210px; padding: 20px; border: 0; border-bottom: 1px solid var(--line); outline: 0; resize: vertical; background: transparent; color: #e2eaf0; font: 13px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.sql-panel > div { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
.sql-panel small { color: var(--muted); }
.master-sql-panel { border-color: rgba(248, 186, 66, .32); }
.sql-reason { display: block; padding: 14px 16px; color: #dbe2e8; font-size: 12px; font-weight: 750; border-bottom: 1px solid var(--line); }
.sql-reason small { margin-left: 7px; font-weight: 500; }
.sql-panel .sql-reason textarea { min-height: 76px; margin-top: 9px; padding: 11px 12px; border: 1px solid #333d47; border-radius: 8px; background: #090c0f; }
.sql-panel .inline-check { display: flex; gap: 8px; align-items: center; padding: 12px 16px; color: #dbe2e8; font-size: 12px; border-bottom: 1px solid var(--line); }
.sql-panel .inline-check small { margin-left: 3px; font-weight: 500; }
.execution-summary { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 13px 15px; border: 1px solid rgba(85,214,158,.28); border-radius: 10px; background: rgba(85,214,158,.07); color: #bdebd5; font-size: 12px; }
.execution-summary strong { color: var(--green); }
.result-panel { margin-top: 16px; }
.result-panel .panel-heading { padding: 17px; }
.batch-result-list { display: grid; gap: 16px; margin-top: 16px; }
.batch-result { margin-top: 0; overflow: hidden; }
.batch-result-failed { border-color: rgba(239, 59, 74, .45); }
.batch-statement { margin: 0; padding: 13px 17px; overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #090b0e; color: #b9c5cf; font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.batch-error { display: flex; gap: 12px; padding: 13px 17px; background: rgba(239, 59, 74, .08); color: #ffb8be; font-size: 12px; }
.batch-row-count { margin: 0; padding: 9px 17px; color: var(--muted); font-size: 10px; }
.chain-status.ok { border-color: rgba(85,214,158,.32); color: var(--green); }
.chain-status.broken { border-color: rgba(227,59,69,.38); color: #ff737b; }
.audit-list { display: grid; gap: 9px; }
.audit-entry { border: 1px solid var(--line); border-radius: 12px; background: rgba(17,21,26,.76); overflow: hidden; }
.audit-entry > summary { min-height: 64px; display: grid; grid-template-columns: 52px 92px minmax(130px,1fr) minmax(160px,1.2fr) auto 60px; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.audit-entry > summary::-webkit-details-marker { display: none; }
.audit-entry > summary > span strong, .audit-entry > summary > span small { display: block; }
.audit-entry > summary > span strong { font-size: 12px; }
.audit-entry > summary > span small, .audit-entry time { color: var(--muted); font-size: 10px; margin-top: 3px; }
.audit-id { color: #65707a; font: 10px ui-monospace, monospace; }
.status-dot { text-align: center; padding: 5px 6px; border-radius: 6px; font-size: 9px; font-weight: 850; }
.status-dot.success { background: rgba(85,214,158,.1); color: var(--green); }
.status-dot.failed { background: var(--red-soft); color: #ff747d; }
.audit-detail { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 12px; padding: 16px; border-top: 1px solid var(--line); background: #0c0f12; }
.audit-detail h4 { margin: 0 0 7px; color: #8b96a1; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.audit-detail p { color: #c5ced6; font-size: 12px; }
.audit-detail pre, .audit-detail code { max-height: 320px; overflow: auto; display: block; padding: 12px; border: 1px solid #222a32; border-radius: 8px; background: #090b0e; color: #aeb8c1; font: 10px/1.55 ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; }
.audit-summary, .audit-statement { grid-column: 1 / -1; }
.audit-summary { padding: 13px 15px; border: 1px solid rgba(92,160,255,.28); border-radius: 9px; background: rgba(92,160,255,.07); }
.audit-summary strong, .audit-summary small { display: block; }
.audit-summary strong { color: #dceaff; font-size: 13px; }
.audit-summary small { margin-top: 5px; color: #90a4ba; font: 10px ui-monospace, monospace; }
.filter-bar .export-button { border-color: rgba(248,186,66,.35); color: #ffd173; }
.users-grid { grid-template-columns: minmax(0,1.3fr) minmax(310px,.7fr); margin-top: 34px; }
.user-list { display: grid; margin-top: 18px; }
.user-list > .user-row { display: grid; grid-template-columns: 38px 1fr auto 15px; gap: 11px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.user-row-master { background: linear-gradient(90deg, rgba(248,186,66,.06), transparent); }
.user-row-protected { color: #8c969f; cursor: not-allowed; }
.user-list strong, .user-list small { display: block; }
.user-list small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.stack-form { display: grid; gap: 14px; margin-top: 20px; }
.stack-form label, .profile-grid label { color: #b9c3cc; font-size: 11px; font-weight: 700; }
.stack-form input, .stack-form select, .stack-form textarea, .profile-grid input, .profile-grid select { display: block; margin-top: 6px; font-family: inherit; }
.stack-form textarea { min-height: 68px; resize: vertical; }
.stack-form label > small { display: block; margin-top: 6px; color: var(--muted); font-weight: 500; line-height: 1.45; }
.secondary-button { border: 1px solid #3b4651; border-radius: 11px; padding: 13px 15px; background: var(--surface-2); color: #dce4eb; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.secondary-button:hover { border-color: #697785; color: #fff; }
.credential-modal { width: min(92vw, 560px); padding: 0; border: 1px solid rgba(248,186,66,.38); border-radius: 18px; background: #11151a; color: var(--text); box-shadow: 0 34px 100px rgba(0,0,0,.72); }
.credential-modal::backdrop { background: rgba(2,4,7,.82); backdrop-filter: blur(6px); }
.credential-modal-card { padding: 28px; }
.credential-modal-card h2 { margin: 7px 0 10px; font-size: 28px; }
.credential-modal-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.credential-modal-card > label { display: block; margin-top: 16px; color: #cbd4dc; font-size: 11px; font-weight: 750; }
.credential-copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 7px; }
.credential-copy-row input { min-width: 0; height: 42px; border: 1px solid #323c46; border-radius: 8px; background: #090c0f; color: #fff; padding: 0 11px; font: 12px ui-monospace, monospace; }
.credential-copy-row button { border: 1px solid #3b4651; border-radius: 8px; background: var(--surface-2); color: #dce4eb; padding: 0 12px; cursor: pointer; }
.credential-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.copy-status { display: block; min-height: 18px; margin-top: 10px; color: var(--green); font-size: 11px; text-align: right; }
.policy-note { margin: 12px 0 0; padding: 11px 12px; border: 1px solid #303943; border-radius: 9px; background: #0d1115; color: #aeb8c2; font-size: 11px; line-height: 1.55; }
.policy-note strong { color: #e1e7ec; }
.policy-note a { color: #ffd173; }
.backup-error-panel { margin: 34px 0 18px; padding: 18px 20px; border: 1px solid rgba(227,59,69,.45); border-radius: 14px; background: rgba(227,59,69,.1); }
.backup-error-panel h3 { margin: 5px 0 10px; }
.backup-error-panel p { margin: 0; color: #f0b8bc; font-size: 12px; line-height: 1.6; }
.backup-error-panel code { display: inline-block; margin-top: 5px; color: #ffd1d4; word-break: break-word; }
.backup-log-panel { margin-top: 18px; }
.backup-event-list { display: grid; gap: 8px; margin-top: 14px; }
.backup-event { border: 1px solid var(--line); border-radius: 10px; background: #0d1115; overflow: hidden; }
.backup-event-failed { border-color: rgba(227,59,69,.35); }
.backup-event > summary { display: grid; grid-template-columns: 62px minmax(150px,1fr) minmax(100px,.7fr) auto; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
.backup-event > div { padding: 12px 14px; border-top: 1px solid var(--line); color: #b8c2cc; font-size: 12px; }
.backup-event > div p { margin: 5px 0; line-height: 1.55; }
.backup-event > div code { color: #ffb4b9; word-break: break-word; }
.backup-event time { color: var(--muted); font-size: 10px; }
.master-account-panel { border-color: rgba(248,186,66,.35); }
.master-notice { display: flex; flex-direction: column; gap: 5px; margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(248,186,66,.35); border-radius: 10px; background: rgba(248,186,66,.07); color: #c9b47f; font-size: 12px; line-height: 1.5; }
.master-notice strong { color: #ffd173; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 24px; }
.toggle-label { display: flex; align-items: center; gap: 9px; padding-top: 24px; }
.toggle-label input { width: auto; margin: 0; }
.permission-heading { margin-top: 32px; }
.permission-heading h3 { margin-bottom: 4px; }
.permission-heading p { color: var(--muted); font-size: 11px; }
.permission-heading-actions { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.permission-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.permission-actions button { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: #d8e0e7; padding: 8px 11px; font: inherit; font-size: 11px; cursor: pointer; }
.permission-actions button:hover { border-color: var(--red); color: #fff; }
.permission-table-wrap { max-height: 470px; overflow: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; }
.permission-table { width: 100%; border-collapse: collapse; }
.permission-table th, .permission-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; font-size: 11px; }
.permission-table th { position: sticky; top: 0; background: #151a20; color: #87939f; }
.permission-table th:first-child, .permission-table td:first-child { text-align: left; }
.error-card .primary-button { display: inline-block; margin-top: 22px; }
.empty-cell { padding: 40px !important; text-align: center; color: var(--muted) !important; }
@media (max-width: 1050px) { .stats { grid-template-columns: repeat(2, 1fr); } .stats article:nth-child(2) { border-right: 0; } .stats article:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .content-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .app-shell { display: block; } .sidebar { position: relative; width: 100%; height: auto; padding: 18px; } .mobile-menu-toggle { display: block; position: absolute; top: 20px; right: 18px; } .sidebar nav, .sidebar-bottom { display: none; } .sidebar.mobile-open nav { display: grid; margin-top: 22px; } .sidebar.mobile-open .sidebar-bottom { display: grid; margin-top: 18px; } main { padding: 22px 16px 40px; } .hero, .page-intro, .form-heading { align-items: flex-start; flex-direction: column; } .stats { grid-template-columns: 1fr 1fr; } .activity-row { grid-template-columns: 70px 1fr; } .activity-row time { grid-column: 2; } .rank { display: none; } .table-card { grid-template-columns: 42px 1fr 18px; } .table-meta { display: none; } .field-grid, .profile-grid, .sql-workbench-lists { grid-template-columns: 1fr; } .audit-entry > summary { grid-template-columns: 44px 80px 1fr 56px; } .audit-entry > summary > span:nth-of-type(4), .audit-entry time { display: none; } .audit-detail { grid-template-columns: 1fr; } .filter-bar { flex-wrap: wrap; } .filter-bar input { flex: 1 1 140px; } }