/* The desktop manager: the iPod at the top, a menu on the left, one section
   at a time in the middle, the player at the bottom. Loaded after sync.css. */

.syi-sync__notes { color: var(--syi-muted); font-size: 14px; line-height: 1.5; list-style: none; margin: 14px 0 0; max-width: 600px; padding: 0; }
.syi-sync__notes li { padding-left: 18px; position: relative; }
.syi-sync__notes li + li { margin-top: 6px; }
.syi-sync__notes li::before { color: var(--syi-blue); content: "•"; left: 4px; position: absolute; }
.syi-sync__notes[hidden], .syi-sync__welcome[hidden], .syi-sync__app[hidden] { display: none; }
/* Buttons and boxes styled with a display of their own still obey hidden. */
.syi-sync [hidden] { display: none !important; }

/* --- frame ---------------------------------------------------------------- */
.syi-sync:has(> .syi-sync__app:not([hidden])) { padding-top: 24px; }
/* Wider than the site's text column: the frame takes the window, up to 1440 px. */
.syi-sync__app {
  --frame: min(1440px, calc(100vw - 48px));
  left: 50%;
  margin-left: calc(var(--frame) / -2);
  width: var(--frame);
  background: #fff;
  border: 1px solid var(--syi-line);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .08);
  display: grid;
  grid-template-areas: "top top" "limited limited" "side main" "player player";
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  /* Ends above the site's assistant button in the corner. */
  height: clamp(560px, calc(100vh - 170px), 1100px);
  overflow: hidden;
  position: relative;
}

.syi-sync__topbar { align-items: center; background: #fbfbfd; border-bottom: 1px solid var(--syi-line); display: flex; gap: 14px; grid-area: top; padding: 12px 16px; }
.syi-sync__chip { align-items: center; display: flex; gap: 12px; min-width: 0; }
.syi-sync__chip > div { display: grid; min-width: 0; }
.syi-sync__chip strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-sync__chip small { color: var(--syi-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-sync__chip-icon { background: linear-gradient(160deg, #f4f4f5, #cfd0d2); border: 1px solid rgba(0,0,0,.18); border-radius: 6px; flex: none; height: 38px; position: relative; width: 26px; }
.syi-sync__chip-icon::before { background: #26313a; border-radius: 2px; content: ""; height: 13px; left: 3px; position: absolute; right: 3px; top: 3px; }
.syi-sync__chip-icon::after { background: #fff; border: 1px solid rgba(0,0,0,.18); border-radius: 50%; bottom: 3px; content: ""; height: 14px; left: 5px; position: absolute; width: 14px; }
.syi-sync__badge { background: #fff4e5; border-radius: 999px; color: #9a5b00; flex: none; font-size: 12px; font-weight: 700; padding: 5px 10px; }
.syi-sync__badge[hidden] { display: none; }
.syi-sync__top-search { flex: 1; margin-left: auto; max-width: 420px; }
.syi-sync__top-search input { background: #fff; border: 1px solid var(--syi-line); border-radius: 999px; font: inherit; font-size: 14px; padding: 9px 16px; width: 100%; }
.syi-sync__topbar .syi-sync__secondary { flex: none; padding: 9px 15px; }

.syi-sync__side { background: #f5f5f7; border-right: 1px solid var(--syi-line); grid-area: side; overflow-y: auto; padding: 14px 10px 20px; }
.syi-sync__side-title { color: var(--syi-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; margin: 16px 10px 6px; text-transform: uppercase; }
.syi-sync__side-title:first-child { margin-top: 2px; }
.syi-sync__side-title[hidden] { display: none; }
.syi-sync__side button { align-items: center; background: none; border: 0; border-radius: 9px; color: var(--syi-ink); cursor: pointer; display: flex; font-size: 14px; gap: 8px; justify-content: space-between; padding: 7px 10px; text-align: left; width: 100%; }
.syi-sync__side button[hidden] { display: none; }
.syi-sync__side button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-sync__side button small { color: var(--syi-muted); flex: none; font-size: 12px; }
.syi-sync__side button:hover { background: rgba(0, 0, 0, .05); }
.syi-sync__side button.is-active { background: rgba(0, 113, 227, .12); color: var(--syi-blue); font-weight: 650; }
.syi-sync__side button.needs-attention span::after { background: #f29900; border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-left: 7px; vertical-align: middle; width: 7px; }
.syi-sync__side-list { display: grid; }

.syi-sync__main { grid-area: main; min-height: 0; overflow-y: auto; padding: 22px 26px 26px; }
.syi-sync__main > .syi-sync__panel:not(.is-active) { display: none; }
/* The sections lose their stand-alone cards inside the frame. */
.syi-sync__app .syi-sync__library, .syi-sync__app .syi-sync__upload { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; overflow: visible; padding: 0; }
.syi-sync__app .syi-sync__report { margin: 0; }
.syi-sync__app .syi-sync__library h2, .syi-sync__app .syi-sync__report h2 { font-size: 28px; margin-bottom: 0; }
.syi-sync__app .syi-sync__eyebrow { margin-bottom: 6px; }
.syi-sync__app .syi-sync__library-head h2 { white-space: nowrap; }
.syi-sync__app .syi-sync__library-actions { max-width: none; width: auto; }
.syi-sync__app .syi-sync__library-actions .syi-sync__secondary { padding: 9px 15px; }

/* The library fills the middle; only its list scrolls. */
.syi-sync__main[data-active="library"] { display: flex; flex-direction: column; overflow: hidden; }
.syi-sync__main[data-active="library"] > .syi-sync__library.is-active { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.syi-sync__app .syi-sync__library-summary { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; }
.syi-sync__app .syi-sync__library-summary .syi-sync__result-row { border: 0; display: flex; gap: 6px; padding: 0; }
.syi-sync__app .syi-sync__library-summary .syi-sync__result-row span { font-size: 13px; margin: 0; }
.syi-sync__app .syi-sync__library-summary .syi-sync__result-row strong { font-size: 13px; }
.syi-sync__app .syi-sync__library-warning { flex-basis: 100%; margin: 0; }
.syi-sync__app .syi-sync__selection-bar { margin: 14px 0 12px; padding: 8px 10px 8px 14px; }
.syi-sync__app .syi-sync__selection-bar span { font-size: 13px; }
.syi-sync__app .syi-sync__selection-bar button { font-size: 13px; padding: 7px 13px; }
.syi-sync__app .syi-sync__selection-bar .syi-sync__primary { box-shadow: none; }
.syi-sync__app .syi-sync__library-foot { flex: none; margin-top: 8px; }
.syi-sync__app .syi-sync__library-empty { flex: none; }
.syi-sync.is-readonly [data-sync-remove] { display: none; }

/* --- the song list ---------------------------------------------------------- */
.syi-tracks {
  --cols: 34px minmax(220px, 2.5fr) minmax(120px, 1.4fr) minmax(120px, 1.4fr) minmax(80px, .8fr) 64px 72px 82px 104px 40px;
  border: 1px solid var(--syi-line);
  border-radius: 14px;
  flex: 1;
  font-size: 13.5px;
  min-height: 220px;
  outline: none;
  overflow: auto;
  position: relative;
}
.syi-tracks:focus-visible { box-shadow: 0 0 0 3px rgba(0, 113, 227, .25); }
.syi-tracks__head, .syi-tracks__row { display: grid; grid-template-columns: var(--cols); min-width: 760px; }
.syi-tracks__head { background: rgba(245, 245, 247, .97); border-bottom: 1px solid var(--syi-line); position: sticky; top: 0; z-index: 2; }
.syi-tracks__head .syi-tracks__cell { padding: 0 10px; }
.syi-tracks__head button { background: none; border: 0; color: var(--syi-muted); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .05em; max-width: 100%; overflow: hidden; padding: 10px 0; text-align: inherit; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.syi-tracks__head .is-sorted button { color: var(--syi-ink); }
.syi-tracks__head .is-sorted button::after { content: " ▲"; font-size: 9px; }
.syi-tracks__head .is-desc button::after { content: " ▼"; }
.syi-tracks__body { min-width: 760px; position: relative; }
.syi-tracks__row { align-items: center; border-bottom: 1px solid rgba(29, 29, 31, .06); cursor: default; height: 44px; left: 0; position: absolute; right: 0; top: 0; user-select: none; }
.syi-tracks__row:hover { background: #f6f9fe; }
.syi-tracks__row.is-selected { background: rgba(0, 113, 227, .11); }
.syi-tracks__row.is-focus { box-shadow: inset 2px 0 0 var(--syi-blue); }
.syi-tracks__row.is-current strong { color: var(--syi-blue); }
.syi-tracks__cell { min-width: 0; overflow: hidden; padding: 0 10px; text-overflow: ellipsis; white-space: nowrap; }
.syi-tracks__check { padding: 0 0 0 12px; }
.syi-tracks__action { padding: 0; text-align: center; text-overflow: clip; }
.syi-tracks__check input { cursor: pointer; margin: 0; }
.syi-tracks__col-year, .syi-tracks__col-time, .syi-tracks__col-plays { font-variant-numeric: tabular-nums; text-align: right; }
.syi-tracks__col-artist, .syi-tracks__col-album, .syi-tracks__col-genre, .syi-tracks__col-added, .syi-tracks__col-plays, .syi-tracks__col-year { color: #3a3a3c; }
.syi-tracks__col-time { color: var(--syi-muted); }
.syi-tracks__row .syi-tracks__col-title { align-items: center; display: flex; gap: 10px; padding-right: 6px; }
.syi-tracks__words { display: grid; min-width: 0; }
.syi-tracks__words strong { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-tracks__words small { color: var(--syi-muted); display: none; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-tracks__cover { background: linear-gradient(145deg, #e8e8ed, #d2d2d7); background-position: center; background-size: cover; border-radius: 5px; flex: none; height: 30px; width: 30px; }
.syi-tracks__play { align-items: center; background: var(--syi-blue); border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: flex; flex: none; height: 24px; justify-content: center; margin-left: -4px; opacity: 0; padding: 0; width: 24px; }
.syi-tracks__row:hover .syi-tracks__play, .syi-tracks__row.is-current .syi-tracks__play, .syi-tracks__play:focus-visible { opacity: 1; }
.syi-tracks__play::before { border-bottom: 5px solid transparent; border-left: 8px solid currentColor; border-top: 5px solid transparent; content: ""; margin-left: 2px; }
.syi-tracks__play.is-playing::before { border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; height: 10px; margin: 0; width: 3px; }
.syi-tracks__save { background: none; border: 0; border-radius: 50%; color: var(--syi-blue); cursor: pointer; height: 28px; opacity: 0; padding: 0; width: 28px; }
.syi-tracks__save::before { content: "↓"; font-size: 16px; font-weight: 700; }
.syi-tracks__row:hover .syi-tracks__save, .syi-tracks__save:focus-visible { opacity: 1; }
.syi-tracks__save:hover { background: rgba(0, 113, 227, .1); }
.syi-sync.is-readonly .syi-tracks__save { opacity: .7; }

/* --- the player ------------------------------------------------------------- */
.syi-sync__playerbar { grid-area: player; }
.syi-player { align-items: center; background: rgba(251, 251, 253, .97); border-top: 1px solid var(--syi-line); display: grid; gap: 14px; grid-template-columns: 48px minmax(120px, 1.1fr) auto minmax(180px, 2fr) 130px; padding: 10px 18px; }
.syi-player[hidden] { display: none; }
.syi-player__art { background: linear-gradient(145deg, #e8e8ed, #d2d2d7); background-position: center; background-size: cover; border-radius: 7px; height: 48px; width: 48px; }
.syi-player__words { display: grid; min-width: 0; }
.syi-player__words strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-player__words span { color: var(--syi-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-player__controls { align-items: center; display: flex; gap: 6px; }
.syi-player__controls button { align-items: center; background: none; border: 0; border-radius: 50%; color: var(--syi-ink); cursor: pointer; display: flex; height: 36px; justify-content: center; padding: 0; width: 36px; }
.syi-player__controls button:hover { background: rgba(0, 0, 0, .06); }
.syi-player__controls .syi-player__toggle { background: var(--syi-ink); color: #fff; height: 40px; width: 40px; }
.syi-player__controls .syi-player__toggle:hover { background: #000; }
.syi-player__toggle::before { border-bottom: 7px solid transparent; border-left: 11px solid currentColor; border-top: 7px solid transparent; content: ""; margin-left: 3px; }
.syi-player__toggle.is-playing::before { border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; height: 14px; margin: 0; width: 5px; }
.syi-player__prev::before, .syi-player__next::before { border-bottom: 6px solid transparent; border-top: 6px solid transparent; content: ""; }
.syi-player__prev::after, .syi-player__next::after { border-bottom: 6px solid transparent; border-top: 6px solid transparent; content: ""; }
.syi-player__prev::before, .syi-player__prev::after { border-right: 9px solid currentColor; }
.syi-player__next::before, .syi-player__next::after { border-left: 9px solid currentColor; }
.syi-player__timeline { align-items: center; display: grid; font-size: 12px; font-variant-numeric: tabular-nums; gap: 10px; grid-template-columns: 44px minmax(0, 1fr) 48px; }
.syi-player__timeline span { color: var(--syi-muted); }
.syi-player__timeline span:last-child { text-align: right; }
.syi-player input[type=range] { accent-color: var(--syi-blue); margin: 0; min-width: 0; width: 100%; }
.syi-player__volume { align-items: center; display: flex; gap: 8px; }
.syi-player__volume > span { cursor: pointer; flex: none; height: 16px; position: relative; width: 18px; }
.syi-player__volume > span::before { border-bottom: 5px solid transparent; border-right: 8px solid var(--syi-muted); border-top: 5px solid transparent; content: ""; left: 0; position: absolute; top: 3px; }
.syi-player__volume > span::after { border: 2px solid var(--syi-muted); border-left: 0; border-radius: 0 10px 10px 0; content: ""; height: 10px; left: 10px; position: absolute; top: 3px; width: 5px; }
.syi-player__volume.is-muted > span::after { border-color: transparent; }

.syi-player__video { background: #000; border-radius: 14px; bottom: 84px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); overflow: hidden; position: absolute; right: 18px; width: min(440px, 46%); z-index: 6; }
.syi-player__video[hidden] { display: none; }
.syi-player__video video { display: block; max-height: 60vh; width: 100%; }
.syi-player__video-bar { display: flex; gap: 6px; position: absolute; right: 8px; top: 8px; }
.syi-player__video-bar button { background: rgba(0, 0, 0, .55); border: 0; border-radius: 50%; color: #fff; cursor: pointer; font-size: 16px; height: 30px; line-height: 1; width: 30px; }

/* --- narrower screens --------------------------------------------------------- */
@media (max-width: 1180px) {
  .syi-tracks { --cols: 34px minmax(200px, 2.4fr) minmax(110px, 1.3fr) minmax(110px, 1.3fr) 72px 40px; }
  .syi-tracks__col-genre, .syi-tracks__col-year, .syi-tracks__col-plays, .syi-tracks__col-added { display: none; }
  .syi-player { grid-template-columns: 48px minmax(120px, 1fr) auto minmax(160px, 1.6fr) 110px; }
}

@media (max-width: 860px) {
  .syi-sync:has(> .syi-sync__app:not([hidden])) { padding: 12px 8px 24px; }
  .syi-sync__app { --frame: calc(100vw - 16px); border-radius: 16px; grid-template-areas: "top" "limited" "side" "main" "player"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; height: calc(100vh - 80px); min-height: 520px; }
  .syi-sync__topbar { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .syi-sync__chip { flex: 1 1 150px; } /* the iPod's name stays readable (was cut to «i.» at 390 px) */
  .syi-sync__top-search { flex-basis: 100%; max-width: none; order: 5; }
  .syi-sync__side { border-bottom: 1px solid var(--syi-line); border-right: 0; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 8px; scrollbar-width: none; }
  .syi-sync__side-title { display: none; }
  .syi-sync__side-list { display: contents; }
  .syi-sync__side button { flex: none; width: auto; }
  .syi-sync__main { padding: 14px 12px 16px; }
  .syi-sync__app .syi-sync__library h2, .syi-sync__app .syi-sync__report h2 { font-size: 22px; }
  .syi-sync__app .syi-sync__library-head { align-items: center; flex-direction: row; }
  .syi-sync__app .syi-sync__library-actions { flex-direction: row; width: auto; }
  .syi-sync__app .syi-sync__selection-bar { align-items: stretch; flex-direction: column; gap: 8px; }
  .syi-sync__app .syi-sync__selection-bar > div { display: flex; flex-wrap: wrap; gap: 6px; }
  .syi-tracks { --cols: 30px minmax(0, 1fr) 62px 36px; }
  .syi-tracks__head button { font-size: 10px; }
  .syi-sync__app .syi-sync__library-summary { display: none; }
  .syi-sync__app .syi-sync__selection-bar .syi-sync__primary { width: auto; }
  .syi-tracks__head, .syi-tracks__row, .syi-tracks__body { min-width: 0; }
  .syi-tracks__head .syi-tracks__col-artist, .syi-tracks__head .syi-tracks__col-album,
  .syi-tracks__row .syi-tracks__col-artist, .syi-tracks__row .syi-tracks__col-album { display: none; }
  .syi-tracks__words small { display: block; }
  .syi-tracks__row { height: 44px; }
  .syi-tracks__play { opacity: 1; }
  .syi-tracks__save { opacity: .8; }
  .syi-player { gap: 8px 10px; grid-template-columns: 40px minmax(0, 1fr) auto; padding: 8px 12px; }
  .syi-player__art { height: 40px; width: 40px; }
  .syi-player__timeline { grid-column: 1 / -1; }
  .syi-player__volume { display: none; }
  .syi-player__video { bottom: 120px; left: 12px; right: 12px; width: auto; }
}

/* --- the computer's music ------------------------------------------------------ */
.syi-sync__side-group { display: grid; }
.syi-sync__side .syi-sync__side-add { color: var(--syi-blue); font-size: 13px; }
.syi-sync__side button.is-drop, .syi-sync__chip.is-drop, .syi-sync__panel.is-drop { background: rgba(0, 113, 227, .16); box-shadow: inset 0 0 0 2px var(--syi-blue); }
.syi-sync__chip { border-radius: 12px; padding: 2px 8px 2px 2px; }
.syi-sync__computer-empty { background: #f5f5f7; border-radius: 18px; margin-top: 18px; max-width: 720px; padding: 24px 26px; }
.syi-sync__computer-empty > p:first-child { color: var(--syi-ink); font-size: 16px; line-height: 1.5; margin: 0; }
.syi-sync__computer-empty .syi-sync__actions { margin-top: 18px; }
.syi-sync__computer-empty .syi-sync__help { margin-top: 12px; }
.syi-sync__app .syi-sync__computer .syi-sync__library-actions { flex-wrap: wrap; }
.syi-sync__main[data-active="computer"] { display: flex; flex-direction: column; overflow: hidden; }
.syi-sync__main[data-active="computer"] > .syi-sync__computer.is-active { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.syi-sync__main[data-active="computer"] .syi-sync__write-progress { flex: none; }
/* Songs already on the iPod: a small mark after the title. Songs to convert: greyed. */
.syi-tracks__cover { position: relative; }
.syi-tracks__row.is-marked .syi-tracks__cover::after { align-items: center; background: var(--syi-blue); border: 2px solid #fff; border-radius: 50%; bottom: -4px; color: #fff; content: "✓"; display: flex; font-size: 9px; font-weight: 800; height: 16px; justify-content: center; position: absolute; right: -5px; width: 16px; }
.syi-tracks__row.is-unready { color: var(--syi-muted); }
.syi-tracks__row.is-unready .syi-tracks__words strong { font-weight: 450; }
.syi-tracks__row[draggable="true"] { cursor: grab; }

@media (max-width: 860px) {
  /* The menu is one scrolling row on narrow screens: the groups give their buttons to it. */
  .syi-sync__side-group { display: contents; }
  .syi-sync__side .syi-sync__side-add { display: none; }
}

/* --- writing (tappa 3) ---------------------------------------------------------- */
.syi-sync__report-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.syi-sync__report .syi-sync__export-status { color: #d2d2d7; margin: 12px 0 0; text-align: left; }
.syi-sync__queue-file { align-items: center; display: flex; gap: 12px; min-width: 0; }
.syi-sync__queue-file > div { display: grid; min-width: 0; }
.syi-sync__queue-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-sync__queue-art { background: linear-gradient(145deg, #e8e8ed, #d2d2d7); background-position: center; background-size: cover; border-radius: 7px; flex: none; height: 44px; width: 44px; }
.syi-sync__queue-fields label select { background: #f5f5f7; border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: 15px; padding: 9px 10px; width: 100%; }
.syi-sync__queue-kind { display: block; font-size: 15px; padding: 9px 0; }
.syi-sync__app .syi-sync__queue-fields { grid-template-columns: repeat(5, minmax(90px, 1fr)); }
.syi-sync.is-writing [data-sync-commit], .syi-sync.is-writing [data-sync-verify] { pointer-events: none; }
@media (max-width: 1180px) { .syi-sync__app .syi-sync__queue-fields { grid-template-columns: repeat(2, minmax(100px, 1fr)); } }

/* --- managing the library (tappa 4) ---------------------------------------------- */
.syi-sync__edit { border: 0; border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, .3); max-width: min(720px, calc(100vw - 24px)); padding: 0; width: 100%; }
.syi-sync__edit::backdrop { background: rgba(0, 0, 0, .35); }
.syi-sync__edit-form { display: grid; gap: 16px; padding: 24px 26px; }
.syi-sync__edit h2 { font-size: 22px; margin: 0; }
.syi-sync__edit-grid { display: grid; gap: 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.syi-sync__edit-grid label { display: grid; gap: 4px; }
.syi-sync__edit-grid label[hidden] { display: none; }
.syi-sync__edit-grid span { color: var(--syi-muted); font-size: 12px; }
.syi-sync__edit-grid input { background: #f5f5f7; border: 1px solid transparent; border-radius: 10px; font: inherit; padding: 9px 10px; }
.syi-sync__edit-grid input:focus { border-color: var(--syi-blue); outline: none; }
.syi-sync__edit-cover { align-items: center; display: flex; gap: 14px; }
.syi-sync__edit-cover > div { display: grid; gap: 4px; justify-items: start; }
.syi-sync__edit-cover small { color: var(--syi-muted); }
.syi-sync__edit-art { background: linear-gradient(145deg, #e8e8ed, #d2d2d7); background-position: center; background-size: cover; border-radius: 10px; flex: none; height: 88px; width: 88px; }
.syi-sync__edit-actions { display: flex; gap: 10px; justify-content: flex-end; }
.syi-sync__edit .syi-sync__export-status { margin: 0; text-align: left; }
.syi-sync__covers-summary { color: var(--syi-ink); font-weight: 600; margin: 14px 0 0; }
.syi-sync__covers .syi-sync__actions { margin-top: 14px; }
.syi-sync__cover-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 14px; }
.syi-sync__cover-card { align-items: center; background: #f5f5f7; border-radius: 14px; cursor: pointer; display: grid; gap: 12px; grid-template-columns: auto 64px minmax(0, 1fr); padding: 10px 12px; }
.syi-sync__cover-card img { border-radius: 8px; height: 64px; object-fit: cover; width: 64px; }
.syi-sync__cover-card span { display: grid; min-width: 0; }
.syi-sync__cover-card strong, .syi-sync__cover-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-sync__cover-card small { color: var(--syi-muted); font-size: 12px; }
.syi-sync__cover-source a { color: var(--syi-blue, #0071e3); text-decoration: none; }
.syi-sync__cover-source a:hover { text-decoration: underline; }
.syi-sync__convert-stop { margin: 6px 0 0; }
@media (max-width: 560px) { .syi-sync__edit-grid { grid-template-columns: 1fr; } }

/* --- unlock (tappa 5) ---------------------------------------------------------- */
.syi-sync__unlock-form { align-items: end; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.syi-sync__unlock-form[hidden], .syi-sync__unlock-open[hidden] { display: none; }
.syi-sync__unlock-form label { display: grid; gap: 6px; }
.syi-sync__unlock-form span { color: var(--syi-muted); font-size: 12px; }
.syi-sync__unlock-form input { background: #f5f5f7; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: 18px; letter-spacing: .08em; padding: 11px 14px; text-transform: uppercase; width: min(320px, 70vw); }
.syi-sync__unlock-form input:focus { border-color: var(--syi-blue); outline: none; }
.syi-sync__unlock-form .syi-sync__primary { padding: 12px 22px; }
.syi-sync__unlock-open { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.syi-sync__unlock-open p { color: #237a3d; font-weight: 650; margin: 0; }
.syi-sync__unlock .syi-sync__export-status { margin-top: 12px; text-align: left; }
.syi-sync__badge--demo { background: #eef5ff; color: var(--syi-blue); cursor: pointer; }

/* --- help (tappa 6) ---------------------------------------------------------------- */
.syi-sync__faq { margin: 34px auto 0; max-width: 860px; }
.syi-sync__faq h2 { font-size: 28px; margin-bottom: 14px; }
.syi-sync__faq details { border-top: 1px solid var(--syi-line); padding: 14px 4px; }
.syi-sync__faq details:last-child { border-bottom: 1px solid var(--syi-line); }
.syi-sync__faq summary { cursor: pointer; font-size: 17px; font-weight: 650; list-style: none; padding-right: 28px; position: relative; }
.syi-sync__faq summary::-webkit-details-marker { display: none; }
.syi-sync__faq summary::after { color: var(--syi-blue); content: "+"; font-size: 22px; font-weight: 400; position: absolute; right: 4px; top: -4px; }
.syi-sync__faq details[open] summary::after { content: "–"; }
.syi-sync__faq p { color: var(--syi-muted); font-size: 15px; line-height: 1.55; margin: 10px 0 0; }
.syi-sync__app .syi-sync__faq { margin: 0; }

/* --- listening (phase 2): radio, podcasts, YouTube --------------------------------- */
.syi-listen__bar { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.syi-listen__bar label { display: grid; gap: 4px; }
.syi-listen__bar label span { color: var(--syi-muted); font-size: 12px; }
.syi-listen__bar select, .syi-listen__search input, .syi-listen__key input { background: #f5f5f7; border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: 14px; padding: 9px 12px; }
.syi-listen__search { display: flex; flex: 1; gap: 8px; min-width: 240px; }
.syi-listen__search input[type=search] { flex: 1; min-width: 0; }
.syi-listen__key { flex-basis: 100%; }
.syi-listen__key input { max-width: 420px; }
.syi-listen .syi-sync__secondary { padding: 9px 14px; }
.syi-listen__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.syi-listen__chip { background: #f5f5f7; border: 0; border-radius: 999px; color: var(--syi-ink); cursor: pointer; font-size: 13px; padding: 6px 12px; }
.syi-listen__chip:hover { background: rgba(0, 113, 227, .12); color: var(--syi-blue); }
.syi-listen__status { margin: 10px 0 0; text-align: left; }
.syi-listen__list { display: grid; gap: 2px; margin-top: 8px; }
.syi-listen__row { align-items: center; border-bottom: 1px solid rgba(29, 29, 31, .06); display: grid; gap: 12px; grid-template-columns: 24px 44px minmax(0, 1fr) auto; padding: 8px 4px; }
.syi-listen__row:hover { background: #f6f9fe; }
.syi-listen__row .syi-tracks__play { margin: 0; opacity: 1; }
.syi-listen__row .syi-tracks__play.is-open::before { border-bottom: 5px solid transparent; border-left: 8px solid currentColor; border-top: 5px solid transparent; }
.syi-listen__art { background: linear-gradient(145deg, #e8e8ed, #d2d2d7) center / cover no-repeat; border-radius: 8px; height: 44px; width: 44px; }
.syi-listen__words { display: grid; min-width: 0; }
.syi-listen__words strong, .syi-listen__words small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-listen__words small { color: var(--syi-muted); font-size: 12px; }
.syi-listen__star { background: none; border: 0; color: #f29900; cursor: pointer; font-size: 20px; padding: 4px 8px; }
.syi-listen__show { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.syi-listen__show h3 { flex: 1; font-size: 19px; margin: 0; min-width: 160px; }
.syi-listen__video { background: #000; border-radius: 14px; margin-top: 14px; max-width: 720px; overflow: hidden; }
.syi-listen__video[hidden] { display: none; }
.syi-listen__video-box { aspect-ratio: 16 / 9; width: 100%; }
.syi-listen__video-box iframe { border: 0; height: 100%; width: 100%; }
.syi-listen__video-bar { align-items: center; background: #1d1d1f; color: #fff; display: flex; gap: 10px; justify-content: space-between; padding: 8px 12px; }
.syi-listen__video-bar span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-player.is-live .syi-player__timeline input { visibility: hidden; }
.syi-player.is-live .syi-player__timeline span:last-child { color: #d93025; font-weight: 700; }

/* --- sound, lyrics (phase 2) ------------------------------------------------------------ */
.syi-sound select { background: #f5f5f7; border: 1px solid transparent; border-radius: 10px; font: inherit; padding: 9px 12px; width: 100%; }
.syi-sound h3 { margin-top: 10px; }
.syi-sound__toggle { align-items: center; display: flex; font-weight: 600; gap: 8px; margin-top: 12px; }
.syi-listen__chip.is-on { background: var(--syi-blue); color: #fff; }
.syi-player__lyrics { font-size: 18px; }
.syi-lyrics { background: rgba(251, 251, 253, .98); border: 1px solid var(--syi-line); border-radius: 16px; bottom: 84px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: min(60vh, 520px); position: absolute; right: 18px; width: min(420px, 46%); z-index: 7; }
.syi-lyrics[hidden] { display: none; }
.syi-lyrics__bar { align-items: center; border-bottom: 1px solid var(--syi-line); display: flex; gap: 10px; justify-content: space-between; padding: 10px 14px; }
.syi-lyrics__bar strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syi-lyrics__bar button { background: none; border: 0; cursor: pointer; font-size: 20px; }
.syi-lyrics__text { overflow-y: auto; padding: 12px 16px 18px; }
.syi-lyrics__text p { color: var(--syi-muted); font-size: 15px; line-height: 1.45; margin: 0 0 8px; transition: color .2s ease; }
.syi-lyrics__text p.is-now { color: var(--syi-ink); font-weight: 700; }
@media (max-width: 860px) { .syi-lyrics { bottom: 120px; left: 12px; right: 12px; width: auto; } }

/* nano: restore a library copy (.zip) right under the status when the nano lost its library. */
.syi-sync__zip-rescue { margin: 12px 0 0; }
.syi-sync__zip-card { margin-top: 16px; }

/* The simpler add-music path (1/11): button in the bar, code asked in place, steps after a change. */
.syi-sync__topbar .syi-sync__add-music { box-shadow: none; flex: none; padding: 9px 16px; width: auto; }
.syi-sync__topbar .syi-sync__add-music[hidden] { display: none; }
.syi-sync__inline-unlock { background: #f5f5f7; border-radius: 18px; margin-top: 18px; padding: 18px 20px; }
.syi-sync__inline-unlock[hidden] { display: none; }
.syi-sync__inline-unlock p { color: var(--syi-muted); font-size: 15px; line-height: 1.45; margin: 0 0 12px; }
.syi-sync__inline-unlock .syi-sync__primary { box-shadow: none; padding: 11px 20px; width: auto; }
.syi-sync__upload .syi-sync__identify { margin-top: 18px; }
.syi-sync__write-note { color: var(--syi-muted); font-size: 13px; line-height: 1.45; margin: 16px 0 0; max-width: 640px; }
.syi-sync__write-note:empty { display: none; }
.syi-sync__notice { background: #f5f5f7; border-left: 4px solid var(--syi-blue); border-radius: 14px; margin: 0 0 16px; padding: 14px 18px; }
.syi-sync__notice[hidden] { display: none; }
.syi-sync__notice.is-ok { background: #eef8f0; border-left-color: #1f9d55; }
.syi-sync__notice.is-warn { background: #fff4e5; border-left-color: #c46a00; }
.syi-sync__notice p { font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0; }
.syi-sync__notice ol { font-size: 15px; line-height: 1.5; margin: 6px 0 0; padding-left: 22px; }
.syi-sync__notice-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.syi-sync__notice-actions .syi-sync__primary { box-shadow: none; padding: 10px 18px; width: auto; }
.syi-sync__notice-actions .syi-sync__link { background: none; border: 0; color: var(--syi-blue); cursor: pointer; font: inherit; font-size: 14px; padding: 6px; }
.syi-sync__main.is-drop { outline: 2px dashed var(--syi-blue); outline-offset: -6px; }
@media (max-width: 860px) {
  .syi-sync__topbar .syi-sync__add-music { order: 2; }
  .syi-sync__notice { padding: 12px 14px; }
}
.syi-sync__tidy { margin-top: 16px; }
.syi-sync__tidy[hidden] { display: none; }
.syi-sync__tidy-splits { display: grid; gap: 6px; margin: 12px 0; max-height: 280px; overflow-y: auto; }
.syi-sync__tidy-splits[hidden] { display: none; }
.syi-sync__tidy-split { align-items: flex-start; display: flex; gap: 10px; }
.syi-sync__tidy-split span { display: grid; gap: 2px; min-width: 0; }
.syi-sync__tidy-split small { color: var(--syi-muted); font-size: 12px; overflow-wrap: anywhere; }
.syi-sync__tidy .syi-sync__primary { box-shadow: none; padding: 11px 18px; width: auto; }
.syi-sync__lyrics-option { align-items: flex-start; color: var(--syi-ink); display: flex; font-size: 14px; gap: 8px; line-height: 1.45; margin: 16px 0 0; max-width: 640px; }
.syi-sync__lyrics-option[hidden] { display: none; }
.syi-sync__lyrics-option input { flex: none; margin-top: 3px; }
.syi-sync__upload-choose { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.syi-sync__upload-choose [hidden] { display: none; }
.syi-listen__to-ipod { flex: none; white-space: nowrap; }
.syi-sync__tidy-status { grid-column: 1 / -1; margin: 0; }
.syi-sync__tidy-status:empty { display: none; }
.syi-sync__notice-restore { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 10px; }
.syi-sync__notice-restore[hidden] { display: none; }
.syi-sync__zip-rescue { display: flex; flex-wrap: wrap; gap: 10px; }
.syi-sync__zip-rescue[hidden] { display: none; }
/* A card never wider than its column (long names in «Numeri e pulizia» pushed it past 390 px). */
.syi-sync__backup-grid > * { min-width: 0; }
@media (max-width: 760px) { .syi-sync__backup-grid { grid-template-columns: minmax(0, 1fr); } }
.syi-sync__browser-switch { align-items: center; color: var(--syi-muted); display: flex; flex-wrap: wrap; font-size: 14px; gap: 10px; margin: -12px 0 20px; }
.syi-sync__browser-switch[hidden] { display: none; }
.syi-sync__status.is-partial .syi-sync__status-dot { background: #c46a00; box-shadow: 0 0 0 5px rgba(196, 106, 0, .12); }
.syi-sync__trial-line { color: var(--syi-ink) !important; font-weight: 600; }
.syi-sync__trial-ask { font-size: 14px; margin: 10px 0 0 !important; }
.syi-sync__trial-ask a { color: var(--syi-blue); font-weight: 600; }
.syi-sync__badge--demo { background: #e8f2fd; color: var(--syi-blue); }

/* Icons, «What you can do», the three steps (1/11/2026: «abbellire la pagina con più icone»). */
.syi-sync__ico { flex: none; height: 20px; width: 20px; }
.syi-sync__side button { justify-content: flex-start; }
.syi-sync__side button > span { flex: 1; min-width: 0; }
.syi-sync__side button .syi-sync__ico { color: var(--syi-muted); height: 18px; width: 18px; }
.syi-sync__side button.is-active .syi-sync__ico { color: var(--syi-blue); }
.syi-sync__topbar .syi-sync__add-music { align-items: center; display: inline-flex; gap: 6px; }
.syi-sync__topbar .syi-sync__add-music .syi-sync__ico { height: 18px; width: 18px; }
.syi-sync__card--privacy .syi-sync__icon .syi-sync__ico { height: 22px; width: 22px; }
.syi-sync__steps { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 26px; }
.syi-sync__step { align-items: flex-start; background: #fff; border: 1px solid var(--syi-line); border-radius: 18px; display: flex; gap: 14px; padding: 18px 18px; }
.syi-sync__step h3 { font-size: 16px; margin: 2px 0 4px; }
.syi-sync__step p { color: var(--syi-muted); font-size: 14px; line-height: 1.45; margin: 0; }
.syi-sync__step-icon { align-items: center; background: rgba(0, 113, 227, .1); border-radius: 14px; color: var(--syi-blue); display: flex; flex: none; height: 46px; justify-content: center; position: relative; width: 46px; }
.syi-sync__step-icon .syi-sync__ico { height: 24px; width: 24px; }
.syi-sync__step-icon b { align-items: center; background: var(--syi-blue); border: 2px solid #fff; border-radius: 50%; color: #fff; display: flex; font-size: 11px; height: 20px; justify-content: center; position: absolute; right: -6px; top: -6px; width: 20px; }
.syi-sync__features { margin: 0 0 30px; }
.syi-sync__features-head h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; margin: 0 0 6px; }
.syi-sync__features-head p { color: var(--syi-muted); font-size: 16px; margin: 0 0 18px; }
.syi-sync__features-cols { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.syi-sync__features-col { background: #f5f5f7; border-radius: 22px; padding: 22px 22px 10px; }
.syi-sync__features-col.is-full { background: linear-gradient(160deg, #eef5ff 0%, #f7f9fc 70%); border: 1px solid rgba(0, 113, 227, .18); }
.syi-sync__features-label { align-items: center; display: flex; flex-wrap: wrap; font-size: 13px; font-weight: 700; gap: 8px; letter-spacing: .04em; margin: 0 0 14px; text-transform: uppercase; }
.syi-sync__features-col.is-free .syi-sync__features-label { color: #1f9d55; }
.syi-sync__features-col.is-full .syi-sync__features-label { color: var(--syi-blue); }
.syi-sync__features-trial { background: var(--syi-blue); border-radius: 999px; color: #fff; font-size: 11px; letter-spacing: 0; padding: 3px 10px; text-transform: none; }
.syi-sync__features ul { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0 0 12px; }
.syi-sync__features li { align-items: flex-start; display: flex; gap: 12px; }
.syi-sync__features li div { display: grid; gap: 2px; min-width: 0; }
.syi-sync__features li strong { font-size: 15px; }
.syi-sync__features li div span { color: var(--syi-muted); font-size: 14px; line-height: 1.4; }
.syi-sync__feature-icon { align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); color: var(--syi-blue); display: flex; flex: none; height: 38px; justify-content: center; width: 38px; }
.syi-sync__features-col.is-free .syi-sync__feature-icon { color: #1f9d55; }
@media (max-width: 860px) {
  .syi-sync__steps, .syi-sync__features-cols { grid-template-columns: minmax(0, 1fr); }
  .syi-sync__side button .syi-sync__ico { display: none; }
}
@media (min-width: 861px) { .syi-sync__info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.syi-sync__notice p, .syi-sync__notice ol { color: var(--syi-ink); }
.syi-sync__models { display: grid; gap: 9px; list-style: none; margin: 4px 0 12px; padding: 0; }
.syi-sync__models li { align-items: flex-start; display: flex; font-size: 14px; gap: 10px; line-height: 1.4; }
.syi-sync__models li > span { align-items: center; border-radius: 50%; display: flex; flex: none; font-size: 12px; font-weight: 700; height: 22px; justify-content: center; width: 22px; }
.syi-sync__models li.is-yes > span { background: #e7f6ec; color: #1f9d55; }
.syi-sync__models li.is-read > span { background: #fff4e5; color: #c46a00; }
.syi-sync__models li.is-no > span { background: #f0f0f2; color: #86868b; }
.syi-sync__models li div { color: var(--syi-muted); }
.syi-sync__models li strong { color: var(--syi-ink); font-weight: 600; }
.syi-sync__models li.is-no strong { color: var(--syi-muted); }
.syi-sync__models-legend { color: var(--syi-muted); font-size: 12px; margin: 0; }
.syi-sync__queue-fields input.is-suggested { background: #eef5ff; border-color: rgba(0, 113, 227, .45); box-shadow: 0 0 0 2px rgba(0, 113, 227, .12); }
/* The full version: price, button, request window. */
.syi-sync__features-buy { align-items: center; border-top: 1px solid rgba(0, 113, 227, .15); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 4px 0 12px; padding-top: 14px; }
.syi-sync__features-buy strong { font-size: 18px; }
.syi-sync__premium-button { box-shadow: none !important; padding: 11px 20px !important; width: auto !important; }
.syi-sync__premium-line { align-items: center; border-top: 1px solid var(--syi-line); display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: space-between; margin-top: 14px; padding-top: 12px; }
.syi-sync__premium-line p { color: var(--syi-ink) !important; flex: 1 1 260px; font-size: 14px; margin: 0 !important; }
.syi-sync__request { border: 0; border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); max-width: 460px; padding: 26px 26px 20px; width: calc(100vw - 32px); }
.syi-sync__request::backdrop { background: rgba(0, 0, 0, .35); }
.syi-sync__request h2 { font-size: 22px; margin: 0 0 12px; }
.syi-sync__request ul { display: grid; gap: 6px; margin: 0 0 12px; padding-left: 20px; }
.syi-sync__request-how { color: var(--syi-muted); font-size: 14px; margin: 0 0 14px; }
.syi-sync__request label { color: var(--syi-muted); display: grid; font-size: 13px; gap: 6px; margin-bottom: 12px; }
.syi-sync__request input, .syi-sync__request textarea { border: 1px solid var(--syi-line); border-radius: 12px; font: inherit; font-size: 16px; padding: 10px 12px; }
.syi-sync__request [hidden] { display: none; }
.syi-sync__request-status { font-size: 14px; margin: 0 0 10px; min-height: 1em; }
.syi-sync__request-status.is-done { color: #1f9d55; font-weight: 600; }
.syi-sync__hp { height: 1px; left: -9999px; position: absolute; width: 1px; }

/* The welcome page's iPod classic, drawn to its real measurements (61.8 × 103.5 mm; 2.5" 4:3 screen 7 mm from the
   top; click wheel 37 mm across, its centre 73 mm down; centre button 15 mm): the owner found the old one too wide. */
.syi-sync .syi-sync__device { aspect-ratio: 61.8 / 103.5; background: linear-gradient(150deg, #f4f4f5 0%, #e3e4e6 42%, #c9cacd 100%); border: 1px solid rgba(0, 0, 0, .14); border-radius: 9.7% / 5.8%; box-shadow: 0 38px 70px rgba(0, 0, 0, .18), inset 0 1px 1px #fff, inset 0 -2px 6px rgba(0, 0, 0, .06); container-type: inline-size; height: auto; max-width: 250px; padding: 0; transform: rotate(-4deg); width: 100%; }
.syi-sync .syi-sync__screen { background: #0e0f11; border: 0; border-radius: 1.6cqw; height: auto; left: 8.4%; padding: 2.4cqw; position: absolute; right: 8.4%; top: 6.8%; }
.syi-sync .syi-sync__screen-bar, .syi-sync .syi-sync__screen ul { background: #fff; }
.syi-sync .syi-sync__screen-bar { align-items: center; background: linear-gradient(#fdfdfd, #d9dadc); border-bottom: 1px solid #a9abaf; color: #1d1d1f; display: flex; font-size: 4.6cqw; font-weight: 700; height: 9cqw; justify-content: center; position: relative; }
.syi-sync .syi-sync__screen-bar span { display: block; font-size: inherit; margin: 0; opacity: 1; }
.syi-sync .syi-sync__screen-bar i { background: linear-gradient(90deg, #5bd25b 70%, #fff 70%); border: 1px solid #555; border-radius: 1px; height: 3.2cqw; bottom: auto; left: auto; position: absolute; right: 2.2cqw; top: 2.8cqw; width: 7.5cqw; }
.syi-sync .syi-sync__screen ul { aspect-ratio: 4 / 2.55; display: flex; flex-direction: column; justify-content: space-evenly; list-style: none; margin: 0; overflow: hidden; padding: 0; }
.syi-sync .syi-sync__screen li { color: #1d1d1f; font-size: 4.9cqw; font-weight: 600; line-height: 1; padding: 1.3cqw 3cqw; white-space: nowrap; }
.syi-sync .syi-sync__screen li.is-on { background: linear-gradient(#54a5f5, #1c6fd6); color: #fff; position: relative; }
.syi-sync .syi-sync__screen li.is-on::after { content: "›"; position: absolute; right: 3cqw; }
.syi-sync .syi-sync__wheel { aspect-ratio: 1; background: linear-gradient(160deg, #fbfbfb, #ececee); border: 1px solid rgba(0, 0, 0, .12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); height: auto; left: 20%; margin: 0; position: absolute; top: 52.7%; width: 60%; }
.syi-sync .syi-sync__wheel b, .syi-sync .syi-sync__wheel span { color: #9a9b9f; font-size: 4.2cqw; font-weight: 700; }
.syi-sync .syi-sync__wheel b { top: 8%; }
.syi-sync .syi-sync__wheel span:nth-of-type(1) { left: 7%; top: 50%; transform: translateY(-50%); }
.syi-sync .syi-sync__wheel span:nth-of-type(2) { right: 7%; top: 50%; transform: translateY(-50%); }
.syi-sync .syi-sync__wheel span:nth-of-type(3) { bottom: 8%; }
.syi-sync .syi-sync__wheel i { height: 40.5%; left: 29.75%; top: 29.75%; width: 40.5%; }
@media (max-width: 1180px) { .syi-sync .syi-sync__device { height: auto; max-width: 230px; } .syi-sync .syi-sync__screen { height: auto; } .syi-sync .syi-sync__wheel { height: auto; width: 60%; } .syi-sync .syi-sync__wheel i { height: 40.5%; left: 29.75%; top: 29.75%; width: 40.5%; } }

/* «Esporta in cartella»: the bar under the library's title while songs are copied. */
.syi-sync .syi-sync__export-progress { margin: 0 0 14px; }

/* «Salva la musica del tuo iPod»: the free export, between what you can do and the supported iPods. */
.syi-sync .syi-sync__rescue { background: #fff; border: 1px solid #e5e5ea; border-radius: 22px; margin: 28px 0; padding: 28px; }
.syi-sync .syi-sync__rescue .syi-sync__eyebrow { margin-bottom: 4px; }
.syi-sync .syi-sync__rescue-head h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; margin: 4px 0 8px; }
.syi-sync .syi-sync__rescue-head > p:last-child { color: #6e6e73; margin: 0 0 18px; max-width: 720px; }
.syi-sync .syi-sync__rescue ul { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.syi-sync .syi-sync__rescue li { align-items: flex-start; display: flex; gap: 12px; }
.syi-sync .syi-sync__rescue li strong { display: block; margin-bottom: 2px; }
.syi-sync .syi-sync__rescue li span:not(.syi-sync__feature-icon) { color: #6e6e73; font-size: 14px; }
.syi-sync .syi-sync__rescue-how { background: #f5f5f7; border-radius: 12px; font-size: 14px; margin: 18px 0 0; padding: 12px 14px; }
@media (max-width: 760px) { .syi-sync .syi-sync__rescue { padding: 20px 16px; } .syi-sync .syi-sync__rescue ul { grid-template-columns: 1fr; } }

/* «Il tuo iPod in numeri»: name and count on one line inside the card (the floated count stuck out by 26 px). */
.syi-sync .syi-sync__stat-lists, .syi-sync .syi-sync__stat-list { min-width: 0; }
.syi-sync .syi-sync__stat-list ol { counter-reset: syi-stat; list-style: none; padding-left: 0; }
.syi-sync .syi-sync__stat-list li { align-items: baseline; counter-increment: syi-stat; display: flex; gap: 10px; }
.syi-sync .syi-sync__stat-list li::before { color: var(--syi-muted); content: counter(syi-stat) "."; flex: none; min-width: 18px; }
.syi-sync .syi-sync__stat-list li span { flex: 1; max-width: none; min-width: 0; }
.syi-sync .syi-sync__stat-list li em { flex: none; float: none; }

/* «What do you want to do?» (start-ui.js): large task cards, each with its line and whether it is free. */
.syi-sync__main[data-active="start"] { background: #fbfbfd; }
.syi-sync__tasks { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
.syi-sync__task { align-items: flex-start; background: #fff; border: 1px solid var(--syi-line); border-radius: 18px; color: var(--syi-ink); cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-height: 178px; padding: 20px; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.syi-sync__task:hover:not(:disabled) { border-color: rgba(0, 113, 227, .45); box-shadow: 0 14px 34px rgba(0, 0, 0, .07); transform: translateY(-1px); }
.syi-sync__task strong { font-size: 17px; letter-spacing: -.01em; line-height: 1.25; }
.syi-sync__task-text { color: var(--syi-muted); font-size: 14px; line-height: 1.45; }
.syi-sync__task-icon { align-items: center; background: rgba(0, 113, 227, .1); border-radius: 12px; color: var(--syi-blue); display: inline-flex; height: 40px; justify-content: center; width: 40px; }
.syi-sync__task-icon svg { height: 22px; width: 22px; }
.syi-sync__task-badge { border-radius: 999px; font-size: 12px; font-weight: 650; margin-top: auto; padding: 4px 10px; }
.syi-sync__task-badge[data-tone="free"] { background: rgba(35, 122, 61, .1); color: #237a3d; }
.syi-sync__task-badge[data-tone="code"] { background: rgba(0, 113, 227, .1); color: var(--syi-blue); }
.syi-sync__task-badge[data-tone="off"] { background: #f5f5f7; color: var(--syi-muted); }
.syi-sync button.syi-sync__task:disabled { opacity: 1; }
.syi-sync__task.is-off { background: #f5f5f7; }
.syi-sync__task.is-off strong, .syi-sync__task.is-off .syi-sync__task-icon { opacity: .55; }
.syi-sync__start-code { align-items: center; border-top: 1px solid var(--syi-line); display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; margin-top: 24px; padding-top: 20px; }
.syi-sync__start-code p { color: var(--syi-muted); flex: 1 1 360px; font-size: 14px; line-height: 1.5; margin: 0; }
.syi-sync__start-code .syi-sync__actions { gap: 10px; margin-top: 0; }
.syi-sync__start-code .syi-sync__primary { padding: 11px 18px; }
/* «Save the iPod's music»: the button to press, pointed out for a moment, and what happens next. */
.syi-sync__hint { background: rgba(0, 113, 227, .08); border-radius: 12px; color: var(--syi-ink); flex: none; font-size: 14px; line-height: 1.45; margin: 0 0 14px; padding: 12px 14px; }
.syi-sync .is-hint { animation: syi-start-hint 1.2s ease-in-out 3; box-shadow: 0 0 0 4px rgba(0, 113, 227, .28); }
@keyframes syi-start-hint { 50% { box-shadow: 0 0 0 9px rgba(0, 113, 227, .12); } }
@media (prefers-reduced-motion: reduce) { .syi-sync .is-hint { animation: none; } }
@media (max-width: 1000px) { .syi-sync__tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .syi-sync__tasks { gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .syi-sync__task { display: grid; gap: 4px 12px; grid-template-columns: 40px minmax(0, 1fr); min-height: 0; padding: 14px; }
  .syi-sync__task-icon { grid-row: span 3; }
  .syi-sync__task-badge { justify-self: start; margin-top: 4px; }
  .syi-sync__start-code .syi-sync__actions { align-items: stretch; flex-direction: column; width: 100%; }
}

/* The limited version (7/11/2026): what is left for this iPod, «Richiedi il codice», always in sight. */
.syi-sync__limited { align-items: center; background: #fff8e6; border-bottom: 1px solid #f5d27a; display: flex; flex-wrap: wrap; gap: 8px 16px; grid-area: limited; justify-content: space-between; padding: 8px 16px; }
.syi-sync__limited[hidden] { display: none; }
.syi-sync__limited p { color: #1d1d1f; font-size: 14px; margin: 0; min-width: 0; flex: 1 1 260px; }
.syi-sync__limited-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.syi-sync__limited-actions .syi-sync__primary { min-height: 36px; padding: 6px 16px; }
@media (max-width: 600px) { .syi-sync__limited { gap: 6px 12px; padding: 8px 12px; } .syi-sync__limited p { flex-basis: 100%; font-size: 13px; } .syi-sync__limited-actions .syi-sync__primary { min-height: 32px; padding: 4px 14px; } }

/* Phones: the app, said first and plainly; no button that cannot work (owner, 7/11/2026). */
.syi-sync__phone-box { background: #f5f5f7; border-radius: 18px; margin: 0 0 20px; padding: 20px; }
.syi-sync__phone-box[hidden] { display: none; }
.syi-sync__phone-box h2 { font-size: 22px; line-height: 1.2; margin: 0 0 8px; }
.syi-sync__phone-box p { color: #1d1d1f; font-size: 15px; margin: 0 0 10px; }
.syi-sync__phone-box .syi-sync__phone-computer { color: var(--syi-muted); font-size: 14px; }
.syi-sync__phone-box .syi-sync__primary { display: inline-flex; justify-content: center; margin-top: 4px; text-decoration: none; }
.syi-sync.is-handheld .syi-sync__start-button, .syi-sync.is-handheld .syi-sync__computer-link, .syi-sync.is-handheld .syi-sync__quick-steps { display: none; }
@media (max-width: 600px) { .syi-sync__phone-box .syi-sync__primary { width: 100%; } }
/* Brave: the steps to switch folder access on. */
.syi-sync__brave { background: #fff8e6; border: 1px solid #f5d27a; border-radius: 14px; margin: 12px 0; padding: 14px 18px; }
.syi-sync__brave[hidden] { display: none; }
.syi-sync__brave h3 { font-size: 17px; margin: 0 0 8px; }
.syi-sync__brave ol { margin: 0 0 8px; padding-left: 22px; }
.syi-sync__brave li { margin: 4px 0; }
.syi-sync__brave code { background: #fff; border: 1px solid var(--syi-line); border-radius: 6px; font-size: 13px; overflow-wrap: anywhere; padding: 2px 6px; user-select: all; }
.syi-sync__brave .syi-sync__secondary { margin-left: 4px; min-height: 30px; padding: 3px 12px; }
.syi-sync__brave p { color: var(--syi-muted); font-size: 14px; margin: 0; }