/* ===================================================================== * AnyCheatSheet — Unified styles (Variation 3 · Modern Minimal SaaS) * * Design tokens live in :root / :root[data-theme="..."]. * Default: follows system preference via (prefers-color-scheme). * User choice is stored in localStorage and applied as data-theme on . * ================================================================== */ /* ---------- Tokens ---------- */ :root, :root[data-theme="light"] { /* surfaces */ --bg: #fafafa; --surface: #ffffff; --surface-alt: #f5f5f7; /* text */ --text: #3f3f46; --text-strong: #09090b; --muted: #71717a; /* borders */ --border: #ececef; --border-strong: #d8d8de; /* brand */ --accent: #7c3aed; --accent-soft: #ede9fe; --accent-text: #6d28d9; /* per-category accent (kept from the original palette) */ --c1: #ea580c; --c2: #0891b2; --c3: #7c3aed; --c4: #059669; --c5: #e11d48; --c6: #d97706; --c7: #2563eb; --c8: #c026d3; /* tags */ --tag-bg: #f4f4f5; --tag-border: #e4e4e7; --tag-hover-bg: #ececef; /* shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04); --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.08); /* misc */ --lens-bg: var(--surface-alt); --footer-text: var(--muted); --modal-select-bg: var(--surface-alt); --overlay: rgba(24, 24, 27, 0.35); /* geometry */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --col-w: 320px; --gap: 14px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #09090b; --surface: #121215; --surface-alt: #18181b; --text: #d4d4d8; --text-strong: #fafafa; --muted: #71717a; --border: #27272a; --border-strong: #3f3f46; --accent: #a78bfa; --accent-soft: rgba(167, 139, 250, 0.14); --accent-text: #c4b5fd; --c1: #f97316; --c2: #22d3ee; --c3: #a78bfa; --c4: #34d399; --c5: #fb7185; --c6: #fbbf24; --c7: #60a5fa; --c8: #e879f9; --tag-bg: #1c1c1f; --tag-border: #2a2a2e; --tag-hover-bg: #222226; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.6), 0 24px 48px rgba(0, 0, 0, 0.5); --overlay: rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { --bg: #09090b; --surface: #121215; --surface-alt: #18181b; --text: #d4d4d8; --text-strong: #fafafa; --muted: #71717a; --border: #27272a; --border-strong: #3f3f46; --accent: #a78bfa; --accent-soft: rgba(167, 139, 250, 0.14); --accent-text: #c4b5fd; --c1: #f97316; --c2: #22d3ee; --c3: #a78bfa; --c4: #34d399; --c5: #fb7185; --c6: #fbbf24; --c7: #60a5fa; --c8: #e879f9; --tag-bg: #1c1c1f; --tag-border: #2a2a2e; --tag-hover-bg: #222226; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.6), 0 24px 48px rgba(0, 0, 0, 0.5); --overlay: rgba(0, 0, 0, 0.6); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100vh; } body { background: var(--bg); color: var(--text); font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Site header (shared across pages) ---------- */ .site-header { position: sticky; top: 0; z-index: 100; height: 60px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 16px; } .site-header .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-strong); } .site-header .brand-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); color: #fff; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent); } .site-header .brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; } .site-header nav { display: flex; gap: 2px; margin-left: 18px; } .site-header nav a { padding: 6px 12px; border-radius: 6px; font-size: 13px; color: var(--muted); font-weight: 500; text-decoration: none; } .site-header nav a.active, .site-header nav a:hover { color: var(--text-strong); background: var(--surface-alt); text-decoration: none; } .site-header .spacer { flex: 1; } .site-header .search { display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; color: var(--muted); font-size: 13px; width: 260px; } .site-header .search > span { flex: 1; } .site-header .search kbd { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; padding: 1px 6px; border-radius: 3px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); } .site-header .user-email { font-size: 13px; color: var(--muted); } .site-header .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } /* ---------- Icon button (header toolbar, modal controls) ---------- */ .icon-btn { width: 32px; height: 32px; border-radius: var(--radius); background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; } .icon-btn:hover { background: var(--surface-alt); color: var(--text-strong); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Theme switch (two round icon buttons) ---------- */ .theme-switch { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; } .theme-switch .knob { display: none; } .theme-switch .opt { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 50%; color: var(--muted); padding: 0; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .theme-switch .opt:hover { color: var(--text-strong); background: var(--surface-alt); } .theme-switch .opt.active { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text-strong); } :root[data-theme="dark"] .theme-switch .opt[data-mode="dark"].active { color: #fde68a; } :root:not([data-theme="dark"]) .theme-switch .opt[data-mode="light"].active { color: #b45309; } .theme-switch .opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-strong); border-radius: var(--radius); padding: 8px 14px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.04s; } .btn:hover { background: var(--surface-alt); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn.btn-primary { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .btn.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } .btn.btn-ghost { background: transparent; } .btn.btn-sm { padding: 6px 10px; font-size: 12.5px; } .btn.btn-lg { padding: 10px 18px; font-size: 14px; } .btn.full { width: 100%; } /* ---------- Form controls ---------- */ .field { display: block; margin-bottom: 14px; } .field-label { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 500; color: var(--text-strong); margin-bottom: 6px; } .field-label .hint { color: var(--accent-text); font-weight: 500; } .field-input { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 11px; transition: border-color 0.15s, box-shadow 0.15s; } .field-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .field-input .lead-icon { color: var(--muted); display: inline-flex; } .field-input input { flex: 1; background: transparent; border: none; outline: none; font-family: inherit; font-size: 13.5px; color: var(--text-strong); min-width: 0; } .field-input input::placeholder { color: var(--muted); } /* ---------- Filter pills ---------- */ .pill-row { display: flex; gap: 8px; flex-wrap: wrap; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--surface); color: var(--text); border: 1px solid var(--border); cursor: pointer; } .pill:hover { background: var(--surface-alt); } .pill.active { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; } /* ---------- Error / flash ---------- */ .error { color: #dc2626; font-size: 13px; padding: 10px 12px; margin-bottom: 16px; background: color-mix(in srgb, #dc2626 8%, transparent); border: 1px solid color-mix(in srgb, #dc2626 25%, transparent); border-radius: var(--radius); } :root[data-theme="dark"] .error { color: #fca5a5; } /* ===================================================================== * AUTH PAGES — login / register (split-panel layout) * ================================================================== */ body.auth { display: flex; min-height: 100vh; overflow: hidden; } .auth-brand { flex: 1.05; padding: 48px; background: var(--surface-alt); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: relative; overflow: hidden; } .auth-brand .brand-row { display: flex; align-items: center; gap: 10px; } .auth-brand .brand-row .brand-name { font-size: 16px; font-weight: 600; color: var(--text-strong); } .auth-brand .brand-row .brand-mark { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; } .auth-brand .pitch { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 440px; } .auth-brand h1 { font-size: 40px; font-weight: 600; color: var(--text-strong); letter-spacing: -1.4px; line-height: 1.05; margin-bottom: 16px; } .auth-brand h1 em { font-style: normal; color: var(--accent); } .auth-brand .pitch-sub { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 32px; } .auth-brand .model-chips { display: flex; gap: 8px; flex-wrap: wrap; } .auth-brand .model-chips span { font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 500; } .auth-brand .copyright { font-size: 12px; color: var(--muted); } .auth-brand .dots { position: absolute; top: 0; right: 0; width: 260px; height: 260px; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 14px 14px; opacity: 0.6; pointer-events: none; } .auth-form-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; position: relative; } .auth-form-wrap .corner-switch { position: absolute; top: 20px; right: 24px; } .auth-form { width: 100%; max-width: 360px; } .auth-form h2 { font-size: 26px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.6px; margin-bottom: 6px; } .auth-form .subtitle { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; } .auth-form .divider { display: flex; align-items: center; gap: 10px; margin: 22px 0; color: var(--muted); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; } .auth-form .divider::before, .auth-form .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-form .auth-link { text-align: center; margin-top: 20px; font-size: 13px; color: var(--muted); } .auth-form .auth-link a { font-weight: 500; } @media (max-width: 820px) { body.auth { flex-direction: column; overflow: auto; } .auth-brand { padding: 32px 24px; border-right: none; border-bottom: 1px solid var(--border); } .auth-brand h1 { font-size: 32px; } .auth-brand .pitch { padding: 16px 0; } } /* ===================================================================== * LIST PAGE — my cheat sheets * ================================================================== */ .main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 60px; } .page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .page-header h1 { font-size: 26px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.6px; } .page-header .subtitle { font-size: 13.5px; color: var(--muted); margin-top: 4px; } .sheets-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .sheet-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; min-height: 180px; text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s; } .sheet-card:hover { border-color: var(--border-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.05); text-decoration: none; } .sheet-card .card-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .sheet-card .card-title { font-size: 15px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.2px; line-height: 1.3; } .sheet-card .card-prompt { font-size: 13px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .tag-pill { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--tag-bg); color: var(--text); font-weight: 500; border: 1px solid var(--tag-border); } .tag-pill.overflow { background: transparent; border-color: transparent; color: var(--muted); } .card-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); } .sheet-card.placeholder { border: 1.5px dashed var(--border); background: transparent; box-shadow: none; align-items: center; justify-content: center; text-align: center; color: var(--muted); gap: 8px; } .sheet-card.placeholder:hover { border-color: var(--accent); color: var(--accent); } .sheet-card.placeholder .plus-ring { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-alt); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .sheet-card.placeholder .placeholder-label { font-weight: 500; } .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 80px 24px; gap: 12px; } .empty-state h2 { font-size: 22px; font-weight: 600; color: var(--text-strong); } .empty-state p { font-size: 15px; color: var(--muted); max-width: 360px; } /* ===================================================================== * CHEAT SHEET VIEW — masonry + category cards * ================================================================== */ .cheatsheet-main { max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; } .breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; } .breadcrumbs .sep { color: var(--muted); opacity: 0.5; } .breadcrumbs .current { color: var(--text-strong); font-weight: 500; } .hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; } .hero h1 { font-size: 26px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.6px; line-height: 1.1; } .hero .hero-sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; } .hero-actions { display: flex; gap: 8px; flex-shrink: 0; } /* Masonry grid — kept from original, layout engine still in script.js */ .grid { position: relative; width: 100%; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 14px 12px; position: absolute; overflow: hidden; width: var(--col-w); box-shadow: var(--shadow-sm); transition: top 0.25s ease, left 0.25s ease; cursor: grab; user-select: none; } .card:active:not(.resizing) { cursor: grabbing; } .card.resizing { cursor: ew-resize; transition: none; } .card.no-transition { transition: none; } .card::after { content: ''; position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 2px; background: var(--border-strong); opacity: 0; transition: opacity 0.15s; pointer-events: none; } .card:hover::after { opacity: 1; } .card h2 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.1px; margin-bottom: 10px; } .card h2::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .card h2 .count { margin-left: auto; font-size: 11px; color: var(--muted); font-family: 'Geist Mono', ui-monospace, monospace; background: var(--surface-alt); padding: 1px 6px; border-radius: 4px; font-weight: 400; letter-spacing: 0.2px; } /* per-category accent (drives the dot + important-tag tint) */ .c1 { --accent: var(--c1); } .c2 { --accent: var(--c2); } .c3 { --accent: var(--c3); } .c4 { --accent: var(--c4); } .c5 { --accent: var(--c5); } .c6 { --accent: var(--c6); } .c7 { --accent: var(--c7); } .c8 { --accent: var(--c8); } .c9 { --accent: var(--c1); } .tags { display: flex; flex-wrap: wrap; gap: 4px; } .tag { font-size: 11.5px; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--tag-bg); color: var(--text); border: 1px solid var(--tag-border); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .tag:hover { background: var(--tag-hover-bg); color: var(--text-strong); border-color: var(--border-strong); } .tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tag.strong { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text-strong); font-weight: 500; border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .tag.strong:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } footer { margin-top: 36px; padding: 24px 0; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--footer-text); text-align: center; letter-spacing: 0.3px; } /* ===================================================================== * AI MODAL — explanation + chat * ================================================================== */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--overlay); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; transform: translateY(12px); transition: transform 0.2s; overflow: hidden; } .modal-overlay.active .modal { transform: translateY(0); } .modal-close { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; } .modal-close:hover { background: var(--surface-alt); color: var(--text-strong); border-color: var(--border); } .modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .modal-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .modal-avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal-title { font-size: 14.5px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.1px; } .modal-subtitle { font-size: 11.5px; color: var(--muted); } .modal-controls { margin-left: auto; display: flex; align-items: center; gap: 6px; } .modal-select { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12px; font-family: inherit; cursor: pointer; outline: none; } .modal-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .modal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; } .modal-btn:hover { background: var(--surface-alt); color: var(--text-strong); } .modal-btn.primary { background: var(--accent); color: #fff; border-color: transparent; } .modal-btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } .modal-btn:disabled { opacity: 0.5; cursor: not-allowed; } .modal-body { overflow-y: auto; padding: 16px 18px; font-size: 13.5px; line-height: 1.65; } .modal-body p, .modal-body ul, .modal-body ol, .modal-body table, .modal-body pre { margin-bottom: 14px; } .modal-body h1, .modal-body h2, .modal-body h3 { color: var(--text-strong); letter-spacing: -0.3px; margin-top: 20px; margin-bottom: 8px; } .modal-body h1 { font-size: 18px; font-weight: 600; } .modal-body h2 { font-size: 16px; font-weight: 600; } .modal-body h3 { font-size: 14px; font-weight: 600; } .modal-body ul, .modal-body ol { padding-left: 22px; } .modal-body li { margin-bottom: 4px; } .modal-body code { font-family: 'Geist Mono', ui-monospace, monospace; background: var(--accent-soft); color: var(--accent-text); padding: 1px 6px; border-radius: 4px; font-size: 12px; } .modal-body pre { background: var(--surface-alt); border: 1px solid var(--border); padding: 12px 14px; border-radius: var(--radius); overflow-x: auto; } .modal-body pre code { background: transparent; color: var(--text); padding: 0; } .modal-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .modal-body th, .modal-body td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; } .modal-body th { background: var(--surface-alt); color: var(--text-strong); font-weight: 600; } .modal-body blockquote { border-left: 3px solid var(--accent); padding-left: 14px; margin-left: 0; color: var(--muted); font-style: italic; } .loader { display: none; width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin: 20px auto; animation: ac-spin 0.9s linear infinite; } @keyframes ac-spin { to { transform: rotate(360deg); } } /* Chat */ .chat-modal { max-width: 520px; } .chat-history { display: flex; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; padding: 14px 16px; } .chat-message { padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.55; width: fit-content; max-width: 90%; } .chat-message.user { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .chat-message.ai { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; } .chat-message.ai p:last-child { margin-bottom: 0; } .chat-input-area { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-alt); } .chat-input-area input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-family: inherit; font-size: 13px; color: var(--text-strong); outline: none; } .chat-input-area input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .chat-input-area .send-btn { width: 34px; height: 34px; border-radius: var(--radius); background: var(--accent); color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .chat-input-area .send-btn:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } /* ===================================================================== * Boss key — unchanged behavior, minor polish * ================================================================== */ #bossScreen { position: fixed; inset: 0; z-index: 99999; background: #ffffff; color: #202124; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: arial, sans-serif; } :root[data-theme="dark"] #bossScreen { background: #202124; color: #e8eaed; } .boss-content { display: flex; flex-direction: column; align-items: center; margin-top: -10vh; width: 100%; } .boss-logo { font-size: 88px; font-weight: 500; letter-spacing: -3px; margin-bottom: 25px; user-select: none; font-family: 'Product Sans', arial, sans-serif; } .boss-search { width: 100%; max-width: 584px; margin-bottom: 30px; position: relative; display: flex; align-items: center; } .boss-search .search-icon { position: absolute; left: 14px; width: 20px; height: 20px; fill: #9aa0a6; } .boss-search input { width: 100%; padding: 12px 20px 12px 44px; font-size: 16px; border: 1px solid #dfe1e5; border-radius: 24px; outline: none; background: transparent; color: inherit; font-family: inherit; } .boss-search input:hover, .boss-search input:focus { box-shadow: 0 1px 6px rgba(32, 33, 36, .28); border-color: rgba(223, 225, 229, 0); } :root[data-theme="dark"] .boss-search input { border-color: #5f6368; } :root[data-theme="dark"] .boss-search input:focus, :root[data-theme="dark"] .boss-search input:hover { box-shadow: 0 1px 6px rgba(23, 23, 23, 0.9); background: #303134; border-color: #303134; } .boss-buttons { display: flex; gap: 12px; } .boss-buttons button { background-color: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px; color: #3c4043; font-family: inherit; font-size: 14px; margin: 11px 4px; padding: 0 16px; line-height: 27px; height: 36px; min-width: 54px; cursor: pointer; user-select: none; } .boss-buttons button:hover { box-shadow: 0 1px 1px rgba(0, 0, 0, .1); border: 1px solid #dadce0; color: #202124; } :root[data-theme="dark"] .boss-buttons button { background-color: #303134; border: 1px solid #303134; color: #e8eaed; } :root[data-theme="dark"] .boss-buttons button:hover { background-color: #444746; border: 1px solid #444746; } /* ===================================================================== * Responsive + a11y + print * ================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } @media (max-width: 720px) { .site-header { padding: 0 14px; } .site-header nav, .site-header .search { display: none; } .hero { flex-direction: column; align-items: flex-start; } .hero-actions { flex-wrap: wrap; } .grid .card { position: relative !important; width: 100% !important; left: auto !important; top: auto !important; } .grid { display: flex; flex-direction: column; gap: 12px; height: auto !important; } } @media print { body { background: #fff !important; color: #111 !important; padding: 0; } .site-header, .hero-actions, .modal-overlay, #bossScreen, footer { display: none !important; } .grid .card { position: relative !important; width: auto !important; left: auto !important; top: auto !important; break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; border-color: #d1d5db !important; } .grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px; height: auto !important; } .tag { border-color: #d1d5db !important; background: #f9fafb !important; color: #111 !important; } } /* Layout spread mode — remove max-width cap from main, re-apply to header elements */ body.grid-spread .cheatsheet-main { max-width: none; padding-left: 0; padding-right: 0; } body.grid-spread .breadcrumbs { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } body.grid-spread .hero { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } body.grid-spread #sortableGrid { padding: 0 16px; } #layoutBtn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); } /* New Cheat Sheet form */ .new-sheet-form { max-width: 720px; display: flex; flex-direction: column; gap: 24px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 13px; font-weight: 500; color: var(--text); } .form-field .label-optional { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; } .form-field input[type="text"], .form-field textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; width: 100%; transition: border-color .15s, box-shadow .15s; } .form-field input[type="text"]:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .form-field textarea { resize: vertical; min-height: 120px; font-family: inherit; line-height: 1.5; } .form-field input[type="file"] { font: inherit; color: var(--text); padding: 8px 0; } .form-field .help { font-size: 12px; color: var(--muted); margin: 0; } .form-field .field-error { font-size: 12px; color: #b91c1c; margin: 0; } [data-theme="dark"] .form-field .field-error { color: #fca5a5; } .form-global-error { background: color-mix(in srgb, #dc2626 12%, transparent); border: 1px solid color-mix(in srgb, #dc2626 40%, transparent); color: #b91c1c; padding: 10px 14px; border-radius: 8px; margin-bottom: 20px; } [data-theme="dark"] .form-global-error { color: #fca5a5; } .form-global-error p { margin: 0; } .form-actions { display: flex; gap: 10px; align-items: center; } .form-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 0; } .form-loading .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .new-sheet-form button[disabled] { opacity: .6; cursor: wait; }