/* =====================================================================
   BEAVERCHIP STM32 PIN PLANNER — STYLESHEET
   ===================================================================== */

:root {
  --orange: #EC6C25;
  --blue: #293B7F;
  --gray: #676767;
  --beige: #F4D988;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --sh-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --sh-md: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.18);
  --sh-lg: 0 1px 3px rgba(0,0,0,.35), 0 6px 14px 5px rgba(0,0,0,.22);
  --fast: 120ms ease;
  --med: 200ms cubic-bezier(.4,0,.2,1);
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --mono: 'Consolas', 'SF Mono', 'Cascadia Code', monospace;

  --fam-comm: #3FA7D6;
  --fam-timer: #B68CD8;
  --fam-analog: var(--orange);
  --fam-hispeed: #E0524A;
  --fam-power: #9AA0A6;
  --fam-clock: var(--beige);
  --fam-system: #E85AA0;
  --fam-gpio: #5CC58C;

  --st-unused: #4b5263;
  --st-planned: #4F8FE0;
  --st-connected: #3FAE6E;
  --st-finished: #2FA37A;
  --st-reserved: var(--beige);
  --st-warning: #E8A33D;
  --st-error: #E0463F;
}

html[data-theme="dark"] {
  --bg0:#14161c; --bg1:#1b1e27; --bg2:#232735; --bg3:#2c3142; --bgE:#262b3a;
  --line:#383e52; --lineSoft:#2a2f40;
  --tx:#eef1f8; --tx2:#aab0c4; --tx3:#767e94;
  --accent:var(--orange); --accent2:var(--blue);
  --chipBody:#1c2030; --chipEdge:#3a4060;
  --pinBg:#20242f; --pinTx:#e9ecf5;
  --scrollT:#3a4060;
}
html[data-theme="light"] {
  --bg0:#f1f2f6; --bg1:#ffffff; --bg2:#f6f7fa; --bg3:#eceef4; --bgE:#ffffff;
  --line:#d9dce6; --lineSoft:#e6e8f0;
  --tx:#1c2030; --tx2:#4c5266; --tx3:#888fa3;
  --accent:var(--orange); --accent2:var(--blue);
  --chipBody:#21263a; --chipEdge:#44496a;
  --pinBg:#ffffff; --pinTx:#1c2030;
  --scrollT:#c7cbdb;
}
html[data-theme="contrast"] {
  --bg0:#000; --bg1:#0a0a0a; --bg2:#121212; --bg3:#1a1a1a; --bgE:#000;
  --line:#fff; --lineSoft:#555;
  --tx:#fff; --tx2:#f4d988; --tx3:#ccc;
  --accent:#ffb347; --accent2:#6f8bff;
  --chipBody:#000; --chipEdge:#fff;
  --pinBg:#000; --pinTx:#fff;
  --scrollT:#fff;
  --st-unused:#555; --st-planned:#6f8bff; --st-connected:#58e08a; --st-finished:#2ee6a6;
  --st-reserved:#ffe27a; --st-warning:#ffb347; --st-error:#ff5a52;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font); background: var(--bg0); color: var(--tx);
  font-size: 14px; -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }
.hidden { display: none !important; }
h2, h3 { margin: 0 0 10px; color: var(--tx); }
p { color: var(--tx2); line-height: 1.5; margin: 0; }
.link-btn { background: none; border: none; color: var(--accent); font-size: 11.5px; text-decoration: underline; padding: 0; }

#app { height: 100vh; display: flex; flex-direction: column; }

/* ---------- TOPBAR ---------- */
#topbar {
  height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: linear-gradient(180deg, var(--bg1), var(--bg2)); border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-sm); position: relative; z-index: 100;
}
.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.os-brand-link { display: flex; align-items: center; flex: 0 0 auto; opacity: .92; transition: opacity var(--fast); }
.os-brand-link:hover, .os-brand-link:focus-visible { opacity: 1; }
.os-logo { width: 22px; height: 22px; object-fit: contain; display: block; }
.brand-sep { color: var(--tx3); font-size: 13px; font-weight: 700; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 15.5px; }
.brand-sub { font-size: 10.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

.search-wrap {
  flex: 1 1 auto; max-width: 460px; position: relative; display: flex; align-items: center; gap: 7px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 10px; height: 34px;
}
.search-wrap:focus-within { border-color: var(--accent); }
.search-wrap svg { color: var(--tx3); flex: 0 0 auto; }
.search-wrap input { flex: 1; background: none; border: none; outline: none; color: var(--tx); font-size: 13px; min-width: 0; }
.search-dropdown {
  position: absolute; top: 42px; left: 0; right: 0; max-height: 380px; overflow-y: auto;
  background: var(--bgE); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg); z-index: 200;
}
.sr-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--lineSoft); cursor: pointer; font-size: 13px; }
.sr-item:hover { background: var(--bg3); }
.sr-item .num { font-family: var(--mono); color: var(--accent); font-weight: 700; min-width: 28px; }
.sr-item .name { font-weight: 700; min-width: 60px; }
.sr-item .meta { color: var(--tx3); font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-empty { padding: 16px; text-align: center; color: var(--tx3); font-size: 13px; }

.topbar-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }

.btn-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg2);
  color: var(--tx2); font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--fast), border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.btn-icon:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); box-shadow: 0 2px 10px -4px rgba(236,108,37,.5); }
.btn-icon:active:not(:disabled) { transform: translateY(1px); }
.btn-icon:disabled { opacity: .35; cursor: default; }

.btn-primary, .btn-secondary, .btn-danger, .btn-sm {
  border-radius: var(--r-sm); border: 1px solid transparent; padding: 8px 14px; font-size: 13px; font-weight: 700;
  transition: all var(--fast); white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #d9591b; }
.btn-secondary { background: var(--bg3); color: var(--tx); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: transparent; color: var(--st-error); border-color: var(--st-error); }
.btn-danger:hover { background: var(--st-error); color: #fff; }
.btn-sm { background: var(--bg2); color: var(--tx2); border-color: var(--line); padding: 6px 10px; font-size: 12px; transition: color var(--fast), border-color var(--fast), box-shadow var(--fast); }
.btn-sm:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 2px 10px -4px rgba(236,108,37,.4); }

.dropdown-root { position: relative; }
.dropdown-panel {
  display: none; position: absolute; top: 42px; right: 0; min-width: 220px; background: var(--bgE);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 6px; flex-direction: column; z-index: 300;
}
.dropdown-panel.open { display: flex; }
.dropdown-panel button { background: none; border: none; text-align: left; padding: 9px 10px; font-size: 13px; color: var(--tx); border-radius: var(--r-sm); }
.dropdown-panel button:hover { background: var(--bg3); }
.dropdown-panel button.danger { color: var(--st-error); }
.dd-sep { height: 1px; background: var(--lineSoft); margin: 5px 3px; }

/* ---------- TABBAR ---------- */
#tabbar { flex: 0 0 auto; display: flex; gap: 4px; padding: 6px 16px 0; background: var(--bg1); border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: none; color: var(--tx2); font-size: 13px; font-weight: 700; padding: 9px 15px;
  border-radius: 6px 6px 0 0; border-bottom: 2px solid transparent; transition: all var(--fast);
}
.tab:hover { color: var(--tx); background: var(--bg2); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--bg2); }

/* Tab-bar license/changelog line — previously inherited a near-unreadable
   7px font and line-height:5 from styles that appear to have been written
   for a different, cramped context and never actually used there (only
   this one element in the whole app used these class names). Redesigned
   to sit at the end of the tab bar, readable, and visually consistent
   with the rest of the app's link/hover language. */
.license-brand {
  margin-left: auto; align-self: center; display: flex; align-items: center;
  max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.License-name {
  font-size: 11px; font-weight: 500; color: var(--tx3); letter-spacing: .1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.License-name a {
  color: var(--accent); font-weight: 700; text-decoration: none;
  padding-bottom: 1px; border-bottom: 1px solid transparent;
  transition: border-color var(--fast), color var(--fast);
}
.License-name a:hover, .License-name a:focus-visible { color: var(--tx); border-bottom-color: var(--accent); }
@media (max-width: 900px) { .license-brand { display: none; } }

/* ---------- WORKSPACE LAYOUT ---------- */
#workspace { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }

.sidebar {
  width: 270px; flex: 0 0 auto; background: var(--bg1); position: relative; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden; transition: width 260ms cubic-bezier(.4,0,.2,1);
}
#sideLeft { border-right: 1px solid var(--line); }
#sideRight { width: 330px; border-left: 1px solid var(--line); }
.sidebar.collapsed { width: 0; border-color: transparent; }
/* #sideRight is an ID selector, which outranks the two-class .sidebar.collapsed
   selector above regardless of source order -- without this rule the right
   sidebar's width:330px never actually gets overridden and it never collapses. */
#sideRight.collapsed { width: 0; border-color: transparent; }
.sidebar-scroll {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 14px; min-height: 0; width: 270px;
  transition: opacity 200ms ease;
}
#sideRight .sidebar-scroll { width: 330px; }
.sidebar.collapsed .sidebar-scroll { opacity: 0; pointer-events: none; }

.collapse-btn {
  position: absolute; top: 70px; width: 17px; height: 34px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 0 6px 6px 0; color: var(--tx3); z-index: 60; left: 270px; margin-left: -1px;
  transition: left 260ms cubic-bezier(.4,0,.2,1), right 260ms cubic-bezier(.4,0,.2,1);
}
.collapse-btn-right { border-radius: 6px 0 0 6px; left: auto; right: 330px; margin-right: -1px; margin-left: 0; }
.collapse-btn:hover { color: var(--accent); border-color: var(--accent); }
.sb-section { margin-bottom: 20px; }
.sb-input { width: 100%; margin-bottom: 8px; }
.net-filter-list { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.net-filter-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;
  color: var(--tx2);
}
.net-filter-item:hover { background: var(--bg3); }
.net-filter-item.is-active { background: rgba(var(--accent-rgb, 236,108,37), .18); color: var(--accent); font-weight: 600; }
.net-filter-item .count { font-size: 10px; color: var(--tx3); }
.net-filter-empty { font-size: 11.5px; color: var(--tx3); padding: 6px 2px; }

/* =====================================================================
   IN-APP PIN PLANNER CHANGELOG (moved inside the app itself — see
   PinPlanner.html #pane-changelog. NOT the website-wide CHANGELOG.md.)
   ===================================================================== */
.pp-changelog { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.pp-changelog__entry {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: var(--sh-md);
}
.pp-changelog__version { font-family: var(--mono); font-weight: 700; font-size: 13.5px; color: var(--accent); margin-bottom: 8px; }
.pp-changelog__date { font-weight: 500; color: var(--tx3); font-size: 11.5px; }
.pp-changelog__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.pp-changelog__list li { font-size: 12.5px; color: var(--tx2); line-height: 1.5; }
.pp-changelog__list li b { color: var(--tx); }
.sb-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tx3); margin-bottom: 9px; display: flex; justify-content: space-between; }

#center { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--bg0); position: relative; min-height: 0; }
.tab-pane { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: auto; padding: 18px 22px; }
.tab-pane.active { display: flex; }
#pane-package { padding: 0; overflow: hidden; }

.pane-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.pane-hdr input { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg2); color: var(--tx); min-width: 220px; }

#statusbar { flex: 0 0 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: var(--bg1); border-top: 1px solid var(--line); font-size: 11px; color: var(--tx3); }

/* ---------- FORM CONTROLS ---------- */
label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--tx2); font-weight: 700; }
input[type=text], input[type=date], input[type=number], textarea, select {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; color: var(--tx); width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; font-family: var(--font); }
.toggle-row { display: flex; align-items: center; gap: 6px; font-weight: 500; flex-direction: row; }

/* ---------- FILTER CHIPS ---------- */
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; margin: 0 5px 5px 0; border-radius: 16px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--tx2); font-size: 11.5px; font-weight: 700;
}
.filter-chip:hover { border-color: var(--accent); color: var(--tx); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-chip .cnt { opacity: .7; font-weight: 400; }
.filter-groups-cat-title { font-size: 10.5px; font-weight: 700; color: var(--tx3); text-transform: uppercase; margin: 0 0 6px; letter-spacing: .4px; }

/* ---------- LEGEND ---------- */
.legend-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--tx2); }
.sw { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; border: 2px solid; background: transparent; }
.sw-bg { border: none; }
.legend-group { font-size: 10.5px; font-weight: 700; color: var(--tx3); text-transform: uppercase; margin: 10px 0 4px; letter-spacing: .4px; }
.legend-group:first-child { margin-top: 0; }

/* ---------- PACKAGE VIEW ---------- */
#pkgToolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; background: var(--bg1); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tb-group { display: flex; align-items: center; gap: 8px; }
.zoom-label { font-size: 12px; color: var(--tx3); width: 40px; text-align: center; font-family: var(--mono); }

.badge-chip { font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 16px; display: inline-flex; align-items: center; gap: 6px; }
.badge-chip.periph { background: rgba(63,167,214,.18); color: var(--fam-comm); }
.badge-chip.net { background: rgba(236,108,37,.18); color: var(--accent); }
.badge-chip button { background: none; border: none; color: inherit; font-weight: 900; padding: 0; }

#viewport {
  flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; cursor: grab;
  background: var(--bg0);
  background-image: linear-gradient(var(--lineSoft) 1px, transparent 1px), linear-gradient(90deg, var(--lineSoft) 1px, transparent 1px);
  background-size: 26px 26px;
}
#viewport.panning { cursor: grabbing; }
#viewport.no-grid { background-image: none; }
#canvas {
  position: absolute; top: 50%; left: 50%; width: 2000px; height: 2000px;
  transform: translate(-50%, -50%) scale(1); transform-origin: center center;
}

.chip-body {
  position: absolute; background: linear-gradient(135deg, var(--chipBody), #10131c);
  border: 2px solid var(--chipEdge); border-radius: 14px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), var(--sh-lg);
  display: flex; align-items: center; justify-content: center;
}
.chip-body:hover { border-color: var(--accent); }
.chip-label { text-align: center; color: #fff; user-select: none; pointer-events: none; }
.chip-label .cn { font-size: 36px; font-weight: 800; color: #f3f5fb; letter-spacing: .5px; }
.chip-label .cp { font-size: 16px; font-weight: 700; color: var(--orange); letter-spacing: 2px; margin-top: 8px; }
.chip-label .ch { font-size: 12px; color: #767e98; margin-top: 18px; }

.pin1mark {
  position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 4px rgba(236,108,37,.25); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #1c1300; pointer-events: none;
}

.pin {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--pinBg); border: 2px solid var(--fam-gpio); border-radius: 5px; cursor: pointer; user-select: none;
  transition: transform var(--fast), box-shadow var(--fast), opacity var(--fast); z-index: 2;
}
.pin:hover { transform: scale(1.3); z-index: 30; box-shadow: var(--sh-md); }
.pin.selected { box-shadow: 0 0 0 3px var(--accent), var(--sh-md); z-index: 32; }
.pin .pnum { font-family: var(--mono); font-weight: 700; color: var(--tx3); font-size: 9px; line-height: 1; }
.pin .pname { font-weight: 800; color: var(--pinTx); font-size: 9.5px; line-height: 1.2; white-space: nowrap; max-width: none; overflow: visible; text-overflow: clip; }
/* Bug fix: full pin names (PE5, PB12, VBAT, …) must display in full — never
   ellipsized to "P…". Left/right pins have ~75px of horizontal room, so no
   truncation is needed. Top/bottom pins are narrow vertical strips, so keep
   a tight ellipsis there to stop long multi-segment names overflowing. */
.pin.side-top .pname, .pin.side-bottom .pname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Transparent flex pass-through: exists purely so a dynamic counter-rotation
   (see PackageView.updateLabelCounterRotation) can be applied to pin TEXT
   only, independent of the chip's own rotation, without disturbing the
   existing centering/writing-mode layout of .pin / .pin-inner above it. */
.pin-label-rot { display: flex; flex-direction: column; align-items: center; gap: 1px; transform-origin: center; }
.pin.side-top .pin-inner, .pin.side-bottom .pin-inner {
  writing-mode: vertical-rl; transform: rotate(180deg); display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; justify-content: center;
}

.pin.state-unused { background: var(--pinBg); }
.pin.state-planned { background: rgba(79,143,224,.24); border-style: dashed; }
.pin.state-connected { background: rgba(63,174,110,.28); }
.pin.state-finished { background: rgba(47,163,122,.36); }
.pin.state-reserved { background: repeating-linear-gradient(135deg, rgba(244,217,136,.32) 0px, rgba(244,217,136,.32) 4px, rgba(244,217,136,.14) 4px, rgba(244,217,136,.14) 8px); }
.pin.state-warning { background: rgba(232,163,61,.32); }
.pin.state-error { background: rgba(224,70,63,.34); box-shadow: inset 0 0 0 1px var(--st-error); }

.pin.fam-comm { border-color: var(--fam-comm); }
.pin.fam-timer { border-color: var(--fam-timer); }
.pin.fam-analog { border-color: var(--fam-analog); }
.pin.fam-hispeed { border-color: var(--fam-hispeed); }
.pin.fam-power { border-color: var(--fam-power); }
.pin.fam-clock { border-color: var(--fam-clock); }
.pin.fam-system { border-color: var(--fam-system); }
.pin.fam-gpio { border-color: var(--fam-gpio); }

.pin.dimmed { opacity: .14; filter: grayscale(.65); transform: scale(.88); }
.pin.dimmed:hover { opacity: .5; transform: scale(1.1); }
.pin.hl { box-shadow: 0 0 0 3px #fff, 0 0 18px 3px var(--accent); z-index: 28; }
.pin.hl-net { box-shadow: 0 0 0 3px var(--beige), 0 0 16px 2px var(--beige); z-index: 27; }
.pin.has-conflict { animation: conflict-pulse 1.4s ease-in-out infinite; }
.pin.needs-review { outline: 2px dotted var(--accent2); outline-offset: 3px; }
@keyframes conflict-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--st-error), 0 0 0 2px var(--st-error); }
  50% { box-shadow: 0 0 0 2px var(--st-error), 0 0 10px 3px rgba(224,70,63,.6); }
}

/* Per-state small icon dot, bottom-left — distinct glyph per state so states never look alike */
.pin-dot {
  position: absolute; bottom: -5px; left: -5px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--st-unused); display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 900; color: #06090f; border: 1.5px solid var(--bg0); line-height: 1;
}
.pin-dot.st-unused { background: var(--st-unused); opacity: .5; }
.pin-dot.st-planned { background: var(--st-planned); }
.pin-dot.st-connected { background: var(--st-connected); }
.pin-dot.st-finished { background: var(--st-finished); }
.pin-dot.st-reserved { background: var(--st-reserved); }
.pin-dot.st-warning { background: var(--st-warning); }
.pin-dot.st-error { background: var(--st-error); color: #fff; }
.pin-dot.progress-partial { box-shadow: 0 0 0 2px var(--st-warning); }
.pin-dot.progress-full { box-shadow: 0 0 0 2px var(--st-finished); }

/* Fixed badge positions — never overlap: star=top-left, notes=top-right, lock=bottom-right, conflict=top-center */
.pin-badge { position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--accent2); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid var(--bg0); }
.pin-star { position: absolute; top: -7px; left: -7px; font-size: 12px; color: var(--beige); filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.pin-lock { position: absolute; bottom: -6px; right: -6px; font-size: 9px; background: var(--bg0); border-radius: 50%; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--st-warning); }
.pin-warn {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 10px; background: var(--st-error);
  color: #fff; border-radius: 50%; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg0); animation: warn-bounce 1.6s ease-in-out infinite;
}
@keyframes warn-bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-2px); } }

/* ---------- TOOLTIP ---------- */
.tooltip {
  position: fixed; z-index: 900; max-width: 300px; background: var(--bgE); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 11px 13px; font-size: 12.5px; pointer-events: none;
}
.tooltip h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--accent); display: flex; gap: 7px; align-items: baseline; }
.tooltip h4 .tn { color: var(--tx3); font-family: var(--mono); font-size: 11.5px; }
.tooltip .tr { margin: 3px 0; color: var(--tx2); }
.tooltip .tr b { color: var(--tx); }
.tooltip .tchip { display: inline-block; padding: 2px 7px; border-radius: 9px; font-size: 10.5px; font-weight: 700; color: #06090f; }

/* ---------- MINIMAP ---------- */
#minimap { position: absolute; right: 16px; bottom: 16px; width: 176px; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-md); z-index: 40; overflow: hidden; }
.minimap-hdr { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; cursor: pointer; font-size: 10px; color: var(--tx3); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.minimap-hdr:hover { color: var(--accent); }
.mm-toggle { transition: transform 200ms ease; font-size: 9px; }
#minimap:not(.collapsed) .mm-toggle { transform: rotate(90deg); }
.minimap-body { max-height: 0; overflow: hidden; transition: max-height 220ms ease; padding: 0 10px; }
#minimap:not(.collapsed) .minimap-body { max-height: 180px; padding: 0 10px 10px; }
#minimapCanvas { position: relative; width: 160px; height: 160px; background: var(--bg2); border-radius: var(--r-sm); overflow: hidden; cursor: crosshair; }
.mm-body { position: absolute; background: var(--bg3); border: 1px solid var(--line); border-radius: 3px; pointer-events: none; }
.mm-pin { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--fam-gpio); pointer-events: none; }
.mm-pin.active { background: var(--accent); width: 4px; height: 4px; }
.mm-viewbox { position: absolute; border: 1.5px solid var(--accent); background: rgba(236,108,37,.12); border-radius: 2px; pointer-events: none; }

/* ---------- DETAIL PANEL ---------- */
.empty-state { text-align: center; color: var(--tx3); padding: 40px 14px; }
.empty-icon { font-size: 30px; margin-bottom: 8px; }

#detailPanel { display: flex; flex-direction: column; gap: 14px; }
.d-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.d-id { display: flex; align-items: baseline; gap: 8px; }
.d-id .n { font-family: var(--mono); color: var(--tx3); font-size: 12.5px; }
.d-id .nm { font-size: 19px; font-weight: 800; }
.d-actions { display: flex; gap: 6px; }
.d-fn { color: var(--tx2); font-size: 12px; margin-top: 3px; }
.d-meta { font-size: 10.5px; color: var(--tx3); margin-top: 3px; }

.state-row { display: flex; flex-wrap: wrap; gap: 6px; }
.state-pill { font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--bg2); color: var(--tx2); }
.state-pill:hover { border-color: var(--accent); color: var(--tx); }
.state-pill.on { color: #06090f; border-color: transparent; }

.d-section { background: var(--bg2); border: 1px solid var(--lineSoft); border-radius: var(--r-md); padding: 12px 13px; }
.d-section h4 { margin: 0 0 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--tx3); font-weight: 700; }
.d-field { margin-bottom: 9px; }
.d-field:last-child { margin-bottom: 0; }
.d-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.af-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.af-table td { padding: 4px 5px; border-bottom: 1px solid var(--lineSoft); }
.af-table td.ai { color: var(--tx3); font-family: var(--mono); width: 34px; }
.af-table tr.empty td { color: var(--tx3); opacity: .4; }
.af-table tr.assigned { background: rgba(236,108,37,.13); }

.check-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--tx2); }
.check-item input { width: 14px; height: 14px; }
.check-item.done { color: var(--st-finished); text-decoration: line-through; opacity: .85; }
.check-bar { height: 4px; border-radius: 2px; background: var(--bg3); margin: -3px 0 9px; overflow: hidden; }
.check-fill { height: 100%; border-radius: 2px; background: var(--st-finished); }

.h-log { max-height: 140px; overflow-y: auto; font-size: 11px; color: var(--tx3); display: flex; flex-direction: column; gap: 4px; }
.h-row { display: flex; gap: 7px; }
.h-time { font-family: var(--mono); flex: 0 0 auto; }

.lock-banner { display: flex; align-items: center; gap: 8px; background: rgba(232,163,61,.15); border: 1px solid var(--st-warning); color: var(--st-warning); border-radius: var(--r-sm); padding: 8px 10px; font-size: 12px; font-weight: 700; }
.lock-banner button { margin-left: auto; }

/* ---------- EXPLORER ---------- */
#explorerLayout { flex: 1 1 auto; display: flex; gap: 14px; min-height: 0; }
#explorerList { width: 260px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
#explorerItems { overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.periph-item { padding: 8px 11px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; border: 1px solid transparent; color: var(--tx2); }
.periph-item:hover { background: var(--bg2); }
.periph-item.active { background: var(--bg3); border-color: var(--accent); color: var(--tx); }
.periph-item .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; flex: 0 0 auto; display: inline-block; }
.periph-item .pc { color: var(--tx3); font-weight: 400; font-size: 11px; }
#explorerDetail { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.exp-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th, table.data-table td { padding: 8px 9px; border-bottom: 1px solid var(--lineSoft); text-align: left; }
table.data-table th { color: var(--tx3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; }
table.data-table tr:hover { background: var(--bg2); }
.pin-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; margin: 2px 3px 2px 0; border-radius: 11px; font-size: 11px; font-weight: 700; background: var(--bg3); border: 1px solid var(--line); }
.pin-chip:hover { border-color: var(--accent); color: var(--accent); }
.pin-chip.assigned { background: rgba(63,174,110,.15); border-color: var(--st-connected); color: var(--st-connected); }
.pin-chip { cursor: pointer; }
.pin-chip.occupied { background: rgba(232,163,61,.12); border-color: var(--st-warning); color: var(--st-warning); opacity: .85; }
.explorer-assign-select { max-width: 140px; padding: 5px 7px; font-size: 11.5px; margin-right: 4px; }
.explorer-assign-select option.occupied-opt { color: var(--st-warning); }
.explorer-clear-btn { color: var(--st-error); border-color: var(--st-error); margin-left: 4px; }
.status-tag { font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 9px; }
.status-tag.a { background: rgba(63,174,110,.18); color: var(--st-connected); }
.status-tag.u { background: rgba(118,126,148,.18); color: var(--tx3); }
.status-tag.c { background: rgba(224,70,63,.18); color: var(--st-error); }

/* ---------- USAGE ---------- */
.usage-block { margin-bottom: 14px; border: 1px solid var(--lineSoft); border-radius: var(--r-md); overflow: hidden; }
.usage-hdr { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: var(--bg2); cursor: pointer; font-weight: 700; font-size: 13px; }
.usage-hdr .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.usage-body { padding: 3px 13px 9px; }
.usage-block.collapsed .usage-body { display: none; }

/* ---------- STATS ---------- */
#statsCards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; margin-bottom: 20px; flex: 0 0 auto; }
.stat-card { background: var(--bg2); border: 1px solid var(--lineSoft); border-radius: var(--r-md); padding: 13px 15px; position: relative; overflow: hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background: var(--accent); }
.stat-card .v { font-size: 24px; font-weight: 800; }
.stat-card .l { font-size: 11px; color: var(--tx3); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
.stat-card.warn::before { background: var(--st-warning); }
.stat-card.err::before { background: var(--st-error); }
.stat-card.good::before { background: var(--st-finished); }

#statsLists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 0 0 auto; }
.stats-list-box { background: var(--bg2); border: 1px solid var(--lineSoft); border-radius: var(--r-md); padding: 13px 15px; }
.stats-list-box h3 { font-size: 12.5px; }
.ml-row { display: flex; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--bg3); font-size: 12px; color: var(--tx2); margin-bottom: 5px; }
.ml-row.err { border-left: 3px solid var(--st-error); }
.ml-row.warn { border-left: 3px solid var(--st-warning); }
.ml-empty { color: var(--tx3); font-style: italic; font-size: 12px; padding: 4px 0; }

/* ---------- REPORTS ---------- */
#reportsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 13px; }
.report-card { background: var(--bg2); border: 1px solid var(--lineSoft); border-radius: var(--r-md); padding: 15px; display: flex; flex-direction: column; gap: 9px; }
.report-card h3 { font-size: 13.5px; }
.report-card p { font-size: 12px; flex: 1; }
.report-card button { align-self: flex-start; }
.danger-card { border-color: rgba(224,70,63,.4); }

/* ---------- PROJECT FORM ---------- */
#projectForm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; max-width: 880px; }
#projectForm .span2 { grid-column: 1 / -1; }

/* ---------- CONTEXT MENU / TOASTS / MODAL ---------- */
.ctx-menu { position: fixed; z-index: 950; min-width: 195px; background: var(--bgE); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 6px; display: flex; flex-direction: column; }
.ctx-menu button { background: none; border: none; text-align: left; padding: 8px 11px; font-size: 12.5px; color: var(--tx); border-radius: var(--r-sm); display: flex; gap: 8px; align-items: center; }
.ctx-menu button:hover { background: var(--bg3); }
.ctx-sep { height: 1px; background: var(--lineSoft); margin: 4px 3px; }

#toasts { position: fixed; bottom: 34px; right: 18px; display: flex; flex-direction: column; gap: 7px; z-index: 1100; }
.toast { background: var(--bgE); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-sm); padding: 10px 15px; font-size: 12.5px; box-shadow: var(--sh-md); min-width: 220px; animation: tin 160ms ease; }
.toast.success { border-left-color: var(--st-finished); }
.toast.error { border-left-color: var(--st-error); }
.toast.warning { border-left-color: var(--st-warning); }
@keyframes tin { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

.modal-bg { position: fixed; inset: 0; background: rgba(8,9,14,.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-box { background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-lg); width: 540px; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column; box-shadow: var(--sh-lg); }
.modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; border-bottom: 1px solid var(--lineSoft); font-weight: 700; font-size: 15px; }
.modal-hdr button { background: none; border: none; color: var(--tx2); font-size: 15px; }
.modal-body { padding: 16px 17px; overflow-y: auto; }

/* ---------- SCROLLBARS ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--scrollT) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scrollT); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

@media print { .no-print { display: none !important; } body { background: #fff; } }

@media (max-width: 1100px) {
  #sideLeft { width: 220px; }
  #sideLeft .sidebar-scroll { width: 220px; }
  #sideLeft.collapsed { width: 0; }
}

/* =====================================================================
   MOBILE BAR — hidden by default (desktop); shown only under the mobile
   breakpoint below. Contains just a "Home" button (back to the main
   site) and the required "use Desktop" notice.
   ===================================================================== */
.mobile-bar { display: none; }

/* =====================================================================
   MOBILE SIMPLIFIED VIEW (<=860px)
   --------------------------------------------------------------------
   A previous version of this pass tried to reuse the desktop's collapsible-
   sidebar infrastructure on mobile, which per direct feedback still left
   the layout unusable (overlapping elements, content running off-screen).
   This replaces that approach entirely: rather than trying to force the
   desktop's dense multi-panel IDE-style UI into a phone-sized viewport,
   mobile now shows ONLY what was explicitly asked for — the chip, zoom,
   pan, and a way back to the main site — with every editing/advanced
   control hidden outright rather than squeezed in or made reachable via
   extra taps. Pan already works via the existing pointer-event drag
   handling in PackageView.initZoomPan (pointer events cover touch
   natively, no separate mobile implementation needed); zoom reuses the
   existing #btnZoomIn/#btnZoomOut/#btnCenter/#btnFit group (wheel-zoom
   doesn't exist on touchscreens, so tappable buttons are kept instead of
   only relying on a gesture).
   ===================================================================== */
@media (max-width: 860px) {
  .mobile-bar {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    padding: 10px 14px; background: var(--bg1); border-bottom: 1px solid var(--line);
  }
  .mobile-bar__home {
    flex: 0 0 auto; background: var(--bg2); border: 1px solid var(--line); color: var(--tx);
    font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: var(--r-sm);
  }
  .mobile-bar__home:active { background: var(--bg3); }
  .mobile-bar__notice { font-size: 11.5px; color: var(--tx2); line-height: 1.4; }

  /* Hide every desktop chrome element not explicitly requested for mobile:
     search, MCU select, the O Solutions/BeaverChip brand row, the entire
     tab bar (package/device/explorer/usage/stats/conflicts/reports/
     project/changelog/help — mobile has no tab switching at all, it's
     always just the chip), both sidebars completely (not just collapsed —
     removed from layout entirely so nothing can overlap), the status bar,
     and every toolbar group except the zoom/center/fit controls. */
  #topbar, #tabbar, #sideLeft, #sideRight, #statusbar,
  #btnCollapseLeft, #btnCollapseRight { display: none !important; }

  /* Mobile simplification: remove the Overview minimap and the Session
     collapse panel from the mobile chip view — they were not requested to
     appear on small screens and add clutter over the chip. Everything else
     (chip + zoom/pan + Home bar + notice) is left exactly as-is. */
  #minimap, #sessionPanel { display: none !important; }

  #pkgToolbar > .tb-group { display: none; }
  #pkgToolbar > #pkgToolbarView { display: flex; flex-wrap: wrap; }

  #workspace { min-height: 0; }
  #center { width: 100%; }
  #viewport { width: 100%; }
}

/* =====================================================================
   NEW: LOGIN SCREEN
   ===================================================================== */
#loginScreen {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, #1d2130 0%, #0e1018 70%);
}
html[data-theme="light"] #loginScreen { background: radial-gradient(circle at 30% 20%, #ffffff 0%, #e9ebf2 70%); }
.login-box {
  width: 380px; max-width: 92vw; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 30px 28px 24px;
}
.login-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.login-brand { display: flex; flex-direction: column; line-height: 1.15; }
.login-brand-name { font-size: 19px; font-weight: 800; color: var(--tx); }
.login-License-name { font-size: 7px; font-weight: 600; color: var(--tx); }
.login-brand-sub { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .6px; }
.login-tagline { font-size: 12.5px; margin: 14px 0 18px; }
#loginForm { display: flex; flex-direction: column; gap: 12px; }
.login-submit { width: 100%; justify-content: center; padding: 10px; font-size: 13.5px; }
.login-guest { width: 100%; justify-content: center; padding: 9px; font-size: 12.5px; }
.login-error { background: rgba(224,70,63,.15); border: 1px solid var(--st-error); color: var(--st-error); border-radius: var(--r-sm); padding: 7px 10px; font-size: 12px; font-weight: 600; }
.login-hint { font-size: 10.5px; color: var(--tx3); margin: 16px 0 0; line-height: 1.5; }

/* =====================================================================
   NEW: TOPBAR ADDITIONS (mcu select, user menu, pan hint)
   ===================================================================== */
.mcu-select-wrap { flex: 0 0 auto; }
.mcu-select-wrap select {
  background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px; font-size: 12px;
  color: var(--tx2); font-weight: 700; max-width: 190px;
}
.user-panel-name { padding: 8px 10px 4px; font-size: 12.5px; font-weight: 700; color: var(--tx); }

.pan-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.55);
  color: #eef1f8; font-size: 11px; padding: 6px 13px; border-radius: 20px; pointer-events: none; z-index: 15;
  transition: opacity 600ms ease; display: flex; gap: 5px; align-items: center;
}
.pan-hint kbd { background: rgba(255,255,255,.18); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 10px; }
.pan-hint.faded { opacity: 0; }
#viewport.space-pan { cursor: grab; }

/* =====================================================================
   NEW: LOCATOR PULSE (search result centering)
   ===================================================================== */
.locator-ring {
  position: absolute; width: 70px; height: 70px; margin-left: -35px; margin-top: -35px; border-radius: 50%;
  border: 3px solid var(--accent); pointer-events: none; z-index: 50; animation: locator-pulse 1.1s ease-out infinite;
}
.locator-ring.fade { animation: none; opacity: 0; transition: opacity .6s ease; }
@keyframes locator-pulse {
  0% { transform: scale(.25); opacity: 1; }
  70% { opacity: .35; }
  100% { transform: scale(2); opacity: 0; }
}

/* =====================================================================
   NEW: FILTER SUMMARY DRAWER
   ===================================================================== */
.filter-summary {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 0; overflow: hidden; background: var(--bg1);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,.25); transition: max-height 260ms cubic-bezier(.4,0,.2,1);
  z-index: 45;
}
.filter-summary.open { max-height: 220px; overflow-y: auto; }
.fs-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--lineSoft); position: sticky; top: 0; background: var(--bg1); }
.fs-title { font-size: 14px; font-weight: 800; color: var(--accent); }
.fs-stats { display: flex; gap: 22px; padding: 12px 16px; }
.fs-stat { text-align: center; }
.fs-v { font-size: 22px; font-weight: 800; color: var(--tx); }
.fs-l { font-size: 10px; color: var(--tx3); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.fs-signals { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 5px; }
.fs-sig-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--bg2); border-radius: var(--r-sm); font-size: 12px; }
.fs-sig-name { font-weight: 700; color: var(--tx); }
.fs-sig-meta { color: var(--tx3); font-size: 11px; font-family: var(--mono); }

/* =====================================================================
   NEW: SESSION PANEL
   ===================================================================== */
.session-panel {
  position: absolute; left: 16px; bottom: 16px; width: 240px; background: var(--bg1); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-md); z-index: 40; overflow: hidden;
}
.sp-hdr { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--tx2); }
.sp-hdr:hover { color: var(--accent); }
.sp-toggle { transition: transform 200ms ease; font-size: 10px; }
.session-panel:not(.collapsed) .sp-toggle { transform: rotate(90deg); }
.sp-body { max-height: 0; overflow: hidden; transition: max-height 220ms ease; padding: 0 12px; }
.session-panel:not(.collapsed) .sp-body { max-height: 260px; padding: 0 12px 10px; overflow-y: auto; }
.sp-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 3px 0; color: var(--tx2); }
.sp-label { color: var(--tx3); }
.sp-value { font-family: var(--mono); font-weight: 700; color: var(--tx); }
.sp-log { margin-top: 8px; border-top: 1px solid var(--lineSoft); padding-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.sp-log-row { font-size: 10.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-log-row.sp-empty { font-style: italic; }

/* =====================================================================
   NEW: PROJECT INFO SAVE ROW
   ===================================================================== */
.pf-save-row { display: flex; align-items: center; gap: 10px; }
.pf-save-confirm { color: var(--st-finished); font-size: 12.5px; font-weight: 700; transition: opacity 300ms ease; }
.pf-save-confirm.hidden { opacity: 0; }

/* =====================================================================
   NEW: EXPORT IMAGE MODAL
   ===================================================================== */
.img-export-opts { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.img-export-opts label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; color: var(--tx); }
.img-export-opts input[type=checkbox] { width: 15px; height: 15px; }
.img-export-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* =====================================================================
   NEW: SHORTCUTS / ABOUT MODAL CONTENT
   ===================================================================== */
.shortcut-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--lineSoft); font-size: 13px; }
.shortcut-row kbd { background: var(--bg3); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; font-family: var(--mono); font-size: 11.5px; }
.about-content { text-align: center; }
.about-content .about-logo { margin: 6px auto 14px; }
.about-content h3 { margin-bottom: 4px; }
.about-content p { font-size: 12.5px; margin-bottom: 6px; }

/* =====================================================================
   NEW: DEVICE INFO TAB
   ===================================================================== */
.device-info-hero {
  display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: var(--bg2);
  border: 1px solid var(--lineSoft); border-radius: var(--r-lg); margin-bottom: 20px;
}
.device-info-hero .dih-chip {
  width: 150px; height: 64px; border-radius: 12px; background: linear-gradient(135deg, var(--chipBody), #10131c);
  border: 2px solid var(--chipEdge); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.device-info-hero .dih-chip span { font-size: 22px; font-weight: 800; color: var(--orange); }
.device-info-hero h2 { margin: 0 0 4px; font-size: 22px; }
.device-info-hero p { margin: 0; font-size: 13px; }
.device-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dig-card { background: var(--bg2); border: 1px solid var(--lineSoft); border-radius: var(--r-md); padding: 13px 15px; }
.dig-card .dig-label { font-size: 10.5px; color: var(--tx3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; font-weight: 700; }
.dig-card .dig-value { font-size: 13.5px; color: var(--tx); line-height: 1.5; font-weight: 600; }

/* =====================================================================
   NEW: CONFLICTS TAB
   ===================================================================== */
.conflict-card {
  background: var(--bg2); border: 1px solid var(--lineSoft); border-left: 4px solid var(--st-error);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 12px; cursor: pointer; transition: border-color var(--fast);
}
.conflict-card.warning { border-left-color: var(--st-warning); }
.conflict-card:hover { border-color: var(--accent); }
.conflict-card .cc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.conflict-card .cc-sev { font-size: 10.5px; font-weight: 800; text-transform: uppercase; padding: 3px 9px; border-radius: 10px; }
.conflict-card .cc-sev.error { background: rgba(224,70,63,.18); color: var(--st-error); }
.conflict-card .cc-sev.warning { background: rgba(232,163,61,.18); color: var(--st-warning); }
.conflict-card .cc-title { font-weight: 700; font-size: 14px; }
.conflict-card .cc-desc { font-size: 12.5px; color: var(--tx2); margin-bottom: 8px; line-height: 1.5; }
.conflict-card .cc-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--tx3); margin-bottom: 8px; }
.conflict-card .cc-meta b { color: var(--tx); }
/* Suggestions use yellow specifically so they never read as another
   warning/error (those are --st-warning amber-orange and --st-error red).
   #F5D93A is a clean, unambiguous yellow distinct from both. */
.conflict-card .cc-suggestions { margin-top: 4px; display: flex; flex-direction: column; gap: 5px; }
.conflict-card .cc-suggestions__label { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #F5D93A; }
.conflict-card .cc-suggestion {
  font-size: 12px; color: #F5D93A; background: rgba(245, 217, 58, .1);
  border: 1px solid rgba(245, 217, 58, .35); border-radius: var(--r-sm); padding: 7px 10px;
}

/* =====================================================================
   UNIFIED SIGNAL + CONNECTION NAME LABELS (one group per pin)
   ---------------------------------------------------------------------
   Each pin that has an enabled Signal Name and/or Connection Name gets a
   single absolutely-positioned .pin-labels group. Inside it the signal and
   connection spans are siblings in one flex row, so they can NEVER overlap
   each other (bug fix for the old two-independent-layers layout, where a
   long signal name could slide into the connection label and vice versa).

   Chip Rotation Bug fix: every text span carries the .label-rot class so
   PackageView.updateLabelCounterRotation can rotate JUST that span by
   -chipAngle, independent of whatever per-side rotation the host group
   already has (±90° for top/bottom). The two transforms live on separate
   nested elements, so they compose naturally through normal DOM nesting
   and the text always stays upright & readable at any chip angle.
   ===================================================================== */
.label-rot { display: inline-block; transform-origin: center; }
.pin-labels { position: absolute; pointer-events: none; z-index: 3; }
.pin-labels__inner {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--bg0); border: 1px solid var(--lineSoft); border-radius: 4px;
  padding: 1px 5px; line-height: 1.3; box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.pl-sig  { font-size: 9.5px; font-weight: 700; color: var(--accent);   max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.pl-conn { font-size: 9.5px; font-weight: 700; color: var(--fam-comm); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* Left/right pins: the group sits beside the pin, signal nearest the pin
   ("Pin Number → Signal Name → Connection Name"), text readable upright. */
.pin-labels.side-left  { transform: translate(-100%, -50%); }
.pin-labels.side-right { transform: translate(0, -50%); }
.pin-labels.side-left  .pin-labels__inner { flex-direction: row-reverse; }

/* Top/bottom pins: rotate the group ±90° so it extends straight out from the
   package edge (like a professional PCB pinout diagram) instead of stacking
   horizontally (which would collide with every neighboring pin's label).
   Signal sits nearest the chip and Connection after it (further out). The
   transform-origin is pinned to the left-center of the (unrotated) group,
   matching the anchor coordinate set in JS — the margin-top correction
   shifts that pivot so after rotating there is zero drift from the pin. */
.pin-labels.side-top    { margin-top: -7px; transform-origin: left center; transform: rotate(-90deg); }
.pin-labels.side-bottom { margin-top: -7px; transform-origin: left center; transform: rotate(90deg); }

/* =====================================================================
   MATERIAL 3 REFINEMENTS (visual cohesion with the main O Solutions site)
   ---------------------------------------------------------------------
   Cosmetic-only polish layered at the end of this file so it wins the
   cascade where it needs to: layered elevation, Material "state layer"
   hover/active treatments, consistent focus rings and control heights.
   Colors stay strictly on the existing O Solutions palette (accent
   orange, blue, beige, grays) — nothing here introduces a new hue, and
   no section is relaid out; it only sharpens the existing components so
   the app feels like part of the same design ecosystem.
   ===================================================================== */

/* Layered Material 3 elevation on surfaces */
.d-section, .report-card, .stat-card, .conflict-card,
.pp-changelog__entry, .dropdown-panel, .search-dropdown,
.ctx-menu, .modal-box, .login-box {
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.16);
}
.d-section, .report-card, .stat-card, .conflict-card, .pp-changelog__entry {
  border-radius: var(--r-lg);
}

/* Material tonal buttons — consistent height, pill-ish emphasis, state layer */
.btn-primary, .btn-secondary, .btn-danger, .btn-sm,
.mobile-bar__home, .insert-chip-btn {
  min-height: 34px;
}
.btn-primary, .btn-secondary, .btn-danger { border-radius: 22px; }
.btn-primary {
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.16);
}
.btn-primary:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 10px 3px rgba(0,0,0,.22);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: inset 0 0 0 999px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.3); }
.btn-secondary:hover { box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 2px 6px 2px rgba(0,0,0,.12); }
.btn-icon, .btn-sm { border-radius: 12px; }

/* Material 3 text-field focus ring */
input[type=text], input[type=number], input[type=date], select, textarea {
  border-radius: 8px;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(236,108,37,.22);
}
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* Accessible Material focus ring for interactive elements */
.tab:focus-visible, .collapse-btn:focus-visible, .btn-icon:focus-visible,
.btn-sm:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-danger:focus-visible, .link-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(236,108,37,.35);
}

/* Tighter hierarchy on card/section headers */
.d-section h4, .sb-title, .filter-groups-cat-title, .legend-group,
.pp-changelog__version { letter-spacing: .05em; }

/* Material "state layer" hover tint on rows / menus / tabs */
.sr-item:hover, .dropdown-panel button:hover, .ctx-menu button:hover,
.tab:hover {
  background-image: linear-gradient(rgba(236,108,37,.06), rgba(236,108,37,.06));
}

/* Refined on-system scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scrollT); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }