/* Hiloarte · papel marrom-cremoso: variáveis do tema claro, espelho de ds/hiloarte/tokens.json, e base das telas */
:root{
  --surface-000:#efe6d8;--surface-100:#f7f1e6;--surface-200:#e4d8c4;
  --line:#d4c5ad;--line-strong:#8a775f;
  --ink:#3b2a1e;--ink-muted:#6e5a48;--ink-faint:#75624f;
  --brand:#7a3b1e;--brand-strong:#5c2b14;--brand-soft:#ecd9c6;--on-brand:#f7f1e6;
  --accent:#c98a2e;--accent-ink:#7a5210;--accent-soft:#f1e2c4;--on-accent:#3b2a1e;
  --success:#1f6b5e;--success-soft:#d9e8dc;--warning:#8a5a00;--warning-soft:#f1e2c4;
  --danger:#a63d2a;--danger-soft:#f0d9d0;--info:#3f5a8a;--info-soft:#dde2ec;
  --focus:#7a3b1e;--scrim:#3b2a1e99;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px;
  --shadow-sm:0 1px 0 #3b2a1e1f;--shadow-md:0 2px 0 #3b2a1e1a,0 12px 24px #3b2a1e12;
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --font-sans:var(--font-serif);
}
.tela{position:relative;width:390px;height:844px;box-sizing:border-box;background:var(--surface-000);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:22px;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
.tela *{box-sizing:border-box}
.tela::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:multiply;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");background-size:200px 200px}
.tela a:not(.hl-btn){color:var(--brand);text-decoration:none}
.tela a:not(.hl-btn):hover{color:var(--brand-strong)}
.rolagem{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.rolagem>*{flex:none}
.h-tela{margin:0;font-family:var(--font-display);font-variation-settings:"opsz" 72,"SOFT" 100;font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.h-secao{margin:0;font-family:var(--font-display);font-variation-settings:"opsz" 24,"SOFT" 100;font-size:18px;line-height:24px;font-weight:600;color:var(--ink)}
.h-titulo{margin:0;font-family:var(--font-display);font-variation-settings:"opsz" 36,"SOFT" 100;font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.legenda{margin:0;font-size:12px;line-height:16px;color:var(--ink-muted)}
.apoio{margin:0;font-size:13px;line-height:18px;color:var(--ink-muted)}
.eyebrow{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:600;font-size:14px}
.link-secao{font-size:13px;line-height:18px;font-weight:600}
.filtro{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface-100);color:var(--ink);font:600 13px/16px var(--font-sans);white-space:nowrap;text-decoration:none}
.filtro--ativo{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.nav-fixa{flex:none;padding-bottom:18px}
.tela .hl-nav{box-shadow:none}
.tela .hl-reel--generating{box-shadow:none;border-color:var(--accent)}

.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px;border-radius:var(--radius-pill);background:var(--surface-200);border:1px solid var(--line)}
.seg__item{display:flex;align-items:center;justify-content:center;min-height:36px;border-radius:var(--radius-pill);font:600 14px/18px var(--font-serif);color:var(--ink-muted);text-decoration:none}
.seg__item--ativo{background:var(--surface-100);color:var(--ink);border:1px solid var(--line)}
.gp-anel{fill:none;stroke:var(--ink);stroke-width:1.5}
.gp-done path,.gp-done ellipse{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.gp-now path,.gp-now ellipse{fill:none;stroke:var(--brand);stroke-width:1.9;stroke-linecap:round}
.gp-next path,.gp-next ellipse{fill:none;stroke:var(--ink-muted);stroke-width:1.3;stroke-linecap:round;opacity:.55}
.gp-ring{fill:none;stroke:var(--brand);stroke-width:1;stroke-dasharray:2 4;opacity:.6}

/* BalaoChat */
.hl-chat{display:flex;flex-direction:column;gap:var(--space-3)}
.hl-chat__dia{align-self:center;font:600 11px/16px var(--font-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--surface-200)}
.hl-balao{max-width:84%;padding:10px 14px;font:400 15px/22px var(--font-serif);color:var(--ink);white-space:pre-line}
.hl-balao--artesa{align-self:flex-end;background:var(--brand-soft);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg)}
.hl-balao--ajudante{align-self:flex-start;background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm)}
.hl-balao b{font-weight:600}
.hl-balao ul{margin:var(--space-2) 0 0;padding-left:18px}
.hl-balao li{margin:0 0 var(--space-1)}
.hl-chat__passo{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-1);font:400 12px/16px var(--font-serif);color:var(--accent-ink)}
.hl-chat__hora{align-self:flex-end;font:400 11px/16px var(--font-serif);color:var(--ink-faint);margin-top:-6px}
.hl-chat__hora--ajudante{align-self:flex-start}
.hl-acao{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-lg)}
.hl-acao__label{display:inline-flex;align-items:center;gap:var(--space-1);font:600 11px/16px var(--font-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.hl-acao__resumo{margin:0;font:600 15px/22px var(--font-serif);color:var(--ink)}
.hl-acao__detalhe{margin:0;font:400 13px/18px var(--font-serif);color:var(--ink-muted)}
.hl-acao__actions{display:flex;gap:var(--space-2);flex-wrap:wrap;padding-top:var(--space-1)}
.hl-acao--feita{background:var(--surface-100);border-color:var(--line)}
.hl-acao--feita .hl-acao__label{color:var(--success)}
.hl-chat__rodape{flex:none;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) var(--space-4) 28px;background:var(--surface-000);border-top:1px solid var(--line)}
.hl-pergunta__mic{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink-muted);display:grid;place-items:center;cursor:pointer}

.hl-nav__item--destaque .ico{width:48px;height:32px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink)}
.hl-nav__item--destaque{color:var(--accent-ink)}
.hl-nav__item--destaque[aria-current="page"]{color:var(--accent-ink)}
.hl-nav__item--destaque[aria-current="page"] .ico{background:var(--accent);color:var(--on-accent)}

/* OfertaFornecedor */
.hl-oferta{display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-lg)}
.hl-oferta--melhor{border-color:var(--brand)}
.hl-oferta__nome{margin:0;font:600 15px/20px var(--font-serif);color:var(--ink)}
.hl-oferta__quem{margin:0;font:400 13px/18px var(--font-serif);color:var(--ink-muted)}
.hl-oferta__preco{font:700 17px/22px var(--font-serif);color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.hl-oferta__preco small{display:block;font:400 12px/16px var(--font-serif);color:var(--ink-muted)}
.hl-oferta__facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-3);font:400 12px/16px var(--font-serif);color:var(--ink-muted)}
.hl-oferta__actions{grid-column:1/-1;display:flex;gap:var(--space-2);align-items:center;justify-content:space-between}
.hl-falta{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-4);background:var(--warning-soft);border:1px solid var(--line);border-radius:var(--radius-lg)}
.hl-falta__titulo{margin:0;font:600 15px/20px var(--font-serif);color:var(--warning)}
.hl-falta__texto{margin:0;font:400 13px/18px var(--font-serif);color:var(--ink)}