:root{
  --main-top:2.25rem;
  --bg:#F4F1EA;
  --card:#FFFFFF;
  --text:#1C1A1E;
  --muted:#7A7772;
  --line:#E4E0D6;
  --accent:#F3B63A;
  --radius:20px;

  --folder-analyst:#F3B63A;
  --folder-analyst-text:#4A3300;
  --folder-engineer:#B9A6F0;
  --folder-engineer-text:#2E1F66;
  --folder-product:#8FD3E8;
  --folder-product-text:#0B3B47;
  --folder-qa:#F5A8A0;
  --folder-qa-text:#5C1A12;
}
[data-theme="dark"]{
  --bg:#141317;
  --card:#1F1D22;
  --text:#EDEBE6;
  --muted:#9A968E;
  --line:#2C2A30;
}

/* === BASE === */
html{
  font-size:100%;
  background:#0A0A0A;
  min-height:100%;
  overflow-x:hidden;
}
*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}
body{
  background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  transition:background 0.2s ease, color 0.2s ease;
  border-radius:20px 20px 0 0;
  min-height:100vh;
  margin:10px 10px 0;
  overflow-x:hidden;
  box-sizing:border-box;
}
h1,h2,h3{font-family:'Space Grotesk', sans-serif;}

/* === LAYOUT === */
.main{max-width:67.5rem; margin:0 auto; padding:var(--main-top) clamp(1.25rem, 4vw, 2.5rem) 3.75rem; width:100%; overflow:hidden;}

/* === TOP NAV === */
.topnav-wrap{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  min-height:4.75rem;
  margin-bottom:2rem;
}
.topnav-brand{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.0625rem;
  color:var(--text); letter-spacing:0.02em; flex-shrink:0; padding-top:0.6rem;
  position:relative; z-index:2;
}
.topnav{
  position:absolute;
  top:calc(-1 * var(--main-top));
  left:50%;
  transform:translateX(-50%);
  width:min(40rem, calc(100% - 13rem));
  background:#141317;
  border-radius:0 0 1.75rem 1.75rem;
  padding:0.75rem 1.9rem 0.65rem;
  display:flex;
  justify-content:center;
  z-index:1;
}
.topnav-links{
  display:flex; align-items:center; justify-content:center; gap:1.75rem; flex-wrap:wrap;
}
.topnav-links a{
  color:#B5B2AC; text-decoration:none; font-size:0.8125rem; font-weight:500;
  transition:color 0.15s ease;
}
.topnav-links a:hover{color:#EDEBE6;}

/* === NOTCH TICKER, one live dataset at a time === */
.nv-tick{display:flex; align-items:center; gap:0.85rem; width:100%; min-width:0;}
.nv-live{
  display:inline-flex; align-items:center; gap:0.4rem; flex:none;
  font-size:0.6875rem; font-weight:600; color:#B5B2AC; letter-spacing:0.02em;
}
.nv-livedot{
  width:6px; height:6px; border-radius:50%; background:#6FCF97;
  animation:nvPulse 2.1s ease-in-out infinite;
}
@keyframes nvPulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.35; transform:scale(0.78);}}
.nv-slot{flex:1; min-width:0; display:flex; align-items:center;}
.nv-empty{font-size:0.75rem; color:#8E8B85;}
.nv-item{
  display:flex; align-items:center; gap:0.7rem; width:100%; min-width:0;
  text-decoration:none; color:inherit; padding:0.2rem 0.3rem; border-radius:0.6rem;
  transition:background 0.15s ease;
}
.nv-item-in{animation:nvIn 0.42s cubic-bezier(.2,.8,.2,1) both;}
.nv-item:hover{background:rgba(255,255,255,0.07);}
@keyframes nvIn{from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;}}
.nv-rank{
  flex:none; min-width:1.9rem; text-align:center;
  font-size:0.75rem; font-weight:700; color:#EDEBE6;
  font-variant-numeric:tabular-nums; letter-spacing:0.01em;
}
.nv-rank-new{
  font-size:0.5625rem; font-weight:700; letter-spacing:0.08em;
  color:#8E8B85;
}
.nv-ico{
  flex:none; width:1.5rem; height:1.5rem; border-radius:0.42rem;
  background:rgba(255,255,255,0.09); color:#EDEBE6; display:grid; place-items:center;
}
.nv-txt{min-width:0; display:flex; flex-direction:column; gap:0.02rem; flex:1;}
.nv-title{
  font-size:0.8125rem; font-weight:600; color:#EDEBE6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:15rem;
}
.nv-sub{
  font-size:0.6875rem; color:#8E8B85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nv-stat{
  flex:none; font-size:0.75rem; font-weight:600; color:#B5B2AC;
  padding-left:0.85rem; border-left:1px solid rgba(255,255,255,0.13);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.nv-stat-low{color:#E8A87C;}
.nv-next{
  flex:none; background:none; border:none; color:#8E8B85; cursor:pointer;
  padding:0.32rem; display:grid; place-items:center; border-radius:0.4rem;
  transition:color 0.15s ease, background 0.15s ease;
}
.nv-next:hover{color:#EDEBE6; background:rgba(255,255,255,0.09);}

@media (prefers-reduced-motion: reduce){
  .nv-livedot, .nv-item-in{animation:none;}
}
.topnav-profile{flex-shrink:0; padding-top:0.3rem; position:relative; z-index:2;}

/* === TOP BAR === */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  margin-bottom:2.75rem; flex-wrap:wrap;
}
.brand-row{display:flex; align-items:center; gap:0.5rem; white-space:nowrap; font-size:0.9375rem;}
.brand-row .welcome{color:var(--muted);}
.brand-row .name{font-weight:600;}

/* === SEARCH === */
.searchbox{
  display:flex; align-items:center; gap:0.75rem; background:var(--card); border:2px solid #1C1A1E;
  border-radius:1.875rem; padding:0.875rem 1.375rem;
}
.searchbox input{border:none; background:none; outline:none; font-size:0.9375rem; color:var(--text); width:100%; font-family:inherit;}
.searchbox svg{flex-shrink:0;}

/* === PROFILE TRIGGER === */
.profile-trigger{
  display:flex; align-items:center; gap:0.5rem; cursor:pointer; padding:0.375rem 0.875rem 0.375rem 0.375rem;
  border-radius:1.875rem; background:var(--card); border:1px solid var(--line); flex-shrink:0;
}
.avatar{width:2.125rem; height:2.125rem; border-radius:50%; background:var(--folder-product); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:0.75rem; color:var(--folder-product-text); flex-shrink:0;}
.profile-trigger .name{font-size:0.875rem; font-weight:500;}

/* === HERO === */
.hero-block{margin-bottom:2.25rem;}
.hero-stack{display:grid; margin-bottom:0.875rem;}
.hero-stack > h1{grid-area:1 / 1; margin-bottom:0;}
.hero-ghost{visibility:hidden; pointer-events:none; user-select:none;}
.hero-block h1{
  font-size:clamp(1.75rem, 1.3rem + 2vw, 2.75rem); font-weight:600; line-height:1.2; margin-bottom:0.875rem;
  max-width:40rem; transition:font-size 0.2s ease;
  position:relative;
}
.hero-block h1.brand-size{
  font-size:clamp(3rem, 2rem + 6vw, 6.5rem); font-weight:700; letter-spacing:-0.01em;
  padding-bottom:clamp(0.75rem, 0.4rem + 1.75vw, 1.75rem);
}
.hero-block h1 .char{position:relative; display:inline;}
.hero-block h1 .char-o{position:relative; display:inline-block;}
.hero-block h1 .cursor{
  display:inline-block; width:2px; background:var(--text); margin-left:2px;
  animation:blink 0.9s step-end infinite; vertical-align:-0.1em; height:0.9em;
}
.hero-block p{font-size:0.9375rem; color:var(--muted); line-height:1.65; max-width:32.5rem;}

/* === HERO SCENE (meteors / stars / planet) === */
.hero-block{position:relative;}
.hero-scene{
  display:none;
  position:absolute; top:-2.5rem; right:-1rem; bottom:3rem;
  width:clamp(19rem, 30vw, 27rem);
  pointer-events:none;
  z-index:1;
}
.hero-scene img, .hero-scene .scene-dot{position:absolute; transform-origin:center;}
[data-theme="dark"] .hero-scene img{filter:invert(1);}

.scene-dot{width:0.3rem; height:0.3rem; border-radius:50%; background:var(--text);}

.scene-planet{width:32%; top:68%; left:74%; animation:sceneDrift 9s ease-in-out infinite;}
@keyframes sceneDrift{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

.scene-svg{position:absolute; overflow:visible; transform-origin:center;}
.scene-stroke{fill:none; stroke:var(--text); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.scene-fill{fill:var(--text);}
.scene-planet2{width:29%; top:2%; left:0%; animation:sceneDrift 8s ease-in-out infinite;}
.scene-moon{width:18%; top:10%; left:64%; animation:sceneDrift 6.5s ease-in-out infinite 1.1s;}

.scene-star{width:7%;}
.scene-pos-1{top:10%; left:15%;}
.scene-pos-2{top:7%; left:56%;}
.scene-pos-3{top:52%; left:27%;}
.scene-pos-4{top:40%; left:70%;}

.scene-dot-1{top:19%; left:42%;}
.scene-dot-2{top:33%; left:8%;}
.scene-dot-3{top:71%; left:47%;}
.scene-dot-4{top:24%; left:82%;}

.scene-star, .scene-dot{animation:sceneTwinkle 2.6s ease-in-out infinite;}
.scene-s2{animation-duration:3.2s; animation-delay:0.4s;}
.scene-s3{animation-duration:2.1s; animation-delay:0.9s;}
.scene-s4{animation-duration:3.6s; animation-delay:0.2s;}
@keyframes sceneTwinkle{
  0%,100%{opacity:0.35; transform:scale(0.75);}
  50%{opacity:1; transform:scale(1.1);}
}

.scene-burst{width:11%; opacity:0;}
.scene-burst-1{top:63%; left:18%; animation:sceneBurst 6s ease-out infinite;}
.scene-burst-2{top:55%; left:59%; animation:sceneBurst 7.5s ease-out infinite 3.6s;}
@keyframes sceneBurst{
  0%{transform:scale(0.3); opacity:0;}
  8%{opacity:0.85;}
  35%{transform:scale(1.3); opacity:0;}
  100%{opacity:0;}
}

.scene-meteor{width:5.5rem; top:0; left:0; animation:sceneFly1 6s linear infinite;}
.scene-meteor-2{width:4.2rem; animation:sceneFly2 7.5s linear infinite 2.2s;}
@keyframes sceneFly1{
  0%{transform:translate(420px,-70px); opacity:0;}
  8%{opacity:1;}
  85%{opacity:1;}
  100%{transform:translate(-160px,250px); opacity:0;}
}
@keyframes sceneFly2{
  0%{transform:translate(460px,10px) scale(0.7); opacity:0;}
  10%{opacity:0.85;}
  85%{opacity:0.85;}
  100%{transform:translate(-140px,210px) scale(0.7); opacity:0;}
}

@media (min-width:64rem){
  body:not([data-hero-theme="workspace"]) .hero-scene{display:block;}
}
@media (prefers-reduced-motion: reduce){
  .scene-meteor, .scene-star, .scene-dot, .scene-burst, .scene-planet, .scene-svg{animation:none !important; opacity:0.7;}
}

/* === HERO SCENE: WORKSPACE THEME === */
.hero-scene-workspace{
  display:none;
  position:absolute; top:-5rem; right:-1rem; bottom:-2rem;
  width:clamp(20rem, 34vw, 32rem);
  pointer-events:none; z-index:1;
}
.wt-scene-float{
  position:absolute; inset:0;
  animation:wtSceneBob 5s ease-in-out infinite;
}
.wt-scene-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:bottom center;
  opacity:0; transition:opacity 1.1s ease-in-out;
}
.wt-scene-img.active{opacity:0.92;}
[data-theme="dark"] .wt-scene-img{filter:invert(1);}
@keyframes wtSceneBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@media (min-width:64rem){
  body[data-hero-theme="workspace"] .hero-scene-workspace{display:block;}
}
@media (prefers-reduced-motion: reduce){
  .wt-scene-float{animation:none !important;}
  .wt-scene-img{transition:none !important;}
}

/* === HERO THEME SWATCHES (profile panel) === */
.hero-theme-grid{display:flex; gap:0.5rem; margin-top:0.75rem; margin-bottom:1.5rem;}
.panel-install-wrap{padding:0 0 8px; margin-top:1.5rem;}
.hero-theme-swatch{
  font-family:inherit; font-size:0.75rem; font-weight:600; cursor:pointer;
  padding:0.45rem 0.875rem; border-radius:1rem; border:1px solid var(--line);
  background:var(--bg); color:var(--text); transition:background 0.15s ease, color 0.15s ease;
}
.hero-theme-swatch.active{background:var(--text); color:var(--bg); border-color:var(--text);}

.hero-character-heading{display:none;}
.hero-character-grid{display:none;}
body[data-hero-theme="workspace"] .hero-character-heading{display:block; margin-top:1rem;}
body[data-hero-theme="workspace"] .hero-character-grid{display:flex;}

/* === FACE ANIMATION === */
.face-layer{position:absolute; inset:0; pointer-events:none;}
.eyebrow{
  position:absolute; background:var(--text); border-radius:6px; opacity:0;
  transition:opacity 0.5s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), width 0.6s ease, border-radius 0.8s ease;
}
.eyebrow.show{opacity:1;}
.eyebrow.expr-a.side-left{transform:rotate(-22deg);}
.eyebrow.expr-a.side-right{transform:rotate(22deg);}
.eyebrow.expr-b{transform:rotate(0deg); border-radius:4px;}
.pupil{
  position:absolute; background:var(--text); border-radius:50%; opacity:0;
  transition:opacity 0.5s ease 0.15s;
}
.pupil.show{opacity:1; animation:lookAround 2.8s ease-in-out 0.6s infinite;}
.mouth{
  position:absolute; opacity:0; color:var(--text); overflow:visible;
  transition:opacity 0.4s ease;
}
.mouth.show{opacity:1;}

@keyframes lookAround{
  0%{transform:translate(0, 0);}
  15%{transform:translate(25%, -10%);}
  30%{transform:translate(25%, -10%);}
  45%{transform:translate(-25%, 5%);}
  60%{transform:translate(-25%, 5%);}
  75%{transform:translate(10%, -15%);}
  90%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}
@keyframes blink{50%{opacity:0;}}

/* === SEARCH ROW === */
.search-row{margin-bottom:1.25rem; position:relative; z-index:5;}

/* === VIEW TOGGLE === */
.view-toggle{display:inline-flex; gap:0.5rem; margin-bottom:1.5rem;}
.view-btn{
  font-family:inherit; font-size:0.8125rem; font-weight:600; cursor:pointer;
  padding:0.5rem 1.125rem; border-radius:1.25rem; border:2px solid var(--text);
  background:var(--card); color:var(--text); transition:background 0.15s ease, color 0.15s ease;
}
.view-btn.active{background:var(--text); color:var(--bg);}

/* === SECTIONS === */
h2.section-title{font-size:1.5rem; margin-bottom:0.375rem;}
.page-sub{font-size:0.875rem; color:var(--muted); margin-bottom:1.5rem;}

/* === FOLDERS (whole card is a folder shape) === */
.folder-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr)); gap:2rem 1.5rem; margin-bottom:2.75rem; align-items:start;}
.folder{
  display:block; cursor:pointer; text-decoration:none; color:inherit;
  position:relative; padding-top:2.5rem;
  transition:transform 0.15s ease;
}
.folder:hover{transform:translateY(-3px);}
.folder-tab{
  position:absolute; top:0; left:0; height:2.5rem; min-width:9rem;
  border-radius:1rem 1rem 0 0;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 1.125rem;
}
.folder-count{font-size:0.75rem; font-weight:600; white-space:nowrap;}
.folder-body{
  border-radius:0 1.5rem 1.5rem 1.5rem;
  padding:1.75rem 1.5rem 1.5rem;
  min-height:13rem;
  display:flex; flex-direction:column;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}
.folder-title{font-family:'Space Grotesk', sans-serif; font-size:clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); font-weight:700; letter-spacing:0.01em; text-transform:uppercase; margin-bottom:0.5rem; display:block;}
.folder-desc{font-size:0.8125rem; line-height:1.55; opacity:0.85; margin-bottom:1rem; flex:1;}
.folder-link{font-size:0.8125rem; font-weight:600; text-decoration:underline; text-underline-offset:2px;}

.f-analyst .folder-tab{background:#D99A22; color:#4A3300;}
.f-analyst .folder-body{background:var(--folder-analyst); color:var(--folder-analyst-text);}
.f-engineer .folder-tab{background:#9985DB; color:#2E1F66;}
.f-engineer .folder-body{background:var(--folder-engineer); color:var(--folder-engineer-text);}
.f-product .folder-tab{background:#63B6CE; color:#0B3B47;}
.f-product .folder-body{background:var(--folder-product); color:var(--folder-product-text);}
.f-qa .folder-tab{background:#E08178; color:#5C1A12;}
.f-qa .folder-body{background:var(--folder-qa); color:var(--folder-qa-text);}

.f-python .folder-tab{background:#3D8FB0; color:#0E2733;}
.f-python .folder-body{background:#8AC6E0; color:#0E2733;}
.f-sql .folder-tab{background:#5566C9; color:#1B1F52;}
.f-sql .folder-body{background:#A7B3F2; color:#1B1F52;}
.f-excel .folder-tab{background:#3E9E52; color:#123016;}
.f-excel .folder-body{background:#8FD99B; color:#123016;}
.f-viz .folder-tab{background:#C97A3D; color:#4A260C;}
.f-viz .folder-body{background:#F2B48A; color:#4A260C;}

/* === LIST CARD === */
.list-card{background:var(--card); border-radius:var(--radius); border:1px solid var(--line); padding:1.5rem;}
.list-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.125rem; flex-wrap:wrap; gap:0.5rem;}
.list-head h3{font-size:1.0625rem;}
.list-head a{font-size:0.8125rem; color:var(--accent); text-decoration:none; font-weight:500;}
.list-cols{display:grid; grid-template-columns:2fr 1fr 0.6fr; font-size:0.6875rem; color:var(--muted); padding:0 0.25rem 0.625rem; border-bottom:1px solid var(--line);}
.list-row{display:grid; grid-template-columns:2fr 1fr 0.6fr; align-items:center; padding:0.875rem 0.25rem; border-bottom:1px solid var(--line); font-size:0.8125rem;}
.list-row:last-child{border-bottom:none;}
.list-row .ds-name{font-weight:500; margin-bottom:0.125rem;}
.list-row .ds-cat{font-size:0.75rem; color:var(--muted);}
.list-row .ds-price{color:var(--muted);}

/* === OVERLAY & PANEL === */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0); display:none;
  z-index:100; transition:background 0.3s ease;
}
.overlay.open{display:block; background:rgba(0,0,0,0.4);}
.panel{
  position:fixed; top:0; right:0; height:100%;
  width:min(21.25rem, 100vw);
  background:var(--card);
  padding:1.75rem 1.5rem;
  box-shadow:-4px 0 24px rgba(0,0,0,0.15);
  overflow-y:auto;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
  z-index:101;
}
.overlay.open .panel{transform:translateX(0);}
.panel-close{
  align-self:flex-end; cursor:pointer; color:var(--muted); font-size:24px; line-height:1;
  background:none; border:none; padding:0 4px; margin-bottom:8px;
}
.panel-close:hover{color:var(--text);}

.panel-profile{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:8px 0 28px;
}
.panel-avatar{
  width:72px; height:72px; border-radius:50%;
  background:var(--folder-product);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:24px; color:var(--folder-product-text);
  margin-bottom:6px;
}
.panel-display-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:18px; font-weight:700; color:var(--text);
}
.panel-handle{
  font-size:13px; color:var(--muted); margin-top:-2px;
}
.panel-edit-link{
  font-size:13px; font-weight:600; color:var(--text); text-decoration:none;
  margin-top:10px; padding:6px 14px; border:1px solid var(--line); border-radius:999px;
  transition:background 0.15s ease;
}
.panel-edit-link:hover{background:var(--bg);}

.panel-section{margin-top:22px;}
.panel-section-title{
  font-size:11px; font-weight:700; color:var(--muted); letter-spacing:0.08em;
  text-transform:uppercase; padding:0 4px 8px;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}

.panel-menu-row{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:12px 4px; border:none; background:none;
  color:var(--text); text-decoration:none; text-align:left; cursor:pointer;
  font-family:inherit; font-size:14px;
  border-bottom:1px solid var(--line);
  transition:background 0.15s ease;
}
.panel-menu-row:last-child{border-bottom:none;}
.panel-menu-row:hover{background:var(--bg);}
.panel-menu-info{flex:1; min-width:0;}
.panel-menu-label{
  font-size:11px; font-weight:600; color:var(--muted);
  letter-spacing:0.02em; margin-bottom:2px;
}
.panel-menu-value{
  font-size:14px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.panel-menu-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; color:var(--muted);
}
.panel-menu-text{flex:1; font-size:14px; font-weight:500;}
.panel-menu-arrow{color:var(--muted); font-size:20px; line-height:1;}

.panel-menu-danger .panel-menu-icon,
.panel-menu-danger .panel-menu-text{color:#C62828;}
.panel-menu-danger:hover{background:rgba(198,40,40,0.06);}

/* === INSTALL BUTTON (panel) === */
.panel-install-btn{
  display:none; width:100%; align-items:center; justify-content:center; gap:8px;
  background:var(--text); color:var(--bg); border:none; cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:500;
  padding:14px 20px; border-radius:12px; transition:opacity 0.15s ease;
}
.panel-install-btn:hover{opacity:0.8;}

/* === MOBILE === */
.avatar-only{
  cursor:pointer; border-radius:50%; display:none;
}
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  background:none; border:none; cursor:pointer; padding:0.25rem;
  flex-shrink:0;
}
.hamburger span{
  display:block; width:18px; height:2px; background:var(--text); border-radius:2px;
  transition:transform 0.25s ease, opacity 0.2s ease;
}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-menu{
  display:none; flex-direction:column; gap:0;
  background:#141317; border-radius:1.25rem;
  overflow:hidden; margin-top:0.5rem;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  color:#B5B2AC; text-decoration:none; font-size:0.9375rem; font-weight:500;
  padding:1rem 1.5rem; border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background 0.15s ease, color 0.15s ease;
}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu a:hover{background:rgba(255,255,255,0.05); color:#EDEBE6;}

/* === RESPONSIVE === */
@media (max-width:36rem){
  html{background:var(--bg);}
  body{
    margin:0;
    border-radius:0;
  }
  .main{padding:1rem 1.25rem 2.5rem; overflow:visible;}
  .hamburger{display:flex;}
  .avatar-only{display:block;}
  .topnav{display:none;}
  .topnav-brand{padding-top:0;}
  .topnav-wrap{min-height:auto; align-items:center;}
  .topnav-profile .profile-trigger{display:none;}
  .list-cols, .list-row{grid-template-columns:1.5fr 1fr 0.5fr; font-size:0.75rem;}
  .hero-block h1{max-width:100%; font-size:clamp(2.125rem, 1.4rem + 6vw, 2.75rem);}
  .hero-block h1.brand-size{font-size:clamp(4rem, 2rem + 16vw, 6.5rem);}
  .hero-block p{font-size:0.9375rem;}
  .folder-grid{display:flex; flex-direction:column; gap:1.25rem;}
  .list-card{padding:1rem;}
}


/* === PANEL: LIKE/DISLIKE + VERSION === */
.panel-feedback{
  margin-top:1.25rem; padding:0.9rem 1rem;
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  text-align:center;
}
.panel-feedback-q{font-size:12px; font-weight:600; color:var(--muted); margin-bottom:0.55rem;}
.panel-feedback-btns{display:flex; gap:0.5rem; justify-content:center;}
.panel-vote-btn{
  display:inline-flex; align-items:center; gap:0.35rem;
  font-family:inherit; font-size:0.75rem; font-weight:600; cursor:pointer;
  padding:0.4rem 0.85rem; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--text);
  transition:background 0.15s ease, border-color 0.15s ease;
}
.panel-vote-btn:hover{background:var(--bg);}
.panel-vote-btn.on{background:var(--text); color:var(--bg); border-color:var(--text);}
.panel-feedback-note{
  font-size:11px; color:var(--muted); margin-top:0.5rem; min-height:14px;
}
.panel-version{
  text-align:center; font-size:11px; color:var(--muted);
  margin-top:0.75rem; letter-spacing:0.02em;
}

/* === PASSWORD FIELD WITH REVEAL TOGGLE (injected by forms.js) === */
.pw-field{position:relative; display:block; width:100%;}
.pw-field > input{width:100%; padding-right:2.75rem;}
.pw-eye{
  position:absolute; right:0.5rem; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0;
  background:none; border:none; border-radius:7px; cursor:pointer;
  color:var(--muted); transition:color 0.15s ease, background 0.15s ease;
}
.pw-eye:hover{color:var(--text); background:rgba(28,26,30,0.05);}
[data-theme="dark"] .pw-eye:hover{background:rgba(237,235,230,0.08);}
.name-row .pw-field{flex:1; min-width:0;}