/* ===== Visual refresh (2026-10-27, free + Pro release) =====
   Loaded after app.css. Bundled Inter instead of the Google Fonts link, a branded gradient header
   on the home screen and the workspace bar (fixed colours, so dark mode stays readable), a drop
   card, pill tabs, and softer cards. Nothing here changes behaviour. */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
    --m2-font: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --m2-mono: 'Cascadia Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
    --m2-radius: 6px;
    --m2-radius-lg: 10px;
    --cfc-grad: linear-gradient(120deg, #1e1b4b 0%, #3730a3 48%, #6d28d9 100%);
    --cfc-ink: #ffffff;
    --cfc-ink-dim: rgba(255, 255, 255, 0.74);
}
[data-accent="indigo"] { --m2-accent: #6366f1; --m2-accent-hover: #818cf8; --m2-accent-dim: rgba(99, 102, 241, 0.14); }
[data-theme="light"] { --m2-bg-primary: #f3f4f9; --m2-border: #dfe2ea; --cfc-card-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 14px rgba(17, 24, 39, 0.05); }
[data-theme="dark"] { --cfc-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.25); }
body { -webkit-font-smoothing: antialiased;
    /* keystone-pro.js panels and cards follow the app's theme */
    --ks-surface: var(--m2-bg-surface); --ks-raise: var(--m2-bg-tertiary); --ks-text: var(--m2-text-primary);
    --ks-muted: var(--m2-text-secondary); --ks-dim: var(--m2-text-muted); --ks-border: var(--m2-border);
    --ks-border-strong: var(--m2-border-light); --ks-accent: var(--m2-accent); --ks-ok: var(--m2-success); --ks-font: var(--m2-font); }

/* ---- Home screen: one scrolling page ---- */
.landing { overflow-y: auto; }
.landing-cols { overflow: visible; flex: none; }
.landing-right { overflow: visible; flex: none; padding: 8px 32px 32px; }

.cfc-hero { background: var(--cfc-grad); color: var(--cfc-ink); padding: 22px 32px 70px; position: relative; flex-shrink: 0; overflow: hidden; }
.cfc-hero::after { content: ''; position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.13), transparent 65%); pointer-events: none; }
.cfc-hero-row { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; }
.cfc-hero-icon { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); flex-shrink: 0; }
.cfc-hero-text { flex: 1; min-width: 0; }
.cfc-hero-text h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; color: var(--cfc-ink); }
.cfc-hero-text p { font-size: 13px; color: var(--cfc-ink-dim); margin-top: 3px; }
.cfc-hero-actions { display: flex; align-items: center; gap: 6px; }
.cfc-hero .ap-btn { color: var(--cfc-ink); background: rgba(255, 255, 255, 0.12); border-radius: 8px; width: 34px; height: 34px; }
.cfc-hero .ap-btn:hover { background: rgba(255, 255, 255, 0.24); color: var(--cfc-ink); }
.cfc-hero .ap-panel { color: var(--m2-text-primary); }
.cfc-hero:has(.ap-panel.open) { overflow: visible; z-index: 50; }

/* Pro pill (keystone-pro.js fills it; ks-pro-pill styles come from there) */
.cfc-pill, .cfc-pill-ws { margin-right: 4px; }

/* ---- Drop card ---- */
.cfc-drop { position: relative; z-index: 3; margin: -46px 32px 18px; background: var(--m2-bg-surface); border: 1.5px dashed var(--m2-border-light); border-radius: 16px; padding: 20px 24px; display: flex; align-items: center; gap: 20px; box-shadow: 0 10px 30px rgba(30, 27, 75, 0.14); transition: border-color 0.15s, background 0.15s, transform 0.15s; }
[data-theme="dark"] .cfc-drop { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.cfc-drop-ic { width: 58px; height: 58px; border-radius: 14px; background: var(--m2-accent-dim); color: var(--m2-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cfc-drop-ic svg { width: 32px; height: 32px; }
.cfc-drop-text { flex: 1; min-width: 0; }
.cfc-drop-text h2 { font-size: 16px; font-weight: 650; color: var(--m2-text-primary); }
.cfc-drop-text p { font-size: 12.5px; color: var(--m2-text-secondary); margin-top: 4px; line-height: 1.5; }
.cfc-drop-btns { display: flex; gap: 8px; flex-shrink: 0; }
.cfc-btn { font-family: var(--m2-font); font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 9px; border: 1px solid var(--m2-border-light); background: var(--m2-bg-secondary); color: var(--m2-text-primary); cursor: pointer; transition: background 0.12s, transform 0.1s, box-shadow 0.12s; white-space: nowrap; }
.cfc-btn:hover { background: var(--m2-bg-hover); }
.cfc-btn:active { transform: scale(0.97); }
.cfc-btn.primary { background: linear-gradient(135deg, #4f46e5, #7c3aed); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35); }
.cfc-btn.primary:hover { background: linear-gradient(135deg, #4338ca, #6d28d9); }
body.cfc-dragging .cfc-drop { border-color: var(--m2-accent); background: var(--m2-accent-dim); transform: scale(1.01); }

/* ---- Format / sample browser ---- */
.card-browser { gap: 14px; }
.cb-tabs { border-bottom: none; background: var(--m2-bg-tertiary); padding: 3px; border-radius: 10px; align-self: flex-start; gap: 2px; margin: 0; }
.cb-tab { font-size: 12.5px; font-weight: 600; padding: 7px 18px; border-radius: 8px; border-bottom: none; margin: 0; color: var(--m2-text-secondary); }
.cb-tab:hover { color: var(--m2-text-primary); }
.cb-tab.active { background: var(--m2-bg-surface); color: var(--m2-text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); border-bottom: none; }
.fmt-cat-bar { gap: 6px; }
.fmt-cat-tab { font-size: 11.5px; padding: 5px 13px; background: var(--m2-bg-surface); color: var(--m2-text-secondary); }
.fmt-cat-tab.active { font-weight: 600; }
.fmt-search { font-size: 12.5px; padding: 7px 12px; width: 220px; border-radius: 9px; background: var(--m2-bg-surface); }
.format-grid, .sample-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.format-card, .sample-card { border-radius: 12px; padding: 12px 14px; gap: 12px; box-shadow: var(--cfc-card-shadow); border-color: var(--m2-border); }
.format-card.supported:hover, .sample-card:hover { background: var(--m2-bg-surface); box-shadow: 0 8px 22px rgba(30, 27, 75, 0.14); }
.format-card .fc-icon, .sample-card .sc-icon { width: 54px; height: 42px; border-radius: 9px; font-size: 9px; }
.format-card .fc-name, .sample-card .sc-name { font-size: 13px; font-weight: 600; }
.format-card .fc-desc, .sample-card .sc-desc { font-size: 11.5px; color: var(--m2-text-secondary); }

/* ---- Workspace bar ---- */
.topbar { background: var(--cfc-grad); border-bottom: none; height: 50px; padding: 0 14px; box-shadow: 0 2px 10px rgba(30, 27, 75, 0.25); }
.cfc-mark { display: flex; align-items: center; margin-right: 6px; }
.cfc-mark img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.topbar .back-btn, .topbar .menu-btn, .topbar .ap-btn, .topbar .icon-btn { color: var(--cfc-ink-dim); }
.topbar .back-btn:hover, .topbar .menu-btn:hover, .topbar .menu-btn.active, .topbar .ap-btn:hover, .topbar .icon-btn:hover { background: rgba(255, 255, 255, 0.16); color: var(--cfc-ink); }
.topbar .back-btn, .topbar .menu-btn { font-weight: 500; }
.topbar .ap-panel, .topbar .dropdown { color: var(--m2-text-primary); }
.content-tab.active { font-weight: 600; }

/* Excel export is Pro: mark it in the Export menu until Pro is unlocked */
html[data-ks-pro="0"] .dropdown-item[onclick*="exportAs('xlsx')"]::after { content: 'PRO'; margin-left: auto; padding-left: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: #7c3aed; }
html[data-ks-pro="0"] [data-theme="dark"] .dropdown-item[onclick*="exportAs('xlsx')"]::after { color: #c4b5fd; }

/* ---- Settings modal ---- */
.cfc-settings-modal { max-width: 560px; padding: 0; overflow: hidden; }
.cfc-settings-head { padding: 20px 26px 0; }
.cfc-settings-head h2 { font-size: 18px; font-weight: 700; color: var(--m2-text-primary); }
.cfc-settings-body { padding: 8px 26px 18px; overflow-y: auto; }
.cfc-settings-body h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--m2-text-muted); margin: 16px 0 8px; }
.cfc-settings-foot { padding: 12px 26px 18px; display: flex; justify-content: flex-end; border-top: 1px solid var(--m2-border); }
.cfc-settings-foot .modal-close { flex: none; padding: 8px 20px; }

.statusbar { background: var(--m2-bg-secondary); }

@media (max-width: 860px) {
    .cfc-drop { flex-wrap: wrap; }
    .cfc-drop-btns { width: 100%; }
    .cfc-hero-text p { display: none; }
}

/* Owned "PRO" pill on the gradient header and workspace bar: light text so it reads on violet */
html[data-ks-pro="1"] .cfc-hero .ks-pro-pill, html[data-ks-pro="1"] .topbar .ks-pro-pill { background: rgba(255, 255, 255, 0.16); color: #fde68a; box-shadow: inset 0 0 0 1px rgba(253, 230, 138, 0.55); }