/* ═══════════════════════════════════════════════════════════
   CS Workspace — design system
   Marca: branco + verde-lima, com preto esverdeado na tipografia. Fonte de interface
   Manrope e heatmap em escala verde.

   Superfícies de vidro: as placas (barra, cartões, drawer, modais)
   são translúcidas com desfoque sobre um degradê radial branco e verde. A
   moldura é o raio — quadrado com o cantinho arredondado (7/10/14px),
   nunca pílula. Continuam redondos só os pontos de estado.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #ffffff;
  --bg-1: #f6f8f1;
  --bg-2: #ffffff;
  --bg-3: #edf5ca;
  --bg-4: #bee336;
  --surface: #ffffff;
  --surface-2: #f4f7ee;
  --text: #20251e;
  --text-2: #515a4d;
  --text-3: #7d8876;
  --border: rgba(32, 37, 30, 0.1);
  --border-strong: rgba(32, 37, 30, 0.18);

  /* Vidro: fundo, moldura e desfoque das placas. */
  --glass: linear-gradient(152deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 240, 0.86));
  --glass-strong: linear-gradient(152deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 239, 0.94));
  --glass-inset: rgba(255, 255, 255, 0.82);
  --glass-line: rgba(32, 37, 30, 0.12);
  --glass-blur: blur(24px) saturate(1.08);

  --accent: #bee336;
  --accent-strong: #667d09;
  --accent-soft: rgba(190, 227, 54, 0.12);
  --accent-ring: rgba(190, 227, 54, 0.25);

  --danger: #e5484d;
  --danger-soft: rgba(229, 72, 77, 0.12);
  --success: #667d09;
  --success-soft: rgba(190, 227, 54, 0.1);
  --blue: #9fc0ff;
  --blue-soft: rgba(159, 192, 255, 0.1);

  --hm-l0: #f1f4eb;
  --hm-l1: #e3edbb;
  --hm-l2: #d2e57d;
  --hm-l3: #c5e34f;
  --hm-l4: #bee336;

  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 3px 10px rgba(32, 37, 30, 0.08);
  --shadow-card: 0 18px 42px rgba(32, 37, 30, 0.1), 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-pop: 0 34px 80px rgba(32, 37, 30, 0.16), 0 1px 0 rgba(255, 255, 255, 0.95);

  --font: "Manrope Variable", "Avenir Next", sans-serif;
  --nav-font: "Manrope Variable", "Avenir Next", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --script: "Kaushan Script", "Segoe Script", cursive;
  --display: "Bowlby One", "Arial Black", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

html, body { margin: 0; padding: 0; }
html { color-scheme: light; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: linear-gradient(146deg, #ffffff 0%, #ffffff 34%, #f7fce4 56%, #e8f5b8 76%, #cfe86a 100%);
  background-attachment: fixed;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* O gradiente fica no body, sem componente, import ou camada dinâmica. */
body::before {
  display: none;
}

button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

[hidden] { display: none !important; }

/* ───────────── Marca (logo redondo MB) ───────────── */

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: radial-gradient(120% 120% at 30% 20%, #232019 0%, #0c0b09 70%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(190, 227, 54, 0.28);
  flex-shrink: 0;
  overflow: hidden;
}

.brand-mb {
  font-family: var(--script);
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.04em;
  transform: translateY(1px);
}

.mb-m { color: #ffffff; }
.mb-b { color: var(--accent); margin-left: -1px; }

/* Logo por imagem: some o "MB" e mostra /static/logo2.png. */
.brand-mark.has-logo {
  background-image: url("/static/logo2.png");
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 22%;
}

.brand-mark.has-logo .brand-mb { display: none; }

.brand-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───────────── Login: capa (portada do nodeck) ───────────── */

.login-view {
  position: relative;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 4vh 5vw;
  background:
    radial-gradient(78% 46% at 50% 104%, #ffffff 0%, rgba(255, 255, 255, 0.78) 32%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(58% 42% at 93% 86%, rgba(101, 133, 18, 0.3) 0%, rgba(101, 133, 18, 0) 72%),
    linear-gradient(146deg, #ffffff 0%, #fbfef2 12%, #e9f7b6 28%, #cbe75e 46%, #b0d02f 62%, #9cc026 78%, #8fb41f 100%);
  color: #0f1108;
  overflow: hidden;
}

.login-cover {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1920px;
  min-height: calc(100svh - 8vh);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* adereços: mesmas medidas, sombras e ângulos do nodeck */
.login-prop { position: absolute; user-select: none; -webkit-user-select: none; }
.login-prop img { display: block; width: 100%; height: auto; }
/* ponta do marcador: de onde o risco sai */
.marker-tip { position: absolute; left: 1.5%; top: 98%; width: 1px; height: 1px; }

.login-prop--note {
  z-index: 0;
  top: -5%;
  left: -5%;
  width: 21vw;
  opacity: 0;
  rotate: -20deg;
  filter: drop-shadow(-0.9vw 0.1vw 0.5vw rgba(0, 0, 0, 0.3)) drop-shadow(-2.7vw 0.3vw 1.4vw rgba(0, 0, 0, 0.28))
    drop-shadow(-5.4vw 0.6vw 3.2vw rgba(0, 0, 0, 0.22));
}

.login-prop--marker {
  z-index: 3;
  top: -3.5vw;
  right: -3.5vw;
  width: 15vw;
  opacity: 0;
  rotate: 30deg;
  filter: drop-shadow(-0.4vw 0.6vw 0.4vw rgba(0, 0, 0, 0.3)) drop-shadow(-1.2vw 1.8vw 1.2vw rgba(0, 0, 0, 0.28))
    drop-shadow(-2.4vw 3.6vw 2.8vw rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.login-content { position: relative; z-index: 2; width: 100%; text-align: center; }

.login-eyebrow {
  margin: 0 0 0.6em;
  font-family: var(--mono);
  font-size: clamp(0.72rem, 1.15vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.login-logo { display: block; width: min(68%, 840px); height: auto; margin: 0.1em auto 0; overflow: visible; }
.login-logo g[data-letter] { pointer-events: auto; }
.login-logo .logo-shadows, .login-logo .logo-outline { pointer-events: none; }

.login-tagline {
  max-width: 34em;
  margin: 1.4em auto 0;
  font-size: clamp(0.78rem, 1.7vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.7;
  text-transform: uppercase;
}

/* traço de marca-texto, revelado da esquerda para a direita */
.text-highlight { --highlight-progress: 0%; position: relative; display: inline-block; margin: 0 0.1em; }
.text-highlight > span { position: relative; z-index: 1; }

.text-highlight::after {
  content: "";
  position: absolute;
  top: -0.22em;
  right: -0.3em;
  bottom: -0.18em;
  left: -0.3em;
  z-index: 0;
  background-image: url("/static/highlight.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  clip-path: inset(0 calc(100% - var(--highlight-progress)) 0 0);
}

.text-highlight.is--wide::after { transform: rotate(-0.5deg); }

/* botões no formato dos PREV/NEXT deles */
.login-form { position: relative; z-index: 2; display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1rem; margin-top: clamp(1.5rem, 4vh, 2.75rem); }

.cover-btn {
  display: inline-flex;
  width: min(100%, 21rem);
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  border: 3px solid #0f1108;
  border-radius: 10px;
  background: #fff;
  box-shadow: 4px 4px 0 0 #0f1108;
  color: #0f1108;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, background 0.15s;
}

.cover-btn svg { width: 1.15em; height: 1.15em; }
.cover-btn:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #0f1108; }
.cover-btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 0 #0f1108; }
.cover-btn:focus-visible { outline: 3px solid #0f1108; outline-offset: 4px; }
.cover-btn:disabled { filter: opacity(55%); }
/* botão redondo que estica virando o campo do código */
.cover-dial {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  place-items: center;
  border: 3px solid #0f1108;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f1108, 0 7px 16px rgba(15, 17, 8, 0.2);
  color: #0f1108;
  transition: transform 0.14s ease-out, box-shadow 0.14s ease-out, background 0.14s;
}

.cover-dial svg { width: 1.6rem; height: 1.6rem; }
.cover-dial:hover { background: #f4ffd0; transform: scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f1108, 0 10px 20px rgba(15, 17, 8, 0.22); }
.cover-dial:active { transform: scale(0.94); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f1108, 0 3px 8px rgba(15, 17, 8, 0.2); }
.cover-dial:focus-visible { outline: 3px solid #0f1108; outline-offset: 10px; }

.cover-btn.is--ghost { background: rgba(255, 255, 255, 0.55); font-size: 0.82rem; padding: 0.8em 1.2em; }

.code-launcher { display: grid; place-items: center; width: min(100%, 21rem); }
.code-launcher[style*="height"] { overflow: visible; }

/* casca que estica do botão até a régua dos quadradinhos */
.code-morph {
  z-index: 5;
  border: 3px solid #0f1108;
  border-radius: 10px;
  background: #fff;
  box-shadow: 4px 4px 0 0 #0f1108;
  pointer-events: none;
}
.code-launcher > * { grid-area: 1 / 1; }
.code-panel { display: flex; width: 100%; flex-direction: column; gap: 0.9rem; }
.code-panel[hidden] { display: none; }

.code-field { position: relative; width: 100%; }
.code-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }

.code-slot {
  display: grid;
  height: 3.4rem;
  place-items: center;
  border: 3px solid #0f1108;
  border-radius: 10px;
  background: #fff;
  box-shadow: 4px 4px 0 0 #0f1108;
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 700;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s;
}

.code-slot.is-filled { transform: translate(2px, 2px); background: #f4ffd0; box-shadow: 2px 2px 0 0 #0f1108; }
.code-field.is-focused .code-slot.is-next { background: #fffbe6; }

.code-field.is-focused .code-slot.is-next::after {
  content: "";
  width: 3px;
  height: 1.5rem;
  background: #0f1108;
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  outline: 0;
  -webkit-text-fill-color: transparent;
}

.login-view .form-hint { margin: 0; color: #7a1220; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; }
.login-view .form-hint:not([hidden]) { animation: shake 0.4s ease-out; }

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  50% { transform: translateX(-4px); }
}

.preview-box { position: relative; z-index: 2; width: min(100%, 21rem); margin-top: 0.9rem; }

.login-foot {
  position: relative;
  z-index: 2;
  margin: 1.6rem 0 0;
  color: rgba(15, 17, 8, 0.6);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.corner-btn {
  position: fixed;
  right: max(1.25rem, 3vw);
  bottom: max(1.25rem, 3vh);
  z-index: 1300;
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  border: 3px solid #0f1108;
  border-radius: 100em;
  background: #fff;
  box-shadow: 4px 4px 0 0 #0f1108;
  color: #0f1108;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, background 0.15s;
}

.corner-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #0f1108; }
.corner-btn--eraser { right: calc(max(1.25rem, 3vw) + 4rem); }
.corner-btn--eraser:hover { background: #def915; }
.corner-btn svg { width: 1.25rem; height: 1.25rem; }
.sound-toggle .icon { width: 1.3rem; height: 1.3rem; }
.sound-toggle .icon--sound { display: none; }
.sound-toggle[aria-pressed="true"] { background: #def915; }
.sound-toggle[aria-pressed="true"] .icon--mute { display: none; }
.sound-toggle[aria-pressed="true"] .icon--sound { display: block; }

/* estilhaços da explosão */
.dots-container { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

.dot {
  position: fixed;
  width: 1rem;
  height: 1rem;
  border: 2px solid #0f1108;
  border-radius: 50%;
  will-change: transform, opacity;
  pointer-events: none;
}

@media (max-width: 992px) {
  .login-prop--note { width: 23vw; top: -8%; left: -12%; }
  .login-prop--marker { width: 20vw; top: -4vw; right: -5vw; }
}

@media (max-width: 768px) {
  .login-view { padding: 3vh 6vw; }
  .login-prop--note { width: 30vw; top: -6%; left: -16%; }
  .login-prop--marker { width: 28vw; top: -6vw; right: -7vw; }
  .code-slots { gap: 0.35rem; }
  .code-slot { height: 3rem; font-size: 1.2rem; border-width: 2px; box-shadow: 3px 3px 0 0 #0f1108; }
  .cover-btn { border-width: 2px; box-shadow: 3px 3px 0 0 #0f1108; }
  .corner-btn { width: 2.8rem; height: 2.8rem; border-width: 2px; box-shadow: 3px 3px 0 0 #0f1108; }
  .corner-btn--eraser { right: calc(max(1.25rem, 3vw) + 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .login-prop { opacity: 1 !important; }
  .text-highlight { --highlight-progress: 100%; }
}

/* ───────────── Campos ───────────── */

.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 560;
  color: var(--text-2);
  margin-bottom: 6px;
}

.optional { color: var(--text-3); font-weight: 400; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input::placeholder, textarea::placeholder { color: var(--text-3); }

.form-stack { display: flex; flex-direction: column; gap: 14px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-13 { grid-template-columns: 90px 1fr; }
.form-row-21 { grid-template-columns: 2fr 1fr; }

.form-hint { margin: 2px 0 0; font-size: 0.85rem; color: var(--danger); }
.form-hint.is-ok { color: var(--success); }

/* ───────────── Botões ───────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 560;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; }
.btn svg { width: 16px; height: 16px; }

/* mesma linguagem da capa: contorno preto e sombra sólida deslocada */
.btn-primary {
  background: var(--accent);
  color: #0f1108;
  border-color: #0f1108;
  box-shadow: 3px 3px 0 0 #0f1108;
  font-weight: 620;
}
.btn-primary:hover:not(:disabled) { background: #d8ff50; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 #0f1108; }
.btn-primary:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 #0f1108; }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }

.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: rgba(178, 58, 63, 0.2); }

.btn-block { width: 100%; }
.btn-small { padding: 6px 12px; font-size: 0.82rem; border-radius: var(--radius-sm); }
.btn-row { display: flex; gap: 8px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }

/* Botão sair — quadrado arredondado, fica vermelho no hover */
.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--border-strong);
  color: var(--text);
  transition: background 0.18s var(--ease), transform 0.1s;
  flex-shrink: 0;
}

.icon-square:hover { background: var(--danger); }
.icon-square:active { transform: scale(0.94); }
.icon-square svg { width: 20px; height: 20px; }

/* ───────────── App shell + navegação central ───────────── */

.app { display: flex; flex-direction: column; min-height: 100dvh; }

.navigation {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.navigation__dark-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(32, 37, 30, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.55s cubic-bezier(0.5, 0.5, 0, 1), visibility 0.55s;
}

[data-navigation-status="active"] .navigation__dark-bg {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.centered-nav {
  position: absolute;
  top: 18px;
  left: 50%;
  width: min(650px, calc(100vw - 40px));
  color: var(--text);
  border-radius: 18px;
  isolation: isolate;
  font-family: var(--nav-font);
  transform: translateX(-50%);
  box-shadow: 0 22px 70px rgba(32, 37, 30, 0.14), 0 1px 0 rgba(255, 255, 255, 0.9);
}

.centered-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(32, 37, 30, 0.12);
  border-radius: inherit;
  pointer-events: none;
}

.glass-effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  color: #bee336;
  pointer-events: none;
  isolation: isolate;
  -webkit-backdrop-filter: saturate(120%) blur(0.75em);
  backdrop-filter: saturate(120%) blur(0.75em);
}

.glass-effect > div { position: absolute; inset: 0; border-radius: inherit; }
.glass-effect__fill { background: rgba(255, 255, 255, 0.88); }
.glass-effect__fill-burn { opacity: 0.05; background: currentColor; mix-blend-mode: color-burn; }
.glass-effect__highlight-soft { mix-blend-mode: overlay; box-shadow: inset -0.28125em -0.28125em 0.09375em -0.328125em rgba(190, 227, 54, 0.18); }
.glass-effect__highlight-strong { box-shadow: inset 0.28125em 0.28125em 0.09375em -0.328125em rgba(255, 255, 255, 0.18); }
.glass-effect__edge-light { mix-blend-mode: plus-lighter; box-shadow: inset 0.1875em 0.28125em 0.09375em -0.1875em rgba(190, 227, 54, 0.22); }
.glass-effect__edge-dark { mix-blend-mode: overlay; box-shadow: inset -0.1875em -0.28125em 0.09375em -0.1875em rgba(179, 179, 179, 0.3); }
.glass-effect__inner-glow { mix-blend-mode: darken; box-shadow: inset 0 0 1.75em rgba(242, 242, 242, 0.3); }

.centered-nav__header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 68px;
  padding: 10px 14px 10px 16px;
  pointer-events: auto;
}

.topbar-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.centered-nav .brand-mark { width: 38px; height: 38px; }
.centered-nav .brand-name {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.nav-current {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 13px;
  border: 1.5px solid #0f1108;
  border-radius: var(--radius-sm);
  background: rgba(190, 227, 54, 0.5);
  box-shadow: 2px 2px 0 0 #0f1108;
  white-space: nowrap;
}

.nav-current strong {
  color: #0f1108;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.centered-nav__toggle {
  position: relative;
  justify-self: end;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  transition: background 0.2s, transform 0.12s;
}

.centered-nav__toggle:active { transform: scale(0.95); }
.centered-nav__toggle-bar {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.52s cubic-bezier(0.65, 0, 0, 1);
  transform: translateY(-3.5px);
}

.centered-nav__toggle-bar:nth-child(2) { transform: translateY(3.5px); }
.centered-nav__toggle:hover .centered-nav__toggle-bar { transform: translateY(2px); }
.centered-nav__toggle:hover .centered-nav__toggle-bar:nth-child(2) { transform: translateY(-2px); }
[data-navigation-status="active"] .centered-nav__toggle-bar { transform: rotate(45deg); }
[data-navigation-status="active"] .centered-nav__toggle-bar:nth-child(2) { transform: rotate(-45deg); }
[data-navigation-status="active"] .centered-nav__toggle:hover .centered-nav__toggle-bar { transform: rotate(45deg); }
[data-navigation-status="active"] .centered-nav__toggle:hover .centered-nav__toggle-bar:nth-child(2) { transform: rotate(-45deg); }

.centered-nav__content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.58s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-navigation-status="active"] .centered-nav__content { grid-template-rows: 1fr; }

.centered-nav__inner {
  min-height: 0;
  overflow: hidden;
  pointer-events: auto;
}

.topnav { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 18px 16px; }

.nav-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 54px;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 0.88rem;
  font-weight: 570;
  text-align: left;
  opacity: 0;
  transform: translateY(115%);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0, 1), opacity 0.35s, background 0.18s, color 0.18s;
}

.nav-tab:nth-child(odd) { border-right: 1px solid var(--border); }
.nav-tab span { color: var(--accent-strong); font-family: var(--mono); font-size: 0.62rem; }
[data-navigation-status="active"] .nav-tab { opacity: 1; transform: none; }
.nav-tab:hover { background: rgba(190, 227, 54, 0.08); color: var(--text); }

.nav-tab.is-active { background: var(--accent); color: #20251e; }

.nav-tab.is-active span { color: #20251e; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #d9ff50, #8ca923);
  color: #20251e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.user-name {
  font-size: 0.86rem;
  font-weight: 560;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 18px 18px;
  padding: 12px;
  border: 1px solid rgba(190, 227, 54, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(190, 227, 54, 0.04);
  opacity: 0;
  transform: translateY(18px);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0, 1), opacity 0.35s;
}

[data-navigation-status="active"] .nav-session { opacity: 1; transform: none; }
.nav-session-copy { display: flex; flex-direction: column; min-width: 0; }
.nav-session-copy small { color: var(--text-3); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }

.nav-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--danger);
  font-size: 0.72rem;
  font-weight: 620;
}

.nav-logout:hover { background: var(--danger-soft); }
.nav-logout svg { width: 16px; height: 16px; }
body.has-open-navigation { overflow: hidden; }

/* ───────────── Transição curva entre telas ───────────── */

.view-transition {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: clip;
  pointer-events: none;
  visibility: hidden;
}

.view-transition__panel {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: currentColor;
}

.view-transition__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background:
    radial-gradient(circle at 50% 30%, rgba(190, 227, 54, 0.18), transparent 34%),
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.035) 50%, transparent 65%);
}

.view-transition__panel-top,
.view-transition__panel-bottom {
  position: absolute;
  left: 0;
  display: flex;
  width: 100%;
  height: 0;
  align-items: center;
  overflow: hidden;
}

.view-transition__panel-top {
  bottom: calc(100% - 1px);
  flex-flow: column;
  transform-origin: bottom;
}

.view-transition__panel-bottom {
  top: calc(100% - 1px);
  flex-flow: column;
  justify-content: flex-end;
  transform-origin: top;
}

.view-transition__panel-circle {
  position: absolute;
  width: 125%;
  height: 500%;
  border-radius: 50%;
  background: currentColor;
}

.view-transition__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: center;
  color: #20251e;
  font-family: var(--nav-font);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.view-transition__mark {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
}

.view-transition__mark img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22%;
  object-fit: cover;
  filter: drop-shadow(0 9px 12px rgba(32, 37, 30, 0.22));
}

.view-transition__wordmark {
  align-self: end;
  font-size: 1.18rem;
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.view-transition__destination {
  align-self: start;
  margin-top: 4px;
  color: #20251e;
  font-family: var(--mono);
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

body.is-view-transitioning { overflow: hidden; }
body.is-view-transitioning .app { pointer-events: none; }
body.is-view-transitioning .page { animation: none; }

/* ───────────── Conteúdo ───────────── */

.main {
  flex: 1;
  min-width: 0;
  padding: 122px clamp(24px, 3.2vw, 64px) 64px;
}

.page {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.page-sub { margin: 5px 0 0; color: var(--text-2); font-size: 0.94rem; }

/* ───────────── Cards ───────────── */

.card {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.card + .card { margin-top: 18px; }

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.card-title { margin: 0; font-size: 1.08rem; font-weight: 640; letter-spacing: -0.01em; }
.card-sub { margin: 3px 0 0; font-size: 0.85rem; color: var(--text-3); }

/* ───────────── Stat cards (clicáveis) ───────────── */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  text-align: left;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 17px 18px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: transform 0.14s var(--ease), box-shadow 0.14s, border-color 0.14s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: var(--border-strong);
}

.stat-card:hover .stat-arrow { opacity: 1; transform: none; }
.stat-card:active { transform: translateY(0); }

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.stat-icon svg { width: 21px; height: 21px; }

.tint-violet { background: var(--accent-soft); color: var(--accent-strong); }
.tint-red { background: var(--danger-soft); color: var(--danger); }
.tint-blue { background: var(--blue-soft); color: var(--blue); }
.tint-green { background: var(--success-soft); color: var(--success); }

.stat-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.stat-label {
  font-size: 0.78rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value { font-size: 1.6rem; font-weight: 660; letter-spacing: -0.02em; line-height: 1.15; }

.stat-arrow {
  color: var(--text-3);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}

.stat-arrow svg { width: 18px; height: 18px; display: block; }

/* ───────────── Segmented (período do gráfico) ───────────── */

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.seg-btn {
  padding: 6px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 0.83rem;
  font-weight: 560;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.seg-btn:hover { color: var(--text); }

.seg-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(26, 25, 22, 0.12);
}

/* ───────────── Heatmap ───────────── */

.heatmap-card { overflow: hidden; }

.hm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.hm-hint { font-size: 0.78rem; color: var(--text-3); }

.hm-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--text-3); }
.hm-legend span { margin: 0 3px; }

.hm-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--hm-l0); display: inline-block; }
.hm-swatch.l1 { background: var(--hm-l1); }
.hm-swatch.l2 { background: var(--hm-l2); }
.hm-swatch.l3 { background: var(--hm-l3); }
.hm-swatch.l4 { background: var(--hm-l4); }

.hm-tooltip {
  position: fixed;
  z-index: 60;
  background: #1a1916;
  color: #fff;
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-pop);
  transform: translate(-50%, calc(-100% - 10px));
}

/* níveis compartilhados (cor = quantidade) */
.hm-dot, .hm-cell { background: var(--hm-l0); }
.hm-dot.l1, .hm-cell.l1 { background: var(--hm-l1); }
.hm-dot.l2, .hm-cell.l2 { background: var(--hm-l2); }
.hm-dot.l3, .hm-cell.l3 { background: var(--hm-l3); }
.hm-dot.l4, .hm-cell.l4 { background: var(--hm-l4); }

/* ── ANO (estilo GitHub) ── */
.heatmap-wrap.is-ano { --yc: 15px; --yg: 3.5px; overflow-x: auto; padding: 4px 2px 8px; }

.hm-year { display: inline-block; min-width: 100%; }

.hm-year-months {
  display: flex;
  margin-left: 30px;
  margin-bottom: 7px;
  font-size: 0.72rem;
  color: var(--text-3);
  min-height: 1em;
}

.hm-year-mlabel { flex-shrink: 0; }

.hm-year-body { display: flex; }

.hm-year-weekdays {
  display: grid;
  grid-template-rows: repeat(7, var(--yc));
  row-gap: var(--yg);
  width: 30px;
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--text-3);
}

.hm-year-weekdays span { display: flex; align-items: center; }

.hm-year-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--yc));
  grid-auto-columns: var(--yc);
  gap: var(--yg);
}

.hm-dot {
  width: var(--yc);
  height: var(--yc);
  border: none;
  border-radius: 3px;
  padding: 0;
  position: relative;
  transition: transform 0.12s var(--ease), box-shadow 0.12s;
}

.hm-dot:hover { transform: scale(1.25); box-shadow: 0 2px 8px rgba(26, 25, 22, 0.22); z-index: 2; }
.hm-dot.is-out { visibility: hidden; pointer-events: none; }
.hm-dot.is-today { outline: 2px solid var(--accent); outline-offset: 1.5px; }

.hm-dot.has-late::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid var(--surface);
}

/* ── MÊS e SEMANA — células quadradas cheias (cor = quantidade) ── */
.hm-cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.hm-cal-head span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hm-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.hm-week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.hm-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--hm-l0);
  text-align: left;
  transition: transform 0.12s var(--ease), box-shadow 0.14s, border-color 0.14s;
}

.hm-week-row .hm-cell { min-height: 96px; }

.hm-cell.l1, .hm-cell.l2, .hm-cell.l3, .hm-cell.l4 { border-color: transparent; }

.hm-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--accent-strong);
}

.hm-cell.is-out { visibility: hidden; pointer-events: none; }
.hm-cell.is-today { outline: 2px solid var(--text); outline-offset: 1px; }

.hm-cell-top { display: flex; align-items: baseline; gap: 7px; }

.hm-cell-wd {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hm-cell-num { font-size: 0.86rem; font-weight: 640; color: var(--text-2); }

.hm-cell-count {
  align-self: flex-end;
  font-size: 1.18rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}

/* contraste na célula verde-lima */
.hm-cell.l4 .hm-cell-num, .hm-cell.l4 .hm-cell-wd { color: rgba(32, 37, 30, 0.76); }
.hm-cell.l4 .hm-cell-count { color: #20251e; }

.hm-cell.has-late::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
}

/* ───────────── Próximos ───────────── */

.upcoming-list { display: flex; flex-direction: column; }

.upcoming-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 6px;
  border-top: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background 0.14s;
}

.upcoming-row:hover { background: var(--surface-2); }
.upcoming-row:first-child { border-top: none; }

.upcoming-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: 6px 8px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.upcoming-when.is-late { background: var(--danger-soft); }

.upcoming-day { font-size: 1.05rem; font-weight: 680; color: var(--accent-strong); line-height: 1.1; }
.upcoming-when.is-late .upcoming-day { color: var(--danger); }

.upcoming-month {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
}

.upcoming-body { min-width: 0; flex: 1; }

.upcoming-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 580;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-note {
  margin: 1px 0 0;
  font-size: 0.8rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-time { font-family: var(--mono); font-size: 0.8rem; color: var(--text-2); flex-shrink: 0; }

.empty-inline { margin: 6px 0 0; color: var(--text-3); font-size: 0.88rem; }

/* ───────────── Agenda ───────────── */

.agenda-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 18px;
  align-items: start;
}

.composer { position: sticky; top: 100px; }
.composer .card-title { margin-bottom: 14px; }
.composer .card-sub { margin: -10px 0 14px; }

.agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.agenda-nav { display: flex; align-items: center; gap: 4px; }
.agenda-range { font-size: 0.9rem; font-weight: 580; padding: 0 6px; white-space: nowrap; }

.search-input { max-width: 240px; padding: 9px 12px; font-size: 0.88rem; }

/* Day-strip circular (estilo referência) */
.day-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 20px;
}

.day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  border: none;
  background: transparent;
}

.day-pill-weekday {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
}

.day-pill-circle {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.day-pill:hover .day-pill-circle { border-color: var(--border-strong); background: var(--surface-2); }
.day-pill:active .day-pill-circle { transform: scale(0.94); }

.day-pill-num { font-size: 0.98rem; font-weight: 640; color: var(--text); }

.day-pill.has-events .day-pill-circle { background: var(--accent-soft); border-color: var(--accent); }
.day-pill.is-today .day-pill-circle { border-color: var(--accent); border-width: 2px; }

.day-pill.is-active .day-pill-circle { background: var(--accent); border-color: var(--accent); }
.day-pill.is-active .day-pill-num { color: #20251e; }

.day-pill-dot {
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-sm);
  background: var(--accent-strong);
}

.day-pill.is-active .day-pill-dot { background: #fff; }

.day-header { margin: 0 0 10px; font-size: 0.98rem; font-weight: 640; text-transform: capitalize; }

.reminder-list { display: flex; flex-direction: column; }

.reminder-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 4px;
  border-top: 1px solid var(--border);
}

.reminder-row:first-child { border-top: none; }
.reminder-row.is-done .reminder-row-title { text-decoration: line-through; color: var(--text-3); }

.reminder-row-time {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  flex-shrink: 0;
  margin-top: 1px;
}

.reminder-row-body { flex: 1; min-width: 0; }
.reminder-row-title { margin: 0; font-size: 0.93rem; font-weight: 580; }
.reminder-row-note { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-3); }

/* Prévia da mensagem pronta: duas linhas e o resto fica no botão de copiar. */
.reminder-row-msg {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.4;
  white-space: pre-wrap;
}

.reminder-row-msg::before { content: "“"; }
.reminder-row-msg::after { content: "”"; }

.reminder-row-actions { display: flex; gap: 2px; flex-shrink: 0; }

.reminder-copy,
.reminder-complete, .reminder-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  transition: background 0.15s, color 0.15s;
}

.reminder-copy:hover { background: var(--accent-soft); color: var(--accent-strong); }
.reminder-copy.is-copied { background: var(--success-soft); color: var(--success); }
.reminder-complete:hover { background: var(--success-soft); color: var(--success); }
.reminder-complete.is-done { color: var(--success); }
.reminder-delete:hover { background: var(--danger-soft); color: var(--danger); }

.empty-state { text-align: center; padding: 44px 20px; }
.empty-title { margin: 0; font-weight: 640; font-size: 0.98rem; }
.empty-sub { margin: 4px 0 0; color: var(--text-3); font-size: 0.86rem; }

/* Campo de mensagem pronta: espaço para uns bons parágrafos. */
.field-msg { min-height: 6.5em; line-height: 1.5; resize: vertical; }

/* ───────────── Onboarding ───────────── */

.filters { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 560;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  transition: all 0.15s;
}

.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #20251e; }

.ob-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.select-inline { max-width: 190px; font-size: 0.84rem; padding: 8px 10px; }
.ob-count { margin: 0; font-size: 0.82rem; color: var(--text-3); }

.assign-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

.assign-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.14s;
}

.assign-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); transform: translateY(-1px); }

.assign-card h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 640;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.assign-card h3 .assign-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.assign-code {
  font-family: var(--mono);
  font-size: 0.72rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  flex-shrink: 0;
}

.assign-meta { margin: 0; font-size: 0.82rem; color: var(--text-2); line-height: 1.55; }
.assign-ttl { color: var(--text-3); font-size: 0.76rem; }

.badge-row { display: flex; gap: 6px; flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}

.badge-bronze { background: #fbeecd; border-color: #f2dca3; color: #8a5a12; }
.badge-prata { background: #eef1f5; border-color: #dce2ea; color: #4a5568; }
.badge-ouro { background: #fbf3c9; border-color: #f2e08f; color: #7c5b0d; }
.badge-platina { background: #e6ebf2; border-color: #ccd6e2; color: #35404f; }
.badge-diamante { background: #e4e9ff; border-color: #c8d2ff; color: #34348a; }

.assign-actions { display: flex; gap: 8px; }

/* ───────────── Export + Troca de carteira ───────────── */

.export-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tc-atual { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; margin-top: -6px; }
.tc-atual > span:first-child { color: var(--text-3); }

.transfer-list { display: flex; flex-direction: column; }

.transfer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 4px;
  border-top: 1px solid var(--border);
}

.transfer-row:first-child { border-top: none; }
.transfer-main { min-width: 0; }

.transfer-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 580;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.transfer-meta { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-3); }

.transfer-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.transfer-carteira { display: flex; align-items: center; gap: 6px; }
.transfer-arrow { color: var(--text-3); }
.transfer-when { font-size: 0.73rem; color: var(--text-3); font-family: var(--mono); }

/* ──────────── Cancelamentos ──────────── */

.eyebrow,
.form-kicker {
  display: block;
  margin: 0 0 5px;
  color: var(--accent-strong);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cancel-page-head { align-items: center; }

.cancel-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  font-size: 0.75rem;
}

.cancel-summary span { display: flex; align-items: baseline; gap: 5px; }
.cancel-summary strong { color: var(--accent); font-family: var(--mono); font-size: 1.05rem; }

.cancel-layout { grid-template-columns: 350px 1fr; }
.cancel-composer .card-title { margin-bottom: 4px; }
.cancel-composer .card-sub { margin: 0 0 18px; line-height: 1.5; }
.cancel-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cancel-form-actions .btn { padding-inline: 10px; }

.cancel-link-result {
  margin-top: 18px;
  padding: 14px;
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 26%, transparent);
  border-radius: var(--radius-sm);
  animation: rise 0.32s var(--ease) both;
}

.link-result-head { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(23, 163, 74, 0.1); }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 11px; }
.copy-field input { min-width: 0; padding-block: 8px; font-family: var(--mono); font-size: 0.7rem; color: var(--text-2); }
.cancel-link-result > p { margin: 8px 0 0; color: var(--text-3); font-size: 0.72rem; }

.cancel-panel { min-width: 0; }
.cancel-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 11px; margin-bottom: 14px; }
.cancel-status-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.cancel-view-filters { display: flex; align-items: center; gap: 7px; width: 100%; }
.cancel-view-filters .select-inline { max-width: 150px; }
.cancel-view-filters .search-input { min-width: 175px; max-width: none; flex: 1; }
.cancel-list-head { display: flex; justify-content: space-between; padding: 0 3px 10px; border-bottom: 1px solid var(--border); }
.cancel-list-head p,
.cancel-list-head span { margin: 0; color: var(--text-3); font-size: 0.74rem; }

.cancel-list { display: flex; flex-direction: column; }

.cancel-item {
  position: relative;
  padding: 18px 3px;
  border-bottom: 1px solid var(--border);
}

.cancel-item:last-child { border-bottom: 0; }
.cancel-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cancel-item-main { min-width: 0; }
.cancel-item-title { margin: 0; font-size: 0.98rem; font-weight: 650; }
.cancel-item-cnpj { margin: 2px 0 0; color: var(--text-3); font-family: var(--mono); font-size: 0.73rem; }
.cancel-item-side { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

.cancel-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.7rem;
  font-weight: 650;
}

.cancel-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.cancel-status.is-pendente { background: var(--accent-soft); border-color: rgba(190, 227, 54, 0.3); color: var(--accent); }
.cancel-status.is-pendente::before { background: var(--accent-strong); }
.cancel-status.is-respondido { background: var(--success-soft); border-color: rgba(190, 227, 54, 0.3); color: var(--success); }
.cancel-status.is-respondido::before { background: var(--success); }
.cancel-status.is-expirado { background: var(--danger-soft); border-color: #f4d2d0; color: var(--danger); }
.cancel-status.is-expirado::before { background: var(--danger); }

.cancel-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; margin-top: 11px; color: var(--text-3); font-size: 0.76rem; }
.cancel-item-meta strong { color: var(--text-2); font-weight: 570; }
.cancel-item-actions { display: flex; gap: 7px; margin-top: 13px; }

.response-details { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.response-details summary { padding: 10px 12px; cursor: pointer; list-style: none; color: var(--text-2); font-size: 0.8rem; font-weight: 620; }
.response-details summary::-webkit-details-marker { display: none; }
.response-details summary::after { content: "+"; float: right; color: var(--text-3); font-family: var(--mono); }
.response-details[open] summary::after { content: "−"; }

.response-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 12px 14px; }
.response-field { min-width: 0; }
.response-field.is-wide { grid-column: 1 / -1; }
.response-label { margin: 0 0 3px; color: var(--text-3); font-size: 0.68rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; }
.response-value { margin: 0; color: var(--text-2); font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty-glyph { width: 40px; height: 40px; display: grid; place-items: center; margin: 0 auto 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--accent-strong); background: var(--accent-soft); font-family: var(--mono); font-size: 1.15rem; }

/* ───────────── Equipe ───────────── */

.team-page-head { align-items: center; }

.team-page-actions { display: flex; align-items: stretch; gap: 10px; }

.team-leader-picker {
  min-width: 270px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.team-leader-picker > label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.team-leader-picker__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.team-leader-picker select { min-width: 0; height: 34px; padding: 6px 30px 6px 9px; font-size: 0.75rem; }
.team-leader-picker .btn { min-height: 34px; padding-block: 6px; }
.team-leader-picker .form-hint { margin: 7px 0 0; font-size: 0.66rem; }

.team-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 10px 18px 10px 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.team-summary__avatars { display: flex; padding-left: 8px; }

.team-summary__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: -8px;
  overflow: hidden;
  color: #20251e;
  background: #bee336;
  border: 3px solid #fff;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(32, 37, 30, 0.12);
}

.team-summary__avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-summary__copy { display: flex; flex-direction: column; }
.team-summary__copy strong { color: var(--text); font-size: 1.05rem; line-height: 1; }
.team-summary__copy span { margin-top: 4px; color: var(--text-3); font-size: 0.7rem; white-space: nowrap; }

.team-showcase {
  position: relative;
  width: 100%;
  color: var(--text);
}

.team-showcase::before { content: none; }

.team-showcase__intro {
  margin: 2px 0 24px;
}

.team-showcase__intro h2 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 540;
  letter-spacing: 0.05em;
  line-height: 1;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
  gap: 24px 26px;
  padding-top: 30px;
  align-items: start;
}

.team-member { min-width: 0; position: relative; }
.team-member__wrap { width: 100%; padding: 9px; position: relative; }

.team-member__card {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  color: #fff;
  background: #2c3329;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(18px, 1.5vw, 26px);
  box-shadow: 0 18px 36px rgba(32, 37, 30, 0.18);
  will-change: transform;
}

.team-member__portrait,
.team-member__image,
.team-member__grain,
.team-member__shade { position: absolute; inset: 0; }

.team-member__portrait { overflow: hidden; background: linear-gradient(145deg, #3c4934, #171b16); }

.team-member__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.025);
  filter: saturate(0.82) contrast(1.03);
}

.team-member__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(190, 227, 54, 0.76);
  font-family: var(--mono);
  font-size: clamp(3.5rem, 7vw, 8rem);
  font-weight: 500;
  letter-spacing: -0.09em;
  background:
    radial-gradient(circle at 70% 24%, rgba(190, 227, 54, 0.2), transparent 30%),
    linear-gradient(150deg, #3b4734, #1a1f18 70%);
}

.team-member__grain {
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.team-member__shade {
  background: linear-gradient(to bottom, rgba(8, 10, 8, 0.04) 30%, rgba(8, 10, 8, 0.88) 100%);
  pointer-events: none;
}

.team-member__topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.team-member__crown-wrap {
  position: absolute;
  z-index: 5;
  top: 9px;
  right: 13px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  transform: translate(35%, -54%);
}

.team-member__crown {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 72%;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.22));
  will-change: transform;
}

.team-member__crown svg { display: block; width: 100%; height: 100%; transform: rotate(5deg); }
.team-member.is-leader .team-member__card { border-color: rgba(190, 227, 54, 0.5); box-shadow: 0 20px 44px rgba(93, 116, 12, 0.2); }

.team-member__status-dot {
  width: 8px;
  height: 8px;
  background: #bee336;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(190, 227, 54, 0.13);
}

.team-member.is-pending .team-member__status-dot { background: #8c9388; box-shadow: 0 0 0 5px rgba(140, 147, 136, 0.13); }

.team-member__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 2vw, 30px);
}

.team-member__name-row { display: flex; align-items: center; gap: 7px; }
.team-member__name-row h3 { margin: 0; font-size: clamp(1.35rem, 1.8vw, 2rem); font-weight: 570; letter-spacing: -0.035em; line-height: 1; }
.team-member__check { width: 23px; height: 23px; flex: 0 0 auto; color: #bee336; }
.team-member__content > p { margin: 7px 0 0; color: rgba(255, 255, 255, 0.68); font-size: 0.86rem; }

.team-member__sync {
  display: inline-flex;
  margin-top: 18px;
  padding: 6px 9px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(16, 19, 15, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.6rem;
}

.team-empty { padding: 54px 20px; text-align: center; }
.team-empty > span { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 16px; color: #20251e; background: #bee336; border-radius: 50%; font-size: 1.4rem; }
.team-empty h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.team-empty p { margin: 7px 0 0; color: var(--text-3); font-size: 0.84rem; }
.team-empty code { color: var(--accent-strong); font-family: var(--mono); }

/* ───────────── Rodízio ───────────── */

.rotation-page { max-width: 1800px; }
.rotation-page-head { align-items: flex-end; }

.rotation-modes {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--glass-inset);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.rotation-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 0.83rem;
  font-weight: 560;
  transition: background 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), transform 110ms var(--ease);
}

.rotation-mode:active { transform: scale(0.97); }

.rotation-mode.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.rotation-mode-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
}

.rotation-mode-icon svg { width: 100%; height: 100%; }

/* Uma placa por grupo de carteira, empilhadas. */
.rotation-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity 160ms var(--ease);
}

.rotation-groups[aria-busy="true"] { opacity: 0.62; }

.rotation-loading {
  margin: 0;
  padding: 40px 0;
  color: var(--text-3);
  font-size: 0.86rem;
  text-align: center;
}

.rotation-group {
  padding: 20px 22px 22px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.rotation-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.rotation-group-title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.rotation-group-title h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 640;
  letter-spacing: -0.015em;
}

.rotation-carteiras {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rotation-carteira {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--text-3)) 32%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--chip-color, var(--text-3)) 11%, transparent);
  color: color-mix(in srgb, var(--chip-color, var(--text-2)) 78%, #241d0d);
  font-size: 0.68rem;
  font-weight: 620;
}

.rotation-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 26px;
  padding: 0 9px;
  background: var(--glass-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.rotation-group-body {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(310px, 0.96fr);
  gap: 20px;
  align-items: start;
  padding-top: 16px;
}

.rotation-queue { min-width: 0; }

.rotation-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rotation-person {
  position: relative;
  display: grid;
  grid-template-columns: 25px 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 150ms var(--ease), border-color 150ms var(--ease), box-shadow 150ms var(--ease), transform 120ms var(--ease);
}

.rotation-person.is-current {
  z-index: 3;
  background: var(--accent-soft);
  border-color: rgba(202, 138, 4, 0.38);
}

/* Pausado: continua na fila, mas recuado — dá para ver que está lá sem
   confundir com quem está rodando. */
.rotation-person.is-paused {
  background: var(--surface-2);
  border-style: dashed;
}

.rotation-person.is-paused .rotation-avatar,
.rotation-person.is-paused .rotation-person-copy strong { opacity: 0.5; }
.rotation-person.is-paused .rotation-position { opacity: 0.45; }
.rotation-person.is-paused .rotation-person-copy small { color: var(--text-3); font-style: italic; }

.rotation-position {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.66rem;
  text-align: center;
}

.rotation-person.is-current .rotation-position {
  color: var(--accent-strong);
  font-weight: 700;
}

.rotation-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  overflow: hidden;
}

.rotation-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rotation-person.is-current .rotation-avatar {
  background: var(--surface);
  border-color: rgba(202, 138, 4, 0.32);
  color: var(--accent-strong);
}

.rotation-person-copy { min-width: 0; }

.rotation-person-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rotation-person-copy small {
  display: block;
  margin-top: 1px;
  color: var(--text-3);
  font-size: 0.69rem;
}

.rotation-person.is-current .rotation-person-copy small { color: var(--accent-strong); }

.rotation-person-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Seletor de grupo: é por aqui que o CS troca de carteira. */
.rotation-move { display: inline-flex; }

.rotation-move-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rotation-move select {
  max-width: 158px;
  height: 27px;
  padding: 0 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 560;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}

.rotation-move select:disabled { opacity: 0.5; cursor: default; }
.rotation-person.is-current .rotation-move select { border-color: rgba(202, 138, 4, 0.28); }

.rotation-order-btn,
.rotation-set-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease), transform 110ms var(--ease);
}

.rotation-order-btn {
  width: 25px;
  padding: 0;
}

.rotation-order-btn svg { width: 14px; height: 14px; }
.rotation-order-btn:disabled { opacity: 0.25; cursor: default; }

.rotation-set-btn {
  padding: 0 9px;
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 600;
}

.rotation-set-btn:disabled { opacity: 0.55; cursor: default; }

.rotation-order-btn:active:not(:disabled),
.rotation-set-btn:active:not(:disabled) { transform: scale(0.95); }

.rotation-current-badge,
.rotation-paused-badge {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(202, 138, 4, 0.28);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  font-family: var(--mono);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rotation-paused-badge {
  background: transparent;
  border-color: var(--border-strong);
  border-style: dashed;
  color: var(--text-3);
}

/* Botão de pausa/retorno: pausar é discreto, trazer de volta é o destaque. */
.rotation-pause-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease), transform 110ms var(--ease);
}

.rotation-pause-btn svg { width: 15px; height: 15px; }
.rotation-pause-btn:disabled { opacity: 0.35; cursor: default; }
.rotation-pause-btn:active:not(:disabled) { transform: scale(0.95); }

.rotation-pause-btn.is-paused {
  background: var(--surface);
  border-color: rgba(202, 138, 4, 0.35);
  color: var(--accent-strong);
}

.rotation-empty {
  padding: 40px 20px;
  background: var(--glass-inset);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
}

.rotation-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--accent-soft);
  border: 1px solid rgba(202, 138, 4, 0.24);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  font-family: var(--mono);
  font-size: 1.2rem;
}

.rotation-empty p { margin: 10px 0 2px; font-weight: 640; }
.rotation-empty > span:last-child { color: var(--text-3); font-size: 0.78rem; }

.rotation-spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: 16px 18px 18px;
  background: var(--glass-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}

.rotation-spotlight::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(190, 227, 54, 0.72), transparent);
}

.rotation-spotlight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.rotation-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
  font-size: 0.73rem;
}

.rotation-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.rotation-live.is-idle i {
  background: var(--text-3);
  box-shadow: 0 0 0 3px var(--surface-2);
}

.rotation-kind-label {
  padding: 4px 8px;
  background: var(--accent-soft);
  border: 1px solid rgba(202, 138, 4, 0.2);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  font-family: var(--mono);
  font-size: 0.59rem;
  letter-spacing: 0.08em;
}

.rotation-current {
  display: flex;
  flex: 1;
  min-height: 210px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-inline: -18px;
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, rgba(253, 243, 217, 0.34), transparent 82%);
  text-align: center;
}

.rotation-current-label {
  margin: 0 0 14px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rotation-emblem {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--surface);
  border-radius: var(--radius);
  color: var(--accent-strong);
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.06em;
  box-shadow: 0 0 0 5px var(--accent-soft), 0 10px 24px rgba(169, 118, 15, 0.14);
}

.rotation-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) - 2px);
  object-fit: cover;
}

.rotation-current h3 {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: clamp(1.7rem, 2.9vw, 2.15rem);
  font-weight: 640;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.rotation-current-sub {
  margin: 6px 0 0;
  max-width: 340px;
  color: var(--text-2);
  font-size: 0.8rem;
}

.rotation-next-card {
  align-self: center;
  width: 100%;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.rotation-next-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.rotation-next-copy small { color: var(--text-3); font-size: 0.68rem; }

.rotation-next-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Recado (não é nome de gente): pode quebrar linha em vez de ser cortado. */
.rotation-next-copy strong.is-note {
  overflow: visible;
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 560;
  text-overflow: clip;
  white-space: normal;
}


.rotation-advance {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 100%;
  min-height: 43px;
  gap: 8px;
  margin-top: 9px;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  box-shadow: var(--shadow-sm);
  color: #20251e;
  text-align: left;
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease), transform 110ms var(--ease);
}

.rotation-advance:active { transform: scale(0.98); }
.rotation-advance:disabled { opacity: 0.55; cursor: not-allowed; }

.rotation-advance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
}

.rotation-advance-icon svg { width: 16px; height: 16px; }
.rotation-advance > span:last-child { display: flex; flex-direction: column; }
.rotation-advance small { display: none; }
.rotation-advance strong { font-size: 0.84rem; font-weight: 620; }

.rotation-status {
  margin: 14px 0 0;
  padding: 10px 13px;
  background: var(--danger-soft);
  border: 1px solid rgba(229, 72, 77, 0.18);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 0.8rem;
  text-align: center;
}

.rotation-status.is-ok {
  background: var(--success-soft);
  border-color: rgba(23, 163, 74, 0.18);
  color: var(--success);
}

@media (hover: hover) and (pointer: fine) {
  .rotation-mode:hover { color: var(--text); }
  .rotation-person:not(.is-current):hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
  }
  .rotation-order-btn:hover:not(:disabled),
  .rotation-pause-btn:hover:not(:disabled) {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
  }
  .rotation-pause-btn.is-paused:hover:not(:disabled) { color: var(--accent-strong); }
  .rotation-set-btn:hover:not(:disabled),
  .rotation-move select:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
  }
  .rotation-advance:hover:not(:disabled) {
    background: #000;
    box-shadow: var(--shadow-card);
  }
}

/* ───────────── Drawer ───────────── */

.drawer { position: fixed; inset: 0; z-index: 600; }

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(74, 52, 20, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-bg 0.2s both;
}

@keyframes fade-bg { from { opacity: 0; } to { opacity: 1; } }

.drawer-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(430px, 94vw);
  overflow: hidden;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  animation: slide-in 0.3s var(--ease) both;
}

@keyframes slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.drawer-date { margin: 0; font-size: 1.18rem; font-weight: 640; letter-spacing: -0.01em; text-transform: capitalize; }
.drawer-sub { margin: 3px 0 0; font-size: 0.84rem; color: var(--text-3); }

.drawer-body { flex: 1; overflow-y: auto; padding: 14px 24px; }
.drawer-list { display: flex; flex-direction: column; }

.drawer-foot { border-top: 1px solid var(--border); padding: 16px 24px 20px; background: var(--surface-2); }
.drawer-foot-title { margin: 0 0 12px; font-size: 0.88rem; font-weight: 640; }

/* ───────────── Modais ───────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 610;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(74, 52, 20, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-bg 0.2s both;
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 24px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  animation: rise 0.3s var(--ease) both;
}

.modal-wide { max-width: 560px; }

.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.modal-title { margin: 0; font-size: 1.14rem; font-weight: 660; letter-spacing: -0.01em; }
.modal-sub { margin: 3px 0 0; font-size: 0.84rem; color: var(--text-3); }
.modal-text { margin: 8px 0 0; color: var(--text-2); font-size: 0.92rem; }

.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-actions .form-hint { margin-right: auto; }

.jornada-etapas { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.jornada-etapa { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; background: var(--surface-2); }

.jornada-etapa-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.9rem; }

.jornada-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.jornada-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }

/* ───────────── Responsivo ───────────── */

@media (max-width: 1180px) {
  .centered-nav { width: min(620px, calc(100vw - 32px)); }
}

@media (max-width: 980px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .agenda-layout { grid-template-columns: 1fr; }
  .composer { position: static; }
  .team-page-actions { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 900px) {
  .rotation-group-body { grid-template-columns: 1fr; }
  .rotation-spotlight { order: -1; }
}

@media (max-width: 760px) {
  .centered-nav { top: 10px; left: 10px; right: 10px; width: auto; transform: none; }
  .centered-nav__header { min-height: 62px; padding: 8px 10px 8px 12px; }
  .centered-nav .brand-mark { width: 36px; height: 36px; }
  .nav-current { padding-inline: 8px; }
  .topnav { grid-template-columns: 1fr; padding: 2px 13px 13px; }
  .nav-tab:nth-child(odd) { border-right: 0; }
  .nav-tab { min-height: 48px; }
  .nav-session { margin: 0 13px 13px; }
  .centered-nav__inner { max-height: calc(100dvh - 86px); overflow-y: auto; }

  .main { padding: 96px 16px 52px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .cancel-summary { width: 100%; justify-content: space-between; }
  .team-page-actions { width: 100%; flex-direction: column; }
  .team-leader-picker { width: 100%; min-width: 0; }
  .team-summary { width: 100%; justify-content: space-between; }
  .team-showcase { padding: 0; }
  .team-showcase__intro { margin-bottom: 20px; }
  .team-showcase__intro h2 { font-size: clamp(1.75rem, 8vw, 2.45rem); }
  .team-member__wrap { padding: 5px; }
  .page-title { font-size: 1.5rem; }
  .stats-row { gap: 10px; }
  .card { padding: 18px; }
  .composer { top: 0; }
  .rotation-page-head { align-items: stretch; }
  .rotation-modes { width: 100%; }
  .rotation-mode { min-width: 0; flex: 1; justify-content: center; }
  .rotation-group { padding: 18px 16px 18px; }
  .rotation-group-head { flex-direction: column; align-items: flex-start; }
  .rotation-spotlight { padding: 16px; }
  .rotation-current { margin-inline: -16px; padding: 22px 16px 14px; }
  .rotation-emblem { width: 78px; height: 78px; }
  .rotation-current h3 { font-size: clamp(1.6rem, 7.5vw, 2.15rem); }
  .rotation-person { grid-template-columns: 22px 34px minmax(0, 1fr); row-gap: 8px; }
  .rotation-person-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .rotation-move select { max-width: none; flex: 1; }

  .hm-cell { min-height: 52px; padding: 6px 8px; }
  .hm-week-row .hm-cell { min-height: 76px; }
  .hm-cell-count { font-size: 1rem; }
  .hm-cal-head, .hm-cal-grid, .hm-week-row { gap: 5px; }

  .day-pill-circle { width: 38px; height: 38px; }

  .form-row { grid-template-columns: 1fr; }
  .form-row-13, .form-row-21 { grid-template-columns: 1fr 1fr; }
  .cancel-toolbar { align-items: stretch; flex-direction: column; }
  .cancel-view-filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .cancel-view-filters .select-inline { max-width: none; }
  .cancel-view-filters .search-input { grid-column: 1 / -1; width: 100%; max-width: none; }
  .response-grid { grid-template-columns: 1fr; }
  .response-field.is-wide { grid-column: auto; }
}

@media (max-width: 420px) {
  .centered-nav__header { grid-template-columns: 1fr auto; }
  .nav-current { display: none; }
  .brand-name { font-size: 0.95rem; }
  .stats-row { grid-template-columns: 1fr; }
  .rotation-avatar { width: 34px; height: 34px; }
  .rotation-set-btn { padding-inline: 6px; }
  .cancel-item-head { flex-direction: column; gap: 9px; }
  .cancel-item-side { width: 100%; justify-content: space-between; }
  .cancel-item-actions { flex-direction: column; }
  .cancel-item-actions .btn { width: 100%; }
  .cancel-form-actions { grid-template-columns: 1fr; }
  .cancel-summary { gap: 8px; padding-inline: 12px; }
  .cancel-summary span { flex-direction: column; gap: 0; align-items: flex-start; }
  .team-grid { grid-template-columns: minmax(0, 280px); justify-content: center; }
  .team-member__card { aspect-ratio: 4 / 4.8; }
  .team-summary__copy span { white-space: normal; }
  .nav-logout { font-size: 0; gap: 0; }
  .nav-logout svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .rotation-mode,
  .rotation-groups,
  .rotation-person,
  .rotation-order-btn,
  .rotation-set-btn,
  .rotation-advance,
  .centered-nav__content,
  .nav-tab,
  .nav-session,
  .centered-nav__toggle-bar { transition-duration: 0.01ms; }
}

/* marca-texto: modo de desenho (portado do _initHighlighterDrawMode) */
.login-prop--marker { pointer-events: auto; }
.login-prop--marker:hover { }
.login-prop--marker.is-drawing { z-index: 1200; }

.draw-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 1150;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
}

.draw-mode-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.draw-mode-svg line { stroke: #def915; stroke-width: 15px; stroke-linecap: round; }

.draw-mode-svg--persistent {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
}
.draw-mode-hint {
  position: fixed;
  left: 50%;
  bottom: 2.5rem;
  z-index: 1160;
  padding: 0.7em 1.1em;
  border: 3px solid #0f1108;
  border-radius: 10px;
  background: #fff;
  box-shadow: 4px 4px 0 0 #0f1108;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}



/* ───────────── Cursor: o sistema do nodeck, igual ao sound.css deles ─────────────
   É dirigido por atributo: [data-cursor=hover] e [data-cursor=draggable]. */

body { cursor: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs/%3e%3cg%3e%3cpath%20stroke='none'%20fill='%23000000'%20d='M7%206.2%20Q6.95%204.95%207.95%204.1%208.65%203.15%209.9%203%2011.35%202.85%2012.4%203.9%20L12.25%203.8%2024.85%2014.3%2024.9%2014.35%20Q25.6%2014.85%2025.9%2016%2026.15%2016.9%2025.9%2017.75%20L25.7%2018.2%2024.75%2019.35%2024.35%2019.6%2022.8%2019.95%2021.75%2019.95%2023.5%2023.4%20Q24.05%2024.25%2024%2025.1%20L24%2025.4%2023.55%2026.75%2023.35%2026.95%2022.85%2027.6%2022.35%2027.95%2020.45%2028.95%2020.2%2029.05%2018.25%2029.15%2017.85%2029.05%20Q16.7%2028.5%2016.3%2027.55%20L16.25%2027.4%2014.15%2023.35%2012.6%2025%2012.4%2025.2%2011.15%2025.9%2010.75%2026%209.15%2025.85%208.65%2025.65%207.7%2024.7%20Q7%2023.8%207%2022.8%20L7%206.2%20M18.05%2026.6%20Q18.2%2027%2018.65%2027.2%20L19.5%2027.15%2021.4%2026.15%2021.8%2025.7%2022%2025.1%2021.8%2024.5%2018.5%2017.95%2022.8%2017.95%2023.45%2017.8%2023.95%2017.2%2023.95%2016.45%2023.6%2015.85%2010.95%205.3%20Q10.6%204.95%2010.1%205%209.65%205.05%209.4%205.45%209%205.75%209%206.2%20L9%2022.8%209.25%2023.45%209.75%2023.95%2010.5%2024%2011.1%2023.65%2014.6%2019.9%2018.05%2026.6'/%3e%3cpath%20stroke='none'%20fill='%23FFFFFF'%20d='M18.05%2026.6%20L14.6%2019.9%2011.1%2023.65%2010.5%2024%209.75%2023.95%209.25%2023.45%209%2022.8%209%206.2%20Q9%205.75%209.4%205.45%209.65%205.05%2010.1%205%2010.6%204.95%2010.95%205.3%20L23.6%2015.85%2023.95%2016.45%2023.95%2017.2%2023.45%2017.8%2022.8%2017.95%2018.5%2017.95%2021.8%2024.5%2022%2025.1%2021.8%2025.7%2021.4%2026.15%2019.5%2027.15%2018.65%2027.2%20Q18.2%2027%2018.05%2026.6'/%3e%3c/g%3e%3c/svg%3e") 16 16, auto; }

body a,
body button:not(:disabled),
body [role="button"]:not([aria-disabled="true"]),
body summary,
body [data-cursor="hover"] { cursor: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs/%3e%3cg%3e%3cpath%20stroke='none'%20fill='%23000000'%20d='M19.9%205.35%20L19.9%208.8%2025.2%2010.05%20Q27.5%2010.6%2028.65%2011.95%20L28.65%2012%20Q29.55%2012.95%2029.85%2014.4%20L29.9%2014.45%2030%2016.15%2030%2021.05%2030%2021.15%20Q29.9%2024.05%2028.3%2026.45%20L28.15%2026.65%2027%2028%2026.85%2028.15%20Q23.65%2031.25%2019.35%2031%2016.4%2030.95%2014.05%2029.5%20L13.95%2029.45%20Q12.05%2028.05%2010.4%2025.85%20L10.5%2025.95%20Q9.45%2024.7%208.1%2023.95%20L8.05%2023.9%20Q7.3%2023.45%206.25%2023.15%20L6.15%2023.15%20Q3.9%2022.6%202.85%2020.6%201.7%2018.65%202.1%2016.65%20L2.15%2016.4%20Q2.85%2014.2%204.65%2013.1%20L4.75%2013.05%20Q6.55%2012%208.6%2012.5%20L8.7%2012.55%209%2012.6%209%205.15%20Q9.05%20-0.05%2014.3%200%20L14.35%200%20Q19.25%20-0.05%2019.9%205.15%20L19.9%205.35%20M17.9%2010.35%20L17.9%205.35%20Q17.5%202%2014.3%202%2011.05%201.95%2011%205.15%20L10.95%2015.5%20Q9.6%2014.85%208.15%2014.45%206.85%2014.15%205.7%2014.8%204.5%2015.55%204.05%2017%203.8%2018.35%204.6%2019.65%205.25%2020.9%206.65%2021.2%208.15%2021.6%209.1%2022.2%2010.75%2023.15%2012%2024.65%2013.45%2026.6%2015.1%2027.8%2017.05%2029%2019.45%2029%2022.9%2029.2%2025.45%2026.7%20L26.6%2025.35%20Q27.9%2023.4%2028%2021.05%20L28%2016.15%2027.9%2014.8%20Q27.7%2013.9%2027.15%2013.3%2026.35%2012.4%2024.7%2012%20L17.9%2010.35'/%3e%3cpath%20stroke='none'%20fill='%23FFFFFF'%20d='M17.9%2010.35%20L24.7%2012%20Q26.35%2012.4%2027.15%2013.3%2027.7%2013.9%2027.9%2014.8%20L28%2016.15%2028%2021.05%20Q27.9%2023.4%2026.6%2025.35%20L25.45%2026.7%20Q22.9%2029.2%2019.45%2029%2017.05%2029%2015.1%2027.8%2013.45%2026.6%2012%2024.65%2010.75%2023.15%209.1%2022.2%208.15%2021.6%206.65%2021.2%205.25%2020.9%204.6%2019.65%203.8%2018.35%204.05%2017%204.5%2015.55%205.7%2014.8%206.85%2014.15%208.15%2014.45%209.6%2014.85%2010.95%2015.5%20L11%205.15%20Q11.05%201.95%2014.3%202%2017.5%202%2017.9%205.35%20L17.9%2010.35'/%3e%3c/g%3e%3c/svg%3e") 16 16, auto; }

body button:disabled,
body [aria-disabled="true"] { cursor: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs/%3e%3cg%3e%3cpath%20stroke='none'%20fill='%23000000'%20d='M11%2021%20L11.1%2019.6%2011.05%2019.65%20Q10.1%2020.25%208.85%2019.9%20L8.8%2019.85%20Q7.4%2019.4%207.15%2018.25%20L6.2%2016.4%206.05%2016.7%206.05%2016.75%205.25%2017.45%204.65%2017.7%204.35%2017.8%203%2017.75%20Q2.25%2017.6%201.8%2016.95%20L1.75%2016.9%201.45%2016.5%20Q0.95%2015.65%201%2015%20L1%203.8%20Q1%202.8%201.65%202.1%202.2%201.2%203.5%201.05%204.8%200.85%205.6%201.7%20L5.7%201.75%2013.95%208.7%20Q14.6%209.1%2014.85%2010.1%2015.25%2011.3%2014.75%2012.1%20L14.8%2011.95%2013.85%2013.2%2013.1%2013.6%2012.6%2013.7%2013.15%2014.85%2013.95%2013.95%20Q16.85%2011%2021%2011%2025.2%2011%2028.1%2013.95%20L28.15%2014%20Q31%2016.85%2031%2021%2031%2025.1%2028.1%2028.1%20L27.75%2028.4%20Q24.95%2031%2021%2031%2016.9%2031%2013.95%2028.15%20L13.45%2027.5%20Q11%2024.7%2011%2021%20M15.35%2026.7%20Q17.7%2029%2021%2029%2024.35%2029%2026.65%2026.65%20L26.65%2026.7%20Q29%2024.3%2029%2021%2029%2017.7%2026.7%2015.4%20L26.65%2015.35%20Q24.35%2013%2021%2013%2017.7%2013%2015.35%2015.35%2013%2017.7%2013%2021%2013%2024.2%2015.25%2026.55%20L15.35%2026.7%20M26.35%2021%20Q26.35%2023.2%2024.75%2024.8%2023.2%2026.35%2021%2026.35%2019.5%2026.35%2018.3%2025.65%20L25.65%2018.3%20Q26.35%2019.5%2026.35%2021%20M15.65%2021%20Q15.65%2018.8%2017.2%2017.25%20L17.25%2017.2%20Q18.8%2015.7%2021%2015.7%2022.55%2015.7%2023.75%2016.45%20L16.45%2023.75%20Q15.65%2022.5%2015.65%2021%20M12.2%2011.7%20L12.6%2011.65%2012.95%2011.2%2012.95%2010.7%2012.75%2010.35%204.3%203.2%20Q4.1%202.95%203.75%203%203.4%203.05%203.25%203.3%20L3%203.8%203%2015%203.15%2015.45%203.35%2015.65%203.5%2015.75%204%2015.8%204.35%2015.65%204.4%2015.55%206.75%2013.05%209.05%2017.6%209.4%2017.95%2010%2017.9%2011.25%2017.25%2011.55%2016.95%2011.65%2016.55%2011.55%2016.15%209.35%2011.7%2012.2%2011.7'/%3e%3cpath%20stroke='none'%20fill='%23FFFFFF'%20d='M12.2%2011.7%20L9.35%2011.7%2011.55%2016.15%2011.65%2016.55%2011.55%2016.95%2011.25%2017.25%2010%2017.9%209.4%2017.95%209.05%2017.6%206.75%2013.05%204.4%2015.55%204.35%2015.65%204%2015.8%203.5%2015.75%203.35%2015.65%203.15%2015.45%203%2015%203%203.8%203.25%203.3%20Q3.4%203.05%203.75%203%204.1%202.95%204.3%203.2%20L12.75%2010.35%2012.95%2010.7%2012.95%2011.2%2012.6%2011.65%2012.2%2011.7%20M15.65%2021%20Q15.65%2022.5%2016.45%2023.75%20L23.75%2016.45%20Q22.55%2015.7%2021%2015.7%2018.8%2015.7%2017.25%2017.2%20L17.2%2017.25%20Q15.65%2018.8%2015.65%2021%20M26.35%2021%20Q26.35%2019.5%2025.65%2018.3%20L18.3%2025.65%20Q19.5%2026.35%2021%2026.35%2023.2%2026.35%2024.75%2024.8%2026.35%2023.2%2026.35%2021%20M15.35%2026.7%20L15.25%2026.55%20Q13%2024.2%2013%2021%2013%2017.7%2015.35%2015.35%2017.7%2013%2021%2013%2024.35%2013%2026.65%2015.35%20L26.7%2015.4%20Q29%2017.7%2029%2021%2029%2024.3%2026.65%2026.7%20L26.65%2026.65%20Q24.35%2029%2021%2029%2017.7%2029%2015.35%2026.7'/%3e%3c/g%3e%3c/svg%3e") 16 16, not-allowed; }

body [data-cursor="draggable"] { cursor: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs/%3e%3cg%3e%3cpath%20stroke='none'%20fill='%23000000'%20d='M28.55%2017.8%20Q29.4%2020.3%2028.75%2022.8%20L28.7%2023%2028.15%2024.55%2028.05%2024.75%20Q26.4%2028.2%2022.75%2029.4%20L22.45%2029.5%2018%2029.9%2017.75%2029.85%20Q15.8%2029.25%2013.8%2028.1%20L13.45%2027.95%20Q12%2027.05%2010.35%2026.8%20L10.25%2026.75%207.9%2026.7%207.8%2026.7%20Q6.1%2026.9%204.8%2025.8%20L4.75%2025.8%204.65%2025.7%204.6%2025.65%20Q3.25%2024.5%203.05%2022.85%20L3%2022.75%20Q2.8%2020.95%204%2019.5%205.05%2018.15%206.75%2017.95%20L8.4%2017.9%207.5%2015.55%207.3%2015.2%207.2%2015%205%2010.95%20Q3.9%209.15%204.3%207.75%20L4.4%207.5%20Q4.75%206.15%206.45%205.2%209%203.65%2011%205%2011.05%204.1%2011.5%203.45%2012.15%202.1%2014.2%201.6%20L14.35%201.6%20Q18.05%200.6%2019.6%204.4%20L19.65%204.55%20Q20.75%203.65%2022.7%203.75%20L22.75%203.75%20Q26.75%204%2027%208.15%20L27%208.25%2027%208.35%2027%208.45%20Q26.9%2010.75%2027.1%2012.6%2027.15%2014.65%2028.2%2016.75%20L28.55%2017.8%20M26.65%2018.4%20L26.1%2016.8%2026.1%2016.85%20Q24.8%2013.7%2025%208.35%20L25%208.25%20Q24.85%205.9%2022.6%205.75%2020.7%205.65%2020.4%207.35%20L20.1%207.95%2019.5%208.2%2018.85%208.05%2018.45%207.5%2017.75%205.15%20Q16.85%202.95%2014.7%203.55%20L14.65%203.55%20Q12.55%204.05%2013.15%206.15%20L13.85%208.75%2013.75%209.45%2013.25%209.95%2012.55%209.95%2012%209.55%2010.9%207.7%20Q9.5%205.7%207.45%206.9%206.5%207.45%206.25%208.15%206.1%208.9%206.7%209.85%209.2%2013.9%2010.8%2018.65%20L10.8%2019.3%2010.4%2019.8%209.75%2019.95%20Q8.35%2019.8%206.95%2019.95%206.1%2020.05%205.55%2020.75%204.9%2021.55%205%2022.55%205.15%2023.55%206%2024.2%20L6.05%2024.25%20Q6.75%2024.85%207.65%2024.7%20L7.7%2024.7%2010.65%2024.8%20Q12.7%2025.15%2014.45%2026.2%20L14.5%2026.2%20Q16.4%2027.35%2018.3%2027.9%20L22.05%2027.5%2022.1%2027.5%20Q24.95%2026.55%2026.25%2023.85%20L26.8%2022.3%20Q27.3%2020.35%2026.65%2018.4'/%3e%3cpath%20stroke='none'%20fill='%23FFFFFF'%20d='M26.65%2018.4%20Q27.3%2020.35%2026.8%2022.3%20L26.25%2023.85%20Q24.95%2026.55%2022.1%2027.5%20L22.05%2027.5%2018.3%2027.9%20Q16.4%2027.35%2014.5%2026.2%20L14.45%2026.2%20Q12.7%2025.15%2010.65%2024.8%20L7.7%2024.7%207.65%2024.7%20Q6.75%2024.85%206.05%2024.25%20L6%2024.2%20Q5.15%2023.55%205%2022.55%204.9%2021.55%205.55%2020.75%206.1%2020.05%206.95%2019.95%208.35%2019.8%209.75%2019.95%20L10.4%2019.8%2010.8%2019.3%2010.8%2018.65%20Q9.2%2013.9%206.7%209.85%206.1%208.9%206.25%208.15%206.5%207.45%207.45%206.9%209.5%205.7%2010.9%207.7%20L12%209.55%2012.55%209.95%2013.25%209.95%2013.75%209.45%2013.85%208.75%2013.15%206.15%20Q12.55%204.05%2014.65%203.55%20L14.7%203.55%20Q16.85%202.95%2017.75%205.15%20L18.45%207.5%2018.85%208.05%2019.5%208.2%2020.1%207.95%2020.4%207.35%20Q20.7%205.65%2022.6%205.75%2024.85%205.9%2025%208.25%20L25%208.35%20Q24.8%2013.7%2026.1%2016.85%20L26.1%2016.8%2026.65%2018.4'/%3e%3c/g%3e%3c/svg%3e") 16 16, auto; }

body .is-dragging,
body .is-dragging * { cursor: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs/%3e%3cg%3e%3cpath%20stroke='none'%20fill='%23000000'%20d='M27.9%2019.3%20L27.85%2019.4%2027.2%2021.2%2027.1%2021.45%2026.7%2022.2%2026.5%2022.55%20Q24.5%2026.2%2018.7%2027.1%20L18.6%2027.1%20Q10.75%2028.35%207.75%2023.35%20L6.5%2021.75%20Q2.5%2019.95%203.3%2015.7%20L3.3%2015.8%20Q3.35%2015.05%203.65%2014.45%204.05%2013.7%204.85%2013.45%20L5.2%2013.1%205.45%2012.7%20Q4.45%209.15%206.35%207.8%206.8%207.3%207.5%206.95%20L7.55%206.9%20Q9.65%205.65%2011.4%206.15%2012.45%204.55%2015%204.35%2017.05%204.2%2018.35%205%2019.3%204.5%2020.65%204.35%20L20.7%204.35%20Q25.25%203.95%2026.2%208.5%20L26.25%208.75%20Q26.4%2010.7%2027%2012.15%20L27.05%2012.3%20Q28.35%2015.05%2028.15%2018%20L27.9%2019.3%20M20.85%206.35%20Q19.35%206.5%2018.7%207.35%20L18.45%207.55%2018.15%207.55%2017.9%207.35%20Q17.05%206.2%2015.15%206.35%2013%206.5%2012.7%208.35%20L12.55%208.65%2012.25%208.75%2011.9%208.65%20Q10.45%207.5%208.5%208.65%20L7.75%209.2%20Q6.6%2010.25%207.7%2013.2%20L7.7%2013.45%207.55%2013.7%207.35%2013.85%20Q6.2%2014.15%205.5%2015.2%20L5.5%2015.25%20Q5.3%2015.6%205.25%2016.05%204.75%2018.9%207.6%2020%20L7.7%2020.05%207.9%2020.2%20Q8.5%2021.25%209.25%2022%20L9.35%2022.1%20Q11.8%2026.2%2018.35%2025.1%20L18.4%2025.1%20Q23.2%2024.35%2024.85%2021.35%20L24.9%2021.3%2025.35%2020.45%2025.95%2018.8%20Q26.5%2016.65%2025.8%2014.5%20L25.15%2012.9%20Q24.45%2011.2%2024.25%208.9%2023.65%206.1%2020.85%206.35'/%3e%3cpath%20stroke='none'%20fill='%23FFFFFF'%20d='M20.85%206.35%20Q23.65%206.1%2024.25%208.9%2024.45%2011.2%2025.15%2012.9%20L25.8%2014.5%20Q26.5%2016.65%2025.95%2018.8%20L25.35%2020.45%2024.9%2021.3%2024.85%2021.35%20Q23.2%2024.35%2018.4%2025.1%20L18.35%2025.1%20Q11.8%2026.2%209.35%2022.1%20L9.25%2022%20Q8.5%2021.25%207.9%2020.2%20L7.7%2020.05%207.6%2020%20Q4.75%2018.9%205.25%2016.05%205.3%2015.6%205.5%2015.25%20L5.5%2015.2%20Q6.2%2014.15%207.35%2013.85%20L7.55%2013.7%207.7%2013.45%207.7%2013.2%20Q6.6%2010.25%207.75%209.2%20L8.5%208.65%20Q10.45%207.5%2011.9%208.65%20L12.25%208.75%2012.55%208.65%2012.7%208.35%20Q13%206.5%2015.15%206.35%2017.05%206.2%2017.9%207.35%20L18.15%207.55%2018.45%207.55%2018.7%207.35%20Q19.35%206.5%2020.85%206.35'/%3e%3c/g%3e%3c/svg%3e") 16 16, auto !important; }

html.is-cursor-loading,
html.is-cursor-loading * { cursor: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs/%3e%3cg%3e%3cpath%20stroke='none'%20fill='%23000000'%20d='M26.15%209.15%20Q25.5%209.75%2024.8%209.95%2024.25%2012.85%2022.6%2015.2%20L22%2016%2022.6%2016.85%2022.6%2016.8%20Q24.25%2019.15%2024.8%2022.1%2025.5%2022.25%2026.15%2022.9%2027%2023.8%2027%2025%20L27%2027%20Q27%2028.2%2026.15%2029.15%2025.2%2030%2024%2030%20L8%2030%20Q6.8%2030%205.9%2029.15%205%2028.2%205%2027%20L5%2025%20Q5%2023.8%205.9%2022.9%206.5%2022.25%207.25%2022.1%207.75%2019.15%209.4%2016.8%20L9.4%2016.85%2010%2016%209.4%2015.2%20Q7.75%2012.85%207.25%209.95%206.5%209.75%205.9%209.15%205%208.2%205%207%20L5%205%20Q5%203.8%205.9%202.9%206.8%202%208%202%20L24%202%20Q25.2%202%2026.15%202.9%2027%203.8%2027%205%20L27%207%20Q27%208.2%2026.15%209.15%20M23%208%20L24.05%208%2024.7%207.7%2025%207%2025%205%2024.7%204.3%20Q24.4%204%2024%204%20L8%204%20Q7.6%204%207.3%204.3%207%204.6%207%205%20L7%207%20Q7%207.4%207.3%207.7%207.6%208%208%208%20L9%208%209.05%208.05%20Q9.25%2011.5%2011.05%2014.05%2011.9%2015.3%2012.9%2016%2011.9%2016.7%2011.05%2017.95%209.25%2020.55%209.05%2024%20L8%2024%20Q7.6%2024%207.3%2024.3%207%2024.6%207%2025%20L7%2027%20Q7%2027.4%207.3%2027.7%207.6%2028%208%2028%20L24%2028%2024.7%2027.7%2025%2027%2025%2025%2024.7%2024.3%20Q24.4%2024%2024.05%2024%20L23%2024%20Q22.75%2020.55%2020.95%2017.95%2020.1%2016.7%2019.1%2016%2020.1%2015.3%2020.95%2014.05%2022.75%2011.5%2023%208.05%20L23%208%20M12.7%2012.9%20Q11.25%2010.8%2011.05%208%20L21%208%20Q20.75%2010.8%2019.35%2012.9%20L19.3%2012.95%2017.95%2014.35%20Q17.4%2014.75%2017.2%2015.4%2017%2016%2017.2%2016.65%2017.4%2017.25%2017.95%2017.65%20L19.3%2019.1%20Q20.75%2021.2%2021%2024%20L11.05%2024%20Q11.25%2021.2%2012.7%2019.1%2013.35%2018.15%2014.05%2017.65%2014.6%2017.25%2014.8%2016.65%2015%2016%2014.8%2015.4%2014.6%2014.75%2014.05%2014.35%20L12.7%2012.95%2012.7%2012.9'/%3e%3cpath%20stroke='none'%20fill='%23FFFFFF'%20d='M12.7%2012.9%20L12.7%2012.95%2014.05%2014.35%20Q14.6%2014.75%2014.8%2015.4%2015%2016%2014.8%2016.65%2014.6%2017.25%2014.05%2017.65%2013.35%2018.15%2012.7%2019.1%2011.25%2021.2%2011.05%2024%20L21%2024%20Q20.75%2021.2%2019.3%2019.1%20L17.95%2017.65%20Q17.4%2017.25%2017.2%2016.65%2017%2016%2017.2%2015.4%2017.4%2014.75%2017.95%2014.35%20L19.3%2012.95%2019.35%2012.9%20Q20.75%2010.8%2021%208%20L11.05%208%20Q11.25%2010.8%2012.7%2012.9%20M23%208%20L23%208.05%20Q22.75%2011.5%2020.95%2014.05%2020.1%2015.3%2019.1%2016%2020.1%2016.7%2020.95%2017.95%2022.75%2020.55%2023%2024%20L24.05%2024%20Q24.4%2024%2024.7%2024.3%20L25%2025%2025%2027%2024.7%2027.7%2024%2028%208%2028%20Q7.6%2028%207.3%2027.7%207%2027.4%207%2027%20L7%2025%20Q7%2024.6%207.3%2024.3%207.6%2024%208%2024%20L9.05%2024%20Q9.25%2020.55%2011.05%2017.95%2011.9%2016.7%2012.9%2016%2011.9%2015.3%2011.05%2014.05%209.25%2011.5%209.05%208.05%20L9%208%208%208%20Q7.6%208%207.3%207.7%207%207.4%207%207%20L7%205%20Q7%204.6%207.3%204.3%207.6%204%208%204%20L24%204%20Q24.4%204%2024.7%204.3%20L25%205%2025%207%2024.7%207.7%2024.05%208%2023%208'/%3e%3c/g%3e%3c/svg%3e") 16 16, auto !important; }

.draw-mode-overlay { cursor: none; }

body input,
body textarea,
body select,
body [contenteditable="true"] { cursor: text; }

@media (prefers-reduced-motion: reduce) {
  body, body * { cursor: auto !important; }
}


/* ═══════════ Tela de carregamento ═══════════ */

.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: linear-gradient(146deg, #ffffff 0%, #fbfef2 30%, #f2f9dd 70%, #e6f4b6 100%);
  transition: opacity 0.4s ease, visibility 0.4s;
}

.boot-loader.is-done { opacity: 0; visibility: hidden; }

.boot-loader__mark {
  position: relative;
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
}

.boot-loader__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid rgba(32, 37, 30, 0.12);
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: boot-spin 0.85s linear infinite;
}

.boot-loader__mark img {
  width: 54px;
  height: 54px;
  border-radius: 22%;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(32, 37, 30, 0.18);
}

@keyframes boot-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .boot-loader__mark::before { animation: none; }
}

/* ═══════════ Mural do time ═══════════ */

.mural { display: flex; flex-direction: column; gap: 12px; }

.mural-status { margin: 6px 0 0; color: var(--text-3); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }

.mural-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.mural-tools { display: flex; flex-wrap: wrap; gap: 4px; }

.mural-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 0.85rem;
  font-weight: 560;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.mural-tool svg { width: 18px; height: 18px; flex-shrink: 0; }
.mural-tool:hover { background: var(--surface-2); color: var(--text); }

.mural-tool.is-active {
  background: #0f1108;
  border-color: #0f1108;
  color: #e7ff8a;
  box-shadow: 2px 2px 0 0 rgba(15, 17, 8, 0.22);
}

.mural-palette { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid var(--border); }

.mural-swatch {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.mural-swatch span {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(15, 17, 8, 0.2);
  border-radius: 50%;
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}

.mural-swatch:hover span { transform: scale(1.12); }
.mural-swatch.is-active span { border-color: #0f1108; box-shadow: 0 0 0 3px rgba(15, 17, 8, 0.12); }

.mural-sticker {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 3px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background 0.12s, transform 0.12s, box-shadow 0.15s;
}

.mural-sticker svg { width: 100%; height: 100%; }
.mural-sticker:hover { background: var(--surface-2); transform: scale(1.12); }
.mural-sticker.is-active { background: #0f1108; border-color: #0f1108; box-shadow: 2px 2px 0 0 rgba(15, 17, 8, 0.22); }

.mural-zoom { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.mural-zoom-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 600;
}

.mural-zoom-btn:hover { background: var(--surface-2); color: var(--text); }

.mural-limpar { color: var(--danger); border-color: rgba(229, 72, 77, 0.35); }
.mural-limpar:hover { background: var(--danger-soft); color: var(--danger); }
.mural-zoom-label { min-width: 46px; color: var(--text-3); font-family: var(--mono); font-size: 0.72rem; text-align: center; }

.mural-stickers {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  padding: 10px;
  border: 2px solid #0f1108;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 5px 5px 0 0 rgba(15, 17, 8, 0.16), var(--shadow-pop);
}

.mural-toolbar { position: relative; }
.mural-stickers[hidden] { display: none; }

.mural-stage {
  position: relative;
  height: min(64dvh, 700px);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  background: #fcfdf7;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  touch-action: none;
  user-select: none;
}

.mural-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 6000px;
  height: 4000px;
  transform-origin: 0 0;
  background-image: radial-gradient(rgba(32, 37, 30, 0.16) 1.3px, transparent 1.3px);
  background-size: 28px 28px;
}

.mural-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mural-ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mural-stage[data-tool="apagar"] .mural-ink { pointer-events: auto; }
.mural-stage[data-tool="apagar"] .mural-ink path { pointer-events: stroke; }

.mural-items { position: absolute; inset: 0; pointer-events: none; }

.mural-item { position: absolute; top: 0; left: 0; pointer-events: auto; }

.mural-postit {
  width: 210px;
  min-height: 210px;
  padding: 16px 16px 22px;
  border-radius: 3px 3px 14px 3px;
  box-shadow: 5px 8px 16px rgba(32, 37, 30, 0.18);
}

.mural-postit::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, transparent 50%, rgba(32, 37, 30, 0.14) 50%);
  border-radius: 0 0 14px 0;
}

.mural-postit textarea {
  width: 100%;
  height: 178px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #20251e;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 560;
  line-height: 1.35;
  resize: none;
  overflow: hidden;
}

.mural-postit textarea:focus { outline: none; }
.mural-postit textarea[readonly] { cursor: inherit; }
.mural-postit textarea::placeholder { color: rgba(32, 37, 30, 0.35); }

.mural-figurinha {
  width: 84px;
  height: 84px;
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(3px 6px 7px rgba(32, 37, 30, 0.24));
}

.mural-figurinha svg { width: 100%; height: 100%; display: block; pointer-events: none; }

.mural-item.is-selected { outline: 2px solid #0f1108; outline-offset: 4px; border-radius: 4px; }

.mural-del {
  position: absolute;
  top: -11px;
  right: -11px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid #0f1108;
  border-radius: 50%;
  background: #fff;
  color: #0f1108;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.mural-item:hover .mural-del,
.mural-item.is-selected .mural-del { opacity: 1; }
.mural-del:hover { transform: scale(1.12); background: #ff598b; color: #fff; }

.mural-autor {
  position: absolute;
  left: 16px;
  bottom: 6px;
  color: rgba(32, 37, 30, 0.42);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}


@media (max-width: 768px) {
  .mural-tool span { display: none; }
  .mural-tool { padding: 8px; }
  .mural-palette { padding-left: 8px; }
  .mural-stickers { grid-template-columns: repeat(6, 1fr); left: 50%; transform: translateX(-50%); }
  .mural-stage { height: 62dvh; }
}

/* Ferramentas do mural: o cursor vira a própria ferramenta */
body .mural-stage[data-tool="caneta"],
body .mural-stage[data-tool="caneta"] * { cursor: url("data:image/svg+xml,%3Csvg%20width=%2732%27%20height=%2732%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg%20transform=%27rotate%2845%2016%2016%29%27%3E%3Cpath%20d=%27M12.5%203.5h7a2%202%200%200%201%202%202v13h-11v-13a2%202%200%200%201%202-2z%27%20fill=%27%23DEF915%27%20stroke=%27%230f1108%27%20stroke-width=%272%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M10.5%2018.5h11l-2.5%205h-6z%27%20fill=%27%23ffffff%27%20stroke=%27%230f1108%27%20stroke-width=%272%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M13%2023.5h6l-1.5%204h-3z%27%20fill=%27%230f1108%27/%3E%3C/g%3E%3C/svg%3E") 3 29, crosshair !important; }

body .mural-stage[data-tool="apagar"],
body .mural-stage[data-tool="apagar"] * { cursor: url("data:image/svg+xml,%3Csvg%20width=%2732%27%20height=%2732%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg%20transform=%27rotate%28-38%2016%2016%29%27%3E%3Crect%20x=%276%27%20y=%2711%27%20width=%2720%27%20height=%2712%27%20rx=%272.5%27%20fill=%27%23ffffff%27%20stroke=%27%230f1108%27%20stroke-width=%272%27/%3E%3Cpath%20d=%27M14%2011v12%27%20stroke=%27%230f1108%27%20stroke-width=%272%27/%3E%3Cpath%20d=%27M6%2017h8%27%20stroke=%27%230f1108%27%20stroke-width=%271.2%27%20opacity=%27.35%27/%3E%3C/g%3E%3C/svg%3E") 12 27, cell !important; }