/* AllOfMyBlocks — self-contained styles (no external CSS, no GSAP) */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+2074,U+20AC,U+2122;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/inter-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+2074,U+20AC,U+2122;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/inter-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/inter-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+2074,U+20AC,U+2122;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/inter-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

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

:root{
  --white:#ffffff;
  --black:#0a0a0a;
  --gray:#9a9a9a;
  --gray2:#f0f0f0;
  --blue:#5865f2;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:12px;
  --radius:14px;
}

html, body{
  font-family: var(--sans);
  background: #000;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

a { text-decoration:none; color:inherit; }
button { font-family:inherit; border:none; cursor:pointer; background:none; color:inherit; }
:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:4px; }
.modal :focus-visible, .modal button:focus-visible{ outline-color:#111; }

.grid-12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.5rem;
  width:100%;
  padding-inline:2rem;
  max-width:1280px;
  margin-inline:auto;
}
.col-6{grid-column:span 6;}
.col-12{grid-column:span 12;}

/* ------------------------------------------------------------------ hero */
.hero-section{
  position:sticky; top:0;
  height:100vh; height:100dvh; width:100%;
  z-index:1;
  padding:var(--pad);
  transition:padding .1s linear;
}
.hero-section.scrolled{ padding:0; }
.hero-inner{
  position:relative;
  width:100%; height:100%;
  border-radius:var(--radius);
  overflow:hidden;
  background:#111;
  transition:border-radius .1s linear;
}
.hero-section.scrolled .hero-inner{ border-radius:0; }

.before-after{
  position:absolute; inset:0;
  width:100%; height:100%;
  user-select:none;
  z-index:1;
}
.ba-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 35%;
  pointer-events:none;
}
.ba-after{
  clip-path: inset(0 50% 0 0);
}
.ba-divider{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:#fff;
  transform:translateX(-50%);
  z-index:3; pointer-events:none;
}
.ba-handle{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px; background:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  cursor:ew-resize; z-index:4;
  touch-action:none;
}

.hero-overlay{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.02) 60%, rgba(0,0,0,.15) 100%);
}

.logo-top{
  position:absolute; top:30px; right:40px; z-index:5;
  text-align:right; pointer-events:auto;
}
.logo-name{
  font-size:28px; font-style:italic; font-weight:800; color:#fff; letter-spacing:-.5px; line-height:1;
}
.logo-sub{
  font-size:11px; letter-spacing:2px; opacity:.85; margin-top:2px; color:#fff; text-transform:lowercase;
}

.lang-toggle{
  position:absolute; top:30px; left:40px; z-index:6;
  display:flex; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25);
  border-radius:100px; padding:3px; backdrop-filter:blur(6px);
  pointer-events:auto;
}
.lang-toggle button{
  padding:5px 14px; border-radius:100px; font-size:11px; font-weight:600;
  letter-spacing:.08em; color:#fff; transition:background .15s, color .15s;
}
.lang-toggle button.active{ background:#fff; color:#111; }

.hero-content{
  position:relative; z-index:4;
  padding:55px 45px 0;
  pointer-events:none;
}
.hero-title{
  font-size:clamp(34px,4.9vw,84px);
  font-weight:600; line-height:1.03; letter-spacing:-2px; color:#fff;
}
.hero-title .line{ overflow:hidden; display:flex; align-items:center; flex-wrap:wrap; gap:0 16px; }
.hero-title .line .inner{
  display:inline-block;
  transform:translateY(110%);
  animation:rise .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-title .line:nth-child(1) .inner{ animation-delay:.25s; }
.hero-title .line:nth-child(2) .inner{ animation-delay:.4s; }
.hero-title .line:nth-child(3) .inner{ animation-delay:.55s; }
@keyframes rise{ to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-title .line .inner{ transform:none; animation:none; }
}
.block-icon-wrap{ display:inline-flex; align-items:center; }
.block-icon{ width:clamp(26px,2.8vw,50px); height:clamp(26px,2.8vw,50px); }

.bottom-bar{
  position:absolute; bottom:38px; left:45px; right:45px; z-index:4;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  pointer-events:none;
}
.hero-desc{
  color:#fff; font-size:clamp(15px,1.25vw,20px); line-height:1.4;
  max-width:420px; font-weight:400;
  pointer-events:auto;
}

.nav-container{
  position:absolute; bottom:38px; left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.97); border-radius:50px; padding:8px;
  z-index:6; pointer-events:auto;
  opacity:0; animation:fadeUp .7s ease .8s forwards;
}
@keyframes fadeUp{ from{opacity:0; transform:translateX(-50%) translateY(14px);} to{opacity:1; transform:translateX(-50%) translateY(0);} }
@media (prefers-reduced-motion: reduce){ .nav-container{ opacity:1; animation:none; } }
.nav-logo-pill{
  font-size:18px; font-style:italic; font-weight:800; color:#111; padding:0 32px; white-space:nowrap;
}
.contact-btn{
  background:#161616; color:#fff; padding:13px 26px; border-radius:50px;
  font-size:14px; font-weight:600; white-space:nowrap; transition:background .2s;
}
.contact-btn:hover{ background:#333; }

.cards-container{
  display:flex; gap:5px; z-index:5;
  pointer-events:auto;
  opacity:0; animation:fadeUp2 .7s ease .95s forwards;
}
@keyframes fadeUp2{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .cards-container{ opacity:1; animation:none; } }
.mini-card{
  position:relative;
  width:clamp(130px,10.5vw,200px);
  height:clamp(130px,10.5vw,208px);
  border-radius:10px; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:15px;
  border:1px solid rgba(255,255,255,.08);
  transition: transform .3s ease;
}
.mini-card:hover{ transform:translateY(-3px); }

.mc-pattern{
  position:absolute; inset:0; z-index:0;
  background-repeat:repeat;
  background-size:42px 42px;
  animation: mcpan 16s linear infinite;
}
@keyframes mcpan{
  from{ background-position:0 0; }
  to{ background-position:210px 210px; }
}
@media (prefers-reduced-motion: reduce){ .mc-pattern{ animation:none; } }

.card-discord{ background: linear-gradient(150deg,#5865f2,#3a44c4); }
.card-discord .mc-pattern{
  opacity:.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .044.083 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.1.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
}
.card-learn{ background: linear-gradient(150deg,#242424,#0a0a0a); }
.card-learn .mc-pattern{
  opacity:.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 28 20'%3E%3Crect width='12' height='20' rx='3' fill='white'/%3E%3Crect x='16' width='12' height='12' rx='3' fill='white'/%3E%3C/svg%3E");
  animation-direction: reverse;
}

.mc-title{ position:relative; z-index:1; color:#fff; font-size:clamp(13px,1vw,16px); font-weight:600; }
.mc-arrow{
  position:relative; z-index:1;
  align-self:flex-end;
  width:32px; height:32px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s;
}
.mini-card:hover .mc-arrow{ transform:rotate(45deg); }
.mc-arrow svg{ width:45%; height:45%; }

/* ------------------------------------------------------------ content */
.content-section{
  position:relative; z-index:2;
  background:#000;
  border-radius:var(--radius) var(--radius) 0 0;
  margin-top:-14px; padding-top:14px;
}
.desc-section{ padding-block:6rem; }
.desc-section .grid-12{ row-gap:3rem; align-items:start; }

.section-label{
  font-size:.68rem; font-weight:600; letter-spacing:.18em; color:var(--gray);
  margin-bottom:1rem; display:block;
}

/* scroll reveal — only when JS is available (html.js) */
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
html.js .reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
}

.desc-block h2{
  font-size:1.15rem; font-weight:800; margin-bottom:.85rem; letter-spacing:-.02em;
  display:flex; align-items:center; gap:8px;
}
.desc-block p{ font-size:.9rem; color:#999; line-height:1.85; }
.desc-block p + p{ margin-top:.8rem; }
.lang-flag{ display:inline-block; }

.formats-block{ display:flex; flex-direction:column; gap:.75rem; }
.formats-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.fmt-chip{
  background:#151515; border:1px solid #262626; border-radius:6px;
  padding:6px 14px; font-size:.75rem; font-family:ui-monospace,monospace; font-weight:600; color:#fff;
  transition:all .15s;
}
.fmt-chip:hover{ border-color:#444; background:#1c1c1c; }

.versions-bar{
  padding:2rem; background:#111; border:1px solid #222; border-radius:16px;
  display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
}
.vbar-label{ font-size:.72rem; font-weight:600; letter-spacing:.1em; color:var(--gray); white-space:nowrap; }
.vbar-range{ display:flex; align-items:center; gap:.75rem; flex:1; min-width:200px; }
.vbar-pill{
  background:#fff; color:#111; font-size:.78rem; font-weight:600;
  padding:5px 14px; border-radius:100px; white-space:nowrap;
}
.vbar-line{ flex:1; height:1px; background:#2a2a2a; }
.vbar-count{ font-size:.72rem; color:var(--gray); white-space:nowrap; }

.faq-section{ padding-top:0; }
.faq-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:1rem; }
.faq-item{
  border:1px solid #222; border-radius:10px; overflow:hidden; background:#0d0d0d;
}
.faq-q{
  display:block; padding:.9rem 1rem; font-size:.83rem; font-weight:600; cursor:pointer;
  list-style:none; color:#fff; transition:background .12s;
}
.faq-q:hover{ background:#161616; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-a{ padding:0 1rem .9rem; font-size:.8rem; color:#999; line-height:1.75; margin:0; }

.footer-row{ padding-top:1rem; border-top:1px solid #1a1a1a; }
.hero-meta{
  font-size:.75rem; color:var(--gray);
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.hero-meta a{ color:var(--blue); font-weight:600; }
.hero-meta a:hover{ text-decoration:underline; }
.meta-sep{ color:#333; }

/* -------------------------------------------------------------- modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  backdrop-filter:blur(10px); z-index:300;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:all; }
.modal{
  background:#fff; color:#111; border-radius:20px; width:100%; max-width:480px; padding:1.75rem;
  display:flex; flex-direction:column; gap:1.25rem;
  box-shadow:0 40px 100px rgba(0,0,0,.22);
  transform:translateY(20px) scale(.96);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
  max-height:92vh; max-height:92dvh; overflow-y:auto; margin-inline:1rem;
}
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.modal-title{ display:flex; align-items:center; gap:7px; font-size:.6rem; font-weight:600; letter-spacing:.14em; color:#888; }
.mdot{ width:7px; height:7px; border-radius:50%; background:#111; }
.mdot.busy{ background:#f59e0b; animation:pulse 1s infinite; }
@keyframes pulse{ 50%{ opacity:.4; } }
.modal-header-right{ display:flex; align-items:center; gap:8px; }
.server-chip{
  font-size:.56rem; font-weight:600; letter-spacing:.06em; color:#888;
  background:#f4f4f4; border-radius:100px; padding:4px 10px; white-space:nowrap;
}
.server-chip.waking{ color:#b45309; background:#fef3c7; }
.server-chip.busy{ color:#92400e; background:#fef3c7; }
.server-chip.ready{ color:#15803d; background:#dcfce7; }
.modal-close{
  background:#f0f0f0; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#888; transition:all .12s;
}
.modal-close:hover{ background:#ddd; color:#111; }

.drop-zone{
  border:1.5px dashed #ddd; border-radius:12px; min-height:110px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s;
}
.drop-zone:hover, .drop-zone.dz-over{ border-color:#111; background:#fafafa; }
.drop-inner{ display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:1.75rem; text-align:center; pointer-events:none; }
.drop-text{ font-size:.85rem; font-weight:600; color:#111; }
.drop-fmts{ font-size:.62rem; color:#999; letter-spacing:.04em; font-family:ui-monospace,monospace; }

.file-sel{ display:none; align-items:center; gap:.6rem; padding:.9rem 1rem; width:100%; color:#111; }
.fname{ font-size:.8rem; font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fsz{ font-size:.62rem; background:#f0f0f0; padding:2px 8px; border-radius:4px; color:#888; white-space:nowrap; font-family:ui-monospace,monospace; flex-shrink:0; }
.cbtn{ background:none; color:#999; font-size:.82rem; padding:3px 5px; transition:color .12s; }
.cbtn:hover{ color:#dc2626; }

.warn-note{
  display:none; align-items:flex-start; gap:.5rem;
  background:#fffbeb; border:1px solid #fde68a; color:#92400e;
  padding:.6rem .8rem; border-radius:10px; font-size:.72rem; line-height:1.5;
}
.warn-note.show{ display:flex; }

.mrow{ display:flex; gap:.75rem; align-items:flex-end; }
.vcol{ flex:1; display:flex; flex-direction:column; gap:.35rem; }
.flabel{ font-size:.58rem; font-weight:600; letter-spacing:.12em; color:#888; }
.selwrap{ position:relative; }
.selwrap select{
  width:100%; appearance:none; background:#f0f0f0; border-radius:9px;
  padding:10px 30px 10px 12px; font-family:var(--sans); font-size:.83rem; color:#111; cursor:pointer; outline:none; transition:background .12s;
}
.selwrap select:focus{ background:#e8e8e8; }
.sarrow{ position:absolute; right:10px; top:50%; transform:translateY(-50%); pointer-events:none; color:#888; font-size:.7rem; }

.cvtbtn{
  display:flex; align-items:center; gap:6px; background:#111; color:#fff; border-radius:9px;
  padding:10px 18px; font-size:.83rem; font-weight:600; transition:all .15s; white-space:nowrap; flex-shrink:0;
}
.cvtbtn:hover:not(:disabled){ background:#1a1a1a; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.cvtbtn:disabled{ background:#eee; cursor:not-allowed; transform:none; box-shadow:none; color:#aaa; }

.progwrap{ display:none; flex-direction:column; gap:.4rem; }
.progtrack{ height:4px; background:#eee; border-radius:3px; overflow:hidden; }
.progfill{ height:100%; background:linear-gradient(90deg,#111,#444); border-radius:3px; width:0%; transition:width .3s ease; }
.progmeta{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.proglabel{ font-size:.62rem; color:#888; font-family:ui-monospace,monospace; letter-spacing:.04em; }
.cancelbtn{
  font-size:.62rem; font-weight:600; color:#888; background:#f4f4f4;
  border-radius:6px; padding:4px 10px; transition:all .12s;
}
.cancelbtn:hover{ background:#fee2e2; color:#b91c1c; }

.reswrap{ display:none; flex-direction:column; gap:.5rem; }
.stats-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.stat{
  background:#fafafa; border:1px solid #eee; border-radius:8px; padding:7px 9px;
}
.stat b{ display:block; font-size:.74rem; font-weight:600; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat span{ font-size:.56rem; color:#999; letter-spacing:.06em; }
.stat.warn b{ color:#b45309; }
.ritem{ display:flex; align-items:center; justify-content:space-between; padding:.65rem .9rem; background:#f0f0f0; border-radius:10px; gap:.75rem; }
.rileft{ display:flex; align-items:center; gap:.5rem; min-width:0; flex:1; color:#888; }
.rname{ font-size:.78rem; font-weight:600; color:#111; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rsz{ font-size:.6rem; color:#888; font-family:ui-monospace,monospace; flex-shrink:0; }
.dlbtn{
  background:#111; color:#fff; font-size:.75rem; font-weight:600; padding:7px 14px; border-radius:8px;
  display:flex; align-items:center; gap:5px; transition:all .12s; flex-shrink:0;
}
.dlbtn:hover{ background:#1a1a1a; }
.dlall{
  align-self:flex-end; font-size:.66rem; font-weight:600; color:#555;
  border:1px solid #ddd; border-radius:6px; padding:5px 10px; transition:all .12s;
}
.dlall:hover{ border-color:#111; color:#111; }

.reconvert{ display:none; flex-direction:column; gap:.45rem; border-top:1px solid #eee; padding-top:.9rem; }
.reconvert.show{ display:flex; }
.reconvert .flabel{ display:block; }

.errwrap{
  display:none;
  background:#fff5f5; border:1px solid #fecaca; color:#b91c1c; padding:.75rem .9rem; border-radius:10px;
  font-size:.78rem; font-family:ui-monospace,monospace; line-height:1.6; align-items:flex-start; gap:.5rem;
}

.noscript-box{
  position:fixed; inset:auto 1rem 1rem 1rem; z-index:500; background:#b91c1c; color:#fff;
  padding:1rem 1.25rem; border-radius:12px; font-size:.85rem; text-align:center;
}

/* ------------------------------------------------------------- 404 */
.err-page{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; }
.err-page h1{ font-size:4rem; letter-spacing:-2px; }
.err-page a{ color:#5865f2; font-weight:600; }

@media (max-width:900px){
  .col-6{ grid-column:span 12; }
  .cards-container{ display:none; }
  .bottom-bar{ flex-direction:column; align-items:flex-start; gap:20px; }
  .nav-container{ position:static; transform:none; margin-top:0; width:100%; justify-content:center; animation-name:fadeIn; }
  @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
  .hero-content{ padding:76px 22px 0; }
  .logo-top{ top:24px; right:22px; }
  .lang-toggle{ top:24px; left:22px; }
  .faq-grid{ grid-template-columns:1fr; }
  .hero-title .line{ gap:0 8px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
}

.erricon{ flex-shrink:0; margin-top:1px; }
#reconvertBtn[hidden]{ display:none; }


/* --- v2 additions: preview, tips, repairs, recent, zip chip --- */
.preview-card{display:flex;align-items:center;gap:.8rem;margin:.7rem 0;padding:.7rem;
  border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03)}
.preview-card img{width:96px;height:auto;border-radius:6px;image-rendering:pixelated;display:block}
.repair-note{display:flex;gap:.55rem;align-items:flex-start;font-size:.8rem;color:#8fd3a8;
  background:rgba(60,160,90,.08);border:1px solid rgba(80,180,110,.18);border-radius:9px;
  padding:.55rem .8rem;margin:.55rem 0;line-height:1.45}
.we-tip{font-size:.78rem;color:#9aa3ad;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:.55rem .8rem;margin:.55rem 0}
.we-tip code{color:#5865f2;font-family:ui-monospace,monospace}
.recent-row{margin-top:.8rem}
.reclabel{font-size:.62rem;letter-spacing:.12em;color:#6b7480;margin-bottom:.4rem}
.recitem{display:inline-block;margin:0 .5rem .4rem 0;font-size:.75rem;color:#aeb6bf;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;
  padding:.35rem .7rem;text-decoration:none}
.recitem:hover{border-color:#5865f2;color:#fff}
.recver{color:#5865f2;font-weight:700;margin-left:.35rem}