/* ===== Design tokens (Clear Sky Serenity — matches linktree/mediakit/valorant-toolkit) ===== */
:root{
  --bg-grad: radial-gradient(130% 100% at 30% 0%, #1E6FA8 0%, #1a3d34 45%, #0a1710 100%);
  --accent: #6FA8D4;
  --accent-ink: #2F4A22;
  --gold: #7A9E4B;
  --gold-ink: #2F4A22;
  --ink: #CFE4F2;
  --ink-soft: rgba(207,228,242,.82);
  --ink-mute: rgba(207,228,242,.58);
  --card: #16281f;
  --card-hi: #1f3a2c;
  --card-border: rgba(111,168,212,.45);
  --radius: 18px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --maxw-wide: 1080px;
  --gap: 14px;
  --font: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Chakra Petch', var(--font);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
body{
  font-family:var(--font);
  color:var(--ink);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Home page is a single fixed screen — no scrolling, everything fits in one view */
body.page-home{
  height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
}

/* ===== Background (fixed, behind everything; looping video with a poster fallback) ===== */
.bg-photo{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:#0a1712; }
.bg-photo video{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.bg-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,14,20,.4) 0%, rgba(8,14,20,.05) 22%, rgba(8,14,20,.05) 68%, rgba(8,14,20,.5) 100%);
}

/* ===== Reveal ===== */
.js .reveal{ opacity:0; transform:translateY(16px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  *{ transition:none !important; }
}

/* ===== Section shell (shared by all content pages) ===== */
.section{ max-width:var(--maxw-wide); margin:0 auto; padding:24px 20px 56px; }
.section-title{
  font-family:var(--font-display); font-size:26px; font-weight:700; margin-bottom:24px; text-align:center;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.section-title span{ color:#FFD84D; }

/* ===== Top bar ===== */
.topbar{
  position:sticky; top:20px; z-index:50;
  display:flex; justify-content:center; align-items:center; gap:28px; flex-wrap:wrap;
  width:fit-content; margin:0 auto 0;
  padding:14px 28px; border-radius:999px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 24px rgba(0,0,0,.25);
}
.topbar a, .topbar button.topbar-btn{
  font-family:var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; white-space:nowrap;
  background:none; border:0; padding:0; cursor:pointer;
  text-shadow:0 1px 6px rgba(0,0,0,.3);
  transition:color .15s ease;
}
.topbar a:hover, .topbar button.topbar-btn:hover,
.topbar button.topbar-btn.is-active{
  color:#FFD84D;
  text-shadow:0 0 8px rgba(255,216,77,.85), 0 0 22px rgba(255,216,77,.55);
}
.topbar button.topbar-brand{ font-weight:900; letter-spacing:.01em; }

/* ===== Tabs (in-page: switching never leaves the video background) ===== */
.tabs{ position:relative; flex:1; min-height:0; }
.tab-panel{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s .45s;
  overflow-y:auto;
}
.tab-panel.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease, visibility 0s;
}
.panel-scroll{ max-width:var(--maxw-wide); margin:0 auto; padding:110px 20px 64px; }

/* ===== Subpage back link ===== */
.subpage-head{ max-width:var(--maxw-wide); margin:0 auto; padding:24px 20px 0; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.3); transition:color .15s ease;
}
.back-link:hover{ color:#FFD84D; }

/* ===== Hero (clean: title + socials directly on the background) ===== */
.hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px; text-align:center; padding:24px 20px;
}
.hero-title{
  font-family:var(--font); font-weight:900; line-height:1; letter-spacing:-.01em;
  font-size:clamp(52px, 12vw, 116px); color:#fff;
  text-shadow:0 2px 0 rgba(8,14,10,.2), 0 2px 14px rgba(0,0,0,.45), 0 20px 50px rgba(0,0,0,.35);
}
.btn{
  font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.03em;
  padding:12px 26px; border-radius:999px; display:inline-block;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary{ background:#FFD84D; color:#141a12; }
.btn-primary:hover{ transform:translateY(-2px); }

.socials{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.socials a{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 8px 20px rgba(0,0,0,.25);
  color:#fff;
  transition:transform .18s ease, background .18s ease;
}
.socials a:hover{ background:rgba(255,255,255,.28); transform:translateY(-3px); }

/* Home hero socials — tinted with each platform's brand color */
#tab-home .socials a:nth-child(1){ background:rgba(88,101,242,.55); } /* Discord */
#tab-home .socials a:nth-child(1):hover{ background:rgba(88,101,242,.85); }
#tab-home .socials a:nth-child(2){ background:rgba(255,0,0,.55); } /* YouTube */
#tab-home .socials a:nth-child(2):hover{ background:rgba(255,0,0,.85); }
#tab-home .socials a:nth-child(3){ background:linear-gradient(45deg, rgba(240,148,51,.75), rgba(230,104,60,.75), rgba(220,39,67,.75), rgba(204,35,102,.75), rgba(188,24,136,.75)); } /* Instagram */
#tab-home .socials a:nth-child(3):hover{ background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
#tab-home .socials a:nth-child(4){ background:rgba(0,0,0,.6); } /* X */
#tab-home .socials a:nth-child(4):hover{ background:rgba(0,0,0,.85); }
#tab-home .socials a:nth-child(5){ background:rgba(145,70,255,.55); } /* Twitch */
#tab-home .socials a:nth-child(5):hover{ background:rgba(145,70,255,.85); }
#tab-home .socials a:nth-child(6){ background:rgba(255,100,51,.55); } /* Ko-fi */
#tab-home .socials a:nth-child(6):hover{ background:rgba(255,100,51,.85); }
.socials a svg{ width:22px; height:22px; }

.foot{ text-align:center; font-size:12px; color:var(--ink-mute); margin:34px 0; }

/* ===== Settings (glass, matching the topbar/social chips) ===== */
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; max-width:640px; margin:0 auto; }
.menu-card{
  color:#fff; text-align:center;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 24px rgba(0,0,0,.22);
  border:none; border-radius:var(--radius-lg); padding:26px 18px; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.menu-card:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }
.menu-icon{ width:40px; height:40px; object-fit:contain; margin:0 auto 12px; }
.menu-name{ font-family:var(--font-display); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }

.panel-back{
  display:inline-flex; align-items:center; margin-bottom:18px;
  font-family:var(--font-display); font-weight:700; font-size:13px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.3);
  background:none; border:none; cursor:pointer; padding:6px 0;
  transition:color .15s ease;
}
.panel-back:hover{ color:#FFD84D; }

.crosshair-block{
  max-width:640px; margin:0 auto 32px; color:#fff;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius); padding:20px 24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 24px rgba(0,0,0,.22);
}
.crosshair-code-row{ display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.crosshair-code{
  flex:1; min-width:200px; font-family:monospace; font-size:13px; color:#fff;
  background:rgba(0,0,0,.28); padding:10px 12px; border-radius:var(--radius-sm); word-break:break-all;
}
.copy-btn{
  font-family:var(--font-display); font-size:12px; font-weight:700; padding:8px 16px;
  border-radius:999px; background:#fff; color:#141a12;
  cursor:pointer; border:0; transition:background .15s ease, color .15s ease;
}
.copy-btn:hover{ background:#FFD84D; }
.copy-btn.copied{ background:#FFD84D; }
.swatch-row{ display:flex; gap:16px; margin-top:14px; }
.swatch{ display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.75); }
.swatch-dot{ width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }

.sens-table{ max-width:640px; margin:0 auto; width:100%; border-collapse:collapse; color:#fff; }
.sens-table tr{ border-bottom:1px solid rgba(255,255,255,.2); }
.sens-table td{ padding:12px 8px; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.3); }
.sens-table td:last-child{ text-align:right; font-family:var(--font-display); font-weight:700; color:#FFD84D; }

/* ===== My Setup ===== */
.stat-group{ margin-bottom:36px; }
.stat-group:last-child{ margin-bottom:0; }
.stat-group-title{
  font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.3); margin-bottom:14px; text-align:center;
}
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.stat-card{
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius); padding:14px 16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 24px rgba(0,0,0,.22);
}
.stat-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.7); }
.stat-value{ display:block; margin-top:4px; font-family:var(--font-display); font-size:14px; font-weight:700; color:#fff; }
.stat-card:has(.stat-icon){ text-align:center; }
.stat-icon{ width:64px; height:64px; object-fit:contain; display:block; margin:0 auto 10px; }

/* ===== Contact ===== */
.contact-block{ text-align:center; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.3); }
.contact-btn{ margin-top:16px; }
.contact-alt{ margin-top:34px; }

/* ===== Content Portal (native port of the Valorant Toolkit, restyled to match) ===== */
.btn-ghost{ background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); }
.btn-ghost:hover{ background:rgba(255,255,255,.24); }

.vt-shell{ width:100%; max-width:var(--maxw-wide); margin:0 auto 56px; }
.vt-tag{ text-align:center; color:rgba(255,255,255,.75); text-shadow:0 1px 6px rgba(0,0,0,.3); margin:8px 0 26px; }

.vt-category-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; max-width:520px; margin:0 auto; }
.vt-category-card{
  display:flex; flex-direction:column; gap:6px; text-align:left; color:#fff;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 24px rgba(0,0,0,.22);
  border:none; border-radius:var(--radius-lg); padding:22px; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.vt-category-card:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }
.vt-category-card:disabled{ opacity:.5; cursor:not-allowed; }
.vt-category-card:disabled:hover{ background:rgba(255,255,255,.14); transform:none; }
.vt-category-name{ font-family:var(--font-display); font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px; }
.vt-category-desc{ font-size:13px; color:rgba(255,255,255,.75); }
.vt-soon-badge{
  font-family:var(--font-display); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:#FFD84D; color:#141a12; border-radius:999px; padding:2px 8px;
}

.vt-back{
  display:inline-flex; align-items:center; margin-bottom:14px;
  font-family:var(--font-display); font-weight:700; font-size:13px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.3);
  background:none; border:none; cursor:pointer; padding:6px 0;
  transition:color .15s ease;
}
.vt-back:hover{ color:#FFD84D; }

.vt-resource-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; max-width:660px; margin:0 auto; }
.vt-resource-card{
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius); padding:14px; text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 24px rgba(0,0,0,.22);
  color:#fff;
}
.vt-resource-icon{ width:40px; height:40px; object-fit:contain; display:block; margin:0 auto 8px; }
.vt-resource-name{ font-family:var(--font-display); font-size:14px; font-weight:700; margin-bottom:2px; }
.vt-resource-desc{ font-size:10.5px; color:rgba(255,255,255,.75); margin-bottom:10px; }
.vt-resource-site{ display:inline-block; margin-top:8px; font-size:10.5px; color:rgba(255,255,255,.6); }
.vt-resource-site:hover{ color:#fff; }
.vt-resource-card .btn{ padding:8px 14px; font-size:12px; }

.vt-dl-details{ display:inline-block; }
.vt-dl-details summary{ list-style:none; cursor:pointer; }
.vt-dl-details summary::-webkit-details-marker{ display:none; }
.vt-dl-menu{
  display:flex; flex-direction:column; gap:6px; margin-top:10px; max-width:200px; text-align:left;
  background:rgba(255,255,255,.14); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius); padding:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.vt-dl-menu a{
  font-family:var(--font); font-weight:700; font-size:13px; color:#fff;
  padding:8px 12px; border-radius:8px; transition:background .15s ease;
}
.vt-dl-menu a:hover{ background:rgba(255,255,255,.15); }

.vt-tabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.vt-tab-btn{
  font-family:var(--font-display); font-weight:700; font-size:14px; color:#fff;
  background:rgba(255,255,255,.12); border:none; padding:10px 20px; border-radius:999px;
  cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  transition:background .15s ease, color .15s ease;
}
.vt-tab-btn[aria-selected="true"]{ background:#FFD84D; color:#141a12; box-shadow:none; }
.vt-tab-btn:hover{ background:rgba(255,255,255,.22); }
.vt-tab-btn[aria-selected="true"]:hover{ background:#FFD84D; }

.vt-search{
  display:block; width:100%; max-width:420px; margin:0 auto 22px;
  font-family:var(--font); font-size:15px; color:#fff;
  background:rgba(255,255,255,.14); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); border-radius:999px;
  padding:12px 20px;
}
.vt-search::placeholder{ color:rgba(255,255,255,.6); }

.vt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.vt-asset-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:rgba(255,255,255,.14); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:none; border-radius:var(--radius); padding:14px 10px;
  cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  transition:background .15s ease, transform .15s ease;
  position:relative;
}
.vt-asset-card:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }
.vt-asset-card img{ width:72px; height:72px; object-fit:contain; }
.vt-asset-name{ font-family:var(--font-display); font-size:13px; font-weight:700; color:#fff; }
.vt-asset-sub{ font-family:var(--font-display); font-size:11px; color:rgba(255,255,255,.65); }
.vt-slot-badge{
  position:absolute; top:8px; right:8px; font-family:var(--font-display); font-size:10px; font-weight:700; color:#141a12;
  background:#FFD84D; border-radius:999px; padding:2px 7px;
}
.vt-loading{ text-align:center; color:rgba(255,255,255,.75); padding:40px 0; grid-column:1/-1; }
.vt-gallery-error{ grid-column:1 / -1; text-align:center; padding:40px 0; display:flex; flex-direction:column; gap:14px; align-items:center; color:#fff; }

.vt-card{
  background:rgba(255,255,255,.14); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 24px rgba(0,0,0,.22);
  border-radius:var(--radius-lg); padding:20px; color:#fff;
}
.vt-label{ font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); font-weight:700; }
.vt-soon{ max-width:480px; margin:0 auto; text-align:center; }
.vt-soon h2{ font-family:var(--font-display); font-size:22px; margin:10px 0; color:#fff; }
.vt-soon p:not(.vt-label){ color:rgba(255,255,255,.75); }

.vt-lightbox[hidden]{ display:none; }
.vt-lightbox{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.vt-lightbox-backdrop{ position:absolute; inset:0; background:rgba(8,12,10,.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vt-lightbox-card{
  position:relative; background:rgba(20,26,22,.55); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:#fff; border-radius:var(--radius-lg); padding:26px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 30px 80px rgba(0,0,0,.5);
  max-width:360px; width:100%; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center;
}
.vt-lightbox-card img{ width:180px; height:180px; object-fit:contain; }
.vt-lightbox-close{
  position:absolute; top:10px; right:10px; background:none; border:none; color:#fff; opacity:.7;
  font-size:18px; cursor:pointer; padding:6px;
}
.vt-lightbox-close:hover{ opacity:1; }
.vt-lightbox-name{ font-family:var(--font-display); font-weight:700; }

.vt-legal{ max-width:var(--maxw-wide); margin:24px auto 0; text-align:center; color:rgba(255,255,255,.55); font-size:9px; line-height:1.5; padding:0 20px; }

/* ===== MP4/MP3 Downloader (native port of the Isotloader web preview) ===== */

.il-disclaimer{ max-width:520px; margin:-2px auto 14px; text-align:center; color:rgba(255,255,255,.55); font-size:11px; line-height:1.5; }
.il-disclaimer a{ text-decoration:underline; color:rgba(255,255,255,.7); }
.il-disclaimer a:hover{ color:#FFD84D; }

.il-card{
  max-width:520px; margin:0 auto 14px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 24px rgba(0,0,0,.22);
  border-radius:var(--radius-lg); padding:18px;
  color:#fff;
  display:flex; flex-direction:column; gap:12px;
}
.il-card[hidden]{ display:none; }
.il-card label{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.7); display:block; margin-bottom:4px; }
.il-card input[type="text"], .il-card select{
  width:100%; font-family:var(--font); font-size:15px; color:#fff;
  background:rgba(0,0,0,.28); border:none; border-radius:var(--radius-sm); padding:10px 12px; outline:none;
}
.il-card input[type="text"]::placeholder{ color:rgba(255,255,255,.55); }
.il-card input[type="text"]:focus, .il-card select:focus{ box-shadow:0 0 0 3px rgba(255,216,77,.35); }
.il-card select option{ color:#141a12; }

#il-url-bar{ flex-direction:row; align-items:center; flex-wrap:wrap; max-width:640px; }
#il-url-bar input{ flex:1; min-width:180px; }

.il-toggle-row{ display:flex; background:rgba(0,0,0,.28); border-radius:999px; overflow:hidden; }
.il-toggle-row button{
  flex:1; background:transparent; color:rgba(255,255,255,.75); border:none; cursor:pointer;
  padding:9px 16px; font-family:var(--font-display); font-weight:700; font-size:13px;
  transition:background .15s ease, color .15s ease;
}
.il-toggle-row button.active{ background:#FFD84D; color:#141a12; }

#il-info-block{ flex-direction:row; align-items:center; gap:14px; }
#il-info-thumb{ width:120px; height:72px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; background:rgba(0,0,0,.2); }
#il-info-title{ font-weight:700; }
#il-info-duration{ font-size:13px; color:rgba(255,255,255,.65); margin-top:4px; }

.il-btn-row{ display:flex; gap:10px; }
.il-btn-row button{ flex:1; }

.il-trim-row{ display:flex; gap:10px; }
.il-trim-row > div{ flex:1; }

.il-progress-track{ width:100%; height:12px; background:rgba(0,0,0,.28); border-radius:999px; overflow:hidden; }
.il-progress-fill{ height:100%; width:0%; background:#FFD84D; border-radius:999px; transition:width .2s ease-out; }
#il-progress-label{ font-size:13px; color:rgba(255,255,255,.7); }

.il-done{ background:rgba(255,216,77,.16); border-radius:var(--radius-sm); padding:10px 12px; font-size:13px; word-break:break-all; }
.il-error{
  max-width:520px; margin:0 auto; background:rgba(224,112,138,.22);
  border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; color:#fff; word-break:break-all;
}
@keyframes ilRiseIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.il-anim-in{ animation:ilRiseIn 200ms cubic-bezier(0.16,1,0.3,1); }
@media (prefers-reduced-motion: reduce){ .il-anim-in{ animation:none; } }

/* ===== Responsive (phones / small tablets) ===== */
@media (max-width: 700px){
  /* Nav pill: tighter so it wraps to at most two rows instead of overflowing */
  .topbar{
    gap:12px; padding:10px 16px; top:12px;
    max-width:calc(100vw - 16px);
  }
  .topbar a, .topbar button.topbar-btn{ font-size:11px; letter-spacing:.03em; }

  /* Hero: keep title + all six icons on one screen, icons on one row */
  .hero{ gap:24px; padding:20px 16px; }
  .socials{ gap:10px; }
  .socials a{ width:44px; height:44px; }
  .socials a svg{ width:19px; height:19px; }

  /* Panels: reclaim the generous desktop padding */
  .panel-scroll{ padding:88px 16px 48px; }
  .section-title{ font-size:22px; margin-bottom:18px; }
  .foot{ margin:18px 0; }

  /* Denser grids so specs/assets stay scannable instead of one long column */
  .stat-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
  .stat-icon{ width:52px; height:52px; }
  .menu-grid{ grid-template-columns:repeat(auto-fit,minmax(95px,1fr)); gap:10px; }
  .menu-card{ padding:18px 10px; }
  .menu-icon{ width:34px; height:34px; margin-bottom:8px; }
  .menu-name{ font-size:12px; }
  .vt-shell{ margin-bottom:36px; }

  /* Toolbox asset tabs */
  .vt-tabs{ gap:6px; margin-bottom:16px; }
  .vt-tab-btn{ font-size:12px; padding:8px 14px; }
  .vt-grid{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
  .vt-asset-card img{ width:60px; height:60px; }

  /* Downloader: URL field gets its own row above the mode toggle + fetch */
  #il-url-bar{ gap:10px; }
  #il-url-bar input{ flex:1 1 100%; min-width:0; }
  .il-card{ padding:14px; }
  #il-info-block{ gap:10px; }
  #il-info-thumb{ width:92px; height:56px; }
}

/* Very short viewports (landscape phones): let the home screen scroll rather
   than clip, since a single fixed screen genuinely cannot fit here. */
@media (max-height: 520px){
  body.page-home{ height:auto; min-height:100dvh; overflow-y:auto; }
  .tabs{ min-height:0; }
  .tab-panel{ position:relative; inset:auto; }
  .tab-panel:not(.is-active){ display:none; }
  .hero{ min-height:60vh; }
}