/* GTA Online Assistant — consolidated stylesheet */
/* Rebuilt from the current UI source. One rule per selector/context. */

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

button {
    font: inherit;
    color: inherit;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hero-label,
.hero h1,
.hero p {
    position: relative;
    z-index: 1;
}

.hero-label {
    margin-bottom: 10px;
    color: var(--orange-bright);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.4px;
}

.back-button {
    margin-bottom: 18px;
    padding: 7px 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
}

.back-button:hover {
    color: var(--text-bright);
}

.page-header {
    margin-bottom: 20px;
}

.page-header h1 {
    color: var(--text-bright);
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: -1px;
}

.page-header p {
    margin-top: 9px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 17px;
    background: linear-gradient(
            135deg,
            rgba(216, 111, 145, 0.055),
            transparent
        ),
        var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.stat-card::after {
    content: "";
    position: absolute;
    left: 17px;
    right: 17px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--teal-dark),
        transparent
    );
}

.stat-card span {
    color: var(--muted);
    font-size: 10px;
}

.stat-card strong {
    color: var(--text-bright);
    font-size: 22px;
    letter-spacing: -0.5px;
}

.action-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 16px;
}

.action-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: left;
    color: var(--text-bright);
    font-size: 12px;
}

.action-button:hover {
    background: var(--panel-hover);
    border-color: var(--border-strong);
}

.action-button span {
    color: var(--teal);
}

.winch-header {
    padding: 23px;
    border-color: rgba(216, 121, 76, 0.24);
    background: linear-gradient(
            135deg,
            rgba(216, 121, 76, 0.13),
            rgba(216, 111, 145, 0.04),
            transparent
        );
}

.winch-header .hero-label {
    color: var(--orange-bright);
}

.winch-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.winch-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 17px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: left;
}

.winch-action:hover {
    background: var(--panel-hover);
    border-color: rgba(216, 121, 76, 0.3);
}

.winch-action strong {
    color: var(--text-bright);
    font-size: 12px;
}

.winch-action span {
    color: var(--orange-bright);
}

.empty-state {
    padding: 40px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.012);
    text-align: center;
}

.empty-state span {
    color: var(--teal);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.empty-state p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 11px;
}

.nav-item.active {
    color: var(--teal-bright);
}

body.light-theme .topbar,
body.light-theme .bottom-nav {
    background: rgba(238, 229, 231, 0.94);
}

body.light-theme .topbar-icon:hover {
    background: linear-gradient(
            145deg,
            #f4dddd,
            #dac4ca
        );
    border-color: rgba(190, 91, 120, 0.50);
}

body.light-theme .visual-card.business-card {
    background: linear-gradient(
            135deg,
            #c7d0cb,
            #aebcb5
        );
}

.content {
    padding: 20px 16px 100px;
    padding-bottom: 30px;
}

.topbar-icon,
.theme-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(0,0,0,.18)
        );
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(0,0,0,.18);
    transition: transform .15s ease,
        border-color .2s ease,
        background .2s ease;
}

.topbar-icon:hover,
.theme-toggle:hover {
    border-color: rgba(232,130,153,.55);
}

.topbar-icon:active,
.theme-toggle:active {
    transform: scale(.92);
}

body:not(.light-theme) .topbar-icon {
    color: #e8e0d0;
}

body.light-theme .hero-label {
    color: #c86455;
}

.topbar-icon:hover {
    border-color: var(--teal);
    background: transparent;
    color: var(--text-bright);
}

.topbar-icon:active {
    transform: scale(0.94);
}

body.light-theme #theme-toggle {
    background: rgba(221, 184, 193, 0.45);
}

.topbar-icon,
.topbar-actions .theme-toggle {
    position: static !important;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
}

.topbar-icon:hover,
.topbar-actions .theme-toggle:hover {
    border-color: var(--border-strong);
}

.topbar-actions #theme-toggle:hover {
    border-color: rgba(232, 130, 153, 0.8);
    background: rgba(232, 130, 153, 0.18);
}

.topbar-icon:active,
.topbar-actions .theme-toggle:active {
    transform: scale(0.93);
}

body.light-theme .topbar-icon,
body.light-theme .topbar-actions .theme-toggle {
    background: rgba(255, 255, 255, 0.42);
    color: var(--text);
    border-color: rgba(40, 35, 35, 0.16);
}

body.light-theme .topbar-actions #theme-toggle {
    background: rgba(232, 130, 153, 0.18);
    border-color: rgba(190, 105, 126, 0.42);
    color: #b95f78;
}

.account-level {
    margin-bottom: 10px;
    padding: 16px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--panel);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.account-label {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.account-status {
    margin-top: 10px;
    padding: 16px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--panel);
}

.account-status-title {
    margin-bottom: 12px;
    color: var(--teal);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.account-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-top: 1px solid var(--border);
}

.account-status-row span {
    color: var(--muted);
    font-size: 11px;
}

.account-status-row strong {
    color: var(--text-bright);
    font-size: 13px;
}

#theme-toggle {
    display: flex !important;
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    width: 38px;
    height: 38px;
    border-radius: 7px;
}

.business-summary,
.activity-summary {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-height: 82px;
    margin: 14px 0 20px;
    padding: 16px 17px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(216,111,145,.11), rgba(216,121,76,.045)), var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
}

.business-summary::before,
.activity-summary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--teal-bright), var(--orange));
}

.business-summary span,
.activity-summary span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.business-summary strong,
.activity-summary strong {
    color: var(--text-bright);
    font-size: 28px;
    line-height: .9;
    letter-spacing: -1px;
}

.business-summary small,
.activity-summary small {
    margin-bottom: 1px;
    color: var(--muted);
    font-size: 9px;
}

.business-group-title::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border);
}

.business-card:active {
    transform: scale(.985);
}

.activity-summary {
    align-items: center;
}

.activity-summary > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.activity-group-head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.activity-item:hover {
    background: var(--panel-hover);
    border-color: var(--border-strong);
}

.activity-item:active {
    transform: scale(.99);
}

.activity-item-main small {
    color: var(--muted);
    font-size: 8px;
}

.activity-item.done .activity-item-main strong {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(238,143,172,.55);
}

.business-detail-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px;
    padding: 15px 16px;
    background: linear-gradient(135deg, rgba(232,130,153,.08), rgba(216,121,76,.045)), var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
}

.business-detail-status > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.business-detail-status span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.business-detail-status strong {
    color: var(--text-bright);
    font-size: 23px;
    line-height: 1;
}

.business-detail-status.is-owned strong {
    color: var(--teal-bright);
}

.business-toggle,
.business-toggle-detail {
    min-width: 82px;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: rgba(255,255,255,.025);
    color: var(--text-bright);
    font-size: 10px;
    font-weight: 700;
}

.business-toggle:hover,
.business-toggle-detail:hover {
    border-color: rgba(232,130,153,.5);
    background: rgba(232,130,153,.08);
}

.business-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.business-form .edit-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 12px 13px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.business-form .edit-field > span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.business-form #business-location,
.business-form #business-notes {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    outline: none;
    background: var(--bg-soft);
    color: var(--text-bright);
    font-family: inherit;
}

.business-form #business-location {
    height: 40px;
    padding: 0 11px;
}

.business-form #business-notes {
    min-height: 92px;
    padding: 10px 11px;
    resize: vertical;
    font-size: 11px;
    line-height: 1.45;
}

.business-form #business-location:focus,
.business-form #business-notes:focus {
    border-color: rgba(232,130,153,.55);
    box-shadow: 0 0 0 3px rgba(232,130,153,.07);
}

.business-check-row {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.business-check-row > span {
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
}

.business-check-row:has(.business-check:checked) {
    background: linear-gradient(90deg, rgba(232,130,153,.10), rgba(232,130,153,.025)), var(--panel);
    border-color: rgba(232,130,153,.32);
}

.business-check {
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--bg-soft);
    appearance: none;
}

.business-check:checked {
    border-color: rgba(232,130,153,.8);
    background: linear-gradient(135deg, #d96f8d, #bd596f);
}

.business-check:checked::after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    margin: 3px 0 0 6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(42deg);
}

body.light-theme .business-summary,
body.light-theme .activity-summary,
body.light-theme .business-card,
body.light-theme .activity-item,
body.light-theme .business-detail-status,
body.light-theme .business-form .edit-field,
body.light-theme .business-check-row {
    background: rgba(245,238,239,.82);
    border-color: rgba(45,35,42,.15);
}

body.light-theme .business-card:hover,
body.light-theme .activity-item:hover {
    background: rgba(239,230,232,.95);
}

.business-summary.business-overview,
.activity-summary.activity-overview {
    display: block;
    min-height: 0;
    margin: 18px 0 28px;
    padding: 18px 18px 16px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(238,143,172,.105), rgba(216,121,76,.025) 55%), var(--panel);
    box-shadow: 0 14px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}

.business-overview-copy,
.activity-overview-copy {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 12px;
}

.business-overview-copy > span,
.activity-overview-copy > span {
    grid-column: 1/-1;
    margin-bottom: 6px;
    color: var(--teal-bright);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}

.business-overview-copy strong,
.activity-overview-copy strong {
    font-size: 32px;
    line-height: 1;
    letter-spacing: -1.5px;
}

.business-overview-copy strong b,
.activity-overview-copy strong b {
    margin-left: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.business-overview-copy small,
.activity-overview-copy small {
    align-self: end;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.3;
    text-align: right;
}

.business-overview-meter,
.activity-overview-meter {
    height: 3px;
    margin-top: 15px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.055);
}

.business-overview-meter i,
.activity-overview-meter i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg,var(--teal),var(--orange));
    box-shadow: 0 0 12px rgba(238,143,172,.25);
}

.business-group {
    margin-bottom: 28px;
}

.business-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 2px 10px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.business-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

.business-card {
    position: relative;
    width: 100%;
    min-height: 116px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 13px 14px;
    overflow: hidden;
    background: linear-gradient(145deg,rgba(255,255,255,.018),transparent 55%),var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
    box-shadow: 0 7px 18px rgba(0,0,0,.12);
}

.business-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--teal-bright);
    transition: width .15s ease, background .15s ease;
}

.business-card:hover {
    background: var(--panel-hover);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.business-card.owned {
    border-color: rgba(238,143,172,.28);
}

.business-card.owned::after {
    width: 100%;
    background: linear-gradient(90deg,var(--teal-bright),transparent);
}

.business-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.business-index {
    color: rgba(232,224,208,.28);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.business-status {
    align-self: flex-start;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 99px;
    color: var(--muted);
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 1.1px;
    border-color: rgba(205,218,202,.08);
    background: rgba(255,255,255,.025);
}

.business-card.owned .business-status {
    color: var(--teal-bright);
    border-color: rgba(238,143,172,.24);
    background: rgba(238,143,172,.07);
}

.business-card-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin-top: auto;
    padding-right: 18px;
}

.business-card-main strong {
    color: var(--text-bright);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.12;
}

.business-card-main small {
    color: var(--muted);
    font-size: 8px;
    line-height: 1.25;
    opacity: .72;
}

.business-open {
    position: absolute;
    right: 12px;
    bottom: 13px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    transition: .15s;
}

.business-card:hover .business-open {
    color: var(--teal-bright);
    transform: translateX(2px);
}

.activity-summary.activity-overview {
    margin-bottom: 30px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.activity-group {
    min-width: 0;
    position: relative;
}

.activity-group-head > div > div {
    gap: 3px;
}

.activity-group-head small {
    color: var(--muted);
    font-size: 8px;
    opacity: .7;
}

.activity-group-head > span {
    flex: 0 0 auto;
    padding: 5px 8px;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 99px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .8px;
    background: rgba(255,255,255,.025);
}

.activity-items {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.activity-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 2px;
    border-radius: 0 3px 3px 0;
    background: var(--border-strong);
}

.activity-item.done::before {
    background: var(--teal-bright);
}

.activity-item.done {
    border-color: rgba(216,111,145,.28);
    background: linear-gradient(90deg,rgba(238,143,172,.075),transparent 70%),var(--panel);
}

.activity-item-main strong {
    color: var(--text-bright);
    font-size: 11px;
    font-weight: 700;
}

.activity-meta {
    display: flex;
    align-items: center;
    gap: 7px;
}

.activity-meta span {
    color: var(--muted);
    font-size: 8px;
}

.activity-meta em {
    padding: 2px 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    font-size: 5.5px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
}

.activity-item.done .activity-check {
    border-color: rgba(216,111,145,.55);
    background: rgba(238,143,172,.11);
    color: var(--teal-bright);
}

.current-screen .page-header {
    margin-bottom: 14px;
}

.current-header {
    padding: 21px 20px 20px;
    border: 1px solid rgba(216,121,76,.22);
    border-radius: 9px;
    background: radial-gradient(circle at 100% 0%, rgba(216,111,145,.18), transparent 35%),
        linear-gradient(135deg, rgba(216,121,76,.10), transparent 62%),
        var(--panel);
}

.current-header h1 {
    margin-top: 2px;
}

.current-period {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding: 14px 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}

.current-period > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.current-period span, .current-event > span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.current-period strong {
    color: var(--text-bright);
    font-size: 12px;
}

#current-refresh {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid rgba(216,111,145,.30);
    border-radius: 6px;
    background: rgba(216,111,145,.07);
    color: var(--teal-bright);
    font-size: 9px;
    font-weight: 800;
}

.current-event {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    padding: 13px 15px;
    border-left: 2px solid var(--orange);
    background: linear-gradient(90deg, rgba(216,121,76,.08), transparent), var(--panel);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 8px 8px 0;
}

.current-event strong {
    color: var(--text-bright);
    font-size: 13px;
}

.current-event p {
    color: var(--muted);
    font-size: 9px;
}

.current-detail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.current-detail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.current-detail-head > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.current-detail-head span {
    color: var(--teal-bright);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.current-detail h2 {
    color: var(--text-bright);
    font-size: 16px;
}

.current-detail-head small {
    color: var(--muted);
    font-size: 8px;
    text-align: right;
}

.current-detail-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.current-row {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 10px;
    line-height: 1.35;
    background: rgba(255,255,255,.015);
}

.current-empty {
    padding: 14px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: 6px;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}

.current-rotation-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.current-vehicle-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
}

.current-vehicle-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: rgba(255,255,255,.015);
}

.current-vehicle-image-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
}

.current-vehicle-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .2s ease;
}

.current-vehicle-card:hover .current-vehicle-image {
    transform: scale(1.035);
}

.current-vehicle-image-wrap.is-missing .current-vehicle-image {
    display: none;
}

.current-vehicle-image-wrap.is-missing::after {
    content: "фото недоступно";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.current-vehicle-card > strong {
    display: block;
    padding: 8px 9px 9px;
    color: var(--text-bright);
    font-size: 10px;
    line-height: 1.2;
}

.current-rotation-block > span, .current-subtitle {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.current-reward {
    margin-top: 4px;
    padding: 10px;
    border: 1px solid rgba(216,121,76,.25);
    border-radius: 6px;
    background: rgba(216,121,76,.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.current-reward span {
    color: var(--orange-bright);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.current-reward strong {
    color: var(--text-bright);
    font-size: 10px;
}

.current-challenge-task {
    color: var(--text-bright);
    font-size: 11px;
    line-height: 1.45;
}

.current-detail#current-discounts .current-detail-body {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.current-discount-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,.018);
}

.current-discount-image-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
}

.current-discount-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .2s ease;
}

.current-discount-card:hover .current-discount-image {
    transform: scale(1.035);
}

.current-discount-image-wrap.is-missing .current-discount-image {
    display: none;
}

.current-discount-image-wrap.is-missing::after {
    content: "фото недоступно";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.current-discount-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 5px 6px;
    border-radius: 5px;
    background: rgba(10,12,14,.86);
    border: 1px solid rgba(216,121,76,.42);
    color: var(--orange-bright);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .5px;
}

.current-discount-info {
    padding: 9px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.current-discount-info strong {
    color: var(--text-bright);
    font-size: 11px;
    line-height: 1.2;
}

.current-discount-prices {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
}

.current-old-price {
    color: var(--muted);
    font-size: 8px;
    text-decoration: line-through;
    white-space: nowrap;
}

.current-new-price {
    color: var(--teal-bright);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.account-header {
    margin-bottom: 14px;
}

.account-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.account-identity h1 {
    margin: 0;
}

.account-identity p {
    margin-top: 4px;
}

.account-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(216,111,145,.24), rgba(216,121,76,.08)), var(--panel);
    color: var(--text-bright);
    font-size: 20px;
    font-weight: 900;
}

.account-level-clean {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.account-level-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.account-level-meta b {
    color: var(--text-bright);
    font-size: 12px;
    letter-spacing: 0;
}

.account-money-hero {
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    padding: 18px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(216,111,145,.13), rgba(216,121,76,.04)), var(--panel);
}

.account-money-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--teal);
}

.account-money-label {
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.account-money-hero > strong {
    display: block;
    margin-top: 5px;
    color: var(--text-bright);
    font-size: 25px;
    line-height: 1.1;
}

.account-money-split {
    display: flex;
    gap: 18px;
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.account-money-split span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.account-money-split b {
    color: var(--text);
    font-size: 11px;
    letter-spacing: 0;
}

.account-stats-grid {
    margin-top: 10px;
}

.account-quick-stats {
    margin-top: 10px;
}

.statistics-hero {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 1px;
    margin: 14px 0 20px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    overflow: hidden;
    background: var(--border);
}

.statistics-rank,.statistics-money {
    padding: 17px;
    background: var(--panel);
}

.statistics-rank span,.statistics-money span {
    display: block;
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.statistics-rank strong {
    display: block;
    margin-top: 4px;
    font-size: 29px;
    color: var(--text-bright);
}

.statistics-money strong {
    display: block;
    margin-top: 7px;
    font-size: 19px;
    color: var(--text-bright);
}

.stats-section {
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--panel);
}

.stats-section-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.stats-section-heading span {
    color: var(--teal);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.stats-section-heading h2 {
    color: var(--text-bright);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stats-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
}

.stat-detail {
    min-height: 64px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-soft);
}

.stat-detail span {
    display: block;
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-detail strong {
    display: block;
    margin-top: 7px;
    color: var(--text-bright);
    font-size: 14px;
}

.stat-detail-accent strong {
    color: var(--teal);
}

.edit-account-card {
    margin-bottom: 11px;
    padding: 15px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255,255,255,.018), transparent), var(--panel);
    box-shadow: 0 7px 20px rgba(0,0,0,.08);
}

.edit-section-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 13px;
}

.edit-section-title > span {
    color: var(--teal);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    padding-top: 2px;
}

.edit-section-title b {
    display: block;
    color: var(--text-bright);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.edit-section-title small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.edit-fields-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-soft);
}

.edit-field span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.edit-field input,.edit-field select {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    outline: none;
    background: var(--panel);
    color: var(--text-bright);
    font: inherit;
    font-size: 12px;
}

.edit-field input:focus,.edit-field select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(100,190,180,.08);
}

.save-account-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 3px 0 20px;
    padding: 15px 16px;
    border: 1px solid rgba(100,190,180,.45);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(100,190,180,.15), rgba(216,111,145,.08)), var(--panel);
    color: var(--text-bright);
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.save-account-button b {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: rgba(100,190,180,.16);
    color: var(--teal);
    font-size: 13px;
}

body.light-theme .edit-account-card, body.light-theme .stats-section, body.light-theme .account-money-hero {
    background: var(--panel);
}

.activity-item {
    position: relative;
    width: 100%;
    min-height: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 12px 14px;
    background: linear-gradient(90deg,rgba(255,255,255,.018),transparent 65%),var(--panel);
    border: 1px solid var(--border);
    border-radius: 11px;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
    cursor: default;
}

.activity-item-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.activity-info {
    color: var(--muted);
    font-size: 8px;
    line-height: 1.35;
}

.activity-action-running b {
    font-weight: 900;
}

.activity-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    color: var(--teal-bright);
    font-size: 12px;
    font-weight: 800;
    background: rgba(255,255,255,.018);
    cursor: pointer;
}

.activity-item-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex: 0 0 auto;
    min-width: 0;
}

.activity-action {
    min-height: 31px;
    padding: 0 9px;
    border: 1px solid rgba(232,130,153,.28);
    border-radius: 6px;
    background: rgba(232,130,153,.055);
    color: var(--text);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.activity-action:hover {
    border-color: rgba(232,130,153,.55);
    color: var(--teal-bright);
    background: rgba(232,130,153,.10);
}

.activity-action:active {
    transform: scale(.97);
}

.activity-action b {
    color: var(--pink, #ee8fac);
    font-weight: 900;
}

.activity-action-running {
    cursor: default;
    color: var(--teal-bright);
    border-color: rgba(238,143,172,.45);
    background: rgba(238,143,172,.09);
}

.activity-business-item .activity-item-main {
    width: 100%;
}

.activity-business-item .activity-item-main > strong {
    font-size: 12px;
}

.activity-business-item .activity-meta {
    margin-top: 1px;
}

.activity-group-head {
    display: block;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 1px 11px;
}

.activity-group-title {
    display: block;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.activity-group-head strong {
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 800;
}

.activity-group-mark,
.activity-group-head small,
.activity-group-head > span {
    display: none !important;
}

.activity-business-item .activity-item-side {
    padding-top: 9px;
    width: 100%;
    margin-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.activity-business-info > div {
    display: grid;
    grid-template-columns: 96px minmax(0,1fr);
    gap: 10px;
    align-items: start;
}

.activity-business-info span {
    color: var(--muted);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .4px;
    text-transform: none;
}

.activity-business-info strong {
    color: var(--text);
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.4;
}

.activity-business-info {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
}

.activity-business-info .business-detail-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,.018);
}

.activity-business-info .business-detail-row span {
    color: var(--muted);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.activity-business-info .business-detail-row strong {
    color: var(--text-bright);
    font-size: 8.5px;
    font-weight: 650;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.activity-business-info .business-detail-row:last-child {
    grid-column: 1 / -1;
}

.activity-business-item .activity-meta em {
    display: none;
}

.activity-business-item .activity-meta span {
    font-size: 8px;
}

.collection-overview,.collection-detail-progress {
    background: linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    padding: 20px;
    margin: 18px 0;
}

.collection-overview>div:first-child,.collection-detail-progress>div:first-child {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.collection-overview span,.collection-detail-progress span,.collection-info-card>span,.collection-location-panel>span {
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--muted,#888);
}

.collection-overview strong,.collection-detail-progress strong {
    font-size: 28px;
}

.collection-overview strong b,.collection-detail-progress strong b {
    font-size: 14px;
    color: var(--muted,#888);
}

.collection-overview small {
    display: block;
    color: var(--muted,#888);
    margin-top: 4px;
}

.collection-overview-meter {
    height: 5px;
    background: rgba(255,255,255,.08);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 14px;
}

.collection-overview-meter i {
    display: block;
    height: 100%;
    background: var(--accent,#d8794c);
    border-radius: inherit;
}

.collection-section {
    margin-top: 28px;
}

.collection-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.collection-section-head h2 {
    font-size: 18px;
    text-transform: lowercase;
}

.collection-section-head span {
    font-size: 11px;
    color: var(--muted,#888);
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.collection-card {
    appearance: none;
    text-align: left;
    color: inherit;
    background: var(--card,#171317);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: .16s;
}

.collection-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.16);
}

.collection-card-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted,#888);
    font-size: 9px;
    letter-spacing: .12em;
}

.collection-card-top b {
    font-size: 12px;
    color: var(--text,#eee);
    letter-spacing: 0;
}

.collection-card>strong {
    display: block;
    font-size: 16px;
    margin: 18px 0 12px;
}

.collection-progress {
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 99px;
    overflow: hidden;
}

.collection-progress i {
    display: block;
    height: 100%;
    background: var(--accent,#d8794c);
}

.collection-card small {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    color: var(--muted,#888);
}

.collection-card small em {
    font-style: normal;
    color: var(--text,#eee);
}

.collection-note {
    margin-top: 18px;
    padding: 15px;
    border-left: 2px solid var(--accent,#d8794c);
    background: rgba(255,255,255,.025);
}

.collection-note span {
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--muted,#888);
}

.collection-note p {
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted,#aaa);
    margin-top: 5px;
}

.collection-detail-header p {
    margin-top: 5px;
}

.collection-map-point {
    position: absolute;
    transform: translate(-50%,-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #d8794c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 2px 10px #0009;
    cursor: pointer;
}

.collection-map-point.collected {
    background: #4aaa96;
    border-color: #d9fff4;
}

.collection-info-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.collection-info-card {
    background: var(--card,#171317);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 16px;
}

.collection-info-card p {
    font-size: 12px;
    line-height: 1.5;
    color: #aaa;
    margin-top: 8px;
}

.collection-reward-card {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}

.collection-reward-media {
    width: 84px;
    height: 96px;
    border-radius: 9px;
    overflow: hidden;
    background: #0d0d0d;
    flex: none;
    display: grid;
    place-items: center;
}

.collection-reward-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.collection-reward-placeholder {
    font-size: 8px;
    text-align: center;
    color: #666;
    padding: 8px;
}

.collection-reward-copy span {
    font-size: 8px;
    letter-spacing: .14em;
    color: #777;
}

.collection-reward-copy strong {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.collection-video-button {
    display: inline-flex;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--accent,#d8794c);
    color: #fff;
    text-decoration: none;
    font-size: 11px;
}

.collection-location-panel {
    margin-top: 14px;
    background: var(--card,#171317);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 18px;
}

.collection-location-panel h2 {
    font-size: 16px;
    margin-top: 7px;
}

.collection-location-panel p {
    font-size: 12px;
    color: #999;
    line-height: 1.55;
    margin-top: 7px;
}

.collection-map-toolbar button.active {
    background: var(--accent,#d8794c);
    color: #fff;
    border-color: transparent;
}

.collection-location-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.collection-location-status {
    font-size: 9px;
    letter-spacing: .12em;
    padding: 7px 9px;
    border-radius: 8px;
    white-space: nowrap;
}

.collection-location-status.done {
    background: rgba(74,170,150,.16);
    color: #8fe2cb;
    border: 1px solid rgba(74,170,150,.35);
}

.collection-location-status.open {
    background: rgba(216,121,76,.12);
    color: #e8a47f;
    border: 1px solid rgba(216,121,76,.3);
}

.collection-location-meta {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 12px;
}

.collection-location-meta>div {
    padding: 10px 11px;
    background: rgba(255,255,255,.035);
    border-radius: 10px;
}

.collection-location-meta span {
    display: block;
    font-size: 8px;
    letter-spacing: .12em;
    color: #777;
}

.collection-location-meta strong {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.4;
}

.collection-location-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.collection-mark-button,.collection-watch-button {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.collection-mark-button {
    background: var(--accent,#d8794c);
    color: #fff;
}

.collection-mark-button.marked {
    background: rgba(74,170,150,.18);
    color: #9ce7d4;
    border: 1px solid rgba(74,170,150,.3);
}

.collection-watch-button {
    background: rgba(255,255,255,.08);
    color: #eee;
    border: 1px solid rgba(255,255,255,.1);
}

.collection-watch-button.disabled {
    opacity: .4;
    cursor: default;
}

.collection-item-row.done {
    border-color: rgba(74,170,150,.22);
    background: rgba(74,170,150,.06);
}

.collection-item-row.done .collection-item-state {
    color: #8fe2cb;
}

.collection-location-actions .collection-watch-button {
    border: 1px solid rgba(255,255,255,.1);
}

#collection-leaflet-map.collection-map,
.collection-map#collection-leaflet-map {
    min-height: 560px;
    height: 560px;
    background: #101010;
    cursor: grab;
    touch-action: none;
}

#collection-leaflet-map:active {
    cursor: grabbing;
}

#collection-leaflet-map .leaflet-control-zoom {
    margin: 12px;
    border: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

#collection-leaflet-map .leaflet-control-zoom a {
    width: 34px;
    height: 34px;
    line-height: 34px;
    background: rgba(18,18,18,.92);
    color: #eee;
    border: 1px solid rgba(255,255,255,.1);
}

#collection-leaflet-map .leaflet-control-zoom a:first-child {
    border-radius: 9px 9px 0 0;
}

#collection-leaflet-map .leaflet-control-zoom a:last-child {
    border-radius: 0 0 9px 9px;
}

.winch-map-marker-wrap {
    background: transparent !important;
    border: 0 !important;
}

.winch-map-marker {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #d8794c;
    color: #fff;
    font: 700 10px/1 Arial, sans-serif;
    box-shadow: 0 3px 12px rgba(0,0,0,.65);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.winch-map-marker-wrap:hover .winch-map-marker,
.winch-map-marker-wrap:focus .winch-map-marker {
    transform: scale(1.16);
}

.winch-map-marker-wrap.is-done .winch-map-marker {
    background: #4aaa96;
    border-color: #d9fff4;
}

.collection-map-launcher {
    margin-top: 18px;
    min-height: 128px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}

.collection-map-launcher-copy span {
    display: block;
    font-size: 9px;
    letter-spacing: .15em;
    color: #888;
}

.collection-map-launcher-copy strong {
    display: block;
    margin-top: 7px;
    font-size: 17px;
}

.collection-map-launcher-copy p {
    margin-top: 6px;
    max-width: 540px;
    color: #999;
    font-size: 12px;
    line-height: 1.5;
}

.collection-open-map-button {
    flex: none;
    border: 0;
    border-radius: 10px;
    padding: 12px 16px;
    background: var(--accent,#d8794c);
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

.collection-map-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto;
    background: #090909;
}

.collection-map-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: #111;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.collection-map-modal-head span {
    display: block;
    font-size: 8px;
    letter-spacing: .16em;
    color: #777;
}

.collection-map-modal-head strong {
    display: block;
    margin-top: 3px;
    font-size: 15px;
}

.collection-map-modal-close {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: #191919;
    color: #eee;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.collection-map-modal-toolbar {
    display: flex;
    gap: 6px;
    padding: 9px 14px;
    background: #0f0f0f;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.collection-map-modal-toolbar button {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 7px 10px;
    background: #171717;
    color: #aaa;
    font-size: 10px;
    cursor: pointer;
}

.collection-map-modal-toolbar button.active {
    background: var(--accent,#d8794c);
    border-color: transparent;
    color: #fff;
}

.collection-map-modal-map {
    min-height: 0;
    width: 100%;
    background: #111;
    cursor: grab;
    touch-action: none;
    overflow: hidden;
}

.collection-map-modal-map:active {
    cursor: grabbing;
}

.collection-map-modal .leaflet-container {
    width: 100%;
    height: 100%;
    background: #111;
}

.collection-map-modal .leaflet-image-layer {
    image-rendering: auto;
}

.collection-map-modal .leaflet-control-zoom {
    margin: 14px;
}

.collection-map-modal-hint {
    padding: 9px 14px;
    background: #111;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #777;
    font-size: 10px;
    text-align: center;
}

.collection-map-modal-point {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 1000;
    max-height: min(360px,42vh);
    overflow: auto;
    background: rgba(18,18,20,.97);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
    backdrop-filter: blur(12px);
}

.collection-map-modal-point .collection-location-panel {
    margin: 0;
    border: 0;
    background: transparent;
    border-radius: 16px;
    padding: 12px;
}

.collection-map-modal-point .collection-location-head {
    align-items: center;
    gap: 10px;
}

.collection-map-modal-point .collection-location-head h2 {
    font-size: 18px;
    line-height: 1.05;
}

.collection-map-modal-point .collection-location-status {
    padding: 6px 8px;
    font-size: 8px;
}

.collection-map-modal-point .collection-location-image {
    margin-top: 10px;
    max-height: 145px;
}

.collection-map-modal-point .collection-location-image img {
    max-height: 145px;
}

.collection-map-modal-point .collection-location-meta {
    gap: 6px;
    margin-top: 8px;
}

.collection-map-modal-point .collection-location-meta>div {
    padding: 8px 9px;
}

.collection-map-modal-point .collection-location-meta span {
    font-size: 7px;
}

.collection-map-modal-point .collection-location-meta strong {
    font-size: 10px;
    line-height: 1.25;
}

.collection-map-modal-point .collection-location-actions {
    gap: 6px;
    margin-top: 8px;
}

.collection-map-modal-point .collection-mark-button,.collection-map-modal-point .collection-watch-button {
    padding: 9px 10px;
    font-size: 9px;
}

.collection-map-point-empty {
    padding: 16px;
    color: #888;
    font-size: 12px;
    text-align: center;
}

.collection-location-meta-single {
    grid-template-columns: 1fr;
}

.collection-location-image-empty {
    min-height: 190px;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(255,255,255,.1);
    color: #666;
    font-size: 9px;
    letter-spacing: .12em;
}

.collection-location-image-empty span {
    padding: 20px;
    text-align: center;
}

.collection-map-modal-point .collection-location-image-empty {
    min-height: 150px;
}

.collection-location-head > div:first-child {
    min-width: 0;
}

.collection-location-head h2 {
    font-size: 18px;
    margin-top: 0;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-location-kicker {
    display: none;
}

.collection-location-image {
    margin-top: 14px;
    border-radius: 12px;
    overflow: hidden;
    background: #0c0c0c;
    max-height: 300px;
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    cursor: zoom-in;
}

.collection-location-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: cover;
}

.collection-photo-expand {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(8,8,8,.78);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    font-size: 16px;
}

.collection-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(3,3,3,.97);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.collection-photo-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.collection-photo-viewer-close {
    position: absolute;
    top: max(14px,env(safe-area-inset-top));
    right: 14px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 11px;
    background: #151515;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

body.light-theme .content {
    padding-top: 18px;
}

body.light-theme .hero-home-content .hero-label {
    color: #bd5f5d;
}

.map-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
}

.map-hub-card {
    position: relative;
    min-height: 132px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.map-hub-card-collections {
    background: linear-gradient(135deg, rgba(30,62,57,.28), rgba(78,170,150,.24)),
        url(https://www.igrandtheftauto.com/content/images/gtav-map-satellite-huge.jpg) center/cover;
}

.map-hub-card-content {
    position: absolute;
    left: 16px;
    right: 42px;
    bottom: 15px;
    z-index: 1;
}

.map-hub-card span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.68);
    font-size: 8px;
    letter-spacing: .16em;
}

.map-hub-card strong {
    display: block;
    font-size: 17px;
    line-height: 1.05;
}

.map-hub-card small {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.62);
    font-size: 9px;
}

.map-hub-card > b {
    position: absolute;
    right: 14px;
    top: 13px;
    font-size: 19px;
    font-weight: 400;
    color: rgba(255,255,255,.78);
}

body.light-theme .map-hub-card {
    border-color: rgba(55,47,43,.11);
    background: #fffaf8;
    box-shadow: 0 8px 22px rgba(76,62,54,.07);
}

body.light-theme .map-hub-card span,
body.light-theme .map-hub-card small,
body.light-theme .map-hub-card > b {
    color: rgba(42,35,39,.58);
}

.home-nav-item.active {
    color: var(--teal-bright);
}

body.light-theme .home-nav-item.active {
    color: #cf587e;
}

body.light-theme .app {
    background: #f3ebe6 !important;
}

body.light-theme .brand {
    color: #19151a !important;
}

body.light-theme .subtitle {
    color: #d6527d !important;
}

body.light-theme .topbar-icon {
    background: #fffaf6 !important;
    border-color: var(--border-strong);
    color: #252027 !important;
    box-shadow: 0 2px 8px rgba(65,48,54,.07) !important;
    border: 1px solid rgba(48,38,43,.14) !important;
    border-radius: 8px;
}

body.light-theme .visual-card,
body.light-theme .visual-card.account-card,
body.light-theme .visual-card.business-card,
body.light-theme .visual-card.activities-card,
body.light-theme .visual-card.collectibles-card,
body.light-theme .visual-card.current-card,
body.light-theme .visual-card.winch-card,
body.light-theme .visual-card:nth-child(1),
body.light-theme .visual-card:nth-child(2),
body.light-theme .visual-card:nth-child(3),
body.light-theme .visual-card:nth-child(4),
body.light-theme .visual-card:nth-child(5),
body.light-theme .visual-card:nth-child(6),
body.light-theme .visual-card:nth-child(7),
body.light-theme .visual-card:nth-child(8) {
    background: #fffaf5 !important;
    border: 1px solid rgba(48,38,43,.13) !important;
    box-shadow: 0 3px 10px rgba(65,48,54,.055) !important;
}

.topbar {
    position: relative;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px !important;
    background: rgba(13, 11, 13, 0.90);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    min-height: 66px !important;
    height: 66px !important;
    box-shadow: none !important;
}

.topbar-brand {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.brand {
    color: var(--text-bright);
    font-size: 25px !important;
    font-weight: 800;
    letter-spacing: -.9px !important;
    font-family: Impact, "Arial Narrow", "Roboto Condensed", Arial, sans-serif !important;
    line-height: .92 !important;
    white-space: nowrap;
}

.subtitle {
    margin-top: 5px !important;
    color: var(--teal-bright);
    font-size: 8px !important;
    font-weight: 700;
    letter-spacing: 2.15px !important;
    line-height: 1 !important;
}

.topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto;
    flex-shrink: 0 !important;
}

.topbar-icon {
    width: 30px !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid var(--border-strong);
    border-radius: 7px !important;
    background: var(--panel);
    color: var(--text);
    font-size: 23px !important;
    line-height: 30px !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    transition: background 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
    font-family: inherit;
    min-width: 30px !important;
}

.topbar-actions #theme-toggle {
    background: rgba(232, 130, 153, 0.12);
    border-color: rgba(232, 130, 153, 0.55);
    color: #e98299;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
}

.hero-home-content .hero-label {
    margin-bottom: 2px !important;
    color: #f3e9db;
    font-size: 8px !important;
    font-weight: 500;
    letter-spacing: 2px !important;
}

body.light-theme,
body.light-theme .app {
    background: #f4eee9 !important;
}

body.light-theme .topbar {
    background: #fbf7f3 !important;
    border-bottom-color: rgba(45,35,42,.14);
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body:not(.light-theme) .topbar {
    background: #090b0c !important;
}

#screen > .home-content {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 6px 24px !important;
    margin: 0 !important;
}

#screen > .home-content .home-hero {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.95 / 1 !important;
    box-sizing: border-box !important;
    margin: 0 0 9px !important;
    padding: 13px 12px 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
}

#screen > .home-content .visual-card,
#screen > .home-content .visual-card.winch-card {
    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
}

body.light-theme #screen > .home-content .visual-card,
body.light-theme #screen > .home-content .visual-card.winch-card {
    background: #fffaf5 !important;
    border-color: rgba(48,38,43,.13) !important;
    box-shadow: 0 3px 10px rgba(65,48,54,.055) !important;
}

body.light-theme #screen > .home-content .visual-card strong {
    color: #171319 !important;
}

body.light-theme #screen > .home-content .visual-card small {
    color: #746a70 !important;
}

body.light-theme #screen > .home-content .visual-arrow {
    color: #332d33 !important;
}

#screen > .home-content .home-hero,
body.light-theme #screen > .home-content .home-hero {
    background-image: linear-gradient(180deg, rgba(5,7,8,.02) 8%, rgba(5,7,8,.42) 100%), url("assets/home/hero-los-santos.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    width: 100% !important;
    aspect-ratio: 2.18 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 11px 10px 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#screen > .home-content .hero-home-content {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
}

#screen > .home-content .hero-home-content .hero-label {
    margin: 0 0 2px !important;
    color: #ef6d9c !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: 1.8px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.35) !important;
    margin-bottom: 2px !important;
}

#screen > .home-content .hero-home-content .hero-kicker {
    margin: 0 0 6px !important;
    color: #f7f0e4 !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: 1.65px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.45) !important;
    margin-bottom: 5px !important;
}

#screen > .home-content .hero-home-content h1,
body.light-theme #screen > .home-content .hero-home-content h1 {
    margin: 0 !important;
    max-width: 205px !important;
    color: #f7f0e4 !important;
    font-family: "Arial Narrow", "Roboto Condensed", Impact, Arial, sans-serif !important;
    font-size: clamp(23px, 6.7vw, 31px) !important;
    font-weight: 900 !important;
    line-height: .9 !important;
    letter-spacing: -.55px !important;
    text-shadow: 0 2px 5px rgba(0,0,0,.48) !important;
}

#screen > .home-content .hero-home-content .hero-script,
body.light-theme #screen > .home-content .hero-home-content .hero-script {
    right: 0 !important;
    bottom: 0 !important;
    color: #ef6d9c !important;
    font-size: clamp(25px, 7vw, 34px) !important;
    line-height: .9 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,.4) !important;
}

#screen > .home-content .visual-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
}

#screen > .home-content .visual-card,
#screen > .home-content .visual-card.winch-card,
body.light-theme #screen > .home-content .visual-card,
body.light-theme #screen > .home-content .visual-card.winch-card {
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
}

#screen > .home-content .visual-card-image {
    flex: 0 0 38% !important;
    width: 38% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#screen > .home-content .visual-card-body {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 9px 8px 12px !important;
}

#screen > .home-content .visual-card strong {
    font-size: 16px !important;
    line-height: 1 !important;
}

#screen > .home-content .visual-card small {
    margin-top: 3px !important;
    font-size: 7.5px !important;
    line-height: 1.2 !important;
}

#screen > .home-content .visual-arrow {
    font-size: 22px !important;
    line-height: 1 !important;
    margin-right: 1px !important;
}

#screen > .home-content .home-quote {
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    box-sizing: border-box !important;
    margin: 7px 0 0 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
}

.hero-home-content-ref {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.hero-label-ref,
.hero-kicker-ref {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
    color: #f4e9df;
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

.hero-label-ref {
    font-size: 8px;
    letter-spacing: 2px;
}

.hero-kicker-ref {
    margin-top: 1px;
    font-size: 8px;
    letter-spacing: 1.8px;
}

.hero-home-content-ref h1 {
    margin-top: 4px;
    max-width: 245px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 31px;
    font-weight: 400;
    line-height: .88;
    letter-spacing: .2px;
    color: #f5eee5;
    text-shadow: 0 2px 5px rgba(0,0,0,.48);
}

.hero-script-ref {
    position: absolute;
    right: 4px;
    bottom: -1px;
    font-family: "Dancing Script", cursive;
    font-size: 31px;
    font-weight: 600;
    line-height: .9;
    color: #ed638e;
    transform: rotate(-5deg);
    text-shadow: 0 2px 5px rgba(0,0,0,.42);
}

body:not(.light-theme) .home-card-ref {
    background: #101517;
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
}

.current-tabs {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
    margin: 0 0 10px;
}

.current-tab {
    min-height: 42px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel);
    color: var(--muted);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.current-tab span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--teal-bright);
}

.current-tab b {
    font-family: "Bebas Neue",sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: var(--text-bright);
}

.current-tab.is-active {
    border-color: var(--border-strong);
    background: var(--panel-hover);
}

.current-detail {
    scroll-margin-top: 15px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    display: none;
}

.current-detail.is-active {
    display: block;
}

.home-topbar .topbar-brand {
    min-width: 0;
    flex: 1 1 auto;
}

.home-topbar .topbar-icon {
    width: 35px !important;
    height: 35px !important;
    padding: 0 !important;
    border: 1px solid var(--border-strong);
    border-radius: 7px !important;
    background: var(--panel);
    font-family: "Roboto Condensed", sans-serif;
    font-size: 22px;
    font-weight: 300;
    min-width: 35px !important;
}

.home-hero-ref .hero-home-content-ref {
    display: none !important;
}

:root {
    --bg: #0d0b0d;
    --bg-soft: #151015;
    --panel: #171216;
    --panel-hover: #20171c;
    --text: #e8e0d0;
    --text-bright: #f4eddf;
    --muted: #8f9187;
    --teal: #d86f91;
    --teal-bright: #ee8fac;
    --teal-dark: #8f455f;
    --orange: #d8794c;
    --orange-bright: #ed9360;
    --sand: #c8b99c;
    --border: rgba(205, 218, 202, 0.10);
    --border-strong: rgba(205, 218, 202, 0.18);
    --shadow: rgba(0, 0, 0, 0.45);
    --home-bg: #0d1011;
    --home-surface: #14191a;
    --home-surface-2: #1a2021;
    --home-text: #f0ebe3;
    --home-muted: #a49f98;
    --home-accent: #e84f82;
    --home-border: rgba(255,255,255,.10);
    --home-header: rgba(13,16,17,.92);
}

body {
    min-height: 100vh;
    color: var(--home-text);
    transition: background-color .2s ease, color .2s ease;
}

.app {
    width: 100%;
    max-width: 720px;
    min-height: 100vh;
    margin: 0 auto;
    background: var(--home-bg);
}

.home-content-ref {
    padding: 0 12px 24px !important;
    background: var(--home-bg);
    box-sizing: border-box;
    min-height: 100vh;
}

.home-topbar {
    position: sticky !important;
    top: 0;
    padding: 13px 14px 11px !important;
    background: var(--home-header) !important;
    border: 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 20;
    margin: 0 -12px 8px;
    border-bottom: 1px solid var(--home-border) !important;
}

.home-topbar .brand {
    font-family: "Oswald", sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: .95 !important;
    letter-spacing: .5px !important;
    color: var(--home-text) !important;
    white-space: nowrap;
}

.home-topbar .brand em {
    color: #d85f88;
    font-style: normal;
    font-weight: 400;
}

.home-topbar .subtitle {
    margin-top: 5px !important;
    font-family: "Oswald", sans-serif !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    color: var(--home-accent) !important;
}

.home-topbar .topbar-actions {
    gap: 5px !important;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center !important;
}

.home-topbar .topbar-icon,
.home-topbar .theme-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
    border: 1px solid var(--home-border) !important;
    border-radius: 7px !important;
    background: var(--home-surface) !important;
    color: var(--home-text) !important;
    box-shadow: none !important;
}

.home-topbar .theme-toggle {
    color: var(--home-accent) !important;
    border-color: color-mix(in srgb, var(--home-accent) 55%, transparent) !important;
}

.home-topbar .topbar-icon:hover,
.home-topbar .theme-toggle:hover {
    background: var(--home-surface-2) !important;
    border-color: color-mix(in srgb, var(--home-accent) 65%, transparent) !important;
}

.home-hero-ref {
    position: relative !important;
    aspect-ratio: 558 / 313 !important;
    min-height: 0;
    margin-bottom: 10px;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--home-border) !important;
    border-radius: 8px !important;
    background-image: url("assets/home/hero-los-santos.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    margin: 0 0 8px !important;
    background-repeat: no-repeat !important;
    width: 100%;
    background-color: #15191a !important;
    box-shadow: 0 7px 22px rgba(0,0,0,.16) !important;
}

.home-cards-ref {
    display: grid !important;
    flex-direction: column;
    gap: 7px !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    width: 100% !important;
}

.home-card-ref::after {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    bottom: 5px !important;
    width: 28px !important;
    height: 2px !important;
    z-index: 3 !important;
    background: var(--home-accent) !important;
}

.home-card-ref:hover .home-card-image-ref {
    transform: scale(1.025);
    filter: brightness(1.04);
}

.home-card-ref:active {
    transform: scale(.985);
}

body.light-theme .home-card-ref {
    background: var(--home-surface) !important;
    border-color: var(--home-border) !important;
    box-shadow: 0 4px 12px rgba(60,40,48,.12) !important;
}

body.light-theme .home-hero-ref {
    border-color: var(--home-border) !important;
    box-shadow: 0 7px 22px rgba(60,40,48,.12) !important;
}

.home-content-ref .home-card-overlay-ref {
    display: none !important;
}

.home-content-ref .home-card-ref::after {
    display: none !important;
}

.home-card-ref {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    align-items: stretch;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid var(--home-border) !important;
    border-radius: 8px !important;
    background: var(--home-surface) !important;
    text-align: left !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
    position: relative;
    min-width: 0 !important;
    aspect-ratio: 353 / 126 !important;
    transform: translateZ(0);
}

.home-card-image-ref {
    flex: 0 0 39%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    position: absolute !important;
    inset: 0 !important;
    display: block;
    transform: scale(1.001);
    transition: transform .22s ease, filter .22s ease;
    object-fit: cover;
    object-position: center;
}

.home-card-overlay-ref {
    position: absolute;
    inset: 0;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 10px 9px !important;
    box-sizing: border-box !important;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0) 28%,
        rgba(0,0,0,.16) 48%,
        rgba(0,0,0,.82) 100%
    ) !important;
    pointer-events: none;
}

@media (max-width: 420px) {
    .stat-card {
        padding: 15px;
    }

    .stat-card strong {
        font-size: 20px;
    }

    .topbar-icon {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .topbar-actions {
        gap: 5px;
    }

    .topbar-icon,
        .theme-toggle {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 9px;
        font-size: 17px;
    }

    .content {
        padding-left: 11px;
        padding-right: 11px;
        padding: 20px 11px 25px;
    }

    .business-list {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px;
    }

    .business-card {
        min-height: 108px;
        padding: 11px;
    }

    .business-card-main strong {
        font-size: 11px;
    }

    .business-overview-copy small,.activity-overview-copy small {
        max-width: 110px;
    }

    .current-detail {
        padding: 13px;
    }

    .current-detail#current-discounts .current-detail-body {
        gap: 6px;
    }

    .current-vehicle-list {
        gap: 6px;
    }

    .current-vehicle-card > strong {
        padding: 7px 8px 8px;
        font-size: 9px;
    }

    .current-discount-info {
        padding: 8px;
    }

    .current-discount-info strong {
        font-size: 10px;
    }

    .current-new-price {
        font-size: 10px;
    }

    .edit-fields-grid {
        grid-template-columns: 1fr;
    }

    .statistics-hero {
        grid-template-columns: 82px 1fr;
    }

    .account-money-split {
        gap: 12px;
    }

    .activity-business-item .activity-check {
        margin-top: 1px;
    }

    .activity-action {
        max-width: 122px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .activity-business-info > div {
        grid-template-columns: 82px minmax(0,1fr);
        gap: 8px;
    }

    .activity-business-item .activity-item-side {
        flex-direction: row;
        align-items: center;
    }

    .map-hub-grid {
        gap: 7px;
    }

    .map-hub-card {
        min-height: 116px;
        padding: 12px;
        border-radius: 9px;
    }

    .map-hub-card-content {
        left: 12px;
        right: 34px;
        bottom: 12px;
    }

    .map-hub-card strong {
        font-size: 14px;
    }

    .map-hub-card small {
        font-size: 8px;
    }

    .topbar {
        padding-left: 15px;
        padding-right: 15px;
        padding: 12px 14px 10px !important;
        height: 66px !important;
        min-height: 66px !important;
    }

    .brand {
        font-size: 24px !important;
    }

    #screen > .home-content {
        padding: 8px 6px 24px !important;
    }

    #screen > .home-content .home-quote {
        height: 88px !important;
        min-height: 88px !important;
    }

    #screen > .home-content .home-hero {
        aspect-ratio: 2.18 / 1 !important;
        padding: 11px 10px 10px !important;
        border-radius: 12px !important;
    }

    #screen > .home-content .visual-card,
        #screen > .home-content .visual-card.winch-card {
        height: 66px !important;
        min-height: 66px !important;
        max-height: 66px !important;
        border-radius: 9px !important;
    }

    #screen > .home-content .visual-card-image {
        flex-basis: 38% !important;
        width: 38% !important;
    }

    #screen > .home-content .visual-card-body {
        padding: 8px 8px 8px 12px !important;
    }

    #screen > .home-content .visual-card strong {
        font-size: 16px !important;
    }

    #screen > .home-content .visual-card small {
        font-size: 7.5px !important;
    }

    .hero-home-content-ref h1 {
        font-size: 28px;
    }

    .hero-script-ref {
        font-size: 28px;
    }

    .home-card-ref {
        height: 72px;
        min-height: 72px;
    }

    .home-card-image-ref {
        flex-basis: 38%;
        width: 38%;
    }

    .current-tabs {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .home-topbar .topbar-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
        min-width: 34px !important;
    }

    .home-hero-ref {
        aspect-ratio: 1.95 / 1;
        padding: 14px 12px 11px;
        margin-bottom: 7px !important;
    }

    .home-cards-ref {
        gap: 5px !important;
    }

    .home-card-overlay-ref {
        padding: 0 7px 7px !important;
    }

    .home-content-ref {
        padding: 0 9px 18px !important;
    }

    .home-topbar {
        padding: 10px 10px 8px !important;
        margin-left: -9px;
        margin-right: -9px;
    }

    .home-topbar .brand {
        font-size: 21px !important;
    }

    .home-topbar .subtitle {
        font-size: 7px !important;
        letter-spacing: 1.65px !important;
    }

    .home-topbar .topbar-icon,
        .home-topbar .theme-toggle {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex-basis: 32px !important;
        font-size: 16px !important;
    }

    .home-card-ref::after {
        left: 7px !important;
        bottom: 4px !important;
        width: 23px !important;
    }
}

@media (max-width: 560px) {
    .activity-item-side {
        flex-wrap: wrap;
        max-width: 150px;
    }

    .activity-info {
        max-width: 100%;
    }

    .activity-business-info {
        grid-template-columns: 1fr;
    }

    .activity-business-info .business-detail-row:last-child {
        grid-column: auto;
    }

    .collection-location-meta {
        grid-template-columns: 1fr;
    }

    .collection-location-actions>* {
        flex: 1;
    }

    .collection-location-head {
        gap: 8px;
    }

    .collection-location-head h2 {
        font-size: 16px;
    }
}

@media (max-width: 700px) {
    .collection-grid,.collection-info-grid {
        grid-template-columns: 1fr;
    }

    .collection-overview>div:first-child,.collection-detail-progress>div:first-child {
        align-items: flex-start;
    }

    .collection-overview strong,.collection-detail-progress strong {
        font-size: 24px;
    }

    #collection-leaflet-map.collection-map,
        .collection-map#collection-leaflet-map {
        height: 470px;
        min-height: 470px;
    }

    .collection-map-launcher {
        align-items: flex-start;
        flex-direction: column;
    }

    .collection-open-map-button {
        width: 100%;
        text-align: center;
    }

    .collection-map-modal-point .collection-location-image,.collection-map-modal-point .collection-location-image img {
        max-height: 132px;
    }

    .collection-map-modal-point .collection-location-actions>* {
        flex: 1;
        min-width: 0;
    }

    .collection-map-modal-head strong {
        font-size: 13px;
    }

    .collection-map-modal-map {
        min-height: 0;
    }

    .collection-map-modal-point .collection-mark-button,.collection-map-modal-point .collection-watch-button {
        min-height: 38px;
        padding: 8px 9px;
        border-radius: 10px;
        font-size: 9px;
        line-height: 1.1;
        display: grid;
        place-items: center;
    }

    .collection-map-modal-point .collection-location-meta-single {
        grid-template-columns: 1fr 1.45fr;
    }

    .collection-map-modal-head {
        padding-top: max(12px, env(safe-area-inset-top));
        padding: 9px 12px;
    }

    .collection-map-modal-hint {
        padding-bottom: max(9px, env(safe-area-inset-bottom));
        display: none;
    }

    .collection-map-modal {
        grid-template-rows: auto auto minmax(0,1fr) auto;
        overflow: hidden;
    }

    .collection-map-modal-toolbar {
        padding: 6px 10px;
    }

    .collection-map-modal-toolbar button {
        padding: 7px 11px;
        font-size: 9px;
    }

    .collection-sheet-handle {
        width: 34px;
        height: 3px;
        border-radius: 99px;
        background: #555;
        margin: 0 auto 8px;
    }

    .collection-location-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: 0 2px 8px !important;
        padding: 0 !important;
    }

    .collection-location-title-wrap {
        min-width: 0;
    }

    .collection-location-kicker {
        display: block !important;
        margin: 0 0 2px !important;
        color: #737579 !important;
        font-size: 7px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }

    .collection-location-head h2 {
        margin: 0 !important;
        color: #f0ede8 !important;
        font-family: "Arial Narrow","Roboto Condensed",Arial,sans-serif !important;
        font-size: 21px !important;
        font-stretch: condensed;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: -.025em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .collection-location-count {
        display: block;
        margin-top: 3px;
        color: #777;
        font-size: 8px;
        font-weight: 600;
        line-height: 1;
    }

    .collection-location-status {
        flex: none !important;
        margin-top: 2px !important;
        padding: 6px 9px !important;
        border-radius: 9px !important;
        border: 1px solid rgba(216,121,76,.5) !important;
        background: rgba(216,121,76,.08) !important;
        color: #e08b62 !important;
        font-size: 7px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: .08em !important;
    }

    .collection-location-status.done {
        border-color: rgba(120,190,160,.4) !important;
        background: rgba(120,190,160,.08) !important;
        color: #91cdb4 !important;
    }

    .collection-photo-expand {
        width: 28px !important;
        height: 28px !important;
        right: 8px !important;
        bottom: 8px !important;
        border-radius: 8px !important;
        background: rgba(0,0,0,.72) !important;
        font-size: 15px !important;
    }

    .collection-map-modal-point .collection-location-meta > div {
        min-width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
        padding: 8px 9px !important;
        border: 1px solid rgba(255,255,255,.045) !important;
        border-radius: 10px !important;
        background: #191a1c !important;
        overflow: hidden !important;
    }

    .collection-map-modal-point {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-height: none !important;
        overflow-y: auto;
        border-radius: 16px !important;
        background: rgba(16,17,18,.985) !important;
        box-shadow: 0 14px 44px rgba(0,0,0,.62),0 2px 8px rgba(0,0,0,.4) !important;
        width: auto !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        backdrop-filter: blur(16px) !important;
        position: absolute !important;
        box-sizing: border-box !important;
    }

    .collection-map-modal-point .collection-location-panel {
        padding: 10px !important;
        display: block !important;
        flex-direction: column;
        gap: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: transparent !important;
        box-sizing: border-box !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .collection-map-modal-point .collection-location-head {
        display: flex !important;
        align-items: flex-start !important;
        margin: 0 1px 9px !important;
        padding: 0 !important;
        justify-content: space-between !important;
        min-height: 43px !important;
        gap: 10px !important;
    }

    .collection-map-modal-point .collection-sheet-handle {
        display: block !important;
        width: 34px !important;
        height: 3px !important;
        margin: 0 auto 9px !important;
        border-radius: 3px !important;
        background: #5d5e60 !important;
    }

    .collection-map-modal-point .collection-location-title-wrap {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .collection-map-modal-point .collection-location-head h2 {
        font-size: 22px !important;
        line-height: .96 !important;
        letter-spacing: -.025em !important;
        display: block !important;
        margin: 0 !important;
        color: #f1efeb !important;
        font-family: "Roboto Condensed","Arial Narrow",Arial,sans-serif !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .collection-map-modal-point .collection-location-kicker {
        display: block !important;
        margin: 0 0 3px !important;
        font-size: 8px !important;
        letter-spacing: .13em !important;
        color: #7b7d80 !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        font-family: "Roboto Condensed","Arial Narrow",Arial,sans-serif !important;
        font-weight: 700 !important;
    }

    .collection-map-modal-point .collection-location-count {
        display: block !important;
        margin-top: 3px !important;
        color: #777a7d !important;
        font-size: 9px !important;
        line-height: 1 !important;
        margin: 4px 0 0 !important;
        font-family: "Roboto Condensed","Arial Narrow",Arial,sans-serif !important;
        font-weight: 700 !important;
    }

    .collection-location-head-right {
        display: flex !important;
        align-items: flex-start !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
    }

    .collection-map-modal-point .collection-location-status {
        font-size: 8px !important;
        padding: 7px 9px !important;
        flex: none !important;
        margin: 0 !important;
        border-radius: 9px !important;
        font-family: "Roboto Condensed","Arial Narrow",Arial,sans-serif !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: .08em !important;
        border: 1px solid rgba(216,121,76,.5) !important;
        background: rgba(216,121,76,.08) !important;
        color: #e18a5d !important;
        white-space: nowrap !important;
    }

    .collection-map-modal-point .collection-location-status.done {
        border-color: rgba(90,174,148,.42) !important;
        background: rgba(90,174,148,.08) !important;
        color: #83c4ad !important;
    }

    .collection-location-close {
        display: grid !important;
        place-items: center !important;
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        border-radius: 9px !important;
        background: #18191b !important;
        color: #aaa !important;
        font-size: 19px !important;
        font-weight: 300 !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .collection-map-modal-point .collection-location-image {
        height: 166px !important;
        max-height: 166px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #0b0c0d !important;
        width: 100% !important;
        min-height: 166px !important;
        padding: 0 !important;
        border: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        position: relative !important;
        display: block !important;
    }

    .collection-map-modal-point .collection-location-image img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        display: block !important;
    }

    .collection-map-modal-point .collection-photo-expand {
        width: 30px !important;
        height: 30px !important;
        right: 9px !important;
        bottom: 9px !important;
        border-radius: 9px !important;
        background: rgba(8,9,10,.76) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        font-size: 15px !important;
    }

    .collection-map-modal-point .collection-location-meta {
        display: grid !important;
        grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) !important;
        gap: 7px !important;
        margin-top: 8px;
        margin: 8px 0 0 !important;
    }

    .collection-map-modal-point .collection-location-meta>div {
        min-width: 0 !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
        background: #191a1c !important;
        min-height: 56px !important;
        border: 1px solid rgba(255,255,255,.055) !important;
        height: 56px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .collection-map-modal-point .collection-location-meta span {
        font-size: 7px !important;
        letter-spacing: .14em !important;
        color: #727478 !important;
        display: block !important;
        line-height: 1 !important;
        font-family: "Roboto Condensed","Arial Narrow",Arial,sans-serif !important;
        font-weight: 700 !important;
    }

    .collection-map-modal-point .collection-location-meta strong {
        font-size: 11px !important;
        line-height: 1.16 !important;
        margin-top: 5px !important;
        display: -webkit-box !important;
        white-space: normal !important;
        color: #dedbd5 !important;
        font-family: "Roboto Condensed","Arial Narrow",Arial,sans-serif !important;
        font-weight: 700 !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .collection-map-modal-point .collection-location-actions {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) 64px !important;
        gap: 7px !important;
        margin-top: 8px;
        margin: 8px 0 0 !important;
    }

    .collection-map-modal-point .collection-mark-button {
        font-weight: 700;
        border: 1px solid transparent !important;
        background: #d8794c !important;
        color: #fff !important;
    }

    .collection-map-modal-point .collection-mark-button,
      .collection-map-modal-point .collection-watch-button {
        min-height: 40px !important;
        height: 40px !important;
        padding: 8px 9px !important;
        border-radius: 10px !important;
        font-family: "Roboto Condensed","Arial Narrow",Arial,sans-serif !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: .04em !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-transform: lowercase !important;
    }

    .collection-map-modal-point .collection-mark-button.marked {
        background: #3f8e79 !important;
    }

    .collection-map-modal-point .collection-watch-button {
        background: #18191b !important;
        min-width: 58px !important;
        width: 58px !important;
        border: 1px solid rgba(255,255,255,.11) !important;
        color: #bdbdbd !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 380px) {
    .collection-map-modal-point .collection-location-image,
      .collection-map-modal-point .collection-location-image img {
        height: 128px !important;
        min-height: 128px !important;
        max-height: 128px !important;
    }

    .collection-map-modal-point .collection-location-head h2 {
        font-size: 18px !important;
    }

    .collection-map-modal-point .collection-location-meta > div {
        height: 44px !important;
        min-height: 44px !important;
    }

    .collection-map-modal-point {
        left: 9px !important;
        right: 9px !important;
        bottom: 9px !important;
    }

    .collection-map-modal-point .collection-location-panel {
        padding: 8px !important;
    }

    .collection-map-modal-point .collection-location-head {
        margin-bottom: 7px !important;
    }

    .collection-map-modal-point .collection-location-image {
        height: 145px !important;
        min-height: 145px !important;
        max-height: 145px !important;
    }

    .collection-map-modal-point .collection-location-meta>div {
        height: 52px !important;
        min-height: 52px !important;
        padding: 8px 9px !important;
    }

    .collection-map-modal-point .collection-location-actions {
        margin-top: 7px !important;
    }
}

/* HOME MENU — approved information architecture */
:root {
    --home-bg: #111421;
    --home-surface: #171b2a;
    --home-surface-2: #20263a;
    --home-text: #f0ebe3;
    --home-muted: #a9adbb;
    --home-accent: #e84f82;
    --home-border: rgba(255,255,255,.11);
    --home-header: rgba(17,20,33,.94);
}
body.light-theme,
body.light-theme .app {
    background: #f3e5dc !important;
}
body.light-theme #screen > .home-content-ref {
    --home-bg: #f3e5dc;
    --home-surface: #f8eee8;
    --home-surface-2: #fff7f2;
    --home-text: #17161a;
    --home-muted: #766d70;
    --home-accent: #d93670;
    --home-border: rgba(45,35,42,.14);
    --home-header: rgba(243,229,220,.94);
}
.goals-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.goals-summary > div, .progress-level-card, .progress-row, .progress-note { border:1px solid var(--home-border); border-radius:10px; background:var(--home-surface); padding:14px; }
.goals-summary span, .progress-level-card span, .progress-note span { display:block; font-size:9px; letter-spacing:1.5px; color:var(--home-muted); }
.goals-summary strong { display:block; margin-top:5px; font-size:26px; }
.goal-add-form { display:grid; gap:7px; margin:12px 0; }
.goal-add-form input { width:100%; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:8px; padding:11px 12px; background:var(--surface-2); color:var(--text); }
.goal-add-form button, .goal-check, .goal-delete { border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); border-radius:8px; }
.goal-add-form button { padding:11px 13px; color:var(--teal-bright); }
.goal-list { display:grid; gap:7px; }
.goal-item { display:grid; grid-template-columns:34px 1fr 32px; align-items:center; gap:9px; border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:9px; }
.goal-item.done { opacity:.58; }
.goal-item.done .goal-copy strong { text-decoration:line-through; }
.goal-check { width:32px; height:32px; font-size:16px; }
.goal-copy strong, .goal-copy small { display:block; }
.goal-copy small { margin-top:3px; color:var(--muted); font-size:11px; }
.goal-delete { width:30px; height:30px; color:var(--muted); }
.goal-empty { border:1px dashed var(--border-strong); border-radius:10px; padding:24px 16px; text-align:center; color:var(--muted); }
.goal-empty span { font-size:9px; letter-spacing:1.5px; }
.progress-level-card { margin:12px 0; }
.progress-level-card strong { display:block; font-size:34px; margin:5px 0 12px; }
.progress-meter { height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.progress-meter i { display:block; height:100%; background:var(--teal-bright); }
.progress-level-card small { display:block; margin-top:7px; color:var(--muted); }
.progress-list { display:grid; gap:7px; margin-bottom:12px; }
.progress-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.progress-row span, .progress-row strong { display:block; }
.progress-row span { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.progress-row strong { margin-top:3px; font-size:14px; }
.progress-row b { font-size:12px; color:var(--teal-bright); white-space:nowrap; }
.progress-note p { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }


/* =========================================================
   HOME REFRESH — keep all existing section styles above intact
   ========================================================= */

.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    min-height: 66px !important;
    height: 66px !important;
    padding: 10px 14px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(13,11,13,.96) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.topbar .brand {
    color: var(--text-bright) !important;
    font-family: Impact, "Arial Narrow", "Roboto Condensed", Arial, sans-serif !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    letter-spacing: -.9px !important;
    line-height: .92 !important;
    white-space: nowrap !important;
}
.topbar .brand span { color: #e84f82 !important; }
.topbar .subtitle {
    margin-top: 5px !important;
    color: #e84f82 !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 2.15px !important;
}
.topbar .topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
}
.topbar .topbar-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 7px !important;
    background: var(--panel) !important;
    color: var(--text) !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
.topbar #theme-toggle {
    color: #e84f82 !important;
    border-color: rgba(232,79,130,.55) !important;
    background: rgba(232,79,130,.10) !important;
}
body.light-theme .topbar { background: rgba(251,247,243,.98) !important; }
body.light-theme .topbar .brand { color: #17151a !important; }
body.light-theme .topbar .topbar-icon { background: #fff9f4 !important; color: #17151a !important; }
body.light-theme .topbar #theme-toggle { color: #e84f82 !important; background: rgba(232,79,130,.10) !important; }

#screen > .home-content {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 74px 9px 24px !important;
    box-sizing: border-box !important;
}

.home-content .home-hero {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 558 / 313 !important;
    margin: 10px 0 7px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 9px !important;
    border: 1px solid var(--home-border, rgba(255,255,255,.10)) !important;
    background: #111 !important;
    box-shadow: 0 7px 22px rgba(0,0,0,.16) !important;
}
.home-hero-image { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; }
.home-hero-shade { position:absolute !important; inset:0 !important; z-index:1 !important; background:linear-gradient(180deg,rgba(0,0,0,.02) 20%,rgba(0,0,0,.72) 100%) !important; }
.home-hero-copy { position:absolute !important; left:13px !important; bottom:11px !important; z-index:2 !important; }
.home-hero-kicker { color:#fff !important; font-size:8px !important; font-weight:800 !important; letter-spacing:1.7px !important; }
.home-hero-copy h1 { margin:3px 0 0 !important; color:#fff !important; font-family:Impact,"Arial Narrow",Arial,sans-serif !important; font-size:31px !important; line-height:.88 !important; letter-spacing:-.6px !important; }
.home-hero-copy p { margin:6px 0 0 !important; color:#fff !important; font-size:10px !important; font-weight:800 !important; line-height:1.05 !important; letter-spacing:1.1px !important; }
.home-accent { display:block !important; width:31px !important; height:2px !important; margin-top:6px !important; background:#e84f82 !important; }

.home-content .visual-menu { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:7px !important; margin-top:7px !important; }
.home-content .visual-card {
    position:relative !important;
    display:block !important;
    width:100% !important;
    aspect-ratio:353 / 184 !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid var(--home-border,rgba(255,255,255,.10)) !important;
    border-radius:9px !important;
    background:#151719 !important;
    text-align:left !important;
}
.home-content .visual-card-image { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; }
.home-content .visual-card-shade { position:absolute !important; inset:0 !important; z-index:1 !important; background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.78) 100%) !important; }
.home-content .visual-card-content { position:absolute !important; left:8px !important; right:7px !important; bottom:7px !important; z-index:2 !important; display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:6px !important; }
.home-content .visual-card-copy strong { display:block !important; color:#fff !important; font-family:Impact,"Arial Narrow",Arial,sans-serif !important; font-size:20px !important; line-height:.88 !important; letter-spacing:-.3px !important; }
.home-content .visual-card-copy small { display:block !important; margin-top:4px !important; color:#fff !important; font-size:7px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.9px !important; }
.home-content .visual-card-copy::after { content:"" !important; display:block !important; width:29px !important; height:2px !important; margin-top:5px !important; background:#e84f82 !important; }
.home-content .visual-arrow { position:relative !important; width:25px !important; height:25px !important; min-width:25px !important; flex:0 0 25px !important; border:1px solid rgba(255,255,255,.65) !important; border-radius:50% !important; }
.home-content .visual-arrow::before { content:"" !important; position:absolute !important; width:7px !important; height:7px !important; border-top:1px solid #fff !important; border-right:1px solid #fff !important; transform:rotate(45deg) !important; top:7px !important; left:6px !important; }

.home-content .home-footer { position:relative !important; min-height:145px !important; margin-top:10px !important; overflow:hidden !important; border:1px solid var(--home-border,rgba(255,255,255,.10)) !important; border-radius:9px !important; }
.home-content .home-footer > img { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; }
.home-content .home-footer-shade { position:absolute !important; inset:0 !important; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.70)) !important; }
.home-content .home-footer-copy { position:relative !important; z-index:2 !important; min-height:145px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:9px !important; }
.home-content .home-footer-copy strong { color:#e84f82 !important; font-family:"Dancing Script",cursive !important; font-size:29px !important; font-style:normal !important; }
.home-content .home-footer-copy span { color:#625b60 !important; font-size:8px !important; letter-spacing:3.5px !important; }
.home-content .home-footer-copy i { width:72px !important; height:1px !important; background:#e84f82 !important; }

@media (max-width:520px){
    #screen > .home-content { padding:74px 9px 22px !important; }
    .topbar { padding-left:10px !important; padding-right:10px !important; }
    .topbar .brand { font-size:21px !important; }
    .topbar .subtitle { font-size:7px !important; letter-spacing:1.65px !important; }
    .topbar .topbar-icon { width:32px !important; height:32px !important; min-width:32px !important; font-size:18px !important; }
    .home-content .visual-card-copy strong { font-size:17px !important; }
    .home-content .visual-card-copy small { font-size:6.5px !important; }
    .home-content .visual-arrow { width:24px !important; height:24px !important; min-width:24px !important; }
}

/* v6: home hero labels stay white in both themes */
#screen > .home-content .home-hero-kicker,
body.light-theme #screen > .home-content .home-hero-kicker {
    color: #fff !important;
}

#screen > .home-content .home-hero-copy h1,
body.light-theme #screen > .home-content .home-hero-copy h1,
#screen > .home-content .home-hero-copy p,
body.light-theme #screen > .home-content .home-hero-copy p {
    color: #fff !important;
}


/* =========================================================
   FINAL SECTION FIXES
   Keep the approved home menu isolated from inner screens.
   ========================================================= */

/* The fixed app header must not cover the back button on inner screens. */
#screen > .content:not(.home-content) {
    padding-top: 84px !important;
}

/* Inner section eyebrow labels were legacy decoration; section titles remain. */
#screen > .content:not(.home-content) .hero-label {
    display: none !important;
}

/* Make the return control explicit and always clickable/visible. */
#screen > .content:not(.home-content) > .back-button {
    position: relative !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-height: 28px !important;
    margin: 0 0 12px !important;
    padding: 6px 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#screen > .content:not(.home-content) > .back-button:hover,
#screen > .content:not(.home-content) > .back-button:focus-visible {
    color: var(--text-bright) !important;
}

/* Shared light-theme tokens for every inner screen, not only the home menu. */
body.light-theme {
    --bg: #f3e5dc;
    --bg-soft: #eee0d7;
    --panel: #fffaf5;
    --panel-hover: #f6ebe5;
    --text: #4a4144;
    --text-bright: #1d181b;
    --muted: #776d70;
    --teal: #d86f91;
    --teal-bright: #d9517b;
    --teal-dark: #a74e68;
    --orange: #c86455;
    --orange-bright: #cf6c5d;
    --sand: #7f7069;
    --border: rgba(48,38,43,.13);
    --border-strong: rgba(48,38,43,.20);
    --shadow: rgba(65,48,54,.14);
    --surface: #fffaf5;
    --surface-2: #f3e7e0;
    --home-bg: #f3e5dc;
    --home-surface: #fffaf5;
    --home-surface-2: #f8eee8;
    --home-text: #1d181b;
    --home-muted: #776d70;
    --home-border: rgba(48,38,43,.13);
}

/* Inner-screen canvas follows the selected theme. */
body.light-theme #screen {
    background: var(--bg) !important;
    color: var(--text) !important;
}

body.light-theme #screen > .content:not(.home-content) {
    background: var(--bg) !important;
    color: var(--text) !important;
}

body.light-theme #screen > .content:not(.home-content) .page-header h1,
body.light-theme #screen > .content:not(.home-content) h1,
body.light-theme #screen > .content:not(.home-content) h2,
body.light-theme #screen > .content:not(.home-content) strong {
    color: var(--text-bright);
}

body.light-theme #screen > .content:not(.home-content) .page-header p,
body.light-theme #screen > .content:not(.home-content) small,
body.light-theme #screen > .content:not(.home-content) .muted {
    color: var(--muted);
}

/* Keep the approved home hero typography white in light mode. */
body.light-theme #screen > .home-content .home-hero-kicker,
body.light-theme #screen > .home-content .home-hero-copy h1,
body.light-theme #screen > .home-content .home-hero-copy p {
    color: #fff !important;
}

/* Requested: LOS SANTOS in the light-theme hero is white. */
body.light-theme #screen > .home-content .home-hero-kicker {
    color: #fff !important;
}

@media (max-width: 520px) {
    #screen > .content:not(.home-content) {
        padding-top: 82px !important;
    }
}