/* ═══════════════════════════════════════════════════════════════════
   JOBS CONNECT — Design System v2 (PHP build)
   Find Work. Find Workers. Get Things Done.

   Same tokens and class names as the HTML prototype, so pages and the
   prototype's stylesheet stay interchangeable.

   01 Tokens      07 Cards        13 App shell     19 Toasts        25 Steppers
   02 Base        08 KPI tiles    14 Sidebar       20 Dropdowns     26 Live
   03 Type        09 Lists        15 Topbar        21 Tabs & chips  27 Public site
   04 Layout      10 Tables       16 Hero panel    22 Pagination    28 Motion
   05 Buttons     11 Badges       17 Charts        23 Empty         29 Domain pieces
   06 Forms       12 Avatars      18 Modals        24 Alerts        30 Responsive
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── 01 TOKENS ───────────────────────────────────────────────────── */
:root {
  --jc-navy:#001529; --jc-navy-2:#03233F; --jc-navy-line:#17304A;
  --jc-blue:#1C3D7D; --jc-blue-light:#2563A8; --jc-blue-tint:#EEF3FA;
  --jc-gold:#FFB703; --jc-gold-dark:#E5A500; --jc-gold-tint:rgba(255,183,3,0.14);

  --jc-bg:#F5F7FA; --jc-surface:#FFFFFF; --jc-surface-2:#F8FAFC;
  --jc-border:#E5EAF0; --jc-border-strong:#CBD5E1;

  --jc-text:#0F172A; --jc-text-2:#64748B; --jc-text-muted:#94A3B8;
  --jc-text-on-dark:#FFFFFF; --jc-text-on-dark-2:rgba(255,255,255,0.68); --jc-text-on-dark-3:rgba(255,255,255,0.46);

  --jc-success:#16A34A; --jc-success-bg:#DCFCE7; --jc-success-fg:#166534;
  --jc-warning:#F59E0B; --jc-warning-bg:#FEF3C7; --jc-warning-fg:#92400E;
  --jc-error:#DC2626;   --jc-error-bg:#FEE2E2;   --jc-error-fg:#991B1B;
  --jc-info:#2563A8;    --jc-info-bg:#DBEAFE;    --jc-info-fg:#1E40AF;

  --jc-font:'Inter','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:56px; --fs-page:32px; --fs-dash:28px; --fs-section:24px; --fs-card:20px;
  --fs-sub:17px; --fs-body:16px; --fs-data:15px; --fs-meta:14px; --fs-micro:13px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --r-xs:4px; --r-sm:7px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-full:999px;

  --sh-xs:0 1px 2px rgba(15,23,42,0.04);
  --sh-header:0 1px 3px rgba(15,23,42,0.04);
  --sh-card:0 4px 16px rgba(15,23,42,0.04);
  --sh-hover:0 10px 24px rgba(15,23,42,0.07);
  --sh-raised:0 8px 24px rgba(15,23,42,0.06);
  --sh-float:0 12px 30px rgba(15,23,42,0.09);
  --sh-overlay:0 24px 56px rgba(0,21,41,0.18);
  --ring:0 0 0 3px rgba(37,99,168,0.18);

  --ease:cubic-bezier(.22,.61,.36,1); --dur-fast:180ms; --dur:240ms; --dur-slow:380ms;
  --sidebar-w:260px; --header-h:68px; --content-max:1400px; --site-max:1240px;
}

/* ── 02 BASE ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:var(--jc-font); font-size:var(--fs-body); line-height:1.5; color:var(--jc-text); background:var(--jc-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
ul,ol { list-style:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-xs); }
::selection { background:rgba(255,183,3,0.35); color:var(--jc-navy); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#D5DCE5; border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.num,.tabular { font-variant-numeric:tabular-nums; }
[data-lucide] { width:18px; height:18px; stroke-width:1.75; flex-shrink:0; }
.i-14 { width:14px!important; height:14px!important; } .i-16 { width:16px!important; height:16px!important; } .i-20 { width:20px!important; height:20px!important; }

/* ── 03 TYPOGRAPHY ───────────────────────────────────────────────── */
.t-display { font-size:var(--fs-display); font-weight:700; line-height:1.06; letter-spacing:-0.028em; color:var(--jc-navy); }
.t-page    { font-size:var(--fs-page); font-weight:700; line-height:1.2; letter-spacing:-0.02em; }
.t-dash    { font-size:var(--fs-dash); font-weight:700; line-height:1.2; letter-spacing:-0.018em; }
.t-section { font-size:var(--fs-section); font-weight:700; line-height:1.25; letter-spacing:-0.014em; }
.t-card    { font-size:var(--fs-card); font-weight:600; line-height:1.35; letter-spacing:-0.008em; }
.t-sub     { font-size:var(--fs-sub); font-weight:500; line-height:1.5; color:var(--jc-text-2); }
.t-body    { font-size:var(--fs-body); line-height:1.55; color:var(--jc-text-2); }
.t-meta    { font-size:var(--fs-meta); color:var(--jc-text-2); }
.t-micro   { font-size:var(--fs-micro); color:var(--jc-text-muted); }
.t-label   { font-size:var(--fs-micro); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--jc-text-2); }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--jc-blue); }
.eyebrow::before { content:''; width:18px; height:2px; background:var(--jc-gold); border-radius:2px; }
.eyebrow.on-dark { color:var(--jc-gold); }
.text-2 { color:var(--jc-text-2); } .text-muted { color:var(--jc-text-muted); } .text-navy { color:var(--jc-navy); }
.text-blue { color:var(--jc-blue); } .text-gold { color:var(--jc-gold); } .text-success { color:var(--jc-success); } .text-error { color:var(--jc-error); }
.fw-500 { font-weight:500; } .fw-600 { font-weight:600; } .fw-700 { font-weight:700; }
.link { color:var(--jc-blue); font-weight:600; display:inline-flex; align-items:center; gap:4px; transition:color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease); }
.link:hover { color:var(--jc-blue-light); gap:7px; }
.prose { font-size:16px; line-height:1.7; color:var(--jc-text); white-space:pre-line; }

/* ── 04 LAYOUT ───────────────────────────────────────────────────── */
.container { width:100%; max-width:var(--site-max); margin:0 auto; padding:0 32px; }
.stack { display:flex; flex-direction:column; } .row { display:flex; align-items:center; }
.between { justify-content:space-between; } .wrap { flex-wrap:wrap; } .grow { flex:1; min-width:0; }
.items-start { align-items:flex-start; }
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}.gap-8{gap:32px}
.grid { display:grid; gap:16px; }
.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.span-2 { grid-column:span 2; }
.split { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:16px; align-items:start; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.ml-auto { margin-left:auto; } .w-full { width:100%; }
.hidden { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.divider { height:1px; background:var(--jc-border); border:0; margin:20px 0; }
.inline-form { display:inline; }

/* ── 05 BUTTONS ──────────────────────────────────────────────────── */
.btn { --btn-h:40px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--btn-h); padding:0 16px;
  border-radius:var(--r-sm); border:1px solid transparent; font-size:16px; font-weight:600; line-height:1; letter-spacing:-0.005em; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); user-select:none; }
.btn [data-lucide],.btn svg { width:16px; height:16px; }
.btn:active { transform:translateY(1px); }
.btn:disabled,.btn.is-disabled { opacity:.5; pointer-events:none; }
.btn-primary { background:var(--jc-navy); color:#fff; } .btn-primary:hover { background:var(--jc-navy-2); box-shadow:0 6px 16px rgba(0,21,41,0.18); }
.btn-gold { background:var(--jc-gold); color:var(--jc-navy); } .btn-gold:hover { background:var(--jc-gold-dark); box-shadow:0 6px 16px rgba(229,165,0,0.28); }
.btn-blue { background:var(--jc-blue); color:#fff; } .btn-blue:hover { background:var(--jc-blue-light); }
.btn-secondary { background:var(--jc-surface); color:var(--jc-text); border-color:var(--jc-border-strong); box-shadow:var(--sh-xs); }
.btn-secondary:hover { background:var(--jc-surface-2); border-color:#B7C3D2; }
.btn-ghost { background:transparent; color:var(--jc-text-2); } .btn-ghost:hover { background:var(--jc-bg); color:var(--jc-text); }
.btn-danger { background:var(--jc-error); color:#fff; } .btn-danger:hover { background:#B91C1C; }
.btn-danger-soft { background:var(--jc-error-bg); color:var(--jc-error-fg); } .btn-danger-soft:hover { background:#FECACA; }
.btn-success { background:var(--jc-success); color:#fff; } .btn-success:hover { background:#15803D; }
.btn-on-dark { background:rgba(255,255,255,0.06); color:#fff; border-color:rgba(255,255,255,0.22); }
.btn-on-dark:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.36); }
.btn-sm { --btn-h:32px; padding:0 12px; font-size:15px; gap:6px; } .btn-sm [data-lucide] { width:14px; height:14px; }
.btn-xs { --btn-h:28px; padding:0 10px; font-size:14px; gap:5px; border-radius:6px; } .btn-xs [data-lucide] { width:13px; height:13px; }
.btn-lg { --btn-h:48px; padding:0 22px; font-size:17px; }
.btn-block { width:100%; }
.btn-icon { width:var(--btn-h); padding:0; }
.btn.is-loading { color:transparent!important; pointer-events:none; }
.btn.is-loading::after { content:''; position:absolute; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-color:rgba(255,255,255,.9) rgba(255,255,255,.9) transparent transparent; animation:jc-spin .7s linear infinite; }
.btn-secondary.is-loading::after,.btn-ghost.is-loading::after { border-color:var(--jc-navy) var(--jc-navy) transparent transparent; }
.icon-btn { position:relative; width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-sm); color:var(--jc-text-2); transition:background var(--dur-fast), color var(--dur-fast); }
.icon-btn:hover { background:var(--jc-bg); color:var(--jc-text); }
.icon-btn .dot { position:absolute; top:1px; right:0; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:var(--jc-gold); color:var(--jc-navy); font-size:9.5px; font-weight:700; line-height:1; display:grid; place-items:center; border:1.5px solid #fff; box-sizing:content-box; }
.icon-btn-sm { width:32px; height:32px; }

/* ── 06 FORMS ────────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; }
.field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field-row.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.label { font-size:15px; font-weight:600; color:var(--jc-text); }
.label .req { color:var(--jc-error); margin-left:2px; } .label .opt { color:var(--jc-text-muted); font-weight:500; margin-left:4px; }
.hint { font-size:14px; color:var(--jc-text-2); }
.error-msg { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--jc-error); }
.error-msg [data-lucide] { width:14px; height:14px; }
.input { width:100%; height:42px; padding:0 12px; background:#fff; border:1px solid var(--jc-border-strong); border-radius:var(--r-sm); font-size:16px; color:var(--jc-text);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
.input::placeholder { color:var(--jc-text-muted); }
.input:hover { border-color:#B7C3D2; }
.input:focus { outline:none; border-color:var(--jc-blue-light); box-shadow:var(--ring); }
.input:disabled { background:var(--jc-surface-2); color:var(--jc-text-2); }
.input-lg { height:48px; font-size:17px; } .input-sm { height:34px; font-size:15px; }
textarea.input { height:auto; min-height:110px; padding:10px 12px; line-height:1.55; resize:vertical; }
select.input { appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
select.input[multiple] { height:auto; padding:6px; background-image:none; }
.field.has-error .input { border-color:var(--jc-error); }
.field.has-error .input:focus { box-shadow:0 0 0 3px rgba(220,38,38,0.15); }
.input-wrap { position:relative; }
.input-wrap > [data-lucide] { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--jc-text-muted); pointer-events:none; }
.input-wrap .input { padding-left:36px; }
.input-affix { display:flex; }
.input-affix .affix { display:flex; align-items:center; padding:0 12px; background:var(--jc-surface-2); border:1px solid var(--jc-border-strong); border-right:0; border-radius:var(--r-sm) 0 0 var(--r-sm); font-size:15px; font-weight:600; color:var(--jc-text-2); }
.input-affix .input { border-radius:0 var(--r-sm) var(--r-sm) 0; }
.check { display:inline-flex; align-items:center; gap:8px; font-size:16px; cursor:pointer; }
.check input { width:16px; height:16px; accent-color:var(--jc-navy); }
.switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.switch input { position:absolute; opacity:0; inset:0; cursor:pointer; z-index:1; }
.switch .track { position:absolute; inset:0; border-radius:99px; background:var(--jc-border-strong); transition:background var(--dur-fast); }
.switch .track::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--dur-fast) var(--ease); }
.switch input:checked + .track { background:var(--jc-success); }
.switch input:checked + .track::after { transform:translateX(16px); }
.option-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.option { position:relative; display:flex; gap:10px; align-items:flex-start; padding:14px; border:1px solid var(--jc-border-strong); border-radius:var(--r-md); background:#fff; cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast); }
.option input { position:absolute; opacity:0; pointer-events:none; }
.option [data-lucide] { color:var(--jc-blue); }
.option:hover { border-color:#B7C3D2; }
.option:has(input:checked), .option.is-selected { border-color:var(--jc-navy); background:var(--jc-blue-tint); box-shadow:0 0 0 1px var(--jc-navy); }
.option .o-title { font-size:15px; font-weight:600; } .option .o-sub { font-size:14px; color:var(--jc-text-2); }
.skill-picker { display:flex; flex-wrap:wrap; gap:8px; max-height:280px; overflow:auto; padding:12px; border:1px solid var(--jc-border-strong); border-radius:var(--r-md); background:var(--jc-surface-2); }
.skill-picker .sp-group { width:100%; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jc-text-2); margin-top:6px; }
.skill-picker .sp-group:first-child { margin-top:0; }
.skill-chip { position:relative; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--jc-border-strong); border-radius:99px; background:#fff; font-size:15px; font-weight:500; cursor:pointer; transition:all var(--dur-fast); }
.skill-chip input { position:absolute; opacity:0; pointer-events:none; }
.skill-chip:hover { border-color:var(--jc-blue-light); }
.skill-chip:has(input:checked) { background:var(--jc-navy); border-color:var(--jc-navy); color:#fff; }
.form-section { padding:24px; border-bottom:1px solid var(--jc-border); }
.form-section:last-child { border-bottom:0; }
.form-section h3 { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:600; } .form-section .fs-sub { font-size:15px; color:var(--jc-text-2); margin-top:2px; margin-bottom:18px; }
.form-grid { display:grid; gap:16px; }
.dropzone { display:flex; flex-direction:column; align-items:center; gap:6px; padding:24px; border:1.5px dashed var(--jc-border-strong); border-radius:var(--r-md); background:var(--jc-surface-2); text-align:center; cursor:pointer; }
.dropzone:hover { border-color:var(--jc-blue-light); }
.dropzone input { max-width:100%; font-size:15px; }

/* ── 07 CARDS ────────────────────────────────────────────────────── */
.card { background:var(--jc-surface); border:1px solid var(--jc-border); border-radius:var(--r-lg); box-shadow:var(--sh-card); }
.card.is-interactive { transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur); }
.card.is-interactive:hover { box-shadow:var(--sh-hover); transform:translateY(-2px); border-color:#D8E0EA; }
.card:not(.card-flush) { padding:20px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--jc-border); }
.card-head h3,.card-title { font-size:17px; font-weight:600; letter-spacing:-0.005em; }
.card-head .card-sub { font-size:14px; color:var(--jc-text-2); margin-top:2px; }
.card-body { padding:20px; }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-top:1px solid var(--jc-border); background:var(--jc-surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); }
.surface-muted { background:var(--jc-surface-2); border:1px solid var(--jc-border); border-radius:var(--r-md); padding:14px 16px; }
.dl { display:grid; grid-template-columns:auto 1fr; gap:10px 20px; font-size:15px; }
.dl dt { color:var(--jc-text-2); } .dl dd { font-weight:500; text-align:right; }

/* ── 08 KPI ──────────────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.kpi { background:#fff; border:1px solid var(--jc-border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--sh-card); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.kpi-label { font-size:15px; font-weight:500; color:var(--jc-text-2); }
.kpi-icon { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--jc-blue-tint); color:var(--jc-blue); }
.kpi-icon [data-lucide] { width:17px; height:17px; }
.kpi-icon.gold { background:var(--jc-gold-tint); color:var(--jc-gold-dark); } .kpi-icon.green { background:var(--jc-success-bg); color:var(--jc-success); }
.kpi-icon.red { background:var(--jc-error-bg); color:var(--jc-error); } .kpi-icon.navy { background:var(--jc-navy); color:var(--jc-gold); }
.kpi-value { font-size:26px; font-weight:700; letter-spacing:-0.02em; color:var(--jc-text); font-variant-numeric:tabular-nums; line-height:1.15; }
.kpi-value small { font-size:15px; font-weight:600; color:var(--jc-text-2); margin-right:4px; }
.kpi-foot { font-size:14px; color:var(--jc-text-2); margin-top:6px; display:flex; align-items:center; gap:6px; }

/* ── 09 LISTS ────────────────────────────────────────────────────── */
.list > * { border-bottom:1px solid var(--jc-border); } .list > *:last-child { border-bottom:0; }
.list-item { display:flex; align-items:center; gap:14px; padding:14px 20px; transition:background var(--dur-fast); }
a.list-item:hover { background:var(--jc-surface-2); }
.list-item .li-title { font-size:16px; font-weight:600; color:var(--jc-text); }
.list-item .li-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:14px; color:var(--jc-text-2); margin-top:3px; }
.list-item .li-meta span { display:inline-flex; align-items:center; gap:4px; }
.list-item .li-meta [data-lucide] { width:13px; height:13px; color:var(--jc-text-muted); }
.li-icon { width:40px; height:40px; border-radius:9px; display:grid; place-items:center; background:var(--jc-blue-tint); color:var(--jc-blue); flex-shrink:0; }
.li-icon [data-lucide] { width:18px; height:18px; }
.li-right { margin-left:auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.li-amount { font-size:16px; font-weight:700; color:var(--jc-navy); font-variant-numeric:tabular-nums; }

/* ── 10 TABLES ───────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:var(--fs-data); }
.table th { text-align:left; padding:10px 16px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--jc-text-2); background:var(--jc-surface-2); border-bottom:1px solid var(--jc-border); white-space:nowrap; }
.table td { padding:12px 16px; border-bottom:1px solid var(--jc-border); vertical-align:middle; }
.table tbody tr { transition:background var(--dur-fast); } .table tbody tr:hover { background:var(--jc-surface-2); }
.table tbody tr:last-child td { border-bottom:0; }
.table .num { text-align:right; font-variant-numeric:tabular-nums; } .table .muted { color:var(--jc-text-2); }
.table .actions { text-align:right; white-space:nowrap; }
.cell-user { display:flex; align-items:center; gap:10px; }
.cell-user .name { font-weight:600; } .cell-user .sub { font-size:14px; color:var(--jc-text-2); }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 20px; border-bottom:1px solid var(--jc-border); }
.toolbar-left,.toolbar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── 11 BADGES ───────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:99px; font-size:13px; font-weight:600; white-space:nowrap; background:var(--jc-bg); color:var(--jc-text-2); }
.badge [data-lucide] { width:12px; height:12px; }
.badge-success { background:var(--jc-success-bg); color:var(--jc-success-fg); } .badge-warning { background:var(--jc-warning-bg); color:var(--jc-warning-fg); }
.badge-error { background:var(--jc-error-bg); color:var(--jc-error-fg); } .badge-info { background:var(--jc-info-bg); color:var(--jc-info-fg); }
.badge-navy { background:var(--jc-navy); color:#fff; } .badge-gold { background:var(--jc-gold-tint); color:#8A5A00; }
.badge-outline { background:transparent; border:1px solid var(--jc-border-strong); }
.badge-dot::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag { display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:6px; background:var(--jc-bg); border:1px solid var(--jc-border); font-size:14px; font-weight:500; color:var(--jc-text-2); }
.tag.is-match { background:var(--jc-success-bg); border-color:#BBF7D0; color:var(--jc-success-fg); }
.verified { display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:600; color:var(--jc-blue); }
.verified [data-lucide] { width:14px; height:14px; }
.rating { display:inline-flex; align-items:center; gap:4px; font-size:14px; color:var(--jc-text-2); }
.rating [data-lucide] { width:13px; height:13px; color:var(--jc-gold); fill:var(--jc-gold); }
.rating strong { color:var(--jc-text); font-weight:600; }

/* ── 12 AVATARS ──────────────────────────────────────────────────── */
.avatar { position:relative; width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; flex-shrink:0; background:var(--jc-blue-tint); color:var(--jc-blue); font-size:15px; font-weight:700; overflow:visible; }
.avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.avatar.navy { background:var(--jc-navy); color:var(--jc-gold); } .avatar.steel { background:#DCE4EE; color:var(--jc-navy); }
.avatar.slate { background:#E2E8F0; color:#334155; } .avatar.soft { background:var(--jc-gold-tint); color:#8A5A00; }
.avatar-sm { width:30px; height:30px; font-size:13px; } .avatar-md { width:38px; height:38px; } .avatar-lg { width:56px; height:56px; font-size:20px; } .avatar-xl { width:80px; height:80px; font-size:24px; }
.avatar .presence { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:var(--jc-text-muted); border:2px solid #fff; }
.avatar .presence.on { background:var(--jc-success); }
.avatar-ring { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--jc-gold); }

/* ── 13 APP SHELL ────────────────────────────────────────────────── */
.app { display:flex; min-height:100vh; }
.app-main { flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; }
.page { width:100%; max-width:var(--content-max); margin:0 auto; padding:28px 32px 48px; }
.page-narrow { max-width:880px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.page-title { font-size:var(--fs-dash); font-weight:700; letter-spacing:-0.018em; line-height:1.2; }
.page-sub { font-size:16px; color:var(--jc-text-2); margin-top:4px; }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:28px 0 12px; }
.section-head h2 { font-size:18px; font-weight:600; }
.scrim { position:fixed; inset:0; background:rgba(0,21,41,.4); opacity:0; pointer-events:none; transition:opacity var(--dur); z-index:290; }
.scrim.is-open { opacity:1; pointer-events:auto; }

/* ── 14 SIDEBAR ──────────────────────────────────────────────────── */
.sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); background:var(--jc-navy); color:var(--jc-text-on-dark-2); display:flex; flex-direction:column; z-index:300; transition:transform var(--dur) var(--ease); }
.sb-brand { display:flex; align-items:center; gap:12px; height:var(--header-h); padding:0 20px; border-bottom:1px solid var(--jc-navy-line); flex-shrink:0; }
.sb-brand-name { font-size:17px; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.sb-brand-sub { font-size:13px; color:var(--jc-text-on-dark-3); }
.sb-nav { flex:1; overflow-y:auto; padding:12px 12px 20px; }
.sb-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); }
.sb-section { padding:18px 10px 6px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--jc-text-on-dark-3); }
.sb-link { position:relative; display:flex; align-items:center; gap:11px; height:38px; padding:0 10px; border-radius:var(--r-sm); font-size:15.5px; font-weight:500; color:var(--jc-text-on-dark-2); transition:background var(--dur-fast), color var(--dur-fast); }
.sb-link [data-lucide] { width:17px; height:17px; opacity:.85; }
.sb-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.sb-link.is-active { background:rgba(255,255,255,.09); color:#fff; font-weight:600; }
.sb-link.is-active::before { content:''; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--jc-gold); }
.sb-link.is-active [data-lucide] { color:var(--jc-gold); opacity:1; }
.sb-count { margin-left:auto; min-width:20px; height:18px; padding:0 6px; border-radius:99px; background:rgba(255,255,255,.1); font-size:13px; font-weight:600; display:grid; place-items:center; }
.sb-count.is-alert { background:var(--jc-gold); color:var(--jc-navy); }
.sb-foot { padding:12px; border-top:1px solid var(--jc-navy-line); }
.sb-user { display:flex; align-items:center; gap:10px; padding:8px 10px 12px; }
.sb-user-name { font-size:15px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user-role { font-size:13.5px; color:var(--jc-text-on-dark-3); }
.brand-mark { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--jc-gold); flex-shrink:0; }
.brand-mark svg { width:20px; height:20px; }
.brand-mark.on-light { background:var(--jc-navy); }

/* ── 15 TOPBAR ───────────────────────────────────────────────────── */
.topbar { position:sticky; top:0; z-index:200; height:var(--header-h); display:flex; align-items:center; gap:16px; padding:0 32px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--jc-border); box-shadow:var(--sh-header); }
.topbar-toggle { display:none; }
.crumbs { display:flex; align-items:center; gap:6px; font-size:15px; color:var(--jc-text-2); min-width:0; }
.crumbs a:hover { color:var(--jc-text); }
.crumbs .sep { width:14px; height:14px; color:var(--jc-text-muted); }
.crumbs .current { color:var(--jc-text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:6px; }
.topbar-divider { width:1px; height:28px; background:var(--jc-border); margin:0 8px; }
.profile-chip { display:flex; align-items:center; gap:10px; padding:4px 4px 4px 10px; border-radius:var(--r-md); text-align:right; transition:background var(--dur-fast); }
.profile-chip:hover { background:var(--jc-bg); }
.profile-name { font-size:15px; font-weight:600; color:var(--jc-text); }
.profile-role { display:flex; align-items:center; justify-content:flex-end; gap:4px; font-size:13.5px; color:var(--jc-text-2); }
.profile-role [data-lucide] { width:12px; height:12px; color:var(--jc-blue); }
.status-toggle { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 8px 0 12px; border:1px solid var(--jc-border); border-radius:99px; font-size:14px; font-weight:600; color:var(--jc-text-2); cursor:pointer; }
.status-toggle.is-online { border-color:#BBF7D0; background:#F0FDF4; color:var(--jc-success-fg); }

/* ── 16 HERO PANEL ───────────────────────────────────────────────── */
.hero-panel { position:relative; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(135deg,var(--jc-navy) 0%,var(--jc-navy-2) 60%,#0B3358 100%); color:#fff; box-shadow:var(--sh-raised); }
.hero-panel .hp-net { position:absolute; right:0; top:0; height:100%; width:60%; opacity:.9; pointer-events:none; }
.hp-inner { position:relative; padding:28px 32px; }
.hp-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.hp-eyebrow { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--jc-text-on-dark-2); }
.hp-eyebrow [data-lucide] { width:14px; height:14px; color:var(--jc-gold); }
.hp-title { font-size:28px; font-weight:700; letter-spacing:-0.02em; margin-top:10px; line-height:1.2; }
.hp-title em { font-style:normal; color:var(--jc-gold); }
.hp-sub { font-size:16px; color:var(--jc-text-on-dark-2); margin-top:6px; max-width:560px; }
.hp-actions { display:flex; gap:8px; flex-wrap:wrap; }
.hp-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); }
.hp-stat { padding:0 20px; border-left:1px solid rgba(255,255,255,.1); } .hp-stat:first-child { padding-left:0; border-left:0; }
.hp-stat .v { font-size:24px; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.hp-stat .v small { font-size:14px; font-weight:600; color:var(--jc-text-on-dark-3); margin-right:4px; }
.hp-stat .l { font-size:14px; color:var(--jc-text-on-dark-3); margin-top:2px; }

/* ── 17 CHARTS / METERS ──────────────────────────────────────────── */
.meter { height:6px; border-radius:99px; background:#EDF1F5; overflow:hidden; }
.meter > span { display:block; height:100%; width:0; border-radius:99px; background:var(--jc-success); transition:width 900ms var(--ease); }
.score-ring { --v:0; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:conic-gradient(var(--jc-success) calc(var(--v)*1%), #E8EDF3 0); }
.score-ring span { width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:15px; font-weight:700; color:var(--jc-navy); font-variant-numeric:tabular-nums; }
.score-ring.mid { background:conic-gradient(var(--jc-gold) calc(var(--v)*1%), #E8EDF3 0); }
.score-ring.low { background:conic-gradient(var(--jc-text-muted) calc(var(--v)*1%), #E8EDF3 0); }
.breakdown { display:grid; gap:8px; }
.breakdown .b-row { display:grid; grid-template-columns:110px minmax(0,1fr) 44px; align-items:center; gap:10px; font-size:14px; color:var(--jc-text-2); }
.breakdown .b-row strong { text-align:right; color:var(--jc-text); font-variant-numeric:tabular-nums; }

/* ── 18 MODALS ───────────────────────────────────────────────────── */
.modal { position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:20px; background:rgba(0,21,41,.45); opacity:0; pointer-events:none; transition:opacity var(--dur); }
.modal.is-open { opacity:1; pointer-events:auto; }
.modal-dialog { width:100%; max-width:480px; max-height:calc(100vh - 40px); overflow:auto; background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-overlay); transform:translateY(8px) scale(.98); transition:transform var(--dur) var(--ease); }
.modal.is-open .modal-dialog { transform:none; }
.modal-lg .modal-dialog { max-width:680px; }
.modal-head { padding:20px 24px 0; } .modal-title { font-size:19px; font-weight:600; } .modal-sub { font-size:15px; color:var(--jc-text-2); margin-top:4px; }
.modal-body { padding:20px 24px; display:grid; gap:16px; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:16px 24px; border-top:1px solid var(--jc-border); background:var(--jc-surface-2); border-radius:0 0 var(--r-xl) var(--r-xl); }
body.is-locked { overflow:hidden; }

/* ── 19 TOASTS ───────────────────────────────────────────────────── */
.toast-stack { position:fixed; right:20px; bottom:20px; z-index:600; display:flex; flex-direction:column; gap:10px; width:360px; max-width:calc(100vw - 40px); }
.toast { position:relative; display:flex; gap:12px; align-items:flex-start; padding:14px 14px 16px; background:#fff; border:1px solid var(--jc-border); border-radius:var(--r-lg); box-shadow:var(--sh-float); overflow:hidden; animation:jc-toast-in 320ms var(--ease); }
.toast.is-leaving { animation:jc-toast-out 240ms var(--ease) forwards; }
.toast-icon { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.toast-icon [data-lucide] { width:14px; height:14px; stroke-width:2.5; }
.toast-success .toast-icon { background:var(--jc-success-bg); color:var(--jc-success); } .toast-error .toast-icon { background:var(--jc-error-bg); color:var(--jc-error); }
.toast-info .toast-icon { background:var(--jc-info-bg); color:var(--jc-info); } .toast-warning .toast-icon { background:var(--jc-warning-bg); color:var(--jc-warning-fg); }
.toast-title { font-size:15.5px; font-weight:600; } .toast-msg { font-size:14.5px; color:var(--jc-text-2); margin-top:2px; }
.toast-close { color:var(--jc-text-muted); } .toast-close:hover { color:var(--jc-text); } .toast-close [data-lucide] { width:15px; height:15px; }
.toast-progress { position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--jc-gold); transform-origin:left; animation:jc-shrink linear forwards; }

/* ── 20 DROPDOWNS ────────────────────────────────────────────────── */
.dropdown { position:relative; }
.dropdown-menu { position:absolute; right:0; top:calc(100% + 6px); min-width:220px; padding:6px; background:#fff; border:1px solid var(--jc-border); border-radius:var(--r-lg); box-shadow:var(--sh-float); opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity var(--dur-fast), transform var(--dur-fast); z-index:400; }
.dropdown.is-open .dropdown-menu { opacity:1; transform:none; pointer-events:auto; }
.dropdown-item { display:flex; align-items:center; gap:10px; width:100%; height:36px; padding:0 10px; border-radius:var(--r-sm); font-size:15px; font-weight:500; color:var(--jc-text); text-align:left; }
.dropdown-item [data-lucide] { width:15px; height:15px; color:var(--jc-text-2); }
.dropdown-item:hover { background:var(--jc-bg); }
.dropdown-item.danger,.dropdown-item.danger [data-lucide] { color:var(--jc-error); }
.dropdown-sep { height:1px; background:var(--jc-border); margin:6px 0; }
.dropdown-label { padding:8px 10px 6px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jc-text-muted); }

/* ── 21 TABS & CHIPS ─────────────────────────────────────────────── */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--jc-border); overflow-x:auto; }
.tab { position:relative; display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 14px; font-size:15.5px; font-weight:500; color:var(--jc-text-2); white-space:nowrap; }
.tab:hover { color:var(--jc-text); }
.tab.is-active { color:var(--jc-navy); font-weight:600; }
.tab.is-active::after { content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--jc-gold); border-radius:2px; }
.tab .count { min-width:20px; height:18px; padding:0 6px; border-radius:99px; background:var(--jc-bg); font-size:13px; font-weight:600; display:grid; place-items:center; }
.tab.is-active .count { background:var(--jc-navy); color:#fff; }
.segmented { display:inline-flex; padding:3px; background:var(--jc-bg); border:1px solid var(--jc-border); border-radius:var(--r-md); }
.segmented a,.segmented button { height:32px; padding:0 14px; display:inline-flex; align-items:center; border-radius:7px; font-size:15px; font-weight:500; color:var(--jc-text-2); }
.segmented .is-active { background:#fff; color:var(--jc-text); font-weight:600; box-shadow:var(--sh-xs); }
.chip { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--jc-border-strong); border-radius:99px; background:#fff; font-size:15px; font-weight:500; color:var(--jc-text-2); transition:all var(--dur-fast); }
.chip [data-lucide] { width:14px; height:14px; }
.chip:hover { border-color:var(--jc-blue-light); color:var(--jc-text); }
.chip.is-active { background:var(--jc-navy); border-color:var(--jc-navy); color:#fff; }

/* ── 22 PAGINATION ───────────────────────────────────────────────── */
.pagination { display:flex; align-items:center; gap:4px; }
.pg { min-width:34px; height:34px; padding:0 8px; display:grid; place-items:center; border-radius:var(--r-sm); font-size:15px; font-weight:500; color:var(--jc-text-2); border:1px solid transparent; }
.pg:hover { background:#fff; border-color:var(--jc-border); color:var(--jc-text); }
.pg.is-active { background:var(--jc-navy); color:#fff; }
.pg.is-disabled { opacity:.4; pointer-events:none; }
.pager-info { font-size:15px; color:var(--jc-text-2); } .pager-info strong { color:var(--jc-text); }

/* ── 23 EMPTY STATES ─────────────────────────────────────────────── */
.empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px 24px; }
.empty-icon { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--jc-blue-tint); color:var(--jc-blue); margin-bottom:14px; }
.empty-icon [data-lucide] { width:24px; height:24px; }
.empty-title { font-size:17px; font-weight:600; } .empty-desc { font-size:15px; color:var(--jc-text-2); margin-top:4px; max-width:380px; }
.spinner { width:18px; height:18px; border-radius:50%; border:2px solid var(--jc-border-strong); border-top-color:var(--jc-navy); animation:jc-spin .7s linear infinite; }

/* ── 24 ALERTS ───────────────────────────────────────────────────── */
.alert { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-md); border:1px solid; font-size:15.5px; }
.alert [data-lucide] { width:18px; height:18px; margin-top:1px; }
.alert strong { display:block; font-weight:600; }
.alert-info { background:#F0F6FF; border-color:#C7DBF7; color:var(--jc-info-fg); }
.alert-success { background:#F0FDF4; border-color:#BBF7D0; color:var(--jc-success-fg); }
.alert-warning { background:#FFFBEB; border-color:#FDE68A; color:var(--jc-warning-fg); }
.alert-error { background:#FEF2F2; border-color:#FECACA; color:var(--jc-error-fg); }

/* ── 25 STEPPERS & TIMELINE ──────────────────────────────────────── */
.progress { height:6px; border-radius:99px; background:#EDF1F5; overflow:hidden; }
.progress > span { display:block; height:100%; background:linear-gradient(90deg,var(--jc-blue),var(--jc-blue-light)); border-radius:99px; }
.stepper { display:flex; align-items:flex-start; }
.step { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; min-width:0; }
.step::before,.step::after { content:''; position:absolute; top:13px; left:calc(-50% + 18px); right:calc(50% + 18px); height:2px; background:var(--jc-border); }
.step::after { background:var(--jc-success); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-slow) var(--ease); }
.step:first-child::before,.step:first-child::after { display:none; }
.step.is-done::after,.step.is-current::after { transform:scaleX(1); }
.step-dot { position:relative; z-index:1; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid var(--jc-border-strong); font-size:14px; font-weight:700; color:var(--jc-text-muted); }
.step-dot [data-lucide] { width:14px; height:14px; stroke-width:2.5; }
.step-label { font-size:14px; font-weight:500; color:var(--jc-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.step.is-done .step-dot { background:var(--jc-success); border-color:var(--jc-success); color:#fff; }
.step.is-done .step-label { color:var(--jc-text-2); }
.step.is-current .step-dot { background:var(--jc-navy); border-color:var(--jc-navy); color:var(--jc-gold); box-shadow:0 0 0 4px rgba(0,21,41,0.08); }
.step.is-current .step-label { color:var(--jc-text); font-weight:600; }
.timeline { position:relative; }
.tl-item { position:relative; display:flex; gap:12px; padding-bottom:16px; }
.tl-item:not(:last-child)::before { content:''; position:absolute; left:7px; top:18px; bottom:0; width:2px; background:var(--jc-border); }
.tl-dot { width:16px; height:16px; border-radius:50%; border:2px solid var(--jc-border-strong); background:#fff; flex-shrink:0; margin-top:2px; position:relative; z-index:1; }
.tl-item.is-done .tl-dot { border-color:var(--jc-success); background:var(--jc-success); }
.tl-item.is-current .tl-dot { border-color:var(--jc-gold); background:var(--jc-navy); }

/* ── 26 LIVE ─────────────────────────────────────────────────────── */
.pulse { position:relative; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--jc-success); flex-shrink:0; }
.pulse::after { content:''; position:absolute; inset:0; border-radius:50%; background:inherit; animation:jc-pulse 2.4s var(--ease) infinite; }
.pulse.gold { background:var(--jc-gold); } .pulse.off { background:var(--jc-text-muted); } .pulse.off::after { animation:none; }
.live-tag { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jc-success-fg); }

/* ── 27 PUBLIC SITE ──────────────────────────────────────────────── */
.site-nav { position:sticky; top:0; z-index:200; height:var(--header-h); background:rgba(255,255,255,0.96); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--jc-border); }
.site-nav-inner { height:100%; display:flex; align-items:center; gap:36px; }
.site-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.site-brand-name { font-size:19px; font-weight:700; color:var(--jc-navy); letter-spacing:-0.015em; }
.site-links { display:flex; align-items:center; gap:4px; }
.site-links a { position:relative; height:40px; display:inline-flex; align-items:center; padding:0 12px; font-size:16px; font-weight:500; color:var(--jc-text-2); }
.site-links a:hover { color:var(--jc-text); }
.site-links a.is-active { color:var(--jc-navy); font-weight:600; }
.site-links a.is-active::after { content:''; position:absolute; left:12px; right:12px; bottom:-14px; height:2px; background:var(--jc-gold); }
.site-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.site-menu-btn { display:none; margin-left:auto; }
.mobile-menu { display:none; }
.page-header { background:#fff; border-bottom:1px solid var(--jc-border); position:relative; overflow:hidden; }
.page-header::after { content:''; position:absolute; right:0; top:0; bottom:0; width:40%; pointer-events:none;
  background:radial-gradient(circle,#D6DEE8 1px,transparent 1.3px) 0 0/18px 18px; -webkit-mask-image:linear-gradient(90deg,transparent,#000); mask-image:linear-gradient(90deg,transparent,#000); }
.page-header-inner { position:relative; z-index:1; padding-top:28px; padding-bottom:32px; }
.page-header .crumbs { margin-bottom:14px; }
.page-header h1 { font-size:var(--fs-page); font-weight:700; letter-spacing:-0.02em; line-height:1.2; color:var(--jc-navy); }
.page-header p { font-size:17px; color:var(--jc-text-2); margin-top:6px; max-width:620px; }
.section { padding-top:80px; padding-bottom:80px; } .section-sm { padding-top:48px; padding-bottom:48px; } .section.bg-white { background:#fff; }
.section-heading { font-size:var(--fs-page); font-weight:700; letter-spacing:-0.02em; line-height:1.2; color:var(--jc-navy); margin-top:12px; }
.section-lead { font-size:17px; color:var(--jc-text-2); margin-top:10px; max-width:540px; line-height:1.65; }
.section-top { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.site-footer { background:var(--jc-navy); color:var(--jc-text-on-dark-3); border-top:3px solid var(--jc-gold); }
.footer-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:48px; padding:64px 0 48px; }
.footer-brand p { font-size:15px; line-height:1.7; margin-top:16px; max-width:320px; }
.footer-col h4 { font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--jc-text-on-dark-2); margin-bottom:16px; }
.footer-col a { display:block; font-size:15px; padding:5px 0; color:var(--jc-text-on-dark-3); transition:color var(--dur-fast); }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 0; border-top:1px solid var(--jc-navy-line); font-size:14.5px; }
.footer-contact { display:flex; flex-direction:column; gap:8px; margin-top:20px; font-size:15px; }
.footer-contact span { display:flex; align-items:center; gap:8px; }
.footer-contact [data-lucide] { width:15px; height:15px; color:var(--jc-gold); }
.bottom-nav { display:none; }

/* Auth pages */
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.auth-side { position:relative; background:var(--jc-navy); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.auth-side h2 { font-size:34px; font-weight:700; letter-spacing:-0.02em; line-height:1.15; margin-top:auto; }
.auth-side h2 span { color:var(--jc-gold); }
.auth-side p { color:var(--jc-text-on-dark-2); margin-top:12px; max-width:420px; line-height:1.65; }
.auth-points { margin-top:28px; display:grid; gap:12px; font-size:16px; color:var(--jc-text-on-dark-2); }
.auth-points div { display:flex; gap:10px; align-items:center; } .auth-points [data-lucide] { color:var(--jc-gold); }
.auth-main { display:flex; align-items:center; justify-content:center; padding:48px 24px; background:#fff; }
.auth-card { width:100%; max-width:420px; }
.auth-card h1 { font-size:26px; font-weight:700; letter-spacing:-0.02em; }
.auth-card .sub { font-size:16px; color:var(--jc-text-2); margin:6px 0 28px; }

/* ── 28 MOTION ───────────────────────────────────────────────────── */
@keyframes jc-spin { to { transform:rotate(360deg); } }
@keyframes jc-pulse { 0% { transform:scale(1); opacity:.6; } 80%,100% { transform:scale(2.8); opacity:0; } }
@keyframes jc-toast-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes jc-toast-out { to { opacity:0; transform:translateX(20px); } }
@keyframes jc-shrink { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@keyframes jc-fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes jc-page-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes jc-pop { 0% { transform:scale(.9); } 60% { transform:scale(1.05); } 100% { transform:scale(1); } }
@keyframes jc-grow-x { to { transform:scaleX(1); } }
[data-reveal] { opacity:0; transform:translateY(12px); transition:opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay:var(--d,0ms); }
[data-reveal].is-in { opacity:1; transform:none; }
.page,.page-enter { animation:jc-page-in 360ms var(--ease) both; }
.status-swap { animation:jc-pop 380ms var(--ease); }
.success-mark { width:64px; height:64px; margin:0 auto; border-radius:50%; background:var(--jc-success-bg); display:grid; place-items:center; animation:jc-pop 420ms var(--ease); }
.success-mark svg { width:30px; height:30px; }
.success-mark path { stroke:var(--jc-success); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:1ms!important; transition-duration:1ms!important; } [data-reveal] { opacity:1; transform:none; } }

/* ── 29 DOMAIN PIECES ────────────────────────────────────────────── */
/* Professional / match card */
.pro-card { display:flex; flex-direction:column; padding:0!important; }
.pro-top { display:flex; gap:14px; padding:18px 20px 14px; align-items:flex-start; }
.pro-name { font-size:17px; font-weight:600; } .pro-trade { font-size:15px; color:var(--jc-text-2); }
.pro-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; font-size:14px; color:var(--jc-text-2); }
.pro-meta span { display:inline-flex; align-items:center; gap:4px; } .pro-meta [data-lucide] { width:13px; height:13px; color:var(--jc-text-muted); }
.pro-tags { display:flex; gap:6px; flex-wrap:wrap; padding:0 20px 16px; }
.pro-foot { margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--jc-border); }
.pro-rate { font-size:14px; color:var(--jc-text-2); } .pro-rate strong { display:block; font-size:17px; color:var(--jc-navy); font-weight:700; font-variant-numeric:tabular-nums; }
/* Job board rows */
.board-row { display:grid; grid-template-columns:44px minmax(0,1fr) 190px auto; align-items:center; gap:18px; padding:16px 20px; border-bottom:1px solid var(--jc-border); transition:background var(--dur-fast); }
.board-row:last-child { border-bottom:0; } .board-row:hover { background:var(--jc-surface-2); }
.board-ic { width:40px; height:40px; border-radius:9px; display:grid; place-items:center; background:var(--jc-blue-tint); color:var(--jc-blue); }
.board-ic [data-lucide] { width:18px; height:18px; }
.board-title { font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.board-meta { display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; font-size:14px; color:var(--jc-text-2); }
.board-meta span { display:inline-flex; align-items:center; gap:4px; } .board-meta [data-lucide] { width:13px; height:13px; color:var(--jc-text-muted); }
.board-budget { font-size:17px; font-weight:700; color:var(--jc-navy); font-variant-numeric:tabular-nums; }
.board-budget small { display:block; font-size:13px; font-weight:500; color:var(--jc-text-muted); }
/* Filters sidebar */
.filters { position:sticky; top:calc(var(--header-h) + 16px); display:grid; gap:18px; }
.board-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; }
/* Messaging */
.chat { display:flex; flex-direction:column; height:calc(100vh - var(--header-h) - 140px); min-height:420px; }
.chat-log { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px; background:var(--jc-surface-2); }
.bubble { max-width:72%; padding:10px 14px; border-radius:14px; font-size:15.5px; line-height:1.5; background:#fff; border:1px solid var(--jc-border); align-self:flex-start; white-space:pre-line; word-wrap:break-word; }
.bubble.mine { align-self:flex-end; background:var(--jc-navy); color:#fff; border-color:var(--jc-navy); }
.bubble.system { align-self:center; background:var(--jc-gold-tint); border-color:transparent; color:#8A5A00; font-size:14px; }
.bubble time { display:block; font-size:12.5px; opacity:.6; margin-top:4px; }
.chat-form { display:flex; gap:8px; padding:14px; border-top:1px solid var(--jc-border); background:#fff; border-radius:0 0 var(--r-lg) var(--r-lg); }
.chat-form textarea { min-height:42px; height:42px; resize:none; }
.msg-row { display:flex; gap:12px; padding:12px 20px; border-bottom:1px solid var(--jc-border); transition:background var(--dur-fast); }
.msg-row:last-child { border-bottom:0; } .msg-row:hover { background:var(--jc-surface-2); } .msg-row.is-active { background:var(--jc-blue-tint); }
.msg-name { font-size:15px; font-weight:600; display:flex; justify-content:space-between; gap:8px; }
.msg-name span { font-size:13px; font-weight:500; color:var(--jc-text-muted); flex-shrink:0; }
.msg-text { font-size:14px; color:var(--jc-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.msg-row.unread .msg-text { color:var(--jc-text); font-weight:500; }
.unread-dot { width:8px; height:8px; border-radius:50%; background:var(--jc-gold); margin-top:6px; flex-shrink:0; }
/* Notification rows */
.note-row { display:flex; gap:12px; padding:14px 20px; border-bottom:1px solid var(--jc-border); }
.note-row.unread { background:#FFFCF2; }
.note-row .n-title { font-size:15.5px; font-weight:600; } .note-row .n-body { font-size:15px; color:var(--jc-text-2); margin-top:2px; }
/* Escrow note */
.escrow-note { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--jc-text-2); }
.escrow-note [data-lucide] { width:15px; height:15px; color:var(--jc-blue); }
/* Stars input */
.stars { display:inline-flex; flex-direction:row-reverse; gap:4px; }
.stars input { position:absolute; opacity:0; pointer-events:none; }
.stars label { cursor:pointer; color:var(--jc-border-strong); font-size:26px; line-height:1; transition:color var(--dur-fast); }
.stars label:hover,.stars label:hover ~ label,.stars input:checked ~ label { color:var(--jc-gold); }
/* Delivery code display */
.code-box { display:inline-flex; gap:6px; }
.code-box span { width:40px; height:48px; border-radius:var(--r-md); background:var(--jc-navy); color:var(--jc-gold); display:grid; place-items:center; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.route-line { display:grid; grid-template-columns:20px minmax(0,1fr); gap:4px 12px; }
.route-line .rl-dot { width:12px; height:12px; border-radius:50%; margin:4px auto 0; border:3px solid var(--jc-blue); background:#fff; }
.route-line .rl-dot.end { border-color:var(--jc-gold); background:var(--jc-navy); }
.route-line .rl-bar { width:2px; margin:0 auto; background:var(--jc-border-strong); min-height:22px; }
.route-line .rl-label { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jc-text-muted); }
.route-line .rl-addr { font-size:16px; font-weight:600; }

/* ── 30 RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 1024px) {
  .app-main { margin-left:0; }
  .sidebar { transform:translateX(-100%); box-shadow:var(--sh-overlay); }
  .sidebar.is-open { transform:none; }
  .topbar-toggle { display:grid; }
  .board-layout { grid-template-columns:minmax(0,1fr); }
  .filters { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .site-links,.site-actions { display:none; }
  .site-menu-btn { display:grid; }
  .mobile-menu.is-open { display:grid; gap:4px; padding:12px 16px 16px; background:#fff; border-bottom:1px solid var(--jc-border); box-shadow:var(--sh-float); }
  .mobile-menu a:not(.btn) { display:flex; align-items:center; gap:10px; height:42px; padding:0 8px; font-weight:500; }
  .auth-shell { grid-template-columns:minmax(0,1fr); } .auth-side { display:none; }
}
@media (max-width: 768px) {
  .container { padding:0 16px; }
  .page { padding:20px 16px 88px; }
  .topbar { padding:0 16px; gap:8px; }
  .profile-chip > div { display:none; }
  .topbar-divider { display:none; }
  .page-title { font-size:22px; }
  .cols-2,.cols-3,.cols-4,.field-row,.field-row.three { grid-template-columns:minmax(0,1fr); }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .hp-inner { padding:22px 20px; } .hp-title { font-size:22px; }
  .hp-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 0; }
  .hp-stat:nth-child(3) { padding-left:0; border-left:0; }
  .board-row { grid-template-columns:40px minmax(0,1fr); }
  .board-row > :nth-child(3),.board-row > :nth-child(4) { grid-column:2; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .section { padding-top:56px; padding-bottom:56px; }
  .bubble { max-width:88%; }
  .table.stack-sm thead { display:none; }
  .table.stack-sm tr { display:block; padding:10px 0; border-bottom:1px solid var(--jc-border); }
  .table.stack-sm td { display:flex; justify-content:space-between; gap:12px; border:0; padding:6px 16px; }
  .table.stack-sm td::before { content:attr(data-label); font-weight:600; color:var(--jc-text-2); }
  .bottom-nav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:250; height:62px; background:#fff; border-top:1px solid var(--jc-border); box-shadow:0 -4px 16px rgba(15,23,42,.05); }
  .bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:12.5px; font-weight:600; color:var(--jc-text-muted); position:relative; }
  .bottom-nav a.is-active { color:var(--jc-navy); } .bottom-nav a.is-active [data-lucide] { color:var(--jc-gold-dark); }
  .bottom-nav [data-lucide] { width:20px; height:20px; }
  .bn-dot { position:absolute; top:10px; left:calc(50% + 6px); width:7px; height:7px; border-radius:50%; background:var(--jc-gold); }
  .toast-stack { bottom:74px; right:12px; left:12px; width:auto; max-width:none; }
}

/* ── Mini bar chart (single series, server-rendered) ─────────────── */
.mini-bars { position:relative; display:flex; align-items:flex-end; gap:2px; height:170px; padding-bottom:22px;
  background:linear-gradient(var(--jc-border) 1px, transparent 1px) 0 0 / 100% 25%; background-clip:content-box; }
.mini-bars .mb-col { position:relative; flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; }
.mini-bars .mb-bar { width:min(60%, 18px); min-height:2px; background:var(--jc-blue-light); border-radius:4px 4px 0 0; transition:background var(--dur-fast); }
.mini-bars .mb-col:hover .mb-bar, .mini-bars .mb-col:focus .mb-bar { background:var(--jc-navy); }
.mini-bars .mb-col.is-current .mb-bar { background:var(--jc-gold-dark); }
.mini-bars .mb-x { position:absolute; bottom:-20px; font-size:12.5px; color:var(--jc-text-muted); white-space:nowrap; }
.mini-bars .mb-tip { position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); padding:5px 8px; border-radius:6px; background:var(--jc-navy); color:#fff; font-size:13.5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--dur-fast); z-index:2; }
.mini-bars .mb-col:hover .mb-tip, .mini-bars .mb-col:focus .mb-tip { opacity:1; }
.mini-bars .mb-tip { bottom:auto; top:-30px; }
.li-title, .board-title, .page-title, .t-card, .page-header h1 { overflow-wrap:anywhere; }

/* ═══ Mobile app, trust, growth & reports ═══════════════════════════ */

/* Language switch (EN / SW) */
.lang-switch { display:inline-flex; padding:3px; border:1px solid var(--jc-border); border-radius:99px; background:#fff; }
.lang-switch a { min-width:34px; height:26px; display:grid; place-items:center; padding:0 8px; border-radius:99px; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--jc-text-2); }
.lang-switch a:hover { color:var(--jc-navy); }
.lang-switch a.is-active { background:var(--jc-navy); color:#fff; }
.lang-switch.on-dark { margin-top:18px; background:transparent; border-color:rgba(255,255,255,.18); }
.lang-switch.on-dark a { color:var(--jc-text-on-dark-2); }
.lang-switch.on-dark a.is-active { background:var(--jc-gold); color:var(--jc-navy); }
.dropdown-lang { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 10px; font-size:15px; color:var(--jc-text-2); }
.dropdown-lang > span { display:inline-flex; align-items:center; gap:8px; }
.dropdown-lang > span [data-lucide] { width:16px; height:16px; }
.auth-lang { display:flex; justify-content:flex-end; margin-bottom:12px; }
.mm-lang { padding-top:10px; border-top:1px solid var(--jc-border); }

/* Trust badges */
.trust-badges { display:inline-flex; flex-wrap:wrap; gap:6px; }
.trust-badge { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:99px; font-size:13px; font-weight:600; background:var(--jc-blue-tint); color:var(--jc-blue); white-space:nowrap; }
.trust-badge [data-lucide] { width:14px; height:14px; }
.trust-badge.tb-navy { background:#E8EDF4; color:var(--jc-navy); }
.trust-badge.tb-green { background:var(--jc-success-bg); color:var(--jc-success-fg); }
.trust-badge.tb-gold { background:var(--jc-gold-tint); color:#8A5A00; }
.trust-badges.is-compact .trust-badge { width:26px; padding:0; justify-content:center; }
.pro-reply { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:14px; color:var(--jc-success-fg); font-weight:500; }
.pro-reply [data-lucide] { width:14px; height:14px; }

/* Share buttons */
.share { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.share-label { font-size:14px; font-weight:600; color:var(--jc-text-2); margin-right:4px; }
.share-btn { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border:1px solid var(--jc-border-strong); border-radius:99px; background:#fff; font:inherit; font-size:15px; font-weight:600; color:var(--jc-text); cursor:pointer; transition:all var(--dur-fast); }
.share-btn:hover { border-color:var(--jc-navy); }
.share-btn[hidden] { display:none; }
.share-btn svg, .share-btn [data-lucide] { width:18px; height:18px; flex-shrink:0; }
.share-btn.sb-whatsapp { background:#25D366; border-color:#25D366; color:#fff; }
.share-btn.sb-whatsapp:hover { background:#1EBE5A; border-color:#1EBE5A; }
.share.is-compact .share-btn { height:38px; padding:0 12px; font-size:14px; }

/* Install card */
.install-card { position:fixed; z-index:260; right:20px; bottom:20px; width:min(400px, calc(100vw - 24px)); display:flex; align-items:center; gap:12px; padding:14px 14px 14px 16px; background:#fff; border:1px solid var(--jc-border); border-radius:var(--r-xl); box-shadow:var(--sh-overlay); animation:jc-rise var(--dur-slow) var(--ease); }
.install-card[hidden] { display:none; }
.install-card .ic-icon img { display:block; border-radius:10px; }
.install-card .ic-title { font-weight:700; font-size:16px; }
.install-card .ic-sub { font-size:14px; color:var(--jc-text-2); margin-top:2px; }
.install-card .ic-sub[hidden], .install-card .btn[hidden] { display:none; }
.install-card .ic-close { flex-shrink:0; }
@keyframes jc-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* Portfolio */
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.pf-item { position:relative; display:block; padding:0; border:0; border-radius:var(--r-md); overflow:hidden; background:var(--jc-surface-2); cursor:pointer; text-align:left; font:inherit; aspect-ratio:4 / 3; box-shadow:var(--sh-xs); }
.portfolio-grid.is-editing .pf-item { cursor:default; }
.pf-item > img, .pf-pair img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease); }
.pf-item:hover > img, .pf-item:hover .pf-pair img { transform:scale(1.03); }
.pf-pair { display:grid; grid-template-columns:1fr 1fr; gap:2px; height:100%; background:#fff; }
.pf-tag { position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:99px; background:rgba(0,21,41,.78); color:#fff; font-size:12.5px; font-weight:600; }
.pf-cap { position:absolute; left:0; right:0; bottom:0; padding:22px 10px 8px; background:linear-gradient(transparent, rgba(0,21,41,.82)); color:#fff; font-size:14px; font-weight:500; line-height:1.3; }
.pf-cap small { display:block; font-size:12.5px; opacity:.75; margin-top:2px; }
.pf-del { position:absolute; top:6px; right:6px; }
.pf-del .icon-btn { background:rgba(255,255,255,.92); width:34px; height:34px; }
.dropzone.has-file { border-style:solid; border-color:var(--jc-success); }
.dz-preview { width:100%; max-height:140px; object-fit:cover; border-radius:var(--r-sm); }

/* Lightbox */
.lightbox { background:rgba(0,21,41,.86); }
.lb-dialog { position:relative; width:min(1100px, 100%); max-height:calc(100vh - 40px); display:flex; flex-direction:column; gap:10px; }
.lb-imgs { display:grid; gap:10px; min-height:0; }
.lb-imgs.is-pair { grid-template-columns:1fr 1fr; }
.lb-imgs figure { margin:0; position:relative; display:grid; place-items:center; min-height:0; }
.lb-imgs img { max-width:100%; max-height:calc(100vh - 140px); border-radius:var(--r-md); object-fit:contain; }
.lb-imgs figcaption { position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:99px; background:rgba(0,21,41,.8); color:#fff; font-size:13px; font-weight:700; }
.lb-cap { color:#fff; text-align:center; font-size:16px; }
.lb-close { position:absolute; top:-6px; right:-6px; z-index:2; background:#fff; }

/* Checkout credit */
.credit-option { display:flex; align-items:center; gap:12px; padding:14px; border:1.5px solid var(--jc-success); border-radius:var(--r-md); background:var(--jc-success-bg); cursor:pointer; }
.credit-option input { width:20px; height:20px; accent-color:var(--jc-success); }

/* Invite */
.invite-link { display:flex; gap:8px; }
.invite-link .input { font-weight:600; color:var(--jc-navy); }
.code-inline { padding:2px 8px; border-radius:6px; background:var(--jc-gold-tint); color:var(--jc-navy); letter-spacing:.06em; }
.steps-list { list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:14px; }
.steps-list li { counter-increment:s; display:grid; grid-template-columns:30px 1fr; column-gap:12px; }
.steps-list li::before { content:counter(s); grid-row:span 2; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--jc-navy); color:var(--jc-gold); font-weight:700; font-size:14px; }
.steps-list strong { font-size:16px; }
.steps-list span { font-size:15px; color:var(--jc-text-2); }

/* Hire (search landing) pages */
.hire-facts { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.hf { display:flex; align-items:center; gap:12px; padding:16px; background:#fff; border:1px solid var(--jc-border); border-radius:var(--r-lg); box-shadow:var(--sh-xs); }
.hf-icon { width:40px; height:40px; flex-shrink:0; border-radius:10px; display:grid; place-items:center; background:var(--jc-blue-tint); color:var(--jc-blue); }
.hf-icon.gold { background:var(--jc-gold-tint); color:#8A5A00; }
.hf-icon [data-lucide] { width:20px; height:20px; }
.hf-v { font-size:20px; font-weight:700; color:var(--jc-navy); line-height:1.2; }
.hf-l { font-size:14px; color:var(--jc-text-2); }
.section-h { font-size:22px; font-weight:700; color:var(--jc-navy); letter-spacing:-.01em; }
.qa details { border-top:1px solid var(--jc-border); }
.qa details:first-child { border-top:0; }
.qa summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; font-weight:600; font-size:16px; cursor:pointer; list-style:none; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary [data-lucide] { width:18px; height:18px; flex-shrink:0; color:var(--jc-text-muted); transition:transform var(--dur); }
.qa details[open] summary [data-lucide] { transform:rotate(180deg); }
.qa details p { padding:0 20px 18px; margin:0; color:var(--jc-text-2); font-size:15.5px; line-height:1.6; }
.hire-list { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.hire-list li { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed var(--jc-border); }
.hire-list li:last-child { border-bottom:0; }
.hire-list a { font-weight:500; color:var(--jc-text); }
.hire-list a:hover { color:var(--jc-blue-light); }
.footer-popular { margin-top:36px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); }
.footer-popular h4 { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--jc-text-on-dark-2); margin-bottom:12px; }
.fp-links { display:flex; flex-wrap:wrap; gap:8px 18px; }
.fp-links a { font-size:15px; color:var(--jc-text-on-dark-2); }
.fp-links a:hover { color:#fff; }

/* Rider console */
.status-toggle-lg { height:46px; padding:0 8px 0 16px; font-size:16px; }
.rider-alerts { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-lg); background:var(--jc-gold-tint); border:1px solid rgba(229,165,0,.35); }
.rider-alerts[hidden] { display:none; }
.rider-current { display:flex; align-items:center; }
.rider-current > [data-lucide]:last-child { margin-left:auto; }
.offer-list { display:grid; }
.offer { padding:18px 20px; border-top:1px solid var(--jc-border); }
.offer:first-child { border-top:0; }
.offer.is-new { animation:jc-new-offer 1.6s ease-out 3; background:linear-gradient(90deg, var(--jc-gold-tint), transparent 70%); }
@keyframes jc-new-offer { 0% { box-shadow:inset 4px 0 0 var(--jc-gold); } 50% { box-shadow:inset 10px 0 0 var(--jc-gold); } 100% { box-shadow:inset 4px 0 0 var(--jc-gold); } }
.offer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.offer-price { font-size:26px; font-weight:800; color:var(--jc-navy); letter-spacing:-.01em; }
.offer-tags { display:flex; flex-wrap:wrap; gap:6px; }
.offer-what { display:flex; align-items:center; gap:8px; margin-top:8px; font-weight:600; font-size:16px; }
.offer-what [data-lucide] { width:18px; height:18px; color:var(--jc-text-2); }
.offer-route { margin-top:12px; }
.offer-actions { display:flex; gap:8px; margin-top:14px; align-items:stretch; }
.offer-actions form { display:flex; }
.offer-actions form > .btn { width:100%; }
.btn-accept { min-height:52px; font-size:17px; }
.nav-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* Reports */
.seg { display:inline-flex; padding:3px; background:var(--jc-surface-2); border:1px solid var(--jc-border); border-radius:var(--r-md); }
.seg a { padding:7px 14px; border-radius:8px; font-size:15px; font-weight:600; color:var(--jc-text-2); }
.seg a.is-active { background:#fff; color:var(--jc-navy); box-shadow:var(--sh-xs); }
.kpi-grid.kpi-grid-6 { grid-template-columns:repeat(6, minmax(0,1fr)); }
.chart-box { position:relative; height:260px; }
.chart-table { margin-top:12px; }
.chart-table summary { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--jc-blue-light); cursor:pointer; }
.chart-table .table-wrap { margin-top:10px; max-height:280px; overflow:auto; }

.otp-input { width:170px; letter-spacing:.4em; font-size:22px; font-weight:700; text-align:center; }

@media (max-width: 1180px) { .kpi-grid.kpi-grid-6 { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 1024px) { .hire-facts { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px) {
  .site-actions .lang-switch { display:none; }
  .install-card { left:12px; right:12px; bottom:12px; width:auto; }
  .app-main ~ .install-card, .bottom-nav ~ .install-card { bottom:calc(74px + env(safe-area-inset-bottom)); }
  .bottom-nav { height:calc(62px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); }
  .bottom-nav a { font-size:12px; min-width:0; }
  .kpi-grid.kpi-grid-6 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .chart-box { height:220px; }
  .hire-facts { grid-template-columns:minmax(0,1fr); }
  .offer-actions { display:grid; grid-template-columns:1fr 1fr; }
  .offer-actions form.grow { grid-column:1 / -1; order:-1; }
  .nav-actions { grid-template-columns:minmax(0,1fr); }
  .lb-imgs.is-pair { grid-template-columns:minmax(0,1fr); }
  .lb-imgs img { max-height:calc(50vh - 60px); }
  .portfolio-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .invite-link { flex-direction:column; }
  .page-actions .seg { width:100%; }
  .page-actions .seg a { flex:1; text-align:center; }
}

/* Checkout: resend the STK prompt to a (possibly different) number */
.resend { text-align:center; }
.resend > summary { list-style:none; display:inline-flex; cursor:pointer; }
.resend > summary::-webkit-details-marker { display:none; }
.resend[open] > summary { display:none; }
.resend .form-grid { text-align:left; }