/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-shell[b-8tgd7euarp] {
    display: flex;
    min-height: 100vh;
}

.admin-main[b-8tgd7euarp] {
    flex: 1;
    min-width: 0;
    background: var(--canvas);
}

.admin-content[b-8tgd7euarp] {
    max-width: 1400px;
}

@media (max-width: 900px) {
    .admin-shell[b-8tgd7euarp] {
        flex-direction: column;
    }
}

/* ── Πλαίσιο σφάλματος Blazor ──────────────────────────────────────────
   ΚΡΥΦΟ εξ ορισμού· το Blazor το εμφανίζει μόνο όταν σπάσει το circuit.
   Χωρίς αυτόν τον κανόνα φαίνεται μονίμως σε κάθε σελίδα. */

#blazor-error-ui[b-8tgd7euarp] {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    padding: .7rem 1.25rem;
    background: var(--warn-050);
    color: var(--ink-900);
    border-top: 1px solid var(--warn-500);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
}

#blazor-error-ui .reload[b-8tgd7euarp] {
    color: var(--brand-600);
    margin-left: .4rem;
}

#blazor-error-ui .dismiss[b-8tgd7euarp] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: .6rem;
}
/* /Components/Layout/AdminNavMenu.razor.rz.scp.css */
/* Το <NavLink> είναι component: το <a> που παράγει ΔΕΝ παίρνει το attribute του
   scoped CSS. Χωρίς ::deep οι παρακάτω κανόνες αστοχούν σιωπηλά και οι σύνδεσμοι
   πέφτουν πίσω στο καθολικό a { color: var(--brand-600) } — σκούρο πάνω σε σκούρο. */

.admin-sidebar[b-9vxs19hz8v] {
    width: 260px;
    flex-shrink: 0;
    background: var(--brand-700);
    color: rgba(255, 255, 255, .82);
    padding-bottom: 2rem;
}

.admin-brand[b-9vxs19hz8v] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.admin-brand > a:first-child[b-9vxs19hz8v] {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
}

.admin-brand-back[b-9vxs19hz8v] {
    color: rgba(255, 255, 255, .52);
    font-size: .8rem;
    text-decoration: none;
}

.admin-brand-back:hover[b-9vxs19hz8v] {
    color: rgba(255, 255, 255, .86);
}

[b-9vxs19hz8v] .nav-link {
    color: rgba(255, 255, 255, .78);
    padding: .55rem 1.25rem;
    border-left: 3px solid transparent;
    font-size: .94rem;
}

[b-9vxs19hz8v] .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

[b-9vxs19hz8v] .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .09);
    border-left-color: var(--accent-500);
}

[b-9vxs19hz8v] .nav-link .bi {
    width: 1.3rem;
    display: inline-block;
}

@media (max-width: 900px) {
    .admin-sidebar[b-9vxs19hz8v] {
        width: 100%;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site[b-0flcl4n2mw] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--canvas);
}

.site-main[b-0flcl4n2mw] {
    flex: 1;
    padding: 2rem 0 3rem;
}

[b-0flcl4n2mw] .site-container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.site-footer[b-0flcl4n2mw] {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 1.25rem 0;
    font-size: .85rem;
    color: var(--ink-500);
}

[b-0flcl4n2mw] .site-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

[b-0flcl4n2mw] .site-footer-links {
    display: flex;
    gap: 1.25rem;
}

[b-0flcl4n2mw] .site-footer-links a {
    color: var(--ink-500);
    text-decoration: none;
}

[b-0flcl4n2mw] .site-footer-links a:hover {
    color: var(--brand-600);
}

@media (max-width: 640px) {
    .site-main[b-0flcl4n2mw] { padding: 1.25rem 0 2rem; }
    [b-0flcl4n2mw] .site-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ── Πλαίσιο σφάλματος Blazor ──────────────────────────────────────────
   ΚΡΥΦΟ εξ ορισμού· το Blazor το εμφανίζει μόνο όταν σπάσει το circuit.
   Χωρίς αυτόν τον κανόνα φαίνεται μονίμως σε κάθε σελίδα. */

#blazor-error-ui[b-0flcl4n2mw] {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    padding: .7rem 1.25rem;
    background: var(--warn-050);
    color: var(--ink-900);
    border-top: 1px solid var(--warn-500);
    box-shadow: 0 -2px 8px rgba(16, 24, 42, .12);
}

#blazor-error-ui .reload[b-0flcl4n2mw] {
    color: var(--brand-600);
    margin-left: .4rem;
}

#blazor-error-ui .dismiss[b-0flcl4n2mw] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: .6rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Οριζόντια μπάρα με τη σκούρα παλέτα του πίνακα ελέγχου, ώστε δημόσιο και admin
   να διαβάζονται ως ένα σύστημα. */

.site-header[b-6jnccjs6hq] {
    background: var(--brand-700);
    color: rgba(255, 255, 255, .82);
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

[b-6jnccjs6hq] .site-header-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 62px;
}

.site-brand[b-6jnccjs6hq] {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.site-brand-mark[b-6jnccjs6hq] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    /* Πορτοκαλί πάνω στο navy — η ίδια αντίθεση που χρησιμοποιεί το synergyaccounting.gr. */
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
}

.site-brand-text[b-6jnccjs6hq] { font-size: 1.02rem; font-weight: 400; }
.site-brand-text strong[b-6jnccjs6hq] { font-weight: 650; }

.site-nav[b-6jnccjs6hq] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

[b-6jnccjs6hq] .site-nav-link {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    padding: .45rem .8rem;
    border-radius: var(--radius-sm);
    font-size: .94rem;
    transition: color .15s, background-color .15s;
}

[b-6jnccjs6hq] .site-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
[b-6jnccjs6hq] .site-nav-link.active { color: #fff; background: rgba(255, 255, 255, .11); }

.site-nav-account[b-6jnccjs6hq] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: .75rem;
    padding-left: .9rem;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.site-nav-user[b-6jnccjs6hq] {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: rgba(255, 255, 255, .78);
    max-width: 220px;
}

.site-nav-user:hover[b-6jnccjs6hq] { color: #fff; }

.site-nav-avatar[b-6jnccjs6hq] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    flex-shrink: 0;
}

.site-nav-email[b-6jnccjs6hq] {
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-account[b-6jnccjs6hq]  .btn-outline-secondary {
    color: rgba(255, 255, 255, .78);
    border-color: rgba(255, 255, 255, .22);
}

.site-nav-account[b-6jnccjs6hq]  .btn-outline-secondary:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
}

/* ── Κινητό: μενού με checkbox, χωρίς JavaScript ──────────────────────── */

.nav-toggle[b-6jnccjs6hq],
.nav-toggle-label[b-6jnccjs6hq] { display: none; }

@media (max-width: 860px) {
    [b-6jnccjs6hq] .site-header-inner { flex-wrap: wrap; }

    .nav-toggle-label[b-6jnccjs6hq] {
        display: block;
        margin-left: auto;
        width: 40px;
        height: 40px;
        cursor: pointer;
        position: relative;
    }

    .nav-toggle-label span[b-6jnccjs6hq],
    .nav-toggle-label span[b-6jnccjs6hq]::before,
    .nav-toggle-label span[b-6jnccjs6hq]::after {
        position: absolute;
        display: block;
        width: 20px;
        height: 2px;
        background: rgba(255, 255, 255, .82);
        border-radius: 2px;
        content: "";
    }

    .nav-toggle-label span[b-6jnccjs6hq] { top: 19px; left: 10px; }
    .nav-toggle-label span[b-6jnccjs6hq]::before { top: -6px; }
    .nav-toggle-label span[b-6jnccjs6hq]::after { top: 6px; }

    .site-nav[b-6jnccjs6hq] {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: .2rem;
        padding: .5rem 0 .9rem;
        margin-left: 0;
    }

    .nav-toggle:checked ~ .site-nav[b-6jnccjs6hq] { display: flex; }

    .site-nav-account[b-6jnccjs6hq] {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding-top: .7rem;
        margin-top: .4rem;
        flex-wrap: wrap;
    }

    .site-nav-user[b-6jnccjs6hq] { max-width: none; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-g3qj4ducwz],
.components-reconnect-repeated-attempt-visible[b-g3qj4ducwz],
.components-reconnect-failed-visible[b-g3qj4ducwz],
.components-pause-visible[b-g3qj4ducwz],
.components-resume-failed-visible[b-g3qj4ducwz],
.components-rejoining-animation[b-g3qj4ducwz] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-g3qj4ducwz],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-g3qj4ducwz],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-g3qj4ducwz],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-g3qj4ducwz],
#components-reconnect-modal.components-reconnect-retrying[b-g3qj4ducwz],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-g3qj4ducwz],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-g3qj4ducwz],
#components-reconnect-modal.components-reconnect-failed[b-g3qj4ducwz],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-g3qj4ducwz] {
    display: block;
}


#components-reconnect-modal[b-g3qj4ducwz] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-g3qj4ducwz 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-g3qj4ducwz 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-g3qj4ducwz 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-g3qj4ducwz]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-g3qj4ducwz 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-g3qj4ducwz {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-g3qj4ducwz {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-g3qj4ducwz {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-g3qj4ducwz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-g3qj4ducwz] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-g3qj4ducwz] {
    border: 0;
    background-color: var(--brand-500);
    color: white;
    padding: 4px 24px;
    border-radius: var(--radius-sm);
}

    #components-reconnect-modal button:hover[b-g3qj4ducwz] {
        background-color: var(--brand-700);
    }

    #components-reconnect-modal button:active[b-g3qj4ducwz] {
        background-color: var(--brand-500);
    }

.components-rejoining-animation[b-g3qj4ducwz] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-g3qj4ducwz] {
        position: absolute;
        border: 3px solid var(--brand-400);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-g3qj4ducwz 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-g3qj4ducwz] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-g3qj4ducwz {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Αρχική σελίδα.

   Η ιδέα: το θέμα της πλατφόρμας δεν είναι «μάθηση» αλλά ότι η ελληνική
   λογιστική νομοθεσία δεν στέκεται ποτέ. Το φόντο του hero είναι το αλφάβητο
   του επαγγέλματος — ΦΠΑ, Ε3, ΑΠΔ, Ν.4308 — και ένα αργό κύμα φωτός περνά από
   μέσα του, σαν σήμα που διατρέχει ένα καθολικό.

   Όλη η τόλμη ξοδεύεται ΕΚΕΙ. Τα υπόλοιπα (κατηγορίες, κάρτες, λόγοι) μένουν
   ήσυχα και πειθαρχημένα, αλλιώς η σελίδα γίνεται θόρυβος.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Σκηνή ────────────────────────────────────────────────────────────────
   Σπάει έξω από το .site-container ώστε το navy να πιάνει όλο το πλάτος. Το
   αρνητικό margin-top ακυρώνει το padding του .site-main, ώστε να κολλάει
   στη μπάρα πλοήγησης χωρίς κενή λωρίδα καμβά. */
.hero-stage[b-2qdmghaz97] {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin: -2rem calc(50% - 50vw) 3.5rem;
    padding: 5.5rem 0 4rem;
    background: var(--brand-700);
    isolation: isolate;
}

/* ── Το φόντο: κωδικοί εντύπων ─────────────────────────────────────────── */

.code-field[b-2qdmghaz97] {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    align-content: start;
    gap: 1.5rem 1rem;
    padding: 1.75rem 1.5rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    color: #fff;
    user-select: none;
    pointer-events: none;
    /* Το πλήθος των κελιών είναι σταθερό, οι στήλες όχι — άρα το πού τελειώνει το
       πλέγμα εξαρτάται από το πλάτος της οθόνης. Η μάσκα κάνει το τέλος ΣΒΗΣΙΜΟ
       αντί για απότομη κοπή, ώστε να δείχνει σκόπιμο σε κάθε ανάλυση. */
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%);
}

.code-field span[b-2qdmghaz97] {
    opacity: .05;
    white-space: nowrap;
    animation: code-pulse-b-2qdmghaz97 14s linear infinite;
    /* Αρνητική καθυστέρηση: κάθε κελί ξεκινά ήδη σε άλλη φάση, οπότε το κύμα
       υπάρχει από το πρώτο καρέ αντί να «χτίζεται» στον πρώτο κύκλο. */
    animation-delay: calc(var(--i) * -.14s);
}

/* Αραιά, ένα κελί ανάβει πορτοκαλί — το ίδιο χρώμα που σημαίνει «ενέργεια»
   σε όλη την πλατφόρμα. */
.code-field span:nth-child(9n + 4)[b-2qdmghaz97] { color: var(--accent-500); }

@keyframes code-pulse-b-2qdmghaz97 {
    0%   { opacity: .05; }
    5%   { opacity: .22; }
    13%  { opacity: .05; }
    100% { opacity: .05; }
}

/* Πέπλο πάνω από τους κωδικούς: κρατά το κείμενο ευανάγνωστο χωρίς να σβήνει
   το φόντο στις άκρες. */
.hero-stage[b-2qdmghaz97]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 18% 50%,
                var(--brand-700) 0%, rgba(26, 54, 93, .92) 38%, rgba(26, 54, 93, .35) 100%);
    pointer-events: none;
}

/* ── Περιεχόμενο του hero ──────────────────────────────────────────────── */

.hero-inner[b-2qdmghaz97] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.hero-title[b-2qdmghaz97] {
    max-width: 16ch;
    margin: 0 0 1.25rem;
    font-size: clamp(2.4rem, 6.2vw, 4.4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #fff;
}

/* Το <em> εδώ δεν είναι πλάγια γραφή — είναι ο τόνος της πρότασης. */
.hero-title em[b-2qdmghaz97] {
    font-style: normal;
    color: var(--accent-500);
}

.hero-lead[b-2qdmghaz97] {
    max-width: 46ch;
    margin: 0 0 2.25rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

.hero-actions[b-2qdmghaz97] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hero-ghost[b-2qdmghaz97] {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    transition: background-color .2s, border-color .2s;
}

.hero-ghost:hover[b-2qdmghaz97],
.hero-ghost:focus[b-2qdmghaz97] {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .6);
}

/* Το καθολικό focus ring είναι το μπλε της μάρκας — πάνω στο navy του hero θα ήταν
   πρακτικά αόρατο. Εδώ γίνεται λευκό. */
.hero-stage .btn:focus-visible[b-2qdmghaz97],
.hero-stage a:focus-visible[b-2qdmghaz97],
.member-bar .btn:focus-visible[b-2qdmghaz97] {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ── Μπάρα μέλους ──────────────────────────────────────────────────────── */

.member-bar[b-2qdmghaz97] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    width: 100vw;
    margin: -2rem calc(50% - 50vw) 2.5rem;
    /* max(): κάτω από 1220px το calc() βγαίνει αρνητικό, που θα ακύρωνε ολόκληρη
       τη δήλωση και θα άφηνε το κείμενο κολλημένο στην άκρη. */
    padding: 2.25rem max(1.25rem, calc(50vw - 610px + 1.25rem));
    background: var(--brand-700);
}

.member-bar h1[b-2qdmghaz97] {
    margin: 0;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

/* ── Ενότητες ──────────────────────────────────────────────────────────── */

.home-section[b-2qdmghaz97] { margin-bottom: 3.5rem; }

/* Η ετικέτα ενότητας είναι δεδομένο, όχι τίτλος — γι' αυτό μονόχωρη και μικρή. */
.section-label[b-2qdmghaz97] {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0 0 1.25rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.section-label[b-2qdmghaz97]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.section-head[b-2qdmghaz97] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

/* Το flex:1 είναι απαραίτητο: χωρίς αυτό η ετικέτα παίρνει το πλάτος του κειμένου
   της και η γραμμή του ::after δεν έχει πού να απλωθεί. */
.section-head .section-label[b-2qdmghaz97] { flex: 1; margin-bottom: 0; }

.section-head > a[b-2qdmghaz97] {
    flex-shrink: 0;
    font-size: .85rem;
    text-decoration: none;
    color: var(--brand-600);
}

.section-head > a:hover[b-2qdmghaz97] { color: var(--accent-600); }

/* «3 / 12» — πόσα από πόσα δείχνει η σελίδα αυτή τη στιγμή. */
.section-count[b-2qdmghaz97] {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--ink-400);
}

/* ── Κατηγορίες ────────────────────────────────────────────────────────── */

.category-grid[b-2qdmghaz97] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.category-tile[b-2qdmghaz97] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.35rem 1.35rem 1.35rem 1.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

/* Η πορτοκαλί ράβδος μεγαλώνει στο hover: μικρή κίνηση, καθαρή πρόθεση. */
.category-tile[b-2qdmghaz97]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-500);
    transform: scaleY(.35);
    transform-origin: top;
    transition: transform .25s ease;
}

.category-tile:hover[b-2qdmghaz97] {
    border-color: var(--ink-300);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.category-tile:hover[b-2qdmghaz97]::before { transform: scaleY(1); }

.category-tile-name[b-2qdmghaz97] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--brand-700);
}

.category-tile-count[b-2qdmghaz97] {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--ink-500);
}

/* ── Κουμπί «όλες οι κατηγορίες» ───────────────────────────────────────── */

.category-more[b-2qdmghaz97] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    padding: 1.35rem;
    background: transparent;
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius);
    text-align: left;
    cursor: pointer;
    color: var(--ink-500);
    font: inherit;
    transition: border-color .2s, color .2s, background-color .2s;
}

.category-more:hover[b-2qdmghaz97] {
    border-color: var(--accent-500);
    background: var(--accent-050);
    color: var(--brand-700);
}

.category-more-sign[b-2qdmghaz97] {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--accent-600);
}

.category-more > span:last-child[b-2qdmghaz97] {
    font-size: .82rem;
    letter-spacing: .01em;
}

/* ── Άδεια βιβλιοθήκη ──────────────────────────────────────────────────────
   Μία γραμμή, όχι κουτί: δεν υπάρχει τίποτα να δείξει, οπότε δεν δικαιολογείται
   να πιάνει τον χώρο μιας ενότητας που έχει. */
.shelf-empty[b-2qdmghaz97] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0;
    padding: .9rem 1.1rem;
    background: var(--surface);
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius);
    color: var(--ink-500);
    font-size: .92rem;
}

.shelf-empty a[b-2qdmghaz97] { text-decoration: none; white-space: nowrap; }

/* ── Τρεις λόγοι ───────────────────────────────────────────────────────── */

.reasons[b-2qdmghaz97] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2.5rem;
}

.reason[b-2qdmghaz97] { border-top: 2px solid var(--brand-700); padding-top: 1rem; }

.reason-label[b-2qdmghaz97] {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-600);
    margin: 0 0 .6rem;
}

.reason h3[b-2qdmghaz97] {
    margin: 0 0 .5rem;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--brand-700);
}

.reason p[b-2qdmghaz97] {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-500);
}

/* ── Κινητό ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Το .site-main αλλάζει σε 1.25rem padding — το margin το ακολουθεί. */
    .hero-stage[b-2qdmghaz97] {
        margin-top: -1.25rem;
        padding: 3.25rem 0 2.5rem;
    }

    .member-bar[b-2qdmghaz97] {
        margin-top: -1.25rem;
        padding: 1.75rem 1.25rem;
        align-items: flex-start;
    }

    .code-field[b-2qdmghaz97] { gap: 1.1rem .75rem; font-size: .7rem; }
    .hero-actions .btn[b-2qdmghaz97] { flex: 1 1 100%; }
}

/* Το κύμα είναι διακόσμηση: όποιος έχει ζητήσει λιγότερη κίνηση παίρνει το
   ίδιο φόντο, ακίνητο. */
@media (prefers-reduced-motion: reduce) {
    .code-field span[b-2qdmghaz97] { animation: none; opacity: .09; }
    .category-tile[b-2qdmghaz97],
    .category-tile[b-2qdmghaz97]::before,
    .category-more[b-2qdmghaz97],
    .hero-ghost[b-2qdmghaz97] { transition: none; }
    .category-tile:hover[b-2qdmghaz97] { transform: none; }
}