/* ============================================================================ MANTIS REDESIGN — drop-in override stylesheet ---------------------------------------------------------------------------- HOW TO USE (safe, additive, zero-JS-impact): 1. Copy this file to src/web/css/mantis-redesign.css 2. In EVERY page's , add AFTER all existing stylesheets: 3. Do not remove or rename anything else. This file only overrides visual properties on EXISTING selectors and remaps the legacy CSS variables that style.css already consumes. It changes colors, fonts, radii, borders and shadows ONLY. It does not touch display/visibility/positioning of functional elements, and never hides or moves anything app.js reads or writes. ============================================================================ */ /* ---- 1. Webfonts (Google Fonts; swap for licensed files later) ---- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ---- 2. New design tokens + LEGACY VARIABLE REMAP ---- style.css and many inline styles consume these legacy variables; remapping them restyles huge surfaces with zero markup changes. */ :root { /* New system tokens */ --black: #050505; --gray-950: #0A0A0A; --gray-900: #101010; --gray-850: #141414; --red-300: #FF8A7E; --red-400: #F4564A; --red-500: #E8352B; --red-600: #C9241B; --red-900: #3D0F0C; --green-400: #3DDC84; --amber-400: #F5B83D; --line-1: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.13); --wash-1: rgba(255, 255, 255, 0.04); --wash-2: rgba(255, 255, 255, 0.08); --red-tint-1: rgba(232, 53, 43, 0.10); --red-line: rgba(244, 86, 74, 0.38); --text-1: #FAFAFA; --text-2: rgba(250, 250, 250, 0.64); --text-3: rgba(250, 250, 250, 0.40); --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif; --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* LEGACY REMAP — variables the existing CSS already uses */ --bg-dark: #050505; /* was #0a0e16 (navy) */ --bg-card: #101010; /* was #1e1e1e */ --border-color: rgba(255, 255, 255, 0.07); /* was #333 */ --accent-color: #E8352B; /* was #d32f2f */ --accent: #E8352B; --text-main: rgba(250, 250, 250, 0.64); --text-muted: rgba(250, 250, 250, 0.40); --card-bg: #101010; /* was rgba(10,14,22,0.6) glass */ --card-border: rgba(255, 255, 255, 0.07); --card-radius: 10px; /* was 16px */ --card-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45); --card-backdrop: none; /* kill glass blur */ } /* ---- 3. Base ---- */ body { background-color: var(--bg-dark); color: var(--text-2); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; color: var(--text-1); } ::selection { background: rgba(232, 53, 43, 0.22); color: #fff; } :where(a, button, input, select, textarea):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(244, 86, 74, 0.25); border-color: var(--red-400); } /* ---- 4. Header / top navigation ---- */ header, .topnav { background-color: rgba(5, 5, 5, 0.92); border-bottom: 1px solid var(--line-1); } .logo { font-family: var(--font-display); font-weight: 700; color: var(--text-1); letter-spacing: 0.02em; } .nav-link, .topnav-link { color: var(--text-3); font-family: var(--font-body); } .nav-link:hover, .topnav-link:hover { color: var(--text-2); } /* Active nav: flat text + 2px red underline — NOT a pill. Overrides style.css .topnav-link.active (red tint bg + red border + radius + glow). */ .nav-link.active, .topnav-link.active { background: transparent !important; border-color: transparent !important; /* keep 1px transparent border = same box model as inactive */ border-radius: 0 !important; box-shadow: inset 0 -2px 0 var(--red-500) !important; /* the only indicator */ color: var(--text-1) !important; } .nav-link.active:hover, .topnav-link.active:hover { background: transparent !important; color: var(--text-1) !important; } /* ---- 5. Cards (matches style.css's !important normalization) ---- */ .ui-card, .glassCard, .card, .panel, .mantis-card, .action-card, .settings-card { background: #101010 !important; border: 1px solid var(--line-1) !important; border-radius: 10px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .card p { color: var(--text-3); } /* ---- 6. Buttons ---- */ .btn { background: var(--wash-1); border: 1px solid var(--line-1); border-radius: 6px; font-family: var(--font-body); font-weight: 600; color: var(--text-1); } .btn:hover { background: var(--wash-2); border-color: var(--line-2); } .btn-hero-cta, .hero-btn-primary, .email-btn, .plan-cta-pro { background: var(--red-500) !important; color: #fff !important; border-radius: 6px !important; font-weight: 600; animation: none !important; /* kill legacy glow-pulse */ } .btn-hero-cta:hover, .hero-btn-primary:hover, .email-btn:hover, .plan-cta-pro:hover { background: var(--red-600) !important; transform: none; } .hero-btn-secondary, .plan-cta-free, .email-btn-outline { background: var(--wash-1) !important; color: var(--text-1) !important; border: 1px solid var(--line-1) !important; border-radius: 6px !important; } /* ---- 7. Form fields ---- */ .premium-topic-input, .premium-select, .auth-input, .input-group select, .input-group input, .titles-input, .titles-textarea, .coming-soon-input { background: #0D0D0D !important; border: 1px solid var(--line-1) !important; border-radius: 6px !important; color: var(--text-1) !important; font-family: var(--font-body); } .premium-topic-input:focus, .premium-select:focus, .auth-input:focus, .input-group select:focus, .titles-input:focus, .titles-textarea:focus { border-color: var(--red-400) !important; } input[type="range"] { accent-color: var(--red-500); } /* ---- 8. Data / metrics — mono voice ---- */ .usage-count, .meta-badge, .trend-chip, .stat-value, #usage-count-text, #usage-count-text-pro, #usage-reset-countdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---- 9. Hero (marketing) ---- */ .hero-content h1, .hero-headline { font-family: var(--font-display); color: var(--text-1); text-shadow: none; text-transform: none; /* sentence case, not uppercase */ } .hero-eyebrow-pill { font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: 0.14em; background: var(--red-tint-1) !important; border: 1px solid var(--red-line) !important; color: var(--red-400) !important; } /* ---- 10. Misc surfaces ---- */ .modal-content, .modal-box { background: var(--gray-850); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); } .tpeCard { border-color: var(--red-line); border-radius: 10px; } .tpeCard:hover { border-color: var(--red-400); } .tpeTag { color: var(--green-400); } .user-floating-card { background: var(--gray-850); border: 1px solid var(--line-2); border-radius: 10px; } *::-webkit-scrollbar-thumb { background: #262626; } /* ---- 11. Tailwind utility remap ---- The legacy "intelligence" UI (Trends, Channel Breakdown, dynamic cards rendered by app.js) is built on Tailwind CDN color utilities. Those colors bypass both style.css variables and inline styles, so they're remapped here: blue (informational) -> neutral instrument palette, purple (premium/action) -> the one red, gray -> true near-black. Class names are untouched. */ /* blue text -> neutral */ .text-blue-100, .text-blue-200, .text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900, .text-sky-300, .text-sky-400, .text-sky-500, .text-cyan-300, .text-cyan-400, .text-accent-blue { color: var(--text-2) !important; } /* purple/indigo/violet text -> red accent */ .text-purple-200, .text-purple-300, .text-purple-400, .text-purple-500, .text-purple-600, .text-indigo-300, .text-indigo-400, .text-indigo-500, .text-violet-300, .text-violet-400, .text-violet-500, .text-fuchsia-400 { color: var(--red-400) !important; } /* blue solid fills -> neutral wash; blue tints -> faint wash */ .bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-sky-500, .bg-sky-600, .bg-cyan-500 { background-color: var(--wash-2) !important; } .bg-blue-900, .bg-blue-950, .bg-sky-900, .bg-indigo-900 { background-color: var(--wash-1) !important; } /* purple/indigo/violet solid fills -> red action; tints -> red tint */ .bg-purple-500, .bg-purple-600, .bg-indigo-500, .bg-indigo-600, .bg-violet-500, .bg-violet-600 { background-color: var(--red-500) !important; } .bg-purple-700, .bg-indigo-700, .bg-violet-700 { background-color: var(--red-600) !important; } .hover\:bg-purple-700:hover, .hover\:bg-purple-600:hover, .hover\:bg-indigo-700:hover, .hover\:bg-violet-700:hover { background-color: var(--red-600) !important; } .hover\:bg-blue-800:hover, .hover\:bg-blue-700:hover { background-color: var(--wash-2) !important; } .bg-purple-800, .bg-purple-900, .bg-violet-900, .bg-indigo-800 { background-color: var(--red-tint-1) !important; } /* borders: blue -> neutral hairline, purple -> red hairline */ .border-blue-400, .border-blue-500, .border-blue-600, .border-blue-700, .border-blue-800, .border-sky-500, .border-cyan-500 { border-color: var(--line-2) !important; } .hover\:border-blue-500:hover, .hover\:border-blue-400:hover { border-color: var(--line-2) !important; } .border-purple-400, .border-purple-500, .border-purple-600, .border-indigo-500, .border-violet-500 { border-color: var(--red-line) !important; } /* focus rings -> red */ .ring-blue-500, .ring-purple-500, .ring-indigo-500, .ring-violet-500, .focus\:ring-blue-500:focus, .focus\:ring-purple-500:focus { --tw-ring-color: rgba(244,86,74,0.5) !important; } /* gradient stops (headings, bars) -> red */ .from-blue-400, .from-blue-500, .from-purple-400, .from-purple-500, .from-indigo-500, .from-violet-500 { --tw-gradient-from: var(--red-400) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244,86,74,0)) !important; } .to-blue-400, .to-blue-500, .to-purple-400, .to-purple-500, .to-indigo-500, .to-violet-500 { --tw-gradient-to: var(--red-500) !important; } .via-blue-500, .via-purple-500, .via-indigo-500 { --tw-gradient-via: var(--red-400) !important; } /* green utilities -> system positive green */ .text-green-300, .text-green-400, .text-green-500, .text-emerald-400, .text-emerald-500 { color: var(--green-400) !important; } .bg-green-500, .bg-green-600, .bg-emerald-500 { background-color: var(--green-400) !important; } .border-green-400, .border-green-500 { border-color: rgba(61,220,132,0.38) !important; } /* Tailwind grays -> true near-black neutral surfaces */ .bg-gray-700 { background-color: var(--gray-850) !important; } .bg-gray-800 { background-color: var(--gray-900) !important; } .bg-gray-900, .bg-gray-950 { background-color: var(--gray-950) !important; } .border-gray-600, .border-gray-700, .border-gray-800 { border-color: var(--line-1) !important; } .text-gray-400 { color: var(--text-2) !important; } .text-gray-500, .text-gray-600 { color: var(--text-3) !important; } /* ============================================================================ 12. DESIGN TOKENS (full reference set) + 13. REDESIGN COMPONENTS (.mz-*) ---------------------------------------------------------------------------- Used by the structural page rebuilds. The .mz- prefix guarantees no collision with ids/classes that app.js reads or with style.css/Tailwind. ============================================================================ */ :root { --gray-800: #1A1A1A; --gray-700: #262626; --gray-600: #3A3A3A; --gray-500: #5C5C5C; --gray-400: #8A8A8A; --gray-300: #B0B0B0; --gray-200: #D6D6D6; --gray-100: #EDEDED; --white: #FAFAFA; --red-700: #9E1812; --green-300: #6EE7A0; --green-500: #1FB35F; --green-900: #0B2A1A; --amber-900: #2E2208; --blue-400: #6CA8F5; --red-tint-2: rgba(232,53,43,0.22); --green-tint-1: rgba(61,220,132,0.10); --green-line: rgba(61,220,132,0.30); --text-4: rgba(250,250,250,0.24); --text-accent: var(--red-400); --text-positive: var(--green-400); --text-on-red: #FFFFFF; --surface-page: var(--black); --surface-raised: var(--gray-950); --surface-card: var(--gray-900); --surface-card-2: var(--gray-850); --surface-input: #0D0D0D; --surface-overlay: rgba(5,5,5,0.82); --action-primary: var(--red-500); --action-primary-hover: var(--red-600); --border-default: var(--line-1); --border-hover: var(--line-2); --border-focus: var(--red-400); --ring-focus: 0 0 0 3px rgba(244,86,74,0.25); --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --radius-xs:3px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-full:999px; --container-max:1200px; --nav-height:60px; --content-pad:32px; --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45); --shadow-pop: 0 16px 48px rgba(0,0,0,0.6); --shadow-glow-red: 0 0 0 1px rgba(244,86,74,0.25), 0 4px 24px rgba(232,53,43,0.25); --ease-out: cubic-bezier(0.2,0.8,0.2,1); --duration-fast:120ms; --duration-base:180ms; --tracking-wide:0.08em; --tracking-wider:0.14em; } /* layout + page header */ .mz-main { max-width: var(--container-max); margin: 0 auto; padding: 40px 32px 64px; } .mz-pagehead { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; } .mz-pagehead-l { display:flex; flex-direction:column; gap:10px; } .mz-eyebrow { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-accent); } .mz-label { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); } .mz-title { font-family:var(--font-display); font-size:32px; font-weight:700; letter-spacing:-0.02em; color:var(--text-1); margin:0; line-height:1.15; } .mz-sub { margin:0; font-size:15px; color:var(--text-3); } .mz-actions { display:flex; gap:10px; align-items:center; flex-shrink:0; } /* card + card header */ .mz-card { background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-card); transition:border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .mz-card.is-signal { border-color:var(--red-line); } .mz-card.is-interactive { cursor:pointer; display:block; text-decoration:none; } .mz-card.is-interactive:hover { border-color:var(--border-hover); transform:translateY(-2px); } .mz-cardhead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; } .mz-cardhead-l { display:flex; flex-direction:column; gap:6px; } .mz-cardhead-title { font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-0.02em; color:var(--text-1); margin:0; line-height:1.25; } /* grids */ .mz-grid { display:grid; gap:12px; } .mz-grid-4 { grid-template-columns:repeat(4,1fr); } .mz-grid-trends { grid-template-columns:1.6fr 1fr; } @media (max-width:900px){ .mz-grid-4{grid-template-columns:repeat(2,1fr);} .mz-grid-trends{grid-template-columns:1fr;} } @media (max-width:560px){ .mz-grid-4{grid-template-columns:1fr;} .mz-main{padding:28px 18px 48px;} } /* tool / action card */ .mz-tool { display:flex; flex-direction:column; gap:12px; height:100%; } .mz-tool-icn { width:38px; height:38px; border-radius:var(--radius-sm); background:var(--red-tint-1); border:1px solid var(--red-line); display:flex; align-items:center; justify-content:center; color:var(--red-400); } .mz-tool-icn [data-lucide], .mz-tool-icn svg { width:18px; height:18px; } .mz-tool-title { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text-1); letter-spacing:-0.01em; } .mz-tool-desc { margin:6px 0 0; font-size:13px; color:var(--text-3); line-height:1.5; } .mz-tool-cta { margin-top:auto; font-size:13px; font-weight:600; color:var(--red-400); } /* buttons */ .mz-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:14px; height:40px; padding:0 18px; border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; border:1px solid transparent; transition:background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); text-decoration:none; } .mz-btn:active { transform:scale(0.98); } .mz-btn--sm { height:32px; padding:0 12px; font-size:13px; } .mz-btn--lg { height:48px; padding:0 26px; font-size:15px; } .mz-btn--primary { background:var(--action-primary); color:var(--text-on-red); } .mz-btn--primary:hover { background:var(--action-primary-hover); } .mz-btn--secondary { background:var(--wash-1); color:var(--text-1); border-color:var(--border-default); } .mz-btn--secondary:hover { background:var(--wash-2); border-color:var(--border-hover); } .mz-btn--ghost { background:transparent; color:var(--text-2); } .mz-btn--ghost:hover { color:var(--text-1); background:var(--wash-1); } /* progress / quota strip */ .mz-progress { width:100%; } .mz-progress-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:12px; } .mz-progress-detail { font-family:var(--font-mono); font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; } .mz-progress-track { height:4px; background:var(--wash-1); border-radius:var(--radius-xs); overflow:hidden; } .mz-progress-fill { height:100%; background:var(--green-400); border-radius:var(--radius-xs); transition:width 500ms var(--ease-out); } /* trend rows */ .mz-trendrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--wash-1); } .mz-trendrow-l { display:flex; align-items:center; gap:10px; min-width:0; } .mz-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; } .mz-dot--rising{ background:var(--green-400);} .mz-dot--falling{ background:var(--red-400);} .mz-dot--steady{ background:var(--gray-500);} .mz-trend-term { font-size:14px; font-weight:500; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mz-trend-r { display:flex; align-items:center; gap:14px; flex-shrink:0; } .mz-trend-score { font-family:var(--font-mono); font-size:13px; color:var(--text-2); font-variant-numeric:tabular-nums; width:24px; text-align:right; } /* badges (mono uppercase) */ .mz-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--radius-xs); font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; line-height:1.4; white-space:nowrap; color:var(--text-3); background:var(--wash-1); border:1px solid var(--border-default); } .mz-badge--red { color:var(--red-400); background:var(--red-tint-1); border-color:var(--red-line); } .mz-badge--green { color:var(--green-400); background:var(--green-tint-1); border-color:var(--green-line); } .mz-badge--amber { color:var(--amber-400); background:var(--amber-900); border-color:rgba(245,184,61,0.3); } /* history items */ .mz-hist { display:flex; flex-direction:column; } .mz-hist-item { display:flex; flex-direction:column; gap:5px; padding:12px 0; border-top:1px solid var(--border-default); } .mz-hist-item:first-child { border-top:none; } .mz-hist-top { display:flex; justify-content:space-between; align-items:center; gap:8px; } .mz-hist-meta { font-family:var(--font-mono); font-size:11px; color:var(--text-4); } .mz-hist-title { font-size:13.5px; font-weight:500; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* floating user card — mono plan label, red avatar */ #user-plan { font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3); } #user-display { font-family:var(--font-body); } #user-avatar { background:var(--red-500) !important; color:#fff !important; } /* JS-rendered dashboard lists (app.js emits .trend-card/.trend-item/.history-item) */ #trends-list .trend-card, #trends-list .trend-item { background:var(--wash-1) !important; border:1px solid var(--line-1) !important; border-radius:var(--radius-sm) !important; box-shadow:none !important; margin-bottom:8px; } #history-list .history-item { border-top:1px solid var(--line-1); padding:12px 0; } #history-list .history-item:first-child { border-top:none; } #history-list .history-item { display:flex; flex-direction:column; gap:5px; } .mz-hist-actions { display:flex; gap:8px; margin-top:8px; } /* dashboard trends card: compact inline filter controls (retained production functionality) */ .market-trends-controls .premium-select { width:auto !important; min-width:108px; flex:0 1 auto; font-size:12px !important; padding:6px 10px !important; } .market-trends-grid #trends-viz, .market-trends-grid #trends-container { min-height:200px; } /* renderers(2/4): collapse the "Views Over Time" canvas column to match the reference single-column list. Canvas element + drawing code kept intact — restore by removing these two lines. */ .market-trends-grid { grid-template-columns: 1fr !important; } .market-trends-grid #trends-viz { display: none !important; } /* labeled filter row (trends, etc.) */ .mz-filters { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; align-items:flex-end; } .mz-filter { display:flex; flex-direction:column; gap:6px; min-width:160px; } .mz-filter .mz-label { color:var(--text-3); } .mz-filter .premium-select { width:100%; } /* trends page: restyle JS-rendered .trend-card internals (mono labels, chips) */ .trend-card .trend-chip { display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); background:var(--wash-1); border:1px solid var(--line-1); border-radius:var(--radius-xs); padding:3px 8px; margin:0 6px 6px 0; } .trend-card .trend-title { font-family:var(--font-display); letter-spacing:-0.01em; } .trend-card .trend-meta-row { font-family:var(--font-mono); font-size:12px; color:var(--text-3); } .trend-card .insight-col h4 { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); } .trend-card .insight-col:nth-child(2) h4 { color:var(--green-400); } .trend-card .insight-col ul { font-size:13px; color:var(--text-2); } .trend-card .insight-col:first-child h4 { color:var(--red-400); } /* WHY IT'S WINNING */ .trend-card .insight-col:nth-child(2) h4 { color:var(--green-400); } /* DO THIS TODAY / steal */ /* trends page reference TrendCard header: big mono score top-left + status badge top-right */ .mz-trendcard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; } .mz-trendcard-score { font-family:var(--font-mono); font-size:34px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; } .mz-trendcard-title { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--text-1); margin:0 0 10px; } .mz-trendcard-chips { margin-bottom:12px; } .trend-card { text-align:left !important; } /* reference cards are left-aligned (legacy centered them) */ /* script generator layout */ .mz-grid-script { grid-template-columns:380px 1fr; align-items:start; } @media (max-width:760px){ .mz-grid-script{grid-template-columns:1fr;} } .mz-script-form .input-group { margin-bottom:16px; } .mz-script-form label { display:block; margin-bottom:6px; } .mz-range-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--text-3); margin-top:6px; font-family:var(--font-mono); } .mz-script-placeholder { min-height:160px; display:flex; align-items:center; justify-content:center; color:var(--text-3); font-size:14px; } .mz-script-right:has(#output:not(.hidden)) .mz-script-placeholder { display:none; } /* video audit input row */ .mz-audit-row { display:flex; gap:10px; align-items:stretch; } .mz-audit-row .premium-topic-input { flex:1; min-width:0; } .mz-audit-row .mz-btn { flex:0 0 auto; white-space:nowrap; } .mz-audit-trust { margin:12px 0 0; font-family:var(--font-mono); font-size:12px; color:var(--text-3); } @media (max-width:560px){ .mz-audit-row{flex-direction:column;} } /* titles: hide right-column placeholder once results render */ .mz-script-right:has(#titles-results:not([style*="none"])) #titles-placeholder { display:none; } .titles-input-label.mz-label { display:block; margin-bottom:6px; } /* settings page → token cards + mono section labels */ .settings-wrap { max-width:760px; margin:0 auto; } .settings-card { background:var(--surface-card) !important; border:1px solid var(--line-1) !important; border-radius:var(--radius-md) !important; padding:24px 28px !important; margin-bottom:20px; box-shadow:var(--shadow-card) !important; } .settings-card h2 { font-family:var(--font-mono) !important; font-size:11px !important; font-weight:500 !important; letter-spacing:0.14em !important; text-transform:uppercase !important; color:var(--text-3) !important; margin:0 !important; } .settings-card h2.danger { color:var(--red-400) !important; } .settings-danger-card { border-color:var(--red-line) !important; } .settings-divider { height:1px; background:var(--line-1) !important; margin:14px 0 18px; border:none !important; } .settings-label { font-size:13px; color:var(--text-1); font-weight:600; } .settings-value { font-family:var(--font-mono); font-size:13px; color:var(--text-3); } .settings-badge { font-family:var(--font-mono) !important; font-size:11px !important; text-transform:uppercase; letter-spacing:0.08em; padding:3px 8px !important; border-radius:var(--radius-xs) !important; border:1px solid var(--line-1) !important; color:var(--text-3) !important; background:var(--wash-1) !important; } .settings-btn { font-family:var(--font-body); font-weight:600; font-size:13px; border-radius:var(--radius-sm) !important; padding:8px 16px; cursor:pointer; border:1px solid transparent; } .settings-btn-primary { background:var(--red-500) !important; color:#fff !important; border-color:transparent !important; } .settings-btn-primary:hover { background:var(--red-600) !important; } .settings-btn-secondary { background:var(--wash-1) !important; color:var(--text-1) !important; border:1px solid var(--line-1) !important; } .settings-btn-danger { background:var(--red-tint-1) !important; color:var(--red-400) !important; border:1px solid var(--red-line) !important; } .settings-input { background:var(--surface-input) !important; border:1px solid var(--line-1) !important; border-radius:var(--radius-sm) !important; color:var(--text-1) !important; } .modal-box { background:var(--surface-card-2) !important; border:1px solid var(--line-2) !important; border-radius:var(--radius-lg) !important; }