/**
 * SCANADO Pixelrechner – Styles
 * Alle Selektoren unter .pxr gescoped
 */

.pxr {
  margin: 0 auto;
}
.pxr * {
  box-sizing: border-box;
}

/* Toggles */
.pxr .tg {
  display: inline-flex;
  border: 1px solid rgba(34, 36, 38, 0.15);
  border-radius: 0.28rem;
  overflow: hidden;
  vertical-align: middle;
}
.pxr .tg button {
  padding: 7px 13px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #fff;
  border: none;
  cursor: pointer;
  color: #999;
  transition: all 0.15s;
}
.pxr .tg button.on {
  background: #4e8eff;
  color: #fff;
}
.pxr .tg button:hover:not(.on) {
  background: #f0f4ff;
  color: #4e8eff;
}

/* Main inputs */
.pxr .mi {
  text-align: center !important;
}

/* Section label */
.pxr .sl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
  margin-bottom: 6px;
  display: block;
}

/* DPI pills */
.pxr .dp .ui.label {
  cursor: pointer;
  margin: 2px;
  transition: all 0.15s;
}
.pxr .dp .ui.label:hover,
.pxr .dp .ui.label.on {
  background: #4e8eff !important;
  color: #fff !important;
}

/* Result box */
.pxr .res {
  background: linear-gradient(135deg, #f0fdf7, #e8faf3);
  border: 2px solid rgba(0, 180, 140, 0.25);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s;
}
.pxr .res .rv {
  font-size: 1.4rem;
  font-weight: 700;
  color: #00a884;
}
.pxr .res .sv {
  font-size: 0.82rem;
  color: #999;
  margin-top: 2px;
}
.pxr .res.empty {
  background: #f8f9fb;
  border-color: rgba(0, 0, 0, 0.08);
}
.pxr .res.empty .rv {
  color: #ccc;
  font-size: 0.9rem;
  font-weight: 400;
}

/* Mini converters */
.pxr .mc {
  background: #f8f9fb;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}
.pxr .mc .mt {
  font-size: 0.8rem;
  font-weight: 700;
  color: #555;
  margin-bottom: 0.7rem;
}
.pxr .mc .mr {
  font-weight: 700;
  color: #4e8eff;
  font-size: 1rem;
  text-align: center;
  padding: 0.4rem 0;
  min-height: 30px;
}
.pxr .mc .ui.right.labeled.input input {
  text-align: center !important;
}
.pxr .mc .ui.right.labeled.input .ui.label {
  font-size: 0.8rem;
  line-height: 0.8rem;
  padding-top: 1rem;
}

/* Detail Cards */
.pxr .dc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 1rem;
}
.pxr .dc .card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  transition: box-shadow 0.2s;
}
.pxr .dc .card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.pxr .dc .card .c-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #aaa;
  margin-bottom: 4px;
}
.pxr .dc .card .c-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #333;
}
.pxr .dc .card .c-sub {
  font-size: 0.8rem;
  color: #999;
  margin-top: 2px;
}
.pxr .dc .card.highlight {
  border-left: 3px solid #4e8eff;
}
.pxr .dc .card.highlight .c-value {
  color: #4e8eff;
}

/* SCANADO Recommendation */
.pxr .scanado-tip {
  background: linear-gradient(135deg, #fef9f0, #fff7ed);
  border: 1px solid rgba(233, 69, 96, 0.15);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  display: none;
  margin-top: 12px;
}
.pxr .scanado-tip .tip-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e94560;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.pxr .scanado-tip .tip-text {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}
.pxr .scanado-tip a {
  color: #e94560;
  font-weight: 600;
}

/* Ratio preview */
.pxr .rp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.pxr .rb {
  border: 2px solid #4e8eff;
  border-radius: 4px;
  background: rgba(78, 142, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #4e8eff;
  transition: all 0.3s;
}

/* Print quality badge */
.pxr .pq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 4px;
}
.pxr .pq.good {
  background: #e8f8f0;
  color: #00a884;
}
.pxr .pq.ok {
  background: #fff8e8;
  color: #c89200;
}
.pxr .pq.low {
  background: #fef0f0;
  color: #d44;
}

/* Ratio lock */
.pxr .rl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 0.82rem;
  color: #999;
  padding: 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.28rem;
  transition: all 0.15s;
  user-select: none;
  background: #fff;
}
.pxr .rl:hover {
  border-color: #4e8eff;
  color: #4e8eff;
}
.pxr .rl.on {
  border-color: #4e8eff;
  color: #4e8eff;
  background: #f0f4ff;
}

/* Upload zone */
.pxr .uz {
  border: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #fafbfc;
  position: relative;
  overflow: hidden;
}
.pxr .uz:hover {
  border-color: #4e8eff;
  background: #f0f7ff;
}
.pxr .uz input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.pxr .uz i.big.icon {
  color: #ccd;
  margin-bottom: 4px;
}
.pxr .uz .ut {
  font-size: 0.85rem;
  color: #aaa;
}

/* Separator & helpers */
.pxr .sep {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin: 1rem 0;
}
.pxr .mb-0 {
  margin-bottom: 0 !important;
}

/* 3-col layout */
.pxr .cg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.pxr .cs2 {
  grid-column: span 2;
}

@media (max-width: 767px) {
  .pxr .cg {
    grid-template-columns: 1fr;
  }
  .pxr .cs2 {
    grid-column: span 1;
  }
}