/* /tr/cpanel-vps/ sections: WHM/cPanel account layout, license planner, management models, resource components, transfer map.
   Markup: includes/frontend/templates/service-cpanel-sections.php. Shared parts: service-sections.css.
   Hero rules (.svc-hero, .svc-board-cpanel) are not touched here. */

/* Account layout (#service-use-cases) */
.svc-cp-topology{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:center;padding:30px;border:1px solid #ccd8cd;border-radius:20px;background:var(--x-soft)}
.svc-cp-topology+.svc-cp-topology{margin-top:14px}
.svc-page .svc-cp-copy h3{margin:10px 0 12px;font-size:24px;line-height:1.3;letter-spacing:-.5px}
.svc-cp-copy>p:last-child{margin:0;font-size:14px;line-height:1.85;color:var(--x-muted)}
.svc-cp-map{padding:24px;border:1px solid var(--x-edge);border-radius:14px;background:#fff;background-image:radial-gradient(#d4dfd0 1px,transparent 1px);background-size:12px 12px}
.svc-cp-whm{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-radius:10px;background:var(--x-green);color:#e2efdc}
.svc-cp-whm strong{font-size:20px;font-weight:700;color:#fff}
.svc-cp-whm span{font:11px/1.5 'JetBrains Mono',monospace;text-align:right}
.svc-cp-wires{display:grid;grid-template-columns:repeat(3,1fr);height:26px}
.svc-cp-wires.is-single{grid-template-columns:1fr}
.svc-cp-wires i{justify-self:center;width:2px;height:100%;background:#8fb79a}
.svc-cp-accounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.svc-cp-accounts.is-single{grid-template-columns:1fr}
.svc-cp-account{padding:14px;border:1px solid #b9d0b1;border-radius:10px;background:#e8f3e6}
.svc-cp-account-head{margin:0 0 10px;font:600 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;color:#3c6149}
.svc-cp-domains{display:grid;gap:5px;margin:0 0 10px;padding:0;list-style:none}
.is-single .svc-cp-domains{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-cp-domains li{padding:7px 8px;border:1px solid #c8d6c5;background:#fff;font:11px/1.4 'JetBrains Mono',monospace;color:#1d2f22;overflow-wrap:anywhere}
.svc-cp-tools{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0;padding:0;list-style:none}
.is-single .svc-cp-tools{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-cp-tools li{padding:5px 6px;border-radius:4px;background:rgba(255,255,255,.7);font-size:11px;color:#3d4f40;text-align:center}
.svc-cp-arch{max-width:820px;margin:16px 0 0;font-size:13px;line-height:1.85;color:var(--x-muted)}

/* License planner (#cpanel-license-planner) */
.svc-cp-license{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;padding:28px;border:1px solid var(--x-edge);border-radius:18px;background:#fff}
.svc-cp-license-controls{display:none}
.svc-cp-license.is-ready .svc-cp-license-controls{display:grid;gap:10px}
.svc-cp-license.is-ready .svc-cp-license-nojs{display:none}
.svc-cp-license-controls label{font-size:13px;font-weight:650;color:#1d2f22}
.svc-cp-license-controls input[type=number]{width:140px;min-height:48px;padding:8px 14px;border:1px solid #b9d0b1;border-radius:10px;font:700 22px 'JetBrains Mono',monospace;color:var(--x-green)}
.svc-cp-license-controls input[type=range]{width:100%;accent-color:var(--x-green)}
.svc-cp-license-controls input:focus-visible{outline:2px solid #1f7345;outline-offset:3px}
.svc-cp-range-scale{display:flex;justify-content:space-between;margin:0;font:10px 'JetBrains Mono',monospace;color:#7c877b}
.svc-cp-license-nojs{margin:0 0 10px;font-size:13px;color:#3d4f40}
.svc-cp-license-example{margin:16px 0 0;font-size:12px;line-height:1.8;color:var(--x-muted)}
.svc-cp-license-result{grid-row:span 2;display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:14px;background:var(--x-green);color:#e2efdc}
.svc-cp-license-result .svc-x-label{color:#9fd4ab}
.svc-cp-license-result strong{font-size:40px;line-height:1.1;font-weight:700;color:#fff}
.svc-cp-license-result span{font:600 13px 'JetBrains Mono',monospace}
.svc-cp-license-result p:last-child{margin:8px 0 0;font-size:13px;line-height:1.75}
.svc-cp-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.svc-cp-tiers li{display:grid;gap:2px;padding:12px;border:1px solid #c8d6c5;border-radius:10px;background:#f8faf6}
.svc-cp-tiers li strong{font-size:15px}
.svc-cp-tiers li span{font:11px 'JetBrains Mono',monospace;color:#677564}
.svc-cp-tiers li.is-selected{border-color:var(--x-green);background:var(--x-pale);box-shadow:inset 0 0 0 1px var(--x-green)}

/* Management models (#service-comparison) */
.svc-cp-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc-cp-model{padding:24px;border:1px solid var(--x-line);border-radius:16px;background:#fff}
.svc-cp-model.is-current{background:var(--x-pale);border-color:var(--x-edge)}
.svc-page .svc-cp-model h3{margin:6px 0 16px;font-size:19px}
.svc-cp-flow{display:grid;gap:18px;margin:0 0 16px;padding:0;list-style:none}
.svc-cp-flow li{position:relative;padding:11px 12px;border:1px solid #c8d6c5;background:#fff;font:600 12px/1.4 'JetBrains Mono',monospace;color:#1d2f22}
.svc-cp-flow li:last-child{background:var(--x-green);border-color:var(--x-green);color:#fff}
.svc-cp-flow li+li::before{content:'↓';position:absolute;top:-17px;left:50%;transform:translateX(-50%);color:#618669;font-family:var(--sans,'Inter',sans-serif);font-weight:700}
.svc-cp-model>p:last-child{margin:0;font-size:13px;line-height:1.8;color:var(--x-muted)}

/* Resource components (#service-resources) */
.svc-cp-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc-cp-res-card{padding:22px;border:1px solid var(--x-line);border-radius:16px;background:#fff}
.svc-page .svc-cp-res-card h3{margin:0 0 14px;font-size:18px}
.svc-cp-res-frame{padding:14px;border:2px solid var(--x-green);border-radius:10px}
.svc-cp-res-frame ul{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.svc-cp-res-frame li{display:grid;align-items:center;min-height:54px;padding:8px 10px;border-radius:6px;font-size:12px;font-weight:600;color:#1d2f22}
.svc-cp-res-frame .is-0{background:#cfe5d0}
.svc-cp-res-frame .is-1{background:#dcecd9}
.svc-cp-res-frame .is-2{background:#e7f1e3}
.svc-cp-res-frame .is-3{background:#f0f6ed;border:1px dashed #b9d0b1}
.svc-cp-res-card>p{margin:14px 0 0;font-size:12px;line-height:1.8;color:#6a7569}

/* Transfer map (#cpanel-transfer) */
.svc-cp-stages{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:26px;margin:0;padding:0;list-style:none}
.svc-cp-stage{position:relative;padding:22px;border:1px solid var(--x-line);border-radius:14px;background:#fff}
.svc-cp-stage.is-live{background:var(--x-green);border-color:var(--x-green);color:#e2efdc}
.svc-cp-stage.is-live .svc-x-label{color:#9fd4ab}
.svc-cp-stage.is-live h3{color:#fff}
.svc-cp-stage.is-live .svc-x-tags li{background:transparent;border-color:rgba(255,255,255,.3);color:#e2efdc}
.svc-cp-stage-arrow{position:absolute;left:-20px;top:50%;transform:translateY(-50%);color:#618669;font-weight:700}
.svc-page .svc-cp-stage h3{margin:8px 0 8px;font-size:18px}
.svc-cp-stage p:not(.svc-x-label){margin:0;font-size:13px;line-height:1.8;color:var(--x-muted)}
.svc-cp-source small{display:block;margin-top:12px;font:600 10px 'JetBrains Mono',monospace;color:#677564}
.svc-cp-source+.svc-cp-source{margin-top:16px;padding-top:16px;border-top:1px solid #e0e8dc}
[data-picker].is-ready .svc-cp-source+.svc-cp-source{margin-top:0;padding-top:0;border-top:0}

@media(max-width:1000px){
.svc-cp-topology{grid-template-columns:1fr;gap:22px}
.svc-cp-models,.svc-cp-res{grid-template-columns:1fr}
.svc-cp-license{grid-template-columns:1fr}
.svc-cp-license-result{grid-row:auto}
}
@media(max-width:760px){
.svc-cp-topology{padding:20px}
.svc-cp-map{padding:16px}
.svc-cp-whm{flex-direction:column;align-items:flex-start}
.svc-cp-whm span{text-align:left}
.svc-cp-wires{display:none}
.svc-cp-accounts{grid-template-columns:1fr;margin-top:12px}
.is-single .svc-cp-domains,.is-single .svc-cp-tools{grid-template-columns:1fr 1fr}
.svc-cp-license{padding:20px}
.svc-cp-tiers{grid-template-columns:1fr 1fr}
.svc-cp-stages{grid-template-columns:1fr;gap:28px}
.svc-cp-stage-arrow{left:50%;top:-24px;transform:translateX(-50%) rotate(90deg)}
}