:root{
  --bg:#07101a;
  --panel:#0e1820;
  --muted:#9fb0bd;
  --glass: rgba(255,255,255,0.03);
  --accent:#5ee0a3;
  --accent-2:#ffbd6b;
  --danger:#ff6b6b;
  --radius:14px;
  --card-shadow: 0 10px 30px rgba(2,6,10,0.6);
  --glass-2: rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.04);
  font-synthesis: none;
}
*{box-sizing:border-box}

/* app container */
.biphasic-app{max-width:1100px;margin:0 auto}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.app-header h1{margin:0;font-size:20px;letter-spacing:0.2px}
.subtitle{margin:3px 0 0;color:var(--muted);font-size:13px}
.brand{font-size:12px;color:var(--muted);background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:10px;border:1px solid var(--glass-border)}

/* Force dropdown option text to be black */
select option {
    color: #000 !important;
    background: #fff !important;
}


/* layout */
.app-grid{display:grid;grid-template-columns:420px 1fr;gap:18px}
.card{background: linear-gradient(180deg,var(--panel), rgba(12,20,28,0.7));border-radius:var(--radius);padding:18px;border:1px solid var(--glass-border);box-shadow:var(--card-shadow)}
.inputs .field{margin-bottom:12px}
.label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input[type=time], .field select, .field input[type=number]{
  width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);color:inherit;
  transition:transform .12s ease, box-shadow .12s ease;
}
.field .row{display:flex;gap:8px}
.req{color:var(--accent-2);font-weight:600;margin-left:6px;font-size:11px}
.actions{display:flex;gap:10px;margin-top:10px}
.btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);cursor:pointer;background:transparent;color:var(--muted)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#021016;border:none;box-shadow:0 8px 20px rgba(94,224,163,0.14)}
.btn.ghost{background:transparent;color:var(--muted);border:1px dashed rgba(255,255,255,0.03)}

/* outputs */
.outputs .result-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.02)}
.outputs .result-row .label{color:var(--muted);font-size:13px}
.outputs .result-row .value{font-weight:700}
.warnings{margin-top:10px;color:#ffd08a;font-size:13px}

/* timeline */
.timeline-wrap{margin-top:12px}
#timelineCanvas{width:100%;height:110px;border-radius:10px;display:block;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid var(--glass-border)}
.timeline-legend{display:flex;gap:10px;align-items:center;margin-top:8px;color:var(--muted);font-size:13px}
.legend{display:inline-block;width:14px;height:10px;border-radius:6px;margin-right:8px;vertical-align:middle}
.legend.core{background:linear-gradient(90deg, rgba(94,224,163,0.22), rgba(94,224,163,0.12));border:1px solid rgba(94,224,163,0.12)}
.legend.nap{background:linear-gradient(90deg, rgba(255,189,107,0.22), rgba(255,189,107,0.12));border:1px solid rgba(255,189,107,0.12)}
.legend.wake{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.02)}

/* small utilities */
.muted{color:var(--muted);font-size:13px}
.alt-suggestions{margin-top:10px}
.hidden{display:none}

/* responsive */
@media (max-width:980px){ .app-grid{grid-template-columns:1fr} .inputs, .outputs{order:unset} }