/* ===== profile: the watch sky ===== */
.wsky{position:relative;height:clamp(560px,86svh,760px);overflow:hidden;color:#fff;
  background:radial-gradient(ellipse 80% 60% at 70% 20%,#1E2E5C 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 15% 80%,#2A1E4E 0%,transparent 60%),linear-gradient(180deg,#070C1C 0%,#0B1530 55%,#131E3F 100%)}
.wsky::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(7,12,28,.95),transparent);pointer-events:none}
#skySvg{position:absolute;inset:0;width:100%;height:100%}
.bgs{fill:#fff}
.mw{fill:url(#mwg);opacity:.5}
.cline{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.clabel{font-weight:600;font-family:Vazirmatn,Tahoma,sans-serif;fill:rgba(255,255,255,.55);text-anchor:middle}
.star{cursor:pointer;outline:none}
.star .gl{opacity:.45;filter:url(#blur)}
.star .co{fill:#fff}
.star.current .co{animation:tw 2.4s ease-in-out infinite}
.star.dim{opacity:.45}
.star.plan .co{fill:none;stroke:#fff;stroke-width:1.2;opacity:.7}
.star:hover .co,.star:focus-visible .co{transform-box:fill-box;transform-origin:center;transform:scale(1.6)}
.star:focus-visible .gl{opacity:1}
.star .co{transition:transform .2s}
@keyframes tw{50%{opacity:.35}}
.wsky.assemble .cline{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:draw 1.6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d)}
.wsky.assemble .star{opacity:0;animation:ignite .6s ease-out forwards;animation-delay:var(--d)}
.wsky.assemble .clabel{opacity:0;animation:fadein 1s forwards;animation-delay:var(--d)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ignite{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.4)}100%{opacity:1;transform:scale(1)}}
.wsky.assemble .star{transform-box:fill-box;transform-origin:center}
@keyframes fadein{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.wsky.assemble .cline,.wsky.assemble .star,.wsky.assemble .clabel{animation:none;opacity:1;stroke-dashoffset:0}}

.sky-tip{position:absolute;z-index:5;pointer-events:none;display:flex;gap:10px;align-items:center;background:rgba(10,18,40,.92);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:12px;padding:8px 12px 8px 8px;font-size:12px;opacity:0;transform:translate(50%,-110%) scale(.96);transition:opacity .15s,transform .15s;max-width:260px}
.sky-tip.on{opacity:1;transform:translate(50%,-120%) scale(1)}
.sky-tip .tc{width:38px;height:54px;border-radius:6px;flex:none;background-size:cover;background-position:center}
.sky-tip b{display:block;font-size:13px;line-height:1.5}
.sky-tip small{color:rgba(255,255,255,.65)}

.sky-empty{position:absolute;z-index:3;inset:0;display:grid;place-content:center;text-align:center;padding:0 24px 160px;pointer-events:none}
.sky-empty b{font:400 clamp(30px,4.4vw,52px)/1.3 Lalezar,Vazirmatn,sans-serif;color:#F7E9C8}
.sky-empty p{max-width:460px;margin:10px auto 0;color:rgba(255,255,255,.72);font-size:14px;line-height:2}

.sky-id{position:absolute;z-index:4;inset:auto 0 92px 0;display:flex;align-items:flex-end;gap:20px}
.me-av{width:104px;height:104px;border-radius:28px;flex:none;display:grid;place-items:center;font:400 54px/1 Lalezar,Vazirmatn,sans-serif;color:#fff;
  background:linear-gradient(150deg,hsl(var(--h) 80% 66%),hsl(calc(var(--h) + 40) 60% 38%));box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 60px hsl(var(--h) 90% 60% / .5)}
.me-t{min-width:0;flex:1}
.me-t h1{margin:0;font:400 clamp(38px,5vw,62px)/1.15 Lalezar,Vazirmatn,sans-serif;color:#F7E9C8}
.me-t p{margin:4px 0 0;color:rgba(255,255,255,.78);font-size:14.5px;max-width:560px}
.me-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;line-height:1.7}
.me-meta span{white-space:nowrap;font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.me-meta .lvl{background:linear-gradient(90deg,#3DB4F2,#4ABA6B);border:0}
.me-act{display:flex;gap:8px;flex-wrap:wrap}
.sky-legend{position:absolute;z-index:4;inset:auto 0 46px 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:rgba(255,255,255,.62)}
.sky-legend span{display:inline-flex;align-items:center;gap:6px}
.sky-legend i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor}

/* stats strip overlapping the sky */
.pstrip{position:relative;z-index:6;margin-top:-30px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--fg);border-radius:var(--r-l);box-shadow:var(--shadow);overflow:hidden}
.pstrip div{padding:18px 16px;text-align:center;border-inline-start:1px solid var(--line)}
.pstrip div:first-child{border:0}
.pstrip b{display:block;font-size:26px;font-weight:800;color:var(--strong);font-variant-numeric:tabular-nums}
.pstrip small{color:var(--muted);font-size:12.5px}

.p2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px}
.pbox{padding:22px}
.pbox h2{margin:0 0 12px;font-size:18px;color:var(--strong)}
.big-time{font-size:15px;color:var(--muted)}
.big-time b{display:block;font:400 64px/1.1 Lalezar,Vazirmatn,sans-serif;color:var(--blue)}
.equiv{display:grid;gap:8px;margin-top:16px}
.equiv div{display:flex;gap:10px;align-items:center;font-size:13.5px;background:var(--fg2);border-radius:var(--r);padding:9px 12px}
.equiv span{font-size:20px}
.persona{margin:-4px 0 14px;font-size:15px;color:var(--text)}
.persona b{color:var(--strong)}
.dna{display:grid;gap:9px}
.dna .g{display:grid;grid-template-columns:96px minmax(0,1fr) 42px;gap:10px;align-items:center;font-size:13px}
.dna .g b{color:var(--strong);font-weight:700}
.dna .t{height:10px;border-radius:99px;background:var(--fg2);overflow:hidden}
.dna .t i{display:block;height:100%;width:0;border-radius:inherit;transition:width 1s cubic-bezier(.3,.9,.2,1)}
.dna .g span{color:var(--muted);text-align:left;font-variant-numeric:tabular-nums}
.muted{color:var(--muted);font-size:13px}
.row-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}

.heat-wrap{overflow-x:auto;padding-bottom:4px}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,13px);gap:4px;width:max-content;direction:rtl}
.heat i,.heat-lg i{width:13px;height:13px;border-radius:3px;background:var(--fg2);display:block}
.heat .l1,.heat-lg .l1{background:#BDE3F8}.heat .l2,.heat-lg .l2{background:#7CCAF3}.heat .l3,.heat-lg .l3{background:#3DB4F2}.heat .l4,.heat-lg .l4{background:#1B7FC0}
[data-theme="dark"] .heat .l1,[data-theme="dark"] .heat-lg .l1{background:#16405A}
.heat .today{outline:2px solid var(--strong);outline-offset:1px}
.heat-lg{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:11.5px;color:var(--muted);margin-top:10px}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{height:34px;padding:0 14px;border-radius:99px;font-size:13px;font-weight:700;background:var(--fg);color:var(--text);box-shadow:var(--shadow-s)}
.tabs button.on{background:var(--blue);color:#fff}
.tabs button small{opacity:.7;margin-inline-start:4px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.pcard{display:block;border-radius:var(--r-l);overflow:hidden;background:var(--fg);box-shadow:var(--shadow-s);transition:transform .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pcard .cv{aspect-ratio:2/3;background-size:cover;background-position:center;position:relative;display:grid;place-items:center;color:rgba(255,255,255,.9);font:400 44px Lalezar,sans-serif}
.pcard .sc{position:absolute;top:8px;left:8px;background:rgba(10,18,40,.8);color:#fff;font-size:12px;font-weight:800;border-radius:8px;padding:2px 8px}
.pcard .fv{position:absolute;top:8px;right:8px;font-size:15px}
.pcard .pb{position:absolute;inset:auto 0 0 0;height:4px;background:rgba(0,0,0,.35)}
.pcard .pb i{display:block;height:100%;background:#4ABA6B}
.pcard p{margin:0;padding:9px 11px 11px;font-size:13px;font-weight:700;color:var(--strong);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard p small{display:block;font-weight:600;color:var(--muted);font-size:11.5px}
.pempty{grid-column:1/-1}

.shelf{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory}
.shelf .pcard{flex:none;width:140px;scroll-snap-align:start}

.ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ac{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--r-l);background:var(--fg);box-shadow:var(--shadow-s)}
.ac .ic{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:24px;background:var(--fg2);filter:grayscale(1);opacity:.5}
.ac.on .ic{filter:none;opacity:1;background:linear-gradient(150deg,#FFF3D1,#FFD98A);box-shadow:0 0 0 3px rgba(247,193,66,.25)}
.ac b{display:block;color:var(--strong);font-size:14px}
.ac small{color:var(--muted);font-size:12px;line-height:1.7}

.pcm{padding:14px 16px;margin-bottom:10px}
.pcm a{font-weight:800;color:var(--blue);font-size:13px}
.pcm p{margin:6px 0 0;font-size:14px}
.pcm .spoil{filter:blur(5px)}

.dlg .fl-l{display:block;font-size:13px;font-weight:700;color:var(--strong);margin-bottom:12px}
.dlg input{display:block;width:100%;height:40px;margin-top:6px;border-radius:var(--r);border:1px solid var(--line);background:var(--fg2);padding:0 10px}
.dlg textarea{margin-top:6px;min-height:70px}
.hues{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.hues button{width:30px;height:30px;border-radius:50%;background:hsl(var(--h) 75% 58%)}
.hues button.on{box-shadow:0 0 0 3px var(--fg),0 0 0 5px hsl(var(--h) 75% 58%)}

@media (max-width:900px){.p2{grid-template-columns:minmax(0,1fr)}.pstrip{grid-template-columns:repeat(3,minmax(0,1fr))}.pstrip div:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:640px){
  .wsky{height:760px}
  .sky-id{flex-wrap:wrap;bottom:96px;gap:14px}
  .sky-legend{display:none}
  .me-t h1{font-size:40px}
  .me-av{width:72px;height:72px;border-radius:20px;font-size:38px}
  .me-act{width:100%}
  .pstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstrip div{border-top:1px solid var(--line)}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dna .g{grid-template-columns:84px minmax(0,1fr) 36px}
}