.graphs-v5 {
    --graphs-cyan:#48c8f1;
    --graphs-mint:#39d8b6;
    --graphs-muted:#9eb0c2;
    width:min(100% - 3rem,1180px);
    margin:0 auto;
    padding:clamp(2rem,4vw,4.5rem) 0 4rem;
}

.graphs-v5-header { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.graphs-v5-kicker,.graphs-v5-copy span { display:block; margin-bottom:.55rem; color:var(--graphs-mint); font-size:.72rem; font-weight:750; letter-spacing:.14em; }
.graphs-v5-header h1 { margin:0; color:#fff; font-size:clamp(2.35rem,6vw,4.8rem); line-height:.98; letter-spacing:-.055em; }
.graphs-v5-header p { max-width:68ch; margin:1rem 0 0; color:var(--graphs-muted); line-height:1.65; }
.graphs-v5-back { flex:0 0 auto; padding:.7rem 1rem; border:1px solid rgba(72,200,241,.22); border-radius:999px; color:#cbe6f4; background:rgba(72,200,241,.06); font-size:.8rem; font-weight:650; text-decoration:none; }

.graphs-v5-shell { overflow:hidden; border:1px solid rgba(116,180,221,.16); border-radius:22px; background:rgba(7,30,50,.84); box-shadow:0 24px 70px rgba(0,8,20,.18); }
.graphs-v5 .graphs-v5-tabs { display:flex; gap:.5rem; margin:0; padding:.7rem; border-bottom:1px solid rgba(116,180,221,.13); background:rgba(255,255,255,.018); }
.graphs-v5 .graphs-v5-tabs .cmx-tab { flex:1; justify-content:center; margin:0; padding:.85rem 1rem; border:1px solid transparent; border-radius:13px; color:#aebdca; background:transparent; font-size:.82rem; font-weight:650; }
.graphs-v5 .graphs-v5-tabs .cmx-tab.active { border-color:rgba(72,200,241,.22); color:#fff; background:linear-gradient(135deg,rgba(72,200,241,.16),rgba(57,216,182,.08)); }
.graphs-v5-copy { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:clamp(1rem,2.5vw,1.75rem) clamp(1rem,2.5vw,1.75rem) 1rem; }
.graphs-v5-copy h2 { margin:0; color:#fff; font-size:clamp(1.3rem,2.6vw,1.8rem); letter-spacing:-.03em; }
.graphs-v5-copy p { max-width:46ch; margin:0; color:var(--graphs-muted); font-size:.74rem; line-height:1.5; text-align:right; }
.graphs-v5-thermal-guide { margin:0 clamp(1rem,2.5vw,1.75rem) 1rem; border:1px solid rgba(57,216,182,.18); border-radius:14px; color:#9eb0c2; background:rgba(57,216,182,.045); }
.graphs-v5-thermal-guide summary { padding:.85rem 1rem; color:#cfeee7; cursor:pointer; font-size:.74rem; font-weight:700; }
.graphs-v5-thermal-guide div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; padding:0 1rem 1rem; }
.graphs-v5-thermal-guide p { margin:0; color:#91a6b8; font-size:.68rem; line-height:1.55; }
.graphs-v5-thermal-guide strong { color:#d7e9f2; }
.graphs-v5-frame { margin:0 clamp(1rem,2.5vw,1.75rem); overflow:hidden; border:1px solid rgba(116,180,221,.14); border-radius:16px; background:#091c2d; }
.graphs-v5-rotate-note { display:none; }
.graphs-v5-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1rem,2.5vw,1.75rem) 1.35rem; color:#8298aa; font-size:.7rem; }
.graphs-v5-foot a { color:var(--graphs-cyan); font-weight:650; text-decoration:none; }

@media (max-width:1024px) {
    .graphs-v5 { padding-top:5.5rem; }
}

@media (max-width:768px) {
    .graphs-v5 { width:min(100% - 1.25rem,1180px); padding-top:3.75rem; }
    .graphs-v5-header,.graphs-v5-copy { align-items:flex-start; flex-direction:column; gap:1rem; }
    .graphs-v5-copy p { text-align:left; }
    .graphs-v5-thermal-guide div { grid-template-columns:1fr; }
    .graphs-v5 .graphs-v5-tabs { flex-direction:column; }
    .graphs-v5-foot { align-items:flex-start; flex-direction:column; }
}

@media (max-width:768px) and (orientation:portrait) {
    .graphs-v5-rotate-note { display:flex; align-items:center; gap:.85rem; margin:0 .75rem 1rem; padding:.85rem 1rem; border:1px solid rgba(72,200,241,.2); border-radius:14px; color:#dbe9f3; background:rgba(72,200,241,.07); }
    .graphs-v5-phone { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border:1px solid rgba(72,200,241,.26); border-radius:10px; color:var(--graphs-cyan); font-size:1.25rem; }
    .graphs-v5-rotate-note strong,.graphs-v5-rotate-note small { display:block; }
    .graphs-v5-rotate-note strong { font-size:.78rem; }
    .graphs-v5-rotate-note small { margin-top:.2rem; color:var(--graphs-muted); font-size:.66rem; line-height:1.4; }
}

@media (max-height:768px) and (orientation:landscape) {
    .graphs-v5 { width:calc(100% - 1rem); padding-top:4.25rem; }
    .graphs-v5-header { margin-bottom:1rem; }
    .graphs-v5-header h1 { font-size:clamp(2rem,5vw,3.2rem); }
    .graphs-v5 .graphs-v5-tabs { flex-direction:row; }
    .graphs-v5-copy { padding:1rem .75rem .75rem; }
    .graphs-v5-frame { margin:0 .5rem; border-radius:12px; }
    .graphs-v5-foot { flex-direction:row; padding:.75rem; }
}

