/* DC Calculator v4 – Große Schrift, klares Layout */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@500;600;700&family=Orbitron:wght@700;900&display=swap');

:root {
  --bg:        #060a0e;
  --panel:     #0b1520;
  --panel2:    #080f18;
  --border:    #16304a;
  --border-hi: #1e4a6e;
  --accent:    #00d4ff;
  --accent2:   #ff6b35;
  --accent3:   #39ff14;
  --text:      #ccdde8;
  --text-dim:  #456070;
  --text-mid:  #7a9ab0;
  --bright:    #eef8ff;
  --hdr-h:     70px;
  --col-sx:    #ffd740;
  --col-ri:    #4fc3f7;
  --col-mf:    #ce93d8;
  --col-gpu:   #69f0ae;
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--text);
  font-family:'Rajdhani',sans-serif; font-size:17px; -webkit-font-smoothing:antialiased; }

body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.08) 3px,rgba(0,0,0,.08) 4px); }

/* ══ HEADER ══════════════════════════════════ */
#header {
  position:fixed; top:0; left:0; right:0; height:var(--hdr-h);
  background:linear-gradient(180deg,#030810 0%,#09152a 100%);
  border-bottom:2px solid var(--border-hi);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; z-index:200; overflow:hidden;
}
#header::before { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.05),transparent);
  animation:sweep 8s ease-in-out infinite; }
@keyframes sweep { 0%,100%{left:-100%} 50%{left:160%} }

.hdr-left  { display:flex; align-items:center; gap:16px; z-index:1; }
.hdr-icon  { width:48px; height:48px; flex-shrink:0; }
.hdr-title { font-family:'Orbitron',sans-serif; font-size:24px; font-weight:900;
  letter-spacing:3px; color:var(--bright);
  text-shadow:0 0 20px rgba(0,212,255,.55),0 0 40px rgba(0,212,255,.2); }
.hdr-sub   { font-family:'Share Tech Mono',monospace; font-size:11px;
  color:var(--accent); letter-spacing:2px; margin-top:3px; }

.hdr-right { display:flex; align-items:center; gap:30px; z-index:1; }
.hdr-stat  { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.hdr-stat-label { font-family:'Share Tech Mono',monospace; font-size:10px;
  color:var(--text-dim); letter-spacing:1px; }
.hdr-stat-val { font-family:'Orbitron',monospace; font-size:20px; font-weight:700;
  color:var(--accent); }
.hdr-pulse { display:flex; align-items:center; gap:8px;
  font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--text-dim); }
.pulse-dot { width:9px; height:9px; border-radius:50%; background:var(--accent3);
  box-shadow:0 0 8px var(--accent3); animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

#hdr-matrix { position:absolute; right:400px; top:0; bottom:0; width:130px;
  overflow:hidden; opacity:.06; pointer-events:none;
  font-family:'Share Tech Mono',monospace; font-size:10px;
  color:var(--accent3); line-height:1.4; white-space:pre; }

/* ══ TOP-ZONE ═════════════════════════════════ */
#top-zone { position:fixed; top:var(--hdr-h); left:0; right:0; z-index:150;
  background:var(--panel2); border-bottom:2px solid var(--border-hi); }

/* Zeile 1: Switch-Config */
.row-switch {
  display:flex; align-items:center; gap:24px;
  padding:16px 24px; border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.switch-field { display:flex; flex-direction:column; gap:6px; }
.switch-field-label { font-family:'Share Tech Mono',monospace;
  font-size:12px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
.form-select {
  background:#040b14; border:1px solid var(--border);
  color:var(--bright); font-family:'Share Tech Mono',monospace; font-size:16px;
  padding:9px 16px; border-radius:3px; outline:none; min-width:280px;
  appearance:none; -webkit-appearance:none;
  transition:border-color .2s,box-shadow .2s;
}
.form-select:focus { border-color:var(--accent); box-shadow:0 0 0 1px rgba(0,212,255,.2); }
.form-select option { background:#040b14; }

.uplink-info {
  padding:10px 16px; border:1px solid var(--border); border-radius:3px;
  background:rgba(0,0,0,.3);
  font-family:'Share Tech Mono',monospace; font-size:14px;
  color:var(--accent2); line-height:1.9; align-self:flex-end;
}
.uplink-info strong { color:var(--bright); font-size:14px; }

/* Zeile 2: Server-Karten */
.row-servers { display:flex; }

.col-server {
  flex:1; min-width:0; padding:16px 20px;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:12px;
  position:relative;
}
.col-server:last-child { border-right:none; }
.col-server::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; }
.s-sx::before  { background:var(--col-sx);  box-shadow:2px 0 12px var(--col-sx);  }
.s-ri::before  { background:var(--col-ri);  box-shadow:2px 0 12px var(--col-ri);  }
.s-mf::before  { background:var(--col-mf);  box-shadow:2px 0 12px var(--col-mf);  }
.s-gpu::before { background:var(--col-gpu); box-shadow:2px 0 12px var(--col-gpu); }

.srv-header { display:flex; align-items:center; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--border); }
.srv-icon { width:40px; height:40px; border-radius:5px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.s-sx  .srv-icon { background:rgba(255,215,64,.12);  }
.s-ri  .srv-icon { background:rgba(179,157,219,.12); }
.s-mf  .srv-icon { background:rgba(255,138,101,.12); }
.s-gpu .srv-icon { background:rgba(105,240,174,.12); }

.srv-name { font-family:'Orbitron',sans-serif; font-size:15px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; }
.srv-meta { font-family:'Share Tech Mono',monospace; font-size:12px;
  color:var(--text-dim); margin-top:3px; }
.s-sx  .srv-name { color:var(--col-sx);  }
.s-ri  .srv-name { color:var(--col-ri);  }
.s-mf  .srv-name { color:var(--col-mf);  }
.s-gpu .srv-name { color:var(--col-gpu); }

.iops-label { font-family:'Share Tech Mono',monospace;
  font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; }
.iops-wrap { position:relative; }
.iops-wrap input {
  width:100%; padding:10px 52px 10px 14px;
  background:#040b14; border:1px solid var(--border);
  color:var(--bright); font-family:'Share Tech Mono',monospace; font-size:22px;
  border-radius:3px; outline:none; transition:border-color .2s,box-shadow .2s;
}
.iops-unit { position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-family:'Share Tech Mono',monospace; font-size:12px;
  color:var(--text-dim); pointer-events:none; }

.s-sx  .iops-wrap input:focus { border-color:var(--col-sx);  box-shadow:0 0 0 2px rgba(255,215,64,.15);   }
.s-ri  .iops-wrap input:focus { border-color:var(--col-ri);  box-shadow:0 0 0 2px rgba(79,195,247,.15);  }
.s-mf  .iops-wrap input:focus { border-color:var(--col-mf);  box-shadow:0 0 0 2px rgba(206,147,216,.15);  }
.s-gpu .iops-wrap input:focus { border-color:var(--col-gpu); box-shadow:0 0 0 2px rgba(105,240,174,.15);  }


/* Calc-Bar */
.calc-bar { border-top:1px solid var(--border); padding:12px 24px;
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  background:rgba(0,0,0,.5); }

#btn-calc { padding:12px 38px; background:transparent; border:2px solid var(--accent);
  color:var(--accent); font-family:'Orbitron',sans-serif;
  font-size:14px; font-weight:700; letter-spacing:2px;
  cursor:pointer; border-radius:3px; position:relative; overflow:hidden;
  transition:color .2s,box-shadow .2s; }
#btn-calc::before { content:''; position:absolute; inset:0; background:var(--accent);
  opacity:0; transition:opacity .2s; }
#btn-calc:hover { color:#040810; box-shadow:0 0 28px rgba(0,212,255,.5); }
#btn-calc:hover::before { opacity:1; }
#btn-calc span { position:relative; z-index:1; }
#btn-calc:active { transform:scale(.97); }

#btn-reset { padding:12px 22px; background:transparent; border:1px solid var(--border);
  color:var(--text-dim); font-family:'Share Tech Mono',monospace;
  font-size:13px; letter-spacing:1px; cursor:pointer; border-radius:3px; transition:all .2s; }
#btn-reset:hover { border-color:var(--text-mid); color:var(--text); }

/* ══ OUTPUT ════════════════════════════════════ */
#output-area { position:fixed; left:0; right:0; bottom:0; overflow-y:auto; overflow-x:hidden;
  padding:26px 28px 64px; background:var(--bg); scrollbar-width:none; }
#output-area::-webkit-scrollbar { display:none; }

#empty-state { display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:100%; gap:18px; }
.empty-icon { opacity:.1; }
.empty-text { font-family:'Share Tech Mono',monospace; font-size:16px;
  letter-spacing:2px; color:var(--text-dim); }
.empty-sub  { font-family:'Share Tech Mono',monospace; font-size:12px;
  color:var(--text-dim); opacity:.5; }

/* Section */
.out-section { margin-bottom:36px; }
.out-title { font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:3px; color:var(--accent); text-transform:uppercase;
  padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:18px;
  display:flex; align-items:center; gap:10px; }
.out-title::before { content:'//'; opacity:.35; font-size:15px; }

/* Summary badges */
.summary-grid { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.sum-badge { padding:12px 20px; min-width:150px;
  background:var(--panel); border:1px solid var(--border); border-radius:3px;
  display:flex; flex-direction:column; gap:2px; }
.sum-label { font-family:'Share Tech Mono',monospace; font-size:10px;
  color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
.sum-val   { font-family:'Orbitron',monospace; font-size:24px; font-weight:700; color:var(--bright); }
.sum-unit  { font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--text-dim); }

/* IOPS cards */
.iops-grid { display:flex; flex-wrap:wrap; gap:12px; }
.iops-card { padding:14px 18px; border-radius:3px; border:1px solid; min-width:210px; }
.iops-card-name   { font-family:'Orbitron',monospace; font-size:13px; font-weight:700; margin-bottom:4px; }
.iops-card-val    { font-family:'Orbitron',monospace; font-size:22px; font-weight:700;
  color:var(--bright); margin-bottom:4px; }
.iops-card-val span { font-size:13px; opacity:.6; }
.iops-card-detail { font-family:'Share Tech Mono',monospace; font-size:12px;
  color:var(--text-mid); line-height:1.9; }

/* Alerts */
.alert-info { padding:12px 18px; border-radius:3px; margin-bottom:16px;
  font-family:'Share Tech Mono',monospace; font-size:13px; line-height:1.9;
  border-left:3px solid var(--accent); background:rgba(0,212,255,.05); color:var(--accent); }
.alert-warn { padding:12px 18px; border-radius:3px; margin-bottom:16px;
  font-family:'Share Tech Mono',monospace; font-size:13px; line-height:1.9;
  border-left:3px solid var(--accent2); background:rgba(255,107,53,.07); color:var(--accent2); }

/* BOM Table */
.bom-table { width:auto; min-width:400px; border-collapse:collapse;
  font-family:'Share Tech Mono',monospace; font-size:14px; }
.bom-table th { text-align:left; padding:8px 32px 8px 0;
  background:transparent; color:var(--accent);
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  border-bottom:1px solid var(--border); }
.bom-table th.num { text-align:right; padding-right:0; padding-left:0; width:60px; }
.bom-table td { padding:7px 32px 7px 0; border-bottom:1px solid rgba(22,48,74,.4); }
.bom-table tr:hover td { background:rgba(0,212,255,.02); }
.bom-item { color:var(--bright); white-space:nowrap; }
.bom-dot  { width:8px; height:8px; border-radius:50%; display:inline-block;
  margin-right:10px; vertical-align:middle; flex-shrink:0; }
.num { text-align:right; width:60px; padding-right:0 !important; }
.bom-qty  { color:var(--bright); font-size:16px; font-weight:bold; }
.bom-pack { color:var(--accent); font-weight:bold; }
/* Rack Grid */
.racks-grid { display:flex; flex-wrap:wrap; gap:16px; }
.rack-card  { background:var(--panel); border:1px solid var(--border);
  border-radius:4px; overflow:hidden; width:calc(25% - 12px); min-width:360px; flex-shrink:0; }
.rack-gateway { border-color:var(--accent); box-shadow:0 0 16px rgba(0,212,255,.1); }

.rack-title { padding:10px 14px; background:#0a1828;
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:2px;
  color:var(--bright); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; }
.rack-ue { font-family:'Share Tech Mono',monospace; font-size:11px;
  color:var(--text-dim); font-weight:normal; }
.rack-fill-bar   { height:4px; background:var(--border); }
.rack-fill-inner { height:100%; transition:width .4s; }
.rack-body { padding:7px; display:flex; flex-direction:column; gap:2px; }

.rack-slot { display:flex; align-items:stretch; gap:6px; min-height:26px; }
.slot-u    { font-family:'Share Tech Mono',monospace; font-size:10px;
  color:var(--text-dim); width:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:flex-end; }
.slot-bar  { flex:1; border-radius:2px; border:1px solid transparent;
  display:flex; align-items:center; justify-content:space-between;
  padding:3px 10px; font-family:'Share Tech Mono',monospace; font-size:14px;
  white-space:nowrap; overflow:hidden; }
.slot-u-badge { font-size:10px; opacity:.5; flex-shrink:0; margin-left:8px; }

.slot-empty    .slot-bar { background:rgba(255,255,255,.015); border-color:rgba(255,255,255,.05);
  color:var(--text-dim); font-style:italic; }
.slot-pp-fiber .slot-bar { background:rgba(255,107,53,.1); border-color:rgba(255,107,53,.3); color:var(--accent2); }
.slot-pp-rj45  .slot-bar { background:rgba(0,212,255,.09); border-color:rgba(0,212,255,.3);  color:var(--accent); }
.slot-pp-combo .slot-bar { background:rgba(192,132,252,.1); border-color:rgba(192,132,252,.3); color:#c084fc; }
.slot-switch   .slot-bar,
.slot-sw_dist_a .slot-bar,
.slot-sw_dist_b .slot-bar { background:rgba(57,255,20,.07); border-color:rgba(57,255,20,.3); color:var(--accent3); }

.rack-legend { padding:8px 12px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:10px; }
.legend-item { font-family:'Share Tech Mono',monospace; font-size:12px;
  color:var(--text-mid); display:flex; align-items:center; gap:5px; }
.legend-dot  { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

.rack-modules { padding:10px 12px; border-top:1px solid var(--border);
  background:rgba(0,0,0,.3);
  font-family:'Share Tech Mono',monospace; font-size:12px; color:#e8f4fc; }
.rack-modules-title { color:var(--accent3); margin-bottom:5px; font-size:12px; letter-spacing:1px; }
.rack-mod-row { line-height:1.9; color:#e8f4fc; font-size:13px; }

/* BOM Pack label */
.bom-pack-label { color:var(--text-dim); font-size:11px; }

/* Remove number input spinners */
.iops-wrap input::-webkit-outer-spin-button,
.iops-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.iops-wrap input[type=number] { -moz-appearance: textfield; }

/* Language toggle button */
#lang-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: transparent; border: 1px solid var(--border-hi);
  color: var(--text); font-family: 'Share Tech Mono', monospace;
  font-size: 13px; font-weight: bold; letter-spacing: 1px;
  cursor: pointer; border-radius: 3px;
  transition: all .2s; white-space: nowrap;
}
#lang-toggle:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(0,212,255,.2); }
.lang-flag { font-size: 16px; line-height: 1; }

/* BOM column spacing fix */
.bom-table td.num,
.bom-table th.num { padding-right: 32px; }