/* ═══════════════════════════════════════════════════════════════
   Client portal — /portal
   Rides the site's tokens from style.css (--bg, --cyan, --card,
   --line …). Everything here is prefixed `p` so it can never
   collide with a marketing-page class.
   ═══════════════════════════════════════════════════════════════ */

.portal-body { background: var(--bg); color: var(--text); }

/* An explicit `display` beats the HTML hidden attribute, and half the
   things this page hides carry one — the admin tab bar is display:inline-flex,
   so without this a CLIENT sees the admin tabs. Global, and !important,
   because every future hidden element inherits the same trap. */
.portal-body [hidden] { display: none !important; }

.pwrap { max-width: 900px; margin: 0 auto; padding: 34px 20px 80px; }

/* ── headings ─────────────────────────────────────────────── */
.phead { margin-bottom: 26px; }
.phead--row { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; }
.peyebrow { font-size: 11px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 10px; }
.ptitle { font-family: 'Racing Sans One', system-ui, sans-serif; font-weight: 400;
  font-size: clamp(28px, 5.2vw, 42px); line-height: 1.1; margin: 0; letter-spacing: .5px; }
.ptitle span { color: var(--cyan); }
.plede { color: var(--muted); margin: 14px 0 0; max-width: 56ch; }
.ph2 { font-family: 'Racing Sans One', system-ui, sans-serif; font-weight: 400;
  font-size: 19px; letter-spacing: .5px; margin: 0; }
.pmuted { color: var(--muted); }
.phint { font-size: 12.5px; color: #6B7399; }

/* ── cards ────────────────────────────────────────────────── */
.pcard { background: var(--card); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; }
.pcard--pad { padding: 22px; }

/* ── auth ─────────────────────────────────────────────────── */
.pauth { max-width: 440px; }
.pseg { display: flex; gap: 6px; background: var(--panel); border-radius: 10px;
  padding: 4px; margin-bottom: 20px; }
.pseg__btn { flex: 1; background: none; border: none; border-radius: 8px;
  padding: 9px; color: var(--muted); font: inherit; font-size: 13.5px;
  font-weight: 700; cursor: pointer; }
.pseg__btn.is-on { background: rgba(0,212,255,.14); color: var(--cyan); }

.pfield { margin-bottom: 15px; }
.plab { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #6B7399; margin-bottom: 7px; }
.pwrap input[type=text], .pwrap input[type=email], .pwrap input[type=password],
.pwrap textarea, .pwrap select {
  width: 100%; background: #0B0B1A; border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; padding: 11px 13px; color: var(--text); font: inherit;
  font-size: 14.5px; outline: none; resize: vertical; }
.pwrap input:focus, .pwrap textarea:focus, .pwrap select:focus {
  border-color: var(--cyan-deep); box-shadow: 0 0 0 3px rgba(0,212,255,.13); }
.pwrap ::placeholder { color: #4E5578; }
.prow { display: grid; grid-template-columns: 1fr 210px; gap: 14px; }

/* ── buttons ──────────────────────────────────────────────── */
.pbtn { border: none; border-radius: 9px; padding: 11px 22px; font: inherit;
  font-size: 14px; font-weight: 800; cursor: pointer; display: inline-block;
  text-decoration: none; text-align: center; }
.pbtn--primary { background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  color: #04121A; }
.pbtn--wide { width: 100%; margin-top: 4px; }
.pbtn--ghost { background: none; border: 1px solid rgba(255,255,255,.16);
  color: var(--muted); font-weight: 700; padding: 8px 15px; font-size: 13px; }
.pbtn--ghost:hover { border-color: var(--cyan-deep); color: var(--text); }
.pbtn--gap { margin-top: 16px; }
.pbtn:disabled { opacity: .45; cursor: not-allowed; }
.plink { display: block; margin: 14px auto 0; background: none; border: none;
  color: #6B7399; font: inherit; font-size: 12.5px; font-weight: 600;
  text-decoration: underline; cursor: pointer; }
.plink:hover { color: var(--cyan); }

/* ── messages ─────────────────────────────────────────────── */
.pmsg { border-radius: 9px; padding: 11px 14px; font-size: 13.5px;
  margin: 0 0 16px; border: 1px solid; }
.pmsg--bad { color: #FFC2CB; border-color: rgba(251,113,133,.4);
  background: rgba(251,113,133,.09); }
.pmsg--ok { color: #A9F0D3; border-color: rgba(52,211,153,.4);
  background: rgba(52,211,153,.09); }

/* ── admin bar ────────────────────────────────────────────── */
.padminbar { display: flex; align-items: center; gap: 10px; }
.padminbar .plab { margin: 0; white-space: nowrap; }
.padminbar select { min-width: 190px; }

/* ── new request ──────────────────────────────────────────── */
.pnew { margin-bottom: 8px; }
.pformfoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ── sections ─────────────────────────────────────────────── */
.psec { margin-top: 36px; }
.psec__head { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.pcount { font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  font-weight: 600; color: #6B7399; background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.09); border-radius: 999px;
  padding: 2px 10px; font-variant-numeric: tabular-nums; }

/* ── one request ──────────────────────────────────────────── */
.preq { border-left: 3px solid var(--gold); padding: 18px 20px; margin-bottom: 11px; }
.preq.is-done { border-left-color: #34D399; }
.preq.is-denied { border-left-color: #FB7185; opacity: .86; }
.preq__top { display: flex; justify-content: space-between; gap: 14px;
  align-items: flex-start; }
.preq__title { font-weight: 700; font-size: 16px; line-height: 1.35; }
.preq.is-done .preq__title, .preq.is-denied .preq__title { color: var(--muted); }
.preq.is-done .preq__title { text-decoration: line-through;
  text-decoration-color: rgba(52,211,153,.5); }
.preq__detail { color: var(--muted); font-size: 14px; margin-top: 7px;
  white-space: pre-wrap; }
.preq__meta { margin-top: 11px; font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px; color: #6B7399; display: flex; gap: 14px; flex-wrap: wrap; }
.ppill { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  border: 1px solid; }
.ppill--open { color: var(--gold); border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.1); }
.ppill--done { color: #34D399; border-color: rgba(52,211,153,.4);
  background: rgba(52,211,153,.1); }
.ppill--denied { color: #FB7185; border-color: rgba(251,113,133,.4);
  background: rgba(251,113,133,.1); }
.pruling { margin-top: 13px; padding: 11px 14px; border-radius: 9px;
  font-size: 13.5px; background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.09); color: var(--muted); }
.pruling b { color: var(--text); font-weight: 700; }
.pacts { margin-top: 15px; padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.12); display: flex; gap: 10px;
  flex-wrap: wrap; align-items: center; }
.pbtn--done { background: rgba(52,211,153,.11); border: 1px solid rgba(52,211,153,.4);
  color: #34D399; padding: 8px 15px; font-size: 13px; font-weight: 700; }
.pbtn--done:hover { background: rgba(52,211,153,.2); }
.pbtn--deny { background: none; border: 1px solid rgba(255,255,255,.14);
  color: #FB7185; padding: 8px 15px; font-size: 13px; font-weight: 700; }
.pbtn--deny:hover { border-color: rgba(251,113,133,.45); }
.pdeny { margin-top: 12px; display: flex; gap: 9px; flex-wrap: wrap; }
.pdeny input { flex: 1; min-width: 200px; }

.pempty { padding: 28px 22px; text-align: center; color: #6B7399; font-size: 14px;
  border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; }

/* ── admin: view switch ───────────────────────────────────── */
.ptabs { display: inline-flex; gap: 6px; background: var(--panel);
  border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 4px;
  margin-bottom: 26px; }
.ptabs__btn { background: none; border: none; border-radius: 8px; padding: 9px 18px;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; }
.ptabs__btn.is-on { background: rgba(0,212,255,.14); color: var(--cyan); }

/* ── admin: one person ────────────────────────────────────── */
.prow-user { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 18px; margin-bottom: 9px; }
.prow-user__who { flex: 1 1 210px; min-width: 0; }
.prow-user__name { font-weight: 700; font-size: 14.5px; }
.prow-user__mail { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
  color: #6B7399; overflow: hidden; text-overflow: ellipsis; }
.prow-user__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prow-user select { width: auto; min-width: 150px; padding: 8px 11px; font-size: 13px; }
.ptag { font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  border: 1px solid; white-space: nowrap; }
.ptag--admin { color: var(--violet); border-color: rgba(139,92,246,.45);
  background: rgba(139,92,246,.12); }
.ptag--client { color: var(--cyan); border-color: rgba(0,212,255,.35);
  background: rgba(0,212,255,.1); }
.ptag--wait { color: var(--gold); border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.1); }
.pbtn--sm { padding: 8px 14px; font-size: 13px; font-weight: 700; }
.pbtn--danger { background: none; border: 1px solid rgba(255,255,255,.14);
  color: #FB7185; }
.pbtn--danger:hover { border-color: rgba(251,113,133,.45); }

/* ── admin: one client ────────────────────────────────────── */
.prow-client { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 9px; }
.prow-client__id { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
  color: #6B7399; }

/* ── CRM: summary tiles ───────────────────────────────────── */
.ptiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 28px; }
.ptile { background: var(--card); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 18px 20px; }
.ptile__lab { font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #6B7399; margin-bottom: 10px; }
.ptile__num { font-family: 'Racing Sans One', system-ui, sans-serif; font-size: 30px;
  line-height: 1; font-variant-numeric: tabular-nums; }
.ptile__note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.ptile.is-alert { border-color: rgba(251,113,133,.45); }
.ptile.is-alert .ptile__num { color: #FB7185; }

/* ── CRM: a business in the list ──────────────────────────── */
.pbiz { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 9px; cursor: pointer; text-align: left;
  width: 100%; background: var(--card); border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid rgba(255,255,255,.14); border-radius: 14px;
  font: inherit; color: inherit; }
.pbiz:hover { border-color: rgba(0,212,255,.4); }
.pbiz.is-late { border-left-color: #FB7185; }
.pbiz.is-paid { border-left-color: #34D399; }
.pbiz.is-off  { opacity: .6; }
.pbiz__who { flex: 1 1 200px; min-width: 0; }
.pbiz__name { font-weight: 700; font-size: 15.5px; }
.pbiz__sub { font-size: 12px; color: #6B7399; margin-top: 3px; }
.pbiz__money { font-family: ui-monospace, Consolas, monospace; font-weight: 600;
  font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── CRM: payments ────────────────────────────────────────── */
.ppay { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 13px 18px; margin-bottom: 8px; }
.ppay__amt { font-family: ui-monospace, Consolas, monospace; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.ppay__meta { font-size: 12px; color: #6B7399; }

.prow--3 { grid-template-columns: repeat(3, 1fr); }
.pchecks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pchecks label { display: flex; align-items: center; gap: 7px; font-size: 14px;
  color: var(--muted); cursor: pointer; }
.pchecks input { width: auto; accent-color: var(--cyan); }
.plink--back { margin: 0 0 18px; text-align: left; }

.pbadge { display: inline-block; min-width: 19px; padding: 1px 6px; margin-left: 6px;
  border-radius: 999px; background: #FB7185; color: #23070C; font-size: 11px;
  font-weight: 800; font-variant-numeric: tabular-nums; }

.ptag--paid { color: #34D399; border-color: rgba(52,211,153,.4);
  background: rgba(52,211,153,.1); }
.ptag--late { color: #FB7185; border-color: rgba(251,113,133,.4);
  background: rgba(251,113,133,.1); }
.ptag--off { color: #6B7399; border-color: rgba(255,255,255,.14); }

@media (max-width: 720px) { .prow--3 { grid-template-columns: 1fr; } }

/* ── connections (no secrets live here) ───────────────────── */
.pnotice { border: 1px solid rgba(251,191,36,.35); background: rgba(251,191,36,.07);
  border-radius: 11px; padding: 14px 17px; font-size: 13.5px; color: var(--muted);
  margin-bottom: 14px; line-height: 1.6; }
.pnotice b { color: var(--gold); }
.pmono { font-family: ui-monospace, Consolas, monospace; color: var(--cyan);
  word-break: break-all; }
.pconn__row { display: grid; grid-template-columns: 1fr 230px 128px; gap: 12px;
  align-items: end; padding: 15px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.pconn__row:last-of-type { border-bottom: 0; }
.pconn__what { min-width: 0; }
.pconn__name { font-weight: 700; font-size: 14.5px; }
.pconn__how { font-size: 12.5px; color: #6B7399; margin-top: 3px; line-height: 1.5; }
.pconn__how a { color: var(--cyan); }
.pconn__got { display: flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap;
  padding-bottom: 11px; }
.pconn__got input { width: auto; accent-color: #34D399; }
@media (max-width: 720px) {
  .pconn__row { grid-template-columns: 1fr; gap: 8px; }
  .pconn__got { padding-bottom: 0; }
}

/* ── invite code on a client row ──────────────────────────── */
.pinvite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; }
.pinvite code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  background: var(--panel); border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; padding: 5px 10px; color: var(--cyan); letter-spacing: .06em; }
.pinvite .phint { font-size: 11.5px; }

/* ── messages ─────────────────────────────────────────────── */
.pthread { background: var(--card); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 18px; max-height: 52vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; }
.pmsgrow { display: flex; }
.pmsgrow.is-mine { justify-content: flex-end; }
.pbubble { max-width: 76%; padding: 11px 14px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.5; white-space: pre-wrap;
  background: var(--panel-2); border: 1px solid rgba(255,255,255,.09); }
.pmsgrow.is-mine .pbubble { background: rgba(0,212,255,.13);
  border-color: rgba(0,212,255,.3); }
.pbubble__who { font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #6B7399; margin-bottom: 5px; }
.pmsgrow.is-mine .pbubble__who { color: var(--cyan); }
.pbubble__at { font-size: 11px; color: #6B7399; margin-top: 6px;
  font-family: ui-monospace, Consolas, monospace; }
.pcompose { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; }
.pcompose textarea { flex: 1; }
.pnew-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); margin-left: 7px; vertical-align: middle; }

/* ── one thread in the admin list ─────────────────────────── */
.pthreadrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--card); border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 9px; }
.pthreadrow:hover { border-color: rgba(0,212,255,.4); }
.pthreadrow.is-unread { border-left-color: var(--cyan); }
.pthreadrow__who { flex: 1 1 220px; min-width: 0; }
.pthreadrow__name { font-weight: 700; font-size: 15.5px; }
.pthreadrow__last { font-size: 12.5px; color: #6B7399; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pthreadrow__at { font-size: 11.5px; color: #6B7399;
  font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }

/* ── footer ───────────────────────────────────────────────── */
.pfoot { max-width: 900px; margin: 0 auto; padding: 22px 20px 40px;
  border-top: 1px solid rgba(255,255,255,.09); display: flex;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: #6B7399; }
.pfoot a { color: var(--cyan); text-decoration: none; }

@media (max-width: 620px) {
  .prow { grid-template-columns: 1fr; }
  .phead--row { align-items: flex-start; }
}
.pconnect{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;}

/* ── photos and video ─────────────────────────────────────── */
/* The drop zone reads as an invitation, not a field: dashed, tinted, and
   it lights up under a dragged file so the drop is obviously landing. */
.pdrop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed rgba(0,212,255,.35); border-radius: 12px; padding: 12px 14px;
  background: rgba(0,212,255,.04); transition: border-color .15s, background .15s; }
.pdrop.is-over { border-color: var(--cyan); background: rgba(0,212,255,.13); }
.pdrop .phint { flex: 1 1 240px; margin: 0; }

.pstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pstrip:empty { margin-top: 0; }
.pcompose + .pstrip, .pstrip:has(+ .pcompose) { margin-top: 12px; }

.pchip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: var(--card); border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px; padding: 5px 5px 5px 12px; font-size: 12.5px; }
.pchip__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.pchip__s { color: #6B7399; font-variant-numeric: tabular-nums; }
.pchip__x { background: none; border: 0; color: #6B7399; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 8px; border-radius: 999px; }
.pchip__x:hover { color: #fff; background: rgba(255,255,255,.12); }

.pprog { flex: 1 1 100%; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.1); overflow: hidden; }
.pprog__bar { height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #00d4ff, #8b5cf6); transition: width .2s; }
.pupnote { flex: 1 1 100%; font-size: 12.5px; color: #9aa3c7;
  font-variant-numeric: tabular-nums; }

.pfiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pfile { display: block; width: 116px; height: 116px; border-radius: 10px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.13); background: #0A0A1A; }
.pfile:hover { border-color: rgba(0,212,255,.55); }
.pfile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Video sizes to itself — a clip cropped square is a clip you cannot read. */
.pfile--vid { width: 100%; max-width: 330px; height: auto; padding: 6px; }
.pfile--vid video { width: 100%; display: block; border-radius: 7px; background: #000; }
.pfile__save { display: block; font-size: 12px; color: #9aa3c7; margin-top: 6px;
  padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfile__save:hover { color: var(--cyan); }

/* Inside a bubble the thumbnails go smaller — the message is the subject,
   the photos are what came with it. */
.pbubble .pfiles { margin-top: 9px; gap: 6px; }
.pbubble .pfile { width: 92px; height: 92px; }
.pbubble .pfile--vid { width: 100%; max-width: 260px; height: auto; }

@media (max-width: 560px) {
  .pfile { width: calc(50% - 4px); height: 132px; }
  .pcompose { flex-wrap: wrap; }
  .pcompose textarea { flex: 1 1 100%; }
}