@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Noto+Kufi+Arabic:wght@400;600;700;800&family=Press+Start+2P&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050b07;color:#eef5ef;font-family:Cairo,Tahoma,Arial,sans-serif}.topbar{height:68px;position:fixed;inset:0 0 auto 0;background:#050805ee;backdrop-filter:blur(10px);border-bottom:1px solid #17341d;z-index:20;display:flex;align-items:center;padding:0 18px}.menu-btn{width:46px;height:42px;border:1px solid #285b31;border-radius:9px;background:#0d1910;color:#62ed70;font-size:23px;cursor:pointer}.brand{margin-right:auto;text-decoration:none;color:white;font-weight:900;letter-spacing:2px;font-size:21px}.brand b{color:#55e967}.side{position:fixed;z-index:15;top:68px;right:0;bottom:0;width:245px;background:#070d08;border-left:1px solid #18351f;padding:25px 14px;transition:.25s}.side-title{color:#667b6b;font-size:12px;letter-spacing:3px;margin:0 10px 15px}.nav{width:100%;padding:15px;border:0;border-right:4px solid transparent;border-radius:9px;background:transparent;color:#c6d0c8;text-align:right;cursor:pointer;font-size:15px;margin:4px 0}.nav span{margin-right:8px}.nav.home.active,.nav.home:hover{background:#351414;color:#ff6262;border-right-color:#ff3d3d}.nav.mods.active,.nav.mods:hover{background:#0b3116;color:#5cec6b;border-right-color:#3ed953}.nav.packs.active,.nav.packs:hover{background:#3a300e;color:#ffe260;border-right-color:#ffd42e}.nav.admin.active,.nav.admin:hover{background:#16221a;color:#a4ffad;border-right-color:#7bea86}main{margin-right:245px;padding:92px 28px 55px;max-width:1400px;margin-left:auto}.page{display:none;max-width:1120px;margin:auto}.page.active{display:block}.hero{min-height:450px;border:1px solid #1d4826;border-radius:22px;padding:70px 55px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 70% 15%,#16401f,#09130c 48%,#060a07);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;opacity:.12;background-image:linear-gradient(45deg,#4ee25d 25%,transparent 25%,transparent 75%,#4ee25d 75%);background-size:38px 38px}.hero>*{position:relative;z-index:1}.eyebrow{font-size:11px;letter-spacing:3px;color:#58e96a;font-weight:900;margin-bottom:10px}.purple{color:#c26aff}.yellow{color:#ffe05a}.green{color:#57e66b}.hero h1{font-size:clamp(36px,6vw,66px);margin:0 0 14px}.hero em{color:#55e667;font-style:normal}.hero p{color:#9aab9e;line-height:1.9;max-width:650px;font-size:17px}.primary{border:0;background:#43db58;color:#031006;font-weight:900;border-radius:8px;padding:13px 20px;cursor:pointer}.wide{width:100%;margin-top:10px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:15px}.stats div{background:#0a130d;border:1px solid #193720;border-radius:14px;padding:20px;text-align:center}.stats strong{display:block;color:#55e967;font-size:25px}.stats span{color:#839487;font-size:12px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.heading h2{font-size:34px;margin:0}.tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}.tab{border:1px solid #29412e;background:#0b150e;color:#c3cec6;border-radius:8px;padding:11px 17px;cursor:pointer}.tab.active.combat{background:#4c2163;color:#fff;border-color:#b35ce0}.tab.active.new{background:#75345a;color:#fff;border-color:#e86eaf}.tab.active.all{background:#165a25;color:#fff;border-color:#4bdb61}.search input,.auth input,.panel input,.panel select,.panel textarea{width:100%;background:#07100a;color:#edf4ee;border:1px solid #29452f;border-radius:8px;padding:12px;margin:5px 0}.search{margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{overflow:hidden;background:#0a130d;border:1px solid #1a3820;border-radius:14px}.thumb{height:155px;background:#102317;display:flex;align-items:center;justify-content:center;color:#54df67;font-size:42px}.thumb img{width:100%;height:100%;object-fit:cover}.body{padding:15px}.body h3{margin:9px 0}.body p{color:#91a095;font-size:13px;line-height:1.65;min-height:42px}.badge{font-size:10px;color:#dda0ff;background:#412255;padding:5px 8px;border-radius:5px}.download{display:block;background:#3dd853;color:#031006;text-decoration:none;text-align:center;font-weight:900;padding:10px;border-radius:7px;margin-top:12px}.empty{text-align:center;border:1px dashed #2b4831;border-radius:16px;padding:80px 20px;color:#85958a}.empty div{font-size:50px;color:#ffe05a}.auth,.panel{background:#0a130d;border:1px solid #1c3c23;border-radius:15px;padding:24px;margin-bottom:16px}.auth{max-width:470px;margin:60px auto}.auth h2{margin-top:0}.msg{min-height:18px;color:#ef7777;font-size:13px}.hidden{display:none!important}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.panel textarea{height:100px;resize:vertical}.upload{display:block;border:1px dashed #315938;padding:13px;border-radius:8px;color:#9aac9f;margin:7px 0}.upload input{border:0;padding:4px}.actions{display:flex;gap:8px;margin-top:8px}.secondary,.logout,.edit,.delete{border:1px solid #31583a;background:#101c13;color:#a9b9ad;padding:10px 15px;border-radius:8px;cursor:pointer}.logout{margin-right:auto}.adminrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid #18331e}.adminrow:last-child{border-bottom:0}.adminrow small{display:block;color:#849589}.rowactions{display:flex;gap:6px}.delete{color:#ff7777;border-color:#663434}.edit{color:#70ee7c}#toast{position:fixed;bottom:20px;left:20px;background:#16231a;border:1px solid #3d6943;padding:12px 17px;border-radius:9px;display:none;z-index:50}@media(max-width:800px){.side{transform:translateX(100%)}.side.open{transform:translateX(0)}main{margin-right:0;padding:84px 13px 35px}.hero{padding:42px 24px}.grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.heading h2{font-size:27px}}

.authgate{min-height:100vh;display:grid;place-items:center;background:#050b07}.authgate .auth{margin:0;width:min(470px,92vw)}
.profile-wrap{margin-right:12px;position:relative}.profile{width:40px;height:40px;border-radius:50%;border:1px solid #285b31;background:#0d1910;color:#62ed70;cursor:pointer}.profile-menu{position:absolute;top:48px;left:0;width:220px;background:#07100a;border:1px solid #29452f;border-radius:10px;padding:12px;box-shadow:0 15px 35px #0008}.profile-menu div{font-size:12px;color:#aab7ad;word-break:break-all;margin-bottom:8px}.profile-menu button{width:100%;padding:9px;border:1px solid #31583a;background:#101c13;color:#fff;border-radius:7px;cursor:pointer}
.topbar{justify-content:flex-start}.profile-wrap{margin-right:auto}.nav.versions.active,.nav.versions:hover{background:#102e17;color:#70ee7c;border-right-color:#4ee25d}
.rail-section{margin-top:26px}.rail-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}.rail-title h3{margin:0;font-size:19px}.rail-title small{color:#839487}.rail{display:flex;direction:rtl;gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}.rail .card{flex:0 0 250px;scroll-snap-align:start}.site-footer{text-align:center;margin-top:40px;padding-top:25px;border-top:1px solid #17341d;color:#839487}.qr-placeholder{width:110px;height:110px;margin:0 auto 8px;display:grid;place-items:center;background:repeating-conic-gradient(#050b07 0 25%,#fff 0 50%) 50%/16px 16px;border:7px solid white;color:#111;font-weight:900}

/* R-CY MOD typography */
body { font-family: "Cairo", Tahoma, Arial, sans-serif; }
.site-title { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.site-title .minecraft-title {
  font-family: "Press Start 2P", "Courier New", monospace;
  color:#55e667;
  letter-spacing:1px;
  text-shadow:2px 2px 0 #020602;
}
.site-title .kufi-title {
  font-family: "Noto Kufi Arabic", "Cairo", sans-serif;
  color:#f2f7f3;
  font-weight:700;
}
.hero .eyebrow { font-family:"Cairo",sans-serif; }
.rail-empty { min-width:250px; padding:35px 20px; }
.rail { direction:rtl; }
.profile-wrap { margin-right:0; margin-left:auto; }
.topbar .brand { position:absolute; left:50%; transform:translateX(-50%); margin:0; }
@media(max-width:800px){
  .topbar .brand { font-size:17px; }
  .site-title .minecraft-title { font-size:24px; }
  .site-title .kufi-title { font-size:25px; }
}

/* Final header layout: menu on the right, profile on the left */
.topbar {
  justify-content: flex-end;
  direction: ltr;
}
.topbar .menu-btn {
  order: 2;
  margin-left: 0;
  margin-right: 0;
}
.topbar .profile-wrap {
  position: absolute;
  left: 18px;
  margin: 0;
  order: 1;
}
.topbar .brand {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
  font-weight: 800;
  letter-spacing: 1px;
}


/* ===== Final visual fixes requested ===== */

/* Login page: use the same visual background as the Home hero. */
.authgate {
  /* V184: keep the login gate invisible until Supabase finishes restoring the session.
     This prevents the logged-in user from seeing the Sign In screen flash first. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
  background:
    radial-gradient(circle at 70% 15%, #16401f, #09130c 48%, #060a07);
  position: relative;
  overflow: hidden;
}
/* Only reveal the gate after the initial auth session check. */
.authgate.auth-ready {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.authgate::before {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .12;
  background-image: linear-gradient(
    45deg,
    #4ee25d 25%,
    transparent 25%,
    transparent 75%,
    #4ee25d 75%
  );
  background-size: 38px 38px;
  pointer-events: none;
}
.authgate .auth {
  position: relative;
  z-index: 1;
  background: rgba(10, 19, 13, .94);
}

/* All Mods filter labels explicitly use Cairo. */
.page-mods .tabs,
.page-mods .tab {
  font-family: "Cairo", Tahoma, Arial, sans-serif;
  font-weight: 600;
}

/* Menu item colors:
   Home = purple, Mods = red, Resource Packs = yellow,
   Minecraft Versions = green, Settings (admin only) = white.
*/
.nav.home.active,
.nav.home:hover {
  background: #35134d;
  color: #d88aff;
  border-right-color: #b95cff;
}
.nav.mods.active,
.nav.mods:hover {
  background: #4a1616;
  color: #ff7070;
  border-right-color: #ff4545;
}
.nav.packs.active,
.nav.packs:hover {
  background: #3a300e;
  color: #ffe260;
  border-right-color: #ffd42e;
}
.nav.versions.active,
.nav.versions:hover {
  background: #102e17;
  color: #70ee7c;
  border-right-color: #4ee25d;
}
.nav.admin.active,
.nav.admin:hover {
  background: #202020;
  color: #ffffff;
  border-right-color: #ffffff;
}

/* Keep the R-CY MOD brand in Cairo. */
.topbar .brand,
.topbar .brand span,
.topbar .brand b {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}


/* Avatar editor must sit above the site header/profile menu on mobile */
.avatar-editor { z-index: 99999 !important; }
.avatar-editor-dialog { position: relative; z-index: 100000 !important; }

/* Profile image editor — R-CY MOD theme */
.avatar-editor.hidden { display:none !important; }
.avatar-editor {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  font-family:"Cairo",Tahoma,Arial,sans-serif;
}
.avatar-editor-backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,.78);
  backdrop-filter:blur(5px);
}
.avatar-editor-dialog {
  position:relative; z-index:1; width:min(94vw,520px);
  max-height:94vh; overflow:auto; padding:24px;
  background:#071008; border:1px solid rgba(85,230,103,.35);
  border-radius:18px; box-shadow:0 20px 70px rgba(0,0,0,.6);
}
.avatar-editor-dialog h2 { margin:0 0 7px; font-family:"Cairo",sans-serif; }
.avatar-help { margin:0 0 16px; opacity:.78; line-height:1.7; }
.avatar-close {
  position:absolute; top:10px; right:12px; width:38px; height:38px;
  border:0; border-radius:50%; background:rgba(255,255,255,.06);
  color:inherit; font-size:25px; cursor:pointer;
}
.avatar-crop-wrap {
  position:relative; width:min(320px,78vw); aspect-ratio:1; margin:0 auto 18px;
  overflow:hidden; border-radius:14px; background:#020502;
  touch-action:none; user-select:none;
}
#avatarCanvas { width:100%; height:100%; display:block; touch-action:none; }
.avatar-crop-circle {
  position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 9999px rgba(0,0,0,.62), inset 0 0 0 2px #55e667;
  pointer-events:none;
}
.avatar-actions,.avatar-footer,.avatar-tools {
  display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
}
.avatar-tools { margin:14px 0; }
.avatar-tools button {
  min-width:42px; height:40px; border:1px solid rgba(85,230,103,.3);
  border-radius:10px; background:#0d1b10; color:inherit; font-size:19px; cursor:pointer;
}
.avatar-tools input { width:130px; accent-color:#55e667; }
.avatar-msg { min-height:24px; margin-top:10px; text-align:center; opacity:.85; }
.avatar-editor .primary,.avatar-editor .secondary {
  font-family:"Cairo",sans-serif; cursor:pointer;
}
.avatar-editor .secondary {
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
}
@media(max-width:520px){
  .avatar-editor-dialog { padding:18px; border-radius:14px; }
  .avatar-tools { gap:6px; }
  .avatar-tools button { min-width:38px; }
  .avatar-tools input { width:105px; }
}

.profile-avatar-img{
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
}
#profileBtn{
  padding:0;
  overflow:hidden;
  display:grid;
  place-items:center;
}
#changeAvatarBtn{width:100%;margin:8px 0;}

.profile-menu .profile-action,
.profile-menu #logoutBtn {
  width:100%;
  box-sizing:border-box;
  margin:7px 0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:inherit;
  font-family:"Cairo",Tahoma,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.profile-menu .profile-action:hover,
.profile-menu #logoutBtn:hover {
  background:rgba(85,230,103,.12);
  border-color:rgba(85,230,103,.4);
  transform:translateY(-1px);
}


/* ===== Requested UI update: Cairo + compact Home hero ===== */

/* Home brand/title: use Cairo instead of the pixel/Press Start font. */
.site-title .minecraft-title,
.site-title .kufi-title {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}
.site-title .minecraft-title {
  font-weight: 900;
  letter-spacing: 1px;
}
.site-title .kufi-title {
  font-weight: 800;
}

/* Make the Home hero shorter so the background does not occupy most of the screen. */
.page-home .hero {
  min-height: 330px;
  height: 330px;
  padding: 42px 45px;
}
.page-home .hero p {
  margin-bottom: 0;
}

/* Settings/admin form controls: force Cairo even on native browser controls/placeholders. */
.page-admin,
.page-admin input,
.page-admin select,
.page-admin textarea,
.page-admin button,
.page-admin label,
.page-admin option,
.page-admin .panel,
.page-admin .panel h3,
.page-admin .upload {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}
.page-admin input::placeholder,
.page-admin textarea::placeholder {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

/* Mods page: all visible UI text uses the same web font. */
.page-mods,
.page-mods h2,
.page-mods h3,
.page-mods p,
.page-mods button,
.page-mods input,
.page-mods input::placeholder,
.page-mods .eyebrow,
.page-mods .badge,
.page-mods .download {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}
.page-mods h2 {
  font-weight: 800;
}
.page-mods .body h3 {
  font-weight: 800;
}

@media (max-width: 800px) {
  .page-home .hero {
    min-height: 300px;
    height: 300px;
    padding: 32px 24px;
    border-radius: 18px;
  }
  .page-home .hero h1 {
    font-size: clamp(30px, 8vw, 42px);
    margin-bottom: 10px;
  }
  .page-home .hero p {
    font-size: 15px;
    line-height: 1.8;
  }
}


/* ===== GLOBAL CAIRO FONT =====
   Every visible text element on the site uses Cairo.
   This intentionally overrides the decorative fonts used previously.
*/
html, body, body * {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

input,
textarea,
select,
button,
option,
input::placeholder,
textarea::placeholder {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

/* Brand and Home hero titles also use Cairo (no Minecraft/Press Start font). */
.site-title .minecraft-title,
.site-title .kufi-title,
.brand,
.hero h1,
.hero p,
.hero .eyebrow {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

/* Mods filters and all labels/buttons/search text. */
.page-mods,
.page-mods * {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

/* Settings/admin panels and form controls. */
.page-admin,
.page-admin *,
.panel,
.panel *,
.auth,
.auth * {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

/* Admin content type selector */
.admin-help{color:#91a095;margin-top:-8px;line-height:1.8}
.content-type-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0 18px}
.content-type-btn{border:1px solid #29452f;background:#07100a;color:#c3cec6;border-radius:9px;padding:13px 10px;cursor:pointer;font-family:"Cairo",sans-serif;font-weight:700}
.content-type-btn.active{background:#123b1a;color:#65ed73;border-color:#4ee25d;box-shadow:0 0 0 1px #1d6a2a inset}
.content-form{display:none}
.content-form.active{display:block}
@media(max-width:800px){.content-type-picker{grid-template-columns:1fr}.content-type-btn{padding:12px}}


/* ===== Home hero + real QR final fix ===== */
/* Make the Home hero noticeably shorter on top and bottom. */
.page-home .hero {
  min-height: 330px;
  height: 330px;
  padding: 38px 42px;
}
.page-home .hero .site-title {
  margin-top: 4px;
  margin-bottom: 8px;
}
.page-home .hero p {
  margin-top: 4px;
  margin-bottom: 0;
}

/* Real, scannable QR code for https://mod.pages.dev */
.site-qr {
  display: inline-flex;
  width: 128px;
  height: 128px;
  padding: 7px;
  margin: 0 auto 8px;
  background: #fff;
  border-radius: 6px;
  border: 2px solid #fff;
  align-items: center;
  justify-content: center;
}
.site-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.site-footer small {
  display: block;
}

@media (max-width:800px) {
  .page-home .hero {
    min-height: 260px;
    height: 260px;
    padding: 28px 20px;
  }
  .page-home .hero .eyebrow {
    margin-bottom: 7px;
  }
  .page-home .hero h1 {
    margin-bottom: 8px;
    line-height: 1.35;
  }
  .page-home .hero p {
    font-size: 14px;
    line-height: 1.7;
  }
  .site-qr {
    width: 126px;
    height: 126px;
  }
}


/* ===== FINAL HOME HERO SIZE FIX =====
   Much smaller background area; text sizes are intentionally unchanged. */
.page-home .hero {
  box-sizing: border-box !important;
  height: 315px !important;
  min-height: 315px !important;
  padding: 20px 42px !important;
  overflow: hidden !important;
}

@media (max-width: 800px) {
  .page-home .hero {
    box-sizing: border-box !important;
    height: 220px !important;
    min-height: 220px !important;
    padding: 14px 20px !important;
  }

  .page-home .hero h1 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }

  .page-home .hero p {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }
}

/* ===== Content image fix =====
   Show the complete uploaded image instead of cropping its sides/top.
   Square mod artwork now stays square inside the card. */
.thumb {
  height:auto !important;
  aspect-ratio:1 / 1;
  background:#07100a;
  overflow:hidden;
}
.thumb img {
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center;
  display:block;
  background:#07100a;
}

/* ===== Bookmarks + Downloads ===== */
.nav.bookmarks.active,.nav.bookmarks:hover {
  background:#35134d;
  color:#d88aff;
  border-right-color:#b95cff;
}
.nav.downloads.active,.nav.downloads:hover {
  background:#102e17;
  color:#70ee7c;
  border-right-color:#4ee25d;
}
.card-actions {
  display:flex;
  gap:8px;
  align-items:stretch;
  margin-top:12px;
}
.card-actions .download {
  flex:1;
  margin-top:0;
}
.bookmark-btn {
  flex:0 0 46px;
  min-width:46px;
  border:1px solid #31583a;
  border-radius:7px;
  background:#101c13;
  color:#a9b9ad;
  cursor:pointer;
  font-size:20px;
  transition:.15s ease;
}
.bookmark-btn:hover,.bookmark-btn.active {
  background:#35134d;
  color:#d88aff;
  border-color:#b95cff;
}
.downloads-list {
  display:grid;
  gap:12px;
}
.download-item {
  background:#0a130d;
  border:1px solid #1a3820;
  border-radius:14px;
  padding:14px;
}
.download-item-head {
  display:flex;
  align-items:center;
  gap:12px;
}
.download-item-icon {
  flex:0 0 58px;
  width:58px;
  height:58px;
  border-radius:10px;
  overflow:hidden;
  background:#07100a;
  display:grid;
  place-items:center;
  font-size:24px;
}
.download-item-icon img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.download-item-info {
  min-width:0;
  flex:1;
}
.download-item-info b {
  display:block;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.download-item-info small {
  display:block;
  color:#87988c;
  margin-top:4px;
  font-size:11px;
}
.download-progress {
  height:9px;
  margin-top:12px;
  border-radius:999px;
  background:#132218;
  overflow:hidden;
  border:1px solid #1d3c24;
}
.download-progress-bar {
  height:100%;
  width:0;
  border-radius:999px;
  background:#43db58;
  transition:width .18s ease;
}
.download-progress-bar.error {
  background:#ff5d5d;
}
.download-status {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  color:#8fa094;
  font-size:11px;
}
.export-btn {
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #3d6943;
  border-radius:9px;
  background:#0d1b10;
  color:#62ed70;
  text-decoration:none;
  font-size:22px;
  font-weight:900;
}
.export-btn:hover {
  background:#123b1a;
  border-color:#55e967;
}
@media(max-width:800px){
  .thumb { aspect-ratio:1 / 1; }
  .download-item { padding:12px; }
}


/* ===== Bookmarks / Downloads final visual pass =====
   Bookmarks use the outlined bookmark-plus icon style requested.
   Bookmarks are dark green; Downloads are blue. */
.nav-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 22px;
  vertical-align: middle;
}

.nav.bookmarks,
.nav.bookmarks.active,
.nav.bookmarks:hover {
  background: #0d2415;
  color: #4fcb68;
  border-right-color: #2f7f43;
}

.nav.downloads,
.nav.downloads.active,
.nav.downloads:hover {
  background: #0b1e35;
  color: #4ea9ff;
  border-right-color: #2877c7;
}

.bookmark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4fcb68;
  background: #0d2415;
  border-color: #2f7f43;
}

.bookmark-btn:hover,
.bookmark-btn.active {
  background: #12341d;
  color: #63df7c;
  border-color: #3f9b55;
}

.bookmark-svg {
  width: 23px;
  height: 23px;
  display: block;
}

.downloads-list .download-progress {
  background: #0b1b2c;
}

.downloads-list .download-progress-bar {
  background: #2f8cff;
}

.downloads-list .download-progress-bar.error {
  background: #ff5555;
}

.downloads-list .export-btn {
  color: #4ea9ff;
  border-color: #2877c7;
  background: #0b1e35;
}

.downloads-list .export-btn:hover {
  color: #8ac6ff;
  border-color: #4ea9ff;
  background: #102b49;
}


/* ===== Final interaction behavior: Bookmarks / Downloads =====
   These entries stay neutral until the user opens the corresponding page,
   matching the behavior of the other navigation items. */
.nav.bookmarks,
.nav.downloads {
  background: transparent;
  color: inherit;
  border-right-color: transparent;
}

.nav.bookmarks:hover,
.nav.downloads:hover {
  background: transparent;
  color: inherit;
  border-right-color: transparent;
}

.nav.bookmarks.active {
  background: #0d2415;
  color: #4fcb68;
  border-right-color: #2f7f43;
}

.nav.downloads.active {
  background: #0b1e35;
  color: #4ea9ff;
  border-right-color: #2877c7;
}

/* New bookmark/download page header and empty-state visuals */
.page-title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.page-title-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.bookmark-title-icon,
.bookmark-eyebrow {
  color: #4fcb68;
}

.download-title-icon,
.downloads-eyebrow {
  color: #4ea9ff;
}

.bookmark-empty {
  border-color: #214b2d;
  background: #07100a;
}

.bookmark-empty-icon {
  color: #4fcb68;
}

.bookmark-svg-large {
  width: 72px;
  height: 72px;
  display: block;
}

.downloads-list .download-item {
  border-color: #1c4c79;
  background: #07101c;
}

.downloads-list .download-item:hover {
  border-color: #2877c7;
  background: #091a2d;
}


/* ===== v17 requested visual cleanup ===== */

/* Sidebar brand matches the Home R-CY MOD brand treatment and size. */
.side-title {
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:4px;
  margin:0 10px 22px;
  font-family:"Cairo",Tahoma,Arial,sans-serif !important;
  font-size:20px;
  font-weight:900;
  letter-spacing:1px;
  color:#f2f7f3;
}
.side-title span { color:#f2f7f3; }
.side-title b { color:#55e667; font-weight:900; }

/* Minecraft Versions gets a cleaner outlined block/cube icon. */
.nav.versions .version-icon {
  width:22px;
  height:22px;
  display:inline-block;
  vertical-align:middle;
  flex:0 0 22px;
}
.nav.versions.active,.nav.versions:hover {
  background:#102e17;
  color:#70ee7c;
  border-right-color:#4ee25d;
}

/* Every content page now uses the colored section label as its only title. */
.page-heading-modern {
  margin-bottom:24px;
  justify-content:flex-start;
}
.page-section-title {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  margin:0;
  font-size:34px !important;
  line-height:1.2;
  letter-spacing:4px;
  font-weight:900 !important;
}
.title-with-icon .page-title-icon {
  width:34px;
  height:34px;
  flex:0 0 34px;
}
.page-heading-modern h2 { display:none !important; }

/* Preserve the requested green/blue identity for the two new pages. */
.bookmark-eyebrow { color:#4fcb68 !important; }
.downloads-eyebrow { color:#4ea9ff !important; }

/* Show the entire content artwork without cropping it. */
.thumb {
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:#07100a !important;
}
.thumb img {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  background:#07100a !important;
}

/* Bookmarks empty state is centered instead of leaning to one side. */
.bookmark-empty {
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-height:430px;
  box-sizing:border-box;
}
.bookmark-empty .empty-icon {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.bookmark-empty h3,
.bookmark-empty p {
  width:100%;
  text-align:center !important;
}
.bookmark-svg-large {
  margin:0 auto 12px;
}

/* Downloads empty state keeps the same centered visual balance. */
#downloadsGrid > .empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:430px;
  box-sizing:border-box;
}
#downloadsGrid > .empty h3,
#downloadsGrid > .empty p { text-align:center; }

@media(max-width:800px){
  .side-title {
    font-size:20px;
    margin-bottom:20px;
  }
  .page-section-title {
    font-size:30px !important;
    letter-spacing:3px;
  }
  .title-with-icon .page-title-icon {
    width:30px;
    height:30px;
    flex-basis:30px;
  }
  .thumb {
    aspect-ratio:16 / 9 !important;
  }
}

/* ===== v18 final navigation + page icon cleanup ===== */

/* Sidebar brand: correct RTL reversal and match the R-CY MOD brand treatment. */
.side-title {
  direction:ltr;
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:4px;
  margin:0 10px 22px;
  font-family:"Cairo",Tahoma,Arial,sans-serif !important;
  font-size:24px !important;
  line-height:1.2;
  font-weight:900 !important;
  letter-spacing:1px;
  color:#fff;
}
.side-title span { color:#fff !important; }
.side-title b { color:#55e667 !important; font-weight:900; }

/* Every sidebar icon is now a clean outline icon and inherits the item's color. */
.nav {
  display:flex;
  flex-direction:row;
  direction:rtl;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-height:52px;
  color:#c6d0c8;
}
.nav .nav-icon {
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:block;
  color:currentColor;
}
.nav span { margin-right:0 !important; }

/* Do not show decorative colors until the corresponding item is active. */
.nav.home,
.nav.mods,
.nav.packs,
.nav.versions,
.nav.admin {
  background:transparent;
  color:#c6d0c8;
  border-right-color:transparent;
}
.nav.home:hover,
.nav.mods:hover,
.nav.packs:hover,
.nav.versions:hover,
.nav.admin:hover {
  background:transparent;
  color:#c6d0c8;
  border-right-color:transparent;
}

/* Active navigation colors only. */
.nav.home.active {
  background:#35134d;
  color:#d88aff;
  border-right-color:#b95cff;
}
.nav.mods.active {
  background:#4a1616;
  color:#ff7070;
  border-right-color:#ff4545;
}
.nav.packs.active {
  background:#3a300e;
  color:#ffe260;
  border-right-color:#ffd42e;
}
.nav.versions.active {
  background:#102e17;
  color:#70ee7c;
  border-right-color:#4ee25d;
}
.nav.admin.active {
  background:#202020;
  color:#fff;
  border-right-color:#fff;
}

/* Bookmarks and Downloads stay neutral until opened, then use their page color. */
.nav.bookmarks,
.nav.downloads {
  display:flex;
  background:transparent;
  color:#c6d0c8;
  border-right-color:transparent;
}
.nav.bookmarks:hover,
.nav.downloads:hover {
  background:transparent;
  color:#c6d0c8;
  border-right-color:transparent;
}
.nav.bookmarks.active {
  background:#0d2415;
  color:#4fcb68;
  border-right-color:#2f7f43;
}
.nav.downloads.active {
  background:#0b1e35;
  color:#4ea9ff;
  border-right-color:#2877c7;
}

/* Page labels stay large; their duplicate white title is intentionally absent. */
.page-section-title {
  font-size:34px !important;
  line-height:1.15;
  letter-spacing:4px;
  font-weight:900 !important;
}
.page-heading-modern h2 { display:none !important; }

/* The page headers for Bookmarks/Downloads use text only; icons live in the empty state. */
#page-bookmarks .title-with-icon,
#page-downloads .title-with-icon {
  gap:0;
}
#page-bookmarks .page-title-icon,
#page-downloads .page-title-icon {
  display:none !important;
}

/* Modern centered empty-state icons, colored by the page. */
.bookmark-empty .bookmark-svg-large,
.download-empty .download-svg-large {
  width:82px;
  height:82px;
  display:block;
  margin:0 auto 14px;
}
.bookmark-empty-icon { color:#4fcb68 !important; }
.download-empty-icon { color:#4ea9ff !important; }
.download-empty {
  border-color:#1c4c79;
  background:#07101c;
}
.download-empty .empty-icon {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.download-empty h3,
.download-empty p {
  width:100%;
  text-align:center !important;
}

/* Make all navigation SVG strokes inherit the active item color. */
.nav svg path,
.nav svg polyline,
.nav svg line,
.nav svg circle {
  stroke:currentColor;
}
@media(max-width:800px){
  .side-title {
    font-size:20px !important;
    margin-bottom:20px;
  }
  .nav { min-height:52px; }
  .nav .nav-icon { width:24px; height:24px; flex-basis:24px; }
  .page-section-title { font-size:30px !important; letter-spacing:3px; }
}

/* ===== v19 requested navigation + Settings polish ===== */

/* Home = red, Mods = magenta; colors appear only when selected/hovered. */
.nav.home.active,
.nav.home:hover {
  background:#3a1216 !important;
  color:#ff4d5d !important;
  border-right-color:#ff394b !important;
}
.nav.mods.active,
.nav.mods:hover {
  background:#3b123e !important;
  color:#ff4bd8 !important;
  border-right-color:#ff39cf !important;
}

/* Keep the remaining navigation neutral until selected. */
.nav.packs.active,
.nav.packs:hover {
  background:#3a300e !important;
  color:#ffe260 !important;
  border-right-color:#ffd42e !important;
}
.nav.versions.active,
.nav.versions:hover {
  background:#102e17 !important;
  color:#70ee7c !important;
  border-right-color:#4ee25d !important;
}

/* Settings in the drawer: neutral/white text with a softer gray modern gear.
   The gear remains in the drawer; the page heading itself has no gear. */
.nav.admin,
.nav.admin:hover {
  background:transparent !important;
  color:#d6ddd8 !important;
  border-right-color:transparent !important;
}
.nav.admin.active {
  background:#171b19 !important;
  color:#f4f7f5 !important;
  border-right-color:#9aa49e !important;
}
.nav.admin.active .settings-icon {
  color:#9aa49e !important;
}
.nav.admin .settings-icon {
  width:25px !important;
  height:25px !important;
}

/* Settings page heading: Settings only, no ADMIN PANEL and no gear. */
.settings-page-heading {
  justify-content:flex-start !important;
  margin-bottom:24px !important;
}
.settings-page-heading h2 {
  margin:0 !important;
  color:#f2f5f3 !important;
  font-size:34px !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
}
@media(max-width:800px){
  .settings-page-heading h2 { font-size:30px !important; }
}

/* Modern English content-type selector with the same outline icon language
   used by the navigation bar. */
.content-type-picker {
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:10px !important;
}
.content-type-btn {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:52px !important;
  color:#c9d1cc !important;
  background:#07100a !important;
  border:1px solid #29452f !important;
  border-radius:10px !important;
  font-family:"Cairo",Tahoma,Arial,sans-serif !important;
  font-weight:800 !important;
  font-size:15px !important;
}
.content-type-btn .content-type-icon {
  width:23px !important;
  height:23px !important;
  flex:0 0 23px !important;
  color:currentColor !important;
}
.content-type-btn.active {
  background:#123b1a !important;
  color:#65ed73 !important;
  border-color:#4ee25d !important;
  box-shadow:0 0 0 1px #1d6a2a inset !important;
}
.content-type-btn:hover {
  border-color:#3f6947 !important;
  color:#e8eee9 !important;
}
.content-type-btn.active:hover {
  color:#65ed73 !important;
}
@media(max-width:800px){
  .content-type-picker { grid-template-columns:1fr !important; }
}

/* Make the precise home outline and modern settings gear read cleanly. */
.nav.home .home-icon,
.nav.admin .settings-icon {
  stroke-linecap:round;
}

/* ===== FINAL POLISH v20 ===== */

/* Uploaded artwork: keep its real aspect ratio; never crop or force a fake frame. */
.thumb{
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  display:block !important;
  overflow:hidden !important;
  background:#07100a !important;
  line-height:0 !important;
}
.thumb img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:initial !important;
  object-position:center !important;
  background:transparent !important;
}

/* Modern search field with a clean SVG magnifier instead of an emoji. */
.search{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
}
.search .search-icon-modern{
  position:absolute !important;
  right:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:23px !important;
  height:23px !important;
  color:#8e9b92 !important;
  pointer-events:none !important;
}
.search input{
  width:100% !important;
  padding-right:52px !important;
  box-sizing:border-box !important;
}

/* No category emoji/icon on filter buttons. */
.page-mods .tab{font-size:15px !important;}
.page-mods .tab::first-letter{font-size:inherit !important;}

/* Navigation: clean, fully visible puzzle icon. */
.nav.mods .mods-icon{
  width:25px !important;
  height:25px !important;
  overflow:visible !important;
}
.nav.mods .mods-icon path{
  stroke-width:1.55 !important;
  stroke-linejoin:round !important;
  stroke-linecap:round !important;
}
/* Same modern puzzle shape inside Settings content-type selector. */
.content-type-btn .mod-type-icon{
  width:24px !important;
  height:24px !important;
  overflow:visible !important;
}
.content-type-btn .mod-type-icon path{
  stroke-width:1.55 !important;
  stroke-linejoin:round !important;
  stroke-linecap:round !important;
}

/* Content type names inherit the same identity as their navigation items. */
.form-section-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  font-size:22px;
  font-weight:900;
  letter-spacing:.4px;
}
.mod-form-label{color:#d65cff !important;}
.resource-form-label{color:#e5c15a !important;}
.version-form-label{color:#5ee66c !important;}

.content-type-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}
.content-type-btn[data-content-type="mod"]{color:#d8c7de;}
.content-type-btn[data-content-type="resource"]{color:#d7d1bb;}
.content-type-btn[data-content-type="version"]{color:#c6d8c9;}
.content-type-btn[data-content-type="mod"].active{
  color:#d65cff !important;
  background:#35103f !important;
  border-color:#d65cff !important;
}
.content-type-btn[data-content-type="resource"].active{
  color:#e5c15a !important;
  background:#342a0c !important;
  border-color:#e5c15a !important;
}
.content-type-btn[data-content-type="version"].active{
  color:#5ee66c !important;
  background:#123b1a !important;
  border-color:#5ee66c !important;
}

/* Card type badges: compact, same as the original small labels.
   .body is a column flex container, so explicitly prevent stretch. */
.badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  align-self:flex-start !important;
  width:max-content !important;
  max-width:100% !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}
.page-mods .badge{
  color:#d88aff !important;
  background:#35134d !important;
}
.resource-badge{
  color:#e5c15a !important;
  background:#352b12 !important;
}
.version-badge{
  color:#65ed73 !important;
  background:#123b1a !important;
}

/* Settings list headings use the same section colors. */
.mods-panel-title{color:#d65cff !important;}
.resource-panel-title{color:#e5c15a !important;}
.version-panel-title{color:#5ee66c !important;}

/* Keep settings title simple: no extra gear in the page title. */
.settings-page-heading h2{color:#f0f3f1 !important;}

/* Avoid icon clipping in narrow/mobile controls. */
.content-type-picker,
.content-type-btn,
.form-section-label,
.nav{
  overflow:visible !important;
}


/* ===== v22: unified responsive image frames =====
   All content images use the same 16:9 frame so square, portrait and
   landscape uploads line up cleanly on every card. */
.thumb{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:16 / 9 !important;
  display:block !important;
  overflow:hidden !important;
  background:#07100a !important;
  line-height:0 !important;
}
.thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#07100a !important;
}
.card .body{
  min-height:0 !important;
}
.card .body p{
  min-height:0 !important;
}
.mod-badge{
  color:#d65cff !important;
  background:#35134d !important;
}

/* No category/filter strip on the Mods page. */
.page-mods .tabs{
  display:none !important;
}

@media(max-width:800px){
  .thumb{
    aspect-ratio:16 / 9 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .grid{
    gap:13px !important;
  }
  .card{
    border-radius:13px !important;
  }
  .body{
    padding:13px !important;
  }
}

/* R-CYMOD v24 — section colors + modern icons */
.rail-section.mods .rail-title h3,
.rail-section.mods .rail-title h3 .section-icon { color:#39e75f !important; }
.rail-section.resource-packs .rail-title h3,
.rail-section.resource-packs .rail-title h3 .section-icon { color:#b56cff !important; }
.rail-section.minecraft-versions .rail-title h3,
.rail-section.minecraft-versions .rail-title h3 .section-icon { color:#4aa8ff !important; }
.rail-section.most-downloaded .rail-title h3,
.rail-section.most-downloaded .rail-title h3 .modern-flame { color:#ff3b3b !important; }
.section-icon,.modern-flame { display:inline-flex; align-items:center; justify-content:center; line-height:1; font-weight:900; }
.modern-flame { font-size:1.05em; transform:translateY(1px); filter:drop-shadow(0 0 4px rgba(255,59,59,.45)); }

/* v25 — Home rail identity icons match the navigation icons */
.rail-section.mods .rail-title h3 { color:#ff35d1 !important; }
.rail-section.resource-packs .rail-title h3 { color:#ffd21f !important; }
.rail-section.minecraft-versions .rail-title h3 { color:#39e75f !important; }
.rail-section.most-downloaded .rail-title h3 { color:#ff3b3b !important; }

.rail-title h3 .section-icon{
  width:26px !important;
  height:26px !important;
  vertical-align:-5px;
  margin-inline-end:6px;
  overflow:visible !important;
  flex:0 0 auto;
}
.rail-title h3 .section-icon path{
  stroke:currentColor;
}
.rail-section.mods .rail-title h3 .section-icon { color:#ff35d1 !important; }
.rail-section.resource-packs .rail-title h3 .section-icon { color:#ffd21f !important; }
.rail-section.minecraft-versions .rail-title h3 .section-icon { color:#39e75f !important; }
.rail-section.most-downloaded .rail-title h3 .modern-flame { color:#ff3b3b !important; }

.rail-section.most-downloaded .rail-title h3 .modern-flame{
  width:27px !important;
  height:27px !important;
  filter:drop-shadow(0 0 4px rgba(255,59,59,.35));
}


/* Download progress: works even when the file server does not expose CORS/content-length. */
.download-progress { position:relative; overflow:hidden; }
.download-progress-bar.indeterminate {
  width:38% !important;
  animation: downloadIndeterminate 1.15s ease-in-out infinite;
  transform-origin:left center;
}
@keyframes downloadIndeterminate {
  0% { transform:translateX(-125%); }
  50% { transform:translateX(95%); }
  100% { transform:translateX(265%); }
}
.download-browser-status { color: #d7d7d7; }


/* Download-to-menu animation */
.download-flyer {
  position: fixed;
  z-index: 99999;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  object-fit: cover;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 0 2px rgba(62,226,88,.45);
  will-change: left, top, width, height, opacity, transform;
  transition:
    left .72s cubic-bezier(.2,.85,.25,1),
    top .72s cubic-bezier(.2,.85,.25,1),
    width .72s cubic-bezier(.2,.85,.25,1),
    height .72s cubic-bezier(.2,.85,.25,1),
    border-radius .72s ease,
    opacity .25s ease,
    transform .72s cubic-bezier(.2,.85,.25,1);
}
.download-flyer.is-flying {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transform: rotate(360deg) scale(.82);
}
.download-flyer.is-arrived {
  opacity: 0;
  transform: rotate(540deg) scale(.15);
}
@keyframes menuDownloadPulse {
  0%,100% { transform: scale(1); }
  45% { transform: scale(1.13); }
}
.menu-download-pulse {
  animation: menuDownloadPulse .45s ease;
}

/* v28: compact download/bookmark flying icons + download X control */
.download-flyer{
  position:fixed;z-index:99999;object-fit:cover;border-radius:9px;
  pointer-events:none;box-shadow:0 8px 28px rgba(0,0,0,.48);
  opacity:1;transform:scale(1);transition:
    left .68s cubic-bezier(.2,.82,.2,1),
    top .68s cubic-bezier(.2,.82,.2,1),
    width .48s ease,height .48s ease,
    border-radius .48s ease,opacity .2s ease,transform .48s ease;
}
.download-flyer.is-flying{
  transform:scale(.72);border-radius:50%;
}
.download-flyer.is-arrived{
  opacity:0;transform:scale(.45);
}
.menu-download-pulse .download-icon{
  animation:navItemPop .55s ease;
}
@keyframes navItemPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.28)}
  100%{transform:scale(1)}
}
.download-item{position:relative}
.download-cancel{
  position:absolute;top:10px;right:10px;width:28px;height:28px;
  border:1px solid rgba(255,82,82,.65);border-radius:50%;
  background:#2a0d12;color:#ff6262;font-size:20px;line-height:24px;
  cursor:pointer;z-index:3;padding:0;
}
.download-cancel:hover{background:#4b1118;color:#fff}
.download-item-head{padding-right:42px}


/* v29: download animation only. Bookmark animation was replaced by the save burst above. */
.download-flyer {
  position: fixed;
  z-index: 99999;
  object-fit: cover;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.12);
  opacity: 1;
  transform: translateZ(0) scale(1);
  will-change: left, top, width, height, border-radius, opacity, transform;
  transition: left 1.32s cubic-bezier(.16,1,.3,1), top 1.32s cubic-bezier(.16,1,.3,1),
              width 1.32s cubic-bezier(.16,1,.3,1), height 1.32s cubic-bezier(.16,1,.3,1),
              border-radius 1.05s cubic-bezier(.16,1,.3,1), opacity .28s ease,
              transform 1.32s cubic-bezier(.16,1,.3,1);
}
.download-flyer.is-flying {
  border-radius: 50%;
  transform: translateZ(0) scale(.82);
}
.download-flyer.is-arrived {
  opacity: 0;
  transform: translateZ(0) scale(.58);
}
.menu-download-pulse .download-icon {
  animation: navItemPopV29 .6s cubic-bezier(.22,1,.36,1);
}
@keyframes navItemPopV29 {
  0% { transform: scale(1); }
  55% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* v30: clean Downloads + modern X */
.downloads-list .download-progress,
.downloads-list .progress,
.downloads-list .progress-bar,
.downloads-list .download-status,
.downloads-list .download-size,
.downloads-list [class*="progress"],
.downloads-list [class*="status"] {
  display:none !important;
}
.downloads-list .download-card {
  position:relative;
  overflow:hidden;
}
.downloads-list .download-remove,
.downloads-list .download-x,
.downloads-list button[data-action="remove-download"] {
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  font-size:20px !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:transform .22s ease, background .22s ease, border-color .22s ease !important;
}
.downloads-list .download-remove:hover,
.downloads-list .download-x:hover,
.downloads-list button[data-action="remove-download"]:hover {
  transform:scale(1.06);
  background:rgba(255,70,90,.12) !important;
  border-color:rgba(255,70,90,.55) !important;
}
.downloads-list .download-remove:active,
.downloads-list .download-x:active,
.downloads-list button[data-action="remove-download"]:active {
  transform:scale(.94);
}
.downloads-list .download-remove::before,
.downloads-list .download-x::before,
.downloads-list button[data-action="remove-download"]::before {
  content:"×";
  font-weight:700;
}


/* ===== Downloads final clean mode =====
   Downloads are a simple saved list. No flying image, pulse, fake progress,
   loading bar, or oversized preview. */
.download-flyer,
.download-flyer.is-flying,
.download-flyer.is-arrived {
  display: none !important;
}
.menu-download-pulse {
  animation: none !important;
}

.downloads-list .download-progress,
.downloads-list .download-progress-bar,
.downloads-list .download-status,
.downloads-list [class*="progress"],
.downloads-list [class*="status"] {
  display: none !important;
}

.downloads-list .download-item {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  padding: 14px 52px 14px 14px;
}

.downloads-list .download-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.downloads-list .download-item-icon {
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

.downloads-list .download-item-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

.downloads-list .download-item-info {
  min-width: 0;
  flex: 1;
}

.downloads-list .download-item-info b {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.downloads-list .download-item-info small {
  display: block;
  margin-top: 4px;
  color: #87988c;
  font-size: 11px;
}

.downloads-list .download-cancel {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.05) !important;
  color: #ff7078 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 21px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.downloads-list .download-cancel:hover {
  background: rgba(255,70,90,.12) !important;
  border-color: rgba(255,70,90,.45) !important;
}


/* v32: compact Downloads thumbnails — Downloads only */
.downloads-list .download-item-icon,
.downloads-list .download-item-icon img {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
}
.downloads-list .download-item-icon img {
  object-fit: cover !important;
  display: block !important;
}


/* v32.1: Downloads card layout polish */
.downloads-list .download-item {
  min-height: 118px !important;
  padding: 16px 108px 16px 68px !important;
  border-radius: 22px !important;
}

.downloads-list .download-item-head {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 84px !important;
}

.downloads-list .download-item-icon {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  border-radius: 16px !important;
}

.downloads-list .download-item-icon img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

.downloads-list .download-item-info {
  width: 100% !important;
  min-width: 0 !important;
  padding: 4px 0 !important;
  padding-right: 0 !important;
  text-align: right !important;
}

.downloads-list .download-item-info b {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  padding-right: 0 !important;
}

.downloads-list .download-item-info small {
  display: block !important;
  margin-top: 7px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.downloads-list .download-cancel {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.045) !important;
  color: #ff7078 !important;
  z-index: 5 !important;
}

/* Keep enough room for the right-side thumbnail while allowing long names to wrap. */
@media (max-width: 520px) {
  .downloads-list .download-item {
    min-height: 122px !important;
    padding: 16px 96px 16px 60px !important;
  }

  .downloads-list .download-item-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }

  .downloads-list .download-item-info b {
    font-size: 16px !important;
  }
}


/* v33: Downloads card layout — image right, info beside it, remove button left */
.downloads-list .download-item {
  position: relative !important;
  box-sizing: border-box !important;
  min-height: 148px !important;
  height: 148px !important;
  padding: 20px 124px 20px 64px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

.downloads-list .download-item-head {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
}

.downloads-list .download-item-icon {
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  border-radius: 18px !important;
  z-index: 2 !important;
}

.downloads-list .download-item-icon img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 18px !important;
}

.downloads-list .download-item-info {
  position: absolute !important;
  top: 50% !important;
  right: 124px !important;
  left: 62px !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  z-index: 1 !important;
}

.downloads-list .download-item-info b {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.downloads-list .download-item-info small {
  display: block !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #87988c !important;
}

.downloads-list .download-cancel {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.045) !important;
  color: #ff7078 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 5 !important;
}

.downloads-list .download-cancel:hover {
  background: rgba(255,70,90,.12) !important;
  border-color: rgba(255,70,90,.5) !important;
}

@media (max-width: 520px) {
  .downloads-list .download-item {
    min-height: 150px !important;
    height: 150px !important;
    padding: 20px 116px 20px 62px !important;
    border-radius: 23px !important;
  }

  .downloads-list .download-item-icon {
    right: 16px !important;
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    border-radius: 17px !important;
  }

  .downloads-list .download-item-icon img {
    border-radius: 17px !important;
  }

  .downloads-list .download-item-info {
    right: 116px !important;
    left: 58px !important;
  }

  .downloads-list .download-item-info b {
    font-size: 18px !important;
  }

  .downloads-list .download-item-info small {
    font-size: 12px !important;
  }

  .downloads-list .download-cancel {
    top: 13px !important;
    left: 13px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
  }
}


/* =========================================================
   R-CY MOD — FINAL DOWNLOADS CARD FIX
   ========================================================= */
.downloads-list {
  width: 100% !important;
  display: grid !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}
.downloads-list .download-item {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 166px !important;
  height: 166px !important;
  padding: 14px 164px 14px 70px !important;
  margin: 0 !important;
  background: #08110b !important;
  border: 1px solid #24558a !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}
.downloads-list .download-item-head {
  position: static !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  display: block !important;
}
.downloads-list .download-item-icon {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  left: auto !important;
  transform: none !important;
  width: 138px !important;
  height: auto !important;
  min-width: 138px !important;
  max-width: 138px !important;
  min-height: 138px !important;
  max-height: 138px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 19px !important;
  overflow: hidden !important;
  background: #07100a !important;
  display: grid !important;
  place-items: center !important;
  z-index: 2 !important;
}
.downloads-list .download-item-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 19px !important;
}
.downloads-list .download-item-info {
  position: absolute !important;
  top: 50% !important;
  right: 164px !important;
  left: 70px !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: right !important;
  z-index: 1 !important;
}
.downloads-list .download-item-info b {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f2f7f3 !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.downloads-list .download-item-info small.download-type {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 8px 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  white-space: normal !important;
}
.downloads-list .download-type.type-mod { color: #ff35c9 !important; }
.downloads-list .download-type.type-resource { color: #ffe260 !important; }
.downloads-list .download-type.type-version { color: #4ee25d !important; }

/* X: green outline + white X, upper-left */
.downloads-list .download-cancel {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid #315d3b !important;
  border-radius: 14px !important;
  background: #0d1710 !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  font-size: 27px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
  z-index: 5 !important;
  cursor: pointer !important;
}
.downloads-list .download-cancel:hover {
  background: #122018 !important;
  border-color: #4ee25d !important;
  color: #ffffff !important;
}

/* Make the Home/category download button fill the whole available row. */
.card-actions {
  width: 100% !important;
  box-sizing: border-box !important;
}
.card-actions .download {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Mobile */
@media (max-width: 520px) {
  .downloads-list .download-item {
    min-height: 158px !important;
    height: 158px !important;
    padding: 14px 126px 14px 66px !important;
    border-radius: 23px !important;
  }
  .downloads-list .download-item-icon {
    top: 14px !important;
    right: 14px !important;
    width: 130px !important;
    height: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    border-radius: 18px !important;
  }
  .downloads-list .download-item-icon img { border-radius: 18px !important; }
  .downloads-list .download-item-info {
    right: 126px !important;
    left: 66px !important;
  }
  .downloads-list .download-item-info b {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
  .downloads-list .download-item-info small.download-type {
    margin-top: 7px !important;
    font-size: 12px !important;
  }
  .downloads-list .download-cancel {
    top: 13px !important;
    left: 13px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 13px !important;
    font-size: 25px !important;
  }
}


/* ============================================================
   R-CY MOD — FINAL DOWNLOAD BUTTON + DOWNLOADS LIST FIX
   Requested final pass:
   1) All category/home card download buttons sit at the same
      bottom level, regardless of title/description length.
   2) Downloads-list artwork is slightly smaller on mobile so
      the complete filename has more room.
   3) Downloads-list text never gets hidden behind the artwork.
   ============================================================ */

/* Keep every content card structurally equal and pin its actions
   to the bottom of the card. */
.grid .card,
.rail .card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

.grid .card > .body,
.rail .card > .body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.grid .card > .body .card-actions,
.rail .card > .body .card-actions {
  margin-top: auto !important;
  padding-top: 12px !important;
  flex: 0 0 auto !important;
  align-items: stretch !important;
}

.grid .card > .body .card-actions .download,
.rail .card > .body .card-actions .download {
  min-height: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
}

/* If the description is short, don't let it pull the button upward. */
.grid .card > .body p,
.rail .card > .body p {
  flex: 0 0 auto !important;
}

/* ---------------- Downloads page ---------------- */

.downloads-list .download-item {
  min-height: 158px !important;
  height: 158px !important;
  padding: 14px 152px 14px 66px !important;
}

/* Slightly smaller than the previous 138px artwork. */
.downloads-list .download-item-icon {
  top: 14px !important;
  right: 14px !important;
  width: 124px !important;
  height: 130px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  min-height: 130px !important;
  max-height: 130px !important;
  border-radius: 18px !important;
}

.downloads-list .download-item-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 18px !important;
}

/* Give the filename the whole center area and keep it clear of
   the image on the right. */
.downloads-list .download-item-info {
  top: 50% !important;
  right: 152px !important;
  left: 66px !important;
  width: auto !important;
  max-width: none !important;
  transform: translateY(-50%) !important;
}

.downloads-list .download-item-info b {
  width: 100% !important;
  max-width: 100% !important;
  font-size: 19px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Type remains underneath the name and uses its category colour. */
.downloads-list .download-item-info small.download-type {
  margin-top: 6px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

/* Keep the remove button exactly where requested. */
.downloads-list .download-cancel {
  top: 14px !important;
  left: 14px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border: 2px solid #315d3b !important;
  border-radius: 14px !important;
  background: #0d1710 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  z-index: 5 !important;
}

/* Mobile: make the artwork a little smaller again and give the
   filename a wider center column. */
@media (max-width: 520px) {
  .downloads-list .download-item {
    min-height: 158px !important;
    height: 158px !important;
    padding: 14px 126px 14px 66px !important;
    border-radius: 23px !important;
  }

  .downloads-list .download-item-icon {
    top: 14px !important;
    right: 14px !important;
    width: 112px !important;
    height: 130px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    border-radius: 17px !important;
  }

  .downloads-list .download-item-icon img {
    border-radius: 17px !important;
  }

  .downloads-list .download-item-info {
    right: 126px !important;
    left: 66px !important;
  }

  .downloads-list .download-item-info b {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }

  .downloads-list .download-item-info small.download-type {
    margin-top: 6px !important;
    font-size: 12px !important;
  }

  .downloads-list .download-cancel {
    top: 13px !important;
    left: 13px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 13px !important;
    font-size: 25px !important;
  }
}


/* ===== FINAL FIX: identical download-button level in horizontal rails =====
   The previous height:100% on rail cards prevented the flex rail from
   stretching every card to the same cross-axis height. Let the rail
   stretch its cards to the tallest card, then pin actions to the bottom. */
.rail {
  align-items: stretch !important;
}
.rail .card {
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
}
.rail .card > .body {
  height: auto !important;
  min-height: 0 !important;
}
.rail .card > .body .card-actions {
  margin-top: auto !important;
}
.rail .card > .body .card-actions .download {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}


/* ===== FINAL REQUESTED CARD TYPE BADGES =====
   Match the section/menu colors and keep badges compact.
*/
.page-mods .mod-badge {
  color:#ff35d1 !important;
  background:#35103f !important;
  border:1px solid #ff35d1 !important;
  font-size:10px !important;
  line-height:1.2 !important;
  padding:4px 8px !important;
  border-radius:5px !important;
}
.page-packs .resource-badge {
  color:#ffd21f !important;
  background:#342a0c !important;
  border:1px solid #ffd21f !important;
  font-size:10px !important;
  line-height:1.2 !important;
  padding:4px 8px !important;
  border-radius:5px !important;
}
.page-versions .version-badge {
  color:#39e75f !important;
  background:#123b1a !important;
  border:1px solid #39e75f !important;
  font-size:10px !important;
  line-height:1.2 !important;
  padding:4px 8px !important;
  border-radius:5px !important;
}

/* HOME RAIL BADGES — match each section's own badge exactly */
.rail-section.mods .badge.mod-badge {
  color:#ff35d1 !important;
  background:#35103f !important;
  border:1px solid #ff35d1 !important;
  font-size:10px !important;
  line-height:1.2 !important;
  padding:4px 8px !important;
  border-radius:5px !important;
  display:inline-flex !important;
  align-items:center !important;
  align-self:flex-start !important;
  width:max-content !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}
.rail-section.resource-packs .badge.resource-badge {
  color:#ffd21f !important;
  background:#342a0c !important;
  border:1px solid #ffd21f !important;
  font-size:10px !important;
  line-height:1.2 !important;
  padding:4px 8px !important;
  border-radius:5px !important;
  display:inline-flex !important;
  align-items:center !important;
  align-self:flex-start !important;
  width:max-content !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}
.rail-section.minecraft-versions .badge.version-badge {
  color:#39e75f !important;
  background:#123b1a !important;
  border:1px solid #39e75f !important;
  font-size:10px !important;
  line-height:1.2 !important;
  padding:4px 8px !important;
  border-radius:5px !important;
  display:inline-flex !important;
  align-items:center !important;
  align-self:flex-start !important;
  width:max-content !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

/* ===== V40 — supplied reference logo in the site header ===== */
.topbar .brand.brand-image {
  width: min(56vw, 620px);
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}
.topbar .brand.brand-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 800px) {
  .topbar .brand.brand-image {
    width: min(58vw, 390px);
    height: 56px;
  }
}


/* V41 — Home hero title matches the final logo composition. */
.hero-brand-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  direction: ltr;
  margin: 4px 0 18px;
  width: 100%;
}
.hero-brand-logo {
  width: min(650px, 72vw);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(45, 235, 83, .18));
}
.hero-arabic-title {
  font-family: "Noto Kufi Arabic", "Cairo", sans-serif;
  color: #f2f7f3;
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.2;
  white-space: nowrap;
  direction: rtl;
  text-shadow: 2px 2px 0 #020602;
}
.hero p {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  align-self: center;
  text-align: center;
}
@media (max-width: 800px) {
  .hero-brand-row { gap: 8px; margin-bottom: 14px; }
  .hero-brand-logo { width: min(430px, 68vw); }
  .hero-arabic-title { font-size: clamp(17px, 4.5vw, 28px); }
}


/* ===== V42 — exact reference logo + compact Home composition ===== */
.topbar .brand.brand-image {
  width: min(58vw, 680px) !important;
  height: 68px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.topbar .brand.brand-image img {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}
.page-home .hero {
  height:350px !important;
  min-height:350px !important;
  padding:26px 30px !important;
  justify-content:flex-start !important;
}
.page-home .hero .eyebrow {
  margin-top:20px !important;
  margin-bottom:8px !important;
  text-align:center !important;
  font-size:18px !important;
  letter-spacing:5px !important;
}
.page-home .hero-brand-row {
  gap:14px !important;
  margin:0 auto 10px !important;
  width:auto !important;
  direction:ltr !important;
  flex-wrap:nowrap !important;
}
.page-home .hero-brand-logo {
  display:none !important;
}
.page-home .hero-arabic-title {
  order:1 !important;
  color:#f4f7f4 !important;
  font-family:"Cairo",Tahoma,Arial,sans-serif !important;
  font-size:clamp(26px,4vw,50px) !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  direction:rtl !important;
  text-shadow:2px 2px 0 #020602 !important;
}
.page-home .hero-divider {
  order:2 !important;
  color:#f4f7f4 !important;
  font-size:clamp(28px,4vw,52px) !important;
  font-weight:900 !important;
  line-height:1 !important;
}
.page-home .hero-en-title {
  order:3 !important;
  color:#42e85a !important;
  font-family:"Cairo",Tahoma,Arial,sans-serif !important;
  font-size:clamp(26px,4vw,50px) !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  direction:ltr !important;
  text-shadow:2px 2px 0 #020602 !important;
}
.page-home .hero p {
  margin:10px auto 0 !important;
  max-width:760px !important;
  text-align:center !important;
  font-size:clamp(15px,2vw,25px) !important;
  line-height:1.8 !important;
}
@media (max-width:800px) {
  .topbar .brand.brand-image {
    width:min(60vw,420px) !important;
    height:58px !important;
  }
  .page-home .hero {
    height:350px !important;
    min-height:350px !important;
    padding:22px 14px !important;
  }
  .page-home .hero .eyebrow {
    margin-top:20px !important;
    font-size:clamp(12px,3.8vw,18px) !important;
    letter-spacing:4px !important;
  }
  .page-home .hero-brand-row {
    gap:8px !important;
  }
  .page-home .hero-arabic-title,
  .page-home .hero-en-title {
    font-size:clamp(18px,5.2vw,30px) !important;
  }
  .page-home .hero-divider {
    font-size:clamp(20px,5.5vw,32px) !important;
  }
  .page-home .hero p {
    font-size:clamp(13px,3.8vw,18px) !important;
    line-height:1.9 !important;
  }
}


/* ===== V43 — Enderman menu logo ===== */
.side-title.side-title-image {
  width:100%;
  height:auto;
  margin:0 0 18px 0;
  padding:0;
  display:block;
  line-height:0;
  border:0;
  background:transparent;
  letter-spacing:0;
}
.side-title.side-title-image img {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:0;
  object-fit:contain;
}


/* V50 - transparent logo backgrounds; preserve the site background from the Enderman sidebar logo. */
.side-title.side-title-image {
  width: 100% !important;
  height: 76px !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
.side-title.side-title-image img {
  display: block !important;
  width: 100% !important;
  height: 76px !important;
  max-width: 100% !important;
  max-height: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* ===== V46 — Replace the large Home hero with the small standalone banner ===== */
.page-home .hero {
  height:auto !important;
  min-height:0 !important;
  width:100% !important;
  padding:0 !important;
  margin:0 auto 22px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  position:relative !important;
}
.page-home .hero:after {
  display:none !important;
}
.page-home .hero-home-image {
  display:block !important;
  width:min(540px, 100%) !important;
  height:auto !important;
  max-width:540px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  filter:none !important;
}
@media (max-width:800px) {
  .page-home .hero {
    margin-bottom:18px !important;
  }
  .page-home .hero-home-image {
    width:min(540px, 100%) !important;
    max-width:540px !important;
  }
}

/* ===== V52 — compact download count + star rating ===== */
.engagement-strip{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  min-height:38px;
  margin-top:10px;
  direction:rtl;
}
.download-stat,
.rating-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  color:#5aaeff;
  font-size:15px;
  line-height:1;
}
.download-stat svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.download-stat b,
.rating-toggle b{
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.rating-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.rating-toggle{
  border:0;
  padding:5px 7px;
  border-radius:8px;
  background:transparent;
  color:#f4c928;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.rating-toggle:hover{
  background:rgba(244,201,40,.08);
}
.rating-toggle:active{
  transform:scale(.97);
}
.rating-star{
  font-size:18px;
  line-height:1;
}
.rating-chevron{
  width:16px;
  height:16px;
  margin-right:1px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s ease;
}
.rating-wrap.is-open .rating-chevron{
  transform:rotate(180deg);
}
.rating-picker{
  position:absolute;
  top:calc(100% + 5px);
  right:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:2px;
  padding:7px 8px;
  border:1px solid #31583a;
  border-radius:10px;
  background:#08100b;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px) scale(.98);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.rating-wrap.is-open .rating-picker{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.star-choice{
  width:30px;
  height:30px;
  padding:0;
  border:0;
  background:transparent;
  color:#4b554d;
  font-size:21px;
  line-height:1;
  cursor:pointer;
  transition:color .12s ease, transform .12s ease;
}
.star-choice:hover,
.star-choice.selected{
  color:#f4c928;
}
.star-choice:hover{
  transform:scale(1.1);
}
@media(max-width:800px){
  .engagement-strip{gap:10px;margin-top:8px;}
  .download-stat,.rating-toggle{font-size:14px;}
  .download-stat svg{width:19px;height:19px;}
  .rating-picker{right:auto;left:0;}
}

/* ===== V53 — final engagement alignment + full 5-star picker ===== */
/* Keep downloads + rating on one identical bottom row in every card. */
.grid .card > .body .engagement-strip,
.rail .card > .body .engagement-strip {
  margin-top: auto !important;
  flex: 0 0 38px !important;
  min-height: 38px !important;
  align-items: center !important;
}

/* The 5-star picker is centered under the toggle so all five stars remain visible. */
.rating-picker {
  right: auto !important;
  left: 50% !important;
  min-width: 176px !important;
  justify-content: center !important;
  transform: translate(-50%, -4px) scale(.98) !important;
}
.rating-wrap.is-open .rating-picker {
  transform: translate(-50%, 0) scale(1) !important;
}

@media(max-width:800px){
  .rating-picker {
    right: auto !important;
    left: 50% !important;
    min-width: 176px !important;
  }
}

/* ===== V54 — lock engagement row to the bottom of every content card ===== */
.card {
  display: flex !important;
  flex-direction: column !important;
}
.card > .body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.card > .body .engagement-strip {
  margin-top: auto !important;
  flex: 0 0 38px !important;
  min-height: 38px !important;
  align-items: center !important;
}
.card > .body .card-actions {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
}

/* Rails stretch their cards to one row height, so the stats stay level too. */
.rail {
  align-items: stretch !important;
}
.rail .card {
  height: auto !important;
}

/* ===== V55 — exact same engagement-row level in every horizontal rail ===== */
.rail .card {
  display:flex !important;
  flex-direction:column !important;
  align-self:stretch !important;
}
.rail .card > .body {
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
}
.rail .card > .body .engagement-strip {
  margin-top:auto !important;
  flex:0 0 38px !important;
  min-height:38px !important;
}
.rail .card > .body .card-actions {
  flex:0 0 auto !important;
  margin-top:12px !important;
}

/* ===== Smooth bookmark save interaction =====
   Small green bookmark copies spread from the real button and fade out
   continuously. The real button changes state immediately. */
.bookmark-btn {
  position: relative;
  transform: translateZ(0) scale(1);
  will-change: transform, background-color, color, border-color, box-shadow;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .12s ease;
  backface-visibility: hidden;
}
.bookmark-btn.active {
  background: #43db58 !important;
  color: #06100a !important;
  border-color: #43db58 !important;
  box-shadow: 0 0 0 1px rgba(67,219,88,.18), 0 0 12px rgba(67,219,88,.16);
}
.bookmark-btn.active:hover {
  background: #43db58 !important;
  color: #06100a !important;
  border-color: #43db58 !important;
}
.bookmark-btn.bookmark-pop-save {
  animation: bookmarkButtonSave .46s cubic-bezier(.22,1,.36,1) both;
}
.bookmark-btn.bookmark-pop-remove {
  animation: bookmarkButtonRemove .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bookmarkButtonSave {
  0% { transform: translateZ(0) scale(1); }
  28% { transform: translateZ(0) scale(.84); }
  58% { transform: translateZ(0) scale(1.10); }
  78% { transform: translateZ(0) scale(.97); }
  100% { transform: translateZ(0) scale(1); }
}
@keyframes bookmarkButtonRemove {
  0% { transform: translateZ(0) scale(1); }
  30% { transform: translateZ(0) scale(.84); }
  62% { transform: translateZ(0) scale(1.07); }
  82% { transform: translateZ(0) scale(.98); }
  100% { transform: translateZ(0) scale(1); }
}
.bookmark-save-canvas {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  contain: strict;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: contents;
}



/* ===== Smooth download interaction =====
   The real download button pops immediately while a single lightweight
   canvas emits small download icons around it. */
.card-actions .download {
  transform: translateZ(0) scale(1);
  will-change: transform;
  backface-visibility: hidden;
}
.card-actions .download.download-pop {
  animation: downloadButtonPop .50s cubic-bezier(.22,1,.36,1) both;
}
@keyframes downloadButtonPop {
  0%   { transform: translateZ(0) scale(1); }
  24%  { transform: translateZ(0) scale(.90); }
  52%  { transform: translateZ(0) scale(1.045); }
  72%  { transform: translateZ(0) scale(.985); }
  100% { transform: translateZ(0) scale(1); }
}
.download-burst-canvas {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  contain: strict;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: contents;
}

/* ===== V69 — ultra-smooth rating interaction =====
   Keep the rating response local and compositor-friendly on mobile. */
.rating-toggle {
  transform: translateZ(0) scale(1);
  will-change: transform;
  backface-visibility: hidden;
}
.rating-toggle.rating-pop-save {
  animation: ratingButtonSave .46s cubic-bezier(.22,1,.36,1) both;
}
.rating-toggle.rating-pop-remove {
  animation: ratingButtonRemove .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ratingButtonSave {
  0% { transform: translateZ(0) scale(1); }
  28% { transform: translateZ(0) scale(.84); }
  58% { transform: translateZ(0) scale(1.10); }
  78% { transform: translateZ(0) scale(.97); }
  100% { transform: translateZ(0) scale(1); }
}
@keyframes ratingButtonRemove {
  0% { transform: translateZ(0) scale(1); }
  30% { transform: translateZ(0) scale(.84); }
  62% { transform: translateZ(0) scale(1.07); }
  82% { transform: translateZ(0) scale(.98); }
  100% { transform: translateZ(0) scale(1); }
}
.rating-burst-canvas {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  contain: strict;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: contents;
}

/* ===== V70 — viewport-locked engagement effects =====
   Save/download/rating particles are rendered inside one dedicated fixed
   viewport layer. This prevents the effect from being carried by page scroll
   or any scrolling card/container on mobile browsers. */
#rcy-animation-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 2147483000 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateZ(0) !important;
  contain: strict !important;
  isolation: isolate !important;
}
#rcy-animation-overlay > .bookmark-save-canvas,
#rcy-animation-overlay > .download-burst-canvas,
#rcy-animation-overlay > .rating-burst-canvas {
  position: fixed !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  contain: strict !important;
}


/* ===== V73 — centered hamburger + subtle press animation ===== */
/* Keep the existing header/layout exactly as-is; only center the three lines
   inside the existing menu button and animate the icon itself on tap. */
.topbar .menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  position: relative;
}
.topbar .menu-btn .menu-lines {
  width: 28px;
  height: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transform-origin: 50% 50%;
  will-change: transform;
}
.topbar .menu-btn .menu-lines i {
  display: block;
  width: 28px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 50%;
}
.topbar .menu-btn.menu-bounce .menu-lines {
  animation: menuIconPress .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes menuIconPress {
  0%   { transform: scale(1); }
  28%  { transform: scale(.78); }
  58%  { transform: scale(1.10); }
  78%  { transform: scale(.96); }
  100% { transform: scale(1); }
}


/* ===== V74 — sidebar navigation press animation =====
   Shrink -> grow -> normal only. No particles, clones, or layout movement. */
.side .nav {
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
.side .nav.nav-bounce {
  animation: navItemPress .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes navItemPress {
  0%   { transform: scale(1); }
  30%  { transform: scale(.94); }
  58%  { transform: scale(1.045); }
  78%  { transform: scale(.985); }
  100% { transform: scale(1); }
}

/* ===== V76 — universal press feedback =====
   A tiny compositor-only scale animation for interactive controls that do not
   already have a dedicated animation. It never changes layout or position. */
button:not(.menu-btn):not(.nav):not(.bookmark-btn):not(.rating-toggle):not(.star-choice),
a:not(.download):not(.brand),
input,
select,
textarea,
[role="button"] {
  transform-origin: 50% 50%;
  -webkit-tap-highlight-color: transparent;
}
.tap-pop {
  animation: universalTapPop .34s cubic-bezier(.22,1,.36,1) both;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes universalTapPop {
  0%   { transform: translateZ(0) scale(1); }
  34%  { transform: translateZ(0) scale(.94); }
  62%  { transform: translateZ(0) scale(1.045); }
  82%  { transform: translateZ(0) scale(.985); }
  100% { transform: translateZ(0) scale(1); }
}

/* ===== V87 — mobile menu interaction fix =====
   When the hamburger drawer is open, the page behind it must not scroll or
   receive accidental touch/scroll gestures. A backdrop closes the drawer
   when the user taps anywhere outside the menu. */
.menu-backdrop {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 14;
  display: none;
  background: transparent;
  touch-action: none;
}
html.menu-open,
body.menu-open {
  overflow: hidden !important;
  height: 100vh;
  touch-action: none;
}
.side {
  overflow: hidden;
}
@media (max-width:800px) {
  .menu-backdrop { display: none; }
  body.menu-open .menu-backdrop { display: block; }
  body.menu-open .side { touch-action: manipulation; }
}


/* ===== V90 — clear previous sidebar color on mobile/touch =====
   A tapped item can retain a browser :hover state on touch devices. Never
   allow a non-active sidebar item to keep its decorative background/color. */
.side .nav:not(.active):hover {
  background: transparent !important;
  color: #c6d0c8 !important;
  border-right-color: transparent !important;
}

/* ===== V91 — account moved into sidebar + compact hamburger + top drawer ===== */
/* The drawer starts at the very top so opening it covers the header/logo area. */
.side {
  top: 0 !important;
  overflow: hidden !important;
  padding-top: 25px;
}
.menu-backdrop {
  inset: 0 !important;
}

/* Compact modern hamburger: same rounded style, just smaller and cleaner. */
.topbar .menu-btn {
  width: 40px !important;
  height: 38px !important;
  border-radius: 10px !important;
}
.topbar .menu-btn .menu-lines {
  width: 22px !important;
  height: 18px !important;
}
.topbar .menu-btn .menu-lines i {
  width: 22px !important;
  height: 3px !important;
  flex-basis: 3px !important;
}

/* Account entry: sky-blue identity, same press animation as its siblings. */
.nav.account,
.nav.account:hover {
  color: #c6d0c8;
}
.nav.account.active,
.nav.account:hover {
  background: #0b2d3b;
  color: #67d9ff;
  border-right-color: #36c8ff;
}
.nav.account .account-icon {
  width: 24px;
  height: 24px;
}

/* The existing profile controls now sit directly under Account in the drawer. */
.side .profile-menu {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  margin: 4px 0 8px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.side .profile-menu.hidden {
  display: none !important;
}

@media (max-width: 800px) {
  .side {
    width: 245px;
    top: 0 !important;
  }
  .menu-backdrop {
    inset: 0 !important;
  }
}

/* V91 drawer layering: when open it must cover the fixed header too. */
.side.open {
  z-index: 30 !important;
}
.menu-backdrop {
  z-index: 29 !important;
}

/* ===== V92 — Account page + Home search ===== */
.home-search {
  margin-bottom: 20px;
  animation: homeSearchIn .38s cubic-bezier(.22,1,.36,1) both;
}
.home-search input {
  height: 48px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  padding-left: 16px !important;
  background:#08120b !important;
}
.home-search .search-icon-modern { width:24px !important; height:24px !important; color:#9aa79f !important; }
.home-search-results { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px; }
.home-search-results.hidden { display:none !important; }
.home-searching { display:none !important; }
.home-search-empty { grid-column:1/-1; }
@keyframes homeSearchIn { from{opacity:0;transform:translateY(-7px) scale(.985)} to{opacity:1;transform:none} }

.account-eyebrow { color:#67d9ff !important; }
.account-title-icon { color:#67d9ff !important; }
.account-page-card {
  max-width:720px;
  margin:0 auto;
  padding:22px !important;
  border-color:rgba(54,200,255,.24) !important;
  background:linear-gradient(180deg,#091720,#08110c) !important;
}
.account-identity {
  display:flex;
  align-items:center;
  gap:15px;
  padding:6px 4px 20px;
  border-bottom:1px solid #18351f;
}
.account-avatar-wrap {
  width:72px;height:72px;min-width:72px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:#0c1c23;border:2px solid rgba(103,217,255,.5);
  color:#67d9ff;position:relative;
}
.account-empty-icon { width:42px;height:42px;display:block; }
.account-avatar { width:100%;height:100%;object-fit:cover;border-radius:50%;display:none;position:absolute;inset:0; }
.account-avatar:not(.is-empty) { display:block; }
.account-identity-text { min-width:0;display:flex;flex-direction:column;gap:2px; }
.account-identity-text strong { font-size:20px;line-height:1.3;word-break:break-word; }
.account-identity-text small { color:#8d9b92;font-size:11px;word-break:break-all; }
.account-setting { margin-top:20px; }
.account-setting h3 { margin:0 0 8px;font-size:17px;color:#eef5ef; }
.account-setting input { height:48px !important;border-radius:11px !important;margin:0 !important;font-size:15px !important; }
.account-name-hint { margin:7px 2px 10px;color:#7f8e84;font-size:12px;line-height:1.6;transition:color .12s ease; }
.account-name-hint.invalid { color:#ff4f5e !important; }
.account-action {
  width:100%;min-height:48px;margin-top:11px;padding:11px 14px;
  border:1px solid rgba(103,217,255,.22);border-radius:11px;
  background:#0d1912;color:#eef5ef;font-family:"Cairo",Tahoma,Arial,sans-serif;
  font-size:14px;font-weight:700;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}
.account-action:hover { background:#10221a;border-color:rgba(103,217,255,.48); }
.account-action:disabled { opacity:.42;cursor:not-allowed; }
.account-save-name { background:#0b2d3b;border-color:#36c8ff;color:#67d9ff; }
.account-logout { color:#ff7b83;border-color:rgba(255,90,100,.3); }

/* Every account control gets the same shrink -> grow -> normal press feedback. */
.account-action.tap-pop { animation: accountActionPress .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes accountActionPress {
  0%{transform:scale(1)} 34%{transform:scale(.94)} 62%{transform:scale(1.045)} 82%{transform:scale(.985)} 100%{transform:scale(1)}
}

@media(max-width:800px){
  .home-search-results { grid-template-columns:1fr; }
  .account-page-card { padding:18px !important; }
  .account-identity-text strong { font-size:18px; }
}


/* ===== V93 — bookmark search + stable brand ===== */
/* The header logo is intentionally static: no press/hover movement or scaling. */
.topbar .brand.brand-image,
.topbar .brand.brand-image:hover,
.topbar .brand.brand-image:active,
.topbar .brand.brand-image:focus {
  transform: translateX(-50%) !important;
  transition: none !important;
}

/* Bookmark search uses the same clean entrance motion as Home search. */
.bookmark-search {
  animation: bookmarkSearchIn .38s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bookmarkSearchIn {
  from { opacity:0; transform:translateY(-7px) scale(.985); }
  to { opacity:1; transform:none; }
}

/* ===== V94 — final header/search interaction polish ===== */
/* Site logo is purely decorative: no tap, drag, focus, selection, or image-save action. */
.topbar .brand.brand-image,
.topbar .brand.brand-image:hover,
.topbar .brand.brand-image:active,
.topbar .brand.brand-image:focus,
.topbar .brand.brand-image:focus-visible {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  cursor: default !important;
  transform: translateX(-50%) !important;
  transition: none !important;
}
.topbar .brand.brand-image img {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-touch-callout: none !important;
}

/* All page searches get the same light entrance animation; typing stays instant. */
.page .search {
  animation: pageSearchIn .30s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pageSearchIn {
  from { opacity:0; transform:translateY(-6px) scale(.985); }
  to { opacity:1; transform:none; }
}

/* Settings search sits directly below the add/edit/save section. */
.settings-search {
  margin: 0 0 16px;
}
.settings-search input {
  height: 48px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  background:#08120b !important;
}
.settings-search .search-icon-modern {
  width:24px !important;
  height:24px !important;
  color:#9aa79f !important;
}

/* Keep the drawer press animation quick and responsive on mobile. */
.side .nav.nav-bounce {
  animation-duration: .28s !important;
}

/* V95: unified Settings search results */
.settings-search-results {
  margin: 10px 0 18px;
  border: 1px solid rgba(83, 223, 110, .22);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(8, 18, 12, .72);
}
.settings-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(83, 223, 110, .12);
}
.settings-search-result:last-child { border-bottom: 0; }
.settings-search-result-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.settings-search-result-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-search-result-info small { opacity: .58; font-size: .78rem; }
.settings-search-edit { flex: 0 0 auto; }
.settings-search-empty { padding: 16px; text-align: center; opacity: .7; }
@media (max-width: 600px) {
  .settings-search-result { padding: 11px 12px; }
}


/* V96: publish-description validation hint; mirrors account-name feedback. */
.description-input-hint {
  margin: 6px 2px 0;
  text-align: right;
  transition: color .08s ease;
}
.description-input-hint.invalid { color:#ff4f5e !important; }


/* ===== V99 — hamburger press: animation only, no mobile tap/focus square ===== */
.topbar .menu-btn,
.topbar .menu-btn:hover,
.topbar .menu-btn:active,
.topbar .menu-btn:focus,
.topbar .menu-btn:focus-visible {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.topbar .menu-btn:focus-visible {
  background: #0d1910 !important;
}
.topbar .menu-btn .menu-lines,
.topbar .menu-btn .menu-lines i {
  -webkit-tap-highlight-color: transparent !important;
}

/* V100 — keep login/signup responsive and animate every tap without blocking clicks */
#authGate .primary,
#authGate .secondary,
#loginBtn,
#signupBtn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: auto !important;
}
#loginBtn.tap-pop,
#signupBtn.tap-pop {
  animation: universalTapPop .34s cubic-bezier(.22,1,.36,1) both !important;
}

/* ===== V103 — mobile drawer vertical alignment =====
   Align the Enderman R-CYMOD mark with the header brand and bring the
   navigation upward so Home begins beside the Home search area. */
.side{
  padding-top:0 !important;
  padding-bottom:25px !important;
}
.side-title.side-title-image{
  height:72px !important;
  margin:0 0 4px 0 !important;
  overflow:hidden !important;
}
.side-title.side-title-image img{
  height:72px !important;
  max-height:72px !important;
  transform:translateY(8px);
}
.side .nav{
  margin:2px 0 !important;
}

@media (max-width:800px){
  .side{
    padding-top:0 !important;
  }
  .side-title.side-title-image{
    height:72px !important;
    margin-bottom:4px !important;
  }
  .side-title.side-title-image img{
    height:72px !important;
    max-height:72px !important;
    transform:translateY(8px);
  }
  .side .nav{
    margin:2px 0 !important;
  }
}


/* ===== V105 — centered sidebar chroma animation ===== */
.sidebar-chroma{
  width:100%;
  min-height:280px;
  height:min(34vh,330px);
  margin:8px 0 0;
  padding:0 8px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
}
.sidebar-chroma.is-playing{
  opacity:1;
  visibility:visible;
}
.sidebar-chroma-video{
  width:100%;
  height:auto;
  max-height:320px;
  display:block;
  object-fit:contain;
  background:transparent;
  /* V108: move the sidebar chroma slightly lower and a little to the left. */
  transform:translate3d(14px,-48px,0) scale(1.16);
  transform-origin:center center;
  backface-visibility:hidden;
}
@media(max-width:800px){
  .sidebar-chroma{
    min-height:300px;
    height:300px;
    margin-top:8px;
    padding:0 8px 12px;
    align-items:center;
  }
  .sidebar-chroma-video{
    max-height:330px;
    /* V108: mobile adjustment — slightly lower and a little to the left. */
    transform:translate3d(14px,-58px,0) scale(1.18);
  }
}
@media(prefers-reduced-motion:reduce){
  .sidebar-chroma{ display:none !important; }
}


/* ===== V109 — Reserved space above every search box for the upcoming chroma animation ===== */
.search-chroma-slot{
  display:block;
  width:100%;
  height:26px;
  margin:0;
  padding:0;
  background:transparent;
  pointer-events:none;
}
@media(max-width:800px){
  .search-chroma-slot{ height:23px; }
}


/* ===== V123 — Account statistics ===== */
.account-statistics{
  max-width:720px;
  margin:18px auto 0;
  padding:22px !important;
  border-color:rgba(54,200,255,.24) !important;
  background:linear-gradient(180deg,#091720,#08110c) !important;
}
.statistics-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.statistics-eyebrow{
  color:#67d9ff;
  font-weight:900;
  font-size:28px;
  letter-spacing:.4px;
  line-height:1.15;
}
.statistics-heading p{margin:5px 0 0;color:#8d9b92;font-size:12px}
.statistics-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.statistics-metric{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 13px;
  border:1px solid #1b3a28;
  border-radius:14px;
  background:rgba(7,20,14,.78);
}
.statistics-metric-icon{
  width:42px;height:42px;min-width:42px;
  display:grid;place-items:center;border-radius:12px;
}
.statistics-metric-icon svg{width:24px;height:24px}
.downloads-stat .statistics-metric-icon{color:#64b7ff;background:rgba(52,145,255,.10);border:1px solid rgba(100,183,255,.25)}
.bookmarks-stat .statistics-metric-icon{color:#66d69b;background:rgba(73,199,122,.10);border:1px solid rgba(102,214,155,.25)}
.statistics-metric span{display:block;font-size:25px;line-height:1.05;font-weight:900;color:#eef5ef;direction:ltr}
.statistics-metric small{display:block;margin-top:4px;color:#8d9b92;font-size:11px}
.statistics-chart-card{
  margin-top:14px;padding:16px 12px 14px;border-radius:14px;
  border:1px solid #1b3a28;background:rgba(7,20,14,.78);
}
.statistics-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 10px}
.statistics-chart-head h3{margin:0;color:#eef5ef;font-size:16px}
.statistics-chart-head p{margin:3px 0 0;color:#809087;font-size:11px}
.statistics-chart-head strong{font-size:22px;color:#67d9ff;line-height:1}
.statistics-chart{
  height:190px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:end;gap:6px;padding:12px 4px 0;
  border-top:1px solid rgba(103,217,255,.08);
  overflow:visible;
}
.statistics-day{
  min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;
}
.statistics-bar-area{
  width:100%;height:140px;display:flex;align-items:flex-end;justify-content:center;
  border-radius:8px 8px 2px 2px;background:linear-gradient(to top,rgba(103,217,255,.035),transparent);
}
.statistics-bar{
  width:min(26px,74%);min-height:5px;border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#67d9ff,#348fca);
  box-shadow:0 0 14px rgba(103,217,255,.18);
  transition:height .35s ease;
}
.statistics-day.is-today .statistics-bar{background:linear-gradient(180deg,#78e8ff,#36c8ff)}
.statistics-day-label{
  display:block;width:100%;text-align:center;white-space:nowrap;overflow:visible;
  font-size:10px;line-height:1.15;color:#9eaca4;letter-spacing:0;
  transform:none !important;
}
.statistics-day.is-today .statistics-day-label{color:#d9f7ff;font-weight:800}
@media(max-width:480px){
  .account-statistics{padding:18px !important}
  .statistics-eyebrow{font-size:25px}
  .statistics-metrics{gap:9px}
  .statistics-metric{padding:12px 10px;gap:8px}
  .statistics-metric-icon{width:38px;height:38px;min-width:38px}
  .statistics-metric span{font-size:22px}
  .statistics-chart{gap:3px;padding-left:0;padding-right:0}
  .statistics-day-label{font-size:9px}
}

/* ===== V124 — Add-Ons / Textures / Maps / Skins navigation ===== */
.nav.maps.active,.nav.maps:hover{background:#092746;color:#4ea8ff;border-right-color:#2688ff}
.nav.skins.active,.nav.skins:hover{background:#4a1235;color:#ff76c8;border-right-color:#ff4fb8}
.nav.maps .maps-icon,.nav.skins .skins-icon{width:27px;height:27px}
.nav.maps,.nav.skins{font-weight:700}
.maps-eyebrow{color:#4ea8ff !important}
.skins-eyebrow{color:#ff76c8 !important}
.home-eyebrow{color:#d88aff !important}
.map-badge{color:#72b9ff;background:#0d3153}
.skin-badge{color:#ff9ad7;background:#4b1739}
.rail-section.maps .rail-title h3,.rail-section.maps .rail-title h3 .section-icon{color:#4ea8ff !important}
.rail-section.skins .rail-title h3,.rail-section.skins .rail-title h3 .section-icon{color:#ff76c8 !important}
/* Keep the sidebar animation below the complete navigation. */
.sidebar-chroma{margin-top:18px !important;min-height:210px !important;height:220px !important;align-items:flex-end !important;overflow:hidden !important}
.sidebar-chroma-video{transform:translate3d(14px,-8px,0) scale(1.02) !important;max-height:220px !important}
@media(max-width:800px){.sidebar-chroma{min-height:210px !important;height:210px !important;margin-top:18px !important;padding-bottom:4px !important}.sidebar-chroma-video{max-height:220px !important;transform:translate3d(14px,-2px,0) scale(1.02) !important}}

/* Keep the expanded drawer scrollable on short/mobile screens after adding Maps and Skins. */
.side{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}

/* ===== V125 polish — Maps/Skins + Home/Settings ===== */
.nav.maps,.nav.skins{font-weight:400 !important;}
.nav.maps .maps-icon,.nav.skins .skins-icon{width:27px;height:27px;flex:0 0 27px;}
.nav.maps.active,.nav.maps:hover{background:#092746 !important;color:#4ea8ff !important;border-right-color:#2688ff !important;}
.nav.skins.active,.nav.skins:hover{background:#4a1235 !important;color:#ff76c8 !important;border-right-color:#ff4fb8 !important;}
.home-eyebrow{color:#dfe9e3 !important;}
.content-placeholder-icon{width:54px;height:54px;display:block;margin:auto;}
.map-placeholder-icon{color:#4ea8ff;}
.skin-placeholder-icon{color:#ff76c8;}
.skin-card .skin-badge{color:#ff9ad7;background:#4b1739;}
.form-section-label.map-form-label{color:#4ea8ff;}
.form-section-label.skin-form-label{color:#ff76c8;}
.content-type-btn[data-content-type="map"]{color:#4ea8ff;}
.content-type-btn[data-content-type="skin"]{color:#ff76c8;}
.content-type-btn[data-content-type="map"].active{background:#092746;border-color:#2688ff;color:#72b9ff;}
.content-type-btn[data-content-type="skin"].active{background:#4a1235;border-color:#ff4fb8;color:#ff9ad7;}
.map-panel-title{color:#4ea8ff !important;}
.skin-panel-title{color:#ff76c8 !important;}
.page-maps .page-section-title,.maps-eyebrow{color:#4ea8ff !important;}
.page-skins .page-section-title,.skins-eyebrow{color:#ff76c8 !important;}


/* ===== V126 — final Maps/Skins icon + Settings picker color pass ===== */
.nav.maps .maps-icon,
.nav.skins .skins-icon{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  overflow:visible !important;
}
.nav.maps,
.nav.skins{
  font-weight:400 !important;
}
.nav.maps.active,
.nav.maps:hover{
  color:#4ea8ff !important;
  background:#092746 !important;
  border-right-color:#2688ff !important;
}
.nav.skins.active,
.nav.skins:hover{
  color:#ff76c8 !important;
  background:#4a1235 !important;
  border-right-color:#ff4fb8 !important;
}
.home-eyebrow{
  color:#ff4657 !important;
}
.map-placeholder-icon{
  color:#4ea8ff !important;
}
.skin-placeholder-icon{
  color:#ff76c8 !important;
}

/* Settings: each content type keeps its own section color when selected. */
.content-type-btn[data-content-type="mod"].active{
  color:#d65cff !important;
  background:#35103f !important;
  border-color:#d65cff !important;
  box-shadow:0 0 0 1px rgba(214,92,255,.22) inset !important;
}
.content-type-btn[data-content-type="resource"].active{
  color:#e5c15a !important;
  background:#342a0c !important;
  border-color:#e5c15a !important;
  box-shadow:0 0 0 1px rgba(229,193,90,.18) inset !important;
}
.content-type-btn[data-content-type="version"].active{
  color:#5ee66c !important;
  background:#123b1a !important;
  border-color:#5ee66c !important;
  box-shadow:0 0 0 1px rgba(94,230,108,.18) inset !important;
}
.content-type-btn[data-content-type="map"].active{
  color:#4ea8ff !important;
  background:#092746 !important;
  border-color:#2688ff !important;
  box-shadow:0 0 0 1px rgba(38,136,255,.2) inset !important;
}
.content-type-btn[data-content-type="skin"].active{
  color:#ff76c8 !important;
  background:#4a1235 !important;
  border-color:#ff4fb8 !important;
  box-shadow:0 0 0 1px rgba(255,79,184,.2) inset !important;
}


/* ===== V127 — Skin/Map icon refinement + stronger navigation labels ===== */
.side .nav{
  font-weight:800 !important;
}
.side .nav span{
  font-weight:800 !important;
  letter-spacing:.08px;
}
.nav.maps,.nav.skins{
  font-weight:800 !important;
}
.nav.skins .skins-icon{
  width:29px !important;
  height:29px !important;
  flex:0 0 29px;
}
.content-type-btn .skins-icon{
  width:29px !important;
  height:29px !important;
}
.nav.maps .maps-icon{
  width:27px !important;
  height:27px !important;
}


/* V129: refined modern Skins mark — three connected Minecraft-style heads, matched to the sidebar icon language. */
.nav.skins .skins-modern-mark{
  display:inline-block;
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  margin:0;
  background:currentColor;
  -webkit-mask-image:url("skins-modern-icon.svg");
  mask-image:url("skins-modern-icon.svg");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

/* V130: Skins icon — restore square Minecraft heads and use a bold stroke matching the other sidebar icons. */
.nav.skins .skins-modern-mark{
  width:30px !important;
  height:30px !important;
  flex-basis:30px !important;
  -webkit-mask-image:url("skins-modern-icon.svg") !important;
  mask-image:url("skins-modern-icon.svg") !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}


/* V131: Skins icon restored from the user's requested three-square-head design.
   Uses the exact geometric reference shape with thicker strokes for sidebar readability. */
.nav.skins .skins-modern-mark{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  background:currentColor !important;
  -webkit-mask-image:url("skins-modern-icon.png") !important;
  mask-image:url("skins-modern-icon.png") !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}


/* V132: New Skins face icon supplied by the user, reused consistently in sidebar, Settings and Skins placeholders. */
.skins-modern-mark{
  display:inline-block;
  background:currentColor !important;
  -webkit-mask-image:url("skins-modern-icon.png") !important;
  mask-image:url("skins-modern-icon.png") !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}
.nav.skins .skins-modern-mark{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
}
.content-type-btn .skins-modern-mark{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
}
.content-placeholder-icon.skins-modern-mark{
  display:inline-block;
  width:74px !important;
  height:74px !important;
  min-width:74px !important;
  min-height:74px !important;
}


/* ===== V133 — final icon scale + larger sidebar labels =====
   Keep the new Skins icon compact and consistent everywhere, and make
   navigation labels easier to read without changing the layout. */
.nav > span:not(.nav-icon):not(.skins-modern-mark) {
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}
.nav.maps > span:not(.nav-icon),
.nav.skins > span:not(.nav-icon) {
  font-size:18px !important;
  font-weight:800 !important;
}

/* Sidebar: reduce the new Skins mark so it matches the other navigation icons. */
.nav.skins .skins-modern-mark {
  width:25px !important;
  height:25px !important;
  flex:0 0 25px !important;
}

/* Settings content picker: use the same compact icon scale. */
.content-type-btn .skins-modern-mark {
  width:25px !important;
  height:25px !important;
  flex:0 0 25px !important;
}

/* Empty/card placeholders: smaller than V132, still clearly visible. */
.content-placeholder-icon.skins-modern-mark {
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
}

/* Home page section headings: Maps and Skins icons must not become oversized. */
.rail-title .content-placeholder-icon {
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  display:inline-block !important;
  margin:0 8px 0 0 !important;
  vertical-align:middle !important;
}
.rail-section.skins .rail-title .skins-modern-mark {
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  flex:0 0 32px !important;
}

/* Mobile keeps the requested stronger text while preventing overflow. */
@media(max-width:800px){
  .nav > span:not(.nav-icon):not(.skins-modern-mark) {
    font-size:17px !important;
    font-weight:800 !important;
  }
  .nav.skins .skins-modern-mark {
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
  }
  .content-type-btn .skins-modern-mark {
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
  }
  .content-placeholder-icon.skins-modern-mark {
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
  .rail-title .content-placeholder-icon {
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
  }
}


/* ===== V134 — final navigation weight, compact page headers, modern empty states ===== */
/* Restore the lighter sidebar typography used before the newer menu items were added. */
.side .nav,
.side .nav span,
.nav.maps,
.nav.skins,
.nav > span:not(.nav-icon):not(.skins-modern-mark),
.nav.maps > span:not(.nav-icon),
.nav.skins > span:not(.nav-icon){
  font-weight:600 !important;
  letter-spacing:.03px !important;
}
.nav > span:not(.nav-icon):not(.skins-modern-mark),
.nav.maps > span:not(.nav-icon),
.nav.skins > span:not(.nav-icon){
  font-size:18px !important;
  line-height:1.2 !important;
}

/* Remove the oversized vertical gap between every page title and its search bar. */
.page-heading-modern{
  margin-bottom:6px !important;
}
.search-chroma-slot{
  height:4px !important;
  min-height:4px !important;
}
@media(max-width:800px){
  .page-heading-modern{ margin-bottom:5px !important; }
  .search-chroma-slot{ height:3px !important; min-height:3px !important; }
  .nav > span:not(.nav-icon):not(.skins-modern-mark),
  .nav.maps > span:not(.nav-icon),
  .nav.skins > span:not(.nav-icon){
    font-size:17px !important;
    font-weight:600 !important;
  }
}

/* Sidebar chroma animation intentionally removed: no reserved blank drawer space. */
.sidebar-chroma{ display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; }


/* ===== V135 — final Add-Ons icon + exact menu typography =====
   Keep every sidebar label on the same lighter weight, including Settings. */
.side .nav,
.side .nav span,
.nav > span:not(.nav-icon):not(.skins-modern-mark):not(.addons-modern-mark){
  font-weight:600 !important;
}
.nav.settings > span:not(.nav-icon),
.nav.settings span{
  font-weight:600 !important;
}

/* User-supplied Add-Ons emblem: rendered as a clean monochrome mask so it
   automatically inherits the same color as the active/inactive menu item. */
.addons-modern-mark{
  display:inline-block !important;
  background:currentColor !important;
  -webkit-mask-image:url("addons-modern-icon.png") !important;
  mask-image:url("addons-modern-icon.png") !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}
.nav.mods .addons-modern-mark{
  width:27px !important;
  height:27px !important;
  flex:0 0 27px !important;
}
.content-type-btn .addons-modern-mark{
  width:25px !important;
  height:25px !important;
  flex:0 0 25px !important;
}
@media(max-width:800px){
  .nav.mods .addons-modern-mark{
    width:25px !important;
    height:25px !important;
    flex-basis:25px !important;
  }
  .content-type-btn .addons-modern-mark{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
  }
}


/* ===== V139 — User supplied Add-Ons emblem =====
   The supplied rounded-square / four-lobed outline is now the single
   Add-Ons mark used by navigation, Settings and the Home Add-Ons rail. */
.section-icon.addons-modern-mark{
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  vertical-align:middle !important;
}
@media(max-width:800px){
  .section-icon.addons-modern-mark{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
  }
}

/* ===== V140 — Unified sidebar icon scale =====
   Keep every existing icon shape exactly as-is; only normalize its rendered
   box size to match the Add-Ons icon. */
.side .nav .nav-icon,
.side .nav .addons-modern-mark,
.side .nav .skins-modern-mark,
.side .nav .maps-icon,
.side .nav .home-icon,
.side .nav .packs-icon,
.side .nav .version-icon,
.side .nav .bookmark-icon,
.side .nav .account-icon,
.side .nav .settings-icon {
  width:27px !important;
  height:27px !important;
  flex:0 0 27px !important;
  max-width:27px !important;
  max-height:27px !important;
}

/* Mobile: keep the exact same unified icon size instead of shrinking some
   icons independently. */
@media(max-width:800px){
  .side .nav .nav-icon,
  .side .nav .addons-modern-mark,
  .side .nav .skins-modern-mark,
  .side .nav .maps-icon,
  .side .nav .home-icon,
  .side .nav .packs-icon,
  .side .nav .version-icon,
  .side .nav .bookmark-icon,
  .side .nav .account-icon,
  .side .nav .settings-icon {
    width:27px !important;
    height:27px !important;
    flex-basis:27px !important;
    max-width:27px !important;
    max-height:27px !important;
  }
}


/* ===== V141 — User supplied modern Home icon =====
   Replace only the old Home mark with the supplied four-square emblem.
   The same unified 27px sidebar scale from V140 is retained; the icon
   inherits the existing Home red active/hover color and keeps all other
   navigation icon shapes unchanged. */
.nav.home .home-modern-mark{
  display:inline-block !important;
  width:27px !important;
  height:27px !important;
  flex:0 0 27px !important;
  max-width:27px !important;
  max-height:27px !important;
  background:currentColor !important;
  -webkit-mask-image:url("home-modern-icon.png") !important;
  mask-image:url("home-modern-icon.png") !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  margin:0 !important;
}
@media(max-width:800px){
  .nav.home .home-modern-mark{
    width:27px !important;
    height:27px !important;
    flex-basis:27px !important;
    max-width:27px !important;
    max-height:27px !important;
  }
}

/* ===== V142 — Sidebar icon visual normalization to Textures =====
   Keep the original icon artwork and the existing 27px layout boxes, but
   normalize the visible drawing size so Home/Add-Ons/MC Version/Maps/Skins
   visually match the Textures icon. Bookmarks, Account and Settings are
   intentionally untouched. */
.side .nav.home .home-modern-mark,
.side .nav.mods .addons-modern-mark {
  transform:scale(.76) !important;
  transform-origin:center center !important;
}
.side .nav.versions .version-icon {
  transform:scale(.87) !important;
  transform-origin:center center !important;
}
.side .nav.maps .maps-icon {
  transform:scale(.91) !important;
  transform-origin:center center !important;
}
.side .nav.skins .skins-modern-mark {
  transform:scale(.85) !important;
  transform-origin:center center !important;
}

/* ===== V146 — new hollow 4-bar hamburger icon =====
   Replace only the hamburger artwork. Keep the existing button, click handler,
   drawer behavior and press animation unchanged. The supplied icon is used
   as-is apart from making its black interior transparent and coloring the
   stroke with the existing green menu color. */
.topbar .menu-btn .menu-lines {
  width: 32px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.topbar .menu-btn .menu-lines .menu-icon-image {
  display: block !important;
  width: 32px !important;
  height: 30px !important;
  max-width: none !important;
  object-fit: fill !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
.topbar .menu-btn .menu-lines i {
  display: none !important;
}

/* ===== V153 — SMOOTH / LOW-LAG MOTION FIX ===== */
:root{
  --rcy-green:#39e85a;
  --rcy-green-soft:#79f28b;
  --rcy-green-dark:#0b2612;
  --rcy-ease:cubic-bezier(.22,1,.36,1);
}

/* Slower, lighter page entrance. No card entrance animations. */
.page.active{animation:rcyPageIn .72s var(--rcy-ease) both;}
@keyframes rcyPageIn{from{opacity:.96;transform:translateY(5px)}to{opacity:1;transform:none}}
.page.active .page-heading-modern{animation:rcyRise .78s var(--rcy-ease) both}
.page.active .search{animation:rcyRise .78s var(--rcy-ease) .08s both}
@keyframes rcyRise{from{opacity:.96;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Cards stay static while loading/scrolling to avoid mobile jank. */
.card.rcy-reveal{animation:none!important;opacity:1!important;transform:none!important}
.card{transition:border-color .38s ease,box-shadow .38s ease,background-color .38s ease}
.card:hover{border-color:rgba(57,232,90,.48);box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 1px rgba(57,232,90,.05)}
.card:active{transform:scale(.992)!important}
.card .thumb img{transition:transform .45s var(--rcy-ease),filter .45s ease}
.card:hover .thumb img{transform:scale(1.02);filter:saturate(1.04)}

/* Controls: no click shrink/expand animation. */
.primary,.download,.menu-btn,.tab,.nav,.secondary,.logout,.edit,.delete,.profile{transition:background-color .30s ease,border-color .30s ease,box-shadow .30s ease}
.primary:hover,.download:hover{box-shadow:0 5px 16px rgba(57,232,90,.12)}
.primary:active,.download:active,.tab:active,.nav:active,.secondary:active,.logout:active,.edit:active,.delete:active,.profile:active{transform:scale(.96)!important}

/* Hamburger: gentle hover only; no scale on press. */
.topbar .menu-btn:hover{border-color:rgba(57,232,90,.65)!important;box-shadow:0 0 14px rgba(57,232,90,.08)}
.topbar .menu-btn:hover .menu-icon-image{filter:drop-shadow(0 0 4px rgba(57,232,90,.28))}
.topbar .menu-btn:active{transform:scale(.92)!important}
.topbar .menu-icon-image{transition:filter .35s ease}
.side.open{animation:rcySideIn .55s var(--rcy-ease) both}
.side.open .nav{animation:rcyNavIn .55s var(--rcy-ease) both;animation-delay:calc(var(--nav-i,0) * 45ms)}
@keyframes rcySideIn{from{opacity:.98;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@keyframes rcyNavIn{from{opacity:.98;transform:translateX(5px)}to{opacity:1;transform:none}}

/* Search focus remains subtle. */
.search:focus-within{border-color:rgba(57,232,90,.50)!important;box-shadow:0 0 0 2px rgba(57,232,90,.045),0 0 16px rgba(57,232,90,.045);transition:border-color .35s ease,box-shadow .35s ease}
.search .search-icon-modern{transition:color .35s ease}
.search:focus-within .search-icon-modern{transform:translateY(-50%) !important;color:var(--rcy-green-soft)}

/* Remove the decorative slash/line that appeared beside every page name. */
.page-section-title::after{display:none!important;content:none!important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}

/* ===== V156 — SMOOTH STAGGERED DRAWER OPEN/CLOSE =====
   The drawer itself uses the existing transform transition. Its contents
   enter one-by-one from the right, and leave in the exact reverse direction
   when the user taps outside the drawer. No competing transform animation
   is applied to the drawer, which prevents the opening stutter/cut. */
.side.open{
  animation:none !important;
  transition:transform .42s var(--rcy-ease) !important;
}
.side.open .side-title.side-title-image{
  animation:rcyDrawerItemIn .52s var(--rcy-ease) both;
  animation-delay:0ms;
}
.side.open .nav{
  animation:rcyDrawerItemIn .52s var(--rcy-ease) both !important;
}
.side.open .nav:nth-of-type(1){animation-delay:70ms !important}
.side.open .nav:nth-of-type(2){animation-delay:125ms !important}
.side.open .nav:nth-of-type(3){animation-delay:180ms !important}
.side.open .nav:nth-of-type(4){animation-delay:235ms !important}
.side.open .nav:nth-of-type(5){animation-delay:290ms !important}
.side.open .nav:nth-of-type(6){animation-delay:345ms !important}
.side.open .nav:nth-of-type(7){animation-delay:400ms !important}
.side.open .nav:nth-of-type(8){animation-delay:455ms !important}
.side.open .nav:nth-of-type(9){animation-delay:510ms !important}
.side.open .nav:nth-of-type(10){animation-delay:565ms !important}

.side.closing .side-title.side-title-image{
  animation:rcyDrawerItemOut .38s var(--rcy-ease) both;
  animation-delay:600ms;
}
.side.closing .nav{
  animation:rcyDrawerItemOut .38s var(--rcy-ease) both !important;
}
.side.closing .nav:nth-of-type(1){animation-delay:560ms !important}
.side.closing .nav:nth-of-type(2){animation-delay:510ms !important}
.side.closing .nav:nth-of-type(3){animation-delay:460ms !important}
.side.closing .nav:nth-of-type(4){animation-delay:410ms !important}
.side.closing .nav:nth-of-type(5){animation-delay:360ms !important}
.side.closing .nav:nth-of-type(6){animation-delay:310ms !important}
.side.closing .nav:nth-of-type(7){animation-delay:260ms !important}
.side.closing .nav:nth-of-type(8){animation-delay:210ms !important}
.side.closing .nav:nth-of-type(9){animation-delay:160ms !important}
.side.closing .nav:nth-of-type(10){animation-delay:110ms !important}

@keyframes rcyDrawerItemIn{
  0%{opacity:0;transform:translate3d(32px,0,0)}
  60%{opacity:1;transform:translate3d(-3px,0,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes rcyDrawerItemOut{
  0%{opacity:1;transform:translate3d(0,0,0)}
  100%{opacity:0;transform:translate3d(32px,0,0)}
}

@media(prefers-reduced-motion:reduce){
  .side.open .side-title.side-title-image,
  .side.open .nav,
  .side.closing .side-title.side-title-image,
  .side.closing .nav{animation:none !important;}
}


/* ===== V157 — FAST REVERSE DRAWER CLOSE =====
   Closing is one reverse drawer motion. Menu items do not disappear one by
   one, which was the main source of the long close delay. */
.side.closing{
  animation:none !important;
  transition:transform .40s var(--rcy-ease) !important;
}
.side.closing .side-title.side-title-image,
.side.closing .nav{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}
@media(max-width:800px){
  .side.closing{
    transition:transform .40s var(--rcy-ease) !important;
  }
}

/* ===== V158 — polished image upload control =====
   Replace the native browser file picker UI with the supplied upload icon
   while keeping the original file inputs and upload behavior intact. */
.upload.upload-image-control{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:156px !important;
  margin:7px 0 !important;
  padding:16px !important;
  overflow:hidden !important;
  border:1px dashed #315938 !important;
  border-radius:12px !important;
  background:#07100a !important;
  color:#a9b9ad !important;
  text-align:center !important;
  cursor:pointer !important;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease !important;
}
.upload.upload-image-control:hover{
  border-color:rgba(57,232,90,.55) !important;
  background:#08130b !important;
}
.upload.upload-image-control:active{
  transform:scale(.985) !important;
}
.upload-image-title{
  position:relative !important;
  z-index:2 !important;
  font-size:18px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
  color:#a9b9ad !important;
  pointer-events:none !important;
}
.upload-image-preview{
  position:relative !important;
  z-index:2 !important;
  width:72px !important;
  height:72px !important;
  display:grid !important;
  place-items:center !important;
  pointer-events:none !important;
}
.upload-image-preview img{
  width:68px !important;
  height:68px !important;
  object-fit:contain !important;
  display:block !important;
  filter:none !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}
.upload.upload-image-control input[type="file"]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  border:0 !important;
  cursor:pointer !important;
  z-index:5 !important;
}
.upload.upload-image-control input[type="file"]::file-selector-button{
  display:none !important;
}


/* ===== V160 — DESCRIPTION HINT POSITION + SITE FAVICON =====
   Keep the validation hint immediately attached to its description field.
   No validation behavior or form logic is changed. */
.description-input-hint{
  margin:4px 2px 8px !important;
  position:relative !important;
  display:block !important;
}


/* ===== V161 — DESCRIPTION HINT + ADMIN ADD TITLE =====
   Keep the validation note directly below every description field and
   separate it clearly from the image upload area. Only presentation changes. */
.description-input-hint{
  margin:-14px 2px 18px !important;
  position:relative !important;
  display:block !important;
}
.admin-add-title{
  font-size:32px !important;
  line-height:1.25 !important;
}
@media(max-width:800px){
  .admin-add-title{
    font-size:30px !important;
  }
}


/* ===== V168 — final supplied logo + four-bar hamburger =====
   Visual-only header replacement. Existing menu button/click behavior is preserved. */
.topbar {
  justify-content: flex-start !important;
  direction: ltr !important;
}
.topbar .brand.brand-image {
  position: static !important;
  left: auto !important;
  transform: none !important;
  order: 1 !important;
  margin: 0 !important;
  width: min(72vw, 340px) !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}
.topbar .brand.brand-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.topbar .menu-btn {
  order: 2 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}
.topbar .menu-btn:hover,
.topbar .menu-btn:focus,
.topbar .menu-btn:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .menu-btn .menu-lines {
  width: 28px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.topbar .menu-btn .menu-lines .menu-icon-image {
  width: 27px !important;
  height: 23px !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.topbar .menu-btn:active { transform: none !important; }

/* Login logo: same supplied logo, aligned to the left without changing the form layout. */
.auth .eyebrow {
  text-align: left !important;
}
.auth .eyebrow img {
  display: block !important;
  width: min(300px, 78vw) !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
}

@media (max-width:800px) {
  .topbar .brand.brand-image {
    width: min(72vw, 280px) !important;
    height: 58px !important;
  }
  .topbar .menu-btn {
    width: 32px !important;
    height: 32px !important;
  }
  .topbar .menu-btn .menu-lines {
    width: 26px !important;
    height: 22px !important;
  }
  .topbar .menu-btn .menu-lines .menu-icon-image {
    width: 25px !important;
    height: 21px !important;
  }
}


/* ===== V169 — remove legacy sidebar logo and lift menu items =====
   The legacy sidebar logo is removed from the markup/files. Only the menu
   spacing is adjusted; existing drawer/open/close animations remain intact. */
.side {
  padding-top: 10px !important;
}

/* ===== V170 — stable mobile drawer viewport + slightly smaller header logo =====
   Keep the existing drawer/open-close animations and navigation styling intact.
   Only the mobile header logo size and the drawer's viewport anchoring are
   adjusted so scrolling the page/browser UI cannot change the menu spacing. */
@media (max-width:800px) {
  .topbar .brand.brand-image {
    width: min(64vw, 250px) !important;
    height: 54px !important;
  }

  .side {
    top: 0 !important;
    bottom: auto !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-top: 10px !important;
    padding-bottom: 25px !important;
  }
}


/* ===== V171 — compact header logo + supplied sidebar mark =====
   Visual-only changes: the existing header/login logo is slightly smaller.
   The supplied LISTS mark is added to the upper-left of the open drawer.
   Existing drawer, navigation and hamburger animations are untouched. */
.topbar .brand.brand-image {
  width: min(60vw, 225px) !important;
}
.topbar .brand.brand-image img {
  object-position: left center !important;
}
.auth .eyebrow img {
  width: min(270px, 70vw) !important;
}

.side-logo {
  position: absolute !important;
  top: 13px !important;
  left: 13px !important;
  width: 104px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.side-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  mix-blend-mode: screen !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

@media (max-width:800px) {
  .topbar .brand.brand-image {
    width: min(58vw, 220px) !important;
    height: 54px !important;
  }
  .auth .eyebrow img {
    width: min(255px, 68vw) !important;
  }
  .side-logo {
    top: 13px !important;
    left: 12px !important;
    width: 96px !important;
    height: 38px !important;
  }
}

/* ===== V172 — sidebar LISTS mark header alignment =====
   Keep the LISTS mark in the upper-right, opposite the main R-CYMOD logo,
   and reserve its header row so the navigation always starts underneath it.
   No navigation/animation behavior is changed. */
.side {
  padding-top: 68px !important;
}
.side-logo {
  top: 13px !important;
  right: 13px !important;
  left: auto !important;
  width: 104px !important;
  height: 42px !important;
  justify-content: flex-end !important;
}
@media (max-width:800px) {
  .side {
    padding-top: 68px !important;
  }
  .side-logo {
    top: 13px !important;
    right: 13px !important;
    left: auto !important;
    width: 104px !important;
    height: 42px !important;
  }
}

/* ===== V173 — stable drawer height across mobile browser scrolling =====
   Keep the open sidebar tied to the stable small viewport instead of the
   dynamic viewport, so collapsing/expanding the browser bars cannot change
   the empty space below the navigation. Existing drawer animations and
   navigation positions remain unchanged. */
@media (max-width:800px) {
  .side {
    height: 100svh !important;
    max-height: 100svh !important;
    min-height: 100svh !important;
    top: 0 !important;
    bottom: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* ===== V174 — FIX: drawer must always fill the CURRENT visible viewport =====
   V173 used 100svh, which can become taller/shorter than the visible mobile
   viewport depending on the browser scroll state. That produced a large
   empty area below Settings when the drawer was opened after scrolling.
   Use fixed top+bottom anchoring instead: the drawer always reaches the
   bottom of the currently visible viewport, while its internal nav spacing
   stays exactly the same. */
@media (max-width:800px) {
  .side {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* ===== V175 — preserve page position while opening the mobile drawer =====
/* The drawer must open over the current list position instead of causing the
   document to jump to the top when body scrolling is temporarily disabled. */
@media (max-width:800px){
  body.menu-open {
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }
}


/* ===== V176 — zero-jump mobile drawer =====
   The drawer must behave as a pure fixed overlay. Do not lock the document
   with body/html overflow or fixed positioning: on mobile browsers that can
   change the visual viewport and create a black area / scroll jump at the
   bottom of long pages. The backdrop blocks interaction with the page behind
   it while the drawer is open, without modifying the page scroll position. */
@media (max-width:800px) {
  html.menu-open,
  body.menu-open {
    overflow: visible !important;
    height: auto !important;
    touch-action: auto !important;
  }

  body.menu-open .menu-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 29 !important;
    background: transparent !important;
    touch-action: none !important;
  }

  body.menu-open .side {
    z-index: 30 !important;
    overscroll-behavior: contain !important;
  }
}


/* ===== V178 — login logo centered + universal download button text =====
   Center the R-CYMOD logo inside the Sign In card without changing the form
   layout. All content download buttons use the single label "تحميل". */
.auth .eyebrow {
  width: 100% !important;
  text-align: center !important;
}
.auth .eyebrow img {
  display: block !important;
  width: min(270px, 70vw) !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* V179 — Enlarge only the "تحميل" text outside the Home page.
   Home page buttons are intentionally left unchanged. */
.page:not(#page-home) .card-actions .download,
.page:not(#page-home) a.download {
  font-size: 24px !important;
  line-height: 1.2 !important;
}

/* ===== V181 — responsive image picker + instant drawer outside-tap ===== */
/* The upload container is only a visual box. The preview icon is the sole
   interactive control that opens the file picker. */
.upload.upload-image-control {
  cursor:default !important;
  transform:none !important;
}
.upload.upload-image-control:active {
  transform:none !important;
}
.upload-image-preview {
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  width:86px !important;
  height:86px !important;
  display:grid !important;
  place-items:center !important;
  background:transparent !important;
  color:inherit !important;
  border-radius:14px !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  z-index:3 !important;
  transform-origin:50% 50% !important;
  -webkit-tap-highlight-color:transparent !important;
}
.upload-image-preview img {
  width:76px !important;
  height:76px !important;
  object-fit:contain !important;
  display:block !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  border-radius:10px !important;
}
.upload-image-preview.has-image img {
  width:86px !important;
  height:86px !important;
  object-fit:cover !important;
  border-radius:12px !important;
}
.upload-image-preview:focus-visible {
  outline:2px solid rgba(85,230,103,.75) !important;
  outline-offset:4px !important;
}
.upload-image-preview.image-picker-pop {
  animation:imagePickerPop .38s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes imagePickerPop {
  0% { transform:scale(1); }
  35% { transform:scale(.78); }
  62% { transform:scale(1.10); }
  82% { transform:scale(.97); }
  100% { transform:scale(1); }
}

/* The file input is opened only by the preview button. */
.upload.upload-image-control input[type="file"] {
  display:none !important;
}

@media (max-width:800px) {
  .upload-image-preview { width:84px !important; height:84px !important; }
  .upload-image-preview img { width:74px !important; height:74px !important; }
  .upload-image-preview.has-image img { width:84px !important; height:84px !important; }
}

/* ===== V182 — INSTANT OUTSIDE-TAP RESPONSE =====
   Start the drawer close on the earliest mobile touch event. This does NOT
   change the close animation itself; it only removes the input-response lag.
*/
@media (max-width:800px){
  /* V185 — while the drawer is open, the transparent shield is a real
     hit-target above the entire page. It blocks every outside interaction;
     app.js closes the drawer only after the initiating touch is consumed. */
  body.menu-open .menu-backdrop{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    pointer-events:auto !important;
    touch-action:none !important;
    cursor:default !important;
  }
  body.menu-open .side{
    z-index:2147483001 !important;
    touch-action:auto !important;
  }
  body.menu-open .topbar{
    z-index:2147482999 !important;
  }
}

/* ===== V186 — completely suppress underlying page press feedback =====
   While the drawer is open OR finishing its close animation, the document
   behind it is not a hit target at all. This prevents :active, hover/tap
   feedback, and any visual press from appearing underneath the transparent
   shield. The drawer itself remains fully interactive. */
@media (max-width:800px){
  body.menu-open main,
  body.menu-open .topbar .brand,
  body.menu-open .topbar > *:not(#menuBtn){
    pointer-events:none !important;
  }
  body.menu-open main * {
    -webkit-tap-highlight-color:transparent !important;
  }
  body.menu-open .menu-backdrop{
    pointer-events:auto !important;
  }
}

/* ===== AUTH TABS / SIGN UP FORM =====
   Only the authentication gate is affected here. The existing site layout,
   logo, colors and authenticated pages remain unchanged. */
.authgate .auth {
  width: min(470px, 92vw) !important;
  padding: 24px !important;
  overflow: hidden;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  direction: ltr;
  margin: 14px 0 18px;
  padding: 3px;
  border: 1px solid #294b31;
  border-radius: 12px;
  background: #07100a;
}
.auth-tab {
  min-height: 52px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9baa9f;
  font: 800 16px Cairo,Tahoma,Arial,sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s ease, color .2s ease, transform .12s ease;
}
.auth-tab.active {
  background: #10351a;
  color: #55e967;
}
.auth-tab:active {
  transform: scale(.96);
}
.auth-panels {
  position: relative;
}
.auth-panel {
  display: block;
  transform-origin: 50% 0;
}
.auth-panel[hidden] {
  display: none !important;
}
.auth-panel.active {
  animation: authPanelIn .34s cubic-bezier(.22,1,.36,1) both;
}
.auth-panel-pop {
  animation: authPanelIn .34s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes authPanelIn {
  0% { opacity: .15; transform: scale(.94); }
  58% { opacity: 1; transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1); }
}
.auth-name-hint {
  margin: 0 0 2px;
  min-height: 20px;
  color: #7f9084;
  font-size: 11px;
  line-height: 1.7;
  text-align: right;
  transition: color .15s ease;
}
.auth-name-hint.invalid {
  color: #ff4f5e !important;
}
#signInPanel input,
#signUpPanel input {
  margin: 5px 0;
}
#signUpPanel #signupName {
  margin-bottom: 0;
}
@media (max-width:800px) {
  .authgate .auth {
    padding: 20px !important;
  }
  .auth-tab {
    min-height: 50px;
    font-size: 15px;
  }
}

/* ============================================================
   R-CYMOD V188 — personal file manager UI
   New navigation: My Files / Select Files / Account.
   Existing drawer and press animations remain unchanged.
   ============================================================ */
.authgate{background:#050b07;position:relative;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none}
.authgate.auth-ready{visibility:visible;opacity:1;pointer-events:auto}
.authgate::before{content:"";position:fixed;inset:0;opacity:.12;background-image:linear-gradient(45deg,#4ee25d 25%,transparent 25%,transparent 75%,#4ee25d 75%);background-size:38px 38px;pointer-events:none}
.authgate .auth{position:relative;z-index:1;background:rgba(10,19,13,.94)}
.auth-logo{text-align:center;margin:0 auto 28px}.auth-logo img{display:block;width:min(300px,78vw);height:auto;margin:0 auto;object-fit:contain}
.auth-tabs{display:flex;gap:8px;margin-bottom:12px}.auth-tab{flex:1;border:1px solid #29452f;background:#07100a;color:#b9c5bd;border-radius:9px;padding:11px;cursor:pointer;font-family:Cairo,Tahoma,Arial,sans-serif;font-weight:800}.auth-tab.active{background:#43db58;color:#031006;border-color:#43db58}
.auth-panel{display:block}.auth-panel[hidden]{display:none!important}.auth-panel-pop{animation:authPanelPop .36s cubic-bezier(.22,1,.36,1) both}@keyframes authPanelPop{0%{transform:scale(.97);opacity:.5}55%{transform:scale(1.015);opacity:1}100%{transform:scale(1);opacity:1}}

/* Only the three requested sidebar entries are visible. */
.side .nav{display:none!important}.side .nav.my-files,.side .nav.select-files,.side .nav.account{display:flex!important;align-items:center;justify-content:flex-start;gap:13px;text-align:right}
.side .nav.my-files{background:transparent;color:#c6d0c8;border-right-color:transparent}.side .nav.my-files.active{background:#103d19;color:#5cec6b;border-right-color:#43db58}
.side .nav.select-files{background:transparent;color:#c6d0c8;border-right-color:transparent}.side .nav.select-files.active{background:#341353;color:#cf7dff;border-right-color:#b95cff}
.side .nav.account.active{background:#16221a;color:#a4ffad;border-right-color:#7bea86}
.side .nav .nav-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px}.side .nav .nav-icon img{width:100%;height:100%;object-fit:contain;display:block}
.side-logo{display:flex;justify-content:center;align-items:center;height:72px;margin:0 0 20px}.side-logo img{width:min(205px,90%);height:auto;max-height:68px;object-fit:contain}

/* The requested page titles and their category colours. */
.page-heading-modern{margin-bottom:24px}.page-section-title{font-size:34px!important;letter-spacing:1px!important;font-weight:900!important}.my-files-title{color:#55e667!important}.select-files-title{color:#c36cff!important}.account-title{color:#aab5ad!important}
.search.file-search{position:relative;margin-bottom:22px}.file-search input{padding-right:48px!important;height:56px;font-size:17px}.search-icon-modern{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:23px;height:23px;pointer-events:none;color:#6f8175}
.files-list{display:flex;flex-direction:column;gap:12px}.files-empty{min-height:300px;border:1px solid #1c3c23;border-radius:18px;background:#0a130d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#aebbb1;font-size:23px;font-weight:800}.files-empty img{width:82px;height:82px;object-fit:contain;opacity:.95}
.user-file-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:82px;padding:14px 16px 14px 14px;border:1px solid #1c3c23;border-radius:16px;background:#0a130d;transition:border-color .2s ease,background .2s ease}.user-file-card:hover{border-color:#2b5c35;background:#0c170f}.user-file-main{display:flex;align-items:center;gap:14px;min-width:0}.user-file-type{width:48px;height:48px;border-radius:12px;background:#101d13;border:1px solid #294a31;color:#63e86f;display:grid;place-items:center;flex:0 0 48px;font-weight:900;font-size:12px}.user-file-info{min-width:0;display:flex;flex-direction:column;gap:4px}.user-file-info strong{font-size:16px;line-height:1.45;overflow-wrap:anywhere}.user-file-info small{color:#84958a;font-size:12px}.file-menu-btn{width:44px;height:44px;min-width:44px;border:0;background:transparent;color:#c9d4cc;border-radius:10px;display:grid;place-items:center;cursor:pointer;padding:0}.file-menu-btn span{display:block;width:5px;height:5px;background:currentColor;border-radius:50%;margin:2px}.file-menu-btn:active{transform:scale(.94)}
.file-action-menu{position:fixed;z-index:1000;background:#09110b;border:1px solid #2a5132;border-radius:14px;padding:7px;box-shadow:0 18px 50px #0009;min-width:190px}.file-action-menu.hidden{display:none!important}.file-action-menu button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#eaf1ec;text-align:right;padding:12px 11px;border-radius:9px;cursor:pointer;font-family:Cairo,Tahoma,Arial,sans-serif;font-weight:700}.file-action-menu button:hover{background:#122018}.file-action-menu button:last-child{color:#ff8c8c}.file-action-menu button img{width:22px;height:22px;object-fit:contain;flex:0 0 22px}.menu-pop{animation:fileMenuPop .22s cubic-bezier(.22,1,.36,1) both}@keyframes fileMenuPop{0%{transform:scale(.9);opacity:0}65%{transform:scale(1.035);opacity:1}100%{transform:scale(1);opacity:1}}

.select-upload-box{width:min(680px,100%);min-height:380px;margin:20px auto 0;border:1px solid #2b1741;border-radius:22px;background:#0a130d;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px}.file-picker-trigger{width:150px;height:150px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;border-radius:28px}.file-picker-trigger img{width:115px;height:115px;object-fit:contain;display:block}.select-upload-label{margin-top:14px;color:#cdb8d8;font-size:17px;font-weight:700}.upload-status{min-height:24px;margin-top:15px;color:#a8b5ac;font-size:13px;text-align:center}.select-upload-box .file-picker-trigger{animation:none}

.account-page-card{max-width:760px;margin:0 auto}.account-identity{display:flex;align-items:center;gap:18px;margin-bottom:24px}.account-avatar-wrap{position:relative;width:82px;height:82px;flex:0 0 82px;border-radius:50%;overflow:hidden;background:#0d1910;border:1px solid #285b31;display:grid;place-items:center;color:#6ee67a}.account-empty-icon{width:48px;height:48px}.account-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.account-avatar.is-empty{display:none}.account-identity-text{display:flex;flex-direction:column;gap:4px}.account-identity-text strong{font-size:23px}.account-identity-text small{color:#819187;word-break:break-all}.account-setting{padding-top:20px;border-top:1px solid #18331e}.account-setting h3{margin:0 0 8px}.account-action{width:100%;margin-top:10px;border:1px solid #31583a;background:#101c13;color:#eaf1ec;padding:13px 16px;border-radius:10px;cursor:pointer;font-family:Cairo,Tahoma,Arial,sans-serif;font-weight:700}.account-save-name{background:#43db58;color:#031006;border-color:#43db58}.account-logout{color:#ff8c8c;border-color:#5d3333}.account-name-hint{color:#829287;font-size:12px;margin:4px 0}.account-name-hint.invalid{color:#ff7777}

/* Keep all old page content inert/hidden if a cached DOM or browser extension restores it. */
#page-mods,#page-packs,#page-versions,#page-maps,#page-skins,#page-bookmarks,#page-downloads,#page-admin{display:none!important}

@media(max-width:800px){.side-logo{height:76px}.side-logo img{width:185px}.page-section-title{font-size:30px!important}.select-upload-box{min-height:330px}.file-picker-trigger{width:130px;height:130px}.file-picker-trigger img{width:100px;height:100px}.files-empty{min-height:260px}.user-file-card{min-height:76px}.user-file-type{width:44px;height:44px;flex-basis:44px}.account-page-card{padding:20px}.auth-logo img{width:min(280px,78vw)}}

/* V189: supplied logo/icon assets + Lists header. No layout/animation changes. */
.side-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:72px !important;
  margin:0 0 20px !important;
}
.side-lists-title{
  display:block !important;
  color:#eef5ef !important;
  font-family:Cairo,Tahoma,Arial,sans-serif !important;
  font-size:34px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:1px !important;
  user-select:none !important;
  pointer-events:none !important;
}
.side .nav.my-files .nav-icon img,
.side .nav.select-files .nav-icon img{
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
}
.side .nav.my-files .nav-icon{color:#5cec6b !important;}
.side .nav.select-files .nav-icon{color:#cf78ff !important;}
.side .nav.account .account-nav-icon{
  width:30px !important;
  height:30px !important;
  display:grid !important;
  place-items:center !important;
  color:#67d9ff !important;
}
.side .nav.account .account-nav-icon svg{
  width:30px !important;
  height:30px !important;
  display:block !important;
}
.side .nav.account.active,
.side .nav.account:hover{
  color:#67d9ff !important;
  background:#0b2d3b !important;
  border-right-color:#36c8ff !important;
}
.side .nav.my-files.active{color:#5cec6b !important;}
.side .nav.select-files.active{color:#cf78ff !important;}


/* ===== V190 — requested visual refinements only =====
   Keep all existing layout, drawer and animation logic intact. */
/* Larger supplied horizontal logo on the header and auth screen. */
.topbar .brand.brand-image {
  width: min(82vw, 330px) !important;
  height: 82px !important;
}
.topbar .brand.brand-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.auth-logo img {
  width: min(360px, 84vw) !important;
  max-height: 190px !important;
  object-fit: contain !important;
}
@media (max-width:800px) {
  .topbar .brand.brand-image {
    width: min(76vw, 300px) !important;
    height: 78px !important;
  }
  .auth-logo img {
    width: min(350px, 86vw) !important;
    max-height: 185px !important;
  }
}
/* My Files empty state uses the exact same folder icon as the sidebar. */
.files-empty img {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
}
/* Smaller Select Files icon, slightly lower, with the existing tap-pop animation. */
.file-picker-trigger {
  width: 120px !important;
  height: 120px !important;
  transform: translateY(10px);
}
.file-picker-trigger img {
  width: 82px !important;
  height: 82px !important;
}
.select-upload-label {
  margin-top: 24px !important;
}
.select-upload-box .file-picker-trigger.tap-pop {
  animation: universalTapPop .34s cubic-bezier(.22,1,.36,1) both !important;
}
@media (max-width:800px) {
  .file-picker-trigger {
    width: 105px !important;
    height: 105px !important;
    transform: translateY(10px);
  }
  .file-picker-trigger img {
    width: 72px !important;
    height: 72px !important;
  }
}

/* ===== V191 — final requested file-manager refinements ===== */
/* Header logo: normal compact size, anchored to the left on the main site. */
.topbar .brand.brand-image{
  width:min(54vw,230px) !important;
  height:58px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  justify-content:flex-start !important;
}
.topbar .brand.brand-image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:left center !important;
}
/* Login logo: same normal size, centered inside the login panel. */
.auth-logo{
  text-align:center !important;
}
.auth-logo img{
  display:block !important;
  width:min(270px,72vw) !important;
  max-height:130px !important;
  margin:0 auto !important;
  object-fit:contain !important;
  object-position:center !important;
}
/* Lists uses the supplied stylized wordmark with its black background removed. */
.side-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:72px !important;
  margin:0 0 20px !important;
}
.side-logo img{
  display:block !important;
  width:min(155px,82%) !important;
  height:auto !important;
  max-height:54px !important;
  object-fit:contain !important;
  object-position:center !important;
  mix-blend-mode:normal !important;
}
/* Keep the drawer items exactly as three entries; no legacy item is restored. */
.side .nav.my-files,
.side .nav.select-files,
.side .nav.account{
  flex-direction:row-reverse !important;
  justify-content:space-between !important;
  text-align:left !important;
}
.side .nav.my-files .nav-icon,
.side .nav.select-files .nav-icon,
.side .nav.account .account-nav-icon{
  order:2 !important;
}
.side .nav.my-files > span:last-child,
.side .nav.select-files > span:last-child,
.side .nav.account > span:last-child{
  order:1 !important;
}
/* My Files cards: file name on the left, three-dot menu on the right. */
.user-file-card{
  direction:ltr !important;
}
.user-file-main{
  direction:ltr !important;
  order:1 !important;
}
.file-menu-btn{
  order:2 !important;
}
.user-file-info{
  text-align:left !important;
}
.file-menu-btn:active{transform:none !important;}
/* The export control stays visually fixed; its press animation is scale-only. */
.file-picker-trigger{
  transform:none !important;
  will-change:transform;
  position:relative;
  z-index:1;
}
.file-picker-trigger.tap-pop{
  animation:uploadIconPress .34s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes uploadIconPress{
  0%{transform:scale(1)}
  34%{transform:scale(.92)}
  62%{transform:scale(1.04)}
  82%{transform:scale(.985)}
  100%{transform:scale(1)}
}
/* Upload information starts at the top of the box. */
.select-upload-box{
  justify-content:flex-start !important;
  position:relative !important;
  padding:24px !important;
}
.selected-file-info{
  width:100% !important;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}
.selected-file-info.hidden{display:none !important;}
.selected-file-name{
  width:100%;
  color:#eef5ef;
  font-size:17px;
  line-height:1.5;
  font-weight:800;
  text-align:left;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.upload-progress{
  width:100%;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#17251a;
  border:1px solid #28472e;
}
.upload-progress-bar{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:#55e667;
  transition:width .12s linear;
}
.upload-result-row{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  direction:ltr;
}
.upload-status{
  min-height:24px;
  margin:0 !important;
  flex:1 1 auto;
  color:#a8b5ac;
  font-size:14px;
  font-weight:700;
  text-align:left !important;
}
.go-my-files{
  flex:0 0 auto;
  border:1px solid #315b39;
  background:#102018;
  color:#63e86f;
  border-radius:10px;
  padding:9px 14px;
  font-family:Cairo,Tahoma,Arial,sans-serif !important;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.go-my-files:hover{background:#14351d;border-color:#4b9d59;}
.go-my-files:active{transform:none !important;}
.go-my-files.tap-pop{animation:goFilesPress .34s cubic-bezier(.22,1,.36,1) both !important;}
@keyframes goFilesPress{
  0%{transform:scale(1)}
  34%{transform:scale(.94)}
  62%{transform:scale(1.04)}
  82%{transform:scale(.985)}
  100%{transform:scale(1)}
}
.select-upload-box .file-picker-trigger{
  margin-top:auto !important;
}
.select-upload-label{
  margin-top:14px !important;
}
@media(max-width:800px){
  .topbar .brand.brand-image{
    width:min(58vw,225px) !important;
    height:54px !important;
  }
  .auth-logo img{
    width:min(255px,74vw) !important;
    max-height:120px !important;
  }
  .side-logo img{width:min(145px,82%) !important;max-height:50px !important;}
  .select-upload-box{min-height:330px !important;padding:20px !important;}
  .selected-file-name{font-size:16px;}
  .upload-progress{height:7px;}
  .go-my-files{padding:8px 11px;font-size:12px;}
}