/* Grafica interna comune degli strumenti di Andrea (Cockpit, Style editor, revisione tutorial, editor video).
   Una sola fonte: _tools/interno-ui/interno.css. Si modifica qui, non nelle copie. Indipendente dai brand: i brand
   vivono nelle pagine pubbliche (_design/). Regole e componenti: _tools/interno-ui/STYLE.md. */
/* Cockpit: stile coerente con la dashboard e con ZETA Evolution (fondo #131313, blu #467ff7). */
:root {
  --bg: #0f1013;
  --bg2: #15171c;
  --surface: rgb(28 30 36 / 0.72);
  --surface-solid: #1c1e24;
  --fg: #f2f2ef;
  --muted: #9c9ca3;
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.16);
  --accent: #467ff7;
  --accent-2: #8a5cff;
  --live: #3ddc84;
  --wait: #f2b544;
  --danger: #ff6b6b;
  --glow: 0 0 0 1px rgb(70 127 247 / 0.35), 0 10px 40px -10px rgb(70 127 247 / 0.55);
  --shadow: 0 14px 40px -18px rgb(0 0 0 / 0.65);
  --sp-xs: 0.25rem; --sp-s: 0.5rem; --sp-m: 1rem; --sp-l: 1.5rem; --sp-xl: 2.5rem; --sp-xxl: 4rem;
  --fs-s: 0.8125rem; --fs-m: 1rem; --fs-l: 1.3rem; --fs-xl: clamp(2rem, 4.5vw, 3rem); --fs-xxl: clamp(2rem, 4vw, 2.75rem);
  --titoli: "Avenir Next", "Nunito Sans", system-ui, sans-serif;
  --corpo: Inter, system-ui, sans-serif;
  --menu-w: 15rem;
  --r: 16px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #e3e6ec; --bg2: #d8dce5; --surface: rgb(244 245 249 / 0.82); --surface-solid: #eceef3; --fg: #1d2027; --muted: #596070;
  --line: rgb(20 30 60 / 0.1); --line-strong: rgb(20 30 60 / 0.2); --live: #17a35a; --wait: #b87a0c;
  --shadow: 0 14px 40px -22px rgb(20 30 60 / 0.3); --glow: 0 0 0 1px rgb(70 127 247 / 0.35), 0 10px 30px -12px rgb(70 127 247 / 0.4);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: var(--fs-m) / 1.55 var(--corpo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--titoli); margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--fs-xl); font-weight: 900; letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--fg) 30%, color-mix(in srgb, var(--accent) 75%, var(--fg)) 70%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: var(--fs-l); font-weight: 800; margin-bottom: var(--sp-m); display: flex; align-items: center; gap: var(--sp-s); }
h3 { font-size: var(--fs-m); font-weight: 800; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.ico { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* sfondo: aurora che respira piano */
.aurora { position: fixed; inset: -20vmax; z-index: 0; pointer-events: none; opacity: 0.55;
  background:
    radial-gradient(40vmax 30vmax at 15% 10%, rgb(70 127 247 / 0.28), transparent 60%),
    radial-gradient(35vmax 28vmax at 85% 20%, rgb(138 92 255 / 0.2), transparent 60%),
    radial-gradient(40vmax 30vmax at 60% 95%, rgb(61 220 132 / 0.1), transparent 60%);
  animation: aurora 28s ease-in-out infinite alternate; }
:root[data-theme="light"] .aurora { opacity: 0.35; }
@keyframes aurora { to { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .aurora { animation: none; } * { scroll-behavior: auto !important; } }


/* intestazione */
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-m); }
.head > div { flex: 1 1 20rem; }
.sub { color: var(--muted); margin: var(--sp-s) 0 0; }
footer { color: var(--muted); font-size: var(--fs-s); }
footer b { color: var(--fg); }

/* riquadri */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-m); }
.tile { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-l) var(--sp-m) var(--sp-m);
  display: grid; gap: var(--sp-xs); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow); transition: transform 0.2s, border-color 0.2s; }
.tile:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.tile b { font: 900 var(--fs-xxl) / 1 var(--titoli); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile > span { color: var(--muted); font-size: var(--fs-s); }
.tile.accent { border-color: rgb(70 127 247 / 0.45); box-shadow: var(--glow); background: linear-gradient(140deg, rgb(70 127 247 / 0.22), rgb(138 92 255 / 0.12)), var(--surface); }
.tile.accent b { background: linear-gradient(100deg, #9fc0ff, #c6a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .tile.accent b { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-m); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow); min-width: 0; }
.count { font: 700 0.75rem / 1 var(--corpo); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.2rem 0.5rem; }
.empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: var(--sp-l); margin: 0; text-align: center; }
.err { color: var(--danger); margin: 0; font-size: var(--fs-s); }
.proj { font-size: var(--fs-s); font-weight: 600; color: var(--pc); white-space: nowrap; display: inline-flex; align-items: center; }
.proj::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 3px; background: var(--pc); margin-right: 0.4rem; box-shadow: 0 0 8px var(--pc); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-bottom: var(--sp-m); }
.chip { font-size: var(--fs-s); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; transition: border-color 0.15s, color 0.15s; }
.chip:hover { border-color: var(--line-strong); }
.chip.on { border-color: var(--accent); color: var(--accent); background: rgb(70 127 247 / 0.12); }
.chip.icon { padding: 0.35rem; }
.btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; border-radius: 10px; padding: 0.5rem 1rem; cursor: pointer; font-weight: 600; font-size: var(--fs-s); color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 20px -8px rgb(70 127 247 / 0.8); transition: transform 0.15s, filter 0.15s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
input, select { background: color-mix(in srgb, var(--surface-solid) 85%, transparent); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.5rem 0.7rem; min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(70 127 247 / 0.2); }


/* selettore del giorno, barre di avanzamento */
/* ---- selettore del giorno (Training, Nutrition, Menu) ---- */
.daypick { display: flex; align-items: stretch; gap: var(--sp-s); margin-bottom: var(--sp-m); padding: var(--sp-s); border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.dp { position: relative; flex: 1 1 0; min-width: 0; display: grid; place-items: center; gap: 2px; padding: 0.5rem 0.2rem; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--fg); cursor: pointer; font: inherit; transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.dp:hover:not(.on) { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.dp span { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; font-weight: 800; color: var(--muted); }
.dp b { font: 800 1.15rem / 1 var(--titoli); font-variant-numeric: tabular-nums; }
.dp.today:not(.on) { border-color: var(--accent); }
.dp.rest:not(.on) { opacity: 0.6; }
.dp.karate:not(.on) { border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line)); }
.dp.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--glow); }
.dp.on span { color: color-mix(in srgb, #fff 80%, transparent); }
.dp.done::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.dp-arrow { flex: 0 0 auto; width: 2.4rem; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 1.3rem; cursor: pointer; }
.dp-arrow:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.tile-bar { display: block; height: 0.4rem; margin-top: var(--sp-s); border-radius: 999px; background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; }
.tile-bar u { display: block; height: 100%; border-radius: inherit; background: var(--accent); text-decoration: none; transition: width 0.4s; }
.tile.accent .tile-bar u { background: linear-gradient(90deg, #9fc0ff, #c6a8ff); }
.tile-bar.over u { background: var(--danger); }
.dp.drop { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); transform: scale(1.06); }

/* Note e puntini (NoteViewer) */
.nv { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: var(--sp-m); align-items: start; margin-bottom: var(--sp-l); }
.nv-stage { display: grid; gap: var(--sp-s); }
.nv-media { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface-solid); line-height: 0; }
.nv-media video, .nv-media img { width: 100%; display: block; max-height: 70vh; object-fit: contain; background: #000; }
.nv-media.adding { cursor: crosshair; outline: 2px solid var(--accent); }
.nv-dot { position: absolute; transform: translate(-50%, -50%); width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font: 800 0.8rem / 1 var(--corpo); box-shadow: 0 0 0 2px #fff, 0 4px 14px rgb(0 0 0 / 0.5); pointer-events: none; }
.nv-dot.done { background: var(--live); }
.nv-bar { display: flex; flex-wrap: wrap; gap: var(--sp-s); align-items: center; }
.nv-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.nv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-s); }
.nv-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-s) var(--sp-m); display: grid; gap: var(--sp-xs); }
.nv-item.done { opacity: 0.65; }
.nv-head { display: flex; align-items: center; gap: var(--sp-s); }
.nv-head small { color: var(--muted); }
.nv-n { width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; }
.nv-who { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.65rem; }
.nv-res { margin-left: auto; font-size: var(--fs-s); color: var(--muted); display: inline-flex; gap: var(--sp-xs); align-items: center; }
.nv-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.nv-del:hover { color: var(--danger); }
.nv-item textarea { width: 100%; resize: vertical; background: color-mix(in srgb, var(--surface-solid) 85%, transparent); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.5rem 0.7rem; font: inherit; color: inherit; }
.nv-reply { margin: 0; font-size: var(--fs-s); color: var(--muted); }
.nv-reply b { color: var(--fg); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.06em; margin-right: var(--sp-xs); }
.nv-item form input { width: 100%; }
.nv-new { flex-wrap: wrap; }
@media (max-width: 900px) { .nv { grid-template-columns: 1fr; } }