@font-face {
  font-family: "Russo One";
  src: url("./assets/fonts/RussoOne-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Permanent Marker";
  src: url("./assets/fonts/PermanentMarker-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #030303;
  --rail: #030303;
  --surface: #0b0b0b;
  --surface-raised: #101010;
  --surface-soft: #161616;
  --line: #242424;
  --line-strong: #343434;
  --text: #f2f3f7;
  --muted: #969cad;
  --muted-2: #717889;
  --violet: #b58aff;
  --violet-strong: #9560ea;
  --violet-soft: #261d38;
  --green: #61d7a7;
  --amber: #aeb6c2;
  --red: #9aa3ad;
  --radius: 13px;
  --rail-width: 232px;
  font-family: "Russo One", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 800px; min-height: 100%; background: var(--bg); overscroll-behavior: none; }
body { min-width: 800px; min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); font-size: 13px; line-height: 1.5; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { color: #fff; background: #67469c; }

.shell { display: flex; min-height: 100vh; }
.rail { position: fixed; z-index: 5; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 232px; padding: 23px 13px 15px; border-right: 1px solid var(--line); background: var(--rail); }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 10px 30px; }
.brand-mark { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #8558c4; border-radius: 12px; color: #dfc9ff; background: #171221; box-shadow: 0 0 24px #8350c526; font-size: 20px; font-weight: 750; }
.brand b { display: block; font-size: 13px; font-weight: 750; letter-spacing: 2px; }
.brand span { display: block; margin-top: 3px; color: var(--muted-2); font-size: 8px; letter-spacing: 2px; }
.rail-label, .eyebrow { color: #a98cda; font-size: 9px; font-weight: 700; letter-spacing: 1.65px; }
.rail-label { padding: 0 12px 9px; color: #707687; }
.nav { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; height: 41px; margin: 2px 0; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; color: #b8bdc9; background: transparent; text-align: left; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.nav:hover { border-color: #252525; color: var(--text); background: #141414; }
.nav.active { border-color: #392e4d; color: #eee5ff; background: linear-gradient(100deg, #292039, #191622); box-shadow: inset 2px 0 var(--violet); }
.nav-icon { display: inline-grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; color: #c8c8c8; }
.nav-icon svg { display: block; width: 18px; height: 18px; }
.nav.active .nav-icon svg { color: #c5c8cf; }
.nav-icon img { display: block; width: 100%; height: 100%; object-fit: contain; filter: invert(1); opacity: .76; transition: filter .15s ease, opacity .15s ease; }
.nav:hover .nav-icon img { opacity: 1; }
.nav.active .nav-icon img { filter: invert(70%) sepia(21%) saturate(1128%) hue-rotate(218deg) brightness(104%) contrast(102%); opacity: 1; }
.rail-bottom { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 15px 9px 0; border-top: 1px solid var(--line); color: #aeb3bf; font-size: 10px; }
.rail-bottom button { margin-left: auto; padding: 3px 5px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 18px; }
.rail-bottom button:hover { color: var(--text); background: var(--surface-soft); }
.pulse { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; color: var(--muted-2); background: currentColor; box-shadow: 0 0 9px currentColor; }
.pulse.on { color: var(--green); }
.pulse.wait { color: var(--amber); }

.main { display: flex; flex-direction: column; width: calc(100% - 232px); min-height: 100vh; margin-left: 232px; padding: 0 34px 20px; }
.topbar { position: sticky; z-index: 3; top: 0; display: flex; height: 76px; flex: 0 0 76px; align-items: center; justify-content: space-between; margin-bottom: 25px; border-bottom: 1px solid var(--line); background: rgb(3 3 3 / 96%); backdrop-filter: blur(14px); }
.topbar h1 { margin: 3px 0 0; font-size: 20px; font-weight: 680; letter-spacing: -.45px; }
.connection-badge { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.connection-badge.connected { border: 0; background: transparent; }
.view { display: none; animation: appear .18s ease both; }
.view.current { display: block; }
@keyframes appear { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 25px rgb(0 0 0 / 9%); }
.welcome { display: flex; max-width: 1050px; min-height: 145px; align-items: center; justify-content: space-between; gap: 25px; margin: 1px auto 15px; padding: 25px 28px; background: radial-gradient(ellipse at 100% 0, #21172f 0, transparent 44%), var(--surface); }
.welcome h2 { margin: 8px 0 6px; font-size: 22px; font-weight: 690; letter-spacing: -.55px; }
.welcome p, .card-heading p, .section-top p, .afk-card p { max-width: 690px; margin: 0; color: #abb1bf; font-size: 12px; line-height: 1.65; }
.welcome-mark { position: relative; display: grid; width: 69px; height: 69px; flex: 0 0 69px; place-items: center; transform: rotate(5deg); border: 1px solid #76579d; border-radius: 19px; color: #d3baff; background: #171323; box-shadow: 0 0 28px #8350c522; font-size: 40px; font-weight: 350; }
.welcome-mark span { position: absolute; top: 5px; right: 8px; color: var(--violet); font-size: 10px; font-weight: 700; }
.welcome-mark.rustplus-mark { width: 70px; height: 70px; flex: 0 0 70px; transform: none; border: 0; border-radius: 16px; background: transparent; box-shadow: none; }
.rustplus-mark img { display: block; width: 100%; height: 100%; border-radius: 15px; object-fit: cover; }
.welcome-art { position: relative; width: 230px; height: 104px; flex: 0 0 230px; overflow: hidden; border: 1px solid #373944; border-radius: 10px; background: #141620; }
.welcome-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.welcome-art.map-art img { object-fit: contain; }
.welcome-art.map-art::after { display: none; }
.welcome-art::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(17 19 27 / 18%), transparent 38%, rgb(17 19 27 / 12%)); content: ""; pointer-events: none; }
.connect-card { max-width: 1050px; margin: 0 auto; padding: 23px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.card-heading h3, .afk-card h3 { margin: 0 0 5px; font-size: 14px; font-weight: 680; letter-spacing: -.1px; }
.tag { display: inline-flex; align-items: center; padding: 5px 8px; border: 1px solid #4a3b61; border-radius: 6px; color: #cfb1ff; background: #1b1526; font-size: 8px; font-weight: 700; letter-spacing: .8px; white-space: nowrap; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 14px; }
.steps > div { display: flex; min-height: 73px; gap: 11px; padding: 12px; border: 1px solid #242424; border-radius: 9px; background: #0a0a0a; }
.steps > div { min-width: 0; align-items: center; }
.steps > div > span:last-child { min-width: 0; }
.step-brand { display: flex; width: 42px; height: 48px; flex: 0 0 42px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.step-brand img { display: block; max-width: 36px; max-height: 32px; object-fit: contain; }
.step-brand .steam-logo { width: 42px; height: 30px; }
.step-brand .rust-logo { width: 32px; height: 32px; }
.step-brand i { padding: 0; font-size: 8px; line-height: 1; }
.step-brand .heather-logo {
  width: 34px;
  height: 34px;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 45%));
}
#view-connection .heather-brand i,
.steps .heather-brand i {
  background-image: linear-gradient(180deg, #fff 0%, #d7e0ea 46%, #8b909a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.rustplus-tag { gap: 5px; }
.rustplus-tag img { display: block; width: 12px; height: 12px; object-fit: contain; }
.steps i { padding-top: 1px; color: var(--violet); font-size: 9px; font-style: normal; font-weight: 750; }
.steps b, .steps small { display: block; }
.steps b { margin-bottom: 4px; font-size: 10px; font-weight: 680; }
.steps small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.status-strip { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid #262626; border-radius: 8px; color: #c6cbd5; background: #111; font-size: 10px; }
.actions { display: flex; align-items: center; gap: 12px; margin-top: 15px; }
.actions small { color: var(--muted); font-size: 9px; }
.primary, .secondary { min-height: 35px; padding: 8px 13px; border-radius: 7px; font-size: 10px; font-weight: 680; transition: .14s ease; }
.primary { border: 1px solid #9d70e4; color: #fff; background: linear-gradient(135deg, #9359d9, #7040b5); box-shadow: 0 4px 13px #6940a526; }
.primary:hover {
  background: linear-gradient(180deg, #f4f5f7 0%, #c5c8cf 46%, #8b909a 100%);
  border-color: #d7e1ec;
  transform: translateY(-1px);
}
.primary:disabled { cursor: wait; opacity: .55; transform: none; }
.primary span + span { margin-left: 12px; }
.secondary { border: 1px solid var(--line-strong); color: #d0d4dc; background: #171a23; }
.secondary:hover { border-color: #715994; color: #fff; background: #211b2c; }
.manual { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); color: #b6bbc7; font-size: 10px; }
.manual summary { cursor: pointer; }
.manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 13px; }
.manual-grid label { display: flex; flex-direction: column; gap: 5px; color: #aeb4c1; font-size: 10px; }
.manual-grid input, .notice-row input, .test-bar select, .afk-controls input, .tracking input, .chat-compose input, .device-add input, .device-add select, .section-top select, .camera-controls input { min-width: 0; border: 1px solid var(--line-strong); border-radius: 7px; outline: none; color: var(--text); background: #080808; }
.manual-grid input, .notice-row input, .tracking input, .chat-compose input, .device-add input, .device-add select, .camera-controls input { padding: 9px 10px; }
.manual-grid input:focus, .notice-row input:focus, .tracking input:focus, .chat-compose input:focus, .device-add input:focus, .device-add select:focus, .section-top select:focus, .camera-controls input:focus, .test-bar select:focus, .afk-controls input:focus { border-color: #9971d2; box-shadow: 0 0 0 3px #885ac21a; }
.manual-grid button { grid-column: 2; }
.connection-footer { display: grid; max-width: 1050px; grid-template-columns: 1fr 1fr; gap: 13px; margin: 14px auto 0; }
.mini-stat { display: flex; flex-direction: column; gap: 5px; padding: 15px 17px; }
.mini-stat b { font-size: 15px; font-weight: 660; }
.mini-stat small { color: var(--muted); font-size: 9px; }

.section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 2px 0 17px; }
.section-top h2 { margin: 5px 0 4px; font-size: 22px; font-weight: 690; letter-spacing: -.4px; }
.section-top p { font-size: 11px; }
.section-top select { padding: 8px 11px; }
.notice-list { display: flex; flex-direction: column; gap: 8px; }
.notice-row { display: grid; grid-template-columns: 145px minmax(80px, .95fr) 76px minmax(190px, 2.3fr) 72px 60px; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.notice-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.event-mark { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid #383344; border-radius: 8px; color: #d2b5ff; background: #191521; font-size: 11px; font-weight: 700; }
.notice-title b, .notice-title small { display: block; }
.notice-title b { font-size: 10px; font-weight: 700; }
.notice-title small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; }
.notice-row input { width: 100%; padding: 9px 8px; font-size: 10px; }
.notice-row select { width: 100%; padding: 8px 6px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--text); background: #0e1017; font-size: 10px; }
.active-label { display: flex; align-items: center; gap: 5px; color: #aeb4c1; font-size: 9px; white-space: nowrap; }
.active-label input { width: 14px; height: 14px; accent-color: var(--violet-strong); }
.try-small { padding: 7px 6px; border: 1px solid var(--line-strong); border-radius: 6px; color: #d7dbe3; background: #181a23; font-size: 9px; }
.try-small:hover { border-color: #785ba0; background: #211b2d; }
.afk-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 11px; padding: 17px; }
.afk-card p { max-width: 650px; margin-top: 5px; font-size: 10px; }
.amber { color: var(--amber); }
.afk-controls { display: flex; flex-shrink: 0; gap: 9px; }
.afk-controls label { display: flex; align-items: center; gap: 6px; color: #b9bfcb; font-size: 9px; white-space: nowrap; }
.afk-controls input { width: 54px; padding: 7px 6px; }
.test-bar { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.test-bar div { flex: 1; }
.test-bar b, .test-bar small { display: block; }
.test-bar b { font-size: 10px; }
.test-bar small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.test-bar select { padding: 8px 10px; font-size: 9px; }
.tracking { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; padding: 12px 15px; }
.tracking b, .tracking small { display: block; }
.tracking b { font-size: 10px; }
.tracking small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.tracking input { width: 340px; max-width: 48%; padding: 9px 10px; font-size: 9px; }

.dashboard-grid { display: grid; max-width: 1100px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin: 14px auto; }
.dash-stat { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 15px 16px; }
.dash-stat b { color: #f4f2fa; font-size: 23px; font-weight: 690; letter-spacing: -.6px; }
.dash-stat small { color: var(--muted); font-size: 9px; }
.two-col { display: grid; max-width: 1100px; grid-template-columns: 1fr 1fr; gap: 13px; margin: 13px auto; }
.content-card { min-width: 0; padding: 16px; }
.content-card .card-heading { align-items: center; margin-bottom: 11px; }
.content-card .card-heading h3 { margin: 0 0 3px; font-size: 13px; }
.content-card .card-heading p { font-size: 9px; }
.content-card .secondary { min-height: 29px; padding: 6px 9px; font-size: 9px; }
.compact-list, .chat-list, .device-list { display: flex; max-height: 430px; flex-direction: column; gap: 6px; overflow: hidden; }
.member-row { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #292929; border-radius: 8px; background: #0a0a0a; }
.presence { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--red); }
.presence.is-on { background: var(--green); box-shadow: 0 0 8px #61d7a766; }
.member-main { min-width: 0; flex: 1; }
.member-main b, .member-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-main b { font-size: 10px; }
.member-main small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.member-grid { color: #cfb4f8; font-size: 10px; font-weight: 650; }
.event-row { display: grid; grid-template-columns: 62px 75px 1fr; gap: 8px; padding: 8px; border-bottom: 1px solid #252936; font-size: 9px; }
.event-row time { color: var(--muted-2); }
.event-row b { color: #cdb0f5; }
.event-row span { color: #c7cbd4; }
.empty { padding: 29px 16px; color: var(--muted); text-align: center; font-size: 10px; }
.main footer { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding: 15px 0 0; border-top: 1px solid var(--line); color: #6e7584; font-size: 8px; font-weight: 650; letter-spacing: 1px; }

.map-canvas { position: relative; max-width: 100%; overflow: hidden; margin: 11px auto; background: #10121a; }
.map-frame { position: absolute; }
.map-frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
#mapMarkers { position: absolute; container-type: inline-size; }
.map-source-bar { display: grid; grid-template-columns: minmax(240px, 1.5fr) auto minmax(200px, 1fr); align-items: end; gap: 12px; margin-bottom: 10px; padding: 12px 14px; }
.map-source-bar > label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #aeb4c1; font-size: 9px; }
.map-source-bar input { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 7px; outline: none; color: var(--text); background: #0e1017; font-size: 10px; }
.map-source-bar input:focus { border-color: #9971d2; box-shadow: 0 0 0 3px #885ac21a; }
.map-source-copy b, .map-source-copy small { display: block; }
.map-source-copy b { color: #d4c1f1; font-size: 9px; }
.map-source-copy b.map-mismatch { color: var(--amber); }
.map-source-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.map-source-copy.warning b { color: var(--amber); }
.map-layer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 13px; }
.map-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px; }
.spawn-panel { flex-direction: column; align-items: stretch; gap: 10px; }
.spawn-head, .spawn-checks, .spawn-legend, .spawn-opacity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spawn-head b, .spawn-terrain-label { color: #d4c1f1; font-size: 11px; letter-spacing: .08em; }
.spawn-help, #spawnStatus, #zoneStatus, .spawn-terrain-label { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.spawn-sub { margin-left: 18px; }
.spawn-opacity { color: #9aa0ae; font-size: 11px; }
.spawn-opacity input { width: 140px; }
.spawn-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; }
.spawn-legend span { display: inline-flex; align-items: center; color: #9aa0ae; font-size: 10px; }
.item-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid #ffffff14; }
.zone-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zone-group .spawn-terrain-label { flex: 1 0 100%; }
#zoneChecks img { width: 16px; height: 16px; object-fit: contain; }
.item-legend small { color: #8d93a3; font-size: 9px; }
.item-legend img { width: 16px; height: 16px; object-fit: contain; }
.map-item { position: absolute; z-index: 4; width: 22px; height: 22px; transform: translate(-50%, -50%); }
.map-item img, .leaflet-div-icon.map-item-icon img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 2px #000); }
.leaflet-div-icon.map-item-icon { border: 0; background: transparent; }
.pro-check:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.pro-check.is-busy { opacity: .72; }
.map-frame .spawn-overlays { position: absolute; z-index: 1; pointer-events: none; }
.map-frame .spawn-overlays .spawn-sheet { position: absolute; }
.map-frame .spawn-overlays img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.map-frame .spawn-overlays .spawn-place { position: absolute; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 8px #000; pointer-events: none; }
.leaflet-spawnPane { z-index: 450 !important; }
#mapMarkers { z-index: 2; }
.pro-check { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding: 4px 12px 4px 6px; border: 1px solid #2c2c2c; border-radius: 999px; color: #9aa0ae; background: linear-gradient(180deg, #141414, #0c0c0c); font-size: 9px; letter-spacing: .08em; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease; }
.pro-check input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pro-check-box { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; border: 1px solid #4a4a4a; border-radius: 5px; background: #070707; box-shadow: inset 0 1px 2px #000a; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.pro-check-box::after { width: 8px; height: 4px; margin-top: -2px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; content: ""; transform: rotate(-45deg) scale(0); transition: transform .16s cubic-bezier(.2, .85, .2, 1); }
.pro-check:has(input:checked) { border-color: #c5c8cf; color: #eef2f7; background: linear-gradient(180deg, #161a20, #0e1116); box-shadow: inset 0 0 0 1px #c5c8cf33, 0 0 16px #c5c8cf24; }
.pro-check:has(input:checked) .pro-check-box { border-color: transparent; background: linear-gradient(180deg, #e8eef6, #c5c8cf); box-shadow: 0 0 12px #c5c8cf99; }
.pro-check:has(input:checked) .pro-check-box::after { transform: rotate(-45deg) scale(1); }
.pro-check:focus-within { outline: 2px solid var(--violet); outline-offset: 2px; }
.map-layer-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.rustmap-heatmap-group { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 9px 12px; padding-top: 9px; border-top: 1px solid var(--line); }
.rustmap-heatmap-heading { display: flex; min-width: 190px; flex-direction: column; gap: 3px; }
.rustmap-heatmap-heading b { color: #d4c1f1; font-size: 9px; }
.rustmap-heatmap-heading small { color: var(--muted); font-size: 8px; }
.rustmap-heatmap-toggles { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; }
.rustmap-heatmap-toggles .pro-check { min-height: 28px; }
.layer-loading { color: var(--muted); font-size: 8px; }
.heatmap-picker { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #c2c6d0; font-size: 9px; white-space: nowrap; }
.heatmap-picker select { min-width: 130px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--text); background: #10121a; font-size: 9px; }
.map-layer-note { flex-basis: 100%; color: var(--muted); font-size: 8px; }
.rust-map-view { position: relative; z-index: 0; width: 100%; height: min(70vh, 720px); min-height: 440px; overflow: hidden; margin: 0 auto 11px; border-radius: var(--radius); background: #0b3541; }
.rust-map-view .leaflet-container { width: 100%; height: 100%; color: #f3f4f8; background: #0b3541; font: inherit; }
.rust-map-view .leaflet-control-zoom a { border-color: #393443; color: #e9e1f6; background: #15141d; }
.rust-map-view .leaflet-control-zoom a:hover { color: #fff; background: #2a2038; }
.rust-map-view .leaflet-control-attribution { color: #c2c7d0; background: rgb(13 15 21 / 76%); font-size: 8px; }
.rust-map-view .leaflet-tooltip { border: 1px solid #4b4657; border-radius: 5px; color: #f5f3f9; background: #13141bea; box-shadow: 0 3px 10px #0005; font-size: 9px; }
.rust-map-view .leaflet-tooltip-top::before { border-top-color: #4b4657; }
.rust-monument-dot { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #a879ed; box-shadow: 0 0 0 3px #a879ed55; }
.rust-team-dot { width: 14px; height: 14px; border: 2px solid #f4fff9; border-radius: 50%; background: #57d5a4; box-shadow: 0 0 0 4px #57d5a455; }
.rust-team-dot.dead { background: #9aa3ad; box-shadow: 0 0 0 4px #9aa3ad55; }
.rust-death-dot { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #9aa3ad; box-shadow: 0 0 0 4px #9aa3ad66; }
.rust-map-view .leaflet-div-icon { border: 0; background: transparent; }
.rust-map-view .leaflet-control-zoom { overflow: hidden; border: 1px solid #393443; border-radius: 8px; box-shadow: 0 3px 12px #0004; }
.rust-map-view .leaflet-control-zoom a:first-child { border-bottom: 1px solid #393443; }
.map-dot { position: absolute; z-index: 1; width: 11px; height: 11px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #61d7a755; }
.map-dot.dead { background: var(--red); box-shadow: 0 0 0 4px #9aa3ad55; }
.map-dot span { position: absolute; top: -7px; left: 12px; padding: 3px 6px; border-radius: 4px; color: #fff; background: #0c0d13e8; font-size: 9px; white-space: nowrap; }
.map-death-pin { position: absolute; z-index: 2; width: 22px; height: 30px; transform: translate(-50%, -90%); pointer-events: none; }
.map-death-pin img, .map-death { display: block; width: 22px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 1px #0008); }
.leaflet-div-icon.map-death-icon { border: 0; background: transparent; }
.map-pin { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.map-pin .map-point { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border: 1px solid #111; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #000; transform: translate(-50%, -50%); }
.map-pin.is-dead .map-point { background: var(--red); }
/* Team tokens — same compact face + name as minimap */
.map-player {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.map-player-face {
  position: relative;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  overflow: visible;
  border: 2px solid #7cff4a;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 1px #000, 0 1px 3px #000a;
}
.map-player-face img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.map-player-face b {
  color: #fff;
  font: 800 10px/1 "Segoe UI", sans-serif;
}
.map-player-crown {
  position: absolute;
  z-index: 2;
  top: -9px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 16px;
  height: 12px;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px #000c);
  pointer-events: none;
}
.map-player-crown svg { display: block; }
.map-player.is-leader .map-player-face {
  border-color: #e8c56a;
  box-shadow: 0 0 0 1px #000, 0 0 8px rgb(232 197 106 / 35%);
}
.map-player-name {
  max-width: 72px;
  overflow: hidden;
  padding: 1px 5px;
  border-radius: 999px;
  color: #fff;
  background: rgb(0 0 0 / 72%);
  box-shadow: 0 1px 2px #0008;
  font: 700 9px/1.2 "Segoe UI", sans-serif;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.map-zoom { position: absolute; z-index: 4; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.map-zoom button { width: 30px; height: 30px; padding: 0; border: 1px solid #393443; border-radius: 8px; color: #f4efe8; background: #15141d; font-size: 16px; line-height: 1; cursor: pointer; }
.map-zoom button:hover { color: #fff; background: #2a2038; }
#view-map #mapCanvas, #view-map #rustMapCanvas, #view-map #mapCanvas * { user-select: none; -webkit-user-select: none; }
#mapImage { -webkit-user-drag: none; user-select: none; }
#view-map #mapCanvas.map-zoomed { cursor: grab; }
#view-map #mapCanvas.map-dragging { cursor: grabbing; }
.map-player.dead .map-player-face {
  border-color: #9aa3ad;
  filter: grayscale(.35);
}
.map-player.offline { opacity: .75; }
.leaflet-div-icon.map-player-icon {
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  border: 0;
  background: transparent;
}
.map-grid { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-grid line { stroke: rgb(44 57 63 / 72%); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-axis, .map-rad, .map-cell { position: absolute; z-index: 1; white-space: nowrap; pointer-events: none; }
.map-axis { color: #efeae0; font-size: clamp(5px, 0.62cqi, 8px); letter-spacing: 0; font-weight: 650; opacity: .88; text-shadow: 0 1px 2px #000, 0 0 3px #000; transform: translate(-50%, -50%); }
.map-cell {
  color: #2c393f;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(7px, 1.05cqi, 13px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  opacity: .88;
  transform: none;
}
.map-rad {
  color: #1f1f1f;
  font-family: "Permanent Marker", "Segoe UI", cursive;
  font-size: clamp(8px, 1.2cqi, 15px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  opacity: .96;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgb(255 255 255 / 22%), 0 1px 2px rgb(0 0 0 / 45%);
  transform: translate(-50%, -50%);
}
.leaflet-div-icon.map-rad-icon, .leaflet-div-icon.map-axis-icon, .leaflet-div-icon.map-cell-icon { width: 0 !important; height: 0 !important; border: 0; background: transparent; }
.leaflet-div-icon .map-axis { font-size: 7px; letter-spacing: 0; }
.leaflet-div-icon .map-cell { color: #2c393f; font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0; opacity: .88; }
.leaflet-div-icon .map-rad { font-size: 11px; letter-spacing: .01em; }
.chat-list { height: 380px; padding: 4px; }
.chat-message { display: grid; grid-template-columns: 90px 1fr auto; align-items: start; gap: 8px; padding: 8px; border-bottom: 1px solid #252936; font-size: 9px; }
.chat-message b { color: #c9a8f6; }
.chat-message span { overflow-wrap: anywhere; color: #d9dce3; }
.chat-message time { color: var(--muted-2); font-size: 8px; }
.chat-compose { display: flex; gap: 8px; margin-top: 9px; }
.chat-compose input { flex: 1; }
.chat-compose button { padding-inline: 12px; }
.device-add { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 9px; margin-bottom: 11px; padding: 13px; }
.device-pairing-help { margin: 0 0 12px; padding: 12px 14px; color: var(--muted); line-height: 1.55; }
.device-pairing-help b { color: var(--text); }
.device-add label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #aeb4c1; font-size: 9px; }
.device-add button { height: 35px; }
.device-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px; }
.device-card h3 { margin: 5px 0; font-size: 13px; }
.device-card small { display: block; color: var(--muted); font-size: 9px; }
.device-card .device-scope-warning { margin-top: 5px; color: var(--rust); }
.device-card > div > small + small { margin-top: 4px; }
.device-controls { display: flex; align-items: center; gap: 8px; }
.state-pill { padding: 5px 9px; border-radius: 12px; color: #b0b5c0; background: #242733; font-size: 9px; font-weight: 700; }
.state-pill.on { color: var(--green); background: #123326; }
.switch-btn { min-height: 30px; padding: 6px 9px; font-size: 9px; }
.settings-list { max-width: 920px; margin: 0 auto; padding: 5px 18px; }
.settings-list article { display: flex; flex-direction: column; gap: 4px; padding: 14px 3px; border-bottom: 1px solid var(--line); }
.settings-list article:last-child { border: 0; }
.settings-list b { font-size: 11px; }
.settings-list span { color: var(--muted); font-size: 9px; line-height: 1.6; }
.logs-card { overflow: hidden; }
.logs-head, .log-row { display: grid; grid-template-columns: 95px 125px 1fr; align-items: center; gap: 14px; padding: 11px 15px; }
.logs-head { color: #858c9a; background: #171a23; font-size: 8px; font-weight: 750; letter-spacing: 1.1px; }
.log-row { border-top: 1px solid #252936; color: #c9cdd6; font-size: 10px; }
.log-row time { color: var(--muted); font-size: 9px; }
.log-row .level { color: #c8a4f4; }
.logs-card .logs-list { max-height: 65vh; overflow: hidden; }
.camera-controls { display: flex; align-items: end; gap: 10px; margin-bottom: 11px; padding: 14px; }
.camera-controls label { display: flex; flex: 1; flex-direction: column; gap: 5px; color: #aeb4c1; font-size: 9px; }
.camera-frame-wrap { display: grid; min-height: 300px; place-items: center; overflow: hidden; }
.camera-frame-wrap img { display: block; max-width: 100%; height: auto; }
.toast { position: fixed; z-index: 9; right: 22px; bottom: 20px; max-width: min(430px, calc(100vw - 30px)); padding: 11px 14px; transform: translateY(8px); border: 1px solid #594572; border-radius: 8px; color: #ede0ff; background: #1d1826; box-shadow: 0 8px 30px #0008; font-size: 10px; opacity: 0; pointer-events: none; transition: .18s ease; }
.toast.show { transform: none; opacity: 1; }

@media (max-width: 1180px) {
  .main { padding-inline: 24px; }
  .notice-row { grid-template-columns: 125px minmax(70px, .9fr) 68px minmax(155px, 2fr) 61px 53px; gap: 6px; }
  .notice-row input { padding-inline: 7px; font-size: 9px; }
  .active-label { font-size: 8px; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .rail { width: 205px; }
  .main { width: calc(100% - 205px); margin-left: 205px; padding-inline: 18px; --rail-width: 205px; }
  .two-col { grid-template-columns: 1fr; }
  .notice-row { grid-template-columns: 1fr 1fr 70px; }
  .notice-title { grid-column: 1 / 2; }
  .notice-row input:nth-of-type(1) { grid-column: 2; }
  .notice-row select { grid-column: 3; }
  .notice-row input:nth-of-type(2) { grid-column: 1 / 3; }
  .notice-row input:nth-of-type(3) { grid-column: 3; }
  .active-label { grid-column: 1; }
  .try-small { grid-column: 2 / 4; }
  .afk-card { align-items: flex-start; flex-direction: column; }
  .afk-controls { align-self: flex-end; }
  .device-add { grid-template-columns: 1fr 1fr; }
  .device-add button { grid-column: 2; }
  .welcome-art { width: 175px; height: 90px; flex-basis: 175px; }
  .map-source-bar { grid-template-columns: minmax(220px, 1fr) auto; }
  .map-source-copy { grid-column: 1 / -1; }
}
@media (max-width: 850px) {
  html, body { min-width: 0; }
  .rail { width: 66px; padding-inline: 8px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand-image, .brand .sight { max-width: 46px; }
  .brand .sight-glass { display: none; }
  .brand > div:last-child, .rail-label, .nav:not(.active) { font-size: 0; }
  .brand > div:last-child, .rail-label { display: none; }
  .nav { justify-content: center; padding-inline: 0; font-size: 0; }
  .nav-beta { display: none; }
  .nav-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .rail-bottom { justify-content: center; padding-inline: 0; font-size: 0; }
  .rail-bottom button { margin-left: 0; }
  .main { width: calc(100% - 66px); margin-left: 66px; padding-inline: 16px; --rail-width: 66px; }
  .welcome-art { width: 94px; height: 76px; flex-basis: 94px; }
  .map-source-bar { grid-template-columns: 1fr; align-items: stretch; }
  .map-source-copy { grid-column: auto; }
  .map-layer-bar { align-items: stretch; flex-direction: column; }
  .heatmap-picker { margin-left: 0; }
  .rust-map-view { height: 58vh; min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Team cards: clear hierarchy and compact status labels. */
#view-team .two-col { grid-template-columns: minmax(240px, .88fr) minmax(0, 1.12fr); align-items: start; }
#view-team .content-card:first-child { align-self: start; }
#view-team .content-card .card-heading { margin-bottom: 14px; }
#view-team .content-card .card-heading h3 { font-size: 14px; letter-spacing: -.15px; }
#view-team .content-card .card-heading p { color: #8f96a6; }
#teamList { gap: 8px; }
.member-row { min-height: 58px; display: grid; grid-template-columns: 9px 34px minmax(0, 1fr) auto; gap: 12px; padding: 11px 12px; border-color: #292929; border-radius: 10px; background: linear-gradient(115deg, #101010, #0a0a0a); transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.member-avatar {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: visible;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #14181e;
  box-shadow: 0 0 0 2px #c5c8cf99;
  font-size: 12px;
}
.member-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.member-avatar.is-leader { border-color: #e8c56a; box-shadow: 0 0 0 2px rgb(232 197 106 / 35%); }
.member-row:hover { border-color: #4a5560; background: #14110f; }
.member-main { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
.member-name { display: flex; min-width: 0; max-width: 100%; align-items: baseline; gap: 8px; }
.member-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-hours { flex: 0 0 auto; color: #aeb6c2; font-size: 10px; font-weight: 650; }
.member-main b { max-width: 100%; color: #f2f0f7; font-size: 11px; font-weight: 680; }
.member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.member-state, .member-life { display: inline-flex; align-items: center; min-height: 17px; padding: 2px 7px; border: 1px solid #333746; border-radius: 999px; color: #adb3c1; background: #171923; font-size: 8px; font-weight: 600; line-height: 1; }
.member-state.online, .member-life.alive { border-color: #285542; color: #72deb2; background: #10231d; }
.member-life.dead { border-color: #3a4450; color: #aeb6c2; background: #14181e; }
.member-grid { min-width: 42px; padding: 6px 8px; border: 1px solid #433454; border-radius: 7px; color: #d8bdff; background: #211a2b; font-size: 10px; font-weight: 700; text-align: center; }
.member-row-compact { min-height: 48px; }
.member-row-compact .member-avatar { width: 28px; height: 28px; font-size: 11px; }
.member-row-compact .member-state { min-height: 16px; }
@media (max-width: 850px) { #view-team .two-col { grid-template-columns: 1fr; } #view-team .content-card:first-child { align-self: stretch; } }




/* Sidebar brand uses the HYR4D artwork. */
.brand { min-height: 63px; gap: 0; padding-left: 4px; padding-right: 4px; }
.brand-image { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; object-fit: contain; }

/* Redesigned announcements editor. */
#view-notices { width: 100%; max-width: 1120px; margin: 0 auto; padding-bottom: 26px; }
#view-notices .notices-page-head { align-items: flex-start; margin: 2px 0 19px; }
#view-notices .notices-page-head h2 { font-size: 25px; }
#view-notices .notices-page-head p { color: #b7bdc9; font-size: 12px; }
.notices-header-actions { display: grid; grid-template-columns: auto; align-items: center; justify-items: end; gap: 6px 12px; }
.shop-hotkey-btn {
  min-height: 34px;
  min-width: 88px;
  padding: 6px 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.shop-hotkey-btn.is-listening {
  border-color: rgb(215 225 236 / 45%);
  color: #f4f7fb;
  background: rgb(215 225 236 / 10%);
}
.shop-emoji-field {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
}
.shop-emoji-field > span { color: #c6c6ce; font-size: 11px; font-weight: 650; }
.shop-emoji-field small { color: #8a8a94; font-size: 10px; }
.shop-emoji-field code {
  padding: 1px 5px;
  border-radius: 4px;
  color: #d7e1ec;
  background: rgb(215 225 236 / 10%);
  font-size: 10px;
}
#shopEmojiSearch {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #2a2a2e;
  border-radius: 8px;
  color: #f2f3f7;
  background: #0d0d0f;
  font-size: 12px;
}
.shop-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #2a2a2e;
  border-radius: 10px;
  background: #0d0d0f;
}
.shop-emoji-pick {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #d7e1ec;
  background: #161618;
  cursor: pointer;
  text-align: left;
}
.shop-emoji-pick:hover {
  border-color: rgb(215 225 236 / 28%);
  background: #1c1c21;
}
.shop-emoji-pick img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
}
.shop-emoji-pick span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0;
}
.shop-emoji-empty {
  margin: 8px;
  color: #8a8a94;
  font-size: 11px;
}
.notice-connection-state { display: inline-flex; min-height: 30px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; color: #b9bfcc; background: #11131a; font-size: 10px; letter-spacing: .35px; white-space: nowrap; }
.notice-connection-state.connected { border-color: #285441; color: var(--green); background: #102019; }
#view-notices .notices-header-actions .primary { min-height: 40px; padding-inline: 16px; font-size: 11px; }
.notice-dirty-state { grid-column: 1 / -1; min-height: 16px; color: var(--muted); font-size: 10px; opacity: 0; }
.notice-dirty-state.visible { opacity: 1; }
.notice-dirty-state.is-error { color: var(--amber); }
#view-notices .tracking { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(280px, 1.2fr); align-items: start; gap: 13px 24px; margin: 0 0 23px; padding: 19px 21px; }
.tracking-heading h3 { margin: 0 0 4px; font-size: 16px; }
.tracking-heading p { margin: 0; color: #aeb4c1; font-size: 11px; line-height: 1.5; }
#view-notices .tracking-field { display: flex; width: 100%; max-width: none; flex-direction: column; gap: 7px; color: #d9dce4; font-size: 11px; }
#view-notices .tracking-field input { width: 100%; max-width: none; min-height: 42px; padding: 9px 12px; font: 13px "Segoe UI", sans-serif; }
#view-notices .tracking-field input[aria-invalid="true"] { border-color: #6b7684; box-shadow: 0 0 0 2px #6b76841c; }
.field-validation { min-height: 16px; color: #8fd8b7; font-size: 10px; }
.field-validation.invalid { color: #aeb6c2; }
.tracking-help { grid-column: 1 / -1; color: #8f96a6; font-size: 10px; }
#view-notices .notice-list { display: grid; gap: 22px; }
.notice-group { min-width: 0; }
.notice-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 9px; }
.notice-group-heading h3 { margin: 0; color: #e7e5ee; font-size: 15px; }
.notice-group-heading > span { color: #858c9a; font-size: 10px; }
.notice-group-list { display: grid; gap: 9px; }
.notice-card { min-width: 0; overflow: hidden; border: 1px solid #282828; border-radius: 12px; background: linear-gradient(110deg, #101010, #0b0b0b 55%); transition: border-color .16s ease, background .16s ease; }
.notice-card:hover { border-color: #464052; }
.notice-card.is-inactive { background: #10121a; }
.notice-card.is-expanded { border-color: #594572; box-shadow: 0 8px 26px #0002; }
.notice-card-summary { display: flex; min-width: 0; align-items: center; gap: 16px; padding: 5px 16px; }
.notice-open { display: grid; min-width: 0; min-height: 82px; flex: 1; grid-template-columns: 42px minmax(0, 1fr) 28px; align-items: center; gap: 13px; padding: 10px 0; border: 0; border-radius: 0; color: inherit; background: transparent; text-align: left; }
.notice-open:focus-visible { outline-offset: -2px; }
.notice-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #393347; border-radius: 11px; color: #d5baff; background: #1b1723; font-size: 17px; }
.notice-summary-copy { display: grid; min-width: 0; gap: 3px; }
.notice-summary-title { color: #f2f1f6; font-size: 14px; }
.notice-description, .notice-summary-message { overflow: hidden; color: #a8aebb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.notice-summary-message { color: #d4c4ea; font-size: 11px; }
.notice-chevron { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #3a4450; border-radius: 8px; color: #d7e1ec; background: #14181e; transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease; }
.notice-chevron svg { width: 16px; height: 16px; }
.notice-open:hover .notice-chevron { border-color: #d7e1ec; color: #fff; background: #1c222a; }
.notice-open[aria-expanded="true"] .notice-chevron { transform: rotate(180deg); border-color: #d7e1ec; color: #fff; background: #c5c8cf; }
.notice-switch { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: #bdc2cd; font-size: 11px; cursor: pointer; }
/* Full hit-target over the label — a 1×1 input made UIA/automation clicks miss the track. */
.notice-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.notice-switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  border: 1px solid rgb(186 200 214 / 28%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 7%), transparent 40%),
    linear-gradient(180deg, #1c1f24 0%, #0c0e11 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), inset 0 -1px 0 rgb(0 0 0 / 45%);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.notice-switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d7dee6 0%, #9aa3ae 100%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 45%);
  content: "";
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.notice-switch input:checked + .notice-switch-track {
  border-color: #9aafc4;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 14%), transparent 42%),
    linear-gradient(180deg, #3a4450 0%, #1c222a 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 0 14px rgb(197 200 207 / 16%);
}
.notice-switch input:checked + .notice-switch-track::after {
  transform: translateX(16px);
  background: linear-gradient(180deg, #f4f5f7 0%, #c5c8cf 48%, #8b909a 100%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 55%), 0 0 10px rgb(197 210 224 / 35%);
}
.notice-switch input:focus-visible + .notice-switch-track { outline: 2px solid var(--chrome-focus, #9aafc4); outline-offset: 3px; }
.notice-editor { padding: 0 20px 19px; border-top: 1px solid #292c38; }
.notice-editor-fields { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(190px, 1.15fr) minmax(190px, .9fr); align-items: start; gap: 14px; padding-top: 17px; }
.notice-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #d9dce4; font-size: 11px; }
.notice-field > span:first-child { color: #e8e6ef; font-size: 11px; }
.notice-field input, .notice-field select, .notice-field textarea { width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid #373b49; border-radius: 8px; outline: none; color: #f1f2f6; background: #0c0e15; font: 12px "Segoe UI", sans-serif; }
.notice-field select { cursor: pointer; }
.notice-field input:focus-visible, .notice-field select:focus-visible, .notice-field textarea:focus-visible { border-color: #9873c7; box-shadow: 0 0 0 3px #885ac21a; }
.notice-field > small { color: #9299a8; font-size: 10px; line-height: 1.45; }
.notice-delay-control { display: flex; align-items: center; gap: 9px; }
.notice-delay-control input { max-width: 110px; }
.notice-delay-control span { color: #aeb4c1; font-size: 11px; }
.notice-message-field { margin-top: 16px; }
.notice-field textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
.notice-variables { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; color: #aeb4c1; font-size: 10px; }
.notice-variables > div { display: flex; flex-wrap: wrap; gap: 7px; }
.variable-chip { min-height: 29px; padding: 4px 9px; border: 1px solid #4a3a5e; border-radius: 7px; color: #d9c2f7; background: #211a2c; font: 11px "Segoe UI", sans-serif; cursor: pointer; }
.variable-chip:hover { border-color: #9a73c8; background: #2a2038; }
.afk-settings { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(145px, .65fr) minmax(145px, .65fr); align-items: end; gap: 14px; margin-top: 17px; padding: 13px 14px; border: 1px solid #2a3038; border-radius: 9px; background: #14181e; }
.afk-settings > div { display: flex; flex-direction: column; gap: 4px; }
.afk-settings b { color: #c5c8cf; font-size: 11px; }
.afk-settings small { color: #9aa3ad; font-size: 10px; line-height: 1.45; }
.afk-settings label { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; color: #d7e1ec; font-size: 10px; }
.afk-settings input { grid-column: 1; grid-row: 2; min-height: 38px; }
.afk-settings label > span { grid-column: 2; grid-row: 2; color: #a99d89; font-size: 10px; }
.notice-preview { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 17px; padding: 14px 15px; border: 1px solid #303440; border-radius: 9px; background: #0f1118; }
.notice-preview-copy { min-width: 0; }
.notice-preview-label { color: #a98cda; font-size: 9px; letter-spacing: 1px; }
.notice-preview-message { margin: 7px 0 0; overflow-wrap: anywhere; color: #f0edf6; font: 14px/1.45 "Segoe UI", sans-serif; }
.notice-test-status { display: block; margin-top: 5px; color: #aeb4c1; font: 11px/1.45 "Segoe UI", sans-serif; overflow-wrap: anywhere; }
.notice-test-status.loading { color: var(--amber); }
.notice-test-status.success { color: var(--green); }
.notice-test-status.error { color: #aeb6c2; }
.notice-test-button { min-height: 40px; flex: 0 0 auto; padding-inline: 15px; font-size: 11px; }
.notice-test-button:disabled { cursor: progress; opacity: .7; }
@media (max-width: 1080px) {
  .notice-editor-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .notice-delay-field { grid-column: 1 / -1; max-width: 260px; }
  .afk-settings { grid-template-columns: 1fr 1fr; }
  .afk-settings > div { grid-column: 1 / -1; }
}
@media (max-width: 740px) {
  #view-notices .notices-page-head { flex-direction: column; }
  .notices-header-actions { width: 100%; grid-template-columns: 1fr auto; justify-items: start; }
  .notice-dirty-state { justify-self: start; }
  #view-notices .tracking { grid-template-columns: 1fr; }
  .tracking-help { grid-column: auto; }
  .notice-card-summary { align-items: flex-start; gap: 8px; padding-inline: 12px; }
  .notice-open { grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 9px; }
  .notice-icon { width: 32px; height: 32px; }
  .notice-switch { align-self: center; gap: 6px; font-size: 10px; }
  .notice-switch-track { width: 34px; }
  .notice-switch input:checked + .notice-switch-track::after { transform: translateX(12px); }
  .notice-editor { padding-inline: 13px; }
  .notice-editor-fields, .afk-settings { grid-template-columns: 1fr; }
  .notice-delay-field, .afk-settings > div { grid-column: auto; }
  .afk-settings label { grid-template-columns: 1fr auto; }
  .notice-preview { align-items: stretch; flex-direction: column; }
  .notice-test-button { align-self: flex-start; }
}
#view-notices { font-family: "Segoe UI", Inter, system-ui, sans-serif; }
#view-notices h2, #view-notices h3, #view-notices .notice-summary-title { font-family: "Russo One", sans-serif; font-weight: 400; letter-spacing: 0; }

/* Compact game-tool treatment: clear UI text, restrained borders, and Russo One only for headings. */
:root {
  --bg: #030303;
  --rail: #030303;
  --surface: #090909;
  --surface-raised: #101010;
  --surface-soft: #151515;
  --line: #202020;
  --line-strong: #303030;
  --radius: 7px;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
}
body { font-family: "Segoe UI", Inter, system-ui, sans-serif; font-size: 13px; line-height: 1.45; }
h1, h2, h3, .brand b, .welcome h2, .mini-stat b, .dash-stat b, .device-card h3, .tracking-heading h3, .notice-group-heading h3 {
  font-family: "Russo One", "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}
p, small, label, button, input, select, textarea, .nav, .rail-label, .eyebrow, .tag, .connection-badge, .status-strip, .logs-head, .logs-list {
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
}
.rail { padding: 18px 11px 13px; border-right-color: #1b1b1b; background: #030303; }
.brand { padding: 2px 8px 24px; }
.rail-label { padding: 0 10px 8px; color: #777; font-size: 9px; letter-spacing: 1.5px; }
.nav { height: 37px; margin: 1px 0; gap: 9px; padding: 0 9px; border-radius: 5px; color: #b8b8b8; font-size: 12px; }
.nav:hover { border-color: #292929; background: #101010; }
.nav.active { border-color: #3d304d; background: #17121e; box-shadow: inset 2px 0 #a979ed; }
.main { padding-inline: 28px; }
.topbar { height: 64px; flex-basis: 64px; margin-bottom: 19px; background: rgb(3 3 3 / 97%); }
.topbar h1 { font-size: 19px; }
.eyebrow { color: #b18be7; font-size: 9px; letter-spacing: 1.35px; }
.card { border-color: #202020; border-radius: 7px; background: #090909; box-shadow: none; }
.welcome { background: linear-gradient(100deg, #0a0a0a, #0d0b10 100%); }
.welcome h2, .section-top h2 { font-size: 21px; }
.welcome p, .card-heading p, .section-top p, .afk-card p { color: #a8a8a8; font-size: 12px; }
.dashboard-grid, .two-col { gap: 9px; }
.dash-stat, .content-card, .mini-stat { padding: 14px; }
.nav-icon { width: 22px; height: 22px; flex-basis: 22px; }
.notice-connection-state { border-radius: 5px; background: #0d0d0d; font-size: 10px; }
.primary, .secondary { min-height: 34px; border-radius: 5px; font-size: 11px; box-shadow: none; }
.secondary { background: #111; }
.secondary:hover { background: #19151e; }
input, select, textarea, .notice-field input, .notice-field select, .notice-field textarea {
  border-color: #303030;
  border-radius: 5px;
  background-color: #070707;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
}
.notice-card { border-color: #242424; border-radius: 7px; background: #090909; }
.notice-card.is-inactive { background: #070707; }
.notice-card-summary { padding-inline: 12px; }
.notice-icon { border-radius: 6px; background: #15121a; }
.notice-editor { border-top-color: #222; }
.notice-preview, .tracking, .test-bar { border-radius: 7px; background: #070707; }
.notice-preview-message { font-family: "Segoe UI", Inter, system-ui, sans-serif; }
.tag { border-radius: 4px; }
.member-row { border-radius: 6px; }
.device-card, .logs-card, .settings-list { border-radius: 7px; }
.empty { color: #929292; }
@media (max-width: 1050px) {
  .main { padding-inline: 20px; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Rust orange replaces the previous violet accent throughout the app. */
:root {
  --violet: #c5c8cf;
  --violet-strong: #8b909a;
  --violet-soft: #1a1e24;
}
.rust-brand { --rust-orange: #c5c8cf; }
::selection { background: #5c6570; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: #c5c8cf; }
.brand-mark { border-color: #6b7684; color: #d7e1ec; background: #14181e; }
.nav.active, .nav.active:hover { border-color: #2a3038; color: #eef2f7; background: #14181e; box-shadow: inset 2px 0 0 #c5c8cf; }
.nav-icon { color: #c5c8cf; }
.nav.active .nav-icon img { filter: brightness(0) invert(88%); }
.rail-label, .eyebrow { color: #aeb6c2; }
.welcome { background: linear-gradient(100deg, #0a0a0a, #0e1116 100%); }
.welcome-mark { border-color: #4a5560; color: #d7e1ec; background: #12151a; }
.welcome-mark span, .steps i, .notice-preview-label { color: #c5c8cf; }
.tag { border-color: #3a4450; color: #c5c8cf; background: #12151a; }
.primary { border-color: #d7e1ec; color: #fff; background: linear-gradient(135deg, #c5c8cf, #6b7280); }
.primary:hover { border-color: #e8eef6; }
.secondary:hover { border-color: #5c6570; background: #161a20; }
.manual-grid input:focus, .notice-row input:focus, .tracking input:focus, .chat-compose input:focus, .device-add input:focus, .device-add select:focus, .section-top select:focus, .camera-controls input:focus, .test-bar select:focus, .afk-controls input:focus,
.map-source-bar input:focus, .notice-field input:focus-visible, .notice-field select:focus-visible, .notice-field textarea:focus-visible { border-color: #aeb9c6; box-shadow: 0 0 0 3px #aeb9c622; }
.active-label input, .map-layer-toggles input, .rustmap-heatmap-toggles input { accent-color: #c5c8cf; }
.event-mark, .notice-icon { border-color: #3a4450; color: #d7e1ec; background: #14181e; }
.member-grid {
  position: relative;
  display: grid;
  width: 56px;
  min-width: 56px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid #c5c8cfcc;
  border-radius: 5px;
  background:
    linear-gradient(rgb(232 238 246 / 22%) 1px, transparent 1px) center / 100% 50% no-repeat,
    linear-gradient(90deg, rgb(232 238 246 / 22%) 1px, transparent 1px) center / 50% 100% no-repeat,
    radial-gradient(circle at 50% 42%, #3a4450 0, #14181e 62%, #0a0c10 100%);
  box-shadow: inset 0 0 0 1px #0008, 0 0 0 1px #c5c8cf33, 0 6px 14px #0005;
  color: #f4f5f7;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}
.member-grid::before, .member-grid::after { position: absolute; background: rgb(232 238 246 / 16%); content: ""; }
.member-grid::before { top: 3px; bottom: 3px; left: 50%; width: 1px; }
.member-grid::after { top: 50%; right: 3px; left: 3px; height: 1px; }
.member-grid b { position: relative; z-index: 1; padding: 1px 4px; border-radius: 3px; background: rgb(8 6 5 / 55%); text-shadow: 0 1px 2px #000; }
.member-grid.is-empty { border-color: #333; background: #111; box-shadow: none; color: #6e6e6e; }
.member-grid.is-empty::before, .member-grid.is-empty::after { display: none; }
.member-row-compact .member-grid { width: 48px; min-width: 48px; height: 34px; font-size: 11px; }
.notice-connection-state {
  gap: 9px;
  min-height: 34px;
  padding: 0 13px 0 11px;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  background: linear-gradient(180deg, #171717, #0c0c0c);
  box-shadow: inset 0 1px 0 #ffffff14, 0 8px 18px #0004;
  letter-spacing: .14em;
}
.notice-connection-state.connected {
  border-color: #2d7a52;
  color: #b8f6d6;
  background: linear-gradient(180deg, #143024, #0c1914);
  box-shadow: inset 0 0 0 1px #61d7a728, 0 0 18px #2d7a5222;
}
.pulse { width: 8px; height: 8px; flex-basis: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 28%, transparent); }
.pulse.on { color: #49e0a0; animation: status-live 1.7s ease-in-out infinite; }
.pulse.wait { color: #aeb6c2; }
@keyframes status-live {
  0%, 100% { box-shadow: 0 0 0 3px #49e0a033, 0 0 8px #49e0a0aa; }
  50% { box-shadow: 0 0 0 6px #49e0a014, 0 0 14px #49e0a0; }
}
.event-row b, .log-row .level, .chat-message b { color: #c5c8cf; }
.rustmap-heatmap-toggles label:has(input:checked) { border-color: #6b7684; color: #eef2f7; background: #1a1e24; }
.rust-monument-dot { background: #c5c8cf; box-shadow: 0 0 0 3px #c5c8cf55; }
.notice-card.is-expanded { border-color: #6b7684; }
.notice-card:hover { border-color: #4a5560; }
.member-row:hover { border-color: #4a5560; }
.notice-summary-message { color: #e8eef6; }
.notice-chevron { color: #d7e1ec; }
.notice-field input:focus-visible, .notice-field select:focus-visible, .notice-field textarea:focus-visible { border-color: #aeb9c6; }
.variable-chip { border-color: #3a4450; color: #e8eef6; background: #14181e; }
.variable-chip:hover { border-color: #aeb9c6; background: #1c222a; }
.toast { border-color: #4a5560; color: #eef2f7; background: #161a20; }
.topbar { border-bottom: 0; background: #030303; backdrop-filter: none; }

/* Charcoal panels: flat metal, hairline borders, no glass and no ambient glow. */
body::before { content: none; }
.shell { position: relative; z-index: 1; }
.card:not(.rust-map-view),
.notice-card,
.notice-preview,
.tracking,
.test-bar,
.afk-settings,
.steps > div,
.welcome.card,
.content-card,
.dash-stat {
  border: 1px solid #262626;
  background: #111111;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.card:not(.rust-map-view):hover,
.notice-card:hover {
  border-color: #3d2c26;
  background: #141414;
  box-shadow: none;
}
.notice-card.is-inactive { background: #0d0d0d; }
.notice-card.is-expanded { border-color: #6b7684; background: #14110f; }
.notice-editor { background: transparent; }
.notice-icon, .variable-chip, .notice-switch-track, .secondary {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.notice-field input, .notice-field select, .notice-field textarea,
.manual-grid input, .notice-row input, .tracking input, .chat-compose input,
.device-add input, .device-add select, .section-top select, .camera-controls input {
  background: #090909;
  box-shadow: none;
}

.first-run { display: none; position: fixed; z-index: 10000; inset: 0; place-items: center; padding: 24px; background: #000; }
.first-run-active .first-run:not(.license-gate) { display: grid; }
.first-run-active, .first-run-active body { overflow: hidden; }
.first-run-panel { width: min(820px, 100%); max-height: min(94vh, 900px); overflow: hidden; border: 1px solid #292929; border-radius: 14px; background: linear-gradient(145deg, rgb(20 20 20 / 96%), rgb(8 8 8 / 98%)); box-shadow: 0 28px 100px rgb(0 0 0 / 70%), inset 0 1px 0 rgb(255 255 255 / 9%); }
.first-run-panel.is-pair { width: min(980px, 100%); }
.first-run-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #242424; }
.first-run-header img,
.first-run-brand {
  width: 168px;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 35%));
}
.first-run-step { color: #aeb6c2; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.first-run-content { min-height: 300px; max-height: calc(94vh - 145px); overflow: auto; padding: 30px 32px 28px; }
.first-run-eyebrow { margin: 0 0 9px; color: #aeb6c2; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.first-run-title { margin: 0 0 10px; font-family: "Russo One", sans-serif; font-size: clamp(22px, 4vw, 30px); font-weight: 400; line-height: 1.2; }
.first-run-copy { max-width: 560px; margin: 0; color: #b7b7b7; font-size: 14px; line-height: 1.65; }
.first-run-language-heading { margin: 24px 0 4px; font-family: "Russo One", sans-serif; font-size: 16px; font-weight: 400; }
.first-run-language-copy { margin: 0; color: #aaa; font-size: 13px; }
.first-run-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 16px 0 20px; }
.first-run-language { display: flex; min-width: 0; min-height: 64px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #303030; border-radius: 9px; color: #d8d8d8; background: rgb(255 255 255 / 2%); text-align: left; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.first-run-language:hover { border-color: #4a5560; background: rgb(197 210 224 / 7%); }
.first-run-language[aria-pressed="true"] { border-color: #c5c8cf; color: #fff; background: rgb(197 210 224 / 11%); box-shadow: inset 0 0 0 1px rgb(197 210 224 / 20%); }
.first-run-language strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.first-run-language small { display: block; margin-top: 3px; color: #9a9a9a; font-size: 12px; }
.first-run-code { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; color: #aeb6c2; background: rgb(197 210 224 / 12%); font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.first-run-flag {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 10%);
  color: transparent;
  background: #0c0e12;
  font-size: 0;
  line-height: 0;
}
.first-run-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.first-run-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 25px; }
.first-run-actions .primary, .first-run-actions .secondary { min-height: 42px; padding: 0 18px; font-size: 13px; }
.first-run-status { display: flex; align-items: flex-start; gap: 10px; margin-top: 23px; padding: 13px 14px; border: 1px solid #303030; border-radius: 8px; color: #ddd; background: rgb(255 255 255 / 3%); font-size: 13px; line-height: 1.55; }
.first-run-status .pulse { margin-top: 5px; }
.first-run-steps { display: grid; gap: 12px; margin: 23px 0 0; padding: 0; list-style: none; }
.first-run-steps li { display: flex; align-items: flex-start; gap: 12px; color: #c6c6c6; font-size: 13px; line-height: 1.55; }
.first-run-steps b { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 1px solid #3a4450; border-radius: 50%; color: #aeb6c2; font-size: 11px; }

/* Annotated pairing guide — graphite / chrome */
.pair-guide {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
}
.pair-guide-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.pair-shot {
  margin: 0;
  min-width: 0;
}
.pair-shot.is-banner {
  grid-column: 1 / -1;
}
.pair-shot-frame {
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border: 1px solid rgb(186 200 214 / 18%);
  border-radius: 12px;
  background: linear-gradient(165deg, #16181c, #0b0c0e 72%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 12px 28px rgb(0 0 0 / 40%);
}
.pair-shot-stage {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #08090b;
}
.pair-shot-stage img {
  display: block;
  width: 100%;
  height: auto;
}
.pair-shot.is-banner .pair-shot-stage {
  background: #0c0d10;
}
.pair-shot.is-banner .pair-shot-stage img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
/* Spotlight cutout: frame tightly around the target control */
.pair-hotspot {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  width: var(--hw);
  height: var(--hh);
  border: 1.5px solid rgb(232 238 246 / 95%);
  border-radius: 4px;
  box-sizing: border-box;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgb(20 24 30 / 35%),
    0 0 0 9998px rgb(6 7 9 / 64%);
}
.pair-hotspot.is-ok {
  border-color: rgb(180 220 195 / 92%);
  box-shadow:
    inset 0 0 0 1px rgb(20 24 30 / 30%),
    0 0 0 9998px rgb(6 7 9 / 56%);
}
.pair-shot.is-banner .pair-hotspot {
  border-radius: 3px;
}
.pair-shot-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border-top: 1px solid rgb(186 200 214 / 14%);
  color: #14181e;
  background:
    linear-gradient(180deg, #f4f7fa 0%, #c5ced8 48%, #8e99a6 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}
.pair-shot-tag.is-ok {
  color: #e8eef4;
  background: linear-gradient(180deg, #2a3038 0%, #1a1e24 55%, #12151a 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}
.pair-shot-tag-mark {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid rgb(20 24 30 / 28%);
  border-radius: 7px;
  color: #14181e;
  background: linear-gradient(180deg, #fff, #d7e0ea 55%, #9aa8b8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .02em;
}
.pair-shot-tag.is-ok .pair-shot-tag-mark {
  border-color: rgb(170 210 185 / 35%);
  color: #0e1612;
  background: linear-gradient(180deg, #d8f0e2, #8fbfa4 55%, #5f8f74);
}
.pair-shot-tag em {
  color: inherit;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pair-shot-tag.is-ok em {
  background: linear-gradient(180deg, #fff, #d7e0ea 46%, #9aa8b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pair-guide-note {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgb(186 200 214 / 12%);
  border-radius: 10px;
  color: #9aa3ad;
  background: #101214;
  font-size: 12px;
  line-height: 1.5;
}
.pair-guide-note strong {
  color: #d7e1ec;
  font-weight: 650;
}
.pair-guide-mount { margin: 12px 0 4px; }
.pair-guide-mount[hidden] { display: none !important; }
#view-connection .pair-guide { margin: 0; }
@media (max-width: 860px) {
  .pair-guide-track { grid-template-columns: 1fr; }
  .pair-shot.is-banner { grid-column: auto; }
}
.first-run-footer { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 24px; border-top: 1px solid #242424; color: #878787; font-size: 11px; }
.setup-later { padding: 7px 0; border: 0; color: #aaa; background: transparent; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.setup-later:hover { color: #fff; }
.first-run-error { margin-top: 10px; color: #aeb6c2; font-size: 12px; }
html[dir="rtl"] .first-run-header, html[dir="rtl"] .first-run-footer, html[dir="rtl"] .first-run-status, html[dir="rtl"] .first-run-steps li { direction: rtl; }
html[dir="rtl"] .first-run-language { text-align: right; }
html[dir="rtl"] .first-run-header img { object-position: right center; }
html[dir="rtl"] .rail { right: 0; left: auto; border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .main { margin-right: 232px; margin-left: 0; }

/* Desktop fit: keep every app page inside the Tauri viewport without page scrollbars. */
html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.shell { width: 100%; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.rail { height: 100vh; height: 100dvh; overflow: hidden; }
.main { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 10px; }
.topbar { flex-basis: 58px; height: 58px; min-height: 58px; margin-bottom: clamp(8px, 1.2vh, 13px); }
.main footer { flex: 0 0 auto; margin-top: 8px; padding-top: 8px; }
.view.current { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.view > * { flex: 0 0 auto; }

/* Overview and team: let cards share the available height; lists stay readable without inner scrollbars. */
#view-home .welcome { min-height: 96px; margin: 0 auto 8px; padding: 14px 20px; }
#view-home .welcome h2 { margin: 4px 0; font-size: clamp(16px, 1.5vw, 21px); }
#view-home .dashboard-grid { gap: 8px; margin: 0 auto 8px; }
#view-home .dash-stat { gap: 4px; padding: 9px 12px; }
#view-home .dash-stat b { font-size: clamp(17px, 1.7vw, 22px); }
#view-home .two-col { min-height: 0; flex: 1 1 auto; gap: 8px; margin: 0 auto; }
#view-home .content-card { min-height: 0; padding: 11px; overflow: hidden; }
#view-home .content-card .card-heading { margin-bottom: 6px; }
#view-home .compact-list { max-height: none; overflow: hidden; }
#view-home .event-row { grid-template-columns: 48px 62px minmax(0, 1fr); gap: 5px; padding: 5px 3px; font-size: 8px; }
#view-team .section-top { margin: 0 0 8px; }
#view-team .two-col { min-height: 0; flex: 1 1 auto; gap: 9px; margin: 0; }
#view-team .content-card { min-height: 0; display: flex; flex-direction: column; padding: 11px; overflow: hidden; }
#view-team .content-card .card-heading { flex: 0 0 auto; margin-bottom: 7px; }
#view-team #teamList {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}
#view-team #chatMessages {
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}
#view-team .chat-message { grid-template-columns: minmax(65px, 100px) minmax(0, 1fr) auto; gap: 6px; padding: 5px; }
#view-team .chat-compose { flex: 0 0 auto; }

/* Connection and settings: compact vertical rhythm, including the manual pairing fields. */
#view-connection .welcome { min-height: 94px; margin: 0 auto 9px; padding: 13px 19px; }
#view-connection .welcome h2 { margin: 4px 0; font-size: 20px; }
#view-connection .connect-card { width: 100%; max-width: 1050px; margin: 0 auto; padding: 15px 18px; }
#view-connection .steps { gap: 8px; margin: 11px 0 9px; }
#view-connection .steps > div { min-height: 60px; padding: 8px; }
#view-connection .status-strip { padding: 8px 10px; }
#view-connection .actions { margin-top: 9px; }
#view-connection .manual { margin-top: 10px; padding-top: 8px; }
#view-connection .manual-grid { gap: 7px; margin-top: 8px; }
#view-connection .manual-grid input { min-height: 34px; padding: 6px 9px; }
#view-connection .connection-footer { margin: 8px auto 0; gap: 9px; }
#view-connection .mini-stat { gap: 3px; padding: 9px 12px; }
#view-settings .settings-list { width: 100%; }

/* The map and its controls divide the free page area instead of forcing a viewport-sized minimum. */
#view-map .section-top { margin: 0 0 7px; }
#view-map .section-top h2 { margin: 2px 0; font-size: 19px; }
#view-map .section-top p { line-height: 1.35; }
#view-map .map-source-bar { grid-template-columns: minmax(180px, 1.5fr) auto minmax(160px, 1fr); gap: 8px; margin-bottom: 7px; padding: 8px 10px; }
#view-map .map-source-bar input { min-height: 34px; padding: 6px 9px; }
#view-map .map-layer-bar { max-height: 118px; gap: 6px; margin-bottom: 7px; padding: 6px 9px; overflow: hidden; }
#view-map .map-layer-toggles, #view-map .rustmap-heatmap-toggles { gap: 4px; }
#view-map .map-layer-toggles label:not(.pro-check), #view-map .rustmap-heatmap-toggles label:not(.pro-check) { padding: 3px 6px; font-size: 8px; }
#view-map .rustmap-heatmap-group { gap: 5px 8px; padding-top: 5px; }
#view-map .rustmap-heatmap-heading { min-width: 130px; }
#view-map .rustmap-heatmap-heading small, #view-map .map-layer-note { display: none; }
#view-map.view.current { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; gap: 8px; overflow: hidden; }
#view-map .section-top { grid-column: 1; grid-row: 1; }
#view-map #mapSwitches { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; width: auto; max-width: 100%; min-height: 0; margin-bottom: 0; overflow: visible; }
.minimap-zoom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9aa0a8;
  font-size: 12px;
  font-weight: 600;
}
.minimap-zoom input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #2c3138 0%, #14171c 100%);
  box-shadow:
    inset 0 1px 2px #000c,
    0 0 0 1px rgb(215 225 236 / 10%);
  outline: none;
  cursor: pointer;
  accent-color: #d7e1ec;
}
.minimap-zoom input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2c3138 0%, #14171c 100%);
}
.minimap-zoom input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #d7e0ea 46%, #8b909a 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 85%),
    0 0 0 1px rgb(255 255 255 / 25%),
    0 2px 4px #000a;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.minimap-zoom input[type="range"]::-webkit-slider-thumb:hover {
  filter: brightness(1.08);
  transform: scale(1.06);
}
.minimap-zoom input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #2c3138 0%, #14171c 100%);
}
.minimap-zoom input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #d7e0ea 46%, #8b909a 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 85%),
    0 0 0 1px rgb(255 255 255 / 25%),
    0 2px 4px #000a;
  cursor: pointer;
}
.minimap-zoom b {
  min-width: 40px;
  color: transparent;
  background-image: linear-gradient(180deg, #fff 0%, #d7e0ea 46%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0.5px 0 rgb(255 255 255 / 35%))
    drop-shadow(0.3px 0 0 rgb(70 190 255 / 30%))
    drop-shadow(-0.3px 0 0 rgb(255 70 170 / 22%));
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.minimap-shape {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.minimap-shape button {
  min-height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #8a9098;
  background: #16181c;
  box-shadow:
    2px 2px 5px #000,
    -1px -1px 3px #2e3036;
  font: 650 11px "Segoe UI", system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.minimap-shape button:hover { color: #e8eef6; }
.minimap-shape button:active { transform: scale(.97); }
.minimap-shape button.is-on {
  color: #0c0e12;
  background: linear-gradient(180deg, #fff 0%, #d7e0ea 48%, #9aa8b8 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 90%),
    inset 0 -1px 0 rgb(0 0 0 / 18%),
    0 1px 3px #0008;
  font-weight: 750;
}
/* Carte : toggle switches chrome / rust */
#view-map .map-switches {
  gap: 10px 14px;
  align-items: center;
}
#view-map .map-switches .pro-check,
#view-map .map-switches .pro-check:has(input:checked),
#view-map .map-switches .pro-check:hover {
  min-height: 0;
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #8b929c;
  background: transparent;
  box-shadow: none;
  letter-spacing: 0.02em;
  font-size: 12px;
  font-weight: 600;
  transition: color .18s ease;
}
#view-map .map-switches .pro-check:hover { color: #c5ccd6; }
#view-map .map-switches .pro-check:has(input:checked) { color: #eef2f7; }
#view-map .map-switches .pro-check-box {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 40px;
  height: 22px;
  flex: 0 0 40px;
  overflow: hidden;
  border: 1px solid rgb(186 200 214 / 28%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 7%), transparent 40%),
    linear-gradient(180deg, #1c1f24 0%, #0c0e11 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    inset 0 -1px 0 rgb(0 0 0 / 45%),
    inset 0 0 0 1px rgb(0 0 0 / 35%),
    0 1px 2px rgb(0 0 0 / 55%);
  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}
#view-map .map-switches .pro-check-box::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 14%) 50%, transparent 65%);
  content: "";
  opacity: .35;
  pointer-events: none;
}
#view-map .map-switches .pro-check-box::after {
  position: absolute;
  top: 50%;
  left: 2px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 72%), transparent 42%),
    linear-gradient(180deg, #f4f5f7 0%, #c5c8cf 48%, #8b909a 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 80%),
    inset 0 -1px 0 rgb(0 0 0 / 22%),
    0 1px 3px rgb(0 0 0 / 55%);
  content: "";
  transform: translateY(-50%);
  transition:
    transform .22s cubic-bezier(.22, .9, .28, 1),
    left .22s cubic-bezier(.22, .9, .28, 1),
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}
#view-map .map-switches .pro-check:active .pro-check-box::after {
  transform: translateY(-50%) scale(.94);
}
#view-map .map-switches .pro-check:has(input:checked) .pro-check-box {
  border-color: rgb(210 220 232 / 55%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 28%), transparent 40%),
    linear-gradient(180deg, #e8eef6 0%, #aeb9c6 48%, #7a8694 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 55%),
    inset 0 -1px 0 rgb(0 0 0 / 28%),
    0 0 10px rgb(215 225 236 / 18%),
    0 1px 2px rgb(0 0 0 / 45%);
}
#view-map .map-switches .pro-check:has(input:checked) .pro-check-box::after {
  left: 22px;
  border-color: rgb(255 255 255 / 80%);
  background:
    linear-gradient(180deg, #fff 0%, #f4f7fb 42%, #d7dee6 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgb(0 0 0 / 12%),
    0 1px 4px rgb(0 0 0 / 40%);
  transform: translateY(-50%);
}
#view-map .map-switches .pro-check:has(input:checked):active .pro-check-box::after {
  transform: translateY(-50%) scale(.94);
}
#view-map .map-switches .pro-check:focus-within { outline: none; }
#view-map .map-switches .pro-check:focus-within .pro-check-box {
  outline: 2px solid rgb(215 225 236 / 55%);
  outline-offset: 2px;
}
#view-map .map-switches .pro-check:has(input:disabled) {
  opacity: .45;
  cursor: not-allowed;
}
#view-map #mapCanvas, #view-map #rustMapCanvas, #view-map #mapEmpty { grid-column: 1; grid-row: 3; width: 100%; height: 100%; min-height: 0; margin: 0; align-self: stretch; }
#view-map #mapCanvas { position: relative; display: block; }
#view-map #mapCanvas[hidden], #view-map #rustMapCanvas[hidden], #view-map #mapEmpty[hidden] { display: none !important; }
#view-map .rust-map-view { width: 100%; height: 100%; min-height: 0; margin: 0; }
#view-map #rustMapCanvas:not([hidden]) { display: block; }
#view-map .map-source-copy small { display: none; }

/* Annonces: compact event list, with a focused editor replacing the list while open. */
#view-notices .notices-page-head { min-height: 52px; align-items: center; margin: 0 0 7px; }
#view-notices .notices-page-head h2 { margin: 2px 0; font-size: 19px; }
#view-notices .notices-page-head p { line-height: 1.3; }
#view-notices .tracking { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(230px, 1.2fr); gap: 5px 12px; margin-bottom: 7px; padding: 8px 11px; }
#view-notices .tracking-heading h3 { margin: 0; font-size: 12px; }
#view-notices .tracking-heading p, #view-notices .tracking-help { display: none; }
#view-notices .tracking-field { display: grid; grid-template-columns: 75px minmax(0, 1fr); align-items: center; gap: 3px 7px; }
#view-notices .tracking-field > span:first-child { font-size: 10px; }
#view-notices .tracking input { width: 100%; max-width: none; min-height: 32px; padding: 5px 8px; }
#view-notices .tracking-field small { grid-column: 2; margin: 0; font-size: 8px; }
#view-notices .notice-list { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 5px; overflow: auto; }
#view-notices .notice-group, #view-notices .notice-group-list { display: contents; }
#view-notices .notice-group-heading { display: none; }
#view-notices .notice-group-list { gap: 5px; }
#view-notices .notice-card { border-radius: 7px; }
#view-notices .notice-card-summary { min-height: 48px; gap: 8px; padding: 2px 9px; }
#view-notices .notice-open { min-height: 42px; grid-template-columns: 27px minmax(0, 1fr) 28px; gap: 7px; padding: 3px 0; }
#view-notices .notice-chevron { width: 26px; height: 26px; border-radius: 7px; }
#view-notices .notice-chevron svg { width: 15px; height: 15px; }
#view-notices .notice-icon { width: 25px; height: 25px; border-radius: 6px; font-size: 13px; }
.notice-emoji { display: block; width: 20px; height: 20px; object-fit: contain; }
#view-notices .notice-emoji { width: 18px; height: 18px; }
.notice-emoji-field { display: grid; gap: 6px; }
.notice-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid #2a2a2e;
  border-radius: 10px;
  background: #0d0d0f;
}
.notice-emoji-pick {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #9a9aa3;
  background: #161618;
  cursor: pointer;
}
.notice-emoji-pick:hover { border-color: rgb(255 255 255 / 14%); background: #1c1c21; }
.notice-emoji-pick.is-on {
  border-color: rgb(197 210 224 / 55%);
  background: rgb(197 210 224 / 14%);
  box-shadow: 0 0 0 1px rgb(197 210 224 / 20%);
}
.notice-emoji-pick .notice-emoji { width: 22px; height: 22px; }
.notice-emoji-none {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #6f6f78;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
#view-notices .notice-summary-copy { grid-template-columns: minmax(82px, .32fr) minmax(0, .7fr) minmax(0, 1fr); align-items: center; gap: 9px; }
#view-notices .notice-summary-title { font-size: 11px; }
#view-notices .notice-description, #view-notices .notice-summary-message { font-size: 9px; }
#view-notices .notice-switch { gap: 6px; font-size: 9px; }
#view-notices .notice-switch-track { width: 32px; height: 19px; }
#view-notices .notice-switch-track::after { top: 2px; left: 2px; width: 13px; height: 13px; }
#view-notices .notice-switch input:checked + .notice-switch-track::after { transform: translateX(13px); }
.shop-spam { display: grid; flex: 0 0 auto; gap: 8px; margin-top: 8px; padding: 10px 12px; }
.shop-spam-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shop-spam-art { width: auto; height: 148px; background: none; border: 0; }
.shop-spam-head h3 { margin: 0; font-size: 12px; letter-spacing: .08em; }
.shop-spam-head p { margin: 3px 0 0; color: #a8a8a8; font-size: 11px; }
.shop-spam-body { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.shop-spam-global-hint { flex: 1 1 100%; margin: 0; color: var(--muted, #a8a8a8); font-size: 11px; line-height: 1.35; }
.shop-spam-global-hint code { font-size: 10px; }

/* ——— Alertes raid ——— */
#view-alerts.current {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
}
.alerts-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  max-width: 980px;
  padding-bottom: 8px;
}
.alerts-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.alerts-header-copy h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -.3px;
}
.alerts-header-copy p {
  margin: 6px 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.alerts-ready-tag {
  flex: 0 0 auto;
  margin-top: 2px;
}

.alerts-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.alerts-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid #1c1c1c;
  border-radius: 10px;
  background: #0c0c0c;
  transition: border-color .15s ease, background .15s ease;
}
.alerts-status-card:hover { border-color: #2a2a2a; background: #101010; }
.alerts-status-card.is-on {
  border-color: #3a414c;
  background: linear-gradient(180deg, #14181e, #0c0e12);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 0 18px rgb(197 200 207 / 8%);
}
.alerts-status-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid #2a2e36;
  border-radius: 8px;
  color: #c5c8cf;
  background: linear-gradient(180deg, #1a1e26, #101318);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
  overflow: hidden;
}
.alerts-status-icon img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.alerts-status-card[data-alert-check="gcm"] .alerts-status-icon img,
.alerts-status-card[data-alert-check="server"] .alerts-status-icon img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}
.alerts-status-card.is-on .alerts-status-icon {
  border-color: #6b7684;
  background: linear-gradient(180deg, #222830, #14181e);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 0 12px rgb(197 200 207 / 18%);
}
.alerts-status-meta { min-width: 0; }
.alerts-status-meta b {
  display: block;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .02em;
}
.alerts-status-state {
  display: block;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alerts-status-card.is-on .alerts-status-state {
  background-image: linear-gradient(180deg, #f4f5f7 0%, #c5c8cf 48%, #8b909a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.alerts-alarms-panel {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-color: #1c1c1c;
  background: #0b0b0b;
}
.alerts-alarms-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.alerts-alarms-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 680;
}
.alerts-alarms-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.alerts-alarms-head .primary { flex: 0 0 auto; white-space: nowrap; }
.alerts-list { display: grid; gap: 10px; }
.alerts-empty-state {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 22px 16px;
  border: 1px dashed #262626;
  border-radius: 10px;
  background: #090909;
}
.alerts-empty-state b { font-size: 13px; }
.alerts-empty-state p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.alert-card {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  background: #0f0f0f;
  transition: border-color .15s ease;
}
.alert-card:hover { border-color: #2c2c2c; }
.alert-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.alert-card-copy b { display: block; font-size: 13px; }
.alert-card-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.alert-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.alert-card textarea {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  border: 1px solid #242424;
  border-radius: 7px;
  background: #0a0a0a;
}
.alerts-manual {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #1a1a1a;
}
.alerts-manual-head h4 { margin: 0; font-size: 12px; }
.alerts-manual-head p {
  margin: 4px 0 0;
  color: var(--muted-2);
  font-size: 11px;
}
.alerts-manual-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.alerts-manual-row .notice-field { flex: 1 1 140px; }

.alerts-discord {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-color: #1c1c1c;
  background: #0b0b0b;
}
.alerts-discord-copy { flex: 1 1 240px; min-width: 0; }
.alerts-discord-copy h3 { margin: 0; font-size: 13px; font-weight: 680; }
.alerts-discord-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.alerts-discord-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.alerts-disconnect {
  min-height: 34px;
  padding: 8px 12px;
  border: 0;
  border-radius: 5px;
  color: var(--muted-2);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  transition: color .15s ease, background .15s ease;
}
.alerts-disconnect:hover {
  color: #d7dbe3;
  background: #141414;
}

.alerts-howto {
  padding: 0;
  border-color: #1c1c1c;
  background: #0a0a0a;
  overflow: hidden;
}
.alerts-howto > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 16px;
  color: #d5d8e0;
  font-size: 12px;
  font-weight: 680;
  user-select: none;
}
.alerts-howto > summary::-webkit-details-marker { display: none; }
.alerts-howto > summary::after {
  content: '+';
  float: right;
  color: var(--muted-2);
  font-weight: 500;
}
.alerts-howto[open] > summary::after { content: '−'; }
.alerts-howto > summary:hover { background: #0f0f0f; }
.alerts-howto-body {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  justify-content: space-between;
  padding: 0 16px 14px;
  border-top: 1px solid #171717;
}
.alerts-howto ol {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  flex: 1 1 260px;
}
.alerts-howto li + li { margin-top: 4px; }

@media (max-width: 1100px) {
  .alerts-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .alerts-status-grid { grid-template-columns: 1fr; }
  .alerts-alarms-head { flex-direction: column; align-items: stretch; }
}
.shop-spam-body .notice-field { display: grid; gap: 3px; min-width: 0; }
.shop-spam-body .notice-field:first-of-type { flex: 1 1 240px; }
.shop-spam-body textarea { width: 100%; min-height: 96px; resize: vertical; }
#view-notices:has(.notice-card.is-expanded) .tracking,
#view-notices:has(.notice-card.is-expanded) .shop-spam,
#view-notices:has(.notice-card.is-expanded) .notice-card:not(.is-expanded) { display: none; }
#view-notices:has(.notice-card.is-expanded) .notice-list { overflow: hidden; }
#view-notices .notice-card.is-expanded { min-height: 0; flex: 1 1 auto; overflow: hidden; }
#view-notices .notice-card.is-expanded .notice-card-summary { min-height: 48px; }
#view-notices .notice-editor { padding: 0 14px 10px; }
#view-notices .notice-editor-fields { gap: 8px; padding-top: 9px; }
#view-notices .notice-field { gap: 4px; font-size: 10px; }
#view-notices .notice-field input, #view-notices .notice-field select { min-height: 34px; padding: 5px 8px; }
#view-notices .notice-message-field { margin-top: 8px; }
#view-notices .notice-field textarea { min-height: 56px; padding: 7px 8px; resize: none; }
#view-notices .notice-variables { gap: 6px; margin-top: 6px; }
#view-notices .variable-chip { min-height: 24px; padding: 3px 7px; font-size: 10px; }
#view-notices .afk-settings { gap: 7px; margin-top: 7px; padding: 8px; }
#view-notices .afk-settings input { min-height: 31px; }
#view-notices .notice-preview { gap: 10px; margin-top: 8px; padding: 8px 10px; }
#view-notices .notice-preview-message { margin-top: 3px; font-size: 12px; }
#view-notices .notice-test-button { min-height: 34px; }

/* Alert and activity tables show a deliberate recent window; the full retained history remains in app storage. */
#view-alerts .section-top, #view-logs .section-top { margin: 0 0 8px; }
#view-alerts .section-top h2, #view-logs .section-top h2 { margin: 2px 0; font-size: 19px; }
#view-alerts .logs-card, #view-logs .logs-card { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
#view-alerts .logs-list, #view-logs .logs-list { max-height: none; min-height: 0; flex: 1 1 auto; overflow: hidden; }
#view-alerts .logs-head, #view-logs .logs-head,
#view-alerts .log-row, #view-logs .log-row { grid-template-columns: 72px 95px minmax(0, 1fr); gap: 9px; padding: 7px 10px; }
#view-alerts .log-row, #view-logs .log-row { font-size: 9px; }
#view-alerts .log-row:nth-child(n+11), #view-logs .log-row:nth-child(n+13) { display: none; }

@media (max-height: 760px) {
  .rail { padding-top: 11px; padding-bottom: 8px; }
  .brand { min-height: 48px; padding-bottom: 12px; }
  .nav { height: 33px; }
  .rail-bottom { padding-top: 8px; }
  .main { padding-bottom: 7px; }
  .topbar { flex-basis: 52px; height: 52px; min-height: 52px; margin-bottom: 7px; }
  #view-home .welcome { min-height: 82px; padding: 9px 14px; }
  #view-home .dash-stat { padding: 7px 9px; }
  #view-team .member-row { min-height: 42px; padding: 7px 9px; }
  #view-connection .welcome { min-height: 78px; }
  #view-connection .connect-card { padding: 10px 13px; }
  #view-connection .steps { margin: 7px 0; }
  #view-connection .connection-footer { margin-top: 6px; }
  #view-map .map-layer-bar { max-height: 86px; }
  #view-notices .notice-card-summary { min-height: 42px; }
  #view-notices .notice-open { min-height: 38px; }
  #view-notices .notice-card.is-expanded { overflow: hidden; }
}
@media (max-width: 980px) {
  #view-map.view.current { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  #view-map #mapCanvas, #view-map #rustMapCanvas, #view-map #mapEmpty { grid-column: 1; grid-row: 3; height: 100%; min-height: 420px; }
  #view-map .map-source-bar { grid-template-columns: minmax(0, 1fr) auto; }
  #view-map .map-source-copy { display: none; }
  #view-notices .notice-summary-copy { grid-template-columns: minmax(72px, .35fr) minmax(0, .65fr); }
  #view-notices .notice-description { display: none; }
}
@media (max-width: 850px) {
  .main { padding-inline: 12px; }
  #view-home .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-team .two-col { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  #view-map .map-layer-bar { max-height: 92px; }
}

/* Keep the title area on the same continuous ambient background as each page. */
.topbar { background: #030303; border: 0; backdrop-filter: none; }
@media (max-width: 700px) { .first-run-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .first-run { padding: 12px; } .first-run-content { min-height: 0; max-height: calc(94vh - 120px); padding: 24px 20px; } .first-run-header, .first-run-footer { padding-inline: 18px; } .first-run-options { grid-template-columns: 1fr; } .first-run-footer { align-items: flex-start; flex-direction: column; } }


/* Restored equipment and camera pages. */
#view-base .section-top, #view-cameras .section-top { margin: 0 0 8px; }
#view-base .section-top h2, #view-cameras .section-top h2 { margin: 2px 0; font-size: 19px; }
#view-base .section-top p, #view-cameras .section-top p { line-height: 1.35; }
#view-base .device-pairing-help { display: grid; grid-template-columns: minmax(130px, .25fr) minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 8px; padding: 9px 12px; font-size: 10px; }
#view-base .device-add { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; margin: 0 0 8px; padding: 9px 11px; }
#view-base .device-add input { min-height: 34px; padding: 6px 8px; }
#view-base .device-add button { min-height: 34px; height: auto; white-space: nowrap; }
#view-base .device-section-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; margin: 0 0 7px; }
#view-base .device-section-head h3 { margin: 0; font-size: 12px; }
#view-base .device-list { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; overflow: hidden; }
#view-base .device-card { min-width: 0; min-height: 80px; padding: 10px 12px; }
#view-base .device-copy { min-width: 0; overflow-wrap: anywhere; }
#view-base .device-card .eyebrow { font-size: 8px; }
#view-base .device-card h3 { margin: 4px 0; font-size: 12px; }
#view-base .device-card small { font-size: 9px; }
#view-base .device-controls { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
#view-base .state-pill { font-size: 8px; }
#view-base .switch-btn { min-height: 32px; }
#view-cameras .camera-controls { flex: 0 0 auto; margin: 0 0 8px; padding: 9px 11px; }
#view-cameras .camera-controls input { min-height: 36px; }
#view-cameras .camera-controls button { min-height: 36px; }
#view-cameras .camera-layout { display: flex; min-height: 0; flex: 1 1 auto; gap: 9px; overflow: hidden; }
#view-cameras .camera-frame-wrap { min-width: 0; min-height: 0; flex: 1 1 auto; background: #050505; }
#view-cameras .camera-frame-wrap img { width: 100%; height: 100%; object-fit: contain; }
#view-cameras .camera-tools { display: flex; width: 190px; flex: 0 0 190px; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
#view-cameras .camera-tools b { font-size: 11px; }
#view-cameras .camera-tools small { color: var(--muted); line-height: 1.45; }
#view-cameras .camera-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; justify-items: center; }
#view-cameras .camera-pad button { width: 36px; height: 34px; padding: 0; }
#view-cameras .camera-pad button:first-child { grid-column: 2; }
#view-cameras .camera-pad button:nth-child(2) { grid-column: 1; grid-row: 2; }
#view-cameras .camera-pad button:nth-child(3) { grid-column: 3; grid-row: 2; }
#view-cameras .camera-pad button:nth-child(4) { grid-column: 2; grid-row: 3; }
#view-cameras [hidden] { display: none !important; }
#cameraStatus.connected { color: var(--green); border-color: #245c43; }
@media (max-width: 950px) {
  #view-base .device-add { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-base .device-add button { grid-column: 2; }
  #view-base .device-list { grid-template-columns: 1fr; }
  #view-cameras .camera-tools { width: 150px; flex-basis: 150px; }
}
@media (max-width: 650px) {
  #view-base .device-pairing-help { grid-template-columns: 1fr; gap: 4px; }
  #view-base .device-card { align-items: flex-start; flex-direction: column; }
  #view-base .device-controls { width: 100%; justify-content: space-between; }
  #view-cameras .camera-layout { flex-direction: column; }
  #view-cameras .camera-frame-wrap { min-height: 0; flex: 1 1 auto; }
  #view-cameras .camera-tools { width: 100%; flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  #view-cameras .camera-tools small { flex-basis: 100%; }
}

@media(max-height:760px) {
  .first-run { padding:10px; }
  .first-run-panel { max-height:96dvh; }
  .first-run-header { padding:10px 16px; }
  .first-run-header img,
  .first-run-brand { width:132px; max-height:36px; }
  .first-run-content { min-height:0; max-height:calc(96dvh - 100px); padding:12px 18px; }
  .first-run-eyebrow { margin-bottom:4px; }
  .first-run-title { margin-bottom:5px; font-size:22px; }
  .first-run-copy { font-size:12px; line-height:1.4; }
  .first-run-language-heading { margin-top:12px; }
  .first-run-options { gap:6px; margin:8px 0 10px; }
  .first-run-language { min-height:46px; gap:8px; padding:5px 8px; }
  .first-run-language strong { font-size:12px; }
  .first-run-language small { margin-top:1px; font-size:10px; }
  .first-run-code { width:28px; height:28px; flex-basis:28px; }
  .first-run-flag img { border-radius:5px; }
  .first-run-actions,.first-run-status,.first-run-steps { margin-top:12px; }
  .first-run-footer { min-height:42px; padding:7px 16px; }
}

.main { position: relative; z-index: 1; isolation: isolate; }
.rail { border-right-color: #1c1c1c; background: #070707; }
.topbar { background: #070707; border-bottom: 1px solid #1c1c1c; backdrop-filter: none; }

/* Shared chrome: one metal surface, one rust accent, no decorative glow. */
:root { --bg: #070707; --rail: #070707; --surface: #111111; }
html, body { background: #070707; }
.rail-label { color: #8d8d8d; }
.eyebrow { color: #aeb6c2; letter-spacing: .12em; }
.nav { color: #b0b0b0; }
.nav:hover { border-color: transparent; color: #f3f3f3; background: #121212; }
.nav.active, .nav.active:hover { border-color: #2a3038; color: #eef2f7; background: #14181e; box-shadow: inset 2px 0 0 #c5c8cf; }
.primary { border-color: #8b909a; background: #c5c8cf; box-shadow: none; }
.primary:hover { border-color: #d7e1ec; background: #b8c0cc; filter: none; transform: none; }
.secondary { border-color: #2c2c2c; color: #e6e6e6; background: #161616; }
.secondary:hover { border-color: #6a3a2c; color: #fff; background: #14181e; }
.notice-connection-state {
  min-height: 30px;
  border-radius: 4px;
  background: #121212;
  box-shadow: none;
  letter-spacing: .06em;
}
.notice-connection-state.connected {
  border-color: #245c43;
  color: #8ed7b4;
  background: #102019;
  box-shadow: none;
}
.pulse { box-shadow: none; }
.pulse.on { color: #3dcb8c; animation: none; }
.pulse.wait { color: #aeb6c2; }
.pro-check { border-radius: 4px; background: #101010; box-shadow: none; letter-spacing: 0; }
.pro-check:has(input:checked) { border-color: #6b7684; color: #eef2f7; background: #14181e; box-shadow: none; }
.pro-check:has(input:checked) .pro-check-box { background: #c5c8cf; box-shadow: none; }
.presence.is-on { box-shadow: none; }
.tag { border-radius: 4px; }
.empty { padding: 18px 12px; color: #8f8f8f; text-align: left; }
#mapEmpty.empty { display: grid; place-items: center; text-align: center; }
#view-settings .settings-list { max-width: none; padding: 4px 16px; }
#view-settings .settings-list article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); align-items: center; column-gap: 18px; row-gap: 3px; }
#view-settings .settings-list article > span { grid-column: 1; }
#view-settings .settings-list select { grid-column: 2; grid-row: 1 / span 2; width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid #2c2c2c; border-radius: 5px; background: #090909; }
#view-settings .sfx-controls {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}
#view-settings .sfx-controls .pro-check { width: fit-content; }
#view-settings .sfx-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #9aa0ae;
  font-size: 10px;
  letter-spacing: .04em;
}
#view-settings .sfx-volume > span { flex: 0 0 auto; color: #9aa0ae; font-size: 10px; }
#view-settings .sfx-volume input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  accent-color: #d7e1ec;
  cursor: pointer;
}
#view-settings .sfx-volume b {
  flex: 0 0 36px;
  color: #d7e1ec;
  font-size: 10px;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#view-settings .sfx-volume.is-disabled { opacity: .45; pointer-events: none; }
.first-run { background: rgb(7 7 7 / 98%); }
.first-run-panel { background: #101010; box-shadow: 0 24px 70px rgb(0 0 0 / 55%); }
.toast { border-color: #3a4450; background: #14181e; box-shadow: none; }
.main footer { color: #7a7a7a; font-size: 11px; letter-spacing: .04em; }
.nav .nav-icon svg { color: #c8c8c8; }
.nav.active .nav-icon svg { color: #c5c8cf; }
.dashboard-grid,
.two-col,
.welcome,
.connect-card,
.connection-footer,
#view-notices,
#view-settings .settings-list {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}
#view-home .two-col { flex: 0 0 auto; }
#view-home .content-card { height: auto; }
#view-team .two-col { align-items: stretch; }
#view-team .content-card:first-child { align-self: stretch; }

#view-genes .section-top { margin: 0 0 8px; }
#view-genes .section-top h2 { margin: 2px 0; font-size: 19px; }
#view-genes .section-top p { margin: 0; color: #a8a8a8; font-size: 12px; line-height: 1.4; }
#view-genes .section-top p + p { margin-top: 3px; }
.gene-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.gene-actions button:disabled { cursor: not-allowed; opacity: .4; }
.gene-status { min-height: 18px; margin: 0 0 8px; color: #c8c8c8; font-size: 12px; }
.gene-status.error { color: #aeb6c2; }
.gene-status.loading { color: #aeb6c2; }
#view-genes.view.current { overflow: auto; }
#view-genes .gene-layout {
  display: grid;
  min-height: 0;
  flex: 0 0 auto;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.15fr);
  gap: 10px;
  align-items: start;
}
.gene-side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}
.gene-plan {
  min-width: 0;
  min-height: auto;
  overflow: hidden;
}
.gene-side .gene-panel:last-child { min-height: 160px; }
.gene-inventory-panel {
  min-width: 0;
  max-height: min(62vh, 640px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gene-inventory-panel.is-flash {
  border-color: rgb(224 106 58 / 55%);
  box-shadow: 0 0 0 1px rgb(224 106 58 / 35%);
}
.gene-plan-lead { margin: 0 0 8px; color: #c8c8c8; font-size: 12px; line-height: 1.45; }
.gene-plan-result { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; color: #a8a8a8; font-size: 12px; }
.gene-plan-result b { font-size: 16px; letter-spacing: .14em; }
.planter-map { position: relative; width: min(100%, 560px); margin: 4px auto 0; }
.planter-map img { display: block; width: 100%; height: auto; }
.planter-spots { position: absolute; inset: 0; }
.planter-spot { position: absolute; display: grid; justify-items: center; gap: 1px; min-width: 74px; padding: 3px 6px 4px; border: 1px solid #3a3a3a; border-radius: 4px; background: rgb(7 7 7 / 84%); transform: translate(-50%, -50%); }
.planter-spot span { color: #bdbdbd; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.planter-spot b { font-size: 12px; letter-spacing: .08em; }
.planter-spot.is-center { border-color: #c5c8cf; background: rgb(20 24 30 / 92%); }
.planter-spot.is-empty { opacity: .55; }
.spot-n { left: 50%; top: 34%; }
.spot-w { left: 28%; top: 50%; }
.spot-c { left: 50%; top: 52%; }
.spot-e { left: 72%; top: 50%; }
.spot-s { left: 50%; top: 70%; }
/* Pastilles gènes style Rust officiel */
.gene-strip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  vertical-align: middle;
}
.gene-chip {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  color: #f5f5f5;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    inset 0 -2px 4px rgb(0 0 0 / 35%),
    0 1px 2px rgb(0 0 0 / 35%);
}
.gene-join {
  display: inline-block;
  width: 10px;
  height: 2px;
  flex: 0 0 10px;
  margin: 0 -1px;
  background: #5a5a5a;
  border-radius: 1px;
}
.gene-strip.is-compact .gene-chip {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  font-size: 11px;
}
.gene-strip.is-compact .gene-join { width: 7px; flex-basis: 7px; }
.gene-chip.g-G,
.gene-chip.g-Y,
.gene-chip.g-H {
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / 22%), transparent 45%),
    linear-gradient(180deg, #6f8f3a, #4a6424 55%, #3a521c);
}
.gene-chip.g-W,
.gene-chip.g-X {
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / 18%), transparent 45%),
    linear-gradient(180deg, #8b909a, #5c6570 55%, #3a4450);
}
.gene-chip.g-u {
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / 12%), transparent 45%),
    linear-gradient(180deg, #5a5a5a, #3a3a3a);
}
.g-G { color: #8bc34a; }
.g-Y { color: #8bc34a; }
.g-H { color: #8bc34a; }
.g-W { color: #aeb6c2; }
.g-X, .g-u { color: #aeb6c2; }
.gene-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gene-list li em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.gene-list li.is-keep em { color: #3dcb8c; }
.gene-list li.is-drop { opacity: .5; }
.gene-list li.is-drop em { color: #8f8f8f; }
.gene-panel { display: flex; min-height: 0; flex-direction: column; padding: 12px 14px; }
.gene-panel h3 { margin: 0 0 8px; font-size: 13px; }
.gene-list, .gene-history-list { min-height: 0; flex: 1 1 auto; margin: 0; padding: 0; overflow: auto; }
.gene-list { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.gene-list li { padding: 8px 10px; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; }
.gene-code { color: #f4f4f4; font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: .14em; }
.gene-list .gene-strip,
.gene-plan-result .gene-strip,
.gene-grid-cell .gene-strip,
#geneTargetPreview.gene-code,
#geneTargetPreview .gene-strip { letter-spacing: 0; }
.gene-preset .gene-strip { pointer-events: none; }
.gene-history-item .gene-strip { margin-top: 4px; }
.gene-history-list { display: flex; flex-direction: column; gap: 6px; }
.gene-history-item { display: grid; gap: 2px; width: 100%; padding: 8px 9px; border: 1px solid #262626; border-radius: 4px; color: inherit; background: #0d0d0d; text-align: left; }
.gene-history-item b { font-size: 12px; }
.gene-history-item span, .gene-history-item small { color: #9a9a9a; font-size: 11px; }
.gene-history-item small { letter-spacing: .08em; }
.gene-history-item:hover { border-color: #6b7684; }
.gene-list.empty, .gene-history-list.empty { display: block; }
.nav-beta { margin-left: auto; padding: 1px 4px 0; border: 1px solid #3a4450; border-radius: 3px; background: #14181e; color: #aeb6c2; font-size: 8px; font-weight: 700; letter-spacing: .08em; line-height: 13px; }
.nav[data-view="genes"] > span:not(.nav-icon):not(.nav-beta),
.nav[data-view="animals"] > span:not(.nav-icon):not(.nav-beta),
.nav[data-view="health"] > span:not(.nav-icon):not(.nav-beta) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-health .section-top { margin: 0 0 8px; }
#view-health .section-top h2 { margin: 2px 0; font-size: 19px; }
#view-health .section-top p { margin: 0; color: #a8a8a8; font-size: 12px; line-height: 1.4; }
#view-health .section-top p + p { margin-top: 3px; }
#view-health.view.current { overflow: auto; }
.health-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: 10px; margin: 0 0 12px; }
.health-card { display: grid; gap: 6px; }
.health-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #d8d8d8; font-size: 12px; font-weight: 650; }
.health-card .notice-switch { gap: 0; }
.health-card:has(input:not(:checked)) select { opacity: .38; }
.health-limits select { min-height: 34px; padding: 6px 8px; border: 1px solid #2c2c2c; border-radius: 5px; background: #090909; color: #f2f2f2; font: inherit; }
@media (max-width: 900px) { .gene-layout { grid-template-columns: 1fr; } }
@media (max-width: 850px) {
  #view-settings .settings-list article { grid-template-columns: 1fr; }
  #view-settings .settings-list select { grid-column: 1; grid-row: auto; max-width: 280px; }
}
.license-gate {
  z-index: 11000;
  isolation: isolate;
  padding: 18px;
  background:
    radial-gradient(ellipse 68% 48% at 50% 12%, rgb(150 168 186 / 12%), transparent 58%),
    radial-gradient(ellipse 80% 55% at 50% 100%, rgb(36 42 52 / 40%), transparent 60%),
    #050506;
}
.license-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(118deg, transparent 36%, rgb(215 225 236 / 8%) 50%, transparent 64%),
    url("./assets/branding/app-bg.jpg") center / cover no-repeat;
  filter: saturate(.3) brightness(.42);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 42%, #000 18%, transparent 78%);
}
.license-active, .license-active body { overflow: hidden; }
.license-active .license-gate { display: grid; place-items: center; }
.license-checking .license-panel { visibility: hidden; }
.license-checking .license-atmosphere { opacity: .1; }
.license-active .shell, .license-active .first-run:not(.license-gate) { display: none; }
.license-panel {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 36px));
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgb(186 200 214 / 22%);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 5%) 0%, transparent 16%),
    linear-gradient(165deg, #15181d 0%, #0d0f13 48%, #090a0d 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    inset 0 -1px 0 rgb(0 0 0 / 50%),
    0 24px 64px rgb(0 0 0 / 68%);
  animation: hyr4d-enter .55s cubic-bezier(.16, 1, .3, 1) both;
}
.license-panel-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgb(215 225 236 / 28%), transparent) top center / 42% 1px no-repeat;
}
.license-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 14px;
}
.license-brand {
  display: flex;
  min-width: 0;
  align-items: center;
}
.license-brand-mark {
  display: block;
  width: min(168px, 46vw);
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 35%));
}
.license-brand-h,
.license-brand-title { display: none; }
.license-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(186 200 214 / 22%);
  border-radius: 999px;
  color: #b7c0cb;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 7%), transparent 60%),
    #12151a;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.license-panel.is-busy .license-chip { color: #e7eef6; border-color: rgb(215 225 236 / 34%); }
.license-panel.is-ok .license-chip {
  color: #d7e1ec;
  border-color: rgb(215 225 236 / 40%);
}
.license-divider {
  height: 1px;
  margin: 0 22px;
  background: linear-gradient(90deg, transparent, rgb(186 200 214 / 28%), transparent);
}
.license-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 20px 22px 18px !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.license-lock {
  display: grid;
  width: auto;
  height: auto;
  place-items: center;
  margin: 0 auto 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.license-lock-h {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 35%));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.license-title {
  margin: 0 0 8px;
  color: #f3f6f9;
  font-family: "Russo One", sans-serif;
  font-size: clamp(22px, 4.2vw, 28px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.15;
  text-align: center;
}
.license-copy {
  margin: 0;
  color: #9aa3ad;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.license-sub {
  margin: 8px 0 20px;
  color: #6f7884;
  font-size: 11px;
  letter-spacing: .04em;
  text-align: center;
}
.license-sight { display: none; }
.sight { position: relative; container-type: inline-size; }
.sight > img { display: block; width: 100%; height: auto; }
.brand .sight { width: 100%; margin: 0; }
.sight-glass {
  position: absolute;
  left: 18%;
  top: 21.5%;
  width: 64%;
  height: 43%;
  display: grid;
  overflow: hidden;
  place-items: center;
  pointer-events: none;
}
.sight-glass::before,
.sight-glass::after { content: ""; position: absolute; pointer-events: none; }
.sight-glass::before {
  inset: 8% 6%;
  background: radial-gradient(ellipse at 50% 58%, rgb(90 220 255 / 42%), transparent 68%);
  animation: sight-bloom 1.6s ease-in-out infinite;
}
.sight-glass::after {
  left: 6%;
  right: 6%;
  height: 8%;
  background: linear-gradient(transparent, rgb(180 245 255 / 70%), transparent);
  mix-blend-mode: screen;
  animation: sight-scan 2.4s linear infinite;
}
.sight-bolt {
  position: absolute;
  z-index: 2;
  top: 2%;
  left: 0;
  width: 15%;
  height: 96%;
  pointer-events: none;
}
.sight-bolt.right { right: 0; left: auto; }
.sight .sight-name { display: block; margin: 0; font-size: 11.4cqi; letter-spacing: .12em; color: transparent; }
.sight .sight-name b { display: inline; margin: 0; font-size: 1em; font-weight: 400; letter-spacing: inherit; }
.sight-name {
  position: relative;
  z-index: 1;
  background: linear-gradient(100deg, #c8fbff 0%, #fff 42%, #7ef6ff 50%, #fff 58%, #b6f4ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Russo One", sans-serif;
  font-size: 11.4cqi;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  filter: drop-shadow(0 0 5px #7ef) drop-shadow(0 0 12px #09cfff);
  animation: sight-current 1.35s linear infinite, sight-flicker 3.6s infinite;
}
.sight-name b {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  font-weight: 400;
  text-shadow: 0 0 4px #fff, 0 0 12px #fff, 0 0 22px #5df, 0 0 36px #0af;
  animation: sight-core 1.15s ease-in-out infinite;
}
.sight-arc {
  position: absolute;
  z-index: 2;
  right: 10%;
  bottom: 14%;
  left: 10%;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, #fff, transparent) left center / 18% 100% no-repeat,
    linear-gradient(90deg, transparent, rgb(90 220 255 / 75%), transparent);
  filter: drop-shadow(0 0 5px #7ef);
  animation: sight-arc .9s linear infinite;
}
@keyframes sight-bloom { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes sight-scan { from { top: -22%; } to { top: 112%; } }
@keyframes sight-core { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes sight-flicker {
  0%, 18%, 22%, 61%, 65%, 100% { opacity: 1; transform: none; }
  19% { opacity: .35; }
  20% { opacity: 1; transform: translateX(1px); }
  62% { opacity: .62; }
  63% { opacity: 1; }
}
@keyframes sight-current { from { background-position: 120% 0; } to { background-position: -40% 0; } }
@keyframes sight-arc { from { background-position: -20% center, center; } to { background-position: 120% center, center; } }
@media (prefers-reduced-motion: reduce) {
  .sight-name, .sight-name b, .sight-glass::before, .sight-glass::after, .sight-arc { animation: none; }
  .sight-glass::after { display: none; }
}
.license-field {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #c9d2dc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.license-field-label { color: #aeb6c2; }
.license-input-shell { position: relative; display: block; }
.license-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 46px 0 14px;
  border: 1px solid rgb(186 200 214 / 24%);
  border-radius: 10px;
  color: #f4f7fb;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 3.5%), rgb(0 0 0 / 22%)),
    #0a0c10;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 5%),
    inset 0 8px 14px rgb(0 0 0 / 24%);
  font: 13px/1.2 "Segoe UI", sans-serif;
  letter-spacing: .14em;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.license-field input::placeholder {
  color: #5a636f;
  letter-spacing: .16em;
}
.license-field input:hover:not(:disabled) { border-color: rgb(186 200 214 / 36%); }
.license-field input:focus {
  outline: none;
  border-color: #9aafc4;
  box-shadow:
    0 0 0 3px rgb(180 200 220 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 7%);
}
.license-field input:disabled { opacity: .62; cursor: wait; }
.license-reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #8b949f;
  background: transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.license-reveal svg { width: 17px; height: 17px; }
.license-reveal:hover:not(:disabled),
.license-reveal[aria-pressed="true"] {
  color: #e7eef6;
  border-color: rgb(186 200 214 / 20%);
  background: rgb(255 255 255 / 5%);
}
.license-reveal:disabled { opacity: .45; cursor: wait; }
.license-reveal:focus-visible {
  outline: 2px solid var(--chrome-focus, #d7e3f0);
  outline-offset: 1px;
}
.license-status {
  display: grid;
  align-content: start;
  min-height: 34px;
  margin-top: 10px;
}
.license-error {
  margin: 0;
  color: transparent;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.license-status.has-message .license-error { color: #d7b0b0; }
.license-status.is-ok .license-error { color: #c5cdd8; }
.license-actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.license-submit {
  position: relative;
  display: inline-flex;
  width: auto;
  min-width: 168px;
  max-width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: .03em;
}
.license-submit-arrow {
  width: 13px;
  height: 13px;
  opacity: .88;
  flex: 0 0 auto;
}
.license-submit-label { text-align: center; white-space: nowrap; }
.license-submit-spin {
  display: none;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid rgb(20 24 30 / 22%);
  border-top-color: var(--chrome-ink, #14181e);
  border-radius: 50%;
}
.license-panel.is-busy .license-submit-spin {
  display: inline-block;
  animation: license-spin .7s linear infinite;
}
.license-panel.is-busy .license-submit-arrow { display: none; }
.license-panel.is-busy .license-submit-label { opacity: .88; }
.license-note {
  margin: 12px 0 0;
  color: #66707c;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}
.license-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 22px;
  border-top: 1px solid rgb(255 255 255 / 6%);
  color: #6f7884;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 26%));
  font-size: 11px;
  letter-spacing: .04em;
}
.license-footer-mark {
  color: #c5c8cf;
  font-family: "Russo One", sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
}
.license-footer-aside { color: #6f7884; }
@keyframes license-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .license-gate { padding: 12px; }
  .license-panel { width: min(100%, calc(100vw - 24px)); border-radius: 12px; }
  .license-header,
  .license-body,
  .license-footer { padding-inline: 16px; }
  .license-divider { margin-inline: 16px; }
  .license-brand-mark { width: min(132px, 52vw); }
  .license-chip { padding: 5px 8px; font-size: 8px; }
  .license-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .license-panel { animation: none; }
  .license-panel.is-busy .license-submit-spin { animation: none; border-top-color: transparent; }
}
.license-gate .first-run-content { overflow: visible; }

/* Charcoal shell adapted from the 21st dashboard sidebar. */
:root {
  --bg: #000000;
  --rail: #000000;
  --surface: #111113;
  --surface-raised: #16161a;
  --surface-soft: #1c1c21;
  --line: rgb(255 255 255 / 8%);
  --line-strong: rgb(255 255 255 / 14%);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --muted-2: #71717a;
  --accent: #c5c8cf;
}
html, body, .topbar, .license-gate { background: var(--bg); }
.rail { background: var(--rail); border-right-color: var(--line); }
.shell { background: var(--bg); }
.rail-scroll {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
  overflow: hidden;
  scrollbar-width: none;
}
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-group { display: flex; flex-direction: column; gap: 2px; }
.brand { flex: 0 0 auto; padding-bottom: 8px; }
.brand .sight { max-height: 132px; }
.brand .sight > img { width: auto; max-height: 132px; margin-inline: auto; object-fit: contain; }
.page-hint {
  max-width: 460px;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar h1 { font-family: "Segoe UI", Inter, system-ui, sans-serif; font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.card:not(.rust-map-view) {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
}
.welcome.card { background: var(--surface); }
.start-guide {
  display: flex;
  max-width: 1100px;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin: 0 auto 14px;
  padding: 18px 20px;
}
.start-guide .primary { align-self: flex-start; white-space: nowrap; }
.start-guide h2 {
  margin: 4px 0 12px;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.start-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.start-steps li { display: grid; gap: 3px; min-width: 0; }
.start-steps b { font-size: 13px; font-weight: 650; }
.start-steps span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.dash-stat b { font-size: 28px; font-weight: 650; letter-spacing: -.04em; }
.dash-stat small, .welcome p, .card-heading p, .section-top p { color: var(--muted); font-size: 13px; }
.primary {
  border-color: #8b909a;
  background: var(--accent);
  box-shadow: none;
}
.primary:hover { border-color: #d7e1ec; background: #b8c0cc; filter: none; transform: none; }
.secondary { border-color: var(--line-strong); background: var(--surface-raised); }
.notice-connection-state {
  min-height: 34px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.manual-grid input:focus, .notice-row input:focus, .chat-compose input:focus, .license-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(197 210 224 / 18%);
}
#quitBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
}
.rail-quit-label { font-family: "Segoe UI", Inter, system-ui, sans-serif; }
.rail-bottom { flex-direction: column; align-items: stretch; gap: 10px; }
.rail-status-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rail-status-row button { margin-left: auto; }
.rail-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(255 255 255 / 4%);
}
.rail-user[hidden] { display: none; }
.rail-user img,
.rail-avatar-fallback {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: #1c1c1f;
}
.rail-avatar-fallback {
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}
.rail-avatar-fallback[hidden] { display: none; }
.rail-user-copy { display: grid; min-width: 0; }
.rail-user-copy b,
.rail-user-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-user-copy b {
  color: var(--text);
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 650;
}
.rail-user-copy small { color: var(--muted); font-size: 11px; }
@media (min-width: 851px) {
  .rail { width: 252px; padding: 14px 12px 12px; }
  .main { width: calc(100% - 252px); margin-left: 252px; --rail-width: 252px; }
  .rail-label {
    padding: 0 10px 6px;
    color: rgb(161 161 170 / 72%);
    font-family: "Segoe UI", Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .12em;
  }
  .nav {
    height: 36px;
    gap: 10px;
    margin: 0;
    padding: 0 10px;
    border-color: transparent;
    border-radius: 8px;
    color: var(--muted);
    font-family: "Segoe UI", Inter, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
  }
  .nav:hover { border-color: transparent; color: var(--text); background: rgb(255 255 255 / 5%); }
  .nav.active, .nav.active:hover {
    border-color: transparent;
    color: #fff;
    background: rgb(197 210 224 / 16%);
    box-shadow: none;
    font-weight: 600;
  }
  .nav.active .nav-icon img {
    filter: brightness(0) invert(88%);
    opacity: 1;
  }
  .topbar { height: auto; min-height: 72px; flex-basis: auto; padding: 12px 0; }
  .steps > div { min-height: 84px; border-radius: 10px; background: #0c0c0e; }
  .steps b { font-size: 13px; }
  .steps small { font-size: 12px; }
  .primary, .secondary { min-height: 40px; padding: 8px 16px; border-radius: 8px; font-size: 13px; }
}
@media (max-width: 850px) {
  .rail { width: 66px; }
  .main { width: calc(100% - 66px); margin-left: 66px; }
  .rail-label, .rail-quit-label, .rail-user-copy { display: none; }
  .rail-user { justify-content: center; padding: 4px; border: 0; background: transparent; }
  .nav { justify-content: center; padding-inline: 0; font-size: 0; }
  .brand .sight { max-height: 46px; }
  .brand .sight > img { max-height: 46px; }
  .brand .sight-glass { display: none; }
  .start-guide { align-items: stretch; flex-direction: column; }
  .start-steps { grid-template-columns: 1fr; }
  .page-hint { white-space: normal; }
}

/* Sidebar profile footer, adapted from 21st “Sidebar with Search and Profile”. */
@media (min-width: 851px) {
  .rail { padding: 42px 12px 12px; }
  .brand { padding-bottom: 14px; }
  .brand .sight, .brand .sight > img { max-height: 96px; }
  .rail-scroll { gap: 4px; margin-top: 0; overflow: hidden; }
  .rail-group { gap: 1px; }
  .rail-label { padding: 2px 10px 4px; font-size: 9px; letter-spacing: .12em; }
  .nav { height: 30px; padding: 0 8px; border-radius: 8px; }
  .nav-beta {
    padding: 2px 6px;
    border-color: rgb(255 255 255 / 10%);
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    color: var(--muted);
    font-family: "Segoe UI", Inter, system-ui, sans-serif;
    font-size: 10px;
    letter-spacing: .04em;
  }
  .nav.active .nav-beta { border-color: rgb(197 210 224 / 35%); color: #c5c8cf; background: rgb(197 210 224 / 12%); }
  .rail-bottom { gap: 8px; padding: 12px 4px 0; }
  .rail-bottom:has(#railUser:not([hidden])) { flex-direction: row; align-items: center; }
  .rail-bottom:has(#railUser:not([hidden])) .rail-user {
    flex: 1;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .rail-bottom:has(#railUser:not([hidden])) .rail-status-row { width: auto; }
  .rail-bottom:has(#railUser:not([hidden])) #railStatus,
  .rail-bottom:has(#railUser:not([hidden])) #statusDot { display: none; }
  .rail-user img, .rail-avatar-fallback { box-shadow: 0 0 0 2px rgb(255 255 255 / 8%); }
}

/* One type scale and one control style for the whole workspace. */
.main, .first-run, .license-gate {
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
}
.main h1, .main h2, .main h3,
#view-notices h2, #view-notices h3, #view-notices .notice-summary-title,
.welcome h2, .section-top h2, .dash-stat b, .mini-stat b, .card-heading h3,
.first-run-title, .first-run-language-heading {
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-weight: 650;
  letter-spacing: -.02em;
}
.eyebrow, .first-run-eyebrow, .first-run-step {
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
}
.welcome p, .card-heading p, .section-top p, .afk-card p, .content-card .card-heading p,
.dash-stat small, .mini-stat small, .steps small, .empty, .settings-list span,
.manual, .manual-grid label, .status-strip, .actions small, .main footer,
.member-main small, .event-row, .chat-message, .chat-message time,
.device-card small, .device-add label, .map-source-bar > label, .heatmap-picker,
.pro-check, .test-bar small, .test-bar b, .tracking b, .tracking small,
.notice-description, .notice-summary-message, .notice-field, .notice-field > small,
.shop-spam-head p, .logs-head, .log-row, .log-row time {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.45;
}
.steps b, .card-heading h3, .content-card .card-heading h3, .member-main b,
.notice-summary-title, .settings-list b, .shop-spam-head h3, .mini-stat b {
  font-size: 15px;
}
.dash-stat { gap: 8px; padding: 18px; }
.dash-stat b { font-size: 30px; font-weight: 650; }
.welcome, .connect-card, .content-card, .dash-stat, .mini-stat, .settings-list, .device-card {
  border-radius: 14px;
}
.steps { gap: 12px; }
.steps > div { min-height: 88px; border-radius: 12px; background: #101012; }
.status-strip, .member-row, .manual, .test-bar, .tracking, .map-source-bar, .map-layer-bar, .map-switches {
  border-radius: 12px;
}
.member-row { padding: 12px; background: #101012; }
.event-row, .chat-message { padding: 10px 4px; }
.main footer { padding-top: 18px; color: var(--muted-2); font-weight: 500; letter-spacing: .04em; }
.tag, .state-pill, .notice-connection-state {
  min-height: 28px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .06em;
}
.primary, .secondary, .try-small, .switch-btn {
  min-height: 40px;
  border-radius: 10px;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.main select,
.main textarea,
.notice-field input,
.notice-field select,
.notice-field textarea,
#view-notices .notice-field input,
#view-notices .notice-field select,
#view-notices .notice-field textarea {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  background-color: #0c0c0e;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 13px;
}
.main select,
.notice-field select,
.heatmap-picker select,
.test-bar select,
.section-top select,
.device-add select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a1aa' d='M1.2 1.4 6 6.2 10.8 1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.main textarea, .notice-field textarea, #view-notices .notice-field textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.45;
}
.main input:focus, .main select:focus, .main textarea:focus,
.notice-field input:focus, .notice-field select:focus, .notice-field textarea:focus,
.notice-field input:focus-visible, .notice-field select:focus-visible, .notice-field textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(197 210 224 / 18%);
  outline: none;
}
.notice-field, #view-notices .notice-field { gap: 6px; font-size: 12px; }
.notice-field > span:first-child { font-size: 12px; font-weight: 600; }
.pro-check { font-size: 13px; letter-spacing: 0; }
.logs-head { font-size: 11px; letter-spacing: .08em; }
.empty { padding: 28px 16px; }
.view.current { overflow: auto; }
#view-home .dash-stat { padding: 14px 16px; }
#view-home .dash-stat b { font-size: 26px; }
#view-home .event-row,
#view-team .chat-message,
#view-alerts .log-row,
#view-logs .log-row { padding: 8px 4px; font-size: 13px; }
#view-connection .steps > div { min-height: 72px; padding: 12px; }
#view-connection .manual-grid button { grid-column: 1 / -1; justify-self: start; min-width: 220px; }
#view-connection .manual-grid input,
#view-map .map-source-bar input,
#view-notices .notice-field input,
#view-notices .notice-field select,
#view-notices .tracking input,
#view-notices .afk-settings input,
#view-base .device-add input,
#view-settings .settings-list select,
.health-limits select {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}
#view-settings .settings-list select,
#view-notices .notice-field select,
.health-limits select { padding-right: 36px; }
#view-notices .notice-description,
#view-notices .notice-summary-message,
#view-notices .notice-switch,
#view-notices .notice-field,
#view-base .device-card small,
#view-base .device-pairing-help,
#view-connection .status-strip,
#view-connection .actions small { font-size: 13px; }
.content-card .secondary,
#view-notices .notice-test-button,
#view-base .device-add button,
#view-base .switch-btn { min-height: 40px; font-size: 13px; }

/* Annonces: the list and the shop form scroll together, and no summary is clipped. */
#view-notices.view.current { overflow: auto; }
#view-notices .notice-list,
#view-notices:has(.notice-card.is-expanded) .notice-list {
  flex: 0 0 auto;
  overflow: visible;
}
#view-notices .notice-card,
#view-notices .notice-card.is-expanded { overflow: visible; flex: 0 0 auto; }
#view-notices .notice-card-summary { min-height: 0; align-items: center; gap: 12px; padding: 10px 14px; }
#view-notices .notice-open { min-height: 0; align-items: center; }
#view-notices .notice-summary-copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
}
#view-notices .notice-summary-title { font-size: 14px; line-height: 1.3; }
#view-notices .notice-description,
#view-notices .notice-summary-message {
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: unset;
  line-height: 1.35;
}
#view-notices .notice-description { color: #a1a1aa; font-size: 12px; }
#view-notices .notice-summary-message { color: #c5c8cf; font-size: 13px; }
#view-notices .shop-spam {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 16px 18px 18px;
  overflow: visible;
}
#view-notices .shop-spam-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: 16px;
}
#view-notices .shop-spam-art { width: 88px; height: 88px; object-fit: contain; }
#view-notices .shop-spam-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px 14px;
}
#view-notices .shop-spam-body > .notice-icon { display: none; }
#view-notices .shop-spam-body > .notice-field:first-of-type { grid-column: 1 / -1; }
#view-notices .shop-spam-body textarea { min-height: 148px; resize: vertical; }
#view-notices .shop-spam-body > .notice-switch { justify-self: start; align-self: center; }
.connect-card.steam-linked .steps { grid-template-columns: 1fr 1fr; }
.connect-card.steam-linked .steps > div:first-child,
.connect-card.steam-linked .actions,
.connect-card.server-paired .steps,
.connect-card.server-paired .actions { display: none; }
#view-notices #shopSpamTest { justify-self: start; align-self: center; }

/* Studio depth: one light from above, a contact shadow, no glow noise. */
.card:not(.rust-map-view),
.notice-card,
.steps > div,
.dash-stat,
.settings-list,
.shop-spam,
.health-card,
.gene-panel,
.start-guide,
.status-strip,
.map-switches,
.map-layer-bar {
  position: relative;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 7%) 0%, rgb(255 255 255 / 0%) 42%),
    linear-gradient(180deg, #18181c 0%, #101012 100%);
  border: 1px solid rgb(255 255 255 / 10%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    inset 0 -1px 0 rgb(0 0 0 / 55%),
    0 1px 1px rgb(0 0 0 / 45%),
    0 16px 32px -20px rgb(0 0 0 / 85%);
}
.card:not(.rust-map-view)::after,
.notice-card::after,
.steps > div::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / 8%), transparent 34%);
}
.dash-stat, .content-card, .notice-card, .mini-stat, .welcome.card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dash-stat:hover, .content-card:hover, .notice-card:hover, .mini-stat:hover {
  transform: translateY(-2px);
  border-color: rgb(255 255 255 / 16%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    inset 0 -1px 0 rgb(0 0 0 / 55%),
    0 18px 34px -16px rgb(0 0 0 / 90%);
}
.primary {
  background: linear-gradient(180deg, #d7e1ec 0%, #c5c8cf 46%, #5c6370 100%);
  border-color: #6b7684;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 34%),
    inset 0 -1px 0 rgb(0 0 0 / 40%),
    0 8px 16px -8px rgb(197 210 224 / 80%);
}
.primary:hover {
  background: linear-gradient(180deg, #f4f5f7 0%, #c5c8cf 46%, #8b909a 100%);
  transform: translateY(-1px);
}
.secondary {
  background: linear-gradient(180deg, #1c1c21 0%, #121214 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 8px 16px -12px rgb(0 0 0 / 80%);
}
.nav.active, .nav.active:hover {
  background: linear-gradient(180deg, rgb(197 210 224 / 24%), rgb(197 210 224 / 10%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 8px 16px -12px rgb(197 210 224 / 70%);
}
.notice-connection-state {
  background: linear-gradient(180deg, #1c1c21, #121214);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 6px 12px -8px rgb(0 0 0 / 80%);
}
.main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.main select,
.main textarea,
.notice-field input,
.notice-field select,
.notice-field textarea {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(0 0 0 / 18%)), none;
  background-color: #0c0c0e;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), inset 0 10px 16px rgb(0 0 0 / 28%);
}
.main select, .notice-field select, .health-limits select, #view-settings .settings-list select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a1aa' d='M1.2 1.4 6 6.2 10.8 1.4'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(0 0 0 / 18%));
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, center;
  background-size: 12px 8px, 100% 100%;
}
.sight-bolt, .sight-arc, .sight-glass::after { display: none; }
.sight-glass::before { animation: none; opacity: .9; background: radial-gradient(ellipse at 50% 58%, rgb(150 220 255 / 22%), transparent 68%); }
.sight .sight-name, .sight .sight-name b { animation: none; }
.sight .sight-name {
  display: block;
  width: 76%;
  height: auto;
  aspect-ratio: 5.4 / 1;
  background: url("./assets/branding/title-logo.png") center / contain no-repeat;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: transparent;
  font-size: 0;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / 70%)) drop-shadow(0 0 10px rgb(170 230 255 / 42%));
}
.sight .sight-name b { display: none; }
.brand .sight {
  filter: drop-shadow(0 18px 16px rgb(0 0 0 / 62%)) drop-shadow(0 1px 0 rgb(255 255 255 / 10%));
}
@media (min-width: 851px) {
  .brand .sight, .brand .sight > img { max-height: 96px; }
}

/* Stellar-style field: a vertical orange beam on the left, and slow light rays. */
@property --hyr4d-turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
html, body, .shell, .license-gate { background: #000000; }
.shell::before,
.shell::after {
  content: none;
  animation: none;
  background: none;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.main > * { position: relative; z-index: 1; }
.topbar, .rail {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}
.window-drag {
  position: fixed;
  z-index: 12000;
  top: 0;
  left: 0;
  right: 138px;
  height: 76px;
  cursor: grab;
}
.topbar,
.brand {
  cursor: grab;
}
.window-drag:active,
.topbar:active,
.brand:active {
  cursor: grabbing;
}
.window-controls {
  position: fixed;
  z-index: 12001;
  top: 0;
  right: 0;
  display: flex;
  height: 36px;
}
.window-controls button {
  width: 46px;
  height: 36px;
  border: 0;
  border-radius: 0;
  color: #e4e4e7;
  background: transparent;
  font: 15px/1 "Segoe UI", sans-serif;
}
.window-controls button:hover { background: rgb(255 255 255 / 8%); }
#winClose:hover { background: #c5c8cf; color: #fff; }
.rail { padding-top: 44px; }
.main { padding-top: 8px; }
.topbar {
  height: auto;
  min-height: 0;
  flex-basis: auto;
  margin: 0 0 10px;
  padding: 0 148px 0 0;
  border: 0;
  background: transparent;
}
.view.current { animation: hyr4d-enter .62s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hyr4d-beam {
  from { opacity: .72; transform: translate3d(0, -1.5%, 0) scaleY(1); }
  to { opacity: 1; transform: translate3d(18px, 1.5%, 0) scaleY(1.04); }
}
@keyframes hyr4d-rays {
  from { transform: translate3d(-6%, 0, 0); }
  to { transform: translate3d(6%, 0, 0); }
}
@keyframes hyr4d-frame { to { --hyr4d-turn: 360deg; } }
@keyframes hyr4d-enter {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shell::before, .shell::after, .main::before, .view.current, .sight-glass::before { animation: none; }
}

/* Rounded stroke H: thick caps, slanted legs, hard extrusion. */
.sight > img { display: none; }
.brand .sight {
  display: grid;
  width: 100%;
  height: 88px;
  max-height: 88px;
  place-items: center;
  filter: none;
}
.brand .sight-glass,
.license-sight .sight-glass {
  position: relative;
  inset: auto;
  display: grid;
  width: 100%;
  place-items: center;
  overflow: visible;
}
.brand .sight-glass { height: 88px; }
.license-sight .sight-glass { height: 176px; }
.license-sight { height: 176px; }
.sight-glass::before {
  inset: 18% 28%;
  opacity: .35;
  background: radial-gradient(ellipse at 50% 55%, rgb(255 255 255 / 28%), transparent 70%);
  filter: blur(16px);
  animation: hyr4d-title-glow 4.8s ease-in-out infinite alternate;
}
.sight .sight-name {
  position: relative;
  z-index: 1;
  display: block;
  width: 88px;
  height: 88px;
  margin: 0;
  color: #fff;
  background: none;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  filter: none;
  -webkit-text-fill-color: #fff;
  -webkit-mask-image: none;
  mask-image: none;
  animation: none;
}
.brand .sight .sight-name {
  width: 88px;
  height: 88px;
}
.license-sight .sight-name { width: 168px; height: 168px; }
.sight .mark-h {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
}
@keyframes hyr4d-title-glow {
  from { opacity: .45; transform: translate3d(-6%, 0, 0) scale(.96); }
  to { opacity: .9; transform: translate3d(6%, 0, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .sight .sight-name, .sight .sight-name b, .sight-glass::before { animation: none; }
}
.brand { flex-direction: column; align-items: center; }
.brand-echo {
  display: block;
  width: 148px;
  height: auto;
  margin: -6px 0 0;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 850px) {
  .brand-echo { display: none; }
}
#pageTitle {
  display: inline-block;
  margin: 1px 0 0;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.05;
  color: transparent;
  background-image: linear-gradient(180deg, #fff 0%, #d7e0ea 46%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgb(255 255 255 / 55%))
    drop-shadow(0.6px 0 0 rgb(70 190 255 / 55%))
    drop-shadow(-0.6px 0 0 rgb(255 70 170 / 42%))
    drop-shadow(0 2px 0 #050505);
}
.main .card:not(.rust-map-view),
.main .welcome.card,
.main .start-guide,
.main .dash-stat,
.main .mini-stat,
.main .content-card,
.main .connect-card,
.main .notice-card,
.main .steps > div,
.main .settings-list,
.main .shop-spam,
.main .health-card,
.main .gene-panel,
.main .device-card,
.main .status-strip,
.main .map-switches,
.main .map-layer-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 9%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 4.5%), rgb(255 255 255 / 1.2%) 65%),
    #0c0c0e;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 3.5%),
    0 8px 24px rgb(0 0 0 / 18%);
  transform: none;
  animation: none;
}
.main .card:not(.rust-map-view)::before,
.main .steps > div::before,
.main .settings-list::before,
.main .notice-card::before,
.main .shop-spam::before,
.main .health-card::before,
.main .status-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  z-index: 2;
  height: 1px;
  padding: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 18%), transparent);
  pointer-events: none;
  -webkit-mask: none;
  mask: none;
  animation: none;
}
.main .card:not(.rust-map-view)::after,
.main .steps > div::after,
.main .settings-list::after,
.main .notice-card::after,
.main .shop-spam::after,
.main .health-card::after,
.main .status-strip::after {
  content: none;
  animation: none;
}
.main .card .eyebrow,
.main .dash-stat .eyebrow,
.main .mini-stat .eyebrow,
.main .start-guide .eyebrow,
.main .device-card .eyebrow {
  margin: 0 0 12px;
  color: #969397;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.main .welcome h2,
.main .start-guide h2,
.main .dash-stat b,
.main .mini-stat b {
  color: #f2f0ee;
  background: none;
  -webkit-text-fill-color: #f2f0ee;
  filter: none;
  font-weight: 600;
  letter-spacing: -.04em;
  text-shadow: none;
}
.main .dash-stat b,
.main .mini-stat b {
  font-size: 28px;
}
.main .card-heading h3,
.main .gene-panel > h3,
.main .health-card h3,
.main .shop-spam-head h3 {
  color: #f2f0ee;
  background: none;
  -webkit-text-fill-color: #f2f0ee;
  filter: none;
  font-weight: 600;
  letter-spacing: -.02em;
  text-shadow: none;
}
.main .welcome p,
.main .start-guide p,
.main .card-heading p,
.main .dash-stat small,
.main .mini-stat small,
.main .section-top p {
  color: #929095;
  -webkit-text-fill-color: #929095;
  background: none;
  filter: none;
  text-shadow: none;
}
.main .notice-card {
  transition: border-color var(--chrome-fast) ease, background-color var(--chrome-fast) ease;
}
.main .notice-card:hover,
.main .notice-card.is-expanded {
  border-color: rgb(168 186 206 / 62%);
  background-color: #101216;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 3.5%),
    0 8px 24px rgb(0 0 0 / 18%);
}
.main .notice-card:focus-within {
  outline: 2px solid var(--chrome-focus);
  outline-offset: 3px;
}
.main .dash-stat:hover,
.main .content-card:hover,
.main .mini-stat:hover {
  transform: none;
  border-color: rgb(255 255 255 / 9%);
}
@media (prefers-reduced-motion: reduce) {
  .main .notice-card { transition: none; }
}

/* Shared chrome for clickable controls. Cards and the page background stay graphite and black. */
:root {
  --chrome-ink: #14181e;
  --chrome-text: #e7eef6;
  --chrome-muted: #9aa3ad;
  --chrome-silver: #d7e1ec;
  --chrome-steel: #8d9bab;
  --chrome-line: rgb(186 200 214 / 46%);
  --chrome-focus: #d7e3f0;
  --chrome-radius: 11px;
  --chrome-fast: 160ms;
  --chrome-sheen: 8.6s;
}
@keyframes hyr4d-sheen {
  0% { transform: translate3d(-180%, 0, 0) rotate(18deg); opacity: 0; }
  7% { opacity: .9; }
  20% { transform: translate3d(430%, 0, 0) rotate(18deg); opacity: 0; }
  100% { transform: translate3d(430%, 0, 0) rotate(18deg); opacity: 0; }
}
@keyframes hyr4d-nav-sheen {
  0%, 64% { transform: translate3d(-190%, 0, 0) rotate(16deg); opacity: 0; }
  72% { opacity: .42; }
  86% { transform: translate3d(420%, 0, 0) rotate(16deg); opacity: 0; }
  100% { transform: translate3d(420%, 0, 0) rotate(16deg); opacity: 0; }
}
::selection { color: var(--chrome-ink); background: #c5d3e0; }
button:focus-visible,
.nav:focus-visible,
summary:focus-visible,
.pro-check:focus-within,
.notice-switch input:focus-visible + .notice-switch-track {
  outline: 2px solid var(--chrome-focus);
  outline-offset: 2px;
}
.main input:focus,
.main select:focus,
.main textarea:focus,
.notice-field input:focus,
.notice-field select:focus,
.notice-field textarea:focus,
.notice-field input:focus-visible,
.notice-field select:focus-visible,
.notice-field textarea:focus-visible,
.manual-grid input:focus,
.chat-compose input:focus,
.license-field input:focus,
.map-source-bar input:focus,
.device-add input:focus,
.device-add select:focus {
  border-color: #9aafc4;
  box-shadow: 0 0 0 3px rgb(180 200 220 / 18%);
  outline: none;
}
.primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--chrome-ink);
  border: 1px solid #c5d0dc;
  border-radius: var(--chrome-radius);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 62%) 0%, rgb(255 255 255 / 0%) 40%),
    linear-gradient(145deg, #f7fafc 0%, #d5dee8 22%, #8d9bab 48%, #eef3f8 62%, #6f7d8d 82%, #c9d3df 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 88%),
    inset 0 -1px 0 rgb(18 22 28 / 42%),
    0 6px 12px rgb(0 0 0 / 32%);
  filter: none;
  transition: transform var(--chrome-fast) ease, box-shadow var(--chrome-fast) ease, border-color var(--chrome-fast) ease;
}
.primary::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 92%), transparent);
  pointer-events: none;
}
.primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  left: 0;
  width: 34%;
  height: 180%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 0%) 18%, rgb(255 255 255 / 78%) 50%, rgb(255 255 255 / 0%) 82%, transparent 100%);
  transform: translate3d(-180%, 0, 0) rotate(18deg);
  opacity: 0;
  animation: hyr4d-sheen var(--chrome-sheen) ease-in-out infinite;
}
.primary:nth-child(2n)::after { animation-delay: -3.4s; }
.primary:nth-child(3n)::after { animation-delay: -6.1s; }
.start-guide .primary::after { animation-delay: -4.6s; }
#chatSend::after { animation-delay: -7.2s; }
#geneScan::after { animation-delay: -2.3s; }
#saveBtn::after { animation-delay: -5.5s; }
.primary:hover:not(:disabled) {
  border-color: #f4f7fb;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 78%) 0%, rgb(255 255 255 / 0%) 42%),
    linear-gradient(145deg, #fff 0%, #e4ebf2 22%, #9aabbc 48%, #f7fafc 62%, #7d8b9b 82%, #d5dee8 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgb(18 22 28 / 38%),
    0 8px 14px rgb(0 0 0 / 36%);
  filter: none;
  transform: translateY(-1px);
}
.primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgb(20 24 32 / 35%),
    inset 0 1px 0 rgb(255 255 255 / 45%);
}
.primary:disabled,
.primary:disabled:hover {
  color: #66717c;
  border-color: #3c4550;
  background: linear-gradient(180deg, #2a3038, #171b21);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  filter: none;
  transform: none;
  cursor: not-allowed;
}
.primary:disabled::after { animation: none; opacity: 0; }
.secondary,
.try-small,
.switch-btn,
.variable-chip,
#quitBtn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--chrome-text);
  border: 1px solid rgb(176 190 206 / 30%);
  border-radius: var(--chrome-radius);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 48%),
    linear-gradient(180deg, #232830, #14181d);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 14%),
    inset 0 -1px 0 rgb(0 0 0 / 46%),
    0 4px 10px rgb(0 0 0 / 28%);
  transition: border-color var(--chrome-fast) ease, background var(--chrome-fast) ease, color var(--chrome-fast) ease;
}
.secondary::before,
.try-small::before,
.switch-btn::before,
.variable-chip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 28%), transparent);
  pointer-events: none;
}
.secondary:hover:not(:disabled),
.try-small:hover,
.switch-btn:hover:not(:disabled),
.variable-chip:hover,
#quitBtn:hover {
  color: #fff;
  border-color: rgb(214 224 234 / 58%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 14%), transparent 52%),
    linear-gradient(180deg, #2d343e, #181c22);
}
.secondary:active:not(:disabled),
.try-small:active,
.switch-btn:active:not(:disabled),
.variable-chip:active,
#quitBtn:active {
  transform: translateY(1px);
}
.secondary:disabled,
.secondary:disabled:hover,
.switch-btn:disabled,
.switch-btn:disabled:hover {
  color: #6a727c;
  border-color: #2c323a;
  background: #14171c;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.rail .nav {
  color: var(--chrome-muted);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
}
.rail .nav .nav-icon,
.rail .nav .nav-icon svg { color: #d7e1ec; }
.rail .nav .nav-icon img {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0.5px 0 rgb(255 255 255 / 40%))
    drop-shadow(0.35px 0 0 rgb(70 190 255 / 35%))
    drop-shadow(-0.35px 0 0 rgb(255 70 170 / 22%));
  opacity: .9;
}
.rail .nav:hover {
  color: var(--chrome-silver);
  background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%));
  border-color: rgb(255 255 255 / 8%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}
.rail .nav:hover .nav-icon,
.rail .nav:hover .nav-icon svg { color: #f4f7fb; }
.rail .nav:hover .nav-icon img {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0.5px 0 rgb(255 255 255 / 55%))
    drop-shadow(0.4px 0 0 rgb(70 190 255 / 45%))
    drop-shadow(-0.4px 0 0 rgb(255 70 170 / 28%));
  opacity: 1;
}
.rail .nav.active,
.rail .nav.active:hover {
  color: #f4f7fb;
  border-color: rgb(158 176 194 / 55%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, transparent 42%),
    linear-gradient(180deg, #2c343e 0%, #14181e 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 30%),
    inset 0 -1px 0 rgb(0 0 0 / 52%);
  font-weight: 600;
}
.rail .nav.active .nav-icon,
.rail .nav.active .nav-icon svg { color: #f4f7fb; }
.rail .nav.active .nav-icon img {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0.5px 0 rgb(255 255 255 / 55%))
    drop-shadow(0.4px 0 0 rgb(70 190 255 / 45%))
    drop-shadow(-0.4px 0 0 rgb(255 70 170 / 28%));
  opacity: 1;
}
.rail .nav.active .nav-beta {
  border-color: rgb(197 210 224 / 35%);
  color: var(--chrome-silver);
  background: rgb(255 255 255 / 8%);
}
.rail .nav.active::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  left: 0;
  width: 28%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 28%), transparent);
  animation: hyr4d-nav-sheen 10s ease-in-out infinite;
}
.rail .nav:not(.active)::after { content: none; animation: none; }
.pro-check:has(input:checked) {
  border-color: rgb(168 186 206 / 58%);
  color: var(--chrome-text);
  background: linear-gradient(180deg, #222830, #14181d);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%);
}
.pro-check:has(input:checked) .pro-check-box {
  border-color: transparent;
  background: linear-gradient(180deg, #f7fafc, #8d9bab);
  box-shadow: inset 0 1px 0 #fff;
}
.pro-check:has(input:checked) .pro-check-box::after { border-bottom-color: var(--chrome-ink); border-left-color: var(--chrome-ink); }
/* Map layer switches keep pill thumbs (not checkbox ticks) */
#view-map .map-switches .pro-check,
#view-map .map-switches .pro-check:has(input:checked) {
  border: 0;
  background: transparent;
  box-shadow: none;
}
#view-map .map-switches .pro-check:has(input:checked) .pro-check-box {
  border-color: rgb(210 220 232 / 55%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 28%), transparent 40%),
    linear-gradient(180deg, #e8eef6 0%, #aeb9c6 48%, #7a8694 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 55%),
    inset 0 -1px 0 rgb(0 0 0 / 28%),
    0 0 10px rgb(215 225 236 / 18%),
    0 1px 2px rgb(0 0 0 / 45%);
}
#view-map .map-switches .pro-check-box::after,
#view-map .map-switches .pro-check:has(input:checked) .pro-check-box::after {
  top: 50%;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(255 255 255 / 55%);
  border-bottom-color: rgb(255 255 255 / 55%);
  border-left-color: rgb(255 255 255 / 55%);
  border-radius: 50%;
  transform: translateY(-50%) rotate(0) scale(1);
  -webkit-mask: none;
  mask: none;
}
#view-map .map-switches .pro-check:has(input:checked) .pro-check-box::after {
  left: 22px;
  border-color: rgb(255 255 255 / 80%);
  border-bottom-color: rgb(255 255 255 / 80%);
  border-left-color: rgb(255 255 255 / 80%);
  transform: translateY(-50%);
}
.notice-open[aria-expanded="true"] .notice-chevron {
  border-color: #9aafc4;
  color: var(--chrome-ink);
  background: linear-gradient(180deg, #f4f7fb, #9aa8b8);
}
.first-run-language:hover {
  border-color: rgb(176 190 206 / 42%);
  background: rgb(255 255 255 / 5%);
}
.first-run-language[aria-pressed="true"] {
  border-color: rgb(186 200 214 / 72%);
  color: #f4f7fb;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 12%), transparent 48%),
    #1a1f26;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%);
}
.first-run-language[aria-pressed="true"] .first-run-code:not(.first-run-flag) {
  color: var(--chrome-ink);
  background: linear-gradient(180deg, #f7fafc, #b7c3d1);
}
.first-run-language[aria-pressed="true"] .first-run-flag {
  border-color: rgb(215 225 236 / 40%);
  background: #0c0e12;
}
.setup-later { color: #c5d2e0; }
.setup-later:hover { color: #f7fafc; }
.main a:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) {
  color: #c5d2e0;
  text-underline-offset: 3px;
}
.main a:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):hover,
.main a:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):focus-visible {
  color: #f7fafc;
  text-decoration: underline;
}
.rust-map-view .leaflet-control-zoom a {
  color: var(--chrome-silver);
  background: #161a20;
  border-color: rgb(176 190 206 / 28%);
}
.rust-map-view .leaflet-control-zoom a:hover {
  color: #fff;
  background: #262c34;
}
.window-controls button:focus-visible { outline: 2px solid var(--chrome-focus); outline-offset: -4px; }
#winClose:hover { background: #5c6570; color: #fff; }
.lookup-layout { display: grid; gap: 14px; }
.lookup-card { display: grid; gap: 14px; }
.lookup-field { display: grid; gap: 6px; color: #9aa3ad; font-size: 12px; font-weight: 600; }
.lookup-field input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 8px;
  color: #f2f0ee;
  background: #000;
}
.lookup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lookup-status { min-height: 20px; margin: 0; color: #c5d0dc; font-size: 13px; }
.lookup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lookup-head h3 { margin: 0; }
.lookup-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgb(176 190 206 / 35%);
  border-radius: 999px;
  color: #d7e1ec;
  background: rgb(255 255 255 / 4%);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lookup-note, .lookup-profile-note { margin: 0; color: #929095; font-size: 13px; }
.lookup-profile { display: flex; gap: 14px; align-items: flex-start; }
.lookup-avatar { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: #000; }
.lookup-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.lookup-facts div { min-width: 0; }
.lookup-facts dt { color: #969397; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.lookup-facts dd { margin: 4px 0 0; color: #f2f0ee; font-size: 14px; overflow-wrap: anywhere; }
.lookup-facts a { color: #c5d2e0; }
.lookup-copy { margin-top: 6px; }
.lookup-history { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.lookup-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.lookup-history-open {
  min-width: 0;
  padding: 0;
  border: 0;
  color: #f2f0ee;
  background: transparent;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.lookup-history time { color: #929095; font-size: 12px; }
.lookup-history-empty { color: #929095; }
@media (max-width: 720px) {
  .lookup-facts { grid-template-columns: 1fr; }
  .lookup-history li { grid-template-columns: 1fr; }
}
@media (min-width: 851px) { .rail-scroll { gap: 6px; overflow: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .primary,
  .primary::after,
  .secondary,
  .rail .nav,
  .rail .nav.active::after,
  .try-small,
  .switch-btn,
  .variable-chip {
    animation: none;
    transition: none;
  }
  .primary:hover:not(:disabled),
  .primary:active:not(:disabled),
  .secondary:active:not(:disabled) { transform: none; }
  .primary::after,
  .rail .nav.active::after { opacity: 0; }
}

#view-map .map-stage {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
#view-map .map-board { min-width: 0; min-height: 0; height: 100%; }
#view-map .map-board > #mapCanvas,
#view-map .map-board > #mapEmpty,
#view-map .map-board > #rustMapCanvas { height: 100%; min-height: 0; margin: 0; }
#mapItemCanvas { position: absolute; z-index: 2; pointer-events: none; }
#view-map #mapMarkers { z-index: 4; }

/* ── HYR4D graphite / chrome Accueil redesign ─────────────────────────── */
:root {
  --bg: #0b0b0d;
  --rail: #0b0b0d;
  --surface: #1a1a1c;
  --surface-raised: #1f1f22;
  --surface-soft: #242428;
  --line: rgb(255 255 255 / 8%);
  --line-strong: rgb(255 255 255 / 14%);
  --text: #f2f2f4;
  --muted: #9a9aa3;
  --muted-2: #6f6f78;
  --accent: #c5c8cf;
  --rust: #c5c8cf;
  --green: #3ecf8e;
  --chrome-hi: #f4f5f7;
  --chrome-mid: #c5c8cf;
  --chrome-lo: #8b909a;
  --shadow: 0 10px 28px rgb(0 0 0 / 28%);
  --radius: 14px;
  --ease: 180ms ease;
  --rail-width: 236px;
}
html, body, .shell, .topbar, .license-gate { background: var(--bg); color: var(--text); }
.main { color: var(--text); }
.rail {
  width: var(--rail-width);
  padding: 18px 12px 14px;
  border-right: 1px solid var(--line);
  background: var(--rail);
}
.main { width: calc(100% - var(--rail-width)); margin-left: var(--rail-width); padding: 0 22px 18px; }
.brand { flex-direction: column; align-items: center; gap: 0; padding: 4px 8px 12px; }
.brand .sight, .brand .sight > img { max-height: 88px; }
.brand-echo { width: 148px; margin-top: -14px; }
.rail-label {
  padding: 0 12px 8px;
  color: rgb(154 154 163 / 70%);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .14em;
}
.rail .nav {
  position: relative;
  height: 30px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.rail .nav:hover { color: var(--text); background: rgb(255 255 255 / 4.5%); }
.rail .nav.active,
.rail .nav.active:hover {
  color: #fff;
  background: #222226;
  border-color: transparent;
  box-shadow: none;
  font-weight: 600;
}
.rail .nav.active::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff 0%, #d7e0ea 42%, #9aa8b8 68%, #f4f7fb 100%);
  box-shadow:
    0 0 6px rgb(215 225 236 / 55%),
    0 0 1px rgb(255 255 255 / 70%);
}
.rail .nav.active .nav-icon img {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0.5px 0 rgb(255 255 255 / 55%))
    drop-shadow(0.4px 0 0 rgb(70 190 255 / 45%))
    drop-shadow(-0.4px 0 0 rgb(255 70 170 / 28%));
  opacity: 1;
}
.rail .nav:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.nav-beta {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .04em;
}
.topbar {
  height: auto;
  min-height: 64px;
  flex-basis: auto;
  margin-bottom: 14px;
  /* Laisse la place aux boutons fenêtre (3 × 46px) pour éviter le chevauchement. */
  padding: 10px 158px 10px 0;
  border-bottom: 1px solid var(--line);
  background: rgb(11 11 13 / 94%);
  backdrop-filter: blur(10px);
}
.topbar .connection-badge {
  flex: 0 0 auto;
  margin-right: 4px;
}
.topbar h1, #pageTitle {
  margin: 0;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: unset;
  filter: none;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.page-hint { color: var(--muted); font-size: 13px; white-space: nowrap; }
/* Badge connexion : voyant seul + texte métal (pas de pilule) */
.connection-badge,
.topbar .connection-badge,
.connection-badge.connected,
.connection-badge.is-error {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.connection-badge > span:not(.pulse) {
  color: transparent;
  background-image: linear-gradient(180deg, #fff 0%, #d7e0ea 46%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgb(255 255 255 / 45%))
    drop-shadow(0.4px 0 0 rgb(70 190 255 / 40%))
    drop-shadow(-0.4px 0 0 rgb(255 70 170 / 28%))
    drop-shadow(0 1px 0 #050505);
}
.connection-badge .pulse {
  flex: 0 0 auto;
  -webkit-text-fill-color: initial;
  filter: none;
  box-shadow: 0 0 8px currentColor;
}
.pulse.on { color: var(--green); }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.chrome, .btn-chrome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 9px;
  color: #1a1a1c;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 55%), transparent 42%),
    linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome-mid) 48%, var(--chrome-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 65%),
    inset 0 -1px 0 rgb(0 0 0 / 18%),
    0 1px 2px rgb(0 0 0 / 35%);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
  transition: filter var(--ease), transform var(--ease), box-shadow var(--ease);
}
.chrome:hover, .btn-chrome:hover { filter: brightness(1.06); }
.chrome:active, .btn-chrome:active { transform: translateY(1px); filter: brightness(.97); }
.chrome:focus-visible, .btn-chrome:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.chrome:disabled, .btn-chrome:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.chrome.icon-btn {
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
}
.primary {
  border: 1px solid rgb(255 255 255 / 28%);
  color: #1a1a1c;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 45%), transparent 40%),
    linear-gradient(180deg, #f0f1f4, #b8bcc6 55%, #8e949f);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 2px 8px rgb(0 0 0 / 28%);
}
.primary:hover { border-color: rgb(255 255 255 / 40%); filter: brightness(1.05); transform: none; background: linear-gradient(180deg, #f7f8fa, #c4c8d0 55%, #969ca8); }
.secondary {
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: linear-gradient(180deg, #2a2a2e, #1c1c1f);
}
.secondary:hover { border-color: rgb(255 255 255 / 22%); background: #26262b; }
#quitBtn {
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 9px;
  color: #1a1a1c;
  background: linear-gradient(180deg, #f0f1f4, #b0b4bc 55%, #8a909a);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%);
  font-size: 12px;
}
#quitBtn:hover { filter: brightness(1.05); background: linear-gradient(180deg, #f7f8fa, #c0c4cc); }

#view-home.view.current {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding-bottom: 8px;
}
#view-home .start-guide { max-width: none; margin: 0; }
.home-hero {
  position: relative;
  display: grid;
  width: 100%;
  height: min(220px, 32vh);
  min-height: 180px;
  max-height: 220px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #141416;
  box-shadow: var(--shadow);
}
.home-hero-media,
.home-hero-shade { position: absolute; inset: 0; }
.home-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-hero-shade {
  background:
    linear-gradient(90deg, rgb(8 8 10 / 78%) 0%, rgb(8 8 10 / 42%) 38%, rgb(8 8 10 / 12%) 72%, transparent 100%),
    linear-gradient(0deg, rgb(8 8 10 / 35%), transparent 48%);
  pointer-events: none;
}
.home-hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
}
.home-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-hero-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  filter: brightness(0) invert(88%);
}
.home-hero h2 {
  margin: 0 0 6px;
  max-width: 42rem;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-shadow: 0 1px 12px rgb(0 0 0 / 45%);
}
.home-hero-desc {
  max-width: 36rem;
  margin: 0 0 12px;
  color: #c4c4cc;
  font-size: 13px;
  line-height: 1.45;
}
.home-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  color: var(--muted);
  font-size: 12px;
}
.home-online { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 600; }
.home-online.is-on { color: var(--green); }
.home-online .pulse { width: 8px; height: 8px; }
.home-stats {
  display: grid;
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.home-stats .dash-stat {
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
}
.home-stats .dash-stat b {
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.04em;
}
.home-stats .dash-stat small { color: var(--muted); font-size: 12px; }
.stat-bar {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
}
.stat-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #aeb9c6, var(--rust));
}
.sun-row { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.stat-avatars { display: flex; gap: 6px; min-height: 22px; }
.stat-avatars span,
.stat-avatars img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #1a1a1c, 0 0 0 3px rgb(62 207 142 / 55%);
  background: #2a2a2e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.stat-avatars span.is-off { box-shadow: 0 0 0 2px #1a1a1c, 0 0 0 3px rgb(255 255 255 / 18%); }
#syncStat.is-fresh b { color: var(--green); }
#syncStat.is-stale b { color: var(--amber, #aeb6c2); }
.home-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
  gap: 12px;
  min-height: 0;
  align-items: stretch;
}
.home-side { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.home-map-panel, .home-team-panel, .home-events-panel { min-width: 0; padding: 14px; }
.home-map-panel .card-heading,
.home-team-panel .card-heading,
.home-events-panel .card-heading {
  align-items: center;
  margin-bottom: 10px;
}
.home-map-stage {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #101012;
}
.home-map-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 320px;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.home-map-frame { position: absolute; inset: 0; overflow: hidden; }
.home-map-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  user-select: none;
}
.home-map-markers { position: absolute; inset: 0; pointer-events: none; }
.home-map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  text-shadow: 0 1px 4px rgb(0 0 0 / 70%);
}
.home-map-pin i {
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 2px rgb(0 0 0 / 35%);
}
.home-map-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-timeline { gap: 0; max-height: 260px; overflow: auto; }
.home-timeline .event-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 4px 10px 18px;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
  font-size: 12px;
}
.home-timeline .event-row::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 3px rgb(224 106 58 / 18%);
}
.home-timeline .event-row time { color: var(--muted-2); }
.home-timeline .event-row b { display: block; margin-bottom: 2px; color: #d8d8de; font-size: 11px; }
.home-timeline .event-row span { color: var(--muted); }
.member-row { border-color: rgb(255 255 255 / 7%); background: #121214; }
.presence.is-on { background: var(--green); box-shadow: 0 0 8px rgb(62 207 142 / 40%); }
.eyebrow.violet, .rail-label.violet { color: var(--muted); }
.eyebrow { color: var(--muted-2); }

@media (max-width: 1280px) {
  .home-lower { grid-template-columns: 1fr; }
  .home-map-stage, .home-map-empty { min-height: 280px; }
}
@media (max-width: 1100px) {
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero-body { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 850px) {
  .rail { width: 66px; --rail-width: 66px; }
  .main { width: calc(100% - 66px); margin-left: 66px; }
  .brand-echo, .rail-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chrome, .btn-chrome, .rail .nav, .primary, .secondary { transition: none; }
}

/* Map zoom chrome + global polish */
#view-map .map-zoom button {
  width: 32px;
  height: 32px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 8px;
  color: #1a1a1c;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 55%), transparent 42%),
    linear-gradient(180deg, #f4f5f7 0%, #c5c8cf 48%, #8b909a 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), 0 1px 2px rgb(0 0 0 / 35%);
}
#view-map .map-zoom button:hover { color: #111; filter: brightness(1.06); background: linear-gradient(180deg, #fafbfc, #d0d3da 55%, #9aa0aa); }
.tag { border-color: var(--line-strong); color: var(--muted); background: #151518; }
.welcome.card { background: var(--surface); }
.eyebrow.violet { color: var(--muted-2); }

/* Keep four stats on typical desktop widths (viewport includes the rail). */
@media (min-width: 1001px) {
  .home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .home-lower { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr); }
}

/* ── Genetics studio (RustData-level) ─────────────────────────────────── */
#view-genes .section-top { margin-bottom: 10px; }
.gene-plant-card { margin: 0 0 10px; padding: 12px 14px; }
.gene-plant-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.gene-plant-head b { font-size: 13px; }
.gene-plant-head span { color: var(--muted); font-size: 12px; }
.gene-plant-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.gene-plant {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: #121214;
  font-size: 12px;
}
.gene-plant.is-on, .gene-plant:hover { color: #fff; border-color: rgb(224 106 58 / 45%); background: rgb(224 106 58 / 12%); }
.gene-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.gene-tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #121214; }
.gene-tab {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
}
.gene-tab.is-on { color: #fff; background: #2a2a2e; }
.gene-input-panes { margin: 0 0 10px; }
.gene-pane-lead, .gene-pane-hint { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.gene-scan-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.gene-scan-mode {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  color: #c8c8c8;
  background: #101012;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.gene-scan-mode b {
  color: #f0f0f0;
  font-size: 13px;
  font-weight: 700;
}
.gene-scan-mode span {
  color: #8f8f96;
  font-size: 11px;
  line-height: 1.4;
}
.gene-scan-mode:hover {
  border-color: #3d3d44;
  color: #e8e8ea;
}
.gene-scan-mode.is-on {
  border-color: rgb(224 106 58 / 55%);
  background: rgb(224 106 58 / 10%);
}
.gene-scan-mode.is-on b { color: #fff; }
.gene-scan-mode.is-on span { color: #d2c4bd; }
@media (max-width: 720px) {
  .gene-scan-modes { grid-template-columns: 1fr; }
}
.gene-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.gene-field input, .gene-field textarea, .gene-field-inline select, .gene-target-counts input {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text);
  background: #0d0d0f;
  font: inherit;
}
.gene-field textarea { min-height: 120px; resize: vertical; font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: .08em; }
.gene-options {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 14px;
  margin: 0 0 12px;
  padding: 14px;
}
.gene-option-block { display: grid; gap: 10px; align-content: start; }
.gene-option-block b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.gene-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.gene-preset {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: #121214;
  font-size: 12px;
  font-weight: 650;
}
.gene-preset.is-on { color: #fff; border-color: rgb(62 207 142 / 35%); background: rgb(62 207 142 / 12%); }
.gene-target-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gene-target-counts label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.gene-target-counts input { width: 56px; min-height: 32px; }
.gene-target-sum { color: var(--green); font-size: 12px; font-weight: 650; }
.gene-target-sum.is-bad { color: #aeb6c2; }
.gene-field-inline { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.gene-grid-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 520px;
  margin: 8px auto 0;
}
.gene-grid-cell {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 7px 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #121214;
}
.gene-grid-cell span { color: var(--muted-2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.gene-grid-cell b.gene-code,
.gene-grid-cell .gene-code {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
}
.gene-grid-cell .gene-strip {
  max-width: 100%;
  transform: none;
  flex-wrap: nowrap;
}
.gene-grid-cell .gene-strip.is-compact .gene-chip {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  font-size: 8px;
}
.gene-grid-cell .gene-strip.is-compact .gene-join {
  width: 2px;
  flex: 0 0 2px;
  margin: 0;
}
.gene-grid-cell.is-center { border-color: rgb(224 106 58 / 55%); background: rgb(224 106 58 / 10%); }
.gene-grid-cell.is-empty { opacity: .45; }
@media (max-width: 1100px) {
  .gene-options { grid-template-columns: 1fr; }
  #view-genes .gene-layout { grid-template-columns: 1fr; }
}

.gene-plant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
}
.gene-plant img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 45%));
}
.gene-plant span { line-height: 1.1; }

.gene-history-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.gene-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 10px;
}
.gene-preset.is-on {
  border-color: rgb(139 195 74 / 45%);
  background: rgb(74 100 36 / 28%);
}
/* grid chips sized above ? no scale (scale caused overflow into neighbours) */

.gene-target-lead {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.gene-target-lead b { color: #e8e8ea; font-weight: 650; }
.gene-target-custom {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #121214;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.gene-target-custom[data-mode="preset"] {
  opacity: .72;
}
.gene-target-custom.is-lit,
.gene-target-custom[data-mode="custom"] {
  opacity: 1;
  border-color: rgb(139 195 74 / 45%);
  background:
    linear-gradient(180deg, rgb(139 195 74 / 10%), transparent 55%),
    #161914;
  box-shadow:
    inset 0 0 0 1px rgb(139 195 74 / 12%),
    0 0 18px rgb(139 195 74 / 10%);
}
.gene-target-custom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #d8d8de;
  font-size: 12px;
  font-weight: 650;
}
.gene-target-custom.is-lit .gene-target-custom-head { color: #e8f5c8; }
.gene-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #0d0d0f;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.gene-target-custom.is-lit .gene-count-pill {
  border-color: rgb(139 195 74 / 40%);
  background: rgb(139 195 74 / 8%);
  box-shadow: 0 0 0 1px rgb(139 195 74 / 10%);
}
.gene-count-pill .gene-chip {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  font-size: 12px;
}
.gene-count-pill input {
  width: 48px;
  min-height: 30px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-weight: 650;
  text-align: center;
}
.gene-count-pill input:disabled {
  color: #9a9a9a;
  cursor: default;
}
.gene-target-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.gene-preset[data-preset="custom"].is-on {
  border-color: rgb(224 106 58 / 55%);
  color: #fff;
  background: rgb(224 106 58 / 18%);
  box-shadow: 0 0 14px rgb(224 106 58 / 18%);
}

.gene-pane { display: none; }
.gene-pane.is-on { display: block; }
.gene-live {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
}
.gene-live-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.gene-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.gene-check input { accent-color: #c5c8cf; }
.gene-steps {
  margin: 0 0 10px;
  padding: 0 0 0 18px;
  color: #c8c8c8;
  font-size: 12px;
  line-height: 1.5;
}
.gene-steps li { margin: 0 0 4px; }
.gene-uncertain {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #3a3a28;
  border-radius: 8px;
  background: #16140e;
  color: #d8c88a;
  font-size: 12px;
  line-height: 1.45;
}
.gene-grid-map.is-triangle { max-width: 360px; }
.gene-tri-spacer { min-height: 1px; }
.gene-inv-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gene-qty {
  min-width: 28px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #1c1c1c;
  color: #c8c8c8;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gene-plan-badge {
  margin-left: 2px;
}
.gene-inv-actions {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}
.gene-mini {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #2c2c2c;
  border-radius: 6px;
  color: #e6e6e6;
  background: #161616;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.gene-mini:hover { border-color: #6a3a2c; background: #14181e; }
.gene-saves {
  margin: 0 0 10px;
  padding: 12px 14px;
}
.gene-saves-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.gene-saves-head b { font-size: 13px; }
.gene-saves-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.gene-saves-actions input {
  min-width: 160px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text);
  background: #0d0d0f;
  font: inherit;
}
.gene-saves-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gene-saves-list.empty {
  display: block;
  padding: 10px 0 2px;
  color: #8f8f8f;
  font-size: 12px;
}
.gene-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #262626;
  border-radius: 8px;
  background: #0d0d0d;
}
.gene-save-row b { display: block; font-size: 13px; }
.gene-save-row small { color: #9a9a9a; font-size: 11px; }
.gene-save-actions { display: inline-flex; gap: 6px; }
.gene-compare { margin-top: 12px; }
.gene-compare h4 {
  margin: 0 0 8px;
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gene-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.gene-compare-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #262626;
  border-radius: 8px;
  background: #0d0d0d;
}
.gene-compare-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.gene-compare-card header span { color: #9a9a9a; }
.gene-compare-card p { margin: 0; color: #c8c8c8; font-size: 12px; line-height: 1.4; }
@media (max-width: 700px) {
  .gene-compare-grid { grid-template-columns: 1fr; }
}
/* ── Raid calculator ─────────────────────────────────────────────────── */
#view-raid.view.current { overflow: auto; }
#view-raid .section-top { margin: 0 0 10px; }
#view-raid .section-top h2 { margin: 2px 0; font-size: 19px; }
#view-raid .section-top p { margin: 0; color: #a8a8a8; font-size: 12px; line-height: 1.4; }
.raid-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 10px;
  padding: 14px 16px;
}
.raid-hero-copy { max-width: 560px; }
.raid-hero-copy b { display: block; margin-bottom: 4px; font-size: 14px; }
.raid-hero-copy p { margin: 0; color: #a8a8a8; font-size: 12px; line-height: 1.45; }
.raid-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.raid-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #2c2c2c;
  border-radius: 10px;
  color: #f2f2f2;
  background: #161616;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.raid-add span { font-size: 18px; line-height: 1; color: #c5c8cf; }
.raid-add:hover { border-color: #6a3a2c; background: #14181e; }
.raid-add.is-ghost { opacity: .92; }
.raid-table-card, .raid-totals-card { margin: 0 0 10px; padding: 12px 14px; }
.raid-table-wrap { overflow: auto; }
.raid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.raid-table th {
  padding: 8px 8px;
  border-bottom: 1px solid #262626;
  color: #8f8f8f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.raid-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #1a1a1a;
  vertical-align: middle;
}
.raid-table tr:hover td { background: #101010; }
.raid-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.raid-item img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  object-fit: contain;
  image-rendering: auto;
  background: #0d0d0d;
  border: 1px solid #262626;
  border-radius: 6px;
}
.raid-item span { color: #f0f0f0; font-weight: 650; }
.raid-amount {
  width: 64px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid #2c2c2c;
  border-radius: 6px;
  color: #f2f2f2;
  background: #0d0d0d;
  font: inherit;
  text-align: center;
}
.raid-explosive-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
}
.raid-explosive-pick img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.raid-explosive {
  min-width: 0;
  flex: 1;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid #2c2c2c;
  border-radius: 6px;
  color: #f2f2f2;
  background: #0d0d0d;
  font: inherit;
}
.raid-num, .raid-time { white-space: nowrap; color: #d8d8d8; font-variant-numeric: tabular-nums; }
.raid-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 360px;
}
.raid-res {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 40px;
  padding: 4px 4px 3px;
  border: 1px solid #262626;
  border-radius: 6px;
  background: #0d0d0d;
}
.raid-res img { width: 22px; height: 22px; object-fit: contain; }
.raid-res b { color: #e8e8e8; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.raid-remove {
  width: 28px;
  height: 28px;
  border: 1px solid #2c2c2c;
  border-radius: 6px;
  color: #c8c8c8;
  background: #161616;
  cursor: pointer;
}
.raid-remove:hover { border-color: #6a3a2c; color: #fff; background: #14181e; }
.raid-table-empty {
  margin: 16px 4px 4px;
  color: #8f8f8f;
  font-size: 12px;
}
.raid-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.raid-totals .raid-res {
  min-width: 52px;
  padding: 6px 8px;
}
.raid-totals .raid-res img { width: 28px; height: 28px; }
.raid-totals .raid-res b { font-size: 12px; }
.raid-totals-empty { color: #8f8f8f; font-size: 12px; }
.raid-picker[hidden] { display: none !important; }
.raid-picker {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.raid-picker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(0 0 0 / 72%);
  cursor: pointer;
}
.raid-picker-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(720px, 100%);
  max-height: min(78vh, 720px);
  padding: 14px;
  border: 1px solid #2c2c2c;
  border-radius: 12px;
  background: #101010;
  box-shadow: 0 24px 70px rgb(0 0 0 / 55%);
}
.raid-picker-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.raid-picker-panel h3 { margin: 0; font-size: 15px; }
.raid-picker-panel input[type="search"] {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  color: #f2f2f2;
  background: #0d0d0d;
  font: inherit;
}
.raid-picker-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.raid-pick-group h4 {
  margin: 0 0 8px;
  color: #8f8f8f;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.raid-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.raid-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #262626;
  border-radius: 8px;
  color: inherit;
  background: #0d0d0d;
  text-align: left;
  cursor: pointer;
}
.raid-pick:hover { border-color: #6b7684; background: #14181e; }
.raid-pick small { color: #9a9a9a; font-size: 11px; }
.raid-picker-hint { margin: 8px 0; color: #8f8f8f; font-size: 12px; }
@media (max-width: 900px) {
  .raid-table { min-width: 760px; }
}
/* ── Conveyor filters ───────────────────────────────────────────────── */
#view-conveyor.view.current { overflow: auto; }
#view-conveyor .section-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
#view-conveyor .section-top h2 { margin: 2px 0; font-size: 19px; }
#view-conveyor .section-top p { margin: 0; color: #a8a8a8; font-size: 12px; line-height: 1.4; }
#convStatus.ok { color: #3dcb8c; }
.conv-browser, .conv-editor { margin: 0 0 10px; padding: 12px 14px; }
.conv-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.conv-toolbar input[type="search"],
.conv-picker-head input[type="search"],
.conv-field input,
.conv-field select,
.conv-field textarea {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  color: #f2f2f2;
  background: #0d0d0d;
  font: inherit;
}
.conv-toolbar input[type="search"] { min-width: 180px; }
.conv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.conv-chip {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgb(186 200 214 / 32%);
  border-radius: 999px;
  color: #c5c8cf;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 48%),
    linear-gradient(180deg, #1c2026, #101418);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  font-size: 12px;
  cursor: pointer;
}
.conv-chip em { margin-left: 4px; color: #8b909a; font-style: normal; }
.conv-chip.is-on, .conv-chip:hover {
  border-color: rgb(215 225 236 / 55%);
  color: #f4f5f7;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 14%), transparent 45%),
    linear-gradient(180deg, #2a3038, #161a20);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 0 10px rgb(215 225 236 / 10%);
}
.conv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.conv-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #262626;
  border-radius: 10px;
  background: #0d0d0d;
}
.conv-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conv-card header b { font-size: 13px; }
.conv-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: #14181e;
  border: 1px solid #3a4450;
  color: #aeb6c2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.conv-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 36px; }
.conv-thumb {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #262626;
  border-radius: 6px;
  background: #121212;
  overflow: hidden;
}
.conv-thumb img { width: 28px; height: 28px; object-fit: contain; }
.conv-more { color: #9a9a9a; font-size: 11px; font-weight: 700; }
.conv-card p { margin: 0; color: #9a9a9a; font-size: 11px; }
.conv-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.conv-card-actions .primary { flex: 1 1 auto; }
.conv-empty { margin: 8px 0; color: #8f8f8f; font-size: 12px; }
.conv-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.conv-editor-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(140px, .6fr);
  gap: 10px;
  margin: 0 0 12px;
}
.conv-field { display: grid; gap: 6px; color: #9a9a9a; font-size: 12px; }
.conv-field textarea { min-height: 72px; resize: vertical; font-family: Consolas, "Cascadia Mono", monospace; font-size: 11px; }
.conv-draft-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.conv-draft-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #262626;
  border-radius: 8px;
  background: #0d0d0d;
}
.conv-draft-copy b { display: block; font-size: 12px; }
.conv-draft-copy small { color: #8f8f8f; font-size: 10px; }
.conv-max { display: grid; gap: 2px; color: #9a9a9a; font-size: 10px; }
.conv-max input { width: 72px; min-height: 30px; padding: 4px 6px; border: 1px solid #2c2c2c; border-radius: 6px; color: #fff; background: #121212; font: inherit; text-align: center; }
.conv-bp { display: inline-flex; align-items: center; gap: 4px; color: #9a9a9a; font-size: 11px; }
.conv-remove {
  width: 28px; height: 28px; border: 1px solid #2c2c2c; border-radius: 6px;
  color: #c8c8c8; background: #161616; cursor: pointer;
}
.conv-remove:hover { border-color: #6a3a2c; background: #14181e; }
.conv-import-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 14px;
}
.conv-picker-block { display: grid; gap: 10px; }
.conv-picker-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.conv-picker-head b { font-size: 13px; }
.conv-item-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  max-height: 280px;
  overflow: auto;
  padding: 2px;
}
.conv-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid #262626;
  border-radius: 8px;
  color: #e6e6e6;
  background: #0d0d0d;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}
.conv-pick:hover, .conv-pick.is-on { border-color: #6b7684; background: #14181e; }
@media (max-width: 800px) {
  .conv-editor-fields, .conv-import-row, .conv-draft-row { grid-template-columns: 1fr; }
}

/* Génétique animaux */
#view-animals.view.current { overflow: auto; }
#view-animals .section-top { margin-bottom: 10px; }
.ag-herd-card, .ag-panel { padding: 12px 14px; }
.ag-herd-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.ag-herd-tabs, .ag-species, .ag-add-row, .ag-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-herd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.ag-field { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.ag-field input, .ag-field select {
  min-width: 120px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #0d0d0f;
}
.ag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}
.ag-chip img { width: 16px; height: 16px; object-fit: contain; }
.ag-chip.is-on, .ag-chip[aria-pressed="true"] {
  color: #fff;
  border-color: rgb(197 210 224 / 40%);
  background: rgb(197 210 224 / 14%);
}
.ag-hint, .ag-empty, .ag-muted { margin: 8px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.ag-animals { display: grid; gap: 8px; margin-top: 8px; }
.ag-animal { padding: 10px 12px; background: #101012; }
.ag-animal-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ag-name {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #0b0b0d;
  font-weight: 600;
}
.ag-sex, .ag-remove { height: 30px; padding: 0 10px; }
.ag-remove { min-width: 34px; }
.ag-genes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ag-gene-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  justify-items: center;
  min-width: 52px;
}
.ag-gene-pair.is-conflict .ag-allele { outline: 1px solid #c5c8cf; }
.ag-gene-odds { grid-column: 1 / -1; color: var(--muted-2); font-size: 9px; min-height: 12px; }
.ag-allele {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #c8c8c8;
  background: #151518;
  font-size: 12px;
  font-weight: 700;
}
.ag-allele.is-good { color: #1a1a1c; background: #3ecf8e; border-color: #2ea86f; }
.ag-allele.is-ok { color: #1a1a1c; background: #d6b35c; border-color: #b8943f; }
.ag-allele.is-bad { color: #fff; background: #c5c8cf; border-color: #6b7280; }
.ag-allele.is-empty { color: #666; background: #121214; }
.ag-allele.is-guess { opacity: .72; border-style: dashed; }
.ag-allele:disabled { opacity: .35; cursor: not-allowed; }
.ag-lineage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
.ag-lineage label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.ag-markers { display: flex; gap: 4px; }
.ag-markers input, .ag-lineage select {
  width: 100%;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: #0b0b0d;
}
.ag-markers input.is-conflict { border-color: #c5c8cf; }
.ag-line-note { grid-column: 1 / -1; color: var(--muted-2); font-size: 11px; }
.ag-line-note.is-warn { color: #aeb6c2; }
.ag-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.ag-pair-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ag-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.ag-stats > div {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0d0d0f;
}
.ag-stats span { display: block; color: var(--muted); font-size: 10px; }
.ag-stats b { display: block; margin-top: 2px; font-size: 15px; }
.ag-table-wrap { overflow: auto; }
.ag-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ag-table th, .ag-table td { padding: 6px 5px; border-bottom: 1px solid var(--line); text-align: left; }
.ag-table th { color: var(--muted); font-weight: 600; }
.ag-letter {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 4px;
  color: #1a1a1c;
  background: #3ecf8e;
  font-size: 10px;
  font-weight: 800;
}
.ag-bar {
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      #3ecf8e 0 var(--good),
      #d6b35c var(--good) calc(var(--good) + var(--ok)),
      #c5c8cf calc(var(--good) + var(--ok)) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}
.ag-calf-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ag-tag {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: #151518;
  font-size: 11px;
}
.ag-tag.is-inbred { border-color: rgb(197 210 224 / 45%); color: #c5c8cf; background: rgb(197 210 224 / 12%); }
.ag-targets { margin-bottom: 10px; }
.ag-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px 0 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #101012;
  font-size: 11px;
}
.ag-target b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  color: #1a1a1c;
  background: #3ecf8e;
  font-size: 11px;
}
.ag-target.is-pure b { background: #7ee0b4; box-shadow: inset 0 0 0 2px #1f6b4a; }
.ag-target.is-any b { color: #888; background: #1a1a1e; }
.ag-pair-head, .ag-pair-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr .7fr .7fr;
  gap: 6px;
  align-items: center;
}
.ag-pair-head { margin-bottom: 4px; color: var(--muted-2); font-size: 10px; letter-spacing: .04em; }
.ag-pair-list { display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.ag-pair-row {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #0d0d0f;
  text-align: left;
  font-size: 12px;
}
.ag-pair-row.is-on { border-color: rgb(197 210 224 / 45%); background: rgb(197 210 224 / 10%); }
.ag-pair-row b { color: #3ecf8e; }
.ag-pair-row small { color: var(--muted); }
.ag-ref { margin-top: 10px; }
.ag-ref-grid b { display: block; margin-bottom: 8px; }
.ag-ref-table td { color: var(--muted); }
@media (max-width: 1100px) {
  .ag-layout, .ag-lineage, .ag-stats, .ag-pair-pick { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ag-layout, .ag-lineage, .ag-stats, .ag-pair-pick { grid-template-columns: 1fr; }
  .ag-pair-head, .ag-pair-row { grid-template-columns: 1fr 1fr; }
  .ag-pair-head span:nth-child(n+3), .ag-pair-row b, .ag-pair-row small { display: none; }
}

/* Sidebar dense (nav) + branding large. */
.rail {
  padding: 42px 12px 10px;
  overflow: hidden;
}
.brand {
  gap: 0;
  padding: 2px 6px 12px;
  min-height: 0;
}
.brand .sight,
.brand .sight-glass {
  height: 88px;
  max-height: 88px;
}
.brand .sight .sight-name {
  width: 88px;
  height: 88px;
}
.brand-echo {
  width: 148px;
  margin-top: -14px;
}
.rail-scroll {
  gap: 4px;
  margin-top: 0;
  overflow: hidden;
}
.rail-group { gap: 0; }
.rail-label {
  padding: 2px 10px 3px;
  font-size: 9px;
  letter-spacing: .12em;
}
.rail .nav {
  height: 28px;
  margin: 0;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  gap: 8px;
}
.rail .nav .nav-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.rail .nav .nav-icon svg,
.rail .nav .nav-icon img {
  width: 16px;
  height: 16px;
}
.rail .nav.active::before {
  top: 6px;
  bottom: 6px;
}
.nav-beta {
  padding: 0 4px;
  font-size: 8px;
  line-height: 14px;
}
.rail-bottom {
  gap: 6px;
  margin-top: auto;
  padding: 8px 4px 0;
}
.rail-status-row {
  gap: 6px;
  font-size: 10px;
}
.rail-user {
  padding: 4px 6px;
  gap: 8px;
}
.rail-user img,
.rail-avatar-fallback {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}
.rail-user-copy b { font-size: 11px; }
.rail-user-copy small { font-size: 10px; }
@media (max-height: 720px) {
  .brand .sight,
  .brand .sight-glass { height: 72px; max-height: 72px; }
  .brand .sight .sight-name { width: 64px; height: 64px; }
  .brand-echo { width: 120px; }
  .rail .nav { height: 28px; font-size: 12px; }
  .rail-label { padding: 1px 8px 3px; }
  .rail-scroll { gap: 4px; }
}
@media (max-height: 640px) {
  .brand { gap: 4px; padding-bottom: 8px; }
  .brand .sight,
  .brand .sight-glass { height: 56px; max-height: 56px; }
  .brand .sight .sight-name { width: 50px; height: 50px; }
  .brand-echo { width: 100px; }
  .rail .nav { height: 26px; }
}

/* Slogan : case fixe + fondu (plus de scroll = plus de rognage) */
.brand-slogan {
  --slogan-h: 20px;
  --slogan-cycle: 12.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  height: var(--slogan-h);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.brand-slogan-stage {
  position: relative;
  width: 4.5em;
  height: var(--slogan-h);
}
.brand-slogan-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  background-image: linear-gradient(180deg, #fff 0%, #d7e0ea 42%, #9aa8b8 68%, #f4f7fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgb(255 255 255 / 45%))
    drop-shadow(0.45px 0 0 rgb(70 190 255 / 45%))
    drop-shadow(-0.45px 0 0 rgb(255 70 170 / 32%))
    drop-shadow(0 1px 0 #050505);
  opacity: 0;
  animation: hyr4d-slogan-fade var(--slogan-cycle) linear infinite;
}
.brand-slogan-word:nth-child(1) { animation-delay: 0s; }
.brand-slogan-word:nth-child(2) { animation-delay: calc(var(--slogan-cycle) * -0.2); }
.brand-slogan-word:nth-child(3) { animation-delay: calc(var(--slogan-cycle) * -0.4); }
.brand-slogan-word:nth-child(4) { animation-delay: calc(var(--slogan-cycle) * -0.6); }
.brand-slogan-word:nth-child(5) { animation-delay: calc(var(--slogan-cycle) * -0.8); }
@keyframes hyr4d-slogan-fade {
  0%, 2% { opacity: 0; }
  4%, 18% { opacity: 1; }
  20%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-slogan-word { animation: none; opacity: 0; }
  .brand-slogan-word:first-child { opacity: 1; }
}
@media (max-width: 850px) {
  .brand-slogan { display: none; }
}

/* Dossiers sidebar + glider métal (uiverse quick-panther-98) */
#railNav {
  --rail-metal: #d7e1ec;
  --rail-metal-soft: rgb(215 225 236 / 18%);
  position: relative;
  padding-left: 10px;
}
.rail-glider-rail {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  pointer-events: none;
  background: linear-gradient(0deg, transparent 0%, rgb(255 255 255 / 10%) 50%, transparent 100%);
}
.rail-glider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  opacity: 0;
  background: linear-gradient(0deg, transparent 0%, var(--rail-metal) 50%, transparent 100%);
  box-shadow: 0 0 10px rgb(215 225 236 / 35%);
  transform: translate3d(0, 0, 0);
  transition:
    transform .5s cubic-bezier(.37, 1.95, .66, .56),
    height .35s ease,
    opacity .25s ease;
}
.rail-glider.is-on { opacity: 1; }
.rail-glider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 60%;
  transform: translate(-50%, -50%);
  background: var(--rail-metal);
  filter: blur(7px);
  opacity: .75;
}
.rail-glider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  background: linear-gradient(90deg, var(--rail-metal-soft) 0%, transparent 100%);
  pointer-events: none;
}
.rail-folder { display: flex; flex-direction: column; gap: 1px; }
.rail-folder-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  color: #9a9aa3;
  background: transparent;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color .3s ease, background .3s ease;
}
.rail-folder-btn:hover { color: #f4f4f5; background: rgb(255 255 255 / 4%); }
.rail-folder.has-active > .rail-folder-btn {
  color: transparent;
  background-image: linear-gradient(180deg, #fff 0%, #d7e0ea 48%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 25%));
}
.rail-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent currentColor;
  opacity: .7;
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.rail-folder.has-active > .rail-folder-btn > .rail-chevron {
  border-left-color: #d7e1ec;
  -webkit-text-fill-color: initial;
  filter: none;
  color: #d7e1ec;
  opacity: 1;
}
.rail-folder.is-open > .rail-folder-btn > .rail-chevron { transform: rotate(90deg); }
.rail-folder-count {
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  color: #7a7a84;
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 16px;
  -webkit-text-fill-color: #7a7a84;
  filter: none;
}
.rail-folder.has-active > .rail-folder-btn > .rail-folder-count {
  color: #d7e1ec;
  -webkit-text-fill-color: #d7e1ec;
  background: rgb(215 225 236 / 14%);
}
.rail-folder-body { display: flex; flex-direction: column; gap: 1px; padding: 1px 0 4px; }
.rail-folder-body[hidden] { display: none; }
.rail-folder-nested { margin: 1px 0 1px 6px; padding-left: 6px; border-left: 1px solid rgb(255 255 255 / 8%); }
.rail-folder-nested > .rail-folder-btn {
  height: 26px;
  font-size: 10px;
  letter-spacing: .08em;
}
.rail-folder-nested .nav { padding-left: 8px; }
.rail-label { display: none; }
#railNav .nav.active {
  color: transparent;
  background-image: linear-gradient(180deg, #fff 0%, #d7e0ea 48%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 28%));
}
#railNav .nav .nav-icon,
#railNav .nav .nav-icon svg {
  color: #d7e1ec;
}
#railNav .nav .nav-icon img {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0.5px 0 rgb(255 255 255 / 40%))
    drop-shadow(0.35px 0 0 rgb(70 190 255 / 35%))
    drop-shadow(-0.35px 0 0 rgb(255 70 170 / 22%));
  opacity: .9;
}
#railNav .nav:hover .nav-icon,
#railNav .nav:hover .nav-icon svg,
#railNav .nav.active .nav-icon,
#railNav .nav.active .nav-icon svg {
  color: #f4f7fb;
}
#railNav .nav:hover .nav-icon img,
#railNav .nav.active .nav-icon img {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0.5px 0 rgb(255 255 255 / 55%))
    drop-shadow(0.4px 0 0 rgb(70 190 255 / 45%))
    drop-shadow(-0.4px 0 0 rgb(255 70 170 / 28%));
  opacity: 1;
}
#railNav .nav.active .nav-icon,
#railNav .nav.active .nav-beta {
  -webkit-text-fill-color: initial;
  filter: none;
  color: #d7e1ec;
}
#railNav .nav.active .nav-icon svg {
  color: #f4f7fb;
}
@media (prefers-reduced-motion: reduce) {
  .rail-glider { transition: none; }
}

/* Catalogue outils (page type rust-data /tools) */
#view-tools.view.current { overflow: auto; }
.tools-catalog { display: grid; gap: 18px; }
.tools-cat h3 {
  margin: 0 0 10px;
  color: #f4f4f5;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.tools-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  background: #111113;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tools-card:hover { border-color: rgb(197 210 224 / 35%); background: #161418; }
.tools-card-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: rgb(197 210 224 / 12%);
}
.tools-card-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(88%);
}
.tools-card b {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 650;
}
.tools-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.tools-card-open { color: #c5c8cf; font-size: 12px; font-weight: 650; }
@media (max-width: 850px) {
  .rail-folder-btn span,
  .rail-folder-count { display: none; }
  .rail-folder-btn { justify-content: center; padding: 0; }
  .rail-chevron { margin: 0; }
  .rail-folder-nested { margin-left: 0; padding-left: 0; border: 0; }
  .rail-folder:not(.is-open) .rail-folder-body { display: none; }
}

/* Connexion topbar : voyant + texte métal, sans pilule */
#connectionBadge.connection-badge,
#connectionBadge.connection-badge.connected,
#connectionBadge.connection-badge.is-error {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#connectionBadge.connection-badge > span:not(.pulse) {
  color: transparent;
  background-image: linear-gradient(180deg, #fff 0%, #d7e0ea 46%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgb(255 255 255 / 45%))
    drop-shadow(0.4px 0 0 rgb(70 190 255 / 40%))
    drop-shadow(-0.4px 0 0 rgb(255 70 170 / 28%))
    drop-shadow(0 1px 0 #050505);
}
#connectionBadge.connection-badge .pulse {
  -webkit-text-fill-color: initial;
  filter: none;
  box-shadow: 0 0 8px currentColor;
}

/* App chrome ? solid black (main + sidebar) */
:root {
  --bg: #000;
  --rail: #000;
}
html,
body,
.shell,
.main,
.rail,
.topbar {
  background: #000;
  background-image: none;
}
.main::before {
  content: none;
  display: none;
}
.main .topbar,
.topbar {
  background: #000;
  backdrop-filter: none;
  border-bottom-color: rgb(255 255 255 / 6%);
}
.rail {
  background: #000;
  border-right-color: rgb(255 255 255 / 6%);
}

/* Cards — vrai contour chrome métallique */
@property --card-chrome-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 135deg;
}
@keyframes hyr4d-card-chrome {
  to { --card-chrome-angle: 495deg; }
}
@keyframes hyr4d-card-sheen {
  0%, 55% { transform: translate3d(-120%, -10%, 0) rotate(12deg); opacity: 0; }
  62% { opacity: .45; }
  78% { transform: translate3d(160%, 10%, 0) rotate(12deg); opacity: 0; }
  100% { transform: translate3d(160%, 10%, 0) rotate(12deg); opacity: 0; }
}
.main .card:not(.rust-map-view),
.main .welcome.card,
.main .start-guide,
.main .dash-stat,
.main .mini-stat,
.main .content-card,
.main .connect-card,
.main .notice-card,
.main .shop-spam,
.main .health-card,
.main .gene-panel,
.main .device-card,
.main .home-hero,
.main .home-stats > * {
  --card-chrome-angle: 135deg;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#0a0a0c, #0a0a0c) padding-box,
    linear-gradient(
      var(--card-chrome-angle),
      #ffffff 0%,
      #f3f6fa 10%,
      #a8b4c2 22%,
      #6e7a88 34%,
      #e8eef6 46%,
      #c5d0dc 58%,
      #8b959f 70%,
      #f7fafc 82%,
      #9aa6b4 92%,
      #ffffff 100%
    ) border-box;
  box-shadow: 0 8px 20px rgb(0 0 0 / 45%);
  animation: hyr4d-card-chrome 5.5s linear infinite;
}
.main .card:not(.rust-map-view)::before,
.main .welcome.card::before,
.main .dash-stat::before,
.main .mini-stat::before,
.main .notice-card::before,
.main .shop-spam::before,
.main .health-card::before,
.main .home-hero::before,
.main .home-stats > *::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.main .card:not(.rust-map-view)::after,
.main .welcome.card::after,
.main .start-guide::after,
.main .dash-stat::after,
.main .mini-stat::after,
.main .content-card::after,
.main .connect-card::after,
.main .notice-card::after,
.main .shop-spam::after,
.main .health-card::after,
.main .gene-panel::after,
.main .device-card::after,
.main .home-hero::after,
.main .home-stats > *::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -55%;
  left: -20%;
  width: 42%;
  height: 210%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgb(255 255 255 / 22%) 50%,
    transparent 62%,
    transparent 100%
  );
  animation: hyr4d-card-sheen 5.8s ease-in-out infinite;
}
.main .card:not(.rust-map-view):hover,
.main .welcome.card:hover,
.main .dash-stat:hover,
.main .mini-stat:hover,
.main .notice-card:hover,
.main .home-hero:hover,
.main .home-stats > *:hover {
  box-shadow: 0 10px 24px rgb(0 0 0 / 52%);
}
/* Sidebar brand — looping chrome videos (H + HYR4D) */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.brand-h,
.brand-title {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.brand-h {
  width: 88px;
  height: 88px;
  max-width: 88px;
  max-height: 88px;
}
.brand-title {
  width: 148px;
  max-width: 92%;
  height: auto;
  margin-top: -10px;
}
@media (max-width: 860px) {
  .brand-h { width: 46px; height: 46px; max-width: 46px; max-height: 46px; }
  .brand-title { width: 96px; margin-top: -6px; }
}
/* ===== Équipe & chat — noir / chrome ===== */
body:has(#view-team.current) #pageTitle,
body:has(#view-team.current) #pageHint {
  display: none;
}
body:has(#view-team.current) .topbar {
  min-height: 52px;
  height: 52px;
  margin-bottom: 10px;
}
#view-team.view.current {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
#view-team .team-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
#view-team .team-head-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
#view-team .team-head-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid rgb(215 225 236 / 28%);
  border-radius: 12px;
  color: #e8eef6;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 10%), transparent 55%),
    #121417;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}
#view-team .team-title {
  margin: 0;
  color: #f4f6f8;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}
#view-team .team-subtitle {
  margin: 3px 0 0;
  color: #9aa3ad;
  font-size: 13px;
  line-height: 1.35;
}
#view-team .team-conn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgb(215 225 236 / 22%);
  border-radius: 999px;
  color: #d7e1ec;
  background: linear-gradient(180deg, #1a1e24, #101317);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
#view-team .team-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
#view-team .team-panel {
  --card-chrome-angle: 135deg;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(#0a0a0c, #0a0a0c) padding-box,
    linear-gradient(
      var(--card-chrome-angle),
      #ffffff 0%,
      #f3f6fa 10%,
      #a8b4c2 22%,
      #6e7a88 34%,
      #e8eef6 46%,
      #c5d0dc 58%,
      #8b959f 70%,
      #f7fafc 82%,
      #9aa6b4 92%,
      #ffffff 100%
    ) border-box;
  box-shadow: 0 8px 20px rgb(0 0 0 / 45%);
  animation: hyr4d-card-chrome 5.5s linear infinite;
}
#view-team .team-panel::before {
  content: none !important;
  display: none !important;
}
#view-team .team-panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -55%;
  left: -20%;
  width: 42%;
  height: 210%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgb(255 255 255 / 22%) 50%,
    transparent 62%,
    transparent 100%
  );
  animation: hyr4d-card-sheen 5.8s ease-in-out infinite;
}
#view-team .team-msg-avatar {
  position: relative;
}
#view-team .team-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#view-team .team-msg-avatar img.is-app-icon {
  object-fit: contain;
  padding: 4px;
  background: #0c0d10;
}
#view-team .team-msg-death-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 1px solid rgb(0 0 0 / 55%);
  border-radius: 50%;
  color: #f0d0d0;
  background: #7a3030;
}
#view-team .team-msg.is-event .team-msg-text {
  color: #b0b6be;
}
#view-team .team-panel-head {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}
#view-team .team-chat-head {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
#view-team .team-panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #e8eef6;
}
#view-team .team-panel-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}
#view-team .team-panel-title p {
  margin: 2px 0 0;
  color: #8b949e;
  font-size: 11px;
}
#view-team .team-online-pill {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid rgb(70 180 120 / 28%);
  border-radius: 999px;
  color: #7ddea8;
  background: rgb(40 140 90 / 12%);
  font-size: 10px;
  font-weight: 700;
}
#view-team .team-search,
#view-team .team-chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgb(215 225 236 / 14%);
  border-radius: 10px;
  color: #9aa3ad;
  background: #08090b;
}
#view-team .team-search input,
#view-team .team-chat-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  color: #f0f2f5;
  background: transparent;
  font: 12px/1.4 "Segoe UI", system-ui, sans-serif;
}
#view-team .team-icon-btn {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid rgb(215 225 236 / 18%);
  border-radius: 9px;
  color: #d7e1ec;
  background: linear-gradient(180deg, #1c2128, #12161b);
  cursor: pointer;
}
#view-team .team-icon-btn[aria-expanded="true"] {
  border-color: rgb(215 225 236 / 40%);
  color: #fff;
}
#view-team .team-chat-filters {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
}
#view-team .team-filter {
  position: relative;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  color: #8b949e;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
#view-team .team-filter.is-on {
  color: #e8eef6;
}
#view-team .team-filter.is-on::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #9aa6b4, #f4f7fb, #9aa6b4);
}
#view-team .team-member-list,
#view-team .team-chat-list {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 12px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #5a6570 transparent;
}
#view-team .team-member-list::-webkit-scrollbar,
#view-team .team-chat-list::-webkit-scrollbar {
  width: 8px;
}
#view-team .team-member-list::-webkit-scrollbar-thumb,
#view-team .team-chat-list::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #5a6570;
}
#view-team .team-member-list::-webkit-scrollbar-track,
#view-team .team-chat-list::-webkit-scrollbar-track {
  background: transparent;
}
#view-team .team-member-list.empty,
#view-team .team-chat-list.empty {
  color: #8b949e;
  font-size: 12px;
}
#view-team .team-member {
  display: grid;
  grid-template-columns: 10px 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 12px;
  background: #0a0b0e;
}
#view-team .team-member.is-selected {
  border-color: rgb(215 225 236 / 28%);
  background: linear-gradient(90deg, rgb(215 225 236 / 8%), #12151a 42%);
  box-shadow: inset 2px 0 0 #d7e1ec;
}
#view-team .team-member .presence {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5a6068;
  box-shadow: none;
}
#view-team .team-member .presence.is-on {
  background: #4fd18a;
  box-shadow: 0 0 8px rgb(79 209 138 / 45%);
}
#view-team .team-avatar {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: visible;
  border: 1px solid rgb(215 225 236 / 16%);
  border-radius: 50%;
  background: #161a20;
  color: #d7e1ec;
  font-size: 12px;
  font-weight: 700;
}
#view-team .team-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
#view-team .team-avatar.is-leader,
#view-team .team-msg-avatar.is-leader {
  border-color: #e8c56a;
  box-shadow: 0 0 0 1px rgb(232 197 106 / 35%);
}
#view-team .team-avatar .map-player-crown,
#view-team .team-msg-avatar .map-player-crown,
#view-team .member-avatar .map-player-crown {
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 50%;
  width: 14px;
  height: 11px;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px #000c);
  pointer-events: none;
}
#view-team .team-leader-tag {
  margin-left: 6px;
  color: #e8c56a;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#view-team .team-member-main { min-width: 0; }
#view-team .team-member-name {
  overflow: hidden;
  color: #f2f4f7;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-team .team-member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
#view-team .team-chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 999px;
  color: #9aa3ad;
  background: rgb(255 255 255 / 3%);
  font-size: 10px;
  font-weight: 650;
}
#view-team .team-chip.is-online { color: #7ddea8; border-color: rgb(70 180 120 / 22%); background: rgb(40 140 90 / 10%); }
#view-team .team-chip.is-alive { color: #7ddea8; }
#view-team .team-chip.is-dead { color: #aeb6c2; border-color: rgb(120 140 160 / 22%); background: rgb(60 70 82 / 12%); }
#view-team .team-grid-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgb(215 225 236 / 22%);
  border-radius: 8px;
  color: #e8eef6;
  background: linear-gradient(180deg, #1c2229, #12161b);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
}
#view-team .team-grid-badge svg { opacity: .7; }
#view-team .team-panel-head,
#view-team .team-panel-foot,
#view-team .team-compose,
#view-team .team-chat-filters {
  flex: 0 0 auto;
}
#view-team .team-panel-foot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 12px;
  border-top: 1px solid rgb(255 255 255 / 6%);
  color: #7d858f;
  font-size: 11px;
}
#view-team .team-foot-sep { opacity: .5; }
#view-team .team-date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  color: #8b949e;
  font-size: 11px;
  font-weight: 650;
}
#view-team .team-date-sep::before,
#view-team .team-date-sep::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgb(255 255 255 / 6%);
}
#view-team .team-msg {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px 8px;
  border-radius: 10px;
}
#view-team .team-msg.is-event {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  opacity: .88;
}
#view-team .team-msg-avatar {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 50%;
  background: #161a20;
  color: #c5d0dc;
  font-size: 11px;
  font-weight: 700;
}
#view-team .team-msg-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#view-team .team-msg-event-ico {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #aeb6c2;
}
#view-team .team-msg-body { min-width: 0; }
#view-team .team-msg-name {
  color: #e8eef6;
  font-size: 12px;
  font-weight: 700;
}
#view-team .team-msg-text {
  margin-top: 2px;
  color: #c4c9d0;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#view-team .team-msg.is-event .team-msg-text { color: #9aa3ad; font-size: 12px; }
#view-team .team-msg-grid {
  display: inline-flex;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgb(215 225 236 / 16%);
  border-radius: 5px;
  color: #d7e1ec;
  background: #14181e;
  font-size: 10px;
  font-weight: 700;
}
#view-team .team-msg time {
  color: #6f7782;
  font-size: 10px;
  white-space: nowrap;
}
#view-team .team-compose {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgb(255 255 255 / 6%);
  background: #090a0c;
}
#view-team .team-compose textarea {
  width: 100%;
  min-height: 42px;
  max-height: 110px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid rgb(215 225 236 / 16%);
  border-radius: 11px;
  outline: none;
  color: #f2f4f7;
  background: #0e1014;
  font: 13px/1.4 "Segoe UI", system-ui, sans-serif;
}
#view-team .team-compose textarea:focus {
  border-color: rgb(215 225 236 / 38%);
  box-shadow: 0 0 0 3px rgb(215 225 236 / 8%);
}
#view-team .team-compose-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#view-team .team-compose-bar small {
  color: #7d858f;
  font-size: 11px;
}
#view-team .team-compose-bar #chatSend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
}
@media (max-width: 980px) {
  #view-team .team-layout {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  }
}
@media (max-width: 820px) {
  #view-team .team-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(180px, 38%) minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  #view-team .team-panel { animation: none !important; }
}