/* VoltGaia — δύο θέματα, ίδια σημασία.

   ΠΩΣ ΔΟΥΛΕΥΕΙ:
   Οι μεταβλητές κρατούν το ίδιο ΝΟΗΜΑ και στα δύο θέματα («το κύριο κείμενο»,
   «η γραμμή», «το κακό νέο»). Αλλάζει μόνο η τιμή τους. Έτσι μια αλλαγή
   παλέτας είναι δύο μπλοκ εδώ, όχι 150 σημεία στον κώδικα.

   ΓΙΑΤΙ ΛΕΓΕΤΑΙ --accent ΚΑΙ ΟΧΙ --sun:
   Ήταν αμπέρ και το όνομα περιέγραφε το χρώμα. Τώρα είναι μπλε. Ένα token που
   λέγεται «ήλιος» και δίνει μπλε είναι παγίδα για τον επόμενο — το όνομα
   περιγράφει πλέον τον ΡΟΛΟ (κύρια έμφαση), όχι την απόχρωση.

   ΤΑ ΧΡΩΜΑΤΑ ΤΟΥ ΦΩΤΕΙΝΟΥ ΔΕΝ ΔΙΑΛΕΧΤΗΚΑΝ ΜΕ ΤΟ ΜΑΤΙ:
   κάθε ένα μετρήθηκε ώστε ο λόγος αντίθεσης πάνω στο λευκό να ξεπερνά το 4,5:1
   που ορίζει το WCAG AA — και το --accent επιπλέον να αντέχει ΛΕΥΚΟ κείμενο
   από πάνω, γιατί είναι και γέμισμα κουμπιού.

   --on-accent: το κείμενο ΠΑΝΩ σε χρωματιστό γέμισμα. Και στα δύο θέματα τα
   γεμίσματα είναι πλέον αρκετά σκούρα ώστε να θέλουν λευκό. */
:root{
  --bg:#0D1117; --panel:#161B22; --panel2:#1E252F; --line:#2C333D;
  --txt:#E6EDF3; --muted:#8B949E;
  --accent:#60A5FA; --accent2:#93C5FD;
  /* ΚΕΙΜΕΝΟ (αριθμοί, ετικέτες): αντίθεση ≥4,5:1 πάνω στο --panel. */
  --green:#34D399; --red:#F87171; --orange:#FBBF24; --blue:#38BDF8; --yellow:#FACC15;
  /* ΓΕΜΙΣΜΑΤΑ ΓΡΑΦΗΜΑΤΩΝ (20/09/2026): χωριστά από το κείμενο, γιατί ένα χρώμα
     που διαβάζεται ως κείμενο (σκούρο) βγαίνει λασπί ως μπάρα και το αντίστροφο.
     Σημασιολογία = υπεύθυνος: παραγωγή μπλε · καιρός ουδέτερο · περικοπή amber
     (ΑΔΜΗΕ) · βλάβη κόκκινο (συντηρητής) · ρύπανση κίτρινο (ιδιοκτήτης) ·
     ΑΓΝΩΣΤΟ = slate, ποτέ χρώμα αιτίας · αναμενόμενη = γκρι «φάντασμα». */
  --fill-prod:#3B82F6; --fill-ok:#10B981; --fill-revenue:#10B981; --fill-theo:#3B82F6;
  --fill-curt:#F59E0B; --fill-fault:#EF4444; --fill-soil:#EAB308; --fill-unknown:#64748B;
  --fill-rain:#0EA5E9; --fill-ghost:#334155; --fill-weather:#475569;
  /* Στο σκούρο θέμα το μπλε είναι φωτεινό, άρα θέλει ΣΚΟΥΡΟ κείμενο από πάνω
     (5,15 έναντι 3,68 με λευκό). Πιο σκούρο μπλε θα δεχόταν λευκό, αλλά τότε
     το ίδιο το μπλε πέφτει στο 2,8 ως κείμενο πάνω στο σκούρο φόντο. */
  --on-accent:#0D1117;
  --inset:rgba(0,0,0,.22);
  --overlay:rgba(1,4,9,.75);
  --shadow:rgba(1,4,9,.5);
  --thumb-a:#233043; --thumb-b:#182231;
  color-scheme:dark;
}

/* ΦΩΤΕΙΝΟ ΘΕΜΑ.
   Οι τιμές δεν διαλέχτηκαν με το μάτι: κάθε χρώμα κειμένου ελέγχθηκε ώστε ο
   λόγος αντίθεσης πάνω στο λευκό να ξεπερνά το 4,5:1. */
:root[data-theme="light"]{
  --bg:#F6F8FA; --panel:#FFFFFF; --panel2:#EFF2F6; --line:#D0D7DE;
  --txt:#1F2328; --muted:#57606A;
  --accent:#2563EB; --accent2:#1D4ED8;
  --green:#047857; --red:#DC2626; --orange:#B45309; --blue:#0369A1; --yellow:#A16207;
  --fill-prod:#3B82F6; --fill-ok:#10B981; --fill-revenue:#059669; --fill-theo:#2563EB;
  --fill-curt:#F59E0B; --fill-fault:#EF4444; --fill-soil:#EAB308; --fill-unknown:#94A3B8;
  --fill-rain:#0EA5E9; --fill-ghost:#CBD5E1; --fill-weather:#64748B;
  --on-accent:#FFFFFF;
  --inset:rgba(31,35,40,.05);
  --overlay:rgba(31,35,40,.5);
  --shadow:rgba(31,35,40,.16);
  --thumb-a:#DCE6F5; --thumb-b:#C3D4EC;
  color-scheme:light;
}
/* ΚΑΜΙΑ ομαλή κύλιση: η αλλαγή καρτέλας πρέπει να είναι ακαριαία. Το animation
   κάνει τον χρήστη να περιμένει και σε ορισμένα περιβάλλοντα ακυρώνει εντελώς
   το προγραμματιστικό scroll. */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* ΚΙΝΗΤΟ ΩΣ ΕΦΑΡΜΟΓΗ (iOS/Android, 12/09/2026).
   viewport-fit=cover στο HTML αφήνει τη σελίδα να φτάσει ΠΙΣΩ από το notch και
   την μπάρα του home. Τα env(safe-area-inset-*) είναι 0 σε κανονικό browser
   και >0 μόνο σε εφαρμογή αρχικής οθόνης σε iPhone με notch — άρα δεν
   αλλάζουν τίποτα στον υπολογιστή. Σε standalone το πάνω κενό είναι η μπάρα
   κατάστασης: χωρίς αυτό το ρολόι πέφτει πάνω στο λογότυπο. */
body{padding-top:env(safe-area-inset-top);
     padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
     -webkit-tap-highlight-color:transparent;    /* όχι γκρι φλας σε κάθε πάτημα (Android) */
     -webkit-text-size-adjust:100%;             /* το iOS να μη μεγαλώνει κείμενο σε landscape */
     overscroll-behavior-y:none}                /* όχι «λάστιχο» pull-to-refresh που ξαναφορτώνει */
button,a,input,select,label{touch-action:manipulation}  /* όχι 300ms καθυστέρηση, όχι zoom στο διπλό πάτημα */
@media (display-mode: standalone){
  /* Ως εφαρμογή δεν υπάρχει μπάρα διεύθυνσης: το sticky header πρέπει να
     ξεκινάει ΚΑΤΩ από την μπάρα κατάστασης, όχι πίσω της. */
  nav.tabs,.mnav{top:env(safe-area-inset-top)}
}

/* Header */
header.top{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
header.top img{width:38px;height:38px}
.brand{font-weight:700;font-size:18px;letter-spacing:-.2px}
.brand small{display:block;font-weight:500;font-size:12.5px;color:var(--muted)}
.badge{margin-left:auto;background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent2);border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.3px}
.badge.live{background:color-mix(in srgb, var(--green) 12%, transparent);color:var(--green);border-color:color-mix(in srgb, var(--green) 35%, transparent)}

/* Tabs */
/* Εννιά καρτέλες σε μία σειρά, χωρίς να κόβεται καμία: λίγο πιο σφιχτό padding
   στο desktop. Μια κομμένη ετικέτα στα δεξιά δείχνει αμέλεια — και μια μόνη της
   σε δεύτερη σειρά επίσης. */
/* ΟΙ ΚΑΡΤΕΛΕΣ ΚΟΛΛΑΝΕ ΣΤΗΝ ΚΟΡΥΦΗ.
   Πριν, βρίσκονταν χαμηλά (μετά το μπάνερ και τις οδηγίες): κάθε αλλαγή καρτέλας
   πετούσε τον χρήστη στην κορυφή και έπρεπε να ξανακατέβει με το χέρι για να τις
   ξαναβρεί. Τώρα είναι πάντα εκεί, όπου κι αν βρίσκεσαι στη σελίδα. */
nav.tabs{display:flex;gap:2px;padding:14px 0 0;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:0;z-index:30;background:var(--bg);
  box-shadow:0 1px 0 var(--line)}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{background:none;border:none;color:var(--muted);font-family:inherit;font-size:15px;font-weight:600;
  padding:12px 10px;min-height:46px;border-radius:10px 10px 0 0;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
nav.tabs button:hover{color:var(--txt)}
nav.tabs button.on{color:var(--accent2);border-bottom-color:var(--accent);background:var(--panel)}
nav.tabs button .dot-n{background:var(--red);color:#fff;font-size:12px;padding:1px 6px;border-radius:999px;margin-left:6px;font-weight:800}

/* Status chips (Huawei-style) */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:11px;text-align:center;cursor:pointer}
.chip.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent)}
.chip b{display:block;font-size:22px;font-weight:700;line-height:1.1}
.chip span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.chip.normal b{color:var(--green)} .chip.faulty b{color:var(--red)} .chip.offline b{color:var(--muted)}

/* Park cards (fleet) */
.parks{display:grid;gap:12px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;cursor:pointer;
  display:flex;gap:14px;align-items:center;transition:border-color .15s}
.pcard:hover{border-color:var(--accent)}
.pcard .thumb{width:56px;height:56px;border-radius:6px;background:linear-gradient(135deg,var(--thumb-a),var(--thumb-b));
  display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.pcard .info{flex:1;min-width:0}
.pcard .nm{font-weight:700;font-size:16px}
.pcard .loc{font-size:13px;color:var(--muted);margin-bottom:6px}
.pcard .mini{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pcard .mini b{color:var(--txt);font-weight:700}
.pcard .money{text-align:right;flex-shrink:0}
.pcard .money .rev{font-size:20px;font-weight:800;color:var(--green)}
.pcard .money .lost{font-size:13px;font-weight:700;color:var(--red)}
.pcard .money small{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.st{padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.st.normal{background:color-mix(in srgb, var(--green) 15%, transparent);color:var(--green)}
.st.faulty{background:color-mix(in srgb, var(--red) 15%, transparent);color:var(--red)}
.st.offline{background:color-mix(in srgb, var(--muted) 15%, transparent);color:var(--muted)}

/* ΠΥΚΝΟΤΗΤΑ: στρογγυλάδα 8px αντί 14px, πιο σφιχτό padding, βάρος 700 αντί
   800. Οι μεγάλες καμπύλες και τα πολύ έντονα γράμματα διαβάζονται ως
   καταναλωτική εφαρμογή· ο αγοραστής εδώ είναι διευθυντής ενέργειας. */
/* KPI grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin:18px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.card h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;margin-bottom:6px}
.kpi{font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.4px}
.kpi.sm{font-size:23px}
.sub{font-size:13px;color:var(--muted);margin-top:4px}
.pos{color:var(--green)} .neg{color:var(--red)} .warn{color:var(--orange)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}

/* Waterfall — σκρολάρει μέσα στο δικό του πλαίσιο, ποτέ δεν σπάει τη σελίδα */
.wf-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.wf{display:flex;align-items:flex-end;gap:2px;height:240px;margin-top:14px;position:relative;min-width:520px}
/* min-width:0 — χωρίς αυτό το πλάτος της στήλης το όριζε η ΛΕΞΗ της
   ετικέτας («Πραγματικά» = 62px στα 11px), όχι ο διαθέσιμος χώρος. Το
   γράφημα ξεχείλιζε 8px και έκοβε την τελευταία ετικέτα σε «Πραγματικ». */
.wf .col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.wf .bar{width:100%;border-radius:4px 4px 0 0;position:relative}
.wf .spacer{width:100%}
.wf .lbl{font-size:12px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.25;
  min-height:32px;overflow-wrap:anywhere}
.wf .val{font-size:13px;font-weight:800;margin-bottom:4px;white-space:nowrap}
.wf-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:10px}
.wf-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}


/* ── ΚΟΙΝΟ ΡΑΒΔΟΓΡΑΜΜΑ (chart.js, 20/09/2026) ─────────────────────────────
   Άξονας Y αριστερά (3 τιμές), πλέγμα, μπάρες ως <button> (πληκτρολόγιο +
   αφή), ετικέτες Χ, γραμμή ανάγνωσης κάτω. Ύψη σε % — ποτέ δεν ξεφεύγουν. */
.ch{position:relative;margin-top:10px}
.ch-plot{display:flex;gap:8px;height:170px}
.ch-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:38px;
  transform:translateY(-6px);height:calc(100% + 12px)}
.ch-area{position:relative;flex:1;min-width:0}
.ch-grid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.ch-grid i{display:block;height:1px;background:var(--line)}
.ch-grid i:last-child{background:var(--muted);opacity:.5}
.ch-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;touch-action:pan-y;cursor:crosshair}
.ch-b{flex:1 1 0;min-width:0;height:100%;position:relative;background:transparent;border:0;padding:0;margin:0;
  display:flex;align-items:flex-end;cursor:pointer;border-radius:3px 3px 0 0;font:inherit}
.ch-b .ghost{position:absolute;left:0;right:0;bottom:0;background:var(--fill-ghost);border-radius:3px 3px 0 0;min-height:1px}
.ch-b .stack{position:relative;width:100%;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-start;z-index:1}
.ch-b .seg{display:block;width:100%;min-height:1px;flex:none}
.ch-b .stack .seg:last-child{border-radius:3px 3px 0 0}
.ch-b .seg.act{background:var(--fill-prod)}
.ch-b .seg.cut{background:var(--fill-curt)}
.ch-b.fault .seg.act{background:var(--fill-fault)}
.ch-b .seg.ok{background:var(--fill-ok)}
.ch-b .seg.curtailment{background:var(--fill-curt)}
.ch-b .seg.fault{background:var(--fill-fault)}
.ch-b .seg.soiling{background:var(--fill-soil)}
.ch-b .seg.unknown{background:var(--fill-unknown)}
.ch-b .seg.rain{background:var(--fill-rain)}
.ch-b .seg.hour{background:var(--fill-curt)}
.ch-b.mark::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--fill-curt);border-radius:2px;z-index:2}
.ch-b:hover .seg,.ch-b:hover .ghost{filter:brightness(1.12)}
.ch-b.sel{background:color-mix(in srgb, var(--accent) 10%, transparent);outline:1px solid var(--accent);outline-offset:0}
.ch-b:focus-visible{outline:2px solid var(--accent)}
.ch-x{position:relative;display:flex;gap:2px;margin:6px 0 0 46px;font-size:11.5px;color:var(--muted);height:16px}
.ch-x span{flex:1 1 0;min-width:0;position:relative}
.ch-x span.on::before{content:"";position:absolute;left:50%;top:-6px;width:1px;height:4px;background:var(--muted)}
/* Οι ετικέτες κάθονται ΠΑΝΩ από τη λεπτή στήλη τους (absolute), ώστε η πρώτη να
   αρχίζει στην άκρη, η τελευταία να τελειώνει στην άκρη, οι ενδιάμεσες στο κέντρο —
   αλλιώς στα 375px το «24/7» έβγαινε έξω από την κάρτα. */
.ch-x span.on i{position:absolute;top:0;left:50%;transform:translateX(-50%);font-style:normal;white-space:nowrap}
.ch-x span.on:first-child i{left:0;transform:none}
.ch-x span.on:last-child i{left:auto;right:0;transform:none}
.ch-unit{position:absolute;left:-46px;top:0;width:38px;text-align:right;font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.ch-read{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  font-size:13.5px;line-height:1.5;min-height:42px;font-variant-numeric:tabular-nums}
.ch-read b{color:var(--txt)}
.ch-read .tag,.ch-read .conf{margin-left:6px;white-space:nowrap;vertical-align:middle}
.ch-empty{padding:18px 0;color:var(--muted);font-size:13.5px}
.chart-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:6px;flex-wrap:wrap;gap:6px}
.chart-top b{color:var(--txt)}
@media (max-width:600px){
  .ch-plot{height:150px}
  .ch-bars{gap:1px}
  .ch-y{min-width:34px;font-size:11px}
  .ch-x{margin-left:42px}
  .ch-unit{left:-42px;width:34px}
}

.legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}

/* Hour heat (curtailment by hour) */
/* Alerts */
.alert{display:flex;gap:14px;padding:14px 16px;border-radius:12px;margin-top:10px;border:1px solid;align-items:flex-start}
.alert.critical{background:color-mix(in srgb, var(--red) 8%, transparent);border-color:color-mix(in srgb, var(--red) 35%, transparent)}
.alert.major{background:color-mix(in srgb, var(--orange) 8%, transparent);border-color:color-mix(in srgb, var(--orange) 35%, transparent)}
.alert.minor{background:color-mix(in srgb, var(--yellow) 8%, transparent);border-color:color-mix(in srgb, var(--yellow) 30%, transparent)}
/* «warning» = όριο της γνώσης μας, όχι βλάβη του πάρκου. Γι' αυτό μπλε, όχι κόκκινο. */
.alert.warning{background:color-mix(in srgb, var(--blue) 7%, transparent);border-color:color-mix(in srgb, var(--blue) 30%, transparent)}
.alert .sev{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:999px;flex-shrink:0}
.alert.critical .sev{background:var(--red);color:#fff}
.alert.major .sev{background:var(--orange);color:var(--on-accent)}
.alert.minor .sev{background:var(--yellow);color:var(--on-accent)}
.alert.warning .sev{background:var(--blue);color:var(--on-accent)}
.alert.warning .cost b{color:var(--muted);font-weight:700}
.alert .body{flex:1;min-width:0}
.alert .body b{display:block;margin-bottom:3px;font-size:15px}
.alert .body p{font-size:13px;color:var(--muted)}
.alert .cost{text-align:right;flex-shrink:0}
.alert .cost b{font-size:19px;font-weight:800;color:var(--red)}
.alert .cost small{display:block;font-size:12px;color:var(--muted)}

/* ── Εκκαθαριστικό ΔΑΠΕΕΠ ──────────────────────────────────────────────────
   ΓΡΑΨΙΜΟ ΜΕ ΤΟ ΧΕΡΙ, ΣΧΕΔΙΑΣΜΕΝΟ ΓΙΑ ΚΑΠΟΙΟΝ ΠΟΥ ΔΕΝ ΤΑ ΠΑΕΙ ΚΑΛΑ ΜΕ ΟΘΟΝΕΣ:
   μεγάλα πεδία (48px ύψος, 17px γράμματα — όχι 15), ρητή ετικέτα πάνω από κάθε
   πεδίο σε κάθε γραμμή στο κινητό, και σύμβολα €/kWh μέσα στο πεδίο ώστε να μη
   χρειάζεται να θυμάται τι πάει πού. */
.dap-rows{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.dap-row{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:8px;align-items:end}
.dap-row .lab{display:block;font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.dap-row input,.dap-row select{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;
  font-size:17px;font-family:inherit;background:var(--bg);color:var(--txt);min-height:48px}
.dap-row input:focus,.dap-row select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.dap-row .rm{display:flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:10px;min-width:48px;min-height:48px;font-size:20px;cursor:pointer;font-family:inherit}
.dap-row .rm:hover{color:var(--red);border-color:var(--red)}
/* Σε desktop φτάνει το σύμβολο· σε κινητό η γραμμή γίνεται πλατιά και ένα σκέτο
   ✕ μέσα σε άδειο πλαίσιο μοιάζει με πεδίο συμπλήρωσης, όχι με κουμπί. */
.dap-row .rm em{display:none;font-style:normal;font-size:15px;font-weight:700}

/* Απορριφθείσα ημέρα: μένει ορατή αλλά ξεθωριασμένη — «το είδα, το έβγαλα». */
.dayrow.rejected{opacity:.6}
.dayrow.rejected .amt{text-decoration:line-through}

/* Η επιβεβαίωση του τι καταλάβαμε — πιάνει ολόκληρο το πλάτος κάτω από τη γραμμή. */
.d-echo{grid-column:1/-1;font-size:13px;color:var(--muted);padding:2px 2px 0;min-height:0}
.d-echo b{color:var(--txt);font-weight:700}
.d-echo.odd{color:var(--orange)}
.d-echo .bad{color:var(--red);font-weight:700}

.dap-check{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 14px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.dap-check input{width:22px;height:22px;margin-top:2px;flex-shrink:0;accent-color:var(--accent)}
.dap-check span{font-size:14px}
.dap-check small{display:block;font-size:13px;color:var(--muted);margin-top:3px;font-weight:400}

.dap-file{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.dap-file summary{cursor:pointer;font-size:13px;color:var(--muted);font-weight:600}
.dap-file summary:hover{color:var(--txt)}

/* Το αποτέλεσμα: μία μεγάλη ετυμηγορία, μετά οι λεπτομέρειες. */
.dap-verdict{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px 18px;
  border-radius:12px;border:1px solid}
.dap-verdict.good{background:color-mix(in srgb, var(--green) 8%, transparent);border-color:color-mix(in srgb, var(--green) 35%, transparent)}
.dap-verdict.warn{background:color-mix(in srgb, var(--orange) 8%, transparent);border-color:color-mix(in srgb, var(--orange) 35%, transparent)}
.dap-verdict.bad{background:color-mix(in srgb, var(--red) 8%, transparent);border-color:color-mix(in srgb, var(--red) 35%, transparent)}
.dap-verdict .ic{font-size:30px;line-height:1;flex-shrink:0}
.dap-verdict b{display:block;font-size:17px;margin-bottom:4px}
.dap-verdict p{font-size:14px;color:var(--muted)}
.dap-verdict .btn-set{margin:12px 0 0;font-size:14px;padding:11px 18px;min-height:44px}

.dap-months{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.dap-m{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:10px;align-items:center;
  padding:12px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.dap-m .mn{font-weight:700;font-size:14px}
.dap-m .col{text-align:right}
.dap-m .col span{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.dap-m .col b{font-size:15px;font-weight:700}
.dap-m.ok{border-left:3px solid var(--green)}
.dap-m.unpaid{border-left:3px solid var(--yellow)}
.dap-m.missing-data{border-left:3px solid var(--orange)}
.dap-m.partial,.dap-m.no-inverter{border-left:3px solid var(--line)}
.dap-note{grid-column:1/-1;font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:2px}

@media(max-width:700px){
  /* Σε κινητό η γραμμή γίνεται κάθετη — τρία πεδία δίπλα-δίπλα σε 360px είναι
     3 εκατοστά το καθένα και δεν πατιούνται. */
  .dap-row{grid-template-columns:1fr 1fr;gap:10px}
  .dap-row .mfield{grid-column:1/-1}
  .dap-row .rm{grid-column:1/-1;width:100%}
  .dap-row .rm em{display:inline}
  /* Σε κινητό οι τρεις αριθμοί μπαίνουν σε στήλη με ετικέτα αριστερά και τιμή
     δεξιά — διαβάζεται σαν λογαριασμός, που είναι ακριβώς αυτό που είναι. */
  .dap-m{grid-template-columns:1fr;gap:6px}
  .dap-m .mn{margin-bottom:2px}
  .dap-m .col{display:flex;justify-content:space-between;align-items:baseline;
    text-align:left;border-top:1px solid var(--line);padding-top:6px}
  .dap-m .col span{margin:0}
}

/* Table */
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px}
.tag.ok{background:color-mix(in srgb, var(--green) 15%, transparent);color:var(--green)}
.tag.bad{background:color-mix(in srgb, var(--red) 15%, transparent);color:var(--red)}
.tag.warn{background:color-mix(in srgb, var(--orange) 15%, transparent);color:var(--orange)}

/* O&M claim box */
.claim{background:linear-gradient(135deg,color-mix(in srgb, var(--red) 12%, transparent),color-mix(in srgb, var(--orange) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--red) 30%, transparent);border-radius:14px;padding:18px}
.claim .amt{font-size:34px;font-weight:800;color:var(--red)}

.hint{font-size:13px;color:var(--muted);margin-top:14px;padding:12px 14px;background:var(--panel2);border-radius:10px;border-left:3px solid var(--accent)}
.view{display:none}.view.on{display:block}
body.not-today .onb{display:none}   /* οι οδηγίες μόνο στο «Σήμερα» */
.foot{color:var(--muted);font-size:12.5px;text-align:center;margin:30px 0 16px;line-height:1.7}

@media(max-width:860px){
  .c2,.c3,.c4,.c6,.c8{grid-column:span 12}
  .chips{grid-template-columns:repeat(2,1fr)}
  .pcard{flex-wrap:wrap}.pcard .money{text-align:left;width:100%}
  .wf{height:200px}.wf .lbl{font-size:12px}
  /* Στα αγγλικά οι ετικέτες του καταρράκτη είναι μακρύτερες («Curtailment», «Weather»): λίγο μικρότερες για να μη σπάνε στη μέση της λέξης. */
  html[lang="en"] .wf .lbl{font-size:10.5px;letter-spacing:-.01em;word-break:normal;overflow-wrap:normal}
  .card{overflow-x:hidden}
  table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ---- Ρυθμίσεις πάρκου ---- */
.btn-set{margin-left:auto;background:var(--accent);color:var(--on-accent);border:none;padding:12px 20px;border-radius:999px;
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;min-height:46px}
.btn-set:hover{background:var(--accent2)}
header.top .badge{margin-left:10px}
.modal{display:none;position:fixed;inset:0;background:var(--overlay);z-index:60;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;max-width:460px;width:100%;max-height:90vh;overflow:auto}
.modal-box h3{font-size:20px;margin-bottom:4px;color:var(--txt);text-transform:none;letter-spacing:0}
.field{margin:14px 0}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.field input,.field select{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;min-height:48px;
  font-size:16px;  /* ποτέ <16px: το iOS ζουμάρει στο πάτημα και δεν ξεζουμάρει */font-family:inherit;background:var(--bg);color:var(--txt)}
.fhint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--txt);padding:12px 20px;min-height:46px;
  border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}

/* Στενές οθόνες: η κεφαλίδα να μη στριμώχνεται */
@media(max-width:560px){
  header.top{flex-wrap:wrap;gap:10px}
  header.top .brand{font-size:17px;flex:1;min-width:0}
  header.top .brand small{display:none}
  .btn-set{margin-left:auto;padding:8px 12px;font-size:13px}
  header.top .badge{margin-left:0;order:3;width:100%;text-align:center}
}

/* ---- Ρύπανση ---- */


/* ---- Οδηγίες ξεκινήματος (3 βήματα) ---- */
.btn-help{background:transparent;border:1px solid var(--line);color:var(--muted);
  width:32px;height:32px;border-radius:50%;font-size:15px;font-weight:800;cursor:pointer;
  font-family:inherit;flex-shrink:0;line-height:1}
.btn-help:hover{border-color:var(--accent);color:var(--accent2)}
.btn-help.hidden{display:none}

.onb{position:relative;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:14px;padding:20px 22px;margin-top:18px}
.onb.hidden{display:none}
.onb h3{font-size:17px;font-weight:800;color:var(--txt);margin-bottom:4px}
.onb-lead{font-size:13px;color:var(--muted);margin-bottom:16px;max-width:640px}
.onb-close{position:absolute;top:12px;right:14px;background:transparent;border:none;
  color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:8px;font-family:inherit}
.onb-close:hover{color:var(--txt);background:var(--panel2)}

.onb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.onb-step{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px}
.onb-step .n{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.onb-step b{display:block;font-size:15px;margin-bottom:5px;color:var(--txt)}
.onb-step p{font-size:13.5px;color:var(--muted);margin-bottom:12px;line-height:1.45}
.onb-btn{display:inline-block;background:var(--accent);color:var(--on-accent);border:none;
  padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:inherit;text-decoration:none}
.onb-btn:hover{background:var(--accent2)}

@media(max-width:860px){ .onb-grid{grid-template-columns:1fr} }
@media(max-width:560px){ .onb{padding:16px 16px 18px} .onb-close{top:8px;right:8px} }

/* ---- Λογαριασμός χρήστη / demo mode ---- */
.user-box{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.user-box b{color:var(--txt);font-weight:600;max-width:180px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.user-box a{color:var(--muted);text-decoration:none;font-weight:700;border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;font-size:13px}
.user-box a:hover{color:var(--txt);border-color:var(--accent)}

.demo-banner{display:none;align-items:center;gap:14px;flex-wrap:wrap;
  background:color-mix(in srgb, var(--accent) 8%, transparent);border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:12px;padding:14px 18px;margin-top:16px;font-size:13.5px;color:var(--txt)}
.demo-banner.on{display:flex}
.demo-banner span{flex:1;min-width:240px}

.fleet-actions{display:flex;justify-content:flex-end;margin-bottom:12px}

.empty-state{display:none;text-align:center;background:var(--panel);border:1px dashed var(--line);
  border-radius:16px;padding:48px 24px}
.empty-state.on{display:block}
.empty-state .big{font-size:44px;margin-bottom:12px}
.empty-state b{display:block;font-size:18px;margin-bottom:8px}
.empty-state p{font-size:14px;color:var(--muted);max-width:420px;margin:0 auto 20px;line-height:1.55}

@media(max-width:560px){
  .user-box{order:4;width:100%;justify-content:space-between}
  .user-box b{max-width:none}
}
/* Τα δύο κουμπιά της κάρτας πάρκου. Στόχος αφής 40px — ο κανόνας των 44px
   αφορά τα κύρια κουμπιά· εδώ είναι δευτερεύοντα και δίπλα-δίπλα, οπότε
   κρατάμε απόσταση μεταξύ τους ώστε να μην πατηθεί λάθος η διαγραφή. */
/* ---- Οδηγός βήμα-βήμα («Τα δεδομένα μου») ---- */
.steps-card{border-color:color-mix(in srgb, var(--accent) 28%, transparent)}
.step-row{display:flex;gap:16px;align-items:flex-start;margin:16px 0}
.step-n{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--accent);
  color:var(--on-accent);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.step-row b{display:block;font-size:15.5px;color:var(--txt);margin-bottom:3px}
.step-row p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0}

/* Λέγονταν «.brand» — ίδιο όνομα με την κλάση του λογότυπου στην κεφαλίδα.
   Επειδή αυτός ο κανόνας έρχεται δεύτερος, ο τίτλος «VoltGaia» κληρονομούσε
   περίγραμμα και στρογγυλεμένες γωνίες: έμοιαζε με χαλασμένο πεδίο εισαγωγής,
   χειρότερα στο φωτεινό θέμα. Εδώ «vendor» σημαίνει μάρκα inverter. */
.vendor{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--inset)}
/* Ο στόχος αφής είναι ολόκληρη η γραμμή, όχι το τριγωνάκι. */
.vendor summary{padding:14px 16px;min-height:48px;display:flex;align-items:center;
  cursor:pointer;font-weight:700;font-size:15px;color:var(--txt);list-style:none}
.vendor summary::-webkit-details-marker{display:none}
.vendor summary::before{content:'▸';margin-right:10px;color:var(--accent2);font-size:13px;
  transition:transform .15s}
.vendor[open] summary::before{transform:rotate(90deg)}
.vendor[open] summary{border-bottom:1px solid var(--line)}
.vendor ol{margin:12px 0 12px 34px;padding:0}
.vendor li{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:5px}
.vendor p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:10px 16px}
.vendor .tip{background:color-mix(in srgb, var(--accent) 9%, transparent);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;padding:11px 14px;margin:12px 16px 14px;color:var(--txt)}

/* Το summary του «έχω το εκκαθαριστικό σε αρχείο» ήταν 20px — κάτω από τον
   κανόνα των 44px. Είναι πτυσσόμενο που πατιέται με δάχτυλο, όπως τα .vendor. */
.dap-file summary{min-height:44px;display:flex;align-items:center;cursor:pointer}

/* Διακόπτης σεναρίου στην καρτέλα του δανείου. */
.curt-toggle{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.curt-toggle label{display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:11px 16px;min-height:44px;border:1px solid var(--line);border-radius:12px;
  background:var(--inset);font-size:14.5px;color:var(--muted)}
.curt-toggle label:has(input:checked){border-color:var(--accent);color:var(--txt);
  background:color-mix(in srgb, var(--accent) 10%, transparent)}
.curt-toggle input{width:18px;height:18px;accent-color:var(--accent);margin:0;flex-shrink:0}
.curt-toggle small{color:var(--muted);font-weight:400}
@media(max-width:560px){ .curt-toggle label{width:100%} }

.pcard-tools{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.pcard-edit,.pcard-del{background:transparent;border:1px solid var(--line);color:var(--muted);
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font-size:14px;cursor:pointer;font-family:inherit;line-height:1}
.pcard-edit:hover{border-color:var(--accent);color:var(--accent2)}
/* Η διαγραφή γίνεται κόκκινη ΜΟΝΟ στο hover: κόκκινη μονίμως θα τραβούσε το
   μάτι σε μια ενέργεια που σπάνια θέλεις. */
.pcard-del:hover{border-color:var(--red);color:var(--red);background:color-mix(in srgb, var(--red) 8%, transparent)}

/* ---- Επεξηγήσεις όρων («?») ---- */
/* ΤΟ ΚΟΥΜΠΙ ΠΟΥ ΧΡΕΙΑΖΕΤΑΙ ΠΕΡΙΣΣΟΤΕΡΟ ΟΠΟΙΟΣ ΔΕΝ ΞΕΡΕΙ ΟΡΟΛΟΓΙΑ.
   Ήταν 17×17px — μικρότερο από το νύχι του δείκτη και σε χρώμα που σχεδόν
   δεν φαινόταν. Τώρα: 26px ορατό, 44px επιφάνεια αφής (μέσω ::after), και
   στο χρώμα του brand ώστε να διαβάζεται ως «πάτησέ με». */
.help-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;border:1.5px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--accent2);font-size:15px;font-weight:800;
  cursor:pointer;font-family:inherit;margin-left:8px;padding:0;line-height:1;
  vertical-align:middle;flex-shrink:0}
.help-dot::after{content:'';position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.help-dot:hover{background:var(--accent);color:var(--on-accent)}
.help-body{font-size:14px;line-height:1.65;color:var(--muted);max-height:60vh;overflow-y:auto;padding-right:4px}
.help-body p{margin-bottom:12px}
.help-body b{color:var(--txt)}
.help-body h4{color:var(--accent2);font-size:13px;text-transform:uppercase;letter-spacing:.5px;
  margin:18px 0 8px;font-weight:800}
.help-body ul{margin:0 0 12px 20px}
.help-body li{margin:5px 0}
.help-body .hint-inline{font-size:13px;background:var(--panel2);border-radius:8px;padding:10px 12px}
.help-body .help-note{background:color-mix(in srgb, var(--accent) 8%, transparent);border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:10px;padding:14px;margin-top:16px;font-size:13.5px;color:var(--txt)}

/* ---- Πραγματικός χρόνος: φρεσκάδα, ανανέωση, ειδοποιήσεις ---- */
.freshness{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
/* ΚΑΤΑΣΤΑΣΕΙΣ ΦΡΕΣΚΑΔΑΣ.
   Το χρώμα δεν είναι διακόσμηση: είναι η μόνη ένδειξη ότι τα νούμερα που
   διαβάζει ο χρήστης μπορεί να είναι παλιά. Γι' αυτό το κόκκινο έχει και
   βάρος 700 — πρέπει να το δει κανείς χωρίς να το ψάχνει.
   Το `title` του στοιχείου δίνει την ανάλυση ανά πάρκο στο hover. */
.freshness.ok{color:var(--muted)}
.freshness.warn{color:var(--orange)}
.freshness.bad{color:var(--red);font-weight:700}
.freshness.muted{color:var(--muted);opacity:.75}
/* Η κουκκίδα «ζωντανά» μπαίνει ΜΟΝΟ στην κατάσταση ok. Ένας παλμός δίπλα σε
   προειδοποίηση θα έλεγε «όλα ρέουν» ενώ λέμε το αντίθετο. */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.btn-refresh{background:transparent;border:1px solid var(--line);color:var(--muted);
  width:32px;height:32px;border-radius:50%;font-size:15px;cursor:pointer;font-family:inherit;
  flex-shrink:0;line-height:1}
.btn-refresh:hover{border-color:var(--accent);color:var(--accent2)}
.btn-refresh.spinning{animation:spin .7s linear}
@keyframes spin{to{transform:rotate(360deg)}}

.notify-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.notify-bar div{flex:1;min-width:240px}
.notify-bar b{display:block;font-size:15px;margin-bottom:4px}
.notify-bar p{font-size:13.5px;color:var(--muted);line-height:1.5}
.btn-notify{background:var(--accent);color:var(--on-accent);border:none;padding:11px 18px;border-radius:999px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-notify:hover{background:var(--accent2)}
.btn-notify.on{background:color-mix(in srgb, var(--green) 15%, transparent);color:var(--green);border:1px solid color-mix(in srgb, var(--green) 40%, transparent)}

.toasts{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;display:flex;flex-direction:column;
  gap:10px;max-width:360px}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;
  box-shadow:0 12px 32px var(--shadow);animation:slideIn .25s ease-out}
.toast.critical{border-left-color:var(--red)}
.toast b{flex:1;font-size:13.5px;font-weight:700;line-height:1.35}
.toast span{font-size:13px;font-weight:800;color:var(--red);white-space:nowrap}
.toast-x{background:transparent;border:none;color:var(--muted);font-size:14px;cursor:pointer;
  padding:2px 4px;font-family:inherit}
.toast.leaving{opacity:0;transform:translateX(20px);transition:all .6s ease-in}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:560px){
  .toasts{left:12px;right:12px;bottom:12px;max-width:none}
  .freshness{order:5;width:100%;justify-content:center;margin-top:4px}
}

.link-btn{background:none;border:none;color:var(--accent2);font-family:inherit;font-size:inherit;
  padding:0;cursor:pointer;text-decoration:underline}
.link-btn:hover{color:var(--accent)}

/* Πρόσκληση για σχόλια. Ήταν σύνδεσμος μέσα στο υποσέλιδο και δεν τον έβλεπε
   κανείς. Στη δοκιμαστική φάση το σχόλιο του χρήστη είναι το προϊόν, οπότε
   παίρνει δικό του πλαίσιο με το χρώμα της μάρκας. */
.feedback-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:22px 0 8px;padding:18px 22px;border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--accent) 10%, transparent),color-mix(in srgb, var(--accent) 3%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent)}
.feedback-cta > div{flex:1;min-width:220px}
.feedback-cta b{display:block;font-size:16px;color:var(--txt);margin-bottom:3px}
.feedback-cta span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.feedback-cta .btn-set{margin-left:0;flex-shrink:0}
@media(max-width:560px){
  .feedback-cta{padding:16px;gap:14px}
  .feedback-cta .btn-set{width:100%}
}

.prepay-block{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.prepay-block > b{font-size:14.5px}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.pp-grid div{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pp-grid b{display:block;font-size:21px;font-weight:800;line-height:1.15}
.pp-grid span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pp-grid .good b{color:var(--green)}
.pp-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.pp-compare > div{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.pp-compare .win{border-color:color-mix(in srgb, var(--green) 40%, transparent);background:color-mix(in srgb, var(--green) 6%, transparent)}
.pp-compare h4{font-size:13px;margin-bottom:8px;color:var(--txt)}
.pp-compare .n{font-size:19px;font-weight:800;color:var(--green)}
.pp-compare p{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:6px}
@media(max-width:560px){.pp-compare{grid-template-columns:1fr}}

/* ---- ΣΗΜΕΡΑ: οι τρεις ερωτήσεις ---- */
.q3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.q3 .q{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.q3 .q .lbl{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.q3 .q .big{font-size:32px;font-weight:800;line-height:1.15;margin:8px 0 4px}
.q3 .q .sub2{font-size:13px;color:var(--muted);line-height:1.5}
.q3 .q.earn .big{color:var(--green)}
.q3 .q.lost .big{color:var(--red)}
.q3 .q.act .big{font-size:19px;color:var(--accent2);line-height:1.3}
@media(max-width:860px){.q3{grid-template-columns:1fr}}

.act-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.act-row:first-child{border-top:none}
.act-row .money{flex:0 0 118px;text-align:right}
.act-row .money b{display:block;font-size:19px;font-weight:800;color:var(--red)}
.act-row .money.gain b{color:var(--green)}
.act-row .money.cost b{color:var(--orange)}
.act-row .money small{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.act-row .body{flex:1;min-width:0}
.act-row .body b{display:block;font-size:15px;margin-bottom:4px;line-height:1.35}
.act-row .body p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
.act-row .go{background:transparent;border:1px solid var(--line);color:var(--accent2);padding:9px 14px;
  border-radius:999px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
.act-row .go:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent)}
@media(max-width:560px){
  .act-row{flex-wrap:wrap;gap:10px}
  .act-row .money{flex:0 0 auto;text-align:left;order:2}
  .act-row .body{flex:1 1 100%;order:1}
  .act-row .go{order:3;margin-left:auto;min-height:44px}
}

/* ---- Τα δικά σου δεδομένα (πραγματικές μετρήσεις) ---- */
#srcTag{margin:12px 0 -4px;font-size:12.5px;font-weight:700;letter-spacing:.3px;
  padding:9px 14px;border-radius:10px;display:none}
#srcTag.on{display:block}
#srcTag.real{background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green);border:1px solid color-mix(in srgb, var(--green) 30%, transparent)}
#srcTag.model{background:color-mix(in srgb, var(--muted) 8%, transparent);color:var(--muted);border:1px solid var(--line)}
#srcTag b{font-weight:800}
/* Το `margin-left:auto` του .btn-set σπρώχνει το κύριο κουμπί δεξιά σε desktop,
   αλλά όταν η σειρά τυλίγεται σε κινητό το έστελνε ΚΑΤΩ από το «Διαγραφή».
   Η καταστροφική ενέργεια δεν μπαίνει ποτέ πρώτη — και δεν είναι και πλήρους
   πλάτους, ώστε να μην πατηθεί κατά λάθος. */
.real-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px;align-items:center}
.real-actions .btn-set{order:-1;margin-left:0}
.src-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  padding:4px 10px;border-radius:999px;letter-spacing:.3px;vertical-align:middle;margin-left:8px}
.src-tag.real{background:color-mix(in srgb, var(--green) 14%, transparent);color:var(--green);border:1px solid color-mix(in srgb, var(--green) 35%, transparent)}
.src-tag.model{background:color-mix(in srgb, var(--muted) 12%, transparent);color:var(--muted);border:1px solid var(--line)}
.real-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:14px}
.real-stat div{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.real-stat b{display:block;font-size:20px;font-weight:800}
.real-stat span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

.dayrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.dayrow .d{font-weight:700;font-size:13.5px;min-width:92px}
.dayrow .why{flex:1;min-width:220px;font-size:13px;color:var(--muted);line-height:1.5}
.dayrow .amt{font-weight:800;color:var(--red);font-size:14px;white-space:nowrap}
.dayrow .yn{display:flex;gap:6px;flex-wrap:wrap}
.dayrow .yn button{background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.dayrow .yn button:hover{border-color:var(--accent);color:var(--txt)}
.dayrow .yn button.on{background:color-mix(in srgb, var(--green) 15%, transparent);border-color:color-mix(in srgb, var(--green) 40%, transparent);color:var(--green)}
.dayrow .yn button.off{background:color-mix(in srgb, var(--red) 12%, transparent);border-color:color-mix(in srgb, var(--red) 40%, transparent);color:var(--red)}
.dayrow .yn button.clear{padding:7px 10px;border-style:dashed}
@media (max-width:600px){ .dayrow .yn{width:100%} .dayrow .yn button{flex:1 1 auto;min-height:40px} }
.conf{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.conf.high{background:color-mix(in srgb, var(--green) 15%, transparent);color:var(--green)}
.conf.medium{background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent2)}
.conf.low{background:color-mix(in srgb, var(--muted) 15%, transparent);color:var(--muted)}

/* Modal εισαγωγής */
.imp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin-top:6px}
#impTable{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
#impTable th{background:var(--panel2);color:var(--muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.3px;padding:7px 9px;text-align:left;font-weight:700}
#impTable td{padding:6px 9px;border-top:1px solid var(--line);color:var(--txt)}
#impTable .picked{color:var(--accent2);font-weight:700}
.imp-bar{height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  overflow:hidden;margin:14px 0 8px}
.imp-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease}

/* ═══════════════════════════════════════════════════════════════════════
   ΚΙΝΗΤΟ — τελευταίο μπλοκ, υπερισχύει των προηγούμενων.

   Ο πελάτης δεν κάθεται σε γραφείο. Είναι στο πάρκο, στο αγροτικό, με το
   κινητό στο ένα χέρι. Η κεφαλίδα δεν επιτρέπεται να τρώει μισή οθόνη,
   και κάθε κουμπί πρέπει να πατιέται με αντίχειρα (≥44px).
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:560px){

  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  .wrap{padding:0 14px}

  /* ---- Κεφαλίδα: 2 σειρές, όχι 5 ---- */
  header.top{flex-wrap:wrap;gap:8px 8px;padding:12px 0 10px}
  header.top img{width:32px;height:32px;order:1}
  header.top .brand{font-size:16px;line-height:1.2;flex:1;min-width:0;order:1}
  header.top .brand small{display:none}
  header.top .badge{order:1;margin-left:auto;width:auto;flex:0 0 auto;
    font-size:12px;padding:4px 9px;letter-spacing:0}
  /* Σπάει τη γραμμή μετά το λογότυπο+badge, ώστε οι ενέργειες να πέσουν
     ΟΛΕΣ μαζί στη δεύτερη σειρά αντί να σκορπίζονται σε τέσσερις. */
  header.top::after{content:"";flex-basis:100%;height:0;order:1}

  /* Δεύτερη σειρά: οι ενέργειες, όλες σε ύψος δαχτύλου */
  .btn-help,.btn-refresh{order:2;width:44px;height:44px;flex:0 0 44px;font-size:16px}
  .btn-set{order:2;margin-left:0;flex:1 1 auto;min-height:44px;padding:0 14px;
    font-size:13.5px;display:inline-flex;align-items:center;justify-content:center}
  /* Τρίτη σειρά: «πότε ενημερώθηκε» αριστερά, λογαριασμός δεξιά */
  .freshness{order:3;flex:1 1 auto;width:auto;justify-content:flex-start;
    font-size:12px;margin-top:0}
  .user-box{order:3;width:auto;flex:0 0 auto;justify-content:flex-end;font-size:12.5px;margin-top:0}
  .user-box b{max-width:150px}
  .user-box a{padding:11px 14px;min-height:44px;display:inline-flex;align-items:center}

  /* ---- Καρτέλες: να φαίνεται ότι κυλάνε ---- */
  nav.tabs{padding-top:12px;gap:2px;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav.tabs button{padding:12px 13px;font-size:13.5px;min-height:44px}

  /* ---- Πλακίδια & κάρτες ---- */
  .chips{gap:8px;margin:14px 0}
  .chip{padding:10px 8px;min-height:44px}
  .chip b{font-size:21px}
  .chip span{font-size:12px}

  .pcard{padding:14px;gap:12px}
  .pcard .thumb{width:52px;height:52px;font-size:22px}
  .pcard .nm{font-size:15px}
  .pcard .money{margin-top:6px}

  .card{padding:14px}
  .kpi{font-size:27px}
  .kpi.sm{font-size:22px}

  /* ---- Ενέργειες πλάτους οθόνης (ο αντίχειρας φτάνει παντού) ---- */
  /* Τα κουμπιά ΜΕΣΑ σε κάρτα («Υπολόγισε») πιάνουν όλο το πλάτος — ο αντίχειρας
     δεν ψάχνει στόχο 90 pixel στη μέση της οθόνης. */
  .card .btn-set{width:100%;flex:none;margin-left:0;margin-top:12px}
  .fleet-actions{justify-content:stretch}
  .fleet-actions .btn-set{width:100%;flex:1 1 100%}
  .btn-notify{width:100%;min-height:46px}
  .notify-bar{gap:12px}
  .demo-banner{gap:10px}
  .demo-banner .onb-btn{width:100%;text-align:center;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}

  /* ---- Οδηγίες ---- */
  .onb h3{font-size:16px}
  .onb-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .onb-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center}

  /* ---- Παράθυρα: φύλλο από κάτω, όπως το συνηθίζει στο κινητό ---- */
  .modal{padding:0;align-items:flex-end}
  .modal-box{max-width:none;border-radius:18px 18px 0 0;max-height:92vh;padding:22px 18px 26px}
  /* ΓΙΑΤΙ STICKY — ΜΕΤΡΗΘΗΚΕ 11/09/2026: στα 360×740 το modal ρυθμίσεων
     έχει scrollHeight 796 σε clientHeight 679, και τα κουμπιά Άκυρο/
     Αποθήκευση κάθονταν στα 830px — 90px ΚΑΤΩ από το viewport. Ο χρήστης
     συμπληρώνει τα πεδία και δεν βλέπει πού αποθηκεύει· πρέπει να μαντέψει
     ότι το modal κυλάει. Σε φθηνό Android, με τη μπάρα του browser, ακόμη
     χειρότερα. Sticky = τα κουμπιά είναι ΠΑΝΤΑ ορατά, ό,τι κι αν κυλάει.
     Το αρνητικό margin/padding απλώνει το φόντο ως τις άκρες του box
     (padding 22px 18px 26px) ώστε το περιεχόμενο που κυλάει από κάτω να μη
     φαίνεται μέσα από τα κενά. */
  .modal-actions{flex-wrap:wrap;gap:8px;position:sticky;bottom:-26px;
    background:var(--panel);margin:20px -18px -26px;
    padding:12px 18px calc(26px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line)}
  .modal-actions button{flex:1 1 45%;min-height:46px}
  .row{flex-direction:column;gap:0}
  /* 16px = το iOS ΔΕΝ κάνει ζουμ όταν πατάς το πεδίο. Κάτω από 16 κάνει. */
  .field input,.field select{font-size:16px;min-height:46px}

  /* ---- Γραφήματα ----
     Ο καταρράκτης είναι ΤΟ γράφημα του προϊόντος. Αν χρειάζεται πλάγιο σκρολ,
     ο πελάτης βλέπει 3 από τις 6 στήλες και χάνει όλο το νόημα. Χωράνε όλες. */
  /* Εδώ έγραφε «.wf-scroll{overflow-x:visible}». ΔΕΝ ίσχυσε ποτέ: το
     overflow-y:hidden αναγκάζει τον browser να κάνει το visible → auto
     στον άλλο άξονα. Η υπόσχεση «κανένα πλάγιο σκρολ» ισχύει τώρα επειδή
     το περιεχόμενο ΧΩΡΑΕΙ, όχι επειδή το απαγορεύει κανόνας. */
  .wf{height:190px;min-width:0;gap:3px}
  .wf .val{font-size:12px;letter-spacing:-.02em}
  .wf{gap:1px}
  /* 375px: 7 στήλες × ~49px — τα ποσά αγγίζονταν. Οι ζυγές στήλες ανεβάζουν το
     ποσό τους 16px: ίδια ανάγνωση, χωρίς επικάλυψη. Οι μπάρες δεν αλλάζουν. */
  .wf{padding-top:16px;box-sizing:content-box}
  .wf .col:nth-child(even) .val{transform:translateY(-15px)}
  .wf .lbl{font-size:12px;min-height:46px;margin-top:6px}
  .legend,.wf-legend{font-size:12px;gap:8px 12px}
  .help-dot{width:22px;height:22px}
}

/* Πολύ στενές συσκευές (iPhone SE, 320px) */
@media(max-width:360px){
  header.top .brand{font-size:15px}
  .chips{grid-template-columns:1fr 1fr}
  .kpi{font-size:24px}
  nav.tabs button{padding:12px 10px;font-size:13px}
}

/* ---- Αυτόματη ενημέρωση (φόρμα πάρκου) ----
   Ξεχωρίζει οπτικά από τα υπόλοιπα πεδία γιατί είναι άλλης φύσης: τα άλλα
   περιγράφουν ΤΙ ΕΙΝΑΙ το πάρκο, αυτό ρυθμίζει ΠΩΣ ΕΡΧΟΝΤΑΙ τα δεδομένα. */
.auto-feed{border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:14px 14px 4px;margin:6px 0 14px;background:var(--panel2)}
.copyline{display:flex;gap:8px;align-items:center}
.copyline code{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:9px 11px;font-size:13.5px;overflow-x:auto;white-space:nowrap}
.copyline button{flex-shrink:0;min-height:44px}
.feed-state{font-size:13px;margin:2px 0 12px;min-height:18px}
.feed-state.on{color:var(--green)}
.feed-state.off{color:var(--muted)}
.feed-state.stale{color:var(--orange)}

/* ---- Καρτέλες στο κινητό: μενού πάνω-αριστερά + συρτάρι ----
   Βλ. σχόλιο στο index.html. Κατώφλι 700px: εκεί παύουν να χωράνε οι εννιά
   ετικέτες. Στο desktop τίποτα από αυτά δεν υπάρχει. */
.mnav,.drawer,.drawer-backdrop{display:none}
/* ΤΟ hidden ΠΡΕΠΕΙ ΝΑ ΝΙΚΑΕΙ ΠΑΝΤΑ. Ο browser έχει [hidden]{display:none} αλλά
   ως κανόνα UA — ΚΑΘΕ κανόνας συγγραφέα (π.χ. .drawer-backdrop{display:block}
   παρακάτω) τον νικάει. Έτσι, 13/09/2026, μια ΑΟΡΑΤΗ σκιά (opacity 0,
   z-index 80, inset 0) κάλυπτε όλη την οθόνη σε κάθε κινητό: η εφαρμογή
   άνοιγε και ΤΙΠΟΤΑ δεν πατιόταν. Το !important εδώ κλείνει ολόκληρη την
   κατηγορία, όχι μόνο αυτό το στοιχείο. */
[hidden]{display:none!important}
@media(max-width:700px){
  nav.tabs{display:none}
  .mnav{
    display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:30;
    margin:10px -18px 0;padding:8px 12px;
    background:var(--bg);border-bottom:1px solid var(--line);
  }
  .mnav-btn{
    width:44px;height:44px;border-radius:12px;flex-shrink:0;
    background:var(--panel);color:var(--txt);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .mnav-btn[aria-expanded="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .mnav-cur{font-size:17px;font-weight:700;color:var(--txt);letter-spacing:-.01em}

  .drawer-backdrop{
    display:block;position:fixed;inset:0;z-index:80;
    background:var(--overlay);opacity:0;transition:opacity .2s;
  }
  .drawer-backdrop.open{opacity:1}
  .drawer{
    display:flex;flex-direction:column;
    position:fixed;top:0;bottom:0;left:0;z-index:81;
    width:min(82vw,320px);
    background:var(--panel);border-right:1px solid var(--line);
    box-shadow:8px 0 32px rgba(0,0,0,.25);
    transform:translateX(-104%);transition:transform .22s ease-out;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
  }
  .drawer.open{transform:translateX(0)}
  .drawer-head{display:flex;align-items:center;gap:10px;padding:16px 14px 12px;border-bottom:1px solid var(--line)}
  .drawer-head img{width:30px;height:30px}
  .drawer-head b{font-size:17px;color:var(--txt);flex:1}
  .drawer-close{
    width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
    background:transparent;color:var(--muted);font-size:18px;cursor:pointer;
  }
  .drawer-list{list-style:none;margin:0;padding:6px 0 10px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
  .drawer-group{padding:14px 18px 6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .drawer-list button{
    width:100%;display:flex;align-items:center;gap:12px;
    background:none;border:none;border-left:3px solid transparent;
    padding:11px 18px 11px 15px;min-height:46px;text-align:left;
    font-family:inherit;font-size:16px;font-weight:600;color:var(--txt);cursor:pointer;
    border-radius:0 12px 12px 0;
  }
  .drawer-list button svg{flex-shrink:0;color:var(--muted)}
  .drawer-list button.on{color:var(--accent2);border-left-color:var(--accent);background:var(--bg)}
  .drawer-list button.on svg{color:var(--accent2)}
  .drawer-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);margin:0 6px;flex-shrink:0}
  .drawer-foot{display:flex;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .drawer-chip{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--bg);
    color:var(--txt);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
  .drawer-list button:focus{outline:none}
  .drawer-list button:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
  .drawer-list button span{flex:1}
  .drawer-n{
    font-style:normal;background:var(--red);color:#fff;font-size:12px;font-weight:800;
    padding:2px 8px;border-radius:999px;
  }
  /* Όσο είναι ανοιχτό το συρτάρι η σελίδα από πίσω δεν κυλάει. */
  body.drawer-lock{overflow:hidden}
}

/* ── Έντονα μέσα σε κείμενο μένουν μέσα στο κείμενο ────────────────────────
   Οι κανόνες πιο πάνω (.step-row b, .notify-bar b, .alert .body b, κ.λπ.)
   γράφτηκαν για τον ΤΙΤΛΟ κάθε μπλοκ, που όντως θέλει δική του γραμμή. Όμως
   πιάνουν και κάθε <b> μέσα στην παράγραφο: το «Ψάχνεις κουμπί που λέει
   Export, Εξαγωγή ή Λήψη» έσπαγε σε πέντε γραμμές και διαβαζόταν σαν λίστα.
   Μία έμφαση μέσα σε πρόταση δεν είναι επικεφαλίδα. */
.step-row p b, .step-row li b,
.notify-bar p b, .notify-bar li b,
.alert .body p b, .alert .body li b,
.act-row .body p b, .act-row .body li b,
.chip p b, .dap-verdict p b, .onb-step p b, .empty-state p b,
.feedback-cta p b, .pp-grid p b, .real-stat p b{
  display:inline; font-size:inherit; margin:0; line-height:inherit;
}

/* Κουμπί γλώσσας: ίδιο σχήμα με το θέμα, με κείμενο EN/ΕΛ αντί για εικονίδιο. */
.btn-lang{font-size:12px;font-weight:800;letter-spacing:.04em;font-family:inherit}

/* Υπόδειξη εγκατάστασης στην αρχική οθόνη (install.js) — μόνο κινητό, μόνο browser. */
.install-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:65;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:14px;line-height:1.45}
.install-bar span{flex:1 1 100%;color:var(--txt)}
.install-bar button{background:var(--accent);color:var(--on-accent);border:none;border-radius:999px;
  padding:10px 16px;min-height:44px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;flex:1 1 40%}
.install-bar button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}

/* Μήνυμα «χρειάζεται πρώτα πάρκο» όταν το συρτάρι γυρίζει τον νέο χρήστη στον Στόλο. */
.empty-redirect{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--accent);color:var(--txt);font-size:14px}
.empty-redirect.flash{animation:emptyFlash .9s ease-out}
@keyframes emptyFlash{0%{background:var(--accent);color:var(--on-accent)}100%{background:var(--panel);color:var(--txt)}}

/* Τιμές αγοράς — Αγορά Επόμενης Ημέρας */
.mk-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mk-head h3{margin:0}
.mk-date{font-size:15px;font-weight:700;color:var(--txt);text-transform:capitalize}
.mk-status{margin:10px 0 12px;padding:10px 14px;border-radius:10px;font-size:15px;border:1px solid var(--line);background:var(--panel2)}
.mk-status.good{border-color:var(--green);color:var(--green)}
.mk-status.bad{border-color:var(--red);color:var(--red)}
.mk-status.none{color:var(--muted)}
.mk-status span{color:var(--txt)}
.mk-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0 0 12px}
.mk-kpi{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mk-v{font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.1}
.mk-v.neg{color:var(--red)}
.mk-l{font-size:12px;color:var(--muted);margin-top:4px}
.mk-chart{width:100%;height:auto;display:block;margin:4px 0}
.mk-chart .mk-bar{fill:var(--accent);opacity:.85}
.mk-chart .mk-bar.low{fill:var(--orange)}
.mk-chart .mk-bar.le0{fill:var(--red);opacity:1}
.mk-chart .mk-zone{fill:var(--red);opacity:.10}
.mk-chart .mk-grid{stroke:var(--line);stroke-width:1}
.mk-chart .mk-zero{stroke:var(--muted);stroke-width:1.2}
.mk-chart .mk-ax{fill:var(--muted);font-size:11px}
.mk-src{margin-top:4px}
.mk-win{margin:6px 0 8px 18px;font-size:14px;color:var(--txt)}
.mk-note .sub{margin:0}
@media(max-width:700px){.mk-kpis{grid-template-columns:repeat(3,1fr)}.mk-v{font-size:18px}}

/* Λωρίδα 24 ωρών — η απλή όψη */
.mk-strip2{margin:10px 0 4px}
.mk-bar24{display:flex;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.mk-bar24 i{flex:1;display:block}
.mk-bar24 i.ok{background:var(--green);opacity:.55}
.mk-bar24 i.low{background:var(--orange)}
.mk-bar24 i.le0{background:var(--red)}
.mk-ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
.mk-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:6px 0 12px}
.mk-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mk-legend i.ok{background:var(--green);opacity:.55}.mk-legend i.low{background:var(--orange)}.mk-legend i.le0{background:var(--red)}
.mk-kpis{grid-template-columns:repeat(3,1fr)}
.mk-details{margin:6px 0 4px}
.mk-details summary{cursor:pointer;color:var(--muted);font-size:13px}
.mk-details[open] summary{margin-bottom:6px}

/* Διακόπτης (κινητό: 44px ύψος επαφής) */
.switch{display:flex;align-items:flex-start;gap:12px;margin:12px 0;cursor:pointer;min-height:44px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{flex:none;width:46px;height:26px;border-radius:13px;background:var(--line);position:relative;transition:background .15s;margin-top:2px}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch input:checked + .track{background:var(--green)}
.switch input:checked + .track::after{transform:translateX(20px)}
.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}
.switch-text{font-size:14px;line-height:1.35}

/* Οι πρώτες μέρες — κάρτα κατάστασης */
.fd{margin-bottom:16px;border-color:var(--accent)}
.fd-steps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.fd-step{display:flex;gap:12px;align-items:flex-start}
.fd-step b{font-size:15px}
.fd-mark{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.fd-step.done .fd-mark{background:var(--green);border-color:var(--green);color:#fff}
.fd-step.done .fd-mark::before{content:"✓"}
.fd-step.wait .fd-mark{border-color:var(--orange);color:var(--orange)}
.fd-step.wait .fd-mark::before{content:"…"}
.fd-step.todo .fd-mark::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.fd-addr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.fd-addr code{font-size:15px;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;word-break:break-all;flex:1;min-width:0}
.fd-copy{min-height:44px;padding:0 16px}
.fd-how{margin:6px 0}
.fd-how summary{cursor:pointer;color:var(--accent);font-size:14px;min-height:44px;display:flex;align-items:center}
.fd-how ol{margin:6px 0 4px 18px;font-size:14px;line-height:1.5}

/* Βαθμίδες βεβαιότητας (20/09/2026): 🟢 επιβεβαιωμένο · 🟡 πιθανό · ⚪ άγνωστο.
   Μία γραμμή στο κινητό, τρεις «κάψουλες» στο desktop. */
.conf-strip{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.conf-strip .c{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:13px;font-weight:700;background:var(--card2,rgba(127,127,127,.12))}
.conf-strip .c i{width:10px;height:10px;border-radius:50%;display:inline-block}
.conf-strip .c.ok i{background:var(--fill-ok)} .conf-strip .c.maybe i{background:var(--fill-curt)} .conf-strip .c.unk i{background:var(--fill-unknown)}
.conf-strip .c small{font-weight:400;color:var(--muted)}
.conf-note{font-size:12px;color:var(--muted);margin:0 0 8px}
.loss-tier{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}