body.docs-themes-page { padding-top: 0 !important; overflow-x: hidden; color: var(--docs-ink); background: var(--docs-canvas); font-family: var(--docs-body); -webkit-font-smoothing: antialiased; }
.docs-themes-page::selection { color: #fff; background: var(--docs-primary); }
.docs-themes-page .container { width: min(100% - 48px, 1360px); max-width: 1360px; padding: 0; margin-inline: auto; }
.docs-themes-page a { color: inherit; text-decoration: none; }
.docs-themes-page h1, .docs-themes-page h2, .docs-themes-page h3 { font-family: var(--docs-heading); letter-spacing: -.035em; }
.docs-themes-page em { font-style: normal; }
.docs-themes-page [hidden] { display: none !important; }
.docs-themes-page .docs-header__nav .dropdown-toggle.is-active::after { transform: rotate(45deg) translateY(-2px); }

/* Abertura */
.docs-themes-hero { position: relative; min-height: 760px; overflow: hidden; padding: 152px 0 98px; color: #fff; background: radial-gradient(circle at 80% 22%, rgba(21, 173, 219, .2), transparent 29%), linear-gradient(116deg, var(--docs-navy), #063653 62%, #07658f 125%); }
.docs-themes-hero::before { position: absolute; right: -285px; bottom: -415px; width: 760px; height: 760px; border: 1px solid rgba(117, 220, 255, .14); border-radius: 50%; content: ""; box-shadow: 0 0 0 100px rgba(117, 220, 255, .03), 0 0 0 200px rgba(117, 220, 255, .02); }
.docs-themes-hero__grid { position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 94%); }
.docs-themes-hero__layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 6vw; }
.docs-themes-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--docs-cyan); font: 800 .7rem var(--docs-heading); letter-spacing: .11em; text-transform: uppercase; }
.docs-themes-eyebrow > i { width: 9px; height: 9px; border-radius: 50%; background: #2ed29c; box-shadow: 0 0 0 6px rgba(46, 210, 156, .13); }
.docs-themes-hero__copy h1 { max-width: none; margin: 27px 0 25px; color: #fff; font-size: clamp(4rem, 5.45vw, 6rem); font-weight: 700; line-height: .92; }
.docs-themes-hero__copy h1 span, .docs-themes-hero__copy h1 em { display: block; white-space: nowrap; }
.docs-themes-hero__copy h1 em { color: var(--docs-cyan); }
.docs-themes-hero__copy > p { max-width: 650px; margin: 0; color: rgba(233, 250, 255, .73); font-size: 1.05rem; line-height: 1.72; }
.docs-themes-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.docs-themes-share { display: inline-flex; align-items: center; gap: 11px; padding: 0; border: 0; color: rgba(255, 255, 255, .76); background: transparent; font: 700 .82rem var(--docs-heading); }
.docs-themes-share span { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 11px; background: rgba(255, 255, 255, .07); }
.docs-themes-share:hover { color: #fff; }

/* Laboratório visual */
.docs-theme-studio { overflow: hidden; border: 1px solid rgba(255, 255, 255, .24); border-radius: 24px; color: var(--docs-ink); background: rgba(255, 255, 255, .97); box-shadow: 0 30px 65px rgba(0, 12, 29, .32); }
.docs-theme-studio__topline { display: flex; min-height: 57px; align-items: center; justify-content: space-between; padding: 0 21px; border-bottom: 1px solid var(--docs-border); font: 800 .7rem var(--docs-heading); letter-spacing: .08em; text-transform: uppercase; }
.docs-theme-studio__topline small { display: inline-flex; align-items: center; gap: 7px; color: #178a64; font: inherit; }
.docs-theme-studio__topline small i { width: 7px; height: 7px; border-radius: 50%; background: #2dbe89; box-shadow: 0 0 0 5px rgba(45, 190, 137, .12); }
.docs-theme-studio__canvas { min-height: 345px; padding: 27px; background-image: linear-gradient(#edf4f7 1px, transparent 1px), linear-gradient(90deg, #edf4f7 1px, transparent 1px); background-size: 34px 34px; transition: background-color .3s ease; }
.docs-theme-browser { overflow: hidden; border: 1px solid #c9dce6; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px rgba(10, 47, 73, .12); transition: transform .35s ease, box-shadow .35s ease; }
.docs-theme-browser__bar { display: flex; min-height: 37px; align-items: center; gap: 5px; padding: 0 12px; border-bottom: 1px solid #dbe7ec; background: #f4f7f9; }
.docs-theme-browser__bar > i { width: 6px; height: 6px; border-radius: 50%; background: #b8c7d0; }
.docs-theme-browser__bar > i:first-child { background: #79d9ee; }
.docs-theme-browser__bar span { padding: 4px 32px; margin: auto; border-radius: 6px; color: #8797a5; background: #e7edf1; font-size: .51rem; }
.docs-theme-browser__page { position: relative; min-height: 245px; padding: 22px; overflow: hidden; background: linear-gradient(120deg, #f8fbfd 55%, #e9f6fb); transition: color .3s ease, background .3s ease; }
.docs-theme-browser__page::after { position: absolute; top: -76px; right: -72px; width: 190px; height: 190px; border: 25px solid rgba(6, 121, 185, .08); border-radius: 50%; content: ""; }
.docs-theme-browser__brand { color: var(--docs-primary); font: 800 .56rem var(--docs-heading); letter-spacing: .12em; }
.docs-theme-browser__copy { position: relative; z-index: 1; max-width: 68%; padding-top: 31px; }
.docs-theme-browser__copy small, .docs-theme-browser__copy strong, .docs-theme-browser__copy > span { display: block; }
.docs-theme-browser__copy small { color: var(--docs-primary); font: 800 .52rem var(--docs-heading); letter-spacing: .1em; text-transform: uppercase; }
.docs-theme-browser__copy strong { margin: 8px 0 16px; color: var(--docs-ink); font: 700 1.55rem/.95 var(--docs-heading); }
.docs-theme-browser__copy > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 8px; color: #fff; background: var(--docs-primary); font: 700 .58rem var(--docs-heading); }
.docs-theme-browser__products { position: absolute; right: 17px; bottom: 17px; z-index: 1; display: flex; align-items: end; gap: 7px; }
.docs-theme-browser__products i { display: block; width: 37px; height: 74px; border-radius: 19px 19px 9px 9px; background: linear-gradient(#80dcf0, #daf4fa); box-shadow: 0 8px 15px rgba(6, 121, 185, .12); }
.docs-theme-browser__products i:nth-child(2) { height: 92px; background: linear-gradient(#057dbd, #82d8eb); }
.docs-theme-browser__products i:nth-child(3) { height: 61px; }
.docs-theme-studio__canvas[data-theme-variant="editorial"] { background-color: #edf4f8; }
.docs-theme-studio__canvas[data-theme-variant="editorial"] .docs-theme-browser { transform: rotate(-1.2deg) translateY(-2px); box-shadow: 12px 19px 32px rgba(10, 47, 73, .14); }
.docs-theme-studio__canvas[data-theme-variant="editorial"] .docs-theme-browser__copy strong { font-size: 1.72rem; font-style: italic; }
.docs-theme-studio__canvas[data-theme-variant="immersive"] .docs-theme-browser__page { color: #fff; background: linear-gradient(130deg, #071e31, #075476); }
.docs-theme-studio__canvas[data-theme-variant="immersive"] .docs-theme-browser__copy strong { color: #fff; }
.docs-theme-studio__canvas[data-theme-variant="immersive"] .docs-theme-browser__copy > span { color: var(--docs-navy); background: var(--docs-cyan); }
.docs-theme-studio__canvas[data-theme-variant="immersive"] .docs-theme-browser__products i { background: linear-gradient(#20acd3, #075d86); }
.docs-theme-studio__controls { display: flex; min-height: 75px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 19px; border-top: 1px solid var(--docs-border); background: #f8fbfc; }
.docs-theme-studio__controls > span { color: var(--docs-muted); font: 800 .62rem var(--docs-heading); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.docs-theme-studio__controls > div { display: flex; gap: 5px; padding: 4px; border-radius: 10px; background: #eaf1f4; }
.docs-theme-studio__controls button { padding: 7px 9px; border: 0; border-radius: 7px; color: var(--docs-muted); background: transparent; font: 700 .65rem var(--docs-heading); }
.docs-theme-studio__controls button.is-active { color: #fff; background: var(--docs-primary); box-shadow: 0 5px 12px rgba(6, 121, 185, .18); }

/* Catálogo */
.docs-themes-catalog { padding: 120px 0 135px; background: var(--docs-canvas); }
.docs-themes-catalog__heading { display: grid; grid-template-columns: .55fr 1.45fr; align-items: start; gap: 35px; margin-bottom: 55px; }
.docs-themes-catalog__heading h2 { max-width: 880px; margin: -9px 0 18px; color: var(--docs-ink); font-size: clamp(3.3rem, 5vw, 5.5rem); font-weight: 700; line-height: .95; }
.docs-themes-catalog__heading h2 em { color: var(--docs-primary); }
.docs-themes-catalog__heading p { max-width: 690px; margin: 0; color: var(--docs-muted); line-height: 1.7; }
.docs-theme-toolbar { display: grid; grid-template-columns: minmax(300px, 1fr) auto; align-items: center; gap: 18px; padding: 14px 16px; margin-bottom: 34px; border: 1px solid var(--docs-border); border-radius: 17px; background: #fff; box-shadow: 0 10px 28px rgba(10, 47, 73, .06); }
.docs-theme-search { display: grid; min-height: 53px; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 11px; padding: 6px 8px 6px 15px; border-radius: 12px; background: #f2f7f9; }
.docs-theme-search > i, .docs-theme-search > svg { color: var(--docs-primary); }
.docs-theme-search input { width: 100%; height: 41px; border: 0; outline: 0; color: var(--docs-ink); background: transparent; font-size: .86rem; }
.docs-theme-search input::placeholder { color: #8697a8; }
.docs-theme-search kbd { padding: 5px 9px; border: 1px solid var(--docs-border); border-radius: 7px; color: var(--docs-muted); background: #fff; font: 700 .68rem var(--docs-body); box-shadow: none; }
.docs-theme-search button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 9px; color: var(--docs-muted); background: #e5eef2; }
.docs-theme-toolbar > p { margin: 0 5px 0 0; color: var(--docs-primary); font: 800 .68rem var(--docs-heading); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.docs-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.docs-theme-card { overflow: hidden; border: 1px solid var(--docs-border); border-radius: 20px; color: var(--docs-ink); background: #fff; box-shadow: 0 11px 30px rgba(10, 47, 73, .065); transition: border .2s ease, transform .2s ease, box-shadow .2s ease; }
.docs-theme-card:hover { color: var(--docs-ink); border-color: #8dcbe2; box-shadow: 0 19px 42px rgba(10, 47, 73, .11); transform: translateY(-5px); }
.docs-theme-card__preview { position: relative; min-height: 310px; overflow: hidden; border-bottom: 1px solid var(--docs-border); background: #eaf4f8; }
.docs-theme-card__preview > img { display: block; width: 100%; height: 310px; object-fit: cover; object-position: top; transition: transform .45s ease; }
.docs-theme-card:hover .docs-theme-card__preview > img { transform: scale(1.025); }
.docs-theme-card__placeholder { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(135deg, #eff9fc, #d7eff8); }
.docs-theme-card__placeholder::before { position: absolute; top: 32px; right: 32px; width: 170px; height: 170px; border: 22px solid rgba(6, 121, 185, .08); border-radius: 50%; content: ""; }
.docs-theme-card__placeholder > span { position: absolute; bottom: 25px; left: 30px; color: rgba(6, 121, 185, .12); font: 700 11rem/.75 var(--docs-heading); }
.docs-theme-card__placeholder i { position: absolute; right: 31px; bottom: 31px; display: block; width: 65px; height: 105px; border-radius: 30px 30px 14px 14px; background: linear-gradient(#78d8ed, #e8f8fb); box-shadow: 0 12px 25px rgba(6, 121, 185, .12); }
.docs-theme-card__placeholder i:nth-of-type(2) { right: 105px; height: 135px; background: linear-gradient(#087fbc, #7ad5e9); }
.docs-theme-card__placeholder i:nth-of-type(3) { right: 179px; height: 80px; }
.docs-theme-card__badge { position: absolute; top: 19px; left: 19px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; color: var(--docs-ink); background: rgba(255, 255, 255, .88); box-shadow: 0 7px 16px rgba(10, 47, 73, .08); backdrop-filter: blur(8px); font: 800 .63rem var(--docs-heading); text-transform: uppercase; }
.docs-theme-card__badge > i, .docs-theme-card__badge > svg { color: var(--docs-primary); }
.docs-theme-card__open { position: absolute; top: 18px; right: 18px; display: grid; width: 39px; height: 39px; place-items: center; border-radius: 11px; color: #fff; background: rgba(4, 24, 42, .78); opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; }
.docs-theme-card:hover .docs-theme-card__open { opacity: 1; transform: none; }
.docs-theme-card__body { display: grid; min-height: 114px; grid-template-columns: 37px 1fr auto; align-items: center; gap: 16px; padding: 20px 23px; }
.docs-theme-card__index { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--docs-border); border-radius: 9px; color: var(--docs-muted); font: 700 .64rem var(--docs-heading); }
.docs-theme-card__body small { color: var(--docs-primary); font: 800 .61rem var(--docs-heading); letter-spacing: .08em; text-transform: uppercase; }
.docs-theme-card__body h3 { margin: 4px 0 0; color: var(--docs-ink); font-size: 1.7rem; font-weight: 700; }
.docs-theme-card__version { padding: 6px 9px; border-radius: 8px; color: var(--docs-muted); background: #edf4f7; font: 700 .65rem var(--docs-heading); }
.docs-theme-card__footer { display: flex; min-height: 53px; align-items: center; justify-content: space-between; padding: 0 23px; border-top: 1px solid var(--docs-border); color: var(--docs-primary); font: 700 .76rem var(--docs-heading); }
.docs-theme-card__footer > i, .docs-theme-card__footer > svg { transition: transform .2s ease; }
.docs-theme-card:hover .docs-theme-card__footer > i, .docs-theme-card:hover .docs-theme-card__footer > svg { transform: translateX(5px); }
.docs-theme-empty { grid-column: 1 / -1; padding: 65px 25px; border: 1px dashed #afccd8; border-radius: 20px; text-align: center; background: rgba(255, 255, 255, .72); }
.docs-theme-empty > span { display: grid; width: 60px; height: 60px; margin: 0 auto 18px; place-items: center; border-radius: 17px; color: var(--docs-primary); background: #e8f6fc; }
.docs-theme-empty h3 { margin: 0; color: var(--docs-ink); font-size: 1.7rem; }
.docs-theme-empty p { margin: 8px 0 20px; color: var(--docs-muted); }
.docs-theme-empty button { padding: 10px 15px; border: 0; border-radius: 10px; color: #fff; background: var(--docs-primary); font: 700 .8rem var(--docs-heading); }
.docs-theme-empty--database p { margin-bottom: 0; }
.docs-theme-guidance { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 20px; padding: 26px; margin-top: 24px; border: 1px solid #b9dce9; border-radius: 18px; background: linear-gradient(120deg, #fff, #eaf7fb); box-shadow: 0 9px 26px rgba(10, 47, 73, .055); }
.docs-theme-guidance > span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg, var(--docs-primary-bright), var(--docs-primary)); }
.docs-theme-guidance small { color: var(--docs-primary); font: 800 .63rem var(--docs-heading); letter-spacing: .08em; text-transform: uppercase; }
.docs-theme-guidance h3 { margin: 4px 0 0; color: var(--docs-ink); font-size: 1.55rem; font-weight: 700; }
.docs-theme-guidance > a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid #9ccfe2; border-radius: 11px; color: var(--docs-primary); font: 700 .76rem var(--docs-heading); white-space: nowrap; }

.docs-themes-page #ButtonScrollTop { right: 23px; bottom: 23px; display: grid; width: 46px; height: 46px; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff !important; background: linear-gradient(145deg, var(--docs-primary-bright), var(--docs-primary)); box-shadow: 0 10px 25px rgba(4, 61, 95, .25); }
.docs-themes-page .modal-content { overflow: hidden; border: 1px solid var(--docs-border); border-radius: 18px; color: var(--docs-ink); box-shadow: var(--docs-shadow); }

@media (max-width: 1199.98px) {
    .docs-themes-hero__layout { gap: 4vw; }
    .docs-themes-hero__copy h1 { font-size: clamp(3.7rem, 6.4vw, 5.15rem); }
    .docs-theme-studio__canvas { padding: 22px; }
    .docs-theme-toolbar { grid-template-columns: 1fr auto; }
}

@media (max-width: 991.98px) {
    .docs-themes-hero { min-height: 0; padding-top: 130px; }
    .docs-themes-hero__layout { grid-template-columns: 1fr; }
    .docs-themes-hero__copy { max-width: 780px; }
    .docs-theme-studio { width: min(100%, 700px); }
    .docs-themes-catalog__heading { grid-template-columns: 1fr; gap: 23px; }
    .docs-themes-catalog__heading h2 { margin-top: 0; }
    .docs-theme-guidance { grid-template-columns: 58px 1fr; }
    .docs-theme-guidance > a { grid-column: 1 / -1; justify-content: space-between; }
}

@media (max-width: 767.98px) {
    .docs-themes-page .container { width: min(100% - 30px, 1360px); }
    .docs-themes-hero { padding: 108px 0 72px; }
    .docs-themes-hero__copy h1 { margin-top: 22px; font-size: clamp(3.35rem, 15vw, 4.8rem); }
    .docs-themes-hero__copy h1 span, .docs-themes-hero__copy h1 em { white-space: normal; }
    .docs-themes-hero__copy > p { font-size: .96rem; }
    .docs-themes-hero__actions { align-items: stretch; flex-direction: column; }
    .docs-themes-share { justify-content: center; }
    .docs-theme-studio__canvas { min-height: 300px; padding: 17px; }
    .docs-theme-browser__copy { max-width: 72%; }
    .docs-theme-browser__copy strong { font-size: 1.35rem; }
    .docs-theme-browser__products i { width: 30px; }
    .docs-theme-studio__controls { align-items: flex-start; flex-direction: column; }
    .docs-theme-studio__controls > div { width: 100%; }
    .docs-theme-studio__controls button { flex: 1; }
    .docs-themes-catalog { padding: 84px 0 92px; }
    .docs-themes-catalog__heading { margin-bottom: 38px; }
    .docs-themes-catalog__heading h2 { font-size: 3.05rem; }
    .docs-theme-toolbar { grid-template-columns: 1fr; align-items: stretch; gap: 11px; }
    .docs-theme-search { grid-template-columns: 21px 1fr auto; }
    .docs-theme-search kbd { display: none; }
    .docs-theme-toolbar > p { grid-column: auto; }
    .docs-theme-grid { grid-template-columns: 1fr; }
    .docs-theme-card__preview, .docs-theme-card__preview > img { height: 255px; min-height: 255px; }
    .docs-theme-card__body { grid-template-columns: 37px 1fr; }
    .docs-theme-card__version { grid-column: 2; justify-self: start; }
    .docs-theme-guidance { grid-template-columns: 52px 1fr; padding: 22px; }
}

@media (max-width: 470px) {
    .docs-theme-browser__copy { max-width: 100%; }
    .docs-theme-browser__products { display: none; }
    .docs-theme-browser__bar span { padding-inline: 15px; }
    .docs-theme-card__placeholder i { opacity: .75; }
    .docs-theme-guidance { display: block; }
    .docs-theme-guidance > span { margin-bottom: 18px; }
    .docs-theme-guidance > a { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .docs-theme-browser, .docs-theme-card, .docs-theme-card__preview > img { transition: none; }
}