/* ZCH design system — scoped under .pepro-zch (generated from ZCH dashboard export) */
.pepro-zch{
  /* Brand */
  --charcoal:#595C54;   /* earthy charcoal — dark sections, footer, recruitment */
  --sage:#7F8063;       /* subtle sage — the single accent, used sparingly */
  --sage-deep:#6A6B51;  /* darker sage for hover/active */
  --ash:#CFD2C8;        /* soft ash — soft section bg / dividers */

  /* Greyscale (from brief) */
  --g50:#F9FAFB;
  --g100:#F3F4F6;
  --g200:#E5E7EB;
  --g300:#D1D5DB;
  --g400:#9CA3AF;
  --g500:#6B7280;
  --g600:#4B5563;
  --g700:#374151;
  --g800:#1F2A37;
  --g900:#111928;

  --ink:#1F2A37;
  --ink-soft:#4B5563;

  --maxw:1280px;
  --gutter:clamp(20px, 5vw, 72px);

  --font: "YekanBakh", ui-sans-serif, system-ui, sans-serif;

  /* ZCH type scale — hierarchy from SIZE + COLOR, never heavy weight.
     min = mobile step-down · max = desktop value */
  --fs-display:  clamp(34px, 5.2vw, 56px);  /* hero / display (large heroes may push to 64–72 locally) */
  --fs-h1:       clamp(28px, 3.4vw, 40px);  /* page title */
  --fs-h2:       clamp(22px, 2.4vw, 28px);  /* section */
  --fs-h3:       clamp(18px, 1.2vw, 20px);  /* subsection */
  --fs-lead:     18px;                      /* lead paragraph */
  --fs-body:     16px;                      /* body */
  --fs-small:    14px;
  --fs-caption:  12px;
  --fs-overline: 12px;                      /* legacy alias — kept for existing pages */

  /* exactly two cuts ship: Regular 400 (body) + SemiBold 600 (the Medium/SemiBold heading tier) */
  --w-thin:400; --w-light:400; --w-reg:400; --w-med:600; --w-semi:600;

  --ease: cubic-bezier(.16,1,.3,1);
}
.pepro-zch{
  /* semantic state colors, tuned to the earthy palette */
  --amber:#A9803C;          /* WAITING — soft earthy amber */
  --amber-ink:#7E5C21;
  --amber-soft:#F6EFE1;
  --amber-line:#E4D3AE;
  --ok:#5E8460;             /* SUCCESS / LIVE — muted green */
  --ok-ink:#436845;
  --ok-soft:#E7EFE6;
  --ok-line:#BFD4BE;
  --sage-soft:#EEEFE7;
  --sage-tint:rgba(127,128,99,.10);
  --sage-line:rgba(127,128,99,.40);
  --shadow-card:0 40px 80px -54px rgba(31,42,55,.45), 0 12px 30px -22px rgba(31,42,55,.22);
}

/* headings: one Medium/SemiBold cut, sized by role; hierarchy from size + color */
.pepro-zch h1, .pepro-zch h2, .pepro-zch h3, .pepro-zch h4{ color:var(--ink); font-weight:600; letter-spacing:normal; text-wrap:balance; }
.pepro-zch h1{ font-size:var(--fs-h1); line-height:1.25; }
.pepro-zch h2{ font-size:var(--fs-h2); line-height:1.35; }
.pepro-zch h3{ font-size:var(--fs-h3); line-height:1.5; }
.pepro-zch h4{ font-size:var(--fs-small); line-height:1.5; }
.pepro-zch strong, .pepro-zch b{ font-weight:600; }

/* role utilities for new pages */
.pepro-zch .t-display{ font-size:var(--fs-display); font-weight:600; line-height:1.2; color:var(--ink); }
.pepro-zch .t-lead{ font-size:var(--fs-lead); font-weight:400; line-height:1.6; }
.pepro-zch .t-body{ font-size:var(--fs-body); font-weight:400; line-height:1.8; }
.pepro-zch .t-small{ font-size:var(--fs-small); font-weight:400; line-height:1.7; }
.pepro-zch .t-caption{ font-size:var(--fs-caption); font-weight:400; line-height:1.6; color:var(--g500); }
.pepro-zch .t-meta{ color:var(--g500); }

/* numerals: Persian copy uses Persian digits already in markup */
.pepro-zch .fa-num{ font-feature-settings:"ss01"; }

.pepro-zch .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* overline label */
.pepro-zch .overline{
  font-size:var(--fs-overline);
  font-weight:600;
  letter-spacing:normal;
  color:var(--sage);
  text-transform:none;
}

/* buttons — light, precise */
.pepro-zch .btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:600; font-size:.95rem; letter-spacing:normal;
  padding:.85em 1.6em;
  border-radius:2px;
  border:1px solid transparent;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.pepro-zch .btn:hover{ transform:translateY(-1px); }
.pepro-zch .btn-sage{ background:var(--sage); color:#fff; }
.pepro-zch .btn-sage:hover{ background:var(--sage-deep); }
.pepro-zch .btn-ghost{ background:transparent; border-color:currentColor; color:var(--ink); }
.pepro-zch .btn-ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pepro-zch .btn-ghost-light{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.pepro-zch .btn-ghost-light:hover{ background:#fff; color:var(--charcoal); border-color:#fff; }

/* reveal-on-scroll */
.pepro-zch [data-reveal]{ opacity:0; transform:translateY(20px); }
.pepro-zch [data-reveal].in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
.pepro-zch [data-reveal][data-delay="1"].in{ transition-delay:.08s; }
.pepro-zch [data-reveal][data-delay="2"].in{ transition-delay:.16s; }
.pepro-zch [data-reveal][data-delay="3"].in{ transition-delay:.24s; }
.pepro-zch [data-reveal][data-delay="4"].in{ transition-delay:.32s; }
.pepro-zch [data-reveal][data-delay="5"].in{ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  .pepro-zch [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* hero crossfade slides */
.pepro-zch .slides{ position:absolute; inset:0; }
.pepro-zch .slides .slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity 1.6s ease, transform 7s linear;
  transform:scale(1.04);
}
.pepro-zch .slides .slide.active{ opacity:1; transform:scale(1.12); }
@media (prefers-reduced-motion: reduce){
  .pepro-zch .slides .slide{ transition:opacity .4s ease; transform:none !important; }
}

/* utility: thin uppercase eyebrow line */
.pepro-zch .kicker{ display:inline-flex; align-items:center; gap:.6em; }
.pepro-zch .kicker::before{ content:""; width:34px; height:1.5px; background:var(--sage); display:inline-block; }

.pepro-zch::selection{ background:var(--sage); color:#fff; }
/* ============ STAGE + CARD ============ */
.pepro-zch .stage{ flex:1; display:flex; justify-content:center; align-items:flex-start; padding:clamp(28px,5vw,64px) clamp(18px,4vw,40px) 120px; }
.pepro-zch .card{
  width:100%; background:#fff; border:1px solid var(--g200); border-radius:var(--tw-radius,18px);
  box-shadow:var(--shadow-card); overflow:hidden; position:relative;
}
.pepro-zch .card--narrow{ max-width:540px; }
.pepro-zch .card--wide{ max-width:760px; }
.pepro-zch .card__pad{ padding:clamp(28px,4vw,48px); }

/* screen transition — transform-only so content stays visible even if a
   screenshot/clone restarts the animation (base opacity is always 1) */
.pepro-zch .screen{ animation:screenIn .55s var(--ease) both; }
@keyframes screenIn{ from{ transform:translateY(16px); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .pepro-zch .screen{ animation:none; } }

/* headings inside card */
.pepro-zch .scr__head{ margin-bottom:30px; }
.pepro-zch .scr__eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-size:12px; font-weight:600; letter-spacing:normal; color:var(--sage); margin-bottom:14px; white-space:nowrap; }
.pepro-zch .scr__eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--sage); }
.pepro-zch .scr__title{ font-size:clamp(24px,3vw,32px); font-weight:600; line-height:1.2; color:var(--ink); margin-bottom:12px; letter-spacing:normal; }
.pepro-zch .scr__title b{ font-weight:600; }
.pepro-zch .scr__sub{ font-size:15.5px; font-weight:400; line-height:1.85; color:var(--ink-soft); max-width:52ch; }

/* ============ FORM FIELDS ============ */
.pepro-zch .fieldset{ border:0; padding:0; margin:0; }
.pepro-zch .formgrid{ display:grid; gap:18px 20px; }
.pepro-zch .formgrid.cols-2{ grid-template-columns:1fr 1fr; }
.pepro-zch .formgrid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:560px){ .pepro-zch .formgrid.cols-2, .pepro-zch .formgrid.cols-3{ grid-template-columns:1fr; } }
.pepro-zch .field{ display:flex; flex-direction:column; gap:8px; }
.pepro-zch .field--full{ grid-column:1 / -1; }
.pepro-zch .field__lbl{ font-size:13px; font-weight:600; color:var(--g700); letter-spacing:normal; display:flex; align-items:center; gap:7px; }
.pepro-zch .field__lbl .req{ color:var(--sage); font-size:13px; }
.pepro-zch .field__hint{ font-size:11.5px; font-weight:400; color:var(--g400); }
.pepro-zch .input, .pepro-zch .textarea, .pepro-zch .select{
  font-family:inherit; font-size:15px; font-weight:400; color:var(--ink);
  background:var(--g50); border:1px solid var(--g200); border-radius:9px;
  padding:13px 15px; width:100%; transition:border-color .3s var(--ease), background .3s, box-shadow .3s; outline:none;
  font-feature-settings:"ss01";
}
.pepro-zch .input::placeholder, .pepro-zch .textarea::placeholder{ color:var(--g400); font-weight:400; }
.pepro-zch .input:hover, .pepro-zch .textarea:hover, .pepro-zch .select:hover{ border-color:var(--g300); }
.pepro-zch .input:focus, .pepro-zch .textarea:focus, .pepro-zch .select:focus{ border-color:var(--sage); background:#fff; box-shadow:0 0 0 4px var(--sage-tint); }
.pepro-zch .textarea{ resize:vertical; min-height:104px; line-height:1.8; }
.pepro-zch .select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 15px center; padding-inline-start:15px; cursor:pointer; }
.pepro-zch .input--err, .pepro-zch .textarea--err{ border-color:#C0633F; background:#FBF1EC; }
.pepro-zch .input--err:focus, .pepro-zch .textarea--err:focus{ box-shadow:0 0 0 4px rgba(192,99,63,.12); }
.pepro-zch .field__err{ font-size:11.5px; font-weight:400; color:#A8552F; display:flex; align-items:center; gap:5px; }
.pepro-zch .inputwrap{ position:relative; display:flex; align-items:center; }
.pepro-zch .inputwrap .unit{ position:absolute; inset-inline-start:14px; font-size:12.5px; font-weight:400; color:var(--g400); pointer-events:none; }
.pepro-zch .inputwrap .input{ padding-inline-start:58px; }

/* section divider inside form */
.pepro-zch .formsec{ margin-top:8px; }
.pepro-zch .formsec + .formsec{ margin-top:30px; }
.pepro-zch .formsec__h{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.pepro-zch .formsec__h .t{ font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:normal; white-space:nowrap; }
.pepro-zch .formsec__h .ln{ flex:1; height:1px; background:var(--g200); }
.pepro-zch .formsec__h .ic{ width:30px; height:30px; border-radius:8px; background:var(--sage-soft); color:var(--sage); display:grid; place-items:center; flex:none; }
.pepro-zch .formsec__h .ic svg{ width:16px; height:16px; }

/* avatar uploader */
.pepro-zch .avatarrow{ display:flex; align-items:center; gap:18px; }
.pepro-zch .avatarup{
  width:84px; height:84px; border-radius:50%; flex:none; position:relative; overflow:hidden;
  border:1.5px dashed var(--sage); background:var(--sage-soft); color:var(--sage);
  display:grid; place-items:center; cursor:pointer; transition:.3s var(--ease);
}
.pepro-zch .avatarup:hover{ background:#E7E8DD; transform:translateY(-1px); }
.pepro-zch .avatarup.filled{ border-style:solid; border-color:var(--g200); }
.pepro-zch .avatarup img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pepro-zch .avatarup__cam{ position:absolute; bottom:-1px; inset-inline-end:-1px; width:28px; height:28px; border-radius:50%; background:var(--sage); color:#fff; display:grid; place-items:center; border:2px solid #fff; }
.pepro-zch .avatarup__cam svg{ width:14px; height:14px; }
.pepro-zch .avatarmeta .t{ font-size:14px; font-weight:600; color:var(--ink); }
.pepro-zch .avatarmeta .d{ font-size:12.5px; font-weight:400; color:var(--g500); line-height:1.7; margin-top:3px; }

/* file upload tile */
.pepro-zch .uploadtile{
  display:flex; align-items:center; gap:13px; padding:15px 16px;
  border:1.5px dashed var(--g300); border-radius:11px; background:var(--g50);
  cursor:pointer; transition:.3s var(--ease); width:100%; text-align:start;
}
.pepro-zch .uploadtile:hover{ border-color:var(--sage); background:#fff; }
.pepro-zch .uploadtile.filled{ border-style:solid; border-color:var(--ok-line); background:var(--ok-soft); }
.pepro-zch .uploadtile__ic{ width:40px; height:40px; border-radius:10px; background:#fff; border:1px solid var(--g200); display:grid; place-items:center; color:var(--g500); flex:none; }
.pepro-zch .uploadtile.filled .uploadtile__ic{ background:var(--ok); border-color:var(--ok); color:#fff; }
.pepro-zch .uploadtile__ic svg{ width:19px; height:19px; }
.pepro-zch .uploadtile__tx{ flex:1; min-width:0; }
.pepro-zch .uploadtile__t{ font-size:13.5px; font-weight:600; color:var(--ink); }
.pepro-zch .uploadtile__d{ font-size:11.5px; font-weight:400; color:var(--g500); margin-top:2px; }
.pepro-zch .uploadtile__x{ color:var(--g400); flex:none; background:none; border:0; padding:4px; display:grid; place-items:center; border-radius:6px; transition:.2s; }
.pepro-zch .uploadtile__x:hover{ color:var(--ink); background:var(--g100); }

/* ZCH — role-based dashboards (Client کارفرما + Designer طراح) */
/* Builds on tokens.css + onboarding.css (forms, slots, chips, cta, toast, demorail, buildnote, density) */

/* ============ SHELL ============ */
.pepro-zch.dash{ min-height:100vh; display:flex; flex-direction:column; background:var(--g50); }

/* header */
.pepro-zch .dtop{
  position:sticky; top:0; z-index:40; height:64px; flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 clamp(14px,3vw,30px);
  background:rgba(249,250,251,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--g200);
}
.pepro-zch .dtop__l{ display:flex; align-items:center; gap:14px; }
.pepro-zch .dtop__burger{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--g200); background:#fff; color:var(--ink); place-items:center; }
.pepro-zch .dtop__burger svg{ width:20px; height:20px; }
.pepro-zch .dtop__brand{ display:flex; align-items:baseline; gap:.5em; font-weight:600; font-size:20px; letter-spacing:normal; color:var(--ink); }
.pepro-zch .dtop__brand b{ color:var(--sage); font-weight:600; }
.pepro-zch .dtop__brand span{ font-size:9px; font-weight:600; color:var(--g400); letter-spacing:normal; }
.pepro-zch .dtop__r{ display:flex; align-items:center; gap:8px; }
.pepro-zch .dtop__icon{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; color:var(--g500); background:transparent; border:0; position:relative; transition:.22s var(--ease); }
.pepro-zch .dtop__icon:hover{ background:var(--g100); color:var(--ink); }
.pepro-zch .dtop__icon svg{ width:20px; height:20px; }
.pepro-zch .dtop__badge{ position:absolute; top:8px; inset-inline-start:9px; min-width:15px; height:15px; padding:0 4px; border-radius:99px; background:var(--sage); color:#fff; font-size:9.5px; font-weight:600; display:grid; place-items:center; font-feature-settings:"ss01"; }
.pepro-zch .dtop__acct{ display:flex; align-items:center; gap:10px; padding-inline-start:12px; margin-inline-start:4px; border-inline-start:1px solid var(--g200); }
.pepro-zch .dtop__av{ width:38px; height:38px; border-radius:50%; background:var(--ash); display:grid; place-items:center; color:var(--charcoal); font-weight:600; font-size:14px; overflow:hidden; flex:none; }
.pepro-zch .dtop__av img{ width:100%; height:100%; object-fit:cover; }
.pepro-zch .dtop__nm{ display:flex; flex-direction:column; line-height:1.35; }
.pepro-zch .dtop__nm b{ font-size:13.5px; font-weight:600; color:var(--ink); }
.pepro-zch .dtop__nm small{ font-size:11px; color:var(--g400); }

/* body: sidebar (right in RTL) + main */
.pepro-zch .dbody{ flex:1; display:flex; align-items:flex-start; width:100%; max-width:1440px; margin-inline:auto; }

.pepro-zch .dside{
  width:266px; flex:none; align-self:stretch;
  position:sticky; top:64px; height:calc(100vh - 64px);
  display:flex; flex-direction:column; gap:6px;
  padding:22px 16px; background:#fff; border-inline-start:1px solid var(--g200);
}
.pepro-zch .dside__me{ display:flex; align-items:center; gap:13px; padding:6px 8px 16px; }
.pepro-zch .dside__av{ width:48px; height:48px; border-radius:50%; background:var(--ash); display:grid; place-items:center; color:var(--charcoal); font-weight:600; font-size:17px; overflow:hidden; flex:none; }
.pepro-zch .dside__av img{ width:100%; height:100%; object-fit:cover; }
.pepro-zch .dside__hi{ font-size:12px; color:var(--g500); }
.pepro-zch .dside__name{ font-size:15.5px; font-weight:600; color:var(--ink); letter-spacing:normal; }
.pepro-zch .dside__role{ display:inline-flex; align-items:center; gap:5px; margin-top:5px; font-size:10.5px; font-weight:600; letter-spacing:normal; color:var(--sage-deep); background:var(--sage-soft); border:1px solid var(--sage-line); border-radius:99px; padding:2px 9px; }
.pepro-zch .dside__role .dt{ width:5px; height:5px; border-radius:50%; background:var(--sage); }

.pepro-zch .dnav{ display:flex; flex-direction:column; gap:2px; }
.pepro-zch .dnav__group{ font-size:10px; font-weight:600; letter-spacing:normal; color:var(--g400); padding:14px 13px 6px; }
.pepro-zch .dnav__item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:start;
  padding:11px 13px; border-radius:11px; border:0; background:transparent;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--g600);
  transition:background .2s var(--ease), color .2s var(--ease); position:relative;
}
.pepro-zch .dnav__item svg{ width:19px; height:19px; flex:none; color:var(--g400); transition:color .2s; }
.pepro-zch .dnav__item:hover{ background:var(--g100); color:var(--ink); }
.pepro-zch .dnav__item:hover svg{ color:var(--g600); }
.pepro-zch .dnav__item.on{ background:var(--sage-soft); color:var(--sage-deep); font-weight:600; }
.pepro-zch .dnav__item.on svg{ color:var(--sage); }
.pepro-zch .dnav__item .nvb{ margin-inline-start:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--g200); color:var(--g600); font-size:11px; font-weight:600; display:grid; place-items:center; font-feature-settings:"ss01"; }
.pepro-zch .dnav__item.on .nvb{ background:var(--sage); color:#fff; }
.pepro-zch .dnav__sep{ height:1px; background:var(--g100); margin:10px 6px; }
.pepro-zch .dnav__logout{ margin-top:auto; color:var(--g500); }
.pepro-zch .dnav__logout:hover{ background:#FBF1EC; color:#A8552F; }
.pepro-zch .dnav__logout:hover svg{ color:#A8552F; }

/* main */
.pepro-zch .dmain{ flex:1; min-width:0; padding:clamp(20px,3vw,38px) clamp(16px,3.4vw,46px) 130px; }
.pepro-zch .dhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.pepro-zch .dhead__eyebrow{ display:inline-flex; align-items:center; gap:.55em; font-size:11.5px; font-weight:600; letter-spacing:normal; color:var(--sage); margin-bottom:10px; }
.pepro-zch .dhead__eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--sage); }
.pepro-zch .dhead__title{ font-size:clamp(22px,2.5vw,30px); font-weight:600; color:var(--ink); letter-spacing:normal; line-height:1.2; }
.pepro-zch .dhead__title b{ font-weight:600; }
.pepro-zch .dhead__sub{ font-size:14px; color:var(--g500); margin-top:7px; max-width:60ch; }
.pepro-zch .dhead__act{ display:flex; align-items:center; gap:10px; }

.pepro-zch .section{ }
.pepro-zch .no-motion .section{ animation:none; }

.pepro-zch .stack{ display:flex; flex-direction:column; gap:20px; }
.pepro-zch .grid2{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:start; }
@media (max-width:980px){ .pepro-zch .grid2{ grid-template-columns:1fr; } }

/* ============ STAT CARDS ============ */
.pepro-zch .statgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:20px; }
.pepro-zch .stat{
  background:#fff; border:1px solid var(--g200); border-radius:var(--tw-radius,16px);
  padding:20px; display:flex; flex-direction:column; gap:16px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; position:relative; overflow:hidden;
}
.pepro-zch .stat:hover{ transform:translateY(-3px); box-shadow:0 24px 44px -30px rgba(31,42,55,.32); border-color:var(--g300); }
.pepro-zch .stat__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pepro-zch .stat__ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--g100); color:var(--g600); flex:none; }
.pepro-zch .stat__ic svg{ width:22px; height:22px; }
.pepro-zch .stat--sage .stat__ic{ background:var(--sage-soft); color:var(--sage); }
.pepro-zch .stat--amber .stat__ic{ background:var(--amber-soft); color:var(--amber); }
.pepro-zch .stat--ok .stat__ic{ background:var(--ok-soft); color:var(--ok); }
.pepro-zch .stat__num{ display:flex; align-items:baseline; gap:7px; }
.pepro-zch .stat__val{ font-size:30px; font-weight:600; color:var(--ink); line-height:1; font-feature-settings:"ss01"; letter-spacing:normal; }
.pepro-zch .stat__unit{ font-size:13px; font-weight:600; color:var(--g500); }
.pepro-zch .stat__lbl{ font-size:13px; color:var(--g500); margin-top:7px; }
.pepro-zch .stat__foot{ display:flex; align-items:center; gap:7px; font-size:12.5px; }
.pepro-zch .stat__link{ display:inline-flex; align-items:center; gap:5px; color:var(--sage-deep); font-weight:600; transition:.2s; }
.pepro-zch .stat__link:hover{ gap:8px; }
.pepro-zch .stat__link svg{ width:14px; height:14px; }

/* ============ PILLS / BADGES ============ */
.pepro-zch .pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:99px; white-space:nowrap; }
.pepro-zch .pill .dt{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.pepro-zch .pill--ok{ background:var(--ok-soft); color:var(--ok-ink); }
.pepro-zch .pill--amber{ background:var(--amber-soft); color:var(--amber-ink); }
.pepro-zch .pill--grey{ background:var(--g100); color:var(--g600); }
.pepro-zch .pill--rose{ background:#FBF1EC; color:#A8552F; }
.pepro-zch .pill--sage{ background:var(--sage-soft); color:var(--sage-deep); }

/* ============ ALERT ============ */
.pepro-zch .alert{ display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:14px; margin-bottom:22px; }
.pepro-zch .alert--amber{ background:var(--amber-soft); border:1px solid var(--amber-line); }
.pepro-zch .alert__ic{ width:42px; height:42px; border-radius:11px; background:#fff; display:grid; place-items:center; flex:none; color:var(--amber); }
.pepro-zch .alert__ic svg{ width:21px; height:21px; }
.pepro-zch .alert__tx{ flex:1; font-size:14px; font-weight:600; color:var(--amber-ink); line-height:1.65; }
.pepro-zch .alert__tx b{ font-weight:600; }
.pepro-zch .alert__cta{ flex:none; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#fff; background:var(--amber); border:0; border-radius:9px; padding:10px 16px; transition:.25s var(--ease); }
.pepro-zch .alert__cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.pepro-zch .alert__cta svg{ width:15px; height:15px; }
.pepro-zch .alert__x{ flex:none; width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:var(--amber-ink); display:grid; place-items:center; opacity:.6; transition:.2s; }
.pepro-zch .alert__x:hover{ opacity:1; background:rgba(126,92,33,.1); }
.pepro-zch .alert__x svg{ width:16px; height:16px; }

/* ============ PANEL ============ */
.pepro-zch .panel{ background:#fff; border:1px solid var(--g200); border-radius:var(--tw-radius,16px); overflow:hidden; }
.pepro-zch .panel__h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid var(--g100); }
.pepro-zch .panel__t{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:var(--ink); }
.pepro-zch .panel__t .ic{ width:30px; height:30px; border-radius:8px; background:var(--g100); color:var(--g600); display:grid; place-items:center; flex:none; }
.pepro-zch .panel__t .ic svg{ width:16px; height:16px; }
.pepro-zch .panel__link{ font-size:13px; font-weight:600; color:var(--sage-deep); display:inline-flex; align-items:center; gap:5px; transition:.2s; }
.pepro-zch .panel__link:hover{ gap:8px; }
.pepro-zch .panel__link svg{ width:14px; height:14px; }
.pepro-zch .panel__body{ padding:18px 20px; }
.pepro-zch .panel__body--flush{ padding:0; }

/* ============ LIST ROWS ============ */
.pepro-zch .lrow{ display:flex; align-items:center; gap:14px; padding:15px 20px; border-bottom:1px solid var(--g100); transition:background .2s; }
.pepro-zch .lrow:last-child{ border-bottom:0; }
.pepro-zch .lrow:hover{ background:var(--g50); }
.pepro-zch .lrow__av{ width:46px; height:46px; border-radius:50%; background:var(--ash); overflow:hidden; flex:none; display:grid; place-items:center; color:var(--charcoal); font-weight:600; font-size:15px; }
.pepro-zch .lrow__av img{ width:100%; height:100%; object-fit:cover; }
.pepro-zch .lrow__main{ flex:1; min-width:0; }
.pepro-zch .lrow__name{ font-size:14.5px; font-weight:600; color:var(--ink); }
.pepro-zch .lrow__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:5px; font-size:12.5px; color:var(--g500); }
.pepro-zch .lrow__meta .mi{ display:inline-flex; align-items:center; gap:5px; }
.pepro-zch .lrow__meta .mi svg{ width:13px; height:13px; color:var(--g400); }
.pepro-zch .lrow__r{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; }
.pepro-zch .lrow__acts{ display:flex; gap:7px; }

/* small button */
.pepro-zch .sbtn{ display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:9px; border:1px solid var(--g200); background:#fff; color:var(--g700); transition:.22s var(--ease); white-space:nowrap; }
.pepro-zch .sbtn:hover{ border-color:var(--g300); background:var(--g50); }
.pepro-zch .sbtn svg{ width:14px; height:14px; }
.pepro-zch .sbtn--sage{ background:var(--sage); border-color:var(--sage); color:#fff; }
.pepro-zch .sbtn--sage:hover{ background:var(--sage-deep); border-color:var(--sage-deep); }
.pepro-zch .sbtn--ghostsage{ background:var(--sage-soft); border-color:var(--sage-line); color:var(--sage-deep); }
.pepro-zch .sbtn--ghostsage:hover{ background:#E7E8DD; }
.pepro-zch .sbtn--rose:hover{ border-color:#E3C3B4; background:#FBF1EC; color:#A8552F; }
.pepro-zch .sbtn--icon{ padding:8px; }

/* ============ TABS ============ */
.pepro-zch .tabs{ display:inline-flex; gap:4px; background:var(--g100); padding:4px; border-radius:12px; }
.pepro-zch .tab{ display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:9px; border:0; background:transparent; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--g500); transition:.2s var(--ease); }
.pepro-zch .tab:hover{ color:var(--ink); }
.pepro-zch .tab.on{ background:#fff; color:var(--ink); font-weight:600; box-shadow:0 2px 7px -3px rgba(0,0,0,.18); }
.pepro-zch .tab .cnt{ min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--g200); color:var(--g600); font-size:10.5px; font-weight:600; display:grid; place-items:center; font-feature-settings:"ss01"; }
.pepro-zch .tab.on .cnt{ background:var(--sage); color:#fff; }

/* ============ CALENDAR (mini) ============ */
.pepro-zch .cal__bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pepro-zch .cal__mo{ font-size:14.5px; font-weight:600; color:var(--ink); }
.pepro-zch .cal__nav{ display:flex; gap:6px; }
.pepro-zch .cal__navb{ width:30px; height:30px; border-radius:8px; border:1px solid var(--g200); background:#fff; color:var(--g500); display:grid; place-items:center; transition:.2s; }
.pepro-zch .cal__navb:hover{ border-color:var(--g300); color:var(--ink); }
.pepro-zch .cal__navb svg{ width:15px; height:15px; }
.pepro-zch .cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.pepro-zch .cal__dh{ text-align:center; font-size:10.5px; font-weight:600; color:var(--g400); padding-bottom:6px; }
.pepro-zch .cal__d{ aspect-ratio:1; display:grid; place-items:center; font-size:13px; color:var(--ink); border-radius:9px; cursor:pointer; position:relative; transition:.18s; font-feature-settings:"ss01"; border:1px solid transparent; }
.pepro-zch .cal__d:hover{ background:var(--g100); }
.pepro-zch .cal__d.muted{ color:var(--g300); cursor:default; }
.pepro-zch .cal__d.muted:hover{ background:transparent; }
.pepro-zch .cal__d.today{ border-color:var(--g300); font-weight:600; }
.pepro-zch .cal__d.has::after{ content:""; position:absolute; bottom:5px; width:5px; height:5px; border-radius:50%; background:var(--sage); }
.pepro-zch .cal__d.sel{ background:var(--sage); color:#fff; font-weight:600; }
.pepro-zch .cal__d.sel.has::after{ background:#fff; }

/* ============ MESSAGES (support inbox) ============ */
.pepro-zch .msg{ display:grid; grid-template-columns:312px 1fr; min-height:540px; }
.pepro-zch .msg__list{ border-inline-end:1px solid var(--g100); overflow-y:auto; max-height:600px; }
.pepro-zch .conv{ display:flex; gap:12px; width:100%; text-align:start; padding:15px 18px; border:0; border-bottom:1px solid var(--g100); background:transparent; cursor:pointer; transition:.18s; font-family:inherit; }
.pepro-zch .conv:hover{ background:var(--g50); }
.pepro-zch .conv.on{ background:var(--sage-soft); }
.pepro-zch .conv__av{ width:42px; height:42px; border-radius:50%; background:var(--ash); overflow:hidden; flex:none; display:grid; place-items:center; color:var(--charcoal); font-weight:600; font-size:14px; }
.pepro-zch .conv__av img{ width:100%; height:100%; object-fit:cover; }
.pepro-zch .conv__main{ flex:1; min-width:0; }
.pepro-zch .conv__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pepro-zch .conv__name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.pepro-zch .conv__time{ font-size:10.5px; color:var(--g400); flex:none; font-feature-settings:"ss01"; }
.pepro-zch .conv__prev{ font-size:12.5px; color:var(--g500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.pepro-zch .conv__tag{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:10px; font-weight:600; color:var(--g500); }
.pepro-zch .conv__unread{ width:9px; height:9px; border-radius:50%; background:var(--sage); flex:none; align-self:center; }
.pepro-zch .thread{ display:flex; flex-direction:column; min-width:0; }
.pepro-zch .thread__h{ display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--g100); }
.pepro-zch .thread__back{ display:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--g200); background:#fff; color:var(--g600); place-items:center; flex:none; }
.pepro-zch .thread__back svg{ width:16px; height:16px; }
.pepro-zch .thread__av{ width:40px; height:40px; border-radius:50%; background:var(--ash); overflow:hidden; flex:none; }
.pepro-zch .thread__av img{ width:100%; height:100%; object-fit:cover; }
.pepro-zch .thread__id .nm{ font-size:14px; font-weight:600; color:var(--ink); }
.pepro-zch .thread__id .st{ font-size:11.5px; color:var(--g500); margin-top:2px; }
.pepro-zch .thread__body{ flex:1; padding:22px 20px; display:flex; flex-direction:column; gap:13px; overflow-y:auto; max-height:420px; background:var(--g50); }
.pepro-zch .tday{ align-self:center; font-size:10.5px; font-weight:600; color:var(--g400); background:#fff; border:1px solid var(--g200); border-radius:99px; padding:4px 12px; margin:2px 0; }
.pepro-zch .bubble{ max-width:74%; padding:11px 15px; border-radius:15px; font-size:13.5px; line-height:1.75; }
.pepro-zch .bubble__t{ display:block; font-size:10px; margin-top:5px; opacity:.6; font-feature-settings:"ss01"; }
.pepro-zch .bubble--them{ background:#fff; border:1px solid var(--g200); color:var(--ink); align-self:flex-start; border-end-end-radius:5px; }
.pepro-zch .bubble--me{ background:var(--sage); color:#fff; align-self:flex-end; border-end-start-radius:5px; }
.pepro-zch .thread__compose{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-top:1px solid var(--g100); background:#fff; }
.pepro-zch .thread__compose .input{ flex:1; }
.pepro-zch .thread__send{ width:44px; height:44px; border-radius:11px; border:0; background:var(--sage); color:#fff; display:grid; place-items:center; flex:none; transition:.22s var(--ease); }
.pepro-zch .thread__send:hover{ background:var(--sage-deep); transform:translateY(-1px); }
.pepro-zch .thread__send svg{ width:18px; height:18px; }

/* ============ TABLE ============ */
.pepro-zch .tblwrap{ overflow-x:auto; }
.pepro-zch .tbl{ width:100%; border-collapse:collapse; }
.pepro-zch .tbl th{ text-align:start; font-size:11px; font-weight:600; letter-spacing:normal; color:var(--g500); padding:13px 18px; border-bottom:1px solid var(--g200); white-space:nowrap; }
.pepro-zch .tbl td{ padding:15px 18px; border-bottom:1px solid var(--g100); font-size:13.5px; color:var(--g700); white-space:nowrap; }
.pepro-zch .tbl tr:last-child td{ border-bottom:0; }
.pepro-zch .tbl tbody tr{ transition:background .18s; }
.pepro-zch .tbl tbody tr:hover td{ background:var(--g50); }
.pepro-zch .amt{ font-feature-settings:"ss01"; font-weight:600; }
.pepro-zch .amt--in{ color:var(--ok-ink); }
.pepro-zch .amt--out{ color:var(--g700); }

/* payout / iban card */
.pepro-zch .payout{ display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--g200); border-radius:14px; background:var(--g50); }
.pepro-zch .payout__ic{ width:46px; height:46px; border-radius:12px; background:var(--charcoal); color:#fff; display:grid; place-items:center; flex:none; }
.pepro-zch .payout__ic svg{ width:22px; height:22px; }
.pepro-zch .payout__tx{ flex:1; min-width:0; }
.pepro-zch .payout__lbl{ font-size:12px; color:var(--g500); }
.pepro-zch .payout__iban{ font-size:16px; font-weight:600; color:var(--ink); font-feature-settings:"ss01"; letter-spacing:normal; margin-top:3px; direction:ltr; text-align:start; }

/* ============ PROJECTS (نمونه‌کارها) ============ */
.pepro-zch .projgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:16px; }
.pepro-zch .projcard{ border:1px solid var(--g200); border-radius:14px; overflow:hidden; background:#fff; transition:.28s var(--ease); }
.pepro-zch .projcard:hover{ box-shadow:0 20px 38px -28px rgba(31,42,55,.32); transform:translateY(-2px); }
.pepro-zch .projcard__img{ aspect-ratio:4/3; background:var(--g100); position:relative; overflow:hidden; }
.pepro-zch .projcard__img img{ width:100%; height:100%; object-fit:cover; transition:.4s var(--ease); }
.pepro-zch .projcard:hover .projcard__img img{ transform:scale(1.05); }
.pepro-zch .projcard__ov{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:flex-end; padding:10px; opacity:0; transition:.25s; background:linear-gradient(to top,rgba(31,42,55,.4),transparent 50%); }
.pepro-zch .projcard:hover .projcard__ov{ opacity:1; }
.pepro-zch .projcard__edit{ width:32px; height:32px; border-radius:8px; border:0; background:rgba(255,255,255,.92); color:var(--ink); display:grid; place-items:center; }
.pepro-zch .projcard__edit svg{ width:15px; height:15px; }
.pepro-zch .projcard__b{ padding:13px 14px; }
.pepro-zch .projcard__t{ font-size:14px; font-weight:600; color:var(--ink); }
.pepro-zch .projcard__c{ font-size:12px; color:var(--g500); margin-top:3px; display:flex; align-items:center; gap:5px; }
.pepro-zch .projcard__c svg{ width:12px; height:12px; }
.pepro-zch .projcard--add{ border-style:dashed; border-color:var(--g300); display:grid; place-items:center; min-height:160px; color:var(--g400); cursor:pointer; gap:9px; transition:.25s; }
.pepro-zch .projcard--add:hover{ border-color:var(--sage); color:var(--sage); background:var(--sage-soft); }
.pepro-zch .projcard--add .pa{ display:flex; flex-direction:column; align-items:center; gap:9px; font-size:13px; font-weight:600; }
.pepro-zch .projcard--add svg{ width:24px; height:24px; }

/* ============ SETTINGS ============ */
.pepro-zch .setrow{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 20px; border-bottom:1px solid var(--g100); }
.pepro-zch .setrow:last-child{ border-bottom:0; }
.pepro-zch .setrow__tx{ min-width:0; }
.pepro-zch .setrow__tx .t{ font-size:14px; font-weight:600; color:var(--ink); }
.pepro-zch .setrow__tx .d{ font-size:12.5px; color:var(--g500); margin-top:3px; line-height:1.6; }
.pepro-zch .switch{ width:44px; height:25px; border-radius:99px; background:var(--g300); position:relative; border:0; cursor:pointer; transition:background .25s var(--ease); flex:none; }
.pepro-zch .switch.on{ background:var(--sage); }
.pepro-zch .switch::after{ content:""; position:absolute; top:3px; inset-inline-start:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:inset-inline-start .25s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.pepro-zch .switch.on::after{ inset-inline-start:22px; }

/* profile completion ring/bar */
.pepro-zch .compbar{ display:flex; align-items:center; gap:14px; }
.pepro-zch .compbar__track{ flex:1; height:7px; border-radius:99px; background:var(--g200); overflow:hidden; }
.pepro-zch .compbar__fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--sage),var(--sage-deep)); transition:width .6s var(--ease); }
.pepro-zch .compbar__pct{ font-size:13px; font-weight:600; color:var(--sage-deep); font-feature-settings:"ss01"; }

/* empty state */
.pepro-zch .empty{ text-align:center; padding:50px 24px; color:var(--g500); }
.pepro-zch .empty__ic{ width:60px; height:60px; border-radius:16px; background:var(--g100); color:var(--g400); display:grid; place-items:center; margin:0 auto 16px; }
.pepro-zch .empty__ic svg{ width:28px; height:28px; }
.pepro-zch .empty__t{ font-size:15px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.pepro-zch .empty__d{ font-size:13px; max-width:36ch; margin:0 auto 18px; line-height:1.7; }

/* CTA banner (client search designer) */
.pepro-zch .ctabanner{ display:flex; align-items:center; gap:20px; padding:24px clamp(20px,3vw,30px); border-radius:var(--tw-radius,16px); background:linear-gradient(120deg,var(--charcoal),#4b4e47); color:#fff; overflow:hidden; position:relative; }
.pepro-zch .ctabanner::after{ content:""; position:absolute; inset-inline-end:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:rgba(127,128,99,.3); filter:blur(20px); }
.pepro-zch .ctabanner__tx{ flex:1; position:relative; z-index:1; }
.pepro-zch .ctabanner__t{ font-size:clamp(18px,2vw,22px); font-weight:600; margin-bottom:6px; }
.pepro-zch .ctabanner__d{ font-size:13.5px; opacity:.82; line-height:1.7; }
.pepro-zch .ctabanner__btn{ flex:none; position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--charcoal); background:#fff; border:0; border-radius:11px; padding:13px 22px; transition:.25s var(--ease); }
.pepro-zch .ctabanner__btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(0,0,0,.4); }
.pepro-zch .ctabanner__btn svg{ width:17px; height:17px; }

/* ============ ROLE DEMO RAIL ============ */
.pepro-zch .rolerail{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:6px; padding:7px 8px;
  background:rgba(31,42,55,.93); backdrop-filter:blur(14px); border-radius:14px;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6);
}
.pepro-zch .rolerail__lbl{ display:flex; align-items:center; gap:7px; padding:0 10px 0 6px; border-inline-end:1px solid rgba(255,255,255,.14); }
.pepro-zch .rolerail__lbl .dt{ width:7px; height:7px; border-radius:50%; background:var(--sage); }
.pepro-zch .rolerail__lbl span{ font-size:10.5px; font-weight:600; color:rgba(255,255,255,.62); letter-spacing:normal; white-space:nowrap; }
.pepro-zch .rolebtn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:9px; border:0; background:transparent; color:rgba(255,255,255,.62); font-family:inherit; font-size:13px; font-weight:600; transition:.22s var(--ease); }
.pepro-zch .rolebtn:hover{ background:rgba(255,255,255,.09); color:#fff; }
.pepro-zch .rolebtn.on{ background:var(--sage); color:#fff; }
.pepro-zch .rolebtn svg{ width:16px; height:16px; }

/* drawer scrim */
.pepro-zch .scrim{ display:none; position:fixed; inset:0; z-index:44; background:rgba(31,42,55,.5); backdrop-filter:blur(2px); opacity:0; transition:opacity .3s; }

/* ============ DENSITY ============ */
.pepro-zch .density-compact .dmain{ padding-top:22px; }
.pepro-zch .density-compact .stat{ padding:16px; gap:12px; }
.pepro-zch .density-compact .panel__body{ padding:14px 16px; }
.pepro-zch .density-compact .lrow{ padding:12px 16px; }
.pepro-zch .density-comfy .stat{ padding:26px; gap:20px; }
.pepro-zch .density-comfy .panel__body{ padding:24px 26px; }
.pepro-zch .density-comfy .lrow{ padding:19px 24px; }

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .pepro-zch .dtop__burger{ display:grid; }
  .pepro-zch .dside{
    position:fixed; top:0; bottom:0; inset-inline-start:0; height:100vh; width:288px; z-index:46;
    transform:translateX(100%); transition:transform .32s var(--ease);
    box-shadow:-20px 0 50px -30px rgba(0,0,0,.4); padding-top:18px; overflow-y:auto;
  }
  .pepro-zch.dash.drawer .dside{ transform:translateX(0); }
  .pepro-zch.dash.drawer .scrim{ display:block; opacity:1; }
  .pepro-zch .dbody{ display:block; }
  .pepro-zch .dmain{ padding-inline:clamp(16px,4vw,28px); }
}
@media (max-width:760px){
  .pepro-zch .dtop__nm{ display:none; }
  .pepro-zch .grid2{ grid-template-columns:1fr; }
  .pepro-zch .msg{ grid-template-columns:1fr; }
  .pepro-zch .msg__list{ border-inline-end:0; border-bottom:1px solid var(--g100); }
  .pepro-zch .msg.threadopen .msg__list{ display:none; }
  .pepro-zch .msg:not(.threadopen) .thread{ display:none; }
  .pepro-zch .thread__back{ display:grid; }
  .pepro-zch .thread__body{ max-height:none; }
  .pepro-zch .lrow{ flex-wrap:wrap; }
  .pepro-zch .lrow__r{ width:100%; flex-direction:row; align-items:center; justify-content:space-between; padding-inline-start:60px; }
  .pepro-zch .dhead{ flex-direction:column; align-items:flex-start; }
  .pepro-zch .ctabanner{ flex-direction:column; align-items:flex-start; }
  .pepro-zch .rolerail__lbl span{ display:none; }
}
@media (max-width:440px){
  .pepro-zch .statgrid{ grid-template-columns:1fr 1fr; }
  .pepro-zch .stat__val{ font-size:25px; }
}

/* ---- PPTS appearance tokens -> ZCH design tokens ---- */
.pepro-zch{
  --sage: var(--pr-primary, #7F8063);
  --sage-deep: var(--pr-primary-deep, #6A6B51);
  --charcoal: var(--pr-charcoal, #595C54);
  --g50: var(--pr-bg, #F9FAFB);
  --ink: var(--pr-text, #1F2A37);
  --g500: var(--pr-muted, #6B7280);
  --g200: var(--pr-border, #E5E7EB);
  --ok: var(--pr-success, #5E8460);
  --amber: var(--pr-warning, #A9803C);
  --tw-radius: var(--pr-radius, 16px);
  --font: var(--pr-font-body, "YekanBakh", Tahoma, "IRANYekan", ui-sans-serif, system-ui, sans-serif);
  font-family: var(--font); color: var(--g700);
}

/* =====================================================================
   ZCH — additions: auth view, overview helpers, and re-skin of the
   plugin's own (delegated) section markup + PeproDev Ticketing UI.
   ===================================================================== */

/* ---------- guest auth view ---------- */
.pepro-zch.zch-auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--g50); }
.pepro-zch .zauth__brand{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--charcoal),#43463f); color:#fff; padding:clamp(28px,5vw,64px); display:flex; flex-direction:column; justify-content:space-between; }
.pepro-zch .zauth__brand::after{ content:""; position:absolute; inset-inline-end:-60px; top:-60px; width:280px; height:280px; border-radius:50%; background:rgba(127,128,99,.32); filter:blur(26px); }
.pepro-zch .zauth__logo{ position:relative; z-index:1; display:flex; align-items:baseline; gap:.5em; font-size:24px; font-weight:600; }
.pepro-zch .zauth__logo b{ color:var(--ash); }
.pepro-zch .zauth__pitch{ position:relative; z-index:1; max-width:34ch; }
.pepro-zch .zauth__pitch h2{ color:#fff; font-size:clamp(22px,2.6vw,30px); line-height:1.4; margin-bottom:12px; }
.pepro-zch .zauth__pitch p{ color:rgba(255,255,255,.78); line-height:1.9; }
.pepro-zch .zauth__foot{ position:relative; z-index:1; color:rgba(255,255,255,.5); font-size:12.5px; }
.pepro-zch .zauth__panel{ display:flex; align-items:center; justify-content:center; padding:clamp(24px,4vw,56px); }
.pepro-zch .zauth__card{ width:100%; max-width:430px; }
.pepro-zch .zauth__tabs{ display:inline-flex; gap:4px; background:var(--g100); padding:4px; border-radius:12px; margin-bottom:24px; }
.pepro-zch .zauth__tabs button{ border:0; background:transparent; font-family:inherit; font-size:14px; font-weight:600; color:var(--g500); padding:9px 18px; border-radius:9px; cursor:pointer; transition:.2s var(--ease); }
.pepro-zch .zauth__tabs button.active{ background:#fff; color:var(--ink); box-shadow:0 2px 7px -3px rgba(0,0,0,.18); }
.pepro-zch .zform{ display:flex; flex-direction:column; gap:16px; }
.pepro-zch .zform h1{ font-size:26px; margin-bottom:2px; }
.pepro-zch .zform .lede{ color:var(--g500); font-size:14px; margin-bottom:8px; }
.pepro-zch .zform .opts{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--g500); }
.pepro-zch .zform .opts a{ color:var(--sage-deep); font-weight:600; }
.pepro-zch .zbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 18px; border:0; border-radius:10px; background:var(--sage); color:#fff; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:.22s var(--ease); }
.pepro-zch .zbtn:hover{ background:var(--sage-deep); transform:translateY(-1px); }
.pepro-zch .zbtn[disabled]{ opacity:.6; cursor:default; transform:none; }
.pepro-zch .zsocial{ display:flex; flex-direction:column; gap:10px; }
.pepro-zch .zsocial a, .pepro-zch .zsocial button{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:12px; border:1px solid var(--g200); border-radius:10px; background:#fff; font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; transition:.2s; }
.pepro-zch .zsocial a:hover, .pepro-zch .zsocial button:hover{ border-color:var(--g300); background:var(--g50); }
.pepro-zch .zdivider{ display:flex; align-items:center; gap:12px; color:var(--g400); font-size:12.5px; margin:4px 0; }
.pepro-zch .zdivider::before, .pepro-zch .zdivider::after{ content:""; flex:1; height:1px; background:var(--g200); }
.pepro-zch .zmsg{ font-size:13px; border-radius:9px; padding:0; max-height:0; overflow:hidden; transition:.2s; }
.pepro-zch .zmsg.show{ padding:10px 13px; max-height:200px; }
.pepro-zch .zmsg.ok{ background:var(--ok-soft); color:var(--ok-ink); }
.pepro-zch .zmsg.err{ background:#FBF1EC; color:#A8552F; }
.pepro-zch .zotp{ display:flex; gap:8px; direction:ltr; }
.pepro-zch .zotp .zotp-cell{ flex:1; height:50px; text-align:center; font-size:20px; font-weight:600; border:1px solid var(--g200); border-radius:10px; background:var(--g50); }
.pepro-zch .zotp .zotp-cell:focus{ border-color:var(--sage); outline:none; box-shadow:0 0 0 4px var(--sage-tint); }
.pepro-zch .zotp-step{ display:none; flex-direction:column; gap:14px; }
.pepro-zch .zotp-step.show{ display:flex; }
.pepro-zch .zlink{ background:none; border:0; font-family:inherit; color:var(--sage-deep); font-weight:600; font-size:13px; cursor:pointer; }
@media (max-width:860px){ .pepro-zch.zch-auth{ grid-template-columns:1fr; } .pepro-zch .zauth__brand{ display:none; } }

/* ---------- overview greeting + quick CTAs ---------- */
.pepro-zch .greet{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.pepro-zch .greet h1{ font-size:clamp(22px,2.5vw,30px); }
.pepro-zch .greet p{ color:var(--g500); font-size:14px; margin-top:6px; }
.pepro-zch .greet .quick{ display:flex; gap:10px; flex-wrap:wrap; }
.pepro-zch .greet .quick a{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; border:1px solid var(--g200); background:#fff; font-weight:600; font-size:13.5px; color:var(--ink); transition:.2s; }
.pepro-zch .greet .quick a.pri{ background:var(--sage); border-color:var(--sage); color:#fff; }
.pepro-zch .greet .quick a:hover{ transform:translateY(-1px); }
.pepro-zch .greet .quick a svg{ width:16px; height:16px; }
.pepro-zch .crs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:18px 20px; }
.pepro-zch .crs{ border:1px solid var(--g200); border-radius:13px; overflow:hidden; background:#fff; transition:.25s var(--ease); display:block; }
.pepro-zch .crs:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -26px rgba(31,42,55,.3); }
.pepro-zch .crs .pic{ aspect-ratio:16/9; background:var(--g100); }
.pepro-zch .crs .pic img{ width:100%; height:100%; object-fit:cover; }
.pepro-zch .crs .b{ padding:12px 14px; }
.pepro-zch .crs .b .t{ font-size:14px; font-weight:600; color:var(--ink); }
.pepro-zch .crs .prog{ height:6px; border-radius:99px; background:var(--g200); margin:9px 0 6px; overflow:hidden; }
.pepro-zch .crs .prog span{ display:block; height:100%; background:linear-gradient(90deg,var(--sage),var(--sage-deep)); }
.pepro-zch .crs .pct{ font-size:11.5px; color:var(--g500); }
.pepro-zch .empty-small{ padding:22px; text-align:center; color:var(--g500); font-size:13.5px; }

/* ---------- re-skin the plugin's own delegated sections ---------- */
.pepro-zch .zch-section{ background:#fff; border:1px solid var(--g200); border-radius:var(--tw-radius,16px); padding:clamp(16px,2.4vw,26px); }
.pepro-zch .zch-section .profile-header{ font-size:18px; font-weight:600; color:var(--ink); margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pepro-zch .zch-section .au-card,
.pepro-zch .zch-section .minus-padding{ background:transparent; border:0; box-shadow:none; padding:0; }
.pepro-zch .zch-section table{ width:100%; border-collapse:collapse; }
.pepro-zch .zch-section table th{ text-align:start; font-size:11.5px; font-weight:600; color:var(--g500); padding:12px 14px; border-bottom:1px solid var(--g200); white-space:nowrap; }
.pepro-zch .zch-section table td{ padding:13px 14px; border-bottom:1px solid var(--g100); font-size:13.5px; color:var(--g700); }
.pepro-zch .zch-section table tbody tr:hover td{ background:var(--g50); }
.pepro-zch .zch-section input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.pepro-zch .zch-section select,
.pepro-zch .zch-section textarea{ font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--g50); border:1px solid var(--g200); border-radius:9px; padding:11px 13px; width:100%; transition:.2s; }
.pepro-zch .zch-section input:focus, .pepro-zch .zch-section select:focus, .pepro-zch .zch-section textarea:focus{ border-color:var(--sage); background:#fff; outline:none; box-shadow:0 0 0 4px var(--sage-tint); }
.pepro-zch .zch-section .button,
.pepro-zch .zch-section button[type=submit],
.pepro-zch .zch-section .btn{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:600; font-size:14px; padding:11px 20px; border-radius:10px; border:0; background:var(--sage); color:#fff; cursor:pointer; transition:.2s; }
.pepro-zch .zch-section .button:hover, .pepro-zch .zch-section button[type=submit]:hover{ background:var(--sage-deep); }
/* tabbed wrapper (verify email/mobile, billing/shipping) */
.pepro-zch .zch-section .tabbed-wrapper .tab-names{ display:inline-flex; gap:4px; background:var(--g100); padding:4px; border-radius:12px; margin-bottom:18px; }
.pepro-zch .zch-section .tab-names .change-tab{ padding:8px 16px; border-radius:9px; font-weight:600; font-size:13.5px; color:var(--g500); cursor:pointer; }
.pepro-zch .zch-section .tab-names .change-tab.active{ background:#fff; color:var(--ink); box-shadow:0 2px 7px -3px rgba(0,0,0,.18); }
.pepro-zch .zch-section .tab-content .tab-entry{ display:none; }
.pepro-zch .zch-section .tab-content .tab-entry.active{ display:block; }

/* ---------- PeproDev Ticketing re-skin ---------- */
.pepro-zch .zch-section .btn-add-ticket{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:9px 16px; border-radius:9px; background:var(--sage); color:#fff; }
.pepro-zch .zch-section .table-earning .col_status{ font-weight:600; }
.pepro-zch .zch-section .peproticket--btn--view,
.pepro-zch .zch-section .peproticket--btn--edit,
.pepro-zch .zch-section .btn-square{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--g200); background:#fff; color:var(--g600); transition:.2s; }
.pepro-zch .zch-section .btn-square:hover{ border-color:var(--sage); color:var(--sage); }
.pepro-zch .zch-section .alert{ background:var(--amber-soft); border:1px solid var(--amber-line); color:var(--amber-ink); border-radius:12px; padding:14px 16px; }
/* chat bubbles → ZCH sage palette */
.pepro-zch .zch-section .imessage{ display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--g50); border:1px solid var(--g100); border-radius:14px; max-height:480px; overflow-y:auto; --send-bg:var(--sage); --send-color:#fff; --receive-bg:#fff; --receive-text:var(--ink); --page-background:var(--g50); }
.pepro-zch .zch-section .imessage chat{ max-width:74%; padding:11px 15px; border-radius:15px; font-size:13.5px; line-height:1.8; display:block; }
.pepro-zch .zch-section .imessage chat.send{ background:var(--sage); color:#fff; align-self:flex-end; border-end-start-radius:5px; }
.pepro-zch .zch-section .imessage chat.receive{ background:#fff; border:1px solid var(--g200); color:var(--ink); align-self:flex-start; border-end-end-radius:5px; }
.pepro-zch .zch-section .imessage .chat_signature{ font-size:10.5px; opacity:.7; margin-top:6px; display:flex; justify-content:space-between; }
.pepro-zch .zch-section form.add-peprotickets{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }

/* side (brand) panel toggle */
.pepro-zch.zch-auth.brand-off{ grid-template-columns:1fr; }
.pepro-zch .zauth__brand{ background-size:cover; background-position:center; }

/* =====================================================================
   ZCH — fix delegated section forms (edit profile, address, etc.).
   The legacy form layout is scoped to `.profile-page-wrapper` (and partly
   inlined in dash-index.php), which ZCH does NOT render — so re-apply
   the needed rules under our `.zch-section` wrapper.
   ===================================================================== */
.pepro-zch.dash{ width:100%; }          /* survive themes that flex the content area */
.pepro-zch .zch-section .profile-header{ font-size:18px; font-weight:600; color:var(--ink); margin:0 0 18px; }
.pepro-zch .zch-section .edit-profile-form{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px 18px; }
.pepro-zch .zch-section .edit-profile-form .row-full{ grid-column:1 / 5; }
.pepro-zch .zch-section .edit-profile-form .row-first{ grid-column:1 / 3; }
.pepro-zch .zch-section .edit-profile-form .row-last{ grid-column:3 / 5; }
@media (max-width:760px){
  .pepro-zch .zch-section .edit-profile-form{ grid-template-columns:1fr; }
  .pepro-zch .zch-section .edit-profile-form .row-full,
  .pepro-zch .zch-section .edit-profile-form .row-first,
  .pepro-zch .zch-section .edit-profile-form .row-last{ grid-column:1 / -1; }
}
.pepro-zch .zch-section .form-group{ display:flex; flex-direction:column; gap:7px; }
.pepro-zch .zch-section .form-group label{ font-size:13px; color:var(--g600); font-weight:600; }
.pepro-zch .zch-section .edit-profile-form > .row-full:first-child .form-group label{ flex-direction:row; align-items:center; gap:.6rem; cursor:pointer; }
.pepro-zch .zch-section .edit-profile-form > .row-full:first-child img{ border-radius:10px; border:1px solid var(--g200); }
.pepro-zch .zch-section .submit-wrap{ margin-top:6px; }
.pepro-zch .zch-section #submit-profile-changes{ width:100%; }
/* primary/submit buttons → sage (overrides legacy Elementor-global black fallback) */
.pepro-zch .zch-section button[type="submit"],
.pepro-zch .zch-section .btn-info,
.pepro-zch .zch-section .btn-primary,
.pepro-zch .zch-section #submit-profile-changes{ background:var(--sage); border:1px solid var(--sage); color:#fff; }
.pepro-zch .zch-section button[type="submit"]:hover,
.pepro-zch .zch-section .btn-info:hover,
.pepro-zch .zch-section .btn-primary:hover{ background:var(--sage-deep); border-color:var(--sage-deep); }
/* save-result + verify alert boxes */
.pepro-zch .zch-section .save-user-details.alert-box{ padding:1rem; margin:1rem 0; border-radius:12px; }
.pepro-zch .zch-section .save-user-details.alert-box.success{ background:var(--ok-soft); color:var(--ok-ink); border:1px solid var(--ok-line); }
.pepro-zch .zch-section .save-user-details.alert-box.error{ background:#FBF1EC; color:#A8552F; border:1px solid #E3C3B4; }
/* WooCommerce stat row + e-commerce settings heading */
.pepro-zch .zch-section .row.wc_stats{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between; text-align:center; }
.pepro-zch .zch-section .row.wc_stats > div{ flex:1 1 200px; background:var(--g50); border:1px solid var(--g200); border-radius:12px; padding:1rem; }
.pepro-zch .zch-section .overview-wrap{ margin-top:1.6rem; }
.pepro-zch .zch-section .overview-wrap .title-1{ font-size:17px; font-weight:600; color:var(--ink); margin-bottom:1rem; }

/* =====================================================================
   ZCH — guard against the login form's main-form.css and the
   onboarding .card style leaking into the dashboard / delegated sections.
   ===================================================================== */
/* main-form.css styles `#pepro-profile{display:flex;justify-content:center;padding:2rem}` for the
   login card; the ZCH dashboard/login also live in #pepro-profile, so neutralise it. */
#pepro-profile.zch-host{ display:block; width:100%; max-width:none; padding:0; margin:0; position:static; border-radius:0; align-items:stretch; justify-content:flex-start; }
/* the onboarding/auth `.card` must NOT style the legacy section forms (.tab-entry.card, .card) */
.pepro-zch .zch-section .card,
.pepro-zch .zch-section .tab-entry.card{ width:auto; max-width:none; background:transparent; border:0; box-shadow:none; border-radius:0; padding:0; overflow:visible; }
/* nav uses <a> now — keep it underline-free */
.pepro-zch .dnav__item{ text-decoration:none; }

/* ensure the top bar always spans the full dashboard width */
.pepro-zch .dtop{ width:100%; }
.pepro-zch .dtop__icon{ text-decoration:none; }

/* when the dashboard top bar is hidden, the sidebar fills the full height */
.pepro-zch.dash.no-topbar .dside{ top:0; height:100vh; }
@media (max-width:820px){ .pepro-zch.dash.no-topbar .dside{ height:100vh; } }

/* course list: compact info + unlimited badge (ZedArch) */
.pepro-zch .zch-section .course-info-wrapper{ font-size:12px; line-height:1.7; color:var(--g500); margin-top:.45rem; }
.pepro-zch .zch-section .course-info-wrapper .ci-label{ color:var(--g400); }
.pepro-zch .zch-section .course-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:4px 12px; border-radius:99px; background:var(--sage-soft); color:var(--sage-deep); }
.pepro-zch .crs .course-info-wrapper{ font-size:12px; }

/* delegated LearnDash course list (section) → ZedArch cards */
.pepro-zch .zch-section .course-cart-wrapper{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.pepro-zch .zch-section .course-cart{ border:1px solid var(--g200); border-radius:14px; overflow:hidden; background:#fff; transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.pepro-zch .zch-section .course-cart:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -26px rgba(31,42,55,.3); }
.pepro-zch .zch-section .course-image-wrapper img.course-img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.pepro-zch .zch-section .course-title-wrapper{ padding:13px 15px 0; }
.pepro-zch .zch-section .course-title-wrapper h3{ font-size:15px; font-weight:600; color:var(--ink); margin:0; }
.pepro-zch .zch-section .course-cart .course-info-wrapper{ padding:8px 15px 15px; }