/* «Δες πώς δουλεύει» (v2.92.1): το κουμπί στην εφαρμογή, και η ξενάγηση με δείγμα δεδομένων
   (js/demo-tour.js). Μόνο tokens του θέματος, φωτεινό και σκοτεινό. */

/* ---- Το κουμπί, πάντα κοντά: στη θέση .u-demo-slot της πάνω μπάρας (εικονίδιο play δίπλα στο
   λογότυπο, σε υπολογιστή και κινητό), και ολόκληρη η ετικέτα στο «Περισσότερα» του κινητού ---- */
.u-demo-btn svg { color: var(--blue); }
.u-demo-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sidebar-top .u-demo-round {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--blue-tint); border: 1px solid var(--blue-tint-2);
}
.sidebar-top .u-demo-round:hover { background: var(--blue-tint-2); }
.sidebar-top .u-demo-round svg { width: 18px; height: 18px; }
/* Στο κινητό το εικονίδιο πιάνει 44px στην πάνω μπάρα. Ίδιος κανόνας με το app.css: όταν η λέξη
   του λογότυπου δεν χωρά ολόκληρη, κρύβεται ολόκληρη και μένει το σήμα (check-mobile-overflow).
   Τα όρια είναι τα όρια του app.css συν το κουμπί: χωρίς τίποτα, με «Πίσω», με το σήμα του
   Μέντορα, με τα δύο. */
@media (max-width: 368px) {
  .mobile-topbar:has(.u-demo-slot .u-demo-btn) .logo-word { display: none; }
}
@media (max-width: 400px) {
  .mobile-topbar:has(.u-demo-slot .u-demo-btn):has(.mt-back:not([hidden])) .logo-word { display: none; }
}
@media (max-width: 418px) {
  .mobile-topbar.mt-has-jobs:has(.u-demo-slot .u-demo-btn) .logo-word { display: none; }
}
@media (max-width: 448px) {
  .mobile-topbar.mt-has-jobs:has(.u-demo-slot .u-demo-btn):has(.mt-back:not([hidden])) .logo-word { display: none; }
}
.u-sheet-item.u-sheet-demo { color: var(--blue-deep); font-weight: 650; }
.u-sheet-item.u-sheet-demo svg { color: var(--blue); }
/* Η πλαϊνή στήλη (v2.92.3): με λέξη, πρώτο στην κάτω ομάδα, με μπλε εικονίδιο. */
.nav-item.u-demo-nav { color: var(--blue-deep); font-weight: 650; }
.nav-item.u-demo-nav svg { color: var(--blue); }

/* ---- «Πρώτη φορά εδώ;» στην Αρχική (v2.92.3): μία ήρεμη γραμμή, ένα κουμπί, ένα «x» ---- */
.hm-demo {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 8px 10px 14px;
  border: 1px solid var(--blue-tint-2); border-radius: 16px; background: var(--blue-tint);
}
.hm-demo .u-ico { flex: none; background: var(--card); color: var(--blue); }
.hm-demo .u-main { flex: 1; min-width: 0; }
.hm-demo .u-title { font-weight: 650; color: var(--ink); }
.hm-demo .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.hm-demo .btn svg { width: 14px; height: 14px; }
.hm-demo-x { flex: none; width: 40px; height: 40px; color: var(--ink-soft); }
.hm-demo.hm-demo-out { opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s ease; }
@media (max-width: 520px) {
  .hm-demo { flex-wrap: wrap; row-gap: 8px; }
  .hm-demo .u-main { flex-basis: calc(100% - 110px); }
  .hm-demo .btn { margin-left: 52px; }
}

/* ---- Ο Οδηγός (v2.92.4): τα πέντε demo πρώτα ---- */
.gd-demos { margin: 0 0 22px; }
/* Δύο στήλες, με το πρώτο (το δικό σου) σε όλο το πλάτος από πάνω: 1 + 2 + 2. Πέντε δίπλα δίπλα
   μόνο όπου χωρούν άνετα, μία στήλη στο κινητό. */
.gd-demos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gd-demos-grid > .gd-demo:first-child { grid-column: 1 / -1; }
@media (min-width: 1560px) {
  .gd-demos-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gd-demos-grid > .gd-demo:first-child { grid-column: auto; }
}
@media (max-width: 600px) { .gd-demos-grid { grid-template-columns: minmax(0, 1fr); } }
.gd-demo {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 12px 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.gd-demo:hover { border-color: var(--blue-tint-2); background: var(--blue-tint); }
.gd-demo:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.gd-demo .u-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gd-demo .u-title { font-weight: 650; }
.gd-demo .u-meta { color: var(--ink-soft); font-size: 13px; }
.gd-demo.mine { border-color: var(--blue-tint-2); }
.gd-demo-play { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); }
.gd-demo-play svg { width: 14px; height: 14px; }
.gd-mine { display: inline-block; white-space: nowrap; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--blue-tint); color: var(--blue-deep); vertical-align: 1px; }
html.dt-on .hm-demo, html.dt-on .gd-demos { display: none !important; }

/* ---- Η αρχική σελίδα (v2.92.3, πέντε από τη v2.92.4): «Δες το στην πράξη», τα demo πάνω στην ταινία ----
   Διάφανο όπως όλη η σελίδα κάτω από το hero: μόνο κείμενο, τα εικονίδια σε θολό τζάμι και ένα
   λευκό «Δες το». Η ζώνη έχει το ΙΔΙΟ ύψος με το «Δικό σου» που αντικατέστησε (130svh, και στα
   320px το ύψος που είχε εκείνο), γιατί το μήκος της σελίδας ορίζει πόσο γρήγορα κυλά η ταινία
   (hero-scrub.js). Το scripts/check-demo.js το μετρά σε επτά πλάτη, στα ελληνικά και στα αγγλικά. */
/* v2.92.4: πέντε demo. Πέντε στήλες στον υπολογιστή, τρία και δύο κεντραρισμένα στο tablet, μία
   γραμμή το καθένα στο κινητό. Το ύψος της ζώνης μένει ίδιο (το μετρά το check-demo). */
.land-demo-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 40px);
  width: 100%; max-width: 1240px; margin: 0 auto;
}
.landing.has-bg3d .land-demo {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 10px 16px;
  border-radius: 20px; text-align: center; color: #fff; text-decoration: none; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  transition: background 0.18s;
}
.landing.has-bg3d .land-demo:hover { background: rgba(255, 255, 255, 0.08); }
.landing.has-bg3d .land-demo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.land-demo-txt { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.land-demo-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.2; }
.landing.has-bg3d .land-demo-line { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.4; max-width: 24ch; color: rgba(255, 255, 255, 0.9); }
.land-demo-play {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; margin-top: 4px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #17324F; text-shadow: none;
  font-weight: 700; font-size: 15px;
}
.land-demo-play svg { width: 14px; height: 14px; }
/* Σε στήλες, τα «Δες το» στην ίδια ευθεία, όσες γραμμές κι αν έχει η υπόσχεση πάνω τους. */
@media (min-width: 601px) {
  .landing.has-bg3d .land-demo .land-demo-play { margin-top: auto; }
  .landing.has-bg3d .land-demo .land-demo-txt { margin-bottom: 4px; }
}
.landing.has-bg3d .land-demo:hover .land-demo-play { background: #fff; }
@media (max-width: 1000px) {
  .land-demo-grid { display: flex; flex-wrap: wrap; justify-content: center; max-width: 760px; }
  .land-demo-grid > .land-demo { flex: 0 1 calc((100% - 2 * clamp(18px, 2.6vw, 40px)) / 3); min-width: 0; }
}
/* Στο κινητό: μία γραμμή ανά demo, εικονίδιο, δύο γραμμές κειμένου και το «Δες το» δεξιά. */
@media (max-width: 600px) {
  .land-demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .land-demo-grid > .land-demo { flex: none; }
  .landing.has-bg3d .land-demo { flex-direction: row; align-items: center; gap: 12px; padding: 10px 4px; text-align: left; }
  .landing.has-bg3d .land-demo .u-ico { flex: none; }
  .land-demo-txt { flex: 1; min-width: 0; align-items: flex-start; gap: 2px; }
  .land-demo-name { font-size: 18px; }
  .landing.has-bg3d .land-demo-line { font-size: 14px; max-width: none; }
  .land-demo-play { flex: none; padding: 8px 14px; margin: 0; font-size: 14px; }
}
/* Στα πολύ στενά κινητά οι πέντε γραμμές χωρούν στο ίδιο ύψος χωρίς το εικονίδιο του ρόλου: το
   κείμενο παίρνει τον χώρο του και σπάει σε λιγότερες γραμμές. */
@media (max-width: 360px) {
  .landing.has-bg3d .land-demo .u-ico { display: none; }
}
/* Στα 320px το «Δικό σου» ξεπερνούσε τα 130svh με το κείμενό του: 684px περιεχόμενο στα ελληνικά,
   637px στα αγγλικά, συν το padding της ζώνης. Η νέα ζώνη κρατά ακριβώς εκείνο το ύψος (μετρημένο). */
@media (max-width: 340px) {
  .land-demos { min-height: max(130svh, calc(684px + 2 * clamp(64px, 12vh, 140px))); }
  html[lang="en"] .land-demos { min-height: max(130svh, calc(637px + 2 * clamp(64px, 12vh, 140px))); }
}
@media (prefers-reduced-motion: reduce) { .landing.has-bg3d .land-demo { transition: none; } }
html.dt-on [data-act="demo"] { display: none !important; }

/* ---- Η εφαρμογή μικραίνει: λωρίδα «Demo» πάνω, χώρος για τη λεζάντα κάτω ---- */
/* Padding στο #app και όχι margin στο .shell: το margin «περνούσε» στο #app (ύψος 100%) και η
   σελίδα κυλούσε 26px ολόκληρη, με τη λωρίδα πάνω από το λογότυπο. */
html.dt-on { --dt-ribbon: 26px; }
html.dt-on, html.dt-on body { overflow: hidden; }
html.dt-on #app { padding-top: var(--dt-ribbon); box-sizing: border-box; }
html.dt-on .shell { height: calc(100dvh - var(--dt-ribbon) - var(--dt-band, 0px)); }
/* Στο κινητό η λεζάντα κάθεται ΠΑΝΩ από την κάτω μπάρα: μια κενή σειρά στο πλέγμα της κρατά τη θέση. */
@media (max-width: 880px) {
  html.dt-on .shell {
    height: calc(100dvh - var(--dt-ribbon));
    grid-template-rows: auto minmax(0, 1fr) var(--dt-band, 0px) auto;
  }
  html.dt-on .shell > .mobile-topbar { grid-row: 1; }
  html.dt-on .shell > .main { grid-row: 2; }
  html.dt-on .shell > .mobile-nav { grid-row: 4; }
}
/* Όσα κάθονταν στην κάτω άκρη της οθόνης δεν χρειάζονται στο demo ή ανεβαίνουν πάνω από τη λεζάντα. */
html.dt-on #supportBtn, html.dt-on #supportPanel, html.dt-on #toTop { display: none !important; }
/* Η λίστα ανεβασμάτων (κάτω δεξιά) θα έμενε πάνω από τη λεζάντα σε όλα τα επόμενα βήματα: στο
   demo το αρχείο φαίνεται ήδη στη φόρμα που το πήρε. */
html.dt-on #upPanel { display: none !important; }
html.dt-on body .toasts { bottom: calc(var(--dt-band, 0px) + var(--dt-nav-h, 0px) + 14px) !important; }
/* Στο κινητό ο χώρος είναι λίγος: οι επιλογές κάτω από το πλαίσιο του Μέντορα (Βαθιά Έρευνα,
   Επιλογές) περιμένουν ως το τέλος του demo. Η σημείωση για την ΤΝ μένει πάντα. */
@media (max-width: 880px) {
  html.dt-on .wsx-composer .wsx-bar { display: none; }
}
/* Το φύλλο «Αρχεία και συζητήσεις» (tablet, κινητό) σταματά πάνω από τη λεζάντα, όχι πίσω της. */
@media (max-width: 1020px) {
  html.dt-on #wsLayout.show-panel .ws-panel {
    bottom: calc(var(--dt-band, 0px) + var(--dt-nav-h, 0px));
    max-height: calc(100dvh - var(--dt-ribbon) - var(--dt-band, 0px) - var(--dt-nav-h, 0px) - 70px);
    border-radius: 22px 22px 18px 18px;
  }
}

.dt-ribbon {
  position: fixed; top: 0; left: 0; right: 0; height: var(--dt-ribbon, 26px); z-index: 130;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--on-accent);
  font: 600 12px/1 var(--font-ui); letter-spacing: 0.04em;
  padding-top: env(safe-area-inset-top, 0px);
}
.dt-ribbon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---- Ο προβολέας: η σελίδα σκουραίνει γύρω από ένα στοιχείο, με δαχτυλίδι που ανασαίνει ---- */
.dt-spot {
  position: fixed; z-index: 95; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--backdrop);
  outline: 3px solid var(--gold); outline-offset: 2px; opacity: 0;
  transition: left 0.45s var(--ease, ease), top 0.45s var(--ease, ease), width 0.45s var(--ease, ease), height 0.45s var(--ease, ease), opacity 0.3s ease;
}
.dt-spot.on { opacity: 1; }
.dt-spot.on::after {
  content: ""; position: absolute; inset: -9px; border-radius: 18px; border: 2px solid var(--gold);
  animation: dtRing 1.6s ease-out infinite;
}
@keyframes dtRing { from { opacity: 0.9; transform: scale(0.98); } to { opacity: 0; transform: scale(1.05); } }

/* ---- Η μπάρα της λεζάντας: «3 από 11 · Τίτλος», μία πρόταση, πρόοδος, κουμπιά ---- */
.dt-bar {
  position: fixed; z-index: 100; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: min(780px, calc(100vw - 32px)); transform: translateX(-50%) translateY(16px);
  display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 18px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s var(--ease, ease);
}
.dt-bar.on { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
/* Στον υπολογιστή η μπάρα κεντράρεται στη στήλη της σελίδας, όχι πάνω στην πλαϊνή στήλη. */
@media (min-width: 881px) {
  .dt-bar { left: calc(264px + (100vw - 264px) / 2); width: min(880px, calc(100vw - 264px - 40px)); }
}
.dt-text { flex: 1; min-width: 0; }
.dt-kick { font: 650 11.5px/1.3 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.dt-bar.paused .dt-kick { color: var(--ink-faint); }
.dt-say { font: 500 16px/1.4 var(--font-ui); margin-top: 3px; color: var(--ink); text-wrap: balance; }
.dt-prog { height: 3px; border-radius: 3px; margin-top: 10px; background: var(--line-soft); overflow: hidden; }
.dt-prog i { display: block; height: 100%; width: 0; background: var(--brand-grad, var(--accent)); transition: width 0.4s ease; }
.dt-btns { display: flex; gap: 6px; flex: none; }
.dt-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: 600 13px var(--font-ui); white-space: nowrap; cursor: pointer;
}
.dt-btn:hover { background: var(--paper-deep); }
.dt-btn:disabled { opacity: 0.4; cursor: default; }
.dt-btn.dt-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dt-btn.dt-primary:hover { background: var(--accent-hover); }
.dt-btn svg { flex: none; }
.dt-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Στο κινητό: η πρόταση πάνω, τα κουμπιά από κάτω, μόνο εικονίδια (εκτός από το «Επόμενο»). */
@media (max-width: 880px) {
  .dt-bar {
    bottom: calc(var(--dt-nav-h, 0px) + 6px); width: calc(100vw - 16px);
    flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 9px;
  }
  .dt-say { font-size: 15px; margin-top: 2px; }
  .dt-prog { margin-top: 7px; }
  .dt-btns { justify-content: space-between; }
  .dt-btn { min-width: 44px; min-height: 40px; justify-content: center; padding: 0 10px; }
  .dt-btn[data-dt="back"] span, .dt-btn[data-dt="pause"] span, .dt-btn.dt-exit span { display: none; }
  .dt-btn.dt-primary { flex: 1; }
}

/* ---- Η κάρτα του τέλους ---- */
.dt-end {
  position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px;
  background: var(--paper); background-image: var(--page-glow); color: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease; overflow-y: auto;
}
.dt-end.on { opacity: 1; pointer-events: auto; }
.dt-end-in { max-width: 680px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dt-end-k { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--font-ui); color: var(--logo-word); }
.dt-end-k i { color: var(--logo-ai); font-style: normal; }
.dt-end-logo { height: 28px; width: auto; }
.dt-end h2 { margin: 0; font: 600 clamp(32px, 5.4vw, 54px)/1.08 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.dt-end p { margin: 0; color: var(--ink-soft); font-size: 17px; text-wrap: balance; }
.dt-end-pts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dt-end-pts span { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.dt-end-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.dt-end-row .btn { display: inline-flex; align-items: center; gap: 8px; }
.dt-end-link {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer;
  color: var(--ink-soft); font: 500 14px var(--font-ui); padding: 8px 10px; border-radius: 8px;
}
.dt-end-link:hover { color: var(--ink); background: var(--line-soft); }
.dt-end-x {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer;
}
.dt-end-x:hover { color: var(--ink); }
@media (max-width: 520px) {
  .dt-end-row { flex-direction: column; align-self: stretch; }
  .dt-end-row .btn { justify-content: center; }
}
/* Τα άλλα τρία demo: «Δες το ως εκπαιδευτικός», ήσυχα κάτω από τα κουμπιά. */
.dt-end-more { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dt-end-role {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink);
  font: 600 13.5px var(--font-ui); cursor: pointer;
}
.dt-end-role:hover { border-color: var(--blue-tint-2); background: var(--blue-tint); }
.dt-end-role:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dt-end-role-ico { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-tint); color: var(--blue); }
.dt-end-role-ico svg { width: 15px; height: 15px; }
@media (max-width: 520px) { .dt-end-more { flex-direction: column; align-self: stretch; } .dt-end-role { justify-content: center; } }

/* ---- «Ρίχνει τα αρχεία της»: μια κάρτα φακέλου πετά ως τον στόχο ---- */
.dt-fly {
  position: fixed; z-index: 120; left: 0; top: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 14px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); pointer-events: none;
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: transform 1.05s cubic-bezier(0.22, 0.8, 0.26, 1), opacity 0.3s ease;
}
.dt-fly.on { opacity: 1; transform: none; }
.dt-fly.gone { opacity: 0; }
.dt-fly-ico { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-tint); color: var(--blue); flex: none; }
.dt-fly-txt { display: flex; flex-direction: column; line-height: 1.25; }
.dt-fly-txt b { font: 650 14px var(--font-ui); }
.dt-fly-txt small { font: 500 12.5px var(--font-ui); color: var(--ink-soft); }
.dt-drop-glow { outline: 2px dashed var(--blue) !important; outline-offset: 3px; }

/* ---- Η επιλογή demo του ιδρυτικού λογαριασμού ---- */
.dt-pick-back {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px;
  background: var(--backdrop);
}
.dt-pick {
  width: min(460px, 100%); background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-lg); padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.dt-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px 8px; }
.dt-pick-head h3 { margin: 0; font: 650 17px var(--font-ui); }
.dt-pick-x {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dt-pick-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 60px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.dt-pick-row:hover, .dt-pick-row:focus-visible { background: var(--paper-deep); border-color: var(--line); outline: none; }
.dt-pick-row .u-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dt-pick-row .u-title { font-weight: 650; }
.dt-pick-row .u-meta { color: var(--ink-soft); font-size: 13.5px; }
.dt-pick-play { width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); }

/* Λιγότερη κίνηση: χωρίς ολίσθηση του προβολέα και χωρίς δαχτυλίδι. */
@media (prefers-reduced-motion: reduce) {
  .dt-spot, .dt-bar, .dt-end, .dt-prog i, .dt-fly { transition: none; }
  .dt-spot.on::after { animation: none; opacity: 0.6; }
}