:root {
    --bg: #010401;
    --paper: rgba(3, 11, 4, 0.92);
    --panel: rgba(4, 15, 6, 0.98);
    --line: rgba(115, 255, 123, 0.24);
    --text: #d9ffd8;
    --muted: #78b879;
    --accent: #7dff65;
    --accent-soft: rgba(125, 255, 101, 0.12);
    --success: #a4ff8e;
    --warning: #c8ff85;
    --graph-blue: #67c8ff;
    --graph-green: #7ee69b;
    --shadow: 0 0 24px rgba(125, 255, 101, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Consolas, "Lucida Console", "Courier New", monospace;
    background:
        radial-gradient(circle at top right, rgba(125, 255, 101, 0.2), transparent 24%),
        radial-gradient(circle at left center, rgba(42, 112, 54, 0.18), transparent 32%),
        repeating-linear-gradient(180deg, rgba(125, 255, 101, 0.035) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #010401, #041006 42%, #020803);
}

a {
    color: inherit;
}

h1,
h2,
h3,
p {
    margin: 0;
}

.page-shell {
    width: min(1500px, calc(100% - 28px));
    margin: 12px auto 24px;
    display: grid;
    gap: 10px;
}

.auth-shell {
    width: min(900px, calc(100% - 28px));
}

.hero-card,
.panel,
.stat-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.hero-card {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(8, 24, 9, 0.96), rgba(4, 15, 6, 0.98)),
        var(--panel);
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-mark {
    width: 88px;
    height: 88px;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 16px rgba(125, 255, 101, 0.3));
}

.hero-card h1 {
    font-size: 1.45rem;
    line-height: 1.1;
}

.hero-copy,
.helper,
.small {
    color: var(--muted);
    font-size: 0.9rem;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.66rem;
    color: var(--accent);
}

.panel {
    padding: 12px 14px;
    display: grid;
    gap: 10px;
}

.panel h2 {
    font-size: 1.15rem;
    line-height: 1.15;
}

.auth-panel {
    gap: 16px;
}

.stack-form,
.field-block {
    display: grid;
    gap: 5px;
}

.field-block span {
    font-size: 0.84rem;
    color: var(--muted);
}

.toggle-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(8, 28, 10, 0.96);
    color: var(--text);
}

.toggle-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
}

.toggle-field span {
    color: var(--text);
    font-size: 0.88rem;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 11px 12px;
    background: rgba(8, 28, 10, 0.96);
    color: var(--text);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(125, 255, 101, 0.5);
    box-shadow: 0 0 0 1px rgba(125, 255, 101, 0.18);
}

textarea {
    min-height: 84px;
    resize: vertical;
}

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

.get-premium-panel {
    align-content: start;
}

.premium-steps {
    display: grid;
    gap: 8px;
}

.premium-steps div {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(125, 255, 101, 0.18);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(115, 255, 123, 0.05);
}

.premium-steps strong {
    color: var(--accent);
}

.premium-steps span {
    color: var(--muted);
    font-size: 0.88rem;
}

.premium-example-card {
    min-height: 270px;
}

.premium-example-text {
    min-height: 190px;
    white-space: pre;
    overflow: auto;
    line-height: 1.45;
}

.panel-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}

.checkbox-inline input {
    width: auto;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.competitor-delta-high {
    color: #ff9a9a;
    font-weight: 700;
}

.competitor-delta-low {
    color: var(--success);
    font-weight: 700;
}

.competitor-delta-same {
    color: var(--muted);
}

.competitor-online-row td {
    background: rgba(125, 255, 101, 0.08);
}

.status-pill.competitor-online-pill {
    color: var(--success);
    background: rgba(164, 255, 142, 0.15);
    box-shadow: inset 0 0 0 1px rgba(164, 255, 142, 0.22);
}

.competitor-summary-table,
.competitor-best-table,
.competitor-history-table {
    min-width: 980px;
}

.competitor-heatmap-wrap {
    max-height: 70vh;
}

.competitor-heatmap-table {
    width: max-content;
    min-width: 1040px;
}

.competitor-heatmap-table th:first-child,
.competitor-heatmap-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: rgba(4, 15, 6, 0.98);
}

.competitor-heatmap-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(4, 15, 6, 0.98);
}

.competitor-heatmap-table th:first-child {
    z-index: 4;
}

.competitor-heatmap-table th span {
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: none;
}

.competitor-heatmap-cell {
    text-align: right;
    border-left: 1px solid rgba(115, 255, 123, 0.12);
}

.competitor-heatmap-cell.competitor-delta-high {
    background: rgba(255, 106, 106, 0.16);
}

.competitor-heatmap-cell.competitor-delta-low {
    background: rgba(125, 255, 101, 0.12);
}

.competitor-heatmap-cell.competitor-delta-same,
.competitor-heatmap-empty {
    background: rgba(115, 255, 123, 0.04);
    color: rgba(120, 184, 121, 0.72);
}

.member-header-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.member-referral-link {
    width: min(100%, 420px);
}

.member-referral-link input {
    width: 100%;
}

.admin-server-load {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: end;
    max-width: 100%;
    border: 1px solid rgba(125, 255, 101, 0.2);
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(115, 255, 123, 0.05);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.2;
}

.admin-server-load span {
    color: var(--accent);
    font-weight: 700;
}

.admin-server-load strong {
    color: var(--text);
    font-weight: 600;
}

.admin-pending-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    font-size: 0.84rem;
}

.admin-pending-notice .ghost-button {
    padding: 4px 8px;
    font-size: 0.8rem;
}

.nav-role-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    color: var(--accent);
    font-size: 0.76em;
    font-weight: 800;
    line-height: 1;
}

.nav-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
}

.nav-button.active {
    border-color: rgba(125, 255, 101, 0.64);
    background: rgba(125, 255, 101, 0.18);
    color: var(--accent);
    box-shadow: 0 0 0 1px rgba(125, 255, 101, 0.12);
}

.nav-button.disabled {
    border-color: rgba(120, 184, 121, 0.16);
    background: rgba(120, 184, 121, 0.04);
    color: rgba(120, 184, 121, 0.62);
    cursor: not-allowed;
}

.nav-button.disabled .nav-role-icon {
    color: rgba(120, 184, 121, 0.62);
}

.primary-button,
.ghost-button,
.danger-button,
button {
    border-radius: 999px;
    border: 1px solid var(--line);
    padding: 7px 11px;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    background: rgba(115, 255, 123, 0.06);
    color: var(--text);
}

.primary-button {
    background: var(--accent);
    color: #031106;
    border-color: rgba(125, 255, 101, 0.45);
}

.danger-button {
    background: rgba(200, 255, 133, 0.08);
    color: var(--warning);
}

.ghost-button {
    background: transparent;
}

.notice {
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
}

.notice.warning {
    background: rgba(200, 255, 133, 0.08);
    color: var(--warning);
}

.danger-zone {
    border-color: rgba(200, 255, 133, 0.28);
    background:
        radial-gradient(circle at top right, rgba(200, 255, 133, 0.08), transparent 34%),
        rgba(4, 15, 6, 0.96);
}

.notice.success {
    background: rgba(164, 255, 142, 0.08);
    color: var(--success);
}

.site-notification-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: rgba(0, 6, 1, 0.78);
    backdrop-filter: blur(4px);
}

.site-notification-modal {
    width: min(620px, 100%);
    box-sizing: border-box;
    max-height: calc(100dvh - 36px);
    display: grid;
    min-height: 0;
    gap: 12px;
    padding: 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border: 1px solid rgba(125, 255, 101, 0.32);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(125, 255, 101, 0.13), transparent 34%),
        var(--panel);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}

.site-notification-modal h2 {
    margin: 0;
}

.site-notification-message {
    color: var(--text);
    line-height: 1.55;
}

@media (max-height: 560px) {
    .site-notification-overlay {
        align-items: flex-start;
        padding: 10px;
    }

    .site-notification-modal {
        max-height: calc(100dvh - 20px);
        padding: 16px;
    }
}

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

.notification-target-members {
    grid-column: 1 / -1;
}

.trade-alert-shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-color: rgba(125, 255, 101, 0.36);
    background:
        radial-gradient(circle at top right, rgba(125, 255, 101, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(8, 24, 9, 0.98), rgba(4, 15, 6, 0.98));
}

.trade-alert-copy {
    display: grid;
    gap: 3px;
}

.trade-alert-copy strong {
    font-size: 1.02rem;
    line-height: 1.15;
}

.trade-alert-hidden {
    display: none;
}

.helper-block {
    display: grid;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.disclaimer-panel {
    gap: 8px;
    background:
        radial-gradient(circle at top right, rgba(125, 255, 101, 0.1), transparent 34%),
        rgba(4, 15, 6, 0.96);
}

.disclaimer-panel p {
    color: var(--muted);
    font-size: 0.9rem;
}

.disclaimer-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 0.86rem;
}

.disclaimer-list li {
    margin: 5px 0;
}

.stats-grid,
.summary-grid,
.admin-grid {
    display: grid;
    gap: 8px;
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 16px;
    align-items: start;
}

.dashboard-main,
.analytics-sidebar {
    display: grid;
    gap: 10px;
}

.analytics-sidebar {
    position: sticky;
    top: 14px;
}

.stat-card {
    padding: 10px 12px;
    background: rgba(4, 15, 6, 0.96);
}

.stat-card strong {
    display: block;
    margin-top: 3px;
    font-size: 1.35rem;
    line-height: 1;
}

.stat-card p:first-child {
    color: var(--muted);
    font-size: 0.82rem;
}

.summary-grid,
.admin-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.set-builder-page > .admin-grid {
    grid-template-columns: minmax(0, 1fr);
}

.summary-card,
.member-card,
.metric-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 11px;
    background: rgba(115, 255, 123, 0.04);
    display: grid;
    gap: 8px;
}

.summary-head,
.card-head,
.section-head,
.chart-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.collapsible-panel {
    padding: 0;
}

.collapsible-panel > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.collapsible-panel > summary::-webkit-details-marker {
    display: none;
}

.collapsible-summary {
    padding: 12px 14px;
}

.collapsible-summary .collapse-hint {
    align-self: center;
    color: var(--accent);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.collapsible-panel[open] > summary .collapse-hint {
    color: var(--muted);
}

.collapsible-body {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.analytics-panel {
    background:
        radial-gradient(circle at top right, rgba(125, 255, 101, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(8, 24, 9, 0.98), rgba(4, 15, 6, 0.98));
}

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

.metric-card {
    gap: 5px;
    padding: 13px;
}

.metric-card span,
.metric-card em {
    color: var(--muted);
    font-style: normal;
    font-size: 0.82rem;
}

.metric-card strong {
    font-size: 1.26rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.chart-card {
    overflow: hidden;
}

.chart-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.78rem;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chart-legend span::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

.chart-legend .legend-plushie::before {
    background: var(--graph-green);
}

.chart-legend .legend-flower::before {
    background: var(--graph-blue);
}

.chart-svg {
    width: 100%;
    min-height: 150px;
    border-radius: 18px;
    background:
        linear-gradient(rgba(115, 255, 123, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 255, 123, 0.06) 1px, transparent 1px),
        rgba(3, 11, 4, 0.72);
    background-size: 100% 38px, 58px 100%;
}

.chart-axis {
    stroke: rgba(115, 255, 123, 0.18);
    stroke-width: 1;
}

.chart-line {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-line-flower {
    stroke: var(--accent);
}

.chart-line-plushie {
    stroke: var(--success);
}

.chart-line-value {
    stroke: #c8ff85;
}

.chart-scale {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.empty-chart {
    display: grid;
    place-items: center;
    min-height: 150px;
    border: 1px dashed var(--line);
    border-radius: 18px;
    color: var(--muted);
    background: rgba(3, 11, 4, 0.68);
    text-align: center;
    padding: 18px;
}

.graph-page {
    max-width: 1400px;
}

.graph-card {
    gap: 14px;
}

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

.graph-picker {
    display: grid;
    gap: 8px;
    width: min(420px, 100%);
}

.graph-picker .field-block {
    margin: 0;
}

.graph-picker select[multiple] {
    min-height: 220px;
}

.graph-legend {
    justify-content: flex-start;
}

.chart-legend .legend-regular::before {
    background: var(--graph-blue);
}

.chart-legend .legend-premium::before {
    background: var(--graph-green);
}

.chart-legend .legend-point::before {
    background: var(--graph-blue);
}

.graph-chart-shell {
    position: relative;
    width: min(100%, 640px);
    cursor: zoom-in;
}

.graph-hover-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 180px;
    max-width: min(320px, calc(100% - 16px));
    padding: 10px 12px;
    border: 1px solid rgba(115, 255, 123, 0.28);
    border-radius: 12px;
    background: rgba(5, 18, 7, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

.graph-hover-header {
    color: var(--accent);
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.graph-hover-values {
    display: grid;
    gap: 4px;
}

.graph-hover-values p {
    color: var(--text);
    font-size: 0.82rem;
    text-align: right;
}

.graph-svg {
    width: 100%;
    height: 220px;
    min-height: 220px;
    border: 1px solid rgba(115, 255, 123, 0.2);
    border-radius: 14px;
    background:
        linear-gradient(rgba(115, 255, 123, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 255, 123, 0.05) 1px, transparent 1px),
        rgba(3, 11, 4, 0.74);
    background-size: 100% 57px, 94px 100%;
}

.graph-grid-line,
.graph-axis-line {
    stroke: rgba(115, 255, 123, 0.2);
    stroke-width: 1;
}

.graph-axis-line {
    stroke: rgba(115, 255, 123, 0.36);
}

.graph-axis-label {
    fill: var(--muted);
    font-size: 15px;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
}

.graph-y-label {
    text-anchor: end;
}

.graph-line {
    fill: none;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px currentColor);
}

.graph-hover-band {
    fill: transparent;
    pointer-events: all;
    cursor: crosshair;
}

.graph-hover-guide {
    stroke: rgba(217, 255, 216, 0.6);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    pointer-events: none;
}

.graph-line-regular,
.graph-line-flower {
    stroke: var(--graph-blue);
    color: var(--graph-blue);
}

.graph-line-premium,
.graph-line-plushie {
    stroke: var(--graph-green);
    color: var(--graph-green);
}

.graph-line-point,
.graph-line-value {
    stroke: var(--graph-blue);
    color: var(--graph-blue);
}

.graph-empty {
    min-height: 220px;
}

.graph-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
}

.graph-modal[hidden] {
    display: none;
}

.graph-modal-panel {
    position: relative;
    width: min(1240px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.48);
}

.graph-modal-title {
    padding-right: 42px;
    color: var(--text);
    font-size: 1rem;
}

.graph-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    background: rgba(3, 11, 4, 0.88);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.graph-modal .graph-chart-shell {
    width: 100%;
    margin-top: 14px;
    cursor: crosshair;
}

.graph-modal .graph-svg {
    height: min(72vh, 760px);
    min-height: 360px;
}

body.graph-modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .graph-chart-shell {
        width: 100%;
    }

    .graph-modal {
        padding: 10px;
    }

    .graph-modal-panel {
        max-height: calc(100vh - 20px);
        padding: 14px;
    }

    .graph-modal .graph-svg {
        height: 62vh;
        min-height: 280px;
    }
}

.player-value-list {
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

.player-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    align-items: baseline;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(115, 255, 123, 0.04);
}

.player-value-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-value-row strong {
    font-variant-numeric: tabular-nums;
}

.player-value-row em {
    grid-column: 1 / -1;
    color: var(--muted);
    font-style: normal;
    font-size: 0.8rem;
}

.chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.item-chip {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(4, 15, 6, 0.86);
}

.item-chip em,
td span,
th span,
.meta-list {
    color: var(--muted);
    font-style: normal;
    font-size: 0.8rem;
}

.item-chip b {
    font-size: 1.1rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.78rem;
}

.status-pill.active,
.status-pill.approved {
    color: var(--success);
    background: rgba(164, 255, 142, 0.08);
}

.status-pill.pending {
    color: var(--accent);
    background: rgba(125, 255, 101, 0.08);
}

.status-pill.trader {
    color: var(--accent);
    background: rgba(125, 255, 101, 0.12);
}

.status-pill.premium {
    color: var(--warning);
    background: rgba(200, 255, 133, 0.12);
}

.status-pill.payout-online-pill {
    margin-left: 8px;
    padding: 3px 8px;
    color: var(--success);
    border-color: rgba(164, 255, 142, 0.34);
    background: rgba(164, 255, 142, 0.12);
}

.payout-online-row td {
    background: rgba(164, 255, 142, 0.08);
}

.payout-online-text {
    color: var(--success);
    font-weight: 700;
}

.payout-amount-field {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.payout-amount-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 170px;
    padding: 0 9px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text);
}

.payout-amount-input b {
    color: var(--accent);
    font-size: 1rem;
}

.payout-amount-input input {
    width: 100%;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
}

.payout-inline-amount {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.payout-inline-amount input {
    width: 116px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.status-pill.invited,
.status-pill.kicked {
    color: var(--muted);
}

.table-panel {
    overflow: hidden;
    align-content: start;
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.payout-requests-table {
    min-width: 1500px;
}

.payout-requests-table th:nth-child(2),
.payout-requests-table td:nth-child(2) {
    min-width: 230px;
    white-space: normal;
}

.payout-requests-table th:nth-child(7),
.payout-requests-table td:nth-child(7) {
    min-width: 190px;
    white-space: normal;
}

.payout-requests-table th:last-child,
.payout-requests-table td:last-child {
    min-width: 210px;
}

.public-price-page {
    max-width: 860px;
}

.public-price-page .hero-card {
    align-items: stretch;
}

.intro-page {
    max-width: 1320px;
}

.intro-hero {
    align-items: stretch;
    gap: 18px;
}

.intro-hero-side {
    display: grid;
    gap: 10px;
    justify-items: end;
    align-content: start;
}

.intro-showcases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.showcase-card {
    min-height: 190px;
}

.showcase-card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
}

.showcase-card-head h2 {
    margin: 4px 0 8px;
}

.showcase-pill {
    align-self: start;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 255, 101, 0.22);
    background: rgba(125, 255, 101, 0.08);
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.discord-screenshot {
    border: 1px solid rgba(125, 255, 101, 0.2);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(10, 26, 12, 0.98), rgba(5, 16, 7, 0.98));
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(125, 255, 101, 0.04);
}

.discord-screenshot-bar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(125, 255, 101, 0.14);
    background: linear-gradient(180deg, rgba(18, 36, 19, 0.96), rgba(9, 20, 10, 0.96));
    color: var(--text);
    font-size: 0.84rem;
    letter-spacing: 0.04em;
}

.discord-screenshot-bar em {
    color: var(--muted);
    font-style: normal;
    font-size: 0.74rem;
}

.discord-post {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
}

.discord-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(125, 255, 101, 0.24), rgba(125, 255, 101, 0.08));
    border: 1px solid rgba(125, 255, 101, 0.28);
    color: var(--accent);
    font-weight: 800;
}

.discord-post-body {
    display: grid;
    gap: 10px;
}

.discord-post-body strong {
    font-size: 0.96rem;
}

.discord-post-body p {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.showcase-links {
    display: grid;
    gap: 6px;
    margin-top: 2px;
}

.showcase-links a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.8rem;
    word-break: break-word;
}

.showcase-links a:hover {
    text-decoration: underline;
}

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

.screenshot-tile {
    min-height: 92px;
    border-radius: 12px;
    border: 1px solid rgba(125, 255, 101, 0.16);
    background:
        radial-gradient(circle at top right, rgba(125, 255, 101, 0.14), transparent 52%),
        linear-gradient(180deg, rgba(9, 22, 10, 0.95), rgba(5, 14, 6, 0.96));
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 4px;
}

.screenshot-tile img {
    width: 100%;
    display: block;
    border-radius: 10px;
    border: 1px solid rgba(125, 255, 101, 0.14);
    object-fit: cover;
    margin-bottom: 4px;
}

.screenshot-image-link {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
    display: block;
    text-decoration: none;
    line-height: 0;
}

.screenshot-image-link img {
    transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease;
}

.screenshot-image-link:hover img {
    transform: translateY(-1px);
    filter: brightness(1.06);
    border-color: rgba(125, 255, 101, 0.32);
}

.screenshot-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
}

.screenshot-lightbox[hidden] {
    display: none;
}

.screenshot-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.82);
}

.screenshot-lightbox-panel {
    position: relative;
    z-index: 1;
    width: min(96vw, 1320px);
    max-height: 92vh;
    margin: 0;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(125, 255, 101, 0.22);
    background: linear-gradient(180deg, rgba(8, 24, 9, 0.98), rgba(2, 8, 3, 0.98));
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(125, 255, 101, 0.1);
}

.screenshot-lightbox-image {
    display: block;
    width: 100%;
    max-height: calc(92vh - 32px);
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(125, 255, 101, 0.14);
    background: #010401;
}

.screenshot-lightbox-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(125, 255, 101, 0.22);
    background: rgba(8, 24, 9, 0.9);
    color: var(--accent);
    font-size: 1.2rem;
    line-height: 1;
}

body.lightbox-open {
    overflow: hidden;
}

.screenshot-tile-wide {
    grid-column: 1 / -1;
    min-height: 116px;
}

.screenshot-tile span {
    color: var(--text);
    font-weight: 700;
}

.screenshot-tile small {
    color: var(--muted);
    font-size: 0.76rem;
}

.intro-referral-strip {
    display: grid;
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

.intro-referral-card {
    min-height: 190px;
}

.intro-number {
    display: block;
    margin-top: 22px;
    font-size: clamp(2.2rem, 6vw, 4rem);
    line-height: 1;
}

.intro-feature em {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-style: normal;
}

.intro-access-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1040px;
}

th,
td {
    padding: 8px 9px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.total-row td {
    font-weight: 700;
}

.inventory-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
}

.role-table {
    min-width: 680px;
}

.inventory-table th,
.inventory-table td {
    padding: 5px 6px;
}

.inventory-table tr.inventory-overhead-row td {
    background: linear-gradient(90deg, rgba(125, 255, 101, 0.075), rgba(125, 255, 101, 0.025) 42%, transparent 100%);
    box-shadow: inset 3px 0 0 rgba(125, 255, 101, 0.32);
}

.inventory-table tr.inventory-overhead-row:hover td {
    background: linear-gradient(90deg, rgba(125, 255, 101, 0.12), rgba(125, 255, 101, 0.04) 44%, transparent 100%);
}

.inventory-table tr.inventory-overstock-row td {
    background: linear-gradient(90deg, rgba(255, 82, 82, 0.12), rgba(255, 82, 82, 0.04) 42%, transparent 100%);
    box-shadow: inset 3px 0 0 rgba(255, 82, 82, 0.48);
}

.inventory-table tr.inventory-overstock-row:hover td {
    background: linear-gradient(90deg, rgba(255, 82, 82, 0.17), rgba(255, 82, 82, 0.06) 44%, transparent 100%);
}

.inventory-table .inventory-item-col {
    width: auto;
    min-width: 128px;
    text-align: left;
}

.inventory-item-link {
    color: var(--text);
    text-decoration: none;
}

.inventory-item-link:hover {
    text-decoration: underline;
}

.inventory-table .inventory-price-col {
    width: 86px;
    min-width: 82px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.inventory-table .inventory-rotated-total {
    display: inline-block;
    min-width: 3.8em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.price-list-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
    border-collapse: collapse;
}

.price-list-table th,
.price-list-table td {
    vertical-align: top;
}

.price-col-item {
    width: 1%;
}

.price-col-market {
    width: 14%;
}

.price-col-regular {
    width: 17%;
}

.price-col-regular-over {
    width: 10%;
}

.price-col-premium {
    width: 17%;
}

.price-col-premium-over {
    width: 8%;
}

.price-cell-item,
.inventory-item-link {
    white-space: nowrap;
}

.price-list-table th:nth-child(n + 2),
.price-list-table td:nth-child(n + 2) {
    text-align: right;
}

.price-list-table th:nth-child(4),
.price-list-table td:nth-child(4),
.price-list-table th:nth-child(6),
.price-list-table td:nth-child(6) {
    border-left: 1px solid rgba(125, 255, 101, 0.16);
    padding-left: 12px;
    text-align: left;
}

.price-list-banner {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(125, 255, 101, 0.22);
    border-radius: 12px;
    background: rgba(125, 255, 101, 0.06);
}

.price-list-banner strong {
    color: var(--accent);
    font-size: 0.92rem;
}

.price-list-banner span {
    color: var(--muted);
    font-size: 0.8rem;
}

.price-list-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: var(--accent);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.price-list-price strong {
    color: inherit;
}

.price-list-average {
    color: var(--muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.price-list-premium {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.price-list-premium strong {
    color: var(--warning);
    font-variant-numeric: tabular-nums;
}

.price-list-premium .small {
    color: var(--muted);
    font-size: 0.72rem;
}

.price-list-price .small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1;
}

.price-list-over {
    color: var(--muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: left;
}

.price-list-table tr.price-list-overstock-row td {
    background: linear-gradient(90deg, rgba(255, 82, 82, 0.12), rgba(255, 82, 82, 0.04) 42%, transparent 100%);
    box-shadow: inset 3px 0 0 rgba(255, 82, 82, 0.48);
}

.price-list-table tr.price-list-overstock-row:hover td {
    background: linear-gradient(90deg, rgba(255, 82, 82, 0.17), rgba(255, 82, 82, 0.06) 44%, transparent 100%);
}

.how-to-sell-page {
    max-width: 1120px;
}

.how-sell-toc,
.how-sell-section {
    gap: 12px;
}

.how-sell-toc-links,
.how-sell-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.how-sell-section p {
    max-width: 900px;
    color: var(--text);
}

.how-sell-flow {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 22px;
    color: var(--text);
}

.how-sell-flow li::marker {
    color: var(--accent);
    font-weight: 800;
}

.discord-example {
    border: 1px solid rgba(115, 255, 123, 0.22);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(2, 8, 4, 0.82);
    max-width: 680px;
}

.discord-example-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(115, 255, 123, 0.18);
    color: var(--muted);
}

.discord-example-head strong {
    color: var(--text);
}

.discord-example-body {
    padding: 10px;
}

.discord-example-body p {
    margin-top: 6px;
    color: var(--muted);
}

.price-list-status-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-left: 8px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 82, 82, 0.36);
    border-radius: 999px;
    background: rgba(255, 82, 82, 0.12);
    color: #ff9b9b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.header-traders {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    gap: 5px;
    max-width: min(520px, 100%);
}

.header-trader-label {
    flex-basis: 100%;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: right;
    text-transform: uppercase;
}

.trader-row {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(115, 255, 123, 0.04);
    text-decoration: none;
}

.trader-row:hover {
    border-color: rgba(164, 255, 142, 0.35);
}

.trader-signature {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.inventory-table .inventory-total-col,
.inventory-table .inventory-player-col {
    width: 34px;
    min-width: 30px;
    max-width: 54px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.inventory-table th.inventory-total-col {
    color: var(--text);
}

.inventory-table th.inventory-player-col {
    height: 94px;
    vertical-align: bottom;
    white-space: normal;
    line-height: 1;
}

.inventory-table th.inventory-player-col {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.inventory-player-name,
.inventory-refresh-age {
    display: inline-block;
}

.inventory-refresh-age {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 600;
    opacity: 0.72;
}

.field-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.content-editor-form,
.content-snippet-group {
    display: grid;
    gap: 12px;
}

.content-snippet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

.content-snippet-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(3, 11, 4, 0.62);
}

.content-snippet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.content-snippet-head h3 {
    margin: 0;
    font-size: 0.96rem;
}

.content-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.content-toolbar button,
.small-button {
    padding: 4px 8px;
    font-size: 0.78rem;
}

.content-wysiwyg {
    min-height: 118px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(8, 28, 10, 0.96);
    color: var(--text);
    line-height: 1.4;
}

.content-wysiwyg:focus {
    outline: none;
    border-color: rgba(125, 255, 101, 0.5);
    box-shadow: 0 0 0 1px rgba(125, 255, 101, 0.18);
}

.content-wysiwyg p {
    margin: 0 0 0.6em;
}

.content-wysiwyg p:last-child {
    margin-bottom: 0;
}

.content-sticky-actions {
    position: sticky;
    bottom: 10px;
    z-index: 10;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(3, 11, 4, 0.94);
    box-shadow: var(--shadow);
}

.member-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.personal-tracker-grid {
    grid-template-columns: minmax(260px, 1.6fr) minmax(160px, 0.8fr) minmax(150px, 0.7fr) minmax(140px, 0.6fr) auto;
    align-items: end;
}

.compact-settings-grid {
    grid-template-columns: minmax(180px, 260px) auto;
    align-items: end;
}

.personal-watch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.personal-watch-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(4, 15, 6, 0.76);
}

.personal-watch-chip span {
    display: grid;
    gap: 2px;
}

.personal-watch-chip em {
    color: var(--muted);
    font-style: normal;
    font-size: 0.8rem;
}

.meta-list {
    display: grid;
    gap: 4px;
}

.trade-grid {
    display: grid;
    gap: 12px;
}

.trade-request-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
}

.trade-request-table th,
.trade-request-table td {
    white-space: normal;
}

.trade-request-table td:last-child,
.trade-request-table th:last-child {
    white-space: nowrap;
}

.trade-request-form textarea {
    min-height: 120px;
    resize: vertical;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.trade-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(8, 24, 9, 0.92), rgba(4, 15, 6, 0.98)),
        var(--panel);
}

.trade-card-head,
.receipt-side-head,
.receipt-total,
.receipt-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: baseline;
}

.trade-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.trade-card h3 {
    margin: 0;
    font-size: 1.08rem;
}

.trade-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.trade-total {
    display: grid;
    gap: 2px;
    justify-items: end;
    text-align: right;
}

.trade-total span,
.trade-meta,
.receipt-line em {
    color: var(--muted);
    font-size: 0.8rem;
    font-style: normal;
}

.trade-total strong {
    font-size: 1.18rem;
    font-variant-numeric: tabular-nums;
}

.copy-value-button {
    padding: 4px 9px;
    font-size: 0.76rem;
    background: rgba(125, 255, 101, 0.1);
}

.trade-meta {
    display: flex;
    gap: 8px 14px;
    flex-wrap: wrap;
}

.trade-meta b {
    color: var(--text);
}

.trade-receipt {
    display: grid;
    gap: 10px;
}

.receipt-side {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(3, 11, 4, 0.62);
}

.receipt-side-head {
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line);
}

.receipt-side-head span,
.receipt-line strong,
.receipt-total strong {
    font-variant-numeric: tabular-nums;
}

.receipt-line {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 2px 0;
}

.receipt-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receipt-total {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.receipt-total .small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.2;
}

.market-item-link {
    display: grid;
    grid-template-columns: 34px minmax(120px, 1fr);
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
}

.market-item-link strong,
.market-item-link em {
    display: block;
}

.market-item-link em {
    color: var(--muted);
    font-style: normal;
    font-size: 0.8rem;
}

.market-item-link:hover strong {
    text-decoration: underline;
}

.market-item-image {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(115, 255, 123, 0.06);
    padding: 3px;
}

.quantity-line {
    display: block;
    font-variant-numeric: tabular-nums;
}

.quantity-market-link {
    color: inherit;
    text-decoration: none;
}

.quantity-market-link:hover {
    text-decoration: underline;
}

.quantity-line em {
    color: var(--muted);
    font-style: normal;
    font-size: 0.8rem;
}

.market-row-hidden {
    display: none;
}

.market-row-last-clicked > td {
    background: rgba(164, 255, 142, 0.055);
    box-shadow: inset 3px 0 0 rgba(164, 255, 142, 0.34);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.bazaar-listings {
    display: grid;
    gap: 4px;
    min-width: 260px;
    margin-top: 8px;
}

.bazaar-listing-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) auto;
    gap: 2px 10px;
    align-items: baseline;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(3, 11, 4, 0.74);
}

.bazaar-listing-seller {
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.bazaar-listing-seller:hover {
    text-decoration: underline;
}

.bazaar-listing-row strong {
    font-variant-numeric: tabular-nums;
}

.bazaar-listing-row span,
.bazaar-listing-row em,
.bazaar-listing-empty {
    color: var(--muted);
    font-style: normal;
    font-size: 0.78rem;
}

.bazaar-listing-row em {
    text-align: right;
}

.market-value-updated {
    animation: marketValueFade 0.85s ease-out;
}

.intro-preview-panel {
    gap: 14px;
    background:
        radial-gradient(circle at top right, rgba(125, 255, 101, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(8, 24, 9, 0.96), rgba(4, 15, 6, 0.98));
}

.intro-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.intro-preview-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(2, 8, 3, 0.95);
    box-shadow: inset 0 1px 0 rgba(217, 255, 216, 0.04);
}

.intro-preview-topbar {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(115, 255, 123, 0.14);
    background: rgba(6, 18, 7, 0.98);
}

.intro-preview-topbar span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(125, 255, 101, 0.55);
}

.intro-preview-frame {
    display: grid;
    align-content: start;
    align-items: start;
    gap: 12px;
    padding: 12px;
}

.intro-role-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    justify-self: start;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(115, 255, 123, 0.18);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(6, 18, 7, 0.9);
}

.intro-role-pill.regular {
    color: #d9ffd8;
    border-color: rgba(120, 184, 121, 0.28);
}

.intro-role-pill.premium {
    color: #d7ff8a;
    border-color: rgba(215, 255, 138, 0.28);
}

.intro-role-pill.trader {
    color: #7dff65;
    border-color: rgba(125, 255, 101, 0.34);
    box-shadow: inset 0 0 0 1px rgba(125, 255, 101, 0.08);
}

.intro-preview-header {
    display: grid;
    gap: 4px;
    align-items: start;
}

.intro-preview-header strong {
    font-size: 0.96rem;
}

.intro-preview-header em {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: normal;
    text-align: left;
}

.intro-preview-kicker {
    display: grid;
    gap: 3px;
    align-items: start;
}

.intro-preview-kicker span {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
}

.intro-preview-kicker em {
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
    text-align: left;
}

.intro-preview-stat-row,
.intro-trade-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.intro-trade-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intro-preview-stat-row.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intro-preview-stat-row div,
.intro-trade-summary div {
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(115, 255, 123, 0.14);
    border-radius: 10px;
    background: rgba(6, 18, 7, 0.72);
}

.intro-preview-stat-row span,
.intro-trade-summary span,
.intro-preview-list-row em {
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
}

.intro-preview-stat-row strong,
.intro-trade-summary strong {
    font-size: 0.95rem;
}

.intro-preview-table {
    display: grid;
    gap: 1px;
    border: 1px solid rgba(115, 255, 123, 0.14);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(115, 255, 123, 0.08);
}

.intro-preview-table-head,
.intro-preview-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(70px, 0.8fr) minmax(58px, 0.6fr);
    gap: 8px;
    padding: 8px 10px;
    background: rgba(6, 18, 7, 0.94);
    align-items: center;
}

.intro-preview-table.compact .intro-preview-table-head,
.intro-preview-table.compact .intro-preview-table-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(70px, 0.8fr) minmax(70px, 0.8fr);
}

.intro-preview-table-head {
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.intro-preview-table-row {
    font-size: 0.82rem;
}

.intro-preview-table.tall .intro-preview-table-row,
.intro-preview-table.tall .intro-preview-table-head {
    padding-top: 9px;
    padding-bottom: 9px;
}

.intro-preview-table-row.total {
    box-shadow: inset 0 1px 0 rgba(125, 255, 101, 0.1);
}

.intro-preview-table-row.total span:first-child,
.intro-preview-table-row.total span:nth-child(2),
.intro-preview-table-row.total span:nth-child(3) {
    font-weight: 700;
}

.intro-signal-stack,
.intro-preview-list {
    display: grid;
    gap: 8px;
}

.intro-signal-chip,
.intro-preview-list-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(115, 255, 123, 0.14);
    border-radius: 10px;
    background: rgba(6, 18, 7, 0.72);
    font-size: 0.82rem;
}

.intro-signal-chip.good {
    color: #dfffd1;
}

.intro-signal-chip.neutral {
    color: var(--text);
}

.intro-signal-chip.accent {
    color: #d7ff8a;
}

.intro-preview-list-row strong {
    font-size: 0.84rem;
}

.intro-preview-list-row.good {
    box-shadow: inset 3px 0 0 rgba(125, 255, 101, 0.34);
}

@keyframes marketValueFade {
    0% {
        background: rgba(164, 255, 142, 0.18);
    }

    100% {
        background: transparent;
    }
}

@media (max-width: 900px) {
    .page-shell,
    .auth-shell {
        width: min(100%, calc(100% - 12px));
        margin: 10px auto 18px;
    }

    .hero-card,
    .panel,
    .stat-card {
        border-radius: 18px;
    }

    .hero-card,
    .hero-brand {
        flex-direction: column;
        align-items: flex-start;
    }

    .member-header-actions {
        justify-items: start;
    }

    .header-traders {
        justify-content: flex-start;
        max-width: 100%;
    }

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

    .get-premium-grid {
        grid-template-columns: 1fr;
    }

    .intro-preview-stat-row,
    .intro-trade-summary {
        grid-template-columns: 1fr;
    }

    .header-trader-label {
        text-align: left;
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
    }

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

    .graph-picker {
        width: 100%;
    }

    .intro-showcases {
        grid-template-columns: 1fr;
    }

    .intro-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .intro-hero-side {
        justify-items: start;
        width: 100%;
    }

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

    .screenshot-tile-wide {
        grid-column: auto;
    }

    .intro-access-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .analytics-sidebar {
        position: static;
    }

    .analytics-metric-grid {
        grid-template-columns: 1fr;
    }

    .personal-tracker-grid {
        grid-template-columns: 1fr;
    }

    .compact-settings-grid {
        grid-template-columns: 1fr;
    }

    .trade-card-head,
    .receipt-total,
    .receipt-line {
        grid-template-columns: 1fr;
    }

    .trade-alert-shell {
        flex-direction: column;
        align-items: flex-start;
    }

    .trade-total {
        justify-items: start;
        text-align: left;
    }

    .public-price-page .table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-color: rgba(125, 255, 101, 0.55) rgba(4, 15, 6, 0.86);
        scrollbar-width: thin;
    }

    .public-price-page .price-list-table {
        width: max-content;
        min-width: 760px;
    }
}

@media (max-width: 600px) {
    .table-wrap {
        overflow-x: visible;
    }

    .public-price-page .table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .public-price-page .price-list-table {
        width: max-content;
        min-width: 720px;
    }

    .inventory-table,
    .inventory-table tbody,
    .inventory-table tr,
    .inventory-table th,
    .inventory-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .inventory-table thead {
        display: none;
    }

    .inventory-table tbody {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
        gap: 10px;
    }

    .inventory-table tr {
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: rgba(4, 15, 6, 0.88);
        box-shadow: var(--shadow);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-table td {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3px;
        align-items: start;
        white-space: normal;
        padding: 8px 9px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .inventory-table td[colspan] {
        display: block;
        grid-column: 1 / -1;
    }

    .inventory-table td[colspan]::before {
        content: none;
    }

    .inventory-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .inventory-table td[data-label="Item"] {
        padding-top: 10px;
    }

    .inventory-table td[data-label="Item"],
    .inventory-table td[data-label="Quantity"] {
        grid-column: 1 / -1;
    }

    .inventory-table td[data-label="Item"] .market-item-link,
    .inventory-table td[data-label="Quantity"] .quantity-line,
    .inventory-table td[data-label="Quantity"] .bazaar-listings {
        min-width: 0;
    }

    .inventory-table td[data-label="Quantity"] {
        grid-template-columns: 1fr;
    }

    .market-item-link {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 7px;
    }

    .market-item-image {
        width: 26px;
        height: 26px;
    }

    .market-item-link strong {
        white-space: normal;
        font-size: 0.92rem;
    }

    .bazaar-listings {
        min-width: 0;
        margin-top: 6px;
    }

    .bazaar-listing-row {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 4px 7px;
        border-radius: 8px;
        gap: 2px 8px;
    }

    .quantity-line em,
    .bazaar-listing-row span,
    .bazaar-listing-row em,
    .bazaar-listing-empty {
        font-size: 0.74rem;
    }

    .inventory-dashboard .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .inventory-dashboard .inventory-table {
        display: table;
        width: auto;
        min-width: 760px;
    }

    .inventory-dashboard .inventory-table tbody,
    .inventory-dashboard .inventory-table tr {
        display: table-row-group;
        width: auto;
        min-width: 0;
    }

    .inventory-dashboard .inventory-table thead {
        display: table-header-group;
    }

    .inventory-dashboard .inventory-table tbody {
        display: table-row-group;
    }

    .inventory-dashboard .inventory-table tr {
        display: table-row;
        margin: 0;
        border: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .inventory-dashboard .inventory-table th,
    .inventory-dashboard .inventory-table td {
        display: table-cell;
        width: auto;
        min-width: 0;
        white-space: nowrap;
        padding: 5px 6px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .inventory-dashboard .inventory-table td::before {
        content: none;
    }

    .inventory-dashboard .inventory-table td[colspan] {
        display: table-cell;
    }
}