/* ════════════════════════════════════════════
   ISOTHERMEN SCHNITTEDITOR — style.css
   Responsive: desktop ≥1100 | tablet 768–1099 | mobile <768
   ════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ── Shared ─────────────────────────────── */
  --accent: #4fc3f7;  --acct2: #81d4fa;
  --green:  #4db891;  --red: #e06060;  --amber: #f0a832;  --purple: #9b7ee8;
  --gray-500: #6a7f9c;
  --font:   'IBM Plex Sans', sans-serif;
  --mono:   'IBM Plex Mono', monospace;
  --r: 6px;
  --lw: 244px;  --rw: 268px;
  --hh: 56px;   --fh: 38px;  --bh: 46px;
  --panel-ease: transform 0.28s cubic-bezier(.4,0,.2,1);
  /* ── Dark (default) ─────────────────────── */
  --bg:     #0d1117;  --bg2: #151c28;  --bg3: #1b2336;  --bg4: #202a3e;
  --border: #253044;  --bdr2: #324060;
  --text:   #ddeaf8;  --text2: #6a7f9c;  --text3: #364a65;
}

/* ── Light theme ─────────────────────────── */
body.light {
  --bg:     #f2f5f9;  --bg2: #ffffff;  --bg3: #e8ecf4;  --bg4: #dde3ef;
  --border: #ccd4e4;  --bdr2: #b0bcd0;
  --text:   #1a2540;  --text2: #4a5a78;  --text3: #7a8aaa;
  --accent: #007fc4;  --acct2: #0066a8;
  --green:  #1a8a60;  --red: #cc3030;  --amber: #b87000;  --purple: #6644cc;
}

/* Smooth transition when switching theme */
body, #app-header, #panel-left, #panel-right, #panel-center,
#bottom-bar, #app-footer, .modal-bg, .modal-box,
.hint-box, .mat-item, .res-card, .bc-btn, .tool-btn {
  transition: background-color 0.22s ease, color 0.18s ease, border-color 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button   { font-family: var(--font); cursor: pointer; outline: none; }
input, select, textarea { font-family: var(--font); outline: none; }

body {
  background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px;
  height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
}

/* ════════ HEADER ════════ */
#app-header {
  height: var(--hh); flex: 0 0 var(--hh);
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--bg2); border-bottom: 1px solid var(--border); overflow: hidden;
}

.logo-link, .footer-logo-link { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.argla-logo {
  top: 10px; border-radius: 10px; border: rgba(0,157,255,.293) 4px double;
  filter: drop-shadow(rgb(0,85,255) 0px 6px 18px);
  width: 60px; height: 60px; object-fit: contain; transition: filter .2s;
}
.argla-logo:hover { filter: drop-shadow(rgb(0,213,255) 0px 8px 28px); }

.app-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--accent); white-space: nowrap; flex-shrink: 0;
}
.logo-dot { width: 0; height: 7px; background: var(--accent); border-radius: 50%; }

/* Panel toggle buttons — hidden desktop */
.panel-tog { display: none; }

.hdr-actions { display: flex; gap: 5px; align-items: center; }
.hbtn {
  padding: 4px 10px; font-size: 11px; border: 1px solid var(--bdr2);
  border-radius: 14px; background: transparent; color: var(--text2); transition: all .15s; white-space: nowrap;
}
.hbtn:hover      { border-color: var(--text2); color: var(--text); }
.hbtn.warn       { border-color: var(--red); color: var(--red); }
.hbtn.warn:hover { background: rgba(224,96,96,.1); }
.hbtn.hi         { border-color: var(--accent); color: var(--accent); background: rgba(79,195,247,.08); }
.hbtn.hi:hover   { background: rgba(79,195,247,.16); }
.hbtn.panel-tog.open { background: rgba(79,195,247,.15); border-color: var(--accent); color: var(--accent); }

.hdr-hint { margin-left: auto; font-size: 10px; color: var(--text3); font-family: var(--mono); white-space: nowrap; }

/* ════════ FOOTER ════════ */
#app-footer {
  flex: 0 0 var(--fh); height: var(--fh);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--bg2); border-top: 1px solid var(--border);
  text-align: center; padding: 0 1rem; font-size: .75rem; color: var(--gray-500);
}
#app-footer .argla-logo { width: 28px; height: 26px; border-width: 2px; filter: drop-shadow(rgb(0,179,255) 0px 3px 8px); }
#app-footer a { color: var(--accent); text-decoration: none; }
#app-footer a:hover { text-decoration: underline; }

/* ════════ DROP OVERLAY ════════ */
.drop-overlay {
  position: fixed; inset: 0; background: rgba(79,195,247,.07); border: 3px dashed var(--accent);
  z-index: 999; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 22px; color: var(--accent); pointer-events: none;
}

/* ════════ LAYOUT ════════ */
#layout { flex: 1 1 0; min-height: 0; display: flex; overflow: hidden; position: relative; }

#panel-left, #panel-right {
  flex: 0 0 auto; overflow-y: auto; overflow-x: hidden;
  background: var(--bg2); display: flex; flex-direction: column; z-index: 10;
}
#panel-left  { width: var(--lw); border-right: 1px solid var(--border); }
#panel-right { width: var(--rw); border-left:  1px solid var(--border); }

#panel-center { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.panel-drag-handle { display: none; }

.panel-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 9; opacity: 0;
  pointer-events: none; transition: opacity .28s;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 2px; }

/* ════════ SECTIONS ════════ */
.sec { padding: 12px 12px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sec-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.sec-lbl {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text3); font-family: var(--mono); margin-bottom: 9px;
}
.icon-btn {
  background: none; border: none; color: var(--text3); font-size: 14px;
  padding: 1px 4px; border-radius: 4px; transition: all .15s;
}
.icon-btn:hover { color: var(--text); background: var(--bg3); }

/* ════════ TOOLS ════════ */
.tool-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.tool-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text2); font-size: 10px; font-family: var(--mono);
  line-height: 1.3; transition: all .15s;
}
.tool-btn:hover  { border-color: var(--bdr2); color: var(--text); }
.tool-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(79,195,247,.08); }
.ti { font-size: 16px; line-height: 1; }

/* ════════ BOUNDARY CONDITIONS ════════ */
.bc-row { display: flex; gap: 5px; }
.bc-btn {
  flex: 1; padding: 6px 4px; font-size: 10px; font-family: var(--mono);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg3); color: var(--text2); text-align: center; line-height: 1.5; transition: all .15s;
}
.bc-btn small { font-size: 11px; }
.bc-btn:hover { border-color: var(--bdr2); }
.bc-btn.bc-ext.active { border-color:#4fc3f7; color:#4fc3f7; background:rgba(79,195,247,.1); }
.bc-btn.bc-int.active { border-color:#4db891; color:#4db891; background:rgba(77,184,145,.1); }
.bc-btn.bc-adi.active { border-color:#f0a832; color:#f0a832; background:rgba(240,168,50,.1); }

/* ════════ MATERIAL LIST ════════ */
#mat-list { display: flex; flex-direction: column; gap: 2px; }
.mat-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border-radius: var(--r); border: 1px solid transparent; cursor: pointer; transition: all .15s;
}
.mat-item:hover  { background: var(--bg3); border-color: var(--border); }
.mat-item.active { background: rgba(79,195,247,.07); border-color: var(--accent); }
.mat-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.mat-name   { flex: 1; font-size: 11px; }
.mat-lam    { font-family: var(--mono); font-size: 10px; color: var(--text3); }

/* ════════ PRESETS ════════ */
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pst-btn {
  padding: 5px 4px; font-size: 10px; font-family: var(--mono);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg3); color: var(--text2); text-align: center; transition: all .15s;
}
.pst-btn:hover { border-color: var(--bdr2); color: var(--text); }

/* ════════ SLIDERS ════════ */
.sl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sl-row:last-child { margin-bottom: 0; }
.sl-row label { font-size: 12px; font-family: var(--mono); color: var(--text2); min-width: 18px; }
.sl-row input[type=range] {
  flex: 1; height: 3px; border-radius: 2px; background: var(--bdr2);
  -webkit-appearance: none; appearance: none;
}
.sl-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--purple); cursor: pointer; border: 2px solid var(--bg2);
}
.sl-val { font-family: var(--mono); font-size: 11px; color: var(--purple); min-width: 50px; text-align: right; }

/* ════════ HINTS / KBD ════════ */
.hint-box {
  background: var(--bg4); border: 1px solid var(--border); border-radius: var(--r);
  padding: 8px 10px; font-size: 11px; color: var(--text2); line-height: 1.7; font-family: var(--mono);
}
kbd {
  display: inline-block; background: var(--bg3); border: 1px solid var(--bdr2);
  border-radius: 3px; padding: 1px 5px; font-family: var(--mono); font-size: 10px;
}

/* ════════ CANVAS ════════ */
#canvas-wrap { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; background: var(--bg); }
body.light #canvas-wrap { background: #d8dfe8; }
#cvs-sim, #cvs-draw { position: absolute; top: 0; left: 0; display: block; }
#cvs-sim  { pointer-events: none; }
#cvs-draw { cursor: crosshair; touch-action: none; }

#hud-coord {
  position: absolute; bottom: 8px; left: 8px;
  font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.28);
  background: rgba(13,17,23,.7); padding: 2px 8px; border-radius: 4px; pointer-events: none;
}
#hud-zoom {
  position: absolute; bottom: 8px; right: 8px;
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  background: rgba(13,17,23,.8); padding: 3px 10px; border-radius: 12px; pointer-events: none;
}

/* Floating run button — mobile only */
.fab-run {
  display: none; position: absolute; bottom: 16px; right: 50%; transform: translateX(50%);
  background: var(--accent); color: #000; font-weight: 700; font-size: 15px;
  border: none; border-radius: 28px; padding: 12px 28px;
  box-shadow: 0 4px 20px rgba(79,195,247,.4); z-index: 5; transition: transform .15s;
}
.fab-run:active { transform: translateX(50%) scale(.94); }

/* ════════ BOTTOM BAR ════════ */
#bottom-bar {
  flex: 0 0 var(--bh); height: var(--bh);
  display: flex; align-items: center; gap: 5px; padding: 0 12px;
  background: var(--bg2); border-top: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
#bottom-bar::-webkit-scrollbar { height: 0; }

.btn {
  padding: 4px 10px; font-size: 11px; border: 1px solid var(--bdr2);
  border-radius: var(--r); background: transparent; color: var(--text2);
  white-space: nowrap; transition: all .15s; flex-shrink: 0;
}
.btn:hover { border-color: var(--text2); color: var(--text); }
.run-btn { background: var(--accent); color: #000 !important; border-color: var(--accent); font-weight: 600; }
.run-btn:hover { background: var(--acct2); }
.tog.active { background: rgba(79,195,247,.1); border-color: var(--accent); color: var(--accent); }
.barsep { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }

.zoom-ctrl { display: flex; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0; }
.zoom-ctrl button {
  width: 24px; height: 24px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text2); font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0;
}
.zoom-ctrl button:last-child { width: auto; padding: 0 8px; font-size: 11px; }
.zoom-ctrl button:hover { border-color: var(--bdr2); color: var(--text); }
#zoom-pct { font-family: var(--mono); font-size: 11px; color: var(--text2); min-width: 44px; text-align: center; }

.legend { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--text3); padding-left: 8px; flex-shrink: 0; }
.leg-ramp { width: 80px; height: 7px; border-radius: 3px; background: linear-gradient(to right,#042C53,#185FA5,#85B7EB,#E6F1FB,#C0DD97,#639922,#EF9F27,#E24B4A); }

/* ════════ RIGHT PANEL — SHAPES ════════ */
#shape-list { display: flex; flex-direction: column; gap: 3px; }
.shape-item {
  display: flex; align-items: center; gap: 6px; padding: 5px 7px;
  border-radius: var(--r); border: 1px solid transparent; cursor: pointer; font-size: 11px; transition: all .15s;
}
.shape-item:hover { background: var(--bg3); border-color: var(--border); }
.shape-item.sel   { background: rgba(79,195,247,.06); border-color: var(--accent); }
.shape-sw   { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.shape-name { flex: 1; }
.shape-bc   { font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; }
.shape-bc.ext { color:#4fc3f7; background:rgba(79,195,247,.12); }
.shape-bc.int { color:#4db891; background:rgba(77,184,145,.12); }
.shape-bc.adi { color:#f0a832; background:rgba(240,168,50,.10); }
.del-btn { background: none; border: none; color: var(--text3); font-size: 12px; padding: 0 2px; transition: color .15s; }
.del-btn:hover { color: var(--red); }

/* ════════ RESULT CARDS ════════ */
.res-card {
  position: relative; overflow: hidden; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 11px 9px; margin-bottom: 7px;
}
.res-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; }
.res-card.ok::before   { background: var(--green); }
.res-card.warn::before { background: var(--red); }
.res-card.neu::before  { background: var(--bdr2); }
.res-lbl { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); font-family:var(--mono); margin-bottom:3px; }
.res-val { font-size:20px; font-weight:600; font-family:var(--mono); }
.res-val.ok   { color: var(--green); }
.res-val.warn { color: var(--red); }
.res-sub { font-size:11px; color:var(--text2); margin-top:3px; }
.badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:10px; font-size:10px; font-family:var(--mono); margin-top:5px; }
.badge.ok   { background:rgba(77,184,145,.15); color:var(--green); }
.badge.warn { background:rgba(224,96,96,.15);  color:var(--red); }
.badge.amb  { background:rgba(240,168,50,.12); color:var(--amber); }

.lyr-tbl { width:100%; border-collapse:collapse; font-size:11px; }
.lyr-tbl td { padding:3px 0; border-bottom:1px solid var(--border); color:var(--text2); }
.lyr-tbl td:last-child { text-align:right; font-family:var(--mono); color:var(--text); }
.lyr-tbl tr:last-child td { border-bottom:none; }

/* ════════ MODALS ════════ */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 12px;
}
.modal-box {
  background: var(--bg2); border: 1px solid var(--bdr2); border-radius: 10px;
  width: min(760px, 100%); max-height: min(90vh, 100%);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: .06em; flex-shrink: 0;
}
.modal-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.modal-ftr {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.add-btn  { color: var(--accent); border-color: var(--accent); }
.save-btn { background: var(--accent); color: #000 !important; border-color: var(--accent); font-weight: 600; }
.save-btn:hover { background: var(--acct2); }

#mat-table { width:100%; border-collapse:collapse; font-size:12px; }
#mat-table th {
  text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text3); font-family:var(--mono); font-weight:400;
  padding:0 6px 8px; border-bottom:1px solid var(--border);
}
#mat-table td { padding:5px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
#mat-table tr:last-child td { border-bottom:none; }
#mat-table tr:hover td { background:var(--bg3); }

.tbl-inp {
  background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text);
  padding:3px 7px; width:100%; font-size:12px; transition:border-color .15s;
}
.tbl-inp:focus { border-color:var(--accent); }
.tbl-inp.sm    { width:70px; }
.tbl-inp.color { width:40px; height:26px; padding:1px 3px; cursor:pointer; }
.cat-sel {
  background:var(--bg); border:1px solid var(--border); border-radius:4px;
  color:var(--text); padding:3px 6px; font-size:12px; width:100%;
}
.cat-sel:focus { border-color:var(--accent); outline:none; }

/* ════════ PRINT DIALOG ════════ */
.print-btn { border-color: #7a8ca8 !important; }
.pf-row { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.pf-lbl { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); font-family:var(--mono); }
.pf-options {
  display:flex; flex-direction:column; gap:8px; margin-top:4px;
  padding:12px 14px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r);
}
.pf-check { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text2); cursor:pointer; }
.pf-check input[type=checkbox] { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; }
.pf-hint { font-size:10px; color:var(--text3); font-family:var(--mono); }

/* ════════════════════════════════════════════
   RESPONSIVE — TABLET  768–1099px
   Panels slide in as side drawers
════════════════════════════════════════════ */
@media (max-width: 1099px) {
  .panel-tog { display: block; }
  .hdr-hint  { display: none; }
  .title-text { display: none; }

  #panel-left, #panel-right {
    position: absolute; top: 0; bottom: 0;
    transition: var(--panel-ease);
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  #panel-left  { left: 0;  transform: translateX(-105%); width: min(var(--lw), 82vw); }
  #panel-right { right: 0; transform: translateX(105%);  width: min(var(--rw), 82vw); }
  #panel-left.open  { transform: translateX(0); }
  #panel-right.open { transform: translateX(0); }

  .panel-backdrop { display: block; }
  .panel-backdrop.visible { opacity: 1; pointer-events: all; }

  .panel-drag-handle {
    display: flex; justify-content: center; align-items: center;
    height: 22px; flex-shrink: 0; cursor: pointer; background: var(--bg2);
  }
  .panel-drag-handle::after {
    content: ''; width: 36px; height: 4px; background: var(--bdr2); border-radius: 2px;
  }

  #panel-center { width: 100%; }
}

/* ════════════════════════════════════════════
   RESPONSIVE — MOBILE  <768px
   Panels slide up from bottom
════════════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --hh: 50px; --fh: 30px; --bh: 44px; }

  #app-header { gap: 7px; padding: 0 8px; }
  .argla-logo { width: 40px; height: 40px; border-width: 3px; }
  .title-text { display: none; }

  .hide-sm { display: none !important; }

  /* Panels: bottom sheets */
  #panel-left, #panel-right {
    position: fixed !important;
    top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important;
    max-height: 72dvh;
    transform: translateY(110%) !important;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,.6);
    border-right: none !important; border-left: none !important;
    border-top: 1px solid var(--bdr2);
  }
  #panel-left.open  { transform: translateY(0) !important; }
  #panel-right.open { transform: translateY(0) !important; }

  /* FAB: floating calculate button */
  .fab-run { display: block; }
  .run-btn { display: none !important; }

  /* Bigger touch targets for tools */
  .tool-btn { padding: 10px 4px; font-size: 9px; }
  .ti { font-size: 20px; }

  #bottom-bar { padding: 0 8px; gap: 4px; }

  #app-footer { font-size: 10px; gap: 6px; }
  #app-footer > span { display: none; }

  /* Modal takes most of screen */
  .modal-body { padding: 12px; }
  #mat-table th:nth-child(4),
  #mat-table td:nth-child(4) { display: none; } /* hide category column on mobile */
}

/* ════════ HIDE UTILS ════════ */
@media (max-width: 767px) { .hide-mobile { display: none !important; } }

/* ════════ PRINT ════════ */
@media print {
  body > *:not(#print-frame) { display: none !important; }
  #print-frame { display: block !important; position: fixed; inset: 0; background: #fff; z-index: 9999; }
}

/* ── Print always in light mode ─────────────── */
@media print {
  body { --bg:#f2f5f9; --bg2:#ffffff; --bg3:#e8ecf4; --bg4:#dde3ef;
         --border:#ccd4e4; --bdr2:#b0bcd0;
         --text:#1a2540; --text2:#4a5a78; --text3:#7a8aaa;
         --accent:#007fc4; --green:#1a8a60; --red:#cc3030; }
  #print-frame canvas { background: #fff !important; }
}

/* ════════════════════════════════════════════
   SHAPE EDITOR & MASS-EINGABE
════════════════════════════════════════════ */
.ed-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ed-row  { display: flex; align-items: center; gap: 8px; }
.ed-lbl  { font-size: 10px; font-family: var(--mono); color: var(--text2); min-width: 68px; }
.ed-inp-wrap { display: flex; align-items: center; flex: 1; gap: 4px; }
.ed-inp {
  flex: 1; min-width: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text);
  padding: 4px 7px; font-size: 12px; font-family: var(--mono);
  transition: border-color .15s;
}
.ed-inp:focus { border-color: var(--accent); outline: none; }
.ed-unit { font-size: 10px; font-family: var(--mono); color: var(--text3); flex-shrink: 0; }
.ed-note { font-size: 10px; color: var(--text3); font-family: var(--mono); line-height: 1.5; margin-top: 4px; }

.md-preview {
  margin-top: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px;
  text-align: center; font-family: var(--mono); font-size: 16px;
  color: var(--accent); letter-spacing: .06em;
}