/* Chaos Mining Calculator — premium dark UI */

.cmc-wrap{
  max-width: 980px;
  margin: 20px auto;
  padding: 6px 10px 18px;
  color: #f2f2f2;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}

.cmc-title{
  font-size: 44px;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin: 10px 0 6px;
  text-align: center;
}

.cmc-subtitle{
  text-align: center;
  opacity: 0.85;
  margin-bottom: 18px;
  font-size: 14px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-card{
  background: rgba(22,22,22,0.88);
  border: 1px solid rgba(255, 214, 102, 0.22);
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.55);
  padding: 18px;
  margin: 16px 0;
}

.cmc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.cmc-field label{
  display: block;
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-input, .cmc-select{
  width: 100%;
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 12px 12px;
  color: #fff;
  outline: none;
  font-size: 14px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-input:focus, .cmc-select:focus{
  border-color: rgba(255, 214, 102, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 214, 102, 0.10);
}

.cmc-help{
  margin-top: 8px;
  opacity: 0.70;
  font-size: 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-rowgap{
  margin-top: 6px;
}

.cmc-tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 14px;
}

.cmc-tile{
  background: rgba(40,40,40,0.90);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 14px;
}

.cmc-tile-label{
  opacity: 0.78;
  font-size: 12px;
  margin-bottom: 6px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-tile-value{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-btn{
  display: inline-block;
  background: rgba(0,0,0,0.0);
  border: 1px solid rgba(255, 214, 102, 0.55);
  border-radius: 12px;
  padding: 12px 18px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: transform .05s ease-in-out, box-shadow .15s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-btn:hover{
  box-shadow: 0 0 0 3px rgba(255, 214, 102, 0.10);
}

.cmc-btn:active{
  transform: translateY(1px);
}

.cmc-btn.is-loading{
  opacity: 0.75;
}

.cmc-section-title{
  font-size: 22px;
  margin-bottom: 6px;
}

.cmc-section-subtitle{
  opacity: 0.78;
  font-size: 12px;
  margin-bottom: 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
}

.cmc-table thead th{
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.3px;
  opacity: 0.8;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-table tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-table tbody tr:last-child td{
  border-bottom: none;
}

.cmc-right{
  text-align: right;
  white-space: nowrap;
}

.cmc-muted{
  opacity: 0.75;
}

.cmc-error{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 120, 120, 0.12);
  border: 1px solid rgba(255, 120, 120, 0.25);
  color: #ffd6d6;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 720px){
  .cmc-title{ font-size: 34px; }
  .cmc-grid{ grid-template-columns: 1fr; }
  .cmc-tiles{ grid-template-columns: 1fr; }
}


/* Mobile: allow line breaks for Time breakdown */
@media (max-width: 640px){
  .cmc-preline{ white-space: pre-line; }
}

/* Mobile Stepper Buttons */
.cmc-stepper{
  display:flex;
  align-items:center;
  gap:6px;
}

.cmc-minus,
.cmc-plus{
  width:36px;
  height:36px;
  border-radius:8px;
  border:1px solid rgba(255,214,102,0.55);
  background: rgba(0,0,0,0.7);
  color:#fff;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
  line-height:1;
  transition: all .15s ease;
}

.cmc-minus:hover,
.cmc-plus:hover{
  background: rgba(255,214,102,0.15);
}

.cmc-minus:active,
.cmc-plus:active{
  transform: scale(0.95);
}

/* Input wächst sauber */
.cmc-stepper .cmc-input{
  flex:1;
  text-align:center;
}

/* ================================
   Chaos Mining Calculator – Light/Dark Fix
   ================================ */

/* Base: keep dark cards readable */
.cmc-wrap{
  color: #f2f2f2;
}

/* Headings inside calculator */
.cmc-title,
.cmc-section-title{
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Normal text on dark cards */
.cmc-subtitle,
.cmc-help,
.cmc-muted,
.cmc-tile-label,
.cmc-section-subtitle,
.cmc-field label,
.cmc-table,
.cmc-table td,
.cmc-table th{
  color: rgba(242,242,242,0.85) !important;
  opacity: 1 !important;
}

/* Inputs / selects stay readable */
.cmc-input,
.cmc-select{
  color: #ffffff;
}

/* ================================
   Light Mode Override
   (for themes / plugins with light background)
   ================================ */

/* Main title like "Create" color */
body:not(.dark) .cmc-title{
  color: #3b2f23 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Subtitle */
body:not(.dark) .cmc-subtitle{
  color: #3b2f23 !important;
}

/* Labels */
body:not(.dark) .cmc-field label{
  color: #ffffff !important;
}

/* Help text */
body:not(.dark) .cmc-help{
  color: #ffffff !important;
}

/* Inputs + selects in light mode */
body:not(.dark) .cmc-input,
body:not(.dark) .cmc-select{
  color: #222 !important;
  background: #ffffff !important;
  border: 1px solid #ccc !important;
}

/* Dropdown options */
body:not(.dark) .cmc-select option{
  color: #000 !important;
  background: #fff !important;
}

/* Keep calculator cards dark */
body:not(.dark) .cmc-card{
  background: rgba(32,32,32,0.95) !important;
}