/* =====================================================================
   Bauplan-Viewer - im Look von Beyond the Nova Horizon.
   Ziel: wenige, grosse, beschriftete Bedienelemente. Alles, was man selten
   braucht, steckt in einem <details>.
   ===================================================================== */

:root {
  --bg: #060917;
  --bg2: #0a1026;
  --panel: rgba(18, 26, 54, 0.78);
  --panel-solid: #111936;
  --panel2: rgba(34, 48, 92, 0.55);
  --line: rgba(120, 160, 255, 0.16);
  --line2: rgba(140, 190, 255, 0.34);
  --text: #e8eeff;
  --dim: #9fb0d8;
  --faint: #6c7ca6;
  --accent: #3bdcff;
  --accent-strong: #4f8bff;
  --accent2: #46f08f;
  --magenta: #ff4fd8;
  --violet: #a071ff;
  --warn: #ffd166;
  --bad: #ff5a7a;
  --radius: 14px;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body: "Outfit", "Segoe UI", system-ui, sans-serif;
  --grad: linear-gradient(120deg, #3bdcff, #4f8bff 45%, #ff4fd8);
  --glow: 0 0 22px rgba(59, 220, 255, .35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex; flex-direction: column;
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(60, 140, 255, .14), transparent 60%),
    radial-gradient(70% 50% at 100% 10%, rgba(255, 70, 220, .08), transparent 60%),
    var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #9ceaff; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
select option { background: var(--panel-solid); }
code { font-family: var(--mono); font-size: .9em; background: rgba(80,120,220,.18); border: 1px solid var(--line); border-radius: 5px; padding: .05em .35em; }
kbd {
  font: 600 11px/1 var(--mono); background: var(--panel2);
  border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px;
  padding: 3px 5px; margin: 0 1px; color: var(--text);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================ Kopfzeile */

.topbar {
  flex: 0 0 auto; min-height: 60px;
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: linear-gradient(180deg, rgba(6,10,26,.95), rgba(6,10,26,.8));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  position: relative; z-index: 20;
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--grad); opacity: .45;
}

.brand { display: flex; align-items: center; gap: 9px; color: var(--text); flex: 0 0 auto; }
.brand:hover { color: #fff; }
.brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(80,180,255,.45)); }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__txt small { font: 500 10px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.brand__txt strong { font: 700 16px/1.1 var(--display); letter-spacing: .02em; }

.filechip {
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
  background: rgba(12, 18, 42, .8); border: 1px solid var(--line2);
  border-radius: 999px; padding: 7px 16px; max-width: min(460px, 40vw);
  transition: border-color .15s, box-shadow .15s;
}
.filechip:hover { border-color: var(--accent); box-shadow: var(--glow); }
.filechip__name { font: 600 15px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filechip__dims { color: var(--dim); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.filechip small { color: var(--accent); font-size: 12px; flex: 0 0 auto; }

.topspace { flex: 1; }

.assetinfo { color: var(--faint); font-size: 11.5px; max-width: 230px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assetinfo.warn { color: var(--warn); }

.topactions { display: flex; align-items: center; gap: 6px; }
.tbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px;
  padding: 0 12px; border-radius: 10px; white-space: nowrap;
  background: rgba(90,140,255,.1); border: 1px solid var(--line); color: var(--text);
  font-size: 13px; transition: background .15s, border-color .15s, box-shadow .15s;
}
.tbtn:hover { background: rgba(90,140,255,.22); border-color: var(--line2); color: #fff; }
.tbtn span { font-size: 15px; line-height: 1; }
.tbtn b { font-weight: 500; }
.tbtn--icon { width: 36px; padding: 0; justify-content: center; }
.tbtn.active { background: rgba(59,220,255,.18); border-color: var(--accent); box-shadow: var(--glow); }
.tbtn.active span { animation: spin 4s linear infinite; display: inline-block; }
.tbtn--login { background: var(--grad); color: #04091c; border: 0; font-weight: 700; }
.tbtn--login:hover { color: #04091c; filter: brightness(1.1); }
.tbtn--login b { font-weight: 700; }
@keyframes spin { to { transform: rotate(360deg); } }

.account img { width: 34px; height: 34px; border-radius: 9px; image-rendering: pixelated;
  border: 1px solid var(--line2); display: block; }
.account:hover img { border-color: var(--accent); box-shadow: var(--glow); }

/* ============================================================ Grundraster */

.layout { flex: 1; display: flex; min-height: 0; }

.sidebar {
  width: 350px; flex: 0 0 350px; display: flex; flex-direction: column;
  background: rgba(7, 11, 28, .82); border-right: 1px solid var(--line); min-height: 0;
  backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------- Reiter */

.tabs { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--line); padding: 0 6px; }
.tabs button {
  flex: 1; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 12px 6px 10px; display: flex; flex-direction: column; gap: 1px;
  color: var(--dim); transition: color .15s, background .15s;
}
.tabs button b { font: 600 14.5px/1.2 var(--display); letter-spacing: .03em; }
.tabs button span { font-size: 11px; opacity: .75; }
.tabs button:hover { color: var(--text); background: rgba(90,140,255,.06); }
.tabs button.active { color: #fff; border-image: var(--grad) 1; border-bottom-width: 2px;
  background: linear-gradient(180deg, transparent, rgba(59,220,255,.08)); }

.pane { flex: 1; overflow-y: auto; padding: 14px; display: flex;
  flex-direction: column; gap: 12px; min-height: 0; }

/* ---------------------------------------------------------- Karten */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card.grow { flex: 1; display: flex; flex-direction: column; min-height: 260px; }
.card h2 {
  margin: 0 0 10px; font: 600 12.5px/1.2 var(--display);
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 8px;
}
.card h3 { margin: 16px 0 8px; font: 600 12.5px/1.2 var(--display); color: var(--dim); letter-spacing: .04em; }
.card > *:first-child { margin-top: 0; }

/* Beschreibung des Bauwerks */
.about { background: linear-gradient(160deg, rgba(59,220,255,.1), rgba(160,113,255,.08) 60%, rgba(18,26,54,.78)); }
.about p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.about p:last-child { margin-bottom: 0; }
.about__by { color: var(--dim); }
.about__by strong { color: var(--text); font-weight: 600; }
.about__loc { color: var(--dim); font-size: 12.5px !important; }
.about__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.about__tags span {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(160,113,255,.18); border: 1px solid rgba(160,113,255,.4); color: #d6c4ff;
}

.pill {
  margin-left: auto; font: 500 11px/1.4 var(--body); letter-spacing: 0;
  text-transform: none; color: var(--dim);
  background: var(--panel2); border-radius: 999px; padding: 2px 9px;
}

.tip { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.tip b { color: var(--text); font-weight: 600; }
.hint { display: block; margin-top: 8px; color: var(--dim); font-size: 12px; line-height: 1.45; }
.dimtext { color: var(--dim); }
.savehint { margin: 10px 0 0; font-size: 11.5px; color: var(--faint); line-height: 1.45; }
.savehint .warn, #syncInfo.warn { color: var(--warn); }
#syncInfo { color: var(--accent2); }

.howto { margin: 0 0 12px; padding-left: 20px; font-size: 12.5px;
  color: var(--dim); line-height: 1.6; }
.howto li { margin-bottom: 3px; }
.howto b { color: var(--text); }

details.more { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
details.more > summary {
  cursor: pointer; font-size: 12.5px; color: var(--accent); list-style: none; padding: 2px 0;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "▸ "; font-size: 10px; }
details.more[open] > summary::before { content: "▾ "; }
details.more > summary:hover { text-decoration: underline; }
details.more > *:not(summary) { margin-top: 10px; }

button.link {
  background: none; border: 0; color: var(--accent); padding: 0;
  font-size: 12.5px; margin-left: auto;
}
button.link:hover { text-decoration: underline; }

/* ---------------------------------------------------------- Schalter */

.bigswitch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bigswitch button {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 11px; display: flex; flex-direction: column; gap: 2px;
  text-align: left; color: var(--dim); transition: border-color .15s, box-shadow .15s;
}
.bigswitch button b { font: 600 14.5px/1.2 var(--display); color: var(--text); }
.bigswitch button span { font-size: 11px; line-height: 1.3; }
.bigswitch button:hover { border-color: var(--line2); }
.bigswitch button.active {
  background: linear-gradient(140deg, rgba(59,220,255,.2), rgba(79,139,255,.14));
  border-color: var(--accent); color: #cfefff; box-shadow: var(--glow);
}

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px; margin-bottom: 10px; }
.modes button {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 6px; font-size: 12.5px; color: var(--dim); line-height: 1.25;
}
.modes button:hover { border-color: var(--line2); color: var(--text); }
.modes button.active {
  background: linear-gradient(120deg, #3bdcff, #4f8bff); border-color: transparent;
  color: #04091c; font-weight: 600;
}

.switch {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; border-radius: 9px; padding: 7px 8px;
  font-size: 13.5px; color: var(--dim); text-align: left; margin-bottom: 2px;
}
.switch:hover { background: var(--panel2); color: var(--text); }
.switch i {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--line2); background: var(--bg);
  display: grid; place-items: center;
}
.switch i::after { content: "✓"; font-size: 12px; color: transparent; line-height: 1; }
.switch.active { color: var(--text); }
.switch.active i { background: var(--accent2); border-color: var(--accent2); box-shadow: 0 0 10px rgba(70,240,143,.4); }
.switch.active i::after { color: #032614; }

.viewgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.viewgrid button {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px; font-size: 12.5px; color: var(--dim);
}
.viewgrid button:hover { border-color: var(--line2); color: var(--text); }
.viewgrid button.active { background: linear-gradient(120deg, #3bdcff, #4f8bff); border-color: transparent; color: #04091c; font-weight: 600; }

button.wide {
  width: 100%; margin-top: 10px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px; font-size: 13.5px;
}
button.wide:hover { border-color: var(--line2); background: rgba(90,140,255,.22); }
button.wide.active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
button.wide.primary {
  background: var(--grad); border: 0; color: #04091c; font: 700 14px/1.2 var(--display);
  letter-spacing: .03em; padding: 10px; box-shadow: 0 8px 24px rgba(70,160,255,.25);
}
button.wide.primary:hover { filter: brightness(1.08); box-shadow: 0 10px 30px rgba(120,90,255,.35); }

/* ---------------------------------------------------------- Angaben */

.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 13px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv dd.warn { color: var(--warn); }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--dim); }
.row select, .playrow select, #matLang, .animbar select {
  background: rgba(8,13,32,.85); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 8px; color: var(--text);
}

.orggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.orggrid label { display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--dim); text-align: center; }
.orggrid input, .selgrid input, .secadd input, input[type=search], .flatsel input {
  background: rgba(8,13,32,.85); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text);
}
.orggrid input { padding: 7px 4px; width: 100%; text-align: center;
  font-variant-numeric: tabular-nums; font-size: 14px; }
.orggrid input:focus, .selgrid input:focus, .secadd input:focus, input[type=search]:focus,
.flatsel input:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); }

.selgrid {
  display: grid; grid-template-columns: 16px 1fr 1fr; gap: 6px 8px;
  align-items: center; font-size: 12px; color: var(--dim);
}
.selgrid input { padding: 5px 7px; width: 100%; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- Schichtregler */

.layerbox { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.layerbox button {
  flex: 0 0 36px; height: 36px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 9px; font-size: 18px; line-height: 1;
}
.layerbox button:hover { border-color: var(--accent); }
#layerRange { flex: 1; width: 100%; }

input[type=range] { -webkit-appearance: none; appearance: none; background: none; height: 22px; }
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(59,220,255,.4), rgba(255,79,216,.35));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); margin-top: -7px;
  box-shadow: 0 0 12px rgba(59,220,255,.7);
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(59,220,255,.4), rgba(255,79,216,.35)); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 0 12px rgba(59,220,255,.7); }
input[type=range]:focus { outline: none; }

.layerread { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.layerbig {
  flex: 0 0 auto; min-width: 58px; text-align: center;
  background: rgba(8,13,32,.85); border: 1px solid var(--line2); border-radius: 10px; padding: 4px 8px;
}
.layerbig span { font: 700 26px/1.2 var(--display); font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.layerread small { color: var(--dim); font-size: 11.5px; font-family: var(--mono); }
.layermeta { font-size: 12px; color: var(--dim); line-height: 1.45; margin-top: 2px; }
.layermeta b { color: var(--text); }

.playrow { display: flex; gap: 8px; margin-top: 12px; }
.playrow button {
  flex: 1; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; font-size: 13px;
}
.playrow button:hover { border-color: var(--line2); }
.playrow button.active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

.map {
  width: 100%; height: auto; aspect-ratio: 1 / 1; background: #060a1c;
  border: 1px solid var(--line2); border-radius: 10px; image-rendering: pixelated;
  cursor: crosshair; display: block;
}
.maphint { font-size: 11px; color: var(--dim); text-align: center;
  min-height: 1.5em; font-family: var(--mono); margin-top: 4px; }

/* ---------------------------------------------------------- Bauabschnitte */

.secbar { height: 6px; background: var(--panel2); border-radius: 3px;
  overflow: hidden; margin: 12px 0 9px; }
.secbar > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .25s ease; box-shadow: 0 0 10px rgba(70,240,143,.5); }

.seclist { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.secrow {
  display: grid; grid-template-columns: 17px minmax(0, 1fr) auto 22px 22px 22px;
  align-items: center; gap: 4px; padding: 6px 7px; border-radius: 9px;
  background: var(--panel2); font-size: 13px;
}
.secrow:hover { background: rgba(90,140,255,.25); }
.secrow.done { background: rgba(70,240,143,.1); }
.secrow.done .secname { color: var(--dim); text-decoration: line-through; }
.secname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.secnum { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; margin-right: 3px; }
.secrow button {
  background: none; border: 0; color: var(--dim); padding: 2px 0;
  font-size: 13px; line-height: 1; border-radius: 5px;
}
.secrow button:hover { color: var(--text); background: #ffffff14; }
.secrow .secguide { color: var(--accent2); font-size: 11px; }
.secrow input[type=checkbox] { accent-color: var(--accent2); cursor: pointer; width: 15px; height: 15px; margin: 0; }

.secadd { display: flex; gap: 7px; margin-top: 10px; }
.secadd input { flex: 1; padding: 7px 10px; min-width: 0; }
.secadd button {
  flex: 0 0 38px; background: var(--grad); border: 0; color: #04091c; border-radius: 8px; font-size: 16px; font-weight: 700;
}
.secadd button:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------- Materialliste */

.matctl { display: flex; gap: 7px; margin: 10px 0; }
input[type=search] { flex: 1; min-width: 0; padding: 7px 10px; }
#matLang { flex: 0 0 auto; padding: 0 6px; }

.matlist { flex: 1; overflow: auto; margin: 0 -4px; min-height: 100px; }
.matrow {
  display: grid; grid-template-columns: 17px 1fr auto 20px;
  align-items: center; gap: 9px; padding: 5px 6px; border-radius: 8px; cursor: pointer;
}
.matrow:hover { background: var(--panel2); }
.matrow.focused { background: rgba(255,209,102,.13); box-shadow: inset 0 0 0 1px rgba(255,209,102,.4); }
.swatch { width: 17px; height: 17px; border-radius: 4px; box-shadow: 0 0 0 1px #0006 inset; }
.matname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.matnum { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.matnum small { display: block; font-size: 10.5px; color: var(--dim); }
.matrow .plus { background: none; border: 0; color: var(--dim); padding: 0; font-size: 14px; line-height: 1; opacity: 0; }
.matrow:hover .plus { opacity: 1; }
.matrow .plus:hover { color: var(--accent2); }

.matfoot {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 10px;
  margin-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim);
}
.matfoot .link { margin-left: 0; }
.matfoot span { flex: 1; }

.focuschip {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  background: rgba(255,209,102,.13); border: 1px solid rgba(255,209,102,.4); border-radius: 9px;
  padding: 5px 7px 5px 10px; font-size: 12.5px;
}
.focuschip span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focuschip button { background: none; border: 0; color: var(--dim); padding: 0 2px; }
.focuschip button:hover { color: var(--text); }

/* ============================================================ 3D-Bereich */

.stage { flex: 1; position: relative; min-width: 0;
  background: radial-gradient(120% 120% at 50% 0%, #122048, #060917 70%); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }

/* ---------------------------------------------------------- 2D-Bauplan */

.flatcanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 2; cursor: grab;
  image-rendering: pixelated; touch-action: none;
}
.flatcanvas:active { cursor: grabbing; }

/* Ein Aussehen fuer alles, was im Bild schwebt: Glas mit leichtem Leuchten. */
.hud, .viewtoggle, .flattools, .flatsel, .flathint, .flyhint, .loading, .flattip {
  background: rgba(7, 11, 28, .82); border: 1px solid var(--line2);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(10px);
}

.viewtoggle {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 7; display: flex; gap: 3px; padding: 4px; border-radius: 12px;
}
.viewtoggle button {
  padding: 7px 16px; border-radius: 9px; font: 600 13px/1.2 var(--display); letter-spacing: .03em;
  color: var(--dim); background: none; border: 0; white-space: nowrap;
}
.viewtoggle button:hover { color: var(--text); background: #ffffff0d; }
.viewtoggle button.active { color: #04091c; background: linear-gradient(120deg, #3bdcff, #4f8bff); }
body:not(.hasfile) .viewtoggle { display: none; }

.flattip {
  position: absolute; z-index: 8; pointer-events: none;
  padding: 7px 10px; border-radius: 10px; font-size: 12.5px; max-width: 240px;
}
.flattip b { display: block; color: var(--accent2); font-size: 13px; }
.flattip small { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.flatcanvas.picking { cursor: crosshair; }

.flattools {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  z-index: 7; display: flex; gap: 3px; padding: 3px; border-radius: 11px;
}
.flattools button {
  padding: 6px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--dim); background: none; border: 0; white-space: nowrap;
}
.flattools button:hover { color: var(--text); background: #ffffff0d; }
.flattools button.active { color: #1b1300; background: var(--warn); }

.flatsel {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 7; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  width: max-content; max-width: calc(100% - 28px); flex-wrap: wrap;
}
.stage.hasbar .flatsel { bottom: 92px; }
.flatsel .fsbox { line-height: 1.25; padding-right: 4px; }
.flatsel .fsbox b { display: block; font-size: 13px; color: var(--warn); }
.flatsel .fsbox small { color: var(--dim); font-size: 11px; font-family: var(--mono); }
.flatsel .fsrange {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dim);
  border-left: 1px solid var(--line); padding-left: 10px;
}
.flatsel .fsrange > span:first-child { font-weight: 700; color: var(--text); }
.flatsel .fsrange input { width: 58px; padding: 5px 6px; font-size: 12px; text-align: center; font-family: var(--mono); }
.flatsel .dash { color: var(--dim); }
.flatsel #fsName { width: 170px; padding: 7px 9px; font-size: 13px; }
.flatsel .fsadd {
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
  background: var(--grad); border: 0; color: #04091c; white-space: nowrap;
}
.flatsel .fsadd:hover { filter: brightness(1.1); }
.flatsel .fsclear {
  width: 30px; height: 30px; border-radius: 8px; color: var(--dim);
  background: none; border: 1px solid var(--line);
}
.flatsel .fsclear:hover { color: var(--text); background: var(--panel2); }

.flathint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 5; padding: 6px 13px; border-radius: 10px;
  font-size: 12px; color: var(--dim); white-space: nowrap;
}
.flathint b { color: var(--text); font-weight: 600; }
.stage.hasbar .flathint { bottom: 92px; }

body.flat .compass, body.flat #pickInfo, body.flat #crosshair,
body.flat #flyhint, body.flat #status { display: none !important; }

.hud { position: absolute; z-index: 5; font-size: 12px; border-radius: 12px; }
.hud.topright { top: 14px; right: 14px; padding: 9px 12px; max-width: 300px; }
.hud.bottomright {
  bottom: 14px; right: 14px; padding: 6px 10px; text-align: right;
  font-family: var(--mono); font-size: 11px; color: var(--dim); line-height: 1.5;
  transition: bottom .18s ease;
}
.stage.hasbar .hud.bottomright { bottom: 92px; }

.hudcol {
  position: absolute; top: 14px; left: 14px; z-index: 6;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  max-height: calc(100% - 28px);
}
.hudcol > .hud { position: static; }

#pickInfo b { color: var(--accent2); font-size: 13px; }
.runinfo { display: flex; gap: 10px; margin-top: 5px; font-family: var(--body) !important; font-size: 12px !important; color: var(--text) !important; }
.runinfo b { color: var(--warn) !important; font-size: 13px !important; }
.flattip .runinfo { margin-top: 4px; }
.tip b.gold { color: var(--warn); }
.flattools #toolCount.active { color: #04091c; background: linear-gradient(120deg, #3bdcff, #4f8bff); }
#pickInfo div { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 3px; }
#status #coords { color: var(--text); }

.compass {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line2); background: rgba(7,11,28,.8);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.compass span { font: 600 10px/1 var(--display); color: var(--dim); position: absolute; top: 3px; }
.compass .needle {
  width: 0; height: 0; border: 5px solid transparent;
  border-bottom: 14px solid var(--magenta); transform-origin: 50% 70%; margin-top: 4px;
  filter: drop-shadow(0 0 4px rgba(255,79,216,.7));
}

.crosshair {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .85; z-index: 4;
}
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 2px #000c; }
.crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; margin-top: -1px; }

.flyhint {
  position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 5;
  border-radius: 999px; padding: 7px 16px; font-size: 11.5px; color: var(--dim);
  pointer-events: none; white-space: nowrap;
}

.loading {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 8;
  border-radius: 999px; padding: 9px 18px; display: flex; align-items: center; gap: 12px; font-size: 12.5px;
}
body.flat .loading { bottom: auto; top: 104px; }
.loading .bar { width: 170px; height: 5px; background: var(--panel2); border-radius: 3px; overflow: hidden; }
.loading .bar div { height: 100%; width: 0; background: var(--grad); transition: width .15s; box-shadow: 0 0 10px rgba(59,220,255,.7); }

/* Kurze Rückmeldungen ("Link kopiert") */
.toast {
  position: absolute; left: 50%; top: 66px; z-index: 12;
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 12px; font-size: 13.5px; max-width: calc(100% - 32px);
  background: rgba(7, 11, 28, .92); border: 1px solid var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), var(--glow);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: var(--bad); box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 22px rgba(255,90,122,.35); }

/* ---------------------------------------------------------- Startbild */

.empty {
  position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; text-align: center; padding: 30px; gap: 4px; z-index: 3;
}
body.hasfile .empty { display: none; }
.empty h1 { font: 700 clamp(24px, 3.4vw, 34px)/1.15 var(--display); margin: 8px 0 8px; }
.empty p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.65; color: var(--dim); max-width: 470px; }
.empty p b { color: var(--text); }
.empty small { color: var(--dim); font-size: 12.5px; margin-top: 14px; }
.bigbtn {
  display: inline-block; cursor: pointer;
  background: var(--grad); border: 0; color: #04091c;
  border-radius: 12px; padding: 13px 28px; font: 700 15.5px/1.2 var(--display); letter-spacing: .03em;
  box-shadow: 0 10px 30px rgba(70,160,255,.35);
  transition: transform .12s, box-shadow .2s;
}
.bigbtn:hover { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(120,90,255,.45); }

/* Drei schwebende Würfel als Ladeanzeige */
.spinner { position: relative; width: 84px; height: 84px; margin-bottom: 10px; }
.spinner i {
  position: absolute; width: 30px; height: 30px; border-radius: 6px;
  background: linear-gradient(140deg, #3bdcff, #4f8bff 60%, #a071ff);
  box-shadow: 0 0 24px rgba(59,220,255,.5), inset 0 0 0 1px #ffffff30;
  animation: hop 1.4s ease-in-out infinite;
}
.spinner i:nth-child(1) { left: 0; top: 40px; }
.spinner i:nth-child(2) { left: 27px; top: 14px; animation-delay: .15s; background: linear-gradient(140deg, #ff4fd8, #a071ff); box-shadow: 0 0 24px rgba(255,79,216,.45), inset 0 0 0 1px #ffffff30; }
.spinner i:nth-child(3) { left: 54px; top: 40px; animation-delay: .3s; background: linear-gradient(140deg, #46f08f, #3bdcff); box-shadow: 0 0 24px rgba(70,240,143,.45), inset 0 0 0 1px #ffffff30; }
.spinner--still i { animation-duration: 3.2s; }
@keyframes hop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .spinner i, .tbtn.active span { animation: none; } }

/* ---------------------------------------------------------- Farmliste */

.todo { width: 230px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; font-size: 12.5px; }
.todohead {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 11px; background: none; border: 0; color: var(--text); text-align: left;
}
.todohead:hover { background: #ffffff0a; }
.todohead strong { font: 600 13px/1.2 var(--display); flex: 1; letter-spacing: .03em; }
.todohead .chev { color: var(--dim); font-size: 10px; width: 9px; transition: transform .15s ease; }
.todo:not(.folded) .todohead .chev { transform: rotate(90deg); }
.todo.folded .todobody { display: none; }

.todobody { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); }
.todotools { display: flex; gap: 4px; padding: 7px 8px 4px; }
.todotools button {
  flex: 1; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; color: var(--dim); padding: 3px 0; font-size: 10.5px;
}
.todotools button:hover { color: var(--text); border-color: var(--line2); }
.todotools button.active { color: #04091c; background: var(--accent); border-color: var(--accent); }

.todolist { overflow: auto; padding: 5px 8px 9px; display: flex; flex-direction: column; gap: 1px; max-height: 42vh; }
.todorow {
  display: grid; grid-template-columns: 15px 12px 1fr auto 15px;
  align-items: center; gap: 6px; padding: 3px; border-radius: 6px;
}
.todorow:hover { background: var(--panel2); }
.todorow.done .tdname { color: var(--dim); text-decoration: line-through; }
.tdname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdnum { text-align: right; font-variant-numeric: tabular-nums; }
.tdnum small { display: block; font-size: 9.5px; color: var(--dim); }
.todorow button { background: none; border: 0; color: var(--dim); padding: 0; opacity: 0; }
.todorow:hover button { opacity: 1; }
.todorow input[type=checkbox] { accent-color: var(--accent2); cursor: pointer; width: 14px; height: 14px; }

/* ---------------------------------------------------------- Aufbau-Leiste */

.animbar { left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 11px; padding: 10px 13px; }
.animbar button {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px; font-size: 13px;
}
.animbar button:hover { border-color: var(--line2); }
.animbar button.active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
#animRange { flex: 1; min-width: 60px; }
.animinfo { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 19ch; }
.animinfo b { color: var(--text); }

/* ---------------------------------------------------------- Bauguide */

.guidebar { left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 11px; padding: 10px 13px; }
.guidebar .gnav {
  flex: 0 0 34px; height: 34px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-size: 11px;
}
.guidebar .gnav:hover { border-color: var(--accent); }
.guidebar .gnav:disabled { opacity: .3; cursor: default; }
.guidemain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.guidetop { display: flex; align-items: baseline; gap: 11px; }
.guidetop strong { font: 600 14.5px/1.2 var(--display); }
.guidetop span { color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gbar { height: 4px; background: var(--panel2); border-radius: 2px; overflow: hidden; }
.gbar > div { height: 100%; width: 0; transition: width .2s ease; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.guidemats { display: flex; gap: 6px; overflow: hidden; height: 21px; }
.gchip {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--panel2); border-radius: 6px; padding: 2px 8px 2px 5px; font-size: 11.5px; color: var(--dim);
}
.gchip i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.gchip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.guidebar .gdone {
  flex: 0 0 auto; background: var(--grad); border: 0; color: #04091c;
  border-radius: 9px; padding: 9px 16px; font: 700 13.5px/1.2 var(--display);
}
.guidebar .gdone:hover { filter: brightness(1.1); }
.guidebar .gclose { flex: 0 0 auto; background: none; border: 0; color: var(--dim); font-size: 15px; padding: 0 3px; }
.guidebar .gclose:hover { color: var(--text); }

/* ============================================================ Dialoge */

dialog {
  background: rgba(12, 18, 42, .97); color: var(--text);
  border: 1px solid var(--line2); border-radius: 18px;
  padding: 22px; max-width: 620px; width: calc(100% - 32px); max-height: calc(100dvh - 40px);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(59,220,255,.08);
}
dialog::backdrop { background: rgba(3, 5, 15, .72); backdrop-filter: blur(4px); }
dialog h2 { margin: 0 0 14px; font: 700 21px/1.2 var(--display); }
dialog h3 { margin: 18px 0 8px; font: 600 12.5px/1.2 var(--display); color: var(--accent); text-transform: uppercase; letter-spacing: .12em; }
dialog table { border-collapse: collapse; width: 100%; font-size: 13px; }
dialog td { padding: 5px 8px; border-top: 1px solid var(--line); vertical-align: top; }
dialog td:first-child { white-space: nowrap; color: var(--dim); width: 44%; }
dialog th { text-align: left; padding: 14px 8px 4px; font: 600 11.5px/1.2 var(--display); color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }

.filelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; max-height: 46vh; overflow: auto; padding: 2px; }
.filecard {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.filecard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--glow); color: #fff; }
.filecard.active { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2) inset; }
.filecard__img {
  aspect-ratio: 16 / 9; background: center / cover no-repeat,
    radial-gradient(circle at 30% 20%, rgba(59,220,255,.25), transparent 60%), #0b1430;
}
.filecard__txt { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filecard__txt b { font: 600 13.5px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filecard__txt small { color: var(--dim); font-size: 11px; }

.dropzone {
  margin-top: 14px; border: 1.5px dashed var(--line2); border-radius: 13px;
  padding: 18px; text-align: center; color: var(--dim); font-size: 13px;
}
.dropzone.hot { border-color: var(--accent); background: rgba(59,220,255,.08); color: var(--text); }
.dropzone p { margin: 0 0 10px; }
.dropzone small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--faint); }
.filebtn {
  display: inline-block; background: var(--grad); color: #04091c; font-weight: 700;
  border-radius: 9px; padding: 8px 16px; cursor: pointer; font-size: 13.5px;
}
.filebtn:hover { filter: brightness(1.1); }
.dlgfoot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.dlgfoot .link { font-size: 13px; white-space: nowrap; }
.dlgfoot .wide { flex: 1; }

/* ============================================================ Scrollbalken */

* { scrollbar-width: thin; scrollbar-color: #2c3d6e transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2c3d6e; border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3c5293; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------- Datei ziehen */

body.dragover .stage::after {
  content: "Datei hier loslassen";
  position: absolute; inset: 14px; z-index: 9;
  border: 2px dashed var(--accent); border-radius: 16px;
  background: rgba(59,220,255,.08); color: var(--text);
  display: grid; place-content: center; font: 700 18px/1.2 var(--display);
  pointer-events: none;
}

body:not(.hasfile) .compass,
body:not(.hasfile) #status { display: none; }

#stats .warn { color: var(--warn); font-weight: 600; }
#status { max-width: 240px; }

/* ============================================================ Schmale Fenster */

@media (max-width: 1100px) {
  .tbtn b { display: none; }
  .tbtn { width: 36px; padding: 0; justify-content: center; }
  .tbtn--login { width: auto; padding: 0 12px; }
  .tbtn--login b { display: inline; }
  .assetinfo { display: none; }
}

@media (max-width: 820px) {
  html, body { overflow: auto; height: auto; min-height: 100%; }
  body { display: block; }
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .brand__txt { display: none; }
  .filechip { order: 3; max-width: none; flex: 1 1 100%; justify-content: space-between; }
  .topactions { gap: 4px; margin-left: auto; }
  .tbtn { height: 34px; width: 34px; }
  .layout { flex-direction: column; }
  .stage { order: -1; height: 64dvh; min-height: 340px; flex: 0 0 auto; }
  .sidebar { width: 100%; flex: 0 0 auto; border-right: 0; border-top: 1px solid var(--line); }
  .pane { overflow: visible; }
  .tabs { position: sticky; top: 0; background: rgba(7,11,28,.96); z-index: 4; }
  .todo { width: 200px; }
  .flyhint, .flathint { display: none !important; }
  .animbar, .guidebar { left: 8px; right: 8px; bottom: 8px; flex-wrap: wrap; gap: 8px; }
  .animinfo { min-width: 0; flex: 1 1 100%; order: 5; }
  .viewtoggle { top: 10px; }
  .viewtoggle button { padding: 6px 12px; }
  .hud.topright { top: 58px; right: 8px; }
  .hudcol { top: 10px; left: 8px; }
  .compass { width: 36px; height: 36px; }
  .flatsel { gap: 6px; }
  .flatsel #fsName { width: 130px; }
}