/* PromptForge // Pixel Project theme
   Versão azul claro para pixeel.me
   Pode substituir o <style> atual por este arquivo externo. */

:root{
  --bg:#061421;
  --bg-soft:#081b2c;
  --panel:#0b2033;
  --panel-2:#0f2a42;
  --panel-3:#123553;
  --border:#1c4664;
  --border-hi:#4db7e8;
  --amber:#63caff;       /* mantém compatibilidade com o CSS/JS original */
  --amber-dim:#2f8fc2;   /* mantém compatibilidade com o CSS/JS original */
  --text:#e9f7ff;
  --text-dim:#8fb3c9;
  --ok:#79e3b6;
  --danger:#ff7e9b;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono","Fira Code",Consolas,"Liberation Mono",monospace;
  --sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --radius:14px;
  --shadow:0 22px 70px rgba(0,0,0,.28);
  --glow:0 0 0 1px rgba(99,202,255,.13), 0 0 32px rgba(99,202,255,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
html{background:var(--bg)}
body{
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  background:
    radial-gradient(circle at 15% -10%, rgba(99,202,255,.22), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(63,141,255,.18), transparent 28%),
    linear-gradient(180deg, #071827 0%, #061421 42%, #04101b 100%);
}

::selection{background:var(--amber);color:#04101b}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
  opacity:.45;
}

a{color:var(--amber)}
button,input,textarea,select{font:inherit}
button{font-family:var(--mono)}

.wrap{max-width:1280px;margin:0 auto;padding:0 22px 64px;position:relative;z-index:1}

/* ---------- header ---------- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 0 18px;
  border-bottom:1px solid rgba(99,202,255,.2);
  flex-wrap:wrap;
}
.logo{display:flex;align-items:center;gap:12px}
.logo h1{
  font-family:var(--mono);
  font-size:20px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--text);
  text-shadow:0 0 26px rgba(99,202,255,.24);
}
.logo h1::before{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:10px;
  border-radius:4px;
  background:linear-gradient(135deg,#63caff,#2b84ff);
  box-shadow:0 0 18px rgba(99,202,255,.55);
  vertical-align:0;
}
.logo h1 .cursor{
  display:inline-block;
  width:9px;
  height:17px;
  margin-left:2px;
  background:var(--amber);
  border-radius:2px;
  vertical-align:-3px;
  animation:blink 1.1s steps(1) infinite;
  box-shadow:0 0 14px rgba(99,202,255,.65);
}
@keyframes blink{50%{opacity:0}}
.logo .ver{
  font-family:var(--mono);
  font-size:11px;
  color:var(--text-dim);
  padding:2px 8px;
  border:1px solid rgba(99,202,255,.25);
  border-radius:999px;
  background:rgba(99,202,255,.06);
}
.langs{
  display:flex;
  gap:4px;
  border:1px solid rgba(99,202,255,.24);
  border-radius:999px;
  overflow:hidden;
  padding:4px;
  background:rgba(7,24,39,.72);
  backdrop-filter:blur(14px);
}
.langs button{
  background:transparent;
  border:0;
  color:var(--text-dim);
  padding:7px 13px;
  font-size:12px;
  cursor:pointer;
  border-radius:999px;
}
.langs button.on{
  background:linear-gradient(135deg,#63caff,#2d8fff);
  color:#03111d;
  font-weight:800;
  box-shadow:0 6px 20px rgba(99,202,255,.22);
}
.langs button:not(.on):hover{color:var(--text);background:rgba(99,202,255,.08)}
.tagline{padding:12px 0 0;color:var(--text-dim);font-size:13px;max-width:920px}
.tagline b{color:var(--text)}

/* ---------- layout ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:24px;align-items:start}
.panel{
  background:linear-gradient(180deg, rgba(15,42,66,.94), rgba(8,27,44,.94));
  border:1px solid rgba(99,202,255,.2);
  border-radius:var(--radius);
  box-shadow:var(--shadow), var(--glow);
  overflow:hidden;
}
.panel-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 16px;
  border-bottom:1px solid rgba(99,202,255,.16);
  background:linear-gradient(90deg, rgba(99,202,255,.12), rgba(99,202,255,.02));
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#b7d9ed;
}
.panel-head .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 18px rgba(99,202,255,.8)}
.panel-body{padding:17px 15px}

/* ---------- form ---------- */
.field{margin-bottom:16px}
.field label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#80d7ff;
  margin-bottom:6px;
}
.field label .opt{color:var(--text-dim);text-transform:none;letter-spacing:0;font-size:11px}
.field label .req{color:var(--ok)}
.hint{font-size:12px;color:var(--text-dim);margin-top:5px}
input[type=text],textarea,select{
  width:100%;
  background:rgba(3,14,24,.72);
  border:1px solid rgba(99,202,255,.2);
  border-radius:10px;
  color:var(--text);
  font-family:var(--mono);
  font-size:13px;
  padding:10px 11px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea{resize:vertical;min-height:66px}
input:focus,textarea:focus,select:focus{
  border-color:rgba(99,202,255,.82);
  box-shadow:0 0 0 3px rgba(99,202,255,.14);
  background:rgba(4,18,30,.9);
}
select{
  cursor:pointer;
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--amber) 50%),
    linear-gradient(135deg,var(--amber) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;
  background-size:5px 5px;
  background-repeat:no-repeat;
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* target/format bar */
.target-bar{
  background:rgba(4,18,30,.52);
  border:1px solid rgba(99,202,255,.18);
  border-radius:14px;
  padding:15px;
  margin-bottom:17px;
}
.tips{
  margin-top:12px;
  padding:11px 13px;
  background:rgba(99,202,255,.07);
  border-left:3px solid var(--amber);
  font-size:12.5px;
  color:#d7efff;
  border-radius:0 10px 10px 0;
}
.tips .t-label{color:var(--amber);font-weight:800;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:3px}
.rec-badge{display:inline-block;font-size:10.5px;color:#04101b;background:var(--ok);border:1px solid var(--ok);border-radius:999px;padding:1px 7px;margin-left:8px;vertical-align:1px}

/* toggles */
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tg{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 11px;
  border:1px solid rgba(99,202,255,.18);
  border-radius:10px;
  cursor:pointer;
  font-size:12.5px;
  background:rgba(3,14,24,.64);
  color:#d8edf8;
}
.tg:hover{border-color:rgba(99,202,255,.55);background:rgba(99,202,255,.07)}
.tg input{accent-color:var(--amber);margin-top:2px;cursor:pointer}
.tg.checked{border-color:rgba(99,202,255,.78);box-shadow:0 0 0 2px rgba(99,202,255,.09)}

details.advanced{border:1px solid rgba(99,202,255,.18);border-radius:12px;margin-bottom:16px;background:rgba(3,14,24,.32);overflow:hidden}
details.advanced summary{cursor:pointer;padding:11px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);user-select:none}
details.advanced summary:hover{color:var(--amber)}
details.advanced[open] summary{border-bottom:1px solid rgba(99,202,255,.15);background:rgba(99,202,255,.05)}
details.advanced .inner{padding:14px 12px 2px}

/* ---------- output ---------- */
.out-col{position:sticky;top:16px}
.term-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 15px;
  border-bottom:1px solid rgba(99,202,255,.16);
  background:linear-gradient(90deg, rgba(99,202,255,.1), rgba(15,42,66,.95));
}
.term-head .addr{font-family:var(--mono);font-size:12px;color:var(--ok);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-head .addr .scheme{color:var(--text-dim)}
.term-actions{display:flex;gap:8px;flex-shrink:0}
.btn{
  background:rgba(99,202,255,.08);
  border:1px solid rgba(99,202,255,.38);
  color:var(--amber);
  padding:6px 13px;
  font-family:var(--mono);
  font-size:12px;
  border-radius:999px;
  cursor:pointer;
  letter-spacing:.04em;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover{background:linear-gradient(135deg,#63caff,#2d8fff);color:#03111d;border-color:transparent;transform:translateY(-1px)}
.btn.ghost{color:#b1d4e8;border-color:rgba(99,202,255,.2);background:rgba(3,14,24,.25)}
.btn.ghost:hover{background:rgba(99,202,255,.13);color:var(--text);border-color:rgba(99,202,255,.48)}
pre#output{
  padding:17px 15px;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:var(--mono);
  font-size:12.8px;
  line-height:1.58;
  min-height:340px;
  max-height:72vh;
  overflow:auto;
  color:#e9f7ff;
  background:linear-gradient(180deg, rgba(3,14,24,.28), rgba(3,14,24,.12));
}
pre#output.empty{color:var(--text-dim);font-style:italic}
pre#output::-webkit-scrollbar{width:10px;height:10px}
pre#output::-webkit-scrollbar-track{background:rgba(3,14,24,.45)}
pre#output::-webkit-scrollbar-thumb{background:rgba(99,202,255,.36);border-radius:999px;border:2px solid rgba(3,14,24,.45)}
.out-stats{display:flex;gap:16px;padding:9px 15px;border-top:1px solid rgba(99,202,255,.15);font-family:var(--mono);font-size:11px;color:var(--text-dim)}
.out-stats b{color:var(--text)}
.copied-flash{color:#04101b !important;background:var(--ok) !important;border-color:var(--ok) !important}

footer{margin-top:34px;border-top:1px solid rgba(99,202,255,.18);padding-top:14px;font-size:12px;color:var(--text-dim);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.form-actions{display:flex;gap:8px;flex-wrap:wrap}
.vars{padding:9px 15px;border-top:1px solid rgba(99,202,255,.15);font-family:var(--mono);font-size:11px;color:var(--text-dim);display:flex;gap:6px 8px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid rgba(99,202,255,.5);color:var(--amber);background:rgba(99,202,255,.07);border-radius:999px;padding:2px 8px;font-size:11px}
.quality{padding:9px 15px;border-top:1px solid rgba(99,202,255,.15);font-family:var(--mono);font-size:11px;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
.quality .q-t{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
.quality .q-t b{color:var(--amber)}
.q-i{color:var(--text-dim)} .q-i.ok{color:var(--ok)}
#tipReason{display:block;margin-top:6px;color:var(--ok)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .grid{gap:16px}
  .panel-body{padding:14px 12px}
  pre#output{font-size:12.4px}
}
@media(max-width:960px){
  .grid{grid-template-columns:1fr;margin-top:18px}
  .out-col{position:static}
  pre#output{min-height:240px;max-height:55vh}
}
@media(max-width:720px){
  .wrap{padding:0 14px 44px}
  header{padding:16px 0;gap:12px}
  .langs{width:100%}
  .langs button{flex:1;padding:11px 0;text-align:center;font-size:12.5px}
  .tagline{font-size:12px}
  .row2{grid-template-columns:1fr}
  .toggles{grid-template-columns:1fr}
  .field{margin-bottom:14px}
  .term-head{flex-wrap:wrap;row-gap:8px}
  .term-actions{width:100%;justify-content:flex-end}
  pre#output{padding:14px 12px;max-height:52vh}
  .out-stats{flex-wrap:wrap;gap:8px 16px}
  footer{flex-direction:column;gap:6px;margin-top:26px}
}
@media(max-width:520px){
  input[type=text],textarea,select{font-size:16px;padding:10px 11px}
  .target-bar{padding:12px 10px}
  .panel-body{padding:12px 10px}
  .tips{font-size:12px}
  .logo h1{font-size:16px}
}
@media(pointer:coarse){
  .btn{padding:10px 16px;min-height:42px}
  .tg{padding:11px 10px;align-items:center}
  .tg input{width:18px;height:18px;margin-top:0}
  select,input[type=text]{min-height:42px}
  details.advanced summary{padding:12px}
}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .logo h1 .cursor{animation:none}
  .btn{transition:none}
}