/* M. BLOCK — Gerador de prompts v2.0 · uma pergunta por tela · identidade M. BLOCK */
@font-face{font-family:Sora;src:url('/mblock/assets/sora-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Sora;src:url('/mblock/assets/sora-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Plex;src:url('/mblock/assets/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('/mblock/assets/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Mono;src:url('/mblock/assets/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--bg:#08090a;--panel:#111315;--surface:#1a1d20;--line:#343a40;--orange:#ff6a00;--orange-hi:#ff8b35;--white:#f5f5f5;--gray:#a9b0b8;--gray-2:#6f777e}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:radial-gradient(70% 45% at 50% 0%,#ff6a000d,transparent 70%),var(--bg);color:var(--white);font:16px/1.55 Plex,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
[hidden]{display:none!important}

/* topo */
.top{display:flex;align-items:center;gap:14px;padding:18px clamp(16px,4vw,40px);border-bottom:1px solid #ffffff14}
.brand img{width:120px;display:block}
.brand-sub{font:11px Mono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);padding-left:14px;border-left:1px solid var(--line)}
.top .link{margin-left:auto}
.link{background:none;border:0;padding:4px 0;color:var(--gray);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.link:hover{color:var(--white)}
.progress{height:3px;background:#ffffff10}
.progress i{display:block;height:100%;width:0;background:var(--orange);transition:width .35s ease-out}

/* palco */
.stage{width:min(760px,calc(100% - 32px));margin:0 auto;padding:clamp(28px,6vh,64px) 0 80px}
.meta{display:flex;align-items:center;gap:18px;min-height:28px;margin-bottom:18px;font:12px Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.meta .back{font:14px Plex,Arial,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none}
.ask h1,.result h1{font:700 clamp(30px,4.6vw,48px)/1.06 Sora,Arial,sans-serif;letter-spacing:-.055em;margin:0 0 30px}
.ask .qsub{color:var(--gray);margin:-18px 0 26px;max-width:620px}
.alt{margin:28px 0 0;color:var(--gray);font-size:14px}
.alt .link{font-size:14px;color:var(--white)}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
fieldset+.hint{margin-bottom:12px}
legend.lbl{display:block;padding:0;margin:14px 0 10px}
.ask{animation:in .35s ease-out}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* opções */
.opts{display:grid;gap:12px}
.opts.n2{grid-template-columns:1fr 1fr}
.opts.n3{grid-template-columns:1fr}
.opts.n4,.opts.n5,.opts.n7{grid-template-columns:1fr 1fr}
.opt{position:relative;text-align:left;display:flex;flex-direction:column;gap:6px;padding:22px 22px 22px 58px;min-height:96px;background:var(--panel);border:1px solid var(--line);border-radius:4px;transition:border-color .15s,background .15s,transform .15s}
.opt:hover{border-color:#6a737a;transform:translateY(-1px)}
.opt.on{border-color:var(--orange);background:#1c120b}
.opt b{font:600 20px/1.2 Sora,Arial,sans-serif;letter-spacing:-.03em}
.opt small{color:var(--gray);font-size:14px;line-height:1.4}
.opt .key{position:absolute;left:20px;top:22px;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:3px;font:12px Mono,monospace;color:var(--gray)}
.opt.on .key{background:var(--orange);border-color:var(--orange);color:#08090a}
.shape{display:inline-block;border:2px solid var(--gray);border-radius:3px;margin-bottom:6px}
.shape.v{width:18px;height:30px}
.shape.h{width:34px;height:20px}
.opt.on .shape{border-color:var(--orange)}

/* texto livre */
textarea,input[type=text]{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px 18px;font-size:17px;line-height:1.5;resize:vertical;transition:border-color .15s}
textarea:focus,input[type=text]:focus{outline:none;border-color:var(--orange)}
.hint{color:var(--gray);font-size:14px;margin:10px 0 0}
.ask .lbl+textarea,.ask .lbl+input{margin-top:-2px}
.ask > .lbl{display:block;margin:18px 0 8px}
.more{margin-top:22px;border-top:1px solid #ffffff14;padding-top:14px}
.more summary{cursor:pointer;color:var(--gray);font-size:14px;list-style:none}
.more summary::before{content:"+ ";color:var(--orange)}
.more[open] summary::before{content:"− "}
.morebox{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.lbl{font:11px Mono,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:8px 13px;border:1px solid var(--line);border-radius:3px;font-size:14px;background:var(--panel);cursor:pointer}
.chip input:checked + span{border-color:var(--orange);background:#1c120b}
.chip input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
.check{display:flex;gap:10px;align-items:center;font-size:15px;margin-top:6px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--orange);margin:0}

/* botões */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;min-height:54px;padding:0 28px;background:var(--orange);color:#08090a;border:1px solid var(--orange);border-radius:4px;font-weight:600;font-size:16px;transition:background .15s,transform .15s}
.cta:hover{background:var(--orange-hi);transform:translateY(-1px)}
.cta.big{width:100%;min-height:64px;font-size:18px;margin-top:8px}
.cta.ok{background:#f5f5f5;border-color:#f5f5f5}
.sumline{margin:26px 0 0;font:12px Mono,monospace;color:var(--gray-2);letter-spacing:.04em;min-height:1em}

/* resultado */
.result{animation:in .35s ease-out}
.eyebrow{font:12px Mono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
.eyebrow::before{content:"";display:inline-block;width:22px;height:2px;background:var(--orange);vertical-align:middle;margin-right:10px}
.result h1{margin:14px 0 8px}
.res-sum{color:var(--gray);margin:0 0 26px}
.how{list-style:none;counter-reset:s;padding:0;margin:30px 0 0;display:grid;gap:10px}
.how li{counter-increment:s;display:flex;gap:14px;align-items:baseline;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:4px;color:#d7dadc}
.how li::before{content:counter(s);font:13px Mono,monospace;color:var(--orange);flex:none}
.how li:empty{display:none}
.how li p{margin:4px 0 0;color:var(--gray);font-size:14.5px}
.how-h{font:12px Mono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin:34px 0 0;font-weight:400}
.warn{border:1px solid #5a4632;border-left:3px solid var(--orange);background:#17110c;border-radius:4px;padding:14px 18px;margin:0 0 14px;color:#e4dccf;font-size:15px}
.warn.block{border-color:#a8462c;border-left-color:#ff4d2e;background:#1d0f0b}
.warn b{display:block;margin-bottom:6px}
.warn ul{margin:6px 0;padding-left:20px}
.warn p{margin:6px 0 0;color:#cfc6b8}
.privacy{color:var(--gray-2);font-size:13px;margin:22px 0 0}
.dlg-b h3{font:600 16px Sora,Arial,sans-serif;margin:18px 0 4px;color:var(--white)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#res-title:focus{outline:none}
.full{margin-top:22px}
.full summary{cursor:pointer;color:var(--gray);font-size:14px}
.full pre{margin:12px 0 0;max-height:420px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px;font:12.5px/1.6 Mono,monospace;white-space:pre-wrap;word-break:break-word;color:#d0d4d7}
.row{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px}

/* guia */
dialog{border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--white);padding:0;width:min(560px,calc(100vw - 32px))}
dialog::backdrop{background:#08090acc}
.dlg-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.dlg-h h2{font:700 20px Sora,Arial,sans-serif;margin:0;letter-spacing:-.03em}
.dlg-b{max-height:72vh;overflow:auto;padding:8px 20px 20px;color:#d7dadc;font-size:15px}
.dlg-b ol{padding-left:20px}
.dlg-b li{margin:8px 0}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);opacity:0;background:var(--white);color:#08090a;padding:10px 16px;border-radius:4px;font-size:14px;font-weight:600;transition:all .2s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  .opts.n2,.opts.n4,.opts.n5,.opts.n7{grid-template-columns:1fr}
  .opt{min-height:0;padding:18px 18px 18px 54px}
  .opt .key{left:16px;top:19px}
  .brand img{width:100px}
  .brand-sub{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}