:root {
  --bg:       #b0e2ff;
  --card:     #ffffff;
  --ink:      #1a1a1a;
  --title:    #0b3c5d;
  --accent:   #1890ff;
  --accent-2: #1d6fa5;
  --soft:     #e6f7ff;
  --shadow:   0 10px 30px rgba(0,0,0,0.10);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg); color: var(--ink);
  line-height: 1.6; display: flex; flex-direction: column;
}
#app { width:100%; height:100%; }
.boot-loading { padding: 40px; text-align:center; color:#0b3c5d; font-weight:700; }

#blazor-error-ui {
  background: #fde8e8; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
  display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed;
  width: 100%; z-index: 1000; color:#9b1c1c;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.page { display:flex; width:100%; height:100%; gap:14px; padding:16px; }

.mobile-message { display: none; }
@media only screen and (max-width: 768px) {
  .page { display: none; }
  .mobile-message {
    display: block; padding: 20px; font-size: 18px; text-align: center;
    background: #ffecec; color: #a00000;
  }
}

/* ── PANEL ── */
.panel {
  width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:10px;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:#99cee8 transparent;
}
.panel::-webkit-scrollbar { width:4px; }
.panel::-webkit-scrollbar-thumb { background:#99cee8; border-radius:2px; }

/* ── DROP AREA ── */
.drop-area {
  position:relative; border:2px dashed #99cee8; border-radius:14px; padding:18px 16px;
  background:var(--soft); cursor:pointer; transition:.15s ease;
  text-align:center; user-select:none; flex-shrink:0;
}
.drop-area:hover,.drop-area.drag-over { border-color:var(--accent); background:#d7eef9; transform:translateY(-1px); }
.drop-area input[type="file"] {
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0; padding:0;
}
.drop-icon  { font-size:1.8rem; color:var(--accent-2); margin-bottom:6px; pointer-events:none; }
.drop-title { font-weight:700; color:var(--title); font-size:.95rem; margin-bottom:3px; pointer-events:none; }
.drop-sub   { font-size:.82rem; color:#4f6780; line-height:1.4; pointer-events:none; }
.drop-formats { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-top:8px; pointer-events:none; }
.drop-fmt { font-size:.65rem; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:20px; border:1px solid #99cee8; text-transform:uppercase; color:var(--accent-2); background:#fff; }

/* ── BUTTONS ── */
.btn-row { display:flex; gap:8px; flex-shrink:0; }
.btn { flex:1; border:none; border-radius:10px; padding:9px 8px; background:var(--title); color:#fff; font-weight:700; font-size:.82rem; cursor:pointer; transition:.2s ease; white-space:nowrap; }
.btn:hover:not(:disabled) { background:var(--accent-2); transform:translateY(-1px); }
.btn:disabled { opacity:.35; cursor:default; transform:none; }
.btn.secondary { background:transparent; color:var(--title); border:2px solid rgba(11,60,93,0.2); }
.btn.secondary:hover:not(:disabled) { background:var(--soft); border-color:var(--accent-2); }

/* ── STATUS ── */
.status-badge { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:20px; background:#e0eef8; color:#4f6780; align-self:flex-start; flex-shrink:0; }
.status-badge.ready   { background:#d4f4e6; color:#1a7a4a; }
.status-badge.loading { background:#fff3cd; color:#7a5800; }
.status-badge.error   { background:#fde8e8; color:#9b1c1c; }

/* ── PROGRESS ── */
.progress-wrap { height:4px; background:#c8e0ef; border-radius:2px; overflow:hidden; display:none; flex-shrink:0; }
.progress-wrap.active { display:block; }
.progress-bar { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); width:40%; animation:slide 1.2s ease-in-out infinite; }
@keyframes slide { 0%{transform:translateX(-120%)} 100%{transform:translateX(350%)} }

/* ── STATS ── */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; flex-shrink:0; }
.stat-cell { background:var(--soft); border:1px solid #c8e0ef; border-radius:10px; padding:9px 11px; }
.stat-value { font-size:1.25rem; font-weight:800; color:var(--title); line-height:1; }
.stat-key   { font-size:.72rem; color:#4f6780; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }

/* ── ERROR ── */
.err-banner { display:none; background:#fde8e8; border:1px solid #f5a3a3; border-radius:10px; padding:9px 11px; font-size:.82rem; color:#9b1c1c; white-space:pre-wrap; line-height:1.5; flex-shrink:0; }
.err-banner.visible { display:block; }

/* ── FILTER ── */
.filter-wrap { background:var(--card); border:1px solid #dbe9f3; border-radius:12px; overflow:hidden; flex-shrink:0; }
.filter-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#f5fbff; border-bottom:1px solid #edf4fa; cursor:pointer; user-select:none; }
.filter-header:hover { background:#e9f5fd; }
.filter-header-label { font-size:.76rem; font-weight:700; color:var(--title); text-transform:uppercase; letter-spacing:.08em; }
.filter-header-right { display:flex; align-items:center; gap:8px; }
.filter-count-badge { font-size:.68rem; font-weight:700; background:#e0eef8; color:var(--accent-2); padding:1px 7px; border-radius:20px; }
.filter-chevron { font-size:.68rem; color:#4f6780; transition:transform .2s ease; }
.filter-chevron.open { transform:rotate(180deg); }
.filter-body { max-height:210px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#99cee8 transparent; }
.filter-body::-webkit-scrollbar { width:3px; }
.filter-body::-webkit-scrollbar-thumb { background:#99cee8; }
.filter-controls { display:flex; gap:6px; padding:5px 10px 8px; border-bottom:1px solid #edf4fa; }
.filter-ctrl-btn { flex:1; font-size:.7rem; font-weight:700; padding:4px 4px; border-radius:8px; border:1px solid #c8e0ef; background:#f5fbff; color:var(--accent-2); cursor:pointer; transition:background .15s; text-align:center; }
.filter-ctrl-btn:hover { background:#d7eef9; border-color:var(--accent); }
.filter-row { display:flex; align-items:center; gap:7px; padding:4px 10px; transition:background .1s; }
.filter-row:hover { background:#f5fbff; }
.filter-row.hidden-type { opacity:.45; }
.vis-btn { flex-shrink:0; width:22px; height:22px; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:5px; font-size:.82rem; color:var(--accent-2); padding:0; transition:background .15s; }
.vis-btn:hover { background:#d7eef9; }
.vis-btn.hidden { color:#aac2d2; }
.color-swatch-wrap { flex-shrink:0; width:20px; height:20px; border-radius:5px; overflow:hidden; border:2px solid rgba(11,60,93,0.15); cursor:pointer; position:relative; transition:border-color .15s,transform .1s; }
.color-swatch-wrap:hover { border-color:var(--accent); transform:scale(1.1); }
.color-swatch-wrap input[type="color"] { position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:none; padding:0; cursor:pointer; }
.type-label { flex:1; font-size:.76rem; color:var(--title); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Courier New',monospace; }
.type-count-badge { flex-shrink:0; font-size:.67rem; font-weight:700; background:#e0eef8; color:#4f6780; padding:1px 6px; border-radius:20px; min-width:22px; text-align:center; }

/* ── LOG ── */
.log-wrap { flex:1; min-height:70px; background:var(--card); border:1px solid #dbe9f3; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.log-header { padding:7px 12px; font-size:.75rem; font-weight:700; color:var(--title); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid #edf4fa; background:#f5fbff; flex-shrink:0; }
#log { flex:1; overflow-y:auto; padding:8px 12px; font-family:'Courier New',monospace; font-size:.78rem; color:#37566f; line-height:1.65; scrollbar-width:thin; scrollbar-color:#99cee8 transparent; }
#log .ok   { color:#1a7a4a; }
#log .err  { color:#9b1c1c; }
#log .warn { color:#7a5800; }
#log .info { color:var(--accent-2); }

/* ── VIEWPORT ── */
.viewport { flex:1; min-width:0; position:relative; border-radius:16px; overflow:hidden; background:radial-gradient(circle at 50% 40%,#fff 0%,#eaf7ff 55%,#d5efff 100%); border:1px solid #c8e0ef; box-shadow:var(--shadow); touch-action:none; }
canvas { display:block; width:100%; height:100%; touch-action:none; }

/* ── EMPTY STATE ── */
.empty-state { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.empty-state.hidden { display:none; }
.empty-card { background:rgba(255,255,255,.88); border:1px solid #dbe9f3; border-radius:14px; padding:22px 28px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.empty-icon  { font-size:2.2rem; margin-bottom:8px; }
.empty-title { font-weight:700; color:var(--title); font-size:1.05rem; margin-bottom:6px; }
.empty-hint  { color:#4f6780; font-size:.88rem; }
.empty-formats { display:flex; justify-content:center; gap:6px; margin-top:12px; }
.empty-fmt { font-size:.7rem; font-weight:700; letter-spacing:.06em; padding:3px 9px; border-radius:20px; border:1px solid #c8e0ef; color:#4f6780; text-transform:uppercase; background:#f5fbff; }

/* ── PIVOT CROSSHAIR ── */
.pivot-hint { position:absolute; pointer-events:none; width:22px; height:22px; transform:translate(-50%,-50%); opacity:0; transition:opacity .25s; z-index:6; }
.pivot-hint.visible { opacity:1; }
.pivot-hint::before,.pivot-hint::after { content:''; position:absolute; background:#ff7700; border-radius:1px; }
.pivot-hint::before { width:22px; height:2px; top:50%; left:0; transform:translateY(-50%); }
.pivot-hint::after  { width:2px; height:22px; left:50%; top:0; transform:translateX(-50%); }
.pivot-circle { position:absolute; pointer-events:none; width:14px; height:14px; border:2px solid #ff7700; border-radius:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .25s; z-index:6; }
.pivot-circle.visible { opacity:1; }

/* ── FPV BUTTON ── */
.fpv-btn { position:absolute; bottom:14px; right:14px; display:none; align-items:center; gap:6px; background:rgba(255,255,255,.82); border:1.5px solid #c8e0ef; border-radius:10px; padding:7px 12px; font-size:.78rem; font-weight:700; color:var(--title); cursor:pointer; backdrop-filter:blur(8px); transition:background .15s,border-color .15s,color .15s; z-index:10; }
.fpv-btn.shown { display:flex; }
.fpv-btn:hover { background:#d7eef9; border-color:var(--accent); }
.fpv-btn.active { background:var(--title); border-color:var(--title); color:#fff; }
.fpv-dot { width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.7; }
.fpv-btn.active .fpv-dot { background:#7dffcf; opacity:1; }

/* ── NAV HELP PANEL ── */
.nav-help { position:absolute; bottom:14px; right:14px; background:rgba(11,30,50,.82); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px; backdrop-filter:blur(10px); color:rgba(255,255,255,.82); font-size:.73rem; line-height:1.85; pointer-events:none; display:none; min-width:230px; }
.nav-help.visible { display:block; }
.nav-help-title { font-weight:700; color:#fff; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:5px; }
.nav-help-section { margin-top:6px; font-size:.68rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
.nav-k { display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:4px; padding:0 5px; font-family:'Courier New',monospace; font-size:.72rem; color:#a8d8ff; margin-right:2px; }
.nav-help-toggle { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.72); border:1px solid #c8e0ef; border-radius:8px; padding:5px 12px; font-size:.72rem; font-weight:700; color:var(--title); cursor:pointer; backdrop-filter:blur(8px); display:none; transition:background .15s; z-index:10; white-space:nowrap; }
.nav-help-toggle.shown { display:block; }
.nav-help-toggle:hover { background:#d7eef9; }

/* ── ELEMENT DETAIL POPUP ── */
.detail-popup { position:absolute; top:14px; left:14px; width:460px; max-height:calc(100% - 28px); background:rgba(255,255,255,.97); border:1px solid #c8e0ef; border-radius:14px; box-shadow:0 12px 30px rgba(11,60,93,.22); backdrop-filter:blur(6px); overflow:hidden; display:none; flex-direction:column; z-index:20; }
.detail-popup.visible { display:flex; }
.detail-popup-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:14px 14px 10px 16px; background:linear-gradient(135deg,var(--title),var(--accent-2)); color:#fff; }
.detail-popup-title { font-weight:700; font-size:.95rem; word-break:break-word; line-height:1.35; }
.detail-popup-type  { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; opacity:.85; margin-top:2px; }
.detail-popup-close { flex-shrink:0; width:26px; height:26px; border-radius:50%; border:none; background:rgba(255,255,255,.18); color:#fff; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,transform .15s; }
.detail-popup-close:hover { background:rgba(255,255,255,.32); transform:scale(1.08); }
.detail-popup-body { padding:12px 16px 16px; overflow-y:auto; font-size:.84rem; color:#2c4357; }
.detail-row { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid #edf4fa; }
.detail-row:last-child { border-bottom:none; }
.detail-key { color:#6f879a; font-weight:600; flex-shrink:0; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; }
.detail-val { text-align:right; word-break:break-word; font-family:'Courier New',monospace; font-size:.78rem; color:var(--title); }
.detail-props-title { margin-top:10px; padding-top:10px; border-top:2px solid #edf4fa; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:#6f879a; font-weight:700; }