/* ========================================
   TEXAS LEGACIES
   HOME
======================================== */


:root {

    --ink: #102a33;
    --ink-dark: #071b21;
    --ink-light: #173b45;

    --rust: #a84622;
    --terracotta: #c35b32;
    --clay: #d27b50;
    --sand: #dfa06c;

    --parchment: #dfc09b;
    --paper: #ead0ad;
    --cream: #f1ddc2;

    --leather: #60361f;
    --wood: #3b2519;
    --wood-dark: #261710;
}


/* ========================================
   RESET
======================================== */


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


html {
    scroll-behavior: smooth;
}


body {
    background: var(--parchment);
    color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    overflow-x: hidden;
}


a {
    color: inherit;
}


/* ========================================
   HEADER
======================================== */


.header {
    width: 100%;
    height: 100px;

    position: absolute;

    top: 0;
    left: 0;

    z-index: 100;

    padding: 0 5%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid rgba(241, 221, 194, .30);
}


.brand {
    display: flex;
    flex-direction: column;

    color: var(--cream);

    text-decoration: none;
}


.brand-small {
    margin-bottom: 4px;

    color: var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 6px;
}


.brand-main {
    font-size: 20px;

    font-weight: bold;

    letter-spacing: 4px;
}


.nav {
    display: flex;
    align-items: center;

    gap: 28px;
}


.nav a {
    color: var(--cream);

    text-decoration: none;

    text-transform: uppercase;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 2px;

    transition:
        color .3s ease;
}


.nav a:hover,
.nav .active {
    color: var(--sand);
}


.nav .login-button {
    padding:
        13px
        22px;

    border:
        1px solid
        rgba(241, 221, 194, .70);

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


.nav .login-button:hover {
    background:
        var(--terracotta);

    border-color:
        var(--terracotta);

    color:
        var(--cream);
}


/* ========================================
   HERO
======================================== */


.hero {
    min-height: 100vh;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    text-align: center;

    background:
        url("../assets/texas-hero.jpg");

    background-size: cover;

    background-position: center;
}


.hero-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .17),
            rgba(38, 23, 16, .12) 43%,
            rgba(7, 27, 33, .88) 100%
        );
}


.hero-content {
    position: relative;

    z-index: 2;

    padding:
        120px
        40px
        90px;

    color: var(--cream);
}


.hero-kicker {
    margin-bottom: 25px;

    color: var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 8px;
}


.hero-line {
    margin-bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;
}


.hero-line span {
    width: 70px;
    height: 1px;

    background:
        var(--sand);
}


.hero-line b {
    color: var(--sand);

    font-size: 23px;

    font-weight: normal;

    line-height: 1;
}


.hero h1 {
    color: var(--cream);

    font-size:
        clamp(
            75px,
            13vw,
            175px
        );

    line-height: .78;

    font-weight: normal;

    letter-spacing: 5px;

    text-shadow:
        0 6px 30px
        rgba(0, 0, 0, .25);
}


.hero-phrase {
    margin-top: 45px;

    color:
        rgba(241, 221, 194, .92);

    font-size: 21px;

    line-height: 1.6;

    font-style: italic;
}


.discover {
    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 38px;

    padding:
        15px
        28px;

    border:
        1px solid
        rgba(241, 221, 194, .78);

    color:
        var(--cream);

    text-decoration: none;

    text-transform: uppercase;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 3px;

    transition:
        background .3s ease,
        border-color .3s ease;
}


.discover:hover {
    background:
        var(--terracotta);

    border-color:
        var(--terracotta);
}


.scroll {
    position: absolute;

    z-index: 2;

    bottom: 28px;
    left: 50%;

    transform:
        translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    color:
        rgba(241, 221, 194, .75);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 5px;
}


.scroll i {
    display: block;

    width: 1px;
    height: 35px;

    background:
        rgba(241, 221, 194, .55);
}


/* ========================================
   STORY
======================================== */


.story {
    max-width: 1080px;

    margin: auto;

    padding:
        145px
        8%
        155px;

    text-align: center;
}


.ornament {
    margin-bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;
}


.ornament span {
    width: 60px;
    height: 1px;

    background:
        var(--rust);
}


.ornament b {
    color:
        var(--rust);

    font-size: 25px;

    font-weight: normal;

    line-height: 1;
}


.section-label {
    margin-bottom: 25px;

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 6px;

    text-transform: uppercase;
}


.section-label.light {
    color:
        var(--sand);
}


.story h2 {
    margin-bottom: 45px;

    color:
        var(--ink);

    font-size:
        clamp(
            50px,
            7vw,
            85px
        );

    line-height: .95;

    font-weight: normal;
}


.story > p:not(.section-label) {
    max-width: 720px;

    margin:
        0
        auto
        20px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 2;
}


/* mantém compatibilidade com o HTML antigo */

.story-text {
    max-width: 710px;

    margin: auto;

    color:
        var(--leather);

    font-size: 18px;

    line-height: 2;
}


.text-link {
    display: inline-block;

    margin-top: 40px;

    padding-bottom: 7px;

    color:
        var(--ink);

    border-bottom:
        1px solid
        var(--rust);

    text-decoration: none;

    text-transform: uppercase;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 3px;
}


/* ========================================
   TRÊS CATEGORIAS
======================================== */


.world {
    padding:
        125px
        5%
        135px;

    background:
        var(--ink);

    color:
        var(--cream);
}


.world > .section-label {
    max-width: 1300px;

    margin:
        0
        auto
        24px;

    color:
        var(--sand);
}


.world > h2 {
    max-width: 1300px;

    margin:
        0
        auto
        75px;

    color:
        var(--cream);

    font-size:
        clamp(
            50px,
            7vw,
            85px
        );

    line-height: .95;

    font-weight: normal;
}


/* compatibilidade com estrutura anterior */

.world-heading {
    max-width: 1300px;

    margin:
        0
        auto
        70px;

    color:
        var(--cream);
}


.world-heading h2 {
    font-size:
        clamp(
            50px,
            7vw,
            85px
        );

    line-height: .95;

    font-weight: normal;
}


.legacy-grid {
    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 28px;
}


.legacy-card {
    display: block;

    min-width: 0;

    color:
        var(--cream);

    text-decoration: none;
}


.legacy-photo {
    position: relative;

    width: 100%;
    height: 530px;

    overflow: hidden;

    background-size: cover;

    background-position: center;

    transition:
        transform .4s ease;
}


.legacy-card:hover
.legacy-photo {
    transform:
        translateY(-5px);
}


.legacy-photo.ranch,
.ranch {
    background-image:
        url("../assets/rancheiros.jpg");
}


.legacy-photo.urban,
.urban {
    background-image:
        url("../assets/urbanos.jpg");
}


.legacy-photo.native,
.native {
    background-image:
        url("../assets/nativos.jpg");
}


/* estrutura antiga dos cards */

.photo-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .02),
            rgba(7, 27, 33, .09) 45%,
            rgba(38, 23, 16, .90)
        );
}


.legacy-number {
    position: absolute;

    z-index: 2;

    top: 25px;
    left: 25px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 3px;
}


.legacy-title {
    position: absolute;

    z-index: 2;

    left: 30px;
    right: 30px;
    bottom: 35px;
}


.legacy-title small {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;
}


.legacy-title h3 {
    margin-top: 10px;

    font-size: 46px;

    font-weight: normal;
}


.legacy-description {
    padding:
        27px
        5px
        20px;
}


.legacy-description p {
    min-height: 75px;

    color:
        rgba(241, 221, 194, .75);

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.8;
}


.legacy-description a {
    display: inline-block;

    margin-top: 22px;

    color:
        var(--sand);

    text-decoration: none;

    text-transform: uppercase;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;
}


/* estrutura do index atual */

.legacy-content {
    padding:
        30px
        5px
        15px;
}


.legacy-content > span {
    display: block;

    margin-bottom: 15px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;
}


.legacy-content > p {
    margin-bottom: 12px;

    color:
        rgba(241, 221, 194, .68);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.legacy-content h3 {
    margin-bottom: 24px;

    color:
        var(--cream);

    font-size: 46px;

    font-weight: normal;
}


.legacy-content strong {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: normal;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* ========================================
   MANIFESTO
======================================== */


.manifesto {
    padding:
        150px
        20px;

    background:
        var(--terracotta);

    color:
        var(--cream);

    text-align: center;
}


.manifesto-symbol {
    display: block;

    margin-bottom: 30px;

    color:
        var(--cream);

    font-size: 38px;

    line-height: 1;
}


.manifesto .section-label {
    color:
        var(--cream);
}


.manifesto h2 {
    margin:
        0
        auto;

    color:
        var(--cream);

    font-size:
        clamp(
            65px,
            10vw,
            130px
        );

    line-height: .78;

    font-weight: normal;
}


.manifesto > p:not(.section-label) {
    max-width: 690px;

    margin:
        45px
        auto
        0;

    color:
        rgba(241, 221, 194, .90);

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 2;
}


.manifesto-line {
    width: 1px;
    height: 65px;

    margin:
        55px
        auto
        35px;

    background:
        rgba(241, 221, 194, .55);
}


.manifesto > span:not(.manifesto-symbol) {
    font-size: 18px;

    line-height: 1.8;

    font-style: italic;
}


/* ========================================
   FAMÍLIAS

   A SEÇÃO CONTINUA NA HOME.
   APENAS O LINK PARA familias.html
   FOI REMOVIDO NO HTML.
======================================== */


.families-preview {
    min-height: 760px;

    display: grid;

    grid-template-columns:
        1.15fr
        .85fr;

    background:
        var(--parchment);
}


.families-photo {
    min-height: 760px;

    background:
        linear-gradient(
            rgba(38, 23, 16, .04),
            rgba(38, 23, 16, .16)
        ),
        url("../assets/familias.jpg");

    background-size: cover;

    background-position: center;
}


/* index atual */

.families-content {
    padding:
        100px
        10%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        var(--parchment);
}


.families-content h2 {
    color:
        var(--ink);

    font-size:
        clamp(
            50px,
            6vw,
            78px
        );

    line-height: .95;

    font-weight: normal;
}


.families-content > p:not(.section-label) {
    max-width: 450px;

    margin-top: 28px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 2;
}


/* compatibilidade com versão antiga */

.families-text {
    padding:
        110px
        10%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        var(--parchment);
}


.families-text h2 {
    color:
        var(--ink);

    font-size:
        clamp(
            50px,
            6vw,
            78px
        );

    line-height: .95;

    font-weight: normal;
}


.families-text > p:not(.section-label) {
    max-width: 450px;

    margin-top: 35px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    line-height: 2;
}


.dark-button {
    display: inline-block;

    width: fit-content;

    margin-top: 40px;

    padding:
        16px
        24px;

    background:
        var(--ink);

    color:
        var(--cream);

    text-decoration: none;

    text-transform: uppercase;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 2px;

    transition:
        background .3s ease;
}


.dark-button:hover {
    background:
        var(--rust);
}


/* ========================================
   FINAL BANNER
======================================== */


.final-banner {
    min-height: 720px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    text-align: center;

    background:
        url("../assets/texas-final.jpg");

    background-size: cover;

    background-position: center;
}


.final-overlay,
.final-banner-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(7, 27, 33, .68);
}


.final-content,
.final-banner-content {
    position: relative;

    z-index: 2;

    padding:
        50px
        25px;

    color:
        var(--cream);
}


.final-content span,
.final-banner-content span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 6px;
}


.final-content h2,
.final-banner-content h2 {
    margin:
        30px
        0
        35px;

    color:
        var(--cream);

    font-size:
        clamp(
            60px,
            9vw,
            120px
        );

    line-height: .85;

    font-weight: normal;
}


.final-banner-content p {
    color:
        rgba(241, 221, 194, .80);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.final-content a {
    display: inline-block;

    padding:
        16px
        30px;

    border:
        1px solid
        var(--cream);

    color:
        var(--cream);

    text-decoration: none;

    text-transform: uppercase;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 4px;

    transition:
        background .3s ease,
        border-color .3s ease;
}


.final-content a:hover {
    background:
        var(--terracotta);

    border-color:
        var(--terracotta);
}


/* ========================================
   FOOTER
======================================== */


.footer {
    padding:
        65px
        5%;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    background:
        var(--wood-dark);

    color:
        var(--cream);
}


.footer-brand {
    display: flex;
    flex-direction: column;
}


.footer-brand span {
    font-size: 26px;

    letter-spacing: 8px;
}


.footer-brand strong {
    margin-top: 4px;

    font-size: 13px;

    letter-spacing: 9px;
}


.footer-center {
    color:
        var(--sand);

    font-size: 32px;

    line-height: 1;
}


.footer-text {
    text-align: right;

    color:
        rgba(241, 221, 194, .70);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


/* ========================================
   HOME — TABLET / MOBILE
======================================== */


@media (max-width: 900px) {

    .header {
        height: 80px;
    }


    .nav a:not(.login-button) {
        display: none;
    }


    .hero h1 {
        font-size: 70px;
    }


    .story {
        padding:
            110px
            7%;
    }


    .legacy-grid {
        grid-template-columns:
            1fr;
    }


    .legacy-photo {
        height: 560px;
    }


    .families-preview {
        grid-template-columns:
            1fr;
    }


    .families-photo {
        min-height: 550px;
    }


    .families-content,
    .families-text {
        padding:
            90px
            8%;
    }


    .footer {
        grid-template-columns:
            1fr;

        gap: 35px;

        text-align: center;
    }


    .footer-brand {
        align-items: center;
    }


    .footer-text {
        text-align: center;
    }

}


@media (max-width: 600px) {

    .brand-main {
        font-size: 16px;

        letter-spacing: 3px;
    }


    .hero-content {
        padding:
            110px
            20px
            90px;
    }


    .hero-kicker {
        letter-spacing: 5px;
    }


    .hero h1 {
        font-size: 54px;

        letter-spacing: 2px;
    }


    .hero-phrase {
        font-size: 17px;
    }


    .legacy-photo {
        height: 470px;
    }


    .legacy-content h3,
    .legacy-title h3 {
        font-size: 38px;
    }


    .families-photo {
        min-height: 430px;
    }


    .final-banner {
        min-height: 620px;
    }

}

/* ========================================
   TEXAS PAGE
======================================== */


/* HEADER */

.texas-header {
    position: absolute;
}

.nav .active {
    color: var(--sand);
}


/* ========================================
   TEXAS HERO
======================================== */

.texas-hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        url("../assets/texas-hero.jpg");

    background-size: cover;

    background-position: center;
}


.texas-hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .25),
            rgba(7, 27, 33, .35) 45%,
            rgba(7, 27, 33, .9)
        );
}


.texas-hero-content {

    position: relative;

    z-index: 2;

    color: var(--cream);
}


.texas-hero-content h1 {

    font-size: clamp(
        90px,
        16vw,
        220px
    );

    line-height: .8;

    letter-spacing: 12px;

    font-weight: normal;
}


.texas-hero-content > p:last-child {

    margin-top: 35px;

    font-size: 23px;

    font-style: italic;
}


/* ========================================
   TEXAS INTRO
======================================== */

.texas-intro {

    padding:
        145px
        8%;

    max-width: 1200px;

    margin: auto;

    text-align: center;
}


.texas-intro h2 {

    font-size: clamp(
        50px,
        7vw,
        90px
    );

    font-weight: normal;

    line-height: .95;

    margin-bottom: 65px;
}


.texas-intro-columns {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 70px;

    text-align: left;

    max-width: 950px;

    margin: auto;
}


.texas-intro-columns p {

    color: var(--leather);

    font-size: 17px;

    line-height: 2;
}


/* ========================================
   THE LAND
======================================== */

.texas-land {

    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    min-height: 850px;

    background: var(--ink);
}


.texas-land-photo {

    background:

        linear-gradient(
            rgba(7, 27, 33, .05),
            rgba(7, 27, 33, .2)
        ),

        url("../assets/texas-final.jpg");

    background-size: cover;

    background-position: center;
}


.texas-land-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        100px
        12%;

    color: var(--cream);
}


.texas-land-text h2 {

    font-size: clamp(
        50px,
        6vw,
        80px
    );

    font-weight: normal;

    line-height: .95;

    margin-bottom: 45px;
}


.texas-land-text > p:not(.section-label) {

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 2;

    color:
        rgba(
            241,
            221,
            194,
            .78
        );

    margin-bottom: 25px;
}


.texas-land-quote {

    margin-top: 30px;

    padding-top: 30px;

    border-top:
        1px solid
        rgba(
            223,
            160,
            108,
            .35
        );

    font-style: italic;

    color: var(--sand);

    font-size: 18px;
}


/* ========================================
   THREE LEGACIES
======================================== */

.texas-legacies {

    padding:
        140px
        6%;

    background: var(--parchment);
}


.texas-section-heading {

    max-width: 850px;

    margin-bottom: 100px;
}


.texas-section-heading h2 {

    font-size: clamp(
        55px,
        7vw,
        90px
    );

    line-height: .9;

    font-weight: normal;
}


.texas-legacy-row {

    display: grid;

    grid-template-columns:
        70px
        .8fr
        1.2fr;

    gap: 45px;

    align-items: center;

    margin-bottom: 140px;
}


.texas-legacy-row.reverse {

    grid-template-columns:
        70px
        .8fr
        1.2fr;
}


.texas-legacy-number {

    align-self: start;

    font-family:
        Arial,
        sans-serif;

    color: var(--rust);

    letter-spacing: 4px;

    font-size: 10px;

    padding-top: 12px;
}


.texas-legacy-info span {

    font-family:
        Arial,
        sans-serif;

    color: var(--rust);

    font-size: 8px;

    letter-spacing: 4px;
}


.texas-legacy-info h3 {

    font-size: clamp(
        45px,
        5vw,
        70px
    );

    font-weight: normal;

    margin:
        18px
        0
        30px;
}


.texas-legacy-info p {

    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    line-height: 2;

    font-size: 14px;

    margin-bottom: 18px;

    max-width: 500px;
}


.texas-legacy-info a {

    display: inline-block;

    margin-top: 20px;

    color: var(--ink);

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    border-bottom:
        1px solid
        var(--rust);

    padding-bottom: 8px;
}


.texas-legacy-image {

    min-height: 620px;

    background-size: cover;

    background-position: center;
}


.ranch-image {

    background-image:
        url("../assets/rancheiros.jpg");
}


.urban-image {

    background-image:
        url("../assets/urbanos.jpg");
}


.native-image {

    background-image:
        url("../assets/nativos.jpg");
}


/* ========================================
   STATEMENT
======================================== */

.texas-statement {

    padding:
        150px
        6%;

    text-align: center;

    background: var(--wood-dark);

    color: var(--cream);
}


.statement-symbol {

    display: block;

    color: var(--sand);

    font-size: 38px;

    margin-bottom: 30px;
}


.texas-statement > p {

    font-family:
        Arial,
        sans-serif;

    color: var(--sand);

    letter-spacing: 7px;

    font-size: 9px;

    margin-bottom: 35px;
}


.texas-statement h2 {

    font-size: clamp(
        70px,
        10vw,
        135px
    );

    font-weight: normal;

    line-height: .78;
}


.statement-subtitle {

    display: block;

    margin-top: 50px;

    font-size: 18px;

    font-style: italic;

    line-height: 1.8;

    color:
        rgba(
            241,
            221,
            194,
            .78
        );
}


/* ========================================
   LIFE IN TEXAS
======================================== */

.texas-life {

    padding:
        140px
        6%;

    background: var(--cream);
}


.texas-heading-text {

    margin-top: 35px;

    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    line-height: 2;

    max-width: 600px;
}


.texas-life-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin-top: 80px;

    border-top:
        1px solid
        rgba(
            96,
            54,
            31,
            .25
        );

    border-left:
        1px solid
        rgba(
            96,
            54,
            31,
            .25
        );
}


.texas-life-grid article {

    padding:
        55px
        40px;

    min-height: 300px;

    border-right:
        1px solid
        rgba(
            96,
            54,
            31,
            .25
        );

    border-bottom:
        1px solid
        rgba(
            96,
            54,
            31,
            .25
        );
}


.texas-life-grid span {

    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 3px;
}


.texas-life-grid h3 {

    margin:
        25px
        0;

    font-size: 35px;

    font-weight: normal;
}


.texas-life-grid p {

    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.9;
}


/* ========================================
   TEXAS ENDING
======================================== */

.texas-ending {

    min-height: 760px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:
        url("../assets/texas-final.jpg");

    background-size: cover;

    background-position: center;
}


.texas-ending-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(
            7,
            27,
            33,
            .72
        );
}


.texas-ending-content {

    position: relative;

    z-index: 2;

    color: var(--cream);
}


.texas-ending-content > span {

    color: var(--sand);

    font-family:
        Arial,
        sans-serif;

    letter-spacing: 6px;

    font-size: 8px;
}


.texas-ending-content h2 {

    font-size: clamp(
        70px,
        10vw,
        130px
    );

    line-height: .8;

    font-weight: normal;

    margin:
        35px
        0;
}


.texas-ending-content p {

    font-size: 18px;

    line-height: 1.8;

    font-style: italic;

    margin-bottom: 40px;
}


.texas-ending-content a {

    display: inline-block;

    border:
        1px solid
        var(--cream);

    padding:
        16px
        30px;

    color: var(--cream);

    text-decoration: none;

    text-transform: uppercase;

    font-family:
        Arial,
        sans-serif;

    letter-spacing: 3px;

    font-size: 9px;
}


.texas-ending-content a:hover {

    background:
        var(--terracotta);

    border-color:
        var(--terracotta);
}


/* ========================================
   TEXAS MOBILE
======================================== */

@media (max-width: 900px) {

    .texas-intro-columns {
        grid-template-columns: 1fr;
        gap: 30px;
    }


    .texas-land {
        grid-template-columns: 1fr;
    }


    .texas-land-photo {
        min-height: 600px;
    }


    .texas-legacy-row,
    .texas-legacy-row.reverse {

        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 100px;
    }


    .texas-legacy-number {
        padding-top: 0;
    }


    .texas-legacy-image {
        min-height: 520px;
    }


    .texas-life-grid {
        grid-template-columns: 1fr;
    }

}

/* ========================================
   RULES PAGE
======================================== */


.rules-header {
    position: absolute;
}


.rules-hero {

    min-height: 70vh;

    position: relative;

    display: flex;

    justify-content: center;
    align-items: center;

    text-align: center;

    background-image:
        linear-gradient(
            rgba(7, 27, 33, .25),
            rgba(7, 27, 33, .45)
        ),
        url("../assets/texas-hero.jpg");

    background-size: cover;

    background-position: center;
}


.rules-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .18),
            rgba(38, 23, 16, .15),
            rgba(7, 27, 33, .92)
        );
}


.rules-hero-content {

    position: relative;

    z-index: 2;

    color: var(--cream);

    padding: 40px;

    margin-top: 70px;
}


.rules-hero-content h1 {

    font-size: clamp(
        65px,
        12vw,
        160px
    );

    font-weight: normal;

    letter-spacing: 10px;

    line-height: .85;
}


.rules-hero-content > p:last-child {

    margin-top: 35px;

    font-size: 19px;

    font-style: italic;
}


/* ========================================
   RULES INTRO
======================================== */


.rules-intro {

    max-width: 1000px;

    margin: auto;

    padding:
        130px
        8%
        100px;

    text-align: center;
}


.rules-intro h2 {

    font-size: clamp(
        50px,
        7vw,
        85px
    );

    line-height: .95;

    font-weight: normal;

    margin-bottom: 40px;
}


.rules-intro > p:last-child {

    max-width: 700px;

    margin: auto;

    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 2;
}


/* ========================================
   RULE CARDS
======================================== */


.rules-container {

    max-width: 1100px;

    margin: auto;

    padding:
        0
        6%
        150px;
}


.rule-card {

    border-top:
        1px solid
        rgba(
            96,
            54,
            31,
            .32
        );
}


.rule-card:last-child {

    border-bottom:
        1px solid
        rgba(
            96,
            54,
            31,
            .32
        );
}


.rule-card summary {

    list-style: none;

    cursor: pointer;

    display: grid;

    grid-template-columns:
        70px
        1fr
        40px;

    align-items: center;

    min-height: 115px;

    gap: 20px;

    transition:
        background .3s,
        padding .3s;
}


.rule-card summary::-webkit-details-marker {
    display: none;
}


.rule-card summary:hover {

    background:
        rgba(
            168,
            70,
            34,
            .05
        );

    padding:
        0
        18px;
}


.rule-number {

    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 4px;
}


.rule-card h3 {

    font-size: clamp(
        25px,
        3vw,
        38px
    );

    font-weight: normal;
}


.rule-symbol {

    justify-self: end;

    color: var(--rust);

    font-size: 20px;

    transition:
        transform .35s;
}


.rule-card[open]
.rule-symbol {

    transform:
        rotate(90deg);
}


.rule-card[open]
summary {

    color: var(--rust);
}


/* CONTEÚDO */

.rule-content {

    padding:
        10px
        70px
        45px;

    max-width: 900px;
}


.rule-content p {

    font-family:
        Arial,
        sans-serif;

    color: var(--leather);

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 14px;
}


/* ========================================
   RULES ENDING
======================================== */


.rules-ending {

    background:
        var(--terracotta);

    color:
        var(--cream);

    text-align:
        center;

    padding:
        130px
        8%;
}


.rules-ending-ornament span {
    background: var(--cream);
}


.rules-ending-ornament b {
    color: var(--cream);
}


.rules-ending > p {

    font-family:
        Arial,
        sans-serif;

    letter-spacing:
        7px;

    font-size:
        9px;

    margin-bottom:
        35px;
}


.rules-ending h2 {

    max-width:
        1000px;

    margin:
        auto;

    font-size:
        clamp(
            45px,
            7vw,
            85px
        );

    line-height:
        .95;

    font-weight:
        normal;
}


.rules-ending > span {

    display:
        block;

    margin-top:
        50px;

    font-size:
        20px;
}


/* ========================================
   RULES MOBILE
======================================== */


@media (max-width: 700px) {

    .rules-hero-content h1 {
        font-size: 50px;
        letter-spacing: 5px;
    }


    .rule-card summary {

        grid-template-columns:
            45px
            1fr
            25px;

        min-height:
            100px;

        gap:
            10px;
    }


    .rule-card h3 {
        font-size: 24px;
    }


    .rule-content {

        padding:
            5px
            20px
            40px
            45px;
    }

}

/* ========================================
   RANCHEIROS PAGE
======================================== */


.ranchers-header {
    position: absolute;
}


/* ========================================
   HERO
======================================== */


.ranchers-hero {
    min-height: 85vh;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background-image:
        url("../assets/rancheiros.jpg");

    background-size: cover;
    background-position: center;
}


.ranchers-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .28),
            rgba(38, 23, 16, .25),
            rgba(7, 27, 33, .92)
        );
}


.ranchers-hero-content {
    position: relative;

    z-index: 2;

    color: var(--cream);

    padding: 40px;

    margin-top: 60px;
}


.ranchers-hero-content h1 {
    font-size:
        clamp(
            60px,
            11vw,
            155px
        );

    line-height: .8;

    font-weight: normal;

    letter-spacing: 6px;
}


.ranchers-hero-content > p:last-child {
    margin-top: 40px;

    font-size: 20px;

    font-style: italic;
}


/* ========================================
   INTRODUÇÃO
======================================== */


.ranchers-intro {
    max-width: 1050px;

    margin: auto;

    padding:
        135px
        7%;

    text-align: center;
}


.ranchers-intro h2 {
    font-size:
        clamp(
            52px,
            7vw,
            90px
        );

    line-height: .93;

    font-weight: normal;

    margin-bottom: 40px;
}


.ranchers-intro > p {
    max-width: 750px;

    margin: auto;

    font-family:
        Arial,
        sans-serif;

    color: var(--leather);

    line-height: 2;

    font-size: 15px;
}


/* ========================================
   ÍNDICE
======================================== */


.ranchers-index {
    margin-top: 65px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        rgba(96, 54, 31, .25);

    border-left:
        1px solid
        rgba(96, 54, 31, .25);
}


.ranchers-index a {
    padding: 25px 15px;

    border-right:
        1px solid
        rgba(96, 54, 31, .25);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .25);

    text-decoration: none;

    color: var(--ink);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition:
        background .3s,
        color .3s;
}


.ranchers-index a:hover {
    background: var(--rust);

    color: var(--cream);
}


/* ========================================
   FAMÍLIA
======================================== */


.ranch-family {
    padding:
        130px
        5%;

    background: var(--parchment);

    color: var(--ink);

    scroll-margin-top: 30px;
}


.ranch-family-dark {
    background: var(--ink);

    color: var(--cream);
}


/* ========================================
   TÍTULO DA FAMÍLIA
======================================== */


.ranch-family-heading {
    display: grid;

    grid-template-columns:
        80px
        1fr;

    gap: 20px;

    align-items: start;

    margin-bottom: 75px;
}


.ranch-family-number {
    padding-top: 15px;

    font-family:
        Arial,
        sans-serif;

    color: var(--rust);

    letter-spacing: 4px;

    font-size: 10px;
}


.ranch-family-dark
.ranch-family-number {
    color: var(--sand);
}


.ranch-category {
    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;

    color: var(--rust);
}


.ranch-family-dark
.ranch-category {
    color: var(--sand);
}


.ranch-family-heading h2 {
    font-size:
        clamp(
            65px,
            10vw,
            140px
        );

    line-height: .8;

    font-weight: normal;

    margin:
        20px
        0
        30px;
}


.ranch-production {
    font-family:
        Arial,
        sans-serif;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 10px;

    color: var(--leather);
}


.ranch-family-dark
.ranch-production {
    color:
        rgba(
            241,
            221,
            194,
            .70
        );
}


/* ========================================
   GALERIA DO RANCHO
======================================== */


.ranch-gallery {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    margin-bottom: 130px;
}


.ranch-gallery-item {
    position: relative;

    height: 480px;

    overflow: hidden;

    background: var(--wood);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.ranch-gallery-item:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 18px 40px
        rgba(38, 23, 16, .18);
}


/* FOTO */

.ranch-gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


/* ESCURECIMENTO */

.ranch-gallery-item::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, 0) 25%,
            rgba(7, 27, 33, .08) 50%,
            rgba(38, 23, 16, .92) 100%
        );

    pointer-events: none;
}


/* TEXTO SOBRE FOTO */

.ranch-gallery-caption {
    position: absolute;

    z-index: 2;

    left: 32px;
    right: 32px;
    bottom: 32px;

    display: flex;

    flex-direction: column;
}


.ranch-gallery-caption span {
    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;

    color: var(--sand);

    margin-bottom: 11px;
}


.ranch-gallery-caption strong {
    color: var(--cream);

    font-size: 29px;

    font-weight: normal;

    line-height: 1.1;
}


/* ========================================
   HISTÓRIA
======================================== */


.ranch-story-layout {
    display: grid;

    grid-template-columns:
        .75fr
        1.25fr;

    gap: 90px;

    max-width: 1250px;

    margin:
        0
        auto
        130px;
}


.ranch-story-title {
    position: sticky;

    top: 70px;

    align-self: start;
}


.ranch-story-title span {
    font-family:
        Arial,
        sans-serif;

    color: var(--rust);

    font-size: 8px;

    letter-spacing: 5px;
}


.ranch-family-dark
.ranch-story-title span {
    color: var(--sand);
}


.ranch-story-title h3 {
    font-size:
        clamp(
            45px,
            5vw,
            70px
        );

    line-height: .95;

    font-weight: normal;

    margin-top: 20px;
}


.ranch-story-text p {
    font-family:
        Arial,
        sans-serif;

    color: var(--leather);

    font-size: 14px;

    line-height: 2;

    margin-bottom: 26px;
}


.ranch-family-dark
.ranch-story-text p {
    color:
        rgba(
            241,
            221,
            194,
            .78
        );
}


/* ========================================
   CARACTERÍSTICAS
======================================== */


.ranch-characteristics {
    max-width: 1250px;

    margin:
        0
        auto
        130px;

    padding-top: 70px;

    border-top:
        1px solid
        rgba(96, 54, 31, .30);
}


.ranch-family-dark
.ranch-characteristics {
    border-color:
        rgba(
            241,
            221,
            194,
            .18
        );
}


.ranch-characteristics h3 {
    font-size:
        clamp(
            40px,
            5vw,
            65px
        );

    font-weight: normal;

    line-height: .95;

    margin-bottom: 35px;
}


.characteristics-intro {
    font-family:
        Arial,
        sans-serif;

    color: var(--leather);

    max-width: 750px;

    line-height: 2;

    margin-bottom: 45px;
}


.ranch-family-dark
.characteristics-intro {
    color:
        rgba(
            241,
            221,
            194,
            .72
        );
}


.characteristics-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        rgba(96, 54, 31, .25);

    border-left:
        1px solid
        rgba(96, 54, 31, .25);
}


.characteristics-grid article {
    min-height: 220px;

    padding: 35px;

    border-right:
        1px solid
        rgba(96, 54, 31, .25);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .25);
}


.ranch-family-dark
.characteristics-grid,
.ranch-family-dark
.characteristics-grid article {
    border-color:
        rgba(
            241,
            221,
            194,
            .18
        );
}


.characteristics-grid span,
.whitmore-branches span,
.hawthorne-characteristics span {
    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    letter-spacing: 4px;

    font-size: 8px;
}


.ranch-family-dark
.characteristics-grid span,
.ranch-family-dark
.whitmore-branches span,
.ranch-family-dark
.hawthorne-characteristics span {
    color: var(--sand);
}


.characteristics-grid p {
    margin-top: 22px;

    font-family:
        Arial,
        sans-serif;

    line-height: 1.9;

    color: var(--leather);

    font-size: 13px;
}


.ranch-family-dark
.characteristics-grid p {
    color:
        rgba(
            241,
            221,
            194,
            .75
        );
}


/* ========================================
   WHITMORE
======================================== */


.whitmore-branches {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;
}


.whitmore-branches article {
    padding: 40px;

    border:
        1px solid
        rgba(96, 54, 31, .25);
}


.whitmore-branches h4 {
    margin:
        15px
        0
        30px;

    font-size: 25px;

    font-weight: normal;
}


.whitmore-branches p {
    font-family:
        Arial,
        sans-serif;

    color: var(--leather);

    line-height: 1.8;

    margin-bottom: 10px;

    font-size: 13px;
}


/* ========================================
   HAWTHORNE
======================================== */


.hawthorne-characteristics {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;
}


.hawthorne-characteristics article {
    padding: 40px;

    border:
        1px solid
        rgba(
            241,
            221,
            194,
            .18
        );
}


.hawthorne-characteristics p {
    font-family:
        Arial,
        sans-serif;

    color:
        rgba(
            241,
            221,
            194,
            .75
        );

    font-size: 13px;

    line-height: 1.8;

    margin-top: 18px;
}


/* ========================================
   HERDEIROS
======================================== */


.ranch-heirs {
    max-width: 1250px;

    margin: auto;
}


.heirs-heading span {
    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.ranch-family-dark
.heirs-heading span {
    color: var(--sand);
}


.heirs-heading h3 {
    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    font-weight: normal;

    margin:
        18px
        0
        50px;
}


.heirs-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}


/* CARD */

.heir-slot {
    overflow: hidden;

    border:
        1px solid
        rgba(96, 54, 31, .30);

    background:
        rgba(255, 255, 255, .04);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.ranch-family-dark
.heir-slot {
    border-color:
        rgba(
            241,
            221,
            194,
            .20
        );

    background:
        rgba(
            255,
            255,
            255,
            .015
        );
}


.heir-slot:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 18px 45px
        rgba(38, 23, 16, .14);
}


/* FOTO */

.heir-photo {
    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    background:
        var(--wood-dark);
}


.heir-photo img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center top;
}


/* VAGA DISPONÍVEL */

.heir-placeholder {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 22px;

    padding: 25px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            var(--ink-dark),
            var(--ink)
        );

    color: var(--cream);

    transition:
        opacity .4s ease;
}


.ranch-family-dark
.heir-placeholder {
    background:
        linear-gradient(
            145deg,
            var(--wood-dark),
            var(--ink-dark)
        );
}


.heir-placeholder span {
    font-size: 32px;

    color: var(--sand);
}


.heir-placeholder strong {
    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: normal;

    letter-spacing: 4px;

    line-height: 1.6;

    color: var(--cream);
}


/* INFORMAÇÕES */

.heir-info {
    min-height: 175px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.heir-info > span {
    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    line-height: 1.5;

    margin-bottom: 20px;
}


.ranch-family-dark
.heir-info > span {
    color: var(--sand);
}


.heir-info h4 {
    font-size: 24px;

    font-weight: normal;

    line-height: 1.1;

    margin-bottom: 15px;
}


.heir-info p {
    margin-top: auto;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.7;

    color: var(--leather);
}


.ranch-family-dark
.heir-info p {
    color:
        rgba(
            241,
            221,
            194,
            .65
        );
}


/* ========================================
   HERDEIRO OCUPADO
======================================== */


.heir-slot.occupied
.heir-placeholder {
    opacity: 0;

    pointer-events: none;
}


/* ========================================
   FINAL
======================================== */


.ranchers-ending {
    padding:
        150px
        6%;

    background:
        var(--terracotta);

    color: var(--cream);

    text-align: center;
}


.ranchers-ending > span {
    font-size: 38px;
}


.ranchers-ending p {
    margin-top: 30px;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 6px;
}


.ranchers-ending h2 {
    margin:
        35px
        auto
        0;

    max-width: 1050px;

    font-size:
        clamp(
            55px,
            8vw,
            105px
        );

    line-height: .9;

    font-weight: normal;
}


/* ========================================
   TABLET
======================================== */


@media (max-width: 1000px) {

    .ranch-gallery {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .ranch-gallery-item:last-child {
        grid-column:
            1 / -1;
    }


    .heirs-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* ========================================
   MOBILE
======================================== */


@media (max-width: 700px) {


    .ranchers-hero {
        min-height: 75vh;
    }


    .ranchers-hero-content h1 {
        font-size: 46px;

        letter-spacing: 3px;
    }


    .ranchers-hero-content > p:last-child {
        font-size: 16px;
    }


    .ranchers-index {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .ranch-family {
        padding:
            95px
            6%;
    }


    .ranch-family-heading {
        grid-template-columns:
            40px
            1fr;
    }


    .ranch-family-heading h2 {
        font-size: 58px;
    }


    .ranch-gallery {
        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .ranch-gallery-item,
    .ranch-gallery-item:last-child {
        grid-column: auto;

        height: 450px;
    }


    .ranch-story-layout {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .ranch-story-title {
        position: static;
    }


    .characteristics-grid {
        grid-template-columns:
            1fr;
    }


    .whitmore-branches {
        grid-template-columns:
            1fr;
    }


    .hawthorne-characteristics {
        grid-template-columns:
            1fr;
    }


    .heirs-grid {
        grid-template-columns:
            1fr;
    }


    .heir-info {
        min-height: 150px;
    }

}


/* ========================================
   MOBILE PEQUENO
======================================== */


@media (max-width: 450px) {


    .ranchers-index {
        grid-template-columns:
            1fr;
    }


    .ranch-family-heading {
        grid-template-columns:
            1fr;
    }


    .ranch-family-number {
        padding-top: 0;
    }


    .ranch-family-heading h2 {
        font-size: 48px;
    }


    .ranch-gallery-item {
        height: 390px;
    }

}

/* ========================================
   URBANOS PAGE
======================================== */


.urbanos-header {
    position: absolute;
}


/* ========================================
   HERO
======================================== */


.urbanos-hero {
    min-height: 85vh;

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: var(--ink-dark);
}


.urbanos-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


.urbanos-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .32),
            rgba(7, 27, 33, .18) 40%,
            rgba(7, 27, 33, .94)
        );
}


.urbanos-hero-content {
    position: relative;

    z-index: 2;

    color: var(--cream);

    padding: 40px;

    margin-top: 60px;
}


.urbanos-hero-content h1 {
    font-size:
        clamp(
            65px,
            12vw,
            165px
        );

    line-height: .78;

    font-weight: normal;

    letter-spacing: 7px;
}


.urbanos-hero-phrase {
    margin-top: 42px;

    font-size: 20px;

    font-style: italic;
}


/* ========================================
   INTRODUÇÃO
======================================== */


.urbanos-intro {
    max-width: 950px;

    margin: auto;

    padding:
        140px
        7%;

    text-align: center;
}


.urbanos-intro h2 {
    margin-bottom: 45px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height: .92;

    font-weight: normal;
}


.urbanos-intro > p {
    max-width: 760px;

    margin:
        0
        auto
        24px;

    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 2;
}


/* ========================================
   LIBERDADE DE CRIAÇÃO
======================================== */


.urbanos-freedom {
    padding:
        130px
        6%;

    background:
        var(--ink);

    color:
        var(--cream);
}


.urbanos-section-heading {
    max-width: 1200px;

    margin:
        0
        auto
        80px;
}


.urbanos-section-heading > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.urbanos-section-heading h2 {
    margin-top:
        22px;

    font-size:
        clamp(
            55px,
            8vw,
            100px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.freedom-grid {
    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.freedom-card {
    min-height:
        330px;

    padding:
        40px;

    border-right:
        1px solid
        rgba(241, 221, 194, .16);

    border-bottom:
        1px solid
        rgba(241, 221, 194, .16);
}


.freedom-card:nth-child(-n+3) {
    border-top:
        1px solid
        rgba(241, 221, 194, .16);
}


.freedom-card:nth-child(3n+1) {
    border-left:
        1px solid
        rgba(241, 221, 194, .16);
}


.freedom-card > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        4px;
}


.freedom-card h3 {
    margin:
        45px
        0
        25px;

    font-size:
        34px;

    font-weight:
        normal;
}


.freedom-card p {
    color:
        rgba(241, 221, 194, .70);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.9;
}


/* ========================================
   PROFISSÕES
======================================== */


.urbanos-jobs {
    padding:
        140px
        5%;

    background:
        var(--parchment);
}


.jobs-heading {
    max-width:
        1100px;

    margin:
        0
        auto
        80px;

    text-align:
        center;
}


.jobs-heading h2 {
    margin:
        20px
        0
        35px;

    color:
        var(--ink);

    font-size:
        clamp(
            60px,
            8vw,
            105px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.jobs-heading > p:last-child {
    max-width:
        720px;

    margin:
        auto;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.9;
}


/* ========================================
   GRID DE EMPREGOS
======================================== */


.jobs-grid {
    max-width:
        1300px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        12px;
}


.job-card {
    min-height:
        310px;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid
        rgba(96, 54, 31, .25);

    color:
        var(--ink);

    background:
        rgba(255, 255, 255, .06);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.job-card:hover {
    transform:
        translateY(-6px);

    background:
        rgba(255, 255, 255, .18);

    box-shadow:
        0 20px 40px
        rgba(38, 23, 16, .08);
}


.job-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}


.job-number {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


.job-status {
    padding:
        7px
        9px;

    border:
        1px solid
        rgba(168, 70, 34, .35);

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.job-status.occupied {
    background:
        var(--rust);

    color:
        var(--cream);
}


.job-card h3 {
    margin:
        55px
        0
        35px;

    font-size:
        30px;

    line-height:
        1;

    font-weight:
        normal;
}


.job-data {
    margin-top:
        auto;

    padding-top:
        22px;

    border-top:
        1px solid
        rgba(96, 54, 31, .20);
}


.job-data p {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        12px;
}


.job-data span {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.job-data strong {
    color:
        var(--ink);

    font-size:
        17px;

    font-weight:
        normal;
}


.job-note {
    margin-top:
        14px;

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.5;
}


.job-occupied {
    background:
        rgba(168, 70, 34, .06);
}


/* ========================================
   PROFISSÕES EXTRAS
======================================== */


.jobs-exception {
    max-width:
        1100px;

    margin:
        100px
        auto
        0;

    padding:
        65px;

    display:
        grid;

    grid-template-columns:
        100px
        1fr;

    gap:
        40px;

    background:
        var(--terracotta);

    color:
        var(--cream);
}


.jobs-exception > span {
    font-size:
        50px;
}


.jobs-exception .section-label {
    color:
        var(--cream);
}


.jobs-exception h3 {
    margin:
        18px
        0
        30px;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    font-weight:
        normal;

    line-height:
        .95;
}


.jobs-exception p:not(.section-label) {
    max-width:
        720px;

    margin-bottom:
        18px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.9;

    color:
        rgba(241, 221, 194, .88);
}


/* ========================================
   ECONOMIA
======================================== */


.urbanos-economy {
    padding:
        140px
        6%;

    background:
        var(--ink-dark);

    color:
        var(--cream);
}


.economy-heading {
    max-width:
        1100px;

    margin:
        auto;
}


.economy-heading > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.economy-heading h2 {
    margin:
        25px
        0
        40px;

    font-size:
        clamp(
            60px,
            8vw,
            105px
        );

    line-height:
        .88;

    font-weight:
        normal;
}


.economy-heading p {
    max-width:
        650px;

    color:
        rgba(241, 221, 194, .70);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.9;
}


/* ========================================
   FLUXO ECONÔMICO
======================================== */


.economy-flow {
    max-width:
        1200px;

    margin:
        85px
        auto
        130px;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.economy-flow article {
    min-height:
        280px;

    padding:
        35px;

    border:
        1px solid
        rgba(241, 221, 194, .16);

    border-right:
        0;
}


.economy-flow article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .16);
}


.economy-flow span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.economy-flow h3 {
    margin:
        60px
        0
        22px;

    font-size:
        32px;

    font-weight:
        normal;
}


.economy-flow p {
    color:
        rgba(241, 221, 194, .62);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


/* ========================================
   TURNO EXTRA
======================================== */


.extra-work {
    max-width:
        1200px;

    margin:
        auto;

    padding-top:
        90px;

    border-top:
        1px solid
        rgba(241, 221, 194, .18);
}


.extra-work-title {
    max-width:
        720px;
}


.extra-work-title > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.extra-work-title h3 {
    margin:
        20px
        0
        28px;

    font-size:
        clamp(
            45px,
            6vw,
            75px
        );

    font-weight:
        normal;
}


.extra-work-title p {
    color:
        rgba(241, 221, 194, .68);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.9;
}


.dice-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin-top:
        60px;
}


.dice-grid article {
    min-height:
        240px;

    padding:
        40px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border:
        1px solid
        rgba(241, 221, 194, .17);

    border-right:
        0;
}


.dice-grid article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .17);
}


.dice-range {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        5px;
}


.dice-grid strong {
    font-size:
        24px;

    font-weight:
        normal;
}


.dice-grid p {
    color:
        rgba(241, 221, 194, .65);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;
}


/* ========================================
   DESPESAS
======================================== */


.urbanos-expenses {
    padding:
        140px
        6%;

    background:
        var(--cream);

    color:
        var(--ink);
}


.urbanos-expenses > h2 {
    max-width:
        1050px;

    margin:
        20px
        0
        35px;

    font-size:
        clamp(
            60px,
            8vw,
            100px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.expenses-intro {
    max-width:
        650px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.9;
}


.expenses-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    max-width:
        1200px;

    margin-top:
        70px;
}


.expenses-grid article {
    min-height:
        230px;

    padding:
        35px;

    border-right:
        1px solid
        rgba(96, 54, 31, .22);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .22);
}


.expenses-grid article:nth-child(-n+3) {
    border-top:
        1px solid
        rgba(96, 54, 31, .22);
}


.expenses-grid article:nth-child(3n+1) {
    border-left:
        1px solid
        rgba(96, 54, 31, .22);
}


.expenses-grid span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.expenses-grid h3 {
    margin:
        45px
        0
        20px;

    font-size:
        29px;

    font-weight:
        normal;
}


.expenses-grid p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.7;
}


.automatic-expenses {
    max-width:
        1200px;

    margin-top:
        60px;

    padding:
        30px
        0;

    border-top:
        1px solid
        rgba(96, 54, 31, .25);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}


.automatic-expenses span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.automatic-expenses p {
    max-width:
        650px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


/* ========================================
   FINAL
======================================== */


.urbanos-ending {
    padding:
        150px
        6%;

    background:
        var(--terracotta);

    color:
        var(--cream);

    text-align:
        center;
}


.urbanos-ending-symbol {
    font-size:
        38px;
}


.urbanos-ending > p {
    margin-top:
        30px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        6px;
}


.urbanos-ending h2 {
    max-width:
        1000px;

    margin:
        35px
        auto
        0;

    font-size:
        clamp(
            60px,
            9vw,
            115px
        );

    line-height:
        .86;

    font-weight:
        normal;
}


/* ========================================
   TABLET
======================================== */


@media (max-width: 1000px) {


    .freedom-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .freedom-card:nth-child(-n+3),
    .freedom-card:nth-child(3n+1) {
        border-top:
            none;

        border-left:
            none;
    }


    .freedom-card {
        border:
            1px solid
            rgba(241, 221, 194, .16);
    }


    .jobs-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .economy-flow {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .economy-flow article {
        border:
            1px solid
            rgba(241, 221, 194, .16);
    }


    .expenses-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .expenses-grid article,
    .expenses-grid article:nth-child(-n+3),
    .expenses-grid article:nth-child(3n+1) {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }

}


/* ========================================
   MOBILE
======================================== */


@media (max-width: 700px) {


    .urbanos-hero {
        min-height:
            75vh;
    }


    .urbanos-hero-content h1 {
        font-size:
            52px;

        letter-spacing:
            3px;
    }


    .urbanos-hero-phrase {
        font-size:
            16px;
    }


    .urbanos-freedom,
    .urbanos-jobs,
    .urbanos-economy,
    .urbanos-expenses {
        padding:
            100px
            6%;
    }


    .freedom-grid,
    .jobs-grid,
    .economy-flow,
    .dice-grid,
    .expenses-grid {
        grid-template-columns:
            1fr;
    }


    .jobs-exception {
        grid-template-columns:
            1fr;

        padding:
            45px
            30px;
    }


    .economy-flow article,
    .dice-grid article {
        border:
            1px solid
            rgba(241, 221, 194, .16);
    }


    .automatic-expenses {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}

/* ========================================
   NATIVOS PAGE
======================================== */


.natives-header {
    position: absolute;
}


/* ========================================
   HERO
======================================== */


.natives-hero {
    min-height: 85vh;

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        var(--ink-dark);
}


.natives-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


.natives-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .22),
            rgba(38, 23, 16, .12) 40%,
            rgba(7, 27, 33, .94)
        );
}


.natives-hero-content {
    position: relative;

    z-index: 2;

    padding: 40px;

    margin-top: 60px;

    color:
        var(--cream);
}


.natives-hero-content h1 {
    font-size:
        clamp(
            65px,
            12vw,
            165px
        );

    line-height:
        .78;

    font-weight:
        normal;

    letter-spacing:
        7px;
}


.natives-hero-phrase {
    margin-top: 42px;

    font-size: 20px;

    font-style: italic;
}


/* ========================================
   INTRODUÇÃO
======================================== */


.natives-intro {
    max-width: 970px;

    margin: auto;

    padding:
        145px
        7%;

    text-align: center;
}


.natives-intro h2 {
    margin-bottom: 45px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height: .92;

    font-weight: normal;
}


.natives-intro > p {
    max-width: 760px;

    margin:
        0
        auto
        23px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height: 2;
}


/* ========================================
   PRESENTE
======================================== */


.natives-present {
    padding:
        140px
        6%;

    background:
        var(--ink);

    color:
        var(--cream);
}


.natives-present-heading {
    max-width:
        1150px;

    margin:
        0
        auto
        80px;
}


.natives-present-heading > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.natives-present-heading h2 {
    margin:
        22px
        0
        35px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height:
        .89;

    font-weight:
        normal;
}


.natives-present-heading p {
    max-width:
        720px;

    color:
        rgba(241, 221, 194, .70);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.9;
}


.natives-present-grid {
    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.natives-present-grid article {
    min-height:
        300px;

    padding:
        35px;

    border:
        1px solid
        rgba(241, 221, 194, .16);

    border-right:
        0;
}


.natives-present-grid article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .16);
}


.natives-present-grid span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.natives-present-grid h3 {
    margin:
        65px
        0
        22px;

    font-size:
        32px;

    font-weight:
        normal;
}


.natives-present-grid p {
    color:
        rgba(241, 221, 194, .66);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


/* ========================================
   CRIAÇÃO
======================================== */


.natives-creation {
    padding:
        140px
        6%;

    background:
        var(--parchment);

    color:
        var(--ink);
}


.natives-section-heading {
    max-width:
        1100px;

    margin:
        0
        auto
        80px;

    text-align:
        center;
}


.natives-section-heading h2 {
    margin:
        20px
        0
        35px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.natives-section-heading > p:last-child {
    max-width:
        710px;

    margin:
        auto;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.9;
}


.natives-creation-grid {
    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.native-creation-card {
    min-height:
        340px;

    padding:
        38px;

    border-right:
        1px solid
        rgba(96, 54, 31, .22);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-creation-card:nth-child(-n+3) {
    border-top:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-creation-card:nth-child(3n+1) {
    border-left:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-creation-card > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.native-creation-card h3 {
    margin:
        48px
        0
        24px;

    font-size:
        34px;

    font-weight:
        normal;
}


.native-creation-card p {
    margin-bottom:
        12px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.85;
}


/* ========================================
   PROFISSÕES
======================================== */


.natives-professions {
    padding:
        145px
        6%;

    background:
        var(--ink-dark);

    color:
        var(--cream);
}


.natives-professions-content {
    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:
        90px;
}


.natives-professions-title > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.natives-professions-title h2 {
    margin-top:
        22px;

    font-size:
        clamp(
            55px,
            7vw,
            90px
        );

    line-height:
        .89;

    font-weight:
        normal;
}


.natives-professions-text p {
    margin-bottom:
        25px;

    color:
        rgba(241, 221, 194, .73);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.95;
}


.natives-professions-text strong {
    color:
        var(--cream);

    font-weight:
        normal;
}


/* ========================================
   EXEMPLOS DE PROFISSÃO
======================================== */


.native-profession-examples {
    max-width:
        1200px;

    margin:
        100px
        auto
        0;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.native-profession-examples article {
    min-height:
        360px;

    padding:
        40px;

    border:
        1px solid
        rgba(241, 221, 194, .17);

    border-right:
        0;
}


.native-profession-examples article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .17);
}


.native-profession-examples article > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.native-profession-examples h3 {
    margin:
        48px
        0;

    font-size:
        35px;

    font-weight:
        normal;
}


.native-profession-examples p {
    margin-top:
        22px;

    color:
        rgba(241, 221, 194, .50);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


.native-profession-examples strong {
    display:
        block;

    margin-top:
        8px;

    font-size:
        18px;

    font-weight:
        normal;
}


/* ========================================
   BOTÃO URBANOS
======================================== */


.natives-jobs-button {
    max-width:
        1200px;

    margin:
        20px
        auto
        0;

    padding:
        30px
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    text-decoration:
        none;

    border:
        1px solid
        rgba(241, 221, 194, .18);

    color:
        var(--cream);

    transition:
        background .3s ease,
        color .3s ease;
}


.natives-jobs-button:hover {
    background:
        var(--terracotta);

    color:
        var(--cream);
}


.natives-jobs-button span {
    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        4px;
}


.natives-jobs-button strong {
    font-size:
        30px;

    font-weight:
        normal;
}


/* ========================================
   PROFISSÃO EXTRA
======================================== */


.native-job-exception {
    max-width:
        1100px;

    margin:
        100px
        auto
        0;

    padding:
        65px;

    display:
        grid;

    grid-template-columns:
        100px
        1fr;

    gap:
        40px;

    background:
        var(--terracotta);

    color:
        var(--cream);
}


.native-job-symbol {
    font-size:
        48px;
}


.native-job-exception .section-label {
    color:
        var(--cream);
}


.native-job-exception h3 {
    margin:
        18px
        0
        30px;

    font-size:
        clamp(
            40px,
            5vw,
            65px
        );

    line-height:
        .94;

    font-weight:
        normal;
}


.native-job-exception p:not(.section-label) {
    max-width:
        720px;

    margin-bottom:
        18px;

    color:
        rgba(241, 221, 194, .90);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.9;
}


/* ========================================
   TERRA
======================================== */


.natives-land {
    padding:
        145px
        6%;

    background:
        var(--cream);

    color:
        var(--ink);
}


.natives-land-heading {
    max-width:
        1200px;

    margin:
        auto;
}


.natives-land-heading > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.natives-land-heading h2 {
    margin-top:
        25px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.natives-land-layout {
    max-width:
        1200px;

    margin:
        80px
        auto
        0;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        80px;

    align-items:
        start;
}


.natives-land-text p {
    margin-bottom:
        24px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        2;
}


.natives-land blockquote {
    margin:
        0;

    padding:
        55px;

    background:
        var(--ink);

    color:
        var(--cream);
}


.natives-land blockquote > span {
    color:
        var(--sand);

    font-size:
        32px;
}


.natives-land blockquote p {
    margin-top:
        35px;

    font-size:
        clamp(
            28px,
            4vw,
            48px
        );

    line-height:
        1.15;

    font-style:
        italic;
}


/* ========================================
   PRESCOTT
======================================== */


.natives-prescott {
    padding:
        140px
        6%;

    display:
        grid;

    grid-template-columns:
        100px
        1fr;

    gap:
        50px;

    background:
        var(--rust);

    color:
        var(--cream);
}


.prescott-native-number {
    padding-top:
        15px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    letter-spacing:
        4px;
}


.prescott-native-content {
    max-width:
        950px;
}


.prescott-native-content > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.prescott-native-content h2 {
    margin:
        25px
        0
        45px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.prescott-native-content p {
    max-width:
        760px;

    margin-bottom:
        22px;

    color:
        rgba(241, 221, 194, .90);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.9;
}


/* ========================================
   RELAÇÕES
======================================== */


.natives-relations {
    padding:
        140px
        6%;

    background:
        var(--parchment);

    color:
        var(--ink);
}


.natives-relations-heading {
    max-width:
        1050px;

    margin:
        0
        auto
        70px;

    text-align:
        center;
}


.natives-relations-heading h2 {
    margin:
        20px
        0
        35px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.natives-relations-heading > p:last-child {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;
}


.relations-grid {
    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.relations-grid article {
    min-height:
        260px;

    padding:
        35px;

    border-right:
        1px solid
        rgba(96, 54, 31, .22);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .22);
}


.relations-grid article:nth-child(-n+3) {
    border-top:
        1px solid
        rgba(96, 54, 31, .22);
}


.relations-grid article:nth-child(3n+1) {
    border-left:
        1px solid
        rgba(96, 54, 31, .22);
}


.relations-grid span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.relations-grid h3 {
    margin:
        48px
        0
        20px;

    font-size:
        31px;

    font-weight:
        normal;
}


.relations-grid p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


/* ========================================
   INDIVIDUALIDADE
======================================== */


.natives-individuality {
    padding:
        145px
        6%;

    display:
        grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:
        90px;

    background:
        var(--ink);

    color:
        var(--cream);
}


.individuality-left {
    max-width:
        620px;
}


.individuality-left > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.individuality-left h2 {
    margin-top:
        25px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.individuality-right {
    max-width:
        720px;
}


.individuality-right p {
    margin-bottom:
        25px;

    color:
        rgba(241, 221, 194, .73);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.95;
}


/* ========================================
   RESUMO
======================================== */


.natives-summary {
    padding:
        135px
        6%;

    background:
        var(--cream);

    color:
        var(--ink);
}


.natives-summary > h2 {
    margin:
        20px
        0
        60px;

    font-size:
        clamp(
            60px,
            8vw,
            105px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.native-summary-grid {
    max-width:
        1200px;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.native-summary-grid article {
    min-height:
        190px;

    padding:
        35px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(96, 54, 31, .22);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-summary-grid article:nth-child(-n+3) {
    border-top:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-summary-grid article:nth-child(3n+1) {
    border-left:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-summary-grid span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.native-summary-grid strong {
    font-size:
        27px;

    font-weight:
        normal;
}


/* ========================================
   FINAL
======================================== */


.natives-ending {
    padding:
        150px
        6%;

    background:
        var(--terracotta);

    color:
        var(--cream);

    text-align:
        center;
}


.natives-ending-symbol {
    font-size:
        38px;
}


.natives-ending > p {
    margin-top:
        30px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        6px;
}


.natives-ending h2 {
    max-width:
        1050px;

    margin:
        35px
        auto
        0;

    font-size:
        clamp(
            65px,
            9vw,
            120px
        );

    line-height:
        .86;

    font-weight:
        normal;
}


/* ========================================
   TABLET
======================================== */


@media (max-width: 1000px) {


    .natives-present-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .natives-present-grid article {
        border:
            1px solid
            rgba(241, 221, 194, .16);
    }


    .natives-creation-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .native-creation-card,
    .native-creation-card:nth-child(-n+3),
    .native-creation-card:nth-child(3n+1) {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .natives-professions-content {
        grid-template-columns:
            1fr;
    }


    .native-profession-examples {
        grid-template-columns:
            1fr;
    }


    .native-profession-examples article {
        border:
            1px solid
            rgba(241, 221, 194, .17);
    }


    .relations-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .relations-grid article,
    .relations-grid article:nth-child(-n+3),
    .relations-grid article:nth-child(3n+1) {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .native-summary-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .native-summary-grid article,
    .native-summary-grid article:nth-child(-n+3),
    .native-summary-grid article:nth-child(3n+1) {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }

}


/* ========================================
   MOBILE
======================================== */


@media (max-width: 700px) {


    .natives-hero {
        min-height:
            75vh;
    }


    .natives-hero-content h1 {
        font-size:
            52px;

        letter-spacing:
            3px;
    }


    .natives-hero-phrase {
        font-size:
            16px;
    }


    .natives-present,
    .natives-creation,
    .natives-professions,
    .natives-land,
    .natives-prescott,
    .natives-relations,
    .natives-individuality,
    .natives-summary {
        padding:
            100px
            6%;
    }


    .natives-present-grid,
    .natives-creation-grid,
    .natives-land-layout,
    .relations-grid,
    .natives-individuality,
    .native-summary-grid {
        grid-template-columns:
            1fr;
    }


    .native-job-exception {
        grid-template-columns:
            1fr;

        padding:
            45px
            30px;
    }


    .natives-prescott {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    .natives-present-grid article,
    .native-creation-card,
    .relations-grid article,
    .native-summary-grid article {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .natives-present-grid article {
        border-color:
            rgba(241, 221, 194, .16);
    }


    .natives-jobs-button {
        padding:
            25px;

        gap:
            25px;
    }


    .natives-jobs-button span {
        line-height:
            1.7;
    }

}

/* ========================================
   NATIVOS PAGE
======================================== */


.natives-header {
    position: absolute;
}


/* ========================================
   HERO
======================================== */


.natives-hero {
    min-height: 85vh;

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        var(--ink-dark);
}


.natives-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


.natives-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .22),
            rgba(38, 23, 16, .12) 40%,
            rgba(7, 27, 33, .94)
        );
}


.natives-hero-content {
    position: relative;

    z-index: 2;

    padding: 40px;

    margin-top: 60px;

    color:
        var(--cream);
}


.natives-hero-content h1 {
    font-size:
        clamp(
            65px,
            12vw,
            165px
        );

    line-height:
        .78;

    font-weight:
        normal;

    letter-spacing:
        7px;
}


.natives-hero-phrase {
    margin-top: 42px;

    font-size: 20px;

    font-style: italic;
}


/* ========================================
   INTRODUÇÃO
======================================== */


.natives-intro {
    max-width: 970px;

    margin: auto;

    padding:
        145px
        7%;

    text-align: center;
}


.natives-intro h2 {
    margin-bottom: 45px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height: .92;

    font-weight: normal;
}


.natives-intro > p {
    max-width: 760px;

    margin:
        0
        auto
        23px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height: 2;
}


/* ========================================
   PRESENTE
======================================== */


.natives-present {
    padding:
        140px
        6%;

    background:
        var(--ink);

    color:
        var(--cream);
}


.natives-present-heading {
    max-width:
        1150px;

    margin:
        0
        auto
        80px;
}


.natives-present-heading > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.natives-present-heading h2 {
    margin:
        22px
        0
        35px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height:
        .89;

    font-weight:
        normal;
}


.natives-present-heading p {
    max-width:
        720px;

    color:
        rgba(241, 221, 194, .70);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.9;
}


.natives-present-grid {
    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.natives-present-grid article {
    min-height:
        300px;

    padding:
        35px;

    border:
        1px solid
        rgba(241, 221, 194, .16);

    border-right:
        0;
}


.natives-present-grid article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .16);
}


.natives-present-grid span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.natives-present-grid h3 {
    margin:
        65px
        0
        22px;

    font-size:
        32px;

    font-weight:
        normal;
}


.natives-present-grid p {
    color:
        rgba(241, 221, 194, .66);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


/* ========================================
   CRIAÇÃO
======================================== */


.natives-creation {
    padding:
        140px
        6%;

    background:
        var(--parchment);

    color:
        var(--ink);
}


.natives-section-heading {
    max-width:
        1100px;

    margin:
        0
        auto
        80px;

    text-align:
        center;
}


.natives-section-heading h2 {
    margin:
        20px
        0
        35px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.natives-section-heading > p:last-child {
    max-width:
        710px;

    margin:
        auto;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.9;
}


.natives-creation-grid {
    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.native-creation-card {
    min-height:
        340px;

    padding:
        38px;

    border-right:
        1px solid
        rgba(96, 54, 31, .22);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-creation-card:nth-child(-n+3) {
    border-top:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-creation-card:nth-child(3n+1) {
    border-left:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-creation-card > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.native-creation-card h3 {
    margin:
        48px
        0
        24px;

    font-size:
        34px;

    font-weight:
        normal;
}


.native-creation-card p {
    margin-bottom:
        12px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.85;
}


/* ========================================
   PROFISSÕES
======================================== */


.natives-professions {
    padding:
        145px
        6%;

    background:
        var(--ink-dark);

    color:
        var(--cream);
}


.natives-professions-content {
    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:
        90px;
}


.natives-professions-title > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.natives-professions-title h2 {
    margin-top:
        22px;

    font-size:
        clamp(
            55px,
            7vw,
            90px
        );

    line-height:
        .89;

    font-weight:
        normal;
}


.natives-professions-text p {
    margin-bottom:
        25px;

    color:
        rgba(241, 221, 194, .73);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.95;
}


.natives-professions-text strong {
    color:
        var(--cream);

    font-weight:
        normal;
}


/* ========================================
   EXEMPLOS DE PROFISSÃO
======================================== */


.native-profession-examples {
    max-width:
        1200px;

    margin:
        100px
        auto
        0;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.native-profession-examples article {
    min-height:
        360px;

    padding:
        40px;

    border:
        1px solid
        rgba(241, 221, 194, .17);

    border-right:
        0;
}


.native-profession-examples article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .17);
}


.native-profession-examples article > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.native-profession-examples h3 {
    margin:
        48px
        0;

    font-size:
        35px;

    font-weight:
        normal;
}


.native-profession-examples p {
    margin-top:
        22px;

    color:
        rgba(241, 221, 194, .50);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


.native-profession-examples strong {
    display:
        block;

    margin-top:
        8px;

    font-size:
        18px;

    font-weight:
        normal;
}


/* ========================================
   BOTÃO URBANOS
======================================== */


.natives-jobs-button {
    max-width:
        1200px;

    margin:
        20px
        auto
        0;

    padding:
        30px
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    text-decoration:
        none;

    border:
        1px solid
        rgba(241, 221, 194, .18);

    color:
        var(--cream);

    transition:
        background .3s ease,
        color .3s ease;
}


.natives-jobs-button:hover {
    background:
        var(--terracotta);

    color:
        var(--cream);
}


.natives-jobs-button span {
    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        4px;
}


.natives-jobs-button strong {
    font-size:
        30px;

    font-weight:
        normal;
}


/* ========================================
   PROFISSÃO EXTRA
======================================== */


.native-job-exception {
    max-width:
        1100px;

    margin:
        100px
        auto
        0;

    padding:
        65px;

    display:
        grid;

    grid-template-columns:
        100px
        1fr;

    gap:
        40px;

    background:
        var(--terracotta);

    color:
        var(--cream);
}


.native-job-symbol {
    font-size:
        48px;
}


.native-job-exception .section-label {
    color:
        var(--cream);
}


.native-job-exception h3 {
    margin:
        18px
        0
        30px;

    font-size:
        clamp(
            40px,
            5vw,
            65px
        );

    line-height:
        .94;

    font-weight:
        normal;
}


.native-job-exception p:not(.section-label) {
    max-width:
        720px;

    margin-bottom:
        18px;

    color:
        rgba(241, 221, 194, .90);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.9;
}


/* ========================================
   TERRA
======================================== */


.natives-land {
    padding:
        145px
        6%;

    background:
        var(--cream);

    color:
        var(--ink);
}


.natives-land-heading {
    max-width:
        1200px;

    margin:
        auto;
}


.natives-land-heading > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.natives-land-heading h2 {
    margin-top:
        25px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.natives-land-layout {
    max-width:
        1200px;

    margin:
        80px
        auto
        0;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        80px;

    align-items:
        start;
}


.natives-land-text p {
    margin-bottom:
        24px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        2;
}


.natives-land blockquote {
    margin:
        0;

    padding:
        55px;

    background:
        var(--ink);

    color:
        var(--cream);
}


.natives-land blockquote > span {
    color:
        var(--sand);

    font-size:
        32px;
}


.natives-land blockquote p {
    margin-top:
        35px;

    font-size:
        clamp(
            28px,
            4vw,
            48px
        );

    line-height:
        1.15;

    font-style:
        italic;
}


/* ========================================
   PRESCOTT
======================================== */


.natives-prescott {
    padding:
        140px
        6%;

    display:
        grid;

    grid-template-columns:
        100px
        1fr;

    gap:
        50px;

    background:
        var(--rust);

    color:
        var(--cream);
}


.prescott-native-number {
    padding-top:
        15px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    letter-spacing:
        4px;
}


.prescott-native-content {
    max-width:
        950px;
}


.prescott-native-content > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.prescott-native-content h2 {
    margin:
        25px
        0
        45px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.prescott-native-content p {
    max-width:
        760px;

    margin-bottom:
        22px;

    color:
        rgba(241, 221, 194, .90);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.9;
}


/* ========================================
   RELAÇÕES
======================================== */


.natives-relations {
    padding:
        140px
        6%;

    background:
        var(--parchment);

    color:
        var(--ink);
}


.natives-relations-heading {
    max-width:
        1050px;

    margin:
        0
        auto
        70px;

    text-align:
        center;
}


.natives-relations-heading h2 {
    margin:
        20px
        0
        35px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.natives-relations-heading > p:last-child {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;
}


.relations-grid {
    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.relations-grid article {
    min-height:
        260px;

    padding:
        35px;

    border-right:
        1px solid
        rgba(96, 54, 31, .22);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .22);
}


.relations-grid article:nth-child(-n+3) {
    border-top:
        1px solid
        rgba(96, 54, 31, .22);
}


.relations-grid article:nth-child(3n+1) {
    border-left:
        1px solid
        rgba(96, 54, 31, .22);
}


.relations-grid span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.relations-grid h3 {
    margin:
        48px
        0
        20px;

    font-size:
        31px;

    font-weight:
        normal;
}


.relations-grid p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


/* ========================================
   INDIVIDUALIDADE
======================================== */


.natives-individuality {
    padding:
        145px
        6%;

    display:
        grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:
        90px;

    background:
        var(--ink);

    color:
        var(--cream);
}


.individuality-left {
    max-width:
        620px;
}


.individuality-left > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.individuality-left h2 {
    margin-top:
        25px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.individuality-right {
    max-width:
        720px;
}


.individuality-right p {
    margin-bottom:
        25px;

    color:
        rgba(241, 221, 194, .73);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.95;
}


/* ========================================
   RESUMO
======================================== */


.natives-summary {
    padding:
        135px
        6%;

    background:
        var(--cream);

    color:
        var(--ink);
}


.natives-summary > h2 {
    margin:
        20px
        0
        60px;

    font-size:
        clamp(
            60px,
            8vw,
            105px
        );

    line-height:
        .9;

    font-weight:
        normal;
}


.native-summary-grid {
    max-width:
        1200px;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.native-summary-grid article {
    min-height:
        190px;

    padding:
        35px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(96, 54, 31, .22);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-summary-grid article:nth-child(-n+3) {
    border-top:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-summary-grid article:nth-child(3n+1) {
    border-left:
        1px solid
        rgba(96, 54, 31, .22);
}


.native-summary-grid span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.native-summary-grid strong {
    font-size:
        27px;

    font-weight:
        normal;
}


/* ========================================
   FINAL
======================================== */


.natives-ending {
    padding:
        150px
        6%;

    background:
        var(--terracotta);

    color:
        var(--cream);

    text-align:
        center;
}


.natives-ending-symbol {
    font-size:
        38px;
}


.natives-ending > p {
    margin-top:
        30px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        6px;
}


.natives-ending h2 {
    max-width:
        1050px;

    margin:
        35px
        auto
        0;

    font-size:
        clamp(
            65px,
            9vw,
            120px
        );

    line-height:
        .86;

    font-weight:
        normal;
}


/* ========================================
   TABLET
======================================== */


@media (max-width: 1000px) {


    .natives-present-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .natives-present-grid article {
        border:
            1px solid
            rgba(241, 221, 194, .16);
    }


    .natives-creation-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .native-creation-card,
    .native-creation-card:nth-child(-n+3),
    .native-creation-card:nth-child(3n+1) {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .natives-professions-content {
        grid-template-columns:
            1fr;
    }


    .native-profession-examples {
        grid-template-columns:
            1fr;
    }


    .native-profession-examples article {
        border:
            1px solid
            rgba(241, 221, 194, .17);
    }


    .relations-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .relations-grid article,
    .relations-grid article:nth-child(-n+3),
    .relations-grid article:nth-child(3n+1) {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .native-summary-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .native-summary-grid article,
    .native-summary-grid article:nth-child(-n+3),
    .native-summary-grid article:nth-child(3n+1) {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }

}


/* ========================================
   MOBILE
======================================== */


@media (max-width: 700px) {


    .natives-hero {
        min-height:
            75vh;
    }


    .natives-hero-content h1 {
        font-size:
            52px;

        letter-spacing:
            3px;
    }


    .natives-hero-phrase {
        font-size:
            16px;
    }


    .natives-present,
    .natives-creation,
    .natives-professions,
    .natives-land,
    .natives-prescott,
    .natives-relations,
    .natives-individuality,
    .natives-summary {
        padding:
            100px
            6%;
    }


    .natives-present-grid,
    .natives-creation-grid,
    .natives-land-layout,
    .relations-grid,
    .natives-individuality,
    .native-summary-grid {
        grid-template-columns:
            1fr;
    }


    .native-job-exception {
        grid-template-columns:
            1fr;

        padding:
            45px
            30px;
    }


    .natives-prescott {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    .natives-present-grid article,
    .native-creation-card,
    .relations-grid article,
    .native-summary-grid article {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .natives-present-grid article {
        border-color:
            rgba(241, 221, 194, .16);
    }


    .natives-jobs-button {
        padding:
            25px;

        gap:
            25px;
    }


    .natives-jobs-button span {
        line-height:
            1.7;
    }

}

/* ========================================
   RODEIOS PAGE
======================================== */


.rodeos-header {
    position: absolute;
}


/* ========================================
   HERO
======================================== */


.rodeos-hero {
    min-height: 88vh;

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: var(--ink-dark);
}


.rodeos-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


.rodeos-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .20),
            rgba(38, 23, 16, .16) 45%,
            rgba(7, 27, 33, .95)
        );
}


.rodeos-hero-content {
    position: relative;

    z-index: 2;

    padding: 40px;

    margin-top: 60px;

    color: var(--cream);
}


.rodeos-hero-content h1 {
    font-size:
        clamp(
            65px,
            12vw,
            165px
        );

    line-height: .78;

    font-weight: normal;

    letter-spacing: 7px;
}


.rodeos-hero-phrase {
    margin-top: 42px;

    font-size: 20px;

    font-style: italic;
}


/* ========================================
   INTRO
======================================== */


.rodeos-intro {
    max-width: 970px;

    margin: auto;

    padding: 145px 7%;

    text-align: center;
}


.rodeos-intro h2 {
    margin-bottom: 45px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height: .92;

    font-weight: normal;
}


.rodeos-intro > p {
    max-width: 760px;

    margin:
        0
        auto
        22px;

    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 2;
}


/* ========================================
   QUEM COMPETE
======================================== */


.rodeos-players {
    padding: 135px 6%;

    background: var(--ink);

    color: var(--cream);
}


.rodeos-section-heading {
    max-width: 1150px;

    margin:
        0
        auto
        75px;
}


.rodeos-section-heading > span {
    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.rodeos-section-heading h2 {
    margin-top: 22px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height: .89;

    font-weight: normal;
}


.rodeos-player-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.rodeos-player-grid article {
    min-height: 320px;

    padding: 38px;

    border:
        1px solid
        rgba(241, 221, 194, .16);

    border-right: 0;
}


.rodeos-player-grid article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .16);
}


.rodeos-player-grid span {
    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


.rodeos-player-grid h3 {
    margin:
        65px
        0
        25px;

    font-size: 34px;

    font-weight: normal;
}


.rodeos-player-grid p {
    color:
        rgba(241, 221, 194, .66);

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.85;
}


/* ========================================
   MODALIDADES
======================================== */


.rodeos-modalities {
    padding: 145px 5%;

    background: var(--parchment);
}


.modalities-heading {
    max-width: 1050px;

    margin:
        0
        auto
        80px;

    text-align: center;
}


.modalities-heading h2 {
    margin:
        20px
        0
        35px;

    font-size:
        clamp(
            60px,
            8vw,
            105px
        );

    line-height: .9;

    font-weight: normal;
}


.modalities-heading > p:last-child {
    max-width: 700px;

    margin: auto;

    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.9;
}


.modalities-grid {
    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


.modality-card {
    overflow: hidden;

    background: var(--cream);

    border:
        1px solid
        rgba(96, 54, 31, .22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.modality-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 25px 50px
        rgba(38, 23, 16, .12);
}


.modality-image {
    position: relative;

    height: 410px;

    overflow: hidden;

    background: var(--wood);
}


.modality-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(7, 27, 33, .68)
        );

    pointer-events: none;
}


.modality-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


.modality-image > span {
    position: absolute;

    z-index: 2;

    left: 30px;
    bottom: 25px;

    color: var(--cream);

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;
}


.modality-content {
    padding: 38px;
}


.modality-name {
    color: var(--rust);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


.modality-content h3 {
    margin:
        16px
        0
        24px;

    font-size: 39px;

    line-height: 1;

    font-weight: normal;
}


.modality-content > p {
    min-height: 75px;

    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.8;
}


.modality-training {
    margin-top: 35px;

    padding-top: 25px;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap:
        8px
        20px;

    border-top:
        1px solid
        rgba(96, 54, 31, .20);
}


.modality-training span {
    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 7px;

    letter-spacing: 3px;
}


.modality-training strong {
    grid-row:
        1 / 3;

    grid-column: 2;

    align-self: center;

    color: var(--rust);

    font-size: 25px;

    font-weight: normal;
}


.modality-training small {
    color: var(--ink);

    font-family: Arial, sans-serif;

    font-size: 10px;
}


/* ========================================
   TREINAMENTO
======================================== */


.rodeos-training {
    padding: 145px 6%;

    background: var(--ink-dark);

    color: var(--cream);
}


.training-heading {
    max-width: 1050px;

    margin: auto;
}


.training-heading > span {
    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.training-heading h2 {
    margin:
        24px
        0
        40px;

    font-size:
        clamp(
            60px,
            8vw,
            105px
        );

    line-height: .88;

    font-weight: normal;
}


.training-heading p {
    max-width: 680px;

    margin-bottom: 17px;

    color:
        rgba(241, 221, 194, .70);

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.9;
}


/* REGRA +1 */

.training-rule {
    max-width: 1150px;

    margin:
        90px
        auto
        0;

    padding:
        60px;

    display: grid;

    grid-template-columns:
        230px
        1fr;

    gap: 60px;

    align-items: center;

    border:
        1px solid
        rgba(241, 221, 194, .18);
}


.training-rule-number {
    color: var(--sand);

    font-size:
        clamp(
            90px,
            12vw,
            170px
        );

    line-height: .75;
}


.training-rule > div:last-child > span {
    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.training-rule h3 {
    margin:
        18px
        0
        30px;

    font-size: 44px;

    font-weight: normal;
}


.training-rule p {
    max-width: 680px;

    margin-bottom: 15px;

    color:
        rgba(241, 221, 194, .70);

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.9;
}


.training-rule p strong {
    color: var(--cream);
}


/* PROGRESSO */

.training-progress {
    max-width: 1150px;

    margin:
        25px
        auto
        0;

    display: grid;

    grid-template-columns:
        repeat(10, 1fr);
}


.training-progress article {
    min-height: 135px;

    padding: 20px 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 13px;

    border:
        1px solid
        rgba(241, 221, 194, .16);

    border-right: 0;
}


.training-progress article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .16);
}


.training-progress span {
    color:
        rgba(241, 221, 194, .42);

    font-family: Arial, sans-serif;

    font-size: 7px;

    letter-spacing: 2px;
}


.training-progress strong {
    color: var(--cream);

    font-size: 22px;

    font-weight: normal;
}


.training-progress small {
    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 6px;

    letter-spacing: 2px;
}


.training-max {
    background: var(--rust);
}


/* MODALIDADES SEPARADAS */

.training-separate {
    max-width: 1050px;

    margin:
        100px
        auto
        0;

    padding:
        60px;

    display: grid;

    grid-template-columns:
        90px
        1fr;

    gap: 35px;

    background: var(--terracotta);
}


.training-symbol {
    color: var(--cream);

    font-size: 42px;
}


.training-separate .section-label {
    color: var(--cream);
}


.training-separate h3 {
    margin:
        18px
        0
        30px;

    font-size:
        clamp(
            39px,
            5vw,
            62px
        );

    line-height: .95;

    font-weight: normal;
}


.training-separate p:not(.section-label) {
    max-width: 700px;

    margin-bottom: 17px;

    color:
        rgba(241, 221, 194, .90);

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.9;
}


/* ========================================
   EXEMPLO DE CAVALO
======================================== */


.rodeos-example {
    padding: 140px 6%;

    background: var(--cream);

    color: var(--ink);
}


.rodeos-example-title {
    max-width: 1050px;
}


.rodeos-example-title > span {
    color: var(--rust);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.rodeos-example-title h2 {
    margin-top: 22px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height: .9;

    font-weight: normal;
}


.horse-example {
    max-width: 1150px;

    margin-top: 80px;

    border:
        1px solid
        rgba(96, 54, 31, .24);
}


.horse-example-header {
    padding: 45px;

    background: var(--ink);

    color: var(--cream);
}


.horse-example-header span {
    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.horse-example-header h3 {
    margin-top: 12px;

    font-size: 50px;

    font-weight: normal;
}


.horse-training-list {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.horse-training-list article {
    min-height: 210px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    border-right:
        1px solid
        rgba(96, 54, 31, .22);
}


.horse-training-list article:last-child {
    border-right: 0;
}


.horse-training-list span {
    color: var(--rust);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    line-height: 1.5;
}


.horse-training-list strong {
    margin-top: 40px;

    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 12px;

    font-weight: normal;
}


.horse-training-list b {
    margin-top: auto;

    color: var(--ink);

    font-size: 39px;

    font-weight: normal;
}


/* ========================================
   D20
======================================== */


.rodeos-dice {
    padding: 145px 6%;

    background: var(--rust);

    color: var(--cream);
}


.dice-main {
    max-width: 900px;

    margin: auto;

    text-align: center;
}


.dice-main > span {
    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.dice-main h2 {
    margin:
        25px
        0
        38px;

    font-size:
        clamp(
            65px,
            9vw,
            115px
        );

    line-height: .83;

    font-weight: normal;
}


.dice-main p {
    max-width: 680px;

    margin: auto;

    color:
        rgba(241, 221, 194, .88);

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.9;
}


.dice-formula {
    max-width: 1000px;

    margin:
        75px
        auto
        0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 28px;
}


.dice-formula > div {
    min-width: 200px;

    padding: 35px;

    text-align: center;

    border:
        1px solid
        rgba(241, 221, 194, .28);
}


.dice-formula span {
    display: block;

    margin-bottom: 18px;

    font-family: Arial, sans-serif;

    font-size: 7px;

    letter-spacing: 4px;
}


.dice-formula strong {
    font-size: 60px;

    font-weight: normal;
}


.dice-formula > b {
    font-size: 45px;

    font-weight: normal;
}


.dice-total {
    background: var(--ink);

    border-color: var(--ink) !important;
}


.dice-explanation {
    max-width: 700px;

    margin:
        55px
        auto
        0;

    text-align: center;
}


.dice-explanation p {
    margin-bottom: 12px;

    color:
        rgba(241, 221, 194, .88);

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.8;
}


/* ========================================
   SEM ATRIBUTOS
======================================== */


.rodeos-no-stats {
    padding: 140px 6%;

    display: grid;

    grid-template-columns:
        100px
        1fr;

    gap: 50px;

    background: var(--ink);

    color: var(--cream);
}


.no-stats-number {
    padding-top: 10px;

    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;
}


.no-stats-content {
    max-width: 950px;
}


.no-stats-content > span {
    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.no-stats-content h2 {
    margin:
        25px
        0
        45px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height: .9;

    font-weight: normal;
}


.no-stats-content p {
    max-width: 740px;

    margin-bottom: 20px;

    color:
        rgba(241, 221, 194, .72);

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.9;
}


/* ========================================
   CRIADORES
======================================== */


.rodeos-breeders {
    padding: 140px 6%;

    background: var(--parchment);

    color: var(--ink);
}


.breeders-heading {
    max-width: 900px;
}


.breeders-heading h2 {
    margin:
        20px
        0
        35px;

    font-size:
        clamp(
            60px,
            8vw,
            105px
        );

    line-height: .88;

    font-weight: normal;
}


.breeders-heading > p:last-child {
    max-width: 650px;

    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.9;
}


.breeders-grid {
    max-width: 1150px;

    margin-top: 70px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);
}


.breeders-grid article {
    min-height: 340px;

    padding: 45px;

    display: flex;

    flex-direction: column;

    border:
        1px solid
        rgba(96, 54, 31, .24);

    border-right: 0;
}


.breeders-grid article:last-child {
    border-right:
        1px solid
        rgba(96, 54, 31, .24);
}


.breeders-grid span {
    color: var(--rust);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.breeders-grid h3 {
    margin:
        50px
        0
        25px;

    font-size: 38px;

    font-weight: normal;
}


.breeders-grid p {
    max-width: 450px;

    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.85;
}


.breeders-grid a {
    margin-top: auto;

    padding-top: 30px;

    color: var(--rust);

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 3px;
}


.breeders-note {
    max-width: 900px;

    margin-top: 40px;

    padding-top: 30px;

    border-top:
        1px solid
        rgba(96, 54, 31, .22);

    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.8;
}


/* ========================================
   EVENTOS
======================================== */


.rodeos-events {
    padding: 145px 6%;

    background: var(--cream);

    color: var(--ink);
}


.events-heading {
    max-width: 1050px;

    margin-bottom: 75px;
}


.events-heading > span {
    color: var(--rust);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.events-heading h2 {
    margin:
        22px
        0
        35px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height: .9;

    font-weight: normal;
}


.events-heading > p:last-child {
    max-width: 650px;

    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.9;
}


.events-grid {
    max-width: 1150px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.events-grid article {
    min-height: 330px;

    padding: 40px;

    border:
        1px solid
        rgba(96, 54, 31, .22);

    border-right: 0;
}


.events-grid article:last-child {
    border-right:
        1px solid
        rgba(96, 54, 31, .22);
}


.events-grid span {
    color: var(--rust);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


.events-grid h3 {
    margin:
        55px
        0
        23px;

    font-size: 34px;

    font-weight: normal;
}


.events-grid p {
    color: var(--leather);

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.85;
}


/* ========================================
   RESUMO
======================================== */


.rodeos-summary {
    padding: 140px 6%;

    background: var(--ink-dark);

    color: var(--cream);
}


.rodeos-summary > h2 {
    margin:
        20px
        0
        65px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height: .9;

    font-weight: normal;
}


.rodeos-summary .section-label {
    color: var(--sand);
}


.rodeos-summary-grid {
    max-width: 1150px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.rodeos-summary-grid article {
    min-height: 190px;

    padding: 35px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right:
        1px solid
        rgba(241, 221, 194, .16);

    border-bottom:
        1px solid
        rgba(241, 221, 194, .16);
}


.rodeos-summary-grid article:nth-child(-n+3) {
    border-top:
        1px solid
        rgba(241, 221, 194, .16);
}


.rodeos-summary-grid article:nth-child(3n+1) {
    border-left:
        1px solid
        rgba(241, 221, 194, .16);
}


.rodeos-summary-grid span {
    color: var(--sand);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


.rodeos-summary-grid strong {
    color: var(--cream);

    font-size: 25px;

    font-weight: normal;

    line-height: 1.2;
}


/* ========================================
   FINAL
======================================== */


.rodeos-ending {
    padding: 150px 6%;

    background: var(--terracotta);

    color: var(--cream);

    text-align: center;
}


.rodeos-ending > span {
    font-size: 38px;
}


.rodeos-ending > p {
    margin-top: 30px;

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 6px;
}


.rodeos-ending h2 {
    max-width: 1000px;

    margin:
        35px
        auto
        0;

    font-size:
        clamp(
            60px,
            9vw,
            115px
        );

    line-height: .86;

    font-weight: normal;
}


/* ========================================
   TABLET
======================================== */


@media (max-width: 1000px) {


    .modalities-grid {
        grid-template-columns:
            1fr;
    }


    .training-progress {
        grid-template-columns:
            repeat(5, 1fr);
    }


    .training-progress article {
        border:
            1px solid
            rgba(241, 221, 194, .16);
    }


    .horse-training-list {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .horse-training-list article {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .dice-formula {
        gap: 14px;
    }


    .dice-formula > div {
        min-width: 160px;
    }

}


/* ========================================
   MOBILE
======================================== */


@media (max-width: 700px) {


    .rodeos-hero {
        min-height: 75vh;
    }


    .rodeos-hero-content h1 {
        font-size: 49px;

        letter-spacing: 3px;
    }


    .rodeos-hero-phrase {
        font-size: 16px;
    }


    .rodeos-players,
    .rodeos-modalities,
    .rodeos-training,
    .rodeos-example,
    .rodeos-dice,
    .rodeos-no-stats,
    .rodeos-breeders,
    .rodeos-events,
    .rodeos-summary {
        padding:
            100px
            6%;
    }


    .rodeos-player-grid,
    .breeders-grid,
    .events-grid,
    .rodeos-summary-grid {
        grid-template-columns:
            1fr;
    }


    .rodeos-player-grid article,
    .breeders-grid article,
    .events-grid article,
    .rodeos-summary-grid article {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .rodeos-player-grid article,
    .rodeos-summary-grid article {
        border-color:
            rgba(241, 221, 194, .16);
    }


    .modality-image {
        height: 330px;
    }


    .training-rule {
        grid-template-columns:
            1fr;

        padding: 40px 30px;
    }


    .training-rule-number {
        font-size: 100px;
    }


    .training-progress {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .training-separate {
        grid-template-columns:
            1fr;

        padding: 45px 30px;
    }


    .horse-training-list {
        grid-template-columns:
            1fr;
    }


    .dice-formula {
        flex-direction: column;
    }


    .dice-formula > div {
        width: 100%;

        min-width: 0;
    }


    .dice-formula > b {
        transform: rotate(90deg);
    }


    .rodeos-no-stats {
        grid-template-columns:
            1fr;

        gap: 20px;
    }

}

/* ========================================
   SHAPES PAGE
======================================== */


.shapes-header {
    position: absolute;
}


/* ========================================
   HERO
======================================== */


.shapes-hero {
    min-height: 88vh;

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            var(--ink-dark),
            var(--ink)
        );

    text-align: center;

    color: var(--cream);
}


.shapes-hero::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    border:
        1px solid
        rgba(241, 221, 194, .08);

    border-radius: 50%;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);
}


.shapes-hero::after {
    content: "";

    position: absolute;

    width: 900px;
    height: 900px;

    border:
        1px solid
        rgba(241, 221, 194, .04);

    border-radius: 50%;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);
}


.shapes-hero-decoration {
    position: absolute;

    left: 5%;
    bottom: 7%;

    color:
        rgba(241, 221, 194, .08);

    font-size:
        clamp(
            130px,
            18vw,
            260px
        );
}


.shapes-hero-content {
    position: relative;

    z-index: 2;

    padding: 50px;

    margin-top: 60px;
}


.shapes-hero-content h1 {
    font-size:
        clamp(
            62px,
            11vw,
            150px
        );

    line-height: .76;

    font-weight: normal;

    letter-spacing: 5px;
}


.shapes-hero-content > p:last-child {
    margin-top: 45px;

    font-size: 19px;

    font-style: italic;
}


/* ========================================
   INTRODUÇÃO
======================================== */


.shapes-intro {
    max-width: 950px;

    margin: auto;

    padding:
        145px
        7%;

    text-align: center;
}


.shapes-intro h2 {
    margin-bottom: 45px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height: .92;

    font-weight: normal;
}


.shapes-intro > p {
    max-width: 760px;

    margin:
        0
        auto
        22px;

    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 2;
}


/* ========================================
   GUIA DE STATUS
======================================== */


.shapes-status-guide {
    padding:
        135px
        6%;

    background: var(--terracotta);

    color: var(--cream);
}


.status-guide-heading {
    max-width: 1100px;

    margin:
        0
        auto
        70px;
}


.status-guide-heading > span {
    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;

    color: var(--cream);
}


.status-guide-heading h2 {
    margin-top: 20px;

    font-size:
        clamp(
            52px,
            7vw,
            90px
        );

    font-weight: normal;

    line-height: .92;
}


.status-guide-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.status-guide-grid article {
    min-height: 310px;

    padding: 40px;

    border:
        1px solid
        rgba(241, 221, 194, .24);

    border-right: 0;
}


.status-guide-grid article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .24);
}


.status-guide-grid article > span {
    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;

    color: var(--cream);
}


.status-guide-grid h3 {
    margin:
        65px
        0
        25px;

    font-size: 36px;

    font-weight: normal;
}


.status-guide-grid p {
    font-family:
        Arial,
        sans-serif;

    color:
        rgba(241, 221, 194, .82);

    font-size: 13px;

    line-height: 1.85;
}


.status-guide-free {
    background:
        rgba(241, 221, 194, .05);
}


.status-guide-reserved {
    background:
        rgba(96, 54, 31, .08);
}


.status-guide-occupied {
    background:
        rgba(7, 27, 33, .10);
}


/* ========================================
   DIRETÓRIO
======================================== */


.shapes-directory {
    padding:
        145px
        5%;

    background: var(--parchment);
}


.shapes-directory-heading {
    max-width: 1050px;

    margin:
        0
        auto
        75px;

    text-align: center;
}


.shapes-directory-heading h2 {
    margin:
        20px
        0
        30px;

    font-size:
        clamp(
            55px,
            7vw,
            95px
        );

    line-height: .9;

    font-weight: normal;
}


.shapes-directory-heading > p:last-child {
    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;
}


/* ========================================
   BUSCA
======================================== */


.shapes-search {
    max-width: 1200px;

    margin:
        0
        auto
        45px;
}


.shapes-search > label {
    display: block;

    margin-bottom: 12px;

    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


.search-field {
    position: relative;
}


.search-field input {
    width: 100%;

    padding:
        24px
        65px
        24px
        25px;

    border:
        1px solid
        rgba(96, 54, 31, .28);

    border-radius: 0;

    outline: none;

    background:
        rgba(255, 255, 255, .14);

    color: var(--ink);

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    transition:
        border-color .3s ease,
        background .3s ease;
}


.search-field input:focus {
    border-color: var(--rust);

    background:
        rgba(255, 255, 255, .28);
}


.search-field input::placeholder {
    color:
        rgba(96, 54, 31, .55);
}


.search-field > span {
    position: absolute;

    right: 24px;

    top: 50%;

    transform:
        translateY(-50%);

    color: var(--rust);

    font-size: 25px;

    pointer-events: none;
}


/* ========================================
   FILTROS
======================================== */


.shape-filter-group {
    max-width: 1200px;

    margin:
        0
        auto
        30px;
}


.filter-title {
    display: block;

    margin-bottom: 12px;

    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


.shape-filters {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.shape-filter,
.shape-gender-filter {
    padding:
        13px
        18px;

    border:
        1px solid
        rgba(96, 54, 31, .25);

    background: transparent;

    color: var(--leather);

    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.shape-filter:hover,
.shape-gender-filter:hover,
.shape-filter.active,
.shape-gender-filter.active {
    background: var(--rust);

    border-color: var(--rust);

    color: var(--cream);
}


/* ========================================
   CONTADORES
======================================== */


.shapes-counters {
    max-width: 1200px;

    margin:
        65px
        auto
        65px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.shapes-counters article {
    min-height: 150px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border:
        1px solid
        rgba(96, 54, 31, .22);

    border-right: 0;
}


.shapes-counters article:last-child {
    border-right:
        1px solid
        rgba(96, 54, 31, .22);
}


.shapes-counters span {
    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;
}


.shapes-counters strong {
    color: var(--ink);

    font-size: 42px;

    font-weight: normal;
}


/* ========================================
   GRID DOS SHAPES
======================================== */


.shapes-grid {
    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}


/* ========================================
   CARD
======================================== */


.shape-card {
    overflow: hidden;

    background: var(--cream);

    border:
        1px solid
        rgba(96, 54, 31, .22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.shape-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 22px 50px
        rgba(38, 23, 16, .12);
}


/* FOTO */

.shape-photo {
    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    background: var(--wood-dark);
}


.shape-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center top;

    transition:
        transform .5s ease;
}


.shape-card:hover
.shape-photo img {
    transform:
        scale(1.025);
}


.shape-photo-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 55%,
            rgba(7, 27, 33, .58)
        );

    pointer-events: none;
}


/* STATUS */

.shape-status {
    position: absolute;

    z-index: 2;

    left: 18px;
    bottom: 18px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(241, 221, 194, .45);

    color: var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 3px;
}


.shape-status-livre {
    background:
        rgba(23, 59, 69, .88);
}


.shape-status-reservado {
    background:
        rgba(96, 54, 31, .92);
}


.shape-status-ocupado {
    background:
        rgba(168, 70, 34, .92);
}


/* CONTEÚDO */

.shape-card-content {
    min-height: 265px;

    padding: 25px;
}


.shape-label {
    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 4px;
}


.shape-card-content h3 {
    min-height: 55px;

    margin:
        14px
        0
        25px;

    color: var(--ink);

    font-size: 26px;

    line-height: 1.05;

    font-weight: normal;
}


/* INFORMAÇÕES */

.shape-info {
    padding-top: 20px;

    border-top:
        1px solid
        rgba(96, 54, 31, .18);
}


.shape-info > div {
    margin-bottom: 19px;
}


.shape-info span {
    display: block;

    margin-bottom: 6px;

    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 2px;
}


.shape-info strong {
    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.5;

    font-weight: normal;
}


.shape-availability {
    margin-top: 30px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(96, 54, 31, .18);
}


.shape-availability span {
    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;
}


/* ========================================
   NENHUM RESULTADO
======================================== */


.shapes-empty {
    max-width: 700px;

    margin:
        80px
        auto
        0;

    padding: 70px;

    text-align: center;

    border:
        1px solid
        rgba(96, 54, 31, .22);
}


.shapes-empty > span {
    color: var(--rust);

    font-size: 35px;
}


.shapes-empty h3 {
    margin:
        25px
        0
        15px;

    color: var(--ink);

    font-size: 35px;

    font-weight: normal;
}


.shapes-empty p {
    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;
}


/* ========================================
   IDENTIFICAÇÃO DO PLAYER
======================================== */


.shapes-player-id {
    padding:
        145px
        6%;

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 90px;

    background: var(--ink);

    color: var(--cream);
}


.player-id-title > span {
    color: var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.player-id-title h2 {
    margin-top: 25px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height: .9;

    font-weight: normal;
}


.player-id-content {
    max-width: 680px;
}


.player-id-content > p {
    margin-bottom: 22px;

    color:
        rgba(241, 221, 194, .72);

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.9;
}


.player-id-example {
    margin:
        45px
        0;

    padding: 38px;

    border:
        1px solid
        rgba(241, 221, 194, .18);
}


.player-id-example span {
    display: block;

    margin-bottom: 16px;

    color: var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


.player-id-example strong {
    font-size: 34px;

    font-weight: normal;
}


/* ========================================
   REGRAS
======================================== */


.shapes-rules {
    padding:
        140px
        6%;

    background: var(--cream);

    color: var(--ink);
}


.shapes-rules-heading {
    max-width: 1000px;

    margin-bottom: 70px;
}


.shapes-rules-heading h2 {
    margin-top: 20px;

    font-size:
        clamp(
            58px,
            8vw,
            100px
        );

    line-height: .9;

    font-weight: normal;
}


.shape-rules-grid {
    max-width: 1200px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.shape-rules-grid article {
    min-height: 300px;

    padding: 35px;

    border:
        1px solid
        rgba(96, 54, 31, .22);

    border-right: 0;
}


.shape-rules-grid article:last-child {
    border-right:
        1px solid
        rgba(96, 54, 31, .22);
}


.shape-rules-grid article > span {
    color: var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


.shape-rules-grid h3 {
    margin:
        55px
        0
        22px;

    font-size: 31px;

    font-weight: normal;
}


.shape-rules-grid p {
    color: var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.85;
}


/* ========================================
   SISTEMA FUTURO
======================================== */


.shapes-future {
    padding:
        140px
        6%;

    display: grid;

    grid-template-columns:
        120px
        1fr;

    gap: 45px;

    background: var(--rust);

    color: var(--cream);
}


.shapes-future-symbol {
    font-size: 50px;

    color: var(--sand);
}


.shapes-future .section-label {
    color: var(--sand);
}


.shapes-future h2 {
    max-width: 1000px;

    margin:
        20px
        0
        40px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height: .9;

    font-weight: normal;
}


.shapes-future p:not(.section-label) {
    max-width: 730px;

    margin-bottom: 20px;

    color:
        rgba(241, 221, 194, .88);

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.9;
}


/* ========================================
   FINAL
======================================== */


.shapes-ending {
    padding:
        150px
        6%;

    background: var(--terracotta);

    color: var(--cream);

    text-align: center;
}


.shapes-ending > span {
    font-size: 38px;
}


.shapes-ending > p {
    margin-top: 30px;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 6px;
}


.shapes-ending h2 {
    max-width: 1000px;

    margin:
        35px
        auto
        0;

    font-size:
        clamp(
            60px,
            9vw,
            115px
        );

    line-height: .86;

    font-weight: normal;
}


/* ========================================
   TABLET
======================================== */


@media (max-width: 1050px) {


    .shapes-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .shape-rules-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .shape-rules-grid article {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }

}


@media (max-width: 850px) {


    .shapes-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .shapes-counters {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .shapes-counters article {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .shapes-player-id {
        grid-template-columns:
            1fr;

        gap: 60px;
    }

}


/* ========================================
   MOBILE
======================================== */


@media (max-width: 600px) {


    .shapes-hero {
        min-height: 75vh;
    }


    .shapes-hero-content h1 {
        font-size: 48px;

        letter-spacing: 2px;
    }


    .shapes-status-guide,
    .shapes-directory,
    .shapes-player-id,
    .shapes-rules,
    .shapes-future {
        padding:
            100px
            6%;
    }


    .status-guide-grid,
    .shapes-grid,
    .shape-rules-grid,
    .shapes-counters {
        grid-template-columns:
            1fr;
    }


    .status-guide-grid article {
        border:
            1px solid
            rgba(241, 221, 194, .24);
    }


    .shape-rules-grid article,
    .shapes-counters article {
        border:
            1px solid
            rgba(96, 54, 31, .22);
    }


    .shapes-future {
        grid-template-columns:
            1fr;
    }


    .shape-filters {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);
    }


    .shape-filter,
    .shape-gender-filter {
        width: 100%;
    }

}

/* ========================================
   LOGIN PAGE
======================================== */


.login-body {
    min-height: 100vh;

    background:
        var(--ink-dark);
}


.login-header {
    position: absolute;

    z-index: 100;
}


/* ========================================
   PÁGINA
======================================== */


.login-page {
    min-height: 100vh;

    position: relative;

    overflow: hidden;

    background:
        var(--ink-dark);
}


.login-background {
    position: fixed;

    inset: 0;

    z-index: 0;

    background:
        url("../assets/texas-hero.jpg");

    background-size: cover;

    background-position: center;
}


.login-background-overlay {
    position: fixed;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(7, 27, 33, .74) 0%,
            rgba(7, 27, 33, .66) 42%,
            rgba(7, 27, 33, .90) 100%
        );
}


/* ========================================
   LAYOUT
======================================== */


.login-layout {
    position: relative;

    z-index: 2;

    width: min(
        1500px,
        100%
    );

    min-height: 100vh;

    margin: auto;

    padding:
        155px
        5%
        80px;

    display: grid;

    grid-template-columns:
        1fr
        minmax(460px, 560px);

    gap: 8vw;

    align-items: center;
}


/* ========================================
   EDITORIAL
======================================== */


.login-editorial {
    min-height: 650px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    color:
        var(--cream);
}


.login-kicker {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 7px;
}


.login-line {
    width: fit-content;

    margin:
        25px
        0
        38px;

    display: flex;

    align-items: center;

    gap: 15px;
}


.login-line span {
    width: 55px;

    height: 1px;

    background:
        var(--sand);
}


.login-line b {
    color:
        var(--sand);

    font-size: 22px;

    font-weight: normal;
}


.login-editorial h1 {
    max-width: 800px;

    font-size:
        clamp(
            68px,
            8vw,
            125px
        );

    line-height: .82;

    font-weight: normal;
}


.login-editorial-text {
    max-width: 500px;

    margin-top: 45px;

    color:
        rgba(241, 221, 194, .76);

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 2;
}


.login-editorial-bottom {
    margin-top: auto;

    padding-top: 70px;
}


.login-editorial-bottom span {
    display: block;

    margin-bottom: 12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.login-editorial-bottom p {
    color:
        rgba(241, 221, 194, .55);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 4px;
}


/* ========================================
   PAINEL
======================================== */


.auth-panel {
    width: 100%;

    max-height: calc(
        100vh - 180px
    );

    overflow-y: auto;

    background:
        rgba(241, 221, 194, .97);

    color:
        var(--ink);

    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, .28);

    scrollbar-width: thin;

    scrollbar-color:
        var(--rust)
        var(--paper);
}


.auth-panel-top {
    min-height: 76px;

    padding:
        0
        35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(96, 54, 31, .18);
}


.auth-panel-top span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.auth-panel-top b {
    color:
        var(--rust);

    font-size: 24px;

    font-weight: normal;
}


/* ========================================
   ABAS
======================================== */


.auth-tabs {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .18);
}


.auth-tab {
    min-height: 63px;

    border: 0;

    border-right:
        1px solid
        rgba(96, 54, 31, .18);

    background:
        transparent;

    color:
        var(--leather);

    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    text-transform: uppercase;

    transition:
        background .3s ease,
        color .3s ease;
}


.auth-tab:last-child {
    border-right: 0;
}


.auth-tab:hover {
    background:
        rgba(168, 70, 34, .06);
}


.auth-tab.active {
    background:
        var(--rust);

    color:
        var(--cream);
}


/* ========================================
   FORM
======================================== */


.auth-form {
    display: none;

    padding:
        50px
        45px
        55px;
}


.auth-form.active {
    display: block;
}


.auth-heading {
    margin-bottom: 45px;
}


.auth-heading > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 5px;
}


.auth-heading h2 {
    margin:
        15px
        0
        20px;

    color:
        var(--ink);

    font-size:
        45px;

    line-height: .95;

    font-weight: normal;
}


.auth-heading p {
    max-width: 430px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.8;
}


/* ========================================
   CAMPOS
======================================== */


.auth-field {
    margin-bottom: 28px;
}


.auth-field label {
    display: block;

    margin-bottom: 10px;

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 3px;
}


.auth-field input {
    width: 100%;

    height: 57px;

    padding:
        0
        17px;

    border: 0;

    border-bottom:
        1px solid
        rgba(96, 54, 31, .38);

    border-radius: 0;

    outline: none;

    background:
        rgba(255, 255, 255, .22);

    color:
        var(--ink);

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    transition:
        border-color .3s ease,
        background .3s ease;
}


.auth-field input:focus {
    border-color:
        var(--rust);

    background:
        rgba(255, 255, 255, .48);
}


.auth-field input::placeholder {
    color:
        rgba(96, 54, 31, .50);
}


.auth-field small {
    display: block;

    margin-top: 10px;

    color:
        rgba(96, 54, 31, .72);

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.6;
}


/* ========================================
   OPÇÕES
======================================== */


.auth-options {
    margin:
        5px
        0
        35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.auth-checkbox {
    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--leather);

    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.6;
}


.auth-checkbox input {
    width: 15px;
    height: 15px;

    accent-color:
        var(--rust);
}


.auth-checkbox a {
    color:
        var(--rust);
}


.register-checkbox {
    margin:
        12px
        0
        35px;
}


.auth-text-button {
    padding: 0;

    border: 0;

    border-bottom:
        1px solid
        rgba(168, 70, 34, .45);

    background:
        transparent;

    color:
        var(--rust);

    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
}


/* ========================================
   IDENTIFICAÇÃO
======================================== */


.player-id-preview {
    margin:
        35px
        0;

    padding: 27px;

    background:
        var(--ink);

    color:
        var(--cream);
}


.player-id-preview > span {
    display: block;

    margin-bottom: 14px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 4px;
}


.player-id-preview strong {
    display: block;

    font-size: 29px;

    font-weight: normal;
}


.player-id-preview p {
    margin-top: 16px;

    color:
        rgba(241, 221, 194, .63);

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.7;
}


/* ========================================
   BOTÃO
======================================== */


.auth-submit {
    width: 100%;

    min-height: 62px;

    padding:
        0
        22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    background:
        var(--ink);

    color:
        var(--cream);

    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 4px;

    transition:
        background .3s ease;
}


.auth-submit:hover {
    background:
        var(--rust);
}


.auth-submit span {
    font-size: 22px;
}


/* ========================================
   MENSAGENS
======================================== */


.auth-message {
    display: none;

    margin-top: 22px;

    padding:
        15px;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.7;
}


.auth-message.error,
.auth-message.success,
.auth-message.info {
    display: block;
}


.auth-message.error {
    border:
        1px solid
        rgba(168, 70, 34, .40);

    color:
        var(--rust);

    background:
        rgba(168, 70, 34, .06);
}


.auth-message.success {
    border:
        1px solid
        rgba(23, 59, 69, .30);

    color:
        var(--ink);

    background:
        rgba(23, 59, 69, .07);
}


.auth-message.info {
    border:
        1px solid
        rgba(96, 54, 31, .26);

    color:
        var(--leather);

    background:
        rgba(96, 54, 31, .05);
}


/* ========================================
   TABLET
======================================== */


@media (max-width: 1050px) {


    .login-layout {
        grid-template-columns:
            .8fr
            minmax(420px, 520px);

        gap: 5vw;
    }


    .login-editorial h1 {
        font-size:
            clamp(
                60px,
                8vw,
                90px
            );
    }

}


/* ========================================
   MOBILE
======================================== */


@media (max-width: 850px) {


    .login-background,
    .login-background-overlay {
        position: absolute;
    }


    .login-layout {
        padding:
            135px
            6%
            70px;

        grid-template-columns:
            1fr;

        gap: 60px;
    }


    .login-editorial {
        min-height: auto;

        text-align: center;

        align-items: center;
    }


    .login-line {
        margin-left: auto;

        margin-right: auto;
    }


    .login-editorial h1 {
        font-size:
            clamp(
                58px,
                13vw,
                90px
            );
    }


    .login-editorial-bottom {
        display: none;
    }


    .auth-panel {
        max-width: 600px;

        max-height: none;

        margin: auto;

        overflow: visible;
    }

}


@media (max-width: 550px) {


    .login-layout {
        padding:
            120px
            20px
            50px;
    }


    .login-editorial h1 {
        font-size: 51px;
    }


    .login-editorial-text {
        font-size: 12px;
    }


    .auth-panel-top {
        padding:
            0
            22px;
    }


    .auth-form {
        padding:
            40px
            25px
            45px;
    }


    .auth-heading h2 {
        font-size: 38px;
    }


    .auth-options {
        flex-direction: column;

        align-items: flex-start;
    }


    .player-id-preview strong {
        font-size: 25px;
    }

}

/* ========================================
   DASHBOARD
======================================== */


.dashboard-body {
    min-height: 100vh;

    background:
        var(--parchment);

    color:
        var(--ink);
}


/* ========================================
   LOADING
======================================== */


.dashboard-loading {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 25px;

    background:
        var(--ink-dark);

    color:
        var(--cream);
}


.dashboard-loading span {
    color:
        var(--sand);

    font-size: 45px;
}


.dashboard-loading p {
    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


/* ========================================
   HEADER
======================================== */


.dashboard-header {
    min-height: 95px;

    padding:
        0
        5%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        var(--ink-dark);

    color:
        var(--cream);

    border-bottom:
        1px solid
        rgba(241, 221, 194, .15);
}


.dashboard-brand {
    display: flex;

    flex-direction: column;

    text-decoration: none;

    color:
        var(--cream);
}


.dashboard-brand small {
    margin-bottom: 5px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 5px;
}


.dashboard-brand strong {
    font-size: 19px;

    letter-spacing: 4px;
}


.dashboard-nav {
    display: flex;

    align-items: center;

    gap: 26px;
}


.dashboard-nav a,
.dashboard-logout {
    border: 0;

    background: transparent;

    color:
        rgba(241, 221, 194, .80);

    cursor: pointer;

    text-decoration: none;

    text-transform: uppercase;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 2px;
}


.dashboard-nav a:hover,
.dashboard-logout:hover {
    color:
        var(--sand);
}


.dashboard-logout {
    padding:
        12px
        19px;

    border:
        1px solid
        rgba(241, 221, 194, .50);
}


/* ========================================
   HERO
======================================== */


.dashboard-hero {
    padding:
        100px
        6%
        110px;

    background:
        var(--ink);

    color:
        var(--cream);
}


.dashboard-hero-top {
    max-width: 1400px;

    margin:
        0
        auto
        80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 25px;

    border-bottom:
        1px solid
        rgba(241, 221, 194, .17);
}


.dashboard-hero-top p {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.dashboard-hero-top span {
    color:
        var(--sand);

    font-size: 25px;
}


.dashboard-welcome {
    max-width: 1400px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        370px;

    gap: 100px;

    align-items: end;
}


.dashboard-eyebrow {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.dashboard-welcome h1 {
    margin-top: 25px;

    font-size:
        clamp(
            70px,
            10vw,
            140px
        );

    line-height: .80;

    font-weight: normal;
}


.dashboard-welcome h1 strong {
    color:
        var(--sand);

    font-weight: normal;
}


.dashboard-player-card {
    padding:
        35px;

    border:
        1px solid
        rgba(241, 221, 194, .20);
}


.dashboard-player-card > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 4px;
}


.dashboard-player-card > strong {
    display: block;

    margin:
        18px
        0;

    font-size: 34px;

    font-weight: normal;
}


.dashboard-player-card p {
    color:
        rgba(241, 221, 194, .60);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
}


/* ========================================
   RESUMO
======================================== */


.dashboard-summary {
    max-width: 1400px;

    margin:
        -45px
        auto
        0;

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    background:
        var(--cream);

    box-shadow:
        0 25px 60px
        rgba(38, 23, 16, .08);
}


.dashboard-summary article {
    min-height: 210px;

    padding:
        35px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right:
        1px solid
        rgba(96, 54, 31, .17);
}


.dashboard-summary article:last-child {
    border-right: 0;
}


.dashboard-summary span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 4px;
}


.dashboard-summary strong {
    color:
        var(--ink);

    font-size: 38px;

    font-weight: normal;
}


.dashboard-summary p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
}


.dashboard-status-active {
    font-family:
        Arial,
        sans-serif;

    font-size:
        22px !important;

    letter-spacing: 3px;
}


/* ========================================
   PERSONAGENS
======================================== */


.dashboard-characters {
    max-width: 1400px;

    margin: auto;

    padding:
        130px
        5%;
}


.dashboard-section-heading {
    margin-bottom: 70px;

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 40px;
}


.dashboard-section-heading > div > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.dashboard-section-heading h2 {
    margin-top: 15px;

    font-size:
        clamp(
            52px,
            7vw,
            90px
        );

    line-height: .9;

    font-weight: normal;
}


.create-character-button,
.characters-empty-button {
    border: 0;

    background:
        var(--rust);

    color:
        var(--cream);

    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    transition:
        background .3s ease;
}


.create-character-button {
    min-height: 60px;

    padding:
        0
        25px;

    display: flex;

    align-items: center;

    gap: 15px;
}


.create-character-button span {
    font-size: 21px;
}


.create-character-button:hover,
.characters-empty-button:hover {
    background:
        var(--ink);
}


/* ========================================
   ESTADO VAZIO
======================================== */


.characters-empty {
    min-height: 480px;

    padding:
        70px
        7%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px solid
        rgba(96, 54, 31, .20);

    background:
        rgba(241, 221, 194, .35);
}


.characters-empty-symbol {
    margin-bottom: 25px;

    color:
        var(--rust);

    font-size: 35px;
}


.characters-empty h3 {
    margin:
        20px
        0
        25px;

    color:
        var(--ink);

    font-size:
        clamp(
            48px,
            7vw,
            82px
        );

    line-height: .88;

    font-weight: normal;
}


.characters-empty > p:not(.section-label) {
    max-width: 500px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.8;
}


.characters-empty-button {
    margin-top: 40px;

    padding:
        20px
        25px;

    display: flex;

    align-items: center;

    gap: 35px;
}


/* ========================================
   CONTA
======================================== */


.dashboard-account {
    padding:
        120px
        6%;

    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap: 100px;

    background:
        var(--terracotta);

    color:
        var(--cream);
}


.dashboard-account h2 {
    margin-top: 15px;

    font-size:
        clamp(
            60px,
            8vw,
            100px
        );

    line-height: .9;

    font-weight: normal;
}


.dashboard-account .section-label {
    color:
        var(--cream);
}


.dashboard-account-info {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    align-self: center;
}


.dashboard-account-info > div {
    min-height: 165px;

    padding:
        25px;

    border:
        1px solid
        rgba(241, 221, 194, .25);

    border-right: 0;
}


.dashboard-account-info > div:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .25);
}


.dashboard-account-info span {
    display: block;

    margin-bottom: 35px;

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 3px;
}


.dashboard-account-info strong {
    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.5;

    font-weight: normal;

    word-break:
        break-word;
}


/* ========================================
   FUTURO
======================================== */


.dashboard-future {
    padding:
        130px
        6%;

    background:
        var(--cream);
}


.dashboard-future-heading {
    max-width: 1100px;

    margin-bottom: 70px;
}


.dashboard-future-heading > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 5px;
}


.dashboard-future-heading h2 {
    margin-top: 20px;

    color:
        var(--ink);

    font-size:
        clamp(
            60px,
            8vw,
            100px
        );

    line-height: .9;

    font-weight: normal;
}


.dashboard-future-grid {
    max-width: 1300px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.dashboard-future-grid article {
    min-height: 300px;

    padding: 35px;

    border:
        1px solid
        rgba(96, 54, 31, .20);

    border-right: 0;
}


.dashboard-future-grid article:last-child {
    border-right:
        1px solid
        rgba(96, 54, 31, .20);
}


.dashboard-future-grid article > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;
}


.dashboard-future-grid h3 {
    margin:
        60px
        0
        25px;

    font-size: 35px;

    font-weight: normal;
}


.dashboard-future-grid p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.8;
}


/* ========================================
   RESPONSIVO
======================================== */


@media (max-width: 900px) {

    .dashboard-nav a {
        display: none;
    }


    .dashboard-welcome {
        grid-template-columns:
            1fr;

        gap: 60px;
    }


    .dashboard-player-card {
        max-width: 400px;
    }


    .dashboard-summary {
        margin:
            0
            5%;

        grid-template-columns:
            1fr;
    }


    .dashboard-summary article {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(96, 54, 31, .17);
    }


    .dashboard-section-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .dashboard-account {
        grid-template-columns:
            1fr;
    }


    .dashboard-account-info,
    .dashboard-future-grid {
        grid-template-columns:
            1fr;
    }


    .dashboard-account-info > div,
    .dashboard-future-grid article {
        border:
            1px solid
            rgba(241, 221, 194, .25);
    }


    .dashboard-future-grid article {
        border-color:
            rgba(96, 54, 31, .20);
    }

}


@media (max-width: 550px) {

    .dashboard-header {
        min-height: 80px;
    }


    .dashboard-brand strong {
        font-size: 15px;
    }


    .dashboard-hero {
        padding:
            80px
            6%;
    }


    .dashboard-hero-top {
        margin-bottom: 55px;
    }


    .dashboard-welcome h1 {
        font-size: 58px;
    }


    .dashboard-player-card {
        padding: 25px;
    }


    .dashboard-characters,
    .dashboard-account,
    .dashboard-future {
        padding:
            90px
            6%;
    }

}

/* ========================================
   CRIAÇÃO DE PERSONAGEM
======================================== */

.character-create-body {
    background: var(--parchment);
    color: var(--ink);
}


/* HERO */

.character-create-hero {
    min-height: 620px;
    padding: 120px 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--ink);
    color: var(--cream);
}

.character-create-symbol {
    margin-bottom: 35px;
    color: var(--sand);
    font-size: 35px;
}

.character-create-hero h1 {
    margin: 25px 0;
    font-size: clamp(72px, 11vw, 150px);
    line-height: .78;
    font-weight: normal;
}

.character-create-intro {
    max-width: 650px;
    color: rgba(241, 221, 194, .72);
    font-family: Arial, sans-serif;
    line-height: 1.8;
}


/* FORM */

.character-form {
    max-width: 1500px;
    margin: auto;
}

.character-form-section {
    padding: 120px 6%;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.character-form-heading {
    margin-bottom: 65px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.character-form-heading > span {
    padding-top: 7px;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
}

.character-form-heading p {
    margin-bottom: 12px;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 5px;
}

.character-form-heading h2 {
    font-size: clamp(50px, 7vw, 90px);
    line-height: .9;
    font-weight: normal;
}

.character-section-description {
    max-width: 700px;
    margin: -30px 0 50px;
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.8;
}


/* ORIGEM */

.origin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.origin-card {
    min-height: 350px;
    padding: 40px;
    border: 1px solid rgba(96, 54, 31, .22);
    border-right: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: .25s ease;
}

.origin-card:last-child {
    border-right: 1px solid rgba(96, 54, 31, .22);
}

.origin-card > span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

.origin-card strong {
    display: block;
    margin: 80px 0 25px;
    font-size: 38px;
    font-weight: normal;
}

.origin-card p {
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.8;
}

.origin-card:hover,
.origin-card.selected {
    background: var(--ink);
    color: var(--cream);
}

.origin-card:hover p,
.origin-card.selected p {
    color: rgba(241, 221, 194, .7);
}


/* FAMÍLIAS */

.ranch-family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.ranch-family-card {
    min-height: 180px;
    padding: 30px;
    border: 1px solid rgba(96, 54, 31, .2);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}

.ranch-family-card strong {
    display: block;
    margin-bottom: 20px;
    font-size: 27px;
    font-weight: normal;
}

.ranch-family-card span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.ranch-family-card:hover,
.ranch-family-card.selected {
    background: var(--terracotta);
    color: var(--cream);
}

.ranch-family-card.selected span,
.ranch-family-card:hover span {
    color: var(--cream);
}


/* CAMPOS */

.character-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.character-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.character-field.field-wide {
    grid-column: 1 / -1;
}

.character-field label {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 4px;
}

.character-field input,
.character-field select,
.character-field textarea {
    width: 100%;
    padding: 20px;
    border: 1px solid rgba(96, 54, 31, .26);
    border-radius: 0;
    outline: 0;
    background: rgba(241, 221, 194, .5);
    color: var(--ink);
    font: inherit;
}

.character-field textarea {
    resize: vertical;
    line-height: 1.7;
}

.character-field input:focus,
.character-field select:focus,
.character-field textarea:focus {
    border-color: var(--rust);
}

.character-history-field {
    margin-top: 35px;
}

.field-hint {
    color: rgba(96, 54, 31, .65);
    font-family: Arial, sans-serif;
    font-size: 10px;
}


/* SHAPES */

.character-shape-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.character-shape-card {
    padding: 0;
    border: 2px solid transparent;
    background: var(--cream);
    cursor: pointer;
    text-align: left;
}

.character-shape-card.selected {
    border-color: var(--rust);
}

.character-shape-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ink-dark);
}

.character-shape-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.character-shape-info {
    padding: 25px;
}

.character-shape-info span {
    display: block;
    margin-bottom: 12px;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 3px;
}

.character-shape-info strong {
    font-size: 22px;
    font-weight: normal;
}

.character-loading {
    grid-column: 1 / -1;
    padding: 70px;
    text-align: center;
}

.character-loading span {
    color: var(--rust);
    font-size: 30px;
}

.character-loading p {
    margin-top: 20px;
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 4px;
}


/* ATRIBUTOS */

.attribute-points-panel {
    margin-bottom: 45px;
    padding: 30px;
    display: flex;
    align-items: baseline;
    gap: 15px;
    background: var(--ink);
    color: var(--cream);
}

.attribute-points-panel span {
    margin-right: auto;
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 4px;
}

.attribute-points-panel strong {
    font-size: 50px;
    font-weight: normal;
}

.attribute-points-panel strong.complete {
    color: var(--sand);
}

.attribute-points-panel p {
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.attributes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.attribute-card {
    min-height: 210px;
    padding: 30px;
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(96, 54, 31, .18);
}

.attribute-card-text {
    max-width: 390px;
}

.attribute-card-text > span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 3px;
}

.attribute-card h3 {
    margin: 14px 0;
    font-size: 28px;
    font-weight: normal;
}

.attribute-card p {
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.6;
}

.attribute-control {
    display: grid;
    grid-template-columns: 45px 50px 45px;
    align-items: center;
    text-align: center;
}

.attribute-control button {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(96, 54, 31, .3);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 20px;
}

.attribute-control button:hover {
    background: var(--rust);
    color: var(--cream);
}

.attribute-control strong {
    font-size: 25px;
    font-weight: normal;
}

.attribute-rule {
    margin-top: 30px;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 10px;
}


/* SUBMIT */

.character-submit-section {
    text-align: center;
    background: var(--ink);
    color: var(--cream);
}

.character-submit-symbol {
    color: var(--sand);
    font-size: 40px;
}

.character-submit-section h2 {
    margin: 25px 0 50px;
    font-size: clamp(55px, 8vw, 100px);
    line-height: .85;
    font-weight: normal;
}

.character-checklist {
    max-width: 650px;
    margin: 0 auto 45px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
}

.character-checklist div {
    padding: 20px;
    border: 1px solid rgba(241, 221, 194, .2);
    color: rgba(241, 221, 194, .6);
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.character-checklist div.complete {
    color: var(--sand);
}

.character-checklist span {
    margin-right: 10px;
}

.character-submit-button {
    min-height: 70px;
    padding: 0 35px;
    border: 0;
    background: var(--rust);
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
}

.character-submit-button span {
    margin-left: 30px;
    font-size: 20px;
}

.character-form-message {
    max-width: 700px;
    margin: 35px auto 0;
    padding: 25px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.character-form-message.error {
    border: 1px solid var(--rust);
    color: var(--sand);
}

.character-form-message.success {
    border: 1px solid var(--sand);
    color: var(--sand);
}


/* RESPONSIVO */

@media (max-width: 1000px) {

    .origin-grid,
    .ranch-family-grid {
        grid-template-columns: 1fr;
    }

    .origin-card {
        border-right:
            1px solid rgba(96, 54, 31, .22);
    }

    .character-shape-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .attributes-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .character-form-section {
        padding:
            80px
            6%;
    }

    .character-fields-grid {
        grid-template-columns: 1fr;
    }

    .character-field.field-wide {
        grid-column: auto;
    }

    .character-shape-grid {
        grid-template-columns: 1fr;
    }

    .attribute-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .character-checklist {
        grid-template-columns: 1fr;
    }

}

/* ========================================
   SHAPE / AVATAR — CRIAÇÃO DE PERSONAGEM
   Compatível com o HTML atual
======================================== */


/* LAYOUT PRINCIPAL */

.shape-create-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 430px);

    gap: clamp(
        45px,
        6vw,
        85px
    );

    align-items: start;
}


.shape-create-fields {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 30px;
}


/* CAMPOS DA ÁREA DO SHAPE */

#shapeSection .character-field {
    padding: 28px;

    border:
        1px solid
        rgba(96, 54, 31, .20);

    background:
        rgba(241, 221, 194, .30);
}


#shapeSection .character-field label {
    line-height: 1.6;
}


#shapeSection .character-field input,
#shapeSection .character-field select {
    min-height: 60px;

    background:
        rgba(255, 255, 255, .22);
}


#shapeSection .character-field input::placeholder {
    color:
        rgba(96, 54, 31, .48);
}


/* ========================================
   DISPONIBILIDADE DO SHAPE
======================================== */

#shapeAvailability {
    min-height: 112px;

    margin: 0;

    padding: 24px;

    display: flex;

    align-items: center;

    gap: 20px;

    border:
        1px solid
        rgba(96, 54, 31, .22);

    background:
        rgba(241, 221, 194, .34);

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}


#shapeAvailability .shape-availability-icon {
    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 46px;

    border:
        1px solid
        rgba(96, 54, 31, .34);

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 21px;

    line-height: 1;
}


#shapeAvailability > div {
    min-width: 0;
}


#shapeAvailability strong {
    display: block;

    margin-bottom: 8px;

    color:
        var(--ink);

    font-size: 20px;

    font-weight: normal;

    line-height: 1.1;
}


#shapeAvailability p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.65;
}


/* VERIFICANDO */

#shapeAvailability.checking {
    border-color:
        var(--clay);

    background:
        rgba(210, 123, 80, .08);
}


#shapeAvailability.checking
.shape-availability-icon {
    border-color:
        var(--clay);

    color:
        var(--clay);
}


/* DISPONÍVEL */

#shapeAvailability.available {
    border-color:
        var(--ink);

    background:
        rgba(23, 59, 69, .07);
}


#shapeAvailability.available
.shape-availability-icon {
    border-color:
        var(--ink);

    background:
        var(--ink);

    color:
        var(--cream);
}


#shapeAvailability.available strong {
    color:
        var(--ink);
}


/* INDISPONÍVEL */

#shapeAvailability.unavailable {
    border-color:
        var(--rust);

    background:
        rgba(168, 70, 34, .07);
}


#shapeAvailability.unavailable
.shape-availability-icon {
    border-color:
        var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);
}


#shapeAvailability.unavailable strong {
    color:
        var(--rust);
}


/* ========================================
   CAIXA DE UPLOAD
======================================== */

.shape-upload-box {
    min-height: 150px;

    padding:
        28px
        24px;

    display: flex !important;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border:
        1px dashed
        rgba(96, 54, 31, .46);

    background:
        rgba(255, 255, 255, .16);

    color:
        var(--ink) !important;

    cursor: pointer;

    text-align: center;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}


.shape-upload-box:hover {
    border-color:
        var(--rust);

    background:
        rgba(168, 70, 34, .06);

    transform:
        translateY(-2px);
}


.shape-upload-symbol {
    width: 48px;
    height: 48px;

    margin-bottom: 5px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--rust);

    color:
        var(--rust);

    font-size: 25px;

    line-height: 1;
}


.shape-upload-box strong {
    color:
        var(--ink);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: normal;

    letter-spacing: 3px;
}


.shape-upload-box small {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    line-height: 1.6;
}


.shape-image-file-name {
    display: block;

    min-height: 18px;

    color:
        rgba(96, 54, 31, .70);

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.6;

    overflow-wrap: anywhere;
}


/* ========================================
   PRÉVIA DA IMAGEM
======================================== */

.shape-image-preview {
    position: sticky;

    top: 35px;

    width: 100%;

    aspect-ratio:
        4 / 5;

    min-height: 0;

    overflow: hidden;

    isolation: isolate;

    border:
        1px solid
        rgba(241, 221, 194, .12);

    background:
        linear-gradient(
            145deg,
            var(--ink-dark),
            var(--ink)
        );

    color:
        var(--cream);

    box-shadow:
        0 28px 65px
        rgba(38, 23, 16, .15);
}


.shape-image-preview-empty {
    position: absolute;

    inset: 0;

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 22px;

    padding: 40px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(23, 59, 69, .86),
            rgba(7, 27, 33, .98)
        );
}


.shape-image-preview-empty[hidden] {
    display: none;
}


.shape-image-preview-empty span {
    color:
        var(--sand);

    font-size: 42px;

    line-height: 1;
}


.shape-image-preview-empty p {
    max-width: 230px;

    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    line-height: 1.8;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.shape-image-preview > img {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center top;
}


.shape-image-preview > img[hidden] {
    display: none;
}


.shape-image-preview-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .02) 35%,
            rgba(7, 27, 33, .12) 58%,
            rgba(7, 27, 33, .88) 100%
        );
}


.shape-image-preview-name {
    position: absolute;

    z-index: 3;

    left: 30px;
    right: 30px;
    bottom: 30px;
}


.shape-image-preview-name span {
    display: block;

    margin-bottom: 11px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 4px;
}


.shape-image-preview-name strong {
    display: block;

    color:
        var(--cream);

    font-size:
        clamp(
            27px,
            3vw,
            38px
        );

    font-weight: normal;

    line-height: 1.05;

    overflow-wrap: anywhere;
}


/* ========================================
   MELHORIAS GERAIS DO FORMULÁRIO
======================================== */

.character-create-body
.character-form-section {
    position: relative;
}


.character-create-body
.character-form-section:nth-of-type(even):not(.character-submit-section) {
    background:
        rgba(241, 221, 194, .18);
}


.character-create-body
.character-submit-button {
    transition:
        background .25s ease,
        transform .25s ease,
        opacity .25s ease;
}


.character-create-body
.character-submit-button:hover:not(:disabled) {
    background:
        var(--terracotta);

    transform:
        translateY(-2px);
}


.character-create-body
.character-submit-button:disabled {
    cursor:
        wait;

    opacity:
        .72;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

    .shape-create-layout {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .shape-image-preview {
        position:
            relative;

        top:
            auto;

        width:
            min(
                100%,
                430px
            );

        margin:
            0
            auto;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 700px) {

    #shapeSection .character-field {
        padding:
            22px;
    }


    #shapeAvailability {
        align-items:
            flex-start;

        padding:
            20px;
    }


    #shapeAvailability strong {
        font-size:
            18px;
    }


    .shape-upload-box {
        min-height:
            135px;

        padding:
            24px
            18px;
    }


    .shape-image-preview-name {
        left:
            22px;

        right:
            22px;

        bottom:
            22px;
    }

}


/* ========================================
   MOBILE PEQUENO
======================================== */

@media (max-width: 450px) {

    .shape-create-layout {
        gap:
            38px;
    }


    #shapeAvailability {
        gap:
            15px;
    }


    #shapeAvailability .shape-availability-icon {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

        font-size:
            18px;
    }


    .shape-image-preview-name strong {
        font-size:
            27px;
    }

}

/* ========================================
   DASHBOARD — CARDS DE PERSONAGENS
   Cole este bloco no final de css/style.css
======================================== */

.characters-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}


.dashboard-character-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(96, 54, 31, .22);

    background:
        var(--cream);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.dashboard-character-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 24px 55px
        rgba(38, 23, 16, .12);
}


.dashboard-character-photo {
    position: relative;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    background:
        var(--ink-dark);
}


.dashboard-character-photo img,
.dashboard-character-image-placeholder {
    width: 100%;
    height: 100%;
}


.dashboard-character-photo img {
    display: block;

    object-fit: cover;

    object-position:
        center top;
}


.dashboard-character-image-placeholder {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 30px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            var(--ink-dark),
            var(--ink)
        );

    color:
        var(--cream);
}


.dashboard-character-image-placeholder span {
    color:
        var(--sand);

    font-size: 38px;
}


.dashboard-character-image-placeholder p {
    color:
        rgba(241, 221, 194, .68);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 3px;

    line-height: 1.7;

    text-transform: uppercase;
}


.dashboard-character-photo-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 52%,
            rgba(7, 27, 33, .72)
        );

    pointer-events: none;
}


.dashboard-character-status {
    position: absolute;

    z-index: 2;

    left: 20px;
    right: 20px;
    bottom: 20px;

    width: fit-content;

    max-width:
        calc(100% - 40px);

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(241, 221, 194, .45);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 2px;

    line-height: 1.4;
}


.dashboard-character-status-pending {
    background:
        rgba(96, 54, 31, .92);
}


.dashboard-character-status-approved {
    background:
        rgba(23, 59, 69, .94);
}


.dashboard-character-status-rejected {
    background:
        rgba(168, 70, 34, .94);
}


.dashboard-character-content {
    padding: 28px;
}


.dashboard-character-label {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 3px;

    line-height: 1.6;

    text-transform: uppercase;
}


.dashboard-character-content h3 {
    margin:
        14px
        0
        28px;

    color:
        var(--ink);

    font-size: 31px;

    font-weight: normal;

    line-height: 1.05;
}


.dashboard-character-summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(96, 54, 31, .18);
}


.dashboard-character-summary span,
.dashboard-character-data-grid span,
.dashboard-character-history > span {
    display: block;

    margin-bottom: 7px;

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 2px;
}


.dashboard-character-summary strong {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: normal;

    line-height: 1.55;
}


.dashboard-character-view {
    width: 100%;

    min-height: 52px;

    margin-top: 26px;

    padding:
        0
        18px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border:
        1px solid
        rgba(96, 54, 31, .28);

    background:
        transparent;

    color:
        var(--ink);

    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.dashboard-character-view:hover {
    border-color:
        var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);
}


.dashboard-character-view span {
    font-size: 20px;
}


.dashboard-character-details {
    margin-top: 25px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(96, 54, 31, .18);
}


.dashboard-character-data-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        20px
        18px;
}


.dashboard-character-data-grid strong {
    display: block;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: normal;

    line-height: 1.55;

    overflow-wrap: anywhere;
}


.dashboard-character-history {
    margin-top: 25px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(96, 54, 31, .18);
}


.dashboard-character-history p {
    max-height: 240px;

    overflow-y: auto;

    padding-right: 8px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.8;

    white-space:
        pre-line;
}


.create-character-button:disabled,
.characters-empty-button:disabled,
.create-character-button.disabled,
.characters-empty-button.disabled {
    cursor:
        not-allowed;

    opacity:
        .58;

    background:
        var(--leather);
}


.create-character-button:disabled:hover,
.characters-empty-button:disabled:hover {
    background:
        var(--leather);
}


/* TABLET */

@media (max-width: 1050px) {

    .characters-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .characters-grid {
        grid-template-columns:
            1fr;
    }


    .dashboard-character-content {
        padding:
            24px;
    }


    .dashboard-character-summary,
    .dashboard-character-data-grid {
        grid-template-columns:
            1fr;
    }

}

/* ========================================
   ADMINISTRAÇÃO — TEXAS LEGACIES
   Cole este bloco no final de css/style.css
======================================== */

.admin-body {
    min-height: 100vh;
    background: var(--parchment);
    color: var(--ink);
}

.admin-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    background: var(--ink-dark);
    color: var(--cream);
}

.admin-loading[hidden],
.admin-denied[hidden],
.admin-modal[hidden],
.admin-empty[hidden],
.admin-action-message[hidden] {
    display: none;
}

.admin-loading span,
.admin-denied > span,
.admin-empty > span {
    color: var(--sand);
    font-size: 42px;
}

.admin-loading p {
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 5px;
}

.admin-denied {
    min-height: 100vh;
    padding: 90px 7%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--ink-dark);
    color: var(--cream);
}

.admin-denied h1 {
    margin: 20px 0 35px;
    font-size: clamp(60px, 10vw, 125px);
    line-height: .82;
    font-weight: normal;
}

.admin-denied > p:not(.section-label) {
    max-width: 600px;
    color: rgba(241, 221, 194, .68);
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.9;
}

.admin-denied a {
    margin-top: 40px;
    padding: 18px 24px;
    border: 1px solid rgba(241, 221, 194, .55);
    color: var(--cream);
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

.admin-header {
    min-height: 95px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ink-dark);
    color: var(--cream);
    border-bottom: 1px solid rgba(241, 221, 194, .15);
}

.admin-brand {
    display: flex;
    flex-direction: column;
    color: var(--cream);
    text-decoration: none;
}

.admin-brand small {
    margin-bottom: 5px;
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 5px;
}

.admin-brand strong {
    font-size: 19px;
    letter-spacing: 4px;
}

.admin-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.admin-nav a,
.admin-logout {
    border: 0;
    background: transparent;
    color: rgba(241, 221, 194, .80);
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
}

.admin-logout {
    padding: 12px 19px;
    border: 1px solid rgba(241, 221, 194, .50);
}

.admin-hero {
    padding: 100px 6% 120px;
    background: var(--ink);
    color: var(--cream);
}

.admin-hero-top {
    max-width: 1400px;
    margin: 0 auto 80px;
    padding-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(241, 221, 194, .17);
}

.admin-hero-top p,
.admin-hero-content > div:first-child > span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 5px;
}

.admin-hero-top > span {
    color: var(--sand);
    font-size: 25px;
}

.admin-hero-content {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 390px;
    gap: 90px;
    align-items: end;
}

.admin-hero-content h1 {
    margin-top: 25px;
    font-size: clamp(70px, 10vw, 140px);
    line-height: .80;
    font-weight: normal;
}

.admin-identity-card {
    padding: 35px;
    border: 1px solid rgba(241, 221, 194, .20);
}

.admin-identity-card > span,
.admin-summary span,
.admin-section-heading span,
.admin-character-category,
.admin-character-meta span,
.admin-character-basic-data span,
.admin-character-history > span,
.admin-character-attributes-title span,
.admin-rejection-reason span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 3px;
}

.admin-identity-card > span,
.admin-hero-content > div:first-child > span {
    color: var(--sand);
}

.admin-identity-card strong {
    display: block;
    margin: 18px 0;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.admin-identity-card p {
    color: rgba(241, 221, 194, .50);
    font-family: Arial, sans-serif;
    font-size: 8px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.admin-summary {
    max-width: 1400px;
    margin: -50px auto 0;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--cream);
    box-shadow: 0 25px 60px rgba(38, 23, 16, .09);
}

.admin-summary article {
    min-height: 190px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(96, 54, 31, .17);
}

.admin-summary article:last-child {
    border-right: 0;
}

.admin-summary strong {
    font-size: 42px;
    font-weight: normal;
}

.admin-summary p {
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.admin-characters {
    max-width: 1450px;
    margin: auto;
    padding: 130px 5%;
}

.admin-section-heading {
    margin-bottom: 45px;
}

.admin-section-heading h2 {
    margin-top: 15px;
    font-size: clamp(52px, 7vw, 90px);
    line-height: .9;
    font-weight: normal;
}

.admin-filters {
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-filter {
    padding: 14px 19px;
    border: 1px solid rgba(96, 54, 31, .25);
    background: transparent;
    color: var(--leather);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.admin-filter:hover,
.admin-filter.active {
    background: var(--rust);
    border-color: var(--rust);
    color: var(--cream);
}

.admin-action-message {
    margin-bottom: 35px;
    padding: 18px;
    border: 1px solid rgba(96, 54, 31, .22);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
}

.admin-action-message.success {
    border-color: rgba(23, 59, 69, .35);
    background: rgba(23, 59, 69, .07);
    color: var(--ink);
}

.admin-action-message.error {
    border-color: rgba(168, 70, 34, .40);
    background: rgba(168, 70, 34, .07);
    color: var(--rust);
}

.admin-character-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.admin-character-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .22);
    background: var(--cream);
}

.admin-character-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ink-dark);
}

.admin-character-photo img,
.admin-character-image-placeholder {
    width: 100%;
    height: 100%;
}

.admin-character-photo img {
    display: block;
    object-fit: cover;
    object-position: center top;
}

.admin-character-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 30px;
    text-align: center;
    background: linear-gradient(145deg, var(--ink-dark), var(--ink));
    color: var(--cream);
}

.admin-character-image-placeholder span {
    color: var(--sand);
    font-size: 38px;
}

.admin-character-image-placeholder p {
    color: rgba(241, 221, 194, .64);
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    line-height: 1.7;
    text-transform: uppercase;
}

.admin-character-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(7, 27, 33, .72));
    pointer-events: none;
}

.admin-character-status {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 20px;
    max-width: calc(100% - 40px);
    padding: 9px 12px;
    border: 1px solid rgba(241, 221, 194, .45);
    color: var(--cream);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
    line-height: 1.4;
}

.admin-character-status-pendente { background: rgba(96, 54, 31, .92); }
.admin-character-status-aprovado { background: rgba(23, 59, 69, .94); }
.admin-character-status-rejeitado { background: rgba(168, 70, 34, .94); }

.admin-character-content {
    padding: 28px;
}

.admin-character-content h3 {
    margin: 14px 0 28px;
    font-size: 31px;
    line-height: 1.05;
    font-weight: normal;
}

.admin-character-meta {
    display: grid;
    gap: 18px;
    padding-top: 22px;
    border-top: 1px solid rgba(96, 54, 31, .18);
}

.admin-character-meta span,
.admin-character-basic-data span,
.admin-character-history > span,
.admin-character-attributes-title span,
.admin-rejection-reason span {
    display: block;
    margin-bottom: 6px;
}

.admin-character-meta strong,
.admin-character-basic-data strong {
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.admin-character-toggle {
    width: 100%;
    min-height: 52px;
    margin-top: 26px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(96, 54, 31, .28);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

.admin-character-toggle:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}

.admin-character-toggle span {
    font-size: 20px;
}

.admin-character-details {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(96, 54, 31, .18);
}

.admin-character-basic-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
}

.admin-character-history,
.admin-character-attributes-title,
.admin-rejection-reason {
    margin-top: 25px;
    padding-top: 22px;
    border-top: 1px solid rgba(96, 54, 31, .18);
}

.admin-character-history p,
.admin-rejection-reason p {
    max-height: 280px;
    overflow-y: auto;
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.8;
    white-space: pre-line;
}

.admin-character-attributes {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(96, 54, 31, .18);
    border-left: 1px solid rgba(96, 54, 31, .18);
}

.admin-character-attributes > div {
    min-height: 85px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(96, 54, 31, .18);
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.admin-character-attributes span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    line-height: 1.4;
}

.admin-character-attributes strong {
    font-size: 23px;
    font-weight: normal;
}

.admin-character-actions {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.admin-character-actions button {
    min-height: 54px;
    border: 0;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

.admin-approve-button {
    background: var(--ink);
    color: var(--cream);
}

.admin-reject-button {
    background: var(--rust);
    color: var(--cream);
}

.admin-empty {
    min-height: 380px;
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(96, 54, 31, .20);
}

.admin-empty h3 {
    margin: 24px 0 16px;
    font-size: 40px;
    font-weight: normal;
}

.admin-empty p {
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
}

.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 27, 33, .82);
}

.admin-modal-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 650px);
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    padding: 55px;
    background: var(--cream);
    color: var(--ink);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .30);
}

.admin-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--rust);
    cursor: pointer;
    font-size: 28px;
}

.admin-modal-symbol {
    color: var(--rust);
    font-size: 32px;
}

.admin-modal-panel h2 {
    margin: 18px 0 25px;
    font-size: 50px;
    font-weight: normal;
}

.admin-modal-character {
    margin-bottom: 28px;
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.admin-modal-panel label {
    display: block;
    margin-bottom: 10px;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

.admin-modal-panel textarea {
    width: 100%;
    padding: 18px;
    resize: vertical;
    border: 1px solid rgba(96, 54, 31, .28);
    border-radius: 0;
    outline: 0;
    background: rgba(241, 221, 194, .35);
    color: var(--ink);
    font: inherit;
    line-height: 1.7;
}

.admin-modal-hint {
    display: block;
    margin-top: 10px;
    color: rgba(96, 54, 31, .65);
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.admin-modal-actions {
    margin-top: 35px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
}

.admin-modal-actions button {
    min-height: 54px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
}

.admin-modal-cancel {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(96, 54, 31, .28);
}

.admin-modal-confirm {
    border: 0;
    background: var(--rust);
    color: var(--cream);
}

.admin-modal-confirm:disabled {
    cursor: wait;
    opacity: .65;
}

.admin-modal-open {
    overflow: hidden;
}

@media (max-width: 1050px) {
    .admin-hero-content {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .admin-identity-card {
        max-width: 450px;
    }

    .admin-summary {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 5%;
    }

    .admin-summary article {
        border: 1px solid rgba(96, 54, 31, .17);
    }

    .admin-character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .admin-header {
        min-height: 80px;
    }

    .admin-nav a {
        display: none;
    }

    .admin-brand strong {
        font-size: 15px;
    }

    .admin-hero {
        padding: 80px 6%;
    }

    .admin-hero-content h1 {
        font-size: 58px;
    }

    .admin-summary,
    .admin-character-grid,
    .admin-character-basic-data,
    .admin-character-actions,
    .admin-modal-actions {
        grid-template-columns: 1fr;
    }

    .admin-characters {
        padding: 90px 6%;
    }

    .admin-character-attributes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-modal-panel {
        padding: 45px 25px 30px;
    }

    .admin-modal-panel h2 {
        font-size: 41px;
    }
}

/* ========================================
   DASHBOARD — MOTIVO DA REJEIÇÃO
======================================== */

.dashboard-character-rejection {
    margin-top: 25px;

    padding: 22px;

    border:
        1px solid
        rgba(168, 70, 34, .34);

    background:
        rgba(168, 70, 34, .07);
}


.dashboard-character-rejection span {
    display: block;

    margin-bottom: 12px;

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 3px;
}


.dashboard-character-rejection p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.8;

    white-space: pre-line;
}

/* ========================================
   DASHBOARD — CORRIGIR FICHA
======================================== */

.dashboard-character-correct {
    width: 100%;

    margin-top: 22px;

    padding: 18px 22px;

    border: 0;

    background:
        var(--rust);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition:
        background .2s ease,
        transform .2s ease;
}


.dashboard-character-correct:hover {
    background:
        var(--terracotta);

    transform:
        translateY(-2px);
}


.dashboard-character-correct span {
    font-size: 20px;

    line-height: 1;
}

/* ========================================
   ADMIN — FICHA REENVIADA
======================================== */

.admin-resubmission-banner {
    margin: 18px 0 22px;
    padding: 16px 18px;

    border:
        1px solid rgba(210, 123, 80, 0.65);

    background:
        rgba(168, 70, 34, 0.12);
}


.admin-resubmission-banner div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}


.admin-resubmission-banner span {
    color:
        var(--sand);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
}


.admin-resubmission-banner strong {
    color:
        var(--cream);

    font-size: 10px;
    letter-spacing: 2px;
}


.admin-resubmission-banner p {
    margin: 10px 0 0;

    color:
        var(--parchment);

    font-size: 12px;
}


.admin-previous-rejection {
    margin-top: 24px;
    padding: 20px;

    border-left:
        3px solid var(--terracotta);

    background:
        rgba(168, 70, 34, 0.1);
}


.admin-previous-rejection span {
    display: block;

    margin-bottom: 10px;

    color:
        var(--sand);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
}


.admin-previous-rejection p {
    margin: 0;

    color:
        var(--cream);

    font-size: 13px;
    line-height: 1.7;
}

/* ========================================
   ADMIN — NAVEGAÇÃO INTERNA
======================================== */

.admin-panel-navigation {
    width: min(1180px, calc(100% - 48px));

    margin:
        42px auto 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, 0.2);

    background:
        rgba(7, 27, 33, 0.72);
}


.admin-panel-tab {
    min-height: 76px;

    padding:
        18px 28px;

    border:
        0;

    border-right:
        1px solid rgba(223, 192, 155, 0.16);

    background:
        transparent;

    color:
        rgba(241, 221, 194, 0.62);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

    text-align:
        left;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.admin-panel-tab:last-child {
    border-right:
        0;
}


.admin-panel-tab span {
    color:
        var(--sand);

    font-size:
        11px;

    letter-spacing:
        1px;
}


.admin-panel-tab:hover {
    color:
        var(--cream);

    background:
        rgba(168, 70, 34, 0.12);
}


.admin-panel-tab.active {
    color:
        var(--cream);

    background:
        linear-gradient(
            135deg,
            rgba(168, 70, 34, 0.42),
            rgba(96, 54, 31, 0.28)
        );

    box-shadow:
        inset 0 -3px 0 var(--terracotta);
}


/* ========================================
   ADMIN — RESUMO DAS PROFISSÕES
======================================== */

.admin-profession-summary {
    width:
        min(1180px, calc(100% - 48px));

    margin:
        34px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, 0.18);

    background:
        rgba(7, 27, 33, 0.76);
}


.admin-profession-summary article {
    min-height:
        150px;

    padding:
        28px 24px;

    border-right:
        1px solid rgba(223, 192, 155, 0.14);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.admin-profession-summary article:last-child {
    border-right:
        0;
}


.admin-profession-summary article > span {
    margin-bottom:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.6px;
}


.admin-profession-summary article > strong {
    color:
        var(--cream);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(30px, 4vw, 46px);

    font-weight:
        400;

    line-height:
        1;
}


.admin-profession-summary article > p {
    margin:
        11px 0 0;

    color:
        rgba(234, 208, 173, 0.58);

    font-size:
        11px;

    line-height:
        1.5;
}


/* ========================================
   ADMIN — SEÇÃO DE PROFISSÕES
======================================== */

.admin-professions {
    width:
        min(1180px, calc(100% - 48px));

    margin:
        56px auto 90px;
}


.admin-professions .admin-section-heading {
    margin-bottom:
        32px;
}


.admin-professions .admin-section-heading > p {
    max-width:
        620px;

    margin:
        16px 0 0;

    color:
        rgba(234, 208, 173, 0.68);

    font-size:
        13px;

    line-height:
        1.8;
}


/* ========================================
   ADMIN — GRADE DE PROFISSÕES
======================================== */

.admin-profession-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;
}


/* ========================================
   ADMIN — CARD DE PROFISSÃO
======================================== */

.admin-profession-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        28px;

    border:
        1px solid rgba(223, 192, 155, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(16, 42, 51, 0.96),
            rgba(7, 27, 33, 0.96)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.16);
}


.admin-profession-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        var(--terracotta);
}


.admin-profession-card.inactive::before {
    background:
        rgba(223, 192, 155, 0.34);
}


.admin-profession-card.inactive {
    opacity:
        0.72;
}


.admin-profession-card-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;
}


.admin-profession-card-heading > span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.6px;
}


.admin-profession-card-heading h3 {
    margin:
        0;

    color:
        var(--cream);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(22px, 3vw, 31px);

    font-weight:
        400;
}


.admin-profession-status {
    flex:
        0 0 auto;

    padding:
        8px 11px;

    border:
        1px solid rgba(223, 192, 155, 0.22);

    color:
        var(--cream);

    background:
        rgba(168, 70, 34, 0.18);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.admin-profession-status.inactive {
    color:
        rgba(241, 221, 194, 0.58);

    background:
        rgba(223, 192, 155, 0.06);
}


/* ========================================
   ADMIN — NÚMEROS DA PROFISSÃO
======================================== */

.admin-profession-numbers {
    margin-top:
        28px;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, 0.14);
}


.admin-profession-numbers div {
    min-width:
        0;

    padding:
        18px 14px;

    border-right:
        1px solid rgba(223, 192, 155, 0.12);
}


.admin-profession-numbers div:last-child {
    border-right:
        0;
}


.admin-profession-numbers span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        rgba(223, 160, 108, 0.78);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1.6px;
}


.admin-profession-numbers strong {
    color:
        var(--cream);

    font-family:
        Georgia,
        serif;

    font-size:
        25px;

    font-weight:
        400;
}


/* ========================================
   ADMIN — BARRA DE OCUPAÇÃO
======================================== */

.admin-profession-progress {
    margin-top:
        24px;
}


.admin-profession-progress-header {
    margin-bottom:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;
}


.admin-profession-progress-header span {
    color:
        rgba(234, 208, 173, 0.66);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


.admin-profession-progress-header strong {
    color:
        var(--sand);

    font-size:
        11px;
}


.admin-profession-progress-track {
    height:
        7px;

    overflow:
        hidden;

    background:
        rgba(223, 192, 155, 0.11);
}


.admin-profession-progress-bar {
    width:
        0;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--rust),
            var(--sand)
        );

    transition:
        width 0.3s ease;
}


/* ========================================
   ADMIN — CONTROLES DA PROFISSÃO
======================================== */

.admin-profession-controls {
    margin-top:
        26px;

    padding-top:
        22px;

    border-top:
        1px solid rgba(223, 192, 155, 0.13);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;
}


.admin-profession-limit-control {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.admin-profession-limit-control > span {
    margin-right:
        4px;

    color:
        rgba(234, 208, 173, 0.62);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


.admin-profession-limit-button {
    width:
        38px;

    height:
        38px;

    border:
        1px solid rgba(223, 192, 155, 0.22);

    background:
        rgba(223, 192, 155, 0.06);

    color:
        var(--cream);

    font-size:
        18px;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.admin-profession-limit-button:hover {
    border-color:
        var(--terracotta);

    background:
        rgba(168, 70, 34, 0.24);
}


.admin-profession-limit-button:disabled {
    opacity:
        0.35;

    cursor:
        not-allowed;
}


.admin-profession-toggle-button {
    min-height:
        40px;

    padding:
        0 16px;

    border:
        1px solid rgba(223, 192, 155, 0.22);

    background:
        transparent;

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.8px;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.admin-profession-toggle-button:hover {
    border-color:
        var(--terracotta);

    background:
        rgba(168, 70, 34, 0.18);
}


.admin-profession-toggle-button.activate {
    border-color:
        rgba(223, 160, 108, 0.46);

    color:
        var(--sand);
}


/* ========================================
   ADMIN — RESPONSIVO
======================================== */

@media (max-width: 980px) {

    .admin-profession-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .admin-profession-summary article:nth-child(3) {
        border-right:
            0;
    }


    .admin-profession-summary article:nth-child(-n + 3) {
        border-bottom:
            1px solid rgba(223, 192, 155, 0.14);
    }


    .admin-profession-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 680px) {

    .admin-panel-navigation {
        width:
            min(100% - 28px, 1180px);

        grid-template-columns:
            1fr;
    }


    .admin-panel-tab {
        min-height:
            64px;

        border-right:
            0;

        border-bottom:
            1px solid rgba(223, 192, 155, 0.14);
    }


    .admin-panel-tab:last-child {
        border-bottom:
            0;
    }


    .admin-profession-summary {
        width:
            min(100% - 28px, 1180px);

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-profession-summary article {
        min-height:
            125px;
    }


    .admin-profession-summary article:nth-child(odd) {
        border-right:
            1px solid rgba(223, 192, 155, 0.14);
    }


    .admin-profession-summary article:nth-child(even) {
        border-right:
            0;
    }


    .admin-profession-summary article:not(:last-child) {
        border-bottom:
            1px solid rgba(223, 192, 155, 0.14);
    }


    .admin-profession-summary article:last-child {
        grid-column:
            1 / -1;
    }


    .admin-professions {
        width:
            min(100% - 28px, 1180px);

        margin-top:
            42px;
    }


    .admin-profession-card {
        padding:
            22px 18px;
    }


    .admin-profession-card-header {
        flex-direction:
            column;
    }


    .admin-profession-numbers {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-profession-numbers div:nth-child(2) {
        border-right:
            0;
    }


    .admin-profession-numbers div:nth-child(-n + 2) {
        border-bottom:
            1px solid rgba(223, 192, 155, 0.12);
    }


    .admin-profession-controls {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .admin-profession-limit-control {
        justify-content:
            space-between;
    }


    .admin-profession-toggle-button {
        width:
            100%;
    }

}

/* ========================================
   ADMIN — NAVEGAÇÃO COM TRÊS TELAS
======================================== */

.admin-panel-navigation {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


/* ========================================
   ADMIN — RESUMO DOS PLAYERS
======================================== */

.admin-player-summary {
    width:
        min(1180px, calc(100% - 48px));

    margin:
        34px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, 0.18);

    background:
        rgba(7, 27, 33, 0.76);
}


.admin-player-summary article {
    min-height:
        150px;

    padding:
        28px 24px;

    border-right:
        1px solid rgba(223, 192, 155, 0.14);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.admin-player-summary article:last-child {
    border-right:
        0;
}


.admin-player-summary article > span {
    margin-bottom:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.6px;
}


.admin-player-summary article > strong {
    color:
        var(--cream);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(30px, 4vw, 46px);

    font-weight:
        400;

    line-height:
        1;
}


.admin-player-summary article > p {
    margin:
        11px 0 0;

    color:
        rgba(234, 208, 173, 0.58);

    font-size:
        11px;

    line-height:
        1.5;
}


/* ========================================
   ADMIN — SEÇÃO DE PLAYERS
======================================== */

.admin-players {
    width:
        min(1180px, calc(100% - 48px));

    margin:
        56px auto 90px;
}


.admin-players .admin-section-heading {
    margin-bottom:
        32px;
}


.admin-players .admin-section-heading > p {
    max-width:
        640px;

    margin:
        16px 0 0;

    color:
        rgba(234, 208, 173, 0.68);

    font-size:
        13px;

    line-height:
        1.8;
}


/* ========================================
   ADMIN — GRADE DE PLAYERS
======================================== */

.admin-player-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;
}


/* ========================================
   ADMIN — CARD DO PLAYER
======================================== */

.admin-player-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        28px;

    border:
        1px solid rgba(223, 192, 155, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(16, 42, 51, 0.96),
            rgba(7, 27, 33, 0.96)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.16);
}


.admin-player-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        var(--terracotta);
}


.admin-player-card-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;
}


.admin-player-identity {
    min-width:
        0;
}


.admin-player-identity > span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.6px;
}


.admin-player-identity h3 {
    margin:
        0;

    overflow-wrap:
        anywhere;

    color:
        var(--cream);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(21px, 3vw, 29px);

    font-weight:
        400;
}


.admin-player-identity p {
    margin:
        10px 0 0;

    overflow-wrap:
        anywhere;

    color:
        rgba(234, 208, 173, 0.52);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.6;
}


.admin-player-badge {
    flex:
        0 0 auto;

    padding:
        8px 11px;

    border:
        1px solid rgba(223, 192, 155, 0.22);

    background:
        rgba(168, 70, 34, 0.18);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


/* ========================================
   ADMIN — NÚMEROS DO PLAYER
======================================== */

.admin-player-numbers {
    margin-top:
        28px;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, 0.14);
}


.admin-player-numbers div {
    min-width:
        0;

    padding:
        18px 14px;

    border-right:
        1px solid rgba(223, 192, 155, 0.12);
}


.admin-player-numbers div:last-child {
    border-right:
        0;
}


.admin-player-numbers span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        rgba(223, 160, 108, 0.78);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1.6px;
}


.admin-player-numbers strong {
    color:
        var(--cream);

    font-family:
        Georgia,
        serif;

    font-size:
        25px;

    font-weight:
        400;
}


/* ========================================
   ADMIN — BARRA DO PLAYER
======================================== */

.admin-player-progress {
    margin-top:
        24px;
}


.admin-player-progress-header {
    margin-bottom:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;
}


.admin-player-progress-header span {
    color:
        rgba(234, 208, 173, 0.66);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


.admin-player-progress-header strong {
    color:
        var(--sand);

    font-size:
        11px;
}


.admin-player-progress-track {
    height:
        7px;

    overflow:
        hidden;

    background:
        rgba(223, 192, 155, 0.11);
}


.admin-player-progress-bar {
    width:
        0;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--rust),
            var(--sand)
        );

    transition:
        width 0.3s ease;
}


/* ========================================
   ADMIN — CONTROLE DE LIMITE DO PLAYER
======================================== */

.admin-player-controls {
    margin-top:
        26px;

    padding-top:
        22px;

    border-top:
        1px solid rgba(223, 192, 155, 0.13);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;
}


.admin-player-controls > span {
    color:
        rgba(234, 208, 173, 0.62);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


.admin-player-limit-control {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.admin-player-limit-button {
    width:
        40px;

    height:
        40px;

    border:
        1px solid rgba(223, 192, 155, 0.22);

    background:
        rgba(223, 192, 155, 0.06);

    color:
        var(--cream);

    font-size:
        18px;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.admin-player-limit-button:hover {
    border-color:
        var(--terracotta);

    background:
        rgba(168, 70, 34, 0.24);
}


.admin-player-limit-button:disabled {
    opacity:
        0.35;

    cursor:
        not-allowed;
}


/* ========================================
   ADMIN — PLAYERS RESPONSIVO
======================================== */

@media (max-width: 980px) {

    .admin-player-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-player-summary article:nth-child(2) {
        border-right:
            0;
    }


    .admin-player-summary article:nth-child(-n + 2) {
        border-bottom:
            1px solid rgba(223, 192, 155, 0.14);
    }


    .admin-player-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 680px) {

    .admin-panel-navigation {
        grid-template-columns:
            1fr;
    }


    .admin-player-summary {
        width:
            min(100% - 28px, 1180px);

        grid-template-columns:
            1fr;
    }


    .admin-player-summary article {
        min-height:
            120px;

        border-right:
            0;

        border-bottom:
            1px solid rgba(223, 192, 155, 0.14);
    }


    .admin-player-summary article:last-child {
        border-bottom:
            0;
    }


    .admin-players {
        width:
            min(100% - 28px, 1180px);

        margin-top:
            42px;
    }


    .admin-player-card {
        padding:
            22px 18px;
    }


    .admin-player-card-header {
        flex-direction:
            column;
    }


    .admin-player-controls {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .admin-player-limit-control {
        justify-content:
            flex-end;
    }

}

/* ========================================
   PERSONAGENS — PÁGINA PÚBLICA
======================================== */

.characters-page-body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            rgba(168, 70, 34, 0.15),
            transparent 34%
        ),
        var(--ink-dark);

    color: var(--cream);
}


/* ========================================
   PERSONAGENS — CABEÇALHO
======================================== */

.characters-page-header {
    position: relative;
    z-index: 20;

    min-height: 84px;
    padding: 0 5vw;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;

    border-bottom:
        1px solid rgba(223, 192, 155, 0.16);

    background:
        rgba(7, 27, 33, 0.96);
}


.characters-page-brand {
    display: flex;
    flex-direction: column;

    color: var(--cream);
    text-decoration: none;
}


.characters-page-brand small {
    color: var(--sand);

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 4px;
}


.characters-page-brand strong {
    margin-top: 3px;

    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 2px;
}


.characters-page-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 2vw, 28px);
}


.characters-page-nav a {
    position: relative;

    padding: 31px 0 28px;

    color: rgba(241, 221, 194, 0.66);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.2s ease;
}


.characters-page-nav a::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;

    height: 2px;

    background: var(--terracotta);

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform 0.2s ease;
}


.characters-page-nav a:hover,
.characters-page-nav a.active {
    color: var(--cream);
}


.characters-page-nav a:hover::after,
.characters-page-nav a.active::after {
    transform: scaleX(1);
}


/* ========================================
   PERSONAGENS — HERO
======================================== */

.characters-page-hero {
    position: relative;

    min-height: 590px;
    overflow: hidden;

    padding: 34px 5vw 68px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            90deg,
            rgba(7, 27, 33, 0.98),
            rgba(7, 27, 33, 0.58),
            rgba(7, 27, 33, 0.88)
        ),
        radial-gradient(
            circle at 74% 42%,
            rgba(210, 123, 80, 0.35),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--ink-light),
            var(--wood-dark)
        );
}


.characters-page-hero::before {
    content: "TEXAS";

    position: absolute;
    right: -28px;
    bottom: -45px;

    color: rgba(241, 221, 194, 0.025);

    font-family: Georgia, serif;
    font-size: clamp(140px, 24vw, 340px);
    line-height: 0.8;
    letter-spacing: -16px;
}


.characters-page-hero::after {
    content: "";

    position: absolute;
    top: 0;
    right: 12%;
    bottom: 0;

    width: 1px;

    background:
        rgba(223, 192, 155, 0.12);
}


.characters-page-hero-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 99px,
            rgba(223, 192, 155, 0.025) 100px
        );
}


.characters-page-hero-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    color: rgba(234, 208, 173, 0.48);

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 3px;
}


.characters-page-hero-top span:nth-child(2) {
    color: var(--sand);

    font-family: Georgia, serif;
    font-size: 22px;
    letter-spacing: 0;
}


.characters-page-hero-content {
    position: relative;
    z-index: 2;

    width: min(760px, 100%);
    margin: auto 0;
}


.characters-page-hero-content > p:first-child {
    margin: 0 0 16px;

    color: var(--sand);

    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 5px;
}


.characters-page-hero-content h1 {
    margin: 0;

    color: var(--cream);

    font-family: Georgia, serif;
    font-size: clamp(66px, 11vw, 145px);
    font-weight: 400;
    line-height: 0.86;
    letter-spacing: -5px;
}


.characters-page-hero-line {
    width: 92px;
    height: 3px;
    margin: 32px 0 24px;

    background: var(--terracotta);
}


.characters-page-hero-description {
    max-width: 610px;
    margin: 0;

    color: rgba(241, 221, 194, 0.72);

    font-size: 14px;
    line-height: 1.9;
}


/* ========================================
   PERSONAGENS — INTRODUÇÃO
======================================== */

.characters-page-intro {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 86px 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.9fr);
    align-items: end;
    gap: 80px;

    border-bottom:
        1px solid rgba(223, 192, 155, 0.14);
}


.characters-page-intro h2 {
    margin: 15px 0 0;

    color: var(--cream);

    font-family: Georgia, serif;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.02;
}


.characters-page-intro > p {
    margin: 0;

    color: rgba(234, 208, 173, 0.67);

    font-size: 14px;
    line-height: 1.9;
}


/* ========================================
   PERSONAGENS — RESUMO
======================================== */

.characters-public-summary {
    width: min(1180px, calc(100% - 48px));
    margin: 54px auto 0;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, 0.17);

    background:
        rgba(16, 42, 51, 0.72);
}


.characters-public-summary article {
    min-height: 152px;
    padding: 28px 26px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-right:
        1px solid rgba(223, 192, 155, 0.13);
}


.characters-public-summary article:last-child {
    border-right: 0;
}


.characters-public-summary span {
    margin-bottom: 12px;

    color: var(--sand);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.6px;
}


.characters-public-summary strong {
    color: var(--cream);

    font-family: Georgia, serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 400;
    line-height: 1;
}


.characters-public-summary p {
    margin: 11px 0 0;

    color: rgba(234, 208, 173, 0.52);

    font-size: 11px;
    line-height: 1.5;
}


/* ========================================
   PERSONAGENS — DIRETÓRIO
======================================== */

.characters-directory {
    width: min(1180px, calc(100% - 48px));
    margin: 74px auto 100px;
}


.characters-directory-heading {
    margin-bottom: 34px;

    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 50px;
}


.characters-directory-heading h2 {
    margin: 12px 0 0;

    color: var(--cream);

    font-family: Georgia, serif;
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 400;
}


.characters-directory-heading > p {
    max-width: 370px;
    margin: 0;

    color: rgba(234, 208, 173, 0.6);

    font-size: 12px;
    line-height: 1.8;
    text-align: right;
}


/* ========================================
   PERSONAGENS — FILTROS
======================================== */

.characters-public-filters {
    padding: 26px;

    display: grid;
    grid-template-columns:
        minmax(230px, 1.5fr)
        repeat(3, minmax(150px, 1fr))
        auto;
    align-items: end;
    gap: 16px;

    border:
        1px solid rgba(223, 192, 155, 0.16);

    background:
        rgba(7, 27, 33, 0.78);
}


.characters-public-search,
.characters-public-filter-field {
    min-width: 0;
}


.characters-public-filters label {
    display: block;
    margin-bottom: 9px;

    color: rgba(223, 160, 108, 0.82);

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}


.characters-public-filters input,
.characters-public-filters select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;

    border:
        1px solid rgba(223, 192, 155, 0.2);

    border-radius: 0;

    outline: none;

    background:
        rgba(16, 42, 51, 0.85);

    color: var(--cream);

    font-family: Arial, sans-serif;
    font-size: 11px;
}


.characters-public-filters input::placeholder {
    color:
        rgba(241, 221, 194, 0.36);
}


.characters-public-filters input:focus,
.characters-public-filters select:focus {
    border-color: var(--terracotta);
}


.characters-clear-filters {
    min-height: 48px;
    padding: 0 18px;

    border:
        1px solid rgba(223, 192, 155, 0.22);

    background: transparent;
    color: var(--cream);

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.8px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.characters-clear-filters:hover {
    border-color: var(--terracotta);

    background:
        rgba(168, 70, 34, 0.2);
}


/* ========================================
   PERSONAGENS — INFORMAÇÃO DOS RESULTADOS
======================================== */

.characters-results-information {
    min-height: 64px;

    display: flex;
    align-items: center;

    border-bottom:
        1px solid rgba(223, 192, 155, 0.12);
}


.characters-results-information span {
    color:
        rgba(234, 208, 173, 0.56);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ========================================
   PERSONAGENS — CARREGAMENTO E ESTADOS
======================================== */

.characters-public-loading,
.characters-public-error,
.characters-public-empty {
    min-height: 330px;
    padding: 50px 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px solid rgba(223, 192, 155, 0.14);

    background:
        rgba(16, 42, 51, 0.42);
}


.characters-public-loading span,
.characters-public-error > span,
.characters-public-empty > span {
    margin-bottom: 18px;

    color: var(--sand);

    font-size: 34px;
}


.characters-public-loading p {
    margin: 0;

    color: rgba(241, 221, 194, 0.58);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}


.characters-public-error h3,
.characters-public-empty h3 {
    margin: 0;

    color: var(--cream);

    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 400;
}


.characters-public-error p,
.characters-public-empty p {
    max-width: 480px;
    margin: 13px 0 0;

    color: rgba(234, 208, 173, 0.58);

    font-size: 12px;
    line-height: 1.7;
}


/* ========================================
   PERSONAGENS — GRADE
======================================== */

.characters-public-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* ========================================
   PERSONAGENS — CARD
======================================== */

.character-public-card {
    position: relative;

    min-width: 0;
    overflow: hidden;

    border:
        1px solid rgba(223, 192, 155, 0.17);

    background:
        linear-gradient(
            155deg,
            rgba(16, 42, 51, 0.98),
            rgba(7, 27, 33, 0.98)
        );

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}


.character-public-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(210, 123, 80, 0.58);
}


.character-public-image {
    position: relative;

    aspect-ratio: 4 / 5;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--ink-light),
            var(--wood-dark)
        );
}


.character-public-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.character-public-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7, 27, 33, 0.96),
            transparent 48%
        );

    pointer-events: none;
}


.character-public-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: rgba(241, 221, 194, 0.54);
}


.character-public-placeholder span {
    color: var(--sand);

    font-size: 44px;
}


.character-public-placeholder p {
    margin: 15px 0 0;

    font-family: Georgia, serif;
    font-size: 19px;
}


.character-public-origin {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 18px;

    padding: 8px 11px;

    border:
        1px solid rgba(241, 221, 194, 0.27);

    background:
        rgba(7, 27, 33, 0.76);

    color: var(--cream);

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}


.character-public-content {
    padding: 24px;
}


.character-public-category {
    display: block;

    margin-bottom: 9px;

    color: var(--sand);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}


.character-public-content h3 {
    margin: 0;

    color: var(--cream);

    font-family: Georgia, serif;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 400;
    line-height: 1.05;
}


.character-public-shape {
    margin: 10px 0 0;

    color: rgba(234, 208, 173, 0.54);

    font-size: 11px;
}


.character-public-information {
    margin-top: 22px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, 0.12);
}


.character-public-information div {
    min-width: 0;
    padding: 14px 12px;

    border-right:
        1px solid rgba(223, 192, 155, 0.1);
}


.character-public-information div:last-child {
    border-right: 0;
}


.character-public-information span {
    display: block;
    margin-bottom: 6px;

    color: rgba(223, 160, 108, 0.72);

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


.character-public-information strong {
    display: block;
    overflow-wrap: anywhere;

    color: var(--cream);

    font-size: 11px;
    font-weight: 400;
}


.character-public-open {
    width: 100%;
    min-height: 48px;
    margin-top: 21px;

    border:
        1px solid rgba(223, 192, 155, 0.2);

    background: transparent;
    color: var(--cream);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.character-public-open:hover {
    border-color: var(--terracotta);

    background:
        rgba(168, 70, 34, 0.2);
}


/* ========================================
   PERSONAGENS — MODAL
======================================== */

.character-public-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;

    padding: 30px;

    overflow-y: auto;
}


.character-public-modal-backdrop {
    position: fixed;
    inset: 0;

    background:
        rgba(2, 11, 14, 0.88);

    backdrop-filter:
        blur(7px);
}


.character-public-modal-panel {
    position: relative;
    z-index: 2;

    width: min(1040px, 100%);
    margin: 20px auto;

    border:
        1px solid rgba(223, 192, 155, 0.22);

    background:
        var(--ink-dark);

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.5);
}


.character-public-modal-close {
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    border:
        1px solid rgba(241, 221, 194, 0.3);

    background:
        rgba(7, 27, 33, 0.78);

    color: var(--cream);

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}


.character-public-modal-content {
    display: grid;
    grid-template-columns:
        minmax(290px, 0.8fr)
        minmax(0, 1.2fr);
}


.character-public-modal-image {
    min-height: 680px;

    background:
        linear-gradient(
            145deg,
            var(--ink-light),
            var(--wood-dark)
        );
}


.character-public-modal-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.character-public-modal-information {
    padding: 58px 48px;
}


.character-public-modal-information > span {
    color: var(--sand);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}


.character-public-modal-information h2 {
    margin: 14px 0 0;

    color: var(--cream);

    font-family: Georgia, serif;
    font-size: clamp(40px, 6vw, 70px);
    font-weight: 400;
    line-height: 0.95;
}


.character-public-modal-subtitle {
    margin: 16px 0 0;

    color: rgba(234, 208, 173, 0.6);

    font-size: 12px;
}


.character-public-modal-data {
    margin-top: 34px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, 0.13);
}


.character-public-modal-data div {
    min-width: 0;
    padding: 16px;

    border-right:
        1px solid rgba(223, 192, 155, 0.1);

    border-bottom:
        1px solid rgba(223, 192, 155, 0.1);
}


.character-public-modal-data div:nth-child(even) {
    border-right: 0;
}


.character-public-modal-data span,
.character-public-modal-history > span,
.character-public-modal-attributes > span {
    display: block;
    margin-bottom: 8px;

    color: rgba(223, 160, 108, 0.78);

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}


.character-public-modal-data strong {
    color: var(--cream);

    font-size: 12px;
    font-weight: 400;
}


.character-public-modal-history,
.character-public-modal-attributes {
    margin-top: 30px;
}


.character-public-modal-history p {
    margin: 0;

    color: rgba(241, 221, 194, 0.74);

    font-size: 13px;
    line-height: 1.9;
    white-space: pre-line;
}


.character-public-modal-attribute-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, 0.13);
}


.character-public-modal-attribute-grid div {
    padding: 13px 10px;

    text-align: center;

    border-right:
        1px solid rgba(223, 192, 155, 0.1);

    border-bottom:
        1px solid rgba(223, 192, 155, 0.1);
}


.character-public-modal-attribute-grid span {
    display: block;

    color: rgba(234, 208, 173, 0.54);

    font-size: 7px;
    letter-spacing: 1px;
}


.character-public-modal-attribute-grid strong {
    display: block;
    margin-top: 6px;

    color: var(--cream);

    font-family: Georgia, serif;
    font-size: 19px;
    font-weight: 400;
}


.characters-modal-open {
    overflow: hidden;
}


/* ========================================
   PERSONAGENS — RESPONSIVO
======================================== */

@media (max-width: 1100px) {

    .characters-page-header {
        align-items: flex-start;
        flex-direction: column;

        padding-top: 22px;
        padding-bottom: 18px;
    }


    .characters-page-nav {
        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;
    }


    .characters-page-nav a {
        flex: 0 0 auto;

        padding: 12px 0;
    }


    .characters-page-nav a::after {
        bottom: 3px;
    }


    .characters-public-filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .characters-public-search {
        grid-column:
            1 / -1;
    }


    .characters-clear-filters {
        width: 100%;
    }


    .characters-public-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 820px) {

    .characters-page-hero {
        min-height: 500px;
    }


    .characters-page-intro {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .characters-public-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .characters-public-summary article:nth-child(2) {
        border-right: 0;
    }


    .characters-public-summary article:nth-child(-n + 2) {
        border-bottom:
            1px solid rgba(223, 192, 155, 0.13);
    }


    .characters-directory-heading {
        align-items: flex-start;
        flex-direction: column;
    }


    .characters-directory-heading > p {
        text-align: left;
    }


    .character-public-modal-content {
        grid-template-columns:
            1fr;
    }


    .character-public-modal-image {
        min-height: 520px;
        max-height: 700px;
    }

}


@media (max-width: 620px) {

    .characters-page-hero,
    .characters-page-header {
        padding-right: 18px;
        padding-left: 18px;
    }


    .characters-page-hero-top span:first-child {
        display: none;
    }


    .characters-page-hero-content h1 {
        font-size: clamp(56px, 20vw, 82px);
        letter-spacing: -3px;
    }


    .characters-page-intro,
    .characters-public-summary,
    .characters-directory {
        width:
            min(100% - 28px, 1180px);
    }


    .characters-page-intro {
        padding: 60px 0;
    }


    .characters-public-summary {
        grid-template-columns:
            1fr;
    }


    .characters-public-summary article {
        min-height: 120px;

        border-right: 0;
        border-bottom:
            1px solid rgba(223, 192, 155, 0.13);
    }


    .characters-public-summary article:last-child {
        border-bottom: 0;
    }


    .characters-public-filters {
        padding: 20px;

        grid-template-columns:
            1fr;
    }


    .characters-public-search {
        grid-column: auto;
    }


    .characters-public-grid {
        grid-template-columns:
            1fr;
    }


    .character-public-modal {
        padding: 10px;
    }


    .character-public-modal-panel {
        margin: 0 auto;
    }


    .character-public-modal-image {
        min-height: 430px;
    }


    .character-public-modal-information {
        padding: 42px 22px 30px;
    }


    .character-public-modal-data {
        grid-template-columns:
            1fr;
    }


    .character-public-modal-data div {
        border-right: 0;
    }


    .character-public-modal-attribute-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* ========================================
   CORREÇÃO — ELEMENTOS OCULTOS
======================================== */

.characters-page-body [hidden] {
    display: none !important;
}

/* ========================================
   PERSONAGENS — COPIAR LINK
======================================== */

.character-public-modal-actions {
    margin-top: 30px;
}


.character-public-copy-link {
    width: 100%;
    min-height: 52px;
    padding: 0 20px;

    border:
        1px solid rgba(223, 192, 155, 0.24);

    background:
        rgba(168, 70, 34, 0.18);

    color: var(--cream);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.character-public-copy-link:hover {
    border-color: var(--terracotta);

    background:
        rgba(168, 70, 34, 0.34);
}


.character-public-copy-link:disabled {
    cursor: default;
    opacity: 0.75;
}

/* ========================================
   RANCHEIROS — HERDEIROS AUTOMÁTICOS
======================================== */

.heir-slot [hidden] {
    display: none !important;
}


.heir-slot-occupied {
    border-color:
        rgba(210, 123, 80, 0.5);
}


.heir-public-link {
    display: inline-block;

    margin-top: 16px;
    padding-bottom: 4px;

    border-bottom:
        1px solid rgba(210, 123, 80, 0.62);

    color: var(--sand);

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-decoration: none;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.heir-public-link:hover {
    border-color: var(--cream);
    color: var(--cream);
}

/* ========================================
   VAGAS DAS FAMÍLIAS RANCHEIRAS
======================================== */

.ranch-family-availability {
    display: block;

    margin-top: 10px;

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.4px;
    line-height: 1.5;

    color: var(--sand);
}


.ranch-family-card:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}


.ranch-family-card:disabled:hover {
    transform: none;
}

/* ========================================
   ADMIN — FINANCEIRO
======================================== */


/* ========================================
   NAVEGAÇÃO COM QUATRO TELAS
======================================== */

.admin-panel-navigation {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ========================================
   RESUMO FINANCEIRO
======================================== */

.admin-finance-summary {
    width:
        min(1180px, calc(100% - 48px));

    margin:
        34px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border:
        1px solid
        rgba(223, 192, 155, 0.18);

    background:
        rgba(7, 27, 33, 0.76);
}


.admin-finance-summary article {
    min-height:
        150px;

    padding:
        28px 24px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border-right:
        1px solid
        rgba(223, 192, 155, 0.14);
}


.admin-finance-summary article:last-child {
    border-right:
        0;
}


.admin-finance-summary article > span {
    margin-bottom:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.6px;
}


.admin-finance-summary article > strong {
    color:
        var(--cream);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(27px, 3.5vw, 44px);

    font-weight:
        400;

    line-height:
        1;
}


.admin-finance-summary article > p {
    margin:
        11px 0 0;

    color:
        rgba(234, 208, 173, 0.58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.5;
}


/* ========================================
   SEÇÃO FINANCEIRA
======================================== */

.admin-finance {
    width:
        min(1180px, calc(100% - 48px));

    margin:
        56px auto 90px;
}


.admin-finance-heading {
    margin-bottom:
        35px;
}


.admin-finance-heading p {
    max-width:
        720px;

    margin-top:
        17px;

    color:
        rgba(234, 208, 173, 0.68);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.8;
}


/* ========================================
   MIGRAÇÃO DE CARTEIRAS
======================================== */

.admin-finance-migration {
    margin-bottom:
        34px;

    padding:
        38px;

    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        50px;

    align-items:
        center;

    border:
        1px solid
        rgba(223, 192, 155, 0.20);

    background:
        linear-gradient(
            135deg,
            rgba(168, 70, 34, 0.17),
            rgba(7, 27, 33, 0.76)
        );
}


.admin-finance-migration > div > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3.5px;
}


.admin-finance-migration h3 {
    margin:
        16px 0;

    color:
        var(--cream);

    font-size:
        clamp(30px, 4vw, 45px);

    font-weight:
        normal;
}


.admin-finance-migration p {
    max-width:
        670px;

    color:
        rgba(234, 208, 173, 0.66);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


.admin-finance-migration-button {
    min-width:
        285px;

    min-height:
        64px;

    padding:
        18px 23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    border:
        1px solid
        var(--terracotta);

    background:
        var(--rust);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.3px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        opacity 0.25s ease;
}


.admin-finance-migration-button span {
    font-size:
        21px;
}


.admin-finance-migration-button:hover:not(:disabled) {
    background:
        var(--terracotta);

    border-color:
        var(--sand);
}


.admin-finance-migration-button:disabled {
    opacity:
        0.52;

    cursor:
        not-allowed;
}


/* ========================================
   PESQUISA FINANCEIRA
======================================== */

.admin-finance-search {
    margin:
        34px 0;

    padding:
        28px;

    border:
        1px solid
        rgba(223, 192, 155, 0.17);

    background:
        rgba(7, 27, 33, 0.60);
}


.admin-finance-search label {
    display:
        block;

    margin-bottom:
        13px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.admin-finance-search input {
    width:
        100%;

    min-height:
        58px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(223, 192, 155, 0.22);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(241, 221, 194, 0.06);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.admin-finance-search input:focus {
    border-color:
        var(--terracotta);

    background:
        rgba(241, 221, 194, 0.10);
}


.admin-finance-search input::placeholder {
    color:
        rgba(234, 208, 173, 0.43);
}


/* ========================================
   GRADE FINANCEIRA
======================================== */

.admin-finance-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;
}


/* ========================================
   CARD FINANCEIRO
======================================== */

.admin-finance-card {
    overflow:
        hidden;

    border:
        1px solid
        rgba(223, 192, 155, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(16, 42, 51, 0.96),
            rgba(7, 27, 33, 0.96)
        );
}


.admin-finance-card.missing {
    border-color:
        rgba(168, 70, 34, 0.50);

    background:
        linear-gradient(
            145deg,
            rgba(96, 54, 31, 0.45),
            rgba(7, 27, 33, 0.96)
        );
}


.admin-finance-card-header {
    min-height:
        120px;

    padding:
        27px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        25px;

    border-bottom:
        1px solid
        rgba(223, 192, 155, 0.15);
}


.admin-finance-card-header > div > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


.admin-finance-card-header h3 {
    margin-top:
        13px;

    color:
        var(--cream);

    font-size:
        30px;

    font-weight:
        normal;

    line-height:
        1.05;
}


.admin-finance-card-status {
    flex-shrink:
        0;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(223, 192, 155, 0.25);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.admin-finance-card-status.active {
    color:
        var(--cream);

    background:
        rgba(23, 59, 69, 0.85);
}


.admin-finance-card-status.missing {
    color:
        var(--cream);

    background:
        var(--rust);
}


/* ========================================
   SALDO
======================================== */

.admin-finance-balance {
    padding:
        35px 27px;

    background:
        rgba(241, 221, 194, 0.035);
}


.admin-finance-balance span {
    display:
        block;

    margin-bottom:
        15px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


.admin-finance-balance strong {
    color:
        var(--cream);

    font-size:
        clamp(38px, 5vw, 60px);

    font-weight:
        normal;

    line-height:
        1;
}


/* ========================================
   DADOS DO CARD
======================================== */

.admin-finance-card-meta {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.admin-finance-card-meta > div {
    min-height:
        105px;

    padding:
        22px 27px;

    border-top:
        1px solid
        rgba(223, 192, 155, 0.12);

    border-right:
        1px solid
        rgba(223, 192, 155, 0.12);
}


.admin-finance-card-meta > div:nth-child(2n) {
    border-right:
        0;
}


.admin-finance-card-meta span {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.admin-finance-card-meta strong {
    color:
        rgba(241, 221, 194, 0.76);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;

    line-height:
        1.6;

    overflow-wrap:
        anywhere;
}


/* ========================================
   FINANCEIRO — RESPONSIVO
======================================== */

@media (max-width: 1050px) {

    .admin-panel-navigation {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-panel-tab:nth-child(2) {
        border-right:
            0;
    }


    .admin-panel-tab:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(223, 192, 155, 0.16);
    }


    .admin-finance-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-finance-summary article:nth-child(2) {
        border-right:
            0;
    }


    .admin-finance-summary article:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(223, 192, 155, 0.14);
    }


    .admin-finance-migration {
        grid-template-columns:
            1fr;
    }


    .admin-finance-migration-button {
        width:
            100%;
    }


    .admin-finance-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 680px) {

    .admin-panel-navigation {
        grid-template-columns:
            1fr;
    }


    .admin-panel-tab {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, 0.16);
    }


    .admin-panel-tab:last-child {
        border-bottom:
            0;
    }


    .admin-finance-summary {
        width:
            min(100% - 28px, 1180px);

        grid-template-columns:
            1fr;
    }


    .admin-finance-summary article {
        min-height:
            120px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, 0.14);
    }


    .admin-finance-summary article:last-child {
        border-bottom:
            0;
    }


    .admin-finance {
        width:
            min(100% - 28px, 1180px);

        margin-top:
            42px;
    }


    .admin-finance-migration {
        padding:
            27px 20px;
    }


    .admin-finance-migration-button {
        min-width:
            0;
    }


    .admin-finance-search {
        padding:
            22px 18px;
    }


    .admin-finance-card-header {
        flex-direction:
            column;
    }


    .admin-finance-card-meta {
        grid-template-columns:
            1fr;
    }


    .admin-finance-card-meta > div,
    .admin-finance-card-meta > div:nth-child(2n) {
        border-right:
            0;
    }

}

/* ========================================
   DASHBOARD — CARTEIRA FINANCEIRA
======================================== */


/* ========================================
   BLOCO PRINCIPAL
======================================== */

.dashboard-character-wallet {
    margin-top:
        27px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(16, 42, 51, .24);

    background:
        var(--ink);

    color:
        var(--cream);
}


.dashboard-character-wallet.missing {
    border-color:
        rgba(168, 70, 34, .42);

    background:
        linear-gradient(
            145deg,
            var(--leather),
            var(--ink-dark)
        );
}


/* ========================================
   CABEÇALHO DA CARTEIRA
======================================== */

.dashboard-character-wallet-heading {
    padding:
        27px 24px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        rgba(241, 221, 194, .14);
}


.dashboard-character-wallet-heading > div {
    min-width:
        0;
}


.dashboard-character-wallet-heading > div > span {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


.dashboard-character-wallet-heading > div > strong {
    display:
        block;

    color:
        var(--cream);

    font-size:
        clamp(
            30px,
            3.5vw,
            43px
        );

    font-weight:
        normal;

    line-height:
        1;

    overflow-wrap:
        anywhere;
}


/* ========================================
   STATUS
======================================== */

.dashboard-wallet-status {
    flex-shrink:
        0;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(241, 221, 194, .28);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.dashboard-wallet-status.active {
    background:
        rgba(23, 59, 69, .90);

    color:
        var(--cream);
}


.dashboard-wallet-status.missing {
    background:
        var(--rust);

    color:
        var(--cream);
}


/* ========================================
   DADOS DA CARTEIRA
======================================== */

.dashboard-wallet-meta {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-bottom:
        1px solid
        rgba(241, 221, 194, .14);
}


.dashboard-wallet-meta > div {
    min-height:
        88px;

    padding:
        20px 24px;

    border-right:
        1px solid
        rgba(241, 221, 194, .14);
}


.dashboard-wallet-meta > div:last-child {
    border-right:
        0;
}


.dashboard-wallet-meta span {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.dashboard-wallet-meta strong {
    color:
        rgba(241, 221, 194, .78);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}


/* ========================================
   ÚLTIMAS MOVIMENTAÇÕES
======================================== */

.dashboard-wallet-latest {
    padding:
        25px 24px;
}


.dashboard-wallet-section-label {
    display:
        block;

    margin-bottom:
        17px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.dashboard-wallet-transaction-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


/* ========================================
   MOVIMENTAÇÃO
======================================== */

.dashboard-wallet-transaction {
    padding:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    border:
        1px solid
        rgba(241, 221, 194, .13);

    background:
        rgba(241, 221, 194, .035);
}


.dashboard-wallet-transaction.compact {
    padding:
        14px;
}


.dashboard-wallet-transaction-main {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.dashboard-wallet-transaction-main strong {
    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    font-weight:
        normal;
}


.dashboard-wallet-transaction.credit
.dashboard-wallet-transaction-main strong {
    color:
        var(--sand);
}


.dashboard-wallet-transaction.debit
.dashboard-wallet-transaction-main strong {
    color:
        var(--clay);
}


.dashboard-wallet-transaction-main span {
    color:
        rgba(241, 221, 194, .73);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.5;
}


.dashboard-wallet-transaction-meta {
    flex-shrink:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        6px;

    text-align:
        right;
}


.dashboard-wallet-transaction-meta span,
.dashboard-wallet-transaction-meta small {
    color:
        rgba(241, 221, 194, .45);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.4;
}


/* ========================================
   BOTÃO DO EXTRATO
======================================== */

.dashboard-wallet-statement-button {
    width:
        100%;

    min-height:
        54px;

    padding:
        0 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        0;

    border-top:
        1px solid
        rgba(241, 221, 194, .15);

    background:
        transparent;

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        2.5px;

    transition:
        background .25s ease,
        color .25s ease;
}


.dashboard-wallet-statement-button:hover {
    background:
        var(--rust);

    color:
        var(--cream);
}


.dashboard-wallet-statement-button span {
    font-size:
        20px;
}


/* ========================================
   EXTRATO COMPLETO
======================================== */

.dashboard-wallet-statement {
    padding:
        25px 24px;

    border-top:
        1px solid
        rgba(241, 221, 194, .14);

    background:
        rgba(7, 27, 33, .45);
}


.dashboard-wallet-statement-heading {
    margin-bottom:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.dashboard-wallet-statement-heading span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.dashboard-wallet-statement-heading strong {
    color:
        rgba(241, 221, 194, .60);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        normal;
}


.dashboard-wallet-transaction-list.full {
    max-height:
        420px;

    overflow-y:
        auto;

    padding-right:
        5px;
}


/* ========================================
   SEM MOVIMENTAÇÕES
======================================== */

.dashboard-wallet-no-transactions {
    padding:
        18px;

    border:
        1px dashed
        rgba(241, 221, 194, .18);

    color:
        rgba(241, 221, 194, .54);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.6;

    text-align:
        center;
}


/* ========================================
   CARTEIRA AINDA NÃO CRIADA
======================================== */

.dashboard-wallet-missing-message {
    padding:
        22px 24px;

    color:
        rgba(241, 221, 194, .72);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.7;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .dashboard-character-wallet-heading > div > strong {
        font-size:
            35px;
    }


    .dashboard-wallet-transaction {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .dashboard-wallet-transaction-meta {
        align-items:
            flex-start;

        text-align:
            left;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 650px) {

    .dashboard-character-wallet-heading {
        flex-direction:
            column;
    }


    .dashboard-wallet-meta {
        grid-template-columns:
            1fr;
    }


    .dashboard-wallet-meta > div {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(241, 221, 194, .14);
    }


    .dashboard-wallet-meta > div:last-child {
        border-bottom:
            0;
    }


    .dashboard-wallet-statement-heading {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}

/* ========================================
   ADMIN — MOVIMENTAÇÕES FINANCEIRAS
======================================== */


/* ========================================
   BOTÕES DOS CARDS
======================================== */

.admin-finance-card-actions {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(223, 192, 155, 0.14);
}


.admin-finance-card-actions button {
    min-height:
        62px;

    padding:
        0 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    border:
        0;

    background:
        transparent;

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


.admin-finance-card-actions button:first-child {
    border-right:
        1px solid
        rgba(223, 192, 155, 0.14);
}


.admin-finance-card-actions button span {
    font-size:
        22px;

    font-weight:
        normal;

    line-height:
        1;
}


.admin-finance-credit-button:hover {
    background:
        var(--ink-light);

    color:
        var(--sand);
}


.admin-finance-debit-button:hover {
    background:
        var(--rust);

    color:
        var(--cream);
}


/* ========================================
   MODAL FINANCEIRO
======================================== */

.admin-finance-adjustment-panel {
    width:
        min(620px, calc(100% - 34px));

    max-height:
        calc(100vh - 40px);

    overflow-y:
        auto;
}


.admin-finance-adjustment-panel label {
    display:
        block;

    margin:
        26px 0 11px;

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.admin-finance-adjustment-panel select,
.admin-finance-adjustment-panel input {
    width:
        100%;

    min-height:
        56px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(96, 54, 31, 0.28);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(255, 255, 255, 0.20);

    color:
        var(--ink);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.admin-finance-adjustment-panel textarea {
    width:
        100%;

    min-height:
        130px;

    padding:
        16px 17px;

    resize:
        vertical;

    border:
        1px solid
        rgba(96, 54, 31, 0.28);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(255, 255, 255, 0.20);

    color:
        var(--ink);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.7;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.admin-finance-adjustment-panel select:focus,
.admin-finance-adjustment-panel input:focus,
.admin-finance-adjustment-panel textarea:focus {
    border-color:
        var(--rust);

    background:
        rgba(255, 255, 255, 0.45);
}


.admin-finance-adjustment-panel input::placeholder,
.admin-finance-adjustment-panel textarea::placeholder {
    color:
        rgba(96, 54, 31, 0.52);
}


/* ========================================
   SALDO ATUAL NO MODAL
======================================== */

.admin-finance-adjustment-current {
    margin-top:
        25px;

    padding:
        24px;

    background:
        var(--ink);

    color:
        var(--cream);
}


.admin-finance-adjustment-current span {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.admin-finance-adjustment-current strong {
    display:
        block;

    color:
        var(--cream);

    font-size:
        clamp(32px, 6vw, 46px);

    font-weight:
        normal;

    line-height:
        1;
}


/* ========================================
   BOTÃO DE CONFIRMAÇÃO
======================================== */

.admin-finance-adjustment-confirm {
    background:
        var(--rust);
}


.admin-finance-adjustment-confirm:hover:not(:disabled) {
    background:
        var(--terracotta);
}


.admin-finance-adjustment-confirm:disabled {
    opacity:
        0.55;

    cursor:
        wait;
}


/* ========================================
   RESPONSIVO
======================================== */

@media (max-width: 650px) {

    .admin-finance-card-actions {
        grid-template-columns:
            1fr;
    }


    .admin-finance-card-actions button:first-child {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, 0.14);
    }


    .admin-finance-adjustment-panel {
        padding:
            34px 22px;
    }


    .admin-finance-adjustment-current strong {
        font-size:
            34px;
    }

}

/* ========================================
   ADMIN — SALÁRIOS SEMANAIS
======================================== */


/* ========================================
   EDITOR DE SALÁRIO DA PROFISSÃO
======================================== */

.admin-profession-salary-editor {
    padding:
        28px;

    border-top:
        1px solid
        rgba(223, 192, 155, 0.15);

    border-bottom:
        1px solid
        rgba(223, 192, 155, 0.15);

    background:
        rgba(7, 27, 33, 0.32);
}


.admin-profession-salary-editor label {
    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.admin-profession-salary-editor > div {
    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:
        stretch;
}


.admin-profession-salary-editor > div > span {
    min-width:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(223, 192, 155, 0.25);

    border-right:
        0;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.admin-profession-salary-editor input {
    width:
        100%;

    min-width:
        0;

    min-height:
        57px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(223, 192, 155, 0.25);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(241, 221, 194, 0.06);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.admin-profession-salary-editor input:focus {
    border-color:
        var(--terracotta);

    background:
        rgba(241, 221, 194, 0.11);
}


.admin-profession-salary-editor button {
    min-width:
        175px;

    padding:
        0 20px;

    border:
        0;

    background:
        var(--rust);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

    transition:
        background 0.25s ease,
        opacity 0.25s ease;
}


.admin-profession-salary-editor button:hover {
    background:
        var(--terracotta);
}


/* ========================================
   CARD DOS HERDEIROS RANCHEIROS
======================================== */

.admin-rancher-salary-card {
    grid-column:
        1 / -1;

    border-color:
        rgba(210, 123, 80, 0.48);

    background:
        linear-gradient(
            135deg,
            rgba(168, 70, 34, 0.28),
            rgba(7, 27, 33, 0.98) 48%,
            rgba(16, 42, 51, 0.98)
        );
}


.admin-rancher-salary-calculation {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(223, 192, 155, 0.14);

    border-bottom:
        1px solid
        rgba(223, 192, 155, 0.14);
}


.admin-rancher-salary-calculation > div {
    min-height:
        145px;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(223, 192, 155, 0.14);
}


.admin-rancher-salary-calculation > div:last-child {
    border-right:
        0;
}


.admin-rancher-salary-calculation span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2.5px;

    line-height:
        1.6;
}


.admin-rancher-salary-calculation strong {
    margin-top:
        24px;

    color:
        var(--cream);

    font-size:
        clamp(
            25px,
            3vw,
            40px
        );

    font-weight:
        normal;

    line-height:
        1;
}


.admin-rancher-salary-calculation .total {
    background:
        rgba(168, 70, 34, 0.22);
}


.admin-rancher-salary-calculation .total strong {
    color:
        var(--sand);
}


/* ========================================
   EDITOR DO BÔNUS RANCHEIRO
======================================== */

.admin-profession-salary-editor.rancher {
    border-bottom:
        0;

    background:
        rgba(7, 27, 33, 0.55);
}


.admin-profession-salary-editor.rancher p {
    margin-top:
        17px;

    color:
        rgba(234, 208, 173, 0.58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.7;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 900px) {

    .admin-rancher-salary-calculation {
        grid-template-columns:
            1fr;
    }


    .admin-rancher-salary-calculation > div {
        min-height:
            115px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, 0.14);
    }


    .admin-rancher-salary-calculation > div:last-child {
        border-bottom:
            0;
    }


    .admin-profession-salary-editor > div {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .admin-profession-salary-editor button {
        grid-column:
            1 / -1;

        min-height:
            55px;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 580px) {

    .admin-profession-salary-editor {
        padding:
            22px 18px;
    }


    .admin-profession-salary-editor > div {
        grid-template-columns:
            1fr;
    }


    .admin-profession-salary-editor > div > span {
        min-height:
            42px;

        border-right:
            1px solid
            rgba(223, 192, 155, 0.25);

        border-bottom:
            0;
    }


    .admin-profession-salary-editor button {
        min-width:
            0;

        min-height:
            56px;
    }


    .admin-rancher-salary-calculation > div {
        padding:
            23px 20px;
    }

}

/* ========================================
   ADMIN — PROCESSAMENTO SEMANAL
======================================== */

.admin-weekly-payroll {
    margin:
        34px 0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223, 192, 155, .20);

    background:
        linear-gradient(
            135deg,
            rgba(16, 42, 51, .98),
            rgba(7, 27, 33, .98)
        );
}


/* ========================================
   CABEÇALHO
======================================== */

.admin-weekly-payroll-heading {
    padding:
        38px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        250px;

    gap:
        50px;

    align-items:
        end;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-weekly-payroll-heading > div > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        4px;
}


.admin-weekly-payroll-heading h3 {
    margin:
        16px 0;

    color:
        var(--cream);

    font-size:
        clamp(
            34px,
            5vw,
            55px
        );

    font-weight:
        normal;

    line-height:
        .95;
}


.admin-weekly-payroll-heading p {
    max-width:
        700px;

    color:
        rgba(234, 208, 173, .64);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


/* ========================================
   DATA DA SEMANA
======================================== */

.admin-weekly-payroll-heading label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.admin-weekly-payroll-heading input {
    width:
        100%;

    min-height:
        58px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(223, 192, 155, .27);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(241, 221, 194, .07);

    color:
        var(--cream);

    color-scheme:
        dark;

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.admin-weekly-payroll-heading input:focus {
    border-color:
        var(--terracotta);

    background:
        rgba(241, 221, 194, .12);
}


/* ========================================
   RESUMO DA FOLHA
======================================== */

.admin-weekly-payroll-summary {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-bottom:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-weekly-payroll-summary > div {
    min-height:
        140px;

    padding:
        27px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-weekly-payroll-summary > div:last-child {
    border-right:
        0;
}


.admin-weekly-payroll-summary span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2.5px;

    line-height:
        1.6;
}


.admin-weekly-payroll-summary strong {
    margin-top:
        22px;

    color:
        var(--cream);

    font-size:
        clamp(
            24px,
            3vw,
            38px
        );

    font-weight:
        normal;

    line-height:
        1.05;
}


/* ========================================
   PROGRESSO
======================================== */

.admin-weekly-payroll-progress {
    min-height:
        66px;

    padding:
        22px 38px;

    display:
        flex;

    align-items:
        center;

    color:
        rgba(234, 208, 173, .68);

    border-bottom:
        1px solid
        rgba(223, 192, 155, .14);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.7;
}


/* ========================================
   BOTÃO DE PROCESSAMENTO
======================================== */

.admin-weekly-payroll-button {
    width:
        100%;

    min-height:
        68px;

    padding:
        0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    border:
        0;

    background:
        var(--rust);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;

    transition:
        background .25s ease,
        opacity .25s ease;
}


.admin-weekly-payroll-button span {
    font-size:
        22px;

    font-weight:
        normal;
}


.admin-weekly-payroll-button:hover:not(:disabled) {
    background:
        var(--terracotta);
}


.admin-weekly-payroll-button:disabled {
    opacity:
        .52;

    cursor:
        not-allowed;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

    .admin-weekly-payroll-heading {
        grid-template-columns:
            1fr;
    }


    .admin-weekly-payroll-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-weekly-payroll-summary > div:nth-child(2) {
        border-right:
            0;
    }


    .admin-weekly-payroll-summary > div:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 650px) {

    .admin-weekly-payroll-heading {
        padding:
            28px 21px;

        gap:
            30px;
    }


    .admin-weekly-payroll-summary {
        grid-template-columns:
            1fr;
    }


    .admin-weekly-payroll-summary > div,
    .admin-weekly-payroll-summary > div:nth-child(2) {
        min-height:
            110px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }


    .admin-weekly-payroll-summary > div:last-child {
        border-bottom:
            0;
    }


    .admin-weekly-payroll-progress {
        padding:
            20px 21px;
    }


    .admin-weekly-payroll-button {
        min-height:
            75px;

        padding:
            18px 21px;

        text-align:
            left;

        line-height:
            1.6;
    }

}

/* ========================================
   ADMIN — ALIMENTAÇÃO SEMANAL
======================================== */


/* ========================================
   PAINEL PRINCIPAL
======================================== */

.admin-weekly-food {
    margin:
        34px 0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223, 192, 155, .20);

    background:
        linear-gradient(
            135deg,
            rgba(96, 54, 31, .96),
            rgba(7, 27, 33, .98) 55%,
            rgba(16, 42, 51, .98)
        );
}


/* ========================================
   CABEÇALHO
======================================== */

.admin-weekly-food-heading {
    padding:
        38px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px
        235px;

    gap:
        35px;

    align-items:
        end;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-weekly-food-heading > div:first-child > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        4px;
}


.admin-weekly-food-heading h3 {
    margin:
        16px 0;

    color:
        var(--cream);

    font-size:
        clamp(
            34px,
            5vw,
            55px
        );

    font-weight:
        normal;

    line-height:
        .95;
}


.admin-weekly-food-heading p {
    max-width:
        680px;

    color:
        rgba(234, 208, 173, .67);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


/* ========================================
   CONFIGURAÇÃO DO VALOR
======================================== */

.admin-weekly-food-settings {
    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;
}


.admin-weekly-food-settings label,
.admin-weekly-food-heading > label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.admin-weekly-food-settings label > div {
    display:
        grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);
}


.admin-weekly-food-settings label > div > span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(223, 192, 155, .27);

    border-right:
        0;

    color:
        var(--sand);

    background:
        rgba(7, 27, 33, .22);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        2px;
}


/* ========================================
   CAMPOS
======================================== */

.admin-weekly-food-settings input,
.admin-weekly-food-heading > label input {
    width:
        100%;

    min-height:
        58px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(223, 192, 155, .27);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(241, 221, 194, .07);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.admin-weekly-food-heading > label input {
    color-scheme:
        dark;
}


.admin-weekly-food-settings input:focus,
.admin-weekly-food-heading > label input:focus {
    border-color:
        var(--terracotta);

    background:
        rgba(241, 221, 194, .12);
}


/* ========================================
   BOTÃO DE SALVAR VALOR
======================================== */

.admin-weekly-food-settings button {
    min-height:
        48px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    background:
        rgba(7, 27, 33, .46);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

    transition:
        background .25s ease,
        border-color .25s ease,
        opacity .25s ease;
}


.admin-weekly-food-settings button:hover:not(:disabled) {
    border-color:
        var(--sand);

    background:
        var(--rust);
}


.admin-weekly-food-settings button:disabled {
    opacity:
        .55;

    cursor:
        wait;
}


/* ========================================
   RESUMO
======================================== */

.admin-weekly-food-summary {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-bottom:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-weekly-food-summary > div {
    min-height:
        140px;

    padding:
        27px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-weekly-food-summary > div:last-child {
    border-right:
        0;
}


.admin-weekly-food-summary span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2.5px;

    line-height:
        1.6;
}


.admin-weekly-food-summary strong {
    margin-top:
        22px;

    color:
        var(--cream);

    font-size:
        clamp(
            24px,
            3vw,
            38px
        );

    font-weight:
        normal;

    line-height:
        1.05;
}


/* ========================================
   PROGRESSO E AVISOS
======================================== */

.admin-weekly-food-progress {
    min-height:
        66px;

    padding:
        22px 38px;

    display:
        flex;

    align-items:
        center;

    color:
        rgba(234, 208, 173, .70);

    border-bottom:
        1px solid
        rgba(223, 192, 155, .14);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.7;
}


/* ========================================
   BOTÃO DE PROCESSAMENTO
======================================== */

.admin-weekly-food-button {
    width:
        100%;

    min-height:
        68px;

    padding:
        0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    border:
        0;

    background:
        var(--leather);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;

    transition:
        background .25s ease,
        opacity .25s ease;
}


.admin-weekly-food-button span {
    font-size:
        22px;

    font-weight:
        normal;
}


.admin-weekly-food-button:hover:not(:disabled) {
    background:
        var(--rust);
}


.admin-weekly-food-button:disabled {
    opacity:
        .52;

    cursor:
        not-allowed;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {

    .admin-weekly-food-heading {
        grid-template-columns:
            1fr
            1fr;
    }


    .admin-weekly-food-heading > div:first-child {
        grid-column:
            1 / -1;
    }


    .admin-weekly-food-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-weekly-food-summary > div:nth-child(2) {
        border-right:
            0;
    }


    .admin-weekly-food-summary > div:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 650px) {

    .admin-weekly-food-heading {
        padding:
            28px 21px;

        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .admin-weekly-food-heading > div:first-child {
        grid-column:
            auto;
    }


    .admin-weekly-food-summary {
        grid-template-columns:
            1fr;
    }


    .admin-weekly-food-summary > div,
    .admin-weekly-food-summary > div:nth-child(2) {
        min-height:
            110px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }


    .admin-weekly-food-summary > div:last-child {
        border-bottom:
            0;
    }


    .admin-weekly-food-progress {
        padding:
            20px 21px;
    }


    .admin-weekly-food-button {
        min-height:
            75px;

        padding:
            18px 21px;

        text-align:
            left;

        line-height:
            1.6;
    }

}

/* ========================================
   ADMIN — MORADIAS DE NASHVILLE
======================================== */

.admin-panel-navigation {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
}


/* ========================================
   RESUMO
======================================== */

.admin-property-summary {
    width:
        min(1180px, calc(100% - 48px));

    margin:
        34px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border:
        1px solid
        rgba(223, 192, 155, .18);

    background:
        rgba(7, 27, 33, .76);
}


.admin-property-summary article {
    min-height:
        150px;

    padding:
        28px 24px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border-right:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-property-summary article:last-child {
    border-right:
        0;
}


.admin-property-summary span {
    margin-bottom:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.6px;
}


.admin-property-summary strong {
    color:
        var(--cream);

    font-size:
        clamp(27px, 3.5vw, 44px);

    font-weight:
        normal;

    line-height:
        1;
}


.admin-property-summary p {
    margin-top:
        11px;

    color:
        rgba(234, 208, 173, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.5;
}


/* ========================================
   SEÇÃO
======================================== */

.admin-properties {
    width:
        min(1180px, calc(100% - 48px));

    margin:
        56px auto 90px;
}


.admin-properties-heading p {
    max-width:
        760px;

    margin-top:
        17px;

    color:
        rgba(234, 208, 173, .68);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.8;
}


/* ========================================
   FORMULÁRIO E VÍNCULO DE MORADOR
======================================== */

.admin-property-management-grid {
    margin-top:
        35px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, .65fr);

    gap:
        24px;

    align-items:
        start;
}


.admin-property-form,
.admin-property-assignment {
    border:
        1px solid
        rgba(223, 192, 155, .19);

    background:
        linear-gradient(
            145deg,
            rgba(16, 42, 51, .98),
            rgba(7, 27, 33, .98)
        );

    color:
        var(--cream);
}


.admin-property-assignment {
    position:
        sticky;

    top:
        25px;
}


.admin-property-form-heading {
    padding:
        32px;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-property-form-heading > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3.5px;
}


.admin-property-form-heading h3 {
    margin:
        15px 0;

    color:
        var(--cream);

    font-size:
        clamp(31px, 4vw, 46px);

    font-weight:
        normal;

    line-height:
        1;
}


.admin-property-form-heading p {
    color:
        rgba(234, 208, 173, .63);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.75;
}


.admin-property-fields {
    padding:
        30px 32px 34px;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        24px 18px;
}


.admin-property-field {
    min-width:
        0;
}


.admin-property-field.full,
.admin-property-active-field {
    grid-column:
        1 / -1;
}


.admin-property-field > span,
.admin-property-assignment label > span {
    display:
        block;

    margin-bottom:
        11px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2.7px;
}


.admin-property-field input,
.admin-property-field select,
.admin-property-assignment select {
    width:
        100%;

    min-height:
        56px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(223, 192, 155, .24);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(241, 221, 194, .06);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.admin-property-field select,
.admin-property-assignment select {
    color-scheme:
        dark;
}


.admin-property-field input:focus,
.admin-property-field select:focus,
.admin-property-assignment select:focus {
    border-color:
        var(--terracotta);

    background:
        rgba(241, 221, 194, .11);
}


.admin-property-field input::placeholder {
    color:
        rgba(234, 208, 173, .40);
}


.admin-property-money-field {
    display:
        grid;

    grid-template-columns:
        58px minmax(0, 1fr);
}


.admin-property-money-field b {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(223, 192, 155, .24);

    border-right:
        0;

    color:
        var(--sand);

    background:
        rgba(7, 27, 33, .38);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        2px;
}


.admin-property-active-field {
    min-height:
        58px;

    padding:
        16px 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    border:
        1px solid
        rgba(223, 192, 155, .18);

    color:
        rgba(241, 221, 194, .78);

    background:
        rgba(241, 221, 194, .035);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        2px;

    line-height:
        1.5;
}


.admin-property-active-field input {
    width:
        17px;

    height:
        17px;

    flex-shrink:
        0;

    accent-color:
        var(--rust);
}


.admin-property-form-actions {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-property-form-actions button,
.admin-property-assignment > button {
    min-height:
        64px;

    padding:
        0 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        0;

    background:
        var(--rust);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

    transition:
        background .25s ease,
        opacity .25s ease;
}


.admin-property-form-actions button:first-child {
    background:
        rgba(241, 221, 194, .07);

    border-right:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-property-form-actions button:hover:not(:disabled),
.admin-property-assignment > button:hover:not(:disabled) {
    background:
        var(--terracotta);
}


.admin-property-form-actions button:disabled,
.admin-property-assignment > button:disabled {
    opacity:
        .48;

    cursor:
        not-allowed;
}


.admin-property-assignment label {
    display:
        block;

    margin:
        25px 30px 0;
}


.admin-property-assignment > button {
    width:
        calc(100% - 60px);

    margin:
        26px 30px 0;
}


.admin-property-assignment-note {
    margin-top:
        28px;

    padding:
        24px 30px;

    border-top:
        1px solid
        rgba(223, 192, 155, .14);

    color:
        rgba(234, 208, 173, .53);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.75;
}


/* ========================================
   BUSCA
======================================== */

.admin-property-search {
    margin:
        36px 0;

    padding:
        28px;

    border:
        1px solid
        rgba(223, 192, 155, .17);

    background:
        rgba(7, 27, 33, .60);
}


.admin-property-search label {
    display:
        block;

    margin-bottom:
        13px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.admin-property-search input {
    width:
        100%;

    min-height:
        58px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(241, 221, 194, .06);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;
}


.admin-property-search input:focus {
    border-color:
        var(--terracotta);
}


.admin-property-search input::placeholder {
    color:
        rgba(234, 208, 173, .43);
}


/* ========================================
   CARDS DOS IMÓVEIS
======================================== */

.admin-property-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;
}


.admin-property-card {
    overflow:
        hidden;

    border:
        1px solid
        rgba(223, 192, 155, .18);

    background:
        linear-gradient(
            145deg,
            rgba(16, 42, 51, .97),
            rgba(7, 27, 33, .97)
        );

    color:
        var(--cream);
}


.admin-property-card-inactive {
    opacity:
        .75;
}


.admin-property-card-heading {
    min-height:
        126px;

    padding:
        28px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        22px;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-property-card-heading > div > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.admin-property-card-heading h3 {
    margin-top:
        13px;

    color:
        var(--cream);

    font-size:
        31px;

    font-weight:
        normal;

    line-height:
        1.05;
}


.admin-property-status {
    flex-shrink:
        0;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(223, 192, 155, .24);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        normal;

    letter-spacing:
        2px;
}


.admin-property-status.available {
    background:
        rgba(23, 59, 69, .88);
}


.admin-property-status.occupied {
    background:
        rgba(96, 54, 31, .90);
}


.admin-property-status.full {
    background:
        var(--rust);
}


.admin-property-status.inactive {
    background:
        rgba(90, 90, 90, .70);
}


.admin-property-card-location {
    min-height:
        105px;

    padding:
        24px 28px;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .13);
}


.admin-property-card-location span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2.5px;
}


.admin-property-card-location p {
    margin-top:
        13px;

    color:
        rgba(241, 221, 194, .68);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.7;
}


.admin-property-card-numbers {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-bottom:
        1px solid
        rgba(223, 192, 155, .13);
}


.admin-property-card-numbers > div {
    min-height:
        118px;

    padding:
        22px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(223, 192, 155, .13);
}


.admin-property-card-numbers > div:last-child {
    border-right:
        0;
}


.admin-property-card-numbers span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;

    line-height:
        1.5;
}


.admin-property-card-numbers strong {
    margin-top:
        18px;

    color:
        var(--cream);

    font-size:
        23px;

    font-weight:
        normal;

    line-height:
        1.1;
}


/* ========================================
   MORADORES
======================================== */

.admin-property-residents {
    padding:
        25px 28px;
}


.admin-property-residents-heading {
    margin-bottom:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.admin-property-residents-heading span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2.5px;
}


.admin-property-residents-heading strong {
    color:
        var(--cream);

    font-size:
        22px;

    font-weight:
        normal;
}


.admin-property-resident {
    padding:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    border:
        1px solid
        rgba(223, 192, 155, .13);

    background:
        rgba(241, 221, 194, .035);
}


.admin-property-resident +
.admin-property-resident {
    margin-top:
        9px;
}


.admin-property-resident > div {
    min-width:
        0;
}


.admin-property-resident span,
.admin-property-resident small {
    display:
        block;

    color:
        rgba(234, 208, 173, .52);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.admin-property-resident strong {
    display:
        block;

    margin:
        8px 0;

    color:
        var(--cream);

    font-size:
        18px;

    font-weight:
        normal;

    line-height:
        1.1;
}


.admin-property-resident button {
    flex-shrink:
        0;

    min-height:
        39px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(223, 192, 155, .20);

    background:
        transparent;

    color:
        var(--sand);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.7px;
}


.admin-property-resident button:hover {
    border-color:
        var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);
}


.admin-property-no-residents {
    padding:
        20px;

    border:
        1px dashed
        rgba(223, 192, 155, .17);

    color:
        rgba(234, 208, 173, .50);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.6;

    text-align:
        center;
}


.admin-property-card-actions {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(223, 192, 155, .13);
}


.admin-property-card-actions button {
    min-height:
        58px;

    border:
        0;

    background:
        transparent;

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        2.3px;
}


.admin-property-card-actions button:first-child {
    border-right:
        1px solid
        rgba(223, 192, 155, .13);
}


.admin-property-card-actions button:hover {
    background:
        var(--rust);
}


/* ========================================
   RESPONSIVO
======================================== */

@media (max-width: 1180px) {

    .admin-panel-navigation {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .admin-property-management-grid {
        grid-template-columns:
            1fr;
    }


    .admin-property-assignment {
        position:
            static;
    }

}


@media (max-width: 900px) {

    .admin-property-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-property-summary article:nth-child(2) {
        border-right:
            0;
    }


    .admin-property-summary article:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }


    .admin-property-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 650px) {

    .admin-panel-navigation {
        grid-template-columns:
            1fr;
    }


    .admin-property-summary,
    .admin-properties {
        width:
            min(100% - 28px, 1180px);
    }


    .admin-property-summary {
        grid-template-columns:
            1fr;
    }


    .admin-property-summary article,
    .admin-property-summary article:nth-child(2) {
        min-height:
            118px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }


    .admin-property-summary article:last-child {
        border-bottom:
            0;
    }


    .admin-property-fields {
        padding:
            25px 20px;

        grid-template-columns:
            1fr;
    }


    .admin-property-field.full,
    .admin-property-active-field {
        grid-column:
            auto;
    }


    .admin-property-form-heading {
        padding:
            27px 20px;
    }


    .admin-property-form-actions {
        grid-template-columns:
            1fr;
    }


    .admin-property-form-actions button:first-child {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }


    .admin-property-assignment label {
        margin-left:
            20px;

        margin-right:
            20px;
    }


    .admin-property-assignment > button {
        width:
            calc(100% - 40px);

        margin-left:
            20px;

        margin-right:
            20px;
    }


    .admin-property-assignment-note {
        padding:
            22px 20px;
    }


    .admin-property-search {
        padding:
            22px 18px;
    }


    .admin-property-card-heading {
        flex-direction:
            column;
    }


    .admin-property-card-numbers {
        grid-template-columns:
            1fr;
    }


    .admin-property-card-numbers > div {
        min-height:
            95px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, .13);
    }


    .admin-property-card-numbers > div:last-child {
        border-bottom:
            0;
    }


    .admin-property-resident {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .admin-property-card-actions {
        grid-template-columns:
            1fr;
    }


    .admin-property-card-actions button:first-child {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, .13);
    }

}


/* ========================================
   ADMIN — IMAGENS DAS MORADIAS
======================================== */


/* ========================================
   CAMPOS DE UPLOAD
======================================== */

.admin-property-image-section {
    grid-column:
        1 / -1;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223, 192, 155, .18);

    background:
        rgba(7, 27, 33, .32);
}


.admin-property-image-section-heading {
    padding:
        24px;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-property-image-section-heading > span,
.admin-property-image-label {
    display:
        block;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.admin-property-image-section-heading p {
    margin-top:
        11px;

    color:
        rgba(234, 208, 173, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.7;
}


.admin-property-image-columns {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.admin-property-image-column {
    min-width:
        0;

    padding:
        24px;
}


.admin-property-image-column:first-child {
    border-right:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-property-image-label {
    margin-bottom:
        15px;
}


/* ========================================
   BOTÃO DE SELEÇÃO
======================================== */

.admin-property-image-upload {
    min-height:
        78px;

    padding:
        17px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border:
        1px dashed
        rgba(223, 192, 155, .28);

    background:
        rgba(241, 221, 194, .035);

    cursor:
        pointer;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.admin-property-image-upload:hover {
    border-color:
        var(--terracotta);

    background:
        rgba(241, 221, 194, .07);
}


.admin-property-image-upload input {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    opacity:
        0;

    pointer-events:
        none;
}


.admin-property-image-upload > span {
    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.5px;
}


.admin-property-image-upload small {
    margin-top:
        8px;

    color:
        rgba(234, 208, 173, .52);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.5;
}


/* ========================================
   PRÉVIAS
======================================== */

.admin-property-cover-preview,
.admin-property-gallery-preview {
    margin-top:
        15px;
}


.admin-property-image-preview-card {
    position:
        relative;

    min-height:
        230px;

    overflow:
        hidden;

    background:
        var(--ink-dark);
}


.admin-property-image-preview-card img {
    width:
        100%;

    height:
        230px;

    display:
        block;

    object-fit:
        cover;
}


.admin-property-image-preview-card > span {
    position:
        absolute;

    left:
        14px;

    bottom:
        14px;

    padding:
        7px 9px;

    background:
        rgba(7, 27, 33, .86);

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.admin-property-image-preview-card button {
    position:
        absolute;

    top:
        12px;

    right:
        12px;

    min-height:
        35px;

    padding:
        0 12px;

    border:
        0;

    background:
        var(--rust);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.7px;
}


.admin-property-gallery-preview {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        8px;
}


.admin-property-gallery-preview-item {
    position:
        relative;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        var(--ink-dark);
}


.admin-property-gallery-preview-item img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.admin-property-gallery-preview-item button {
    position:
        absolute;

    z-index:
        2;

    top:
        7px;

    right:
        7px;

    width:
        29px;

    height:
        29px;

    border:
        0;

    background:
        rgba(168, 70, 34, .94);

    color:
        var(--cream);

    cursor:
        pointer;

    font-size:
        18px;
}


.admin-property-gallery-preview-item > span {
    position:
        absolute;

    left:
        7px;

    bottom:
        7px;

    padding:
        5px 7px;

    background:
        rgba(7, 27, 33, .84);

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.5px;
}


.admin-property-image-empty {
    min-height:
        150px;

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    border:
        1px dashed
        rgba(223, 192, 155, .18);

    color:
        rgba(234, 208, 173, .48);

    text-align:
        center;
}


.admin-property-image-empty.gallery {
    grid-column:
        1 / -1;
}


.admin-property-image-empty span {
    color:
        var(--sand);

    font-size:
        28px;
}


.admin-property-image-empty p {
    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.6;
}


/* ========================================
   FOTO PRINCIPAL DO CARD
======================================== */

.admin-property-card-media {
    position:
        relative;

    width:
        100%;

    height:
        330px;

    padding:
        0;

    overflow:
        hidden;

    border:
        0;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .14);

    background:
        var(--ink-dark);

    cursor:
        pointer;
}


.admin-property-card-media img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .45s ease,
        opacity .25s ease;
}


.admin-property-card-media:hover img {
    transform:
        scale(1.025);
}


.admin-property-card-media img.broken,
.admin-property-card-thumbnails img.broken {
    opacity:
        0;
}


.admin-property-card-media-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .02),
            rgba(7, 27, 33, .12) 55%,
            rgba(7, 27, 33, .78)
        );
}


.admin-property-card-media > b {
    position:
        absolute;

    left:
        22px;

    bottom:
        20px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(241, 221, 194, .32);

    background:
        rgba(7, 27, 33, .76);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        normal;

    letter-spacing:
        2.5px;
}


.admin-property-card-media.empty {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    cursor:
        default;

    color:
        rgba(234, 208, 173, .45);
}


.admin-property-card-media.empty > span {
    color:
        var(--sand);

    font-size:
        34px;
}


.admin-property-card-media.empty > p {
    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


/* ========================================
   MINIATURAS DO CARD
======================================== */

.admin-property-card-thumbnails {
    padding:
        12px;

    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        7px;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .13);

    background:
        rgba(7, 27, 33, .35);
}


.admin-property-card-thumbnails button {
    aspect-ratio:
        1 / 1;

    padding:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223, 192, 155, .15);

    background:
        var(--ink-dark);

    cursor:
        pointer;
}


.admin-property-card-thumbnails img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .25s ease;
}


.admin-property-card-thumbnails button:hover img {
    transform:
        scale(1.06);
}


/* ========================================
   MODAL DA GALERIA
======================================== */

.admin-property-gallery-modal {
    z-index:
        3000;
}


.admin-property-gallery-panel {
    position:
        relative;

    z-index:
        2;

    width:
        min(1180px, calc(100% - 34px));

    max-height:
        calc(100vh - 34px);

    overflow-y:
        auto;

    background:
        var(--ink-dark);

    color:
        var(--cream);

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .50);
}


.admin-property-gallery-close {
    color:
        var(--cream);
}


.admin-property-gallery-header {
    padding:
        30px 70px 25px 32px;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-property-gallery-header > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.admin-property-gallery-header h2 {
    margin-top:
        12px;

    color:
        var(--cream);

    font-size:
        clamp(31px, 5vw, 54px);

    font-weight:
        normal;

    line-height:
        1;
}


.admin-property-gallery-stage {
    min-height:
        560px;

    display:
        grid;

    grid-template-columns:
        70px minmax(0, 1fr) 70px;

    align-items:
        center;
}


.admin-property-gallery-image-frame {
    position:
        relative;

    min-width:
        0;

    height:
        min(68vh, 760px);

    background:
        #050f13;
}


.admin-property-gallery-image-frame > img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;
}


.admin-property-gallery-image-placeholder {
    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    color:
        rgba(234, 208, 173, .60);
}


.admin-property-gallery-image-placeholder span {
    color:
        var(--sand);

    font-size:
        42px;
}


.admin-property-gallery-image-placeholder p {
    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;
}


.admin-property-gallery-arrow {
    width:
        100%;

    height:
        100%;

    border:
        0;

    background:
        transparent;

    color:
        var(--sand);

    cursor:
        pointer;

    font-size:
        50px;

    transition:
        background .25s ease,
        opacity .25s ease;
}


.admin-property-gallery-arrow:hover:not(:disabled) {
    background:
        rgba(168, 70, 34, .22);
}


.admin-property-gallery-arrow:disabled {
    opacity:
        .25;

    cursor:
        default;
}


.admin-property-gallery-footer {
    padding:
        18px 25px 24px;

    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    gap:
        25px;

    align-items:
        center;

    border-top:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-property-gallery-footer > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        3px;
}


.admin-property-gallery-thumbnails {
    display:
        flex;

    gap:
        8px;

    overflow-x:
        auto;
}


.admin-property-gallery-thumbnails button {
    width:
        72px;

    height:
        58px;

    flex:
        0 0 auto;

    padding:
        0;

    overflow:
        hidden;

    border:
        2px solid
        transparent;

    background:
        var(--ink);

    cursor:
        pointer;
}


.admin-property-gallery-thumbnails button.active {
    border-color:
        var(--sand);
}


.admin-property-gallery-thumbnails img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


/* ========================================
   RESPONSIVO — IMAGENS
======================================== */

@media (max-width: 900px) {

    .admin-property-image-columns {
        grid-template-columns:
            1fr;
    }


    .admin-property-image-column:first-child {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }


    .admin-property-gallery-stage {
        grid-template-columns:
            52px minmax(0, 1fr) 52px;
    }


    .admin-property-gallery-image-frame {
        height:
            min(62vh, 650px);
    }

}


@media (max-width: 650px) {

    .admin-property-image-section {
        grid-column:
            auto;
    }


    .admin-property-image-column {
        padding:
            20px;
    }


    .admin-property-gallery-preview {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-property-card-media {
        height:
            265px;
    }


    .admin-property-card-thumbnails {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .admin-property-card-thumbnails button:nth-child(n + 5) {
        display:
            none;
    }


    .admin-property-gallery-header {
        padding:
            25px 55px 21px 20px;
    }


    .admin-property-gallery-stage {
        min-height:
            420px;

        grid-template-columns:
            42px minmax(0, 1fr) 42px;
    }


    .admin-property-gallery-image-frame {
        height:
            55vh;
    }


    .admin-property-gallery-arrow {
        font-size:
            38px;
    }


    .admin-property-gallery-footer {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

}

/* ========================================
   TEXAS LEGACIES — ETAPA 9
   MORADIA, MUDANÇA, ALUGUEL E UTILITIES
======================================== */


/* ========================================
   CUSTO DA MUDANÇA NO VÍNCULO DE MORADOR
======================================== */

.admin-property-assignment-cost {
    margin:
        25px 30px 0;

    padding:
        22px;

    border:
        1px solid
        rgba(223, 192, 155, .18);

    background:
        rgba(241, 221, 194, .035);

    color:
        rgba(234, 208, 173, .62);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.7;
}


.admin-property-assignment-cost.ready {
    border-color:
        rgba(210, 123, 80, .42);

    background:
        rgba(168, 70, 34, .12);
}


.admin-property-assignment-cost.warning {
    border-color:
        rgba(168, 70, 34, .70);

    background:
        rgba(168, 70, 34, .18);
}


.admin-property-assignment-cost > span {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--sand);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2.7px;
}


.admin-property-assignment-cost > strong {
    display:
        block;

    margin-bottom:
        13px;

    color:
        var(--cream);

    font-family:
        Georgia,
        serif;

    font-size:
        35px;

    font-weight:
        normal;

    line-height:
        1;
}


.admin-property-assignment-cost > p {
    color:
        rgba(241, 221, 194, .75);

    font-size:
        10px;

    line-height:
        1.75;
}


.admin-property-assignment-cost > small {
    display:
        block;

    margin-top:
        12px;

    color:
        rgba(234, 208, 173, .52);

    font-size:
        9px;

    line-height:
        1.6;
}


/* ========================================
   VÍNCULO EXIBIDO NO MORADOR
======================================== */

.admin-property-resident em {
    display:
        block;

    margin-top:
        8px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-style:
        normal;

    letter-spacing:
        1.5px;

    line-height:
        1.5;

    text-transform:
        uppercase;
}


/* ========================================
   PAINEL SEMANAL DE MORADIA
======================================== */

.admin-weekly-housing {
    margin:
        34px 0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223, 192, 155, .20);

    background:
        linear-gradient(
            135deg,
            rgba(38, 23, 16, .98),
            rgba(96, 54, 31, .94) 36%,
            rgba(7, 27, 33, .98) 100%
        );
}


.admin-weekly-housing-heading {
    padding:
        38px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        310px
        235px;

    gap:
        35px;

    align-items:
        end;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-weekly-housing-heading > div:first-child > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        4px;
}


.admin-weekly-housing-heading h3 {
    margin:
        16px 0;

    color:
        var(--cream);

    font-size:
        clamp(34px, 5vw, 55px);

    font-weight:
        normal;

    line-height:
        .95;
}


.admin-weekly-housing-heading p {
    max-width:
        680px;

    color:
        rgba(234, 208, 173, .67);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


/* ========================================
   CONFIGURAÇÃO DAS TAXAS
======================================== */

.admin-weekly-housing-settings {
    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;
}


.admin-weekly-housing-settings label,
.admin-weekly-housing-heading > label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.7px;
}


.admin-weekly-housing-settings label > div {
    display:
        grid;

    grid-template-columns:
        58px minmax(0, 1fr);
}


.admin-weekly-housing-settings label > div > span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(223, 192, 155, .27);

    border-right:
        0;

    color:
        var(--sand);

    background:
        rgba(7, 27, 33, .25);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        2px;
}


.admin-weekly-housing-settings input,
.admin-weekly-housing-heading > label input {
    width:
        100%;

    min-height:
        56px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(223, 192, 155, .27);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(241, 221, 194, .07);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.admin-weekly-housing-heading > label input {
    color-scheme:
        dark;
}


.admin-weekly-housing-settings input:focus,
.admin-weekly-housing-heading > label input:focus {
    border-color:
        var(--terracotta);

    background:
        rgba(241, 221, 194, .12);
}


.admin-weekly-housing-settings button {
    min-height:
        50px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    background:
        rgba(7, 27, 33, .48);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

    transition:
        background .25s ease,
        border-color .25s ease,
        opacity .25s ease;
}


.admin-weekly-housing-settings button:hover:not(:disabled) {
    border-color:
        var(--sand);

    background:
        var(--rust);
}


.admin-weekly-housing-settings button:disabled {
    opacity:
        .52;

    cursor:
        wait;
}


/* ========================================
   RESUMO DA COBRANÇA
======================================== */

.admin-weekly-housing-summary {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-bottom:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-weekly-housing-summary > div {
    min-height:
        140px;

    padding:
        27px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(223, 192, 155, .14);
}


.admin-weekly-housing-summary > div:last-child {
    border-right:
        0;
}


.admin-weekly-housing-summary span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2.5px;

    line-height:
        1.6;
}


.admin-weekly-housing-summary strong {
    margin-top:
        22px;

    color:
        var(--cream);

    font-size:
        clamp(24px, 3vw, 38px);

    font-weight:
        normal;

    line-height:
        1.05;
}


/* ========================================
   PROGRESSO E BOTÃO
======================================== */

.admin-weekly-housing-progress {
    min-height:
        66px;

    padding:
        22px 38px;

    display:
        flex;

    align-items:
        center;

    color:
        rgba(234, 208, 173, .70);

    border-bottom:
        1px solid
        rgba(223, 192, 155, .14);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.7;
}


.admin-weekly-housing-button {
    width:
        100%;

    min-height:
        68px;

    padding:
        0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    border:
        0;

    background:
        var(--leather);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;

    transition:
        background .25s ease,
        opacity .25s ease;
}


.admin-weekly-housing-button span {
    font-size:
        22px;

    font-weight:
        normal;
}


.admin-weekly-housing-button:hover:not(:disabled) {
    background:
        var(--rust);
}


.admin-weekly-housing-button:disabled {
    opacity:
        .52;

    cursor:
        not-allowed;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {

    .admin-weekly-housing-heading {
        grid-template-columns:
            1fr 1fr;
    }


    .admin-weekly-housing-heading > div:first-child {
        grid-column:
            1 / -1;
    }


    .admin-weekly-housing-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-weekly-housing-summary > div:nth-child(2) {
        border-right:
            0;
    }


    .admin-weekly-housing-summary > div:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 650px) {

    .admin-property-assignment-cost {
        margin:
            22px 20px 0;
    }


    .admin-weekly-housing-heading {
        padding:
            28px 21px;

        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .admin-weekly-housing-heading > div:first-child {
        grid-column:
            auto;
    }


    .admin-weekly-housing-summary {
        grid-template-columns:
            1fr;
    }


    .admin-weekly-housing-summary > div,
    .admin-weekly-housing-summary > div:nth-child(2) {
        min-height:
            110px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, .14);
    }


    .admin-weekly-housing-summary > div:last-child {
        border-bottom:
            0;
    }


    .admin-weekly-housing-progress {
        padding:
            20px 21px;
    }


    .admin-weekly-housing-button {
        min-height:
            75px;

        padding:
            18px 21px;

        text-align:
            left;

        line-height:
            1.6;
    }

}

/* ========================================
   DASHBOARD — MERCADO IMOBILIÁRIO
======================================== */

.dashboard-housing {
    padding: 140px 5%;
    background: var(--ink-dark);
    color: var(--cream);
}

.dashboard-housing-heading {
    max-width: 1400px;
    margin: 0 auto 70px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
    gap: 80px;
    align-items: end;
}

.dashboard-housing-heading > div > span,
.dashboard-housing-character-selector > span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 5px;
}

.dashboard-housing-heading h2 {
    margin: 20px 0 30px;
    font-size: clamp(58px, 8vw, 105px);
    line-height: .88;
    font-weight: normal;
}

.dashboard-housing-heading p {
    max-width: 680px;
    color: rgba(241, 221, 194, .68);
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.9;
}

.dashboard-housing-character-selector {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dashboard-housing-character-selector select,
.dashboard-housing-filters input,
.dashboard-housing-filters select,
.dashboard-housing-sharing-field select {
    width: 100%;
    min-height: 58px;
    padding: 0 17px;
    border: 1px solid rgba(223, 192, 155, .25);
    border-radius: 0;
    outline: none;
    background: rgba(241, 221, 194, .07);
    color: var(--cream);
    font-family: Arial, sans-serif;
    font-size: 12px;
    transition: border-color .25s ease, background .25s ease;
}

.dashboard-housing-character-selector select:focus,
.dashboard-housing-filters input:focus,
.dashboard-housing-filters select:focus,
.dashboard-housing-sharing-field select:focus {
    border-color: var(--sand);
    background: rgba(241, 221, 194, .11);
}

.dashboard-housing-character-selector select option,
.dashboard-housing-filters select option,
.dashboard-housing-sharing-field select option {
    background: var(--ink-dark);
    color: var(--cream);
}

.dashboard-housing-message {
    max-width: 1400px;
    margin: 0 auto 35px;
    padding: 18px 22px;
    border: 1px solid rgba(223, 192, 155, .22);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
}

.dashboard-housing-message.success {
    border-color: rgba(223, 160, 108, .48);
    background: rgba(168, 70, 34, .15);
    color: var(--cream);
}

.dashboard-housing-message.error {
    border-color: rgba(210, 123, 80, .55);
    background: rgba(96, 54, 31, .32);
    color: var(--cream);
}

/* ========================================
   MORADIA ATUAL
======================================== */

.dashboard-housing-current {
    max-width: 1400px;
    margin: 0 auto 50px;
    border: 1px solid rgba(223, 192, 155, .18);
}

.dashboard-housing-current.empty {
    padding: 35px;
    background: rgba(241, 221, 194, .04);
}

.dashboard-housing-current.empty > span,
.dashboard-housing-current-content > span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 4px;
}

.dashboard-housing-current.empty h3 {
    margin: 16px 0 12px;
    font-size: 34px;
    font-weight: normal;
}

.dashboard-housing-current.empty p {
    color: rgba(241, 221, 194, .62);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.7;
}

.dashboard-housing-current.occupied {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    overflow: hidden;
    background: var(--ink);
}

.dashboard-housing-current-image {
    min-height: 430px;
    position: relative;
    overflow: hidden;
    border: 0;
    background: var(--wood-dark);
    cursor: pointer;
}

.dashboard-housing-current-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.dashboard-housing-current-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(7, 27, 33, .76));
}

.dashboard-housing-current-image > span {
    position: absolute;
    z-index: 2;
    left: 25px;
    bottom: 22px;
    color: var(--cream);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

.dashboard-housing-current-image.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sand);
    font-size: 45px;
    cursor: default;
}

.dashboard-housing-current-content {
    padding: 50px;
}

.dashboard-housing-current-content h3 {
    margin: 17px 0 12px;
    font-size: clamp(42px, 5vw, 70px);
    line-height: .95;
    font-weight: normal;
}

.dashboard-housing-current-content > p {
    color: rgba(241, 221, 194, .64);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.7;
}

.dashboard-housing-current-data {
    margin-top: 38px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(223, 192, 155, .14);
    border-left: 1px solid rgba(223, 192, 155, .14);
}

.dashboard-housing-current-data > div {
    min-height: 120px;
    padding: 23px;
    border-right: 1px solid rgba(223, 192, 155, .14);
    border-bottom: 1px solid rgba(223, 192, 155, .14);
}

.dashboard-housing-current-data span,
.dashboard-housing-property-values span,
.dashboard-housing-property-residents > span,
.dashboard-housing-modal-costs span,
.dashboard-housing-modal-total span {
    display: block;
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
    line-height: 1.5;
}

.dashboard-housing-current-data strong {
    display: block;
    margin-top: 18px;
    color: var(--cream);
    font-size: 18px;
    font-weight: normal;
    line-height: 1.35;
}

.dashboard-housing-current-residents {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-housing-current-residents span {
    padding: 9px 12px;
    border: 1px solid rgba(223, 192, 155, .18);
    color: rgba(241, 221, 194, .72);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
}

/* ========================================
   SOLICITAÇÕES
======================================== */

.dashboard-housing-requests {
    max-width: 1400px;
    margin: 0 auto 55px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-housing-request-column {
    border: 1px solid rgba(223, 192, 155, .17);
    background: rgba(241, 221, 194, .025);
}

.dashboard-housing-request-heading {
    min-height: 70px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(223, 192, 155, .14);
}

.dashboard-housing-request-heading span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

.dashboard-housing-request-heading strong {
    color: var(--cream);
    font-size: 27px;
    font-weight: normal;
}

.dashboard-housing-request-card {
    padding: 25px;
    border-bottom: 1px solid rgba(223, 192, 155, .12);
}

.dashboard-housing-request-card:last-child {
    border-bottom: 0;
}

.dashboard-housing-request-card > span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2.5px;
}

.dashboard-housing-request-card h3 {
    margin: 13px 0 10px;
    font-size: 27px;
    font-weight: normal;
}

.dashboard-housing-request-card p,
.dashboard-housing-request-empty {
    color: rgba(241, 221, 194, .62);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
}

.dashboard-housing-request-card p strong {
    color: var(--cream);
    font-weight: normal;
}

.dashboard-housing-request-actions {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.dashboard-housing-request-actions button,
.dashboard-housing-request-cancel {
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(223, 192, 155, .20);
    background: transparent;
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
    transition: background .25s ease, border-color .25s ease;
}

.dashboard-housing-request-actions button:first-child:hover {
    background: var(--ink-light);
    border-color: var(--sand);
}

.dashboard-housing-request-actions button:last-child:hover,
.dashboard-housing-request-cancel:hover {
    background: var(--rust);
    border-color: var(--rust);
}

.dashboard-housing-request-cancel {
    width: 100%;
    margin-top: 20px;
}

.dashboard-housing-request-empty {
    padding: 25px;
}

/* ========================================
   FILTROS E CONTADORES
======================================== */

.dashboard-housing-filters {
    max-width: 1400px;
    margin: 0 auto 30px;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 12px;
}

.dashboard-housing-filters label {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.dashboard-housing-filters label > span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 3px;
}

.dashboard-housing-filters input::placeholder {
    color: rgba(241, 221, 194, .40);
}

.dashboard-housing-summary {
    max-width: 1400px;
    margin: 0 auto 50px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(223, 192, 155, .16);
}

.dashboard-housing-summary article {
    min-height: 135px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(223, 192, 155, .14);
}

.dashboard-housing-summary article:last-child {
    border-right: 0;
}

.dashboard-housing-summary span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 3px;
}

.dashboard-housing-summary strong {
    color: var(--cream);
    font-size: 38px;
    font-weight: normal;
}

.dashboard-housing-summary p {
    color: rgba(241, 221, 194, .48);
    font-family: Arial, sans-serif;
    font-size: 10px;
}

/* ========================================
   CARDS DOS IMÓVEIS
======================================== */

.dashboard-housing-grid {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-housing-property-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(223, 192, 155, .17);
    background: var(--ink);
    transition: transform .3s ease, box-shadow .3s ease;
}

.dashboard-housing-property-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .16);
}

.dashboard-housing-property-image {
    width: 100%;
    height: 330px;
    position: relative;
    overflow: hidden;
    border: 0;
    background: var(--wood-dark);
    cursor: pointer;
}

.dashboard-housing-property-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.dashboard-housing-property-card:hover .dashboard-housing-property-image img {
    transform: scale(1.025);
}

.dashboard-housing-property-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 52%, rgba(7, 27, 33, .76));
}

.dashboard-housing-property-image > span {
    position: absolute;
    z-index: 2;
    left: 21px;
    bottom: 19px;
    color: var(--cream);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

.dashboard-housing-property-image.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--sand);
    cursor: default;
}

.dashboard-housing-property-image.empty > span {
    position: static;
    font-size: 38px;
}

.dashboard-housing-property-image.empty p {
    position: relative;
    z-index: 2;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

.dashboard-housing-property-heading {
    padding: 28px;
}

.dashboard-housing-property-heading > span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 3px;
}

.dashboard-housing-property-heading h3 {
    margin: 14px 0 10px;
    font-size: 35px;
    line-height: 1;
    font-weight: normal;
}

.dashboard-housing-property-heading p {
    color: rgba(241, 221, 194, .76);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.5;
}

.dashboard-housing-property-heading small {
    display: block;
    margin-top: 10px;
    color: rgba(241, 221, 194, .45);
    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.6;
}

.dashboard-housing-property-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(223, 192, 155, .12);
    border-left: 1px solid rgba(223, 192, 155, .12);
}

.dashboard-housing-property-values > div {
    min-height: 105px;
    padding: 20px;
    border-right: 1px solid rgba(223, 192, 155, .12);
    border-bottom: 1px solid rgba(223, 192, 155, .12);
}

.dashboard-housing-property-values strong {
    display: block;
    margin-top: 15px;
    color: var(--cream);
    font-size: 21px;
    font-weight: normal;
}

.dashboard-housing-property-residents {
    min-height: 125px;
    padding: 24px 28px;
}

.dashboard-housing-property-residents > strong {
    display: inline-block;
    margin: 13px 8px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(223, 192, 155, .16);
    color: rgba(241, 221, 194, .72);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: normal;
}

.dashboard-housing-property-residents > p {
    margin-top: 15px;
    color: rgba(241, 221, 194, .52);
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.6;
}

.dashboard-housing-property-action {
    width: 100%;
    min-height: 63px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-top: 1px solid rgba(223, 192, 155, .14);
    background: var(--rust);
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 2.5px;
    transition: background .25s ease, opacity .25s ease;
}

.dashboard-housing-property-action:hover:not(:disabled) {
    background: var(--terracotta);
}

.dashboard-housing-property-action:disabled {
    background: rgba(241, 221, 194, .06);
    color: rgba(241, 221, 194, .36);
    cursor: not-allowed;
}

.dashboard-housing-property-action span {
    font-size: 21px;
}

.dashboard-housing-empty {
    max-width: 800px;
    margin: 60px auto 0;
    padding: 70px 30px;
    text-align: center;
    border: 1px solid rgba(223, 192, 155, .17);
}

.dashboard-housing-empty > span {
    color: var(--sand);
    font-size: 38px;
}

.dashboard-housing-empty h3 {
    margin: 22px 0 12px;
    font-size: 38px;
    font-weight: normal;
}

.dashboard-housing-empty p {
    color: rgba(241, 221, 194, .52);
    font-family: Arial, sans-serif;
    font-size: 11px;
}

/* ========================================
   MODAL DE MUDANÇA
======================================== */

.dashboard-housing-modal,
.dashboard-housing-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dashboard-housing-modal[hidden],
.dashboard-housing-gallery-modal[hidden] {
    display: none;
}

.dashboard-housing-modal-backdrop,
.dashboard-housing-gallery-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 27, 33, .88);
    backdrop-filter: blur(5px);
}

.dashboard-housing-modal-panel {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 48px;
    background: var(--parchment);
    color: var(--ink);
    box-shadow: 0 35px 100px rgba(0, 0, 0, .35);
}

.dashboard-housing-modal-close,
.dashboard-housing-gallery-close {
    position: absolute;
    z-index: 4;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(96, 54, 31, .25);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 24px;
}

.dashboard-housing-modal-kicker {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 4px;
}

.dashboard-housing-modal-panel h2 {
    margin: 17px 0 12px;
    padding-right: 50px;
    font-size: clamp(40px, 7vw, 64px);
    line-height: .95;
    font-weight: normal;
}

.dashboard-housing-modal-location,
.dashboard-housing-modal-explanation {
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.8;
}

.dashboard-housing-modal-explanation {
    margin-top: 25px;
}

.dashboard-housing-modal-explanation strong {
    color: var(--ink);
    font-weight: normal;
}

.dashboard-housing-modal-character {
    margin-top: 30px;
    padding: 25px;
    background: var(--ink);
    color: var(--cream);
}

.dashboard-housing-modal-character span,
.dashboard-housing-sharing-field > span {
    display: block;
    margin-bottom: 11px;
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 3px;
}

.dashboard-housing-modal-character strong {
    display: block;
    font-size: 28px;
    font-weight: normal;
}

.dashboard-housing-modal-character small {
    display: block;
    margin-top: 11px;
    color: rgba(241, 221, 194, .58);
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.dashboard-housing-sharing-field {
    margin-top: 28px;
    display: block;
}

.dashboard-housing-sharing-field select {
    background: rgba(255, 255, 255, .18);
    color: var(--ink);
    border-color: rgba(96, 54, 31, .28);
}

.dashboard-housing-sharing-field select option {
    background: var(--paper);
    color: var(--ink);
}

.dashboard-housing-modal-costs {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(96, 54, 31, .20);
    border-left: 1px solid rgba(96, 54, 31, .20);
}

.dashboard-housing-modal-costs > div {
    min-height: 110px;
    padding: 22px;
    border-right: 1px solid rgba(96, 54, 31, .20);
    border-bottom: 1px solid rgba(96, 54, 31, .20);
}

.dashboard-housing-modal-costs span,
.dashboard-housing-modal-total span {
    color: var(--rust);
}

.dashboard-housing-modal-costs strong {
    display: block;
    margin-top: 16px;
    font-size: 23px;
    font-weight: normal;
}

.dashboard-housing-modal-total {
    padding: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: var(--cream);
}

.dashboard-housing-modal-total strong {
    font-size: 35px;
    font-weight: normal;
}

.dashboard-housing-modal-confirm {
    width: 100%;
    min-height: 66px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: var(--rust);
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    transition: background .25s ease, opacity .25s ease;
}

.dashboard-housing-modal-confirm:hover:not(:disabled) {
    background: var(--terracotta);
}

.dashboard-housing-modal-confirm:disabled {
    opacity: .55;
    cursor: wait;
}

.dashboard-housing-modal-confirm span {
    font-size: 21px;
}

.dashboard-housing-modal-open {
    overflow: hidden;
}

/* ========================================
   GALERIA
======================================== */

.dashboard-housing-gallery-panel {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    height: min(82vh, 820px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-dark);
}

.dashboard-housing-gallery-panel img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.dashboard-housing-gallery-close {
    color: var(--cream);
    border-color: rgba(241, 221, 194, .35);
    background: rgba(7, 27, 33, .64);
}

.dashboard-housing-gallery-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border: 1px solid rgba(241, 221, 194, .35);
    background: rgba(7, 27, 33, .72);
    color: var(--cream);
    cursor: pointer;
    font-size: 23px;
}

.dashboard-housing-gallery-arrow.previous {
    left: 20px;
}

.dashboard-housing-gallery-arrow.next {
    right: 20px;
}

.dashboard-housing-gallery-counter {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 10px 15px;
    background: rgba(7, 27, 33, .78);
    color: var(--cream);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
}

/* ========================================
   RESPONSIVO
======================================== */

@media (max-width: 1120px) {
    .dashboard-housing-heading {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .dashboard-housing-character-selector {
        max-width: 520px;
    }

    .dashboard-housing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-housing-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .dashboard-housing-current.occupied {
        grid-template-columns: 1fr;
    }

    .dashboard-housing-current-image {
        min-height: 430px;
    }

    .dashboard-housing-current-data {
        grid-template-columns: 1fr;
    }

    .dashboard-housing-requests {
        grid-template-columns: 1fr;
    }

    .dashboard-housing-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-housing-summary article:nth-child(2) {
        border-right: 0;
    }

    .dashboard-housing-summary article:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(223, 192, 155, .14);
    }
}

@media (max-width: 650px) {
    .dashboard-housing {
        padding: 100px 20px;
    }

    .dashboard-housing-grid,
    .dashboard-housing-filters,
    .dashboard-housing-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-housing-summary article,
    .dashboard-housing-summary article:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(223, 192, 155, .14);
    }

    .dashboard-housing-summary article:last-child {
        border-bottom: 0;
    }

    .dashboard-housing-property-image {
        height: 390px;
    }

    .dashboard-housing-current-content {
        padding: 34px 24px;
    }

    .dashboard-housing-modal-panel {
        padding: 42px 22px 25px;
    }

    .dashboard-housing-modal-costs {
        grid-template-columns: 1fr;
    }

    .dashboard-housing-modal-total {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-housing-gallery-arrow {
        width: 45px;
        height: 45px;
    }

    .dashboard-housing-gallery-arrow.previous {
        left: 8px;
    }

    .dashboard-housing-gallery-arrow.next {
        right: 8px;
    }
}

/* ========================================
   CORREÇÃO — ESTADOS OCULTOS DO DASHBOARD
======================================== */

.characters-empty[hidden],
.dashboard-wallet-statement[hidden],
.dashboard-real-estate-empty[hidden],
.dashboard-property-modal[hidden],
.dashboard-housing-request-modal[hidden] {
    display: none !important;
}

/* ========================================
   DASHBOARD — ETAPA 11 | MINHA MORADIA
======================================== */


/* ========================================
   ENDEREÇO E LOCALIZAÇÃO
======================================== */

.dashboard-housing-current-neighborhood {
    margin:
        13px 0 0;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;
}


.dashboard-housing-current-address {
    margin:
        12px 0 0;

    color:
        rgba(241, 221, 194, .64);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.7;
}


/* ========================================
   DADOS COMPLETOS DA MORADIA
======================================== */

.dashboard-housing-current-data {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
}


.dashboard-housing-current-data > div {
    min-height:
        105px;
}


/* ========================================
   MORADORES
======================================== */

.dashboard-housing-current-residents {
    padding:
        24px;

    border-top:
        1px solid
        rgba(241, 221, 194, .14);

    border-bottom:
        1px solid
        rgba(241, 221, 194, .14);
}


.dashboard-housing-current-residents-label {
    display:
        block;

    margin-bottom:
        15px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.dashboard-housing-current-residents > div {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}


.dashboard-housing-current-residents > div > span {
    padding:
        9px 12px;

    border:
        1px solid
        rgba(241, 221, 194, .17);

    background:
        rgba(241, 221, 194, .045);

    color:
        rgba(241, 221, 194, .78);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        .8px;
}


/* ========================================
   AÇÕES DA MORADIA
======================================== */

.dashboard-housing-current-actions {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-bottom:
        1px solid
        rgba(241, 221, 194, .14);
}


.dashboard-housing-current-actions button,
.dashboard-housing-empty-browse {
    min-height:
        62px;

    padding:
        0 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    border:
        0;

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.2px;

    transition:
        background .25s ease,
        color .25s ease,
        opacity .25s ease;
}


.dashboard-housing-current-actions button span,
.dashboard-housing-empty-browse span {
    font-size:
        19px;

    font-weight:
        normal;
}


.dashboard-housing-browse-button {
    border-right:
        1px solid
        rgba(241, 221, 194, .14) !important;

    background:
        rgba(241, 221, 194, .04);
}


.dashboard-housing-browse-button:hover {
    background:
        var(--ink-light);

    color:
        var(--sand);
}


.dashboard-housing-leave-button {
    background:
        rgba(168, 70, 34, .20);
}


.dashboard-housing-leave-button:hover {
    background:
        var(--rust);
}


.dashboard-housing-empty-browse {
    width:
        min(100%, 340px);

    margin-top:
        22px;

    border:
        1px solid
        rgba(96, 54, 31, .28);

    background:
        var(--rust);
}


.dashboard-housing-empty-browse:hover {
    background:
        var(--terracotta);
}


/* ========================================
   AVISO DA SAÍDA
======================================== */

.dashboard-housing-leave-note {
    margin:
        0 !important;

    padding:
        17px 24px;

    background:
        rgba(7, 27, 33, .44);

    color:
        rgba(241, 221, 194, .52) !important;

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px !important;

    line-height:
        1.7 !important;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {

    .dashboard-housing-current-data {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dashboard-housing-current-data > div:last-child {
        grid-column:
            1 / -1;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 680px) {

    .dashboard-housing-current-data {
        grid-template-columns:
            1fr;
    }


    .dashboard-housing-current-data > div:last-child {
        grid-column:
            auto;
    }


    .dashboard-housing-current-actions {
        grid-template-columns:
            1fr;
    }


    .dashboard-housing-browse-button {
        border-right:
            0 !important;

        border-bottom:
            1px solid
            rgba(241, 221, 194, .14) !important;
    }


    .dashboard-housing-current-actions button {
        min-height:
            68px;
    }

}


/* ========================================
   GARANTIR ELEMENTOS OCULTOS
======================================== */

.dashboard-housing-modal[hidden],
.dashboard-housing-gallery-modal[hidden],
.dashboard-housing-message[hidden],
.dashboard-housing-empty[hidden] {
    display:
        none !important;
}

/* ========================================
   ETAPA 12 — PETS E ADOÇÃO
======================================== */

.dashboard-pets,
.admin-pets-panel {
    margin: 54px 0;
}

.dashboard-pets-message[hidden],
.dashboard-pets-empty[hidden],
.dashboard-pets-modal[hidden],
.admin-pets-list-empty[hidden] {
    display: none !important;
}


/* ========================================
   DASHBOARD — CABEÇALHO
======================================== */

.dashboard-pets {
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(241, 221, 194, .28);
}

.dashboard-pets-heading {
    padding: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 50px;
    align-items: end;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-pets-heading > div > span,
.dashboard-pets-character-selector > span,
.dashboard-pets-block-heading > div > span {
    display: block;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
}

.dashboard-pets-heading h2 {
    margin: 17px 0;
    color: var(--ink);
    font-size: clamp(40px, 6vw, 68px);
    font-weight: normal;
    line-height: .94;
}

.dashboard-pets-heading p {
    max-width: 720px;
    color: rgba(16, 42, 51, .72);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.8;
}

.dashboard-pets-character-selector {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.dashboard-pets-character-selector select {
    width: 100%;
    min-height: 60px;
    padding: 0 17px;
    border: 1px solid rgba(96, 54, 31, .28);
    border-radius: 0;
    outline: none;
    background: rgba(255, 255, 255, .34);
    color: var(--ink);
    font-family: Arial, sans-serif;
    font-size: 12px;
}


/* ========================================
   DASHBOARD — MENSAGENS E RESUMO
======================================== */

.dashboard-pets-message {
    margin: 24px 44px 0;
    padding: 18px 20px;
    border: 1px solid rgba(96, 54, 31, .22);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
}

.dashboard-pets-message.success {
    background: rgba(23, 59, 69, .92);
    color: var(--cream);
}

.dashboard-pets-message.error {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-pets-message.info {
    background: var(--sand);
    color: var(--ink);
}

.dashboard-pets-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-pets-summary article {
    min-height: 145px;
    padding: 27px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-pets-summary article:last-child {
    border-right: 0;
}

.dashboard-pets-summary span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2.5px;
}

.dashboard-pets-summary strong {
    margin: 20px 0 8px;
    color: var(--ink);
    font-size: clamp(20px, 2.4vw, 34px);
    font-weight: normal;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.dashboard-pets-summary p {
    color: rgba(16, 42, 51, .58);
    font-family: Arial, sans-serif;
    font-size: 10px;
}


/* ========================================
   DASHBOARD — BLOCOS E CARDS
======================================== */

.dashboard-pets-block {
    padding: 44px;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-pets-block.catalog {
    border-bottom: 0;
    background: var(--ink);
}

.dashboard-pets-block-heading {
    margin-bottom: 28px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px;
}

.dashboard-pets-block-heading h3 {
    margin-top: 10px;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: normal;
}

.dashboard-pets-block.catalog .dashboard-pets-block-heading h3 {
    color: var(--cream);
}

.dashboard-pets-block-heading > p {
    max-width: 460px;
    color: rgba(241, 221, 194, .63);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
    text-align: right;
}

.dashboard-pets-owned-grid,
.dashboard-pets-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-pet-card,
.dashboard-pet-catalog-card {
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(255, 255, 255, .30);
}

.dashboard-pet-catalog-card {
    border-color: rgba(241, 221, 194, .15);
    background: rgba(241, 221, 194, .04);
    color: var(--cream);
}

.dashboard-pet-catalog-card.inactive {
    opacity: .55;
}

.dashboard-pet-card-heading,
.dashboard-pet-catalog-heading {
    padding: 26px;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-pet-catalog-heading {
    border-color: rgba(241, 221, 194, .13);
}

.dashboard-pet-card-heading span,
.dashboard-pet-catalog-heading span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2.5px;
}

.dashboard-pet-catalog-heading span {
    color: var(--sand);
}

.dashboard-pet-card-heading h4,
.dashboard-pet-catalog-heading h4 {
    margin-top: 12px;
    color: var(--ink);
    font-size: 31px;
    font-weight: normal;
}

.dashboard-pet-catalog-heading h4 {
    color: var(--cream);
}

.dashboard-pet-card-data,
.dashboard-pet-catalog-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-pet-card-data > div,
.dashboard-pet-catalog-values > div {
    min-height: 90px;
    padding: 18px;
    border-right: 1px solid rgba(96, 54, 31, .15);
    border-bottom: 1px solid rgba(96, 54, 31, .15);
}

.dashboard-pet-catalog-values > div {
    border-color: rgba(241, 221, 194, .12);
}

.dashboard-pet-card-data > div:nth-child(even),
.dashboard-pet-catalog-values > div:nth-child(even) {
    border-right: 0;
}

.dashboard-pet-card-data span,
.dashboard-pet-catalog-values span {
    display: block;
    margin-bottom: 10px;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
}

.dashboard-pet-catalog-values span {
    color: var(--sand);
}

.dashboard-pet-card-data strong,
.dashboard-pet-catalog-values strong {
    color: var(--ink);
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.5;
}

.dashboard-pet-catalog-values strong {
    color: var(--cream);
}

.dashboard-pet-boarding-note,
.dashboard-pet-catalog-note {
    padding: 18px 22px;
    color: rgba(16, 42, 51, .70);
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.7;
}

.dashboard-pet-catalog-note {
    color: rgba(241, 221, 194, .62);
}

.dashboard-pet-rehome-button,
.dashboard-pet-catalog-card > button {
    width: 100%;
    min-height: 58px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-top: 1px solid rgba(96, 54, 31, .18);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.3px;
}

.dashboard-pet-catalog-card > button {
    border-color: rgba(241, 221, 194, .14);
    color: var(--cream);
}

.dashboard-pet-rehome-button:hover {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-pet-catalog-card > button:hover:not(:disabled) {
    background: var(--rust);
}

.dashboard-pet-catalog-card > button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.dashboard-pets-empty {
    padding: 36px;
    border: 1px dashed rgba(96, 54, 31, .25);
    text-align: center;
}

.dashboard-pets-empty > span {
    color: var(--rust);
    font-size: 30px;
}

.dashboard-pets-empty h3 {
    margin: 15px 0 8px;
    color: var(--ink);
    font-size: 27px;
    font-weight: normal;
}

.dashboard-pets-empty p {
    color: rgba(16, 42, 51, .60);
    font-family: Arial, sans-serif;
    font-size: 11px;
}


/* ========================================
   DASHBOARD — MODAL
======================================== */

.dashboard-pets-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.dashboard-pets-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 27, 33, .82);
    backdrop-filter: blur(8px);
}

.dashboard-pets-modal-panel {
    position: relative;
    z-index: 1;
    width: min(650px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 44px;
    background: var(--cream);
    color: var(--ink);
}

.dashboard-pets-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 28px;
}

.dashboard-pets-modal-kicker {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}

.dashboard-pets-modal-panel h2 {
    margin: 15px 0 8px;
    font-size: clamp(38px, 6vw, 58px);
    font-weight: normal;
}

.dashboard-pets-modal-character {
    color: rgba(16, 42, 51, .68);
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.dashboard-pets-name-field {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-pets-name-field span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.dashboard-pets-name-field input {
    min-height: 58px;
    padding: 0 17px;
    border: 1px solid rgba(96, 54, 31, .28);
    border-radius: 0;
    outline: none;
    background: rgba(255, 255, 255, .42);
    color: var(--ink);
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.dashboard-pets-modal-costs {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid rgba(96, 54, 31, .20);
}

.dashboard-pets-modal-costs > div {
    min-height: 105px;
    padding: 20px;
    border-right: 1px solid rgba(96, 54, 31, .18);
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-pets-modal-costs > div:nth-child(even) {
    border-right: 0;
}

.dashboard-pets-modal-costs span {
    display: block;
    margin-bottom: 14px;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
}

.dashboard-pets-modal-costs strong {
    font-size: 23px;
    font-weight: normal;
}

.dashboard-pets-modal-note {
    margin-top: 20px;
    padding: 18px;
    background: rgba(168, 70, 34, .10);
    color: rgba(16, 42, 51, .72);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
}

.dashboard-pets-modal-confirm {
    width: 100%;
    min-height: 62px;
    margin-top: 24px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: var(--rust);
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.dashboard-pets-modal-confirm:disabled {
    opacity: .55;
    cursor: wait;
}


/* ========================================
   ADMIN — PAINEL DE PETS
======================================== */

.admin-pets-panel {
    overflow: hidden;
    border: 1px solid rgba(223, 192, 155, .18);
    background: var(--ink);
    color: var(--cream);
}

.admin-pets-heading {
    padding: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 50px;
    align-items: end;
    border-bottom: 1px solid rgba(223, 192, 155, .14);
}

.admin-pets-heading > div:first-child > span,
.admin-pets-settings-heading > div > span,
.admin-pets-weekly-heading > div > span,
.admin-pets-list-heading span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
}

.admin-pets-heading h2,
.admin-pets-settings-heading h3,
.admin-pets-weekly-heading h3,
.admin-pets-list-heading h3 {
    margin: 14px 0;
    color: var(--cream);
    font-size: clamp(34px, 5vw, 54px);
    font-weight: normal;
    line-height: 1;
}

.admin-pets-heading p,
.admin-pets-weekly-heading p {
    color: rgba(241, 221, 194, .62);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.8;
}

.admin-pets-heading-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid rgba(223, 192, 155, .16);
}

.admin-pets-heading-summary > div {
    min-height: 120px;
    padding: 22px;
    border-right: 1px solid rgba(223, 192, 155, .14);
}

.admin-pets-heading-summary > div:last-child {
    border-right: 0;
}

.admin-pets-heading-summary span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
}

.admin-pets-heading-summary strong {
    display: block;
    margin-top: 20px;
    font-size: 36px;
    font-weight: normal;
}

.admin-pets-settings,
.admin-pets-weekly,
.admin-pets-list {
    border-bottom: 1px solid rgba(223, 192, 155, .14);
}

.admin-pets-list {
    border-bottom: 0;
}

.admin-pets-settings-heading,
.admin-pets-weekly-heading,
.admin-pets-list-heading {
    padding: 34px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 35px;
    align-items: end;
    border-bottom: 1px solid rgba(223, 192, 155, .14);
}

.admin-pets-list-heading {
    grid-template-columns: 1fr;
}

.admin-pets-settings-heading h3,
.admin-pets-weekly-heading h3,
.admin-pets-list-heading h3 {
    font-size: clamp(29px, 4vw, 43px);
}

.admin-pets-settings-heading label,
.admin-pets-weekly-heading label {
    display: flex;
    flex-direction: column;
    gap: 11px;
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}

.admin-pets-settings-heading label > div,
.admin-pet-setting-card label > div {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
}

.admin-pets-settings-heading small,
.admin-pet-setting-card small {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(223, 192, 155, .22);
    border-right: 0;
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 8px;
}

.admin-pets-settings input,
.admin-pets-weekly-heading input {
    min-height: 55px;
    padding: 0 15px;
    border: 1px solid rgba(223, 192, 155, .22);
    border-radius: 0;
    outline: none;
    background: rgba(241, 221, 194, .06);
    color: var(--cream);
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.admin-pets-weekly-heading input {
    color-scheme: dark;
}

.admin-pets-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-pet-setting-card {
    padding: 25px;
    border-right: 1px solid rgba(223, 192, 155, .13);
    border-bottom: 1px solid rgba(223, 192, 155, .13);
}

.admin-pet-setting-card.inactive {
    opacity: .58;
}

.admin-pet-setting-heading span,
.admin-pet-setting-card label > span {
    display: block;
    margin-bottom: 10px;
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
}

.admin-pet-setting-heading h4 {
    margin-bottom: 20px;
    font-size: 27px;
    font-weight: normal;
}

.admin-pet-setting-card label {
    display: block;
    margin-top: 16px;
}

.admin-pet-active-toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: rgba(241, 221, 194, .70);
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.admin-pet-active-toggle input {
    width: 17px;
    min-height: 17px;
}

.admin-pets-save-settings,
.admin-pets-weekly-button {
    width: 100%;
    min-height: 65px;
    padding: 0 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: var(--rust);
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}

.admin-pets-save-settings:disabled,
.admin-pets-weekly-button:disabled {
    opacity: .52;
    cursor: not-allowed;
}

.admin-pets-weekly-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-pets-weekly-summary > div {
    min-height: 130px;
    padding: 23px;
    border-right: 1px solid rgba(223, 192, 155, .13);
    border-bottom: 1px solid rgba(223, 192, 155, .13);
}

.admin-pets-weekly-summary span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
    line-height: 1.5;
}

.admin-pets-weekly-summary strong {
    display: block;
    margin-top: 22px;
    font-size: clamp(20px, 2.6vw, 34px);
    font-weight: normal;
    overflow-wrap: anywhere;
}

.admin-pets-weekly-progress {
    min-height: 64px;
    padding: 20px 38px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(223, 192, 155, .13);
    color: rgba(241, 221, 194, .66);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
}

.admin-pets-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-pet-list-card {
    min-height: 200px;
    padding: 26px;
    border-right: 1px solid rgba(223, 192, 155, .13);
    border-bottom: 1px solid rgba(223, 192, 155, .13);
}

.admin-pet-list-card > span,
.admin-pet-list-card > div > span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
}

.admin-pet-list-card h4 {
    margin: 12px 0 6px;
    font-size: 29px;
    font-weight: normal;
}

.admin-pet-list-card p {
    color: rgba(241, 221, 194, .64);
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.admin-pet-list-card > div {
    margin-top: 26px;
}

.admin-pet-list-card > div strong {
    display: block;
    margin-top: 10px;
    font-size: 23px;
    font-weight: normal;
}

.admin-pet-list-card > small {
    display: block;
    margin-top: 15px;
    color: var(--clay);
    font-family: Arial, sans-serif;
    font-size: 9px;
}

.admin-pets-list-empty {
    padding: 35px;
    color: rgba(241, 221, 194, .60);
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-align: center;
}


/* ========================================
   RESPONSIVO
======================================== */

@media (max-width: 1100px) {
    .dashboard-pets-summary,
    .dashboard-pets-owned-grid,
    .dashboard-pets-catalog-grid,
    .admin-pets-settings-grid,
    .admin-pets-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-pets-weekly-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-pets-weekly-summary > div:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .dashboard-pets-heading,
    .admin-pets-heading,
    .admin-pets-settings-heading,
    .admin-pets-weekly-heading {
        grid-template-columns: 1fr;
    }

    .dashboard-pets-block-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-pets-block-heading > p {
        text-align: left;
    }
}

@media (max-width: 650px) {
    .dashboard-pets-heading,
    .dashboard-pets-block,
    .admin-pets-heading,
    .admin-pets-settings-heading,
    .admin-pets-weekly-heading,
    .admin-pets-list-heading {
        padding: 28px 20px;
    }

    .dashboard-pets-summary,
    .dashboard-pets-owned-grid,
    .dashboard-pets-catalog-grid,
    .admin-pets-settings-grid,
    .admin-pets-list-grid,
    .admin-pets-heading-summary,
    .admin-pets-weekly-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-pets-summary article,
    .admin-pets-heading-summary > div,
    .admin-pets-weekly-summary > div {
        border-right: 0;
        border-bottom: 1px solid rgba(96, 54, 31, .16);
    }

    .admin-pets-heading-summary > div,
    .admin-pets-weekly-summary > div {
        border-color: rgba(223, 192, 155, .13);
    }

    .admin-pets-weekly-summary > div:last-child {
        grid-column: auto;
    }

    .dashboard-pets-modal-panel {
        padding: 38px 20px 24px;
    }

    .dashboard-pets-modal-costs {
        grid-template-columns: 1fr;
    }

    .dashboard-pets-modal-costs > div {
        border-right: 0;
    }

    .admin-pets-weekly-progress,
    .admin-pets-save-settings,
    .admin-pets-weekly-button {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ========================================
   ETAPA 12 CORRIGIDA — IMAGENS DOS PETS
   E CAVALO GRATUITO DE HERANÇA
======================================== */

.dashboard-pet-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
    background: rgba(16, 42, 51, .08);
}

.dashboard-pet-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.dashboard-pet-card-image.empty {
    color: var(--rust);
    font-size: 38px;
}

.dashboard-pet-catalog-note.benefit {
    background: rgba(168, 70, 34, .22);
    color: var(--sand);
    font-weight: 700;
}

.dashboard-pets-image-field {
    margin-top: 24px;
    padding: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 20px;
    align-items: center;
    border: 1px solid rgba(96, 54, 31, .20);
    background: rgba(255, 255, 255, .30);
}

.dashboard-pets-image-field > div:first-child > span {
    display: block;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.dashboard-pets-image-field > div:first-child > p {
    margin-top: 8px;
    color: rgba(16, 42, 51, .62);
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.6;
}

.dashboard-pets-image-upload {
    min-height: 48px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96, 54, 31, .28);
    background: var(--ink);
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.dashboard-pets-image-upload:hover {
    background: var(--rust);
}

.dashboard-pets-image-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dashboard-pets-image-preview {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 230px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(96, 54, 31, .27);
    background: rgba(16, 42, 51, .06);
}

.dashboard-pets-image-preview img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    display: block;
    object-fit: cover;
}

.dashboard-pets-image-preview.empty {
    color: var(--rust);
    text-align: center;
}

.dashboard-pets-image-preview.empty span {
    display: block;
    font-size: 34px;
}

.dashboard-pets-image-preview.empty p {
    margin-top: 12px;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 2.5px;
}

.dashboard-pets-modal-note.benefit {
    background: var(--ink);
    color: var(--cream);
}

.admin-pet-list-image {
    width: calc(100% + 52px);
    aspect-ratio: 4 / 3;
    margin: -26px -26px 24px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-bottom: 1px solid rgba(223, 192, 155, .13);
    background: rgba(241, 221, 194, .05);
}

.admin-pet-list-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.admin-pet-list-image.empty {
    color: var(--sand);
    font-size: 34px;
}

.admin-pet-benefit-badge {
    display: inline-flex !important;
    width: auto;
    margin-top: 15px !important;
    padding: 8px 10px;
    background: var(--rust);
    color: var(--cream);
    font-family: Arial, sans-serif;
    font-size: 7px !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
}

@media (max-width: 650px) {
    .dashboard-pets-image-field {
        grid-template-columns: 1fr;
    }

    .dashboard-pets-image-upload {
        width: 100%;
    }

    .dashboard-pets-image-preview {
        grid-column: auto;
        min-height: 190px;
    }
}

/* ========================================
   ETAPA 13A — ABAS DO DASHBOARD
======================================== */

.dashboard-page [data-dashboard-view][hidden] {
    display: none !important;
}

.dashboard-system-navigation {
    margin: 34px 0 48px;
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .22);
    background: var(--ink);
    color: var(--cream);
    scroll-margin-top: 110px;
}

.dashboard-system-navigation-heading {
    padding: 32px 38px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    border-bottom: 1px solid rgba(241, 221, 194, .13);
}

.dashboard-system-navigation-heading span {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
}

.dashboard-system-navigation-heading h2 {
    margin-top: 10px;
    color: var(--cream);
    font-size: clamp(30px, 4.5vw, 48px);
    font-weight: normal;
    line-height: 1;
}

.dashboard-system-navigation-heading p {
    max-width: 460px;
    color: rgba(241, 221, 194, .62);
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.75;
    text-align: right;
}

.dashboard-system-navigation-buttons {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.dashboard-system-tab {
    min-width: 0;
    min-height: 112px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    position: relative;
    border: 0;
    border-right: 1px solid rgba(241, 221, 194, .13);
    background: transparent;
    color: var(--cream);
    cursor: pointer;
    text-align: left;
    transition: background .22s ease, color .22s ease;
}

.dashboard-system-tab:last-child {
    border-right: 0;
}

.dashboard-system-tab small {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
}

.dashboard-system-tab > span {
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
    line-height: 1.45;
    text-transform: uppercase;
}

.dashboard-system-tab > strong {
    position: absolute;
    top: 17px;
    right: 14px;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(241, 221, 194, .10);
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 8px;
}

.dashboard-system-tab:hover,
.dashboard-system-tab.active {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-system-tab.active small,
.dashboard-system-tab.active > strong {
    color: var(--cream);
}

.dashboard-system-tab.active > strong {
    background: rgba(255, 255, 255, .14);
}

.dashboard-tab-view {
    animation: dashboardTabEntrance .24s ease;
}

@keyframes dashboardTabEntrance {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* A carteira sai do card da ficha e passa para a aba Financeiro. */
.dashboard-view-characters .dashboard-character-wallet {
    display: none !important;
}


/* ========================================
   ABA FINANCEIRO
======================================== */

.dashboard-finance-tab {
    margin: 0 0 54px;
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(241, 221, 194, .30);
}

.dashboard-finance-tab-heading {
    padding: 44px;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-finance-tab-heading span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
}

.dashboard-finance-tab-heading h2 {
    margin: 15px 0;
    color: var(--ink);
    font-size: clamp(40px, 6vw, 68px);
    font-weight: normal;
    line-height: .95;
}

.dashboard-finance-tab-heading p {
    max-width: 650px;
    color: rgba(16, 42, 51, .68);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.8;
}

.dashboard-finance-tab-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-finance-tab-summary article {
    min-height: 140px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(96, 54, 31, .16);
}

.dashboard-finance-tab-summary article:last-child {
    border-right: 0;
}

.dashboard-finance-tab-summary span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2.3px;
}

.dashboard-finance-tab-summary strong {
    margin: 18px 0 7px;
    color: var(--ink);
    font-size: clamp(22px, 3vw, 36px);
    font-weight: normal;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.dashboard-finance-tab-summary p {
    color: rgba(16, 42, 51, .58);
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.dashboard-finance-tab-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding: 34px;
}

.dashboard-finance-wallet-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .20);
    background: rgba(255, 255, 255, .24);
}

.dashboard-finance-wallet-card-heading {
    padding: 25px 27px;
    border-bottom: 1px solid rgba(96, 54, 31, .16);
}

.dashboard-finance-wallet-card-heading span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2.5px;
}

.dashboard-finance-wallet-card-heading h3 {
    margin-top: 10px;
    color: var(--ink);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: normal;
    line-height: 1;
}

.dashboard-finance-wallet-card .dashboard-character-wallet {
    display: block !important;
    margin: 0;
    border: 0;
}

.dashboard-finance-tab-empty {
    padding: 70px 30px;
    text-align: center;
}

.dashboard-finance-tab-empty[hidden] {
    display: none !important;
}

.dashboard-finance-tab-empty > span {
    color: var(--rust);
    font-size: 34px;
}

.dashboard-finance-tab-empty h3 {
    margin: 16px 0 8px;
    color: var(--ink);
    font-size: 32px;
    font-weight: normal;
}

.dashboard-finance-tab-empty p {
    color: rgba(16, 42, 51, .62);
    font-family: Arial, sans-serif;
    font-size: 11px;
}


/* ========================================
   TRANSFERÊNCIA DE DINHEIRO · PLAYER → PLAYER
======================================== */

.dashboard-money-transfer {
    margin: 0 34px 10px;
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .20);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .28),
            rgba(223, 192, 155, .18)
        );
}

.dashboard-money-transfer-heading {
    padding: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    border-bottom: 1px solid rgba(96, 54, 31, .16);
}

.dashboard-money-transfer-heading > div > span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 3px;
}

.dashboard-money-transfer-heading h3 {
    margin: 9px 0 10px;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 45px);
    font-weight: normal;
    line-height: 1;
}

.dashboard-money-transfer-heading p {
    max-width: 680px;
    color: rgba(16, 42, 51, .68);
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.8;
}

.dashboard-money-transfer-heading > strong {
    flex: 0 0 auto;
    color: rgba(168, 70, 34, .34);
    font-size: 38px;
    font-weight: normal;
    letter-spacing: 2px;
}

.dashboard-money-transfer-message {
    margin: 20px 30px 0;
    padding: 13px 15px;
    border: 1px solid rgba(16, 42, 51, .18);
    color: var(--ink);
    background: rgba(255, 255, 255, .30);
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.6;
}

.dashboard-money-transfer-message[hidden] {
    display: none !important;
}

.dashboard-money-transfer-message.success {
    border-color: rgba(38, 108, 69, .38);
    background: rgba(38, 108, 69, .08);
}

.dashboard-money-transfer-message.error {
    border-color: rgba(168, 70, 34, .42);
    background: rgba(168, 70, 34, .08);
}

.dashboard-money-transfer-form {
    padding: 28px 30px;
    display: grid;
    grid-template-columns: 1.15fr 1.15fr .8fr auto;
    gap: 16px;
    align-items: end;
}

.dashboard-money-transfer-form label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-money-transfer-form label > span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2.4px;
}

.dashboard-money-transfer-form select,
.dashboard-money-transfer-form input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(96, 54, 31, .24);
    outline: 0;
    background: rgba(241, 221, 194, .62);
    color: var(--ink);
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.dashboard-money-transfer-form select:focus,
.dashboard-money-transfer-form input:focus {
    border-color: var(--rust);
}

.dashboard-money-transfer-form select:disabled,
.dashboard-money-transfer-form input:disabled {
    opacity: .58;
    cursor: not-allowed;
}

.dashboard-money-transfer-form small {
    min-height: 26px;
    color: rgba(16, 42, 51, .58);
    font-family: Arial, sans-serif;
    font-size: 8px;
    line-height: 1.5;
}

.dashboard-money-transfer-form button {
    min-height: 50px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 0;
    background: var(--ink);
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.8px;
    white-space: nowrap;
    transition: background .2s ease, opacity .2s ease;
}

.dashboard-money-transfer-form button:hover:not(:disabled) {
    background: var(--rust);
}

.dashboard-money-transfer-form button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.dashboard-money-transfer-form button span {
    font-size: 18px;
}

.dashboard-money-transfer-preview {
    margin: 0 30px 30px;
    min-height: 58px;
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    border-top: 1px solid rgba(96, 54, 31, .16);
    border-bottom: 1px solid rgba(96, 54, 31, .16);
    color: rgba(16, 42, 51, .66);
    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.6;
}

.dashboard-money-transfer-preview > span {
    color: var(--ink);
}

.dashboard-money-transfer-preview > strong {
    color: var(--rust);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: normal;
}

.dashboard-money-transfer-preview > small {
    width: 100%;
    color: rgba(16, 42, 51, .52);
    font-size: 8px;
}

@media (max-width: 1120px) {
    .dashboard-money-transfer-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-money-transfer-form button {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .dashboard-money-transfer {
        margin: 0 20px 10px;
    }

    .dashboard-money-transfer-heading {
        padding: 24px 20px;
    }

    .dashboard-money-transfer-heading > strong {
        display: none;
    }

    .dashboard-money-transfer-form {
        padding: 22px 20px;
        grid-template-columns: 1fr;
    }

    .dashboard-money-transfer-preview,
    .dashboard-money-transfer-message {
        margin-left: 20px;
        margin-right: 20px;
    }
}


/* ========================================
   MERCADO E INVENTÁRIO — PREPARAÇÃO
======================================== */

.dashboard-coming-tab {
    margin-bottom: 54px;
    min-height: 520px;
    padding: clamp(44px, 7vw, 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(96, 54, 31, .22);
    background: linear-gradient(135deg, rgba(241, 221, 194, .55), rgba(216, 178, 135, .42));
}

.dashboard-coming-tab > span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
}

.dashboard-coming-tab h2 {
    max-width: 800px;
    margin: 18px 0;
    color: var(--ink);
    font-size: clamp(48px, 8vw, 88px);
    font-weight: normal;
    line-height: .92;
}

.dashboard-coming-tab > p {
    max-width: 680px;
    color: rgba(16, 42, 51, .70);
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.8;
}

.dashboard-coming-tab > div {
    width: min(360px, 100%);
    margin-top: 40px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--ink);
    color: var(--cream);
}

.dashboard-coming-tab small {
    color: var(--sand);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 2.5px;
}

.dashboard-coming-tab strong {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
}


/* ========================================
   RESPONSIVO
======================================== */

@media (max-width: 1120px) {
    .dashboard-system-navigation-buttons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-system-tab:nth-child(4) {
        border-right: 0;
    }

    .dashboard-system-tab:nth-child(-n + 4) {
        border-bottom: 1px solid rgba(241, 221, 194, .13);
    }

    .dashboard-finance-tab-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .dashboard-system-navigation-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-system-navigation-heading p {
        text-align: left;
    }

    .dashboard-finance-tab-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-finance-tab-summary article:nth-child(2) {
        border-right: 0;
    }

    .dashboard-finance-tab-summary article:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(96, 54, 31, .16);
    }
}

@media (max-width: 650px) {
    .dashboard-system-navigation {
        margin-top: 22px;
    }

    .dashboard-system-navigation-heading {
        padding: 25px 20px;
    }

    .dashboard-system-navigation-buttons {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .dashboard-system-tab {
        flex: 0 0 142px;
        min-height: 98px;
        scroll-snap-align: start;
        border-right: 1px solid rgba(241, 221, 194, .13) !important;
        border-bottom: 0 !important;
    }

    .dashboard-finance-tab-heading {
        padding: 30px 20px;
    }

    .dashboard-finance-tab-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-finance-tab-summary article,
    .dashboard-finance-tab-summary article:nth-child(2) {
        min-height: 110px;
        border-right: 0;
        border-bottom: 1px solid rgba(96, 54, 31, .16);
    }

    .dashboard-finance-tab-grid {
        padding: 20px;
    }

    .dashboard-coming-tab {
        min-height: 430px;
        padding: 50px 22px;
    }
}


/* ========================================
   ETAPA 13B — MERCADO E INVENTÁRIO
======================================== */

.dashboard-market[hidden],
.dashboard-inventory[hidden],
.dashboard-market-empty[hidden],
.dashboard-inventory-empty[hidden],
.dashboard-market-modal[hidden],
.dashboard-market-message[hidden],
.dashboard-inventory-message[hidden],
.admin-market-empty[hidden] {
    display: none !important;
}

.dashboard-market,
.dashboard-inventory {
    margin: 40px 0;
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(241, 221, 194, .28);
}

.dashboard-market-heading,
.dashboard-inventory-heading {
    padding: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 50px;
    align-items: end;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-market-heading > div > span,
.dashboard-inventory-heading > div > span,
.dashboard-market-character-selector > span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
}

.dashboard-market-heading h2,
.dashboard-inventory-heading h2 {
    margin: 16px 0;
    color: var(--ink);
    font-size: clamp(40px, 6vw, 68px);
    font-weight: normal;
    line-height: .94;
}

.dashboard-market-heading p,
.dashboard-inventory-heading p {
    max-width: 700px;
    color: rgba(16, 42, 51, .68);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.8;
}

.dashboard-market-character-selector {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.dashboard-market-character-selector select,
.dashboard-market-filters input,
.dashboard-market-filters select,
.dashboard-inventory-filters input,
.dashboard-inventory-filters select {
    width: 100%;
    min-height: 58px;
    padding: 0 16px;
    border: 1px solid rgba(96, 54, 31, .27);
    border-radius: 0;
    outline: none;
    background: rgba(255,255,255,.34);
    color: var(--ink);
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.dashboard-market-message,
.dashboard-inventory-message {
    margin: 24px 44px 0;
    padding: 18px 20px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
}
.dashboard-market-message.success,
.dashboard-inventory-message.success { background: var(--ink); color: var(--cream); }
.dashboard-market-message.error,
.dashboard-inventory-message.error { background: var(--rust); color: var(--cream); }
.dashboard-market-message.info,
.dashboard-inventory-message.info { background: var(--sand); color: var(--ink); }

.dashboard-market-summary,
.dashboard-inventory-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-market-summary article,
.dashboard-inventory-summary article {
    min-height: 135px;
    padding: 25px;
    border-right: 1px solid rgba(96, 54, 31, .16);
}

.dashboard-market-summary article:last-child,
.dashboard-inventory-summary article:last-child { border-right: 0; }
.dashboard-market-summary span,
.dashboard-inventory-summary span { color: var(--rust); font: 700 7px Arial, sans-serif; letter-spacing: 2px; }
.dashboard-market-summary strong,
.dashboard-inventory-summary strong { display: block; margin: 20px 0 8px; color: var(--ink); font-size: clamp(20px,2.4vw,33px); font-weight: normal; overflow-wrap: anywhere; }
.dashboard-market-summary p,
.dashboard-inventory-summary p { color: rgba(16,42,51,.58); font: 10px Arial, sans-serif; }

.dashboard-market-filters,
.dashboard-inventory-filters {
    padding: 28px 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    background: var(--ink);
}
.dashboard-market-filters label,
.dashboard-inventory-filters label { display: flex; flex-direction: column; gap: 10px; color: var(--sand); font: 700 7px Arial, sans-serif; letter-spacing: 2px; }
.dashboard-market-filters input,
.dashboard-market-filters select,
.dashboard-inventory-filters input,
.dashboard-inventory-filters select { border-color: rgba(241,221,194,.20); background: rgba(241,221,194,.06); color: var(--cream); color-scheme: dark; }

.dashboard-market-grid,
.dashboard-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-market-card,
.dashboard-inventory-card {
    border-right: 1px solid rgba(96,54,31,.16);
    border-bottom: 1px solid rgba(96,54,31,.16);
    background: rgba(255,255,255,.25);
}
.dashboard-market-card-heading,
.dashboard-inventory-card-heading { padding: 25px; border-bottom: 1px solid rgba(96,54,31,.15); }
.dashboard-market-card-heading span,
.dashboard-inventory-card-heading span { color: var(--rust); font: 700 7px Arial,sans-serif; letter-spacing: 2.5px; }
.dashboard-market-card-heading h3,
.dashboard-inventory-card-heading h3 { margin: 12px 0 7px; color: var(--ink); font-size: 30px; font-weight: normal; }
.dashboard-market-card-heading p { color: rgba(16,42,51,.58); font: 10px Arial,sans-serif; }
.dashboard-inventory-card-heading strong { display: inline-block; margin-top: 5px; color: var(--rust); font: 700 8px Arial,sans-serif; letter-spacing: 2px; }
.dashboard-market-card-data,
.dashboard-inventory-card-data { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-market-card-data > div,
.dashboard-inventory-card-data > div { min-height: 86px; padding: 18px; border-right: 1px solid rgba(96,54,31,.14); border-bottom: 1px solid rgba(96,54,31,.14); }
.dashboard-market-card-data > div:nth-child(even),
.dashboard-inventory-card-data > div:nth-child(even) { border-right: 0; }
.dashboard-market-card-data span,
.dashboard-inventory-card-data span { display:block; margin-bottom:10px; color:var(--rust); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.dashboard-market-card-data strong,
.dashboard-inventory-card-data strong { color:var(--ink); font:normal 11px Arial,sans-serif; line-height:1.5; }
.dashboard-market-card-detail,
.dashboard-inventory-card-note { min-height: 60px; padding: 18px 22px; color: rgba(16,42,51,.66); font: 10px/1.7 Arial,sans-serif; }
.dashboard-market-card > button,
.dashboard-inventory-card > button { width:100%; min-height:58px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border:0; border-top:1px solid rgba(96,54,31,.16); background:transparent; color:var(--ink); cursor:pointer; font:700 8px Arial,sans-serif; letter-spacing:2.3px; }
.dashboard-market-card > button:hover:not(:disabled),
.dashboard-inventory-card > button:hover:not(:disabled) { background:var(--rust); color:var(--cream); }
.dashboard-market-card > button:disabled { opacity:.48; cursor:not-allowed; }
.dashboard-inventory-card.em_uso { background: rgba(210,123,80,.14); }
.dashboard-inventory-card.utilizado,
.dashboard-inventory-card.esgotado,
.dashboard-inventory-card.vencido { opacity:.65; }

.dashboard-market-empty,
.dashboard-inventory-empty { padding:55px; text-align:center; }
.dashboard-market-empty > span,
.dashboard-inventory-empty > span { color:var(--rust); font-size:32px; }
.dashboard-market-empty h3,
.dashboard-inventory-empty h3 { margin:15px 0 8px; color:var(--ink); font-size:31px; font-weight:normal; }
.dashboard-market-empty p,
.dashboard-inventory-empty p { color:rgba(16,42,51,.60); font:11px Arial,sans-serif; }

.dashboard-market-modal { position:fixed; inset:0; z-index:2200; display:grid; place-items:center; padding:20px; }
.dashboard-market-modal-backdrop { position:absolute; inset:0; background:rgba(7,27,33,.84); backdrop-filter:blur(8px); }
.dashboard-market-modal-panel { position:relative; z-index:1; width:min(650px,100%); max-height:calc(100vh - 40px); overflow-y:auto; padding:44px; background:var(--cream); color:var(--ink); }
.dashboard-market-modal-close { position:absolute; top:15px; right:17px; width:42px; height:42px; border:0; background:transparent; color:var(--ink); cursor:pointer; font-size:28px; }
.dashboard-market-modal-kicker { color:var(--rust); font:700 8px Arial,sans-serif; letter-spacing:3px; }
.dashboard-market-modal-panel h2 { margin:14px 0 7px; font-size:clamp(38px,6vw,58px); font-weight:normal; }
.dashboard-market-modal-panel > div > p { color:rgba(16,42,51,.62); font:11px Arial,sans-serif; }
.dashboard-market-modal-character { margin-top:25px; padding:18px; background:rgba(96,54,31,.08); }
.dashboard-market-modal-character span { display:block; color:var(--rust); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.dashboard-market-modal-character strong { display:block; margin:8px 0; font-size:23px; font-weight:normal; }
.dashboard-market-modal-character small { font:10px Arial,sans-serif; }
.dashboard-market-modal-values { margin-top:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid rgba(96,54,31,.20); }
.dashboard-market-modal-values > div { min-height:95px; padding:19px; border-right:1px solid rgba(96,54,31,.17); border-bottom:1px solid rgba(96,54,31,.17); }
.dashboard-market-modal-values > div:nth-child(even) { border-right:0; }
.dashboard-market-modal-values span,
.dashboard-market-modal-total span { display:block; margin-bottom:12px; color:var(--rust); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.dashboard-market-modal-values strong { font-size:22px; font-weight:normal; }
.dashboard-market-modal-total { padding:22px; background:var(--ink); color:var(--cream); }
.dashboard-market-modal-total strong { font-size:31px; font-weight:normal; }
.dashboard-market-modal-confirm { width:100%; min-height:62px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--rust); color:var(--cream); cursor:pointer; font:700 8px Arial,sans-serif; letter-spacing:2.5px; }

.admin-market-panel { margin:40px 0; overflow:hidden; border:1px solid rgba(223,192,155,.18); background:var(--ink); color:var(--cream); }
.admin-market-heading { padding:40px; display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:45px; align-items:end; border-bottom:1px solid rgba(223,192,155,.14); }
.admin-market-heading > div:first-child > span,
.admin-market-inventory-heading > span { color:var(--sand); font:700 8px Arial,sans-serif; letter-spacing:4px; }
.admin-market-heading h2,
.admin-market-inventory-heading h3 { margin:14px 0; font-size:clamp(34px,5vw,54px); font-weight:normal; }
.admin-market-heading p { color:rgba(241,221,194,.62); font:11px/1.8 Arial,sans-serif; }
.admin-market-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid rgba(223,192,155,.16); }
.admin-market-summary > div { min-height:115px; padding:22px; border-right:1px solid rgba(223,192,155,.14); }
.admin-market-summary > div:last-child { border-right:0; }
.admin-market-summary span { color:var(--sand); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.admin-market-summary strong { display:block; margin-top:20px; font-size:35px; font-weight:normal; }
.admin-market-settings-grid,
.admin-market-inventory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.admin-market-setting-card,
.admin-market-inventory-card { padding:25px; border-right:1px solid rgba(223,192,155,.13); border-bottom:1px solid rgba(223,192,155,.13); }
.admin-market-setting-card.inactive { opacity:.55; }
.admin-market-setting-heading span,
.admin-market-setting-card label > span,
.admin-market-inventory-card > span,
.admin-market-inventory-card > div > span { color:var(--sand); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.admin-market-setting-heading h4,
.admin-market-inventory-card h4 { margin:10px 0 5px; font-size:27px; font-weight:normal; }
.admin-market-setting-heading small { color:rgba(241,221,194,.50); font:9px Arial,sans-serif; }
.admin-market-setting-card label { display:block; margin-top:15px; }
.admin-market-setting-card input { width:100%; min-height:50px; padding:0 13px; border:1px solid rgba(223,192,155,.21); border-radius:0; background:rgba(241,221,194,.06); color:var(--cream); }
.admin-market-setting-card label > div { display:grid; grid-template-columns:52px minmax(0,1fr); }
.admin-market-setting-card label > div small { display:flex; align-items:center; justify-content:center; border:1px solid rgba(223,192,155,.21); border-right:0; color:var(--sand); font:8px Arial,sans-serif; }
.admin-market-active-toggle { display:flex !important; align-items:center; gap:10px; color:rgba(241,221,194,.68); font:10px Arial,sans-serif; }
.admin-market-active-toggle input { width:17px; min-height:17px; }
.admin-market-save { width:100%; min-height:65px; padding:0 38px; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--rust); color:var(--cream); cursor:pointer; font:700 8px Arial,sans-serif; letter-spacing:3px; }
.admin-market-inventory-heading { padding:34px 40px; border-top:1px solid rgba(223,192,155,.14); border-bottom:1px solid rgba(223,192,155,.14); }
.admin-market-inventory-card p { margin-top:6px; color:rgba(241,221,194,.60); font:10px Arial,sans-serif; }
.admin-market-inventory-card > div { margin-top:18px; }
.admin-market-inventory-card > div strong { display:block; margin-top:8px; font-size:20px; font-weight:normal; }
.admin-market-empty { padding:35px; text-align:center; color:rgba(241,221,194,.60); font:11px Arial,sans-serif; }

@media (max-width:1100px) {
    .dashboard-market-summary,
    .dashboard-inventory-summary,
    .dashboard-market-grid,
    .dashboard-inventory-grid,
    .admin-market-settings-grid,
    .admin-market-inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
    .dashboard-market-heading,
    .dashboard-inventory-heading,
    .admin-market-heading { grid-template-columns:1fr; }
}
@media (max-width:650px) {
    .dashboard-market-heading,
    .dashboard-inventory-heading,
    .dashboard-market-filters,
    .dashboard-inventory-filters,
    .admin-market-heading,
    .admin-market-inventory-heading { padding:28px 20px; grid-template-columns:1fr; }
    .dashboard-market-summary,
    .dashboard-inventory-summary,
    .dashboard-market-grid,
    .dashboard-inventory-grid,
    .admin-market-settings-grid,
    .admin-market-inventory-grid,
    .admin-market-summary { grid-template-columns:1fr; }
    .dashboard-market-modal-panel { padding:38px 20px 24px; }
    .dashboard-market-modal-values { grid-template-columns:1fr; }
    .dashboard-market-modal-values > div { border-right:0; }
}


/* ========================================
   ETAPA 13B — MERCADO E INVENTÁRIO
======================================== */

.dashboard-market[hidden],
.dashboard-inventory[hidden],
.dashboard-market-empty[hidden],
.dashboard-inventory-empty[hidden],
.dashboard-market-modal[hidden],
.dashboard-market-message[hidden],
.dashboard-inventory-message[hidden],
.admin-market-empty[hidden] {
    display: none !important;
}

.dashboard-market,
.dashboard-inventory {
    margin: 40px 0;
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(241, 221, 194, .28);
}

.dashboard-market-heading,
.dashboard-inventory-heading {
    padding: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 50px;
    align-items: end;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-market-heading > div > span,
.dashboard-inventory-heading > div > span,
.dashboard-market-character-selector > span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
}

.dashboard-market-heading h2,
.dashboard-inventory-heading h2 {
    margin: 16px 0;
    color: var(--ink);
    font-size: clamp(40px, 6vw, 68px);
    font-weight: normal;
    line-height: .94;
}

.dashboard-market-heading p,
.dashboard-inventory-heading p {
    max-width: 700px;
    color: rgba(16, 42, 51, .68);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.8;
}

.dashboard-market-character-selector {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.dashboard-market-character-selector select,
.dashboard-market-filters input,
.dashboard-market-filters select,
.dashboard-inventory-filters input,
.dashboard-inventory-filters select {
    width: 100%;
    min-height: 58px;
    padding: 0 16px;
    border: 1px solid rgba(96, 54, 31, .27);
    border-radius: 0;
    outline: none;
    background: rgba(255,255,255,.34);
    color: var(--ink);
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.dashboard-market-message,
.dashboard-inventory-message {
    margin: 24px 44px 0;
    padding: 18px 20px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
}
.dashboard-market-message.success,
.dashboard-inventory-message.success { background: var(--ink); color: var(--cream); }
.dashboard-market-message.error,
.dashboard-inventory-message.error { background: var(--rust); color: var(--cream); }
.dashboard-market-message.info,
.dashboard-inventory-message.info { background: var(--sand); color: var(--ink); }

.dashboard-market-summary,
.dashboard-inventory-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-market-summary article,
.dashboard-inventory-summary article {
    min-height: 135px;
    padding: 25px;
    border-right: 1px solid rgba(96, 54, 31, .16);
}

.dashboard-market-summary article:last-child,
.dashboard-inventory-summary article:last-child { border-right: 0; }
.dashboard-market-summary span,
.dashboard-inventory-summary span { color: var(--rust); font: 700 7px Arial, sans-serif; letter-spacing: 2px; }
.dashboard-market-summary strong,
.dashboard-inventory-summary strong { display: block; margin: 20px 0 8px; color: var(--ink); font-size: clamp(20px,2.4vw,33px); font-weight: normal; overflow-wrap: anywhere; }
.dashboard-market-summary p,
.dashboard-inventory-summary p { color: rgba(16,42,51,.58); font: 10px Arial, sans-serif; }

.dashboard-market-filters,
.dashboard-inventory-filters {
    padding: 28px 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    background: var(--ink);
}
.dashboard-market-filters label,
.dashboard-inventory-filters label { display: flex; flex-direction: column; gap: 10px; color: var(--sand); font: 700 7px Arial, sans-serif; letter-spacing: 2px; }
.dashboard-market-filters input,
.dashboard-market-filters select,
.dashboard-inventory-filters input,
.dashboard-inventory-filters select { border-color: rgba(241,221,194,.20); background: rgba(241,221,194,.06); color: var(--cream); color-scheme: dark; }

.dashboard-market-grid,
.dashboard-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-market-card,
.dashboard-inventory-card {
    border-right: 1px solid rgba(96,54,31,.16);
    border-bottom: 1px solid rgba(96,54,31,.16);
    background: rgba(255,255,255,.25);
}
.dashboard-market-card-heading,
.dashboard-inventory-card-heading { padding: 25px; border-bottom: 1px solid rgba(96,54,31,.15); }
.dashboard-market-card-heading span,
.dashboard-inventory-card-heading span { color: var(--rust); font: 700 7px Arial,sans-serif; letter-spacing: 2.5px; }
.dashboard-market-card-heading h3,
.dashboard-inventory-card-heading h3 { margin: 12px 0 7px; color: var(--ink); font-size: 30px; font-weight: normal; }
.dashboard-market-card-heading p { color: rgba(16,42,51,.58); font: 10px Arial,sans-serif; }
.dashboard-inventory-card-heading strong { display: inline-block; margin-top: 5px; color: var(--rust); font: 700 8px Arial,sans-serif; letter-spacing: 2px; }
.dashboard-market-card-data,
.dashboard-inventory-card-data { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-market-card-data > div,
.dashboard-inventory-card-data > div { min-height: 86px; padding: 18px; border-right: 1px solid rgba(96,54,31,.14); border-bottom: 1px solid rgba(96,54,31,.14); }
.dashboard-market-card-data > div:nth-child(even),
.dashboard-inventory-card-data > div:nth-child(even) { border-right: 0; }
.dashboard-market-card-data span,
.dashboard-inventory-card-data span { display:block; margin-bottom:10px; color:var(--rust); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.dashboard-market-card-data strong,
.dashboard-inventory-card-data strong { color:var(--ink); font:normal 11px Arial,sans-serif; line-height:1.5; }
.dashboard-market-card-detail,
.dashboard-inventory-card-note { min-height: 60px; padding: 18px 22px; color: rgba(16,42,51,.66); font: 10px/1.7 Arial,sans-serif; }
.dashboard-market-card > button,
.dashboard-inventory-card > button { width:100%; min-height:58px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border:0; border-top:1px solid rgba(96,54,31,.16); background:transparent; color:var(--ink); cursor:pointer; font:700 8px Arial,sans-serif; letter-spacing:2.3px; }
.dashboard-market-card > button:hover:not(:disabled),
.dashboard-inventory-card > button:hover:not(:disabled) { background:var(--rust); color:var(--cream); }
.dashboard-market-card > button:disabled { opacity:.48; cursor:not-allowed; }
.dashboard-inventory-card.em_uso { background: rgba(210,123,80,.14); }
.dashboard-inventory-card.utilizado,
.dashboard-inventory-card.esgotado,
.dashboard-inventory-card.vencido { opacity:.65; }

.dashboard-market-empty,
.dashboard-inventory-empty { padding:55px; text-align:center; }
.dashboard-market-empty > span,
.dashboard-inventory-empty > span { color:var(--rust); font-size:32px; }
.dashboard-market-empty h3,
.dashboard-inventory-empty h3 { margin:15px 0 8px; color:var(--ink); font-size:31px; font-weight:normal; }
.dashboard-market-empty p,
.dashboard-inventory-empty p { color:rgba(16,42,51,.60); font:11px Arial,sans-serif; }

.dashboard-market-modal { position:fixed; inset:0; z-index:2200; display:grid; place-items:center; padding:20px; }
.dashboard-market-modal-backdrop { position:absolute; inset:0; background:rgba(7,27,33,.84); backdrop-filter:blur(8px); }
.dashboard-market-modal-panel { position:relative; z-index:1; width:min(650px,100%); max-height:calc(100vh - 40px); overflow-y:auto; padding:44px; background:var(--cream); color:var(--ink); }
.dashboard-market-modal-close { position:absolute; top:15px; right:17px; width:42px; height:42px; border:0; background:transparent; color:var(--ink); cursor:pointer; font-size:28px; }
.dashboard-market-modal-kicker { color:var(--rust); font:700 8px Arial,sans-serif; letter-spacing:3px; }
.dashboard-market-modal-panel h2 { margin:14px 0 7px; font-size:clamp(38px,6vw,58px); font-weight:normal; }
.dashboard-market-modal-panel > div > p { color:rgba(16,42,51,.62); font:11px Arial,sans-serif; }
.dashboard-market-modal-character { margin-top:25px; padding:18px; background:rgba(96,54,31,.08); }
.dashboard-market-modal-character span { display:block; color:var(--rust); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.dashboard-market-modal-character strong { display:block; margin:8px 0; font-size:23px; font-weight:normal; }
.dashboard-market-modal-character small { font:10px Arial,sans-serif; }
.dashboard-market-modal-values { margin-top:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid rgba(96,54,31,.20); }
.dashboard-market-modal-values > div { min-height:95px; padding:19px; border-right:1px solid rgba(96,54,31,.17); border-bottom:1px solid rgba(96,54,31,.17); }
.dashboard-market-modal-values > div:nth-child(even) { border-right:0; }
.dashboard-market-modal-values span,
.dashboard-market-modal-total span { display:block; margin-bottom:12px; color:var(--rust); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.dashboard-market-modal-values strong { font-size:22px; font-weight:normal; }
.dashboard-market-modal-total { padding:22px; background:var(--ink); color:var(--cream); }
.dashboard-market-modal-total strong { font-size:31px; font-weight:normal; }
.dashboard-market-modal-confirm { width:100%; min-height:62px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--rust); color:var(--cream); cursor:pointer; font:700 8px Arial,sans-serif; letter-spacing:2.5px; }

.admin-market-panel { margin:40px 0; overflow:hidden; border:1px solid rgba(223,192,155,.18); background:var(--ink); color:var(--cream); }
.admin-market-heading { padding:40px; display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:45px; align-items:end; border-bottom:1px solid rgba(223,192,155,.14); }
.admin-market-heading > div:first-child > span,
.admin-market-inventory-heading > span { color:var(--sand); font:700 8px Arial,sans-serif; letter-spacing:4px; }
.admin-market-heading h2,
.admin-market-inventory-heading h3 { margin:14px 0; font-size:clamp(34px,5vw,54px); font-weight:normal; }
.admin-market-heading p { color:rgba(241,221,194,.62); font:11px/1.8 Arial,sans-serif; }
.admin-market-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid rgba(223,192,155,.16); }
.admin-market-summary > div { min-height:115px; padding:22px; border-right:1px solid rgba(223,192,155,.14); }
.admin-market-summary > div:last-child { border-right:0; }
.admin-market-summary span { color:var(--sand); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.admin-market-summary strong { display:block; margin-top:20px; font-size:35px; font-weight:normal; }
.admin-market-settings-grid,
.admin-market-inventory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.admin-market-setting-card,
.admin-market-inventory-card { padding:25px; border-right:1px solid rgba(223,192,155,.13); border-bottom:1px solid rgba(223,192,155,.13); }
.admin-market-setting-card.inactive { opacity:.55; }
.admin-market-setting-heading span,
.admin-market-setting-card label > span,
.admin-market-inventory-card > span,
.admin-market-inventory-card > div > span { color:var(--sand); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.admin-market-setting-heading h4,
.admin-market-inventory-card h4 { margin:10px 0 5px; font-size:27px; font-weight:normal; }
.admin-market-setting-heading small { color:rgba(241,221,194,.50); font:9px Arial,sans-serif; }
.admin-market-setting-card label { display:block; margin-top:15px; }
.admin-market-setting-card input { width:100%; min-height:50px; padding:0 13px; border:1px solid rgba(223,192,155,.21); border-radius:0; background:rgba(241,221,194,.06); color:var(--cream); }
.admin-market-setting-card label > div { display:grid; grid-template-columns:52px minmax(0,1fr); }
.admin-market-setting-card label > div small { display:flex; align-items:center; justify-content:center; border:1px solid rgba(223,192,155,.21); border-right:0; color:var(--sand); font:8px Arial,sans-serif; }
.admin-market-active-toggle { display:flex !important; align-items:center; gap:10px; color:rgba(241,221,194,.68); font:10px Arial,sans-serif; }
.admin-market-active-toggle input { width:17px; min-height:17px; }
.admin-market-save { width:100%; min-height:65px; padding:0 38px; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--rust); color:var(--cream); cursor:pointer; font:700 8px Arial,sans-serif; letter-spacing:3px; }
.admin-market-inventory-heading { padding:34px 40px; border-top:1px solid rgba(223,192,155,.14); border-bottom:1px solid rgba(223,192,155,.14); }
.admin-market-inventory-card p { margin-top:6px; color:rgba(241,221,194,.60); font:10px Arial,sans-serif; }
.admin-market-inventory-card > div { margin-top:18px; }
.admin-market-inventory-card > div strong { display:block; margin-top:8px; font-size:20px; font-weight:normal; }
.admin-market-empty { padding:35px; text-align:center; color:rgba(241,221,194,.60); font:11px Arial,sans-serif; }

@media (max-width:1100px) {
    .dashboard-market-summary,
    .dashboard-inventory-summary,
    .dashboard-market-grid,
    .dashboard-inventory-grid,
    .admin-market-settings-grid,
    .admin-market-inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
    .dashboard-market-heading,
    .dashboard-inventory-heading,
    .admin-market-heading { grid-template-columns:1fr; }
}
@media (max-width:650px) {
    .dashboard-market-heading,
    .dashboard-inventory-heading,
    .dashboard-market-filters,
    .dashboard-inventory-filters,
    .admin-market-heading,
    .admin-market-inventory-heading { padding:28px 20px; grid-template-columns:1fr; }
    .dashboard-market-summary,
    .dashboard-inventory-summary,
    .dashboard-market-grid,
    .dashboard-inventory-grid,
    .admin-market-settings-grid,
    .admin-market-inventory-grid,
    .admin-market-summary { grid-template-columns:1fr; }
    .dashboard-market-modal-panel { padding:38px 20px 24px; }
    .dashboard-market-modal-values { grid-template-columns:1fr; }
    .dashboard-market-modal-values > div { border-right:0; }
}


/* ========================================
   ETAPA 13B — MERCADO E INVENTÁRIO
======================================== */

.dashboard-market[hidden],
.dashboard-inventory[hidden],
.dashboard-market-empty[hidden],
.dashboard-inventory-empty[hidden],
.dashboard-market-modal[hidden],
.dashboard-market-message[hidden],
.dashboard-inventory-message[hidden],
.admin-market-empty[hidden] {
    display: none !important;
}

.dashboard-market,
.dashboard-inventory {
    margin: 40px 0;
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(241, 221, 194, .28);
}

.dashboard-market-heading,
.dashboard-inventory-heading {
    padding: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 50px;
    align-items: end;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-market-heading > div > span,
.dashboard-inventory-heading > div > span,
.dashboard-market-character-selector > span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
}

.dashboard-market-heading h2,
.dashboard-inventory-heading h2 {
    margin: 16px 0;
    color: var(--ink);
    font-size: clamp(40px, 6vw, 68px);
    font-weight: normal;
    line-height: .94;
}

.dashboard-market-heading p,
.dashboard-inventory-heading p {
    max-width: 700px;
    color: rgba(16, 42, 51, .68);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.8;
}

.dashboard-market-character-selector {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.dashboard-market-character-selector select,
.dashboard-market-filters input,
.dashboard-market-filters select,
.dashboard-inventory-filters input,
.dashboard-inventory-filters select {
    width: 100%;
    min-height: 58px;
    padding: 0 16px;
    border: 1px solid rgba(96, 54, 31, .27);
    border-radius: 0;
    outline: none;
    background: rgba(255,255,255,.34);
    color: var(--ink);
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.dashboard-market-message,
.dashboard-inventory-message {
    margin: 24px 44px 0;
    padding: 18px 20px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
}
.dashboard-market-message.success,
.dashboard-inventory-message.success { background: var(--ink); color: var(--cream); }
.dashboard-market-message.error,
.dashboard-inventory-message.error { background: var(--rust); color: var(--cream); }
.dashboard-market-message.info,
.dashboard-inventory-message.info { background: var(--sand); color: var(--ink); }

.dashboard-market-summary,
.dashboard-inventory-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-market-summary article,
.dashboard-inventory-summary article {
    min-height: 135px;
    padding: 25px;
    border-right: 1px solid rgba(96, 54, 31, .16);
}

.dashboard-market-summary article:last-child,
.dashboard-inventory-summary article:last-child { border-right: 0; }
.dashboard-market-summary span,
.dashboard-inventory-summary span { color: var(--rust); font: 700 7px Arial, sans-serif; letter-spacing: 2px; }
.dashboard-market-summary strong,
.dashboard-inventory-summary strong { display: block; margin: 20px 0 8px; color: var(--ink); font-size: clamp(20px,2.4vw,33px); font-weight: normal; overflow-wrap: anywhere; }
.dashboard-market-summary p,
.dashboard-inventory-summary p { color: rgba(16,42,51,.58); font: 10px Arial, sans-serif; }

.dashboard-market-filters,
.dashboard-inventory-filters {
    padding: 28px 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    background: var(--ink);
}
.dashboard-market-filters label,
.dashboard-inventory-filters label { display: flex; flex-direction: column; gap: 10px; color: var(--sand); font: 700 7px Arial, sans-serif; letter-spacing: 2px; }
.dashboard-market-filters input,
.dashboard-market-filters select,
.dashboard-inventory-filters input,
.dashboard-inventory-filters select { border-color: rgba(241,221,194,.20); background: rgba(241,221,194,.06); color: var(--cream); color-scheme: dark; }

.dashboard-market-grid,
.dashboard-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-market-card,
.dashboard-inventory-card {
    border-right: 1px solid rgba(96,54,31,.16);
    border-bottom: 1px solid rgba(96,54,31,.16);
    background: rgba(255,255,255,.25);
}
.dashboard-market-card-heading,
.dashboard-inventory-card-heading { padding: 25px; border-bottom: 1px solid rgba(96,54,31,.15); }
.dashboard-market-card-heading span,
.dashboard-inventory-card-heading span { color: var(--rust); font: 700 7px Arial,sans-serif; letter-spacing: 2.5px; }
.dashboard-market-card-heading h3,
.dashboard-inventory-card-heading h3 { margin: 12px 0 7px; color: var(--ink); font-size: 30px; font-weight: normal; }
.dashboard-market-card-heading p { color: rgba(16,42,51,.58); font: 10px Arial,sans-serif; }
.dashboard-inventory-card-heading strong { display: inline-block; margin-top: 5px; color: var(--rust); font: 700 8px Arial,sans-serif; letter-spacing: 2px; }
.dashboard-market-card-data,
.dashboard-inventory-card-data { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-market-card-data > div,
.dashboard-inventory-card-data > div { min-height: 86px; padding: 18px; border-right: 1px solid rgba(96,54,31,.14); border-bottom: 1px solid rgba(96,54,31,.14); }
.dashboard-market-card-data > div:nth-child(even),
.dashboard-inventory-card-data > div:nth-child(even) { border-right: 0; }
.dashboard-market-card-data span,
.dashboard-inventory-card-data span { display:block; margin-bottom:10px; color:var(--rust); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.dashboard-market-card-data strong,
.dashboard-inventory-card-data strong { color:var(--ink); font:normal 11px Arial,sans-serif; line-height:1.5; }
.dashboard-market-card-detail,
.dashboard-inventory-card-note { min-height: 60px; padding: 18px 22px; color: rgba(16,42,51,.66); font: 10px/1.7 Arial,sans-serif; }
.dashboard-market-card > button,
.dashboard-inventory-card > button { width:100%; min-height:58px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border:0; border-top:1px solid rgba(96,54,31,.16); background:transparent; color:var(--ink); cursor:pointer; font:700 8px Arial,sans-serif; letter-spacing:2.3px; }
.dashboard-market-card > button:hover:not(:disabled),
.dashboard-inventory-card > button:hover:not(:disabled) { background:var(--rust); color:var(--cream); }
.dashboard-market-card > button:disabled { opacity:.48; cursor:not-allowed; }
.dashboard-inventory-card.em_uso { background: rgba(210,123,80,.14); }
.dashboard-inventory-card.utilizado,
.dashboard-inventory-card.esgotado,
.dashboard-inventory-card.vencido { opacity:.65; }

.dashboard-market-empty,
.dashboard-inventory-empty { padding:55px; text-align:center; }
.dashboard-market-empty > span,
.dashboard-inventory-empty > span { color:var(--rust); font-size:32px; }
.dashboard-market-empty h3,
.dashboard-inventory-empty h3 { margin:15px 0 8px; color:var(--ink); font-size:31px; font-weight:normal; }
.dashboard-market-empty p,
.dashboard-inventory-empty p { color:rgba(16,42,51,.60); font:11px Arial,sans-serif; }

.dashboard-market-modal { position:fixed; inset:0; z-index:2200; display:grid; place-items:center; padding:20px; }
.dashboard-market-modal-backdrop { position:absolute; inset:0; background:rgba(7,27,33,.84); backdrop-filter:blur(8px); }
.dashboard-market-modal-panel { position:relative; z-index:1; width:min(650px,100%); max-height:calc(100vh - 40px); overflow-y:auto; padding:44px; background:var(--cream); color:var(--ink); }
.dashboard-market-modal-close { position:absolute; top:15px; right:17px; width:42px; height:42px; border:0; background:transparent; color:var(--ink); cursor:pointer; font-size:28px; }
.dashboard-market-modal-kicker { color:var(--rust); font:700 8px Arial,sans-serif; letter-spacing:3px; }
.dashboard-market-modal-panel h2 { margin:14px 0 7px; font-size:clamp(38px,6vw,58px); font-weight:normal; }
.dashboard-market-modal-panel > div > p { color:rgba(16,42,51,.62); font:11px Arial,sans-serif; }
.dashboard-market-modal-character { margin-top:25px; padding:18px; background:rgba(96,54,31,.08); }
.dashboard-market-modal-character span { display:block; color:var(--rust); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.dashboard-market-modal-character strong { display:block; margin:8px 0; font-size:23px; font-weight:normal; }
.dashboard-market-modal-character small { font:10px Arial,sans-serif; }
.dashboard-market-modal-values { margin-top:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid rgba(96,54,31,.20); }
.dashboard-market-modal-values > div { min-height:95px; padding:19px; border-right:1px solid rgba(96,54,31,.17); border-bottom:1px solid rgba(96,54,31,.17); }
.dashboard-market-modal-values > div:nth-child(even) { border-right:0; }
.dashboard-market-modal-values span,
.dashboard-market-modal-total span { display:block; margin-bottom:12px; color:var(--rust); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.dashboard-market-modal-values strong { font-size:22px; font-weight:normal; }
.dashboard-market-modal-total { padding:22px; background:var(--ink); color:var(--cream); }
.dashboard-market-modal-total strong { font-size:31px; font-weight:normal; }
.dashboard-market-modal-confirm { width:100%; min-height:62px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--rust); color:var(--cream); cursor:pointer; font:700 8px Arial,sans-serif; letter-spacing:2.5px; }

.admin-market-panel { margin:40px 0; overflow:hidden; border:1px solid rgba(223,192,155,.18); background:var(--ink); color:var(--cream); }
.admin-market-heading { padding:40px; display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:45px; align-items:end; border-bottom:1px solid rgba(223,192,155,.14); }
.admin-market-heading > div:first-child > span,
.admin-market-inventory-heading > span { color:var(--sand); font:700 8px Arial,sans-serif; letter-spacing:4px; }
.admin-market-heading h2,
.admin-market-inventory-heading h3 { margin:14px 0; font-size:clamp(34px,5vw,54px); font-weight:normal; }
.admin-market-heading p { color:rgba(241,221,194,.62); font:11px/1.8 Arial,sans-serif; }
.admin-market-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid rgba(223,192,155,.16); }
.admin-market-summary > div { min-height:115px; padding:22px; border-right:1px solid rgba(223,192,155,.14); }
.admin-market-summary > div:last-child { border-right:0; }
.admin-market-summary span { color:var(--sand); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.admin-market-summary strong { display:block; margin-top:20px; font-size:35px; font-weight:normal; }
.admin-market-settings-grid,
.admin-market-inventory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.admin-market-setting-card,
.admin-market-inventory-card { padding:25px; border-right:1px solid rgba(223,192,155,.13); border-bottom:1px solid rgba(223,192,155,.13); }
.admin-market-setting-card.inactive { opacity:.55; }
.admin-market-setting-heading span,
.admin-market-setting-card label > span,
.admin-market-inventory-card > span,
.admin-market-inventory-card > div > span { color:var(--sand); font:700 7px Arial,sans-serif; letter-spacing:2px; }
.admin-market-setting-heading h4,
.admin-market-inventory-card h4 { margin:10px 0 5px; font-size:27px; font-weight:normal; }
.admin-market-setting-heading small { color:rgba(241,221,194,.50); font:9px Arial,sans-serif; }
.admin-market-setting-card label { display:block; margin-top:15px; }
.admin-market-setting-card input { width:100%; min-height:50px; padding:0 13px; border:1px solid rgba(223,192,155,.21); border-radius:0; background:rgba(241,221,194,.06); color:var(--cream); }
.admin-market-setting-card label > div { display:grid; grid-template-columns:52px minmax(0,1fr); }
.admin-market-setting-card label > div small { display:flex; align-items:center; justify-content:center; border:1px solid rgba(223,192,155,.21); border-right:0; color:var(--sand); font:8px Arial,sans-serif; }
.admin-market-active-toggle { display:flex !important; align-items:center; gap:10px; color:rgba(241,221,194,.68); font:10px Arial,sans-serif; }
.admin-market-active-toggle input { width:17px; min-height:17px; }
.admin-market-save { width:100%; min-height:65px; padding:0 38px; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--rust); color:var(--cream); cursor:pointer; font:700 8px Arial,sans-serif; letter-spacing:3px; }
.admin-market-inventory-heading { padding:34px 40px; border-top:1px solid rgba(223,192,155,.14); border-bottom:1px solid rgba(223,192,155,.14); }
.admin-market-inventory-card p { margin-top:6px; color:rgba(241,221,194,.60); font:10px Arial,sans-serif; }
.admin-market-inventory-card > div { margin-top:18px; }
.admin-market-inventory-card > div strong { display:block; margin-top:8px; font-size:20px; font-weight:normal; }
.admin-market-empty { padding:35px; text-align:center; color:rgba(241,221,194,.60); font:11px Arial,sans-serif; }

@media (max-width:1100px) {
    .dashboard-market-summary,
    .dashboard-inventory-summary,
    .dashboard-market-grid,
    .dashboard-inventory-grid,
    .admin-market-settings-grid,
    .admin-market-inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
    .dashboard-market-heading,
    .dashboard-inventory-heading,
    .admin-market-heading { grid-template-columns:1fr; }
}
@media (max-width:650px) {
    .dashboard-market-heading,
    .dashboard-inventory-heading,
    .dashboard-market-filters,
    .dashboard-inventory-filters,
    .admin-market-heading,
    .admin-market-inventory-heading { padding:28px 20px; grid-template-columns:1fr; }
    .dashboard-market-summary,
    .dashboard-inventory-summary,
    .dashboard-market-grid,
    .dashboard-inventory-grid,
    .admin-market-settings-grid,
    .admin-market-inventory-grid,
    .admin-market-summary { grid-template-columns:1fr; }
    .dashboard-market-modal-panel { padding:38px 20px 24px; }
    .dashboard-market-modal-values { grid-template-columns:1fr; }
    .dashboard-market-modal-values > div { border-right:0; }
}

/* ========================================
   ETAPA 13C — PRESENTES E TRANSFERÊNCIAS
======================================== */

.dashboard-inventory-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(96, 54, 31, .16);
}

.dashboard-inventory-card-actions > button {
    min-height: 58px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 0;
    border-right: 1px solid rgba(96, 54, 31, .16);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: 700 8px Arial, sans-serif;
    letter-spacing: 2px;
    text-align: left;
}

.dashboard-inventory-card-actions > button:last-child {
    border-right: 0;
}

.dashboard-inventory-card-actions > button:hover:not(:disabled) {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-inventory-gift-note {
    padding: 18px 22px;
    border-top: 1px solid rgba(96, 54, 31, .14);
    background: rgba(210, 123, 80, .10);
}

.dashboard-inventory-gift-note > span {
    display: block;
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.dashboard-inventory-gift-note > strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: 20px;
    font-weight: normal;
}

.dashboard-inventory-gift-note > p {
    margin-top: 10px;
    color: rgba(16, 42, 51, .66);
    font: italic 10px/1.7 Arial, sans-serif;
}

.dashboard-inventory-transfer-field {
    display: block;
    margin-top: 24px;
}

.dashboard-inventory-transfer-field > span {
    display: block;
    margin-bottom: 10px;
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.dashboard-inventory-transfer-field select,
.dashboard-inventory-transfer-field textarea {
    width: 100%;
    border: 1px solid rgba(96, 54, 31, .24);
    border-radius: 0;
    background: rgba(96, 54, 31, .05);
    color: var(--ink);
    font: 12px Arial, sans-serif;
}

.dashboard-inventory-transfer-field select {
    min-height: 54px;
    padding: 0 14px;
}

.dashboard-inventory-transfer-field textarea {
    min-height: 110px;
    padding: 14px;
    resize: vertical;
}

.dashboard-inventory-transfer-field small {
    display: block;
    margin-top: 7px;
    color: rgba(16, 42, 51, .52);
    font: 9px Arial, sans-serif;
}

.dashboard-inventory-transfer-warning {
    margin-top: 22px;
    padding: 18px;
    background: var(--ink);
    color: var(--cream);
}

.dashboard-inventory-transfer-warning strong {
    display: block;
    color: var(--sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.dashboard-inventory-transfer-warning p {
    margin-top: 9px;
    color: rgba(241, 221, 194, .72);
    font: 10px/1.7 Arial, sans-serif;
}

.admin-market-transfer-note {
    color: var(--sand) !important;
    font-style: italic !important;
}

@media (max-width: 650px) {
    .dashboard-inventory-card-actions {
        grid-template-columns: 1fr;
    }

    .dashboard-inventory-card-actions > button {
        border-right: 0;
        border-bottom: 1px solid rgba(96, 54, 31, .16);
    }

    .dashboard-inventory-card-actions > button:last-child {
        border-bottom: 0;
    }
}

/* ========================================
   ETAPA 13C — PRESENTES E TRANSFERÊNCIAS
======================================== */

.dashboard-inventory-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(96, 54, 31, .16);
}

.dashboard-inventory-card-actions > button {
    min-height: 58px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 0;
    border-right: 1px solid rgba(96, 54, 31, .16);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: 700 8px Arial, sans-serif;
    letter-spacing: 2px;
    text-align: left;
}

.dashboard-inventory-card-actions > button:last-child {
    border-right: 0;
}

.dashboard-inventory-card-actions > button:hover:not(:disabled) {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-inventory-gift-note {
    padding: 18px 22px;
    border-top: 1px solid rgba(96, 54, 31, .14);
    background: rgba(210, 123, 80, .10);
}

.dashboard-inventory-gift-note > span {
    display: block;
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.dashboard-inventory-gift-note > strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: 20px;
    font-weight: normal;
}

.dashboard-inventory-gift-note > p {
    margin-top: 10px;
    color: rgba(16, 42, 51, .66);
    font: italic 10px/1.7 Arial, sans-serif;
}

.dashboard-inventory-transfer-field {
    display: block;
    margin-top: 24px;
}

.dashboard-inventory-transfer-field > span {
    display: block;
    margin-bottom: 10px;
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.dashboard-inventory-transfer-field select,
.dashboard-inventory-transfer-field textarea {
    width: 100%;
    border: 1px solid rgba(96, 54, 31, .24);
    border-radius: 0;
    background: rgba(96, 54, 31, .05);
    color: var(--ink);
    font: 12px Arial, sans-serif;
}

.dashboard-inventory-transfer-field select {
    min-height: 54px;
    padding: 0 14px;
}

.dashboard-inventory-transfer-field textarea {
    min-height: 110px;
    padding: 14px;
    resize: vertical;
}

.dashboard-inventory-transfer-field small {
    display: block;
    margin-top: 7px;
    color: rgba(16, 42, 51, .52);
    font: 9px Arial, sans-serif;
}

.dashboard-inventory-transfer-warning {
    margin-top: 22px;
    padding: 18px;
    background: var(--ink);
    color: var(--cream);
}

.dashboard-inventory-transfer-warning strong {
    display: block;
    color: var(--sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.dashboard-inventory-transfer-warning p {
    margin-top: 9px;
    color: rgba(241, 221, 194, .72);
    font: 10px/1.7 Arial, sans-serif;
}

.admin-market-transfer-note {
    color: var(--sand) !important;
    font-style: italic !important;
}

@media (max-width: 650px) {
    .dashboard-inventory-card-actions {
        grid-template-columns: 1fr;
    }

    .dashboard-inventory-card-actions > button {
        border-right: 0;
        border-bottom: 1px solid rgba(96, 54, 31, .16);
    }

    .dashboard-inventory-card-actions > button:last-child {
        border-bottom: 0;
    }
}
/* ========================================
   ETAPA 13D — HISTÓRICO DE TRANSFERÊNCIAS
======================================== */

.dashboard-transfer-history {
    margin-top: 75px;
    padding-top: 45px;
    border-top: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-transfer-history-heading,
.admin-market-transfer-history-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    gap: 35px;
    align-items: end;
    margin-bottom: 28px;
}

.dashboard-transfer-history-heading span,
.admin-market-transfer-history-heading > span {
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 3px;
}

.dashboard-transfer-history-heading h3,
.admin-market-transfer-history-heading h3 {
    margin-top: 12px;
    color: var(--ink);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: normal;
    line-height: 1;
}

.dashboard-transfer-history-heading > p {
    color: rgba(16, 42, 51, .62);
    font: 11px/1.8 Arial, sans-serif;
}

.dashboard-transfer-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(96, 54, 31, .17);
    border-left: 1px solid rgba(96, 54, 31, .17);
}

.dashboard-transfer-history-card {
    min-width: 0;
    border-right: 1px solid rgba(96, 54, 31, .17);
    border-bottom: 1px solid rgba(96, 54, 31, .17);
    background: rgba(255, 255, 255, .16);
}

.dashboard-transfer-history-card-heading,
.dashboard-transfer-history-card-body {
    padding: 22px;
}

.dashboard-transfer-history-card-heading {
    border-bottom: 1px solid rgba(96, 54, 31, .14);
}

.dashboard-transfer-history-card-heading > span,
.dashboard-transfer-history-card-body > span {
    display: block;
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.dashboard-transfer-history-card.received .dashboard-transfer-history-card-heading > span {
    color: var(--ink);
}

.dashboard-transfer-history-card-heading > strong {
    display: block;
    margin-top: 11px;
    color: var(--ink);
    font-size: 24px;
    font-weight: normal;
}

.dashboard-transfer-history-card-heading > small {
    display: block;
    margin-top: 10px;
    color: rgba(16, 42, 51, .50);
    font: 8px Arial, sans-serif;
}

.dashboard-transfer-history-card-body h4 {
    margin-top: 10px;
    color: var(--ink);
    font-size: 20px;
    font-weight: normal;
}

.dashboard-transfer-history-card-body p {
    margin-top: 9px;
    color: rgba(16, 42, 51, .58);
    font: 9px/1.6 Arial, sans-serif;
}

.dashboard-transfer-history-card blockquote,
.admin-market-transfer-history-card blockquote {
    margin: 0;
    padding: 18px 22px;
    border-top: 1px solid rgba(96, 54, 31, .14);
    background: rgba(210, 123, 80, .10);
    color: rgba(16, 42, 51, .72);
    font: italic 10px/1.7 Arial, sans-serif;
}

.dashboard-transfer-history-empty {
    padding: 28px;
    border: 1px dashed rgba(96, 54, 31, .22);
    color: rgba(16, 42, 51, .55);
    font: 10px Arial, sans-serif;
    text-align: center;
}

.admin-market-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-market-transfer-history-heading {
    margin: 45px 0 0;
    padding: 35px;
    border-top: 1px solid rgba(223, 192, 155, .14);
    border-bottom: 1px solid rgba(223, 192, 155, .14);
}

.admin-market-transfer-history-heading > span {
    grid-column: 1 / -1;
    color: var(--sand);
}

.admin-market-transfer-history-heading h3 {
    color: var(--cream);
}

.admin-market-transfer-history-heading p {
    color: rgba(241, 221, 194, .58);
    font: 10px/1.7 Arial, sans-serif;
}

.admin-market-transfer-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-market-transfer-history-card {
    min-width: 0;
    padding: 26px;
    border-right: 1px solid rgba(223, 192, 155, .13);
    border-bottom: 1px solid rgba(223, 192, 155, .13);
    color: var(--cream);
}

.admin-market-transfer-history-card > div > span,
.admin-market-transfer-history-card dt {
    color: var(--sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-market-transfer-history-card h4 {
    margin: 11px 0 7px;
    font-size: 28px;
    font-weight: normal;
}

.admin-market-transfer-history-card small {
    color: rgba(241, 221, 194, .48);
    font: 8px Arial, sans-serif;
}

.admin-market-transfer-history-card dl {
    margin: 24px 0 0;
}

.admin-market-transfer-history-card dl > div + div {
    margin-top: 16px;
}

.admin-market-transfer-history-card dd {
    margin: 7px 0 0;
    color: rgba(241, 221, 194, .82);
    font-size: 18px;
}

.admin-market-transfer-history-card blockquote {
    margin-top: 22px;
    border: 1px solid rgba(223, 192, 155, .12);
    background: rgba(210, 123, 80, .08);
    color: rgba(241, 221, 194, .72);
}

@media (max-width: 1050px) {
    .dashboard-transfer-history-grid,
    .admin-market-transfer-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .dashboard-transfer-history-heading,
    .admin-market-transfer-history-heading {
        grid-template-columns: 1fr;
    }

    .dashboard-transfer-history-grid,
    .admin-market-transfer-history-grid,
    .admin-market-summary {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ETAPA 13D — HISTÓRICO DE TRANSFERÊNCIAS
======================================== */

.dashboard-transfer-history {
    margin-top: 75px;
    padding-top: 45px;
    border-top: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-transfer-history-heading,
.admin-market-transfer-history-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    gap: 35px;
    align-items: end;
    margin-bottom: 28px;
}

.dashboard-transfer-history-heading span,
.admin-market-transfer-history-heading > span {
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 3px;
}

.dashboard-transfer-history-heading h3,
.admin-market-transfer-history-heading h3 {
    margin-top: 12px;
    color: var(--ink);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: normal;
    line-height: 1;
}

.dashboard-transfer-history-heading > p {
    color: rgba(16, 42, 51, .62);
    font: 11px/1.8 Arial, sans-serif;
}

.dashboard-transfer-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(96, 54, 31, .17);
    border-left: 1px solid rgba(96, 54, 31, .17);
}

.dashboard-transfer-history-card {
    min-width: 0;
    border-right: 1px solid rgba(96, 54, 31, .17);
    border-bottom: 1px solid rgba(96, 54, 31, .17);
    background: rgba(255, 255, 255, .16);
}

.dashboard-transfer-history-card-heading,
.dashboard-transfer-history-card-body {
    padding: 22px;
}

.dashboard-transfer-history-card-heading {
    border-bottom: 1px solid rgba(96, 54, 31, .14);
}

.dashboard-transfer-history-card-heading > span,
.dashboard-transfer-history-card-body > span {
    display: block;
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.dashboard-transfer-history-card.received .dashboard-transfer-history-card-heading > span {
    color: var(--ink);
}

.dashboard-transfer-history-card-heading > strong {
    display: block;
    margin-top: 11px;
    color: var(--ink);
    font-size: 24px;
    font-weight: normal;
}

.dashboard-transfer-history-card-heading > small {
    display: block;
    margin-top: 10px;
    color: rgba(16, 42, 51, .50);
    font: 8px Arial, sans-serif;
}

.dashboard-transfer-history-card-body h4 {
    margin-top: 10px;
    color: var(--ink);
    font-size: 20px;
    font-weight: normal;
}

.dashboard-transfer-history-card-body p {
    margin-top: 9px;
    color: rgba(16, 42, 51, .58);
    font: 9px/1.6 Arial, sans-serif;
}

.dashboard-transfer-history-card blockquote,
.admin-market-transfer-history-card blockquote {
    margin: 0;
    padding: 18px 22px;
    border-top: 1px solid rgba(96, 54, 31, .14);
    background: rgba(210, 123, 80, .10);
    color: rgba(16, 42, 51, .72);
    font: italic 10px/1.7 Arial, sans-serif;
}

.dashboard-transfer-history-empty {
    padding: 28px;
    border: 1px dashed rgba(96, 54, 31, .22);
    color: rgba(16, 42, 51, .55);
    font: 10px Arial, sans-serif;
    text-align: center;
}

.admin-market-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-market-transfer-history-heading {
    margin: 45px 0 0;
    padding: 35px;
    border-top: 1px solid rgba(223, 192, 155, .14);
    border-bottom: 1px solid rgba(223, 192, 155, .14);
}

.admin-market-transfer-history-heading > span {
    grid-column: 1 / -1;
    color: var(--sand);
}

.admin-market-transfer-history-heading h3 {
    color: var(--cream);
}

.admin-market-transfer-history-heading p {
    color: rgba(241, 221, 194, .58);
    font: 10px/1.7 Arial, sans-serif;
}

.admin-market-transfer-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-market-transfer-history-card {
    min-width: 0;
    padding: 26px;
    border-right: 1px solid rgba(223, 192, 155, .13);
    border-bottom: 1px solid rgba(223, 192, 155, .13);
    color: var(--cream);
}

.admin-market-transfer-history-card > div > span,
.admin-market-transfer-history-card dt {
    color: var(--sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-market-transfer-history-card h4 {
    margin: 11px 0 7px;
    font-size: 28px;
    font-weight: normal;
}

.admin-market-transfer-history-card small {
    color: rgba(241, 221, 194, .48);
    font: 8px Arial, sans-serif;
}

.admin-market-transfer-history-card dl {
    margin: 24px 0 0;
}

.admin-market-transfer-history-card dl > div + div {
    margin-top: 16px;
}

.admin-market-transfer-history-card dd {
    margin: 7px 0 0;
    color: rgba(241, 221, 194, .82);
    font-size: 18px;
}

.admin-market-transfer-history-card blockquote {
    margin-top: 22px;
    border: 1px solid rgba(223, 192, 155, .12);
    background: rgba(210, 123, 80, .08);
    color: rgba(241, 221, 194, .72);
}

@media (max-width: 1050px) {
    .dashboard-transfer-history-grid,
    .admin-market-transfer-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .dashboard-transfer-history-heading,
    .admin-market-transfer-history-heading {
        grid-template-columns: 1fr;
    }

    .dashboard-transfer-history-grid,
    .admin-market-transfer-history-grid,
    .admin-market-summary {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   ETAPA 13D V2 — ESCOLHA DO DESTINATÁRIO
======================================== */

.dashboard-inventory-transfer-destination {
    margin: 24px 0 18px;
    padding: 18px 20px;
    border-left: 4px solid var(--rust, #9d432c);
    background: rgba(157, 67, 44, .08);
}

.dashboard-inventory-transfer-destination strong,
.dashboard-inventory-transfer-empty strong {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.dashboard-inventory-transfer-destination p,
.dashboard-inventory-transfer-empty p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.dashboard-inventory-transfer-recipient-preview {
    margin: -6px 0 22px;
    padding: 18px 20px;
    border: 1px solid rgba(7, 27, 33, .22);
    background: rgba(7, 27, 33, .05);
}

.dashboard-inventory-transfer-recipient-preview span,
.dashboard-inventory-transfer-recipient-preview strong,
.dashboard-inventory-transfer-recipient-preview small {
    display: block;
}

.dashboard-inventory-transfer-recipient-preview span {
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 7px;
}

.dashboard-inventory-transfer-recipient-preview strong {
    font-size: 22px;
    font-weight: normal;
}

.dashboard-inventory-transfer-recipient-preview small {
    margin-top: 6px;
    opacity: .72;
}

.dashboard-inventory-transfer-empty {
    margin: -6px 0 22px;
    padding: 18px 20px;
    border: 1px solid rgba(157, 67, 44, .35);
    background: rgba(157, 67, 44, .08);
}

.dashboard-market-modal-confirm:disabled {
    cursor: not-allowed;
    opacity: .45;
}

/* ========================================
   ETAPA 13E — NOTIFICAÇÕES DE RECEBIMENTO
======================================== */

.dashboard-transfer-inbox {
    margin: 0 0 42px;
    border: 1px solid rgba(157, 67, 44, .28);
    background:
        linear-gradient(135deg, rgba(157, 67, 44, .12), rgba(255, 255, 255, .20));
}

.dashboard-transfer-inbox-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    padding: 30px;
    border-bottom: 1px solid rgba(157, 67, 44, .20);
}

.dashboard-transfer-inbox-heading > div > span {
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 3px;
}

.dashboard-transfer-inbox-heading h3 {
    margin: 10px 0 8px;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: normal;
    line-height: 1;
}

.dashboard-transfer-inbox-heading p {
    margin: 0;
    color: rgba(16, 42, 51, .62);
    font: 10px/1.7 Arial, sans-serif;
}

.dashboard-transfer-inbox-heading button,
.dashboard-transfer-inbox-card button {
    border: 0;
    background: var(--ink);
    color: var(--cream);
    cursor: pointer;
    font: 700 8px Arial, sans-serif;
    letter-spacing: 1.7px;
    transition: opacity .2s, transform .2s;
}

.dashboard-transfer-inbox-heading button {
    padding: 15px 18px;
}

.dashboard-transfer-inbox-heading button:disabled,
.dashboard-transfer-inbox-card button:disabled {
    cursor: wait;
    opacity: .45;
}

.dashboard-transfer-inbox-heading button:not(:disabled):hover,
.dashboard-transfer-inbox-card button:not(:disabled):hover {
    transform: translateY(-1px);
}

.dashboard-transfer-inbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-transfer-inbox-card {
    min-width: 0;
    padding: 24px;
    border-right: 1px solid rgba(157, 67, 44, .17);
    border-bottom: 1px solid rgba(157, 67, 44, .17);
    background: rgba(255, 255, 255, .24);
}

.dashboard-transfer-inbox-card-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.dashboard-transfer-inbox-card-top span {
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.dashboard-transfer-inbox-card-top small {
    color: rgba(16, 42, 51, .46);
    font: 8px Arial, sans-serif;
}

.dashboard-transfer-inbox-card > strong {
    display: block;
    margin-top: 16px;
    color: var(--ink);
    font-size: 26px;
    font-weight: normal;
}

.dashboard-transfer-inbox-card > p {
    margin: 10px 0 0;
    color: rgba(16, 42, 51, .64);
    font: 10px/1.7 Arial, sans-serif;
}

.dashboard-transfer-inbox-card blockquote {
    margin: 18px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--rust);
    background: rgba(157, 67, 44, .08);
    color: rgba(16, 42, 51, .74);
    font: italic 10px/1.7 Arial, sans-serif;
}

.dashboard-transfer-inbox-card button {
    width: 100%;
    margin-top: 20px;
    padding: 14px 16px;
}

.dashboard-transfer-history-card.unseen {
    box-shadow: inset 4px 0 0 var(--rust);
    background: rgba(210, 123, 80, .08);
}

[data-dashboard-tab-count="inventory"].has-alert {
    min-width: max-content;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--rust);
    color: var(--cream);
}

.admin-market-transfer-read-status {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 7px;
    border: 1px solid rgba(223, 192, 155, .18);
    color: rgba(241, 221, 194, .68);
    font: normal 700 7px Arial, sans-serif;
    letter-spacing: 1.4px;
}

.admin-market-transfer-history-card.unseen {
    box-shadow: inset 4px 0 0 var(--rust);
    background: rgba(210, 123, 80, .06);
}

@media (max-width: 1050px) {
    .dashboard-transfer-inbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .dashboard-transfer-inbox-heading {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .dashboard-transfer-inbox-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ETAPA 13F — LISTA DE DESEJOS
======================================== */

.dashboard-market-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-market-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-market-card-actions {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 0;
    margin-top: auto;
    border-top: 1px solid rgba(157, 67, 44, .16);
}

.dashboard-market-card-actions > button {
    min-height: 58px;
    border: 0;
    border-right: 1px solid rgba(157, 67, 44, .16);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: 700 8px Arial, sans-serif;
    letter-spacing: 1.45px;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.dashboard-market-card-actions > button:last-child {
    border-right: 0;
}

.dashboard-market-card-actions > button:hover:not(:disabled) {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-market-card-actions > button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.dashboard-market-wishlist-button span {
    margin-right: 7px;
    font-size: 15px;
    vertical-align: -1px;
}

.dashboard-market-wishlist-button.wished {
    background: rgba(157, 67, 44, .1);
    color: var(--rust);
}

.dashboard-wishlist {
    margin: 26px 0 34px;
    border: 1px solid rgba(157, 67, 44, .18);
    background: rgba(255, 255, 255, .24);
}

.dashboard-wishlist-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 28px 30px;
    border-bottom: 1px solid rgba(157, 67, 44, .18);
}

.dashboard-wishlist-heading span,
.admin-market-wishlist-heading > span {
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 2.4px;
}

.dashboard-wishlist-heading h3,
.admin-market-wishlist-heading h3 {
    margin: 7px 0 0;
    color: var(--ink);
    font-size: 31px;
    font-weight: normal;
}

.dashboard-wishlist-heading p,
.admin-market-wishlist-heading p {
    margin: 9px 0 0;
    color: rgba(16, 42, 51, .62);
    font: 10px/1.7 Arial, sans-serif;
}

.dashboard-wishlist-heading > strong {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(157, 67, 44, .24);
    border-radius: 50%;
    color: var(--rust);
    font-size: 25px;
    font-weight: normal;
}

.dashboard-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-wishlist-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 22px 24px;
    border-right: 1px solid rgba(157, 67, 44, .15);
    border-bottom: 1px solid rgba(157, 67, 44, .15);
}

.dashboard-wishlist-card span {
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 1.8px;
}

.dashboard-wishlist-card h4 {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 20px;
    font-weight: normal;
}

.dashboard-wishlist-card button {
    padding: 10px 11px;
    border: 1px solid rgba(157, 67, 44, .24);
    background: transparent;
    color: var(--rust);
    cursor: pointer;
    font: 700 7px Arial, sans-serif;
    letter-spacing: 1.3px;
}

.dashboard-wishlist-card button:hover {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-wishlist-empty {
    padding: 26px 30px;
    color: rgba(16, 42, 51, .54);
    font: italic 11px/1.7 Arial, sans-serif;
}

.dashboard-transfer-wishlist-preview {
    display: grid;
    gap: 6px;
    margin-top: 15px;
    padding: 13px 15px;
    border-left: 3px solid rgba(157, 67, 44, .38);
    background: rgba(157, 67, 44, .06);
}

.dashboard-transfer-wishlist-preview.match {
    border-left-color: var(--rust);
    background: rgba(157, 67, 44, .12);
}

.dashboard-transfer-wishlist-preview b {
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 1.3px;
}

.dashboard-transfer-wishlist-preview small {
    color: rgba(16, 42, 51, .66);
    font: 9px/1.6 Arial, sans-serif;
}

.admin-market-wishlist-heading {
    margin-top: 52px;
    padding-top: 42px;
    border-top: 1px solid rgba(223, 192, 155, .16);
}

.admin-market-wishlist-heading h3 {
    color: var(--cream);
}

.admin-market-wishlist-heading p {
    color: rgba(241, 221, 194, .58);
}

.admin-market-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.admin-market-wishlist-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border: 1px solid rgba(223, 192, 155, .14);
    background: rgba(255, 255, 255, .025);
}

.admin-market-wishlist-rank {
    color: rgba(241, 221, 194, .28);
    font-size: 30px;
}

.admin-market-wishlist-card span {
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 1.8px;
}

.admin-market-wishlist-card h4 {
    margin: 6px 0 0;
    color: var(--cream);
    font-size: 22px;
    font-weight: normal;
}

.admin-market-wishlist-card p {
    margin: 7px 0 0;
    color: rgba(241, 221, 194, .52);
    font: 9px/1.55 Arial, sans-serif;
}

.admin-market-wishlist-card > strong {
    color: var(--cream);
    font-size: 28px;
    font-weight: normal;
    text-align: right;
}

.admin-market-wishlist-card > strong small {
    display: block;
    margin-top: 3px;
    color: rgba(241, 221, 194, .46);
    font: 7px Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .dashboard-market-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-wishlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dashboard-market-summary,
    .dashboard-wishlist-grid,
    .admin-market-wishlist-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-market-card-actions {
        grid-template-columns: 1fr;
    }

    .dashboard-market-card-actions > button {
        border-right: 0;
        border-bottom: 1px solid rgba(157, 67, 44, .16);
    }

    .dashboard-market-card-actions > button:last-child {
        border-bottom: 0;
    }

    .dashboard-wishlist-heading {
        grid-template-columns: 1fr auto;
        padding: 22px;
    }

    .dashboard-wishlist-card {
        border-right: 0;
    }
}

/* ========================================
   ETAPA 13F — LISTA DE DESEJOS
======================================== */

.dashboard-market-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-market-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-market-card-actions {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 0;
    margin-top: auto;
    border-top: 1px solid rgba(157, 67, 44, .16);
}

.dashboard-market-card-actions > button {
    min-height: 58px;
    border: 0;
    border-right: 1px solid rgba(157, 67, 44, .16);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: 700 8px Arial, sans-serif;
    letter-spacing: 1.45px;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.dashboard-market-card-actions > button:last-child {
    border-right: 0;
}

.dashboard-market-card-actions > button:hover:not(:disabled) {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-market-card-actions > button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.dashboard-market-wishlist-button span {
    margin-right: 7px;
    font-size: 15px;
    vertical-align: -1px;
}

.dashboard-market-wishlist-button.wished {
    background: rgba(157, 67, 44, .1);
    color: var(--rust);
}

.dashboard-wishlist {
    margin: 26px 0 34px;
    border: 1px solid rgba(157, 67, 44, .18);
    background: rgba(255, 255, 255, .24);
}

.dashboard-wishlist-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 28px 30px;
    border-bottom: 1px solid rgba(157, 67, 44, .18);
}

.dashboard-wishlist-heading span,
.admin-market-wishlist-heading > span {
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 2.4px;
}

.dashboard-wishlist-heading h3,
.admin-market-wishlist-heading h3 {
    margin: 7px 0 0;
    color: var(--ink);
    font-size: 31px;
    font-weight: normal;
}

.dashboard-wishlist-heading p,
.admin-market-wishlist-heading p {
    margin: 9px 0 0;
    color: rgba(16, 42, 51, .62);
    font: 10px/1.7 Arial, sans-serif;
}

.dashboard-wishlist-heading > strong {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(157, 67, 44, .24);
    border-radius: 50%;
    color: var(--rust);
    font-size: 25px;
    font-weight: normal;
}

.dashboard-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-wishlist-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 22px 24px;
    border-right: 1px solid rgba(157, 67, 44, .15);
    border-bottom: 1px solid rgba(157, 67, 44, .15);
}

.dashboard-wishlist-card span {
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 1.8px;
}

.dashboard-wishlist-card h4 {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 20px;
    font-weight: normal;
}

.dashboard-wishlist-card button {
    padding: 10px 11px;
    border: 1px solid rgba(157, 67, 44, .24);
    background: transparent;
    color: var(--rust);
    cursor: pointer;
    font: 700 7px Arial, sans-serif;
    letter-spacing: 1.3px;
}

.dashboard-wishlist-card button:hover {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-wishlist-empty {
    padding: 26px 30px;
    color: rgba(16, 42, 51, .54);
    font: italic 11px/1.7 Arial, sans-serif;
}

.dashboard-transfer-wishlist-preview {
    display: grid;
    gap: 6px;
    margin-top: 15px;
    padding: 13px 15px;
    border-left: 3px solid rgba(157, 67, 44, .38);
    background: rgba(157, 67, 44, .06);
}

.dashboard-transfer-wishlist-preview.match {
    border-left-color: var(--rust);
    background: rgba(157, 67, 44, .12);
}

.dashboard-transfer-wishlist-preview b {
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 1.3px;
}

.dashboard-transfer-wishlist-preview small {
    color: rgba(16, 42, 51, .66);
    font: 9px/1.6 Arial, sans-serif;
}

.admin-market-wishlist-heading {
    margin-top: 52px;
    padding-top: 42px;
    border-top: 1px solid rgba(223, 192, 155, .16);
}

.admin-market-wishlist-heading h3 {
    color: var(--cream);
}

.admin-market-wishlist-heading p {
    color: rgba(241, 221, 194, .58);
}

.admin-market-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.admin-market-wishlist-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border: 1px solid rgba(223, 192, 155, .14);
    background: rgba(255, 255, 255, .025);
}

.admin-market-wishlist-rank {
    color: rgba(241, 221, 194, .28);
    font-size: 30px;
}

.admin-market-wishlist-card span {
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 1.8px;
}

.admin-market-wishlist-card h4 {
    margin: 6px 0 0;
    color: var(--cream);
    font-size: 22px;
    font-weight: normal;
}

.admin-market-wishlist-card p {
    margin: 7px 0 0;
    color: rgba(241, 221, 194, .52);
    font: 9px/1.55 Arial, sans-serif;
}

.admin-market-wishlist-card > strong {
    color: var(--cream);
    font-size: 28px;
    font-weight: normal;
    text-align: right;
}

.admin-market-wishlist-card > strong small {
    display: block;
    margin-top: 3px;
    color: rgba(241, 221, 194, .46);
    font: 7px Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .dashboard-market-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-wishlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dashboard-market-summary,
    .dashboard-wishlist-grid,
    .admin-market-wishlist-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-market-card-actions {
        grid-template-columns: 1fr;
    }

    .dashboard-market-card-actions > button {
        border-right: 0;
        border-bottom: 1px solid rgba(157, 67, 44, .16);
    }

    .dashboard-market-card-actions > button:last-child {
        border-bottom: 0;
    }

    .dashboard-wishlist-heading {
        grid-template-columns: 1fr auto;
        padding: 22px;
    }

    .dashboard-wishlist-card {
        border-right: 0;
    }
}

/* ==========================================
   ETAPA 14A — VEÍCULOS BÁSICOS
   Cole uma única vez no final do style.css
========================================== */

.dashboard-vehicles,
.admin-vehicle-panel {
    --vehicle-cream: #f1eadc;
    --vehicle-paper: #e6dcc9;
    --vehicle-ink: #1d211c;
    --vehicle-muted: #64685e;
    --vehicle-rust: #8b3f28;
    --vehicle-gold: #b48b4f;
    --vehicle-line: rgba(29, 33, 28, .18);
}

.dashboard-vehicles {
    padding: 54px clamp(22px, 4vw, 62px);
    background:
        linear-gradient(rgba(241, 234, 220, .96), rgba(241, 234, 220, .96)),
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(29, 33, 28, .035) 39px 40px);
    color: var(--vehicle-ink);
}

.dashboard-vehicles-heading,
.admin-vehicle-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--vehicle-line);
}

.dashboard-vehicles-heading > div > span,
.dashboard-vehicle-catalog-heading > span,
.admin-vehicle-heading > div > span,
.admin-vehicle-records-heading > span,
.admin-vehicle-cycles-heading > span {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .22em;
    color: var(--vehicle-rust);
}

.dashboard-vehicles-heading h2,
.admin-vehicle-heading h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(36px, 5vw, 66px);
    line-height: .98;
    font-weight: 500;
}

.dashboard-vehicles-heading p,
.admin-vehicle-heading p,
.dashboard-vehicle-catalog-heading p {
    max-width: 650px;
    color: var(--vehicle-muted);
    line-height: 1.7;
}

.dashboard-vehicle-character-selector {
    min-width: min(100%, 310px);
    display: grid;
    gap: 8px;
}

.dashboard-vehicle-character-selector span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.dashboard-vehicle-character-selector select,
.admin-vehicle-charges input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--vehicle-line);
    border-radius: 0;
    background: rgba(255,255,255,.48);
    color: var(--vehicle-ink);
    font: inherit;
}

.dashboard-vehicle-message {
    margin: 22px 0;
    padding: 15px 18px;
    border: 1px solid var(--vehicle-line);
    background: rgba(255,255,255,.5);
}
.dashboard-vehicle-message.success { border-color: #4c7652; color: #315438; }
.dashboard-vehicle-message.error { border-color: #a34232; color: #842f22; }

.dashboard-vehicle-summary,
.admin-vehicle-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 30px 0;
    background: var(--vehicle-line);
    border: 1px solid var(--vehicle-line);
}

.dashboard-vehicle-summary article,
.admin-vehicle-summary article {
    padding: 20px;
    background: rgba(255,255,255,.48);
}
.dashboard-vehicle-summary span,
.admin-vehicle-summary span {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    color: var(--vehicle-muted);
}
.dashboard-vehicle-summary strong,
.admin-vehicle-summary strong {
    display: block;
    margin: 8px 0;
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 500;
}
.dashboard-vehicle-summary p,
.admin-vehicle-summary p { margin: 0; font-size: 12px; color: var(--vehicle-muted); }

.dashboard-vehicle-required,
.dashboard-vehicle-empty {
    margin: 24px 0;
    padding: 28px;
    border: 1px dashed var(--vehicle-rust);
    background: rgba(139,63,40,.06);
}
.dashboard-vehicle-required > span { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--vehicle-rust); }
.dashboard-vehicle-required h3,
.dashboard-vehicle-empty h3 { margin: 9px 0; font-family: Georgia, serif; font-size: 27px; font-weight: 500; }

.dashboard-vehicle-owned-card {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) minmax(360px, 1.5fr);
    gap: 24px;
    align-items: center;
    margin: 30px 0 44px;
    padding: 28px;
    border: 1px solid var(--vehicle-line);
    background: #22271f;
    color: #f5efe2;
}
.dashboard-vehicle-owned-icon,
.dashboard-vehicle-option-icon,
.admin-vehicle-record-icon,
.admin-vehicle-setting-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(255,255,255,.24);
    font-size: 34px;
}
.dashboard-vehicle-owned-heading span,
.dashboard-vehicle-option-heading span,
.admin-vehicle-record-card > div:nth-child(2) > span,
.admin-vehicle-setting-heading span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--vehicle-gold);
}
.dashboard-vehicle-owned-heading h3,
.dashboard-vehicle-option-heading h3,
.admin-vehicle-setting-heading h3 { margin: 7px 0; font-family: Georgia, serif; font-size: 28px; font-weight: 500; }
.dashboard-vehicle-owned-heading p { margin: 0; color: rgba(255,255,255,.66); }
.dashboard-vehicle-owned-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dashboard-vehicle-owned-values div { padding: 13px; border: 1px solid rgba(255,255,255,.15); }
.dashboard-vehicle-owned-values span { display: block; font-size: 8px; letter-spacing: .12em; color: rgba(255,255,255,.55); }
.dashboard-vehicle-owned-values strong { display: block; margin-top: 6px; }
.dashboard-vehicle-owned-note { grid-column: 2 / -1; margin: 0; color: rgba(255,255,255,.6); font-size: 12px; }

.dashboard-vehicle-catalog-heading { margin: 34px 0 20px; }
.dashboard-vehicle-catalog-heading h3,
.admin-vehicle-records-heading h3,
.admin-vehicle-cycles-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 32px; font-weight: 500; }
.dashboard-vehicle-grid,
.admin-vehicle-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.dashboard-vehicle-option,
.admin-vehicle-setting-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 22px;
    border: 1px solid var(--vehicle-line);
    background: rgba(255,255,255,.5);
}
.dashboard-vehicle-option.inactive { opacity: .45; }
.dashboard-vehicle-option-icon,
.admin-vehicle-setting-icon { border-color: var(--vehicle-line); }
.dashboard-vehicle-option-price { margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--vehicle-line); border-bottom: 1px solid var(--vehicle-line); }
.dashboard-vehicle-option-price span,
.dashboard-vehicle-option-costs span { display:block; font-size: 8px; font-weight: 800; letter-spacing:.12em; color:var(--vehicle-muted); }
.dashboard-vehicle-option-price strong { display:block; margin-top:5px; font-family:Georgia,serif; font-size:30px; font-weight:500; }
.dashboard-vehicle-option-costs { display:grid; gap:10px; margin-bottom:20px; }
.dashboard-vehicle-option-costs div { display:flex; justify-content:space-between; gap:10px; }
.dashboard-vehicle-option button,
.admin-vehicle-save,
.admin-vehicle-charges button,
.dashboard-vehicle-mandatory-grid button {
    width: 100%;
    margin-top: auto;
    padding: 14px 16px;
    border: 1px solid var(--vehicle-ink);
    background: var(--vehicle-ink);
    color: #f7f0e3;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    cursor: pointer;
}
.dashboard-vehicle-option button:disabled,
.dashboard-vehicle-mandatory-grid button:disabled { opacity: .45; cursor: not-allowed; }

.dashboard-vehicle-mandatory-modal {
    --vehicle-cream: #f1eadc;
    --vehicle-ink: #1d211c;
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(14, 16, 13, .88);
    backdrop-filter: blur(8px);
}
.dashboard-vehicle-mandatory-modal[hidden] { display: none; }
body.dashboard-vehicle-choice-required { overflow: hidden; }
.dashboard-vehicle-mandatory-card {
    width: min(1040px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: clamp(26px, 4vw, 52px);
    background: var(--vehicle-cream, #f1eadc);
    color: #1d211c;
    box-shadow: 0 35px 100px rgba(0,0,0,.42);
}
.dashboard-vehicle-mandatory-kicker { font-size:10px; font-weight:800; letter-spacing:.2em; color:#8b3f28; }
.dashboard-vehicle-mandatory-card h2 { margin:12px 0; font-family:Georgia,serif; font-size:clamp(32px,5vw,58px); line-height:1; font-weight:500; }
.dashboard-vehicle-mandatory-card > div > p { color:#64685e; line-height:1.6; }
.dashboard-vehicle-mandatory-balance { display:flex; justify-content:space-between; align-items:end; margin:24px 0; padding:17px 0; border-top:1px solid rgba(29,33,28,.2); border-bottom:1px solid rgba(29,33,28,.2); }
.dashboard-vehicle-mandatory-balance span { font-size:10px; font-weight:800; letter-spacing:.14em; }
.dashboard-vehicle-mandatory-balance strong { font-family:Georgia,serif; font-size:30px; font-weight:500; }
.dashboard-vehicle-mandatory-warning { padding:13px; margin-bottom:18px; border:1px solid #a34232; color:#842f22; }
.dashboard-vehicle-mandatory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.dashboard-vehicle-mandatory-grid article { display:flex; flex-direction:column; padding:18px; border:1px solid rgba(29,33,28,.18); background:rgba(255,255,255,.42); }
.dashboard-vehicle-mandatory-grid article > div { font-size:31px; }
.dashboard-vehicle-mandatory-grid article > span { margin-top:12px; font-family:Georgia,serif; font-size:22px; }
.dashboard-vehicle-mandatory-grid article > strong { margin:8px 0; font-size:20px; }
.dashboard-vehicle-mandatory-grid article > small { min-height:42px; color:#64685e; line-height:1.4; }
.dashboard-vehicle-mandatory-footer { display:block; margin-top:18px; color:#64685e; }

.admin-vehicle-panel {
    margin-top: 46px;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid var(--vehicle-line);
    background: var(--vehicle-cream);
    color: var(--vehicle-ink);
}
.admin-vehicle-heading { align-items:start; }
.admin-vehicle-heading h2 { font-size:clamp(34px,4vw,56px); }
.admin-vehicle-summary { min-width:min(100%,560px); margin:0; }
.admin-vehicle-summary article { padding:14px; }
.admin-vehicle-summary strong { font-size:21px; }
.admin-vehicle-settings-grid { margin-top:30px; }
.admin-vehicle-setting-card { gap:13px; }
.admin-vehicle-setting-card label { display:grid; gap:6px; font-size:9px; font-weight:800; letter-spacing:.1em; }
.admin-vehicle-setting-card label > div { display:flex; align-items:center; border:1px solid var(--vehicle-line); background:rgba(255,255,255,.5); }
.admin-vehicle-setting-card label small { padding-left:10px; }
.admin-vehicle-setting-card input[type="number"] { width:100%; padding:11px; border:0; background:transparent; }
.admin-vehicle-active { display:flex !important; grid-template-columns:auto 1fr; align-items:center; }
.admin-vehicle-save { width:auto; margin-top:18px; padding-inline:24px; }
.admin-vehicle-charges { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:38px 0; }
.admin-vehicle-charges section { display:grid; grid-template-columns:1fr minmax(180px,.55fr); gap:18px; align-items:end; padding:24px; border:1px solid var(--vehicle-line); background:rgba(255,255,255,.42); }
.admin-vehicle-charges section > div > span { font-size:9px; font-weight:800; letter-spacing:.16em; color:var(--vehicle-rust); }
.admin-vehicle-charges h3 { margin:7px 0; font-family:Georgia,serif; font-size:26px; font-weight:500; }
.admin-vehicle-charges p { margin:0; color:var(--vehicle-muted); }
.admin-vehicle-charges label { display:grid; gap:7px; font-size:9px; font-weight:800; letter-spacing:.12em; }
.admin-vehicle-charges button { grid-column:1/-1; width:auto; justify-self:start; margin-top:0; }
.admin-vehicle-records-heading,
.admin-vehicle-cycles-heading { margin:34px 0 16px; }
.admin-vehicle-records-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin-vehicle-record-card { display:grid; grid-template-columns:auto 1fr; gap:16px; padding:20px; border:1px solid var(--vehicle-line); background:rgba(255,255,255,.45); }
.admin-vehicle-record-icon { border-color:var(--vehicle-line); }
.admin-vehicle-record-card h4 { margin:5px 0; font-family:Georgia,serif; font-size:23px; font-weight:500; }
.admin-vehicle-record-card p { margin:0; color:var(--vehicle-muted); }
.admin-vehicle-record-card dl { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0; }
.admin-vehicle-record-card dl div { padding:10px; border:1px solid var(--vehicle-line); }
.admin-vehicle-record-card dt { font-size:8px; font-weight:800; letter-spacing:.12em; color:var(--vehicle-muted); }
.admin-vehicle-record-card dd { margin:6px 0 0; font-weight:700; }
.admin-vehicle-record-card > small { grid-column:1/-1; color:var(--vehicle-muted); }
.admin-vehicle-cycles-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.admin-vehicle-cycles-grid article { padding:15px; border:1px solid var(--vehicle-line); background:rgba(255,255,255,.4); }
.admin-vehicle-cycles-grid span { font-size:8px; font-weight:800; letter-spacing:.14em; color:var(--vehicle-rust); }
.admin-vehicle-cycles-grid h4 { margin:7px 0; }
.admin-vehicle-cycles-grid p { margin:0; font-size:12px; color:var(--vehicle-muted); }

@media (max-width: 1050px) {
    .dashboard-vehicle-grid,
    .admin-vehicle-settings-grid,
    .dashboard-vehicle-mandatory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-vehicle-summary,
    .admin-vehicle-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-vehicle-owned-card { grid-template-columns:auto 1fr; }
    .dashboard-vehicle-owned-values { grid-column:1/-1; }
    .dashboard-vehicle-owned-note { grid-column:1/-1; }
    .admin-vehicle-heading { display:block; }
    .admin-vehicle-summary { margin-top:24px; }
    .admin-vehicle-cycles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
    .dashboard-vehicles-heading { display:block; }
    .dashboard-vehicle-character-selector { margin-top:22px; }
    .dashboard-vehicle-grid,
    .admin-vehicle-settings-grid,
    .dashboard-vehicle-mandatory-grid,
    .dashboard-vehicle-summary,
    .admin-vehicle-summary,
    .admin-vehicle-charges,
    .admin-vehicle-records-grid,
    .admin-vehicle-cycles-grid { grid-template-columns:1fr; }
    .dashboard-vehicle-owned-card { grid-template-columns:1fr; }
    .dashboard-vehicle-owned-values { grid-template-columns:1fr; }
    .admin-vehicle-charges section { grid-template-columns:1fr; }
    .admin-vehicle-record-card dl { grid-template-columns:1fr; }
}

/* ETAPA 14A V2 — personagem que não dirige */
.dashboard-vehicle-option.does-not-drive,
.dashboard-vehicle-mandatory-grid article.does-not-drive,
.admin-vehicle-setting-card.does-not-drive,
.admin-vehicle-record-card.does-not-drive {
    border-style: dashed;
    background: rgba(29, 33, 28, .035);
}
.dashboard-vehicle-owned-card.does-not-drive {
    background: #343831;
}
.admin-vehicle-setting-card.does-not-drive input:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* ==========================================
   ETAPA 14A V3 — GARAGEM E MÚLTIPLOS VEÍCULOS
========================================== */

.dashboard-vehicle-garage-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-vehicle-garage-heading > div > span,
.dashboard-vehicle-garage-title > span {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    color: #8d3b2a;
}

.dashboard-vehicle-garage-heading h3 {
    margin: 8px 0 6px;
    font-family: Georgia, serif;
    font-size: clamp(26px, 3vw, 42px);
}

.dashboard-vehicle-garage-heading p {
    margin: 0;
    color: #66665f;
    max-width: 760px;
}

.dashboard-vehicle-garage-heading > strong {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: Georgia, serif;
    font-size: 25px;
    white-space: nowrap;
}

.dashboard-vehicle-garage-heading > strong small {
    margin-top: 5px;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: .16em;
}

.dashboard-vehicle-garage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.dashboard-vehicle-garage-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: 26px;
    border: 1px solid rgba(49, 48, 42, .22);
    background: rgba(255, 255, 255, .38);
}

.dashboard-vehicle-garage-card.is-primary {
    border: 2px solid #8d3b2a;
    box-shadow: 0 12px 34px rgba(72, 43, 31, .10);
}

.dashboard-vehicle-garage-icon {
    margin-bottom: 18px;
    font-size: 38px;
}

.dashboard-vehicle-garage-title h4 {
    margin: 6px 0 5px;
    font-family: Georgia, serif;
    font-size: 30px;
}

.dashboard-vehicle-garage-title p {
    margin: 0;
    color: #66665f;
}

.dashboard-vehicle-garage-card dl {
    display: grid;
    gap: 9px;
    margin: 24px 0;
}

.dashboard-vehicle-garage-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(49, 48, 42, .14);
}

.dashboard-vehicle-garage-card dt {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.dashboard-vehicle-garage-card dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
}

.dashboard-vehicle-garage-card button,
.dashboard-vehicle-primary-badge {
    width: 100%;
    margin-top: auto;
    padding: 15px 16px;
    border: 0;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
}

.dashboard-vehicle-garage-card button {
    cursor: pointer;
    color: #f7f2e7;
    background: #8d3b2a;
}

.dashboard-vehicle-garage-card button:disabled {
    cursor: wait;
    opacity: .55;
}

.dashboard-vehicle-primary-badge {
    color: #8d3b2a;
    border: 1px solid #8d3b2a;
    background: rgba(141, 59, 42, .07);
}

.admin-vehicle-record-card.is-primary {
    border-color: #8d3b2a;
    box-shadow: inset 4px 0 0 #8d3b2a;
}

@media (max-width: 720px) {
    .dashboard-vehicle-garage-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-vehicle-garage-heading > strong {
        align-items: flex-start;
    }
}

/* =====================================================
   HOTFIX ETAPA 14A V3 — ADMIN DE VEÍCULOS NO PADRÃO
   Cole UMA VEZ no final do css/style.css
   ===================================================== */

/* Painel principal: mesmo acabamento escuro do Mercado/Admin */
.admin-vehicle-panel {
    --vehicle-admin-ink: var(--ink, #102a33);
    --vehicle-admin-cream: var(--cream, #f1ddc2);
    --vehicle-admin-sand: var(--sand, #dfc09b);
    --vehicle-admin-rust: var(--rust, #963d2b);
    --vehicle-admin-line: rgba(223, 192, 155, .16);

    margin: 40px 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(223, 192, 155, .18);
    background: var(--vehicle-admin-ink);
    color: var(--vehicle-admin-cream);
}

.admin-vehicle-panel * {
    box-sizing: border-box;
}

/* Cabeçalho */
.admin-vehicle-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    align-items: end;
    gap: 45px;
    padding: 40px;
    border-bottom: 1px solid var(--vehicle-admin-line);
}

.admin-vehicle-heading > div:first-child > span,
.admin-vehicle-records-heading > span,
.admin-vehicle-cycles-heading > span,
.admin-vehicle-charges section > div > span {
    display: block;
    margin: 0;
    color: var(--vehicle-admin-sand);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 4px;
}

.admin-vehicle-heading h2 {
    margin: 14px 0;
    color: var(--vehicle-admin-cream);
    font-size: clamp(34px, 5vw, 54px);
    font-weight: normal;
    line-height: 1;
}

.admin-vehicle-heading p {
    max-width: 680px;
    margin: 0;
    color: rgba(241, 221, 194, .62);
    font: 11px/1.8 Arial, sans-serif;
}

/* Resumo */
.admin-vehicle-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    margin: 0;
    gap: 0;
    border: 1px solid var(--vehicle-admin-line);
    background: transparent;
}

.admin-vehicle-summary article {
    min-height: 116px;
    padding: 22px;
    border: 0;
    border-right: 1px solid var(--vehicle-admin-line);
    border-bottom: 1px solid var(--vehicle-admin-line);
    background: transparent;
}

.admin-vehicle-summary article:nth-child(2n) {
    border-right: 0;
}

.admin-vehicle-summary article:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.admin-vehicle-summary span {
    display: block;
    color: var(--vehicle-admin-sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-vehicle-summary strong {
    display: block;
    margin: 18px 0 7px;
    color: var(--vehicle-admin-cream);
    font-size: clamp(23px, 2.4vw, 34px);
    font-weight: normal;
    line-height: 1;
    overflow-wrap: anywhere;
}

.admin-vehicle-summary p {
    margin: 0;
    color: rgba(241, 221, 194, .55);
    font: 10px/1.5 Arial, sans-serif;
}

/* Mensagens */
.admin-vehicle-panel .admin-action-message {
    margin: 24px 40px 0;
    padding: 17px 20px;
    border: 1px solid var(--vehicle-admin-line);
    background: rgba(241, 221, 194, .06);
    color: var(--vehicle-admin-cream);
    font: 11px/1.6 Arial, sans-serif;
}

.admin-vehicle-panel .admin-action-message.success {
    border-color: rgba(119, 171, 125, .55);
    background: rgba(74, 117, 79, .22);
}

.admin-vehicle-panel .admin-action-message.error {
    border-color: rgba(197, 81, 61, .7);
    background: rgba(150, 61, 43, .25);
}

/* Configuração das categorias */
.admin-vehicle-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 0;
}

.admin-vehicle-setting-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    min-height: 100%;
    padding: 25px;
    border: 0;
    border-right: 1px solid rgba(223, 192, 155, .13);
    border-bottom: 1px solid rgba(223, 192, 155, .13);
    background: transparent;
    color: var(--vehicle-admin-cream);
}

.admin-vehicle-setting-card:nth-child(3n) {
    border-right: 0;
}

.admin-vehicle-setting-card.does-not-drive {
    border-style: solid;
    background: rgba(241, 221, 194, .035);
}

.admin-vehicle-setting-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 0 3px;
    border: 1px solid rgba(223, 192, 155, .20);
    background: rgba(241, 221, 194, .035);
    color: var(--vehicle-admin-cream);
    font-size: 27px;
}

.admin-vehicle-setting-heading span,
.admin-vehicle-setting-card label > span {
    display: block;
    color: var(--vehicle-admin-sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-vehicle-setting-heading h3 {
    margin: 9px 0 3px;
    color: var(--vehicle-admin-cream);
    font-size: 27px;
    font-weight: normal;
}

.admin-vehicle-setting-card label {
    display: block;
    margin: 0;
    color: var(--vehicle-admin-cream);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-vehicle-setting-card label > div {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: stretch;
    margin-top: 8px;
    border: 0;
    background: transparent;
}

.admin-vehicle-setting-card label small {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(223, 192, 155, .21);
    border-right: 0;
    color: var(--vehicle-admin-sand);
    font: 8px Arial, sans-serif;
}

.admin-vehicle-setting-card input[type="number"] {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 0 13px;
    border: 1px solid rgba(223, 192, 155, .21);
    border-radius: 0;
    outline: none;
    background: rgba(241, 221, 194, .06);
    color: var(--vehicle-admin-cream);
    font: 12px Arial, sans-serif;
    color-scheme: dark;
}

.admin-vehicle-setting-card input[type="number"]:focus,
.admin-vehicle-charges input:focus {
    border-color: var(--vehicle-admin-sand);
    box-shadow: inset 0 0 0 1px var(--vehicle-admin-sand);
}

.admin-vehicle-setting-card input:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.admin-vehicle-active {
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    margin-top: auto !important;
    color: rgba(241, 221, 194, .67) !important;
    font: 10px Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

.admin-vehicle-active input[type="checkbox"] {
    width: 17px;
    height: 17px;
    min-height: 17px;
    margin: 0;
    accent-color: var(--vehicle-admin-rust);
}

/* Botão salvar */
.admin-vehicle-save {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 65px;
    margin: 0;
    padding: 0 38px;
    border: 0;
    border-radius: 0;
    background: var(--vehicle-admin-rust);
    color: var(--vehicle-admin-cream);
    cursor: pointer;
    font: 700 8px Arial, sans-serif;
    letter-spacing: 3px;
}

.admin-vehicle-save:hover:not(:disabled),
.admin-vehicle-charges button:hover:not(:disabled) {
    filter: brightness(1.08);
}

.admin-vehicle-save:disabled,
.admin-vehicle-charges button:disabled {
    cursor: wait;
    opacity: .58;
}

/* Cobranças */
.admin-vehicle-charges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--vehicle-admin-line);
    border-bottom: 1px solid var(--vehicle-admin-line);
}

.admin-vehicle-charges section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, .52fr);
    align-items: end;
    gap: 22px;
    padding: 32px 40px;
    border: 0;
    border-right: 1px solid var(--vehicle-admin-line);
    background: transparent;
}

.admin-vehicle-charges section:last-child {
    border-right: 0;
}

.admin-vehicle-charges h3 {
    margin: 10px 0 7px;
    color: var(--vehicle-admin-cream);
    font-size: 27px;
    font-weight: normal;
}

.admin-vehicle-charges p {
    margin: 0;
    color: rgba(241, 221, 194, .58);
    font: 10px/1.7 Arial, sans-serif;
}

.admin-vehicle-charges label {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--vehicle-admin-sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-vehicle-charges input {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(223, 192, 155, .21);
    border-radius: 0;
    outline: none;
    background: rgba(241, 221, 194, .06);
    color: var(--vehicle-admin-cream);
    font: 11px Arial, sans-serif;
    color-scheme: dark;
}

.admin-vehicle-charges button {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: var(--vehicle-admin-rust);
    color: var(--vehicle-admin-cream);
    cursor: pointer;
    font: 700 8px Arial, sans-serif;
    letter-spacing: 2.5px;
}

/* Títulos internos */
.admin-vehicle-records-heading,
.admin-vehicle-cycles-heading {
    margin: 0;
    padding: 34px 40px;
    border-top: 1px solid var(--vehicle-admin-line);
    border-bottom: 1px solid var(--vehicle-admin-line);
}

.admin-vehicle-records-heading h3,
.admin-vehicle-cycles-heading h3 {
    margin: 12px 0 0;
    color: var(--vehicle-admin-cream);
    font-size: 34px;
    font-weight: normal;
}

/* Veículos registrados */
.admin-vehicle-records-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

.admin-vehicle-record-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    min-width: 0;
    padding: 25px;
    border: 0;
    border-right: 1px solid rgba(223, 192, 155, .13);
    border-bottom: 1px solid rgba(223, 192, 155, .13);
    background: transparent;
    color: var(--vehicle-admin-cream);
}

.admin-vehicle-record-card:nth-child(2n) {
    border-right: 0;
}

.admin-vehicle-record-card.is-primary {
    border-color: rgba(223, 192, 155, .13);
    box-shadow: inset 4px 0 0 var(--vehicle-admin-rust);
    background: rgba(150, 61, 43, .08);
}

.admin-vehicle-record-card.does-not-drive {
    border-style: solid;
    background: rgba(241, 221, 194, .025);
}

.admin-vehicle-record-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(223, 192, 155, .20);
    background: rgba(241, 221, 194, .035);
    color: var(--vehicle-admin-cream);
    font-size: 27px;
}

.admin-vehicle-record-card > div:nth-child(2) > span,
.admin-vehicle-record-card dt {
    color: var(--vehicle-admin-sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-vehicle-record-card h4 {
    margin: 9px 0 5px;
    color: var(--vehicle-admin-cream);
    font-size: 27px;
    font-weight: normal;
}

.admin-vehicle-record-card p {
    margin: 0;
    color: rgba(241, 221, 194, .58);
    font: 10px Arial, sans-serif;
}

.admin-vehicle-record-card dl {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 5px 0 0;
    border: 1px solid var(--vehicle-admin-line);
}

.admin-vehicle-record-card dl div {
    min-width: 0;
    padding: 14px;
    border: 0;
    border-right: 1px solid var(--vehicle-admin-line);
}

.admin-vehicle-record-card dl div:last-child {
    border-right: 0;
}

.admin-vehicle-record-card dd {
    margin: 9px 0 0;
    color: var(--vehicle-admin-cream);
    font: 11px/1.45 Arial, sans-serif;
    overflow-wrap: anywhere;
}

.admin-vehicle-record-card > small {
    grid-column: 1 / -1;
    color: rgba(241, 221, 194, .48);
    font: 9px/1.65 Arial, sans-serif;
    overflow-wrap: anywhere;
}

/* Histórico de cobranças */
.admin-vehicle-cycles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

.admin-vehicle-cycles-grid article {
    min-width: 0;
    padding: 22px;
    border: 0;
    border-right: 1px solid rgba(223, 192, 155, .13);
    border-bottom: 1px solid rgba(223, 192, 155, .13);
    background: transparent;
}

.admin-vehicle-cycles-grid article:nth-child(4n) {
    border-right: 0;
}

.admin-vehicle-cycles-grid span {
    color: var(--vehicle-admin-sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-vehicle-cycles-grid h4 {
    margin: 12px 0 7px;
    color: var(--vehicle-admin-cream);
    font-size: 21px;
    font-weight: normal;
}

.admin-vehicle-cycles-grid p {
    margin: 0;
    color: rgba(241, 221, 194, .56);
    font: 10px/1.55 Arial, sans-serif;
}

/* Estados vazios dentro do painel */
.admin-vehicle-panel .admin-market-empty {
    padding: 40px;
    border-bottom: 1px solid var(--vehicle-admin-line);
    background: transparent;
    color: rgba(241, 221, 194, .58);
    text-align: center;
    font: 11px Arial, sans-serif;
}

/* Responsividade */
@media (max-width: 1180px) {
    .admin-vehicle-heading {
        grid-template-columns: 1fr;
    }

    .admin-vehicle-summary {
        width: 100%;
    }

    .admin-vehicle-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-vehicle-setting-card:nth-child(3n) {
        border-right: 1px solid rgba(223, 192, 155, .13);
    }

    .admin-vehicle-setting-card:nth-child(2n) {
        border-right: 0;
    }

    .admin-vehicle-cycles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-vehicle-cycles-grid article:nth-child(4n) {
        border-right: 1px solid rgba(223, 192, 155, .13);
    }

    .admin-vehicle-cycles-grid article:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 820px) {
    .admin-vehicle-heading,
    .admin-vehicle-charges section,
    .admin-vehicle-records-heading,
    .admin-vehicle-cycles-heading {
        padding-right: 24px;
        padding-left: 24px;
    }

    .admin-vehicle-charges {
        grid-template-columns: 1fr;
    }

    .admin-vehicle-charges section {
        border-right: 0;
        border-bottom: 1px solid var(--vehicle-admin-line);
    }

    .admin-vehicle-charges section:last-child {
        border-bottom: 0;
    }

    .admin-vehicle-records-grid {
        grid-template-columns: 1fr;
    }

    .admin-vehicle-record-card {
        border-right: 0;
    }
}

@media (max-width: 620px) {
    .admin-vehicle-heading {
        padding: 30px 20px;
    }

    .admin-vehicle-panel .admin-action-message {
        margin-right: 20px;
        margin-left: 20px;
    }

    .admin-vehicle-summary,
    .admin-vehicle-settings-grid,
    .admin-vehicle-cycles-grid {
        grid-template-columns: 1fr;
    }

    .admin-vehicle-summary article,
    .admin-vehicle-summary article:nth-child(2n),
    .admin-vehicle-summary article:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--vehicle-admin-line);
    }

    .admin-vehicle-summary article:last-child {
        border-bottom: 0;
    }

    .admin-vehicle-setting-card,
    .admin-vehicle-setting-card:nth-child(2n),
    .admin-vehicle-setting-card:nth-child(3n),
    .admin-vehicle-cycles-grid article,
    .admin-vehicle-cycles-grid article:nth-child(2n),
    .admin-vehicle-cycles-grid article:nth-child(4n) {
        border-right: 0;
    }

    .admin-vehicle-charges section {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }

    .admin-vehicle-records-heading,
    .admin-vehicle-cycles-heading {
        padding: 30px 20px;
    }

    .admin-vehicle-record-card {
        grid-template-columns: 1fr;
        padding: 22px 20px;
    }

    .admin-vehicle-record-card dl,
    .admin-vehicle-record-card > small {
        grid-column: 1;
    }

    .admin-vehicle-record-card dl {
        grid-template-columns: 1fr;
    }

    .admin-vehicle-record-card dl div,
    .admin-vehicle-record-card dl div:last-child {
        border-right: 0;
        border-bottom: 1px solid var(--vehicle-admin-line);
    }

    .admin-vehicle-record-card dl div:last-child {
        border-bottom: 0;
    }
}

/* =====================================================
   HOTFIX — VALIDADE SEMANAL NO PADRÃO DO ADMIN
   Cole UMA ÚNICA VEZ no final do css/style.css
   ===================================================== */

#adminMarketPanel .admin-inventory-validity {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 40px;
    border: 0;
    border-top: 1px solid rgba(223, 192, 155, .14);
    border-bottom: 1px solid rgba(223, 192, 155, .14);
    background: rgba(241, 221, 194, .025);
    color: var(--cream, #f1ddc2);
}

#adminMarketPanel .admin-inventory-validity *,
#adminMarketPanel .admin-inventory-validity *::before,
#adminMarketPanel .admin-inventory-validity *::after {
    box-sizing: border-box;
}

#adminMarketPanel .admin-inventory-validity-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
    align-items: end;
    gap: 42px;
    margin: 0;
}

#adminMarketPanel .admin-inventory-validity-heading > div,
#adminMarketPanel .admin-inventory-validity-heading label {
    min-width: 0;
}

#adminMarketPanel .admin-inventory-validity-heading > div > span,
#adminMarketPanel .admin-inventory-validity-heading label > span {
    display: block;
    margin: 0 0 11px;
    color: var(--sand, #dfc09b);
    font: 700 8px/1.2 Arial, sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#adminMarketPanel .admin-inventory-validity-heading h3 {
    margin: 0 0 12px;
    color: var(--cream, #f1ddc2);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(31px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.02;
}

#adminMarketPanel .admin-inventory-validity-heading p {
    max-width: 760px;
    margin: 0;
    color: rgba(241, 221, 194, .62);
    font: 11px/1.75 Arial, sans-serif;
}

#adminMarketPanel .admin-inventory-validity-heading label {
    display: flex;
    flex-direction: column;
    margin: 0;
}

#adminMarketPanel .admin-inventory-validity-heading input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid rgba(223, 192, 155, .22);
    border-radius: 0;
    outline: 0;
    background: rgba(241, 221, 194, .06);
    color: var(--cream, #f1ddc2);
    font: 11px Arial, sans-serif;
    color-scheme: dark;
}

#adminMarketPanel .admin-inventory-validity-heading input[type="date"]:focus {
    border-color: var(--sand, #dfc09b);
    box-shadow: inset 0 0 0 1px var(--sand, #dfc09b);
}

#adminMarketPanel .admin-inventory-validity-heading input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .78;
    filter: invert(1) sepia(.25);
}

#adminMarketPanel .admin-inventory-validity-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 30px 0 0;
    border: 1px solid rgba(223, 192, 155, .16);
    background: transparent;
}

#adminMarketPanel .admin-inventory-validity-summary article {
    display: block;
    min-width: 0;
    min-height: 142px;
    margin: 0;
    padding: 22px;
    border: 0;
    border-right: 1px solid rgba(223, 192, 155, .14);
    background: transparent;
    color: var(--cream, #f1ddc2);
}

#adminMarketPanel .admin-inventory-validity-summary article:last-child {
    border-right: 0;
}

#adminMarketPanel .admin-inventory-validity-summary span {
    display: block;
    margin: 0;
    color: var(--sand, #dfc09b);
    font: 700 7px/1.35 Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#adminMarketPanel .admin-inventory-validity-summary strong {
    display: block;
    margin: 18px 0 9px;
    color: var(--cream, #f1ddc2);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 2.6vw, 35px);
    font-weight: 400;
    line-height: 1;
    overflow-wrap: anywhere;
}

#adminMarketPanel .admin-inventory-validity-summary p {
    display: block;
    margin: 0;
    color: rgba(241, 221, 194, .55);
    font: 10px/1.55 Arial, sans-serif;
    letter-spacing: 0;
}

#adminMarketPanel .admin-inventory-validity-progress {
    display: block;
    width: 100%;
    margin: 18px 0 0;
    padding: 16px 18px;
    border: 1px solid rgba(223, 192, 155, .14);
    border-left: 4px solid var(--rust, #963d2b);
    background: rgba(241, 221, 194, .045);
    color: rgba(241, 221, 194, .72);
    font: 11px/1.65 Arial, sans-serif;
}

#adminMarketPanel .admin-inventory-validity-progress.info {
    border-left-color: var(--sand, #dfc09b);
}

#adminMarketPanel .admin-inventory-validity-progress.success {
    border-left-color: #6f9a76;
    background: rgba(77, 120, 84, .14);
}

#adminMarketPanel .admin-inventory-validity-progress.error {
    border-left-color: #c45c49;
    background: rgba(150, 61, 43, .18);
}

#adminMarketPanel .admin-inventory-validity-progress.processing {
    border-left-color: #c99a52;
    background: rgba(168, 120, 53, .14);
}

#adminMarketPanel .admin-inventory-validity-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 64px;
    margin: 18px 0 0;
    padding: 0 38px;
    border: 0;
    border-radius: 0;
    background: var(--rust, #963d2b);
    color: var(--cream, #f1ddc2);
    cursor: pointer;
    font: 700 8px Arial, sans-serif;
    letter-spacing: 3px;
    text-align: left;
    text-transform: uppercase;
}

#adminMarketPanel .admin-inventory-validity-button:hover:not(:disabled) {
    filter: brightness(1.08);
}

#adminMarketPanel .admin-inventory-validity-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

#adminMarketPanel .admin-inventory-validity-button span {
    flex: 0 0 auto;
    font-size: 17px;
    letter-spacing: 0;
}

@media (max-width: 980px) {
    #adminMarketPanel .admin-inventory-validity-heading {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 24px;
    }

    #adminMarketPanel .admin-inventory-validity-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #adminMarketPanel .admin-inventory-validity-summary article:nth-child(2n) {
        border-right: 0;
    }

    #adminMarketPanel .admin-inventory-validity-summary article:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(223, 192, 155, .14);
    }
}

@media (max-width: 650px) {
    #adminMarketPanel .admin-inventory-validity {
        padding: 28px 20px;
    }

    #adminMarketPanel .admin-inventory-validity-summary {
        grid-template-columns: 1fr;
    }

    #adminMarketPanel .admin-inventory-validity-summary article,
    #adminMarketPanel .admin-inventory-validity-summary article:nth-child(2n) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(223, 192, 155, .14);
    }

    #adminMarketPanel .admin-inventory-validity-summary article:last-child {
        border-bottom: 0;
    }

    #adminMarketPanel .admin-inventory-validity-button {
        min-height: 60px;
        padding: 0 20px;
        font-size: 7px;
        letter-spacing: 2px;
    }
}

/* ==========================================================
   HOTFIX — CORES DA GARAGEM NO DASHBOARD
   Cole UMA ÚNICA VEZ no final de css/style.css
   Não substitui dashboard.js, admin.js ou firestore.rules.
   ========================================================== */

/* Usa a mesma paleta do Mercado e do Inventário. */
.dashboard-vehicles {
    --vehicle-cream: var(--cream, #f1ddc2);
    --vehicle-paper: var(--cream, #f1ddc2);
    --vehicle-ink: var(--ink, #102a33);
    --vehicle-muted: rgba(16, 42, 51, .64);
    --vehicle-rust: var(--rust, #b24725);
    --vehicle-gold: var(--sand, #dfc09b);
    --vehicle-line: rgba(96, 54, 31, .20);

    margin: 40px 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(241, 221, 194, .28);
    color: var(--vehicle-ink);
}

.dashboard-vehicles *,
.dashboard-vehicle-mandatory-modal * {
    box-sizing: border-box;
}

/* Cabeçalho */
.dashboard-vehicles-heading {
    padding: 44px;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
    background: transparent;
}

.dashboard-vehicles-heading > div > span,
.dashboard-vehicle-catalog-heading > span,
.dashboard-vehicle-garage-heading > div > span,
.dashboard-vehicle-garage-title > span,
.dashboard-vehicle-required > span {
    color: var(--vehicle-rust);
}

.dashboard-vehicles-heading h2,
.dashboard-vehicle-catalog-heading h3,
.dashboard-vehicle-garage-heading h3,
.dashboard-vehicle-garage-title h4,
.dashboard-vehicle-required h3,
.dashboard-vehicle-empty h3 {
    color: var(--vehicle-ink);
}

.dashboard-vehicles-heading p,
.dashboard-vehicle-catalog-heading p,
.dashboard-vehicle-garage-heading p,
.dashboard-vehicle-garage-title p,
.dashboard-vehicle-empty p,
.dashboard-vehicle-required p {
    color: rgba(16, 42, 51, .64);
}

/* Seletor de personagem */
.dashboard-vehicle-character-selector span {
    color: var(--vehicle-rust);
}

.dashboard-vehicle-character-selector select {
    border-color: rgba(96, 54, 31, .27);
    background: rgba(255, 255, 255, .34);
    color: var(--vehicle-ink);
}

/* Mensagens */
.dashboard-vehicle-message {
    margin: 24px 44px 0;
    border: 0;
    background: var(--sand, #dfc09b);
    color: var(--vehicle-ink);
}

.dashboard-vehicle-message.success {
    background: var(--vehicle-ink);
    color: var(--vehicle-cream);
}

.dashboard-vehicle-message.error {
    background: var(--vehicle-rust);
    color: var(--vehicle-cream);
}

/* Resumo */
.dashboard-vehicle-summary {
    margin: 0;
    gap: 0;
    border: 0;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
    background: transparent;
}

.dashboard-vehicle-summary article {
    min-height: 135px;
    padding: 25px;
    border-right: 1px solid rgba(96, 54, 31, .16);
    background: transparent;
}

.dashboard-vehicle-summary article:last-child {
    border-right: 0;
}

.dashboard-vehicle-summary span {
    color: var(--vehicle-rust);
}

.dashboard-vehicle-summary strong {
    color: var(--vehicle-ink);
}

.dashboard-vehicle-summary p {
    color: rgba(16, 42, 51, .58);
}

/* Estado sem veículo / escolha ainda não feita */
.dashboard-vehicle-required,
.dashboard-vehicle-empty {
    margin: 30px 44px;
    border: 1px solid rgba(96, 54, 31, .24);
    background: rgba(255, 255, 255, .24);
    color: var(--vehicle-ink);
}

/* Garagem */
.dashboard-vehicle-current {
    color: var(--vehicle-ink);
}

.dashboard-vehicle-garage-heading {
    margin: 34px 44px 22px;
}

.dashboard-vehicle-garage-heading > strong {
    color: var(--vehicle-ink);
}

.dashboard-vehicle-garage-heading > strong small {
    color: var(--vehicle-rust);
}

.dashboard-vehicle-garage-grid {
    padding: 0 44px 42px;
}

.dashboard-vehicle-garage-card {
    border-color: rgba(96, 54, 31, .22);
    background: rgba(255, 255, 255, .30);
    color: var(--vehicle-ink);
}

.dashboard-vehicle-garage-card.is-primary {
    border-color: var(--vehicle-rust);
    box-shadow: inset 4px 0 0 var(--vehicle-rust);
}

.dashboard-vehicle-garage-icon {
    color: var(--vehicle-rust);
}

.dashboard-vehicle-garage-card dl div {
    border-bottom-color: rgba(96, 54, 31, .14);
}

.dashboard-vehicle-garage-card dt {
    color: rgba(16, 42, 51, .58);
}

.dashboard-vehicle-garage-card dd {
    color: var(--vehicle-ink);
}

.dashboard-vehicle-garage-card button {
    border: 0;
    background: var(--vehicle-rust);
    color: var(--vehicle-cream);
}

.dashboard-vehicle-garage-card button:hover:not(:disabled) {
    background: var(--vehicle-ink);
}

.dashboard-vehicle-primary-badge {
    border-color: var(--vehicle-rust);
    background: rgba(178, 71, 37, .08);
    color: var(--vehicle-rust);
}

/* Personagem que não dirige */
.dashboard-vehicle-owned-card,
.dashboard-vehicle-owned-card.does-not-drive {
    margin-right: 44px;
    margin-left: 44px;
    border-color: rgba(223, 192, 155, .20);
    background: var(--vehicle-ink);
    color: var(--vehicle-cream);
}

.dashboard-vehicle-owned-card .dashboard-vehicle-owned-heading span {
    color: var(--vehicle-gold);
}

.dashboard-vehicle-owned-card .dashboard-vehicle-owned-heading p,
.dashboard-vehicle-owned-card .dashboard-vehicle-owned-note,
.dashboard-vehicle-owned-card .dashboard-vehicle-owned-values span {
    color: rgba(241, 221, 194, .64);
}

.dashboard-vehicle-owned-card .dashboard-vehicle-owned-values div,
.dashboard-vehicle-owned-card .dashboard-vehicle-owned-icon {
    border-color: rgba(223, 192, 155, .20);
}

/* Catálogo */
.dashboard-vehicle-catalog-heading {
    margin: 0;
    padding: 38px 44px 22px;
    border-top: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-vehicle-grid {
    padding: 0 44px 44px;
}

.dashboard-vehicle-option,
.dashboard-vehicle-option.does-not-drive {
    border-color: rgba(96, 54, 31, .22);
    background: rgba(255, 255, 255, .30);
    color: var(--vehicle-ink);
}

.dashboard-vehicle-option.does-not-drive {
    border-style: dashed;
    background: rgba(96, 54, 31, .045);
}

.dashboard-vehicle-option-icon {
    border-color: rgba(96, 54, 31, .22);
    color: var(--vehicle-rust);
}

.dashboard-vehicle-option-heading span,
.dashboard-vehicle-option-price span,
.dashboard-vehicle-option-costs span {
    color: var(--vehicle-rust);
}

.dashboard-vehicle-option-heading h3,
.dashboard-vehicle-option-price strong,
.dashboard-vehicle-option-costs strong {
    color: var(--vehicle-ink);
}

.dashboard-vehicle-option-price {
    border-color: rgba(96, 54, 31, .16);
}

.dashboard-vehicle-option button {
    border: 0;
    background: var(--vehicle-rust);
    color: var(--vehicle-cream);
}

.dashboard-vehicle-option button:hover:not(:disabled) {
    background: var(--vehicle-ink);
}

/* Modal de escolha inicial */
.dashboard-vehicle-mandatory-modal {
    --vehicle-cream: var(--cream, #f1ddc2);
    --vehicle-ink: var(--ink, #102a33);
    background: rgba(7, 27, 33, .88);
}

.dashboard-vehicle-mandatory-card {
    background: var(--vehicle-cream);
    color: var(--vehicle-ink);
}

.dashboard-vehicle-mandatory-kicker,
.dashboard-vehicle-mandatory-grid article > span {
    color: var(--rust, #b24725);
}

.dashboard-vehicle-mandatory-card > div > p,
.dashboard-vehicle-mandatory-grid article > small,
.dashboard-vehicle-mandatory-footer {
    color: rgba(16, 42, 51, .64);
}

.dashboard-vehicle-mandatory-balance {
    border-color: rgba(96, 54, 31, .20);
}

.dashboard-vehicle-mandatory-warning {
    border-color: var(--rust, #b24725);
    background: rgba(178, 71, 37, .06);
    color: var(--rust, #b24725);
}

.dashboard-vehicle-mandatory-grid article,
.dashboard-vehicle-mandatory-grid article.does-not-drive {
    border-color: rgba(96, 54, 31, .20);
    background: rgba(255, 255, 255, .30);
    color: var(--vehicle-ink);
}

.dashboard-vehicle-mandatory-grid button {
    border: 0;
    background: var(--rust, #b24725);
    color: var(--cream, #f1ddc2);
}

.dashboard-vehicle-mandatory-grid button:hover:not(:disabled) {
    background: var(--ink, #102a33);
}

@media (max-width: 720px) {
    .dashboard-vehicles-heading,
    .dashboard-vehicle-catalog-heading {
        padding-right: 24px;
        padding-left: 24px;
    }

    .dashboard-vehicle-message,
    .dashboard-vehicle-required,
    .dashboard-vehicle-empty,
    .dashboard-vehicle-garage-heading,
    .dashboard-vehicle-owned-card {
        margin-right: 24px;
        margin-left: 24px;
    }

    .dashboard-vehicle-grid,
    .dashboard-vehicle-garage-grid {
        padding-right: 24px;
        padding-left: 24px;
    }
}

/* =============================================
   ETAPA 14B — VENDA DE VEÍCULOS
   Cole uma única vez no final do css/style.css
============================================= */

.dashboard-vehicle-garage-actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.dashboard-vehicle-garage-actions .dashboard-vehicle-primary-badge {
    margin: 0;
}

.dashboard-vehicle-garage-card .dashboard-vehicle-sell-button {
    border: 1px solid rgba(153, 55, 40, .36);
    background: transparent;
    color: #993728;
}

.dashboard-vehicle-garage-card .dashboard-vehicle-sell-button:hover:not(:disabled) {
    border-color: #993728;
    background: #993728;
    color: #f1ddc2;
}

.dashboard-vehicle-empty-garage {
    margin-top: 0;
}

.admin-vehicle-record-card.is-sold {
    opacity: .72;
    background: rgba(153, 55, 40, .055);
}

.admin-vehicle-record-card.is-sold .admin-vehicle-record-icon {
    border-color: rgba(187, 111, 82, .36);
    color: #bb6f52;
}

.admin-vehicle-record-card.is-sold > div:nth-child(2) > span {
    color: #bb6f52;
}

@media (max-width: 620px) {
    .dashboard-vehicle-garage-actions {
        width: 100%;
    }
}

/* ==========================================================
   ETAPA 15A — ROLAGEM ADMINISTRATIVA DE DADOS
   Cole UMA ÚNICA VEZ no final de css/style.css
   ========================================================== */

/* ---------- ADMIN ---------- */
.admin-dice-panel {
    --dice-admin-ink: var(--ink, #102a33);
    --dice-admin-cream: var(--cream, #f1ddc2);
    --dice-admin-sand: var(--sand, #dfc09b);
    --dice-admin-rust: var(--rust, #963d2b);
    --dice-admin-line: rgba(223, 192, 155, .16);
    margin: 38px 0;
    overflow: hidden;
    border: 1px solid rgba(223, 192, 155, .18);
    background: var(--dice-admin-ink);
    color: var(--dice-admin-cream);
}

.admin-dice-panel *,
.dashboard-dice-history-section * {
    box-sizing: border-box;
}

.admin-dice-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    align-items: end;
    gap: 44px;
    padding: 40px;
    border-bottom: 1px solid var(--dice-admin-line);
}

.admin-dice-heading > div:first-child > span,
.admin-dice-form-heading > span,
.admin-dice-preview-heading > span,
.admin-dice-history-heading > div > span,
.admin-dice-field > span,
.admin-dice-history-heading label > span,
.admin-dice-calculation > span,
.admin-dice-result > div:first-child > span {
    display: block;
    color: var(--dice-admin-sand);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 3px;
}

.admin-dice-heading h2 {
    margin: 14px 0;
    color: var(--dice-admin-cream);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: normal;
    line-height: 1;
}

.admin-dice-heading p,
.admin-dice-form-heading p,
.admin-dice-preview-heading p,
.admin-dice-history-heading p {
    margin: 0;
    color: rgba(241, 221, 194, .62);
    font: 11px/1.8 Arial, sans-serif;
}

.admin-dice-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--dice-admin-line);
}

.admin-dice-summary article {
    min-height: 112px;
    padding: 22px;
    border-right: 1px solid var(--dice-admin-line);
    border-bottom: 1px solid var(--dice-admin-line);
}

.admin-dice-summary article:nth-child(2n) { border-right: 0; }
.admin-dice-summary article:nth-last-child(-n + 2) { border-bottom: 0; }
.admin-dice-summary span {
    color: var(--dice-admin-sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}
.admin-dice-summary strong {
    display: block;
    margin: 16px 0 6px;
    color: var(--dice-admin-cream);
    font-size: 31px;
    font-weight: normal;
}
.admin-dice-summary p {
    margin: 0;
    color: rgba(241, 221, 194, .52);
    font: 10px/1.5 Arial, sans-serif;
}

.admin-dice-panel .admin-action-message {
    margin: 24px 40px 0;
    padding: 16px 18px;
    border: 1px solid var(--dice-admin-line);
    background: rgba(241, 221, 194, .05);
    color: var(--dice-admin-cream);
}
.admin-dice-panel .admin-action-message.success {
    border-color: rgba(119, 171, 125, .55);
    background: rgba(74, 117, 79, .22);
}
.admin-dice-panel .admin-action-message.error {
    border-color: rgba(197, 81, 61, .7);
    background: rgba(150, 61, 43, .25);
}

.admin-dice-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    border-bottom: 1px solid var(--dice-admin-line);
}

.admin-dice-form,
.admin-dice-character-preview {
    padding: 40px;
}
.admin-dice-character-preview {
    border-left: 1px solid var(--dice-admin-line);
    background: rgba(241, 221, 194, .025);
}

.admin-dice-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.admin-dice-form-heading,
.admin-dice-field-wide,
.admin-dice-calculation,
.admin-dice-roll-button { grid-column: 1 / -1; }
.admin-dice-form-heading h3,
.admin-dice-preview-heading h3,
.admin-dice-history-heading h3 {
    margin: 11px 0;
    color: var(--dice-admin-cream);
    font-size: 29px;
    font-weight: normal;
}

.admin-dice-field {
    display: grid;
    gap: 9px;
}
.admin-dice-field input,
.admin-dice-field select,
.admin-dice-field textarea,
.admin-dice-history-heading select {
    width: 100%;
    border: 1px solid rgba(223, 192, 155, .22);
    border-radius: 0;
    outline: 0;
    background: rgba(241, 221, 194, .045);
    color: var(--dice-admin-cream);
    font: 12px Arial, sans-serif;
}
.admin-dice-field input,
.admin-dice-field select,
.admin-dice-history-heading select { min-height: 50px; padding: 0 15px; }
.admin-dice-field textarea { min-height: 105px; padding: 15px; resize: vertical; }
.admin-dice-field input:focus,
.admin-dice-field select:focus,
.admin-dice-field textarea:focus,
.admin-dice-history-heading select:focus { border-color: var(--dice-admin-sand); }
.admin-dice-field option,
.admin-dice-history-heading option { color: #102a33; background: #f1ddc2; }

.admin-dice-calculation {
    padding: 22px;
    border: 1px solid var(--dice-admin-line);
    background: rgba(241, 221, 194, .035);
}
.admin-dice-calculation > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 15px 0 9px;
}
.admin-dice-calculation strong { color: var(--dice-admin-cream); font-size: 17px; font-weight: normal; }
.admin-dice-calculation small { color: var(--dice-admin-rust); font: 700 16px Arial, sans-serif; }
.admin-dice-calculation p { margin: 0; color: rgba(241, 221, 194, .60); font: 11px Arial, sans-serif; }

.admin-dice-roll-button {
    min-height: 58px;
    border: 0;
    background: var(--dice-admin-rust);
    color: var(--dice-admin-cream);
    font: 700 10px Arial, sans-serif;
    letter-spacing: 2px;
    cursor: pointer;
}
.admin-dice-roll-button:hover { filter: brightness(1.08); }
.admin-dice-roll-button:disabled { cursor: wait; opacity: .65; }

.admin-dice-attributes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 25px;
    border-top: 1px solid var(--dice-admin-line);
    border-left: 1px solid var(--dice-admin-line);
}
.admin-dice-attributes article {
    min-height: 78px;
    padding: 17px;
    border-right: 1px solid var(--dice-admin-line);
    border-bottom: 1px solid var(--dice-admin-line);
    transition: .18s ease;
}
.admin-dice-attributes article.selected {
    background: var(--dice-admin-rust);
    color: var(--dice-admin-cream);
}
.admin-dice-attributes span {
    display: block;
    color: var(--dice-admin-sand);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 1.5px;
}
.admin-dice-attributes strong {
    display: block;
    margin-top: 11px;
    color: var(--dice-admin-cream);
    font-size: 25px;
    font-weight: normal;
}

.admin-dice-result {
    display: grid;
    grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 35px;
    padding: 35px 40px;
    border-bottom: 1px solid var(--dice-admin-line);
    background: var(--dice-admin-rust);
}
.admin-dice-result[hidden] { display: none !important; }
.admin-dice-result h3 { margin: 8px 0; color: var(--dice-admin-cream); font-size: 27px; font-weight: normal; }
.admin-dice-result p { margin: 0; color: rgba(241, 221, 194, .72); font: 11px Arial, sans-serif; }
.admin-dice-result-equation {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
}
.admin-dice-result-equation > b { display: grid; place-items: center; color: var(--dice-admin-cream); font-size: 20px; }
.admin-dice-result-equation article {
    min-width: 88px;
    padding: 16px;
    border: 1px solid rgba(241, 221, 194, .28);
    text-align: center;
}
.admin-dice-result-equation span { display: block; color: rgba(241, 221, 194, .68); font: 700 7px Arial, sans-serif; letter-spacing: 1px; }
.admin-dice-result-equation strong { display: block; margin-top: 9px; color: var(--dice-admin-cream); font-size: 27px; font-weight: normal; }
.admin-dice-result-equation article.final { background: var(--dice-admin-cream); }
.admin-dice-result-equation article.final span,
.admin-dice-result-equation article.final strong { color: var(--dice-admin-ink); }

.admin-dice-history-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    padding: 38px 40px 24px;
}
.admin-dice-history-heading label { display: grid; gap: 8px; width: min(100%, 300px); }
.admin-dice-history {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--dice-admin-line);
}
.admin-dice-history-card {
    padding: 28px 30px;
    border-right: 1px solid var(--dice-admin-line);
    border-bottom: 1px solid var(--dice-admin-line);
}
.admin-dice-history-card:nth-child(2n) { border-right: 0; }
.admin-dice-history-card.latest { box-shadow: inset 4px 0 0 var(--dice-admin-sand); }
.admin-dice-history-card.voided { opacity: .58; background: rgba(241, 221, 194, .025); }
.admin-dice-history-topline { display: flex; justify-content: space-between; gap: 15px; color: var(--dice-admin-sand); font: 700 7px Arial, sans-serif; letter-spacing: 1.5px; }
.admin-dice-history-card h4 { margin: 15px 0 5px; color: var(--dice-admin-cream); font-size: 22px; font-weight: normal; }
.admin-dice-history-character { margin: 0 0 17px; color: rgba(241, 221, 194, .58); font: 10px Arial, sans-serif; }
.admin-dice-history-equation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--dice-admin-line); }
.admin-dice-history-equation span,
.admin-dice-history-equation strong { padding: 12px; border-right: 1px solid var(--dice-admin-line); color: rgba(241, 221, 194, .72); font: 10px/1.5 Arial, sans-serif; }
.admin-dice-history-equation strong { grid-column: 1 / -1; border-top: 1px solid var(--dice-admin-line); border-right: 0; color: var(--dice-admin-cream); font-size: 15px; font-weight: normal; }
.admin-dice-history-note { margin: 16px 0 0; color: rgba(241, 221, 194, .67); font: 11px/1.7 Arial, sans-serif; }
.admin-dice-history-card footer { display: grid; gap: 8px; margin-top: 18px; }
.admin-dice-history-card footer small { color: rgba(241, 221, 194, .48); font: 9px/1.5 Arial, sans-serif; }
.admin-dice-history-card footer button { justify-self: start; border: 1px solid rgba(223, 192, 155, .32); background: transparent; color: var(--dice-admin-sand); padding: 10px 13px; font: 700 8px Arial, sans-serif; letter-spacing: 1.5px; cursor: pointer; }
.admin-dice-empty { margin: 0 40px 40px; padding: 25px; border: 1px solid var(--dice-admin-line); color: rgba(241, 221, 194, .58); text-align: center; font: 11px Arial, sans-serif; }

/* ---------- DASHBOARD / FICHA ---------- */
.dashboard-dice-history-section {
    --dice-card-ink: var(--ink, #102a33);
    --dice-card-rust: var(--rust, #b24725);
    --dice-card-cream: var(--cream, #f1ddc2);
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(96, 54, 31, .17);
}
.dashboard-dice-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}
.dashboard-dice-history-heading span {
    color: var(--dice-card-rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 2px;
}
.dashboard-dice-history-heading strong {
    display: grid;
    place-items: center;
    min-width: 31px;
    height: 31px;
    border: 1px solid rgba(96, 54, 31, .20);
    color: var(--dice-card-ink);
    font: 700 11px Arial, sans-serif;
}
.dashboard-dice-history-list { display: grid; gap: 12px; }
.dashboard-dice-history-card {
    padding: 17px;
    border: 1px solid rgba(96, 54, 31, .18);
    background: rgba(255, 255, 255, .22);
    color: var(--dice-card-ink);
}
.dashboard-dice-history-card.voided { opacity: .58; }
.dashboard-dice-history-topline { display: flex; justify-content: space-between; gap: 12px; color: var(--dice-card-rust); font: 700 7px Arial, sans-serif; letter-spacing: 1px; }
.dashboard-dice-history-card h5 { margin: 12px 0; color: var(--dice-card-ink); font-size: 17px; font-weight: normal; }
.dashboard-dice-history-equation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(96, 54, 31, .15); }
.dashboard-dice-history-equation span,
.dashboard-dice-history-equation strong { padding: 10px; border-right: 1px solid rgba(96, 54, 31, .12); color: rgba(16, 42, 51, .68); font: 9px/1.4 Arial, sans-serif; }
.dashboard-dice-history-equation strong { grid-column: 1 / -1; border-top: 1px solid rgba(96, 54, 31, .12); border-right: 0; color: var(--dice-card-ink); font-size: 13px; font-weight: normal; }
.dashboard-dice-history-card > p { margin: 13px 0 0; color: rgba(16, 42, 51, .67); font: 10px/1.65 Arial, sans-serif; }
.dashboard-dice-history-card > small { display: block; margin-top: 12px; color: rgba(16, 42, 51, .48); font: 8px/1.5 Arial, sans-serif; }
.dashboard-dice-history-empty { padding: 17px; border: 1px dashed rgba(96, 54, 31, .20); color: rgba(16, 42, 51, .56); font: 10px/1.6 Arial, sans-serif; text-align: center; }

@media (max-width: 1000px) {
    .admin-dice-heading,
    .admin-dice-workspace,
    .admin-dice-result { grid-template-columns: 1fr; }
    .admin-dice-character-preview { border-left: 0; border-top: 1px solid var(--dice-admin-line); }
    .admin-dice-history { grid-template-columns: 1fr; }
    .admin-dice-history-card { border-right: 0; }
    .admin-dice-result-equation { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 650px) {
    .admin-dice-heading,
    .admin-dice-form,
    .admin-dice-character-preview,
    .admin-dice-result,
    .admin-dice-history-heading { padding: 25px 20px; }
    .admin-dice-heading { gap: 28px; }
    .admin-dice-summary,
    .admin-dice-form,
    .admin-dice-attributes { grid-template-columns: 1fr; }
    .admin-dice-summary article { border-right: 0; }
    .admin-dice-history-heading { align-items: stretch; flex-direction: column; }
    .admin-dice-history-heading label { width: 100%; }
    .admin-dice-history-equation,
    .dashboard-dice-history-equation { grid-template-columns: 1fr; }
    .admin-dice-history-equation span,
    .dashboard-dice-history-equation span { border-right: 0; border-bottom: 1px solid rgba(96, 54, 31, .12); }
    .admin-dice-result-equation article { min-width: 72px; }
}

/* ========================================
   CORREÇÃO — MENU MOBILE
======================================== */

@media (max-width: 900px) {

    .header {
        height: auto;
        min-height: 80px;

        padding:
            16px
            5%
            12px;

        display: flex;
        flex-wrap: wrap;

        align-items: center;
        justify-content: space-between;

        gap: 14px;

        background:
            rgba(7, 27, 33, .88);

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);
    }

    .brand {
        flex-shrink: 0;
    }

    .nav {
        width: 100%;

        display: flex;
        align-items: center;

        gap: 20px;

        overflow-x: auto;
        overflow-y: hidden;

        padding:
            8px
            0
            5px;

        white-space: nowrap;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .nav::-webkit-scrollbar {
        display: none;
    }

    .nav a,
    .nav a:not(.login-button) {
        display: inline-flex !important;

        flex-shrink: 0;

        align-items: center;
        justify-content: center;
    }

    .nav .login-button {
        padding:
            10px
            17px;
    }
}


@media (max-width: 600px) {

    .header {
        padding-left: 18px;
        padding-right: 18px;
    }

    .brand-small {
        letter-spacing: 4px;
    }

    .brand-main {
        font-size: 15px;
        letter-spacing: 2px;
    }

    .nav {
        gap: 17px;
    }

    .nav a {
        font-size: 9px;
        letter-spacing: 1.5px;
    }
}

/* ========================================
   PROFISSÕES EXCLUSIVAS — NATIVOS
======================================== */


/* ========================================
   CRIAÇÃO DE PERSONAGEM
======================================== */

.tribal-profession-notice {
    margin:
        35px
        0;

    padding:
        30px;

    display:
        grid;

    grid-template-columns:
        65px
        1fr;

    gap:
        25px;

    align-items:
        center;

    border:
        1px solid
        rgba(168, 70, 34, .30);

    background:
        rgba(168, 70, 34, .07);

    color:
        var(--ink);
}


.tribal-profession-notice[hidden] {
    display:
        none;
}


.tribal-profession-notice-symbol {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        58px;

    height:
        58px;

    border:
        1px solid
        rgba(168, 70, 34, .38);

    color:
        var(--rust);

    font-size:
        27px;
}


.tribal-profession-notice small {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.tribal-profession-notice strong {
    display:
        block;

    margin-bottom:
        10px;

    font-size:
        25px;

    font-weight:
        normal;
}


.tribal-profession-notice p {
    max-width:
        680px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


#profession optgroup {
    color:
        var(--rust);

    font-weight:
        bold;
}


#profession option {
    color:
        var(--ink);

    font-weight:
        normal;
}


/* ========================================
   PAINEL ADMINISTRATIVO
======================================== */

.admin-tribal-profession-installer {
    max-width:
        1250px;

    margin:
        0
        auto
        65px;

    padding:
        50px;

    border:
        1px solid
        rgba(168, 70, 34, .26);

    background:
        rgba(168, 70, 34, .055);
}


.admin-tribal-profession-installer-heading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        50px;

    padding-bottom:
        40px;

    border-bottom:
        1px solid
        rgba(96, 54, 31, .20);
}


.admin-tribal-profession-installer-heading > div {
    max-width:
        760px;
}


.admin-tribal-profession-installer-heading > div > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.admin-tribal-profession-installer-heading h3 {
    margin:
        18px
        0
        20px;

    color:
        var(--ink);

    font-size:
        clamp(
            35px,
            5vw,
            58px
        );

    font-weight:
        normal;

    line-height:
        .95;
}


.admin-tribal-profession-installer-heading p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.9;
}


.admin-tribal-profession-symbol {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    width:
        78px;

    height:
        78px;

    border:
        1px solid
        rgba(168, 70, 34, .35);

    color:
        var(--rust);

    font-size:
        34px;
}


.admin-tribal-profession-list {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top:
        40px;

    border-top:
        1px solid
        rgba(96, 54, 31, .20);

    border-left:
        1px solid
        rgba(96, 54, 31, .20);
}


.admin-tribal-profession-list article {
    min-height:
        180px;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(96, 54, 31, .20);

    border-bottom:
        1px solid
        rgba(96, 54, 31, .20);
}


.admin-tribal-profession-list article > span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


.admin-tribal-profession-list strong {
    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--ink);

    font-size:
        21px;

    font-weight:
        normal;

    line-height:
        1.15;
}


.admin-tribal-profession-list p {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


.admin-tribal-profession-installer-footer {
    margin-top:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}


.admin-tribal-profession-installer-footer p {
    max-width:
        620px;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


#adminTribalProfessionInstallButton {
    flex-shrink:
        0;

    padding:
        17px
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    border:
        0;

    background:
        var(--rust);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        2px;

    transition:
        background .3s ease,
        opacity .3s ease,
        transform .3s ease;
}


#adminTribalProfessionInstallButton:hover:not(:disabled) {
    background:
        var(--ink);

    transform:
        translateY(-2px);
}


#adminTribalProfessionInstallButton:disabled {
    cursor:
        not-allowed;

    opacity:
        .58;
}


/* ========================================
   PÁGINA DOS NATIVOS
======================================== */

.native-exclusive-professions {
    max-width:
        1200px;

    margin:
        110px
        auto
        0;

    padding-top:
        80px;

    border-top:
        1px solid
        rgba(241, 221, 194, .18);
}


.native-exclusive-professions-heading {
    max-width:
        760px;

    margin-bottom:
        60px;
}


.native-exclusive-professions-heading > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        5px;
}


.native-exclusive-professions-heading h3 {
    margin:
        22px
        0
        30px;

    color:
        var(--cream);

    font-size:
        clamp(
            48px,
            7vw,
            82px
        );

    font-weight:
        normal;

    line-height:
        .9;
}


.native-exclusive-professions-heading p {
    max-width:
        700px;

    color:
        rgba(241, 221, 194, .70);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.9;
}


.native-exclusive-professions-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.native-exclusive-professions-grid article {
    min-height:
        430px;

    padding:
        34px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid
        rgba(241, 221, 194, .16);

    border-right:
        0;

    transition:
        background .3s ease,
        transform .3s ease;
}


.native-exclusive-professions-grid article:last-child {
    border-right:
        1px solid
        rgba(241, 221, 194, .16);
}


.native-exclusive-professions-grid article:hover {
    background:
        rgba(241, 221, 194, .04);

    transform:
        translateY(-5px);
}


.native-exclusive-profession-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.native-exclusive-profession-top span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.native-exclusive-profession-top strong {
    padding:
        7px
        9px;

    border:
        1px solid
        rgba(223, 160, 108, .38);

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        normal;

    letter-spacing:
        2px;
}


.native-exclusive-profession-symbol {
    margin:
        55px
        0
        28px;

    font-size:
        36px;

    line-height:
        1;
}


.native-exclusive-professions-grid h4 {
    margin-bottom:
        25px;

    color:
        var(--cream);

    font-size:
        29px;

    font-weight:
        normal;

    line-height:
        1.05;
}


.native-exclusive-professions-grid article > p {
    margin-top:
        auto;

    color:
        rgba(241, 221, 194, .63);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.85;
}


/* ========================================
   RESPONSIVIDADE
======================================== */

@media (max-width: 1000px) {

    .admin-tribal-profession-list,
    .native-exclusive-professions-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .native-exclusive-professions-grid article {
        border:
            1px solid
            rgba(241, 221, 194, .16);
    }

}


@media (max-width: 700px) {

    .tribal-profession-notice {
        grid-template-columns:
            1fr;

        padding:
            25px;
    }


    .admin-tribal-profession-installer {
        padding:
            35px
            25px;
    }


    .admin-tribal-profession-installer-heading,
    .admin-tribal-profession-installer-footer {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .admin-tribal-profession-list,
    .native-exclusive-professions-grid {
        grid-template-columns:
            1fr;
    }


    .admin-tribal-profession-list article {
        min-height:
            150px;
    }


    .admin-tribal-profession-installer-footer {
        gap:
            25px;
    }


    #adminTribalProfessionInstallButton {
        width:
            100%;
    }


    .native-exclusive-professions {
        margin-top:
            80px;

        padding-top:
            65px;
    }


    .native-exclusive-professions-grid article {
        min-height:
            350px;

        border:
            1px solid
            rgba(241, 221, 194, .16);
    }

}

/* ========================================
   SALÁRIOS — PROFISSÕES NATIVAS
======================================== */

.native-exclusive-profession-finance {
    margin:
        28px
        0
        25px;

    padding-top:
        22px;

    border-top:
        1px solid
        rgba(241, 221, 194, .16);
}


.native-exclusive-profession-finance span {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.native-exclusive-profession-finance strong {
    color:
        var(--cream);

    font-size:
        22px;

    font-weight:
        normal;
}

/* ========================================
   OCUPAÇÃO DO RANCHEIRO
======================================== */

.ranch-occupation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 35px;
}


.ranch-occupation-card {
    position: relative;
    min-height: 285px;
    padding: 35px;
    border: 1px solid rgba(100, 72, 43, 0.25);
    background: rgba(255, 250, 240, 0.55);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


.ranch-occupation-card:hover {
    transform: translateY(-4px);
    border-color: rgba(100, 72, 43, 0.65);
}


.ranch-occupation-card.selected {
    border-color: #6f4b2d;
    background: rgba(111, 75, 45, 0.1);
    box-shadow:
        inset 0 0 0 1px #6f4b2d;
}


.ranch-occupation-card > span {
    display: block;
    margin-bottom: 35px;
    font-size: 11px;
    letter-spacing: 3px;
    opacity: 0.65;
}


.ranch-occupation-card > strong {
    display: block;
    margin-bottom: 18px;
    font-size: 25px;
    font-weight: normal;
}


.ranch-occupation-card > p {
    margin: 0 0 25px;
    line-height: 1.7;
    opacity: 0.8;
}


.ranch-occupation-card > small {
    display: block;
    padding-top: 18px;
    border-top: 1px solid rgba(100, 72, 43, 0.2);
    font-size: 8px;
    letter-spacing: 2px;
    line-height: 1.6;
}


@media (max-width: 760px) {

    .ranch-occupation-grid {
        grid-template-columns: 1fr;
    }

}


/* ========================================
   ADMIN / DASHBOARD — SUSPENSÃO E EXCLUSÃO
======================================== */

.admin-summary {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.admin-summary article:nth-child(3n) {
    border-right:
        0;
}

.admin-summary article:nth-child(n + 4) {
    border-top:
        1px solid
        rgba(96, 54, 31, .17);
}


.admin-character-status-suspenso {
    background:
        rgba(118, 87, 40, .95);
}


.admin-character-status-excluido {
    background:
        rgba(38, 23, 16, .95);
}


.admin-character-suspenso,
.admin-character-excluido {
    opacity:
        .92;
}


.admin-character-suspenso .admin-character-photo img,
.admin-character-excluido .admin-character-photo img,
.dashboard-character-suspended .dashboard-character-photo img,
.dashboard-character-deleted .dashboard-character-photo img {
    filter:
        grayscale(.78)
        contrast(.92);
}


.admin-character-approved-actions {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.admin-suspend-button {
    background:
        #765728;

    color:
        var(--cream);
}


.admin-delete-character-button {
    background:
        var(--wood-dark);

    color:
        var(--cream);
}


.admin-suspend-button:hover,
.admin-delete-character-button:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.08);
}


.admin-character-administrative-action {
    margin-top:
        25px;

    padding:
        22px;

    border:
        1px solid
        rgba(96, 54, 31, .25);

    background:
        rgba(96, 54, 31, .06);
}


.admin-character-administrative-action.suspenso {
    border-color:
        rgba(118, 87, 40, .42);

    background:
        rgba(118, 87, 40, .08);
}


.admin-character-administrative-action.excluido {
    border-color:
        rgba(38, 23, 16, .35);

    background:
        rgba(38, 23, 16, .08);
}


.admin-character-administrative-action span {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.admin-character-administrative-action p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.8;

    white-space:
        pre-line;
}


.admin-character-administrative-action small {
    display:
        block;

    margin-top:
        14px;

    color:
        rgba(96, 54, 31, .62);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.6;
}


.admin-character-moderation-warning {
    margin:
        0 0 28px;

    padding:
        18px;

    border-left:
        3px solid
        var(--rust);

    background:
        rgba(168, 70, 34, .08);

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.75;
}


#confirmCharacterModerationButton.suspend {
    background:
        #765728;
}


#confirmCharacterModerationButton.delete {
    background:
        var(--wood-dark);
}


.dashboard-character-status-suspended {
    background:
        rgba(118, 87, 40, .95);
}


.dashboard-character-status-deleted {
    background:
        rgba(38, 23, 16, .95);
}


.dashboard-character-administrative-action {
    margin-top:
        25px;

    padding:
        22px;

    border:
        1px solid
        rgba(96, 54, 31, .28);

    background:
        rgba(96, 54, 31, .06);
}


.dashboard-character-administrative-action.suspenso {
    border-color:
        rgba(118, 87, 40, .42);

    background:
        rgba(118, 87, 40, .08);
}


.dashboard-character-administrative-action.excluido {
    border-color:
        rgba(38, 23, 16, .36);

    background:
        rgba(38, 23, 16, .08);
}


.dashboard-character-administrative-action span {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.dashboard-character-administrative-action p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.8;

    white-space:
        pre-line;
}


.dashboard-character-administrative-action small {
    display:
        block;

    margin-top:
        14px;

    color:
        rgba(96, 54, 31, .65);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.65;
}


@media (max-width: 1050px) {

    .admin-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-summary article {
        border-right:
            1px solid
            rgba(96, 54, 31, .17);

        border-top:
            1px solid
            rgba(96, 54, 31, .17);
    }


    .admin-summary article:nth-child(2n) {
        border-right:
            0;
    }

}


@media (max-width: 650px) {

    .admin-summary {
        grid-template-columns:
            1fr;
    }


    .admin-summary article {
        border-right:
            0;
    }


    .admin-character-approved-actions {
        grid-template-columns:
            1fr;
    }

}

/* ========================================
   ADMIN — EVENTOS
======================================== */

.admin-events {
    padding:
        100px
        5%
        130px;

    background:
        var(--ink-dark);

    color:
        var(--cream);
}


.admin-event-summary {
    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    background:
        var(--cream);
}


.admin-event-summary article {
    min-height:
        190px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(96, 54, 31, .18);
}


.admin-event-summary article:last-child {
    border-right:
        0;
}


.admin-event-summary span {
    color:
        var(--rust);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.admin-event-summary strong {
    color:
        var(--ink);

    font-size:
        38px;

    font-weight:
        normal;
}


.admin-event-summary p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;
}


.admin-event-form {
    max-width:
        1400px;

    margin:
        70px
        auto
        120px;

    border:
        1px solid
        rgba(223, 192, 155, .20);

    background:
        rgba(7, 27, 33, .35);
}


.admin-event-form-heading {
    padding:
        45px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        40px;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .18);
}


.admin-event-form-heading span,
.admin-event-form-section-heading small,
.admin-event-list-heading span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.admin-event-form-heading h3 {
    margin:
        15px
        0;

    font-size:
        48px;

    font-weight:
        normal;
}


.admin-event-form-heading p {
    max-width:
        650px;

    color:
        rgba(241, 221, 194, .65);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


.admin-event-form-symbol {
    font-size:
        38px !important;
}


.admin-event-form-section {
    padding:
        50px
        45px;

    border-bottom:
        1px solid
        rgba(223, 192, 155, .16);
}


.admin-event-form-section-heading {
    margin-bottom:
        40px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        25px;
}


.admin-event-form-section-heading > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        3px;
}


.admin-event-form-section-heading h4 {
    margin-top:
        10px;

    font-size:
        35px;

    font-weight:
        normal;
}


.admin-event-fields,
.admin-event-work-fields {
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        25px;
}


.admin-event-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.admin-event-field.full {
    grid-column:
        1 / -1;
}


.admin-event-field > span,
.admin-event-ticket-lot > span,
.admin-event-image-label {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.admin-event-field input,
.admin-event-field select,
.admin-event-field textarea,
.admin-event-ticket-lot input,
.admin-event-ticket-lot select,
.admin-event-list-heading input {
    width:
        100%;

    padding:
        17px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    border-radius:
        0;

    outline:
        0;

    background:
        rgba(7, 27, 33, .45);

    color:
        var(--cream);

    font:
        inherit;
}


.admin-event-field textarea {
    resize:
        vertical;

    line-height:
        1.7;
}


.admin-event-field input:focus,
.admin-event-field select:focus,
.admin-event-field textarea:focus {
    border-color:
        var(--sand);
}


.admin-event-field small {
    color:
        rgba(241, 221, 194, .52);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;
}


.admin-event-duration-panel {
    padding:
        30px;

    background:
        var(--terracotta);
}


.admin-event-duration-panel span {
    display:
        block;

    margin-bottom:
        15px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        4px;
}


.admin-event-duration-panel strong {
    display:
        block;

    font-size:
        36px;

    font-weight:
        normal;
}


.admin-event-duration-panel p {
    margin-top:
        15px;

    color:
        rgba(241, 221, 194, .80);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;
}


.admin-event-image-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        25px;
}


.admin-event-image-column {
    padding:
        30px;

    border:
        1px solid
        rgba(223, 192, 155, .18);
}


.admin-event-image-upload {
    margin-top:
        20px;

    min-height:
        150px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        1px dashed
        rgba(223, 192, 155, .38);

    cursor:
        pointer;

    text-align:
        center;
}


.admin-event-image-upload input {
    display:
        none;
}


.admin-event-image-upload strong {
    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        3px;
}


.admin-event-image-upload small {
    color:
        rgba(241, 221, 194, .50);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;
}


.admin-event-cover-preview,
.admin-event-gallery-preview {
    margin-top:
        20px;

    min-height:
        120px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(223, 192, 155, .14);

    color:
        rgba(241, 221, 194, .45);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;
}


.admin-event-ticket-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        15px;
}


.admin-event-ticket-lot {
    padding:
        30px;

    border:
        1px solid
        rgba(223, 192, 155, .18);
}


.admin-event-ticket-lot > label {
    display:
        block;

    margin-top:
        25px;
}


.admin-event-ticket-lot small {
    display:
        block;

    margin-bottom:
        10px;

    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.admin-event-money-input {
    display:
        grid;

    grid-template-columns:
        auto
        1fr;
}


.admin-event-money-input b {
    min-width:
        55px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    border-right:
        0;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.admin-event-checkbox {
    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        2px;
}


.admin-event-checkbox input {
    width:
        17px;

    height:
        17px;

    accent-color:
        var(--rust);
}


.admin-event-service-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.admin-event-service-card {
    min-height:
        230px;

    padding:
        30px;

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid
        rgba(223, 192, 155, .18);

    cursor:
        pointer;
}


.admin-event-service-card input {
    position:
        absolute;

    top:
        20px;

    right:
        20px;

    accent-color:
        var(--rust);
}


.admin-event-service-card > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.admin-event-service-card strong {
    margin:
        auto
        0
        20px;

    font-size:
        27px;

    font-weight:
        normal;
}


.admin-event-service-card p {
    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.7;
}


.admin-event-work-toggle {
    padding:
        25px;

    border:
        1px solid
        rgba(223, 192, 155, .18);
}


.admin-event-work-editor {
    margin-top:
        30px;

    padding:
        30px;

    border:
        1px solid
        rgba(223, 192, 155, .18);
}


.admin-event-add-work-button {
    min-height:
        58px;

    padding:
        0
        22px;

    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        0;

    background:
        var(--rust);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


.admin-event-work-list {
    margin-top:
        30px;
}


.admin-event-work-empty {
    min-height:
        150px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    border:
        1px solid
        rgba(223, 192, 155, .15);

    color:
        rgba(241, 221, 194, .45);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;
}


.admin-event-form-actions {
    padding:
        35px
        45px;

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        15px;
}


.admin-event-form-actions button {
    min-height:
        58px;

    padding:
        0
        25px;

    border:
        1px solid
        rgba(223, 192, 155, .25);

    background:
        transparent;

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


.admin-event-form-actions button:last-child {
    min-width:
        240px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-color:
        var(--rust);

    background:
        var(--rust);
}


.admin-event-list-heading {
    max-width:
        1400px;

    margin:
        auto
        auto
        45px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;
}


.admin-event-list-heading h3 {
    margin-top:
        12px;

    font-size:
        43px;

    font-weight:
        normal;
}


.admin-event-list-heading label {
    width:
        min(100%, 380px);
}


.admin-event-list-heading label > span {
    display:
        block;

    margin-bottom:
        10px;
}


.admin-event-grid {
    max-width:
        1400px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        20px;
}


/* ========================================
   ADMIN EVENTOS — RESPONSIVO
======================================== */

@media (max-width: 1050px) {

    .admin-event-summary {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .admin-event-summary article {
        border:
            1px solid
            rgba(96, 54, 31, .18);
    }


    .admin-event-ticket-grid,
    .admin-event-service-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .admin-event-summary,
    .admin-event-fields,
    .admin-event-work-fields,
    .admin-event-image-grid,
    .admin-event-ticket-grid,
    .admin-event-service-grid,
    .admin-event-grid {
        grid-template-columns:
            1fr;
    }


    .admin-event-field.full,
    .admin-event-add-work-button {
        grid-column:
            auto;
    }


    .admin-event-form-heading,
    .admin-event-list-heading {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .admin-event-form-heading,
    .admin-event-form-section,
    .admin-event-form-actions {
        padding:
            30px
            22px;
    }


    .admin-event-list-heading label {
        width:
            100%;
    }


    .admin-event-form-actions {
        flex-direction:
            column;
    }


    .admin-event-form-actions button {
        width:
            100%;
    }

}

/* ========================================
   ADMIN — CARDS DOS EVENTOS
======================================== */

.admin-event-cover-preview img {
    width: 100%;
    height: 260px;
    display: block;
    object-fit: cover;
}


.admin-event-gallery-preview {
    padding: 12px;
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 10px;
}


.admin-event-gallery-preview-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--wood-dark);
}


.admin-event-gallery-preview-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.admin-event-gallery-preview-item button {
    position: absolute;
    top: 7px;
    right: 7px;

    width: 28px;
    height: 28px;

    border: 0;
    background: rgba(7, 27, 33, .88);
    color: var(--cream);

    cursor: pointer;
    font-size: 18px;
}


.admin-event-work-card {
    margin-top: 12px;
    padding: 25px;

    display: grid;
    grid-template-columns:
        1fr
        auto
        auto;

    gap: 25px;
    align-items: center;

    border:
        1px solid
        rgba(223, 192, 155, .18);
}


.admin-event-work-card > div:first-child > span {
    color: var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;
    letter-spacing: 3px;
}


.admin-event-work-card h5 {
    margin:
        10px
        0;

    font-size: 25px;
    font-weight: normal;
}


.admin-event-work-card p {
    color:
        rgba(241, 221, 194, .55);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
    line-height: 1.7;
}


.admin-event-work-card-data {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(100px, auto));
}


.admin-event-work-card-data > div {
    min-height: 85px;
    padding: 15px;

    border:
        1px solid
        rgba(223, 192, 155, .16);
}


.admin-event-work-card-data span {
    display: block;
    margin-bottom: 14px;

    color: var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 6px;
    letter-spacing: 2px;
}


.admin-event-work-card-data strong {
    font-size: 18px;
    font-weight: normal;
}


.admin-event-work-card > button {
    padding:
        13px
        16px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    background:
        transparent;

    color: var(--cream);
    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;
    letter-spacing: 2px;
}


.admin-event-card {
    overflow: hidden;

    border:
        1px solid
        rgba(223, 192, 155, .18);

    background:
        rgba(7, 27, 33, .42);
}


.admin-event-card-image {
    position: relative;
    height: 320px;

    overflow: hidden;
    background: var(--wood-dark);
}


.admin-event-card-image img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}


.admin-event-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(7, 27, 33, .78)
        );
}


.admin-event-card-image > span {
    position: absolute;

    z-index: 2;

    left: 22px;
    bottom: 22px;

    padding:
        9px
        12px;

    background:
        var(--rust);

    color: var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;
    letter-spacing: 3px;
}


.admin-event-card-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color: var(--sand);
    font-size: 45px;
}


.admin-event-card-content {
    padding: 30px;
}


.admin-event-card-content > small {
    color: var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;
    letter-spacing: 3px;
}


.admin-event-card-content h4 {
    margin:
        15px
        0;

    font-size: 37px;
    font-weight: normal;
}


.admin-event-card-content > p {
    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
}


.admin-event-card-dates {
    margin-top: 30px;

    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
}


.admin-event-card-dates > div,
.admin-event-card-summary > div {
    padding: 18px;

    border:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-event-card-dates span,
.admin-event-card-summary span {
    display: block;
    margin-bottom: 12px;

    color: var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size: 6px;
    letter-spacing: 2px;
}


.admin-event-card-dates strong,
.admin-event-card-summary strong {
    font-family:
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: normal;
    line-height: 1.5;
}


.admin-event-card-summary {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
}


.admin-event-card-actions {
    margin-top: 25px;

    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;
}


.admin-event-card-actions button {
    min-height: 50px;

    border:
        1px solid
        rgba(223, 192, 155, .24);

    background:
        transparent;

    color: var(--cream);

    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;
    letter-spacing: 3px;
}


.admin-event-card-actions button:hover {
    background: var(--rust);
    border-color: var(--rust);
}


.admin-event-card-actions button.delete:hover {
    background: var(--terracotta);
    border-color: var(--terracotta);
}


@media (max-width: 850px) {

    .admin-event-gallery-preview {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .admin-event-work-card {
        grid-template-columns:
            1fr;
    }


    .admin-event-card-summary {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 500px) {

    .admin-event-card-dates,
    .admin-event-card-summary {
        grid-template-columns:
            1fr;
    }

}

/* ========================================
   DASHBOARD — EVENTOS
======================================== */

.dashboard-events {
    padding:
        110px
        5%
        130px;

    background:
        var(--ink-dark);

    color:
        var(--cream);
}


.dashboard-events-heading {
    max-width:
        1450px;

    margin:
        0
        auto
        55px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;
}


.dashboard-events-heading > div:first-child {
    max-width:
        720px;
}


.dashboard-events-heading > div:first-child > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.dashboard-events-heading h2 {
    margin:
        14px
        0;

    font-size:
        64px;

    font-weight:
        normal;
}


.dashboard-events-heading p {
    color:
        rgba(241, 221, 194, .62);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;
}


.dashboard-events-tabs {
    display:
        flex;

    border:
        1px solid
        rgba(223, 192, 155, .22);
}


.dashboard-events-tabs button {
    min-height:
        52px;

    padding:
        0
        24px;

    border:
        0;

    border-right:
        1px solid
        rgba(223, 192, 155, .22);

    background:
        transparent;

    color:
        rgba(241, 221, 194, .60);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


.dashboard-events-tabs button:last-child {
    border-right:
        0;
}


.dashboard-events-tabs button.active {
    background:
        var(--rust);

    color:
        var(--cream);
}


.dashboard-events-message {
    max-width:
        1450px;

    margin:
        0
        auto
        30px;

    padding:
        18px
        22px;

    border:
        1px solid
        rgba(223, 192, 155, .20);

    background:
        rgba(223, 192, 155, .08);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;
}


.dashboard-events-message.success {
    border-color:
        rgba(138, 177, 117, .65);

    background:
        rgba(138, 177, 117, .12);
}


.dashboard-events-message.error {
    border-color:
        rgba(190, 72, 55, .70);

    background:
        rgba(190, 72, 55, .13);
}


.dashboard-events-grid {
    max-width:
        1450px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        24px;
}


.dashboard-event-card {
    overflow:
        hidden;

    border:
        1px solid
        rgba(223, 192, 155, .18);

    background:
        rgba(7, 27, 33, .42);
}


.dashboard-event-card-image {
    height:
        360px;

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:
        var(--wood-dark);

    color:
        var(--sand);

    font-size:
        44px;
}


.dashboard-event-card-image::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            transparent 40%,
            rgba(7, 27, 33, .88)
        );
}


.dashboard-event-card-image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.dashboard-event-card-image strong {
    position:
        absolute;

    z-index:
        2;

    left:
        24px;

    bottom:
        24px;

    padding:
        9px
        13px;

    background:
        var(--rust);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        normal;

    letter-spacing:
        3px;
}


.dashboard-event-card-content {
    padding:
        32px;
}


.dashboard-event-card-content > small {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


.dashboard-event-card-content h3 {
    margin:
        13px
        0;

    font-size:
        42px;

    font-weight:
        normal;
}


.dashboard-event-card-content > p {
    min-height:
        65px;

    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.8;
}


.dashboard-event-card-badges {
    margin-top:
        25px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.dashboard-event-card-badges span {
    padding:
        8px
        11px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        6px;

    letter-spacing:
        2px;
}


.dashboard-event-card-info {
    margin-top:
        25px;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);
}


.dashboard-event-card-info > div {
    min-height:
        90px;

    padding:
        18px;

    border:
        1px solid
        rgba(223, 192, 155, .15);
}


.dashboard-event-card-info span {
    display:
        block;

    margin-bottom:
        13px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        6px;

    letter-spacing:
        2px;
}


.dashboard-event-card-info strong {
    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;

    line-height:
        1.5;
}


.dashboard-event-card-content > button {
    width:
        100%;

    min-height:
        55px;

    margin-top:
        22px;

    padding:
        0
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        0;

    background:
        var(--rust);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


.dashboard-events-empty {
    max-width:
        1450px;

    min-height:
        320px;

    margin:
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    border:
        1px solid
        rgba(223, 192, 155, .17);

    color:
        rgba(241, 221, 194, .55);

    text-align:
        center;
}


.dashboard-events-empty > span {
    color:
        var(--sand);

    font-size:
        35px;
}


.dashboard-events-empty h3 {
    color:
        var(--cream);

    font-size:
        31px;

    font-weight:
        normal;
}


.dashboard-events-empty p {
    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;
}


/* ========================================
   HISTÓRICO DOS EVENTOS
======================================== */

.dashboard-events-history {
    max-width:
        1450px;

    margin:
        auto;

    display:
        grid;

    gap:
        14px;
}


.dashboard-event-history-card {
    padding:
        28px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    align-items:
        center;

    gap:
        30px;

    border:
        1px solid
        rgba(223, 192, 155, .17);

    background:
        rgba(7, 27, 33, .38);
}


.dashboard-event-history-card > div:first-child > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.dashboard-event-history-card h3 {
    margin:
        10px
        0;

    font-size:
        30px;

    font-weight:
        normal;
}


.dashboard-event-history-card p {
    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;
}


.dashboard-event-history-card > div:last-child {
    min-width:
        220px;

    padding-left:
        25px;

    border-left:
        1px solid
        rgba(223, 192, 155, .18);
}


.dashboard-event-history-card > div:last-child span {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        6px;

    letter-spacing:
        2px;
}


.dashboard-event-history-card > div:last-child strong {
    display:
        block;

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;
}


.dashboard-event-history-card > div:last-child small {
    display:
        inline-block;

    margin-top:
        13px;

    padding:
        7px
        9px;

    background:
        var(--rust);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        6px;

    letter-spacing:
        2px;
}


/* ========================================
   MODAL DOS EVENTOS
======================================== */

.dashboard-event-modal[hidden] {
    display:
        none;
}


.dashboard-event-modal {
    position:
        fixed;

    z-index:
        10000;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    padding:
        35px;
}


.dashboard-event-modal-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(2, 13, 17, .90);

    backdrop-filter:
        blur(8px);
}


.dashboard-event-modal-panel {
    width:
        min(1050px, 100%);

    max-height:
        90vh;

    position:
        relative;

    z-index:
        2;

    overflow-y:
        auto;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    background:
        var(--ink-dark);

    color:
        var(--cream);
}


.dashboard-event-modal-close {
    width:
        45px;

    height:
        45px;

    position:
        absolute;

    z-index:
        5;

    top:
        18px;

    right:
        18px;

    border:
        0;

    background:
        rgba(7, 27, 33, .85);

    color:
        var(--cream);

    cursor:
        pointer;

    font-size:
        25px;
}


.dashboard-event-modal-hero {
    height:
        410px;

    position:
        relative;

    display:
        flex;

    align-items:
        flex-end;

    overflow:
        hidden;

    background:
        var(--wood-dark);
}


.dashboard-event-modal-hero::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            transparent 25%,
            rgba(7, 27, 33, .96)
        );
}


.dashboard-event-modal-hero img {
    width:
        100%;

    height:
        100%;

    position:
        absolute;

    inset:
        0;

    object-fit:
        cover;
}


.dashboard-event-modal-hero > div {
    position:
        relative;

    z-index:
        2;

    padding:
        45px;
}


.dashboard-event-modal-hero span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        4px;
}


.dashboard-event-modal-hero h2 {
    margin-top:
        12px;

    font-size:
        58px;

    font-weight:
        normal;
}


.dashboard-event-modal-body {
    padding:
        45px;
}


.dashboard-event-modal-description p,
.dashboard-event-modal-section p {
    color:
        rgba(241, 221, 194, .66);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.9;

    white-space:
        pre-line;
}


.dashboard-event-modal-dates {
    margin:
        35px
        0;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);
}


.dashboard-event-modal-dates > div {
    padding:
        22px;

    border:
        1px solid
        rgba(223, 192, 155, .17);
}


.dashboard-event-modal-dates span,
.dashboard-event-modal-section > span,
.dashboard-event-purchase span {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.dashboard-event-modal-dates strong {
    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        normal;
}


.dashboard-event-modal-section {
    margin-top:
        35px;

    padding-top:
        30px;

    border-top:
        1px solid
        rgba(223, 192, 155, .16);
}


.dashboard-event-modal-section ul {
    padding-left:
        20px;

    color:
        rgba(241, 221, 194, .70);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        2;
}


.dashboard-event-purchase {
    margin-top:
        40px;

    padding:
        30px;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        22px;

    border:
        1px solid
        rgba(223, 192, 155, .20);

    background:
        rgba(183, 80, 42, .10);
}


.dashboard-event-purchase > div strong {
    font-size:
        25px;

    font-weight:
        normal;
}


.dashboard-event-purchase label {
    display:
        flex;

    flex-direction:
        column;
}


.dashboard-event-purchase select {
    width:
        100%;

    min-height:
        51px;

    padding:
        0
        15px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    background:
        var(--ink-dark);

    color:
        var(--cream);
}


.dashboard-event-purchase > button {
    min-height:
        55px;

    padding:
        0
        20px;

    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        0;

    background:
        var(--rust);

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        3px;
}


.dashboard-event-purchase > button:disabled {
    opacity:
        .45;

    cursor:
        not-allowed;
}


/* ========================================
   TRABALHOS DOS EVENTOS
======================================== */

.dashboard-event-jobs {
    display:
        grid;

    gap:
        12px;
}


.dashboard-event-jobs article {
    padding:
        22px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        auto;

    align-items:
        center;

    gap:
        22px;

    border:
        1px solid
        rgba(223, 192, 155, .17);
}


.dashboard-event-jobs h4 {
    margin-bottom:
        8px;

    font-size:
        24px;

    font-weight:
        normal;
}


.dashboard-event-jobs p {
    font-size:
        10px;
}


.dashboard-event-jobs article > div:nth-child(2) {
    min-width:
        120px;
}


.dashboard-event-jobs article > div:nth-child(2) strong {
    display:
        block;

    font-size:
        18px;

    font-weight:
        normal;
}


.dashboard-event-jobs article > div:nth-child(2) small {
    color:
        rgba(241, 221, 194, .52);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.dashboard-event-jobs button,
.dashboard-event-competition button {
    min-height:
        45px;

    padding:
        0
        16px;

    border:
        1px solid
        var(--rust);

    background:
        transparent;

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.dashboard-event-jobs button:hover,
.dashboard-event-competition button:hover {
    background:
        var(--rust);
}


.dashboard-event-jobs button:disabled,
.dashboard-event-competition button:disabled {
    opacity:
        .45;

    cursor:
        not-allowed;
}


.dashboard-event-competition h3 {
    margin-bottom:
        12px;

    font-size:
        31px;

    font-weight:
        normal;
}


.dashboard-event-competition button {
    margin-top:
        20px;
}


.dashboard-event-modal-open {
    overflow:
        hidden;
}


/* ========================================
   EVENTOS — RESPONSIVO
======================================== */

@media (max-width: 950px) {

    .dashboard-events-grid {
        grid-template-columns:
            1fr;
    }


    .dashboard-events-heading {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .dashboard-event-jobs article {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 700px) {

    .dashboard-events {
        padding:
            80px
            22px
            100px;
    }


    .dashboard-events-heading h2 {
        font-size:
            48px;
    }


    .dashboard-events-tabs {
        width:
            100%;
    }


    .dashboard-events-tabs button {
        flex:
            1;

        padding:
            0
            12px;
    }


    .dashboard-event-card-image {
        height:
            270px;
    }


    .dashboard-event-card-content h3 {
        font-size:
            33px;
    }


    .dashboard-event-card-info,
    .dashboard-event-modal-dates,
    .dashboard-event-purchase {
        grid-template-columns:
            1fr;
    }


    .dashboard-event-purchase > button {
        grid-column:
            auto;
    }


    .dashboard-event-history-card {
        grid-template-columns:
            1fr;
    }


    .dashboard-event-history-card > div:last-child {
        padding:
            20px
            0
            0;

        border-left:
            0;

        border-top:
            1px solid
            rgba(223, 192, 155, .18);
    }


    .dashboard-event-modal {
        padding:
            10px;
    }


    .dashboard-event-modal-panel {
        max-height:
            96vh;
    }


    .dashboard-event-modal-hero {
        height:
            300px;
    }


    .dashboard-event-modal-hero > div,
    .dashboard-event-modal-body {
        padding:
            28px
            22px;
    }


    .dashboard-event-modal-hero h2 {
        font-size:
            40px;
    }

}
/* ========================================
   ADMIN — OPERAÇÕES DOS EVENTOS
======================================== */

.admin-event-operations {
    max-width:
        1400px;

    margin:
        100px
        auto
        0;

    padding-top:
        70px;

    border-top:
        1px solid
        rgba(223, 192, 155, .18);
}


.admin-event-operations .admin-event-list-heading label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.admin-event-operations .admin-event-list-heading select {
    width:
        min(380px, 100%);

    min-height:
        51px;

    padding:
        0
        16px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    background:
        rgba(7, 27, 33, .55);

    color:
        var(--cream);

    outline:
        0;
}


.admin-event-operation-tabs {
    margin-bottom:
        30px;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    border:
        1px solid
        rgba(223, 192, 155, .18);
}


.admin-event-operation-tabs button {
    min-height:
        65px;

    padding:
        0
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    border:
        0;

    border-right:
        1px solid
        rgba(223, 192, 155, .18);

    background:
        transparent;

    color:
        rgba(241, 221, 194, .65);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.admin-event-operation-tabs button:last-child {
    border-right:
        0;
}


.admin-event-operation-tabs button strong {
    min-width:
        30px;

    height:
        30px;

    padding:
        0
        8px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(223, 192, 155, .25);

    font-size:
        10px;

    font-weight:
        normal;
}


.admin-event-operation-tabs button.active {
    background:
        var(--rust);

    color:
        var(--cream);
}


.admin-event-operation-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        18px;
}


.admin-event-operation-card {
    padding:
        30px;

    border:
        1px solid
        rgba(223, 192, 155, .18);

    background:
        rgba(7, 27, 33, .42);
}


.admin-event-operation-card-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.admin-event-operation-card-heading span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        3px;
}


.admin-event-operation-card-heading strong {
    padding:
        8px
        10px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        6px;

    font-weight:
        normal;

    letter-spacing:
        2px;
}


.admin-event-operation-card.status-aprovado
.admin-event-operation-card-heading strong,
.admin-event-operation-card.attended
.admin-event-operation-card-heading strong,
.admin-event-operation-card.status-finalizado
.admin-event-operation-card-heading strong {
    border-color:
        rgba(138, 177, 117, .60);

    background:
        rgba(138, 177, 117, .12);
}


.admin-event-operation-card.status-rejeitado
.admin-event-operation-card-heading strong {
    border-color:
        rgba(190, 72, 55, .65);

    background:
        rgba(190, 72, 55, .12);
}


.admin-event-operation-card h4 {
    margin:
        18px
        0
        8px;

    font-size:
        30px;

    font-weight:
        normal;
}


.admin-event-operation-card > p {
    color:
        rgba(241, 221, 194, .60);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;
}


.admin-event-operation-meta {
    margin-top:
        25px;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);
}


.admin-event-operation-meta > div {
    min-height:
        85px;

    padding:
        17px;

    border:
        1px solid
        rgba(223, 192, 155, .15);
}


.admin-event-operation-meta span {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        6px;

    letter-spacing:
        2px;
}


.admin-event-operation-meta strong {
    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;

    line-height:
        1.5;
}


.admin-event-operation-actions {
    margin-top:
        22px;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        10px;
}


.admin-event-operation-actions.single {
    grid-template-columns:
        1fr;
}


.admin-event-operation-actions button,
.admin-event-operation-result button {
    min-height:
        49px;

    padding:
        0
        16px;

    border:
        1px solid
        var(--rust);

    background:
        transparent;

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.admin-event-operation-actions button:hover,
.admin-event-operation-result button:hover {
    background:
        var(--rust);
}


.admin-event-operation-actions button.danger {
    border-color:
        var(--terracotta);
}


.admin-event-operation-actions button.danger:hover {
    background:
        var(--terracotta);
}


.admin-event-operation-result {
    margin-top:
        22px;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr
        auto;

    gap:
        10px;
}


.admin-event-operation-result input {
    min-height:
        49px;

    padding:
        0
        14px;

    border:
        1px solid
        rgba(223, 192, 155, .22);

    background:
        rgba(7, 27, 33, .55);

    color:
        var(--cream);

    outline:
        0;
}


.admin-event-operation-result button {
    padding:
        0
        20px;

    background:
        var(--rust);
}


@media (max-width: 900px) {

    .admin-event-operation-grid {
        grid-template-columns:
            1fr;
    }


    .admin-event-operation-tabs {
        grid-template-columns:
            1fr;
    }


    .admin-event-operation-tabs button {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(223, 192, 155, .18);
    }


    .admin-event-operation-tabs button:last-child {
        border-bottom:
            0;
    }

}


@media (max-width: 600px) {

    .admin-event-operation-meta,
    .admin-event-operation-actions,
    .admin-event-operation-result {
        grid-template-columns:
            1fr;
    }


    .admin-event-operation-card-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}

/* ========================================
   EVENTOS — ENCERRAMENTO E HISTÓRICO
======================================== */

.admin-event-card-actions {
    grid-template-columns:
        repeat(3, 1fr);
}


.admin-event-card-actions button.settle {
    border-color:
        var(--sand);

    background:
        rgba(223, 192, 155, .08);

    color:
        var(--sand);
}


.admin-event-card-actions button.settle:hover {
    border-color:
        var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);
}


.admin-event-card-actions button:disabled {
    opacity:
        .45;

    cursor:
        not-allowed;
}


.admin-event-card.encerrado {
    border-color:
        rgba(138, 177, 117, .42);
}


.admin-event-card.encerrado
.admin-event-card-image > span {
    background:
        rgba(74, 110, 64, .94);
}


.dashboard-event-history-card.ticket {
    border-left:
        3px solid
        var(--sand);
}


.dashboard-event-history-card.job {
    border-left:
        3px solid
        var(--rust);
}


.dashboard-event-history-card.competition {
    border-left:
        3px solid
        var(--terracotta);
}


.dashboard-event-history-card.job
> div:last-child small {
    background:
        var(--rust);
}


.dashboard-event-history-card.competition
> div:last-child small {
    background:
        var(--terracotta);
}


@media (max-width: 750px) {

    .admin-event-card-actions {
        grid-template-columns:
            1fr;
    }

}

/* ========================================
   DASHBOARD — 09 EVENTOS NA NAVEGAÇÃO
======================================== */

@media (min-width: 651px) and (max-width: 1120px) {

    .dashboard-system-navigation-buttons {
        grid-template-columns: repeat(20, minmax(0, 1fr));
    }

    /* PRIMEIRA LINHA — 4 ITENS */
    .dashboard-system-tab:nth-child(1),
    .dashboard-system-tab:nth-child(2),
    .dashboard-system-tab:nth-child(3),
    .dashboard-system-tab:nth-child(4) {
        grid-column: span 5;
        border-bottom: 1px solid rgba(241, 221, 194, .13);
    }

    /* SEGUNDA LINHA — 5 ITENS */
    .dashboard-system-tab:nth-child(5),
    .dashboard-system-tab:nth-child(6),
    .dashboard-system-tab:nth-child(7),
    .dashboard-system-tab:nth-child(8),
    .dashboard-system-tab:nth-child(9) {
        grid-column: span 4;
        border-bottom: 0;
    }

    .dashboard-system-tab:nth-child(4),
    .dashboard-system-tab:nth-child(9) {
        border-right: 0;
    }
}

/* ========================================
   ABERTURA GLOBAL DAS FICHAS
======================================== */
.admin-character-creation-control{margin:0 0 36px;border:1px solid rgba(96,54,31,.24);background:rgba(241,221,194,.45);box-shadow:0 18px 45px rgba(38,23,16,.06)}
.admin-character-creation-control-heading{padding:34px 36px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;border-bottom:1px solid rgba(96,54,31,.18)}
.admin-character-creation-control-heading>div:first-child>span,.admin-character-creation-control-body>div>span{display:block;margin-bottom:10px;color:var(--rust);font-family:Arial,sans-serif;font-size:8px;letter-spacing:4px}
.admin-character-creation-control-heading h2{margin:0 0 14px;color:var(--ink);font-size:clamp(34px,4vw,52px);line-height:.95;font-weight:normal}
.admin-character-creation-control-heading p,.admin-character-creation-control-body p,.admin-character-creation-note p{max-width:720px;color:var(--leather);font-family:Arial,sans-serif;font-size:12px;line-height:1.8}
.admin-character-creation-status{min-width:190px;padding:18px 20px;border:1px solid rgba(96,54,31,.20);text-align:right}
.admin-character-creation-status span{display:block;margin-bottom:8px;font-family:Arial,sans-serif;font-size:7px;letter-spacing:3px}
.admin-character-creation-status strong{font-family:Arial,sans-serif;font-size:11px;letter-spacing:2px}
.admin-character-creation-status.open{background:rgba(23,59,69,.10);border-color:rgba(23,59,69,.28);color:var(--ink)}
.admin-character-creation-status.closed{background:rgba(168,70,34,.10);border-color:rgba(168,70,34,.30);color:var(--rust)}
.admin-character-creation-control-body{padding:30px 36px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.admin-character-creation-control-body>div>strong{display:block;margin-bottom:8px;color:var(--ink);font-size:20px;font-weight:normal}
#adminCharacterCreationToggle{flex:0 0 auto;min-width:290px;padding:17px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--cream);cursor:pointer;font-family:Arial,sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase}
#adminCharacterCreationToggle.open{background:var(--rust);border-color:var(--rust)}
#adminCharacterCreationToggle:disabled{opacity:.55;cursor:wait}
.admin-character-creation-note{padding:20px 36px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:rgba(7,27,33,.055)}
.admin-character-creation-note strong{color:var(--rust);font-family:Arial,sans-serif;font-size:8px;letter-spacing:3px}
.character-creation-closed{opacity:.78}
.character-creation-closed-screen{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:30px;overflow:auto;background:linear-gradient(rgba(7,27,33,.92),rgba(38,23,16,.94)),url("../assets/texas-hero.jpg");background-size:cover;background-position:center}
.character-creation-closed-screen[hidden]{display:none}
.character-creation-closed-card{width:min(780px,100%);padding:70px 60px;border:1px solid rgba(241,221,194,.38);background:rgba(7,27,33,.88);color:var(--cream);text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.30);backdrop-filter:blur(6px)}
.character-creation-closed-kicker{color:var(--sand);font-family:Arial,sans-serif;font-size:8px;letter-spacing:7px}
.character-creation-closed-line{margin:28px 0;display:flex;align-items:center;justify-content:center;gap:16px}
.character-creation-closed-line i{width:55px;height:1px;background:rgba(223,160,108,.72)}
.character-creation-closed-line b{color:var(--sand);font-size:25px;font-weight:normal}
.character-creation-closed-card h1{margin:0;color:var(--cream);font-size:clamp(46px,7vw,82px);line-height:.92;font-weight:normal}
.character-creation-closed-card>p{max-width:590px;margin:30px auto 0;color:rgba(241,221,194,.78);font-family:Arial,sans-serif;font-size:13px;line-height:1.9}
.character-creation-closed-actions{margin-top:36px}
.character-creation-closed-actions a{display:inline-flex;align-items:center;gap:18px;padding:16px 24px;border:1px solid rgba(241,221,194,.70);color:var(--cream);text-decoration:none;font-family:Arial,sans-serif;font-size:9px;letter-spacing:3px}
.character-creation-closed-actions a:hover{background:var(--terracotta);border-color:var(--terracotta)}
.character-creation-closed-card>small{display:block;margin-top:42px;color:var(--sand);font-size:15px;font-style:italic}
@media(max-width:760px){.admin-character-creation-control-heading{grid-template-columns:1fr}.admin-character-creation-status{text-align:left;min-width:0}.admin-character-creation-control-body{flex-direction:column;align-items:stretch}#adminCharacterCreationToggle{width:100%;min-width:0}.admin-character-creation-note{grid-template-columns:1fr}.character-creation-closed-card{padding:50px 24px}}


/* ========================================
   TEXAS LEGACIES — SUBMUNDO
   AGIOTAS & TRAFICANTES
======================================== */

.admin-underground,
.dashboard-underground {
    padding: 70px 5%;
}

.admin-underground-heading,
.dashboard-underground-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 35px;
    margin-bottom: 45px;
}

.admin-underground-heading > div > span,
.dashboard-underground-heading > div > span,
.admin-underground-card-heading > span,
.admin-underground-section-heading span,
.dashboard-underground-section-heading span,
.dashboard-underground-role-heading > span {
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 4px;
}

.admin-underground-heading h2,
.dashboard-underground-heading h2 {
    margin: 14px 0 18px;
    color: var(--ink);
    font-size: clamp(45px, 6vw, 76px);
    line-height: .92;
    font-weight: normal;
}

.admin-underground-heading p,
.dashboard-underground-heading p,
.admin-underground-card-heading p,
.admin-underground-section-heading p,
.dashboard-underground-section-heading p,
.dashboard-underground-role-heading p {
    max-width: 720px;
    color: var(--leather);
    font: 13px/1.9 Arial, sans-serif;
}

.admin-underground-symbol {
    color: var(--rust);
    font-size: 38px;
}

.admin-underground-summary,
.dashboard-underground-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 35px;
    border-top: 1px solid rgba(96, 54, 31, .22);
    border-left: 1px solid rgba(96, 54, 31, .22);
}

.admin-underground-summary article,
.dashboard-underground-summary article {
    min-width: 0;
    padding: 24px 20px;
    border-right: 1px solid rgba(96, 54, 31, .22);
    border-bottom: 1px solid rgba(96, 54, 31, .22);
}

.admin-underground-summary span,
.dashboard-underground-summary span,
.admin-underground-stock-numbers span,
.admin-underground-role-terms span,
.admin-underground-loan-meta span,
.dashboard-underground-stock-data span,
.dashboard-underground-loan-meta span,
.dashboard-underground-dealer-summary span {
    display: block;
    color: var(--rust);
    font: 700 7px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-underground-summary strong,
.dashboard-underground-summary strong {
    display: block;
    margin: 10px 0 7px;
    color: var(--ink);
    font-size: 26px;
    font-weight: normal;
}

.admin-underground-summary p,
.dashboard-underground-summary p {
    color: var(--leather);
    font: 11px/1.5 Arial, sans-serif;
}

.admin-underground-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 55px;
}

.admin-underground-card,
.dashboard-underground-section,
.dashboard-underground-role-card {
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(255, 255, 255, .08);
}

.admin-underground-card {
    padding: 32px;
}

.admin-underground-card-heading {
    margin-bottom: 25px;
}

.admin-underground-card-heading h3,
.admin-underground-section-heading h3,
.dashboard-underground-section-heading h3,
.dashboard-underground-role-heading h4 {
    margin: 10px 0 13px;
    color: var(--ink);
    font-size: 32px;
    font-weight: normal;
}

.admin-underground-card label,
.admin-underground-loan-settings label,
.admin-underground-stock-fields label,
.dashboard-underground-character-select,
.dashboard-underground-request-card label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 17px;
}

.admin-underground-card label > span,
.dashboard-underground-character-select > span,
.dashboard-underground-request-card label > span {
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-underground-card input,
.admin-underground-card select,
.dashboard-underground-character-select select,
.dashboard-underground-request-card input,
.dashboard-underground-request-card select,
.dashboard-underground-payment input {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid rgba(96, 54, 31, .28);
    background: rgba(241, 221, 194, .45);
    color: var(--ink);
    font: 12px Arial, sans-serif;
}

.admin-underground-checks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0;
}

.admin-underground-checks label,
.admin-underground-inline-check {
    flex-direction: row !important;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(96, 54, 31, .18);
}

.admin-underground-checks input,
.admin-underground-inline-check input {
    width: auto;
    min-height: 0;
}

.admin-underground-loan-settings,
.admin-underground-stock-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.admin-underground-stock-fields {
    grid-template-columns: repeat(2, 1fr);
}

.admin-underground-card button,
.dashboard-underground button {
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--cream);
    cursor: pointer;
    font: 700 8px Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.admin-underground-card button.secondary,
.dashboard-underground button.secondary {
    background: transparent;
    color: var(--ink);
}

.admin-underground-button-row,
.dashboard-underground-role-actions,
.dashboard-underground-payment {
    display: flex;
    gap: 10px;
    align-items: center;
}

.admin-underground-list-section,
.dashboard-underground-section {
    margin-top: 30px;
    padding: 30px;
}

.admin-underground-section-heading,
.dashboard-underground-section-heading {
    margin-bottom: 25px;
}

.admin-underground-role-list,
.admin-underground-stock-list,
.admin-underground-loan-list,
.admin-underground-trade-list,
.dashboard-underground-stock,
.dashboard-underground-loans,
.dashboard-underground-history,
.dashboard-underground-role-area {
    display: grid;
    gap: 12px;
}

.admin-underground-role-card,
.admin-underground-stock-card,
.admin-underground-loan-card,
.admin-underground-trade-card,
.dashboard-underground-stock-card,
.dashboard-underground-loan-card,
.dashboard-underground-history > article,
.dashboard-underground-role-loan {
    padding: 20px;
    border: 1px solid rgba(96, 54, 31, .18);
    background: rgba(255, 255, 255, .08);
}

.admin-underground-role-card,
.admin-underground-stock-card,
.admin-underground-trade-card,
.dashboard-underground-stock-card,
.dashboard-underground-role-loan,
.dashboard-underground-history > article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.admin-underground-role-card h4,
.admin-underground-stock-card h4,
.admin-underground-loan-card h4,
.admin-underground-trade-card h4,
.dashboard-underground-stock-card h4,
.dashboard-underground-loan-card h4,
.dashboard-underground-history h4,
.dashboard-underground-role-loan h5,
.dashboard-underground-dealer-stock h5 {
    margin: 7px 0;
    color: var(--ink);
    font-size: 20px;
    font-weight: normal;
}

.admin-underground-role-card p,
.admin-underground-stock-card p,
.admin-underground-loan-card p,
.admin-underground-trade-card p,
.dashboard-underground-stock-card p,
.dashboard-underground-loan-card p,
.dashboard-underground-history p,
.dashboard-underground-role-loan p,
.dashboard-underground-dealer-stock p {
    color: var(--leather);
    font: 11px/1.6 Arial, sans-serif;
}

.admin-underground-role-terms,
.admin-underground-stock-numbers,
.admin-underground-loan-meta,
.dashboard-underground-stock-data,
.dashboard-underground-loan-meta,
.dashboard-underground-dealer-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-underground-role-terms strong,
.admin-underground-stock-numbers strong,
.admin-underground-loan-meta strong,
.dashboard-underground-stock-data strong,
.dashboard-underground-loan-meta strong,
.dashboard-underground-dealer-summary strong {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0;
}

.admin-underground-role-card.inactive,
.admin-underground-stock-card.inactive {
    opacity: .62;
}

.admin-underground-loan-heading,
.dashboard-underground-loan-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 17px;
}

.admin-underground-loan-heading > strong,
.admin-underground-trade-card > strong,
.dashboard-underground-loan-heading > strong,
.dashboard-underground-history > article > strong {
    color: var(--rust);
    font-size: 20px;
    font-weight: normal;
}

.admin-underground-empty,
.dashboard-underground-empty {
    padding: 30px;
    border: 1px dashed rgba(96, 54, 31, .28);
    color: var(--leather);
    text-align: center;
    font: 12px/1.8 Arial, sans-serif;
}

.dashboard-underground-empty.compact {
    padding: 18px;
}

.dashboard-underground-heading {
    align-items: flex-end;
}

.dashboard-underground-character-select {
    min-width: 260px;
}

.dashboard-underground-request-card {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1.4fr auto;
    gap: 14px;
    align-items: end;
    padding: 22px;
    border: 1px solid rgba(96, 54, 31, .18);
}

.dashboard-underground-request-card label {
    margin: 0;
}

.dashboard-underground-request-terms {
    min-height: 46px;
    display: flex;
    align-items: center;
    color: var(--leather);
    font: 11px/1.5 Arial, sans-serif;
}

.dashboard-underground-message {
    margin-bottom: 22px;
    padding: 15px 18px;
    border: 1px solid rgba(96, 54, 31, .25);
    color: var(--ink);
    font: 12px/1.6 Arial, sans-serif;
}

.dashboard-underground-message.success {
    border-color: rgba(23, 59, 69, .35);
    background: rgba(23, 59, 69, .08);
}

.dashboard-underground-message.error {
    border-color: rgba(168, 70, 34, .45);
    background: rgba(168, 70, 34, .08);
}

.dashboard-underground-subheading {
    display: flex;
    justify-content: space-between;
    margin: 25px 0 12px;
    color: var(--rust);
    font: 700 8px Arial, sans-serif;
    letter-spacing: 3px;
}

.dashboard-underground-payment {
    margin-top: 18px;
}

.dashboard-underground-payment input {
    max-width: 180px;
}

.dashboard-underground-role-card {
    padding: 25px;
}

.dashboard-underground-role-loans,
.dashboard-underground-dealer-stock {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.dashboard-underground-dealer-summary {
    margin-top: 20px;
}

.dashboard-underground-dealer-stock article {
    padding: 15px;
    border: 1px solid rgba(96, 54, 31, .16);
}

@media (max-width: 1100px) {
    .admin-underground-summary,
    .dashboard-underground-summary {
        grid-template-columns: repeat(3, 1fr);
    }

    .dashboard-underground-request-card {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .admin-underground,
    .dashboard-underground {
        padding: 45px 5%;
    }

    .admin-underground-heading,
    .dashboard-underground-heading,
    .admin-underground-role-card,
    .admin-underground-stock-card,
    .admin-underground-trade-card,
    .dashboard-underground-stock-card,
    .dashboard-underground-role-loan,
    .dashboard-underground-history > article {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-underground-grid,
    .admin-underground-summary,
    .dashboard-underground-summary,
    .dashboard-underground-request-card,
    .admin-underground-checks,
    .admin-underground-loan-settings,
    .admin-underground-stock-fields {
        grid-template-columns: 1fr;
    }

    .dashboard-underground-character-select {
        width: 100%;
        min-width: 0;
    }

    .dashboard-underground-payment,
    .admin-underground-button-row,
    .dashboard-underground-role-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-underground-payment input {
        max-width: none;
    }
}

/* ========================================
   ADMIN — EVOLUÇÃO DE ATRIBUTOS — FASE 2
======================================== */

.admin-character-attributes > div.has-evolution {
    background: rgba(168, 70, 34, .07);
    box-shadow: inset 0 -3px 0 rgba(168, 70, 34, .68);
}

.admin-character-attributes > div > small {
    margin-top: 7px;
    color: rgba(96, 54, 31, .78);
    font-family: Arial, sans-serif;
    font-size: 7px;
    line-height: 1.4;
}

.admin-attribute-evolution {
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid rgba(96, 54, 31, .18);
}

.admin-attribute-evolution-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 22px;
    align-items: end;
}

.admin-attribute-evolution-heading > div:first-child > span,
.admin-attribute-evolution-form label > span,
.admin-attribute-evolution-history-heading > span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}

.admin-attribute-evolution-heading h4 {
    margin-top: 7px;
    color: var(--ink);
    font-size: 27px;
    font-weight: normal;
}

.admin-attribute-evolution-heading p {
    margin-top: 8px;
    max-width: 620px;
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.7;
}

.admin-attribute-evolution-total {
    min-height: 92px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96, 54, 31, .22);
    text-align: center;
}

.admin-attribute-evolution-total span {
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 6px;
    letter-spacing: 1.5px;
}

.admin-attribute-evolution-total strong {
    margin-top: 7px;
    color: var(--rust);
    font-size: 29px;
    font-weight: normal;
}

.admin-attribute-evolution-form {
    margin-top: 20px;
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 12px;
    border: 1px solid rgba(96, 54, 31, .20);
    background: rgba(255, 255, 255, .08);
}

.admin-attribute-evolution-form label {
    display: grid;
    gap: 8px;
}

.admin-attribute-evolution-form label.wide {
    grid-column: 1 / -1;
}

.admin-attribute-evolution-form select,
.admin-attribute-evolution-form input,
.admin-attribute-evolution-form textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(96, 54, 31, .28);
    border-radius: 0;
    background: rgba(255, 255, 255, .18);
    color: var(--ink);
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.admin-attribute-evolution-form select,
.admin-attribute-evolution-form input {
    min-height: 46px;
}

.admin-attribute-evolution-form textarea {
    min-height: 78px;
    resize: vertical;
}

.admin-attribute-evolution-form button {
    grid-column: 1 / -1;
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.admin-attribute-evolution-form button:hover:not(:disabled) {
    border-color: var(--rust);
    background: var(--rust);
}

.admin-attribute-evolution-form button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.admin-attribute-evolution-history {
    margin-top: 20px;
}

.admin-attribute-evolution-history-heading {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid rgba(96, 54, 31, .18);
}

.admin-attribute-evolution-history-heading small {
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 7px;
}

.admin-attribute-evolution-history-row {
    padding: 13px 0;
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) 135px;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid rgba(96, 54, 31, .14);
}

.admin-attribute-evolution-history-row > div span {
    display: block;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 1px;
}

.admin-attribute-evolution-history-row > div strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 20px;
    font-weight: normal;
}

.admin-attribute-evolution-history-row p,
.admin-attribute-evolution-history-row small,
.admin-attribute-evolution-empty {
    color: var(--leather);
    font-family: Arial, sans-serif;
    font-size: 8px;
    line-height: 1.6;
}

.admin-attribute-evolution-history-row small {
    text-align: right;
}

.admin-attribute-evolution-empty {
    padding: 18px 0 4px;
}

.admin-dice-attributes article.has-attribute-evolution,
.admin-dice-result-equation article.has-attribute-evolution {
    box-shadow: inset 0 -3px 0 rgba(168, 70, 34, .55);
}

@media (max-width: 760px) {
    .admin-attribute-evolution-heading,
    .admin-attribute-evolution-form,
    .admin-attribute-evolution-history-row {
        grid-template-columns: 1fr;
    }

    .admin-attribute-evolution-total {
        align-items: flex-start;
        text-align: left;
    }

    .admin-attribute-evolution-history-row small {
        text-align: left;
    }
}
/* ========================================
   FASE 4 · CATÁLOGO DINÂMICO DE ANIMAIS
======================================== */

.admin-pets-custom-species {
    margin: 26px 0 30px;
    padding: 24px;
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(241, 221, 194, .34);
}

.admin-pets-custom-species-heading {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.admin-pets-custom-species-heading span {
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2.6px;
}

.admin-pets-custom-species-heading h4 {
    margin-top: 7px;
    color: var(--ink);
    font-size: 29px;
    font-weight: normal;
}

.admin-pets-custom-species-heading p {
    max-width: 480px;
    color: rgba(16, 42, 51, .66);
    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.7;
}

.admin-pets-custom-species-fields {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 16px;
    align-items: end;
}

.admin-pets-custom-species-fields label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--rust);
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.admin-pets-custom-species-fields label > div {
    display: flex;
    align-items: center;
    border: 1px solid rgba(96, 54, 31, .22);
    background: rgba(255, 255, 255, .22);
}

.admin-pets-custom-species-fields label > div small {
    padding-left: 12px;
    color: var(--leather);
}

.admin-pets-custom-species-fields input[type="text"],
.admin-pets-custom-species-fields input[type="number"] {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(96, 54, 31, .22);
    outline: 0;
    background: rgba(255, 255, 255, .24);
    color: var(--ink);
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.admin-pets-custom-species-fields label > div input {
    border: 0;
    background: transparent;
}

.admin-pets-custom-species-fields input:focus {
    border-color: var(--rust);
}

.admin-pets-custom-toggle {
    min-height: 46px;
    padding: 10px 12px;
    flex-direction: row !important;
    align-items: center;
    border: 1px solid rgba(96, 54, 31, .18);
    background: rgba(255, 255, 255, .18);
    color: var(--leather) !important;
    font-size: 8px !important;
    font-weight: normal !important;
    letter-spacing: .4px !important;
    line-height: 1.5;
}

.admin-pets-custom-toggle input {
    flex: 0 0 auto;
}

.admin-pets-custom-species-fields button {
    min-height: 46px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 0;
    background: var(--ink);
    color: var(--cream);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.admin-pets-custom-species-fields button:hover:not(:disabled) {
    background: var(--rust);
}

.admin-pets-custom-species-fields button:disabled {
    opacity: .45;
    cursor: wait;
}

.admin-pet-setting-card.custom {
    border-color: rgba(168, 70, 34, .34);
}

.admin-pet-custom-name-input {
    width: 100%;
    margin-top: 7px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(96, 54, 31, .24);
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.admin-pet-custom-name-input:focus {
    border-bottom-color: var(--rust);
}

.admin-pet-setting-heading > small {
    display: block;
    margin-top: 7px;
    color: rgba(96, 54, 31, .62);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 1px;
}

@media (max-width: 980px) {
    .admin-pets-custom-species-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .admin-pets-custom-species {
        padding: 20px;
    }

    .admin-pets-custom-species-heading {
        flex-direction: column;
    }

    .admin-pets-custom-species-fields {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   NAVEGAÇÃO — RANCHEIROS / URBANOS /
   NATIVOS / PERSONAGENS
   V3 — 2026-09-11
======================================== */

.site-directory-header {
    position: absolute;
}

.site-directory-header .site-directory-nav {
    gap:
        clamp(
            14px,
            1.65vw,
            28px
        );
}

.site-directory-header .site-directory-nav a {
    white-space: nowrap;
}


/* ========================================
   PERSONAGENS — PADRONIZAÇÃO VISUAL V3

   A versão anterior tinha uma identidade
   paralela: fundo escuro permanente, hero
   gráfico, tipografia própria e cards escuros.
   Esta versão usa a mesma linguagem visual
   de Rancheiros / Urbanos / Nativos:
   - header sobre o hero;
   - hero fotográfico;
   - título serifado em caixa alta;
   - introdução clara e centralizada;
   - seções alternadas claro / escuro;
   - ferrugem, areia, parchment e ink.
======================================== */

.characters-page-body {
    min-height:
        100vh;

    background:
        var(--parchment);

    color:
        var(--ink);
}


/* ========================================
   PERSONAGENS — HERO
======================================== */

.characters-page-body
.characters-page-hero {
    min-height:
        85vh;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    text-align:
        center;

    background:
        url("../assets/personagens.jpg");

    background-size:
        cover;

    background-position:
        center;
}


.characters-page-body
.characters-page-hero::before,
.characters-page-body
.characters-page-hero::after {
    content:
        none;
}


.characters-page-body
.characters-page-hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 33, .28),
            rgba(38, 23, 16, .22) 42%,
            rgba(7, 27, 33, .94)
        );
}


.characters-page-body
.characters-page-hero-content {
    position:
        relative;

    z-index:
        2;

    width:
        auto;

    margin:
        60px
        0
        0;

    padding:
        40px;

    color:
        var(--cream);

    text-align:
        center;
}


.characters-page-body
.characters-page-hero-content
.hero-kicker {
    margin-bottom:
        25px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        normal;

    letter-spacing:
        8px;
}


.characters-page-body
.characters-page-hero-content
.hero-line {
    margin-bottom:
        30px;
}


.characters-page-body
.characters-page-hero-content h1 {
    margin:
        0;

    color:
        var(--cream);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            65px,
            12vw,
            165px
        );

    font-weight:
        normal;

    line-height:
        .78;

    letter-spacing:
        7px;

    text-transform:
        uppercase;

    text-shadow:
        0
        6px
        30px
        rgba(0, 0, 0, .25);
}


.characters-page-hero-phrase {
    margin:
        42px
        0
        0;

    color:
        rgba(241, 221, 194, .92);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        20px;

    font-style:
        italic;

    line-height:
        1.6;
}


/* ========================================
   PERSONAGENS — INTRODUÇÃO
======================================== */

.characters-page-body
.characters-page-intro {
    max-width:
        970px;

    width:
        auto;

    margin:
        auto;

    padding:
        145px
        7%;

    display:
        block;

    border:
        0;

    text-align:
        center;

    background:
        var(--parchment);

    color:
        var(--ink);
}


.characters-page-body
.characters-page-intro
.section-label {
    margin-bottom:
        25px;
}


.characters-page-body
.characters-page-intro h2 {
    margin:
        0
        0
        45px;

    color:
        var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    font-weight:
        normal;

    line-height:
        .92;
}


.characters-page-body
.characters-page-intro > p:last-child {
    max-width:
        760px;

    margin:
        auto;

    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        2;
}


/* ========================================
   PERSONAGENS — CONTADORES
======================================== */

.characters-page-body
.characters-public-summary {
    width:
        100%;

    margin:
        0;

    padding:
        115px
        6%;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border:
        0;

    background:
        var(--ink);

    color:
        var(--cream);
}


.characters-page-body
.characters-public-summary article {
    min-height:
        255px;

    padding:
        38px;

    justify-content:
        center;

    border:
        1px
        solid
        rgba(241, 221, 194, .16);

    border-right:
        0;

    background:
        transparent;
}


.characters-page-body
.characters-public-summary article:last-child {
    border-right:
        1px
        solid
        rgba(241, 221, 194, .16);
}


.characters-page-body
.characters-public-summary span {
    margin-bottom:
        30px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        normal;

    letter-spacing:
        4px;
}


.characters-page-body
.characters-public-summary strong {
    color:
        var(--cream);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            46px,
            5vw,
            68px
        );

    font-weight:
        normal;
}


.characters-page-body
.characters-public-summary p {
    margin-top:
        18px;

    color:
        rgba(241, 221, 194, .62);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.7;
}


/* ========================================
   PERSONAGENS — DIRETÓRIO
======================================== */

.characters-page-body
.characters-directory {
    width:
        100%;

    margin:
        0;

    padding:
        135px
        6%
        145px;

    background:
        var(--cream);

    color:
        var(--ink);
}


.characters-page-body
.characters-directory-heading {
    max-width:
        1200px;

    margin:
        0
        auto
        55px;

    align-items:
        end;
}


.characters-page-body
.characters-directory-heading h2 {
    color:
        var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            50px,
            7vw,
            88px
        );

    font-weight:
        normal;

    line-height:
        .92;
}


.characters-page-body
.characters-directory-heading > p {
    color:
        var(--leather);

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.9;
}


/* ========================================
   PERSONAGENS — FILTROS
======================================== */

.characters-page-body
.characters-public-filters {
    max-width:
        1200px;

    margin:
        0
        auto;

    padding:
        28px;

    border:
        1px
        solid
        rgba(96, 54, 31, .24);

    background:
        rgba(255, 255, 255, .22);
}


.characters-page-body
.characters-public-filters label {
    color:
        var(--rust);
}


.characters-page-body
.characters-public-filters input,
.characters-page-body
.characters-public-filters select {
    border-color:
        rgba(96, 54, 31, .24);

    background:
        rgba(255, 255, 255, .34);

    color:
        var(--ink);
}


.characters-page-body
.characters-public-filters input::placeholder {
    color:
        rgba(96, 54, 31, .48);
}


.characters-page-body
.characters-clear-filters {
    border-color:
        rgba(96, 54, 31, .28);

    color:
        var(--ink);
}


.characters-page-body
.characters-clear-filters:hover {
    border-color:
        var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);
}


.characters-page-body
.characters-results-information {
    max-width:
        1200px;

    margin:
        auto;

    border-color:
        rgba(96, 54, 31, .20);
}


.characters-page-body
.characters-results-information span {
    color:
        rgba(96, 54, 31, .70);
}


/* ========================================
   PERSONAGENS — ESTADOS
======================================== */

.characters-page-body
.characters-public-loading,
.characters-page-body
.characters-public-error,
.characters-page-body
.characters-public-empty {
    max-width:
        1200px;

    margin:
        auto;

    border-color:
        rgba(96, 54, 31, .22);

    background:
        rgba(255, 255, 255, .18);
}


.characters-page-body
.characters-public-loading span,
.characters-page-body
.characters-public-error > span,
.characters-page-body
.characters-public-empty > span {
    color:
        var(--rust);
}


.characters-page-body
.characters-public-loading p {
    color:
        var(--leather);
}


.characters-page-body
.characters-public-error h3,
.characters-page-body
.characters-public-empty h3 {
    color:
        var(--ink);
}


.characters-page-body
.characters-public-error p,
.characters-page-body
.characters-public-empty p {
    color:
        var(--leather);
}


/* ========================================
   PERSONAGENS — GRID / CARDS
======================================== */

.characters-page-body
.characters-public-grid {
    max-width:
        1200px;

    margin:
        auto;

    gap:
        16px;
}


.characters-page-body
.character-public-card {
    border:
        1px
        solid
        rgba(96, 54, 31, .25);

    background:
        var(--parchment);

    box-shadow:
        none;
}


.characters-page-body
.character-public-card:hover {
    border-color:
        var(--rust);

    box-shadow:
        0
        18px
        40px
        rgba(38, 23, 16, .10);
}


.characters-page-body
.character-public-content {
    background:
        var(--parchment);
}


.characters-page-body
.character-public-category {
    color:
        var(--rust);
}


.characters-page-body
.character-public-content h3 {
    color:
        var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        normal;
}


.characters-page-body
.character-public-shape {
    color:
        var(--leather);
}


.characters-page-body
.character-public-information {
    border-color:
        rgba(96, 54, 31, .20);
}


.characters-page-body
.character-public-information div {
    border-color:
        rgba(96, 54, 31, .16);
}


.characters-page-body
.character-public-information span {
    color:
        var(--rust);
}


.characters-page-body
.character-public-information strong {
    color:
        var(--ink);
}


.characters-page-body
.character-public-open {
    border-color:
        rgba(96, 54, 31, .28);

    color:
        var(--ink);
}


.characters-page-body
.character-public-open:hover {
    border-color:
        var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);
}


/*
   O modal permanece escuro propositalmente:
   ele funciona como camada de foco sobre a
   página e não altera a identidade visual
   pública do diretório.
*/


/* ========================================
   RESPONSIVO — NAVEGAÇÃO
======================================== */

@media (max-width: 1100px) {

    .site-directory-header {
        padding:
            0
            3.5%;
    }

    .site-directory-header
    .site-directory-nav {
        gap:
            14px;
    }

    .site-directory-header
    .site-directory-nav a {
        font-size:
            8px;

        letter-spacing:
            1.4px;
    }

    .characters-page-body
    .characters-public-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .characters-page-body
    .characters-public-summary article {
        border:
            1px
            solid
            rgba(241, 221, 194, .16);
    }
}


@media (max-width: 900px) {

    .site-directory-header {
        height:
            auto;

        min-height:
            128px;

        padding:
            18px
            5%
            15px;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            14px;

        background:
            rgba(7, 27, 33, .86);

        backdrop-filter:
            blur(8px);
    }

    .site-directory-header
    .site-directory-nav {
        width:
            100%;

        display:
            flex;

        gap:
            20px;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        padding-bottom:
            5px;

        scrollbar-width:
            none;
    }

    .site-directory-header
    .site-directory-nav::-webkit-scrollbar {
        display:
            none;
    }

    .site-directory-header
    .site-directory-nav
    a {
        display:
            block
            !important;

        flex:
            0
            0
            auto;

        font-size:
            8px;

        letter-spacing:
            1.5px;
    }

    .characters-page-body
    .characters-page-hero {
        min-height:
            75vh;
    }

    .characters-page-body
    .characters-page-intro {
        padding:
            110px
            7%;
    }

    .characters-page-body
    .characters-directory-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .characters-page-body
    .characters-directory-heading > p {
        text-align:
            left;
    }
}


@media (max-width: 700px) {

    .characters-page-body
    .characters-page-hero-content h1 {
        font-size:
            48px;

        letter-spacing:
            3px;
    }

    .characters-page-body
    .characters-page-hero-phrase {
        font-size:
            16px;
    }

    .characters-page-body
    .characters-public-summary,
    .characters-page-body
    .characters-directory {
        padding:
            100px
            6%;
    }

    .characters-page-body
    .characters-public-summary {
        grid-template-columns:
            1fr;
    }

    .characters-page-body
    .characters-public-summary article {
        min-height:
            190px;
    }

    .characters-page-body
    .characters-public-filters {
        grid-template-columns:
            1fr;
    }

    .characters-page-body
    .characters-public-search {
        grid-column:
            auto;
    }

    .characters-page-body
    .characters-public-grid {
        grid-template-columns:
            1fr;
    }
}