/* =========================================================
   RM Analyzer - styles.css (mobile-first, Orbital-like)
   Version: 20260203_7
   Goal: identical “feel” to Orbital DJ + zero overflow
   ========================================================= */

:root{
  --bg0:#070a0f;
  --bg1:#0b101a;
  --bg2:#0f1626;

  --card:#0c1320cc;
  --card2:#0b1220f2;

  --stroke:#1b2944;
  --stroke2:#263a60;

  --text:#e9eefc;
  --muted:#a9b6d7;
  --muted2:#7f8fb4;

  /* RallisMusic-ish accents (orange + blue) */
  --a1:#ff7a18;     /* orange */
  --a2:#ff3d6e;     /* pink-ish */
  --b1:#3aa0ff;     /* blue */
  --b2:#7c4dff;     /* violet */

  --ok:#2ee6a6;
  --warn:#ffd166;
  --bad:#ff3b4d;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow2: 0 12px 40px rgba(0,0,0,.45);

  --r: 18px;
  --r2: 22px;

  --gap: 14px;
  --gap2: 18px;

  --font: "Orbitron", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --btnH: 44px;
  --btnR: 14px;
}

/* Base + anti overflow */
*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; min-width:0; }
html,body{ height:100%; width:100%; max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(58,160,255,.22), transparent 60%),
    radial-gradient(900px 700px at 110% 20%, rgba(255,122,24,.18), transparent 55%),
    radial-gradient(900px 700px at 30% 110%, rgba(124,77,255,.16), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg2));
}

/* clamp media */
img, video, canvas{ max-width:100%; height:auto; display:block; }
pre{ max-width:100%; }
a, button, input, select{ max-width:100%; }

/* App wrapper */
.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* ---------- Buttons (Orbital-like) ---------- */
.btn{
  height:var(--btnH);
  padding: 0 14px;
  border-radius: var(--btnR);
  border: 1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color: var(--text);
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  user-select:none;
  transition: transform .08s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.btn--primary{
  border-color: rgba(255,122,24,.55);
  background:
    linear-gradient(180deg, rgba(255,122,24,.35), rgba(255,122,24,.14));
}
.btn--danger{
  border-color: rgba(255,59,77,.55);
  background:
    linear-gradient(180deg, rgba(255,59,77,.35), rgba(255,59,77,.14));
}
.btn--ghost{
  background: rgba(255,255,255,.02);
  box-shadow:none;
}

.smallBtn{
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
}

/* Inputs / selects */
.select{
  width:100%;
  height:44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: 0 12px;
  outline:none;
  font-family: var(--font);
  letter-spacing:.2px;
}
.select:focus{
  border-color: rgba(58,160,255,.55);
  box-shadow: 0 0 0 3px rgba(58,160,255,.10);
}

/* file input: safe */
input[type="file"]{
  width:100%;
  border-radius: 18px;
  border: 2px dashed rgba(58,160,255,.35);
  background: rgba(58,160,255,.06);
  padding: 12px;
  color: rgba(169,182,215,.9);
  overflow:hidden;
}
input[type="file"]::file-selector-button{
  height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .3px;
  cursor:pointer;
  margin-right: 10px;
}
input[type="file"]::-webkit-file-upload-button{
  height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .3px;
  cursor:pointer;
  margin-right: 10px;
}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky;
  top:0;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 12px 12px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));

  background: linear-gradient(180deg, rgba(7,10,15,.92), rgba(7,10,15,.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(27,41,68,.65);
  overflow:hidden;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex: 1 1 auto;
}

.brandMark{
  width:44px;
  height:44px;
  border-radius: 14px;
  display:block;
  border: 1px solid rgba(38,58,96,.7);
  box-shadow: var(--shadow);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(58,160,255,.20), transparent 60%),
    radial-gradient(22px 22px at 80% 30%, rgba(255,122,24,.16), transparent 60%),
    rgba(0,0,0,.18);
  object-fit: cover;
  flex: 0 0 auto;
}

.brandText{ min-width:0; }
.brandTitle{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .6px;
  line-height: 1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brandSub{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .4px;
  margin-top: 2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topActions{ display:flex; gap:10px; flex: 0 0 auto; }

.iconBtnTop{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration:none;
}
.iconBtnTop i{ font-size: 18px; line-height: 1; }
.iconBtnTop:hover{ background: rgba(255,255,255,0.07); }
.iconBtnTop:active{ transform: translateY(1px); }

/* ---------- Main ---------- */
.main{
  width:100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 12px 18px 12px;
  display:flex;
  flex-direction:column;
  gap: var(--gap2);
}

/* Cards */
.card{
  border-radius: var(--r2);
  border: 1px solid rgba(27,41,68,.85);
  background: linear-gradient(180deg, rgba(12,19,32,.85), rgba(10,16,28,.70));
  box-shadow: var(--shadow);
  padding: 14px;
  overflow:hidden;
}

.cardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.panelTitle{
  margin: 0;
  font-size: 16px;
  letter-spacing: .6px;
}

.pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(38,58,96,.85);
  background: rgba(0,0,0,.18);
  font-size: 11px;
  letter-spacing:.4px;
  white-space:nowrap;
  max-width: 60vw;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- Hero Card ---------- */
.heroCard{
  border-radius: 26px;
  border: 1px solid rgba(38,58,96,.95);
  background:
    radial-gradient(600px 240px at 10% 10%, rgba(58,160,255,.20), transparent 60%),
    radial-gradient(520px 220px at 90% 25%, rgba(255,122,24,.16), transparent 60%),
    linear-gradient(180deg, rgba(14,22,38,.78), rgba(10,16,28,.72));
  box-shadow: var(--shadow2);
  padding: 14px;
  overflow:hidden;
}

.heroTop{
  display:flex;
  flex-direction:column;
  gap: var(--gap2);
}

.heroCopy{ min-width:0; }
.heroH1{
  margin: 0 0 8px 0;
  font-size: 24px;
  letter-spacing: .6px;
  line-height: 1.15;
}
.heroP{
  margin: 0 0 10px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.uploadBox{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}

.fileMeta{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

.fileName{
  font-size: 12px;
  font-weight: 700;
  letter-spacing:.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fileHint{
  font-size: 11px;
  color: rgba(169,182,215,.82);
  line-height: 1.35;
  overflow-wrap:anywhere;
}

/* Controls */
.controls{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}

.field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.fieldLabel{
  font-size: 12px;
  color: var(--muted);
  letter-spacing:.4px;
  text-transform: uppercase;
}

.btnRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

/* Status panel */
.heroStatusPanel{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.scanPanel{
  border-radius: 18px;
  border: 1px solid rgba(27,41,68,.85);
  background: rgba(0,0,0,.20);
  overflow:hidden;
  position: relative;
}

/* Canvas: NEVER fixed width -> no overflow */
#scanCanvas{
  width:100%;
  height: 140px;
  display:block;
}

.scanOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 10px 12px;
}

.scanTitle{
  font-size: 12px;
  color: var(--muted);
  letter-spacing:.4px;
  text-transform: uppercase;
}

.scanHint{
  font-size: 12px;
  color: rgba(169,182,215,.92);
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.statusBlock{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(27,41,68,.85);
  background: rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.statusTitle{
  font-size: 12px;
  color: var(--muted);
  letter-spacing:.4px;
  text-transform: uppercase;
}

.statusLine{
  font-size: 12px;
  color: rgba(233,238,252,.92);
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.progressWrap{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-top: 4px;
}

.progressBar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(38,58,96,.75);
  background: rgba(0,0,0,.22);
  overflow:hidden;
}

.progressFill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(58,160,255,.85), rgba(255,122,24,.65));
  transition: width .15s ease;
}

.progressMeta{
  font-size: 11px;
  color: rgba(169,182,215,.85);
  display:flex;
  align-items:center;
  gap: 8px;
}

.dot{ opacity:.7; }

/* sparkline */
.sparkline{
  height:34px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  overflow:hidden;
}
.spark{
  width:10px;
  border-radius:8px;
  background: linear-gradient(180deg, rgba(58,160,255,.55), rgba(255,122,24,.50));
  animation: spark 1.05s ease-in-out infinite;
  transform-origin:bottom;
  flex:0 0 10px;
}
.spark.s1{ animation-delay:0s; }
.spark.s2{ animation-delay:.08s; }
.spark.s3{ animation-delay:.16s; }
.spark.s4{ animation-delay:.24s; }
.spark.s5{ animation-delay:.32s; }
.spark.s6{ animation-delay:.40s; }
.spark.s7{ animation-delay:.48s; }
.spark.s8{ animation-delay:.56s; }

@keyframes spark{
  0%,100%{ height:10px; opacity:.55; }
  50%{ height:32px; opacity:1; }
}

.smallNote{
  font-size: 11px;
  color: rgba(169,182,215,.72);
  line-height: 1.4;
  margin-top: 2px;
}

/* ---------- Results ---------- */
.resultsGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.result{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(27,41,68,.75);
  background: rgba(0,0,0,.14);
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.label{
  font-size: 12px;
  color: rgba(169,182,215,.82);
  letter-spacing:.3px;
  text-transform: uppercase;
}

.value{
  font-size: 22px;
  font-weight: 900;
  letter-spacing:.6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sub{
  font-size: 12px;
  color: rgba(169,182,215,.86);
  line-height: 1.35;
  overflow-wrap:anywhere;
  white-space: normal;
}

/* Debug */
.debug{
  margin:0;
  max-height: 260px;
  overflow:auto;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(27,41,68,.75);
  background: rgba(0,0,0,.20);
  color: rgba(233,238,252,.92);
  font-size: 11px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Footer */
.footer{
  margin-top:auto;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(27,41,68,.65);
  background: linear-gradient(180deg, rgba(7,10,15,.20), rgba(7,10,15,.92));
  color: rgba(169,182,215,.86);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px;
  font-size: 11px;
}

/* ---------- Modal ---------- */
.modal[hidden]{ display:none; }
.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding: 14px;
}

.modalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modalCard{
  position:relative;
  width: min(720px, calc(100vw - 18px));
  border-radius: 22px;
  border: 1px solid rgba(38,58,96,.95);
  background:
    radial-gradient(520px 260px at 10% 10%, rgba(58,160,255,.16), transparent 60%),
    radial-gradient(520px 260px at 90% 15%, rgba(255,122,24,.12), transparent 60%),
    linear-gradient(180deg, rgba(14,22,38,.92), rgba(10,16,28,.88));
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid rgba(27,41,68,.65);
}

.modalTitle{
  font-size: 14px;
  font-weight: 900;
  letter-spacing:.6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.modalBody{
  padding: 14px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(233,238,252,.92);
}
.modalBody ul{ margin: 10px 0 0 18px; }

/* ---------- Responsive ---------- */
@media (min-width: 720px){
  .main{ padding: 18px 16px 22px 16px; }

  .heroTop{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: var(--gap2);
    align-items:start;
  }

  .controls{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items:end;
  }
  .btnRow{
    grid-column: 1 / -1;
  }

  .resultsGrid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px){
  .main{ max-width: 1180px; }
  .resultsGrid{ grid-template-columns: repeat(4, 1fr); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
  .progressFill{ transition:none; }
  .spark{ animation:none; }
}
/* FIX: niente colore "link" sui bottoni icona (home rosa) */
.iconBtnTop,
.iconBtnTop:link,
.iconBtnTop:visited,
.iconBtnTop:hover,
.iconBtnTop:active{
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none !important;
}

.iconBtnTop i{ color: inherit !important; }