/* PageRunner – tema "2049": neon-noir ispirato a Blade Runner.
   Scuro, luminoso al punto giusto, con gli step del flusso sempre in vista. */

:root {
  --bg: #05070d;
  --panel: #0c1220;
  --text: #dfe9f5;
  --muted: #8a9ab3;
  --border: #1e2c45;
  --cyan: #38e1ff;
  --cyan-dim: rgba(56, 225, 255, .38);
  --cyan-soft: rgba(56, 225, 255, .09);
  --magenta: #ff3d8f;
  --magenta-soft: rgba(255, 61, 143, .12);
  --violet: #8f7bff;
  --amber: #ffb454;
  --ok: #3ddc97;
  --danger: #ff5f6e;
  --radius: 12px;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --glow-cyan: 0 0 14px rgba(56, 225, 255, .25);
  --glow-magenta: 0 0 18px rgba(255, 61, 143, .3);
  --control-h: 40px;
  color-scheme: dark;   /* menu delle select, barre di scorrimento e simili al buio */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(255, 61, 143, .13), transparent 60%),
    radial-gradient(1000px 620px at -12% 112%, rgba(56, 225, 255, .11), transparent 60%),
    radial-gradient(720px 420px at 55% 125%, rgba(143, 123, 255, .09), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

/* scanline CRT leggerissime su tutta la pagina */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
}

::selection { background: rgba(56, 225, 255, .3); }

/* ------------------------------------------------------------- layout base */

header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px;
  background: rgba(6, 10, 18, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-icon {
  width: 40px; height: 40px; display: block;
  filter: drop-shadow(0 0 10px rgba(56, 225, 255, .45));
}
.brand h1 {
  margin: 0; font-family: var(--mono); font-size: 18px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: #eafcff;
  text-shadow: 0 0 10px rgba(56, 225, 255, .55), 0 0 34px rgba(56, 225, 255, .25);
}
.tagline { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

main { max-width: 1180px; margin: 0 auto; padding: 26px 22px 60px; }
.hidden { display: none !important; }
.flex-spacer { flex: 1; }

h2 {
  font-family: var(--mono); font-size: 15px; text-transform: uppercase;
  letter-spacing: .16em; color: #cfe9f5; margin: 30px 0 14px;
}
h3 {
  margin: 0 0 10px; font-family: var(--mono); font-size: 13px;
  text-transform: uppercase; letter-spacing: .14em; color: #cfe9f5;
  display: flex; align-items: center;
}
h4 {
  margin: 22px 0 8px; font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em; color: #b9d2e2;
}
h4 small { color: var(--muted); font-weight: normal; text-transform: none; letter-spacing: 0; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.hint b { color: #b9d2e2; }
.linklike { color: var(--cyan); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linklike:hover { text-shadow: 0 0 10px rgba(56, 225, 255, .6); }

/* ------------------------------------------------------- stepper del flusso */

.stepper {
  list-style: none; display: flex; padding: 0; margin: 0 0 26px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17, 25, 42, .72), rgba(9, 13, 23, .82));
  overflow: hidden;
}
.stepper li {
  flex: 1; display: flex; align-items: center; gap: 13px; padding: 15px 18px;
  position: relative; opacity: .5; transition: opacity .35s ease;
}
.stepper li + li { border-left: 1px solid var(--border); }
.step-num {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
  transition: all .3s ease;
}
.step-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.step-text b {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .13em;
  font-size: 12.5px; color: #b9d2e2;
}
.step-text small { color: var(--muted); font-size: 12px; }

.stepper li.active { opacity: 1; }
.stepper li.active .step-num {
  border-color: var(--cyan); color: var(--cyan);
  box-shadow: var(--glow-cyan), inset 0 0 10px rgba(56, 225, 255, .14);
  text-shadow: 0 0 8px rgba(56, 225, 255, .65);
}
.stepper li.active .step-text b { color: var(--cyan); text-shadow: 0 0 9px rgba(56, 225, 255, .4); }
.stepper li.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 10px rgba(56, 225, 255, .5);
}

.stepper li.done { opacity: .85; }
.stepper li.done .step-num {
  font-size: 0; border-color: rgba(61, 220, 151, .55); color: var(--ok);
  background: rgba(61, 220, 151, .07);
}
.stepper li.done .step-num::after { content: "✓"; font-size: 16px; text-shadow: 0 0 8px rgba(61, 220, 151, .6); }
.stepper li.done .step-text b { color: var(--ok); }

@media (max-width: 760px) {
  .stepper li { flex-direction: column; gap: 8px; padding: 12px 8px; text-align: center; }
  .step-text { align-items: center; }
  .step-text small { display: none; }
}

/* ----------------------------------------------------------------- bottoni */

button {
  font-family: var(--mono); font-size: 13.5px; cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(20, 29, 48, .8); color: var(--text);
  padding: 8px 16px; border-radius: 8px; transition: all .15s ease;
}
button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary {
  background: linear-gradient(180deg, #ff4d9b, #e42277);
  border-color: rgba(255, 109, 172, .75); color: #fff; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: 0 0 18px rgba(255, 61, 143, .26);
}
button.primary:hover:not(:disabled) {
  color: #fff; border-color: #ff8dbd;
  box-shadow: 0 0 28px rgba(255, 61, 143, .5);
}
button.big { width: 100%; padding: 15px; font-size: 15px; margin-top: 16px; letter-spacing: .03em; }
button.ghost { background: transparent; }
button.danger { color: var(--danger); }
button.danger:hover:not(:disabled) {
  border-color: var(--danger); color: var(--danger);
  box-shadow: 0 0 14px rgba(255, 95, 110, .25);
}

/* ---------------------------------------------------------------- dropzone */

#dropzone {
  position: relative;
  border: 1px dashed var(--cyan-dim); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18, 26, 44, .6), rgba(10, 15, 26, .82));
  padding: 58px 26px; text-align: center; cursor: pointer;
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
#dropzone:hover, #dropzone:focus-visible, #dropzone.dragover {
  border-color: var(--cyan); outline: none;
  box-shadow: var(--glow-cyan), inset 0 0 60px rgba(56, 225, 255, .04);
}
#dropzone.dragover { background: rgba(56, 225, 255, .06); }
#dropzone::before, #dropzone::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
  border: 2px solid var(--cyan); opacity: .75;
  filter: drop-shadow(0 0 6px rgba(56, 225, 255, .55));
}
#dropzone::before { top: 10px; left: 10px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
#dropzone::after { bottom: 10px; right: 10px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

.dz-icon {
  display: block; margin: 0 auto 10px; color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(56, 225, 255, .45));
  animation: dz-float 3.2s ease-in-out infinite;
}
@keyframes dz-float { 50% { transform: translateY(-5px); opacity: .85; } }
.dz-title { font-size: 20px; font-weight: 700; margin: 4px 0; color: #eaf6ff; }
.dz-sub { color: var(--muted); margin: 6px 0 0; }

/* -------------------------------------------------------------- pannelli */

.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(18, 26, 44, .72), rgba(10, 15, 26, .86));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.panel::before {
  content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 225, 255, .55), rgba(255, 61, 143, .4), transparent);
}
.doc-grid {
  display: grid; grid-template-columns: minmax(320px, 460px) 1fr; gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .doc-grid { grid-template-columns: 1fr; } }

.step-chip {
  display: inline-grid; place-items: center; flex: none;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  min-width: 26px; height: 26px; padding: 0 6px; margin-right: 11px;
  border: 1px solid var(--cyan-dim); border-radius: 6px; color: var(--cyan);
  box-shadow: inset 0 0 8px rgba(56, 225, 255, .13);
  text-shadow: 0 0 6px rgba(56, 225, 255, .5);
}

#canvasWrap {
  position: relative; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: #060a12; line-height: 0; user-select: none;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}
#pdfCanvas { width: 100%; height: auto; display: block; cursor: crosshair; touch-action: none; }
.page-nav { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
#pageLabel {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--muted); min-width: 64px; text-align: center;
}

.doc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.doc-name { font-weight: 700; font-size: 15.5px; word-break: break-all; color: #eaf6ff; }
.badge {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; margin-right: 5px;
  background: var(--cyan-soft); color: var(--cyan); border: 1px solid var(--cyan-dim);
}
.badge.warn { background: rgba(255, 180, 84, .1); color: var(--amber); border-color: rgba(255, 180, 84, .42); }

/* --------------------------------------------------------- analisi e stats */

.analysis-box {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin: 10px 0; font-size: 13.5px; background: rgba(5, 8, 14, .6);
}
.analysis-box .arow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin: 12px 0;
}
.stat {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px; background: rgba(5, 8, 14, .55);
}
.stat-label {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
}
.stat-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: #eaf6ff; }
.stat.accent {
  border-color: rgba(255, 61, 143, .5); background: var(--magenta-soft);
  box-shadow: inset 0 0 18px rgba(255, 61, 143, .08);
}
.stat.accent .stat-value { color: #ff8ab8; text-shadow: 0 0 10px rgba(255, 61, 143, .4); }

.cost-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 10px 0 2px; }

/* ------------------------------------------------------------ opzioni voce */

.convert-opts { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: #a7c2d6;
}
.field small { font-weight: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }
.field select, .field input[type="text"], .field input[type="password"], .field input[type="number"],
.field input[type="email"], .key-row input, .user-actions select {
  font: inherit; height: var(--control-h); padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--border); background-color: rgba(5, 8, 14, .72);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
  color: var(--text); width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .key-row input::placeholder { color: #55657d; }
.field select:hover, .field input:hover, .key-row input:hover, .user-actions select:hover { border-color: #2c4062; }
.field select:focus, .field input:focus, .key-row input:focus, .user-actions select:focus {
  border-color: var(--cyan); box-shadow: var(--glow-cyan); outline: none;
}
.field .mono, .field input.mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em; }

/* select con la freccia disegnata dal CSS, uguale su ogni sistema */
.field select, .user-actions select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 34px; text-overflow: ellipsis; white-space: nowrap;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
    linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
select option { background: #0c1220; color: var(--text); }

/* numeri senza le frecce del sistema: si scrive o si usano i tasti freccia */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.affix { position: relative; display: block; }
.field .affix input[type="number"] { padding-left: 28px; }
.affix-sign {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 13px; color: var(--cyan); pointer-events: none;
}

/* slider: binario sottile, la parte percorsa in gradiente, cursore luminoso */
input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: var(--control-h); margin: 0; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background:
    linear-gradient(90deg, var(--cyan), var(--magenta)) 0 0 / var(--fill, 33%) 100% no-repeat,
    rgba(5, 8, 14, .9);
  box-shadow: inset 0 0 0 1px var(--border);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #eafcff; border: 3px solid var(--cyan);
  box-shadow: 0 0 12px rgba(56, 225, 255, .65); transition: transform .12s ease;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(56, 225, 255, .22), 0 0 12px rgba(56, 225, 255, .65);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; background: rgba(5, 8, 14, .9); box-shadow: inset 0 0 0 1px var(--border);
}
input[type="range"]::-moz-range-progress {
  height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--magenta));
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: #eafcff;
  border: 3px solid var(--cyan); box-shadow: 0 0 12px rgba(56, 225, 255, .65);
}

.field-value {
  float: right; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--cyan);
  text-shadow: 0 0 8px rgba(56, 225, 255, .45);
}

/* scelta tra poche opzioni: bottoni affiancati invece di una select */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  padding: 4px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(5, 8, 14, .72); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.segmented label { position: relative; cursor: pointer; min-width: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(var(--control-h) - 10px); padding: 3px 10px; border-radius: 7px;
  border: 1px solid transparent; text-align: center;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.segmented.tall label > span { min-height: 50px; gap: 1px; }
.segmented b { font-weight: 700; color: inherit; }
.segmented small { font-family: var(--sans); font-size: 11.5px; }
.segmented label:hover > span { color: var(--text); background: rgba(255, 255, 255, .03); }
.segmented input:checked + span {
  color: var(--cyan); background: var(--cyan-soft); border-color: var(--cyan-dim);
  box-shadow: inset 0 0 14px rgba(56, 225, 255, .08); text-shadow: 0 0 8px rgba(56, 225, 255, .35);
}
.segmented input:checked + span small { color: #9fc6d6; text-shadow: none; }
.segmented input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 1px; }

.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.voice-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 8px 8px 12px;
  cursor: pointer; font-size: 13px; background: rgba(10, 15, 26, .7);
  transition: all .13s ease;
}
.voice-chip:hover { border-color: var(--cyan-dim); }
.voice-chip.selected {
  border-color: var(--cyan); background: var(--cyan-soft);
  box-shadow: var(--glow-cyan), inset 0 0 12px rgba(56, 225, 255, .07);
}
.voice-chip .vname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #dfeefb; }
.voice-chip .vdesc { display: block; font-size: 11px; color: var(--muted); font-weight: normal; }
.voice-play {
  border: none; background: var(--cyan); color: #04202b; border-radius: 50%;
  width: 28px; height: 28px; min-width: 28px; padding: 0; font-size: 12px; line-height: 1;
}
.voice-play:hover:not(:disabled) {
  background: #7deaff; color: #04202b; box-shadow: 0 0 14px rgba(56, 225, 255, .7);
}
.voice-play.loading { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ------------------------------------------------------------ progress bar */

.progress-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.progress {
  flex: 1; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(5, 8, 14, .85); border: 1px solid var(--border);
}
.progress .bar {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));
  box-shadow: 0 0 12px rgba(56, 225, 255, .5);
  transition: width .4s ease;
}
.progress .bar.indet {
  width: 40% !important; animation: slide 1.2s ease-in-out infinite;
}
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.plabel {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ------------------------------------------------------------------- jobs */

.job-card {
  position: relative;
  background: linear-gradient(180deg, rgba(18, 26, 44, .72), rgba(10, 15, 26, .86));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.job-card::before {
  content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 225, 255, .45), transparent);
}
.job-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.job-name { font-weight: 700; flex: 1; min-width: 180px; word-break: break-all; color: #eaf6ff; }
.status-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 11px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.status-running { color: var(--cyan); background: var(--cyan-soft); border-color: var(--cyan-dim); }
.status-merging { color: #b3a4ff; background: rgba(143, 123, 255, .12); border-color: rgba(143, 123, 255, .45); }
.status-done { color: var(--ok); background: rgba(61, 220, 151, .1); border-color: rgba(61, 220, 151, .45); }
.status-error { color: var(--danger); background: rgba(255, 95, 110, .1); border-color: rgba(255, 95, 110, .45); }
.status-cancelled, .status-cancelling, .status-interrupted { color: var(--amber); background: rgba(255, 180, 84, .1); border-color: rgba(255, 180, 84, .42); }
.status-queued { color: var(--muted); background: rgba(138, 154, 179, .08); border-color: var(--border); }

.job-meta { font-size: 12.5px; color: var(--muted); margin: 6px 0 10px; }
.job-stats {
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted);
  margin-top: 8px; font-variant-numeric: tabular-nums;
}
.job-stats b { color: #dfeefb; }
.job-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.job-actions button { font-size: 13px; padding: 6px 14px; }
.job-error {
  margin-top: 8px; font-size: 13px; color: var(--danger);
  background: rgba(255, 95, 110, .07); border: 1px solid rgba(255, 95, 110, .35);
  border-radius: 8px; padding: 8px 10px;
}

.job-log { margin-top: 10px; }
.job-log summary { cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.job-log summary:hover { color: var(--cyan); }
.log-lines {
  font-family: var(--mono); font-size: 11.5px; background: rgba(3, 5, 10, .8);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  max-height: 220px; overflow-y: auto; margin-top: 6px; white-space: pre-wrap; word-break: break-word;
}
.log-lines .lt { color: rgba(56, 225, 255, .55); margin-right: 8px; }

/* --------------------------------------------------------------- libreria */

.library-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.book-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 26, 44, .72), rgba(10, 15, 26, .86));
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.book-card:hover {
  transform: translateY(-3px);
  border-color: var(--cyan-dim);
  box-shadow: var(--glow-cyan), 0 14px 36px rgba(0, 0, 0, .4);
}
.book-cover {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: #060a12; border-bottom: 1px solid var(--border);
}
.book-cover img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  display: block; filter: saturate(.9);
}
.book-cover::after { /* dorso del libro */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, rgba(56, 225, 255, .55), rgba(255, 61, 143, .55));
  opacity: .75;
}
.book-cover.fallback {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255, 61, 143, .16), transparent 60%),
    radial-gradient(120% 90% at 10% 100%, rgba(56, 225, 255, .14), transparent 60%),
    #0a101c;
}
.book-initial {
  font-family: var(--mono); font-size: 64px; font-weight: 700; color: var(--cyan);
  text-shadow: 0 0 18px rgba(56, 225, 255, .55), 0 0 50px rgba(56, 225, 255, .25);
}
.book-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px 14px 14px; }
.book-title {
  font-weight: 700; font-size: 14px; color: #eaf6ff; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.book-desc { font-size: 12px; color: var(--muted); }
.book-actions { display: flex; gap: 8px; margin-top: auto; }
.book-actions .primary { flex: 1; padding: 9px 10px; font-size: 13px; }
.book-del { padding: 9px 11px; font-size: 13px; white-space: nowrap; }

/* ------------------------------------------------------------------ modali */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(2, 4, 9, .74);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: linear-gradient(180deg, #111a2b, #0a101c);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 44px rgba(56, 225, 255, .07);
  max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px 26px;
}
.modal h2 { margin: 0 0 12px; }

/* finestre "a scheda": intestazione e pulsanti fissi, in mezzo il contenuto che scorre */
.modal.sheet {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  max-width: 640px; position: relative;
}
.modal.sheet.modal-wide { max-width: 900px; }
.modal-head {
  display: flex; align-items: center; gap: 14px; padding: 20px 24px 18px; flex: none;
  border-bottom: 1px solid var(--border); position: relative;
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(56, 225, 255, .09), transparent 60%),
    radial-gradient(60% 140% at 100% 0%, rgba(255, 61, 143, .07), transparent 60%);
}
.modal-head::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(56, 225, 255, .55), rgba(255, 61, 143, .4), transparent);
}
.modal-icon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--cyan-dim); border-radius: 11px; color: var(--cyan);
  background: var(--cyan-soft);
  box-shadow: var(--glow-cyan), inset 0 0 14px rgba(56, 225, 255, .12);
  filter: drop-shadow(0 0 6px rgba(56, 225, 255, .25));
}
.modal-title { min-width: 0; }
.modal-title h2 { margin: 0; font-size: 16px; letter-spacing: .18em; }
.modal-title p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 16px;
}
.modal-foot {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 24px; border-top: 1px solid var(--border); background: rgba(4, 6, 12, .6);
}
.modal-foot .modal-msg { flex: 1; margin: 0; min-height: 0; }
.sheet-section {
  display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 29, 48, .5), rgba(8, 12, 21, .5));
}
.sheet-section > h4 { margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sheet-section > h4::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}
.sheet-section .modal-msg:empty { display: none; }
.form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.form-foot .modal-msg { flex: 1; margin: 0; min-height: 0; }
.count {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0; color: var(--cyan);
  border: 1px solid var(--cyan-dim); border-radius: 999px; padding: 0 8px; line-height: 18px;
}
.count:empty { display: none; }

.callout {
  position: relative; margin: 0; padding: 11px 14px 11px 42px; border-radius: 10px;
  border: 1px solid rgba(56, 225, 255, .22); background: rgba(56, 225, 255, .05);
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
.callout::before {
  content: "i"; position: absolute; left: 13px; top: 11px; width: 18px; height: 18px;
  border: 1px solid var(--cyan-dim); border-radius: 50%; color: var(--cyan);
  font: 700 11px/16px var(--mono); text-align: center;
}
.callout b { color: #cfe9f5; }
.callout.warn { border-color: rgba(255, 180, 84, .3); background: rgba(255, 180, 84, .05); }
.callout.warn::before { content: "!"; color: var(--amber); border-color: rgba(255, 180, 84, .5); }

.key-status {
  display: flex; align-items: center; gap: 10px; min-height: var(--control-h);
  padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(5, 8, 14, .55);
}
.key-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #3a4a63; }
.key-dot.on { background: var(--ok); box-shadow: 0 0 9px rgba(61, 220, 151, .8); }
.key-status .key-hint { color: var(--text); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
button.small { padding: 5px 12px; font-size: 12.5px; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-msg { font-size: 13px; min-height: 18px; margin-top: 8px; }
.modal-msg.ok { color: var(--ok); }
.modal-msg.err { color: var(--danger); }
.wizard-steps { color: var(--muted); font-size: 14px; }
.wizard-steps b, .modal p b { color: #cfe9f5; }
.modal code {
  font-family: var(--mono); background: rgba(56, 225, 255, .08);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 13px;
}
.key-row { display: flex; gap: 10px; align-items: stretch; margin: 8px 0; flex-wrap: wrap; }
.stack > .key-row { margin: 0; }
.key-row input { flex: 1 1 220px; width: auto; }
.key-row button { white-space: nowrap; }
.key-hint { font-family: var(--mono); font-size: 13px; color: var(--muted); flex: 1; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .settings-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- varie */

#textPreviewBox { margin-top: 18px; }
#textPreviewBox summary {
  cursor: pointer; font-family: var(--mono); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .08em; color: #a7c2d6;
}
#textPreviewBox summary:hover { color: var(--cyan); }
#textPreview {
  font-family: var(--mono); font-size: 12px; white-space: pre-wrap;
  max-height: 240px; overflow-y: auto; color: var(--muted); margin: 10px 0 0;
}

.log-lines::-webkit-scrollbar, #textPreview::-webkit-scrollbar, .modal::-webkit-scrollbar { width: 8px; }
.log-lines::-webkit-scrollbar-thumb, #textPreview::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb {
  background: #22344f; border-radius: 8px;
}

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: rgba(8, 13, 23, .95); color: var(--text);
  border: 1px solid var(--cyan-dim);
  padding: 10px 22px; border-radius: 22px;   /* pillola su una riga, rettangolo morbido su più righe */
  font-size: 14px; z-index: 100; width: max-content; max-width: min(560px, calc(100vw - 32px));
  box-shadow: var(--glow-cyan), 0 10px 30px rgba(0, 0, 0, .5);
}
.toast.err { border-color: rgba(255, 95, 110, .6); box-shadow: 0 0 16px rgba(255, 95, 110, .3), 0 10px 30px rgba(0, 0, 0, .5); }

/* ---------------------------------------------------------------- accesso */

.login-view {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
}
/* la città 3D (city-bg.js) sta sotto; sopra, un velo che tiene leggibile il modulo */
.login-bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* dentro l'app la stessa città, solo linee: sotto tutto, sopra lo sfondo della pagina */
.city-lines {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  z-index: -1; pointer-events: none;
}
.login-view::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 52% at 50% 50%, rgba(5, 7, 13, .6), rgba(5, 7, 13, .18) 70%, transparent),
    linear-gradient(180deg, rgba(5, 7, 13, .45), transparent 28%, transparent 78%, rgba(5, 7, 13, .5));
}
.login-card {
  width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, rgba(18, 26, 44, .82), rgba(10, 15, 26, .92));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 28px 24px; position: relative; z-index: 2;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 44px rgba(56, 225, 255, .08);
}
.login-card::before {
  content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 225, 255, .6), rgba(255, 61, 143, .45), transparent);
}
.login-logo {
  width: 72px; height: 72px; align-self: center;
  filter: drop-shadow(0 0 14px rgba(56, 225, 255, .5));
}
.login-card h1 {
  margin: 0; text-align: center; font-family: var(--mono); font-size: 20px;
  letter-spacing: .24em; text-transform: uppercase; color: #eafcff;
  text-shadow: 0 0 10px rgba(56, 225, 255, .55), 0 0 34px rgba(56, 225, 255, .25);
}
.login-card .tagline { text-align: center; margin-top: -6px; }
.login-card .big { margin-top: 4px; }
.login-note { font-size: 12px; color: var(--muted); text-align: center; margin: 0; }

.pw-row { display: flex; gap: 8px; align-items: stretch; }
.pw-row input { flex: 1; min-width: 0; }
.pw-row button { white-space: nowrap; padding: 0 14px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.field input:focus-visible, .field select:focus-visible { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- account */

.account-btn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; }
.account-info {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0;
  font-size: 14px;
}
.account-info dt {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); padding-top: 2px;
}
.account-info dd { margin: 0; color: #eaf6ff; word-break: break-all; }

/* --------------------------------------------------------- gestione utenti */

.modal-wide { max-width: 880px; }
.users-list { display: flex; flex-direction: column; gap: 10px; }
.user-row {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  background: rgba(5, 8, 14, .5); display: grid; gap: 12px 14px; align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.user-row:hover { border-color: rgba(56, 225, 255, .3); box-shadow: inset 0 0 24px rgba(56, 225, 255, .04); }
.user-avatar {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #eafcff;
  background: radial-gradient(circle at 30% 25%, rgba(56, 225, 255, .38), rgba(143, 123, 255, .22) 60%, rgba(10, 15, 26, .9));
  border: 1px solid var(--cyan-dim); box-shadow: var(--glow-cyan);
  text-shadow: 0 0 8px rgba(56, 225, 255, .6);
}
.user-avatar.admin {
  background: radial-gradient(circle at 30% 25%, rgba(255, 61, 143, .38), rgba(143, 123, 255, .22) 60%, rgba(10, 15, 26, .9));
  border-color: rgba(255, 61, 143, .5); box-shadow: var(--glow-magenta);
  text-shadow: 0 0 8px rgba(255, 61, 143, .6);
}
.user-main { min-width: 0; }
.user-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-weight: 700; font-size: 15px; color: #eaf6ff; word-break: break-all;
}
.user-name .tag { margin-left: 0; vertical-align: 0; }
.user-email { font-size: 13px; color: var(--muted); word-break: break-all; }
.user-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(5, 8, 14, .6);
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chip b { font-weight: 600; color: #dfeefb; }
.chip.key-own { color: var(--cyan); border-color: var(--cyan-dim); background: var(--cyan-soft); }
.chip.key-shared { color: #ff8ab8; border-color: rgba(255, 61, 143, .45); background: var(--magenta-soft); }
.chip.key-none { color: var(--amber); border-color: rgba(255, 180, 84, .42); background: rgba(255, 180, 84, .08); }
.meter {
  width: 42px; height: 4px; border-radius: 999px; overflow: hidden; flex: none;
  background: rgba(255, 255, 255, .09);
}
.meter i {
  display: block; height: 100%; width: var(--p, 0%); min-width: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
}
.user-actions {
  grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding-top: 12px; border-top: 1px solid rgba(30, 44, 69, .75);
}
.user-actions:empty { display: none; }
.user-actions button { font-size: 12.5px; padding: 0 12px; height: 34px; }
.user-actions select {
  width: auto; height: 34px; font-family: var(--mono); font-size: 12.5px; padding-left: 10px;
}
.tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--cyan-soft); color: var(--cyan); border: 1px solid var(--cyan-dim);
}
.tag.admin { background: var(--magenta-soft); color: #ff8ab8; border-color: rgba(255, 61, 143, .45); }
.tag.warn { background: rgba(255, 180, 84, .1); color: var(--amber); border-color: rgba(255, 180, 84, .42); }
.cred-box {
  border: 1px solid rgba(61, 220, 151, .45); background: rgba(61, 220, 151, .06);
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
}
.cred-box p { margin: 0 0 6px; }
.cred-box pre {
  font-family: var(--mono); font-size: 13px; margin: 0 0 8px; white-space: pre-wrap;
  word-break: break-all; color: #eaf6ff; user-select: all;
}
@media (max-width: 640px) {
  header { padding: 12px 16px; }
  main { padding: 20px 16px 48px; }
  .user-actions { grid-column: 1 / -1; }
  .modal { padding: 20px 16px; }
  .modal.sheet { padding: 0; }
  .modal-head, .modal-foot { padding-left: 16px; padding-right: 16px; }
  .modal-body { padding: 16px; }
  .key-row button { flex: 1 0 auto; height: var(--control-h); }
  .sheet-section { padding: 14px; }
}