/* Nexo — design system v2.
   Princípios: superfícies calmas, uma cor de destaque por empresa, tipografia forte,
   movimento com propósito (tudo responde a prefers-reduced-motion). */
:root {
  --acc: #5b5bd6; --acc-rgb: 91 91 214; --acc-ink: #fff;
  --bg: #f3f4f8; --bg-2: #eceef4; --surface: #ffffff; --surface-2: #f6f7fa; --surface-3: #eef0f5; --line: #e4e6ed; --line-2: #d6d9e3;
  --ink: #0f1222; --ink-2: #4b5068; --ink-3: #8a90a6; --ink-4: #b6bace;
  --ok: #119c5b; --warn: #c7811a; --bad: #d6364a; --info: #2f6fe4;
  --ok-bg: #e4f6ec; --warn-bg: #fbefd9; --bad-bg: #fbe4e7; --info-bg: #e3ecfc;
  --r-xl: 22px; --r: 16px; --r-s: 11px; --r-xs: 8px;
  --sh-1: 0 1px 2px rgb(16 18 35 / .04), 0 1px 0 rgb(16 18 35 / .02);
  --sh-2: 0 2px 6px -2px rgb(16 18 35 / .08), 0 12px 32px -16px rgb(16 18 35 / .14);
  --sh-3: 0 24px 60px -24px rgb(16 18 35 / .32), 0 8px 20px -10px rgb(16 18 35 / .16);
  --sb: 256px; --font: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2,.7,.2,1); --spring: cubic-bezier(.34,1.4,.4,1); --dur: .38s;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0d13; --bg-2: #0f121a; --surface: #12151e; --surface-2: #181c27; --surface-3: #1f2432; --line: #222738; --line-2: #2e3448;
  --ink: #eceef5; --ink-2: #a6abc0; --ink-3: #6b7190; --ink-4: #454b63;
  --ok-bg: #0d2a1c; --warn-bg: #2e2110; --bad-bg: #331419; --info-bg: #0f1f3c;
  --sh-1: 0 1px 2px rgb(0 0 0 / .4); --sh-2: 0 2px 8px -2px rgb(0 0 0 / .5), 0 16px 40px -20px rgb(0 0 0 / .7); --sh-3: 0 30px 80px -30px rgb(0 0 0 / .9);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
a { color: var(--acc); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgb(var(--acc-rgb) / .22); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.2; }
h1 { font-size: 26px; font-weight: 800; } h2 { font-size: 17px; } h3 { font-size: 14px; font-weight: 700; } h4 { font-size: 13.5px; }
.muted { color: var(--ink-2); } .small { font-size: 12.5px; } .tiny { font-size: 11.5px; color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: .95em; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.num, .val, .big, b.mono { font-variant-numeric: tabular-nums; }
.right { text-align: right; } .center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; } .gap { gap: 16px; } .between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.hide { display: none !important; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); } .info { color: var(--info); }
svg.ic { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
svg.ic.sm { width: 15px; height: 15px; } svg.ic.lg { width: 22px; height: 22px; } svg.ic.xl { width: 28px; height: 28px; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; }

/* ============ movimento ============ */
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%, -8%) scale(1.15); } 100% { transform: translate(0,0) scale(1); } }
@keyframes drift2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-8%, 6%) scale(1.1); } 100% { transform: translate(0,0) scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
.reveal { animation: rise var(--dur) var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.page-enter { animation: slideUp .42s var(--ease) both; }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-s); min-height: 14px; }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--line-2); border-top-color: var(--acc); border-radius: 50%; animation: spin .8s linear infinite; }

/* ============ layout ============ */
#app { min-height: 100%; }
.shell { display: grid; grid-template-columns: var(--sb) 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.brand .logo { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg, var(--acc), color-mix(in srgb, var(--acc) 70%, #000)); color: var(--acc-ink); display: grid; place-items: center; flex: none; box-shadow: 0 8px 20px -8px rgb(var(--acc-rgb) / .7), inset 0 1px 0 rgb(255 255 255 / .25); }
.brand .logo svg { width: 22px; height: 22px; }
.brand .name { font-weight: 800; font-size: 15px; line-height: 1.15; letter-spacing: -.02em; } .brand .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.nav .pill { position: absolute; left: 0; width: 100%; height: 40px; border-radius: 11px; background: rgb(var(--acc-rgb) / .1); transition: transform .45s var(--spring), opacity .2s; pointer-events: none; opacity: 0; }
.nav .pill::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--acc); }
.nav a { position: relative; display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 11px; color: var(--ink-2); font-weight: 600; font-size: 13.5px; transition: color .2s, background .2s; }
.nav a svg { width: 19px; height: 19px; color: var(--ink-3); transition: color .2s, transform .3s var(--spring); }
.nav a:hover { color: var(--ink); background: var(--surface-2); } .nav a:hover svg { transform: translateX(1px) scale(1.06); }
.nav a.active { color: var(--acc); } .nav a.active svg { color: var(--acc); }
.nav .count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--surface-3); border-radius: 999px; padding: 1px 7px; }
.nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); padding: 14px 12px 6px; font-weight: 700; }
.sidebar .foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.sidebar .foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; margin-top: 6px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 32px 10px; position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.4); z-index: 5; }
.topbar .greet { font-weight: 800; font-size: 17px; letter-spacing: -.02em; } .topbar .greet small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
.search-btn { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; color: var(--ink-3); min-width: 280px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; font-size: 13px; }
.search-btn:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-1px); }
.search-btn kbd { margin-left: auto; }
kbd { font: 600 10.5px var(--font); background: var(--surface-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--ink-2); }
.content { padding: 10px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.page-head p { margin: 5px 0 0; color: var(--ink-2); font-size: 13.5px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-weight: 600; font-size: 12.5px; transition: color .2s; } .crumb:hover { color: var(--acc); }

/* ============ superfícies ============ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s; }
.card .card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px 13px; border-bottom: 1px solid var(--line); }
.card .card-h h3 { display: flex; align-items: center; gap: 8px; } .card .card-h h3 svg { color: var(--ink-3); width: 16px; height: 16px; }
.card .card-b { padding: 18px 20px; } .card .card-b.tight { padding: 0; }
.grid { display: grid; gap: 16px; }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.main-side { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.kpi { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; cursor: pointer; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.kpi .lbl { font-size: 12px; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 7px; letter-spacing: .01em; }
.kpi .lbl .ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgb(var(--acc-rgb) / .1); color: var(--acc); } .kpi .lbl .ico svg { width: 15px; height: 15px; }
.kpi .val { font-size: 25px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.kpi .delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .kpi .delta svg { width: 14px; height: 14px; }
.kpi .delta.up { color: var(--ok); } .kpi .delta.down { color: var(--bad); }
.kpi::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--acc-rgb) / .09), transparent); pointer-events: none; transition: transform .5s var(--ease); }
.kpi:hover::after { transform: scale(1.3); }
.insight { position: relative; display: flex; gap: 14px; padding: 14px 16px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); align-items: flex-start; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; overflow: hidden; }
.insight:hover { transform: translateX(3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.insight .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.insight .ico svg { width: 19px; height: 19px; }
.insight h4 { font-size: 13.5px; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; } .insight h4 .kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c); }
.insight p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.insight.alerta { --c: var(--bad); } .insight.oportunidade { --c: var(--warn); } .insight.info { --c: var(--info); } .insight.bom { --c: var(--ok); }
.insight::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.insight .act { margin-left: auto; align-self: center; white-space: nowrap; }
.hero { position: relative; overflow: hidden; color: #fff; border-radius: var(--r-xl); padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; background: #0f1222; box-shadow: var(--sh-3); isolation: isolate; }
.hero .blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .75; z-index: -1; }
.hero .b1 { width: 420px; height: 420px; left: -80px; top: -200px; background: var(--acc); animation: drift 14s ease-in-out infinite; }
.hero .b2 { width: 360px; height: 360px; right: -60px; bottom: -220px; background: color-mix(in srgb, var(--acc) 55%, #2fd4b7); animation: drift2 18s ease-in-out infinite; opacity: .55; }
.hero .b3 { width: 260px; height: 260px; right: 25%; top: -160px; background: color-mix(in srgb, var(--acc) 40%, #ff7ab6); animation: drift 22s ease-in-out infinite reverse; opacity: .4; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgb(15 18 34 / .55), rgb(15 18 34 / .15)); z-index: -1; }
.hero h2 { font-size: 20px; color: #fff; font-weight: 800; letter-spacing: -.025em; } .hero p { margin: 6px 0 0; opacity: .82; font-size: 13.5px; max-width: 560px; line-height: 1.55; }
.hero .big { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.hero .right { flex: none; } .hero .cap { opacity: .75; font-size: 12px; margin-top: 6px; font-weight: 500; }
.hero .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .7; font-weight: 700; margin-bottom: 6px; }
.tip { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, rgb(var(--acc-rgb) / .09), rgb(var(--acc-rgb) / .03)); border: 1px solid rgb(var(--acc-rgb) / .25); border-radius: var(--r-s); padding: 13px 15px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.tip svg { color: var(--acc); width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ============ botões e formulários ============ */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 13px; white-space: nowrap; transition: transform .18s var(--spring), box-shadow .2s, background .2s, border-color .2s, filter .2s; letter-spacing: -.005em; overflow: hidden; }
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--surface-2); border-color: var(--ink-4); transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.97); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 92%, #fff), var(--acc)); color: var(--acc-ink); border-color: transparent; box-shadow: 0 8px 18px -8px rgb(var(--acc-rgb) / .8), inset 0 1px 0 rgb(255 255 255 / .2); }
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 12px 24px -8px rgb(var(--acc-rgb) / .85); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 92%, #fff), var(--acc)); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; } .btn.ghost:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.btn.danger { color: var(--bad); } .btn.danger:hover { background: var(--bad-bg); border-color: transparent; }
.btn.ok { background: var(--ok); color: #fff; border-color: transparent; }
.btn.sm { padding: 6px 10px; font-size: 12.5px; border-radius: 9px; } .btn.sm svg { width: 14px; height: 14px; }
.btn.lg { padding: 13px 20px; font-size: 15px; border-radius: 13px; } .btn.lg svg { width: 18px; height: 18px; }
.btn.icon { padding: 0; width: 36px; height: 36px; } .btn.icon.sm { width: 30px; height: 30px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; filter: none !important; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); animation: ripple .55s var(--ease) forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; }
.field label .req { color: var(--bad); }
.input, select.input, textarea.input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; font-size: 13.5px; }
.input:hover { border-color: var(--ink-4); }
.input:focus { border-color: var(--acc); box-shadow: 0 0 0 4px rgb(var(--acc-rgb) / .14); }
.input::placeholder { color: var(--ink-4); }
textarea.input { min-height: 84px; resize: vertical; }
.input.lg { padding: 14px 16px; font-size: 16px; border-radius: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .form-grid .span2 { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; } .check input { width: 18px; height: 18px; accent-color: var(--acc); }
.switch { position: relative; width: 42px; height: 24px; background: var(--line-2); border-radius: 12px; cursor: pointer; transition: background .25s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .3s var(--spring); box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.switch.on { background: var(--acc); } .switch.on::after { transform: translateX(18px); }
.seg { display: inline-flex; background: var(--surface-3); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-weight: 700; font-size: 12.5px; transition: background .2s, color .2s, box-shadow .2s; display: inline-flex; align-items: center; gap: 6px; }
.seg button svg { width: 14px; height: 14px; }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1), 0 1px 3px rgb(0 0 0 / .08); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 8px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 13px 14px; cursor: pointer; color: var(--ink-3); font-weight: 700; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; white-space: nowrap; }
.tabs button:hover { color: var(--ink); } .tabs button.active { color: var(--acc); border-color: var(--acc); }

/* ============ tabelas e listas ============ */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 11px 16px; border-bottom: 1px solid var(--line); font-weight: 700; background: var(--surface-2); position: sticky; top: 0; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13.5px; }
.table tr:last-child td { border-bottom: 0; }
.table tr.click { cursor: pointer; } .table tr.click td { transition: background .15s; } .table tr.click:hover td { background: var(--surface-2); }
.table .num { text-align: right; }
.table-wrap { overflow: auto; border-radius: 0 0 var(--r) var(--r); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; letter-spacing: .01em; }
.badge svg { width: 12px; height: 12px; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad { background: var(--bad-bg); color: var(--bad); } .badge.info { background: var(--info-bg); color: var(--info); }
.badge.acc { background: rgb(var(--acc-rgb) / .12); color: var(--acc); }
.badge.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.avatar { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(145deg, rgb(var(--acc-rgb) / .2), rgb(var(--acc-rgb) / .08)); color: var(--acc); display: grid; place-items: center; font-weight: 800; font-size: 12.5px; flex: none; letter-spacing: -.02em; }
.avatar.lg { width: 60px; height: 60px; font-size: 20px; border-radius: 18px; }
.avatar.rank { font-family: var(--mono); font-size: 12px; }
.empty { text-align: center; padding: 44px 20px; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty .ic-wrap { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); margin-bottom: 6px; } .empty .ic-wrap svg { width: 26px; height: 26px; }
.empty p { margin: 0 0 12px; max-width: 360px; font-size: 13.5px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .toolbar .input { width: auto; min-width: 240px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: all .2s var(--ease); }
.chip svg { width: 13px; height: 13px; }
.chip:hover { border-color: var(--ink-4); color: var(--ink); transform: translateY(-1px); }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
:root[data-theme="dark"] .chip.active { background: var(--acc); color: #fff; border-color: var(--acc); }
.list { display: flex; flex-direction: column; } .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); transition: background .15s; } .list-item:last-child { border-bottom: 0; }
.list-item.click { cursor: pointer; } .list-item.click:hover { background: var(--surface-2); }
.list-item .t { font-weight: 700; font-size: 13.5px; } .list-item .s { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.timeline { position: relative; padding-left: 22px; } .timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--line-2), transparent); }
.timeline .ev { position: relative; padding: 2px 0 16px; } .timeline .ev::before { content: ''; position: absolute; left: -19px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px rgb(var(--acc-rgb) / .15); }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.kanban .col { background: var(--bg-2); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; border: 1px solid var(--line); }
.kanban .col h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 6px 8px 8px; display: flex; justify-content: space-between; font-weight: 800; }
.kanban .col h4 span { background: var(--surface); border-radius: 999px; padding: 0 8px; font-family: var(--mono); font-size: 11px; }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; box-shadow: var(--sh-1); transition: transform .22s var(--spring), box-shadow .22s, border-color .22s; }
.kcard:hover { border-color: rgb(var(--acc-rgb) / .5); transform: translateY(-2px); box-shadow: var(--sh-2); }
.kcard .n { font-weight: 700; font-size: 13.5px; } .kcard .d { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; display: flex; align-items: center; gap: 5px; } .kcard .d svg { width: 13px; height: 13px; color: var(--ink-3); }
.kcard .f { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.kcard.late { border-left: 3px solid var(--bad); }

/* ============ PDV ============ */
.pdv { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; min-height: calc(100vh - 120px); }
.pdv .catalog { display: flex; flex-direction: column; gap: 14px; }
.pdv .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: transform .2s var(--spring), box-shadow .2s, border-color .2s; min-height: 98px; position: relative; overflow: hidden; }
.pcard::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120px 60px at 100% 0%, rgb(var(--acc-rgb) / .12), transparent); opacity: 0; transition: opacity .25s; }
.pcard:hover { border-color: rgb(var(--acc-rgb) / .5); transform: translateY(-2px); box-shadow: var(--sh-2); } .pcard:hover::after { opacity: 1; }
.pcard:active { transform: scale(.97); }
.pcard .n { font-weight: 700; font-size: 13px; line-height: 1.3; } .pcard .p { color: var(--acc); font-weight: 800; margin-top: auto; font-size: 14.5px; letter-spacing: -.02em; } .pcard .e { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.pcard.out { opacity: .45; }
.pcard.added { animation: added .4s var(--spring); } @keyframes added { 30% { transform: scale(.94); border-color: var(--acc); } }
.cart { display: flex; flex-direction: column; position: sticky; top: 76px; max-height: calc(100vh - 96px); }
.cart .items { flex: 1; overflow: auto; } .citem { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 11px 18px; border-bottom: 1px solid var(--line); align-items: center; animation: rise .3s var(--ease); }
.citem .n { font-weight: 700; font-size: 13.5px; } .citem .q { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.citem .q button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-weight: 700; transition: all .15s; } .citem .q button:hover { background: var(--surface-3); }
.citem .q input { border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 4px; background: var(--surface); font-family: var(--mono); font-size: 12px; }
.cart .tot { padding: 16px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); }
.cart .tot .big { display: flex; justify-content: space-between; align-items: baseline; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pay-grid .btn.active { border-color: var(--acc); background: rgb(var(--acc-rgb) / .1); color: var(--acc); }

/* ============ modal, toasts, paleta ============ */
.overlay { position: fixed; inset: 0; background: rgb(8 10 20 / .5); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 50; padding: 20px; animation: fade .2s; }
.modal { background: var(--surface); border-radius: 20px; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: var(--sh-3); animation: pop .32s var(--spring); border: 1px solid var(--line); }
.modal.md { max-width: 740px; } .modal.lg { max-width: 980px; } .modal.sm { max-width: 430px; }
.modal .m-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.modal .m-b { padding: 20px 22px; overflow: auto; } .modal .m-f { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; background: var(--surface-2); border-radius: 0 0 20px 20px; }
.m-f .left { margin-right: auto; }
#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; align-items: center; }
.toast { background: var(--ink); color: var(--bg); padding: 11px 16px; border-radius: 12px; box-shadow: var(--sh-3); animation: pop .3s var(--spring); font-weight: 600; font-size: 13.5px; display: flex; gap: 10px; align-items: center; transition: opacity .3s, transform .3s; }
.toast svg { width: 16px; height: 16px; }
.toast.ok { background: var(--ok); color: #fff; } .toast.bad { background: var(--bad); color: #fff; }
.palette { position: fixed; inset: 0; background: rgb(8 10 20 / .45); backdrop-filter: blur(6px); z-index: 60; display: flex; justify-content: center; padding-top: 12vh; animation: fade .15s; }
.palette .box { width: 100%; max-width: 640px; background: var(--surface); border-radius: 18px; box-shadow: var(--sh-3); align-self: flex-start; overflow: hidden; animation: pop .25s var(--spring); border: 1px solid var(--line); }
.palette .in { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.palette input { flex: 1; border: 0; padding: 17px 0; font-size: 16px; background: transparent; outline: none; font-weight: 500; }
.palette .res { max-height: 52vh; overflow: auto; padding: 6px; } .palette .ri { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; border-radius: 10px; transition: background .12s; }
.palette .ri.sel, .palette .ri:hover { background: var(--surface-2); } .palette .ri.sel { box-shadow: inset 0 0 0 1px rgb(var(--acc-rgb) / .35); }
.palette .ri .k { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); } .palette .ri .k svg { width: 16px; height: 16px; }
.palette .ri .s { font-size: 12px; color: var(--ink-3); } .palette .ri > div { font-weight: 600; font-size: 13.5px; }
.palette .hint { padding: 8px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); display: flex; gap: 14px; }
.picker { position: relative; } .picker .drop { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-3); z-index: 20; max-height: 260px; overflow: auto; margin-top: 6px; padding: 4px; animation: pop .18s var(--ease); }
.picker .drop div { padding: 9px 12px; cursor: pointer; border-radius: 8px; font-weight: 600; font-size: 13px; } .picker .drop div:hover, .picker .drop div.sel { background: var(--surface-2); } .picker .drop .s { font-size: 12px; color: var(--ink-3); display: block; font-weight: 500; }

/* ============ onboarding ============ */
.onb { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; background: var(--bg); }
.onb .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; pointer-events: none; }
.onb .b1 { width: 50vw; height: 50vw; left: -15vw; top: -25vw; background: rgb(var(--acc-rgb) / .5); animation: drift 20s ease-in-out infinite; }
.onb .b2 { width: 40vw; height: 40vw; right: -12vw; bottom: -20vw; background: color-mix(in srgb, var(--acc) 40%, #2fd4b7); animation: drift2 26s ease-in-out infinite; opacity: .35; }
.onb .box { position: relative; width: 100%; max-width: 780px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--sh-3); padding: 44px 48px; animation: pop .5s var(--spring); }
.onb .step { font-size: 11.5px; color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.onb .step .bar { flex: 1; height: 3px; background: var(--surface-3); border-radius: 3px; overflow: hidden; } .onb .step .bar i { display: block; height: 100%; background: var(--acc); border-radius: 3px; transition: width .6s var(--ease); }
.onb h1 { font-size: 32px; margin-bottom: 8px; letter-spacing: -.03em; font-weight: 800; } .onb .lead { color: var(--ink-2); font-size: 15.5px; margin: 0 0 26px; line-height: 1.55; }
.onb .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 10px; }
.onb .stage { animation: slideUp .4s var(--ease); }
.seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.seg-card { border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: all .25s var(--spring); background: var(--surface); position: relative; overflow: hidden; }
.seg-card .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgb(var(--acc-rgb) / .1); color: var(--acc); transition: transform .3s var(--spring); } .seg-card .ico svg { width: 20px; height: 20px; }
.seg-card:hover { border-color: rgb(var(--acc-rgb) / .5); transform: translateY(-3px); box-shadow: var(--sh-2); } .seg-card:hover .ico { transform: scale(1.1) rotate(-6deg); }
.seg-card.active { border-color: var(--acc); background: rgb(var(--acc-rgb) / .06); box-shadow: 0 0 0 4px rgb(var(--acc-rgb) / .12); }
.seg-card .n { font-weight: 800; font-size: 14px; letter-spacing: -.015em; } .seg-card .d { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.preview { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-2); }
.preview .pv-top { background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 65%, #000)); color: #fff; padding: 14px 18px; font-weight: 800; display: flex; gap: 12px; align-items: center; }
.preview .pv-top .ico { width: 32px; height: 32px; border-radius: 10px; background: rgb(255 255 255 / .2); display: grid; place-items: center; } .preview .pv-top .ico svg { width: 18px; height: 18px; }
.preview .pv-body { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; background: var(--surface); }
.preview .pv-body div { background: var(--surface-2); border-radius: 9px; padding: 9px 11px; display: flex; gap: 8px; align-items: center; font-weight: 600; animation: rise .4s var(--ease) both; animation-delay: calc(var(--i) * 50ms); } .preview .pv-body svg { width: 14px; height: 14px; color: var(--ok); flex: none; }
.tenant-list { display: grid; gap: 10px; } .tenant { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; background: var(--surface); transition: all .25s var(--spring); }
.tenant:hover { border-color: rgb(var(--acc-rgb) / .5); transform: translateX(4px); box-shadow: var(--sh-2); } .tenant .e { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; } .tenant .e svg { width: 22px; height: 22px; }
.tenant .arrow { color: var(--ink-4); transition: transform .25s, color .25s; } .tenant:hover .arrow { transform: translateX(3px); color: var(--acc); }

/* ============ gráficos ============ */
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .bar { fill: var(--acc); opacity: .9; transition: opacity .15s, fill .15s; transform-origin: bottom; transform-box: fill-box; animation: grow .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.chart .bar:hover { opacity: 1; fill: color-mix(in srgb, var(--acc) 80%, #000); }
.chart .bar.dim { fill: var(--line-2); } .chart text { fill: var(--ink-3); font-size: 10.5px; font-family: var(--font); font-weight: 600; }
.chart .line { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) forwards; }
.chart .area { fill: url(#ga); animation: fade 1.2s .3s both; } .chart circle.pt { animation: fade .4s 1s both; }
.chart .donut circle { transition: stroke-width .2s; } .chart .donut circle:hover { stroke-width: 26; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.progress { height: 6px; background: var(--surface-3); border-radius: 4px; overflow: hidden; } .progress i { display: block; height: 100%; background: var(--acc); border-radius: 4px; transition: width .8s var(--ease); }
.receipt { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; background: var(--surface-2); padding: 18px; border-radius: 12px; border: 1px dashed var(--line-2); line-height: 1.6; }
@media print { body * { visibility: hidden; } .print-area, .print-area * { visibility: visible; } .print-area { position: absolute; left: 0; top: 0; width: 100%; } }

/* ============ responsivo ============ */
@media (max-width: 1100px) { .grid.main-side { grid-template-columns: 1fr; } .grid.three { grid-template-columns: 1fr 1fr; } .pdv { grid-template-columns: minmax(0, 1fr) 350px; } }
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; z-index: 10; gap: 2px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); }
  .sidebar .brand, .sidebar .nav-label, .sidebar .foot, .nav .pill { display: none; }
  .nav { display: flex; flex-direction: row; gap: 2px; width: 100%; } .nav a { flex-direction: column; gap: 3px; font-size: 10.5px; height: auto; padding: 7px 8px; min-width: 66px; } .nav .count { display: none; }
  .nav a.active { background: rgb(var(--acc-rgb) / .1); }
  .content { padding: 6px 14px 96px; gap: 14px; } .topbar { padding: 12px 14px 8px; } .search-btn { min-width: 0; }
  .search-btn span, .search-btn kbd { display: none; }
  .grid.two, .grid.three { grid-template-columns: 1fr; } .pdv { grid-template-columns: 1fr; } .cart { position: static; max-height: none; }
  .onb .box { padding: 28px 22px; } .onb h1 { font-size: 25px; }
  .preview .pv-body { grid-template-columns: 1fr; }
  .hero { flex-direction: column; align-items: flex-start; padding: 22px; } .hero .right { text-align: left; }
  h1 { font-size: 22px; }
}

/* ============ transições de tela (View Transitions) ============ */
.content { view-transition-name: content; }
.sidebar { view-transition-name: sidebar; }
.topbar { view-transition-name: topbar; }
::view-transition-old(content) { animation: vt-out .22s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(content) { animation: vt-in-fwd .42s var(--ease) both; }
:root[data-navdir="back"]::view-transition-new(content) { animation-name: vt-in-back; }
::view-transition-old(sidebar), ::view-transition-new(sidebar), ::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; }
::view-transition-group(content) { animation-duration: .42s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px) scale(.992); filter: blur(2px); } }
@keyframes vt-in-fwd { from { opacity: 0; transform: translateY(22px) scale(.992); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateY(-22px) scale(.992); } }

/* ============ arrastar e soltar ============ */
.kcard.dragging { opacity: .35; transform: scale(.97); border-style: dashed; }
.kcard.ghost { box-shadow: 0 30px 60px -20px rgb(0 0 0 / .45), 0 0 0 1px rgb(var(--acc-rgb) / .4); cursor: grabbing; opacity: .98; background: var(--surface); }
.kanban .col { transition: background .2s, box-shadow .2s, border-color .2s; }
.kanban .col.over { background: rgb(var(--acc-rgb) / .08); border-color: rgb(var(--acc-rgb) / .55); box-shadow: inset 0 0 0 1px rgb(var(--acc-rgb) / .35); }
.kanban .col.over h4 { color: var(--acc); }
.kcard { cursor: grab; touch-action: none; }
.kanban .hint { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }

/* ============ PDV: micro-interações ============ */
.btn.pulse { animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 8px 18px -8px rgb(var(--acc-rgb) / .8); } 50% { box-shadow: 0 10px 28px -6px rgb(var(--acc-rgb) / 1), 0 0 0 6px rgb(var(--acc-rgb) / .12); } }
.cart .card-h .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-size: 11.5px; font-weight: 800; font-family: var(--mono); }
.cart .card-h .count:empty, .cart .card-h .count[data-n="0"] { background: var(--surface-3); color: var(--ink-3); }
.citem.flash { animation: flash .6s var(--ease); } @keyframes flash { 0% { background: rgb(var(--acc-rgb) / .16); } 100% { background: transparent; } }
.check-anim { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto 12px; animation: pop .5s var(--spring); }
.check-anim svg { width: 32px; height: 32px; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .5s .25s var(--ease) forwards; stroke-width: 2.5; }
.input.invalid { border-color: var(--bad); box-shadow: 0 0 0 4px rgb(214 54 74 / .14); }
.content > .page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 820px) { .content > .page { gap: 14px; } }

/* ============ bloqueio, usuário e caixa ============ */
.user-chip { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 5px 10px 5px 5px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; color: var(--ink-3); }
.user-chip:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-1px); }
.user-chip .un { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .user-chip .un b { font-size: 12.5px; color: var(--ink); } .user-chip .un small { font-size: 10.5px; color: var(--ink-3); }
.caixa-chip { border-radius: 12px; padding: 8px 12px; font-size: 12.5px; }
.caixa-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); display: inline-block; }
.caixa-chip.open { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-bg); } .caixa-chip.open .dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); animation: pulse 2.2s ease-in-out infinite; }
.caixa-chip.closed { color: var(--ink-3); }
.lock { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; background: var(--bg); }
.lock .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; pointer-events: none; }
.lock .b1 { width: 50vw; height: 50vw; left: -15vw; top: -25vw; background: rgb(var(--acc-rgb) / .5); animation: drift 20s ease-in-out infinite; }
.lock .b2 { width: 40vw; height: 40vw; right: -12vw; bottom: -20vw; background: color-mix(in srgb, var(--acc) 40%, #2fd4b7); animation: drift2 26s ease-in-out infinite; opacity: .3; }
.lock-box { position: relative; width: 100%; max-width: 560px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--sh-3); padding: 30px 34px 34px; animation: pop .45s var(--spring); }
.lock-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .lock-head .logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, var(--acc), color-mix(in srgb, var(--acc) 70%, #000)); color: #fff; display: grid; place-items: center; } .lock-head .logo svg { width: 20px; height: 20px; }
.lock-head .n { font-weight: 800; font-size: 15px; } .lock-head .s { font-size: 12px; color: var(--ink-3); } .lock-head a { margin-left: auto; display: inline-flex; gap: 5px; align-items: center; color: var(--ink-3); }
.lock h1 { font-size: 26px; letter-spacing: -.03em; margin-bottom: 4px; } .lock .lead { color: var(--ink-2); margin: 0 0 18px; font-size: 14.5px; }
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.user-card { border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; padding: 16px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all .25s var(--spring); }
.user-card:hover { border-color: rgb(var(--acc-rgb) / .5); transform: translateY(-3px); box-shadow: var(--sh-2); } .user-card b { font-size: 13.5px; } .user-card small { font-size: 11.5px; color: var(--ink-3); display: inline-flex; gap: 4px; align-items: center; }
.pin-dots { display: flex; gap: 12px; justify-content: center; margin: 6px 0 18px; } .pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); transition: all .2s var(--spring); } .pin-dots i.on { background: var(--acc); border-color: var(--acc); transform: scale(1.15); box-shadow: 0 0 0 4px rgb(var(--acc-rgb) / .18); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; }
.pin-pad button { height: 58px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 20px; font-weight: 700; cursor: pointer; transition: all .15s var(--spring); }
.pin-pad button:hover { background: var(--surface-2); border-color: var(--line-2); } .pin-pad button:active { transform: scale(.94); background: rgb(var(--acc-rgb) / .12); }
.pin-pad button.ghost { background: transparent; border-color: transparent; color: var(--ink-3); } .pin-pad button.go { background: var(--acc); color: #fff; border-color: transparent; } .pin-pad button svg { width: 22px; height: 22px; }
.caixa-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.conf-row { display: grid; grid-template-columns: 1fr 120px 130px 110px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .conf-row:last-child { border-bottom: 0; }
.conf-row .input { text-align: right; font-family: var(--mono); }
@media (max-width: 820px) { .user-chip .un { display: none; } .caixa-chip { font-size: 0; gap: 0; padding: 10px; } .conf-row { grid-template-columns: 1fr 100px; } }

/* ============ importação, etiquetas, mesas, checklist, fotos ============ */
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 16px; border: 2px dashed var(--line-2); border-radius: var(--r); cursor: pointer; text-align: center; transition: all .2s; color: var(--ink-2); }
.drop svg { color: var(--ink-3); } .drop:hover, .drop.over { border-color: var(--acc); background: rgb(var(--acc-rgb) / .06); color: var(--acc); }
.mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.mesa { aspect-ratio: 1; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: all .22s var(--spring); position: relative; }
.mesa .num { font-size: 26px; font-weight: 800; letter-spacing: -.03em; } .mesa .tot { font-weight: 800; color: var(--acc); font-family: var(--mono); } .mesa .inf { font-size: 11.5px; color: var(--ink-3); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.mesa:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: rgb(var(--acc-rgb) / .5); }
.mesa.livre .num { color: var(--ink-3); } .mesa.ocupada { border-color: rgb(var(--acc-rgb) / .6); background: rgb(var(--acc-rgb) / .07); }
.mesa.late { border-color: var(--bad); } .mesa.late::after { content: ''; position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); animation: pulse 1.6s infinite; }
.chk { display: flex; flex-direction: column; gap: 6px; } .chk-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.chk-row .seg button { padding: 4px 9px; } .chk-row.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .chk-row.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-bg); }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; background: var(--surface-2); } .foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .foto:hover img { transform: scale(1.06); }
.foto .rm { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .6); color: #fff; cursor: pointer; display: grid; place-items: center; } .foto .rm svg { width: 12px; height: 12px; }
.foto-add { aspect-ratio: 1; border-radius: 10px; border: 2px dashed var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--ink-3); font-size: 11px; font-weight: 700; transition: all .2s; } .foto-add:hover { border-color: var(--acc); color: var(--acc); background: rgb(var(--acc-rgb) / .06); }
.lightbox { position: fixed; inset: 0; background: rgb(5 6 12 / .9); z-index: 80; display: grid; place-items: center; cursor: zoom-out; animation: fade .2s; } .lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 12px; box-shadow: var(--sh-3); animation: pop .3s var(--spring); }
.vac-badge { display: inline-flex; align-items: center; gap: 4px; }
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.topbar .greet { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .greet small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .search-btn { min-width: 0; } .search-btn span { display: none; } .caixa-chip { font-size: 0; gap: 0; padding: 10px; } .caixa-chip .dot { margin: 0; } }