/* Knaqu IRC — dizajni i knaqu.net (Sora + Manrope, krem, vjollcë, e kuqe) mbi IRC */
:root{
  --bg: oklch(98.3% .004 90); --surface:#fff; --surface-2: oklch(96.5% .006 90); --surface-3: oklch(93.5% .008 90);
  --border: oklch(91% .007 90); --text: oklch(23% .012 280); --text-muted: oklch(52% .014 280); --text-faint: oklch(68% .012 280);
  --accent: oklch(62% .19 300); --accent-dark: oklch(50% .18 300); --accent-soft: oklch(94% .03 300);
  --coral: oklch(68% .19 35); --online: oklch(72% .17 145); --danger: oklch(60% .2 25); --danger-soft: oklch(94% .045 25);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
.sora{font-family:Sora,Manrope,system-ui,sans-serif}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,textarea{font:inherit;color:inherit}
.hide-sb{scrollbar-width:none}.hide-sb::-webkit-scrollbar{display:none}
#app{height:100%}

/* ───── hyrja ───── */
.auth{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px}
.auth .logo{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--coral));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 24px rgba(139,63,217,.25)}
.auth h1{font-family:Sora,sans-serif;font-size:26px;font-weight:800;margin:18px 0 6px;letter-spacing:-.3px}
.auth .sub{color:var(--text-muted);margin:0 0 26px;font-size:15px}
.card{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:30px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:14px;padding:5px;margin-bottom:22px;font-weight:700;font-size:15px}
.tabs button{flex:1;border-radius:10px;padding:11px 0;color:var(--text-faint);transition:.15s}
.tabs button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:var(--text-faint)}
.field input{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:14px 14px;font-size:15px;font-weight:600;color:var(--text);outline:none}
.field input:focus{border-color:var(--accent)}
.hint{font-size:12.5px;color:var(--text-faint);line-height:1.5;margin:0}
.note{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;color:var(--text-muted)}
.err{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:700;margin-bottom:14px}
.btn{background:var(--accent);color:#fff;border-radius:12px;padding:14px;font-weight:800;font-size:15px;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:opacity .15s}
.btn:hover{opacity:.92}.btn[disabled]{opacity:.6;cursor:default}
.online-now{display:flex;align-items:center;gap:8px;margin-top:22px;color:var(--text-muted);font-size:15px}
.online-now b{color:var(--text)}.online-now i{width:9px;height:9px;border-radius:50%;background:var(--online);display:block}

/* ───── ndarja e chat-it ───── */
.chat{height:100%;display:flex;flex-direction:column;background:var(--bg)}
.marquee{height:32px;flex:none;background:var(--accent);color:#fff;overflow:hidden;display:flex;align-items:center}
.marquee .track{display:flex;width:max-content;animation:mq 22s linear infinite}
.marquee span{white-space:nowrap;padding-right:64px;font:700 12.5px Sora,sans-serif;letter-spacing:.3px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.body{flex:1;min-height:0;display:flex;position:relative}

.rail{width:220px;flex:none;background:var(--surface);display:flex;flex-direction:column;border-right:1px solid var(--border)}
.rail .top{height:56px;flex:none;background:var(--danger);display:flex;align-items:center;justify-content:flex-end;padding:0 14px}
.rail .top button{width:28px;height:28px;border-radius:8px;color:#ffffffcc;display:none}
.rail .list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.room{display:flex;align-items:center;gap:8px;height:36px;border-radius:10px;padding:0 10px;font:700 13px Sora,sans-serif;background:var(--accent-soft);color:var(--accent-dark);text-align:left;position:relative}
.room:hover{background:color-mix(in oklch,var(--accent) 20%,transparent)}
.room.on{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.room .ic{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex:none}
.room .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room .un{min-width:18px;height:18px;border-radius:9px;background:var(--danger);color:#fff;font-size:10.5px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.rail .sec{font:700 10px Sora,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);padding:12px 10px 4px}
.rail .add{margin:0 12px 12px;height:36px;border-radius:10px;background:var(--surface-2);color:var(--text-muted);font-weight:800;font-size:13px;display:flex;align-items:center;gap:8px;padding:0 10px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.header{flex:none;background:var(--danger);display:flex;align-items:center;gap:12px;padding:12px 20px;overflow-x:auto;color:#fff}
.header .rn{font:700 16px Sora,sans-serif}
.header .tp{color:#ffffffe6;font:600 13.5px Manrope,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;max-width:52vw;padding-left:12px;margin-left:4px;border-left:1px solid #ffffff55}
.header .dot{width:7px;height:7px;border-radius:50%;background:#fff6;flex:none}.header .dot.on{background:#4ade80}
.header .sp{flex:1}
.ib{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--danger);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.15);position:relative}
.ib:hover{background:#ffffffe6}
.ib.plain{background:transparent;color:#fff;box-shadow:none;border-radius:10px;width:32px;height:32px}.ib.plain:hover{background:#ffffff26}
.ib .bd{position:absolute;right:0;top:0;min-width:16px;height:16px;border-radius:8px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}
.pill{height:32px;border-radius:16px;background:#fff;color:var(--danger);padding:0 14px;font:800 12px Manrope,sans-serif;display:flex;align-items:center}

.cols{flex:1;min-height:0;display:flex}
.center{flex:1;min-width:0;display:flex;flex-direction:column}
.msgs{flex:1;overflow-y:auto;padding:16px 8px 8px}
.msgs .in{display:flex;flex-direction:column;gap:9px}
.empty{text-align:center;color:var(--text-faint);font-size:14px;padding:30px 0}
.row{display:flex;align-items:flex-start;gap:10px}
.row .txt{flex:1;min-width:0;font-size:13px;line-height:1.4}
.row .nm{font:700 13px Sora,sans-serif;cursor:pointer}.row .nm:hover{text-decoration:underline}
.row .sep{color:var(--text-faint)}
.row .body-t{white-space:pre-wrap;word-break:break-word}
.row .tm{font-size:11px;color:var(--text-faint);flex:none;padding-top:2px}
.row a{color:var(--accent-dark);text-decoration:underline;word-break:break-all}
.sys{display:flex;align-items:center;gap:6px;padding:0 4px;font-size:13px;font-style:italic}
.sys.join{color:oklch(55% .17 145)}.sys.leave{color:var(--danger)}
.info{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:8px 12px;font-size:13px}
.info .i{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none}
.info .t{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}.info b{font-weight:800}
.tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;background:var(--accent-soft);color:var(--accent-dark);font:800 9.5px/1.5 Manrope,sans-serif;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle}

/* avatari */
.av{position:relative;flex:none;border-radius:50%}
.av .im{width:100%;height:100%;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Sora,sans-serif;font-weight:700;background-size:cover;background-position:center}
.av .ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--rc);box-shadow:0 0 8px var(--rg);pointer-events:none}
.av .bg{position:absolute;right:-3px;bottom:-3px;width:44%;height:44%;min-width:11px;min-height:11px;border-radius:50%;background:var(--rc);border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.av .bg svg{width:62%;height:62%}

/* kompozimi */
.composer{flex:none;border-top:1px solid var(--border);background:var(--surface);padding:12px 8px;position:relative}
.cbox{border:1px solid var(--border);border-radius:16px;background:color-mix(in oklch,var(--surface-2) 40%,transparent)}
.tool{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--border);padding:6px 12px}
.tb{width:30px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.tb:hover{background:var(--surface-3)}
.vr{width:1px;height:16px;background:var(--border);margin:0 4px}
.cdot{width:16px;height:16px;border-radius:50%;background:conic-gradient(from 180deg,#dc2626,#2563eb,#16a34a,#dc2626)}
.sendrow{display:flex;align-items:center;gap:8px;padding:8px 12px}
.sendrow input{flex:1;background:transparent;border:0;outline:none;padding:6px 4px;font-size:14px}
.send{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.send[disabled]{opacity:.5}
.pop{position:absolute;bottom:100%;left:12px;margin-bottom:6px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:30;display:grid;gap:4px}
.pop.emoji{grid-template-columns:repeat(8,1fr);width:290px;max-height:210px;overflow-y:auto}
.pop.emoji button{font-size:20px;line-height:1.2;border-radius:8px;padding:3px}.pop.emoji button:hover{background:var(--surface-2)}
.pop.colors{grid-template-columns:repeat(8,1fr);width:240px}
.pop.colors button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}

/* radio (compakt) */
.radio{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0;flex-shrink:1}
.radio .pl{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.radio .meta{min-width:0;width:130px}
.radio .st{display:flex;align-items:center;gap:5px;font:700 10.5px Sora,sans-serif;color:var(--accent-dark);letter-spacing:.4px}
.radio .st i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.5}.radio.on .st i{opacity:1}
.radio .tk{overflow:hidden;font:700 12px Sora,sans-serif;color:var(--text)}
.radio .tk div{display:flex;width:max-content}.radio .tk span{white-space:nowrap;padding-right:60px}
.radio.on .tk div{animation:mq var(--tkd,10s) linear infinite}
.radio .vol{display:flex;align-items:center;gap:6px}
.radio input[type=range]{width:64px;accent-color:var(--accent);height:4px}

/* paneli i përdoruesve */
.users{width:264px;flex:none;background:#f7f7f5;border-left:1px solid #dcdcd8;display:flex;flex-direction:column;--surface-2:#eeeeec;--text-faint:#8a8a85}
.users .h{padding:12px 18px 8px;font:700 11.5px Sora,sans-serif;letter-spacing:.5px;color:#8a8a85;text-transform:uppercase}
.users .srch{margin:0 18px 12px;background:#eeeeec;border-radius:10px;padding:9px 12px;display:flex;align-items:center;gap:8px}
.users .srch input{flex:1;border:0;background:transparent;outline:none;font-size:13px;min-width:0}
.users .ul{flex:1;min-height:0;overflow-y:auto;padding:0 10px 10px}
.gh{padding:12px 8px 4px;font:700 10px Sora,sans-serif;letter-spacing:.6px;text-transform:uppercase}.gh:first-child{padding-top:4px}
.u{display:flex;align-items:center;gap:8px;border-radius:10px;padding:6px 8px;cursor:pointer}.u:hover{background:#eeeeec}
.u .n{font:700 12.5px Sora,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me{flex:none;display:flex;align-items:center;gap:10px;border-top:1px solid #dcdcd8;background:#f7f7f5;padding:14px 18px}
.me .nn{flex:1;min-width:0}.me .nn b{display:block;font:700 12px Sora,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .nn span{font-size:11px;color:oklch(60% .17 145)}
.me .out{height:32px;border-radius:16px;border:1px solid var(--danger);color:var(--danger);padding:0 12px;font:800 12px Manrope,sans-serif;display:flex;align-items:center;gap:6px}
.me .out:hover{background:var(--danger);color:#fff}

/* dritare dhe njoftime */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:12px}
.modal h2{margin:0;font:800 16px Sora,sans-serif}
.modal .row2{display:flex;gap:8px}.modal .row2 button{flex:1}
.btn2{background:var(--surface-2);color:var(--text-muted);border-radius:12px;padding:12px;font-weight:800;font-size:14px}
.pmenu{position:fixed;z-index:70;width:260px;max-width:calc(100vw - 16px);background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.pmenu .t{padding:9px 12px;border-bottom:1px solid var(--border);font-size:12px;font-weight:800;color:var(--text-faint)}
.pmenu .it{display:flex;align-items:center;gap:10px;padding:9px 12px;width:100%;text-align:left}.pmenu .it:hover{background:var(--surface-2)}
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:var(--text);color:#fff;border-radius:12px;padding:10px 16px;font-size:13px;font-weight:700;z-index:90;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.banner{background:var(--danger-soft);color:var(--danger);font-weight:700;font-size:13px;padding:8px 14px;display:flex;align-items:center;gap:10px}
.banner button{background:var(--danger);color:#fff;border-radius:8px;padding:5px 12px;font-weight:800}

/* mobile */
.mob-only{display:none}
@media (max-width:760px){
  .mob-only{display:flex}
  .rail{position:absolute;inset:0 auto 0 0;z-index:40}.rail .top button{display:flex;align-items:center;justify-content:center}
  .users{position:absolute;inset:0 0 0 auto;z-index:40;box-shadow:-8px 0 24px rgba(0,0,0,.12)}
  .scrim{position:absolute;inset:0;background:rgba(0,0,0,.3);z-index:35}
  .header{padding:10px 12px;gap:8px}.header .tp{display:none}
  .radio .meta{width:90px}.radio .vol{display:none}
  .card{padding:22px}
}
.hidden{display:none!important}

.avbtn{flex:none;display:block;line-height:0}
.row .av{display:block}

/* thirrje me zë/kamerë */
.callui{position:fixed;right:16px;bottom:16px;width:340px;max-width:calc(100vw - 24px);height:430px;max-height:calc(100vh - 24px);background:#171320;border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.4);z-index:90;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.callui .cv-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.callui .cv-av{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:20px}
.callui .cv-local{position:absolute;right:12px;top:12px;width:96px;height:128px;object-fit:cover;border-radius:12px;border:2px solid #fff6;background:#000;transform:scaleX(-1)}
.callui .cv-st{position:absolute;left:0;right:0;top:14px;text-align:center;font:700 13px Sora,sans-serif;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none}
.callui .cv-bar{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:16px}
.cb{width:52px;height:52px;border-radius:50%;background:#ffffff26;color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.cb:hover{background:#ffffff40}.cb.off{background:#fff;color:#171320}
.cb.end{background:var(--danger)}
@media (max-width:760px){.callui{inset:0;width:auto;height:auto;max-width:none;max-height:none;right:0;bottom:0;border-radius:0}}

/* ndërruesi Knaqu / Kiwi */
.switch{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px;margin:0 0 20px}
.switch button{padding:8px 18px;border-radius:999px;font:700 13px Sora,sans-serif;color:var(--text-muted)}
.switch button.on{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.switch button:not(.on):hover{background:var(--surface-3)}

/* shënimi i veçorive te hyrja */
.auth .sub{margin-bottom:14px}
.feat{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 16px;max-width:480px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font:700 12px Manrope,sans-serif;color:var(--text-muted)}
.chip i{display:flex;color:var(--accent)}.chip svg{width:15px;height:15px}

/* faqja e ndarë: majtas Kiwi, djathtas Knaqu */
.split{min-height:100%;display:flex}
.split>.auth{flex:1 1 55%;min-height:100vh}
.pane-kiwi{flex:1 1 45%;background:linear-gradient(150deg,#1d1030,#4c1d95 60%,#7e22ce);color:#fff;display:flex;align-items:center;justify-content:center;padding:32px 24px;min-height:100vh}
.pane-kiwi .kp{max-width:340px;display:flex;flex-direction:column;gap:14px}
.pane-kiwi .kic{width:76px;height:76px;border-radius:22px;background:#ffffff1f;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff33}
.pane-kiwi h2{margin:6px 0 0;font:800 28px Sora,sans-serif}
.pane-kiwi p{margin:0;color:#ffffffcc;line-height:1.55;font-size:15px}
.pane-kiwi ul{margin:0;padding:0 0 0 18px;color:#ffffffcc;font-size:14px;line-height:1.9}
.pane-kiwi .kbtn{margin-top:10px;background:#fff;color:#4c1d95;border-radius:12px;padding:14px 20px;font:800 15px Manrope,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.25);text-align:center}
.pane-kiwi .kbtn:hover{background:#f3e8ff}
@media (max-width:860px){
  .split{flex-direction:column}
  .split>.auth,.pane-kiwi{min-height:auto;flex:none}
  .pane-kiwi{padding:26px 20px}.pane-kiwi .kp{max-width:480px;align-items:flex-start}.pane-kiwi ul{display:none}
}

/* thirrja — pamja e Knaqu: kartë e bardhë, trup krem, butona të rrumbullakët */
.callui{position:fixed;right:16px;bottom:16px;left:auto;top:auto;width:340px;max-width:calc(100vw - 24px);height:520px;max-height:calc(100vh - 32px);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.18);z-index:90;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--text)}
.callui.in-call{position:relative;right:auto;bottom:auto;height:auto;min-height:260px}
.ov .callui{position:relative;right:auto;bottom:auto}
.callui .cv-h{flex:none;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);padding:12px 16px;background:var(--surface)}
.callui .cv-n{font:700 14px Sora,sans-serif}.callui .sp{flex:1}
.callui .cv-x{color:var(--text-faint);font-size:15px}.callui .cv-x:hover{color:var(--text)}
.callui .cv-b{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);padding:16px}
.callui .cv-remote{width:100%;flex:1;min-height:0;border-radius:12px;background:#000;object-fit:cover;position:static;height:auto}
.callui .cv-local{position:absolute;right:8px;bottom:66px;width:112px;height:80px;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:#000;transform:scaleX(-1)}
.callui .cv-av{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.callui .cv-st{position:static;font:700 14px Manrope,sans-serif;color:var(--text);text-shadow:none;pointer-events:auto}
.callui .cv-ctl{display:flex;gap:12px;justify-content:center;flex:none;padding-top:4px}
.callui .cb{width:40px;height:40px;border-radius:50%;background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;backdrop-filter:none}
.callui .cb:hover{background:var(--surface-3)}.callui .cb.off{background:var(--danger);color:#fff}.callui .cb.end{background:var(--danger);color:#fff}
.callui .cv-btns{display:flex;gap:12px}
.btn-ok,.btn-no{border-radius:10px;padding:9px 18px;font:800 12px Manrope,sans-serif;color:#fff}
.btn-ok{background:var(--online)}.btn-no{background:var(--danger)}
@media (max-width:760px){.callui{left:12px;right:12px;bottom:12px;width:auto;max-width:none;height:min(520px,calc(100vh - 24px))}.callui.in-call{left:auto;right:auto;width:100%}}

.callui .cv-local{top:auto!important;bottom:70px!important}

/* stilet e nofkave — kopje e CSS-it të Knaqu */
@keyframes nick-gradient-move {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}
@keyframes nick-rainbow-band-shift {
  100% {
    background-position: 100vw 0px;
  }
}
@keyframes nick-rainbow-band-pulse {
  100% {
    transform: scale(1.1);
  }
}
@keyframes nick-electric-flicker {
  0%, 19%, 21%, 23%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow: 1px 1px 2px black, 0 0 25px #00e5ff, 0 0 5px #00e5ff;
  }
  20%, 22%, 55% {
    opacity: 0.4;
    text-shadow: none;
  }
}
@keyframes nick-bounce-move {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes nick-wiggle-move {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(4deg);
  }
}
.nm[data-kn-ns="e-bute"],.u .n[data-kn-ns="e-bute"],.me b[data-kn-ns="e-bute"],.nsprev[data-kn-ns="e-bute"] {
  background-image: linear-gradient(
    90deg,
    var(--accent),
    var(--coral),
    oklch(75% 0.15 85),
    var(--accent-dark),
    var(--accent)
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nick-gradient-move 4s linear infinite;
}
.nm[data-kn-ns="ylber"],.u .n[data-kn-ns="ylber"],.me b[data-kn-ns="ylber"],.nsprev[data-kn-ns="ylber"] {
  background-image: linear-gradient(
    90deg,
    oklch(65% 0.25 25),
    oklch(80% 0.2 90),
    oklch(70% 0.2 145),
    oklch(65% 0.18 230),
    oklch(60% 0.22 290),
    oklch(65% 0.24 335),
    oklch(65% 0.25 25)
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nick-gradient-move 3s linear infinite;
}
.nm[data-kn-ns="blu-neon"],.u .n[data-kn-ns="blu-neon"],.me b[data-kn-ns="blu-neon"],.nsprev[data-kn-ns="blu-neon"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #3b82f6, 0 0 5px #3b82f6;
  font-weight: bold;
}
.nm[data-kn-ns="ari"],.u .n[data-kn-ns="ari"],.me b[data-kn-ns="ari"],.nsprev[data-kn-ns="ari"] {
  color: black;
  text-shadow: 1px 1px 2px black, 0 0 25px gold, 0 0 5px white;
  font-weight: bold;
}
.nm[data-kn-ns="vjolle"],.u .n[data-kn-ns="vjolle"],.me b[data-kn-ns="vjolle"],.nsprev[data-kn-ns="vjolle"] {
  color: purple;
  text-shadow: 1px 1px 2px #cc0099, 0 0 25px #cc0099, 0 0 5px #cc0099;
  font-weight: bold;
}
.nm[data-kn-ns="jeshile"],.u .n[data-kn-ns="jeshile"],.me b[data-kn-ns="jeshile"],.nsprev[data-kn-ns="jeshile"] {
  color: #42f442;
  text-shadow: 0 0 8px #ff6fff;
  font-weight: bold;
}
.nm[data-kn-ns="portokalli"],.u .n[data-kn-ns="portokalli"],.me b[data-kn-ns="portokalli"],.nsprev[data-kn-ns="portokalli"] {
  color: #fc6600;
  text-shadow: 1px 1px 2px #fc6600, 0 0 25px #fc6600, 0 0 5px #fc6600;
  font-weight: bold;
}
.nm[data-kn-ns="roze"],.u .n[data-kn-ns="roze"],.me b[data-kn-ns="roze"],.nsprev[data-kn-ns="roze"] {
  color: white;
  text-shadow: 1px 1px 2px #fc0fc0, 0 0 25px #fc0fc0, 0 0 5px #fc0fc0;
  font-weight: bold;
}
.nm[data-kn-ns="mint"],.u .n[data-kn-ns="mint"],.me b[data-kn-ns="mint"],.nsprev[data-kn-ns="mint"] {
  color: white;
  text-shadow: 1px 1px 2px #42f442, 0 0 25px #42f442, 0 0 5px #42f442;
  font-weight: bold;
}
.nm[data-kn-ns="vjolle-erret"],.u .n[data-kn-ns="vjolle-erret"],.me b[data-kn-ns="vjolle-erret"],.nsprev[data-kn-ns="vjolle-erret"] {
  color: white;
  text-shadow: 1px 1px 2px #8f00ff, 0 0 25px #8f00ff, 0 0 5px #8f00ff;
  font-weight: bold;
}
.nm[data-kn-ns="diell"],.u .n[data-kn-ns="diell"],.me b[data-kn-ns="diell"],.nsprev[data-kn-ns="diell"] {
  color: white;
  text-shadow: 1px 1px 2px #fce205, 0 0 25px #fce205, 0 0 5px #fce205;
  font-weight: bold;
}
.nm[data-kn-ns="akull"],.u .n[data-kn-ns="akull"],.me b[data-kn-ns="akull"],.nsprev[data-kn-ns="akull"] {
  color: blue;
  text-shadow: -1px -1px 0 #0ff, 1px -1px 0 #0ff, -1px 1px 0 #0ff, 1px 1px 0 #fff;
  font-weight: bold;
}
.nm[data-kn-ns="drenica"],.u .n[data-kn-ns="drenica"],.me b[data-kn-ns="drenica"],.nsprev[data-kn-ns="drenica"] {
  color: gold;
  text-shadow: 1px 1px 2px black, 0 0 25px #ff0000, 0 0 5px #e82929;
  font-weight: bold;
}
.nm[data-kn-ns="kuqe-zjarrte"],.u .n[data-kn-ns="kuqe-zjarrte"],.me b[data-kn-ns="kuqe-zjarrte"],.nsprev[data-kn-ns="kuqe-zjarrte"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #ff1f1f, 0 0 5px #ff1f1f;
  font-weight: bold;
}
.nm[data-kn-ns="bruz"],.u .n[data-kn-ns="bruz"],.me b[data-kn-ns="bruz"],.nsprev[data-kn-ns="bruz"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #14ffe5, 0 0 5px #14ffe5;
  font-weight: bold;
}
.nm[data-kn-ns="argjend"],.u .n[data-kn-ns="argjend"],.me b[data-kn-ns="argjend"],.nsprev[data-kn-ns="argjend"] {
  color: #e8e8e8;
  text-shadow: 1px 1px 2px black, 0 0 20px #ffffff, 0 0 5px #cfcfcf;
  font-weight: bold;
}
.nm[data-kn-ns="neon-gjelber"],.u .n[data-kn-ns="neon-gjelber"],.me b[data-kn-ns="neon-gjelber"],.nsprev[data-kn-ns="neon-gjelber"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #aef42a, 0 0 5px #aef42a;
  font-weight: bold;
}
.nm[data-kn-ns="fuksia"],.u .n[data-kn-ns="fuksia"],.me b[data-kn-ns="fuksia"],.nsprev[data-kn-ns="fuksia"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #ff14c8, 0 0 5px #ff14c8;
  font-weight: bold;
}
.nm[data-kn-ns="baker"],.u .n[data-kn-ns="baker"],.me b[data-kn-ns="baker"],.nsprev[data-kn-ns="baker"] {
  color: #ffd9a8;
  text-shadow: 1px 1px 2px black, 0 0 25px #cf7a34, 0 0 5px #cf7a34;
  font-weight: bold;
}
.nm[data-kn-ns="gjak-i-kuq"],.u .n[data-kn-ns="gjak-i-kuq"],.me b[data-kn-ns="gjak-i-kuq"],.nsprev[data-kn-ns="gjak-i-kuq"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #990000, 0 0 5px #dc143c;
  font-weight: bold;
}
.nm[data-kn-ns="qiellore"],.u .n[data-kn-ns="qiellore"],.me b[data-kn-ns="qiellore"],.nsprev[data-kn-ns="qiellore"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #22d3ee, 0 0 5px #22d3ee;
  font-weight: bold;
}
.nm[data-kn-ns="smerald"],.u .n[data-kn-ns="smerald"],.me b[data-kn-ns="smerald"],.nsprev[data-kn-ns="smerald"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #10b981, 0 0 5px #10b981;
  font-weight: bold;
}
.nm[data-kn-ns="mbreterore"],.u .n[data-kn-ns="mbreterore"],.me b[data-kn-ns="mbreterore"],.nsprev[data-kn-ns="mbreterore"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #4338ca, 0 0 5px #7c3aed;
  font-weight: bold;
}
.nm[data-kn-ns="pjeshke"],.u .n[data-kn-ns="pjeshke"],.me b[data-kn-ns="pjeshke"],.nsprev[data-kn-ns="pjeshke"] {
  color: #7a2e00;
  text-shadow: 1px 1px 2px white, 0 0 20px #ffb37a, 0 0 5px #ffb37a;
  font-weight: bold;
}
.nm[data-kn-ns="livando"],.u .n[data-kn-ns="livando"],.me b[data-kn-ns="livando"],.nsprev[data-kn-ns="livando"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #c4b5fd, 0 0 5px #a78bfa;
  font-weight: bold;
}
.nm[data-kn-ns="neon-i-verdhe"],.u .n[data-kn-ns="neon-i-verdhe"],.me b[data-kn-ns="neon-i-verdhe"],.nsprev[data-kn-ns="neon-i-verdhe"] {
  color: black;
  text-shadow: 0 0 25px #f4ff00, 0 0 5px #f4ff00;
  font-weight: bold;
}
.nm[data-kn-ns="oqean-i-thelle"],.u .n[data-kn-ns="oqean-i-thelle"],.me b[data-kn-ns="oqean-i-thelle"],.nsprev[data-kn-ns="oqean-i-thelle"] {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #0369a1, 0 0 5px #0ea5e9;
  font-weight: bold;
}
.nm[data-kn-ns="ar-roze"],.u .n[data-kn-ns="ar-roze"],.me b[data-kn-ns="ar-roze"],.nsprev[data-kn-ns="ar-roze"] {
  color: #4a1d1d;
  text-shadow: 1px 1px 2px white, 0 0 20px #f4c2c2, 0 0 5px #e0aaaa;
  font-weight: bold;
}
.nm[data-kn-ns="platin"],.u .n[data-kn-ns="platin"],.me b[data-kn-ns="platin"],.nsprev[data-kn-ns="platin"] {
  color: #1f2937;
  text-shadow: 1px 1px 2px white, 0 0 20px #d1d5db, 0 0 5px #e5e7eb;
  font-weight: bold;
}
.nm[data-kn-ns="elektrik"],.u .n[data-kn-ns="elektrik"],.me b[data-kn-ns="elektrik"],.nsprev[data-kn-ns="elektrik"] {
  color: white;
  font-weight: bold;
  animation: nick-electric-flicker 1.8s infinite;
}
.nm[data-kn-ns="galaktike"],.u .n[data-kn-ns="galaktike"],.me b[data-kn-ns="galaktike"],.nsprev[data-kn-ns="galaktike"] {
  font-weight: bold;
  color: #fff;
  background: linear-gradient(
    40deg,
    hsl(210, 80%, 55%) 10%,
    hsl(210, 80%, 55%) 25%,
    hsl(255, 80%, 55%) 25%,
    hsl(255, 80%, 55%) 40%,
    hsl(280, 80%, 55%) 40%,
    hsl(280, 80%, 55%) 55%,
    hsl(320, 80%, 55%) 55%,
    hsl(320, 80%, 55%) 70%,
    hsl(255, 80%, 55%) 70%,
    hsl(255, 80%, 55%) 85%,
    hsl(210, 80%, 55%) 85%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    10s nick-rainbow-band-shift linear infinite,
    3s nick-rainbow-band-pulse ease alternate infinite;
}
.nm[data-kn-ns="kercim"],.u .n[data-kn-ns="kercim"],.me b[data-kn-ns="kercim"],.nsprev[data-kn-ns="kercim"] {
  display: inline-block;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 20px #ff6b35, 0 0 5px #ff6b35;
  font-weight: bold;
  animation: nick-bounce-move 1.2s ease-in-out infinite;
}
.nm[data-kn-ns="lekundje"],.u .n[data-kn-ns="lekundje"],.me b[data-kn-ns="lekundje"],.nsprev[data-kn-ns="lekundje"] {
  display: inline-block;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 20px #00e5ff, 0 0 5px #00e5ff;
  font-weight: bold;
  animation: nick-wiggle-move 0.6s ease-in-out infinite;
}
.nm[data-kn-ns="ylber-shirita"],.u .n[data-kn-ns="ylber-shirita"],.me b[data-kn-ns="ylber-shirita"],.nsprev[data-kn-ns="ylber-shirita"] {
  
  color: #fff;
  background: linear-gradient(
    40deg,
    hsl(0, 75%, 50%) 10%,
    hsl(20, 75%, 50%) 10%,
    hsl(20, 75%, 50%) 25%,
    hsl(50, 75%, 50%) 25%,
    hsl(50, 75%, 50%) 40%,
    hsl(130, 75%, 50%) 40%,
    hsl(130, 75%, 50%) 55%,
    hsl(200, 75%, 50%) 55%,
    hsl(200, 75%, 50%) 70%,
    hsl(260, 75%, 50%) 70%,
    hsl(260, 75%, 50%) 85%,
    hsl(0, 75%, 50%) 85%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  animation:
    10s nick-rainbow-band-shift linear infinite,
    3s nick-rainbow-band-pulse ease alternate infinite;
}
.nsprev{display:inline-block}
.nssec{font:700 11px Manrope,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted)}
.nsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nsopt{min-height:40px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);cursor:pointer;padding:6px 4px;font:700 13px Manrope,sans-serif;color:var(--text);text-align:center}
.nsopt:hover{border-color:var(--accent)}.nsopt.sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklch,var(--accent) 25%,transparent)}

/* stile shtesë + slogani (nga Knaqu) */
@keyframes nick-float-move {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(-2deg);
  }
}
@keyframes nick-shake-move {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}
@keyframes nick-typewriter-type {
  0%, 5% {
    max-width: 0;
  }
  70%, 100% {
    max-width: calc(var(--nick-char-count, 10) * 1ch);
  }
}
@keyframes nick-typewriter-caret {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: currentColor;
  }
}
@keyframes slogan-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.nm[data-kn-ns="notim"],.u .n[data-kn-ns="notim"],.me b[data-kn-ns="notim"],.nsprev[data-kn-ns="notim"] {
  display: inline-block;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 20px #a78bfa, 0 0 5px #a78bfa;
  font-weight: bold;
  animation: nick-float-move 2.4s ease-in-out infinite;
}
.nm[data-kn-ns="dridhje"],.u .n[data-kn-ns="dridhje"],.me b[data-kn-ns="dridhje"],.nsprev[data-kn-ns="dridhje"] {
  display: inline-block;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 20px #ff1f1f, 0 0 5px #ff1f1f;
  font-weight: bold;
  animation: nick-shake-move 0.4s ease-in-out infinite;
}
.nm[data-kn-ns="makine-shkrimi"],.u .n[data-kn-ns="makine-shkrimi"],.me b[data-kn-ns="makine-shkrimi"],.nsprev[data-kn-ns="makine-shkrimi"] {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  border-right: 2px solid currentColor;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 15px #22d3ee, 0 0 5px #22d3ee;
  font-weight: bold;
  /* animation (steps count depends on the nick's length) is set inline per
     instance via nickStyle() in nick-style.ts, not fixed here. */
}
.slogan-animated {
  display: inline-block;
  background-image: linear-gradient(
    90deg,
    var(--coral),
    var(--accent),
    oklch(75% 0.15 85),
    var(--coral)
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    nick-gradient-move 3s linear infinite,
    slogan-pulse 1.4s ease-in-out infinite;
}
.sl{display:block;font-size:11px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.sl.slogan-animated{display:inline-block;font-weight:700;max-width:100%}
.nw{display:flex;flex-direction:column;min-width:0;flex:1;align-items:flex-start}
.me .nn .sl:not(.slogan-animated){color:var(--text-faint)}
.sin{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:12px;font:500 14px Manrope,sans-serif;color:var(--text);width:100%}
.nicklbl{display:flex;align-items:center;gap:6px;flex:none;max-width:42%;padding:6px 6px 6px 4px;border-radius:10px;font:700 13px Sora,sans-serif;color:var(--text)}
.nicklbl:hover{background:var(--surface-2)}
.nicklbl b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nicklbl .dd{width:8px;height:8px;border-radius:50%;background:#b9b9b4;flex:none}
.nicklbl .dd.on{background:var(--accent)}
.nicklbl .car{font-size:10px;color:var(--text-faint)}
.cmlist{display:flex;flex-direction:column;gap:4px}
.cmrow{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);cursor:pointer}
.cmrow input{margin-top:3px;accent-color:var(--accent)}
.cmrow b{display:block;font:700 13px Manrope,sans-serif}
.cmrow small{display:block;color:var(--text-muted);font-size:11.5px;margin-top:1px}
textarea.sin{min-height:76px;flex:none;resize:vertical}