:root {
    /* === Paleta Gleba360 === */
    --black:           #000000;
    --graphite:        #333333;
    --charcoal:        #4D4D4D;
    --stormy-teal:     #2C5A3A;
    --jungle-teal:     #5E8A40;
    --tropical-teal:   #7FA86A;
    --deep-space-blue: #1C3D2A;
    --baltic-blue:     #2E6B2C;
    --steel-blue:      #3E7D3A;
    --white:           #FFFFFF;

    /* === Acento complementar (fora da paleta oficial) === */
    --solar:           #F0B429;
    --solar-2:         #D99A1F;

    /* === Tokens semânticos === */
    --primary:    var(--deep-space-blue);
    --primary-2:  #122B1D;
    --accent:     var(--steel-blue);
    --accent-2:   var(--baltic-blue);
    --ink:        var(--black);
    --ink-2:      var(--graphite);
    --muted:      var(--charcoal);
    --muted-2:    #6B6B6B;
    --line:       #E1E5E9;
    --paper:      #F4F6F8;
    --paper-2:    #EAEEF2;
    --surface:    var(--white);

    /* Estados */
    --success:    var(--jungle-teal);
    --warning:    #C77D2D;
    --danger:     #B33A3A;
    --info:       var(--steel-blue);

    /* Categorias temáticas (derivadas da paleta + 3 hues complementares para dar 11 cores distintas) */
    --cat-bt:   var(--deep-space-blue);  /* Base Territorial */
    --cat-cr:   var(--baltic-blue);      /* Cadastro Imobiliário */
    --cat-cu:   #8C4F70;                 /* Cultura e Patrimônio (rosa-vinho institucional) */
    --cat-ds:   var(--steel-blue);       /* Demografia e Sociedade */
    --cat-ef:   #B57140;                 /* Economia (ocre complementar) */
    --cat-ed:   #B8829E;                 /* Educação (rosé claro) */
    --cat-ma:   var(--jungle-teal);      /* Meio Ambiente */
    --cat-mi:   var(--charcoal);         /* Mobilidade (cinza infraestrutura) */
    --cat-sa:   var(--danger);           /* Saúde */
    --cat-sp:   var(--stormy-teal);      /* Segurança Pública */
    --cat-ot:   var(--tropical-teal);    /* Outras */
    --cat-tb:   #5B7A8C;                 /* Base Territorial IBGE (divisas) */

    --sans: "Inter", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    font-feature-settings: "cv11", "ss01";
  }

  /* === Wordmark split colors === */
  .geo-word .g { color: var(--deep-space-blue); }
  .geo-word .c { color: var(--steel-blue); }
  .geo-word.on-dark .c { color: var(--white); }
  .wm { display: inline-block; width: auto; vertical-align: middle; }

  /* === Yellow seal === */
  .seal {
    background: var(--solar);
    box-shadow: inset 0 0 0 1.5px var(--deep-space-blue);
    border-radius: 20%;
    display: grid;
    place-items: center;
  }
  .seal.steel { background: var(--steel-blue); box-shadow: inset 0 0 0 1.5px var(--deep-space-blue); }
  .seal.deep  { background: var(--deep-space-blue); box-shadow: none; }

  ::selection { background: var(--steel-blue); color: var(--white); }

  /* ============ TOP NAV ============ */
  .topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .topnav-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .brand-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
  }
  .brand-lockup .mark {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .brand-lockup .mark svg { width: 100%; height: 100%; display: block; }
  .brand-lockup .word {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }
  .brand-lockup .word b {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.025em;
  }
  .brand-lockup .word b .g { color: var(--deep-space-blue); }
  .brand-lockup .word b .c { color: var(--steel-blue); }
  .brand-lockup .word small {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--deep-space-blue);
    letter-spacing: 0.16em;
    margin-top: 4px;
    background: var(--solar);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    width: fit-content;
  }
  .topnav nav {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-wrap: wrap;
  }
  .topnav nav a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 6px;
    transition: all .12s;
  }
  .topnav nav a:hover { background: var(--paper-2); color: var(--deep-space-blue); }
  .topnav .version {
    font-family: var(--mono);
    font-size: 10px;
    padding: 4px 8px;
    background: var(--solar);
    color: var(--deep-space-blue);
    border-radius: 4px;
    letter-spacing: 0.06em;
    font-weight: 700;
  }

  /* ============ Layout ============ */
  main { max-width: 1360px; margin: 0 auto; padding: 0 28px 120px; }
  section {
    padding: 88px 0 16px;
    border-top: 1px solid var(--line);
  }
  section:first-of-type { border-top: 0; padding-top: 40px; }
  .sec-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
  }
  .sec-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--white);
    letter-spacing: 0.1em;
    background: var(--deep-space-blue);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
  }
  .sec-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .sec-title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
    line-height: 1.05;
    color: var(--deep-space-blue);
  }
  .sec-sub {
    margin: 0 0 36px;
    color: var(--ink-2);
    max-width: 720px;
    font-size: 15.5px;
    line-height: 1.55;
  }
  .sec-sub strong { color: var(--deep-space-blue); font-weight: 600; }

  /* ============ HERO ============ */
  .hero { padding-top: 56px; padding-bottom: 24px; }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .hero-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deep-space-blue);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--solar);
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 700;
  }
  .hero h1 {
    font-size: clamp(44px, 5.5vw, 76px);
    line-height: 1.12;
    letter-spacing: -0.035em;
    margin: 0 0 22px;
    font-weight: 800;
    color: var(--deep-space-blue);
  }
  .hero h1 mark {
    background: var(--solar);
    color: var(--deep-space-blue);
    padding: 0 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .hero p {
    font-size: 17px;
    color: var(--ink-2);
    max-width: 560px;
    margin: 0 0 28px;
    line-height: 1.55;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 8px;
  }
  .hero-stats .stat .n {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--deep-space-blue);
  }
  .hero-stats .stat .l {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 6px;
    display: block;
  }
  .hero-art {
    background: var(--deep-space-blue);
    border-radius: 24px;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-self: center;
  }
  .hero-art .topo {
    position: absolute;
    inset: 0;
    opacity: 0.35;
  }
  .hero-art .coord {
    position: absolute;
    bottom: 18px;
    left: 18px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--solar);
    letter-spacing: 0.06em;
    font-weight: 500;
  }
  .hero-art .coord-2 {
    position: absolute;
    top: 18px;
    right: 18px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--tropical-teal);
    letter-spacing: 0.06em;
  }
  .hero-art .center-mark {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .hero-art .center-mark {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .hero-art .big-mark {
    width: 180px; height: 180px;
    background: var(--surface);
    border-radius: 32px;
    padding: 26px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    box-shadow: 0 14px 40px -10px rgba(0,0,0,0.45);
  }
  .hero-art .big-mark svg { width: 100%; height: 100%; display: block; }
  .hero-art h2 {
    color: var(--white);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0 0 10px;
    line-height: 1;
    text-align: center;
  }
  .hero-art h2 .g { color: var(--white); }
  .hero-art h2 .c { color: var(--steel-blue); }
  .hero-art .subline {
    background: var(--solar);
    color: var(--deep-space-blue);
    padding: 5px 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    border-radius: 4px;
    margin: 0;
    text-transform: uppercase;
  }

  /* ============ Cards / grids ============ */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .grid-10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
  .grid-11 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 8px; }
  @media (min-width: 880px) { .grid-11 { grid-template-columns: repeat(12, 1fr); } }

  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .card .stage {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
  }
  .card.dark .stage { background: var(--deep-space-blue); border-color: var(--primary-2); }
  .card .lbl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .card .lbl .name { font-weight: 600; font-size: 13px; color: var(--deep-space-blue); }
  .card .lbl .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .card.dark .lbl .name { color: var(--white); }
  .card.dark .lbl .meta { color: var(--tropical-teal); }

  /* ============ Asset downloads ============ */
  .assets-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .asset-dl {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .asset-dl:hover {
    border-color: var(--steel-blue);
    box-shadow: 0 8px 22px rgba(19, 58, 83, 0.08);
    transform: translateY(-1px);
  }
  .asset-dl:focus-visible { outline: 2px solid var(--steel-blue); outline-offset: 2px; }
  .asset-dl .ic {
    width: 60px; height: 46px;
    flex: none;
    display: grid; place-items: center;
    padding: 6px;
    background: var(--paper);
    border-radius: 8px;
  }
  .asset-dl .ic img { max-width: 100%; max-height: 100%; }
  .asset-dl .t { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
  .asset-dl .t b { font-size: 13px; font-weight: 600; color: var(--deep-space-blue); }
  .asset-dl .t em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--muted); }
  .asset-dl .dl { color: var(--steel-blue); margin-left: auto; flex: none; }
  @media (max-width: 760px) { .assets-row { grid-template-columns: 1fr; } }

  /* ============ Concept blocks ============ */
  .principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
  }
  .principle {
    padding: 28px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .principle:last-child { border-right: 0; }
  .principle .num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--white);
    background: var(--deep-space-blue);
    padding: 3px 7px;
    border-radius: 3px;
    width: fit-content;
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  .principle h3 { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--deep-space-blue); }
  .principle p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

  /* ============ Logo construction ============ */
  .construction {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 32px;
  }
  .construction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .construction .geom {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px dashed var(--muted-2);
    padding: 12%;
  }
  .construction .specs {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .construction .specs .row {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: baseline;
    gap: 16px;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 14px;
  }
  .construction .specs .row:last-child { border-bottom: 0; padding-bottom: 0; }
  .construction .specs .tag {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--white);
    background: var(--deep-space-blue);
    padding: 3px 6px;
    border-radius: 3px;
    width: fit-content;
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  .construction .specs .val { font-size: 14px; color: var(--ink-2); }
  .construction .specs .val b { color: var(--deep-space-blue); font-weight: 600; }

  /* ============ Colors ============ */
  .color {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  .color .swatch {
    height: 130px;
    position: relative;
  }
  .color .swatch::after {
    content: attr(data-hex);
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-family: var(--mono);
    font-size: 10px;
    background: rgba(0,0,0,0.7);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.04em;
  }
  .color .info {
    padding: 12px 14px;
    border-top: 1px solid var(--line);
  }
  .color .info .name { font-weight: 600; font-size: 13px; color: var(--deep-space-blue); }
  .color .info .role { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .color .info .codes {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    margin-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* === Official palette callout === */
  .palette-callout {
    background: var(--deep-space-blue);
    color: var(--white);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: center;
  }
  .palette-callout h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
  }
  .palette-callout p { margin: 0; color: var(--tropical-teal); font-size: 13px; line-height: 1.5; }
  .palette-callout .strip {
    height: 56px;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
  }
  .palette-callout .strip span { flex: 1; }

  /* ============ Category system ============ */
  .cat-table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
  }
  .cat-row {
    display: grid;
    grid-template-columns: 60px 1fr 90px 120px 160px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    gap: 16px;
  }
  .cat-row:last-child { border-bottom: 0; }
  .cat-row.head {
    background: var(--paper-2);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 16px;
  }
  .cat-badge {
    width: 44px;
    height: 32px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: var(--white);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .cat-name { font-weight: 600; font-size: 14px; color: var(--deep-space-blue); }
  .cat-count {
    font-family: var(--mono);
    font-size: 11px;
    background: var(--paper-2);
    color: var(--deep-space-blue);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    width: fit-content;
    border: 1px solid var(--line);
  }
  .cat-count.solid { background: var(--deep-space-blue); color: var(--white); border-color: var(--deep-space-blue); }
  .cat-hex {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
  }
  .cat-use {
    font-size: 12px;
    color: var(--muted);
  }

  /* ============ Buttons ============ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    text-transform: uppercase;
    cursor: pointer;
    transition: all .12s;
  }
  .btn:hover { background: var(--paper); border-color: var(--line); color: var(--deep-space-blue); }
  .btn.primary { background: var(--steel-blue); border-color: var(--steel-blue); color: var(--white); }
  .btn.primary:hover { background: var(--baltic-blue); border-color: var(--baltic-blue); color: var(--white); }
  .btn.dark { background: var(--deep-space-blue); border-color: var(--deep-space-blue); color: var(--white); }
  .btn.dark:hover { background: var(--primary-2); border-color: var(--primary-2); color: var(--white); }
  .btn svg { width: 14px; height: 14px; }

  /* ============ Tabs ============ */
  .tabs {
    display: inline-flex;
    background: var(--paper-2);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
  }
  .tabs button {
    background: transparent;
    border: 0;
    padding: 8px 16px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .tabs button.active {
    background: var(--deep-space-blue);
    color: var(--white);
  }
  .sidebar .tabs { display: flex; width: 100%; }
  .sidebar .tabs button { flex: 1; justify-content: center; }
  .stage .tabs { display: flex; width: 100%; }
  .stage .tabs button { flex: 1; justify-content: center; }
  .avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: 0.01em;
    flex-shrink: 0;
    position: relative;
    line-height: 1;
    user-select: none;
  }
  .avatar > svg { display: block; }
  .avatar-status {
    position: absolute;
    right: -1px; bottom: -1px;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--surface);
  }

  /* ============ Type ============ */
  .type-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: 32px;
  }
  .type-card .lhs .fam { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--deep-space-blue); }
  .type-card .lhs .use { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: 0.06em; }
  .type-card .lhs .url { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 14px; }
  .type-card .rhs { display: flex; flex-direction: column; gap: 16px; }
  .type-card .rhs .row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: 14px; }
  .type-card .rhs .row:last-child { border: 0; padding-bottom: 0; }
  .type-card .rhs .tag { font-family: var(--mono); font-size: 9px; color: var(--white); background: var(--deep-space-blue); padding: 3px 6px; border-radius: 3px; width: fit-content; font-weight: 600; letter-spacing: 0.06em; }
  .type-card .rhs .sample { color: var(--ink); }
  .type-card.mono .lhs .fam { font-family: var(--mono); }
  .type-card.mono .rhs .sample { font-family: var(--mono); }

  /* ============ Icon tiles ============ */
  .icon-tile {
    aspect-ratio: 1 / 1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    place-items: center;
    position: relative;
    padding: 28px;
  }
  .icon-tile svg { width: 60%; height: 60%; max-width: 32px; max-height: 32px; }
  .icon-tile .ic-name {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ============ WebGIS mock ============ */
  .product-mock {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px -28px rgba(19, 58, 83, 0.35);
  }
  .product-mock .browser {
    background: var(--paper-2);
    height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
  }
  .product-mock .browser .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
  .product-mock .browser .url {
    margin-left: 14px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    background: var(--surface);
    padding: 4px 10px;
    border-radius: 4px;
    flex: 1;
    max-width: 480px;
  }
  .product-mock .app-header {
    height: 72px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 20px;
    gap: 20px;
  }
  .product-mock .app-header .brand-lockup { justify-self: start; }
  .product-mock .app-header .header-search { justify-self: center; }
  .product-mock .app-header .app-actions { justify-self: end; }
  .product-mock .app-header .brand-lockup .mark { width: 30px; height: 30px; }
  .product-mock .app-header .brand-lockup .word b { font-size: 13px; }
  .product-mock .app-header .brand-lockup .word .wm { height: 16px !important; }
  .product-mock .app-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  /* unified header search */
  .header-search {
    flex: none;
    width: 520px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    overflow: hidden;
    transition: all .12s;
  }
  .header-search:focus-within { border-color: var(--steel-blue); background: var(--surface); box-shadow: var(--ring); }
  .header-search .scope {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 100%;
    border: 0;
    border-right: 1px solid var(--line);
    background: transparent;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--deep-space-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }
  .header-search .scope:hover { color: var(--steel-blue); }
  .layer-swatch {
    width: 20px; height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .switch {
    width: 38px; height: 22px;
    border-radius: 999px;
    background: var(--muted-2);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    border: 0; padding: 0;
    transition: background .15s;
  }
  .switch::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform .15s;
  }
  .switch.on { background: var(--steel-blue); }
  .switch.on::after { transform: translateX(16px); }
  .header-search .scope svg { width: 12px; height: 12px; color: var(--muted); }
  .header-search .ic {
    display: grid; place-items: center;
    width: 36px; height: 100%;
    color: var(--muted);
    flex-shrink: 0;
  }
  .header-search .ic svg { width: 14px; height: 14px; }
  .header-search input {
    flex: 1;
    border: 0;
    background: transparent;
    height: 100%;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
    outline: none;
    min-width: 0;
  }
  .header-search input::placeholder { color: var(--muted-2); }
  .header-search .kbd {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 2px 5px;
    margin-right: 8px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .product-mock .app-body {
    display: grid;
    grid-template-columns: 360px 1fr;
    height: 620px;
    position: relative;
    transition: grid-template-columns 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .product-mock .app-body.sb-collapsed { grid-template-columns: 0px 1fr; }
  .product-mock .sidebar {
    border-right: 1px solid var(--line);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    background: var(--surface);
    transition: opacity 0.18s ease, padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
  }
  .product-mock .app-body.sb-collapsed .sidebar {
    opacity: 0; pointer-events: none;
    padding-left: 0; padding-right: 0;
  }
  /* Sidebar collapse toggle - sits on the divider */
  .product-mock .sb-toggle {
    position: absolute;
    top: 50%; left: 360px;
    transform: translate(-50%, -50%);
    z-index: 12;
    width: 26px; height: 40px;
    display: grid; place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--sh-2);
    cursor: pointer;
    color: var(--deep-space-blue);
    transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s;
  }
  .product-mock .sb-toggle:hover { background: var(--paper); }
  .product-mock .sb-toggle svg { width: 15px; height: 15px; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
  .product-mock .app-body.sb-collapsed .sb-toggle { left: 0; transform: translate(8px, -50%); }
  .product-mock .app-body.sb-collapsed .sb-toggle svg { transform: rotate(180deg); }
  /* Layer filter */
  .product-mock .layer-filter {
    position: relative;
    flex-shrink: 0;
  }
  .product-mock .layer-filter svg {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--muted); pointer-events: none;
  }
  .product-mock .layer-filter input {
    width: 100%; height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px 0 34px;
    font-family: var(--sans);
    font-size: 13px;
    background: var(--paper);
    color: var(--deep-space-blue);
  }
  .product-mock .layer-filter input:focus {
    outline: none; border-color: var(--steel-blue);
    box-shadow: 0 0 0 3px rgba(58, 128, 179, 0.16);
    background: var(--surface);
  }
  .product-mock .layer-list {
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto; overflow-x: hidden;
    flex: 1; padding-right: 2px;
  }
  .product-mock .layer-btn.is-hidden,
  .product-mock .layer-group.is-hidden { display: none; }
  .product-mock .layer-empty {
    display: none;
    font-family: var(--mono); font-size: 11px; color: var(--muted);
    letter-spacing: 0.04em; padding: 14px 4px; text-align: center;
  }
  .product-mock .layer-list.is-empty .layer-empty { display: block; }
  /* Sidebar tab panes */
  .product-mock .tab-pane { display: none; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
  .product-mock .tab-pane.active { display: flex; }
  /* Imóvel dossier */
  .product-mock .dossie { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overflow-x: hidden; flex: 1; padding-right: 2px; }
  .product-mock .dossie-hero {
    border: 1px solid var(--line); border-radius: 12px; padding: 14px;
    background: linear-gradient(150deg, var(--deep-space-blue), #0E2E42); color: var(--white);
    position: relative; overflow: hidden;
  }
  .product-mock .dossie-hero .dh-kicker {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--solar); margin-bottom: 6px;
  }
  .product-mock .dossie-hero .dh-name { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
  .product-mock .dossie-hero .dh-sub { font-size: 12px; opacity: 0.8; margin-top: 3px; }
  .product-mock .dossie-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .product-mock .dossie-stat {
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface);
  }
  .product-mock .dossie-stat .ds-v { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--deep-space-blue); letter-spacing: -0.01em; }
  .product-mock .dossie-stat .ds-v small { font-size: 11px; font-weight: 500; color: var(--muted); }
  .product-mock .dossie-stat .ds-l { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
  .product-mock .dossie-section .dss-title {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin-bottom: 7px;
  }
  .product-mock .kv-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
  }
  .product-mock .kv-row:last-child { border-bottom: 0; }
  .product-mock .kv-row .kv-k { color: var(--muted); }
  .product-mock .kv-row .kv-v { color: var(--deep-space-blue); font-weight: 600; font-family: var(--mono); font-size: 12px; }
  .product-mock .status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(31, 138, 91, 0.12); color: var(--success);
  }
  .product-mock .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
  .product-mock .uso-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
  .product-mock .uso-bar span { height: 100%; }
  .product-mock .uso-legend { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
  .product-mock .uso-legend .ul-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--deep-space-blue); }
  .product-mock .uso-legend .ul-sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
  .product-mock .uso-legend .ul-pct { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .product-mock .search { display: flex; flex-direction: column; gap: 6px; }
  .product-mock .search .lbl {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .product-mock .search input {
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 12px;
    font-family: var(--sans);
    font-size: 13px;
    background: var(--paper);
  }
  .product-mock .layer-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
  }
  .product-mock .layer-btn:hover { background: var(--paper); border-color: var(--deep-space-blue); }
  .product-mock .layer-btn .label {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--deep-space-blue);
  }
  /* expandable category + chevron */
  .product-mock .layer-btn .cat-chev { width: 14px; height: 14px; color: var(--muted); transition: transform 0.2s; flex-shrink: 0; }
  .product-mock .layer-group.open > .layer-btn .cat-chev { transform: rotate(90deg); }
  .product-mock .layer-group { display: flex; flex-direction: column; gap: 6px; }
  .product-mock .layer-items { display: none; flex-direction: column; gap: 2px; padding: 2px 0 4px 10px; margin-left: 11px; border-left: 1px solid var(--line); }
  .product-mock .layer-group.open .layer-items { display: flex; }
  /* Layer item: style swatch + name + toggle */
  .product-mock .layer-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 7px;
  }
  .product-mock .layer-item:hover { background: var(--paper); }
  .product-mock .layer-item .li-name { flex: 1; font-size: 12.5px; color: var(--deep-space-blue); line-height: 1.25; }
  /* symbology swatches */
  .product-mock .li-sw { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; }
  .product-mock .li-sw.fill { border-radius: 4px; border: 1.5px solid rgba(0,0,0,0.18); }
  .product-mock .li-sw.line::before { content: ""; width: 18px; height: 0; border-top-width: 3px; border-top-style: solid; border-radius: 2px; }
  .product-mock .li-sw.dash::before { content: ""; width: 18px; height: 0; border-top: 3px dashed currentColor; }
  .product-mock .li-sw.point::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor; }
  /* toggle switch */
  .product-mock .li-toggle {
    --tw: 32px; --th: 18px;
    appearance: none; -webkit-appearance: none;
    width: var(--tw); height: var(--th); border-radius: 999px;
    background: var(--line); position: relative; cursor: pointer; flex-shrink: 0;
    transition: background 0.18s ease; border: none;
  }
  .product-mock .li-toggle::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%; background: var(--surface);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.18s ease;
  }
  .product-mock .li-toggle:checked { background: var(--success); }
  .product-mock .li-toggle:checked::after { transform: translateX(14px); }
  .product-mock .li-toggle:focus-visible { outline: 2px solid var(--steel-blue); outline-offset: 2px; }
  .product-mock .map { position: relative; overflow: hidden; background: var(--paper-2); }
  .product-mock .map .map-bg {
    position: absolute; inset: 0;
    background:
      linear-gradient(rgba(19,58,83,0.07) 1px, transparent 1px) 0 0/48px 48px,
      linear-gradient(90deg, rgba(19,58,83,0.07) 1px, transparent 1px) 0 0/48px 48px,
      var(--paper-2);
  }
  .product-mock .map svg.shapes { position: absolute; inset: 0; width: 100%; height: 100%; }
  .product-mock .draw-tools {
    position: absolute; top: 16px; left: 16px;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--sh-2);
    overflow: hidden;
  }
  .product-mock .draw-tools .dt-label {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .product-mock .draw-tools button {
    width: 36px; height: 36px;
    background: var(--surface);
    border: 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--deep-space-blue);
  }
  .product-mock .draw-tools button:last-child { border-bottom: 0; }
  .product-mock .draw-tools button:hover { background: var(--paper); }
  .product-mock .draw-tools button.active { background: var(--deep-space-blue); color: var(--white); }
  .product-mock .draw-tools .dt-divider { height: 1px; background: var(--line); }
  .product-mock .map-controls {
    position: absolute; top: 16px; right: 16px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .product-mock .map-controls button {
    width: 36px; height: 36px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--deep-space-blue);
  }
  .product-mock .map-controls button:hover { background: var(--paper); }
  .product-mock .map-controls .zoom-group {
    display: flex; flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden;
    box-shadow: var(--sh-2);
  }
  .product-mock .map-controls .zoom-group button {
    box-shadow: none; border: 0; border-radius: 0;
  }
  .product-mock .map-controls .zoom-group button:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }
  .product-mock .map-controls button.active { background: var(--solar); color: var(--deep-space-blue); border-color: var(--solar-2); }
  .product-mock .popup {
    position: absolute;
    left: 50%; top: 35%;
    transform: translate(-50%, -50%);
    background: var(--deep-space-blue);
    color: var(--white);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 11px;
    min-width: 240px;
    box-shadow: 0 12px 28px -10px rgba(0,0,0,0.4);
  }
  .product-mock .popup b {
    color: var(--tropical-teal);
    display: block;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 700;
  }
  .product-mock .status-bar {
    height: 36px;
    border-top: 1px solid var(--line);
    background: var(--paper);
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
  }
  .product-mock .status-bar .coord {
    margin-left: auto;
    color: var(--deep-space-blue);
    font-weight: 500;
  }
  .product-mock .scale-bar {
    position: absolute;
    bottom: 16px; left: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .product-mock .scale-bar .sb-label {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--deep-space-blue);
    text-shadow: 0 1px 2px rgba(255,255,255,0.9), 0 0 2px rgba(255,255,255,0.9);
  }
  .product-mock .scale-bar .sb-ruler {
    width: 76px; height: 5px;
    position: relative;
  }
  .product-mock .scale-bar .sb-ruler::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--deep-space-blue);
  }
  .product-mock .scale-bar .sb-ruler::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    border-left: 1px solid var(--deep-space-blue);
    border-right: 1px solid var(--deep-space-blue);
  }
  .product-mock .map-legend {
    position: absolute;
    bottom: 16px; right: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: var(--sh-2);
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 168px;
  }
  .product-mock .map-legend .lg-title {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1px;
  }
  .product-mock .map-legend .lg-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 500;
    color: var(--deep-space-blue);
  }
  .product-mock .map-legend .lg-swatch {
    width: 16px; height: 12px;
    flex-shrink: 0;
    border-radius: 2px;
  }
  .product-mock .map-legend .lg-swatch.line {
    height: 0; border-top-width: 2.5px; border-top-style: solid;
  }
  .product-mock .map-legend .lg-swatch.dash {
    height: 0; border-top: 2px dashed var(--charcoal);
  }
  .product-mock .map-legend .lg-swatch.dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid;
    margin: 0 2px;   /* mantém o slot de 16px da legenda: alinha o texto na vertical com as demais linhas */
  }
  .product-mock .minimap {
    position: absolute;
    bottom: 14px; right: 14px;
    width: 180px; height: 110px;
    background: var(--surface);
    border: 1px solid var(--deep-space-blue);
    border-radius: 6px;
    overflow: hidden;
  }

  /* ============ Rules ============ */
  .rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .rule {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  .rule .stage {
    aspect-ratio: 4 / 3;
    background: var(--paper);
    display: grid;
    place-items: center;
    padding: 24px;
    position: relative;
  }
  .rule .stage.bad { background: #FBEFEC; }
  .rule .label {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
  }
  .rule .label .tag {
    font-family: var(--mono);
    font-size: 9px;
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .rule .label .tag.ok { background: #E8F0EC; color: var(--jungle-teal); }
  .rule .label .tag.no { background: #F8E0E0; color: var(--danger); }

  /* ============ App icons ============ */
  .appicons {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  .appicon {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  .appicon .ic {
    background: var(--deep-space-blue);
    display: grid; place-items: center;
  }
  .appicon .lbl {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }

  /* ============ Patterns ============ */
  .pattern {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
  }
  .pattern .lbl {
    position: absolute;
    bottom: 10px; left: 10px;
    font-family: var(--mono);
    font-size: 10px;
    background: var(--deep-space-blue);
    color: var(--white);
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
  }

  /* ============ Footer ============ */
  footer {
    margin-top: 96px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* ============================================================
     UI KIT - extended primitives
     ============================================================ */

  /* tokens - espaçamento + raios + sombras */
  :root {
    --r-2: 2px; --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-10: 10px; --r-12: 12px; --r-14: 14px;
    --sh-1: 0 1px 0 rgba(19,58,83,0.04);
    --sh-2: 0 1px 2px rgba(19,58,83,0.06), 0 1px 1px rgba(19,58,83,0.04);
    --sh-3: 0 6px 14px -8px rgba(19,58,83,0.20), 0 1px 2px rgba(19,58,83,0.06);
    --sh-4: 0 18px 40px -20px rgba(19,58,83,0.30), 0 2px 6px rgba(19,58,83,0.08);
    --sh-5: 0 32px 64px -28px rgba(19,58,83,0.40), 0 6px 12px rgba(19,58,83,0.10);
    --ring: 0 0 0 3px rgba(62,125,58,0.28);
    --ring-d: 0 0 0 3px rgba(179,58,30,0.28);
  }

  .mono { font-family: var(--mono); }
  code, kbd { font-family: var(--mono); font-size: 12px; background: var(--paper-2); padding: 2px 5px; border-radius: 3px; color: var(--deep-space-blue); }

  /* ---------- ESPACO / RAIO / SOMBRA / GRID ---------- */
  .scale-grid {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    align-items: end;
  }
  .scale-grid .step { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
  .scale-grid .bar {
    background: var(--steel-blue);
    border-radius: 3px;
    width: 100%;
  }
  .scale-grid .step .name { font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: center; letter-spacing: 0.06em; }
  .scale-grid .step .val  { font-family: var(--mono); font-size: 11px; color: var(--deep-space-blue); text-align: center; font-weight: 600; }

  .radii-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
  }
  .radii-row .r {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .radii-row .r .demo {
    width: 64px; height: 64px;
    background: var(--deep-space-blue);
  }
  .radii-row .r .name { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; }
  .radii-row .r .v    { font-family: var(--mono); font-size: 11px; color: var(--deep-space-blue); font-weight: 600; }

  .shadow-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
  .shadow-row .sh {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .shadow-row .sh .demo {
    width: 100%;
    height: 70px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
  }
  .shadow-row .sh .name { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; }
  .shadow-row .sh .v    { font-family: var(--mono); font-size: 11px; color: var(--deep-space-blue); font-weight: 600; text-align: center; }

  .breakpoints {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .bp {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .bp .num { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; color: var(--deep-space-blue); }
  .bp .name { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
  .bp .desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }

  /* ---------- BUTTONS - full states ---------- */
  .btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  /* sizes */
  .btn.sm { padding: 5px 10px; font-size: 11px; }
  .btn.md { padding: 8px 14px; font-size: 12px; }
  .btn.icon-only { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; }
  .btn.icon-only.square { border-radius: 6px; }

  /* variants */
  .btn.accent { background: var(--steel-blue); border-color: var(--steel-blue); color: var(--white); }
  .btn.accent:hover { background: #2F6E9E; border-color: #2F6E9E; }
  .btn.danger { background: var(--danger); border-color: var(--danger); color: var(--white); }
  .btn.danger:hover { background: #962F2F; border-color: #962F2F; }
  .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
  .btn.ghost:hover { background: var(--paper-2); border-color: transparent; color: var(--deep-space-blue); }
  .btn.solar { background: var(--solar); border-color: var(--solar-2); color: var(--deep-space-blue); }
  .btn.solar:hover { background: var(--solar-2); border-color: var(--solar-2); }

  /* states */
  .btn.is-hover { background: var(--paper); border-color: var(--deep-space-blue); color: var(--deep-space-blue); }
  .btn.is-hover.primary, .btn.is-hover.accent { background: var(--baltic-blue); border-color: var(--baltic-blue); color: var(--white); }
  .btn.is-hover.dark { background: var(--primary-2); border-color: var(--primary-2); color: var(--white); }
  .btn.is-hover.danger { background: #962F2F; border-color: #962F2F; color: var(--white); }
  .btn.is-focus { box-shadow: var(--ring); outline: none; }
  .btn.is-focus.danger { box-shadow: var(--ring-d); }
  .btn.is-active { transform: translateY(1px); }
  .btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
  .btn.is-loading { color: transparent; position: relative; pointer-events: none; }
  .btn.is-loading::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-color: rgba(255,255,255,0.4);
    border-top-color: currentColor;
    border-radius: 50%;
    left: 50%; top: 50%;
    margin: -7px 0 0 -7px;
    color: var(--white);
    animation: spin .8s linear infinite;
  }
  .btn.ghost.is-loading::after, .btn:not(.primary):not(.dark):not(.danger):not(.accent):not(.solar).is-loading::after { color: var(--deep-space-blue); border-color: rgba(19,58,83,0.25); border-top-color: var(--deep-space-blue); }
  @keyframes spin { to { transform: rotate(360deg); } }

  .state-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    align-items: center;
  }
  .state-row > .lbl {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: right;
    padding-right: 8px;
  }
  .states-table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .states-head {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 10px;
  }
  .states-head .col {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
  }
  .states-head .col:first-child { text-align: right; padding-right: 8px; }

  /* ---------- FORM CONTROLS ---------- */
  .field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .field-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .field-label .req { color: var(--danger); margin-left: 3px; }
  .field-hint  { font-size: 11.5px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.02em; }
  .field-err   { font-size: 11.5px; color: var(--danger); font-family: var(--mono); display: flex; align-items: center; gap: 6px; }
  .field-ok    { font-size: 11.5px; color: var(--success); font-family: var(--mono); display: flex; align-items: center; gap: 6px; }

  .input, .select, .textarea {
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 12px;
    font-family: var(--sans);
    font-size: 13px;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    transition: all .12s;
  }
  .input::placeholder, .textarea::placeholder { color: var(--muted-2); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--muted-2); }
  .input:focus, .select:focus, .textarea:focus { border-color: var(--steel-blue); outline: none; box-shadow: var(--ring); }
  .input.is-focus, .select.is-focus, .textarea.is-focus { border-color: var(--steel-blue); box-shadow: var(--ring); }
  .input.is-error, .select.is-error, .textarea.is-error { border-color: var(--danger); box-shadow: var(--ring-d); }
  .input.is-ok { border-color: var(--success); }
  .input[disabled], .select[disabled], .textarea[disabled] { background: var(--paper-2); color: var(--muted-2); cursor: not-allowed; }
  .input.mono { font-family: var(--mono); }
  .textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }

  .input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    overflow: hidden;
  }
  .input-group:focus-within { border-color: var(--steel-blue); box-shadow: var(--ring); }
  .input-group .ig-prefix, .input-group .ig-suffix {
    display: grid; place-items: center;
    padding: 0 10px;
    background: var(--paper);
    border-right: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
  }
  .input-group .ig-suffix { border-right: 0; border-left: 1px solid var(--line); }
  .input-group .input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .input-group .input:focus { box-shadow: none; }

  .select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
  }

  /* checkbox / radio */
  .check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
    cursor: pointer;
  }
  .check input { accent-color: var(--steel-blue); width: 16px; height: 16px; }
  .check.disabled { opacity: 0.5; cursor: not-allowed; }

  /* switch */
  .switch {
    --w: 36px; --h: 20px;
    width: var(--w); height: var(--h);
    background: var(--paper-2);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--line);
    transition: background .15s;
    flex-shrink: 0;
  }
  .switch::after {
    content: "";
    position: absolute;
    top: 1px; left: 1px;
    width: 16px; height: 16px;
    background: var(--surface);
    border-radius: 50%;
    box-shadow: var(--sh-2);
    transition: transform .15s;
  }
  .switch.on { background: var(--steel-blue); border-color: var(--steel-blue); }
  .switch.on::after { transform: translateX(16px); }
  .switch.is-focus { box-shadow: var(--ring); }
  .switch.disabled { opacity: 0.5; cursor: not-allowed; }

  /* file picker */
  .file-drop {
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    padding: 22px;
    background: var(--paper);
    text-align: center;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .file-drop.is-hover { border-color: var(--steel-blue); background: #EAF2F8; color: var(--deep-space-blue); }
  .file-drop strong { color: var(--deep-space-blue); font-weight: 600; font-size: 13px; }
  .file-drop small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; }

  /* color picker */
  .color-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
  }
  .color-pick .swatch { width: 24px; height: 24px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
  .color-pick .hex { font-family: var(--mono); font-size: 11px; color: var(--deep-space-blue); font-weight: 600; }

  /* field row 2-col */
  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .field-row.three { grid-template-columns: 2fr 1fr 1fr; }
  .field-row.cep { grid-template-columns: 130px 1fr; }
  @media (max-width: 760px) { .field-row, .field-row.three, .field-row.cep { grid-template-columns: 1fr; } }

  /* ---------- BADGES / TAGS / AVATARS ---------- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--paper-2);
    color: var(--deep-space-blue);
    border: 1px solid var(--line);
    white-space: nowrap;
  }
  .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  .pill.solid-deep { background: var(--deep-space-blue); color: var(--white); border-color: var(--deep-space-blue); }
  .pill.solid-steel { background: var(--steel-blue); color: var(--white); border-color: var(--steel-blue); }
  .pill.solid-success { background: #E6F4EC; color: #1F6B43; border-color: #C3E1CE; }
  .pill.solid-warning { background: #FFF3E0; color: #B3681E; border-color: #F4D8B0; }
  .pill.solid-danger  { background: #FDECEB; color: #B3261E; border-color: #F4C5C2; }
  .pill.solid-info    { background: #E8F0F7; color: #1E4F7A; border-color: #C9D9E6; }
  .pill.solid-muted   { background: var(--paper-2); color: var(--muted); border-color: var(--line); }

  /* role badges */
  .badge-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .badge-role.consulta { background: #EAEEF2; color: var(--deep-space-blue); border: 1px solid var(--line); }
  .badge-role.editor   { background: #E8F0F7; color: var(--baltic-blue); border: 1px solid #C9D9E6; }
  .badge-role.admin    { background: var(--deep-space-blue); color: var(--white); border: 1px solid var(--deep-space-blue); }

  .avatar {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--baltic-blue);
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  }
  .avatar.sm  { width: 28px; height: 28px; font-size: 11px; }
  .avatar.md  { width: 40px; height: 40px; font-size: 14px; }
  .avatar.lg  { width: 72px; height: 72px; font-size: 24px; }
  .avatar.xl  { width: 112px; height: 112px; font-size: 36px; }
  .avatar.solar { background: var(--solar); color: var(--deep-space-blue); }
  .avatar.teal  { background: var(--jungle-teal); }
  .avatar.stormy { background: var(--stormy-teal); }
  .avatar.vinho  { background: var(--cat-cu); }
  .avatar.steel  { background: var(--steel-blue); }
  .avatar.ring  { box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--steel-blue); }

  /* ---------- FEEDBACK: banner / message ---------- */
  .banner {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid;
    background: var(--surface);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.45;
  }
  .banner .b-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
  .banner .b-ic svg { width: 16px; height: 16px; color: var(--white); }
  .banner b { color: var(--ink); font-weight: 600; }
  .banner .b-close { background: transparent; border: 0; padding: 4px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
  .banner .b-close svg { width: 14px; height: 14px; }

  .banner.success { background: #F1F8F4; border-color: #C3E1CE; }
  .banner.success .b-ic { background: #1F6B43; }
  .banner.success b { color: #1F6B43; }
  .banner.warning { background: #FFF8EE; border-color: #F4D8B0; }
  .banner.warning .b-ic { background: #B3681E; }
  .banner.warning b { color: #B3681E; }
  .banner.danger  { background: #FDECEB; border-color: #F4C5C2; }
  .banner.danger  .b-ic { background: #B3261E; }
  .banner.danger  b { color: #B3261E; }
  .banner.info    { background: #ECF3F9; border-color: #C9D9E6; }
  .banner.info    .b-ic { background: var(--steel-blue); }
  .banner.info    b { color: var(--deep-space-blue); }

  /* ---------- MODAL ---------- */
  .modal-shell {
    background: rgba(19,58,83,0.32);
    border-radius: 14px;
    padding: 60px;
    display: grid;
    place-items: center;
    min-height: 480px;
  }
  .modal {
    width: 560px;
    max-width: 100%;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--sh-5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
  }
  .modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .modal-head h4 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--deep-space-blue); flex: 1; }
  .modal-head .x {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    display: grid; place-items: center;
  }
  .modal-head .x:hover { background: var(--paper-2); color: var(--deep-space-blue); }
  .modal-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 380px;
    overflow-y: auto;
  }
  .modal-foot {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--paper);
    justify-content: flex-end;
  }

  /* ---------- DROPDOWN / NOTIFICATIONS ---------- */
  .dropdown {
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--sh-4);
    overflow: hidden;
  }
  .dropdown-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
  .dropdown-head h5 { margin: 0; font-size: 13px; font-weight: 700; color: var(--deep-space-blue); }
  .dropdown-head .clr { font-family: var(--mono); font-size: 10px; color: var(--steel-blue); cursor: pointer; letter-spacing: 0.06em; }
  .notif {
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
    cursor: pointer;
    position: relative;
  }
  .notif:last-child { border-bottom: 0; }
  .notif:hover { background: var(--paper); }
  .notif.unread::before {
    content: "";
    position: absolute;
    left: 4px; top: 16px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--steel-blue);
  }
  .notif .ndel {
    width: 24px; height: 24px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    color: var(--muted-2);
    display: grid; place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background .12s, color .12s;
    align-self: center;
  }
  .notif:hover .ndel { opacity: 1; }
  .notif .ndel:hover { background: #FDECEB; color: var(--danger); }
  .notif .ndel svg { width: 12px; height: 12px; }
  .notif .nic { width: 28px; height: 28px; border-radius: 6px; background: var(--paper-2); display: grid; place-items: center; color: var(--deep-space-blue); }
  .notif .nic svg { width: 14px; height: 14px; }
  .notif .nbody { display: flex; flex-direction: column; gap: 2px; }
  .notif .nbody .nt { font-size: 12.5px; color: var(--ink); line-height: 1.4; }
  .notif .nbody .nt b { color: var(--deep-space-blue); font-weight: 600; }
  .notif .nbody .nm { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
  /* bell button with badge */
  .bell {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    display: grid; place-items: center;
    cursor: pointer;
    position: relative;
    color: var(--deep-space-blue);
  }
  .bell:hover { background: var(--paper); }
  .bell svg { width: 16px; height: 16px; }
  .btn.icon-only .bdg {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 16px; height: 16px;
    border-radius: 8px;
    background: var(--danger);
    color: var(--white);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    display: grid; place-items: center;
    box-shadow: 0 0 0 2px var(--surface);
  }
  .btn.icon-only.dark .bdg { box-shadow: 0 0 0 2px var(--deep-space-blue); }
  .bell .bdg {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    border-radius: 8px;
    background: var(--danger);
    color: var(--white);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    display: grid; place-items: center;
    box-shadow: 0 0 0 2px var(--surface);
  }

  /* ---------- MAP MARKERS ---------- */
  .markers-grid {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    display: grid;
    gap: 22px;
  }
  .markers-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: center;
  }
  .markers-row .title {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .markers-row .title small { display: block; color: var(--muted-2); font-weight: 400; margin-top: 4px; }
  .markers-strip {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 14px;
    background: var(--paper);
    border-radius: 10px;
  }
  .markers-strip.dark { background: var(--deep-space-blue); }
  .marker { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .marker svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); }
  .marker .lbl { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.06em; text-align: center; }
  .markers-strip.dark .marker .lbl { color: var(--tropical-teal); }

  /* ---------- ICON ROWS (more) ---------- */
  .icon-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
  }
  .icon-row .icon-tile { padding: 18px; }

  /* ---------- TABELA-CARTAO ---------- */
  .tbl-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  .tbl-head, .tbl-row {
    display: grid;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
  }
  .tbl-head {
    background: var(--paper-2);
    font-family: var(--mono);
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .tbl-row {
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-2);
    transition: background .12s;
  }
  .tbl-row:last-child { border-bottom: 0; }
  .tbl-row:hover { background: var(--paper); }
  .tbl-row .name { font-weight: 600; color: var(--deep-space-blue); font-size: 13px; }
  .tbl-row .sub  { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.03em; }
  .tbl-actions { display: flex; gap: 4px; justify-content: flex-end; }
  .tbl-actions .ico-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--line);
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--muted);
  }
  .tbl-actions .ico-btn:hover { background: var(--paper); color: var(--deep-space-blue); border-color: var(--deep-space-blue); }
  .tbl-actions .ico-btn.danger:hover { background: #FDECEB; color: var(--danger); border-color: var(--danger); }
  .tbl-actions .ico-btn svg { width: 14px; height: 14px; }

  /* expanded sub-row */
  .tbl-sub {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0 16px 16px;
  }
  .tbl-sub .ver {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
  }
  .tbl-sub .ver .v { color: var(--deep-space-blue); font-weight: 600; }
  .tbl-sub .ver .feat { font-family: var(--sans); font-size: 12px; color: var(--ink-2); }
  .tbl-sub .ver.current { background: #F0F6FA; border-color: #C9D9E6; }

  /* layer status pill */
  .layer-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid;
  }
  .layer-status.ok       { background: #E6F4EC; color: #1F6B43; border-color: #C3E1CE; }
  .layer-status.due-soon { background: #FFF3E0; color: #B3681E; border-color: #F4D8B0; }
  .layer-status.expired  { background: #FDECEB; color: #B3261E; border-color: #F4C5C2; }

  /* ---------- SCREENS - login split, profile, layer-mgmt ---------- */
  .screen {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--sh-3);
  }

  /* login split */
  .login-screen {
    display: grid;
    grid-template-columns: 40% 60%;
    min-height: 620px;
    position: relative;
  }
  .login-screen > * { min-width: 0; min-height: 0; }
  .login-hero {
    position: relative;
    order: 2;
    background: var(--surface);
    color: var(--ink);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }
  .login-hero .lh-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
  }
  .login-hero .lh-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.78) 100%);
  }
  .login-hero .topo { position: absolute; inset: 0; opacity: 0.12; z-index: 1; pointer-events: none; }
  .login-hero .lh-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
  .login-hero .lh-top .lh-word { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; line-height: 1; }
  .login-hero .lh-top b { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; }
  .login-hero .lh-top b .g { color: var(--deep-space-blue); }
  .login-hero .lh-top b .c { color: var(--steel-blue); }
  .login-hero .lh-top small {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    background: var(--solar);
    color: var(--deep-space-blue);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .login-hero .lh-body { position: relative; z-index: 2; max-width: 460px; }
  .login-hero .lh-body h2 { font-size: clamp(44px, 5.5vw, 76px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; margin: 0 0 20px; color: var(--deep-space-blue); }
  .login-hero .lh-body h2 mark { background: var(--solar); color: var(--deep-space-blue); padding: 0 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .login-hero .lh-body p { font-size: 17px; color: var(--ink-2); line-height: 1.55; margin: 0 0 28px; max-width: 560px; }
  .login-hero .lh-body p strong { color: var(--deep-space-blue); font-weight: 600; }
  .login-hero .lh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 8px;
    position: relative; z-index: 2;
  }
  .login-hero .lh-stats .n { font-size: 28px; font-weight: 800; color: var(--deep-space-blue); letter-spacing: -0.03em; line-height: 1; }
  .login-hero .lh-stats .l { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; }
  .login-hero .lh-foot { position: relative; z-index: 2; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; }

  /* ---- Cover treatment (field photo + arcs + green circle) ---- */
  .login-hero.lh-cover { background: var(--deep-space-blue); color: #fff; padding: 0; }
  .login-hero.lh-cover .lh-bg { z-index: 0; }
  .login-hero.lh-cover .lh-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, rgba(15,46,66,0.78) 0%, rgba(15,46,66,0.48) 34%, rgba(15,46,66,0.12) 56%, rgba(15,46,66,0) 72%);
  }
  .login-hero.lh-cover .lh-arcs {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
  }
  .login-hero.lh-cover .lh-circle {
    position: absolute; z-index: 1; pointer-events: none;
    right: -130px; top: 50%; transform: translateY(-50%);
    width: 430px; height: 430px; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #3FD16A 0%, #2FA84F 48%, #147A33 100%);
    box-shadow: 0 24px 60px rgba(13,74,32,0.4);
    display: grid; place-items: center;
  }
  .login-hero.lh-cover .lh-circle svg { width: 168px; height: 168px; opacity: 0.95; transform: translateX(-44px); }
  .login-hero.lh-cover .lh-body {
    position: relative; z-index: 2; max-width: 72%;
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    gap: 28px;
    padding: 44px;
  }
  .login-hero.lh-cover .lh-keywords {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
    font-size: 15px; font-weight: 500; line-height: 1.55;
    color: rgba(255,255,255,0.9);
  }
  .login-hero.lh-cover .lh-keywords li::first-letter { text-transform: none; }
  .login-hero.lh-cover .lh-head { display: flex; flex-direction: column; }
  .login-hero.lh-cover .lh-body h2 { color: #fff; margin: 0 0 38px; }
  .login-hero.lh-cover .lh-body h2 mark { background: var(--solar); color: var(--deep-space-blue); }
  .login-hero.lh-cover .lh-body p { color: rgba(255,255,255,0.9); font-size: 17px; line-height: 1.55; margin: 0 0 56px; max-width: 560px; }
  .login-hero.lh-cover .lh-body p strong { color: #fff; font-weight: 700; }
  .login-hero.lh-cover .lh-stats { border-top-color: rgba(255,255,255,0.28); margin-top: 0; }
  .login-hero.lh-cover .lh-stats .n { color: #fff; }
  .login-hero.lh-cover .lh-stats .l { color: rgba(255,255,255,0.72); }

  .login-panel {
    order: 1;
    background: var(--paper);
    color: var(--ink);
    position: relative;
    overflow: hidden;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 32px;
  }
  .login-screen .lp-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    width: 40px; height: 40px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--deep-space-blue);
    box-shadow: var(--sh-2);
    transition: background .12s, color .12s, border-color .12s;
  }
  .login-screen .lp-close:hover { background: var(--deep-space-blue); color: var(--white); border-color: var(--deep-space-blue); }
  .login-screen .lp-close svg { width: 18px; height: 18px; }
  .login-panel .lp-card {
    align-self: center;
    margin: auto 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: 384px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .lp-card h3 { font-size: 26px; line-height: 1.15; margin: 0; color: var(--deep-space-blue); }
  .lp-card .lp-mark { display: block; margin: 0 0 16px; }
  .lp-card .lp-subtitle { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
  .lp-card .input { background: #FFFFFF; border-color: var(--line); }
  .lp-card .input:focus { background: var(--surface); border-color: var(--steel-blue); box-shadow: 0 0 0 3px rgba(62,125,58,0.15); }
  .lp-card .input-group { background: #EEF2F8; border-color: transparent; }
  .lp-card .input-group:focus-within { background: var(--surface); border-color: var(--steel-blue); }
  .lp-card .input-group .input { background: transparent; }
  .lp-card .input-group .ig-btn { border-left-color: #DCE2EC; }
  .lp-card .lp-form .btn { width: 100%; }
  .login-panel .lp-card a { color: var(--steel-blue); }
  .lp-card .lp-register { color: var(--muted); }
  .login-panel .lp-watermark {
    position: absolute;
    bottom: -150px;
    right: -150px;
    width: 540px;
    height: 540px;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
  }
  .login-panel > *:not(.lp-watermark) { position: relative; z-index: 1; }
  .login-panel .lp-brand { z-index: 2; flex-shrink: 0; }
  .login-panel h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--deep-space-blue); }
  .login-panel .lp-tabs {
    background: var(--paper-2);
    border-radius: 8px;
    padding: 3px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  .login-panel .lp-tabs button {
    background: transparent;
    border: 0;
    padding: 9px 12px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    border-radius: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .login-panel .lp-tabs button.active { background: var(--surface); color: var(--deep-space-blue); box-shadow: var(--sh-2); }
  .login-panel .lp-form { display: flex; flex-direction: column; gap: 14px; }
  .login-panel .lp-foot {
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }
  .login-panel a { color: var(--steel-blue); text-decoration: none; }
  .login-panel .lp-intro { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
  .login-panel .lp-row { display: flex; justify-content: space-between; align-items: center; }
  .login-panel .lp-forgot { font-size: 12px; font-weight: 600; }
  .login-panel .lp-remember { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; }
  .login-panel .lp-remember input { width: 14px; height: 14px; accent-color: var(--steel-blue); cursor: pointer; }
  .login-panel .lp-form > .lp-row { margin-top: -2px; }
  .login-panel .lp-form > .lp-forgot { align-self: flex-end; margin-top: -4px; }
  .login-panel .lp-card .lp-register { padding-top: 14px; border-top: 1px dashed rgba(0,0,0,0.06); }
  .login-panel .lp-form .btn { height: 40px; justify-content: center; }
  .login-panel .lp-register { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }
  .login-panel .lp-register a { font-weight: 600; }
  .btn.btn-neutral { background: var(--surface); border-color: var(--line); color: var(--deep-space-blue); }
  .btn.btn-neutral svg { color: var(--steel-blue); }
  .input-group .ig-btn { background: transparent; border: 0; border-left: 1px solid var(--line); cursor: pointer; color: var(--muted); display: grid; place-items: center; padding: 0 10px; }
  .login-panel a:focus-visible,
  .login-panel .lp-tabs button:focus-visible,
  .login-panel .lp-form .btn:focus-visible,
  .login-panel .ig-btn:focus-visible { outline: 2px solid var(--steel-blue); outline-offset: 2px; }

  /* steps */
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--paper);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--line);
    position: relative;
  }
  .step-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--muted);
    position: relative;
  }
  .step-pill .n {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
  }
  .step-pill.done .n { background: var(--success); color: var(--white); border-color: var(--success); }
  .step-pill.active { background: var(--surface); box-shadow: var(--sh-2); color: var(--deep-space-blue); font-weight: 600; }
  .step-pill.active .n { background: var(--deep-space-blue); color: var(--white); border-color: var(--deep-space-blue); }

  /* profile screen */
  .profile-screen {
    padding: 28px 32px;
    background: var(--paper);
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 22px;
    min-height: 620px;
  }
  .prof-card, .prof-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px;
  }
  .prof-card { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .prof-card .name { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--deep-space-blue); margin-top: 4px; }
  .prof-card .email { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
  .prof-card .bdgs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
  .prof-section h4 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--deep-space-blue); text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
  .prof-section h4 svg { width: 14px; height: 14px; color: var(--steel-blue); }
  .prof-section + .prof-section { margin-top: 16px; }

  .lgpd-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    align-items: center;
  }
  .lgpd-row + .lgpd-row { margin-top: 8px; }
  .lgpd-row .t { font-size: 13px; font-weight: 600; color: var(--deep-space-blue); }
  .lgpd-row .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-family: var(--mono); letter-spacing: 0.02em; }

  /* trash list */
  .trash {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .trash-item {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .trash-item .ic { width: 32px; height: 32px; border-radius: 6px; background: #FDECEB; color: var(--danger); display: grid; place-items: center; }
  .trash-item .ic svg { width: 14px; height: 14px; }
  .trash-item .nm { font-size: 13px; color: var(--deep-space-blue); font-weight: 600; }
  .trash-item .when { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }

  /* edit layer modal big */
  .edit-modal { width: 720px; max-width: 100%; }
  .edit-modal .modal-body { padding: 20px; }
  .edit-modal .twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .edit-modal .col h5 { margin: 0 0 10px; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
  .edit-modal .preview-pop {
    background: var(--deep-space-blue);
    color: var(--white);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 11px;
    margin-top: 10px;
  }
  .edit-modal .preview-pop b { color: var(--tropical-teal); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; font-family: var(--mono); display: block; margin-bottom: 4px; }
  .edit-modal .preview-pop .kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px; padding: 2px 0; }
  .edit-modal .preview-pop .kv span:first-child { color: var(--tropical-teal); font-family: var(--mono); font-size: 10px; }

  .class-range { display: flex; gap: 4px; align-items: center; padding: 8px 0; }
  .class-range .b { flex: 1; height: 20px; border-radius: 3px; }
  .class-range .v { font-family: var(--mono); font-size: 9px; color: var(--muted); width: 26px; text-align: center; }

  /* ---------- DRAW / MEASURE BAR ---------- */
  .draw-bar {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--sh-2);
    overflow: hidden;
  }
  .draw-bar button {
    width: 36px; height: 36px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);
    cursor: pointer;
    color: var(--deep-space-blue);
    display: grid; place-items: center;
  }
  .draw-bar button:last-child { border-right: 0; }
  .draw-bar button:hover { background: var(--paper); }
  .draw-bar button.active { background: var(--solar); }
  .draw-bar button svg { width: 16px; height: 16px; }

  /* legend */
  .legend {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--sh-2);
    width: 220px;
    overflow: hidden;
  }
  .legend-head { padding: 8px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; background: var(--paper); }
  .legend-row { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 11.5px; color: var(--ink-2); }
  .legend-row .sw { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; }

  /* timeline */
  .timeline {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--sh-2);
    padding: 10px 14px;
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .timeline-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
  .timeline-head b { color: var(--deep-space-blue); }
  .timeline-track { height: 6px; background: var(--paper-2); border-radius: 3px; position: relative; }
  .timeline-track .fill { position: absolute; height: 100%; background: var(--steel-blue); border-radius: 3px; left: 0; width: 64%; }
  .timeline-track .knob { position: absolute; width: 14px; height: 14px; background: var(--deep-space-blue); border-radius: 50%; top: -4px; left: 64%; transform: translateX(-50%); box-shadow: 0 0 0 3px var(--surface), 0 1px 3px rgba(0,0,0,0.2); }
  .timeline-marks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--muted-2); }

  /* ---------- LGPD components ---------- */
  .lgpd-cookie {
    background: var(--deep-space-blue);
    color: var(--white);
    border-radius: 12px;
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 16px;
    align-items: center;
    box-shadow: var(--sh-4);
    width: 100%;
    max-width: 920px;
  }
  .lgpd-cookie .lc-ic { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.08); display: grid; place-items: center; }
  .lgpd-cookie .lc-body b { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
  .lgpd-cookie .lc-body p { margin: 4px 0 0; font-size: 12.5px; color: var(--tropical-teal); line-height: 1.45; max-width: 520px; }
  .lgpd-cookie .lc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

  .cookie-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
  }
  .cookie-row + .cookie-row { margin-top: 10px; }
  .cookie-row b { font-size: 13.5px; font-weight: 700; color: var(--deep-space-blue); display: flex; align-items: center; gap: 8px; }
  .cookie-row p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
  .switch.disabled { opacity: 0.55; cursor: not-allowed; }

  @media (max-width: 760px) {
    .lgpd-cookie { grid-template-columns: 1fr; padding: 16px; }
    .lgpd-cookie .lc-ic { display: none; }
    .lgpd-cookie .lc-actions { justify-content: flex-end; }
  }

  /* ---------- KBD HINT ---------- */
  kbd { background: var(--paper-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; font-size: 10px; }

  @media (max-width: 1180px) {
    .icon-row { grid-template-columns: repeat(6, 1fr); }
  }
  @media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; }
    .principles, .grid-2, .grid-3, .grid-4, .rules, .grid-6, .palette-callout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cat-row { grid-template-columns: 50px 1fr 80px; }
    .cat-row .cat-hex, .cat-row .cat-use, .cat-row.head .h-hex, .cat-row.head .h-use { display: none; }
    .product-mock .app-body { grid-template-columns: 1fr; height: auto; }
    .construction-grid { grid-template-columns: 1fr; }
    .type-card { grid-template-columns: 1fr; }
    /* Backstop: nenhum specimen denso de desktop empurra a página
       horizontalmente em telas pequenas (o header fica fora do <main>). */
    main { padding: 0 16px 80px; overflow-x: clip; }
    .scale-grid { grid-template-columns: repeat(4, 1fr); }
    .radii-row, .shadow-row { grid-template-columns: repeat(3, 1fr); }
    .breakpoints { grid-template-columns: repeat(2, 1fr); }
    .state-row, .states-head { grid-template-columns: 80px repeat(3, 1fr); }
    .state-row > :nth-child(n+5), .states-head > :nth-child(n+5) { display: none; }
    .icon-row { grid-template-columns: repeat(4, 1fr); }
    .login-screen, .profile-screen { grid-template-columns: 1fr; }
  }

  /* ===== Auth mockups (cadastro/recuperar) ===== */
  .reg-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .reg-grid .field { grid-column: 1 / -1; min-width: 0; }
  .reg-grid .span2 { grid-column: 1 / -1; }
  .reg-grid .rua { grid-column: 1 / -1; }
  .reg-grid .num { grid-column: 1 / -1; }
  .lp-card.lp-card--reg { max-width: 460px; }
  .phone-group { display: flex; align-items: stretch; }
  .phone-group .phone-cc {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: 0; border-right: 1px solid var(--line);
    padding: 0 10px; cursor: pointer; color: var(--deep-space-blue);
    font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .phone-group .phone-cc .flag { border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
  .phone-group .phone-cc .cc-chev { color: var(--muted); }
  .phone-group .input { border: 0; flex: 1; min-width: 0; }
  .phone-group:focus-within { background: var(--surface); border-color: var(--steel-blue); }

  /* DDI dropdown (seletor de país com bandeiras) */
  .phone-field { position: relative; }
  .phone-cc .flag { width: 20px; height: 14px; object-fit: cover; }
  .cc-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    display: none; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.3);
  }
  .cc-menu.open { display: flex; }
  .cc-list { margin: 0; padding: 4px; list-style: none; max-height: 232px; overflow-y: auto; }
  .cc-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 9px; border: 0; border-radius: 7px; background: none;
    font-family: var(--sans); font-size: 13px; color: var(--ink-2);
    text-align: left; cursor: pointer;
  }
  .cc-item:hover, .cc-item:focus-visible { background: var(--paper); }
  .cc-item[aria-selected="true"] { background: var(--paper-2); color: var(--deep-space-blue); font-weight: 600; }
  .cc-item .flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); flex-shrink: 0; }
  .cc-item .ddi { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
  .cc-empty { padding: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }

  .pw-msg { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }
  .pw-msg.ok { color: var(--success); }
  .pw-msg.err { color: var(--danger); }

  /* password strength + requirements */
  .pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
  .pw-meter { display: flex; gap: 4px; flex: 1; }
  .pw-meter span {
    flex: 1; height: 5px; border-radius: 3px;
    background: #DCE2EC; transition: background .25s ease;
  }
  .pw-level {
    font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
    color: var(--muted);
  }
  /* level fills */
  .pw-strength[data-score="1"] .pw-meter span:nth-child(-n+1) { background: var(--danger); }
  .pw-strength[data-score="2"] .pw-meter span:nth-child(-n+2) { background: var(--warning); }
  .pw-strength[data-score="3"] .pw-meter span:nth-child(-n+3) { background: var(--steel-blue); }
  .pw-strength[data-score="4"] .pw-meter span:nth-child(-n+4) { background: var(--success); }
  .pw-strength[data-score="1"] .pw-level { color: var(--danger); }
  .pw-strength[data-score="2"] .pw-level { color: var(--warning); }
  .pw-strength[data-score="3"] .pw-level { color: var(--steel-blue); }
  .pw-strength[data-score="4"] .pw-level { color: var(--success); }

  .pw-reqs {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px;
  }
  .pw-reqs li {
    position: relative; padding-left: 20px;
    font-size: 11.5px; color: var(--muted); line-height: 1.4;
    transition: color .2s ease;
  }
  .pw-reqs li::before {
    content: ""; position: absolute; left: 0; top: 1px;
    width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px solid #C7CFDA; box-sizing: border-box;
    transition: all .2s ease;
  }
  .pw-reqs li.met { color: var(--deep-space-blue); }
  .pw-reqs li.met::before {
    background: var(--success); border-color: var(--success);
    /* checkmark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2 6 9.6 10.6 4.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  @media (max-width: 520px) { .pw-reqs { grid-template-columns: 1fr; } }
  .lp-terms { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
  .lp-terms input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--steel-blue); flex-shrink: 0; }
  .lp-terms a { color: var(--steel-blue); }
  .btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }
  .login-panel--vc { justify-content: center; }
  .login-panel--vc .lp-brand { position: absolute; top: 40px; left: 40px; }

  /* entrance animations for auth screens - resting state is VISIBLE;
     entrance is additive and removed by JS so content is never stuck hidden */
  @keyframes gleba-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes gleba-kenburns {
    from { transform: scale(1.07); }
    to   { transform: scale(1); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .login-screen.animate .lh-head > *,
    .login-screen.animate .lp-card .lp-mark,
    .login-screen.animate .lp-card h3,
    .login-screen.animate .lp-card .lp-subtitle,
    .login-screen.animate .lp-card form,
    .login-screen.animate .lp-card .lp-register {
      animation: gleba-rise .65s cubic-bezier(.2,.7,.2,1) both;
    }
    .login-screen.animate .lh-head > *:nth-child(1) { animation-delay: .08s; }
    .login-screen.animate .lh-head > *:nth-child(2) { animation-delay: .18s; }
    .login-screen.animate .lh-head > *:nth-child(3) { animation-delay: .28s; }
    .login-screen.animate .lp-card .lp-mark      { animation-delay: .14s; }
    .login-screen.animate .lp-card h3            { animation-delay: .22s; }
    .login-screen.animate .lp-card .lp-subtitle  { animation-delay: .30s; }
    .login-screen.animate .lp-card form          { animation-delay: .40s; }
    .login-screen.animate .lp-card .lp-register  { animation-delay: .52s; }
    /* Ken Burns desativado: escalar a foto de fundo (cover) trava o carregamento. */
  }
  @media print {
    .login-screen .lh-head > *,
    .login-screen .lp-card .lp-mark,
    .login-screen .lp-card h3,
    .login-screen .lp-card .lp-subtitle,
    .login-screen .lp-card form,
    .login-screen .lp-card .lp-register,
    .login-screen .lh-bg { opacity: 1 !important; transform: none !important; }
  }

  /* ============ Acessibilidade & movimento ============ */
  /* Anel de foco consistente para teclado em qualquer elemento interativo
     que ainda não tenha um :focus-visible próprio. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  summary:focus-visible {
    outline: 2px solid var(--steel-blue);
    outline-offset: 2px;
  }

  /* Respeita quem prefere menos movimento (prefers-reduced-motion). */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
  }

  /* ============ Pequenas telas (≤ 560px) ============ */
  @media (max-width: 560px) {
    main { padding: 0 14px 64px; }
    .principles, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6,
    .rules, .palette-callout, .assets-row { grid-template-columns: minmax(0, 1fr); }
    .card[style*="span 2"] { grid-column: auto !important; }
    .scale-grid { grid-template-columns: repeat(2, 1fr); }
    .radii-row, .shadow-row { grid-template-columns: repeat(2, 1fr); }
    .icon-row { grid-template-columns: repeat(3, 1fr); }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
  }

  /* ============ Top nav em telas pequenas ============ */
  /* O índice tem muitos links; em vez de quebrar numa coluna alta,
     vira uma faixa rolável horizontalmente, em uma única linha. */
  @media (max-width: 720px) {
    .topnav-inner { padding: 10px 16px; gap: 10px; flex-wrap: nowrap; }
    .topnav nav {
      flex: 1 1 auto;
      min-width: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
      margin-left: 8px;
      scrollbar-width: none;        /* Firefox */
      -ms-overflow-style: none;     /* IE/Edge antigo */
    }
    .topnav nav::-webkit-scrollbar { display: none; }
    .topnav nav a { white-space: nowrap; padding: 6px 10px; font-size: 12px; }
    .topnav .version { display: none; }
    .brand-lockup { flex: none; }
  }

  /* O specimen do modal "editar" é desenhado a 720px; em telas pequenas
     ele forçava rolagem horizontal da página. Aqui ele encolhe e empilha. */
  @media (max-width: 720px) {
    .modal-shell { padding: 24px; grid-template-columns: minmax(0, 1fr); }
    .edit-modal { width: 100%; }
    .edit-modal .twocol { grid-template-columns: 1fr; }
    .edit-modal .preview-pop .kv { grid-template-columns: 96px 1fr; }
    /* Mockups de app (telas/tabelas) são desenhados para desktop:
       em telas pequenas rolam dentro do próprio quadro, sem empurrar a página. */
    .screen,
    .product-mock,
    .tbl-card,
    .card .stage { overflow-x: auto; }
  }

/* [hidden] precisa vencer o display dos componentes */
.pw-strength[hidden], .pw-msg[hidden], .field-err[hidden], .field-ok[hidden], .email-sugg[hidden] { display: none; }
.pw-msg.warn { color: var(--warning); }

/* sugestao de typo no e-mail */
.email-sugg {
  margin-top: 6px; padding: 0; border: 0; background: none;
  font-family: var(--mono); font-size: 11.5px; color: var(--steel-blue);
  cursor: pointer; text-align: left; text-decoration: underline;
}
.email-sugg:hover { color: var(--baltic-blue); }