/* Sistema de Pedidos Sollus — mesma identidade do site e do painel: marfim, preto Sollus e champagne. */
:root {
  --brand: #161413; --brand-600: #000; --brand-50: #f3ece2; --brand-100: #e6d9c6;
  --gold: #a8845a; --gold-deep: #7d6040; --flame: #b4533f; --night: #141211; --ink: #161413; --ink-2: #3f3a35; --muted: #877c70;
  --line: #ece5da; --line-2: #ddd3c4; --bg: #f7f3ec; --white: #fffdf9; --ok: #4d7a55; --warn: #c08a2e; --wa: #1f9d55;
  --r: 14px; --r-lg: 22px;
  --sh-1: 0 1px 2px rgb(22 20 19 / .04); --sh-2: 0 1px 2px rgb(22 20 19 / .03), 0 16px 32px -18px rgb(22 20 19 / .22);
  --sh-3: 0 40px 90px -30px rgb(22 20 19 / .45);
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.32, .72, 0, 1);
  --ff: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-d: "Cormorant", Georgia, serif;
}
@font-face { font-family: "Jost"; src: url(jost.woff2) format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(cormorant-garamond.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(cormorant-garamond-italic.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 14.5px/1.55 var(--ff); letter-spacing: .005em; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--ff-d); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
code { font-size: 12.5px; background: var(--bg); padding: 2px 6px; border-radius: 6px; }
[hidden] { display: none !important; }
.i { width: 20px; height: 20px; flex: none; }
.i-sm { width: 16px; height: 16px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 2px; }

/* layout */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--night); color: rgb(250 247 242 / .66); padding: 22px 14px; overflow-y: auto; z-index: 50; }
.side__brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.side__brand img { height: 34px; width: auto; }
.side__brand strong { color: #fff; font-family: var(--ff-d); font-size: 18px; }
.side__brand span { font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(250 247 242 / .2); color: #d9c3a3; }
.side__label { font-size: 10px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #a8845a; margin: 18px 12px 6px; }
.side__nav { display: grid; gap: 2px; }
.side__link { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 999px; font-weight: 400; transition: background-color .3s var(--ease), color .3s var(--ease); }
.side__link:hover { background: rgb(255 255 255 / .06); color: #fff; }
.side__link.is-on { background: #faf7f2; color: var(--ink); }
.side__link .i { width: 18px; height: 18px; opacity: .85; stroke-width: 1.5; }
.side__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--flame); color: #fff; font-size: 11px; display: grid; place-items: center; }
.side__foot { margin-top: auto; display: flex; align-items: center; gap: 6px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .08); }
.side__user { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; min-width: 0; }
.side__user:hover { background: rgb(255 255 255 / .06); }
.side__user strong { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__user small { font-size: 12px; }
.side__foot .iconbtn { color: rgb(255 255 255 / .6); }
.side__foot .iconbtn:hover { background: rgb(255 255 255 / .08); color: #fff; }
.avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #c9ab82, #8d6c47); color: #fff; font-weight: 500; font-size: 14px; }
.avatar--sm { width: 26px; height: 26px; font-size: 12px; display: inline-grid; vertical-align: middle; }
.side-backdrop { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 32px; background: rgb(247 243 236 / .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__menu { display: none; }
.top__status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.top__act { margin-left: auto; display: flex; gap: 8px; }
.content { padding: 32px; max-width: 1320px; width: 100%; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot--ok { background: var(--ok); box-shadow: 0 0 0 3px rgb(22 163 74 / .15); }
.dot--busy { background: var(--warn); animation: pulse 1s infinite; }
.dot--err { background: var(--flame); }
.dot--new { background: var(--flame); }
@keyframes pulse { 50% { opacity: .4; } }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .4s var(--spring); background: var(--white); }
.btn:active { transform: scale(.98); }
.btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn--lg { height: 48px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--ink); color: #faf7f2; box-shadow: 0 10px 24px -14px rgb(22 20 19 / .8); }
.btn--primary:hover { background: #000; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #1e293b; }
.btn--ghost { border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink-2); }
.btn--danger { background: var(--flame); color: #fff; }
.btn--wa { background: var(--wa); color: #fff; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }
.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); transition: background-color .15s, color .15s; }
.iconbtn:hover { background: var(--line); color: var(--ink); }
.iconbtn--sm { width: 32px; height: 32px; }
.iconbtn--danger:hover { background: #f6e3de; color: var(--flame); }
.link { color: var(--gold-deep); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* cabeçalho de tela */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 40px; font-weight: 500; letter-spacing: -.015em; }
.page-head p { margin-top: 6px; max-width: 70ch; }
.page-head--sticky { position: sticky; top: 64px; z-index: 20; background: var(--bg); padding: 14px 0; margin: -14px 0 14px; border-bottom: 1px solid transparent; }
.page-head--sticky.is-stuck { border-color: var(--line); }
.page-head__act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.count { font-size: 14px; font-weight: 400; color: var(--muted); background: var(--line); padding: 2px 10px; border-radius: 999px; vertical-align: middle; font-family: var(--ff); }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.back:hover { color: var(--gold-deep); }

/* cards */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-1); }
.card + .card { margin-top: 16px; }
.card--flush { padding: 0; overflow: hidden; }
.card--note { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; background: var(--brand-50); border-color: var(--brand-100); color: var(--ink-2); }
.card--note .i { color: var(--gold-deep); margin-top: 2px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card__head h2, .card__title { font-size: 24px; font-weight: 500; }
.card__title { margin-bottom: 14px; }
.card__sub { font-size: 14px; margin: 22px 0 10px; font-family: var(--ff); font-weight: 700; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid2 > .card + .card { margin-top: 0; }
.narrow { max-width: 520px; display: grid; gap: 14px; }
.empty { display: grid; justify-items: center; gap: 12px; padding: 48px 20px; text-align: center; color: var(--muted); }
.empty__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-50); color: var(--gold-deep); }
.empty-note { color: var(--muted); padding: 12px 0; }
.pill { font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: var(--brand-50); color: var(--gold-deep); }
.alert { padding: 12px 14px; border-radius: 10px; font-weight: 500; }
.alert--err { background: #fef2f2; color: #b91c1c; }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .04em; background: var(--brand-50); color: var(--gold-deep); white-space: nowrap; }
.tag--ok { background: #dcfce7; color: #166534; }
.tag--muted { background: var(--line); color: var(--muted); }
.tag--contato { background: #e0f2fe; color: #075985; }
.tag--trabalhe { background: #fef3c7; color: #92400e; }
.tag--fidelidade { background: #fce7f3; color: #9d174d; }

/* dashboard */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.quick__i { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s, border-color .2s; }
.quick__i:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: transparent; }
.quick__ic { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #fff; }
.quick__ic--flame { background: linear-gradient(135deg, var(--flame), #ff7a1a); }
.quick__ic--dark { background: var(--night); }
.quick__ic--soft { background: var(--brand-50); color: var(--brand); }
.quick__i strong { font-size: 14.5px; }
.quick__i small { color: var(--muted); font-size: 12.5px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { display: grid; gap: 2px; padding: 18px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.kpi small { color: var(--muted); font-weight: 400; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.kpi strong { font-family: var(--ff-d); font-size: 46px; font-weight: 400; letter-spacing: -.02em; line-height: 1; margin: 6px 0; }
.kpi a { font-size: 11px; color: var(--gold-deep); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 150px; align-items: end; }
.bars__c { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; }
.bars__c span { align-self: end; border-radius: 999px; background: linear-gradient(180deg, #c9ab82, var(--gold-deep)); min-height: 3px; }
.bars__c span.is-zero { background: var(--line); }
.bars__c small { font-size: 11px; color: var(--muted); }
.rank { display: grid; gap: 10px; }
.rank li { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
.rank li > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank__bar { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.rank__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), #c9ab82); }
.feed { display: grid; }
.feed li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border: 0; }
.feed__t { display: grid; flex: 1; min-width: 0; }
.feed__t small { color: var(--muted); font-size: 12.5px; }
.feed--act .feed__t > span { font-size: 13.5px; }
.health { display: grid; gap: 6px; }
.health a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg); transition: background-color .15s; }
.health a:hover { background: var(--brand-50); }
.health a > .i:first-child { color: var(--warn); }
.health span { flex: 1; display: grid; }
.health small { color: var(--muted); font-size: 12.5px; }

/* tabelas */
.toolbar { display: flex; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.searchbox { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--bg); border: 1px solid transparent; }
.searchbox:focus-within { border-color: var(--brand); background: #fff; }
.searchbox input { border: 0; background: transparent; flex: 1; outline: 0; min-width: 0; }
.searchbox .i { color: var(--muted); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbf8f3; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: #fbf8f3; }
.tbl tr.is-dragging { opacity: .5; background: var(--brand-50); }
.tbl tr.is-hidden-row { display: none; }
.tbl tr[data-active="0"] .tbl__title { color: var(--muted); }
.tbl__grip { width: 34px; color: var(--line-2); cursor: grab; }
.tbl__grip:active { cursor: grabbing; }
tr:hover .tbl__grip { color: var(--muted); }
.tbl__title { font-weight: 500; display: block; }
.tbl__title:hover { color: var(--gold-deep); }
.tbl .tag { margin-top: 3px; }
.col-image, .col-image_desktop, .col-photo, .col-logo { width: 64px; }
.col-image_desktop { width: 120px; }
.col-image_mobile { width: 64px; }
.col-image_mobile .thumb { width: 44px; height: 50px; object-fit: cover; }
.col-active { width: 70px; }
.col-act { width: 150px; }
.thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.col-image_desktop .thumb, .col-photo .thumb { width: 96px; object-fit: cover; }
.thumb--ph { display: grid; place-items: center; color: var(--muted); }
.rowact { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }

/* switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch > span { width: 40px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; transition: background-color .2s; flex: none; }
.switch > span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform .2s cubic-bezier(.3, .7, .3, 1.3); }
.switch input:checked + span { background: var(--ink); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 1.5px solid var(--gold); outline-offset: 2px; }
.switch--sm > span { width: 34px; height: 20px; }
.switch--sm > span::after { width: 14px; height: 14px; }
.switch--sm input:checked + span::after { transform: translateX(14px); }
.switch--label b { font-weight: 600; font-size: 14px; }

/* formulários */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.f { display: grid; gap: 6px; align-content: start; min-width: 0; }
.f--full, .f--heading { grid-column: 1 / -1; }
.f__l { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.f__l small { font-weight: 500; color: var(--muted); }
.f__help { font-size: 12.5px; color: var(--muted); }
.f--heading { padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
.f--heading:first-child { border: 0; padding-top: 0; margin: 0; }
.f--heading h3 { font-size: 24px; }
.f.is-invalid .inp { border-color: var(--flame); box-shadow: 0 0 0 3px rgb(227 38 43 / .12); }
.counter { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.counter.is-over { color: var(--flame); }
.counter.is-good { color: var(--ok); }
.inp { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #fffefb; transition: border-color .15s, box-shadow .15s; font-size: 14.5px; }
.inp:hover { border-color: #c9bca8; }
.inp:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(168 132 90 / .16); }
.inp:disabled { background: var(--bg); color: var(--muted); }
textarea.inp { resize: vertical; line-height: 1.5; }
select.inp { appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; cursor: pointer; }
.inp--sm { min-height: 34px; height: 38px; font-size: 13.5px; width: auto; }
.inp--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.inp-prefix { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff; }
.inp-prefix:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(168 132 90 / .16); }
.inp-prefix > span { display: flex; align-items: center; padding: 0 4px 0 12px; color: var(--muted); font-size: 13px; background: var(--bg); white-space: nowrap; }
.inp-prefix .inp { border: 0; box-shadow: none; border-radius: 0; }
.inp-money { position: relative; }
.inp-money::before { content: "R$"; position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); font-size: 13.5px; }
.inp-money .inp { padding-left: 38px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); }
.colorf { display: flex; gap: 8px; align-items: center; }
.colorf input[type=color] { width: 44px; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 3px; background: #fff; cursor: pointer; }
.colorf .inp { width: 120px; font-family: ui-monospace, monospace; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opts--scroll { max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid var(--line-2); border-radius: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; }
.opt span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 550; cursor: pointer; transition: all .15s; background: #fff; }
.opt span:hover { border-color: var(--ink-2); }
.opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #faf7f2; }
.opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* imagem única */
.imgf { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--bg); min-height: 88px; }
.imgf.is-drag { border-color: var(--brand); background: var(--brand-50); }
.imgf__prev { width: 96px; height: 72px; border-radius: 10px; background: #fff repeating-conic-gradient(#f1f4f9 0 25%, #fff 0 50%) 0 0 / 14px 14px; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; }
.imgf__prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imgf__prev .i { color: var(--muted); }
.imgf__info { flex: 1; min-width: 0; display: grid; gap: 6px; }
.imgf__name { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imgf__btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* galeria */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.gallery__i { position: relative; aspect-ratio: 1; border-radius: var(--r); border: 1px solid var(--line); background: #fff repeating-conic-gradient(#f1f4f9 0 25%, #fff 0 50%) 0 0 / 14px 14px; overflow: hidden; cursor: grab; }
.gallery__i img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.gallery__i:first-child::after { content: "Capa"; position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: #faf7f2; }
.gallery__i.is-dragging { opacity: .4; }
.gallery__rm { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgb(15 23 42 / .75); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.gallery__i:hover .gallery__rm { opacity: 1; }
.gallery__add { aspect-ratio: 1; border-radius: var(--r); border: 1.5px dashed var(--line-2); background: var(--bg); display: grid; place-items: center; align-content: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; transition: all .15s; }
.gallery__add:hover, .gallery__add.is-drag { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }

/* editor de texto */
.rte { border: 1px solid var(--line-2); border-radius: 10px; background: #fff; overflow: hidden; }
.rte:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(168 132 90 / .16); }
.rte__bar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: #fafbfd; flex-wrap: wrap; }
.rte__bar button { height: 30px; min-width: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; font-weight: 700; font-size: 13px; color: var(--ink-2); display: grid; place-items: center; }
.rte__bar button:hover { background: var(--line); }
.rte__bar .sep { width: 1px; background: var(--line); margin: 4px 4px; }
.rte__area { min-height: 140px; max-height: 480px; overflow-y: auto; padding: 12px 14px; outline: 0; line-height: 1.6; }
.rte__area:empty::before { content: attr(data-ph); color: var(--muted); }
.rte__area > * { margin: 0 0 .7em; }
.rte__area h2 { font-size: 19px; }
.rte__area h3 { font-size: 16px; }
.rte__area ul, .rte__area ol { padding-left: 1.3em; }
.rte__area ul { list-style: disc; }
.rte__area a { color: var(--gold-deep); text-decoration: underline; }

/* repetidor */
.rep { display: grid; gap: 8px; }
.rep__row { display: grid; grid-template-columns: 28px 1fr 34px; gap: 8px; align-items: start; padding: 10px; border-radius: var(--r); border: 1px solid var(--line); background: #fafbfd; }
.rep__row.is-dragging { opacity: .4; }
.rep__grip { color: var(--muted); cursor: grab; padding-top: 30px; display: grid; place-items: center; }
.rep__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.rep__fields .f--full { grid-column: 1 / -1; }
.rep__rm { margin-top: 24px; }
.rep__add { justify-self: start; }

/* ícones */
.iconpick { display: flex; align-items: center; gap: 8px; }
.iconpick__cur { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; color: var(--brand); flex: none; }
.iconsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 50vh; overflow-y: auto; }
.iconsgrid button { display: grid; place-items: center; gap: 2px; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); }
.iconsgrid button:hover, .iconsgrid button.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }

/* modais */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(22 20 19 / .45); backdrop-filter: blur(3px); animation: fade .15s; }
.modal__box { width: min(980px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--white); border-radius: 26px; box-shadow: var(--sh-3); animation: pop .22s cubic-bezier(.2, .9, .3, 1.2); overflow: hidden; }
.modal__box--sm { width: min(460px, 100%); }
.modal__box--md { width: min(680px, 100%); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal__head h2 { font-size: 26px; }
.modal__body { padding: 20px; overflow-y: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fafbfd; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* biblioteca de mídia */
.mlib__bar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.mlib__drop { display: grid; justify-items: center; gap: 6px; padding: 22px; margin-bottom: 14px; border: 2px dashed var(--line-2); border-radius: var(--r-lg); background: var(--bg); color: var(--muted); text-align: center; transition: all .15s; cursor: pointer; }
.mlib__drop strong { color: var(--ink); }
.mlib__drop.is-drag { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.mlib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.mlib__i { position: relative; border-radius: var(--r); border: 2px solid transparent; background: #fff repeating-conic-gradient(#f1f4f9 0 25%, #fff 0 50%) 0 0 / 14px 14px; outline: 1px solid var(--line); overflow: hidden; cursor: pointer; aspect-ratio: 1; padding: 0; transition: border-color .15s, transform .15s; }
.mlib__i:hover { transform: translateY(-2px); }
.mlib__i img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.mlib__i.is-sel { border-color: var(--ink); outline-color: var(--ink); }
.mlib__i.is-sel::after { content: "✓"; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.mlib__i small { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgb(15 23 42 / .75)); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s; }
.mlib__i:hover small { opacity: 1; }
.mlib__detail { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.mlib__detail img { border-radius: 10px; border: 1px solid var(--line); background: #fff repeating-conic-gradient(#f1f4f9 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.progress { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }

/* construtor de páginas */
.builder__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.builder__side { position: sticky; top: 140px; display: grid; gap: 16px; }
.builder__side .card + .card { margin-top: 0; }
.builder__side .f + .f, .builder__side .f + [data-og-field], .builder__side [data-og-field] + .check { margin-top: 14px; }
.sections { display: grid; gap: 10px; }
.sec { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: box-shadow .2s, opacity .2s; }
.sec.is-open { box-shadow: var(--sh-2); border-color: var(--brand-100); }
.sec.is-off { opacity: .6; }
.sec.is-dragging { opacity: .4; }
.sec.is-over { outline: 2px dashed var(--brand); outline-offset: 3px; }
.sec__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 8px; cursor: pointer; user-select: none; }
.sec__grip { color: var(--line-2); cursor: grab; display: grid; place-items: center; width: 26px; }
.sec:hover .sec__grip { color: var(--muted); }
.sec__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-50); color: var(--gold-deep); flex: none; }
.sec__t { flex: 1; min-width: 0; display: grid; }
.sec__t strong { font-size: 14.5px; }
.sec__t small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec__chev { transition: transform .2s; color: var(--muted); }
.sec.is-open .sec__chev { transform: rotate(180deg); }
.sec__body { padding: 6px 18px 20px; border-top: 1px solid var(--line); }
.sec__body .fields { padding-top: 14px; }
.addsec { width: 100%; margin-top: 12px; height: 56px; border-radius: var(--r-lg); border: 2px dashed var(--line-2); background: transparent; color: var(--muted); font-weight: 650; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .15s; }
.addsec:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.secpicker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.secpicker__i { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; transition: all .15s; }
.secpicker__i:hover { border-color: var(--brand); background: var(--brand-50); }
.secpicker__i strong { display: block; font-size: 14px; }
.secpicker__i small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.secpicker__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-50); color: var(--gold-deep); flex: none; }
.serp { padding: 12px 14px; border-radius: 10px; background: var(--bg); display: grid; gap: 2px; margin-bottom: 14px; font-family: arial, sans-serif; }
.serp small { font-size: 12px; color: #4d5156; }
.serp strong { font-size: 17px; color: #1a0dab; font-weight: 400; line-height: 1.3; }
.serp span { font-size: 13px; color: #4d5156; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* páginas (lista) */
.pgcards { display: grid; gap: 8px; }
.pgcard { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: box-shadow .15s; }
.pgcard:hover { box-shadow: var(--sh-2); }
.pgcard__main { flex: 1; display: flex; align-items: center; gap: 12px; padding: 6px; min-width: 0; }
.pgcard__main strong { display: block; font: 500 22px/1.1 var(--ff-d); }
.pgcard__main small { color: var(--muted); font-size: 12.5px; }
.pgcard__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-50); color: var(--gold-deep); flex: none; }

/* configurações */
.settings { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.tabs-v { display: grid; gap: 2px; position: sticky; top: 80px; }
.tabs-v__i { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; font-weight: 400; color: var(--ink-2); }
.tabs-v__i:hover { background: var(--line); }
.tabs-v__i.is-on { background: var(--ink); color: #faf7f2; }
.settings > .card { margin-top: 0; }

/* contatos */
.chipsbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chipf { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 13.5px; }
.chipf span { color: var(--muted); font-weight: 500; }
.chipf b { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--flame); color: #fff; }
.chipf.is-on { background: var(--ink); color: #faf7f2; border-color: var(--ink); }
.chipf.is-on span { color: rgb(255 255 255 / .7); }
.leads { display: grid; gap: 10px; }
.lead { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.lead.is-new { border-left: 4px solid var(--flame); }
.lead__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead__head strong { font-size: 15.5px; }
.lead__status { margin-left: auto; }
.lead__data { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 18px; margin: 14px 0; }
.lead__data dt { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lead__data dd { margin: 2px 0 0; font-size: 14px; }
.lead__data a { color: var(--gold-deep); }
.lead__full { grid-column: 1 / -1; }
.lead__act { display: flex; gap: 8px; align-items: center; }
.lead__act .iconbtn { margin-left: auto; }
.kv { display: grid; gap: 10px; margin: 0; }
.kv > div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-all; }

/* toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 550; box-shadow: var(--sh-3); animation: pop .25s cubic-bezier(.2, .9, .3, 1.2); white-space: pre-line; }
.toast--ok::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); font-size: 13px; flex: none; }
.toast--err { background: #7a2a1d; }
.toast a { color: #d9c3a3; font-weight: 500; margin-left: auto; }

/* login */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--bg); }
.auth__art { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; align-content: end; gap: 24px; padding: 56px; background: var(--night) center / cover no-repeat; color: #faf7f2; overflow: hidden; isolation: isolate; }
.auth__art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(20 18 17 / .85), rgb(20 18 17 / .15) 65%); }
.auth__art img { width: min(320px, 60%); filter: drop-shadow(0 30px 40px rgb(0 0 0 / .4)); animation: float 6s ease-in-out infinite; }
.auth__art p { font-family: var(--ff-d); font-size: clamp(40px, 4vw, 62px); font-weight: 400; letter-spacing: -.02em; line-height: 1; max-width: 12ch; }
.auth__art p em { color: #d9c3a3; }
.auth__art p span { display: block; font-family: var(--ff); font-size: 15px; font-weight: 300; letter-spacing: .02em; opacity: .75; margin-top: 16px; max-width: 40ch; }
@keyframes float { 50% { transform: translateY(-12px); } }
.auth__card { align-self: center; justify-self: center; width: min(400px, 100% - 40px); display: grid; gap: 16px; padding: 40px 0; }
.auth__card h1 { font-size: 44px; }
.auth__logo { height: 52px; width: auto; margin-bottom: 18px; }
.captcha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.captcha__q { padding: 10px 16px; border-radius: 999px; background: var(--brand-50); color: var(--gold-deep); font-weight: 500; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; user-select: none; }
.captcha .inp { text-align: center; font-weight: 700; }
.captcha a { font-size: 12.5px; color: var(--muted); }
.auth__back { font-size: 13.5px; color: var(--muted); text-align: center; }
.auth:not(:has(.auth__art)) { grid-template-columns: 1fr; background: var(--bg); }
.auth:not(:has(.auth__art)) .auth__card { background: #fff; padding: 32px; border-radius: 18px; box-shadow: var(--sh-2); }

/* responsivo */
@media (max-width: 1100px) {
  .quick, .kpis { grid-template-columns: repeat(2, 1fr); }
  .builder__grid { grid-template-columns: 1fr; }
  .builder__side { position: static; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .side.is-open { transform: none; box-shadow: var(--sh-3); }
  .side-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(15 23 42 / .4); }
  .side.is-open + .side-backdrop { display: block; }
  .top { padding: 0 14px; }
  .top__menu { display: inline-grid; }
  .top__status span:last-child { display: none; }
  .top__act .btn span { display: none; }
  .content { padding: 18px 14px; }
  .grid2, .settings, .fields { grid-template-columns: 1fr; }
  .tabs-v { position: static; grid-auto-flow: column; overflow-x: auto; grid-auto-columns: max-content; }
  .page-head--sticky { top: 60px; }
  .page-head h1 { font-size: 22px; }
  .tbl .col-categories, .tbl .col-price, .tbl .col-parent, .tbl .col-kind, .tbl .col-city, .tbl .col-text, .tbl .col-featured, .tbl .col-show_home { display: none; }
  .secpicker { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth__art { display: none; }
  .mlib__detail { grid-template-columns: 1fr; }
  .kv > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ===== Sollus: componentes novos ===== */
.side__brand { padding: 4px 10px 22px; }
.top__status { letter-spacing: .02em; }
.quick__i { border-radius: var(--r-lg); padding: 18px; }
.quick__ic { border-radius: 50%; background: var(--ink); color: #faf7f2; }
.quick__ic--flame { background: linear-gradient(135deg, #c9ab82, var(--gold-deep)); }
.quick__ic--dark { background: #3f3a35; }
.quick__ic--soft { background: var(--brand-50); color: var(--gold-deep); }
.quick__i strong { font: 500 20px/1.1 var(--ff-d); }

/* saudação do painel inicial */
.hello { position: relative; overflow: hidden; border-radius: 28px; padding: 36px 40px; margin-bottom: 18px; background: var(--night); color: #faf7f2; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; isolation: isolate; }
.hello::before { content: ""; position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgb(201 171 130 / .35), transparent 65%); z-index: -1; }
.hello small { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: #d9c3a3; }
.hello h1 { font-size: clamp(38px, 4vw, 56px); font-weight: 400; margin: 8px 0 10px; }
.hello h1 em { color: #d9c3a3; }
.hello p { color: rgb(250 247 242 / .68); max-width: 60ch; }
.hello .btn { background: #faf7f2; color: var(--ink); }
.hello__score { display: grid; justify-items: center; gap: 6px; text-align: center; }
.hello__score small { color: rgb(250 247 242 / .6); }

/* nota de SEO (anel) */
.ring { --v: 0; --c: var(--ok); position: relative; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), rgb(135 124 112 / .18) 0); transition: --v .8s var(--ease); }
.ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--white); }
.hello .ring::before { background: var(--night); }
.ring b { position: relative; font: 400 38px/1 var(--ff-d); }
.ring small { position: relative; display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: -2px; }
.ring--sm { width: 64px; height: 64px; }
.ring--sm::before { inset: 5px; }
.ring--sm b { font-size: 24px; }
.ring.is-good { --c: var(--ok); }
.ring.is-ok { --c: var(--warn); }
.ring.is-bad { --c: var(--flame); }
@property --v { syntax: "<number>"; inherits: false; initial-value: 0; }
.score { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
.score::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.score--good { color: var(--ok); }
.score--ok { color: var(--warn); }
.score--bad { color: var(--flame); }

/* editor com painel lateral de SEO */
.editor__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.editor__grid > .card { margin-top: 0; }
.editor__side { position: sticky; top: 146px; display: grid; gap: 16px; }
.editor__side .card + .card { margin-top: 0; }
.seo-box { display: grid; gap: 16px; }
.seo-box__top { display: flex; gap: 16px; align-items: center; }
.seo-box__top strong { display: block; font: 500 24px/1.1 var(--ff-d); }
.seo-box__top span { font-size: 13px; color: var(--muted); }
.checks { display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13px; line-height: 1.4; }
.checks li::before { content: ""; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--flame); }
.checks li.is-ok::before { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: none; }
.checks li.is-half::before { box-shadow: inset 0 0 0 1.5px var(--warn); background: linear-gradient(90deg, var(--warn) 50%, transparent 0); }
.checks small { display: block; color: var(--muted); font-size: 12px; }
.checks li.is-ok small { display: none; }
.serp--mini { margin: 0; }

/* sugestão de tamanho de imagem */
.imgrec { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: var(--brand-50); color: var(--ink-2); }
.imgrec .i { width: 15px; height: 15px; margin-top: 1px; color: var(--gold-deep); }
.imgrec.is-warn { background: #fbf0dd; color: #6b4a12; }
.imgrec.is-warn .i { color: var(--warn); }
.imgrec.is-bad { background: #f7e4df; color: #7a2a1d; }
.imgrec.is-bad .i { color: var(--flame); }
.imgf { border-radius: var(--r-lg); background: #fbf8f3; }
.imgf__prev { border-radius: 12px; }
.gallery__i { border-radius: 16px; }
.gallery__warn { position: absolute; left: 6px; bottom: 6px; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #fbf0dd; color: #6b4a12; }

/* pré-visualização por dispositivo */
.devprev { display: grid; gap: 14px; justify-items: center; }
.devprev__bar { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--brand-50); }
.devprev__bar button { display: inline-flex; gap: 8px; align-items: center; padding: 8px 16px; border: 0; border-radius: 999px; background: none; font-size: 13px; color: var(--muted); }
.devprev__bar button.is-on { background: var(--ink); color: #faf7f2; }
.devprev__frame { width: 100%; height: min(76vh, 900px); border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: width .6s var(--spring); }
.devprev__frame.is-mobile { width: 390px; border-radius: 34px; box-shadow: 0 0 0 10px var(--ink), 0 30px 60px -20px rgb(0 0 0 / .4); }
.modal__box--xl { width: min(1400px, 100%); }

/* ranking de SEO */
.seo-sum { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 14px; margin-bottom: 16px; align-items: stretch; }
.seo-sum .card { margin: 0; display: grid; align-content: center; gap: 4px; }
.seo-sum .card strong { font: 400 40px/1 var(--ff-d); }
.seo-sum .card small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.seo-row td { vertical-align: top; }
.seo-row .fails { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.seo-row .fails span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #fbf0dd; color: #6b4a12; }
.col-seo { width: 110px; }
.col-trigger, .col-devices { width: 140px; }

/* contatos com foto */
.lead__photo { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; border: 1px solid var(--line); }
.tag--contato { background: #e9eee6; color: #3c5a3f; }
.tag--distribuidor { background: #f3ece2; color: #7d6040; }
.tag--encontre { background: #e7ecf2; color: #3e5169; }
.tag--modelo { background: #f5e6ea; color: #7c3a4d; }

/* estatística de compressão */
.meter { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), #c9ab82); }

@media (max-width: 1100px) {
  .editor__grid { grid-template-columns: 1fr; }
  .editor__side { position: static; }
  .seo-sum { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hello { grid-template-columns: 1fr; padding: 28px; }
  .tbl .col-seo, .tbl .col-trigger, .tbl .col-devices, .tbl .col-region { display: none; }
  .devprev__frame.is-mobile { width: 100%; }
}
.health .score { flex: none; display: inline-flex; width: 46px; }
.top .top__menu { display: none; }
@media (max-width: 900px) { .top .top__menu { display: inline-grid; } }

/* login: fundo preto com o logo */
.auth__art { background: radial-gradient(90% 70% at 85% 10%, rgb(168 132 90 / .28), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgb(168 132 90 / .14), transparent 60%), #0f0e0d; align-content: space-between; }
.auth__art::after { display: none; }
.auth__mark { width: min(380px, 62%); height: auto; margin-top: 8vh; opacity: .96; animation: fadeUp 1.2s var(--ease) both; }
.auth__art p { animation: fadeUp 1.2s .15s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }

/* aprendizado */
.learn { display: grid; gap: 18px; max-width: 980px; }
.learn__search { position: sticky; top: 76px; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 22px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-2); box-shadow: var(--sh-2); }
.learn__search .i { color: var(--gold-deep); }
.learn__search input { flex: 1; border: 0; outline: 0; background: none; font: 400 22px var(--ff-d); padding: 10px 0; min-width: 0; }
.learn__count { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.learn__groups { margin: 0; }
.learn__groups button { cursor: pointer; }
.learn__sec { display: grid; gap: 8px; }
.learn__sec h2 { font-size: 28px; margin: 10px 0 4px; }
.learn__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); transition: box-shadow .3s var(--ease); }
.learn__item[open] { box-shadow: var(--sh-2); }
.learn__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; font-weight: 500; font-size: 15px; }
.learn__item summary::-webkit-details-marker { display: none; }
.learn__item summary .i { color: var(--muted); transition: transform .3s var(--ease); flex: none; }
.learn__item[open] summary .i { transform: rotate(180deg); }
.learn__body { padding: 0 22px 20px; color: var(--ink-2); line-height: 1.65; display: grid; gap: 10px; }
.learn__body ol, .learn__body ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.learn__body ul { list-style: disc; }
.learn__body b { font-weight: 600; color: var(--ink); }
.learn__body code, .learn__body kbd { font-size: 12.5px; background: var(--brand-50); padding: 2px 7px; border-radius: 6px; font-family: ui-monospace, monospace; }
.learn__body .tip { padding: 12px 14px; border-radius: 12px; background: var(--brand-50); }
.learn__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ======================= Sistema de Pedidos ======================= */
.block { display: block; }
.nowrap { white-space: nowrap; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: 12px; }
.prewrap { white-space: pre-wrap; }
.pad-avatar { padding-left: 32px; }
.link-plain:hover { color: var(--gold-deep); }
.alert--ok { background: #e9f1e6; color: #2c4a2f; display: flex; gap: 8px; align-items: center; }
.tag--warn { background: #fbf0dd; color: #6b4a12; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 10.5px/1.4 var(--ff); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); margin: 0; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.auth__forgot { font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--gold-deep); font-weight: 400; }
.auth__back { font-size: 13px; }
.hello > .btn { background: #faf7f2; color: var(--ink); }
.grid2--wide { grid-template-columns: 1.35fr 1fr; }
.card__head--pad { padding: 22px 24px 6px; margin: 0; }
.narrow-wide { max-width: 900px; }
.side__brand img { height: 30px; }

/* status */
.st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font: 500 11.5px/1.3 var(--ff); letter-spacing: .02em; white-space: nowrap; border: 0; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st--new { background: #f6e5d4; color: #8a4b12; }
.st--prep { background: #e8e4f3; color: #4a3e7a; }
.st--billed { background: #e3ecf4; color: #2d4d6b; }
.st--sent { background: #e2efe9; color: #25563f; }
.st--done { background: #ecebe8; color: #55504a; }
.st--cancel { background: #f5e1dd; color: #8a2c1f; text-decoration: line-through; }
.chipf--new span, .chipf--new.is-on span { color: #c46a1f; }
.mail { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.mail--ok { color: var(--ok); }
.mail--bad { color: var(--flame); font-weight: 500; }
.mail--wait { color: var(--muted); }
.col-mail { width: 80px; text-align: center; white-space: nowrap; }
.tbl--click tbody tr { cursor: pointer; }
.tbl tr.is-new td:first-child { box-shadow: inset 3px 0 0 #c46a1f; }
.tbl td small.block { margin-top: 2px; font-size: 12px; }
.tfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.datef { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.datef .inp { width: 150px; }
.iconbtn--ring { box-shadow: inset 0 0 0 1px var(--line-2); }
.iconbtn.is-off { opacity: .3; pointer-events: none; }
.alertbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 16px; border-radius: 16px; background: #f7e4df; color: #7a2a1d; }
.alertbar span { flex: 1; }

/* painel inicial */
.kpi__money { font-size: 34px !important; }
.kpi__of { font-size: 22px; color: var(--muted); }
.delta { font-size: 12px; font-weight: 500; }
.delta.is-up { color: var(--ok); }
.delta.is-down { color: var(--flame); }
.chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; height: 220px; align-items: end; padding-top: 10px; }
.chart__c { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 4px; text-align: center; }
.chart__v { font-size: 11px; color: var(--muted); align-self: end; }
.chart__b { align-self: end; width: 100%; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #d9c3a3, var(--gold)); transition: filter .3s; min-height: 2px; }
.chart__b.is-now { background: linear-gradient(180deg, #3f3a35, var(--ink)); }
.chart__c:hover .chart__b { filter: brightness(.9); }
.chart__c small { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.feed li b { font-weight: 500; font-size: 13px; }

/* ---------- novo pedido ---------- */
.of { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.of__head { margin-bottom: 22px; display: grid; gap: 10px; }
.of__head h1 { font-size: clamp(40px, 4vw, 58px); font-weight: 400; }
.of__head h1 em, .ov__head h1 em { color: var(--gold); }
.of__head p { max-width: 62ch; }
.of__tools { position: sticky; top: 64px; z-index: 6; display: flex; gap: 12px; align-items: center; padding: 12px 0; background: linear-gradient(var(--bg) 80%, transparent); flex-wrap: wrap; }
.of__search { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px 0 20px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2); }
.of__search .i { color: var(--gold-deep); width: 20px; height: 20px; }
.of__search input { flex: 1; border: 0; outline: 0; background: none; font: 400 20px var(--ff-d); min-width: 0; }
.of__search kbd { font: 11px var(--ff); color: var(--muted); padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.of__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.of__toggles { display: flex; gap: 6px; }
.of__toggles .chipf { cursor: pointer; }
.of__note { margin-bottom: 12px; }
.of__lines { display: grid; gap: 10px; }
.of__empty { text-align: center; color: var(--muted); padding: 40px 0; font: italic 22px var(--ff-d); }
.ln { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); transition: box-shadow .4s var(--ease), border-color .3s; overflow: hidden; }
.ln.is-open { box-shadow: var(--sh-2); }
.ln.has-items { border-color: #d9c3a3; }
.ln__head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 0; background: none; text-align: left; cursor: pointer; }
.ln__name { flex: 1; font: 500 21px/1.15 var(--ff-d); }
.ln__meta { display: flex; gap: 10px; align-items: center; }
.ln__count { font-size: 12px; color: var(--muted); }
.ln__sum { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #faf7f2; }
.ln__chev { color: var(--muted); transition: transform .4s var(--ease); }
.ln.is-open .ln__chev { transform: rotate(180deg); }
.ln__body { border-top: 1px solid var(--line); }
.pr { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px 120px; gap: 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); transition: background-color .3s var(--ease); }
.pr:last-child { border-bottom: 0; }
.pr:hover { background: #fbf8f3; }
.pr.is-on { background: #faf4ea; }
.pr__info strong { display: block; font-weight: 400; font-size: 15px; }
.pr__info small { font-size: 11.5px; color: var(--muted); }
.pr.is-on .pr__info strong { font-weight: 500; }
.pr__price { text-align: right; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pr__price small { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.pr__sub { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.pr.is-on .pr__sub { color: var(--ink); }
.stepper { display: grid; grid-template-columns: 40px 1fr 40px; height: 44px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; transition: box-shadow .3s; }
.pr.is-on .stepper { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.stepper button { border: 0; background: none; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; transition: background-color .2s; }
.stepper button:hover { background: var(--brand-50); }
.stepper button .i { width: 16px; height: 16px; }
.stepper input { width: 100%; border: 0; background: none; text-align: center; font: 500 16px var(--ff); outline: 0; -moz-appearance: textfield; min-width: 0; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr.is-bump .stepper { animation: bump .25s var(--spring); }
@keyframes bump { 50% { transform: scale(1.06); } }
.of__side { position: sticky; top: 84px; }
.sum { background: var(--white); border: 1px solid var(--line); border-radius: 26px; padding: 24px; display: grid; gap: 16px; box-shadow: var(--sh-2); }
.sum__head { display: flex; justify-content: space-between; align-items: center; }
.sum__head .link { border: 0; background: none; cursor: pointer; }
.sum__total { padding: 20px; border-radius: 20px; background: var(--night); color: #faf7f2; display: grid; gap: 4px; position: relative; overflow: hidden; }
.sum__total::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgb(201 171 130 / .35), transparent 65%); }
.sum__total small { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #d9c3a3; }
.sum__total strong { font: 400 40px/1.05 var(--ff-d); font-variant-numeric: tabular-nums; }
.sum__total span { font-size: 12.5px; color: rgb(250 247 242 / .65); }
.sum__list { max-height: 34vh; overflow-y: auto; display: grid; gap: 2px; margin: 0 -6px; padding: 0 6px; }
.sum__list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sum__rm { width: 24px; height: 24px; border-radius: 50%; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.sum__rm:hover { background: #f6e3de; color: var(--flame); }
.sum__v { font-variant-numeric: tabular-nums; font-weight: 500; }
.sum__foot { font-size: 12px; color: var(--muted); text-align: center; }
.mbar { display: none; }
.review { display: grid; gap: 18px; }
.review__list { max-height: 50vh; overflow-y: auto; display: grid; gap: 16px; }
.review__g { display: grid; gap: 6px; }
.review__i { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.review__notes { padding: 14px; border-radius: 14px; background: var(--brand-50); font-size: 14px; }
.review__notes small { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.review__total { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--night); color: #faf7f2; }
.review__total span { font-size: 13px; color: #d9c3a3; }
.review__total strong { font: 400 30px var(--ff-d); }

/* ---------- pedido ---------- */
.done { display: flex; gap: 18px; align-items: center; padding: 22px 26px; margin-bottom: 22px; border-radius: 24px; background: linear-gradient(120deg, #e9f1e6, #f4efe4); animation: pop .5s var(--spring); }
.done__ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; flex: none; }
.done__ic .i { width: 26px; height: 26px; }
.done h2 { font-size: 30px; }
.done p { color: #3c4a3a; }
.ov__head h1 { font-size: 44px; font-weight: 400; }
.ov__head p { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ov__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.ov__main, .ov__side { display: grid; gap: 16px; }
.ov__main .card + .card, .ov__side .card + .card { margin-top: 0; }
.otbl .otbl__line th { padding: 18px 16px 8px; background: none; font: 500 11px/1.4 var(--ff); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid var(--line); }
.otbl .otbl__line small { margin-left: 8px; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.otbl__sub td { font-size: 12.5px; color: var(--muted); background: #fbf8f3; }
.ov__total { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: var(--night); color: #faf7f2; }
.ov__total small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #d9c3a3; }
.ov__total strong { font: 400 36px var(--ff-d); }
.ov__total > div:last-child { text-align: right; }
.kv--stack > div { grid-template-columns: 110px 1fr; }
.ov__hist { margin: 14px 0 12px; }
.stsel { display: flex; flex-wrap: wrap; gap: 6px; }
.stsel .st { cursor: pointer; opacity: .5; padding: 7px 13px; transition: opacity .2s, box-shadow .2s; }
.stsel .st:hover { opacity: .85; }
.stsel .st.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px currentColor; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tl li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; font-size: 13.5px; }
.tl__dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--brand-50); }
.tl small { display: block; color: var(--muted); }
.tl time { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---------- meus pedidos ---------- */
.mylist { display: grid; gap: 10px; }
.myo { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 140px 20px; gap: 18px; align-items: center; padding: 18px 22px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); transition: transform .5s var(--spring), box-shadow .4s var(--ease); }
.myo:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.myo__no b { display: block; font: 500 20px var(--ff-d); }
.myo__no small { color: var(--muted); font-size: 12px; }
.myo__items { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myo__total { text-align: right; font: 400 22px var(--ff-d); }

/* ---------- catálogo ---------- */
.cat__bar { display: flex; gap: 10px; margin-bottom: 14px; }
.cat__bar .chipf { cursor: pointer; }
.cat__lines { display: grid; gap: 10px; }
.cl { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cl.is-dragging { opacity: .5; }
.cl.is-off .cl__toggle strong { color: var(--muted); text-decoration: line-through; }
.cl__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 8px; background: #fbf8f3; border-bottom: 1px solid var(--line); }
.cl__grip, .cp__grip { display: grid; place-items: center; width: 28px; height: 28px; color: #c9bca8; cursor: grab; border-radius: 8px; }
.cl__grip:hover, .cp__grip:hover { color: var(--ink); background: var(--brand-50); }
.cl__toggle { flex: 1; display: flex; align-items: baseline; gap: 12px; border: 0; background: none; cursor: pointer; text-align: left; padding: 6px 0; }
.cl__toggle strong { font: 500 20px var(--ff-d); }
.cl__toggle small { font-size: 12px; color: var(--muted); }
.cl__toggle .i { margin-left: auto; color: var(--muted); transition: transform .3s; align-self: center; }
.cl.is-closed .cl__toggle .i { transform: rotate(-90deg); }
.cl.is-closed .cl__body { display: none; }
.cl__empty { padding: 16px 20px; color: var(--muted); font-size: 13px; }
.cp { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px 44px auto; gap: 12px; align-items: center; padding: 8px 14px 8px 8px; border-bottom: 1px solid var(--line); background: var(--white); }
.cp:last-child { border-bottom: 0; }
.cp.is-dragging { opacity: .45; background: var(--brand-50); }
.cp.is-off .cp__name { color: var(--muted); }
.cp__name { font-size: 14.5px; }
.cp__name small { margin-left: 8px; font-size: 11.5px; color: var(--muted); }
.cp__price { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cp__price .inp { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.cp__price .inp.is-dirty { border-color: var(--warn); background: #fdf6e8; box-shadow: 0 0 0 3px rgb(192 138 46 / .14); }
.savebar { position: sticky; bottom: 18px; z-index: 20; display: flex; align-items: center; gap: 12px; width: max-content; margin: 18px auto 0; padding: 10px 10px 10px 22px; border-radius: 999px; background: var(--night); color: #faf7f2; box-shadow: var(--sh-3); animation: pop .35s var(--spring); }
.savebar .btn--ghost { color: #faf7f2; border-color: rgb(250 247 242 / .25); background: none; }
.savebar .btn--primary { background: #faf7f2; color: var(--ink); }

/* ---------- responsivo ---------- */
@media (max-width: 1150px) {
  .of { grid-template-columns: 1fr; }
  .of__side { position: static; }
  .ov__grid, .grid2--wide { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .of__side .sum { display: none; }
  .mbar:not([hidden]) { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--night); color: #faf7f2; box-shadow: var(--sh-3); }
  .mbar small { display: block; font-size: 11px; color: #d9c3a3; }
  .mbar strong { font: 400 22px var(--ff-d); }
  .mbar .btn { background: #faf7f2; color: var(--ink); }
  .of { padding-bottom: 90px; }
  .pr { grid-template-columns: 1fr auto; grid-template-areas: "info info" "price sub" "step step"; gap: 8px 12px; padding: 14px 16px; }
  .pr__info { grid-area: info; }
  .pr__price { grid-area: price; text-align: left; }
  .pr__price small { display: inline; margin-left: 4px; }
  .pr__sub { grid-area: sub; }
  .stepper { grid-area: step; height: 48px; grid-template-columns: 56px 1fr 56px; }
  .of__tools { top: 60px; }
  .ln__head { padding: 14px 16px; }
  .ln__count { display: none; }
  .myo { grid-template-columns: 1fr auto; grid-template-areas: "no total" "items items" "st st"; gap: 6px 12px; }
  .myo__no { grid-area: no; } .myo__items { grid-area: items; white-space: normal; } .myo__st { grid-area: st; } .myo__total { grid-area: total; } .myo > .i { display: none; }
  .cp { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .cp__price { grid-column: 2; } .cp .switch { grid-column: 3; grid-row: 1; } .cp .rowact { grid-column: 3; }
  .chart { gap: 4px; height: 170px; }
  .datef .inp { width: 130px; }
}

/* ---------- impressão (documento limpo em A4) ---------- */
.printhead { display: none; }
@page { size: A4; margin: 14mm 12mm; }
/* Crédito do desenvolvedor: discreto, no fim da página (no login, fixo no canto) */
.dev { align-self: flex-end; margin-top: auto; padding: 10px 32px 16px; font-size: 11px; letter-spacing: .02em; color: var(--muted); opacity: .55; text-decoration: none; transition: opacity .2s; }
.dev b { font-weight: 500; }
.dev:hover, .dev:focus-visible { opacity: 1; color: var(--ink); }
.auth .dev { position: fixed; right: 16px; bottom: 10px; padding: 0; }
@media (max-width: 900px) { .dev { padding: 8px 16px 14px; } .r-pedido-novo .dev { padding-bottom: 84px; } }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; font-size: 11pt; }
  .side, .top, .noprint, .toasts, .done, .back, .side-backdrop, .page-head__act, .ov__head .mail, .ov__head .tag { display: none !important; }
  .app, .main { display: block; }
  .content { padding: 0 !important; max-width: none; }
  .printhead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1.5px solid #161413; }
  .printhead img { height: 38px; width: auto; }
  .printhead div { text-align: right; display: grid; gap: 2px; }
  .printhead strong { font: 500 20pt/1 var(--ff-d); }
  .printhead span { font-size: 9.5pt; color: #555; }
  .ov__head { display: none; }
  .ov__grid { display: flex; flex-direction: column; gap: 12px; }
  .ov__side { order: -1; display: block; }
  .ov__main { display: block; }
  .ov__grid > *, .ov__main > .card, .ov__side > .card { width: 100% !important; max-width: none; }
  .otbl { width: 100% !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd; border-radius: 10px; padding: 12px 14px; break-inside: auto; margin: 0 0 12px !important; }
  .ov__side .card__title { font-size: 12pt; margin-bottom: 6px; }
  .ov__side .kv--stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
  .ov__side .kv--stack > div { grid-template-columns: 90px 1fr; font-size: 9.5pt; gap: 8px; }
  .ov__side .kv dd { word-break: break-word; }
  .card--flush { padding: 0; overflow: visible; }
  .otbl { font-size: 9.5pt; }
  .otbl th, .otbl td { padding: 5px 10px !important; }
  .otbl thead { display: table-header-group; }
  .otbl tr { break-inside: avoid; }
  .otbl .otbl__line th { padding-top: 10px !important; break-after: avoid; }
  .otbl td:nth-child(n+2), .otbl th:nth-child(n+2) { width: 1%; white-space: nowrap; }
  .otbl__sub td { background: #f6f6f6 !important; }
  .ov__total { background: #fff !important; color: #000 !important; border-top: 2px solid #000; padding: 10px 12px; break-inside: avoid; }
  .ov__total small, .ov__total strong { color: #000 !important; }
  .ov__total strong { font-size: 20pt; }
  .prewrap { font-size: 10pt; }
  a { color: inherit !important; text-decoration: none !important; }
}