@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&display=swap");

:root {
        --bg:        #090b10;
        --surface:   #10141e;
        --surface2:  #161c2a;
        --border:    rgba(255,255,255,0.07);
        --ink:       #e8eaf0;
        --muted:     #8892a4;
        --gold:      #f5c842;
        --gold-dim:  #c9a030;
        --teal:      #1fd4c4;
        --teal-dim:  #14a89a;
        --red:       #ff5252;
        --shadow:    0 18px 44px rgba(0,0,0,0.55);
        --radius:    12px;
}

/* ─── Reset & base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
        font-family: "Inter", "Segoe UI", sans-serif;
        background: var(--bg);
        color: var(--ink);
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
}

/* ─── Navigation ────────────────────────────────────────── */
.nav {
        background: rgba(9, 11, 16, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
        padding: 0 1.5rem;
        display: flex;
        align-items: center;
        gap: 0;
        height: 58px;
        position: sticky;
        top: 0;
        z-index: 100;
}

.nav a {
        color: #9ba8bc;
        text-decoration: none;
        font-size: 0.92rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        padding: 0.3rem 0.75rem;
        border-radius: 6px;
        transition: color 160ms, background 160ms;
}

.nav a:first-child {
        font-family: "Bebas Neue", sans-serif;
        font-size: 1.5rem;
        letter-spacing: 0.08em;
        color: var(--gold);
        margin-right: 1.2rem;
        padding: 0;
        background: none !important;
}

.nav-brand-menu {
        margin-right: 1.2rem;
        position: relative;
}

.brand-dropdown {
        position: relative;
}

.brand-dropdown summary {
        list-style: none;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        cursor: pointer;
        padding: 0;
        background: none;
        border: none;
        user-select: none;
}

.brand-dropdown summary::-webkit-details-marker {
        display: none;
}

.brand-text {
        font-family: "Bebas Neue", sans-serif;
        font-size: 1.45rem;
        letter-spacing: 0.08em;
        color: var(--gold);
}

.brand-logo {
        height: 44px;
        width: auto;
        display: block;
        object-fit: contain;
}

.brand-caret {
        color: #d7be75;
        font-size: 0.8rem;
        line-height: 1;
        transition: transform 120ms ease;
}

.brand-dropdown[open] .brand-caret {
        transform: rotate(180deg);
}

.brand-dropdown-menu {
        position: absolute;
        top: calc(100% + 0.45rem);
        left: 0;
        min-width: 220px;
        padding: 0.45rem;
        border-radius: 10px;
        background: #0d111a;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        z-index: 150;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
}

.brand-dropdown[open] > .brand-dropdown-menu {
        display: flex;
}

.brand-dropdown-menu a {
        display: block;
        padding: 0.5rem 0.65rem;
        border-radius: 8px;
        font-size: 0.92rem;
        color: #c7d0df;
}

.brand-dropdown-menu a:hover {
        background: rgba(255,255,255,0.08);
        color: #fff;
}

.nav-profile {
        margin-left: auto;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.18rem;
        padding: 0.45rem 0.85rem !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(245,200,66,0.18);
}

.nav-profile-name {
        display: block;
        font-size: 0.92rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
}

.nav-tier-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.14rem 0.5rem;
        border-radius: 999px;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1;
        border: 1px solid transparent;
}

.nav-tier-free {
        background: rgba(159, 169, 189, 0.16);
        border-color: rgba(159, 169, 189, 0.28);
        color: #d7deea;
}

.nav-tier-silver {
        background: rgba(173, 181, 189, 0.16);
        border-color: rgba(173, 181, 189, 0.32);
        color: #eef2f7;
}

.nav-tier-gold {
        background: rgba(245, 200, 66, 0.16);
        border-color: rgba(245, 200, 66, 0.34);
        color: #ffe8a3;
}

.nav-tier-premium {
        background: rgba(31, 212, 196, 0.16);
        border-color: rgba(31, 212, 196, 0.34);
        color: #b9fff7;
}

.nav a:hover {
        color: #e8eaf0;
        background: rgba(255,255,255,0.06);
}

/* ─── Layout ────────────────────────────────────────────── */
.container {
        max-width: 1160px;
        margin: 0 auto;
        padding: 2rem 1.5rem 4rem;
}

/* ─── Hero ──────────────────────────────────────────────── */
.hero {
        position: relative;
        overflow: hidden;
        background:
                linear-gradient(135deg, rgba(245,200,66,0.08) 0%, transparent 50%),
                linear-gradient(225deg, rgba(31,212,196,0.07) 0%, transparent 50%),
                var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 4rem 3rem;
        margin-bottom: 2.5rem;
}

.hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; max-width: 680px; }

.eyebrow {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold);
        border: 1px solid rgba(245,200,66,0.3);
        background: rgba(245,200,66,0.07);
        padding: 0.25rem 0.75rem;
        border-radius: 999px;
        margin-bottom: 1.25rem;
}

.hero h1 {
        font-family: "Bebas Neue", sans-serif;
        font-size: clamp(3rem, 5vw + 1rem, 5.5rem);
        letter-spacing: 0.04em;
        line-height: 0.95;
        color: #f0f2f7;
        margin-bottom: 1.25rem;
}

.hero h1 span {
        color: var(--gold);
}

.hero p {
        font-size: 1.1rem;
        line-height: 1.65;
        color: #8892a4;
        max-width: 520px;
        margin-bottom: 2rem;
}

.action-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn,
.button-like,
button[type="submit"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        text-decoration: none;
        border: none;
        border-radius: 8px;
        padding: 0.75rem 1.5rem;
        font-family: "Inter", sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: transform 140ms ease, box-shadow 140ms ease, background 160ms ease;
}

.btn-primary,
.button-like:not(.secondary),
button[type="submit"] {
        background: var(--gold);
        color: #0a0c12;
}

.btn-primary:hover,
.button-like:not(.secondary):hover,
button[type="submit"]:hover {
        background: #f7d46a;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(245,200,66,0.28);
}

.btn-secondary,
.button-like.secondary {
        background: transparent;
        color: var(--ink);
        border: 1px solid rgba(255,255,255,0.15);
}

.btn-secondary:hover,
.button-like.secondary:hover {
        background: rgba(255,255,255,0.07);
        border-color: rgba(255,255,255,0.25);
        transform: translateY(-2px);
}

/* ─── Cards ─────────────────────────────────────────────── */
.card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 2rem;
        box-shadow: var(--shadow);
        animation: fade-up 380ms ease both;
}

.card + .card {
        margin-top: 1.5rem;
}

/* ─── Feature grid (homepage) ──────────────────────────── */
.features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin-bottom: 2.5rem;
}

.feature-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 2rem 1.75rem;
        position: relative;
        overflow: hidden;
        transition: border-color 200ms, transform 200ms;
        animation: fade-up 380ms ease both;
}

.feature-card:nth-child(2) { animation-delay: 60ms; }
.feature-card:nth-child(3) { animation-delay: 120ms; }

.feature-card:hover {
        border-color: rgba(245,200,66,0.35);
        transform: translateY(-3px);
}

.feature-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 2px;
        background: linear-gradient(90deg, var(--gold), var(--teal));
        opacity: 0;
        transition: opacity 200ms;
}

.feature-card:hover::before { opacity: 1; }

.feature-icon {
        width: 44px; height: 44px;
        background: rgba(245,200,66,0.1);
        border: 1px solid rgba(245,200,66,0.2);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: var(--gold);
        margin-bottom: 1rem;
}

.aperture-icon {
        width: 28px;
        height: 28px;
        display: block;
}

.feature-card h3 {
        font-family: "Inter", sans-serif;
        font-size: 1rem;
        font-weight: 600;
        color: #d8dde8;
        margin-bottom: 0.5rem;
}

.feature-card p {
        font-size: 0.9rem;
        line-height: 1.6;
        color: var(--muted);
}

/* ─── Homepage tuning ─────────────────────────────────── */
.home-page .hero {
        padding: 3.25rem 2.5rem;
        margin-bottom: 2rem;
}

.home-page .eyebrow {
        font-size: 0.72rem;
}

.home-page .hero h1 {
        font-size: clamp(2.5rem, 4.2vw + 0.9rem, 4.75rem);
}

.home-page .hero h1 span {
        display: block;
        white-space: nowrap;
        font-size: 0.92em;
}

.home-page .hero p {
        font-size: 1rem;
        max-width: 560px;
}

.home-page .button-like,
.home-page button[type="submit"] {
        font-size: 0.9rem;
}

.home-page .section-heading h2 {
        font-size: 1.55rem;
}

.home-page .feature-card h3 {
        font-size: 1rem;
}

.home-page .feature-card p {
        font-size: 0.92rem;
}

.home-page .container {
        padding-top: 1.35rem;
        padding-bottom: 2.5rem;
}

.home-page .hero {
        padding: 2.2rem 2rem;
        margin-bottom: 1.25rem;
}

.home-page .section-heading {
        margin-bottom: 0.8rem;
}

.home-page .features {
        gap: 1rem;
        margin-bottom: 1.2rem;
}

.browse-filter-card {
        padding: 1rem 1.1rem;
        margin-top: -0.25rem;
}

.browse-filter-row {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        flex-direction: column;
}

.sub-filter-row {
        margin-top: 0.9rem;
        padding-top: 0.9rem;
        border-top: 1px solid rgba(255,255,255,0.08);
}

.browse-chip-wrap {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
}

.browse-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        text-decoration: none;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 0.42rem 0.74rem;
        border-radius: 999px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.12);
        color: #cfd7e4;
        transition: border-color 160ms, transform 160ms, background 160ms;
}

.browse-chip span {
        background: rgba(255,255,255,0.08);
        border-radius: 999px;
        padding: 0.08rem 0.4rem;
        font-size: 0.72rem;
        color: var(--muted);
}

.browse-chip:hover {
        border-color: rgba(31,212,196,0.34);
        transform: translateY(-1px);
        background: rgba(31,212,196,0.08);
}

.browse-chip.is-active {
        background: rgba(31,212,196,0.16);
        border-color: rgba(31,212,196,0.45);
        color: #d8fffa;
}

.browse-chip.is-active span {
        background: rgba(6,10,16,0.35);
        color: #d8fffa;
}

.browse-chip-sub {
        text-transform: none;
        letter-spacing: 0.01em;
        font-weight: 600;
}

/* ─── Equipment grid ─────────────────────────────────────── */
.eq-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.25rem;
        margin-top: 1.5rem;
}

.eq-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        transition: transform 200ms, border-color 200ms, box-shadow 200ms;
        animation: fade-up 380ms ease both;
}

.eq-card:hover {
        transform: translateY(-4px);
        border-color: rgba(31,212,196,0.3);
        box-shadow: 0 14px 36px rgba(0,0,0,0.5);
}

.eq-card-thumb {
        aspect-ratio: 4 / 3;
        background:
                linear-gradient(160deg, var(--surface2) 0%, #0d1525 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5rem;
        color: #e8edf7;
        border-bottom: 1px solid var(--border);
        position: relative;
        overflow: hidden;
}

.eq-card-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(2, 6, 23, 0.04) 0%, rgba(2, 6, 23, 0.42) 100%);
        pointer-events: none;
}

.category-icon-svg {
        width: 52px;
        height: 52px;
        display: block;
        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.eq-card-thumb .eq-cat-badge {
        position: absolute;
        top: 0.6rem; left: 0.6rem;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        background: rgba(31,212,196,0.12);
        color: var(--teal);
        border: 1px solid rgba(31,212,196,0.25);
        padding: 0.18rem 0.5rem;
        border-radius: 999px;
}

.eq-card-body {
        padding: 1.1rem 1.25rem 1.25rem;
}

.eq-card-body h3 {
        font-family: "Inter", sans-serif;
        font-size: 0.98rem;
        font-weight: 600;
        color: #d8dde8;
        margin-bottom: 0.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.eq-card-body .brand {
        font-size: 0.8rem;
        color: var(--muted);
        margin-bottom: 0.9rem;
}

.category-block {
        margin-bottom: 2.5rem;
}

.eq-card-image,
.gear-detail-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
}

.eq-card-thumb.has-photo {
        padding: 0;
        overflow: hidden;
}

.eq-card-thumb.has-photo .eq-card-image {
        transition: transform 260ms ease, filter 260ms ease;
        filter: saturate(1.04) contrast(1.02);
}

.eq-card:hover .eq-card-thumb.has-photo .eq-card-image {
        transform: scale(1.04);
        filter: saturate(1.08) contrast(1.04);
}

.eq-meta-row {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
}

.eq-pill,
.eq-location {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.55rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.04em;
}

.eq-pill {
        background: rgba(245,200,66,0.12);
        border: 1px solid rgba(245,200,66,0.24);
        color: var(--gold);
}

.eq-location {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.09);
        color: var(--muted);
}

.eq-card-footer {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 0.25rem;
}

.eq-card-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: wrap;
}

.manage-summary-card {
        margin-bottom: 1.5rem;
}

.manage-summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.6rem;
        flex-wrap: wrap;
}

.manage-browse-link {
        padding: 0.45rem 0.85rem;
        font-size: 0.82rem;
}

.eq-view-btn {
        font-size: 0.8rem;
        padding: 0.38rem 0.72rem;
}

.manage-edit-icon {
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(7, 12, 23, 0.82);
        border: 1px solid rgba(255,255,255,0.18);
        color: #f8fafc;
        text-decoration: none;
        z-index: 2;
        transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.manage-edit-icon:hover {
        transform: translateY(-1px);
        background: rgba(13, 148, 136, 0.92);
        border-color: rgba(31, 212, 196, 0.72);
}

.manage-edit-icon svg {
        width: 1rem;
        height: 1rem;
        display: block;
}

.eq-card-price {
        font-family: "Bebas Neue", sans-serif;
        font-size: 1.5rem;
        letter-spacing: 0.04em;
        color: var(--gold);
        line-height: 1;
}

.eq-card-price small {
        font-family: "Inter", sans-serif;
        font-size: 0.75rem;
        color: var(--muted);
        font-weight: 400;
        letter-spacing: 0;
}

.hire-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        background: var(--teal);
        color: #060a10;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        padding: 0.45rem 0.9rem;
        border-radius: 6px;
        text-decoration: none;
        transition: background 150ms, transform 150ms;
}

.hire-btn:hover {
        background: #3de8d6;
        transform: translateY(-1px);
}

.gear-detail {
        display: grid;
        grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1fr);
        gap: 1.75rem;
        align-items: stretch;
}

.gear-detail-media {
        min-height: 340px;
        aspect-ratio: 4 / 5;
        max-width: 460px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: linear-gradient(160deg, var(--surface2) 0%, #0d1525 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        position: relative;
        box-shadow: 0 18px 38px rgba(0,0,0,0.35);
}

.gear-detail-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.24) 100%);
        pointer-events: none;
}

.gear-detail-fallback {
        font-family: "Bebas Neue", sans-serif;
        font-size: clamp(2.8rem, 5vw, 4.25rem);
        letter-spacing: 0.08em;
        color: var(--gold);
        text-transform: uppercase;
        padding: 2rem;
        text-align: center;
        text-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.gear-detail-copy h1 {
        font-family: "Bebas Neue", sans-serif;
        font-size: 3rem;
        letter-spacing: 0.05em;
        margin-bottom: 0.4rem;
}

.detail-facts {
        display: flex;
        gap: 0.55rem;
        flex-wrap: wrap;
        margin: 1rem 0 1.5rem;
}

.detail-price {
        font-family: "Bebas Neue", sans-serif;
        font-size: 2.6rem;
        letter-spacing: 0.04em;
        color: var(--gold);
        line-height: 1;
        margin-bottom: 1rem;
}

.detail-price small {
        font-family: "Inter", sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--muted);
        letter-spacing: 0;
}

.detail-note {
        margin-bottom: 0.65rem;
}

.owner-card {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 1rem 1.1rem;
        margin: 1.25rem 0 1.35rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(255,255,255,0.03);
}

.owner-avatar-wrap {
        flex-shrink: 0;
}

.owner-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.05);
        display: block;
}

.owner-avatar-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Bebas Neue", sans-serif;
        font-size: 1.6rem;
        letter-spacing: 0.08em;
        color: var(--gold);
        background: linear-gradient(160deg, var(--surface2) 0%, #0d1525 100%);
}

.owner-card-copy {
        display: grid;
        gap: 0.18rem;
}

.owner-label {
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
}

.owner-card-copy strong {
        color: #e8eaf0;
        font-size: 1rem;
}

.owner-card-copy p {
        font-size: 0.84rem;
        line-height: 1.5;
        margin: 0;
}

/* ─── Section headings ───────────────────────────────────── */
.section-heading {
        display: flex;
        align-items: baseline;
        gap: 1rem;
        margin-bottom: 1.25rem;
}

.section-heading h2 {
        font-family: "Bebas Neue", sans-serif;
        font-size: 1.8rem;
        letter-spacing: 0.06em;
        color: #d8dde8;
}

.section-heading .divider {
        flex: 1;
        height: 1px;
        background: var(--border);
}

/* ─── Typography fallbacks ───────────────────────────────── */
h1, h2, h3, h4 {
        line-height: 1.2;
        color: #d8dde8;
}

h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 0.75rem; }
h2 { font-size: clamp(1.25rem, 2vw, 1.7rem); margin-bottom: 0.5rem; }
h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }

p {
        font-size: 0.975rem;
        line-height: 1.65;
        color: #8892a4;
}

/* ─── Forms ─────────────────────────────────────────────── */
.form-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 2.5rem 2rem;
        max-width: 440px;
        margin: 2rem auto;
        box-shadow: var(--shadow);
        animation: fade-up 380ms ease both;
}

.form-card h1 {
        font-family: "Bebas Neue", sans-serif;
        font-size: 2.2rem;
        letter-spacing: 0.06em;
        color: #e8eaf0;
        margin-bottom: 0.25rem;
}

.form-subtitle {
        font-size: 0.88rem;
        color: var(--muted);
        margin-bottom: 1.75rem;
}

.field {
        margin-bottom: 1.1rem;
}

.field label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #6b7a93;
        margin-bottom: 0.4rem;
}

.field input,
.field select,
.field textarea,
form label input,
form label select,
form label textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
        width: 100%;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
        padding: 0.7rem 0.9rem;
        font-family: "Inter", sans-serif;
        font-size: 0.95rem;
        color: #d8dde8;
        transition: border-color 160ms, box-shadow 160ms;
        -webkit-appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
        outline: none;
        border-color: rgba(245,200,66,0.5);
        box-shadow: 0 0 0 3px rgba(245,200,66,0.1);
}

select option { background: #10141e; }

input[type="checkbox"] {
        width: auto !important;
        padding: 0 !important;
        margin-right: 0.45rem;
        accent-color: var(--teal);
        transform: scale(1.18);
        -webkit-appearance: checkbox !important;
        appearance: checkbox !important;
        cursor: pointer;
        min-width: 18px;
        min-height: 18px;
        flex-shrink: 0;
}

/* Insurance confirmation label - inline checkbox + text */
.insurance-label {
        display: flex !important;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.85rem !important;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.03em;
        color: #6b7a93;
        margin-bottom: 1em;
        cursor: pointer;
        line-height: 1.45;
}

form label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #6b7a93;
        margin-bottom: 0.9rem;
}

form br { display: none; }

form button[type="submit"],
form .btn {
        margin-top: 0.5rem;
        width: 100%;
}

/* ─── Data tables (equipment listing admin section) ──────── */
.data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
}

.data-table th {
        text-align: left;
        padding: 0.65rem 0.75rem;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        border-bottom: 1px solid var(--border);
}

.data-table td {
        padding: 0.75rem;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        color: #b0bac9;
}

.data-table tr:hover td {
        background: rgba(255,255,255,0.025);
        color: var(--ink);
}

.data-table a {
        color: var(--teal);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.8rem;
}

.data-table a:hover { color: #5ef5e8; }

/* ─── Feedback messages ──────────────────────────────────── */
.error {
        color: #fca5a5;
        background: rgba(255,82,82,0.1);
        border: 1px solid rgba(255,82,82,0.25);
        padding: 0.7rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        margin-bottom: 1rem;
}

.success {
        color: #86efac;
        background: rgba(31,212,196,0.08);
        border: 1px solid rgba(31,212,196,0.22);
        padding: 0.7rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        margin-bottom: 1rem;
}

.form-helper {
        margin-bottom: 1rem;
        font-size: 0.9rem;
        color: var(--muted);
}

.edit-gear-preview {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.9rem 1rem;
        margin-bottom: 1rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(255,255,255,0.03);
}

.edit-gear-preview-image {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.12);
        flex-shrink: 0;
}

.form-cancel-btn {
        margin-top: 0.75rem;
        width: 100%;
}

/* ─── Profile + Subscription polish ────────────────────── */
.profile-shell,
.subscription-shell {
        max-width: 760px;
        margin: 0 auto;
}

.profile-form {
        display: grid;
        gap: 0.85rem;
}

.inline-check {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.92rem;
        font-weight: 500;
        color: #c8d3e8;
        margin: 0.2rem 0;
}

.section-divider {
        margin: 1.3rem 0;
        border: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}

.payout-subtitle {
        margin-top: 0;
        margin-bottom: 0.8rem;
}

.payout-hint {
        margin: 0.5rem 0 1rem;
        padding: 0.85rem 1rem;
}

.payout-meta {
        margin: 0.3rem 0;
        color: #cfdbf2;
        font-size: 0.92rem;
        word-break: break-word;
}

.status-row {
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.55rem;
}

.status-pill {
        display: inline-block;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        font-size: 0.76rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: #d7e2f8;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.12);
}

.status-pill.status-ready {
        color: #b9f8d5;
        background: rgba(16,185,129,0.14);
        border-color: rgba(16,185,129,0.36);
}

.status-pill.status-progress {
        color: #d7f2ff;
        background: rgba(56,189,248,0.14);
        border-color: rgba(56,189,248,0.34);
}

.plan-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 1rem 0 1.2rem;
}

.plan-card {
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.03);
        border-radius: 10px;
        padding: 0.85rem 0.95rem;
}

.plan-card h3 {
        margin: 0 0 0.35rem;
        font-size: 1rem;
        color: #ecf2ff;
}

.plan-card p {
        margin: 0;
        font-size: 0.88rem;
        line-height: 1.45;
        color: #a9b8d5;
}

.plan-details {
        margin-top: 1.15rem;
        padding: 0.9rem 1rem;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.02);
}

.plan-details h3 {
        margin-top: 0;
        margin-bottom: 0.55rem;
}

.plan-details p {
        margin: 0.2rem 0;
}

/* ─── Stripe card element wrapper ───────────────────────── */
#card-element {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
        padding: 0.8rem 0.9rem;
        margin-bottom: 1rem;
}

#card-errors {
        color: #fca5a5;
        font-size: 0.85rem;
        margin-top: 0.4rem;
}

/* ─── Page-level grid helpers ────────────────────────────── */
.grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
}

/* ─── Live production ticker ─────────────────────────────── */
.live-feed {
        margin-bottom: 1.35rem;
        padding: 1rem 1.15rem;
        overflow: hidden;
}

.live-feed-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.8rem;
        margin-bottom: 0.65rem;
        flex-wrap: wrap;
}

.live-feed-header h2 {
        font-size: 1.05rem;
        margin: 0;
        color: #eef4ff;
}

.live-feed-header p {
        font-size: 0.8rem;
        color: var(--muted);
        margin: 0;
}

.live-feed-marquee {
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 10px;
        background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
        mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.live-feed-track {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        width: max-content;
        padding: 0.55rem 0.35rem;
        animation: ticker-scroll 85s linear infinite;
}

.live-feed-marquee:hover .live-feed-track {
        animation-play-state: paused;
}

.live-feed-item {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        color: #deebff;
        background: rgba(9, 14, 24, 0.78);
        border: 1px solid rgba(31, 212, 196, 0.22);
        border-radius: 999px;
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        white-space: nowrap;
        transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.live-feed-item:hover {
        transform: translateY(-1px);
        border-color: rgba(245, 200, 66, 0.5);
        background: rgba(17, 26, 40, 0.92);
}

.live-feed-source {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.14rem 0.45rem;
        border-radius: 999px;
        color: #95a7c7;
        border: 1px solid rgba(255,255,255,0.18);
}

.live-feed-status {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #8ff6ea;
}

/* ─── Animations ─────────────────────────────────────────── */
@keyframes fade-up {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
}

@keyframes ticker-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
        .features { grid-template-columns: 1fr; }
        .eq-grid  { grid-template-columns: repeat(2, 1fr); }
        .hero     { padding: 2.5rem 1.5rem; }
        .hero h1  { font-size: 2.8rem; }
        .gear-detail { grid-template-columns: 1fr; }
        .browse-filter-card { padding: 0.9rem; }
}

@media (max-width: 540px) {
        .eq-grid  { grid-template-columns: 1fr; }
        .nav      { padding: 0 1rem; gap: 0; }
        .nav a    { padding: 0.2rem 0.5rem; font-size: 0.85rem; }
        .container { padding: 1.25rem 1rem 3rem; }
        .live-feed-track { animation-duration: 65s; }
        .live-feed-item { font-size: 0.76rem; }
        .form-card { padding: 1.75rem 1.25rem; }
        .plan-grid { grid-template-columns: 1fr; }
        .profile-shell,
        .subscription-shell { max-width: 100%; }
        .edit-gear-preview {
                align-items: flex-start;
                flex-direction: column;
        }
}



/* ── Manage Card Actions (Edit + Delete icons on thumbnail) ───────────────── */
.manage-card-actions {
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        display: flex;
        gap: 0.35rem;
        z-index: 3;
}

.manage-delete-icon {
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(7, 12, 23, 0.82);
        border: 1px solid rgba(255,255,255,0.18);
        color: #f8fafc;
        cursor: pointer;
        transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
        padding: 0;
}

.manage-delete-icon:hover {
        transform: translateY(-1px);
        background: rgba(220, 38, 38, 0.92);
        border-color: rgba(248, 113, 113, 0.72);
}

.manage-delete-icon svg {
        width: 1rem;
        height: 1rem;
        display: block;
}

/* When inside .manage-card-actions, reset edit icon positioning */
.manage-card-actions .manage-edit-icon {
        position: static;
}

/* Delete button in card footer */
.eq-delete-btn {
        color: #fca5a5 !important;
        border-color: rgba(248, 113, 113, 0.35) !important;
        cursor: pointer;
}
.eq-delete-btn:hover {
        background: rgba(220, 38, 38, 0.25) !important;
        border-color: rgba(248, 113, 113, 0.6) !important;
        color: #fef2f2 !important;
}

/* ── Toast Notification ───────────────────────────────────────────────────── */
.xq-toast {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%) translateY(1.5rem);
        padding: 0.85rem 1.6rem;
        border-radius: 0.6rem;
        font-size: 0.92rem;
        font-weight: 500;
        z-index: 10000;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        max-width: 90vw;
        text-align: center;
        box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.xq-toast--visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
}
.xq-toast--success {
        background: #065f46;
        color: #d1fae5;
        border: 1px solid rgba(52, 211, 153, 0.4);
}
.xq-toast--error {
        background: #7f1d1d;
        color: #fecaca;
        border: 1px solid rgba(248, 113, 113, 0.4);
}
.xq-toast--info {
        background: #1e3a5f;
        color: #bfdbfe;
        border: 1px solid rgba(96, 165, 250, 0.4);
}

/* ── Delete Confirmation Modal ────────────────────────────────────────────── */
.xq-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(4px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
}
.xq-modal {
        background: #111827;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 1rem;
        padding: 2rem 2.2rem;
        max-width: 420px;
        width: 100%;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.xq-modal-icon {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
}
.xq-modal h3 {
        color: #f1f5f9;
        margin-bottom: 0.6rem;
        font-size: 1.25rem;
}
.xq-modal p {
        color: #94a3b8;
        font-size: 0.92rem;
        margin-bottom: 0.5rem;
}
.xq-modal-warning {
        color: #f87171 !important;
        font-size: 0.82rem !important;
        font-weight: 500;
}
.xq-modal-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        margin-top: 1.5rem;
}
.xq-modal-actions .button-like {
        min-width: 100px;
        justify-content: center;
}
.xq-btn-danger {
        background: #dc2626 !important;
        border-color: #ef4444 !important;
        color: #fff !important;
}
.xq-btn-danger:hover {
        background: #b91c1c !important;
}
.xq-btn-danger:disabled {
        opacity: 0.6;
        cursor: not-allowed;
}