/* Cosmic Eurorack Generator styles (scoped) */
.ceg-wrapper{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#e6f0ff;}
.ceg-wrapper *{box-sizing:border-box;}
.ceg-wrapper{background:radial-gradient(circle at top,#1b2740 0,#060913 65%);border-radius:16px;padding:14px;border:1px solid rgba(128,199,255,.28);box-shadow:0 12px 30px rgba(0,0,0,.55);max-width:980px;margin:0 auto;}
.ceg-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.ceg-title{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8fd3ff;font-weight:650;}
.ceg-transport{display:flex;gap:8px;flex-wrap:wrap;}
.ceg-btn{border-radius:999px;border:1px solid rgba(150,210,255,.5);background:linear-gradient(135deg,#101829,#1c2642);color:#e6f0ff;padding:6px 14px;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:.08em;}
.ceg-btn:active{transform:translateY(1px);}
.ceg-btn-small{padding:6px 10px;font-size:11px;}
.ceg-btn-power{border-color:#53b2ff;}
.ceg-btn-play{border-color:#4de1a5;}
.ceg-btn-stop{border-color:#ffb14d;}
.ceg-btn-rand{border-color:#a78bfa;}
.ceg-btn-freeze{border-color:#60a5fa;}
.ceg-btn-panic{border-color:#ff4d6a;color:#ffb3be;}
.ceg-btn-active{background:linear-gradient(135deg,#2a3c6a,#3f5fa0);box-shadow:0 0 10px rgba(115,186,255,.6);}

.ceg-top{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.ceg-panel{background:rgba(7,13,31,.82);border:1px solid rgba(105,157,221,.35);border-radius:12px;padding:8px 10px;flex:1 1 190px;min-width:0;}
.ceg-panel label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a0c7ff;margin-bottom:4px;}
.ceg-row{display:flex;gap:8px;align-items:center;}
.ceg-num{width:76px;background:#050713;border:1px solid rgba(135,190,255,.6);color:#e6f0ff;border-radius:8px;padding:6px 8px;font-size:13px;}
.ceg-range{width:100%;}
.ceg-select{width:100%;background:#050713;border:1px solid rgba(135,190,255,.6);color:#e6f0ff;border-radius:8px;padding:6px 8px;font-size:12px;}
.ceg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ceg-mini span{display:block;font-size:10px;color:#9fb7ff;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}

.ceg-scope-panel{background:rgba(7,13,31,.82);border:1px solid rgba(105,157,221,.35);border-radius:12px;padding:8px 10px;flex:1 1 240px;}
.ceg-scope-title{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9fe3ff;margin-bottom:6px;}
.ceg-scope{width:100%;height:120px;border-radius:10px;background:radial-gradient(circle at 0 0,rgba(111,207,255,.10),rgba(0,0,0,.55));border:1px solid rgba(125,210,255,.35);}

.ceg-mid{display:flex;gap:10px;flex-wrap:wrap;}
.ceg-rack{flex:1 1 560px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.ceg-module{background:rgba(6,10,25,.88);border:1px solid rgba(96,148,221,.45);border-radius:14px;padding:10px;position:relative;}
.ceg-module-title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#cde9ff;margin-bottom:8px;}
.ceg-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.ceg-col{min-width:0;}
.ceg-knobrow{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.ceg-knobrow span{font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:#9fb7ff;}

.ceg-ports{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.ceg-port{border-radius:999px;padding:6px 10px;font-size:11px;letter-spacing:.10em;text-transform:uppercase;border:1px solid rgba(150,210,255,.35);background:linear-gradient(135deg,#0b1020,#182446);cursor:grab;user-select:none;}
.ceg-port.ceg-in{border-color:rgba(255,180,77,.45);}
.ceg-port.ceg-out{border-color:rgba(77,225,165,.45);}

.ceg-patchbay{flex:1 1 360px;background:rgba(6,10,25,.88);border:1px solid rgba(96,148,221,.45);border-radius:14px;padding:10px;min-width:280px;position:relative;}
.ceg-patch-title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#cde9ff;margin-bottom:6px;}
.ceg-patch-hint{font-size:11px;color:rgba(230,240,255,.65);margin-bottom:8px;}
.ceg-cables{width:100%;height:420px;border-radius:12px;background:radial-gradient(circle at 0 0,rgba(111,207,255,.08),rgba(0,0,0,.25));border:1px dashed rgba(143,211,255,.35);}

.ceg-status{margin-top:10px;background:rgba(5,12,28,.85);border:1px solid rgba(125,210,255,.25);border-radius:14px;padding:10px;}
.ceg-status-line{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7fa1ff;}
.ceg-status-line span{color:#e6f0ff;}
.ceg-stepbar{margin-top:8px;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;}
.ceg-step{height:10px;border-radius:4px;background:rgba(56,88,148,.7);position:relative;overflow:hidden;}
.ceg-step::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#4de1a5,#8fd3ff);opacity:0;transition:opacity .08s linear;}
.ceg-step.on::after{opacity:1;}

.ceg-keys{margin-top:10px;background:rgba(6,10,25,.88);border:1px solid rgba(96,148,221,.45);border-radius:14px;padding:10px;}
.ceg-oct{display:flex;gap:8px;margin-bottom:8px;}
.ceg-keygrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.ceg-key{background:radial-gradient(circle at top,rgba(80,140,255,.2),rgba(7,11,26,.95));border-radius:14px;padding:8px 6px 6px;border:1px solid rgba(128,191,255,.45);min-height:74px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.5);}
.ceg-key.on{border-color:rgba(173,238,255,.9);box-shadow:0 0 12px rgba(107,215,255,.6);}
.ceg-human{display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;}
.ceg-head{width:18px;height:18px;border-radius:50%;background:var(--c,#8fd3ff);box-shadow:0 0 6px rgba(143,211,255,.8);}
.ceg-body{width:22px;height:30px;border-radius:6px;background:linear-gradient(to bottom,var(--c,#8fd3ff),#1b2340);}
.ceg-keylabel{margin-top:6px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#a7c6ff;text-align:center;}
.ceg-credits{margin-top:10px;font-size:12px;color:rgba(230,240,255,.55);text-align:center;}

@media (max-width:640px){
  .ceg-wrapper{padding:12px;}
  .ceg-module-grid{grid-template-columns:1fr;}
  .ceg-cables{height:260px;}
  .ceg-keygrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}


/* === v1.1 UI: Magic Links (no cables) === */
.ceg-links{ display:flex; gap:10px; flex-wrap:wrap; }
.ceg-links-col{
  flex: 1 1 140px;
  min-width: 140px;
  background: rgba(5,12,28,.55);
  border: 1px solid rgba(125,210,255,.18);
  border-radius: 12px;
  padding: 8px;
}
.ceg-links-wide{ flex: 2 1 240px; min-width: 220px; }
.ceg-links-label{
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9fe3ff;
  margin-bottom: 6px;
}
.ceg-link-btn{
  width:100%;
  margin: 6px 0;
  border-radius: 12px;
  border: 1px solid rgba(150,210,255,.35);
  background: linear-gradient(135deg,#0b1020,#182446);
  color:#e6f0ff;
  padding: 10px 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.ceg-link-btn.ceg-link-active{
  border-color: rgba(173,238,255,.9);
  box-shadow: 0 0 12px rgba(107,215,255,.45);
}
.ceg-link-strength{ display:flex; gap:8px; align-items:center; }
.ceg-link-val{ font-size: 12px; color:#8fd3ff; min-width: 44px; text-align:right; }
.ceg-link-actions{ display:flex; gap:8px; margin-top:10px; }
.ceg-link-list{
  margin-top:10px;
  font-size: 12px;
  color: rgba(230,240,255,.75);
  border-top: 1px dashed rgba(143,211,255,.22);
  padding-top: 8px;
}
.ceg-link-chip{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(125,210,255,.18);
  margin-bottom: 8px;
}
.ceg-link-chip b{ color:#e6f0ff; font-weight:650; }
.ceg-link-remove{
  border:none;
  background: transparent;
  color: rgba(255, 154, 169, .9);
  cursor:pointer;
  font-size: 12px;
}

/* Hide old port pills (Magic Links replaces them) */
.ceg-ports{ display:none !important; }

@media (max-width:640px){
  .ceg-links-col{ min-width: 0; flex: 1 1 100%; }
  .ceg-link-actions{ flex-wrap: wrap; }
}