.mg-whmcs:has(.mg-qos-simulator) .mg-native-sidebar,
.mg-whmcs:has(.mg-qos-simulator) .mg-native-breadcrumb { display: none; }
.mg-whmcs:has(.mg-qos-simulator) .primary-content { flex: 1 1 100%; max-width: 100%; }
.mg-qos-simulator { --qos-ink: var(--mg-native-ink,#1d1d1f); --qos-muted: var(--mg-native-muted,#6e6e73); --qos-line: var(--mg-native-border,#ddd); --qos-surface: var(--mg-native-surface,#f5f5f7); --qos-control: var(--mg-native-control,#fff); --qos-blue: var(--mg-native-accent,#0071e3); --qos-green: #78848e; max-width: 1180px; margin: 0 auto; padding: 24px 0 40px; color: var(--qos-ink); font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",sans-serif; -webkit-font-smoothing: antialiased; }
html[data-theme="dark"] .mg-qos-simulator { --qos-green: #a2adb8; color-scheme: dark; }
body.mg-whmcs:has(.mg-qos-simulator) { --mg-ink: var(--mg-native-ink); --mg-muted: var(--mg-native-muted); --mg-control: var(--mg-native-control); --mg-edge: var(--mg-native-border); }
body.mg-whmcs:has(.mg-qos-simulator) .mg-store-header { background: var(--mg-native-nav-surface) !important; color: var(--mg-native-ink); border-color: var(--mg-native-border); }
html[data-theme="dark"] .mg-qos-simulator .qos-profiles label.is-selected > span { background: #29292c; color: #f5f5f7; border-color: rgba(255,255,255,.12); }
.mg-qos-simulator *, .mg-qos-simulator *::before, .mg-qos-simulator *::after { box-sizing: border-box; }
.mg-qos-simulator [hidden] { display: none !important; }
.mg-qos-simulator h2 { color: var(--qos-ink); font-weight: 600; }
.qos-breadcrumb { display: flex; align-items: center; gap: 10px; margin: 0 0 34px; color: var(--qos-muted); font-size: 12px; }
.mg-qos-simulator .qos-breadcrumb a { color: var(--qos-muted); text-decoration: none; }
.qos-breadcrumb > span[aria-hidden] { opacity: .4; }
.qos-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.mg-qos-simulator .qos-hero h1 { margin: 0; font-size: clamp(32px,4vw,44px); font-weight: 600; letter-spacing: -1.5px; line-height: 1.2; }
.qos-intro { margin: 15px 0 0; color: var(--qos-muted); font-size: 16px; line-height: 1.7; }
.qos-hero-meta { flex-shrink: 0; text-align: right; padding-bottom: 2px; }
.qos-simulation-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--qos-muted); font-size: 11px; }
.qos-simulation-badge > span { width: 5px; height: 5px; border-radius: 50%; background: var(--qos-blue); }
.qos-section-nav { display: flex; justify-content: flex-end; gap: 22px; margin-top: 17px; }
.mg-qos-simulator .qos-section-nav a { color: var(--qos-ink); font-size: 13px; text-decoration: none; }
.mg-qos-simulator .qos-section-nav a:hover { color: var(--qos-blue); }
.qos-section-nav a span { margin-left: 3px; }
#qosSimulation, #qosStages { scroll-margin-top: 100px; }
.qos-workspace { display: grid; grid-template-columns: minmax(0,1fr) 272px; grid-template-areas: "profiles profiles" "chart controls" "metrics controls" "terminal controls"; gap: 22px 36px; align-items: start; }
.qos-controls, .qos-results { display: contents; }
.qos-profiles { grid-area: profiles; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 5px; border: 0; border-radius: 14px; margin: 0 0 8px; background: var(--qos-surface); }
.qos-profiles legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.qos-profiles label { position: relative; margin: 0; cursor: pointer; }
.qos-profiles input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qos-profiles label > span { display: block; padding: 14px 16px; border: 1px solid transparent; border-radius: 10px; color: var(--qos-muted); font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center; transition: background .15s,color .15s; }
.qos-profiles small { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; }
.qos-profiles label.is-selected > span { color: var(--qos-ink); background: var(--qos-control); border-color: var(--qos-line); box-shadow: 0 2px 5px rgba(0,0,0,.035); }
.qos-profiles input:focus-visible + span { outline: 2px solid var(--qos-blue); outline-offset: 2px; }
.qos-control-panel { grid-area: controls; min-width: 0; padding: 7px 0 12px 26px; border-left: 1px solid var(--qos-line); }
.mg-qos-simulator .qos-control-panel h2 { margin: 0 0 24px; font-size: 16px; letter-spacing: -.3px; line-height: 1.4; }
.mg-qos-simulator label { color: var(--qos-ink); font-size: 12px; font-weight: 400; }
.qos-bandwidth-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qos-bandwidth-inputs > label { margin: 0; }
.qos-bandwidth-inputs > label > span:not(.qos-unit-input) { color: var(--qos-muted); font-size: 10px; }
.qos-unit-input { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; padding: 13px 10px; border: 1px solid var(--qos-line); border-radius: 10px; background: var(--qos-control); }
.mg-qos-simulator .qos-unit-input input { min-width: 0; width: 100%; padding: 0; margin: 0; border: 0; outline: 0; color: var(--qos-ink); background: transparent; font: inherit; font-size: 25px; font-weight: 500; line-height: 1.2; appearance: textfield; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.qos-unit-input input::-webkit-inner-spin-button, .qos-unit-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qos-unit-input > span { font-size: 9px; color: var(--qos-muted); }
.qos-unit-input:focus-within { border-color: var(--qos-blue); box-shadow: 0 0 0 3px color-mix(in srgb,var(--qos-blue) 12%,transparent); }
.mg-qos-simulator .qos-gateway { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; font-size: 11px; line-height: 1.6; }
.qos-gateway input { accent-color: var(--qos-blue); margin: 0; }
.qos-gateway > span { padding-left: 21px; color: var(--qos-muted); font-size: 10px; }
.mg-qos-simulator .qos-field { display: block; margin: 27px 0 0; }
.qos-field > span { float: right; color: var(--qos-muted); font-size: 11px; }
.qos-field input[type="range"] { display: block; width: 100%; margin: 14px 0 0; accent-color: var(--qos-blue); }
.qos-field select, .qos-field input[type="number"], .qos-pulse-inputs input { display: block; width: 100%; margin-top: 9px; padding: 10px 12px; color: var(--qos-ink); background: var(--qos-control); border: 1px solid var(--qos-line); border-radius: 9px; font: inherit; }
.qos-advanced { margin-top: 26px; padding-top: 19px; border-top: 1px solid var(--qos-line); }
.qos-advanced summary { color: var(--qos-muted); font-size: 12px; cursor: pointer; }
.qos-pulse-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.qos-rule-summary { margin: 24px 0 0; color: var(--qos-muted); font-size: 11px; line-height: 1.85; }
.qos-validation { margin: 15px 0 0; color: var(--qos-blue); font-size: 11px; line-height: 1.7; }
.qos-chart-panel { grid-area: chart; min-width: 0; padding: 29px 30px 22px; border-radius: 22px; background: var(--qos-surface); }
.qos-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.qos-chart-label { margin: 0 0 8px; color: var(--qos-muted); font-size: 12px; }
.mg-qos-simulator .qos-chart-heading h2 { margin: 0; font-size: clamp(38px,4vw,52px); font-weight: 500; line-height: 1.1; letter-spacing: -1.8px; font-variant-numeric: tabular-nums; }
.qos-chart-heading h2 small { color: var(--qos-muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.qos-chart-state { padding-top: 3px; text-align: right; }
.qos-step-badge { color: var(--qos-ink); font-size: 12px; font-weight: 500; }
.qos-chart-state p { margin: 8px 0 0; color: var(--qos-muted); font-size: 11px; }
.qos-current-limits { display: flex; align-items: baseline; flex-wrap: wrap; gap: 13px 28px; margin-top: 20px; color: var(--qos-muted); font-size: 11px; }
.qos-current-limits strong { margin-left: 7px; color: var(--qos-ink); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.qos-chart-legend { display: flex; flex-wrap: wrap; gap: 19px; margin-top: 26px; color: var(--qos-muted); font-size: 10px; }
.qos-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.qos-chart-legend span::before { content: ""; width: 12px; height: 2px; background: var(--qos-blue); }
.qos-chart-legend .qos-legend-rate::before { height: 0; background: none; border-top: 2px dashed var(--qos-green); }
.qos-chart-legend .qos-legend-floor::before { height: 0; background: none; border-top: 1px dashed var(--qos-muted); }
.qos-chart-wrap { margin: 18px -6px 6px; }
#qosChart { display: block; width: 100%; height: auto; overflow: visible; }
#qosChart text { fill: var(--qos-muted); font: 12px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.qos-chart-grid { stroke: var(--qos-line); stroke-width: 1; }
.qos-chart-area { fill: color-mix(in srgb,var(--qos-blue) 6%,transparent); }
.qos-chart-cap { fill: none; stroke: var(--qos-blue); stroke-width: 2.8; }
.qos-chart-rate { fill: none; stroke: var(--qos-green); stroke-width: 1.6; stroke-dasharray: 5 4; }
.qos-chart-floor { stroke: var(--qos-muted); stroke-width: 1; stroke-dasharray: 2 6; opacity: .5; }
.qos-chart-cursor { stroke: var(--qos-ink); stroke-width: 1; stroke-dasharray: 3 5; opacity: .4; }
.qos-playback { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.mg-qos-simulator button { cursor: pointer; font: inherit; }
.qos-play-button { min-width: 100px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--mg-brand-accent,#0071e3); color: #fff; font-size: 12px !important; }
.qos-play-button:disabled { opacity: .5; cursor: default; }
.qos-reset-button { padding: 10px; border: 0; border-radius: 8px; color: var(--qos-muted); background: transparent; font-size: 12px !important; }
.qos-reset-button:hover { color: var(--qos-ink); }
.mg-qos-simulator .qos-speed { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; color: var(--qos-muted); font-size: 10px; }
.qos-speed select { padding: 5px 6px; border: 0; border-radius: 6px; color: var(--qos-ink); background: var(--qos-control); font: inherit; }
.qos-time { min-width: 90px; color: var(--qos-muted); text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }
.qos-scrub-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); }
.qos-seek { display: block; width: 100%; margin: 20px 0 15px; accent-color: var(--qos-blue); }
.qos-chart-footer { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; color: var(--qos-muted); font-size: 10px; line-height: 1.7; }
.qos-throughput-note { margin: 13px 0 0; color: var(--qos-muted); font-size: 10px; line-height: 1.7; }
.qos-milestones { grid-area: metrics; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding: 3px 0; }
.qos-milestones > div { padding: 0 20px; border-left: 1px solid var(--qos-line); }
.qos-milestones > div:first-child { padding-left: 0; border-left: 0; }
.qos-milestones > div:last-child { padding-right: 0; }
.qos-milestones span, .qos-milestones small { display: block; color: var(--qos-muted); font-size: 11px; line-height: 1.6; }
.qos-milestones strong { display: block; margin: 8px 0 5px; color: var(--qos-ink); font-size: clamp(20px,2.1vw,28px); line-height: 1.4; font-weight: 500; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.qos-terminal { grid-area: terminal; min-width: 0; border-top: 1px solid var(--qos-line); padding: 18px 0 0; }
.qos-terminal summary, .qos-detail-section summary { display: flex; align-items: center; gap: 10px; list-style: none; color: var(--qos-ink); font-size: 13px; cursor: pointer; }
.qos-terminal summary::-webkit-details-marker, .qos-detail-section summary::-webkit-details-marker { display: none; }
.qos-terminal summary::after, .qos-detail-section summary::after { content: "+"; margin-left: auto; color: var(--qos-muted); font-size: 20px; font-weight: 300; }
.qos-terminal[open] summary::after, .qos-detail-section[open] summary::after { content: "−"; }
.qos-terminal .qos-terminal-meta, .qos-detail-section summary > span:nth-child(2) { color: var(--qos-muted); font-size: 11px; }
.qos-terminal pre { height: 152px; margin: 18px 0 0; padding: 17px; border: 0; border-radius: 12px; color: var(--qos-muted); background: var(--qos-surface); font: 11px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space: pre; overflow: auto; }
.qos-stage-section { margin-top: 62px; padding-top: 38px; border-top: 1px solid var(--qos-line); }
.qos-stage-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.mg-qos-simulator .qos-stage-heading h2 { margin: 0 0 10px; font-size: 26px; letter-spacing: -.6px; }
.qos-stage-heading p { margin: 0; color: var(--qos-muted); font-size: 12px; line-height: 1.7; }
.mg-qos-simulator .qos-stage-heading > a { color: var(--qos-blue); font-size: 12px; white-space: nowrap; text-decoration: none; }
.qos-stage-table-wrap { max-width: 100%; overflow-x: auto; border-top: 1px solid var(--qos-line); }
.qos-stage-table { width: 100%; min-width: 490px; border-collapse: collapse; }
.mg-qos-simulator .qos-stage-table th, .mg-qos-simulator .qos-stage-table td { padding: 16px 18px; border: 0; border-bottom: 1px solid var(--qos-line); text-align: left; font-size: 13px; font-weight: 400; }
.mg-qos-simulator .qos-stage-table th:first-child, .mg-qos-simulator .qos-stage-table td:first-child { padding-left: 0; }
.mg-qos-simulator .qos-stage-table thead th { color: var(--qos-muted); font-size: 11px; }
.qos-stage-table strong { color: var(--qos-ink); font-weight: 500; }
.qos-stage-table small { color: var(--qos-muted); font-size: 10px; font-weight: 400; }
.qos-stage-merged { color: var(--qos-muted); }
.qos-floor-badge { display: inline-block; margin-left: 10px; color: var(--qos-blue); font-size: 10px; }
.qos-stage-note { margin: 17px 0 0; color: var(--qos-muted); font-size: 11px; line-height: 1.85; }
.qos-detail-section { margin-top: 34px; padding: 22px 0; border-top: 1px solid var(--qos-line); border-bottom: 1px solid var(--qos-line); }
.qos-event-list { max-height: 400px; overflow-y: auto; margin-top: 22px; }
.qos-event { display: grid; grid-template-columns: 75px minmax(0,1fr); gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--qos-line); font-size: 12px; }
.qos-event time { color: var(--qos-muted); font-variant-numeric: tabular-nums; }
.qos-event strong { display: block; font-weight: 500; }
.qos-event p { margin: 6px 0 0; color: var(--qos-muted); font-size: 11px; line-height: 1.8; }
.qos-event.is-current { color: var(--qos-blue); }
.qos-model-notes { margin-top: 22px; color: var(--qos-muted); font-size: 12px; line-height: 1.9; }
.qos-model-notes summary { color: var(--qos-ink); cursor: pointer; margin-bottom: 15px; }
.mg-qos-simulator .qos-back-link { display: inline-block; margin-top: 28px; color: var(--qos-blue); font-size: 12px; text-decoration: none; }
.mg-qos-simulator :is(input,select,button,summary,a):focus-visible { outline: 2px solid var(--qos-blue); outline-offset: 3px; }
@media (max-width: 1000px) { .qos-workspace { grid-template-columns: minmax(0,1fr) 245px; column-gap: 24px; } .qos-control-panel { padding-left: 20px; } .qos-chart-panel { padding: 24px 22px 19px; } .qos-time { flex-basis: 100%; } .qos-milestones > div { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 760px) { .mg-qos-simulator { padding-top: 16px; } .qos-breadcrumb { margin-bottom: 25px; } .qos-hero { display: block; margin-bottom: 26px; } .qos-hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; text-align: left; margin-top: 20px; } .qos-section-nav { margin: 0; gap: 17px; } .qos-intro { font-size: 14px; } .qos-workspace { grid-template-columns: 1fr; grid-template-areas: "profiles" "controls" "chart" "metrics" "terminal"; gap: 24px; } .qos-control-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0; border: 0; } .qos-control-panel > h2, .qos-bandwidth-inputs, .qos-gateway, .qos-advanced, .qos-rule-summary, .qos-validation { grid-column: 1 / -1; } .mg-qos-simulator .qos-control-panel > h2 { display: none; } .qos-bandwidth-inputs { gap: 20px; } .qos-control-panel > .qos-field { margin: 0; } .qos-control-panel .qos-gateway, .qos-advanced, .qos-rule-summary { margin-top: 0; } .qos-advanced { padding-top: 15px; } .qos-profiles { margin: 0; } .qos-profiles label > span { padding: 11px 5px; font-size: 11px; } .qos-profiles small { font-size: 8px; } .qos-chart-panel { padding: 22px 18px 18px; } .qos-milestones strong { font-size: 23px; } .qos-chart-legend { gap: 14px; } .qos-stage-section { margin-top: 38px; padding-top: 28px; } .qos-stage-heading { align-items: flex-start; flex-direction: column; gap: 13px; } .mg-qos-simulator .qos-stage-heading h2 { font-size: 23px; } }
@media (max-width: 420px) { .qos-profiles { grid-template-columns: 1fr 1fr; } .qos-milestones strong { font-size: 20px; } .qos-milestones span, .qos-milestones small { font-size: 10px; } .qos-terminal .qos-terminal-meta { display: none; } .qos-detail-section summary { flex-wrap: wrap; } .qos-detail-section summary > span:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .qos-profiles label > span { transition: none; } }

html[data-theme="dark"] body.mg-whmcs:has(.mg-qos-simulator) .mg-store-header { background: #111112 !important; color: #f5f5f7; }
html[data-theme="dark"] body.mg-whmcs:has(.mg-qos-simulator) .mg-store-navigation > a.nav-link,
html[data-theme="dark"] body.mg-whmcs:has(.mg-qos-simulator) .mg-store-navigation > .mg-nav-group > a.nav-link { color: #f5f5f7; }

.qos-pricing{margin-top:24px;padding-top:20px;border-top:1px solid var(--qos-line)}
.qos-pricing h3{margin:0 0 14px;font-size:12px;font-weight:500;color:var(--qos-ink)}
.qos-pricing dl{margin:0}.qos-pricing dl>div{display:flex;justify-content:space-between;gap:12px;margin:10px 0;font-size:11px;line-height:1.6}
.qos-pricing dt{font-weight:400;color:var(--qos-muted)}.qos-pricing dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qos-pricing .qos-price-total{padding-top:12px;border-top:1px solid var(--qos-line)}.qos-price-total dt,.qos-price-total dd{color:var(--qos-ink);font-weight:500}
.qos-pricing p{margin:10px 0 0;color:var(--qos-muted);font-size:10px;line-height:1.8;overflow-wrap:anywhere}