@font-face{
    font-family:'UKIJ Ekran';
    src:url('https://asar.yarkin.top/font/UKIJEkran.ttf') format('truetype');
    font-weight:normal;font-style:normal;font-display:swap;
}

@property --spin-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}

:root{
    --bg:#f6f7fc;
    --surface:#ffffff;
    --ink:#0f172a;
    --ink-2:#3f4a63;
    --muted:#7b88a3;
    --line:#e9edf6;
    --line-soft:#f2f5fb;

    --brand:#5b5bd6;
    --brand-2:#8b5cf6;
    --brand-3:#ec4899;
    --gold:#f59e0b;
    --ok:#10b981;

    --brand-soft:#eef0ff;
    --gold-soft:#fff7e8;
    --pink-soft:#ffeef7;
    --sky-soft:#eaf6ff;

    --r-lg:26px;
    --r-md:18px;
    --r-sm:12px;

    --sh-1:0 1px 2px rgba(15,23,42,.04), 0 10px 24px -20px rgba(15,23,42,.35);
    --sh-2:0 2px 6px rgba(15,23,42,.05), 0 26px 50px -30px rgba(79,70,229,.45);
    --sh-3:0 30px 70px -30px rgba(15,23,42,.28);

    --ease:cubic-bezier(.2,.8,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html{scroll-behavior:smooth;}

body{
    font-family:'UKIJ Ekran','Segoe UI','Noto Naskh Arabic','Microsoft YaHei',system-ui,-apple-system,sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.65;
    direction:rtl;
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* ================= 背景 ئالاھىدە ئۈنۈم ================= */
.bg-layer{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform;}
.blob.b1{width:420px;height:420px;top:-140px;right:-120px;background:radial-gradient(circle at 30% 30%,#c7d2fe,#a5b4fc 60%,transparent 70%);animation:float1 22s var(--ease) infinite;}
.blob.b2{width:380px;height:380px;top:32%;left:-160px;background:radial-gradient(circle at 40% 40%,#fbcfe8,#f5d0fe 60%,transparent 70%);animation:float2 26s var(--ease) infinite;}
.blob.b3{width:340px;height:340px;bottom:-140px;right:12%;background:radial-gradient(circle at 50% 50%,#fde68a,#fef3c7 60%,transparent 72%);opacity:.45;animation:float3 30s var(--ease) infinite;}
@keyframes float1{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-40px,60px,0) scale(1.12);}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0) scale(1.05);}50%{transform:translate3d(50px,-50px,0) scale(1);}}
@keyframes float3{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(30px,-40px,0) scale(1.1);}}

.grid-lines{
    position:absolute;inset:0;
    background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 20%,transparent 78%);
    mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 20%,transparent 78%);
}

/* ================= ئومۇمىي قۇرۇلما ================= */
.shell{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 14px 40px;}

/* ------- ھەمبەھىرلەش / كىرىش ------- */
.topbar{
    position:sticky;top:0;z-index:60;
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    backdrop-filter:blur(16px) saturate(180%);
    border-bottom:1px solid rgba(233,237,246,.9);
}
.topbar-inner{
    max-width:760px;margin:0 auto;padding:10px 14px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand-mark{
    width:38px;height:38px;border-radius:12px;flex:none;
    background:linear-gradient(135deg,var(--brand),var(--brand-2) 55%,var(--brand-3));
    display:grid;place-items:center;color:#fff;font-size:17px;font-weight:700;
    box-shadow:0 10px 22px -12px rgba(91,91,214,.9);
    position:relative;overflow:hidden;
}
.brand-mark::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%);
    transform:translateX(-120%);
    animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%,55%{transform:translateX(-120%);}80%,100%{transform:translateX(120%);}}
.brand-text{min-width:0;}
.brand-text .t1{font-size:15px;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-text .t2{font-size:10.5px;color:var(--muted);margin-top:-3px;}

.top-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{
    width:36px;height:36px;border-radius:11px;
    border:1px solid var(--line);background:#fff;
    color:var(--ink-2);display:grid;place-items:center;cursor:pointer;
    font-size:15px;text-decoration:none;transition:all .25s var(--ease);
}
.icon-btn:hover{border-color:#d9d9f7;color:var(--brand);transform:translateY(-1px);box-shadow:var(--sh-1);}
.icon-btn:active{transform:scale(.95);}

.pill-btn{
    display:inline-flex;align-items:center;gap:6px;
    height:36px;padding:0 14px;border-radius:11px;
    border:none;cursor:pointer;text-decoration:none;
    font-family:inherit;font-size:13px;font-weight:600;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#fff;box-shadow:0 12px 26px -16px rgba(91,91,214,1);
    transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.pill-btn:hover{transform:translateY(-2px);box-shadow:0 18px 32px -16px rgba(91,91,214,1);}
.pill-btn:active{transform:scale(.97);}

/* ================= HERO ================= */
.hero{
    position:relative;margin-top:18px;padding:26px 22px 22px;
    border:1.6px solid transparent;border-radius:var(--r-lg);
    /* پاكىز ئاق يۈز + ئايلىنىدىغان رەڭلىك گىرۋەك */
    background:
        linear-gradient(#ffffff,#ffffff) padding-box,
        conic-gradient(from var(--spin-angle),#6366f1,#a855f7,#ec4899,#f59e0b,#22d3ee,#6366f1) border-box;
    box-shadow:var(--sh-2);
    animation:riseIn .7s var(--ease) both,spinBorder 10s linear infinite;
}
@keyframes spinBorder{to{--spin-angle:360deg;}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

.free-badge{
    position:relative;display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px 6px 12px;border-radius:999px;
    background:linear-gradient(135deg,#eefaf3,#e8f7ff);
    border:1px solid #cdeee0;color:#0d8a63;
    font-size:12px;font-weight:700;
}
.free-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative;}
.free-badge .dot::after{
    content:'';position:absolute;inset:-4px;border-radius:50%;
    border:2px solid rgba(16,185,129,.6);animation:pulse 2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.6);opacity:.9;}100%{transform:scale(1.5);opacity:0;}}

.hero h1{
    font-size:30px;line-height:1.35;font-weight:800;margin:14px 0 6px;letter-spacing:-.2px;
    background:linear-gradient(115deg,#4f46e5 0%,#7c3aed 42%,#db2777 78%,#f59e0b 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    background-size:200% 100%;animation:hueSlide 9s ease-in-out infinite;
}
@keyframes hueSlide{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.hero p.lead{color:var(--ink-2);font-size:13.5px;max-width:52ch;}

.hero-stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;
}
.stat{
    min-width:0;
    background:linear-gradient(180deg,#fbfcff,#f6f8ff);
    border:1px solid var(--line);border-radius:var(--r-md);
    padding:12px 8px;text-align:center;position:relative;overflow:hidden;
}
.stat .v{font-size:19px;font-weight:800;color:var(--ink);line-height:1.2;}
.stat .v.grad{background:linear-gradient(135deg,var(--brand),var(--brand-3));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .k{font-size:10.5px;color:var(--muted);margin-top:3px;}

/* ئىشلەتكۈچى قۇرى */
.user-row{
    margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.avatar{
    width:44px;height:44px;border-radius:14px;flex:none;
    background:linear-gradient(135deg,var(--brand),var(--brand-3));
    color:#fff;font-size:18px;font-weight:700;display:grid;place-items:center;
    box-shadow:0 14px 26px -18px rgba(91,91,214,1);
}
.user-meta{min-width:0;flex:1;}
.user-meta .n{font-weight:700;font-size:15px;}
.user-meta .i{font-size:11px;color:var(--muted);}
.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.tag{
    font-size:11px;color:var(--ink-2);background:var(--line-soft);
    border:1px solid var(--line);border-radius:999px;padding:4px 10px;
}
.tag.ok{background:#eefaf3;border-color:#cdeee0;color:#0d8a63;font-weight:600;}
.tag.gold{background:var(--gold-soft);border-color:#fde8bd;color:#a16207;font-weight:600;}

/* ================= ئىزدەش + تۈر تاڭلاش ================= */
.toolbar{margin-top:22px;}
.search{
    position:relative;display:flex;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:0 14px;height:48px;box-shadow:var(--sh-1);
    transition:border-color .25s,box-shadow .25s;
}
.search:focus-within{border-color:#cfcffa;box-shadow:0 0 0 4px rgba(91,91,214,.09),var(--sh-1);}
.search svg{width:18px;height:18px;flex:none;color:var(--muted);}
.search input{
    flex:1;border:none;outline:none;background:transparent;
    font-family:inherit;font-size:14.5px;color:var(--ink);
    padding:0 10px;height:100%;
}
.search input::placeholder{color:#a9b3c7;}
.search .clear{
    border:none;background:var(--line-soft);color:var(--muted);
    width:24px;height:24px;border-radius:50%;cursor:pointer;
    display:none;place-items:center;font-size:14px;line-height:1;
}
.search .clear.show{display:grid;}

.chips{
    display:flex;gap:8px;margin-top:12px;overflow-x:auto;
    padding-bottom:4px;scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none;}
.chip{
    flex:none;border:1px solid var(--line);background:#fff;color:var(--ink-2);
    border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;
    cursor:pointer;font-family:inherit;transition:all .25s var(--ease);white-space:nowrap;
}
.chip:hover{border-color:#dcdcfb;color:var(--brand);transform:translateY(-1px);}
.chip.active{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    border-color:transparent;color:#fff;
    box-shadow:0 12px 24px -16px rgba(91,91,214,1);
}
.chip .cnt{opacity:.7;font-size:11px;margin-inline-start:4px;}

/* ================= قورال تورى ================= */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 4px 12px;}
.section-head h2{font-size:15px;font-weight:700;}
.section-head .hint{font-size:11.5px;color:var(--muted);}

.grid{
    display:grid;gap:11px;
    grid-template-columns:repeat(auto-fill,minmax(102px,1fr));
}
.tool{
    position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;
    padding:15px 8px 13px;text-align:center;text-decoration:none;color:inherit;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
    overflow:hidden;isolation:isolate;
    transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
}
.tool .glow{
    position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;
    background:radial-gradient(140px 100px at var(--mx,50%) var(--my,0%),rgba(91,91,214,.14),transparent 72%);
}
.tool:hover{transform:translateY(-5px);border-color:#dedcfb;box-shadow:var(--sh-2);}
.tool:hover .glow{opacity:1;}
.tool:active{transform:translateY(-2px) scale(.985);}
.tool .ico{
    width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--brand-soft),#f7f3ff);
    color:var(--brand);border:1px solid #e7e7ff;
    transition:transform .38s var(--ease);
}
.tool:hover .ico{transform:translateY(-2px) rotate(-4deg) scale(1.06);}
.tool .ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.tool .nm{font-size:12px;font-weight:700;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;}
.tool .sb{font-size:10px;color:var(--muted);line-height:1.3;overflow-wrap:anywhere;}

/* تۈرگە قاراپ رەڭ */
.tool[data-cat="kl8"] .ico{background:linear-gradient(135deg,var(--gold-soft),#fffbf0);color:#b45309;border-color:#fbe6bf;}
.tool[data-cat="kl8"] .glow{background:radial-gradient(140px 100px at var(--mx,50%) var(--my,0%),rgba(245,158,11,.16),transparent 72%);}
.tool[data-cat="pl5"] .ico{background:linear-gradient(135deg,var(--pink-soft),#fff5fb);color:#be185d;border-color:#fbd5e8;}
.tool[data-cat="pl5"] .glow{background:radial-gradient(140px 100px at var(--mx,50%) var(--my,0%),rgba(236,72,153,.15),transparent 72%);}
.tool[data-cat="util"] .ico{background:linear-gradient(135deg,var(--sky-soft),#f2fbff);color:#0369a1;border-color:#cfe9f9;}
.tool[data-cat="util"] .glow{background:radial-gradient(140px 100px at var(--mx,50%) var(--my,0%),rgba(14,165,233,.15),transparent 72%);}

/* ئالاھىدە كۇنۇپكىلار */
.tool.special{background:linear-gradient(180deg,#fffdf7,#fff);border-color:#f6e6c4;}
.tool.special .ico{background:linear-gradient(135deg,#fff4dc,#fffaf0);color:#b45309;border-color:#f6e0b4;}
.tool.special.green{background:linear-gradient(180deg,#f7fffb,#fff);border-color:#d6f0e4;}
.tool.special.green .ico{background:linear-gradient(135deg,#e9f9f1,#f6fffb);color:#0d8a63;border-color:#cdeee0;}

/* كىرىش ئۈنۈمى */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms);}
.reveal.in{opacity:1;transform:none;}

.empty{
    display:none;text-align:center;padding:34px 18px;color:var(--muted);
    background:#fff;border:1px dashed var(--line);border-radius:var(--r-md);font-size:13px;
}
.empty.show{display:block;}
.empty b{color:var(--ink-2);}

/* ================= ئۇچۇر بۆلىكى ================= */
.notice{
    margin-top:22px;padding:16px 18px;border-radius:var(--r-md);
    background:linear-gradient(135deg,#fffdf6,#fff8ea);
    border:1px solid #f6e6c4;color:#7c5a12;font-size:12.5px;line-height:1.9;
    display:flex;gap:10px;align-items:flex-start;
}
.notice .ni{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:#fdecc8;color:#a16207;font-weight:800;font-size:14px;}

/* ================= پۇت ================= */
.footer{
    margin-top:26px;padding:20px 6px 6px;text-align:center;
    border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;line-height:2;
}
.footer .free-line{color:#0d8a63;font-weight:700;}
.footer .wx{color:#be185d;font-weight:600;}

/* ================= مودال ================= */
.mask{
    position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
    padding:18px;background:rgba(15,23,42,.42);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.mask.show{display:flex;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
    width:100%;max-width:400px;max-height:82vh;overflow-y:auto;
    background:#fff;border-radius:var(--r-lg);padding:24px 22px;
    box-shadow:var(--sh-3);text-align:right;
    animation:modalIn .38s var(--ease);
}
@keyframes modalIn{from{opacity:0;transform:translateY(22px) scale(.96);}to{opacity:1;transform:none;}}
.modal h3{font-size:17px;font-weight:800;text-align:center;margin-bottom:6px;}
.modal .sub{text-align:center;font-size:12px;color:var(--muted);margin-bottom:16px;}
.modal .body{font-size:13px;color:var(--ink-2);line-height:2;}
.modal .body strong{color:var(--brand);}
.qr-wrap{text-align:center;padding:6px 0 2px;cursor:pointer;}
.qr-wrap img{
    width:178px;height:178px;object-fit:contain;border-radius:18px;
    border:1px solid var(--line);background:#fff;padding:8px;box-shadow:var(--sh-1);
}
.qr-wrap p{font-size:12px;color:var(--muted);margin-top:8px;}
.modal .close{
    width:100%;margin-top:16px;padding:13px;border:none;border-radius:14px;cursor:pointer;
    font-family:inherit;font-size:14.5px;font-weight:700;color:#fff;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    box-shadow:0 16px 30px -20px rgba(91,91,214,1);
    transition:transform .25s var(--ease);
}
.modal .close:hover{transform:translateY(-2px);}
.modal .ghost{
    width:100%;margin-top:8px;padding:12px;border-radius:14px;cursor:pointer;
    font-family:inherit;font-size:13.5px;font-weight:600;
    background:var(--line-soft);border:1px solid var(--line);color:var(--ink-2);
}
.share-row{display:none;gap:8px;margin-top:12px;}
.share-row.show{display:flex;animation:riseIn .35s var(--ease);}
.share-row button{
    flex:1;padding:12px;border:none;border-radius:13px;cursor:pointer;
    font-family:inherit;font-size:13px;font-weight:700;color:#fff;
}
.share-row .wxshare{background:linear-gradient(135deg,#22c55e,#07a94f);}
.share-row .save{background:linear-gradient(135deg,#fb923c,#f97316);}

.free-list{list-style:none;display:grid;gap:8px;margin-top:4px;}
.free-list li{
    display:flex;gap:9px;align-items:flex-start;
    background:#f8faff;border:1px solid var(--line);border-radius:13px;padding:10px 12px;font-size:12.5px;color:var(--ink-2);
}
.free-list .ck{
    flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,#34d399,#10b981);color:#fff;font-size:11px;font-weight:800;margin-top:2px;
}

/* ================= يۇقىرى قايتىش ================= */
.to-top{
    position:fixed;inset-inline-start:16px;bottom:18px;z-index:90;
    width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
    background:#fff;color:var(--brand);box-shadow:var(--sh-2);
    display:grid;place-items:center;font-size:17px;
    opacity:0;pointer-events:none;transform:translateY(12px);
    transition:all .35s var(--ease);
}
.to-top.show{opacity:1;pointer-events:auto;transform:none;}
.to-top:hover{transform:translateY(-3px);}

/* ================= Toast ================= */
.toast{
    position:fixed;inset-inline:0;bottom:24px;z-index:300;
    display:flex;justify-content:center;pointer-events:none;
}
.toast .msg{
    background:rgba(15,23,42,.92);color:#fff;font-size:12.5px;
    padding:10px 18px;border-radius:999px;
    opacity:0;transform:translateY(14px);transition:all .3s var(--ease);
}
.toast.show .msg{opacity:1;transform:none;}

/* ================= كىچىك ئېكران ================= */
@media (max-width:420px){
    .hero{padding:22px 17px 18px;}
    .hero h1{font-size:24px;}
    .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
    .tool{padding:13px 5px 11px;}
    .tool .nm{font-size:11px;}
    .tool .sb{font-size:9.5px;}
    .tool .ico{width:36px;height:36px;border-radius:12px;}
    .brand-text .t2{display:none;}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
    .reveal{opacity:1;transform:none;}
}