/* Shared header and existing lock logo; all colors follow the selected theme. */
.top.site-header{position:sticky;top:0;background:color-mix(in oklch,var(--surface) 82%,transparent);color:var(--ink);border-bottom:1px solid transparent;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);isolation:isolate;z-index:60;transition:box-shadow .25s,border-color .25s,background .25s}
.top.site-header.is-scrolled{border-bottom-color:var(--border-2);box-shadow:0 10px 30px -12px color-mix(in oklch,var(--ink) 18%,transparent);background:color-mix(in oklch,var(--surface) 92%,transparent)}
.site-header .top-in{display:flex;flex-wrap:wrap;min-height:76px;height:auto;gap:28px;padding-block:12px;align-items:center}
.site-header .brand{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none;max-width:100%;padding:0}
.site-header .brand-name{font-size:24px;font-weight:800;line-height:1.5;letter-spacing:0;color:var(--ink);transition:color .18s}
.site-header .brand:hover .brand-name{color:var(--primary)}
.site-header .brand-mark{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--primary),color-mix(in oklch,var(--primary) 70%,var(--ink)));color:var(--on-primary);border:0;box-shadow:0 6px 16px -6px color-mix(in oklch,var(--primary) 55%,transparent);transform:none;transition:transform .2s,box-shadow .2s}
.site-header .brand:hover .brand-mark{transform:translateY(-1px);box-shadow:0 10px 22px -8px color-mix(in oklch,var(--primary) 60%,transparent)}
.site-header .brand-mark:before{content:"";position:absolute;inset:4px;border:1px solid currentColor;opacity:.22;border-radius:8px}
.site-header .brand-mark .i{width:24px;height:24px;stroke-width:1.7}
.site-header .brand-logo{object-fit:contain;max-width:180px;max-height:56px;filter:none}
.site-header .nav{display:flex;align-items:center;gap:4px;margin-inline:auto;min-width:0;overflow:visible;width:auto;order:initial;padding:4px;background:color-mix(in oklch,var(--raised) 60%,transparent);border:1px solid var(--border);border-radius:999px}
.site-header .nav>a,.site-header .header-more>summary{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;font-size:13px;font-weight:600;line-height:1.6;color:var(--ink-2);text-decoration:none;border-radius:999px;white-space:nowrap;cursor:pointer;list-style:none;background:none;border:0;transition:color .18s,background .18s}
.site-header .nav>a>.i{width:16px;height:16px;opacity:.75}
.site-header .nav>a:hover,.site-header .header-more>summary:hover,.site-header .header-more[open]>summary{background:var(--surface);color:var(--ink)}
.site-header .nav>a[aria-current=page]{background:var(--surface);color:var(--primary);box-shadow:0 2px 8px -2px color-mix(in oklch,var(--ink) 14%,transparent)}
.site-header .nav>a[aria-current=page]:after{content:none}
.site-header a:focus-visible,.site-header summary:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.site-header .header-more{position:relative}.site-header .header-more>summary::-webkit-details-marker{display:none}.site-header .header-more .i{width:15px;height:15px}
.site-header .header-more[open]>summary>.i{transform:rotate(180deg)}
.site-header .header-more-pop{position:absolute;top:calc(100% + 12px);inset-inline-end:0;width:230px;padding:8px;background:var(--surface);border:1px solid var(--border-2);border-radius:14px;box-shadow:0 18px 44px -14px color-mix(in oklch,var(--ink) 28%,transparent);z-index:70;animation:header-pop .18s ease}
@keyframes header-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.site-header .header-more-pop a{display:flex;align-items:center;gap:12px;min-height:44px;padding:12px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:500;color:var(--ink-2);transition:background .15s,color .15s}
.site-header .header-more-pop a>.i{color:var(--primary);flex:none}
.site-header .header-more-pop a:hover{background:var(--raised);color:var(--ink)}
.site-header .nav-actions{display:flex;align-items:center;gap:10px;margin-inline-start:0;padding-inline-start:20px;border-inline-start:1px solid var(--border)}
.site-header .btn.sm{min-height:42px;padding:10px 16px;border-radius:999px;background:var(--primary);color:var(--on-primary);box-shadow:0 6px 16px -6px color-mix(in oklch,var(--primary) 50%,transparent);font-size:13px;font-weight:700;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s}
.site-header .btn.sm:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px color-mix(in oklch,var(--primary) 55%,transparent)}
.site-header .btn.ghost{background:none;border-color:var(--border-2);color:var(--ink);box-shadow:none}
.site-header .inbox-unread{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:23px;height:23px;padding-inline:5px;background:var(--surface);color:var(--ink);border-radius:999px;font-size:12px;font-weight:800;line-height:1;direction:ltr;font-variant-numeric:tabular-nums}
.site-header .umenu-btn{min-height:42px;border-radius:999px;background:var(--raised);border:1px solid var(--border);padding:5px 10px;gap:8px;transition:border-color .18s,background .18s}
.site-header .umenu-btn:hover{border-color:var(--border-2)}
.site-header .umenu-pop{border-radius:14px;z-index:70;animation:header-pop .18s ease}.site-header .umenu-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-header .tsw-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:999px;background:none;border:1px solid var(--border);color:var(--ink-2);transition:color .18s,border-color .18s}
.site-header .tsw-btn:hover{color:var(--ink);border-color:var(--border-2)}
.site-header .tsw-btn .hide-sm{display:none}.site-header .tsw-menu{z-index:70}
body.social-lab .social-tabs{top:var(--site-header-height,76px)}
body.social-lab .social-section{scroll-margin-top:calc(var(--site-header-height,76px) + 76px)}
@media(max-width:1150px){.site-header .top-in{gap:12px 16px;justify-content:space-between;padding-block:12px}.site-header .nav{order:3;width:100%;margin:0;border-radius:14px;justify-content:center}.site-header .nav-actions{margin-inline-start:auto}.site-header .header-more-pop{inset-inline-end:0}}
@media(max-width:560px){.site-header .top-in{min-height:68px;padding-block:10px;gap:10px 8px}.site-header .nav{gap:0;justify-content:space-between;padding:3px}.site-header .nav>a,.site-header .header-more>summary{padding:8px 10px;font-size:12px;gap:4px;min-height:38px}.site-header .nav>a>.i{display:none}.site-header .nav-actions{gap:6px;padding-inline-start:0;border:0}.site-header .btn.sm{min-height:38px;padding:8px 12px;font-size:12px}.site-header .auth-actions{gap:5px}.site-header .brand{gap:8px}.site-header .brand-name{font-size:20px}.site-header .brand-mark{width:36px;height:36px;border-radius:10px}.site-header .brand-mark .i{width:20px;height:20px}.site-header .brand-logo{max-width:110px;max-height:42px}.site-header .tsw-btn{width:36px;height:38px}.site-header .umenu-btn{min-height:38px;padding:4px 6px}.site-header .header-more-pop{width:200px}}
@media(max-width:370px){.site-header .top-in{column-gap:6px}.site-header .brand-name{font-size:18px}.site-header .brand-mark{width:32px;height:34px}.site-header .btn.sm{padding-inline:8px}.site-header .brand-logo{max-width:86px}}
@media(prefers-reduced-motion:reduce){.site-header *{transition:none!important;animation:none!important}}

/* سحابة متوهجة فوق صندوق الرسائل عند وجود رسالة جديدة */
.site-header .inbox-link{position:relative;overflow:visible}
.site-header .inbox-cloud{position:absolute;top:-14px;inset-inline-end:-12px;width:30px;height:30px;display:grid;place-items:center;pointer-events:none;z-index:2;animation:cloudFloat 2.8s ease-in-out infinite}
.site-header .inbox-cloud svg{width:30px;height:30px;fill:url(#none);fill:#fff;stroke:none;filter:drop-shadow(0 0 4px #4fd1ff) drop-shadow(0 0 9px #7c5cff) drop-shadow(0 0 14px #ff6fd8);animation:cloudGlow 2s ease-in-out infinite}
.site-header .inbox-cloud::after{content:"";position:absolute;top:9px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:#ff2e63;box-shadow:0 0 0 2px #fff,0 0 8px #ff2e63;animation:cloudDot 1.4s ease-out infinite}
.site-header .inbox-link.has-new{box-shadow:0 0 0 2px color-mix(in srgb,#7c5cff 55%,transparent),0 0 18px -2px #7c5cff}
@keyframes cloudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes cloudGlow{0%,100%{filter:drop-shadow(0 0 3px #4fd1ff) drop-shadow(0 0 7px #7c5cff) drop-shadow(0 0 10px #ff6fd8)}50%{filter:drop-shadow(0 0 6px #4fd1ff) drop-shadow(0 0 14px #7c5cff) drop-shadow(0 0 22px #ff6fd8)}}
@keyframes cloudDot{0%{box-shadow:0 0 0 2px #fff,0 0 0 2px rgba(255,46,99,.6)}100%{box-shadow:0 0 0 2px #fff,0 0 0 10px rgba(255,46,99,0)}}
@media(max-width:600px){.site-header .inbox-cloud{top:-11px;inset-inline-end:-9px;width:24px;height:24px}.site-header .inbox-cloud svg{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.site-header .inbox-cloud,.site-header .inbox-cloud svg,.site-header .inbox-cloud::after{animation:none}}

/* Theme-adaptive logo */
.brand-mark.brand-mark--logo,.site-header .brand-mark.brand-mark--logo{background:none!important;box-shadow:none!important;border:0!important;width:44px;height:44px;padding:0;overflow:visible}
.brand-mark--logo:before{display:none!important}
.brand-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 12px color-mix(in oklch,var(--primary) 40%,transparent));transition:transform .25s ease,filter .25s ease}
.brand:hover .brand-svg{transform:rotate(-6deg) scale(1.06)}
.brand-svg .bl-dot{animation:blPulse 2.4s ease-in-out infinite;transform-origin:37px 10px}
@keyframes blPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){.brand-svg .bl-dot{animation:none}}
@media(max-width:370px){.site-header .brand-mark.brand-mark--logo{width:34px;height:34px}}