/* style.css — Shkurto (dark premium: #0b0f1a + vjollcë #7c5cff + teal #00d4a6)
   Fonti Manrope vetë-hostohet (variabël 200–800) — zero varësi të jashtme. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#0b0f1a;--card:#131a2a;--card2:#182034;--glass:rgba(255,255,255,.04);--glass-border:rgba(255,255,255,.09);--text:#e8ecf5;--muted:#a5aec2;--accent:#7c5cff;--accent-light:#a99cff;--accent2:#00d4a6;--danger:#ff5c7a;--border:#232c44;--radius:18px}
*{box-sizing:border-box}
::selection{background:rgba(124,92,255,.45);color:#fff}
html{scrollbar-width:thin;scrollbar-color:#2c3852 transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2c3852;border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;position:relative;overflow-x:hidden}
body::before{content:'';position:absolute;inset:0 0 auto 0;height:640px;pointer-events:none;background:radial-gradient(560px 340px at 18% -60px,rgba(124,92,255,.28),transparent 65%),radial-gradient(520px 320px at 84% -40px,rgba(0,212,166,.16),transparent 65%),radial-gradient(700px 420px at 50% -180px,rgba(29,42,82,.55),transparent 70%)}
.topbar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;max-width:960px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;font-size:1.4rem;font-weight:800;letter-spacing:.2px}
.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#5a3ee0);color:#fff;box-shadow:0 6px 18px rgba(124,92,255,.35)}
.brand-icon svg{width:21px;height:21px}
.tagline{color:var(--muted);font-size:.95rem;font-weight:600}
.container{position:relative;max-width:960px;margin:0 auto;padding:10px 20px 40px}
.hero{text-align:center;padding:34px 10px 12px}
.hero h1{font-size:clamp(2.5rem,6vw,3.6rem);line-height:1.14;padding-bottom:.13em;font-weight:800;letter-spacing:-.5px;margin:0 0 12px;background:linear-gradient(92deg,var(--accent) 5%,var(--accent-light) 45%,var(--accent2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:var(--muted);max-width:560px;margin:0 auto;font-size:1.05rem;font-weight:500}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0}
.stat-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--glass-border);border-radius:var(--radius);padding:18px 16px;text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.stat-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;margin-bottom:9px;background:rgba(124,92,255,.14);color:var(--accent-light)}
.stat-icon.teal{background:rgba(0,212,166,.12);color:var(--accent2)}
.stat-icon svg{width:20px;height:20px}
.stat-num{display:block;font-size:1.85rem;font-weight:800;color:var(--text);letter-spacing:-.3px;line-height:1.1}
.stat-label{color:var(--muted);font-size:.9rem;font-weight:600}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--glass-border);border-radius:var(--radius);padding:22px;margin-bottom:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 40px rgba(0,0,0,.28)}
label{display:block;font-weight:600;margin:12px 0 6px}
input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card2);color:var(--text);font-size:1rem;font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,255,.25)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
button{background:linear-gradient(135deg,#8a6cff 0%,var(--accent) 55%,#6440e8 100%);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-weight:700;cursor:pointer;font-size:1rem;font-family:inherit;box-shadow:0 8px 22px rgba(124,92,255,.28);transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}
button:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(124,92,255,.36)}
button:active{transform:scale(.98)}
button:disabled{opacity:.6;cursor:wait;transform:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
#shortenBtn{width:100%;margin-top:18px;min-height:48px}
.btn-secondary{background:var(--card2);border:1px solid var(--border);color:var(--text);padding:8px 16px;font-size:.9rem;min-height:40px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:none;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.btn-secondary:hover{border-color:var(--accent);background:#1d2742;transform:translateY(-1px);box-shadow:none}
.error{color:var(--danger);background:rgba(255,92,122,.1);border:1px solid rgba(255,92,122,.35);padding:10px 12px;border-radius:10px}
.result{margin-top:20px;border-top:1px solid var(--border);padding-top:16px;animation:fadeSlide .25s ease}
@keyframes fadeSlide{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.result-row{display:flex;gap:10px}
.result-row input{flex:1;min-width:0}
.result-row button{min-height:44px}
.qr-wrap{text-align:center;margin-top:18px}
.qr-wrap>a{display:inline-block;border-radius:12px}
.qr-wrap img{background:#fff;padding:10px;border-radius:12px;width:180px;height:180px;display:block}
.qr-label{color:var(--muted);font-size:.9rem;margin:10px 0 0}
.qr-download{margin-top:10px}
.qr-box{text-align:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);animation:fadeSlide .2s ease}
.qr-box img{background:#fff;padding:8px;border-radius:10px;width:160px;height:160px}
.qr-box .qr-download{margin-top:8px}
.dash-head{display:flex;justify-content:space-between;align-items:center}
.dash-head h2{margin:6px 0;font-size:1.25rem;font-weight:800}
.links-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.link-item{background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:14px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.link-item:hover{border-color:rgba(124,92,255,.55);box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 1px rgba(124,92,255,.18);transform:translateY(-1px)}
.link-item .short{font-weight:800;color:var(--accent2);word-break:break-all}
.link-item .orig{color:var(--muted);word-break:break-all;font-size:.92rem;margin:4px 0}
.link-item .meta{font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px}
.link-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.link-actions button{padding:10px 14px;font-size:.88rem;min-height:40px}
.btn-delete{background:linear-gradient(135deg,#ff7090,var(--danger) 60%,#e8385c);box-shadow:0 8px 22px rgba(255,92,122,.22)}
.empty{color:var(--muted);text-align:center;padding:18px}
.skeleton-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--card2)}
.skeleton-line{height:13px;border-radius:7px;margin:7px 0;background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.skeleton-line.w45{width:45%}.skeleton-line.w70{width:70%}.skeleton-line.w90{width:90%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
footer{position:relative;text-align:center;color:var(--muted);padding:24px}
footer a{color:var(--accent2);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:11px 6px;font-weight:600}
footer a svg{width:16px;height:16px}
footer a:hover{text-decoration:underline}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}.row{grid-template-columns:1fr}.result-row{flex-direction:column}.tagline{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.skeleton-line{animation:none;background:rgba(255,255,255,.07)}}