/* ─── RESET & BASE ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Arial,sans-serif;
  color:#fff;
  background:url('background-dark.jpg') center/cover no-repeat;
}
body.light{background-image:url('Background.jpeg')}

/* ══════════════════════════════════
   DESKTOP — macOS shell
══════════════════════════════════ */
#desktop{display:flex;flex-direction:column;height:100vh;position:relative}
@media(max-width:767px){#desktop{display:none!important}}

/* ─── MENU BAR ─── */
#menubar{
  height:28px;flex-shrink:0;
  background:rgba(18,18,20,0.92);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;font-size:13px;font-weight:500;
  position:relative;z-index:999;
  transition:background 0.4s,border-color 0.4s,color 0.4s;
}
body.light #menubar{
  background:rgba(210,210,215,0.92);
  border-bottom-color:rgba(0,0,0,0.1);
  color:#1c1c1e;
}
.mb-l{display:flex;align-items:center;gap:18px}
.mb-r{display:flex;align-items:center;gap:12px;font-size:12px}
.apple-menu-white{display:block!important;opacity:1}
.apple-menu-black{display:none!important}
body.light .apple-menu-white{display:none!important}
body.light .apple-menu-black{display:block!important}
.mb-appname{font-weight:700}
.mb-link{opacity:0.82;cursor:pointer;transition:opacity 0.15s;user-select:none}
.mb-link:hover{opacity:1}
#menu-time{font-weight:600;letter-spacing:0.01em}
.mb-theme-btn{
  background:none;border:none;cursor:pointer;font-size:13px;
  line-height:1;padding:1px 4px;opacity:0.8;color:inherit;
  transition:opacity 0.15s,transform 0.2s;border-radius:4px;
}
.mb-theme-btn:hover{opacity:1;transform:scale(1.15)}

/* ─── LOGIN MODAL ─── */
#login-modal{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
  z-index:10000;
}
#login-modal.active{display:flex}
.login-card{
  background:#1c1c1e;border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;padding:32px;max-width:380px;width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
body.light .login-card{background:#f5f5f7;border-color:rgba(0,0,0,0.1)}
.login-card h2{font-size:28px;margin-bottom:12px;color:#fff}
body.light .login-card h2{color:#1c1c1e}
.login-card p{font-size:14px;color:rgba(255,255,255,0.6);margin-bottom:24px}
body.light .login-card p{color:rgba(0,0,0,0.55)}
.login-form{display:flex;flex-direction:column;gap:16px}
.login-input{
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;padding:12px 16px;color:#fff;font-size:15px;
  font-family:inherit;transition:background 0.2s,border-color 0.2s;
}
.login-input::placeholder{color:rgba(255,255,255,0.4)}
.login-input:focus{outline:none;background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4)}
body.light .login-input{background:rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.15);color:#1c1c1e}
body.light .login-input::placeholder{color:rgba(0,0,0,0.4)}
body.light .login-input:focus{background:rgba(0,0,0,0.12);border-color:rgba(0,0,0,0.25)}
.login-btn{
  background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;padding:12px 24px;color:#fff;font-size:15px;font-weight:500;
  cursor:pointer;transition:background 0.2s;font-family:inherit;
}
.login-btn:hover{background:rgba(255,255,255,0.25)}
.login-btn:active{transform:scale(0.98)}
body.light .login-btn{background:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.15);color:#1c1c1e}
body.light .login-btn:hover{background:rgba(0,0,0,0.15)}
.login-error{color:#ff6b6b;font-size:13px;margin-top:8px;text-align:center}

/* ─── DESKTOP AREA ─── */
#desktop-area{flex:1;position:relative;overflow:hidden}

/* Folder / App icons on desktop */
#d-icons{position:absolute;top:20px;left:18px;display:flex;flex-direction:column;gap:6px}
.d-icon{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;padding:8px 6px;border-radius:10px;width:78px;text-align:center;
  transition:background 0.15s,transform 0.12s;user-select:none;
}
.d-icon:hover{background:rgba(255,255,255,0.18)}
.d-icon:active{background:rgba(255,255,255,0.28);transform:scale(0.94)}
.d-icon img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.45))}
.d-icon-img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.45));border-radius:14.5px}
.d-icon span{font-size:11px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.65);line-height:1.3;word-break:break-word}

/* ─── GREETING ─── */
#d-greeting{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-52%);
  pointer-events:none; /* children override this */
  cursor:default;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}

/* ─── DESKTOP WIDGETS (top-left) ─── */
#desktop-widgets{
  position:absolute;top:20px;right:18px;
  display:flex;flex-direction:column;gap:10px;
  z-index:100;
}

/* Glass widget base */
.dw-widget{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:14px;
  padding:16px 18px;
  width:200px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.1);
  transition:background 0.3s,border-color 0.3s,transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#fff;
  font-size:0.88rem;
  font-weight:500;
  letter-spacing:0.01em;
}
.dw-widget:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.4);
  transform:scale(1.02) translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.2),0 0 0 1px rgba(255,255,255,0.1);
}
body.light .dw-widget{
  background:rgba(0,0,0,0.07);
  border-color:rgba(0,0,0,0.15);
  color:#1c1c1e;
  box-shadow:0 0 0 1px rgba(0,0,0,0.08);
}
body.light .dw-widget:hover{
  background:rgba(0,0,0,0.12);
  border-color:rgba(0,0,0,0.25);
}

/* Balloons widget */
#widget-balloons{cursor:pointer}
.dw-icon{font-size:28px;margin-bottom:6px;line-height:1}
.dw-title{font-size:0.88rem;font-weight:500;color:#fff;letter-spacing:0.01em;margin-bottom:4px}
body.light .dw-title{color:#fff}
.dw-sub{font-size:0.75rem;color:rgba(255,255,255,0.6);line-height:1.4}
body.light .dw-sub{color:#fff}
.dw-btn{
  margin-top:10px;width:100%;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:8px;padding:8px;
  color:#fff;font-size:0.75rem;font-weight:500;
  cursor:pointer;transition:background 0.2s,transform 0.15s;
  font-family:inherit;letter-spacing:0.01em;
}
.dw-btn:hover{background:rgba(255,255,255,0.18);transform:scale(1.02)}
.dw-btn:active{transform:scale(0.97)}
body.light .dw-btn{background:rgba(0,0,0,0.07);border-color:rgba(0,0,0,0.15);color:#fff}

/* Brand widgets */
.dw-brand{cursor:default;padding:14px 16px}
.dw-brand-logo{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;margin-bottom:8px;flex-shrink:0;
}
.dw-brand-name{font-size:0.88rem;font-weight:500;color:#fff;margin-bottom:1px}
body.light .dw-brand-name{color:#1c1c1e}
.dw-brand-tag{font-size:0.72rem;color:rgba(255,255,255,0.55);margin-bottom:8px;font-weight:400;letter-spacing:0.01em}
body.light .dw-brand-tag{color:rgba(0,0,0,0.45)}
.dw-brand-stat{font-size:1.1rem;font-weight:600;color:#fff;line-height:1}
body.light .dw-brand-stat{color:#1c1c1e}
.dw-brand-stat-lbl{font-size:0.68rem;color:rgba(255,255,255,0.5);margin-top:2px}
body.light .dw-brand-stat-lbl{color:rgba(0,0,0,0.45)}
.dw-brand-cta{
  margin-top:10px;width:100%;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:8px;padding:8px;
  color:rgba(255,255,255,0.85);font-size:0.75rem;font-weight:500;
  cursor:pointer;transition:background 0.2s,border-color 0.2s;
  font-family:inherit;text-align:center;
  text-decoration:none;display:block;
}
.dw-brand-cta:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.4);color:#fff}
body.light .dw-brand-cta{background:rgba(0,0,0,0.07);border-color:rgba(0,0,0,0.15);color:rgba(0,0,0,0.75)}
body.light .dw-brand-cta:hover{background:rgba(0,0,0,0.12)}
.apple-hello-svg{
  height:clamp(80px,11vw,150px);
  width:auto;
  filter:drop-shadow(0 2px 32px rgba(0,0,0,0.18));
  transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1),transform 0.4s cubic-bezier(0.16,1,0.3,1);
  opacity:0;
  transform:scale(0.95);
}
body.light .apple-hello-svg{
  stroke:#fff!important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.9))
    drop-shadow(0 2px 12px rgba(168,85,247,0.18))
    drop-shadow(0 0 1px rgba(0,0,0,0.08));
}
.apple-hello-svg.visible{
  opacity:1;
  transform:scale(1);
}
.apple-hello-svg path{
  stroke-dasharray:3000;
  stroke-dashoffset:3000;
  opacity:0;
  transition:stroke-dashoffset 0s, opacity 0s;
}
.apple-hello-svg path.ah-animated{
  opacity:1;
}
.d-greet-name{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:clamp(2rem,4vw,3.4rem);line-height:1;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),
             transform 0.9s cubic-bezier(0.16,1,0.3,1);
  cursor:default;
  /* pointer-events on so letter spans get mouse events */
  pointer-events:auto;
  display:inline-flex;align-items:baseline;gap:0;
}
.d-greet-name.visible{opacity:1;transform:translateY(0)}

/* Per-letter span — magnification */
.greet-letter{
  display:inline-block;
  color:#fff;
  transform-origin:bottom center;
  transform:scale(1);
  will-change:transform;
  white-space:pre; /* preserve spaces */
}
body.light .greet-letter{color:#fff}
.greet-letter.space{color:transparent}

/* CTA button */
.greet-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:100px;padding:11px 28px;
  color:#fff;font-size:0.88rem;font-weight:500;
  letter-spacing:0.01em;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;text-decoration:none;
  opacity:0;transform:translateY(8px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),
             transform 0.9s cubic-bezier(0.16,1,0.3,1),
             background 0.3s,border-color 0.3s,
             box-shadow 0.3s;
  pointer-events:none;
}
.greet-cta.visible{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
.greet-cta:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.4);
  transform:scale(1.04) translateY(-2px);
  box-shadow:0 10px 40px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.1);
}
.greet-cta:active{transform:scale(0.98) translateY(0)}
body.light .greet-cta{
  background:rgba(0,0,0,0.07);
  border-color:rgba(0,0,0,0.15);
  color:#fff;
}
body.light .greet-cta:hover{background:rgba(0,0,0,0.12)}

/* ─── DOCK ─── */
#dock-wrap{
  flex-shrink:0;display:flex;justify-content:center;
  padding:0 0 14px;position:relative;z-index:900;
}
#dock{
  display:flex;align-items:flex-end;gap:4px;
  /* Liquid glass — strong blur + tinted fill + multi-layer glow */
  background:rgba(28,28,32,0.55);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  will-change:transform;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:24px;padding:10px 16px 8px;
  box-shadow:
    0 16px 56px rgba(0,0,0,0.55),
    0 2px 12px rgba(0,0,0,0.3),
    inset 0 1.5px 0 rgba(255,255,255,0.28),   /* top shimmer */
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 0 0 0.5px rgba(255,255,255,0.06);        /* outer ring */
  overflow:visible;
  position:relative;
  transition:background 0.4s,border-color 0.4s,box-shadow 0.4s;
}
/* Liquid shimmer pseudo-element */
#dock::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,0.10) 0%,transparent 50%,rgba(255,255,255,0.04) 100%);
  pointer-events:none;
}
body.light #dock{
  background:rgba(255,255,255,0.38);
  border-color:rgba(255,255,255,0.68);
  box-shadow:0 8px 36px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06),inset 0 1.5px 0 rgba(255,255,255,0.85),inset 0 -1px 0 rgba(0,0,0,0.06);
}
body.light #dock::before{
  background:linear-gradient(160deg,rgba(255,255,255,0.55) 0%,transparent 55%,rgba(255,255,255,0.18) 100%);
}
.dk-item{
  /* Fixed height so dock never grows vertically when icons magnify */
  position:relative;cursor:pointer;
  width:54px;height:62px;flex-shrink:0;
  user-select:none;
}
.dk-item .mac-icon{
  /* Absolutely positioned — grows UPWARD, never affects dock height */
  position:absolute;
  bottom:9px;        /* leave room for the dot */
  left:50%;
  transform:translateX(-50%);
  transform-origin:bottom center;
  pointer-events:none;
  transition:none;
}
.dk-tip{
  /* sits above even the tallest magnified icon (max ~98px + 9px offset + gap) */
  position:absolute;bottom:120px;
  left:50%;transform:translateX(-50%);
  background:rgba(26,26,28,0.96);
  backdrop-filter:blur(10px);
  color:#fff;font-size:12px;font-weight:500;
  padding:5px 12px;border-radius:8px;white-space:nowrap;
  pointer-events:none;opacity:0;
  transition:opacity 0.1s;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
}
body.light .dk-tip{background:rgba(50,50,52,0.96)}
.dk-item:hover .dk-tip{opacity:1}
.dk-dot{
  position:absolute;bottom:1px;
  left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,0.8);
  opacity:0;transition:opacity 0.25s;
}
body.light .dk-dot{background:rgba(40,40,40,0.6)}
.dk-dot.on{opacity:1}
.dk-sep{
  width:1px;height:42px;background:rgba(255,255,255,0.2);
  margin:0 6px;align-self:center;flex-shrink:0;
}
body.light .dk-sep{background:rgba(0,0,0,0.14)}

@keyframes weather-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes dock-bounce{
  0%  {transform:translateX(-50%) translateY(0)}
  28% {transform:translateX(-50%) translateY(-14px)}
  55% {transform:translateX(-50%) translateY(-4px)}
  72% {transform:translateX(-50%) translateY(-9px)}
  100%{transform:translateX(-50%) translateY(0)}
}
.mac-icon.dock-bounce{animation:dock-bounce 0.52s cubic-bezier(0.34,1.56,0.64,1)}

/* ══════════════════════════════════
   APP WINDOWS
══════════════════════════════════ */
/* Backdrop — dims page when a window is open */
#win-backdrop{
  display:none;position:fixed;inset:0;z-index:199;
  background:rgba(0,0,0,0);
  transition:background 0.3s;
}
@media(max-width:767px){
  #win-backdrop.active{
    display:block;
    background:rgba(0,0,0,0.5);
  }
}

.win{
  position:fixed;display:flex;flex-direction:column;
  background:rgba(26,26,28,0.97);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  will-change:transform,opacity;
  border:1px solid rgba(255,255,255,0.11);
  border-radius:14px;
  box-shadow:
    0 32px 96px rgba(0,0,0,0.7),
    0 8px 32px rgba(0,0,0,0.4),
    0 0 0 0.5px rgba(255,255,255,0.04);
  width:780px;height:580px;
  top:50%;left:50%;
  min-width:280px;min-height:180px;
  visibility:hidden;pointer-events:none;opacity:0;
  transition:
    opacity 0.25s cubic-bezier(0.16,1,0.3,1),
    transform 0.32s cubic-bezier(0.34,1.5,0.64,1),
    visibility 0s linear 0.25s;
  transform:translate(-50%,-50%) scale(0.88) translateY(18px);
  z-index:200;
}
body.light .win{
  background:rgba(238,238,242,0.96);
  border-color:rgba(0,0,0,0.08);
  color:#1c1c1e;
  box-shadow:0 32px 96px rgba(0,0,0,0.18),0 8px 32px rgba(0,0,0,0.1);
}
.win.open{
  visibility:visible;pointer-events:all;opacity:1;
  transition:
    opacity 0.25s cubic-bezier(0.16,1,0.3,1),
    transform 0.32s cubic-bezier(0.34,1.5,0.64,1);
  transform:translate(-50%,-50%) scale(1) translateY(0);
}

/* title bar */
.win-tb{
  height:42px;min-height:42px;flex-shrink:0;
  background:rgba(36,36,38,0.98);
  border-bottom:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;padding:0 14px;
  cursor:grab;user-select:none;position:relative;
  border-radius:14px 14px 0 0;
}
body.light .win-tb{background:rgba(212,212,218,0.98);border-bottom-color:rgba(0,0,0,0.08)}
.win-tb:active{cursor:grabbing}
.tls{display:flex;gap:8px;align-items:center;cursor:default;padding:4px 6px;margin:-4px -6px;z-index:1;position:relative}
.tl{
  width:12px;height:12px;border-radius:50%;
  cursor:pointer;flex-shrink:0;
  border:0.5px solid rgba(0,0,0,0.2);
  transition:filter 0.15s;
}
.tl:hover{filter:brightness(1.1)}
.tl-c{background:#FF5F57}.tl-m{background:#FFBD2E}.tl-x{background:#28CA41}
.win-title-txt{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:13px;font-weight:600;color:rgba(255,255,255,0.85);pointer-events:none;
  letter-spacing:-0.01em;
}
body.light .win-title-txt{color:rgba(0,0,0,0.75)}
.mob-back{
  display:none;background:none;border:none;color:rgba(255,255,255,0.7);
  font-size:13px;font-weight:500;cursor:pointer;padding:4px 0;
}

/* body */
.win-body{
  flex:1;overflow-y:auto;padding:24px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent;
}
.win-body::-webkit-scrollbar{width:5px}
.win-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}

/* Mobile override — floating sheet */
@media(max-width:767px){
  .win{
    width:92%!important;height:82%!important;
    top:auto!important;bottom:16px!important;
    left:50%!important;
    transform:translateX(-50%) translateY(calc(100% + 32px))!important;
    border-radius:22px!important;
    background:rgba(28,28,30,0.92)!important;
    backdrop-filter:blur(20px) saturate(1.5)!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.5)!important;
    border:1px solid rgba(255,255,255,0.13)!important;
    box-shadow:0 24px 64px rgba(0,0,0,0.55),0 0 0 0.5px rgba(255,255,255,0.06)!important;
    opacity:1;
    transition:transform 0.42s cubic-bezier(0.32,0.72,0,1),visibility 0s linear 0.42s;
  }
  .win.open{
    transform:translateX(-50%) translateY(var(--drag-y,0px))!important;
    transition:transform 0.42s cubic-bezier(0.32,0.72,0,1);
  }
  .win.win-dragging,
  .win.win-dragging.open{
    transition:none!important;
  }
  .win-tb{
    border-radius:22px 22px 0 0;cursor:default;
    background:transparent!important;
    border-bottom:1px solid rgba(255,255,255,0.07)!important;
    padding-top:10px!important;
  }
  /* pull handle */
  .win-tb::before{
    content:'';display:block;
    width:36px;height:4px;border-radius:2px;
    background:rgba(255,255,255,0.28);
    position:absolute;top:7px;left:50%;transform:translateX(-50%);
  }
  .tls{display:flex}
  .tl-m,.tl-x{display:none}
  .tl-c{width:16px;height:16px}
  .mob-back{display:none}
  .win-body{padding:18px}
  body.light .win{
    background:rgba(242,242,247,0.94)!important;
    border-color:rgba(0,0,0,0.08)!important;
    box-shadow:0 24px 64px rgba(0,0,0,0.18)!important;
  }
  body.light .win-tb{border-bottom-color:rgba(0,0,0,0.07)!important}
  body.light .win-tb::before{background:rgba(0,0,0,0.18)}
}

/* ─── Window Content ─── */
.wc-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.75rem;font-weight:600;
  background:rgba(255,107,157,0.12);border:1px solid rgba(255,107,157,0.25);
  color:#FF6B9D;border-radius:100px;padding:3px 12px;margin-bottom:14px;
}
.wc-h{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.9rem;color:#fff;margin-bottom:6px;line-height:1.1}
.wc-sub{font-size:0.875rem;color:rgba(255,255,255,0.5);margin-bottom:22px;line-height:1.6}

/* ── ABOUT / FINDER ── */
.ab-hero{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.ab-avatar{
  width:68px;height:68px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#FF6B9D,#A855F7);
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:1.6rem;color:#fff;
}
.ab-name{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:2px}
body.light .ab-name{color:#1c1c1e}
.ab-handle{font-size:0.85rem;color:#FF6B9D;font-weight:500}
.ab-loc{font-size:0.8rem;color:rgba(255,255,255,0.45);margin-top:3px}
body.light .ab-loc{color:rgba(0,0,0,0.4)}
.ab-bio{font-size:0.88rem;color:rgba(255,255,255,0.6);line-height:1.7;margin-bottom:22px}
body.light .ab-bio{color:rgba(0,0,0,0.55)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px}
.stat-box{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:14px 8px;text-align:center;
}
body.light .stat-box{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.07)}
.stat-e{font-size:1.2rem;margin-bottom:5px}
.stat-v{
  font-family:'Instrument Serif',serif;font-size:1.4rem;line-height:1;
  background:linear-gradient(135deg,#FF6B9D,#A855F7);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-l{font-size:0.68rem;color:rgba(255,255,255,0.38);margin-top:4px}
body.light .stat-l{color:rgba(0,0,0,0.38)}
.soc-row{display:flex;gap:10px;flex-wrap:wrap}
.soc-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;padding:8px 14px;color:rgba(255,255,255,0.8);
  text-decoration:none;font-size:0.83rem;font-weight:500;cursor:pointer;
  transition:all 0.2s;
}
body.light .soc-btn{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.1);color:rgba(0,0,0,0.7)}
.soc-btn:hover{background:rgba(255,107,157,0.12);border-color:rgba(255,107,157,0.35);color:#FF6B9D}

/* ── WORK — Apple Photos Style ── */
#win-work .win-body{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}

.photos-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;
  gap:8px;
}
body.light .photos-toolbar{border-bottom-color:rgba(0,0,0,0.07)}
.photos-tabs{display:flex;gap:2px}
.photos-tab{
  padding:5px 14px;font-size:0.82rem;font-weight:500;
  color:rgba(255,255,255,0.5);cursor:pointer;
  border-radius:8px;transition:all 0.15s;user-select:none;
}
body.light .photos-tab{color:rgba(0,0,0,0.45)}
.photos-tab:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.07)}
body.light .photos-tab:hover{color:rgba(0,0,0,0.7);background:rgba(0,0,0,0.05)}
.photos-tab.active{color:#fff;background:rgba(255,255,255,0.12);font-weight:600}
body.light .photos-tab.active{color:#1c1c1e;background:rgba(0,0,0,0.1)}
.photos-year-lbl{
  font-size:0.75rem;font-weight:600;color:rgba(255,255,255,0.35);
  letter-spacing:0.04em;text-transform:uppercase;
}
body.light .photos-year-lbl{color:rgba(0,0,0,0.3)}

.photos-body{flex:1;overflow-y:auto;padding:0}
.photos-body::-webkit-scrollbar{width:5px}
.photos-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}

/* Memories strip */
.memories-strip{
  padding:14px 16px 4px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:2px;
}
body.light .memories-strip{border-bottom-color:rgba(0,0,0,0.05)}
.memories-label{
  font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(255,255,255,0.35);margin-bottom:10px;
}
body.light .memories-label{color:rgba(0,0,0,0.3)}
.memories-row{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;
}
.memories-row::-webkit-scrollbar{display:none}
.memory-card{
  flex-shrink:0;width:150px;height:92px;border-radius:10px;
  overflow:hidden;position:relative;cursor:pointer;
  transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.22s;
}
.memory-card:hover{transform:scale(1.05);box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.memory-bg{
  width:100%;height:100%;background-size:cover;background-position:center;
}
.memory-overlay{
  position:absolute;inset:0;
  background:linear-gradient(160deg,transparent 40%,rgba(0,0,0,0.62));
  display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px;
}
.memory-tag{font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.7);margin-bottom:1px}
.memory-title{font-size:0.76rem;font-weight:700;color:#fff;line-height:1.2}

/* Photo sections */
.photo-section{padding:12px 16px 0}
.photo-section-hd{
  font-size:1.2rem;font-weight:700;color:#fff;
  letter-spacing:-0.025em;margin-bottom:2px;
}
body.light .photo-section-hd{color:#1c1c1e}
.photo-month-hd{
  font-size:0.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:0.07em;color:rgba(255,255,255,0.35);
  margin-top:14px;margin-bottom:8px;
}
body.light .photo-month-hd{color:rgba(0,0,0,0.3)}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:2px}
.photo-grid.hero{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}

.photo-thumb{
  position:relative;overflow:hidden;cursor:pointer;
  background:#111;
  transition:opacity 0.18s;
  border-radius:8px;
  padding:0;
  text-decoration:none;
  display:block;
}
.photo-thumb:hover{opacity:0.9}
.photo-thumb:hover .photo-overlay{opacity:1}
.photo-thumb::before{content:'';display:block;padding-top:100%}
.photo-thumb.tall::before{padding-top:200%}
.photo-thumb.wide{grid-column:span 2}
.photo-thumb.wide::before{padding-top:50%}
.photo-thumb.hero-main{grid-row:span 2}
.photo-thumb.hero-main::before{padding-top:100%}

.photo-inner{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  background-size:cover;background-position:center;
  border-radius:8px;
}
.photo-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.4);
  font-size:0.95rem;font-weight:600;
  color:#fff;
  opacity:0;
  transition:opacity 0.2s;
  border-radius:8px;
}
.photo-thumb:hover .photo-inner{
  background-blend-mode:darken;
}
.photo-label{
  padding:6px 8px;width:100%;
  background:linear-gradient(transparent,rgba(0,0,0,0.6));
  font-size:0.67rem;font-weight:600;color:#fff;line-height:1.25;
}
.photo-tag{display:block;font-size:0.57rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.6);margin-bottom:1px}
.photo-section-pad{height:16px}

/* ── RESOURCES & SHOP ── */
.tab-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}

/* ── WALLPAPER PACKS GRID ── */
#wp-pack-grid-wrap{
  width:100%;height:100%;overflow-y:auto;padding:24px 20px;
}
#wp-pack-grid-wrap::-webkit-scrollbar{width:5px}
#wp-pack-grid-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}
#wp-pack-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media(max-width:540px){
  #wp-pack-grid{grid-template-columns:1fr 1fr;gap:12px}
  #wp-pack-grid-wrap{padding:14px 12px}
}
.wp-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
  aspect-ratio:4/5;
  transition:transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
             box-shadow 0.32s cubic-bezier(0.34,1.56,0.64,1);
  will-change:transform;
  text-decoration:none;
  display:block;
}
.wp-card:hover{
  transform:scale(1.03) translateY(-5px);
  box-shadow:0 24px 64px rgba(0,0,0,0.6);
}
.wp-card:active{transform:scale(0.98) translateY(0)}
.wp-card-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.wp-card:hover .wp-card-img{transform:scale(1.06)}
/* gradient overlays */
.wp-card-grad-top{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.2) 38%,transparent 60%);
  pointer-events:none;
}
.wp-card-grad1{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.25) 38%,transparent 60%);
}
.wp-card-grad2{
  position:absolute;bottom:0;left:0;right:0;height:50%;
  background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 100%);
  backdrop-filter:blur(1px);
}
.wp-card-grad3{display:none}
/* top row — title left, price right */
.wp-card-top{
  position:absolute;top:0;left:0;right:0;
  padding:14px 14px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.wp-card-title{
  font-size:1rem;font-weight:700;color:#fff;line-height:1.25;
  letter-spacing:-0.2px;flex:1;min-width:0;
}
.wp-card-price{
  flex-shrink:0;
  font-size:0.78rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);
  border-radius:100px;padding:2px 9px;white-space:nowrap;
}
.wp-card-price.free{
  background:rgba(52,199,89,0.2);border-color:rgba(52,199,89,0.4);color:#30D158;
}
/* bottom area — count left, download icon right */
.wp-card-body{
  position:absolute;bottom:0;left:0;right:0;
  padding:0 12px 11px;
  display:flex;align-items:center;justify-content:space-between;
}
.wp-card-stat{
  display:flex;align-items:center;gap:5px;
  font-size:0.67rem;color:rgba(255,255,255,0.6);font-weight:500;
}
.wp-card-stat svg{width:12px;height:12px;stroke:rgba(255,255,255,0.6);flex-shrink:0}
.wp-card-dl-btn{
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:8px;padding:5px 6px;
  color:#fff;
  cursor:pointer;transition:background 0.2s,transform 0.15s;
  display:flex;align-items:center;justify-content:center;
}
.wp-card-dl-btn svg{display:block;width:12px;height:12px;stroke:#fff;flex-shrink:0}
.wp-card-dl-btn:hover{background:rgba(255,255,255,0.24)}
.wp-card-dl-btn:active{transform:scale(0.97)}
.tab-btn{
  font-size:0.8rem;font-weight:500;color:rgba(255,255,255,0.55);
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  border-radius:100px;padding:5px 15px;cursor:pointer;transition:all 0.2s;
}
.tab-btn:hover,.tab-btn.active{background:#FF6B9D;color:#fff;border-color:#FF6B9D}
.cards-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px;
  justify-content: center;
}
@media (max-width: 768px) {
  .cards-grid {
    justify-content: flex-start;
  }
}
.card-item{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:18px;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;transition:all 0.2s;
}
.card-item:hover{background:rgba(255,107,157,0.07);border-color:rgba(255,107,157,0.25);transform:translateY(-2px)}
.card-ico{font-size:1.7rem}
.card-title{font-size:0.9rem;font-weight:600;color:#fff}
.card-desc{font-size:0.78rem;color:rgba(255,255,255,0.48);line-height:1.55;flex:1}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.card-badge{font-size:0.67rem;font-weight:600;background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.25);color:#A855F7;border-radius:100px;padding:2px 9px}
.card-dl{font-size:0.72rem;color:rgba(255,255,255,0.3)}
.card-price{font-family:'Instrument Serif',serif;font-size:1.1rem;color:#fff}
.card-view{
  font-size:0.75rem;font-weight:600;color:#FF6B9D;
  background:rgba(255,107,157,0.1);border:1px solid rgba(255,107,157,0.2);
  border-radius:100px;padding:4px 12px;text-decoration:none;transition:all 0.2s;
}
.card-view:hover{background:#FF6B9D;color:#fff}
.empty-state{text-align:center;padding:40px 20px;color:rgba(255,255,255,0.3);font-size:0.88rem;grid-column:1/-1}
.empty-state a{color:#FF6B9D;text-decoration:none}

/* ── COLLABS / MESSAGES ── */
#win-collabs .win-body{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
.msg-hd{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0;
}
.msg-av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:rgba(255,255,255,0.1);
}
.msg-nm{font-size:0.87rem;font-weight:600;color:#fff}
.msg-st{font-size:0.71rem;color:rgba(255,255,255,0.38)}
.msg-stream{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg-stream::-webkit-scrollbar{width:5px}
.msg-stream::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}
.msg-grp{display:flex;gap:7px;align-items:flex-end}
.msg-grp.mine{flex-direction:row-reverse}
.msg-bav{
  width:25px;height:25px;border-radius:50%;flex-shrink:0;margin-bottom:2px;
  display:flex;align-items:center;justify-content:center;font-size:0.78rem;
  background:rgba(255,255,255,0.1);
}
.msg-bav.me{background:linear-gradient(135deg,#FF6B9D,#A855F7);color:#fff;font-size:0.72rem;font-weight:600}
.bbl{max-width:76%;border-radius:17px;padding:8px 13px;font-size:0.8rem;line-height:1.5}
.bbl-them{background:rgba(58,58,60,0.95);color:rgba(255,255,255,0.88);border-bottom-left-radius:3px}
.bbl-me{background:#0B84FF;color:#fff;border-bottom-right-radius:3px}
.msg-bar{
  padding:8px 12px;border-top:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.msg-bar-input{
  flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.11);
  border-radius:20px;padding:7px 14px;color:rgba(255,255,255,0.35);
  font-size:0.79rem;font-family:inherit;cursor:default;
}
.msg-cta{
  background:linear-gradient(135deg,#FF6B9D,#A855F7);
  border:none;border-radius:20px;padding:7px 16px;
  color:#fff;font-size:0.79rem;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:opacity 0.2s;
}
.msg-cta:hover{opacity:0.88}

/* ── CONTACT / MAIL ── */
#win-contact .win-body{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
.mail-form{
  display:flex;flex-direction:column;height:100%;padding:16px;gap:12px;
}
.mail-field{
  display:flex;flex-direction:column;gap:4px;
  flex-shrink:0;
}
.mail-field-label{
  font-size:0.78rem;font-weight:600;color:rgba(255,255,255,0.6);
  letter-spacing:0.01em;
}
.mail-field input,
.mail-field textarea{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:8px;padding:10px 12px;
  color:#fff;font-size:0.85rem;font-family:inherit;
  transition:background 0.2s,border-color 0.2s;
}
.mail-field input:focus,
.mail-field textarea:focus{
  outline:none;
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.3);
}
.mail-field input::placeholder,
.mail-field textarea::placeholder{
  color:rgba(255,255,255,0.35);
}
body.light .mail-field input,
body.light .mail-field textarea{
  background:rgba(0,0,0,0.05);
  border-color:rgba(0,0,0,0.1);
  color:#1c1c1e;
}
body.light .mail-field input::placeholder,
body.light .mail-field textarea::placeholder{
  color:rgba(0,0,0,0.4);
}
body.light .mail-field-label{
  color:rgba(0,0,0,0.6);
}
.mail-message{
  flex:1;min-height:120px;resize:none;}
.mail-actions{
  display:flex;gap:8px;flex-shrink:0;
}
.mail-send-btn{
  flex:1;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:8px;padding:11px 28px;
  color:#fff;font-size:0.88rem;font-weight:500;
  letter-spacing:0.01em;
  cursor:pointer;transition:background 0.3s,border-color 0.3s;
}
.mail-send-btn:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.4);
}
.mail-send-btn:active{
  transform:scale(0.98);
}
body.light .mail-send-btn{
  background:rgba(0,0,0,0.07);
  border-color:rgba(0,0,0,0.15);
  color:#1c1c1e;
}
body.light .mail-send-btn:hover{
  background:rgba(0,0,0,0.12);
}
.form-status{
  font-size:0.78rem;color:rgba(255,255,255,0.5);text-align:center;
}

/* ── MEDIA KIT ── */
#win-mediakit .win-body{padding:0!important;overflow:hidden!important;display:flex!important}
/* ── NOTES / RESOURCES ── */
.notes-layout{display:flex;width:100%;height:100%;overflow:hidden}

/* ── DIGITAL PRODUCTS (Resources) ── */
#win-resources .win-body{padding:0!important;overflow-y:auto!important}
#win-resources .win-body::-webkit-scrollbar{width:5px}
#win-resources .win-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}
#res-wrap{padding:20px 20px 28px}
.res-featured-card{
  background:linear-gradient(145deg,#001428 0%,#003878 45%,#000c1a 100%);
  border-radius:16px;padding:24px 22px;margin-bottom:20px;
  border:0.5px solid rgba(255,255,255,0.1);
  position:relative;overflow:hidden;
}
body.light .res-featured-card{background:linear-gradient(145deg,#003878 0%,#0055b8 50%,#002050 100%)}
.res-featured-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin-bottom:14px;display:block}
.res-featured-eyebrow{font-size:10px;font-weight:700;color:rgba(255,255,255,0.55);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px}
.res-featured-title{font-size:20px;font-weight:800;color:#fff;letter-spacing:-0.4px;margin-bottom:8px;line-height:1.2}
.res-featured-desc{font-size:12px;color:rgba(255,255,255,0.65);line-height:1.5;margin-bottom:16px}
.res-featured-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.res-featured-price{font-size:15px;font-weight:700;color:#fff}
.res-section-hd{font-size:10px;font-weight:700;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px}
body.light .res-section-hd{color:rgba(0,0,0,0.35)}
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:540px){.res-grid{grid-template-columns:1fr}}
.res-card{
  background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;
}
body.light .res-card{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08)}
.res-card-header{display:flex;align-items:center;gap:7px}
.res-card-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.res-card-type{font-size:10px;font-weight:700;letter-spacing:0.02em}
.res-card-title{font-size:13px;font-weight:700;color:#fff;letter-spacing:-0.2px;line-height:1.3}
body.light .res-card-title{color:#1c1c1e}
.res-card-desc{font-size:11px;color:rgba(255,255,255,0.5);line-height:1.45;flex:1}
body.light .res-card-desc{color:rgba(0,0,0,0.45)}
.res-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.res-card-price{font-size:12px;font-weight:700;color:#fff}
body.light .res-card-price{color:#1c1c1e}
.res-get-btn{
  padding:5px 11px;background:rgba(10,132,255,0.16);border:0.5px solid rgba(10,132,255,0.3);
  color:#0A84FF;border-radius:100px;font-size:10px;font-weight:700;
  text-decoration:none;transition:background 0.15s;white-space:nowrap;cursor:pointer;
}
body.light .res-get-btn{color:#007AFF;background:rgba(0,122,255,0.1);border-color:rgba(0,122,255,0.22)}
.res-get-btn:hover{background:rgba(10,132,255,0.28)}
body.light .res-get-btn:hover{background:rgba(0,122,255,0.18)}
.res-get-btn.featured-btn{
  background:#0A84FF;color:#fff;border-color:#0A84FF;
  padding:8px 18px;font-size:12px;font-weight:700;border-radius:100px;
}
body.light .res-get-btn.featured-btn{background:#007AFF;border-color:#007AFF}
.res-get-btn.featured-btn:hover{opacity:0.88}
.res-empty{text-align:center;color:rgba(255,255,255,0.3);font-size:13px;padding:32px 0}
body.light .res-empty{color:rgba(0,0,0,0.3)}
.notes-sidebar{width:0;flex-shrink:0;display:none}

/* dark mode → deep charcoal bg */
.notes-main{
  flex:1;overflow-y:auto;
  background:#1c1c1e;
  padding:28px 28px 40px;
}
.notes-main::-webkit-scrollbar{width:5px}
.notes-main::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px}

/* light mode → warm cream paper bg */
body.light .notes-main{background:#f5f0e8}

.notes-editor{max-width:560px;margin:0 auto}

/* date chip */
.notes-date{
  font-size:0.68rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(255,255,255,0.35);margin-bottom:6px;
}
body.light .notes-date{color:rgba(0,0,0,0.35)}

.notes-title{
  font-size:1.55rem;font-weight:700;color:#fff;
  margin-bottom:4px;letter-spacing:-0.03em;line-height:1.2;
}
body.light .notes-title{color:#1c1c1e}

.notes-byline{
  font-size:0.8rem;color:rgba(255,255,255,0.4);margin-bottom:20px;
  display:flex;align-items:center;gap:6px;
}
body.light .notes-byline{color:rgba(0,0,0,0.4)}

/* divider */
.notes-divider{
  height:1px;background:rgba(255,255,255,0.1);margin:0 0 22px;border:none;
}
body.light .notes-divider{background:rgba(0,0,0,0.1)}

/* stat cards grid */
.notes-stat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px;
}
.notes-stat-card{
  background:rgba(255,255,255,0.07);border-radius:14px;padding:14px 16px;
  border:1px solid rgba(255,255,255,0.1);
}
body.light .notes-stat-card{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.07)}
.notes-stat-val{
  font-size:1.35rem;font-weight:700;letter-spacing:-0.03em;color:#fff;line-height:1;
}
body.light .notes-stat-val{color:#1c1c1e}
.notes-stat-lbl{
  font-size:0.7rem;color:rgba(255,255,255,0.45);margin-top:3px;font-weight:500;
}
body.light .notes-stat-lbl{color:rgba(0,0,0,0.45)}

/* section heading */
.notes-sh{
  font-size:0.68rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;
  color:rgba(255,255,255,0.35);margin:22px 0 10px;
}
body.light .notes-sh{color:rgba(0,0,0,0.35)}

/* checklist rows */
.notes-check-list{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:6px}
.notes-check-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.9rem;color:rgba(255,255,255,0.75);line-height:1.5;
}
body.light .notes-check-list li{color:rgba(0,0,0,0.75)}
.notes-check-list li::before{
  content:'✦';font-size:0.6rem;color:rgba(255,255,255,0.3);
  flex-shrink:0;margin-top:5px;
}
body.light .notes-check-list li::before{color:rgba(0,0,0,0.3)}

.notes-section{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.07)}
body.light .notes-section{border-bottom-color:rgba(0,0,0,0.07)}
.notes-section:last-child{border-bottom:none;margin-bottom:0}

.notes-section h3{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:6px;letter-spacing:-0.01em}
body.light .notes-section h3{color:#1c1c1e}
.notes-section h4{font-size:0.88rem;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:8px;margin-top:0;text-transform:uppercase;letter-spacing:0.05em;font-size:0.68rem}
body.light .notes-section h4{color:rgba(0,0,0,0.6)}
.notes-section p{margin-bottom:8px;font-size:0.9rem;color:rgba(255,255,255,0.7);line-height:1.6}
body.light .notes-section p{color:rgba(0,0,0,0.7)}
.notes-section ul{list-style:none;padding-left:0;margin:8px 0}
.notes-section li{padding:5px 0;font-size:0.9rem;color:rgba(255,255,255,0.72)}
body.light .notes-section li{color:rgba(0,0,0,0.72)}

.notes-link{
  color:#fff;text-decoration:none;font-weight:600;
  border-bottom:1.5px solid rgba(255,255,255,0.3);transition:border-color 0.2s;
}
.notes-link:hover{border-bottom-color:rgba(255,255,255,0.7)}
body.light .notes-link{color:#1c1c1e;border-bottom-color:rgba(0,0,0,0.25)}
body.light .notes-link:hover{border-bottom-color:rgba(0,0,0,0.6)}

.notes-subtext{font-size:0.78rem;color:rgba(255,255,255,0.4);margin-top:5px;line-height:1.5}
body.light .notes-subtext{color:rgba(0,0,0,0.4)}

.notes-cta{
  margin-top:14px;width:100%;
  background:#fff;
  border:none;border-radius:12px;padding:12px 16px;
  color:#1c1c1e;font-size:0.88rem;font-weight:600;
  cursor:pointer;transition:opacity 0.2s;
  font-family:inherit;letter-spacing:-0.01em;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.notes-cta:hover{opacity:0.85}
body.light .notes-cta{background:#1c1c1e;color:#fff}

/* ── MEDIA KIT CARDS (notes window) ── */
.mk2-hero{
  background:linear-gradient(135deg,#0a0a0f 0%,#0d1a35 40%,#0a0a1a 100%);
  border-radius:14px;padding:22px;margin-bottom:18px;position:relative;overflow:hidden;
}
.mk2-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 50%,rgba(0,122,255,0.18) 0%,transparent 60%),
             radial-gradient(ellipse at 15% 80%,rgba(94,92,230,0.12) 0%,transparent 50%);
  pointer-events:none;
}
.mk2-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;position:relative}
.mk2-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#007AFF,#5856D6);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:#fff;
  box-shadow:0 0 0 2.5px rgba(0,122,255,0.3);
  overflow:hidden;
}
.mk2-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mk2-identity{margin-left:12px}
.mk2-name{font-size:17px;font-weight:800;letter-spacing:-0.4px;color:#fff}
.mk2-handle{font-size:11px;color:rgba(255,255,255,0.45);margin-top:1px}
.mk2-updated{font-size:10px;color:rgba(255,255,255,0.3);text-align:right;line-height:1.7}
.mk2-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative}
.mk2-hstat{
  background:rgba(255,255,255,0.07);border:0.5px solid rgba(255,255,255,0.1);
  border-radius:10px;padding:12px;
}
.mk2-hstat-val{font-size:17px;font-weight:800;letter-spacing:-0.5px;color:#fff;line-height:1}
.mk2-hstat-lbl{font-size:9px;color:rgba(255,255,255,0.4);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em}
.mk2-hstat-sub{font-size:9px;color:rgba(255,255,255,0.25);margin-top:2px}
/* audience cards */
.mk2-section-title{
  font-size:9px;font-weight:700;color:rgba(255,255,255,0.3);
  text-transform:uppercase;letter-spacing:0.09em;
  padding-bottom:7px;border-bottom:0.5px solid rgba(255,255,255,0.08);margin-bottom:10px;
}
body.light .mk2-section-title{color:rgba(0,0,0,0.3);border-bottom-color:rgba(0,0,0,0.1)}
.mk2-audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.mk2-audience-card{
  background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:14px;
}
body.light .mk2-audience-card{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08)}
.mk2-audience-card-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:rgba(255,255,255,0.3);margin-bottom:10px}
body.light .mk2-audience-card-title{color:rgba(0,0,0,0.35)}
.mk2-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.mk2-bar-row:last-of-type{margin-bottom:0}
.mk2-bar-lbl{font-size:11px;font-weight:600;color:rgba(255,255,255,0.8);min-width:60px;flex-shrink:0}
body.light .mk2-bar-lbl{color:rgba(0,0,0,0.75)}
.mk2-bar-track{flex:1;height:5px;background:rgba(255,255,255,0.1);border-radius:100px;overflow:hidden}
body.light .mk2-bar-track{background:rgba(0,0,0,0.08)}
.mk2-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,#007AFF,#5856D6)}
.mk2-bar-fill-green{background:linear-gradient(90deg,#34C759,#30D158)}
.mk2-bar-pct{font-size:10px;font-weight:600;color:rgba(255,255,255,0.5);width:34px;text-align:right;flex-shrink:0}
body.light .mk2-bar-pct{color:rgba(0,0,0,0.45)}
.mk2-age-summary{margin-top:9px;padding-top:9px;border-top:0.5px solid rgba(255,255,255,0.07);font-size:10px;color:rgba(255,255,255,0.5)}
body.light .mk2-age-summary{border-top-color:rgba(0,0,0,0.08);color:rgba(0,0,0,0.45)}
.mk2-age-summary strong{color:#fff}
body.light .mk2-age-summary strong{color:#1c1c1e}
/* platform row */
.mk2-plat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mk2-plat-card{
  background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:12px;text-align:center;
}
body.light .mk2-plat-card{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08)}
.mk2-plat-icon{font-size:16px;margin-bottom:6px}
.mk2-plat-val{font-size:16px;font-weight:800;letter-spacing:-0.4px;color:#fff;line-height:1}
body.light .mk2-plat-val{color:#1c1c1e}
.mk2-plat-lbl{font-size:9px;color:rgba(255,255,255,0.4);margin-top:4px;font-weight:500}
body.light .mk2-plat-lbl{color:rgba(0,0,0,0.45)}
.mk2-web-card{
  grid-column:1/-1;display:flex;align-items:center;gap:14px;text-align:left;
  background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:12px 16px;
}
body.light .mk2-web-card{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08)}
.mk2-web-card .mk2-plat-icon{margin-bottom:0}
.mk2-web-card .mk2-plat-val{text-align:left}
.mk2-web-card .mk2-plat-lbl{text-align:left}
.notes-hd,.notes-row,.notes-cnt{display:none}

/* ── APP STORE / SHOP ── */
#win-shop .win-body{padding:0!important;overflow-y:auto!important}
#win-shop .win-body::-webkit-scrollbar{width:5px}
#win-shop .win-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}

/* ── APP STORE REDESIGN ── */
#win-shop .win-body { background:#1c1c1e; }
body.light #win-shop .win-body { background:#f2f2f7; }

/* Tab bar */
.as2-tabs {
  display:flex; gap:0;
  border-bottom:0.5px solid rgba(84,84,88,0.6);
  background:#1c1c1e;
  padding:0 16px;
  position:sticky; top:0; z-index:10;
  flex-shrink:0;
}
body.light .as2-tabs { background:#f2f2f7; border-bottom-color:rgba(60,60,67,0.12); }
.as2-tab {
  padding:10px 14px;
  font-size:0.81rem; font-weight:600;
  color:rgba(235,235,245,0.55);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-0.5px;
  transition:color 0.15s;
  white-space:nowrap; letter-spacing:-0.01em;
  user-select:none;
}
body.light .as2-tab { color:rgba(60,60,67,0.55); }
.as2-tab.active { color:#0A84FF; border-bottom-color:#0A84FF; }
body.light .as2-tab.active { color:#007AFF; border-bottom-color:#007AFF; }

/* Pane wrapper */
.as2-pane { padding:16px; }

/* Date line */
.as2-date-hd {
  font-size:0.63rem; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase;
  color:rgba(235,235,245,0.38);
  margin-bottom:14px;
}
body.light .as2-date-hd { color:rgba(60,60,67,0.4); }

/* Hero editorial card */
.as2-hero {
  width:100%; border-radius:18px; overflow:hidden;
  margin-bottom:28px; cursor:pointer;
  transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s;
  box-shadow:0 8px 28px rgba(0,0,0,0.5);
  text-decoration:none; display:block;
}
.as2-hero:hover { transform:scale(1.015) translateY(-3px); box-shadow:0 18px 50px rgba(0,0,0,0.65); }
.as2-hero-inner {
  padding:26px 22px 22px; position:relative;
  min-height:200px; display:flex; flex-direction:column; justify-content:flex-end;
}
.as2-hero-eyebrow {
  font-size:0.6rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.6); margin-bottom:7px;
}
.as2-hero-title {
  font-size:1.65rem; font-weight:800;
  color:#fff; line-height:1.08; letter-spacing:-0.03em; margin-bottom:6px;
}
.as2-hero-sub {
  font-size:0.8rem; color:rgba(255,255,255,0.52); line-height:1.55;
}
.as2-hero-badge {
  position:absolute; top:18px; right:18px;
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:100px; padding:5px 13px;
  font-size:0.72rem; font-weight:600; color:#fff;
}

/* Section header */
.as2-section { margin-bottom:24px; }
.as2-section-hd {
  display:flex; align-items:baseline;
  justify-content:space-between;
  margin-bottom:13px; padding:0 2px;
}
.as2-section-title {
  font-size:1rem; font-weight:700;
  color:#fff; letter-spacing:-0.022em;
}
body.light .as2-section-title { color:#000; }
.as2-see-all {
  font-size:0.81rem; font-weight:500;
  color:#0A84FF; cursor:pointer; text-decoration:none;
}
body.light .as2-see-all { color:#007AFF; }

/* Horizontal scroll row */
.as2-horiz {
  display:flex; gap:12px;
  overflow-x:auto; padding-bottom:4px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.as2-horiz::-webkit-scrollbar { display:none; }

/* Tile cards (featured horizontal) */
.as2-tile {
  flex-shrink:0; width:158px; border-radius:14px;
  background:#2c2c2e; overflow:hidden;
  cursor:pointer; text-decoration:none; display:block;
  transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s;
}
body.light .as2-tile { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.09); }
.as2-tile:hover { transform:scale(1.04) translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,0.38); }
body.light .as2-tile:hover { box-shadow:0 10px 28px rgba(0,0,0,0.14); }
.as2-tile-img {
  width:100%; height:108px;
  object-fit:cover; display:block;
  background:#3a3a3c;
}
body.light .as2-tile-img { background:#e5e5ea; }
.as2-tile-body { padding:9px 10px 12px; }
.as2-tile-name {
  font-size:0.78rem; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:2px;
}
body.light .as2-tile-name { color:#000; }
.as2-tile-cat {
  font-size:0.67rem; color:rgba(235,235,245,0.42);
}
body.light .as2-tile-cat { color:rgba(60,60,67,0.5); }

/* List rows (app list style) */
.as2-list {
  background:#2c2c2e; border-radius:14px; overflow:hidden;
}
body.light .as2-list { background:#fff; }
.as2-list-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  border-bottom:0.5px solid rgba(84,84,88,0.38);
  text-decoration:none; color:inherit;
  transition:background 0.12s; cursor:pointer;
}
body.light .as2-list-item { border-bottom-color:rgba(60,60,67,0.1); }
.as2-list-item:last-child { border-bottom:none; }
.as2-list-item:hover { background:rgba(255,255,255,0.04); }
body.light .as2-list-item:hover { background:rgba(0,0,0,0.025); }
.as2-list-icon {
  width:50px; height:50px; border-radius:12px;
  flex-shrink:0; object-fit:cover; display:block;
  background:#3a3a3c;
}
body.light .as2-list-icon { background:#e5e5ea; }
.as2-list-info { flex:1; min-width:0; }
.as2-list-name {
  font-size:0.85rem; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.light .as2-list-name { color:#000; }
.as2-list-sub {
  font-size:0.72rem; color:rgba(235,235,245,0.42);
  margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.light .as2-list-sub { color:rgba(60,60,67,0.5); }
.as2-get-btn {
  flex-shrink:0;
  background:rgba(10,132,255,0.14); color:#0A84FF;
  border:none; border-radius:100px;
  padding:5px 14px;
  font-size:0.79rem; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:background 0.15s;
}
body.light .as2-get-btn { background:rgba(0,122,255,0.1); color:#007AFF; }
.as2-get-btn:hover { background:rgba(10,132,255,0.26); }
body.light .as2-get-btn:hover { background:rgba(0,122,255,0.18); }

/* Empty shop-grid inside gear pane */
#win-shop #shop-grid .card-title { color:#fff; }
body.light #win-shop #shop-grid .card-title { color:#1c1c1e; }

/* ── FINDER / ABOUT ── */
#win-about .win-body{padding:0!important;overflow:hidden!important;display:flex!important}
.finder-layout{display:flex;width:100%;height:100%;overflow:hidden}
.finder-sidebar{
  width:176px;flex-shrink:0;overflow-y:auto;
  background:rgba(30,30,32,0.92);
  border-right:1px solid rgba(255,255,255,0.07);
  padding:14px 0 12px;
}
body.light .finder-sidebar{background:rgba(200,200,208,0.96);border-right-color:rgba(0,0,0,0.08)}
.finder-sidebar::-webkit-scrollbar{width:0}
.fs-section{
  font-size:0.63rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:rgba(255,255,255,0.28);padding:0 14px 4px;
}
body.light .fs-section{color:rgba(0,0,0,0.32)}
.fs-item{
  display:flex;align-items:center;gap:8px;padding:5px 10px 5px 14px;
  font-size:0.82rem;color:rgba(255,255,255,0.62);
  cursor:pointer;border-radius:6px;margin:1px 5px;transition:background 0.12s;
}
body.light .fs-item{color:rgba(0,0,0,0.62)}
.fs-item:hover{background:rgba(255,255,255,0.07)}
body.light .fs-item:hover{background:rgba(0,0,0,0.05)}
.fs-item.active{background:rgba(0,122,255,0.24);color:#fff}
body.light .fs-item.active{background:rgba(0,122,255,0.15);color:#007AFF}
.fs-item .fs-ico{width:16px;text-align:center;flex-shrink:0;font-size:0.85rem}
.fs-divider{height:1px;background:rgba(255,255,255,0.07);margin:8px 10px}
body.light .fs-divider{background:rgba(0,0,0,0.07)}
.finder-content{flex:1;overflow-y:auto;padding:18px 20px}
.finder-content::-webkit-scrollbar{width:5px}
.finder-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#FF6B9D,#A855F7);
  border:none;border-radius:100px;padding:12px 28px;
  color:#fff;font-size:0.88rem;font-weight:600;cursor:pointer;
  text-decoration:none;transition:opacity 0.2s,transform 0.1s;margin-top:4px;
}
.cta-btn:hover{opacity:0.88}.cta-btn:active{transform:scale(0.98)}

/* ══════════════════════════════════
   MOBILE — iPhone shell
══════════════════════════════════ */
#iphone{display:none;height:100vh;height:100dvh;width:100%;flex-direction:column;overflow-y:auto;overflow-x:hidden}
@media(max-width:767px){#iphone{display:flex}}

/* Status bar */
#status-bar{padding:14px 24px 0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
#phone-time{font-size:17px;font-weight:700;letter-spacing:-0.2px}
.ph-status-r{display:flex;align-items:center;gap:5px;font-size:13px}

/* Glass widget base — no width/margin, controlled by parent */
.ph-glass-widget{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:20px;
  padding:14px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  transition:transform 0.15s,background 0.15s;
}
.ph-glass-widget:active{background:rgba(255,255,255,0.14);transform:scale(0.97)}

/* Weather widget — full width */
#widget-weather-mobile{margin:10px 16px 0;flex-shrink:0}

/* Side-by-side widget row */
#ph-widget-row{
  display:flex;gap:10px;
  margin:10px 16px 0;
  flex-shrink:0;
}
#ph-widget-row .ph-glass-widget{flex:1}

/* Widget typography */
.ph-widget-title{font-size:0.8rem;font-weight:600;color:#fff;letter-spacing:0.01em}
.ph-widget-btn{
  width:100%;margin-top:10px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:10px;padding:7px;
  color:#fff;font-size:0.75rem;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:background 0.15s;
}
.ph-widget-btn:active{background:rgba(255,255,255,0.22);transform:scale(0.97)}

/* Greeting */
#phone-greeting{
  padding:16px 24px 12px;text-align:center;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  border-top:1px solid rgba(255,255,255,0.07);
  margin-top:12px;
}
#phone-greeting .apple-hello-svg{
  height:clamp(42px,5vh,62px);width:auto;
  filter:drop-shadow(0 2px 32px rgba(0,0,0,0.18));
  transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1),transform 0.4s cubic-bezier(0.16,1,0.3,1);
  opacity:0;transform:scale(0.95)
}
#phone-greeting .apple-hello-svg.visible{opacity:1;transform:scale(1)}
#phone-greeting .d-greet-name{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,5vw,2.2rem);line-height:1;
  opacity:0;transform:translateY(8px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);
  cursor:default;pointer-events:auto;display:inline-flex;align-items:baseline
}
#phone-greeting .d-greet-name.visible{opacity:1;transform:translateY(0)}
#phone-greeting .greet-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.22);
  border-radius:100px;padding:9px 24px;
  color:#fff;font-size:0.85rem;font-weight:500;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;text-decoration:none;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1),background 0.2s
}
#phone-greeting .greet-cta.visible{opacity:1;transform:translateY(0);pointer-events:auto}
#phone-greeting .greet-cta:active{background:rgba(255,255,255,0.18);transform:scale(0.97)}

/* App grid — static, no scroll */
#app-grid{
  flex-shrink:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px 0;padding:6px 16px 0;
  margin-top:-4px;
}
.ph-app{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ph-app .mac-icon{width:52px;height:52px;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35));transition:transform 0.1s}
.ph-app:active .mac-icon{transform:scale(0.88)}
.ph-app span{font-size:11px;color:rgba(255,255,255,0.88);text-align:center;line-height:1.2}

/* Theme toggle above dock */
#ph-theme-row{
  display:flex;justify-content:center;align-items:center;
  gap:10px;margin:auto 0 10px;flex-shrink:0;
}
#ph-theme-label{font-size:0.72rem;color:rgba(255,255,255,0.5);letter-spacing:0.03em;user-select:none}
/* Sun/Moon toggle switch */
.ph-theme-switch{position:relative;display:inline-block;width:3.4em;height:1.9em;cursor:pointer}
.ph-theme-switch input{opacity:0;width:0;height:0;position:absolute}
.ph-theme-slider{
  position:absolute;inset:0;
  border-radius:30px;
  background:#1a2a5e;
  border:1px solid rgba(255,255,255,0.15);
  transition:background 0.4s;
}
.ph-theme-slider::before{
  content:'';position:absolute;
  height:1.35em;width:1.35em;border-radius:50%;
  left:9%;bottom:13%;
  background:#1a2a5e;
  box-shadow:inset 8px -4px 0 0 #fff700;
  transition:transform 0.4s,box-shadow 0.4s,background 0.4s;
}
.ph-theme-switch input:checked + .ph-theme-slider{background:#c8d6e8}
.ph-theme-switch input:checked + .ph-theme-slider::before{
  transform:translateX(100%);
  box-shadow:inset 15px -4px 0 15px #fff700;
  background:#c8d6e8;
}

/* Dock — pinned at bottom via margin-top:auto */
#phone-dock{
  margin:auto 16px max(24px, env(safe-area-inset-bottom, 24px));
  flex-shrink:0;
  position:sticky;bottom:max(8px, env(safe-area-inset-bottom, 8px));
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-radius:26px;padding:11px 8px 9px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
}
.ph-dk{display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ph-dk .mac-icon{width:52px;height:52px;transition:transform 0.1s}
.ph-dk:active .mac-icon{transform:scale(0.88)}

/* mobile instagram */
.ph-ig-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid rgba(255,255,255,0.3)}
.ph-ig-name{font-size:0.78rem;font-weight:600;color:#fff;line-height:1.2}
.ph-ig-handle{font-size:0.65rem;color:rgba(255,255,255,0.55);margin-top:1px}
.ph-ig-count{font-size:1.35rem;font-weight:300;color:#fff;letter-spacing:-0.5px;line-height:1;margin-top:8px}
.ph-ig-label{font-size:0.62rem;color:rgba(255,255,255,0.55);margin-top:2px}

#ph-date{display:none}
.ph-sub{color:rgba(255,255,255,0.62);font-size:0.87rem}

/* ─── INSTAGRAM WIDGET ─── */
#widget-instagram{cursor:pointer;text-decoration:none;display:block}
.dw-ig-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,255,255,0.25);
  box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.dw-ig-name{font-size:0.82rem;font-weight:600;color:#fff;line-height:1.2}
.dw-ig-handle{font-size:0.7rem;color:rgba(255,255,255,0.6);margin-top:1px}
body.light .dw-ig-handle{color:rgba(255,255,255,0.7)}
.dw-ig-count{font-size:1.45rem;font-weight:300;color:#fff;letter-spacing:-0.5px;line-height:1;margin-top:10px}
.dw-ig-label{font-size:0.68rem;color:rgba(255,255,255,0.6);margin-top:2px;letter-spacing:0.01em}
body.light .dw-ig-label{color:rgba(255,255,255,0.7)}
.dw-ig-updated{font-size:0.6rem;color:rgba(255,255,255,0.35);margin-top:4px}
.ph-ig-updated{font-size:0.58rem;color:rgba(255,255,255,0.4);margin-top:3px}
/* mobile instagram */
.ph-ig-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,255,255,0.25);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.ph-ig-name{font-size:0.85rem;font-weight:600;color:#fff;line-height:1.2}
.ph-ig-handle{font-size:0.7rem;color:rgba(255,255,255,0.65);margin-top:1px}
.ph-ig-count{font-size:1.5rem;font-weight:300;color:#fff;letter-spacing:-0.5px;line-height:1;margin-top:8px}
.ph-ig-label{font-size:0.7rem;color:rgba(255,255,255,0.65);margin-top:2px}

/* ─── WEATHER WIDGET ─── */
#widget-weather .dw-weather-temp{
  font-size:2.2rem;font-weight:300;line-height:1;letter-spacing:-1px;color:#fff;
}
body.light #widget-weather .dw-weather-temp{color:#fff}
#widget-weather .dw-weather-cond{font-size:0.78rem;color:#fff;margin-top:2px;font-weight:400}
body.light #widget-weather .dw-weather-cond{color:#fff}
#widget-weather .dw-weather-loc{font-size:0.68rem;color:#fff;margin-top:6px;letter-spacing:0.01em}
body.light #widget-weather .dw-weather-loc{color:#fff}
#widget-weather .dw-weather-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
#widget-weather .dw-weather-icon{font-size:3.8rem;line-height:1;flex-shrink:0;animation:weather-float 3s ease-in-out infinite;display:block;will-change:transform}
#widget-weather .dw-weather-feels{font-size:0.7rem;color:#fff;margin-top:8px}
body.light #widget-weather .dw-weather-feels{color:#fff}
/* mobile weather */
.ph-weather-temp{font-size:2rem;font-weight:300;line-height:1;letter-spacing:-1px;color:#fff}
.ph-weather-cond{font-size:0.78rem;color:#fff;margin-top:2px}
.ph-weather-loc{font-size:0.68rem;color:#fff;margin-top:4px}
.ph-weather-icon{font-size:3.6rem;line-height:1;flex-shrink:0;animation:weather-float 3s ease-in-out infinite;display:block;will-change:transform}
.ph-weather-feels{font-size:0.7rem;color:#fff;margin-top:6px}

/* ══ macOS CSS ICONS ══ */
.mac-icon{
  width:54px;height:54px;border-radius:14.5px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;flex-shrink:0;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.32));
  overflow:hidden;position:relative;user-select:none;
  will-change:transform;
}
.mac-icon span{position:relative;z-index:1}
.icon-photos span,
.icon-photos span,
.icon-notes span,
.icon-instagram span,
.icon-tiktok span,
.icon-youtube span,
.icon-mail span,
.icon-wallpaper span,
.icon-linktree span{
  display:none;
}
.icon-finder{background:linear-gradient(145deg,#1471D6 0%,#2E8AF5 50%,#54AEFF 100%)}
.icon-tiktok{
  background-image:url('icons/Dark/Tiktok.png');
  background-size:cover;
  background-position:center;
  border-radius:14.5px!important;
}
body.light .icon-tiktok{
  background-image:url('icons/Light/Tiktok.png');
}
.icon-youtube{
  background-image:url('icons/Dark/Youtube.png');
  background-size:cover;
  background-position:center;
  border-radius:14.5px!important;
}
body.light .icon-youtube{
  background-image:url('icons/Light/Youtube.png');
}
.icon-instagram{
  background-image:url('icons/Dark/Insta-Dark.png');
  background-size:cover;
  background-position:center;
  border-radius:14.5px!important;
}
body.light .icon-instagram{
  background-image:url('icons/Light/Insta-Light.png');
}
.icon-mail{
  background-image:url('icons/Dark/Mail.png');
  background-size:cover;
  background-position:center;
  border-radius:14.5px!important;
}
body.light .icon-mail{
  background-image:url('icons/Light/Mail.png');
}
.icon-linktree{
  background-image:url('icons/Dark/Linktree.png');
  background-size:cover;
  background-position:center;
  border-radius:14.5px!important;
}
body.light .icon-linktree{
  background-image:url('icons/Light/Linktree.png');
}
.icon-photos{
  background-image:url('icons/Dark/Photos-Dark.png');
  background-size:cover;
  background-position:center;
  border-radius:14.5px!important;
}
body.light .icon-photos{
  background-image:url('icons/Light/Photos-Light.png');
}
.icon-notes{
  background-image:url('icons/Dark/Notes-Dark.png');
  background-size:cover;
  background-position:center;
  border-radius:14.5px!important;
}
body.light .icon-notes{
  background-image:url('icons/Light/Notes-Light.png');
}
.icon-wallpaper{
  background-image:url('icons/Dark/Wallpaper.png');
  background-size:cover;
  background-position:center;
  border-radius:14.5px!important;
}
body.light .icon-wallpaper{
  background-image:url('icons/Dark/Wallpaper.png');
}
.icon-appstore{background:linear-gradient(145deg,#1870E5 0%,#1EABFF 100%)}
.icon-messages{background:linear-gradient(145deg,#30D158 0%,#24A040 100%)}
.icon-safari{background:conic-gradient(#BEBEBE 0deg 90deg,#E8E8E8 90deg 180deg,#BEBEBE 180deg 270deg,#E8E8E8 270deg 360deg);border-radius:50%!important}
.icon-trash{background:linear-gradient(145deg,#8A9BAB 0%,#BDC7D0 100%)}
.icon-shop{background-image:url('icons/Dark/ShopMySetup.png');background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent!important}
body.light .icon-shop{background-image:url('icons/Light/ShopMySetup.png')}
.icon-resources{background-image:url('icons/Dark/Resources.png');background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent!important}
body.light .icon-resources{background-image:url('icons/Light/Resources.png')}
.icon-gemini{background-image:url('icons/Dark/Gemini-Dark.png');background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent!important}
body.light .icon-gemini{background-image:url('icons/Light/Gemini-Light.png')}
.icon-facetime{
  background-image:url('icons/Dark/FaceTime_(iOS)_2024_dark.svg');
  background-size:cover;background-position:center;border-radius:14.5px!important;
}
body.light .icon-facetime{background-image:url('icons/Light/FaceTime.png')}
.icon-facebook{
  background-image:url('icons/Dark/Facebook Dark.png');
  background-size:cover;background-position:center;border-radius:14.5px!important;
}
body.light .icon-facebook{background-image:url('icons/Light/Facebook Light.png')}
.ph-app .mac-icon{width:52px;height:52px;border-radius:13px;font-size:25px}
.ph-dk .mac-icon{width:54px;height:54px;border-radius:12px;font-size:24px}

/* ─── MENTORSHIP WINDOW ─── */
#win-mentorship{width:480px;height:auto;max-height:600px}
#win-mentorship .win-body{padding:0!important;overflow-y:auto!important;display:flex!important;flex-direction:column!important}
.ment-hero{
  display:flex;align-items:center;gap:14px;
  padding:22px 22px 18px;
  background:linear-gradient(135deg,rgba(10,132,255,0.14) 0%,rgba(50,209,88,0.08) 100%);
  border-bottom:1px solid rgba(255,255,255,0.07);
  flex-shrink:0;
}
body.light .ment-hero{background:linear-gradient(135deg,rgba(0,122,255,0.10) 0%,rgba(52,199,89,0.07) 100%);border-bottom-color:rgba(0,0,0,0.06)}
.ment-avatar{
  width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,255,255,0.18);
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
}
body.light .ment-avatar{border-color:rgba(0,0,0,0.10)}
.ment-name{font-size:16px;font-weight:700;color:var(--label,rgba(255,255,255,0.92));letter-spacing:-0.3px}
.ment-handle{font-size:12px;color:var(--label2,rgba(235,235,245,0.6));margin-top:1px}
.ment-badge{
  display:inline-flex;align-items:center;gap:4px;margin-top:6px;
  font-size:11px;font-weight:600;color:#30D158;
  background:rgba(48,209,88,0.12);border:1px solid rgba(48,209,88,0.22);
  border-radius:100px;padding:2px 9px;
}
body.light .ment-badge{color:#34C759;background:rgba(52,199,89,0.12);border-color:rgba(52,199,89,0.22)}
.ment-heading{padding:20px 22px 4px;flex-shrink:0}
.ment-title{font-size:20px;font-weight:800;letter-spacing:-0.5px;color:var(--label,rgba(255,255,255,0.92));margin-bottom:5px}
.ment-sub{font-size:13px;color:var(--label2,rgba(235,235,245,0.6));line-height:1.5}
.ment-cards{padding:16px 22px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.ment-card{
  display:flex;align-items:flex-start;gap:12px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;padding:13px 14px;
  transition:background 0.15s;
}
body.light .ment-card{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.07)}
.ment-card:hover{background:rgba(255,255,255,0.08)}
body.light .ment-card:hover{background:rgba(0,0,0,0.07)}
.ment-card-icon{font-size:20px;line-height:1;flex-shrink:0;margin-top:1px}
.ment-card-title{font-size:13px;font-weight:700;color:var(--label,rgba(255,255,255,0.92));margin-bottom:3px}
.ment-card-desc{font-size:12px;color:var(--label2,rgba(235,235,245,0.55));line-height:1.5}
.ment-cta-section{padding:4px 22px 24px;flex-shrink:0;text-align:center}
.ment-cta-btn{
  display:block;width:100%;padding:14px;
  background:linear-gradient(135deg,#0A84FF 0%,#0066CC 100%);
  color:#fff;font-size:15px;font-weight:700;
  border-radius:12px;text-decoration:none;
  letter-spacing:-0.2px;
  box-shadow:0 4px 20px rgba(10,132,255,0.35);
  transition:opacity 0.15s,transform 0.12s,box-shadow 0.15s;
}
.ment-cta-btn:hover{opacity:0.9;transform:translateY(-1px);box-shadow:0 6px 28px rgba(10,132,255,0.45)}
.ment-cta-btn:active{transform:scale(0.98)}
.ment-cta-note{margin-top:9px;font-size:11px;color:var(--label3,rgba(235,235,245,0.30))}