/* ============================================================================
   Nightfall City
   A dark, rain-on-glass control room. The city is the loud thing; the UI is
   quiet, and never competes with the map for attention.
   ========================================================================= */

:root {
  --bg: #0a0c14;
  --bg-2: #0e1220;
  --panel: #131829;
  --panel-2: #182036;
  --line: #232a44;
  --line-soft: #1b2136;

  --ink: #e8ecf8;
  --ink-2: #a3abc9;
  --ink-3: #6c7599;

  --neon: #5fb4d8;
  --neon-2: #e0629b;
  --gold: #e0a93f;
  --good: #5fd39a;
  --warn: #e0a93f;
  --bad: #e8697f;
  --chain: #a78bfa;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 20% -10%, #17203a 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 110%, #241a33 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 620; letter-spacing: -0.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--neon); }

::selection { background: rgba(95, 180, 216, 0.3); }

/* --------------------------------------------------------------- boot */

.boot {
  position: fixed; inset: 0; display: grid; place-content: center; gap: 18px;
  justify-items: center; color: var(--ink-3);
}
.boot__lamp {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe9a8, var(--gold) 45%, #7a4a12);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }

/* --------------------------------------------------------------- layout */

.app { min-height: 100%; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  background: rgba(10, 12, 20, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.brand { display: flex; align-items: baseline; gap: 9px; }
.brand__mark { font-size: 20px; filter: drop-shadow(0 0 10px rgba(224, 169, 63, .5)); }
.brand__name { font-weight: 700; letter-spacing: -0.02em; }
.brand__tag { font-size: 11px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }

.topbar__spacer { flex: 1; }

.clock {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  padding: 4px 10px; border: 1px solid var(--line-soft); border-radius: 999px;
  background: rgba(255, 255, 255, .02); white-space: nowrap;
}

.nav { display: flex; gap: 2px; overflow-x: auto; }
.nav button {
  position: relative;
  padding: 7px 13px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 13.5px; font-weight: 550; white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav button:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.nav button[aria-current="page"] { color: var(--ink); background: var(--panel-2); }
.nav .badge {
  position: absolute; top: 2px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; font-family: var(--mono);
  color: #17090f; background: var(--neon-2); border-radius: 999px;
}

.conn { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.conn__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.conn[data-state="live"] .conn__dot { background: var(--good); box-shadow: 0 0 8px var(--good); }
.conn[data-state="down"] .conn__dot { background: var(--bad); }

.main { flex: 1; padding: 18px; max-width: 1560px; width: 100%; margin: 0 auto; }

/* --------------------------------------------------------------- surfaces */

.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 16px;
}
.card--flush { padding: 0; overflow: hidden; }
.card__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.card__title { font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.card__sub { font-size: 12px; color: var(--ink-3); }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
@media (max-width: 1080px) { .grid--sidebar { grid-template-columns: 1fr; } }

.stack { display: grid; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink);
  font-size: 13.5px; font-weight: 560; cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s, opacity .15s;
}
.btn:hover:not(:disabled) { background: #1f2740; border-color: #2f3a5c; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: linear-gradient(180deg, #2f7fa6, #245f80); border-color: #3a90ba; color: #eaf7ff; }
.btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, #3790ba, #2a6d92); }
.btn--approve { background: linear-gradient(180deg, #2f7d5c, #235f47); border-color: #3a9a72; }
.btn--danger { background: linear-gradient(180deg, #7d3140, #5e2431); border-color: #9a3d4e; }
.btn--ghost { background: transparent; }
.btn--chain { border-color: #4c3f80; background: #241d3d; color: #d9cdff; }
.btn--chain:hover:not(:disabled) { background: #2c2450; }
.btn--sm { padding: 5px 10px; font-size: 12.5px; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------- forms */

.field { display: grid; gap: 5px; }
.field > label { font-size: 12px; color: var(--ink-2); font-weight: 560; }
.field__hint { font-size: 11.5px; color: var(--ink-3); }
.input, .select {
  width: 100%; padding: 9px 11px;
  background: #0c1020; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(95, 180, 216, .14); }
.input::placeholder { color: var(--ink-3); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--line); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--neon); cursor: pointer; border: 2px solid #0c1020; }
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid #0c1020; border-radius: 50%; background: var(--neon); cursor: pointer; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { display: none; }
.switch__track { position: relative; width: 38px; height: 21px; flex: none; border-radius: 999px; background: #232a44; border: 1px solid var(--line); transition: background .18s, border-color .18s; }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink-3); transition: transform .18s, background .18s; }
.switch input:checked + .switch__track { background: #2f7fa6; border-color: #3a90ba; }
.switch input:checked + .switch__track::after { transform: translateX(17px); background: #eaf7ff; }
.switch__text { font-size: 13.5px; }
.switch__text small { display: block; color: var(--ink-3); font-size: 11.5px; }

/* choice tiles (personality, appearance, district) */
.tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tile {
  text-align: left; padding: 11px 12px; cursor: pointer;
  background: #0f1424; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  color: var(--ink-2); transition: border-color .15s, background .15s, color .15s;
}
.tile:hover { border-color: #33405f; color: var(--ink); }
.tile[aria-pressed="true"] { border-color: var(--neon); background: #10202e; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(95,180,216,.25); }
.tile__name { font-weight: 600; font-size: 13.5px; color: inherit; display: flex; align-items: center; gap: 6px; }
.tile__desc { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.tile__glyph { font-size: 17px; }

/* --------------------------------------------------------------- pills / chips */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 560;
  background: rgba(255, 255, 255, .05); color: var(--ink-2);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.chip--chain { background: rgba(167, 139, 250, .12); color: #cbbaff; border-color: #40356b; }
.chip--onchain { background: rgba(167, 139, 250, .14); color: #cbbaff; border-color: #40356b; }
.chip--warn { background: rgba(224, 169, 63, .12); color: #f0cd85; border-color: #4d3d1c; }
.chip--bad { background: rgba(232, 105, 127, .12); color: #f4a3b2; border-color: #4d2530; }
.chip--good { background: rgba(95, 211, 154, .12); color: #96e7c1; border-color: #1f4d3a; }
.chip--ink { font-family: var(--mono); font-size: 11px; }

.credits { font-family: var(--mono); font-weight: 600; color: var(--gold); }

/* --------------------------------------------------------------- agent strip */

.agents { display: flex; gap: 8px; flex-wrap: wrap; }
.agent-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 7px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.agent-pill:hover { border-color: #33405f; }
.agent-pill[aria-pressed="true"] { border-color: var(--neon); background: #142233; }
.agent-pill__glyph {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; font-size: 14px; background: #0d1222; border: 1px solid var(--line);
}
.agent-pill__name { font-size: 13px; font-weight: 560; }
.agent-pill__meta { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.agent-pill--waiting .agent-pill__glyph { animation: blink 1.6s ease-in-out infinite; border-color: var(--neon-2); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* --------------------------------------------------------------- city map */

.map { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: #070a12; border: 1px solid var(--line-soft); }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__label { font-family: var(--mono); font-size: 11px; fill: rgba(232, 236, 248, .55); pointer-events: none; }
.map__count { font-family: var(--mono); font-size: 10px; fill: rgba(232, 236, 248, .35); pointer-events: none; }

.dot { cursor: pointer; }
.dot__core { transition: transform .2s; transform-box: fill-box; transform-origin: center; }
.dot:hover .dot__core { transform: scale(1.35); }
.dot__ring { fill: none; stroke-width: 1.2; opacity: .8; }
.dot--working .dot__ring { animation: ripple 1.9s ease-out infinite; }
@keyframes ripple { 0% { r: 5; opacity: .8; } 100% { r: 13; opacity: 0; } }
.dot--mine .dot__core { stroke: var(--neon); stroke-width: 1.6; }
.dot--waiting .dot__core { stroke: var(--neon-2); stroke-width: 2; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }.legend span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 9px; height: 9px; border-radius: 50%; }

/* --------------------------------------------------------------- feed */

.feed { display: flex; flex-direction: column; }
.feed__item {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
  animation: slide-in .28s ease-out;
}
.feed__item:last-child { border-bottom: 0; }
@keyframes slide-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.feed__icon { display: grid; place-items: center; font-size: 15px; height: 26px; }
.feed__title { font-size: 13.5px; font-weight: 550; }
.feed__why { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-top: 1px; }
.feed__narration {
  font-size: 13px; color: #cfd8f0; line-height: 1.5; margin-top: 4px;
  padding-left: 9px; border-left: 2px solid var(--neon-2); font-style: italic;
}
.feed__meta { font-size: 11px; color: #4d5573; font-family: var(--mono); margin-top: 3px; }
.feed__item--chain { background: linear-gradient(90deg, rgba(167, 139, 250, .09), transparent 60%); }
.feed__item--decision .feed__title { color: #f0cd85; }
.feed__item--city .feed__title { color: var(--ink-2); font-style: italic; }
.feed--scroll { max-height: 620px; overflow-y: auto; scrollbar-width: thin; }

.filters { display: flex; gap: 4px; }
.filters button {
  padding: 4px 9px; font-size: 11.5px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-soft); color: var(--ink-3);
}
.filters button[aria-pressed="true"] { color: var(--ink); border-color: var(--neon); background: #10202e; }

/* --------------------------------------------------------------- inbox */

.decision {
  border: 1px solid var(--line-soft); border-left: 3px solid var(--neon-2);
  border-radius: var(--r-sm); padding: 13px 14px;
  background: linear-gradient(180deg, #16192b, #10142500);
  animation: slide-in .3s ease-out;
}
.decision--onchain { border-left-color: var(--chain); background: linear-gradient(180deg, #191432, #10142500); }
.decision--urgent { border-left-color: var(--warn); }
.decision__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.decision__title { font-size: 14.5px; font-weight: 600; }
.decision__summary { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.decision__meta { font-size: 11px; color: var(--ink-3); font-family: var(--mono); margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.decision__actions { display: flex; gap: 8px; margin-top: 12px; }
.countdown { font-family: var(--mono); font-size: 11.5px; color: var(--warn); }

/* --------------------------------------------------------------- market */

.listing {
  display: grid; gap: 8px; padding: 13px;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: #0f1424; transition: border-color .15s;
}
.listing:hover { border-color: #2b3450; }
.listing__top { display: flex; align-items: flex-start; gap: 8px; }
.listing__name { font-weight: 600; font-size: 14px; }
.listing__blurb { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.listing__price { font-family: var(--mono); font-weight: 650; color: var(--gold); }
.listing--discount { border-color: #4d3d1c; background: linear-gradient(180deg, #1b1608, #0f1424); }

/* --------------------------------------------------------------- wallet */

.addr {
  font-family: var(--mono); font-size: 11.5px; word-break: break-all;
  background: #0a0d18; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 8px 10px; color: var(--ink-2);
}
.txrow { display: grid; gap: 3px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.txrow:last-child { border-bottom: 0; }
.txrow__hash { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.review {
  border: 1px solid #4c3f80; border-radius: var(--r); padding: 15px;
  background: linear-gradient(180deg, #1d1836, #12142a);
}
.review__grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; margin: 12px 0; }
.review__key { color: var(--ink-3); }
.review__val { font-family: var(--mono); word-break: break-all; }
.review__warn {
  display: flex; gap: 8px; padding: 9px 11px; border-radius: var(--r-sm);
  background: rgba(224, 169, 63, .1); border: 1px solid #4d3d1c;
  font-size: 12.5px; color: #f0cd85; line-height: 1.45;
}

.notice {
  display: flex; gap: 9px; padding: 11px 13px; border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.5;
  background: rgba(95, 180, 216, .07); border: 1px solid #24485c; color: #bfe0f0;
}
.notice--chain { background: rgba(167, 139, 250, .07); border-color: #3b3163; color: #cdc0ff; }
.notice--warn { background: rgba(224, 169, 63, .08); border-color: #4d3d1c; color: #f0cd85; }

/* --------------------------------------------------------------- onboarding */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 20px;
  background: rgba(5, 7, 13, .84); backdrop-filter: blur(8px);
  overflow-y: auto;
}
.scrim__panel {
  width: min(720px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: linear-gradient(180deg, #141a2c, #0c1020);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 26px;
}
.scrim__title { font-size: 22px; letter-spacing: -0.02em; }
.scrim__lede { color: var(--ink-2); margin-top: 8px; line-height: 1.6; font-size: 14px; }
.scrim__foot { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; }

.hero { text-align: center; padding: 8px 0 4px; }
.hero__mark { font-size: 46px; filter: drop-shadow(0 0 24px rgba(224, 169, 63, .35)); }
.hero h2 { font-size: 27px; letter-spacing: -0.03em; margin-top: 8px; }
.hero p { color: var(--ink-2); margin-top: 8px; line-height: 1.6; }

/* --------------------------------------------------------------- misc */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.stat { background: #0f1424; border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; }
.stat__v { font-family: var(--mono); font-size: 17px; font-weight: 650; }
.stat__k { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }

.bar { height: 5px; border-radius: 3px; background: #1b2136; overflow: hidden; }
.bar__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--neon), var(--neon-2)); transition: width .4s ease; }
.bar--good .bar__fill { background: linear-gradient(90deg, #3f9a72, var(--good)); }

.meter { display: grid; gap: 4px; }
.meter__top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--ink-3); }
.kv__v { font-family: var(--mono); text-align: right; }

.empty { text-align: center; padding: 34px 20px; color: var(--ink-3); }
.empty__glyph { font-size: 30px; opacity: .5; }
.empty p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; }

.divider { height: 1px; background: var(--line-soft); margin: 4px 0; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

.skeleton {
  background: linear-gradient(90deg, #141a2c 25%, #1c2340 37%, #141a2c 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --------------------------------------------------------------- toasts + modal */

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; justify-items: end; }
.toast {
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: 13px; max-width: 360px;
  animation: slide-in .22s ease-out;
}
.toast--good { border-color: #2f6b4f; }
.toast--bad { border-color: #7d3140; }
.toast--chain { border-color: #4c3f80; background: #1d1836; }

.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(5, 7, 13, .8); backdrop-filter: blur(6px); }
.modal[hidden] { display: none; }
.modal__panel { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: linear-gradient(180deg, #141a2c, #0c1020); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 22px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (max-width: 640px) {
  .main { padding: 12px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .brand__tag { display: none; }
  .nav { order: 3; width: 100%; }
  .scrim__panel { padding: 20px; }
}