@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300..800;1,400&display=swap');

/* ============================================================
   CAROTPLAN PLATFORM SHELL — shared/platform.css
   Platform v2.4 · Design System v3 (CLAUDE.md §21 authoritative version markers)
   v3 adds the [data-skin="liquid"|"material"] token blocks (Transport
   UI Foundation phase) — token VALUES only, extracted from Export's
   own three <style> skin blocks, never their page-specific CSS rules.
   See CLAUDE.md §48.
   Design tokens MIGRATED from Export Plan Tracker's own "Meridian"
   skin (its default/canonical skin — nautical chart-paper light,
   "Chart Room / Night Watch" dark, magenta/amber accent, Inter
   typeface, 14px card radius, flat/matte shadows — no glass blur).
   Values captured directly from export/index.html's Meridian CSS
   layer; see CLAUDE.md §41 for the full extraction record. Export
   itself is NOT redesigned and does not load this file (frozen,
   §16) — this file brings the REST of the platform to match it.
   Phạm vi: /, /app-selector, shell /transport/ — file này KHÔNG được
   /export/ nạp (frozen); thanh Platform Shell trên /export/ dùng bản
   sao giá trị Meridian (literal, chép tay khớp các token dưới đây) do
   shared/shell.js tự inject (xem CLAUDE.md §38/§41) — không đọc file
   này, chỉ đọc thuộc tính [data-theme] đã có sẵn trên <html>.
   ============================================================ */

:root{
  /* ---- Light (default) — Meridian "nautical chart paper" ---- */
  --cp-bg:            #EFEAD9;
  --cp-bg-grad:       none;
  --cp-surface:       #FAF6EA;
  --cp-surface-2:     #F1ECDC;
  --cp-border:        #DCD4BC;
  --cp-border-strong: #C7BD9F;
  --cp-text:          #1E2420;
  --cp-text-dim:      #4C554E;
  --cp-accent:        #B4266A;
  --cp-accent-ink:    #FFFDF4;
  --cp-danger:        #ff6b6b;
  --cp-ok:            #35c48d;
  --cp-shadow-sm:     0 1px 2px rgba(30,36,32,.06);
  --cp-shadow-md:     0 3px 10px -2px rgba(30,36,32,.09);
  --cp-shadow:        0 14px 32px -14px rgba(30,36,32,.18);
  --cp-shadow-glass:  0 1px 0 rgba(30,36,32,.05), 0 8px 20px -14px rgba(30,36,32,.16);
  --cp-btn-grad:      linear-gradient(135deg,#C23A79 0%,#B4266A 55%,#8E1D53 100%);
  --cp-btn-text:      #FFFDF4;
  --cp-btn-shadow:    0 10px 26px -8px rgba(180,38,106,.5), inset 0 1px 1px rgba(255,255,255,.3);

  /* ---- Glass/blur tokens (Platform v2.4 §48 — Transport UI Foundation) — Meridian is
     "flat editorial" by design (0px blur, near-opaque tiers), matching its own values in
     export/index.html exactly (see the [data-skin] blocks below for Liquid/Material). ---- */
  --cp-blur:          0px;
  --cp-saturate:      100%;
  --cp-glass-thin:     rgba(250,246,234,.93);
  --cp-glass-regular:  rgba(250,246,234,.97);
  --cp-glass-elevated: rgba(253,250,241,.99);

  /* ---- Theme-independent tokens ---- */
  --cp-radius:        14px;   /* Meridian --radius-card */
  --cp-radius-sm:     10px;   /* Meridian --radius-input */
  --cp-radius-btn:    12px;   /* Meridian .form-cta radius — distinct from radius-sm on purpose */
  --cp-font:          'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Platform v1.2 — chiều cao thanh Platform Shell (shared/shell.js), CỘNG safe-area-inset-top
     (notch/status-bar/dynamic-island) để mọi nơi dùng var(--cp-shell-h) tự động chừa đúng chỗ.
     Giữ ĐÚNG giá trị này khớp với injectStyle() trong shell.js (nơi định nghĩa lại --cp-shell-h
     cho các trang KHÔNG nạp file này, ví dụ /export/) — đổi 1 nơi phải đổi cả 2. */
  --cp-shell-h:       calc(52px + env(safe-area-inset-top, 0px));
  --cp-shell-z:       45;

  /* ---- Z-index scale (Platform UI Hardening, Batch 1) ----
     One canonical stacking table for the whole platform — every value below is extracted verbatim
     (unchanged) from the literal z-index numbers already in use across this file and
     transport/css/transport.css, purely named so any future overlay component reads this table
     instead of re-deriving the correct value from scattered code comments — the exact gap that
     already produced one real production bug (the Assistant FAB briefly outranked every drawer's
     Save button, CLAUDE.md §68). Order, low → high: chrome < popover < sidebar-overlay <
     fab/loading < sheet < drawer < modal < toast < user-menu < notification-panel < assistant.
     Small LOCAL stacking (e.g. a segmented-control indicator's z:0/1 within its own parent) is
     deliberately NOT tokenized here — those aren't part of the global overlay order. */
  --cp-z-chrome:      20;   /* sticky header / bottom nav */
  --cp-z-popover:     30;   /* search results popover, sidebar backdrop */
  --cp-z-sidebar:     40;   /* mobile overlay sidebar */
  --cp-z-fab:         50;   /* floating action button, full-page loading overlay */
  --cp-z-sheet:       60;   /* mobile bottom sheet */
  --cp-z-drawer:      120;  /* detail/edit drawer */
  --cp-z-modal:       150;  /* confirm/destructive modal */
  --cp-z-toast:       200;  /* toast notifications — intentionally above modal */
  --cp-z-usermenu:    210;  /* user menu modal */
  --cp-z-notif-panel: 230;  /* notification center dropdown */
  --cp-z-assistant:   240;  /* Carot Assistant panel — topmost by design */

  /* Chart palette tokens (New Design Theme round) — skin-agnostic DEFAULT, byte-identical to the
     hardcoded array chart-theme.js#chartPieColors() replaced, so Liquid/Meridian/Material render
     unchanged; only [data-skin="chatgpt"] below overrides these to a restrained enterprise ramp. */
  --chart-c1: #6366f1; --chart-c2: #22c55e; --chart-c3: #f97316; --chart-c4: #3b82f6;
  --chart-c5: #ec4899; --chart-c6: #14b8a6; --chart-c7: #a855f7; --chart-c8: #f59e0b;
}

/* ---- Dark — Meridian "Chart Room / Night Watch" ---- */
[data-theme="dark"]{
  --cp-bg:            #0D110D;
  --cp-bg-grad:       radial-gradient(1200px 800px at 80% -10%, #1a231a 0%, #0D110D 55%, #070907 100%);
  --cp-surface:       #151B15;
  --cp-surface-2:     #1D251D;
  --cp-border:        rgba(233,229,211,.10);
  --cp-border-strong: rgba(233,229,211,.18);
  --cp-text:          #E9E5D3;
  --cp-text-dim:      #ABB09B;
  --cp-accent:        #e8a54b;
  --cp-accent-ink:    #1b1206;
  --cp-shadow-sm:     0 1px 2px rgba(0,0,0,.3);
  --cp-shadow-md:     0 3px 10px -2px rgba(0,0,0,.4);
  --cp-shadow:        0 20px 44px -18px rgba(0,0,0,.7);
  --cp-shadow-glass:  0 1px 0 rgba(0,0,0,.4), 0 10px 24px -14px rgba(0,0,0,.6);
  --cp-btn-grad:      linear-gradient(135deg,#F0B25C 0%,#E8A54B 55%,#C67F1F 100%);
  --cp-btn-text:      #1E2420;
  --cp-btn-shadow:    0 10px 24px -10px rgba(232,165,75,.5), inset 0 1px 0 rgba(255,255,255,.15);
  --cp-glass-thin:     rgba(21,27,21,.94);
  --cp-glass-regular:  rgba(21,27,21,.97);
  --cp-glass-elevated: rgba(26,33,26,.99);
}

/* ============================================================
   THREE-SKIN SYSTEM (Platform v2.4 §48 — Transport UI Foundation)
   Export's own three skins (Liquid Glass / Meridian / Material
   Expressive, applySkin() in export/index.html) are NOT a reusable
   component library — they are ~6300 lines of page-specific CSS
   keyed to Export's own literal DOM/class names (gantt, AI bubbles,
   specific tables). Meridian's TOKEN VALUES were already extracted
   as this file's default (:root/[data-theme="dark"] above, Platform
   v2.2 §41). This block extends that exact same pattern to the other
   two skins — token values only, captured directly from
   export/index.html's ept-base-lg block (L81-204) and
   material-expressive-skin block (L9600-9721) — so Transport's
   already-tokenized .tm-* / .cp-* components re-skin automatically,
   the same mechanism that already makes dark/light work. Default
   (no [data-skin] set) stays Meridian — zero regression for any
   page that never touches the switcher (shared/skin.js).
   ============================================================ */
[data-skin="liquid"]{
  --cp-bg:            #F8FAFC;
  --cp-bg-grad:       none;
  --cp-surface:       #FFFFFF;
  --cp-surface-2:     #F8FAFC;
  --cp-border:        #E2E8F0;
  --cp-border-strong: #CBD5E1;
  --cp-text:          #0F172A;
  --cp-text-dim:      #475569;
  --cp-accent:        #2563EB;
  --cp-accent-ink:    #FFFFFF;
  --cp-shadow-sm:     0 1px 2px 0 rgba(15,23,42,.05);
  --cp-shadow-md:     0 4px 6px -1px rgba(15,23,42,.06), 0 2px 4px -2px rgba(15,23,42,.05);
  --cp-shadow:        0 12px 32px rgba(15,23,42,.12);
  --cp-shadow-glass:  0 1px 1px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.14);
  --cp-btn-grad:      linear-gradient(135deg,#3b82f6,#2563eb 60%,#1d4ed8 100%);
  --cp-btn-text:      #FFFFFF;
  --cp-btn-shadow:    0 10px 26px -8px rgba(37,99,235,.45), inset 0 1px 1px rgba(255,255,255,.35);
  --cp-radius:        18px;
  --cp-radius-sm:     14px;
  --cp-radius-btn:    16px;
  --cp-blur:          12px;
  --cp-saturate:      180%;
  --cp-glass-thin:     rgba(255,255,255,.58);
  --cp-glass-regular:  rgba(255,255,255,.72);
  --cp-glass-elevated: rgba(255,255,255,.90);
}
[data-skin="liquid"][data-theme="dark"]{
  --cp-bg:            #090C16;
  --cp-bg-grad:       none;
  --cp-surface:       #161D2E;
  --cp-surface-2:     #202940;
  --cp-border:        #27272A;
  --cp-border-strong: #3F3F46;
  --cp-text:          #F8FAFC;
  --cp-text-dim:      #A1A1AA;
  --cp-accent:        #3B82F6;
  --cp-accent-ink:    #FFFFFF;
  --cp-shadow-sm:     0 0 0 1px rgba(255,255,255,.02);
  --cp-shadow-md:     0 1px 3px rgba(0,0,0,.4);
  --cp-shadow:        0 10px 30px rgba(0,0,0,.55);
  --cp-shadow-glass:  0 1px 1px rgba(0,0,0,.30), 0 10px 28px -14px rgba(0,0,0,.60);
  --cp-btn-grad:      linear-gradient(135deg,#60a5fa,#3b82f6 60%,#2563eb 100%);
  --cp-btn-text:      #0B1220;
  --cp-btn-shadow:    0 10px 24px -10px rgba(59,130,246,.5), inset 0 1px 0 rgba(255,255,255,.15);
  --cp-glass-thin:     rgba(32,35,44,.52);
  --cp-glass-regular:  rgba(30,33,41,.66);
  --cp-glass-elevated: rgba(40,43,52,.86);
}

[data-skin="material"]{
  --cp-bg:            #F5FAFA;
  --cp-bg-grad:       none;
  --cp-surface:       #EFF5F5;
  --cp-surface-2:     #E9EFEF;
  --cp-border:        #C1CBC9;
  --cp-border-strong: #6F7978;
  --cp-text:          #191C1C;
  --cp-text-dim:      #3F4948;
  --cp-accent:        #0A757E;
  --cp-accent-ink:    #FFFFFF;
  --cp-shadow-sm:     0 1px 2px 0 rgba(25,35,34,.08), 0 1px 3px 1px rgba(25,35,34,.06);
  --cp-shadow-md:     0 1px 2px 0 rgba(25,35,34,.10), 0 2px 6px 2px rgba(25,35,34,.09);
  --cp-shadow:        0 4px 8px 3px rgba(25,35,34,.10), 0 1px 3px 0 rgba(25,35,34,.14);
  --cp-shadow-glass:  0 1px 2px 0 rgba(25,35,34,.08), 0 1px 3px 1px rgba(25,35,34,.06);
  --cp-btn-grad:      linear-gradient(135deg,#0A757E,#0A757E 100%);
  --cp-btn-text:      #FFFFFF;
  --cp-btn-shadow:    0 4px 8px 3px rgba(10,117,126,.18), 0 1px 3px 0 rgba(10,117,126,.22);
  --cp-radius:        24px;
  --cp-radius-sm:     14px;
  --cp-radius-btn:    20px;
  --cp-blur:          0px;
  --cp-saturate:      100%;
  --cp-glass-thin:     #E9EFEF;
  --cp-glass-regular:  #E3E9E9;
  --cp-glass-elevated: #DDE4E3;
}
[data-skin="material"][data-theme="dark"]{
  --cp-bg:            #0E1414;
  --cp-bg-grad:       none;
  --cp-surface:       #171D1D;
  --cp-surface-2:     #1B2121;
  --cp-border:        #3F4948;
  --cp-border-strong: #899393;
  --cp-text:          #E0E3E2;
  --cp-text-dim:      #BFC9C8;
  --cp-accent:        #66D8E1;
  --cp-accent-ink:    #00363A;
  --cp-shadow-sm:     0 1px 2px 0 rgba(0,0,0,.24), 0 1px 3px 1px rgba(0,0,0,.20);
  --cp-shadow-md:     0 1px 2px 0 rgba(0,0,0,.28), 0 2px 6px 2px rgba(0,0,0,.24);
  --cp-shadow:        0 4px 8px 3px rgba(0,0,0,.30), 0 1px 3px 0 rgba(0,0,0,.34);
  --cp-shadow-glass:  0 1px 2px 0 rgba(0,0,0,.24), 0 1px 3px 1px rgba(0,0,0,.20);
  --cp-btn-grad:      linear-gradient(135deg,#66D8E1,#66D8E1 100%);
  --cp-btn-text:      #00363A;
  --cp-btn-shadow:    0 4px 8px 3px rgba(102,216,225,.18), 0 1px 3px 0 rgba(102,216,225,.22);
  --cp-glass-thin:     #1B2121;
  --cp-glass-regular:  #252B2B;
  --cp-glass-elevated: #303636;
}

/* ---- ChatGPT Inspired — 4th skin (Task: "New Design Theme" round). AI-first, minimal, flat,
   typography-first, low visual noise — same token shape as Liquid/Material above, no new
   mechanism. Flat like Meridian (--cp-blur:0) but a distinct neutral graphite/off-white palette
   and a single restrained accent (muted teal-green), not Meridian's warm nautical magenta/amber. ---- */
[data-skin="chatgpt"]{
  --cp-bg:            #FFFFFF;
  --cp-bg-grad:       none;
  --cp-surface:       #FFFFFF;
  --cp-surface-2:     #F7F7F8;
  --cp-border:        #E2E2E4;
  --cp-border-strong: #D2D2D8;
  --cp-text:          #0D0D0D;
  --cp-text-dim:      #6E6E80;
  --cp-accent:        #10A37E;
  --cp-accent-ink:    #FFFFFF;
  --cp-danger:        #DC2626;
  --cp-ok:            #10A37E;
  --cp-shadow-sm:     0 1px 2px rgba(13,13,13,.03);
  --cp-shadow-md:     0 1px 3px rgba(13,13,13,.05);
  --cp-shadow:        0 4px 16px -6px rgba(13,13,13,.08);
  --cp-shadow-glass:  0 1px 0 rgba(13,13,13,.02), 0 4px 12px -8px rgba(13,13,13,.06);
  --cp-btn-grad:      linear-gradient(135deg,#10A37E,#10A37E 100%);
  --cp-btn-text:      #FFFFFF;
  --cp-btn-shadow:    none;
  --cp-radius:        10px;
  --cp-radius-sm:     8px;
  --cp-radius-btn:    8px;
  --cp-blur:          0px;
  --cp-saturate:      100%;
  --cp-glass-thin:     rgba(255,255,255,.92);
  --cp-glass-regular:  rgba(255,255,255,.96);
  --cp-glass-elevated: rgba(255,255,255,.99);
  --chart-c1: var(--cp-accent); --chart-c2: #D97706; --chart-c3: #9CA3AF; --chart-c4: #6B7280;
  --chart-c5: #D1D5DB; --chart-c6: #4B5563; --chart-c7: #E5E7EB; --chart-c8: #374151;
}
[data-skin="chatgpt"][data-theme="dark"]{
  --cp-bg:            #171717;
  --cp-bg-grad:       none;
  --cp-surface:       #212121;
  --cp-surface-2:     #2A2A2A;
  --cp-border:        rgba(255,255,255,.10);
  --cp-border-strong: rgba(255,255,255,.17);
  --cp-text:          #ECECEC;
  --cp-text-dim:      #A6A6B0;
  --cp-accent:        #19C37D;
  --cp-accent-ink:    #06281B;
  --cp-shadow-sm:     0 1px 2px rgba(0,0,0,.25);
  --cp-shadow-md:     0 2px 6px rgba(0,0,0,.3);
  --cp-shadow:        0 10px 26px -14px rgba(0,0,0,.5);
  --cp-shadow-glass:  0 1px 0 rgba(0,0,0,.25), 0 4px 14px -10px rgba(0,0,0,.4);
  --cp-btn-grad:      linear-gradient(135deg,#19C37D,#19C37D 100%);
  --cp-btn-text:      #06281B;
  --cp-btn-shadow:    none;
  --cp-glass-thin:     rgba(33,33,33,.92);
  --cp-glass-regular:  rgba(33,33,33,.96);
  --cp-glass-elevated: rgba(42,42,42,.99);
  --chart-c1: var(--cp-accent); --chart-c2: #F59E0B; --chart-c3: #71717A; --chart-c4: #52525B;
  --chart-c5: #A1A1AA; --chart-c6: #3F3F46; --chart-c7: #D4D4D8; --chart-c8: #27272A;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
/* [hidden] phải luôn thắng — nếu không, một class có display riêng (vd .cp-center/.tm-app đều
   display:flex) cùng độ ưu tiên với [hidden] của UA sẽ đè lên tuỳ thứ tự nạp CSS, khiến phần tử
   đáng lẽ ẩn vẫn hiện ra chồng lên nhau (bug xác nhận thật khi kiểm thử #tmLogin/#tmShell/#tmDenied
   render chồng lên nhau dù chỉ 1 cái có "hidden" bị gỡ). Một dòng chặn tận gốc thay vì vá từng class. */
[hidden]{ display:none !important; }

/* ---------- Platform Scrollbar (UI Polish round — CLAUDE.md §67) ----------
   ONE reusable scrollbar style for the whole platform (Notification Center, drawers, tables,
   sidebars, any scrollable list, future modules) — same slim/floating-pill Liquid Glass treatment
   Export's own frozen file already uses (export/index.html's own ::-webkit-scrollbar rule),
   rebuilt here from --cp-text (never copied verbatim, per CLAUDE.md §16) so it's automatically
   correct under every theme/skin combination via color-mix() instead of needing a separate
   token override per skin block. Not loaded by /export/ (frozen, keeps its own already-matching
   scrollbar untouched) — every other page (Landing/app-selector/Transport) picks this up for free
   since it's a single global rule, not scoped to specific components. */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--cp-text) 20%, transparent);
  border-radius:999px; border:2px solid transparent; background-clip:padding-box;
  transition:background-color .2s ease;
}
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--cp-text) 34%, transparent); background-clip:padding-box; }
::-webkit-scrollbar-corner{ background:transparent; }
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--cp-text) 20%, transparent) transparent; }

body{
  margin:0;
  font-family:var(--cp-font);
  color:var(--cp-text);
  background:var(--cp-bg);
  background-image:var(--cp-bg-grad);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}

/* ---------- Layout ---------- */
.cp-center{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Safe-area (notch/status-bar/home-indicator) trên mọi cạnh — trang này không có thanh cố định
     riêng nên tự lo lấy phần chừa chỗ. */
  padding:max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px))
          max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
}
.cp-shell{
  /* Platform v1.2: trừ chiều cao thanh Platform Shell (shared/shell.js, sticky, đứng trước
     .cp-shell trong DOM) để không dư cuộn — không phải tên trùng với "Platform Shell", đây là
     class layout riêng của app-selector có từ P0. */
  min-height:calc(100dvh - var(--cp-shell-h, 0px));
  display:flex;
  flex-direction:column;
}

/* ---------- Brand ---------- */
.cp-brand{
  display:flex; align-items:center; gap:12px;
  justify-content:center; margin-bottom:22px;
}
.cp-brand .cp-logo{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  background:linear-gradient(145deg, var(--cp-surface-2), var(--cp-surface));
  border:1px solid var(--cp-border-strong);
  box-shadow:var(--cp-shadow-sm);
}
.cp-brand .cp-name{ text-align:left; }
.cp-brand .cp-name b{
  display:block; font-size:20px; letter-spacing:-.02em; font-weight:800;
}
.cp-brand .cp-name span{
  display:block; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cp-text-dim); font-weight:600;
}

/* ---------- Card ---------- */
.cp-card{
  width:100%; max-width:400px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:var(--cp-radius);
  box-shadow:var(--cp-shadow-glass);
  padding:26px 24px;
}
.cp-card h1{ margin:0 0 4px; font-size:18px; }
.cp-card .cp-sub{ margin:0 0 18px; font-size:13px; color:var(--cp-text-dim); }

/* ---------- Form ---------- */
.cp-field{ margin-bottom:12px; }
.cp-field label{
  display:block; font-size:11.5px; font-weight:500; color:var(--cp-text-dim);
  margin-bottom:6px; letter-spacing:.3px;
}
.cp-input{
  width:100%; padding:12px 14px; font-size:15px;
  color:var(--cp-text);
  background:var(--cp-surface-2);
  border:1px solid var(--cp-border);
  border-radius:var(--cp-radius-sm);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cp-input:focus{
  border-color:var(--cp-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cp-accent) 20%, transparent);
}

.cp-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 16px; margin-top:6px;
  font-size:15px; font-weight:600; letter-spacing:.2px;
  border-radius:var(--cp-radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.5,.5,1), filter .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.cp-btn:active{ transform:scale(.96); }
.cp-btn:disabled{ opacity:.55; cursor:default; }
.cp-btn-primary{
  background:var(--cp-btn-grad);
  color:var(--cp-btn-text);
  border-radius:var(--cp-radius-btn);
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:13.5px;
  box-shadow:var(--cp-btn-shadow);
}
.cp-btn-primary:hover{ filter:brightness(1.05); }
.cp-btn-ghost{
  background:transparent; color:var(--cp-text);
  border-color:var(--cp-border-strong);
}
.cp-btn-ghost:hover{ background:var(--cp-surface-2); }

.cp-divider{
  display:flex; align-items:center; gap:10px;
  margin:16px 0; color:var(--cp-text-dim); font-size:12px;
}
.cp-divider::before,.cp-divider::after{
  content:""; flex:1; height:1px; background:var(--cp-border);
}

.cp-link{
  background:none; border:none; padding:0;
  color:var(--cp-accent); font-size:13px; cursor:pointer;
}
.cp-link:hover{ text-decoration:underline; }

/* ---------- Messages ---------- */
.cp-msg{
  display:none;
  margin:0 0 12px; padding:10px 12px;
  font-size:13px; line-height:1.45;
  border-radius:var(--cp-radius-sm);
  border:1px solid transparent;
}
.cp-msg.show{ display:block; }
.cp-msg-error{
  color:#c2274b; background:rgba(255,107,107,.10);
  border-color:rgba(255,107,107,.35);
}
[data-theme="dark"] .cp-msg-error{ color:#ffc9c9; }
.cp-msg-info{
  color:#16594a; background:rgba(53,196,141,.10);
  border-color:rgba(53,196,141,.35);
}
[data-theme="dark"] .cp-msg-info{ color:#c8f5e3; }

/* ---------- Loading overlay ---------- */
.cp-loading{
  position:fixed; inset:0; z-index:var(--cp-z-fab);
  display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center;
  background:var(--cp-bg);
  background-image:var(--cp-bg-grad);
  transition:opacity .2s ease;
}
.cp-loading.hide{ opacity:0; pointer-events:none; }
.cp-spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--cp-border);
  border-top-color:var(--cp-accent);
  animation:cp-spin .8s linear infinite;
}
.cp-loading p{ margin:0; font-size:13px; color:var(--cp-text-dim); }
@keyframes cp-spin{ to{ transform:rotate(360deg); } }

/* ---------- App Selector ---------- */
.cp-apps-wrap{
  flex:1; width:100%; max-width:860px;
  margin:0 auto; padding:30px 20px 50px;
}
.cp-apps-wrap h2{ margin:0 0 4px; font-size:20px; }
.cp-apps-wrap .cp-sub{ margin:0 0 22px; font-size:13px; color:var(--cp-text-dim); }
.cp-apps{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
.cp-app-card{
  display:flex; flex-direction:column; gap:10px;
  padding:20px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:var(--cp-radius);
  box-shadow:var(--cp-shadow-sm);
  color:var(--cp-text);
  text-decoration:none;
  transition:transform .3s cubic-bezier(.34,1.35,.5,1), border-color .15s ease, box-shadow .3s ease;
}
.cp-app-card:hover{
  border-color:var(--cp-accent);
  box-shadow:var(--cp-shadow-md);
  transform:translateY(-2px);
}
.cp-app-card .cp-app-icon{ font-size:30px; line-height:1; }
.cp-app-card b{ font-size:16px; }
.cp-app-card p{ margin:0; font-size:13px; color:var(--cp-text-dim); line-height:1.5; }
.cp-app-card .cp-app-role{
  align-self:flex-start;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--cp-accent);
  border:1px solid var(--cp-accent);
  border-radius:999px; padding:3px 10px;
}
.cp-app-card.disabled{
  opacity:.45; pointer-events:none; filter:grayscale(.4);
}

/* ---------- Landing Page (Platform v2.0 §39, trimmed v2.2 §41) ----------
   Public marketing page at "/": Hero → Applications → Features → Footer.
   Composes from the primitives above (.cp-brand/.cp-card/.cp-btn/.cp-apps/
   .cp-app-card) per Bible §32 Rule A — only genuinely new layout shapes
   get new classes here. */
.cp-hero{
  padding:64px 20px 40px;
  text-align:center;
}
.cp-hero-inner{
  max-width:720px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.cp-hero-inner .cp-brand{ margin-bottom:28px; }
.cp-hero-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; margin-bottom:18px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cp-accent);
  background:color-mix(in srgb, var(--cp-accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--cp-accent) 35%, transparent);
  border-radius:999px;
}
.cp-hero-title{
  margin:0 0 14px; font-size:clamp(26px, 4.2vw, 40px); line-height:1.18; letter-spacing:-.02em; font-weight:800;
}
.cp-hero-sub{
  margin:0 0 28px; font-size:15.5px; line-height:1.6; color:var(--cp-text-dim);
  max-width:560px;
}
.cp-hero-ctas{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.cp-hero-ctas .cp-btn{ width:auto; margin-top:0; padding:12px 24px; }

.cp-section{
  max-width:980px; margin:0 auto; padding:48px 20px;
}
.cp-section-head{
  text-align:center; max-width:600px; margin:0 auto 32px;
}
.cp-section-head .cp-hero-badge{ margin-bottom:12px; }
.cp-section-head h2{ margin:0 0 8px; font-size:24px; letter-spacing:.02em; font-weight:800; }
.cp-section-head .cp-sub{ margin:0; font-size:13.5px; color:var(--cp-text-dim); line-height:1.6; }

.cp-features{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.cp-feature-card{
  display:flex; flex-direction:column; gap:10px;
  padding:20px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:var(--cp-radius);
  box-shadow:var(--cp-shadow-sm);
}
.cp-feature-card .cp-app-icon{ font-size:26px; line-height:1; }
.cp-feature-card b{ font-size:15px; }
.cp-feature-card p{ margin:0; font-size:13px; color:var(--cp-text-dim); line-height:1.55; }

.cp-footer{
  padding:18px; text-align:center;
  font-size:11px; color:var(--cp-text-dim);
}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .cp-card{ padding:22px 18px; }
  .cp-hero{ padding:48px 16px 32px; }
}
