/* Theme tokens — dark is default, `data-theme="light"` on swaps. */ :root, :root[data-theme="dark"] { --bg-0: #05060d; --bg-1: #0b0f1e; --bg-2: #121833; --panel: rgba(20, 28, 55, 0.55); --panel-solid: rgba(14, 20, 43, 0.9); --panel-border: rgba(120, 180, 255, 0.12); --panel-border-strong: rgba(120, 180, 255, 0.28); --text: #e6ecff; --text-dim: #8b98c4; --text-muted: rgba(139, 152, 196, 0.55); --accent: #4cdcff; --accent-2: #8a7bff; --accent-3: #ff7bd3; --accent-rgb: 76, 220, 255; --accent-2-rgb: 138, 123, 255; --ok: #5dfca9; --err: #ff6b8a; --input-bg: rgba(10, 15, 35, 0.6); --input-bg-strong: rgba(10, 15, 35, 0.9); --edge: rgba(140, 195, 255, 0.55); --edge-soft: rgba(140, 195, 255, 0.18); --node-fill: rgba(30, 44, 85, 0.9); --node-stroke: rgba(120, 190, 255, 0.6); --row-hover: rgba(76, 220, 255, 0.1); --row-highlight: rgba(76, 220, 255, 0.13); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35); --font-ar: "Almarai", "Noto Naskh Arabic", "Segoe UI", sans-serif; --font-sans: "Inter", "Segoe UI", system-ui, sans-serif; --radius-lg: 18px; --radius-md: 12px; --radius-sm: 8px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); color-scheme: dark; } :root[data-theme="light"] { --bg-0: #eef1f7; --bg-1: #f5f7fc; --bg-2: #ffffff; --panel: rgba(255, 255, 255, 0.75); --panel-solid: rgba(255, 255, 255, 0.95); --panel-border: rgba(54, 87, 168, 0.14); --panel-border-strong: rgba(54, 87, 168, 0.28); --text: #101937; --text-dim: #5a6b95; --text-muted: rgba(90, 107, 149, 0.5); --accent: #1b7dd8; --accent-2: #7556e6; --accent-3: #d8478f; --accent-rgb: 27, 125, 216; --accent-2-rgb: 117, 86, 230; --ok: #1ba16b; --err: #cf1d4b; --input-bg: rgba(255, 255, 255, 0.9); --input-bg-strong: rgba(255, 255, 255, 0.98); --edge: rgba(54, 87, 168, 0.55); --edge-soft: rgba(54, 87, 168, 0.22); --node-fill: #ffffff; --node-stroke: rgba(54, 87, 168, 0.4); --row-hover: rgba(27, 125, 216, 0.09); --row-highlight: rgba(27, 125, 216, 0.14); --shadow-lg: 0 22px 55px rgba(28, 48, 90, 0.14); --shadow-md: 0 8px 24px rgba(28, 48, 90, 0.1); color-scheme: light; } /* Global smooth theme transition */ html, body, .panel, .topbar, .input-panel textarea, .field input, .field select, .btn, .icon-btn, .metric-card, .metric-hero, .col-filter-row, .tree-node rect, .tree-edge, .user-chip, .column-filter, .table-scroll, table.tokens thead th { transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), fill 0.35s var(--ease), stroke 0.35s var(--ease), box-shadow 0.35s var(--ease); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg-0); color: var(--text); font-family: var(--font-sans); font-size: 14px; overflow-x: hidden; } body.page-login { min-height: 100vh; display: grid; place-items: center; overflow: hidden; position: relative; } body.page-analyze { min-height: 100vh; display: flex; flex-direction: column; } /* ───────── Animated background ───────── */ .bg-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1200px 700px at 15% 10%, rgba(var(--accent-rgb), 0.16), transparent 60%), radial-gradient(1000px 700px at 85% 90%, rgba(var(--accent-2-rgb), 0.18), transparent 60%), radial-gradient(900px 600px at 60% 40%, rgba(255, 123, 211, 0.08), transparent 55%), linear-gradient(180deg, var(--bg-1), var(--bg-0)); } .bg-stars::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 33%, rgba(var(--accent-rgb), 0.55), transparent 60%), radial-gradient(1px 1px at 40% 67%, rgba(var(--accent-2-rgb), 0.55), transparent 60%), radial-gradient(1px 1px at 70% 15%, rgba(var(--accent-rgb), 0.45), transparent 60%), radial-gradient(1.2px 1.2px at 85% 50%, rgba(var(--accent-2-rgb), 0.5), transparent 60%), radial-gradient(1px 1px at 22% 85%, rgba(var(--accent-rgb), 0.45), transparent 60%), radial-gradient(1.3px 1.3px at 55% 90%, rgba(var(--accent-2-rgb), 0.55), transparent 60%), radial-gradient(1.2px 1.2px at 90% 80%, rgba(var(--accent-rgb), 0.45), transparent 60%); animation: drift 48s linear infinite; opacity: 0.75; } :root[data-theme="light"] .bg-stars::before { opacity: 0.35; } @keyframes drift { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-30px, -20px, 0); } } /* ───────── Login card ───────── */ .login-card { position: relative; z-index: 2; width: min(420px, 90vw); padding: 38px 34px 30px; background: var(--panel); border: 1px solid var(--panel-border); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb), 0.05) inset, 0 0 60px rgba(var(--accent-rgb), 0.08); animation: cardIn 0.8s var(--ease); overflow: hidden; } .login-card::before { /* Subtle rotating conic halo around the card edges */ content: ""; position: absolute; inset: -1px; z-index: -1; background: conic-gradient( from 0deg, rgba(var(--accent-rgb), 0) 0deg, rgba(var(--accent-rgb), 0.45) 90deg, rgba(var(--accent-2-rgb), 0.45) 180deg, rgba(var(--accent-rgb), 0) 360deg ); border-radius: var(--radius-lg); opacity: 0.35; animation: halo 18s linear infinite; pointer-events: none; } @keyframes halo { to { transform: rotate(360deg); } } @keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; } .logo-glyph { width: 36px; height: 36px; border-radius: 10px; background: conic-gradient(from 140deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent)); box-shadow: 0 0 30px rgba(76, 220, 255, 0.6); position: relative; } .logo-glyph::after { content: ""; position: absolute; inset: 3px; border-radius: 8px; background: var(--bg-0); } :root[data-theme="light"] .logo-glyph::after { background: #1a2440; } .logo-glyph::before { content: "ل"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-ar); font-size: 22px; font-weight: bold; color: var(--accent); z-index: 1; } .logo-title { font-size: 20px; font-weight: 600; letter-spacing: 0.3px; background: linear-gradient(90deg, var(--accent), var(--text)); -webkit-background-clip: text; background-clip: text; color: transparent; } .logo-sub { font-size: 11px; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; } .field { margin: 14px 0; position: relative; } .field label { display: block; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 6px; } .field input, .field select { width: 100%; padding: 12px 14px; background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text); border-radius: 10px; font-size: 14px; font-family: var(--font-sans); outline: none; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease); } .field input:hover, .field select:hover { border-color: var(--panel-border-strong); } .field input:focus, .field select:focus { border-color: rgba(var(--accent-rgb), 0.7); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #06121f; border: none; border-radius: 10px; font-weight: 600; font-family: var(--font-sans); font-size: 14px; cursor: pointer; overflow: hidden; box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.28); transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), filter 0.2s var(--ease); } :root[data-theme="light"] .btn { color: #ffffff; } .btn::before { /* Light sweep on hover */ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.55s var(--ease); pointer-events: none; } .btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.36); } .btn:hover:not(:disabled)::before { transform: translateX(120%); } .btn:active:not(:disabled) { transform: translateY(0); transition-duration: 0.08s; } .btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.6); outline-offset: 3px; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn.wide { width: 100%; margin-top: 14px; } .btn.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--panel-border); box-shadow: none; } .btn.ghost::before { display: none; } .btn.ghost:hover:not(:disabled) { color: var(--text); border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.06); transform: translateY(-1px); box-shadow: none; } .error-box { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--err) 12%, transparent); border: 1px solid color-mix(in srgb, var(--err) 45%, transparent); color: var(--err); font-size: 13px; display: none; } .error-box.visible { display: block; animation: shake 0.35s var(--ease); } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* ───────── Analyze page ───────── */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: color-mix(in srgb, var(--bg-0) 78%, transparent); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border-bottom: 1px solid var(--panel-border); } .topbar .logo { margin-bottom: 0; } .topbar .spacer { flex: 1; } .topbar .user-chip { padding: 6px 12px; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 100px; font-size: 12px; color: var(--text-dim); } .analyze-layout { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 22px; min-width: 0; } .analyze-layout > * { min-width: 0; } .input-panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); box-shadow: var(--shadow-md); } .input-panel textarea { width: 100%; min-height: 72px; max-height: 200px; padding: 12px 14px; background: var(--input-bg); color: var(--text); border: 1px solid var(--panel-border); border-radius: 10px; font-family: var(--font-ar); font-size: 18px; line-height: 1.8; direction: rtl; resize: vertical; outline: none; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .input-panel textarea::placeholder { color: var(--text-muted); } .input-panel textarea:hover { border-color: var(--panel-border-strong); } .input-panel textarea:focus { border-color: rgba(var(--accent-rgb), 0.7); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); } .input-panel .actions { display: flex; flex-direction: column; gap: 8px; } .output-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; min-height: 0; height: 600px; } .panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); display: flex; flex-direction: column; min-width: 0; min-height: 0; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px); animation: panelIn 0.55s var(--ease) forwards; } .panel:nth-of-type(2) { animation-delay: 0.08s; } .panel:nth-of-type(3) { animation-delay: 0.14s; } @keyframes panelIn { to { opacity: 1; transform: none; } } .panel h3 { margin: 0; padding: 12px 16px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--panel-border); display: flex; align-items: center; gap: 10px; } .panel h3 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); position: relative; } .panel h3 .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0% { opacity: 0.6; transform: scale(1); } 70% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } } .panel h3 .panel-toolbar { margin-left: auto; display: flex; align-items: center; gap: 6px; } .panel-body { flex: 1; overflow: hidden; min-height: 0; position: relative; } .icon-btn { padding: 4px 10px; min-width: 28px; height: 28px; background: var(--input-bg); color: var(--text-dim); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.5px; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.15s var(--ease); } .icon-btn:hover { color: var(--text); border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.08); transform: translateY(-1px); } .icon-btn:active { transform: translateY(0); transition-duration: 0.06s; } .icon-btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 2px; } .icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } .panel-toolbar .divider { width: 1px; height: 18px; background: var(--panel-border-strong); margin: 0 4px; } .btn.small { padding: 6px 10px; font-size: 11px; } /* ───── Column filter dropdown ───── */ .column-filter { position: absolute; top: 0; right: 10px; z-index: 5; min-width: 230px; max-height: 60vh; overflow: auto; padding: 10px; background: var(--panel-solid); border: 1px solid var(--panel-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); animation: dropIn 0.22s var(--ease); } @keyframes dropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .col-filter-actions { display: flex; gap: 6px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--panel-border); } .col-filter-list { display: grid; gap: 4px; } .col-filter-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text); transition: background 0.1s; } .col-filter-row:hover { background: rgba(76, 220, 255, 0.07); } .col-filter-row input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; } .col-filter-row input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; } .col-filter-row input[type="checkbox"]:disabled + span { color: var(--text-dim); } /* ───────── Tree ───────── */ #tree-container { height: 100%; overflow: hidden; } #tree-svg { width: 100%; height: 100%; min-height: 400px; display: block; cursor: grab; } #tree-svg:active { cursor: grabbing; } .tree-node rect { fill: var(--node-fill); stroke: var(--node-stroke); stroke-width: 1.2; transition: fill 0.25s var(--ease), stroke 0.25s var(--ease), filter 0.25s var(--ease); filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4)); } .tree-node.root rect { fill: color-mix(in srgb, var(--accent-2) 22%, transparent); stroke: var(--accent-2); } .tree-node.highlight rect { fill: color-mix(in srgb, var(--accent) 24%, transparent); stroke: var(--accent); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 80%, transparent)); } .tree-node:not(.root):hover rect { stroke: rgba(var(--accent-rgb), 0.9); filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent)); } .tree-node text { fill: var(--text); pointer-events: none; transition: fill 0.25s var(--ease); } .tree-node .word-ar { font-family: var(--font-ar); font-size: 20px; font-weight: 700; } .tree-node .sub { font-family: var(--font-ar); font-size: 12px; fill: var(--text-dim); } .tree-node .tag { font-family: var(--font-sans); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; fill: var(--accent); } .tree-node { cursor: pointer; } .tree-edge { fill: none; stroke: var(--edge); stroke-width: 1.3; stroke-linecap: round; opacity: 0.8; transition: stroke 0.25s var(--ease), opacity 0.25s var(--ease), stroke-width 0.25s var(--ease); } .tree-edge.highlight { stroke: var(--accent); opacity: 1; stroke-width: 2.2; filter: drop-shadow(0 0 6px var(--accent)); } .tree-edge.edge-outside { stroke-dasharray: 4 3; stroke: var(--accent-3); } /* ───────── Table ───────── */ .table-scroll { overflow: auto; height: 100%; max-height: 100%; scrollbar-width: thin; scrollbar-color: rgba(120, 180, 255, 0.25) transparent; } .table-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .table-scroll::-webkit-scrollbar-track { background: transparent; } .table-scroll::-webkit-scrollbar-thumb { background: rgba(120, 180, 255, 0.2); border-radius: 100px; border: 2px solid transparent; background-clip: padding-box; } .table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(76, 220, 255, 0.45); background-clip: padding-box; } table.tokens { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.tokens thead th { position: sticky; top: 0; background: var(--panel-solid); color: var(--text-dim); font-weight: 500; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; padding: 11px 10px; border-bottom: 1px solid var(--panel-border); white-space: nowrap; text-align: start; z-index: 1; backdrop-filter: blur(10px); } table.tokens td { padding: 9px 10px; border-bottom: 1px solid var(--panel-border); white-space: nowrap; vertical-align: top; } table.tokens td.ar { font-family: var(--font-ar); font-size: 16px; direction: rtl; } table.tokens tbody tr { transition: background-color 0.18s var(--ease), box-shadow 0.18s var(--ease); cursor: pointer; } table.tokens tbody tr:hover { background: var(--row-hover); } table.tokens tbody tr.highlight { background: var(--row-highlight); box-shadow: inset 3px 0 0 var(--accent); } table.tokens td.empty { color: var(--text-muted); } /* ───────── Empty / loading states ───────── */ .state { padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 13px; } .spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: -3px; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Subtle pulsing glow on the empty-state copy while work is in flight. */ .state.loading { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent), transparent); background-size: 200% 100%; animation: shimmer 2.2s linear infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ───────── Theme toggle button ───────── */ .theme-toggle-fixed { position: fixed; top: 18px; right: 18px; z-index: 20; } .theme-toggle { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--panel-border); background: var(--input-bg); color: var(--text-dim); cursor: pointer; display: inline-grid; place-items: center; overflow: hidden; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.08); transform: rotate(12deg); } .theme-toggle:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; transition: transform 0.45s var(--ease), opacity 0.3s var(--ease); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; inset: 0; display: grid; place-items: center; } :root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: scale(1) rotate(0); } :root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: scale(0.4) rotate(-80deg); } :root[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: scale(0.4) rotate(80deg); } :root[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0); } /* ───────── Metrics panel ───────── */ .metrics-panel { min-height: 0; } .metrics-panel .panel-body { overflow: visible; padding: 16px; min-width: 0; } .metrics-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .metric-group { min-width: 0; } .dot.dot-accent-2 { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); } /* Hero composite score */ .metric-hero { padding: 18px 22px 16px; background: linear-gradient(135deg, rgba(138, 123, 255, 0.18), rgba(76, 220, 255, 0.08)); border: 1px solid rgba(138, 123, 255, 0.35); border-radius: 14px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(220px, 300px) 1fr; column-gap: 28px; row-gap: 4px; align-items: center; } .metric-hero-label, .metric-hero-value { grid-column: 1; } .metric-hero-bar { grid-column: 1 / -1; } .metric-hero-caption { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0 !important; } .metric-hero::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 200px; height: 200px; background: radial-gradient(circle, rgba(138, 123, 255, 0.45), transparent 65%); pointer-events: none; filter: blur(6px); } .metric-hero-label { font-size: 10.5px; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; } .metric-hero-value { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; } .metric-hero-value .num { font-size: 52px; font-weight: 600; background: linear-gradient(90deg, var(--accent), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -1px; } .metric-hero-value .slash { font-size: 13px; color: var(--text-dim); } .metric-hero-bar { margin-top: 10px; height: 6px; background: rgba(10, 15, 35, 0.6); border-radius: 100px; overflow: hidden; } .metric-hero-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 100px; box-shadow: 0 0 12px rgba(76, 220, 255, 0.5); transition: width 0.6s cubic-bezier(0.2, 0.9, 0.3, 1); } .metric-hero-caption { margin-top: 10px; font-size: 12px; color: var(--text-dim); line-height: 1.5; } .metric-hero.rating-low { border-color: rgba(255, 123, 211, 0.45); } .metric-hero.rating-low .metric-hero-fill { background: linear-gradient(90deg, var(--accent-3), var(--accent-2)); } .metric-hero.rating-high { border-color: rgba(93, 252, 169, 0.45); } .metric-hero.rating-high .metric-hero-fill { background: linear-gradient(90deg, var(--ok), var(--accent)); } /* Metric group / grid */ .metric-group + .metric-group { margin-top: 16px; } .metric-group-title { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; } .metric-grid { display: flex; flex-wrap: wrap; gap: 10px; } .metric-card { flex: 1 1 140px; min-width: 140px; padding: 12px 14px; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: var(--radius-md); position: relative; overflow: hidden; transition: transform 0.2s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .metric-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), 0.4); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 14%, transparent); } .metric-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--rating-color, var(--accent)); opacity: 0.75; } .metric-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .metric-label { font-size: 11px; color: var(--text-dim); letter-spacing: 0.5px; } .metric-rating { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; background: color-mix(in srgb, var(--rating-color, var(--accent)) 13%, transparent); color: var(--rating-color, var(--accent)); border: 1px solid color-mix(in srgb, var(--rating-color, var(--accent)) 35%, transparent); } .metric-value { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; } .metric-value .num { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.3px; } .metric-value .unit { font-size: 11px; color: var(--text-dim); } .metric-hint { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--text-dim); opacity: 0.9; } /* Rating colors — each card sets a CSS var its ::after + rating pill read */ .metric-card.rating-high, .metric-card.rating-cohesive, .metric-card.rating-simple, .metric-card.rating-clean { --rating-color: var(--ok); } .metric-card.rating-balanced, .metric-card.rating-moderate { --rating-color: var(--accent); } .metric-card.rating-low, .metric-card.rating-fragmented, .metric-card.rating-complex { --rating-color: var(--accent-3); } .metric-card.rating-short, .metric-card.rating-long { --rating-color: var(--accent-2); } /* Rating-pill background/border are driven by --rating-color via color-mix, so no per-rating overrides are needed here. */ /* ───────── Responsive ───────── */ @media (max-width: 980px) { .output-grid { grid-template-columns: 1fr; } .panel { min-height: 320px; } .input-panel { grid-template-columns: 1fr; } .metrics-body { grid-template-columns: 1fr; } }