/* * Palette: design-system/tokens.css (Elon mono). * Page must set data-theme="light" on and load tokens before this file. * Local fallbacks only if tokens.css missing (offline file open). */ :root{ --fog-yellow: var(--mdc-brand, #0A0A0A); --fog-yellow-hover: var(--mdc-brand-hover, #1A1A1A); --fog-yellow-pressed:var(--mdc-brand-pressed, #000000); --fog-yellow-soft: var(--mdc-brand-soft, rgba(0,0,0,0.06)); --fog-yellow-glow: var(--mdc-brand-glow, rgba(0,0,0,0.10)); /* Label on brand fill — must contrast brand (light theme: white on black) */ --fog-on-brand: var(--mdc-brand-ink, #FFFFFF); --fog-on-yellow: var(--mdc-brand-ink, #FFFFFF); --fog-black: #0A0A0A; --fog-ink: var(--mdc-ink-primary, #0A0A0A); --fog-ink-2: var(--mdc-ink-secondary, #1A1A1A); --fog-ink-3: var(--mdc-ink-tertiary, #525252); --fog-ink-4: var(--mdc-ink-muted, #737373); --fog-surface-light: #FFFFFF; --fog-surface-50: #FAFAFA; --fog-surface-100: #F4F4F4; --fog-surface-200: #E8E8E8; --fog-line: #E0E0E0; --fog-line-strong: #C8C8C8; --fog-ease: var(--mdc-ease, linear); --blue: #1F3A8A; --black: var(--fog-ink); --green: var(--mdc-ok, #22C55E); --red: var(--mdc-critical, #EF4444); --fog-warn-amber: var(--mdc-warn, #EAB308); --hl: var(--fog-yellow-soft); --bd: var(--fog-line); --bg: var(--fog-surface-50); --hdr: var(--fog-black); --sub: var(--fog-surface-200); } *{box-sizing:border-box} body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; color: var(--fog-ink); margin: 0; padding: 18px; background: var(--fog-surface-light); font-feature-settings: 'cv11', 'ss01', 'tnum'; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } body.lang-en .zh-only{display:none} body.lang-zh .en-only{display:none} /* ===== Fog hero strip ===== */ .fog-hero{ background: var(--fog-black); color: #FFFFFF; margin: -18px -18px 24px; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; } /* Hero glow retired (mono aesthetic — no brand orbs). */ .fog-hero::after{ display: none; } .fog-hero-inner{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1600px; margin: 0 auto; } .fog-hero-brand{ display: flex; align-items: center; gap: 14px; } .fog-hero-logo{ height: 32px; width: auto; display: block; } /* .fog-hero-titles / .fog-hero-title / .fog-hero-version / .fog-hero-sub removed 2026-07-15 — wizard hero now shows logo only (spec §3.3) */ /* ===== Lang switch — Fog pill style ===== */ .lang-switch{ position: static; box-shadow: none; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 2px; padding: 3px; display: flex; gap: 2px; } .lang-switch button{ border: none; background: transparent; font-family: inherit; font-size: 11px; padding: 6px 14px; border-radius: 2px; cursor: pointer; color: rgba(255,255,255,0.7); font-weight: 600; transition: background var(--mdc-duration, 120ms) var(--fog-ease), color var(--mdc-duration, 120ms) var(--fog-ease); } .lang-switch button.active{ background: var(--fog-yellow); color: var(--fog-on-brand); } /* Dark hero chrome: force white fill so active pill doesn't vanish into bar */ .fog-hero .lang-switch button.active{ background: #FFFFFF; color: #000000; } .lang-switch button:hover:not(.active){ background: rgba(255,255,255,0.12); color: #FFFFFF; } h2{ font-size: 13px; font-weight: 600; color: #FFFFFF; background: var(--fog-black); padding: 10px 14px; margin: 28px 0 0; border-radius: 8px 8px 0 0; border: 1px solid var(--fog-black); border-bottom: none; letter-spacing: 0.01em; display: flex; align-items: center; gap: 10px; } h2 .zone-chip{ display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fog-on-brand); } /* Three-zone color coding — chip colors distinguish zone, header always black */ h2.zone-input .zone-chip{ background: var(--fog-yellow); } h2.zone-output .zone-chip{ background: #6FE5A1; color: #003B1A; } h2.zone-tripartite .zone-chip{ background: #C9A4F0; color: #2A0F4F; } table{ border-collapse: separate; border-spacing: 0; width: 100%; background: var(--fog-surface-50); table-layout: fixed; font-size: 12px; border: 1px solid var(--fog-line); border-radius: 0 0 8px 8px; border-top: none; overflow: hidden; } th, td{ border-right: 1px solid var(--fog-line); border-bottom: 1px solid var(--fog-line); padding: 6px 10px; text-align: right; vertical-align: middle; line-height: 1.4; } th:last-child, td:last-child{ border-right: none; } tr:last-child td{ border-bottom: none; } th:first-child, td:first-child{ text-align: left; } thead th{ background: var(--fog-surface-200); font-weight: 600; color: var(--fog-ink); font-size: 11px; letter-spacing: 0.02em; text-transform: none; padding: 8px 10px; } tbody tr:hover td{ background: var(--fog-surface-100); transition: background 0.15s var(--fog-ease); } tbody tr.section td{ background: #F0F0F0; font-weight: 600; text-align: left; color: var(--fog-ink); border-top: 1px solid var(--fog-line-strong); } tbody tr.subtotal td{ background: #F5F5F5; font-weight: 600; border-top: 1px solid var(--fog-line-strong); } tbody tr.total td{ background: var(--fog-yellow-soft); font-weight: 700; border-top: 2px solid var(--fog-yellow); color: var(--fog-ink); } tbody tr.kpi td{ background: #EAFBF1; font-weight: 700; border-top: 2px solid var(--green); color: var(--fog-ink); } tbody tr.kpi td:first-child{ border-left: 4px solid var(--fog-yellow); padding-left: 14px; } input.in, select.in{ width: 100%; border: 1px solid var(--fog-line); border-radius: 4px; padding: 4px 6px; text-align: right; color: var(--blue); font-weight: 600; background: #FFFFFF; font-family: inherit; font-size: 12px; transition: all 0.15s var(--fog-ease); } select.in{ text-align: left; } input.in:hover, select.in:hover{ border-color: var(--fog-line-strong); } input.in:focus, select.in:focus{ outline: none; border-color: var(--fog-yellow); background: #FFFEF5; box-shadow: 0 0 0 3px var(--fog-yellow-glow); } .calc{color:var(--fog-ink);font-variant-numeric:tabular-nums} .crosssheet{color:var(--green)} .neg{color:var(--red)} .pos{color:var(--green)} .keynote{ background: var(--fog-yellow-soft); border-bottom: 2px solid var(--fog-yellow) !important; } tr.y1-only td{ background: repeating-linear-gradient( 45deg, rgba(253, 217, 25, 0.10) 0, rgba(253, 217, 25, 0.10) 6px, rgba(253, 217, 25, 0.20) 6px, rgba(253, 217, 25, 0.20) 12px ); } tr.y1-only td:first-child{ font-weight: 600; background: repeating-linear-gradient( 45deg, rgba(253, 217, 25, 0.10) 0, rgba(253, 217, 25, 0.10) 6px, rgba(253, 217, 25, 0.20) 6px, rgba(253, 217, 25, 0.20) 12px ); } tr.y1-only td.calc{ color: var(--fog-ink); } .notebox{ background: #FFFEF5; border: 1px solid var(--fog-yellow); border-left: 4px solid var(--fog-yellow); padding: 10px 14px; border-radius: 6px; font-size: 11px; margin-top: 12px; line-height: 1.6; color: var(--fog-ink); } .notebox b{ color: var(--fog-black); } .tripartite-divider{ background: #FAF5FF; border-left: 4px solid #5A2A8A; padding: 12px 16px; margin: 20px 0 0; border-radius: 6px; font-size: 12px; color: #3D1A60; line-height: 1.6; } .tripartite-divider b{ color: #2A0F4F; } .formula-info{ display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--fog-ink-3); background: #FFFFFF; color: var(--fog-ink-3); font-size: 10px; font-style: italic; font-weight: 700; cursor: pointer; margin-left: 6px; vertical-align: 1px; user-select: none; font-family: Georgia, 'Times New Roman', serif; line-height: 1; padding: 0; transition: all 0.15s var(--fog-ease); } .formula-info:hover{ background: var(--fog-yellow); border-color: var(--fog-yellow); color: var(--fog-on-brand); } .formula-popover{ display: none; position: fixed; z-index: 9999; max-width: 380px; min-width: 200px; padding: 10px 12px; background: var(--fog-black); border: 1px solid var(--fog-yellow); border-radius: 6px; font-size: 12px; line-height: 1.5; color: #FFFFFF; font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace; white-space: pre-wrap; word-break: break-word; } .formula-popover.show{ display: block; } .formula-popover::before{ content: '公式 / Formula'; display: block; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 700; color: var(--fog-yellow); margin-bottom: 6px; letter-spacing: 0.05em; text-transform: uppercase; } /* ===== Sticky first column + thead for wide 6+col tables ===== */ th:first-child, td:first-child{ position: sticky; left: 0; background: var(--fog-surface-50); z-index: 2; } thead th{ position: sticky; top: 0; z-index: 3; background: var(--fog-surface-200); box-shadow: 0 1px 0 var(--fog-line); } tbody tr.section td:first-child{ background: #F0F0F0; } tbody tr.subtotal td:first-child{ background: #F5F5F5; } tbody tr.total td:first-child{ background: #FFF7C8; } tbody tr.kpi td:first-child{ background: #EAFBF1; } tbody tr:hover td:first-child{ background: var(--fog-surface-100); } /* ===== Section 8/9 PL: collapsible group headers (Y1-Yn fold/unfold) ===== */ tr.pl-toggle{ cursor: pointer; user-select: none; transition: background 0.15s var(--fog-ease); } tr.pl-toggle td{ cursor: pointer; } tr.pl-toggle:hover td{ background: var(--fog-surface-100) !important; } tr.pl-toggle .pl-caret{ display: inline-block; font-size: 9px; margin-right: 6px; color: var(--fog-ink-4); transition: transform 0.15s var(--fog-ease); vertical-align: 1px; } tr.pl-toggle.collapsed .pl-caret{ transform: rotate(-90deg); } tr.pl-toggle .pl-toggle-hint{ font-size: 10px; font-weight: 400; color: var(--fog-ink-4); margin-left: 4px; } tr.pl-summary td{ background: #FAFAF0 !important; font-style: italic; color: var(--fog-ink-3); padding-left: 18px; font-size: 11px; font-weight: 500; } tr.pl-summary td.calc{ font-variant-numeric: tabular-nums; } tr.pl-summary td.calc.neg{ color: var(--red); } tr.pl-summary td.calc.pos{ color: var(--green); } tr.pl-summary:hover td{ background: #F5F5E8 !important; } .legend{ font-size: 11px; margin: 10px 0 0; color: var(--fog-ink-2); } .legend span{ display: inline-block; margin-right: 16px; } .legend i{ display: inline-block; width: 10px; height: 10px; border: 1px solid var(--fog-line-strong); vertical-align: middle; margin-right: 5px; border-radius: 2px; } .meta{ display: flex; gap: 20px; flex-wrap: wrap; margin: 10px 0 16px; font-size: 11px; color: var(--fog-ink-2); } .meta b{ color: var(--fog-ink); } .col-hdr-loc{ background: var(--fog-black); color: #FFFFFF; } th.cat-dc45, th.cat-ac45{ text-align: center; font-size: 12px; padding: 9px 4px; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; } th.cat-dc45{ background: var(--fog-black); color: #FFFFFF; border-bottom: 3px solid var(--fog-yellow); } th.cat-ac45{ background: var(--fog-black); color: #FFFFFF; border-bottom: 3px solid #6FE5A1; } .sub{font-size:11px;color:var(--fog-ink-3);margin-bottom:6px} .footer{ font-size: 10px; color: var(--fog-ink-4); margin-top: 32px; border-top: 1px solid var(--fog-line); padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .footer::before{ content: '© Modular DataCenter Inc.'; font-weight: 600; color: var(--fog-ink-3); } /* ============ Wizard layout ============ */ .fog-wiz-step { display: none; } .fog-wiz-step--active { display: block; } .fog-wiz-container { max-width: 880px; margin: 32px auto; padding: 0 24px; } .fog-wiz-container--wide { max-width: 1280px; } /* ============ Progress dots ============ */ .fog-wiz-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; } .fog-wiz-progress-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fog-surface-100); color: var(--fog-ink-3); font-size: 12px; font-weight: 600; border: 1px solid var(--fog-line); } .fog-wiz-progress-dot--active { background: var(--fog-yellow); color: var(--fog-on-brand); border-color: var(--fog-yellow); } .fog-wiz-progress-dot--done { background: var(--fog-ink); color: #fff; border-color: var(--fog-ink); } /* ============ Headings ============ */ .fog-wiz-h2 { font-size: 18px; font-weight: 700; color: var(--fog-ink); margin: 0 0 16px; } /* ============ Role / Device / Location cards ============ */ .fog-wiz-role-grid, .fog-wiz-device-grid, .fog-wiz-loc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .fog-wiz-role-card, .fog-wiz-device-card, .fog-wiz-loc-card { background: var(--fog-surface-light); border: 1px solid var(--fog-line); border-radius: 8px; padding: 16px; text-align: left; cursor: pointer; font-family: inherit; font-size: 13px; transition: border-color 0.15s var(--fog-ease), background 0.15s var(--fog-ease); } .fog-wiz-role-card:hover:not(:disabled), .fog-wiz-device-card:hover, .fog-wiz-loc-card:hover { border-color: var(--fog-yellow); background: var(--fog-yellow-soft); } .fog-wiz-role-card:disabled { opacity: 0.5; cursor: not-allowed; } .fog-wiz-role-card[data-selected="true"], .fog-wiz-device-card[data-selected="true"], .fog-wiz-loc-card[data-selected="true"] { border-color: var(--fog-yellow); background: var(--fog-yellow-soft); box-shadow: inset 0 0 0 1px var(--fog-yellow); } .fog-wiz-role-icon { font-size: 24px; margin-bottom: 8px; } .fog-wiz-role-title, .fog-wiz-device-name { font-weight: 600; color: var(--fog-ink); margin-bottom: 4px; } .fog-wiz-role-desc, .fog-wiz-device-sub { font-size: 12px; color: var(--fog-ink-3); } /* ============ Buttons ============ */ .fog-wiz-btn { font-family: inherit; font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 6px; cursor: pointer; border: 1px solid var(--fog-line); background: var(--fog-surface-light); color: var(--fog-ink); transition: background 0.15s var(--fog-ease), border-color 0.15s var(--fog-ease); } .fog-wiz-btn:hover:not(:disabled) { background: var(--fog-surface-100); } .fog-wiz-btn:disabled { opacity: 0.4; cursor: not-allowed; } .fog-wiz-btn--primary { background: var(--fog-yellow); border-color: var(--fog-yellow); color: var(--fog-on-brand); font-weight: 600; } .fog-wiz-btn--primary:hover:not(:disabled) { background: var(--fog-yellow-hover); border-color: var(--fog-yellow-hover); color: var(--fog-on-brand); } .fog-wiz-btn--ghost { background: transparent; } .fog-wiz-nav { display: flex; justify-content: space-between; margin-top: 32px; } /* ============ Toolbar / Context chip ============ */ .fog-wiz-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .fog-wiz-context-chip { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 12px; background: var(--fog-ink); color: #fff; } /* ============ KPI cards ============ */ .fog-wiz-kpi-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 24px; } .fog-wiz-kpi-card { background: var(--fog-surface-light); border: 1px solid var(--fog-line); border-left: 3px solid var(--fog-yellow); border-radius: 6px; padding: 14px 16px; } .fog-wiz-kpi-label { font-size: 11px; color: var(--fog-ink-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .fog-wiz-kpi-value { font-size: 20px; font-weight: 700; color: var(--fog-ink); font-variant-numeric: tabular-nums; } .fog-wiz-kpi-card--green { border-left-color: var(--green); } .fog-wiz-kpi-card--green .fog-wiz-kpi-value { color: var(--green); } .fog-wiz-kpi-card--yellow { border-left-color: var(--fog-warn-amber); } .fog-wiz-kpi-card--yellow .fog-wiz-kpi-value { color: var(--fog-warn-amber); } .fog-wiz-kpi-card--red { border-left-color: var(--red); } .fog-wiz-kpi-card--red .fog-wiz-kpi-value { color: var(--red); } /* === v4 Change 1: tripartite role tabs === */ .fog-wiz-role-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--fog-line); } .fog-wiz-role-tab { background: none; border: none; padding: 12px 20px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--fog-ink-3); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.15s var(--fog-ease), border-color 0.15s var(--fog-ease); } .fog-wiz-role-tab:hover { color: var(--fog-ink); } .fog-wiz-role-tab--active { color: var(--fog-ink); border-bottom-color: var(--fog-yellow); } /* === v4 Change 6: multi-chart grid === */ .fog-wiz-chart-grid { display: grid; gap: 16px; grid-template-columns: 1fr; } .fog-wiz-chart-grid.fog-wiz-chart-grid--2col { grid-template-columns: 1fr 1fr; } @media (max-width: 1000px){ .fog-wiz-chart-grid--2col { grid-template-columns: 1fr; } } .fog-wiz-chart-card { background: var(--fog-surface-50); border: 1px solid var(--fog-line); border-radius: 8px; padding: 14px 16px; } .fog-wiz-chart-card .fog-wiz-chart { aspect-ratio: 16 / 7; min-height: 200px; max-height: 280px; } .fog-wiz-chart-card .fog-wiz-chart-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; } .fog-wiz-chart-card .fog-wiz-chart-legend { font-size: 10px; margin-bottom: 8px; } .fog-wiz-chart-card .fog-wiz-chart-note { font-size: 10px; color: var(--fog-ink-4); margin-top: 6px; font-style: italic; } /* ============ Tabs ============ */ .fog-wiz-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fog-line); margin-bottom: 0; } .fog-wiz-tab { background: none; border: none; padding: 8px 16px; font-family: inherit; font-size: 13px; color: var(--fog-ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .fog-wiz-tab--active { color: var(--fog-ink); font-weight: 600; border-bottom-color: var(--fog-yellow); } .fog-wiz-tab-panel { display: none; padding: 16px 0; } .fog-wiz-tab-panel--active { display: block; } .fog-wiz-mirror-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .fog-wiz-mirror-table th, .fog-wiz-mirror-table td { padding: 6px 12px; border-bottom: 1px solid var(--fog-line); text-align: left; } .fog-wiz-mirror-table td:last-child, .fog-wiz-mirror-table th:last-child { text-align: right; } .fog-wiz-mirror-table thead { background: var(--fog-surface-200); } /* ============ Sensitivity sliders ============ */ .fog-wiz-sensitivity { margin-top: 32px; padding: 20px; background: var(--fog-surface-50); border-radius: 8px; } .fog-wiz-sensitivity-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } /* Pin the sensitivity panel to high contrast (light bg + dark heading) so the title is never invisible regardless of any outer theme overrides. */ #fog-wiz-root .fog-wiz-sensitivity { background: var(--fog-surface-50); color: var(--fog-ink); } #fog-wiz-root .fog-wiz-sensitivity-header h2, #fog-wiz-root .fog-wiz-sensitivity .fog-wiz-h2 { color: var(--fog-ink); background: transparent; } .fog-wiz-slider-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .fog-wiz-slider-row { background: var(--fog-surface-light); border: 1px solid var(--fog-line); padding: 12px 14px; border-radius: 6px; } .fog-wiz-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .fog-wiz-slider-label { font-size: 12px; font-weight: 600; color: var(--fog-ink); } .fog-wiz-slider-readout { font-size: 13px; font-weight: 600; color: var(--fog-ink); font-variant-numeric: tabular-nums; } .fog-wiz-slider { width: 100%; } .fog-wiz-slider-base { font-size: 10px; color: var(--fog-ink-4); margin-top: 6px; } /* ============ Print ============ */ @media print { #fog-wiz-root .fog-wiz-progress, #fog-wiz-root .fog-wiz-toolbar, #fog-wiz-root .fog-wiz-sensitivity, /* ponytail: .fog-wiz-escape removed — Advanced entry point hidden per product decision */ #fog-wiz-root .fog-wiz-nav, #fog-wiz-root .fog-wiz-tabs { display: none !important; } #fog-wiz-root .fog-wiz-tab-panel { display: block !important; } } /* ============ v2 Change 1+2: Role primary card (kept) ============ */ .fog-wiz-role-primary { margin-bottom: 32px; } .fog-wiz-role-card--primary { width: 100%; display: flex; align-items: center; gap: 20px; padding: 24px 28px; border: 2px solid var(--fog-yellow); background: var(--fog-yellow-soft); } .fog-wiz-role-card--primary:hover { background: var(--fog-yellow-glow); } .fog-wiz-role-icon-lg { font-size: 40px; flex-shrink: 0; } .fog-wiz-role-body { flex: 1; text-align: left; } .fog-wiz-role-body .fog-wiz-role-title { font-size: 16px; } .fog-wiz-role-cta { font-size: 13px; font-weight: 600; color: var(--fog-on-brand); padding: 8px 16px; background: var(--fog-yellow); border-radius: 2px; flex-shrink: 0; } /* v3 Change 6.1: 3 role cards grid (formerly soon-grid, now generic) */ .fog-wiz-role-soon-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* v2 Coming Soon pill — still used by v2 location "Soon" cities */ .fog-wiz-coming-pill { position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 8px; background: var(--fog-ink-3); color: #fff; } /* ============ v2 Change 3: GPU model cards ============ */ .fog-wiz-gpu-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .fog-wiz-gpu-card { background: var(--fog-surface-light); border: 1px solid var(--fog-line); border-radius: 8px; padding: 16px; text-align: left; cursor: pointer; font-family: inherit; font-size: 13px; transition: border-color 0.15s var(--fog-ease), background 0.15s var(--fog-ease); } .fog-wiz-gpu-card:hover { border-color: var(--fog-yellow); background: var(--fog-yellow-soft); } .fog-wiz-gpu-card[data-selected="true"] { border-color: var(--fog-yellow); background: var(--fog-yellow-soft); box-shadow: inset 0 0 0 1px var(--fog-yellow); } .fog-wiz-gpu-name { font-weight: 600; color: var(--fog-ink); margin-bottom: 4px; font-size: 14px; } .fog-wiz-gpu-sub { font-size: 11px; color: var(--fog-ink-3); line-height: 1.4; } /* ============ v2 Change 4: Location flag + soon ============ */ .fog-wiz-loc-card { display: flex; align-items: center; gap: 12px; position: relative; } .fog-wiz-loc-flag { font-size: 28px; line-height: 1; } .fog-wiz-loc-name { font-weight: 600; color: var(--fog-ink); font-size: 13px; } .fog-wiz-loc-card--soon { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ============ v3 Change 1: Chart panel — wide top ============ */ .fog-wiz-chart-panel { background: var(--fog-surface-50); border: 1px solid var(--fog-line); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; } .fog-wiz-chart-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; } .fog-wiz-chart-title { font-size: 14px; font-weight: 600; color: var(--fog-ink); } .fog-wiz-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--fog-ink-3); } .fog-wiz-chart-leg { display: inline-flex; align-items: center; gap: 5px; } .fog-wiz-chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .fog-wiz-chart-leg--capex .fog-wiz-chart-swatch { background: #C2185B; } .fog-wiz-chart-leg--fcfe .fog-wiz-chart-swatch { background: #1F3A8A; } .fog-wiz-chart-leg--cum .fog-wiz-chart-swatch { background: var(--fog-yellow); border: 1px solid var(--fog-ink); } .fog-wiz-chart { width: 100%; } .fog-wiz-chart--wide { aspect-ratio: 16 / 5; min-height: 220px; max-height: 320px; } .fog-wiz-chart-note { font-size: 10px; color: var(--fog-ink-4); margin-top: 6px; text-align: right; font-style: italic; } /* ============ v3 Change 1: Table panel — full width below ============ */ .fog-wiz-table-panel { margin-bottom: 28px; } /* ============ v3 Change 3: Qty selector ============ */ .fog-wiz-qty-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--fog-surface-50); border: 1px solid var(--fog-line); border-radius: 8px; } .fog-wiz-qty-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fog-line); background: #fff; font-size: 20px; font-weight: 600; color: var(--fog-ink); cursor: pointer; display: grid; place-items: center; transition: background 0.15s var(--fog-ease), border-color 0.15s var(--fog-ease); } .fog-wiz-qty-btn:hover:not(:disabled) { background: var(--fog-yellow-soft); border-color: var(--fog-yellow); } .fog-wiz-qty-btn:disabled { opacity: 0.3; cursor: not-allowed; } .fog-wiz-qty-display { min-width: 48px; text-align: center; font-size: 20px; font-weight: 700; color: var(--fog-ink); font-variant-numeric: tabular-nums; } .fog-wiz-qty-note { flex: 1; font-size: 11px; color: var(--fog-ink-3); line-height: 1.4; } /* ============ v3 Change 4: Cool icon in context chip ============ */ .fog-wiz-context-chip { display: inline-flex; align-items: center; gap: 6px; } .fog-wiz-cool-icon { width: 12px; height: 12px; color: var(--fog-yellow); vertical-align: middle; } /* ============ v3 Change 5: IT Power / Facility Power info cards ============ */ .fog-wiz-info-strip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 20px; } .fog-wiz-info-card { background: var(--fog-surface-light); border: 1px solid var(--fog-line); border-left: 3px solid var(--fog-ink-3); border-radius: 6px; padding: 12px 14px; } .fog-wiz-info-label { font-size: 11px; color: var(--fog-ink-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .fog-wiz-info-value { font-size: 18px; font-weight: 700; color: var(--fog-ink); font-variant-numeric: tabular-nums; } .fog-wiz-info-sub { font-size: 10px; color: var(--fog-ink-4); margin-top: 2px; } @media print{ body{ padding: 8px; background: #FFFFFF; } .fog-hero{ margin: 0 0 12px; background: #FFFFFF; color: var(--fog-ink); border-bottom: 2px solid var(--fog-ink); padding: 8px 0; } .fog-hero::after{ display: none; } .lang-switch{ display: none; } h2{ background: #FFFFFF !important; color: var(--fog-ink) !important; border: 1px solid var(--fog-ink); border-bottom: 2px solid var(--fog-ink); break-inside: avoid; } h2 .zone-chip{ background: #FFFFFF !important; color: var(--fog-ink) !important; border: 1px solid var(--fog-ink); } table{ break-inside: avoid; } thead{ display: table-header-group; } tr{ break-inside: avoid; } input.in, select.in{ border: none; color: #000; font-weight: 400; background: transparent; box-shadow: none; } tbody tr.kpi td{ background: #FFFFFF !important; border-top: 2px solid #000; } tbody tr.kpi td:first-child{ border-left: 4px solid #000; } tbody tr.total td{ background: #FFFFFF !important; border-top: 2px solid #000; } tbody tr.section td{ background: #F5F5F5 !important; } tr.y1-only td{ background: #FAFAFA !important; } .notebox{ background: #FFFFFF; border: 1px solid #000; border-left: 4px solid #000; } .tripartite-divider{ background: #FFFFFF; border-left: 4px solid #000; color: #000; } .formula-popover{ display: none !important; } tbody tr:hover td{ background: transparent !important; } } /* === v5 Change 2: mirror table section collapse === */ .fog-wiz-mirror-table tr.fog-wiz-section-toggle td:first-child { font-weight: 600; color: var(--fog-ink); background: var(--fog-surface-100); user-select: none; } .fog-wiz-mirror-table tr.fog-wiz-section-toggle:hover td:first-child { background: var(--fog-yellow-soft); } .fog-wiz-section-chevron { display: inline-block; width: 14px; color: var(--fog-ink-3); font-size: 10px; transition: color 0.15s var(--fog-ease); } .fog-wiz-mirror-table tr.fog-wiz-section-toggle:hover .fog-wiz-section-chevron { color: var(--fog-ink); } /* === v8: formula column === */ .fog-wiz-mirror-table--3col th, .fog-wiz-mirror-table--3col td { padding: 6px 12px; } .fog-wiz-mirror-table--3col th:nth-child(1), .fog-wiz-mirror-table--3col td:nth-child(1) { width: 40%; } .fog-wiz-mirror-table--3col th:nth-child(2), .fog-wiz-mirror-table--3col td:nth-child(2) { width: 20%; text-align: right; } .fog-wiz-mirror-table--3col th:nth-child(3), .fog-wiz-mirror-table--3col td:nth-child(3) { width: 40%; } .fog-wiz-formula-col { text-align: left !important; font-weight: 600; color: var(--fog-ink-3); font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; } .fog-wiz-formula-cell { font-size: 11px; color: var(--fog-ink-3); font-family: 'Inter', sans-serif; font-variant-numeric: normal; line-height: 1.4; border-left: 1px dashed var(--fog-line); } .fog-wiz-formula-cell:empty, .fog-wiz-formula-cell:contains('—') { color: var(--fog-ink-4); } /* section header 行的公式列也用 dashed border 但内容空 */ .fog-wiz-mirror-table--3col tr.fog-wiz-section-toggle .fog-wiz-formula-cell { background: var(--fog-surface-100); border-left: 1px dashed var(--fog-line); } /* 窄屏 (< 900px) 隐藏公式列，避免溢出 */ @media (max-width: 900px){ .fog-wiz-mirror-table--3col th:nth-child(3), .fog-wiz-mirror-table--3col td:nth-child(3) { display: none; } .fog-wiz-mirror-table--3col th:nth-child(1), .fog-wiz-mirror-table--3col td:nth-child(1) { width: 60%; } .fog-wiz-mirror-table--3col th:nth-child(2), .fog-wiz-mirror-table--3col td:nth-child(2) { width: 40%; } }