/* ═══════════════════════════════════════════════════════════════
   AERO MODE V4 — Full 2007 Frutiger Aero Redesign
   Blue → Pink palette. Restructured DOM layout.
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Neuropol';src:url('/assets/fonts/Neuropol.otf') format('opentype');font-display:swap;}

html.aero-mode{
  --a-blue:#2878c8;--a-sky:#4098e0;--a-pink:#d060a8;--a-magenta:#c048a0;
  --a-lavender:#b878d8;--a-mint:#58c8b0;
  --a-text:#1a2030;--a-text2:#404860;--a-text3:#808ca0;--a-link:#2068b8;
  --a-glass:linear-gradient(180deg,rgba(255,255,255,.93),rgba(242,246,255,.9));
  --a-glass2:linear-gradient(180deg,rgba(255,255,255,.88),rgba(238,244,255,.84));
  --a-border:rgba(180,200,230,.55);
  --a-btn:linear-gradient(180deg,#fff 0%,#eaf0fa 44%,#d0ddf0 100%);
  --a-btn-h:linear-gradient(180deg,#fff 0%,#deeaff 44%,#bcd0f0 100%);
  --a-shadow:0 2px 8px rgba(0,40,90,.08);
  --a-shadow-lg:0 4px 16px rgba(0,40,90,.1);
  --a-font:'Segoe UI','Tahoma',sans-serif;
  --a-display:'Neuropol','Segoe UI Black',sans-serif;
  --a-r:12px;
}

/* ── SKY — blue to pink gradient ─────────── */
html.aero-mode body{
  background:linear-gradient(170deg,#1868b0 0%,#3088d0 12%,#4898e0 24%,#68a8e8 36%,#88b8f0 48%,#a8c8f4 58%,#c8b8e0 68%,#d8a8d0 78%,#e8b0c8 88%,#f0c8d8 95%,#f8e0ea 100%) !important;
  background-attachment:fixed !important;
  color:var(--a-text) !important;font-family:var(--a-font) !important;
}
html.aero-mode body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 100% 25% at 25% 92%,rgba(255,255,255,.3) 0%,transparent 65%),
    radial-gradient(ellipse 80% 20% at 75% 88%,rgba(255,220,240,.2) 0%,transparent 60%),
    radial-gradient(ellipse 50% 30% at 10% 40%,rgba(200,230,255,.12) 0%,transparent 50%),
    radial-gradient(ellipse 40% 25% at 88% 30%,rgba(255,200,230,.1) 0%,transparent 50%);
}

/* Particles */
html.aero-mode #aeroParticles{display:block !important;}
#aeroParticles{display:none;position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.aero-orb{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.45),transparent);animation:aeroFloat linear infinite;opacity:0;}
@keyframes aeroFloat{0%{transform:translateY(100vh) scale(.4);opacity:0;}8%{opacity:.6;}88%{opacity:.15;}100%{transform:translateY(-8vh) scale(1);opacity:0;}}

/* ── PAGE CENTERING ──────────────────────── */
html.aero-mode #feedPage{max-width:1080px !important;margin:0 auto !important;padding:0 16px !important;position:relative;z-index:1;}

/* ═══════════════════════════════════════════
   BRANDED BANNER (#aeroBanner)
   ═══════════════════════════════════════════ */
#aeroBanner{
  display:none;
  background:linear-gradient(135deg,var(--a-blue) 0%,var(--a-sky) 35%,var(--a-lavender) 65%,var(--a-pink) 100%);
  border:1px solid rgba(255,255,255,.3);border-radius:0 0 16px 16px;
  padding:32px 36px 28px;margin:0 0 0;position:relative;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,40,100,.12),inset 0 1px 0 rgba(255,255,255,.35);
}
html.aero-mode #aeroBanner{display:block;}
.ab-shine{position:absolute;top:0;left:0;right:0;height:55%;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none;}
.ab-rays{position:absolute;top:-30%;right:-5%;width:50%;height:160%;background:radial-gradient(ellipse,rgba(255,255,255,.1) 0%,transparent 65%);pointer-events:none;}
.ab-content{position:relative;z-index:2;}
.ab-logo{font:800 38px var(--a-display);color:#fff;text-shadow:0 2px 6px rgba(0,30,80,.25),0 0 30px rgba(255,255,255,.1);letter-spacing:2px;}
.ab-logo span{color:#ffc0e0;text-shadow:0 2px 6px rgba(0,30,80,.25),0 0 20px rgba(255,180,220,.25);}
.ab-tagline{font:400 14px var(--a-font);color:rgba(255,255,255,.75);margin-top:6px;letter-spacing:.3px;}
/* Floating decorative bubbles */
.ab-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.25),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.15);animation:abBob 6s ease-in-out infinite;z-index:1;}
@keyframes abBob{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-8px) scale(1.05);}}
.ab-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;}

/* ═══════════════════════════════════════════
   NAVIGATION — Vista toolbar
   ═══════════════════════════════════════════ */
html.aero-mode #feedPage > nav{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;border-top:none !important;
  border-radius:0 0 var(--a-r) var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 rgba(255,255,255,.95) !important;
  padding:8px 20px !important;position:relative;margin-bottom:16px !important;
}
html.aero-mode #feedPage > nav::before{
  content:'';position:absolute;top:0;left:-1px;right:-1px;height:3px;
  background:linear-gradient(90deg,var(--a-blue),var(--a-sky),var(--a-lavender),var(--a-pink),var(--a-blue));background-size:200% 100%;
  animation:navStripe 8s linear infinite;pointer-events:none;z-index:3;
}
@keyframes navStripe{0%{background-position:0 0;}100%{background-position:200% 0;}}
html.aero-mode #feedPage > nav::after{
  content:'';position:absolute;top:3px;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);
  pointer-events:none;z-index:0;border-radius:0 0 var(--a-r) var(--a-r);
}
/* Logo */
html.aero-mode .nav-logo-text{
  font:800 20px var(--a-display) !important;color:var(--a-text) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.9) !important;
  -webkit-text-fill-color:var(--a-text) !important;background:none !important;
  -webkit-background-clip:unset !important;background-clip:unset !important;
  position:relative;z-index:2;letter-spacing:.5px !important;
}
html.aero-mode .nav-logo-text em{color:var(--a-pink) !important;-webkit-text-fill-color:var(--a-pink) !important;}
/* Tabs */
html.aero-mode .nav-tabs{background:rgba(0,50,120,.05) !important;border:1px solid rgba(0,50,120,.08) !important;border-radius:9px !important;padding:3px !important;box-shadow:inset 0 1px 2px rgba(0,30,60,.03) !important;position:relative;z-index:2;}
html.aero-mode .tab-btn,html.aero-mode .nav-tab{background:transparent !important;color:var(--a-text2) !important;border:none !important;border-radius:7px !important;font:600 12px var(--a-font) !important;padding:7px 15px !important;text-shadow:0 1px 0 rgba(255,255,255,.6) !important;transition:all .15s !important;}
html.aero-mode .tab-btn:hover{background:rgba(255,255,255,.5) !important;color:var(--a-text) !important;}
html.aero-mode .tab-btn.active{background:var(--a-btn) !important;color:var(--a-text) !important;box-shadow:0 1px 3px rgba(0,40,80,.08),inset 0 1px 0 #fff !important;border:1px solid rgba(0,50,120,.1) !important;}
/* Draw button */
html.aero-mode .nav-draw-btn,.draw-btn{
  background:linear-gradient(180deg,#e878c0 0%,#d060a8 50%,#b848a0 100%) !important;
  color:#fff !important;border:1px solid rgba(160,40,120,.4) !important;border-radius:20px !important;
  padding:7px 20px !important;box-shadow:0 2px 6px rgba(160,40,120,.2),inset 0 1px 0 rgba(255,255,255,.3) !important;
  text-shadow:0 -1px 1px rgba(100,20,80,.25) !important;font:700 13px var(--a-font) !important;
  position:relative;z-index:2;overflow:hidden;transition:all .15s !important;
}
html.aero-mode .nav-draw-btn::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:left .4s;}
html.aero-mode .nav-draw-btn:hover::after{left:120%;}
html.aero-mode .nav-draw-btn:hover{background:linear-gradient(180deg,#f088d0 0%,#e070b8 50%,#c858b0 100%) !important;transform:none !important;}
/* About btn */
html.aero-mode .about-nav-btn{background:var(--a-btn) !important;border:1px solid rgba(0,50,120,.1) !important;color:var(--a-text2) !important;border-radius:18px !important;padding:6px 16px !important;font:600 12px var(--a-font) !important;box-shadow:0 1px 3px rgba(0,30,60,.05),inset 0 1px 0 #fff !important;text-decoration:none !important;position:relative;z-index:2;}
/* Avatar & notif */
html.aero-mode .nav-avatar{border:2.5px solid rgba(255,255,255,.75) !important;box-shadow:0 1px 6px rgba(0,40,100,.1) !important;position:relative;z-index:2;}
html.aero-mode .notif-btn{background:var(--a-btn) !important;border:1px solid rgba(0,50,120,.1) !important;color:var(--a-text) !important;border-radius:9px !important;box-shadow:0 1px 3px rgba(0,30,60,.05),inset 0 1px 0 #fff !important;position:relative;z-index:2;}

/* ═══════════════════════════════════════════
   WINDOW FRAMES (feed + sidebar)
   ═══════════════════════════════════════════ */
.aw-window{
  display:none;
  border:1px solid var(--a-border);border-radius:10px;
  box-shadow:var(--a-shadow-lg);overflow:hidden;
  background:var(--a-glass);
}
html.aero-mode .aw-window{display:block;}
.aw-titlebar{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;position:relative;
  background:linear-gradient(180deg,rgba(220,235,255,.95) 0%,rgba(200,218,245,.9) 48%,rgba(185,205,240,.88) 50%,rgba(195,215,245,.85) 100%);
  border-bottom:1px solid var(--a-border);
}
.aw-titlebar-shine{position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.08));pointer-events:none;}
.aw-title-icon{font-size:14px;position:relative;z-index:1;}
.aw-title-text{font:700 12px var(--a-font);color:var(--a-text);text-shadow:0 1px 0 rgba(255,255,255,.8);position:relative;z-index:1;flex:1;}
.aw-titlebar-btns{display:flex;gap:3px;position:relative;z-index:1;}
.aw-tbtn{
  width:20px;height:18px;border-radius:3px;
  background:var(--a-btn);border:1px solid rgba(0,50,120,.12);
  display:flex;align-items:center;justify-content:center;
  font:400 10px var(--a-font);color:var(--a-text3);
  cursor:default;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.aw-tbtn-close{background:linear-gradient(180deg,#f88,#d44);color:#fff;border-color:rgba(180,30,30,.3);}
.aw-body{padding:0;}
/* Sidebar window variant */
.aw-sidebar-win{margin-bottom:0;}
.aw-titlebar-side{
  background:linear-gradient(180deg,rgba(240,220,245,.95) 0%,rgba(230,210,240,.9) 48%,rgba(220,198,235,.88) 50%,rgba(228,208,240,.85) 100%);
}

/* ═══════════════════════════════════════════
   USER PROFILE WIDGET (sidebar top)
   ═══════════════════════════════════════════ */
.aw-profile-widget{
  display:none;
  padding:16px;text-align:center;
  background:linear-gradient(180deg,rgba(240,245,255,.5),rgba(230,238,255,.3));
  border-bottom:1px solid rgba(0,50,120,.06);
}
html.aero-mode .aw-profile-widget{display:block;}
.aw-pw-ava{
  width:56px;height:56px;border-radius:50%;margin:0 auto 8px;
  border:3px solid rgba(255,255,255,.8);
  box-shadow:0 2px 10px rgba(0,50,120,.12),0 0 0 1px var(--a-border);
  overflow:hidden;background:linear-gradient(135deg,var(--a-sky),var(--a-pink));
  display:flex;align-items:center;justify-content:center;
}
.aw-pw-ava-img{width:100%;height:100%;object-fit:cover;}
.aw-pw-ava-init{font:700 20px var(--a-font);color:#fff;}
.aw-pw-name{font:700 14px var(--a-display);color:var(--a-text);}
.aw-pw-handle{font:400 11px var(--a-font);color:var(--a-text3);margin-top:1px;}
.aw-pw-actions{display:flex;gap:6px;justify-content:center;margin-top:10px;}
.aw-btn{
  padding:5px 12px;border-radius:6px;font:600 11px var(--a-font);cursor:pointer;
  border:1px solid rgba(0,50,120,.1);
  background:var(--a-btn);color:var(--a-text2);
  box-shadow:0 1px 2px rgba(0,30,60,.05),inset 0 1px 0 #fff;
  transition:background .12s;
}
.aw-btn:hover{background:var(--a-btn-h);}
.aw-btn-blue{
  background:linear-gradient(180deg,#e878c0,#d060a8,#b848a0) !important;
  color:#fff !important;border-color:rgba(160,40,120,.3) !important;
  text-shadow:0 -1px 1px rgba(100,20,80,.2);
  box-shadow:0 1px 4px rgba(160,40,120,.15),inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ═══════════════════════════════════════════
   AERO FOOTER
   ═══════════════════════════════════════════ */
.aw-footer{
  display:none;text-align:center;
  padding:14px 20px;margin-top:20px;
  background:var(--a-glass);border:1px solid var(--a-border);
  border-radius:var(--a-r) var(--a-r) 0 0;
  font:400 11px var(--a-font);color:var(--a-text3);
  box-shadow:var(--a-shadow);
}
html.aero-mode .aw-footer{display:block;}

/* ═══════════════════════════════════════════
   FEED CONTAINER — restructured
   ═══════════════════════════════════════════ */
html.aero-mode .feed-container{gap:16px !important;padding:0 !important;}
html.aero-mode #feedMain{padding:14px !important;background:transparent !important;border:none !important;box-shadow:none !important;}

/* Feed header */
html.aero-mode .feed-header{
  background:linear-gradient(135deg,var(--a-pink) 0%,var(--a-magenta) 30%,var(--a-lavender) 65%,var(--a-sky) 100%) !important;
  border:1px solid rgba(255,255,255,.3) !important;border-radius:var(--a-r) !important;
  padding:24px 26px !important;margin:0 0 14px !important;position:relative;overflow:hidden;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html.aero-mode .feed-header::before{content:'';position:absolute;top:0;left:0;right:0;height:52%;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none;}
html.aero-mode .feed-title{font:800 26px var(--a-display) !important;color:#fff !important;text-shadow:0 2px 4px rgba(0,40,80,.2) !important;position:relative;z-index:1;}
html.aero-mode .feed-subtitle{color:rgba(255,255,255,.75) !important;position:relative;z-index:1;}
html.aero-mode .view-toggle{background:rgba(255,255,255,.18) !important;border:1px solid rgba(255,255,255,.25) !important;border-radius:8px !important;position:relative;z-index:1;}
html.aero-mode .view-btn{color:rgba(255,255,255,.65) !important;border:none !important;border-radius:6px !important;}
html.aero-mode .view-btn.active{background:rgba(255,255,255,.28) !important;color:#fff !important;}

/* ═══════════════════════════════════════════
   SKETCH CARDS — glossy panels
   ═══════════════════════════════════════════ */
html.aero-mode .sketch-grid{gap:14px !important;}
html.aero-mode .sketch-card{
  background:linear-gradient(180deg,#fff,#f4f6fc) !important;
  border:1px solid var(--a-border) !important;border-radius:10px !important;
  box-shadow:0 2px 6px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  overflow:hidden;transition:transform .2s,box-shadow .2s !important;
}
html.aero-mode .sketch-card::before{
  content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;
  height:28% !important;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent) !important;
  pointer-events:none !important;z-index:2 !important;transform:none !important;width:auto !important;border:none !important;
}
html.aero-mode .sketch-card:hover{transform:translateY(-4px) !important;box-shadow:0 8px 20px rgba(0,50,100,.1),inset 0 1px 0 #fff !important;}
html.aero-mode .sketch-card .artist-name{color:var(--a-link) !important;font-weight:700 !important;}
html.aero-mode .sketch-card .sketch-caption{color:var(--a-text2) !important;}
html.aero-mode .sketch-card .card-stats,html.aero-mode .sketch-card .card-stats span{color:var(--a-text3) !important;}

/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
html.aero-mode .feed-sidebar{gap:0 !important;padding:0 !important;background:transparent !important;border:none !important;box-shadow:none !important;border-radius:0 !important;}
html.aero-mode .sidebar-panel{
  background:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;
  border-bottom:1px solid rgba(0,50,120,.05) !important;
}
html.aero-mode .sidebar-title{color:var(--a-text) !important;font:700 12px var(--a-font) !important;text-shadow:0 1px 0 rgba(255,255,255,.6) !important;}
html.aero-mode .sidebar-title-row{border-color:rgba(0,50,120,.06) !important;}
html.aero-mode .sidebar-item{color:var(--a-text2) !important;border-color:rgba(0,50,120,.04) !important;}
html.aero-mode .sidebar-item:hover{background:rgba(0,100,200,.04) !important;}
html.aero-mode .sidebar-name{color:var(--a-text) !important;}
html.aero-mode .sidebar-meta{color:var(--a-text3) !important;}
html.aero-mode .sidebar-toggle-btn{background:var(--a-btn) !important;border:1px solid rgba(0,50,120,.08) !important;color:var(--a-text2) !important;border-radius:6px !important;box-shadow:0 1px 2px rgba(0,30,60,.04),inset 0 1px 0 #fff !important;}
html.aero-mode .sidebar-toggle-btn:hover,.sidebar-toggle-btn.active-view{background:var(--a-btn-h) !important;color:var(--a-text) !important;}

/* ═══════════════════════════════════════════
   AUTH, DROPDOWN, NOTIF, MODAL, TOAST
   ═══════════════════════════════════════════ */
html.aero-mode .auth-container{background:var(--a-glass) !important;border:1px solid var(--a-border) !important;border-radius:14px !important;box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;position:relative;overflow:hidden;}
html.aero-mode .auth-container::before{content:'';position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);pointer-events:none;}
html.aero-mode .auth-logo{font-family:var(--a-display) !important;color:var(--a-text) !important;position:relative;z-index:1;}
html.aero-mode .auth-logo em{color:var(--a-pink) !important;}
html.aero-mode .auth-tab{color:var(--a-text3) !important;border-color:rgba(0,50,120,.08) !important;}
html.aero-mode .auth-tab.active{color:var(--a-text) !important;border-color:var(--a-pink) !important;}
html.aero-mode .auth-input{background:rgba(255,255,255,.8) !important;border:1px solid rgba(0,50,120,.13) !important;color:var(--a-text) !important;border-radius:8px !important;box-shadow:inset 0 1px 3px rgba(0,30,60,.04) !important;}
html.aero-mode .auth-input:focus{border-color:var(--a-sky) !important;box-shadow:inset 0 1px 3px rgba(0,30,60,.04),0 0 0 3px rgba(64,152,224,.12) !important;}
html.aero-mode .auth-btn{background:linear-gradient(180deg,#e878c0,#d060a8,#b848a0) !important;color:#fff !important;border:1px solid rgba(160,40,120,.4) !important;border-radius:10px !important;box-shadow:0 2px 6px rgba(160,40,120,.18),inset 0 1px 0 rgba(255,255,255,.25) !important;}
html.aero-mode .auth-switch{color:var(--a-text3) !important;}
html.aero-mode .auth-switch a{color:var(--a-link) !important;}

html.aero-mode .dropdown-menu{background:var(--a-glass) !important;border:1px solid var(--a-border) !important;border-radius:10px !important;box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;}
html.aero-mode .dropdown-item{color:var(--a-text2) !important;border-radius:6px !important;}
html.aero-mode .dropdown-item:hover{background:rgba(0,100,200,.05) !important;color:var(--a-text) !important;}
html.aero-mode .dropdown-item.danger{color:#c03030 !important;}

html.aero-mode .notif-panel{background:var(--a-glass) !important;border:1px solid var(--a-border) !important;border-radius:12px !important;box-shadow:var(--a-shadow-lg) !important;}
html.aero-mode .notif-item{border-color:rgba(0,50,120,.04) !important;color:var(--a-text2) !important;}
html.aero-mode .notif-item:hover{background:rgba(0,100,200,.03) !important;}
html.aero-mode .notif-text{color:var(--a-text2) !important;}
html.aero-mode .notif-text strong{color:var(--a-text) !important;}
html.aero-mode .notif-time{color:var(--a-text3) !important;}
html.aero-mode .notif-header{border-color:rgba(0,50,120,.06) !important;color:var(--a-text) !important;}

html.aero-mode .modal-overlay{background:rgba(0,30,60,.3) !important;}
html.aero-mode .modal-box,html.aero-mode [class*="modal-content"]{background:var(--a-glass) !important;border:1px solid var(--a-border) !important;border-radius:14px !important;box-shadow:0 8px 32px rgba(0,30,60,.12),inset 0 1px 0 #fff !important;color:var(--a-text) !important;}

html.aero-mode .toast,html.aero-mode #toast{background:var(--a-glass) !important;color:var(--a-text) !important;border:1px solid var(--a-border) !important;border-radius:10px !important;box-shadow:var(--a-shadow-lg) !important;}

/* ═══════════════════════════════════════════
   MISC — links, empty, scrollbar, footer
   ═══════════════════════════════════════════ */
html.aero-mode a{color:var(--a-link) !important;}
html.aero-mode a:hover{color:#3088dd !important;}
html.aero-mode .empty-msg{color:var(--a-text3) !important;}
html.aero-mode ._crown-title{font-family:var(--a-display) !important;color:var(--a-text) !important;}
html.aero-mode ::-webkit-scrollbar{width:10px;}
html.aero-mode ::-webkit-scrollbar-track{background:rgba(200,220,240,.25);}
html.aero-mode ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(180,200,230,.6),rgba(200,180,220,.5));border-radius:5px;border:2px solid rgba(255,255,255,.35);}
html.aero-mode .mention-dd{background:var(--a-glass) !important;border:1px solid var(--a-border) !important;box-shadow:var(--a-shadow-lg) !important;}
html.aero-mode .mention-dd::after{background:rgba(248,250,255,.95) !important;border-color:var(--a-border) !important;}
html.aero-mode .mention-row:hover,.mention-row.sel{background:rgba(0,100,200,.05) !important;}
html.aero-mode .mention-dn{color:var(--a-text) !important;}
html.aero-mode .mention-un{color:var(--a-text3) !important;}

/* ═══════════════════════════════════════════
   NOTIFICATIONS & REPORTS BUTTONS — Aero
   ═══════════════════════════════════════════ */
html.aero-mode .notif-btn,
html.aero-mode #notifBtn{
  background:var(--a-btn) !important;
  border:1px solid var(--a-border) !important;
  color:var(--a-text2) !important;
  border-radius:9px !important;
  box-shadow:0 1px 3px rgba(0,30,60,.06),inset 0 1px 0 #fff !important;
  position:relative;z-index:2;
  overflow:hidden;
}
html.aero-mode .notif-btn:hover,
html.aero-mode #notifBtn:hover{
  background:var(--a-btn-h) !important;
}
/* Notification badge */
html.aero-mode .notif-badge,
html.aero-mode #notifBadge{
  background:linear-gradient(180deg,#f070b0,#d050a0) !important;
  border:1.5px solid rgba(255,255,255,.6) !important;
  color:#fff !important;
  box-shadow:0 1px 4px rgba(180,40,100,.3) !important;
}

/* Reports/mod button */
html.aero-mode #modReportsBtn,
html.aero-mode .mod-reports-btn{
  background:var(--a-btn) !important;
  border:1px solid var(--a-border) !important;
  color:var(--a-text2) !important;
  border-radius:9px !important;
  box-shadow:0 1px 3px rgba(0,30,60,.06),inset 0 1px 0 #fff !important;
  position:relative;z-index:2;
  font-family:var(--a-font) !important;
}
html.aero-mode #modReportsBtn:hover{
  background:var(--a-btn-h) !important;
}
/* Reports badge */
html.aero-mode .mod-badge{
  background:linear-gradient(180deg,#f070b0,#d050a0) !important;
  border:1.5px solid rgba(255,255,255,.6) !important;
  color:#fff !important;
  box-shadow:0 1px 4px rgba(180,40,100,.3) !important;
}

/* Reports panel dropdown */
html.aero-mode .mod-panel,
html.aero-mode #modReportsPanel{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:12px !important;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;
}
html.aero-mode .mod-panel-header{
  background:linear-gradient(180deg,rgba(230,215,245,.5),rgba(220,210,240,.3)) !important;
  border-bottom:1px solid var(--a-border) !important;
  color:var(--a-text) !important;
}
html.aero-mode .mod-report-item{
  border-color:rgba(0,50,120,.05) !important;
  color:var(--a-text2) !important;
}
html.aero-mode .mod-report-item:hover{
  background:rgba(0,100,200,.03) !important;
}

/* ═══════════════════════════════════════════
   THREAD PAGE — Complete Aero Redesign
   ═══════════════════════════════════════════ */

/* Thread page body */
html.aero-mode .thread-wrap{
  max-width:780px !important;
  margin:0 auto !important;
  position:relative;z-index:1;
}

/* Thread URL bar — glass pill */
html.aero-mode .thread-url-bar{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:20px !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  padding:6px 16px !important;
  color:var(--a-text2) !important;
  font-family:var(--a-font) !important;
}
html.aero-mode .copy-btn{
  background:var(--a-btn) !important;
  border:1px solid rgba(0,50,120,.1) !important;
  color:var(--a-text2) !important;
  border-radius:14px !important;
  font:600 11px var(--a-font) !important;
  box-shadow:0 1px 2px rgba(0,30,60,.05),inset 0 1px 0 #fff !important;
  padding:4px 12px !important;
}
html.aero-mode .copy-btn:hover{
  background:var(--a-btn-h) !important;
}

/* Remix presence banner */
html.aero-mode .remix-presence-float{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:20px !important;
  box-shadow:var(--a-shadow) !important;
  color:var(--a-text2) !important;
}
html.aero-mode .remix-presence-dot{
  background:linear-gradient(135deg,var(--a-pink),var(--a-magenta)) !important;
  box-shadow:0 0 8px rgba(208,96,168,.4) !important;
}

/* ── Post cards (root + replies) ─────────── */
html.aero-mode .post-card,
html.aero-mode .root-card{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;
  overflow:hidden;
  position:relative;
}
/* Top reflection */
html.aero-mode .post-card::before,
html.aero-mode .root-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:30%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);
  pointer-events:none;z-index:1;
}
html.aero-mode .root-card{
  border-width:2px !important;
  border-color:rgba(180,160,220,.5) !important;
  box-shadow:0 4px 20px rgba(120,60,160,.08),inset 0 1px 0 #fff !important;
}

/* Post body */
html.aero-mode .post-body{
  padding:14px 16px !important;
  background:transparent !important;
}
html.aero-mode .post-artist-name{
  color:var(--a-link) !important;
  font-weight:700 !important;
  font-family:var(--a-font) !important;
}
html.aero-mode .post-timestamp{
  color:var(--a-text3) !important;
  font-family:var(--a-font) !important;
}
html.aero-mode .post-caption{
  color:var(--a-text2) !important;
  font-family:var(--a-font) !important;
}
html.aero-mode .post-avatar{
  border:2px solid rgba(255,255,255,.7) !important;
  box-shadow:0 1px 4px rgba(0,40,90,.1) !important;
}

/* Remix label */
html.aero-mode .remix-label{
  background:linear-gradient(135deg,rgba(208,96,168,.12),rgba(184,120,216,.08)) !important;
  color:var(--a-pink) !important;
  border:1px solid rgba(208,96,168,.2) !important;
  border-radius:6px !important;
  font-family:var(--a-font) !important;
}

/* ── Vote buttons ────────────────────────── */
html.aero-mode .vote-btn{
  background:var(--a-btn) !important;
  border:1px solid rgba(0,50,120,.1) !important;
  border-radius:6px !important;
  color:var(--a-text2) !important;
  font-family:var(--a-font) !important;
  box-shadow:0 1px 2px rgba(0,30,60,.04),inset 0 1px 0 #fff !important;
  transition:all .12s !important;
}
html.aero-mode .vote-btn:hover{
  background:var(--a-btn-h) !important;
}
html.aero-mode .vote-btn.upvote.active{
  background:linear-gradient(180deg,#e878c0,#d060a8) !important;
  color:#fff !important;
  border-color:rgba(160,40,120,.3) !important;
  box-shadow:0 1px 4px rgba(160,40,120,.2),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html.aero-mode .vote-btn.downvote.active{
  background:linear-gradient(180deg,#90a0b0,#708090) !important;
  color:#fff !important;
  border-color:rgba(60,70,80,.3) !important;
}
html.aero-mode .vote-score{
  color:var(--a-text) !important;
  font-weight:700 !important;
}

/* ── Remix button ────────────────────────── */
html.aero-mode .remix-btn{
  background:linear-gradient(180deg,#60c8ff 0%,#2898e8 50%,#1878c8 100%) !important;
  color:#fff !important;
  border:1px solid rgba(0,80,150,.4) !important;
  border-radius:8px !important;
  font:700 12px var(--a-font) !important;
  box-shadow:0 1px 4px rgba(0,60,120,.18),inset 0 1px 0 rgba(255,255,255,.3) !important;
  text-shadow:0 -1px 1px rgba(0,40,80,.2) !important;
  position:relative;overflow:hidden;
}
html.aero-mode .remix-btn::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transition:left .4s;
}
html.aero-mode .remix-btn:hover::after{left:120%;}
html.aero-mode .remix-btn:hover{
  background:linear-gradient(180deg,#70d0ff 0%,#38a8f8 50%,#2088d8 100%) !important;
}

/* Locked badge */
html.aero-mode .locked-badge{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:6px !important;
  color:var(--a-text3) !important;
  font-family:var(--a-font) !important;
}

/* Report button */
html.aero-mode .report-btn{
  background:transparent !important;
  color:var(--a-text3) !important;
  border:none !important;
  font-family:var(--a-font) !important;
}
html.aero-mode .report-btn:hover{
  color:var(--a-pink) !important;
}

/* ── Thread replies label ────────────────── */
html.aero-mode .thread-label{
  background:linear-gradient(135deg,var(--a-pink) 0%,var(--a-magenta) 40%,var(--a-lavender) 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.3) !important;
  border-radius:var(--a-r) !important;
  padding:12px 18px !important;
  font:700 14px var(--a-font) !important;
  text-shadow:0 1px 3px rgba(0,30,60,.15) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 rgba(255,255,255,.3) !important;
  position:relative;overflow:hidden;
}
html.aero-mode .thread-label::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);
  pointer-events:none;
}

/* ── Remix CTA box ───────────────────────── */
html.aero-mode .remix-cta{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  color:var(--a-text2) !important;
  font-family:var(--a-font) !important;
}

/* ── Mod tools ───────────────────────────── */
html.aero-mode .mod-btn{
  background:var(--a-btn) !important;
  border:1px solid rgba(0,50,120,.1) !important;
  border-radius:6px !important;
  color:var(--a-text2) !important;
  font:600 11px var(--a-font) !important;
  box-shadow:0 1px 2px rgba(0,30,60,.04),inset 0 1px 0 #fff !important;
}
html.aero-mode .mod-popup{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:10px !important;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;
}
html.aero-mode .mod-popup-item{
  color:var(--a-text2) !important;
  font-family:var(--a-font) !important;
  border-radius:6px !important;
}
html.aero-mode .mod-popup-item:hover{
  background:rgba(0,100,200,.05) !important;
}
html.aero-mode .mod-popup-item.danger{color:#c03030 !important;}

/* Hidden overlay */
html.aero-mode .hidden-overlay{
  background:rgba(30,40,60,.85) !important;
  border-radius:var(--a-r) !important;
  color:#fff !important;
}
html.aero-mode .hidden-overlay-view-btn{
  background:var(--a-btn) !important;
  border:1px solid rgba(0,50,120,.1) !important;
  color:var(--a-text2) !important;
  border-radius:8px !important;
  font-family:var(--a-font) !important;
}

/* ── Thread nav (simpler than main) ──────── */
html.aero-mode .thread-wrap ~ nav,
html.aero-mode body > nav{
  background:var(--a-glass) !important;
  border:none !important;
  border-bottom:1px solid var(--a-border) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  position:relative;
}
html.aero-mode body > nav::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--a-blue),var(--a-sky),var(--a-lavender),var(--a-pink),var(--a-blue));
  background-size:200% 100%;animation:navStripe 8s linear infinite;
  pointer-events:none;z-index:3;
}
html.aero-mode body > nav::after{
  content:'';position:absolute;top:3px;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
  pointer-events:none;
}
html.aero-mode .back-btn{
  background:var(--a-btn) !important;
  border:1px solid rgba(0,50,120,.1) !important;
  color:var(--a-text2) !important;
  border-radius:8px !important;
  font-family:var(--a-font) !important;
  box-shadow:0 1px 2px rgba(0,30,60,.04),inset 0 1px 0 #fff !important;
  position:relative;z-index:2;
}
html.aero-mode .draw-btn{
  background:linear-gradient(180deg,#e878c0 0%,#d060a8 50%,#b848a0 100%) !important;
  color:#fff !important;border:1px solid rgba(160,40,120,.4) !important;
  border-radius:20px !important;font:700 13px var(--a-font) !important;
  box-shadow:0 2px 6px rgba(160,40,120,.2),inset 0 1px 0 rgba(255,255,255,.3) !important;
  text-shadow:0 -1px 1px rgba(100,20,80,.25) !important;
  position:relative;z-index:2;overflow:hidden;
}
html.aero-mode .draw-btn::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transition:left .4s;
}
html.aero-mode .draw-btn:hover::after{left:120%;}

/* Thread page dropdown */
html.aero-mode #navDropdown{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:10px !important;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;
}

/* Report modal */
html.aero-mode .report-modal,
html.aero-mode .report-overlay{
  background:rgba(0,30,60,.3) !important;
}
html.aero-mode .report-box{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:14px !important;
  box-shadow:0 8px 32px rgba(0,30,60,.12),inset 0 1px 0 #fff !important;
  color:var(--a-text) !important;
}

/* Thread loading */
html.aero-mode .loading{
  color:var(--a-text3) !important;
  font-family:var(--a-font) !important;
}

/* ═══════════════════════════════════════════
   PROFILE PAGE — Complete Aero Redesign
   ═══════════════════════════════════════════ */

/* Profile page centered */
html.aero-mode .profile-banner,
html.aero-mode .profile-stats-bar,
html.aero-mode .view-toggle-bar,
html.aero-mode .posts-wrap{
  position:relative;z-index:1;
}

/* ── Banner ──────────────────────────────── */
html.aero-mode .profile-banner{
  background:linear-gradient(135deg,var(--a-blue),var(--a-sky) 40%,var(--a-lavender) 70%,var(--a-pink)) !important;
  border:none !important;
  border-radius:0 0 16px 16px !important;
  box-shadow:0 4px 20px rgba(0,40,90,.12) !important;
  position:relative;overflow:hidden;
}
html.aero-mode .profile-banner::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);
  pointer-events:none;z-index:1;
}
html.aero-mode .banner-overlay{
  background:linear-gradient(180deg,rgba(0,30,60,.1) 0%,rgba(0,20,40,.35) 100%) !important;
}
html.aero-mode .banner-content{position:relative;z-index:2;}

/* Avatar — glossy frame */
html.aero-mode .profile-avatar{
  border:4px solid rgba(255,255,255,.7) !important;
  box-shadow:0 3px 16px rgba(0,40,90,.25),0 0 0 1px rgba(255,255,255,.3),inset 0 0 20px rgba(0,0,0,.05) !important;
}

/* Name & handle on banner */
html.aero-mode .profile-name{
  font-family:var(--a-display) !important;
  color:#fff !important;
  text-shadow:0 2px 6px rgba(0,30,60,.3) !important;
}
html.aero-mode .profile-handle{
  color:rgba(255,255,255,.7) !important;
}
html.aero-mode .profile-bio{
  color:rgba(255,255,255,.85) !important;
}

/* Follow / Edit button on profile */
html.aero-mode #profileActions .follow-btn,
html.aero-mode #profileActions button{
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.1)) !important;
  border:1px solid rgba(255,255,255,.4) !important;
  color:#fff !important;
  border-radius:20px !important;
  font:700 12px var(--a-font) !important;
  box-shadow:0 1px 4px rgba(0,30,60,.15),inset 0 1px 0 rgba(255,255,255,.3) !important;
  text-shadow:0 1px 2px rgba(0,30,60,.2) !important;
  padding:7px 20px !important;
  position:relative;overflow:hidden;
}
html.aero-mode #profileActions button:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.18)) !important;
}
/* Following state */
html.aero-mode #profileActions .follow-btn.following{
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(240,245,255,.6)) !important;
  color:var(--a-text) !important;
  text-shadow:none !important;
}

/* Change banner button */
html.aero-mode #changeBannerBtn{
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08)) !important;
  border:1px solid rgba(255,255,255,.3) !important;
  color:rgba(255,255,255,.8) !important;
  border-radius:8px !important;
  font-family:var(--a-font) !important;
}

/* ── Stats bar ───────────────────────────── */
html.aero-mode .profile-stats-bar{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  margin-top:-8px !important;
  position:relative;overflow:hidden;
}
html.aero-mode .profile-stats-bar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);
  pointer-events:none;
}
html.aero-mode .stat-tab{
  color:var(--a-text2) !important;
  border-color:transparent !important;
  position:relative;z-index:1;
}
html.aero-mode .stat-tab.active{
  color:var(--a-text) !important;
  border-color:var(--a-pink) !important;
}
html.aero-mode .stat-val{
  color:var(--a-text) !important;
  font-weight:700 !important;
}
html.aero-mode .stat-lbl{
  color:var(--a-text3) !important;
  font-family:var(--a-font) !important;
}

/* ── View toggle (grid/feed) ─────────────── */
html.aero-mode .view-toggle-bar{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  padding:4px !important;
}
html.aero-mode .vtog-btn{
  background:transparent !important;
  color:var(--a-text2) !important;
  border:none !important;
  border-radius:8px !important;
  font:600 13px var(--a-font) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.6) !important;
  transition:all .15s !important;
}
html.aero-mode .vtog-btn:hover{
  background:rgba(255,255,255,.5) !important;
}
html.aero-mode .vtog-btn.active{
  background:var(--a-btn) !important;
  color:var(--a-text) !important;
  box-shadow:0 1px 3px rgba(0,40,80,.08),inset 0 1px 0 #fff !important;
  border:1px solid rgba(0,50,120,.1) !important;
}

/* ── Posts grid/feed ─────────────────────── */
html.aero-mode .posts-wrap{
  padding:0 !important;
}
html.aero-mode .profile-grid{
  gap:14px !important;
}
html.aero-mode .profile-feed{
  gap:16px !important;
}

/* Profile sketch cards — same glass treatment */
html.aero-mode .profile-grid .sketch-card,
html.aero-mode .profile-feed .sketch-card{
  background:linear-gradient(180deg,#fff,#f4f6fc) !important;
  border:1px solid var(--a-border) !important;
  border-radius:10px !important;
  box-shadow:0 2px 6px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  overflow:hidden;
}
html.aero-mode .profile-grid .sketch-card::before,
html.aero-mode .profile-feed .sketch-card::before{
  content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;
  height:28% !important;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent) !important;
  pointer-events:none !important;z-index:2 !important;transform:none !important;width:auto !important;border:none !important;
}
html.aero-mode .profile-grid .sketch-card:hover,
html.aero-mode .profile-feed .sketch-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 8px 20px rgba(0,50,100,.1),inset 0 1px 0 #fff !important;
}

/* ── Nav on profile page ─────────────────── */
html.aero-mode .profile-banner ~ nav,
html.aero-mode body > nav{
  background:var(--a-glass) !important;
  border:none !important;
  border-bottom:1px solid var(--a-border) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  position:relative;
}

/* ── Followers/Following modal ───────────── */
html.aero-mode .follow-modal-overlay{
  background:rgba(0,30,60,.3) !important;
}
html.aero-mode .follow-modal{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:14px !important;
  box-shadow:0 8px 32px rgba(0,30,60,.12),inset 0 1px 0 #fff !important;
  color:var(--a-text) !important;
  overflow:hidden;
}
html.aero-mode .follow-modal-header{
  background:linear-gradient(180deg,rgba(220,235,255,.6),rgba(210,225,250,.4)) !important;
  border-bottom:1px solid var(--a-border) !important;
  color:var(--a-text) !important;
  font-family:var(--a-font) !important;
}
html.aero-mode .follow-modal-item{
  border-color:rgba(0,50,120,.05) !important;
  color:var(--a-text2) !important;
}
html.aero-mode .follow-modal-item:hover{
  background:rgba(0,100,200,.03) !important;
}
html.aero-mode .follow-modal-name{
  color:var(--a-text) !important;
}

/* ── Medals section ──────────────────────── */
html.aero-mode .medals-section,
html.aero-mode .medal-shelf{
  background:var(--a-glass2) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
}
html.aero-mode .medal-item{
  color:var(--a-text2) !important;
}

/* ── Banner crop modal ───────────────────── */
html.aero-mode .crop-modal-overlay{
  background:rgba(0,30,60,.3) !important;
}
html.aero-mode .crop-modal{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:14px !important;
  box-shadow:0 8px 32px rgba(0,30,60,.12),inset 0 1px 0 #fff !important;
  color:var(--a-text) !important;
}

/* ── Empty state (user not found) ────────── */
html.aero-mode #postsContainer a{
  color:var(--a-link) !important;
}

/* ═══════════════════════════════════════════
   DRAWING PAGE — Liquid Glass Skeuomorphism
   Only buttons, palettes, undo/redo, layers.
   Layout stays 100% untouched.
   ═══════════════════════════════════════════ */

/* ── Tool buttons — liquid glass capsules ── */
html.aero-mode .tool{
  background:linear-gradient(180deg,
    rgba(255,255,255,.95) 0%,
    rgba(230,240,255,.85) 40%,
    rgba(200,220,245,.8) 100%) !important;
  border:1px solid rgba(140,180,225,.5) !important;
  border-radius:8px !important;
  box-shadow:
    0 2px 4px rgba(0,40,90,.08),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,40,80,.04) !important;
  color:var(--a-text2) !important;
  position:relative;overflow:hidden;
  transition:all .12s !important;
}
/* Liquid glass shine overlay */
html.aero-mode .tool::after{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.05));
  border-radius:8px 8px 0 0;pointer-events:none;
}
html.aero-mode .tool:hover{
  background:linear-gradient(180deg,
    #fff 0%,rgba(220,238,255,.9) 40%,rgba(190,215,245,.85) 100%) !important;
  box-shadow:0 3px 8px rgba(0,40,90,.1),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,40,80,.04) !important;
}
html.aero-mode .tool.active{
  background:linear-gradient(180deg,
    rgba(240,140,200,.95) 0%,
    rgba(216,80,170,.9) 40%,
    rgba(190,60,150,.85) 100%) !important;
  color:#fff !important;
  border-color:rgba(150,40,110,.4) !important;
  box-shadow:0 2px 6px rgba(180,50,130,.25),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 2px rgba(100,20,70,.15) !important;
  text-shadow:0 -1px 1px rgba(80,20,60,.2) !important;
}

/* ── Undo / Redo — glossy circular buttons ── */
html.aero-mode #undo,
html.aero-mode #redo{
  background:linear-gradient(180deg,
    rgba(255,255,255,.95) 0%,
    rgba(230,240,255,.88) 45%,
    rgba(200,218,245,.82) 100%) !important;
  border:1px solid rgba(140,180,225,.5) !important;
  border-radius:10px !important;
  box-shadow:
    0 2px 5px rgba(0,40,90,.08),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,40,80,.04) !important;
  position:relative;overflow:hidden;
  transition:all .12s !important;
}
html.aero-mode #undo::after,
html.aero-mode #redo::after{
  content:'';position:absolute;top:0;left:0;right:0;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.05));
  pointer-events:none;border-radius:10px 10px 0 0;
}
html.aero-mode #undo:hover,
html.aero-mode #redo:hover{
  background:linear-gradient(180deg,#fff 0%,rgba(218,235,255,.92) 45%,rgba(190,212,245,.88) 100%) !important;
  box-shadow:0 3px 8px rgba(0,40,90,.12),inset 0 1px 0 #fff !important;
}
html.aero-mode #undo:active,
html.aero-mode #redo:active{
  background:linear-gradient(180deg,rgba(200,218,245,.9),rgba(180,205,240,.85)) !important;
  box-shadow:inset 0 2px 4px rgba(0,40,80,.1) !important;
}

/* ── Clear button ── */
html.aero-mode #clearBtn{
  background:linear-gradient(180deg,#ff9090 0%,#e05050 50%,#c83838 100%) !important;
  color:#fff !important;
  border:1px solid rgba(160,30,30,.35) !important;
  border-radius:8px !important;
  box-shadow:0 2px 4px rgba(160,30,30,.15),inset 0 1px 0 rgba(255,255,255,.3) !important;
  text-shadow:0 -1px 1px rgba(100,10,10,.2) !important;
  position:relative;overflow:hidden;
}
html.aero-mode #clearBtn::after{
  content:'';position:absolute;top:0;left:0;right:0;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);
  pointer-events:none;
}

/* ── Palette number tabs — glass pills ── */
html.aero-mode .palNum{
  background:linear-gradient(180deg,
    rgba(255,255,255,.9) 0%,
    rgba(230,240,250,.8) 100%) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  border-radius:7px !important;
  color:var(--a-text2) !important;
  box-shadow:0 1px 3px rgba(0,40,90,.06),inset 0 1px 0 rgba(255,255,255,.9) !important;
  position:relative;overflow:hidden;
  font-family:var(--a-font) !important;
  font-weight:700 !important;
}
html.aero-mode .palNum::after{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);
  pointer-events:none;
}
html.aero-mode .palNum:hover{
  background:linear-gradient(180deg,#fff,rgba(220,235,255,.9)) !important;
}
html.aero-mode .palNum.active{
  background:linear-gradient(180deg,
    rgba(90,175,240,.95) 0%,
    rgba(40,140,220,.9) 45%,
    rgba(25,115,195,.85) 100%) !important;
  color:#fff !important;
  border-color:rgba(0,80,150,.4) !important;
  box-shadow:0 2px 5px rgba(0,70,140,.2),inset 0 1px 0 rgba(255,255,255,.3) !important;
  text-shadow:0 -1px 1px rgba(0,40,80,.2) !important;
}

/* ── Color swatches — glossy orbs ── */
html.aero-mode .swatch{
  border:2.5px solid rgba(255,255,255,.85) !important;
  border-radius:50% !important;
  box-shadow:
    0 2px 5px rgba(0,30,60,.12),
    inset 0 2px 4px rgba(255,255,255,.3),
    inset 0 -2px 4px rgba(0,0,0,.08) !important;
  position:relative;
}
html.aero-mode .swatch.active-swatch{
  border-color:var(--a-pink) !important;
  box-shadow:
    0 0 0 2px rgba(208,96,168,.35),
    0 2px 8px rgba(208,96,168,.2),
    inset 0 2px 4px rgba(255,255,255,.3) !important;
}
html.aero-mode .swatch-picker{
  border:2.5px solid rgba(255,255,255,.85) !important;
  box-shadow:0 2px 5px rgba(0,30,60,.12),inset 0 2px 4px rgba(255,255,255,.3) !important;
}

/* ── Layers panel — glass container ── */
html.aero-mode .layersPanel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(240,248,255,.88)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  border-radius:10px !important;
  box-shadow:0 2px 8px rgba(0,40,90,.07),inset 0 1px 0 #fff !important;
  color:var(--a-text) !important;
}
html.aero-mode .layersPanel button{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(230,240,255,.8)) !important;
  border:1px solid rgba(140,180,225,.4) !important;
  color:var(--a-text2) !important;
  border-radius:6px !important;
  box-shadow:0 1px 2px rgba(0,30,60,.04),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html.aero-mode .layerItem{
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(245,250,255,.6)) !important;
  border:1px solid rgba(140,180,225,.35) !important;
  border-radius:8px !important;
  box-shadow:0 1px 3px rgba(0,30,60,.04),inset 0 1px 0 rgba(255,255,255,.8) !important;
}
html.aero-mode .layerItem.active,
html.aero-mode .layerItem.layerActive{
  background:linear-gradient(180deg,rgba(232,140,200,.15),rgba(220,120,190,.08)) !important;
  border-color:rgba(208,96,168,.35) !important;
  box-shadow:0 1px 4px rgba(208,96,168,.1),inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* ── Zoom pill — glass capsule ── */
html.aero-mode .zoomPill{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,245,255,.88)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  border-radius:18px !important;
  box-shadow:0 2px 6px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  color:var(--a-text2) !important;
}
html.aero-mode .zoomPill button{
  background:transparent !important;color:var(--a-text2) !important;
  border-radius:14px !important;
}
html.aero-mode .zoomPill button:hover{
  background:rgba(0,100,200,.06) !important;
}

/* ── Lock toggle — glass pill ── */
html.aero-mode #lockToggle{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,245,255,.85)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  box-shadow:0 2px 5px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
}

/* ── Post button — liquid pink ── */
html.aero-mode .post-btn,
html.aero-mode #postBtn{
  background:linear-gradient(180deg,
    rgba(240,140,200,.95) 0%,
    rgba(216,80,170,.92) 45%,
    rgba(185,55,145,.88) 100%) !important;
  color:#fff !important;
  border:1px solid rgba(150,40,110,.4) !important;
  border-radius:10px !important;
  box-shadow:0 2px 8px rgba(180,50,130,.2),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 2px rgba(100,20,70,.1) !important;
  text-shadow:0 -1px 1px rgba(80,20,60,.2) !important;
  position:relative;overflow:hidden;
}
html.aero-mode .post-btn::after,
html.aero-mode #postBtn::after{
  content:'';position:absolute;top:0;left:0;right:0;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);
  pointer-events:none;border-radius:10px 10px 0 0;
}

/* ── Animate toggle ── */
html.aero-mode #animToggleBtn{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(230,240,255,.85)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  color:var(--a-text2) !important;
  box-shadow:0 2px 5px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  position:relative;overflow:hidden;
}
html.aero-mode #animToggleBtn::after{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);
  pointer-events:none;
}
html.aero-mode #animToggleBtn.active{
  background:linear-gradient(180deg,rgba(240,140,200,.95),rgba(216,80,170,.9),rgba(185,55,145,.85)) !important;
  color:#fff !important;border-color:rgba(150,40,110,.4) !important;
}

/* ── Animation panel — glass ── */
html.aero-mode .animPanel{
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(240,248,255,.9)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  box-shadow:0 3px 12px rgba(0,40,90,.08),inset 0 1px 0 #fff !important;
  color:var(--a-text) !important;
}
html.aero-mode .anim-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(230,240,255,.8)) !important;
  border:1px solid rgba(140,180,225,.4) !important;
  color:var(--a-text2) !important;
  border-radius:6px !important;
  box-shadow:0 1px 2px rgba(0,30,60,.04),inset 0 1px 0 rgba(255,255,255,.9) !important;
  position:relative;overflow:hidden;
}
html.aero-mode .anim-btn::after{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);
  pointer-events:none;
}
html.aero-mode .anim-btn:hover{
  background:linear-gradient(180deg,#fff,rgba(220,235,255,.9)) !important;
}
html.aero-mode .anim-primary{
  background:linear-gradient(180deg,rgba(100,200,255,.95),rgba(40,150,230,.9),rgba(25,120,200,.85)) !important;
  color:#fff !important;border-color:rgba(0,80,150,.35) !important;
}
html.aero-mode .anim-danger{
  background:linear-gradient(180deg,#ff9090,#e05050,#c83838) !important;
  color:#fff !important;border-color:rgba(160,30,30,.3) !important;
}

/* ── Caption bar ── */
html.aero-mode .saveRow-caption-btns{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(240,248,255,.88)) !important;
  border:1px solid rgba(140,180,225,.4) !important;
  border-radius:8px !important;
  box-shadow:0 2px 6px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
}
html.aero-mode #captionInput{
  background:rgba(255,255,255,.75) !important;
  border:1px solid rgba(140,180,225,.35) !important;
  color:var(--a-text) !important;
  border-radius:6px !important;
  box-shadow:inset 0 1px 3px rgba(0,30,60,.04) !important;
}
html.aero-mode #captionInput:focus{
  border-color:rgba(64,152,224,.5) !important;
  box-shadow:inset 0 1px 3px rgba(0,30,60,.04),0 0 0 3px rgba(64,152,224,.1) !important;
}

/* ── Sliders — pink accent ── */
html.aero-mode input[type="range"]{accent-color:var(--a-pink) !important;}

/* ── Text toolbar ── */
html.aero-mode #textToolbar{
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(240,248,255,.9)) !important;
  border:1px solid rgba(140,180,225,.4) !important;
  border-radius:8px !important;
  box-shadow:0 2px 6px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  color:var(--a-text) !important;
}

/* ── Mention dropdown ── */
html.aero-mode .mention-dd{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(240,248,255,.92)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  box-shadow:0 4px 16px rgba(0,40,90,.1) !important;
}

/* ── CONTAINERS — make transparent/glass, not white ── */
/* Main stage area */
html.aero-mode .stage{
  background:transparent !important;
  border-color:rgba(140,180,225,.3) !important;
}
/* Left column (tools + layers) */
html.aero-mode .leftColumn{
  background:rgba(220,235,255,.35) !important;
  border-color:rgba(140,180,225,.3) !important;
}
/* Right column (palette + swatches) */
html.aero-mode .rightColumn,
html.aero-mode .paletteColumn{
  background:rgba(220,235,255,.35) !important;
  border-color:rgba(140,180,225,.3) !important;
}
/* Stage header (brush size / opacity sliders) */
/* stageHeader — keep transparent */
html.aero-mode .stageHeader label,
html.aero-mode .stageHeader span{
  color:var(--a-text2) !important;
}
/* Midbar (undo/redo/clear container) */
/* Midbar — don't add bg/border, it breaks sizing */
/* Toolbox (brush tool grid) */
html.aero-mode .toolbox{
  background:rgba(225,238,255,.4) !important;
  border:1px solid rgba(140,180,225,.3) !important;
  border-radius:8px !important;
}
/* Nav bar */
html.aero-mode .topNav,
html.aero-mode nav{
  background:rgba(235,245,255,.7) !important;
  border-color:rgba(140,180,225,.3) !important;
}
/* Save row (bottom bar with caption + post) */
html.aero-mode #saveRowGlobal{
  background:rgba(230,242,255,.5) !important;
  border-color:rgba(140,180,225,.3) !important;
}
html.aero-mode .saveRow-btns button{
  position:relative;overflow:hidden;
}
/* Save Canvas (PNG) button */
html.aero-mode .saveRow-btns button:not(#postBtn){
  background:linear-gradient(180deg,
    rgba(255,255,255,.95),rgba(230,240,255,.88),rgba(200,220,245,.82)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  border-radius:8px !important;
  box-shadow:0 2px 4px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  color:var(--a-text2) !important;
}

/* ── Lock Post + Allow Animations toggles ── */
html.aero-mode #lockControl{
  background:transparent !important;
}
html.aero-mode #lockToggle{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,245,255,.85)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  border-radius:20px !important;
  box-shadow:0 2px 5px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  color:var(--a-text2) !important;
}
html.aero-mode #lockPost:checked + #lockToggle{
  background:linear-gradient(180deg,rgba(90,175,240,.95),rgba(40,140,220,.9),rgba(25,115,195,.85)) !important;
  color:#fff !important;
  border-color:rgba(0,80,150,.4) !important;
  box-shadow:0 2px 5px rgba(0,70,140,.2),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
/* Allow Animations toggle — same treatment */
html.aero-mode #animLockToggle{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,245,255,.85)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  border-radius:20px !important;
  box-shadow:0 2px 5px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  color:var(--a-text2) !important;
}
html.aero-mode #animLockCheck:checked + #animLockToggle{
  background:linear-gradient(180deg,rgba(90,175,240,.95),rgba(40,140,220,.9),rgba(25,115,195,.85)) !important;
  color:#fff !important;
  border-color:rgba(0,80,150,.4) !important;
  box-shadow:0 2px 5px rgba(0,70,140,.2),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
/* Toggle switch knobs */
html.aero-mode #lockSwitch,
html.aero-mode #animLockSwitch{
  background:linear-gradient(180deg,#fff,#e8e8e8) !important;
  border:1px solid rgba(0,40,80,.12) !important;
  box-shadow:0 1px 3px rgba(0,30,60,.1) !important;
}

/* ── Badges (Beta 1.0 / Join Discord) ── */
html.aero-mode .badges{
  color:var(--a-text3) !important;
}
html.aero-mode .badges a,
html.aero-mode .badges span{
  background:rgba(230,242,255,.6) !important;
  border:1px solid rgba(140,180,225,.35) !important;
  border-radius:6px !important;
  color:var(--a-text2) !important;
}

/* ── Mobile dock ── */
html.aero-mode #mDock{
  background:rgba(235,245,255,.85) !important;
  border-color:rgba(140,180,225,.3) !important;
}

/* Challenges hero */
html.aero-mode .challenges-hero{
  background:linear-gradient(135deg,var(--a-pink) 0%,var(--a-magenta) 30%,var(--a-lavender) 65%,var(--a-sky) 100%) !important;
  border:1px solid rgba(255,255,255,.3) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 rgba(255,255,255,.35) !important;
  position:relative;overflow:hidden;
  color:#fff !important;
}
html.aero-mode .challenges-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:52%;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);
  pointer-events:none;
}
html.aero-mode .challenges-hero h1{
  font-family:var(--a-display) !important;color:#fff !important;
  text-shadow:0 2px 4px rgba(0,30,60,.2) !important;
  position:relative;z-index:1;
}
html.aero-mode .challenges-hero p{
  color:rgba(255,255,255,.8) !important;
  position:relative;z-index:1;
}

/* Sub tab bar */
html.aero-mode .sub-tab-bar{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  padding:4px !important;
}
html.aero-mode .sub-tab-bar .tab-btn{
  background:transparent !important;
  color:var(--a-text2) !important;border:none !important;
  border-radius:8px !important;font:600 13px var(--a-font) !important;
}
html.aero-mode .sub-tab-bar .tab-btn:hover{background:rgba(255,255,255,.5) !important;}
html.aero-mode .sub-tab-bar .tab-btn.active{
  background:var(--a-btn) !important;color:var(--a-text) !important;
  box-shadow:0 1px 3px rgba(0,40,80,.08),inset 0 1px 0 #fff !important;
  border:1px solid rgba(0,50,120,.1) !important;
}

/* Challenge cards */
html.aero-mode .challenge-card{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  overflow:hidden;transition:transform .2s,box-shadow .2s !important;
  position:relative;
}
html.aero-mode .challenge-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);
  pointer-events:none;z-index:1;
}
html.aero-mode .challenge-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;
}
html.aero-mode .challenge-title{
  color:var(--a-text) !important;font-weight:700 !important;
  font-family:var(--a-font) !important;
}
html.aero-mode .challenge-meta{color:var(--a-text3) !important;font-family:var(--a-font) !important;}
html.aero-mode .challenge-meta .creator{color:var(--a-link) !important;}
html.aero-mode .challenge-timer{color:var(--a-pink) !important;font-family:var(--a-font) !important;}
html.aero-mode .challenge-winner{color:var(--a-text2) !important;}
html.aero-mode .sub-count{color:var(--a-text3) !important;}

/* Create challenge button */
html.aero-mode .create-btn{
  background:linear-gradient(180deg,#e878c0,#d060a8,#b848a0) !important;
  color:#fff !important;border:1px solid rgba(160,40,120,.4) !important;
  border-radius:20px !important;font:700 13px var(--a-font) !important;
  box-shadow:0 2px 6px rgba(160,40,120,.2),inset 0 1px 0 rgba(255,255,255,.25) !important;
  text-shadow:0 -1px 1px rgba(100,20,80,.2) !important;
  position:relative;overflow:hidden;
}
html.aero-mode .create-btn::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transition:left .4s;
}
html.aero-mode .create-btn:hover::after{left:120%;}

/* Medal showcase */
html.aero-mode .medal-showcase{
  background:linear-gradient(180deg,rgba(255,248,220,.5),rgba(255,240,200,.3)) !important;
  border-bottom:1px solid var(--a-border) !important;
}

/* Challenge gate card */
html.aero-mode .report-card{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:14px !important;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;
  color:var(--a-text) !important;
}
html.aero-mode .report-badge{
  background:linear-gradient(135deg,var(--a-pink),var(--a-magenta)) !important;
  color:#fff !important;border-radius:14px !important;
}
html.aero-mode .report-title{color:var(--a-text) !important;font-family:var(--a-font) !important;}

/* ── Challenge Detail Page ───────────────── */
html.aero-mode .challenge-hero{
  background:linear-gradient(135deg,var(--a-blue) 0%,var(--a-sky) 35%,var(--a-lavender) 65%,var(--a-pink) 100%) !important;
  border-radius:0 0 var(--a-r) var(--a-r) !important;
  box-shadow:var(--a-shadow-lg) !important;
  position:relative;overflow:hidden;
}
html.aero-mode .challenge-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);
  pointer-events:none;
}
html.aero-mode .hero-title{
  font-family:var(--a-display) !important;color:#fff !important;
  text-shadow:0 2px 4px rgba(0,30,60,.2) !important;
  position:relative;z-index:1;
}
html.aero-mode .hero-creator{color:rgba(255,255,255,.75) !important;position:relative;z-index:1;}

/* Info bar */
html.aero-mode .info-bar-outer{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
}
html.aero-mode .info-bar{color:var(--a-text) !important;font-family:var(--a-font) !important;}
html.aero-mode .info-bar-label{color:var(--a-text3) !important;}
html.aero-mode .prompt-text{color:var(--a-text) !important;}
html.aero-mode .stat-num{color:var(--a-text) !important;font-weight:700 !important;}
html.aero-mode .stat-label{color:var(--a-text3) !important;}

/* Submit button */
html.aero-mode .submit-btn{
  background:linear-gradient(180deg,#e878c0,#d060a8,#b848a0) !important;
  color:#fff !important;border:1px solid rgba(160,40,120,.4) !important;
  border-radius:10px !important;
  box-shadow:0 2px 6px rgba(160,40,120,.18),inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* Submissions gallery */
html.aero-mode .subs-header{
  color:var(--a-text) !important;font-family:var(--a-font) !important;
}
html.aero-mode .sub-card{
  background:linear-gradient(180deg,#fff,#f4f6fc) !important;
  border:1px solid var(--a-border) !important;
  border-radius:10px !important;
  box-shadow:0 2px 6px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  overflow:hidden;
}
html.aero-mode .sub-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;
}

/* Challenge sidebar */
html.aero-mode .challenge-sidebar{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  color:var(--a-text) !important;
}

/* Challenges page centered */
html.aero-mode .challenges-wrap{
  max-width:1080px !important;margin:0 auto !important;
  position:relative;z-index:1;
}
html.aero-mode .content-wrap{
  position:relative;z-index:1;
}

/* ═══════════════════════════════════════════
   CHALLENGES LIST — DOM-restructured
   ═══════════════════════════════════════════ */

/* Nav on challenges pages */
html.aero-mode .challenges-hero ~ nav,
html.aero-mode .challenge-hero ~ nav{
  background:var(--a-glass) !important;
}

/* Challenges window body */
html.aero-mode #aeroChallengeBody{padding:0 !important;}
html.aero-mode #aeroChallengeBody .challenges-wrap{
  padding:20px !important;
}
html.aero-mode #aeroChallengeBody .sub-tab-bar{
  margin:-1px -1px 16px !important;
  border-radius:0 !important;
  border-left:none !important;border-right:none !important;border-top:none !important;
  background:linear-gradient(180deg,rgba(245,248,255,.6),rgba(235,242,255,.4)) !important;
}

/* Challenges grid — more spacing */
html.aero-mode .challenges-grid{
  gap:16px !important;
}

/* Challenge cards — richer glass */
html.aero-mode .challenge-card{
  background:linear-gradient(180deg,#fff,#f4f6fc) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:0 2px 8px rgba(0,40,90,.07),inset 0 1px 0 #fff !important;
  position:relative;overflow:hidden;
}
html.aero-mode .challenge-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:30%;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);
  pointer-events:none;
}

/* ═══════════════════════════════════════════
   CHALLENGE DETAIL — DOM-restructured
   ═══════════════════════════════════════════ */
.ab-challenge{
  display:none;
  background:linear-gradient(135deg,var(--a-pink) 0%,var(--a-magenta) 40%,var(--a-lavender) 70%,var(--a-sky) 100%);
  border:1px solid rgba(255,255,255,.3);
  padding:14px 24px;position:relative;overflow:hidden;
  box-shadow:0 3px 12px rgba(0,40,90,.1),inset 0 1px 0 rgba(255,255,255,.35);
}
html.aero-mode .ab-challenge{display:block;}

html.aero-mode #aeroDetailBody{padding:0 !important;}
html.aero-mode #aeroDetailBody .content-wrap{
  padding:20px !important;
}

/* Submission columns */
html.aero-mode .sub-col{gap:16px !important;}
html.aero-mode .sub-card{
  background:linear-gradient(180deg,#fff,#f6f8fc) !important;
  border:1px solid var(--a-border) !important;
  border-radius:10px !important;
  box-shadow:0 2px 6px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  overflow:hidden;
  position:relative;
}
html.aero-mode .sub-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:25%;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);
  pointer-events:none;z-index:1;
}
html.aero-mode .sub-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--a-shadow-lg),inset 0 1px 0 #fff !important;
}

/* Challenge sidebar — glass module */
html.aero-mode .challenge-sidebar{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  position:relative;overflow:hidden;
}
html.aero-mode .challenge-sidebar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);
  pointer-events:none;
}
html.aero-mode .challenge-sidebar h3{
  font-family:var(--a-font) !important;color:var(--a-text) !important;
}

/* Info bar — glass with shine */
html.aero-mode .info-bar-outer{
  background:var(--a-glass) !important;
  border:1px solid var(--a-border) !important;
  border-radius:var(--a-r) !important;
  box-shadow:var(--a-shadow),inset 0 1px 0 #fff !important;
  position:relative;overflow:hidden;
}
html.aero-mode .info-bar-outer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);
  pointer-events:none;
}

/* ═══════════════════════════════════════════
   DRAWING PAGE — targeted fixes
   ═══════════════════════════════════════════ */

/* Palette selector — keep visible, just restyle the container */
html.aero-mode #paletteSelector{
  background:rgba(225,238,255,.5) !important;
  border:1px solid rgba(140,180,225,.3) !important;
  border-radius:10px !important;
  padding:4px !important;
}

/* Layers panel — deeper overrides for actual layer items */
html.aero-mode .layersPanel{
  background:rgba(225,238,255,.5) !important;
  border:1px solid rgba(140,180,225,.3) !important;
  border-radius:10px !important;
  color:var(--a-text) !important;
}
html.aero-mode .layersPanel .layerItem,
html.aero-mode .layerItem{
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(240,248,255,.65)) !important;
  border:1px solid rgba(140,180,225,.35) !important;
  border-radius:8px !important;
  color:var(--a-text) !important;
}
html.aero-mode .layerItem.active,
html.aero-mode .layerItem.layerActive{
  background:linear-gradient(180deg,rgba(232,140,200,.18),rgba(220,120,190,.1)) !important;
  border-color:rgba(208,96,168,.4) !important;
}
html.aero-mode .layerItem .layerHeader{
  color:var(--a-text) !important;
}
html.aero-mode .layerItem .layerTitle{
  color:var(--a-text) !important;
}
html.aero-mode .layerItem .layerBtn,
html.aero-mode .layerItem .layerEye{
  color:var(--a-text2) !important;
}
html.aero-mode .layerItem .layerBtn.merge{
  background:rgba(225,238,255,.6) !important;
  border:1px solid rgba(140,180,225,.3) !important;
  color:var(--a-text2) !important;
}
html.aero-mode .layerItem .layerDragHandle{
  color:var(--a-text3) !important;
}
html.aero-mode .layerItem .layerDragHandle:hover{
  color:var(--a-pink) !important;
  background:rgba(208,96,168,.1) !important;
}

/* Draft recovery banner */
html.aero-mode #draftRecoveryBanner{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(240,248,255,.92)) !important;
  border:1px solid rgba(140,180,225,.5) !important;
  box-shadow:0 8px 32px rgba(0,40,90,.12),0 0 0 2px rgba(140,180,225,.3) !important;
  color:var(--a-text) !important;
}
html.aero-mode .draft-title{color:var(--a-text) !important;}
html.aero-mode .draft-sub{color:var(--a-text3) !important;}
html.aero-mode #draftRestoreBtn{
  background:linear-gradient(180deg,#e878c0,#d060a8,#b848a0) !important;
  color:#fff !important;border:1px solid rgba(150,40,110,.4) !important;
  border-radius:10px !important;
}
html.aero-mode #draftDismissBtn{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,245,255,.85)) !important;
  border:1px solid rgba(140,180,225,.4) !important;
  color:var(--a-text2) !important;border-radius:10px !important;
}

/* ═══════════════════════════════════════════
   DRAWING PAGE — slider + midbar fixes
   ═══════════════════════════════════════════ */

/* Slider fills — change the wavy pill colors to Aero blue→lavender */
html.aero-mode #sliderSize .sliderFill{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27280%27%20height%3D%2740%27%20viewBox%3D%270%200%20280%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M20.0%2C4.4%20C22.1%2C4.5%2026.2%2C4.6%2029.2%2C4.7%20C32.3%2C4.9%2035.4%2C5.4%2038.5%2C5.4%20C41.5%2C5.4%2044.6%2C4.9%2047.7%2C4.8%20C50.8%2C4.6%2053.8%2C4.7%2056.9%2C4.7%20C60.0%2C4.7%2063.1%2C4.8%2066.2%2C4.7%20C69.2%2C4.5%2072.3%2C4.0%2075.4%2C3.9%20C78.5%2C3.7%2081.5%2C4.0%2084.6%2C4.0%20C87.7%2C4.0%2090.8%2C3.9%2093.8%2C3.9%20C96.9%2C3.9%20100.0%2C4.1%20103.1%2C3.9%20C106.2%2C3.7%20109.2%2C2.9%20112.3%2C2.7%20C115.4%2C2.6%20118.5%2C2.9%20121.5%2C2.9%20C124.6%2C2.9%20127.7%2C2.5%20130.8%2C2.7%20C133.8%2C2.8%20136.9%2C3.6%20140.0%2C3.8%20C143.1%2C4.0%20146.2%2C3.9%20149.2%2C3.8%20C152.3%2C3.7%20155.4%2C3.0%20158.5%2C3.2%20C161.5%2C3.3%20164.6%2C4.5%20167.7%2C4.8%20C170.8%2C5.1%20173.8%2C5.0%20176.9%2C5.0%20C180.0%2C5.0%20183.1%2C4.8%20186.2%2C4.8%20C189.2%2C4.8%20192.3%2C5.0%20195.4%2C4.9%20C198.5%2C4.8%20201.5%2C4.5%20204.6%2C4.3%20C207.7%2C4.2%20210.8%2C4.0%20213.8%2C4.1%20C216.9%2C4.1%20220.0%2C4.7%20223.1%2C4.6%20C226.2%2C4.6%20229.2%2C3.9%20232.3%2C3.8%20C235.4%2C3.6%20238.5%2C3.7%20241.5%2C3.7%20C244.6%2C3.6%20247.7%2C3.6%20250.8%2C3.5%20C253.8%2C3.3%20257.9%2C2.7%20260.0%2C2.9%20C262.1%2C3.1%20262.4%2C4.1%20263.5%2C4.6%20C264.6%2C5.2%20265.6%2C5.6%20266.7%2C6.2%20C267.7%2C6.7%20268.9%2C7.0%20269.8%2C7.7%20C270.7%2C8.4%20271.4%2C9.4%20272.1%2C10.3%20C272.9%2C11.2%20273.8%2C12.0%20274.5%2C13.0%20C275.1%2C14.0%20275.5%2C15.2%20275.9%2C16.4%20C276.3%2C17.5%20276.8%2C18.8%20276.8%2C20.0%20C276.9%2C21.2%20276.6%2C22.5%20276.2%2C23.7%20C275.8%2C24.9%20275.1%2C25.9%20274.5%2C27.0%20C274.0%2C28.1%20273.7%2C29.4%20272.9%2C30.3%20C272.2%2C31.2%20271.1%2C31.9%20270.0%2C32.6%20C269.0%2C33.2%20267.9%2C33.7%20266.8%2C34.2%20C265.7%2C34.6%20264.6%2C34.9%20263.5%2C35.3%20C262.3%2C35.6%20262.1%2C36.3%20260.0%2C36.4%20C257.9%2C36.6%20253.8%2C36.2%20250.8%2C36.1%20C247.7%2C36.1%20244.6%2C36.1%20241.5%2C36.0%20C238.5%2C35.8%20235.4%2C35.4%20232.3%2C35.4%20C229.2%2C35.4%20226.2%2C36.1%20223.1%2C36.0%20C220.0%2C36.0%20216.9%2C35.4%20213.8%2C35.3%20C210.8%2C35.3%20207.7%2C35.8%20204.6%2C35.7%20C201.5%2C35.7%20198.5%2C35.0%20195.4%2C35.0%20C192.3%2C35.1%20189.2%2C35.7%20186.2%2C35.9%20C183.1%2C36.0%20180.0%2C36.0%20176.9%2C35.8%20C173.8%2C35.7%20170.8%2C35.0%20167.7%2C34.9%20C164.6%2C34.8%20161.5%2C35.1%20158.5%2C35.4%20C155.4%2C35.7%20152.3%2C36.5%20149.2%2C36.7%20C146.2%2C36.9%20143.1%2C36.3%20140.0%2C36.4%20C136.9%2C36.5%20133.8%2C37.2%20130.8%2C37.3%20C127.7%2C37.3%20124.6%2C36.8%20121.5%2C36.6%20C118.5%2C36.4%20115.4%2C36.2%20112.3%2C36.2%20C109.2%2C36.3%20106.2%2C36.8%20103.1%2C36.9%20C100.0%2C37.0%2096.9%2C37.1%2093.8%2C37.0%20C90.8%2C36.8%2087.7%2C36.3%2084.6%2C36.0%20C81.5%2C35.8%2078.5%2C35.6%2075.4%2C35.5%20C72.3%2C35.4%2069.2%2C35.4%2066.2%2C35.5%20C63.1%2C35.7%2060.0%2C36.1%2056.9%2C36.2%20C53.8%2C36.2%2050.8%2C35.9%2047.7%2C35.7%20C44.6%2C35.4%2041.5%2C34.8%2038.5%2C34.7%20C35.4%2C34.5%2032.3%2C34.8%2029.2%2C34.9%20C26.2%2C34.9%2022.1%2C34.8%2020.0%2C34.8%20C17.9%2C34.7%2017.8%2C34.7%2016.6%2C34.7%20C15.5%2C34.7%2014.0%2C35.1%2012.9%2C34.8%20C11.8%2C34.4%2011.0%2C33.3%2010.0%2C32.6%20C9.0%2C31.9%207.7%2C31.3%206.9%2C30.4%20C6.1%2C29.5%205.5%2C28.3%205.1%2C27.2%20C4.7%2C26.0%204.7%2C24.7%204.5%2C23.5%20C4.3%2C22.3%203.8%2C21.1%203.9%2C20.0%20C4.1%2C18.9%205.0%2C17.8%205.4%2C16.7%20C5.7%2C15.5%205.6%2C14.3%206.1%2C13.3%20C6.5%2C12.3%207.5%2C11.6%208.2%2C10.6%20C8.9%2C9.7%209.3%2C8.5%2010.1%2C7.6%20C10.9%2C6.8%2012.0%2C6.2%2013.1%2C5.6%20C14.1%2C5.0%2015.2%2C4.2%2016.4%2C4.0%20C17.5%2C3.8%2017.9%2C4.3%2020.0%2C4.4%20Z%27%20fill%3D%27none%27%20stroke%3D%27rgba(100%2C160%2C220%2C0.4)%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat,
    linear-gradient(90deg, #88c8f0 0, #88c8f0 calc(20px + (100% - 40px) * var(--f, 0.5) - 7px), #c0b8e0 calc(20px + (100% - 40px) * var(--f, 0.5) + 7px), #c0b8e0 100%) !important;
}
html.aero-mode #sliderOpacity .sliderFill{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27280%27%20height%3D%2740%27%20viewBox%3D%270%200%20280%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M20.0%2C4.4%20C22.1%2C4.5%2026.2%2C4.6%2029.2%2C4.7%20C32.3%2C4.9%2035.4%2C5.4%2038.5%2C5.4%20C41.5%2C5.4%2044.6%2C4.9%2047.7%2C4.8%20C50.8%2C4.6%2053.8%2C4.7%2056.9%2C4.7%20C60.0%2C4.7%2063.1%2C4.8%2066.2%2C4.7%20C69.2%2C4.5%2072.3%2C4.0%2075.4%2C3.9%20C78.5%2C3.7%2081.5%2C4.0%2084.6%2C4.0%20C87.7%2C4.0%2090.8%2C3.9%2093.8%2C3.9%20C96.9%2C3.9%20100.0%2C4.1%20103.1%2C3.9%20C106.2%2C3.7%20109.2%2C2.9%20112.3%2C2.7%20C115.4%2C2.6%20118.5%2C2.9%20121.5%2C2.9%20C124.6%2C2.9%20127.7%2C2.5%20130.8%2C2.7%20C133.8%2C2.8%20136.9%2C3.6%20140.0%2C3.8%20C143.1%2C4.0%20146.2%2C3.9%20149.2%2C3.8%20C152.3%2C3.7%20155.4%2C3.0%20158.5%2C3.2%20C161.5%2C3.3%20164.6%2C4.5%20167.7%2C4.8%20C170.8%2C5.1%20173.8%2C5.0%20176.9%2C5.0%20C180.0%2C5.0%20183.1%2C4.8%20186.2%2C4.8%20C189.2%2C4.8%20192.3%2C5.0%20195.4%2C4.9%20C198.5%2C4.8%20201.5%2C4.5%20204.6%2C4.3%20C207.7%2C4.2%20210.8%2C4.0%20213.8%2C4.1%20C216.9%2C4.1%20220.0%2C4.7%20223.1%2C4.6%20C226.2%2C4.6%20229.2%2C3.9%20232.3%2C3.8%20C235.4%2C3.6%20238.5%2C3.7%20241.5%2C3.7%20C244.6%2C3.6%20247.7%2C3.6%20250.8%2C3.5%20C253.8%2C3.3%20257.9%2C2.7%20260.0%2C2.9%20C262.1%2C3.1%20262.4%2C4.1%20263.5%2C4.6%20C264.6%2C5.2%20265.6%2C5.6%20266.7%2C6.2%20C267.7%2C6.7%20268.9%2C7.0%20269.8%2C7.7%20C270.7%2C8.4%20271.4%2C9.4%20272.1%2C10.3%20C272.9%2C11.2%20273.8%2C12.0%20274.5%2C13.0%20C275.1%2C14.0%20275.5%2C15.2%20275.9%2C16.4%20C276.3%2C17.5%20276.8%2C18.8%20276.8%2C20.0%20C276.9%2C21.2%20276.6%2C22.5%20276.2%2C23.7%20C275.8%2C24.9%20275.1%2C25.9%20274.5%2C27.0%20C274.0%2C28.1%20273.7%2C29.4%20272.9%2C30.3%20C272.2%2C31.2%20271.1%2C31.9%20270.0%2C32.6%20C269.0%2C33.2%20267.9%2C33.7%20266.8%2C34.2%20C265.7%2C34.6%20264.6%2C34.9%20263.5%2C35.3%20C262.3%2C35.6%20262.1%2C36.3%20260.0%2C36.4%20C257.9%2C36.6%20253.8%2C36.2%20250.8%2C36.1%20C247.7%2C36.1%20244.6%2C36.1%20241.5%2C36.0%20C238.5%2C35.8%20235.4%2C35.4%20232.3%2C35.4%20C229.2%2C35.4%20226.2%2C36.1%20223.1%2C36.0%20C220.0%2C36.0%20216.9%2C35.4%20213.8%2C35.3%20C210.8%2C35.3%20207.7%2C35.8%20204.6%2C35.7%20C201.5%2C35.7%20198.5%2C35.0%20195.4%2C35.0%20C192.3%2C35.1%20189.2%2C35.7%20186.2%2C35.9%20C183.1%2C36.0%20180.0%2C36.0%20176.9%2C35.8%20C173.8%2C35.7%20170.8%2C35.0%20167.7%2C34.9%20C164.6%2C34.8%20161.5%2C35.1%20158.5%2C35.4%20C155.4%2C35.7%20152.3%2C36.5%20149.2%2C36.7%20C146.2%2C36.9%20143.1%2C36.3%20140.0%2C36.4%20C136.9%2C36.5%20133.8%2C37.2%20130.8%2C37.3%20C127.7%2C37.3%20124.6%2C36.8%20121.5%2C36.6%20C118.5%2C36.4%20115.4%2C36.2%20112.3%2C36.2%20C109.2%2C36.3%20106.2%2C36.8%20103.1%2C36.9%20C100.0%2C37.0%2096.9%2C37.1%2093.8%2C37.0%20C90.8%2C36.8%2087.7%2C36.3%2084.6%2C36.0%20C81.5%2C35.8%2078.5%2C35.6%2075.4%2C35.5%20C72.3%2C35.4%2069.2%2C35.4%2066.2%2C35.5%20C63.1%2C35.7%2060.0%2C36.1%2056.9%2C36.2%20C53.8%2C36.2%2050.8%2C35.9%2047.7%2C35.7%20C44.6%2C35.4%2041.5%2C34.8%2038.5%2C34.7%20C35.4%2C34.5%2032.3%2C34.8%2029.2%2C34.9%20C26.2%2C34.9%2022.1%2C34.8%2020.0%2C34.8%20C17.9%2C34.7%2017.8%2C34.7%2016.6%2C34.7%20C15.5%2C34.7%2014.0%2C35.1%2012.9%2C34.8%20C11.8%2C34.4%2011.0%2C33.3%2010.0%2C32.6%20C9.0%2C31.9%207.7%2C31.3%206.9%2C30.4%20C6.1%2C29.5%205.5%2C28.3%205.1%2C27.2%20C4.7%2C26.0%204.7%2C24.7%204.5%2C23.5%20C4.3%2C22.3%203.8%2C21.1%203.9%2C20.0%20C4.1%2C18.9%205.0%2C17.8%205.4%2C16.7%20C5.7%2C15.5%205.6%2C14.3%206.1%2C13.3%20C6.5%2C12.3%207.5%2C11.6%208.2%2C10.6%20C8.9%2C9.7%209.3%2C8.5%2010.1%2C7.6%20C10.9%2C6.8%2012.0%2C6.2%2013.1%2C5.6%20C14.1%2C5.0%2015.2%2C4.2%2016.4%2C4.0%20C17.5%2C3.8%2017.9%2C4.3%2020.0%2C4.4%20Z%27%20fill%3D%27none%27%20stroke%3D%27rgba(100%2C160%2C220%2C0.4)%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat,
    linear-gradient(90deg, #c0b8e0 0, #c0b8e0 calc(20px + (100% - 40px) * var(--f, 0.5) - 7px), #88c8f0 calc(20px + (100% - 40px) * var(--f, 0.5) + 7px), #88c8f0 100%) !important;
}

/* Draft recovery banner */
html.aero-mode #draftRecoveryBanner{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(242,248,255,.93)) !important;
  border:1px solid rgba(140,180,225,.5) !important;
  box-shadow:0 8px 32px rgba(0,40,90,.12),0 0 0 2px rgba(140,180,225,.3) !important;
  color:var(--a-text) !important;
}
html.aero-mode .draft-title{color:var(--a-text) !important;}
html.aero-mode .draft-sub{color:var(--a-text3) !important;}
html.aero-mode #draftRestoreBtn{
  background:linear-gradient(180deg,#e878c0,#d060a8,#b848a0) !important;
  color:#fff !important;border:1px solid rgba(150,40,110,.4) !important;border-radius:10px !important;
}
html.aero-mode #draftDismissBtn{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,245,255,.85)) !important;
  border:1px solid rgba(140,180,225,.4) !important;color:var(--a-text2) !important;border-radius:10px !important;
}

/* ═══════════════════════════════════════════
   SETTINGS PAGE — Complete Aero Redesign
   ═══════════════════════════════════════════ */

/* Settings page container */
html.aero-mode .settings-page{
  max-width:720px !important;
  margin:0 auto !important;
  position:relative;z-index:1;
  padding:24px 20px 60px !important;
}

/* Settings heading */
html.aero-mode .settings-heading{
  font-family:var(--a-display) !important;
  color:#fff !important;
  text-shadow:0 2px 4px rgba(0,30,60,.2) !important;
  font-size:28px !important;
}
html.aero-mode .settings-subheading{
  color:rgba(255,255,255,.7) !important;
}

/* Settings cards — glass panels */
html.aero-mode .settings-card{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(242,248,255,.88)) !important;
  border:1px solid var(--a-border) !important;
  border-radius:14px !important;
  box-shadow:0 3px 14px rgba(0,40,90,.08),inset 0 1px 0 rgba(255,255,255,.95) !important;
  overflow:hidden;
  position:relative;
}
/* Top reflection */
html.aero-mode .settings-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
  pointer-events:none;border-radius:14px 14px 0 0;
}

/* Section titles — glass header bar */
html.aero-mode .card-section-title{
  background:linear-gradient(180deg,rgba(60,140,220,.1),rgba(40,120,200,.04)) !important;
  border-bottom:1px solid var(--a-border) !important;
  color:var(--a-text) !important;
  font:700 14px var(--a-font) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.7) !important;
  padding:12px 20px !important;
  position:relative;z-index:1;
}

/* Card rows */
html.aero-mode .card-row{
  border-color:rgba(0,50,120,.06) !important;
  color:var(--a-text) !important;
  position:relative;z-index:1;
}
html.aero-mode .card-row-label{
  color:var(--a-text) !important;
  font:600 14px var(--a-font) !important;
}
html.aero-mode .card-row-content{
  color:var(--a-text2) !important;
}
html.aero-mode .input-hint{
  color:var(--a-text3) !important;
  font-family:var(--a-font) !important;
}

/* Text inputs */
html.aero-mode .settings-card input[type="text"],
html.aero-mode .settings-card input[type="email"],
html.aero-mode .settings-card input[type="password"],
html.aero-mode .settings-card textarea{
  background:rgba(255,255,255,.7) !important;
  border:1px solid rgba(0,50,120,.12) !important;
  color:var(--a-text) !important;
  border-radius:8px !important;
  font-family:var(--a-font) !important;
  box-shadow:inset 0 1px 3px rgba(0,30,60,.04) !important;
}
html.aero-mode .settings-card input:focus,
html.aero-mode .settings-card textarea:focus{
  border-color:var(--a-sky) !important;
  box-shadow:inset 0 1px 3px rgba(0,30,60,.04),0 0 0 3px rgba(64,152,224,.1) !important;
}

/* Save / action buttons */
html.aero-mode .settings-card .save-btn,
html.aero-mode .settings-card button[type="submit"]{
  background:linear-gradient(180deg,#60c8ff 0%,#2898e8 50%,#1878c8 100%) !important;
  color:#fff !important;
  border:1px solid rgba(0,80,150,.4) !important;
  border-radius:8px !important;
  font:600 13px var(--a-font) !important;
  box-shadow:0 1px 4px rgba(0,60,120,.15),inset 0 1px 0 rgba(255,255,255,.3) !important;
  text-shadow:0 -1px 1px rgba(0,40,80,.2) !important;
  position:relative;overflow:hidden;
}
html.aero-mode .settings-card .save-btn::after,
html.aero-mode .settings-card button[type="submit"]::after{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);
  pointer-events:none;
}
html.aero-mode .settings-card .save-btn:hover{
  background:linear-gradient(180deg,#70d0ff 0%,#38a8f8 50%,#2088d8 100%) !important;
}

/* Generic buttons in settings */
html.aero-mode .settings-card button:not(.save-btn):not([type="submit"]):not(.dropdown-item):not(#aeroModeToggle){
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(230,240,255,.88),rgba(200,220,245,.82)) !important;
  border:1px solid rgba(140,180,225,.45) !important;
  border-radius:8px !important;
  color:var(--a-text2) !important;
  font-family:var(--a-font) !important;
  box-shadow:0 1px 3px rgba(0,30,60,.05),inset 0 1px 0 #fff !important;
}
html.aero-mode .settings-card button:not(.save-btn):hover{
  background:linear-gradient(180deg,#fff,rgba(220,235,255,.92),rgba(190,215,245,.88)) !important;
}

/* Avatar upload area */
html.aero-mode .avatar-upload,
html.aero-mode .avatar-preview{
  border:3px solid rgba(255,255,255,.7) !important;
  box-shadow:0 2px 8px rgba(0,40,90,.1) !important;
}

/* Dark mode toggle styling */
html.aero-mode #darkModeToggle{
  background:rgba(0,50,120,.04) !important;
  border-radius:8px !important;
  padding:6px 10px !important;
}

/* Aero toggle row styling */
html.aero-mode #aeroToggleRow .card-row-label{
  color:var(--a-pink) !important;
}

/* Danger zone */
html.aero-mode .danger-zone{
  background:linear-gradient(180deg,rgba(255,245,245,.92),rgba(255,240,240,.88)) !important;
  border:1px solid rgba(220,150,150,.35) !important;
}
html.aero-mode .danger-zone .card-section-title{
  background:linear-gradient(180deg,rgba(220,80,80,.08),rgba(200,60,60,.03)) !important;
  border-color:rgba(220,150,150,.2) !important;
  color:#b03030 !important;
}
html.aero-mode .danger-zone .card-row-label{
  color:#b03030 !important;
}
html.aero-mode .danger-zone button{
  background:linear-gradient(180deg,#ff7070,#e04040,#c83030) !important;
  color:#fff !important;
  border:1px solid rgba(160,30,30,.35) !important;
  text-shadow:0 -1px 1px rgba(100,10,10,.2) !important;
  box-shadow:0 1px 4px rgba(160,30,30,.15),inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* Password section */
html.aero-mode .password-row input{
  background:rgba(255,255,255,.7) !important;
  border:1px solid rgba(0,50,120,.12) !important;
  border-radius:8px !important;
}

/* Settings nav */
html.aero-mode .settings-page ~ nav,
html.aero-mode body > nav{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(240,248,255,.85)) !important;
  border:none !important;
  border-bottom:1px solid var(--a-border) !important;
  box-shadow:0 2px 8px rgba(0,40,90,.06),inset 0 1px 0 #fff !important;
  position:relative;
}
html.aero-mode body > nav::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--a-blue),var(--a-sky),var(--a-lavender),var(--a-pink),var(--a-blue));
  background-size:200% 100%;animation:navStripe 8s linear infinite;
  pointer-events:none;z-index:3;
}

/* Select dropdowns */
html.aero-mode .settings-card select{
  background:rgba(255,255,255,.7) !important;
  border:1px solid rgba(0,50,120,.12) !important;
  color:var(--a-text) !important;
  border-radius:8px !important;
  font-family:var(--a-font) !important;
}

/* Toast on settings page */
html.aero-mode .settings-toast{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(240,248,255,.92)) !important;
  border:1px solid var(--a-border) !important;
  border-radius:10px !important;
  box-shadow:0 4px 16px rgba(0,40,90,.1) !important;
  color:var(--a-text) !important;
}