/* * ================================================================ * planner.css — Sentinel Planner Modern Edition * ================================================================ * doc_id: planner.css * version: v1.7 * updated: 2026-04-14T03:00:00Z * supersedes: v1.6 (2026-04-05T15:00:00Z) * changes: BIZ-001: Pro waitlist email capture styles added. * .cl-land-waitlist, .cl-land-waitlist-inner, * .cl-land-waitlist-title, .cl-land-waitlist-sub, * .cl-land-waitlist-form, .cl-land-waitlist-input, * .cl-land-waitlist-btn. Mobile responsive. * BUG-NAV-001 Sign in text vertical on narrow screens * (white-space:nowrap). Phase 1.18 UX pass inherited. * redesigned as 20px circle with ::after 44px tap zone. * CRIT-3: Bottom-sheet modals on ≤640px — cl-modal-overlay * anchors to flex-end; cl-modal slides up with rounded * top corners and drag-handle ::before indicator. * HIGH-3: env(safe-area-inset-bottom) on #cl-app + footer. * Toast: .cl-toast button { pointer-events:all } (Undo fix). * Phase 1.18 original: .cl-skeleton-card + @keyframes * cl-shimmer, .cl-export-format-btn, .cl-enc-badge. * deployed: planner.sentinelmesh.io (Cloudflare Pages) * repo: sentinelmesh/sentinel-planner * depends_on: planner.js v5.9 * conflict_rule: If line count mismatch with docs, STOP and verify. * ================================================================ * Linear-inspired · DM Sans · Purple accent * Light default + Dark toggle via data-theme="dark" * WCAG AA compliant * ================================================================ * CHANGELOG: * 2026-03-24 Phase 1.13: +cl-view-toggle, cl-kb-board/col/card/detail, * kanban drag (cl-kb-card--dragging, cl-kb-col--drop/source), * tag cleanup (cl-tag-del, cl-tag-filter-count, --unused), * 44px touch targets, focus-visible on kanban buttons, * print hide (view toggle + detail), mobile responsive. * 2026-03-22 Phase 1.12: +cl-tag-user, cl-tag-bar, cl-tag-filter-btn * 2026-03-22 Phase 1.10: 44px touch targets on menu buttons (was 28px) * 2026-03-20 Brand: self-hosted fonts, PWA manifest * 2026-03-19 Multi-state items, status colors * 2026-03-17 Initial: edit mode removal, context menus, glass accent * ================================================================ */ /* ─── 1. SCOPED RESET ───────────────────────────────── */ #cl-app { max-width: 800px; margin: 0 auto; padding: 0 0 60px; font-size: 14px; line-height: 1.5; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } #cl-app *, #cl-app *::before, #cl-app *::after { box-sizing: border-box; } #cl-app div, #cl-app span, #cl-app button, #cl-app input, #cl-app textarea, #cl-app label, #cl-app a, #cl-app p, #cl-app h1, #cl-app h2, #cl-app h3 { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } #cl-app p { margin:0; padding:0; line-height:inherit; } #cl-app h2 { margin:0; padding:0; font-weight:700; line-height:1.2; font-size:inherit; } #cl-app a { color:inherit; text-decoration:none; } #cl-app a:hover { color:inherit; } #cl-app label { margin:0; font-weight:inherit; } /* ─── 2. LIGHT THEME (default) ───────────────────────── */ #cl-app { --accent:#7c3aed; --accent2:#8b5cf6; --accent-subtle:rgba(124,58,237,0.07); --accent-border:rgba(124,58,237,0.18); --accent-glow:rgba(124,58,237,0.1); --bg:#ffffff; --bg2:#fafafa; --bg3:#f4f4f5; --surface:#ffffff; --border:#e4e4e7; --border2:#d4d4d8; --text:#18181b; --text2:#52525b; --text3:#a1a1aa; --text-dim:#71717a; --green:#10b981; --green2:rgba(16,185,129,0.08); --green-border:rgba(16,185,129,0.2); --red:#ef4444; --red2:rgba(239,68,68,0.06); --red-border:rgba(239,68,68,0.18); --orange:#f59e0b; --blue:#3b82f6; --done-bg:rgba(16,185,129,0.05); --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04); --shadow-lg:0 4px 12px rgba(0,0,0,0.08); --r:8px; --r-lg:12px; --mono:'JetBrains Mono','SF Mono','Fira Code',monospace; color:var(--text); background:var(--bg); min-height:100vh; } /* ─── 3. DARK THEME ──────────────────────────────────── */ #cl-app[data-theme="dark"] { --accent:#8b5cf6; --accent2:#a78bfa; --accent-subtle:rgba(139,92,246,0.1); --accent-border:rgba(139,92,246,0.22); --accent-glow:rgba(139,92,246,0.12); --bg:#09090b; --bg2:#0f0f12; --bg3:#18181b; --surface:#18181b; --border:#27272a; --border2:#3f3f46; --text:#fafafa; --text2:#a1a1aa; --text3:#52525b; --text-dim:#71717a; --green:#34d399; --green2:rgba(52,211,153,0.1); --green-border:rgba(52,211,153,0.25); --red:#f87171; --red2:rgba(248,113,113,0.1); --red-border:rgba(248,113,113,0.2); --orange:#fbbf24; --blue:#60a5fa; --done-bg:rgba(52,211,153,0.06); --shadow:0 1px 3px rgba(0,0,0,0.3); --shadow-lg:0 4px 12px rgba(0,0,0,0.4); color:var(--text); } /* ─── 4. ANIMATIONS ──────────────────────────────────── */ @keyframes cl-up { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } @keyframes cl-spin { to{transform:rotate(360deg)} } @keyframes cl-shake { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-4px)} 70%{transform:translateX(4px)} } @keyframes cl-pop { 0%{transform:scale(0.92)} 60%{transform:scale(1.04)} 100%{transform:scale(1)} } @keyframes cl-pulse { 0%,100%{opacity:1} 50%{opacity:0.6} } .fade-up { animation:cl-up 0.2s ease both; } /* ─── 5. SPINNER ─────────────────────────────────────── */ #cl-app .cl-spinner { width:24px; height:24px; border:2.5px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:cl-spin 0.7s linear infinite; margin:0 auto 12px; } /* ─── 6. THEME TOGGLE ────────────────────────────────── */ #cl-app .cl-theme-toggle { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid var(--border); background:none; color:var(--text2); font-size:13px; font-weight:500; cursor:pointer; transition:all 0.15s; font-family:inherit; } #cl-app .cl-theme-toggle:hover { border-color:var(--accent); color:var(--accent); } /* ─── 7. AUTH ────────────────────────────────────────── */ #cl-app .cl-auth { max-width:380px; margin:0 auto; padding-top:40px; } #cl-app .cl-auth-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 24px; position:relative; box-shadow:var(--shadow-lg); } #cl-app .cl-auth-logo { font-size:32px; text-align:center; margin-bottom:8px; } #cl-app .cl-auth-logo-link { font-size:32px; text-align:center; margin-bottom:8px; cursor:pointer; opacity:0.8; transition:opacity 0.15s; } #cl-app .cl-auth-logo-link:hover { opacity:1; } #cl-app .cl-auth-title { font-size:20px; font-weight:700; color:var(--text); text-align:center; margin-bottom:4px; letter-spacing:-0.02em; } #cl-app .cl-auth-sub { font-size:13px; color:var(--text3); text-align:center; margin-bottom:20px; } #cl-app .cl-tabs { display:flex; gap:2px; background:var(--bg3); border-radius:var(--r); padding:3px; margin-bottom:18px; } #cl-app .cl-tab { flex:1; padding:7px; border:none; border-radius:6px; background:transparent; color:var(--text3); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; font-family:inherit; } #cl-app .cl-tab.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow); } #cl-app .cl-field { margin-bottom:12px; } #cl-app .cl-label { display:block; font-size:12px; font-weight:600; color:var(--text2); margin-bottom:4px; } #cl-app .cl-input { display:block; width:100%; background:var(--bg2); border:1px solid var(--border); color:var(--text); border-radius:var(--r); padding:9px 12px; font-size:14px; transition:border-color 0.15s,box-shadow 0.15s; font-family:inherit; } #cl-app .cl-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } #cl-app .cl-input.error { border-color:var(--red); animation:cl-shake 0.35s ease; } #cl-app .cl-input-hint { font-size:11px; color:var(--text3); margin-top:3px; } #cl-app .cl-age-field { margin-top:4px; } #cl-app .cl-age-label { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text2); cursor:pointer; user-select:none; } #cl-app .cl-age-cb { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; } #cl-app .cl-auth-error { display:none; background:var(--red2); border:1px solid var(--red-border); border-radius:var(--r); padding:9px 12px; font-size:13px; color:var(--red); margin-bottom:12px; } #cl-app .cl-auth-error.show { display:block; } #cl-app .cl-auth-success { display:none; background:#ecfdf5; border:1px solid #6ee7b7; border-radius:var(--r); padding:9px 12px; font-size:13px; color:#047857; margin-bottom:12px; } #cl-app .cl-auth-success.show { display:block; } [data-theme="dark"] #cl-app .cl-auth-success { background:#022c22; border-color:#065f46; color:#6ee7b7; } #cl-app .cl-auth-link { text-align:center; margin-top:12px; } #cl-app .cl-link-btn { background:none; border:none; color:var(--accent); font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; padding:4px 0; } #cl-app .cl-link-btn:hover { text-decoration:underline; } #cl-app .cl-link-btn--danger { color:var(--text3); font-size:12px; } #cl-app .cl-link-btn--danger:hover { color:var(--red); } #cl-app .cl-danger-zone { text-align:center; margin-top:40px; padding-top:20px; border-top:1px solid var(--border); } /* ─── 8. BUTTONS ─────────────────────────────────────── */ #cl-app .cl-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 14px; min-height:44px; border:none; border-radius:var(--r); font-size:13px; font-weight:600; line-height:1; cursor:pointer; transition:all 0.15s; text-decoration:none; white-space:nowrap; font-family:inherit; } #cl-app .cl-btn:hover:not(:disabled) { transform:translateY(-1px); } #cl-app .cl-btn:active:not(:disabled) { transform:translateY(0); } #cl-app .cl-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; } #cl-app .cl-btn-full { width:100%; margin-top:4px; } #cl-app .cl-btn-primary { background:var(--accent); color:#fff; } #cl-app .cl-btn-primary:hover:not(:disabled) { background:var(--accent2); } #cl-app .cl-btn-ghost { background:none; color:var(--text2); border:1px solid var(--border); } #cl-app .cl-btn-ghost:hover { border-color:var(--accent); color:var(--accent); } #cl-app .cl-btn-success { background:var(--green2); color:var(--green); border:1px solid var(--green-border); } #cl-app .cl-btn-danger { background:var(--red2); color:var(--red); border:1px solid var(--red-border); } #cl-app .cl-btn-warn { background:var(--accent-subtle); color:var(--accent); border:1px solid var(--accent-border); } #cl-app .cl-btn-sm { padding:5px 10px; font-size:12px; } /* ─── 9. APP HEADER ──────────────────────────────────── */ #cl-app .cl-header { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:8px; box-shadow:var(--shadow); } #cl-app .cl-header-top { display:flex; align-items:center; gap:14px; } #cl-app .cl-ring { position:relative; width:48px; height:48px; flex-shrink:0; overflow:hidden; } #cl-app .cl-ring svg { display:block; width:100%; height:100%; } #cl-app .cl-ring-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--accent); font-family:var(--mono); } #cl-app .cl-title-block { flex:1; min-width:0; } #cl-app .cl-title-block h2 { font-size:18px; font-weight:700; color:var(--text); margin-bottom:2px; letter-spacing:-0.02em; } #cl-app .cl-user-badge { font-size:12px; color:var(--accent); margin-bottom:3px; font-family:var(--mono); display:flex; align-items:center; gap:4px; } #cl-app .cl-prog-text { font-size:12px; color:var(--text3); margin-bottom:6px; } #cl-app .cl-progress-bar { height:3px; background:var(--bg3); border-radius:99px; overflow:hidden; } #cl-app .cl-progress-fill { height:100%; background:var(--accent); border-radius:99px; transition:width 0.4s ease; } #cl-app .cl-last-saved { font-size:11px; color:var(--text3); margin-top:4px; font-family:var(--mono); opacity:0.5; } #cl-app .cl-header-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); } #cl-app .cl-saving { font-size:11px; color:var(--accent); text-align:right; margin-top:4px; font-family:var(--mono); opacity:0.6; } /* ─── 10. COST STRIP ────────────────────────────────── */ #cl-app .cl-costs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px; } #cl-app .cl-cost-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:10px 8px; text-align:center; transition:border-color 0.15s; } #cl-app .cl-cost-card:hover { border-color:var(--border2); } #cl-app .cl-cost-icon { font-size:18px; margin-bottom:3px; } #cl-app .cl-cost-val { font-size:15px; font-weight:700; color:var(--accent); } #cl-app .cl-cost-lbl { font-size:11px; color:var(--text3); margin-top:2px; } /* ─── 11. SECTIONS ───────────────────────────────────── */ #cl-app .cl-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:6px; overflow:hidden; transition:border-color 0.15s; } #cl-app .cl-section:hover { border-color:var(--border2); } #cl-app .cl-section.complete { border-color:var(--green-border); } #cl-app .cl-sec-header { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; user-select:none; transition:background 0.1s; } #cl-app .cl-sec-header:hover { background:var(--bg2); } #cl-app .cl-sec-icon { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; background:var(--accent-subtle); } #cl-app .cl-sec-info { flex:1; min-width:0; } #cl-app .cl-sec-title { font-size:13px; font-weight:600; color:var(--text); } #cl-app .cl-sec-hint { font-size:11px; color:var(--text3); line-height:1.4; } #cl-app .cl-sec-right { display:flex; align-items:center; gap:8px; flex-shrink:0; } #cl-app .cl-sec-count { font-size:11px; font-weight:600; color:var(--text3); font-family:var(--mono); background:var(--bg3); padding:1px 8px; border-radius:20px; } #cl-app .cl-sec-count.done { color:var(--green); background:var(--green2); } #cl-app .cl-sec-bar { width:36px; height:3px; background:var(--bg3); border-radius:99px; overflow:hidden; } #cl-app .cl-sec-bar-fill { height:100%; border-radius:99px; transition:width 0.4s ease; } #cl-app .cl-chevron { font-size:10px; color:var(--text3); transition:transform 0.2s; display:flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; flex-shrink:0; line-height:1; } #cl-app .cl-chevron.open { transform:rotate(180deg); } #cl-app .cl-sec-del { padding:3px 8px; border-radius:6px; font-size:11px; font-weight:700; background:var(--red2); color:var(--red); border:1px solid var(--red-border); cursor:pointer; font-family:inherit; } /* ─── 12. ITEMS ──────────────────────────────────────── */ #cl-app .cl-items { border-top:1px solid var(--border); } #cl-app .cl-item { display:flex; align-items:flex-start; gap:10px; padding:8px 14px; border-bottom:1px solid var(--border); transition:background 0.1s; cursor:pointer; } #cl-app .cl-item:last-child { border-bottom:none; } #cl-app .cl-item:hover { background:var(--bg2); } #cl-app .cl-item.done { background:var(--done-bg); } #cl-app .cl-item.done .cl-item-name { text-decoration:line-through; color:var(--text3); } #cl-app .cl-item.done .cl-item-model { opacity:0.3; text-decoration:line-through; } #cl-app .cl-item.done .cl-item-price { opacity:0.3; text-decoration:line-through; } #cl-app .cl-item-num { font-size:10px; font-weight:700; color:var(--text3); width:20px; text-align:right; flex-shrink:0; padding-top:3px; font-family:var(--mono); } #cl-app .cl-item.done .cl-item-num { color:var(--green); opacity:0.5; } #cl-app .cl-cb { width:20px; height:20px; border-radius:50%; border:2px solid var(--border2); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.15s; background:transparent; margin-top:1px; cursor:pointer; position:relative; } #cl-app .cl-cb::after { content:''; position:absolute; inset:-12px; } /* 44px invisible tap zone */ #cl-app .cl-cb.done { background:var(--green); border-color:var(--green); } #cl-app .cl-cb.done svg { filter:brightness(0) invert(1); } #cl-app .cl-cb.in-progress { background:var(--blue,#3b82f6); border-color:var(--blue,#3b82f6); } #cl-app .cl-cb:hover { border-color:var(--accent); } #cl-app .cl-cb.on { background:var(--green); border-color:var(--green); animation:cl-pop 0.2s ease; } #cl-app .cl-cb.in-progress { background:var(--orange); border-color:var(--orange); animation:cl-pop 0.2s ease; } #cl-app .cl-item.in-progress { box-shadow:inset 3px 0 0 var(--orange); } #cl-app .cl-item.in-progress .cl-item-num { color:var(--orange); } #cl-app .cl-item-body { flex:1; min-width:0; } #cl-app .cl-item-name { font-size:13px; font-weight:500; color:var(--text); line-height:1.4; display:flex; align-items:center; flex-wrap:wrap; gap:6px; } #cl-app .cl-item-model { font-size:12px; color:var(--accent); margin-top:1px; opacity:0.7; font-family:var(--mono); } #cl-app .cl-item-detail { font-size:12px; color:var(--text2); margin-top:4px; line-height:1.5; display:none; border-left:2px solid var(--accent-border); padding-left:8px; } #cl-app .cl-item-detail.open { display:block; } #cl-app .cl-expand-btn { font-size:11px; color:var(--text3); background:none; border:none; padding:0; margin-top:3px; display:inline-flex; align-items:center; gap:3px; transition:color 0.15s; cursor:pointer; font-family:inherit; } #cl-app .cl-expand-btn:hover { color:var(--accent); } #cl-app .cl-item-right { display:flex; align-items:center; gap:8px; flex-shrink:0; } #cl-app .cl-item-price { font-family:var(--mono); font-size:13px; font-weight:600; white-space:nowrap; } #cl-app .price-free { color:var(--green); } #cl-app .price-dash { color:var(--text3); } #cl-app .price-cost { color:var(--accent); } /* ─── 13. TAGS ───────────────────────────────────────── */ #cl-app .cl-tag { display:inline-flex; align-items:center; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; font-family:var(--mono); } #cl-app .tag-warn { background:var(--red2); color:var(--red); border:1px solid var(--red-border); } #cl-app .tag-free { background:var(--green2); color:var(--green); border:1px solid var(--green-border); } #cl-app .tag-pri-high { background:var(--red2); color:var(--red); border:1px solid var(--red-border); } #cl-app .tag-pri-medium { background:rgba(245,158,11,0.08); color:var(--orange); border:1px solid rgba(245,158,11,0.2); } #cl-app .tag-pri-low { background:var(--accent-subtle); color:var(--accent); border:1px solid var(--accent-border); } /* ─── 14. EDIT CONTROLS ──────────────────────────────── */ #cl-app .cl-edit-form { flex:1; display:flex; flex-direction:column; gap:5px; } #cl-app .cl-form-input { display:block; width:100%; background:var(--bg2); border:1px solid var(--border); color:var(--text); border-radius:var(--r); padding:7px 10px; font-size:13px; transition:border-color 0.15s; font-family:inherit; } #cl-app .cl-form-input:focus { outline:none; border-color:var(--accent); } #cl-app .cl-form-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } #cl-app .cl-add-row { padding:8px 14px; border-top:1px solid var(--border); } #cl-app .cl-add-btn { background:none; border:1px dashed var(--border); color:var(--text3); padding:6px 12px; border-radius:var(--r); font-size:12px; cursor:pointer; width:100%; transition:all 0.15s; font-family:inherit; } #cl-app .cl-add-btn:hover { border-color:var(--accent); color:var(--accent); } #cl-app .cl-add-section { margin:8px 0 20px; } /* ─── 15. LOG PANEL ──────────────────────────────────── */ #cl-app .cl-log-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; margin-bottom:8px; max-height:300px; overflow-y:auto; } #cl-app .cl-log-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } #cl-app .cl-log-title { font-weight:700; font-size:14px; color:var(--text); } #cl-app .cl-log-empty { font-size:13px; color:var(--text3); text-align:center; padding:16px; } #cl-app .cl-log-entry { display:flex; gap:8px; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; } #cl-app .cl-log-entry:last-child { border-bottom:none; } #cl-app .cl-log-time { font-size:11px; color:var(--text3); white-space:nowrap; padding-top:1px; min-width:90px; font-family:var(--mono); } #cl-app .cl-log-action { font-size:11px; padding:1px 6px; border-radius:4px; white-space:nowrap; font-weight:600; font-family:var(--mono); } #cl-app .log-check { background:var(--green2); color:var(--green); } #cl-app .log-uncheck { background:var(--red2); color:var(--red); } #cl-app .log-edit { background:var(--accent-subtle); color:var(--accent); } #cl-app .log-login { background:rgba(59,130,246,0.08); color:var(--blue); } #cl-app .log-register { background:var(--accent-subtle); color:var(--accent); } #cl-app .cl-log-detail { font-size:13px; color:var(--text2); flex:1; } #cl-app .cl-saving { font-family:var(--mono); } /* ─── 16. TOAST ──────────────────────────────────────── */ .cl-toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600; font-family:'DM Sans',-apple-system,sans-serif; box-shadow:0 4px 20px rgba(0,0,0,0.18); z-index:9999; white-space:nowrap; animation:cl-up 0.2s ease; pointer-events:none; background:#18181b; border:1px solid #3f3f46; color:#fafafa; } .cl-toast button { pointer-events:all; } /* ─── 17. PRINT ──────────────────────────────────────── */ @media print { #cl-app{background:#fff!important;color:#18181b!important} #cl-app .cl-header-actions,#cl-app .cl-theme-toggle,#cl-app .cl-item-menu-btn,#cl-app .cl-sec-menu-btn,#cl-app .cl-context-menu,#cl-app .cl-menu-overlay,#cl-app .cl-add-row,#cl-app .cl-add-section,#cl-app .cl-log-panel,#cl-app .cl-saving,#cl-app .cl-last-saved,#cl-app .cl-expand-btn,#cl-app .cl-drag-handle,#cl-app .cl-offline-banner,#cl-app .cl-swipe-bg,#cl-app .cl-view-toggle,#cl-app .cl-kb-detail,#cl-app .cl-kb-list-link,#cl-app .cl-tag-add,.cl-toast{display:none!important} #cl-app .cl-header{background:#fff!important;border:1px solid #e4e4e7!important;box-shadow:none!important} #cl-app .cl-section{border:1px solid #e4e4e7!important;background:#fff!important;break-inside:avoid;box-shadow:none!important} #cl-app .cl-item-detail{display:block!important} @page{margin:15mm;size:A4} } /* ─── 18. MOBILE ─────────────────────────────────────── */ @media (max-width:500px) { #cl-app{padding:0 0 40px} #cl-app .cl-header{padding:12px 14px} #cl-app .cl-header-top{flex-direction:column;align-items:center;text-align:center;gap:8px} #cl-app .cl-ring{width:56px;height:56px} #cl-app .cl-title-block{width:100%} #cl-app .cl-title-block h2{font-size:16px} #cl-app .cl-user-badge{justify-content:center} #cl-app .cl-header-actions{gap:4px} #cl-app .cl-btn{font-size:12px;padding:6px 10px} #cl-app .cl-sec-header{padding:8px 12px} #cl-app .cl-item{padding:7px 12px} #cl-app .cl-costs{gap:6px} #cl-app .cl-cost-val{font-size:13px} } /* ─── 19. DRAG HANDLES ───────────────────────────────── */ #cl-app .cl-drag-handle { display:flex; align-items:center; justify-content:center; width:22px; min-width:22px; height:24px; cursor:grab; color:var(--text3); opacity:0.3; transition:opacity 0.15s,color 0.15s,background 0.15s; border-radius:4px; flex-shrink:0; user-select:none; touch-action:none; -webkit-user-select:none; } #cl-app .cl-drag-handle:hover,#cl-app .cl-drag-handle:focus-visible { opacity:1; color:var(--accent); background:var(--accent-subtle); outline:none; } #cl-app .cl-drag-handle:active { cursor:grabbing; } #cl-app .cl-drag-handle svg { pointer-events:none; } #cl-drag-ghost { cursor:grabbing!important; } #cl-app .cl-kb-grabbed { background:var(--accent-subtle)!important; outline:2px solid var(--accent)!important; outline-offset:2px; border-radius:var(--r); } #cl-app .cl-dragging-source { opacity:0.18!important; pointer-events:none; } #cl-app [data-item].dnd-shift-up { transform:translateY(-3px); transition:transform 0.15s ease; } #cl-app [data-item].dnd-shift-down { transform:translateY(3px); transition:transform 0.15s ease; } #cl-app .cl-section.dnd-shift-up { transform:translateY(-5px); transition:transform 0.15s ease; } #cl-app .cl-section.dnd-shift-down { transform:translateY(5px); transition:transform 0.15s ease; } .cl-drop-line { position:fixed; height:2px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),var(--accent),transparent); border-radius:99px; pointer-events:none; z-index:9998; display:none; box-shadow:0 0 6px var(--accent-glow); } /* ─── 20. MOBILE MOVE BUTTONS ────────────────────────── */ @media (max-width:600px) { #cl-app .cl-drag-handle{width:44px;min-width:44px;height:44px;margin:-10px -8px;opacity:0.5} } /* ─── 21. OFFLINE BANNER ─────────────────────────────── */ #cl-app .cl-offline-banner { background:var(--red2); border:1px solid var(--red-border); border-radius:var(--r); padding:8px 14px; font-size:12px; color:var(--red); text-align:center; margin-bottom:8px; font-family:var(--mono); font-weight:600; } /* ─── 22. VIEW TRANSITIONS ───────────────────────────── */ @starting-style { #cl-app .cl-item{opacity:0;transform:translateY(6px)} #cl-app .cl-section{opacity:0;transform:translateY(10px)} } @keyframes cl-vt-out { to{opacity:0;transform:translateY(-4px) scale(0.98)} } @keyframes cl-vt-in { from{opacity:0;transform:translateY(4px) scale(0.98)} } ::view-transition-old(*) { animation:150ms ease-out both cl-vt-out; } ::view-transition-new(*) { animation:200ms ease-out both cl-vt-in; } ::view-transition-group(*) { animation-duration:220ms; animation-timing-function:cubic-bezier(0.34,1.2,0.64,1); } /* ════════════════════════════════════════════════════════ Dashboard, Onboarding, Templates ════════════════════════════════════════════════════════ */ .cl-loading-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; } .cl-loading-inner { text-align:center; } .cl-loading-text { color:var(--accent); font-family:var(--mono); font-size:13px; margin-top:12px; } .cl-dash-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px 12px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; background:var(--bg); } .cl-dash-header-left { display:flex; align-items:center; gap:8px; } .cl-dash-logo { font-size:20px; } .cl-dash-title { font-size:17px; font-weight:700; color:var(--accent); letter-spacing:-0.02em; } .cl-dash-header-right { display:flex; align-items:center; gap:8px; } .cl-dash-user { font-size:12px; color:var(--text-dim); font-family:var(--mono); } #cl-app .cl-btn--new-project { display:block; margin:16px 24px 4px; width:calc(100% - 48px); font-size:14px; padding:10px; } #cl-app .cl-btn--gold { background:var(--accent); color:#fff; border:none; font-weight:700; } #cl-app .cl-btn--gold:hover { background:var(--accent2); } .cl-dash-section { padding:8px 24px 40px; } .cl-project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; margin-top:12px; } .cl-project-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; transition:all 0.15s; position:relative; } .cl-project-card:hover { border-color:var(--accent-border); box-shadow:var(--shadow-lg); } .cl-project-card--archived { opacity:0.5; cursor:default!important; } .cl-project-card--archived:hover { transform:none; border-color:var(--border); box-shadow:none; } .cl-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; } .cl-card-icon { font-size:24px; } .cl-card-ring { position:relative; display:inline-block; } .cl-card-ring-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; font-family:var(--mono); } .cl-card-name { font-size:14px; font-weight:600; color:var(--text); margin-bottom:4px; line-height:1.3; } .cl-card-meta { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-bottom:8px; } .cl-card-countdown { font-size:10px; color:var(--text-dim); margin-bottom:6px; font-family:var(--mono); } .cl-card-countdown.urgent { color:var(--red); font-weight:700; } .cl-card-actions { display:flex; gap:6px; justify-content:flex-end; } .cl-card-due { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; padding:2px 8px; border-radius:20px; margin-top:6px; background:var(--bg3); color:var(--text-dim); } .cl-card-due.soon { background:rgba(245,158,11,0.1); color:#d97706; border:1px solid rgba(245,158,11,0.2); } .cl-card-due.overdue { background:var(--red2); color:var(--red); border:1px solid var(--red-border); animation:cl-pulse 2s ease-in-out infinite; } .cl-card-dropdown { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:4px; min-width:150px; box-shadow:var(--shadow-lg); z-index:100; } .cl-dropdown-item { display:block; width:100%; text-align:left; padding:7px 10px; background:none; border:none; color:var(--text); font-size:13px; border-radius:6px; cursor:pointer; font-family:inherit; } .cl-dropdown-item:hover { background:var(--bg3); } .cl-dropdown-item--danger:hover { background:var(--red2); color:var(--red); } .cl-dash-empty { text-align:center; padding:48px 24px; color:var(--text-dim); } .cl-dash-empty-icon { font-size:36px; margin-bottom:12px; opacity:0.5; } .cl-dash-empty-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:4px; } .cl-dash-empty-sub { font-size:13px; max-width:300px; margin:0 auto; } .cl-dash-archived { margin-top:24px; } .cl-arch-toggle { background:none; border:none; color:var(--text-dim); font-size:12px; cursor:pointer; padding:0; display:flex; align-items:center; gap:6px; font-family:inherit; } .cl-arch-toggle:hover { color:var(--text); } .cl-arch-arrow { font-size:10px; } .cl-arch-body { margin-top:10px; } .cl-breadcrumb { display:flex; align-items:center; gap:4px; padding:10px 0 0; font-size:13px; color:var(--text-dim); } .cl-breadcrumb-back { background:none; border:none; color:var(--accent); font-size:13px; cursor:pointer; padding:0; font-family:inherit; } .cl-breadcrumb-back:hover { text-decoration:underline; } .cl-breadcrumb-sep { color:var(--border2); } .cl-breadcrumb-current { color:var(--text); font-weight:500; } .cl-confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; z-index:200; } .cl-confirm-dialog { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 20px 18px; max-width:340px; width:90%; box-shadow:var(--shadow-lg); } .cl-confirm-message { font-size:14px; line-height:1.5; color:var(--text); margin-bottom:18px; } .cl-confirm-message small { color:var(--text-dim); font-size:12px; } .cl-confirm-actions { display:flex; gap:8px; justify-content:flex-end; } #cl-app .cl-btn--danger { background:#dc2626; color:#fff; border:none; } #cl-app .cl-btn--danger:hover { background:#b91c1c; } .cl-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:150; overflow-y:auto; padding:20px; } .cl-modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; position:relative; box-shadow:var(--shadow-lg); } .cl-modal-close { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--text3); font-size:16px; cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:6px; transition:all 0.15s; } .cl-modal-close:hover { background:var(--bg3); color:var(--text); } .cl-modal-title { font-size:17px; font-weight:700; color:var(--text); margin-bottom:4px; letter-spacing:-0.01em; } .cl-modal-sub { font-size:13px; color:var(--text-dim); margin-bottom:14px; } .cl-modal-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .cl-modal-icon { font-size:24px; line-height:1; } .cl-modal-desc { font-size:13px; line-height:1.5; color:var(--text2); margin-bottom:8px; } .cl-modal-actions { display:flex; gap:8px; justify-content:flex-end; } .cl-template-search { width:100%; margin-bottom:12px; } .cl-template-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:14px; } .cl-template-tab { padding:4px 10px; border-radius:20px; background:none; border:1px solid var(--border); color:var(--text-dim); font-size:11px; cursor:pointer; font-family:inherit; transition:all 0.15s; } .cl-template-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; } .cl-template-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; } .cl-template-card { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--r); padding:14px 10px; text-align:center; cursor:pointer; transition:all 0.15s; } .cl-template-card:hover { border-color:var(--accent); } .cl-template-card.selected { border-color:var(--accent); background:var(--accent-subtle); } .cl-tcard-icon { font-size:24px; margin-bottom:6px; } .cl-tcard-name { font-size:12px; font-weight:600; color:var(--text); margin-bottom:3px; line-height:1.3; } .cl-tcard-meta { font-size:10px; color:var(--text-dim); } .cl-template-empty { text-align:center; padding:24px; color:var(--text-dim); grid-column:1/-1; font-size:13px; } .cl-template-grid--onboard { max-height:340px; overflow-y:auto; } .cl-onboarding { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; } .cl-onboarding-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 24px; width:100%; max-width:460px; box-shadow:var(--shadow-lg); } .cl-onboard-dots { display:flex; gap:8px; justify-content:center; margin-bottom:16px; } .cl-onboard-dot { width:8px; height:8px; border-radius:50%; background:var(--border); } .cl-onboard-dot.active { background:var(--accent); } .cl-onboard-dot.done { background:var(--green); } .cl-onboard-title { font-size:18px; font-weight:700; color:var(--text); text-align:center; margin-bottom:16px; letter-spacing:-0.02em; } .cl-onboard-cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; } .cl-onboard-cat-btn { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--r); padding:12px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; font-size:12px; color:var(--text); transition:border-color 0.15s; font-family:inherit; } .cl-onboard-cat-btn:hover,.cl-onboard-cat-btn.selected { border-color:var(--accent); } .cl-onboard-cat-icon { font-size:22px; } .cl-onboard-skip { display:block; width:100%; text-align:center; background:none; border:none; color:var(--text-dim); font-size:12px; cursor:pointer; margin-top:8px; padding:8px; font-family:inherit; } .cl-onboard-skip:hover { color:var(--accent); } .cl-onboard-body { margin-top:4px; } #cl-app .cl-btn--icon { padding:5px 7px; font-size:14px; } #cl-app .cl-btn--sm { font-size:11px; padding:4px 8px; } #cl-app .cl-btn--full { width:100%; } #cl-app .cl-btn--ghost { background:none; color:var(--text2); border:1px solid var(--border); } #cl-app .cl-btn--ghost:hover { border-color:var(--accent); color:var(--accent); } /* ── Password ──────────────────────────────────── */ .cl-pass-row { position:relative; display:flex; align-items:center; } .cl-pass-row .cl-input { flex:1; padding-right:40px; } .cl-pass-toggle { position:absolute; right:8px; background:none; border:none; font-size:15px; cursor:pointer; color:var(--text-dim); padding:4px; line-height:1; user-select:none; } .cl-pass-toggle:hover { color:var(--text); } .cl-caps-warn { font-size:11px; color:var(--orange); margin-top:4px; font-weight:600; } .cl-strength-wrap { margin-top:6px; } .cl-strength-bar { height:3px; background:var(--border); border-radius:2px; overflow:hidden; } .cl-strength-fill { height:100%; width:0%; border-radius:2px; transition:width 0.3s,background 0.3s; } .cl-strength-label { font-size:10px; font-weight:700; margin-top:3px; text-transform:uppercase; letter-spacing:0.05em; min-height:14px; } .cl-privacy-note { font-size:11px; color:var(--text-dim); text-align:center; margin-top:12px; padding:8px 10px; background:var(--green2); border:1px solid var(--green-border); border-radius:var(--r); line-height:1.4; } /* ── File Attachments ──────────────────────────── */ #cl-app .cl-file-toggle { background:none; border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:11px; color:var(--text-dim); cursor:pointer; margin-top:4px; transition:all 0.15s; font-family:inherit; } #cl-app .cl-file-toggle:hover { border-color:var(--accent); color:var(--accent); } #cl-app .cl-file-toggle.has-files { border-color:var(--accent); color:var(--accent); background:var(--accent-subtle); } #cl-app .cl-file-panel { margin-top:6px; padding:8px 10px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); } #cl-app .cl-file-row { display:flex; align-items:center; gap:6px; padding:4px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; } #cl-app .cl-file-row:last-of-type { border-bottom:none; } #cl-app .cl-file-name { flex:1; font-size:12px; color:var(--text); min-width:100px; word-break:break-all; text-decoration:none; cursor:pointer; } #cl-app .cl-file-name:hover { color:var(--accent); text-decoration:underline; } #cl-app .cl-file-meta { font-size:10px; color:var(--text-dim); white-space:nowrap; } #cl-app .cl-file-btn { background:none; border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:11px; color:var(--text-dim); cursor:pointer; text-decoration:none; transition:all 0.15s; } #cl-app .cl-file-btn:hover { border-color:var(--accent); color:var(--accent); } #cl-app .cl-file-btn.del:hover { border-color:var(--red); color:var(--red); } #cl-app .cl-file-empty { font-size:11px; color:var(--text-dim); text-align:center; padding:6px 0; } #cl-app .cl-file-input { display:none; } #cl-app .cl-file-upload-btn { display:inline-block; margin-top:6px; padding:4px 12px; border-radius:6px; border:1px dashed var(--accent-border); color:var(--accent); font-size:11px; cursor:pointer; transition:all 0.15s; background:var(--accent-subtle); } #cl-app .cl-file-upload-btn:hover { background:var(--accent-glow); } /* ── Due Date Modal ────────────────────────────── */ #cl-app .cl-duedate-modal { max-width:340px; width:100%; } #cl-app .cl-duedate-picker-wrap { margin-bottom:8px; } #cl-app .cl-duedate-cal { width:100%; cursor:pointer; } #cl-app .cl-duedate-or { text-align:center; font-size:11px; color:var(--text-dim); margin:10px 0; } #cl-app .cl-duedate-shortcuts { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; } #cl-app .cl-shortcut-btn { flex:1; min-width:60px; padding:6px 8px; border-radius:6px; border:1px solid var(--border); background:none; color:var(--text); font-size:11px; cursor:pointer; transition:all 0.15s; text-align:center; font-family:inherit; } #cl-app .cl-shortcut-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-subtle); } #cl-app .cl-duedate-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; } /* ── AI Generate ───────────────────────────────── */ #cl-app .cl-ai-banner { display:flex; align-items:center; gap:12px; padding:12px 16px; margin:10px 0 14px; background:var(--accent-subtle); border:1px solid var(--accent-border); border-radius:var(--r-lg); cursor:pointer; transition:all 0.15s; } #cl-app .cl-ai-banner:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } #cl-app .cl-ai-banner-icon { font-size:22px; flex-shrink:0; } #cl-app .cl-ai-banner-text { flex:1; } #cl-app .cl-ai-banner-text strong { display:block; font-size:13px; color:var(--accent); font-weight:600; } #cl-app .cl-ai-banner-text span { font-size:12px; color:var(--text2); } #cl-app .cl-ai-banner-arrow { color:var(--accent); font-weight:600; font-size:15px; } #cl-app .cl-ai-modal { max-width:480px; } #cl-app .cl-ai-textarea { width:100%; min-height:110px; resize:vertical; font-family:inherit; font-size:13px; line-height:1.5; padding:10px; border-radius:var(--r); background:var(--bg2); border:1px solid var(--border); color:var(--text); transition:border-color 0.15s; } #cl-app .cl-ai-textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } #cl-app .cl-ai-textarea::placeholder { color:var(--text3); } #cl-app .cl-ai-counter { font-size:10px; color:var(--text3); text-align:right; margin-top:3px; font-family:var(--mono); } #cl-app .cl-ai-hint { font-size:11px; color:var(--text3); text-align:center; margin-top:10px; } /* ── SVG Icon System ───────────────────────────── */ .cl-icon { display:inline-block; vertical-align:middle; flex-shrink:0; } .cl-icon-wrap { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; flex-shrink:0; line-height:0; } .cl-sec-done-icon { color:var(--green); margin-left:6px; } /* ── Search ───────────────────────────────────── */ .cl-search-wrap { position:relative; flex:1; max-width:320px; display:flex; align-items:center; } .cl-search-icon { position:absolute; left:10px; font-size:13px; pointer-events:none; z-index:1; opacity:0.5; } #cl-app .cl-search-input { padding:7px 30px 7px 32px; font-size:13px; border-radius:20px; background:var(--bg3); border:1px solid transparent; box-shadow:none; } #cl-app .cl-search-input:focus { outline:none; border-color:var(--accent); background:var(--bg2); box-shadow:0 0 0 3px var(--accent-glow); } #cl-app .cl-search-input::placeholder { color:var(--text3); font-size:12px; } .cl-search-clear { position:absolute; right:8px; background:none; border:none; color:var(--text3); font-size:13px; cursor:pointer; display:none; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; padding:0; line-height:1; } .cl-search-clear:hover { color:var(--text); background:var(--bg3); } .cl-search-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); z-index:100; max-height:360px; overflow-y:auto; padding:6px; } .cl-search-group-title { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:0.05em; padding:6px 8px 2px; } .cl-search-row { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--r); cursor:pointer; transition:background 0.1s; } .cl-search-row:hover, .cl-search-row.active { background:var(--bg3); } .cl-search-row-icon { font-size:14px; flex-shrink:0; width:20px; text-align:center; } .cl-search-row-text { flex:1; min-width:0; overflow:hidden; } .cl-search-row-name { font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; } .cl-search-row-dim { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; } .cl-search-row-badge { font-size:10px; font-weight:700; color:var(--accent); font-family:var(--mono); flex-shrink:0; } .cl-search-empty { text-align:center; padding:16px 8px; font-size:13px; color:var(--text3); } /* ── Responsive ────────────────────────────────── */ @media (max-width:640px) { .cl-project-grid{grid-template-columns:1fr} .cl-template-grid{grid-template-columns:repeat(2,1fr)} .cl-onboard-cat-grid{grid-template-columns:1fr 1fr} .cl-dash-header{padding:12px 16px;flex-wrap:wrap} .cl-search-wrap{order:3;max-width:100%;flex-basis:100%;margin-top:8px} #cl-app .cl-btn--new-project{margin:12px 16px 4px;width:calc(100% - 32px)} .cl-dash-section{padding:8px 16px 32px} .cl-dash-user{display:none} .cl-ai-modal{max-width:100%;margin:0 8px} /* CRIT-1: header actions — collapse button text labels, keep icons only */ #cl-app .cl-header-actions { gap:2px; flex-wrap:nowrap; overflow:hidden; } #cl-app .cl-header-actions .cl-btn--sm { padding:0 8px; min-width:40px; } #cl-app .cl-header-actions .cl-btn-label { display:none; } #cl-app .cl-header-actions .cl-btn--sm svg { margin:0; } #cl-app .cl-theme-toggle { padding:0 8px; min-width:40px; font-size:0; } #cl-app .cl-theme-toggle svg { display:block; } } /* ════════════════════════════════════════════════════════ Account Settings Page ════════════════════════════════════════════════════════ */ .cl-account { padding:0 0 40px; } .cl-account-header { padding:16px 24px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; background:var(--bg); } .cl-account-title { font-size:17px; font-weight:700; color:var(--text); margin:0; letter-spacing:-0.02em; } .cl-account-content { padding:12px 24px; } .cl-account-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:10px; } .cl-account-section-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:14px; letter-spacing:-0.01em; } .cl-account-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--border); gap:12px; } .cl-account-row:first-of-type { border-top:none; } .cl-account-row-right { display:flex; align-items:center; gap:8px; flex-shrink:0; } .cl-account-label { font-size:13px; font-weight:600; color:var(--text2); } .cl-account-value { font-size:13px; color:var(--text); } .cl-account-mono { font-family:var(--mono); font-size:12px; } .cl-account-dim { color:var(--text3); } .cl-account-hint { font-size:11px; color:var(--text3); margin-top:2px; } .cl-account-plan { background:var(--accent-subtle); color:var(--accent); padding:2px 10px; border-radius:20px; font-weight:600; font-size:12px; } .cl-account-err { color:var(--red); font-size:12px; margin-top:6px; min-height:0; } .cl-account-form { padding:8px 0; } .cl-account-form .cl-input { margin-top:4px; margin-bottom:4px; } .cl-account-form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; } .cl-account-expand { display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; border-top:1px solid var(--border); padding:10px 0; color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; } .cl-account-expand:hover { color:var(--accent); } .cl-sessions-body { padding-top:8px; } .cl-session-row { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:var(--r); margin-bottom:4px; background:var(--bg2); gap:10px; } .cl-session-row.cl-session-current { border:1px solid var(--accent-border); background:var(--accent-subtle); } .cl-session-info { min-width:0; flex:1; } .cl-session-device { font-size:13px; font-weight:600; color:var(--text); } .cl-session-meta { font-size:11px; color:var(--text3); margin-top:2px; font-family:var(--mono); } .cl-session-current-badge { font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-subtle); padding:3px 10px; border-radius:20px; border:1px solid var(--accent-border); white-space:nowrap; } .cl-account-toggle { background:none; border:none; cursor:pointer; padding:0; } .cl-toggle-track { width:40px; height:22px; background:var(--border2); border-radius:11px; position:relative; transition:background 0.2s; } .cl-account-toggle.on .cl-toggle-track { background:var(--accent); } .cl-toggle-thumb { width:18px; height:18px; background:#fff; border-radius:50%; position:absolute; top:2px; left:2px; transition:transform 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.15); } .cl-account-toggle.on .cl-toggle-thumb { transform:translateX(18px); } .cl-account-danger-zone { border-color:var(--red-border); background:var(--red2); } .cl-account-danger-title { color:var(--red); } .cl-account-danger-zone .cl-account-row { border-top-color:var(--red-border); } .cl-account-privacy { font-size:12px; color:var(--text3); line-height:1.6; padding-top:10px; border-top:1px solid var(--border); } @media (max-width:500px) { .cl-account-content { padding:10px 14px; } .cl-account-header { padding:12px 14px 10px; } .cl-account-row { flex-direction:column; align-items:flex-start; gap:6px; } .cl-account-row-right { align-self:flex-end; } .cl-session-row { flex-direction:column; align-items:flex-start; gap:6px; } } /* ── Global footer ─────────────────────────────────── */ .cl-global-footer { display:flex; align-items:center; justify-content:center; gap:8px; padding:24px 16px 20px; font-size:12px; color:var(--text-dim); } .cl-global-footer a { color:var(--text-dim); text-decoration:none; transition:color 0.15s; } .cl-global-footer a:hover { color:var(--accent); } .cl-footer-sep { opacity:0.4; } /* ── Glass accent base ────────────────────────────── */ #cl-app .cl-glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.06); } #cl-app[data-theme="dark"] .cl-glass { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 4px 24px rgba(0,0,0,0.2); } @supports not (backdrop-filter: blur(1px)) { #cl-app .cl-glass { background:var(--surface); } } @media (prefers-reduced-transparency: reduce) { #cl-app .cl-glass { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface); } } /* ── ⋯ Menu trigger buttons ────────────────────────── */ #cl-app .cl-item-menu-btn, #cl-app .cl-sec-menu-btn { background:none; border:none; cursor:pointer; padding:10px; border-radius:var(--r); color:var(--text3); opacity:0.35; transition:opacity 0.15s, background 0.15s; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } #cl-app .cl-item:hover .cl-item-menu-btn, #cl-app .cl-item-menu-btn:focus, #cl-app .cl-sec-header:hover .cl-sec-menu-btn, #cl-app .cl-sec-menu-btn:focus { opacity:1; background:var(--bg2); } @media (max-width:640px) { #cl-app .cl-item-menu-btn, #cl-app .cl-sec-menu-btn { opacity:0.55; } } /* ── Context menu (glass) ──────────────────────────── */ #cl-app .cl-menu-overlay { position:fixed; inset:0; z-index:999; } #cl-app .cl-context-menu { position:fixed; z-index:1000; min-width:180px; max-height:300px; overflow-y:auto; padding:4px 0; border-radius:var(--r-lg); animation:cl-fadeIn 0.12s ease-out; } #cl-app .cl-context-menu-item { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:13px; color:var(--text); border-radius:4px; margin:0 4px; transition:background 0.1s; } #cl-app .cl-context-menu-item:hover { background:var(--bg2); } #cl-app .cl-context-menu-item.danger { color:var(--red); } #cl-app .cl-context-menu-item.danger:hover { background:var(--red2); } #cl-app .cl-context-menu-item span { flex:1; } #cl-app .cl-context-menu-sep { height:1px; background:var(--border); margin:4px 8px; } @keyframes cl-fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} } /* ── Quick inline edit ─────────────────────────────── */ #cl-app .cl-quick-edit { font:inherit; font-size:13px; color:var(--text); background:var(--bg2); border:1px solid var(--accent); border-radius:4px; padding:2px 6px; width:100%; outline:none; box-shadow:0 0 0 2px var(--accent-subtle); } #cl-app .cl-item-name-text:hover { background:var(--bg2); border-radius:3px; padding:0 3px; margin:0 -3px; } /* ── Swipe-to-delete background (mobile) ───────────── */ #cl-app .cl-swipe-bg { position:absolute; left:100%; top:0; bottom:0; width:100%; display:flex; align-items:center; justify-content:flex-start; gap:6px; padding:0 16px; background:var(--red); color:#fff; font-size:13px; font-weight:600; pointer-events:none; opacity:0; } /* ─── LANDING PAGE ────────────────────────────────────── */ #cl-app.cl-app--full { max-width:none; padding:0; } #cl-app .cl-landing { background:var(--bg); color:var(--text); min-height:100vh; } #cl-app .cl-land-nav { display:flex; align-items:center; justify-content:space-between; padding:14px 28px; border-bottom:1px solid var(--border); max-width:960px; margin:0 auto; } #cl-app .cl-land-nav-logo { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; letter-spacing:-0.01em; } #cl-app .cl-land-nav-links { display:flex; gap:20px; align-items:center; font-size:12px; color:var(--text-dim); } #cl-app .cl-land-nav-links a { color:var(--text-dim); text-decoration:none; } #cl-app .cl-land-nav-links a:hover { color:var(--text2); } #cl-app .cl-land-nav-signin { color:var(--text2); font-weight:500; cursor:pointer; background:none; border:none; font-family:inherit; font-size:inherit; padding:0; } #cl-app .cl-land-nav-signin:hover { color:var(--text); } #cl-app .cl-land-theme-btn { background:none; border:1px solid var(--border); border-radius:6px; padding:4px 6px; cursor:pointer; color:var(--text-dim); display:flex; align-items:center; } #cl-app .cl-land-theme-btn:hover { color:var(--text); border-color:var(--border2); } #cl-app .cl-land-btn-sm { background:#7c3aed; color:#fff; padding:6px 14px; border-radius:6px; font-weight:600; font-size:11px; border:none; cursor:pointer; font-family:inherit; } #cl-app .cl-land-btn-sm:hover { background:#6d28d9; } #cl-app .cl-land-hero { text-align:center; padding:64px 28px 0; max-width:960px; margin:0 auto; } #cl-app .cl-land-h1 { font-size:38px; font-weight:700; letter-spacing:-0.04em; line-height:1.08; margin:0 0 14px; color:var(--text); } #cl-app .cl-land-accent { color:#7c3aed; } #cl-app .cl-land-sub { font-size:15px; color:var(--text-dim); max-width:340px; margin:0 auto 28px; line-height:1.6; } #cl-app .cl-land-btn { background:#7c3aed; color:#fff; padding:10px 24px; border-radius:8px; font-weight:600; font-size:13px; border:none; cursor:pointer; font-family:inherit; } #cl-app .cl-land-btn:hover { background:#6d28d9; } #cl-app .cl-land-btn:focus-visible, #cl-app .cl-land-btn-sm:focus-visible, #cl-app .cl-land-price-btn:focus-visible, #cl-app .cl-land-nav-signin:focus-visible, #cl-app .cl-land-theme-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } #cl-app .cl-land-hint { font-size:11px; color:var(--text-dim); margin-top:10px; } #cl-app .cl-land-shot-wrap { padding:36px 28px 52px; max-width:480px; margin:0 auto; } #cl-app .cl-land-shot { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 24px 80px rgba(124,58,237,0.12),0 0 0 1px var(--border); } #cl-app .cl-land-shot-header { padding:12px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #f4f4f5; } #cl-app .cl-land-shot-ring { position:relative; width:44px; height:44px; flex-shrink:0; } #cl-app .cl-land-shot-pct { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:10px; font-weight:700; color:#7c3aed; } #cl-app .cl-land-shot-meta { flex:1; min-width:0; } #cl-app .cl-land-shot-title { font-size:13px; font-weight:600; color:#18181b; } #cl-app .cl-land-shot-info { font-size:10px; color:#a1a1aa; margin-top:1px; } #cl-app .cl-land-shot-bar { height:2.5px; background:#f4f4f5; border-radius:99px; margin-top:4px; overflow:hidden; } #cl-app .cl-land-shot-bar div { height:100%; background:#7c3aed; border-radius:99px; } #cl-app .cl-land-shot-ts { font-size:9px; color:#d4d4d8; margin-top:3px; font-family:var(--mono); } #cl-app .cl-land-shot-sec { padding:7px 16px; font-size:10px; font-weight:600; color:#71717a; display:flex; align-items:center; gap:5px; border-bottom:1px solid #f4f4f5; background:#fafafa; } #cl-app .cl-land-shot-cnt { margin-left:auto; font-size:9px; color:#71717a; font-weight:700; } #cl-app .cl-land-shot-cnt.g { color:#10b981; } #cl-app .cl-land-shot-item { padding:5px 16px; display:flex; align-items:center; gap:7px; border-bottom:1px solid #f8f8f8; font-size:11px; color:#18181b; } #cl-app .cl-land-shot-item.done { background:rgba(16,185,129,0.02); } #cl-app .cl-land-shot-item.done > span:first-of-type { color:#d4d4d8; text-decoration:line-through; } #cl-app .cl-land-shot-item:last-child { border-bottom:none; } #cl-app .cl-land-shot-cb { width:13px; height:13px; border-radius:3px; border:1.5px solid #d4d4d8; flex-shrink:0; } #cl-app .cl-land-shot-cb.on { background:#10b981; border-color:#10b981; display:flex; align-items:center; justify-content:center; } #cl-app .cl-land-shot-cb.progress { background:#f59e0b; border-color:#f59e0b; display:flex; align-items:center; justify-content:center; } #cl-app .cl-land-shot-item.in-progress { background:rgba(245,158,11,0.03); } #cl-app .cl-land-shot-model { font-size:9px; color:#d4d4d8; margin-left:auto; font-family:var(--mono); } #cl-app .cl-land-shot-pri { font-size:8px; padding:1px 5px; border-radius:3px; font-weight:700; margin-left:4px; } #cl-app .cl-land-shot-pri.high { background:rgba(239,68,68,0.06); color:#ef4444; } #cl-app .cl-land-shot-pri.med { background:rgba(249,115,22,0.05); color:#f59e0b; } #cl-app .cl-land-section { padding:52px 28px; border-top:1px solid var(--border); max-width:960px; margin:0 auto; scroll-margin-top:24px; } #cl-app .cl-land-h2 { font-size:22px; font-weight:700; color:var(--text); margin:0; letter-spacing:-0.02em; text-align:center; } #cl-app .cl-land-h2-sub { font-size:13px; color:var(--text2); margin:6px 0 0; text-align:center; } #cl-app .cl-land-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:480px; margin:28px auto 0; } #cl-app .cl-land-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:18px; } #cl-app .cl-land-card-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; } #cl-app .cl-land-card-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; } #cl-app .cl-land-card-desc { font-size:11px; color:var(--text2); line-height:1.5; } #cl-app .cl-land-steps { display:flex; gap:0; max-width:480px; margin:28px auto 0; position:relative; } #cl-app .cl-land-steps::before { content:""; position:absolute; top:18px; left:calc(33% - 8px); right:calc(33% - 8px); height:1px; background:var(--border); } #cl-app .cl-land-step { flex:1; text-align:center; padding:0 8px; position:relative; } #cl-app .cl-land-step-n { width:36px; height:36px; border-radius:50%; background:var(--bg2); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:13px; font-weight:700; color:#8b5cf6; position:relative; z-index:1; } #cl-app .cl-land-step-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; } #cl-app .cl-land-step-desc { font-size:11px; color:var(--text2); line-height:1.4; } #cl-app .cl-land-pricing { display:flex; gap:12px; max-width:420px; margin:28px auto 0; } #cl-app .cl-land-price-card { flex:1; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:20px; position:relative; } #cl-app .cl-land-price-card.pro { border:1.5px solid rgba(124,58,237,0.3); } #cl-app .cl-land-price-badge { position:absolute; top:-8px; right:14px; background:#7c3aed; color:#fff; font-size:8px; font-weight:700; padding:2px 8px; border-radius:8px; letter-spacing:0.03em; } #cl-app .cl-land-price-name { font-size:13px; font-weight:600; color:var(--text); } #cl-app .cl-land-price-amt { font-size:28px; font-weight:700; color:var(--text); margin:4px 0; } #cl-app .cl-land-price-note { font-size:10px; color:var(--text-dim); margin-bottom:16px; } #cl-app .cl-land-price-list { font-size:11px; color:var(--text2); line-height:2.2; } #cl-app .cl-land-price-btn { width:100%; margin-top:16px; text-align:center; border:1px solid var(--border); border-radius:6px; padding:8px; font-size:12px; color:var(--text2); font-weight:500; background:none; cursor:pointer; font-family:inherit; } #cl-app .cl-land-price-btn:hover { border-color:var(--border2); color:var(--text); } #cl-app .cl-land-price-btn-soon { margin-top:16px; text-align:center; background:rgba(124,58,237,0.15); border-radius:6px; padding:8px; font-size:12px; color:#7c3aed; font-weight:600; } #cl-app .cl-land-cta { padding:52px 28px; border-top:1px solid var(--border); text-align:center; max-width:960px; margin:0 auto; } #cl-app .cl-land-footer { padding:16px 28px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; max-width:960px; margin:0 auto; } #cl-app .cl-land-footer-left { font-size:10px; color:var(--text3); display:flex; align-items:center; gap:6px; } #cl-app .cl-land-footer-links { display:flex; gap:14px; font-size:10px; } #cl-app .cl-land-footer-links a { color:var(--text3); text-decoration:none; } #cl-app .cl-land-footer-links a:hover { color:var(--text2); } @media(max-width:500px) { #cl-app .cl-land-h1 { font-size:28px; } #cl-app .cl-land-nav-links a { display:none; } #cl-app .cl-land-grid { grid-template-columns:1fr; } #cl-app .cl-land-steps { flex-direction:column; gap:16px; } #cl-app .cl-land-steps::before { display:none; } #cl-app .cl-land-pricing { flex-direction:column; } #cl-app .cl-land-hero { padding:40px 20px 0; } #cl-app .cl-land-section { padding:36px 20px; } #cl-app .cl-land-cta { padding:36px 20px; } #cl-app .cl-land-shot-wrap { padding:28px 20px 40px; } } /* ─── TAGS (Phase 1.12) ────────────────────────────── */ #cl-app .cl-item-meta { display:flex; align-items:center; gap:5px; margin-top:6px; flex-wrap:wrap; } #cl-app .cl-tag-user { font-size:10px; padding:1px 6px; border-radius:10px; white-space:nowrap; line-height:1.6; } #cl-app .cl-tag-add { font-size:10px; padding:1px 6px; border-radius:10px; white-space:nowrap; line-height:1.6; background:var(--bg2); color:var(--text3); border:1px dashed var(--border2); cursor:pointer; transition:all 0.15s; } #cl-app .cl-tag-add:hover { border-color:var(--accent); color:var(--accent); border-style:solid; } #cl-app .cl-tag-bar { display:flex; gap:6px; padding:8px 16px; flex-wrap:wrap; align-items:center; } #cl-app .cl-tag-filter-btn { font-size:11px; padding:3px 10px; border-radius:12px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); cursor:pointer; font-family:inherit; transition:all 0.15s; white-space:nowrap; } #cl-app .cl-tag-filter-btn:hover { border-color:var(--accent); color:var(--accent); } #cl-app .cl-tag-filter-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); } #cl-app .cl-tag-filter-btn--unused { opacity:0.5; border-style:dashed; } #cl-app .cl-tag-filter-count { font-size:9px; opacity:0.6; } #cl-app .cl-context-menu-item .cl-tag-del { flex:none; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:4px; font-size:14px; color:var(--text3); cursor:pointer; flex-shrink:0; transition:all 0.12s; line-height:1; } #cl-app .cl-context-menu-item .cl-tag-del:hover { color:var(--red); background:var(--red2); } /* ─── VIEW TOGGLE (Phase 1.13) ────────────────────── */ #cl-app .cl-view-toggle { display:flex; gap:2px; background:var(--bg3); border-radius:var(--r); padding:2px; margin:8px 0 4px; width:fit-content; } #cl-app .cl-view-btn { display:flex; align-items:center; justify-content:center; width:36px; height:30px; border:none; background:transparent; color:var(--text3); border-radius:calc(var(--r) - 1px); cursor:pointer; font-family:inherit; transition:all 0.15s; } #cl-app .cl-view-btn:hover { color:var(--text); } #cl-app .cl-view-btn.active { background:var(--surface); color:var(--accent); box-shadow:var(--shadow); } #cl-app .cl-view-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* ─── KANBAN BOARD (Phase 1.13) ───────────────────── */ #cl-app .cl-kb-board { display:flex; gap:12px; padding:8px 0 16px; align-items:flex-start; min-height:200px; } #cl-app .cl-kb-col { flex:1; min-width:0; background:var(--bg2); border-radius:var(--r-lg); padding:10px; border:1px solid var(--border); } #cl-app .cl-kb-col-header { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text2); padding:0 4px 8px; border-bottom:1px solid var(--border); margin-bottom:8px; } #cl-app .cl-kb-count { font-size:10px; font-weight:500; color:var(--text3); background:var(--bg3); padding:1px 6px; border-radius:8px; margin-left:auto; } #cl-app .cl-kb-cards { display:flex; flex-direction:column; gap:8px; max-height:70vh; overflow-y:auto; scroll-behavior:smooth; } #cl-app .cl-kb-empty { font-size:12px; color:var(--text3); text-align:center; padding:24px 8px; border:1px dashed var(--border); border-radius:var(--r); } #cl-app .cl-kb-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:10px; cursor:pointer; transition:border-color 0.15s, box-shadow 0.15s; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; } #cl-app .cl-kb-card:hover { border-color:var(--accent-border); box-shadow:var(--shadow-lg); } #cl-app .cl-kb-card--expanded { border-color:var(--accent-border); box-shadow:0 0 0 1px var(--accent-border); } #cl-app .cl-kb-card--expanded .cl-kb-card-name { white-space:normal; overflow:visible; text-overflow:unset; } #cl-app .cl-kb-card-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } #cl-app .cl-kb-card-name { font-size:13px; font-weight:500; color:var(--text); line-height:1.3; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #cl-app .cl-kb-card-sec { font-size:10px; color:var(--text3); margin-top:2px; } #cl-app .cl-kb-card-desc { font-size:11px; color:var(--text2); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #cl-app .cl-kb-card--expanded .cl-kb-card-desc { white-space:normal; overflow:visible; text-overflow:unset; } #cl-app .cl-kb-card-tags { display:flex; gap:3px; margin-top:6px; flex-wrap:wrap; align-items:center; } /* Kanban detail panel */ #cl-app .cl-kb-detail { margin-top:8px; padding-top:8px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; } #cl-app .cl-kb-detail-row { display:flex; justify-content:space-between; align-items:baseline; font-size:11px; gap:8px; } #cl-app .cl-kb-detail-label { color:var(--text3); flex-shrink:0; } #cl-app .cl-kb-detail-val { color:var(--text); text-align:right; white-space:normal; word-break:break-word; } #cl-app .cl-kb-status-btn { display:flex; align-items:center; gap:6px; width:100%; padding:6px 8px; min-height:44px; font-size:12px; font-weight:500; border:1px solid var(--border); border-radius:var(--r); background:var(--bg2); color:var(--text2); cursor:pointer; font-family:inherit; transition:all 0.15s; -webkit-tap-highlight-color:transparent; } #cl-app .cl-kb-status-btn:hover { border-color:var(--accent); color:var(--accent); } #cl-app .cl-kb-status-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } #cl-app .cl-kb-status--todo { color:var(--text3); } #cl-app .cl-kb-status--ip { color:var(--orange); border-color:rgba(245,158,11,0.3); } #cl-app .cl-kb-status--done { color:var(--green); border-color:rgba(16,185,129,0.3); } #cl-app .cl-kb-pri-btn { display:flex; align-items:center; gap:4px; width:100%; padding:5px 8px; min-height:44px; font-size:11px; border:1px solid var(--border); border-radius:var(--r); background:var(--bg2); color:var(--text2); cursor:pointer; font-family:inherit; transition:all 0.15s; -webkit-tap-highlight-color:transparent; } #cl-app .cl-kb-pri-btn:hover { border-color:var(--accent); color:var(--accent); } #cl-app .cl-kb-pri-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } #cl-app .cl-kb-list-link { display:flex; align-items:center; gap:4px; padding:5px 8px; min-height:44px; font-size:11px; border:1px solid var(--border); border-radius:var(--r); background:transparent; color:var(--accent); cursor:pointer; font-family:inherit; transition:all 0.15s; -webkit-tap-highlight-color:transparent; } #cl-app .cl-kb-list-link:hover { background:var(--accent-subtle); } #cl-app .cl-kb-list-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* Kanban responsive — stack columns on mobile */ @media(max-width:640px){ #cl-app .cl-kb-board { flex-direction:column; } #cl-app .cl-kb-col { width:100%; } #cl-app .cl-kb-cards { max-height:none; } } /* Kanban drag-and-drop (Phase 1.13 S2) */ #cl-app .cl-kb-card--dragging { opacity:0.18; pointer-events:none; transition:opacity 0.15s; } #cl-app .cl-kb-col--source { opacity:0.7; transition:opacity 0.15s; } #cl-app .cl-kb-col--drop { border-color:var(--accent); background:var(--accent-subtle); box-shadow:inset 0 0 0 1px var(--accent-border); transition:all 0.12s; } #cl-kb-ghost { border-radius:var(--r-lg, 12px); } /* Consent banner (Phase 1.14) */ #cl-app .cl-consent-bar { position:fixed; bottom:0; left:0; right:0; background:var(--bg1); border-top:1px solid var(--border); padding:12px 20px; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text2); z-index:100; box-shadow:0 -2px 8px rgba(0,0,0,0.08); } #cl-app .cl-consent-bar span { flex:1; } #cl-app .cl-consent-btn { white-space:nowrap; } /* Email verification banner (Phase 1.14.1) */ #cl-app .cl-verify-banner { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--warn-bg, #fef3c7); border-bottom:1px solid var(--warn-border, #fbbf24); font-size:13px; color:var(--warn-text, #92400e); } [data-theme="dark"] #cl-app .cl-verify-banner { background:#422006; border-color:#b45309; color:#fbbf24; } #cl-app .cl-verify-banner-icon { font-size:16px; } #cl-app .cl-verify-banner-text { flex:1; } #cl-app .cl-verify-banner-btn { white-space:nowrap; font-size:12px; } .cl-badge-verified { display:inline-block; font-size:11px; padding:1px 8px; border-radius:10px; background:#dcfce7; color:#166534; margin-left:6px; font-weight:500; } [data-theme="dark"] .cl-badge-verified { background:#14532d; color:#86efac; } .cl-badge-unverified { display:inline-block; font-size:11px; padding:1px 8px; border-radius:10px; background:#fef3c7; color:#92400e; margin-left:6px; font-weight:500; } [data-theme="dark"] .cl-badge-unverified { background:#422006; color:#fbbf24; } /* ════════════════════════════════════════════════════════ Phase 1.17 — CSV Import + In-Project Search ════════════════════════════════════════════════════════ */ /* ── CSV import modal overlay ──────────────────────────── */ .cl-import-modal .cl-modal { animation: cl-up 0.2s ease both; } /* ── CSV mapping table ─────────────────────────────────── */ .cl-mapping-table { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:12px; } .cl-mapping-table > div { transition: background 0.1s; } .cl-mapping-table > div:hover { background: var(--bg2); } .cl-mapping-table select { font-family: inherit; } /* ── In-project search bar ─────────────────────────────── */ .cl-project-search { position:relative; display:flex; align-items:center; margin-bottom:8px; } .cl-project-search .cl-input { padding-left:32px; padding-right:32px; border-radius:20px; font-size:13px; background:var(--bg3); border-color:transparent; transition:border-color 0.15s, background 0.15s; } .cl-project-search .cl-input:focus { background:var(--bg2); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } .cl-project-search .cl-input::placeholder { color:var(--text3); font-size:12px; } /* ── Search match highlight ────────────────────────────── */ mark.cl-search-highlight { background:rgba(124,58,237,0.18); color:var(--accent); border-radius:2px; padding:0 1px; font-weight:600; } [data-theme="dark"] mark.cl-search-highlight { background:rgba(139,92,246,0.25); } /* ── Matched item subtle glow ──────────────────────────── */ #cl-app .cl-item.cl-search-match { box-shadow:inset 3px 0 0 var(--accent); } /* ── Search results count hint ─────────────────────────── */ .cl-search-highlight[style] { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--accent); padding:4px 2px 8px; font-family:var(--mono); } /* ════════════════════════════════════════════════════════ Phase 1.18 — File Encryption + Export + Skeleton Loader ════════════════════════════════════════════════════════ */ /* ── Dashboard skeleton loader ─────────────────────────── */ @keyframes cl-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .cl-skeleton-card { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--r-lg, 12px); padding: 20px; min-height: 120px; display: flex; flex-direction: column; gap: 10px; } .cl-sk-icon, .cl-sk-line { background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%); background-size: 800px 100%; animation: cl-shimmer 1.4s infinite linear; border-radius: 6px; } .cl-sk-icon { width: 36px; height: 36px; border-radius: 8px; } .cl-sk-line--title { height: 14px; width: 60%; } .cl-sk-line--meta { height: 11px; width: 40%; opacity: 0.6; } /* ── Project export format buttons ─────────────────────── */ .cl-export-format-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--r-lg, 12px); cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: center; font-family: inherit; color: var(--text); } .cl-export-format-btn:hover { border-color: var(--accent); background: var(--bg3); } .cl-export-format-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cl-export-fmt-icon { color: var(--accent); } .cl-export-fmt-label { font-size: 14px; font-weight: 700; } .cl-export-fmt-sub { font-size: 11px; color: var(--text3); } /* ── Encryption tier badge ─────────────────────────────── */ .cl-enc-badge--standard { background: #e0f2fe; color: #0369a1; } .cl-enc-badge--enhanced { background: #f0fdf4; color: #166534; } [data-theme="dark"] .cl-enc-badge--standard { background: #0c2d48; color: #7dd3fc; } [data-theme="dark"] .cl-enc-badge--enhanced { background: #052e16; color: #86efac; } /* ════════════════════════════════════════════════════════ Phase 1.18 UX Pass — Mobile / Platform / Accessibility ════════════════════════════════════════════════════════ */ /* ── HIGH-3: iOS safe-area insets (iPhone home bar) ──── */ #cl-app { padding-bottom: env(safe-area-inset-bottom, 0px); } .cl-global-footer { padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); } /* ── CRIT-3: Bottom-sheet modals on mobile ───────────── */ /* On desktop: centered dialog (default behaviour) */ /* On mobile: slides up from bottom, rounded top corners */ @keyframes cl-sheet-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (max-width:640px) { .cl-modal-overlay { align-items: flex-end; /* anchor sheet to bottom */ padding: 0; /* no side padding — sheet is full width */ } .cl-modal { width: 100%; max-width: 100% !important; border-radius: 20px 20px 0 0; /* iOS sheet shape */ max-height: 88vh; padding-bottom: max(24px, env(safe-area-inset-bottom, 20px)); animation: cl-sheet-up 0.28s cubic-bezier(0.32, 0.72, 0, 1); } /* Sheet handle indicator (drag hint — visual only) */ .cl-modal::before { content: ''; display: block; width: 36px; height: 4px; background: var(--border2); border-radius: 2px; margin: 0 auto 16px; } /* Export modal grid → 1-col stacked on very small screens */ .cl-modal [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; } } /* ── CRIT-2 extras: icon-only action buttons touch zone ─ */ @media (max-width:640px) { #cl-app .cl-item-menu-btn, #cl-app .cl-sec-menu-btn, #cl-app .cl-view-btn { min-width: 44px; min-height: 44px; } } /* ── CRIT-2: 500px breakpoint — preserve 44px (override) */ @media (max-width:500px) { #cl-app .cl-btn { min-height:44px; font-size:13px; padding:0 10px; } } /* ── HIGH-1: Onboarding category grid — 3-col on tablet */ @media (min-width:641px) { .cl-onboard-cat-grid { grid-template-columns: repeat(3, 1fr); } } /* ── HIGH-5: Landing page value proposition elements ──── */ .cl-land-headline { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; line-height: 1.2; text-align: center; margin-bottom: 8px; } .cl-land-tagline { font-size: 15px; color: var(--text2); text-align: center; margin-bottom: 24px; line-height: 1.5; } .cl-land-cta { display: block; width: 100%; max-width: 280px; margin: 0 auto 28px; padding: 14px 24px; font-size: 16px; font-weight: 700; border-radius: 12px; } @media (max-width:500px) { .cl-land-headline { font-size: 22px; } .cl-land-cta { max-width: 100%; } } /* ════════════════════════════════════════════════════════ Bug fixes — 2026-04-05 post-deploy ════════════════════════════════════════════════════════ */ /* FIX-1: Export button was empty — "download" icon added to ICONS No CSS needed — icon renders via SVG path in JS */ /* FIX-2: Email overflow in Account Settings ─────────────────── */ .cl-email-row-right { flex-wrap: wrap; /* allow badge+button to wrap below long email */ gap: 4px; align-items: center; } .cl-email-row-right .cl-account-value { word-break: break-all; /* break long email addresses */ min-width: 0; /* allow shrinking in flex */ flex: 1 1 100%; /* take full width so badge+btn drop below */ } .cl-email-row-right .cl-badge-verified, .cl-email-row-right .cl-badge-unverified { flex-shrink: 0; } /* FIX-3: "Sign in" text wrapping vertically in landing nav ─────── */ .cl-land-nav-signin { white-space: nowrap; /* prevent "Sign\nin" word wrap */ } .cl-land-btn-sm { white-space: nowrap; /* prevent Get started wrapping too */ flex-shrink: 0; } /* On very narrow screens, hide the "Features" / "Pricing" links */ /* and keep theme + signin + get started in a tight row */ @media (max-width:440px) { .cl-land-nav { padding:12px 16px; } .cl-land-nav-links { gap:8px; } } /* BIZ-001: Pro waitlist email capture section ─────────────────── */ .cl-land-waitlist { padding: 40px 28px; border-top: 1px solid var(--border); text-align: center; max-width: 960px; margin: 0 auto; } .cl-land-waitlist-inner { max-width: 480px; margin: 0 auto; } .cl-land-waitlist-title { font-size: 16px; font-weight: 700; color: var(--text1); margin-bottom: 6px; } .cl-land-waitlist-sub { font-size: 13px; color: var(--text2); margin-bottom: 16px; line-height: 1.5; } .cl-land-waitlist-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .cl-land-waitlist-input { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--bg1); color: var(--text1); width: 240px; outline: none; transition: border-color 0.15s; } .cl-land-waitlist-input:focus { border-color: var(--accent); } .cl-land-waitlist-btn { padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; } .cl-land-waitlist-btn:hover { background: #6d28d9; } .cl-land-waitlist-btn:disabled { opacity: 0.6; cursor: default; } @media (max-width: 480px) { .cl-land-waitlist-input { width: 100%; } .cl-land-waitlist-btn { width: 100%; } }