@charset "utf-8";

/* ==========================================================================
   tvapp — ΤΟ ΣΧΕΔΙΑΣΤΙΚΟ ΣΥΣΤΗΜΑ
   Ένα αρχείο. Καμία εξωτερική πηγή, καμία @import, κανένα url() που να
   δείχνει έξω από αυτό το μηχάνημα: η πολιτική ασφαλείας τα κόβει όλα και,
   ακόμα χειρότερα, μια απομακρυσμένη εικόνα θα έλεγε σε ξένο διακομιστή
   ποιος διαβάζει τη σελίδα.

   ΤΡΙΑ ΠΡΑΓΜΑΤΑ ΠΟΥ ΜΟΙΑΖΟΥΝ ΜΕ ΓΟΥΣΤΟ ΚΑΙ ΔΕΝ ΕΙΝΑΙ

   1. Η ΚΑΤΑΣΤΑΣΗ ΕΙΝΑΙ ΠΑΝΤΑ ΓΕΜΑΤΟ ΤΣΙΠΑΚΙ ΜΕ ΛΕΥΚΟ ΓΡΑΜΜΑ ΚΑΙ ΜΕ ΛΕΞΗ.
      Μετρημένο πάνω στο Midnight, ως ΚΕΙΜΕΝΟ:
        #B91C1C 2.58:1 · #92400E 2.84:1 · #166534 2.79:1   — ΚΟΒΟΝΤΑΙ.
      Τα ίδια χρώματα ως ΓΕΜΙΣΜΑ με λευκό από πάνω:
        #B91C1C 6.47:1 · #92400E 7.09:1 · #166534 7.13:1   — ΠΕΡΝΟΥΝ.
      Γι' αυτό δεν υπάρχει πουθενά χρωματιστό κείμενο κατάστασης: το γεμάτο
      τσιπάκι κουβαλάει το δικό του έδαφος και δουλεύει και στα δύο θέματα.
      Και κουβαλάει ΠΑΝΤΑ λέξη, γιατί το χρώμα μόνο του δεν είναι πληροφορία.

   2. ΟΙ ΛΙΣΤΕΣ ΔΕΝ ΕΧΟΥΝ ΚΑΡΤΕΣ. Οι γραμμές κάθονται πάνω στο --bg και τις
      χωρίζει μια τρίχα 1px, μπασμένη στα 72px ώστε να ευθυγραμμίζεται με το
      όνομα. Υψώνονται ΜΟΝΟ οι επιφάνειες που πραγματικά αιωρούνται — η
      μπάρα, τα φύλλα, η ειδοποίηση — και υψώνονται με ΚΑΙ ΤΑ ΤΡΙΑ μαζί
      (τονικό σκαλί προς --card, περίγραμμα 1px, σκιά), επειδή το τονικό
      σκαλί ΜΟΝΟ ΤΟΥ δίνει 1.07:1 πάνω στο σκοτεινό και είναι αόρατο.

   3. ΤΑ ΝΟΥΜΕΡΑ ΕΧΟΥΝ tabular-nums ΠΑΝΤΟΥ. Χωρίς αυτό, ο μετρητής ενός
      ελέγχου που ανεβαίνει χοροπηδάει δεξιά-αριστερά σε κάθε ψηφίο.
   ========================================================================== */


/* --------------------------------------------------------------------------
   ΓΡΑΜΜΑΤΟΣΕΙΡΑ
   Η στοίβα ΟΝΟΜΑΖΕΙ την "Adelphi PE" πρώτη. Το αρχείο της ΔΕΝ σερβίρεται
   ποτέ και ΔΕΝ ενσωματώνεται ποτέ — δες static/fonts/README.md. Έχει ήδη
   σπάσει μία φορά αυτός ο κανόνας σε αυτό το έργο και το αρχείο κατέβαινε
   δημόσια από πέντε ονόματα υπολογιστή.
   Άρα: ΚΡΙΝΕ ΚΑΘΕ ΟΘΟΝΗ ΣΕ Sofia Sans. Το κινητό δεν θα έχει Adelphi.
   Κάθε εφεδρική της στοίβας γράφει ελληνικά· αλλιώς ένα «ΣΚΑΪ HD» θα
   κοβόταν σε δύο διαφορετικές γραμματοσειρές στη μέση της λέξης.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Sofia Sans";
  src: url("/fonts/sofia-sans-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0370-03FF, U+1F00-1FFF, U+2010-2027, U+20AC;
}

:root {
  --font: "Adelphi PE", "Sofia Sans", -apple-system, "Segoe UI",
          "Noto Sans Greek", "Helvetica Neue", Arial, sans-serif;

  /* ΤΥΠΟΓΡΑΦΙΑ — το σώμα δεν πέφτει ΠΟΤΕ κάτω από 16px.
     Αυτό ΠΕΡΙΛΑΜΒΑΝΕΙ τη δεύτερη γραμμή «1.204 κανάλια · 38 νεκρά»: είναι
     πρόταση, όχι ετικέτα. Η ΜΟΝΗ μικρότερη βαθμίδα είναι το --t-label, και
     χρησιμοποιείται μόνο εκεί που η προδιαγραφή τη δέχεται ρητά — ετικέτες
     ως τέσσερις λέξεις, με tracking, και τα τσιπάκια κατάστασης. */
  --t-body: 16px;      --lh-body: 26px;   /* όνομα γραμμής */
  --t-sub: 16px;       --lh-sub: 22px;    /* δεύτερη γραμμή */
  --t-label: 13px;     --lh-label: 16px;  /* ετικέτα, με tracking */
  --t-title: 20px;     --lh-title: 28px;
  --t-big: 28px;       --lh-big: 36px;
  --track-label: 0.08em;   /* το ΕΛΑΧΙΣΤΟ για κεφαλαία ελληνικά */

  /* ΥΨΗ ΓΡΑΜΜΩΝ — σταθερές. Η εικονική λίστα χρειάζεται σταθερά, όχι μία
     καθολική σταθερά: 56 για περιήγηση, 76 για την προεπισκόπηση δύο
     σειρών. Το JavaScript διαβάζει ακριβώς αυτά τα δύο. */
  --row-browse: 56px;
  --row-preview: 76px;

  /* ΓΕΩΜΕΤΡΙΑ ΓΡΑΜΜΗΣ ΚΑΝΑΛΙΟΥ
     16 περιθώριο · 44 λούκι διπλού ρόλου · 12 κενό · όνομα · 8 · μετρητής
     · 12 · βελάκι · 16. Το λούκι κρατάει το σύμβολο κατάστασης σε ηρεμία
     ΚΑΙ το κουτάκι επιλογής στην επιλογή — ίδια θέση, σβήσιμο-άναμμα, ώστε
     η γεωμετρία να μην ξαναϋπολογίζεται όταν αλλάζει η κατάσταση. */
  --gutter: 44px;
  --edge: 16px;
  --hairline-inset: 72px;   /* 16 + 44 + 12 */

  --bar-row1: 48px;   /* τρία ίσα τσιπάκια περιγράμματος */
  --bar-row2: 56px;   /* ένα γεμάτο κύριο κουμπί */
  --tap: 44px;        /* ελάχιστος στόχος δαχτύλου */

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --toast-life: 8000ms;   /* 8 δευτερόλεπτα, όχι 4: τα ελληνικά θέλουν χρόνο */

  /* ΤΟ ΓΕΜΑΤΟ ΚΟΥΜΠΙ ΕΙΝΑΙ ΤΟ ΙΔΙΟ ΚΑΙ ΣΤΑ ΔΥΟ ΘΕΜΑΤΑ. */
  --primary: #1D4ED8;
  --primary-press: #1A45BE;
  --on-primary: #FFFFFF;   /* 6.70:1 πάνω στο #1D4ED8 */

  /* ΤΑ ΓΕΜΙΣΜΑΤΑ ΤΗΣ ΚΑΤΑΣΤΑΣΗΣ — ίδια και στα δύο θέματα. */
  --dead: #B91C1C;
  --redirect: #92400E;
  --alive: #166534;
  --on-status: #FFFFFF;
}

/* ΘΕΜΑ: MIDNIGHT.
   Είναι η ΠΡΟΕΠΙΛΟΓΗ, δηλαδή αυτό που βλέπεις όταν το λειτουργικό δεν
   εκφράζει προτίμηση — τότε κανένα media query δεν ταιριάζει και μένει
   αυτό εδώ. */
:root {
  --bg: #0C1426;
  --bg-sub: #101A31;
  --card: #16203A;         /* το τονικό σκαλί των επιφανειών που αιωρούνται */
  --fg: #F6F8FC;           /* 17.5:1 */
  --muted: #8FA0C2;        /* 7.05:1 — περνάει ως κανονικό κείμενο */
  --border: #2A3654;
  --border-strong: #3C4A6E;
  --accent: #3B82F6;       /* Sky, 5.05:1 πάνω στο Midnight */
  --skeleton: #1B2540;
  --shadow: 0 8px 24px rgb(0 0 0 / 45%);
  --scrim: rgb(4 8 18 / 62%);
}

/* Το λειτουργικό ζητάει ρητά ανοιχτό. Αλλάζει η επιφάνεια — και ο τόνος
   της έμφασης, γιατί το Sky πάνω σε λευκό δίνει 3.68:1 και κόβεται. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FFFFFF;
    --bg-sub: #F7F9FC;
    --card: #F2F5FA;
    --fg: #0C1426;
    --muted: #4A5A78;
    --border: #D9DFEA;
    --border-strong: #B9C3D6;
    --accent: #1D4ED8;     /* Cobalt, 6.70:1 πάνω στο λευκό */
    --skeleton: #EAEFF6;
    --shadow: 0 8px 24px rgb(12 20 38 / 12%);
    --scrim: rgb(12 20 38 / 38%);
  }
}

/* Η χειροκίνητη παράκαμψη από το μενού της κεφαλίδας. Κερδίζει και τις δύο
   φορές: και όταν το λειτουργικό λέει σκοτεινό και όταν λέει ανοιχτό. */
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-sub: #F7F9FC;
  --card: #F2F5FA;
  --fg: #0C1426;
  --muted: #4A5A78;
  --border: #D9DFEA;
  --border-strong: #B9C3D6;
  --accent: #1D4ED8;
  --skeleton: #EAEFF6;
  --shadow: 0 8px 24px rgb(12 20 38 / 12%);
  --scrim: rgb(12 20 38 / 38%);
}

:root[data-theme="dark"] {
  --bg: #0C1426;
  --bg-sub: #101A31;
  --card: #16203A;
  --fg: #F6F8FC;
  --muted: #8FA0C2;
  --border: #2A3654;
  --border-strong: #3C4A6E;
  --accent: #3B82F6;
  --skeleton: #1B2540;
  --shadow: 0 8px 24px rgb(0 0 0 / 45%);
  --scrim: rgb(4 8 18 / 62%);
}


/* --------------------------------------------------------------------------
   ΒΑΣΗ
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  /* Ασύμμετρο δεξιά, ΠΟΤΕ στοιχισμένο και στις δύο πλευρές: η πλήρης
     στοίχιση ανοίγει ποτάμια στα ελληνικά, που έχουν μακριές λέξεις. */
  text-align: start;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Το δάχτυλο δεν πρέπει να διαλέγει κείμενο όταν σέρνει μια λίστα. Η
   επιλογή επιτρέπεται ρητά εκεί που ο ιδιοκτήτης πρέπει να αντιγράψει. */
body { -webkit-user-select: none; user-select: none; }
.selectable { -webkit-user-select: text; user-select: text; }

button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ΚΑΘΕ ΣΤΗΛΗ ΝΟΥΜΕΡΩΝ. Χωρίς αυτό ο μετρητής χοροπηδάει σε κάθε ψηφίο. */
.num, .count, .metric, .sub, .chip, .strip-count, .countdown, .bytes {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Οι κεφαλαίες ελληνικές λέξεις επιτρέπονται ΜΟΝΟ εδώ: ετικέτα, ως
   τέσσερις λέξεις, με tracking τουλάχιστον +0.08em. Ποτέ σε όνομα
   καναλιού — αυτό είναι δεδομένο του ιδιοκτήτη, όχι διακόσμηση. */
.label {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.muted { color: var(--muted); }
.sub { font-size: var(--t-sub); line-height: var(--lh-sub); color: var(--muted); }

.noscript {
  margin: 32px var(--edge);
  color: var(--fg);
}


/* --------------------------------------------------------------------------
   ΚΥΛΙΣΗ
   overscroll-behavior: contain ώστε μια γρήγορη κίνηση του δαχτύλου στο
   τέλος της λίστας να ΜΗΝ πυροδοτεί το «τράβα να ανανεώσεις» του
   περιηγητή στη μέση μιας μετονομασίας.
   -------------------------------------------------------------------------- */
.scroller {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* --------------------------------------------------------------------------
   ΣΚΕΛΕΤΟΣ ΟΘΟΝΗΣ
   -------------------------------------------------------------------------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100svh;
}

.hdr {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 0 4px 0 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.hdr-title {
  flex: 1 1 auto;
  margin: 0;
  padding: 0 4px;
  font-size: var(--t-title);
  line-height: var(--lh-title);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Η κουκκίδα των αλλαγών κάθεται ΔΙΠΛΑ ΣΤΗ ΛΕΞΗ, ποτέ μόνη της: το χρώμα
   χωρίς λέξη δεν είναι πληροφορία. */
.hdr-dirty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--muted);
  padding-inline-end: 4px;
}
.hdr-dirty::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.icon-btn {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.icon-btn:active { background: var(--bg-sub); }

.dots { width: 4px; height: 4px; border-radius: 50%; background: var(--fg);
  box-shadow: 0 -7px 0 var(--fg), 0 7px 0 var(--fg); }

.chevron {
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
}
.chevron-back { transform: rotate(135deg); }

.main {
  flex: 1 1 auto;
  min-height: 0;
}

.offline-bar {
  flex: 0 0 auto;
  padding: 8px var(--edge);
  background: var(--bg-sub);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--t-sub);
  line-height: var(--lh-sub);
}


/* --------------------------------------------------------------------------
   Η ΜΠΑΡΑ ΤΟΥ ΚΑΤΩ ΜΕΡΟΥΣ — η μία επιφάνεια που αιωρείται πάντα.
   Σειρά 1: 48px, τρία ΙΣΑ τσιπάκια περιγράμματος.
   Σειρά 2: 56px, ΕΝΑ γεμάτο κύριο κουμπί.

   ΕΛΕΓΧΟΣ ΠΛΑΤΟΥΣ ΣΤΟ ΔΑΠΕΔΟ ΤΩΝ 360px:
     360 − 32 περιθώρια − 16 κενά = 104px ανά τσιπάκι.
   Γι' αυτό το μεσαίο τσιπάκι γράφει «Ονόματα» (7 γράμματα) και ΟΧΙ
   «Μετονομασία» (11 γράμματα ≈ 80px + 24px γέμισμα = ακριβώς 104px, που
   σημαίνει ότι θα έφευγε σπασμένο).
   -------------------------------------------------------------------------- */
.bar {
  flex: 0 0 auto;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 0 var(--edge) env(safe-area-inset-bottom, 0px);
}

.bar-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: var(--bar-row1);
  align-items: center;
}

.bar-primary {
  height: var(--bar-row2);
  display: flex;
  align-items: center;
}


/* --------------------------------------------------------------------------
   ΚΟΥΜΠΙΑ
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: none;
  color: var(--fg);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: var(--lh-body);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.btn-primary:active:not(:disabled) { background: var(--primary-press); }

.btn-outline {
  border-color: var(--border-strong);
  color: var(--fg);
  padding: 0 8px;
  min-height: 40px;
  font-weight: 500;
}
.btn-outline:active:not(:disabled) { background: var(--bg-sub); }

.btn-quiet { color: var(--accent); font-weight: 500; }

.btn-block { width: 100%; }

.btn:disabled { opacity: 0.45; cursor: default; }

/* Το τσιπάκι της μπάρας. Ίσο μερίδιο του πλέγματος, κόβει με αποσιωπητικά
   αντί να σπάσει σε δεύτερη γραμμή. */
.bar-chips .btn-outline { width: 100%; min-width: 0; }


/* --------------------------------------------------------------------------
   ΠΕΔΙΑ
   -------------------------------------------------------------------------- */
.field {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  background: var(--bg-sub);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--t-body);   /* 16px: κάτω από αυτό το iOS κάνει ζουμ */
  line-height: var(--lh-body);
  -webkit-user-select: text;
  user-select: text;
}
.field:disabled { opacity: 0.55; }

.field-label {
  display: block;
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

textarea.field { min-height: 168px; resize: vertical; line-height: var(--lh-body); }

.note {
  margin: 8px 0 0;
  min-height: var(--lh-sub);
  font-size: var(--t-sub);
  line-height: var(--lh-sub);
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   ΞΕΚΙΝΗΜΑ ΚΑΙ ΕΙΣΟΔΟΣ
   -------------------------------------------------------------------------- */
.boot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
}
.boot-line { color: var(--muted); margin: 0; }

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--edge);
}

/* Η ΜΙΑ κάρτα της εφαρμογής: αιωρείται, άρα παίρνει και τα τρία κανάλια. */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.login-card { width: 100%; max-width: 380px; padding: 24px; }

.login-title {
  margin: 0 0 24px;
  font-size: var(--t-big);
  line-height: var(--lh-big);
  font-weight: 600;
}

.login-card .btn { margin-top: 16px; }


/* --------------------------------------------------------------------------
   ΛΙΣΤΕΣ — ΧΩΡΙΣ ΚΑΡΤΕΣ
   Γραμμές πάνω στο --bg, χωρισμένες με τρίχα 1px μπασμένη στα 72px.
   -------------------------------------------------------------------------- */
.list { margin: 0; padding: 0; list-style: none; }

.row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--row-browse);
  padding: 0 var(--edge);
  background: var(--bg);
  border: 0;
  color: var(--fg);
  text-align: start;
  cursor: pointer;
}
.row::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--hairline-inset);
  inset-inline-end: 0;
  bottom: 0;
  height: 1px;
  background: var(--border);
}
.row:last-child::after { display: none; }
.row:active { background: var(--bg-sub); }

/* Το λούκι διπλού ρόλου. Ίδια θέση για το σύμβολο και για το κουτάκι, ώστε
   η γεωμετρία να μην κουνιέται όταν μπαίνει η επιλογή. */
.row-gutter {
  flex: 0 0 var(--gutter);
  width: var(--gutter);
  height: var(--gutter);
  display: grid;
  place-items: center;
  position: relative;
}
.row-gutter > * {
  grid-area: 1 / 1;
  transition: opacity 120ms linear;
}
.row-gutter .on-rest { opacity: 1; }
.row-gutter .on-select { opacity: 0; }
.selecting .row-gutter .on-rest { opacity: 0; }
.selecting .row-gutter .on-select { opacity: 1; }

.row-body {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-start: 12px;
  padding: 6px 0;
}

.row-name {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-sub {
  font-size: var(--t-sub);
  line-height: var(--lh-sub);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.row-metric {
  flex: 0 0 auto;
  margin-inline-start: 8px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.row-chevron { flex: 0 0 auto; margin-inline-start: 12px; }

/* «Χωρίς ομάδα» — πάντα τελευταία και οπτικά ξεχωριστή, ώστε να μην μπορεί
   να κρυφτεί τίποτα μέσα της σιωπηλά. */
.row-ungrouped { background: var(--bg-sub); }
.row-ungrouped .row-name { color: var(--muted); font-style: italic; }

.list-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px var(--edge);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Ενσωματωμένο άδειο αποτέλεσμα: μέσα στη λίστα, ΟΧΙ ολοσέλιδο. */
.inline-empty {
  padding: 24px var(--edge);
  color: var(--muted);
}

.section-title {
  padding: 16px var(--edge) 8px;
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   Η ΕΙΚΟΝΙΚΗ ΛΙΣΤΑ (τη γεμίζει το U9)
   Ένα διάστημα ύψους total*H και μία μετατόπιση του παραθύρου.
   -------------------------------------------------------------------------- */
.vlist { position: relative; }
.vlist-spacer { width: 1px; }
.vlist-window { position: absolute; inset-inline: 0; top: 0; will-change: transform; }


/* --------------------------------------------------------------------------
   ΤΣΙΠΑΚΙΑ ΚΑΤΑΣΤΑΣΗΣ — ΓΕΜΑΤΑ, ΛΕΥΚΟ ΓΡΑΜΜΑ, ΠΑΝΤΑ ΜΕ ΛΕΞΗ
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: var(--t-label);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chip-dead     { background: var(--dead);     color: var(--on-status); }
.chip-redirect { background: var(--redirect); color: var(--on-status); }
.chip-alive    { background: var(--alive);    color: var(--on-status); }

/* Το «δεν ελέγχθηκε» ΔΕΝ είναι νεκρό. Ουδέτερο περίγραμμα, ποτέ κόκκινο. */
.chip-skipped {
  background: transparent;
  color: var(--muted);
  border-color: var(--border-strong);
}

.chip-pill {
  background: transparent;
  color: var(--muted);
  border-color: var(--border-strong);
  font-weight: 500;
}

/* Μετά από 24 ώρες τα σύμβολα σβήνουν: η πληροφορία είναι παλιά. */
.stale .chip-dead,
.stale .chip-redirect,
.stale .chip-alive { opacity: 0.62; }

/* Το σύμβολο κατάστασης μέσα στο λούκι. Οι ΖΩΝΤΑΝΕΣ γραμμές δεν παίρνουν
   τίποτα: η απουσία σημαίνει «εντάξει», και αυτό κρατάει 1.204 γραμμές
   ήρεμες. */
.glyph { width: 10px; height: 10px; border-radius: 50%; }
.glyph-dead     { background: var(--dead); }
.glyph-redirect { background: var(--redirect); }
.glyph-skipped  { background: transparent; border: 1px solid var(--border-strong); }
.glyph-alive    { background: transparent; }

/* Το μονόγραμμα. Λογότυπα ΔΕΝ φορτώνονται ποτέ — ούτε ένα απομακρυσμένο
   εικονίδιο, γιατί κάποια λογότυπα κάθονται στον διακομιστή του παρόχου
   και κουβαλάνε την ίδια δομή κωδικού με τους συνδέσμους. */
.mono {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--t-sub);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   ΣΚΕΛΕΤΟΙ ΦΟΡΤΩΣΗΣ
   Στο ΣΩΣΤΟ ύψος γραμμής, ποτέ περιστρεφόμενος κύκλος: το φιλτράρισμα, η
   μετονομασία, η ταξινόμηση, η ανάγνωση και η εγγραφή είναι δουλειά 5–20ms
   και ένας κύκλος εκεί θα ήταν ψέμα. Μόνο δύο πράγματα φορτώνουν στ'
   αλήθεια σε αυτή την εφαρμογή: το ανέβασμα αρχείου και ο έλεγχος
   συνδέσμων — και τα δύο δείχνουν ΠΟΣΟΣΤΟ, όχι κύκλο.
   -------------------------------------------------------------------------- */
.skel-row {
  height: var(--row-browse);
  display: flex;
  align-items: center;
  padding: 0 var(--edge);
  gap: 12px;
}
.skel-row.skel-preview { height: var(--row-preview); }

.skel-bar {
  height: 12px;
  border-radius: 6px;
  background: var(--skeleton);
}
.skel-bar-lead { width: var(--gutter); height: var(--gutter); border-radius: 50%; flex: 0 0 auto; }
.skel-bar-name { flex: 1 1 auto; max-width: 62%; }
.skel-bar-tail { width: 40px; flex: 0 0 auto; }

/* Η ΜΟΝΗ κίνηση, και σβήνει για όποιον έχει ζητήσει λιγότερη κίνηση. */
@media (prefers-reduced-motion: no-preference) {
  .skel-bar { animation: skel 1200ms ease-in-out infinite; }
  @keyframes skel { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
}

/* Η ΜΙΑ ΑΛΗΘΙΝΗ ΜΠΑΡΑ ΠΡΟΟΔΟΥ: ανέβασμα και έλεγχος. Καθορισμένη, με
   ποσοστό, ποτέ αόριστη. Η τιμή μπαίνει με el.style.setProperty. */
.progress {
  height: 6px;
  border-radius: 3px;
  background: var(--skeleton);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 160ms linear;
}


/* --------------------------------------------------------------------------
   ΤΜΗΜΑΤΙΚΟΣ ΕΠΙΛΟΓΕΑΣ
   -------------------------------------------------------------------------- */
.seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.seg-item {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: var(--t-sub);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.seg-item[aria-selected="true"] {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border-strong);
}


/* --------------------------------------------------------------------------
   ΦΥΛΛΟ ΑΠΟ ΚΑΤΩ
   -------------------------------------------------------------------------- */
.sheet-host {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); border: 0; }

.sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 86svh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sheet-grip {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  margin: 8px auto 4px;
  flex: 0 0 auto;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--edge) 12px;
  flex: 0 0 auto;
}
.sheet-title { margin: 0; font-size: var(--t-title); line-height: var(--lh-title); font-weight: 600; flex: 1 1 auto; }
.sheet-body { padding: 0 var(--edge) 16px; overflow-y: auto; overscroll-behavior: contain; }
.sheet-foot { padding: 8px var(--edge) 16px; display: grid; gap: 8px; flex: 0 0 auto; }

@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: sheet-up 180ms cubic-bezier(0.2, 0, 0, 1); }
  @keyframes sheet-up { from { transform: translateY(12px); } to { transform: none; } }
}


/* --------------------------------------------------------------------------
   ΕΙΔΟΠΟΙΗΣΗ — αγκυρωμένη ΠΑΝΩ από την μπάρα, ζωή 8 δευτερόλεπτα
   -------------------------------------------------------------------------- */
.toast-host {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 var(--edge) calc(env(safe-area-inset-bottom, 0px) + var(--toast-offset, 16px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.toast-text { flex: 1 1 auto; font-size: var(--t-sub); line-height: var(--lh-sub); }
.toast-action { flex: 0 0 auto; }


/* --------------------------------------------------------------------------
   Η ΛΩΡΙΔΑ ΤΟΥ ΕΛΕΓΧΟΥ — μη αποκλειστική, πάνω από την μπάρα
   -------------------------------------------------------------------------- */
.run-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--edge);
  background: var(--card);
  border-top: 1px solid var(--border);
}
.strip-count { font-size: var(--t-sub); line-height: var(--lh-sub); flex: 1 1 auto; }


/* --------------------------------------------------------------------------
   ΠΡΟΕΠΙΣΚΟΠΗΣΗ ΜΕΤΟΝΟΜΑΣΙΑΣ — 76px, δύο σειρές (τη γεμίζει το U10)
   Πάνω το παλιό, σβησμένο και θαμπό. Κάτω το νέο, σε πλήρη αντίθεση.
   -------------------------------------------------------------------------- */
.prow {
  height: var(--row-preview);
  padding: 8px var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  position: relative;
}
.prow::after {
  content: "";
  position: absolute;
  inset-inline: var(--edge) 0;
  bottom: 0;
  height: 1px;
  background: var(--border);
}
.prow-old {
  color: var(--muted);
  text-decoration: line-through;
  font-size: var(--t-sub);
  line-height: var(--lh-sub);
  white-space: nowrap;
  overflow: hidden;
}
.prow-new {
  color: var(--fg);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  white-space: nowrap;
  overflow: hidden;
}
.prow-hit { background: var(--skeleton); border-radius: 3px; }

/* Το κόψιμο είναι ΑΓΚΥΡΩΜΕΝΟ: η αλλαγή μένει πάντα στην οθόνη. */
.trunc-end   { text-overflow: ellipsis; direction: ltr; }
.trunc-start { text-overflow: ellipsis; direction: rtl; text-align: start; }

/* Ένα «γκριζάρισμα» όσο τρέχει η επόμενη προεπισκόπηση. ΠΟΤΕ άδεια λίστα,
   ποτέ κύκλος: μένει η προηγούμενη, θαμπή. */
.pending { opacity: 0.55; }


/* --------------------------------------------------------------------------
   ΠΡΟΕΙΔΟΠΟΙΗΣΕΙΣ — τα άσχημα νέα ΠΡΩΤΑ, ποτέ αποκλειστικό παράθυρο
   -------------------------------------------------------------------------- */
.warn {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px var(--edge);
  background: var(--bg-sub);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-sub);
  line-height: var(--lh-sub);
}
.warn-mark { flex: 0 0 auto; color: var(--fg); font-weight: 700; }


/* --------------------------------------------------------------------------
   ΟΙ ΔΥΟ ΠΟΡΤΕΣ ΤΗΣ ΕΙΣΑΓΩΓΗΣ
   -------------------------------------------------------------------------- */
.pad { padding: var(--edge); }
.stack { display: grid; gap: 12px; }
.stack-lg { display: grid; gap: 20px; }

.door {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.door-title { font-weight: 600; }

/* Η διεύθυνση της συνδρομής: ΕΠΙΛΕΞΙΜΟ ΚΕΙΜΕΝΟ, ποτέ <a href>. Ένα άνοιγμα
   θα έγραφε το κλειδί στο ιστορικό του περιηγητή. */
.url-text {
  -webkit-user-select: all;
  user-select: all;
  word-break: break-all;
  font-size: var(--t-sub);
  line-height: var(--lh-sub);
  padding: 10px 12px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.empty {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 40px var(--edge);
}
.empty-title { font-size: var(--t-title); line-height: var(--lh-title); font-weight: 600; margin: 0; }