/* =========================================================
   L'ALTRO SGUARDO — CSS (UNICA CARD) | TEMA VIOLA SCURO
   ========================================================= */

/* ===== Palette (viola scuro) ===== */
:root{
  --bg:        #0a0614;          /* sfondo pagina (viola nerissimo) */
  --panel:     #1a061c;          /* fondo card */
  --header:    #280a2b;          /* header card */
  --header2:   #170c33;          /* hover/variante */
  --border:    rgba(255,255,255,.10);
  --border2:   rgba(255,255,255,.14);

  --text:      #e9e7ff;
  --muted:     rgba(233,231,255,.80);

  --pillBg:    rgba(255,255,255,.06);
  --pillBr:    rgba(255,255,255,.12);

  --btnBg:     rgba(255,255,255,.06);
  --btnBgH:    rgba(255,255,255,.10);

  --accent:    #a78bfa;          /* viola “accent” */
  --accentBg:  rgba(167,139,250,.12);
}

/* --- PAGE WRAPPER --- */
.page-dark{
  background: radial-gradient(80% 70% at 50% 0%, rgba(167,139,250,.10) 0%, rgba(0,0,0,0) 55%),
              var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 38px 16px 70px;
}

/* neutralizza stili tema su elementi tipici */
.page-dark pre,
.page-dark code,
.page-dark strong,
.page-dark b{
  border: 0;
  box-shadow: none;
  text-decoration: none;
}

/* =========================
   LOGO
   ========================= */
.site-logo{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 18px;
}
.site-logo img{
  width: 90px;
  height: auto;
  display: block;
}

/* =========================
   INTRO / HERO
   ========================= */
.page-dark .intro{
  max-width: 920px;
  margin: 0 auto 28px;
  text-align: center;
}

.page-dark .intro-title{
  margin: 0 0 10px;
  color: #ffffff;
  font: 750 46px/1.12 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -0.6px;
}

.page-dark .intro-subtitle{
  margin: 0 0 18px;
  color: rgba(233,231,255,.92);
  font: 600 22px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.page-dark .intro-text{
  margin: 0 auto 22px;
  max-width: 760px;
  color: var(--muted);
  font: 400 17px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* pill */
.page-dark .intro-label{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--pillBg);
  border: 1px solid var(--pillBr);
  color: rgba(233,231,255,.95);
  font: 750 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
}

/* =========================
   CARD (UNICA)
   ========================= */
.page-dark .prompt-card{
  max-width: 980px;
  margin: 0 auto 26px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  position: relative;
}

/* HEADER CARD */
.page-dark .prompt-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  background: var(--header);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.page-dark .prompt-title{
  color: rgba(233,231,255,.95);
  font: 700 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   BOTTONE COPIA
   ========================= */
.page-dark .prompt-copy{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--btnBg);
  color: rgba(233,231,255,.95);
  cursor:pointer;
  user-select:none;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

.page-dark .prompt-copy:hover{
  background: var(--btnBgH);
  border-color: var(--border2);
}

.page-dark .prompt-copy:active{
  transform: translateY(1px);
}

.page-dark .prompt-copy-icon{
  font-size: 14px;
  opacity: .9;
}

.page-dark .prompt-copy-text{
  font: 700 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   PROMPT BODY (pre)
   ========================= */
.page-dark .prompt-card .prompt-body{
  margin: 0;
  padding: 14px 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0)),
              var(--panel);
  color: rgba(233,231,255,.92);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 13px;
  line-height: 1.58;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;

  white-space: pre-wrap;
  word-break: break-word;

  max-height: 390px;
  overflow: auto;

  border: 0 !important;
  outline: none;
  box-shadow: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* anti “finto grassetto” (stroke/shadow del tema) */
.page-dark .prompt-body,
.page-dark .prompt-body *{
  font-weight: 400 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-stroke-width: 0 !important;
  filter: none !important;
}

/* Se il tema stile "markdown" aggiunge linee ai <pre> */
.page-dark .prompt-card pre{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

/* Se il tema forza <code> globale, neutralizza */
.page-dark code{
  font-weight: inherit;
  border: 0 !important;
  background: transparent !important;
}

/* selezione testo */
.page-dark .prompt-body::selection,
.page-dark .prompt-body *::selection{
  background: rgba(167,139,250,.25);
}

/* scrollbar */
.page-dark .prompt-body::-webkit-scrollbar{ height: 10px; width: 10px; }
.page-dark .prompt-body::-webkit-scrollbar-thumb{
  background: rgba(233,231,255,.16);
  border-radius: 999px;
}
.page-dark .prompt-body::-webkit-scrollbar-track{
  background: rgba(233,231,255,.06);
}

/* =========================
   TOAST "COPIATO"
   ========================= */
.page-dark .prompt-toast{
  position:absolute;
  right: 12px;
  top: 54px;
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(19,10,43,.95);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(233,231,255,.95);
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transition: opacity .18s ease, transform .18s ease;
}

.page-dark .prompt-card.is-copied .prompt-toast{
  opacity:1;
  transform: translateY(0);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 640px){
  .page-dark{ padding-top: 28px; }
  .page-dark .intro-title{ font-size: 34px; }
  .page-dark .intro-subtitle{ font-size: 18px; }
  .page-dark .intro-text{ font-size: 16px; }
  .page-dark .prompt-body{ max-height: 330px; }
}