:root {
  --bg: #080d16;
  --bg-soft: #101a2a;
  --panel: #111c2d;
  --panel-2: #172337;
  --ink: #f5f7fb;
  --muted: #a7b3c4;
  --subtle: #718096;
  --orange: #ff8957;
  --orange-2: #ffad75;
  --blue: #6e9ee7;
  --green: #65c6a3;
  --line: rgba(255, 255, 255, .10);
  --ad-space: clamp(76px, 10vh, 112px);
  --radius: 20px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--ad-space)
}

button,
input,
textarea,
select {
  font: inherit
}

button {
  cursor: pointer
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(255, 151, 102, .7);
  outline-offset: 3px
}

[hidden] {
  display: none !important
}

.tv-header {
  height: 82px;
  display: flex;
  align-items: center;
  gap: clamp(22px, 4vw, 66px);
  padding: 0 clamp(18px, 5vw, 76px);
  background: rgba(8, 13, 22, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(18px)
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  flex: none
}

.brand-mark {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffad75, #e66338);
  font-size: 23px;
  box-shadow: 0 6px 22px #ee78404a
}

.brand-name {
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -.5px;
  display: flex;
  align-items: center;
  gap: 5px
}

.brand-name small {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: #9caabd;
  margin-top: 3px
}

.main-nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0
}

.nav-tab {
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #b6c0cf;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition: .2s
}

.nav-tab:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff
}

.nav-tab.active {
  background: #fff;
  color: #162236;
  box-shadow: 0 3px 15px #0003
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px
}

.search-control {
  height: 41px;
  width: clamp(145px, 19vw, 235px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #aeb8c8
}

.search-control span {
  font-size: 25px;
  line-height: 1
}

.search-control input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 12px
}

.search-control input::placeholder {
  color: #aab4c2
}

.privacy-icon {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: #d9e0e9;
  text-decoration: none;
  font-size: 19px
}

.home-view {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 76px)
}

.feature-hero {
  min-height: 390px;
  margin: 22px 0 35px;
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(112deg, #162f53 0%, #1764a2 48%, #70c5e9 100%);
  isolation: isolate
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 72% 22%, #9ee7ff8a 0 5%, transparent 22%), linear-gradient(90deg, #06172b91 0%, transparent 75%)
}

.hero-content {
  position: relative;
  z-index: 4;
  max-width: 600px
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #c9e7f8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px
}

.hero-kicker span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffb080;
  box-shadow: 0 0 0 5px #ffb08025
}

.hero-content h1 {
  font-size: clamp(35px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -2.5px;
  margin: 19px 0 13px;
  font-weight: 850
}

.hero-content h1 em {
  font-style: normal;
  color: #ffd0ad
}

.hero-content p {
  font-size: 15px;
  color: #e2edf6;
  margin: 0
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 17px;
  flex-wrap: wrap;
  margin-top: 27px
}

.hero-cta {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  background: #fff;
  color: #16283e;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 8px 25px #07192b4a;
  transition: transform .18s, box-shadow .18s
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #07192b65
}

.hero-cta span {
  font-size: 18px;
  margin-left: 12px
}

.hero-proof {
  font-size: 11px;
  color: #d3e4f1
}

.hero-art {
  position: absolute;
  right: 5%;
  top: 50%;
  width: min(43%, 540px);
  height: 310px;
  transform: translateY(-50%);
  z-index: 2
}

.hero-tile {
  position: absolute;
  width: 178px;
  height: 245px;
  border-radius: 21px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 22px 40px #07172c65;
  border: 1px solid #ffffff45
}

.hero-tile span {
  font-size: 38px
}

.hero-tile b {
  font-size: 22px;
  line-height: 1.02;
  letter-spacing: -.8px
}

.tile-one {
  background: linear-gradient(145deg, #ffb979, #ed744c);
  color: #fff;
  right: 2%;
  top: 28px;
  transform: rotate(9deg)
}

.tile-two {
  background: linear-gradient(145deg, #dff2ec, #7ebca7);
  color: #23443e;
  left: 33%;
  top: 8px;
  transform: rotate(-7deg);
  z-index: 2
}

.tile-three {
  background: linear-gradient(145deg, #ffe5b9, #f0a45d);
  color: #573a29;
  left: 5%;
  bottom: -5px;
  transform: rotate(-12deg);
  width: 142px;
  height: 178px;
  z-index: 3
}

.tile-three span {
  font-size: 34px
}

.tile-three b {
  font-size: 19px
}

.hero-orbit {
  position: absolute;
  border: 1px solid #ffffff45;
  border-radius: 50%;
  right: 0;
  top: -22px;
  width: 290px;
  height: 290px
}

.orbit-two {
  right: 45px;
  top: 18px;
  width: 215px;
  height: 215px;
  border-color: #ffffff2b
}

.hero-pagination {
  position: absolute;
  right: 27px;
  bottom: 20px;
  display: flex;
  gap: 6px;
  z-index: 5
}

.hero-pagination i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #ffffff70
}

.hero-pagination i.selected {
  width: 24px;
  background: #fff
}

.content-rail-section {
  margin: 0 0 38px;
  min-width: 0
}

.rail-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin: 0 0 16px
}

.section-eyebrow {
  font-size: 9px;
  letter-spacing: 1.7px;
  font-weight: 900;
  color: #f19a70
}

.rail-heading h2 {
  font-size: clamp(21px, 2.4vw, 27px);
  margin: 5px 0 0;
  letter-spacing: -.7px
}

.rail-count {
  font-size: 11px;
  color: #8e9bad;
  white-space: nowrap
}

.rail-count b {
  font-size: 19px;
  color: #e4eaf1;
  margin-left: 9px
}

.tool-rail {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 2px 17px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #34445a transparent;
  -webkit-overflow-scrolling: touch
}

.tool-rail::-webkit-scrollbar {
  height: 6px
}

.tool-rail::-webkit-scrollbar-thumb {
  background: #34445a;
  border-radius: 9px
}

.tool-card {
  flex: 0 0 clamp(210px, 20vw, 260px);
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 15px;
  overflow: hidden;
  background: #111c2c;
  color: #fff;
  text-align: left;
  scroll-snap-align: start;
  transition: transform .2s, border-color .2s, box-shadow .2s
}

.tool-card:hover {
  transform: scale(1.035);
  border-color: #ffad75a6;
  box-shadow: 0 13px 32px #0007;
  z-index: 2
}

.tool-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px
}

.card-art {
  height: 145px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--card-bg);
  isolation: isolate
}

.card-art:before,
.card-art:after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: #ffffff25
}

.card-art:before {
  width: 190px;
  height: 190px;
  right: -50px;
  top: -85px
}

.card-art:after {
  width: 120px;
  height: 120px;
  left: -40px;
  bottom: -65px;
  background: #07142620
}

.card-art .card-symbol {
  font-size: 67px;
  line-height: 1;
  text-shadow: 0 10px 22px #0002;
  filter: drop-shadow(0 6px 8px #0002)
}

.card-art .card-stamp {
  position: absolute;
  top: 13px;
  left: 15px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffffffd8
}

.card-art .card-index {
  position: absolute;
  bottom: 12px;
  right: 15px;
  font-size: 10px;
  font-weight: 900;
  color: #ffffffb3
}

.card-caption {
  padding: 13px 15px 15px
}

.card-caption h3 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 5px;
  letter-spacing: -.2px
}

.card-caption p {
  font-size: 10px;
  line-height: 1.4;
  color: #9eacbf;
  margin: 0;
  min-height: 28px
}

.card-tag {
  display: inline-flex;
  margin-top: 9px;
  color: var(--orange-2);
  font-size: 8px;
  letter-spacing: 1.2px;
  font-weight: 900;
  text-transform: uppercase
}

.art-style-0 {
  --card-bg: linear-gradient(135deg, #ef6f48, #f5b56c)
}

.art-style-1 {
  --card-bg: linear-gradient(135deg, #2d5d8d, #7ab9d8)
}

.art-style-2 {
  --card-bg: linear-gradient(135deg, #8c5b91, #e39aaa)
}

.art-style-3 {
  --card-bg: linear-gradient(135deg, #2c786f, #a6cfae)
}

.art-style-4 {
  --card-bg: linear-gradient(135deg, #d09c53, #f3d7a6)
}

.art-style-5 {
  --card-bg: linear-gradient(135deg, #4a578b, #9e9bd1)
}

.art-style-6 {
  --card-bg: linear-gradient(135deg, #bf5c65, #f5a17d)
}

.art-style-7 {
  --card-bg: linear-gradient(135deg, #3e6477, #91bdc4)
}

.empty-state {
  text-align: center;
  padding: 70px 15px;
  color: #aeb9c9
}

.empty-state>span {
  font-size: 36px
}

.empty-state h2 {
  font-size: 20px;
  color: white;
  margin: 8px 0
}

.empty-state p {
  font-size: 12px
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  flex-wrap: wrap;
  padding: 25px 0 28px;
  border-top: 1px solid var(--line);
  color: #8391a5;
  font-size: 10px
}

.site-footer a {
  color: #c5cfdb;
  text-decoration: none
}

.footer-brand {
  font-size: 12px;
  font-weight: 850;
  color: #e8edf4
}

.site-footer small {
  color: #647287
}

/* Ferramenta aberta dentro da própria página: sem modal. */
.tool-view {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 25px clamp(18px, 5vw, 76px) 32px
}

.tool-view-head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 5px 0 23px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px
}

.back-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #121d2c;
  color: #d7e0eb;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap
}

.back-button:hover {
  background: #1b2a40
}

.back-button span {
  font-size: 20px;
  vertical-align: -1px;
  margin-right: 5px
}

.tool-view-title {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0
}

.tool-view-icon {
  flex: none;
  width: 45px;
  height: 45px;
  border-radius: 13px;
  background: #243349;
  display: grid;
  place-items: center;
  font-size: 23px;
  color: #ffad75
}

.tool-view-title h1 {
  font-size: clamp(19px, 2.6vw, 27px);
  letter-spacing: -.6px;
  margin: 0 0 3px
}

.tool-view-title p {
  font-size: 11px;
  color: #9daabd;
  margin: 0
}

.local-badge {
  margin-left: auto;
  color: #83d9b8;
  font-size: 10px;
  white-space: nowrap
}

.workspace-layout {
  display: grid;
  grid-template-columns: minmax(290px, .78fr) minmax(360px, 1.22fr);
  gap: 20px;
  align-items: start
}

.editor-panel,
.preview-panel {
  background: #111c2c;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 22px;
  min-width: 0
}

.panel-heading,
.preview-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 900;
  color: #9cabc0
}

.panel-heading span:last-child {
  color: #f3a17a
}

.tool-form {
  margin-top: 20px;
  display: grid;
  gap: 14px
}

.field-group {
  display: grid;
  gap: 7px
}

.field-group label {
  font-size: 11px;
  font-weight: 750;
  color: #dce4ed
}

.field-help {
  font-size: 10px;
  color: #8b9bb0;
  line-height: 1.5
}

.field-control {
  width: 100%;
  border: 1px solid #304158;
  background: #0c1522;
  border-radius: 9px;
  padding: 11px 12px;
  outline: none;
  font-size: 12px;
  color: #f3f6fa
}

.field-control:focus {
  border-color: #ef9569;
  box-shadow: 0 0 0 3px #ef95691c
}

.field-control::placeholder {
  color: #75859b
}

textarea.field-control {
  min-height: 95px;
  resize: vertical;
  line-height: 1.5
}

.field-control[type=color] {
  height: 42px;
  padding: 4px
}

.field-control[type=file] {
  font-size: 10px
}

.field-control[type=range] {
  padding: 0;
  accent-color: var(--orange)
}

.privacy-inline {
  margin: 18px 0 0;
  padding: 11px 12px;
  border-radius: 9px;
  background: #142b2a;
  color: #8bd2b7;
  font-size: 10px;
  line-height: 1.5
}

.preview-heading>div>span {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 900;
  color: #a7b4c6
}

.preview-heading p {
  font-size: 10px;
  color: #8796ab;
  margin: 5px 0 0
}

.preview-format {
  font-size: 9px;
  color: #9cabc0;
  background: #1a293d;
  border: 1px solid var(--line);
  padding: 6px 9px;
  border-radius: 8px;
  white-space: nowrap
}

.canvas-wrap {
  width: min(100%, 450px);
  max-height: 56vh;
  overflow: auto;
  margin: 18px auto 0;
  padding: 10px;
  background: #e7e9ec;
  border-radius: 13px;
  box-shadow: 0 10px 30px #0004
}

.canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  background: #fff
}

.export-actions {
  display: flex;
  gap: 10px;
  max-width: 450px;
  margin: 16px auto 0
}

.export-actions button {
  flex: 1;
  min-height: 45px;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850
}

.download-button {
  background: var(--orange);
  color: #171d28
}

.download-button:hover {
  background: #ffab78
}

.share-button {
  background: #26364d;
  color: #e6edf5
}

.share-button:hover {
  background: #334761
}

.export-hint {
  text-align: center;
  color: #8392a7;
  font-size: 10px;
  margin: 10px 0 0
}

.toast {
  position: fixed;
  bottom: calc(var(--ad-space) + 15px);
  left: 50%;
  transform: translate(-50%, 15px);
  opacity: 0;
  pointer-events: none;
  background: #f4f6fa;
  color: #172235;
  padding: 11px 17px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 12px 30px #0005;
  z-index: 80;
  transition: .2s;
  max-width: calc(100vw - 30px);
  text-align: center
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

.ad-reserved {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ad-space);
  background: #070b12;
  border-top: 1px solid rgba(255, 255, 255, .035)
}

@media(max-width:980px) {
  .tv-header {
    gap: 20px;
    padding-inline: 22px
  }

  .hero-art {
    right: 0;
    transform: translateY(-50%) scale(.82);
    transform-origin: right center
  }

  .hero-content {
    max-width: 56%
  }

  .workspace-layout {
    grid-template-columns: minmax(260px, .85fr) minmax(300px, 1.15fr)
  }

  .editor-panel,
  .preview-panel {
    padding: 17px
  }
}

@media(max-width:700px) {
  :root {
    --ad-space: clamp(72px, 10vh, 90px)
  }

  .tv-header {
    height: 68px;
    padding: 0 13px;
    gap: 12px
  }

  .brand {
    gap: 7px
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 19px
  }

  .brand-name {
    font-size: 13px
  }

  .brand-name small {
    font-size: 7px
  }

  .main-nav {
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none
  }

  .main-nav::-webkit-scrollbar {
    display: none
  }

  .nav-tab {
    height: 40px;
    padding: 0 11px;
    font-size: 10px
  }

  .header-actions {
    gap: 7px
  }

  .search-control {
    width: 37px;
    height: 37px;
    padding: 0;
    justify-content: center;
    border: 0;
    background: rgba(255, 255, 255, .09)
  }

  .search-control span {
    font-size: 23px
  }

  .search-control input {
    display: none
  }

  .search-control:focus-within {
    position: absolute;
    left: 12px;
    right: 12px;
    width: auto;
    padding: 0 13px;
    background: #142238;
    border: 1px solid #52647d;
    z-index: 5
  }

  .search-control:focus-within input {
    display: block
  }

  .privacy-icon {
    width: 35px;
    height: 35px;
    font-size: 17px
  }

  .home-view {
    padding: 0 13px
  }

  .feature-hero {
    min-height: 335px;
    margin: 13px 0 28px;
    padding: 26px 20px;
    border-radius: 17px;
    align-items: flex-start
  }

  .hero-content {
    max-width: 100%;
    z-index: 4
  }

  .hero-content h1 {
    font-size: clamp(30px, 8vw, 43px);
    letter-spacing: -1.7px;
    margin: 16px 0 9px
  }

  .hero-content p {
    font-size: 12px
  }

  .hero-actions {
    margin-top: 18px;
    gap: 10px
  }

  .hero-cta {
    min-height: 43px;
    font-size: 11px;
    padding: 0 15px
  }

  .hero-proof {
    font-size: 9px
  }

  .hero-art {
    width: 220px;
    height: 160px;
    right: -23px;
    top: auto;
    bottom: -26px;
    transform: scale(.66);
    transform-origin: right bottom;
    opacity: .9
  }

  .hero-tile {
    width: 130px;
    height: 180px;
    border-radius: 15px;
    padding: 14px
  }

  .hero-tile span {
    font-size: 28px
  }

  .hero-tile b {
    font-size: 16px
  }

  .tile-three {
    width: 105px;
    height: 135px
  }

  .tile-three b {
    font-size: 15px
  }

  .hero-orbit {
    width: 180px;
    height: 180px
  }

  .orbit-two {
    width: 140px;
    height: 140px
  }

  .hero-pagination {
    right: 15px;
    bottom: 12px
  }

  .content-rail-section {
    margin-bottom: 27px
  }

  .rail-heading {
    margin-bottom: 11px
  }

  .rail-heading h2 {
    font-size: 19px
  }

  .section-eyebrow {
    font-size: 8px
  }

  .rail-count {
    font-size: 9px
  }

  .tool-rail {
    gap: 10px;
    padding-bottom: 13px;
    margin-right: -13px;
    padding-right: 13px
  }

  .tool-card {
    flex-basis: clamp(168px, 48vw, 220px);
    border-radius: 12px
  }

  .card-art {
    height: 112px
  }

  .card-art .card-symbol {
    font-size: 52px
  }

  .card-caption {
    padding: 10px 11px 12px
  }

  .card-caption h3 {
    font-size: 12px
  }

  .card-caption p {
    font-size: 9px;
    min-height: 25px
  }

  .card-tag {
    font-size: 7px
  }

  .site-footer {
    justify-content: flex-start;
    gap: 10px 16px;
    padding: 20px 0 22px;
    font-size: 9px
  }

  .site-footer span:nth-child(3) {
    width: 100%;
    order: 4
  }

  .tool-view {
    padding: 14px 13px 25px
  }

  .tool-view-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 13px
  }

  .back-button {
    padding: 8px 11px;
    font-size: 10px
  }

  .back-button span {
    font-size: 17px
  }

  .tool-view-title {
    gap: 9px
  }

  .tool-view-icon {
    width: 37px;
    height: 37px;
    border-radius: 10px;
    font-size: 19px
  }

  .tool-view-title h1 {
    font-size: 17px
  }

  .tool-view-title p {
    font-size: 9px;
    line-height: 1.3
  }

  .local-badge {
    grid-column: 2;
    margin: 0;
    font-size: 8px
  }

  .workspace-layout {
    grid-template-columns: 1fr;
    gap: 11px
  }

  .editor-panel,
  .preview-panel {
    padding: 15px;
    border-radius: 13px
  }

  .tool-form {
    grid-template-columns: 1fr 1fr;
    gap: 11px
  }

  .field-group:has(textarea),
  .field-group:has(input[type=file]) {
    grid-column: 1/-1
  }

  .field-group label {
    font-size: 10px
  }

  .field-control {
    padding: 10px;
    font-size: 11px
  }

  .privacy-inline {
    font-size: 9px;
    margin-top: 13px
  }

  .preview-heading p {
    font-size: 9px
  }

  .preview-format {
    font-size: 8px
  }

  .canvas-wrap {
    width: min(100%, 330px);
    max-height: 44vh;
    margin-top: 12px;
    padding: 7px
  }

  .export-actions {
    max-width: 100%;
    margin-top: 12px
  }

  .export-actions button {
    min-height: 42px;
    font-size: 11px
  }

  .export-hint {
    font-size: 9px
  }
}

@media(max-width:390px) {
  .main-nav .nav-tab {
    padding: 0 8px;
    font-size: 9px
  }

  .brand-name {
    font-size: 12px
  }

  .brand-mark {
    width: 29px;
    height: 29px
  }

  .hero-content h1 {
    font-size: 29px
  }

  .hero-cta {
    font-size: 10px
  }

  .tool-form {
    grid-template-columns: 1fr
  }

  .field-group:has(textarea),
  .field-group:has(input[type=file]) {
    grid-column: auto
  }

  .preview-format {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important
  }
}

/* Refinamento de UX: prévia inteira, hierarquia mais clara e microinterações. */
.tool-view {
  animation: screenEnter .42s cubic-bezier(.2, .75, .25, 1) both
}

.editor-panel {
  animation: panelEnter .48s .04s cubic-bezier(.2, .75, .25, 1) both
}

.preview-panel {
  animation: panelEnter .56s .09s cubic-bezier(.2, .75, .25, 1) both
}

.workspace-layout {
  align-items: start
}

@media(min-width:701px) {
  .preview-panel {
    position: sticky;
    top: 100px
  }
}

.panel-heading {
  letter-spacing: 1.25px
}

.panel-heading span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e1e9f3
}

.panel-heading span:last-child {
  font-size: 8px;
  letter-spacing: 1.2px;
  color: #f3a17a
}

.step-dot,
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 137, 87, .13)
}

.preview-step {
  display: flex;
  align-items: center;
  gap: 8px
}

.preview-step .live-dot {
  background: #71d7ad;
  box-shadow: 0 0 0 4px rgba(113, 215, 173, .12);
  animation: livePulse 2.2s ease-in-out infinite
}

.preview-format {
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.preview-format b {
  color: #687d99
}

.canvas-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  max-height: none;
  overflow: visible;
  margin: 16px auto 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 19px;
  background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .08), transparent 38%), linear-gradient(145deg, #1a2b41, #0c1727 78%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .06);
}

.canvas-wrap canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(240px, 46vh, 510px);
  object-fit: contain;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .27);
}

.canvas-corner {
  position: absolute;
  width: 17px;
  height: 17px;
  border-color: #ffb184;
  opacity: .85;
  pointer-events: none
}

.canvas-corner-tl {
  top: 7px;
  left: 7px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-radius: 6px 0 0
}

.canvas-corner-br {
  bottom: 7px;
  right: 7px;
  border-bottom: 2px solid;
  border-right: 2px solid;
  border-radius: 0 0 6px
}

.canvas-wrap.is-rendering canvas {
  animation: canvasRefresh .24s ease-out
}

.export-actions {
  max-width: 460px;
  margin: 14px auto 0
}

.export-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform .18s, filter .18s, box-shadow .18s
}

.export-actions button span {
  font-size: 17px;
  line-height: 1
}

.download-button {
  box-shadow: 0 7px 18px rgba(255, 137, 87, .16)
}

.download-button:hover,
.share-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
  filter: brightness(1.08)
}

.export-actions button:active {
  transform: translateY(0) scale(.985)
}

.export-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 11px
}

.hint-check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(101, 198, 163, .16);
  color: #7fe0b8;
  font-size: 10px;
  font-weight: 900
}

.field-group {
  animation: fieldEnter .32s both;
  animation-delay: calc(var(--field-index, 0) * 24ms)
}

.field-control {
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s
}

.field-control:hover {
  border-color: #50637e
}

.field-control:focus {
  background: #101d2e;
  transform: translateY(-1px)
}

.tool-card .card-symbol {
  transition: transform .28s cubic-bezier(.2, .75, .25, 1), filter .28s
}

.tool-card:hover .card-symbol {
  transform: translateY(-7px) rotate(-5deg) scale(1.09);
  filter: drop-shadow(0 12px 14px #0004)
}

.tool-card .card-art {
  transition: filter .25s
}

.tool-card:hover .card-art {
  filter: saturate(1.16) brightness(1.04)
}

.brand-mark {
  animation: brandBreath 4s ease-in-out infinite
}

.tile-one {
  animation: floatTileOne 7s ease-in-out infinite
}

.tile-two {
  animation: floatTileTwo 8s ease-in-out infinite
}

.tile-three {
  animation: floatTileThree 7.5s ease-in-out infinite
}

.hero-orbit {
  animation: orbitTurn 34s linear infinite
}

.hero-cta,
.back-button,
.privacy-icon {
  transition: transform .18s, background .18s, box-shadow .18s
}

.back-button:hover,
.privacy-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .2)
}

@keyframes screenEnter {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes panelEnter {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fieldEnter {
  from {
    opacity: 0;
    transform: translateY(5px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes canvasRefresh {
  0% {
    opacity: .68;
    transform: scale(.992);
    filter: saturate(.82)
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1)
  }
}

@keyframes livePulse {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(113, 215, 173, .10)
  }

  50% {
    box-shadow: 0 0 0 7px rgba(113, 215, 173, .02)
  }
}

@keyframes brandBreath {

  0%,
  100% {
    box-shadow: 0 6px 22px #ee78404a
  }

  50% {
    box-shadow: 0 7px 30px #ee784078
  }
}

@keyframes floatTileOne {

  0%,
  100% {
    transform: rotate(9deg) translateY(0)
  }

  50% {
    transform: rotate(6deg) translateY(-10px)
  }
}

@keyframes floatTileTwo {

  0%,
  100% {
    transform: rotate(-7deg) translateY(0)
  }

  50% {
    transform: rotate(-4deg) translateY(9px)
  }
}

@keyframes floatTileThree {

  0%,
  100% {
    transform: rotate(-12deg) translateY(0)
  }

  50% {
    transform: rotate(-9deg) translateY(-8px)
  }
}

@keyframes orbitTurn {
  to {
    transform: rotate(360deg)
  }
}

@media(max-width:980px) {
  .canvas-wrap {
    width: min(100%, 390px);
    padding: 9px
  }

  .canvas-wrap canvas {
    max-height: 43vh
  }
}

@media(max-width:700px) {
  .preview-panel {
    position: relative;
    top: auto
  }

  .canvas-wrap {
    width: min(100%, 360px);
    max-height: none;
    margin-top: 12px;
    padding: 8px;
    border-radius: 15px
  }

  .canvas-wrap canvas {
    max-height: 40vh;
    border-radius: 7px
  }

  .export-actions {
    margin-top: 11px
  }

  .preview-heading p {
    font-size: 9px
  }

  .tool-form .field-group {
    animation-delay: 0ms
  }
}

@media(max-height:700px) and (min-width:701px) {
  .canvas-wrap canvas {
    max-height: 40vh
  }

  .tool-view {
    padding-top: 16px
  }

  .tool-view-head {
    padding-bottom: 15px;
    margin-bottom: 15px
  }

  .editor-panel,
  .preview-panel {
    padding: 17px
  }
}

@media(prefers-reduced-motion:reduce) {

  .tool-view,
  .editor-panel,
  .preview-panel,
  .field-group,
  .brand-mark,
  .tile-one,
  .tile-two,
  .tile-three,
  .hero-orbit,
  .preview-step .live-dot {
    animation: none !important
  }

  .canvas-wrap.is-rendering canvas {
    animation: none !important
  }
}

@media(max-height:820px) and (min-width:701px) {
  .tool-view {
    padding-top: 14px;
    padding-bottom: 22px
  }

  .tool-view-head {
    padding-bottom: 14px;
    margin-bottom: 14px
  }

  .editor-panel,
  .preview-panel {
    padding: 18px
  }

  .canvas-wrap {
    margin-top: 12px;
    padding: 8px
  }

  .canvas-wrap canvas {
    max-height: 40vh
  }

  .export-actions {
    margin-top: 10px
  }

  .export-hint {
    margin-top: 8px
  }
}

/* Layout em tela cheia + catálogo em grade vertical com expansão. */
html,
body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden
}

body {
  min-height: 100vh;
  min-height: 100dvh
}

.tv-header {
  width: 100%;
  padding-inline: clamp(20px, 4.5vw, 76px)
}

.home-view {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(20px, 4.5vw, 76px);
  min-height: calc(100vh - 82px - var(--ad-space));
  min-height: calc(100dvh - 82px - var(--ad-space))
}

.tool-view {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px clamp(20px, 4.5vw, 76px) 34px;
  min-height: calc(100vh - 82px - var(--ad-space));
  min-height: calc(100dvh - 82px - var(--ad-space))
}

.feature-hero {
  width: 100%;
  margin-top: 18px
}

.content-rail-section {
  width: 100%;
  margin-bottom: 42px
}

.rail-heading {
  align-items: center
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none
}

.rail-count {
  font-size: 11px;
  color: #9eacbf;
  white-space: nowrap
}

.rail-count b {
  font-size: 11px;
  color: #e7edf5;
  margin: 0 3px 0 0
}

.grid-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: #172438;
  color: #f5f7fb;
  font-size: 11px;
  font-weight: 800;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s
}

.grid-toggle span {
  font-size: 17px;
  color: var(--orange-2);
  line-height: 1
}

.grid-toggle:hover {
  transform: translateY(-2px);
  background: #22334d;
  border-color: #ffad7580;
  box-shadow: 0 8px 22px #0003
}

.grid-toggle:active {
  transform: scale(.97)
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  overflow: visible;
  padding: 3px 2px 8px;
  margin: 0;
  scroll-snap-type: none
}

.tool-grid::-webkit-scrollbar {
  display: none
}

.tool-grid .tool-card {
  display: block;
  width: 100%;
  min-width: 0;
  flex: none;
  scroll-snap-align: none;
  border-radius: 16px;
  animation: cardReveal .38s both;
  animation-delay: calc(var(--card-index, 0) * 25ms)
}

.tool-grid .tool-card[hidden] {
  display: none !important
}

.tool-grid .card-art {
  height: clamp(112px, 12vw, 158px)
}

.tool-grid .card-caption {
  padding: 13px 14px 15px
}

.tool-grid .card-caption h3 {
  font-size: 14px;
  line-height: 1.25;
  min-height: 34px
}

.tool-grid .card-caption p {
  font-size: 10px;
  min-height: 30px
}

.grid-toggle[hidden] {
  display: none !important
}

.site-footer {
  width: 100%
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

@media(max-width:1250px) {
  .tool-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
  }
}

@media(max-width:960px) {
  .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px
  }

  .home-view,
  .tool-view {
    padding-inline: 24px
  }
}

@media(max-width:700px) {
  .tv-header {
    padding-inline: 13px
  }

  .home-view {
    padding: 0 13px;
    min-height: calc(100dvh - 68px - var(--ad-space))
  }

  .tool-view {
    width: 100%;
    padding: 14px 13px 25px;
    min-height: calc(100dvh - 68px - var(--ad-space))
  }

  .feature-hero {
    width: 100%;
    margin: 13px 0 28px
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    padding: 2px 0 6px
  }

  .tool-grid .tool-card {
    border-radius: 12px
  }

  .tool-grid .card-art {
    height: clamp(94px, 29vw, 132px)
  }

  .tool-grid .card-caption {
    padding: 10px 10px 12px
  }

  .tool-grid .card-caption h3 {
    font-size: 11px;
    min-height: 29px
  }

  .tool-grid .card-caption p {
    font-size: 9px;
    min-height: 38px
  }

  .tool-grid .card-tag {
    font-size: 7px
  }

  .section-actions {
    gap: 8px
  }

  .rail-heading {
    align-items: center;
    gap: 8px
  }

  .rail-heading h2 {
    font-size: 18px
  }

  .rail-count {
    font-size: 8px
  }

  .rail-count b {
    font-size: 9px
  }

  .grid-toggle {
    min-height: 33px;
    padding: 0 10px;
    font-size: 9px;
    gap: 5px
  }

  .content-rail-section {
    margin-bottom: 28px
  }
}

@media(max-width:390px) {
  .section-actions {
    gap: 6px
  }

  .rail-count {
    display: none
  }

  .tool-grid {
    gap: 9px
  }

  .tool-grid .card-caption h3 {
    font-size: 10px
  }
}

/* easymenuonline — direção visual de streaming: fundos cinematográficos, cards-imagem e pouco texto. */
:root {
  --bg: #050913;
  --panel: #101a2a;
  --line: rgba(255, 255, 255, .09);
  --orange: #ff8b5d;
  --orange-2: #ffc08e;
}

body {
  background:
    radial-gradient(ellipse at 12% 18%, rgba(38, 76, 123, .16), transparent 34%),
    radial-gradient(ellipse at 88% 42%, rgba(104, 55, 112, .11), transparent 32%),
    #050913;
}

.tv-header {
  background: rgba(5, 9, 19, .86);
  border-bottom-color: rgba(255, 255, 255, .06);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .12);
}

.brand {
  gap: 11px
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(145deg, #ffb47f, #ed673d 70%, #bb4b44);
  color: #fff;
  font-size: 24px;
}

.brand-name {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.75px;
  text-transform: lowercase;
}

.main-nav {
  gap: 8px
}

.nav-tab {
  font-size: 12px;
  padding-inline: 19px
}

.search-control {
  background: rgba(255, 255, 255, .065);
  border-color: rgba(255, 255, 255, .10)
}

.home-view {
  padding-inline: clamp(18px, 4.2vw, 68px)
}

.feature-hero {
  min-height: clamp(360px, 39vw, 500px);
  margin: 18px 0 34px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 25px;
  background: #12365b;
  box-shadow: 0 24px 65px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .14);
}

.hero-backdrop {
  z-index: 0;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(255, 222, 178, .95) 0 4%, rgba(255, 190, 139, .45) 10%, transparent 25%),
    radial-gradient(ellipse at 78% 44%, rgba(67, 158, 202, .7), transparent 34%),
    linear-gradient(118deg, #07172b 0%, #123e69 45%, #266f98 74%, #5b9fba 100%);
}

.hero-backdrop:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 10, 22, .92) 0%, rgba(5, 20, 39, .70) 34%, rgba(5, 20, 39, .12) 75%),
    linear-gradient(0deg, rgba(3, 9, 20, .68), transparent 44%);
}

.hero-backdrop:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, transparent 52%, rgba(8, 27, 49, .22) 53%),
    linear-gradient(180deg, transparent 34%, rgba(2, 8, 18, .18));
  clip-path: polygon(0 68%, 12% 58%, 24% 73%, 39% 49%, 52% 70%, 66% 43%, 79% 67%, 91% 51%, 100% 63%, 100% 100%, 0 100%);
  background-color: rgba(5, 19, 34, .42);
  filter: drop-shadow(0 -18px 26px rgba(9, 30, 54, .18));
}

.feature-hero:after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 420px;
  height: 420px;
  right: 17%;
  top: -30%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 34px rgba(255, 255, 255, .025), 0 0 0 76px rgba(255, 255, 255, .02);
}

.hero-content {
  z-index: 5;
  max-width: 620px
}

.hero-kicker {
  font-size: 9px;
  letter-spacing: 2.3px;
  color: #d1e7f8;
  opacity: .9
}

.hero-content h1 {
  font-size: clamp(42px, 5.3vw, 76px);
  line-height: .98;
  letter-spacing: -3.5px;
  text-shadow: 0 8px 35px rgba(0, 0, 0, .22);
}

.hero-content h1 em {
  background: linear-gradient(90deg, #ffe4bf, #ffc18e 55%, #fff0da);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-content p {
  font-size: 14px;
  color: #e7f2fb;
  opacity: .88
}

.hero-actions {
  margin-top: 23px
}

.hero-cta {
  min-height: 49px;
  padding: 0 23px;
  border-radius: 13px;
  background: linear-gradient(135deg, #fff, #ffe8d9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.hero-art {
  right: 4%;
  width: min(47%, 610px);
  height: 350px;
  z-index: 3
}

.hero-tile {
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, .48);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .32);
}

.tile-one {
  background: linear-gradient(145deg, rgba(255, 177, 118, .95), rgba(226, 83, 91, .88));
}

.tile-two {
  background: linear-gradient(145deg, rgba(225, 246, 246, .96), rgba(104, 176, 185, .91));
}

.tile-three {
  background: linear-gradient(145deg, rgba(255, 230, 183, .98), rgba(232, 150, 99, .94));
}

.tile-one span,
.tile-two span,
.tile-three span {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .18))
}

.hero-pagination {
  right: 30px;
  bottom: 23px
}

.content-rail-section {
  margin-bottom: 38px;
  position: relative
}

.rail-heading {
  margin-bottom: 14px;
  align-items: center
}

.rail-heading h2 {
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 850;
  letter-spacing: -.8px
}

.section-eyebrow {
  font-size: 8px;
  letter-spacing: 2px;
  color: #ffad83
}

.rail-count {
  display: none
}

.grid-toggle {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .11);
  min-height: 35px
}

/* Cards passam a funcionar como capas de conteúdo, com artwork CSS independente. */
.tool-grid {
  gap: 17px;
  padding: 3px 1px 12px
}

.tool-grid .tool-card {
  position: relative;
  aspect-ratio: 1.27/1;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 17px;
  background: #101827;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s;
}

.tool-grid .tool-card:hover {
  transform: translateY(-6px) scale(1.018);
  border-color: rgba(255, 190, 145, .65);
  box-shadow: 0 22px 38px rgba(0, 0, 0, .36), 0 0 0 1px rgba(255, 177, 132, .08);
}

.tool-grid .card-art {
  width: 100%;
  height: 100%;
  min-height: 0;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--card-bg);
}

.tool-grid .card-art:before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 78%;
  aspect-ratio: 1;
  right: -21%;
  top: -36%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, rgba(255, 255, 255, .58), rgba(255, 255, 255, .10) 42%, transparent 68%);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 0 70px rgba(255, 255, 255, .10);
}

.tool-grid .card-art:after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 8, 18, .04) 0%, transparent 38%, rgba(2, 7, 17, .18) 58%, rgba(2, 7, 17, .90) 100%),
    linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 43%);
}

.tool-grid .card-symbol {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(70px, 7vw, 106px);
  height: clamp(70px, 7vw, 106px);
  border-radius: 28px;
  font-size: clamp(43px, 5vw, 70px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 8px 25px rgba(0, 0, 0, .22);
  background: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .055));
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .32);
  backdrop-filter: blur(7px);
  transform: translateY(-8px);
}

.tool-grid .card-stamp {
  position: absolute;
  z-index: 3;
  left: 14px;
  top: 13px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  font-size: 13px;
  color: #fff;
  background: rgba(5, 12, 24, .22);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(8px);
}

.tool-grid .card-index {
  position: absolute;
  z-index: 3;
  right: 15px;
  top: 17px;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .75)
}

.tool-grid .card-title {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 28px 15px 15px;
  color: #fff;
  text-align: left;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 850;
  letter-spacing: -.2px;
}

.tool-grid .card-title b {
  flex: none;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: 13px;
  font-weight: 600;
  transition: transform .2s, background .2s;
}

.tool-grid .tool-card:hover .card-title b {
  transform: translate(2px, -2px);
  background: rgba(255, 255, 255, .28)
}

.tool-grid .card-caption {
  display: none
}

/* Capas diferentes, geradas com CSS: não há download de fotos nem biblioteca de imagens. */
.tool-grid .art-style-0 {
  --card-bg: radial-gradient(ellipse at 78% 18%, #ffd89b 0 8%, transparent 29%), linear-gradient(140deg, #f27b4e 0%, #d94d65 48%, #572b67 100%)
}

.tool-grid .art-style-1 {
  --card-bg: radial-gradient(ellipse at 22% 26%, #a8e8ef 0 7%, transparent 28%), linear-gradient(145deg, #16466e 0%, #287fa0 48%, #142a58 100%)
}

.tool-grid .art-style-2 {
  --card-bg: radial-gradient(ellipse at 78% 22%, #ffd0e7 0 8%, transparent 28%), linear-gradient(145deg, #563d84 0%, #a64e86 52%, #252f67 100%)
}

.tool-grid .art-style-3 {
  --card-bg: radial-gradient(ellipse at 72% 22%, #ddf6b0 0 7%, transparent 27%), linear-gradient(145deg, #164c50 0%, #358b78 52%, #1b3147 100%)
}

.tool-grid .art-style-4 {
  --card-bg: radial-gradient(ellipse at 25% 22%, #fff1c6 0 8%, transparent 27%), linear-gradient(145deg, #946237 0%, #d99b5c 52%, #55374d 100%)
}

.tool-grid .art-style-5 {
  --card-bg: radial-gradient(ellipse at 76% 27%, #d9d5ff 0 8%, transparent 28%), linear-gradient(145deg, #283e75 0%, #6666a8 50%, #30294e 100%)
}

.tool-grid .art-style-6 {
  --card-bg: radial-gradient(ellipse at 70% 20%, #ffc4a9 0 8%, transparent 29%), linear-gradient(145deg, #8c345d 0%, #d45b71 52%, #422b5b 100%)
}

.tool-grid .art-style-7 {
  --card-bg: radial-gradient(ellipse at 27% 22%, #b9f4ed 0 8%, transparent 27%), linear-gradient(145deg, #1b526d 0%, #478b9e 52%, #1c3551 100%)
}

/* A home lembra uma tela de streaming: hero panorâmico e prateleiras visuais. */
.feature-hero .hero-backdrop,
.feature-hero .hero-content,
.feature-hero .hero-art {
  pointer-events: none
}

.hero-cta {
  pointer-events: auto
}

.hero-content h1 {
  max-width: 560px
}

.site-footer {
  opacity: .62;
  font-size: 10px
}

.site-footer .footer-brand {
  font-weight: 850;
  letter-spacing: .2px;
  color: #e9edf5
}

.site-footer>span:nth-child(3) {
  display: none
}

@media(max-width:1050px) {
  .hero-art {
    right: 1%;
    width: 48%;
    transform: translateY(-50%) scale(.86);
    transform-origin: right center
  }

  .tool-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

@media(max-width:960px) {
  .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:760px) {
  .tv-header {
    height: 70px;
    gap: 10px;
    padding-inline: 13px
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 20px
  }

  .brand-name {
    font-size: 15px;
    letter-spacing: -.6px
  }

  .main-nav {
    gap: 2px
  }

  .nav-tab {
    height: 38px;
    padding-inline: 11px;
    font-size: 10px
  }

  .header-actions {
    gap: 7px
  }

  .search-control {
    width: clamp(105px, 27vw, 175px);
    height: 36px;
    padding-inline: 9px
  }

  .privacy-icon {
    width: 34px;
    height: 34px
  }

  .home-view {
    padding-inline: 13px
  }

  .feature-hero {
    min-height: 340px;
    margin: 12px 0 27px;
    border-radius: 19px;
    padding: 24px 22px
  }

  .hero-content {
    max-width: 72%;
    align-self: flex-start;
    margin-top: 22px
  }

  .hero-content h1 {
    font-size: clamp(34px, 7vw, 48px);
    letter-spacing: -2px;
    margin: 15px 0 10px
  }

  .hero-content p {
    font-size: 12px
  }

  .hero-actions {
    margin-top: 18px
  }

  .hero-cta {
    min-height: 42px;
    padding-inline: 15px;
    font-size: 11px;
    border-radius: 11px
  }

  .hero-art {
    right: -8%;
    top: 65%;
    width: 58%;
    height: 220px;
    transform: translateY(-50%) scale(.75);
    transform-origin: center
  }

  .hero-tile {
    width: 125px;
    height: 174px;
    padding: 13px;
    border-radius: 15px
  }

  .hero-tile span {
    font-size: 27px
  }

  .hero-tile b {
    font-size: 15px
  }

  .tile-three {
    width: 102px;
    height: 132px
  }

  .tile-three b {
    font-size: 14px
  }

  .feature-hero:after {
    width: 230px;
    height: 230px;
    right: 8%;
    top: 6%
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px
  }

  .tool-grid .tool-card {
    aspect-ratio: 1.12/1;
    border-radius: 13px
  }

  .tool-grid .card-symbol {
    width: 68px;
    height: 68px;
    border-radius: 21px;
    font-size: 43px
  }

  .tool-grid .card-title {
    padding: 26px 10px 11px;
    font-size: 11px
  }

  .tool-grid .card-title b {
    width: 22px;
    height: 22px;
    font-size: 11px
  }

  .tool-grid .card-stamp {
    width: 25px;
    height: 25px;
    left: 10px;
    top: 10px
  }

  .tool-grid .card-index {
    right: 11px;
    top: 16px;
    font-size: 8px
  }

  .rail-heading h2 {
    font-size: 20px
  }

  .grid-toggle {
    font-size: 9px;
    min-height: 32px;
    padding-inline: 10px
  }
}

@media(max-width:390px) {
  .brand-name {
    font-size: 13px
  }

  .main-nav .nav-tab {
    padding-inline: 8px;
    font-size: 9px
  }

  .search-control {
    width: 92px
  }

  .hero-content {
    max-width: 78%
  }

  .hero-content h1 {
    font-size: 32px
  }

  .hero-art {
    opacity: .72;
    right: -15%;
    transform: translateY(-50%) scale(.64)
  }
}

@media(prefers-reduced-motion:reduce) {

  .tool-grid .tool-card,
  .tool-grid .card-title b,
  .hero-tile {
    transition: none !important;
    animation: none !important
  }
}


/* Bootstrap Icons 1.11.x: ícones consistentes em navegação, cards e ações. */
.brand-mark,
.brand-mark i {
  display: grid;
  place-items: center
}

.brand-mark i {
  font-size: 22px
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}

.nav-tab i {
  font-size: 14px;
  opacity: .88
}

.search-control>i {
  font-size: 15px;
  line-height: 1
}

.privacy-icon i {
  font-size: 17px
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 13px
}

.hero-cta i {
  font-size: 17px;
  transition: transform .2s ease
}

.hero-cta:hover i {
  transform: translateX(4px)
}

.hero-tile>i {
  display: block;
  font-size: 38px;
  line-height: 1;
  margin: 5px 0 16px;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .16))
}

.hero-tile b {
  display: block
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.back-button i {
  font-size: 17px
}

.tool-view-icon {
  font-size: 22px;
  line-height: 1
}

.card-symbol {
  font-family: inherit;
  font-style: normal
}

.tool-grid .card-symbol {
  font-size: clamp(38px, 4.5vw, 62px)
}

.tool-grid .card-stamp i {
  font-size: 14px
}

.card-title b {
  display: grid;
  place-items: center
}

.card-title b i {
  font-size: 12px
}

.export-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px
}

.export-actions button i {
  font-size: 16px
}

.local-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.local-badge i {
  font-size: 13px
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px
}

/* Fundo ambiente animado: camadas CSS, sem imagens ou requisições adicionais. */
body {
  background-size: 180% 180%, 160% 160%, 100% 100%;
  background-position: 0% 0%, 100% 100%, center;
  animation: ambientDrift 28s ease-in-out infinite alternate;
}

.hero-backdrop {
  background-size: 170% 170%, 170% 170%, 170% 170%;
  animation: heroAtmosphere 22s ease-in-out infinite alternate;
  will-change: background-position, filter;
}

.hero-backdrop:before {
  animation: heroLight 16s ease-in-out infinite alternate
}

.hero-backdrop:after {
  animation: landscapeFloat 19s ease-in-out infinite alternate
}

.feature-hero:after {
  animation: haloPulse 9s ease-in-out infinite alternate
}

.tool-grid .card-art:before {
  animation: cardAura 10s ease-in-out infinite alternate;
  transform-origin: center
}

.tool-grid .card-art:after {
  background:
    linear-gradient(180deg, rgba(2, 8, 18, .04) 0%, transparent 38%, rgba(2, 7, 17, .18) 58%, rgba(2, 7, 17, .90) 100%),
    linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 43%),
    linear-gradient(112deg, transparent 35%, rgba(255, 255, 255, .15) 48%, transparent 60%);
  background-size: 100% 100%, 100% 100%, 220% 100%;
  background-position: center, center, -130% 0;
  animation: cardSheen 13s ease-in-out infinite;
  animation-delay: calc(var(--card-index, 0) * 160ms);
}

.tool-grid .card-symbol {
  transition: transform .35s cubic-bezier(.2, .75, .25, 1), filter .35s
}

.tool-grid .tool-card:hover .card-symbol {
  transform: translateY(-10px) scale(1.12) rotate(-6deg)
}

.brand-mark i {
  animation: sparkTurn 8s linear infinite
}

.hero-tile>i {
  animation: iconFloat 5s ease-in-out infinite
}

.tool-view-icon {
  transition: transform .28s ease, color .28s ease
}

.tool-view-title:hover .tool-view-icon {
  transform: rotate(-8deg) scale(1.08);
  color: #ffd0ad
}

@keyframes ambientDrift {
  0% {
    background-position: 0% 0%, 100% 100%, center
  }

  100% {
    background-position: 100% 75%, 0% 25%, center
  }
}

@keyframes heroAtmosphere {
  0% {
    background-position: 0% 50%, 100% 10%, 35% 50%;
    filter: saturate(.95)
  }

  100% {
    background-position: 100% 20%, 0% 90%, 80% 50%;
    filter: saturate(1.18)
  }
}

@keyframes heroLight {
  0% {
    opacity: .65;
    transform: translateX(-1.5%) scale(1)
  }

  100% {
    opacity: 1;
    transform: translateX(1.5%) scale(1.025)
  }
}

@keyframes landscapeFloat {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-9px)
  }
}

@keyframes haloPulse {
  0% {
    opacity: .45;
    transform: scale(.96)
  }

  100% {
    opacity: .9;
    transform: scale(1.04)
  }
}

@keyframes cardAura {
  0% {
    transform: translate(-3%, 2%) scale(.92);
    opacity: .7
  }

  100% {
    transform: translate(2%, -4%) scale(1.1);
    opacity: 1
  }
}

@keyframes cardSheen {

  0%,
  48% {
    background-position: center, center, -130% 0
  }

  75%,
  100% {
    background-position: center, center, 130% 0
  }
}

@keyframes sparkTurn {

  0%,
  80% {
    transform: rotate(0) scale(1)
  }

  90% {
    transform: rotate(20deg) scale(1.12)
  }

  100% {
    transform: rotate(0) scale(1)
  }
}

@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-7px)
  }
}

@media(prefers-reduced-motion:reduce) {

  body,
  .hero-backdrop,
  .hero-backdrop:before,
  .hero-backdrop:after,
  .feature-hero:after,
  .tool-grid .card-art:before,
  .tool-grid .card-art:after,
  .brand-mark i,
  .hero-tile>i {
    animation: none !important
  }
}

/* ==========================================================
   MOBILE UX PATCH — easymenuonline
   Header em duas linhas, hero sem sobreposição e prévia integral.
   ========================================================== */
@media (max-width:700px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden
  }

  :root {
    --ad-space: clamp(68px, 9vh, 92px)
  }

  .tv-header {
    width: 100%;
    height: auto;
    min-height: 94px;
    padding: 10px 14px 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 42px 38px;
    column-gap: 10px;
    row-gap: 7px;
    align-items: center;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    gap: 8px
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    flex: none
  }

  .brand-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .main-nav {
    grid-column: 1/-1;
    grid-row: 2;
    width: 100%;
    height: 38px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    justify-content: flex-start;
  }

  .main-nav::-webkit-scrollbar {
    display: none
  }

  .nav-tab {
    height: 36px;
    min-width: 0;
    flex: 1 0 auto;
    padding: 0 13px;
    font-size: 11px;
    gap: 6px
  }

  .nav-tab i {
    font-size: 13px
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    gap: 7px
  }

  .search-control {
    width: 37px;
    height: 37px;
    flex: none;
    display: flex;
    justify-content: center;
    padding: 0
  }

  .search-control>i {
    font-size: 16px
  }

  .search-control input {
    display: none
  }

  .search-control:focus-within {
    position: fixed;
    top: 12px;
    left: 12px;
    right: 58px;
    width: auto;
    height: 42px;
    z-index: 100;
    padding: 0 13px;
    justify-content: flex-start;
    background: #172337;
    border: 1px solid #52647d;
    box-shadow: 0 12px 30px #0009
  }

  .search-control:focus-within input {
    display: block
  }

  .privacy-icon {
    width: 37px;
    height: 37px;
    flex: none
  }

  .home-view {
    width: 100%;
    padding-inline: 14px;
    overflow: hidden
  }

  .feature-hero {
    width: 100%;
    min-height: 350px;
    margin: 13px 0 27px;
    padding: 25px 21px;
    border-radius: 19px;
    align-items: flex-start
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    align-self: flex-start;
    padding-right: 0;
    z-index: 4
  }

  .hero-kicker {
    font-size: 9px;
    letter-spacing: 1.7px
  }

  .hero-content h1 {
    max-width: 100%;
    font-size: clamp(32px, 8.2vw, 45px);
    line-height: 1.03;
    letter-spacing: -1.8px;
    margin: 15px 0 10px
  }

  .hero-content p {
    font-size: 13px;
    max-width: 75%
  }

  .hero-actions {
    margin-top: 17px
  }

  .hero-cta {
    min-height: 44px;
    padding: 0 16px;
    font-size: 12px;
    border-radius: 12px
  }

  .hero-art {
    width: 205px;
    height: 145px;
    right: -18px;
    top: auto;
    bottom: -16px;
    transform: scale(.72);
    transform-origin: right bottom;
    opacity: .68;
    z-index: 2
  }

  .hero-tile {
    width: 118px;
    height: 162px;
    padding: 12px;
    border-radius: 14px
  }

  .hero-tile>i {
    font-size: 27px;
    margin: 3px 0 10px
  }

  .hero-tile b {
    font-size: 14px
  }

  .tile-three {
    width: 94px;
    height: 120px
  }

  .tile-three b {
    font-size: 13px
  }

  .hero-orbit {
    width: 165px;
    height: 165px
  }

  .orbit-two {
    width: 125px;
    height: 125px
  }

  .hero-pagination {
    right: 15px;
    bottom: 12px
  }

  .content-rail-section {
    width: 100%;
    min-width: 0;
    margin-bottom: 28px
  }

  .rail-heading {
    align-items: center;
    gap: 8px
  }

  .rail-heading h2 {
    font-size: 21px
  }

  .section-actions {
    display: flex;
    align-items: center;
    gap: 8px
  }

  .rail-count {
    font-size: 9px
  }

  .rail-count b {
    font-size: 15px;
    margin-left: 3px
  }

  .tool-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    width: 100%;
    overflow: visible;
    padding: 3px 0 12px;
    margin: 0
  }

  .tool-grid .tool-card {
    display: block;
    min-width: 0;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1/1.04;
    border-radius: 14px;
    overflow: hidden
  }

  .tool-grid .card-art {
    width: 100%;
    height: 100%;
    min-height: 0
  }

  .tool-grid .card-symbol {
    width: 62px;
    height: 62px;
    border-radius: 19px;
    font-size: 39px
  }

  .tool-grid .card-title {
    font-size: 11px;
    padding: 26px 10px 11px;
    gap: 5px
  }

  .tool-grid .card-title b {
    width: 22px;
    height: 22px;
    font-size: 10px
  }

  .tool-grid .card-stamp {
    width: 25px;
    height: 25px;
    left: 9px;
    top: 9px
  }

  .tool-grid .card-index {
    right: 10px;
    top: 14px;
    font-size: 8px
  }

  .grid-toggle {
    min-height: 34px;
    padding: 0 11px;
    font-size: 10px;
    white-space: nowrap
  }

  .site-footer {
    padding-bottom: 20px
  }

  .tool-view {
    width: 100%;
    max-width: 100%;
    padding: 13px 12px 28px;
    min-height: calc(100dvh - 94px - var(--ad-space));
    overflow-x: hidden
  }

  .tool-view-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 2px 0 13px;
    margin-bottom: 12px
  }

  .back-button {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 10px
  }

  .tool-view-title {
    min-width: 0;
    gap: 8px
  }

  .tool-view-icon {
    width: 36px;
    height: 36px;
    font-size: 18px
  }

  .tool-view-title h1 {
    font-size: 16px;
    overflow-wrap: anywhere
  }

  .tool-view-title p {
    font-size: 9px;
    line-height: 1.35
  }

  .local-badge {
    grid-column: 2;
    margin: 0;
    font-size: 8px;
    white-space: normal
  }

  .workspace-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: stretch
  }

  .editor-panel,
  .preview-panel {
    width: 100%;
    min-width: 0;
    padding: 13px;
    border-radius: 13px
  }

  .tool-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 14px
  }

  .field-group {
    min-width: 0
  }

  .field-group:has(textarea),
  .field-group:has(input[type=file]) {
    grid-column: 1/-1
  }

  .field-control {
    min-width: 0;
    width: 100%;
    font-size: 12px
  }

  .field-control[type=file] {
    max-width: 100%
  }

  .preview-heading {
    align-items: flex-start;
    gap: 7px
  }

  .preview-heading p {
    font-size: 9px
  }

  .preview-format {
    font-size: 8px;
    padding: 5px 7px
  }

  /* A prévia nunca recebe scroll nem limite de altura: mostra a arte inteira. */
  .canvas-wrap {
    display: block;
    width: min(100%, 420px);
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    margin: 12px auto 0;
    padding: 6px;
    border-radius: 12px
  }

  .canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    border-radius: 6px
  }

  .export-actions {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    margin: 11px auto 0
  }

  .export-actions button {
    min-width: 0;
    min-height: 42px;
    padding: 0 8px;
    font-size: 10px
  }

  .export-hint {
    font-size: 9px;
    line-height: 1.4
  }
}

@media (max-width:420px) {
  .tv-header {
    padding-inline: 11px
  }

  .brand-name {
    font-size: 12px
  }

  .nav-tab {
    padding-inline: 10px;
    font-size: 10px
  }

  .home-view {
    padding-inline: 11px
  }

  .feature-hero {
    min-height: 330px;
    padding: 22px 17px
  }

  .hero-content h1 {
    font-size: clamp(30px, 8.4vw, 36px)
  }

  .hero-content p {
    font-size: 12px;
    max-width: 78%
  }

  .hero-art {
    right: -25px;
    transform: scale(.63);
    opacity: .58
  }

  .tool-grid {
    gap: 9px
  }

  .tool-grid .tool-card {
    border-radius: 12px
  }

  .tool-grid .card-title {
    font-size: 10px;
    padding-inline: 8px
  }

  .section-actions {
    gap: 5px
  }

  .rail-count {
    display: none
  }

  .tool-form {
    grid-template-columns: minmax(0, 1fr)
  }

  .field-group:has(textarea),
  .field-group:has(input[type=file]) {
    grid-column: auto
  }

  .preview-format {
    display: none
  }

  .canvas-wrap {
    width: 100%;
    padding: 5px
  }

  .export-actions button {
    font-size: 9px;
    gap: 5px
  }
}

/* CORRECAO DEFINITIVA DO CABECALHO MOBILE */
@media screen and (max-width:700px) {

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important
  }

  .tv-header {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 108px !important;
    height: auto !important;
    padding: 10px 12px 9px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 40px 40px !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .tv-header>.brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tv-header>.brand .brand-name {
    display: block !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .tv-header>.header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-self: end !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .tv-header>.header-actions .search-control {
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tv-header>.header-actions .search-control input {
    display: none !important;
  }

  .tv-header>.header-actions .search-control:focus-within {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    min-width: 0 !important;
    z-index: 9999 !important;
    padding: 0 14px !important;
    justify-content: flex-start !important;
    background: #172337 !important;
    border: 1px solid #71839a !important;
    box-shadow: 0 10px 35px #000b !important;
  }

  .tv-header>.header-actions .search-control:focus-within input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  .tv-header>.header-actions .privacy-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  .tv-header>.main-nav {
    grid-column: 1/-1 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
  }

  .tv-header>.main-nav .nav-tab {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

@media screen and (max-width:380px) {
  .tv-header {
    padding-inline: 9px !important;
    column-gap: 5px !important;
  }

  .tv-header>.brand .brand-name {
    font-size: 11px !important;
  }

  .tv-header>.main-nav .nav-tab {
    padding-inline: 10px !important;
    font-size: 10px !important;
  }
}


/* Anúncio responsivo no espaço reservado do rodapé */
.ad-reserved {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 12px 5px;
  overflow: hidden;
}

.ad-reserved .ad-label {
  display: block;
  color: #7f8da1;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ad-reserved .adsbygoogle {
  display: block;
  width: 100%;
  max-width: 970px;
  min-height: 48px;
  max-height: calc(var(--ad-space) - 17px);
}

.export-actions {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr;
  align-items: stretch;
  gap: 9px;
  max-width: 560px;
}

.export-actions button {
  min-width: 0;
  min-height: 49px;
  padding: 9px 12px;
  white-space: nowrap;
}

.jpg-button {
  background: #26364d;
  color: #e6edf5;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
}

.jpg-button:hover {
  background: #334761
}

.export-actions button:disabled {
  opacity: .62;
  cursor: wait;
  transform: none
}

.export-hint {
  min-height: 20px;
  line-height: 1.45
}

.export-hint.is-success {
  color: #8de2bc
}

.export-hint.is-error {
  color: #ffadad
}

.export-hint.is-loading {
  color: #ffd09d
}

.export-help {
  max-width: 470px;
  margin: 7px auto 0;
  color: #8291a6;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

@media(max-width:700px) {
  .export-actions {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    gap: 7px
  }

  .export-actions #shareButton {
    grid-column: 1/-1
  }

  .export-actions button {
    min-height: 44px;
    font-size: 11px;
    padding: 8px 7px
  }

  .export-help {
    font-size: 10px
  }

  .ad-reserved {
    padding-inline: 7px
  }
}


/* AD SLOT: limitar a área de anúncios a no máximo metade da tela */
:root {
  --ad-space: 100px;
}

.ad-reserved {
  position: fixed !important;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ad-space) !important;
  max-height: 100px !important;
  box-sizing: border-box;
  padding: 6px 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: auto;
  background: #070b12;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.ad-reserved .adsbygoogle {
  display: block;
  width: 100%;
  max-width: 970px;
  min-height: 0;
  max-height: none;
}

body {
  padding-bottom: var(--ad-space) !important;
}

.toast {
  bottom: calc(var(--ad-space) + 15px) !important;
}

@media (max-width: 700px) {
  :root {
    --ad-space: 100px;
  }

  .ad-reserved {
    max-height: 100px !important;
    padding: 5px 7px 7px;
  }

  .ad-reserved .adsbygoogle {
    max-width: 100%;
  }
}

/* AJUSTE FINAL: anuncio limitado a 100px em qualquer tela */
:root {
  --ad-space: 100px !important;
}

.ad-reserved {
  height: 100px !important;
  max-height: 100px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ad-reserved .adsbygoogle {
  max-height: 88px !important;
}

@media (max-width: 700px) {
  :root {
    --ad-space: 100px !important;
  }

  .ad-reserved {
    height: 100px !important;
    max-height: 100px !important;
  }
}


/* Legibilidade global e cabeçalho responsivo sem sobreposição */
@media(min-width:701px) {
  .tv-header {
    min-height: 94px;
    height: auto;
    gap: clamp(14px, 2vw, 36px);
    padding: 14px clamp(20px, 3vw, 58px)
  }

  .brand-mark {
    width: 49px;
    height: 49px;
    font-size: 26px
  }

  .brand-mark i {
    font-size: 26px
  }

  .brand-name {
    font-size: 20px
  }

  .nav-tab {
    min-height: 51px;
    font-size: 16px;
    padding: 0 18px
  }

  .nav-tab i {
    font-size: 18px
  }

  .search-control {
    height: 50px;
    width: clamp(180px, 20vw, 315px)
  }

  .search-control input {
    display: block !important;
    font-size: 16px
  }

  .search-control>i {
    font-size: 19px
  }

  .privacy-icon {
    width: 48px;
    height: 48px
  }

  .privacy-icon i {
    font-size: 19px
  }

  .hero-content p {
    font-size: 19px
  }

  .hero-cta {
    min-height: 55px;
    font-size: 16px
  }

  .rail-heading h2 {
    font-size: 30px
  }

  .grid-toggle {
    font-size: 14px;
    min-height: 44px
  }

  .tool-grid .card-title {
    font-size: 17px
  }

  .tool-view-title h1 {
    font-size: 28px
  }

  .field-group label {
    font-size: 15px
  }

  .field-control {
    font-size: 16px;
    min-height: 50px
  }

  .export-actions button {
    font-size: 15px;
    min-height: 52px
  }
}

.install-pwa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 13px;
  background: #f79b6e;
  color: #151927;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap
}

.install-pwa i {
  font-size: 18px
}

.install-pwa:hover {
  background: #ffd0aa
}

.install-pwa[hidden] {
  display: none !important
}

@media(max-width:700px) {
  .tv-header {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 54px 46px 45px !important;
    gap: 7px !important;
    padding: 10px 12px 11px !important;
    align-items: center !important
  }

  .tv-header>.brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important
  }

  .brand-mark {
    width: 43px !important;
    height: 43px !important;
    flex: none !important
  }

  .brand-mark i {
    font-size: 24px !important
  }

  .brand-name {
    font-size: clamp(14px, 3.9vw, 19px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important
  }

  .tv-header>.header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    margin: 0 !important;
    min-width: 0 !important
  }

  .install-pwa {
    height: 43px !important;
    min-height: 43px !important;
    padding: 0 11px !important;
    font-size: 13px !important;
    border-radius: 11px !important
  }

  .install-pwa i {
    font-size: 17px !important
  }

  .privacy-icon {
    width: 40px !important;
    height: 40px !important;
    flex: none !important
  }

  .tv-header>.header-actions>.search-control {
    grid-column: 1/-1 !important;
    display: none !important
  }

  .tv-header>.main-nav {
    grid-column: 1/-1 !important;
    grid-row: 3 !important;
    display: flex !important;
    width: 100% !important;
    height: 44px !important;
    gap: 7px !important;
    overflow-x: auto !important;
    justify-content: space-between !important
  }

  .nav-tab {
    height: 43px !important;
    min-height: 43px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    gap: 6px !important
  }

  .nav-tab i {
    font-size: 17px !important
  }

  .tv-header:has(.header-actions)::after {
    content: '';
    grid-column: 1/-1;
    grid-row: 2;
    pointer-events: none
  }

  .mobile-search-control {
    grid-column: 1/-1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 15px !important;
    border: 1px solid #405068 !important;
    border-radius: 13px !important;
    background: #141f30 !important;
    color: #e2e8ef !important
  }

  .mobile-search-control input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    color: white !important;
    background: transparent !important;
    outline: none !important;
    border: 0 !important
  }

  .mobile-search-control i {
    font-size: 18px !important;
    flex: none !important
  }

  .hero-content h1 {
    font-size: clamp(35px, 8vw, 45px)
  }

  .hero-content p {
    font-size: 15px
  }

  .rail-heading h2 {
    font-size: 24px
  }

  .grid-toggle {
    min-height: 42px !important;
    font-size: 13px !important
  }

  .tool-grid .card-title {
    font-size: 14px !important
  }

  .tool-grid .card-symbol {
    font-size: 45px !important
  }

  .tool-view-title h1 {
    font-size: 22px
  }

  .tool-view-title p {
    font-size: 13px
  }

  .field-group label {
    font-size: 15px !important
  }

  .field-control {
    min-height: 48px !important;
    font-size: 16px !important
  }

  .editor-panel,
  .preview-panel {
    padding: 17px !important
  }

  .export-actions button {
    font-size: 13px !important;
    min-height: 48px !important
  }
}

@media(max-width:390px) {
  .install-pwa span {
    display: none
  }

  .install-pwa {
    width: 42px !important;
    padding: 0 !important
  }

  .brand-name {
    font-size: 14px !important
  }

  .nav-tab {
    font-size: 12px !important
  }
}

@media(min-width:701px) {
  .mobile-search-control {
    display: none !important
  }
}

/* Exportação: três ações (PNG, PDF, compartilhar), com indicador de tela inteira. */
.export-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px
}

.export-actions button {
  min-width: 0;
  min-height: 50px;
  padding: 10px 9px;
  font-size: 14px;
  white-space: normal;
  line-height: 1.3
}

.pdf-button {
  background: #2b3f5a;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  font-weight: 850
}

.pdf-button:hover {
  background: #3a5270
}

.export-overlay[hidden] {
  display: none !important
}

.export-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(5, 11, 23, .94);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  text-align: center
}

.export-overlay-content {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  color: #f5f7fb
}

.export-spinner {
  width: 76px;
  height: 76px;
  border: 6px solid rgba(255, 255, 255, .18);
  border-top-color: #ff9b6b;
  border-radius: 50%;
  animation: exportSpin .8s linear infinite
}

.export-overlay h2 {
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 850;
  margin: 8px 0 0
}

.export-overlay p {
  font-size: clamp(14px, 3vw, 17px);
  color: #b9c6d8;
  line-height: 1.5;
  margin: 0
}

@keyframes exportSpin {
  to {
    transform: rotate(360deg)
  }
}

@media(max-width:700px) {
  .export-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px
  }

  .export-actions #shareButton {
    grid-column: 1/-1
  }

  .export-actions button {
    min-height: 52px;
    font-size: 14px
  }
}

@media(prefers-reduced-motion:reduce) {
  .export-spinner {
    animation-duration: 2.4s
  }
}

/* ========================================================================
   EASYMENUONLINE · UI/UX FINAL · 2026-11-02
   Cartões de loja de apps + navegação legível em celular, desktop e TV.
   ======================================================================== */
:root {
  --tap-min: 48px;
  --accent-warm: #ffae7a;
  --surface-new: #121e30;
  --outline-new: rgba(190, 211, 246, .18)
}

html {
  scroll-padding-top: 175px
}

body {
  font-size: 16px;
  line-height: 1.5;
  color: #f2f6fe;
  background: radial-gradient(circle at 84% 9%, rgba(38, 80, 139, .19), transparent 38%), #080e1a
}

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

button {
  touch-action: manipulation
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ffd297 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px rgba(255, 166, 105, .13)
}

[hidden],
.tool-grid .tool-card[hidden],
.tool-grid .tool-card[hidden]:hover {
  display: none !important
}

/* Acessibilidade e cabeçalho com proporções de interface de TV. */
.tv-header {
  box-sizing: border-box;
  max-width: 100%;
  background: rgba(10, 16, 29, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .2)
}

.brand-name {
  letter-spacing: -.65px !important;
  color: #fff
}

.brand-mark {
  background: linear-gradient(140deg, #ffbd8e, #ef714b) !important;
  box-shadow: 0 4px 20px #ff8f6545 !important
}

.header-actions {
  min-width: 0;
  gap: 10px
}

.search-control {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .17);
  background: #162439
}

.search-control:focus-within,
.mobile-search-control:focus-within {
  border-color: #f3a97d !important;
  box-shadow: 0 0 0 3px rgba(255, 174, 122, .13)
}

.search-control input {
  min-width: 0 !important
}

.nav-tab {
  border-radius: 14px;
  transition: background .2s, color .2s, transform .2s
}

.nav-tab.active {
  background: linear-gradient(135deg, #fff, #e3ebff);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .2)
}

.nav-tab:hover {
  transform: translateY(-2px)
}

.install-pwa {
  background: linear-gradient(145deg, #ffb58a, #f29464);
  border-color: rgba(255, 255, 255, .17);
  box-shadow: 0 5px 16px rgba(247, 139, 95, .19);
  font-weight: 850
}

.install-pwa:hover {
  background: #ffcca9
}

.privacy-icon {
  flex: none;
  border: 1px solid rgba(255, 255, 255, .1)
}

.mobile-search-control {
  display: none
}

.pwa-guide[hidden] {
  display: none !important
}

.pwa-guide {
  position: relative;
  z-index: 29;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100% - 30px, 1180px);
  margin: 12px auto 0;
  padding: 14px 16px;
  color: #f4f6ff;
  background: #183650;
  border: 1px solid #547994;
  border-radius: 15px;
  box-shadow: 0 12px 26px #0003
}

.pwa-guide>i {
  font-size: 27px;
  color: #ffc090
}

.pwa-guide p {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
  margin: 0
}

.pwa-guide button {
  border: 0;
  border-radius: 10px;
  background: #2b4d68;
  color: #fff;
  min-width: 44px;
  min-height: 44px
}

.pwa-guide button i {
  font-size: 18px
}

/* Hero acolhedor com explicação do fluxo inteiro de uso. */
.home-view {
  max-width: 1680px !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: clamp(18px, 4vw, 58px) !important;
  overflow: visible !important
}

.feature-hero {
  min-height: 365px;
  margin: 25px 0 38px;
  padding: clamp(28px, 4vw, 54px);
  background: linear-gradient(115deg, #16345b 0%, #1868a7 54%, #5c9ed3 100%);
  border: 1px solid rgba(255, 255, 255, .19);
  box-shadow: 0 18px 44px rgba(2, 13, 29, .25);
  border-radius: 28px
}

.hero-content {
  max-width: 670px
}

.hero-content h1 {
  font-size: clamp(38px, 4.6vw, 72px) !important;
  line-height: 1.07 !important;
  margin: 14px 0 16px !important;
  max-width: 660px;
  letter-spacing: -2.3px
}

.hero-content h1 em {
  color: #ffe0c8
}

.hero-content p {
  max-width: 560px;
  font-size: clamp(17px, 1.6vw, 21px) !important;
  line-height: 1.5;
  color: #eaf4ff
}

.hero-kicker {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #fff
}

.hero-cta {
  padding-inline: 23px;
  min-height: 55px;
  font-size: 16px;
  font-weight: 850;
  box-shadow: 0 8px 26px #0004
}

.hero-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  max-width: 600px
}

.hero-steps span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 7px;
  border-radius: 999px;
  background: rgba(6, 32, 62, .35);
  border: 1px solid #ffffff3f;
  color: #f6faff;
  font-size: 13px;
  font-weight: 750
}

.hero-steps b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  color: #173958;
  font-size: 13px
}

.hero-steps>i {
  font-size: 13px;
  color: #fff8
}

.hero-art {
  opacity: .94
}

/* Grade de aplicativos: imagem grande + título + explicação + ação. */
.content-rail-section {
  margin-bottom: 43px
}

.rail-heading {
  align-items: center;
  margin: 0 0 17px
}

.rail-heading h2 {
  font-size: clamp(26px, 2.9vw, 36px) !important;
  line-height: 1.2;
  color: #f7faff;
  margin-top: 6px
}

.section-eyebrow {
  color: #ffb18a;
  font-size: 11px !important;
  letter-spacing: 1.4px;
  font-weight: 850
}

.rail-count {
  font-size: 13px;
  color: #b6c5d8
}

.rail-count b {
  font-size: 20px;
  color: white
}

.grid-toggle {
  background: #17273c;
  border: 1px solid #34435a;
  color: #f5f7fa;
  border-radius: 12px;
  min-height: 46px !important;
  padding: 0 15px;
  font-size: 15px !important;
  font-weight: 800;
  white-space: nowrap
}

.grid-toggle:hover {
  background: #243750
}

.tool-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px !important;
  width: 100%;
  margin: 0 !important;
  padding: 4px 1px 14px !important;
  overflow: visible !important
}

.tool-grid .tool-card {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 290px !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: 19px !important;
  border: 1px solid rgba(175, 209, 245, .2) !important;
  background: #131f31 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .23);
  text-align: left;
  transform: translateZ(0)
}

.tool-grid .tool-card:hover,
.tool-grid .tool-card:focus-visible {
  transform: translateY(-4px) scale(1.015) !important;
  border-color: #ffc596 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42)
}

.tool-grid .card-art {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 185px;
  height: 185px !important;
  min-height: 185px !important;
  width: 100%;
  overflow: hidden
}

.tool-grid .card-art:after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 55%, rgba(3, 9, 22, .16))
}

.tool-grid .card-symbol {
  transform: none;
  filter: drop-shadow(0 7px 18px #0003);
  width: 92px;
  height: 92px;
  border-radius: 26px;
  font-size: 57px !important
}

.tool-grid .tool-card:hover .card-symbol {
  transform: translateY(-4px) scale(1.09) rotate(-3deg)
}

.tool-grid .card-title {
  display: none !important
}

.tool-grid .card-index {
  font-size: 12px;
  top: 15px;
  right: 17px
}

.tool-grid .card-stamp {
  width: 35px;
  height: 35px;
  top: 14px;
  left: 14px
}

.tool-grid .card-caption {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 18px 18px 17px !important;
  gap: 8px;
  background: linear-gradient(180deg, #162338, #101a2b)
}

.tool-grid .card-caption h3 {
  font-size: 18px !important;
  line-height: 1.25;
  margin: 0 !important;
  font-weight: 850;
  color: #f9fbff;
  letter-spacing: -.2px
}

.tool-grid .card-caption p {
  color: #b6c3d5;
  font-size: 14px !important;
  line-height: 1.45;
  margin: 0 !important;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.tool-grid .card-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 7px;
  color: #ffc19b;
  font-size: 14px;
  font-weight: 800
}

.tool-grid .card-open i {
  font-size: 17px
}

.empty-state {
  background: #101c2b;
  border: 1px solid #2c415b;
  border-radius: 20px;
  max-width: 650px;
  margin: 40px auto;
  padding: 45px 20px
}

.empty-state>i {
  font-size: 45px;
  color: #ffae82
}

.empty-state h2 {
  font-size: 25px;
  color: white
}

.empty-state p {
  font-size: 16px;
  color: #b7c5d9
}

.clear-search-button {
  margin-top: 10px;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #ffac7d;
  color: #1b2431;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 850
}

.site-footer {
  opacity: 1 !important;
  color: #98a8bd;
  font-size: 13px !important;
  padding-block: 30px
}

.site-footer>a {
  font-size: 13px
}

.site-footer>span:nth-child(3) {
  display: inline !important
}

/* Editor simples: três ações sem termos técnicos no caminho. */
.tool-view {
  width: 100% !important;
  max-width: 1620px !important;
  padding: 25px clamp(18px, 4vw, 58px) 42px;
  margin: auto
}

.tool-view-head {
  align-items: center;
  gap: 18px
}

.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 49px;
  padding: 9px 17px;
  background: #203047;
  color: #fff;
  font-size: 15px;
  border-radius: 12px
}

.back-button:hover {
  background: #30465e
}

.tool-view-title h1 {
  font-size: clamp(24px, 2.5vw, 34px) !important;
  line-height: 1.22
}

.tool-view-title p {
  font-size: 15px !important;
  line-height: 1.4
}

.tool-view-icon {
  width: 58px;
  height: 58px;
  font-size: 29px
}

.local-badge {
  font-size: 12px
}

.workspace-layout {
  grid-template-columns: minmax(320px, .83fr) minmax(420px, 1.17fr);
  gap: 22px
}

.editor-panel,
.preview-panel {
  padding: clamp(18px, 2.2vw, 31px);
  border-radius: 21px;
  border-color: #2d3c51;
  background: linear-gradient(165deg, #152238, #101b2a);
  box-shadow: 0 8px 28px #0002
}

.panel-heading,
.preview-heading {
  font-size: 13px;
  letter-spacing: .7px;
  color: #fff
}

.panel-heading>span,
.preview-heading .preview-step {
  font-size: 14px !important;
  font-weight: 850;
  letter-spacing: .5px
}

.editor-intro {
  font-size: 15px;
  line-height: 1.5;
  color: #b1c0d3;
  margin: 13px 0 0;
  max-width: 530px
}

.tool-form {
  gap: 19px;
  margin-top: 22px
}

.field-group {
  gap: 8px
}

.field-group label {
  font-size: 16px !important;
  line-height: 1.3;
  font-weight: 800;
  color: #f0f4fa
}

.field-control {
  box-sizing: border-box;
  font-size: 17px !important;
  min-height: 51px !important;
  padding: 12px 15px;
  border-radius: 12px;
  background: #091525;
  border-color: #3c516a;
  color: #fff;
  max-width: 100%
}

.field-control[type="color"] {
  min-height: 56px !important
}

.field-control[type="range"] {
  min-height: 38px !important
}

.field-control[type="file"] {
  font-size: 14px !important
}

textarea.field-control {
  min-height: 122px !important;
  line-height: 1.6
}

.field-help {
  font-size: 13px !important;
  line-height: 1.4;
  color: #b3c3d6
}

.privacy-inline {
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px
}

.preview-heading p {
  font-size: 14px;
  color: #b1c3d8
}

.preview-format {
  font-size: 11px;
  color: #b5c8df
}

.canvas-wrap {
  width: min(100%, 525px) !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: 20px;
  padding: 9px;
  border-radius: 16px;
  background: #f3f4f7
}

.export-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 22px auto 0;
  max-width: 590px
}

.export-heading strong {
  color: #fff;
  font-size: 16px;
  letter-spacing: .2px
}

.export-heading span {
  font-size: 14px;
  color: #b4c4d8
}

.export-actions {
  max-width: 590px !important;
  margin-top: 12px;
  gap: 11px !important
}

.export-actions button {
  min-height: 57px !important;
  padding: 12px 11px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 850;
  line-height: 1.25;
  white-space: normal
}

.export-actions button i {
  font-size: 19px;
  margin-right: 4px
}

.download-button {
  background: #ffab75;
  color: #1b2431
}

.pdf-button,
.share-button {
  background: #273c57;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .13)
}

.export-hint {
  font-size: 13px !important;
  line-height: 1.5;
  color: #afc0d6;
  margin-top: 13px
}

.export-help {
  font-size: 13px !important;
  line-height: 1.5;
  max-width: 580px
}

.toast {
  max-width: calc(100vw - 26px);
  font-size: 14px;
  line-height: 1.45;
  padding: 14px 18px
}

/* Espaço publicitário já acordado: sempre até 100px. */
:root {
  --ad-space: 100px !important
}

body {
  padding-bottom: 100px !important
}

.ad-reserved {
  height: 100px !important;
  max-height: 100px !important;
  overflow: hidden !important
}

.ad-reserved .ad-label {
  font-size: 10px;
  line-height: 1.2
}

@media(min-width:1500px) {
  .tool-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }
}

@media(max-width:1180px) and (min-width:701px) {
  .tv-header {
    display: grid !important;
    grid-template-columns: minmax(210px, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 10px 16px;
    padding: 12px 25px
  }

  .tv-header>.brand {
    grid-column: 1;
    grid-row: 1
  }

  .tv-header>.header-actions {
    grid-column: 2;
    grid-row: 1;
    margin: 0
  }

  .tv-header>.main-nav {
    grid-column: 1/-1;
    grid-row: 2;
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 10px
  }

  .nav-tab {
    min-height: 48px;
    font-size: 15px
  }

  .search-control {
    width: clamp(180px, 26vw, 270px) !important
  }

  .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .workspace-layout {
    grid-template-columns: minmax(290px, .9fr) minmax(330px, 1.1fr);
    gap: 15px
  }

  .hero-art {
    opacity: .7;
    right: -1%
  }
}

@media(max-width:850px) and (min-width:701px) {
  .hero-art {
    opacity: .28
  }

  .hero-content {
    max-width: 82%
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .workspace-layout {
    grid-template-columns: 1fr
  }

  .canvas-wrap {
    max-width: 560px
  }
}

@media(max-width:700px) {
  html {
    scroll-padding-top: 166px
  }

  .tv-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 50px 50px 48px !important;
    gap: 8px !important;
    padding: 9px 13px 11px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important
  }

  .tv-header>.brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    gap: 8px !important
  }

  .brand-mark {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important
  }

  .brand-name {
    font-size: clamp(13px, 3.7vw, 17px) !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .tv-header>.header-actions {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
    min-width: 0 !important
  }

  .install-pwa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px !important;
    height: 42px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    white-space: nowrap
  }

  .install-pwa i {
    font-size: 17px !important
  }

  .privacy-icon {
    min-width: 39px;
    width: 39px !important;
    height: 42px !important;
    border-radius: 12px
  }

  .tv-header>.header-actions>.search-control {
    display: none !important
  }

  .tv-header>.mobile-search-control {
    grid-column: 1/-1 !important;
    grid-row: 2 !important;
    display: flex !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 14px !important;
    background: #18283e !important;
    border-radius: 13px !important;
    border: 1px solid #465973 !important
  }

  .tv-header>.mobile-search-control input {
    display: block !important;
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px;
    color: #fff
  }

  .tv-header>.main-nav {
    grid-column: 1/-1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    overflow: visible !important;
    align-items: center !important
  }

  .tv-header>.main-nav .nav-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 5px !important;
    font-size: clamp(12px, 3.3vw, 15px) !important;
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap
  }

  .tv-header>.main-nav .nav-tab i {
    font-size: 17px !important
  }

  body.is-editing .tv-header {
    grid-template-rows: 50px !important;
    padding-bottom: 9px !important
  }

  body.is-editing .tv-header>.mobile-search-control,
  body.is-editing .tv-header>.main-nav {
    display: none !important
  }

  .pwa-guide {
    width: calc(100% - 20px);
    padding: 12px;
    gap: 9px
  }

  .pwa-guide p {
    font-size: 14px
  }

  .home-view {
    padding-inline: 13px !important
  }

  .feature-hero {
    min-height: 0 !important;
    margin: 13px 0 29px !important;
    padding: 25px 22px 26px !important;
    border-radius: 20px !important;
    overflow: hidden;
    align-items: flex-start
  }

  .feature-hero .hero-art {
    opacity: .12 !important;
    right: -40px !important;
    transform: translateY(-50%) scale(.9) !important
  }

  .hero-content {
    max-width: 100% !important;
    z-index: 5
  }

  .hero-content h1 {
    font-size: clamp(33px, 8.1vw, 47px) !important;
    letter-spacing: -1.4px;
    line-height: 1.1;
    max-width: 360px
  }

  .hero-content p {
    font-size: 16px !important;
    line-height: 1.5;
    max-width: 380px
  }

  .hero-cta {
    min-height: 51px;
    font-size: 15px;
    padding: 10px 15px
  }

  .hero-steps {
    margin-top: 20px;
    gap: 7px
  }

  .hero-steps span {
    font-size: 12px;
    gap: 5px;
    padding: 5px 10px 5px 5px
  }

  .hero-steps b {
    width: 22px;
    height: 22px;
    font-size: 12px
  }

  .hero-steps>i {
    font-size: 10px
  }

  .rail-heading {
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 13px
  }

  .rail-heading h2 {
    font-size: 26px !important
  }

  .section-eyebrow {
    font-size: 10px !important
  }

  .rail-count {
    font-size: 11px
  }

  .rail-count b {
    font-size: 15px
  }

  .grid-toggle {
    font-size: 13px !important;
    min-height: 43px !important;
    padding: 0 11px
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important
  }

  .tool-grid .tool-card {
    min-height: 262px !important;
    border-radius: 17px !important;
    aspect-ratio: auto !important
  }

  .tool-grid .card-art {
    height: 142px !important;
    min-height: 142px !important;
    flex-basis: 142px !important
  }

  .tool-grid .card-symbol {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    font-size: 43px !important
  }

  .tool-grid .card-caption {
    padding: 14px 12px 15px !important;
    gap: 7px
  }

  .tool-grid .card-caption h3 {
    font-size: 16px !important;
    line-height: 1.24
  }

  .tool-grid .card-caption p {
    font-size: 13px !important;
    line-height: 1.35;
    -webkit-line-clamp: 2
  }

  .tool-grid .card-open {
    font-size: 13px;
    gap: 3px
  }

  .tool-grid .card-stamp {
    width: 29px;
    height: 29px;
    top: 10px;
    left: 10px
  }

  .tool-grid .card-index {
    font-size: 11px;
    top: 13px;
    right: 12px
  }

  .site-footer {
    gap: 9px 16px;
    font-size: 12px !important
  }

  .tool-view {
    padding: 15px 13px 35px
  }

  .tool-view-head {
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr)
  }

  .tool-view-title {
    min-width: 0
  }

  .tool-view-icon {
    width: 40px;
    height: 40px;
    font-size: 21px
  }

  .tool-view-title h1 {
    font-size: 22px !important
  }

  .tool-view-title p {
    font-size: 13px !important
  }

  .back-button {
    min-height: 46px;
    font-size: 14px;
    padding: 8px 12px
  }

  .local-badge {
    font-size: 11px
  }

  .workspace-layout {
    grid-template-columns: 1fr !important;
    gap: 15px
  }

  .editor-panel,
  .preview-panel {
    padding: 18px !important;
    border-radius: 17px
  }

  .editor-intro {
    font-size: 14px
  }

  .tool-form {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px
  }

  .field-group:has(textarea),
  .field-group:has(input[type=file]) {
    grid-column: auto !important
  }

  .field-group label {
    font-size: 16px !important
  }

  .field-control {
    font-size: 16px !important;
    min-height: 52px !important
  }

  .preview-heading>div>span {
    font-size: 13px !important
  }

  .preview-heading p {
    font-size: 13px
  }

  .canvas-wrap {
    width: 100% !important;
    max-width: 500px !important;
    max-height: none !important;
    margin-top: 16px !important
  }

  .export-heading {
    margin-top: 19px
  }

  .export-heading strong {
    font-size: 16px
  }

  .export-heading span {
    font-size: 14px
  }

  .export-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px !important
  }

  .export-actions button {
    font-size: 15px !important;
    min-height: 55px !important
  }

  .export-actions #shareButton {
    grid-column: 1/-1
  }

  .export-help,
  .export-hint {
    font-size: 13px !important
  }
}

@media(max-width:360px) {
  .brand-mark {
    width: 33px !important;
    height: 33px !important;
    min-width: 33px !important
  }

  .brand-name {
    font-size: 12px !important
  }

  .install-pwa {
    min-width: 44px;
    padding-inline: 4px !important
  }

  .install-pwa span {
    display: none !important
  }

  .tool-grid {
    grid-template-columns: 1fr !important
  }

  .tool-grid .tool-card {
    min-height: 264px !important
  }

  .tool-grid .card-art {
    height: 160px !important;
    min-height: 160px !important;
    flex-basis: 160px !important
  }

  .tool-grid .card-caption h3 {
    font-size: 18px !important
  }

  .tool-grid .card-caption p {
    font-size: 14px !important
  }

  .rail-heading h2 {
    font-size: 23px !important
  }

  .rail-count {
    display: none
  }

  .hero-steps>i {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {

  .tool-grid .tool-card,
  .nav-tab,
  .tool-grid .card-symbol {
    transition: none !important;
    animation: none !important
  }
}

/* Formato de banner horizontal: evita cortar anúncios em uma caixa de 100px. */
.ad-reserved {
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important
}

.ad-reserved .ad-label {
  display: block;
  flex: 0 0 10px;
  min-height: 10px;
  font-size: 9px;
  line-height: 10px;
  text-align: center
}

.ad-reserved .adsbygoogle {
  display: block;
  width: 728px;
  height: 90px !important;
  max-width: 100%;
  min-height: 0 !important;
  max-height: 90px !important;
  flex: 0 0 auto
}

@media(max-width:799px) {
  .ad-reserved .adsbygoogle {
    width: 320px;
    height: 50px !important;
    max-height: 50px !important
  }
}

/* Melhorias de produtividade — modelos, rascunhos e listas interativas */
.tool-preset-panel {
  margin: 20px 0 16px;
  padding: 17px 18px;
  border: 1px solid #49627e;
  border-radius: 17px;
  background: linear-gradient(135deg, #223957, #172d43);
  color: #fff
}

.tool-preset-panel strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  line-height: 1.4
}

.tool-preset-panel strong i {
  color: #ffd18a;
  font-size: 20px
}

.tool-preset-panel p {
  margin: 5px 0 12px;
  color: #d5e2ed;
  font-size: 14px;
  line-height: 1.5
}

.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px
}

.preset-chip {
  border: 1px solid #71869e;
  background: #f2f6fa;
  color: #20364e;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  font-weight: 800;
  font-size: 14px;
  transition: transform .16s ease, background .16s ease
}

.preset-chip:hover,
.preset-chip:focus-visible {
  background: #ffcf9d;
  color: #243248;
  transform: translateY(-1px)
}

.tool-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 17px 0 0
}

.draft-status {
  display: flex;
  align-items: center;
  max-width: 330px;
  color: #adc4d8;
  font-size: 13px;
  line-height: 1.5
}

.tool-edit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.tool-edit-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #273951;
  color: #f1f5fa;
  border: 1px solid #405875;
  border-radius: 10px;
  min-height: 43px;
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 750
}

.tool-edit-buttons button:hover {
  background: #38506b
}

.quick-item-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 6px
}

.quick-item-add input {
  min-width: 0;
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid #49607c;
  background: #081524;
  color: #fff;
  font-size: 16px;
  padding: 9px 12px
}

.quick-item-add button {
  min-width: 117px;
  border: 0;
  border-radius: 10px;
  background: #ffb382;
  color: #172235;
  font-weight: 850;
  font-size: 14px;
  padding: 8px 12px
}

.inline-list-checklist {
  margin: 12px 0 0;
  border: 1px solid #344b64;
  border-radius: 13px;
  background: #0f1c2d;
  overflow: hidden
}

.inline-list-caption {
  font-size: 13px;
  color: #bacee1;
  line-height: 1.4;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #30455f
}

.inline-list-caption strong {
  color: #fff
}

.inline-list-rows {
  display: grid;
  gap: 0;
  max-height: 330px;
  overflow-y: auto;
  scrollbar-width: thin
}

.inline-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #263950;
  cursor: pointer;
  min-height: 47px;
  color: #f0f5fc;
  font-size: 15px;
  line-height: 1.4
}

.inline-list-row:last-child {
  border-bottom: 0
}

.inline-list-row:hover {
  background: #1b314a
}

.inline-list-row input {
  appearance: auto;
  accent-color: #ffab75;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  cursor: pointer
}

.inline-list-row.is-done span {
  text-decoration: line-through;
  color: #8294a9
}

.habit-tracker-controls {
  margin-top: 16px;
  max-width: 100%
}

.habit-grid-wrapper {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #334d66;
  border-radius: 13px;
  background: #0d1a2c;
  padding: 10px;
  overscroll-behavior-x: contain
}

.habit-grid {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) repeat(var(--habit-days), minmax(27px, 1fr));
  align-items: center;
  gap: 3px;
  width: max-content;
  min-width: 100%
}

.habit-day-label {
  font-size: 11px;
  text-align: center;
  color: #c1cfdf;
  font-weight: 750
}

.habit-name-title,
.habit-name {
  padding: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #f6f9fc;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px
}

.habit-name {
  font-weight: 600
}

.habit-check {
  width: 22px;
  height: 22px;
  margin: auto;
  cursor: pointer;
  accent-color: #ffac7d
}

.photo-alert {
  max-width: 590px;
  margin: 15px auto 0;
  background: #40311f;
  color: #ffe0ae;
  border: 1px solid #8e6842;
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4
}

@media(max-width:700px) {
  .tool-preset-panel {
    padding: 14px;
    margin-top: 16px
  }

  .tool-preset-panel strong {
    font-size: 16px
  }

  .tool-preset-panel p {
    font-size: 13px
  }

  .preset-chip {
    font-size: 13px;
    padding: 9px 13px;
    min-height: 44px
  }

  .tool-edit-actions {
    align-items: stretch;
    flex-direction: column
  }

  .tool-edit-buttons button {
    font-size: 14px;
    min-height: 44px
  }

  .quick-item-add {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px
  }

  .quick-item-add button {
    min-width: 102px;
    font-size: 13px;
    padding-inline: 8px
  }

  .habit-grid {
    min-width: max-content
  }
}

/* Prévia ampla e legível no computador: nenhuma miniatura forçada por altura de viewport. */
.canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain
}

/* Elementos essenciais continuam reconhecíveis sem fonte de ícones externa. */
.tool-grid .card-symbol {
  display: grid;
  place-items: center;
  font-family: system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif !important;
  line-height: 1.1 !important;
  user-select: none
}

.tool-grid .card-stamp {
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 850;
  color: #fff
}

.tool-view-icon {
  font-family: system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
  line-height: 1;
}

.brand-mark {
  font-family: system-ui, sans-serif;
  color: #fff;
  font-size: 25px;
  font-weight: 800
}

.hero-tile>span {
  font-size: 38px;
  line-height: 1.2
}

.install-pwa b {
  font-weight: 900;
  font-size: 22px;
  line-height: 1
}

.privacy-icon span {
  font-size: 21px;
  line-height: 1
}

@media(max-width:700px) {
  .tv-header>.header-actions .install-pwa {
    width: auto !important;
    min-width: 78px !important;
    gap: 5px !important;
    padding: 0 8px !important
  }

  .tv-header>.header-actions .install-pwa span {
    display: inline !important;
    font-size: 12px !important
  }

  .brand-name {
    min-width: 0 !important
  }
}

@media(max-width:390px) {
  .tv-header>.header-actions .install-pwa {
    width: auto !important;
    min-width: 74px !important;
    padding: 0 6px !important
  }

  .tv-header>.header-actions .install-pwa span {
    display: inline !important;
    font-size: 11px !important
  }

  .tv-header>.brand .brand-name {
    max-width: 125px !important
  }
}

@media(max-width:345px) {
  .tv-header>.brand .brand-name {
    max-width: 92px !important
  }

  .tv-header>.header-actions .install-pwa {
    min-width: 69px !important
  }
}


/* ===== Brand sizing refinement ===== */
.brand {
  align-items: center
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 26px;
  flex: 0 0 44px
}

.brand-name {
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.05px;
  white-space: nowrap
}

@media (max-width:900px) {
  .brand-mark {
    width: 40px;
    height: 40px;
    font-size: 24px;
    flex-basis: 40px
  }

  .brand-name {
    font-size: 23px
  }
}

@media (max-width:700px) {
  .brand-mark {
    width: 36px;
    height: 36px;
    font-size: 21px;
    flex-basis: 36px
  }

  .brand-name {
    font-size: 18px;
    line-height: 1
  }
}

@media (max-width:390px) {
  .brand-name {
    font-size: 16px
  }
}


/* ===== Ferramentas de automação: destaque para copiar e reutilizar ===== */
.copy-result-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: min(100%, 560px);
  min-height: 50px;
  margin: 17px auto 0;
  padding: 13px 18px;
  border: 1px solid #8ad1b9;
  border-radius: 13px;
  background: linear-gradient(135deg, #237e69, #1d615c);
  color: #ffffff;
  font-size: 16px;
  font-weight: 850;
  box-shadow: 0 8px 22px rgba(10, 92, 70, .25);
  transition: filter .18s, transform .18s;
}

.copy-result-button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px)
}

.copy-result-button:focus-visible {
  outline: 3px solid #b3f4df;
  outline-offset: 3px
}

.tool-grid .card-open {
  font-size: clamp(12px, 1vw, 14px)
}

@media(max-width:700px) {
  .copy-result-button {
    min-height: 50px;
    font-size: 15px;
    margin-top: 14px
  }

  .tool-grid .card-open {
    font-size: 13px
  }
}


/* Criação autoral: controles claros e sem conteúdo induzido. */
.tool-preset-panel[hidden] {
  display: none !important
}

.copy-result-button:disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.3)
}

.editor-intro {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: #cfdef0
}

.field-control::placeholder {
  color: #a8b8cc;
  opacity: 1
}

.field-help {
  font-size: 12px;
  color: #b8c7d9
}

@media(max-width:700px) {
  .editor-intro {
    font-size: 14px
  }

  .field-help {
    font-size: 12px
  }
}

/* =======================================================
   EasyMenuOnline v80 | 3 categorias, wizard e arcade
   ======================================================= */
:root {
  --ad-space: 100px !important
}

body {
  padding-bottom: 100px !important
}

.ad-reserved {
  height: 100px !important;
  max-height: 100px !important
}

.brand-name {
  font-size: clamp(26px, 2vw, 31px) !important;
  line-height: 1.12 !important;
  letter-spacing: -1.3px !important;
  font-weight: 900 !important;
  max-width: none !important
}

.brand-mark {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border-radius: 15px !important;
  font-size: 29px !important
}

.nav-tab {
  font-size: clamp(13px, 1.15vw, 16px) !important;
  padding-inline: 14px !important
}

.tool-card .card-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 850
}

.tool-card[data-tool="video"] .card-art {
  background: linear-gradient(145deg, #374c92, #9f6cdd)
}

.tool-card[data-tool="whatsapp"] .card-art {
  background: linear-gradient(145deg, #127760, #2dbb7c)
}

.tool-card[data-tool="cobra"] .card-art,
.tool-card[data-tool="velha"] .card-art,
.tool-card[data-tool="rebote"] .card-art {
  background: linear-gradient(150deg, #122f49, #4279ad)
}

/* Wizard — uma pergunta visível por vez, com navegação livre. */
.wizard-progress {
  margin: 22px 0 0
}

.wizard-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #e9f1ff;
  font-size: 15px;
  font-weight: 850
}

.wizard-progress-top span:last-child {
  color: #ffb781
}

.wizard-track {
  height: 9px;
  background: #0b192a;
  border-radius: 99px;
  margin-top: 11px;
  overflow: hidden;
  border: 1px solid #34475e
}

#wizardTrackFill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ff945f, #ffd4aa);
  border-radius: 99px;
  transition: width .22s
}

#toolForm {
  display: block !important;
  min-height: 235px;
  max-width: 100%;
  margin: 15px 0 0 !important
}

#toolForm>.field-group {
  padding: 24px 18px 25px;
  background: #1b2b41;
  border: 1px solid #405a78;
  border-radius: 18px;
  animation: wizardFade .2s ease-out
}

#toolForm>.field-group[hidden] {
  display: none !important
}

#toolForm>.field-group label {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  line-height: 1.4 !important;
  color: #fff !important;
  display: block;
  margin-bottom: 15px
}

#toolForm>.field-group .field-control {
  width: 100%;
  min-height: 54px;
  font-size: 17px !important;
  padding: 13px 15px;
  border: 2px solid #56708d;
  background: #081727;
  color: #f6f9ff;
  border-radius: 12px
}

#toolForm>.field-group textarea.field-control {
  min-height: 160px;
  line-height: 1.6
}

#toolForm>.field-group .field-control[type="color"] {
  min-height: 60px;
  padding: 6px
}

#toolForm>.field-group .field-control[type="file"] {
  padding: 14px;
  cursor: pointer
}

#toolForm>.field-group .field-help {
  font-size: 13px !important;
  line-height: 1.55;
  margin-top: 9px;
  color: #c3d1e2
}

.wizard-controls {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 11px;
  margin-top: 17px
}

.wizard-controls button,
.link-action-panel button {
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid #4d6480;
  padding: 11px;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer
}

.wizard-previous {
  color: #ebf3ff;
  background: #263953
}

.wizard-previous:disabled {
  opacity: .4;
  cursor: default
}

.wizard-next {
  background: linear-gradient(120deg, #ffb783, #ff8d63);
  border: none !important;
  color: #182235
}

.link-action-panel {
  padding: 20px;
  margin-top: 15px;
  border: 1px solid #476482;
  border-radius: 14px;
  background: #16263b;
  color: #e2effc;
  font-size: 15px
}

.link-action-panel .wizard-next {
  width: 100%
}

.link-action-panel .field-help {
  color: #c9d9eb
}

.multi-photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px
}

.multi-photo-gallery span {
  color: #c7ffe6;
  border: 1px solid #3b9370;
  border-radius: 999px;
  background: #14533e;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800
}

@keyframes wizardFade {
  from {
    opacity: .4;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* Games — accessible controls for desktop, TV and mobile. */
.game-panel {
  width: min(1180px, 100%);
  margin: 18px auto 36px;
  padding: clamp(14px, 3vw, 35px);
  border: 1px solid #375578;
  border-radius: 23px;
  background: linear-gradient(145deg, #13243b, #101b2d);
  box-shadow: 0 20px 65px #0003
}

.game-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px
}

.game-top h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 36px);
  margin: 7px 0
}

.game-top p {
  font-size: 16px;
  color: #cad8e8;
  line-height: 1.5;
  margin: 0
}

#gameScore {
  font-size: 15px;
  color: #ffcd96;
  line-height: 1.4;
  text-align: right
}

#gameCanvas {
  display: block;
  width: min(100%, 900px);
  aspect-ratio: 720/460;
  height: auto;
  touch-action: none;
  border-radius: 18px;
  border: 3px solid #547596;
  box-shadow: 0 16px 35px #0004;
  margin: 0 auto;
  background: #0e223a;
  outline-offset: 4px
}

.game-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px
}

.game-buttons button {
  font-size: 16px;
  font-weight: 800;
  border-radius: 12px;
  min-height: 49px;
  padding: 10px 19px;
  color: #fff;
  background: #2e4663;
  border: 1px solid #627d9b
}

.game-pad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px auto 6px
}

.game-pad button {
  display: grid;
  place-items: center;
  min-width: 62px;
  min-height: 62px;
  border: 1px solid #7794b5;
  border-radius: 16px;
  background: #28425f;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  touch-action: manipulation;
  user-select: none
}

.game-pad button:active {
  background: #ffac7d;
  color: #1d2d43
}

.game-help {
  text-align: center;
  font-size: 13px;
  color: #a8bdd4;
  line-height: 1.5
}

.game-panel[hidden],
.workspace-layout[hidden],
#previewPanel[hidden],
.link-action-panel[hidden] {
  display: none !important
}

.export-actions [hidden] {
  display: none !important
}

/* Header: no overlap at narrow widths, brand same visual height as mark. */
@media (max-width:1140px) and (min-width:701px) {
  .tv-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 52px 52px !important;
    gap: 8px 12px !important;
    padding: 11px 23px !important;
    height: auto !important
  }

  .tv-header>.brand {
    grid-row: 1;
    grid-column: 1
  }

  .tv-header>.header-actions {
    grid-row: 1;
    grid-column: 2
  }

  .tv-header>.main-nav {
    grid-row: 2;
    grid-column: 1/-1;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    justify-content: flex-start
  }
}

@media (max-width:700px) {
  .tv-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 9px !important;
    padding: 12px 13px 11px !important;
    min-height: 0 !important;
    height: auto !important
  }

  .tv-header>.brand {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: center;
    min-width: 0 !important;
    width: 100%;
    gap: 8px !important
  }

  .tv-header>.brand .brand-mark {
    width: 39px !important;
    height: 39px !important;
    flex: 0 0 39px !important;
    border-radius: 12px !important;
    font-size: 25px !important
  }

  .tv-header>.brand .brand-name {
    font-size: clamp(27px, 8.8vw, 35px) !important;
    line-height: 39px !important;
    letter-spacing: -1.4px !important;
    font-weight: 950 !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important
  }

  .tv-header>.header-actions {
    grid-row: 2 !important;
    grid-column: 1 !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 9px;
    min-width: 0
  }

  .tv-header>.header-actions .search-control {
    display: none !important
  }

  .tv-header>.mobile-search-control {
    grid-row: 3 !important;
    grid-column: 1 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 49px
  }

  .tv-header>.main-nav {
    grid-row: 4 !important;
    grid-column: 1 !important;
    width: 100% !important;
    display: flex !important;
    min-width: 0 !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
    scrollbar-width: thin
  }

  .tv-header>.main-nav .nav-tab {
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 45px !important;
    padding: 0 11px !important;
    font-size: 14px !important
  }

  body.is-editing .tv-header {
    grid-template-rows: auto auto !important
  }

  body.is-editing .tv-header>.mobile-search-control,
  body.is-editing .tv-header>.main-nav {
    display: none !important
  }

  .game-top {
    flex-direction: column;
    align-items: start
  }

  #gameScore {
    text-align: left
  }

  .game-pad button {
    min-width: 55px;
    min-height: 57px
  }

  .wizard-controls {
    grid-template-columns: 1fr 1.45fr
  }

  .wizard-controls button {
    font-size: 14px;
    padding: 8px
  }

  #toolForm>.field-group {
    padding: 18px 14px 22px
  }

  #toolForm>.field-group label {
    font-size: 19px !important
  }
}

@media(max-width:360px) {
  .tv-header>.brand .brand-name {
    font-size: clamp(25px, 8.2vw, 30px) !important;
    letter-spacing: -1.5px !important
  }

  .tv-header>.brand .brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important
  }

  .tv-header>.main-nav .nav-tab {
    font-size: 13px !important
  }

  .game-pad {
    gap: 7px
  }

  .game-pad button {
    min-width: 52px;
    min-height: 53px;
    font-size: 23px
  }
}

@media(prefers-reduced-motion:reduce) {
  #toolForm>.field-group {
    animation: none
  }

  .wizard-track #wizardTrackFill {
    transition: none
  }
}

/* Every category is visible without horizontal scrolling on mobile. */
@media (max-width:700px) {
  .tv-header>.main-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 46px) !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
    height: auto !important;
    overflow: visible !important;
  }

  .tv-header>.main-nav .nav-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    overflow: hidden !important;
    font-size: 14px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .tv-header>.mobile-search-control input::placeholder {
    color: #b4c5d9 !important;
    opacity: 1 !important
  }
}

@media(max-width:350px) {
  .tv-header>.main-nav .nav-tab {
    font-size: 13px !important
  }
}

@media(max-width:360px) {
  .tv-header>.brand .brand-name {
    font-size: clamp(28px, 8.9vw, 31px) !important
  }
}

.multi-photo-gallery figure {
  margin: 0;
  display: grid;
  gap: 5px;
  justify-items: center;
  max-width: 105px;
  padding: 7px;
  background: #0e2035;
  border: 1px solid #49627f;
  border-radius: 12px
}

.multi-photo-gallery img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 8px;
  background: #203952
}

.multi-photo-gallery figcaption {
  font-size: 12px;
  color: #d7f8e7;
  font-weight: 800
}


/* ===============================================================
   v81 — Wizard exclusivo primeiro; resultado limpo somente no fim.
   Desktop: ações laterais. Mobile: resultado acima das ações.
   =============================================================== */
.workspace-layout[data-stage="wizard"] {
  display: block !important;
  width: min(720px, 100%) !important;
  max-width: 100%;
  margin: clamp(18px, 3vw, 36px) auto 36px !important;
}

.workspace-layout[data-stage="wizard"] .editor-panel {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  padding: clamp(22px, 3vw, 40px) !important;
}

.workspace-layout[data-stage="wizard"] .preview-panel {
  display: none !important
}

.wizard-stage-title {
  font-size: clamp(26px, 3vw, 36px);
  color: #fff;
  letter-spacing: -.8px;
  margin: 23px 0 8px
}

.workspace-layout[data-stage="result"] {
  width: 100% !important;
  margin: 0 auto 36px !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) !important;
  align-items: start !important;
  gap: clamp(14px, 2vw, 26px) !important;
}

.workspace-layout[data-stage="result"] .editor-panel {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100% !important;
  position: sticky;
  top: 100px;
  padding: clamp(20px, 2.4vw, 32px) !important;
}

.workspace-layout[data-stage="result"] .preview-panel {
  grid-column: 2;
  grid-row: 1;
  position: static !important;
  min-width: 0;
  width: 100% !important;
  padding: clamp(10px, 1.8vw, 24px) !important;
}

.workspace-layout[data-stage="result"] .preview-panel .canvas-wrap {
  width: min(100%, 660px) !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto !important;
}

.workspace-layout[data-stage="result"] .canvas-wrap canvas {
  height: auto !important;
  width: 100% !important;
  max-height: none !important;
  display: block
}

.result-actions-panel {
  display: grid;
  gap: 14px
}

.result-stage-title {
  font-size: clamp(26px, 2.5vw, 33px);
  font-weight: 900;
  letter-spacing: -.8px;
  color: #fff;
  margin: 4px 0 0;
  line-height: 1.18
}

.result-stage-description {
  color: #c1d2e4;
  font-size: 15px;
  line-height: 1.55;
  margin: 0
}

.edit-wizard-button {
  border: 1px solid #7191b3;
  background: #29425f;
  color: #fff;
  border-radius: 13px;
  min-height: 54px;
  font-size: 16px;
  font-weight: 850;
  padding: 12px 15px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.edit-wizard-button:hover {
  background: #345376
}

.result-actions-panel .export-heading {
  margin: 14px 0 0;
  max-width: 100%
}

.result-actions-panel .export-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  max-width: none
}

.result-actions-panel .export-actions button {
  min-height: 54px;
  font-size: 14px;
  padding: 12px 8px;
  white-space: normal
}

.result-actions-panel #shareButton,
.result-actions-panel #downloadVideoButton {
  grid-column: 1/-1
}

.result-actions-panel .copy-result-button {
  max-width: none;
  width: 100%;
  margin: 0
}

.result-actions-panel .export-hint,
.result-actions-panel .export-help {
  font-size: 13px;
  text-align: left;
  margin: 10px 0 0;
  line-height: 1.5
}

.result-actions-panel .result-privacy-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: #98cdb5;
  line-height: 1.5
}

.result-actions-panel .photo-alert {
  margin: 2px 0 0;
  max-width: none
}

.result-actions-panel .link-action-panel {
  margin-top: 6px
}

.workspace-layout[data-stage="result"].is-link-result {
  display: block !important;
  max-width: 720px !important;
  margin: 18px auto 35px !important
}

.workspace-layout[data-stage="result"].is-link-result .editor-panel {
  position: static !important
}

.workspace-layout[data-stage="result"].is-link-result .preview-panel {
  display: none !important
}

@media(max-width:850px) {
  .workspace-layout[data-stage="result"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .workspace-layout[data-stage="result"] .preview-panel {
    order: 1 !important;
    width: 100% !important;
    position: static !important;
  }

  .workspace-layout[data-stage="result"] .editor-panel {
    order: 2 !important;
    width: 100% !important;
    position: static !important;
  }

  .workspace-layout[data-stage="result"] .preview-panel .canvas-wrap {
    max-width: 550px !important
  }

  .workspace-layout[data-stage="wizard"] {
    margin: 14px auto 25px !important
  }
}

@media(max-width:700px) {
  .workspace-layout[data-stage="wizard"] .editor-panel {
    padding: 20px 16px !important
  }

  .wizard-stage-title {
    font-size: 27px
  }

  .workspace-layout[data-stage="result"] .preview-panel {
    padding: 10px !important
  }

  .workspace-layout[data-stage="result"] .editor-panel {
    padding: 20px !important
  }

  .result-actions-panel .export-actions button {
    min-height: 51px;
    font-size: 14px !important
  }

  .result-stage-description {
    font-size: 15px
  }
}

/* Keep hidden workspace hidden for game tools even when previous stage was result. */
#workspaceLayout[hidden],
#previewPanel[hidden],
#wizardStage[hidden],
#resultActionsPanel[hidden],
#linkActionPanel[hidden],
#exportActionsGroup[hidden] {
  display: none !important;
}


/* ==============================================================
   v82 — Experiência imersiva: somente VOLTAR + app selecionado.
   Nenhum cabeçalho, catálogo, rodapé ou anúncio durante o uso.
   O modo de tela cheia é limitado à área do navegador para
   preservar a navegação nativa e evitar permissões adicionais.
   ============================================================== */
html:has(body.app-focus-mode) {
  scroll-behavior: auto !important;
  overflow: hidden !important;
  height: 100%;
}

body.app-focus-mode {
  margin: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  padding: 0 !important;
  overscroll-behavior: none;
}

body.app-focus-mode>.tv-header,
body.app-focus-mode>#homeView,
body.app-focus-mode>.ad-reserved,
body.app-focus-mode>.pwa-guide,
body.app-focus-mode>.site-footer {
  display: none !important;
}

body.app-focus-mode #toolView {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at top right, #14243b 0, #0a1220 56%, #090e17 100%);
  box-sizing: border-box !important;
  animation: none !important;
  scroll-padding-top: 80px;
}

body.app-focus-mode #toolView[hidden] {
  display: none !important;
}

body.app-focus-mode #toolView .tool-view-head {
  box-sizing: border-box !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 110 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: 72px !important;
  height: 72px !important;
  margin: 0 !important;
  padding: 10px clamp(14px, 3vw, 44px) !important;
  border-bottom: 1px solid rgba(156, 184, 214, .14) !important;
  background: rgba(9, 16, 28, .95) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

body.app-focus-mode #toolView .tool-view-title,
body.app-focus-mode #toolView .local-badge {
  display: none !important;
}

body.app-focus-mode #toolView .back-button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 120px !important;
  min-height: 50px !important;
  padding: 10px 20px !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  border: 1px solid #526e8a !important;
  border-radius: 14px !important;
  background: #20344f !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-focus-mode #toolView .back-button:hover,
body.app-focus-mode #toolView .back-button:focus-visible {
  background: #315276 !important;
  border-color: #88abd0 !important;
}

/* Wizard is the whole experience before the final preview. */
body.app-focus-mode #workspaceLayout[data-stage="wizard"] {
  width: min(760px, calc(100% - 28px)) !important;
  min-height: calc(100dvh - 110px) !important;
  margin: 22px auto 24px !important;
}

body.app-focus-mode #workspaceLayout[data-stage="wizard"] .editor-panel {
  width: 100% !important;
  box-shadow: 0 16px 52px rgba(0, 0, 0, .20);
}

body.app-focus-mode #workspaceLayout[data-stage="result"] {
  width: min(1500px, calc(100% - 32px)) !important;
  min-height: calc(100dvh - 96px) !important;
  margin: 18px auto 24px !important;
}

body.app-focus-mode #workspaceLayout[data-stage="result"] .editor-panel {
  top: calc(72px + 18px) !important;
}

body.app-focus-mode #workspaceLayout[data-stage="result"] .preview-panel .canvas-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.app-focus-mode #workspaceLayout[data-stage="result"] .canvas-wrap canvas {
  width: auto !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 150px) !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Arcade: expand the game area to the entire available viewport. */
body.app-focus-mode.is-playing #gamePanel {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.8vh, 14px) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  padding: clamp(10px, 1.8vh, 20px) clamp(12px, 3vw, 40px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(ellipse at 52% 36%, #17314b 0%, #0c1a2b 65%, #090f1a 100%) !important;
  box-shadow: none !important;
}

body.app-focus-mode.is-playing #gamePanel .game-top {
  width: min(1200px, 100%);
  margin: 0 !important;
  flex: 0 0 auto;
}

body.app-focus-mode.is-playing #gamePanel .game-top h2 {
  font-size: clamp(20px, 2.8vw, 30px) !important;
  margin: 2px 0 3px !important;
}

body.app-focus-mode.is-playing #gamePanel .game-top p {
  font-size: clamp(12px, 1.5vw, 15px) !important;
}

body.app-focus-mode.is-playing #gameCanvas {
  display: block !important;
  flex: 0 1 auto !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 1220px) !important;
  max-height: calc(100dvh - 330px) !important;
  aspect-ratio: 720/460 !important;
  object-fit: contain !important;
  border: 2px solid #6386ac !important;
  border-radius: 15px !important;
  margin: 0 auto !important;
}

body.app-focus-mode.is-playing #gamePanel .game-buttons,
body.app-focus-mode.is-playing #gamePanel .game-pad {
  flex: 0 0 auto;
  margin: 0 !important;
}

body.app-focus-mode.is-playing #gamePanel .game-help {
  flex: 0 0 auto;
  max-width: 80ch;
  font-size: 12px !important;
  margin: 0 !important;
}

/* Inputs in the wizard use the available screen, even on small devices. */
@media (max-width:850px) {
  body.app-focus-mode #workspaceLayout[data-stage="result"] {
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    margin: 12px auto 22px !important;
  }

  body.app-focus-mode #workspaceLayout[data-stage="result"] .editor-panel {
    top: auto !important;
  }

  body.app-focus-mode #workspaceLayout[data-stage="result"] .canvas-wrap canvas {
    max-height: min(65dvh, 720px) !important;
  }
}

@media(max-width:700px) {
  body.app-focus-mode #toolView .tool-view-head {
    min-height: 60px !important;
    height: 60px !important;
    padding: 7px 12px !important;
  }

  body.app-focus-mode #toolView .back-button {
    min-width: 106px !important;
    min-height: 44px !important;
    padding: 8px 15px !important;
    font-size: 15px !important;
  }

  body.app-focus-mode #workspaceLayout[data-stage="wizard"] {
    width: calc(100% - 20px) !important;
    min-height: calc(100dvh - 84px) !important;
    margin: 12px auto !important;
  }

  body.app-focus-mode.is-playing #gamePanel {
    min-height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    gap: 9px !important;
    padding: 10px 10px 16px !important;
  }

  body.app-focus-mode.is-playing #gameCanvas {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 305px) !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-top {
    gap: 7px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-top h2 {
    font-size: 21px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-top p {
    font-size: 12px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-top .section-eyebrow,
  body.app-focus-mode.is-playing #gamePanel .game-help {
    display: none !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-buttons button {
    min-height: 42px !important;
    padding: 7px 13px !important;
    font-size: 13px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad {
    gap: 7px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    justify-content: center !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad button {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    max-width: 80px !important;
    min-height: 52px !important;
    padding: 4px !important;
    font-size: 22px !important;
  }
}

/* On short landscape screens, keep the game large and put controls beside it. */
@media (orientation:landscape) and (max-height:560px) and (min-width:600px) {
  body.app-focus-mode #toolView .tool-view-head {
    height: 52px !important;
    min-height: 52px !important;
    padding-block: 4px !important;
  }

  body.app-focus-mode #toolView .back-button {
    min-height: 42px !important;
  }

  body.app-focus-mode.is-playing #gamePanel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 235px) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    min-height: calc(100dvh - 52px) !important;
    padding: 7px 12px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-top {
    grid-column: 1/-1;
    grid-row: 1;
    flex-direction: row !important;
    align-items: center !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-top p {
    display: none !important;
  }

  body.app-focus-mode.is-playing #gameCanvas {
    grid-column: 1 !important;
    grid-row: 2/4 !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 112px) !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-buttons {
    grid-column: 2;
    grid-row: 2;
    display: flex !important;
    flex-wrap: wrap !important;
    align-self: end;
    gap: 6px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-buttons button {
    min-height: 38px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad {
    grid-column: 2;
    grid-row: 3;
    flex-wrap: wrap !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad button {
    flex: 0 0 29% !important;
    max-width: none !important;
    min-height: 43px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-help {
    display: none !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  body.app-focus-mode #toolView {
    scroll-behavior: auto !important;
  }
}

/* Desktop arcade: canvas dominante, comandos na lateral, sem cortar controles. */
@media (min-width:960px) and (min-height:650px) {
  body.app-focus-mode.is-playing #gamePanel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    column-gap: clamp(16px, 2.5vw, 34px) !important;
    row-gap: 12px !important;
    padding: clamp(14px, 2.4vh, 26px) clamp(18px, 3vw, 40px) !important;
    align-items: center !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-top {
    grid-column: 1/-1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  body.app-focus-mode.is-playing #gameCanvas {
    grid-column: 1 !important;
    grid-row: 2/4 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 242px) !important;
    justify-self: center !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-buttons {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    align-self: end !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-help {
    display: none !important;
  }
}

@media (orientation:landscape) and (max-height:560px) and (min-width:600px) {
  body.app-focus-mode.is-playing #gameCanvas {
    max-height: calc(100dvh - 158px) !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad button {
    min-height: 36px !important;
    font-size: 20px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-buttons button {
    min-height: 35px !important;
  }
}


/* ================================================================
   v83 — Marca empilhada, wizard dentro do viewport e jogos LANDSCAPE
   ================================================================ */
/* O nome passa a ocupar a mesma altura visual do ícone. */
.tv-header>.brand .brand-name {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: .94 !important;
  letter-spacing: -.8px !important;
  white-space: normal !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.tv-header>.brand .brand-name>span {
  display: block;
  white-space: nowrap
}

@media (max-width:700px) {
  .tv-header>.brand .brand-name {
    font-size: 20px !important;
    line-height: .95 !important;
    letter-spacing: -.7px !important;
  }
}

@media (max-width:360px) {
  .tv-header>.brand .brand-name {
    font-size: 19px !important;
  }
}

/* Wizard imersivo: sem extrapolar largura ou altura da janela. A
   pergunta rola dentro do painel se o teclado/tela limitar espaço. */
body.app-focus-mode:not(.is-playing) #workspaceLayout[data-stage="wizard"] {
  box-sizing: border-box !important;
  display: block !important;
  width: min(780px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  height: calc(100dvh - 72px - 20px - env(safe-area-inset-bottom, 0px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 72px - 20px - env(safe-area-inset-bottom, 0px)) !important;
  margin: 10px auto !important;
  overflow: hidden !important;
}

body.app-focus-mode:not(.is-playing) #workspaceLayout[data-stage="wizard"] .editor-panel {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding: clamp(12px, 2vh, 22px) clamp(12px, 2.5vw, 26px) !important;
}

body.app-focus-mode #wizardStage:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.app-focus-mode #wizardStage>.panel-heading,
body.app-focus-mode #wizardStage>.wizard-progress,
body.app-focus-mode #wizardStage>.wizard-controls,
body.app-focus-mode #wizardStage>.wizard-stage-title,
body.app-focus-mode #wizardStage>.editor-intro,
body.app-focus-mode #wizardStage>.tool-preset-panel,
body.app-focus-mode #wizardStage>.tool-edit-actions,
body.app-focus-mode #wizardStage>.privacy-inline {
  flex: 0 0 auto !important;
}

body.app-focus-mode #wizardStage>.wizard-stage-title {
  font-size: clamp(21px, 3vh, 28px) !important;
  margin: clamp(5px, 1vh, 10px) 0 3px !important;
  line-height: 1.08 !important;
}

body.app-focus-mode #wizardStage>.editor-intro {
  margin: 3px 0 6px !important;
  font-size: clamp(12px, 1.7vh, 15px) !important;
  line-height: 1.35 !important;
}

body.app-focus-mode #wizardStage>.tool-edit-actions {
  margin: 4px 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

body.app-focus-mode #wizardStage>.wizard-progress {
  margin: 6px 0 1px !important;
}

body.app-focus-mode #wizardStage>.wizard-progress .wizard-track {
  margin-top: 5px !important;
  height: 6px !important;
}

body.app-focus-mode #wizardStage>.wizard-progress .wizard-progress-top {
  font-size: 12px !important;
}

body.app-focus-mode #wizardStage>#toolForm {
  flex: 1 1 auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 8px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

body.app-focus-mode #wizardStage #toolForm>.field-group {
  max-width: 100% !important;
  margin: 0 !important;
  padding: clamp(10px, 2vh, 20px) !important;
}

body.app-focus-mode #wizardStage #toolForm>.field-group label {
  margin-bottom: 8px !important;
}

body.app-focus-mode #wizardStage>.wizard-controls {
  position: relative !important;
  z-index: 1 !important;
  margin: 6px 0 0 !important;
}

body.app-focus-mode #wizardStage>.wizard-controls button {
  min-height: clamp(42px, 6.5vh, 55px) !important;
  padding: 7px 11px !important;
}

body.app-focus-mode #wizardStage>.privacy-inline {
  font-size: 11px !important;
  line-height: 1.25 !important;
  margin: 7px 0 0 !important;
  padding: 5px 8px !important;
}

@media (max-height:570px) {
  body.app-focus-mode #wizardStage>.panel-heading {
    display: none !important;
  }

  body.app-focus-mode #wizardStage>.editor-intro {
    display: none !important;
  }

  body.app-focus-mode #wizardStage>.tool-edit-actions {
    display: none !important;
  }

  body.app-focus-mode #wizardStage>.privacy-inline {
    display: none !important;
  }

  body.app-focus-mode #wizardStage>.wizard-stage-title {
    font-size: 20px !important;
  }

  body.app-focus-mode #wizardStage #toolForm>.field-group label {
    font-size: 17px !important;
  }
}

@media(max-width:700px) {
  body.app-focus-mode:not(.is-playing) #workspaceLayout[data-stage="wizard"] {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    height: calc(100dvh - 60px - 12px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 60px - 12px - env(safe-area-inset-bottom, 0px)) !important;
    margin: 6px auto !important;
  }

  body.app-focus-mode #wizardStage>.privacy-inline {
    font-size: 10px !important;
  }
}

/* JOGOS: o tabuleiro é o centro da tela; barra horizontal SEMPRE
   abaixo dele, nunca ao lado, inclusive em tablets e computadores. */
body.app-focus-mode.is-playing {
  --arcade-topbar: 56px;
  --arcade-gap: 6px;
  --arcade-pad: clamp(4px, 1vh, 10px);
}

body.app-focus-mode.is-playing #toolView {
  overflow: hidden !important;
  padding: 0 !important;
}

body.app-focus-mode.is-playing #toolView .tool-view-head {
  box-sizing: border-box !important;
  position: relative !important;
  top: auto !important;
  height: var(--arcade-topbar) !important;
  min-height: var(--arcade-topbar) !important;
  max-height: var(--arcade-topbar) !important;
  padding: 4px 12px !important;
}

body.app-focus-mode.is-playing #toolView .back-button {
  min-width: 98px !important;
  min-height: 42px !important;
  padding: 6px 12px !important;
  font-size: 15px !important;
}

body.app-focus-mode.is-playing #gamePanel {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: var(--arcade-gap) !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: calc(100dvh - var(--arcade-topbar)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--arcade-topbar)) !important;
  margin: 0 !important;
  padding: var(--arcade-pad) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0a1729 !important;
}

body.app-focus-mode.is-playing #gamePanel .game-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: absolute !important;
  top: calc(var(--arcade-pad) + 10px) !important;
  left: calc(var(--arcade-pad) + 10px) !important;
  right: calc(var(--arcade-pad) + 10px) !important;
  z-index: 2 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  pointer-events: none !important;
}

body.app-focus-mode.is-playing #gamePanel .game-top h2,
body.app-focus-mode.is-playing #gamePanel .game-top #gameScore {
  display: inline-block !important;
  color: #fff !important;
  background: rgba(3, 12, 24, .87) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 9px !important;
  padding: 5px 9px !important;
  margin: 0 !important;
  font-size: clamp(12px, 1.6vw, 19px) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  max-width: 50% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.app-focus-mode.is-playing #gamePanel .game-top .section-eyebrow,
body.app-focus-mode.is-playing #gamePanel .game-top p,
body.app-focus-mode.is-playing #gamePanel .game-help {
  display: none !important;
}

body.app-focus-mode.is-playing #gameCanvas {
  grid-column: 1 !important;
  grid-row: 1 !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: fill !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #4e7299 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  touch-action: none !important;
}

body.app-focus-mode.is-playing #gamePanel .game-toolbar {
  grid-column: 1 !important;
  grid-row: 2 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: clamp(4px, .65vw, 9px) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: clamp(49px, 8.2vh, 72px) !important;
  margin: 0 !important;
  padding: 4px clamp(3px, 1vw, 12px) !important;
  background: #142840 !important;
  border: 1px solid #395a7b !important;
  border-radius: 11px !important;
}

body.app-focus-mode.is-playing #gamePanel .game-pad,
body.app-focus-mode.is-playing #gamePanel .game-buttons {
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: none !important;
  align-self: center !important;
  gap: clamp(3px, .5vw, 8px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.app-focus-mode.is-playing #gamePanel .game-pad {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.app-focus-mode.is-playing #gamePanel .game-buttons {
  flex: 0 0 auto !important;
}

body.app-focus-mode.is-playing #gamePanel .game-pad button,
body.app-focus-mode.is-playing #gamePanel .game-buttons button {
  display: grid !important;
  flex: 0 1 auto !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: clamp(34px, 6.5vw, 72px) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: clamp(40px, 6.5vh, 58px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 5px !important;
  border-radius: 10px !important;
  font-size: clamp(19px, 2.2vw, 25px) !important;
  white-space: nowrap !important;
  touch-action: manipulation !important;
}

body.app-focus-mode.is-playing #gamePanel .game-buttons button {
  width: auto !important;
  padding: 3px clamp(7px, 1vw, 15px) !important;
  font-size: clamp(11px, 1vw, 14px) !important;
}

@media (max-height:450px) {
  body.app-focus-mode.is-playing {
    --arcade-topbar: 46px;
    --arcade-pad: 4px;
    --arcade-gap: 4px;
  }

  body.app-focus-mode.is-playing #toolView .back-button {
    min-height: 34px !important;
    padding: 3px 10px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-toolbar {
    height: 47px !important;
    padding: 2px 4px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad button,
  body.app-focus-mode.is-playing #gamePanel .game-buttons button {
    height: 39px !important;
    font-size: 19px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-buttons button {
    font-size: 11px !important;
  }
}

@media(max-width:700px) {
  body.app-focus-mode.is-playing #gamePanel .game-pad button {
    width: clamp(32px, 6.2vw, 54px) !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-buttons button {
    font-size: 11px !important;
  }
}

/* Retrato: vira a interface visualmente para paisagem quando
   o navegador não permite o bloqueio de orientação por software. */
@media(orientation:portrait) {
  body.app-focus-mode.is-playing #toolView {
    position: fixed !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    width: 100dvh !important;
    max-width: none !important;
    height: 100dvw !important;
    min-height: 0 !important;
    max-height: 100dvw !important;
    transform-origin: top left !important;
    transform: rotate(90deg) translateY(-100%) !important;
    overflow: hidden !important;
  }

  body.app-focus-mode.is-playing #gamePanel {
    width: 100% !important;
    height: calc(100% - var(--arcade-topbar)) !important;
    max-height: calc(100% - var(--arcade-topbar)) !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-toolbar {
    height: clamp(44px, 10vw, 60px) !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad button {
    width: clamp(33px, 9vw, 58px) !important;
    height: clamp(36px, 9vw, 48px) !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-buttons button {
    height: clamp(36px, 9vw, 48px) !important;
    font-size: 11px !important;
  }
}

@media(orientation:portrait) and (max-height:650px) {
  body.app-focus-mode.is-playing {
    --arcade-topbar: 46px;
  }
}


/* ==============================================================
   v84: marca e botões lado a lado; controles nativos por dispositivo
   ============================================================== */
@media (max-width:700px) {
  .tv-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: minmax(44px, auto) 48px auto !important;
    align-items: center !important;
    gap: 8px 6px !important;
    padding: 9px 10px 11px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
  }

  .tv-header>.brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  .tv-header>.brand .brand-mark {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    font-size: 23px !important;
  }

  .tv-header>.brand .brand-name {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    font-size: clamp(18px, 5.1vw, 23px) !important;
    line-height: .96 !important;
    letter-spacing: -.6px !important;
    overflow: visible !important;
    white-space: normal !important;
    max-width: none !important;
    width: auto !important;
  }

  .tv-header>.header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin: 0 !important;
  }

  .tv-header>.header-actions>.search-control {
    display: none !important
  }

  .tv-header>.header-actions>.install-pwa {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    gap: 4px !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
  }

  .tv-header>.header-actions>.install-pwa span {
    font-size: 12px !important;
    display: inline !important
  }

  .tv-header>.header-actions>.privacy-icon {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  .tv-header>.mobile-search-control {
    grid-column: 1/-1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .tv-header>.main-nav {
    grid-column: 1/-1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(44px, auto)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .tv-header>.main-nav .nav-tab {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 5px !important;
    min-height: 44px !important;
    height: auto !important;
    line-height: 1.15 !important;
    font-size: clamp(12px, 3.7vw, 15px) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media(max-width:350px) {
  .tv-header {
    padding-inline: 7px !important;
    column-gap: 3px !important
  }

  .tv-header>.brand .brand-mark {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-basis: 32px !important
  }

  .tv-header>.brand .brand-name {
    font-size: 17px !important
  }

  .tv-header>.header-actions>.install-pwa {
    padding: 0 5px !important;
    font-size: 11px !important
  }

  .tv-header>.header-actions>.install-pwa span {
    font-size: 11px !important
  }

  .tv-header>.header-actions>.privacy-icon {
    width: 32px !important;
    min-width: 32px !important
  }
}

/* HUD without ellipsis or clipped score/heading. */
body.app-focus-mode.is-playing #gamePanel .game-top {
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: calc(100% - 20px) !important;
}

body.app-focus-mode.is-playing #gamePanel .game-top>div {
  min-width: 0 !important;
  max-width: 50% !important;
  flex: 1 1 50% !important;
}

body.app-focus-mode.is-playing #gamePanel .game-top h2,
body.app-focus-mode.is-playing #gamePanel .game-top #gameScore {
  box-sizing: border-box !important;
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  font-size: clamp(12px, 1.8vw, 18px) !important;
  line-height: 1.18 !important;
}

body.app-focus-mode.is-playing #gamePanel .game-top #gameScore {
  flex: 0 1 48% !important;
  max-width: 48% !important;
  text-align: right !important;
}

/* Normal operation uses touch/swipes and the keyboard. TV D-pad is opt-in. */
body.app-focus-mode.is-playing #gamePanel .game-pad[hidden] {
  display: none !important
}

body.app-focus-mode.is-playing #gamePanel .game-toolbar {
  justify-content: space-between !important;
  height: auto !important;
  min-height: clamp(48px, 7vh, 64px) !important;
  padding: 4px 8px !important;
  gap: 8px !important;
}

body.app-focus-mode.is-playing #gamePanel .game-buttons {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}

body.app-focus-mode.is-playing #gamePanel .game-buttons button,
body.app-focus-mode.is-playing #gamePanel .game-control-toggle {
  min-height: 39px !important;
  height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  padding: 6px clamp(7px, 1vw, 14px) !important;
  font-size: clamp(11px, 1.2vw, 14px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  border: 1px solid #557493 !important;
  border-radius: 10px !important;
  background: #29425d !important;
  color: #fff !important;
  white-space: normal !important;
  text-align: center !important;
  cursor: pointer !important;
}

body.app-focus-mode.is-playing #gamePanel .game-control-toggle {
  margin-left: auto !important;
  background: #19334d !important;
  border-color: #91b3d2 !important;
}

body.app-focus-mode.is-playing #gamePanel .game-pad {
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-focus-mode.is-playing #gamePanel .game-pad button {
  min-height: 38px !important;
  height: 40px !important;
  width: clamp(32px, 4vw, 52px) !important;
  font-size: 20px !important;
}

body.app-focus-mode.is-playing #gameCanvas {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

@media (max-width:700px) {
  body.app-focus-mode.is-playing #gamePanel .game-toolbar {
    padding: 3px 5px !important;
    gap: 5px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-buttons button,
  body.app-focus-mode.is-playing #gamePanel .game-control-toggle {
    font-size: 11px !important;
    padding: 5px 7px !important;
    min-height: 36px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-pad button {
    min-height: 34px !important;
    height: 36px !important;
    width: clamp(30px, 7vw, 43px) !important;
    font-size: 17px !important;
  }
}

@media(orientation:portrait) {

  /* In rotated landscape, viewport usable width is 100dvh (not 100dvw). */
  body.app-focus-mode.is-playing #gamePanel .game-toolbar {
    min-height: 42px !important;
  }

  body.app-focus-mode.is-playing #gamePanel .game-control-toggle {
    font-size: 12px !important
  }
}


/* ==========================================================================
   UX: seleção visual de fotos e ações primeiro na tela de resultado
   ========================================================================== */
#toolForm>.field-group {
  min-width: 0;
}

#toolForm>.field-group .file-picker-input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

#toolForm .file-picker-target {
  width: 100%;
  min-height: 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  border: 2px dashed #75acd6;
  border-radius: 18px;
  background: linear-gradient(145deg, #1a3d60, #152b46);
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .12);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

#toolForm .file-picker-target:hover,
#toolForm .file-picker-target.is-dragging {
  background: linear-gradient(145deg, #245782, #1a3e63);
  border-color: #ffd2ad;
  transform: translateY(-1px);
}

#toolForm .file-picker-target.has-files {
  border-style: solid;
  border-color: #75d6b0;
  background: linear-gradient(145deg, #154b48, #15354d);
}

#toolForm .file-picker-input:focus-visible+.file-picker-target {
  outline: 3px solid #ffbb89;
  outline-offset: 4px;
}

#toolForm .file-picker-icon {
  width: 51px;
  height: 51px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  font-size: 29px;
  line-height: 1;
}

#toolForm .file-picker-title {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
}

#toolForm .file-picker-subtitle {
  font-size: clamp(12px, 2vw, 15px);
  color: #d3e8fa;
  line-height: 1.4;
  font-weight: 600;
}

#toolForm .file-picker-status {
  margin: 10px 0 0;
  font-size: clamp(12px, 2vw, 14px);
  line-height: 1.5;
  color: #c4d7ec;
  overflow-wrap: anywhere;
}

#toolForm .file-picker-status.has-files {
  color: #a5f2cf;
  font-weight: 800;
}

#toolForm .multi-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 9px;
  width: 100%;
  margin-top: 14px;
}

#toolForm .multi-photo-gallery figure {
  max-width: none;
  min-width: 0;
  padding: 5px;
  margin: 0;
  border-radius: 11px;
  background: #17324d;
  border: 1px solid #526f88;
}

#toolForm .multi-photo-gallery img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

#toolForm .multi-photo-gallery figcaption {
  font-size: 11px;
  font-weight: 900;
  color: #d1f7e8;
}

#resultActionsPanel>#exportActionsGroup {
  width: 100%;
  margin: 0;
  padding: 14px;
  background: linear-gradient(145deg, rgba(37, 80, 106, .22), rgba(11, 26, 42, .42));
  border: 1px solid #486985;
  border-radius: 17px;
}

#resultActionsPanel>#exportActionsGroup .export-heading {
  margin: 0 0 10px;
}

#resultActionsPanel>#exportActionsGroup .export-heading strong {
  font-size: clamp(16px, 2.4vw, 20px);
}

#resultActionsPanel>#resultStageTitle {
  margin-top: 8px;
}

@media (max-width:700px) {
  #toolForm .file-picker-target {
    min-height: 150px;
    padding: 16px 12px
  }

  #toolForm .multi-photo-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  #resultActionsPanel>#exportActionsGroup {
    padding: 12px 10px
  }
}

@media (prefers-reduced-motion:reduce) {
  #toolForm .file-picker-target {
    transition: none
  }
}


/* Override específico: labels de campos eram forçados para display:block. */
#toolForm>.field-group label.file-picker-target {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  min-height: 150px !important;
  font-size: inherit !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#toolForm>.field-group label.file-picker-target .file-picker-title {
  display: block !important;
  font-size: clamp(19px, 2.5vw, 24px) !important;
  line-height: 1.2 !important;
}

#toolForm>.field-group label.file-picker-target .file-picker-subtitle {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  max-width: 240px;
}

/* Mobile: respiro de 10px acima e abaixo da pesquisa.
   Linha automática evita que a margem sobreponha o cabeçalho. */
@media (max-width:700px) {
  .tv-header {
    grid-template-rows: minmax(44px, auto) auto auto !important;
  }

  .tv-header>.mobile-search-control {
    margin: 10px 0 !important;
  }
}


/* ===========================================================
   UI PERF v87: aparência premium sem pintura contínua.
   Preserva feedback pontual de botões e spinner de exportação.
   =========================================================== */
body,
.brand-mark,
.brand-mark i,
.tile-one,
.tile-two,
.tile-three,
.hero-tile>i,
.hero-orbit,
.hero-backdrop,
.hero-backdrop::before,
.hero-backdrop::after,
.feature-hero::after,
.tool-grid .card-art::before,
.tool-grid .card-art::after,
.preview-step .live-dot {
  animation: none !important;
}

.hero-backdrop {
  will-change: auto !important;
  filter: none !important;
}

/* Nenhuma camada GPU por cartão em repouso; hover continua interativo. */
.tool-grid .tool-card:not(:hover):not(:focus-visible) {
  transform: none !important;
}

/* Evita desfoque de fundo, que é caro em aparelhos básicos e Smart TVs. */
.tv-header,
.export-overlay,
.pwa-guide {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tv-header {
  background: #0a101d !important
}

/* Cartões fora de interação não precisam de filtros CSS. */
.tool-grid .card-symbol:not(:hover) {
  filter: none !important
}

@media (max-width:900px),
(hover:none) {
  .tool-grid .tool-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .13) !important
  }

  .tool-grid .tool-card:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2) !important
  }

  .tool-grid .tool-card:hover {
    transform: none !important
  }

  .tool-grid .tool-card:hover .card-art {
    filter: none !important
  }

  .tool-grid .tool-card:hover .card-symbol {
    transform: none !important;
    filter: none !important
  }
}

@media (prefers-reduced-motion:reduce) {
  .export-spinner {
    animation: none !important;
    border-top-color: #ffc49c
  }
}

/* Organização das vitrines Top 8 e Novos 4 por categoria. */
.catalog-group-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 5px 0 13px;
  min-width: 0;
}

.catalog-group-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 28px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 162, 107, .13);
  border: 1px solid rgba(255, 162, 107, .28);
  color: #ffc49f;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .3px;
}

.catalog-group-label-new {
  color: #b9e8d7;
  border-color: rgba(135, 216, 185, .25);
  background: rgba(135, 216, 185, .10);
}

.catalog-group-description {
  color: #99a9bc;
  font-size: 11px;
  font-weight: 600;
}

.catalog-new-group {
  margin-top: 23px;
}

.catalog-new-group[hidden],
.catalog-group-title[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .catalog-new-group {
    margin-top: 15px;
  }

  .catalog-group-title {
    margin: 3px 0 10px;
    gap: 8px;
  }

  .catalog-group-label {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 10px;
  }

  .catalog-group-description {
    font-size: 10px;
  }
}

/* === CARROSSEL PROMOCIONAL / SEO 2026-11-05 === */
.tool-card {
  display: block;
  text-decoration: none;
}

.tool-card:hover {
  text-decoration: none;
}

.feature-hero .hero-carousel-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  z-index: 12;
  right: 23px;
  bottom: 18px;
}

.feature-hero .hero-pagination {
  position: static;
  display: flex;
  align-items: center;
  gap: 7px;
}

.feature-hero .hero-carousel-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  padding: 0;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}

.feature-hero .hero-carousel-dot.selected {
  width: 25px;
  background: #fff;
}

.feature-hero .hero-carousel-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(8, 23, 43, .4);
  border-radius: 50%;
  cursor: pointer;
}

.feature-hero .hero-carousel-arrow:hover {
  background: rgba(255, 255, 255, .23);
}

.feature-hero .hero-promotion {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
}

.feature-hero .hero-promotion[hidden],
.feature-hero #heroIntro[hidden],
.feature-hero #heroIntroArt[hidden] {
  display: none !important;
}

.feature-hero .hero-promo-copy {
  max-width: 58%;
  min-width: 0;
}

.feature-hero .hero-promo-copy h2 {
  font-size: clamp(39px, 5vw, 70px);
  line-height: 1.04;
  margin: 20px 0 14px;
  font-weight: 850;
  letter-spacing: -2.3px;
  color: #fff;
  text-wrap: balance;
}

.feature-hero .hero-promo-copy p {
  color: #eef6ff;
  font-size: 15px;
  line-height: 1.6;
  max-width: 440px;
}

.feature-hero .hero-promo-category {
  display: inline-flex;
  align-items: center;
  margin-top: 19px;
  color: #d4eaff;
  letter-spacing: 1.8px;
  font-size: 10px;
  font-weight: 800;
}

.feature-hero .hero-promo-visual {
  width: min(36%, 360px);
  aspect-ratio: 1/1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 22px;
  border-radius: 32px;
  transform: rotate(7deg);
  border: 1px solid rgba(255, 255, 255, .4);
  background: linear-gradient(145deg, rgba(255, 210, 169, .96), rgba(238, 121, 111, .86));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .5);
}

.feature-hero .hero-promo-symbol {
  font-size: clamp(74px, 8vw, 135px);
  line-height: 1.05;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .15));
}

.feature-hero .hero-promo-visual strong {
  font-size: clamp(17px, 2.1vw, 28px);
  line-height: 1.12;
  letter-spacing: -.5px;
}

.feature-hero .hero-promo-visual-caption {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1px;
}

.feature-hero .hero-promo-copy .hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.feature-hero .hero-promo-copy .hero-cta:hover {
  color: #16283e;
}

.seo-directory {
  padding: 19px 0 30px;
  margin: 10px 0 25px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.seo-directory h2 {
  color: #f5f7fb;
  font-size: 19px;
  margin-bottom: 7px;
}

.seo-directory p {
  color: #adbbce;
  font-size: 12px;
  margin-bottom: 15px;
}

.seo-directory-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.seo-directory-links a {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .13);
  color: #d1dfef;
  font-size: 11px;
  background: rgba(255, 255, 255, .045);
  text-decoration: none;
}

.seo-directory-links a:hover {
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

.seo-noscript {
  margin: 2rem auto;
  max-width: 50rem;
  padding: 1.5rem;
  color: #fff;
}

@media (max-width: 760px) {
  .feature-hero .hero-carousel-controls {
    right: 13px;
    bottom: 13px;
    gap: 8px;
  }

  .feature-hero .hero-carousel-arrow {
    width: 28px;
    height: 28px;
  }

  .feature-hero .hero-promo-copy {
    max-width: 72%;
  }

  .feature-hero .hero-promo-copy h2 {
    font-size: clamp(29px, 6vw, 45px);
    letter-spacing: -1.4px;
    margin: 12px 0 9px;
  }

  .feature-hero .hero-promo-copy p {
    font-size: 12px;
    line-height: 1.4;
  }

  .feature-hero .hero-promo-copy .hero-cta {
    padding-inline: 13px;
    min-height: 39px;
    font-size: 11px;
  }

  .feature-hero .hero-promo-visual {
    width: 28%;
    border-radius: 17px;
    padding: 9px;
    transform: rotate(5deg);
    gap: 6px;
  }

  .feature-hero .hero-promo-symbol {
    font-size: clamp(38px, 7vw, 65px);
  }

  .feature-hero .hero-promo-visual strong {
    font-size: 11px;
  }

  .feature-hero .hero-promo-visual-caption {
    display: none;
  }

  .feature-hero .hero-promo-category {
    font-size: 8px;
    margin-top: 10px;
  }

  .seo-directory {
    padding: 14px 0 22px;
  }
}

@media (max-width: 480px) {
  .feature-hero .hero-promotion {
    gap: 10px;
  }

  .feature-hero .hero-promo-copy {
    max-width: 100%;
  }

  .feature-hero .hero-promo-visual {
    display: none;
  }

  .feature-hero .hero-promo-copy h2 {
    font-size: clamp(30px, 8vw, 39px);
  }

  .feature-hero .hero-promo-copy p {
    max-width: 285px;
  }

  .feature-hero .hero-carousel-controls {
    bottom: 11px;
  }

  .feature-hero .hero-carousel-dot {
    width: 7px;
    height: 7px;
  }

  .feature-hero .hero-carousel-dot.selected {
    width: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-hero .hero-carousel-dot {
    transition: none;
  }
}

.seo-directory[hidden] {
  display: none !important;
}

/* Slide do SaaS de cardápio digital: estilo próprio sem carregar imagens externas. */
.feature-hero.hero-business-slide .hero-backdrop {
  background:
    radial-gradient(ellipse at 76% 30%, rgba(255, 176, 109, .42), transparent 30%),
    linear-gradient(115deg, #101d32 0%, #19375b 48%, #ba5d47 100%);
}

.feature-hero.hero-business-slide .hero-promo-visual {
  background: linear-gradient(145deg, #fff0ce 0%, #ffb079 54%, #ff845e 100%);
  border-color: rgba(255, 240, 220, .75);
  color: #3b241f;
}

.feature-hero.hero-business-slide .hero-promo-copy .hero-cta {
  background: linear-gradient(135deg, #fff5e7, #ffd5a9);
  color: #292a35;
}

.feature-hero.hero-business-slide .hero-promo-copy .hero-cta:hover {
  background: #fff;
  color: #292a35;
}

.feature-hero.hero-business-slide .hero-promo-category {
  color: #ffe1bb;
}


/* Login do cardápio digital no cabeçalho — acesso ao painel oficial. */
.tv-header>.header-actions>.header-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 43px;
  padding: 0 15px;
  border: 1px solid rgba(255, 194, 152, .5);
  border-radius: 13px;
  background: linear-gradient(135deg, #f28d57 0%, #d75e3d 100%);
  color: #161d2b;
  box-shadow: 0 5px 17px rgba(231, 102, 65, .18);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tv-header>.header-actions>.header-login:hover {
  background: linear-gradient(135deg, #ffaf74, #f57c4c);
  color: #101827;
  box-shadow: 0 7px 20px rgba(231, 102, 65, .28);
}

.tv-header>.header-actions>.header-login i {
  font-size: 18px;
  line-height: 1;
}

/* Header em duas linhas no tablet/notebooks: preserva nav e campo de busca. */
@media (min-width: 701px) and (max-width: 1400px) {
  .tv-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
  }

  .tv-header>.brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .tv-header>.header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .tv-header>.main-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  .tv-header>.header-actions>.header-login .login-full-label {
    display: none;
  }

  .tv-header>.header-actions>.search-control {
    width: 170px !important;
  }
}

@media (min-width: 701px) and (max-width: 820px) {
  .tv-header>.header-actions>.install-pwa {
    min-width: 44px !important;
    padding: 0 9px !important;
  }

  .tv-header>.header-actions>.install-pwa span {
    display: none !important;
  }
}

@media (max-width: 700px) {
  .tv-header>.header-actions>.header-login {
    height: 42px;
    min-height: 42px;
    gap: 5px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 12px;
  }

  .tv-header>.header-actions>.header-login i {
    font-size: 17px;
  }

  .tv-header>.header-actions>.header-login .login-full-label {
    display: none;
  }

  .tv-header>.header-actions {
    gap: 5px !important;
  }
}

@media (max-width: 480px) {
  .tv-header>.header-actions>.install-pwa {
    width: 38px !important;
    min-width: 38px !important;
    height: 40px !important;
    padding: 0 !important;
  }

  .tv-header>.header-actions>.install-pwa span {
    display: none !important;
  }

  .tv-header>.header-actions>.privacy-icon {
    width: 36px !important;
    min-width: 36px !important;
  }

  .tv-header>.header-actions>.header-login {
    padding: 0 8px;
  }

  .tv-header>.brand {
    gap: 6px !important;
  }

  .tv-header>.brand .brand-name {
    font-size: 13px !important;
  }
}

@media (max-width: 390px) {
  .tv-header {
    padding-inline: 9px !important;
    gap: 5px !important;
  }

  .tv-header>.brand .brand-mark {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-basis: 32px !important;
    font-size: 19px !important;
  }

  .tv-header>.brand .brand-name {
    max-width: 100px !important;
    font-size: 12px !important;
    overflow: hidden !important;
  }

  .tv-header>.header-actions>.header-login {
    padding: 0 7px;
  }
}

@media (max-width: 345px) {
  .tv-header>.brand .brand-name {
    max-width: 78px !important;
  }

  .tv-header>.header-actions>.privacy-icon {
    width: 32px !important;
    min-width: 32px !important;
  }

  .tv-header>.header-actions>.install-pwa {
    width: 34px !important;
    min-width: 34px !important;
  }
}

/* Paint online — editor leve integrado ao catálogo. */
.paint-panel {
  width: min(100%, 1250px);
  margin: 26px auto 0;
  padding: clamp(16px, 2.5vw, 28px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: #111c2d;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}

.paint-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

.paint-intro h2 {
  margin: 7px 0;
  color: #fff;
  font-size: clamp(22px, 2.8vw, 30px);
}

.paint-intro p {
  margin: 0;
  color: #b7c5d9;
  line-height: 1.5;
}

.paint-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 47px;
  padding: 11px 20px;
  border: 0;
  border-radius: 13px;
  background: #ff9d6b;
  color: #182231;
  font-weight: 800;
}

.paint-save:hover {
  background: #ffb287;
}

.paint-toolbar {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: #18283c;
}

.paint-tool-group,
.paint-customize,
.paint-history {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.paint-toolbar button:not(.paint-swatch),
.paint-tool-group button,
.paint-history button {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: #263850;
  color: #ecf2fa;
  font-size: 14px;
  font-weight: 650;
}

.paint-toolbar button i {
  margin-right: 5px;
}

.paint-toolbar button:hover:not(:disabled) {
  border-color: #ff9d6b;
}

.paint-tool-group button.is-active {
  background: #ff9d6b;
  border-color: #ff9d6b;
  color: #152031;
}

.paint-toolbar button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.paint-customize {
  gap: 12px;
  padding: 11px 0;
  border-block: 1px solid rgba(255, 255, 255, .08);
}

.paint-color-picker,
.paint-size-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #d6e1ef;
  font-size: 14px;
  font-weight: 650;
}

.paint-color-picker input {
  width: 43px;
  height: 37px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: #263850;
  cursor: pointer;
}

.paint-size-label input {
  width: 130px;
  max-width: 35vw;
  accent-color: #ff9d6b;
  cursor: pointer;
}

#paintSizeValue {
  min-width: 40px;
  color: #e5edf7;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.paint-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.paint-swatches button[data-paint-color] {
  width: 29px;
  height: 29px;
  min-height: 29px;
  padding: 0;
  border: 2px solid #71849c;
  border-radius: 50%;
}

.paint-swatches button[aria-pressed="true"] {
  outline: 2px solid #ffb587;
  outline-offset: 2px;
}

.paint-swatches button[data-paint-color="#202a3d"] {
  background: #202a3d;
}

.paint-swatches button[data-paint-color="#ef4444"] {
  background: #ef4444;
}

.paint-swatches button[data-paint-color="#f59e0b"] {
  background: #f59e0b;
}

.paint-swatches button[data-paint-color="#22c55e"] {
  background: #22c55e;
}

.paint-swatches button[data-paint-color="#3b82f6"] {
  background: #3b82f6;
}

.paint-swatches button[data-paint-color="#a855f7"] {
  background: #a855f7;
}

.paint-swatches button[data-paint-color="#ffffff"] {
  background: #ffffff;
}

.paint-canvas-frame {
  overflow: hidden;
  border: 7px solid #e6eaf0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .20);
}

#paintCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 13;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.paint-status {
  margin: 14px 0 4px;
  color: #f8c199;
  font-size: 14px;
  min-height: 21px;
}

.paint-privacy {
  color: #b6c6d8;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.paint-privacy i {
  margin-right: 5px;
}

@media (max-width: 660px) {
  .paint-panel {
    margin-top: 16px;
    padding: 13px;
    border-radius: 16px;
  }

  .paint-intro {
    align-items: stretch;
  }

  .paint-save {
    width: 100%;
  }

  .paint-toolbar {
    padding: 10px;
    gap: 9px;
  }

  .paint-tool-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .paint-tool-group button {
    padding: 8px 5px;
    font-size: 12px;
  }

  .paint-history {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .paint-history button {
    padding: 8px 4px;
    font-size: 12px;
  }

  .paint-canvas-frame {
    border-width: 4px;
    border-radius: 8px;
  }
}

/* Modelos de cartazes convertidos do Designer: galeria compacta e responsiva. */
.designer-model-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 10px 0 2px;
  max-height: 370px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.designer-model-option {
  min-width: 0;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 5px;
  border: 2px solid rgba(122, 139, 169, .22);
  border-radius: 13px;
  padding: 7px;
  background: #121a29;
  color: #eaf1fb;
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}

.designer-model-option img {
  width: 100%;
  max-width: 100px;
  aspect-ratio: 1414 / 2000;
  border-radius: 7px;
  display: block;
  object-fit: contain;
  background: #fff;
}

.designer-model-option:hover,
.designer-model-option:focus-visible,
.designer-model-option.selected {
  border-color: #ff8463;
}

.designer-model-option:focus-visible {
  outline: 3px solid #ff9b83;
  outline-offset: 2px;
}

.designer-model-option.selected {
  background: #342025;
}

@media (min-width: 768px) {
  .designer-model-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ================================================================
   HUB — CABEÇALHO ALINHADO À VITRINE / NAVEGAÇÃO SÓLIDA (2026-11-06)
   Mesma régua horizontal do card principal; botões claros e estáveis.
   ================================================================ */
:root {
  --hub-header-gap: clamp(18px, 4vw, 58px);
}

/* A vitrine está limitada a 1680px; o cabeçalho acompanha suas bordas. */
.tv-header {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-inline: max(var(--hub-header-gap), calc((100vw - 1680px) / 2 + 58px)) !important;
}

/* Os quatro estados de navegação usam cores opacas, sem transparência. */
.tv-header>.main-nav .nav-tab {
  background: #e1e7ef !important;
  color: #26354a !important;
  border: 1px solid #cfd8e5 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .10) !important;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.tv-header>.main-nav .nav-tab:hover {
  background: #f1f4f8 !important;
  color: #101b2b !important;
}

.tv-header>.main-nav .nav-tab.active,
.tv-header>.main-nav .nav-tab[aria-pressed="true"] {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #111e32 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18) !important;
}

.tv-header>.main-nav .nav-tab i {
  color: inherit !important;
}

/* Desktop/tablet: logo + ações na primeira linha, menu centralizado na segunda. */
@media (min-width: 701px) {
  .tv-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 18px !important;
    row-gap: 8px !important;
    height: auto !important;
    min-height: 118px !important;
    padding-block: 12px 10px !important;
  }

  .tv-header>.brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  .tv-header>.header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  .tv-header>.main-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .tv-header>.main-nav .nav-tab {
    min-height: 46px !important;
    height: 46px !important;
    padding-inline: clamp(13px, 1.6vw, 22px) !important;
  }
}

/* Mobile: marca maior; menu de 2 colunas perfeitamente centralizado. */
@media (max-width: 700px) {
  .tv-header {
    /* A vitrine usa 13px nas telas pequenas. */
    padding-inline: 13px !important;
  }

  .tv-header>.brand .brand-name {
    font-size: clamp(19px, 4.8vw, 22px) !important;
    line-height: .96 !important;
    letter-spacing: -.6px !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .tv-header>.main-nav {
    justify-content: center !important;
    justify-items: stretch !important;
    align-items: center !important;
  }

  .tv-header>.main-nav .nav-tab {
    border-radius: 12px !important;
  }
}

@media (max-width: 390px) {
  .tv-header>.brand .brand-name {
    font-size: 19px !important;
  }
}

@media (max-width: 350px) {
  .tv-header>.brand .brand-name {
    font-size: 17px !important;
  }
}

/* ==============================================================
   HUB: espacamento visual ENTRE busca e menu de categorias.
   Desktop: 8px do grid + 12px do menu = 20px.
   Mobile: 8px do grid + 2px do menu = 10px.
   Mantem o espaco ja existente entre marca e busca no mobile.
   ============================================================== */
.tv-header>.main-nav {
  margin-top: 12px !important;
}

@media (max-width: 700px) {
  .tv-header>.main-nav {
    margin-top: 2px !important;
  }
}

/* Botao nao selecionado: cinza claro solido, com contraste maior. */
.tv-header>.main-nav .nav-tab:not(.active):not([aria-pressed="true"]) {
  background-color: #c4cedb !important;
  color: #1d2a3d !important;
  border-color: #afbdcf !important;
}

.tv-header>.main-nav .nav-tab:not(.active):not([aria-pressed="true"]):hover {
  background-color: #dce4ee !important;
  border-color: #c8d3e1 !important;
}

/* Selecionado: branco puro, sempre destacado. */
.tv-header>.main-nav .nav-tab.active,
.tv-header>.main-nav .nav-tab[aria-pressed="true"] {
  background-color: #fff !important;
  color: #111e32 !important;
  border-color: #fff !important;
}


/* ================================================================
   Assistente com introdução única: as etapas mostram só a pergunta.
   Válido para ferramentas com formulário, sem afetar a tela de resultado.
   ================================================================ */
#wizardWelcome[hidden],
body.app-focus-mode #wizardStage[data-view="steps"]>#wizardWelcome,
body.app-focus-mode #wizardStage[data-view="intro"]>#toolForm,
body.app-focus-mode #wizardStage[data-view="intro"]>.wizard-progress,
body.app-focus-mode #wizardStage[data-view="intro"]>.wizard-controls {
  display: none !important;
}

body.app-focus-mode #wizardStage[data-view="intro"]>.panel-heading,
body.app-focus-mode #wizardStage[data-view="intro"]>.wizard-stage-title,
body.app-focus-mode #wizardStage[data-view="intro"]>.editor-intro,
body.app-focus-mode #wizardStage[data-view="intro"]>.tool-preset-panel,
body.app-focus-mode #wizardStage[data-view="intro"]>.tool-edit-actions,
body.app-focus-mode #wizardStage[data-view="intro"]>.privacy-inline,
body.app-focus-mode #wizardStage[data-view="steps"]>.panel-heading,
body.app-focus-mode #wizardStage[data-view="steps"]>.wizard-stage-title,
body.app-focus-mode #wizardStage[data-view="steps"]>.editor-intro,
body.app-focus-mode #wizardStage[data-view="steps"]>.privacy-inline,
body.app-focus-mode #wizardStage[data-view="steps"]>.tool-edit-actions .draft-status {
  display: none !important;
}

body.app-focus-mode #wizardStage[data-view="intro"] {
  justify-content: center;
  align-items: center;
  overflow-y: auto !important;
  padding-block: 12px;
  box-sizing: border-box;
}

body.app-focus-mode #wizardStage[data-view="intro"]>#wizardWelcome {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(13px, 2.2vh, 24px);
  width: min(100%, 740px);
  margin: auto;
  padding: clamp(23px, 4vw, 52px);
  border: 1px solid #47627e;
  border-radius: 23px;
  background: linear-gradient(145deg, #1d324b, #142237 85%);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .18);
  box-sizing: border-box;
}

.wizard-welcome-kicker {
  color: #ffac84;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .10em;
}

#wizardWelcomeTitle {
  color: #fff;
  font-size: clamp(29px, 4.1vw, 47px);
  line-height: 1.12;
  letter-spacing: -.035em;
  margin: 0;
}

#wizardWelcomeDescription {
  color: #c7d5e5;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  margin: 0;
  max-width: 58ch;
}

.wizard-welcome-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.wizard-welcome-steps span {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 11px;
  background: #0f2035;
  border: 1px solid #374b65;
  color: #e1edfa;
  font-size: 13px;
  font-weight: 650;
}

.wizard-welcome-steps strong {
  color: #ffad83;
  font-size: 12px;
}

#wizardWelcomeStart {
  width: min(100%, 280px);
  min-height: 52px;
  border: 0;
  border-radius: 13px;
  background: #ffad7d;
  color: #102034;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

#wizardWelcomeStart:hover {
  background: #ffc09c;
}

#wizardWelcomeStart:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.wizard-welcome-privacy {
  font-size: 12px;
  color: #a8c3d4;
  line-height: 1.45;
  margin: 0;
}

body.app-focus-mode #wizardStage[data-view="steps"]>.tool-edit-actions {
  display: flex !important;
  justify-content: flex-end;
  min-height: 0 !important;
  margin: 0 0 5px !important;
}

body.app-focus-mode #wizardStage[data-view="steps"]>.wizard-progress {
  margin: 0 0 3px !important;
}

body.app-focus-mode #wizardStage[data-view="steps"]>#toolForm {
  margin-top: 7px !important;
  margin-bottom: 8px !important;
}

body.app-focus-mode #wizardStage[data-view="steps"] #toolForm>.field-group {
  background: #1b2f48;
  border: 1px solid #4c6380;
  border-radius: 18px;
}

@media (max-width: 600px) {
  body.app-focus-mode #wizardStage[data-view="intro"]>#wizardWelcome {
    padding: 24px 18px;
    border-radius: 16px;
  }

  .wizard-welcome-steps span {
    font-size: 12px;
    padding: 8px 10px;
  }

  #wizardWelcomeStart {
    width: 100%;
  }
}

@media (max-height: 570px) {
  body.app-focus-mode #wizardStage[data-view="steps"]>.tool-edit-actions {
    display: none !important;
  }
}

/* ================================================================
   Hub — perguntas em largura ampla para TODAS as ferramentas.
   A apresentação (data-view="intro") continua centralizada.
   O resultado (data-stage="result") não recebe nenhuma mudança.
   ================================================================ */
@media (min-width: 901px) {
  body.app-focus-mode:not(.is-playing) #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="steps"]) {
    width: min(1600px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  body.app-focus-mode:not(.is-playing) #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="steps"]) {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

@media (min-width: 701px) {
  body.app-focus-mode:not(.is-playing) #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="steps"])>.editor-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-inline: clamp(18px, 2.5vw, 36px) !important;
  }

  body.app-focus-mode #wizardStage[data-view="steps"]>#toolForm,
  body.app-focus-mode #wizardStage[data-view="steps"]>#toolForm>.field-group {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
}

/* v20261106-backdock1 — jogos: Voltar primeiro na barra de ações, sem topo vazio. */
body.app-focus-mode.is-playing {
  --arcade-topbar: 0px !important;
}

body.app-focus-mode.is-playing #toolView .tool-view-head {
  display: none !important;
}

body.app-focus-mode.is-playing #gamePanel {
  height: calc(100dvh - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100dvh - env(safe-area-inset-bottom, 0px)) !important;
}

body.app-focus-mode.is-playing #gamePanel .game-buttons {
  min-width: 0;
}

body.app-focus-mode.is-playing #gamePanel .game-buttons #backHome.dock-back-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: -1 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 84px !important;
  min-height: 39px !important;
  padding: 5px 12px !important;
  font-size: clamp(11px, 1.2vw, 14px) !important;
  line-height: 1.2 !important;
  border-radius: 10px !important;
  background: #29425d !important;
  border: 1px solid #557493 !important;
  color: #fff !important;
  white-space: nowrap !important;
}

@media (max-width: 700px) {
  body.app-focus-mode.is-playing #gamePanel .game-buttons #backHome.dock-back-button {
    min-width: 68px !important;
    min-height: 36px !important;
    padding: 5px 8px !important;
  }
}

@media (orientation: portrait) {
  body.app-focus-mode.is-playing #gamePanel {
    height: 100% !important;
    max-height: 100% !important;
  }
}
/* ===== Criador de posts: galeria visual de modelos ===== */
.post-template-step {
  gap: 14px;
}

.post-template-step .post-template-native {
  position: absolute;
  inset: auto auto auto -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.post-template-note,
.post-photo-tip {
  margin: 0;
  color: rgba(235, 242, 250, .85);
  font-size: .97rem;
  line-height: 1.5;
}

.post-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.post-template-card {
  appearance: none;
  border: 1px solid rgba(130, 170, 214, .26);
  background: linear-gradient(180deg, rgba(14, 26, 44, .76), rgba(10, 18, 32, .92));
  border-radius: 24px;
  padding: 10px;
  display: grid;
  gap: 10px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  text-align: left;
}

.post-template-card:hover,
.post-template-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 177, 121, .72);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .22);
  outline: none;
}

.post-template-card.selected {
  border-color: #ffaf73;
  box-shadow: 0 0 0 2px rgba(255, 175, 115, .25), 0 18px 34px rgba(0, 0, 0, .24);
  background: linear-gradient(180deg, rgba(51, 37, 44, .94), rgba(16, 28, 44, .94));
}

.post-template-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--post-bg1), var(--post-bg2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.post-template-thumb::before,
.post-template-thumb::after {
  content: '';
  position: absolute;
  inset: auto;
}

.post-template-mini-badge,
.post-template-mini-title,
.post-template-mini-text,
.post-template-mini-footer,
.post-template-mini-photo {
  position: absolute;
  display: block;
}

.post-template-mini-badge {
  top: 9px;
  left: 9px;
  max-width: calc(100% - 18px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(8, 18, 32, .18);
  color: var(--post-accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-template-mini-title {
  left: 10px;
  right: 10px;
  top: 54px;
  color: var(--post-ink);
  font-size: 15px;
  line-height: 1.05;
  font-weight: 900;
}

.post-template-mini-text {
  left: 10px;
  right: 10px;
  top: 104px;
  color: color-mix(in srgb, var(--post-ink) 76%, transparent);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}

.post-template-mini-footer {
  left: 10px;
  right: 10px;
  bottom: 10px;
  color: var(--post-accent);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
}

.post-template-mini-photo {
  display: none;
  border-radius: 14px;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.95), rgba(255,255,255,0) 24%),
    linear-gradient(145deg, rgba(255,255,255,.30), rgba(0,0,0,.14)),
    linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.post-template-thumb.is-photo .post-template-mini-photo {
  display: block;
}

.post-template-thumb.is-photo .post-template-mini-title {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .24);
}

.post-template-thumb.is-photo .post-template-mini-text {
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .24);
}

.post-template-thumb.is-photo .post-template-mini-footer {
  color: #ffffff;
}

.post-layout-headline .post-template-mini-title { top: 60px; }
.post-layout-headline .post-template-mini-text {
  top: auto;
  bottom: 50px;
  left: 10px;
  right: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(9, 17, 31, .72);
}

.post-layout-minimal .post-template-mini-title {
  left: 14px;
  right: 14px;
  top: 68px;
  text-align: center;
}
.post-layout-minimal .post-template-mini-text {
  top: 120px;
  left: 16px;
  right: 16px;
  text-align: center;
}
.post-layout-minimal .post-template-mini-footer {
  left: 16px;
  right: 16px;
  bottom: 22px;
  text-align: center;
}

.post-layout-notice .post-template-mini-title,
.post-layout-event .post-template-mini-title,
.post-layout-quote .post-template-mini-title,
.post-layout-list .post-template-mini-title,
.post-layout-split .post-template-mini-title {
  left: 14px;
  right: 14px;
}

.post-layout-quote::before {
  content: '“';
  position: absolute;
  left: 12px;
  top: 48px;
  color: var(--post-accent);
  font-size: 40px;
  font-weight: 900;
}

.post-layout-list .post-template-mini-text {
  top: 104px;
  left: 18px;
  right: 14px;
  line-height: 1.5;
}

.post-layout-split::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--post-panel-soft) 88%, transparent);
}

.post-layout-event::before {
  content: '24';
  position: absolute;
  right: 14px;
  top: 52px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--post-panel-soft);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.post-layout-photo-hero .post-template-mini-photo {
  left: 10px;
  right: 10px;
  top: 36px;
  height: 74px;
}
.post-layout-photo-hero .post-template-mini-title {
  top: 122px;
  color: var(--post-ink);
  text-shadow: none;
}
.post-layout-photo-hero .post-template-mini-text {
  top: 158px;
  color: color-mix(in srgb, var(--post-ink) 72%, transparent);
  text-shadow: none;
}
.post-layout-photo-hero .post-template-mini-footer {
  color: var(--post-accent);
}

.post-layout-photo-top .post-template-mini-photo,
.post-layout-photo-story .post-template-mini-photo,
.post-layout-photo-overlay .post-template-mini-photo,
.post-layout-photo-classic .post-template-mini-photo,
.post-layout-photo-catalog .post-template-mini-photo {
  left: 0;
  right: 0;
  top: 0;
  height: 96px;
  border-radius: 0 0 18px 18px;
}

.post-layout-photo-top .post-template-mini-title { top: 108px; }
.post-layout-photo-top .post-template-mini-text { top: 146px; }

.post-layout-photo-side .post-template-mini-photo {
  top: 40px;
  right: 10px;
  width: 44%;
  height: 120px;
}
.post-layout-photo-side .post-template-mini-title,
.post-layout-photo-side .post-template-mini-text {
  right: 54%;
}

.post-layout-photo-frame .post-template-mini-photo,
.post-layout-photo-polaroid .post-template-mini-photo {
  left: 14px;
  right: 14px;
  top: 20px;
  height: 116px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.94), rgba(255,255,255,0) 20%),
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(0,0,0,.08)),
    linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.06));
}
.post-layout-photo-frame .post-template-mini-title,
.post-layout-photo-polaroid .post-template-mini-title {
  top: 148px;
  color: var(--post-ink);
  text-shadow: none;
}
.post-layout-photo-frame .post-template-mini-text,
.post-layout-photo-polaroid .post-template-mini-text,
.post-layout-photo-frame .post-template-mini-footer,
.post-layout-photo-polaroid .post-template-mini-footer {
  color: color-mix(in srgb, var(--post-ink) 72%, transparent);
  text-shadow: none;
}
.post-layout-photo-frame .post-template-mini-footer,
.post-layout-photo-polaroid .post-template-mini-footer {
  color: var(--post-accent);
}

.post-layout-photo-circle .post-template-mini-photo {
  left: 50%;
  top: 26px;
  width: 74px;
  height: 74px;
  margin-left: -37px;
  border-radius: 50%;
}
.post-layout-photo-circle .post-template-mini-title {
  top: 112px;
  text-align: center;
  color: var(--post-ink);
  text-shadow: none;
}
.post-layout-photo-circle .post-template-mini-text,
.post-layout-photo-circle .post-template-mini-footer {
  text-align: center;
  color: color-mix(in srgb, var(--post-ink) 72%, transparent);
  text-shadow: none;
}
.post-layout-photo-circle .post-template-mini-footer {
  color: var(--post-accent);
}

.post-layout-photo-portrait .post-template-mini-photo {
  left: 10px;
  top: 36px;
  width: 46%;
  height: 142px;
}
.post-layout-photo-portrait .post-template-mini-title,
.post-layout-photo-portrait .post-template-mini-text,
.post-layout-photo-portrait .post-template-mini-footer {
  left: 56%;
  right: 10px;
}

.post-layout-photo-story::after,
.post-layout-photo-overlay::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.54));
}
.post-layout-photo-story .post-template-mini-title,
.post-layout-photo-overlay .post-template-mini-title {
  top: auto;
  bottom: 60px;
}
.post-layout-photo-story .post-template-mini-text,
.post-layout-photo-overlay .post-template-mini-text {
  top: auto;
  bottom: 32px;
}
.post-layout-photo-story .post-template-mini-footer,
.post-layout-photo-overlay .post-template-mini-footer {
  bottom: 12px;
}

.post-layout-photo-catalog .post-template-mini-title,
.post-layout-photo-classic .post-template-mini-title {
  top: 112px;
  color: var(--post-ink);
  text-shadow: none;
}
.post-layout-photo-catalog .post-template-mini-text,
.post-layout-photo-classic .post-template-mini-text,
.post-layout-photo-catalog .post-template-mini-footer,
.post-layout-photo-classic .post-template-mini-footer {
  color: color-mix(in srgb, var(--post-ink) 72%, transparent);
  text-shadow: none;
}
.post-layout-photo-catalog .post-template-mini-footer,
.post-layout-photo-classic .post-template-mini-footer {
  color: var(--post-accent);
}

.post-layout-photo-blocks .post-template-mini-photo {
  left: 10px;
  top: 42px;
  width: 44%;
  height: 80px;
}
.post-layout-photo-blocks::before,
.post-layout-photo-blocks::after {
  content: '';
  position: absolute;
  right: 12px;
  width: 34%;
  border-radius: 12px;
  background: rgba(255,255,255,.65);
}
.post-layout-photo-blocks::before {
  top: 44px;
  height: 34px;
}
.post-layout-photo-blocks::after {
  top: 86px;
  height: 34px;
}
.post-layout-photo-blocks .post-template-mini-title {
  top: 136px;
  color: var(--post-ink);
  text-shadow: none;
}
.post-layout-photo-blocks .post-template-mini-text,
.post-layout-photo-blocks .post-template-mini-footer {
  color: color-mix(in srgb, var(--post-ink) 72%, transparent);
  text-shadow: none;
}
.post-layout-photo-blocks .post-template-mini-footer { color: var(--post-accent); }

.post-template-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.post-template-meta strong,
.post-template-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-template-meta strong {
  color: #f7fbff;
  font-size: .97rem;
  font-weight: 800;
}

.post-template-meta small {
  color: rgba(213, 226, 238, .78);
  font-size: .82rem;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .post-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .post-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .post-template-card {
    border-radius: 20px;
    padding: 9px;
  }

  .post-template-meta strong {
    font-size: .92rem;
  }
}

@media (max-width: 460px) {
  .post-template-grid {
    grid-template-columns: 1fr;
  }
}


/* 2026-11-07 · Introdução em largura total para todas as ferramentas com perguntas.
   O cartão de introdução e o das perguntas seguem as mesmas margens.
   Não altera as telas de resultados, jogos ou editores sem perguntas. */
@media (min-width: 901px) {
  body.app-focus-mode:not(.is-playing)
  #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="intro"]) {
    width: min(1600px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  body.app-focus-mode:not(.is-playing)
  #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="intro"]) {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

body.app-focus-mode #wizardStage[data-view="intro"] > #wizardWelcome {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

@media (min-width: 1000px) {
  body.app-focus-mode #wizardStage[data-view="intro"] > #wizardWelcome {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    grid-template-areas:
      "kicker steps"
      "title steps"
      "description steps"
      "start steps"
      "privacy steps";
    column-gap: clamp(28px, 4vw, 72px);
    row-gap: clamp(12px, 2vh, 22px);
    align-content: center;
  }
  #wizardWelcome .wizard-welcome-kicker { grid-area: kicker; }
  #wizardWelcomeTitle { grid-area: title; }
  #wizardWelcomeDescription { grid-area: description; }
  #wizardWelcomeSteps {
    grid-area: steps;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    align-self: center;
    gap: 12px;
  }
  #wizardWelcomeSteps span { justify-content: flex-start; min-height: 46px; }
  #wizardWelcomeStart { grid-area: start; }
  #wizardWelcome .wizard-welcome-privacy { grid-area: privacy; }
}

@media (min-width: 701px) {
  body.app-focus-mode:not(.is-playing)
  #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="intro"]) > .editor-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-inline: clamp(18px, 2.5vw, 36px) !important;
  }
}

/* Criador de posts: prévia real pelo canvas, idêntica à composição exportada. */
.post-template-real-preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  background: #172235;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
@media (max-width: 460px) {
  /* Preserva duas opções visíveis por linha no celular, com prévias legíveis. */
  .post-template-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .post-template-card { padding: 7px; border-radius: 14px; }
  .post-template-real-preview { border-radius: 9px; }
  .post-template-meta strong { font-size: 12px; }
  .post-template-meta small { font-size: 11px; }
}

/* Criador de posts · filtros, grupos e seis modelos mais usados (2026-11-07). */
#toolForm .post-template-step { gap: 14px; }
#toolForm .post-template-step > label { margin-bottom: 0; }
.post-template-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 6px;
}
.post-template-filter {
  appearance: none;
  cursor: pointer;
  border: 1px solid #40556e;
  border-radius: 999px;
  background: #0e1d32;
  color: #e0e9f4;
  padding: 11px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  min-height: 42px;
  transition: background .14s ease, border-color .14s ease;
}
.post-template-filter:hover { background: #213b58; }
.post-template-filter.active,
.post-template-filter[aria-pressed="true"] {
  background: #ffffff;
  border-color: #ffffff;
  color: #172337;
}
.post-template-filter:focus-visible,
.post-template-card:focus-visible { outline: 3px solid #ffb47c; outline-offset: 3px; }
.post-template-featured,
.post-template-browse {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.post-template-featured[hidden] { display: none !important; }
.post-template-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 6px;
}
.post-template-heading h4 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 850;
}
.post-template-count-info { color: #aebfd4; font-size: 12px; font-weight: 650; }
.post-template-featured-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.post-template-featured-grid .post-template-card { border-color: #687489; }
.post-template-featured-grid .post-template-card.selected { border-color: #ffaf73; }
.post-template-selection-status {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #3e5d70;
  border-radius: 12px;
  color: #c8ebdb;
  font-size: 13px;
  line-height: 1.45;
  background: #10263a;
}
/* Miniaturas do Canvas: o mesmo render para os 24 modelos, sem simulações CSS. */
.post-template-card .post-template-real-preview { aspect-ratio: 4 / 5; }
.post-template-meta { gap: 4px; }
.post-template-card .post-template-meta strong { white-space: normal; line-height: 1.25; }
.post-template-card .post-template-meta small { color: #c7d4e5; }
@media (max-width: 1350px) {
  .post-template-featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .post-template-featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .post-template-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-template-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .post-template-filter { min-width: 0; padding: 10px; font-size: 12px; }
  .post-template-heading h4 { font-size: 16px; }
}

/* 2026-11-07 — Alinhamento horizontal das perguntas com o botão Voltar.
   A margem do botão é clamp(14px, 3vw, 44px) no desktop e 12px no
   celular. A largura do assistente compensa seu padding de 16px,
   deixando o card da pergunta alinhado à mesma margem nas duas pontas.
   Escopo exclusivo das perguntas: introdução, resultado, jogos e editores
   livres não são modificados. */
@media (min-width: 701px) {
  body.app-focus-mode:not(.is-playing)
  #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="steps"] #toolForm) {
    width: calc(100vw - clamp(14px, 3vw, 44px) - clamp(14px, 3vw, 44px) + 32px) !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.app-focus-mode:not(.is-playing)
  #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="steps"] #toolForm) > .editor-panel {
    padding-inline: 16px !important;
  }
}

@media (max-width: 700px) {
  body.app-focus-mode:not(.is-playing)
  #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="steps"] #toolForm) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  body.app-focus-mode:not(.is-playing)
  #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="steps"] #toolForm) > .editor-panel {
    padding-inline: 12px !important;
  }
}


/* 2026-11-07 — Recomeçar ao lado de Voltar em todas as telas de perguntas.
   O mesmo botão do assistente é movido por JS; não há botão duplicado.
   Desfazer permanece disponível após Recomeçar quando houver histórico. */
body.app-focus-mode #toolView .tool-view-head {
  gap: 10px !important;
}
body.app-focus-mode #toolView .tool-view-head .wizard-header-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  padding: 9px 16px;
  border: 1px solid #526e8a;
  border-radius: 12px;
  background: #20344f;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
body.app-focus-mode #toolView .tool-view-head .wizard-header-action:hover,
body.app-focus-mode #toolView .tool-view-head .wizard-header-action:focus-visible {
  background: #315276;
  border-color: #88abd0;
}
body.app-focus-mode #toolView .tool-view-head .wizard-header-action[hidden] {
  display: none !important;
}
/* Ações migradas para o cabeçalho: removemos a linha vazia no assistente. */
body.app-focus-mode #wizardStage[data-view="steps"] > .tool-edit-actions {
  display: none !important;
}
@media (max-width: 700px) {
  body.app-focus-mode #toolView .tool-view-head { gap: 8px !important; }
  body.app-focus-mode #toolView .tool-view-head .wizard-header-action {
    min-height: 44px;
    padding: 8px 11px;
    font-size: 13px;
  }
}
@media (max-width: 370px) {
  body.app-focus-mode #toolView .tool-view-head .back-button {
    min-width: 0 !important;
    padding-inline: 11px !important;
  }
  body.app-focus-mode #toolView .tool-view-head .wizard-header-action {
    padding-inline: 9px;
    font-size: 12px;
  }
}

/* ================================================================
   Filtros divertidos: 2 etapas e 24 prévias, com o mesmo visual do Hub.
   ================================================================ */
#toolForm > .filter-selector-step { display:grid; gap:17px; }
#toolForm > .filter-selector-step .filter-select-native { display:none !important; }
.filter-gallery-note { margin:0; font-size:15px; line-height:1.5; color:#c5d5e6; }
.filter-gallery-tabs { display:flex; gap:9px; flex-wrap:wrap; }
.filter-gallery-tab { appearance:none; border:1px solid #3e556e; border-radius:999px; background:#0d1c30; color:#f6f9ff; padding:12px 19px; min-height:43px; cursor:pointer; font:800 13px/1.15 inherit; font-size:13px; font-weight:800; transition:border-color .15s,background .15s; }
.filter-gallery-tab.active { background:#fff; border-color:#fff; color:#102034; }
.filter-gallery-tab:not(.active):hover { background:#213750; }
.filter-gallery-section { display:grid; gap:13px; }
.filter-gallery-section[hidden] { display:none !important; }
.filter-gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.filter-gallery-heading h4 { font-size:17px; font-weight:850; color:#fff; margin:0; }
.filter-gallery-heading span { font-size:12px; color:#9dc7f5; }
.filter-gallery-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:13px; align-items:stretch; }
.filter-gallery-card { min-width:0; width:100%; appearance:none; display:grid; grid-template-rows:auto 1fr; gap:10px; text-align:left; cursor:pointer; background:#0b182b; border:2px solid #385068; border-radius:19px; padding:9px; color:#fff; font:inherit; transition:border-color .15s, background .15s, box-shadow .15s; }
.filter-gallery-card.selected { border-color:#ffa880; background:#2f2730; box-shadow:0 0 0 2px rgba(255,168,128,.18); }
.filter-gallery-card:focus-visible,.filter-gallery-tab:focus-visible { outline:3px solid #ffd0ac; outline-offset:2px; }
.filter-gallery-card:hover { border-color:#ffa880; }
.filter-gallery-preview { display:block; border-radius:13px; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:#e5edf4; }
.filter-gallery-meta { display:grid; gap:3px; min-width:0; }
.filter-gallery-meta strong { font-size:13px; line-height:1.26; color:#fff; font-weight:850; overflow-wrap:anywhere; }
.filter-gallery-meta small { font-size:11px; color:#b5c9dd; font-weight:650; }
.filter-selection-status { color:#afe4c8; font-size:13px; font-weight:750; margin:0; }

/* Área de ajustes opcionais posicionada no painel lateral do resultado,
   imediatamente acima de Editar minhas respostas. */
.filter-customize { background:#0a182b; border:1px solid #435a76; border-radius:15px; overflow:hidden; }
.filter-customize > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; color:#f7faff; font-size:15px; font-weight:850; cursor:pointer; list-style:none; }
.filter-customize > summary::-webkit-details-marker { display:none; }
.filter-customize > summary::before { content:'▸'; color:#ffad87; font-size:15px; }
.filter-customize[open] > summary::before { content:'▾'; }
.filter-customize > summary span { flex:1; }
.filter-customize > summary small { font-size:12px; color:#a5bbd3; font-weight:650; }
.filter-customize[open] > summary { border-bottom:1px solid #344e69; }
.filter-customize-body { display:grid; gap:16px; padding:16px; }
.filter-customize-body > p,.filter-face-controls > p { color:#c1d0e1; line-height:1.5; margin:0; font-size:13px; }
.filter-adjust-item { display:grid !important; gap:8px; color:#f4f8ff; margin:0 !important; }
.filter-adjust-item > span { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:800; }
.filter-adjust-item output { color:#ffb18b; font-variant-numeric:tabular-nums; }
.filter-adjust-item input[type="range"] { width:100%; min-height:28px; accent-color:#ffa273; cursor:pointer; }
.filter-adjust-item small { font-size:12px; color:#a6b9cc; font-weight:500; }
.filter-face-controls { display:grid; gap:16px; padding-top:14px; border-top:1px solid #344e69; }
.filter-face-controls[hidden] { display:none !important; }
.filter-reset-adjustments { min-height:44px; border:1px solid #4b6380; border-radius:10px; background:#253c56; color:#fff; font:800 13px inherit; cursor:pointer; padding:10px 16px; }
.filter-reset-adjustments:hover { background:#335470; }

@media(max-width:1200px){.filter-gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:820px){.filter-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}}
@media(max-width:600px){
  .filter-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .filter-gallery-card{padding:7px;border-radius:14px;gap:7px;}
  .filter-gallery-preview{border-radius:10px;}
  .filter-gallery-tab{font-size:12px;padding:10px 13px;min-height:40px;}
  .filter-gallery-meta strong{font-size:12px;}
  .filter-gallery-meta small{font-size:10px;}
  .filter-gallery-heading h4{font-size:15px;}
}

/* 2026-11-07 · Filtros divertidos: foto primeiro, depois prévia ao vivo
   com 24 filtros de texto em uma barra horizontal no rodapé. */
#toolForm > .filter-live-step {
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  gap: 10px;
  min-width: 0;
}
#toolForm > .filter-live-step .filter-select-native { display:none !important; }
.filter-live-instruction {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: #c5d6e8;
}
.filter-live-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 9px;
  height: clamp(310px, calc(100dvh - 350px), 660px);
  min-width: 0;
  min-height: 0;
  border-radius: 16px;
  padding: 8px 10px 10px;
  border: 1px solid #425b79;
  background: #0d1d31;
  overflow: hidden;
}
.filter-live-photo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: auto;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  justify-self: center;
  border-radius: 12px;
  overflow: hidden;
  background: #0a1422;
}
.filter-live-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.filter-live-arrow,
.filter-result-arrow:is(button) {
  appearance: none;
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 14px;
  background: rgba(9,20,36,.76);
  color: #fff;
  font: 900 42px/1 Arial, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.filter-live-arrow:hover,
.filter-result-arrow:is(button):hover { background: #223e60; }
.filter-live-arrow:focus-visible,
.filter-result-arrow:is(button):focus-visible,
.filter-live-option:focus-visible { outline: 3px solid #ffb48f; outline-offset: 2px; }
.filter-live-prev,
.filter-result-prev { left: 9px; }
.filter-live-next,
.filter-result-next { right: 9px; }
.filter-live-bottom {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 7px 0 1px;
  border-top: 1px solid #354c66;
}
.filter-live-summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.filter-live-selected { font-size: 14px; font-weight: 850; color: #fff; }
.filter-live-position { font-size: 12px; font-weight: 750; color: #c1cfe0; white-space: nowrap; }
.filter-live-rail {
  display: flex;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 7px;
  scrollbar-width: thin;
  scrollbar-color: #6a85a2 #0d1d31;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.filter-live-option {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 15px;
  color: #e2eaf5;
  background: #1a304c;
  border: 1px solid #52718f;
  border-radius: 12px;
  cursor: pointer;
  font: 800 13px/1.2 inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  scroll-snap-align: center;
}
.filter-live-option.selected {
  background: #fff;
  color: #13223b;
  border-color: #fff;
  box-shadow: 0 0 0 2px #ffad85;
}
.filter-live-option:not(.selected):hover { background: #294666; }
#previewPanel .canvas-wrap { position: relative; }
#previewPanel .canvas-wrap > .filter-result-prev { left: 10px; }
#previewPanel .canvas-wrap > .filter-result-next { right: 10px; }
#previewPanel .canvas-wrap > .filter-result-name {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 4;
  max-width: calc(100% - 30px);
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(9,20,36,.80);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
@media (max-width:700px) {
  .filter-live-stage { height: clamp(340px, calc(100dvh - 350px), 610px); padding: 7px; }
  .filter-live-arrow,
  .filter-result-arrow:is(button) { width: 42px; height: 48px; font-size: 33px; border-radius: 12px; }
  .filter-live-option { font-size: 12px; min-height: 42px; padding-inline: 11px; }
  .filter-live-instruction { font-size: 12px; }
}
@media (max-height:580px) and (min-width:701px) {
  .filter-live-stage { height: 295px; }
}
@media (prefers-reduced-motion:reduce) {
  .filter-live-rail { scroll-behavior: auto; }
}


/* 2026-11-07 · Correção dos cards de perguntas que escapam no mobile.
   Compensar margens e paddings em todos os contêineres, inclusive Filtros. */
@media (max-width: 700px) {
  body.app-focus-mode:not(.is-playing) #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="steps"] #toolForm) {
    display: block !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
  body.app-focus-mode:not(.is-playing) #workspaceLayout[data-stage="wizard"]:has(#wizardStage[data-view="steps"] #toolForm) > .editor-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 8px !important;
    box-sizing: border-box !important;
  }
  body.app-focus-mode #wizardStage[data-view="steps"],
  body.app-focus-mode #wizardStage[data-view="steps"] > #toolForm,
  body.app-focus-mode #wizardStage[data-view="steps"] > #toolForm > .field-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.app-focus-mode #wizardStage[data-view="steps"] > #toolForm > .field-group {
    padding: 10px !important;
    overflow-x: clip;
  }
  body.app-focus-mode #wizardStage[data-view="steps"] > .wizard-controls {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .filter-live-stage,
  .filter-live-bottom,
  .filter-live-rail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .filter-live-photo { min-width: 0; max-width: 100%; }
}

/* ==============================================================
   Escolha visual de 24 modelos: Polaroid, Figurinhas, Convites,
   Cartões, Capas e Vídeo. Escopo exclusivo da primeira pergunta.
   ============================================================= */
#toolForm > .field-group.hub-models-step {
  display: grid;
  gap: 14px;
  align-content: start;
}
#toolForm > .field-group.hub-models-step[hidden] { display: none !important; }
#toolForm .hub-model-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
}
#toolForm .hub-models-tip {
  margin: 0 0 5px;
  color: #d0deed;
  line-height: 1.45;
  font-size: 14px;
}
#toolForm .hub-models-title {
  margin: 10px 0 0;
  color: #ffffff;
  font-weight: 900;
  font-size: clamp(17px,1.5vw,22px);
  line-height: 1.3;
}
#toolForm .hub-models-tabs {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
#toolForm .hub-model-filter {
  appearance: none;
  border: 1px solid #4c6380;
  border-radius: 999px;
  background: #0d1b2e;
  color: #eff5fd;
  min-height: 41px;
  padding: 8px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
#toolForm .hub-model-filter.active {
  color: #071a2d;
  border-color: #ffffff;
  background: #ffffff;
}
#toolForm .hub-models-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: clamp(9px, 1.05vw, 16px);
  width: 100%;
}
#toolForm .hub-model-card {
  appearance: none;
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  width: 100%;
  padding: 10px;
  border: 2px solid #415771;
  border-radius: 17px;
  color: #f4f8fd;
  background: #0e1c30;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
#toolForm .hub-model-card[hidden] { display: none !important; }
#toolForm .hub-model-card.selected {
  border-color: #ffac85;
  background: #2d262c;
  box-shadow: inset 0 0 0 1px rgba(255,172,133,.35);
}
#toolForm .hub-model-card:is(:focus-visible,:hover) {
  outline: 3px solid rgba(255,172,133,.5);
  outline-offset: 2px;
}
#toolForm .hub-model-preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: #f6f7f8;
}
#toolForm .hub-model-meta {
  display: grid;
  min-width: 0;
  gap: 3px;
}
#toolForm .hub-model-meta strong {
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#toolForm .hub-model-meta small {
  color: #c9d4e2;
  font-size: 11px;
  font-weight: 650;
}
@media (max-width: 1250px) {
  #toolForm .hub-models-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 850px) {
  #toolForm .hub-models-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 540px) {
  #toolForm .hub-models-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  #toolForm .hub-model-card { padding: 6px; border-radius: 12px; }
  #toolForm .hub-model-meta strong { font-size: 12px; }
  #toolForm .hub-model-meta small { font-size: 10px; }
  #toolForm .hub-models-tip { font-size: 13px; }
}