/* ============================================================
   Fazendinha Idle — main.css
   ============================================================ */

/* ---- Variáveis ---- */
:root {
    --primary:      #4CAF50;
    --primary-dark: #388E3C;
    --secondary:    #8BC34A;
    --earth:        #795548;
    --earth-light:  #A1887F;
    --sky:          #87CEEB;
    --gold:         #FFD700;
    --gem:          #00BCD4;
    --danger:       #F44336;
    --warning:      #FF9800;
    --dark:         #212121;
    --gray:         #757575;
    --light:        #F5F5F5;
    --white:        #FFFFFF;
    --card-bg:      #FFFDE7;
    --card-border:  #E8F5E9;
    --radius:       12px;
    --radius-sm:    8px;
    --shadow:       0 2px 12px rgba(0,0,0,.1);
    --shadow-hover: 0 6px 24px rgba(0,0,0,.15);
    --font:         'Nunito', sans-serif;
    --topbar-h:     64px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: #EDF4E1;
    color: var(--dark);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.5;
}
img, svg.emoji { width: 1.2em; height: 1.2em; vertical-align: middle; }
a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font); cursor: pointer; border: none; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--primary-dark);
    color: var(--white);
    display: flex; align-items: center; gap: 16px;
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    z-index: 1000;
}

.topbar__brand {
    display: flex; align-items: center; gap: 8px;
    font-size: 1.2rem; font-weight: 800;
    flex-shrink: 0;
}
.topbar__logo { font-size: 1.6rem; }

.topbar__nav {
    display: flex; gap: 4px; flex: 1; overflow-x: auto;
}
.nav-btn {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 12px;
    color: rgba(255,255,255,.8);
    border-radius: var(--radius-sm);
    font-size: .72rem; font-weight: 700; gap: 2px;
    white-space: nowrap;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.nav-btn i { font-size: 1rem; }
.nav-btn:hover, .nav-btn.active {
    background: rgba(255,255,255,.2);
    color: var(--white);
    text-decoration: none;
}

.topbar__hud {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.hud-stat {
    display: flex; align-items: center; gap: 4px;
    background: rgba(0,0,0,.2);
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 700; font-size: .85rem;
}
.hud-icon { font-size: 1rem; }
.hud-stat-inline {
    font-weight: 700; font-size: .9rem;
    background: var(--gold);
    color: var(--dark);
    border-radius: 20px;
    padding: 4px 12px;
}

.topbar__user {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: .85rem;
}
.btn-logout {
    color: rgba(255,255,255,.8);
    font-size: 1rem;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background .15s;
}
.btn-logout:hover { background: rgba(255,255,255,.2); color: var(--white); text-decoration: none; }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.main-content {
    padding-top: calc(var(--topbar-h) + 16px);
    padding-bottom: 32px;
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
    background: var(--white);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.section__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap; gap: 8px;
}
.section__head h2 {
    font-size: 1.1rem; font-weight: 800;
    display: flex; align-items: center; gap: 8px;
}
.section__head h2 i { color: var(--primary); }
.section__subtitle {
    font-size: 1rem; font-weight: 700; margin-bottom: 14px;
    display: flex; align-items: center; gap: 6px;
}
.section--empty {
    text-align: center; color: var(--gray);
    padding: 32px; font-size: 1rem;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    background: var(--secondary);
    color: var(--white);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: .75rem; font-weight: 700;
}
.badge--level { background: var(--earth-light); }
.badge--reset { background: var(--warning); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 700; font-size: .85rem;
    transition: all .15s;
    cursor: pointer; border: none;
}
.btn--primary   { background: var(--primary);      color: var(--white); }
.btn--primary:hover { background: var(--primary-dark); }
.btn--secondary { background: var(--secondary);    color: var(--white); }
.btn--secondary:hover { filter: brightness(1.1); }
.btn--harvest   { background: var(--gold);         color: var(--dark); }
.btn--harvest:hover { filter: brightness(1.1); }
.btn--ghost     { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn--ghost:hover { background: var(--primary); color: var(--white); }
.btn--disabled  { background: #ccc; color: #888; cursor: not-allowed; }
.btn--sm        { padding: 5px 10px; font-size: .78rem; }
.btn--full      { width: 100%; justify-content: center; }

.cost-badge {
    background: rgba(0,0,0,.15);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: .75rem;
}

/* ============================================================
   XP BAR
   ============================================================ */
.xp-bar-wrap {
    background: var(--white);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.xp-bar-label {
    display: flex; justify-content: space-between;
    font-weight: 700; font-size: .85rem; margin-bottom: 6px;
}
.xp-numbers { color: var(--gray); }
.xp-bar {
    height: 12px;
    background: #E8F5E9;
    border-radius: 10px;
    overflow: hidden;
}
.xp-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 10px;
    transition: width .4s ease;
}

/* ============================================================
   LOTES (PLOTS)
   ============================================================ */
.plots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.plot {
    background: #FFF8E1;
    border: 2px solid #F0C040;
    border-radius: var(--radius);
    min-height: 130px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.plot:hover:not(.plot--locked) { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.plot--locked { background: #EEEEEE; border-color: #BDBDBD; cursor: not-allowed; }
.plot--ready { border-color: var(--primary); animation: pulse-ready 1.2s infinite; }

@keyframes pulse-ready {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,.4); }
    50%       { box-shadow: 0 0 0 8px rgba(76,175,80,0); }
}

.plot__lock {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #BDBDBD; font-size: .75rem;
}
.plot__lock i { font-size: 1.4rem; }

.plot__empty {
    width: 100%; height: 100%;
    background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; color: var(--earth-light); font-size: .8rem; font-weight: 700;
    min-height: 130px;
    border-radius: var(--radius);
    transition: background .15s, color .15s;
}
.plot__empty i { font-size: 1.6rem; }
.plot__empty:hover { background: rgba(76,175,80,.1); color: var(--primary); }

.plot__crop {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 12px; width: 100%;
}
.plot__emoji { font-size: 2.2rem; }
.plot__name { font-weight: 700; font-size: .8rem; text-align: center; }

.plot__progress {
    width: 100%; height: 6px;
    background: #E0E0E0;
    border-radius: 4px; overflow: hidden;
}
.plot__progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width .5s;
}
.plot__timer { font-size: .72rem; color: var(--gray); }

/* ============================================================
   ANIMAIS
   ============================================================ */
.animals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.animal-card {
    background: #E8F5E9;
    border: 2px solid #C8E6C9;
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    transition: transform .15s, border-color .15s;
}
.animal-card:hover { transform: translateY(-2px); }
.animal-card--ready { border-color: var(--gold); background: #FFFDE7; }
.animal-card__emoji { font-size: 2rem; flex-shrink: 0; }
.animal-card__info { flex: 1; }
.animal-card__info strong { display: block; font-size: .9rem; }
.animal-card__info small { color: var(--gray); font-size: .75rem; }
.animal-card__actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.animal-timer { display: flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--gray); }

/* ============================================================
   MISSÕES (QUICK)
   ============================================================ */
.missions-quick { display: flex; flex-direction: column; gap: 10px; }
.mission-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid #EEE;
}
.mission-row:last-child { border-bottom: none; }
.mission-row--done { opacity: .6; }
.mission-row__info { display: flex; justify-content: space-between; grid-column: 1; }
.mission-row__name { font-weight: 700; font-size: .85rem; }
.mission-row__prog { font-size: .75rem; color: var(--gray); }
.mission-row__bar {
    grid-column: 1; height: 6px;
    background: #EEE; border-radius: 4px; overflow: hidden;
}
.mission-row__fill { height: 100%; background: var(--primary); border-radius: 4px; }
.mission-row__reward { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 2px; font-size: .78rem; font-weight: 700; justify-content: center; }

/* ============================================================
   MISSÕES (PÁGINA)
   ============================================================ */
.missions-list { display: flex; flex-direction: column; gap: 10px; }
.mission-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px;
    background: #F9FBE7;
    border: 1px solid #E8F5E9;
    border-radius: var(--radius-sm);
}
.mission-card--done { background: #E8F5E9; }
.mission-card--done .fa-circle-check { color: var(--primary); }
.mission-card__check { font-size: 1.3rem; color: #BDBDBD; margin-top: 2px; }
.mission-card__body { flex: 1; }
.mission-card__body strong { font-size: .9rem; }
.mission-card__body p { font-size: .8rem; color: var(--gray); margin: 3px 0 6px; }
.mission-progress { height: 6px; background: #E0E0E0; border-radius: 4px; overflow: hidden; margin-bottom: 3px; }
.mission-progress__bar { height: 100%; background: var(--primary); border-radius: 4px; }
.mission-card__reward { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; font-weight: 700; }

/* ============================================================
   CONQUISTAS
   ============================================================ */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.ach-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--radius);
    padding: 14px 10px;
    text-align: center;
    transition: transform .15s;
}
.ach-card:hover { transform: translateY(-2px); }
.ach-card--locked { opacity: .45; filter: grayscale(.8); }
.ach-card--done { border-color: var(--gold); }
.ach-card__emoji { font-size: 2rem; }
.ach-card__name { font-size: .72rem; font-weight: 700; margin-top: 6px; }
.ach-card__date { font-size: .65rem; color: var(--gray); }
.ach-card__lock { font-size: .9rem; color: #BDBDBD; margin-top: 4px; }

/* ============================================================
   CONSTRUÇÕES
   ============================================================ */
.buildings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.building-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--radius);
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    transition: transform .15s, box-shadow .15s;
}
.building-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.building-card--built { border-color: var(--primary); background: #E8F5E9; }
.building-card--locked { opacity: .6; }
.building-card__header { display: flex; align-items: center; gap: 10px; }
.building-emoji { font-size: 1.8rem; }
.building-card__desc { font-size: .8rem; color: var(--gray); }
.building-lvl-bar { height: 6px; background: #C8E6C9; border-radius: 4px; overflow: hidden; }
.building-lvl-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s; }
.building-card__footer { margin-top: auto; }
.locked-msg, .maxed-msg { font-size: .82rem; color: var(--gray); display: flex; align-items: center; gap: 5px; }
.maxed-msg { color: var(--gold); }

/* ============================================================
   TRABALHADORES
   ============================================================ */
.workers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.worker-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--radius);
    padding: 14px;
    display: flex; align-items: flex-start; gap: 12px;
    transition: transform .15s;
}
.worker-card:hover { transform: translateY(-2px); }
.worker-card--active { border-color: var(--primary); background: #E8F5E9; }
.worker-card__icon {
    font-size: 1.8rem; color: var(--earth);
    background: rgba(121,85,72,.1);
    border-radius: 50%;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.worker-card--active .worker-card__icon { color: var(--primary); background: rgba(76,175,80,.15); }
.worker-card__info { flex: 1; }
.worker-card__info strong { display: block; font-size: .9rem; }
.worker-card__info p { font-size: .78rem; color: var(--gray); margin: 3px 0 6px; }
.worker-cost { font-size: .78rem; font-weight: 700; }
.worker-card__action { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.active-badge { color: var(--primary); font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 4px; }

/* ============================================================
   MERCADO
   ============================================================ */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.market-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--radius);
    padding: 14px;
    display: flex; align-items: center; gap: 10px;
}
.market-card__emoji { font-size: 2rem; flex-shrink: 0; }
.market-card__info { flex: 1; font-size: .82rem; }
.market-card__info strong { display: block; }
.market-card__price { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.price-up   { color: var(--primary); font-size: .72rem; }
.price-down { color: var(--danger);  font-size: .72rem; }
.market-card__actions { display: flex; flex-direction: column; gap: 5px; }

.orders-list { display: flex; flex-direction: column; gap: 10px; }
.order-card {
    background: #FFF8E1;
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 12px 16px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.order-card__items { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.order-item { background: rgba(0,0,0,.07); border-radius: 20px; padding: 3px 10px; font-size: .82rem; }
.order-card__reward { display: flex; gap: 8px; font-weight: 700; font-size: .9rem; }
.order-mult { background: var(--primary); color: #FFF; border-radius: 6px; padding: 1px 6px; font-size: .75rem; }
.order-card__timer { font-size: .78rem; color: var(--gray); display: flex; align-items: center; gap: 4px; }

/* ============================================================
   PLANT MODAL
   ============================================================ */
.plant-modal h3 { margin-bottom: 14px; font-size: 1rem; }
.plant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 60vh; overflow-y: auto;
}
.crop-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px;
    background: #F9FBE7;
    border: 2px solid #E8F5E9;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s;
}
.crop-btn:hover:not(:disabled) { border-color: var(--primary); background: #E8F5E9; }
.crop-btn--locked { opacity: .5; cursor: not-allowed; }
.crop-btn__emoji { font-size: 1.8rem; }
.crop-btn__name { font-size: .72rem; font-weight: 700; text-align: center; }
.crop-btn__time { font-size: .65rem; color: var(--gray); }
.crop-btn__price { font-size: .7rem; font-weight: 700; }
.crop-btn__level-req { font-size: .65rem; color: var(--danger); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    padding: 16px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 560px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
    animation: modal-in .18s ease;
}
@keyframes modal-in {
    from { transform: scale(.95); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.modal-close {
    position: absolute; top: 12px; right: 12px;
    background: transparent; border: none; cursor: pointer;
    font-size: 1.2rem; color: var(--gray);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background .1s;
}
.modal-close:hover { background: #EEE; }

/* ============================================================
   TOAST
   ============================================================ */
#toast-container {
    position: fixed; bottom: 20px; right: 20px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 3000;
}
.toast {
    background: var(--dark);
    color: var(--white);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 600;
    box-shadow: var(--shadow);
    animation: toast-in .2s ease, toast-out .3s ease 2.7s forwards;
    display: flex; align-items: center; gap: 8px;
    max-width: 300px;
}
.toast--success { background: var(--primary-dark); }
.toast--error   { background: var(--danger); }
.toast--gold    { background: #B8860B; }
@keyframes toast-in  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; transform:translateY(8px); } }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.25) 0 90px, transparent 91px),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,.18) 0 120px, transparent 121px),
        linear-gradient(135deg, #2f6d35 0%, #5ea045 45%, #8bbf4f 100%);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card {
    background: rgba(255,255,255,.93);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.75);
    padding: 36px 32px;
    box-shadow: 0 14px 45px rgba(0,0,0,.22);
    backdrop-filter: blur(4px);
}
.auth-logo {
    font-size: 3.3rem;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.auth-title {
    text-align: center;
    font-size: 1.7rem;
    letter-spacing: .2px;
    font-weight: 800;
    color: #245a2e;
}
.auth-sub {
    text-align: center;
    color: #4f5f52;
    margin-bottom: 24px;
    font-weight: 600;
}
.auth-footer { text-align: center; margin-top: 20px; font-size: .85rem; color: var(--gray); }
.auth-help-link { text-align: center; margin-top: 4px; font-size: .84rem; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-weight: 700; font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.form-group label i { color: var(--primary); }
.form-group input {
    padding: 10px 14px;
    border: 2px solid #DCE6D9;
    border-radius: var(--radius-sm);
    font-family: var(--font); font-size: .9rem;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    background: rgba(255,255,255,.92);
    outline: none;
}
.form-group input:focus {
    border-color: #3e8f3e;
    box-shadow: 0 0 0 3px rgba(76,175,80,.18);
    background: #fff;
}

.alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}
.alert--error { background: #FFEBEE; color: var(--danger); border: 1px solid #FFCDD2; }
.alert--success { background: #E8F5E9; color: var(--primary-dark); border: 1px solid #C8E6C9; }

/* ============================================================
   FLASH
   ============================================================ */
.flash {
    padding: 12px 16px; border-radius: var(--radius-sm);
    margin-bottom: 16px; font-weight: 600; font-size: .9rem;
    display: flex; align-items: center; gap: 8px;
}
.flash--info    { background: #E3F2FD; color: #1565C0; }
.flash--success { background: #E8F5E9; color: var(--primary-dark); }
.flash--error   { background: #FFEBEE; color: var(--danger); }

/* ============================================================
   MISC
   ============================================================ */
.info-msg {
    background: #E3F2FD;
    color: #1565C0;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    margin-bottom: 16px;
    display: flex; align-items: flex-start; gap: 8px;
}
.empty-msg { color: var(--gray); text-align: center; padding: 24px; font-size: .9rem; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 600px) {
    .topbar__title { display: none; }
    .topbar {
        padding: 8px 12px;
        height: 56px;
    }
    .topbar__nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        background: var(--primary-dark);
        border-top: 1px solid rgba(255,255,255,.2);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        justify-content: space-between;
        gap: 6px;
        overflow-x: auto;
    }
    .nav-btn {
        min-width: 64px;
        padding: 4px 8px;
        font-size: .68rem;
        gap: 3px;
        flex: 1;
    }
    .nav-btn span {
        display: inline;
        font-size: .66rem;
        line-height: 1;
    }
    .topbar__hud .hud-stat:last-child { display: none; }
    .main-content {
        padding-top: 72px;
        padding-bottom: 92px;
    }
    .plots-grid { grid-template-columns: repeat(3, 1fr); }
    .auth-card  { padding: 24px 16px; }
}

@media (max-width: 400px) {
    .plots-grid { grid-template-columns: repeat(2, 1fr); }
}