/* ==================================================================
   Atlas v2 — shtresa e re vizuale (ridizajni v2, shtator 2026)
   Ikonat: duoton i animuar. Butonat: Shkëlqim. Lëvizja: [data-motion="full"]
   (parazgjedhja) ose "calm" = vetëm lëvizja që tregon gjendje;
   prefers-reduced-motion i fik të gjitha.
   Specifikimi: Specifikime/Ridizajni v2 — specifikimi.md
   Emrat janë të rinj me qëllim: styles.css ka .mark, .sel, .pop, .thumb, .seg,
   .cap, .player, .score me kuptim tjetër.
   ================================================================== */

/* ---- Ngjyrat e llojeve të punës, të vërtetuara me validatorin ----
   Drita: ngjyrat e sotme të data.js (kalojnë). E errëta: hapa të vetët
   (të sotmet dështonin: Template shumë e ndritshme, Live shumë e errët). */
:root {
  --k-clips: #389560; --k-transcript: #3275b4; --k-reel: #c34e54;
  --k-live: #894d97;  --k-template: #bd9121;
}
:root[data-theme="dark"] {
  --k-clips: #4ca871; --k-transcript: #4b8dcf; --k-reel: #df6768;
  --k-live: #9565c7;  --k-template: #b48c2b;
}

/* ================= IKONAT ================= */
.ico { width: 18px; height: 18px; display: block; overflow: visible; flex: none; }
.ico * { transform-box: fill-box; transform-origin: center; }
.ico .l { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico .f { fill: currentColor; stroke: none; }
.ico .t { fill: var(--action); opacity: .32; stroke: none; }
[data-theme="dark"] .ico .t { fill: var(--action-hi); opacity: .45; }
.on .ico .t, .b-primary .ico .t { fill: #fff; opacity: .3; }

/* çdo ikonë lëviz kur preket elementi që e mban */
:is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .ico { --go: 1; }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-dash .p1 { animation: i-pop 520ms var(--ease) 0ms; }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-dash .p2 { animation: i-pop 520ms var(--ease) 70ms; }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-dash .p3 { animation: i-pop 520ms var(--ease) 140ms; }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-dash .p4 { animation: i-pop 520ms var(--ease) 210ms; }
@keyframes i-pop { 40% { transform: scale(.72); } 75% { transform: scale(1.08); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-photo .lens { animation: i-flash 600ms var(--ease); }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-photo .corner { animation: i-focus 600ms var(--ease); }
@keyframes i-flash { 30% { transform: scale(1.5); } }
@keyframes i-focus { 40% { transform: scale(.82); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-cc .cc { stroke-dasharray: 12; animation: i-draw 700ms var(--ease); }
@keyframes i-draw { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-reel .play { animation: i-nudge 600ms var(--ease); }
@keyframes i-nudge { 35% { transform: translateX(2px) scale(1.25); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-reels .back1 { animation: i-fan1 620ms var(--ease); }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-reels .back2 { animation: i-fan2 620ms var(--ease); }
@keyframes i-fan1 { 50% { transform: rotate(14deg) translateX(2px); } }
@keyframes i-fan2 { 50% { transform: rotate(-9deg) translateX(-1px); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-cut .blade { animation: i-snip 560ms var(--ease) 2; }
@keyframes i-snip { 50% { transform: rotate(-10deg); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-stitch .left  { animation: i-joinL 700ms var(--ease); }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-stitch .right { animation: i-joinR 700ms var(--ease); }
@keyframes i-joinL { 45% { transform: translateX(2.5px); } }
@keyframes i-joinR { 45% { transform: translateX(-2.5px); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-live .w1 { animation: i-wave 900ms ease-out infinite; }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-live .w2 { animation: i-wave 900ms ease-out 180ms infinite; }
@keyframes i-wave { 0% { opacity: .2; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: .2; } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-kit .d1 { animation: i-hop 500ms var(--ease) 0ms; }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-kit .d2 { animation: i-hop 500ms var(--ease) 90ms; }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-kit .d3 { animation: i-hop 500ms var(--ease) 180ms; }
@keyframes i-hop { 40% { transform: translateY(-3px); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-up .arrow { animation: i-up 700ms var(--ease); }
@keyframes i-up { 45% { transform: translateY(-7px); opacity: 0; } 46% { transform: translateY(6px); opacity: 0; } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-down .arrow { animation: i-down 700ms var(--ease); }
@keyframes i-down { 45% { transform: translateY(7px); opacity: 0; } 46% { transform: translateY(-6px); opacity: 0; } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-bell .body { transform-origin: 50% 0%; animation: i-ring 800ms var(--ease); }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-bell .clap { animation: i-clap 800ms var(--ease); }
@keyframes i-ring { 15% { transform: rotate(14deg); } 35% { transform: rotate(-12deg); } 55% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
@keyframes i-clap { 15% { transform: translateX(-1.5px); } 35% { transform: translateX(1.5px); } 55% { transform: translateX(-1px); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-search .glass { animation: i-scan 800ms var(--ease); }
@keyframes i-scan { 30% { transform: translate(-1.5px, -1px) scale(1.1); } 65% { transform: translate(1px, .5px); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-trash .lid { transform-origin: 20% 100%; animation: i-lid 700ms var(--ease); }
@keyframes i-lid { 40% { transform: rotate(-22deg) translateY(-1.5px); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-refresh { animation: i-spin 700ms var(--ease); }
@keyframes i-spin { to { transform: rotate(360deg); } }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-spark .star { animation: i-twinkle 700ms var(--ease); }
:root:not([data-motion="calm"]) :is(.nav-item, .k-ni, .k-srch, .k-new, .k-pal-i, .chip-i, .b, .launch, .fchip, .hov):hover .a-spark .mini { animation: i-twinkle 700ms var(--ease) 150ms; }
@keyframes i-twinkle { 40% { transform: rotate(45deg) scale(.6); } 75% { transform: rotate(90deg) scale(1.15); } 100% { transform: rotate(90deg); } }

/* ikona e navigimit: çip me tintë */
.nav-icon .ico { width: 16px; height: 16px; }


/* ================= BUTONAT — Shkëlqim ================= */
.b {
  --h: 36px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 16px; border-radius: 10px;
  font: 600 13.5px/1 var(--sans); letter-spacing: -0.005em; cursor: pointer;
  border: 1px solid transparent; user-select: none; white-space: nowrap; text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}
.b > svg:not(.ico) { width: 16px; height: 16px; flex: none; transition: transform 260ms var(--ease); }
.b .ico { width: 16px; height: 16px; }
.b:focus-visible { outline: 2px solid var(--action-hi); outline-offset: 2px; }
.b[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.b-sm { --h: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.b-lg { --h: 44px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.b-icon { width: var(--h); padding: 0; }

.b-primary {
  color: #fff; border-color: #1d5fc8;
  background: linear-gradient(180deg, #4196ff 0%, #2a72da 55%, #1f63cc 100%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .32), inset 0 -2px 0 oklch(0 0 0 / .14),
              0 1px 2px oklch(0.3 0.1 254 / .3), 0 8px 20px -8px oklch(0.55 0.19 254 / .75);
}
.b-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, oklch(1 0 0 / .38) 48%, transparent 64%);
  transform: translateX(-130%);
}
:root:not([data-motion="calm"]) .b-primary:hover::before { transform: translateX(130%); transition: transform 750ms var(--ease); }
.b-primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .32), inset 0 -2px 0 oklch(0 0 0 / .14),
              0 2px 4px oklch(0.3 0.1 254 / .3), 0 14px 28px -10px oklch(0.55 0.19 254 / .85);
}
.b-primary:active { transform: translateY(1px) scale(.98); box-shadow: inset 0 2px 6px oklch(0 0 0 / .28), 0 1px 2px oklch(0.3 0.1 254 / .3); }

.b-sec {
  color: var(--ink); background: var(--paper-raise); border-color: var(--line);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .6), 0 1px 2px oklch(0 0 0 / .06);
}
[data-theme="dark"] .b-sec { box-shadow: inset 0 1px 0 oklch(1 0 0 / .07), 0 1px 2px oklch(0 0 0 / .4); }
.b-sec:hover { border-color: color-mix(in oklch, var(--action) 45%, var(--line)); color: var(--action-ink); transform: translateY(-1px); box-shadow: 0 6px 14px -8px oklch(0.5 0.19 254 / .45); }
.b-sec:active { transform: scale(.98); }
.b-ghost { color: var(--ink-2); background: transparent; }
.b-ghost:hover { background: var(--hover); color: var(--ink); }
.b-danger { color: var(--err); background: var(--paper-raise); border-color: var(--line); }
.b-danger:hover { border-color: var(--err); background: var(--err-wash); }

:root:not([data-motion="calm"]) .b:hover .i-right { transform: translateX(3px); }
:root:not([data-motion="calm"]) .b:hover .i-pop { transform: scale(1.18) rotate(-8deg); }

.ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: currentColor; opacity: .22; transform: scale(0); animation: b-rip 620ms var(--ease) forwards; }
.b-primary .ripple { background: #fff; opacity: .35; }
@keyframes b-rip { to { transform: scale(1); opacity: 0; } }

/* ---- grupi i segmentuar ---- */
.seg2 { position: relative; display: inline-flex; padding: 3px; border-radius: 10px; background: var(--paper-sink); border: 1px solid var(--line-soft); }
.seg2 button { all: unset; position: relative; z-index: 1; padding: 5px 12px; font: 500 12.5px var(--sans); color: var(--ink-2); cursor: pointer; border-radius: 7px; transition: color 200ms var(--ease); }
.seg2 button[aria-pressed="true"] { color: var(--ink); }
.seg2 .knob { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 7px; background: var(--paper-raise);
  box-shadow: 0 1px 2px oklch(0 0 0 / .1), 0 4px 10px -4px oklch(0 0 0 / .15); transition: transform 380ms var(--ease), width 380ms var(--ease); }
[data-theme="dark"] .seg2 .knob { background: #1c2332; }

/* ---- hyrja ---- */
@keyframes v2-rise { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
:root:not([data-motion="calm"]) .enter { animation: v2-rise 560ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
}

/* ==================================================================
   Korniza C: shiriti anësor i grupuar, koka e faqes, menuja, Ctrl+K.
   Klasat k-* janë të korniza.js; emrat e vjetër të styles.css nuk preken.
   ================================================================== */
:root { --sidebar-w: 256px; }
:root.rail { --sidebar-w: 76px; }
.app { transition: grid-template-columns 420ms var(--ease); }
:root[data-motion="calm"] .app { transition: none; }

#sidebar { gap: 12px; padding: 16px 14px 12px; overflow: hidden; border-right-color: var(--line-soft); }
[data-theme="dark"] #sidebar { background: #070a12; }
#sidebar > * { flex-shrink: 0; }
#sidebar > .k-nav { flex-shrink: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }

.k-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.k-brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 2px; }
.k-brand img { width: 34px; height: auto; display: block; flex: none; filter: drop-shadow(0 4px 10px oklch(0.55 0.19 254 / .35)); }
.k-brand b { display: block; font: 700 15px/1 var(--sans); letter-spacing: .22em; white-space: nowrap; }
.k-brand small { display: block; font: 500 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; color: var(--ink-3); margin-top: 4px; white-space: nowrap; }
.k-collapse { all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); flex: none; transition: background 200ms var(--ease), color 200ms var(--ease); }
.k-collapse:hover { background: var(--hover-sink); color: var(--ink); }
.k-collapse:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.k-new { width: 100%; justify-content: center; }
.k-srch { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 8px 0 11px; border-radius: 10px; cursor: pointer;
  background: var(--paper-raise); border: 1px solid var(--line); color: var(--ink-3); font-size: 13px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.k-srch:hover { border-color: color-mix(in oklch, var(--action) 40%, var(--line)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--action) 10%, transparent); }
.k-srch:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.k-srch .ico { width: 16px; height: 16px; flex: none; }
.k-srch > span { flex: 1; white-space: nowrap; overflow: hidden; }
.k-kbd { font: 500 10.5px/1 "IBM Plex Mono", monospace; color: var(--ink-3); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; background: var(--paper-raise); white-space: nowrap; }

.k-ng { display: grid; gap: 2px; position: relative; }
.k-ng + .k-ng { margin-top: 8px; }
.k-nl { font: 600 10.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); padding: 6px 10px 8px; white-space: nowrap; }
.k-ni { all: unset; box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: 10px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: color 200ms var(--ease), background 200ms var(--ease); }
.k-ni:hover { color: var(--ink); background: var(--hover-sink); }
.k-ni:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.k-ni[aria-current="page"] { color: var(--ink); background: transparent; }
.k-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; transition: background 250ms var(--ease), color 250ms var(--ease), box-shadow 250ms var(--ease); }
.k-ic .ico { width: 17px; height: 17px; }
.k-ni[aria-current="page"] .k-ic { background: var(--action-grad); color: #fff; box-shadow: 0 6px 14px -6px oklch(0.55 0.19 254 / .7); }
.k-ni[aria-current="page"] .k-ic .ico .t { fill: #fff; opacity: .3; }
.k-tx { overflow: hidden; text-overflow: ellipsis; }
.k-nr { margin-left: auto; font: 500 11px "IBM Plex Mono", monospace; color: var(--ink-3); }
.k-rec { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .06em; color: var(--err); }
.k-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--err); animation: k-blink 1.2s ease-in-out infinite; }
@keyframes k-blink { 50% { opacity: .3; } }
.k-ind { position: absolute; left: 0; right: 0; top: 0; height: 38px; border-radius: 10px; z-index: 0; pointer-events: none;
  background: var(--paper-raise); box-shadow: 0 1px 2px oklch(0 0 0 / .06), 0 6px 16px -10px oklch(0 0 0 / .25);
  transition: transform 460ms var(--ease), height 460ms var(--ease); }
.k-ind[hidden] { display: none !important; }
[data-theme="dark"] .k-ind { background: #151b28; box-shadow: inset 0 1px 0 oklch(1 0 0 / .05), 0 8px 18px -10px oklch(0 0 0 / .8); }
.k-ind::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--action); box-shadow: 0 0 12px var(--action); }
:root[data-motion="calm"] .k-ind { transition-duration: 180ms; }

/* kutia "Në punë tani" */
.k-lw { margin-top: auto; border-radius: 12px; background: var(--paper-raise); border: 1px solid var(--line-soft); padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.k-lw-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.k-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); position: relative; flex: none; }
.k-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: k-ping 1.8s ease-out infinite; }
@keyframes k-ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.k-lw-link { all: unset; cursor: pointer; margin-left: auto; font-weight: 500; color: var(--action-ink); font-size: 11.5px; }
.k-lw-link:hover { text-decoration: underline; }
.k-lw-j { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 12px; min-width: 0; }
.k-lw-j > div:first-child { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); }
.k-pct { font: 500 11px "IBM Plex Mono", monospace; color: var(--ink-3); flex: none; }
.k-lw-j > div:first-child .k-pct { margin-left: auto; }
.k-lw-x { all: unset; cursor: pointer; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: -2px -4px -2px -2px; border-radius: 6px; color: var(--ink-3); }
.k-lw-x .ico { width: 12px; height: 12px; }
.k-lw-x:hover { background: color-mix(in oklch, var(--err) 12%, transparent); color: var(--err); }
.k-lw-x:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.k-bar { height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.k-bar b { display: block; height: 100%; background: var(--action); border-radius: 2px; transition: width 600ms var(--ease); position: relative; overflow: hidden; }
.k-bar.wait b { background: var(--line); }
.k-bar:not(.wait) b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, oklch(1 0 0 / .6), transparent); animation: k-sheen 1.6s ease-in-out infinite; }
@keyframes k-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.k-ring { display: none; width: 34px; height: 34px; position: relative; }
.k-ring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.k-ring circle { fill: none; stroke-width: 3; }
.k-ring .bg { stroke: var(--line-soft); }
.k-ring .fg { stroke: var(--action); stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease); }
.k-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11.5px var(--sans); }
.k-trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.k-nav + .k-me { margin-top: auto; }

.k-me { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; transition: background 200ms var(--ease); white-space: nowrap; }
.k-me:hover { background: var(--hover-sink); }
.k-me:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.k-av { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 600 12px var(--sans); color: #fff; flex: none;
  background: linear-gradient(135deg, #4196ff, #1f63cc); box-shadow: inset 0 1px 0 oklch(1 0 0 / .3); }
.k-me-t { display: grid; min-width: 0; }
.k-me-t b { font-size: 13px; font-weight: 600; }
.k-me-t small { font-size: 11.5px; color: var(--ink-3); }
.k-dots { margin-left: auto; color: var(--ink-3); letter-spacing: .1em; }

/* ekran i ulët (733px): vetëm lista lëviz, asgjë nuk shtypet */
@media (max-height: 780px) {
  #sidebar { gap: 7px; padding-top: 12px; padding-bottom: 10px; }
  .k-ni, .k-ind { height: 32px; }
  .k-ng + .k-ng { margin-top: 2px; }
  .k-nl { padding: 4px 10px 5px; }
  .k-lw { padding: 7px 11px; gap: 6px; }
  .k-lw-j:nth-child(n+3) { display: none; }
  .k-me { padding-block: 4px; }
  .k-top { min-height: 32px; }
}

/* shina */
:root.rail #sidebar { padding-inline: 14px; }
:root.rail .k-plot, :root.rail .k-tx, :root.rail .k-nr, :root.rail .k-rec, :root.rail .k-lw-j { display: none !important; }
:root.rail .k-top { flex-direction: column; gap: 6px; }
:root.rail .k-top .k-collapse { display: grid !important; transform: scaleX(-1); }
/* nën 600px shiriti rri gjithmonë i ngushtë: butoni s'do të ndryshonte asgjë */
@media (max-width: 600px) { :root.rail .k-top .k-collapse { display: none !important; } }
:root.rail .k-ni { justify-content: center; padding: 0; }
:root.rail .k-nl { font-size: 0; padding: 0; height: 1px; background: var(--line); margin: 6px 10px; }
:root.rail .k-new { width: 48px; padding: 0; }
:root.rail .k-srch { width: 48px; padding: 0; justify-content: center; }
:root.rail .k-me { justify-content: center; padding: 8px 0; }
:root.rail .k-lw { padding: 8px 0; justify-items: center; }
:root.rail .k-ring { display: block; }

.k-tip { position: fixed; z-index: 90; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: #0f1319; color: #fff; font-size: 12.5px; font-weight: 500;
  box-shadow: 0 10px 24px -10px oklch(0 0 0 / .5); opacity: 0; transform: translateX(-4px); transition: opacity 140ms, transform 180ms var(--ease); white-space: nowrap; }
.k-tip.show { opacity: 1; transform: none; }

/* ---- koka e faqes ---- */
.topbar.k-head { height: auto; min-height: 0; border-bottom: 0; background: transparent; align-items: flex-end; gap: 14px; padding: 22px 24px 14px; flex-wrap: wrap; }
.k-head > .b-icon { align-self: center; }
.k-head-t { flex: 1 1 320px; min-width: 0; }
.k-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.k-crumb-ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: color-mix(in oklch, var(--action) 12%, transparent); color: var(--action-ink); }
.k-crumb-ic .ico { width: 14px; height: 14px; }
.k-head h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.k-head p { margin: 5px 0 0; color: var(--ink-2); font-size: 13.5px; }
.k-head-r { display: flex; gap: 8px; align-items: center; }
.k-head-r:empty { display: none; }
@media (max-height: 780px) { .topbar.k-head { padding-top: 16px; padding-bottom: 8px; } .k-crumb { margin-bottom: 4px; } }
@media (max-width: 860px) { .topbar.k-head { padding: 14px 14px 8px; } .k-head h1 { font-size: 21px; } .k-crumb { display: none; } }

/* ---- menutë ---- */
.pop.k-pop { min-width: 220px; animation: k-pop-in 200ms var(--ease); transform-origin: top left; }
.pop.k-pop-me { width: 270px; transform-origin: bottom left; }
@keyframes k-pop-in { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.k-pop .pop-item .ico { width: 16px; height: 16px; color: var(--ink-2); }
.k-pop-who { display: grid; gap: 2px; padding: 8px 9px 6px; }
.k-pop-who b { font-size: 13.5px; }
.k-pop-who small { color: var(--ink-3); font-size: 11.5px; }
.k-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 9px; font-size: 13px; color: var(--ink-2); }
.k-pop-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--paper-sink); border: 1px solid var(--line-soft); }
.k-pop-seg button { all: unset; cursor: pointer; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); transition: background 180ms var(--ease), color 180ms var(--ease); }
.k-pop-seg button:hover { color: var(--ink); }
.k-pop-seg button[aria-pressed="true"] { background: var(--paper-raise); color: var(--ink); box-shadow: 0 1px 2px oklch(0 0 0 / .1); }
.k-pop-seg button:focus-visible { outline: 2px solid var(--action); }
.k-danger, .k-danger .ico { color: var(--err) !important; }

/* ---- Ctrl+K ---- */
.k-pal-bg { position: fixed; inset: 0; z-index: 100; background: oklch(0.1 0.02 256 / .35); backdrop-filter: blur(3px); display: grid; place-items: start center; padding-top: 14vh;
  opacity: 0; pointer-events: none; transition: opacity 180ms; }
.k-pal-bg.show { opacity: 1; pointer-events: auto; }
.k-pal { width: min(620px, 92vw); border-radius: 16px; background: var(--paper-raise); border: 1px solid var(--line); box-shadow: 0 40px 80px -30px oklch(0 0 0 / .55); overflow: hidden;
  transform: translateY(-8px) scale(.98); transition: transform 260ms var(--ease); }
.k-pal-bg.show .k-pal { transform: none; }
.k-pal-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); }
.k-pal-in > .ico { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.k-pal-in input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; background: transparent; font: 16px var(--sans); color: var(--ink); }
.k-pal-list { max-height: min(360px, 52vh); overflow: auto; padding: 8px; }
.k-pal-g { font: 600 10.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 6px; }
.k-pal-i { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; cursor: pointer; color: var(--ink); }
.k-pal-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--paper-sink); color: var(--ink-2); flex: none; transition: background 160ms, color 160ms; }
.k-pal-ic .ico { width: 16px; height: 16px; }
.k-pal-i small { margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.k-pal-i.k-on { background: color-mix(in oklch, var(--action) 11%, transparent); }
.k-pal-i.k-on .k-pal-ic { background: var(--action-grad); color: #fff; }
.k-pal-i.k-on .k-pal-ic .ico .t { fill: #fff; opacity: .3; }
.k-pal-empty { padding: 26px 12px; text-align: center; color: var(--ink-3); font-size: 13px; }
.k-pal-f { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-3); }
.k-pal-f .k-kbd { margin-right: 3px; }

/* ==================================================================
   Faqet e punës: gjendja bosh e mjeteve (faqet.js). Klasat f-*.
   ================================================================== */
.page.f-bosh { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 28px; align-items: start; padding-top: 4px; }
.f-majtas { display: grid; gap: 12px; min-width: 0; }
.f-drop { position: relative; isolation: isolate; border: 1.5px dashed var(--line); border-radius: 16px; background: var(--paper-raise);
  min-height: clamp(360px, calc(100vh - 200px), 620px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; cursor: pointer;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.f-majtas > .panel + .f-drop, .f-majtas > :not(.f-drop):not(.f-shenim) ~ .f-drop { min-height: clamp(320px, calc(100vh - 290px), 560px); }
.f-drop:hover, .f-drop:focus-visible { border-color: color-mix(in oklch, var(--action) 45%, var(--line)); outline: none; }
.f-drop:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--action) 18%, transparent); }
.f-drop.over { border-color: var(--action); border-style: solid; box-shadow: 0 0 0 4px color-mix(in oklch, var(--action) 14%, transparent); transform: scale(1.005); }
.f-core { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 36px 28px; text-align: center; position: relative; }
.f-core::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 45% at 50% 44%, color-mix(in oklch, var(--action) 13%, transparent), transparent 70%),
              radial-gradient(circle, color-mix(in oklch, var(--ink) 10%, transparent) 1px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 85%); mask: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 85%); }
.f-drop.over .f-core::before { background: radial-gradient(ellipse 60% 50% at 50% 44%, color-mix(in oklch, var(--action) 24%, transparent), transparent 70%),
              radial-gradient(circle, color-mix(in oklch, var(--action) 30%, transparent) 1px, transparent 1.4px) 0 0 / 18px 18px; }
/* drita që ndjek miun: rrjeta ndizet në blu rreth kursorit (koordinatat i vendos v2.js) */
.f-core::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 420ms var(--ease);
  background: radial-gradient(circle var(--r, 150px) at var(--mx, 50%) var(--my, 44%), color-mix(in oklch, var(--action) 16%, transparent), transparent 70%),
              radial-gradient(circle, var(--action-ink) 1.2px, transparent 1.7px) 0 0 / 18px 18px;
  -webkit-mask: radial-gradient(circle var(--r, 150px) at var(--mx, 50%) var(--my, 44%), #000 20%, transparent 72%);
          mask: radial-gradient(circle var(--r, 150px) at var(--mx, 50%) var(--my, 44%), #000 20%, transparent 72%); }
.f-drop:hover .f-core::after, .f-drop.over .f-core::after { opacity: 1; }
.f-drop.over { --r: 250px; }
:root[data-motion="calm"] .f-core::after { display: none; }
@media (prefers-reduced-motion: reduce) { .f-core::after { display: none; } }
.f-up { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #fff; margin-bottom: 12px; background: var(--action-grad);
  box-shadow: 0 12px 30px -10px oklch(0.5 0.19 254 / .65), inset 0 1px 0 oklch(1 0 0 / .25); animation: f-bob 3.8s ease-in-out infinite; }
:root[data-motion="calm"] .f-up { animation: none; }
@keyframes f-bob { 50% { transform: translateY(-6px); } }
.f-up .ico { width: 26px; height: 26px; }
.f-up .ico .t { fill: #fff; opacity: .3; }
.f-drop:hover .f-up .arrow { animation: i-up 700ms var(--ease); }
@keyframes i-up { 40% { transform: translateY(-3px); } }
.f-core > b { font-size: 19px; letter-spacing: -0.01em; }
.f-meta { font-size: 13px; color: var(--ink-2); max-width: 48ch; line-height: 1.5; }
.f-zgjidh { margin-top: 14px; pointer-events: none; }
.f-ose { font-size: 12px; color: var(--ink-3); }
.f-hapat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-soft); }
.f-hapat li { padding: 14px 18px 16px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.f-hapat li + li { border-left: 1px solid var(--line-soft); }
.f-hapat em { display: block; font: 500 11px "IBM Plex Mono", monospace; color: var(--action-ink); font-style: normal; margin-bottom: 5px; }
.f-hapat strong { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }
.f-shenim { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); padding: 0 4px; }
.f-shenim svg { color: var(--ink-3); flex: none; }

.f-hist { min-width: 0; display: grid; align-content: start; }
.f-hist-h { display: flex; align-items: center; gap: 8px; padding: 4px 2px 12px; border-bottom: 1px solid var(--line); }
.f-hist-h b { font-size: 15px; font-weight: 600; }
.f-hist-n { margin-left: auto; font: 500 11.5px "IBM Plex Mono", monospace; color: var(--ink-3); }
.f-hj { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 8px; margin: 0 -8px;
  border-radius: 10px; border-bottom: 1px solid var(--line-soft); transition: background 200ms var(--ease); }
button.f-hj { cursor: pointer; }
button.f-hj:hover { background: var(--hover); }
button.f-hj:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.f-hj-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--kind);
  background: color-mix(in oklch, var(--kind) 13%, var(--paper-raise)); border: 1px solid color-mix(in oklch, var(--kind) 22%, transparent); }
.f-hj-ic .ico { width: 19px; height: 19px; }
.f-hj-t { display: grid; gap: 3px; min-width: 0; }
.f-hj-t > b { font-size: 13.5px; font-weight: 500; }
.f-hj-s { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.f-hj-t .k-bar { margin-top: 3px; }
.f-hj-w { display: flex; align-items: center; gap: 8px; font: 11.5px/1.35 "IBM Plex Mono", monospace; color: var(--ink-3); text-align: right; white-space: nowrap; }
.f-hj-w .client-dot { width: 18px; height: 18px; font-size: 8px; }
.f-st { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.f-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.f-ok { color: var(--ok); background: color-mix(in oklch, var(--ok) 12%, transparent); }
.f-err { color: var(--err); background: color-mix(in oklch, var(--err) 11%, transparent); }
.f-run { color: var(--action-ink); background: color-mix(in oklch, var(--action) 12%, transparent); }
.f-run::before { animation: k-blink 1.2s ease-in-out infinite; }
.f-mute { color: var(--ink-3); background: var(--paper-sink); }
.f-mute::before { display: none; }
.f-hist-bosh { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 40px 18px; color: var(--ink-2); font-size: 13px; }
.f-hist-bosh p { margin: 0; max-width: 34ch; line-height: 1.5; color: var(--ink-3); }
.f-hist-bosh-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-sink); color: var(--ink-3); margin-bottom: 4px; }
.f-hist-bosh-ic .ico { width: 20px; height: 20px; }
.f-hist .f-rack { margin-top: 8px; }

/* Titra: videot e titruara si rreshta të "Punëve të fundit", me poster */
.f-tj { grid-template-columns: 68px minmax(0, 1fr) auto; }
.f-tj-th { all: unset; box-sizing: border-box; position: relative; width: 68px; height: 42px; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: var(--paper-sink); border: 1px solid var(--line-soft); }
.f-tj-th:disabled { cursor: default; opacity: .6; }
.f-tj-th:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.f-tj-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-tj-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: oklch(0 0 0 / .28); opacity: 0; transition: opacity 180ms var(--ease); }
.f-tj-th:hover .f-tj-play, .f-tj-open .f-tj-play { opacity: 1; }
.f-tj-dur { position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px; font: 500 9.5px/1.5 "IBM Plex Mono", monospace; color: #fff; background: oklch(0 0 0 / .62); }
.f-tj-n { all: unset; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.f-tj-n:hover { color: var(--action-ink); text-decoration: underline; text-underline-offset: 2px; }
.f-tj-n:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 3px; }
.f-tj .f-hj-s { flex-wrap: wrap; row-gap: 3px; }
.f-tj-r { display: grid; justify-items: end; gap: 6px; }
.f-tj-ops { display: flex; gap: 2px; }
.f-tj-op { all: unset; box-sizing: border-box; cursor: pointer; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--ink-3); }
.f-tj-op:hover { background: var(--hover); color: var(--ink); }
.f-tj-op:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.f-tj-del:hover { color: var(--err); background: color-mix(in oklch, var(--err) 10%, transparent); }
.f-tj-op:disabled { cursor: default; opacity: .6; }
.f-tj-player { margin: 8px 0 4px; border-radius: 10px; overflow: hidden; background: #000; }
.f-tj-player video { display: block; width: 100%; max-height: 360px; }

@media (max-width: 1100px) { .page.f-bosh { grid-template-columns: minmax(0, 1fr); } .f-drop { min-height: 340px; } }
@media (max-width: 640px) { .f-hapat { grid-template-columns: 1fr; } .f-hapat li + li { border-left: 0; border-top: 1px solid var(--line-soft); } }

/* ==================================================================
   Administrimi (pronari.js): skeda, përdoruesit, llogaritë. Klasat a-*.
   ================================================================== */
.a-faqja { max-width: 1240px; display: grid; gap: 16px; padding-top: 4px; }
.f-seg { flex-wrap: wrap; }
.f-seg-n { font: 500 11px "IBM Plex Mono", monospace; color: var(--ink-3); margin-left: 3px; }
.a-tabs { display: flex; }

.a-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.a-kpi { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--paper-raise); border: 1px solid var(--line-soft); }
.a-kpi-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--action-ink); background: color-mix(in oklch, var(--action) 11%, transparent); }
.a-kpi-ic .ico { width: 19px; height: 19px; }
.a-kpi-t { display: grid; min-width: 0; }
.a-kpi-t small { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.a-kpi-t b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.a-kpi-t em { font-style: normal; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-kpi-warn .a-kpi-ic { color: var(--err); background: color-mix(in oklch, var(--err) 11%, transparent); }
.a-kpi-warn em { color: var(--err); }

.a-reveal { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in oklch, var(--ok) 8%, var(--paper-raise)); border: 1px solid color-mix(in oklch, var(--ok) 35%, var(--line)); }
.a-reveal-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ok); background: color-mix(in oklch, var(--ok) 14%, transparent); flex: none; }
.a-reveal-ic .ico { width: 18px; height: 18px; }
.a-reveal-t { display: grid; gap: 2px; flex: 1 1 300px; font-size: 13px; }
.a-reveal-t span { color: var(--ink-2); font-size: 12.5px; }
.a-pass { font: 600 16px "IBM Plex Mono", monospace; padding: 8px 12px; border-radius: 9px; background: var(--paper); border: 1px dashed var(--line); user-select: all; letter-spacing: .03em; }

.a-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.a-kerko { position: relative; display: flex; align-items: center; flex: 0 1 340px; }
.a-kerko .ico { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.a-kerko .input { width: 100%; padding-left: 34px; height: 36px; border-radius: 10px; }

.a-shto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: end; padding: 16px; margin-bottom: 14px; border-radius: 14px;
  background: var(--paper-raise); border: 1px solid color-mix(in oklch, var(--action) 30%, var(--line)); box-shadow: 0 0 0 4px color-mix(in oklch, var(--action) 7%, transparent); }
.a-shto label { display: grid; gap: 5px; font-size: 12px; font-weight: 500; color: var(--ink-2); min-width: 0; }
.a-shto .input { height: 36px; width: 100%; }
.a-shto-b { grid-column: 1 / -1; display: flex; gap: 8px; }
.a-shto-sh { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-3); }

.a-lista { display: grid; gap: 14px; }
.a-grup { border-radius: 14px; background: var(--paper-raise); border: 1px solid var(--line-soft); overflow: hidden; }
.a-grup > header { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: color-mix(in oklch, var(--paper-sink) 60%, transparent); }
.a-grup > header b { font-size: 14px; }
.a-grup > header span { font-size: 12px; color: var(--ink-3); }
.a-u { display: grid; grid-template-columns: 36px minmax(0, 1.6fr) 92px 128px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px;
  border-top: 1px solid var(--line-soft); transition: background 180ms var(--ease); }
.a-grup > header + .a-u { border-top: 0; }
.a-u:hover { background: var(--hover); }
.a-u-off .a-u-t, .a-u-off .a-av { opacity: .55; }
.a-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--sans); color: #fff; flex: none;
  background: linear-gradient(135deg, oklch(0.62 0.13 var(--h)), oklch(0.48 0.14 calc(var(--h) + 30))); box-shadow: inset 0 1px 0 oklch(1 0 0 / .25); }
.a-av-sq { border-radius: 10px; }
.a-u-t { display: grid; min-width: 0; gap: 1px; }
.a-u-t b { font-size: 13.5px; font-weight: 500; }
.a-u-t > span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-ti { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--action-ink); background: color-mix(in oklch, var(--action) 12%, transparent); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.a-rol { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; color: var(--ink-2); background: var(--paper-sink); border: 1px solid var(--line-soft); }
.a-rol-owner { color: oklch(0.5 0.13 75); background: color-mix(in oklch, oklch(0.75 0.14 80) 16%, transparent); border-color: transparent; }
.a-rol-admin { color: var(--action-ink); background: color-mix(in oklch, var(--action) 11%, transparent); border-color: transparent; }
.a-u-kur { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-u-b { display: flex; gap: 6px; justify-content: flex-end; }
.a-u-bosh { width: 64px; }
.a-mbyll:hover, .a-mbyll[data-konfirmo="1"] { color: var(--err); }
.a-mbyll[data-konfirmo="1"] { background: color-mix(in oklch, var(--err) 10%, transparent); }

.a-ll-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.a-ll-lista { display: grid; gap: 8px; }
.a-ll { border-radius: 14px; background: var(--paper-raise); border: 1px solid var(--line-soft); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.a-ll-on { border-color: color-mix(in oklch, var(--action) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--action) 10%, transparent); }
.a-ll-h { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; }
.a-ll-h:hover { background: var(--hover); }
.a-ll-h:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.a-ll-n { display: grid; justify-items: end; line-height: 1.1; }
.a-ll-n b { font-size: 16px; font-variant-numeric: tabular-nums; }
.a-ll-n small { font-size: 11px; color: var(--ink-3); }
.a-ll-q { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: 8px; align-items: center; padding: 0 14px 12px 62px; }
.a-q-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.a-q-bar i { display: block; height: 100%; border-radius: 3px; background: var(--action); transition: width 600ms var(--ease); }
.a-q-bar i.a-q-kuq { background: var(--err); }
.a-q-t { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-q-in { height: 30px; padding: 0 8px; width: 100%; }
.a-fat { padding: 12px 14px; display: grid; gap: 10px; }
.a-fat-h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.a-fat-p { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
.a-fat-f { display: grid; gap: 3px; min-width: 0; }
.a-fat-f small { font-size: 11px; color: var(--ink-3); }
.a-fat-f .input { height: 30px; padding: 0 8px; width: 100%; }
.a-fat-u { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.a-fat-tej b { color: var(--err); }
@media (max-width: 700px) { .a-fat-p { grid-template-columns: 1fr 1fr; } }
.a-dosja { min-width: 0; border-radius: 14px; background: var(--paper-raise); border: 1px solid var(--line-soft); padding: 4px 16px 16px; min-height: 240px; }
.a-dosja .acct-file { border: 0; margin: 0; padding: 0; background: none; }

.a-audit { gap: 0; border-radius: 14px; background: var(--paper-raise); border: 1px solid var(--line-soft); overflow: hidden; }
.a-au { display: grid; grid-template-columns: 124px 170px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 16px; font-size: 12.5px; border-top: 1px solid var(--line-soft); }
.a-au:first-child { border-top: 0; }
.a-au:hover { background: var(--hover); }
.a-au-kur, .a-au-ip { font-size: 11.5px; color: var(--ink-3); }
.a-au-v { font: 500 11.5px "IBM Plex Mono", monospace; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-au-kuq { color: var(--err); }
.a-trupi > .panel { margin: 0; }

@media (max-width: 1180px) {
  .a-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-u { grid-template-columns: 36px minmax(0, 1fr) 92px auto; }
  .a-u .f-st, .a-u-kur { display: none; }
  .a-ll-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .a-shto { grid-template-columns: minmax(0, 1fr); }
  .a-u { grid-template-columns: 36px minmax(0, 1fr); }
  .a-rol { display: none; }
  .a-u-b { grid-column: 2; justify-content: flex-start; }
  .a-au { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.a-faqja [hidden], .f-bosh [hidden] { display: none !important; }
[data-theme="dark"] .a-rol-owner { color: oklch(0.82 0.13 80); }

/* ==================================================================
   Clip Studio (klipet.js). Klasat c-*.
   ================================================================== */
.c-setup { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; padding-top: 4px; }
.c-majtas { display: grid; gap: 12px; min-width: 0; }
.c-emri { display: flex; align-items: center; gap: 8px; min-width: 0; }
.c-emri .title-edit { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; height: 36px; }
.c-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; color: var(--ink-2); background: var(--paper-sink); border: 1px solid var(--line-soft); white-space: nowrap; }
.c-stage { border-radius: 14px; overflow: hidden; max-height: calc(100vh - 210px); margin-inline: auto; width: 100%; }
.c-djathtas { min-width: 0; }
.c-card { display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: var(--paper-raise); border: 1px solid var(--line-soft); box-shadow: 0 1px 2px oklch(0 0 0 / .04); }
.c-card-h b { font-size: 16px; }
.c-card-h p { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.c-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-preset { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--paper);
  transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease); }
.c-preset b { font-size: 13.5px; }
.c-preset small { font-size: 11.5px; color: var(--ink-3); }
.c-preset:hover:not(:disabled) { border-color: color-mix(in oklch, var(--action) 40%, var(--line)); transform: translateY(-1px); }
.c-preset[aria-checked="true"] { border-color: var(--action); background: color-mix(in oklch, var(--action) 8%, var(--paper-raise)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--action) 12%, transparent); }
.c-preset[aria-checked="true"] small { color: var(--action-ink); }
.c-preset:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.c-preset:disabled { cursor: default; opacity: .6; }
.c-hap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-hap > span:first-child { display: grid; }
.c-hap b { font-size: 13px; font-weight: 500; }
.c-hap small { font-size: 11.5px; color: var(--ink-3); }
.c-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); overflow: hidden; flex: none; }
.c-step button { all: unset; cursor: pointer; width: 30px; height: 32px; display: grid; place-items: center; font-size: 16px; color: var(--ink-2); transition: background 150ms, color 150ms; }
.c-step button:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.c-step button:disabled { opacity: .35; cursor: default; }
.c-step button:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.c-step input { width: 40px; height: 32px; border: 0; border-radius: 0; text-align: center; font-weight: 600; background: transparent; -moz-appearance: textfield; padding: 0; }
.c-step input::-webkit-inner-spin-button, .c-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.c-card-f { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.c-gjej { width: 100%; justify-content: center; }
.c-link { all: unset; cursor: pointer; justify-self: center; font-size: 12.5px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.c-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.c-note { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); background: var(--paper-sink); }
.c-note svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.c-note .b { margin-top: 6px; }
.c-note-ok { background: color-mix(in oklch, var(--ok) 9%, var(--paper-raise)); } .c-note-ok svg { color: var(--ok); }
.c-note-err { background: color-mix(in oklch, var(--err) 9%, var(--paper-raise)); color: var(--ink); } .c-note-err svg { color: var(--err); }
.c-proc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.c-proc li { display: grid; justify-items: center; gap: 3px; text-align: center; font-size: 12px; color: var(--ink-3); }
.c-proc i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px "IBM Plex Mono", monospace; font-style: normal; background: var(--paper-sink); border: 1px solid var(--line); }
.c-proc i .ico { width: 14px; height: 14px; }
.c-proc b { color: var(--ink-2); font-weight: 500; }
.c-proc small { font-size: 11px; }
.c-proc .c-now i { background: var(--action-grad); color: #fff; border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklch, var(--action) 16%, transparent); animation: c-puls 1.6s ease-in-out infinite; }
.c-proc .c-now b { color: var(--ink); }
.c-proc .c-done i { background: var(--ok); color: #fff; border-color: transparent; }
@keyframes c-puls { 50% { box-shadow: 0 0 0 7px color-mix(in oklch, var(--action) 6%, transparent); } }
.c-proc-t { text-align: center; }
.c-proc-sh { margin: 0; font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.45; }
.c-manual { border-radius: 14px; background: var(--paper-raise); border: 1px solid var(--line-soft); padding: 12px; }

.c-rez { max-width: 1320px; display: grid; gap: 14px; padding-top: 4px; }
.c-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-bar-t { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.c-bar-t b { font-size: 16px; }
.c-bar-t small { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.c-harta { padding: 12px 14px 10px; border-radius: 14px; background: var(--paper-raise); border: 1px solid var(--line-soft); display: grid; gap: 6px; }
.c-harta-v { position: relative; height: 30px; border-radius: 8px; overflow: hidden;
  background: repeating-linear-gradient(90deg, color-mix(in oklch, var(--ink) 9%, transparent) 0 2px, transparent 2px 5px), var(--paper-sink); }
.c-bl { all: unset; box-sizing: border-box; position: absolute; top: 3px; bottom: 3px; min-width: 5px; border-radius: 4px; cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), opacity 180ms; }
.c-bl-youtube { background: var(--k-transcript, oklch(0.55 0.12 250)); }
.c-bl-reel { background: var(--k-reel, oklch(0.58 0.15 20)); }
.c-bl:hover { transform: scaleY(1.12); }
.c-bl.c-on { box-shadow: 0 0 0 2px var(--paper-raise), 0 0 0 4px var(--ink); z-index: 2; }
.c-bl:focus-visible { box-shadow: 0 0 0 2px var(--paper-raise), 0 0 0 4px var(--action); }
.c-harta-t { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); }
.c-harta-l { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-2); }
.c-harta-l span { display: inline-flex; align-items: center; gap: 6px; }
.c-harta-l i { position: static; width: 10px; height: 10px; border-radius: 3px; }

.c-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.c-lista { display: grid; gap: 10px; min-width: 0; }
.c-lista > .f-seg { justify-self: start; }
.c-rreshtat { display: grid; gap: 4px; }
.c-r { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px;
  border-radius: 12px; border: 1px solid transparent; transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.c-r:hover { background: var(--hover); }
.c-r:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.c-r.c-on { background: var(--paper-raise); border-color: color-mix(in oklch, var(--action) 45%, var(--line)); box-shadow: 0 6px 18px -12px oklch(0 0 0 / .35); }
.c-r-i { font-size: 11.5px; color: var(--ink-3); }
.c-r.c-on .c-r-i { color: var(--action-ink); font-weight: 600; }
.c-r-t { display: grid; gap: 2px; min-width: 0; }
.c-r-t b { font-size: 13px; font-weight: 500; }
.c-r-t small { font-size: 11px; color: var(--ink-3); }
.c-pik { --c: oklch(0.62 0.15 calc(25 + var(--v) * 1.2)); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(closest-side, var(--paper-raise) 76%, transparent 78%), conic-gradient(var(--c) calc(var(--v) * 1%), var(--line-soft) 0); }
.c-pik b { font: 600 11.5px var(--sans); }
.c-pik-lg { width: 54px; height: 54px; align-content: center; gap: 0; }
.c-pik-lg b { font-size: 16px; line-height: 1; }
.c-pik-lg small { font-size: 9.5px; color: var(--ink-3); }
.c-bosh { padding: 16px 12px; }
.c-kbd-sh { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 2px 4px; }
.c-sticky { position: sticky; top: 8px; }
.c-det { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: var(--paper-raise); border: 1px solid var(--line-soft); min-width: 0; }
.c-det-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.c-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.c-tag { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--paper-sink); color: var(--ink-2); }
.c-tag-youtube { color: #fff; background: var(--k-transcript, oklch(0.55 0.12 250)); }
.c-tag-reel { color: #fff; background: var(--k-reel, oklch(0.58 0.15 20)); }
.c-det-k { font-size: 12.5px; color: var(--ink-2); }
.c-det-v { border-radius: 12px; overflow: hidden; width: min(100%, calc(32vh * var(--ar, 1.7778))); justify-self: start; }
.c-det-b { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.c-sek { display: grid; gap: 8px; }
.c-sek-h { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.c-sek-h span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.c-sek-h .b { margin-left: auto; text-transform: none; letter-spacing: 0; }
.c-tituj { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.c-tituj li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 8px 8px 10px; border-radius: 10px; background: var(--paper-sink); font-size: 13.5px; line-height: 1.4; }
.c-tituj li small { font-size: 11px; color: var(--ink-3); }
.c-p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); max-width: 75ch; }
.c-art { position: relative; padding: 16px 18px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-soft); max-width: 72ch;
  font: 400 14px/1.7 var(--sans); color: var(--ink); }
.c-art h4 { margin: 0 0 10px; font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; }
.c-art p { margin: 0; white-space: pre-line; }
.c-art p + p { margin-top: 10px; }
.c-art-mb { max-height: 11.5em; overflow: hidden; }
.c-art-mb::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 4.5em; border-radius: 0 0 11px 11px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper) 85%); }
.c-art-more { justify-self: start; }
.c-sek-h .mono { font-size: 11px; }
.c-cit { font-style: italic; }
.c-asgje { background: var(--paper-raise); border: 1px solid var(--line-soft); border-radius: 16px; }
.c-asgje .b { margin-top: 8px; }

@media (max-width: 1100px) {
  .c-setup, .c-grid { grid-template-columns: minmax(0, 1fr); }
  .c-sticky { position: static; }
}
.c-hj { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; }
.c-hj-a { display: grid; justify-items: end; gap: 6px; }
.c-hj-b { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }

/* ==================================================================
   Foto (app.js pagePhoto) dhe pjesët e përbashkëta p-*, f-kat, f-zoom.
   ================================================================== */
.p-foto { max-width: 1320px; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 22px; align-items: start; padding-top: 4px; }
.p-majtas { display: grid; gap: 14px; min-width: 0; }
.p-kartel { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--paper-raise); border: 1px solid var(--line-soft); min-width: 0; }
.p-kartel > header { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.p-kartel > header b { font-size: 15px; }
.p-kartel > header small { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.p-nr { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font: 600 12px var(--sans); color: #fff; background: var(--action-grad); flex: none; }
.p-fusha { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.p-fusha > span { display: flex; justify-content: space-between; gap: 8px; }
.p-fusha em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.p-fusha .input { height: 40px; font-size: 14px; }
.p-fusha .textarea { font-size: 14px; line-height: 1.5; }
.p-rresh { display: grid; grid-template-columns: 110px minmax(0, 1fr) 56px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.p-rresh b { text-align: right; font-size: 12px; }
.p-rresh input[type=range] { width: 100%; accent-color: var(--action); }
.p-prerja-b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.p-kujdes { display: flex; align-items: center; gap: 7px; font-size: 12px; color: oklch(0.55 0.14 60); }
.p-kujdes i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.p-foto .cropper { border-radius: 10px; overflow: hidden; width: min(100%, calc(250px * var(--ar, 1.6))); margin-inline: auto; }
.p-djathtas { display: grid; gap: 12px; min-width: 0; }
.p-var-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-var-h > span:first-child { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.p-var-h small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-var-h b { font-size: 15px; }
.p-var-h small { font-size: 12px; color: var(--ink-3); }
.p-var-h .c-chip { max-width: 170px; display: inline-block; line-height: 22px; }
.p-variantet { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 14px; }
.p-var { margin: 0; display: grid; gap: 8px; min-width: 0; }
.p-var figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; }
.p-var-zoom { all: unset; display: block; cursor: zoom-in; border-radius: 12px; transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.p-var-zoom .pv { border-radius: 12px; }
.p-var-zoom:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px oklch(0 0 0 / .45); }
.p-var-zoom:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

.f-kat { display: flex; flex-wrap: wrap; gap: 6px; }
.f-kat-b { all: unset; cursor: pointer; font: 600 11px/1 var(--sans); letter-spacing: .04em; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); color: var(--ink-2); background: var(--paper);
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.f-kat-b:hover { border-color: color-mix(in oklch, var(--action) 40%, var(--line)); color: var(--ink); }
.f-kat-b[aria-pressed="true"] { background: var(--action-grad); color: #fff; border-color: transparent; }
.f-kat-b:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.f-zoom { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; cursor: zoom-out;
  background: oklch(0.1 0.02 256 / .6); backdrop-filter: blur(6px); opacity: 0; transition: opacity 200ms; }
.f-zoom.show { opacity: 1; }
.f-zoom-in { margin: 0; width: min(560px, calc((100vh - 110px) * .8), 92vw); transform: scale(.94); transition: transform 280ms var(--ease); }
.f-zoom.show .f-zoom-in { transform: none; }
.f-zoom-in .pv { border-radius: 14px; box-shadow: 0 40px 80px -30px oklch(0 0 0 / .7); }
.f-zoom-f { display: flex; gap: 12px; align-items: baseline; color: #fff; font-size: 13px; }
.f-zoom-f span { color: oklch(1 0 0 / .6); font-size: 12px; }

@media (max-width: 1100px) { .p-foto { grid-template-columns: minmax(0, 1fr); } }
.p-prerja { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; }
.p-prerja > header { grid-column: 1 / -1; }
.p-prerja .cropper { grid-row: 2 / span 3; width: calc(210px * var(--ar, 1.6)); max-width: 460px; margin: 0; }
.p-prerja .p-prerja-b, .p-prerja .p-kujdes { grid-column: 2; }
@media (max-width: 900px) { .p-prerja { grid-template-columns: minmax(0, 1fr); } .p-prerja .cropper, .p-prerja .p-prerja-b, .p-prerja .p-kujdes { grid-column: 1; grid-row: auto; } }

/* ==================================================================
   Reel Studio (app.js pageReel): burimi · teksti · parashikimi. r-*.
   ================================================================== */
.reel-layout.r-v2 { max-width: 1440px; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr) minmax(290px, 330px); gap: 16px; padding-top: 4px; }
.r-burimi, .r-mes { display: grid; gap: 14px; min-width: 0; align-content: start; }
.r-v2 .stage-host { border-radius: 16px; overflow: hidden; }
.r-v2 .tl2 { height: 62px; }
.r-prerja > header { flex-direction: column; align-items: flex-start; gap: 3px; }
.r-prerja > header small { margin-left: 0; }
.r-prerja .tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-mes .stack-s { display: grid; gap: 12px; }
.r-mes .field label { display: flex; justify-content: space-between; gap: 8px; }
.r-mes .opt-row { padding: 0 !important; }
.r-els > summary { list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.r-els > summary::-webkit-details-marker { display: none; }
.r-els > summary b { font-size: 15px; }
.r-els > summary small { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.r-els > summary::after { content: "›"; font-size: 18px; color: var(--ink-3); transition: transform 200ms var(--ease); }
.r-els[open] > summary::after { transform: rotate(90deg); }
.r-els .panel-body { padding: 0; }
.r-v2 .reel-side .panel { border-radius: 16px; }
.r-v2 .reel-side .rp { max-height: calc(100vh - 250px); }
@media (max-width: 1280px) {
  .reel-layout.r-v2 { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); }
  .r-mes { grid-column: 1; }
  .r-v2 .reel-side { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) { .reel-layout.r-v2 { grid-template-columns: minmax(0, 1fr); } .r-v2 .reel-side { grid-column: 1; grid-row: auto; position: static; } }
.r-v2 .stage-host > .panel-head { flex-wrap: nowrap; }
.r-v2 .stage-host > .panel-head .trunc { min-width: 0; flex: 1 1 auto; text-align: right; }
.r-v2 .transport { flex-wrap: nowrap; gap: 8px; }
.r-v2 .transport .seg button { padding-inline: 8px; }
.r-v2 .stage-host > .row-w { gap: 6px 10px !important; padding: 8px 10px !important; }
.r-v2 .stage-host .nudge button { padding: 0 5px; }
.r-v2 .stage-host .tcin { width: 64px; }
.r-v2 .stage-host .switch .t-meta { display: none; }
.r-prerja .tpl { padding: 8px; }
.r-prerja .tpl-name { font-size: 11.5px; }
.r-v2 .reel-help summary { white-space: nowrap; }
.r-prerja .tpl-grid { gap: 6px; }
.r-prerja .tpl { grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; text-align: left; }
.r-prerja .tpl-mini { width: 26px; }
.r-prerja .tpl-name { font-size: 11.5px; line-height: 1.25; }
.r-prerja .field { display: grid; gap: 4px; }

/* ==================================================================
   Titra, redaktori (titra.js): videoja majtas, lista e titrave djathtas. t-*.
   ================================================================== */
.titra-ed.t-v2 { display: grid; gap: 12px; padding-top: 4px; max-width: 1440px; }
.t-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t-bar-t { display: grid; gap: 2px; min-width: 0; flex: 0 1 380px; }
.t-bar-t b { font-size: 16px; }
.t-bar-t small { font-size: 12px; color: var(--ink-2); }
.t-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: 16px; align-items: start; }
.t-majtas { display: grid; gap: 0; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--paper-raise); border: 1px solid var(--line-soft); }
.t-majtas .titra-skena-host { padding: 12px 12px 8px; background: var(--well); }
.t-panel { padding: 12px 14px 14px; border-top: 1px solid var(--line-soft); }
.t-ndihme { padding: 14px; border-top: 1px solid var(--line-soft); }
.t-lista { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-width: 0; max-height: calc(100vh - 190px); position: sticky; top: 8px; }
.t-lista-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t-rreshtat { overflow-y: auto; border-radius: 16px; background: var(--paper-raise); border: 1px solid var(--line-soft); padding: 6px; display: grid; align-content: start; gap: 2px; scrollbar-width: thin; }
.t-rr { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; transition: background 150ms var(--ease); }
.t-rr[data-titra-rresht] { cursor: pointer; }
.t-rr[data-titra-rresht]:hover { background: var(--hover); }
.t-rr[data-titra-rresht]:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.t-rr.t-on { background: color-mix(in oklch, var(--action) 7%, var(--paper-raise)); border-color: color-mix(in oklch, var(--action) 40%, var(--line)); }
.t-rr-k { font-size: 11px; line-height: 1.45; color: var(--ink-3); }
.t-rr.t-on .t-rr-k { color: var(--action-ink); }
.t-rr-tx { font-size: 13.5px; line-height: 1.45; white-space: pre-line; color: var(--ink); }
.t-rr-tx em { color: var(--ink-3); }
.t-rr.t-flag .t-rr-k { color: oklch(0.6 0.14 60); }
.t-rr-ed { display: grid; gap: 6px; min-width: 0; }
.t-rr-ed textarea { width: 100%; resize: vertical; font-size: 14.5px; line-height: 1.4; min-height: 64px; }
@media (max-width: 1100px) { .t-grid { grid-template-columns: minmax(0, 1fr); } .t-lista { position: static; max-height: 60vh; } }

/* ==================================================================
   Bashko & Ngjit (faqet.js fBashko). Klasat s-*.
   ================================================================== */
.s-faqja { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; padding-top: 4px; }
.s-radha { min-height: calc(100vh - 190px); grid-template-rows: auto 1fr auto; }
.s-kartat { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; align-content: start; }
.s-k { margin: 0; border-radius: 14px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); cursor: grab;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), opacity 150ms, border-color 150ms; }
.s-k:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px oklch(0 0 0 / .4); }
.s-k.s-duke { opacity: .35; cursor: grabbing; }
.s-k.s-mbi { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in oklch, var(--action) 18%, transparent); }
.s-k-v { position: relative; aspect-ratio: 16 / 9; background: var(--well); }
.s-k-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.s-k-nr { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 600 12px var(--sans); color: #fff; background: var(--action-grad); box-shadow: 0 4px 10px -4px oklch(0 0 0 / .5); }
.s-k-d { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 5px; font-size: 11px; color: #fff; background: oklch(0 0 0 / .65); }
.s-k-d:empty { display: none; }
.s-k figcaption { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; font-size: 13px; font-weight: 500; min-width: 0; }
.s-k figcaption > .k-trunc { flex: 1; }
.s-k-b { display: flex; gap: 2px; flex: none; }
.s-shto { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 8px; min-height: 150px; border-radius: 14px;
  border: 1.5px dashed var(--line); color: var(--ink-2); font-size: 13px; font-weight: 500; transition: border-color 180ms, background 180ms; }
.s-shto .ico { width: 22px; height: 22px; color: var(--action-ink); }
.s-shto:hover, .s-shto.over { border-color: var(--action); background: color-mix(in oklch, var(--action) 5%, transparent); }
.s-shto:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.s-shirit { display: flex; gap: 2px; height: 26px; border-radius: 8px; overflow: hidden; }
.s-shirit i { display: grid; place-items: center; font: 600 11px var(--sans); font-style: normal; color: #fff; flex-basis: 0; transition: flex-grow 500ms var(--ease); }
.s-djathtas { display: grid; gap: 14px; min-width: 0; position: sticky; top: 8px; }
.s-fmt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.s-fmt-b { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 8px; padding: 14px 6px 10px; border-radius: 12px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 500;
  transition: border-color 160ms, background 160ms; }
.s-fmt-b i { height: 26px; border-radius: 4px; border: 2px solid var(--ink-2); background: var(--paper-sink); }
.s-fmt-b[aria-checked="true"] { border-color: var(--action); background: color-mix(in oklch, var(--action) 8%, var(--paper-raise)); color: var(--action-ink); }
.s-fmt-b[aria-checked="true"] i { border-color: var(--action); }
.s-fmt-b:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.s-num { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-num span { display: grid; padding: 10px 12px; border-radius: 11px; background: var(--paper-sink); }
.s-num b { font-size: 20px; font-variant-numeric: tabular-nums; }
.s-num small { font-size: 11.5px; color: var(--ink-3); }
.s-go { width: 100%; justify-content: center; }
.s-djathtas .panel .seg-row { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 1100px) { .s-faqja { grid-template-columns: minmax(0, 1fr); } .s-djathtas { position: static; } .s-radha { min-height: 0; } }

/* ==================================================================
   Live (app.js pageLive). Klasat l-*.
   ================================================================== */
.live-layout.l-v2 { max-width: 1400px; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; padding-top: 4px; align-items: start; }

/* ---- para regjistrimit ---- */
.l-hero { border: 1px solid var(--line-soft); border-radius: 16px; background: var(--paper-raise); overflow: hidden; display: grid; grid-template-rows: 1fr auto;
  min-height: clamp(360px, calc(100vh - 230px), 600px); }
.l-hero-c { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 40px 28px; text-align: center; }
.l-hero-c::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 45% at 50% 40%, color-mix(in oklch, var(--kind-live, var(--err)) 11%, transparent), transparent 70%),
              radial-gradient(circle, color-mix(in oklch, var(--ink) 10%, transparent) 1px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 85%); mask: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 85%); }
.l-hero-c > b { font-size: 19px; letter-spacing: -0.01em; }
.l-hero-c .b-lg { margin-top: 12px; }
.l-hero-c .c-note { margin-top: 10px; max-width: 52ch; text-align: left; }
.l-hero-ic { position: relative; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #fff; margin-bottom: 10px;
  background: linear-gradient(160deg, oklch(0.66 0.2 25), oklch(0.55 0.21 22)); box-shadow: 0 12px 30px -10px oklch(0.55 0.2 25 / .6), inset 0 1px 0 oklch(1 0 0 / .25); }
.l-hero-ic .ico { width: 26px; height: 26px; }
.l-hero-ic::after { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 2px solid oklch(0.62 0.2 25 / .35); animation: l-puls 2.4s var(--ease) infinite; }
:root[data-motion="calm"] .l-hero-ic::after { animation: none; }
@keyframes l-puls { 0% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } }
.l-burimi { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  background: var(--paper-sink); border: 1px solid var(--line-soft); }
.l-burimi .mono { color: var(--ink-3); font-size: 11.5px; min-width: 0; }
.l-burimi-d { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok) 20%, transparent); flex: none; }
.l-src { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--paper-raise); font-size: 13px; }

/* ---- në regjistrim ---- */
.l-studio { border: 1px solid var(--line-soft); border-radius: 16px; background: var(--paper-raise); overflow: hidden; }
.l-transport { gap: 10px; }
.l-tast { font-size: 12px; color: var(--well-ink-2, oklch(0.8 0 0)); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.l-tast .k-kbd { background: oklch(1 0 0 / .08); color: inherit; border-color: oklch(1 0 0 / .2); }
.l-veprime { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border-top: 1px solid var(--line-soft); }

/* ---- seancat ---- */
.l-djathtas { position: sticky; top: 8px; max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.l-titull { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 2px 8px; }
.l-titull b { font-size: 14px; }
.l-titull span { font-size: 11.5px; color: var(--ink-3); }
.l-ses { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--paper-raise); border: 1px solid var(--line-soft); min-width: 0; }
.l-ses-live { border-color: color-mix(in oklch, var(--err) 35%, var(--line-soft)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--err) 8%, transparent); }
.l-ses-h { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.l-ses-del { color: var(--ink-3); }
.l-ses-del:hover { color: var(--err); }
.l-ses-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); background: var(--paper-sink); border: 1px solid var(--line-soft); }
.l-ses-ic .ico { width: 17px; height: 17px; }
.l-ses-live .l-ses-ic { color: var(--err); background: color-mix(in oklch, var(--err) 10%, var(--paper-raise)); border-color: color-mix(in oklch, var(--err) 25%, transparent); }
.l-ses-t { display: grid; gap: 4px; min-width: 0; }
.l-ses-n { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; border-radius: 6px; }
.l-ses-n b { font-size: 14px; font-weight: 600; min-width: 0; }
.l-ses-n svg { flex: none; color: var(--ink-3); opacity: 0; transition: opacity 160ms var(--ease); }
.l-ses-n:hover svg, .l-ses-n:focus-visible svg { opacity: 1; }
.l-ses-n:hover b { color: var(--action-ink); }
.l-ses-n:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.l-ses-in { height: 30px; font-size: 13.5px; font-weight: 600; padding: 0 8px; }
.l-ses-m { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.l-ses-m .mono { font-size: 11.5px; }
.l-ses-bosh { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.l-ses-prit { justify-self: start; }
.l-shenim { margin: 0; text-align: center; font-size: 12px; color: var(--ink-3); }

/* ---- kartat e klipeve ---- */
.l-klipet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.l-klipet-1 { grid-template-columns: minmax(0, 1fr); }
.l-klip { display: grid; gap: 8px; padding: 8px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); min-width: 0;
  box-shadow: 0 1px 2px oklch(0 0 0 / .06); transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.l-klip:hover { border-color: color-mix(in oklch, var(--action) 35%, var(--line)); box-shadow: 0 6px 16px -8px oklch(0 0 0 / .25); }
.l-klip-v { position: relative; }
.l-klip .clipcut-vid { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 8px; background: var(--well); object-fit: cover; }
.l-klip-d { position: absolute; right: 6px; top: 6px; padding: 1px 6px; border-radius: 5px; font: 500 10.5px/1.5 "IBM Plex Mono", monospace; color: #fff; background: oklch(0 0 0 / .62); pointer-events: none; }
.l-klip-t { display: grid; gap: 2px; min-width: 0; padding: 0 2px; }
.l-klip-t b { font-size: 12.5px; font-weight: 600; }
.l-klip-t .mono { font-size: 11px; color: var(--ink-3); }
.l-klip-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.l-op { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 8px;
  font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: var(--paper-sink); text-align: center; }
.l-op .ico { width: 15px; height: 15px; }
.l-op:hover { background: color-mix(in oklch, var(--action) 12%, var(--paper-sink)); color: var(--action-ink); }
.l-op:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }

/* ---- dritarja "Prit nga transmetimi" ---- */
.l-cw { width: min(1180px, 100%); }
.l-cw .win-head { gap: 10px; }
.l-cw-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--action-ink); background: color-mix(in oklch, var(--action) 12%, var(--paper-raise)); flex: none; }
.l-cw-ic .ico { width: 16px; height: 16px; }
.l-cw-t { display: grid; gap: 1px; min-width: 0; }
.l-cw-t b { font-size: 14.5px; }
.l-cw-t span { font-size: 12px; color: var(--ink-3); }
.l-cw-vid { display: block; width: 100%; max-height: 42vh; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 10px; }
.l-ov { position: relative; height: 26px; margin-top: 12px; border-radius: 7px; background: var(--paper-sink); border: 1px solid var(--line-soft); cursor: pointer; touch-action: none; user-select: none; overflow: hidden; }
.l-ov-cut { position: absolute; top: 0; bottom: 0; background: color-mix(in oklch, var(--ok) 35%, transparent); }
.l-ov-sel { position: absolute; top: 4px; bottom: 4px; border-radius: 2px; background: var(--mark); }
.l-ov-win { position: absolute; top: 0; bottom: 0; border-radius: 6px; border: 2px solid var(--action); background: color-mix(in oklch, var(--action) 12%, transparent); cursor: grab; min-width: 8px; box-sizing: border-box; }
.l-ov.drag .l-ov-win { cursor: grabbing; background: color-mix(in oklch, var(--action) 20%, transparent); }
.l-ov-e { position: absolute; top: 50%; transform: translateY(-50%); font: 500 10px "IBM Plex Mono", monospace; color: var(--ink-3); pointer-events: none; }
.l-ov-e.l { left: 6px; } .l-ov-e.r { right: 6px; }
.l-cw-tl { margin-top: 8px; border-radius: 10px; }
.l-cw-tl .tl2-sel { cursor: grab; }
.l-cw-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.l-cw-sh > .mono { font-size: 11px; color: var(--ink-3); }
.l-cw-zoom button[aria-pressed="true"] { background: var(--paper-raise); color: var(--ink); box-shadow: 0 1px 2px oklch(0 0 0 / .1), 0 4px 10px -4px oklch(0 0 0 / .15); }
[data-theme="dark"] .l-cw-zoom button[aria-pressed="true"] { background: #1c2332; }
.l-cw-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.l-cw-row .b b.mono { font-weight: 600; margin-left: 2px; }
.l-cw-row .k-kbd { font-size: 10px; padding: 0 5px; }
.l-cw .clipwork { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.l-cw .clipwork-side { max-height: calc(100vh - 170px); }

@media (max-width: 1100px) { .live-layout.l-v2 { grid-template-columns: minmax(0, 1fr); } .l-djathtas { position: static; max-height: none; } }
@media (max-width: 520px) { .l-klipet { grid-template-columns: minmax(0, 1fr); } .l-cw-zoom button { padding: 5px 8px; } }

/* ==================================================================
   Paneli (paneli.js). Klasat pn-*.
   ================================================================== */
.pn-faqja { max-width: 1320px; display: grid; gap: 22px; padding-top: 24px; }
.pn { display: grid; gap: 16px; }
.pn-h h2 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.pn-h p { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.pn-mjetet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pn-m { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px;
  background: var(--paper-raise); border: 1px solid var(--line-soft); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.pn-m:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--action) 35%, var(--line)); box-shadow: 0 14px 30px -20px oklch(0 0 0 / .45); }
.pn-m:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.pn-m-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--action-ink); background: color-mix(in oklch, var(--action) 11%, transparent); }
.pn-m-ic .ico { width: 20px; height: 20px; }
.pn-m b { display: block; font-size: 14px; }
.pn-m small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pn-m-sh { width: 16px; height: 16px; color: var(--ink-3); transition: transform 200ms var(--ease), color 200ms; }
.pn-m:hover .pn-m-sh { transform: translateX(3px); color: var(--action-ink); }
.pn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 16px; background: var(--paper-raise); border: 1px solid var(--line-soft); overflow: hidden; min-height: 150px; }
.pn-kpi { display: grid; gap: 4px; padding: 16px 18px 12px; min-width: 0; align-content: start; }
.pn-kpi + .pn-kpi { border-left: 1px solid var(--line-soft); }
.pn-kpi small { font: 600 10.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.pn-kpi b { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pn-kpi em { font: 11px "IBM Plex Mono", monospace; font-style: normal; color: var(--ink-3); }
.pn-d { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.pn-d-mire { color: var(--ok); background: color-mix(in oklch, var(--ok) 12%, transparent); }
.pn-d-keq { color: var(--err); background: color-mix(in oklch, var(--err) 10%, transparent); }
.pn-d-0 { color: var(--ink-3); background: var(--paper-sink); }
.pn-spark { width: 100%; height: 40px; margin-top: 4px; }
.pn-duke > * { min-height: 120px; background: linear-gradient(90deg, var(--paper-sink), var(--paper-raise), var(--paper-sink)) 0 0 / 200% 100%; animation: pn-shimer 1.4s linear infinite; }
@keyframes pn-shimer { to { background-position: -200% 0; } }
.pn-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.pn-akt, .pn-np { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--paper-raise); border: 1px solid var(--line-soft); min-width: 0; }
.pn-akt.pn-duke { min-height: 300px; }
.pn-akt > header, .pn-np > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-akt > header b, .pn-np > header b { font-size: 15px; margin-right: auto; }
.pn-np > header span { font-size: 11.5px; color: var(--ink-3); }
.pn-akt > p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.pn-leg { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-leg span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: var(--paper-sink); font-size: 12px; }
.pn-leg i { width: 9px; height: 9px; border-radius: 3px; }
.pn-leg b { font-weight: 500; font-size: 11px; color: var(--ink-2); }
.pn-graf svg { width: 100%; height: 190px; display: block; }
.pn-bazë { stroke: var(--line); }
.pn-hit { fill: transparent; }
.pn-kol:hover .pn-hit { fill: color-mix(in oklch, var(--ink) 5%, transparent); }
.pn-bosht { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.pn-tab-w { max-height: 240px; overflow: auto; border-radius: 10px; border: 1px solid var(--line-soft); }
.pn-tab { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.pn-tab th, .pn-tab td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.pn-tab th:first-child, .pn-tab td:first-child { text-align: left; }
.pn-tab thead th { position: sticky; top: 0; background: var(--paper-raise); font-weight: 600; color: var(--ink-2); }
.pn-np-r { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.pn-np-t { display: grid; gap: 4px; min-width: 0; }
.pn-np-t b { font-size: 13px; font-weight: 500; }
.pn-np-t small { font-size: 11.5px; color: var(--ink-3); }
.pn-poshte { padding-top: 6px; border-top: 1px solid var(--line); }
.pn-h2 { margin: 0; font-size: 18px; font-weight: 600; }
@media (max-width: 1180px) { .pn-mjetet, .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-kpi:nth-child(3) { border-left: 0; } .pn-kpi:nth-child(n+3) { border-top: 1px solid var(--line-soft); } .pn-grid { grid-template-columns: minmax(0, 1fr); } }

/* Koka e faqes lëviz bashkë me faqen: .main lëviz, #content rritet sa përmbajtja. */
.main { overflow-y: auto; overflow-x: hidden; }
.main > .content { flex: 1 0 auto; overflow: visible; min-height: auto; }
.k-head-pn { padding-bottom: 0; }
.k-head-pn .k-head-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.k-head-pn:not(:has(.k-head-r > *)) { padding: 0; min-height: 0; height: 0; }

/* ==================================================================
   Reels (faqet.js fReels). Klasat rl-*.
   ================================================================== */
.rl-faqja { max-width: 1440px; display: grid; gap: 16px; padding-top: 4px; }
.rl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rl-faqja [hidden] { display: none !important; }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px 14px; }
.rl-k { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 8px; align-content: start; min-width: 0; }
.rl-v { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--well);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.rl-v video, .rl-v .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-k:hover .rl-v { transform: translateY(-3px); box-shadow: 0 18px 34px -18px oklch(0 0 0 / .5); }
.rl-k:focus-visible .rl-v { outline: 2px solid var(--action); outline-offset: 3px; }
.rl-on .rl-v { box-shadow: 0 0 0 3px var(--action); }
.rl-kat { position: absolute; top: 8px; left: 8px; padding: 3px 7px; border-radius: 6px; font: 700 10px/1.2 var(--sans); letter-spacing: .05em; color: #fff; background: oklch(0 0 0 / .6); backdrop-filter: blur(4px); }
.rl-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 5px; font-size: 11px; color: #fff; background: oklch(0 0 0 / .65); }
.rl-bar { }
.rl-v .rl-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 2px; background: oklch(1 0 0 / .25); overflow: hidden; }
.rl-v .rl-bar i { position: absolute; inset: 0; width: 40%; background: #fff; animation: rl-ecen 1.4s ease-in-out infinite; }
@keyframes rl-ecen { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.rl-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: oklch(0 0 0 / .45);
  backdrop-filter: blur(4px); opacity: 0; transform: scale(.85); transition: opacity 200ms, transform 240ms var(--ease); }
.rl-k:hover .rl-play { opacity: 1; transform: none; }
.rl-k:disabled { cursor: progress; }
.rl-k:disabled .rl-play { display: none; }
.rl-t { font-size: 13px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-s { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.rl-sirtar-bg { position: fixed; inset: 0; z-index: 60; background: oklch(0.1 0.02 256 / .25); animation: rl-fade 200ms; }
.rl-sirtar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(420px, 94vw); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 14px; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--paper-raise); border-left: 1px solid var(--line); box-shadow: -30px 0 60px -30px oklch(0 0 0 / .45); animation: rl-hyr 280ms var(--ease); }
@keyframes rl-hyr { from { transform: translateX(40px); opacity: 0; } }
@keyframes rl-fade { from { opacity: 0; } }
.rl-sirtar > header { display: flex; align-items: center; gap: 10px; }
.rl-sirtar > header b { font-size: 15px; flex: 1; }
.rl-luaj { position: relative; min-height: 0; display: grid; place-items: center; border-radius: 14px; overflow: hidden; background: var(--well); }
.rl-luaj video { max-width: 100%; max-height: 100%; aspect-ratio: 9 / 16; display: block; }
.rl-fakte { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 12.5px; }
.rl-fakte dt { color: var(--ink-3); }
.rl-fakte dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rl-veprime { display: flex; gap: 8px; flex-wrap: wrap; }
.rl-fshi[data-konfirmo="1"], .rl-fshi:hover { color: var(--err); }
.rl-sirtar { grid-template-columns: minmax(0, 1fr); box-sizing: border-box; }
.rl-sirtar > header b { min-width: 0; }
.rl-luaj .frame { position: absolute; inset: 0; }

/* ==================================================================
   Transkripti (app.js pageTranscript). Klasat tx-*.
   ================================================================== */
.tx-v2 { max-width: 1440px; display: grid; grid-template-columns: 250px minmax(0, 1fr) 340px; gap: 16px; align-items: start; padding-top: 4px; }
.tx-hist, .tx-mes, .tx-djathtas { border-radius: 16px; background: var(--paper-raise); border: 1px solid var(--line-soft); min-width: 0; }
.tx-hist { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100vh - 150px); position: sticky; top: 8px; overflow: hidden; }
.tx-hist > header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--line-soft); }
.tx-hist > header b { font-size: 14px; }
.tx-hist > header .mono { font-size: 11.5px; color: var(--ink-3); margin-right: auto; }
.tx-hist-l { overflow-y: auto; padding: 6px; display: grid; gap: 2px; align-content: start; scrollbar-width: thin; }
.tx-h-r { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; position: relative; transition: background 150ms; }
.tx-h-r:hover { background: var(--hover); }
.tx-h-r[aria-pressed="true"] { background: color-mix(in oklch, var(--action) 9%, transparent); }
.tx-h-r[aria-pressed="true"]::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--action); }
.tx-h-r:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.tx-h-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--k-transcript); background: color-mix(in oklch, var(--k-transcript) 12%, transparent); }
.tx-h-ic .ico { width: 16px; height: 16px; }
.tx-h-t { display: grid; gap: 1px; min-width: 0; }
.tx-h-t b { font-size: 12.5px; font-weight: 500; }
.tx-h-t small { font-size: 10.5px; color: var(--ink-3); }
.tx-mes { display: grid; align-content: start; }
.tx-mes-h { padding: 14px 16px 4px; }
.tx-mes-h > span { display: grid; gap: 5px; min-width: 0; }
.tx-mes-h b { font-size: 16px; }
.tx-mes-h small { display: flex; gap: 6px; align-items: center; }
.tx-mes .panel-body { padding: 10px 16px 16px; }
.tx-mes .turn { border-radius: 10px; transition: background 200ms; cursor: pointer; }
.tx-mes .turn:hover { background: var(--hover); }
.tx-mes .turn.tx-now { background: color-mix(in oklch, var(--action) 9%, transparent); box-shadow: inset 3px 0 0 var(--action); }
.tx-djathtas { display: grid; gap: 12px; padding: 12px; position: sticky; top: 8px; }
.tx-luaj { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--well); }
.tx-luaj video, .tx-luaj .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tx-djathtas .f-seg { justify-self: start; }
.tx-tab-b { max-height: calc(100vh - 470px); min-height: 120px; overflow-y: auto; scrollbar-width: thin; }
.tx-tab-b .panel-body { padding: 0; }
.tx-exp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tx-exp .b { justify-content: center; }
.tx-klipe { justify-self: center; }
@media (max-width: 1240px) { .tx-v2 { grid-template-columns: 220px minmax(0, 1fr); } .tx-djathtas { grid-column: 1 / -1; position: static; } .tx-tab-b { max-height: none; } }
@media (max-width: 860px) { .tx-v2 { grid-template-columns: minmax(0, 1fr); } .tx-hist { position: static; max-height: 280px; } }
.tx-mes .search { max-width: none !important; }
.tx-mes .search { flex: 3 1 auto; }

/* ==================================================================
   Nata si videoja e Atlas-it (2026-09-30): toka #000208 me dritë blu të
   butë, panele me gradient, kufi i hollë, hije e thellë dhe dritë blu
   anash; titujt me gradient nga e bardha te grija. Faqosja, ikonat, butonat
   dhe lëvizja nuk ndryshojnë. :where() e mban specifikën sa një atribut, që
   gjendjet e komponentëve (:hover, .over, zgjedhja) të fitojnë mbi të.
   ================================================================== */
:root[data-theme="dark"] {
  --surface: linear-gradient(180deg, #121826, #0b0f18);
  --surface-shadow: inset 0 1px 0 oklch(1 0 0 / .04), 0 24px 48px -28px oklch(0 0 0 / .9), 0 0 44px -26px oklch(0.55 0.19 254 / .5);
  --title: linear-gradient(180deg, #fff 30%, #9aa4b5);
}
[data-theme="dark"] .main {
  background: radial-gradient(1100px 620px at 8% -14%, oklch(0.55 0.19 254 / .15), transparent 70%),
              radial-gradient(900px 640px at 108% 112%, oklch(0.55 0.19 254 / .09), transparent 72%), var(--paper);
}
[data-theme="dark"] :where(.panel, .c-card, .c-det, .c-harta, .c-manual, .c-asgje, .p-kartel, .t-majtas, .t-rreshtat,
  .l-hero, .l-studio, .l-src, .l-ses, .pn-m, .pn-kpis, .pn-akt, .pn-np, .tx-hist, .tx-mes, .tx-djathtas,
  .a-kpi, .a-grup, .a-ll, .a-dosja, .a-audit, .f-drop, .k-lw) {
  background: var(--surface); box-shadow: var(--surface-shadow);
}
/* dritaret dhe menutë mbajnë hijen e tyre */
[data-theme="dark"] :where(.win, .pop, .k-pal, .rl-sirtar) { background: var(--surface); }
[data-theme="dark"] .a-ll-on { box-shadow: 0 0 0 3px color-mix(in oklch, var(--action) 10%, transparent), var(--surface-shadow); }
[data-theme="dark"] .l-ses-live { box-shadow: 0 0 0 3px color-mix(in oklch, var(--err) 8%, transparent), var(--surface-shadow); }
/* padding: pa të, background-clip:text pret bishtat e ç, j, g dhe pikat e Ë, É;
   margin-i negativ e kthen faqosjen si ishte */
[data-theme="dark"] :is(.k-head h1, .pn-h h2, .pn-kpi b, .a-kpi-t b) {
  background: var(--title); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-block: .1em; margin-block: -.1em;
}

/* Transkripti live nën veprimet e Live */
.l-tx { max-height: 180px; overflow-y: auto; margin: 0 12px 12px; padding: 10px 12px;
  border-radius: 10px; background: var(--well); color: oklch(0.94 0 0); font-size: 14px; line-height: 1.5; }
.l-tx .t-meta { color: oklch(0.72 0 0); }
.l-tx p { margin: 0 0 6px; }
.l-tx .mono { margin-right: 6px; }
.l-tx-sw { display: flex; gap: 8px; align-items: center; margin: 0 12px 8px; font-size: 14px; cursor: pointer; }

/* Pushimet mbi shiritin e Live: vija diagonale, nën prerjen dhe kokën e leximit */
.mcut-ads { position: absolute; inset: 0; pointer-events: none; }
.mcut-ad { position: absolute; top: 0; bottom: 0; z-index: 1;
  background: repeating-linear-gradient(135deg, oklch(1 0 0 / 0.10) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 -3px 0 oklch(0.70 0.02 250 / 0.7); }