/* MYM ALALI — Client workspace. Loaded only by /client/ pages.
   One component set; themes only swap the tokens below (html[data-theme]). */

/* ───────── tokens ───────── */
:root {
  --bg: #070B16; --bg-2: #0B1222; --surface: #0F172A; --surface-2: #131D33; --raise: #18233C;
  --glass: rgba(19, 29, 51, .72);
  --line: rgba(148, 170, 255, .10); --line-2: rgba(148, 170, 255, .17); --line-strong: rgba(148, 170, 255, .30);
  --text: #F3F6FC; --text-dim: #A6B0C3; --text-faint: #6E7A91;
  --accent: #2F6BFF; --accent-hi: #4A82FF; --accent-2: #2AD4EE; --accent-3: #8B6CFF;
  --gold: #D6A757; --gold-2: #F0CD8A;
  --green: #3DDC97; --amber: #F5B942; --red: #FF6B7A; --slate: #94A3B8;
  --on-accent: #FFFFFF;
  --glow-a: rgba(47, 107, 255, .20); --glow-b: rgba(139, 108, 255, .12); --glow-c: rgba(42, 212, 238, .08);
  --r: 18px; --r-s: 12px; --r-xs: 9px; --side: 268px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 22px 50px -30px rgba(0, 0, 0, .85);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --display: 'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif;
  color-scheme: dark;
}
html[lang="ar"] { --font: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif; --display: 'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif; }
html[data-theme="violet"] { --bg: #0A0816; --bg-2: #100C22; --surface: #141030; --surface-2: #19143A; --raise: #201A47; --glass: rgba(25, 20, 58, .72);
  --line: rgba(180, 160, 255, .11); --line-2: rgba(180, 160, 255, .19); --line-strong: rgba(180, 160, 255, .32);
  --accent: #7C5CFF; --accent-hi: #9478FF; --accent-2: #6F8BFF; --accent-3: #B48CFF; --glow-a: rgba(124, 92, 255, .22); --glow-b: rgba(80, 100, 255, .14); --glow-c: rgba(180, 140, 255, .08); }
html[data-theme="ocean"] { --bg: #04111A; --bg-2: #071822; --surface: #0A1F2B; --surface-2: #0D2734; --raise: #113140; --glass: rgba(13, 39, 52, .72);
  --line: rgba(120, 220, 240, .10); --line-2: rgba(120, 220, 240, .18); --line-strong: rgba(120, 220, 240, .30);
  --accent: #0EA5C6; --accent-hi: #22BCDC; --accent-2: #3EE6D6; --accent-3: #3B82F6; --on-accent: #02161D; --glow-a: rgba(14, 165, 198, .20); --glow-b: rgba(59, 130, 246, .12); --glow-c: rgba(62, 230, 214, .08); }
html[data-theme="graphite"] { --bg: #0B0C0E; --bg-2: #111215; --surface: #16181C; --surface-2: #1B1E23; --raise: #22262C; --glass: rgba(27, 30, 35, .78);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .24);
  --text-dim: #A8AEB8; --text-faint: #737A85;
  --accent: #5B8DEF; --accent-hi: #78A2F5; --accent-2: #9DB4D6; --accent-3: #8E97A6; --glow-a: rgba(91, 141, 239, .10); --glow-b: rgba(255, 255, 255, .03); --glow-c: rgba(157, 180, 214, .04); }
html[data-theme="gold"] { --bg: #0A0B12; --bg-2: #10121C; --surface: #151826; --surface-2: #1A1E2F; --raise: #212639; --glass: rgba(26, 30, 47, .74);
  --line: rgba(240, 205, 138, .10); --line-2: rgba(240, 205, 138, .17); --line-strong: rgba(240, 205, 138, .30);
  --accent: #C9A050; --accent-hi: #DDB466; --accent-2: #E9CD8F; --accent-3: #8C9BC9; --gold: #E2B867; --on-accent: #17120A; --glow-a: rgba(201, 160, 80, .14); --glow-b: rgba(140, 155, 201, .10); --glow-c: rgba(233, 205, 143, .06); }

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.cp { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 8px; }
.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.cp-skip:focus { top: 12px; }
html[dir="rtl"] .cp-flip { transform: scaleX(-1); }
html[dir="ltr"] .fa-arrow-left.cp-flip, html[dir="ltr"] .fa-arrow-right.cp-flip { transform: scaleX(-1); }
html[dir="rtl"] .fa-arrow-left.cp-flip, html[dir="rtl"] .fa-arrow-right.cp-flip { transform: none; }
/* forward-pointing icons in the workspace (→ in English, ← in Arabic) */
html[dir="rtl"] .cp-fwd { transform: scaleX(-1); }

/* subtle cosmic sky behind the workspace (CSS only, very low contrast) */
.cp-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.35), transparent 60%), radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 42%, rgba(255,255,255,.18), transparent 60%), radial-gradient(1px 1px at 33% 72%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1px 1px at 88% 66%, rgba(255,255,255,.2), transparent 60%), radial-gradient(1px 1px at 52% 88%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(900px 520px at 92% -8%, var(--glow-a), transparent 60%), radial-gradient(700px 480px at -6% 104%, var(--glow-b), transparent 62%),
    radial-gradient(600px 400px at 40% 50%, var(--glow-c), transparent 70%), var(--bg); }
.cp-sky::after { content: ""; position: absolute; width: 760px; height: 760px; inset-inline-end: -320px; top: -360px; border-radius: 50%; border: 1px solid var(--line); box-shadow: 0 0 0 90px rgba(255,255,255,.008), 0 0 0 91px var(--line); opacity: .6; }

/* type */
.cp-h1 { font: 700 clamp(26px, 4vw, 32px)/1.2 var(--display); letter-spacing: -.02em; margin: 14px 0 8px; }
.cp-h1-sm { font-size: clamp(22px, 2.6vw, 28px); margin: 0; }
.cp-h2 { font: 600 17px/1.3 var(--display); margin: 0; letter-spacing: -.01em; }
.cp-h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 14.5px/1.3 var(--display); letter-spacing: -.005em; }
.cp-h3 i { color: var(--accent-2); font-size: 13px; }
.cp-sub { color: var(--text-dim); margin: 0; max-width: 64ch; }
.cp-eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
html[lang="ar"] .cp-eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }
.cp-link { color: var(--accent-hi); text-decoration: none; font-weight: 500; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.cp-link:hover { text-decoration: underline; }
.cp-link-quiet { color: var(--text-dim); text-decoration: none; font-size: 13.5px; display: inline-flex; gap: 8px; align-items: center; }
.cp-link-quiet:hover { color: var(--text); }
.cp-link-btn { background: none; border: 0; padding: 0; color: var(--accent-hi); font-size: 13.5px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cp-link-btn:hover { text-decoration: underline; }
.cp-note, .cp-secure { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--text-faint); }
.cp-note i, .cp-secure i { margin-top: 3px; color: var(--text-dim); }
.cp-note2 { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.cp-count { margin: -6px 2px 0; font-size: 12.5px; color: var(--text-faint); }

/* brand */
.cp-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.cp-brand-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font: 700 16px var(--display); color: #fff; flex: none; background: linear-gradient(140deg, var(--accent), var(--accent-3)); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 22px -10px var(--accent); }
.cp-brand-t { display: flex; flex-direction: column; line-height: 1.15; }
.cp-brand-t b { font: 700 13.5px var(--display); letter-spacing: .08em; }
.cp-brand-t small { color: var(--gold); font-size: 11.5px; }
.cp-lang { background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.cp-lang:hover { background: rgba(255,255,255,.05); }

/* buttons */
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent; font-weight: 600; font-size: 14.5px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.cp-btn i { font-size: 12.5px; }
.cp-btn-primary { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--on-accent); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 26px -14px var(--accent); }
.cp-btn-primary:hover { filter: brightness(1.08); }
.cp-btn-soft { background: rgba(255,255,255,.035); border-color: var(--line-2); }
.cp-btn-soft:hover { background: rgba(255,255,255,.07); border-color: var(--line-strong); }
.cp-btn-ghost { background: transparent; color: var(--text-dim); border-color: transparent; }
.cp-btn-ghost:hover { color: var(--text); background: rgba(255,255,255,.04); }
.cp-btn-sm { min-height: 36px; padding: 0 13px; font-size: 13px; border-radius: 10px; gap: 8px; }
.cp-btn-block { width: 100%; }
.cp-btn-block2 { width: 100%; margin-top: 4px; }
.cp-btn:disabled { opacity: .5; cursor: not-allowed; }
.cp-btn[aria-busy="true"] { cursor: progress; opacity: .7; }
.cp-btn.is-icon { width: 36px; padding: 0; }
.cp-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* pills & chips */
.cp-pill { --c: var(--slate); display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.cp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cp-ps-planning, .cp-fs-final { --c: var(--accent-3); }
.cp-ps-progress, .cp-fs-new { --c: var(--accent-hi); }
.cp-ps-review, .cp-fs-updated, .cp-acc-pending { --c: var(--amber); }
.cp-ps-hold, .cp-fs-archived, .cp-acc-closed { --c: var(--slate); }
.cp-ps-completed, .cp-fs-approved, .cp-acc-active { --c: var(--green); }
.cp-acc-suspended { --c: var(--red); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.025); }
.cp-chip i { font-size: 11.5px; color: var(--accent-2); }

/* ───────── auth pages (login / request / reset) ───────── */
.cp-auth { display: flex; flex-direction: column; }
.cp-auth-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(760px 440px at 50% -12%, var(--glow-a), transparent 70%), radial-gradient(520px 380px at 92% 100%, var(--glow-b), transparent 70%), var(--bg); }
.cp-auth-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px clamp(16px, 4vw, 40px); }
.cp-auth-top-r { display: flex; align-items: center; gap: 16px; }
.cp-auth-main { flex: 1; display: grid; place-items: start center; padding: clamp(12px, 5vh, 56px) 16px 56px; }
.cp-card { width: 100%; max-width: 440px; background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 5vw, 36px); box-shadow: 0 40px 100px -50px rgba(0,0,0,.8); backdrop-filter: blur(10px); }
.cp-req-card { max-width: 620px; }
.cp-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); padding: 5px 12px; border-radius: 999px; }
.cp-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
#cp-forgot > form { display: flex; flex-direction: column; gap: 16px; }
.cp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cp-field { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cp-field label, .cp-field legend { font-size: 13.5px; font-weight: 500; color: var(--text); padding: 0; }
.cp-opt { color: var(--text-faint); font-weight: 400; }
.cp-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cp-field input, .cp-field textarea, .cp-tools select, .cp-search2 input { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; min-height: 46px; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.cp-field textarea { resize: vertical; min-height: 110px; }
.cp-field input::placeholder, .cp-field textarea::placeholder, .cp-search2 input::placeholder { color: var(--text-faint); }
html[dir="rtl"] .cp-field input[dir="ltr"] { text-align: right; }
.cp-field input:focus, .cp-field textarea:focus, .cp-tools select:focus, .cp-search2 input:focus { outline: none; border-color: var(--accent-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.cp-err { color: var(--red); font-size: 12.5px; }
.cp-hint { font-size: 12.5px; color: var(--text-faint); }
.cp-pw { position: relative; }
.cp-pw input { padding-inline-end: 50px; }
.cp-pw-toggle { position: absolute; inset-inline-end: 4px; top: 4px; bottom: 4px; width: 42px; border: 0; background: transparent; color: var(--text-dim); border-radius: 9px; cursor: pointer; }
.cp-pw-toggle:hover { color: var(--text); background: rgba(255,255,255,.05); }
.cp-seg { display: flex; gap: 10px; }
.cp-seg label { flex: 1; position: relative; cursor: pointer; }
.cp-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cp-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); font-weight: 500; }
.cp-seg input:checked + span { border-color: var(--accent-hi); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.cp-seg input:focus-visible + span { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.cp-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14px; border: 1px solid; }
.cp-notice i { margin-top: 3px; }
.cp-notice-info { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.cp-notice-error { background: rgba(255,107,122,.09); border-color: rgba(255,107,122,.35); color: #FFD5D9; }
.cp-alt { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); font-size: 14px; text-align: center; }
.cp-back { margin-top: 4px; align-self: center; }
.cp-done { text-align: center; padding: 24px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cp-done h2:focus { outline: none; }
.cp-done-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 22px; background: rgba(61,220,151,.12); color: var(--green); border: 1px solid rgba(61,220,151,.3); }
.cp-done-warn { background: rgba(245,185,66,.1); color: var(--amber); border-color: rgba(245,185,66,.3); }
.cp-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* legacy state box (reset checking, account states) */
.cp-state { text-align: center; padding: 40px 20px; border: 1px dashed var(--line-2); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cp-state-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 19px; background: rgba(255,255,255,.05); color: var(--text-dim); margin-bottom: 6px; }
.cp-state-h { margin: 0; font-weight: 600; font-size: 16px; }
.cp-state-p { margin: 0 0 8px; color: var(--text-dim); font-size: 14px; max-width: 46ch; }
.cp-state-loading { border-style: solid; border-color: var(--line); }
.cp-state-loading .cp-state-ic i { animation: cp-spin 1s linear infinite; }
.cp-state-error .cp-state-ic, .cp-state-denied .cp-state-ic, .cp-state-suspended .cp-state-ic { background: rgba(255,107,122,.1); color: var(--red); }
.cp-state-pending .cp-state-ic { background: rgba(245,185,66,.1); color: var(--amber); }
.cp-state .cp-row { margin-top: 6px; }
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* ───────── shell ───────── */
.cp-app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.cp-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)); border-inline-end: 1px solid var(--line); overflow-y: auto; z-index: 2; }
.cp-side > .cp-brand { padding: 2px 8px 14px; border-bottom: 1px solid var(--line); }
.cp-nav ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-nav-l { margin: 8px 10px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
html[lang="ar"] .cp-nav-l { letter-spacing: 0; font-size: 12px; }
.cp-nav-a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: var(--text-dim); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background .18s, color .18s; }
.cp-nav-a i { width: 18px; text-align: center; font-size: 14.5px; opacity: .85; }
.cp-nav-a:hover { background: rgba(255,255,255,.04); color: var(--text); }
.cp-nav-a.is-on { color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
html[dir="rtl"] .cp-nav-a.is-on { background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); }
.cp-nav-a.is-on::before { content: ""; position: absolute; inset-inline-start: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.cp-nav-a.is-on i { color: var(--accent-2); opacity: 1; }
.cp-profile { margin-top: auto; position: relative; }
.cp-acc-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; text-align: start; }
.cp-acc-btn:hover { border-color: var(--line-2); }
.cp-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 14px var(--display); color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-3)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent); }
.cp-avatar-lg { width: 56px; height: 56px; font-size: 21px; }
.cp-acc-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.cp-acc-t b, .cp-acc-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-acc-t b { font-size: 13.5px; font-weight: 600; }
.cp-acc-t small { font-size: 12px; color: var(--text-faint); }
.cp-acc-menu { position: absolute; bottom: calc(100% + 8px); inset-inline: 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 13px; padding: 6px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.85); z-index: 5; }
.cp-acc-menu > * { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; border: 0; background: none; text-decoration: none; font-size: 14px; cursor: pointer; text-align: start; }
.cp-acc-menu > *:hover, .cp-acc-menu > *:focus-visible { background: rgba(255,255,255,.06); }
.cp-acc-menu i { width: 16px; color: var(--text-dim); }
.cp-logout, .cp-logout i { color: #FFB3BC !important; }
.cp-scrim { display: none; }
.cp-body { min-width: 0; display: flex; flex-direction: column; }
.cp-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 3vw, 36px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(140%); }
.cp-menu-btn { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; }
.cp-top-brand { display: none; align-items: center; gap: 8px; font: 700 13.5px var(--display); letter-spacing: .06em; }
.cp-top-brand .cp-brand-mark { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
.cp-top-r { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.cp-top-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dim); text-decoration: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); }
.cp-top-link:hover { color: var(--text); border-color: var(--line-2); }
.cp-preview { margin: 18px clamp(16px, 3vw, 36px) 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; color: #FDE7B0; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.28); }
.cp-preview i { margin-top: 3px; color: var(--amber); }
.cp-main { width: 100%; max-width: 1320px; padding: 28px clamp(16px, 3vw, 36px) 72px; display: flex; flex-direction: column; gap: 22px; }
.cp-main:focus { outline: none; }
.cp-gate { display: none; }
.cp-gating .cp-gate { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40vh; color: var(--text-dim); font-size: 14.5px; }
.cp-gating .cp-profile, .cp-gating .cp-preview { visibility: hidden; }
.cp-gate-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent-2); animation: cp-spin .8s linear infinite; }

/* page header */
.cp-ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cp-ph-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-ph-a { display: flex; gap: 10px; flex-wrap: wrap; }

/* cards */
.cp-card2 { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-card2-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 30px; }
.cp-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cp-dl2 { margin: 0; display: flex; flex-direction: column; }
.cp-dl2 > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.cp-dl2 > div:first-child { border-top: 0; padding-top: 0; }
.cp-dl2 dt { font-size: 12.5px; color: var(--text-faint); flex: none; }
.cp-dl2 dd { margin: 0; font-size: 13.5px; text-align: end; min-width: 0; overflow-wrap: anywhere; }

/* KPI */
.cp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cp-kpis:empty { display: none; }
.cp-kpi { --c: var(--accent-hi); position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cp-kpi::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; inset-inline-end: -40px; bottom: -60px; background: var(--c); opacity: .08; filter: blur(26px); }
.cp-kpi-ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.cp-kpi-n { font: 700 24px/1.15 'Space Grotesk', var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-kpi-l { color: var(--text-dim); font-size: 12.5px; line-height: 1.35; }
.cp-kpi-cyan { --c: var(--accent-2); } .cp-kpi-violet { --c: var(--accent-3); } .cp-kpi-gold { --c: var(--gold); } .cp-kpi-green { --c: var(--green); }
.cp-kpi-ring { grid-template-columns: auto 1fr; grid-template-rows: auto; }
.cp-kpi-ring .cp-ring { grid-row: auto; }

/* progress ring + meter */
.cp-ring { position: relative; width: 84px; height: 84px; flex: none; }
.cp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
html[dir="rtl"] .cp-ring svg { transform: rotate(-90deg) scaleY(-1); }
.cp-ring-track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 9; }
.cp-ring-val { fill: none; stroke: var(--accent-2); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-2) 45%, transparent)); transition: stroke-dashoffset .8s var(--ease); }
.cp-ring-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font-family: 'Space Grotesk', var(--font); }
.cp-ring-n b { font-size: 21px; } .cp-ring-n small { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.cp-ring-lg { width: 168px; height: 168px; } .cp-ring-lg .cp-ring-n b { font-size: 40px; } .cp-ring-lg .cp-ring-n small { font-size: 16px; } .cp-ring-lg .cp-ring-track, .cp-ring-lg .cp-ring-val { stroke-width: 7; }
.cp-ring-sm { width: 64px; height: 64px; } .cp-ring-sm .cp-ring-n b { font-size: 16px; } .cp-ring-sm .cp-ring-n small { font-size: 10px; }
.cp-meter { height: 7px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.cp-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
html[dir="rtl"] .cp-meter span { background: linear-gradient(270deg, var(--accent), var(--accent-2)); }

/* journey (horizontal) */
.cp-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cp-js { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.cp-js::before { content: ""; position: absolute; top: 12px; inset-inline-start: calc(-50% + 15px); inset-inline-end: calc(50% + 15px); height: 2px; border-radius: 2px; background: var(--line-2); }
.cp-js:first-child::before { display: none; }
.cp-js.is-done::before, .cp-js.is-now::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cp-js-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; border: 2px solid var(--line-strong); background: var(--bg); position: relative; z-index: 1; }
.cp-js.is-done .cp-js-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cp-js.is-now .cp-js-dot { border-color: var(--accent-2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-2) 18%, transparent); }
.cp-js.is-now .cp-js-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); }
.cp-js-t { display: flex; flex-direction: column; min-width: 0; }
.cp-js-t b { font-size: 12px; font-weight: 500; color: var(--text-faint); line-height: 1.3; overflow-wrap: anywhere; }
.cp-js-t small { font-size: 10.5px; color: var(--text-faint); }
.cp-js.is-done .cp-js-t b { color: var(--text-dim); }
.cp-js.is-now .cp-js-t b { color: var(--text); font-weight: 700; }
.cp-js.is-now .cp-js-t small { color: var(--accent-2); }
.cp-journey.is-compact .cp-js-t b { font-size: 11px; }
.cp-journey.is-compact .cp-js-dot { width: 20px; height: 20px; font-size: 8px; }
.cp-journey.is-compact .cp-js::before { top: 9px; inset-inline-start: calc(-50% + 12px); inset-inline-end: calc(50% + 12px); }

/* ───────── dashboard ───────── */
.cp-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: clamp(22px, 3vw, 34px); border-radius: 24px; border: 1px solid var(--line-2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--bg-2) 90%, transparent)); box-shadow: var(--shadow); }
.cp-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 60%, transparent), transparent); }
.cp-hero.is-loading { display: block; min-height: 220px; }
.cp-hero-bg { position: absolute; inset-inline-end: -40px; top: -30px; width: 460px; max-width: 70%; opacity: .55; pointer-events: none; }
.cp-hero-bg .cp-art { width: 100%; height: auto; }
.cp-hero-main { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cp-hero-h { margin: 0; font: 700 clamp(24px, 3.2vw, 34px)/1.15 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cp-hero .cp-journey { max-width: 620px; margin-top: 4px; }
.cp-hero-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cp-fact { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 13px; background: rgba(255,255,255,.03); border: 1px solid var(--line); min-width: 0; }
.cp-fact span { font-size: 11.5px; color: var(--text-faint); }
.cp-fact b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.cp-fact.is-next { border-color: color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.cp-fact.is-next span { color: var(--gold-2); }
.cp-hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.cp-hero-counts { font-size: 13px; color: var(--text-faint); }
.cp-hero-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 26px; border-radius: 20px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.cp-hero-stage { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--text-faint); }
.cp-hero-stage b { font-size: 15px; color: var(--text); }
.cp-hero.is-empty { grid-template-columns: 1fr; min-height: 260px; }
.cp-dash { display: flex; flex-direction: column; gap: 20px; }
.cp-dash-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cp-latest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.cp-latest-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.cp-latest-t { margin: 0; font-weight: 600; font-size: 15.5px; }
.cp-latest-d { margin: 4px 0 0; color: var(--text-dim); font-size: 13.5px; }
.cp-latest-m { margin: 6px 0 0; color: var(--text-faint); font-size: 12.5px; }
.cp-act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cp-act li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.cp-act li:first-child { border-top: 0; padding-top: 0; }
.cp-act-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; background: rgba(255,255,255,.04); color: var(--text-dim); }
.cp-act-t { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.cp-act-k { color: var(--text-faint); }
.cp-act-m { margin: 2px 0 0; font-size: 12px; color: var(--text-faint); }
.cp-qa2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-qa2-a { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.02); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: border-color .18s, background .18s; }
.cp-qa2-a i { color: var(--accent-2); width: 16px; text-align: center; }
.cp-qa2-a:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cp-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.cp-mini { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); text-decoration: none; }
.cp-mini:hover { border-color: var(--line-2); }
.cp-mini-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cp-mini-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-mini small { color: var(--text-dim); font-size: 12.5px; }
.cp-mini-bar { display: flex; align-items: center; gap: 10px; }
.cp-mini-bar .cp-meter { flex: 1; }
.cp-mini-bar em { font-style: normal; font-size: 12px; color: var(--text-dim); }
.cp-mini-h { margin: 6px 0 2px; font-size: 12.5px; color: var(--text-faint); }

/* ───────── files ───────── */
.cp-fl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-fr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.cp-fr.is-archived { opacity: .6; }
.cp-fr-ic { --c: var(--accent-hi); width: 42px; height: 46px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 15px; }
.cp-fr-ic em { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-dim); }
.cp-fc-design { --c: var(--accent-3); } .cp-fc-report { --c: var(--accent-2); } .cp-fc-handover { --c: var(--green); } .cp-fc-guide { --c: var(--gold); } .cp-fc-other { --c: var(--slate); }
.cp-fr-main { display: flex; flex-direction: column; min-width: 0; }
.cp-fr-main b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-fr-main small { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-fl-table .cp-fr { padding: 12px 14px; }
.cp-dlv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.cp-dlv-h { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 14px var(--display); }
.cp-dlv-h i { color: var(--accent-2); }
.cp-dlv-h em { margin-inline-start: auto; font-style: normal; font-size: 12px; color: var(--text-faint); }

/* toolbar */
.cp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cp-search2 { position: relative; flex: 1 1 260px; min-width: 0; }
.cp-search2 i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 13px; pointer-events: none; }
.cp-search2 input { padding-inline-start: 40px; min-height: 44px; font-size: 14.5px; }
.cp-tools select { width: auto; min-width: 150px; max-width: 240px; min-height: 44px; padding: 0 36px 0 14px; font-size: 14px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-size: 5px 5px; background-repeat: no-repeat; background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; }
html[dir="rtl"] .cp-tools select { padding: 0 14px 0 36px; background-position: 13px 52%, 18px 52%; }
.cp-tools select option { background: var(--surface); }
.cp-seg2 { display: inline-flex; gap: 3px; padding: 4px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.cp-seg2::-webkit-scrollbar { display: none; }
.cp-seg2 button { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-dim); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cp-seg2 button:hover { color: var(--text); }
.cp-seg2 button[aria-pressed="true"], .cp-seg2 button[aria-checked="true"] { background: var(--raise); color: var(--text); box-shadow: 0 0 0 1px var(--line-2); }

/* ───────── projects ───────── */
.cp-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 18px; }
.cp-pcard { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.cp-pcard:hover { border-color: var(--line-2); }
.cp-pcard::before { content: ""; position: absolute; inset: 0 22px auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent); }
.cp-pcard-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cp-pcard-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-3)); }
.cp-pcard-t h3 { margin: 0; font: 600 16.5px/1.3 var(--display); overflow-wrap: anywhere; }
.cp-pcard-t small { color: var(--text-faint); font-size: 12.5px; }
.cp-pcard-prog { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: 15px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.cp-pcard-prog > div { min-width: 0; }
.cp-pcard-stage { margin: 0 0 10px; display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--text-faint); }
.cp-pcard-stage b { color: var(--text); font-size: 14px; }
.cp-pcard-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; }
.cp-pcard-n { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); }
.cp-pcard-n i { color: var(--text-faint); font-size: 11.5px; }
.cp-pcard-n i:nth-of-type(2) { margin-inline-start: 10px; }
.cp-pcard.is-done .cp-ring-val { stroke: var(--green); }

/* ───────── project workspace ───────── */
.cp-ws-head { display: flex; flex-direction: column; gap: 14px; }
.cp-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-faint); }
.cp-crumbs a { color: var(--text-dim); text-decoration: none; }
.cp-crumbs a:hover { color: var(--text); }
.cp-crumbs i { font-size: 9px; }
.cp-ws-title { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.cp-ws-ic { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-3)); box-shadow: 0 14px 34px -16px var(--accent); }
.cp-ws-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.cp-ws-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-dim); }
.cp-ws-meta span { display: inline-flex; align-items: center; gap: 7px; }
.cp-ws-meta i { color: var(--text-faint); font-size: 11.5px; }
.cp-tabs2 { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-top: -4px; }
.cp-tabs2::-webkit-scrollbar { display: none; }
.cp-tabs2 button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border: 0; background: none; color: var(--text-dim); font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cp-tabs2 button i { font-size: 12.5px; opacity: .7; }
.cp-tabs2 button em { font-style: normal; font-size: 11px; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-dim); }
.cp-tabs2 button:hover { color: var(--text); }
.cp-tabs2 button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent-2); }
.cp-tabs2 button[aria-selected="true"] i { color: var(--accent-2); opacity: 1; }
.cp-pane:focus-visible { outline-offset: 6px; }
.cp-ov { display: flex; flex-direction: column; gap: 20px; }
.cp-ov-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cp-next-t { margin: 0; font-size: 15px; font-weight: 600; }
.cp-card-next { border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.cp-card-next .cp-h3 i { color: var(--gold-2); }
/* vertical timeline */
.cp-vtl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cp-vtl-i { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding-bottom: 18px; }
.cp-vtl-i:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line-2); }
.cp-vtl-i.is-done:not(:last-child)::before { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.cp-vtl-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 2px solid var(--line-strong); background: var(--bg); color: var(--text-faint); z-index: 1; }
.cp-vtl-i.is-done .cp-vtl-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cp-vtl-i.is-now .cp-vtl-dot { border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-2) 16%, transparent); }
.cp-vtl-b { padding: 6px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.cp-vtl-i.is-now .cp-vtl-b { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent-2) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 25%, transparent); margin-top: -6px; }
.cp-vtl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cp-vtl-top b { font-size: 15px; }
.cp-vtl-i.is-next .cp-vtl-top b { color: var(--text-dim); }
.cp-vtl-tag { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-faint); }
.cp-vtl-i.is-done .cp-vtl-tag { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.cp-vtl-i.is-now .cp-vtl-tag { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); }
.cp-vtl-b p { margin: 0; font-size: 13.5px; color: var(--text-dim); }
/* update feed */
.cp-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cp-tl-i { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 16px; }
.cp-tl-i:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 17px; top: 38px; bottom: 2px; width: 1px; background: var(--line-2); }
.cp-tl-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 11%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 22%, transparent); }
.cp-tl-b { min-width: 0; padding-top: 2px; }
.cp-tl-t { margin: 0; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.cp-tl-d { margin: 4px 0 0; color: var(--text-dim); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-tl-m { margin: 5px 0 0; font-size: 12px; color: var(--text-faint); }
.cp-tl.is-rich .cp-tl-b { padding: 12px 14px; border-radius: 13px; background: rgba(255,255,255,.02); border: 1px solid var(--line); }
.cp-gfeed-h { margin: 4px 0 12px; font: 600 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); }
html[lang="ar"] .cp-gfeed-h { letter-spacing: 0; font-size: 13px; }
/* approvals shell */
.cp-appr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cp-shell { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.cp-shell li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--text-dim); }
.cp-shell-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); }
.cp-ghost-cap { margin: 4px 0 0; font-size: 12px; color: var(--text-faint); }
.cp-ghost { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 15px; border: 1px dashed var(--line-strong); opacity: .75; }
.cp-ghost-prev { height: 84px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; color: var(--text-faint); background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px); border: 1px solid var(--line); }
.cp-ghost-b { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.cp-ghost-line { display: block; height: 8px; border-radius: 6px; background: rgba(255,255,255,.07); }
.cp-ghost-line.w60 { width: 60%; height: 10px; } .cp-ghost-line.w90 { width: 90%; } .cp-ghost-line.w40 { width: 40%; }
.cp-ghost-acts { display: flex; gap: 8px; margin-top: 4px; }
.cp-ghost-btn { width: 74px; height: 24px; border-radius: 8px; border: 1px solid var(--line-2); }
.cp-ghost-btn.is-primary { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: transparent; }

/* ───────── support / settings ───────── */
.cp-sup { display: flex; flex-direction: column; gap: 20px; }
.cp-sup-hero { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 34px); border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--bg-2) 90%, transparent)); }
.cp-sup-main { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.cp-sup-addr { font-size: 13.5px; color: var(--text-dim); }
.cp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-checks li { display: flex; gap: 12px; font-size: 14px; }
.cp-checks i { margin-top: 4px; font-size: 12px; color: var(--green); }
.cp-sup-proj { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-top: 6px; border-radius: 11px; border: 1px solid var(--line); text-decoration: none; font-size: 13.5px; }
.cp-sup-proj:hover { border-color: var(--line-2); }
.cp-sup-proj i { color: var(--accent-2); }
.cp-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cp-set-id { display: flex; align-items: center; gap: 14px; }
.cp-set-id div { display: flex; flex-direction: column; min-width: 0; }
.cp-set-id b { font-size: 16px; } .cp-set-id small { color: var(--text-faint); font-size: 13px; overflow-wrap: anywhere; }
.cp-set-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.cp-set-row:first-of-type { border-top: 0; padding-top: 0; }
.cp-set-row > div { display: flex; flex-direction: column; min-width: 0; }
.cp-set-row b { font-size: 14px; } .cp-set-row small { font-size: 12.5px; color: var(--text-faint); }
.cp-themes { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cp-theme { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); cursor: pointer; text-align: start; }
.cp-theme:hover { border-color: var(--line-2); }
.cp-theme[aria-checked="true"] { border-color: var(--accent-hi); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.cp-theme-sw { display: grid; grid-template-columns: repeat(2, 14px); grid-template-rows: repeat(2, 14px); gap: 3px; padding: 5px; border-radius: 10px; background: #070B16; border: 1px solid rgba(255,255,255,.08); }
.cp-theme-sw i { border-radius: 4px; }
.cp-theme[data-th="signature"] .cp-theme-sw i:nth-child(1) { background: #2F6BFF; } .cp-theme[data-th="signature"] .cp-theme-sw i:nth-child(2) { background: #2AD4EE; } .cp-theme[data-th="signature"] .cp-theme-sw i:nth-child(3) { background: #131D33; } .cp-theme[data-th="signature"] .cp-theme-sw i:nth-child(4) { background: #D6A757; }
.cp-theme[data-th="violet"] .cp-theme-sw { background: #0A0816; } .cp-theme[data-th="violet"] .cp-theme-sw i:nth-child(1) { background: #7C5CFF; } .cp-theme[data-th="violet"] .cp-theme-sw i:nth-child(2) { background: #6F8BFF; } .cp-theme[data-th="violet"] .cp-theme-sw i:nth-child(3) { background: #19143A; } .cp-theme[data-th="violet"] .cp-theme-sw i:nth-child(4) { background: #B48CFF; }
.cp-theme[data-th="ocean"] .cp-theme-sw { background: #04111A; } .cp-theme[data-th="ocean"] .cp-theme-sw i:nth-child(1) { background: #0EA5C6; } .cp-theme[data-th="ocean"] .cp-theme-sw i:nth-child(2) { background: #3EE6D6; } .cp-theme[data-th="ocean"] .cp-theme-sw i:nth-child(3) { background: #0D2734; } .cp-theme[data-th="ocean"] .cp-theme-sw i:nth-child(4) { background: #3B82F6; }
.cp-theme[data-th="graphite"] .cp-theme-sw { background: #0B0C0E; } .cp-theme[data-th="graphite"] .cp-theme-sw i:nth-child(1) { background: #5B8DEF; } .cp-theme[data-th="graphite"] .cp-theme-sw i:nth-child(2) { background: #9DB4D6; } .cp-theme[data-th="graphite"] .cp-theme-sw i:nth-child(3) { background: #1B1E23; } .cp-theme[data-th="graphite"] .cp-theme-sw i:nth-child(4) { background: #8E97A6; }
.cp-theme[data-th="gold"] .cp-theme-sw { background: #0A0B12; } .cp-theme[data-th="gold"] .cp-theme-sw i:nth-child(1) { background: #C9A050; } .cp-theme[data-th="gold"] .cp-theme-sw i:nth-child(2) { background: #E9CD8F; } .cp-theme[data-th="gold"] .cp-theme-sw i:nth-child(3) { background: #1A1E2F; } .cp-theme[data-th="gold"] .cp-theme-sw i:nth-child(4) { background: #8C9BC9; }
.cp-theme-t { display: flex; flex-direction: column; min-width: 0; }
.cp-theme-t b { font-size: 14px; } .cp-theme-t small { font-size: 12px; color: var(--text-faint); }
.cp-theme-ck { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; border: 1px solid var(--line-2); color: transparent; }
.cp-theme[aria-checked="true"] .cp-theme-ck { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ───────── empty / loading / toast ───────── */
.cp-empty { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 16px 22px; }
.cp-art { width: 200px; max-width: 70%; height: auto; margin-bottom: 4px; opacity: .9; }
.cp-art-minimal { width: 150px; }
.cp-empty-h { margin: 0; font: 600 16px var(--display); }
.cp-empty-p { margin: 0 0 6px; max-width: 52ch; color: var(--text-dim); font-size: 13.5px; }
.cp-empty-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 19px; color: var(--red); background: rgba(255,107,122,.1); margin-bottom: 4px; }
.cp-card-empty { padding-bottom: 10px; }
.cp-skel { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); }
.cp-hero .cp-skel { background: transparent; border: 0; padding: 0; }
.cp-skel-row { display: block; height: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: cp-shimmer 1.4s linear infinite; }
.cp-skel-row:first-child { height: 22px; }
@keyframes cp-shimmer { to { background-position: -200% 0; } }
.cp-toast { position: fixed; z-index: 120; bottom: 20px; inset-inline-end: 20px; max-width: min(380px, calc(100% - 32px)); padding: 13px 16px; border-radius: 13px; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .25s; }
.cp-toast.is-on { opacity: 1; transform: none; }

/* ───────── responsive ───────── */
@media (max-width: 1180px) {
  .cp-dash-cols, .cp-ov-grid, .cp-appr { grid-template-columns: 1fr; }
  .cp-ov-grid > aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}
@media (max-width: 1023px) {
  .cp-app { grid-template-columns: minmax(0, 1fr); }
  .cp-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw); z-index: 60; transform: translateX(-104%); transition: transform .28s var(--ease); box-shadow: 0 0 90px rgba(0,0,0,.7); }
  html[dir="rtl"] .cp-side { transform: translateX(104%); }
  .cp-app.drawer-open .cp-side { transform: none; }
  .cp-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(3,5,12,.6); opacity: 0; pointer-events: none; transition: opacity .28s; }
  .cp-app.drawer-open .cp-scrim { opacity: 1; pointer-events: auto; }
  .cp-menu-btn { display: grid; place-items: center; }
  .cp-top-brand { display: inline-flex; }
  .cp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-set { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cp-main { padding-top: 20px; gap: 18px; }
  .cp-hero { grid-template-columns: 1fr; gap: 20px; border-radius: 20px; }
  .cp-hero-side { flex-direction: row; justify-content: space-between; padding: 14px 18px; order: -1; }
  .cp-hero-side .cp-ring-lg { width: 108px; height: 108px; } .cp-hero-side .cp-ring-lg .cp-ring-n b { font-size: 26px; }
  .cp-hero-stage { align-items: flex-end; }
  .cp-hero-bg { width: 320px; opacity: .4; }
  .cp-journey { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(70px, 1fr); overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .cp-journey::-webkit-scrollbar { display: none; }
  .cp-top-r .cp-link-quiet span, .cp-top-link span { display: none; }
  .cp-tools { flex-direction: column; align-items: stretch; }
  .cp-search2 { flex: none; }
  .cp-tools select { max-width: none; width: 100%; }
  .cp-fr { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cp-fr > .cp-pill { display: none; }
  .cp-ws-title { grid-template-columns: auto minmax(0, 1fr); }
  .cp-ws-title > .cp-btn { grid-column: 1 / -1; justify-self: start; }
  .cp-ws-ic { width: 48px; height: 48px; font-size: 18px; }
  .cp-pcard-prog { grid-template-columns: 1fr; }
  .cp-pcard-prog > .cp-ring { display: none; }
  .cp-grid2 { grid-template-columns: 1fr; }
  .cp-latest { grid-template-columns: auto minmax(0, 1fr); }
  .cp-latest > .cp-btn { grid-column: 1 / -1; justify-self: start; }
  .cp-ghost { grid-template-columns: 70px minmax(0, 1fr); }
  .cp-set-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .cp-kpis { gap: 10px; }
  .cp-kpi { padding: 14px; grid-template-columns: 1fr; row-gap: 8px; }
  .cp-kpi-ic { grid-row: auto; width: 34px; height: 34px; }
  .cp-kpi-n { font-size: 21px; }
  .cp-card2, .cp-pcard { padding: 16px; }
  .cp-qa2 { grid-template-columns: 1fr; }
  .cp-auth-top-r .cp-link-quiet span { display: none; }
  .cp-btn { white-space: normal; text-align: center; }
  .cp-pcard-f { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ── Consultation bookings (dashboard card) ── */
.cp-bk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-bk { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); min-width: 0; }
.cp-bk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cp-bk-top b { font-size: 14px; }
.cp-bk-when, .cp-bk-meta { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.cp-bk-when i, .cp-bk-meta i { color: var(--text-faint); font-size: 12px; }
.cp-bk-note { margin: 0; font-size: 12.5px; color: var(--text-faint); line-height: 1.6; }
.cp-bk-join { align-self: flex-start; }
.cp-bk-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-bk-q { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.cp-bk textarea { width: 100%; font: inherit; font-size: 13px; color: inherit; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; resize: vertical; }
.cp-bk textarea:focus-visible { outline: 2px solid var(--blue-2, #5b8cff); outline-offset: 1px; }
.cp-bk-msg { margin: 0; font-size: 12.5px; color: #fca5a5; }
.cp-bk-msg:empty { display: none; }
.cp-btn-danger { background: color-mix(in srgb, #ff6b7a 16%, transparent); color: #ffb3bc; border-color: color-mix(in srgb, #ff6b7a 40%, transparent); }
.cp-bk-requested { --c: #f0c982; } .cp-bk-confirmed { --c: #3ddc97; } .cp-bk-reschedule_requested { --c: #b48cff; }

/* ── Support tickets ── */
.cp-input { width: 100%; font: inherit; font-size: 14px; color: var(--text); background: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.cp-input:focus-visible { outline: 2px solid var(--blue-2, #5b8cff); outline-offset: 1px; }
textarea.cp-input { resize: vertical; line-height: 1.6; }
select.cp-input { appearance: auto; }
.cp-tk-form { display: flex; flex-direction: column; gap: 14px; }
.cp-tk-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); font-weight: 600; min-width: 0; }
.cp-tk-f em { font-style: normal; font-weight: 500; color: var(--text-faint); }
.cp-tk-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cp-tk-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cp-tk-attach label { position: relative; overflow: hidden; cursor: pointer; }
.cp-tk-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cp-tk-attach label:focus-within { outline: 2px solid var(--blue-2, #5b8cff); outline-offset: 2px; }
.cp-tk-files-l { margin: 0; font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; }
.cp-tk-files-l:empty { display: none; }
.cp-tk-hint { flex-basis: 100%; font-size: 12px; color: var(--text-faint); }
.cp-tk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cp-tk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-tk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: inherit; text-decoration: none; min-width: 0; }
.cp-tk-row:hover { border-color: var(--line-2); }
.cp-tk-row.is-waiting { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.cp-tk-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; }
.cp-tk-main b { font-size: 14px; overflow-wrap: anywhere; }
.cp-tk-main small, .cp-tk-meta small { font-size: 12px; color: var(--text-faint); }
.cp-tk-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cp-tk-flag { font-size: 11.5px; font-weight: 700; color: var(--gold-2); }
.cp-tk-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.cp-tk-subj { font-size: clamp(18px, 2.4vw, 22px); overflow-wrap: anywhere; margin: 4px 0 10px; }
.cp-tk-banner { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.6; color: var(--gold-2); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.cp-tk-banner i { margin-top: 4px; }
.cp-tk-banner.is-ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); background: color-mix(in srgb, var(--green) 7%, transparent); }
.cp-tk-banner.is-muted { color: var(--text-dim); border-color: var(--line-2); background: rgba(255,255,255,.02); }
.cp-tk-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-tk-msg { max-width: min(640px, 92%); padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); min-width: 0; }
.cp-tk-msg.is-client { align-self: flex-end; background: color-mix(in srgb, var(--blue-2, #5b8cff) 10%, transparent); border-color: color-mix(in srgb, var(--blue-2, #5b8cff) 28%, transparent); }
.cp-tk-msg.is-team { align-self: flex-start; }
.cp-tk-who { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; }
.cp-tk-who small { color: var(--text-faint); }
.cp-tk-body { margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.cp-tk-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cp-tk-att { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: inherit; font-size: 12.5px; color: var(--text); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); cursor: pointer; }
.cp-tk-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cp-tk-att small { color: var(--text-faint); }
.cp-card-reply textarea { margin-bottom: 10px; }
.cp-tk-open, .cp-tk-in_progress { --c: var(--blue-2, #5b8cff); } .cp-tk-waiting_for_client { --c: var(--gold-2); } .cp-tk-resolved { --c: var(--green); } .cp-tk-closed { --c: var(--slate); }
@media (max-width: 620px) { .cp-tk-2 { grid-template-columns: 1fr; } .cp-tk-meta { align-items: flex-start; } .cp-tk-msg { max-width: 100%; } }

/* ── Project workflow: Action Center, milestones, approvals ── */
.cp-card-ac .cp-card2-h { margin-bottom: 10px; }
.cp-ac-n { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--gold-2); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.cp-ac-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-ac-i { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: inherit; text-decoration: none; font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.cp-ac-i:hover { border-color: var(--line-2); background: rgba(255,255,255,.035); }
.cp-ac-i:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cp-ac-i.is-overdue { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.cp-ac-i.is-high { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.cp-ac-ic { flex: 0 0 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.cp-ac-i.is-overdue .cp-ac-ic { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.cp-ac-t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cp-ac-t b { font-size: 14px; overflow-wrap: anywhere; }
.cp-ac-t small { font-size: 12px; color: var(--text-faint); overflow-wrap: anywhere; }
.cp-ac-go { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--accent-2); }
.cp-card-ac.is-clear .cp-note2 { margin: 0; }
.cp-wf-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.cp-wf-now b { font-size: 16px; overflow-wrap: anywhere; }
.cp-wf-ms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-wf-m { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cp-wf-m.is-active, .cp-wf-m.is-review, .cp-wf-m.is-waiting, .cp-wf-m.is-blocked { border-color: color-mix(in srgb, var(--accent-2) 32%, transparent); background: color-mix(in srgb, var(--accent-2) 5%, transparent); }
.cp-wf-m.is-not_started { opacity: .78; }
.cp-wf-mh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-wf-seq { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 2px solid var(--line-2); color: var(--text-dim); }
.cp-wf-m.is-completed .cp-wf-seq { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.cp-wf-mt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.cp-wf-mt b { font-size: 15px; overflow-wrap: anywhere; }
.cp-wf-mt small { font-size: 12px; color: var(--text-faint); }
.cp-wf-desc { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.cp-wf-meta { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-faint); flex-wrap: wrap; }
.cp-wf-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-wf-task { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-wf-task.is-action { border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 5%, transparent); }
.cp-wf-task-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.cp-wf-task-h b { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.cp-wf-task-h > i { color: var(--text-faint); }
.cp-wf-task.is-action .cp-wf-task-h > i { color: var(--gold-2); }
.cp-wf-resp { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.6; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.cp-wf-resp i { margin-top: 4px; color: var(--text-faint); }
.cp-wf-respond { display: flex; flex-direction: column; gap: 8px; }
.cp-wf-respond .cp-note2, .cp-ap .cp-note2 { margin: 0; font-size: 12px; }
.cp-ap-wrap { display: flex; flex-direction: column; gap: 10px; }
.cp-ap-wrap .cp-mini-h { margin: 6px 0 0; }
.cp-ap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-ap { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cp-ap.is-pending { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.cp-ap-list.is-history .cp-ap { padding: 12px 14px; }
.cp-ap-h { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.cp-ap-h b { font-size: 15px; overflow-wrap: anywhere; flex: 1 1 200px; min-width: 0; }
.cp-ap-file { margin: 0; }
.cp-dlv-ap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-dlv-ap small { font-size: 11.5px; color: var(--text-faint); }
.cp-ms-not_started { --c: var(--slate); } .cp-ms-active { --c: var(--accent-2); } .cp-ms-waiting { --c: var(--gold-2); } .cp-ms-blocked { --c: var(--red); } .cp-ms-review { --c: var(--accent-3); } .cp-ms-completed { --c: var(--green); } .cp-ms-cancelled { --c: var(--slate); }
.cp-ap-pending { --c: var(--gold-2); } .cp-ap-approved { --c: var(--green); } .cp-ap-changes_requested { --c: var(--accent-3); } .cp-ap-cancelled { --c: var(--slate); }
.cp-tks-todo, .cp-tks-cancelled { --c: var(--slate); } .cp-tks-in_progress { --c: var(--accent-2); } .cp-tks-waiting { --c: var(--gold-2); } .cp-tks-blocked { --c: var(--red); } .cp-tks-review { --c: var(--accent-3); } .cp-tks-done { --c: var(--green); }
@media (max-width: 620px) { .cp-ac-i { flex-wrap: wrap; } .cp-ac-go { margin-inline-start: 48px; } .cp-wf-m, .cp-ap { padding: 12px; } }

/* ═════════ STUDIO EXPERIENCE (home hero · device frames · preview · brief) ═════════ */
@keyframes cp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cp-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--accent-2)) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.cp-calm { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; }

/* hero */
.cp-shero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(22px, 3.2vw, 40px); border-radius: calc(var(--r) + 8px); border: 1px solid var(--line-2);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--bg-2));
  box-shadow: var(--shadow); animation: cp-rise .5s var(--ease) both; }
.cp-shero.is-loading { display: block; }
.cp-shero-glow { position: absolute; inset: auto -10% -40% 40%; height: 70%; background: radial-gradient(closest-side, var(--glow-a), transparent); pointer-events: none; filter: blur(10px); }
.cp-shero-t { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cp-shero-t .cp-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); margin: 0; }
.cp-shero-h { margin: 0; font: 600 clamp(26px, 3.4vw, 40px)/1.12 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cp-shero-p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.65; max-width: 46ch; }
.cp-shero-state { --c: var(--accent-2); display: inline-flex; align-items: center; gap: 9px; margin: 0; font-weight: 600; font-size: 15px; color: var(--text); }
.cp-shero-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); animation: cp-pulse 2.4s ease-in-out infinite; flex: none; }
.cp-shero-state.is-final, .cp-shero-state.is-brief, .cp-shero-state.is-input, .cp-shero-state.is-preview { --c: var(--gold-2); }
.cp-shero-state.is-ready { --c: var(--green); }
.cp-shero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 0; }
.cp-shero-facts div { display: flex; flex-direction: column; gap: 2px; }
.cp-shero-facts dt { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cp-shero-facts dd { margin: 0; font-weight: 600; font-size: 14.5px; }
.cp-shero-facts .is-soft dd { color: var(--text-dim); font-weight: 500; }
.cp-shero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cp-shero-vis { position: relative; display: block; color: inherit; text-decoration: none; border-radius: 18px; transition: transform .35s var(--ease); }
.cp-shero-vis:hover { transform: translateY(-3px); }
.cp-shero-vis:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 6px; }
.cp-shero-ver { position: absolute; top: 12px; inset-inline-end: 14px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(7, 11, 22, .72); border: 1px solid var(--line-2); backdrop-filter: blur(6px); }

/* 5-stage studio journey */
.cp-st-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cp-st-s { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.cp-st-s:not(:last-child)::after { content: ""; position: absolute; top: 17px; inset-inline-start: calc(50% + 22px); inset-inline-end: calc(-50% + 22px); height: 2px; border-radius: 2px; background: var(--line-2); }
.cp-st-s.is-done:not(:last-child)::after { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cp-st-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: var(--text-faint); background: var(--bg-2); border: 1px solid var(--line-2); transition: all .4s var(--ease); }
.cp-st-s.is-done .cp-st-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cp-st-s.is-now .cp-st-dot { color: var(--accent-2); border-color: var(--accent-2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-2) 14%, transparent); }
.cp-st-l { font-size: 12.5px; color: var(--text-faint); font-weight: 500; overflow-wrap: anywhere; }
.cp-st-s.is-now .cp-st-l { color: var(--text); font-weight: 600; }
.cp-st-s.is-done .cp-st-l { color: var(--text-dim); }
.cp-st-track.is-compact .cp-st-dot { width: 28px; height: 28px; font-size: 11px; }
.cp-st-track.is-compact .cp-st-s:not(:last-child)::after { top: 13px; inset-inline-start: calc(50% + 18px); inset-inline-end: calc(-50% + 18px); }
.cp-st-track.is-compact .cp-st-l { font-size: 11.5px; }

/* device frames */
.cp-frame { position: relative; margin-inline: auto; background: linear-gradient(180deg, #1a2440, #0c1222); border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 60px -20px var(--glow-a); }
.cp-frame.is-browser { width: 100%; border-radius: 14px; overflow: hidden; }
.cp-frame-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.cp-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.cp-frame-url { margin-inline-start: 10px; flex: 1; max-width: 260px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.04); font-size: 10.5px; line-height: 20px; padding: 0 10px; color: var(--text-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: ltr; }
.cp-frame.is-browser .cp-frame-screen { aspect-ratio: 16 / 10; }
.cp-frame.is-phone { width: min(100%, 290px); border-radius: 40px; padding: 12px; }
.cp-frame.is-phone .cp-frame-screen { aspect-ratio: 9 / 19.5; border-radius: 30px; }
.cp-frame-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 12px; background: #05080f; z-index: 2; }
.cp-frame-screen { position: relative; overflow: hidden; background: var(--bg); }
.cp-frame-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; animation: cp-rise .5s var(--ease) both; }
.cp-frame-screen.is-loading { background: linear-gradient(100deg, var(--bg) 30%, var(--surface-2) 50%, var(--bg) 70%); background-size: 250% 100%; animation: cp-shimmer 1.6s linear infinite; min-height: 180px; }
.cp-frame-ph { position: absolute; inset: 0; }
.cp-frame-ph .cp-mock { position: absolute; inset: 0; opacity: .55; }
.cp-frame-ph-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 18px; background: radial-gradient(60% 60% at 50% 50%, rgba(7,11,22,.86), rgba(7,11,22,.35)); }
.cp-frame-ph-c b { font: 600 15px/1.3 var(--display); }
.cp-frame-ph-c small { color: var(--text-dim); font-size: 12.5px; max-width: 34ch; line-height: 1.5; }
.cp-frame-ph-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); }

/* abstract product composition (direction-tinted) */
.cp-mock { --m1: var(--accent); --m2: var(--accent-2); --mb: #0b1222; --ml: rgba(255,255,255,.08); display: grid; grid-template-rows: auto 1.4fr 1fr auto; gap: 8%; padding: 7%; height: 100%; min-height: 120px; background: var(--mb); }
.cp-mock i, .cp-mock em { display: block; border-radius: 6px; background: var(--ml); }
.cp-mock-nav { display: flex; gap: 6%; } .cp-mock-nav i { height: 8px; flex: 1; } .cp-mock-nav i:first-child { flex: .5; background: var(--m1); }
.cp-mock-hero { display: flex; flex-direction: column; gap: 9%; justify-content: center; padding: 6%; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--m1) 40%, transparent), color-mix(in srgb, var(--m2) 18%, transparent)); }
.cp-mock-hero i { height: 10px; background: rgba(255,255,255,.55); } .cp-mock-hero em { width: 30%; height: 14px; border-radius: 99px; background: var(--m2); }
.cp-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; } .cp-mock-grid i { border-radius: 8px; }
.cp-mock-rows { display: flex; flex-direction: column; gap: 8px; } .cp-mock-rows i { height: 7px; }
.cp-mock .w90 { width: 90%; } .cp-mock .w70 { width: 70%; } .cp-mock .w60 { width: 60%; } .cp-mock .w45 { width: 45%; }
.cp-mock.is-app { grid-template-rows: auto 1.2fr 1.4fr auto; } .cp-mock.is-app .cp-mock-grid { grid-template-columns: 1fr 1fr; }
.cp-dir-clean_minimal, .cp-dir-clarity { --mb: #eef2f8; --ml: rgba(15,23,42,.10); --m1: #2f6bff; --m2: #9fb4d9; }
.cp-dir-clean_minimal .cp-mock-hero i, .cp-dir-clarity .cp-mock-hero i { background: rgba(15,23,42,.35); }
.cp-dir-premium_dark, .cp-dir-executive { --mb: #07090f; --ml: rgba(255,255,255,.07); --m1: #d6a757; --m2: #3a4a72; }
.cp-dir-bold_modern, .cp-dir-high_impact { --mb: #120a2a; --m1: #8b6cff; --m2: #ff6b9a; }
.cp-dir-editorial { --mb: #f6f1e8; --ml: rgba(30,24,16,.10); --m1: #1d1b17; --m2: #c49a5a; }
.cp-dir-editorial .cp-mock-hero i { background: rgba(30,24,16,.4); }
.cp-dir-modern_business { --mb: #0d1630; --m1: #2f6bff; --m2: #2ad4ee; }
.cp-dir-calm_intelligence { --mb: #0b1420; --m1: #2ad4ee; --m2: #7b8cff; }
.cp-dir-data_rich { --mb: #0a0f1a; --m1: #3ddc97; --m2: #2f6bff; } .cp-dir-data_rich .cp-mock-grid { grid-template-columns: repeat(4, 1fr); }

/* attention (at most one) */
.cp-attn { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent); animation: cp-rise .45s .08s var(--ease) both; }
.cp-attn > div { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-attn small { font-size: 12px; color: var(--gold-2); font-weight: 600; letter-spacing: .02em; }
.cp-attn b { font-size: 15.5px; } .cp-attn p { margin: 0; color: var(--text-faint); font-size: 13px; }
.cp-attn-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--gold-2); background: color-mix(in srgb, var(--gold) 13%, transparent); }
.cp-attn.is-calm { border-color: var(--line); background: var(--glass); }
.cp-attn.is-calm .cp-attn-ic { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.cp-attn.is-calm b { font-size: 14.5px; }
.cp-home-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }

/* my project */
.cp-ws-studio { display: flex; flex-direction: column; gap: 16px; }
.cp-ws-studio .cp-ws-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.cp-ws-studio .cp-shero-state { font-size: 13.5px; }
.cp-ws-studio > .cp-st-track { padding: 16px 12px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); }
.cp-ov2 { display: flex; flex-direction: column; gap: 20px; }
.cp-ov2-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 36px); align-items: center; padding: clamp(18px, 2.6vw, 30px); border-radius: calc(var(--r) + 4px); border: 1px solid var(--line-2); background: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--glass); }
.cp-ov2-t { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cp-ov2-t .cp-h2 { font-size: clamp(20px, 2.4vw, 26px); }
.cp-ov2-input { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--gold) 5%, transparent); }
.cp-ov2-vis { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 16px; transition: transform .35s var(--ease); }
.cp-ov2-vis:hover { transform: translateY(-3px); } .cp-ov2-vis:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 6px; }
.cp-ov-brief { margin: 0; font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }

/* concept + directions */
.cp-concept { display: flex; flex-direction: column; gap: 20px; }
.cp-concept-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.cp-concept-sum { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cp-concept-sum .cp-h2 { font-size: clamp(20px, 2.4vw, 26px); }
.cp-cn-ver { display: inline-flex; gap: 8px; align-items: center; margin: 0; color: var(--text-dim); font-size: 13px; }
.cp-cn-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.cp-cn-dl dt { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; } .cp-cn-dl dd { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.cp-dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cp-dir { position: relative; display: flex; flex-direction: column; text-align: start; padding: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); color: inherit; font: inherit; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; min-width: 0; }
button.cp-dir { cursor: pointer; } button.cp-dir:hover { transform: translateY(-3px); border-color: var(--line-strong); }
button.cp-dir:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.cp-dir.is-on { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2), 0 18px 40px -24px var(--accent-2); }
.cp-dir-vis { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); overflow: hidden; }
.cp-dir-b { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.cp-dir-b b { font: 600 15px/1.3 var(--display); } .cp-dir-b small { color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.cp-dir-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.cp-dir-tags em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--text-dim); }
.cp-dir-check { position: absolute; top: 10px; inset-inline-end: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-2); color: #04121a; font-size: 12px; }
.cp-dir.is-empty { opacity: .9; }

/* preview */
.cp-pv { display: flex; flex-direction: column; gap: 18px; }
.cp-pv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cp-pv-head .cp-h2 { font-size: clamp(20px, 2.4vw, 26px); }
.cp-pv-mode button { display: inline-flex; gap: 8px; align-items: center; }
.cp-pv-stage { padding: clamp(14px, 3vw, 40px); border-radius: calc(var(--r) + 8px); border: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg)); display: flex; justify-content: center; }
.cp-pv-stage .cp-frame.is-browser { max-width: 1100px; animation: cp-rise .4s var(--ease) both; }
.cp-pv-stage .cp-frame.is-phone { animation: cp-rise .4s var(--ease) both; }
.cp-pv-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; align-items: flex-start; }
.cp-pv-vers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-pv-v { font-size: 12.5px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--text-dim); }
.cp-pv-v.is-on { color: var(--text); border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.cp-pv-v.is-next { border-style: dashed; color: var(--text-faint); }
.cp-pv-pages { display: flex; flex-direction: column; gap: 6px; } .cp-pv-pages small { color: var(--text-faint); font-size: 12px; }
.cp-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-approve { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%), var(--glass); scroll-margin-top: 90px; }
.cp-approve-t { display: flex; gap: 14px; align-items: flex-start; } .cp-approve-t .cp-h3 { font-size: 17px; }
.cp-approve-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--gold-2); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.cp-approve-ch { display: flex; flex-direction: column; gap: 10px; }
.cp-fb { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--glass); }
.cp-fb .cp-h3 { font-size: 16px; }
.cp-fb textarea { font-size: 15px; }
.cp-fb-more summary { cursor: pointer; color: var(--text-dim); font-size: 13px; margin-bottom: 8px; width: fit-content; }
.cp-fb-done { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--green); font-size: 13.5px; }
.cp-fbp { display: flex; flex-direction: column; gap: 14px; }
.cp-pswitch-w { display: flex; } .cp-pswitch { width: auto; min-width: 220px; max-width: 100%; }

/* brief */
.cp-bf-card { max-width: 860px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 3.4vw, 40px); border-radius: calc(var(--r) + 6px); border: 1px solid var(--line-2); background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 60%), var(--glass); box-shadow: var(--shadow); }
.cp-bf-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.cp-bf-dots li { flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); transition: background .4s var(--ease); }
.cp-bf-dots li.is-done { background: var(--accent); } .cp-bf-dots li.is-now { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cp-bf-body { display: flex; flex-direction: column; gap: 12px; animation: cp-rise .35s var(--ease) both; }
.cp-bf-q { margin: 0; font: 600 clamp(22px, 2.8vw, 30px)/1.2 var(--display); letter-spacing: -.015em; outline: none; }
.cp-bf-body textarea { font-size: 15px; }
.cp-bf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-bf-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(255,255,255,.025); color: var(--text-dim); font: inherit; font-size: 14px; cursor: pointer; transition: all .2s var(--ease); }
.cp-bf-chip i { font-size: 11px; opacity: .7; }
.cp-bf-chip:hover { border-color: var(--line-strong); color: var(--text); }
.cp-bf-chip[aria-pressed="true"] { color: var(--text); border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.cp-bf-chip[aria-pressed="true"] i { color: var(--accent-2); opacity: 1; }
.cp-bf-chip:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cp-bf-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cp-bf-nav .cp-btn-primary { margin-inline-start: auto; }
.cp-bf-done { max-width: 620px; margin: 24px auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; animation: cp-rise .45s var(--ease) both; }
.cp-bf-done .cp-sub { text-align: center; }

/* projects list (studio cards) */
.cp-pcard-studio { gap: 16px; }
.cp-pcard-vis { display: block; aspect-ratio: 16 / 7; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.cp-pcard-studio .cp-pcard-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .cp-shero { grid-template-columns: 1fr; }
  .cp-shero-vis .cp-frame.is-phone { width: min(70%, 240px); }
  .cp-shero-vis { order: -1; }
  .cp-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cp-ov2-hero, .cp-concept-top, .cp-home-cols, .cp-cn-dl { grid-template-columns: 1fr; }
  .cp-ov2-vis { order: -1; }
}
@media (max-width: 560px) {
  .cp-dirs { grid-template-columns: 1fr; }
  .cp-st-l { font-size: 11px; } .cp-st-track.is-compact .cp-st-l { font-size: 10.5px; }
  .cp-st-dot { width: 30px; height: 30px; } .cp-st-s:not(:last-child)::after { top: 14px; inset-inline-start: calc(50% + 19px); inset-inline-end: calc(-50% + 19px); }
  .cp-frame.is-phone { width: min(100%, 250px); }
  .cp-shero-vis .cp-frame.is-phone, .cp-ov2-vis .cp-frame.is-phone { width: min(62%, 200px); }
  .cp-attn .cp-btn { width: 100%; justify-content: center; }
  .cp-pv-stage { padding: 12px; }
  .cp-pswitch { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-shero, .cp-attn, .cp-bf-body, .cp-bf-done, .cp-frame-screen img, .cp-pv-stage .cp-frame { animation: none; }
  .cp-shero-dot { animation: none; }
  .cp-shero-vis, .cp-ov2-vis, .cp-dir { transition: none; }
}

/* ── project understanding (AI summary after team review) ── */
.cp-und { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--accent-2) 26%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 70%), var(--glass); animation: cp-rise .4s var(--ease) both; }
.cp-und .cp-eyebrow { margin: 0; color: var(--accent-2); }
.cp-und.is-calm { flex-direction: row; align-items: center; gap: 12px; border-color: var(--line); background: var(--glass); }
.cp-und.is-calm p { margin: 0; color: var(--text-dim); font-size: 14px; }
.cp-und-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.cp-und-q { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--gold) 5%, transparent); }
.cp-und-q ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .cp-und { animation: none; } }

/* ── AI visual directions (client) ── */
/* thumbnail composed from direction data: palette, density, radius, type, layout, surface */
.cp-athumb { position: relative; overflow: hidden; aspect-ratio: 16 / 10; display: grid; grid-template-rows: auto 1.5fr 1fr; gap: 9%; padding: 7% 8%; background: var(--t-bg); color: var(--t-tx); --g: 6%; --r: 8px; }
.cp-athumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-athumb i, .cp-athumb em { display: block; }
.cp-athumb .t-nav { display: flex; align-items: center; gap: var(--g); } .cp-athumb .t-nav i { height: 6px; flex: 1; border-radius: 99px; background: color-mix(in srgb, var(--t-tx) 22%, transparent); } .cp-athumb .t-nav i:first-child { flex: .45; background: var(--t-pr); } .cp-athumb .t-nav em { width: 16%; height: 12px; border-radius: 99px; background: var(--t-pr); }
.cp-athumb .t-hero { display: flex; flex-direction: column; justify-content: center; gap: 7%; padding: 5% 6%; border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, var(--t-pr) 26%, var(--t-sf)), var(--t-sf)); }
.cp-athumb .t-hero b { font: 700 clamp(14px, 2.2vw, 22px)/1 var(--th-font, system-ui); letter-spacing: -.02em; color: var(--t-tx); }
.cp-athumb .t-hero .t-l1 { height: 7px; width: 72%; border-radius: 4px; background: color-mix(in srgb, var(--t-tx) 55%, transparent); } .cp-athumb .t-hero .t-l2 { height: 6px; width: 48%; border-radius: 4px; background: color-mix(in srgb, var(--t-tx) 30%, transparent); }
.cp-athumb .t-hero em { width: 28%; height: 14px; border-radius: calc(var(--r) * .8); background: var(--t-ac); }
.cp-athumb .t-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); } .cp-athumb .t-cards i { border-radius: var(--r); background: var(--t-sf); }
.cp-athumb.is-high { --g: 3.5%; grid-template-rows: auto 1.2fr 1.3fr; } .cp-athumb.is-high .t-cards { grid-template-columns: repeat(4, 1fr); } .cp-athumb.is-high .t-cards::after { content: ""; border-radius: var(--r); background: var(--t-sf); }
.cp-athumb.is-low { --g: 9%; padding: 9% 11%; } .cp-athumb.is-low .t-cards { grid-template-columns: repeat(2, 1fr); } .cp-athumb.is-low .t-cards i:last-child { display: none; }
.cp-athumb.is-r-sharp { --r: 1px; } .cp-athumb.is-r-round { --r: 16px; }
.cp-athumb.is-t-serif { --th-font: Georgia, "Times New Roman", serif; } .cp-athumb.is-t-display { --th-font: "Space Grotesk", system-ui; } .cp-athumb.is-t-display .t-hero b { font-size: clamp(18px, 3vw, 30px); } .cp-athumb.is-t-mono_accent { --th-font: ui-monospace, Menlo, monospace; }
.cp-athumb.is-editorial .t-hero { background: none; padding-inline: 0; } .cp-athumb.is-editorial .t-hero b { font-size: clamp(18px, 3vw, 30px); }
.cp-athumb.is-immersive { grid-template-rows: auto 2.2fr .6fr; } .cp-athumb.is-immersive .t-hero { background: linear-gradient(135deg, var(--t-pr), color-mix(in srgb, var(--t-ac) 60%, var(--t-pr))); } .cp-athumb.is-immersive .t-hero b { color: #fff; }
.cp-athumb.is-s-outlined .t-cards i, .cp-athumb.is-s-outlined:not(.is-immersive) .t-hero { background: transparent; border: 1.5px solid color-mix(in srgb, var(--t-tx) 22%, transparent); }
.cp-athumb.is-s-layered .t-cards i { box-shadow: 0 8px 18px -10px rgba(0,0,0,.55); } .cp-athumb.is-s-glass_subtle .t-cards i { background: color-mix(in srgb, var(--t-sf) 70%, transparent); border: 1px solid color-mix(in srgb, var(--t-tx) 12%, transparent); }
.cp-ad-slot:empty { display: none; }
.cp-ad-slot { display: flex; flex-direction: column; gap: 18px; }
.cp-ad-head { display: flex; flex-direction: column; gap: 6px; } .cp-ad-head .cp-eyebrow { margin: 0; color: var(--accent-2); } .cp-ad-head .cp-h2 { font-size: clamp(20px, 2.4vw, 26px); }
.cp-ad-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.cp-ad-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-ad-grid.is-1 { grid-template-columns: minmax(0, 560px); }
.cp-ad { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; min-width: 0; animation: cp-rise .45s var(--ease) both; }
.cp-ad:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.cp-ad.is-rec { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.cp-ad.is-selected { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2), 0 22px 46px -26px var(--accent-2); }
.cp-ad-vis { position: relative; border-bottom: 1px solid var(--line); }
.cp-ad-badge { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; color: #1a1408; background: var(--gold-2); }
.cp-ad-badge.is-sel { inset-inline-start: auto; inset-inline-end: 12px; color: #04121a; background: var(--accent-2); }
.cp-ad-b { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.cp-ad-name { margin: 0; font: 600 17px/1.3 var(--display); overflow-wrap: anywhere; }
.cp-ad-pitch { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.cp-ad-best { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.55; overflow-wrap: anywhere; } .cp-ad-best b { color: var(--text); font-weight: 600; }
.cp-ad-b .cp-btn { margin-top: auto; justify-content: center; }
.cp-ad-wait { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cp-ad-ghost { aspect-ratio: 4 / 3; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 250% 100%; animation: cp-shimmer 1.8s linear infinite; }
@media (max-width: 1024px) { .cp-ad-grid, .cp-ad-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cp-ad-grid, .cp-ad-grid.is-2, .cp-ad-wait { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cp-ad, .cp-ad-ghost { animation: none; transition: none; } }

/* project tabs: soft fade at the edge(s) that hide more tabs (phone widths); logical start/end for RTL */
.cp-tabs2.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.cp-tabs2.fade-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
.cp-tabs2.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
[dir="rtl"] .cp-tabs2.fade-end { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
[dir="rtl"] .cp-tabs2.fade-start { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }

/* ── Phase 5 · production: approval → scope → invoice → 4 steps → completion ── */
.cp-pd { display: flex; flex-direction: column; gap: 20px; }
.cp-pd-hero { position: relative; overflow: hidden; padding: clamp(22px, 3.2vw, 40px); border-radius: calc(var(--r) + 8px); border: 1px solid var(--line-2);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--bg-2));
  box-shadow: var(--shadow); }
html[dir="rtl"] .cp-pd-hero { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--bg-2)); }
.cp-pd-hero.is-done { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.cp-pd-hero-t { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.cp-pd-hero-t .cp-h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); }
.cp-pd-hero-t .cp-sub { margin: 0; }
.cp-pd-now { margin: 0; color: var(--text-dim); font-size: 14px; }
.cp-pd-now b { color: var(--text); }
.cp-pd-dash { grid-template-columns: minmax(0, 1fr); }
.cp-pd-act { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cp-pd-confirm { display: flex; flex-wrap: wrap; gap: 8px; }
/* the four steps: ✓ done · ● now · ○ waiting — logical properties keep RTL mirrored */
.cp-psteps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.cp-psteps li { position: relative; display: flex; flex-direction: column; gap: 10px; padding-inline-end: 12px; min-width: 0; }
.cp-psteps li::after { content: ""; position: absolute; top: 13px; inset-inline-start: 30px; inset-inline-end: 0; height: 2px; border-radius: 2px; background: var(--line-2); }
.cp-psteps li:last-child::after { display: none; }
.cp-psteps li.is-done::after { background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 40%, var(--line-2))); }
html[dir="rtl"] .cp-psteps li.is-done::after { background: linear-gradient(270deg, var(--green), color-mix(in srgb, var(--green) 40%, var(--line-2))); }
.cp-pstep-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-strong); background: var(--bg-2); color: var(--text-faint); font-size: 12px; }
.is-done > .cp-pstep-dot { background: var(--green); border-color: var(--green); color: #052014; }
.is-now > .cp-pstep-dot { border-color: var(--accent-2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-2) 16%, transparent); }
.cp-pstep-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); animation: cp-pulse 1.8s var(--ease) infinite; }
@keyframes cp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }
.cp-psteps li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-psteps li b { font: 600 14px/1.3 var(--display); overflow-wrap: anywhere; }
.cp-psteps li.is-wait b { color: var(--text-dim); }
.cp-psteps li small { color: var(--text-faint); font-size: 12px; }
.cp-psteps li.is-now small { color: var(--accent-2); font-weight: 600; }
.cp-psteps.is-big .cp-pstep-dot { width: 34px; height: 34px; }
.cp-psteps.is-big li::after { top: 16px; inset-inline-start: 36px; }
/* invoice + scope */
.cp-inv { display: flex; flex-direction: column; gap: 2px; padding: clamp(18px, 2.4vw, 24px); border-radius: var(--r); border: 1px solid var(--line-2); background: var(--glass); }
.cp-inv.is-scope { padding: 4px 0 0; border: 0; background: none; }
.cp-inv-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cp-inv-h small { display: block; color: var(--text-faint); font-size: 12px; letter-spacing: .04em; }
.cp-inv-h b { font: 600 16px var(--display); }
.cp-inv-st.is-paid { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.cp-inv-st.is-issued, .cp-inv-st.is-partially_paid { color: var(--gold-2); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.cp-inv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cp-inv-row span { color: var(--text-dim); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cp-inv-row em { font-style: normal; font-size: 11.5px; color: var(--text-faint); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); }
.cp-inv-row b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.cp-inv-row.is-credit b { color: var(--green); }
.cp-inv-row.is-soft { border-bottom: 0; padding-top: 4px; }
.cp-inv-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0 6px; }
.cp-inv-total span { font-weight: 600; }
.cp-inv-total b { font: 700 clamp(20px, 2.6vw, 26px) var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-inv-support { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border-radius: var(--r-s); background: color-mix(in srgb, var(--accent-2) 8%, transparent); color: var(--accent-2); font-size: 13px; font-weight: 600; }
.cp-inv-meta { margin: 8px 0 0; color: var(--text-faint); font-size: 12.5px; }
.cp-inv.is-compact .cp-inv-total { padding-top: 4px; }
/* payment: amount due now, bank transfer, optional hosted payment link */
.cp-pay { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.cp-inv-due { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border-radius: var(--r-s); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.cp-inv-due small { display: block; font-size: 13px; font-weight: 600; }
.cp-inv-due em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.cp-inv-due b { font: 700 20px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-bank { padding: 12px 14px; border-radius: var(--r-s); border: 1px solid var(--line-2); }
.cp-bank-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 6px; }
.cp-bank dl { margin: 0; }
.cp-bank-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cp-bank-row:last-child { border-bottom: 0; }
.cp-bank-row dt { color: var(--text-dim); }
.cp-bank-row dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; font-variant-numeric: tabular-nums; }
.cp-bank-row dd span { overflow-wrap: anywhere; text-align: end; }
.cp-copy { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-dim); cursor: pointer; }
.cp-copy:hover { color: var(--text); } .cp-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-copy.is-done { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.cp-bank-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-faint); line-height: 1.6; }
.cp-pay-online { align-self: flex-start; }
.cp-scope-sum { margin: 0; font-size: 15px; line-height: 1.7; }
/* final design summary */
.cp-fd { display: flex; gap: 16px; align-items: flex-start; }
.cp-fd b { font: 600 17px var(--display); }
.cp-fd p { margin: 6px 0 0; }
.cp-fd-sw { flex: none; display: grid; grid-template-columns: repeat(2, 22px); gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); }
.cp-fd-sw i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.cp-fd-lbl { display: block; margin: 14px 0 8px; color: var(--text-faint); font-size: 12px; letter-spacing: .04em; }
/* support */
.cp-sup-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 4px 0 12px; }
.cp-sup-cols b { display: block; font-size: 13px; margin-bottom: 6px; }
.cp-sup-cols ul { margin: 0; padding-inline-start: 18px; color: var(--text-dim); font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.cp-sup-cols .is-not ul { color: var(--text-faint); }
.cp-sup-cols small { display: block; margin-top: 8px; color: var(--text-faint); font-size: 12.5px; }
.cp-pd-files { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 760px) {
  .cp-psteps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cp-psteps li { flex-direction: row; align-items: flex-start; gap: 12px; padding: 0 0 18px; }
  .cp-psteps li::after { top: 30px; bottom: 2px; inset-inline-start: 13px; inset-inline-end: auto; width: 2px; height: auto; }
  .cp-psteps.is-big li::after { top: 36px; inset-inline-start: 16px; }
  .cp-psteps li.is-done::after, html[dir="rtl"] .cp-psteps li.is-done::after { background: var(--green); }
  .cp-psteps li > div { padding-top: 4px; }
  .cp-sup-cols { grid-template-columns: minmax(0, 1fr); }
  .cp-fd { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .cp-pstep-pulse { animation: none; } }
.cp-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-amt bdi { unicode-bidi: isolate; }

/* ── Vault · delivery · update requests ── */
.cp-lc-requested, .cp-lc-on_hold, .cp-lc-cancelled, .cp-urs-new, .cp-urs-cancelled { --c: var(--slate); }
.cp-lc-reviewing, .cp-lc-approved, .cp-urs-reviewing, .cp-urs-quoted { --c: var(--amber); }
.cp-lc-in_progress, .cp-urs-approved, .cp-urs-in_progress { --c: var(--accent-hi); }
.cp-lc-ready_for_delivery, .cp-urs-ready { --c: var(--accent-3); }
.cp-lc-delivered, .cp-urs-completed { --c: var(--green); }
.cp-ur-urgent { --c: var(--amber); }
.cp-vc-source { --c: var(--accent-hi); } .cp-vc-export { --c: var(--accent-2); } .cp-vc-design { --c: var(--accent-3); } .cp-vc-document, .cp-vc-specification { --c: var(--gold); }
.cp-vc-handover { --c: var(--green); } .cp-vc-asset { --c: var(--accent-2); } .cp-vc-other { --c: var(--slate); }
.cp-dlv { position: relative; overflow: hidden; display: grid; padding: clamp(20px, 3vw, 32px); border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); background: linear-gradient(160deg, var(--surface), var(--bg-2)); box-shadow: var(--shadow); }
.cp-dlv-t { position: relative; display: grid; gap: 10px; max-width: 720px; }
.cp-dlv-t .cp-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green); }
.cp-dlv-h { margin: 0; font: 700 clamp(24px, 3.4vw, 34px)/1.15 var(--display); letter-spacing: -.01em; }
.cp-dlv-date { margin: 0; color: var(--text-dim); font-size: 14px; }
.cp-dlv-p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.6; }
.cp-links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cp-link-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 500; background: var(--raise); }
.cp-link-chip:hover { border-color: var(--accent-hi); } .cp-link-chip:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.cp-link-chip .cp-ext { font-size: 11px; color: var(--text-faint); }
.cp-vault { display: grid; gap: 16px; }
.cp-vault-cur { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 14px; }
.cp-vault-old { display: grid; gap: 6px; margin-top: 12px; }
.cp-more { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 16px; background: var(--surface); }
.cp-more > summary { cursor: pointer; font-weight: 600; } .cp-more > summary:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 6px; }
.cp-fr-note { display: block; color: var(--text-faint); overflow-wrap: anywhere; }
.cp-upd { display: grid; gap: 16px; }
.cp-upd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-upd-head .cp-sub { margin: 0; max-width: 640px; }
.cp-svu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.cp-svu > div { padding: 14px 16px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); }
.cp-svu b { display: flex; align-items: center; gap: 8px; } .cp-svu p { margin: 6px 0 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; }
.cp-ur-list { display: grid; gap: 12px; }
.cp-ur { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--bg-2); }
.cp-ur-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-ur-type { color: var(--text-dim); font-size: 13px; }
.cp-ur-m { color: var(--text-faint); }
.cp-ur-d { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.cp-ur-q, .cp-ur-v { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-ur-att { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.cp-ur-att .cp-link-btn { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.cp-ur-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cp-rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cp-rel > li { display: grid; gap: 4px; padding-inline-start: 14px; border-inline-start: 2px solid var(--line-2); }
.cp-rel > li.is-current { border-inline-start-color: var(--green); }
.cp-rel-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cp-rel p { margin: 0; }
.cp-rel-notes { margin: 2px 0 0; white-space: pre-wrap; font: inherit; color: var(--text-dim); font-size: 13.5px; }
.cp-dim { color: var(--text-faint); }
.cp-sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cp-sp-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cp-sp-list a { display: grid; gap: 2px; min-width: 0; color: var(--text); text-decoration: none; } .cp-sp-list a b { overflow-wrap: anywhere; }
.cp-sp-list a:hover b { text-decoration: underline; } .cp-sp-list small { color: var(--text-faint); }
.cp-pcard-v { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cp-pcard-v dt { font-size: 12px; color: var(--text-faint); } .cp-pcard-v dd { margin: 2px 0 0; font-weight: 600; }
.cp-ws-ver { font-weight: 600; color: var(--green); }
@media (max-width: 760px) { .cp-dlv .cp-shero-cta > * { flex: 1 1 100%; justify-content: center; } .cp-upd-head > .cp-btn { width: 100%; justify-content: center; } }
.cp-calm-status { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-dim); font-size: 14px; }
.cp-lib-legacy { margin-top: 8px; } .cp-lib-legacy[open] > :not(summary) { margin-top: 12px; }
/* Delivered project: facts row, release notes, clear Files hierarchy */
.cp-dlv-facts { margin: 6px 0 2px; }
.cp-dlv-facts dd { font: 600 16px var(--display); }
.cp-dlv-notes { margin-top: 2px; }
.cp-dlv-notes .cp-rel-notes { margin: 8px 0 0; }
.cp-vault-sec { display: grid; gap: 6px; }
.cp-vault-sec .cp-h3 { margin: 0; }
/* Offers for your project — premium, lighter than the delivery hero; tokens follow every theme */
.cp-enh { position: relative; overflow: hidden; display: grid; gap: 16px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 5%, var(--surface)), var(--bg-2)); }
.cp-enh-head { position: relative; display: grid; gap: 4px; } .cp-enh-head .cp-h2 { margin: 0; } .cp-enh-head .cp-sub { margin: 0; max-width: 640px; }
.cp-enh-head .cp-eyebrow i { color: var(--gold-2); }
.cp-offers { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.cp-of { --c: var(--accent-2); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c) 24%, var(--line)); background: linear-gradient(165deg, color-mix(in srgb, var(--c) 7%, transparent), rgba(255,255,255,.015) 60%); transition: transform .3s ease, border-color .3s, box-shadow .3s; }
.cp-of.is-excl { --c: var(--gold-2); }
.cp-of:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 48%, var(--line)); box-shadow: 0 16px 36px -24px color-mix(in srgb, var(--c) 70%, transparent); }
.cp-of-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.cp-of-b { display: grid; gap: 6px; min-width: 0; align-content: start; }
.cp-of-k { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.cp-of-badge { font-style: normal; letter-spacing: .02em; text-transform: none; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: #1B1405; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 45%, transparent); }
.cp-of-t { margin: 0; font: 600 16px/1.3 var(--display); overflow-wrap: break-word; }
.cp-of-p { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; }
.cp-of-price { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: end; margin-top: 2px; }
.cp-of-was, .cp-of-now { display: grid; gap: 1px; } .cp-of-was small, .cp-of-now small { font-size: 11.5px; color: var(--text-faint); }
.cp-of-was s { color: var(--text-faint); } .cp-of-was .cp-amt { font-weight: 500; }
.cp-of-now .cp-amt { font: 700 20px var(--display); color: var(--text); }
.cp-of-save { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--green, #3DDC97); }
.cp-of-exp { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); } .cp-of-exp i { color: var(--gold-2); }
.cp-of-note { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.cp-of-req { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .cp-of-req i { color: var(--green, #3DDC97); }
.cp-of-cta { justify-self: start; margin-top: 4px; }
.cp-ur-offer { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--gold) 7%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); }
.cp-ur-offer i { color: var(--gold-2); } .cp-ur-offer s { color: var(--text-faint); } .cp-ur-offer em { font-style: normal; font-weight: 700; color: var(--gold-2); }
@media (prefers-reduced-motion: reduce) { .cp-of { transition: none; } .cp-of:hover { transform: none; } }
/* Home: a quiet teaser when the current project has an offer (full cards live in the project) */
.cp-home-offer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r); text-decoration: none; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 6%, var(--surface)), var(--bg-2)); transition: transform .3s ease, border-color .3s, box-shadow .3s; }
.cp-home-offer:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 48%, var(--line)); box-shadow: 0 16px 36px -24px color-mix(in srgb, var(--gold) 60%, transparent); }
.cp-home-offer .cp-of-ic { --c: var(--gold-2); }
.cp-home-offer-t { display: grid; gap: 2px; min-width: 0; } .cp-home-offer-t small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); } .cp-home-offer-t b { font: 600 15px var(--display); overflow-wrap: break-word; }
.cp-home-offer > i { color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) { .cp-home-offer { transition: none; } .cp-home-offer:hover { transform: none; } }
/* Phones: the project's four tabs sit in one row as equal columns (icon over label) — no sideways scrolling */
@media (max-width: 560px) {
  .cp-tabs2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .cp-tabs2 > [role="tab"] { flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 9px 4px; font-size: 12px; line-height: 1.25; text-align: center; white-space: normal; }
  .cp-tabs2 > [role="tab"] span { overflow-wrap: break-word; }
}
/* Offer details — confirm before anything is requested */
.cp-ofd { --c: var(--accent-2); position: relative; overflow: hidden; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; margin: auto; padding: clamp(20px, 4vw, 28px); border-radius: calc(var(--r) + 4px);
  color: var(--text); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line-2)); background: linear-gradient(165deg, color-mix(in srgb, var(--c) 8%, var(--surface)), var(--bg-2)); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
.cp-ofd.is-excl { --c: var(--gold-2); }
.cp-ofd::backdrop { background: rgba(4, 7, 14, .66); backdrop-filter: blur(6px); }
.cp-ofd[open] { animation: cp-ofd-in .28s ease both; }
@keyframes cp-ofd-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.cp-ofd > * { position: relative; }
.cp-ofd-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text-dim); cursor: pointer; z-index: 1; }
.cp-ofd-x:hover { color: var(--text); } .cp-ofd-x:focus-visible, .cp-ofd .cp-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cp-ofd-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding-inline-end: 40px; }
.cp-ofd-head > div { display: grid; gap: 4px; min-width: 0; } .cp-ofd .cp-of-t { font-size: 19px; margin: 0; }
.cp-ofd .cp-of-p { margin: 14px 0 0; }
.cp-ofd-dl { margin: 16px 0 0; display: grid; gap: 0; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.cp-ofd-r { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); }
.cp-ofd-r:first-child { border-top: 0; } .cp-ofd-r dt { color: var(--text-dim); font-size: 13.5px; } .cp-ofd-r dd { margin: 0; font-weight: 600; text-align: end; }
.cp-ofd-r s { color: var(--text-faint); } .cp-ofd-r.is-yours { background: color-mix(in srgb, var(--c) 7%, transparent); } .cp-ofd-r.is-yours .cp-amt { font: 700 20px var(--display); }
.cp-ofd-r.is-save dd { color: var(--green, #3DDC97); }
.cp-ofd .cp-note2 { margin: 14px 0 0; }
.cp-ofd-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .cp-ofd-acts .cp-btn-primary { flex: 1 1 200px; justify-content: center; }
/* Active project: "Next" line under the single status */
.cp-ov2-next { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 13.5px; color: var(--text-dim); } .cp-ov2-next i { font-size: 11px; color: var(--accent-2); } .cp-ov2-next b { color: var(--text); font-weight: 600; }
.cp-ov2-t .cp-st-track { margin: 4px 0 2px; }
@media (prefers-reduced-motion: reduce) { .cp-ofd[open] { animation: none; } }