/* Montador de raias Floty — usa os tokens de /style.css */
:root { --hair: #d9dde0; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --marca: #eaf6f9; }
body { background: #fff; }
.mr-top { background: #fff; border-bottom: 1px solid var(--hair); }
.mr-top .wrap { display: flex; align-items: center; gap: 1rem; min-height: 84px; }
.mr-top .brand-logo { height: 66px !important; width: auto !important; max-width: none !important; display: block; }
.mr-top .grow { flex: 1; }
.mr-top .link { font: 700 .9rem var(--f-ui); color: var(--pool); text-decoration: none; }
.mr-hero .wrap { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.mr-hero h1 { font-size: var(--step-4); margin: .5rem 0 .4rem; }
.mr-hero h1 em { font-style: normal; color: var(--aqua); }
.mr-hero .sub { color: rgba(255,255,255,.8); max-width: 60ch; }

/* desenho preso no topo */
.mr-vista { position: sticky; top: 0; z-index: 30; background: #f7f9fa; border-bottom: 1px solid var(--hair); box-shadow: 0 8px 18px -14px rgba(0,0,0,.35); }
.mr-vista .wrap { padding-block: .7rem .6rem; }
.vista-topo { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; margin-bottom: .35rem; }
.vista-topo b { font: 700 1.05rem var(--f-display); }
.vista-topo span { font-size: .84rem; color: var(--muted); }
.sv-total { width: 100%; height: 74px; display: block; background: linear-gradient(#e3f3f7, #cfe9f0); border-radius: 6px; }
.vista-zoom { margin-top: .55rem; }
.zoom-bts { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }
.zoom-bts button { border: 1px solid var(--hair); background: #fff; border-radius: 999px; padding: .25rem .7rem; font: 700 .76rem var(--f-ui); cursor: pointer; color: var(--deep); }
.zoom-bts button[aria-pressed="true"] { background: var(--deep); color: #fff; border-color: var(--deep); }
.sv-zoom { width: 100%; height: auto; max-height: 150px; display: block; background: linear-gradient(#e3f3f7, #cfe9f0); border-radius: 6px; }

.mr-main .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; padding-block: 1.6rem 3rem; align-items: start; }
.bloco { border: 0; margin: 0 0 1.6rem; padding: 0 0 1.4rem; border-bottom: 1px solid var(--hair); min-width: 0; }
.bloco legend { font: 700 var(--step-2) var(--f-display); display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; padding: 0; }
.bloco legend .n { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--deep); color: #fff; display: grid; place-items: center; font-size: .9rem; }
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem 1.6rem; }
.campo { margin-bottom: .9rem; min-width: 0; }
.campo > label, .campo > .lab { display: block; font: 700 .78rem var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.campo small, .zona h3 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.dica { font-size: .82rem; color: var(--muted); margin-top: .35rem; }
.zona { margin-top: .6rem; padding: .9rem 1rem; background: #fafbfb; border: 1px solid var(--hair); border-radius: 8px; margin-bottom: .8rem; }
.zona h3 { font: 700 1rem var(--f-display); margin-bottom: .6rem; }
.num { display: inline-flex; align-items: center; gap: .45rem; margin-top: .45rem; }
.num input { width: 6rem; border: 1.5px solid var(--hair); border-radius: 6px; padding: .55rem .6rem; font: 700 1rem var(--f-ui); font-variant-numeric: tabular-nums; }
.num input:focus { outline: 3px solid var(--aqua); border-color: var(--pool); }
.num span { color: var(--muted); font-size: .88rem; }
.chips, .presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.presets { align-items: center; margin-bottom: .6rem; }
.presets span { font-size: .84rem; color: var(--muted); margin-right: .2rem; }
.chips button, .presets button { border: 1.5px solid var(--hair); background: #fff; border-radius: 999px; padding: .4rem .8rem; font: 700 .82rem var(--f-ui); cursor: pointer; color: var(--deep); }
.chips button:hover, .presets button:hover { border-color: var(--pool); }
.chips button[aria-pressed="true"] { background: var(--deep); color: #fff; border-color: var(--deep); }
.chk { display: flex; gap: .5rem; align-items: center; font-size: .92rem; cursor: pointer; margin: .2rem 0 .5rem; }
.chk input { width: 1.05rem; height: 1.05rem; accent-color: var(--pool); }

/* modelos */
.modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.modelo { text-align: left; border: 2px solid var(--hair); background: #fff; border-radius: 10px; padding: .55rem; cursor: pointer; display: grid; gap: .35rem; font: inherit; color: var(--deep); }
.modelo:hover { border-color: var(--pool); }
.modelo[aria-pressed="true"] { border-color: var(--pool); box-shadow: 0 0 0 3px var(--marca); }
.modelo img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; }
.modelo b { font: 700 1.02rem var(--f-display); }
.modelo .cod { font: 700 .72rem var(--mono); color: var(--pool); }
.modelo .reg { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.modelo .padrao { font: 700 .82rem var(--mono); letter-spacing: .05em; color: var(--deep); }

/* paletas */
.paleta { display: flex; flex-wrap: wrap; gap: .35rem; }
.sw { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; position: relative; }
.sw[aria-pressed="true"] { outline: 3px solid var(--deep); outline-offset: 2px; }
.sw:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.sw .nm { position: absolute; inset: auto 0 -1.15rem; font: 600 .62rem var(--f-ui); color: var(--muted); white-space: nowrap; text-align: center; pointer-events: none; display: none; }
.paleta:hover .sw .nm { display: block; }
.sel-cores { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; min-height: 2rem; }
.sel-cores .tag { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--hair); border-radius: 999px; padding: .2rem .35rem .2rem .25rem; font: 700 .8rem var(--f-ui); background: #fff; }
.sel-cores .tag i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.sel-cores .tag button { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); }

/* opções (cards) */
.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.opcoes.compacto { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.op { text-align: left; border: 2px solid var(--hair); background: #fff; border-radius: 8px; padding: .5rem .6rem; cursor: pointer; display: grid; grid-template-columns: 44px 1fr; gap: .5rem; align-items: center; font: inherit; color: var(--deep); }
.op.semfoto { grid-template-columns: 1fr; }
.op:hover { border-color: var(--pool); }
.op[aria-pressed="true"] { border-color: var(--pool); background: var(--marca); }
.op img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 4px; }
.op b { font: 700 .86rem/1.2 var(--f-display); display: block; }
.op small { font: 600 .7rem var(--mono); color: var(--pool); }

/* resumo */
.resumo { position: sticky; top: 300px; }
.res-card { border: 1px solid var(--hair); border-radius: 10px; padding: 1.1rem 1.1rem 1rem; background: #fff; box-shadow: 0 10px 30px -22px rgba(0,0,0,.4); }
.res-card h2 { font: 700 1.3rem var(--f-display); margin-bottom: .5rem; }
.res-card h3 { font: 700 .74rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .35rem; }
.res-card h3 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.res-dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-size: .9rem; margin: 0; }
.res-dl dt { color: var(--muted); } .res-dl dd { margin: 0; font-weight: 700; }
.res-tab { width: 100%; border-collapse: collapse; font-size: .86rem; }
.res-tab td { padding: .32rem .2rem; border-bottom: 1px solid #edf0f1; vertical-align: middle; }
.res-tab td.q { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-tab td.c { font: 600 .72rem var(--mono); color: var(--pool); white-space: nowrap; }
.res-tab i { display: inline-block; width: .85rem; height: .85rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); vertical-align: -1px; margin-right: .35rem; }
.res-tab a { color: var(--deep); text-decoration: none; } .res-tab a:hover { color: var(--pool); text-decoration: underline; }
.res-nota { font-size: .76rem; color: var(--muted); margin-top: .7rem; }
.res-bts { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .8rem; }
.res-bts button { border: 1.5px solid var(--hair); background: #fff; border-radius: 6px; padding: .6rem .5rem; font: 700 .82rem var(--f-ui); cursor: pointer; color: var(--deep); }
.res-bts button:hover { border-color: var(--pool); color: var(--pool); }
.res-bts .b-pri { grid-column: 1 / -1; background: #25D366; border-color: #25D366; color: #07200F; padding: .85rem; font-size: .95rem; }
.res-bts .b-pri:hover { background: #1FBD5B; color: #07200F; }
.res-msg { font-size: .8rem; color: #1c7a47; margin-top: .5rem; min-height: 1rem; }
.erro { color: #8a2a1e; background: #fdf1ef; border: 1px solid #e3b4ad; border-radius: 6px; padding: .45rem .6rem; font-size: .84rem; margin-top: .5rem; }

.mr-rod { background: var(--deep); color: rgba(255,255,255,.75); padding: 1.4rem 0; font-size: .82rem; }
.mr-rod .wrap { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; }
.toast { position: fixed; left: 50%; bottom: 1.4rem; translate: -50% 20px; opacity: 0; background: var(--deep); color: #fff; padding: .7rem 1rem; border-radius: 8px; font: 600 .9rem var(--f-ui); transition: all .25s; pointer-events: none; z-index: 70; }
.toast.on { opacity: 1; translate: -50% 0; }

@media (max-width: 980px) {
  .mr-main .wrap { grid-template-columns: minmax(0, 1fr); }
  .resumo { position: static; }
}
@media (max-width: 640px) {
  .mr-top .brand-logo { height: 50px !important; } .mr-top .wrap { min-height: 70px; }
  .sv-total { height: 56px; }
  .sv-zoom { max-height: 110px; }
  .mr-vista .wrap { padding-block: .5rem; }
  .modelos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opcoes, .opcoes.compacto { grid-template-columns: minmax(0, 1fr); }
  .sw { width: 2.1rem; height: 2.1rem; }
}
@media print {
  .mr-top .link, .mr-hero, .cfg, .res-bts, .res-msg, .mr-rod, .zoom-bts { display: none !important; }
  .mr-vista { position: static; box-shadow: none; }
  .mr-main .wrap { grid-template-columns: 1fr; }
  .resumo { position: static; } .res-card { box-shadow: none; }
}

[hidden] { display: none !important; }
.campo > label.chk { display: flex; font: 500 .92rem var(--f-read); letter-spacing: 0; text-transform: none; color: var(--deep); }
@media (hover: none) { .sw .nm { display: none !important; } }
@media (max-width: 640px) { .vista-zoom .zoom-bts span { display: none; } .vista-topo span { display: none; } }