/* ======================================================================
   KOREALM — Design System
   Clean & trustworthy fintech. Off-white canvas, near-black ink,
   deep forest-green accent.
   ====================================================================== */

:root {
  /* ---- Surfaces ---- */
  --bg:        #f4f4f1;
  --surface:   #ffffff;
  --surface-2: #fafaf8;
  --surface-3: #f0f0ec;
  --overlay:   rgba(28, 28, 26, 0.42);

  /* ---- Ink ---- */
  --ink:       #1b1b19;
  --ink-2:     #56564f;
  --ink-3:     #86867d;
  --ink-4:     #aeaea4;

  /* ---- Lines ---- */
  --line:      #e6e5df;
  --line-2:    #d9d8d1;
  --line-strong:#cbcabf;

  /* ---- Brand ----
     Korealm navy + gold. Variable names kept as --green* (used site-wide)
     but hold the navy values from the logo. --gold = logo accent gold. */
  --green:     #1e3a5e;
  --green-700: #15293f;
  --green-600: #274a73;
  --green-500: #3c618c;
  --green-soft:#e9eef5;
  --green-soft-2:#d4dfee;
  --green-tint:#f1f5fa;

  /* ---- Semantic ---- */
  --success:   #1d7a4d;
  --success-soft:#e4f1e9;
  --warning:   #a96a1f;
  --warning-soft:#f6ecdb;
  --danger:    #ad3b34;
  --danger-soft:#f6e3e1;
  --info:      #2a5aa8;
  --info-soft: #e4ebf6;
  --gold:      #b5912f;
  --gold-strong:#c8a253;
  --gold-soft: #f5edd8;
  --gold-tint: #faf5e8;

  /* ---- Type ---- */
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r:    11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --sh-1: 0 1px 2px rgba(24,24,20,0.05), 0 1px 1px rgba(24,24,20,0.04);
  --sh-2: 0 2px 6px rgba(24,24,20,0.06), 0 8px 22px rgba(24,24,20,0.06);
  --sh-3: 0 12px 40px rgba(24,24,20,0.13), 0 4px 12px rgba(24,24,20,0.07);
  --sh-pop: 0 18px 60px rgba(24,24,20,0.20);

  /* ---- Layout ---- */
  --nav-h: 60px;
  --side-w: 232px;
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }

h1,h2,h3,h4,h5 { font-family: var(--font-display); margin: 0; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--green-soft-2); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d7d6cd; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #c2c1b6; background-clip: content-box; }

/* ======================================================================
   LAYOUT HELPERS
   ====================================================================== */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.right { text-align: right; }

/* ======================================================================
   BUTTONS
   ====================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  border-radius: var(--r); border: 1px solid transparent;
  padding: 0 16px; height: 40px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
  user-select: none; letter-spacing: -0.005em;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .ic { width: 17px; height: 17px; }

.btn-primary { background: var(--green); color: #f3f7f4; box-shadow: var(--sh-1); }
.btn-primary:hover:not(:disabled) { background: var(--green-700); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }

.btn-soft { background: var(--green-soft); color: var(--green); }
.btn-soft:hover:not(:disabled) { background: var(--green-soft-2); }

.btn-subtle { background: var(--surface-3); color: var(--ink); }
.btn-subtle:hover:not(:disabled) { background: #e7e7e1; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #97322c; }

.btn-link { background: none; border: none; color: var(--green); padding: 0; height: auto; font-weight: 600; cursor: pointer; }
.btn-link:hover { color: var(--green-700); text-decoration: underline; }

.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 38px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }

/* ======================================================================
   BADGES / PILLS
   ====================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-2); white-space: nowrap;
  letter-spacing: 0.01em;
}
.badge .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.badge-green  { background: var(--green-soft);   color: var(--green); }
.badge-success{ background: var(--success-soft); color: var(--success); }
.badge-warning{ background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft);  color: var(--danger); }
.badge-info   { background: var(--info-soft);    color: var(--info); }
.badge-neutral{ background: var(--surface-3);    color: var(--ink-2); }
.badge-outline{ background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; padding: 6px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: all .14s;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.active { background: var(--green); border-color: var(--green); color: #f3f7f4; }

/* ======================================================================
   CARDS / SURFACES
   ====================================================================== */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card-pad { padding: 22px; }
.card-pad-sm { padding: 16px; }
.card-hover { transition: box-shadow .18s, border-color .18s, transform .18s; cursor: pointer; }
.card-hover:hover { box-shadow: var(--sh-2); border-color: var(--line-2); transform: translateY(-2px); }
.panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.divider { height: 1px; background: var(--line); width: 100%; }
.vdivider { width: 1px; background: var(--line); align-self: stretch; }

.section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* ======================================================================
   FORM CONTROLS
   ====================================================================== */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: 13px; font-weight: 600; color: var(--ink); }
.label .req { color: var(--danger); margin-left: 2px; }
.hint { font-size: 12.5px; color: var(--ink-3); }
.err { font-size: 12.5px; color: var(--danger); font-weight: 500; }

.input, .select, .textarea {
  font-family: var(--font-ui); font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 0 13px; height: 42px; width: 100%;
  transition: border-color .14s, box-shadow .14s, background .14s; outline: none;
}
.textarea { padding: 11px 13px; height: auto; min-height: 92px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-soft); }
.input:disabled { background: var(--surface-3); color: var(--ink-3); }
.input.has-err, .select.has-err, .textarea.has-err { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386867d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.input-affix { position: relative; display: flex; align-items: center; }
.input-affix .affix { position: absolute; left: 13px; color: var(--ink-3); font-size: 14.5px; pointer-events: none; }
.input-affix .input { padding-left: 28px; }
.input-icon { position: relative; }
.input-icon > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); width: 17px; height: 17px; }
.input-icon .input { padding-left: 37px; }

/* segmented / radio cards */
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r); padding: 3px; gap: 3px; }
.seg button {
  border: none; background: none; cursor: pointer; font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  padding: 7px 14px; border-radius: 8px; transition: all .14s; white-space: nowrap;
}
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

.radio-cards { display: grid; gap: 10px; }
.radio-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer;
  transition: all .14s; background: var(--surface); position: relative;
}
.radio-card:hover { border-color: var(--line-strong); }
.radio-card.sel { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); background: var(--green-tint); }
.radio-card .rc-dot { width: 18px; height: 18px; border-radius: 99px; border: 2px solid var(--line-strong); flex: none; margin-top: 1px; transition: all .14s; position: relative; }
.radio-card.sel .rc-dot { border-color: var(--green); }
.radio-card.sel .rc-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 99px; background: var(--green); }

.check {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--surface); transition: all .14s; cursor: pointer; color: transparent;
}
.check.on { background: var(--green); border-color: var(--green); color: #fff; }

.switch { width: 38px; height: 22px; border-radius: 99px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .16s; flex: none; }
.switch.on { background: var(--green); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 99px; background: #fff; transition: left .16s; box-shadow: var(--sh-1); }
.switch.on::after { left: 18px; }

/* ======================================================================
   TABLES
   ====================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 14px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: var(--surface-2); }
.table td.num, .table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ======================================================================
   AVATAR / MEDIA
   ====================================================================== */
.avatar { border-radius: 99px; background: var(--green-soft); color: var(--green); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); flex: none; overflow: hidden; }
.avatar.sq { border-radius: 9px; }

/* striped image placeholder */
.ph {
  position: relative; overflow: hidden; background: var(--surface-3);
  background-image: repeating-linear-gradient(135deg, rgba(30,58,94,0.05) 0 1px, transparent 1px 11px);
  display: flex; align-items: center; justify-content: center;
}
.ph .ph-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); text-transform: lowercase; background: rgba(255,255,255,0.7); padding: 3px 8px; border-radius: 6px; }

/* ======================================================================
   STAT / KPI
   ====================================================================== */
.stat { display: flex; flex-direction: column; gap: 5px; }
.stat .k { font-size: 12.5px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.01em; }
.stat .v { font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.stat .v.mono { font-family: var(--font-mono); font-weight: 500; font-size: 24px; }
.delta { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.delta.up { color: var(--success); } .delta.down { color: var(--danger); }

/* ======================================================================
   STEPPER
   ====================================================================== */
.stepper { display: flex; align-items: center; gap: 0; }
.stepper .stp { display: flex; align-items: center; gap: 9px; }
.stepper .num { width: 26px; height: 26px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; border: 1.5px solid var(--line-strong); color: var(--ink-3); background: var(--surface); font-family: var(--font-mono); }
.stepper .stp.active .num { background: var(--green); border-color: var(--green); color: #fff; }
.stepper .stp.done .num { background: var(--green-soft); border-color: var(--green-soft-2); color: var(--green); }
.stepper .stp .lbl { font-size: 13.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.stepper .stp.active .lbl, .stepper .stp.done .lbl { color: var(--ink); }
.stepper .bar { width: 34px; height: 1.5px; background: var(--line-2); margin: 0 12px; flex: none; }
.stepper .stp.done + .bar { background: var(--green-soft-2); }

/* ======================================================================
   MODAL / DRAWER
   ====================================================================== */
.scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade .16s ease; backdrop-filter: blur(2px); }
.modal { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-pop); width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; animation: pop .2s cubic-bezier(.2,.9,.3,1.2); }
.modal-head { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: var(--surface-2); }

.drawer-scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 80; animation: fade .16s ease; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 94vw; background: var(--surface); box-shadow: var(--sh-pop); z-index: 81; display: flex; flex-direction: column; animation: slidein .24s cubic-bezier(.2,.8,.2,1); }
.drawer-head { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer-body { padding: 22px; overflow-y: auto; flex: 1; }
.drawer-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; background: var(--surface-2); }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes slidein { from { transform: translateX(100%); } }
@keyframes risein { from { opacity: 0; transform: translateY(10px); } }

/* ======================================================================
   TOAST
   ====================================================================== */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast { display: flex; align-items: center; gap: 11px; background: var(--ink); color: #f2f2ec; padding: 12px 16px; border-radius: var(--r); box-shadow: var(--sh-3); font-size: 14px; font-weight: 500; animation: risein .2s ease; max-width: 440px; }
.toast .ic { flex: none; }
.toast.ok .ic { color: #7fd3a3; } .toast.err .ic { color: #e89b95; } .toast.info .ic { color: #9bbcf0; }

/* ======================================================================
   EMPTY STATE
   ====================================================================== */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; gap: 12px; }
.empty .ei { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.empty h4 { font-size: 16px; }
.empty p { font-size: 13.5px; color: var(--ink-3); max-width: 320px; }

/* ======================================================================
   PROGRESS
   ====================================================================== */
.bar-track { height: 7px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--green); border-radius: 99px; transition: width .4s cubic-bezier(.2,.8,.2,1); }

/* tabs underline */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tab { padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .14s, border-color .14s; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--green); border-bottom-color: var(--green); }

/* keyline list */
.klist { display: flex; flex-direction: column; }
.klist > * { padding: 14px 0; border-bottom: 1px solid var(--line); }
.klist > *:last-child { border-bottom: none; }

.anim-rise { animation: risein .3s ease both; }

/* link-ish row hover */
.lift { transition: transform .14s, box-shadow .14s; }
.lift:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

.skel { background: linear-gradient(90deg, var(--surface-3) 25%, #ececE6 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ======================================================================
   SHELL — topbar
   ====================================================================== */
.topbar { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.86); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.poc-tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--green); background: var(--green-soft); padding: 3px 7px; border-radius: 6px; }

/* ---- Route Dashboard (persona router) ---- */
.route-switch { position: relative; }
.route-trigger { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 11px 0 12px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 10px; cursor: pointer; font-family: var(--font-ui); transition: border-color .14s, box-shadow .14s, background .14s; }
.route-trigger:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
.route-trigger.open { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.route-trigger-ic { color: var(--green); flex: none; }
.route-trigger-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.route-trigger-path { font-size: 12.5px; color: var(--ink-2); background: var(--surface-3); padding: 3px 7px; border-radius: 6px; }

.route-dash { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 348px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 7px; z-index: 70; animation: pop .14s ease; }
.route-dash-head { display: flex; align-items: center; gap: 11px; padding: 9px 9px 12px; }
.route-dash-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--green-soft); color: var(--green); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.route-dash-title { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); }

.route-list { position: relative; display: flex; flex-direction: column; }
/* the connecting "wire" running through the node column */
.route-list::before { content: ""; position: absolute; left: calc(9px + 15px); top: 26px; bottom: 26px; width: 2px; background: repeating-linear-gradient(var(--line-strong) 0 4px, transparent 4px 8px); z-index: 0; }

.route-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding: 9px; border: none; background: none; cursor: pointer; border-radius: 10px; text-align: left; font-family: var(--font-ui); transition: background .12s; }
.route-row:hover { background: var(--surface-2); }
.route-row.active { background: var(--green-soft); }
.route-node { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: all .14s; }
.route-row:hover .route-node { border-color: var(--line-strong); color: var(--ink); }
.route-row.active .route-node { background: var(--green); border-color: var(--green); color: #eaf2ed; }
.route-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.route-path { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.route-row.active .route-path { color: var(--green); }
.route-live { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--green); }
.route-live-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: routepulse 1.8s infinite; }
@keyframes routepulse { 0% { box-shadow: 0 0 0 0 rgba(30,58,94,0.5); } 70% { box-shadow: 0 0 0 5px rgba(30,58,94,0); } 100% { box-shadow: 0 0 0 0 rgba(30,58,94,0); } }
.route-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: var(--surface-3); padding: 3px 7px; border-radius: 6px; white-space: nowrap; flex: none; }
.route-row-go { color: var(--ink-4); flex: none; transition: transform .14s, color .14s; }
.route-row:hover .route-row-go { color: var(--ink-2); transform: translateX(2px); }

.route-dash-foot { display: flex; align-items: center; gap: 7px; padding: 11px 10px 6px; margin-top: 3px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }

/* ---- Route Map landing (POC launcher) ---- */
.route-landing { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: flex-start; justify-content: center; padding: 60px 24px 80px; background: radial-gradient(62% 46% at 50% -4%, var(--green-tint), transparent 70%), var(--surface-2); }
.rl-inner { width: 100%; max-width: 860px; }
.rl-head { text-align: center; margin-bottom: 34px; }
.rl-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green); background: var(--green-soft); padding: 5px 11px; border-radius: var(--r-pill); }
.rl-kicker .ic { color: var(--green); }
.rl-title { font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: -0.025em; margin: 16px 0 10px; }
.rl-sub { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 560px; margin: 0 auto; text-wrap: pretty; }

.rl-tree { display: flex; flex-direction: column; align-items: center; }
.rl-origin { display: inline-flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 11px 17px 11px 12px; box-shadow: var(--sh-1); }
.rl-origin-node { width: 38px; height: 38px; border-radius: 10px; background: var(--green); color: #eaf2ed; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rl-origin-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.rl-origin-meta { font-size: 11.5px; color: var(--ink-3); }
.rl-origin-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding-left: 13px; border-left: 1px solid var(--line); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green); }
.rl-stem { width: 2px; height: 34px; background: repeating-linear-gradient(var(--line-strong) 0 4px, transparent 4px 8px); }

.rl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; }
.rl-card { position: relative; text-align: left; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 20px; cursor: pointer; font-family: var(--font-ui); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, border-color .15s; }
.rl-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--green); }
.rl-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rl-card-node { width: 42px; height: 42px; border-radius: 11px; background: var(--green-soft); color: var(--green); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.rl-card:hover .rl-card-node { background: var(--green); color: #eaf2ed; }
.rl-card-meta { font-size: 11px; color: var(--ink-3); background: var(--surface-3); padding: 4px 8px; border-radius: 6px; }
.rl-card-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.rl-card-path { font-size: 12px; color: var(--ink-3); margin: 2px 0 10px; }
.rl-card-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.rl-card-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--green); }
.rl-card-go .ic { transition: transform .15s; }
.rl-card:hover .rl-card-go .ic { transform: translateX(3px); }

.rl-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; color: var(--ink-3); font-size: 13px; }

.acct { display: flex; align-items: center; gap: 9px; padding: 4px 9px 4px 4px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .14s, box-shadow .14s; }
.acct:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
.bell-btn { position: relative; }
.bell-dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 99px; background: var(--danger); border: 1.5px solid var(--surface); }

.menu { position: absolute; top: calc(100% + 8px); right: 0; width: 248px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 6px; z-index: 70; animation: pop .14s ease; }
.menu-head { display: flex; gap: 11px; align-items: center; padding: 10px 10px 12px; }
.menu-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; transition: background .12s; }
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }
.menu-item .ic { color: var(--ink-3); }
.menu-item.danger .ic { color: var(--danger); }

/* ======================================================================
   SHELL — dashboard layout
   ====================================================================== */
.dash { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: var(--side-w) 1fr; gap: 0; align-items: start; }
.sidebar { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); padding: 20px 14px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--line); }
.side-role { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; border-bottom: 1px solid var(--line); }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; border: none; background: none; cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background .12s, color .12s; width: 100%; }
.side-item:hover { background: var(--surface-2); color: var(--ink); }
.side-item.active { background: var(--green-soft); color: var(--green); font-weight: 600; }
.side-item .ic { color: inherit; opacity: .9; }
.side-count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--danger); color: #fff; padding: 1px 6px; border-radius: 99px; min-width: 18px; text-align: center; }
.side-item.active .side-count { background: var(--green); }
.side-foot { margin-top: auto; }

.dash-main { min-width: 0; }
.dash-scroll { min-height: calc(100vh - var(--nav-h)); }
.dash-inner { max-width: 980px; margin: 0 auto; padding: 28px 28px 72px; }
.page-head { margin-bottom: 22px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

/* ======================================================================
   PUBLIC layout
   ====================================================================== */
.pub { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.pub-wide { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* hero */
.hero { background: linear-gradient(180deg, var(--green-tint), var(--bg)); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(30,58,94,0.025) 0 1px, transparent 1px 22px); pointer-events: none; }
.hero-inner { padding: 70px 0 56px; max-width: 720px; position: relative; }
.hero-title { font-size: 52px; line-height: 1.02; letter-spacing: -0.035em; }
.hero-sub { font-size: 18px; color: var(--ink-2); margin-top: 18px; line-height: 1.55; max-width: 560px; }
.hero-stats { display: flex; align-items: center; gap: 22px; margin-top: 40px; }
.hero-stats > div:not(.vdivider) { display: flex; flex-direction: column; gap: 2px; }
.hs-v { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--green); }
.hs-k { font-size: 12.5px; color: var(--ink-3); }

/* filters */
.filters { position: sticky; top: calc(var(--nav-h) + 0px); z-index: 20; }

/* property card */
.prop-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.prop-photo { position: relative; aspect-ratio: 3 / 2; }
.prop-photo-top { position: absolute; inset: 12px 12px auto 12px; display: flex; align-items: center; justify-content: space-between; }
.fav { width: 32px; height: 32px; border-radius: 99px; border: none; background: rgba(255,255,255,0.92); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sh-1); transition: all .14s; }
.fav:hover { color: var(--danger); }
.fav.on { color: #fff; background: var(--danger); }
.fav.on .ic { fill: currentColor; }
.prop-flag { position: absolute; left: 12px; bottom: 12px; background: rgba(27,27,25,0.82); color: #f2f2ec; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: var(--r-pill); }
.prop-body { padding: 16px; }
.prop-price { font-size: 21px; font-weight: 600; color: var(--ink); }
.prop-per { font-size: 13px; color: var(--ink-3); font-weight: 500; font-family: var(--font-ui); }
.prop-title { font-size: 16px; margin: 8px 0 6px; letter-spacing: -0.01em; }
.prop-specs { display: flex; gap: 16px; }
.prop-specs span { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.prop-specs .ic { color: var(--ink-3); }
.prop-epc { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

/* detail */
.detail { padding-bottom: 56px; }
.detail-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 380px; border-radius: var(--r-lg); overflow: hidden; }
.detail-gallery .g-main { grid-row: 1 / 3; }
.detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; margin-top: 32px; align-items: start; }
.d-h { font-size: 18px; margin-bottom: 12px; }
.specs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.spec-item { display: flex; flex-direction: column; gap: 8px; }
.amen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.amen { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink); }
.detail-rail { position: sticky; top: calc(var(--nav-h) + 20px); }
.rail-meta { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.verified-strip { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 11px; background: var(--green-soft); color: var(--green); border-radius: var(--r); font-size: 12.5px; font-weight: 600; }

/* footer */
.pub-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 0; }
.foot-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-link { font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.foot-link:hover { color: var(--green); }

@media (max-width: 900px) {
  .hero-title { font-size: 40px; }
  .detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .detail-rail { position: static; }
  .detail-gallery { grid-template-columns: 1fr 1fr; height: 300px; }
  .detail-gallery .g-main { grid-row: 1 / 2; grid-column: 1 / 3; }
  .specs-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hero-inner { padding: 44px 0 36px; }
  .hero-title { font-size: 33px; }
  .hero-sub { font-size: 16px; }
  .hero-stats { gap: 14px; flex-wrap: wrap; }
  .amen-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   AUTH
   ====================================================================== */
.auth-wrap { min-height: calc(100vh - var(--nav-h)); display: grid; grid-template-columns: 0.85fr 1fr; }
.auth-aside { background: var(--green); color: #eef3ef; padding: 36px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-aside::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px); pointer-events: none; }
.auth-aside-top { position: relative; z-index: 1; }
.auth-aside-top .avatar { background: rgba(255,255,255,0.16); color: #fff; }
.auth-aside-mid { margin-top: auto; margin-bottom: 40px; position: relative; z-index: 1; }
.auth-quote { font-family: var(--font-display); font-size: 25px; line-height: 1.3; letter-spacing: -0.01em; color: #f3f8f5; font-weight: 500; max-width: 420px; }
.auth-aside-foot { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); }
.auth-aside .auth-aside-top svg + span, .auth-aside :where(span) { color: inherit; }
.auth-aside .row span { }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--ink-3); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.demo-acct { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: all .14s; width: 100%; }
.demo-acct:hover { border-color: var(--green); background: var(--green-tint); }

.verify-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; }
.otp-row { display: flex; gap: 10px; margin: 26px 0 4px; }
.otp { flex: 1; height: 58px; text-align: center; font-family: var(--font-mono); font-size: 24px; font-weight: 500; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); outline: none; transition: border-color .14s, box-shadow .14s; min-width: 0; }
.otp:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-soft); }
.demo-hint { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 13px; background: var(--info-soft); color: var(--info); border-radius: var(--r); font-size: 13px; }
.demo-hint .mono { font-size: 14px; letter-spacing: 0.05em; }

.spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 99px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { padding: 32px 20px; }
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 1000px) {
  .role-switch-label { display: none; }
  .dash { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: 8px; border-right: none; border-bottom: 1px solid var(--line); padding: 10px 16px; overflow-x: auto; }
  .side-role, .side-foot { display: none; }
  .side-nav { flex-direction: row; flex-wrap: nowrap; gap: 4px; }
  .side-item { white-space: nowrap; padding: 8px 12px; }
  .dash-inner { padding: 20px 18px 60px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
  .route-switch { order: 3; width: 100%; }
  .route-trigger { width: 100%; justify-content: flex-start; }
  .route-trigger-path { margin-left: auto; }
  .route-dash { width: 100%; left: 0; transform: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .rl-grid { grid-template-columns: 1fr; }
  .rl-title { font-size: 29px; }
  .route-landing { padding: 40px 16px 60px; }
  .pub, .pub-wide { padding: 0 16px; }
}