/* ═══ PONTE DE TOKENS DA CASCA — 20/08/2026 ═══════════════════════════════
   Aqui vivia o reset do visualizador de Artifacts que veio colado no
   redesenho de 13/08 (light-dark() + !important). Com data-theme=light real
   (Fase 1 dos templates), ele resolvia pro ramo claro e rachava a tela.
   ESCURO abaixo = os valores efetivos que a casca sempre renderizou.
   CLARO = tokens do themes.css/tokens-light.css por skin, com fallback fixo. */
:root {
  --tzs-background: rgb(24 24 24);
  --tzs-foreground: rgb(255 255 255);
  --tzs-card: color-mix(in oklab, var(--tzs-foreground) 5%, var(--tzs-background));
  --tzs-card-foreground: rgb(255 255 255);
  --tzs-popover: rgb(45 45 45);
  --tzs-popover-foreground: rgb(255 255 255);
  --tzs-primary: rgb(131 195 255);
  --tzs-primary-foreground: rgb(13 13 13);
  --tzs-secondary: rgb(54 54 54 / 96%);
  --tzs-secondary-foreground: rgb(255 255 255);
  --tzs-muted: color-mix(in srgb, var(--tzs-foreground) 10%, transparent);
  --tzs-muted-foreground: rgb(255 255 255 / 49.8%);
  --tzs-accent-foreground: rgb(131 195 255);
  --tzs-destructive: rgb(255 133 73);
  --tzs-input: color-mix(in oklab, rgb(0 0 0) 10%, transparent);
  --tzs-ring: rgb(131 195 255 / 76%);
  --tzs-red: rgb(255 103 100);
  --tzs-thumb: rgb(255 255 255);  /* polegar de switch/slider: branco nos 2 modos */
  /* Conteudo das paginas (21/08, Sol): papeis de texto — escuro = as literais
     que as telas sempre usaram; claro = tokens do tema (bloco abaixo). */
  --tzs-texto-forte: #f4f3ef;
  --tzs-texto: #c9cad0;
  --tzs-texto-2: #a6a8ae;
  --tzs-texto-apagado: #9599a1;
  --tzs-link-ouro: #e2c56b;
  --tzs-verde-ok: #9ac6a5;
  --cursor-interaction: pointer;

  --font-sans: -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-base: var(--font-text-md-size, 14px);
  --font-size-normal: max(11px, var(--font-size-base));
  --font-size-tooltip: calc(var(--font-size-base) - 1px);
  --font-size-small: max(11px, calc(var(--font-size-base) - 2px));
  --font-size-h1: calc(var(--font-size-normal) * 1.7142857143);
  --font-size-h2: calc(var(--font-size-normal) * 1.4285714286);
  --font-size-h3: calc(var(--font-size-normal) * 1.2857142857);
  --font-weight-normal: 430;
  --font-weight-medium: 500;
  --line-height-normal: calc(var(--font-size-normal) * 1.5);
  --line-height-tooltip: calc(var(--font-size-tooltip) * 1.4285714286);
  --line-height-small: calc(var(--font-size-small) + 4px);
  --radius: var(--border-radius-lg, 12.5px);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-2xl: calc(var(--radius) * 1.6);
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px -1px rgb(0 0 0 / 8%);
  --checkmark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M12.8961 3.64101C13.1297 3.41418 13.4984 3.37523 13.7779 3.56581C14.0571 3.75635 14.1554 4.11331 14.0299 4.41347L13.9615 4.53847L7.71151 13.7045C7.59411 13.8767 7.4063 13.9877 7.19881 14.0072C6.99136 14.0267 6.78564 13.9533 6.63826 13.806L2.88826 10.056L2.79842 9.9457C2.6192 9.67407 2.64927 9.30496 2.88826 9.06581C3.12738 8.82669 3.49647 8.79676 3.76815 8.97597L3.8785 9.06581L7.03084 12.2182L12.8053 3.74941L12.8961 3.64101Z'/%3E%3C/svg%3E");

  --viz-text: var(--tzs-foreground);
  --viz-accent: var(--tzs-primary);
}

/* Claro: a ponte re-aponta pros tokens de skin (themes.css carrega DEPOIS
   desta folha nas duas cascas e define --bg-*, --text-*, --accent* por skin). */
html[data-theme="light"] {
  --tzs-background: var(--bg-primary, #F6F4EF);
  --tzs-foreground: var(--text-primary, #111111);
  --tzs-card: var(--bg-card, #FFFFFF);
  --tzs-card-foreground: var(--text-primary, #111111);
  --tzs-popover: var(--bg-card, #FFFFFF);
  --tzs-popover-foreground: var(--text-primary, #111111);
  --tzs-primary: var(--accent-text, var(--accent-hover, #24496E));
  --tzs-primary-foreground: #FFFFFF;
  --tzs-secondary: color-mix(in srgb, var(--text-primary, #111111) 5%, transparent);
  --tzs-secondary-foreground: var(--text-primary, #111111);
  --tzs-muted: color-mix(in srgb, var(--text-primary, #111111) 10%, transparent);
  --tzs-muted-foreground: var(--text-muted, #80858C);
  --tzs-accent-foreground: var(--accent-text, #24496E);
  --tzs-destructive: rgb(226 85 7);
  --tzs-input: color-mix(in srgb, var(--text-primary, #111111) 12%, transparent);
  --tzs-ring: var(--accent, #4A90E2);
  --tzs-texto-forte: var(--text-primary, #14140F);
  --tzs-texto: var(--text-primary, #24241E);
  --tzs-texto-2: var(--text-secondary, #4F4E47);
  --tzs-texto-apagado: #5D5C55;   /* 4.9:1 no fundo real #F7F6F3 */
  --tzs-link-ouro: var(--accent-text, #8A6A1F);
  --tzs-verde-ok: #2E6B45;
  --tzs-red: rgb(224 46 42);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html > body {
  margin: 0;
  padding: 0;
  color: var(--tzs-foreground);
  background: var(--tzs-background);
  font-family: var(--font-sans);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

a {
  color: color-mix(in srgb, var(--viz-accent) 80%, var(--viz-text) 20%);
  cursor: pointer;
  font-weight: var(--font-weight-medium, 500);
  text-decoration: none;
  text-underline-offset: 2px;
}

a:is(:hover, :focus-visible) {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 0.5px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block: 0;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}

h3,
h4,
h5,
h6 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

b,
strong,
th {
  font-weight: var(--font-weight-medium);
}

code:not(pre code) {
  display: inline;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  corner-shape: superellipse(1.5);
  background: var(--tzs-muted);
  font-family: var(--font-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  word-break: break-word;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.table {
  width: 100%;
  border-collapse: collapse;
  color: var(--tzs-foreground);
  font: inherit;
  text-align: start;
}

.table :is(th, td) {
  padding-block: 10px;
  padding-inline: 0 24px;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}

.table-responsive > .table :is(th, td) {
  overflow-wrap: break-word;
}

.table :is(th, td):last-child {
  padding-inline-end: 0;
}

.table :is(caption, thead th) {
  font-weight: 600;
}

.table thead th {
  padding-block: 8px;
  border-bottom-color: color-mix(in srgb, var(--tzs-foreground) 16%, transparent);
}

.table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.table.table-sm :is(th, td) {
  padding-block: 6px;
}

.table.table-sm :is(th, td):not(:last-child) {
  padding-inline-end: 16px;
}

.table :is(.text-end, [align="right"]) {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.table :is(.text-center, [align="center"]) {
  text-align: center;
}

.table .text-nowrap {
  white-space: nowrap;
}

#widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: transparent !important;
}

.card {
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  overflow-wrap: break-word;
  border-radius: var(--radius-2xl);
  corner-shape: superellipse(1.5);
  color: var(--tzs-card-foreground);
  background: var(--tzs-card);
}

#widget > :not(.card) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tooltip {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(
    20rem,
    var(--tooltip-available-width, calc(100vw - 10px)),
    calc(100vw - 10px)
  );
  max-height: min(
    var(--tooltip-available-height, calc(100vh - 10px)),
    calc(100vh - 10px)
  );
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  corner-shape: superellipse(1.5);
  color: var(--tzs-popover-foreground);
  background: var(--tzs-popover);
  box-shadow: none;
  font-size: var(--font-size-tooltip);
  line-height: var(--line-height-tooltip);
  overflow-wrap: break-word;
  white-space: normal;
  pointer-events: none;
  user-select: none;
}

.viz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(180px, 24%), 1fr));
  gap: 10px;
}

.viz-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.viz-stat-value {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}

.viz-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.viz-badge {
  padding: 3px 8px;
  border-radius: var(--radius-full);
  color: var(--tzs-accent-foreground);
  background: var(--accent);
  font-weight: var(--font-weight-medium);
}

small,
.text-small,
.viz-badge {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.text-muted {
  color: var(--tzs-muted-foreground);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.viz-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.viz-controls > .form-label {
  display: grid;
  min-width: min(100%, 260px);
  flex: 1 1 280px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  margin-bottom: 0;
}

.viz-controls > .form-label > :is(.form-control, .form-range, .form-select) {
  grid-column: 1 / -1;
}

.btn,
.form-check-input,
.form-control,
.form-range,
.form-select {
  font: inherit;
}

.btn {
  appearance: button;
  display: inline-flex;
  inline-size: fit-content;
  max-inline-size: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0 8px;
  -webkit-app-region: no-drag;
  border: 1px solid var(--tzs-input);
  border-radius: var(--radius-lg);
  corner-shape: superellipse(1.5);
  color: var(--tzs-secondary-foreground);
  background: var(--tzs-secondary);
  cursor: var(--cursor-interaction, pointer);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.btn:is(.btn-block, .viz-tile) {
  inline-size: 100%;
}

.btn.viz-tile {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

a.btn {
  cursor: pointer;
  text-decoration: none;
}

.btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--tzs-foreground) 6%, var(--tzs-secondary));
}

.btn-primary {
  border-color: transparent;
  color: var(--tzs-primary-foreground);
  background: var(--tzs-foreground);
  background-clip: padding-box;
}

.btn-primary .text-muted {
  color: color-mix(in srgb, var(--tzs-primary-foreground) 50%, transparent);
}

.btn-primary:not(:disabled):hover {
  background: color-mix(in srgb, var(--tzs-foreground) 80%, transparent);
  background-clip: padding-box;
}

.btn-ghost {
  border-color: transparent;
  color: var(--tzs-muted-foreground);
  background: transparent;
}

.btn-ghost:not(:disabled):hover {
  color: var(--tzs-foreground);
  background: color-mix(in srgb, var(--tzs-foreground) 6%, var(--tzs-secondary));
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

[data-lucide] {
  stroke-width: 1.6;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--tzs-foreground);
}

.form-control {
  display: block;
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  outline: none;
  border: 1px solid var(--tzs-input);
  border-radius: var(--radius-lg);
  corner-shape: superellipse(1.5);
  color: var(--tzs-foreground);
  background: var(--tzs-secondary);
}

.form-control::placeholder {
  color: var(--tzs-muted-foreground);
}

.form-control[type="file"] {
  padding: 0;
  overflow: hidden;
  cursor: var(--cursor-interaction, pointer);
}

.form-control[type="file"]::file-selector-button {
  min-height: 26px;
  margin-right: 8px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--tzs-input);
  color: var(--tzs-secondary-foreground);
  background: var(--tzs-secondary);
  cursor: inherit;
  font: inherit;
}

.form-control[type="file"]:not(:disabled):hover::file-selector-button {
  background: color-mix(in srgb, var(--tzs-foreground) 6%, var(--tzs-secondary));
}

.form-control-color[type="color"] {
  width: 40px;
  height: 28px;
  padding: 3px;
  cursor: var(--cursor-interaction, pointer);
}

.form-control-color[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.form-control-color[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--radius-lg) - 4px);
  corner-shape: superellipse(1.5);
}

textarea.form-control {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  resize: vertical;
}

.form-control:focus-visible {
  border-color: var(--tzs-ring);
  box-shadow: inset 0 0 0 1px var(--tzs-ring);
}

.form-control:disabled,
.form-select:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.form-select {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 32px 0 8px;
  outline: none;
  border: 1px solid var(--tzs-input);
  border-radius: var(--radius-lg);
  corner-shape: superellipse(1.5);
  color: var(--tzs-foreground);
  background-color: var(--tzs-secondary);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tzs-muted-foreground) 50%),
    linear-gradient(135deg, var(--tzs-muted-foreground) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50%;
  background-repeat: no-repeat;
  background-size: 4px 4px;
  cursor: var(--cursor-interaction, default);
}

.form-select:not(:disabled):hover {
  background-color: color-mix(in srgb, var(--tzs-foreground) 6%, var(--tzs-secondary));
}

.form-select:focus-visible {
  border-color: var(--tzs-ring);
  box-shadow: inset 0 0 0 1px var(--tzs-ring);
}

.form-check {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 6px;
}

.form-check-input {
  appearance: none;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid var(--tzs-input);
  color: var(--tzs-primary-foreground);
  background-color: transparent;
  cursor: var(--cursor-interaction, default);
  transition:
    background-color 150ms,
    border-color 150ms,
    box-shadow 150ms;
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
  border-color: var(--tzs-input);
  border-radius: var(--radius-sm);
  corner-shape: superellipse(1.5);
  background-color: var(--tzs-secondary);
  box-shadow: var(--shadow-sm);
}

.form-check:not(.form-switch)
  .form-check-input:not(:disabled):not(:checked):hover {
  background-color: var(--tzs-card);
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
  border-color: var(--tzs-primary);
  background-color: var(--tzs-primary);
}

.form-check:not(.form-switch)
  .form-check-input[type="checkbox"]:checked::before {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--tzs-primary-foreground);
  content: "";
  mask: var(--checkmark-image) center / 12px 12px no-repeat;
}

.form-check-input[type="radio"] {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
}

.form-check-input[type="radio"]:checked {
  border: 2px solid var(--tzs-primary);
  background:
    radial-gradient(circle, var(--tzs-primary-foreground) 0 2.5px, transparent 3px),
    var(--tzs-primary);
}

.form-check:not(.form-switch) .form-check-input:focus-visible {
  outline: 2px solid var(--tzs-ring);
  outline-offset: 2px;
}

.form-check:not(.form-switch) .form-check-input:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.form-check:not(.form-switch) .form-check-input:disabled + .form-check-label {
  cursor: not-allowed;
}

.form-switch .form-check-input:disabled,
.form-switch .form-check-input:disabled + .form-check-label {
  cursor: not-allowed;
  opacity: 0.6;
}

.form-check-label {
  color: var(--tzs-foreground);
  cursor: var(--cursor-interaction, default);
}

.form-switch .form-check-input {
  position: relative;
  width: 32px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--tzs-muted);
  box-shadow: none;
  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1);
}

.form-switch .form-check-input::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid var(--tzs-thumb);
  border-radius: var(--radius-full);
  background: var(--tzs-thumb);
  box-shadow: var(--shadow-sm);
  content: "";
  transform: translate(2px, -50%);
  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
}

.form-switch .form-check-input:checked {
  background: var(--tzs-primary);
}

.form-switch .form-check-input:checked::before {
  transform: translate(14px, -50%);
}

.form-switch .form-check-input:focus-visible {
  box-shadow: 0 0 0 2px var(--tzs-ring);
}

.form-range {
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  flex: 1;
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  accent-color: var(--tzs-primary);
  background: linear-gradient(
      color-mix(in srgb, var(--tzs-foreground) 7%, transparent),
      color-mix(in srgb, var(--tzs-foreground) 7%, transparent)
    )
    center / 100% 2px no-repeat;
}

.form-range::-webkit-slider-runnable-track {
  height: 28px;
  background: transparent;
}

.form-range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--tzs-thumb);
}

.form-range:focus-visible::-webkit-slider-thumb {
  border-color: var(--tzs-ring);
  box-shadow: inset 0 0 0 1px var(--tzs-ring);
}

.form-range::-moz-range-track {
  height: 28px;
  background: transparent;
}

.form-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--tzs-thumb);
}

.form-range:focus-visible::-moz-range-thumb {
  border-color: var(--tzs-ring);
  box-shadow: inset 0 0 0 1px var(--tzs-ring);
}

.form-range:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.btn:not(.btn-primary, .viz-tile):is(
    [aria-pressed="true"],
    [aria-selected="true"],
    .is-selected
  ) {
  border-color: var(--tzs-primary);
  color: var(--tzs-primary-foreground);
  background: var(--tzs-primary);
}

.btn.viz-tile:is([aria-pressed="true"], [aria-selected="true"], .is-selected) {
  border-color: var(--tzs-primary);
  box-shadow: inset 0 0 0 1px var(--tzs-primary);
}

.btn:focus-visible {
  outline: 2px solid var(--tzs-ring);
  outline-offset: 2px;
}

svg {
  display: block;
  max-width: 100%;
  height: auto;
}

#widget > svg {
  width: 100%;
}

/* Model-authored chart rules can otherwise stretch icons after these styles load. */
svg.lucide {
  display: block;
  width: 16px !important;
  height: 16px !important;
  flex: none;
  margin: 0 !important;
  stroke-width: 1.6;
}

.text-warning,
.text-destructive {
  color: var(--tzs-destructive);
}

html>body{padding:0}


    #tizze-complete {
      color: #f4f3ef;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #08090b;
      border: 1px solid #28292e;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 22px 64px rgba(0,0,0,.36);
    }
    #tizze-complete * { box-sizing: border-box; }
    #tizze-complete button, #tizze-complete textarea { font: inherit; }
    #tizze-complete button { cursor: pointer; }
    #tizze-complete .tc-shell { position: relative; min-height: 760px; padding-left: 72px; background: radial-gradient(circle at 62% -10%, rgba(219,186,93,.07), transparent 34%), #090a0c; }
    #tizze-complete .tc-sidebar { position: absolute; inset: 0 auto 0 0; z-index: 20; width: 72px; background: #0e0f12; border-right: 1px solid #28292e; padding: 17px 10px 13px; display: flex; flex-direction: column; overflow: hidden; transition: width .2s ease, box-shadow .2s ease; }
    #tizze-complete .tc-sidebar:hover, #tizze-complete .tc-sidebar:focus-within, #tizze-complete .tc-sidebar.is-pinned { width: 218px; box-shadow: 18px 0 46px rgba(0,0,0,.34); }
    /* [13/08] FIXADO = o menu entra no layout: o palco reserva os 218px. Sem isto
       o pin deixava a sidebar aberta POR CIMA do conteudo (o hover-overlay do
       prototipo-cartao virava permanente). So desktop — no celular a sidebar e a
       barra inferior. A classe tc-shell-pinned e posta pelo JS do pino, junto
       com a is-pinned (tz-shell-foot.php e tz-chrome.php). */
    @media (min-width: 761px) {
      #tizze-complete .tc-shell.tc-shell-pinned { padding-left: 218px; }
      #tizze-complete .tc-shell.tc-shell-pinned .tc-sidebar { box-shadow: none; }
    }
    #tizze-complete .tc-brand-lockup { height: 39px; display: flex; align-items: center; gap: 11px; padding: 0 7px; white-space: nowrap; margin-bottom: 17px; }
    #tizze-complete .tc-mark { width: 28px; height: 28px; flex: none; display: block; border-radius: 7px; }
    #tizze-complete .tc-word { font-size: 18px; font-weight: 500; letter-spacing: -.04em; opacity: 0; transition: opacity .12s ease; }
    #tizze-complete .tc-sidebar:hover .tc-word, #tizze-complete .tc-sidebar:focus-within .tc-word, #tizze-complete .tc-sidebar.is-pinned .tc-word { opacity: 1; }
    #tizze-complete .tc-pin { margin-left: auto; width: 27px; height: 27px; border: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; color: #8c8f97; opacity: 0; }
    #tizze-complete .tc-sidebar:hover .tc-pin, #tizze-complete .tc-sidebar:focus-within .tc-pin, #tizze-complete .tc-sidebar.is-pinned .tc-pin { opacity: 1; }
    #tizze-complete .tc-pin:hover, #tizze-complete .tc-pin[aria-pressed="true"] { background: #252218; color: #e2c56b; }
    #tizze-complete .tc-nav-section { color: var(--tzs-texto-apagado, #8b8e96); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 0 10px 7px; white-space: nowrap; opacity: 0; }
    #tizze-complete .tc-sidebar:hover .tc-nav-section, #tizze-complete .tc-sidebar:focus-within .tc-nav-section, #tizze-complete .tc-sidebar.is-pinned .tc-nav-section { opacity: 1; }
    #tizze-complete .tc-nav { display: grid; gap: 3px; }
    #tizze-complete .tc-nav + .tc-nav-section { margin-top: 16px; }
    #tizze-complete .tc-nav-item { position: relative; width: 100%; min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: #a6a8ae; display: flex; align-items: center; gap: 11px; padding: 9px 10px; white-space: nowrap; text-align: left; }
    #tizze-complete .tc-nav-item:hover { background: #1a1b20; color: #f1f1f2; }
    #tizze-complete .tc-nav-item.is-active { background: #262218; color: #e5c769; }
    #tizze-complete .tc-nav-item i { width: 19px; flex: none; }
    #tizze-complete .tc-nav-text { opacity: 0; transition: opacity .12s ease; font-size: 13px; }
    #tizze-complete .tc-sidebar:hover .tc-nav-text, #tizze-complete .tc-sidebar:focus-within .tc-nav-text, #tizze-complete .tc-sidebar.is-pinned .tc-nav-text { opacity: 1; }
    #tizze-complete .tc-nav-status { margin-left: auto; color: #8fc39e; font-size: 12px; opacity: 0; }
    #tizze-complete .tc-sidebar:hover .tc-nav-status, #tizze-complete .tc-sidebar:focus-within .tc-nav-status, #tizze-complete .tc-sidebar.is-pinned .tc-nav-status { opacity: 1; }
    #tizze-complete .tc-nav-dot { position: absolute; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #79b98c; }
    #tizze-complete .tc-sidebar:hover .tc-nav-dot, #tizze-complete .tc-sidebar:focus-within .tc-nav-dot, #tizze-complete .tc-sidebar.is-pinned .tc-nav-dot { display: none; }
    #tizze-complete .tc-side-foot { margin-top: auto; border-top: 1px solid #292a2f; padding-top: 10px; }
    #tizze-complete .tc-balance { color: #e1c469; }
    #tizze-complete .tc-main { min-width: 0; }
    #tizze-complete .tc-appbar { min-height: 65px; background: rgba(14,15,18,.96); border-bottom: 1px solid #28292e; padding: 11px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    #tizze-complete .tc-location { min-width: 0; }
    #tizze-complete .tc-location small { display: block; color: var(--tzs-texto-apagado, #8b8e96); margin-bottom: 2px; font-size: 12px; }
    #tizze-complete .tc-location strong { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tizze-complete .tc-app-actions { display: flex; align-items: center; gap: 8px; }
    #tizze-complete .tc-connection-shortcut, #tizze-complete .tc-brand-switch, #tizze-complete .tc-profile { border: 1px solid #32343a; background: #15161a; color: #d6d6d9; border-radius: 10px; min-height: 38px; padding: 8px 10px; display: flex; align-items: center; gap: 7px; }
    #tizze-complete .tc-connection-shortcut:hover, #tizze-complete .tc-brand-switch:hover, #tizze-complete .tc-profile:hover { border-color: #555047; }
    #tizze-complete .tc-connection-shortcut span { font-size: 12px; color: var(--tzs-texto-2); }
    #tizze-complete .tc-connection-shortcut span.tc-conn-ok { color: var(--tzs-verde-ok); }  /* verde SO com rede ligada (semantica, Sol) */
    #tizze-complete .tc-brand-wrap { position: relative; }
    #tizze-complete .tc-brand-switch { min-width: 166px; justify-content: space-between; }
    #tizze-complete .tc-brand-switch > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
    #tizze-complete .tc-brand-switch strong { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tizze-complete .tc-brand-bullet { width: 19px; height: 19px; flex: none; border-radius: 6px; display: grid; place-items: center; background: #342f21; color: #e4c86e; font-size: 9px; }
    #tizze-complete .tc-brand-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 40; width: 238px; padding: 7px; border: 1px solid #33343a; border-radius: 13px; background: #15161a; box-shadow: 0 18px 48px rgba(0,0,0,.44); display: none; }
    #tizze-complete .tc-brand-menu.is-open { display: block; }
    #tizze-complete .tc-brand-menu-label { color: var(--tzs-texto-apagado, #8b8e96); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; padding: 6px 8px 5px; }
    #tizze-complete .tc-brand-option { width: 100%; border: 0; background: transparent; color: #d7d7da; padding: 9px 8px; border-radius: 9px; display: flex; align-items: center; gap: 9px; text-align: left; }
    #tizze-complete .tc-brand-option:hover, #tizze-complete .tc-brand-option.is-current { background: #252218; }
    #tizze-complete .tc-brand-option span:nth-child(2) { min-width: 0; }
    #tizze-complete .tc-brand-option strong { display: block; font-size: 13px; font-weight: 500; }
    #tizze-complete .tc-brand-option small { display: block; color: var(--tzs-texto-apagado, #8b8e96); font-size: 13px; margin-top: 2px; }
    #tizze-complete .tc-brand-check { margin-left: auto; color: #8fc39e; }
    #tizze-complete .tc-manage-brands { width: 100%; margin-top: 4px; padding: 9px; border: 1px solid #303137; border-radius: 9px; background: #1b1c20; color: #e2c56b; text-align: center; font-size: 12px; }
    #tizze-complete .tc-profile { width: 38px; justify-content: center; padding: 0; border-radius: 50%; background: #d4b75d; color: #17150e; font-weight: 500; }
    #tizze-complete .tc-content { padding: 20px; }
    #tizze-complete .tc-page { max-width: var(--tz-page-max, 1760px); margin: 0 auto; }
    #tizze-complete .tc-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
    #tizze-complete .tc-page-head h2 { margin: 0 0 5px; font-size: 23px; font-weight: 500; letter-spacing: -.03em; }
    #tizze-complete .tc-page-head p { margin: 0; color: #8a8d94; font-size: 13px; }
    #tizze-complete .tc-primary, #tizze-complete .tc-secondary, #tizze-complete .tc-ghost { border-radius: 9px; padding: 8px 11px; font-size: 12px; }
    #tizze-complete .tc-primary { border: 1px solid #dfc163; background: #dfc163; color: #17150e; font-weight: 500; }
    #tizze-complete .tc-secondary { border: 1px solid #383940; background: #1a1b20; color: #e6e6e8; }
    #tizze-complete .tc-ghost { border: 0; background: transparent; color: #a8abb2; }
    #tizze-complete .tc-panel { border: 1px solid #303137; background: #131418; border-radius: 14px; }
    #tizze-complete .tc-grid { display: grid; gap: 12px; }
    #tizze-complete .tc-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #tizze-complete .tc-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
    #tizze-complete .tc-summary { padding: 15px; }
    #tizze-complete .tc-summary small { display: block; color: var(--tzs-texto-apagado, #8b8e96); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
    #tizze-complete .tc-summary strong { display: block; font-size: 18px; font-weight: 500; margin-bottom: 4px; }
    #tizze-complete .tc-summary span { color: #898c93; font-size: 13px; }
    #tizze-complete .tc-list { overflow: hidden; }
    #tizze-complete .tc-list-head, #tizze-complete .tc-list-row { display: grid; grid-template-columns: minmax(0,1.5fr) .8fr .8fr auto; gap: 10px; align-items: center; padding: 12px 14px; }
    #tizze-complete .tc-list-head { color: var(--tzs-texto-apagado, #8b8e96); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid #2b2c31; }
    #tizze-complete .tc-list-row + .tc-list-row { border-top: 1px solid #27282d; }
    #tizze-complete .tc-list-row strong { display: block; font-size: 13px; font-weight: 500; }
    #tizze-complete .tc-list-row small { display: block; color: var(--tzs-texto-apagado, #8b8e96); font-size: 13px; margin-top: 3px; }
    #tizze-complete .tc-list-row > span { color: #a6a8ae; font-size: 13px; }
    #tizze-complete .tc-state { display: inline-flex; width: fit-content; border: 1px solid #3a3b40; border-radius: 999px; padding: 4px 7px; font-size: 12px; }
    #tizze-complete .tc-state.gold { color: #e3c86e; background: #252218; }
    #tizze-complete .tc-state.green { color: #9ac6a5; background: #17231b; }
    #tizze-complete .tc-state.blue { color: #a6bad7; background: #18202b; }
    #tizze-complete .tc-state.red { color: #ffb4ab; background: #3b1717; border-color: #8f3b35; }
    #tizze-complete .tc-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; padding: 6px; margin-bottom: 14px; }
    #tizze-complete .tc-step { border: 0; background: transparent; color: var(--tzs-texto-apagado, #8b8e96); border-radius: 9px; padding: 9px 7px; display: flex; align-items: center; gap: 7px; text-align: left; min-width: 0; }
    #tizze-complete .tc-step:hover { background: #1b1c21; color: #c6c7ca; }
    #tizze-complete .tc-step.is-current { background: #282318; color: #e2c568; }
    #tizze-complete .tc-step.is-done { color: #8ebf9b; }
    #tizze-complete .tc-step-num { width: 23px; height: 23px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 9px; }
    #tizze-complete .tc-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
    #tizze-complete .tc-create-work { display: grid; grid-template-columns: minmax(0,1fr) 220px; min-height: 530px; overflow: hidden; }
    #tizze-complete .tc-chat-area { padding: 20px; display: flex; flex-direction: column; min-width: 0; }
    #tizze-complete .tc-stage-head { margin-bottom: 17px; }
    #tizze-complete .tc-stage-head strong { display: block; font-size: 18px; font-weight: 500; margin-bottom: 4px; }
    #tizze-complete .tc-stage-head span { color: #85888f; font-size: 12px; }
    #tizze-complete .tc-chat { display: grid; gap: 14px; max-width: 680px; width: 100%; margin: 0 auto; }
    #tizze-complete .tc-msg { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 9px; }
    #tizze-complete .tc-msg-avatar { width: 26px; height: 26px; border: 1px solid #33343a; border-radius: 8px; display: grid; place-items: center; color: #e2c568; background: #1b1c21; font-size: 10px; }
    #tizze-complete .tc-msg.user .tc-msg-avatar { border-radius: 50%; color: #f2f2f3; background: #2b2c31; }
    #tizze-complete .tc-msg-body { color: #d2d3d6; font-size: 13px; line-height: 1.55; padding-top: 3px; }
    #tizze-complete .tc-msg-body b { color: #f5f4f1; font-weight: 500; }
    #tizze-complete .tc-result { margin-top: 9px; border: 1px solid #303137; background: #17181c; border-radius: 12px; overflow: hidden; }
    #tizze-complete .tc-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border-bottom: 1px solid #292a2f; }
    #tizze-complete .tc-result-head strong { font-size: 12px; font-weight: 500; }
    #tizze-complete .tc-result-head span { color: #93c2a0; font-size: 12px; }
    #tizze-complete .tc-result-body { padding: 11px; }
    #tizze-complete .tc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
    #tizze-complete .tc-tag { border: 1px solid #37383e; border-radius: 999px; color: #9b9ea5; padding: 4px 7px; font-size: 12px; }
    #tizze-complete .tc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    #tizze-complete .tc-quick { margin-top: 13px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
    #tizze-complete .tc-quick button { border: 1px solid #303137; border-radius: 10px; background: #15161a; color: #b6b8bd; padding: 9px; display: flex; align-items: center; gap: 7px; text-align: left; font-size: 13px; }
    #tizze-complete .tc-quick button:hover { border-color: #5b5140; color: #e3c86e; }
    #tizze-complete .tc-compose { max-width: 680px; width: 100%; margin: auto auto 0; border: 1px solid #37383e; background: #17181c; border-radius: 13px; padding: 9px; }
    #tizze-complete .tc-compose textarea { width: 100%; min-height: 48px; border: 0; resize: vertical; outline: 0; background: transparent; color: #ededee; padding: 2px 3px 8px; font-size: 13px; }
    #tizze-complete .tc-compose textarea::placeholder { color: #6f7279; }
    #tizze-complete .tc-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    #tizze-complete .tc-toolset { display: flex; gap: 3px; }
    #tizze-complete .tc-icon { border: 0; background: transparent; color: #9699a0; width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; }
    #tizze-complete .tc-icon:hover { background: #24252a; color: #f2f2f3; }
    #tizze-complete .tc-send { border: 0; width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: #dec061; color: #17150e; }
    #tizze-complete .tc-context { background: #101115; border-left: 1px solid #2c2d32; padding: 17px 14px; }
    #tizze-complete .tc-context-title { color: #c7c8cb; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 13px; }
    #tizze-complete .tc-context-item { border-top: 1px solid #292a2f; padding: 11px 0; }
    #tizze-complete .tc-context-item:first-of-type { border-top: 0; padding-top: 0; }
    #tizze-complete .tc-context-item small { display: block; color: #71747b; font-size: 13px; margin-bottom: 5px; }
    #tizze-complete .tc-context-item span { display: block; color: #c5c6ca; font-size: 13px; line-height: 1.4; }
    #tizze-complete .tc-progress { height: 5px; margin-top: 7px; background: #28292e; border-radius: 999px; overflow: hidden; }
    #tizze-complete .tc-progress i { display: block; height: 100%; width: 40%; background: #d8bb5e; border-radius: inherit; transition: width .18s ease; }
    #tizze-complete .tc-brand-card { padding: 15px; }
    #tizze-complete .tc-brand-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
    #tizze-complete .tc-brand-logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #2b271c; color: #e2c568; }
    #tizze-complete .tc-brand-card-head strong { display: block; font-size: 13px; font-weight: 500; }
    #tizze-complete .tc-brand-card-head small { display: block; color: var(--tzs-texto-apagado, #8b8e96); margin-top: 3px; font-size: 12px; }
    #tizze-complete .tc-completion { display: flex; justify-content: space-between; gap: 8px; color: #8d9097; font-size: 12px; margin-bottom: 6px; }
    #tizze-complete .tc-completion-bar { height: 6px; background: #28292e; border-radius: 999px; overflow: hidden; }
    #tizze-complete .tc-completion-bar span { display: block; height: 100%; background: #d8bb5e; border-radius: inherit; }
    #tizze-complete .tc-function-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
    #tizze-complete .tc-function { border: 1px solid #303137; background: #15161a; border-radius: 10px; padding: 11px; }
    #tizze-complete .tc-function strong { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
    #tizze-complete .tc-function span { color: var(--tzs-texto-apagado, #81848b); font-size: 13px; line-height: 1.4; }
    #tizze-complete .tc-calendar { padding: 14px; }
    #tizze-complete .tc-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    #tizze-complete .tc-cal-head strong { font-size: 13px; font-weight: 500; }
    #tizze-complete .tc-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
    #tizze-complete .tc-day { min-height: 62px; border: 1px solid #292a2f; border-radius: 8px; padding: 6px; color: var(--tzs-texto-apagado, #8b8e96); font-size: 12px; }
    #tizze-complete .tc-day.has-post { background: #18191d; color: #c4c5c8; }
    #tizze-complete .tc-day span { display: block; margin-top: 6px; padding: 3px 4px; border-radius: 5px; background: #282318; color: #dfc46b; line-height: 1.25; }
    #tizze-complete .tc-network-list { display: grid; gap: 8px; }
    #tizze-complete .tc-network { display: grid; grid-template-columns: 35px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid #303137; background: #15161a; border-radius: 11px; }
    #tizze-complete .tc-network-logo { width: 35px; height: 35px; border: 1px solid #35363c; border-radius: 9px; display: grid; place-items: center; color: #d6d7da; font-size: 10px; }
    #tizze-complete .tc-network strong { display: block; font-size: 13px; font-weight: 500; }
    #tizze-complete .tc-network small { display: block; color: var(--tzs-texto-apagado, #8b8e96); font-size: 13px; margin-top: 3px; }
    #tizze-complete .tc-network button { min-width: 72px; }
    #tizze-complete .tc-note { color: #7d8087; font-size: 13px; line-height: 1.45; margin-top: 10px; }
    #tizze-complete .tc-toast { position: absolute; z-index: 60; right: 18px; bottom: 18px; max-width: 280px; border: 1px solid #3c3d42; background: #18191d; color: #e6e6e8; border-radius: 11px; padding: 10px 12px; font-size: 13px; box-shadow: 0 14px 38px rgba(0,0,0,.4); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .15s, transform .15s; }
    #tizze-complete .tc-toast.is-visible { opacity: 1; transform: translateY(0); }
    @media (max-width: 760px) {
      #tizze-complete .tc-shell { padding-left: 0; padding-bottom: calc(59px + env(safe-area-inset-bottom, 0px)); }
      /* 17/08: era `absolute`, que cola no fim do DOCUMENTO — a barra so aparecia
         depois de rolar a pagina inteira ate o fim. `fixed` cola na TELA, que e o
         que se espera de barra de rodape no celular.
         Funciona porque nenhum ancestral tem transform/filter/will-change: se
         tivesse, `fixed` viraria `absolute` de novo e o conserto seria invisivel.
         O z-index segue 20 de proposito: menu suspenso (40) e a folha do "Mais"
         (90) precisam cobrir a barra, nao o contrario.
         env(safe-area-inset-bottom) e 0 no Android; no iPhone tira a barra de
         debaixo da faixa do gesto de inicio. */
      #tizze-complete .tc-sidebar, #tizze-complete .tc-sidebar:hover, #tizze-complete .tc-sidebar:focus-within, #tizze-complete .tc-sidebar.is-pinned { position: fixed; inset: auto 0 0; width: 100%; height: calc(59px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid #28292e; box-shadow: none; display: block; }
      #tizze-complete .tc-brand-lockup, #tizze-complete .tc-nav-section, #tizze-complete .tc-nav.secondary, #tizze-complete .tc-side-foot { display: none; }
      #tizze-complete .tc-nav.primary { grid-template-columns: repeat(5,1fr); gap: 2px; }
      #tizze-complete .tc-nav-item { min-height: 46px; padding: 5px 2px; flex-direction: column; justify-content: center; gap: 3px; }
      #tizze-complete .tc-nav-text, #tizze-complete .tc-sidebar:hover .tc-nav-text, #tizze-complete .tc-sidebar:focus-within .tc-nav-text, #tizze-complete .tc-sidebar.is-pinned .tc-nav-text { opacity: 1; font-size: 12px; }
      #tizze-complete .tc-nav-dot, #tizze-complete .tc-nav-status { display: none; }
      #tizze-complete .tc-appbar { padding: 10px 12px; }
      #tizze-complete .tc-connection-shortcut { display: none; }
      /* 16/08: este min-width era o que cortava a tela no celular. Com ele, a barra
         de cima nao conseguia ficar menor que 408px e empurrava a largura do
         documento inteiro — botao, numero da etapa e frases saiam pela direita em
         TODAS as telas, porque a barra e da casca compartilhada. Medido no aparelho:
         408px antes, 371px depois. Vira teto em vez de piso, com reticencias. */
      #tizze-complete .tc-brand-switch { min-width: 0; max-width: 136px; }
      #tizze-complete .tc-app-actions, #tizze-complete .tc-location { min-width: 0; }
      #tizze-complete .tc-brand-switch > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
      #tizze-complete .tc-content { padding: 14px 11px; }
      #tizze-complete .tc-page-head { align-items: flex-end; }
      #tizze-complete .tc-page-head h2 { font-size: 19px; }
      #tizze-complete .tc-create-work { grid-template-columns: 1fr; }
      #tizze-complete .tc-context { display: none; }
      #tizze-complete .tc-grid.three { grid-template-columns: 1fr; }
      #tizze-complete .tc-grid.two { grid-template-columns: 1fr; }
      #tizze-complete .tc-quick { grid-template-columns: repeat(2,minmax(0,1fr)); }
      #tizze-complete .tc-list-head { display: none; }
      #tizze-complete .tc-list-row { grid-template-columns: minmax(0,1fr) auto; }
      #tizze-complete .tc-list-row > span:not(.tc-state) { display: none; }
    }
    @media (max-width: 430px) {
      #tizze-complete { border-radius: 14px; }
      #tizze-complete .tc-location small { display: none; }
      #tizze-complete .tc-profile { display: none; }
      /* 16/08: este piso de 128px vinha DEPOIS do conserto de 760px e o desfazia
         justamente no tamanho de celular — que e onde o corte aparecia. Vira teto. */
      #tizze-complete .tc-brand-switch { min-width: 0; max-width: 128px; }
      /* 16/08 — decisao de design do Antigravity, medida antes de aplicar:
         no celular pequeno some o botao de tema (preferencia, nao tarefa) e o
         NOME da marca; fica a inicial dentro da bolinha, que ja identifica em
         qual marca a pessoa esta, e o menu continua abrindo no toque.
         Medido na pagina logada: barra de 371px para 292px. Cabe ate em 320px. */
      #tizze-complete #tz-theme-toggle,
      #tizze-complete .tc-current-brand { display: none; }
      #tizze-complete .tc-brand-menu { right: -4px; width: 226px; }
      #tizze-complete .tc-flow { gap: 2px; }
      #tizze-complete .tc-step { justify-content: center; padding: 7px 2px; }
      #tizze-complete .tc-step-label { display: none; }
      #tizze-complete .tc-page-head p { line-height: 1.4; }
      #tizze-complete .tc-chat-area { padding: 15px 12px; }
      #tizze-complete .tc-function-grid { grid-template-columns: 1fr; }
      #tizze-complete .tc-day { min-height: 47px; }
      #tizze-complete .tc-day span { font-size: 12px; }
    }
  
/* ===================================================================
   Casca full-page (redesign Tizze) — o protótipo era um cartão de
   demonstração; no app a casca ocupa a tela inteira. Overrides mínimos:
   NÃO reinventa espaçamento/cor das classes tc-*, só solta o cartão.
   =================================================================== */
html, body { margin: 0; padding: 0; min-height: 100%; background: var(--tzs-background); }
#tizze-complete { border: 0; border-radius: 0; box-shadow: none; min-height: 100vh; }
#tizze-complete .tc-shell { min-height: 100vh; }
#tizze-complete .tc-main { display: flex; flex-direction: column; min-height: 100vh; }
#tizze-complete .tc-content { flex: 1; padding-bottom: 44px; }
/* nav/appbar usam <a>: sem sublinhado herdado do reset genérico */
#tizze-complete a { text-decoration: none; }
#tizze-complete a:hover, #tizze-complete a:focus-visible { text-decoration: none; }
/* item de saldo no rodapé do menu: número em dourado */
#tizze-complete .tc-nav-item.tc-balance .tc-nav-text { color: #e1c469; }
/* estados vazios e blocos utilitários da Início (reuso das cores tc-*) */
#tizze-complete .tc-empty { padding: 34px 20px; text-align: center; }
#tizze-complete .tc-empty i { color: #dfc163; }
#tizze-complete .tc-empty strong { display: block; font-size: 14px; font-weight: 500; margin: 10px 0 4px; }
#tizze-complete .tc-empty p { margin: 0 auto 14px; max-width: 380px; color: #8a8d94; font-size: 13px; line-height: 1.5; }
#tizze-complete .tc-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; background: linear-gradient(120deg, rgba(223,193,99,.12), rgba(223,193,99,0) 60%), #131418; }
#tizze-complete .tc-hero-txt strong { display: block; font-size: 15px; font-weight: 500; margin-bottom: 5px; }
#tizze-complete .tc-hero-txt span { display: block; color: #8a8d94; font-size: 12px; line-height: 1.5; max-width: 520px; }
#tizze-complete .tc-hero .tc-primary { flex: none; white-space: nowrap; }
#tizze-complete .tc-summary a.tc-summary-link { display: inline-block; margin-top: 8px; color: var(--tzs-link-ouro, #e2c56b); font-size: 13px; }
/* blocos que viraram <a> (hero + tiles de proximo passo): herdam a cor de texto
   da casca, nunca o azul de link do reset generico */
#tizze-complete a.tc-hero, #tizze-complete a.tc-function { color: #f4f3ef; }
#tizze-complete a.tc-hero .tc-hero-txt strong, #tizze-complete a.tc-function strong { color: var(--tzs-texto-forte, #f4f3ef); }
#tizze-complete a.tc-function:hover { border-color: #5b5140; }

/* ===================================================================
   [13/08] O que voltou da casca antiga: sino, menu do avatar (Sair),
   grupo Admin e rodapé nas telas novas. Espelho conceitual do que o
   tz-chrome.php faz nas telas antigas — mudar lá junto.
   =================================================================== */
/* ── Sino de notificações ── */
#tizze-complete .tc-bell-wrap { position: relative; }
#tizze-complete .tc-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid #383940;
  background: #1a1b20; color: #a8abb2; cursor: pointer;
}
#tizze-complete .tc-bell:hover { color: #e4c86d; border-color: #5c5240; }
/* 17/08: era dourado. Vermelho por decisao do Miguel — dourado se confundia com
   a propria marca e nao lia como "tem coisa esperando".
   Vermelho FIXO, nao var(--tzs-red): o alerta nao pode mudar de tom por tema e o token clareia pra
   rgb(255 103 100), onde texto branco perde contraste. Este tom mantem o branco
   legivel nos dois temas, que e o que importa num numero de 9px. */
#tizze-complete .tc-bell-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #E02E2A; color: #fff;
  font-size: 9px; font-weight: 800; line-height: 16px; text-align: center;
}
#tizze-complete .tc-bell-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 300px; max-height: 380px;
  overflow: auto; border: 1px solid #303137; border-radius: 13px; background: #131418;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .44); z-index: 60;
}
#tizze-complete .tc-bell-menu[hidden] { display: none; }
#tizze-complete .tc-bell-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-bottom: 1px solid #27282d; font-size: 13px;
}
#tizze-complete .tc-bell-head button {
  border: 0; background: none; color: #e2c56b; font-size: 12px; font-weight: 700; cursor: pointer;
}
#tizze-complete .tc-bell-item {
  display: block; width: 100%; text-align: left; padding: 10px 13px;
  border: 0; border-bottom: 1px solid #1f2025; background: none; cursor: pointer;
}
#tizze-complete .tc-bell-item:hover { background: #1a1b20; }
#tizze-complete .tc-bell-item strong { display: block; font-size: 12.5px; font-weight: 600; color: #c5c6ca; }
#tizze-complete .tc-bell-item.is-unread strong { color: #f4f3ef; }
#tizze-complete .tc-bell-item.is-unread { border-left: 2px solid #dfc163; }
#tizze-complete .tc-bell-item span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: #8a8d94; }
#tizze-complete .tc-bell-empty { padding: 18px 13px; font-size: 13px; color: #8a8d94; text-align: center; }
/* ── "Falta fazer" (17/08) ──
   O item do sino deixou de ser sempre <button>: quando tem link, vira <a>. As duas
   linhas abaixo existem só para o <a> não sair sublinhado e azul dentro do menu. */
/* font-weight: a folha tem uma regra global `a { font-weight: 500 }` (linha ~168).
   Sem neutralizar, o item com link sairia mais gordo que o item sem link — dois
   pesos na mesma lista. O <button> não precisa: `#tizze-complete button
   { font: inherit }` já cuida dele. Achado do Antigravity. */
#tizze-complete a.tc-bell-item { text-decoration: none; color: inherit; font-weight: inherit; }
#tizze-complete a.tc-bell-item:focus-visible { outline: 2px solid #dfc163; outline-offset: -2px; }
/* O pontinho de pendência saiu em 17/08: o Miguel decidiu que pendência ENTRA no
   número. Com isso o pontinho virava controle morto — dois sinais para a mesma
   coisa, e a regra do produto é não deixar controle que não faz nada. */
/* 10.5px é o menor texto que este componente já usa (.tc-bell-item span). O
   token --font-size-small tem piso de 11px, mas 11px aqui competiria com o
   título do item (11.5px) e o rótulo da seção tem que ficar SUBORDINADO a ele.
   Estava em 9.5px, pequeno demais no celular — apontado pelo Antigravity. */
#tizze-complete .tc-bell-group {
  padding: 9px 13px 5px; font-size: 12px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #8a8d94; background: #17181c;
  border-bottom: 1px solid #1f2025;
}
#tizze-complete .tc-bell-item.is-falta { border-left: 2px solid #dfc163; }
#tizze-complete .tc-bell-item.is-falta strong { color: #f4f3ef; }

/* ══ Foto de perfil (19/08) ══ A foto preenche o mesmo círculo da inicial. */
#tizze-complete .tc-profile img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ══ Logo no topo (18/08) — botão de voltar ao Início ══
   Wordmark no computador, símbolo no celular. Um por vez. */
#tizze-complete .tc-logo-home { display:inline-flex; align-items:center; text-decoration:none; }
#tizze-complete .tc-logo-home:focus-visible { outline:2px solid #dfc163; outline-offset:3px; border-radius:8px; }
#tizze-complete .tc-logo-word { display:block; height:26px; width:auto; }
#tizze-complete .tc-logo-mark { display:none; width:32px; height:32px; border-radius:8px; }
@media (max-width: 760px) {
  #tizze-complete .tc-logo-word { display:none; }
  #tizze-complete .tc-logo-mark { display:block; }
}

/* ══ Faixa de confirmacao de e-mail ══ */
#tizze-complete .tzep {
  margin: 0 0 14px; padding: 13px 15px 15px;
  background: var(--bg-elevated, #1C1C21);
  border: 1px solid var(--border, rgba(255, 255, 255, .10));
  border-left: 3px solid var(--accent, #D7B768);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
#tizze-complete .tzep-top { display: flex; align-items: flex-start; gap: 11px; }
#tizze-complete .tzep-icone { flex: none; margin-top: 1px; font-size: 20px; line-height: 1; color: var(--accent, #D7B768); }
#tizze-complete .tzep-texto { min-width: 0; }
#tizze-complete .tzep-titulo { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text-primary, #F4F1EA); text-wrap: pretty; }
/* overflow-wrap: e-mail nao tem espaco, entao em 360px ele ignora a largura do pai
   e vaza pro lado, empurrando a tela inteira. */
#tizze-complete .tzep-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary, #A6A39A); overflow-wrap: anywhere; }
#tizze-complete .tzep-mail { color: var(--text-primary, #F4F1EA); overflow-wrap: anywhere; word-break: break-word; }
/* Largura total e 44px de altura: area de toque para o polegar em 360px, e deixa
   claro qual e a acao principal. */
#tizze-complete .tzep-btn {
  width: 100%; min-height: 44px; padding: 11px 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: 11px; cursor: pointer;
  background: var(--accent, #D7B768); color: #17150E;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
}
#tizze-complete .tzep-btn:hover:not(:disabled) { background: var(--accent-hover, #E7CE86); }
#tizze-complete .tzep-btn:disabled { opacity: .62; cursor: default; }
#tizze-complete .tzep-link {
  align-self: center; background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--text-muted, #6B6A63); font-family: inherit; font-size: 13.5px; text-decoration: underline;
}
#tizze-complete .tzep-link:hover { color: var(--text-secondary, #A6A39A); }
#tizze-complete .tzep-troca { display: flex; flex-direction: column; gap: 8px; }
#tizze-complete .tzep-troca[hidden] { display: none; }   /* depois do display:flex, senao o atributo hidden nao vale */
#tizze-complete .tzep-label { font-size: 13px; color: var(--text-secondary, #A6A39A); }
#tizze-complete .tzep-inp {
  width: 100%; min-width: 0; padding: 10px 12px;
  background: var(--bg-card, #141417); color: var(--text-primary, #F4F1EA);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .18)); border-radius: 10px;
  font-family: inherit; font-size: 14px;   /* 14px+ evita o zoom automatico do iOS ao focar */
}
#tizze-complete .tzep-btn2 {
  min-height: 42px; padding: 10px 14px; cursor: pointer;
  background: none; color: var(--text-primary, #F4F1EA);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .18)); border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600;
}
/* min-height reserva a linha: sem ela a faixa "pula" quando a mensagem aparece. */
#tizze-complete .tzep-msg { margin: 0; min-height: 1.2em; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary, #A6A39A); }
/* ── Menu do avatar ── */
#tizze-complete .tc-profile-wrap { position: relative; }
#tizze-complete button.tc-profile { border: 0; cursor: pointer; }
#tizze-complete .tc-profile-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 210px;
  border: 1px solid #303137; border-radius: 13px; background: #131418;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .44); z-index: 60; overflow: hidden;
}
#tizze-complete .tc-profile-menu[hidden] { display: none; }
#tizze-complete .tc-profile-name { padding: 11px 13px 8px; font-size: 12px; font-weight: 700; color: #9b9ea5; border-bottom: 1px solid #27282d; }
#tizze-complete .tc-profile-menu a {
  display: flex; align-items: center; gap: 9px; padding: 10px 13px;
  font-size: 13px; color: #c5c6ca;
}
#tizze-complete .tc-profile-menu a:hover { background: #1a1b20; color: #f4f3ef; }
#tizze-complete .tc-profile-menu a.tc-profile-out { border-top: 1px solid #27282d; color: #c98b8b; }
/* ── Rodapé das telas novas (mesma cara do .tz-foot das antigas) ── */
#tizze-complete .tz-foot {
  margin-top: 34px; padding: 18px 0 6px; border-top: 1px solid #28292e; background: none;
}
#tizze-complete .tz-foot-inner {
  max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
#tizze-complete .tz-foot-links { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
#tizze-complete .tz-foot-links a { color: var(--tzs-texto-2, #9b9ea5); font-size: 13px; font-weight: 600; }
#tizze-complete .tz-foot-links a:hover { color: #e4c86d; }
#tizze-complete .tz-foot p { width: 100%; margin: 8px 0 0; color: var(--tzs-texto-apagado, #74777e); font-size: 13px; }
@media (max-width: 760px) {
  /* No celular o sino continua no appbar; o grupo Admin segue a regra do
     .tc-nav.secondary (some do menu inferior). */
  #tizze-complete .tc-bell-menu { width: min(300px, calc(100vw - 28px)); }
  #tizze-complete .tz-foot { margin-bottom: 70px; } /* respiro acima da barra inferior */
}

/* ═══ MODO CLARO DA CASCA — 20/08/2026 ════════════════════════════════════════
   So tokens de skin (themes.css/tokens-light.css); os unicos valores novos sao
   os verdes/azuis de estado, medidos no branco: #2E6B45 5.8:1 · #2F5D8A 5.5:1.
   Skins autorais (chic/alegria/urbano/natureza) carregam DEPOIS e continuam
   mandando — mesmo peso de seletor, ordem decide. */
html[data-theme="light"] #tizze-complete {
  color: var(--text-primary, #111111);
  background: var(--bg-primary, #F6F4EF);
  border-color: var(--border, rgba(0,0,0,.10));
  box-shadow: 0 22px 64px rgba(23,21,14,.10);
}
html[data-theme="light"] #tizze-complete .tc-shell { background: radial-gradient(circle at 62% -10%, var(--accent-glow, rgba(175,137,53,.07)), transparent 34%), var(--bg-primary, #F6F4EF); }
html[data-theme="light"] #tizze-complete .tc-appbar { background: rgba(255,255,255,.94); border-bottom-color: var(--border, rgba(0,0,0,.10)); }
html[data-theme="light"] #tizze-complete .tc-location small { color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-sidebar { background: var(--bg-card, #FFFFFF); border-right-color: var(--border, rgba(0,0,0,.10)); border-top-color: var(--border, rgba(0,0,0,.10)); }
html[data-theme="light"] #tizze-complete .tc-nav-section { color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-nav-item { color: var(--text-secondary, #4F5358); }
html[data-theme="light"] #tizze-complete .tc-nav-item:hover { background: color-mix(in srgb, var(--text-primary, #111111) 6%, transparent); color: var(--text-primary, #111111); }
html[data-theme="light"] #tizze-complete .tc-nav-item.is-active { background: var(--accent-glow, rgba(175,137,53,.14)); color: var(--accent-text, #24496E); }
html[data-theme="light"] #tizze-complete .tc-nav-item.tc-balance .tc-nav-text { color: var(--accent-text, #24496E); }
html[data-theme="light"] #tizze-complete .tc-nav-status { color: #2E6B45; }
html[data-theme="light"] #tizze-complete .tc-nav-dot { background: #2E6B45; }
html[data-theme="light"] #tizze-complete .tc-connection-shortcut,
html[data-theme="light"] #tizze-complete .tc-brand-switch { border-color: var(--border-strong, rgba(0,0,0,.18)); background: var(--bg-card, #FFFFFF); color: var(--text-secondary, #4F5358); }
html[data-theme="light"] #tizze-complete .tc-connection-shortcut:hover,
html[data-theme="light"] #tizze-complete .tc-brand-switch:hover,
html[data-theme="light"] #tizze-complete .tc-profile:hover { border-color: var(--accent, #AF8935); }
html[data-theme="light"] #tizze-complete .tc-brand-bullet { background: var(--accent-glow, rgba(175,137,53,.14)); color: var(--accent-text, #24496E); }
html[data-theme="light"] #tizze-complete .tc-brand-menu { background: var(--bg-card, #FFFFFF); border-color: var(--border-strong, rgba(0,0,0,.18)); box-shadow: 0 18px 48px rgba(23,21,14,.16); }
html[data-theme="light"] #tizze-complete .tc-brand-menu-label { color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-brand-option { color: var(--text-primary, #111111); }
html[data-theme="light"] #tizze-complete .tc-brand-option:hover, html[data-theme="light"] #tizze-complete .tc-brand-option.is-current { background: var(--accent-glow, rgba(175,137,53,.14)); }
html[data-theme="light"] #tizze-complete .tc-brand-option small { color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-brand-check { color: #2E6B45; }
html[data-theme="light"] #tizze-complete .tc-page-head p { color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-secondary { border-color: var(--border-strong, rgba(0,0,0,.18)); background: var(--bg-card, #FFFFFF); color: var(--text-primary, #111111); }
html[data-theme="light"] #tizze-complete .tc-ghost { color: var(--text-secondary, #4F5358); }
html[data-theme="light"] #tizze-complete .tc-panel { border-color: var(--border, rgba(0,0,0,.10)); background: var(--bg-card, #FFFFFF); }
html[data-theme="light"] #tizze-complete .tc-summary small, html[data-theme="light"] #tizze-complete .tc-summary span { color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-list-head { color: var(--text-muted, #80858C); border-bottom-color: var(--border, rgba(0,0,0,.10)); }
html[data-theme="light"] #tizze-complete .tc-list-row + .tc-list-row { border-top-color: var(--border, rgba(0,0,0,.10)); }
html[data-theme="light"] #tizze-complete .tc-list-row small, html[data-theme="light"] #tizze-complete .tc-list-row > span { color: var(--text-secondary, #4F5358); }
html[data-theme="light"] #tizze-complete .tc-state { border-color: var(--border-strong, rgba(0,0,0,.18)); }
html[data-theme="light"] #tizze-complete .tc-state.gold { color: var(--accent-text, #24496E); background: var(--accent-glow, rgba(175,137,53,.14)); }
html[data-theme="light"] #tizze-complete .tc-state.green { color: #2E6B45; background: rgba(46,107,69,.10); }
html[data-theme="light"] #tizze-complete .tc-state.blue { color: #24496E; background: rgba(36,73,110,.10); }  /* 6.3:1; 4.49 nao passa por arredondamento */
html[data-theme="light"] #tizze-complete .tc-state.red { color: #A5281F; background: #FDECEC; border-color: #D98D86; } /* texto 6.29:1 no fundo claro */
html[data-theme="light"] #tizze-complete .tc-step { color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-step:hover { background: color-mix(in srgb, var(--text-primary, #111111) 6%, transparent); color: var(--text-primary, #111111); }
html[data-theme="light"] #tizze-complete .tc-step.is-current { background: var(--accent-glow, rgba(175,137,53,.14)); color: var(--accent-text, #24496E); }
html[data-theme="light"] #tizze-complete .tc-step.is-done { color: #2E6B45; }
html[data-theme="light"] #tizze-complete .tc-msg-avatar { border-color: var(--border-strong, rgba(0,0,0,.18)); background: var(--bg-elevated, #ECE9E2); color: var(--accent-text, #24496E); }
html[data-theme="light"] #tizze-complete .tc-msg.user .tc-msg-avatar { color: var(--text-primary, #111111); background: var(--bg-elevated, #ECE9E2); }
html[data-theme="light"] #tizze-complete .tc-msg-body { color: var(--text-secondary, #4F5358); }
html[data-theme="light"] #tizze-complete .tc-msg-body b { color: var(--text-primary, #111111); }
html[data-theme="light"] #tizze-complete .tc-result { border-color: var(--border, rgba(0,0,0,.10)); background: var(--bg-card, #FFFFFF); }
html[data-theme="light"] #tizze-complete .tc-result-head { border-bottom-color: var(--border, rgba(0,0,0,.10)); }
html[data-theme="light"] #tizze-complete .tc-result-head span { color: #2E6B45; }
html[data-theme="light"] #tizze-complete .tc-tag { border-color: var(--border-strong, rgba(0,0,0,.18)); color: var(--text-secondary, #4F5358); }
html[data-theme="light"] #tizze-complete .tc-day { border-color: var(--border, rgba(0,0,0,.10)); color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-day.has-post { background: var(--bg-card, #FFFFFF); color: var(--text-primary, #111111); }
html[data-theme="light"] #tizze-complete .tc-day span { background: var(--accent-glow, rgba(175,137,53,.14)); color: var(--accent-text, #24496E); }
html[data-theme="light"] #tizze-complete .tc-network { border-color: var(--border, rgba(0,0,0,.10)); background: var(--bg-card, #FFFFFF); }
html[data-theme="light"] #tizze-complete .tc-network-logo { border-color: var(--border-strong, rgba(0,0,0,.18)); color: var(--text-secondary, #4F5358); }
html[data-theme="light"] #tizze-complete .tc-network small { color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-bell { border-color: var(--border-strong, rgba(0,0,0,.18)); color: var(--text-secondary, #4F5358); }
html[data-theme="light"] #tizze-complete .tc-bell:hover { color: var(--accent-text, #24496E); border-color: var(--accent, #AF8935); }
html[data-theme="light"] #tizze-complete .tc-bell-menu { border-color: var(--border-strong, rgba(0,0,0,.18)); background: var(--bg-card, #FFFFFF); }
html[data-theme="light"] #tizze-complete .tc-bell-head { border-bottom-color: var(--border, rgba(0,0,0,.10)); }
html[data-theme="light"] #tizze-complete .tc-bell-head button { color: var(--accent-text, #24496E); }
html[data-theme="light"] #tizze-complete .tc-bell-item { border-bottom-color: var(--border, rgba(0,0,0,.10)); }
html[data-theme="light"] #tizze-complete .tc-bell-item:hover { background: color-mix(in srgb, var(--text-primary, #111111) 5%, transparent); }
html[data-theme="light"] #tizze-complete .tc-bell-item strong { color: var(--text-secondary, #4F5358); }
html[data-theme="light"] #tizze-complete .tc-bell-item.is-unread strong, html[data-theme="light"] #tizze-complete .tc-bell-item.is-falta strong { color: var(--text-primary, #111111); }
html[data-theme="light"] #tizze-complete .tc-bell-item.is-unread, html[data-theme="light"] #tizze-complete .tc-bell-item.is-falta { border-left-color: var(--accent, #AF8935); }
html[data-theme="light"] #tizze-complete .tc-bell-item span, html[data-theme="light"] #tizze-complete .tc-bell-empty { color: var(--text-muted, #80858C); }
html[data-theme="light"] #tizze-complete .tc-bell-group { color: var(--text-muted, #80858C); background: var(--bg-elevated, #ECE9E2); }
html[data-theme="light"] #tizze-complete .tc-profile-menu { border-color: var(--border-strong, rgba(0,0,0,.18)); background: var(--bg-card, #FFFFFF); }
html[data-theme="light"] #tizze-complete .tc-bell { background: var(--bg-card, #FFFFFF); }
html[data-theme="light"] #tizze-complete .tc-function { border-color: var(--border, rgba(0,0,0,.10)); background: var(--bg-card, #FFFFFF); }
html[data-theme="light"] #tizze-complete a.tc-hero, html[data-theme="light"] #tizze-complete a.tc-function { color: var(--text-primary, #111111); }
html[data-theme="light"] #tizze-complete .tc-toast { border-color: var(--border-strong, rgba(0,0,0,.18)); background: var(--bg-card, #FFFFFF); color: var(--text-primary, #111111); box-shadow: 0 14px 38px rgba(23,21,14,.18); }
html[data-theme="light"] #tizze-complete .tc-hero { background: linear-gradient(120deg, var(--accent-glow, rgba(175,137,53,.12)), rgba(0,0,0,0) 60%), var(--bg-card, #FFFFFF); }
/* O wordmark e um SVG quase-branco (#FAFAFA) — em fundo claro sumia (print do
   Miguel 21/08). Filtro o torna escuro em qualquer template claro; um arquivo so. */
html[data-theme="light"] #tizze-complete .tc-logo-word { filter: brightness(0) saturate(0); opacity: .82; }
html[data-theme="light"] #tizze-complete .tc-profile-name { color: var(--text-muted, #80858C); border-bottom-color: var(--border, rgba(0,0,0,.10)); }