/* VYTHO Leads — ευθυγραμμισμένο με το VYTHO Design System.
 *
 * ΤΙ ΑΛΛΑΞΕ ΚΑΙ ΓΙΑΤΙ:
 *  • ΧΩΡΙΣ ΧΡΥΣΟ. Το design system αποσύρει ρητά το gold («no gold, ever»).
 *    Επιβίωνε μόνο σε 4 σημεία γραφημάτων· τώρα η έμφαση βγαίνει από αντίθεση.
 *  • Καμβάς και επιφάνειες με τις ΑΚΡΙΒΕΙΣ τιμές του συστήματος.
 *  • Ακτίνες: κάρτες 16px, κουμπιά 10px. Το σύστημα απαγορεύει το pill —
 *    ήταν 20px και 999px αντίστοιχα.
 *  • Κίνηση: expo-out. Κανένα bounce, wobble ή spring, κατά το συμβόλαιο.
 *
 * Το φωτεινό θέμα μένει (απόφαση του ιδιοκτήτη) αλλά είναι κι αυτό μονόχρωμο.
 */

:root {
  /* Φωτεινό: η μία «snow» ζώνη του συστήματος, ως πλήρης καμβάς. */
  --paper: #F4F4F4;
  --card: #FFFFFF;
  --card-2: #FAFAFA;
  --ink: #101010;
  --muted: #5E5E5E;
  --line: rgba(0, 0, 0, .10);
  --line-soft: rgba(0, 0, 0, .06);
  --accent: #101010;
  --accent-ink: #F4F4F4;

  /* Σημασιολογικά: το σύστημα τα θέλει χωρίς απόχρωση. Κρατάμε ουδέτερες
     τιμές και η διάκριση γίνεται με σύμβολο και βάρος γραμματοσειράς. */
  --ok: #101010;
  --warn: #5E5E5E;
  --bad: #101010;
  /* ΔΥΟ μόνο χρώματα σε όλη την εφαρμογή, και τα δύο σημαίνουν κάτι που δεν
     λέγεται με γκρι: «είναι συνδεδεμένο» και «αυτό σβήνει πράγματα». Το
     υπόλοιπο σύστημα μένει μονόχρωμο. */
  --ok-ink: #0E7C46;
  --danger-ink: #C0261C;
  --ok-soft: rgba(16, 16, 16, .08);
  --warn-soft: rgba(94, 94, 94, .12);
  --bad-soft: rgba(16, 16, 16, .10);

  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lift: 0 2px 8px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.12);

  /* Expo-out: το σύστημα επιτρέπει `linear` ΜΟΝΟ σε loaders. */
  --spring: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --r: 16px;      /* κάρτες — rounded-lg */
  --r-s: 10px;    /* κουμπιά, πεδία, chips — rounded-md, ΠΟΤΕ pill */
  --r-btn: 10px;
}

[data-theme="dark"] {
  /* Οι ακριβείς τιμές του συστήματος. */
  --paper: #101010;
  --paper-deep: #0A0A0A;
  --card: #1E1E1E;
  --card-2: #242424;
  --ink: #F4F4F4;
  --muted: #C2C2C2;
  --dim: #8C8C8C;
  --line: #383838;
  --line-soft: #2A2A2A;
  --accent: #F4F4F4;
  --accent-ink: #101010;

  --ok: #F4F4F4;
  --warn: #C2C2C2;
  --bad: #F4F4F4;
  --ok-ink: #3BD07F;
  --danger-ink: #FF6B5E;
  --ok-soft: rgba(244, 244, 244, .10);
  --warn-soft: rgba(194, 194, 194, .12);
  --bad-soft: rgba(244, 244, 244, .12);

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift: 0 2px 8px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Commissioner', -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; }

/* ---------- shell ---------- */
.shell { max-width: 1080px; margin: 0 auto; padding: 20px 20px 110px; }
@media (min-width: 800px) { .shell { padding-top: 28px; } }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.brand-cluster {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.brand {
  font-weight: 800; font-size: clamp(19px, 4.2vw, 24px);
  letter-spacing: 0.04em; font-stretch: normal;
  text-transform: uppercase; line-height: 1.1;
  /* ΠΟΤΕ σε δεύτερη σειρά. Χωρίς αυτό, σε στενό κινητό το «VYTHO» έσπαγε σε
     «VYTH / O» και από κάτω το όνομα του πελάτη — τρεις σειρές για ένα λογότυπο. */
  white-space: nowrap;
}
button.brand, .brand-home {
  border: 0; background: transparent; color: inherit;
  padding: 0; cursor: pointer; font: inherit; text-align: left;
  font-weight: 800; font-size: clamp(19px, 4.2vw, 24px);
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1;
  white-space: nowrap;
}
.brand small, .brand-home small {
  color: var(--muted); font-weight: 500; margin-left: 8px;
  font-size: 14px; letter-spacing: 0; text-transform: none;
  white-space: nowrap;
}
/* Σε στενή οθόνη το όνομα του πελάτη φεύγει από το header: το λέει ήδη ο
   χαιρετισμός («Καλημέρα, VYTHO») δύο εκατοστά πιο κάτω. */
@media (max-width: 480px) {
  .brand small, .brand-home small { display: none; }
}
.top-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

.wallet-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px 0 10px; border-radius: var(--r-btn);
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: inherit; font-weight: 650; font-size: 13px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.wallet-chip:hover { background: var(--card-2); border-color: var(--ink-faint, var(--line)); }
.wallet-chip:active { transform: scale(.98); }
.wallet-chip .wallet-ico {
  width: 16px; height: 16px; display: grid; place-items: center; color: var(--accent, var(--ink));
}
.wallet-chip .wallet-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.wallet-chip .wallet-amt {
  font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600; font-size: 12.5px; letter-spacing: -0.01em;
}
.wallet-balance {
  text-align: center; padding: 22px 16px; border-radius: 18px;
  background: linear-gradient(145deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
}
.wallet-balance-label { font-size: 13px; color: var(--muted); font-weight: 550; margin-bottom: 6px; }
.wallet-balance-num {
  font-size: clamp(32px, 6vw, 40px); font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", ui-monospace, monospace;
}
.draft-row {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.draft-row:last-child { border-bottom: 0; }
.draft-row .draft-meta { min-width: 0; flex: 1; }
.draft-row .draft-title { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-row .draft-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.admin-return-btn {
  height: 36px; padding: 0 12px; font-size: 13px; gap: 6px;
  background: var(--ok-soft); color: var(--ok); border: 1px solid transparent;
}
.admin-return-btn.warn {
  background: var(--warn-soft); color: var(--warn);
}
.admin-return-btn svg { width: 14px; height: 14px; }

.screen-back {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 4px 0 12px; cursor: pointer;
  transition: color .18s ease;
}
.screen-back:hover { color: var(--ink); }
.screen-back svg { width: 18px; height: 18px; }

/* App boot splash (light/dark aware) */
body #bootSplash.boot-splash {
  background: var(--paper);
}
body #bootSplash .boot-splash-mark,
body #bootSplash.boot-splash .boot-mark {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(2rem, 8vw, 2.8rem);
}

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; gap: 4px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 6px;
  box-shadow: var(--shadow-lift);
  z-index: 50;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 76px; padding: 8px 14px;
  border: 0; background: transparent; color: var(--muted);
  border-radius: var(--r-btn); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  transition: background .25s var(--spring), color .25s var(--spring);
}
.tab svg { width: 24px; height: 24px; }
.tab.active { background: var(--accent); color: var(--accent-ink); }
.tab:not(.active):hover { background: var(--line); color: var(--ink); }
@media (min-width: 800px) {
  .tab { flex-direction: row; gap: 8px; font-size: 14px; padding: 10px 18px; }
  .tab svg { width: 20px; height: 20px; }
}
@media (max-width: 560px) {
  .tab { min-width: 54px; padding: 8px 10px; font-size: 11px; }
}

/* ---------- screens & motion ---------- */
.screen { animation: rise .32s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise .32s var(--spring) both; }
.stagger > *:nth-child(2) { animation-delay: .04s; }
.stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .12s; }
.stagger > *:nth-child(5) { animation-delay: .16s; }
.stagger > *:nth-child(6) { animation-delay: .20s; }
.h1 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.h2 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.sub { color: var(--muted); font-size: 15px; }
.section-title { font-size: 14px; font-weight: 600; color: var(--muted); margin: 26px 4px 10px; }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 12px; }
.card.tap { cursor: pointer; transition: transform .25s var(--spring), box-shadow .25s var(--spring); }
.card.tap:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card.tap:active { transform: scale(.985); }

/* —— Copy library (έτοιμα κείμενα) —— */
.copy-lib-list { display: flex; flex-direction: column; gap: 12px; }
.copy-lib-card {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); padding: 14px 16px; box-shadow: var(--shadow);
}
.copy-lib-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px;
}
.copy-lib-head { display: block; font-size: 16px; margin-bottom: 6px; }
.copy-lib-body {
  margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}

/* —— Media library grid —— */
.media-lib { min-width: 0; }
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.media-tile {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card-2);
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform .22s var(--spring), box-shadow .22s var(--spring);
}
.media-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.media-tile:active { transform: scale(.98); }
.media-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--card-2);
  pointer-events: none;
}
.media-tile-badge {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: var(--r-btn);
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .62); color: #fff;
  pointer-events: none;
}
.media-tile-badge svg { width: 14px; height: 14px; }
.media-tile-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 9px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
  color: #fff;
  font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  /* Κρυφό στην ηρεμία: το πλέγμα είναι για να ΒΛΕΠΕΙΣ τις εικόνες, όχι τα
     ονόματα αρχείων. Εμφανίζεται μόλις σταθείς πάνω ή με πληκτρολόγιο. */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.media-tile:hover .media-tile-name,
.media-tile:focus-visible .media-tile-name { opacity: 1; transform: none; }
.media-upload-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-bottom: 10px; padding: 16px;
  border: 1.5px dashed var(--line); border-radius: 16px;
  background: var(--card-2); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.media-upload-btn:hover { border-color: var(--ink); background: var(--card); }
.media-upload-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.media-file-input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.media-url-row {
  display: flex; gap: 8px; align-items: stretch;
}
.media-url-row .grow { flex: 1; min-width: 0; }
.media-url-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* Σήμερα sentence-cards (home signature) */
.say { display: flex; align-items: center; gap: 16px; }
.say .icon-bubble {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center;
}
.say .icon-bubble svg { width: 24px; height: 24px; }
.say .txt { flex: 1; font-size: 17px; font-weight: 550; line-height: 1.35; }
.say .txt small { display: block; color: var(--muted); font-weight: 450; font-size: 14px; margin-top: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font: inherit; font-weight: 600;
  text-decoration: none;   /* το <a class="btn"> είναι κουμπί, όχι σύνδεσμος */
  border-radius: var(--r-btn); padding: 0 22px; height: 52px; font-size: 17px;
  background: var(--accent); color: var(--accent-ink);
  transition: transform .2s var(--spring), opacity .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { opacity: .92; box-shadow: var(--shadow); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.secondary { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.soft { background: var(--line); color: var(--ink); }
.btn.danger {
  background: color-mix(in srgb, var(--danger-ink) 10%, transparent);
  color: var(--danger-ink);
  font-weight: 750;
  border: 1px solid color-mix(in srgb, var(--danger-ink) 45%, transparent);
}
.btn.danger:hover { background: color-mix(in srgb, var(--danger-ink) 16%, transparent); }
.btn.danger::before {
  content: '(!)';
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82em; font-weight: 700;
  letter-spacing: -.02em;
}
.btn.small { height: 40px; font-size: 15px; padding: 0 16px; }
.btn.big { width: 100%; height: 56px; font-size: 18px; }
.btn.icon { width: 44px; height: 44px; padding: 0; border-radius: var(--r-btn); }
.btn svg { width: 20px; height: 20px; }

.fab {
  position: fixed; right: 20px; bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 40; box-shadow: var(--shadow-lift);
}
@media (min-width: 800px) { .fab { right: calc(50% - 520px); } }

/* ---------- chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-btn); padding: 4px 12px; font-size: 13px; font-weight: 600;
  background: var(--line); color: var(--ink); border: 0; cursor: pointer; font-family: inherit;
}
.chip.on { background: var(--accent); color: var(--accent-ink); }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 650; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.mute { background: var(--line); color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 99px; background: currentColor; }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .n { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.stat .l { color: var(--muted); font-size: 13.5px; font-weight: 550; margin-top: 2px; }

/* ---------- pipeline ---------- */
.seg {
  display: flex; gap: 4px; background: var(--line); border-radius: var(--r-btn); padding: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg .chip { background: transparent; white-space: nowrap; padding: 8px 14px; font-size: 14px; color: var(--muted); }
.seg .chip.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

.lead-row { display: flex; align-items: center; gap: 14px; }
.avatar {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700; font-size: 17px;
  background: var(--line); color: var(--ink);
}
.lead-row .who { flex: 1; min-width: 0; }
.lead-row .who b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-row .who small { color: var(--muted); font-size: 13.5px; }
.kanban { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.kan-col { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; min-height: 120px; }
.kan-col h4 { font-size: 14px; font-weight: 650; color: var(--muted); margin: 2px 6px 10px; display: flex; justify-content: space-between; }
.kan-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow); }
.kan-card.dragging { opacity: .5; }
.kan-col.dragover { outline: 2px dashed var(--muted); outline-offset: -4px; }

/* ---------- sheet (modal) ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90;
  animation: fadein .25s ease both;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: fixed; z-index: 91; background: var(--card);
  left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto;
  border-radius: 24px 24px 0 0; padding: 10px 20px 40px;
  animation: sheetup .38s var(--spring) both;
  box-shadow: var(--shadow-lift);
}
@keyframes sheetup { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet .grab { width: 40px; height: 5px; border-radius: 99px; background: var(--line); margin: 6px auto 14px; }
@media (min-width: 800px) {
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 620px; border-radius: 24px; max-height: 86vh; }
  .sheet { animation: sheetup-desk .38s var(--spring) both; }
  .sheet.sheet-wide { width: min(980px, 96vw); }
}
@keyframes sheetup-desk { from { transform: translate(-50%, -46%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.field .hint { color: var(--muted); font-size: 13px; margin-top: 5px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="date"], input[type="time"], input[type="password"], select, textarea {
  width: 100%; height: 52px; border-radius: var(--r-s);
  border: 1.5px solid var(--line); background: var(--card-2); color: var(--ink);
  font: inherit; font-size: 17px; padding: 0 16px;
  transition: border-color .2s, box-shadow .2s;
}
textarea { height: auto; min-height: 100px; padding: 14px 16px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--line); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.check input { width: 24px; height: 24px; accent-color: var(--accent); flex: 0 0 auto; margin-top: 2px; }

/* iOS-style toggle */
.switch { position: relative; width: 52px; height: 32px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .knob {
  position: absolute; inset: 0; border-radius: 999px; background: var(--line);
  transition: background .25s var(--spring); cursor: pointer;
}
.switch .knob::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .25s var(--spring);
}
.switch input:checked + .knob { background: var(--ok); }
.switch input:checked + .knob::after { transform: translateX(20px); }

/* stepper */
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button {
  width: 48px; height: 48px; border-radius: var(--r-btn); border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 24px; font-weight: 600; cursor: pointer;
  transition: transform .15s var(--spring), background .2s;
}
.stepper button:active { transform: scale(.92); }
.stepper .val { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 600; min-width: 110px; text-align: center; }

/* iOS grouped list (settings) */
.group { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.group + .group { margin-top: 14px; }
.row {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border: 0; border-bottom: 1px solid var(--line); cursor: pointer; background: transparent;
  width: 100%; font: inherit; color: var(--ink); text-align: left;
  transition: background .15s;
}
.group .row:last-child { border-bottom: 0; }
.row:hover { background: var(--card-2); }
.row .r-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--line); }
.row .r-icon svg { width: 18px; height: 18px; }
.row .r-txt { flex: 1; min-width: 0; }
.row .r-txt b { font-weight: 600; font-size: 16px; display: block; }
.row .r-txt small { color: var(--muted); font-size: 13px; }
.row .chev { color: var(--muted); flex: 0 0 auto; }

/* ---------- ads ---------- */
.ad-card .spark { height: 44px; margin-top: 12px; }
.spark svg { width: 100%; height: 100%; display: block; }
.platform-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.platform-pick .pcard {
  border: 2px solid var(--line); border-radius: var(--r); padding: 18px 10px; text-align: center;
  cursor: pointer; background: var(--card); font: inherit; color: var(--ink);
  transition: border-color .2s, transform .2s var(--spring);
}
.platform-pick .pcard.on { border-color: var(--ink); }
.platform-pick .pcard:active { transform: scale(.97); }
.platform-pick .pcard .pname { font-weight: 650; font-size: 15px; margin-top: 8px; }
.platform-pick .pcard small { color: var(--muted); font-size: 12.5px; }

.variant { border: 2px solid var(--line); border-radius: var(--r); padding: 16px; cursor: pointer; transition: border-color .2s; background: var(--card); }
.variant.on { border-color: var(--ink); }
.variant + .variant { margin-top: 10px; }
.variant .angle { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }

/* wizard progress */
.wiz-steps { display: flex; gap: 6px; margin: 4px 0 20px; }
.wiz-steps i { flex: 1; height: 4px; border-radius: 99px; background: var(--line); transition: background .3s; }
.wiz-steps i.done { background: var(--accent); }

/* iPhone preview frame */
.phone {
  width: 270px; margin: 0 auto; border-radius: 38px; border: 6px solid var(--ink);
  background: #fff; color: #1D1D1F; overflow: hidden; box-shadow: var(--shadow-lift);
}
[data-theme="dark"] .phone { border-color: #3A3A3C; }
.phone .ph-notch { width: 90px; height: 20px; background: var(--ink); border-radius: 0 0 14px 14px; margin: 0 auto; }
[data-theme="dark"] .phone .ph-notch { background: #3A3A3C; }
.phone .ph-app { padding: 12px; font-size: 12.5px; line-height: 1.4; }
.phone .ph-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.phone .ph-avatar { width: 30px; height: 30px; border-radius: 99px; background: #E5E5EA; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.phone .ph-img {
  height: 150px; border-radius: 12px; margin: 8px 0;
  background: linear-gradient(135deg, #E8E8ED, #D1D1D6);
  display: grid; place-items: center; color: #6E6E73; font-size: 12px; text-align: center; padding: 10px;
}
.phone .ph-cta {
  background: #101010; color: #fff; border-radius: 10px; text-align: center;
  padding: 9px; font-weight: 650; font-size: 13px; margin-top: 8px;
}

/* Realistic Meta / Instagram ad previews (mobile + desktop side-by-side) */
.ad-prev-stage {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 4px 0 18px;
}
@media (max-width: 720px) {
  .ad-prev-stage { grid-template-columns: 1fr; }
}
.ad-prev-col-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; text-align: center;
}
.phone.phone-real {
  width: 278px; border-radius: 42px; border: 9px solid #111;
  box-shadow: 0 18px 40px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.08);
  background: #fff;
}
.phone.phone-real .ph-island {
  width: 96px; height: 22px; background: #111; border-radius: 14px; margin: 8px auto 0;
}
.phone.phone-real .ph-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 16px 6px; font-size: 11px; font-weight: 650; color: #050505;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.phone.phone-real .ph-status .ph-status-ico { display: flex; gap: 4px; align-items: center; opacity: .85; font-size: 10px; }
.phone.phone-real.phone-dark { background: #000; color: #fff; }
.phone.phone-real.phone-dark .ph-status { color: #fff; }

.fb-ui {
  font-family: Helvetica, Arial, sans-serif;
  color: #050505; background: #fff; font-size: 13px; line-height: 1.35;
}
.fb-ui .fb-head { display: flex; gap: 8px; align-items: center; padding: 8px 10px 6px; }
.fb-ui .fb-av {
  width: 36px; height: 36px; border-radius: 99px; background: #E4E6EB;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: 0 0 auto;
}
.fb-ui .fb-name { font-weight: 700; font-size: 13px; line-height: 1.2; }
.fb-ui .fb-meta { color: #65676B; font-size: 11px; display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.fb-ui .fb-dots { margin-left: auto; color: #65676B; font-weight: 700; font-size: 16px; letter-spacing: 1px; }
.fb-ui .fb-text { padding: 2px 10px 8px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.fb-ui .fb-media { width: 100%; aspect-ratio: 1 / 1; background: #E4E6EB; display: grid; place-items: center; color: #65676B; font-size: 12px; overflow: hidden; }
.fb-ui .fb-media > * { width: 100%; height: 100%; object-fit: cover; }
.fb-ui .fb-link {
  background: #F0F2F5; padding: 8px 10px; display: flex; gap: 8px; align-items: center;
  border-top: 1px solid #E4E6EB; border-bottom: 1px solid #E4E6EB;
}
.fb-ui .fb-link .fb-domain { color: #65676B; font-size: 10px; text-transform: uppercase; letter-spacing: .02em; }
.fb-ui .fb-link .fb-headline { font-weight: 700; font-size: 13px; margin-top: 1px; }
.fb-ui .fb-cta {
  background: #E4E6EB; color: #050505; border-radius: 6px; padding: 7px 10px;
  font-weight: 700; font-size: 12px; white-space: nowrap; flex: 0 0 auto;
}
.fb-ui .fb-react {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; color: #65676B; font-size: 11px; border-bottom: 1px solid #E4E6EB;
}
.fb-ui .fb-actions {
  display: flex; justify-content: space-around; padding: 6px 4px 8px; color: #65676B; font-size: 12px; font-weight: 650;
}
.fb-ui .fb-actions span { display: inline-flex; align-items: center; gap: 5px; }
.fb-ui .fb-actions svg { width: 16px; height: 16px; fill: #65676B; }

.fb-desk {
  background: #F0F2F5; border-radius: 14px; padding: 14px 12px 16px;
  border: 1px solid var(--line); min-height: 420px;
}
.fb-desk .fb-desk-top {
  height: 36px; border-radius: 8px; background: #fff; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.fb-desk .fb-desk-top .fb-logo {
  width: 22px; height: 22px; border-radius: 99px; background: #1877F2; color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 12px;
}
.fb-desk .fb-desk-top .fb-search {
  flex: 1; height: 24px; border-radius: 99px; background: #F0F2F5; color: #65676B;
  font-size: 11px; display: flex; align-items: center; padding: 0 10px;
}
.fb-desk .fb-desk-card {
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.1); max-width: 500px; margin: 0 auto;
}
.fb-desk .fb-media { aspect-ratio: 16 / 9; }
.fb-desk .fb-cta { background: #E4E6EB; }

.ig-ui {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #000; background: #fff; font-size: 12.5px; line-height: 1.35;
}
.ig-ui .ig-head { display: flex; gap: 8px; align-items: center; padding: 8px 10px; }
.ig-ui .ig-ring {
  width: 34px; height: 34px; border-radius: 99px; padding: 2px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  flex: 0 0 auto;
}
.ig-ui .ig-av {
  width: 100%; height: 100%; border-radius: 99px; background: #efefef; border: 2px solid #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 11px;
}
.ig-ui .ig-user { font-weight: 650; font-size: 12.5px; }
.ig-ui .ig-sponsored { color: #737373; font-size: 10.5px; }
.ig-ui .ig-dots { margin-left: auto; font-weight: 700; letter-spacing: 1px; }
.ig-ui .ig-media { width: 100%; aspect-ratio: 4 / 5; background: #efefef; display: grid; place-items: center; color: #737373; font-size: 12px; overflow: hidden; }
.ig-ui .ig-media > * { width: 100%; height: 100%; object-fit: cover; }
.ig-ui .ig-cta {
  background: #0095F6; color: #fff; padding: 10px 12px; font-weight: 650; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
}
.ig-ui .ig-actions { display: flex; gap: 14px; padding: 8px 10px 2px; font-size: 20px; align-items: center; }
.ig-ui .ig-actions .ig-save { margin-left: auto; }
.ig-ui .ig-actions svg { width: 22px; height: 22px; }
.ig-ui .ig-likes { padding: 2px 10px 0; font-weight: 650; font-size: 12.5px; }
.ig-ui .ig-caption { padding: 2px 10px 10px; font-size: 12.5px; }
.ig-ui .ig-caption b { font-weight: 650; margin-right: 4px; }
.ig-ui .ig-more { color: #737373; }

.ig-desk {
  background: #FAFAFA; border-radius: 14px; padding: 14px 12px 16px;
  border: 1px solid var(--line); min-height: 420px;
}
.ig-desk .ig-desk-top {
  height: 36px; border-radius: 8px; background: #fff; border: 1px solid #DBDBDB;
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  font-weight: 700; font-size: 14px; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ig-desk .ig-desk-card {
  background: #fff; border: 1px solid #DBDBDB; border-radius: 4px; overflow: hidden;
  max-width: 420px; margin: 0 auto;
}
.ig-desk .ig-media { aspect-ratio: 1 / 1; }

.gg-ui { font-family: arial, sans-serif; background: #fff; color: #202124; }
.gg-ui .gg-label { font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.gg-ui .gg-title { color: #1a0dab; font-size: 17px; line-height: 1.25; margin-top: 4px; }
.gg-ui .gg-snip { font-size: 13px; margin-top: 3px; color: #4d5156; }
.gg-ui .gg-url { color: #202124; font-size: 12px; }
.gg-desk {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  min-height: 280px;
}
.gg-desk .gg-chrome {
  height: 34px; border-radius: 18px; background: #fff; border: 1px solid #dadce0;
  display: flex; align-items: center; padding: 0 14px; color: #5f6368; font-size: 12px;
  margin-bottom: 14px; box-shadow: 0 1px 3px rgba(60,64,67,.12);
}

/* Ad media frame / zoom editor */
.ad-frame-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 56vh;
  border-radius: 16px; overflow: hidden; background: #0b0b0b; touch-action: none;
  cursor: grab; user-select: none;
}
.ad-frame-stage:active { cursor: grabbing; }
.ad-frame-media {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  object-fit: cover; transform: translate(-50%, -50%) scale(1); pointer-events: none;
  user-select: none; -webkit-user-drag: none;
}
.ad-media-tap::after {
  content: 'Zoom';
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 650;
  padding: 3px 7px; border-radius: 99px; pointer-events: none; letter-spacing: .02em;
}

/* rule sentence builder */
.rule-sentence { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 16px; }
.rule-sentence select { width: auto; height: 44px; font-size: 15px; padding: 0 12px; }
.rule-sentence input { width: 90px; height: 44px; font-size: 15px; }

/* banner */
.banner {
  display: flex; gap: 12px; align-items: center;
  border-radius: var(--r); padding: 14px 18px; font-size: 14.5px; font-weight: 550;
  background: var(--warn-soft); color: var(--warn);
}
.banner.info { background: var(--line); color: var(--muted); }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.sub.bad { color: var(--bad); }

/* timeline */
.tl { list-style: none; }
.tl li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.tl li:last-child { border-bottom: 0; }
.tl .t-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; background: var(--line); display: grid; place-items: center; }
.tl .t-ico svg { width: 15px; height: 15px; }
.tl small { color: var(--muted); display: block; font-size: 12.5px; }

/* toast */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 120;
  background: var(--ink); color: var(--paper);
  border-radius: 999px; padding: 13px 24px; font-size: 15px; font-weight: 600;
  box-shadow: var(--shadow-lift);
  animation: toastin .35s var(--spring) both;
  max-width: min(90vw, 480px); text-align: center;
}
@keyframes toastin { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.toast.out { animation: toastout .3s ease both; }
@keyframes toastout { to { transform: translate(-50%, 10px); opacity: 0; } }

/* empty state */
.empty { text-align: center; padding: 44px 20px; }
.empty .e-ico { width: 72px; height: 72px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; margin: 0 auto 16px; box-shadow: var(--shadow); }
.empty .e-ico svg { width: 34px; height: 34px; color: var(--muted); }
.empty h3 { font-size: 19px; font-weight: 650; margin-bottom: 6px; }
.empty p { color: var(--muted); font-size: 15px; margin-bottom: 18px; max-width: 340px; margin-left: auto; margin-right: auto; }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 400px; }
.login-card .logo { text-align: center; margin-bottom: 26px; }
.login-card .logo b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.login-card .logo small { display: block; color: var(--muted); margin-top: 4px; }

/* utility */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.mt { margin-top: 16px; }
.mt-s { margin-top: 10px; }
.mb { margin-bottom: 16px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.hide { display: none !important; }
a.tel { color: var(--ink); text-decoration: none; font-weight: 650; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--ink) 40%, transparent); outline-offset: 2px; border-radius: 6px; }

[data-countup] { font-variant-numeric: tabular-nums; }

/* One-Click Post dropzone */
.dropzone {
  min-height: 300px;
  border: 2px dashed var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color .25s var(--spring), background .25s var(--spring), transform .25s var(--spring);
  cursor: pointer;
  text-align: center;
  padding: 28px 20px;
  background: var(--card);
}
.dropzone.drag {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  transform: scale(1.01);
}
.dropzone svg { width: 40px; height: 40px; color: var(--muted); }
.dropzone-progress {
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow);
}
.dropzone-progress .bar-track {
  width: min(100%, 280px);
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.dropzone-progress .bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .2s ease;
}
.post-plat {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  cursor: pointer; background: transparent; width: 100%; text-align: left; font: inherit; color: inherit;
}
.post-plat:last-child { border-bottom: 0; }
.post-plat.on { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.post-plat.mute { opacity: .55; cursor: default; }
.post-plat .sw {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line);
  display: grid; place-items: center; flex: 0 0 auto;
}
.post-plat.on .sw { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.post-preview {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow);
}
.post-preview img, .post-preview video {
  display: block; width: 100%; max-height: 360px; object-fit: contain; background: var(--card-2);
}
/* Πολλά αρχεία: κυλούν πλάγια σαν το carousel που θα γίνουν, με «κούμπωμα»
   ώστε το κάθε ένα να σταματά στη θέση του. */
.post-preview.is-multi {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 2px;
  scrollbar-width: none;
}
.post-preview.is-multi::-webkit-scrollbar { display: none; }
.post-preview.is-multi img,
.post-preview.is-multi video {
  flex: 0 0 88%;
  scroll-snap-align: center;
  max-height: 300px;
  object-fit: cover;
  border-radius: calc(var(--r) - 4px);
}
/* Ο κάδος: πάνω δεξιά, πάντα ορατός, πάντα πατήσιμος. */
.preview-clear {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-s);
  background: rgba(0, 0, 0, .58);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .18s var(--ease-out), transform .18s var(--ease-out);
}
.preview-clear:hover { background: rgba(0, 0, 0, .78); }
.preview-clear:active { transform: scale(.94); }
.preview-clear svg { width: 17px; height: 17px; display: block; }
/* Mock frames «πώς φαίνεται» ανά social */
.post-frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.post-frame {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 10px;
  box-shadow: var(--shadow);
}
button.post-frame {
  display: block;
  width: 100%;
  text-align: left;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
button.post-frame:hover {
  border-color: var(--accent, #2a6);
}
.post-frame .ff-label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 650; font-size: 13px; margin-bottom: 8px;
}
.post-frame .ff-label svg { width: 18px; height: 18px; }
.post-frame .ff-stage {
  width: 100%;
  background: #0a0a0a;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}
.post-frame .ff-stage img,
.post-frame .ff-stage video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.post-frame .ff-cap {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
  max-height: 4.2em;
  overflow: hidden;
}
.post-frame .ff-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.post-detail-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.post-detail-row:last-child { border-bottom: 0; }
.post-detail-row .ff-stage {
  flex: 0 0 88px; width: 88px; height: 110px;
  background: #0a0a0a; border-radius: 10px; overflow: hidden;
}
.post-detail-row .ff-stage.wide { height: 56px; }
.post-detail-row .ff-stage img { width: 100%; height: 100%; object-fit: cover; }
/* Split συνδέσεις: διαφημίσεις αριστερά · δημοσίευση δεξιά */
.conn-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 8px;
}
.conn-split .group { margin: 0; }
.conn-split .section-title { margin-top: 0; }
@media (max-width: 720px) {
  .conn-split { grid-template-columns: 1fr; }
}
.platform-pick.post-platforms {
  grid-template-columns: repeat(4, 1fr);
}
.platform-pick.post-platforms .pcard.mute {
  opacity: .5;
  cursor: pointer;
}
.platform-pick.post-platforms .pcard.disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 560px) {
  .platform-pick.post-platforms { grid-template-columns: repeat(2, 1fr); }
}

/* —— Pricing Glass (#5) —— brand black/white/grey —— */
.pricing-glass {
  position: relative;
  width: 100%;
  color: #F4F4F4;
}
.pricing-glass-inline {
  margin: 8px 0 18px;
  padding: 22px 18px 8px;
  border-radius: 28px;
  background: #0B0B0C;
  overflow: hidden;
}
.pricing-glass-glow {
  position: absolute;
  top: 42%; left: 50%;
  width: min(720px, 90vw); height: min(420px, 50vh);
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .06);
  filter: blur(110px);
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}
.pricing-glass-intro { position: relative; z-index: 1; text-align: center; margin-bottom: 22px; }
.pricing-glass-desc {
  max-width: 42rem; margin: 0 auto;
  color: rgba(244, 244, 244, .55);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.45;
}
.pricing-glass-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
  margin-bottom: 16px;
}
@media (min-width: 860px) {
  .pricing-glass-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pricing-glass-card.is-popular {
    transform: translateY(-10px);
  }
}
.pricing-glass-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .14),
    0 28px 56px -16px rgba(0, 0, 0, .55);
  overflow: hidden;
  transition: transform .4s var(--spring), border-color .35s ease, box-shadow .35s ease;
}
.pricing-glass-card.is-popular {
  border-color: rgba(255, 255, 255, .22);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .35),
    inset 0 -1px 1px rgba(255, 255, 255, .05),
    0 32px 64px -12px rgba(0, 0, 0, .6),
    0 0 70px rgba(255, 255, 255, .05);
}
.pg-spotlight {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 32px;
  opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%),
    rgba(255, 255, 255, .14), transparent 55%);
}
.pricing-glass-card:hover .pg-spotlight { opacity: 1; }
.pg-noise {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pg-spin-mask {
  position: absolute; inset: 0; z-index: 0; border-radius: 32px; pointer-events: none; padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.pg-spin {
  position: absolute; inset: -100%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(255,255,255,.85) 100%);
  animation: pg-spin 4s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }
.pricing-popular-pill {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 2;
  padding: 5px 14px;
  border-radius: 0 0 14px 14px;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 0;
  font-size: 11px; font-weight: 650; color: rgba(244, 244, 244, .92);
  letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.pg-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(22px, 2.4vw, 36px);
  padding-top: clamp(28px, 3vw, 40px);
  pointer-events: none;
}
.pg-name {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 650;
  color: rgba(244, 244, 244, .82);
  letter-spacing: .02em;
  margin: 0;
}
.pg-top-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.pg-top-row .pg-name { flex: 1; min-width: 0; padding-top: 2px; }
.pricing-urgency {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin: 0 0 18px; padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(245, 165, 36, .35);
  background: linear-gradient(135deg, rgba(245, 165, 36, .16), rgba(245, 165, 36, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.pricing-urgency-copy { display: grid; gap: 2px; min-width: 0; }
.pricing-urgency-copy b {
  color: #FFE3A8; font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.pricing-urgency-copy span {
  color: rgba(255, 227, 168, .72); font-size: 12px; line-height: 1.35;
}
.pricing-urgency-cd {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(245, 165, 36, .28);
}
.pg-countdown {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(245, 165, 36, .14);
  border: 1px solid rgba(245, 165, 36, .32);
  color: #FFE3A8;
  white-space: nowrap;
  font-size: 11px; font-weight: 650;
}
.pg-countdown .pg-cd-label { opacity: .78; font-weight: 550; }
.pg-countdown .pg-cd-time {
  font-size: 12px; font-weight: 750; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.pg-cd-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #F5A524;
  box-shadow: 0 0 0 0 rgba(245, 165, 36, .55);
  animation: pg-cd-pulse 1.6s ease-out infinite;
}
.pg-countdown.is-urgent {
  background: rgba(232, 88, 64, .18);
  border-color: rgba(232, 88, 64, .42);
  color: #FFC4B8;
}
.pg-countdown.is-urgent .pg-cd-dot {
  background: #E85840;
  animation-duration: 1s;
}
@keyframes pg-cd-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 165, 36, .55); }
  70% { box-shadow: 0 0 0 7px rgba(245, 165, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); }
}
.pg-deal-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 10px;
}
.pg-save-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-btn);
  background: linear-gradient(135deg, #1FA971, #128C53);
  color: #fff; font-size: 12px; font-weight: 750;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(18, 140, 83, .35);
}
.pg-value-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(244, 244, 244, .88);
  font-size: 11px; font-weight: 650;
}
.pg-price-stack { margin: 4px 0 8px; }
.pg-was {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 2px;
}
.pg-was-label {
  font-size: 11px; font-weight: 550;
  color: rgba(244, 244, 244, .42);
  text-transform: uppercase; letter-spacing: .04em;
}
.pg-was-amount {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 650;
  color: rgba(244, 244, 244, .38);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(232, 88, 64, .85);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pg-price {
  display: flex; align-items: baseline; gap: 4px;
  margin: 0;
  white-space: nowrap;
  line-height: 1;
}
.pricing-glass-card.has-deal .pg-amount { color: #E8FFF3; }
.pg-currency {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 550;
  color: rgba(244, 244, 244, .4);
  letter-spacing: -.02em;
}
.pg-amount {
  font-size: clamp(42px, 5vw, 60px);
  font-weight: 750;
  color: #fff;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pg-period {
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 550;
  color: rgba(244, 244, 244, .4);
  margin-left: 2px;
}
.pg-deal-bar { margin: 4px 0 8px; }
.pg-deal-bar-track {
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.pg-deal-bar-fill {
  height: 100%; width: var(--deal-pct, 40%);
  border-radius: inherit;
  background: linear-gradient(90deg, #F5A524 0%, #1FA971 55%, #E8FFF3 100%);
  box-shadow: 0 0 12px rgba(31, 169, 113, .35);
  animation: pg-deal-fill .7s cubic-bezier(.16, 1, .3, 1) both;
  transform-origin: left center;
}
@keyframes pg-deal-fill {
  from { transform: scaleX(.15); opacity: .5; }
  to { transform: scaleX(1); opacity: 1; }
}
.pg-deal-bar-labels {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 6px;
  font-size: 11px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.pg-deal-from {
  color: rgba(244, 244, 244, .4);
  text-decoration: line-through;
  text-decoration-color: rgba(232, 88, 64, .7);
}
.pg-deal-to { color: #9BE7C0; }
.pg-save-line {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 600; line-height: 1.35;
  color: rgba(155, 231, 192, .92);
}
.pg-meta {
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(244, 244, 244, .45);
  line-height: 1.35;
}
.pg-desc {
  margin: 0 0 18px;
  min-height: 2.4em;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(244, 244, 244, .42);
}
.pg-rule {
  width: 100%; height: 1px;
  background: rgba(255, 255, 255, .1);
  margin-bottom: 18px;
}
.pricing-features {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 22px;
  flex: 1;
}
.pricing-feature {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; font-weight: 550;
  color: rgba(244, 244, 244, .72);
  line-height: 1.3;
}
.pricing-check {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  color: rgba(244, 244, 244, .92);
}
.pricing-check svg { width: 11px; height: 11px; stroke-width: 3; }
.pg-cta-wrap { margin-top: auto; pointer-events: auto; }
.pg-cta {
  width: 100%;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: inherit; font-size: 15px; font-weight: 650;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22);
  transition: transform .25s var(--spring), background .2s ease;
}
.pg-cta:hover:not(:disabled) { background: rgba(255, 255, 255, .18); transform: scale(1.02); }
.pg-cta:disabled { opacity: .45; cursor: not-allowed; }
.pg-cta-solid {
  background: #fff; color: #101010; border-color: transparent;
}
.pg-cta-solid:hover:not(:disabled) { background: rgba(255, 255, 255, .92); }
.pricing-enterprise {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 6px; padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
}
.pricing-enterprise b { display: block; color: #fff; margin-bottom: 4px; }
.pricing-enterprise p { margin: 0; font-size: 13px; color: rgba(244, 244, 244, .5); max-width: 36rem; }
.pricing-enterprise .btn {
  background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .14);
}
.upsell-celebrate { text-align: center; }
.upsell-burst {
  font-size: 42px; line-height: 1; margin-bottom: 8px;
  animation: scale-in .5s var(--spring) both;
}

/* —— Centered modal (#6) —— */
.modal-root {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 2vw, 24px); pointer-events: none;
}
.modal-root-pricing {
  align-items: stretch;
  justify-content: center;
  padding: clamp(8px, 1.5vw, 20px);
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: modal-fade .22s ease both;
  pointer-events: auto;
}
.modal-backdrop-dark {
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.modal-card {
  position: relative; z-index: 1;
  width: min(540px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
  animation: modal-scale .28s var(--spring) both;
  pointer-events: auto;
  overflow: hidden;
}
.modal-card-pricing {
  width: min(1180px, calc(100vw - 24px));
  max-height: min(94vh, 920px);
  margin: auto;
  border-radius: clamp(22px, 2vw, 32px);
  background: #0B0B0C;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #F4F4F4;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55);
}
/* —— Υποχρεωτικό full-page onboarding (μία ερώτηση / οθόνη) —— */
body.onboarding-lock .tabbar { display: none !important; }
body.onboarding-lock #settingsBtn,
body.onboarding-lock #brandHome {
  pointer-events: none;
  opacity: .42;
}
body.onboarding-lock .shell { padding-bottom: 0; }
.onboard-page {
  min-height: calc(100dvh - 72px);
  display: flex; flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 4px 28px;
}
.onboard-page-brand {
  font-size: 13px; font-weight: 750; letter-spacing: .14em;
  color: var(--muted); margin: 4px 0 18px;
}
/* Πρόοδος: μία ήρεμη γραμμή που γεμίζει + μετρητής «3/9» σε mono.
   Ζει έξω από το paint() ώστε το γέμισμα να κινείται ομαλά μεταξύ βημάτων. */
.onboard-page-progress {
  display: flex; align-items: center; gap: 12px; margin: 0 0 26px;
}
.onboard-progress-track {
  flex: 1; height: 4px; border-radius: 99px;
  background: var(--line); overflow: hidden;
}
.onboard-progress-fill {
  display: block; height: 100%; width: 0;
  border-radius: inherit; background: var(--ink);
  transition: width .55s var(--ease-out);
}
.onboard-progress-count {
  font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 30px; text-align: right;
}
.onboard-page-content {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  min-height: 0;
}

/* Είσοδος/έξοδος ερώτησης — expo-out, καμία αναπήδηση.
   Μπροστά: φεύγει πάνω, μπαίνει από κάτω. Πίσω: το αντίστροφο. */
.onboard-page-content.onboard-enter { animation: onb-in .42s var(--ease-out) both; }
.onboard-page-content.onboard-enter-back { animation: onb-in-back .42s var(--ease-out) both; }
.onboard-page-content.onboard-leave { animation: onb-out .2s var(--ease-out) both; pointer-events: none; }
.onboard-page-content.onboard-leave-back { animation: onb-out-back .2s var(--ease-out) both; pointer-events: none; }
@keyframes onb-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes onb-in-back { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes onb-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-18px); } }
@keyframes onb-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px); } }

.onboard-step { display: grid; gap: 10px; }
.onboard-step h2 {
  font-size: clamp(26px, 4.5vw, 34px);
  font-weight: 750; letter-spacing: -.03em;
  line-height: 1.15; margin: 0;
  text-wrap: balance;
}
.onboard-kicker {
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.onboard-kicker-num {
  font-size: 12px; letter-spacing: 0;
  color: var(--ink); background: var(--line);
  padding: 2px 7px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.onboard-step .hint,
.onboard-intro {
  margin: 0;
  font-size: 16px; line-height: 1.45;
  color: var(--muted);
  max-width: 38rem;
}
.onboard-welcome .onboard-intro { font-size: 17px; }

/* Καλωσόρισμα: τρία ήρεμα δεδομένα — πόσες, πόσο, τι γίνεται αν φύγεις. */
.onboard-meta { display: grid; gap: 12px; margin-top: 20px; }
.onboard-meta-row {
  display: flex; align-items: center; gap: 14px;
  color: var(--muted); font-size: 15.5px; line-height: 1.4;
}
.onboard-meta-mark {
  flex: 0 0 38px; text-align: center;
  font-size: 13px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 0;
}

/* Απαντήσεις-κάρτες: μία ανά γραμμή στο κινητό, ολόκληρη πατήσιμη,
   με τετράγωνο δείκτη επιλογής δεξιά. Επιλεγμένη = αντεστραμμένη. */
.onboard-choice { display: grid; gap: 10px; }
.onboard-cardlist {
  display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px;
}
@media (min-width: 560px) {
  .onboard-cardlist.cols-2 { grid-template-columns: 1fr 1fr; }
}
.onboard-cardopt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 13px 14px 13px 16px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.3;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s var(--ease-out), border-color .22s var(--ease-out),
              color .22s var(--ease-out), transform .22s var(--spring);
}
.onboard-cardopt:hover { border-color: var(--muted); }
.onboard-cardopt:active { transform: scale(.98); }
.onboard-cardopt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.onboard-cardopt.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.onboard-cardopt-label { flex: 1 1 auto; min-width: 0; }
.onboard-cardopt-mark {
  flex: 0 0 22px; width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line); border-radius: 7px;
  color: transparent; transform: scale(.9);
  transition: border-color .22s var(--ease-out), color .22s var(--ease-out),
              transform .22s var(--spring);
}
.onboard-cardopt-mark svg { width: 14px; height: 14px; display: block; }
.onboard-cardopt.on .onboard-cardopt-mark {
  border-color: var(--accent-ink); color: var(--accent-ink); transform: none;
}

/* Οι κάρτες μπαίνουν η μία μετά την άλλη — διακριτικό stagger, ίδιο easing. */
.onboard-enter .onboard-cardopt,
.onboard-enter-back .onboard-cardopt,
.onboard-enter .onboard-meta-row,
.onboard-enter-back .onboard-meta-row {
  animation: onb-item .5s var(--ease-out) backwards;
  animation-delay: calc(70ms + var(--i, 0) * 24ms);
}
.onboard-enter .onboard-custom,
.onboard-enter-back .onboard-custom {
  animation: onb-item .5s var(--ease-out) backwards;
  animation-delay: 120ms;
}
@keyframes onb-item {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.onboard-custom,
.onboard-textarea {
  width: 100%;
  font: inherit; font-size: 16px;
  padding: 14px 16px;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  resize: vertical;
}
.onboard-custom:focus,
.onboard-textarea:focus { outline: none; border-color: var(--ink); }
.onboard-textarea { min-height: 130px; line-height: 1.45; }
.onboard-page-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 28px;
  padding-top: 8px;
  position: sticky; bottom: 0;
  background: linear-gradient(to top, var(--paper) 70%, transparent);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.onboard-page-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.onboard-page-foot .btn { min-height: 48px; font-size: 16px; }
.onboard-page-foot .onboard-next {
  font-weight: 700;
  min-width: min(220px, 56vw);
  padding-left: 22px; padding-right: 22px;
}
.onboard-page-foot .onboard-back {
  width: 48px; height: 48px; min-height: 48px;
  border-radius: 14px; flex: 0 0 auto;
}
.onboard-page-foot .onboard-back svg { width: 20px; height: 20px; }
.onboard-foot-spacer { flex: 1; min-height: 1px; }
/* Google review prompt */
.review-stars {
  display: flex; gap: 8px; justify-content: center; margin: 8px 0 16px;
}
.review-stars button {
  width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card-2); font-size: 22px; cursor: pointer; line-height: 1;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.review-stars button.on {
  background: #FFF4D6; border-color: #F5C542; transform: scale(1.06);
}
.review-stars button:hover { transform: scale(1.04); }
.review-prompt-lead {
  text-align: center; color: var(--muted); font-size: 15px; line-height: 1.45; margin: 0 0 8px;
}
.pricing-modal-head {
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 28px) 4px;
  border-bottom: 0;
}
.pricing-modal-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 750;
  letter-spacing: -.02em;
  color: #fff;
}
.pricing-close {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: auto !important;
  min-height: 40px;
  width: auto !important;
  padding: 8px 12px 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
}
.pricing-close:hover {
  background: rgba(255, 255, 255, .14) !important;
}
.pricing-close-x {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .1);
}
.pricing-close-x svg { width: 14px; height: 14px; }
.pricing-modal-body {
  padding: 8px clamp(16px, 2vw, 28px) clamp(18px, 2vw, 28px);
  overflow: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 8px; flex: 0 0 auto;
}
.modal-body {
  padding: 8px 20px 16px; overflow: auto; flex: 1 1 auto;
}
.modal-foot {
  flex: 0 0 auto;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 92%, var(--card-2));
  position: sticky; bottom: 0;
}
.modal-foot-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.modal-root.modal-out .modal-backdrop { animation: modal-fade-out .18s ease both; }
.modal-root.modal-out .modal-card { animation: modal-scale-out .18s ease both; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-scale {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes modal-scale-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(.96) translateY(6px); }
}
@media (max-width: 560px) {
  .modal-card {
    width: calc(100vw - 20px);
    max-height: min(90vh, 680px);
    border-radius: 20px;
  }
  .modal-card-pricing {
    width: 100%;
    max-width: none;
    max-height: 96vh;
    border-radius: 22px 22px 16px 16px;
  }
  .pricing-glass-card.is-popular { transform: none; }
  .pg-amount { font-size: 48px; }
}
@media (max-width: 560px) {
  .pg-top-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .pg-countdown { align-self: flex-start; }
  .pricing-urgency { flex-direction: column; align-items: stretch; }
  .pricing-urgency-cd { justify-content: center; }
}

/* Home quick actions + dashboard */
.quick-actions {
  /* Και τα τρία σε ΜΙΑ σειρά, και στο πιο στενό κινητό. Με δύο στήλες, το
     «Στούντιο» έμενε μόνο του από κάτω και η αρχική ξεκινούσε στραβά. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
@media (min-width: 720px) {
  .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .quick-actions.has-pack-cta { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
.quick-action {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 74px; padding: 11px 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow); cursor: pointer; font: inherit; font-weight: 650;
  color: var(--ink); text-align: left;
  /* Μία γραμμή· αν στενέψει πολύ, μικραίνουν τα γράμματα αντί να σπάσει. */
  font-size: clamp(12px, 3.4vw, 15px);
  white-space: nowrap;
  transition: transform .22s var(--spring), box-shadow .22s var(--spring);
}
@media (min-width: 720px) {
  .quick-action { min-height: 88px; padding: 14px 16px; gap: 10px; font-size: 15px; }
}
.quick-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.quick-action:active { transform: scale(.98); }
.quick-action span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-s); background: var(--card-2); }
.quick-action svg { width: 16px; height: 16px; }
@media (min-width: 720px) {
  .quick-action span { width: 36px; height: 36px; }
  .quick-action svg { width: 18px; height: 18px; }
}
.quick-action.pack-cta {
  background: linear-gradient(145deg, #1FAF6A 0%, #128C53 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 28px rgba(18, 140, 83, .28);
}
.quick-action.pack-cta:hover { box-shadow: 0 14px 34px rgba(18, 140, 83, .36); }
.quick-action.pack-cta span { background: rgba(255, 255, 255, .18); color: #fff; }
.quick-action.pack-cta .qa-pack-copy { display: grid; gap: 2px; }
.quick-action.pack-cta .qa-pack-copy b { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.quick-action.pack-cta .qa-pack-copy small {
  font-size: 12px; font-weight: 500; opacity: .9; line-height: 1.3;
}

.dash-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
@media (min-width: 800px) {
  .dash-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dash-card {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--card);
  padding: 16px; border-radius: 18px;
  transition: transform .22s var(--spring), box-shadow .22s var(--spring);
}
button.dash-card { font: inherit; color: inherit; cursor: pointer; }
.dash-card.tap:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.dash-value {
  font-size: 28px; font-weight: 750; letter-spacing: -.03em; margin: 4px 0 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.dash-tops {
  display: grid; gap: 10px;
}
@media (min-width: 720px) {
  .dash-tops { grid-template-columns: 1fr 1fr; }
}

/* —— Advanced Stats layout (#4) —— */
.adv-stats {
  display: grid; gap: 12px; margin-top: 4px; margin-bottom: 14px;
}
@media (min-width: 900px) {
  .adv-stats {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch;
  }
}
.adv-stats-main { min-width: 0; }
.adv-stats-side {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.adv-side-card {
  border-radius: 22px; padding: 18px 18px 16px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  animation: rise .4s var(--spring) both;
  flex: 1 1 auto;
}
.adv-side-dark {
  background: var(--ink); color: var(--accent-ink); border-color: transparent;
}
.adv-side-dark .muted, .adv-side-dark .small.muted { color: color-mix(in srgb, var(--accent-ink) 62%, transparent); }
.adv-side-dark .btn.soft {
  background: color-mix(in srgb, var(--accent-ink) 12%, transparent);
  color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 18%, transparent);
}
.adv-side-light { background: var(--card); color: var(--ink); }
.adv-progress {
  margin-top: 12px; height: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  overflow: hidden;
}
.adv-side-light .adv-progress { background: var(--card-2); border: 1px solid var(--line); }
.adv-progress-fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--ink) 45%, transparent));
  animation: pmc-fill .8s var(--spring) both;
}
@keyframes pmc-fill { from { width: 0 !important; } }

/* KPI ProgressMetric cards (#1) */
.kpi-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 14px;
}
@media (min-width: 900px) {
  .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pmc {
  --pmc-up: #10B981;
  --pmc-down: #F43F5E;
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--card);
  padding: 16px 16px 12px; border-radius: 28px;
  box-shadow: var(--shadow);
  font: inherit; color: inherit; cursor: default;
  min-height: 168px;
  transition: transform .22s var(--spring), box-shadow .22s var(--spring);
  animation: rise .36s var(--spring) both;
  overflow: hidden;
}
.pmc-sm { min-height: 158px; }
button.pmc.tap { cursor: pointer; }
.pmc.tap:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pmc-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.pmc-title {
  font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: -.01em;
}
.pmc-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pmc-trend.up, .pmc-delta.up, .aa-change.up { color: var(--pmc-up, #10B981); }
.pmc-trend.down, .pmc-delta.down, .aa-change.down { color: var(--pmc-down, #F43F5E); }
.pmc-arrow { font-size: 11px; line-height: 1; }
.pmc-body {
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 8px; align-items: end; flex: 1 1 auto;
}
.pmc-value {
  font-size: clamp(26px, 3.6vw, 34px); font-weight: 750;
  letter-spacing: -.04em; line-height: 1.05;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* Μία γραμμή πάντα. Ένας τίτλος που τυλίγεται δεν είναι τίτλος. */
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.pmc-chart {
  color: var(--ink); line-height: 0; min-width: 0; height: 72px;
  border-radius: 12px; overflow: hidden;
}
.pmc-chart.up { color: var(--pmc-up, #10B981); }
.pmc-chart.down { color: var(--pmc-down, #F43F5E); }
.pmc-chart svg { display: block; width: 100%; height: 100%; }
.pmc-grid-dot { fill: color-mix(in srgb, currentColor 28%, transparent); }
.pmc-area { animation: chart-fade .55s ease both; }
.pmc-line, .spark-line {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--spark-len, 120); stroke-dashoffset: var(--spark-len, 120);
  animation: spark-draw .9s var(--spring) forwards;
}
.pmc-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
  font-size: 11px; line-height: 1.3; margin-top: auto;
}
.pmc-foot-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pmc-foot-right { text-align: right; white-space: nowrap; }
.pmc-delta { font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, monospace; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }

/* Area Analytics card (#2) */
.area-analytics {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 18px 18px 12px; box-shadow: var(--shadow);
  animation: rise .4s var(--spring) both; min-width: 0; height: 100%;
  display: flex; flex-direction: column;
}
.aa-head {
  display: flex; align-items: center; margin-bottom: 10px;
}
.aa-title { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.aa-kpi-row {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}
.aa-kpi {
  font-size: clamp(28px, 4vw, 36px); font-weight: 750; letter-spacing: -.03em; line-height: 1;
}
.aa-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line);
  font-size: 12px; font-weight: 650; color: var(--muted);
}
.aa-chart-cell { min-width: 0; flex: 1 1 auto; }
/* Το ποσοστό κάθεται δεξιά στην ίδια γραμμή με το «14 ημέρες», όχι σε δική
   του στήλη που σε κινητό έπεφτε από κάτω και δίπλωνε την κάρτα στα δύο. */
.aa-side-panel {
  margin-left: auto;
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.aa-change {
  font-size: clamp(22px, 6vw, 28px); font-weight: 750; letter-spacing: -.03em;
  font-family: 'JetBrains Mono', ui-monospace, monospace; line-height: 1.1;
}
.aa-helper { max-width: 22ch; line-height: 1.35; }

.charts-stack { display: grid; gap: 12px; margin-top: 12px; }
.chart-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 16px 16px 10px; box-shadow: var(--shadow);
  animation: rise .4s var(--spring) both;
  min-width: 0;
}
.chart-card.bar-analytics { margin-top: 0; }
.chart-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.chart-card-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.chart-card-kpi { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.chart-legend { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.chart-legend .leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.chart-legend .leg::before {
  content: ''; width: 8px; height: 8px; border-radius: 99px; background: currentColor;
}
.chart-legend .leg.posts { color: var(--ink); }
.chart-legend .leg.spend { color: var(--ink); font-weight: 700; }

.area-chart, .bar-chart, .report-chart {
  width: 100%; color: var(--ink); line-height: 0;
}
.area-chart svg, .bar-chart svg, .report-chart svg {
  display: block; width: 100%; height: clamp(160px, 28vw, 220px);
}
.area-chart text, .bar-chart text, .report-chart text {
  fill: var(--muted); font-size: 11px; font-family: 'Commissioner', system-ui, sans-serif;
}
.report-line.leads {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.report-line.spend {
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 5 4;
}
.report-area { color: var(--ink); }
.area-line {
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--spark-len, 400); stroke-dashoffset: var(--spark-len, 400);
  animation: spark-draw 1.1s var(--spring) .1s forwards;
}
.area-fill { animation: chart-fade .6s ease both; }
.bar-chart .bar {
  transform-origin: bottom; transform-box: fill-box;
  animation: bar-rise .55s var(--spring) both;
  animation-delay: calc(var(--bar-i, 0) * 45ms);
  transition: opacity .18s ease;
}
.bar-chart .bar.posts { fill: var(--ink); opacity: .9; }
.bar-chart .bar.spend { fill: var(--ink); opacity: .9; }
.bar-chart-interactive.is-hovering .bar.dim { opacity: .22; }
.chart-empty { fill: var(--muted); font-size: 14px; }
@keyframes chart-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes bar-rise {
  from { transform: scaleY(0); opacity: .2; }
  to { transform: scaleY(1); opacity: 1; }
}
@media (max-width: 560px) {
  .pmc { min-height: 148px; border-radius: 24px; padding: 14px 12px 10px; }
  .pmc-value { font-size: 24px; }
  .pmc-foot-right { font-size: 10px; }
  .aa-side-panel { border: 0; padding: 0; }
  .chart-card { padding: 14px 12px 8px; }
  /* Πιο χαμηλό σε κινητό: με λίγα ή καθόλου δεδομένα η κάρτα ήταν μισή
     άδεια και έσπρωχνε τα υπόλοιπα εκτός οθόνης. */
  .area-chart svg, .bar-chart svg { height: 132px; }
}
/* Responsive safety */
img, video, canvas, svg { max-width: 100%; height: auto; }
.shell, .screen, .card, .sheet { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .h1 { font-size: 26px; }
  .tab { min-width: 64px; padding: 8px 10px; font-size: 11px; }
}

/* —— Admin tenant detail + pricing panel —— */
.admin-section { padding: 14px 16px; }
.admin-section-head { margin-bottom: 12px; }
.admin-section-head b { display: block; font-size: 15px; }
.admin-stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.admin-stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px;
}
.admin-stat small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.admin-stat b { font-size: 16px; }
.admin-mod-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.admin-mod {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer;
  background: var(--card-2);
}
/* Pricing FAB — always bottom-right; never inherit .fab / nav centering */
#pricingFab {
  position: fixed !important;
  left: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  top: auto !important;
  transform: none;
  z-index: 40;
  border-radius: 999px;
  padding: 12px 16px;
  height: auto;
  box-shadow: var(--shadow-lift);
  animation: fadein .28s ease both;
}
#pricingFab:active { transform: scale(.97); }

.pricing-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: fadein .25s ease both;
}

.pricing-panel, #pricingPopup {
  position: fixed;
  left: 50%; right: auto; bottom: auto; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 41;
  width: min(820px, 94vw);
  height: min(78vh, 820px);
  max-height: min(78vh, 820px);
  overflow: auto;
  padding: 22px 24px;
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  animation: pricing-pop .32s var(--spring) both;
}
@keyframes pricing-pop {
  from { transform: translate(-50%, -46%); opacity: 0; }
  to { transform: translate(-50%, -50%); opacity: 1; }
}
.price-table { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.price-table-head, .price-table-row {
  display: grid; grid-template-columns: 2.2fr .7fr .7fr .7fr;
  gap: 6px; padding: 10px 12px; align-items: center;
}
.price-table.packs .price-table-head,
.price-table.packs .price-table-row {
  grid-template-columns: 1.6fr .7fr .7fr .7fr;
}
.price-table-head {
  background: var(--card-2); font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.price-table-row { border-top: 1px solid var(--line); font-size: 13px; }
.price-table-row b { display: block; font-size: 13px; }
.price-table-row small { display: block; font-size: 11px; }
.price-table-row .badge { justify-self: end; }
@media (max-width: 560px) {
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .price-table-head, .price-table-row { grid-template-columns: 1.6fr .6fr .6fr .6fr; font-size: 12px; }
}

/* Admin lockout alerts */
.admin-locks-btn { position: relative; }
.admin-notif-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--bad); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.lock-alert-banner {
  background: var(--bad-soft);
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  color: var(--ink);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.lock-alert-banner b { display: block; color: var(--bad); margin-bottom: 4px; }
.lock-alert-banner p { font-size: 14px; color: var(--muted); }
.lock-card { margin-bottom: 10px; }
.lock-card-hard {
  border-color: color-mix(in srgb, var(--bad) 45%, var(--line));
  background: color-mix(in srgb, var(--bad-soft) 65%, var(--card));
}
.locks-sheet .stack { display: flex; flex-direction: column; gap: 4px; }

/* ── Υγεία συνδέσεων: κουκκίδα + κατάσταση + «τι λείπει» ── */
.cdot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex: none;
}
.cdot-ok {
  background: var(--ok-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok-ink) 18%, transparent);
}
.cdot-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.cdot-bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.cdot-off { background: var(--line); }

/* Μία γραμμή = μία σύνδεση, σε ΜΙΑ σειρά, σε κάθε πλάτος.
   Πριν: 3 κουμπιά έκαναν wrap και η γραμμή φούσκωνε στα 206px στα 320px —
   15 πλατφόρμες γίνονταν 4 οθόνες scroll, με το «Αποσύνδεση» σε κόκκινο να
   είναι το πιο δυνατό στοιχείο της οθόνης. Τώρα η γραμμή κρατά σταθερό ύψος,
   δείχνει κατάσταση, και ΜΙΑ ενέργεια — αυτή που έχει νόημα τώρα.
   Τα υπόλοιπα (αλλαγή λογαριασμού, στοιχεία, αποσύνδεση) ζουν στο φύλλο. */
.conn-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  cursor: pointer;
}
.conn-row .r-txt { min-width: 0; }
.conn-row .r-txt b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  line-height: 1.25;
}
/* Το όνομα κόβεται με «…» αντί να σπάει τη γραμμή. Ο πλήρης τίτλος μένει
   διαθέσιμος μέσω title, και το φύλλο τον δείχνει ολόκληρο. */
.conn-row .r-txt b .conn-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.conn-row .r-txt small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
  margin-top: 1px;
}
.conn-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
/* Η ειδικότητα είναι σκόπιμη: πιο κάτω υπάρχει `.btn.small { min-height: 40px }`
   που αλλιώς θα νικούσε και θα άφηνε τον στόχο αφής κάτω από τα 44px. */
.conn-actions .btn.small,
.conn-actions .btn {
  width: auto;
  white-space: nowrap;
  min-height: 44px;   /* ο πελάτης πατάει με αντίχειρα, εν κινήσει */
  padding: 0 14px;
}
/* Έτοιμη σύνδεση: καμία ενέργεια, μόνο ένδειξη + βελάκι προς τα στοιχεία. */
.conn-go {
  display: grid;
  place-items: center;
  width: 28px;
  height: 44px;
  color: var(--muted);
  flex: none;
}
.conn-go svg { width: 16px; height: 16px; }
.conn-row:hover .conn-go { color: var(--ink); }

/* Η κατάσταση δεν επικοινωνείται ΜΟΝΟ με χρώμα: υπάρχει πάντα λέξη δίπλα.
   Το γέμισμα μένει διακριτικό — μόνο η ληγμένη σύνδεση χρωματίζεται όντως. */
.conn-row.conn-incomplete,
.conn-row.conn-expiring,
.conn-row.conn-server_pending { background: color-mix(in srgb, var(--warn-soft) 22%, transparent); }
.conn-row.conn-expired { background: color-mix(in srgb, var(--bad-soft) 30%, transparent); }
.conn-row.conn-not_connected .r-txt b,
.conn-row.conn-oauth_missing .r-txt b { font-weight: 500; }

/* Οι μη συνδεδεμένες μαζεύονται πίσω από ένα άνοιγμα — δεν γεμίζουν την οθόνη
   πριν ο πελάτης δει τι ήδη δουλεύει. */
.conn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--muted);
  cursor: pointer;
  border-top: 1px solid var(--line);
}
.conn-more:hover { color: var(--ink); background: var(--card-2); }
/* Το εικονίδιο είναι το ίδιο βελάκι «δεξιά» που χρησιμοποιεί όλη η εφαρμογή.
   Γυρισμένο 90° δείχνει κάτω («άνοιξε»), και -90° πάνω («μάζεψε») — όχι
   αριστερά, που δεν σημαίνει τίποτα εδώ. */
.conn-more svg {
  width: 15px; height: 15px;
  transform: rotate(90deg);
  transition: transform .2s var(--spring);
}
.conn-more[aria-expanded="true"] svg { transform: rotate(-90deg); }

/* Κίνηση που εξηγεί: όταν κάτι χρειάζεται ενέργεια, η κουκκίδα ανασαίνει.
   Δεν διακοσμεί — τραβά το μάτι εκεί που πρέπει να πάει. */
@keyframes conn-breathe {
  0%, 100% { box-shadow: 0 0 0 3px var(--warn-soft); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn-soft) 60%, transparent); }
}
.conn-row.conn-expired .cdot-bad,
.conn-row.conn-expiring .cdot-warn,
.conn-row.conn-incomplete .cdot-warn { animation: conn-breathe 2.4s var(--spring) infinite; }

@media (max-width: 380px) {
  /* Λίγο πιο σφιχτά, αλλά το βελάκι μένει: είναι το μόνο σημάδι ότι η
     έτοιμη γραμμή κρύβει κι άλλα από πίσω. */
  .conn-row { gap: 10px; padding: 10px 12px; }
  .conn-go { width: 22px; }
}
.ready-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.ready-banner.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.ready-banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.ready-banner.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.ready-banner .small { color: var(--muted); }

.fix-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fix-steps { margin: 0 0 14px 18px; padding: 0; }
.fix-steps li { margin-bottom: 8px; line-height: 1.4; }
.fail-why { color: var(--bad); white-space: normal; line-height: 1.35; margin: 4px 0; }

.platform-pick .pcard.needsfix {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--line));
  background: color-mix(in srgb, var(--warn-soft) 55%, transparent);
}
.platform-pick .pcard.needsfix small { color: var(--warn); }

/* ── Πού ακριβώς να ανέβει: προφίλ / σελίδα / κανάλι ── */
.target-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card);
}
.target-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.target-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  max-width: 100%;
  transition: border-color .18s, background .18s;
}
.tchip:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.tchip.on { border-color: var(--ink); background: var(--card); }
.tchip small { color: var(--muted); font-size: 11.5px; }
.tchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchip-img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.target-blocked {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
}
.target-blocked .small { color: var(--muted); line-height: 1.4; }
.target-res { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }

/* ══════════════════════════════════════════════════════════════════════
   ΠΡΟΣΑΡΜΟΓΗ ΣΕ ΚΑΘΕ ΣΥΣΚΕΥΗ
   Ένα ενιαίο στρώμα στο τέλος, ώστε να υπερισχύει χωρίς να πειραχτούν οι
   υπάρχοντες κανόνες. Λογική: ρευστά μεγέθη (clamp) αντί για σταθερά,
   auto-fit πλέγματα αντί για σταθερές στήλες, dvh αντί για vh, και σεβασμός
   στο notch. Στόχοι: 320px → ultrawide, portrait & landscape.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Ποτέ οριζόντια κύλιση ολόκληρης της σελίδας. */
html, body { max-width: 100%; }
.screen, .card, .group, .row, .sheet { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* 2. Ύψος οθόνης που σέβεται τις μπάρες του κινητού. */
body { min-height: 100svh; }
@supports (height: 100dvh) {
  .sheet { max-height: min(92dvh, 92vh); }
}

/* 3. Ρευστό περιεχόμενο: το κέντρο μεγαλώνει ομαλά αντί για άλματα. */
.shell {
  max-width: min(1080px, 100%);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}

/* 4. Πλέγματα που προσαρμόζονται μόνα τους αντί για σταθερές στήλες. */
.platform-pick { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.grid2 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.post-frames { grid-template-columns: repeat(auto-fill, minmax(min(160px, 45vw), 1fr)); }
.conn-split { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* 5. Τίτλοι και κείμενα που δεν σπάνε σε μικρές οθόνες. */
.h1 { font-size: clamp(22px, 5.2vw, 34px); line-height: 1.15; }
.section-title { font-size: clamp(12px, 2.4vw, 14px); }

/* 6. Παράθυρα (sheets): ποτέ φαρδύτερα από την οθόνη. */
@media (min-width: 800px) {
  .sheet { width: min(620px, 92vw); }
  .sheet.sheet-wide { width: min(900px, 94vw); }
}

/* 7. Προεπισκόπηση κινητού: σμικρύνεται μαζί με την οθόνη. */
.phone, .phone-frame, .preview-phone { width: min(270px, 78vw); }

/* 8. Στόχοι αφής τουλάχιστον 44px (οδηγία προσβασιμότητας). */
.btn, .tab, .chip, .tchip, .pcard { min-height: 44px; }
.btn.small { min-height: 40px; }
.btn.icon { min-width: 44px; }

/* 9. Πολύ στενές οθόνες (παλιά κινητά, foldables κλειστά). */
@media (max-width: 360px) {
  .shell { padding-left: 12px; padding-right: 12px; }
  .row { padding: 13px 14px; gap: 10px; }
  .card { padding: 14px; }
  .conn-actions { width: 100%; justify-content: flex-start; }
  .platform-pick { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
  .tchip { max-width: 100%; }
}

/* 10. Κινητό σε οριζόντια θέση: λιγότερο κενό, περισσότερο περιεχόμενο. */
@media (max-height: 480px) and (orientation: landscape) {
  .shell { padding-top: 10px; padding-bottom: 90px; }
  .h1 { font-size: 22px; margin-bottom: 6px; }
  .sheet { max-height: 96dvh; padding-bottom: 20px; }
  .dropzone { padding: 18px; }
}

/* 11. Tablet portrait: δύο στήλες όπου βγάζει νόημα. */
@media (min-width: 700px) and (max-width: 1023px) {
  .platform-pick { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* 12. Μεγάλες οθόνες: το περιεχόμενο δεν «χάνεται» στο πλάτος. */
@media (min-width: 1400px) {
  .shell { max-width: 1180px; }
}

/* 13. Πλατύ περιεχόμενο (πίνακες, κώδικας) κυλάει μέσα στο δικό του πλαίσιο. */
table { width: 100%; border-collapse: collapse; }
.table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, code { overflow-x: auto; max-width: 100%; }

/* 14. Οθόνες υψηλής πυκνότητας: πιο καθαρές λεπτές γραμμές. */
@media (min-resolution: 2dppx) {
  .row, .card, .group { border-width: 0.5px; }
}

/* ── Πολλές μορφές μαζί: Post + Reel/Short + Story ── */
.format-pick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
}
.format-pick .fchip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
  min-height: 62px;
  transition: border-color .18s, background .18s;
}
.format-pick .fchip b { font-weight: 650; font-size: 15px; }
.format-pick .fchip small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.format-pick .fchip.on { border-color: var(--ink); background: var(--card-2); }
.format-pick .fchip.on small { color: var(--ink); }

/* ── Επιλεκτική διαγραφή δημοσιεύσεων ── */
.del-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.del-row input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.del-row b { font-weight: 600; font-size: 14.5px; display: block; }

/* ── Μεγέθυνση προεπισκόπησης: Post / Reel / Story δίπλα-δίπλα ── */
.enlarge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}
.enlarge-col { min-width: 0; }
.enlarge-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.enlarge-head b { font-size: 15px; font-weight: 650; }
.enlarge-stage {
  position: relative;
  width: 100%;
  max-height: 62vh;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid var(--line);
}
.enlarge-stage img, .enlarge-stage video { display: block; }
/* Η μπάρα προόδου που δείχνει το ίδιο το Story */
.enlarge-story-bar {
  position: absolute; top: 8px; left: 8px; right: 8px; height: 3px;
  border-radius: 2px; background: rgba(255,255,255,.35);
}
.enlarge-story-bar::after {
  content: ''; position: absolute; inset: 0 62% 0 0;
  border-radius: 2px; background: #fff;
}
.enlarge-col .ff-cap { margin-top: 8px; font-size: 12.5px; line-height: 1.4; }

/* ── Λωρίδα αρχείων (carousel) ── */
.media-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.mstrip-item {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--card-2);
}
.mstrip-item.primary { border-color: var(--ink); }
.mstrip-item img, .mstrip-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mstrip-num {
  position: absolute; left: 4px; top: 4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: rgba(0,0,0,.65); color: #fff;
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
.mstrip-x {
  position: absolute; right: 3px; top: 3px;
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; cursor: pointer;
  font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.mstrip-add {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border: 2px dashed var(--line); border-radius: 12px;
  background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; gap: 2px; font: inherit;
}
.mstrip-add small { font-size: 11px; }

/* ── Πλοήγηση carousel στη μεγέθυνση ── */
.enlarge-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: background .15s;
}
.enlarge-nav:hover { background: rgba(0,0,0,.75); }
.enlarge-nav.prev { left: 8px; }
.enlarge-nav.next { right: 8px; }
.enlarge-dots {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
}
.enlarge-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.45);
}
.enlarge-dots span.on { background: #fff; }

/* ── Ταυτότητα διαφήμισης: πού χρεώνεται, ποιος «μιλάει» ── */
.ad-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
}
.ad-identity b { font-size: 14.5px; }

/* ── Αλλαγή σειράς carousel: σύρσιμο + βελάκια ── */
.mstrip-item { cursor: grab; touch-action: manipulation; }
.mstrip-item.dragging { opacity: .45; cursor: grabbing; }
.mstrip-item.drop-target { border-color: var(--ink); transform: translateY(-2px); }
.mstrip-move {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent);
  padding: 2px;
}
.mstrip-arrow {
  width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.mstrip-arrow:disabled { opacity: .3; cursor: default; }

/* ================================================================
   ΠΡΟΟΔΟΣ ΔΗΜΟΣΙΕΥΣΗΣ
   Πριν: πατούσες «Δημοσίευση» και η οθόνη πάγωνε μέχρι να γυρίσουν
   όλα τα δίκτυα — που μπορεί να είναι 90 δευτερόλεπτα.

   Δεν είναι μετάβαση πάνω στο κουμπί: το repaintPost() ξαναχτίζει το
   DOM μόλις αλλάξει η κατάσταση, οπότε κάθε transition θα χανόταν.
   Είναι ξεχωριστή επιφάνεια που ενημερώνεται ΕΠΙΤΟΠΟΥ από polling.

   Η μπάρα δείχνει done/total από τον server. Δεν υπάρχει χρονόμετρο
   και δεν υπάρχει εκτίμηση — προχωράει μόνο όταν ένα δίκτυο απαντήσει.
   ================================================================ */
.pubp {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-top: 12px;
}
.pubp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.pubp-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
/* Το πλήθος σε mono ώστε το «2/5 → 3/5» να μη μετακινεί το κείμενο. */
.pubp-count { font-size: 14px; color: var(--muted); flex: none; }

/* Η ράγα χρειάζεται να ΦΑΙΝΕΤΑΙ όταν είναι άδεια: το --line σε λευκή
   κάρτα δίνει ~1.09:1, δηλαδή τίποτα. Χρήση συμπαγούς ουδέτερου. */
.pubp-rail {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.pubp-fill {
  height: 100%; width: 0%;
  border-radius: 999px; background: var(--accent);
  transition: width .45s var(--spring);
}

.pubp-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.pubp-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  min-height: 40px;
}
.pubp-mark { width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted); }
.pubp-mark svg { width: 18px; height: 18px; }
.pubp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
/* Η κατάσταση είναι ΠΑΝΤΑ λέξη, ποτέ μόνο χρώμα: το πράσινο σε λευκό
   δίνει 2,1:1 και δεν φτάνει ούτε για γραφικό. Η κουκκίδα συνοδεύει. */
.pubp-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); flex: none;
}
.pubp-state b { font-weight: 600; color: var(--ink); }
.pubp-item.is-ok .pubp-mark { color: var(--ink); }
.pubp-item.is-ok .pubp-state b { color: var(--ink); }
.pubp-item.is-failed .pubp-state b { color: var(--ink); }
.pubp-item.is-pending { opacity: .55; }

/* Όσο ανεβαίνει, το σήμα του δικτύου ανασαίνει — δηλώνει «τώρα αυτό». */
@keyframes pubp-work { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pubp-item.is-working .pubp-mark { color: var(--ink); animation: pubp-work 1.3s ease-in-out infinite; }

.pubp-foot { margin-top: 14px; font-size: 13.5px; color: var(--muted); }

/* ================================================================
   ΣΥΜΠΑΓΕΣ ΚΟΥΜΠΙ AI
   Πριν: «Εικόνα με AI», «Γράψε μου με AI (προαιρετικό)» — μακριά
   κουμπιά που έτρωγαν όλο το πλάτος δίπλα σε «Βιβλιοθήκη» και
   «Ανέβασμα». Τώρα: το εικονίδιο κάνει τη δουλειά, η λεζάντα από
   κάτω εξηγεί με μικρά γκρι γράμματα.

   Χτισμένο πάνω στο υπάρχον .btn.icon (44px, στρογγυλό) — δεν
   εφευρίσκουμε δεύτερο στοιχείο για την ίδια δουλειά.

   Το πλάτος είναι ΣΤΑΘΕΡΟ: όταν η λεζάντα αλλάζει σε «Φτιάχνω…»,
   το εικονίδιο δεν επιτρέπεται να μετακινηθεί κάτω από το δάχτυλο.
   ================================================================ */
.ai-act {
  display: inline-grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  width: 96px;
  flex: none;
}
.ai-act .btn.icon { flex: none; }
/* Τα διπλανά κουμπιά ευθυγραμμίζονται με το ΕΙΚΟΝΙΔΙΟ, όχι με το κέντρο
   του (εικονίδιο + λεζάντα) — αλλιώς κρέμονται στη μέση του πουθενά. */
.ai-row { align-items: flex-start; }
.ai-row > .btn { margin-top: 0; }
.ai-act-cap {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
  /* Δύο γραμμές κρατημένες: αλλιώς η σειρά κουμπιών αναπηδά όταν η
     λεζάντα γίνεται μονόγραμμη ή διγραμμη. */
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Όσο δουλεύει το AI, το εικονίδιο ανασαίνει. Η αναλυτική πρόοδος
   δίνεται ήδη από το progressBar — εδώ δεν προσθέτουμε δεύτερη
   ένδειξη, μόνο σημάδι ότι «αυτό εδώ τρέχει». */
@keyframes ai-act-work { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ai-act.is-busy .btn.icon svg { animation: ai-act-work 1.1s ease-in-out infinite; }
.ai-act.is-busy .ai-act-cap { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   VYTHO — ΣΥΣΤΗΜΑ ΚΙΝΗΣΗΣ  (διορθωμένο, έτοιμο για παραγωγή)
   Μπαίνει στο ΤΕΛΟΣ του public/app.css. Δουλεύει χωρίς αλλαγή στο app.js.

   Αρχή: μία κλίμακα διάρκειας, πέντε καμπύλες, επτά primitives.
   Ό,τι δεν χωράει στην κλίμακα δεν κινείται.

   ΕΠΑΛΗΘΕΥΜΕΝΟ ΣΤΟΝ ΚΩΔΙΚΑ (δεν είναι υποθέσεις):
   • route() (app.js:849) κάνει main.innerHTML='' → κάθε εμφάνιση είναι CSS
     animation σε ΝΕΟΓΕΝΝΗΤΟ στοιχείο· καμία ΒΑΣΗ δεν έχει opacity:0.
   • route() (app.js:870) γράφει inline animationDelay έως 0.4s σε
     «.screen, .stagger > *, .dash-card». Το inline νικάει το κανονικό CSS,
     άρα ΟΛΑ τα delay του καταρράκτη θέλουν !important για να ισχύσουν.
   • openModal() (app.js:478) βάζει .modal-out στο .modal-root και κάνει
     remove μετά από ΑΚΡΙΒΩΣ 180ms → η έξοδος του modal είναι --t-2.
   • openSheet() (app.js:368) κάνει σκέτο wrapper.remove() → το φύλλο
     κλείνει ακαριαία. Το CSS εξόδου υπάρχει, αδρανές, μέχρι το hook #3.
   • toast() (app.js:188) βάζει .out και κάνει remove μετά από 350ms.
   • publishProgressPanel() (app.js:4034) γράφει li.className και
     (4035) replaceChildren στο <b> → το <li> ΕΠΙΒΙΩΝΕΙ, το <b> όχι.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────
   Έξι σκαλιά. Η διάρκεια ακολουθεί την ΑΠΟΣΤΑΣΗ, όχι τη σημασία. */
:root {
  --t-0: 0ms;      /* δεν κινείται — δηλωμένο, όχι ξεχασμένο */
  --t-1: 120ms;    /* απάντηση στο δάχτυλο */
  --t-2: 180ms;    /* αλλαγή χωρίς διαδρομή: χρώμα, opacity, backdrop */
  --t-3: 260ms;    /* μικρή μετακίνηση: κάρτα λίστας, toast, επαναφορά */
  --t-4: 380ms;    /* επιφάνεια που έρχεται: φύλλο, modal */
  --t-5: 560ms;    /* μία μεγάλη διαδρομή. Σπάνιο. */

  /* Η έξοδος ΠΑΡΑΓΕΤΑΙ από την είσοδο (0.68×): στην είσοδο διαβάζεις,
     στην έξοδο έχεις ήδη αποφασίσει. */
  --t-3-out: calc(var(--t-3) * .68);   /* ~177ms */
  --t-4-out: calc(var(--t-4) * .68);   /* ~258ms — δες hook #3 */

  /* Καμπύλες. Το --spring υπάρχει ήδη: cubic-bezier(.32,.72,.28,1). */
  --ease-swap:  cubic-bezier(.4, 0, .2, 1);      /* Α→Β, δύο άκρα ορατά */
  --ease-exit:  cubic-bezier(.4, 0, 1, 1);       /* φεύγει, επιταχύνοντας */
  --ease-press: cubic-bezier(.2, 0, 0, 1);       /* ξεκινά με το δάχτυλο */
  --ease-fade:  cubic-bezier(.33, 0, .67, 1);    /* opacity / χρώμα */
  --spring-pop: cubic-bezier(.34, 1.56, .64, 1); /* ΜΟΝΟ στη δημοσίευση */

  /* Αποστάσεις. Μικρές επίτηδες: στα 320px το .shell έχει padding 12px
     (app.css:2240), άρα η κάρτα είναι 296px και με padding 14px μένουν
     266px ωφέλιμα. Μετατόπιση 18px κάνει τα ελληνικά να ξανασπάνε
     μπροστά στα μάτια σου· 6px είναι 2% του πλάτους. */
  --lift-1: 6px;    /* στοιχείο λίστας */
  --lift-2: 10px;   /* κεντρική επιφάνεια (modal / φύλλο desktop) */

  /* Πάτημα: η κλίμακα αλλάζει με το πλάτος ώστε η ΑΚΜΗ να μπαίνει
     πάντα ~2px, είτε είναι εικονίδιο 44px είτε κουμπί 296px. */
  --press-lg: .985;  /* ≥240px: μεγάλα κουμπιά, κάρτες, dropzone */
  --press-md: .96;   /* 80–240px: κανονικά κουμπιά, chips */
  --press-sm: .92;   /* ≤56px: εικονίδια, stepper */
  --press-tint: color-mix(in srgb, var(--ink) 6%, var(--card));

  --stagger: 40ms;   /* βήμα καταρράκτη· cap στα 6 στοιχεία = 200ms */

  --t-skel: 1200ms;
  --skel-wait: 250ms; /* κάτω από αυτό, ο σκελετός είναι ο ίδιος αναλαμπή */
  --skel-fill: color-mix(in srgb, var(--ink) 8%, var(--card));
}
/* Σκούρο θέμα: ίδιες μεταβλητές, άλλες τιμές. Το 6% πάνω σε #161618 δεν
   φαίνεται καθόλου — χρειάζεται διπλάσιο για την ίδια αντίληψη. */
[data-theme="dark"] {
  --press-tint: color-mix(in srgb, var(--ink) 12%, var(--card));
  --skel-fill: color-mix(in srgb, var(--ink) 14%, var(--card));
}

/* ── 2. KEYFRAMES ──────────────────────────────────────────────────────
   Ξαναορίζω ΤΑ ΙΔΙΑ ονόματα που ήδη καλεί το app.css: το τελευταίο
   @keyframes με το ίδιο όνομα νικάει, άρα το υπάρχον markup παίρνει τη νέα
   κίνηση χωρίς να αλλάξει καμία γραμμή JS. Μόνο transform και opacity.

   ΠΡΟΣΟΧΗ: το «rise» το καλούν και το .pmc (app.css:1677) και το
   .area-analytics (app.css:1729). Γι' αυτό το --rise-y έχει fallback 6px
   και ΔΕΝ ορίζεται στο .screen — τα custom properties κληρονομούνται, και
   ένα --rise-y:0 στο .screen θα ακύρωνε σιωπηλά την κίνηση κάθε παιδιού. */
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--rise-y, 6px)); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadein  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }

/* Φύλλο σε κινητό: έρχεται από την ακμή του, χωρίς fade. Το fade+slide
   μαζί είναι η υπογραφή του «modal ιστοσελίδας»· η ακμή είναι φυσική
   προέλευση και το 100% κλιμακώνεται μόνο του με το ύψος του φύλλου. */
@keyframes sheetup   { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetdown { from { transform: none; } to { transform: translateY(100%); } }

/* Φύλλο σε desktop: δεν έχει ακμή προέλευσης, άρα έρχεται από βάθος.
   Το translate(-50%,-50%) ΠΡΕΠΕΙ να μείνει μέσα στα keyframes (app.css:406)
   αλλιώς το παράθυρο πηδάει στη γωνία στο πρώτο καρέ. */
@keyframes sheetup-desk {
  from { opacity: 0; transform: translate(-50%, calc(-50% + var(--lift-2))) scale(.99); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes sheetdown-desk {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, calc(-50% + 4px)) scale(.99); }
}
@keyframes modal-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-scale {
  from { opacity: 0; transform: scale(.97) translateY(var(--lift-2)); }
  to   { opacity: 1; transform: none; }
}
@keyframes modal-scale-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(.98) translateY(4px); }
}
/* Το .toast έχει ΒΑΣΗ transform:translateX(-50%) (app.css:713) — το -50%
   πρέπει να υπάρχει σε κάθε καρέ, αλλιώς το toast πετάγεται δεξιά. */
@keyframes toastin {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes toastout {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 6px); }
}
/* Η ΜΟΝΗ υπέρβαση σε όλη την εφαρμογή: .86 → overshoot ~8% → 1. */
@keyframes v-pop { from { transform: scale(.86); } to { transform: none; } }
/* Σκελετός: ΜΟΝΟ opacity. Το σαρωτικό gradient είναι repaint κάθε καρέ
   σε 8–12 μπλοκ ταυτόχρονα, και μοιάζει με κάθε άλλο app. */
@keyframes v-skel    { from { opacity: .5; } to { opacity: 1; } }
@keyframes v-skel-in { from { opacity: 0; } to { opacity: 1; } }
/* Σχεδίασμα γραμμής γραφήματος — ξεκινά κρυφό ΜΕΣΑ στο keyframe, ώστε η
   βάση να μένει ορατή αν το animation δεν τρέξει ποτέ. */
@keyframes v-draw {
  from { stroke-dashoffset: var(--spark-len, 120); }
  to   { stroke-dashoffset: 0; }
}
/* ΔΙΟΡΘΩΣΗ (app.css:1656): το !important μέσα σε keyframes ΑΓΝΟΕΙΤΑΙ από
   το πρότυπο, άρα το keyframe ήταν κενό και το animation νεκρό. */
@keyframes pmc-fill { from { width: 0; } }
/* Πιο ήπιο από 1→.35 (app.css:356), που διάβαζε ως αναβοσβήσιμο. */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ── 3. PRIMITIVE 1 · ΠΑΤΗΜΑ ──────────────────────────────────────────
   Ασύμμετρο επίτηδες: κάτω γρήγορα (120ms, --ease-press), πάνω αργά
   (260ms, --spring). Συμμετρικό πάτημα διαβάζεται λαστιχένιο.

   ΠΡΟΣΟΧΗ ΣΤΗΝ ΕΙΔΙΚΟΤΗΤΑ: το «.seg .chip» (0,2,0) νικάει το «.chip»
   (0,1,0). Αν δεν μπει ρητά εδώ, παίρνει transform χωρίς transition και
   το πάτημα «κόβει». Ίδιο για κάθε στοιχείο που πατιέται. */
.btn, .chip, .seg .chip, .tab, .card.tap, .dash-card.tap, .pmc.tap,
.media-tile, .media-upload-btn, .pcard, .fchip, .variant,
.stepper button, .wallet-chip, .dropzone, .v-press {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform        var(--t-3) var(--spring),
    box-shadow       var(--t-3) var(--spring),
    background-color var(--t-2) var(--ease-fade),
    border-color     var(--t-2) var(--ease-fade),
    color            var(--t-2) var(--ease-fade),
    opacity          var(--t-2) var(--ease-fade);
}
.btn:active, .chip:active, .seg .chip:active, .tab:active, .card.tap:active,
.dash-card.tap:active, .pmc.tap:active, .media-tile:active,
.media-upload-btn:active, .pcard:active, .fchip:active, .variant:active,
.stepper button:active, .wallet-chip:active, .dropzone:active, .v-press:active {
  transition-duration: var(--t-1);
  transition-timing-function: var(--ease-press);
}
/* Στόχος: η ακμή μπαίνει ~2px σε ΚΑΘΕ μέγεθος.
   44px × .92 = 1,8px/ακμή · 120px × .96 = 2,4px · 296px × .985 = 2,2px.
   Αυτός είναι όλος ο λόγος που η κλίμακα έχει τρία σκαλιά αντί για ένα. */
.btn:active, .chip:active, .seg .chip:active, .tab:active, .fchip:active,
.pcard:active, .wallet-chip:active, .v-press:active { transform: scale(var(--press-md)); }

.btn.icon:active, .stepper button:active,
.v-press.v-press-sm:active                          { transform: scale(var(--press-sm)); }

.btn.big:active, .card.tap:active, .dash-card.tap:active, .pmc.tap:active,
.variant:active, .media-tile:active, .media-upload-btn:active,
.dropzone:active, .v-press.v-press-lg:active        { transform: scale(var(--press-lg)); }

/* Η περιοχή αφής ΔΕΝ μικραίνει: το transform είναι οπτικό, το hit area
   μένει στα ≥44px της γραμμής app.css:2233. */

/* Γραμμές μέσα σε λίστα ΔΕΝ συστέλλονται: στα 320px η σειρά είναι 296px
   και μια συστολή .985 μετακινεί την αριστερή τρίχα 2,2px μέσα ενώ η από
   πάνω και η από κάτω μένουν — φαίνεται σπασμένο πλαίσιο. Παίρνουν
   φωτισμό: ακαριαία στο πάτημα, αργό σβήσιμο στο άφημα (κελί iOS). */
.row, .post-plat {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-4) var(--ease-fade);
}
.row:active, .post-plat:active {
  transition-duration: var(--t-0);
  background-color: var(--press-tint);
}

/* Το hover ανήκει στο ποντίκι. Σε οθόνη αφής «κολλάει» μετά το πάτημα και
   η κάρτα μένει σηκωμένη — το πιο καθαρό σημάδι ιστοσελίδας που παριστάνει
   την εφαρμογή. Καθαρίζονται ΟΛΑ τα υπάρχοντα hover, ένα προς ένα, με
   επαναφορά ΑΚΡΙΒΩΣ στις τιμές βάσης. */
@media (hover: none) {
  .btn:hover              { opacity: 1; box-shadow: none; }
  .card.tap:hover,
  .dash-card.tap:hover,
  .pmc.tap:hover,
  .media-tile:hover       { transform: none; box-shadow: var(--shadow); }
  .media-upload-btn:hover { border-color: var(--line); background: var(--card-2); }
  .wallet-chip:hover      { background: var(--card); border-color: var(--line); }
  .screen-back:hover      { color: var(--muted); }
  .tab:not(.active):hover { background: transparent; color: var(--muted); }
  /* Το .row έχει hover (app.css:464)· το .post-plat ΔΕΝ έχει, γι' αυτό δεν
     μπαίνει εδώ — ένας κανόνας hover πάνω του θα έσβηνε το .post-plat.on. */
  .row:hover              { background-color: transparent; }
}
/* Με ποντίκι, το πάτημα ΔΙΑΤΗΡΕΙ το σήκωμα του hover αντί να το πετάει
   κάτω τη στιγμή που πατάς — που είναι το ακριβώς αντίθετο από feedback. */
@media (hover: hover) {
  .card.tap:active,
  .dash-card.tap:active,
  .pmc.tap:active,
  .media-tile:active { transform: translateY(-2px) scale(var(--press-lg)); }
}

/* ── 4. PRIMITIVE 2 · ΑΛΛΑΓΗ ΟΘΟΝΗΣ ────────────────────────────────────
   Το route() σβήνει και ξαναχτίζει το #main: cross-fade παλιάς/νέας οθόνης
   είναι αδύνατο. Άρα μόνο είσοδος — και ΜΟΝΟ fade, χωρίς διαδρομή, γιατί
   τη διαδρομή την κουβαλούν τα παιδιά. Ένα επίπεδο κίνησης ανά βάψιμο:
   αν κινηθεί και το δοχείο, τα πάντα κινούνται δύο φορές και γίνεται λάσπη.
   Χρησιμοποιεί «fadein», ΟΧΙ «rise» με --rise-y:0 — το --rise-y είναι
   κληρονομούμενο και θα ακύρωνε την κίνηση κάθε .pmc / .area-analytics. */
.screen { animation: fadein var(--t-3) var(--ease-fade) both; }

/* Το repaintPost() ξαναχτίζει την οθόνη σε ΚΑΘΕ τσεκάρισμα δικτύου. Χωρίς
   αυτό, κάθε επιλογή σβήνει και ξαναφέρνει όλη την οθόνη. Το CSS δεν μπορεί
   να ξεχωρίσει πλοήγηση από ξαναβάψιμο — το JS το ξέρει (hook #1).
   Αν η κλάση δεν μπει ποτέ, τίποτα δεν χαλάει. */
#main.no-enter .screen,
#main.no-enter .stagger > *,
#main.no-enter .dash-card,
#main.no-enter .pmc,
#main.no-enter .area-analytics { animation: none; }

/* ── 5. PRIMITIVE 3 · ΕΜΦΑΝΙΣΗ ΛΙΣΤΑΣ ──────────────────────────────────
   Καταρράκτης μόνο σε ΧΩΡΙΣΤΕΣ κάρτες με κενό ≥8px. Cap στα 6: στα 400ms
   που κάνει σήμερα το route() το τελευταίο στοιχείο φτάνει αφού έχεις ήδη
   αρχίσει να διαβάζεις το πρώτο — τότε η κίνηση δεν είναι υποδοχή, είναι
   διακοπή. Συνολικό παράθυρο τώρα: 200ms delay + 260ms = 460ms.

   ΤΑ !important ΕΙΝΑΙ ΥΠΟΧΡΕΩΤΙΚΑ, ΟΧΙ ΚΑΠΡΙΤΣΙΟ: το route() (app.js:871)
   γράφει inline animationDelay σε ΚΑΘΕ ένα από αυτά τα στοιχεία, και το
   inline νικάει το κανονικό CSS. Χωρίς !important ολόκληρο το primitive
   είναι διακοσμητικό — ο μετρητής του route() τρέχει συνεχόμενα σε όλη την
   οθόνη (η 10η κάρτα περιμένει 400ms) και τίποτα από εδώ δεν ισχύει.
   Φεύγουν όλα με το hook #2, που είναι και η σωστή λύση. */
.stagger > * {
  --rise-y: var(--lift-1);
  animation: rise var(--t-3) var(--spring) both;
}
.stagger > *:nth-child(1)   { animation-delay: 0ms !important; }
.stagger > *:nth-child(2)   { animation-delay: calc(var(--stagger) * 1) !important; }
.stagger > *:nth-child(3)   { animation-delay: calc(var(--stagger) * 2) !important; }
.stagger > *:nth-child(4)   { animation-delay: calc(var(--stagger) * 3) !important; }
.stagger > *:nth-child(5)   { animation-delay: calc(var(--stagger) * 4) !important; }
.stagger > *:nth-child(n+6) { animation-delay: calc(var(--stagger) * 5) !important; }

/* Το κείμενο δεν κινείται ποτέ μόνο του — κινείται το δοχείο του. Αν ένας
   τίτλος βρεθεί ΑΜΕΣΟ παιδί του .stagger, θα έπαιρνε δική του κίνηση: τα
   ελληνικά είναι ~30% μακρύτερα και η γραμμή ξανασπάει ενώ τη διαβάζεις. */
.stagger > .h1, .stagger > .h2, .stagger > .sub,
.stagger > .section-title { animation: none; }

/* Φρένο ασφαλείας: λίστα με τρίχες μπαίνει ΩΣ ΕΝΑ σώμα. Αν κάποιος βάλει
   .stagger πάνω σε .group ή .pubp-list, οι γραμμές θα εμφανίζονταν σκαλωτά
   και οι διαχωριστικές τρίχες θα έφταναν πριν από τη σειρά τους. */
.group.stagger > .row, .pubp-list.stagger > .pubp-item { animation: none; }

/* Χορδές γραφημάτων: ίδιο βήμα με τη λίστα, cap στα 6 (ήταν 45ms × 14). */
.bar-chart .bar {
  animation: bar-rise var(--t-3) var(--spring) both;
  animation-delay: calc(min(var(--bar-i, 0), 5) * var(--stagger));
}
/* ΔΙΟΡΘΩΣΗ (app.css:1712, 1813): οι γραμμές είχαν ΒΑΣΗ
   stroke-dashoffset = όλο το μήκος, δηλαδή αόρατες, και φαίνονταν μόνο αν
   έτρεχε το animation — σε headless render, σε παγωμένο animation ή σε
   σφάλμα JS το γράφημα έβγαινε άδειο. Τώρα η ΒΑΣΗ είναι ορατή και το
   κρύψιμο ζει μέσα στο keyframe. */
.pmc-line, .spark-line, .area-line {
  stroke-dashoffset: 0;
  animation: v-draw var(--t-5) var(--spring) both;
}
.pmc-area, .area-fill { animation: fadein var(--t-4) var(--ease-fade) both; }
.adv-progress-fill { animation: pmc-fill var(--t-5) var(--ease-swap) both; }

/* ── 6. PRIMITIVE 4 · ΕΠΙΦΑΝΕΙΕΣ ──────────────────────────────────────
   Το σκοτείνιασμα φτάνει ΠΡΙΝ την επιφάνεια (180 < 380): πρώτα σβήνει ο
   κόσμος από πίσω, μετά προσγειώνεται το φύλλο. */
.sheet-backdrop { animation: fadein var(--t-2) var(--ease-fade) both; }
.sheet { animation: sheetup var(--t-4) var(--spring) both; }
/* Πάνω από 800px το φύλλο γίνεται κεντρικό παράθυρο (app.css:405) — δεν
   έχει ακμή προέλευσης, άρα η κίνηση γίνεται βάθος αντί για ολίσθηση. */
@media (min-width: 800px) {
  .sheet { animation: sheetup-desk var(--t-4) var(--spring) both; }
}
.modal-backdrop { animation: modal-fade var(--t-2) var(--ease-fade) both; }
.modal-card { animation: modal-scale var(--t-4) var(--spring) both; }
/* Η έξοδος του modal ΠΡΕΠΕΙ να είναι ≤180ms: τόσο ακριβώς περιμένει το
   setTimeout στο openModal() πριν κάνει remove. Μεγαλύτερη = κομμένη. */
.modal-root.modal-out .modal-backdrop { animation: modal-fade-out var(--t-2) var(--ease-exit) both; }
.modal-root.modal-out .modal-card     { animation: modal-scale-out var(--t-2) var(--ease-exit) both; }
/* Το pricing modal είναι min(1180px) — scale .97 σημαίνει 35px συστολή,
   που στο desktop διαβάζεται ως τράνταγμα. Μόνο fade. */
.modal-card-pricing { animation-name: modal-fade; }
.modal-root.modal-out .modal-card-pricing { animation-name: modal-fade-out; }

/* Έτοιμο για την ώρα που το openSheet() θα αποκτήσει έξοδο (hook #3).
   Μέχρι τότε το φύλλο κλείνει ακαριαία — δηλωμένο, όχι λάθος.
   Ξεχωριστά keyframes αντί για «reverse»: το reverse αντιστρέφει ΚΑΙ την
   καμπύλη, δηλαδή το --ease-exit θα επιβράδυνε αντί να επιταχύνει. */
.sheet-out .sheet          { animation: sheetdown var(--t-4-out) var(--ease-exit) both; }
.sheet-out .sheet-backdrop { animation: fadeout var(--t-3-out) var(--ease-exit) both; }
@media (min-width: 800px) {
  .sheet-out .sheet { animation: sheetdown-desk var(--t-4-out) var(--ease-exit) both; }
}

/* ── 7. PRIMITIVE 5 · ΑΛΛΑΓΗ ΚΑΤΑΣΤΑΣΗΣ ────────────────────────────────
   Εδώ το στοιχείο ΕΠΙΒΙΩΝΕΙ (αλλάζει className), άρα transition.
   Το .tab και το .seg .chip ΔΕΝ μπαίνουν εδώ: τα καλύπτει ήδη το
   primitive 1, και μια δεύτερη δήλωση transition θα έσβηνε το transform
   τους αφήνοντας το πάτημα να «κόβει». */
.badge, .cdot, .pubp-item, .wiz-steps i, .switch .knob {
  transition:
    background-color var(--t-3) var(--ease-swap),
    color            var(--t-3) var(--ease-swap),
    opacity          var(--t-3) var(--ease-swap);
}
.switch .knob::after { transition: transform var(--t-3) var(--spring); }
/* Η μπάρα κινείται ΜΟΝΟ όταν ένα δίκτυο απαντήσει. Καμία εκτίμηση, κανένα
   χρονόμετρο — μια μπάρα που γεμίζει μόνη της λέει ψέματα. */
.pubp-fill { transition: width var(--t-4) var(--ease-swap); }

/* Η ΜΙΑ γιορτή της εφαρμογής: το σήμα του δικτύου όταν επιβεβαιώνει.
   Το app.js γράφει li.className ίδιο σε κάθε poll, άρα το animation
   ξαναρχίζει ΜΟΝΟ σε πραγματική αλλαγή κατάστασης. Όχι πράσινος κύκλος
   με λευκό τσεκ — το ίδιο το σήμα του δικτύου κάθεται στη θέση του. */
.pubp-item.is-ok .pubp-mark { animation: v-pop var(--t-4) var(--spring-pop) both; }
/* Το <b> της κατάστασης ξαναγεννιέται κάθε ~1.2s από το polling:
   οτιδήποτε animation εκεί θα σπαρτάραγε 50 φορές ανά δημοσίευση. */
.pubp-state b { animation: none; }

/* ── 8. PRIMITIVE 6 · ΦΟΡΤΩΣΗ ──────────────────────────────────────────
   α) εμφανίζεται μόνο αν η αναμονή ξεπεράσει τα 250ms — αλλιώς ο σκελετός
      είναι ο ίδιος μια αναλαμπή, χειρότερη από το τίποτα,
   β) όλα τα μπλοκ αναπνέουν ΣΤΗΝ ΙΔΙΑ ΦΑΣΗ. Ξεχωριστά delay ανά μπλοκ
      δίνουν «λαμπάκια χριστουγεννιάτικου δέντρου».
   Το δοχείο θέλει ΠΑΝΤΑ aria-hidden: το #main είναι aria-live="polite"
   (index.html:30) και θα διάβαζε τον σκελετό. Δεν είναι πληροφορία. */
.v-skels { animation: v-skel-in var(--t-2) var(--ease-fade) var(--skel-wait) backwards; }
.v-skel {
  display: block;
  width: var(--skel-w, 100%);
  max-width: 100%;
  height: var(--skel-h, 16px);
  border-radius: var(--r-s);
  background: var(--skel-fill);
  animation: v-skel var(--t-skel) var(--ease-fade) infinite alternate;
}
.v-skel + .v-skel { margin-top: 10px; }
.v-skel.v-skel-title { --skel-h: 24px; --skel-w: 62%; }
.v-skel.v-skel-line  { --skel-h: 14px; }
.v-skel.v-skel-block { --skel-h: 120px; border-radius: var(--r); }

/* ── 9. PRIMITIVE 7 · TOAST ────────────────────────────────────────────
   Το app.js βάζει .out και κάνει remove μετά από 350ms: η έξοδος στα
   ~177ms χωράει με περιθώριο. */
.toast { animation: toastin var(--t-3) var(--spring) both; }
.toast.out { animation: toastout var(--t-3-out) var(--ease-exit) both; }

/* ── 10. ΤΙ ΔΕΝ ΚΙΝΕΙΤΑΙ — ΓΡΑΜΜΕΝΟ, ΟΧΙ ΥΠΟΝΟΟΥΜΕΝΟ ──────────────────
   Το να είναι δηλωμένο εμποδίζει τον επόμενο να προσθέσει «λίγη ακόμα».

   Η κάτω μπάρα είναι έπιπλο: υπάρχει πριν κοιτάξεις. Και επειδή το
   renderTabbar() την ξαναχτίζει με innerHTML σε κάθε πλοήγηση, το ενεργό
   χαπάκι ΔΕΝ μπορεί να γλιστρήσει — το στοιχείο δεν επιβιώνει και το
   γλίστρημα θα εμφανιζόταν ως αναπήδηση από λάθος θέση. */
.tabbar { animation: none; }

/* Τα αρχεία του χρήστη φορτώνουν ασύγχρονα: ένα fade δεμένο στο δοχείο
   τελειώνει πριν φτάσουν τα pixel και βλέπεις δύο αναλαμπές. */
.media-thumb, .post-preview img, .post-preview video,
.v-quiet, .v-quiet * { animation: none; }

/* Η αλλαγή θέματος είναι ακαριαία. Καθολικό cross-fade χρωμάτων = όλη η
   σελίδα ξαναβάφεται για 300ms και μοιάζει με βλάβη φωτισμού (hook #4). */
html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after {
  transition: none !important;
  animation: none !important;
}

/* Το backdrop-filter δεν κινείται ποτέ — από τα ακριβότερα πράγματα που
   ξέρει ο browser. Κινείται μόνο η opacity του σκούρου στρώματος, μέσω
   των keyframes παραπάνω· εδώ δεν χρειάζεται δήλωση, μόνο η υπόσχεση.

   Το δαχτυλίδι εστίασης (app.css:754) εμφανίζεται στο πρώτο καρέ: το
   outline δεν μπαίνει σε καμία λίστα transition αυτού του αρχείου. */

/* ── 11. PREFERS-REDUCED-MOTION ────────────────────────────────────────
   Ο υπάρχων κανόνας (app.css:190-192) μηδενίζει τη ΔΙΑΡΚΕΙΑ αλλά όχι το
   DELAY: με το inline delay του route() ένα στοιχείο έμενε αόρατο έως
   400ms ακόμη και εδώ.

   ΠΡΟΣΟΧΗ: το transition-property ΔΕΝ μπαίνει στο «*». Θα δημιουργούσε
   μετάβαση χρώματος σε στοιχεία που δεν είχαν καμία — και το πρώτο θύμα
   θα ήταν η αλλαγή θέματος, που θα γινόταν καθολικό cross-fade 180ms σε
   κάθε στοιχείο της σελίδας. Ό,τι δηλώνεται εδώ είναι στοχευμένο. */
/* ── 12. ΤΕΣΣΕΡΑ ΠΡΟΑΙΡΕΤΙΚΑ HOOKS ΣΤΟ app.js ─────────────────────────
   Το CSS δουλεύει και χωρίς αυτά. Με αυτά, τέσσερα πράγματα γίνονται σωστά.

   #1 — ΞΑΝΑΒΑΨΙΜΟ ≠ ΠΛΟΗΓΗΣΗ (το πιο σημαντικό)
       Το repaintPost() ξαναχτίζει την οθόνη σε κάθε τσεκάρισμα δικτύου,
       οπότε η οθόνη κάνει fade-in ξανά σε κάθε επιλογή. Στο route()
       (app.js:845), δίπλα στο υπάρχον sameScreen:
           main.classList.toggle('no-enter', sameScreen);

   #2 — ΤΑ DELAY ΑΝΗΚΟΥΝ ΣΤΟ CSS (φεύγουν έξι !important)
       Σβήσε τις τρεις γραμμές στο τέλος του route() (app.js:870-872):
           main.querySelectorAll('.screen, .stagger > *, .dash-card')
               .forEach((node, i) => { node.style.animationDelay = ... });
       Χωρίς αυτές, κάθε λίστα μετράει από το δικό της 1ο στοιχείο· τώρα ο
       μετρητής τρέχει συνεχόμενα σε όλη την οθόνη. Μετά τη διαγραφή,
       αφαίρεσε τα !important της ενότητας 5.

   #3 — ΕΞΟΔΟΣ ΦΥΛΛΟΥ (προαιρετικό· σήμερα κλείνει ακαριαία)
       Στο openSheet() (app.js:368), αντί για σκέτο wrapper.remove():
           wrapper.classList.add('sheet-out');
           setTimeout(() => wrapper.remove(), 260);
       Το 260 πρέπει να ισούται με το --t-4-out (258ms).

   #4 — ΑΚΑΡΙΑΙΑ ΑΛΛΑΓΗ ΘΕΜΑΤΟΣ
       Στον handler του #themeToggle (app.js:8557), γύρω από την αλλαγή
       του data-theme:
           document.documentElement.classList.add('theme-swap');
           requestAnimationFrame(() => requestAnimationFrame(() =>
             document.documentElement.classList.remove('theme-swap')));
   ─────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   ΠΡΟΣΦΑΤΑ POSTS — κάρτα
   Μετρημένο στο παλιό, στα 320px: το badge «Δημοσιευμένο» στριμωχνόταν
   στα 38–70px και έσπαγε σε «Δημο/σιευμ/ένο», τα chips δικτύων έπιαναν
   3 σειρές, και 4 posts ήθελαν 856px. Στα 1280px η αντίθετη αποτυχία:
   κάρτες απλωμένες άδειες, badge να κρέμεται τέρμα δεξιά.

   Η αιτία ήταν μία: τίτλος και κατάσταση στην ίδια γραμμή με
   .flex-between. Δύο στοιχεία που θέλουν χώρο, παλεύουν για τον ίδιο.

   Τώρα η κατάσταση φεύγει από τη γραμμή του τίτλου και γίνεται λέξη στη
   γραμμή meta. Και όταν όλα πήγαν καλά ΔΕΝ γράφεται καθόλου: το λένε ήδη
   τα σήματα των δικτύων. Ήσυχη επιτυχία, δυνατή εξαίρεση.
   ═══════════════════════════════════════════════════════════════════════ */
.rpost {
  /* Το .card δεν ορίζει color και το στοιχείο είναι <button>: χωρίς αυτό
     ο τίτλος παίρνει το προεπιλεγμένο μαύρο του browser και σε σκούρο θέμα
     γίνεται 1,16:1 — δηλαδή αόρατος. Μετρημένο, όχι υποθετικό. */
  color: var(--ink);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  padding: 14px;
  text-align: left;
}
.rpost + .rpost { margin-top: 10px; }

/* Το thumbnail είναι το μόνο οπτικό στην οθόνη — του δίνουμε χώρο.
   Μπαίνει ως background, ΟΧΙ <img>: το /me/media/{id}/raw σερβίρει το
   πρωτότυπο αρχείο, οπότε σε post με βίντεο ένα <img> θα έδειχνε
   σπασμένη εικόνα. Το background απλώς δεν ζωγραφίζει. */
.rpost-thumb {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--card-2) center/cover no-repeat;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--muted);
  overflow: hidden;
  flex: none;
}
.rpost-thumb svg { width: 22px; height: 22px; }
/* Το ίδιο το αρχείο μέσα στο πλακίδιο — εικόνα ή πρώτο καρέ βίντεο. */
.thumb-media {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  background: var(--card-2);
}
.rpost-body { min-width: 0; display: grid; gap: 5px; }

/* Δύο γραμμές και τέλος. Οι ελληνικοί τίτλοι είναι μακριοί· χωρίς όριο
   μία κάρτα έφτανε τα 194px και η λίστα γινόταν σεντόνι. */
.rpost-title {
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.012em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rpost-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  min-width: 0;
}
.rpost-sep { opacity: .5; }
/* Η κατάσταση γράφεται ΜΟΝΟ όταν δεν είναι «όλα καλά». Λέξη πάντα —
   το --warn σε λευκό δίνει 2,1:1 και δεν φτάνει ούτε για γραφικό, άρα
   το χρώμα δεν επιτρέπεται να κουβαλά μόνο του το νόημα. */
.rpost-state { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 600; }
.rpost-state .cdot { margin: 0; }

/* Τα σήματα των δικτύων αντικαθιστούν τα chips κειμένου («✓ Facebook
   Σελίδα»), που στα 320px γίνονταν τοίχος τριών σειρών. */
.rpost-nets { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rpost-net { width: 19px; height: 19px; display: grid; place-items: center; color: var(--ink); flex: none; }
.rpost-net svg { width: 19px; height: 19px; display: block; }
/* Απέτυχε: ξεθωριάζει. Το πόσα πέτυχαν το λέει η λέξη δίπλα, ώστε να
   μη στηρίζεται τίποτα στη διαφορά διαφάνειας. */
.rpost-net.off { opacity: .3; }

@media (min-width: 700px) {
  /* Στον υπολογιστή το πρόβλημα ήταν το αντίθετο: άδειο πλάτος και το
     badge εξόριστο δεξιά. Μεγαλύτερο thumbnail, και η meta πάει δεξιά
     όπου υπάρχει όντως χώρος — χωρίς να αφήνει κενό στη μέση. */
  .rpost {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
  }
  .rpost-thumb { width: 88px; height: 88px; border-radius: 16px; }
  .rpost-title { font-size: 16.5px; -webkit-line-clamp: 2; }
  .rpost-side {
    display: grid;
    justify-items: end;
    gap: 8px;
    flex: none;
  }
}
/* Στο κινητό η στήλη «side» δεν υπάρχει ως στήλη — τα παιδιά της
   ρέουν μέσα στο body, αλλιώς θα έσπαγε το grid δύο στηλών. */
@media (max-width: 699px) {
  .rpost-side { display: contents; }
  /* Χωρίς αυτό τα σήματα προσγειώνονται στη στήλη του thumbnail,
     δηλαδή κάτω αριστερά, αντί να ευθυγραμμιστούν με το κείμενο. */
  .rpost-side > .rpost-nets { grid-column: 2; margin-top: 2px; }
}

/* ── Ακύρωση συνδρομής ────────────────────────────────────────────────
   Ζει στο τέλος της οθόνης πακέτων, με ήσυχο τόνο: είναι διαθέσιμη, δεν
   προτείνεται. Ταυτόχρονα δεν κρύβεται — ο πελάτης που θέλει να φύγει και
   δεν βρίσκει πώς, φεύγει θυμωμένος και το λέει. */
.cancel-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card-2);
}
.cancel-zone-txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.cancel-zone-txt b { font-size: 15px; }
.cancel-zone-txt span { font-size: 13.5px; color: var(--muted); }
.cancel-zone-btn { flex: none; color: var(--bad); }
.cancel-zone-btn:hover { border-color: var(--bad); }

/* Τι ακριβώς χάνεται — με νούμερα, όχι με «τα δεδομένα σου». */
.cancel-loss {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--r-s);
  background: var(--bad-soft);
  color: var(--ink);
}
.cancel-loss ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.cancel-loss li { font-weight: 600; }
.cancel-loss .small { color: var(--ink); opacity: .75; }

@media (max-width: 420px) {
  .cancel-zone { flex-direction: column; align-items: stretch; }
  .cancel-zone-btn { width: 100%; }
}

/* Εικονίδιο ενέργειας που αφαιρεί κάτι — ξεχωρίζει χωρίς να ουρλιάζει. */
.r-icon-danger { color: var(--bad); background: var(--bad-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   ΚΑΝΕ ΔΙΑΦΗΜΙΣΗ ΕΝΑ POST ΠΟΥ ΑΝΕΒΑΣΕΣ
   Οριζόντια λωρίδα κάτω από το «Φτιάξε την πρώτη». Λωρίδα και όχι πλέγμα
   επίτηδες: είναι δευτερεύουσα διαδρομή — δεν επιτρέπεται να σπρώξει κάτω
   τις πραγματικές διαφημίσεις σε μια οθόνη κινητού.
   ═══════════════════════════════════════════════════════════════════════ */
.boost-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  /* Το scrollbar κρύβεται· η κίνηση των καρτών δείχνει ότι κυλάει. */
  scrollbar-width: thin;
}
.boost-card {
  flex: 0 0 auto;
  /* 250px: στα 360px φαίνεται μία ολόκληρη κάρτα και μισή δίπλα — το μισό
     είναι που λέει «κυλάει». Στα 210px ο τίτλος έμενε με 90px και κοβόταν. */
  width: 250px;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  text-align: left;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  box-shadow: var(--shadow);
  cursor: pointer;
  min-height: 76px;
}
.boost-card:hover { background: var(--card-2); }
.boost-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.boost-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--card-2) center/cover no-repeat;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--muted);
}
.boost-thumb svg { width: 20px; height: 20px; }

.boost-body { min-width: 0; display: grid; gap: 3px; }
.boost-fmt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.boost-title {
  font-size: 14px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.boost-nets { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.boost-net { width: 14px; height: 14px; display: grid; place-items: center; color: var(--muted); }
.boost-net svg { width: 14px; height: 14px; display: block; }
.boost-go { color: var(--muted); display: grid; place-items: center; }
.boost-go svg { width: 18px; height: 18px; }
.boost-card:hover .boost-go { color: var(--ink); }

@media (min-width: 700px) {
  /* Στον υπολογιστή υπάρχει πλάτος: πλέγμα αντί για λωρίδα που κυλάει. */
  .boost-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    overflow: visible;
  }
  .boost-card { width: auto; }
}

/* ── Προγραμματισμένη δημοσίευση ──────────────────────────────────────────── */
/* Η σειρά αναμονής μπαίνει ΠΑΝΩ από το ιστορικό: τι θα γίνει προηγείται του
   τι έγινε. Κάρτα σε τρεις στήλες — μικρογραφία, κείμενο, ενέργειες — που στο
   κινητό γίνεται δύο σειρές αντί να στριμώξει τρία κουμπιά σε 320px. */
.sched-list { display: grid; gap: 10px; }

.sched-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas: 'thumb body' 'acts acts';
  gap: 12px;
  align-items: center;
  padding: 12px;
}
.sched-card .rpost-thumb { grid-area: thumb; }
.sched-body { grid-area: body; min-width: 0; }
.sched-acts {
  grid-area: acts;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sched-acts .btn { flex: 1 1 auto; min-width: 96px; }

.sched-when {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.sched-title {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sched-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sched-err { color: var(--bad); font-weight: 600; }

/* Από tablet και πάνω χωράνε και τα κουμπιά στην ίδια σειρά. */
@media (min-width: 700px) {
  .sched-card {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: 'thumb body acts';
  }
  .sched-acts { flex-wrap: nowrap; }
  .sched-acts .btn { flex: 0 0 auto; }
}

/* ── API & MCP: τα βήματα σύνδεσης ─────────────────────────────────────────
   Αριθμημένα βήματα σαν του Higgsfield: ένας αριθμός, τίτλος, και από κάτω
   ό,τι χρειάζεται. Στο κινητό ο αριθμός μένει δίπλα, δεν στοιβάζεται. */
.mcp-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mcp-step:last-child { border-bottom: 0; }
.mcp-n {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mcp-step .flex { flex-wrap: wrap; }
.mcp-step input { min-width: 0; }

/* ── Σφραγίδα κόστους στα κουμπιά ──────────────────────────────────────────
   Πόσα credits θα φάει αυτό το πάτημα, ΠΡΙΝ το πατήσεις. Ένα βίντεο 4K
   κοστίζει 1.050 credits· μέχρι τώρα ο πελάτης το μάθαινε από το υπόλοιπο.
   Μονόχρωμο, κατά το design system: η διάκριση γίνεται με αντίθεση. */
.cr-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--r-btn);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.7;
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
  flex: 0 0 auto;
}
.cr-tag::before { content: '◇'; font-family: inherit; opacity: .7; }
/* Δεν φτάνουν: το λέμε με σύμβολο και βάρος, όχι με χρώμα. */
.cr-tag.short { outline: 1px solid currentColor; font-weight: 800; }
.cr-tag.short::before { content: '◆'; }
.ai-act .cr-tag { margin-left: 4px; font-size: 10.5px; }

/* —— Δημιουργίες στούντιο: το έργο μπροστά, τα λόγια πίσω —— */
.gen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  align-items: start;
}
@media (min-width: 900px) {
  .gen-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.gen-tile {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-2);
  box-shadow: var(--shadow);
  font: inherit;
  color: inherit;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.gen-tile.tap { cursor: pointer; }
.gen-tile.tap:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.gen-tile.tap:active { transform: translateY(-1px) scale(.985); }
.gen-media {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--card-2);
  pointer-events: none;
  transition: transform .5s var(--ease-out);
}
.gen-tile.tap:hover .gen-media { transform: scale(1.035); }
.gen-badge {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: var(--r-btn);
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .62); color: #fff;
  pointer-events: none;
}
.gen-badge svg { width: 14px; height: 14px; }
/* Το μοντέλο και ο χρόνος — μόνο όταν κοιτάς το πλακάκι. */
.gen-hover {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 22px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .74), transparent);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.gen-tile:hover .gen-hover,
.gen-tile:focus-visible .gen-hover { opacity: 1; transform: none; }
.gen-hover-model {
  font-size: 11.5px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gen-hover-time { font-size: 10.5px; opacity: .78; white-space: nowrap; }

/* Όσο φτιάχνεται */
.gen-tile.is-working { background: var(--card-2); }
.gen-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--line) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: genShimmer 1.6s linear infinite;
}
@keyframes genShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.gen-working {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.gen-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  animation: genSpin .9s linear infinite;
}
@keyframes genSpin { to { transform: rotate(360deg); } }

/* Όταν απέτυχε */
.gen-tile.is-failed {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--bad-soft); color: var(--bad); cursor: pointer;
}
.gen-fail-ico svg { width: 20px; height: 20px; }
.gen-fail-txt { font-size: 11.5px; font-weight: 600; }

/* —— Το πάνελ μιας δημιουργίας —— */
.gen-stage {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.gen-stage img { display: block; width: 100%; max-height: 56vh; object-fit: contain; background: var(--card-2); }
/* Το βίντεο σε μαύρο: έτσι το περιμένει το μάτι, και στα δύο θέματα. */
.gen-stage video { display: block; width: 100%; max-height: 56vh; object-fit: contain; background: #000; }
.gen-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gen-chip {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card-2);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}
.gen-prompt {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card-2);
}
.gen-prompt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.gen-prompt p {
  margin: 6px 0 0;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.gen-copy {
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: transparent; color: var(--ink);
  padding: 3px 9px; font: inherit; font-size: 11px; font-weight: 650;
  cursor: pointer;
  transition: background .18s var(--ease-out);
}
.gen-copy:hover { background: var(--line); }

/* —— Μπάρα προόδου —— */
.pbar-head { margin-bottom: 6px; }
.pbar-pct { font-size: 12px; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.pbar-track {
  position: relative;
  height: 6px; border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.pbar-fill {
  height: 100%; width: 0;
  border-radius: 99px;
  background: var(--accent);
  transition: width .45s var(--ease-out);
}
/* Όταν ΔΕΝ ξέρουμε ποσοστό: κινούμενη λωρίδα, χωρίς νούμερο. Ένα ψεύτικο
   «90%» είναι χειρότερο από το να παραδεχτείς ότι δεν ξέρεις. */
.pbar-track.is-indeterminate .pbar-fill {
  width: 34%;
  transition: none;
  animation: pbarSlide 1.25s var(--ease-out) infinite;
}
@keyframes pbarSlide {
  from { transform: translateX(-115%); }
  to   { transform: translateX(330%); }
}

/* Πρόοδος πάνω στο πλακάκι που φτιάχνεται */
.gen-progress {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  height: 4px; border-radius: 99px;
  background: rgba(128, 128, 128, .35);
  overflow: hidden;
}
.gen-progress > i {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: var(--ink);
  transition: width .5s var(--ease-out);
}
.gen-pct {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* —— Θέσεις ομάδας —— */
.seatbar {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card-2);
}
.seatbar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.seatbar-track {
  margin-top: 8px; height: 5px; border-radius: 99px;
  background: var(--line); overflow: hidden;
}
.seatbar-track > i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--ink);
  transition: width .45s var(--ease-out);
}

/* —— Τι βγάζεις με ένα πακέτο —— */
.pg-outcomes {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card-2);
}
.pg-outcomes-head {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.pg-outcome {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; line-height: 1.45;
  padding: 3px 0;
}
.pg-outcome b {
  min-width: 42px; text-align: right;
  font-size: 15px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pg-outcomes-note {
  margin: 8px 0 0;
  font-size: 11.5px; color: var(--muted);
}

/* —— AI Social Media Manager —— */
.smm {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card-2);
}
.smm-head { display: flex; align-items: flex-start; gap: 11px; }
.smm-badge {
  flex: none;
  width: 32px; height: 32px; border-radius: var(--r-btn);
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
}
.smm-badge svg { width: 17px; height: 17px; }
.smm-name { display: block; font-size: 14.5px; letter-spacing: -.01em; }
.smm-does { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.smm-knows {
  margin: 11px 0 0;
  padding: 0 0 0 2px;
  list-style: none;
}
.smm-knows li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.smm-knows li::before {
  content: '';
  position: absolute; left: 3px; top: .62em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--muted); opacity: .6;
}
.smm-blocked {
  margin: 11px 0 0;
  font-size: 12.5px; line-height: 1.45;
  color: var(--muted);
}
.smm > .btn { margin-top: 13px; }
.smm-slot:not(:empty) { margin-top: 4px; }

/* —— «Δουλεύει τώρα»: φως που τρέχει γύρω από το κουμπί ——
   Το ζητούμενο ήταν «hyperframes γύρω-γύρω». Το σύστημα απαγορεύει
   αναπηδήσεις και τρεμουλιάσματα, αλλά ΔΕΝ απαγορεύει σταθερή, γραμμική
   κίνηση: εδώ είναι ένα φως που κάνει κύκλους στο περίγραμμα με σταθερή
   ταχύτητα, μονόχρωμο. Λέει «τρέχει» χωρίς να παριστάνει πρόοδο που δεν
   ξέρουμε — γι' αυτό δεν έχει ούτε ποσοστό ούτε τέρμα. */
.btn.is-working {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn.is-working::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 250deg,
    currentColor 330deg,
    currentColor 355deg,
    transparent 360deg);
  /* Μόνο το περίγραμμα φωτίζεται, όχι όλο το κουμπί. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btnOrbit 1.15s linear infinite;
  pointer-events: none;
  opacity: .9;
}
@keyframes btnOrbit { to { transform: rotate(360deg); } }

/* Το ίδιο σήμα για τον AI Social Media Manager όσο γράφει. */
.smm .btn.is-busy { position: relative; isolation: isolate; overflow: hidden; }
.smm .btn.is-busy::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg,
    currentColor 330deg, currentColor 355deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btnOrbit 1.15s linear infinite;
  pointer-events: none;
}

/* —— Κάθε κουμπί, μία γραμμή ——
   Σε κινητό οι φράσεις έσπαγαν στη μέση («Μαζικό / ανέβασμα», «Drafts / (2)»,
   «Τι μπορώ / να κάνω;») και η οθόνη έμοιαζε στριμωγμένη. Τα κουμπιά μένουν σε
   μία γραμμή· όπου δεν χωράνε, μικραίνει το padding, όχι το νόημα. */
.btn, .chip, .quick-action, .fchip, .pg-cta {
  white-space: nowrap;
}
.btn > span, .chip > span { flex: none; }

@media (max-width: 560px) {
  .btn.small { height: 38px; font-size: 14px; padding: 0 12px; gap: 6px; }
  .btn.small svg { width: 17px; height: 17px; }
  .chip { padding: 6px 11px; font-size: 13px; }
  /* Οι σειρές με πολλά κουμπιά κυλούν πλάγια αντί να τυλίγονται σε τρεις
     σειρές μισών λέξεων. */
  .btn-row-scroll {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .btn-row-scroll::-webkit-scrollbar { display: none; }
  .btn-row-scroll > * { flex: none; }
}

/* Τα εικονίδια στη ΓΡΑΜΜΗ του κειμένου, όχι πιο ψηλά. */
.btn svg, .chip svg { display: block; flex: none; }
.btn { line-height: 1; }

/* Textarea που ακολουθεί το κείμενο. */
textarea.autogrow {
  min-height: 92px;
  resize: none;
  overflow-y: hidden;
  transition: height .16s var(--ease-out);
}

/* —— Ενέργειες κάτω από μια δημιουργία ——
   Μικρά κουτάκια σε μία σειρά, ακριβώς κάτω από την εικόνα. Πριν ήταν πέντε
   κουμπιά σε όλο το πλάτος, στοιβαγμένα κάτω από την οδηγία: έπρεπε να
   κυλήσεις μισή οθόνη για να κάνεις το προφανές. */
.gen-acts {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 10px;
}
.gen-act {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 620;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s var(--ease-out), transform .18s var(--ease-out);
}
.gen-act:hover { background: var(--card-2); }
.gen-act:active { transform: scale(.97); }
.gen-act:disabled { opacity: .45; cursor: default; }
.gen-act svg { width: 16px; height: 16px; display: block; }
.gen-act > span { display: flex; flex: none; }
.gen-act.is-icon { padding: 0; width: 38px; justify-content: center; }
/* Η διαγραφή ξεχωρίζει, όπως ζητήθηκε: κόκκινη. */
.gen-act.is-danger { color: var(--danger-ink, #D92D20); border-color: color-mix(in srgb, currentColor 34%, var(--line)); }
.gen-act.is-danger:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* —— Πολλαπλή επιλογή σε πλέγμα αρχείων —— */
.media-pick {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .85);
  background: rgba(0, 0, 0, .34);
  backdrop-filter: blur(5px);
  color: #fff;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .18s var(--ease-out), transform .18s var(--ease-out);
}
.media-pick:hover { transform: scale(1.08); }
.media-tile.is-picked .media-pick {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.media-tile.is-picked {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.media-tile.is-picked .media-thumb { opacity: .82; }

/* Η μπάρα ενεργειών: εμφανίζεται μόνο όταν υπάρχει επιλογή. */
.selbar {
  /* Πάνω από το tabbar (z-index 50), όχι πίσω του. */
  position: sticky; bottom: 0; z-index: 60;
  display: none;
  align-items: center; gap: 8px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card);
  box-shadow: var(--shadow-lift);
}
.selbar.is-on { display: flex; }
.selbar-n { font-size: 13px; font-weight: 650; margin-right: auto; white-space: nowrap; }
.selbar-x {
  width: 26px; height: 26px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: transparent; color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.selbar-go {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--ink); color: var(--paper);
  font: inherit; font-size: 13px; font-weight: 650;
  white-space: nowrap; cursor: pointer;
}
.selbar-go svg { width: 15px; height: 15px; display: block; }

/* Η επιλογή δείχνει το ίδιο και στο πλέγμα του στούντιο. */
.gen-tile.is-picked { outline: 2px solid var(--ink); outline-offset: -2px; }
.gen-tile.is-picked .gen-media { opacity: .82; }
.gen-tile .media-pick { top: 8px; right: 8px; }
/* Το σήμα «βίντεο» φεύγει αριστερά: πάνω δεξιά κάθεται πλέον η επιλογή, και
   δύο κουμπάκια στην ίδια γωνία είναι δύο κουμπάκια που πατιούνται λάθος. */
.gen-tile .gen-badge { right: auto; left: 8px; }
.gen-tile.is-picked .media-pick { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* —— Το κουμπί δημοσίευσης γεμίζει —— */
.btn.is-filling {
  position: relative;
  overflow: hidden;
  opacity: 1;                 /* δεν είναι «απενεργοποιημένο», δουλεύει */
  cursor: progress;
  isolation: isolate;
}
.btn.is-filling:disabled { opacity: 1; }
.btn-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  /* ΟΧΙ κυριολεκτικά άσπρο: το κουμπί είναι ήδη ανοιχτό στο σκούρο θέμα, και
     άσπρο πάνω σε άσπρο δεν φαίνεται. Το --accent-ink είναι εξ ορισμού το
     αντίθετο του κουμπιού, οπότε το γέμισμα ξεχωρίζει και στα δύο θέματα. */
  background: var(--accent-ink);
  transition: width .7s var(--ease-out);
  z-index: 0;
}
/* Η ετικέτα αντιστρέφεται πάνω από το γέμισμα, ώστε να διαβάζεται και στα
   δύο μισά χωρίς δεύτερο αντίγραφο του κειμένου. */
.btn-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  mix-blend-mode: difference;
  color: #fff;
}
.btn-label svg { width: 20px; height: 20px; display: block; }

/* Στη σελίδα του στούντιο το tabbar είναι fixed από κάτω: η μπάρα ανεβαίνει
   ώστε να μην ακουμπάει, και μένει κολλημένη όσο κυλάς. */
.selbar.above-nav {
  bottom: calc(84px + env(safe-area-inset-bottom));
}
.selbar-go.is-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.selbar-go.is-icon { padding: 0; width: 34px; justify-content: center; }

/* —— Ένδειξη φόρτωσης που ΔΕΝ σβήνει την οθόνη —— */
#routeBar {
  position: fixed; left: 0; right: 0; top: 0; height: 2px;
  z-index: 200; pointer-events: none;
  opacity: 0; transition: opacity .18s var(--ease-out);
}
#routeBar.on { opacity: 1; }
#routeBar > i {
  display: block; height: 100%; width: 40%;
  background: var(--ink);
  animation: routeSlide 1.1s var(--ease-out) infinite;
}
@keyframes routeSlide {
  from { transform: translateX(-110%); }
  to   { transform: translateX(360%); }
}
/* Το παλιό περιεχόμενο μένει ορατό, απλώς ξεθωριάζει. Καλύτερο από λευκό. */
main.is-loading { opacity: .45; transition: opacity .2s var(--ease-out); pointer-events: none; }

/* Σκελετός βιβλιοθήκης: κάτι να κοιτάς όσο έρχονται τα αρχεία. */
.media-tile.is-skeleton {
  cursor: default;
  background: var(--card-2);
  overflow: hidden;
  position: relative;
}
.media-tile.is-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--line) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: genShimmer 1.6s linear infinite;
}
/* —— Ανέβασμα πολλών αρχείων: μία γραμμή το καθένα —— */
.up-panel {
  display: grid; gap: 8px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--card-2);
}
.up-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 34px;
  align-items: center; gap: 10px;
}
.up-name {
  font-size: 13px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.up-track {
  height: 5px; border-radius: 99px;
  background: var(--line); overflow: hidden;
}
.up-track > i {
  display: block; height: 100%; width: 0;
  border-radius: 99px; background: var(--ink);
  transition: width .25s var(--ease-out);
}
.up-pct {
  font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.up-row.is-done .up-pct { color: var(--ok-ink); font-weight: 700; }
.up-row.is-failed .up-name { color: var(--danger-ink); }
.up-row.is-failed .up-pct { color: var(--danger-ink); font-weight: 700; }
.up-row.is-failed .up-track > i { background: var(--danger-ink); width: 100%; opacity: .35; }
.up-retry {
  grid-column: 1 / -1; justify-self: start;
  margin-top: 2px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: transparent; color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.up-retry:hover { background: var(--line); }