/* ===================================================================== Theme tokens --------------------------------------------------------------------- */ :root { color-scheme: light; /* Chrome / surfaces */ --bg: #121821; --surface: #1d2634; --surface-2: #131b27; --surface-3: #2a3447; --surface-elev: rgba(29, 38, 52, 0.95); --border: #2e3a4d; --border-soft: rgba(46, 58, 77, 0.6); --border-strong: #36465c; --shadow-elev: 0 18px 38px rgba(0, 0, 0, 0.55); --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.45); --shadow-fab: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04); /* Text */ --text: #e8eef7; --text-subtle: #cfd6e4; --text-muted: #8c9bb5; --text-dim: #6f88b8; /* Accents */ --accent: #29a0ff; --accent-soft: #6fc4ff; --accent-warm: #f0a060; --accent-tint: rgba(41, 160, 255, 0.08); --accent-glow: rgba(41, 160, 255, 0.35); --danger: #d3502e; --danger-hover: #ec5e36; --danger-tint: rgba(211, 80, 46, 0.12); /* Inputs */ --input-bg: #131b27; --input-border: #2e3a4d; --input-focus: #29a0ff; /* Canvas (2D drawing) */ --canvas-bg: #0f1724; --canvas-grid: #22314a; --canvas-line: #6fc4ff; --canvas-line-preview: #9fd9ff; --canvas-line-fill-1: #33a3ff; --canvas-line-fill-2: #116bb3; --canvas-label-bg: #0b1220; --canvas-label-text-light: #ffffff; --canvas-label-text-dark: #0b1220; --canvas-arc-mark: #7ed1ff; --canvas-arc-mark-stroke: #0b1220; --canvas-variant-len: #1e6dbb; --canvas-variant-cov: #b5750a; --canvas-variant-byLen-fill: #33a3ff; --canvas-variant-byCov-fill: #f59e0b; --canvas-dashed-strong: rgba(11, 18, 32, 0.85); --canvas-dashed-soft: rgba(11, 18, 32, 0.6); --canvas-dashed-faint: rgba(11, 18, 32, 0.45); --canvas-cursor-dash: #8c9bb5; --canvas-selection-halo: rgba(255, 196, 0, 0.35); --canvas-distance-bg: #2a3447; --canvas-distance-leader: rgba(140, 155, 181, 0.8); --canvas-anchor-text: #aab2c4; /* 3D scene */ --scene-bg: #0f1724; --scene-clear: #0b1220; /* Typography */ --font-display: Inter, system-ui, sans-serif; --font-body: Inter, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --h1-weight: 600; --h1-tracking: -0.005em; --eyebrow-tracking: 0.22em; --eyebrow-weight: 500; /* Geometry */ --radius-card: 14px; --radius-panel: 12px; --radius-button: 8px; --radius-pill: 999px; /* Brand mark */ --brand-mark-color: #29a0ff; --brand-name-color: var(--text); --brand-period-color: var(--accent); --brand-mark-bg: transparent; /* Decorative */ --backdrop-blur: blur(10px) saturate(140%); --header-tint-strength: 0.08; } /* ===================================================================== Dimark presentation theme (data-theme="dimark" on ) Light, brand-aligned palette inspired by dimark.eu --------------------------------------------------------------------- */ body[data-theme="dimark"] { color-scheme: light; --bg: #faf6ef; --surface: #ffffff; --surface-2: #f5eee2; --surface-3: #ece1cd; --surface-elev: rgba(255, 255, 255, 0.96); --border: #ebe0cb; --border-soft: rgba(216, 197, 168, 0.5); --border-strong: #d2c0a0; --shadow-elev: 0 24px 60px -10px rgba(46, 33, 17, 0.22); --shadow-soft: 0 10px 26px -8px rgba(46, 33, 17, 0.16); --shadow-fab: 0 12px 28px -8px rgba(240, 99, 52, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6); --text: #161c2c; --text-subtle: #2c374f; --text-muted: #6c7588; --text-dim: #a89e8b; --accent: #f06334; --accent-soft: #fab59c; --accent-warm: #f06334; --accent-tint: rgba(240, 99, 52, 0.08); --accent-glow: rgba(240, 99, 52, 0.35); --danger: #c83e1f; --danger-hover: #e15030; --danger-tint: rgba(200, 62, 31, 0.1); --input-bg: #faf6ef; --input-border: #d8c9af; --input-focus: #f06334; --canvas-bg: #f3ecdd; --canvas-grid: #e0d3b6; --canvas-line: #161c2c; --canvas-line-preview: #f06334; --canvas-line-fill-1: #161c2c; --canvas-line-fill-2: #3a4767; --canvas-label-bg: #161c2c; --canvas-label-text-light: #faf6ef; --canvas-label-text-dark: #faf6ef; --canvas-arc-mark: #f06334; --canvas-arc-mark-stroke: #161c2c; --canvas-variant-len: #161c2c; --canvas-variant-cov: #c4631f; --canvas-variant-byLen-fill: #161c2c; --canvas-variant-byCov-fill: #f06334; --canvas-dashed-strong: rgba(22, 28, 44, 0.7); --canvas-dashed-soft: rgba(22, 28, 44, 0.4); --canvas-dashed-faint: rgba(22, 28, 44, 0.22); --canvas-cursor-dash: #a89e8b; --canvas-selection-halo: rgba(240, 99, 52, 0.25); --canvas-distance-bg: #161c2c; --canvas-distance-leader: rgba(108, 117, 136, 0.55); --canvas-anchor-text: #6c7588; --scene-bg: #eee5d0; --scene-clear: #e6dcc3; --font-display: 'DM Sans', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', 'JetBrains Mono', ui-monospace, monospace; --h1-weight: 800; --h1-tracking: -0.025em; --eyebrow-tracking: 0.32em; --eyebrow-weight: 500; --brand-mark-color: #f06334; --brand-name-color: #161c2c; --brand-period-color: #f06334; --brand-mark-bg: transparent; --backdrop-blur: blur(14px) saturate(120%); --header-tint-strength: 0; } /* ===================================================================== Base --------------------------------------------------------------------- */ html { font-family: var(--font-body); background: var(--bg); color: var(--text); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-body); transition: background-color 0.4s ease, color 0.4s ease; } .app-shell { display: flex; flex-direction: column; height: 100vh; padding: 12px; gap: 10px; } /* ===================================================================== Header & brand --------------------------------------------------------------------- */ header { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-mark-color); background: var(--brand-mark-bg); width: 30px; height: 30px; border-radius: 6px; transition: color 0.4s ease, transform 0.4s ease; } body[data-theme="dimark"] .brand-mark { transform: rotate(0deg); } .brand-wordmark { margin: 0; font-size: 1.4rem; font-weight: var(--h1-weight); letter-spacing: var(--h1-tracking); font-family: var(--font-display); color: var(--brand-name-color); transition: color 0.4s ease, font-family 0.4s ease; position: relative; display: inline-flex; align-items: baseline; white-space: nowrap; } .brand-name-default { display: inline; } .brand-name-dimark { display: none; } body[data-theme="dimark"] .brand-name-default { display: none; } body[data-theme="dimark"] .brand-name-dimark { display: inline; } .brand-period { color: var(--brand-period-color); } h1 { margin: 0; font-size: 1.4rem; } .subtitle { color: var(--text-muted); font-size: 0.85rem; } .settings-btn { background: var(--surface-3); color: var(--text-subtle); } .settings-btn:hover { background: color-mix(in srgb, var(--surface-3) 75%, var(--accent)); } body[data-theme="dimark"] .settings-btn { background: transparent; color: var(--text-subtle); border: 1px solid var(--border); } body[data-theme="dimark"] .settings-btn:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); } /* Theme toggle (presentation switch) */ .theme-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 11px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease; } .theme-toggle:hover { transform: none; color: var(--accent); border-color: var(--accent); background: var(--accent-tint); } .theme-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #ffffff; } body[data-theme="dimark"] .theme-toggle[aria-pressed="true"] { background: #f06334; color: #ffffff; border-color: #f06334; box-shadow: 0 6px 16px -4px rgba(240, 99, 52, 0.45); } .theme-toggle-mark { flex-shrink: 0; } /* ===================================================================== Layout --------------------------------------------------------------------- */ .layout { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; } .viewer-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px; min-width: 0; min-height: 0; transition: background-color 0.4s ease, border-color 0.4s ease; } .viewer-card h2 { margin: 0; font-size: 1rem; font-weight: 600; font-family: var(--font-display); color: var(--text); } /* ===================================================================== Buttons --------------------------------------------------------------------- */ button { border: none; border-radius: var(--radius-button); padding: 8px 14px; cursor: pointer; color: #fff; background: #3d79ff; transition: transform 0.15s ease, background 0.15s ease, color 0.2s ease, border-color 0.2s ease; font-size: 0.88rem; font-family: var(--font-body); } button:hover { transform: translateY(-1px); } button.primary { background: var(--accent); } button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); } button.danger { background: var(--danger); } button.danger:hover { background: var(--danger-hover); } body[data-theme="dimark"] button { background: var(--surface-3); color: var(--text); } body[data-theme="dimark"] button.primary { background: var(--accent); color: #ffffff; box-shadow: 0 6px 16px -6px rgba(240, 99, 52, 0.45); } body[data-theme="dimark"] button.primary:hover { background: color-mix(in srgb, var(--accent) 92%, black); } body[data-theme="dimark"] button.danger { background: var(--danger); color: #ffffff; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 34px; height: 34px; } /* ===================================================================== Toolbar inside viewer cards --------------------------------------------------------------------- */ .viewer-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; flex-shrink: 0; } .viewer-toolbar .hint { color: var(--text-muted); font-size: 0.78rem; margin-left: auto; } .elev-control, .cutplane-control { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-subtle); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-button); padding: 4px 8px; } .cutplane-control[hidden] { display: none; } .cutplane-control input[type="number"], .elev-control input { width: 60px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; padding: 4px 6px; color: var(--text); font-size: 0.85rem; font-family: inherit; } .elev-control input { width: 64px; } .cutplane-control input[type="number"]:focus, .elev-control input:focus { outline: none; border-color: var(--input-focus); } .cutplane-control .slice-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--text-subtle); cursor: pointer; } .cutplane-control .slice-toggle input[type="checkbox"] { accent-color: var(--accent); } .cutplane-control .model-range { color: var(--text-muted); font-size: 0.78rem; } .ground-count { color: var(--accent-warm); font-size: 0.82rem; } #pickGroundBtn.active { background: var(--accent-warm); color: var(--surface); } #pickFloorBtn { font-size: 0.78rem; padding: 4px 10px; background: var(--surface-3); color: var(--text); border-radius: 6px; } #pickFloorBtn:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface-3)); color: var(--text); } #pickFloorBtn.active { background: var(--accent); color: #ffffff; } #pickFloorBtn:disabled { opacity: 0.45; cursor: not-allowed; } .elev-control[hidden] { display: none; } .elev-control .elev-current { color: var(--text-muted); } .elev-control .elev-current strong { color: var(--text); } /* ===================================================================== Canvas wrappers --------------------------------------------------------------------- */ .canvas-wrap, #threeContainer { flex: 1; width: 100%; min-height: 0; border-radius: 10px; overflow: hidden; background: var(--canvas-bg); transition: background-color 0.4s ease; } canvas { display: block; width: 100%; height: 100%; } .info { margin-top: 8px; color: var(--canvas-anchor-text); min-height: 1.2em; font-size: 0.82rem; flex-shrink: 0; } /* ===================================================================== Palette overlay (legacy results panel) --------------------------------------------------------------------- */ .palette-overlay { position: absolute; top: 44px; right: 14px; z-index: 20; width: 320px; max-width: calc(50% - 24px); background: var(--surface-elev); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-elev); } .palette-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; background: transparent; color: var(--text); border: none; cursor: pointer; font-weight: 600; font-size: 0.95rem; font-family: var(--font-display); border-radius: var(--radius-panel); } .palette-toggle:hover { transform: none; background: color-mix(in srgb, var(--text) 4%, transparent); } .palette-toggle .chev { transition: transform 0.2s ease; } .palette-overlay.collapsed .palette-toggle .chev { transform: rotate(-90deg); } .palette-body { padding: 0 14px 14px; max-height: 55vh; overflow-y: auto; } .palette-overlay.collapsed .palette-body { display: none; } .summary { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-height: 56px; background: var(--surface-2); font-size: 0.9rem; line-height: 1.4; color: var(--text); } #segmentList { margin: 10px 0 0; padding-left: 18px; color: var(--text); } #segmentList li { margin-bottom: 4px; font-size: 0.9rem; } /* ===================================================================== Modal (settings) --------------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; } body[data-theme="dimark"] .modal-backdrop { background: rgba(22, 28, 44, 0.32); } .modal-backdrop[hidden] { display: none; } .modal { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-elev); display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow: hidden; color: var(--text); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .modal-header h2 { margin: 0; font-size: 1.05rem; font-family: var(--font-display); } .modal-close { background: transparent; color: var(--text-subtle); } .modal-close:hover { background: color-mix(in srgb, var(--text) 6%, transparent); } .modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .modal-body label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: var(--text-subtle); } .modal-body input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-button); padding: 8px 10px; color: var(--text); font-size: 0.95rem; font-family: inherit; } .modal-body input:focus { outline: none; border-color: var(--input-focus); } .modal-body small { color: var(--text-muted); font-size: 0.75rem; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; } .arc-library { border: 1px solid var(--border); border-radius: var(--radius-button); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .arc-library legend { padding: 0 6px; font-size: 0.85rem; color: var(--text-subtle); } .arc-library table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .arc-library th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 4px 6px; } .arc-library td { padding: 3px 6px; } .arc-library input { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; padding: 5px 8px; color: var(--text); font-size: 0.88rem; font-family: inherit; } .arc-library input:focus { outline: none; border-color: var(--input-focus); } .arc-library .row-remove { background: transparent; color: var(--danger); padding: 2px 8px; font-size: 1rem; line-height: 1; border-radius: 6px; } .arc-library .row-remove:hover { background: var(--danger-tint); transform: none; } .arc-library #arcLibraryAddBtn { align-self: flex-start; background: var(--surface-3); font-size: 0.82rem; padding: 6px 12px; } body[data-theme="dimark"] .arc-library #arcLibraryAddBtn { color: var(--text); } /* ===================================================================== Context menu --------------------------------------------------------------------- */ .context-menu { position: fixed; z-index: 80; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-button); padding: 4px; box-shadow: var(--shadow-elev); display: flex; flex-direction: column; min-width: 170px; } .context-menu[hidden] { display: none; } .context-menu button { background: transparent; color: var(--text); text-align: left; padding: 7px 12px; border-radius: 6px; font-size: 0.88rem; } .context-menu button:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, transparent); transform: none; } .context-menu button:disabled { color: var(--text-muted); cursor: not-allowed; } /* ===================================================================== Stats dock — "Bill of Materials" floating counter --------------------------------------------------------------------- */ .stats-dock { position: absolute; bottom: 14px; right: 14px; z-index: 25; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } .stats-dock > * { pointer-events: auto; } .stats-fab { position: relative; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 90%, white) 0%, var(--surface-2) 100%); color: var(--text-subtle); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-fab); transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .stats-fab:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); } .stats-fab[aria-expanded="true"] { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent-glow), var(--shadow-fab); } .stats-fab-icon { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); } .stats-fab-badge { position: absolute; top: -6px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--accent); color: #ffffff; font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--surface); } body[data-theme="dimark"] .stats-fab-badge { color: #ffffff; box-shadow: 0 2px 6px rgba(240, 99, 52, 0.35), 0 0 0 2px var(--bg); } .stats-fab-badge[data-empty="true"] { background: var(--surface-3); color: var(--text-muted); box-shadow: 0 0 0 2px var(--surface); } .stats-panel { width: 320px; max-width: calc(100vw - 32px); max-height: min(60vh, 520px); background: var(--surface-elev); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-elev); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: statsPanelIn 0.22s cubic-bezier(0.2, 0.8, 0.25, 1); color: var(--text); } .stats-panel[hidden] { display: none; } @keyframes statsPanelIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } .stats-panel-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--border-soft); background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) calc(var(--header-tint-strength) * 100%), transparent), transparent 60%); } .stats-panel-titles { display: flex; flex-direction: column; gap: 2px; } .stats-panel-eyebrow { font-family: var(--font-mono); font-weight: var(--eyebrow-weight); font-size: 0.66rem; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--accent-soft); } body[data-theme="dimark"] .stats-panel-eyebrow { color: var(--accent-soft); } .stats-panel-header h3 { margin: 0; font-size: 0.98rem; font-weight: var(--h1-weight); font-family: var(--font-display); color: var(--text); letter-spacing: -0.005em; } .stats-panel-close { background: transparent; color: var(--text-subtle); width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; } .stats-panel-close:hover { transform: none; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); } .stats-panel-body { padding: 4px 4px 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .stats-panel-body::-webkit-scrollbar { width: 6px; } .stats-panel-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .stats-empty { padding: 30px 18px; text-align: center; color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; } .stats-empty::before { content: '∅'; display: block; font-family: var(--font-mono); font-size: 1.6rem; color: var(--border-strong); margin-bottom: 8px; } .stats-section { padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 4px; } .stats-section + .stats-section { border-top: 1px dashed var(--border-soft); } .stats-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; padding: 0 2px; } .stats-section-name { font-family: var(--font-mono); font-weight: var(--eyebrow-weight); font-size: 0.66rem; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--text-muted); } .stats-section-count { font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; color: var(--accent-soft); letter-spacing: 0.04em; } body[data-theme="dimark"] .stats-section-count { color: var(--accent); } .stats-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .stats-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 6px; transition: background 0.15s ease; animation: statsRowIn 0.32s cubic-bezier(0.2, 0.8, 0.25, 1) backwards; } @keyframes statsRowIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } } .stats-row:hover { background: var(--accent-tint); } .stats-row-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 18px; color: var(--accent-soft); } body[data-theme="dimark"] .stats-row-icon { color: var(--text-subtle); } .stats-row-icon.arc { color: var(--accent-warm); } body[data-theme="dimark"] .stats-row-icon.arc { color: var(--accent); } .stats-row-label { font-size: 0.86rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; } .stats-row-leader { flex: 1 1 auto; height: 0; border-bottom: 1px dotted var(--border-strong); transform: translateY(-3px); min-width: 16px; } .stats-row-count { flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; min-width: 28px; text-align: right; } .stats-row-count::after { content: '×'; margin-left: 3px; color: var(--text-dim); font-weight: 500; font-size: 0.82rem; } .stats-panel-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border-soft); background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .stats-panel-footer[hidden] { display: none; } .stats-footer-label { font-size: 0.78rem; color: var(--text-muted); } .stats-footer-value { font-family: var(--font-mono); font-weight: 700; font-size: 0.92rem; color: var(--accent); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* ===================================================================== Responsive --------------------------------------------------------------------- */ @media (max-width: 900px) { .layout { grid-template-columns: 1fr; grid-auto-rows: 1fr; } body { overflow: auto; } .app-shell { height: auto; min-height: 100vh; } }