.solar-twin { display:grid; grid-template-columns:minmax(0,.72fr) minmax(420px,1.35fr); gap:18px; align-items:start; padding:22px; border:1px solid rgba(255,255,255,.08); border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(200,255,87,.025)); overflow:hidden; }
.solar-twin-copy { align-self:center; padding:8px 8px 8px 2px; }
.solar-twin-copy h3 { margin:8px 0 10px; font-size:clamp(1.8rem,3vw,3.1rem); line-height:.96; letter-spacing:-.05em; }
.solar-twin-copy p { margin:0; color:#9eada4; line-height:1.55; }
.solar-twin [data-twin-visual] { min-width:0; }
.solar-twin-stage { position:relative; }
.solar-twin-stage-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:0 2px 8px; color:#91a198; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.solar-twin-stage-head span { display:flex; align-items:center; gap:7px; }
.solar-twin-stage-head i { width:7px; height:7px; border-radius:50%; background:#c8ff57; box-shadow:0 0 16px rgba(200,255,87,.55); }
.solar-twin-stage svg { display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 28px 38px rgba(0,0,0,.18)); }
.solar-twin-ground { fill:#101a14; stroke:rgba(255,255,255,.08); }
.solar-twin-grid path { stroke:rgba(225,238,227,.055); stroke-width:1; }
.solar-twin-route { fill:none; stroke:#7ee7df; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:7 7; filter:drop-shadow(0 0 7px rgba(126,231,223,.28)); animation:twin-route 1.1s ease both; }
.solar-twin-array { animation:twin-array-in .48s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--array-delay); transform-box:fill-box; transform-origin:center; }
.solar-twin-array polygon { fill:#c8ff57; fill-opacity:.82; stroke:#f0ffd2; stroke-width:1.6; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.solar-twin-array text { fill:#172117; font-size:13px; font-weight:900; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.solar-twin-north path { fill:none; stroke:#8d9d94; stroke-width:1.5; }
.solar-twin-north text { fill:#8d9d94; font-size:12px; font-weight:850; text-anchor:middle; }
.solar-twin [data-twin-season] { grid-column:1/-1; }
.solar-twin-season { display:grid; grid-template-columns:minmax(180px,.35fr) minmax(320px,1fr); gap:12px 22px; align-items:end; padding-top:4px; }
.solar-twin-season-copy { display:grid; gap:3px; }
.solar-twin-season-copy small { color:#819188; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; }
.solar-twin-season-copy strong { font-size:1.1rem; color:#e7f5e9; }
.solar-twin-bars { height:74px; display:flex; align-items:end; gap:5px; }
.solar-twin-bars i { position:relative; flex:1; min-width:3px; height:var(--twin-month); border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,rgba(200,255,87,.9),rgba(126,231,223,.38)); opacity:.33; transition:height .35s ease,opacity .2s ease,transform .2s ease,filter .2s ease; }
.solar-twin-bars i[data-state="active"] { opacity:1; transform:translateY(-3px); filter:drop-shadow(0 0 8px rgba(200,255,87,.28)); }
.solar-twin-bars span { position:absolute; left:50%; top:calc(100% + 5px); transform:translateX(-50%); color:#718279; font-style:normal; font-size:.57rem; }
.solar-twin-season input[type="range"] { grid-column:1/-1; width:100%; margin:10px 0 0; accent-color:#c8ff57; }
.solar-twin-season-empty { grid-column:1/-1; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.035); color:#8fa097; }
.solar-twin-empty { grid-template-columns:1fr; min-height:180px; align-content:center; }
.solar-twin-empty h3 { margin:4px 0 0; max-width:640px; color:#c6d2ca; }

@keyframes twin-array-in { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@keyframes twin-route { from { opacity:0; stroke-dashoffset:40; } to { opacity:1; stroke-dashoffset:0; } }

@media (max-width: 900px) {
  .solar-twin { grid-template-columns:1fr; }
  .solar-twin [data-twin-season] { grid-column:auto; }
  .solar-twin-season { grid-template-columns:1fr; }
  .solar-twin-season input[type="range"] { grid-column:auto; }
}

@media (max-width: 560px) {
  .solar-twin { padding:15px; border-radius:18px; }
  .solar-twin-stage-head { align-items:flex-start; flex-direction:column; }
  .solar-twin-bars { height:62px; gap:3px; }
}

@media (prefers-reduced-motion: reduce) {
  .solar-twin-array,.solar-twin-route { animation:none; }
  .solar-twin-bars i { transition:none; }
}