@import url("/guest/bss-tokens.css");
@import url('/variables.css');
@import url('/fonts.css');

/* ===== Faqja e hyrjes — rishkruar ne sistemin e dizajnit BSS =====
   Cdo rregull ne ketu fillon me "body.faqja_e_hyrjes" ose "html:has(body.faqja_e_hyrjes".
   Perjashtim: vetem @import-et me lart dhe blloqet @keyframes, sepse emrat e keyframe-ve
   jane globale per DOKUMENT dhe nuk shkallezohen nga klasa e body-t — prandaj te gjithe
   mbajne prefiksin "hyr-".

   NUK linkohet "Design system/tokens/base.css" e as styles.css: base.css:3 ka nje
   body{background} pa shkalle dhe do te nxinte cdo faqe, perfshire panelin admin.

   Nuk shtohet reset i gjithanshem (global.css:6-12 e ka tashme nje "*") dhe nuk ka
   asnje !important. */

/* ===== Shkalla e faqes dhe tokenat =====
   Tokenat vendosen mbi KLASEN E BODY-T, nuk mbi :root — /variables.css ri-futet ne
   kaskade pas kesaj faqeje dhe nje ri-drejtim i :root-it mbishkruhet pa zhurme
   (kurthi i CL-013). Tokenat qe mungojne deklarohen te gjithe: nje deklarate qe
   perdor nje custom property te pa-shpallur hiqet E TERA pa zhurme, keshtu qe
   "height: var(--control-lg)" pa token do te jepte 0px. */

body.faqja_e_hyrjes {
    /* global.css:20 i jep body-t "width:100vw", qe permban edhe shiritin e rrokullisjes:
       sapo nje gjendje e zgjat faqen, karta e centruar zhvendoset nga qendra sa gjeresia
       e shiritit (defekti 1 i CL-010). (0,1,0) mund rregullin e elementit (0,0,1). */
    width: 100%;
    /* Kurre "height" mbi body — vetem min-height. Me "height:100vh" dhe nje karte 470px
       ne 740x360 mbeten 110px te kartes te paarritshme pergjithmone (maxScrollTop 0,
       pa shirit rrokullisjeje, pa asgje per te kapur). Mesimi i CL-015. */
    height: auto;
    min-height: 100vh;
    /* Karta centrohet me "margin:auto" mbi flex item-in, NUK me justify-content:center:
       margin-et auto zgjidhen ne 0 kur hapesira e lire mbaron, keshtu qe karta nuk mund
       te shtyhet kurre pertej buzes se siperme. */
    justify-content: flex-start;
    align-items: center;
    padding: 32px 16px;
    /* global.css:229 e kalon body-n ne "overflow-x:clip" nen 600px; clip nderveprohet keq
       me dy pseudo-elementet fixed te sfondit. (0,1,0) e mund (0,0,1) brenda media query. */
    overflow-x: hidden;
    background: var(--bg-page);
    color: var(--text-body);
    color-scheme: dark;

    /* Kontrollet — 58px e kalon kufirin 40x40 te prekjes ne cdo gjeresi, pa bllok te vecante. */
    --control-sm: 36px;
    --control-md: 46px;
    --control-lg: 58px;

    /* Tokena qe bss-tokens.css nuk i ka (ai file nuk editohet). */
    --press-scale: .96;
    --dur-instant: 90ms;
    --ease-snap: cubic-bezier(.2, 0, 0, 1);
    --radius-xs: 6px;
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 1px 2px rgba(0, 0, 0, .6);
    --blur-sm: blur(8px) saturate(140%);

    /* Shkurtesat e fontit shkruhen si LITERALE, nuk ndertohen nga atome --fw/--fs qe
       produksioni nuk i ka: nje perberes i pavlefshem heq TE GJITHE deklaraten. */
    --type-body: 400 16px/1.55 Montserrat, system-ui, sans-serif;
    --type-small: 500 14px/1.45 Montserrat, system-ui, sans-serif;

    /* Kohezgjatjet shtese jane tokena, qe blloku prefers-reduced-motion t'i ri-vendose
       pa !important dhe pa luftuar specifikimin. */
    --dur-ngjitu: 400ms;
    --dur-rrotull: 750ms;
    --dur-pulso: 1600ms;

    /* Masat qe i ndryshon shkalla responsive. */
    --mas-logo: 120px;
    --pad-karte: 36px;
    --hap-karte: 24px;
    --fs-titull: 28px;
}

/* Overscroll-i i dokumentit nuk duhet te nxjerre te bardhe mbi sfondin e erret. */
html:has(body.faqja_e_hyrjes) { background: var(--bg-page) }

/* ===== Sfondi =====
   Dy pseudo-elemente fixed te body-t, JO wrapper div-e dhe KURRE nje filter mbi body ose
   html: filter/backdrop-filter/transform/will-change/contain/perspective e bejne elementin
   bllok permbajtjeje per pasardhesit position:fixed, dhe ketu kjo do te ri-ankoronte
   #preloader (inset:0) dhe #error-notice (position:fixed, boshti right). Mesimi i CL-008.
   Te dy jane position:fixed, ndaj nuk behen flex item te body-t. */

body.faqja_e_hyrjes::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/1x/hyr-ose-krijo-llogari-ne-bss-background@1x.webp");
    background-image: image-set(url("/1x/hyr-ose-krijo-llogari-ne-bss-background@1x.webp") 1x, url("/2x/hyr-ose-krijo-llogari-ne-bss-background@2x.webp") 2x);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .5;
}

/* Aurora e firmes si lavazh STATIK, pa animacion te pafundem: nje ekran hyrje qe
   merr fryme pergjithmone pas fjalekalimit lexohet si screensaver, jo si vegle.
   Shkalla e erret mbi foto eshte pune kontrasti, jo dekor — fotoja ka zona te ndritshme
   dhe teksti i bardhe duhet te mbahet mbi te. */
body.faqja_e_hyrjes::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--grad-aurora), linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .72));
}

/* ===== Karta ===== */

body.faqja_e_hyrjes .hyrja {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--hap-karte);
    width: min(460px, 100%);
    margin: auto;
    padding: var(--pad-karte);
    border-radius: var(--radius-2xl);
    background: var(--surface-glass-strong);
    /* I sigurt ketu: #preloader dhe #error-notice jane VELLEZER te <main>, nuk pasardhes. */
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-float), var(--inner-highlight);
    animation: hyr-ngjitu var(--dur-ngjitu) var(--ease-out) both;
}

/* global.css:28-32 i jep "img{max-width:100%;width:100%}" — logo do te matej 100% te kartes. */
body.faqja_e_hyrjes #logo {
    align-self: center;
    width: var(--mas-logo);
    max-width: 100%;
    height: auto;
}

body.faqja_e_hyrjes .hyrja__koke {
    /* global.css:34-36 i jep "div{width:100%}"; e shpallim shprehimisht edhe kur duam 100%. */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

body.faqja_e_hyrjes .hyrja__titull {
    font: 800 var(--fs-titull)/1.2 var(--font-display);
    letter-spacing: var(--ls-heading);
    color: var(--text-strong);
    /* Asgje nuk pritet: teksti mbeshtillet dhe kutia rritet. */
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

body.faqja_e_hyrjes .hyrja__nentitull {
    font: var(--type-small);
    color: var(--text-muted);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ===== Forma =====
   global.css:38-46 i jep "form" shtate vetite: width, display, flex-direction:row,
   flex-wrap:wrap, justify-content:space-between, align-items:center dhe gap 10px.
   TE GJITHA ri-shpallen, se nje kolone vertikale ndryshe kthehet ne rresht. */

body.faqja_e_hyrjes #log_in_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 16px;
}

body.faqja_e_hyrjes .hyrja__fusha {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.faqja_e_hyrjes .hyrja__etiketa {
    font: 600 12px/1.3 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Unaza e fokusit jeton mbi KUTINE, nuk mbi input-in: ky eshte i vetmi model qe mund
   global.css:82-93 dhe global.css:101-105 pa !important. */
body.faqja_e_hyrjes .hyrja__kuti {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: var(--control-lg);
    padding: 0 16px;
    border-radius: var(--radius-md);
    /* Jo var(--border-subtle) (.14): i matur mbi karten e vertete kufiri i tij jep 1.43:1,
       nen 3:1 e SC 1.4.11, dhe kufiri eshte e vetmja shenje e ku ndodhet fusha para fokusit.
       .40 jep 3.8-4.1:1 (varion lehte me foton pas kartes; pragu 3:1 bie rreth .32, ndaj ka
       marzh). Literal rgba dhe JO ri-shpallje e tokenave: --border-subtle/--border-strong
       i ndan karta, toast-i, faqja kryesore dhe paneli - preket vetem kjo fushe. */
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .04);
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

/* :hover ka (0,3,1) dhe e mund bazen (0,2,1): me --border-strong (.28) hovering-u do te ULTE
   kontrastin ne 2.4:1, nen gjendjen e pushimit. .55 jep 6.2-6.6:1. */
body.faqja_e_hyrjes .hyrja__kuti:hover { border-color: rgba(255, 255, 255, .55) }

body.faqja_e_hyrjes .hyrja__kuti:focus-within {
    border-color: var(--bss-cyan);
    background: rgba(79, 198, 242, .06);
    box-shadow: 0 0 0 4px rgba(79, 198, 242, .14), 0 0 30px rgba(79, 198, 242, .15);
}

body.faqja_e_hyrjes .hyrja__ikona {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

body.faqja_e_hyrjes .hyrja__kuti:focus-within .hyrja__ikona { color: var(--bss-cyan) }

/* global.css:82-93 i jep input-eve width:100%, border-radius:10px, box-shadow, padding
   10px 20px dhe — me keq nga te gjitha — color:var(--e-zeza): tekst i ZI dhe nje hije
   e lehte mbi karten e erret. Input-i zhveshet i terte; (1,1,1) e mund (0,1,1) pa barazim. */
body.faqja_e_hyrjes #username,
body.faqja_e_hyrjes #password {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-strong);
    font: 600 15px/1 var(--font-body);
    color-scheme: dark;
}

/* global.css:101-105 vret unazen native te fokusit dhe fut nje box-shadow inset.
   Hiqet ketu; unaza duket mbi .hyrja__kuti:focus-within. */
body.faqja_e_hyrjes #username:focus-visible,
body.faqja_e_hyrjes #password:focus-visible {
    outline: 0;
    border: 0;
    box-shadow: none;
}

/* Administratoret perdorin menaxhues fjalekalimesh — kjo nuk eshte kozmetike. */
body.faqja_e_hyrjes #username:-webkit-autofill,
body.faqja_e_hyrjes #password:-webkit-autofill {
    -webkit-text-fill-color: var(--text-strong);
    -webkit-box-shadow: 0 0 0 1000px rgba(79, 198, 242, .06) inset;
    caret-color: var(--text-strong);
}

/* ===== Butoni i shfaqjes se fjalekalimit =====
   global.css:168-183 e kap me "button" (0,0,1) dhe global.css:185-189 me "button:hover"
   (0,1,1): gjeresi 100%, radius 50px, sfond blu, border 2px. (1,1,1) i mund te dy.
   44x44 ri-shpallet NE BAZE DHE NE :hover — nje rregull hover pa "height" e rrudh
   perseri (kurthi i CL-016). */

body.faqja_e_hyrjes #shfaq_fjalekalimin {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: var(--type-small);
    text-align: center;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

body.faqja_e_hyrjes #shfaq_fjalekalimin:hover {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .07);
    color: var(--text-strong);
}

body.faqja_e_hyrjes #shfaq_fjalekalimin:focus-visible {
    outline: 0;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .07);
    color: var(--text-strong);
    box-shadow: var(--focus-ring);
}

body.faqja_e_hyrjes #shfaq_fjalekalimin > svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* I vetmi nderrim display ne kete file jashte #hyrja_statusi:empty: dy ikonat e syzes.
   Markupi ka dy SVG dhe JS-i shkruan vetem aria-pressed, ndaj nderrimi duhet te jete ne CSS. */
body.faqja_e_hyrjes #shfaq_fjalekalimin .hyrja__sy_mbyll { display: none }
body.faqja_e_hyrjes #shfaq_fjalekalimin[aria-pressed="true"] .hyrja__sy_hap { display: none }
body.faqja_e_hyrjes #shfaq_fjalekalimin[aria-pressed="true"] .hyrja__sy_mbyll { display: block }

/* ===== Zona e statusit =====
   Nje kanal i vetem per cdo mesazh, brenda kartes (parimi i CL-018: nje mesazh, ne nje vend).
   Kutia rritet; teksti nuk pritet kurre. */

body.faqja_e_hyrjes #hyrja_statusi {
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--cherry-400);
    background: rgba(156, 32, 32, .16);
    color: var(--text-strong);
    font: 500 14px/1.45 var(--font-body);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.faqja_e_hyrjes #hyrja_statusi:empty { display: none }

body.faqja_e_hyrjes #hyrja_statusi.hyrja__status--pune {
    border-color: var(--border-accent);
    background: rgba(79, 198, 242, .10);
}

/* ===== Butoni kryesor =====
   Nje veprim i vetem ne faqe, ndaj duhet te jete i pangaterrueshem. global.css:168-183
   e kap me "button" dhe global.css:185-189 me "button:hover"; LISTA E PLOTE — perfshire
   shkurtesen "border" — ri-shpallet ne baze, :hover, :focus-visible, :active dhe :disabled,
   se vetite qe nuk shpallen RRJEDHIN nga global (matur: border 2px blu kaloi tej).
   min-height + height:auto + white-space:normal eshte rregulli "asgje nuk pritet" i
   zbatuar mbi butonin: ne 320px etiketa mbeshtillet dhe butoni rritet.
   Pa "sheen": nje ekran hyrje nuk ka nevoje per nje shkelqim ne levizje. */

body.faqja_e_hyrjes #submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: var(--control-lg);
    height: auto;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: #001018;
    font: 700 16px/1.25 var(--font-body);
    text-align: center;
    cursor: pointer;
    box-shadow: var(--glow-blue);
    white-space: normal;
    overflow-wrap: anywhere;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

body.faqja_e_hyrjes #submit:hover {
    width: 100%;
    min-height: var(--control-lg);
    height: auto;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: #001018;
    text-align: center;
    transform: translateY(-1px);
    box-shadow: var(--glow-cyan);
}

body.faqja_e_hyrjes #submit:focus-visible {
    border: 1px solid transparent;
    background: var(--grad-brand);
    color: #001018;
    outline: 0;
    box-shadow: var(--focus-ring);
}

body.faqja_e_hyrjes #submit:active {
    border: 1px solid transparent;
    background: var(--grad-brand);
    color: #001018;
    transform: scale(var(--press-scale));
}

body.faqja_e_hyrjes #submit:disabled {
    width: 100%;
    min-height: var(--control-lg);
    height: auto;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: #001018;
    opacity: .55;
    cursor: progress;
    transform: none;
    box-shadow: var(--glow-blue);
}

/* ===== Njoftimi pa JavaScript ===== */

body.faqja_e_hyrjes .hyrja__noscript {
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--signal-amber);
    background: rgba(242, 184, 79, .12);
    color: var(--text-strong);
    font: 500 13px/1.45 var(--font-body);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ===== Lajmetari per teknologjite asistuese =====
   I fshehur vizualisht, NUK tekst i dukshem i prere: rregulli "asgje nuk pritet" nuk
   zbatohet ketu dhe clip-path-i i tij nuk duhet raportuar si defekt. */

body.faqja_e_hyrjes .hyrja__lajmetar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ===== Gjendja e pritjes =====
   Serveri fle 3000 ms mbi CDO tentative reale (userLoginRegister.js:103), ndaj kjo gjendje
   eshte mbajtese e peshes dhe nuk shkurtohet. Nderrimi behet nga klasa ".visible" qe shton
   JS-i — kurre nga "display", se skripti nuk shkruan display.
   #preloader e mban padding + overflow:auto dhe karta centrohet me margin:auto: nje flex
   container me align-items:center PRET kreun e nje item-i me te larte se vetja dhe nuk ka
   si te rrokulliset deri tek ai. */

body.faqja_e_hyrjes #preloader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 16px;
    overflow: auto;
    background-color: rgba(0, 0, 0, .55);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    /* opacity:0 NUK e heq permbajtjen nga pema e aksesueshmerise: pa kete, "Po verifikohet..."
       dhe "Zakonisht zgjat rreth 3 sekonda." lexohen nga nje lexues ekrani mbi faqen ne pushim,
       para se perdoruesi te shkruaje gje. visibility e heq, e heq edhe nga rendi i fokusit dhe
       nga goditja e mausit, dhe rrjedh nga E NJEJTA klase ".visible" - pa gjendje te dyte ne JS
       qe mund te shkeputet nga klasa ne rruget e kthimit te shpejte (429) ose ne sukses.
       visibility DUHET te jete edhe ne listen e transition-it: pa te, mbulesa kercen menjehere
       ne hidden ne t=0 dhe shuarja e opacity-t nuk shihet fare. */
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}

body.faqja_e_hyrjes #preloader.visible {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

body.faqja_e_hyrjes #preloader-card {
    margin: auto;
    width: min(260px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 32px 26px;
    border-radius: var(--radius-xl);
    background: var(--surface-glass-strong);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-float);
    text-align: center;
}

body.faqja_e_hyrjes #preloader-spinner {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 4px solid rgba(79, 198, 242, .15);
    border-top-color: var(--bss-cyan);
    animation: hyr-rrotull var(--dur-rrotull) linear infinite;
}

body.faqja_e_hyrjes .hyrja__pritje_titull {
    width: auto;
    font: 700 16px/1.3 var(--font-body);
    color: var(--text-strong);
    white-space: normal;
    overflow-wrap: anywhere;
}

body.faqja_e_hyrjes .hyrja__pritje_nen {
    width: auto;
    font: 500 13px/1.4 var(--font-body);
    color: var(--text-muted);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Tri pikat nderrohen nga JS-i me atributin data-faza, NUK nga animacion CSS — prandaj
   ato jane sinjali "po punon" qe i mbijeton prefers-reduced-motion, kur rrotullimi ngrin. */
body.faqja_e_hyrjes .hyrja__pika {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: auto;
}

body.faqja_e_hyrjes .hyrja__pike {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .18);
    transition: background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_hyrjes #preloader[data-faza="1"] .hyrja__pike:nth-child(1),
body.faqja_e_hyrjes #preloader[data-faza="2"] .hyrja__pike:nth-child(-n+2),
body.faqja_e_hyrjes #preloader[data-faza="3"] .hyrja__pike,
body.faqja_e_hyrjes #preloader[data-faza="4"] .hyrja__pike { background: var(--bss-cyan) }

/* Pika aktuale pulson lehte, qe sekonda mes fazave te lexohet si "po punon" dhe jo "ngrire". */
body.faqja_e_hyrjes #preloader[data-faza="1"] .hyrja__pike:nth-child(1),
body.faqja_e_hyrjes #preloader[data-faza="2"] .hyrja__pike:nth-child(2),
body.faqja_e_hyrjes #preloader[data-faza="3"] .hyrja__pike:nth-child(3) {
    animation: hyr-pulso var(--dur-pulso) var(--ease-in-out) infinite;
}

/* Faza 4 = "po zgjat me shume se zakonisht". Pa kete, kuadroja e fazes 3 - tri pika plot cyan,
   te ngrira - mbetet identike pergjithmone dhe lexohet "gati u mbarua" edhe pas 3 minutash.
   Sinjali kryesor eshte TEKSTI poshte, se ai e kalon edhe prefers-reduced-motion; pulsimi i
   gjithe rreshtit vetem e ndan kuadron nga faza 3 per ate qe i shikon levizjet. */
body.faqja_e_hyrjes #preloader[data-faza="4"] .hyrja__pika {
    animation: hyr-pulso var(--dur-pulso) var(--ease-in-out) infinite;
}

body.faqja_e_hyrjes .hyrja__pritje_gjate {
    display: none;
    width: auto;
    font: 600 13px/1.4 var(--font-body);
    color: var(--bss-cyan);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* I vetmi nderrim display ne kete faqe pervec #hyrja_statusi:empty, dhe qellimisht i tille:
   rrjedh nga data-faza, pra nga i njejti atribut si pikat, dhe jo nga nje klase e dyte. */
body.faqja_e_hyrjes #preloader[data-faza="4"] .hyrja__pritje_gjate { display: block }

/* ===== #error-notice =====
   globalAdminFunctions.js:4-5 shkruan "style.right = 70px" dhe pas 3000 ms "-250px",
   NE LINJE — dhe linja mund CSS-in e autorit pa !important, i cili ndalohet. Prandaj:
   NGRIRE dhe nuk shpallen kurre ketu: width (250px), boshti "right", gjendja e pushimit
   plotesisht jashte kanavace ne right:-250px, bottom:70px dhe #error-text{width:170px}
   (global.css:216). Nuk shpallet as "display".

   ARITMETIKA: siperfaqja e re shton nje bufull 1px qe global.css nuk e kishte, dhe me
   box-sizing:border-box kjo i heq 2px kutise se permbajtjes. Hapesira bie 15px -> 14px
   qe shuma te mbetet saktesisht 250: 2 bufull + 40 padding + 24 ikona + 14 hapesire +
   170 tekst = 250. Me hapesiren 15px, #error-text matet 169px — flex-i e rrudh 1px dhe
   gjeresia e ngrire 170px thyhet pa zhurme.

   NDRYSHIM I QELLIMSHEM, I MATUR: position absolute -> fixed. I parkuar ne right:-250px
   me position:absolute, njoftimi i jep faqes 250px rrokullisje HORIZONTALE reale ne cdo
   gjeresi (documentElement.scrollLeft arrin 250 ne 320, 390, 740 dhe 1920) — ne nje telefon
   320px kjo do te thote qe karta mund te rreshqitet e tera jashte ekranit. Me position:fixed
   maxScrollLeft-i ne pushim bie ne 0 dhe drejtkendeshi i hapur mbetet IDENTIK. JS-i shkruan
   vetem "right", ndaj boshti nuk preket, dhe "position" nuk ka qene kurre ne listen e
   ngrire te CL-013 — vetem gjeresia, boshti dhe gjeometria jashte kanavace.

   Tranzicioni: global.css:208 ka "all 2s ease-in-out". Bie ne 480ms dhe VETEM mbi "right",
   se "all" animon edhe cdo veti tjeter qe ky file ndryshon, dhe 2s le vetem ~1s nga
   njoftimi plotesisht ne ekran para se temporizuesi i 3000 ms ta kthehe. Ky eshte ai
   trajtim i CL-013 mbi te njejtin element ne panelin admin.

   Kjo faqe NUK e drejton #error-notice (skripti nuk importon showServerError); rregullat
   ekzistojne qe elementi te jete i sakte nese dicka e shfaq ndonjehere. */

body.faqja_e_hyrjes #error-notice {
    position: fixed;
    padding: 20px;
    gap: 14px;
    background: var(--surface-glass-strong);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    /* Mbi #preloader (z-index 100): sot #error-notice llogarit "auto" dhe do te
       shfaqej NEN mbulesen e pritjes. */
    z-index: 200;
    transition: right var(--dur-slow) var(--ease-out);
}

body.faqja_e_hyrjes #error-icon {
    flex: 0 0 auto;
    filter: drop-shadow(0 0 10px rgba(200, 60, 59, .7));
}

/* showServerError i vendos innerHTML, dhe skriptet admin dergojne <b>. */
body.faqja_e_hyrjes #error-text {
    color: var(--text-strong);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.45;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.faqja_e_hyrjes #error-text b,
body.faqja_e_hyrjes #error-text strong { color: var(--cherry-300) }

/* ===== Shiritat e rrokullisjes dhe perzgjedhja =====
   Rrokulliset vete dokumenti, prandaj duhet EDHE html:has(...) — vetem
   body ::-webkit-scrollbar nuk e kap shiritin kryesor. */

html:has(body.faqja_e_hyrjes) { scrollbar-width: thin; scrollbar-color: var(--bss-blue) rgba(255, 255, 255, .04) }
body.faqja_e_hyrjes { scrollbar-width: thin; scrollbar-color: var(--bss-blue) rgba(255, 255, 255, .04) }

html:has(body.faqja_e_hyrjes)::-webkit-scrollbar,
body.faqja_e_hyrjes ::-webkit-scrollbar { width: 10px; height: 10px }

html:has(body.faqja_e_hyrjes)::-webkit-scrollbar-track,
body.faqja_e_hyrjes ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04) }

html:has(body.faqja_e_hyrjes)::-webkit-scrollbar-thumb,
body.faqja_e_hyrjes ::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    border: 2px solid transparent;
    background-clip: padding-box;
}

html:has(body.faqja_e_hyrjes)::-webkit-scrollbar-thumb:hover,
body.faqja_e_hyrjes ::-webkit-scrollbar-thumb:hover {
    background: var(--bss-cyan);
    background-clip: padding-box;
    border: 2px solid transparent;
}

html:has(body.faqja_e_hyrjes)::-webkit-scrollbar-corner,
body.faqja_e_hyrjes ::-webkit-scrollbar-corner { background: transparent }

body.faqja_e_hyrjes ::selection { background: var(--bss-cyan); color: #000 }

/* ===== Keyframes =====
   Emrat e keyframe-ve jane globale per dokument pavaresisht shkallezimit te selektoreve —
   e vetmja gje qe klasa e body-t nuk mund te mbroje. Te tre mbajne prefiksin "hyr-", qe te
   mos perplasen me bss-aurora, bss-float, bss-rise, bss-marquee, bss-sheen (shpallur nga
   bss-tokens.css dhe te mbrritura ne kete faqe sapo ai importohet), bss-sheen-hl,
   bss-admin-*, bss-ringspin, bss-flyin, pdp-* dhe preloader-spin. */

@keyframes hyr-ngjitu { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes hyr-rrotull { to { transform: rotate(360deg) } }
@keyframes hyr-pulso { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

/* ===== RESPONSIVE =====
   Shkalla: 1920 / 1500 / 1366 / 1200 / 1024 / 880 / 767 / 600 / 440 / 390 / 360 / 320,
   plus telefoni i shkurter horizontal 740x360. Karta eshte min(460px, 100%) dhe nuk ka
   asnje grid ne kete faqe: asgje nuk perdor grid-template-columns, ndaj rregulli
   "ri-shpall cdo span dhe area" nuk ka ku te kafshoje. Blloqet @media (max-height) vijne
   TE FUNDIT me qellim, qe ne 740x360 ritmi vertikal i shkurtuar te mund gjeresine.
   Keto blloqe jane masa komoditeti: mekanizmi qe e ben karten te arritshme ne dritare te
   shkurtra eshte min-height:100vh me height:auto, jo ato. */

/* global.css:229 shton "padding-left/right:20px" nen 600px; (0,1,0) e mund pa zhurme,
   ndaj gryka poshte 600px eshte E JONA dhe ri-shpallet me qellim. */
@media (max-width: 600px) {
    body.faqja_e_hyrjes {
        padding: 24px 16px;
        overflow-x: hidden;
        --mas-logo: 104px;
        --pad-karte: 28px;
        --hap-karte: 20px;
        --fs-titull: 24px;
    }
}

@media (max-width: 360px) {
    body.faqja_e_hyrjes {
        padding: 20px 12px;
        --mas-logo: 92px;
        --pad-karte: 22px;
        --fs-titull: 22px;
    }
}

@media (max-height: 560px) {
    body.faqja_e_hyrjes {
        padding-block: 20px;
        --mas-logo: 92px;
        --hap-karte: 16px;
    }

    body.faqja_e_hyrjes .hyrja { padding-block: 24px }
}

@media (max-height: 420px) {
    body.faqja_e_hyrjes {
        padding-block: 16px;
        --mas-logo: 80px;
        --hap-karte: 14px;
    }

    body.faqja_e_hyrjes .hyrja { padding-block: 20px }

    body.faqja_e_hyrjes #preloader-card { padding: 24px 22px; gap: 14px }

    body.faqja_e_hyrjes #preloader-spinner { width: 40px; height: 40px }
}

/* ===== prefers-reduced-motion =====
   Mekanizmi: cdo kohezgjatje ne kete file shkruhet me var(--dur-*), keshtu qe ri-vendosja
   e tokenave mbi klasen e body-t i shuan TE GJITHA pa asnje !important dhe pa luftuar
   specifikimin — nje bllok "body.faqja_e_hyrjes *" ka (0,1,1) dhe do te humbte kundrejt
   rregullave (1,1,1) me lart; tokenat fitojne se jane vlera te trasheguara, nuk deklarata
   konkurruese. Shkruhen KOHEZGJATJE, jo "animation:none": hyr-ngjitu perdor
   animation-fill-mode:both dhe "none" do te lere karten e mbetur ne opacity:0.

   Perdoruesi me levizje te reduktuar NUK e humb sinjalin e progresit: rrotullimi ngrin ne
   nje unaze statike me kreun cyan, dhe tri pikat vazhdojne te mbushen 1 -> 2 -> 3 sepse
   ato i shkruan JS-i me data-faza, jo CSS-i. */

@media (prefers-reduced-motion: reduce) {
    body.faqja_e_hyrjes {
        --dur-instant: .01ms;
        --dur-fast: .01ms;
        --dur-base: .01ms;
        --dur-slow: .01ms;
        --dur-ngjitu: .01ms;
        --dur-rrotull: .01ms;
        --dur-pulso: .01ms;
    }

    body.faqja_e_hyrjes *,
    body.faqja_e_hyrjes *::before,
    body.faqja_e_hyrjes *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
        scroll-behavior: auto;
    }

    body.faqja_e_hyrjes #submit:hover { transform: none }
    body.faqja_e_hyrjes #submit:active { transform: none }

    /* Blloku "*" me lart ka (0,1,1) dhe HUMBET kundrejt rregullave (1,1,1) te rrotulles dhe
       (1,4,1) te pikave, ndaj "infinite" mbijeton dhe kohezgjatja .01ms e ri-nis ciklin
       mijera here ne sekonde: matur, rrotulla kercen mes 0deg dhe 180deg kuadro pas kuadroje
       dhe pika pulsuese dridhet mes opacity 1 dhe .45 — pra perdoruesi me levizje te reduktuar
       marrte ME SHUME levizje, jo me pak. Selektoret ri-shkruhen IDENTIK me ato te bazes, qe
       me te njejtin specifikim te fitojne nga rradha e deklarimit, dhe vetem numri i cikleve
       ndryshon: pa "animation:none" dhe pa !important. Me nje cikel te vetem dhe fill-mode
       "none" (shkurtesa "animation" e rivendos) elementi kthehet ne stilin e tij pa animacion:
       unaza mbetet statike me kreun cyan lart dhe pika mbetet plotesisht e dukshme. */
    body.faqja_e_hyrjes #preloader-spinner { animation-iteration-count: 1 }

    body.faqja_e_hyrjes #preloader[data-faza="1"] .hyrja__pike:nth-child(1),
    body.faqja_e_hyrjes #preloader[data-faza="2"] .hyrja__pike:nth-child(2),
    body.faqja_e_hyrjes #preloader[data-faza="3"] .hyrja__pike:nth-child(3) {
        animation-iteration-count: 1;
    }

    /* Selektor IDENTIK me bazen (1,3,1): fiton nga rradha, pa !important dhe pa "animation:none".
       Rreshti i pikave mbetet i dukshem; sinjali i fazes 4 e mban tekstin, qe nuk animohet fare. */
    body.faqja_e_hyrjes #preloader[data-faza="4"] .hyrja__pika { animation-iteration-count: 1 }
}