/* Área do cliente — Lucas Cardoso Teixeira */
:root {
  --bg: #f4f5f7; --surface: #fff; --ink: #0b0d12; --ink2: #3b4250; --muted: #5d6676; --line: #e3e6eb; --line2: #eef0f3;
  --accent: #3d5cff; --accent-ink: #fff; --accent-soft: #eef1ff;
  --ok: #0d7a4f; --ok-soft: #e5f5ee; --warn: #9a5b00; --warn-soft: #fff3df; --bad: #b42318; --bad-soft: #fdecea; --info: #2a4bd8; --info-soft: #eaf0ff;
  --r: 14px; --r-sm: 10px; --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 26px; font-weight: 600; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-muted { color: var(--muted); }
.cx-small { font-size: 13px; }
[hidden] { display: none !important; }

/* botões e campos */
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; white-space: nowrap; }
.cx-btn:hover { border-color: #c9ced7; background: #fafbfc; }
.cx-btn:active { transform: translateY(1px); }
.cx-btn:disabled { opacity: .55; cursor: default; }
.cx-btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.cx-btn.primary:hover { background: #262b36; }
.cx-btn.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.cx-btn.ok:hover { background: #0a6943; }
.cx-btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.cx-btn.danger.ghost { background: var(--surface); color: var(--bad); border-color: #f1c4bf; }
.cx-btn.danger.ghost:hover { background: var(--bad-soft); }
.cx-btn.ghost { background: transparent; }
.cx-btn.sm { min-height: 34px; padding: 5px 12px; font-size: 13.5px; }
.cx-btn.lg { min-height: 48px; padding: 10px 22px; font-size: 15.5px; }
.cx-attach:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink2); }
input, select, textarea { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid #d5d9e0; border-radius: var(--r-sm); padding: 10px 12px; min-height: 44px; }
textarea { resize: vertical; line-height: 1.5; }
textarea.drag { border-color: var(--accent); background: var(--accent-soft); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 92, 255, .16); }
.cx-stack { display: grid; gap: 14px; }
.cx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-grid2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.cx-lbl { font-weight: 600; }

/* login */
.cx-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 50% -10%, #e8ecff 0, transparent 60%), var(--bg); }
.cx-authcard { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px; box-shadow: 0 20px 50px -20px rgba(16, 24, 40, .18); }
.cx-authlogo { display: block; height: auto; margin-bottom: 22px; }
.cx-authcard h1 { font-size: 24px; margin-bottom: 6px; }
.cx-authcard .cx-stack { margin-top: 20px; }
.cx-authcard .cx-btn { width: 100%; min-height: 46px; }
.cx-authcard .cx-small { margin: 18px 0 0; text-align: center; color: var(--muted); }
.cx-alert { margin-top: 16px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad); font-size: 14px; }
.cx-alert.ok { background: var(--ok-soft); color: var(--ok); }

/* estrutura */
.cx-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 12px max(20px, calc((100vw - 1080px) / 2)); background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--line); }
.cx-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.cx-brand img { display: block; height: 34px; width: auto; }
.cx-brand span { font-size: 13px; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line); }
.cx-nav { display: flex; gap: 4px; margin-left: auto; }
.cx-nav a { position: relative; padding: 8px 12px; border-radius: 999px; color: var(--ink2); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.cx-nav a:hover { background: var(--line2); }
.cx-nav a.on { background: var(--ink); color: #fff; }
.cx-out { color: var(--muted); font-size: 14px; text-decoration: none; }
.cx-out:hover { color: var(--ink); }
.cx-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; }
.cx-view { max-width: 1080px; margin: 0 auto; padding: 28px 20px 120px; display: grid; gap: 18px; outline: none; }
.cx-tabbar { display: none; }

/* cartões */
.cx-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); display: grid; gap: 14px; min-width: 0; }
.cx-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-hello h1 { font-size: 28px; }
.cx-hello p { margin: 4px 0 0; }
.cx-sec { font-size: 15px; color: var(--muted); font-weight: 500; margin: 8px 0 -6px; }
.cx-crumb { color: var(--muted); text-decoration: none; font-size: 14px; justify-self: start; }
.cx-crumb:hover { color: var(--ink); }
.cx-empty { margin: 0; padding: 18px; text-align: center; color: var(--muted); background: var(--line2); border-radius: var(--r-sm); font-size: 14px; }
.cx-loading { display: flex; gap: 6px; justify-content: center; padding: 60px 0; }
.cx-loading span { width: 8px; height: 8px; border-radius: 50%; background: #c3c8d2; animation: cxdot 1s infinite ease-in-out; }
.cx-loading span:nth-child(2) { animation-delay: .15s; } .cx-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes cxdot { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* indicadores */
.cx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cx-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--ink2); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.cx-stat:hover { border-color: #c9ced7; transform: translateY(-1px); }
.cx-stat b { font-size: 26px; font-weight: 600; color: var(--ink); min-width: 28px; }
.cx-stat span { font-size: 14px; line-height: 1.35; }
.cx-stat.hl { background: var(--warn-soft); border-color: #f3d39b; }
.cx-stat.hl b { color: var(--warn); }
.cx-stat.act { background: var(--ink); border-color: var(--ink); color: #fff; }
.cx-stat.act b { color: #fff; }

/* status */
.cx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--line2); color: var(--ink2); }
.cx-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ps-ativo, .es-producao, .cs-andamento { background: var(--info-soft); color: var(--info); }
.ps-concluido, .es-aprovado, .cs-resolvido { background: var(--ok-soft); color: var(--ok); }
.es-revisao, .cs-aberto { background: var(--warn-soft); color: var(--warn); }
.es-ajustes { background: var(--bad-soft); color: var(--bad); }
.ps-pausado { background: var(--line2); color: var(--muted); }

/* projetos */
.cx-projs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cx-proj { display: grid; gap: 12px; padding: 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .2s, transform .2s; }
.cx-proj:hover { border-color: #c9ced7; box-shadow: 0 12px 30px -16px rgba(16, 24, 40, .25); transform: translateY(-2px); }
.cx-proj-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cx-proj-h > div { flex: 1; min-width: 0; }
.cx-proj-h h3 { font-size: 17px; }
.cx-fase { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.cx-fase b { color: var(--ink); font-weight: 600; }
.cx-proj-f { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.cx-flag { font-size: 13px; font-weight: 600; color: var(--warn); background: var(--warn-soft); padding: 6px 10px; border-radius: 8px; }
.cx-bar { height: 8px; border-radius: 99px; background: var(--line2); overflow: hidden; }
.cx-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #7b8dff); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.cx-phead h1 { font-size: 24px; }
.cx-desc { margin: 0; color: var(--ink2); white-space: pre-line; }
.cx-pmeta { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.cx-pmeta div { display: grid; gap: 2px; }
.cx-pmeta span { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cx-pmeta b { font-size: 16px; font-weight: 600; }

/* fases */
.cx-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.cx-steps li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12.5px; color: var(--muted); padding: 0 2px; }
.cx-steps li::before { content: ''; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.cx-steps li:first-child::before { display: none; }
.cx-steps li.done::before, .cx-steps li.now::before { background: var(--accent); }
.cx-steps .dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.cx-steps .done .dot { background: var(--accent); border-color: var(--accent); }
.cx-steps .now .dot { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(61, 92, 255, .18); animation: cxpulse 2s infinite; }
.cx-steps .now { color: var(--ink); font-weight: 600; }
@keyframes cxpulse { 50% { box-shadow: 0 0 0 7px rgba(61, 92, 255, .08); } }

/* listas e entregas */
.cx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; transition: border-color .15s; }
.cx-item:hover { border-color: #c9ced7; }
.cx-item-t { flex: 1; min-width: 0; display: grid; color: var(--ink); text-decoration: none; font-weight: 500; }
.cx-item-t small { color: var(--muted); font-weight: 400; font-size: 13px; }
.cx-item-t:hover { color: var(--accent); }
.cx-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--line2); }
.cx-ic svg { width: 18px; height: 18px; fill: var(--ink2); }
.cx-ic.lg { width: 48px; height: 48px; border-radius: 12px; }
.cx-ic.lg svg { width: 24px; height: 24px; }
.cx-group { display: grid; gap: 10px; }
.cx-group + .cx-group { margin-top: 8px; }
.cx-gh { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cx-dotnew { flex: none; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 99px; }
.cx-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cx-tags li { font-size: 13px; padding: 4px 10px; border-radius: 99px; background: var(--line2); }
.cx-ehead h1 { font-size: 22px; }
.cx-ehead .cx-btn.lg { justify-self: start; }
.cx-decide { border-width: 2px; }
.cx-decide.st-revisao { border-color: #f3d39b; background: linear-gradient(180deg, #fffaf0, #fff 60%); }
.cx-decide.st-aprovado { border-color: #b7e3cf; background: linear-gradient(180deg, #f2fbf6, #fff 60%); }
.cx-decide.st-ajustes { border-color: #f1c4bf; }
.cx-decide p { margin: 0; }
.cx-decide-b .cx-btn { min-height: 46px; padding: 10px 20px; }
.cx-adj { display: grid; gap: 10px; }
.cx-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-radius: var(--r); border: 1px dashed #c9ced7; color: var(--ink2); flex-wrap: wrap; }

/* atualizações */
.cx-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.cx-feed li { position: relative; padding: 10px 0 10px 20px; border-top: 1px solid var(--line2); }
.cx-feed li:first-child { border-top: 0; }
.cx-feed li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #c3c8d2; }
.cx-feed li.new::before { background: var(--accent); }
.cx-feed a, .cx-feed li > div { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.cx-feed a:hover .cx-feed-t { color: var(--accent); }
.cx-feed small { color: var(--muted); font-size: 12.5px; }
.cx-feed-t { white-space: pre-line; }

/* conversa */
.cx-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cx-msg { max-width: min(560px, 88%); padding: 12px 14px; border-radius: 14px; display: grid; gap: 6px; }
.cx-msg.them { background: var(--line2); border-top-left-radius: 4px; }
.cx-msg.me { justify-self: end; background: var(--accent-soft); border-top-right-radius: 4px; }
.cx-who { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.cx-who time { font-weight: 400; color: var(--muted); }
.cx-txt { white-space: pre-line; overflow-wrap: anywhere; }
.cx-sys { justify-self: center; display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); padding: 4px 12px; border-radius: 99px; text-align: center; flex-wrap: wrap; justify-content: center; }
.cx-shot { display: block; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; max-width: 320px; }
.cx-shot img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; object-position: top; }
.cx-shot.sm { max-width: 200px; }
.cx-compose { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line2); }
.cx-compose .cx-row { justify-content: space-between; }
.cx-prev { display: flex; align-items: center; gap: 12px; }
.cx-prev img { width: 120px; height: 80px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); }
.cx-lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(11, 13, 18, .86); }
.cx-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.cx-lbx { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

/* solicitar serviço */
.cx-cat { display: grid; gap: 18px; }
.cx-catg { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.cx-catg legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.cx-svc { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-weight: 400; color: var(--ink); transition: border-color .15s, background .15s; }
.cx-svc:hover { border-color: #c9ced7; }
.cx-svc.on { border-color: var(--accent); background: var(--accent-soft); }
.cx-svc input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.cx-svc span { display: grid; gap: 2px; }
.cx-svc b { font-weight: 600; font-size: 14.5px; }
.cx-svc small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.cx-sticky { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 12px 30px -12px rgba(16, 24, 40, .3); }
.cx-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.cx-dl dt { color: var(--muted); font-size: 14px; }
.cx-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.cx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translateX(-50%); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); animation: cxin .25s ease-out; transition: opacity .3s; max-width: calc(100vw - 32px); }
.cx-toast.bad { background: var(--bad); }
.cx-toast.out { opacity: 0; }
@keyframes cxin { from { opacity: 0; transform: translate(-50%, 8px); } }

/* celular */
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .cx-top { padding: 10px 16px; gap: 12px; }
  .cx-brand img { height: 28px; }
  .cx-nav { display: none; }
  .cx-out { margin-left: auto; }
  .cx-view { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); gap: 14px; }
  .cx-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .cx-tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; font-size: 11.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-radius: 10px; }
  .cx-tabbar svg { width: 22px; height: 22px; fill: currentColor; }
  .cx-tabbar a.on { color: var(--ink); }
  .cx-tabbar a.on svg { fill: var(--accent); }
  .cx-sticky { bottom: calc(76px + env(safe-area-inset-bottom)); }
  h1, .cx-hello h1 { font-size: 23px; }
  .cx-card { padding: 16px; border-radius: 12px; }
  .cx-stats { grid-template-columns: 1fr; gap: 8px; }
  .cx-stat { padding: 12px 14px; }
  .cx-grid2 { grid-template-columns: 1fr; }
  .cx-projs { grid-template-columns: 1fr; }
  .cx-item { flex-wrap: wrap; }
  .cx-item-t { flex-basis: calc(100% - 48px); }
  .cx-item .cx-btn { flex: 1; }
  .cx-steps { grid-template-columns: 1fr; gap: 0; }
  .cx-steps li { grid-template-columns: 16px 1fr; justify-items: start; text-align: left; gap: 12px; padding: 6px 0; font-size: 14px; }
  .cx-steps li::before { left: 7px; top: -50%; width: 2px; height: 100%; }
  .cx-decide-b .cx-btn { flex: 1 1 100%; }
  .cx-msg { max-width: 94%; }
  .cx-sticky { border-radius: 16px; padding: 10px; }
  .cx-sticky .cx-hint { display: none; }
  .cx-sticky .cx-btn { width: 100%; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* celular: campos com 16px para o iPhone não dar zoom ao tocar */
@media (max-width: 1024px), (pointer: coarse) { input, select, textarea, textarea.md, .tbl-precos input, .tbl-precos select, .qrow .qd input + input { font-size: 16px !important; } }