/**
 * 云服务器配置频道 channels/cloud.html
 * 与 cloud-config.css（通用表单控件）配合；本文件仅本页布局与主题覆盖。
 */
/* ── 布局（双主题共用） ── */
main.cloud-channel-page .os-select-container {
    display: flex;
    gap: 24px;
}
main.cloud-channel-page .os-select-group {
    flex: 1;
}
main.cloud-channel-page .os-select-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}
main.cloud-channel-page .config-item.is-disabled .config-slider {
    opacity: 0.45;
    pointer-events: none;
}
main.cloud-channel-page .config-item.is-disabled .config-value-input {
    opacity: 0.6;
}
main.cloud-channel-page .cloud-attr-locked-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--c-action) 0%, #fdba74 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
main.cloud-channel-page .cloud-attr-locked-input {
    cursor: default;
    opacity: 0.92;
    pointer-events: none;
}
main.cloud-channel-page .cloud-empty-tip {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.6;
}
/* ── 亮色模式 · 对比度与细节 ── */
html:not(.io-dark-mode) main.cloud-channel-page .config-section {
    background: var(--c-bg-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--s-sm);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-title {
    color: var(--c-text);
    border-bottom-color: var(--c-line);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-section-heading {
    color: var(--c-text-2);
    border-bottom-color: var(--c-line);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-item-label,
html:not(.io-dark-mode) main.cloud-channel-page .config-item--locked .config-item-label {
    color: var(--c-text);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-item-number {
    background: var(--c-action-soft);
    color: var(--c-action);
    border: 1px solid var(--c-action-muted);
    box-shadow: var(--s-xs);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-item-desc {
    color: var(--c-text-3);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-item-required {
    color: var(--c-danger);
}
html:not(.io-dark-mode) main.cloud-channel-page .slider-mark {
    color: var(--c-text-3);
    font-weight: 600;
}
html:not(.io-dark-mode) main.cloud-channel-page .config-slider {
    background: linear-gradient(
    to right,
    var(--c-action) 0%,
    var(--c-action) var(--slider-value, 3.125%),
    var(--c-bg-muted) var(--slider-value, 3.125%),
    var(--c-bg-muted) 100%
    );
}
html:not(.io-dark-mode) main.cloud-channel-page .config-slider::-webkit-slider-thumb {
    background: #fff;
    border-color: var(--c-action);
    box-shadow: 0 2px 10px rgba(var(--c-action-rgb), 0.35);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-slider::-moz-range-thumb {
    background: #fff;
    border-color: var(--c-action);
    box-shadow: 0 2px 10px rgba(var(--c-action-rgb), 0.35);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-value-input,
html:not(.io-dark-mode) main.cloud-channel-page .config-select {
    color: var(--c-text);
    background: var(--c-bg-card);
    border-color: var(--c-line-strong);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-value-input:focus,
html:not(.io-dark-mode) main.cloud-channel-page .config-select:focus {
    border-color: var(--c-action);
    box-shadow: 0 0 0 3px var(--c-action-soft);
}
html:not(.io-dark-mode) main.cloud-channel-page .os-select-group label {
    color: var(--c-text-2);
}
html:not(.io-dark-mode) main.cloud-channel-page .os-name {
    color: var(--c-text);
}
html:not(.io-dark-mode) main.cloud-channel-page .os-desc {
    color: var(--c-text-3);
}
html:not(.io-dark-mode) main.cloud-channel-page .config-summary {
    background: var(--c-bg-card);
    border-color: var(--c-line);
    box-shadow: var(--s-card);
}
html:not(.io-dark-mode) main.cloud-channel-page .summary-title {
    color: var(--c-text);
}
html:not(.io-dark-mode) main.cloud-channel-page .summary-label {
    color: var(--c-text-2);
}
html:not(.io-dark-mode) main.cloud-channel-page .summary-value {
    color: var(--c-text);
}
html:not(.io-dark-mode) main.cloud-channel-page .summary-row {
    border-bottom-color: var(--c-line);
}
html:not(.io-dark-mode) main.cloud-channel-page .summary-total {
    border-top-color: var(--c-action);
}
html:not(.io-dark-mode) main.cloud-channel-page .summary-total-label {
    color: var(--c-text);
}
html:not(.io-dark-mode) main.cloud-channel-page .summary-total-price {
    color: var(--c-action);
}
html:not(.io-dark-mode) main.cloud-channel-page .cloud-empty-tip {
    color: var(--c-text-2);
}
html:not(.io-dark-mode) main.cloud-channel-page .btn-secondary {
    background: var(--c-bg-soft);
    border-color: var(--c-line-strong);
    color: var(--c-text-2);
}
html:not(.io-dark-mode) main.cloud-channel-page .btn-secondary:hover {
    background: var(--c-bg-muted);
    color: var(--c-text);
}
/* ── 暗色模式 · 本页覆盖 ── */
html.io-dark-mode main.cloud-channel-page .config-item-label,
html.io-dark-mode main.cloud-channel-page .config-item-number,
html.io-dark-mode main.cloud-channel-page .slider-mark,
html.io-dark-mode main.cloud-channel-page .config-value-input,
html.io-dark-mode main.cloud-channel-page .config-select,
html.io-dark-mode main.cloud-channel-page .os-name,
html.io-dark-mode main.cloud-channel-page .os-desc,
html.io-dark-mode main.cloud-channel-page .config-item-desc,
html.io-dark-mode main.cloud-channel-page .config-title,
html.io-dark-mode main.cloud-channel-page .summary-label,
html.io-dark-mode main.cloud-channel-page .summary-value,
html.io-dark-mode main.cloud-channel-page .summary-title,
html.io-dark-mode main.cloud-channel-page .summary-total-label,
html.io-dark-mode main.cloud-channel-page .cloud-empty-tip {
    color: #ffffff !important;
}
html.io-dark-mode main.cloud-channel-page .cloud-empty-tip {
    opacity: 0.9;
}
html.io-dark-mode main.cloud-channel-page .config-item-required {
    color: #f87171 !important;
}
html.io-dark-mode main.cloud-channel-page .config-slider {
    background: linear-gradient(
    to right,
    var(--c-action) 0%,
    var(--c-action) var(--slider-value, 3.125%),
    #4b5563 var(--slider-value, 3.125%),
    #4b5563 100%
    ) !important;
}
html.io-dark-mode main.cloud-channel-page .config-slider::-webkit-slider-thumb {
    background: #1f2937 !important;
    border-color: var(--c-action) !important;
}
html.io-dark-mode main.cloud-channel-page .config-value-input,
html.io-dark-mode main.cloud-channel-page .config-select {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
}
html.io-dark-mode main.cloud-channel-page .os-card {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
}
html.io-dark-mode main.cloud-channel-page .os-card.selected {
    background: var(--c-action-hover) !important;
    border-color: var(--c-action) !important;
}
html.io-dark-mode main.cloud-channel-page .config-summary {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
}
html.io-dark-mode main.cloud-channel-page .os-select-group label {
    color: #ffffff !important;
}
html.io-dark-mode main.cloud-channel-page .config-item--locked .config-item-label {
    color: #ffffff !important;
}