/* ================================================================
   ManafOS v4.0 — Cinematic Portfolio OS Theme
   #e2e2e2 bg, 3D Realistic Icons, Cinematic Animations
   ================================================================ */
:root {
  --bg: #e2e2e2;
  --bg-dark: #d4d4d4;
  --surface: rgba(255,255,255,0.82);
  --surface-solid: #ffffff;
  --surface-hover: rgba(255,255,255,0.95);
  --glass: rgba(255,255,255,0.72);
  --glass-border: rgba(30,30,39,0.08);
  --glass-shine: rgba(255,255,255,0.5);
  --accent: #df0139;
  --accent2: #ff1a4d;
  --accent-dim: rgba(223,1,57,0.08);
  --accent-glow: 0 0 20px rgba(223,1,57,0.15), 0 0 60px rgba(223,1,57,0.05);
  --text: #1e1e27;
  --text-dim: #6b6b7b;
  --text-faint: #a0a0b0;
  --border: rgba(30,30,39,0.08);
  --red: #ff5f57;
  --yellow: #febc2e;
  --green: #28c840;
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Outfit', sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-sans);background:var(--bg);color:var(--text);user-select:none;cursor:default;}

/* ================================================================
   BOOT SCREEN — Cinematic
   ================================================================ */
#boot{
  position:fixed;inset:0;z-index:10000;background:#0a0c14;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 1.2s cubic-bezier(0.4,0,0.2,1),filter 1s ease;
}
#boot.out{opacity:0;filter:blur(12px) brightness(2);pointer-events:none;}

/* Boot cinematic vignette */
#boot::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.6) 100%);
  pointer-events:none;z-index:1;
}
/* Boot nebula glow */
#boot::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 45% 55%, rgba(223,1,57,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 65% 35%, rgba(100,60,180,0.05) 0%, transparent 60%);
  animation:bootNebula 8s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes bootNebula{
  0%{opacity:0.6;transform:scale(1);}
  100%{opacity:1;transform:scale(1.05);}
}

.boot-ring{
  width:110px;height:110px;position:relative;margin-bottom:36px;z-index:2;
}
.boot-ring-svg{width:100%;height:100%;animation:ringRotate 3s linear infinite;filter:drop-shadow(0 0 15px rgba(223,1,57,0.4));}
@keyframes ringRotate{to{transform:rotate(360deg);}}
.boot-ring .ring-center{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.ring-center svg{width:40px;height:40px;}
.boot-logo{
  width:52px;height:52px;border-radius:12px;object-fit:contain;
  filter:drop-shadow(0 0 20px rgba(223,1,57,0.5)) drop-shadow(0 0 40px rgba(223,1,57,0.2));
  animation:logoPulse 2s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 20px rgba(223,1,57,0.5)) drop-shadow(0 0 40px rgba(223,1,57,0.2));}
  50%{filter:drop-shadow(0 0 30px rgba(223,1,57,0.7)) drop-shadow(0 0 60px rgba(223,1,57,0.3));}
}
.start-logo{
  width:26px;height:26px;border-radius:6px;object-fit:contain;
}
.boot-lines{
  font-family:var(--font-mono);font-size:12px;color:rgba(226,226,226,0.5);
  width:440px;max-width:90vw;line-height:2;z-index:2;
}
.boot-lines div{opacity:0;transform:translateX(-12px);transition:all 0.5s cubic-bezier(0.4,0,0.2,1);}
.boot-lines div.show{opacity:1;transform:translateX(0);}
.boot-lines .hl{color:var(--accent);text-shadow:0 0 8px rgba(223,1,57,0.4);}
.boot-progress{
  width:240px;height:2px;background:rgba(255,255,255,0.06);
  border-radius:2px;margin-top:30px;overflow:hidden;z-index:2;
}
.boot-progress-fill{
  width:0;height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:2px;transition:width 0.3s ease;
  box-shadow:0 0 12px rgba(223,1,57,0.6),0 0 4px rgba(255,26,77,0.8);
}

/* ================================================================
   DESKTOP
   ================================================================ */
#desktop{
  position:fixed;inset:0;opacity:0;
  transition:opacity 1s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;
}
#desktop.on{opacity:1;}

/* Wallpaper */
.wallpaper{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg);}
#particles{position:absolute;inset:0;}
.aurora{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(223,1,57,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 15%, rgba(100,60,180,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(226,226,226,0.5) 0%, rgba(226,226,226,0) 100%);
  animation:auroraDrift 20s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{background-position:0 0,100% 0,0 0;opacity:0.8;}
  100%{background-position:5% 5%,90% 10%,0 0;opacity:1;}
}

/* Cinematic light rays */
.wallpaper::before{
  content:'';position:absolute;
  top:-20%;left:30%;width:40%;height:140%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(223,1,57,0.015) 30%,
    rgba(223,1,57,0.025) 50%,
    rgba(223,1,57,0.015) 70%,
    transparent 100%);
  transform:rotate(-15deg);
  animation:lightRay 12s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes lightRay{
  0%{opacity:0.3;transform:rotate(-15deg) translateX(-5%);}
  100%{opacity:0.7;transform:rotate(-12deg) translateX(5%);}
}

/* Noise texture */
.noise{
  position:absolute;inset:0;opacity:0.12;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ================================================================
   DESKTOP ICONS — 3D Realistic Image Assets
   ================================================================ */
.desktop-icons{
  position:relative;z-index:1;flex:1;padding:20px;
  display:flex;flex-direction:column;flex-wrap:wrap;gap:6px;
  align-content:flex-start;
}
.d-icon{
  width:90px;height:108px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  border-radius:var(--radius-sm);cursor:pointer;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  border:1.5px solid transparent;
  opacity:0;transform:scale(0.5) translateY(20px);
  perspective:600px;
}
.d-icon.show{opacity:1;transform:scale(1) translateY(0);animation:iconReveal 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;}
@keyframes iconReveal{
  0%{opacity:0;transform:scale(0.3) translateY(30px) rotateX(15deg);}
  60%{opacity:1;transform:scale(1.08) translateY(-4px) rotateX(-2deg);}
  100%{opacity:1;transform:scale(1) translateY(0) rotateX(0);}
}

.d-icon:hover{border-color:transparent;}
.d-icon:active{transform:scale(0.9);}

/* === 3D ICON IMAGE CONTAINER === */
.d-icon-img{
  width:68px;height:68px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:visible;
  transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  transform-style:preserve-3d;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15)) drop-shadow(0 8px 24px rgba(0,0,0,0.1));
}

.d-icon:hover .d-icon-img{
  transform:translateY(-8px) scale(1.1) rotateX(-3deg);
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.2)) drop-shadow(0 16px 40px rgba(0,0,0,0.12));
}

/* The actual 3D rendered image */
.d-icon-asset{
  width:100%;height:100%;object-fit:contain;
  position:relative;z-index:1;
  transition:filter 0.3s;
  mix-blend-mode:multiply;
}
.d-icon:hover .d-icon-asset{
  filter:brightness(1.08) contrast(1.05);
}

.d-icon-label{
  font-size:10.5px;font-weight:500;color:var(--text);text-align:center;
  text-shadow:0 1px 3px rgba(255,255,255,0.8);line-height:1.2;
  max-width:80px;
}

/* Subtle float animation for icons at rest */
.d-icon.show .d-icon-img{
  animation:iconFloat 4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 0.3s);
}
@keyframes iconFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
.d-icon:hover .d-icon-img{animation:none;}

/* ================================================================
   ABOUT ME — Hero Section with Photo & CV
   ================================================================ */
.about-hero{
  display:flex;align-items:center;gap:20px;
  margin-bottom:24px;padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.about-photo-wrap{
  width:90px;height:90px;border-radius:20px;overflow:hidden;flex-shrink:0;
  box-shadow:
    0 4px 16px rgba(223,1,57,0.15),
    0 8px 32px rgba(0,0,0,0.1),
    inset 0 0 0 2px rgba(223,1,57,0.15);
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s;
}
.about-photo-wrap:hover{
  transform:scale(1.05) rotate(-2deg);
  box-shadow:0 6px 24px rgba(223,1,57,0.25),0 12px 40px rgba(0,0,0,0.12);
}
.about-photo{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.4s;
}
.about-photo-wrap:hover .about-photo{transform:scale(1.1);}
.about-hero-info h2{font-size:22px;font-weight:700;margin-bottom:2px;}
.about-tagline{font-size:12.5px;color:var(--text-dim);margin-bottom:10px;}
.about-actions{display:flex;gap:8px;flex-wrap:wrap;}
.cv-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;
  background:var(--accent);color:#fff;text-decoration:none;
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 2px 10px rgba(223,1,57,0.25);
}
.cv-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 4px 18px rgba(223,1,57,0.4);
  background:var(--accent2);
}
.cv-btn:active{transform:scale(0.96);}
.cv-btn svg{flex-shrink:0;}
.about-bio{
  font-size:13px;color:var(--text-dim);line-height:1.7;
  margin-bottom:20px;
}

/* Start menu avatar image */
.sm-avatar-img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;
}

/* ================================================================
   TASKBAR — Glass Cinematic
   ================================================================ */
.taskbar{
  position:relative;z-index:500;height:56px;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(40px) saturate(1.6);
  -webkit-backdrop-filter:blur(40px) saturate(1.6);
  border-top:1px solid var(--border);
  display:flex;align-items:center;padding:0 14px;gap:4px;
  box-shadow:0 -4px 30px rgba(0,0,0,0.04);
}
.start-btn{
  width:44px;height:44px;border-radius:13px;border:none;
  background:linear-gradient(145deg,#222230,#1a1a24);
  color:#fff;font-weight:800;font-size:17px;font-family:var(--font-sans);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);flex-shrink:0;
  box-shadow:0 3px 12px rgba(30,30,39,0.25),inset 0 1px 0 rgba(255,255,255,0.1);
}
.start-btn:hover{transform:scale(1.12) translateY(-2px);box-shadow:var(--accent-glow),0 6px 20px rgba(30,30,39,0.3);}
.start-btn:active{transform:scale(0.95);}
.tb-div{width:1px;height:28px;background:var(--border);margin:0 6px;flex-shrink:0;}
.tb-apps{display:flex;gap:3px;flex:1;overflow-x:auto;scrollbar-width:none;}
.tb-apps::-webkit-scrollbar{display:none;}
.tb-app{
  height:40px;min-width:40px;padding:0 14px;border-radius:var(--radius-sm);
  border:none;background:transparent;color:var(--text);font-size:12px;
  font-family:var(--font-sans);cursor:pointer;display:flex;
  align-items:center;gap:8px;transition:all 0.2s;white-space:nowrap;
  position:relative;
}
.tb-app:hover{background:rgba(30,30,39,0.06);}
.tb-app.active{background:rgba(223,1,57,0.08);}
.tb-app.active::after{
  content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 8px rgba(223,1,57,0.4),0 0 16px rgba(223,1,57,0.15);
  animation:activeGlow 2s ease-in-out infinite;
}
@keyframes activeGlow{
  0%,100%{box-shadow:0 0 8px rgba(223,1,57,0.4),0 0 16px rgba(223,1,57,0.15);}
  50%{box-shadow:0 0 12px rgba(223,1,57,0.6),0 0 24px rgba(223,1,57,0.25);}
}
.tb-app .app-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

.sys-tray{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0;}
.tray-badge{
  font-family:var(--font-mono);font-size:10px;color:var(--accent);
  padding:4px 10px;border-radius:6px;background:var(--accent-dim);
  display:flex;align-items:center;gap:5px;
}
.tray-badge .pulse-dot{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  animation:pDot 2s ease infinite;
  box-shadow:0 0 6px rgba(223,1,57,0.4);
}
@keyframes pDot{0%,100%{opacity:1;box-shadow:0 0 6px rgba(223,1,57,0.4);}50%{opacity:0.3;box-shadow:0 0 2px rgba(223,1,57,0.1);}}
.tray-item{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.tray-clock{color:var(--text);font-weight:500;}

/* ================================================================
   WINDOWS — Cinematic Glass
   ================================================================ */
.os-win{
  position:absolute;z-index:100;min-width:340px;min-height:240px;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--glass-border);
  background:var(--glass);
  backdrop-filter:blur(40px) saturate(1.5);
  -webkit-backdrop-filter:blur(40px) saturate(1.5);
  display:flex;flex-direction:column;
  box-shadow:
    0 25px 80px rgba(0,0,0,0.1),
    0 0 0 1px rgba(30,30,39,0.04),
    inset 0 1px 0 var(--glass-shine);
  animation:winOpen 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes winOpen{
  0%{opacity:0;transform:scale(0.75) translateY(40px);filter:blur(8px);}
  60%{opacity:1;transform:scale(1.02) translateY(-4px);filter:blur(0);}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0);}
}
.os-win.closing{
  animation:winClose 0.35s cubic-bezier(0.55,0,1,0.45) forwards;
}
@keyframes winClose{
  0%{opacity:1;transform:scale(1);filter:blur(0);}
  100%{opacity:0;transform:scale(0.85) translateY(30px);filter:blur(6px);}
}
.os-win.focused{
  z-index:200;
  box-shadow:
    0 30px 100px rgba(0,0,0,0.14),
    0 0 0 1px rgba(223,1,57,0.1),
    0 0 60px rgba(223,1,57,0.03),
    inset 0 1px 0 var(--glass-shine);
}
.os-win.minimized{display:none;}
.os-win.maximized{
  top:0!important;left:0!important;width:100%!important;
  height:calc(100% - 56px)!important;border-radius:0;
}

.win-bar{
  height:44px;display:flex;align-items:center;padding:0 16px;gap:12px;
  cursor:grab;border-bottom:1px solid var(--border);flex-shrink:0;
  background:rgba(255,255,255,0.4);
}
.win-bar:active{cursor:grabbing;}
.traffic{display:flex;gap:8px;position:relative;z-index:10;}
.tl{
  width:14px;height:14px;border-radius:50%;border:none;cursor:pointer;
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1),filter 0.15s,box-shadow 0.2s;
  position:relative;padding:0;
}
/* Larger invisible click area */
.tl::before{
  content:'';position:absolute;
  top:-6px;left:-6px;right:-6px;bottom:-6px;
  border-radius:50%;
}
.tl:hover{transform:scale(1.25);}
.tl:active{transform:scale(0.9);}
.tl-c{background:radial-gradient(circle at 35% 35%,#ff8a84,#ff5f57 50%,#e6453d);box-shadow:0 1px 3px rgba(255,95,87,0.3),inset 0 1px 0 rgba(255,255,255,0.3);}
.tl-c:hover{box-shadow:0 0 10px rgba(255,95,87,0.6),0 0 20px rgba(255,95,87,0.2),inset 0 1px 0 rgba(255,255,255,0.3);}
.tl-m{background:radial-gradient(circle at 35% 35%,#fed86e,#febc2e 50%,#e6a520);box-shadow:0 1px 3px rgba(254,188,46,0.3),inset 0 1px 0 rgba(255,255,255,0.3);}
.tl-m:hover{box-shadow:0 0 10px rgba(254,188,46,0.6),0 0 20px rgba(254,188,46,0.2),inset 0 1px 0 rgba(255,255,255,0.3);}
.tl-x{background:radial-gradient(circle at 35% 35%,#5ade6e,#28c840 50%,#1eb636);box-shadow:0 1px 3px rgba(40,200,64,0.3),inset 0 1px 0 rgba(255,255,255,0.3);}
.tl-x:hover{box-shadow:0 0 10px rgba(40,200,64,0.6),0 0 20px rgba(40,200,64,0.2),inset 0 1px 0 rgba(255,255,255,0.3);}
/* Traffic light icons on hover */
.tl-c:hover::after{content:'×';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(0,0,0,0.6);font-size:12px;font-weight:700;line-height:1;pointer-events:none;}
.tl-m:hover::after{content:'−';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(0,0,0,0.6);font-size:14px;font-weight:700;line-height:1;pointer-events:none;}
.tl-x:hover::after{content:'⤢';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(0,0,0,0.6);font-size:10px;font-weight:700;line-height:1;pointer-events:none;}

.win-title{
  font-size:12.5px;font-weight:500;color:var(--text-dim);
  flex:1;text-align:center;pointer-events:none;
}
.win-body{
  flex:1;overflow-y:auto;padding:24px;
  scrollbar-width:thin;scrollbar-color:rgba(30,30,39,0.08) transparent;
}
.win-body::-webkit-scrollbar{width:5px;}
.win-body::-webkit-scrollbar-thumb{background:rgba(30,30,39,0.1);border-radius:3px;}

/* ================================================================
   START MENU — Cinematic Glass
   ================================================================ */
.start-menu{
  position:absolute;bottom:60px;left:8px;z-index:600;
  width:320px;
  background:var(--glass);
  backdrop-filter:blur(40px) saturate(1.4);
  -webkit-backdrop-filter:blur(40px) saturate(1.4);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:6px;
  box-shadow:0 20px 80px rgba(0,0,0,0.12),0 0 40px rgba(223,1,57,0.02),inset 0 1px 0 var(--glass-shine);
  transform:translateY(16px) scale(0.94);opacity:0;
  transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
}
.start-menu.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all;}
.sm-header{
  padding:18px 16px;border-bottom:1px solid var(--border);margin-bottom:4px;
  display:flex;align-items:center;gap:14px;
}
.sm-avatar{
  width:46px;height:46px;border-radius:13px;
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;color:#fff;flex-shrink:0;
  box-shadow:0 4px 14px rgba(223,1,57,0.25),inset 0 1px 0 rgba(255,255,255,0.2);
}
.sm-header h3{font-size:14px;font-weight:600;}
.sm-header p{font-size:11px;color:var(--text-dim);margin-top:1px;}
.sm-item{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s;
}
.sm-item:hover{background:rgba(30,30,39,0.05);transform:translateX(4px);}
.sm-item:active{transform:scale(0.98) translateX(4px);}
.sm-item .smi-ic{
  width:40px;height:40px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
  overflow:visible;
}
.sm-item .smi-ic svg{width:18px;height:18px;}
.smi-ic-img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.12));
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.sm-item:hover .smi-ic-img{transform:scale(1.15);}
.sm-item .smi-name{font-size:12.5px;font-weight:500;}
.sm-item .smi-desc{font-size:10px;color:var(--text-dim);}
.sm-footer{
  padding:10px 16px;border-top:1px solid var(--border);margin-top:4px;
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:9px;color:var(--text-dim);
}

/* ================================================================
   NOTIFICATIONS — Cinematic
   ================================================================ */
.toast-container{
  position:fixed;top:12px;right:12px;z-index:9000;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
  background:var(--glass);backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  padding:14px 18px;min-width:280px;pointer-events:all;
  box-shadow:0 12px 40px rgba(0,0,0,0.1),0 0 20px rgba(223,1,57,0.03);
  animation:toastIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
  display:flex;align-items:center;gap:12px;
}
.toast.out{animation:toastOut 0.3s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(50px) scale(0.85);filter:blur(4px);}to{opacity:1;transform:translateX(0) scale(1);filter:blur(0);}}
@keyframes toastOut{to{opacity:0;transform:translateX(50px) scale(0.85);filter:blur(4px);}}
.toast-icon{
  width:32px;height:32px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
}
.toast-text .tt-title{font-size:12px;font-weight:600;}
.toast-text .tt-msg{font-size:11px;color:var(--text-dim);margin-top:1px;}

/* ================================================================
   RIGHT-CLICK CONTEXT MENU
   ================================================================ */
.ctx-menu{
  position:fixed;z-index:700;min-width:180px;
  background:var(--glass);backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  padding:6px;box-shadow:0 12px 40px rgba(0,0,0,0.12);
  animation:ctxIn 0.2s cubic-bezier(0.34,1.56,0.64,1);display:none;
}
.ctx-menu.show{display:block;}
@keyframes ctxIn{from{opacity:0;transform:scale(0.9) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.ctx-item{
  padding:8px 14px;border-radius:6px;font-size:12px;
  cursor:pointer;transition:all 0.15s;
  display:flex;align-items:center;gap:8px;
}
.ctx-item:hover{background:rgba(30,30,39,0.06);transform:translateX(2px);}
.ctx-item svg{width:14px;height:14px;color:var(--text-dim);}
.ctx-divider{height:1px;background:var(--border);margin:4px 8px;}

/* ================================================================
   APP CONTENT STYLES
   ================================================================ */
.app-hdr{margin-bottom:24px;}
.app-hdr h2{font-size:22px;font-weight:700;margin-bottom:6px;}
.app-hdr p{font-size:13px;color:var(--text-dim);line-height:1.6;}
.app-sec{margin-bottom:22px;}
.app-sec h3{
  font-size:13px;font-weight:600;color:var(--accent);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.app-sec h3::before{content:'';width:3px;height:14px;background:var(--accent);border-radius:2px;box-shadow:0 0 8px rgba(223,1,57,0.3);}

.tag{
  display:inline-block;padding:4px 10px;border-radius:6px;font-size:10.5px;
  font-weight:500;margin:3px;transition:all 0.2s;
}
.tag:hover{transform:translateY(-1px);}
.tag-g{background:var(--accent-dim);color:var(--accent);}
.tag-b{background:rgba(59,130,246,0.1);color:#2563eb;}
.tag-r{background:rgba(239,68,68,0.08);color:#dc2626;}
.tag-y{background:rgba(245,158,11,0.1);color:#d97706;}
.tag-p{background:rgba(139,92,246,0.1);color:#7c3aed;}

.i-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.i-card{
  flex:1;min-width:120px;padding:14px;border-radius:var(--radius-sm);
  background:rgba(30,30,39,0.03);border:1px solid var(--border);
  transition:all 0.2s;
}
.i-card:hover{border-color:rgba(223,1,57,0.12);background:rgba(223,1,57,0.02);}
.i-card .ic-l{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;}
.i-card .ic-v{font-size:14px;font-weight:600;}

.exp-item{padding:14px 0;border-bottom:1px solid var(--border);}
.exp-item:last-child{border-bottom:none;}
.exp-item .e-role{font-size:14px;font-weight:600;}
.exp-item .e-co{font-size:12px;color:var(--accent);}
.exp-item .e-date{font-size:11px;color:var(--text-dim);margin-top:2px;}

.proj-card{
  padding:16px;border-radius:var(--radius-sm);
  background:rgba(30,30,39,0.02);border:1px solid var(--border);
  margin-bottom:10px;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.proj-card:hover{border-color:rgba(223,1,57,0.2);background:rgba(223,1,57,0.03);transform:translateY(-2px);box-shadow:0 8px 24px rgba(223,1,57,0.06);}
.proj-card h4{font-size:14px;font-weight:600;margin-bottom:4px;}
.proj-card p{font-size:12px;color:var(--text-dim);line-height:1.6;margin-bottom:8px;}

.sk-row{margin-bottom:14px;}
.sk-top{display:flex;justify-content:space-between;margin-bottom:6px;font-size:12px;}
.sk-bar{height:5px;background:rgba(30,30,39,0.06);border-radius:3px;overflow:hidden;}
.sk-fill{height:100%;border-radius:3px;transition:width 1.2s cubic-bezier(0.22,1,0.36,1);box-shadow:0 0 8px currentColor;}

.sec-card{
  padding:16px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:rgba(30,30,39,0.02);margin-bottom:10px;
  transition:all 0.25s;
}
.sec-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.06);}
.sec-card h4{font-size:13px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.sec-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:sDot 2s ease infinite;box-shadow:0 0 6px rgba(223,1,57,0.4);}
@keyframes sDot{0%,100%{opacity:1;box-shadow:0 0 6px rgba(223,1,57,0.4);}50%{opacity:0.3;box-shadow:0 0 2px rgba(223,1,57,0.1);}}
.sec-card p{font-size:12px;color:var(--text-dim);line-height:1.5;}

.t-body{font-family:var(--font-mono);font-size:12px;line-height:1.9;color:var(--text);}
.t-prompt{color:var(--accent);}
.t-cmd{color:var(--text);}
.t-out{color:var(--text-dim);}
.t-hl{color:var(--accent);}
.t-in-line{display:flex;align-items:center;margin-top:4px;}
.t-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--font-mono);font-size:12px;
  caret-color:var(--accent);
}
.contact-link{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border-radius:var(--radius-sm);background:rgba(30,30,39,0.02);
  border:1px solid var(--border);margin-bottom:8px;
  text-decoration:none;color:var(--text);transition:all 0.25s;
}
.contact-link:hover{border-color:rgba(223,1,57,0.2);background:rgba(223,1,57,0.03);transform:translateX(4px);}
.cl-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cl-ic svg{width:18px;height:18px;}
.cl-label{font-size:10px;color:var(--text-dim);}
.cl-val{font-size:13px;font-weight:500;}

/* ================================================================
   CHAT AGENT — Conversational AI Interface
   ================================================================ */
.chat-container{
  display:flex;flex-direction:column;height:100%;
  margin:-20px;/* counteract window padding */
}
.chat-header-bar{
  padding:14px 18px;border-bottom:1px solid var(--border);
  background:rgba(6,182,212,0.03);flex-shrink:0;
}
.chat-ai-badge{display:flex;align-items:center;gap:12px;}
.chat-ai-avatar{
  width:36px;height:36px;border-radius:10px;overflow:visible;flex-shrink:0;
}
.chat-ai-icon{width:100%;height:100%;object-fit:contain;}
.chat-ai-name{font-size:14px;font-weight:700;color:var(--text);}
.chat-ai-status{font-size:10.5px;color:#06b6d4;display:flex;align-items:center;gap:5px;}
.chat-status-dot{
  width:6px;height:6px;border-radius:50%;background:#06b6d4;
  box-shadow:0 0 8px rgba(6,182,212,0.5);
  animation:chatPulse 2s ease infinite;
}
@keyframes chatPulse{
  0%,100%{opacity:1;box-shadow:0 0 8px rgba(6,182,212,0.5);}
  50%{opacity:0.4;box-shadow:0 0 3px rgba(6,182,212,0.2);}
}

/* Messages area */
.chat-messages{
  flex:1;overflow-y:auto;padding:16px 18px;
  display:flex;flex-direction:column;gap:14px;
  scrollbar-width:thin;scrollbar-color:rgba(6,182,212,0.2) transparent;
}
.chat-messages::-webkit-scrollbar{width:4px;}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(6,182,212,0.2);border-radius:2px;}

/* Message rows */
.chat-msg{display:flex;gap:10px;max-width:85%;}
.chat-msg-ai{align-self:flex-start;}
.chat-msg-user{align-self:flex-end;flex-direction:row-reverse;}

/* Avatar */
.chat-msg-avatar{
  width:28px;height:28px;border-radius:8px;overflow:visible;flex-shrink:0;margin-top:2px;
}
.chat-msg-avatar-img{width:100%;height:100%;object-fit:contain;}

/* Bubbles */
.chat-bubble{
  padding:12px 16px;border-radius:16px;position:relative;
  line-height:1.6;
}
.chat-bubble-ai{
  background:rgba(6,182,212,0.08);
  border:1px solid rgba(6,182,212,0.12);
  border-radius:4px 16px 16px 16px;
  color:var(--text);
}
.chat-bubble-user{
  background:linear-gradient(135deg,#df0139,#ff1a4d);
  border:none;
  border-radius:16px 4px 16px 16px;
  color:#fff;
}
.chat-bubble-text{font-size:13px;line-height:1.6;}
.chat-bubble-text p{margin:0 0 6px 0;}
.chat-bubble-text p:last-child{margin-bottom:0;}
.chat-bubble-text ul,.chat-bubble-text ol{margin:6px 0;padding-left:20px;}
.chat-bubble-text li{margin:3px 0;}
.chat-bubble-text strong{font-weight:700;}
.chat-bubble-text code{
  background:rgba(6,182,212,0.1);padding:1px 5px;border-radius:4px;
  font-family:var(--font-mono);font-size:12px;
}
.chat-bubble-text br{display:block;content:"";margin:4px 0;}
.chat-bubble-time{
  font-size:9px;margin-top:6px;
  opacity:0.5;font-family:var(--font-mono);
}
.chat-bubble-user .chat-bubble-time{color:rgba(255,255,255,0.6);}

/* Typing indicator */
.chat-typing-bubble{padding:12px 20px;}
.typing-dots{display:flex;gap:5px;align-items:center;height:16px;}
.typing-dots span{
  width:7px;height:7px;border-radius:50%;
  background:#06b6d4;opacity:0.4;
  animation:typingBounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2){animation-delay:0.2s;}
.typing-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes typingBounce{
  0%,60%,100%{transform:translateY(0);opacity:0.4;}
  30%{transform:translateY(-6px);opacity:1;}
}

/* Suggestion chips */
.chat-suggestions{
  padding:10px 18px;display:flex;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--border);flex-shrink:0;
}
.chat-suggestion{
  padding:7px 14px;border-radius:20px;font-size:11px;font-weight:500;
  border:1px solid rgba(6,182,212,0.2);background:rgba(6,182,212,0.06);
  color:#06b6d4;cursor:pointer;font-family:var(--font-sans);
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.chat-suggestion:hover{
  background:rgba(6,182,212,0.15);border-color:rgba(6,182,212,0.35);
  transform:translateY(-1px);
}
.chat-suggestion:active{transform:scale(0.95);}

/* Input bar */
.chat-input-bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;border-top:1px solid var(--border);
  background:rgba(255,255,255,0.5);flex-shrink:0;
}
.chat-input{
  flex:1;padding:10px 16px;border-radius:12px;
  border:1px solid var(--border);background:rgba(255,255,255,0.8);
  font-size:13px;font-family:var(--font-sans);color:var(--text);
  outline:none;transition:all 0.2s;
}
.chat-input:focus{
  border-color:rgba(6,182,212,0.4);
  box-shadow:0 0 0 3px rgba(6,182,212,0.08);
}
.chat-input::placeholder{color:var(--text-dim);}
.chat-send-btn{
  width:40px;height:40px;border-radius:12px;border:none;
  background:linear-gradient(135deg,#06b6d4,#0891b2);
  color:#fff;cursor:pointer;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 2px 10px rgba(6,182,212,0.25);
}
.chat-send-btn:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 4px 18px rgba(6,182,212,0.4);
}
.chat-send-btn:active{transform:scale(0.92);}

/* ================================================================
   WELCOME GUIDE — First-time visitor onboarding overlay
   ================================================================ */
#welcome-guide{
  position:fixed;inset:0;z-index:8000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,12,20,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1);
}
#welcome-guide.visible{opacity:1;pointer-events:all;}
#welcome-guide.hiding{
  opacity:0;pointer-events:none;
  transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1);
}

.welcome-card{
  width:420px;max-width:92vw;
  background:var(--glass);
  backdrop-filter:blur(40px) saturate(1.5);
  -webkit-backdrop-filter:blur(40px) saturate(1.5);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:0;overflow:hidden;
  box-shadow:
    0 30px 100px rgba(0,0,0,0.18),
    0 0 0 1px rgba(223,1,57,0.06),
    0 0 80px rgba(223,1,57,0.04),
    inset 0 1px 0 var(--glass-shine);
  transform:scale(0.85) translateY(30px);
  transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1),
             opacity 0.5s ease;
  opacity:0;
}
#welcome-guide.visible .welcome-card{
  transform:scale(1) translateY(0);
  opacity:1;
  transition-delay:0.2s;
}
#welcome-guide.hiding .welcome-card{
  transform:scale(0.9) translateY(20px);
  opacity:0;
}

/* Header accent strip */
.welcome-card::before{
  content:'';display:block;height:3px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
}

.welcome-header{
  display:flex;align-items:center;gap:16px;
  padding:24px 28px 18px;
}
.welcome-photo{
  width:56px;height:56px;border-radius:16px;object-fit:cover;flex-shrink:0;
  box-shadow:0 4px 16px rgba(223,1,57,0.2),inset 0 0 0 2px rgba(223,1,57,0.12);
}
.welcome-intro h2{
  font-size:18px;font-weight:700;line-height:1.3;
  color:var(--text);
}
.welcome-intro h2 span{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.welcome-intro p{
  font-size:12px;color:var(--text-dim);margin-top:3px;
}

.welcome-body{padding:0 28px 8px;}
.welcome-desc{
  font-size:13px;color:var(--text-dim);line-height:1.65;
  margin-bottom:20px;
}

/* Feature hint items */
.welcome-hints{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:20px;
}
.welcome-hint{
  display:flex;align-items:center;gap:14px;
  padding:10px 14px;border-radius:12px;
  background:rgba(30,30,39,0.03);
  border:1px solid var(--border);
  opacity:0;transform:translateX(-16px);
  transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
#welcome-guide.visible .welcome-hint{
  opacity:1;transform:translateX(0);
}
#welcome-guide.visible .welcome-hint:nth-child(1){transition-delay:0.45s;}
#welcome-guide.visible .welcome-hint:nth-child(2){transition-delay:0.55s;}
#welcome-guide.visible .welcome-hint:nth-child(3){transition-delay:0.65s;}

.welcome-hint-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:18px;
}
.welcome-hint-text{
  font-size:12px;font-weight:500;color:var(--text);
  line-height:1.4;
}
.welcome-hint-text span{
  color:var(--text-dim);font-weight:400;font-size:11px;
  display:block;margin-top:1px;
}

/* CTA button */
.welcome-footer{padding:0 28px 24px;}
.welcome-cta{
  width:100%;padding:13px 20px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:14px;font-weight:600;
  font-family:var(--font-sans);cursor:pointer;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 4px 20px rgba(223,1,57,0.3);
  display:flex;align-items:center;justify-content:center;gap:8px;
  opacity:0;transform:translateY(10px);
}
#welcome-guide.visible .welcome-cta{
  opacity:1;transform:translateY(0);
  transition-delay:0.8s;
}
.welcome-cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 6px 28px rgba(223,1,57,0.45);
}
.welcome-cta:active{transform:scale(0.97);}
.welcome-cta svg{
  transition:transform 0.3s;
}
.welcome-cta:hover svg{transform:translateX(3px);}

.welcome-skip{
  display:block;text-align:center;
  font-size:10.5px;color:var(--text-faint);
  margin-top:10px;padding:4px;
  cursor:pointer;transition:color 0.2s;
  border:none;background:none;width:100%;
  font-family:var(--font-sans);
}
.welcome-skip:hover{color:var(--text-dim);}

/* Desktop icon pulse rings — shown before guide is dismissed */
.d-icon.hint-pulse .d-icon-img::after{
  content:'';position:absolute;
  top:50%;left:50%;
  width:52px;height:52px;
  margin-left:-26px;margin-top:-26px;
  border-radius:50%;
  border:2px solid var(--accent);
  opacity:0;
  animation:hintPulseRing 2s ease-out infinite;
  pointer-events:none;
}
@keyframes hintPulseRing{
  0%{transform:scale(0.8);opacity:0.6;}
  100%{transform:scale(1.6);opacity:0;}
}

/* Taskbar bounce hint arrow */
.taskbar-hint{
  position:absolute;bottom:62px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;pointer-events:none;
  transition:opacity 0.5s;
  z-index:501;
}
.taskbar-hint.visible{opacity:1;}
.taskbar-hint-text{
  font-size:10px;font-weight:500;color:var(--text-dim);
  background:var(--glass);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:6px 14px;border-radius:8px;
  border:1px solid var(--glass-border);
  box-shadow:0 4px 16px rgba(0,0,0,0.08);
  white-space:nowrap;
}
.taskbar-hint-arrow{
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid rgba(30,30,39,0.15);
  animation:hintBounce 1.5s ease-in-out infinite;
}
@keyframes hintBounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(4px);}
}

/* ================================================================
   PERSISTENT DESKTOP TIPS BAR
   ================================================================ */
.desktop-tips{
  position:absolute;bottom:68px;left:50%;transform:translateX(-50%);
  z-index:400;
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;
  background:var(--glass);
  backdrop-filter:blur(30px) saturate(1.4);
  -webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid var(--glass-border);
  border-radius:30px;
  box-shadow:0 8px 32px rgba(0,0,0,0.08),0 0 0 1px rgba(223,1,57,0.04);
  opacity:0;transform:translateX(-50%) translateY(20px);
  transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
}
.desktop-tips.visible{
  opacity:1;transform:translateX(-50%) translateY(0);
  pointer-events:all;
}
.desktop-tips.hiding{
  opacity:0;transform:translateX(-50%) translateY(10px);
  transition:all 0.4s ease;
}
.desktop-tip{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;color:var(--text-dim);
  white-space:nowrap;
  opacity:0;transform:translateY(6px);
  animation:tipReveal 0.4s ease forwards;
  animation-delay:var(--delay, 0s);
}
.desktop-tips.visible .desktop-tip{
  opacity:1;transform:translateY(0);
}
.tip-icon{font-size:14px;}
.tip-divider{color:var(--text-faint);font-size:14px;}
.tips-close{
  background:none;border:none;color:var(--text-faint);
  font-size:12px;cursor:pointer;padding:2px 4px;
  margin-left:4px;transition:color 0.2s;
  font-family:var(--font-sans);
}
.tips-close:hover{color:var(--text);}

@keyframes tipReveal{
  0%{opacity:0;transform:translateY(6px);}
  100%{opacity:1;transform:translateY(0);}
}

/* Responsive */
@media(max-width:768px){
  .desktop-icons{padding:14px;gap:2px;}
  .d-icon{width:68px;height:82px;}
  .d-icon-img{width:42px;height:42px;}
  .os-win{min-width:290px!important;}
  .start-menu{width:280px;}
  .welcome-card{max-width:94vw;}
  .welcome-header{padding:20px 20px 14px;}
  .welcome-body{padding:0 20px 6px;}
  .welcome-footer{padding:0 20px 20px;}
  .welcome-photo{width:46px;height:46px;border-radius:12px;}
  .welcome-intro h2{font-size:16px;}

  /* === MOBILE PERFORMANCE === */

  /* Kill expensive backdrop-filter on mobile — use solid fallbacks */
  .taskbar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(245,245,245,0.96) !important;
  }
  .os-win{
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    background:rgba(255,255,255,0.92) !important;
  }
  .start-menu{
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    background:rgba(255,255,255,0.94) !important;
  }
  .toast{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(255,255,255,0.96) !important;
  }
  .ctx-menu{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(255,255,255,0.96) !important;
  }
  #welcome-guide{
    backdrop-filter:blur(4px) !important;
    -webkit-backdrop-filter:blur(4px) !important;
  }
  .welcome-card{
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
  }
  .desktop-tips{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(255,255,255,0.94) !important;
  }

  /* Disable floating animation on mobile icons to save GPU compositing */
  .d-icon.show .d-icon-img{animation:none !important;}

  /* Simplify icon reveal — remove 3D rotateX that causes glitches */
  .d-icon{perspective:none !important;}
  .d-icon-img{
    transform-style:flat !important;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.12)) !important;
  }
  .d-icon.show{
    animation:iconRevealMobile 0.35s ease forwards !important;
  }
  @keyframes iconRevealMobile{
    0%{opacity:0;transform:scale(0.7) translateY(12px);}
    100%{opacity:1;transform:scale(1) translateY(0);}
  }

  /* Simplify window animations — NO filter:blur (causes glitches on mobile) */
  .os-win{
    animation:winOpenMobile 0.3s ease forwards !important;
    box-shadow:0 10px 40px rgba(0,0,0,0.1),0 0 0 1px rgba(30,30,39,0.04) !important;
  }
  @keyframes winOpenMobile{
    0%{opacity:0;transform:scale(0.9) translateY(20px);}
    100%{opacity:1;transform:scale(1) translateY(0);}
  }
  .os-win.closing{
    animation:winCloseMobile 0.25s ease forwards !important;
  }
  @keyframes winCloseMobile{
    0%{opacity:1;transform:scale(1);}
    100%{opacity:0;transform:scale(0.92) translateY(16px);}
  }
  .os-win.focused{
    box-shadow:0 12px 48px rgba(0,0,0,0.12),0 0 0 1px rgba(223,1,57,0.08) !important;
  }

  /* Reduce aurora animation */
  .aurora{animation:none !important;opacity:0.5 !important;}
  .wallpaper::before{animation:none !important;opacity:0.3 !important;}
  .noise{display:none !important;}

  /* Desktop tips bar — stack vertically on mobile */
  .desktop-tips{
    flex-direction:column;gap:6px;
    border-radius:16px;padding:10px 16px;
    bottom:62px;
  }
  .tip-divider{display:none;}
}