/* InfoTech Academy NOC — shtresa e brandit (stili i bannerit: fushë blu, pika, valë me vija, Montserrat, etiketa portokalli) */
:root {
  --brand: #1B5FD1; --brand-2: #164FB3; --brand-deep: #1652C0; --orange: #F5A33A; --orange-2: #E8922A;
  --accent: #1B5FD1; --accent-2: #164FB3; --accent-soft: #E6EEFC;
  --bg: #F3F6FC; --line: #E1E7F2; --line-2: #CDD7E8;
  --sans: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #7FA8F8; --accent-2: #9BBCFA; --accent-soft: #172A4F; --bg: #0E1420; --line: #233047; --line-2: #2E3D57; }
}
:root[data-theme="dark"] { --accent: #7FA8F8; --accent-2: #9BBCFA; --accent-soft: #172A4F; --bg: #0E1420; --line: #233047; --line-2: #2E3D57; }

body { font-size: 13.5px; letter-spacing: -.005em; }
h1, h2, h3, .btn, .nav a, .tabs button, .seg button { letter-spacing: -.01em; }
h1 { font-weight: 700; }
h2 { font-weight: 700; }

/* kanavacat e valës */
canvas.bgwave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }

/* ---------- shiriti anësor: brez blu me pika dhe valë ---------- */
.side { background: var(--brand); border-right: 0; color: #fff; overflow: hidden; }
.side > *:not(canvas) { position: relative; z-index: 1; }
.brand { flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 20px 16px; }
.brand .logo-w { width: 150px; height: auto; display: block; }
.brand .noc-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.8); }
.brand .noc-tag b { background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: .04em; }
.nav a { color: rgba(255,255,255,.84); font-weight: 600; }
.nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav a.on { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 3px 0 0 var(--orange); }
.nav .sep { background: rgba(255,255,255,.18); }
.nav .badge { background: var(--orange); color: #fff; }
.me { border-top-color: rgba(255,255,255,.18); }
.me .who span { color: rgba(255,255,255,.75); }
.avatar { background: var(--orange); color: #fff; }
.side .icon-btn { color: rgba(255,255,255,.8); }
.side .icon-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- koka e çdo faqeje: banner i vogël ---------- */
.topbar { position: relative; overflow: hidden; background: var(--brand); color: #fff; border-radius: 16px; padding: 22px 26px; min-height: 108px; box-shadow: 0 8px 24px -12px rgba(27,95,209,.55); }
.topbar > *:not(canvas) { position: relative; z-index: 1; }
.topbar h1 { font-size: 22px; color: #fff; }
.topbar h1::after { content: ""; display: block; width: 38px; height: 3px; border-radius: 3px; background: var(--orange); margin-top: 8px; }
.topbar .sub { color: rgba(255,255,255,.86); max-width: 720px; margin-top: 6px; }
.topbar .btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.38); color: #fff; }
.topbar .btn:hover { background: rgba(255,255,255,.24); }
.topbar .btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); }
.topbar .btn.primary:hover { background: var(--orange-2); }
.topbar input, .topbar select { background: rgba(255,255,255,.95); color: #17212b; border-color: transparent; }

/* ---------- kartat, butonat, etiketat ---------- */
.card { border-color: var(--line); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px -8px rgba(27,95,209,.18); }
.card-h h2 { display: flex; align-items: center; gap: 9px; }
.card-h h2::before { content: ""; width: 4px; height: 16px; border-radius: 3px; background: var(--orange); flex: none; }
.btn { border-radius: 999px; padding: 7px 15px; }
.btn.sm { padding: 4px 11px; }
.btn.primary { box-shadow: 0 4px 12px -6px rgba(27,95,209,.6); }
.seg { border-radius: 999px; border-color: var(--line-2); }
.seg button { font-weight: 700; }
.seg button.on { background: var(--brand); color: #fff; }
.seg [data-g].on { background: var(--orange); color: #fff; }
.seg button.on .muted { color: rgba(255,255,255,.85); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--orange); }
.kpi { position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand) 0 78%, var(--orange) 78% 100%); }
.kpi .v { font-weight: 800; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(27,95,209,.16); }

/* ---------- faqja e hyrjes: banner i plotë ---------- */
.login { position: relative; overflow: hidden; background: var(--brand); padding: 32px 24px; }
.login-in { position: relative; z-index: 1; width: 100%; max-width: 1080px; display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; }
.login-hero { display: flex; align-items: center; gap: 34px; color: #fff; }
.login-hero .lg { width: 230px; height: auto; flex: none; }
.login-hero .dv { width: 1px; align-self: stretch; min-height: 180px; background: rgba(255,255,255,.55); flex: none; }
.login-hero h2 { font-size: 34px; font-weight: 800; line-height: 1.1; color: #fff; }
.login-hero p { margin: 10px 0 0; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.92); }
.login-hero .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.login-hero .pills span { background: var(--orange); color: #fff; font-weight: 700; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; }
.login-hero .url { margin-top: 18px; font-weight: 700; font-size: 13px; color: #fff; opacity: .95; }
.login .card { max-width: 400px; padding: 30px 30px 26px; border: 0; border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(4,20,60,.55); }
.login .card h1 { margin: 0 0 4px; font-size: 22px; }
.login .card h1::after { content: ""; display: block; width: 36px; height: 3px; border-radius: 3px; background: var(--orange); margin-top: 8px; }
.login .card .btn.primary { border-radius: 999px; }
@media (max-width: 900px) {
  .login-in { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .login-hero { flex-direction: column; text-align: center; gap: 14px; }
  .login-hero .lg { width: 180px; }
  .login-hero .dv { min-height: 0; height: 1px; width: 120px; align-self: center; }
  .login-hero h2 { font-size: 26px; }
  .login-hero .pills { justify-content: center; }
  .login .card { width: 100%; }
}
@media (max-width: 820px) {
  .mobile-top { background: var(--brand); color: #fff; margin: -14px -16px 14px; padding: 10px 16px; }
  .mobile-top .icon-btn { color: #fff; }
  .topbar { padding: 18px; border-radius: 14px; }
}

/* pikat e logos në hyrje */
.login-hero { position: relative; }
.login-hero > *:not(canvas) { position: relative; z-index: 1; }
.login-hero canvas.dots { position: absolute; left: -60px; top: -90px; width: calc(100% + 120px); height: calc(100% + 180px); pointer-events: none; z-index: 2; }
.login-hero .pills span { transition: background .2s; }

/* Gjuha e ndërfaqes (i18n.js): SQ | EN poshtë djathtas, në çdo faqe */
#nd-lang { position: fixed; right: 16px; bottom: 16px; z-index: 55; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(10,31,77,.14); font-family: var(--sans); }
#nd-lang button { border: 0; background: transparent; color: #4A5878; font: 700 12px/1 var(--sans); letter-spacing: .04em; padding: 7px 11px; border-radius: 999px; cursor: pointer; }
#nd-lang button:hover { color: var(--brand); }
#nd-lang button[aria-pressed="true"] { background: var(--orange); color: #fff; }
#nd-lang button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }