:root{
  --bg:#0b0b0c; --card:#0f1011; --muted:#bfc7d3; --accent:#00a3ff;
  --input-h:44px; --radius:10px; --max-form-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);font-family:Inter,system-ui,Arial;color:#fff}
.cidco-wrap{max-width:var(--max-form-width);margin:28px auto;padding:22px}
.cidco-card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 10px 30px rgba(0,0,0,0.6);overflow:visible}
.cidco-grid{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:start}
@media (max-width:980px){.cidco-grid{grid-template-columns:1fr}}

.cidco-controls{display:flex;flex-direction:column;gap:12px}
.cidco-controls label{font-size:13px;color:var(--muted);margin-bottom:6px}

/* SELECT / INPUT: make base control dark, but make OPTION text readable */
.cidco-controls select,
.cidco-controls input{
  width:100%;
  min-height:var(--input-h);
  padding:10px 12px;
  background:#0c0d0e;              /* dark field background */
  border:1px solid rgba(255,255,255,0.06);
  color:#fff;                      /* visible in the closed select */
  border-radius:8px;
  font-size:14px;
  -webkit-appearance:menulist-button;
  appearance:auto;
  position:relative;
  z-index:10;
}

/* Force option text readable on white UA dropdowns */
.cidco-controls select option { color:#111 !important; background:#fff !important; }

.cidco-controls select::-ms-expand { display: block; }

.cidco-controls select { z-index:9999 !important; }

.cidco-row{display:flex;gap:10px}
.cidco-row>*{flex:1}

.cidco-actions{display:flex;gap:10px;margin-top:6px}
.cidco-btn{background:linear-gradient(90deg,#0fb9ff,#6ee7b7);color:#002;border:none;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.cidco-btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff}
.cidco-btn-outline{background:transparent;border:1px dashed rgba(255,255,255,0.06);color:#fff}

.cidco-result{padding:14px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:flex;flex-direction:column;gap:10px;min-height:180px}
.cidco-line{display:flex;justify-content:space-between;gap:10px;align-items:center}
.cidco-big{font-size:20px;font-weight:800;color:#fff}
.cidco-accent{color:var(--accent)}

@media (max-width:480px){
  .cidco-controls select, .cidco-controls input{min-height:48px;font-size:15px}
}

select:focus,input:focus{outline:2px solid rgba(15,62,255,0.12);outline-offset:2px}