/* pchive — style.css */
:root{
  --bg: oklch(15% .015 260);
  --bg-soft: oklch(17.5% .018 260);
  --card: oklch(20% .02 260);
  --card-2: oklch(24% .02 260);
  --border: oklch(30% .025 260);
  --border-soft: oklch(26% .022 260);
  --fg: oklch(96% .01 240);
  --fg-dim: oklch(88% .012 245);
  --muted: oklch(70% .02 250);
  --primary: oklch(87% .15 200);
  --primary-ink: oklch(15% .015 260);
  --accent: oklch(55% .24 290);
  --gradient-brand: linear-gradient(110deg, oklch(87% .15 200), oklch(45% .28 290) 60%, oklch(63% .26 5));
  --radius: 14px;
  --maxw: 1180px;
  --font-head: 'Commissioner', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 78% -12%, oklch(52% .16 200 / .16), transparent 68%),
    radial-gradient(700px 420px at 0% 0%, oklch(45% .18 290 / .10), transparent 65%),
    var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--primary); color:var(--primary-ink); }
:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:30;
  background:oklch(15% .015 260 / .82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-soft);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:14px; padding-bottom:14px; }
.logo{ display:flex; align-items:center; }
.logo-img{ height:38px; width:auto; }
.logo .dot{ color:var(--primary); }
.site-nav{ display:flex; align-items:center; gap:6px; }
.site-nav a{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:9px 12px; border-radius:999px; transition:color .18s, background .18s;
}
.site-nav a:hover{ color:var(--fg); background:oklch(26% .02 260 / .8); }
.site-nav a.active{ color:var(--primary); }
.site-nav a.nav-cta{
  color:var(--primary-ink); background:var(--primary); font-weight:700; padding:9px 16px;
}
.site-nav a.nav-cta:hover{ background:oklch(91% .13 200); color:var(--primary-ink); }

/* κουμπί μενού (εμφανίζεται μόνο στο κινητό) */
.nav-toggle{
  display:none; align-items:center; justify-content:center; flex:none;
  width:44px; height:40px; padding:0; cursor:pointer; color:var(--fg);
  border:1px solid var(--border); border-radius:11px; background:oklch(19% .02 260 / .9);
  transition:border-color .18s, color .18s;
}
.nav-toggle:hover{ border-color:oklch(50% .08 250); }
.nav-toggle .bars{ display:grid; gap:4px; width:20px; }
.nav-toggle .bars span{ display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .22s ease, opacity .16s ease; }
.nav-toggle[aria-expanded="true"]{ color:var(--primary); border-color:oklch(60% .12 200 / .7); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- masthead (όπως στο πρωτότυπο) ---------- */
.masthead{ padding:56px 0 30px; }
.eyebrow-top{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--primary); margin:0;
}
.masthead-title{
  font-family:var(--font-head); font-weight:900; letter-spacing:-.025em; line-height:1;
  font-size:clamp(2.1rem, 6vw, 3.75rem); margin:16px 0 0; max-width:34ch; text-wrap:balance;
}
.grad{ background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- κύριο θέμα: full-bleed εικόνα με overlay ---------- */
.hero-band{
  position:relative; width:100%; margin:0 0 56px;
  min-height:clamp(380px, 44vw, 500px);
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  background:var(--card-2);
}
.hero-band[hidden]{ display:none; }
.hero-slides{ position:relative; height:clamp(380px, 44vw, 500px); }
.hero-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .45s ease; }
.hero-slide.is-on{ opacity:1; pointer-events:auto; }
.hero-link{ position:relative; display:block; height:100%; width:100%; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img, .hero-media .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-media img{ transition:transform .8s ease; }
.hero-link:hover .hero-media img{ transform:scale(1.04); }
.hero-shade{ position:absolute; inset:0; background:linear-gradient(to top, oklch(15% .015 260), oklch(15% .015 260 / .62) 45%, transparent 88%); }
.hero-copy{
  position:absolute; inset:auto 0 0 0; max-width:var(--maxw); margin:0 auto;
  padding:0 22px 34px; display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.hero-pill{
  font-family:var(--font-mono); font-size:12px; font-weight:700; text-transform:uppercase;
  color:var(--primary-ink); background:var(--gradient-brand); border-radius:999px; padding:4px 12px;
}
.hero-copy h2{
  font-family:var(--font-head); font-weight:800; font-size:clamp(1.5rem, 3.2vw, 2.25rem);
  line-height:1.1; letter-spacing:-.02em; margin:0; max-width:24ch;
}
.hero-lede{
  margin:0; color:var(--muted); font-size:1rem; max-width:52ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hero-nav{ position:absolute; right:22px; bottom:34px; display:flex; align-items:center; gap:14px; }
.hero-dots{ display:flex; gap:7px; }
.hero-dot{
  width:8px; height:8px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:oklch(100% 0 0 / .34); transition:width .2s, background .2s;
}
.hero-dot.is-on{ width:22px; background:var(--primary); }
.hero-arrow{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border); cursor:pointer;
  background:oklch(15% .015 260 / .72); color:var(--fg); font-size:17px; line-height:1;
  display:grid; place-items:center; backdrop-filter:blur(6px); transition:.18s;
}
.hero-arrow:hover{ border-color:var(--primary); color:var(--primary); }

.meta{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }

/* ---------- cover / placeholder ---------- */
.cover{ position:relative; overflow:hidden; background:var(--card-2); }
.cover img, .cover .ph{ width:100%; height:100%; object-fit:cover; }
.cover img{ position:absolute; inset:0; }
.ph{
  position:absolute; inset:0; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(120% 120% at 14% 8%, oklch(62% .17 var(--h1) / .55), transparent 62%),
    radial-gradient(110% 110% at 88% 92%, oklch(50% .2 var(--h2) / .5), transparent 64%),
    linear-gradient(155deg, oklch(24% .03 260), oklch(16.5% .02 265));
}
.ph::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, oklch(100% 0 0 / .05) 0 1px, transparent 1px 9px);
  opacity:.6;
}
.ph span{
  position:relative; font-family:var(--font-mono); font-size:clamp(.7rem, 2vw, .95rem);
  letter-spacing:.36em; text-transform:uppercase; color:oklch(100% 0 0 / .62);
  padding-left:.36em;
}

/* ---------- section head + filters ---------- */
.list-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.sec-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:0 0 4px;
}
.sec-title{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-.02em; margin:0; }
.filters{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px; border:1px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer; transition:.18s;
}
.chip:hover{ color:var(--fg); border-color:oklch(42% .05 250); }
.chip.is-on{ background:var(--primary); border-color:transparent; color:var(--primary-ink); font-weight:700; }
.search{
  display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:999px;
  padding:0 14px; background:oklch(19% .02 260);
}
.search input{
  border:0; background:transparent; color:var(--fg); padding:10px 0; width:190px;
  font-family:var(--font-body); font-size:14px; outline:none;
}
.search input::placeholder{ color:oklch(58% .02 250); }
.search svg{ width:15px; height:15px; opacity:.55; flex:none; }

/* ---------- cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:22px; padding-bottom:10px; }
.card{
  border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden;
  background:var(--card); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* όπως στο πρωτότυπο: το περίγραμμα γίνεται primary όταν περνάς το ποντίκι */
.card:hover, .card:focus-within{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), 0 18px 40px -26px oklch(0% 0 0 / .8); }
.card .cover{ aspect-ratio:16/10; }
.card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:9px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; align-self:flex-start; }
.tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary); padding:4px 8px; border-radius:5px;
  background:oklch(50% .12 200 / .14); border:1px solid oklch(55% .1 200 / .3);
}
.card h3{ font-family:var(--font-head); font-weight:700; font-size:1.06rem; line-height:1.3; letter-spacing:-.015em; margin:0; }
.card p{ margin:0; color:var(--muted); font-size:.89rem; line-height:1.55; }
.card .meta{ margin-top:2px; }
.card-link{ display:block; height:100%; }
.empty{ color:var(--muted); font-family:var(--font-mono); font-size:13px; padding:40px 0 60px; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  padding:11px 20px; border-radius:999px; background:var(--primary); color:var(--primary-ink);
  transition:transform .16s, background .16s, box-shadow .16s;
}
.btn:hover{ transform:translateY(-1px); background:oklch(91% .13 200); box-shadow:0 10px 24px -12px oklch(80% .15 200 / .8); }
.btn.ghost{ background:transparent; color:var(--fg); border:1px solid var(--border); font-weight:600; }
.btn.ghost:hover{ background:oklch(26% .02 260); }
.btn.danger{ background:transparent; color:oklch(70% .17 25); border:1px solid oklch(40% .12 25 /.7); font-weight:600; }
.btn.danger:hover{ background:oklch(35% .12 25 / .25); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- article page ---------- */
.article{ max-width:760px; margin:0 auto; padding:34px 0 30px; }
.back{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); display:inline-block; margin-bottom:22px;
}
.back:hover{ color:var(--primary); }
.article h1{
  font-family:var(--font-head); font-weight:800; letter-spacing:-.028em; line-height:1.06;
  font-size:clamp(1.9rem, 4.2vw, 2.9rem); margin:14px 0 16px; text-wrap:balance;
}
.article .article-cover{ aspect-ratio:16/9; border-radius:calc(var(--radius) + 4px); border:1px solid var(--border-soft); margin:26px 0 30px; }
.prose{ color:var(--fg-dim); font-size:1.05rem; line-height:1.78; }
.prose p{ margin:0 0 1.25em; }
.prose h2{
  font-family:var(--font-head); font-weight:800; font-size:1.32rem; letter-spacing:-.02em;
  color:var(--fg); margin:2em 0 .7em; padding-top:.2em;
}
.prose h2::before{ content:"// "; color:var(--primary); font-family:var(--font-mono); font-size:.85em; letter-spacing:0; }
.prose ul{ margin:0 0 1.3em; padding-left:1.15em; }
.prose li{ margin-bottom:.45em; }
.prose li::marker{ color:var(--primary); }
.prose blockquote{
  margin:1.6em 0; padding:4px 0 4px 20px; border-left:2px solid var(--primary);
  color:var(--fg); font-size:1.06rem; font-style:italic;
}
.prose code{
  font-family:var(--font-mono); font-size:.86em; background:var(--card-2);
  border:1px solid var(--border-soft); padding:2px 6px; border-radius:5px;
}
.prose a{ color:var(--primary); border-bottom:1px solid oklch(70% .1 200 / .45); }
.prose figure{ margin:1.8em 0; }
.prose figure img{ border-radius:var(--radius); border:1px solid var(--border-soft); width:100%; }

/* οι εικόνες μέσα στο άρθρο ανοίγουν στο πλάτος της σελίδας, όχι της στήλης κειμένου */
.prose figure, .article .gallery, .article .article-cover{
  width:min(1080px, calc(100vw - 44px));
  max-width:none;
  margin-left:50%;
  transform:translateX(-50%);
}
.article .article-cover{ aspect-ratio:16/9; }
.article .gallery{ margin-top:34px; margin-bottom:34px; }

/* ---------- αντιδράσεις & σχόλια κάτω από το άρθρο ---------- */
.post-extra{ margin:40px 0 10px; display:flex; flex-direction:column; gap:18px; }
.extra-panel{
  border:1px solid var(--border-soft); background:var(--card); border-radius:var(--radius);
  padding:22px 24px 22px;
}
.extra-title{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--primary); margin:0 0 16px; font-weight:700;
}
.react-row{ display:flex; flex-wrap:wrap; gap:10px; }
.react-btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font-body); font-size:.9rem; color:var(--fg-dim);
  border:1px solid var(--border); border-radius:999px; background:oklch(17% .018 260);
  padding:10px 16px; transition:border-color .18s, color .18s, background .18s;
}
.react-btn:hover{ border-color:oklch(55% .1 200 / .7); color:var(--fg); }
.react-btn .emoji{ font-size:1rem; line-height:1; }
.react-btn .n{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
  border-left:1px solid var(--border); padding-left:9px; margin-left:2px;
}
.react-btn.is-on{ border-color:var(--primary); color:var(--primary); background:oklch(50% .12 200 / .12); }
.react-btn.is-on .n{ color:var(--primary); border-color:oklch(60% .12 200 / .5); }
.extra-note{ font-size:11.5px; color:oklch(60% .02 250); margin:14px 0 0; }

/* ---------- σύνδεση διαχείρισης ---------- */
.gate{ min-height:100vh; display:grid; place-items:center; padding:40px 20px; }
.gate[hidden]{ display:none; }
.gate-card{
  width:100%; max-width:390px; border:1px solid var(--border-soft);
  background:var(--card); border-radius:var(--radius); padding:26px 24px;
}
.gate-card h1{ font-family:var(--font-head); font-weight:800; font-size:1.55rem; letter-spacing:-.02em; margin:8px 0 18px; }
.gate-card .btn{ width:100%; justify-content:center; margin-top:6px; }
.gate-msg{ min-height:18px; margin:10px 0 0; font-size:13px; line-height:1.5; color:oklch(78% .14 25); }
body.is-authed .gate{ display:none; }
.site-nav .logout{ margin-left:6px; }

/* ---------- εργαλεία λίστας άρθρων (κατηγορίες, σελίδες) ---------- */
.list-tools{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  margin:0 0 14px;
}
.pager{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end; margin-top:14px; }
.pager button{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; padding:6px 10px;
  border-radius:7px; border:1px solid var(--border); background:transparent; color:var(--muted);
  cursor:pointer; transition:.16s;
}
.pager button:hover:not([disabled]){ color:var(--fg); border-color:oklch(50% .08 250); }
.pager button.is-on{ background:var(--primary); border-color:transparent; color:var(--primary-ink); font-weight:700; }
.pager button[disabled]{ opacity:.35; cursor:not-allowed; }
.pager .info{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-right:auto; }
.thumb-item .tb button.ins{ color:var(--primary); }
.thumb-item .tb button.ins:hover{ color:oklch(91% .13 200); }

/* ---------- read also ---------- */
.also{ padding:44px 0 60px; border-top:1px solid var(--border-soft); margin-top:44px; }
.also .grid{ grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); }

/* ---------- editor ---------- */
.editor-head{ padding:40px 0 8px; }
.editor-head h1{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.4rem); letter-spacing:-.025em; margin:10px 0 8px; }
.editor-head p{ color:var(--muted); max-width:62ch; margin:0 0 4px; }
.editor-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:26px; align-items:start; padding:26px 0 60px; }
.panel{ border:1px solid var(--border-soft); background:var(--card); border-radius:var(--radius); padding:20px; }
.panel + .panel{ margin-top:18px; }
.panel h2{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; }
.field{ margin-bottom:15px; }
.field label{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.field input[type=text], .field input[type=date], .field input[type=number], .field input[type=password], .field input[type=search], .field textarea, .field select{
  width:100%; background:oklch(17% .018 260); border:1px solid var(--border); border-radius:9px;
  color:var(--fg); font-family:var(--font-body); font-size:14.5px; padding:10px 12px; outline:none;
  transition:border-color .16s;
}
.field textarea{ line-height:1.65; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:oklch(65% .12 200 / .75); }
.field .hint{ font-size:12px; color:oklch(60% .02 250); margin-top:5px; display:block; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.drop{
  border:1px dashed var(--border); border-radius:10px; padding:16px; text-align:center;
  color:var(--muted); font-size:13px; cursor:pointer; transition:.16s;
}
.drop:hover{ border-color:oklch(60% .12 200 / .6); color:var(--fg); }
.thumb{ margin-top:10px; display:flex; align-items:center; gap:12px; }
.thumb img{ width:96px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.status{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; padding:10px 12px;
  border-radius:8px; margin-top:14px; display:none;
}
.status.show{ display:block; }
.status.ok{ background:oklch(45% .12 160 / .18); color:oklch(85% .13 165); border:1px solid oklch(50% .12 165 / .35); }
.status.err{ background:oklch(40% .15 25 / .18); color:oklch(82% .13 30); border:1px solid oklch(50% .15 25 / .4); }
.note{
  font-size:13px; color:var(--muted); background:oklch(24% .03 280 / .4);
  border:1px solid var(--border-soft); border-left:2px solid var(--accent); border-radius:8px; padding:12px 14px;
}
.preview{ position:sticky; top:88px; }
.preview .card{ max-width:none; }
.saved{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.saved li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border-soft); border-radius:9px; background:oklch(17.5% .018 260); }
.saved .t{ font-size:13.5px; line-height:1.35; }
.saved .c{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.saved .mini{ display:flex; gap:6px; flex:none; }
.icon-btn{
  border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:7px;
  font-family:var(--font-mono); font-size:11px; padding:5px 9px; cursor:pointer; transition:.16s;
}
.icon-btn:hover{ color:var(--fg); background:oklch(27% .02 260); }
.icon-btn.del:hover{ color:oklch(80% .15 25); border-color:oklch(50% .14 25 / .6); }

/* κατηγορίες με κουτάκια */
.checks{ display:flex; flex-wrap:wrap; gap:8px; }
.checks label{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; transition:.16s;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:7px 12px;
  background:oklch(17% .018 260);
}
.checks label:hover{ color:var(--fg); border-color:oklch(50% .08 250); }
.checks input{ accent-color:var(--primary); width:14px; height:14px; margin:0; }
.checks label:has(input:checked){ color:var(--primary); border-color:oklch(60% .12 200 / .7); background:oklch(50% .12 200 / .13); font-weight:700; }
.addcat{ display:flex; gap:8px; margin-top:10px; }
.addcat input{
  flex:1; background:oklch(17% .018 260); border:1px solid var(--border); border-radius:9px;
  color:var(--fg); font-family:var(--font-body); font-size:13.5px; padding:8px 10px; outline:none;
}
.addcat input:focus{ border-color:oklch(65% .12 200 / .75); }
.tick{ display:inline-flex; align-items:center; gap:9px; font-size:14px; letter-spacing:0; text-transform:none; color:var(--fg); cursor:pointer; margin-bottom:0; }
.tick input{ accent-color:var(--primary); width:16px; height:16px; margin:0; }

/* πολλές εικόνες */
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; margin-top:12px; }
.thumb-item{ border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--card-2); }
.thumb-item img{ width:100%; height:84px; object-fit:cover; display:block; }
.thumb-item .tb{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:3px; padding:5px 7px; }
.thumb-item .tb .badge{ font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.thumb-item .tb button{ border:0; background:transparent; color:var(--muted); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.02em; cursor:pointer; padding:2px 3px; white-space:nowrap; }
.thumb-item .tb button:hover{ color:var(--fg); }
.thumb-item .tb button.del:hover{ color:oklch(80% .15 25); }

/* λίστα άρθρων με τικ «κύριο θέμα» */
.saved .grow{ flex:1; min-width:0; }
.saved .feat-tick{ display:flex; align-items:center; flex:none; cursor:pointer; }
.saved .feat-tick input{ accent-color:var(--primary); width:16px; height:16px; margin:0; cursor:pointer; }
.saved li.is-feat{ border-color:oklch(60% .12 200 / .45); background:oklch(24% .03 220 / .55); }

/* γκαλερί εικόνων στο άρθρο */
.gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:30px 0 10px; }
.gallery figure{ margin:0; }
.gallery img{ width:100%; border-radius:var(--radius); border:1px solid var(--border-soft); }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--border-soft); margin-top:20px; padding:26px 0 40px; }
.site-foot .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.site-foot p{ margin:0; font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; color:oklch(58% .02 250); text-transform:uppercase; }
.site-foot a{ color:var(--muted); }
.site-foot a:hover{ color:var(--primary); }

/* ---------- AI σύμβουλος ---------- */
.masthead-sub{ color:var(--muted); max-width:56ch; margin:14px 0 0; font-size:1.02rem; }
.advisor-grid{ display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:26px; align-items:start; padding:26px 0 60px; }
.advisor-form{ position:sticky; top:88px; }
.advisor-form .btn{ width:100%; justify-content:center; margin-top:4px; }
.advisor-form .hint{ display:block; margin-top:10px; }
.adv-out{ min-height:320px; }
.adv-empty{ border:1px dashed var(--border); border-radius:var(--radius); padding:40px 24px; text-align:center; color:var(--muted); font-size:.95rem; line-height:1.6; }
.adv-head{ margin-bottom:16px; }
.adv-head h2{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.02em; margin:2px 0 6px; }
.adv-head p{ color:var(--muted); margin:0; font-size:.93rem; }
.adv-parts{ display:flex; flex-direction:column; gap:8px; }
.adv-part{ display:grid; grid-template-columns:74px minmax(0,1fr) auto; gap:14px; align-items:start; padding:12px 14px; border:1px solid var(--border-soft); border-radius:10px; background:var(--card); }
.adv-cat{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); padding-top:4px; }
.adv-name{ display:block; font-weight:700; font-size:.97rem; letter-spacing:-.01em; }
.adv-note{ display:block; color:var(--muted); font-size:.83rem; line-height:1.5; margin-top:2px; }
.adv-price{ font-family:var(--font-mono); font-size:.82rem; color:var(--fg-dim); white-space:nowrap; padding-top:4px; }
.adv-total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:16px 0 0; padding:14px 16px; border-radius:10px; background:var(--gradient-brand); color:var(--primary-ink); font-family:var(--font-head); font-weight:800; }
.adv-total small{ font-family:var(--font-mono); font-weight:400; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.78; }
.adv-tips{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.adv-tips li{ position:relative; padding-left:18px; font-size:.88rem; line-height:1.55; color:var(--muted); }
.adv-tips li::before{ content:"\2192"; position:absolute; left:0; color:var(--primary); font-family:var(--font-mono); }
.adv-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.adv-links a{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--primary); border:1px solid oklch(55% .1 200 / .35); background:oklch(50% .12 200 / .10); padding:6px 11px; border-radius:999px; }
.adv-links a:hover{ background:oklch(50% .12 200 / .22); }
.adv-foot{ margin:16px 0 0; font-size:.85rem; color:oklch(60% .02 250); }
.adv-foot a{ color:var(--primary); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .editor-grid{ grid-template-columns:1fr; }
  .advisor-grid{ grid-template-columns:1fr; }
  .advisor-form{ position:static; }
  .adv-part{ grid-template-columns:64px minmax(0,1fr) auto; gap:10px; }
  .preview{ position:static; }
  .masthead{ padding:40px 0 24px; }
  .hero-copy{ padding:0 18px 56px; }
  .hero-nav{ right:14px; bottom:16px; }
}
@media (max-width: 620px){
  .hero-arrow{ display:none; }
  .hero-copy h2{ max-width:none; }
  .hero-lede{ -webkit-line-clamp:2; }
}
/* ---------- μενού κινητού: αναδιπλούμενο προς τα κάτω ---------- */
@media (max-width: 760px){
  .site-head .wrap{ position:relative; flex-wrap:nowrap; gap:12px; }
  .nav-toggle{ display:inline-flex; }
  .logo-img{ height:32px; }
  .site-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0; z-index:5;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 16px 16px; margin:0;
    background:oklch(15.5% .018 260 / .99);
    border-bottom:1px solid var(--border); border-top:1px solid var(--border-soft);
    box-shadow:0 28px 44px -30px oklch(0% 0 0 / .95);
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  .site-nav.is-open{ display:flex; }
  .site-nav a{
    padding:14px 8px; border-radius:8px; font-size:12.5px;
    border-bottom:1px solid oklch(24% .02 260);
  }
  .site-nav a:last-child{ border-bottom:0; }
  .site-nav a:hover{ background:transparent; color:var(--primary); }
  .site-nav a.nav-cta{ margin-top:10px; padding:13px 16px; text-align:center; border-bottom:0; }
  .site-nav a.nav-cta:hover{ background:oklch(91% .13 200); color:var(--primary-ink); }
}

@media (max-width: 620px){
  .grid{ grid-template-columns:1fr; }
  .search input{ width:130px; }
  .row2{ grid-template-columns:1fr; }
  .cmp{ padding:18px 16px 16px; }
}

/* ---------- συγκρίσεις ---------- */
.cmp-wrap{ padding:12px 0 60px; }
.cmp{
  border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--card);
  padding:22px 24px 20px; margin:0 0 20px;
}
.cmp h2{
  font-family:var(--font-head); font-weight:800; font-size:clamp(1.15rem,2.4vw,1.45rem);
  letter-spacing:-.02em; margin:0 0 16px;
}
.cmp h2::before{ content:"// "; color:var(--primary); font-family:var(--font-mono); font-size:.8em; }
.cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px; }
.cmp table{ width:100%; min-width:520px; border-collapse:collapse; font-size:.92rem; }
.cmp th,.cmp td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--border-soft); vertical-align:top; }
.cmp thead th{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary); background:oklch(22% .02 260);
}
.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp td:first-child{ color:var(--muted); width:30%; }
.cmp .verdict{
  margin:16px 0 0; padding:12px 14px; border-radius:10px; font-size:.92rem; line-height:1.6;
  background:oklch(50% .12 200 / .1); border:1px solid oklch(55% .1 200 / .25); color:var(--fg-dim);
}
.cmp .verdict strong{ color:var(--primary); }

/* λεπτή μπάρα κύλισης στους πίνακες (κυρίως στο κινητό) */
.cmp-scroll::-webkit-scrollbar{ height:8px; }
.cmp-scroll::-webkit-scrollbar-track{ background:oklch(22% .02 260); border-radius:99px; }
.cmp-scroll::-webkit-scrollbar-thumb{ background:oklch(38% .04 250); border-radius:99px; }
.cmp-scroll{ scrollbar-width:thin; scrollbar-color:oklch(38% .04 250) oklch(22% .02 260); }
.cmp-scroll::after{ content:""; }

@media (max-width: 620px){
  .cmp table{ min-width:460px; font-size:.88rem; }
  .cmp th,.cmp td{ padding:9px 10px; }
  .cmp thead th{ font-size:10px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}