.page-skins { --skin-accent: var(--rocket-red); }
.skins-main { display: grid; gap: 28px; }
.skins-page-header { min-height: 360px; grid-template-columns: minmax(0, 1.05fr) minmax(310px, .65fr); overflow: hidden; }
.skins-page-header::after { content: ""; position: absolute; width: 440px; height: 440px; right: -120px; top: -150px; border: 1px solid rgba(229,28,47,.16); border-radius: 50%; box-shadow: 0 0 0 72px rgba(229,28,47,.025), 0 0 0 145px rgba(229,28,47,.012); }
.skins-intro-note { width:min(100%,620px); margin:12px 0 0; color:var(--rocket-muted); font-size:.88rem; line-height:1.55; }
.skins-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.skins-hero-stats span { padding: 7px 11px; border: 1px solid var(--rocket-border); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--rocket-muted); font-size: .76rem; font-weight: 800; }
.skins-hero-stats strong { color: #fff; }
.skins-hero-model { min-height: 300px; display: grid; place-items: center; position: relative; z-index: 2; }
.skins-catalog-section,.skins-collection-section,.skins-global-results { width: min(100%, var(--rocket-content)); margin-inline: auto; }
.skins-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.skins-section-heading h2,.skins-collection-title h2 { margin: 3px 0 0; font-size: clamp(1.7rem,3vw,2.6rem); letter-spacing: -.04em; }
.skins-section-heading p,.skins-collection-title p { margin: 0; color: var(--rocket-muted); }
.skins-global-search { width:min(100%,560px); margin-top:18px; display:grid; gap:7px; color:var(--rocket-muted); font-size:.72rem; font-weight:900; }
.skins-global-search input { width:100%; min-height:48px; padding:0 15px; border:1px solid var(--rocket-border-strong); border-radius:12px; background:#0e0f13; color:#fff; font:inherit; font-size:.9rem; font-weight:600; }
.skins-global-search input::placeholder { color:#777a83; }
.skins-global-search input:focus { outline:2px solid rgba(229,28,47,.22); border-color:rgba(229,28,47,.65); }
.skins-global-results { scroll-margin-top:120px; }
.skins-global-result-count { padding-bottom:5px; color:var(--rocket-muted); font-size:.76rem; font-weight:900; white-space:nowrap; }
.skin-category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.skin-category-card { --category-accent: #e51c2f; min-width: 0; padding: 0; overflow: hidden; position: relative; text-align: left; border: 1px solid var(--rocket-border); border-radius: 21px; background: linear-gradient(150deg,color-mix(in srgb,var(--category-accent) 14%,transparent),transparent 52%),var(--rocket-panel); box-shadow: var(--rocket-shadow-sm); cursor: pointer; transition: transform 180ms ease,border-color 180ms ease,background 180ms ease; }
.skin-category-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--category-accent) 50%,var(--rocket-border)); }
.skin-category-card[data-category="halloween"]{--category-accent:#9f67ff}.skin-category-card[data-category="ben-10"]{--category-accent:#60e56c}.skin-category-card[data-category="glacial"]{--category-accent:#71d8ff}.skin-category-card[data-category="one-piece"]{--category-accent:#f1c34f}.skin-category-card[data-category="copa-2026"]{--category-accent:#e8e8e8}.skin-category-card[data-category="naruto"]{--category-accent:#ff8a3c}.skin-category-card[data-category="ancestral"]{--category-accent:#d4a65a}.skin-category-card[data-category="herois-viloes"]{--category-accent:#59a7ff}.skin-category-card[data-category="hollow-knight"]{--category-accent:#e5e6ef}.skin-category-card[data-category="natal"]{--category-accent:#4bd68a}.skin-category-card[data-category="colisao-digital"]{--category-accent:#26d5ff}.skin-category-card[data-category="primeiro-de-abril"]{--category-accent:#ff71b8}.skin-category-card[data-category="anime"]{--category-accent:#ff516a}.skin-category-card[data-category="zodiacos"]{--category-accent:#f0b543}.skin-category-card[data-category="inversao-no-jardim"]{--category-accent:#9adf63}
.skin-category-card__preview { min-height: 220px; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--category-accent) 18%,transparent),transparent 54%); }
.skin-category-card__preview::after { content:""; width: 150px; height: 150px; position:absolute; border:1px solid color-mix(in srgb,var(--category-accent) 24%,transparent); border-radius:50%; box-shadow:0 0 0 30px color-mix(in srgb,var(--category-accent) 4%,transparent); }
.skin-category-card__body { min-height: 132px; padding: 18px; position: relative; z-index: 2; border-top: 1px solid var(--rocket-border); background: rgba(12,13,17,.72); backdrop-filter: blur(8px); }
.skin-category-card__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.skin-category-card h3 { margin:0; font-size:1.22rem; letter-spacing:-.025em; }
.skin-category-card__count { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:color-mix(in srgb,var(--category-accent) 14%,transparent); color:#fff; font-size:.69rem; font-weight:900; }
.skin-category-card p { min-height: 40px; margin:8px 0 0; color:var(--rocket-muted); font-size:.82rem; line-height:1.45; }
.skin-category-card__action { display:inline-flex; align-items:center; gap:7px; margin-top:11px; color:#fff; font-size:.75rem; font-weight:900; }
.skin-model-preview { width:100%; height:100%; position:relative; z-index:2; object-fit:contain; opacity:0; transform:scale(.96); filter:none; transition:opacity 180ms ease,transform 180ms ease; }
.skin-model-preview.is-loaded { opacity:1; transform:scale(1); }
.skin-model-preview.is-error { opacity:.28; }
.skin-preview-frame { min-height:210px; display:grid; place-items:center; overflow:hidden; position:relative; }
.skin-preview-frame::before { content:""; width:52px; height:52px; position:absolute; border:3px solid rgba(255,255,255,.08); border-top-color:var(--skin-accent); border-radius:50%; animation:skin-spin .85s linear infinite; }
.skin-preview-frame.has-preview::before,.skin-preview-frame.has-error::before { display:none; }

.skin-preview-frame--hero { width:min(100%,420px); height:320px; }
.skin-model-preview--hero { width:112%; height:112%; filter:none; }

@keyframes skin-spin { to { transform:rotate(360deg); } }
.skins-collection-toolbar { display:flex; align-items:flex-start; gap:18px; margin-bottom:18px; }
.skins-back-button { min-height:44px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; border:1px solid var(--rocket-border-strong); border-radius:11px; background:rgba(255,255,255,.04); font-weight:900; cursor:pointer; }
.skins-back-button:hover { border-color:rgba(229,28,47,.5); background:rgba(229,28,47,.1); }
.skins-filter-panel { padding:13px; margin-bottom:16px; display:grid; grid-template-columns:minmax(220px,.8fr) minmax(420px,1.2fr) auto; align-items:end; gap:12px; border:1px solid var(--rocket-border); border-radius:16px; background:var(--rocket-panel); }
.skins-search-field { display:grid; gap:5px; color:var(--rocket-muted); font-size:.72rem; font-weight:800; }
.skins-search-field input { width:100%; min-height:43px; padding:0 13px; border:1px solid var(--rocket-border-strong); border-radius:10px; background:#0e0f13; color:#fff; }
.skins-rarity-filters { display:flex; flex-wrap:wrap; gap:6px; }
.skins-rarity-filters button { min-height:39px; padding:0 11px; border:1px solid var(--rocket-border); border-radius:9px; background:rgba(255,255,255,.035); color:var(--rocket-muted); font-size:.72rem; font-weight:900; cursor:pointer; }
.skins-rarity-filters button:hover,.skins-rarity-filters button.is-active { border-color:rgba(229,28,47,.48); background:rgba(229,28,47,.12); color:#fff; }
.skins-result-count { padding-bottom:10px; color:var(--rocket-muted); font-size:.75rem; font-weight:800; white-space:nowrap; }
.skin-card-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.skin-card { min-width:0; padding:0; overflow:hidden; position:relative; text-align:left; border:1px solid var(--rocket-border); border-radius:14px; background:var(--rocket-panel); cursor:pointer; transition:transform 160ms ease,border-color 160ms ease; }
.skin-card:hover { transform:translateY(-2px); border-color:rgba(229,28,47,.42); }
.skin-card:disabled { cursor:not-allowed; opacity:.6; transform:none; }
.skin-card__visual { height:170px; display:grid; place-items:center; position:relative; background:radial-gradient(circle at 50% 70%,rgba(229,28,47,.1),transparent 56%),#111217; }
.skin-card__visual .skin-model-preview { padding:6px; }
.skin-card__badges { position:absolute; inset:7px 7px auto; z-index:3; display:flex; justify-content:space-between; gap:5px; pointer-events:none; }
.skin-card__badge { padding:3px 6px; border:1px solid rgba(255,255,255,.11); border-radius:999px; background:rgba(8,9,12,.78); color:#ddd; font-size:.59rem; font-weight:900; backdrop-filter:blur(6px); }
.skin-card__badge--legendary{color:#ffd76c}.skin-card__badge--mythical{color:#e7a6ff}.skin-card__badge--rare{color:#8fd9ff}.skin-card__badge--common{color:#b8bbc2}
.skin-card__body { min-height:84px; padding:10px; border-top:1px solid var(--rocket-border); }
.skin-card h3 { margin:0; overflow:hidden; color:#fff; font-size:.86rem; text-overflow:ellipsis; white-space:nowrap; }
.skin-card p { margin:3px 0 0; color:var(--rocket-muted); font-size:.66rem; }
.skin-card__features { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.skin-card__feature { padding:3px 5px; border-radius:6px; background:rgba(255,255,255,.045); color:#bfc0c7; font-size:.57rem; font-weight:800; }
.skins-empty-state { min-height:220px; display:grid; place-items:center; align-content:center; gap:5px; border:1px dashed var(--rocket-border-strong); border-radius:18px; color:var(--rocket-muted); text-align:center; }
.skins-empty-state strong { color:#fff; }
.skin-modal { position:fixed; inset:0; z-index:4000; display:grid; place-items:center; padding:18px; }
.skin-modal__backdrop { position:absolute; inset:0; background:rgba(2,3,5,.84); backdrop-filter:blur(10px); }
.skin-modal__dialog { width:min(1180px,100%); max-height:min(880px,calc(100vh - 36px)); overflow:hidden; position:relative; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.58fr); border:1px solid var(--rocket-border-strong); border-radius:24px; background:#0e0f13; box-shadow:0 38px 120px rgba(0,0,0,.7); }
.skin-modal__close { width:42px; height:42px; padding:0; position:absolute; right:12px; top:12px; z-index:6; border:1px solid var(--rocket-border-strong); border-radius:50%; background:rgba(9,10,13,.86); color:#fff; font-size:1.55rem; line-height:1; cursor:pointer; }
.skin-modal__viewer-column { min-width:0; min-height:0; padding:16px; display:flex; flex-direction:column; background:radial-gradient(circle at 50% 55%,rgba(229,28,47,.075),transparent 47%),#090a0d; }
.skin-modal__stage-host { min-height:440px; flex:1 1 auto; }
.skin-render-stage { width:100%; height:100%; min-height:360px; position:relative; overflow:hidden; border:1px solid var(--rocket-border); border-radius:17px; background:#101116; }
.skin-render-stage.transparent-stage { background-image:linear-gradient(45deg,#15161c 25%,transparent 25%),linear-gradient(-45deg,#15161c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#15161c 75%),linear-gradient(-45deg,transparent 75%,#15161c 75%); background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0; }
.skin-render-stage canvas { width:100%; height:100%; display:block; touch-action:none; }
.skin-render-badge,.skin-render-status { position:absolute; z-index:2; border:1px solid var(--rocket-border); background:rgba(8,9,12,.78); color:#c9cad0; font-size:.68rem; backdrop-filter:blur(7px); pointer-events:none; }
.skin-render-badge { top:11px; padding:6px 9px; border-radius:999px; }.skin-render-badge--left{left:11px}.skin-render-badge--right{right:11px}
.skin-render-status { left:50%; bottom:11px; max-width:calc(100% - 24px); padding:6px 10px; border-radius:999px; text-align:center; transform:translateX(-50%); }
.skin-viewer-toolbar { display:grid; grid-template-columns:minmax(180px,1.5fr) minmax(90px,.55fr) repeat(3,auto); gap:7px; margin-top:9px; }
.skin-viewer-toolbar label { display:grid; gap:3px; color:var(--rocket-muted); font-size:.64rem; font-weight:800; }
.skin-viewer-toolbar select,.skin-viewer-toolbar button { min-height:39px; padding:0 10px; border:1px solid var(--rocket-border-strong); border-radius:9px; background:#17181e; color:#fff; font-size:.72rem; font-weight:800; }
.skin-viewer-toolbar button { align-self:end; cursor:pointer; }
.skin-viewer-timeline { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-top:8px; color:var(--rocket-muted); font-size:.67rem; }
.skin-viewer-timeline input { width:100%; accent-color:var(--rocket-red); }
.skin-viewer-help { margin:5px 0 0; color:var(--rocket-faint); font-size:.65rem; text-align:center; }
.skin-modal__info { min-width:0; padding:32px 24px 24px; overflow:auto; border-left:1px solid var(--rocket-border); background:var(--rocket-panel); }
.skin-modal__info h2 { margin:10px 0 2px; font-size:clamp(2rem,4vw,3.3rem); letter-spacing:-.055em; line-height:.95; }
.skin-modal__collection { margin:0; color:var(--rocket-muted); }
.skin-rarity-badge { display:inline-flex; padding:5px 8px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.045); font-size:.66rem; font-weight:900; }
.skin-rarity-badge[data-rarity="legendary"]{color:#ffd76c}.skin-rarity-badge[data-rarity="mythical"]{color:#e7a6ff}.skin-rarity-badge[data-rarity="rare"]{color:#8fd9ff}
.skin-modal__meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.skin-modal__meta span { padding:5px 8px; border-radius:7px; background:rgba(255,255,255,.04); color:#bcbec5; font-size:.65rem; font-weight:800; }
.skin-detail-group { margin-top:22px; }
.skin-detail-label { display:block; margin-bottom:8px; color:#fff; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.skin-form-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.skin-form-button,.skin-shiny-button { min-height:42px; padding:7px 11px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--rocket-border-strong); border-radius:10px; background:rgba(255,255,255,.04); color:#ddd; font-size:.72rem; font-weight:900; cursor:pointer; }
.skin-form-button img { width:22px; height:22px; object-fit:contain; image-rendering:pixelated; }
.skin-form-button:hover,.skin-form-button.is-active,.skin-shiny-button:hover,.skin-shiny-button.is-active { border-color:rgba(229,28,47,.5); background:rgba(229,28,47,.12); color:#fff; }
.skin-shiny-button:disabled { opacity:.38; cursor:not-allowed; }
.skin-shiny-star { color:#f5d45e; font-size:1.18rem; line-height:1; }
.skin-rotate-control { margin-top:22px; display:flex; align-items:center; gap:9px; color:#d6d6db; font-size:.76rem; font-weight:800; cursor:pointer; }
.skin-rotate-control input { width:18px; height:18px; accent-color:var(--rocket-red); }
.skin-file-status { margin-top:20px; padding:10px 11px; border:1px solid var(--rocket-border); border-radius:10px; background:rgba(255,255,255,.025); color:var(--rocket-muted); font-size:.68rem; }
.skin-renderer-parking { width:360px; height:360px; position:fixed; left:-200vw; top:0; pointer-events:none; }
body.skin-modal-open { overflow:hidden; }
@media(max-width:1120px){.skin-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.skin-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skins-filter-panel{grid-template-columns:1fr}.skins-result-count{padding:0}}
@media(max-width:860px){.skins-page-header{grid-template-columns:1fr}.skins-hero-model{min-height:230px}.skin-preview-frame--hero{height:240px}.skins-section-heading{align-items:flex-start;flex-direction:column;gap:9px}.skin-modal__dialog{overflow:auto;grid-template-columns:1fr}.skin-modal__viewer-column{min-height:620px}.skin-modal__info{border-left:0;border-top:1px solid var(--rocket-border)}.skin-viewer-toolbar{grid-template-columns:1fr 1fr 1fr}.skin-modal__stage-host{min-height:410px}.skin-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.skins-global-search{max-width:none}.skins-global-result-count{padding-bottom:0}.skin-category-grid{grid-template-columns:1fr}.skins-collection-toolbar{display:grid}.skin-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skin-card__visual{height:150px}.skin-viewer-toolbar{grid-template-columns:1fr 1fr}.skin-modal{padding:7px}.skin-modal__dialog{max-height:calc(100vh - 14px);border-radius:17px}.skin-modal__viewer-column{min-height:540px;padding:8px}.skin-modal__stage-host{min-height:350px}.skin-modal__info{padding:25px 16px 20px}.skin-render-badge--right{display:none}}
@media(max-width:390px){.skin-card-grid{grid-template-columns:1fr 1fr;gap:7px}.skin-card__body{padding:8px}.skin-card h3{font-size:.8rem}.skin-card__visual{height:138px}}

.skin-category-card__new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb,var(--category-accent) 72%,#fff);
  border-radius: 999px;
  background: rgba(8,9,12,.86);
  color: #fff;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.skin-card__badge-group { display:flex; gap:4px; }
.skin-card__badge--new {
  border-color: rgba(154,223,99,.48);
  background: rgba(37,76,32,.88);
  color: #d8ffbd;
  letter-spacing: .06em;
}