:root{
  color-scheme:dark;
  /* ---- MBSM design system (2026 redesign) ---- */
  --bg:#0b0b0f;
  --bg2:#0b0b0f;
  --panel:#121217;
  --panel2:#18181f;
  --elevated:#18181f;
  --border:#27272f;
  --border-soft:#1e1e26;

  --primary:#7c3aed;
  --primary-hover:#8b5cf6;
  --accent:#a855f7;

  /* Alias de compatibilidad con el resto de style.css / módulos */
  --purple:#a855f7;
  --purple-dark:#7c3aed;

  --success:#22c55e;
  --warning:#f59e0b;
  --red:#ef4444;
  --yellow:#f59e0b;
  --info:#3b82f6;

  --text:#f4f4f5;
  --muted:#a1a1aa;

  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:14px;

  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 2px 10px rgba(0,0,0,.28);

  --sidebar-w:248px;
  --sidebar-w-collapsed:72px;
  --topbar-mini-h:56px;
  --bottom-nav-h:60px;
  --panel-rgb:11,11,15;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes floatBlock{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(6deg); }
}

.reveal{
  opacity:0;
  transform:translateY(24px);
}

.reveal.in-view{
  animation:fadeInUp .7s ease forwards;
}

html{
  scroll-behavior:smooth;
}

body{
  position:relative;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  line-height:1.6;
  overflow-x:hidden;
}

/* El grid/glow decorativo original queda apagado por defecto: una
   herramienta profesional no necesita fondo animado permanente.
   Se conserva muy atenuado solo detrás del hero de Home. */
body::before{
  content:"";
  position:fixed;
  inset:-50px;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(124,58,237,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.035) 1px, transparent 1px);
  background-size:42px 42px;
}

body::after{
  content:"";
  position:fixed;
  inset:-30% ;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle, rgba(124,58,237,.06), transparent 45%);
}

@keyframes bgDrift{
  from{ background-position:0 0, 0 0; }
  to{ background-position:420px 420px, 420px 420px; }
}

@keyframes bgGlowShift{
  0%,100%{ transform:translate(-10%,-10%); }
  50%{ transform:translate(30%,20%); }
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(1200px,92%);
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(10px);
  background:rgba(15,16,17,.85);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-ui);
}

.brand-mbsm{
  font-size:20px;
  letter-spacing:1px;
  color:#f4f6f2;
  text-shadow:
    2px 0 0 #1c1e21,
    -2px 0 0 #1c1e21,
    0 2px 0 #1c1e21,
    0 -2px 0 #1c1e21,
    3px 3px 0 rgba(0,0,0,.55);
}

.brand-accent{
  color:var(--purple);
}

.nav-links{
  display:flex;
  gap:28px;
}

.nav-links a{
  color:var(--muted);
  font-weight:600;
  transition:.2s;
}

.nav-links a:hover{
  color:#fff;
}

.lang-switch{
  display:flex;
  gap:4px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:4px;
}

.lang-btn{
  border:none;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  font-size:12px;
  letter-spacing:.5px;
  padding:6px 12px;
  border-radius:7px;
  cursor:pointer;
  transition:.15s;
}

.lang-btn:hover{
  color:var(--text);
}

.lang-btn.active{
  background:var(--purple);
  color:#101210;
  box-shadow:0 3px 0 var(--purple-dark);
}

.hero-inline{
  position:relative;
  overflow:hidden;
  padding:88px 0 72px;
}

.hero-inline::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(168,85,247,.12),transparent 35%),
    radial-gradient(circle at 80% 30%,rgba(168,85,247,.08),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 45%);
  pointer-events:none;
}

.hero-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.hero-particles::before,
.hero-particles::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  background:radial-gradient(circle,var(--purple) 0%,transparent 70%);
  opacity:.16;
  border-radius:50%;
  filter:blur(6px);
  animation:floatBlock 7s ease-in-out infinite;
}

.hero-particles::before{
  top:8%;
  left:6%;
  animation-delay:0s;
}

.hero-particles::after{
  top:55%;
  left:86%;
  width:90px;
  height:90px;
  animation-delay:2.2s;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.32)),
    linear-gradient(0deg,rgba(0,0,0,.18),rgba(0,0,0,.02));
}

.hero-content{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  align-items:center;
}

.hero-text h1{
  font-family:var(--font-ui);
  font-size:34px;
  line-height:1.35;
  margin-bottom:22px;
}

.hero-text p{
  color:var(--muted);
  font-size:18px;
  max-width:640px;
}

.hero-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:30px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 24px;
  border-radius:12px;
  font-weight:800;
  transition:.15s;
  cursor:pointer;
  border:none;
}

.btn-primary{
  background:var(--purple);
  color:#101210;
  box-shadow:0 6px 0 var(--purple-dark);
}

.btn-primary:hover{
  transform:translateY(2px);
  box-shadow:0 4px 0 var(--purple-dark);
}

.btn-secondary{
  background:#2a2d32;
  color:#f2f3f4;
  box-shadow:0 6px 0 #1d2024;
}

.btn-secondary:hover{
  transform:translateY(2px);
  box-shadow:0 4px 0 #1d2024;
}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 6px 0 #0a0a0b;
}

.btn-ghost:hover{
  transform:translateY(2px);
  box-shadow:0 4px 0 #0a0a0b;
  border-color:var(--purple);
  color:var(--purple);
}

.hero-card{
  background:linear-gradient(180deg,#202329,#191b1f);
  border:1px solid var(--border);
  border-radius:20px;
  padding:26px;
  box-shadow:var(--shadow);
}

.pixel-title{
  font-family:var(--font-ui);
  font-size:14px;
  color:var(--text);
  margin-bottom:18px;
}

.hero-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:22px;
}

.mini-card{
  background:var(--panel);
  border:1px solid #2e3239;
  border-radius:16px;
  padding:18px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mini-number{
  font-family:var(--font-ui);
  font-size:18px;
  color:var(--text);
}

.mini-label{
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
}

.section{
  padding:72px 0;
  /* Compensa el header sticky: sin esto, scrollIntoView() (usado al
     cambiar de pestaña) deja el título tapado debajo del nav. */
  scroll-margin-top:88px;
}

.section.alt{
  background:linear-gradient(180deg,var(--panel),var(--bg));
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.section-title{
  font-family:var(--font-ui);
  font-size:18px;
  margin-bottom:28px;
}
.section-title + .section-subtitle{
  margin-top:-20px;
}
.section-subtitle{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.55;
  max-width:640px;
  margin:0 0 24px;
}

.validator-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
}

.card{
  background:linear-gradient(180deg,#1f2227,#191b1f);
  border:1px solid var(--border);
  border-radius:22px;
  padding:24px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.check-card:hover,
.mini-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  border-color:var(--purple);
}

.dropzone{
  border:2px dashed #505560;
  border-radius:18px;
  padding:42px 24px;
  text-align:center;
  transition:.2s;
  background:linear-gradient(180deg,#252932,#1d2027);
}

.dropzone.drag{
  border-color:var(--purple);
  background:var(--elevated);
}

.drop-icon{
  width:64px;
  height:64px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:var(--panel);
  border:1px solid var(--border);
  font-size:28px;
}

.dropzone h3{
  font-family:var(--font-ui);
  font-size:16px;
  margin-bottom:12px;
}

.dropzone p{
  color:var(--muted);
  max-width:560px;
  margin:0 auto 20px;
}

.file-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:12px;
  background:var(--purple);
  color:#101210;
  font-weight:800;
  box-shadow:0 6px 0 var(--purple-dark);
  cursor:pointer;
}

.selected-file{
  margin-top:16px;
  color:var(--muted);
  font-size:14px;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.stat-box{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
}

.stat-number{
  font-family:var(--font-ui);
  font-size:18px;
}

.stat-number.error{
  color:var(--red);
}

.stat-number.warning{
  color:var(--yellow);
}

.stat-number.success{
  color:var(--success);
}

.stat-label{
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
}

.summary-info{
  margin-top:22px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.results-card{
  margin-top:24px;
}

.results-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.results-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.option-inline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
  margin-bottom:18px;
  cursor:pointer;
}

.option-inline input[type="checkbox"]{
  margin-top:3px;
  flex-shrink:0;
}

.info-btn{
  width:20px;
  height:20px;
  min-width:20px;
  border-radius:50%;
  border:1px solid #454b54;
  background:#202327;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
  padding:0;
}

.info-btn:hover{
  color:#101210;
  background:var(--purple);
  border-color:var(--purple);
}

.info-popover{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(8,9,10,.65);
  padding:20px;
}

.info-popover[hidden]{
  display:none;
}

.info-popover-content{
  position:relative;
  max-width:420px;
  width:100%;
  background:linear-gradient(180deg,#1f2227,#191b1f);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}

.info-popover-content h4{
  margin-bottom:10px;
  padding-right:24px;
}

.info-popover-content p{
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

.info-popover-close{
  position:absolute;
  top:14px;
  right:14px;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid #454b54;
  background:#202327;
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
  transition:.15s;
}

.info-popover-close:hover{
  color:var(--text);
  border-color:var(--red);
}

/* ---------- Sub-tabs (Classic Skins) ---------- */

.sub-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0 24px;
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
}

.sub-tab-btn{
  background:transparent;
  border:1px solid transparent;
  color:var(--muted);
  font-weight:600;
  font-size:13px;
  padding:9px 16px;
  border-radius:8px;
  cursor:pointer;
  transition:.15s;
}

.sub-tab-btn:hover{
  color:#fff;
}

.sub-tab-btn.active{
  background:rgba(168,85,247,.14);
  color:var(--purple);
  border-color:transparent;
  font-weight:700;
}

/* ---------- Module window (an "app window" look) ---------- */

.module-window{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
  margin:24px 0;
}

.module-window-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background:var(--panel2);
  border-bottom:1px solid var(--border);
}

.module-window-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#3a3d42;
  flex-shrink:0;
}

.module-window-title{
  margin-left:8px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2px;
}

.module-window-body{
  padding:28px;
}

@media (max-width:640px){
  .module-window-body{ padding:20px 16px; }
}

.sub-tab-panel,
.import-panel{
  display:none;
}

.sub-tab-panel.active-subtab,
.import-panel.active-subtab{
  display:block;
}

/* ---------- Skinpack Maker ---------- */

.maker-card{
  margin-bottom:20px;
}

.maker-field{
  margin-bottom:16px;
}

.maker-field label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}

.maker-input{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 14px;
  color:var(--text);
  font-size:14px;
  font-family:inherit;
}

.maker-input:focus{
  outline:none;
  border-color:var(--purple);
}

.maker-inline-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.maker-inline-form .maker-input{
  flex:1;
  min-width:200px;
}

.maker-hint{
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
  line-height:1.6;
}

.maker-hint code{
  background:#101113;
  border:1px solid #262a30;
  border-radius:5px;
  padding:1px 5px;
  font-size:11px;
}

/* ---------- Selector de plataforma (Java / Bedrock) ---------- */

.maker-platform-toggle{
  display:inline-flex;
  background:#101113;
  border:1px solid #262a30;
  border-radius:999px;
  padding:3px;
  margin-bottom:14px;
  gap:2px;
}

.maker-platform-btn{
  background:transparent;
  border:none;
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  padding:7px 18px;
  border-radius:999px;
  cursor:pointer;
  transition:.15s;
}

.maker-platform-btn:hover{
  color:var(--text);
}

.maker-platform-btn.active{
  background:var(--purple);
  color:#101210;
}

/* ---------- Selector de colores y formato ---------- */

.maker-codes{
  background:#101113;
  border:1px solid #262a30;
  border-radius:10px;
  padding:14px;
  margin-bottom:16px;
}

.maker-codes-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.maker-codes-row + .maker-codes-row{
  margin-top:12px;
}

.maker-codes-label{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  min-width:52px;
}

.maker-swatch-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:1;
}

.maker-swatch{
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  cursor:pointer;
  padding:0;
  transition:transform .12s ease, border-color .12s ease;
}

.maker-swatch:hover,
.maker-swatch:focus-visible{
  transform:scale(1.18);
  border-color:#fff;
  outline:none;
}

.maker-format-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:1;
}

.maker-format-btn{
  min-width:30px;
  height:26px;
  padding:0 8px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  transition:.15s;
}

.maker-format-btn:hover,
.maker-format-btn:focus-visible{
  border-color:var(--purple);
  color:var(--purple);
  outline:none;
}

.maker-status{
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
}

.maker-status.success{ color:var(--purple); }
.maker-status.error{ color:var(--red); }

.maker-preview{
  background:#101113;
  border:1px solid #262a30;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:16px;
  min-height:20px;
  font-weight:700;
}

.maker-icon-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.maker-icon-preview{
  width:56px;
  height:56px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  overflow:hidden;
}

.maker-icon-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:pixelated;
}

.maker-skins-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}

.maker-empty{
  color:var(--muted);
  font-size:13px;
  font-style:italic;
}

.maker-skin-item{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  text-align:center;
}

.maker-skin-item img{
  width:48px;
  height:48px;
  image-rendering:pixelated;
  margin:0 auto 8px;
  border-radius:6px;
  background:#101113;
}

.maker-skin-item .maker-skin-name{
  font-size:12px;
  font-weight:700;
  margin-bottom:6px;
  word-break:break-word;
}

.maker-skin-name-input{
  width:100%;
  background:#101113;
  border:1px solid #262a30;
  border-radius:6px;
  padding:5px 6px;
  color:var(--text);
  font-family:inherit;
  text-align:center;
}

.maker-skin-name-input:focus{
  outline:none;
  border-color:var(--purple);
}

.maker-skin-model-select{
  width:100%;
  background:#101113;
  border:1px solid #262a30;
  border-radius:6px;
  padding:5px 6px;
  color:var(--text);
  font-family:inherit;
  font-size:11px;
  margin-bottom:8px;
  cursor:pointer;
}

.maker-skin-model-select:focus{
  outline:none;
  border-color:var(--purple);
}

.maker-skin-remove{
  background:none;
  border:1px solid #454b54;
  color:var(--muted);
  border-radius:8px;
  font-size:11px;
  padding:4px 10px;
  cursor:pointer;
  transition:.15s;
}

.maker-skin-remove:hover{
  color:var(--text);
  border-color:var(--red);
}

/* ---------- Home tab cards ---------- */

.home-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:28px;
}

.home-card{
  display:block;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.home-card:hover{
  transform:translateY(-4px);
  border-color:var(--purple);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}

.home-card-icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:rgba(168,85,247,.12);
  border:1px solid rgba(168,85,247,.25);
  border-radius:12px;
  margin-bottom:16px;
}

.home-card h3{
  margin-bottom:8px;
}

.home-card p{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.result-placeholder{
  border:1px dashed #3b3f47;
  border-radius:18px;
  padding:40px 24px;
  text-align:center;
  color:var(--muted);
}

/* ---------- Features / landing section within Home ---------- */

.home-features{
  margin-top:76px;
}

.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 44px;
}

.section-head h2{
  font-size:clamp(22px,3vw,30px);
  margin:14px 0 12px;
  line-height:1.3;
}

.section-head p{
  color:var(--muted);
  font-size:15px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--purple);
  letter-spacing:1px;
}

.eyebrow::before{
  content:"";
  width:7px;
  height:7px;
  background:var(--purple);
  border-radius:1px;
  box-shadow:0 0 10px var(--purple);
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
}

.feature-card{
  display:block;
  position:relative;
  overflow:hidden;
  padding:26px 22px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}

.feature-card .tag{
  font-size:11px;
  letter-spacing:1px;
  font-weight:700;
  margin-bottom:14px;
  display:inline-block;
  padding:4px 9px;
  border-radius:5px;
}

.feature-card h3{
  font-size:17px;
  margin-bottom:10px;
  line-height:1.3;
}

.feature-card p{
  color:var(--muted);
  font-size:13.5px;
}

.fc-validator .tag{ background:rgba(168,85,247,.15); color:var(--purple); border-color:var(--purple); }
.fc-validator:hover{ border-color:var(--purple); }

.fc-viewer .tag{ background:rgba(124,155,255,.15); color:var(--info); }
.fc-viewer:hover{ border-color:var(--info); }

.fc-fixer .tag{ background:rgba(255,90,90,.15); color:var(--red); }
.fc-fixer:hover{ border-color:var(--red); }

.fc-maker .tag{ background:rgba(255,216,90,.15); color:var(--yellow); }
.fc-maker:hover{ border-color:var(--yellow); }

.fc-objskin .tag{ background:rgba(124,155,255,.15); color:var(--info); }
.fc-objskin:hover{ border-color:var(--info); }

.fc-skincreator .tag{ background:rgba(74,222,128,.15); color:var(--success); }
.fc-skincreator:hover{ border-color:var(--success); }

.perks{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.perk{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
}

.perk .ico{
  width:38px;
  height:38px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  font-size:16px;
}

.ico-purple{ background:rgba(168,85,247,.15); color:var(--purple); }
.ico-info{ background:rgba(124,155,255,.15); color:var(--info); }
.ico-yellow{ background:rgba(255,216,90,.15); color:var(--yellow); }

.perk h4{
  font-size:15px;
  margin-bottom:8px;
}

.perk p{
  color:var(--muted);
  font-size:13px;
}

.oss{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}

.oss h3{
  font-size:20px;
  margin-bottom:10px;
}

.oss p{
  color:var(--muted);
  max-width:46ch;
}

.final-cta{
  text-align:center;
  padding:80px 0 40px;
}

.final-cta h2{
  font-size:clamp(24px,3.6vw,34px);
  margin-bottom:14px;
}

.final-cta p{
  color:var(--muted);
  margin-bottom:28px;
}

.final-cta .btn-primary{
  background:var(--purple);
  color:#1c0b30;
  box-shadow:0 6px 0 var(--purple-dark);
}

.final-cta .btn-primary:hover{
  box-shadow:0 4px 0 var(--purple-dark);
}

@media (max-width:900px){
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .perks{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .feature-grid{ grid-template-columns:1fr; }
  .oss{ flex-direction:column; align-items:flex-start; text-align:left; }
}

.placeholder-icon{
  width:64px;
  height:64px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:var(--panel);
  border:1px solid var(--border);
  font-size:30px;
}

.result-placeholder h4{
  color:var(--text);
  margin-bottom:8px;
}

.result-item{
  background:var(--panel);
  border:1px solid var(--border);
  border-left:3px solid var(--muted);
  border-radius:var(--radius);
  padding:14px 16px 14px 42px;
  position:relative;
}

.result-item::before{
  content:"•";
  position:absolute;
  left:14px;
  top:14px;
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
  border-radius:50%;
  color:#fff;
  background:var(--muted);
}

.result-item.success{
  border-left-color:var(--success);
}
.result-item.success::before{ content:"✓"; background:var(--success); }

.result-item.warning{
  border-left-color:var(--warning);
}
.result-item.warning::before{ content:"!"; background:var(--warning); }

.result-item.error{
  border-left-color:var(--red);
}
.result-item.error::before{ content:"✕"; background:var(--red); }

.result-item.info{
  border-left-color:var(--info);
}
.result-item.info::before{ content:"i"; background:var(--info); }

/* ---------- Grouped per-skin results (collapsible) ----------
   One <details> per skin instead of a long flat list of cards --
   keeps a multi-skin pack's results short on mobile: skins with no
   issues collapse to a single line, skins with problems open by
   default so they aren't missed. */
.result-skin-group{
  background:var(--panel);
  border:1px solid var(--border);
  border-left:3px solid var(--muted);
  border-radius:var(--radius);
  overflow:hidden;
}
.result-skin-group.has-issue{ border-left-color:var(--warning); }
.result-skin-group.all-ok{ border-left-color:var(--success); }

.result-skin-group-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
  font-size:13.5px;
  min-height:22px; /* keeps the tap target comfortable on mobile */
}
.result-skin-group-summary::-webkit-details-marker{ display:none; }
.result-skin-group-summary::marker{ content:""; }
.result-skin-group-summary::after{
  content:"▾";
  color:var(--muted);
  transition:transform .15s ease;
  flex-shrink:0;
}
.result-skin-group[open] > .result-skin-group-summary::after{ transform:rotate(180deg); }

.result-skin-group-name{
  font-weight:700;
  color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.result-skin-group-status{
  font-size:12px;
  color:var(--muted);
  flex-shrink:0;
}
.result-skin-group.has-issue .result-skin-group-status{ color:var(--warning); }
.result-skin-group.all-ok .result-skin-group-status{ color:var(--success); }

.result-skin-group-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 14px 14px;
}
.result-skin-group-body .result-item{
  border-radius:var(--radius-sm);
}

.result-item h4{
  margin-bottom:4px;
  font-size:13.5px;
}

.result-item p{
  color:var(--muted);
  font-size:12.5px;
}

.checks-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* ---------- Panel de correcciones ---------- */

.fix-card{
  margin-top:24px;
}

.fix-subtitle{
  color:var(--muted);
  margin-bottom:20px;
}

.fix-options-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-bottom:24px;
}

.fix-option{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  cursor:pointer;
  transition:.15s;
}

.fix-option:hover{
  border-color:var(--purple);
  background:var(--panel2);
}

.fix-option input[type="checkbox"]{
  margin-top:4px;
  flex-shrink:0;
  width:18px;
  height:18px;
  accent-color:var(--purple);
  cursor:pointer;
}

.fix-option-icon{
  font-size:22px;
  flex-shrink:0;
  line-height:1;
}

.fix-option-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.fix-option-text strong{
  color:var(--text);
  font-size:14px;
}

.fix-option-text small{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.fix-repair-btn{
  width:100%;
}

/* ---------- Pack info banner ---------- */

.pack-info-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:linear-gradient(135deg,var(--elevated),var(--panel));
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px 22px;
  margin-bottom:18px;
}

.pack-info-text{
  min-width:0;
}

.pack-info-name{
  font-family:var(--font-ui);
  font-size:14px;
  color:var(--text);
  margin-bottom:10px;
  word-break:break-word;
}

.pack-info-description{
  color:var(--muted);
  font-size:14px;
  word-break:break-word;
}

.pack-info-icon{
  flex-shrink:0;
  width:64px;
  height:64px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#101113;
}

.pack-info-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pack-icon-default{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:30px;
  background:var(--panel);
}
.pack-icon-default img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- Preview de skins ---------- */

.skins-preview-card{
  margin-top:24px;
}

.skins-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
  margin-top:16px;
}

.skin-preview-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}

.skin-preview-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.skin-preview-card-warning{
  border:1px solid var(--yellow);
  box-shadow:0 0 0 1px rgba(255,216,90,.35), 0 0 14px rgba(255,216,90,.15);
}

.skin-preview-displayname{
  font-weight:800;
  font-size:15px;
  margin-bottom:10px;
  word-break:break-word;
}

.skin-preview-missing{
  color:var(--yellow);
  font-weight:400;
  font-style:italic;
}

.skin-preview-row{
  font-size:13px;
  color:var(--muted);
  margin-bottom:4px;
  word-break:break-word;
}

.skin-preview-row span{
  color:var(--text);
  font-weight:600;
  margin-right:4px;
}

.skin-preview-animations{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
}

.skin-preview-animations summary{
  cursor:pointer;
  list-style:none;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:6px;
  user-select:none;
}

.skin-preview-animations summary::-webkit-details-marker{
  display:none;
}

.skin-preview-animations summary::before{
  content:"▶";
  font-size:9px;
  color:var(--purple);
  transition:transform .15s;
}

.skin-preview-animations[open] summary::before{
  transform:rotate(90deg);
}

.skin-preview-animations summary:hover{
  color:var(--text);
}

.skin-preview-animations-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:8px;
}

.skin-preview-anim-row{
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.anim-arrow{
  color:var(--purple);
}

.skin-preview-anim-row code{
  background:#101113;
  border:1px solid #262a30;
  border-radius:6px;
  padding:1px 6px;
  font-size:11px;
  color:#d8dde2;
}

.mc-obfuscated{
  font-family:monospace;
  letter-spacing:1px;
}

.check-card h3{
  margin-bottom:10px;
}

.check-card p{
  color:var(--muted);
}

.about-layout{
  display:flex;
  justify-content:center;
}

.about-text{
  max-width:760px;
  text-align:center;
}

.about-text .section-title{
  text-align:center;
}

.about-layout p{
  color:var(--muted);
  margin-bottom:16px;
  font-size:16px;
  line-height:1.7;
}

.checks-section{
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.06);
}

.footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:30px 0;
  background:#0d0e10;
}

.footer-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.footer-brand{
  font-family:var(--font-ui);
  font-size:12px;
}

.footer-text{
  color:var(--muted);
  font-size:14px;
}

/* ---------- Tab system ---------- */

.nav-links .tab-link{
  position:relative;
  padding-bottom:4px;
}

.nav-links .tab-link.active{
  color:#fff;
}

.nav-links .tab-link.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:3px;
  border-radius:3px;
  background:var(--purple);
  box-shadow:0 0 8px rgba(168,85,247,.6);
}

.tab-section{
  display:none;
}

.tab-section.active-tab{
  display:block;
}

/* ---------- Visor de skin packs ---------- */

.viewer-intro{
  color:var(--muted);
  max-width:720px;
  margin-bottom:24px;
  font-size:15px;
  line-height:1.6;
}

.viewer-grid{
  margin-top:24px;
}

.viewer-skin-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}

.viewer-skin-card:hover{
  border-color:var(--purple);
}

.viewer-skin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  gap:10px;
}

.viewer-skin-name{
  font-weight:800;
  font-size:15px;
  word-break:break-word;
}

.viewer-skin-model{
  font-size:12px;
  font-weight:700;
  color:var(--purple);
  background:rgba(168,85,247,.12);
  border:1px solid rgba(168,85,247,.35);
  border-radius:8px;
  padding:3px 8px;
  white-space:nowrap;
}

.viewer-skin-actions{
  display:none;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}

.viewer-skin-card.expanded .viewer-skin-actions{
  display:flex;
}

.viewer-skin-actions .btn{
  font-size:12px;
  padding:8px 12px;
}

.viewer-skin-content{
  margin-top:14px;
}

.viewer-skin-content:empty{
  margin-top:0;
}

.viewer-texture-img{
  width:100%;
  max-width:220px;
  margin:0 auto;
  image-rendering:pixelated;
  border:1px solid var(--border);
  border-radius:10px;
  background:#101113;
}

.viewer-3d-canvas{
  width:100%;
  height:280px;
  border-radius:10px;
  border:1px solid var(--border);
  background:radial-gradient(circle at center, #22252a, #101113);
  touch-action:none;
  cursor:grab;
}

.viewer-3d-canvas:active{
  cursor:grabbing;
}

.viewer-empty{
  color:var(--muted);
  font-size:13px;
  font-style:italic;
}

@media (max-width:980px){

  .section{
    /* The nav wraps into several rows on mobile (taller than on
       desktop), so this needs extra margin or scrollIntoView() would
       leave the heading hidden underneath it. */
    scroll-margin-top:170px;
  }

  .hero-content,
  .validator-layout,
  .about-layout{
    grid-template-columns:1fr;
  }

  .checks-grid{
    grid-template-columns:1fr;
  }

  .home-cards{
    grid-template-columns:repeat(2,1fr);
  }

  .hero-inline{
    padding-top:72px;
  }

  .hero-text h1{
    font-size:26px;
  }

  .results-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:18px 0;
  }

  .nav-links{
    flex-wrap:wrap;
    gap:16px;
  }

  .lang-switch{
    align-self:flex-start;
  }

  .fix-options-grid{
    grid-template-columns:1fr;
  }

  .skins-preview-grid{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  }

  .viewer-skin-header{
    flex-wrap:wrap;
  }

  .viewer-3d-canvas{
    height:220px;
  }

}

@media (max-width:640px){

  .hero-text h1{
    font-size:20px;
  }

  .section-title{
    font-size:15px;
  }

  .pixel-title{
    font-size:12px;
  }

  .stats-grid{
    grid-template-columns:1fr;
  }

  .home-cards{
    grid-template-columns:1fr;
  }

  .hero-mini-grid{
    grid-template-columns:1fr;
  }

  .container{
    width:min(1200px,94%);
  }

  .section{
    padding:48px 0;
  }

  .card{
    padding:18px;
    border-radius:16px;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:stretch;
  }

  .btn{
    width:100%;
  }

  .hero-buttons .btn{
    width:100%;
  }

  .dropzone{
    padding:28px 16px;
  }

  .dropzone h3{
    font-size:13px;
  }

  .fix-option{
    padding:12px;
  }

  .pack-info-banner{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }

  .pack-info-icon{
    width:56px;
    height:56px;
  }

  .skins-preview-grid{
    grid-template-columns:1fr;
  }

  .footer-content{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }

  .option-inline{
    font-size:12px;
  }

  .brand-mbsm{
    font-size:16px;
  }

  .about-text{
    max-width:100%;
  }

  /* ---------- Skinpack Maker on mobile ---------- */

  .maker-skins-list{
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:10px;
  }

  .maker-icon-row{
    flex-wrap:wrap;
  }

  .maker-inline-form{
    flex-direction:column;
  }

  .maker-inline-form .maker-input{
    min-width:0;
  }

  /* Los campos de texto/select a menos de 16px hacen que iOS Safari
     haga zoom automático al enfocarlos; en móvil los subimos a 16px sin
     afectar el tamaño visual en escritorio. */
  .maker-input,
  .maker-skin-name-input,
  .maker-skin-model-select{
    font-size:16px;
  }

  /* ---------- Bigger touch targets ---------- */

  .info-btn{
    width:26px;
    height:26px;
    min-width:26px;
    font-size:13px;
  }

  .sub-tab-btn{
    padding:10px 14px;
    font-size:12px;
  }

  .fix-option{
    align-items:center;
  }

  .maker-skin-remove{
    padding:7px 12px;
    font-size:12px;
  }

  .maker-swatch{
    width:30px;
    height:30px;
  }

  .maker-format-btn{
    min-width:36px;
    height:32px;
  }

  .maker-platform-btn{
    padding:9px 20px;
  }

  /* ---------- Evitar desbordes horizontales ---------- */

  .result-item p,
  .result-item h4,
  .pack-info-name,
  .pack-info-description,
  .maker-skin-name-input{
    overflow-wrap:break-word;
    word-break:break-word;
  }

  .card{
    overflow-x:hidden;
  }

}
/* =========================================================================
   4D/5D Viewer (SkinGeo Viewer)
   Namespace CSS propio (prefijo "sg-") para no chocar con nada existente.
   Reutiliza exclusivamente las variables de color ya definidas en :root
   (--bg, --panel, --border, --purple, --purple-dark, --red, --yellow,
   --info, --text, --muted, --shadow) -- no se introduce ninguna paleta
   nueva.
   ========================================================================= */

.sg-viewer-layout{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:24px;
  margin-bottom:24px;
}

.sg-sidebar{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.sg-dropzone-compact{
  padding:16px 12px;
}
.sg-dropzone-compact .drop-icon{
  font-size:20px;
  margin-bottom:6px;
}
.sg-dz-hint{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.5;
  margin:4px 0 10px;
}

.sg-field-label{
  display:block;
  font-size:11px;
  letter-spacing:.6px;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:8px;
}

.sg-model-select{
  position:relative;
}

.sg-model-select-trigger{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  padding:9px 12px;
  border-radius:8px;
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
  text-align:left;
}
.sg-model-select-trigger:hover{ border-color:var(--purple); }

.sg-model-select-label{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sg-model-select-arrow{
  flex:0 0 auto;
  color:var(--muted);
  font-size:11px;
  transition:transform .15s;
}
.sg-model-select.open .sg-model-select-arrow{ transform:rotate(180deg); }

.sg-model-select-list{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  max-height:220px;
  overflow-y:auto;
  z-index:20;
  box-shadow:var(--shadow);
}
.sg-model-select.open .sg-model-select-list{ display:block; }

.sg-model-select-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  cursor:pointer;
  font-size:13px;
  color:var(--text);
}
.sg-model-select-item:hover{ background:rgba(168,85,247,.10); }
.sg-model-select-item.active{ background:rgba(168,85,247,.18); }

.sg-model-select-item-name{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sg-model-tag{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  padding:2px 7px;
  border-radius:6px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.3px;
  color:#fff;
}
.sg-model-tag-4d{ background:var(--info); }
.sg-model-tag-5d{ background:var(--purple); }
.sg-model-tag-other{ background:var(--muted); color:#1a1b1e; }

/* ---------- Tags de compatibilidad en las tarjetas del Home ----------
   Igual que el badge que ya muestra cada modelo individual (4D/5D) en
   el visor, pero a nivel de herramienta: de un vistazo se sabe con qué
   tipo de modelo trabaja cada una. */
.fc-compat-tag{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:6px;
  font-size:10px; font-weight:800; letter-spacing:.3px;
  color:#fff; margin-left:8px; vertical-align:middle;
}
.fc-compat-tag.compat-4d5d{ background:linear-gradient(90deg, var(--info), var(--purple)); }
.fc-compat-tag.compat-4d{ background:var(--info); }
.fc-compat-tag.compat-5d{ background:var(--purple); }
.fc-compat-tag.compat-classic{ background:var(--success); color:#0b1a0f; }

.fc-tag-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:12px;
}
.fc-tag-row .tag{ margin-bottom:0; }
.fc-compat-tag{ margin-left:0; }

.sg-controls{
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:opacity .15s;
}
.sg-controls.controls-disabled{
  opacity:.4;
  pointer-events:none;
}

.sg-stats-grid{
  grid-template-columns:1fr 1fr;
}

.sg-toggle-list{
  display:flex;
  flex-direction:column;
}
.sg-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
  color:var(--text);
}
.sg-toggle-row:last-child{ border-bottom:none; }

.sg-switch{
  width:36px; height:20px; border-radius:999px;
  background:var(--border);
  position:relative; cursor:pointer; flex-shrink:0;
  transition:.15s;
}
.sg-switch.on{ background:var(--purple); }
.sg-switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; transition:.15s;
}
.sg-switch.on::after{ transform:translateX(16px); }

.sg-log-box{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  font-size:11.5px;
  color:var(--muted);
  max-height:150px;
  overflow-y:auto;
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  line-height:1.6;
}
.sg-log-box .err{ color:var(--red); }
.sg-log-box .ok{ color:var(--purple); }
.sg-log-box .warn{ color:var(--yellow); }

.sg-viewport-card{
  padding:0;
  overflow:hidden;
  height:640px;
  display:flex;
}

.sg-viewer-host{
  position:relative;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 50% 20%, rgba(168,85,247,.06), transparent 60%),
    #0c0d10;
}

.sg-three-viewer{
  width:100%; height:100%; display:block;
}

.sg-blockbench-viewer{
  width:100%; height:100%;
  display:none;
  flex-direction:column;
  position:static;
}

.sg-viewport-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px;
  pointer-events:none;
  text-align:center;
  padding:20px;
}
.sg-overlay-ico{ font-size:34px; opacity:.5; }
.sg-viewport-overlay h2{ font-size:16px; color:var(--muted); font-weight:600; }
.sg-viewport-overlay p{ font-size:12.5px; color:var(--muted); max-width:38ch; }

.sg-viewport-toolbar{
  position:absolute; top:16px; right:16px;
  display:flex; gap:8px;
  z-index:5;
}
.sg-vt-btn{
  background:rgba(27,29,32,.85);
  border:1px solid var(--border);
  color:var(--text);
  width:34px; height:34px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:14px;
  backdrop-filter:blur(6px);
}
.sg-vt-btn:hover{ border-color:var(--purple); color:var(--purple); }
.sg-vt-btn.active{ border-color:var(--purple); color:var(--purple); background:rgba(168,85,247,.12); }

.sg-model-badge{
  position:absolute; bottom:16px; left:16px;
  background:rgba(27,29,32,.85);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  font-size:11.5px;
  color:var(--muted);
  backdrop-filter:blur(6px);
  max-width:60vw;
  z-index:5;
  pointer-events:none;
}
.sg-model-badge strong{ color:var(--text); }

/* ---------- panel de Blockbench Web embebido (clases generadas por
   blockbench.js -- se mantienen sin el prefijo "sg-" porque ya son
   suficientemente especificas ("bb-") y no chocan con nada de MBSM) ---------- */
.bb-frame-wrap{
  flex:1 1 0;
  min-height:200px;
  border-bottom:1px solid var(--border);
  background:#000;
}
.bb-frame{
  width:100%; height:100%; min-height:280px;
  border:none; display:block;
}
.bb-status-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
}
.bb-status{
  padding:10px 16px;
  font-size:12.5px;
  color:var(--muted);
  flex:1 1 auto;
  min-width:0;
}
.bb-status.ok{ color:var(--purple); }
.bb-status.err{ color:var(--red); }
.bb-status.warn{ color:var(--yellow); }
.bb-collapse-btn{
  flex:0 0 auto;
  margin-right:10px;
  width:28px; height:28px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-size:13px;
  line-height:1;
  cursor:pointer;
}
.bb-collapse-btn:hover{ border-color:var(--purple); color:var(--purple); }
.bb-instructions{
  padding:12px 16px;
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  max-height:220px;
  overflow-y:auto;
}
.bb-instructions ol{ margin:8px 0 8px 18px; }
.bb-instructions code{
  background:var(--panel); border:1px solid var(--border);
  color:var(--purple); padding:1px 5px; border-radius:4px; font-size:11px;
}
.bb-dl-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--purple); color:#1a0f26;
  padding:8px 14px; border-radius:8px; font-size:12px; font-weight:700;
  text-decoration:none; margin:6px 8px 6px 0;
}
.bb-dl-btn:hover{ background:var(--purple-dark); color:#fff; }
.bb-note{ font-size:11.5px; color:var(--muted); margin-top:6px; }

@media (max-width:980px){
  .sg-viewer-layout{
    grid-template-columns:1fr;
  }
  .sg-viewport-card, .sg-viewer-host, .sg-three-viewer, .sg-blockbench-viewer{
    height:82vh;
  }
}

@media (max-width:640px){
  .sg-viewport-toolbar{ top:10px; right:10px; gap:6px; }
  .sg-model-badge{
    left:10px; bottom:10px;
    max-width:calc(100vw - 20px);
    font-size:11px;
  }
  .sg-vt-btn{ width:40px; height:40px; font-size:16px; }
  .sg-switch{ width:42px; height:24px; }
  .sg-switch::after{ width:20px; height:20px; }
  .sg-switch.on::after{ transform:translateX(18px); }

  .bb-status-row{ flex-wrap:wrap; }
  .bb-status{ padding:10px 14px; line-height:1.5; }
  .bb-collapse-btn{ margin:4px 10px; }
  .bb-instructions{ padding:14px; font-size:12.5px; }
}

/* ======================================================================
   MBSM — REDISEÑO 2026 (Fase 1: shell, sidebar, dashboard, componentes)
   Este bloque se añade al final a propósito para que sus reglas ganen
   sobre los estilos heredados de cada módulo sin tener que tocar (ni
   arriesgar romper) el CSS específico de Validator/Fixer/Viewer/Maker/
   OBJ->Skin, que sigue funcionando igual debajo.
   ====================================================================== */

/* ---------- Reset de tipografías "pixel" heredadas ---------- */
.brand-mbsm, .pixel-title, .eyebrow.pixel, .hero-text h1{
  font-family:var(--font-ui) !important;
}

/* ---------- Shell general: sidebar fija + contenido ---------- */
.topbar{ display:none; } /* topbar antigua sustituida por la sidebar */

.mobile-nav-backdrop{
  display:none;
  position:fixed; inset:0; z-index:150;
  background:rgba(0,0,0,.55);
}
body.sidebar-mobile-open .mobile-nav-backdrop{ display:block; }

.sidebar{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  z-index:200;
  transition:width .18s ease;
}
body.sidebar-collapsed .sidebar{ width:var(--sidebar-w-collapsed); }

body{ padding-left:var(--sidebar-w); transition:padding-left .18s ease; }
body.sidebar-collapsed{ padding-left:var(--sidebar-w-collapsed); }

.topbar-mini{ display:none; }
.mobile-bottom-nav{ display:none; }

/* ---------- App Topbar (desktop) ---------- */
.app-topbar{
  position:sticky;
  top:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 28px;
  background:rgba(18,18,23,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.app-topbar-crumb-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  font-weight:700;
  font-size:14px;
}
.app-topbar-crumb-icon{ width:16px; height:16px; color:var(--muted); display:flex; }
.app-topbar-crumb-icon svg{ width:100%; height:100%; }

.app-topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.topbar-search-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--muted);
  font-family:var(--font-ui);
  font-size:12.5px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
  min-width:190px;
}
.topbar-search-pill:hover{ border-color:var(--purple); color:var(--text); }
.topbar-search-pill-icon{ width:14px; height:14px; flex:0 0 auto; }
.topbar-search-pill span{ flex:1 1 auto; text-align:left; }
.topbar-search-pill kbd{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--muted);
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:4px;
  padding:2px 5px;
}

.topbar-icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--muted);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.topbar-icon-btn:hover{ border-color:var(--purple); color:var(--text); background:var(--elevated); }
.topbar-icon-btn svg{ width:16px; height:16px; }

@media (max-width:900px){
  .app-topbar{ display:none; }
}

.sidebar-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:16px 14px; border-bottom:1px solid var(--border);
  min-height:var(--topbar-mini-h);
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px; min-width:0;
  font-family:var(--font-ui);
  font-weight:700; font-size:15px; letter-spacing:.2px;
  text-shadow:none;
}
.brand-mark{
  flex:0 0 auto; width:26px; height:26px;
  display:block; border-radius:6px; overflow:hidden;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-accent{ color:var(--accent); }

.sidebar-collapse-btn{
  position:absolute;
  top:20px;
  right:-13px;
  z-index:210;
  flex:0 0 auto;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel2); border:1px solid var(--border);
  border-radius:50%; color:var(--muted);
  cursor:pointer; transition:.15s;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.sidebar-collapse-btn:hover{ color:var(--text); border-color:var(--primary); }
.sidebar-collapse-btn svg{ width:13px; height:13px; }
body.sidebar-collapsed .sidebar-collapse-btn svg{ transform:rotate(180deg); }

/* Con la sidebar colapsada, el logo ya no cabe junto al texto "MBSM":
   se oculta el texto y el ícono queda centrado. El botón de colapsar
   ahora es un control flotante fijo en el borde (arriba), así que no
   necesita apilarse ni reflowear junto con el logo. */
body.sidebar-collapsed .sidebar-top{
  padding:14px 8px;
}
body.sidebar-collapsed .brand-label{ display:none; }
body.sidebar-collapsed .brand{ justify-content:center; }

.sidebar-nav{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  padding:14px 10px;
  display:flex; flex-direction:column; gap:18px;
}
.sidebar-group-label{
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--muted); opacity:.7;
  padding:0 10px 6px;
  white-space:nowrap;
}
body.sidebar-collapsed .sidebar-group-label{ opacity:0; height:0; padding:0; overflow:hidden; }

.sidebar-link{
  display:flex; align-items:center; gap:12px;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:13.5px; font-weight:500;
  cursor:pointer;
  position:relative;
  transition:background .12s ease,color .12s ease;
  white-space:nowrap;
}
.sidebar-link:hover{ background:var(--panel2); color:var(--text); }
.sidebar-link.active{
  background:rgba(124,58,237,.14);
  color:var(--text);
}
.sidebar-link.active .sidebar-link-icon{ color:var(--primary-hover); }
.sidebar-link.active::before{
  content:"";
  position:absolute; left:-10px; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0;
  background:var(--primary);
}
.sidebar-link-icon{ flex:0 0 auto; width:18px; height:18px; display:flex; color:inherit; }
.sidebar-link-icon svg{ width:100%; height:100%; }
.sidebar-link-label{ overflow:hidden; text-overflow:ellipsis; }

body.sidebar-collapsed .sidebar-link-label{ display:none; }
body.sidebar-collapsed .sidebar-link{ justify-content:center; padding:10px 0; }
body.sidebar-collapsed .sidebar-group{ display:flex; flex-direction:column; align-items:center; }

.sidebar-bottom{
  border-top:1px solid var(--border);
  padding:10px;
  display:flex; flex-direction:column; gap:10px;
}
body.sidebar-collapsed .sidebar-bottom{ gap:8px; }

.sidebar .lang-switch{
  background:var(--elevated); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:3px;
  display:flex; gap:2px;
}
body.sidebar-collapsed .sidebar .lang-switch{ flex-direction:column; align-items:center; }
body.sidebar-collapsed .sidebar .lang-btn{ flex:none; width:100%; }
.sidebar .lang-btn{
  flex:1; border-radius:5px;
}
.sidebar .lang-btn.active{ box-shadow:none; }

/* ---------- Topbar móvil (visible solo en pantallas pequeñas) ---------- */
@media (max-width:900px){
  body{ padding-left:0 !important; padding-top:var(--topbar-mini-h); padding-bottom:var(--bottom-nav-h); }
  .sidebar{
    transform:translateX(-100%);
    width:min(280px,82vw) !important;
    box-shadow:var(--shadow);
  }
  body.sidebar-mobile-open .sidebar{ transform:translateX(0); }
  .sidebar-collapse-btn{ display:none; }

  .topbar-mini{
    display:flex; align-items:center; gap:12px;
    position:fixed; top:0; left:0; right:0; z-index:120;
    height:var(--topbar-mini-h);
    padding:0 14px;
    background:rgba(var(--panel-rgb),.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .mobile-nav-toggle{
    /* The bottom nav now covers every destination the drawer had
       (Home / Viewers / Tools / About) plus a dedicated Settings sheet
       for language, theme and the GitHub link, so this hamburger --
       which only opened that same drawer -- is redundant on mobile. */
    display:none;
  }
  .topbar-mini-brand{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; flex:1 1 auto; }
  .topbar-mini-icon{ border-radius:5px; object-fit:cover; }
  .topbar-mini-search{
    width:34px; height:34px;
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel2); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--muted);
  }
  .topbar-mini-search svg{ width:17px; height:17px; }

  .mobile-bottom-nav{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    height:var(--bottom-nav-h);
    padding-bottom:env(safe-area-inset-bottom, 0);
    background:rgba(var(--panel-rgb),.94);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--border);
  }
  .mobile-bottom-nav-item{
    flex:1 1 0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px;
    background:none; border:none;
    color:var(--muted);
    font-family:var(--font-ui);
    padding:6px 2px 0;
  }
  .mobile-bottom-nav-item .mbn-icon{ width:21px; height:21px; display:flex; }
  .mobile-bottom-nav-item .mbn-icon svg{ width:100%; height:100%; }
  .mobile-bottom-nav-item .mbn-label{ font-size:10.5px; font-weight:600; }
  .mobile-bottom-nav-item.active{ color:var(--primary-hover); }
}

/* ---------- Dashboard (Home) ---------- */
.hero-inline{
  padding:56px 0 48px;
  background:
    radial-gradient(circle at 15% 0%, rgba(124,58,237,.14), transparent 45%),
    linear-gradient(180deg, var(--panel), var(--bg) 70%);
  border-bottom:1px solid var(--border);
}
.hero-particles{ display:none; }
.hero-overlay{ display:none; }

.hero-text h1{
  font-size:30px !important;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25 !important;
  text-transform:none;
}
.hero-text p{ font-size:15.5px; color:var(--muted); }

.hero-card{
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}

.section-head h2{ font-family:var(--font-ui); font-weight:700; letter-spacing:-.01em; }
.eyebrow.pixel{
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--accent); text-shadow:none;
}

.home-features{ padding-top:44px; padding-bottom:12px; }
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
.feature-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.feature-card:hover{
  border-color:var(--primary);
  background:var(--panel2);
  transform:translateY(-2px);
}
.feature-card .tag{
  display:inline-block;
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  color:var(--primary-hover);
  background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.25);
  padding:3px 8px; border-radius:999px;
  margin-bottom:12px;
}
.feature-card h3{ font-size:16px; font-weight:700; margin-bottom:8px; }
.feature-card p{ font-size:13px; color:var(--muted); line-height:1.55; }
.feature-card::after{
  content:"→";
  position:absolute;
  opacity:0;
  color:var(--primary-hover);
  transition:opacity .15s ease, transform .15s ease;
}
.feature-card:hover::after{ opacity:1; }

/* ---------- Modelos protagonistas en cards del Dashboard (v0.8.0) ---------- */
.feature-card.has-model{
  padding-top:0;
  overflow:hidden;
}

.fc-model-stage{
  position:relative;
  height:150px;
  margin:0 -20px 18px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(124,58,237,.22), transparent 70%),
    linear-gradient(180deg, #101019, #0b0b10);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}

.feature-card.has-model:hover .fc-model-stage{
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(124,58,237,.34), transparent 70%),
    linear-gradient(180deg, #121019, #0b0b10);
}

/* Render voxel real (PNG) del modelo dentro del stage de la card */
.fc-model-img{
  width:150px;
  height:150px;
  object-fit:contain;
  margin-bottom:-14px;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(168,85,247,.22));
  animation:mfFloat 4.5s ease-in-out infinite;
  transition:filter .2s ease;
}
.feature-card.has-model:hover .fc-model-img{
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(168,85,247,.4));
}
@media (prefers-reduced-motion: reduce){
  .fc-model-img{ animation:none; }
}

/* Figura estilo Steve/Alex construida en CSS puro: sin depender de ningún asset */
.model-figure{
  --mf-scale:1;
  position:relative;
  width:calc(64px * var(--mf-scale));
  height:calc(112px * var(--mf-scale));
  transform-style:preserve-3d;
  animation:mfFloat 4.5s ease-in-out infinite;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(168,85,247,.28));
}

.model-figure .mf-head{
  position:absolute;
  top:0; left:50%;
  width:calc(30px * var(--mf-scale));
  height:calc(30px * var(--mf-scale));
  margin-left:calc(-15px * var(--mf-scale));
  border-radius:4px;
  background:linear-gradient(155deg,#e7c9a5,#c99b6d 60%,#a9784f);
  box-shadow:inset -4px -6px 0 rgba(0,0,0,.18), inset 3px 3px 0 rgba(255,255,255,.08);
}
.model-figure .mf-torso{
  position:absolute;
  top:calc(29px * var(--mf-scale)); left:50%;
  width:calc(34px * var(--mf-scale));
  height:calc(46px * var(--mf-scale));
  margin-left:calc(-17px * var(--mf-scale));
  border-radius:3px;
  background:linear-gradient(155deg,#8b7bdb,#6c4fd1 55%,#54399f);
  box-shadow:inset -4px -6px 0 rgba(0,0,0,.2), inset 3px 3px 0 rgba(255,255,255,.10);
}
.model-figure .mf-arm{
  position:absolute;
  top:calc(30px * var(--mf-scale));
  width:calc(13px * var(--mf-scale));
  height:calc(44px * var(--mf-scale));
  border-radius:3px;
  background:linear-gradient(155deg,#e7c9a5,#c99b6d 60%,#a9784f);
  box-shadow:inset -3px -5px 0 rgba(0,0,0,.18), inset 2px 2px 0 rgba(255,255,255,.08);
  transform-origin:top center;
  animation:mfArmSwing 4.5s ease-in-out infinite;
}
.model-figure .mf-arm.left{ left:calc(-11px * var(--mf-scale)); }
.model-figure .mf-arm.right{ right:calc(-11px * var(--mf-scale)); animation-delay:-2.25s; }
.model-figure .mf-leg{
  position:absolute;
  top:calc(74px * var(--mf-scale));
  width:calc(14px * var(--mf-scale));
  height:calc(38px * var(--mf-scale));
  border-radius:3px;
  background:linear-gradient(155deg,#3a3550,#26223a 60%,#1a1729);
  box-shadow:inset -3px -5px 0 rgba(0,0,0,.25), inset 2px 2px 0 rgba(255,255,255,.05);
}
.model-figure .mf-leg.left{ left:calc(2px * var(--mf-scale)); }
.model-figure .mf-leg.right{ left:calc(18px * var(--mf-scale)); }

.model-figure .mf-rim{
  position:absolute;
  inset:-6px;
  border-radius:6px;
  background:linear-gradient(100deg, rgba(168,85,247,.35), transparent 40%);
  mix-blend-mode:screen;
  pointer-events:none;
}

@keyframes mfFloat{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-9px) rotate(2deg); }
}
@keyframes mfArmSwing{
  0%,100%{ transform:rotate(-6deg); }
  50%{ transform:rotate(6deg); }
}

@media (prefers-reduced-motion: reduce){
  .model-figure, .model-figure .mf-arm{ animation:none; }
}

/* Placeholder de skin clásica: silueta un poco más ancha, colores skin por defecto */
.fc-classic-viewer .model-figure .mf-torso{
  background:linear-gradient(155deg,#5ba6a0,#3f8b85 55%,#2c6864);
}
.fc-classic-viewer .model-figure .mf-arm{
  background:linear-gradient(155deg,#e7c9a5,#c99b6d 60%,#a9784f);
}

/* ---------- Modelo decorativo del Hero (v0.8.0) ---------- */
.hero-model-decor{
  position:absolute;
  right:4%;
  bottom:0;
  opacity:.5;
  pointer-events:none;
  z-index:0;
}
.hero-model-decor img{
  width:300px;
  height:300px;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.5)) drop-shadow(0 0 34px rgba(168,85,247,.3));
  animation:mfFloat 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hero-model-decor img{ animation:none; }
}
@media (max-width:980px){
  .hero-model-decor{ display:none; }
}

/* El home usa el dashboard (.dash-inline) como cabecera propia, así que
   no necesita el padding-top genérico de .section (pensado para las demás
   secciones); si no, queda un hueco enorme debajo del topbar. */
#home.section{
  padding-top:0;
}

/* ---------- Dashboard: welcome + stats (v0.9.0) ---------- */
.dash-inline{
  padding:24px 0 8px;
  background:
    radial-gradient(circle at 15% 0%, rgba(124,58,237,.14), transparent 45%),
    linear-gradient(180deg, var(--panel), var(--bg) 70%);
  border-bottom:1px solid var(--border);
}
.dash-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:32px;
}
.dash-welcome{
  display:flex;
  align-items:center;
  gap:16px;
}
.dash-avatar{
  width:64px; height:64px;
  flex:0 0 auto;
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg, rgba(124,58,237,.35), rgba(168,85,247,.12));
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 30px rgba(168,85,247,.18);
}
.dash-avatar img{ width:46px; height:46px; object-fit:contain; }
.dash-welcome-text h1{
  font-size:26px !important;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.2 !important;
  text-transform:none;
  display:flex; align-items:center; gap:8px;
}
.dash-wave{
  display:inline-block;
  animation:dashWave 2.4s ease-in-out infinite;
  transform-origin:70% 70%;
}
@keyframes dashWave{
  0%,60%,100%{ transform:rotate(0deg); }
  10%{ transform:rotate(14deg); }
  20%{ transform:rotate(-8deg); }
  30%{ transform:rotate(14deg); }
  40%{ transform:rotate(-4deg); }
}
.dash-welcome-text p{
  font-size:14.5px; color:var(--muted); margin:2px 0 8px;
}
.dash-version-badge{
  display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--primary-hover);
  background:rgba(124,58,237,.14);
  border:1px solid rgba(124,58,237,.3);
  padding:3px 9px; border-radius:999px;
}
.dash-version-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
/* Holder for the latest release's badge (Minor/Patch/Major), cloned in
   next to the version pill so both sit on the same line/height. Empty
   (and takes up no space) until JS fills it in. */
.dash-latest-badge:empty{ display:none; }
.dash-latest-badge .changelog-badge{ margin:0; }

.dash-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.dash-stat-card{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:14px 18px;
  min-width:128px;
}
.dash-stat-icon{
  width:38px; height:38px;
  flex:0 0 auto;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary-hover);
  background:rgba(124,58,237,.14);
}
.dash-stat-icon svg{ width:19px; height:19px; }
.dash-stat-icon-skins{ color:#4ade80; background:rgba(34,197,94,.14); }
.dash-stat-icon-packs{ color:#fbbf24; background:rgba(245,158,11,.14); }
.dash-stat-body{ display:flex; flex-direction:column; }
.dash-stat-label{ font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.dash-stat-value{ font-size:20px; font-weight:800; letter-spacing:-.01em; }

/* ---------- Dashboard: Recent Projects ---------- */
.dash-secondary{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding-top:28px;
  padding-bottom:36px;
}
.dash-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
}
.dash-card-title{
  font-size:14px; font-weight:700; margin-bottom:14px;
}

/* "View all updates" teaser, relocated under the version row in the
   welcome header (used to live inside the now-removed System status
   card). Only holds the hint/link now -- the release badge lives in
   .dash-latest-badge, right next to the version pill above. */
.dash-welcome-changelog{
  display:block;
  margin-top:8px;
  max-width:360px;
}
.dash-welcome-changelog .changelog-teaser-hint{ margin-top:0; }

.dash-recent-card{
  display:flex;
  flex-direction:column;
}
.dash-recent-head{ display:flex; align-items:center; justify-content:space-between; }
.dash-recent-viewall{
  background:none; border:none;
  color:var(--primary-hover);
  font-size:12px; font-weight:600;
  cursor:pointer;
  padding:2px;
}
.dash-recent-viewall:hover{ text-decoration:underline; }
.dash-recent-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dash-recent-empty{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
  padding:8px 0;
}
.dash-recent-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 6px;
  border-radius:var(--radius-sm);
  transition:background .12s ease;
}
.dash-recent-item:hover{ background:var(--panel2); }
.dash-recent-icon{
  width:32px; height:32px;
  flex:0 0 auto;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,58,237,.14);
  color:var(--primary-hover);
}
.dash-recent-icon svg{ width:15px; height:15px; }
.dash-recent-icon-skin{ color:#4ade80; background:rgba(34,197,94,.14); }
.dash-recent-icon-pack{ color:#fbbf24; background:rgba(245,158,11,.14); }
.dash-recent-body{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.dash-recent-name{
  font-size:12.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash-recent-time{ font-size:11px; color:var(--muted); }

@media (max-width:640px){
  .dash-top{ flex-direction:column; align-items:flex-start; }
  .dash-stats{ width:100%; gap:8px; }
  .dash-stat-card{ flex:1 1 0; min-width:0; padding:10px 8px; gap:8px; }
  .dash-stat-icon{ width:32px; height:32px; }
  .dash-stat-icon svg{ width:16px; height:16px; }
  .dash-stat-label{ font-size:10.5px; }
  .dash-stat-value{ font-size:17px; }
  .dash-welcome-text h1{ font-size:22px !important; }
}

/* ---------- Home: tarjetas de herramientas en 2 columnas + caption
   corta en móvil (en vez del párrafo largo, como en la app nativa) ---------- */
.fc-caption{
  display:none;
  align-items:center;
  gap:4px;
  margin-top:10px;
  font-size:12px;
  font-weight:600;
  color:var(--primary-hover);
}
.fc-caption svg{ width:13px; height:13px; }

.home-features-mobile-title{
  display:none;
  font-size:15px;
  font-weight:700;
  margin:0 0 12px;
}

@media (max-width:900px){
  .home-features .section-head{ display:none; }
  .home-features-mobile-title{ display:block; }
  .home-features{ padding-top:20px; }
  .home-features .feature-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }
  .home-features .feature-card{ padding:12px; }
  .home-features .feature-card h3{ font-size:13.5px; line-height:1.3; margin:8px 0 0; }
  .home-features .feature-card .tag{ font-size:9.5px; padding:2px 7px; }
  .home-features .feature-card p{ display:none; }
  .home-features .feature-card .fc-caption{ display:flex; }
  .home-features .fc-model-stage{ height:110px; margin:-12px -12px 0; }
  .home-features .fc-model-img{ width:100px; height:100px; }
}

/* ---------- Botones ---------- */
.btn{
  font-family:var(--font-ui);
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:13.5px;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--primary);
  border:1px solid var(--primary);
  color:#fff;
  box-shadow:none;
}
.btn-primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
.btn-secondary{
  background:var(--panel2);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-secondary:hover{ border-color:var(--primary); color:var(--text); }
.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
}
.btn-ghost:hover{ color:var(--text); border-color:var(--muted); }

/* ---------- Tarjetas / paneles genéricos ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:none;
}
.perk{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.perk .ico{ filter:none; }

.module-window{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:none;
  overflow:hidden;
}
.module-window-bar{
  background:var(--elevated);
  border-bottom:1px solid var(--border);
}
.module-window-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted);
}

/* ---------- Tabs / sub-tabs ---------- */
.sub-tabs{
  display:flex; gap:4px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:4px;
  width:fit-content;
  max-width:100%;
  overflow-x:auto;
}
.sub-tab-btn{
  font-family:var(--font-ui);
  font-size:12.5px; font-weight:600;
  color:var(--muted);
  background:transparent;
  border:none;
  border-radius:var(--radius-sm);
  padding:8px 14px;
  white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.sub-tab-btn:hover{ color:var(--text); }
.sub-tab-btn.active{
  background:var(--primary);
  color:#fff;
  box-shadow:none;
}

/* ---------- Números / datos técnicos en monoespaciada ---------- */
.check-count, .validator-count, .stat-value,
.sg-model-badge, .bb-instructions code{
  font-family:var(--font-mono);
}

/* ---------- Footer ---------- */
.footer{
  background:var(--panel);
  border-top:1px solid var(--border);
}
.footer-brand{ font-family:var(--font-ui); font-weight:800; }

/* ---------- Responsive base adicional ---------- */
@media (max-width:900px){
  .hero-content{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .container{ width:min(100%,94%); }
}

/* ======================================================================
   MBSM — REDISEÑO 2026 (Fase 2: 4D/5D Viewer, Classic Skins, Inspector,
   controles del viewport, estados vacíos, drag & drop)
   ====================================================================== */

/* ---------- 4D/5D Viewer: layout de 3 columnas, viewport dominante ---------- */
.sg-viewer-layout{
  display:grid;
  grid-template-columns:252px minmax(0,1fr) 252px;
  gap:14px;
  margin-bottom:24px;
  align-items:start;
}

.sg-sidebar, .sg-inspector{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px;
  max-height:78vh;
  overflow-y:auto;
}

.sg-inspector-header{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.sg-inspector-subhead{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--muted);
  opacity:.75;
  margin-top:4px;
}

.sg-viewport-card{
  border-radius:var(--radius-lg);
  min-height:78vh;
}

/* ---------- Dropzones: drag & drop moderno ---------- */
.dropzone, .sg-dropzone-compact{
  background:var(--elevated);
  border:1.5px dashed var(--border);
  border-radius:var(--radius);
  transition:border-color .15s ease, background .15s ease;
}
.dropzone:hover, .sg-dropzone-compact:hover{
  border-color:var(--primary);
}
.dropzone.dragover, .sg-dropzone-compact.dragover,
.dropzone.drag-active, .sg-dropzone-compact.drag-active{
  border-color:var(--primary-hover);
  background:rgba(124,58,237,.08);
}
.sg-dropzone-compact .drop-icon, .dropzone .drop-icon{
  opacity:.85;
}

/* ---------- Toolbar flotante del viewport (estilo "pill") ---------- */
.sg-viewport-toolbar{
  display:flex;
  gap:6px;
  background:rgba(18,18,23,.85);
  backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px;
}
.sg-vt-btn{
  border-radius:999px;
  color:var(--muted);
  transition:background .12s ease, color .12s ease;
}
.sg-vt-btn:hover{ color:var(--text); }
.sg-vt-btn.active{
  background:var(--primary);
  color:#fff;
}

.sg-model-badge{
  background:rgba(18,18,23,.85);
  backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}

/* ---------- Estado vacío del viewport ---------- */
.sg-viewport-overlay{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}
.sg-overlay-ico{
  width:44px; height:44px;
  color:var(--muted);
  opacity:.7;
}
.sg-overlay-ico svg{ width:100%; height:100%; }

/* ---------- Toggles (switches) ---------- */
.sg-switch{
  background:var(--border);
  transition:background .15s ease;
}
.sg-switch.on{ background:var(--primary); }

/* ---------- Stats / inspector ---------- */
.stats-grid{ gap:10px; }
.stat-box{
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.stat-number{ font-family:var(--font-mono); color:var(--text); }
.stat-label{ color:var(--muted); }

.sg-log-box{
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:11.5px;
}

/* ---------- Classic Skins: layout más simple, enfocado en el visor ---------- */
.studio-layout, .viewer-layout{
  align-items:start;
}
.viewer-card, .sg-viewport-card, .studio-viewport{
  border-radius:var(--radius-lg);
}

/* ---------- Responsive: 4D/5D Viewer e inspector se apilan ---------- */
@media (max-width:1180px){
  .sg-viewer-layout{
    grid-template-columns:1fr;
  }
  .sg-sidebar, .sg-inspector{
    max-height:none;
  }
  .sg-viewport-card{ order:-1; min-height:60vh; }
}

/* ---------- Classic Skins: galería de skins ---------- */
.upload-card{
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
}
.viewer-skin-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:border-color .15s ease;
}
.viewer-skin-card:hover{ border-color:var(--border-soft); }
.viewer-skin-header{
  cursor:pointer;
}
.viewer-skin-name{ font-weight:600; }
.viewer-skin-model{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}

/* ======================================================================
   MBSM — REDISEÑO 2026 (Fase 3: Validator/Fixer, Maker, OBJ→Skin,
   Toast notifications, Command Palette)
   ====================================================================== */

/* ---------- Fixer: panel de diagnóstico más técnico ---------- */
.fix-card{ margin-top:20px; }
.fix-option{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
}
.fix-option:hover{
  border-color:var(--primary);
  background:var(--panel2);
}
.fix-option input[type="checkbox"]{ accent-color:var(--primary); }
.fix-option-icon{ font-size:19px; opacity:.9; }
.fix-option-text strong{ color:var(--text); font-size:13.5px; }

.pack-info-banner{
  background:var(--panel) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
}

.stat-box{ border-radius:var(--radius); }
.result-placeholder, .maker-empty{ color:var(--muted); }
.placeholder-icon{ opacity:.75; }

/* ---------- Skinpack Maker: cabecera de pasos tipo wizard ---------- */
.wizard-steps{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.wizard-step-pill{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 12px 5px 6px;
}
.wizard-step-num{
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
}
.wizard-step-sep{ color:var(--border); font-size:12px; }

.wizard-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  background:rgba(124,58,237,.16);
  border:1px solid rgba(124,58,237,.4);
  color:var(--primary-hover);
  font-size:11px;
  font-weight:700;
  vertical-align:middle;
}
.wizard-badge-inline{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.wizard-export-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

@media (max-width:640px){
  .wizard-steps{ display:none; } /* en móvil, cada card ya lleva su número */
}

/* ---------- Toast notifications ---------- */
.toast-container{
  position:fixed;
  top:16px;
  right:16px;
  z-index:400;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:min(360px,90vw);
}
@media (max-width:900px){
  .toast-container{ top:calc(var(--topbar-mini-h) + 10px); right:10px; left:10px; max-width:none; }
}
.toast{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--elevated);
  border:1px solid var(--border);
  border-left:3px solid var(--info);
  border-radius:var(--radius);
  padding:11px 12px;
  box-shadow:var(--shadow-sm);
  animation:toastIn .16s ease;
}
.toast.toast-out{ animation:toastOut .16s ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(12px); } }

.toast-success{ border-left-color:var(--success); }
.toast-warning{ border-left-color:var(--warning); }
.toast-error{ border-left-color:var(--red); }
.toast-info{ border-left-color:var(--info); }

.toast-icon{
  flex:0 0 auto;
  width:18px; height:18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
  background:var(--info);
}
.toast-success .toast-icon{ background:var(--success); }
.toast-warning .toast-icon{ background:var(--warning); }
.toast-error .toast-icon{ background:var(--red); }
.toast-info .toast-icon{ background:var(--info); }

.toast-message{ flex:1 1 auto; font-size:12.5px; color:var(--text); line-height:1.5; }
.toast-close{
  flex:0 0 auto;
  background:none; border:none; color:var(--muted);
  font-size:15px; line-height:1; cursor:pointer; padding:0 2px;
}
.toast-close:hover{ color:var(--text); }

/* ---------- Command Palette ---------- */
.cmdk-backdrop{
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:12vh;
}
/* El atributo [hidden] debe ganar siempre sobre "display:flex" de arriba;
   si no, la paleta queda visible y bloqueando toda la interfaz al cargar
   (bug reportado en móvil). */
.cmdk-backdrop[hidden]{
  display:none !important;
}
.cmdk-panel{
  width:min(560px,92vw);
  max-height:60vh;
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cmdk-input-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.cmdk-search-icon{ width:16px; height:16px; color:var(--muted); flex:0 0 auto; }
.cmdk-input{
  flex:1 1 auto;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-family:var(--font-ui);
  font-size:14px;
}
.cmdk-input::placeholder{ color:var(--muted); }
.cmdk-esc{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--muted);
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:4px;
  padding:2px 6px;
}
.cmdk-list{
  overflow-y:auto;
  padding:6px;
}
.cmdk-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:transparent;
  border:none;
  border-radius:var(--radius-sm);
  padding:10px 10px;
  text-align:left;
  cursor:pointer;
  font-family:var(--font-ui);
}
.cmdk-item:hover, .cmdk-item.active{ background:var(--panel2); }
.cmdk-item-label{ font-size:13.5px; color:var(--text); }
.cmdk-item-hint{ font-size:11px; color:var(--muted); font-family:var(--font-mono); }
.cmdk-empty{ padding:18px; text-align:center; color:var(--muted); font-size:13px; }

/* ======================================================================
   MBSM — REDISEÑO 2026 (Fase 4: temas, apariencia del visor,
   microanimaciones, accesibilidad y responsive final)
   ====================================================================== */

/* ---------- Tema claro: paleta propia, no una simple inversión ---------- */
[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f5fa;
  --panel:#ffffff;
  --panel2:#f1eff8;
  --elevated:#ffffff;
  --border:#e4e1ee;
  --border-soft:#ebe9f3;

  --primary:#7c3aed;
  --primary-hover:#6d28d9;
  --accent:#9333ea;

  --text:#18181b;
  --muted:#65636f;

  --shadow:0 12px 28px rgba(24,16,44,.10);
  --shadow-sm:0 2px 10px rgba(24,16,44,.06);
  --panel-rgb:255,255,255;
}
[data-theme="light"] body::before{
  background-image:
    linear-gradient(rgba(124,58,237,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.05) 1px, transparent 1px);
}
[data-theme="light"] body::after{
  background:radial-gradient(circle, rgba(124,58,237,.07), transparent 45%);
}
[data-theme="light"] .hero-inline{
  background:
    radial-gradient(circle at 15% 0%, rgba(124,58,237,.10), transparent 45%),
    linear-gradient(180deg, var(--panel), var(--bg) 70%);
}
[data-theme="light"] .sg-model-badge,
[data-theme="light"] .sg-viewport-toolbar{
  background:rgba(255,255,255,.85);
}
[data-theme="light"] .cmdk-backdrop{
  background:rgba(24,16,44,.28);
}
[data-theme="light"] .mobile-nav-backdrop{
  background:rgba(24,16,44,.28);
}
[data-theme="light"] .sg-three-viewer canvas,
[data-theme="light"] .sg-blockbench-viewer{
  background:var(--bg2,#eceafb);
}

/* ---------- Paleta: Verde clásico ----------
   Solo recolorea los acentos (primary/accent) manteniendo el resto del
   layout intacto -- pensado para quien extraña el verde que tenía MBSM
   antes del rediseño morado. Funciona tanto en dark como en light. */
[data-palette="green"]{
  --primary:#16a34a;
  --primary-hover:#22c55e;
  --accent:#4ade80;
  --purple:#4ade80;
  --purple-dark:#16a34a;
}
[data-palette="green"] body::before{
  background-image:
    linear-gradient(rgba(34,197,94,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,197,94,.06) 1px, transparent 1px);
}
[data-palette="green"] body::after{
  background:radial-gradient(circle, rgba(34,197,94,.10), transparent 45%);
}
[data-theme="light"][data-palette="green"]{
  --primary:#15803d;
  --primary-hover:#16a34a;
  --accent:#22c55e;
}

/* ---------- Paleta: Minecraft ----------
   Reskin más fuerte: paleta tierra/piedra/césped, esquinas cuadradas
   (estilo "item slot") y la tipografía pixelada Press Start 2P en
   títulos y textos que ya usaban --font-mono. Es una estética propia
   inspirada en Minecraft, no una copia de ningún sitio existente.
   Se aplica igual en modo claro y oscuro: es su propio "modo". */
[data-palette="minecraft"]{
  --bg:#1a160f;
  --bg2:#1a160f;
  --panel:#2b2116;
  --panel2:#332819;
  --elevated:#382c1b;
  --border:#5a4a30;
  --border-soft:#463a24;

  --primary:#5b8f3b;
  --primary-hover:#6fae46;
  --accent:#8bc34a;
  --purple:#8bc34a;
  --purple-dark:#3f6b2a;

  --success:#5b8f3b;
  --warning:#d9a521;
  --red:#b02e26;
  --info:#3d6aa3;

  --text:#f1ead9;
  --muted:#b8ab8c;

  --font-mono:'Press Start 2P','JetBrains Mono','SFMono-Regular',Consolas,monospace;

  --radius-sm:2px;
  --radius:3px;
  --radius-lg:4px;

  --panel-rgb:43,33,22;
}
[data-palette="minecraft"] body::before{
  background-image:
    linear-gradient(rgba(139,195,74,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,195,74,.05) 1px, transparent 1px);
  background-size:32px 32px;
}
[data-palette="minecraft"] body::after{
  background:radial-gradient(circle, rgba(139,195,74,.08), transparent 45%);
}
/* Botones con relieve tipo GUI de Minecraft: borde claro arriba/izquierda,
   oscuro abajo/derecha, sin sombras difusas. */
[data-palette="minecraft"] .btn-primary{
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.35);
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}
[data-palette="minecraft"] .pixel-title,
[data-palette="minecraft"] .eyebrow.pixel,
[data-palette="minecraft"] .brand-mbsm,
[data-palette="minecraft"] .hero-text h1{
  letter-spacing:0;
}

/* ---------- Selector de tema (Dark / Light / System) ---------- */
.theme-switch{
  display:flex;
  gap:2px;
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:3px;
}
body.sidebar-collapsed .theme-switch{ flex-direction:column; align-items:center; }
body.sidebar-collapsed .theme-btn{ flex:none; width:26px; height:26px; }
.theme-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border:none;
  background:transparent;
  color:var(--muted);
  border-radius:5px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.theme-btn svg{ width:14px; height:14px; }
.theme-btn:hover{ color:var(--text); }
.theme-btn.active{
  background:var(--primary);
  color:#fff;
}

/* ---------- Selector de paleta de color (Default / Green / Minecraft) ---------- */
.palette-switch{
  display:flex;
  gap:2px;
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:3px;
  margin-top:6px;
}
body.sidebar-collapsed .palette-switch{ flex-direction:column; align-items:center; }
body.sidebar-collapsed .palette-btn{ flex:none; width:26px; height:26px; }
.palette-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border:none;
  background:transparent;
  border-radius:5px;
  cursor:pointer;
  transition:background .12s ease;
}
.palette-btn.active{ background:var(--primary); }
.palette-swatch{
  width:14px; height:14px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
}
.palette-swatch-default{ background:linear-gradient(135deg,#7c3aed,#a855f7); }
.palette-swatch-green{ background:linear-gradient(135deg,#16a34a,#4ade80); }
.palette-swatch-minecraft{ background:linear-gradient(135deg,#5b8f3b,#8b5a2b); border-radius:3px; }

/* ---------- Panel de apariencia del visor 4D/5D ---------- */
.sg-appearance{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sg-appearance-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.sg-appearance-row > span{ font-size:12.5px; color:var(--text); }
.sg-bg-options{
  display:flex;
  gap:6px;
}
.sg-bg-opt{
  width:22px; height:22px;
  border-radius:6px;
  border:1.5px solid var(--border);
  cursor:pointer;
  transition:border-color .12s ease, transform .12s ease;
  padding:0;
}
.sg-bg-opt:hover{ transform:scale(1.08); }
.sg-bg-opt.active{ border-color:var(--primary); }
.sg-bg-opt[data-bg="dark"]{ background:#0b0b0f; }
.sg-bg-opt[data-bg="light"]{ background:#f1eff8; }
.sg-bg-opt[data-bg="gradient"]{ background:linear-gradient(135deg,#3b1670,#0b0b0f); }
.sg-bg-opt[data-bg="transparent"]{
  background-image:
    linear-gradient(45deg, #444 25%, transparent 25%),
    linear-gradient(-45deg, #444 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #444 75%),
    linear-gradient(-45deg, transparent 75%, #444 75%);
  background-size:8px 8px;
  background-position:0 0, 0 4px, 4px -4px, -4px 0px;
}

/* ---------- Microanimaciones sutiles y consistentes ---------- */
.feature-card, .card, .perk, .viewer-skin-card, .fix-option, .toast,
.btn, .sidebar-link, .sub-tab-btn, .cmdk-item, .theme-btn, .sg-bg-opt,
.wizard-step-pill, .result-item{
  transition-timing-function:ease;
}
.module-window{ animation:panelIn .16s ease; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

.sub-tab-panel{ animation:panelIn .14s ease; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

/* ---------- Accesibilidad: foco visible consistente ---------- */
.sidebar-link:focus-visible,
.btn:focus-visible,
.sub-tab-btn:focus-visible,
.feature-card:focus-visible,
.cmdk-item:focus-visible,
.theme-btn:focus-visible,
.lang-btn:focus-visible,
.toast-close:focus-visible,
.sidebar-collapse-btn:focus-visible,
.mobile-nav-toggle:focus-visible{
  outline:2px solid var(--primary-hover);
  outline-offset:2px;
}
.cmdk-input:focus{ outline:none; }

/* ---------- Responsive: refinamiento final ---------- */
@media (max-width:640px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .fix-options-grid{ grid-template-columns:1fr; }
  .hero-text h1{ font-size:24px !important; }
  .cmdk-backdrop{ padding-top:8vh; }
  .toast{ font-size:12px; }
}

/* ---------- Fondo del viewport controlado desde el panel de apariencia ---------- */
.sg-viewer-host[data-bg="dark"]{
  background:
    radial-gradient(circle at 50% 20%, rgba(168,85,247,.06), transparent 60%),
    #0c0d10;
}
.sg-viewer-host[data-bg="light"]{
  background:
    radial-gradient(circle at 50% 20%, rgba(124,58,237,.08), transparent 60%),
    #ecebf3;
}
.sg-viewer-host[data-bg="gradient"]{
  background:linear-gradient(160deg, #2a0f57, #0b0b0f 65%);
}
.sg-viewer-host[data-bg="transparent"]{
  background-color:transparent;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.06) 75%);
  background-size:22px 22px;
  background-position:0 0, 0 11px, 11px -11px, -11px 0px;
}

/* ---------- Icono inline en botones (reemplazo del emoji 🧊) ---------- */
.btn-icon-img{
  width:14px;
  height:14px;
  object-fit:cover;
  border-radius:3px;
  vertical-align:-2px;
  image-rendering:pixelated;
}

/* ======================================================================
   MBSM — Ajustes tras revisión en dispositivo (logo roto en tema claro,
   navegación redundante, tipografía cursiva de fallback, changelog)
   ====================================================================== */

/* La barra de sub-pestañas dentro de "Skins 4D/5D" y "Classic Skins" ahora
   es redundante: la sidebar ya navega directo a cada sub-sección. Se
   oculta visualmente, pero se conserva en el DOM porque switchTab() en
   app.js sigue haciendo click() programático sobre estos botones para
   cambiar de sub-pestaña al navegar desde la sidebar (ese click()
   funciona igual aunque el elemento esté oculto). Quitarla del DOM
   rompería esa navegación. */
.sub-tabs.sub-tabs-legacy-nav{
  display:none;
}

/* ---------- Changelog (Home) ---------- */
body.no-scroll{ overflow:hidden; }

/* Teaser: solo la última versión, visible en la Home */
.changelog-teaser-wrap{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--font-ui);
}
.changelog-teaser-wrap .changelog-entry{
  transition:border-color .15s ease, transform .15s ease;
}
.changelog-teaser-wrap:hover .changelog-entry{
  border-color:var(--purple);
  transform:translateY(-2px);
}
.changelog-teaser-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  color:var(--purple);
  font-size:12.5px;
  font-weight:700;
}
.changelog-teaser-hint svg{ width:14px; height:14px; }

/* Modal con el historial completo */
.changelog-modal-backdrop{
  position:fixed; inset:0;
  z-index:600;
  background:rgba(6,6,9,.72);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.changelog-modal-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.changelog-modal{
  width:100%;
  max-width:640px;
  max-height:min(78vh,720px);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  display:flex;
  flex-direction:column;
  transform:translateY(10px) scale(.98);
  transition:transform .15s ease;
}
.changelog-modal-backdrop.open .changelog-modal{
  transform:translateY(0) scale(1);
}
.changelog-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
  flex:0 0 auto;
}
.changelog-modal-head h3{ font-size:16px; font-weight:700; margin:0; }
.changelog-modal-close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--muted);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.changelog-modal-close:hover{ border-color:var(--purple); color:var(--text); }
.changelog-modal-close svg{ width:15px; height:15px; }
.changelog-modal-body{
  padding:20px;
  overflow-y:auto;
}

/* ---------- Creador de skin/tema propio ---------- */
.palette-swatch-custom{
  border-style:dashed;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; line-height:1;
  background:transparent; color:var(--muted);
}
.palette-btn-custom.has-custom .palette-swatch-custom{
  border-style:solid;
  color:transparent;
  background:var(--custom-theme-preview, linear-gradient(135deg,#7c3aed,#a855f7));
}

.custom-theme-modal-backdrop{
  position:fixed; inset:0; z-index:600;
  background:rgba(6,6,9,.72);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease;
}
.custom-theme-modal-backdrop.open{ opacity:1; pointer-events:auto; }
.custom-theme-modal{
  width:100%; max-width:440px; max-height:min(86vh,720px);
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  display:flex; flex-direction:column;
  transform:translateY(10px) scale(.98);
  transition:transform .15s ease;
}
.custom-theme-modal-backdrop.open .custom-theme-modal{ transform:translateY(0) scale(1); }
.custom-theme-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border); flex:0 0 auto;
}
.custom-theme-modal-head h3{ font-size:16px; font-weight:700; margin:0; }
.custom-theme-modal-body{ padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:20px; }
.custom-theme-hint{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:0; }

.custom-theme-color-row label{ display:block; font-size:13px; font-weight:700; }
.custom-theme-color-sub{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; margin-bottom:8px; }
.custom-theme-color-inputs{ display:flex; align-items:center; gap:8px; }
.custom-theme-color-inputs input[type="color"]{
  width:38px; height:38px; padding:0; border:1px solid var(--border); border-radius:8px;
  background:none; cursor:pointer; flex:0 0 auto;
}
.custom-theme-hex-input{
  flex:1 1 auto; min-width:0;
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:9px 12px; font-size:13px; font-family:var(--font-mono);
}
.custom-theme-hex-input.invalid{ border-color:var(--red,#ef4444); }

.custom-theme-bg-section label{ display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.custom-theme-bg-type{ display:flex; gap:6px; flex-wrap:wrap; }
.ctbg-opt{
  padding:8px 14px; border-radius:20px; border:1px solid var(--border);
  background:var(--panel2); color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:.15s ease;
}
.ctbg-opt.active{ background:var(--purple); border-color:var(--purple); color:#fff; }
.custom-theme-upload-btn{
  margin-top:10px; padding:9px 16px; border-radius:8px; border:1px dashed var(--border);
  background:var(--panel2); color:var(--text); font-size:12.5px; font-weight:600; cursor:pointer;
}
.custom-theme-bg-filename{ display:block; margin-top:8px; font-size:11.5px; color:var(--muted); word-break:break-all; }
.custom-theme-bg-note{ margin:8px 0 0; font-size:11.5px; color:var(--muted); }
.custom-theme-audio-toggle{
  display:flex; align-items:center; gap:8px;
  margin-top:10px; font-size:12.5px; color:var(--text); cursor:pointer;
}
.custom-theme-audio-toggle input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--purple); cursor:pointer; }

.custom-theme-modal-actions{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:4px; border-top:1px solid var(--border); padding-top:16px;
}
.btn-ghost-small{
  background:none; border:1px solid var(--border); color:var(--muted);
  border-radius:8px; padding:9px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.btn-ghost-small:hover{ border-color:var(--red,#ef4444); color:var(--red,#ef4444); }
.custom-theme-modal-actions .btn-primary{ padding:9px 20px; border-radius:8px; }

/* Capa de fondo del tema personalizado: imagen/gif/video detrás de toda la página */
#customThemeBgLayer{
  position:fixed; inset:0; z-index:-1;
  display:none;
  overflow:hidden;
}
#customThemeBgLayer.active{ display:block; }
#customThemeBgImg, #customThemeBgVideo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
#customThemeBgOverlay{
  position:absolute; inset:0;
  background:rgba(8,7,12,.62);
}
[data-theme="light"] #customThemeBgOverlay{ background:rgba(240,238,252,.72); }

/* Cuando hay un fondo de skin personalizado activo, el "chrome" del
   sitio (topbar, hero de Home, sidebar, nav inferior móvil) pasa a ser
   translúcido en vez de sólido, para que la imagen/gif/video se vea
   consistente en toda la página y no solo en los huecos entre tarjetas. */
body.has-custom-bg .app-topbar{
  background:rgba(18,18,23,.35);
  backdrop-filter:blur(14px);
}
body.has-custom-bg .dash-inline{
  background:rgba(10,9,14,.28);
}
body.has-custom-bg .sidebar{
  background:rgba(var(--panel-rgb,18,18,23),.55);
  backdrop-filter:blur(14px);
}
body.has-custom-bg .mobile-bottom-nav{
  background:rgba(var(--panel-rgb,18,18,23),.55);
  backdrop-filter:blur(14px);
}
[data-theme="light"] body.has-custom-bg .app-topbar{ background:rgba(255,255,255,.45); }
[data-theme="light"] body.has-custom-bg .dash-inline{ background:rgba(255,255,255,.35); }
[data-theme="light"] body.has-custom-bg .sidebar{ background:rgba(255,255,255,.6); }
[data-theme="light"] body.has-custom-bg .mobile-bottom-nav{ background:rgba(255,255,255,.6); }


.changelog-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.changelog-entry{
  display:flex;
  gap:16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 20px;
}
.changelog-entry-icon{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:9px;
  overflow:hidden;
  border:1px solid var(--border);
}
.changelog-entry-icon img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Iconos de bloque para Patch (obsidiana) y Major Release (amatista):
   mismo tamaño y mismo recuadro con borde que el icono de Minor Update,
   para que los tres tipos se vean consistentes en tamaño y delineado. */
.changelog-entry-icon.type-major img{
  filter:drop-shadow(0 2px 4px rgba(168,85,247,.35));
}

.changelog-badge{
  font-family:var(--font-ui);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  padding:3px 9px;
  border-radius:999px;
  text-transform:uppercase;
}
.changelog-badge.badge-minor{
  color:var(--purple);
  background:rgba(168,85,247,.14);
  border:1px solid rgba(168,85,247,.32);
}
.changelog-badge.badge-patch{
  color:#b9a8ff;
  background:rgba(90,60,140,.16);
  border:1px solid rgba(140,110,200,.35);
}
.changelog-badge.badge-major{
  color:#e2c8ff;
  background:rgba(168,85,247,.22);
  border:1px solid rgba(168,85,247,.55);
}
.changelog-entry-body{ flex:1 1 auto; min-width:0; }
.changelog-entry-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.changelog-version{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--primary-hover);
  background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.28);
  border-radius:999px;
  padding:3px 10px;
}
.changelog-changes{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.changelog-changes li{
  position:relative;
  padding-left:16px;
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
}
.changelog-changes li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--accent);
}
@media (max-width:640px){
  .changelog-entry{ flex-direction:column; gap:12px; }
}

/* ---------- Tooltip flotante de la sidebar colapsada ----------
   Se posiciona con JS y usa position:fixed a propósito: al estar la
   sidebar dentro de un contenedor con overflow-y:auto (para poder
   hacer scroll si hay muchas herramientas), un tooltip vía ::after
   dentro de ese contenedor queda recortado por ese overflow. Un
   elemento position:fixed en el body no tiene ese problema. */
.sidebar-floating-tooltip{
  position:fixed;
  z-index:600;
  background:var(--elevated);
  color:var(--text);
  border:1px solid var(--border);
  padding:5px 9px;
  border-radius:var(--radius-sm);
  font-size:12px;
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%);
  transition:opacity .12s ease;
}
.sidebar-floating-tooltip.visible{
  opacity:1;
}

/* ---------- Móvil: bottom sheets (Viewers / Tools / Settings) ----------
   Reemplazan la navegación de un solo destino que tenían antes los
   botones "Viewers" y "Tools" de la barra inferior (iban directo al
   4D/5D Viewer y al Validador respectivamente, sin dejar elegir), y el
   botón "More" (que antes solo duplicaba el menú hamburguesa completo). */
.mobile-sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:650;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.mobile-sheet-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.mobile-sheet{
  width:100%;
  max-width:560px;
  max-height:75vh;
  overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-bottom:none;
  border-radius:20px 20px 0 0;
  padding:10px 20px 24px;
  box-shadow:0 -8px 30px rgba(0,0,0,.35);
  transform:translateY(16px);
  transition:transform .18s ease;
}
.mobile-sheet-backdrop.open .mobile-sheet{
  transform:translateY(0);
}
.mobile-sheet-handle{
  width:36px; height:4px;
  border-radius:999px;
  background:var(--border);
  margin:2px auto 14px;
}
.mobile-sheet-title{
  font-size:15px; font-weight:700; margin-bottom:14px;
}
.mobile-sheet-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobile-sheet-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border-radius:var(--radius-sm);
  background:var(--panel2);
  border:1px solid var(--border);
  color:var(--text);
  font-size:14px;
  font-weight:600;
}
.mobile-sheet-option:active{ background:var(--elevated); }
.mso-icon{
  flex:0 0 auto;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  color:var(--primary-hover);
}
.mso-icon svg{ width:100%; height:100%; }
.mso-label{ flex:1 1 auto; }

.mobile-sheet-body-settings{ gap:16px; }
.mobile-sheet-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px;
}
.mobile-sheet-row-label{ font-size:14px; font-weight:600; color:var(--text); }
.mobile-sheet-body-settings .lang-switch,
.mobile-sheet-body-settings .theme-switch{
  display:flex;
  gap:6px;
}
.mobile-sheet-body-settings .lang-btn,
.mobile-sheet-body-settings .theme-btn{
  min-width:38px;
  height:34px;
  padding:0 10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:12.5px; font-weight:700;
}
.mobile-sheet-body-settings .lang-btn svg,
.mobile-sheet-body-settings .theme-btn svg{ width:17px; height:17px; }
.mobile-sheet-body-settings .lang-btn.active,
.mobile-sheet-body-settings .theme-btn.active{
  color:var(--primary-hover);
  border-color:var(--primary);
  background:rgba(124,58,237,.14);
}

/* ---------- 404 / Not Found ---------- */
.notfound-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:480px;
  margin:0 auto;
  padding:40px 0 20px;
}
.notfound-icon{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  color:var(--purple);
  background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.3);
  border-radius:999px;
  margin-bottom:22px;
}
.notfound-icon svg{ width:30px; height:30px; }
.notfound-code{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:6px;
}
.notfound-layout .section-title{ margin-bottom:12px; }
.notfound-text{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
  margin-bottom:26px;
}
.notfound-home-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.notfound-home-btn svg{ width:16px; height:16px; }

/* Tags de compatibilidad dentro de las hojas móviles (Visores / Herramientas) */
.mobile-sheet-option .mso-tag{ margin-left:auto; flex:0 0 auto; }