:root{--bg:#080b12;--panel:#111827;--line:#293449;--t:#f8fafc;--m:#9aa6b8;--blue:#5b8cff;--cyan:#22d3ee;--violet:#8b5cf6}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 0,#151b30 0,transparent 30%),var(--bg);color:var(--t);font:15px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}
button,input,select,textarea{font:inherit}.app{max-width:1200px;margin:auto;padding:22px 18px 70px}.top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px;flex-wrap:wrap}
.top-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
h1{margin:0;font-size:30px}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:900;color:var(--cyan)}.badge{border:1px solid var(--line);border-radius:99px;padding:6px 10px;font-size:11px}
.card{border:1px solid var(--line);border-radius:20px;background:linear-gradient(#12192a,#0d1420);padding:18px}.hero{display:flex;justify-content:space-between;gap:18px;margin-bottom:14px}
.hero h2{font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.05em;margin:6px 0 10px}.hero p{color:#d2dae8;font-size:17px;max-width:800px}.rule{min-width:250px;border:1px solid #2f6948;background:#0d2118;border-radius:14px;padding:12px}
.grid{display:grid;grid-template-columns:5fr 7fr;gap:14px}.head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.head h3{margin:0;font-size:23px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:11px}.form label{display:grid;gap:5px;font-size:12px;font-weight:800}.form small{color:var(--m);font-size:10px}.full{grid-column:1/-1}
.result-count-info{display:grid;align-content:center;gap:4px;border:1px solid #36517a;background:#0c1628;border-radius:11px;padding:10px}.result-count-info b{font-size:12px}.result-count-info small{color:var(--m);font-size:10px}
input,select,textarea{width:100%;background:#080e18;border:1px solid var(--line);color:white;border-radius:11px;padding:10px;outline:none}textarea{min-height:110px;resize:vertical}
.context-field{position:relative;display:block}.context-field textarea{padding-right:50px}.context-clear{position:absolute;top:9px;right:9px;width:34px;height:34px;padding:7px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.055);color:var(--m);cursor:pointer;display:grid;place-items:center;transition:.18s ease}.context-clear:hover{background:rgba(255,255,255,.11);color:var(--t);transform:translateY(-1px)}.context-clear:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.context-clear svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.principle{margin-top:12px;border:1px solid #36517a;background:#0c1628;border-radius:13px;padding:11px}.principle span{display:block;color:var(--m);font-size:11px;margin-top:3px}
.actions{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:#111a29;color:white;border-radius:11px;padding:9px 12px;font-weight:800;cursor:pointer}.primary{background:linear-gradient(135deg,var(--blue),#3b82f6);border:0}.ghost{background:#0b1220}
.empty{border:1px dashed #405175;border-radius:14px;padding:25px;text-align:center;color:var(--m)}.method{border:1px solid #4c3d78;background:#161329;border-radius:14px;padding:12px;margin-bottom:10px}.method h4{margin:0 0 5px}.method p{margin:0;color:#cdd6e7}
.results{display:grid;gap:10px}.prompt{border:1px solid var(--line);border-radius:14px;padding:12px;background:#0a101b}.prompt h4{margin:0 0 8px}.mono{white-space:pre-wrap;font:12px/1.6 ui-monospace,monospace;background:#070b12;border:1px solid #202b3e;border-radius:10px;padding:10px}.meta{color:var(--cyan);font-size:11px;font-weight:800;margin:7px 0}
.after{margin-top:15px;border-top:1px solid var(--line);padding-top:13px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.big{display:grid;gap:3px;text-align:left;background:#0b1220;border:1px solid var(--line);color:white;border-radius:12px;padding:11px;cursor:pointer}.big span{font-size:11px;color:var(--m)}.big:disabled{opacity:.45;cursor:not-allowed}
.library{margin-top:14px}.saved{border:1px solid var(--line);background:#0a101b;border-radius:12px;padding:11px;margin:8px 0;display:flex;justify-content:space-between;gap:10px;align-items:center}.saved span{display:block;color:var(--m);font-size:11px}
.history-status{margin:0 0 10px;border:1px solid #7f1d1d;background:#2a1015;color:#fecaca;border-radius:10px;padding:9px 11px;font-size:12px}.history-status[data-kind="success"]{border-color:#2f6948;background:#0d2118;color:#bbf7d0}
.hidden{display:none!important}.muted,footer{color:var(--m)}footer{font-size:11px;margin-top:16px}
@media(max-width:900px){.grid{grid-template-columns:1fr}.hero{flex-direction:column}.rule{width:100%}}@media(max-width:620px){.form,.three{grid-template-columns:1fr}.full{grid-column:auto}.saved{flex-direction:column;align-items:flex-start}}

/* FINAL · copia contextual dentro de cada campo */
.promptbox{position:relative;padding-right:52px}
.copyicon{
  position:absolute;top:9px;right:9px;
  min-width:34px;height:34px;padding:0 8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;background:rgba(255,255,255,.055);
  color:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;
  justify-content:center;transition:.18s ease;z-index:2
}
.copyicon:hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}
.copyicon .copyglyph{font-size:18px;line-height:1}
.copyicon .copylabel{display:none;font-size:11px;font-weight:700}
.copyicon.copied{min-width:82px}
.copyicon.copied .copylabel{display:inline}

/* FINAL · icono de copiar tipo dos hojas superpuestas */
.copy-svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.copyicon.copied .copy-svg{display:none}
.copyicon.copied::before{
  content:"✓";
  font-size:17px;
  font-weight:800;
  line-height:1;
}