/* Clean card system: flat white cards on a neutral page, grey trays that carry a title and hold white cards.
   Loaded last, so it overrides the cream and glass of the earlier skin. No gradients, no glow. */
:root {
  --card: #16223a; --card-sh: 0 0 0 1px #ffffff0f; --tray: #ffffff0a;
  --bg-img: linear-gradient(#0b1424, #0b1424);
  --bg: #08111f; --bg-2: #0b1424; --panel: #16223a; --panel-2: #1b2943;
  --glass: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(#ffffff12, #ffffff12) border-box;
  --glass-2: linear-gradient(#1b2943, #1b2943) padding-box, linear-gradient(#ffffff10, #ffffff10) border-box;
  --drop: none;
}
:root[data-theme="light"] {
  --card: #fff; --card-sh: 0 0 0 1px rgb(20 20 20 / 0.04), 0 1px 2px rgb(20 20 20 / 0.05); --tray: #ecebe8;
  --bg-img: linear-gradient(#f5f4f2, #f5f4f2);
  --bg: #efeeeb; --bg-2: #f5f4f2; --panel: #fff; --panel-2: #f8f7f5;
  --surf-a: #fff; --surf-b: #fff; --draft-a: #fff; --draft-b: #fff; --bub-a: #f2f1ee; --bub-b: #f2f1ee;
  --pop: #fff; --side-m: #f5f4f2; --chrome: #f5f4f2e6; --chrome-hi: #fff;
  --glass: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(rgb(20 20 20 / 0.06), rgb(20 20 20 / 0.06)) border-box;
  --glass-2: linear-gradient(#f8f7f5, #f8f7f5) padding-box, linear-gradient(rgb(20 20 20 / 0.06), rgb(20 20 20 / 0.06)) border-box;
  --drop: 0 1px 2px rgb(20 20 20 / 0.05);
}
:root { --hy-line: #ffb81c; }
:root[data-theme="light"] {
  --hy-line: #eca400;
  --inv-bg: #ffb81c; --inv-fg: #0f2e5c; --inv-hi: #f2a900;
}
.panel { border-radius: 24px; transition: box-shadow .25s; }
.main { box-shadow: 0 0 0 1px var(--line-2); }
.btn.brand, .btn.primary { box-shadow: none; }
.btn { transition: background .2s, color .2s, transform .15s var(--ease), box-shadow .2s; }
.nav-ind::before { box-shadow: none; }
.nav-ind { background: var(--hy-soft); box-shadow: none; }
.nav a svg { transition: stroke .2s, transform .25s var(--ease); opacity: 1; }
.nav a:hover svg { stroke: var(--hy-line); transform: scale(1.1); }
.nav a.on svg { stroke: var(--hy-line); }
a.brand img, .shell.rail a.brand img, .login-card .mark { box-shadow: none; }
.login-card { box-shadow: var(--card-sh); }
.page-head h1 { font-size: 32px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; text-shadow: none; }
.page-head p { font-size: 15px; text-shadow: none; }
.seg .seg-ind { background: var(--hy); box-shadow: none; }
.seg button.on { color: var(--hy-ink); }
.tbl tbody tr:hover { background: var(--hy-soft); }
.mv, .wr-stat-n { font-variant-numeric: tabular-nums; }
.sw.on, :root[data-theme="light"] .sw.on { background: var(--hy); }

/* icons: plain yellow line, no background */
.hy-i { display: inline-grid; place-items: center; flex: none; color: var(--hy-line); }
.hy-i.off { color: var(--t3); }
.hy-i svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.hy-i.lg svg { width: 24px; height: 24px; stroke-width: 1.5; }
.hy-i.xl svg { width: 44px; height: 44px; stroke-width: 1.3; }
.hy-i svg path { stroke-dasharray: 1; animation: hy-draw 1s ease .15s backwards; }
@keyframes hy-draw { from { stroke-dashoffset: 1; opacity: 0; } 15% { opacity: 1; } to { stroke-dashoffset: 0; } }
.ml-ic, .ml-ic.sm, .ins-up-ic, .ops-ai-ic, .ops-ph-ic, .brain-wa-ic, .brain-av { width: auto; height: auto; border-radius: 0; background: none; color: var(--hy-line); }
.ml-ic svg, .ml-ic.sm svg, .ins-up-ic svg, .ops-ai-ic svg, .ops-ph-ic svg, .brain-wa-ic svg, .brain-av svg { width: 20px; height: 20px; stroke: var(--hy-line); }

/* motion */
.stagger > * { animation: hy-up .6s var(--ease) backwards; animation-delay: calc(140ms + var(--n, 0) * 65ms); }
.stagger > :nth-child(2) { --n: 1; } .stagger > :nth-child(3) { --n: 2; } .stagger > :nth-child(4) { --n: 3; } .stagger > :nth-child(5) { --n: 4; } .stagger > :nth-child(6) { --n: 5; } .stagger > :nth-child(7) { --n: 6; } .stagger > :nth-child(8) { --n: 7; }
@keyframes hy-up { from { opacity: 0; transform: translateY(12px); } }
.lift { position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.lift::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hy); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--card-sh), 0 14px 28px -18px rgb(20 20 20 / 0.28); }
.lift:hover::after { transform: scaleX(1); }
.lift:hover .hy-i svg { transform: scale(1.1); }
.lift-go { display: inline-grid; color: var(--t3); transition: transform .3s var(--ease), color .2s; }
.lift-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lift:hover .lift-go { color: var(--hy-line); transform: translateX(4px); }
.wr-mark { position: relative; white-space: nowrap; }
.wr-mark::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; border-radius: 2px; background: var(--hy); transform-origin: left; animation: hy-sweep .8s var(--ease) .45s backwards; }
@keyframes hy-sweep { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .stagger > *, .hy-i svg path, .wr-mark::after { animation: none; } .lift, .lift::after { transition: none; } }

/* map: light palette */
:root[data-theme="light"] .ins-dark {
  --im-bg: #fff; --im-panel: #fff; --im-side: #fff; --im-edge: rgb(20 20 20 / 0.06);
  --im-land: #eef0e7; --im-f0: #e8ecdf; --im-f1: #e3e9d8; --im-f2: #ecede0; --im-f3: #e6e8d7; --im-f4: #e1e8da; --im-furrow: #0000000a; --im-tree: #c6d3b5; --im-block: #d3d6da; --im-street: #0000001c;
  --im-water: #c3dff1; --im-water2: #b2d8f0; --im-road: #fff; --im-road2: #ffffffd9; --im-center: #cfd3d9;
}
:root[data-theme="light"] .ins-stage.schema { --im-land: #f1f2ee; --im-f0: #f1f2ee; --im-f1: #f1f2ee; --im-f2: #f1f2ee; --im-f3: #f1f2ee; --im-f4: #f1f2ee; --im-block: #dcdfe3; --im-road: #fff; --im-road2: #ffffffd9; --im-water2: #b2d8f0; --im-water: #c3dff1; }
:root[data-theme="light"] .ins-rlab text { fill: #47587a; stroke: #ffffffd9; }
:root[data-theme="light"] .ins-rlab text.b { fill: #0b2447; }
:root[data-theme="light"] .ins-mk-l rect { fill: #fff; stroke: rgb(20 20 20 / 0.08); }
:root[data-theme="light"] .ins-mk-l text { fill: #0b2447; }
:root[data-theme="light"] .ins-zoom, :root[data-theme="light"] .ins-maplegend { background: #fff; box-shadow: var(--card-sh); }
:root[data-theme="light"] .ins-zoom button { color: var(--t1); }
:root[data-theme="light"] .ins-zoom button:hover { background: var(--w0f); }
:root[data-theme="light"] .ins-mapseg .seg { background: #fff; box-shadow: var(--card-sh); }

/* tray: a grey surface with its title inside, holding white cards */
.tray { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; border-radius: 30px; background: var(--tray); }
.tray-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 14px 18px 10px; }
.tray-h h3 { margin: 0; font-size: 17px; font-weight: 550; letter-spacing: -0.015em; color: var(--t0); }
.tray-sub { font-size: 14px; color: var(--t2); }
.tray-r { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 14px; font-weight: 500; color: var(--t0); text-decoration: none; }
.tray-r:hover { text-decoration: underline; text-underline-offset: 3px; }
.tray-r svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tray-c { min-width: 0; padding: 20px 22px; border-radius: 22px; background: var(--card); box-shadow: var(--card-sh); }
.tray-note { margin: 0; padding: 6px 18px 10px; font-size: 12.5px; line-height: 1.5; color: var(--t2); }

/* legend swatches that were drawn for a dark background */
:root[data-theme="light"] .ins-ml-g i.stripe { background: repeating-linear-gradient(45deg, #47587a99 0 1.5px, transparent 1.5px 5px); }
:root[data-theme="light"] .ins-ml-g i.dotp { background-image: radial-gradient(#47587a 1px, transparent 1.3px); }
:root[data-theme="light"] .ins-par-lab .n { fill: #0b2447; stroke: #ffffffd9; }
:root[data-theme="light"] .ins-par-lab .t { fill: #12294c; stroke: #ffffffd9; }
:root[data-theme="light"] .ins-ml { fill: #146a3d; stroke: #ffffffd9; }
.brain-col::before { display: none; }

@media (max-width: 860px) {
  .brain-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .brain-empty h2 { font-size: 30px; }
  .brain-cap.tray-c { padding: 16px; }
}