.variable-manager { overflow: visible; padding: clamp(1rem, 3vw, 2rem); }
.variable-toolbar, .variable-tools, .variable-filterbar, .variable-dialog-head { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.variable-toolbar { justify-content: space-between; margin-bottom: 1rem; }
.variable-count { margin: 0; }
.variable-filterbar { margin-bottom: 1.25rem; }
.variable-filterbar input { flex: 1 1 14rem; min-width: 0; }
.variable-filterbar select { flex: 0 1 14rem; }
.variable-database-banner { background: var(--accent-soft); border-radius: 8px; padding: .65rem 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.variable-database-banner .btn { border: 0; background: transparent; text-decoration: underline; }
.variable-list { list-style: none; margin: 0; padding: 0; }
.variable-row, .variable-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6rem, .42fr) 44px; gap: .8rem; align-items: center; }
.variable-columns { color: var(--muted); font-size: .8rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.variable-row { min-height: 78px; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.variable-name { display: flex; gap: .75rem; align-items: center; min-width: 0; }
.variable-name > div { min-width: 0; }
.variable-name code { overflow-wrap: anywhere; font-size: .9rem; font-weight: 600; }
.variable-kind { color: var(--accent); font-family: monospace; flex-shrink: 0; }
.variable-source { display: block; margin-top: .2rem; overflow-wrap: anywhere; }
.variable-mask { letter-spacing: .16em; }
.variable-actions { position: relative; }
.variable-actions summary { cursor: pointer; list-style: none; min-height: 44px; display: grid; place-items: center; border-radius: 8px; font-size: 1.5rem; }
.variable-actions summary::-webkit-details-marker { display: none; }
.variable-actions summary:hover, .variable-actions[open] summary { background: var(--idle-soft); }
.variable-menu { position: absolute; right: 0; top: 100%; z-index: 20; display: grid; min-width: 190px; padding: .35rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.variable-menu .btn { border: 0; justify-content: flex-start; text-align: left; }
.variable-footer { margin: 1.25rem 0 0; }
.variable-dialog { color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1rem, 3vw, 2rem); width: min(42rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); overflow: auto; box-shadow: 0 24px 80px #0006; }
.variable-dialog.wide { width: min(60rem, calc(100vw - 1.5rem)); }
.variable-dialog::backdrop { background: #0009; }
.variable-dialog-head { justify-content: space-between; flex-wrap: nowrap; }
.variable-dialog-head h2 { margin: 0; }
.variable-dialog-head .btn { flex-shrink: 0; min-width: 44px; }
.variable-dialog .notice { overflow-wrap: anywhere; }
.variable-dialog form { max-width: none; }
.variable-dialog input, .variable-dialog textarea, .variable-dialog select { max-width: 100%; }
.variable-raw { white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 2; line-height: 1.65; }
.variable-preview { padding: .75rem; border-radius: 8px; background: var(--idle-soft); }
.variable-preview-keys { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .5rem; max-height: 8rem; overflow: auto; }
.variable-check { display: flex; align-items: flex-start; gap: .75rem; min-height: 44px; cursor: pointer; }
.variable-check input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; margin-top: 2px; }
.shared-variable-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.shared-variable-row code { overflow-wrap: anywhere; }
.variable-db-options { display: flex; flex-wrap: wrap; gap: .75rem; }
.variable-release-note { margin: 1rem 0; }
@media (max-width: 559px) {
  .variable-tools { width: 100%; }
  .variable-tools .btn { flex: 1 1 auto; font-size: .85rem; }
  .variable-columns { display: none; }
  .variable-row { grid-template-columns: minmax(0, 1fr) 44px; gap: .2rem .6rem; }
  .variable-mask { grid-row: 2; padding-left: 1.6rem; }
  .variable-actions { grid-column: 2; grid-row: 1 / 3; }
  .variable-dialog .btn { min-height: 44px; }
}

/* Keep service navigation visible synchronously on narrow Variables screens.
   Resize-event scrolling alone can run after a viewport has already changed. */
@media (max-width: 900px) {
  main:has(.variable-manager) > .tabs { flex-wrap: wrap; overflow: visible; gap: .25rem .5rem; }
  main:has(.variable-manager) > .tabs a { flex: 0 0 auto; }
}