/* ════════════════════════════════════════════════════════════════
   Datentyp Konverter — Styles
   Farb-Schema:
     Sign      #C62828  / #FFCDD2
     Exponent  #E65100  / #FFE0B2
     Mantisse  #00695C  / #B2DFDB   ← Akzentfarbe
   ════════════════════════════════════════════════════════════════ */

:root {
  --dc-sign:        #C62828;
  --dc-sign-light:  #FFCDD2;
  --dc-sign-mid:    #EF9A9A;
  --dc-exp:         #E65100;
  --dc-exp-light:   #FFE0B2;
  --dc-exp-mid:     #FFCC80;
  --dc-mant:        #00695C;
  --dc-mant-light:  #B2DFDB;
  --dc-mant-mid:    #80CBC4;
  --dc-accent:      #00695C;
  --dc-accent-glow: rgba(0,105,92,.15);
  --dc-border:      #E2E8F0;
  --dc-bg-page:     #F8FAFC;
  --dc-bg-card:     #FFFFFF;
  --dc-text:        #1E293B;
  --dc-muted:       #64748B;
  --dc-radius:      10px;
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.dc-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

/* ── Header ──────────────────────────────────────────────────── */
.dc-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.dc-header-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--dc-mant), #004D40);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
  box-shadow: 0 3px 8px rgba(0,105,92,.35);
  flex-shrink: 0;
}
.dc-title   { font-size: 1.35rem; font-weight: 700; color: var(--dc-text); margin: 0; }
.dc-subtitle{ font-size: 0.82rem; color: var(--dc-muted); margin: 0; }

/* ── Presets ─────────────────────────────────────────────────── */
.dc-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 1.25rem;
}
.dc-presets-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dc-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 4px;
}
.dc-preset {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--dc-border);
  background: var(--dc-bg-card);
  color: var(--dc-text);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.dc-preset:hover  { border-color: var(--dc-accent); background: var(--dc-mant-light); color: var(--dc-accent); }
.dc-preset:active { transform: scale(.95); }

/* ── Main grid ───────────────────────────────────────────────── */
.dc-main {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 1.25rem;
  align-items: start;
}

/* ══ Left — Input column ══ */
.dc-inputs-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.dc-input-group {
  background: var(--dc-bg-card);
  border: 1.5px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 0.8rem 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.dc-input-group:focus-within {
  border-color: var(--dc-accent);
  box-shadow: 0 0 0 3px var(--dc-accent-glow);
}

.dc-ig-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.dc-ig-desc {
  font-size: 0.75rem;
  color: var(--dc-muted);
}

/* Badges */
.dc-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .18em .6em;
  border-radius: 5px;
  color: #fff;
  text-transform: uppercase;
  flex-shrink: 0;
}
.badge-real { background: var(--dc-mant); }
.badge-dint { background: #1565C0; }
.badge-hex  { background: #6A1B9A; }
.badge-bcd  { background: var(--dc-exp); }

/* Inputs */
.dc-input {
  display: block;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  padding: .42rem .7rem;
  border: 1px solid #CBD5E1;
  border-radius: 7px;
  background: var(--dc-bg-page);
  color: var(--dc-text);
  outline: none;
  transition: border-color .15s, background .15s;
}
.dc-input:focus  { border-color: var(--dc-accent); background: #fff; }
.dc-input.dc-invalid { border-color: #ef4444 !important; color: #ef4444; }

.dc-mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; }

/* S7 label */
.dc-s7 {
  font-size: 0.7rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--dc-muted);
  background: #F1F5F9;
  border-radius: 5px;
  padding: .2em .55em;
  margin-top: 0.4rem;
  display: inline-block;
  word-break: break-all;
}
.dc-s7.invalid { color: #ef4444; background: #FEF2F2; }

/* BCD warning */
.dc-bcd-note {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: #C62828;
  background: #FFEBEE;
  border-radius: 5px;
  padding: .3em .6em;
}

/* Info table */
.dc-info-card {
  background: var(--dc-bg-card);
  border: 1.5px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 0.8rem 1rem;
}
.dc-info-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dc-muted);
  margin-bottom: 0.6rem;
}
.dc-info-table { width: 100%; border-collapse: collapse; }
.dc-info-table tr td:first-child { color: var(--dc-muted); font-size: 0.8rem; padding: 3px 0; width: 50px; }
.dc-info-table tr td:last-child  { font-size: 0.78rem; font-family: monospace; color: var(--dc-text); }

/* ══ Right — Visual column ══ */
.dc-visual-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dc-card {
  background: var(--dc-bg-card);
  border: 1.5px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 1rem 1.1rem;
}
.dc-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dc-muted);
  margin-bottom: 0.85rem;
}
.dc-card-title small { font-weight: 400; text-transform: none; font-size: .7rem; letter-spacing: 0; }

/* ── IEEE 754 Segments ───────────────────────────────────────── */
.dc-ieee-segs {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
}
.dc-ieee-seg {
  border-radius: 6px;
  padding: 5px 7px 3px;
  text-align: center;
}
.seg-sign { background: var(--dc-sign); min-width: 30px; }
.seg-exp  { background: var(--dc-exp);  }
.seg-mant { background: var(--dc-mant); flex: 1; }

.dc-seg-bits {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .12em;
  word-break: break-all;
  line-height: 1.35;
}
.dc-seg-label {
  font-size: 0.6rem;
  color: rgba(255,255,255,.8);
  line-height: 1.2;
  margin-top: 3px;
  text-align: center;
}

/* ── IEEE info rows ──────────────────────────────────────────── */
.dc-ieee-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.8rem;
}
.dc-ieee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.82rem;
}
.dc-ieee-row-result { border-bottom: none; padding-top: 8px; }
.dc-ir-label { color: var(--dc-muted); }
.dc-ir-val   { font-weight: 600; color: var(--dc-text); text-align: right; }
.dc-ir-result { color: var(--dc-accent); font-size: 1rem; }

/* Type badge */
.dc-type-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: .15em .55em;
  border-radius: 20px;
  background: #E8F5E9;
  color: #2E7D32;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dc-type-badge.tb-special { background: #FFF8E1; color: #E65100; }
.dc-type-badge.tb-nan     { background: #FFEBEE; color: #C62828; }
.dc-type-badge.tb-denorm  { background: #E8EAF6; color: #283593; }

/* ── Bit Grid ────────────────────────────────────────────────── */
.dc-bit-nums {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}
.dc-bit-num {
  font-size: 0.52rem;
  color: var(--dc-muted);
  text-align: center;
  user-select: none;
  line-height: 1;
  padding: 1px 0;
}

.dc-bit-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}
.dc-bit {
  aspect-ratio: 1;
  border: none;
  border-radius: 4px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s, filter .1s;
  padding: 0;
}
.dc-bit:hover  { transform: scale(1.15); filter: brightness(1.1); z-index: 1; position: relative; }
.dc-bit:active { transform: scale(.9); }

/* Role colours */
.bit-sign-1 { background: var(--dc-sign);       color: #fff; }
.bit-sign-0 { background: var(--dc-sign-light);  color: var(--dc-sign); }
.bit-exp-1  { background: var(--dc-exp);         color: #fff; }
.bit-exp-0  { background: var(--dc-exp-light);   color: var(--dc-exp); }
.bit-mant-1 { background: var(--dc-mant);        color: #fff; }
.bit-mant-0 { background: var(--dc-mant-light);  color: var(--dc-mant); }

/* Legend */
.dc-bit-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  font-size: 0.72rem;
  margin-top: 6px;
}
.bl-sign { color: var(--dc-sign); font-weight: 600; }
.bl-exp  { color: var(--dc-exp);  font-weight: 600; }
.bl-mant { color: var(--dc-mant); font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .dc-main { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .dc-bit { font-size: .6rem; border-radius: 3px; }
  .dc-bit-num { font-size: .45rem; }
}