:root {
      --primary: #1967d2;
      --primary-dark: #114b9e;
      --bg: #edf3fb;
      --panel: #ffffff;
      --line: #d6e0ee;
      --text: #132033;
      --muted: #607089;
      --code-bg: #171717;
      --code-head: #2b2b2b;
      --code-text: #f3f4f6;
      --note-bg: #fff7d6;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      font-family: "Segoe UI", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow: hidden;
    }

    header {
      height: 44px;
      background: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }

    header h1 {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -.2px;
    }

    .brand {
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
    }

    .brand span {
      color: #ffd54f;
    }

    .layout {
      height: calc(100vh - 44px);
      display: grid;
      grid-template-columns: 118px 1fr;
    }

    nav {
      background: #ffffff;
      border-right: 1px solid var(--line);
      padding: 12px 6px;
      overflow-y: auto;
    }

    nav h3 {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted);
      margin: 8px 6px 10px;
    }

    .nav-btn {
      width: 100%;
      border: 0;
      background: transparent;
      color: #0f172a;
      cursor: pointer;
      text-align: left;
      font-size: 13px;
      font-weight: 700;
      padding: 9px 8px;
      border-radius: 7px;
      margin-bottom: 4px;
    }

    .nav-btn:hover {
      background: #eaf2ff;
      color: var(--primary);
    }

    .nav-btn.active {
      background: var(--primary);
      color: white;
      box-shadow: 0 2px 7px rgba(25,103,210,.35);
    }

    main {
      padding: 14px;
      overflow: hidden;
    }

    .top-row {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .top-row h2 {
      font-size: 24px;
      color: var(--primary-dark);
      font-weight: 900;
      letter-spacing: -.4px;
    }

    .objective {
      font-size: 14px;
      color: #111827;
      text-align: right;
    }

    .objective strong {
      color: #000;
    }

    .workspace {
      height: calc(100vh - 44px - 28px - 44px);
      display: grid;
      grid-template-columns: minmax(560px, 1fr) minmax(390px, 470px);
      grid-template-rows: minmax(0, 2fr) minmax(220px, 1fr);
      gap: 10px;
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(15,23,42,.08);
    }

    .code-card {
      grid-column: 1;
      grid-row: 1;
      background: var(--code-bg);
      color: var(--code-text);
      display: flex;
      flex-direction: column;
    }

    .panel-title {
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .03em;
      font-weight: 700;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .code-card .panel-title,
    .new-code .panel-title {
      background: var(--code-head);
      color: #e5e7eb;
    }

    .btn-copy {
      border: 0;
      background: #444;
      color: white;
      border-radius: 6px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    pre {
      flex: 1;
      overflow: auto;
      padding: 16px 18px;
      font-family: Consolas, "Courier New", monospace;
      font-size: 13px;
      line-height: 1.48;
      white-space: pre;
    }

    .result-card {
      grid-column: 2;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .result-card .panel-title {
      background: #eaf2ff;
      color: var(--primary-dark);
      border-bottom: 1px solid var(--line);
      font-size: 15px;
      text-transform: none;
      letter-spacing: 0;
    }

    .preview-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      overflow: hidden;
    }

    .device {
      width: 330px;
      height: 560px;
      background: #111827;
      border-radius: 36px;
      padding: 18px 13px;
      box-shadow: 0 12px 35px rgba(15,23,42,.24);
      position: relative;
      transform-origin: center;
      max-height: 100%;
    }

    .device::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 78px;
      height: 5px;
      border-radius: 999px;
      background: #4b5563;
    }

    .screen {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      border: 2px solid #dbeafe;
    }

    .mock-card {
      width: 100%;
      height: 100%;
      background: #fff;
      border: 2px solid #93c5fd;
      border-radius: 20px;
      overflow: hidden;
    }

    .mock-title {
      height: 65px;
      background: #1967d2;
      border-bottom: 2px solid #114b9e;
      color: #fff;
      font-size: 21px;
      font-weight: 900;
      line-height: 1.15;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 10px;
    }

    .mock-body { padding: 15px; }
    .mock-row { display: flex; gap: 15px; }
    .mock-photo-box {
      width: 100px;
      height: 100px;
      background: #fef3c7;
      border: 2px solid #f59e0b;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mock-avatar {
      width: 90px;
      height: 90px;
      background: #dbeafe;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 52px;
    }
    .mock-data {
      flex: 1;
      background: #fce7f3;
      border: 2px solid #f472b6;
      padding: 8px;
    }
    .mock-label {
      font-size: 14px;
      font-weight: 800;
      margin-top: 2px;
    }
    .mock-input {
      height: 30px;
      background: #fff;
      border: 1px solid #9ca3af;
      border-radius: 5px;
      margin-bottom: 4px;
    }
    .mock-actions,
    .mock-final {
      height: 60px;
      margin-top: 15px;
      padding: 8px;
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      border: 2px solid;
    }
    .mock-actions { background: #dcfce7; border-color: #22c55e; }
    .mock-final { background: #cffafe; border-color: #06b6d4; }
    .mock-btn {
      flex: 1;
      height: 40px;
      border-radius: 8px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
    }
    .gray { background: #435061; }
    .green { background: #00853b; }
    .red { background: #d11a1a; }

    .new-code {
      grid-column: 1;
      grid-row: 2;
      background: #0f172a;
      color: #f8fafc;
      display: flex;
      flex-direction: column;
    }

    .new-code pre {
      font-size: 13px;
      line-height: 1.52;
      padding: 16px 18px;
    }

    .side-bottom {
      grid-column: 2;
      grid-row: 2;
      display: grid;
      grid-template-rows: 1fr;
      gap: 10px;
    }

    .note {
      background: var(--note-bg);
      border-left: 5px solid #f59e0b;
      padding: 12px 14px;
      border-radius: 10px;
      font-size: 14px;
      line-height: 1.45;
      box-shadow: 0 4px 14px rgba(15,23,42,.08);
    }

    .intro-view {
      grid-column: 1;
      grid-row: 1 / 3;
      background: white;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px;
      box-shadow: 0 4px 14px rgba(15,23,42,.08);
      overflow: auto;
    }

    .intro-view h3 {
      font-size: 24px;
      color: var(--primary-dark);
      margin-bottom: 14px;
    }

    .intro-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 22px;
    }

    .intro-box {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 18px;
      background: #f8fbff;
      line-height: 1.5;
    }


    .intro-kicker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #eaf2ff;
      color: #0f3f86;
      border: 1px solid #bfdbfe;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 10px;
    }

    .intro-lead {
      font-size: 15px;
      line-height: 1.55;
      color: #334155;
      max-width: 980px;
      margin-bottom: 14px;
    }

    .intro-section-title {
      margin: 18px 0 10px;
      color: var(--primary-dark);
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -.2px;
    }

    .intro-steps-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .intro-step-card {
      border: 1px solid #dbe3ef;
      background: #f8fbff;
      border-radius: 12px;
      padding: 12px;
      min-width: 0;
    }

    .intro-step-card strong {
      display: block;
      font-size: 13px;
      color: #0f3f86;
      margin-bottom: 4px;
      font-weight: 900;
    }

    .intro-step-card span,
    .intro-step-card li {
      font-size: 13px;
      color: #334155;
      line-height: 1.35;
    }

    .intro-step-card ul {
      margin-left: 16px;
    }

    .intro-two-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

    .intro-highlight {
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      border-left: 5px solid var(--primary);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 13px;
      color: #1e293b;
      line-height: 1.45;
      margin-top: 12px;
    }

    .snack-map {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .snack-pill {
      border: 1px solid #dbeafe;
      background: white;
      color: #1e293b;
      border-radius: 999px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .snack-code-flow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .snack-code-box {
      background: #111827;
      color: #e5e7eb;
      border-radius: 10px;
      padding: 11px 12px;
      font-family: Consolas, "Courier New", monospace;
      font-size: 12px;
      line-height: 1.35;
      min-height: 58px;
    }

    .snack-code-box b {
      display: block;
      color: #93c5fd;
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: 12px;
      margin-bottom: 4px;
    }

    .snack-flow-line {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .snack-flow-line span {
      background: #ffffff;
      border: 1px solid #dbe3ef;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 800;
      color: #334155;
    }


    .snack-quick {
      margin-top: 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      padding: 14px;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    .snack-quick h4 {
      font-size: 17px;
      color: var(--primary-dark);
      margin-bottom: 10px;
      font-weight: 900;
      letter-spacing: -.2px;
    }

    .snack-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .snack-card {
      min-width: 0;
      border: 1px solid #dbeafe;
      background: #ffffff;
      border-radius: 10px;
      padding: 9px 10px;
      line-height: 1.25;
    }

    .snack-card strong {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: #0f3f86;
      margin-bottom: 3px;
      font-weight: 900;
    }

    .snack-card span {
      display: block;
      font-size: 12px;
      color: #334155;
      word-break: normal;
      overflow-wrap: anywhere;
    }

    .snack-flow {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border-radius: 10px;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      color: #0f3f86;
      font-size: 12.5px;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .snack-flow strong {
      color: var(--primary-dark);
      margin-right: 2px;
      white-space: nowrap;
    }



    /* Resultado visual específico da Intro */
    .snack-result-mode .preview-area {
      padding: 0;
      background: #f8fbff;
    }

    .snack-result-mode .device {
      width: 100%;
      height: 100%;
      max-height: none;
      padding: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .snack-result-mode .device::before {
      display: none;
    }

    .snack-result-mode .screen {
      border: 0;
      border-radius: 0;
      background: #f8fbff;
    }

    .snack-mock {
      height: 100%;
      display: grid;
      grid-template-columns: 96px 1fr 145px;
      grid-template-rows: 36px 1fr 34px;
      border: 1px solid #dbe3ef;
      background: #ffffff;
      font-size: 10px;
      color: #132033;
    }

    .snack-topbar {
      grid-column: 1 / 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
      background: #f8fafc;
      border-bottom: 1px solid #dbe3ef;
      font-weight: 800;
    }

    .snack-save {
      background: #0b84ff;
      color: white;
      border-radius: 5px;
      padding: 5px 9px;
      font-weight: 900;
    }

    .snack-left {
      border-right: 1px solid #dbe3ef;
      background: #f8fafc;
      padding: 7px;
      overflow: hidden;
    }

    .snack-left h5,
    .snack-editor h5,
    .snack-preview h5 {
      font-size: 10px;
      color: #0f3f86;
      margin: 0 0 6px;
      font-weight: 900;
    }

    .snack-file {
      padding: 4px 5px;
      border-radius: 4px;
      background: #eaf2ff;
      margin-bottom: 4px;
      font-weight: 700;
    }

    .snack-project-tools {
      display: flex;
      gap: 4px;
      margin: 5px 0;
    }

    .snack-tool {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      display: grid;
      place-items: center;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      font-weight: 900;
    }

    .snack-editor {
      padding: 7px;
      background: #ffffff;
      overflow: hidden;
      border-right: 1px solid #dbe3ef;
    }

    .snack-code-lines {
      font-family: Consolas, 'Courier New', monospace;
      font-size: 9.5px;
      line-height: 1.55;
      color: #1f2937;
      white-space: nowrap;
    }

    .snack-preview {
      padding: 7px;
      background: #eef2f7;
      overflow: hidden;
    }

    .snack-phone-mini {
      height: 210px;
      border: 8px solid #111827;
      border-radius: 22px;
      background: white;
      margin: 8px auto 0;
      max-width: 112px;
      display: grid;
      place-items: center;
      text-align: center;
      font-weight: 900;
      color: #1967d2;
    }

    .snack-bottom {
      grid-column: 1 / 4;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      background: #f8fafc;
      border-top: 1px solid #dbe3ef;
      font-weight: 800;
      color: #334155;
      overflow: hidden;
      white-space: nowrap;
    }

    .intro-view .intro-section-title:first-of-type {
      margin-top: 8px;
    }

    @media (max-width: 1050px) {
      body { overflow: auto; }
      .layout { height: auto; grid-template-columns: 1fr; }
      nav { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
      nav h3 { display: none; }
      .nav-btn { min-width: max-content; }
      main { overflow: visible; }
      .workspace { height: auto; grid-template-columns: 1fr; grid-template-rows: auto; }
      .code-card, .result-card, .new-code, .side-bottom, .intro-view { grid-column: auto; grid-row: auto; }
      .code-card { height: 520px; }
      .result-card { height: 640px; }
      .intro-grid { grid-template-columns: 1fr; }
      .snack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }


    /* ===== Versão responsiva para smartphones ===== */
    @media (max-width: 720px) {
      html,
      body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background: var(--bg);
      }

      header {
        position: sticky;
        top: 0;
        z-index: 50;
        height: auto;
        min-height: 48px;
        padding: 8px 10px;
        gap: 4px;
        flex-direction: column;
        align-items: flex-start;
      }

      header h1 {
        font-size: 15px;
        line-height: 1.2;
      }

      .brand {
        font-size: 12px;
        opacity: .95;
      }

      .layout {
        display: block;
        height: auto;
      }

      nav {
        position: sticky;
        top: 48px;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        padding: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(6px);
      }

      nav h3 {
        display: none;
      }

      .nav-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: auto;
        margin: 0;
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 999px;
      }

      main {
        padding: 10px;
        overflow: visible;
      }

      .top-row {
        height: auto;
        min-height: 0;
        display: block;
        margin-bottom: 8px;
      }

      .top-row h2 {
        font-size: 20px;
        line-height: 1.2;
        margin-bottom: 4px;
      }

      .objective {
        font-size: 13px;
        text-align: left;
        line-height: 1.35;
      }

      .workspace {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .card {
        border-radius: 10px;
      }

      .code-card {
        order: 1;
        height: 340px;
        min-height: 340px;
      }

      .new-code {
        order: 2;
        height: 250px;
        min-height: 250px;
      }

      .result-card {
        order: 3;
        height: auto;
        min-height: 520px;
      }

      .side-bottom {
        order: 4;
        display: block;
      }

      .note {
        font-size: 13px;
        padding: 10px 12px;
      }

      .panel-title {
        height: 32px;
        padding: 0 10px;
        font-size: 10px;
      }

      .result-card .panel-title {
        font-size: 14px;
      }

      .btn-copy {
        padding: 5px 8px;
        font-size: 11px;
      }

      pre {
        padding: 12px;
        font-size: 12px;
        line-height: 1.45;
      }

      .new-code pre {
        padding: 12px;
        font-size: 12px;
        line-height: 1.48;
      }

      .preview-area {
        min-height: 485px;
        padding: 8px;
      }

      .device {
        width: min(300px, calc(100vw - 44px));
        height: auto;
        aspect-ratio: 330 / 560;
        max-height: none;
        padding: 16px 11px;
        border-radius: 32px;
        transform: none;
      }

      .device::before {
        width: 62px;
        height: 4px;
      }

      .screen {
        border-radius: 22px;
      }

      .mock-title {
        height: 58px;
        font-size: 18px;
      }

      .mock-body {
        padding: 12px;
      }

      .mock-row {
        gap: 10px;
      }

      .mock-photo-box {
        width: 88px;
        height: 88px;
      }

      .mock-avatar {
        width: 78px;
        height: 78px;
        font-size: 44px;
      }

      .mock-data {
        padding: 6px;
      }

      .mock-label {
        font-size: 12px;
      }

      .mock-input {
        height: 27px;
        margin-bottom: 4px;
      }

      .mock-actions,
      .mock-final {
        height: 54px;
        margin-top: 12px;
        padding: 7px;
        gap: 6px;
      }

      .mock-btn {
        height: 36px;
        font-size: 11px;
      }


      .snack-result-mode .result-card {
        min-height: 520px;
      }

      .snack-mock {
        grid-template-columns: 86px 1fr;
        grid-template-rows: 34px 1fr 210px 34px;
      }

      .snack-topbar,
      .snack-bottom {
        grid-column: 1 / 3;
      }

      .snack-preview {
        grid-column: 1 / 3;
        border-top: 1px solid #dbe3ef;
      }

      .snack-phone-mini {
        height: 165px;
      }


      .intro-view {
        padding: 14px;
      }

      .intro-view h3 {
        font-size: 21px;
      }

      .intro-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 14px;
      }

      .intro-box {
        padding: 12px;
      }


      .intro-steps-grid,
      .intro-two-cols,
      .snack-code-flow {
        grid-template-columns: 1fr;
      }

      .snack-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .snack-pill {
        white-space: normal;
      }

      .snack-quick {
        margin-top: 14px;
        padding: 10px;
        border-radius: 12px;
      }

      .snack-quick h4 {
        font-size: 16px;
      }

      .snack-grid {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .snack-card {
        padding: 8px 9px;
      }

      .snack-flow {
        display: block;
        line-height: 1.35;
      }
    }

    @media (max-width: 380px) {
      .code-card { height: 320px; min-height: 320px; }
      .new-code { height: 235px; min-height: 235px; }
      .preview-area { min-height: 455px; }
      .device { width: min(278px, calc(100vw - 36px)); }
      .mock-title { font-size: 16px; }
      .mock-photo-box { width: 78px; height: 78px; }
      .mock-avatar { width: 70px; height: 70px; font-size: 38px; }
      .mock-row { gap: 8px; }
      .mock-body { padding: 10px; }
      .mock-label { font-size: 11px; }
      .mock-input { height: 24px; }
      .mock-btn { font-size: 10px; }
    }

  

    /* AJUSTES RESPONSIVOS — PC, NOTEBOOK, TABLET E SMARTPHONE */
    html {
      height: 100%;
    }

    body {
      overflow: auto;
    }

    main {
      min-width: 0;
    }

    .workspace {
      min-width: 0;
    }

    .card,
    .code-card,
    .new-code,
    .result-card,
    .intro-view {
      min-width: 0;
    }

    .device {
      width: min(360px, 94%);
      height: auto;
      aspect-ratio: 330 / 560;
      max-height: calc(100% - 10px);
      padding: clamp(10px, 3vw, 18px) clamp(8px, 2vw, 13px);
    }

    .screen,
    .mock-card {
      min-height: 0;
    }

    .preview-area {
      min-height: 0;
    }

    @media (min-width: 1400px) {
      .workspace {
        grid-template-columns: minmax(560px, 1.45fr) minmax(410px, .85fr);
      }

      .device {
        width: min(390px, 96%);
      }
    }

    @media (max-width: 1280px) {
      header h1 {
        font-size: 16px;
      }

      .brand {
        font-size: 13px;
      }

      .layout {
        grid-template-columns: 104px minmax(0, 1fr);
      }

      .nav-btn {
        font-size: 12px;
        padding: 8px 6px;
      }

      main {
        padding: 10px;
      }

      .top-row h2 {
        font-size: 21px;
      }

      .workspace {
        height: calc(100vh - 44px - 20px - 44px);
        grid-template-columns: minmax(430px, 1.25fr) minmax(330px, .9fr);
        grid-template-rows: minmax(0, 1.7fr) minmax(200px, 1fr);
        gap: 8px;
      }

      pre {
        font-size: 12px;
        line-height: 1.44;
        padding: 13px 14px;
      }

      .new-code pre {
        font-size: 12px;
        line-height: 1.48;
      }

      .panel-title {
        height: 31px;
      }

      .device {
        width: min(335px, 96%);
      }
    }

    @media (max-width: 1024px) {
      body {
        overflow: auto;
      }

      header {
        height: auto;
        min-height: 44px;
        padding: 8px 12px;
        gap: 10px;
      }

      header h1 {
        font-size: 15px;
      }

      .layout {
        height: auto;
        min-height: calc(100vh - 44px);
        grid-template-columns: 92px minmax(0, 1fr);
      }

      nav {
        padding: 8px 5px;
        height: auto;
        max-height: none;
        position: sticky;
        top: 0;
      }

      nav h3 {
        font-size: 9px;
        margin: 6px 4px 8px;
      }

      .nav-btn {
        font-size: 11px;
        padding: 7px 5px;
        margin-bottom: 3px;
      }

      main {
        overflow: visible;
      }

      .top-row {
        height: auto;
        min-height: 40px;
        align-items: flex-start;
      }

      .objective {
        font-size: 12px;
      }

      .workspace {
        height: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
      }

      .code-card,
      .result-card,
      .new-code,
      .side-bottom,
      .intro-view {
        grid-column: 1 !important;
        grid-row: auto !important;
      }

      .code-card {
        height: 380px;
      }

      .new-code {
        height: 260px;
      }

      .result-card {
        min-height: 520px;
      }

      .preview-area {
        min-height: 470px;
      }

      .side-bottom {
        min-height: 120px;
      }

      .intro-view {
        max-height: none;
        overflow: visible;
      }

      .intro-steps-grid,
      .intro-two-cols,
      .snack-map {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 720px) {
      header {
        display: block;
      }

      header h1 {
        font-size: 14px;
        margin-bottom: 4px;
      }

      .brand {
        font-size: 12px;
      }

      .layout {
        display: block;
      }

      nav {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 7px;
        white-space: nowrap;
      }

      nav h3 {
        display: none;
      }

      .nav-btn {
        width: auto;
        flex: 0 0 auto;
        font-size: 12px;
        padding: 8px 10px;
        margin: 0;
      }

      main {
        padding: 10px;
      }

      .top-row {
        display: block;
        margin-bottom: 8px;
      }

      .top-row h2 {
        font-size: 20px;
        margin-bottom: 4px;
      }

      .objective {
        text-align: left;
        font-size: 12px;
      }

      .code-card {
        height: 360px;
      }

      .new-code {
        height: 270px;
      }

      .result-card {
        min-height: 500px;
      }

      .preview-area {
        min-height: 450px;
        padding: 8px;
      }

      .device {
        width: min(350px, 96%);
      }

      .intro-view {
        padding: 14px;
      }

      .intro-view h3 {
        font-size: 21px;
      }

      .intro-section-title {
        font-size: 16px;
      }

      .intro-steps-grid,
      .intro-two-cols,
      .snack-map {
        grid-template-columns: 1fr;
      }

      .note {
        font-size: 13px;
      }
    }

    @media (max-width: 420px) {
      .code-card {
        height: 340px;
      }

      .new-code {
        height: 250px;
      }

      .result-card {
        min-height: 460px;
      }

      .preview-area {
        min-height: 410px;
      }

      .device {
        width: min(315px, 98%);
        border-radius: 30px;
      }

      pre {
        font-size: 11px;
      }
    }



    /* ===== Ajuste premium geral: notebook, desktop, tablet e celular ===== */
    @media (min-width: 1025px) {
      main {
        padding: 12px 14px 10px;
      }

      .top-row {
        height: 40px;
        margin-bottom: 8px;
      }

      .top-row h2 {
        font-size: clamp(21px, 1.55vw, 25px);
      }

      .workspace {
        height: calc(100vh - 44px - 12px - 40px - 10px);
        grid-template-columns: minmax(520px, 1fr) minmax(420px, 480px);
        grid-template-rows: minmax(0, 58%) minmax(220px, 42%);
        gap: 10px;
      }

      .code-card {
        min-height: 0;
      }

      .new-code {
        min-height: 0;
      }

      .result-card {
        min-height: 0;
      }

      .side-bottom {
        align-self: start;
        min-height: 0;
        height: auto;
      }

      .note {
        min-height: 0;
        max-height: 110px;
        overflow: auto;
        padding: 10px 13px;
        font-size: 13px;
      }

      .preview-area {
        padding: 8px;
      }

      .device {
        width: min(96%, 430px);
        height: min(calc(100% - 14px), 365px);
        aspect-ratio: auto;
        border-radius: 30px;
        padding: 15px 11px;
      }

      .device::before {
        top: 7px;
        width: 70px;
        height: 5px;
      }

      .screen {
        border-radius: 20px;
      }

      .mock-title {
        height: 60px;
        font-size: clamp(18px, 1.5vw, 22px);
      }

      .mock-body {
        padding: 14px;
      }

      .mock-row {
        gap: 14px;
      }

      .mock-photo-box {
        width: 100px;
        height: 100px;
      }

      .mock-avatar {
        width: 86px;
        height: 86px;
        font-size: 48px;
      }

      .mock-data {
        padding: 8px;
      }

      .mock-actions,
      .mock-final {
        height: 58px;
        margin-top: 14px;
        padding: 8px;
      }

      .mock-btn {
        height: 38px;
        font-size: 13px;
      }
    }

    @media (min-width: 1281px) and (max-height: 920px) {
      .workspace {
        grid-template-columns: minmax(520px, 1fr) minmax(430px, 500px);
        grid-template-rows: minmax(0, 57%) minmax(225px, 43%);
      }

      .device {
        width: min(98%, 440px);
        height: min(calc(100% - 12px), 370px);
      }
    }

    @media (max-width: 1024px) {
      .device {
        width: min(96%, 430px);
        height: 370px;
        aspect-ratio: auto;
      }

      .note {
        max-height: 140px;
        overflow: auto;
      }
    }

    @media (max-width: 720px) {
      .device {
        width: min(96%, 390px);
        height: 340px;
        aspect-ratio: auto;
        border-radius: 26px;
      }

      .mock-title {
        height: 56px;
        font-size: 18px;
      }

      .mock-body {
        padding: 10px;
      }

      .mock-row {
        gap: 8px;
      }

      .mock-photo-box {
        width: 82px;
        height: 82px;
      }

      .mock-avatar {
        width: 72px;
        height: 72px;
        font-size: 40px;
      }

      .mock-data {
        padding: 6px;
      }

      .mock-label {
        font-size: 12px;
      }

      .mock-input {
        height: 26px;
      }

      .mock-actions,
      .mock-final {
        height: 52px;
        margin-top: 10px;
        padding: 6px;
      }

      .mock-btn {
        height: 34px;
        font-size: 11px;
      }
    }


    /* ===== CORREÇÃO PREMIUM DEFINITIVA DO RESULTADO VISUAL ===== */
    @media (min-width: 1025px) {
      .workspace {
        grid-template-columns: minmax(520px, 1fr) minmax(440px, 520px) !important;
        grid-template-rows: minmax(0, 56%) minmax(0, 44%) !important;
      }

      .code-card {
        grid-column: 1 !important;
        grid-row: 1 !important;
      }

      .new-code {
        grid-column: 1 !important;
        grid-row: 2 !important;
      }

      .result-card {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
      }

      .result-card .panel-title {
        flex: 0 0 33px !important;
      }

      .preview-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 10px 10px 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
      }

      .side-bottom {
        flex: 0 0 auto !important;
        display: block !important;
        padding: 0 10px 10px !important;
        min-height: 0 !important;
        height: auto !important;
      }

      .note {
        max-height: 74px !important;
        min-height: 0 !important;
        overflow: auto !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
      }

      .device {
        width: min(96%, 500px) !important;
        height: min(96%, 600px) !important;
        aspect-ratio: auto !important;
        max-height: none !important;
        border-radius: 36px !important;
        padding: 17px 13px !important;
      }

      .screen {
        border-radius: 22px !important;
      }

      .mock-title {
        height: 64px !important;
        font-size: 22px !important;
      }

      .mock-body {
        padding: 15px !important;
      }

      .mock-row {
        gap: 15px !important;
      }

      .mock-photo-box {
        width: 100px !important;
        height: 100px !important;
      }

      .mock-avatar {
        width: 88px !important;
        height: 88px !important;
        font-size: 48px !important;
      }

      .mock-actions,
      .mock-final {
        height: 60px !important;
        margin-top: 15px !important;
        padding: 8px !important;
      }
    }

    @media (min-width: 1280px) and (max-height: 940px) {
      .device {
        width: min(96%, 480px) !important;
        height: min(96%, 570px) !important;
      }
    }

    @media (max-width: 1024px) {
      .result-card {
        display: flex !important;
        flex-direction: column !important;
      }

      .preview-area {
        flex: 1 1 auto !important;
      }

      .side-bottom {
        display: block !important;
        padding: 0 10px 10px !important;
      }

      .device {
        width: min(96%, 430px) !important;
        height: 560px !important;
        max-height: none !important;
        aspect-ratio: auto !important;
      }
    }

    @media (max-width: 720px) {
      .device {
        width: min(96%, 360px) !important;
        height: 520px !important;
      }

      .side-bottom {
        padding: 0 8px 8px !important;
      }
    }

    @media (max-width: 420px) {
      .device {
        width: min(98%, 330px) !important;
        height: 500px !important;
      }
    }

  
/* Correção final: título do preview em uma única linha */
.mock-title {
  font-size: 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}


/* ===== MENU PRINCIPAL DE MÓDULOS ===== */
.module-menu {
  height: 48px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  overflow-x: auto;
}

.module-btn {
  border: 1px solid #dbeafe;
  background: #f8fbff;
  color: #0f3f86;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.module-btn:hover {
  background: #eaf2ff;
  color: var(--primary);
}

.module-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 2px 7px rgba(25,103,210,.28);
}

.layout {
  height: calc(100vh - 92px);
}

.module-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.module-page-box {
  border: 1px solid #dbe3ef;
  background: #f8fbff;
  border-radius: 12px;
  padding: 14px;
  line-height: 1.45;
}

.module-page-box strong {
  display: block;
  color: #0f3f86;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 6px;
}

.module-page-box span {
  color: #334155;
  font-size: 13px;
}

@media (max-width: 1050px) {
  .layout {
    height: auto;
  }
}

@media (max-width: 720px) {
  .module-menu {
    height: auto;
    min-height: 46px;
    padding: 7px;
  }

  .module-btn {
    font-size: 12px;
    padding: 8px 10px;
  }

  .module-page-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== BOTÃO VOLTAR AO PORTAL ===== */
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.portal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 6px 10px;
}

.portal-link:hover {
  background: rgba(255,255,255,.24);
}

@media (max-width: 720px) {
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .portal-link {
    font-size: 12px;
    padding: 5px 9px;
  }
}


/* ===== AJUSTE RESPONSIVO CIRÚRGICO — REACT NATIVE =====
   Impede que menu lateral e preview desapareçam em telas estreitas,
   especialmente em celular usando modo computador.
*/
@media (max-width: 1050px) {
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .layout {
    height: auto !important;
    display: block !important;
  }

  #menu,
  nav#menu {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: rgba(255,255,255,.98) !important;
    padding: 8px !important;
  }

  #menu h3,
  nav#menu h3 {
    display: none !important;
  }

  #menu .nav-btn,
  nav#menu .nav-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
  }

  main {
    overflow: visible !important;
    min-width: 0 !important;
  }

  .workspace {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .code-card,
  .new-code,
  .result-card,
  .side-bottom,
  .intro-view {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .code-card {
    order: 1 !important;
    height: 420px !important;
    min-height: 420px !important;
  }

  .new-code {
    order: 2 !important;
    height: 300px !important;
    min-height: 300px !important;
  }

  .result-card {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 620px !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .preview-area {
    flex: 1 1 auto !important;
    min-height: 540px !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .device {
    width: min(96%, 420px) !important;
    height: 560px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .side-bottom {
    order: 4 !important;
    display: block !important;
    padding: 0 8px 8px !important;
  }

  .note {
    max-height: none !important;
  }
}

@media (max-width: 720px) {
  .module-menu {
    position: sticky !important;
    top: 0 !important;
    z-index: 55 !important;
  }

  #menu,
  nav#menu {
    top: 46px !important;
  }

  .result-card {
    min-height: 560px !important;
  }

  .preview-area {
    min-height: 500px !important;
  }

  .device {
    width: min(96%, 360px) !important;
    height: 520px !important;
  }
}


/* ===== MÓDULO 2 — FLEXBOX VISUAL INTERATIVO ===== */
.flex-lab-shell{display:flex;flex-direction:column;gap:10px;height:100%}
.flex-clean-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(148,163,184,.25)}
.flex-clean-option{border:1px solid #bfdbfe;background:#eff6ff;color:#0f3f86;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;cursor:pointer;transition:.15s}
.flex-clean-option:hover{background:#dbeafe}.flex-clean-option.active{background:#1967d2;color:white;border-color:#1967d2;box-shadow:0 3px 9px rgba(25,103,210,.28)}
.flex-clean-text{background:#f8fbff;border:1px solid #dbe3ef;border-left:5px solid #1967d2;border-radius:12px;padding:10px 12px;color:#1e293b;font-family:"Segoe UI",Arial,sans-serif;font-size:13px;line-height:1.45;white-space:normal}.flex-clean-text strong{color:#0f3f86}
.flex-lab-code{white-space:pre}.flex-lab-code .hl{display:inline-block;background:#fde68a;color:#111827;border-radius:6px;padding:0 4px;font-weight:900}
.flex-lab-preview-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.flex-lab-phone{width:min(96%,410px);height:min(96%,610px);background:#111827;border-radius:34px;padding:16px 12px;box-shadow:0 14px 36px rgba(15,23,42,.24);position:relative}.flex-lab-phone:before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:70px;height:5px;border-radius:999px;background:#4b5563}.flex-lab-screen{height:100%;background:#fff;border:2px solid #dbeafe;border-radius:22px;overflow:hidden;position:relative}.flex-app{height:100%;background:#fff;border:2px solid #93c5fd;border-radius:20px;overflow:hidden;position:relative}.flex-app-title{height:62px;background:#1967d2;border-bottom:2px solid #114b9e;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;font-weight:900}.flex-app-body{padding:14px;position:relative}.flex-foto-dados{display:flex;gap:14px;position:relative;border:2px solid transparent;border-radius:12px;transition:.18s}.flex-foto-dados.column{flex-direction:column;align-items:center;gap:10px}.flex-foto{width:96px;height:96px;background:#fef3c7;border:2px solid #f59e0b;display:flex;align-items:center;justify-content:center;border-radius:6px;flex:0 0 auto}.flex-avatar{width:82px;height:82px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;font-size:46px}.flex-dados{flex:1;background:#fce7f3;border:2px solid #f472b6;padding:8px;min-width:0;transition:.18s}.flex-foto-dados.column .flex-dados{width:100%}.flex-lab-label{font-size:12px;font-weight:900;margin:2px 0 3px}.flex-input{height:27px;background:#fff;border:1px solid #9ca3af;border-radius:5px;margin-bottom:4px}.flex-actions{min-height:58px;margin-top:14px;padding:7px;display:flex;gap:8px;align-items:center;border:2px solid #22c55e;background:#dcfce7;transition:.18s}.flex-actions .mock-btn{min-width:62px}.flex-final{min-height:58px;margin-top:14px;padding:7px;display:flex;gap:8px;align-items:center;justify-content:space-between;border:2px solid #06b6d4;background:#cffafe}.flex-axis{position:absolute;z-index:5;pointer-events:none}.flex-axis.row{height:3px;left:22px;right:22px;top:134px;background:#f59e0b;border-radius:999px}.flex-axis.column{width:3px;top:82px;bottom:150px;left:50%;background:#f59e0b;border-radius:999px}.flex-axis.cross{width:3px;height:112px;right:25px;top:84px;background:#14b8a6;border-radius:999px}.flex-badge{position:absolute;z-index:6;background:#fff7ed;border:1px solid #fed7aa;color:#92400e;font-size:10px;font-weight:900;border-radius:999px;padding:4px 8px;box-shadow:0 4px 10px rgba(15,23,42,.10)}.flex-badge.blue{background:#ecfeff;border-color:#a5f3fc;color:#155e75}.flex-badge.row{top:108px;right:22px}.flex-badge.column{top:88px;left:50%;transform:translateX(8px)}.flex-badge.cross{top:100px;right:34px}.flex-highlight{position:absolute;z-index:4;border:2px dashed #f59e0b;background:rgba(245,158,11,.07);border-radius:12px;pointer-events:none}.flex-highlight.main{left:16px;right:16px;top:78px;height:130px}.flex-highlight.actions{left:16px;right:16px;top:222px;height:78px}.flex-highlight.data{left:126px;right:16px;top:78px;height:130px}.flex-lab-caption{position:absolute;left:10px;right:10px;bottom:10px;z-index:8;background:rgba(15,23,42,.88);color:#fff;border-radius:12px;padding:8px 10px;font-size:11px;line-height:1.28}.flex-lab-caption b{color:#fde68a}.flex-wrap-demo{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:8px;background:#eff6ff;border-radius:10px}.flex-wrap-pill{width:58px;height:26px;border-radius:999px;background:#1967d2;color:white;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900}@media(max-width:1050px){.flex-lab-phone{height:560px;width:min(96%,390px)}}@media(max-width:720px){.flex-lab-phone{width:min(98%,350px);height:530px}.flex-app-title{font-size:16px}.flex-foto{width:82px;height:82px}.flex-avatar{width:70px;height:70px;font-size:38px}.flex-dados{padding:6px}}


/* ===== CORREÇÃO GLOBAL DE ROLAGEM DOS PAINÉIS =====
   Corrige cortes no final dos blocos de código e explicação.
*/
.code-card,
.new-code,
#codeCard,
#newCodeCard {
  min-height: 0 !important;
  overflow: hidden !important;
}

.code-card pre,
.new-code pre,
#fullCode,
#newCode {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  display: block !important;
  padding-bottom: 56px !important;
  scroll-padding-bottom: 56px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1050px) {
  .code-card,
  .new-code,
  #codeCard,
  #newCodeCard {
    min-height: 300px !important;
  }

  .code-card pre,
  .new-code pre,
  #fullCode,
  #newCode {
    padding-bottom: 64px !important;
  }
}

#newCode .flex-clean-options {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #0f172a;
  padding-top: 2px;
}


/* ===== 99. EXERCÍCIOS INTERFACE — REACT NATIVE ===== */
.exercise-native {
  color: #172033;
  font-family: "Segoe UI", Arial, sans-serif;
}
.exercise-native .topline{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
}
.exercise-native h2{
  color:#0F4A9C;
  font-size:26px;
  line-height:1.15;
}
.exercise-native .objective{
  font-size:14px;
  color:#0f172a;
  text-align:right;
}
.exercise-native .content-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.exercise-native .panel{
  background:#ffffff;
  border:1px solid #d7e2f0;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(24,43,77,.10);
  overflow:hidden;
}
.exercise-native .panel-title{
  background:#edf5ff;
  border-bottom:1px solid #d7e2f0;
  color:#0F4A9C;
  font-weight:900;
  padding:10px 14px;
  font-size:15px;
  height:auto;
  display:block;
  text-transform:none;
  letter-spacing:0;
}
.exercise-native .panel-body{padding:14px}
.exercise-native .intro-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.exercise-native .mini-card{
  background:#fff;
  border:1px solid #d7e2f0;
  border-radius:10px;
  padding:12px;
  min-height:82px;
}
.exercise-native .mini-card strong{display:block;color:#0F4A9C;font-size:14px;margin-bottom:5px}
.exercise-native .mini-card p,.exercise-native .intro-text{font-size:14px;line-height:1.45;color:#243047}
.exercise-native .exercise-grid{
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:14px;
  align-items:start;
}
.exercise-native .brief h3{font-size:18px;color:#0F4A9C;margin-bottom:8px}
.exercise-native .brief p{font-size:14px;line-height:1.5;margin-bottom:10px;color:#233047}
.exercise-native .brief ul{padding-left:18px;margin:6px 0 12px}
.exercise-native .brief li{font-size:14px;line-height:1.45;margin-bottom:4px}
.exercise-native .tagline{
  background:#fff8db;
  border-left:4px solid #f59e0b;
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.45;
  color:#334155;
}
.exercise-native .mockup-wrap{
  background:#f8fbff;
  border:1px solid #d7e2f0;
  border-radius:12px;
  padding:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:420px;
}
.exercise-native .phone{
  width:min(100%,390px);
  aspect-ratio:9/13.5;
  border:8px solid #101827;
  border-radius:28px;
  background:#ffffff;
  box-shadow:0 14px 28px rgba(15,23,42,.18);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.exercise-native .appbar{
  min-height:58px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:19px;
  font-weight:900;
  line-height:1.05;
  padding:8px;
}
.exercise-native .mock-body{
  flex:1;
  padding:14px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.exercise-native .row{display:flex;gap:12px;align-items:stretch}
.exercise-native .col{display:flex;flex-direction:column;gap:8px;flex:1}
.exercise-native .photo-box,.exercise-native .icon-box{
  width:96px;height:96px;border:2px solid;display:flex;align-items:center;justify-content:center;
  font-size:40px;border-radius:4px;background:#f8fafc;
}
.exercise-native .field-group{border:2px solid;border-radius:4px;padding:10px;background:#fff}
.exercise-native .label{font-size:13px;font-weight:900;margin-bottom:4px;color:#172033}
.exercise-native .input{height:30px;border:1.5px solid #9aa6b2;border-radius:5px;background:#fff;margin-bottom:8px}
.exercise-native .input.small{height:26px;margin-bottom:6px}
.exercise-native .textarea{height:70px;border:1.5px solid #9aa6b2;border-radius:8px;background:#fff}
.exercise-native .button-row{display:flex;gap:8px;border:2px solid;border-radius:4px;padding:9px;background:#fff;margin-top:auto}
.exercise-native .btn{flex:1;border-radius:7px;color:#fff;font-weight:900;font-size:13px;text-align:center;padding:11px 4px}
.exercise-native .gallery{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.exercise-native .thumb-card{
  background:#fff;
  border:1px solid #d7e2f0;
  border-radius:12px;
  padding:10px;
  box-shadow:0 8px 24px rgba(24,43,77,.10);
  cursor:pointer;
  transition:.18s;
}
.exercise-native .thumb-card:hover{transform:translateY(-2px);border-color:#93c5fd}
.exercise-native .thumb-title{font-size:13px;font-weight:900;color:#0f4a9c;margin-bottom:8px;text-align:center}
.exercise-native .thumb-phone{
  width:100%;aspect-ratio:9/13;border:5px solid #111827;border-radius:18px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
}
.exercise-native .thumb-bar{height:24px;color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;text-align:center;padding:2px}
.exercise-native .thumb-body{flex:1;padding:6px;display:flex;flex-direction:column;gap:5px}
.exercise-native .mini-line{height:18px;border:1px solid #9aa6b2;border-radius:4px;background:#fff}
.exercise-native .mini-square{width:42px;height:42px;border:1.5px solid;display:flex;align-items:center;justify-content:center;font-size:18px;background:#f8fafc}
.exercise-native .mini-row{display:flex;gap:5px}
.exercise-native .mini-col{flex:1;display:flex;flex-direction:column;gap:5px}
.exercise-native .mini-btns{margin-top:auto;display:flex;gap:4px}
.exercise-native .mini-btn{flex:1;height:20px;border-radius:4px}
.exercise-native .obs{
  background:#fff8db;
  border-left:4px solid #f59e0b;
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.45;
  color:#334155;
  margin-top:14px;
}
.exercise-native .purple{background:#7c3aed}.exercise-native .blue{background:#1967d2}.exercise-native .green{background:#15803d}.exercise-native .orange{background:#ea580c}.exercise-native .dark{background:#334155}
.exercise-native .b-purple{border-color:#8b5cf6;background:#f5f3ff}.exercise-native .b-blue{border-color:#60a5fa;background:#eff6ff}.exercise-native .b-green{border-color:#22c55e;background:#f0fdf4}.exercise-native .b-orange{border-color:#f59e0b;background:#fffbeb}.exercise-native .b-pink{border-color:#f472b6;background:#fdf2f8}
.exercise-native .btn-green{background:#16a34a}.exercise-native .btn-blue{background:#2563eb}.exercise-native .btn-red{background:#dc2626}.exercise-native .btn-gray{background:#475569}.exercise-native .btn-orange{background:#ea580c}.exercise-native .btn-purple{background:#7c3aed}
@media (max-width:1100px){
  .exercise-native .exercise-grid{grid-template-columns:1fr}
  .exercise-native .mockup-wrap{min-height:auto}
  .exercise-native .phone{max-width:360px}
  .exercise-native .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .exercise-native .topline{display:block}
  .exercise-native .objective{text-align:left;margin-top:6px}
  .exercise-native .intro-grid{grid-template-columns:1fr}
  .exercise-native .gallery{grid-template-columns:1fr 1fr}
  .exercise-native h2{font-size:22px}
  .exercise-native .phone{max-width:330px}
  .exercise-native .mock-body{padding:10px;gap:9px}
  .exercise-native .photo-box,.exercise-native .icon-box{width:78px;height:78px}
  .exercise-native .button-row{padding:7px}
  .exercise-native .btn{font-size:12px;padding:9px 2px}
}


/* ===== FLEXBOX VISUAL LIMPO — MUNDO BIT BYTE ===== */
.flex-clean-shell{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}

.flex-clean-phone{
  width:min(96%,430px);
  height:min(96%,610px);
  background:#111827;
  border-radius:36px;
  padding:17px 13px;
  box-shadow:0 14px 34px rgba(15,23,42,.24);
  position:relative;
}

.flex-clean-phone::before{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:72px;
  height:5px;
  border-radius:999px;
  background:#4b5563;
}

.flex-clean-screen{
  height:100%;
  background:#ffffff;
  border:2px solid #dbeafe;
  border-radius:24px;
  overflow:hidden;
}

.flex-clean-app{
  height:100%;
  background:#ffffff;
  border:2px solid #93c5fd;
  border-radius:20px;
  overflow:hidden;
}

.flex-clean-title{
  height:64px;
  background:#1967d2;
  border-bottom:2px solid #114b9e;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:16px;
  line-height:1;
  white-space:nowrap;
  font-weight:900;
  padding:0 6px;
}

.flex-clean-body{
  padding:15px;
}

.flex-clean-foto-dados{
  display:flex;
  gap:15px;
  transition:.22s ease;
}

.flex-clean-foto-dados.column{
  flex-direction:column;
  align-items:center;
}

.flex-clean-photo{
  width:100px;
  height:100px;
  flex:0 0 auto;
  background:#fef3c7;
  border:2px solid #f59e0b;
  display:flex;
  align-items:center;
  justify-content:center;
}

.flex-clean-avatar{
  width:88px;
  height:88px;
  border-radius:50%;
  background:#dbeafe;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
}

.flex-clean-data{
  flex:1;
  min-width:0;
  background:#fce7f3;
  border:2px solid #f472b6;
  padding:8px;
  transition:.22s ease;
}

.flex-clean-foto-dados.column .flex-clean-data{
  width:100%;
}

.flex-clean-label{
  font-size:13px;
  font-weight:900;
  margin:2px 0 4px;
}

.flex-clean-input{
  height:30px;
  background:#fff;
  border:1px solid #9ca3af;
  border-radius:5px;
  margin-bottom:4px;
}

.flex-clean-actions,
.flex-clean-final{
  height:60px;
  margin-top:15px;
  padding:8px;
  display:flex;
  gap:8px;
  align-items:center;
  border:2px solid;
  transition:.22s ease;
}

.flex-clean-actions{background:#dcfce7;border-color:#22c55e;}
.flex-clean-final{background:#cffafe;border-color:#06b6d4;justify-content:space-between;}

.flex-clean-btn{
  flex:1;
  height:40px;
  border-radius:8px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
}

.flex-clean-gray{background:#435061;}
.flex-clean-green{background:#00853b;}
.flex-clean-red{background:#d11a1a;}

.flex-clean-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}

.flex-clean-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(148,163,184,.25);
}

.flex-clean-option{
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#0f3f86;
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.flex-clean-option.active{
  background:#1967d2;
  color:white;
  border-color:#1967d2;
}

.flex-clean-text{
  background:#f8fbff;
  border:1px solid #dbe3ef;
  border-left:5px solid #1967d2;
  border-radius:12px;
  padding:10px 12px;
  font-family:"Segoe UI",Arial,sans-serif;
  color:#1e293b;
  font-size:13px;
  line-height:1.45;
  white-space:normal;
}

.flex-clean-text strong{
  color:#0f3f86;
}

.flex-clean-code{
  white-space:pre;
}

.flex-clean-code .hl{
  background:#fde68a;
  color:#111827;
  border-radius:6px;
  padding:0 4px;
  font-weight:900;
}

@media(max-width:720px){
  .flex-clean-phone{
    width:min(96%,360px);
    height:520px;
  }
  .flex-clean-title{height:58px;font-size:15px;}
  .flex-clean-body{padding:10px;}
  .flex-clean-foto-dados{gap:8px;}
  .flex-clean-photo{width:82px;height:82px;}
  .flex-clean-avatar{width:72px;height:72px;font-size:40px;}
  .flex-clean-data{padding:6px;}
  .flex-clean-actions,.flex-clean-final{height:52px;margin-top:10px;padding:6px;gap:6px;}
  .flex-clean-btn{height:34px;font-size:11px;}
}


/* ===== AJUSTE 99. EXERCÍCIOS INTERFACE — MINIATURAS MENORES E CLICÁVEIS ===== */
.exercise-native .gallery{
  grid-template-columns: repeat(5, minmax(90px, 1fr)) !important;
  gap: 8px !important;
}

.exercise-native .thumb-card{
  padding: 7px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.exercise-native .thumb-card:hover{
  transform: translateY(-2px) !important;
  border-color: #1967d2 !important;
  box-shadow: 0 6px 18px rgba(25,103,210,.18) !important;
}

.exercise-native .thumb-title{
  font-size: 12px !important;
  margin-bottom: 5px !important;
}

.exercise-native .thumb-phone{
  max-height: 170px !important;
  aspect-ratio: 9 / 12 !important;
  border-width: 4px !important;
  border-radius: 14px !important;
}

.exercise-native .thumb-bar{
  height: 20px !important;
  font-size: 9px !important;
}

.exercise-native .thumb-body{
  padding: 5px !important;
  gap: 4px !important;
}

.exercise-native .mini-square{
  width: 34px !important;
  height: 34px !important;
  font-size: 15px !important;
}

.exercise-native .mini-line{
  height: 13px !important;
}

.exercise-native .mini-btn{
  height: 16px !important;
}

@media (max-width:760px){
  .exercise-native .gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .exercise-native .thumb-phone{
    max-height: 150px !important;
  }
}


/* ===== EXERCÍCIOS INTERFACE — VERSÃO COMPACTA CORRIGIDA ===== */
.exercise-clean{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.exercise-clean-top{
  margin-bottom:0 !important;
}

.exercise-clean .exercise-menu-panel{
  flex:0 0 auto;
}

.exercise-clean .exercise-menu-gallery{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(100px,1fr)) !important;
  gap:8px !important;
  padding:8px !important;
}

.exercise-clean .thumb-card{
  border:1px solid #d7e2f0 !important;
  background:#fff !important;
  border-radius:10px !important;
  padding:7px !important;
  cursor:pointer !important;
  text-align:initial !important;
  min-width:0 !important;
}

.exercise-clean .thumb-card.active{
  border-color:#1967d2 !important;
  box-shadow:0 0 0 2px rgba(25,103,210,.12), 0 6px 18px rgba(25,103,210,.15) !important;
}

.exercise-clean .thumb-title{
  font-size:12px !important;
  margin-bottom:5px !important;
}

.exercise-clean .thumb-phone{
  max-height:145px !important;
  aspect-ratio:9/11 !important;
  border-width:4px !important;
  border-radius:14px !important;
}

.exercise-clean .thumb-bar{
  height:19px !important;
  font-size:9px !important;
}

.exercise-clean .thumb-body{
  padding:5px !important;
  gap:4px !important;
}

.exercise-clean .mini-square{
  width:32px !important;
  height:32px !important;
  font-size:14px !important;
}

.exercise-clean .mini-line{
  height:12px !important;
}

.exercise-clean .mini-btn{
  height:14px !important;
}

.exercise-clean-section{
  display:none;
  flex:1 1 auto;
  min-height:0;
}

.exercise-clean-section.active{
  display:block;
}

.exercise-clean .exercise-grid{
  grid-template-columns:minmax(360px,.95fr) minmax(320px,1.05fr) !important;
  gap:10px !important;
  align-items:stretch !important;
}

.exercise-clean .panel-body{
  padding:10px 12px !important;
}

.exercise-clean .brief h3{
  font-size:17px !important;
  margin-bottom:6px !important;
}

.exercise-clean .brief p,
.exercise-clean .brief li{
  font-size:13px !important;
  line-height:1.36 !important;
}

.exercise-clean .brief ul{
  margin:4px 0 8px !important;
}

.exercise-clean .exercise-guide-inline{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:8px 0;
}

.exercise-clean .exercise-guide-inline .mini-card{
  min-height:auto !important;
  padding:8px !important;
  background:#f8fbff !important;
}

.exercise-clean .exercise-guide-inline strong{
  font-size:12px !important;
  margin-bottom:3px !important;
}

.exercise-clean .exercise-guide-inline p{
  font-size:12px !important;
  line-height:1.28 !important;
}

.exercise-clean .tagline,
.exercise-clean .obs{
  font-size:12.5px !important;
  line-height:1.35 !important;
  padding:8px 10px !important;
  margin-top:8px !important;
}

.exercise-clean .mockup-wrap{
  min-height:0 !important;
  padding:10px !important;
}

.exercise-clean .phone{
  width:min(100%,350px) !important;
  max-height:440px !important;
}

.exercise-clean .appbar{
  min-height:46px !important;
  font-size:16px !important;
}

.exercise-clean .mock-body{
  padding:9px !important;
  gap:8px !important;
}

.exercise-clean .photo-box{
  width:76px !important;
  height:76px !important;
  font-size:32px !important;
}

.exercise-clean .field-group{
  padding:7px !important;
}

.exercise-clean .label{
  font-size:11.5px !important;
  margin-bottom:2px !important;
}

.exercise-clean .input.small{
  height:21px !important;
  margin-bottom:3px !important;
}

.exercise-clean .input{
  height:24px !important;
  margin-bottom:4px !important;
}

.exercise-clean .textarea{
  height:46px !important;
}

.exercise-clean .button-row{
  padding:6px !important;
  gap:5px !important;
}

.exercise-clean .btn{
  padding:7px 2px !important;
  font-size:11px !important;
}

@media(max-width:900px){
  .exercise-clean .exercise-menu-gallery{
    grid-template-columns:repeat(3,minmax(90px,1fr)) !important;
  }

  .exercise-clean .exercise-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:600px){
  .exercise-clean .exercise-menu-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .exercise-clean .exercise-guide-inline{
    grid-template-columns:1fr !important;
  }

  .exercise-clean .thumb-phone{
    max-height:135px !important;
  }
}


/* ===== AJUSTE LIMPO DA INTRO — SNACK REAL E ALTURA ===== */
.snack-real-img-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fbff;
  padding:10px;
}

.snack-real-img{
  width:100%;
  height:100%;
  object-fit:contain;
  border:1px solid #dbe3ef;
  border-radius:8px;
  background:#ffffff;
}

.snack-result-mode .preview-area{
  padding:6px !important;
  overflow:hidden !important;
}

.snack-result-mode .side-bottom{
  padding:0 8px 8px !important;
}

.snack-result-mode .note{
  max-height:92px !important;
  overflow:auto !important;
  font-size:12.5px !important;
  line-height:1.32 !important;
}

.structure-final{
  background:#eef6ff;
  border:2px solid #93c5fd;
  border-radius:10px;
  padding:10px;
  font-family:"Segoe UI",Arial,sans-serif;
}

.structure-box{
  border:2px solid #60a5fa;
  border-radius:8px;
  padding:9px;
  margin:8px 0;
  color:#0f172a;
  font-weight:900;
  font-size:13px;
  background:rgba(255,255,255,.45);
}

.structure-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.structure-photo{
  border-color:#f59e0b;
  background:#fff7ed;
}

.structure-data{
  border-color:#f472b6;
  background:#fdf2f8;
}

.structure-buttons{
  border-color:#22c55e;
  background:#f0fdf4;
}

.structure-confirm{
  border-color:#06b6d4;
  background:#ecfeff;
}


/* ===== CORREÇÃO INTRO — IMAGEM CORRETA E BLOCO INFERIOR ===== */
.snack-real-img-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fbff;
  padding:6px;
}

.snack-real-img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border:1px solid #dbe3ef;
  border-radius:8px;
  background:#ffffff;
}

.snack-result-mode .result-card{
  overflow:hidden !important;
}

.snack-result-mode .preview-area{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:6px !important;
  overflow:hidden !important;
}

.snack-result-mode .side-bottom{
  flex:0 0 auto !important;
  display:block !important;
  padding:0 8px 10px !important;
  min-height:0 !important;
  height:auto !important;
}

.snack-result-mode .note{
  max-height:120px !important;
  overflow:auto !important;
  padding:9px 12px 12px !important;
  margin:0 !important;
  font-size:12.5px !important;
  line-height:1.34 !important;
}

@media(min-width:1025px){
  .snack-result-mode .result-card .panel-title{
    flex:0 0 33px !important;
  }

  .snack-result-mode .preview-area{
    max-height:none !important;
  }

  .snack-result-mode .note{
    max-height:118px !important;
  }
}


/* ===== INTRO — IMAGEM REAL DO SNACK E CORTE INFERIOR CORRIGIDO ===== */
.snack-real-image-view {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fbff;
  padding: 6px;
}

.snack-real-image-view img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
}

.snack-result-mode .result-card {
  overflow: hidden !important;
}

.snack-result-mode .preview-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
}

.snack-result-mode .side-bottom {
  flex: 0 0 auto !important;
  display: block !important;
  padding: 0 8px 12px !important;
  min-height: 0 !important;
  height: auto !important;
}

.snack-result-mode .note {
  max-height: 128px !important;
  overflow-y: auto !important;
  padding: 9px 12px 14px !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.34 !important;
}

@media (min-width:1025px) {
  .snack-result-mode .result-card .panel-title {
    flex: 0 0 33px !important;
  }
}


/* ===== INTRO — TELA REAL DO SNACK EDITADA PELO USUÁRIO ===== */
.snack-real-image-view{
  width:100%;
  height:100%;
  background:#dbeafe;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  padding:0;
}

.snack-real-image-view img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right center;
  border:0;
  border-radius:0;
  background:#dbeafe;
  display:block;
}

.snack-result-mode .preview-area{
  padding:0 !important;
  background:#dbeafe !important;
  overflow:hidden !important;
}

.snack-result-mode .device{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  padding:0 !important;
  border-radius:0 !important;
  background:#dbeafe !important;
  box-shadow:none !important;
}

.snack-result-mode .device::before{
  display:none !important;
}

.snack-result-mode .screen{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  border-radius:0 !important;
  background:#dbeafe !important;
}

.snack-result-mode .side-bottom{
  padding:0 8px 12px !important;
}

.snack-result-mode .note{
  max-height:118px !important;
  overflow:auto !important;
  padding:9px 12px 14px !important;
  font-size:12.5px !important;
  line-height:1.34 !important;
}


/* ===== CORREÇÃO FINAL — IMAGEM INTEIRA SEM CORTE ===== */
.snack-real-image-view{
  width:100% !important;
  height:100% !important;
  background:#dbeafe !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:4px !important;
}

.snack-real-image-view img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:0 !important;
  background:#dbeafe !important;
  display:block !important;
}

.snack-result-mode .preview-area{
  padding:0 !important;
  background:#dbeafe !important;
  overflow:hidden !important;
}


/* ===== AJUSTE DEFINITIVO DO BLOCO LARANJA ===== */
.snack-result-mode{
  min-height:0 !important;
}

.snack-result-mode .content-grid{
  height:calc(100vh - 170px) !important;
  min-height:680px !important;
}

.snack-result-mode .right-column{
  min-height:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}

.snack-result-mode .result-card{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

.snack-result-mode .preview-area{
  flex:1 1 auto !important;
  min-height:0 !important;
}

.snack-result-mode .side-bottom{
  flex:0 0 auto !important;
  padding:0 8px 16px !important;
  overflow:visible !important;
}

.snack-result-mode .note{
  max-height:none !important;
  overflow:visible !important;
}


/* ===== AJUSTE REAL DO CONTAINER LARANJA DA INTRO ===== */
.snack-result-mode .result-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.snack-result-mode .preview-area{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
}

.snack-result-mode .side-bottom{
  flex:0 0 92px !important;
  height:92px !important;
  min-height:92px !important;
  max-height:none !important;
  display:block !important;
  padding:0 8px 10px !important;
  overflow:visible !important;
}

.snack-result-mode .note{
  height:100% !important;
  min-height:72px !important;
  max-height:none !important;
  overflow:auto !important;
  box-sizing:border-box !important;
  padding:10px 12px 12px !important;
  font-size:12.5px !important;
  line-height:1.34 !important;
}

@media(max-width:720px){
  .snack-result-mode .side-bottom{
    flex-basis:110px !important;
    height:110px !important;
    min-height:110px !important;
  }
}


/* ===== CORREÇÃO GLOBAL DOS BLOCOS LARANJAS / OBSERVAÇÕES =====
   Vale para Intro e demais etapas com observação inferior.
*/
.result-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.preview-area{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
}

.side-bottom{
  flex:0 0 112px !important;
  height:112px !important;
  min-height:112px !important;
  max-height:none !important;
  display:block !important;
  padding:0 10px 12px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

.note{
  height:100% !important;
  min-height:88px !important;
  max-height:none !important;
  overflow:auto !important;
  box-sizing:border-box !important;
  padding:11px 13px 14px !important;
  font-size:12.5px !important;
  line-height:1.34 !important;
}

/* Intro pode precisar de um pouco mais por causa do texto explicativo */
.snack-result-mode .side-bottom{
  flex-basis:124px !important;
  height:124px !important;
  min-height:124px !important;
}

.snack-result-mode .note{
  min-height:100px !important;
}

/* Em telas menores, reserva mais área para evitar cortes */
@media(max-width:720px){
  .side-bottom{
    flex-basis:128px !important;
    height:128px !important;
    min-height:128px !important;
  }

  .snack-result-mode .side-bottom{
    flex-basis:140px !important;
    height:140px !important;
    min-height:140px !important;
  }
}


/* ===== MÓDULO 3 — STATE: PREVIEW PROFISSIONAL ===== */
.state-preview-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  padding:10px;
}

.state-phone{
  width:min(96%,420px);
  height:min(96%,600px);
  background:#111827;
  border-radius:36px;
  padding:17px 13px;
  box-shadow:0 14px 34px rgba(15,23,42,.22);
  position:relative;
}

.state-phone::before{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:72px;
  height:5px;
  border-radius:999px;
  background:#4b5563;
}

.state-screen{
  height:100%;
  background:#ffffff;
  border:2px solid #dbeafe;
  border-radius:24px;
  overflow:hidden;
}

.state-app{
  height:100%;
  border:2px solid #93c5fd;
  border-radius:20px;
  overflow:hidden;
  background:#ffffff;
}

.state-title{
  height:64px;
  background:#1967d2;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:16px;
  border-bottom:2px solid #114b9e;
}

.state-body{
  padding:15px;
}

.state-row{
  display:flex;
  gap:15px;
}

.state-photo{
  width:100px;
  height:100px;
  background:#fef3c7;
  border:2px solid #f59e0b;
  display:flex;
  align-items:center;
  justify-content:center;
}

.state-avatar{
  width:88px;
  height:88px;
  border-radius:50%;
  background:#dbeafe;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
}

.state-data{
  flex:1;
  background:#fce7f3;
  border:2px solid #f472b6;
  padding:8px;
}

.state-label{
  font-size:13px;
  font-weight:900;
  margin:2px 0 4px;
}

.state-input{
  min-height:30px;
  background:#ffffff;
  border:1px solid #9ca3af;
  border-radius:5px;
  margin-bottom:4px;
  padding:6px 8px;
  font-size:12px;
  color:#111827;
}

.state-input.filled{
  border-color:#1967d2;
  box-shadow:0 0 0 2px rgba(25,103,210,.10);
}

.state-actions,
.state-final{
  height:60px;
  margin-top:15px;
  padding:8px;
  display:flex;
  gap:8px;
  align-items:center;
  border:2px solid;
}

.state-actions{background:#dcfce7;border-color:#22c55e;}
.state-final{background:#cffafe;border-color:#06b6d4;justify-content:space-between;}

.state-btn{
  flex:1;
  height:40px;
  border-radius:8px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
}

.state-gray{background:#435061;}
.state-green{background:#00853b;}
.state-red{background:#d11a1a;}

.state-message{
  margin-top:12px;
  padding:10px;
  border-radius:9px;
  background:#fff7d6;
  border-left:5px solid #f59e0b;
  color:#334155;
  font-size:12px;
  line-height:1.35;
}

.state-saved{
  margin-top:12px;
  padding:10px;
  border:1px solid #bfdbfe;
  border-left:5px solid #1967d2;
  background:#eff6ff;
  border-radius:9px;
  color:#172033;
  font-size:12px;
  line-height:1.35;
}

.state-saved strong{
  color:#0f4a9c;
}

.state-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:12px;
}

.state-flow div{
  border:1px solid #dbe3ef;
  background:#f8fbff;
  border-radius:10px;
  padding:10px;
  font-size:12px;
  line-height:1.35;
}

.state-flow strong{
  display:block;
  color:#0f4a9c;
  margin-bottom:4px;
}

@media(max-width:720px){
  .state-phone{
    width:min(96%,360px);
    height:520px;
  }
  .state-title{height:58px;font-size:15px;}
  .state-body{padding:10px;}
  .state-row{gap:8px;}
  .state-photo{width:82px;height:82px;}
  .state-avatar{width:72px;height:72px;font-size:40px;}
  .state-data{padding:6px;}
  .state-actions,.state-final{height:52px;margin-top:10px;padding:6px;gap:6px;}
  .state-btn{height:34px;font-size:11px;}
  .state-flow{grid-template-columns:1fr;}
}


/* ===== CORREÇÃO FINAL DA INTRO APÓS MÓDULO STATE ===== */

/* evita cortes gerais da intro */
#introView{
  overflow-y:auto !important;
  padding-bottom:80px !important;
  box-sizing:border-box !important;
}

/* garante espaço inferior real */
#introView::after{
  content:"";
  display:block;
  height:70px;
}

/* corrige grids da intro */
#introView .intro-grid,
#introView .intro-steps-grid,
#introView .intro-box-grid{
  margin-bottom:22px !important;
}

/* evita corte da seção 5 */
#introView .intro-section-title{
  margin-top:28px !important;
  margin-bottom:14px !important;
}

/* melhora espaçamento dos cards */
#introView .intro-card,
#introView .intro-highlight,
#introView .intro-box{
  margin-bottom:16px !important;
}

/* garante scroll correto da coluna principal */
.content-area{
  overflow-y:auto !important;
  min-height:0 !important;
}

/* intro ocupa altura corretamente */
.module-page{
  min-height:auto !important;
  padding-bottom:60px !important;
}


/* ===== STATE REVISADO — AJUSTES DE PREVIEW E CONDICIONAIS ===== */
.state-warning{
  margin-top:12px;
  padding:10px;
  border-radius:9px;
  background:#fff7ed;
  border-left:5px solid #f59e0b;
  color:#334155;
  font-size:12px;
  line-height:1.35;
}

.state-ok{
  margin-top:12px;
  padding:10px;
  border-radius:9px;
  background:#ecfdf5;
  border-left:5px solid #22c55e;
  color:#334155;
  font-size:12px;
  line-height:1.35;
}


/* ===== STATE — PREVIEW FUNCIONAL SEGURO ===== */
.state-safe-wrap{
  width:100%;
  height:100%;
  background:#eef4fb;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:10px;
  overflow:auto;
}

.state-safe-app{
  width:min(100%,460px);
  min-height:690px;
  background:#fff;
  border:2px solid #93c5fd;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}

.state-safe-title{
  height:58px;
  background:#1967d2;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:900;
  font-size:19px;
}

.state-safe-body{
  padding:12px;
}

.state-safe-top{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:12px;
}

.state-safe-photo{
  height:90px;
  background:#fef3c7;
  border:2px solid #f59e0b;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:42px;
}

.state-safe-fields{
  background:#fce7f3;
  border:2px solid #f472b6;
  padding:8px;
}

.state-safe-label{
  font-size:12px;
  font-weight:900;
  margin-bottom:3px;
}

.state-safe-input{
  min-height:26px;
  background:#fff;
  border:1px solid #9ca3af;
  border-radius:5px;
  padding:5px 7px;
  margin-bottom:5px;
  font-size:12px;
}

.state-safe-row{
  display:flex;
  gap:8px;
  padding:8px;
  margin-top:12px;
  border:2px solid;
}

.state-safe-row.operacao{
  background:#dcfce7;
  border-color:#22c55e;
}

.state-safe-row.confirmacao{
  background:#cffafe;
  border-color:#06b6d4;
}

.state-safe-btn{
  flex:1;
  height:34px;
  border-radius:8px;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:12px;
  font-weight:900;
}

.state-safe-gray{background:#435061;}
.state-safe-green{background:#00853b;}
.state-safe-red{background:#d11a1a;}

.state-safe-msg{
  margin-top:12px;
  background:#ecfdf5;
  border-left:5px solid #22c55e;
  border-radius:8px;
  padding:9px 10px;
  font-size:12px;
}

.state-safe-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.state-safe-box{
  border-radius:9px;
  padding:10px;
  font-size:12px;
  line-height:1.35;
}

.state-safe-box strong{
  display:block;
  color:#0f4a9c;
  margin-bottom:5px;
}

.state-safe-now{
  background:#fff7ed;
  border-left:5px solid #f59e0b;
}

.state-safe-saved{
  background:#eff6ff;
  border-left:5px solid #1967d2;
}

.state-safe-empty{
  color:#64748b;
  font-style:italic;
}

@media(max-width:720px){
  .state-safe-app{min-height:720px;}
  .state-safe-top{grid-template-columns:72px 1fr;gap:8px;}
  .state-safe-photo{height:72px;font-size:34px;}
  .state-safe-body{padding:8px;}
  .state-safe-info{grid-template-columns:1fr;}
}


/* ===== INTRO — CARD LATERAL COMO ABRIR O SNACK ===== */
.snack-intro-guide-layout{
  width:100%;
  height:100%;
  background:#dbeafe;
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  gap:10px;
  padding:8px;
  overflow:hidden;
  box-sizing:border-box;
}

.snack-intro-image-box{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#ffffff;
  border:1px solid #dbe3ef;
  border-radius:10px;
}

.snack-intro-image-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

.snack-quick-card{
  background:#ffffff;
  border:1px solid #bfdbfe;
  border-radius:12px;
  box-shadow:0 8px 18px rgba(15,23,42,.10);
  padding:10px;
  overflow:auto;
  min-height:0;
}

.snack-quick-title{
  color:#0f4a9c;
  font-size:13px;
  font-weight:900;
  line-height:1.1;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
}

.snack-quick-title::before{
  content:"✓";
  width:19px;
  height:19px;
  border-radius:999px;
  background:#1967d2;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  flex:0 0 auto;
}

.snack-quick-list{
  display:grid;
  gap:5px;
}

.snack-quick-step{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:6px;
  align-items:start;
  font-size:11.2px;
  line-height:1.25;
  color:#243047;
}

.snack-quick-num{
  width:19px;
  height:19px;
  border-radius:6px;
  background:#eaf2ff;
  color:#0f4a9c;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
}

.snack-quick-step b{
  color:#0f172a;
  font-weight:900;
}

.snack-quick-url{
  display:inline-block;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#0f4a9c;
  border-radius:6px;
  padding:2px 5px;
  font-family:Consolas,"Courier New",monospace;
  font-weight:900;
  margin-top:2px;
}

.snack-quick-save{
  color:#ffffff;
  background:#1967d2;
  border-radius:5px;
  padding:1px 5px;
  font-weight:900;
  white-space:nowrap;
}

@media(max-width:900px){
  .snack-intro-guide-layout{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
  }

  .snack-quick-card{
    max-height:170px;
  }

  .snack-quick-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 8px;
  }
}

@media(max-width:560px){
  .snack-intro-guide-layout{
    padding:6px;
    gap:6px;
  }

  .snack-quick-card{
    max-height:210px;
  }

  .snack-quick-list{
    grid-template-columns:1fr;
  }
}


/* ===== AJUSTE FINAL INTRO SNACK ===== */
.snack-intro-top-layout{
  width:100%;
  height:100%;
  background:#dbeafe;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:6px;
  padding:6px;
  box-sizing:border-box;
  overflow:hidden;
}

.snack-top-guide-card{
  background:#ffffff;
  border:1px solid #bfdbfe;
  border-radius:12px;
  box-shadow:0 5px 14px rgba(15,23,42,.08);
  padding:8px 10px;
}

.snack-top-guide-title{
  color:#0f4a9c;
  font-size:13px;
  font-weight:900;
  margin-bottom:7px;
  display:flex;
  align-items:center;
  gap:6px;
}

.snack-top-guide-title::before{
  content:"✓";
  width:18px;
  height:18px;
  border-radius:999px;
  background:#1967d2;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}

.snack-top-guide-list{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
}

.snack-top-step{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:5px;
  align-items:start;
  font-size:11px;
  line-height:1.2;
  color:#243047;
}

.snack-top-num{
  width:17px;
  height:17px;
  border-radius:5px;
  background:#eaf2ff;
  color:#0f4a9c;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
}

.snack-top-step b{
  color:#0f172a;
  font-weight:900;
}

.snack-top-url{
  display:inline-block;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#0f4a9c;
  border-radius:5px;
  padding:1px 4px;
  font-family:Consolas,"Courier New",monospace;
  font-weight:900;
  margin-top:1px;
}

.snack-top-save{
  color:#ffffff;
  background:#1967d2;
  border-radius:5px;
  padding:1px 5px;
  font-weight:900;
  white-space:nowrap;
}

.snack-large-image-box{
  min-height:0;
  background:#ffffff;
  border:1px solid #dbe3ef;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:4px;
}

.snack-large-image-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top left;
  display:block;
}

@media(max-width:720px){
  .snack-intro-top-layout{
    padding:5px;
    gap:5px;
  }

  .snack-top-step{
    font-size:10.3px;
  }
}


/* ===== CORREÇÃO IMAGEM INTRO SEM CORTE ===== */
.snack-large-image-box{
  align-items:center !important;
  justify-content:center !important;
  padding:4px !important;
  background:#ffffff !important;
}

.snack-large-image-box img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}



/* ===== FLEXBOX VISUAL — COMPARAÇÃO ANTES / DEPOIS ===== */
.flex-compare{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;background:linear-gradient(180deg,#fff,#f8fbff);}
.flex-mini-phone{background:#111827;border-radius:24px;padding:10px 7px;min-width:0;box-shadow:0 8px 20px rgba(15,23,42,.16);}
.flex-mini-screen{height:100%;background:#fff;border-radius:17px;overflow:hidden;border:2px solid #dbeafe;display:flex;flex-direction:column;}
.flex-mini-head{height:34px;background:#1967d2;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;text-align:center;padding:0 5px;}
.flex-mini-body{flex:1;padding:10px;background:#fff;position:relative;overflow:hidden;}
.flex-mini-tag{font-size:11px;font-weight:900;color:#0f3f86;background:#eaf2ff;border:1px solid #bfdbfe;border-radius:999px;padding:4px 7px;display:inline-block;margin-bottom:8px;}
.flex-box{border:2px solid #93c5fd;background:#eff6ff;border-radius:8px;padding:8px;font-size:12px;font-weight:900;color:#172033;text-align:center;}
.flex-box.orange{border-color:#f59e0b;background:#fff7ed}.flex-box.green{border-color:#22c55e;background:#f0fdf4}.flex-box.pink{border-color:#f472b6;background:#fdf2f8}.flex-box.cyan{border-color:#06b6d4;background:#ecfeff}.flex-box.dark{border-color:#64748b;background:#f8fafc}
.flex-row-demo{display:flex;gap:8px}.flex-col-demo{display:flex;flex-direction:column;gap:8px}.flex-center-demo{height:170px;display:flex;align-items:center;justify-content:center;border:2px dashed #bfdbfe;border-radius:10px;background:#f8fbff}.flex-buttons-demo{display:flex;gap:7px}.flex-buttons-demo.equal .flex-box{flex:1}.flex-top-demo{display:flex;align-items:center;justify-content:space-between;gap:8px}.flex-spacer-layout{height:210px;display:flex;flex-direction:column;gap:8px}.flex-grow{flex:1}.flex-card-row{display:flex;gap:8px}.flex-card-row .flex-box{width:72px}.flex-wrap-row{display:flex;flex-wrap:wrap;gap:7px}.flex-wrap-row .flex-box{width:58px;padding:7px 3px}.flex-bottom-layout{height:210px;display:flex;flex-direction:column}.flex-bottom-main{flex:1}.flex-bottom-bar{display:flex;gap:5px}.flex-dashboard{display:flex;flex-wrap:wrap;gap:8px}.flex-dashboard .flex-box{width:calc(50% - 4px);height:58px;display:flex;align-items:center;justify-content:center}.flex-list-item{display:flex;gap:8px;align-items:center}.flex-thumb{width:48px;height:48px;border-radius:9px;background:#dbeafe;border:2px solid #60a5fa;display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto}.flex-list-text{flex:1;display:flex;flex-direction:column;gap:5px}.flex-line{height:12px;background:#e2e8f0;border-radius:999px}.flex-chat{height:210px;display:flex;flex-direction:column;gap:7px}.flex-msg{max-width:78%;border-radius:12px;padding:8px;font-size:11px;font-weight:800}.flex-left{align-self:flex-start;background:#e2e8f0}.flex-right{align-self:flex-end;background:#dbeafe;color:#0f3f86}.flex-full-app{height:230px;display:flex;flex-direction:column;gap:8px}.flex-full-content{flex:1;display:flex;gap:8px}.flex-full-side{width:70px}.flex-full-main{flex:1}.flex-err{position:absolute;left:10px;right:10px;bottom:8px;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:6px;font-size:10px;line-height:1.25;color:#92400e;font-weight:800}.flex-ok{position:absolute;left:10px;right:10px;bottom:8px;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:8px;padding:6px;font-size:10px;line-height:1.25;color:#166534;font-weight:800}
@media(max-width:720px){.flex-compare{grid-template-columns:1fr;}.flex-mini-phone{min-height:330px}.flex-mini-head{height:32px}.flex-mini-body{min-height:260px}.flex-center-demo{height:150px}}



/* ===== FLEXBOX VISUAL REFEITO — CÓDIGO + PREVIEW SINCRONIZADOS ===== */
.flex-result-mode .preview-area{
  padding:6px !important;
  overflow:hidden !important;
}
.flex-result-mode .device{
  width:min(96%,520px) !important;
  height:min(96%,620px) !important;
  padding:12px 10px !important;
  border-radius:30px !important;
}
.flex-result-mode .screen{
  border-radius:20px !important;
  overflow:hidden !important;
}
.fx-compare{
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:6px;
  padding:6px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  overflow:hidden;
}
.fx-window{
  min-height:0;
  border:1px solid #dbe3ef;
  border-radius:14px;
  background:#ffffff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
}
.fx-head{
  flex:0 0 27px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1967d2;
  color:#ffffff;
  font-size:12px;
  font-weight:900;
}
.fx-body{
  flex:1 1 auto;
  min-height:0;
  padding:8px;
  overflow:hidden;
  background:#ffffff;
  display:block;
}
.fx-stack{display:flex;flex-direction:column;gap:7px;align-items:stretch;max-width:100%;}
.fx-row{display:flex;flex-direction:row;gap:7px;align-items:stretch;max-width:100%;}
.fx-row.centered{align-items:center;}
.fx-row.cramped{gap:4px;align-items:center;}
.fx-row.nowrap{width:145%;}
.fx-center{height:100%;min-height:112px;display:flex;align-items:center;justify-content:center;background:#f8fbff;border:0;border-radius:12px;}
.fx-box,.fx-button,.fx-card-mini,.fx-chip{
  border:2px solid #93c5fd;
  background:#eff6ff;
  border-radius:9px;
  padding:8px;
  font-size:11px;
  font-weight:900;
  color:#172033;
  text-align:center;
  min-width:0;
}
.fx-orange{border-color:#f59e0b;background:#fff7ed;color:#92400e;}
.fx-box.blue{border-color:#60a5fa;background:#dbeafe;color:#0f3f86;}
.fx-box.green,.fx-button.green{border-color:#22c55e;background:#dcfce7;color:#166534;}
.fx-box.pink{border-color:#f472b6;background:#fdf2f8;color:#9d174d;}
.fx-button{border:0;color:#fff;background:#475569;white-space:nowrap;}
.fx-button.green{background:#16a34a;color:#fff;}
.fx-button.red{background:#dc2626;color:#fff;}
.fx-button.small{width:42px;}.fx-button.large{width:74px;}.fx-button.equal{flex:1;}
.fx-thumb{width:48px;height:48px;flex:0 0 auto;border-radius:10px;background:#dbeafe;border:2px solid #60a5fa;display:flex;align-items:center;justify-content:center;font-size:24px;}
.fx-big-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:36px;background:#dbeafe;border-radius:12px;}
.fx-textblock{display:flex;flex-direction:column;gap:6px;justify-content:center;min-width:0;}
.fx-textblock.grow{flex:1;}
.fx-line{height:12px;border-radius:999px;background:#cbd5e1;}.fx-line.wide{width:100%;}.fx-line.short{width:55%;}.fx-line.green{background:#86efac;}
.fx-label-line{height:10px;width:44px;border-radius:999px;background:#94a3b8;}.fx-input{height:24px;border:1px solid #94a3b8;border-radius:7px;background:#f8fafc;}.fx-mini-field{height:28px;flex:1;border:1px solid #94a3b8;border-radius:7px;background:#f8fafc;}
.fx-header{display:flex;align-items:center;gap:8px;background:#1967d2;color:#fff;padding:10px;border-radius:10px;font-size:13px;font-weight:900;}.fx-header.light{background:#dbeafe;color:#0f3f86;}.fx-title-grow{flex:1;text-align:center;}
.fx-box.dropped{margin-top:25px;}
.fx-layout-vertical{height:100%;display:flex;flex-direction:column;gap:7px;}.fx-grow-area{flex:1;display:flex;align-items:center;justify-content:center;}
.fx-card-mini{width:70px;height:52px;display:flex;align-items:center;justify-content:center;}
.fx-wrap{display:flex;flex-wrap:wrap;gap:7px;}.fx-chip{padding:7px 9px;border-radius:999px;white-space:nowrap;}.fx-dashboard{display:grid;grid-template-columns:1fr 1fr;gap:7px;}.fx-dashboard div{height:50px;border-radius:10px;background:#eff6ff;border:2px solid #93c5fd;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#0f3f86;}
.fx-price{font-size:12px;font-weight:900;color:#166534;align-self:center;}.fx-chat{height:100%;display:flex;flex-direction:column;gap:7px;}.fx-msg{max-width:78%;border-radius:11px;padding:8px;font-size:10.5px;font-weight:800;}.fx-msg.same{align-self:stretch;background:#e2e8f0;}.fx-msg.left{align-self:flex-start;background:#e2e8f0;color:#172033;}.fx-msg.right{align-self:flex-end;background:#dbeafe;color:#0f3f86;}
.fx-full{height:100%;display:flex;flex-direction:column;gap:7px;}.fx-full-body{flex:1;display:flex;gap:7px;min-height:0;}.fx-side{width:58px;border-radius:10px;background:#fff7ed;border:2px solid #f59e0b;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;}.fx-main{flex:1;border-radius:10px;background:#fdf2f8;border:2px solid #f472b6;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;}
@media(max-width:1050px){.flex-result-mode .device{height:640px !important;width:min(96%,430px) !important;}.fx-head{flex-basis:26px}.fx-body{padding:7px}.fx-card-mini{width:64px;height:46px}.fx-center{min-height:100px}}
@media(max-width:720px){.flex-result-mode .result-card{min-height:690px !important;}.flex-result-mode .preview-area{min-height:610px !important;}.flex-result-mode .device{height:600px !important;width:min(98%,360px) !important;padding:10px 8px !important;}.fx-compare{gap:5px;padding:5px}.fx-head{flex-basis:25px;font-size:11px}.fx-body{padding:6px}.fx-box,.fx-button,.fx-card-mini,.fx-chip{font-size:10px;padding:6px}.fx-thumb{width:42px;height:42px;font-size:21px}.fx-big-icon{width:48px;height:48px;font-size:30px}.fx-card-mini{width:58px;height:42px}.fx-msg{font-size:10px;padding:7px}.fx-side{width:50px}}



/* ===== Correções Flexbox Visual — mockups fiéis aos códigos ===== */
.fx-box.left-text{ text-align:left !important; justify-content:flex-start !important; align-items:flex-start !important; display:flex; }
.fx-prod-title{font-size:11px;font-weight:900;color:#172033;line-height:1.2;}
.fx-prod-price{font-size:11px;font-weight:900;color:#166534;margin-top:4px;}
.fx-form-row{display:flex;flex-direction:row;gap:6px;align-items:center;overflow:hidden;}
.fx-form-pair{display:flex;flex-direction:column;gap:3px;min-width:78px;}
.fx-label-text{font-size:10px;font-weight:900;color:#172033;}
.fx-input-real{height:24px;border:1px solid #94a3b8;background:#f8fafc;border-radius:7px;}
.fx-top-stack{display:flex;flex-direction:column;gap:7px;}
.fx-menu-before-box{border:2px solid #60a5fa;border-radius:8px;padding:8px;text-align:center;font-weight:900;color:#172033;}
.fx-chat .fx-msg.right.long{max-width:82%;}
.fx-card-mini.centered-card,.fx-dashboard div{display:flex;align-items:center;justify-content:center;text-align:center;}
.fx-list-title{font-size:11px;font-weight:900;color:#172033;line-height:1.2;}
.fx-list-desc{font-size:10px;font-weight:700;color:#64748b;margin-top:3px;}
.fx-before-full{height:100%;display:flex;flex-direction:column;gap:7px;}
.fx-before-tabs{display:flex;flex-direction:column;gap:7px;}
.fx-topo-panel{border:2px solid #60a5fa;background:#dbeafe;color:#0f3f86;border-radius:10px;padding:8px;font-weight:900;text-align:center;display:flex;gap:6px;align-items:center;justify-content:center;}
.fx-menu-card{border:2px solid #f59e0b;background:#fff7ed;color:#92400e;border-radius:10px;padding:8px;text-align:center;font-weight:900;}
.fx-content-card{border:2px solid #f472b6;background:#fdf2f8;color:#9d174d;border-radius:10px;padding:8px;text-align:center;font-weight:900;}
.fx-home-card{border:2px solid #22c55e;background:#dcfce7;color:#166534;border-radius:8px;padding:8px;text-align:center;font-weight:900;}



/* ===== AJUSTES FINAIS — FLEXBOX VISUAL ===== */
.flex-lab-explain-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 10px;}
.flex-lab-explain-box{background:#f8fbff;border:1px solid #dbe3ef;border-left:5px solid #1967d2;border-radius:10px;padding:9px 11px;font-size:12.5px;line-height:1.35;color:#1e293b;}
.flex-lab-explain-box strong{color:#0f3f86;}
.flex-lab-explain-final{background:#fff7d6;border:1px solid #fde68a;border-left:5px solid #f59e0b;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.4;color:#334155;}
.fx-box.fx-soft{background:#dbeafe;color:#0f3f86;border-color:#60a5fa;}
.fx-box.fx-soft-strong{background:#bfdbfe;color:#0f3f86;border-color:#60a5fa;}
.fx-button.equal.dark{background:#475569;color:#fff;}
.fx-chip.tight{padding:6px 10px;border:2px solid #93c5fd;background:#dbeafe;color:#172033;}
.fx-wrap.narrow{width:210px;max-width:210px;}
.flex-exercise-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;}
.flex-exercise-card{border:1px solid #dbe3ef;background:#ffffff;border-radius:12px;padding:12px;box-shadow:0 4px 14px rgba(15,23,42,.06);}
.flex-exercise-card strong{display:block;color:#0f3f86;font-size:13.5px;margin-bottom:5px;}
.flex-exercise-card p{font-size:12.5px;line-height:1.35;color:#334155;margin:0 0 6px;}
.flex-exercise-card span{display:inline-block;background:#eaf2ff;border:1px solid #bfdbfe;color:#0f3f86;border-radius:999px;padding:4px 7px;font-size:11px;font-weight:900;margin:2px 3px 0 0;}
@media(max-width:720px){.flex-lab-explain-row{grid-template-columns:1fr}.flex-exercise-list{grid-template-columns:1fr}}

/* ===== FLEXBOX VISUAL — SEQUÊNCIA DIDÁTICA SEPARADA ===== */
.flex-lab-after-preview-card,
.flex-lab-final-card{
  min-width:0;
}
.flex-lab-after-preview-card{
  grid-column:2 !important;
  grid-row:2 !important;
  display:flex;
  flex-direction:column;
}
.flex-lab-after-preview-card .panel-title{
  background:#eaf2ff;
  color:var(--primary-dark);
  border-bottom:1px solid var(--line);
  font-size:15px;
  text-transform:none;
  letter-spacing:0;
}
.flex-lab-final-card{
  grid-column:1 / -1 !important;
  grid-row:3 !important;
  background:#fff7d6;
  border-left:5px solid #f59e0b;
  padding:14px 16px;
  border-radius:10px;
  font-size:14px;
  line-height:1.45;
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}
.flex-lab-final-card strong{color:#0f3f86;}
.flex-lab-final-card .flex-clean-options{margin-bottom:10px;}
.flex-result-mode .workspace{}
.flex-single-result{
  width:100%;
  height:100%;
  padding:6px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.flex-single-result .fx-window{height:100%;}
.flex-single-result .fx-head{background:#1967d2;}
@media(min-width:1025px){
  .workspace.flex-lab-separated{
    grid-template-columns:minmax(520px,1fr) minmax(440px,520px) !important;
    grid-template-rows:minmax(0,360px) minmax(0,360px) auto !important;
    height:auto !important;
    overflow:visible !important;
  }
  .workspace.flex-lab-separated #codeCard{grid-column:1 !important;grid-row:1 !important;height:360px !important;}
  .workspace.flex-lab-separated #resultCard{grid-column:2 !important;grid-row:1 !important;min-height:360px !important;}
  .workspace.flex-lab-separated #newCodeCard{grid-column:1 !important;grid-row:2 !important;height:360px !important;}
  .workspace.flex-lab-separated .preview-area{min-height:0 !important;}
  .workspace.flex-lab-separated .device{width:min(96%,500px) !important;height:100% !important;}
  .workspace.flex-lab-separated #noteWrap{display:none !important;}
}
@media(max-width:1050px){
  .workspace.flex-lab-separated{display:flex !important;flex-direction:column !important;}
  .flex-lab-after-preview-card{order:4 !important;min-height:560px;}
  .flex-lab-final-card{order:5 !important;}
  .workspace.flex-lab-separated #codeCard{order:1 !important;}
  .workspace.flex-lab-separated #resultCard{order:2 !important;}
  .workspace.flex-lab-separated #newCodeCard{order:3 !important;}
}