/* ============================================================
   Consuleria — Contatto cifrato PGP (pagina standalone)
   Additivo e isolato. Dark aesthetic + accento firma cyan->viola.
   Riusa fallback locali se enhance.css non e' linkato.
   ============================================================ */

/* Fallback variabili (se enhance.css / index non sono presenti).
   enhance.css puo' sovrascrivere --brand / --brand2 a livello :root. */
:root{
  --bg:#0b0b0b;
  --fg:#e5e7eb;
  --brand:#22d3ee;
  --brand2:#7c3aed;
  --line:rgba(255,255,255,.08);
  --max:1100px;
  --font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  --brandFont:"TrajanProBold";
  --accent-grad:linear-gradient(135deg,#22d3ee 0%, #7c3aed 100%);
  --glow:0 0 0 1px rgba(34,211,238,.25), 0 8px 40px -12px rgba(124,58,237,.35);
}

*{box-sizing:border-box}
html,body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font);-webkit-font-smoothing:antialiased;
  min-height:100%;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;color:var(--brand)}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.small{font-size:12px;color:#9ca3af;line-height:1.55}

/* ---- Header / brand (coerente col monolite, semplificato) ---- */
.pgpx-header{
  position:sticky;top:0;z-index:40;
  background:rgba(11,11,11,.85);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.pgpx-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.pgpx-word{
  font-family:var(--brandFont),var(--font);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;font-size:22px;line-height:1;
}
.pgpx-back{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:12px;padding:8px 12px;
  font-size:13px;white-space:nowrap;
}
.pgpx-back:hover{text-decoration:none;border-color:rgba(34,211,238,.4)}

/* ---- Hero ---- */
.pgpx-hero{position:relative;padding:48px 0 28px;border-bottom:1px solid var(--line);overflow:hidden}
.pgpx-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 280px at 18% -10%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(680px 300px at 92% 0%, rgba(124,58,237,.16), transparent 62%);
}
.pgpx-eyebrow{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#cbd5e1;
}
.pgpx-eyebrow .dot{
  width:8px;height:8px;border-radius:999px;background:var(--accent-grad);
  box-shadow:0 0 0 3px rgba(34,211,238,.12);
}
.pgpx-eyebrow .cur{
  display:inline-block;width:8px;height:14px;margin-left:2px;
  background:var(--brand);vertical-align:-2px;animation:pgpxBlink 1.1s steps(1) infinite;
}
@keyframes pgpxBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.pgpx-hero h1{
  position:relative;font-family:var(--brandFont),var(--font);
  font-size:34px;line-height:1.1;margin:14px 0 8px;letter-spacing:.02em;
}
.pgpx-hero h1 .grad{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.pgpx-hero p{position:relative;max-width:62ch;color:#cbd5e1;line-height:1.6;margin:0}

/* ---- Layout ---- */
.section{padding:40px 0;border-top:1px solid var(--line)}
.pgpx-grid{display:grid;gap:18px}
@media(min-width:920px){.pgpx-grid{grid-template-columns:1.15fr .85fr;align-items:start}}

/* ---- Card ---- */
.card{
  border:1px solid var(--line);background:rgba(15,15,15,.5);
  backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);
  border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card h2{margin:0 0 6px;font-size:18px}
.card h3{margin:0 0 6px;font-size:15px}

/* ---- Form fields ---- */
.field{display:grid;gap:6px;margin-top:12px}
.label{font-size:12px;color:#cbd5e1}
.input,.textarea{
  width:100%;border:1px solid var(--line);background:rgba(10,10,10,.55);
  color:var(--fg);border-radius:12px;padding:10px 12px;outline:none;
  font-family:inherit;font-size:14px;
}
.textarea{min-height:150px;resize:vertical;line-height:1.5}
.input:focus,.textarea:focus{outline:2px solid rgba(34,211,238,.5);outline-offset:0}

/* ---- Buttons ---- */
.btn{
  position:relative;overflow:hidden;border:1px solid #374151;border-radius:12px;
  padding:9px 14px;display:inline-flex;gap:8px;align-items:center;justify-content:center;
  background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:14px;
}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.btn--primary{
  border-color:rgba(34,211,238,.55);color:#0b0b0b;font-weight:600;
  background:var(--accent-grad);box-shadow:0 10px 30px rgba(124,58,237,.18);
}
.btn--primary:hover{box-shadow:var(--glow)}
.btn--primary[disabled]{color:var(--fg);background:rgba(30,30,30,.6);border-color:var(--line);box-shadow:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---- Key status banner ---- */
.keystat{
  display:flex;align-items:center;gap:10px;margin-top:4px;
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  background:rgba(20,20,20,.55);font-size:13px;
}
.keystat .ks-dot{width:9px;height:9px;border-radius:999px;flex:0 0 auto;background:#9ca3af}
.keystat[data-state="ready"]{border-color:rgba(34,211,238,.35)}
.keystat[data-state="ready"] .ks-dot{background:var(--brand);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.keystat[data-state="placeholder"]{border-color:rgba(251,191,36,.32)}
.keystat[data-state="placeholder"] .ks-dot{background:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.16)}
.keystat[data-state="error"]{border-color:rgba(248,113,113,.35)}
.keystat[data-state="error"] .ks-dot{background:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.16)}
.keystat .ks-fp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cbd5e1}

/* ---- Ciphertext output ---- */
.out-wrap{margin-top:16px}
.out-wrap[hidden]{display:none}
.cipher{
  width:100%;border:1px solid rgba(34,211,238,.25);border-radius:12px;
  background:#070707;color:#a7f3d0;padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.45;min-height:160px;resize:vertical;
  white-space:pre;overflow:auto;
}
.copied{font-size:12px;color:var(--brand);margin-left:6px}

/* ---- Notices ---- */
.notice{
  margin-top:12px;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:10px;padding:10px 12px;background:rgba(20,20,20,.5);font-size:13px;line-height:1.55;
}
.notice.warn{border-left-color:#fbbf24}
.notice.err{border-left-color:#f87171}
.notice[hidden]{display:none}

/* ---- Steps / aside ---- */
.steps{margin:8px 0 0 18px;padding:0;line-height:1.65;font-size:13px;color:#cbd5e1}
.steps li{margin:4px 0}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);background:rgba(20,20,20,.6);color:#d1d5db;font-size:12px;
}

/* ---- Reveal (scroll) ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.on{opacity:1;transform:none}

.pgpx-footer{border-top:1px solid var(--line);padding:24px 0;color:#9ca3af;font-size:13px}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none}
  .pgpx-eyebrow .cur{animation:none;opacity:1}
}