:root {
  --bg: #0f1220;
  --surface: #151a2e;
  --panel: #1c2140;
  --text: #e9ecf7;
  --muted: #9aa3c7;
  --accent: #6ea8fe;
  --accent-2: #4dd0e1;
  --danger: #ff7070;
  --border: #2a315b;
  --code: #0b0e1a;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: linear-gradient(180deg, #0f1220, #0f1326 40%, #0f1220);
  color: var(--text);
}

.app-header, .app-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: rgba(21,26,46,.7); position: sticky; top: 0; backdrop-filter: blur(8px);
  z-index: 20;
}
.app-footer { border-top: 1px solid var(--border); border-bottom: none; top: auto; bottom: 0; background: transparent; justify-content: center; }
.app-header h1 { margin: 0; font-size: 18px; letter-spacing: .3px }

.pill { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); }
.pill.muted { color: var(--muted) }

.view { display: none; padding: 18px }
.view.active { display: block }

.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 1000px; margin: 30px auto }
.tile {
  background: radial-gradient(120% 160% at 0% 0%, #1c2140 0%, #14182d 60%, #0d1124 100%);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.tile h2 { margin: 0 0 6px 0 }
.tile p { margin: 0 0 12px 0; color: var(--muted) }

.btn {
  appearance: none; border: 1px solid var(--border); color: var(--text);
  background: linear-gradient(180deg, #242a50, #1a2040);
  padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: border-color .15s ease;
}
.btn:hover { border-color: #3a4380 }
.btn.primary {
  background: linear-gradient(180deg, #6ea8fe, #5986ff);
  border-color: #6ea8fe; color: #0a1330; font-weight: 600;
}
.btn.ghost { background: transparent }
.btn.block { width: 100% }
.row { display: flex; gap: 10px; align-items: center; margin-top: 10px }
.spacer { flex: 1 }

.subnav { display: flex; align-items: center; gap: 12px; padding: 6px 2px 12px 2px }

.layout { display: grid; gap: 16px; grid-template-columns: 260px 1fr 270px; align-items: start }
.left, .right { position: sticky; top: 64px }
.left { align-self: start }
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; box-shadow: var(--shadow);
}
.panel > summary { cursor: pointer; font-weight: 600; margin: -10px -12px 10px -12px; padding: 10px 12px; border-bottom: 1px solid var(--border) }

.quick-grid { display: grid; gap: 8px }
.quick-grid .btn { text-align: left }

.code {
  background: var(--code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px; white-space: pre; overflow: auto; max-height: 60vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.import-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; margin-bottom: 10px; align-items: center }
.file input { display: none }
.file span { display: inline-block; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--border); cursor: pointer }
.or { color: var(--muted) }
textarea#jsonInput { width: 100%; min-height: 140px; border-radius: var(--radius-sm); padding: 10px; border: 1px solid var(--border); background: #0b0f22; color: var(--text) }

.switch { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted) }

/* --- Form grid --- */
.form-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.form-grid label {
  display: grid; gap: 8px;
  grid-template-areas:
    "title"
    "input"
    "hint";
}
.form-grid label > input { grid-area: input; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: #0b0f22; color: var(--text) }
.form-grid label > small { grid-area: hint; color: var(--muted); line-height: 1.5 }
.form-grid label > .title { grid-area: title; font-weight: 600; color: var(--text); opacity: .95 }

/* Checkbox row */
.form-grid label.check {
  grid-column: 1 / -1;
  grid-template-columns: auto auto;
  grid-template-areas:
    "title input"
    "hint  hint";
  align-items: center;
}
.form-grid label.check > input { justify-self: start; margin-left: 10px }
.form-grid .check small { margin-top: 4px }

/* Overlay */
.overlay {
  position: fixed; inset: 0; background: rgba(8,10,24,.72);
  display: none; align-items: center; justify-content: center; z-index: 50;
}
.overlay[aria-hidden="false"] { display: flex }
.overlay-card {
  width: min(1100px, 94vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr auto; max-height: 84vh;
}
.overlay-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border) }
.overlay-content { padding: 12px 14px }
.overlay-content.hidden { display: none }
.loading { padding: 24px; text-align: center; color: var(--muted) }

.filter-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px }
.filter-row input { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: #0b0f22; color: var(--text) }
.table-wrap { overflow: auto; max-height: 60vh; border: 1px solid var(--border); border-radius: 10px }
table.catalog { width: 100%; border-collapse: collapse; font-size: 13px }
table.catalog th, table.catalog td { padding: 8px 10px; border-bottom: 1px solid #23284a; vertical-align: top }
table.catalog tr { cursor: pointer }
table.catalog tr:hover { background: rgba(78, 119, 255, .12) }
table.catalog td code { color: #b8c4ff }

.muted { color: var(--muted) }
.hint { color: var(--muted); margin-top: 10px }
.tips { margin: 8px 0 0 18px }