@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Geist:wght@500;600;700;800&display=swap');
:root{color-scheme:dark;font:16px 'DM Sans',sans-serif;color:#f6f2fa;background:#0a080f;--gold:#ffcb76;--muted:#c0b4cb;--stroke:#392b44}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 0 80%,#073340 0,transparent 44%),radial-gradient(ellipse at 95% 0,#340d37 0,transparent 43%)}header{padding:18px max(5vw,20px);display:flex;justify-content:space-between;align-items:center;min-height:68px;border-bottom:1px solid var(--stroke);letter-spacing:.11em}em{color:var(--gold);font-style:normal}main{width:min(1140px,92%);margin:clamp(24px,7vh,85px) auto}h1,h2{font-family:Geist,sans-serif;line-height:1.06;margin:.4em 0}h1{font-size:clamp(2rem,5vw,4.4rem);letter-spacing:-.055em}h2{font-size:1.45rem}button,input{font:inherit;border:1px solid var(--stroke);border-radius:10px;color:inherit;background:#181220;padding:12px}button{cursor:pointer}button:disabled{cursor:default}button[aria-pressed=true]{border-color:#66e1ed;color:#8df3fb}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #66e1ed;outline-offset:3px}.welcome{display:grid;grid-template-columns:1.25fr 1fr;border:1px solid var(--stroke);background:#100c17;border-radius:24px;overflow:hidden}.welcome img{width:100%;height:100%;object-fit:cover;display:block}.auth{padding:clamp(24px,5vw,64px);align-self:center}.auth h1{font-size:clamp(2rem,4vw,3.1rem)}.switch,nav{display:flex;gap:8px;flex-wrap:wrap}label{display:grid;gap:6px;margin:16px 0;font-weight:600}input{width:100%}.primary{width:100%;font-weight:800;background:var(--gold);color:#211107;border-color:var(--gold)}p{color:var(--muted)}.intro p{color:var(--gold);letter-spacing:.17em;font-size:.8rem}.intro label{max-width:360px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:16px;margin-top:22px}article{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:1px solid var(--stroke);border-radius:16px;background:linear-gradient(145deg,#21152a,#110f19)}article small{color:#8df3fb}article p{flex:1}a{color:var(--gold)}@media(max-width:700px){.welcome{grid-template-columns:1fr}.welcome img{max-height:290px;object-fit:contain;background:#08060b}.auth{padding:25px}}
.brand{width:104px;height:64px;object-fit:contain}.banner{display:block;width:100%;max-height:420px;object-fit:contain;background:#07040d;border:1px solid #4d2454;border-radius:20px;margin-bottom:28px}.welcome img{object-fit:contain;background:#08060b}:root{--gold:#ffc543;--cyan:#00e5ff;--pink:#fa20dc}nav button[aria-pressed=true]{border-color:var(--cyan);box-shadow:inset 0 -2px var(--pink)}

body:has(.welcome:not([hidden])) {
  background: radial-gradient(ellipse at 16% 45%, #21131e 0%, transparent 42%), #08080b;
}
body:has(.welcome:not([hidden])) header { display: none; }
main:has(.welcome:not([hidden])) {
  display: grid;
  align-content: center;
  min-height: 100svh;
  width: min(1240px, 94%);
  margin: 0 auto;
  padding: 34px 0;
}
.welcome {
  grid-template-columns: minmax(0, 1.2fr) minmax(350px, .8fr);
  border: 1px solid #ffffff1c;
  border-radius: 30px;
  background: #101014;
  box-shadow: 0 36px 90px #0008;
}
.welcome-art {
  display: grid;
  align-items: center;
  padding: clamp(20px, 4vw, 58px);
  background: radial-gradient(ellipse at 48% 46%, #281a25, transparent 70%), #0a090d;
  border-right: 1px solid #ffffff12;
}
.welcome-art img {
  height: auto;
  max-height: none;
  object-fit: contain;
  background: transparent;
  border-radius: 16px;
}
.welcome .auth { padding: clamp(28px, 4.6vw, 68px); }
.welcome h1 {
  margin: 26px 0 25px;
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.03;
  text-wrap: balance;
}
.welcome .switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid #ffffff14;
  border-radius: 13px;
  background: #09090c;
}
.welcome .switch button {
  border-color: transparent;
  background: transparent;
  color: #aaa8b2;
  font-size: .9rem;
  font-weight: 700;
}
.welcome .switch button[aria-pressed=true] {
  background: #202027;
  color: #fff2d4;
  border-color: #ffffff13;
}
.welcome label { gap: 9px; margin: 0 0 19px; font-size: .9rem; }
.welcome input {
  min-height: 52px;
  border-color: #ffffff24;
  background: #0b0b0f;
  padding-inline: 15px;
}
.welcome input::placeholder { color: #96939f; }
.welcome .primary {
  min-height: 52px;
  margin-top: 6px;
  background: linear-gradient(115deg, #ffe0a1, #e8b55f);
  border-color: #f4ce88;
  color: #211506;
}
.welcome .primary:hover { filter: brightness(1.08); }
.welcome .primary:disabled { opacity: .65; }
.welcome #message { margin-bottom: 0; font-size: .9rem; }
.welcome #message:empty { display: none; }
@media (max-width: 760px) {
  main:has(.welcome:not([hidden])) { width: min(460px, 92%); padding: 20px 0; }
  .welcome { grid-template-columns: 1fr; border-radius: 22px; }
  .welcome-art { padding: 16px 22px; border-right: 0; border-bottom: 1px solid #ffffff12; }
  .welcome-art img { max-height: 220px; }
  .welcome .auth { padding: 24px; }
}

.header-actions { display: flex; gap: 10px; }
.install-action {
  display: block;
  margin: 19px auto 0;
  padding: 7px 12px;
  border-color: transparent;
  background: transparent;
  color: #e9c992;
  font-size: .88rem;
}
.install-action:hover { background: #ffffff0b; }
#install-help {
  width: min(480px, 92vw);
  padding: 25px;
  border: 1px solid #ffffff25;
  border-radius: 20px;
  background: #141217;
  color: inherit;
}
#install-help::backdrop { background: #000a; }
#install-help li { margin-bottom: 12px; color: var(--muted); }

#library .intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 0 28px;
  border-bottom: 1px solid #ffffff1a;
}
#library .intro h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 600; }
#library .intro label { width: min(100%, 290px); margin: 0; font-size: .86rem; color: #d1c9d7; }
#library nav { margin-top: 22px; }
#library nav button { padding: 9px 13px; font-size: .85rem; border-color: #ffffff22; background: #141218; }
#library nav button[aria-pressed=true] { color: #ffe3ab; border-color: #ac8750; box-shadow: none; background: #282017; }
#library article { background: #141218; border-color: #ffffff1a; padding: 22px; }
#library article small { color: #c6b292; font-size: .76rem; }
#library article h2 { margin-top: 12px; font-size: 1.3rem; }
#library article p { font-size: .93rem; line-height: 1.5; }
#library article a { font-size: .9rem; font-weight: 700; text-decoration: none; }
#library article a:hover { text-decoration: underline; }
body:has(#library:not([hidden])) { background: radial-gradient(ellipse at 50% 0%, #241928, transparent 65%), #0b0a0f; }

#library [data-theme] { --accent: #e7c58b; }
#library [data-theme="ugc"] { --accent: #fa77be; }
#library [data-theme="pov"] { --accent: #5ee5ef; }
#library [data-theme="realista"] { --accent: #ff9e93; }
#library [data-theme="carrossel"] { --accent: #77a9ff; }
#library [data-theme="lote"] { --accent: #77e7ba; }
#library [data-theme="motion"] { --accent: #ba98ff; }
#library nav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #f2eaf6;
}
#library .category-icon { color: var(--accent); font-size: 1.15em; line-height: 1; }
#library nav button[aria-pressed=true] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent), transparent 40%);
  background: color-mix(in srgb, var(--accent) 12%, #141218);
}
#library .cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 30px; }
.tool-section > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.35rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr)); gap: 15px; }
#library .tool-grid article { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.tool-cover {
  display: grid;
  place-items: center;
  min-height: 84px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent), transparent 76%);
  background:
    repeating-linear-gradient(128deg, transparent 0 22px, #ffffff09 23px 24px),
    radial-gradient(ellipse at 72% 0%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 75%),
    #1d1726;
}
#library .tool-cover .category-icon { font-size: 2rem; text-shadow: 0 0 20px var(--accent); }
.tool-content { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 17px; }
.tool-content h3 { margin: 0; font: 650 1.1rem Geist, sans-serif; }
#library .tool-content p { margin: 8px 0 14px; }
#library .tool-content a { margin-top: auto; }

#license-details {
  margin-top: 20px;
  padding: 12px 16px;
  background: #151219;
  border: 1px solid #ffffff22;
  border-radius: 14px;
}
#license-details h2 { margin: 0; color: #ffe3ab; font-size: 1.05rem; font-weight: 700; }
#license-details dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; margin: 16px 0 4px; }
#license-details dt { font-size: .8rem; color: #c0b4cb; }
#license-details dd { margin: 4px 0 0; overflow-wrap: anywhere; }
#license-days { color: #e6c692; font-size: .85rem; }

#library #license-details { margin: 0 0 26px; }

.tool-cover { position: relative; overflow: hidden; }
.tool-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #100e15; opacity: 0; pointer-events: none; }
.tool-cover.preview-playing video { opacity: 1; }

#library .tool-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
#library .tool-grid article {
  position: relative;
  isolation: isolate;
  aspect-ratio: 9 / 16;
  justify-content: end;
  background: #18141f;
}
#library .tool-cover {
  position: absolute;
  inset: 0;
  align-items: start;
  padding-top: 26%;
  border: 0;
}
#library .tool-cover.has-preview { background-position: center; background-size: cover; }
#library .tool-cover.has-preview .category-icon { display: none; }
#library .tool-cover video { object-fit: cover; }
#library .tool-content {
  position: relative;
  flex: none;
  padding: 42px 16px 16px;
  background: linear-gradient(transparent, #0b080de8 48%, #0b080d);
}
#library .tool-content h3 { overflow-wrap: anywhere; }
#library .tool-content p { flex: none; color: #e0d9e5; }
@media (max-width: 440px) {
  #library .tool-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 155px), 1fr)); gap: 10px; }
  #library .tool-content { padding: 28px 10px 11px; }
  #library .tool-content p { font-size: .8rem; }
}