/* NIKRAD BEAUTY UPGRADE v1 — gradient hero, glass, micro-interactions */
@keyframes nkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes nkShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes nkGlow{0%,100%{box-shadow:0 0 0 0 rgba(182,139,92,.28)}50%{box-shadow:0 0 0 7px rgba(182,139,92,0)}}
/* 1) Hero gradient aura (warm) */
.nikrad-app .home-hero,.nikrad-app .nk-hero{position:relative;overflow:hidden}
.nikrad-app .home-hero::before,.nikrad-app .nk-hero::before{content:"";position:absolute;inset:-40% -20% auto;height:220px;background:radial-gradient(ellipse at 50% 0%,rgba(182,139,92,.14),transparent 65%);pointer-events:none}
.nikrad-app .home-hero::after,.nikrad-app .nk-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 160px at 85% -40%,rgba(182,139,92,.09),transparent),radial-gradient(500px 140px at 10% -30%,rgba(193,72,58,.05),transparent);pointer-events:none}
.nikrad-app .home-hero>*{position:relative;z-index:1}
.nikrad-app .home-hero .mark{animation:nkFloat 5.5s ease-in-out infinite}
.nikrad-app .home-hero .eyebrow{animation:nkGlow 3.2s ease-in-out infinite}
/* 2) Glass header */
.nikrad-app .app-header{backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);background:color-mix(in srgb,var(--raised,#fffdf8) 82%,transparent)}
html[data-theme=dark] .nikrad-app .app-header{background:color-mix(in srgb,var(--raised,#191c1f) 80%,transparent)}
/* 3) Stat number gradient text */
.nikrad-app .stat-card .num{background:linear-gradient(135deg,#9a7343,#b68b5c 55%,#c9a06f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme=dark] .nikrad-app .stat-card .num{background:linear-gradient(135deg,#c9a06f,#d9b88a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* 4) Premium card hover — soft lift + accent ring */
@media(hover:hover){
 .nikrad-app .quick-card:hover,.nikrad-app .stat-card:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.05),0 22px 44px -22px rgba(154,115,67,.35);border-color:rgba(182,139,92,.45)}
 .nikrad-app .quick-card:hover .qi{background:var(--accent-soft);color:#9a7343;transform:scale(1.06)}
 .nikrad-app .quick-card .qi{transition:.22s cubic-bezier(.2,.7,.3,1)}
 .nikrad-app .btn-primary{transition:.2s;box-shadow:0 8px 20px -10px rgba(28,27,26,.5)}
 .nikrad-app .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(154,115,67,.45)}
 .nikrad-app .list-row:hover{padding-inline-start:18px}
 .nikrad-app .list-row{transition:background .15s,padding .25s cubic-bezier(.2,.7,.3,1)}
}
/* 5) Ripple on buttons (pointer) */
.nikrad-app .btn,.nikrad-app .quick-card{position:relative;overflow:hidden}
/* 6) Skeleton shimmer upgrade */
.nk-skeleton{background:linear-gradient(90deg,var(--soft,#f0ede8) 25%,#faf8f4 50%,var(--soft,#f0ede8) 75%);background-size:200% 100%;animation:nkShimmer 1.4s linear infinite}
html[data-theme=dark] .nk-skeleton{background:linear-gradient(90deg,#20242a 25%,#2a2f36 50%,#20242a 75%);background-size:200% 100%}
/* 7) Scrollbar refined */
.nikrad-app ::-webkit-scrollbar{width:9px;height:9px}
.nikrad-app ::-webkit-scrollbar-thumb{background:rgba(154,115,67,.28);border-radius:99px;border:2px solid transparent;background-clip:content-box}
.nikrad-app ::-webkit-scrollbar-thumb:hover{background:rgba(154,115,67,.5);background-clip:content-box}
html[data-theme=dark] .nikrad-app ::-webkit-scrollbar-thumb{background:rgba(201,160,111,.3);background-clip:content-box}
/* 8) Dark surface depth */
html[data-theme=dark] .nikrad-app .home-hero,html[data-theme=dark] .nikrad-app .nk-hero{background:linear-gradient(180deg,#1c2025,#191c1f)}
html[data-theme=dark] .nikrad-app .card,html[data-theme=dark] .nikrad-app .stat-card,html[data-theme=dark] .nikrad-app .list-card{background:#1c2025}
/* 9) Focus visible — accessibility */
.nikrad-app :focus-visible{outline:2px solid #b68b5c;outline-offset:2px;border-radius:8px}
/* 10) Mobile polish */
@media(max-width:760px){
 .nikrad-app .home-hero{padding:26px 16px 22px;border-radius:18px}
 .nikrad-app .stat-grid{grid-template-columns:repeat(2,1fr)}
 .nikrad-app .quick-grid{grid-template-columns:repeat(4,1fr);gap:8px}
 .nikrad-app .quick-card{padding:12px 6px}
 .nikrad-app .quick-card .qi{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){
 .nikrad-app .home-hero .mark,.nikrad-app .home-hero .eyebrow{animation:none!important}
 .nikrad-app *{scroll-behavior:auto!important}
}

.nk-ripple{will-change:transform,opacity}

/* 11) Typography balance — hero title */
.nikrad-app .home-hero h1,.nikrad-app .nk-hero h1,.nikrad-app .hero h1{text-wrap:balance}
.nikrad-app p{text-wrap:pretty}
/* 12) Search bar alignment polish */
.nikrad-app .search-bar,.nikrad-app .kb-search{display:flex;align-items:center;gap:8px}
.nikrad-app .hero .eyebrow{letter-spacing:.2px}
/* 13) Counter position: section-title meta closer to title */
.nikrad-app .section-title .nk-count{font-size:10.5px;color:var(--muted);font-weight:600}
/* 14) stat number contrast boost */
.nikrad-app .stat-card .num{filter:saturate(1.15) brightness(.94)}
html[data-theme=dark] .nikrad-app .stat-card .num{filter:none}

/* 15) Mobile stat grid — 3 cards single row, no orphan */
@media(max-width:760px){
 body.nikrad-app .stat-grid{grid-template-columns:repeat(3,1fr)!important;gap:9px!important}
 .nikrad-app .stat-card{padding:13px 8px}
 .nikrad-app .stat-card .num{font-size:19px}
}
@media(max-width:380px){
 body.nikrad-app .stat-grid{grid-template-columns:repeat(3,1fr)!important;gap:7px!important}
 .nikrad-app .stat-card .num{font-size:17px}
}
/* 16) FAB breathing room — bottom list padding */
.nikrad-app #scroll,main#scroll{padding-bottom:110px!important}
/* 17) RTL arrow flip for search submit */
.nikrad-app .search-bar button svg,.nikrad-app .kb-search button svg,.nikrad-app form[role=search] button svg{transform:scaleX(-1)}

/* 18) Resilient stat numbers — tabular + clamp */
.nikrad-app .stat-card .num{font-variant-numeric:tabular-nums;font-size:clamp(15px,4.4vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nikrad-app .stat-card .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nikrad-app .stat-card{min-width:0}
/* 19) desktop stat hover glow */
@media(hover:hover){.nikrad-app .stat-card:hover .num{filter:saturate(1.3)}}

/* 20) polish — breadcrumb breathing + header icons alignment */
.nikrad-app .crumbs{padding-inline-start:4px}
.nikrad-app .header-icon{align-self:center}
/* ═══ NIKRAD VISUAL SUITE V2 ═══ */
@keyframes nkPopIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
@keyframes nkSlideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes nkLogoSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(6deg) scale(1.06)}100%{transform:rotate(0) scale(1)}}
@keyframes nkWave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* ── 1) DARK MODE PREMIUM ── */
html[data-theme=dark] .nikrad-app{
 --nk-hero-glow:radial-gradient(600px 200px at 80% -30%,rgba(201,160,111,.16),transparent),radial-gradient(500px 180px at 12% -20%,rgba(193,72,58,.08),transparent)}
html[data-theme=dark] .nikrad-app .home-hero::after,html[data-theme=dark] .nikrad-app .nk-hero::after{background:var(--nk-hero-glow)}
html[data-theme=dark] .nikrad-app .card,html[data-theme=dark] .nikrad-app .stat-card,html[data-theme=dark] .nikrad-app .list-card,html[data-theme=dark] .nikrad-app .quick-card{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px -22px rgba(0,0,0,.7)}
html[data-theme=dark] .nikrad-app .home-hero .mark,html[data-theme=dark] .nikrad-app .nk-hero .mark{box-shadow:0 0 0 1px rgba(201,160,111,.25),0 0 26px rgba(201,160,111,.18)}
html[data-theme=dark] .nikrad-app .eyebrow{box-shadow:0 0 18px rgba(201,160,111,.14)}
html[data-theme=dark] .nikrad-app .btn-primary{background:linear-gradient(135deg,#c9a06f,#b68b5c);color:#14171a;box-shadow:0 10px 26px -12px rgba(201,160,111,.55)}
/* ── 2) WELCOME animation ── */
body.nk-welcome .welcome-card,body.nk-welcome .welcome-logo-mark,body[class*=welcome] .welcome-auth-card{animation:nkSlideUp .7s cubic-bezier(.22,1,.36,1) both}
body.nk-welcome .welcome-logo-mark{animation-delay:.05s;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
body.nk-welcome .welcome-logo-mark:hover{transform:scale(1.07) rotate(-3deg)}
/* ── 3) per-element skeletons (شکل واقعی) ── */
.nk-skel{border-radius:12px;background:linear-gradient(90deg,var(--soft,#f0ede8) 25%,#faf8f4 50%,var(--soft,#f0ede8) 75%);background-size:200% 100%;animation:nkShimmer 1.4s linear infinite}
html[data-theme=dark] .nk-skel{background:linear-gradient(90deg,#20242a 25%,#2a2f36 50%,#20242a 75%);background-size:200% 100%}
.nk-skel-doc{display:flex;gap:12px;padding:14px 16px;align-items:center}
.nk-skel-doc .ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px}
.nk-skel-doc .ln{height:10px;border-radius:6px}
.nk-skel-doc .ln.w1{width:62%}.nk-skel-doc .ln.w2{width:38%;height:7px;margin-top:7px}
/* ── 4) EMPTY STATES ── */
.empty-note{position:relative}
.empty-note::before{content:"";display:block;width:58px;height:58px;margin:0 auto 12px;border-radius:18px;background:linear-gradient(135deg,var(--accent-soft,#f5ead9),transparent);border:1px dashed rgba(182,139,92,.45);position:relative}
.empty-note::after{content:"";position:absolute;top:calc(100% - 100% + 14px);inset-inline:0;width:58px;margin:0 auto;height:58px;background:no-repeat center/26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b68b5c' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
/* ── 5) TOOLTIPS (css-only via data-tip) ── */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;transform:translateX(50%) translateY(4px);background:#1c1b1a;color:#fffdf8;font-size:10.5px;font-weight:700;padding:6px 10px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;transition:.18s;z-index:9500;box-shadow:0 8px 22px -10px rgba(0,0,0,.5)}
[data-tip]:hover::after{opacity:1;transform:translateX(50%) translateY(0)}
html[data-theme=dark] [data-tip]::after{background:#e8e4dd;color:#14171a}
/* ── 6) VIEW TRANSITION (cross-fade between pages) ── */
@view-transition{navigation:auto}
html{view-transition-name:root}
::view-transition-old(root){animation:nkFadeOut .18s ease both}
::view-transition-new(root){animation:nkFadeIn .22s ease both}
@keyframes nkFadeOut{to{opacity:0}}
@keyframes nkFadeIn{from{opacity:0}}
/* ── 7) LOGO micro-anim ── */
@media(hover:hover){.header-brand:hover .mark,.header-brand:hover img{animation:nkLogoSpin .6s ease}}
/* ── 8) BOTTOM NAV mobile — active bounce + label ── */
@media(max-width:760px){
 .nk-bnav a,.nk-bnav button{transition:transform .25s cubic-bezier(.34,1.56,.64,1),color .2s}
 .nk-bnav .is-active,.nk-bnav [aria-current=page]{transform:translateY(-4px)}
 .nk-bnav .is-active svg,.nk-bnav [aria-current=page] svg{filter:drop-shadow(0 4px 8px rgba(182,139,92,.4))}
 .nk-bnav a:active,.nk-bnav button:active{transform:scale(.9)}
}
/* ── 9) PRESS effect (touch) ── */
@media(hover:none){.nikrad-app .btn:active,.nikrad-app .quick-card:active,.nikrad-app .send-btn:active,.nikrad-app .list-row:active{transform:scale(.97);transition:transform .1s}}
/* ── 10) DOCUMENT: blockquote + heading share ── */
.nikrad-app .article blockquote,.nikrad-app blockquote{position:relative;background:linear-gradient(135deg,var(--accent-soft,#f5ead9),transparent 80%);border-inline-start:4px solid #b68b5c;border-radius:0 16px 16px 0;padding:18px 20px;margin:20px 0;font-weight:600;color:var(--ink,#1c1b1a)}
.nikrad-app .article blockquote::before{content:"";position:absolute;top:-10px;inset-inline-end:16px;width:26px;height:26px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b68b5c' opacity='.35'%3E%3Cpath d='M7 7h4v6H7zM13 7h4v6h-4z'/%3E%3C/svg%3E")}
html[data-theme=dark] .nikrad-app blockquote{background:linear-gradient(135deg,rgba(201,160,111,.12),transparent 80%)}
.nk-h-share{display:inline-flex;opacity:0;transition:.2s;vertical-align:middle;margin-inline-start:8px;width:26px;height:26px;border:0;border-radius:8px;background:var(--soft,#f0ede8);color:#9a7343;cursor:pointer;align-items:center;justify-content:center}
.article h2:hover .nk-h-share{opacity:1}
.nk-h-share svg{width:14px;height:14px}
/* ── 11) PLAYER premium progress ── */
.nikrad-app .bar{height:6px!important;border-radius:99px;background:var(--soft,#f0ede8)}
.nikrad-app .bar .fill{background:linear-gradient(90deg,#b68b5c,#c9a06f)!important;border-radius:99px;box-shadow:0 0 10px rgba(182,139,92,.5)}
.nikrad-app .bar{position:relative}
.nikrad-app .bar .fill::after{content:"";position:absolute;inset-inline-end:-7px;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;background:#fffdf8;border:3px solid #b68b5c;box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* ── 12) COMMUNITY card header gradient ── */
.nikrad-app .cm-post{position:relative;overflow:hidden}
.nikrad-app .cm-post::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,#b68b5c,#c9a06f,#b68b5c);opacity:.7}
/* ── 13) 404 page art ── */
.nk-404{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px 18px}
.nk-404 .code{font-size:clamp(64px,14vw,110px);font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,#9a7343,#c9a06f 60%,#b68b5c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nk-404 p{color:var(--muted,#6b665e);font-size:13px;line-height:2;max-width:420px}
.nk-404 .btn{margin-top:8px}
/* ── 14) landscape player ── */
@media(orientation:landscape) and (max-height:500px){
 .nikrad-app .player{position:fixed;inset:12px;z-index:6000;display:flex;align-items:center;gap:20px;max-width:760px;margin:0 auto}
 .nikrad-app .player .p-art{width:110px;height:110px;flex:0 0 110px}
}
/* ── 15) dashboard bars/donut helpers ── */
.nk-donut{width:92px;height:92px;border-radius:50%;background:conic-gradient(#b68b5c var(--v,60%),var(--soft,#f0ede8) 0);display:grid;place-items:center;margin:0 auto}
.nk-donut::after{content:attr(data-v);width:64px;height:64px;border-radius:50%;background:var(--raised,#fffdf8);display:grid;place-items:center;font-size:15px;font-weight:800;color:#9a7343}
.nk-bars{display:flex;align-items:flex-end;gap:7px;height:74px;padding:0 4px}
.nk-bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#c9a06f,#b68b5c);min-height:6px;opacity:.9}
.nk-bars i.dim{opacity:.35}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}