:root {
      /* CORES PROVISÓRIAS DA MARCA — altere só estas variáveis depois */
      --brand-main: #ffffff;
      --primary: #f43f5e;
      --primary-hover: #e11d48;
      --secondary: #10b981;
      --secondary-hover: #059669;
      --primary-rgb: 244, 63, 94;
      --secondary-rgb: 16, 185, 129;

      --bg-body: #050506;
      --bg-shell: rgba(24, 24, 27, 0.94);
      --bg-panel: #27272a;
      --bg-panel-deep: #18181b;
      --bg-input: #111113;
      --bg-input-hover: #1c1c1f;
      --header-gray: #303034;
      --header-hover: #37373c;
      --text-main: #f4f4f5;
      --text-label: #d4d4d8;
      --text-muted: #a1a1aa;
      --border: #3f3f46;
      --border-soft: rgba(255,255,255,.07);
      --danger: #fb7185;
      --warning: #fbbf24;
      --radius-xl: 21px;
      --radius-lg: 14px;
      --radius-md: 10px;
      --radius-sm: 8px;
      --shadow-soft: 0 24px 80px rgba(0,0,0,.48);
      --transition: .22s ease;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    html { color-scheme: dark; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }

    body {
      min-height: 100vh;
      color: var(--text-main);
      background:
        radial-gradient(circle at 14% -10%, rgba(var(--primary-rgb), .11), transparent 28rem),
        radial-gradient(circle at 88% 8%, rgba(var(--secondary-rgb), .08), transparent 30rem),
        var(--bg-body);
      font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.5;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: .20;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: radial-gradient(circle at center, #000 10%, transparent 84%);
    }

    button, input, select { font: inherit; }
    button { color: inherit; }

    .page {
      width: min(1180px, calc(100% - 28px));
      margin: 0 auto;
      padding: 36px 0 48px;
    }

    .brand-area {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: flex-end;
      gap: 8px;
      min-height: 50px;
      margin-bottom: -1px;
      text-align: left;
    }

    .brand-lockup {
      flex: 0 0 auto;
      height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 18px 8px 14px;
      text-decoration: none;
    }

    .brand-svg {
      width: 150px;
      height: auto;
      display: block;
      overflow: visible;
      shape-rendering: geometricPrecision;
      filter: drop-shadow(0 8px 20px rgba(0,0,0,.38));
    }

    .brand-svg .brand-word { fill: var(--brand-main); }
    .brand-svg .brand-accent { fill: var(--primary); }

    .app-shell {
      position: relative;
      margin-top: 0;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-xl);
      background: var(--bg-shell);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(12px);
    }

    .workspace-tabs {
      flex: 0 1 auto;
      display: flex;
      align-items: flex-end;
      gap: 8px;
      min-width: 0;
    }

    .tool-tab {
      height: 50px;
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 20px;
      border: 1px solid rgba(255,255,255,.065);
      border-bottom: 0;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      background: rgba(17,17,19,.88);
      color: #a2a2aa;
      font-family: inherit;
      font-size: .95rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
      cursor: default;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,.025);
    }

    .tool-tab.active {
      border-color: var(--border-soft);
      background: var(--bg-shell);
      color: #fff;
      box-shadow: none;
    }

    .tool-tab-badge {
      height: 19px;
      min-height: 19px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(var(--secondary-rgb), .14);
      color: var(--secondary);
      font-family: inherit;
      font-size: .62rem;
      font-weight: 900;
      letter-spacing: .04em;
      line-height: 1;
      text-transform: uppercase;
    }

    .tool-tab-badge.new {
      background: #ffd400;
      color: #111113;
    }

    .tool-tab-badge.soon {
      background: rgba(var(--secondary-rgb), .14);
      color: var(--secondary);
    }

    .workspace-spacer { flex: 1 1 auto; min-width: 12px; }

    /* O botão é injetado pelo saas.js; aqui ele ocupa o canto direito da barra. */
    .brand-area > .saas-account-button {
      flex: 0 0 230px !important;
      width: 230px !important;
      min-width: 230px !important;
      max-width: 230px !important;
      height: 50px !important;
      min-height: 50px !important;
      margin: 0 0 0 auto !important;
      padding: 7px 14px !important;
      border: 1px solid rgba(255,255,255,.065) !important;
      border-bottom: 0 !important;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
      background: rgba(17,17,19,.88) !important;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,.025) !important;
      transform: none !important;
      gap: 10px !important;
    }

    .brand-area > .saas-account-button:hover {
      border-color: rgba(255,255,255,.11) !important;
      transform: none !important;
    }

    .brand-area > .saas-account-button .saas-avatar {
      display: none !important;
    }

    .brand-area > .saas-account-button .saas-account-copy {
      order: 1;
      align-items: flex-end;
      justify-content: center;
      text-align: right !important;
    }

    .brand-area > .saas-account-button .saas-account-main {
      color: #fff;
      font-size: .78rem !important;
      font-weight: 800;
      line-height: 1.1;
    }

    .brand-area > .saas-account-button .saas-account-sub {
      margin-top: 2px;
      color: var(--secondary) !important;
      font-size: .60rem !important;
      font-weight: 700;
      line-height: 1.1;
    }

    .brand-area > .saas-account-button .saas-chevron {
      order: 2;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: transparent !important;
      font-size: 0 !important;
    }

    .brand-area > .saas-account-button .saas-chevron::before {
      content: "";
      width: 18px;
      height: 18px;
      display: block;
      background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 6v2h16v-2c0-3.33-2.67-6-8-6Z'/%3E%3C/svg%3E");
    }

    .page-footer {
      display: flex;
      justify-content: center;
      padding: 20px 0 0;
    }

    .footer-info-button {
      padding: 7px 10px;
      border: 0;
      background: transparent;
      color: var(--text-muted);
      font-size: .7rem;
      font-weight: 700;
      cursor: pointer;
      transition: var(--transition);
    }

    .footer-info-button:hover { color: var(--text-main); }
    .footer-info-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

    .app-intro {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      padding: 23px 26px 21px;
      border-bottom: 1px solid var(--border-soft);
    }

    .intro-copy h1 { font-size: 1.22rem; line-height: 1.2; letter-spacing: -.02em; }
    .intro-copy p { max-width: 720px; margin-top: 6px; color: var(--text-muted); font-size: .83rem; }

    .tool-banner {
      width: 100%;
      height: 140px;
      overflow: hidden;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      background: #111113;
    }

    .tool-banner img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }

    .local-badge {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      border: 1px solid rgba(var(--secondary-rgb), .22);
      border-radius: 999px;
      background: rgba(var(--secondary-rgb), .06);
      color: var(--secondary);
      font-size: .7rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .local-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--secondary);
      box-shadow: 0 0 10px rgba(var(--secondary-rgb), .7);
    }

    .workspace {
      display: grid;
      grid-template-columns: 355px minmax(0, 1fr);
      min-height: 610px;
    }

    .workflow {
      min-width: 0;
      padding: 20px;
      border-right: 1px solid var(--border-soft);
      background: rgba(0,0,0,.07);
      border-radius: 0 0 0 var(--radius-xl);
    }

    .workflow-guide {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 1px 0 15px;
      color: var(--text-muted);
      font-size: .73rem;
      text-align: center;
    }

    .workflow-guide .guide-check {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--secondary);
      color: white;
      font-size: .68rem;
      font-weight: 900;
      box-shadow: 0 0 9px rgba(var(--secondary-rgb), .36);
    }

    .session {
      position: relative;
      margin-bottom: 10px;
      overflow: visible;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-lg);
      background: var(--bg-panel);
    }

    .session:last-child { margin-bottom: 0; }

    .session-header {
      width: 100%;
      min-height: 50px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 13px 12px 15px;
      border: 0;
      border-radius: var(--radius-lg);
      background: var(--header-gray);
      color: var(--text-main);
      cursor: pointer;
      text-align: left;
      transition: box-shadow var(--transition), background var(--transition);
    }

    .session-header:hover { box-shadow: 0 11px 30px rgba(255,255,255,.11); }
    .session.active .session-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

    .session-number {
      width: 25px;
      height: 25px;
      flex: 0 0 25px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(255,255,255,.07);
      color: var(--text-muted);
      font-size: .72rem;
      font-weight: 900;
    }

    .session-title {
      min-width: 0;
      flex: 1;
      font-size: .84rem;
      font-weight: 750;
    }

    .session-state {
      width: 25px;
      height: 25px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255,255,255,.08);
      color: var(--text-muted);
      font-size: .72rem;
      font-weight: 900;
      transition: var(--transition);
    }

    .session[data-state="ok"] .session-state {
      background: var(--secondary);
      color: white;
      box-shadow: 0 0 9px rgba(var(--secondary-rgb), .4);
    }

    .session[data-state="bad"] .session-state {
      background: var(--primary);
      color: white;
      box-shadow: 0 0 9px rgba(var(--primary-rgb), .42);
    }

    .session[data-state="busy"] .session-state {
      color: var(--warning);
      border: 1px solid rgba(251,191,36,.42);
      animation: sessionPulse 1s infinite;
    }

    @keyframes sessionPulse { 50% { box-shadow: 0 0 13px rgba(251,191,36,.52); } }

    .session-arrow {
      margin-left: 1px;
      color: var(--text-muted);
      font-size: .64rem;
      transition: transform .26s ease, color .2s ease;
    }

    .session[data-state="ok"] .session-arrow { color: var(--secondary); }
    .session[data-state="bad"] .session-arrow { color: var(--primary); }
    .session.active .session-arrow { transform: rotate(180deg); }

    .session-content {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      background: var(--bg-panel);
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
      transition: max-height .38s ease, opacity .22s ease;
    }

    .session.active .session-content { max-height: 1000px; opacity: 1; }
    .session-inner { padding: 15px; border-top: 1px solid rgba(255,255,255,.035); }

    .drop {
      min-height: 104px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 16px;
      border: 2px dashed var(--border);
      border-radius: var(--radius-md);
      background: rgba(0,0,0,.16);
      cursor: pointer;
      text-align: center;
      transition: var(--transition);
    }

    .drop:hover, .drop.drag {
      border-color: var(--secondary);
      background: rgba(var(--secondary-rgb), .055);
      box-shadow: inset 0 0 0 1px rgba(var(--secondary-rgb), .05);
    }

    .drop-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(var(--secondary-rgb), .10);
      color: var(--secondary);
      font-size: 1.05rem;
      font-weight: 900;
    }

    .drop strong { font-size: .83rem; font-weight: 750; }
    .drop small { color: var(--text-muted); font-size: .68rem; line-height: 1.4; }
    .file-name { max-width: 100%; overflow: hidden; color: var(--secondary); font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    #fileInput { display: none; }

    .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    .field.full { grid-column: 1 / -1; }
    label { color: var(--text-label); font-size: .72rem; font-weight: 650; }
    .help { color: var(--text-muted); font-size: .63rem; line-height: 1.35; }

    input[type="number"], select {
      width: 100%;
      min-height: 38px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      outline: 0;
      background: var(--bg-input);
      color: var(--text-main);
      font-size: .8rem;
      transition: var(--transition);
    }

    input[type="number"]:focus, select:focus {
      border-color: var(--secondary);
      background: var(--bg-input-hover);
      box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), .13);
    }

    .slider-group { display: flex; flex-direction: column; gap: 7px; }
    .slider-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

    .value {
      min-width: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border: 1px solid rgba(var(--secondary-rgb), .22);
      border-radius: 999px;
      background: rgba(var(--secondary-rgb), .10);
      color: var(--secondary);
      font-size: .66rem;
      font-weight: 800;
    }

    input[type="range"] {
      width: 100%;
      height: 5px;
      appearance: none;
      border-radius: 999px;
      outline: none;
      background: var(--border);
    }

    input[type="range"]::-webkit-slider-thumb {
      width: 16px;
      height: 16px;
      appearance: none;
      border: 2px solid white;
      border-radius: 50%;
      background: var(--secondary);
      box-shadow: 0 0 9px rgba(var(--secondary-rgb), .36);
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 13px;
      height: 13px;
      border: 2px solid white;
      border-radius: 50%;
      background: var(--secondary);
      box-shadow: 0 0 9px rgba(var(--secondary-rgb), .36);
      cursor: pointer;
    }

    .status {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: rgba(0,0,0,.17);
    }

    .status.ok { border-color: rgba(var(--secondary-rgb), .35); background: rgba(var(--secondary-rgb), .055); }
    .status.bad { border-color: rgba(var(--primary-rgb), .42); background: rgba(var(--primary-rgb), .065); }
    .status.busy { border-color: rgba(251,191,36,.35); }
    .stitle { font-size: .82rem; font-weight: 800; }
    .sdesc { margin-top: 3px; color: var(--text-muted); font-size: .68rem; line-height: 1.42; }

    .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
    .metric { padding: 8px; border: 1px solid var(--border-soft); border-radius: 8px; background: rgba(0,0,0,.16); }
    .metric span { display: block; color: var(--text-muted); font-size: .57rem; }
    .metric strong { display: block; margin-top: 1px; font-size: .66rem; }

    .check { display: grid; gap: 6px; margin-top: 10px; list-style: none; }
    .check li { display: flex; gap: 7px; color: #d0d0d5; font-size: .64rem; line-height: 1.35; }
    .check b.ok { color: var(--secondary); }
    .check b.warn { color: var(--warning); }
    .check b.bad { color: var(--danger); }

    .actions { display: grid; gap: 8px; margin-top: 12px; }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    .action-button {
      min-height: 38px;
      padding: 8px 11px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,.08);
      color: var(--text-main);
      font-size: .73rem;
      font-weight: 750;
      cursor: pointer;
      transition: var(--transition);
    }

    .action-button:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255,255,255,.13); }
    .action-button.primary { background: linear-gradient(135deg, var(--secondary), #047857); color: white; box-shadow: 0 5px 16px rgba(var(--secondary-rgb), .20); }
    .action-button.primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--secondary-hover), #047857); box-shadow: 0 7px 20px rgba(var(--secondary-rgb), .28); }
    .action-button.ghost { border-color: var(--border); background: var(--bg-input); color: var(--text-label); }
    .action-button:disabled { opacity: .36; cursor: not-allowed; transform: none; box-shadow: none; }

    .preview-area {
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 20px;
      border-radius: 0 0 var(--radius-xl) 0;
    }

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

    .preview-label { color: var(--text-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }

    .tabs {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px;
      border: 1px solid var(--border-soft);
      border-radius: 999px;
      background: rgba(0,0,0,.20);
    }

    .tabs button {
      min-height: 31px;
      padding: 6px 11px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--text-muted);
      font-size: .68rem;
      font-weight: 750;
      cursor: pointer;
      transition: var(--transition);
    }

    .tabs button:hover { color: var(--text-main); }
    .tabs button.active { background: var(--header-gray); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.055); }

    .stage {
      position: relative;
      flex: 1;
      min-height: 530px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
        linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
        #0e0e10;
      background-position: 0 0, 12px 12px;
      background-size: 24px 24px;
    }

    .stage::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 46px rgba(0,0,0,.32);
    }

    .stage canvas { max-width: 100%; max-height: 100%; display: block; }
    .view { width: 100%; height: 100%; min-height: 530px; }

    .viewer-presets {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 4;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      max-width: calc(100% - 24px);
      padding: 4px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 999px;
      background: rgba(12,16,22,.78);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 24px rgba(0,0,0,.24);
    }

    .viewer-presets button {
      min-height: 29px;
      padding: 5px 10px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--text-muted);
      font: inherit;
      font-size: .64rem;
      font-weight: 750;
      cursor: pointer;
      transition: var(--transition);
    }

    .viewer-presets button:hover { color: #fff; background: rgba(255,255,255,.08); }
    .viewer-presets button.active {
      color: #fff;
      background: var(--header-gray);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
    }

    #threeView canvas { touch-action: none; cursor: grab; }
    #threeView canvas:active { cursor: grabbing; }
    .empty { color: var(--text-muted); font-size: .76rem; text-align: center; padding: 20px; }
    .hidden { display: none !important; }

    .stage-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 10px;
      color: var(--text-muted);
      font-size: .63rem;
    }

    .tech-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--secondary);
      font-weight: 750;
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 100;
      max-width: min(390px, calc(100% - 36px));
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: #24242a;
      color: var(--text-main);
      box-shadow: 0 14px 42px rgba(0,0,0,.42);
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: .2s ease;
      font-size: .78rem;
    }

    .toast.show { opacity: 1; transform: translateY(0); }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(10px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: .2s ease;
    }

    .modal.open { opacity: 1; visibility: visible; pointer-events: auto; }

    .modal-dialog {
      width: min(620px, 100%);
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: #202024;
      box-shadow: 0 28px 90px rgba(0,0,0,.62);
      transform: translateY(8px);
      transition: .2s ease;
    }

    .modal.open .modal-dialog { transform: translateY(0); }
    .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.22); }
    .modal-title { color: var(--primary); font-size: .9rem; font-weight: 800; }
    .modal-close { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%; background: rgba(255,255,255,.05); color: white; cursor: pointer; }
    .modal-body { display: grid; gap: 13px; padding: 18px; color: var(--text-muted); font-size: .78rem; line-height: 1.62; }
    .modal-body strong { color: var(--text-main); }
    .modal-step { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; align-items: start; }
    .modal-step b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: rgba(var(--secondary-rgb), .12); color: var(--secondary); font-size: .7rem; }

    @media (max-width: 920px) {
      .page { width: min(760px, calc(100% - 22px)); }
      .workspace { grid-template-columns: 1fr; }
      .workflow { border-right: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; }
      .preview-area { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
      .stage, .view { min-height: 500px; }
    }

    @media (max-width: 620px) {
      .page { width: calc(100% - 14px); padding-top: 12px; }
      .brand-area { align-items: stretch; flex-wrap: wrap; gap: 6px; margin-bottom: -1px; }
      .brand-lockup { min-height: 42px; padding: 6px 10px; }
      .brand-svg { width: 118px; }
      .workspace-tabs { order: 3; width: 100%; overflow-x: auto; gap: 5px; scrollbar-width: none; }
      .workspace-tabs::-webkit-scrollbar { display: none; }
      .tool-tab { height: 44px; min-height: 44px; padding: 8px 11px; font-size: .72rem; }
      .tool-tab-badge { height: 18px; min-height: 18px; font-size: .5rem; padding: 3px 6px; }
      .workspace-spacer { display: none; }
      .brand-area > .saas-account-button { flex-basis: 190px !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; height: 42px !important; min-height: 42px !important; margin-left: auto !important; }
      .app-shell { margin-top: 0; }
      .tool-banner { height: 112px; }
      .local-badge { align-self: flex-start; }
      .workflow, .preview-area { padding: 13px; }
      .controls, .row { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .preview-toolbar { align-items: flex-start; flex-direction: column; }
      .tabs { width: 100%; }
      .tabs button { flex: 1; padding-inline: 6px; }
      .stage, .view { min-height: 390px; }
      .viewer-presets {
        top: 8px;
        left: 8px;
        right: 8px;
        max-width: none;
        justify-content: center;
        border-radius: var(--radius-md);
      }
      .viewer-presets button { flex: 1 1 auto; padding-inline: 7px; }
      .stage-note { align-items: flex-start; flex-direction: column; }
      .metrics { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    }


    /* Refinamento visual inspirado no MAD Pro — somente layout/aparência. */
    :root {
      --shell-gutter: 26px;
      --nav-font-size: .84rem;
      --preview-height: 530px;
    }

    .page { padding-top: 30px; }

    .brand-area {
      min-height: 50px;
      margin-bottom: 0;
      gap: 8px;
      align-items: flex-end;
    }

    .brand-lockup {
      height: 50px;
      padding: 0 22px 0 var(--shell-gutter);
      justify-content: flex-start;
      background: transparent;
    }

    .brand-svg {
      width: 148px;
      filter: drop-shadow(0 7px 18px rgba(0,0,0,.34));
    }

    .workspace-tabs { gap: 8px; }

    .tool-tab {
      height: 50px;
      min-height: 50px;
      padding: 0 23px;
      border: 0;
      border-radius: 12px 12px 0 0;
      background: #141416;
      color: #92929a;
      font-size: var(--nav-font-size);
      font-weight: 800;
      box-shadow: none;
    }

    .tool-tab.active {
      border: 0;
      background: var(--bg-shell);
      color: #fff;
      box-shadow: none;
    }

    .tool-tab:not(.active):hover {
      background: #1a1a1d;
      color: #b8b8bf;
    }

    .tool-tab-badge {
      height: 18px;
      min-height: 18px;
      padding: 3px 7px;
      border: 0;
      font-size: .56rem;
      line-height: 1;
      box-shadow: none;
    }

    .app-shell {
      margin-top: 0;
      overflow: hidden;
      border: 0;
      border-radius: var(--radius-lg);
      background: var(--bg-shell);
      box-shadow: var(--shadow-soft);
    }

    .brand-area > .saas-account-button {
      height: 50px !important;
      min-height: 50px !important;
      border: 0 !important;
      border-radius: 12px 12px 0 0 !important;
      background: #111113 !important;
      box-shadow: none !important;
    }

    .brand-area > .saas-account-button:hover {
      border: 0 !important;
      background: #18181b !important;
    }

    .tool-banner {
      height: 140px;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      background: #111113;
    }

    .tool-banner img {
      object-fit: cover;
      object-position: center;
    }

    .local-badge { display: none !important; }

    .workflow {
      padding: 20px var(--shell-gutter) 26px;
      border-right-color: rgba(255,255,255,.045);
      border-radius: 0;
    }

    .workflow-guide {
      justify-content: flex-start;
      margin: 1px 0 15px;
      text-align: left;
    }

    /* Cabeçalhos e conteúdos ficam na mesma régua, como no MAD Pro. */
    .session {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .session-header,
    .session.active .session-header {
      border-radius: var(--radius-md);
    }

    .session-header:hover {
      background: var(--header-hover);
      box-shadow: none;
    }

    .session-content {
      background: transparent;
      border-radius: 0;
    }

    .session-inner {
      padding: 10px 0 0;
      border-top: 0;
    }

    .drop,
    .status,
    .controls,
    .actions {
      width: 100%;
    }

    .preview-area {
      padding: 20px var(--shell-gutter) 26px;
      border-radius: 0;
    }

    /* A moldura da prévia nunca muda de altura; só o conteúdo se adapta. */
    .stage {
      flex: 0 0 var(--preview-height);
      width: 100%;
      height: var(--preview-height);
      min-height: var(--preview-height);
      max-height: var(--preview-height);
    }

    .view {
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: 100%;
      overflow: hidden;
    }

    #maskCanvas {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    #vectorPreview {
      display: grid;
      place-items: center;
    }

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

    #threeView,
    #threeView canvas {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      max-height: 100% !important;
      display: block;
    }

    @media (max-width: 920px) {
      :root { --preview-height: 500px; }
    }

    @media (max-width: 620px) {
      :root {
        --shell-gutter: 14px;
        --preview-height: 390px;
      }

      .brand-lockup { padding-left: var(--shell-gutter); }
      .tool-tab { padding-inline: 12px; }
      .workflow,
      .preview-area { padding-left: var(--shell-gutter); padding-right: var(--shell-gutter); }
      .tool-banner { height: 108px; }
    }
  

    /* v4.1 — cabeçalho responsivo: a conta nunca é empurrada para fora */
    .brand-area {
      display: grid !important;
      grid-template-columns: 180px minmax(0, 1fr) 214px !important;
      align-items: end !important;
      gap: 8px !important;
      width: 100%;
    }

    .brand-lockup {
      width: 180px;
      min-width: 180px;
      padding-left: 12px;
      padding-right: 12px;
    }

    .brand-svg { width: 150px; }

    .workspace-tabs {
      min-width: 0 !important;
      width: 100%;
      display: grid !important;
      grid-template-columns: minmax(210px, 1.25fr) minmax(165px, .9fr) minmax(165px, .9fr);
      gap: 8px !important;
    }

    .tool-tab {
      width: 100%;
      min-width: 0;
      padding-left: 13px;
      padding-right: 13px;
      font-size: .78rem;
    }

    .tool-tab > span:first-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .workspace-spacer { display: none !important; }

    .brand-area > .saas-account-button {
      grid-column: 3;
      width: 214px !important;
      min-width: 214px !important;
      max-width: 214px !important;
      margin-left: 0 !important;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    }

    /* A imagem revela as duas curvas superiores do painel. */
    .app-shell,
    .tool-banner,
    .tool-banner img {
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    @media (max-width: 1080px) {
      .brand-area {
        grid-template-columns: 152px minmax(0, 1fr) 190px !important;
      }
      .brand-lockup { width: 152px; min-width: 152px; }
      .brand-svg { width: 132px; }
      .workspace-tabs { grid-template-columns: minmax(185px, 1.2fr) minmax(145px, .9fr) minmax(145px, .9fr); }
      .brand-area > .saas-account-button {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
      }
    }

    @media (max-width: 860px) {
      .brand-area {
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-end !important;
      }
      .brand-lockup { order: 1; }
      .brand-area > .saas-account-button {
        order: 2;
        margin-left: auto !important;
      }
      .workspace-tabs {
        order: 3;
        flex-basis: 100%;
        display: flex !important;
        overflow-x: auto;
      }
      .tool-tab { min-width: max-content; }
    }


    /* Navegação visual por ferramentas — configuração dinâmica via painel administrativo */
    .page{padding-top:22px}.leal-topbar{display:flex!important;align-items:center!important;min-height:55px!important;margin:0 0 16px!important;padding:0 14px!important}.brand-lockup{height:auto!important;padding:0!important}.brand-svg{width:190px!important;max-height:45px!important;filter:none!important}.topbar-actions{order:3;margin-left:10px;display:flex;align-items:center;gap:10px}.top-info-button{height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--primary);color:#fff;font-weight:900;cursor:pointer}.brand-area>.saas-account-button{order:2!important;position:static!important;order:initial!important;flex:0 0 220px!important;width:220px!important;min-width:220px!important;max-width:220px!important;height:48px!important;min-height:48px!important;margin:0 0 0 10px!important;border:0!important;border-radius:12px!important;background:rgba(17,17,19,.88)!important}.app-shell{overflow:hidden;border:0!important;border-radius:20px!important}.tool-navigator{--active-color:#ef233c;display:grid;grid-template-columns:repeat(3,1fr);height:160px;background:#111113;border-radius:20px 20px 0 0;overflow:hidden;border-bottom:18px solid var(--active-color);transition:border-color .25s ease}.tool-card{position:relative;isolation:isolate;overflow:hidden;border:0;background:#222;color:#fff;cursor:pointer;text-align:left;padding:0 28px}.tool-card-bg{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .35s ease,filter .35s ease}.tool-card-overlay{position:absolute;inset:0;z-index:-2;background:var(--tool-color,#303034);opacity:var(--tool-opacity,.62);mix-blend-mode:multiply}.tool-card-title{position:absolute;left:28px;bottom:25px;font-size:1rem;letter-spacing:.01em}.tool-card:not(.active)::after{content:"";position:absolute;inset:0;z-index:-1;box-shadow:inset 34px 0 35px -30px rgba(0,0,0,.95),inset -34px 0 35px -30px rgba(0,0,0,.95);background:rgba(0,0,0,.12)}.tool-card.active .tool-card-bg{transform:scale(1.06)}.tool-card:hover .tool-card-bg{transform:scale(1.08)}.tool-coming-soon{min-height:520px;display:grid;place-content:center;gap:8px;text-align:center;background:#18181b;color:var(--text-muted)}.tool-coming-soon strong{color:#fff;font-size:1.25rem}.workspace{border-radius:0!important}.page-footer{display:none}.admin-modal{position:fixed;inset:0;z-index:30000;display:none;place-items:center;padding:18px;background:rgba(0,0,0,.75);backdrop-filter:blur(10px)}.admin-modal.open{display:grid}.admin-dialog{width:min(900px,100%);max-height:92vh;overflow:auto;padding:24px;border-radius:18px;background:#18181b;box-shadow:0 30px 100px #000}.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.admin-head button{width:36px;height:36px;border:0;border-radius:50%;background:#303034;color:#fff;cursor:pointer}.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.admin-tool{display:grid;gap:10px;padding:15px;border-radius:13px;background:#111113}.admin-tool label{display:grid;gap:5px;color:var(--text-muted);font-size:.72rem}.admin-tool input{width:100%;padding:9px;border:1px solid #3f3f46;border-radius:8px;background:#18181b;color:#fff}.admin-preview{height:95px;border-radius:10px;background-size:cover;background-position:center}.admin-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.admin-actions button,.admin-open-button{padding:10px 15px;border:0;border-radius:9px;background:var(--secondary);color:#fff;font-weight:800;cursor:pointer}.admin-open-button{background:#303034}.admin-feedback{min-height:22px;color:var(--secondary);font-size:.75rem}@media(max-width:780px){.brand-svg{width:145px!important}.top-info-button{display:none}.brand-area>.saas-account-button{flex-basis:180px!important;width:180px!important;min-width:180px!important}.tool-navigator{height:125px}.tool-card{padding:0 15px}.tool-card-title{left:15px;bottom:20px;font-size:.75rem}.admin-grid{grid-template-columns:1fr}}
  
    /* v1.1 — navegação diagonal refinada */
    .leal-topbar{justify-content:space-between!important;padding:0!important;margin-bottom:18px!important}
    .brand-lockup{margin-left:14px!important}
    .brand-area>.saas-account-button{margin-left:auto!important;margin-right:0!important}

    .tool-navigator{
      --cut:72px;
      display:flex!important;
      grid-template-columns:none!important;
      position:relative;
      isolation:isolate;
      height:160px;
      overflow:hidden;
      border-bottom:18px solid var(--active-color);
      background:#111113;
    }
    .tool-card{
      flex:1 1 0;
      min-width:0;
      height:100%;
      margin:0;
      padding:0 28px;
      overflow:hidden;
      isolation:isolate;
      clip-path:none;
      z-index:1;
    }
    .tool-card:nth-child(1){
      margin-right:calc(var(--cut) * -1);
      padding-right:calc(28px + var(--cut));
      clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
    }
    .tool-card:nth-child(2){
      margin-right:calc(var(--cut) * -1);
      padding-left:calc(28px + var(--cut));
      padding-right:calc(28px + var(--cut));
      clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
    }
    .tool-card:nth-child(3){
      padding-left:calc(28px + var(--cut));
      clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%);
    }
    .tool-card.active{z-index:8;filter:none}
    .tool-card:not(.active){z-index:2;filter:brightness(.88)}
    .tool-card::before,.tool-card::after{
      content:"";
      position:absolute;
      top:-24px;
      bottom:-24px;
      width:48px;
      z-index:5;
      pointer-events:none;
      opacity:0;
      transition:opacity .2s ease;
    }
    .tool-card::before{
      left:0;
      transform:skewX(-24deg);
      background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,0));
    }
    .tool-card::after{
      right:0;
      transform:skewX(-24deg);
      background:linear-gradient(270deg,rgba(0,0,0,.72),rgba(0,0,0,0));
    }
    .tool-navigator[data-active-tool="plaquinhas"] .tool-card:nth-child(2)::before,
    .tool-navigator[data-active-tool="plaquinhas"] .tool-card:nth-child(3)::before{opacity:1}
    .tool-navigator[data-active-tool="chaveiros"] .tool-card:nth-child(1)::after,
    .tool-navigator[data-active-tool="chaveiros"] .tool-card:nth-child(3)::before{opacity:1}
    .tool-navigator[data-active-tool="letreiros"] .tool-card:nth-child(1)::after,
    .tool-navigator[data-active-tool="letreiros"] .tool-card:nth-child(2)::after{opacity:1}
    .tool-card:not(.active)::after{box-shadow:none!important}
    @media(max-width:780px){
      .tool-navigator{--cut:38px;height:125px}
      .tool-card:nth-child(1){padding-right:calc(15px + var(--cut))}
      .tool-card:nth-child(2){padding-left:calc(15px + var(--cut));padding-right:calc(15px + var(--cut))}
      .tool-card:nth-child(3){padding-left:calc(15px + var(--cut))}
      .tool-card-title{font-size:.72rem}
    }