:root {
    --font-sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bg: #0c0c0b;
    --bg-elevated: #171412;
    --surface: rgba(33, 25, 22, 0.86);
    --surface-strong: #211916;
    --surface-soft: #2c211c;
    --surface-highlight: rgba(251, 124, 16, 0.11);
    --border: rgba(255, 173, 69, 0.18);
    --border-strong: rgba(251, 124, 16, 0.46);
    --text-primary: #fff8ee;
    --text-secondary: #d8bea1;
    --text-muted: #8f7864;
    --accent: #fb7c10;
    --accent-strong: #ffad45;
    --auth-orange-600: #dd6508;
    --accent-soft: rgba(251, 124, 16, 0.14);
    --success: #49c27a;
    --warning: #ffad45;
    --danger: #ef5b4e;
    --cream-50: #fff8ee;
    --cream-100: #f8ead4;
    --cream-200: #edd7bb;
    --copper: #a8541f;
    --shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 13.5px;
    background:
        radial-gradient(circle at top, rgba(251, 124, 16, 0.18), transparent 28%),
        linear-gradient(180deg, #171412 0%, #0c0c0b 100%);
    color: var(--text-primary);
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 16px 14px;
    border-right: 1px solid var(--border);
    background: rgba(23, 20, 18, 0.78);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(33, 25, 22, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
    cursor: default;
}

.sidebar-logo-mark {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 0;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.sidebar-brand:hover .sidebar-logo-mark {
    transform: scale(0.92);
}

.sidebar-brand-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.sidebar-brand-subtitle,
.sidebar-section-label,
.metric-meta,
.panel-kicker,
.table-subtle,
.eyebrow,
.empty-state p,
.sidebar-card p {
    color: var(--text-muted);
}

.eyebrow {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.sidebar-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0 12px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: 0.2s ease;
}

.sidebar-link:hover {
    background: rgba(44, 33, 28, 0.86);
    border-color: var(--border);
    color: var(--text-primary);
}

.sidebar-link.is-active {
    background: rgba(251, 124, 16, 0.10);
    border-color: rgba(251, 124, 16, 0.24);
    color: var(--text-primary);
    box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-footer {
    flex-shrink: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(33, 25, 22, 0.5);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.sidebar-footer-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-footer-row i {
    width: 14px;
    text-align: center;
    color: var(--accent);
    font-size: 11px;
}

.sidebar-footer-row span {
    color: var(--text-secondary);
}

.btn-logout {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 12px;
    transition: color 0.2s;
}

.btn-logout:hover {
    color: var(--danger);
}

.btn-logout i {
    width: 14px;
    text-align: center;
    font-size: 11px;
}

.sidebar-card,
.metric-card,
.panel,
.table-shell,
.auth-card,
.hero-card,
.summary-card,
.list-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(33, 25, 22, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
}

.sidebar-card {
    margin-top: auto;
    padding: 16px;
}

.sidebar-card-title,
.panel-title,
.summary-title,
.auth-card h2,
.hero-card h1,
.hero-card h2 {
    margin: 0 0 8px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
}

.auth-card h2 {
    font-family: var(--font-sans);
    font-size: 24px;
    letter-spacing: 0;
}

.app-main {
    min-width: 0;
    padding: 20px 24px;
}

.app-content {
    display: grid;
    gap: 18px;
}

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.topbar h1,
.hero-card h1,
.auth-card h2 {
    margin-top: 6px;
    font-family: var(--font-sans);
    letter-spacing: 0;
}

.topbar p,
.hero-card p,
.auth-card p,
.summary-copy,
.panel-copy {
    margin: 0;
    color: var(--text-secondary);
}

.topbar-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.metrics-grid,
.grid-2,
.grid-3,
.shop-grid {
    display: grid;
    gap: 18px;
}

.metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 24px;
}

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

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

.shop-grid {
    grid-template-columns: 240px minmax(0, 1fr);
}

.metric-card {
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
}

.metric-icon,
.panel-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.metric-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.metric-value {
    margin-top: 6px;
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0;
}

.panel,
.summary-card,
.list-card {
    padding: 22px;
}

.panel-head,
.summary-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.btn,
.icon-btn {
    border: 1px solid transparent;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
}

.btn-primary {
    background: linear-gradient(135deg, #fb7c10, #ffad45);
    color: #fff8ee;
    box-shadow: 0 16px 32px rgba(251, 124, 16, 0.25);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    box-shadow: 0 12px 36px rgba(251, 124, 16, 0.45), 0 0 0 1px rgba(255, 173, 69, 0.28);
}

.btn-secondary {
    border-color: var(--border);
    background: rgba(33, 25, 22, 0.82);
}

.btn-ghost {
    color: var(--text-secondary);
    background: transparent;
}

.btn-danger {
    background: rgba(239, 102, 120, 0.12);
    border-color: rgba(239, 102, 120, 0.24);
    color: #ffb4be;
}

.btn:hover,
.icon-btn:hover,
.sidebar-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
}

.btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.icon-btn,
.sidebar-toggle {
    width: 44px;
    height: 44px;
    justify-content: center;
    background: rgba(33, 25, 22, 0.84);
    color: var(--text-primary);
    border-color: var(--border);
}

.sidebar-toggle {
    display: none;
}

.filters-card {
    position: sticky;
    top: 28px;
}

.form-grid {
    display: grid;
    gap: 14px;
}

.form-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
    display: grid;
    gap: 8px;
}

.field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.search-input {
    min-width: 180px;
    flex: 1 1 180px;
}

.input,
.select,
.textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(12, 12, 11, 0.68);
    color: var(--text-primary);
    padding: 13px 14px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(251, 124, 16, 0.14);
}

.segmented-control,
.crypto-grid,
.format-builder-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.format-builder-grid .format-token {
    font-size: 0.75rem;
    padding: 6px 10px;
}
[data-format-output] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8rem;
    word-break: break-all;
}

.segment,
.crypto-option {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(12, 12, 11, 0.68);
    color: var(--text-secondary);
    padding: 10px 12px;
    cursor: pointer;
    transition: 0.2s ease;
}

.segment:hover,
.segment.is-active,
.crypto-option:hover,
.crypto-option.is-active {
    border-color: var(--accent);
    background: rgba(251, 124, 16, 0.12);
    color: var(--text-primary);
}

.crypto-option {
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.wallet-layout {
    align-items: start;
}

.wallet-crypto-grid .crypto-option {
    justify-content: space-between;
}

.wallet-crypto-grid .crypto-option strong {
    color: var(--text-primary);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.wallet-address-panel {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 173, 69, 0.14);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    display: grid;
    gap: 14px;
}

.wallet-address-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.wallet-address-code {
    min-height: 96px;
    margin: 0;
}

.compact-summary {
    padding: 16px;
}

.table-shell {
    overflow: hidden;
}

.table-toolbar {
    padding: 18px 22px 0;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.table-wrap {
    overflow-x: auto;
    padding: 18px 22px 22px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 173, 69, 0.10);
    text-align: left;
    white-space: nowrap;
}

th {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

td {
    color: var(--text-primary);
}

tbody tr:hover {
    background: rgba(251, 124, 16, 0.06);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge.is-blue {
    background: rgba(251, 124, 16, 0.14);
    color: #ffbf73;
}

.badge.is-green {
    background: rgba(47, 208, 164, 0.14);
    color: #9bf4da;
}

.badge.is-red {
    background: rgba(239, 102, 120, 0.14);
    color: #ffb2bd;
}

.badge.is-amber {
    background: rgba(245, 184, 91, 0.14);
    color: #ffd694;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 173, 69, 0.10);
}

.cart-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cart-item-meta,
.stack {
    display: grid;
    gap: 6px;
}

.summary-list,
.detail-list {
    display: grid;
    gap: 12px;
}

.summary-row,
.detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
}

.summary-row strong,
.detail-row strong {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: right;
}

.progress-list {
    display: grid;
    gap: 14px;
}

.progress-item {
    display: grid;
    gap: 8px;
}

.progress-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
}

.progress-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.progress-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fb7c10, #a8541f);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 48px 24px;
    position: relative;
    overflow: hidden;
}

.auth-bg-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
    animation: auth-orb-float 20s ease-in-out infinite;
}

.auth-bg-orb-1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, #fb7c10 0%, #dd6508 100%);
    top: -200px;
    right: -100px;
}

.auth-bg-orb-2 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #a8541f 0%, #fb7c10 100%);
    bottom: -150px;
    left: -100px;
    animation-delay: -7s;
}

@keyframes auth-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 30px) scale(1.02); }
}

.auth-grid-pattern {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

.hero-card {
    display: none;
}

.hero-copy {
    max-width: 560px;
}

.hero-copy h1 {
    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.96;
    letter-spacing: 0;
}

.hero-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(251, 124, 16, 0.12);
    border: 1px solid rgba(255, 173, 69, 0.22);
    color: #f8ead4;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: min(100%, 480px);
    padding: 48px 44px;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    animation: auth-card-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-card-inner {
    width: 100%;
    display: grid;
    gap: 28px;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: auth-card-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.auth-logo-mark {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 0;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.auth-logo:hover .auth-logo-mark {
    transform: scale(0.92);
}

.auth-logo-text {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-primary);
}

.link-accent {
    color: var(--accent);
    text-decoration: none;
}
.link-accent:hover {
    text-decoration: underline;
}

.auth-card-header {
    text-align: center;
}

.auth-form {
    display: grid;
    gap: 20px;
}

.auth-form .field {
    gap: 12px;
}

.captcha-panel {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.captcha-media {
    flex: 1;
    min-width: 0;
    height: 72px;
    border: 1px solid rgba(251, 124, 16, 0.28);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(33, 25, 22, 0.96) 0%, rgba(44, 33, 28, 0.92) 100%);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.captcha-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 50%, rgba(255, 173, 69, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 85% 50%, rgba(168, 84, 31, 0.14) 0%, transparent 45%);
    pointer-events: none;
    z-index: 1;
}

.captcha-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    position: relative;
    z-index: 0;
}

.field-inline {
    position: relative;
}

.field-inline i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.field-inline .input {
    padding-left: 42px;
}

.auth-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-meta span {
    cursor: default;
    user-select: none;
}

.form-status {
    min-height: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.form-status.is-error {
    color: #ffb2bd;
}

.form-status.is-success {
    color: #9bf4da;
}

.captcha-refresh-btn {
    flex-shrink: 0;
    width: 52px;
    height: 72px;
    border: 1px solid rgba(251, 124, 16, 0.28);
    border-radius: 14px;
    background: rgba(33, 25, 22, 0.82);
    color: var(--accent-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    font-size: 16px;
}

.captcha-refresh-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(251, 124, 16, 0.88) 0%, rgba(255, 173, 69, 0.85) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.captcha-refresh-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(251, 124, 16, 0.35);
}

.captcha-refresh-btn:hover::before {
    opacity: 1;
}

.captcha-refresh-btn i {
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.captcha-refresh-btn:hover i {
    transform: rotate(180deg);
}

.form-status.is-error,
.form-status.is-success {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-status.is-error::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f071";
    font-size: 11px;
}

.form-status.is-success::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00c";
    font-size: 11px;
}

.auth-form .btn {
    justify-content: center;
}

.auth-form .input {
    padding: 15px 16px;
    font-size: 15px;
}

.auth-form .field-inline .input {
    padding-left: 44px;
}

.auth-form .btn-primary {
    position: relative;
    box-shadow: 0 8px 28px rgba(251, 124, 16, 0.45);
    overflow: hidden;
}

.auth-form .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.auth-form .btn-primary:hover::after {
    opacity: 1;
}

.auth-form .btn-primary:hover {
    box-shadow: 0 12px 36px rgba(251, 124, 16, 0.48), 0 0 0 1px rgba(255, 173, 69, 0.34);
}

.text-link {
    color: #ffad45;
}

.token-modal {
    position: fixed;
    inset: 0;
    background: rgba(12, 12, 11, 0.78);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: 24px;
}

.token-modal-box {
    width: min(100%, 520px);
    border: 1px solid rgba(255, 173, 69, 0.22);
    border-radius: var(--radius-lg);
    background: rgba(33, 25, 22, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    padding: 24px;
}

.token-modal-box h3 {
    margin: 6px 0 10px;
    font-family: var(--font-sans);
    font-size: 24px;
    letter-spacing: 0;
}

.token-modal-box p {
    margin: 0 0 18px;
    color: var(--text-secondary);
}

.token-output {
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
    background: rgba(251, 124, 16, 0.08);
    color: #fff8ee;
    font-weight: 700;
    word-break: break-all;
}

.app-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    min-width: 240px;
    max-width: 420px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(23, 20, 18, 0.96);
    color: var(--text-primary);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.app-toast.is-success {
    border-color: rgba(47, 208, 164, 0.28);
}

.app-toast.is-error {
    border-color: rgba(239, 102, 120, 0.28);
}

.empty-state {
    padding: 28px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
}

.empty-state h3,
.empty-state strong {
    font-family: var(--font-sans);
}

.toolbar-cluster {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toolbar-cluster-wrap {
    flex-wrap: wrap;
    justify-content: space-between;
}

.row-actions {
    display: flex;
    justify-content: flex-end;
}

.limit-switcher {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pagination-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.pagination-row > div {
    display: flex;
    gap: 10px;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pagination-pages {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.page-chip {
    min-width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: rgba(33, 25, 22, 0.82);
    color: var(--text-secondary);
    transition: 0.2s ease;
}

.page-chip:hover,
.page-chip.is-active {
    border-color: var(--accent);
    color: var(--text-primary);
    background: rgba(251, 124, 16, 0.12);
}

.page-chip.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.overlay-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(12, 12, 11, 0.82);
    backdrop-filter: blur(10px);
}

.overlay-card {
    width: min(100%, 760px);
    max-height: calc(100vh - 56px);
    overflow: auto;
    border: 1px solid rgba(255, 173, 69, 0.22);
    border-radius: var(--radius-xl);
    background: rgba(33, 25, 22, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    padding: 24px;
    display: grid;
    gap: 20px;
}

.overlay-card-wide {
    width: min(100%, 1120px);
}

.overlay-card-tall {
    max-height: calc(100vh - 40px);
}

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

.drawer-grid > * {
    overflow: hidden;
    min-width: 0;
}
.drawer-grid .detail-row strong,
.drawer-grid .detail-value {
    word-break: break-all;
    overflow-wrap: anywhere;
}

.mini-list {
    display: grid;
    gap: 12px;
}

.mini-list-item {
    padding: 14px;
    border: 1px solid rgba(255, 173, 69, 0.10);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
}

.admin-settings-form {
    height: 100%;
}

.chat-thread {
    min-height: 360px;
    max-height: 52vh;
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(12, 12, 11, 0.52);
    display: grid;
    gap: 12px;
}

.message-bubble {
    max-width: min(82%, 720px);
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    display: grid;
    gap: 8px;
}

.message-bubble.is-admin {
    margin-left: auto;
    background: rgba(251, 124, 16, 0.16);
    border-color: rgba(255, 173, 69, 0.28);
}

.message-bubble.is-user {
    margin-right: auto;
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.signal-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.02);
}

.signal-high {
    background: #ff5d73;
    box-shadow: 0 0 0 4px rgba(239, 102, 120, 0.12), 0 0 16px rgba(239, 102, 120, 0.4);
}

.signal-medium {
    background: #f5b85b;
    box-shadow: 0 0 0 4px rgba(245, 184, 91, 0.12), 0 0 16px rgba(245, 184, 91, 0.26);
}

.signal-low {
    background: #a8541f;
    box-shadow: 0 0 0 4px rgba(168, 84, 31, 0.12), 0 0 16px rgba(168, 84, 31, 0.24);
}

.signal-clean {
    background: #2fd0a4;
    box-shadow: 0 0 0 4px rgba(47, 208, 164, 0.12), 0 0 16px rgba(47, 208, 164, 0.2);
}

.warning-banner {
    border: 1px solid rgba(239, 102, 120, 0.22);
    border-radius: var(--radius-lg);
    padding: 18px;
    display: grid;
    gap: 12px;
    background: rgba(239, 102, 120, 0.08);
}

.warning-banner strong {
    font-size: 15px;
}

.warning-banner p {
    margin: 0;
    color: var(--text-secondary);
}

.warning-banner.is-high {
    border-color: rgba(239, 102, 120, 0.26);
    background: rgba(239, 102, 120, 0.12);
}

.warning-banner.is-medium {
    border-color: rgba(245, 184, 91, 0.26);
    background: rgba(245, 184, 91, 0.12);
}

.warning-banner.is-low {
    border-color: rgba(168, 84, 31, 0.28);
    background: rgba(168, 84, 31, 0.12);
}

.warning-source-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.warning-source-list span {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 12px;
}

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

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

.preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
    gap: 16px;
}

.preview-panel {
    border: 1px solid rgba(255, 173, 69, 0.10);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    padding: 14px;
    display: grid;
    gap: 12px;
    min-height: 220px;
}

.code-scroll {
    margin: 0;
    min-height: 170px;
    max-height: 360px;
    overflow: auto;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 173, 69, 0.10);
    background: rgba(12, 12, 11, 0.78);
    color: #fff8ee;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
}

.mt-section {
    margin-top: 18px;
}

.mb-0 {
    margin-bottom: 0;
}

.three-col {
    grid-template-columns: repeat(3, 1fr);
}

.truncate-cell {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1280px) {
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-grid,
    .cart-layout,
    .preview-grid,
    .action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1040px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 50;
        width: min(320px, 88vw);
        transform: translateX(-100%);
        transition: transform 0.24s ease;
    }

    .app-shell.sidebar-open .sidebar {
        transform: translateX(0);
    }

    /* Backdrop to dismiss the open sidebar by tapping the page */
    .app-shell::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(8, 6, 5, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 49;
    }
    .app-shell.sidebar-open::before {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .topbar {
        flex-direction: column;
    }

    /* On mobile the desktop "collapse rail" doesn't make sense.
       The same chevron in the sidebar header is repurposed as a CLOSE button. */
    body:not(.auth-body) .app-shell.sidebar-collapsed {
        grid-template-columns: 1fr; /* never collapse to rail on mobile */
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar {
        width: min(320px, 88vw);
        padding: 18px 12px;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-link-label,
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-section-label > span,
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-brand-title {
        display: inline; /* keep labels visible on mobile overlay */
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-link {
        justify-content: flex-start;
        padding: 7px 10px;
        gap: 11px;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-section-label::before {
        display: none;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-section-label {
        text-align: left;
        padding: 14px 12px 6px;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-collapse-btn {
        display: inline-flex; /* always show — used as close on mobile */
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-badge {
        position: static;
        transform: none;
    }

    /* Hide the topbar's expand chevron on mobile (no rail mode here) */
    body:not(.auth-body) .topbar-expand-btn {
        display: none !important;
    }
}

@media (max-width: 860px) {
    .grid-2,
    .grid-3,
    .form-grid.two-col,
    .drawer-grid {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        padding: 24px 16px;
        gap: 24px;
    }

    .auth-card {
        padding: 36px 28px;
    }

    .hero-copy h1 {
        font-size: 42px;
    }

    .app-main {
        padding: 18px;
    }

    .pagination-bar,
    .toolbar-cluster,
    .toolbar-cluster-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input {
        min-width: 0;
        width: 100%;
    }

    .overlay-modal {
        padding: 12px;
    }
}

/* News feed */
.news-feed {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.news-item {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
}

.news-item.is-important {
    border-color: rgba(245, 184, 91, 0.36);
    background: rgba(245, 184, 91, 0.04);
}

.news-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.news-item-title {
    font-size: 16px;
    color: var(--text-primary);
}

.news-item-body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* FAQ accordion */
.faq-list {
    display: grid;
    gap: 8px;
    padding: 18px;
}

.faq-entry {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.faq-entry[open] {
    border-color: var(--border-strong);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.faq-entry[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 20px 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    animation: faqSlideDown 0.25s ease;
}
@keyframes faqSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.faq-question:hover {
    background: rgba(255,255,255,0.02);
}

.field-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* Upload progress bar */
.upload-progress {
    display: grid;
    gap: 6px;
}

.upload-progress-bar {
    height: 8px;
    border-radius: 99px;
    background: var(--surface-strong);
    overflow: hidden;
}

.upload-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: var(--accent);
    transition: width 0.25s ease;
}

.upload-progress-fill.is-complete {
    background: var(--success);
}

.upload-progress-fill.is-error {
    background: var(--danger);
}

.upload-progress-text {
    font-size: 13px;
    color: var(--text-muted);
    text-align: right;
}

/* === Loader Overlay === */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 12, 11, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.loader-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}
.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === Custom Checkbox / Radio === */
.checkbox-custom, .radio-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    user-select: none;
}
.checkbox-custom input, .radio-custom input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.checkbox-custom .checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.checkbox-custom input:checked + .checkmark {
    background: var(--accent);
    border-color: var(--accent);
}
.checkbox-custom input:checked + .checkmark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.radio-custom .radiomark {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.radio-custom input:checked + .radiomark {
    border-color: var(--accent);
}
.radio-custom input:checked + .radiomark::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

/* === Status Badges === */
.badge.is-active     { background: rgba(16, 185, 129, 0.14); color: #34d399; }
.badge.is-review     { background: rgba(251, 191, 36, 0.14);  color: #fbbf24; }
.badge.is-paused     { background: rgba(156, 163, 175, 0.14); color: #9ca3af; }
.badge.is-rejected   { background: rgba(239, 68, 68, 0.14);   color: #f87171; }
.badge.is-pending    { background: rgba(251, 191, 36, 0.14);  color: #fbbf24; }
.badge.is-completed  { background: rgba(16, 185, 129, 0.14);  color: #34d399; }
.badge.is-failed     { background: rgba(239, 68, 68, 0.14);   color: #f87171; }
.badge.is-processing { background: rgba(251, 124, 16, 0.14);  color: #ffad45; }
/* Role badges */
.badge.is-admin  { background: rgba(239, 68, 68, 0.14);  color: #f87171; }
.badge.is-seller { background: rgba(251, 124, 16, 0.14); color: #ffad45; }
.badge.is-user   { background: rgba(16, 185, 129, 0.14); color: #34d399; }
.badge.is-banned { background: rgba(239, 68, 68, 0.25);  color: #fca5a5; }

/* === Mobile / Tablet (below 860px) === */
@media (max-width: 600px) {
    .metrics-grid { grid-template-columns: 1fr; }
    .form-grid.two-col { grid-template-columns: 1fr; }
    .action-grid { grid-template-columns: 1fr; }
    .overlay-card { margin: 16px; max-width: none; }
    .overlay-card-wide { max-width: none; }
    .table-wrap { font-size: 0.8rem; }
    .topbar-copy h1 { font-size: 1.25rem; }
    .filters-card .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .pagination-bar { flex-direction: column; gap: 8px; }
    .topbar-metrics { grid-template-columns: 1fr; }
    .summary-card { padding: 16px; }
}

/* === Scrollbar Styling === */
.table-wrap, .code-scroll, .chat-messages, .mini-list {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.table-wrap::-webkit-scrollbar,
.code-scroll::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.mini-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.table-wrap::-webkit-scrollbar-track,
.code-scroll::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb,
.code-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* === Misc fixes === */
::selection { color: #fff; background-color: var(--accent); }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* === Metric card hover === */
.metric-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.metric-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); transform: translateY(-1px); }

/* === Password toggle button positioning === */
.field-password { position: relative; }
.field-password .input { padding-right: 44px; }
.field-password [data-toggle-password],
.field-password [data-copy-token-current] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}
.field-password [data-toggle-password]:hover,
.field-password [data-copy-token-current]:hover {
    color: var(--accent-strong);
    background: rgba(251, 124, 16, 0.10);
}
.field-password [data-toggle-password]:focus-visible,
.field-password [data-copy-token-current]:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}
/* Two-button variant: toggle + copy */
.field-password.has-copy .input { padding-right: 80px; }
.field-password.has-copy .fp-toggle { right: 44px; }
.field-password.has-copy .fp-copy { right: 8px; }

/* Cream auth-body overrides for password buttons */
.auth-body .field-password [data-toggle-password],
.auth-body .field-password [data-copy-token-current] {
    color: #a8541f;
}
.auth-body .field-password [data-toggle-password]:hover,
.auth-body .field-password [data-copy-token-current]:hover {
    color: #b94d05;
    background: rgba(251, 124, 16, 0.12);
}

/* Use field-password also inside .field-inline (signin token input) */
.field-inline.field-password { padding-right: 0; }
.field-inline.field-password .input { padding-right: 44px; }

/* === Drag-drop upload area === */
.upload-drop-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.upload-drop-area:hover,
.upload-drop-area.is-dragover {
    border-color: var(--accent);
    background: rgba(251, 124, 16, 0.06);
}
.upload-drop-area i { font-size: 2rem; margin-bottom: 8px; display: block; color: var(--accent); }
.upload-drop-area p { margin: 4px 0; font-weight: 500; color: var(--text-primary); }
.upload-drop-filename {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--surface-strong);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--accent-strong);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* === Clickable mini-list items === */
.mini-list-item[style*="cursor:pointer"]:hover,
.mini-list-item[data-user-base-link]:hover {
    background: rgba(251, 124, 16, 0.08);
    border-radius: var(--radius-sm);
}

/* === Format token active state === */
.format-token.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* === Severity indicators === */
.is-high { color: var(--danger); border-color: var(--danger); }
.is-medium { color: var(--warning); border-color: var(--warning); }
.is-low { color: var(--success); border-color: var(--success); }
.warning-banner.is-high { background: rgba(239,102,120,0.1); border-color: var(--danger); }
.warning-banner.is-medium { background: rgba(245,184,91,0.1); border-color: var(--warning); }
.warning-banner.is-low { background: rgba(47,208,164,0.1); border-color: var(--success); }

/* === Truncate cell === */
.truncate-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Format Chips === */
.format-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--chip-color, var(--accent));
    background: rgba(251, 124, 16, 0.10);
    border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent)) 30%, transparent);
    cursor: default;
}
.format-chip i {
    font-size: 9px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.format-chip i:hover { opacity: 1; color: var(--danger); }

/* === Confirmation modal summary rows === */
.overlay-card-body .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}
.overlay-card-body .summary-row:last-child { border-bottom: none; }
.overlay-card-body .detail-label { color: var(--text-muted); }
.overlay-card-body .detail-value { color: var(--text-primary); font-weight: 500; }
.overlay-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}

/* === Filter Group Accordion === */
.filter-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.filter-group[open] {
    border-color: var(--border-strong);
}
.filter-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    list-style: none;
    user-select: none;
}
.filter-group-title::-webkit-details-marker { display: none; }
.filter-group-title:hover { color: var(--text-primary); background: rgba(255,255,255,0.02); }
.filter-group-chevron {
    font-size: 10px;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.filter-group[open] .filter-group-chevron { transform: rotate(180deg); }
.filter-group-body {
    padding: 0 14px 14px;
    display: grid;
    gap: 10px;
    animation: faqSlideDown 0.2s ease;
}

/* === Custom Select Arrow === */
.select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2398aacf' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* === Sidebar Cart Badge === */
.sidebar-badge {
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}
.sidebar-badge-new {
    background: var(--success, #2fd0a4);
}
.sidebar-badge-warn {
    background: var(--accent, #fb7c10);
}

/* === Support: unread row highlight === */
tr.has-unread {
    background: var(--accent-soft);
}
tr.has-unread td {
    font-weight: 600;
}
tr.has-unread td:nth-child(6) {
    color: var(--accent-strong);
}

/* === Shop table compact === */
.shop-grid .table-wrap {
    padding: 10px 12px 12px;
}
.shop-grid .table-toolbar {
    padding: 12px 12px 0;
}
.shop-grid table {
    font-size: 11.5px;
    font-weight: 400;
}
.shop-grid table th,
.shop-grid table td {
    padding: 5px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.shop-grid table th {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.shop-grid table td {
    color: var(--text-secondary);
}
/* Fixed-width short columns: BIN(1), Exp(2), ZIP(4), Valid(10), Price(12) */
.shop-grid table th:nth-child(1), .shop-grid table td:nth-child(1),
.shop-grid table th:nth-child(2), .shop-grid table td:nth-child(2),
.shop-grid table th:nth-child(4), .shop-grid table td:nth-child(4),
.shop-grid table th:nth-child(10), .shop-grid table td:nth-child(10),
.shop-grid table th:nth-child(12), .shop-grid table td:nth-child(12) {
    max-width: none;
    width: 1%;
}
/* Hide Info column(11) — same repetitive data for every row */
.shop-grid table th:nth-child(11),
.shop-grid table td:nth-child(11) {
    display: none;
}
/* Truncate long columns: Country(3), Bank(5), Base(6), Seller(7) */
.shop-grid table td:nth-child(3) { max-width: 78px; }
.shop-grid table td:nth-child(5) { max-width: 88px; }
.shop-grid table td:nth-child(6) { max-width: 68px; }
.shop-grid table td:nth-child(7) { max-width: 58px; }
/* Level(9) can be long too */
.shop-grid table td:nth-child(9) { max-width: 68px; }
.shop-grid table .badge {
    padding: 2px 5px;
    font-size: 9px;
    gap: 2px;
    font-weight: 600;
}
.shop-grid table .btn-sm {
    padding: 3px 6px;
    font-size: 10px;
    gap: 2px;
}
/* Action column: icon-only compact buttons */
.shop-grid table td:last-child {
    max-width: none;
    white-space: nowrap;
}
.shop-grid table td:last-child .btn-sm span {
    display: none;
}
.shop-grid table td:last-child .btn-sm {
    padding: 4px 6px;
}

/* === Character full-site warm theme === */
body {
    background:
        radial-gradient(circle at 18% -8%, rgba(251, 124, 16, 0.18), transparent 30%),
        radial-gradient(circle at 82% 0%, rgba(168, 84, 31, 0.16), transparent 34%),
        linear-gradient(180deg, #171412 0%, #0c0c0b 100%);
}

.app-shell {
    background:
        radial-gradient(circle at 82% 12%, rgba(251, 124, 16, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(33, 25, 22, 0.72), rgba(12, 12, 11, 0.96));
}

.sidebar {
    background: linear-gradient(180deg, rgba(23, 20, 18, 0.96), rgba(12, 12, 11, 0.98));
    box-shadow: 12px 0 42px rgba(0, 0, 0, 0.22);
}

.sidebar-brand,
.sidebar-footer,
.sidebar-card,
.metric-card,
.panel,
.table-shell,
.summary-card,
.list-card,
.overlay-card,
.token-modal-box,
.mini-list-item,
.preview-panel,
.news-item,
.faq-entry,
.wallet-address-panel,
.chat-thread,
.message-bubble {
    border-color: var(--border);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 248, 238, 0.035), transparent 28%),
        linear-gradient(180deg, rgba(44, 33, 28, 0.88), rgba(23, 20, 18, 0.84));
    box-shadow: var(--shadow);
}

.sidebar-brand {
    background:
        linear-gradient(180deg, rgba(255, 248, 238, 0.07), rgba(251, 124, 16, 0.05)),
        rgba(33, 25, 22, 0.82);
}

.sidebar-logo-mark {
    border-radius: 13px;
    background: rgba(255, 248, 238, 0.08);
    box-shadow: 0 10px 22px rgba(168, 84, 31, 0.2);
}

.sidebar-link:hover,
.filter-group-title:hover,
.faq-question:hover {
    background: rgba(251, 124, 16, 0.07);
}

.sidebar-link.is-active {
    background: rgba(251, 124, 16, 0.12);
    border-color: rgba(251, 124, 16, 0.34);
    box-shadow: inset 3px 0 0 var(--accent), 0 10px 30px rgba(251, 124, 16, 0.08);
}

.topbar h1,
.panel-title,
.summary-title,
.metric-value,
.sidebar-brand-title {
    color: var(--cream-50);
}

.topbar p,
.metric-label,
.metric-meta,
.panel-copy,
.table-subtle,
.summary-copy {
    color: var(--text-secondary);
}

.metric-card,
.panel,
.summary-card,
.list-card {
    position: relative;
}

.metric-card::before,
.panel::before,
.summary-card::before,
.list-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 173, 69, 0.42), transparent);
    pointer-events: none;
}

.metric-card:nth-child(even),
.panel:nth-child(even),
.summary-card:nth-child(even),
.list-card:nth-child(even) {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 173, 69, 0.055), transparent 28%),
        linear-gradient(180deg, rgba(48, 35, 29, 0.9), rgba(23, 20, 18, 0.84));
}

.metric-icon,
.panel-icon {
    background: rgba(251, 124, 16, 0.13);
    color: var(--accent-strong);
}

.btn-primary,
.auth-form .btn-primary,
.format-token.is-active,
.auth-submit {
    border-color: transparent;
    color: #fff8ee;
    background: linear-gradient(180deg, var(--accent), var(--auth-orange-600, #dd6508));
    box-shadow: 0 16px 34px rgba(251, 124, 16, 0.28);
}

.btn-primary:hover,
.auth-form .btn-primary:hover {
    box-shadow: 0 20px 42px rgba(251, 124, 16, 0.36), 0 0 0 1px rgba(255, 173, 69, 0.28);
}

.btn-secondary,
.icon-btn,
.sidebar-toggle,
.page-chip,
.segment,
.crypto-option,
.captcha-refresh-btn {
    border-color: var(--border);
    background: rgba(33, 25, 22, 0.8);
    color: var(--text-secondary);
}

.btn-ghost {
    color: var(--text-secondary);
}

.btn:hover,
.icon-btn:hover,
.sidebar-toggle:hover,
.segment:hover,
.segment.is-active,
.crypto-option:hover,
.crypto-option.is-active,
.page-chip:hover,
.page-chip.is-active {
    border-color: var(--border-strong);
    background: rgba(251, 124, 16, 0.10);
    color: var(--cream-50);
}

.input,
.select,
.textarea,
.control,
.field-inline .input {
    border-color: var(--border);
    background: rgba(12, 12, 11, 0.44);
    color: var(--cream-50);
}

.input:focus,
.select:focus,
.textarea:focus,
.control:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 173, 69, 0.18);
}

.input::placeholder,
.textarea::placeholder {
    color: rgba(216, 190, 161, 0.58);
}

th,
td,
.summary-row {
    border-color: rgba(255, 173, 69, 0.10);
}

tbody tr:hover {
    background: rgba(251, 124, 16, 0.06);
}

.badge.is-blue,
.badge.is-processing,
.badge.is-seller {
    background: rgba(251, 124, 16, 0.14);
    color: #ffbf73;
}

.badge.is-amber,
.badge.is-review,
.badge.is-pending {
    background: rgba(255, 173, 69, 0.14);
    color: #ffc47c;
}

.signal-low {
    background: var(--accent-strong);
    box-shadow: 0 0 0 4px rgba(255, 173, 69, 0.12), 0 0 16px rgba(255, 173, 69, 0.24);
}

.warning-banner.is-low {
    border-color: rgba(255, 173, 69, 0.28);
    background: rgba(255, 173, 69, 0.10);
}

.overlay-modal,
.token-modal,
.loader-overlay {
    background: rgba(12, 12, 11, 0.78);
}

.token-output,
.code-scroll {
    border-color: var(--border);
    background: rgba(12, 12, 11, 0.62);
    color: var(--cream-50);
}

.empty-state {
    border-color: var(--border);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 173, 69, 0.08), transparent 42%),
        rgba(251, 124, 16, 0.04);
    overflow: hidden;
    position: relative;
}

.empty-state::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
    background: url('/design/assets/img/brand/roger-logo-64.png') center / contain no-repeat;
    opacity: 0.12;
    pointer-events: none;
}

.upload-drop-area:hover,
.upload-drop-area.is-dragover,
.mini-list-item[style*="cursor:pointer"]:hover,
.mini-list-item[data-user-base-link]:hover,
.message-bubble.is-admin,
tr.has-unread,
.page-chip.is-active {
    background: rgba(251, 124, 16, 0.08);
}

.format-chip {
    background: rgba(251, 124, 16, 0.10);
}

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23d8bea1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
    padding-right: 38px;
}

.auth-body {
    background-color: #0c0c0b;
    background-image:
        linear-gradient(90deg, rgba(12, 12, 11, 0.18), rgba(12, 12, 11, 0.46)),
        image-set(
            url('/design/assets/img/brand/roger-auth-bg.webp?v=2') type('image/webp'),
            url('/design/assets/img/brand/roger-auth-bg.jpg?v=2') type('image/jpeg')
        );
    background-image:
        linear-gradient(90deg, rgba(12, 12, 11, 0.18), rgba(12, 12, 11, 0.46)),
        url('/design/assets/img/brand/roger-auth-bg.jpg?v=2');
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;
    background-attachment: fixed, fixed;
    color: var(--auth-text, #181513);
    position: relative;
}

/* No backdrop ::before needed: image is 16:9 and covers viewport cleanly */
.auth-body::before { content: none; }

.auth-body .auth-bg-orb,
.auth-body .auth-grid-pattern {
    display: none;
}

.auth-body .auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(24px, 1fr) minmax(340px, 430px) minmax(24px, 8vw);
    align-items: center;
    align-content: center;
    justify-items: center;
    gap: 0;
    padding: 40px 0;
    overflow: visible;
}

.auth-body .hero-card {
    display: none;
}

.auth-body .auth-logo {
    grid-column: 2;
    position: relative;
    z-index: 2;
    justify-content: center;
    margin: 0 0 -26px;
    pointer-events: none;
}

.auth-body .auth-logo-text {
    display: none;
}

.auth-body .auth-logo-mark {
    width: 128px;
    height: 108px;
    filter: drop-shadow(0 18px 28px rgba(168, 84, 31, 0.28));
    transform: translateY(4px);
}

.auth-body .auth-card {
    grid-column: 2;
    width: min(100%, 430px);
    padding: 42px 28px 28px;
    border: 1px solid rgba(255, 173, 69, 0.38);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.44), transparent 38%),
        linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(248, 234, 212, 0.95));
    box-shadow: 0 30px 82px rgba(0, 0, 0, 0.48), 0 0 52px rgba(251, 124, 16, 0.28);
    color: #181513;
}

.auth-body .auth-card-inner {
    gap: 24px;
}

.auth-body .auth-form {
    gap: 22px;
}

.auth-body .auth-card-header {
    text-align: left;
}

.auth-body .auth-card h2,
.auth-body .auth-title {
    color: #181513;
    font-size: 30px;
}

.auth-body .auth-card p,
.auth-body .auth-meta,
.auth-body .token-modal-box p {
    color: #6c5a4a;
}

.auth-body .eyebrow {
    color: #dd6508;
    font-weight: 800;
}

.auth-body .field label {
    color: #181513;
}

.auth-body .field-inline i,
.auth-body .control svg {
    color: #a8541f;
}

.auth-body .input,
.auth-body .field-inline .input {
    border-color: rgba(168, 84, 31, 0.22);
    background: rgba(255, 255, 255, 0.58);
    color: #181513;
}

.auth-body .input:focus {
    border-color: rgba(251, 124, 16, 0.72);
    box-shadow: 0 0 0 4px rgba(255, 173, 69, 0.22);
    background: rgba(255, 255, 255, 0.84);
}

.auth-body .input::placeholder {
    color: rgba(108, 90, 74, 0.72);
}

.auth-body .captcha-media {
    border-color: rgba(168, 84, 31, 0.16);
    background: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 8px rgba(168, 84, 31, 0.06);
}

.auth-body .captcha-media::before {
    background:
        radial-gradient(circle at 18% 50%, rgba(255, 173, 69, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 84% 50%, rgba(168, 84, 31, 0.16) 0%, transparent 45%);
}

.auth-body .captcha-media img {
    filter: none;
    object-fit: contain;
}

.auth-body .captcha-refresh-btn {
    border-color: rgba(168, 84, 31, 0.18);
    background: rgba(255, 248, 238, 0.68);
    color: #dd6508;
}

.auth-body .form-status:empty {
    display: none;
}

.auth-body .auth-form .btn-primary {
    margin-top: 2px;
}

.auth-body .captcha-refresh-btn::before {
    background: linear-gradient(180deg, var(--accent), #dd6508);
}

.auth-body .text-link,
.auth-body .link-accent {
    color: #dd6508;
    font-weight: 800;
}

.auth-body .form-status.is-error {
    color: #b83328;
}

.auth-body .form-status.is-success {
    color: #28784f;
}

.auth-body .token-modal-box {
    border-color: rgba(255, 173, 69, 0.34);
    background: linear-gradient(180deg, #fff8ee, #f8ead4);
    color: #181513;
}

.auth-body .token-output {
    background: rgba(255, 255, 255, 0.68);
    color: #181513;
}

@media (max-width: 1180px) {
    .auth-body {
        background-image:
            linear-gradient(90deg, rgba(12, 12, 11, 0.20), rgba(12, 12, 11, 0.54)),
            url('/design/assets/img/brand/roger-auth-bg.jpg?v=2');
        background-position: center, center;
        background-size: cover, cover;
    }
}

@media (max-aspect-ratio: 4/3), (max-width: 920px) {
    .auth-body {
        background-image:
            linear-gradient(180deg, rgba(12, 12, 11, 0.40), rgba(12, 12, 11, 0.66)),
            url('/design/assets/img/brand/roger-auth-bg.jpg?v=2');
        background-position: center, center;
        background-size: cover, cover;
        background-attachment: scroll;
    }

    .auth-body .auth-shell {
        grid-template-columns: minmax(18px, 1fr) minmax(320px, 420px) minmax(18px, 1fr);
        padding: 32px 0;
    }
}

@media (max-width: 560px) {
    .auth-body {
        background-image:
            linear-gradient(180deg, rgba(12, 12, 11, 0.34), rgba(12, 12, 11, 0.72)),
            url('/design/assets/img/brand/roger-auth-bg.jpg?v=2');
        background-position: center, center;
        background-size: cover, cover;
    }

    .auth-body .auth-shell {
        grid-template-columns: 20px minmax(0, 1fr) 20px;
        align-items: end;
        padding: 24px 0;
    }

    .auth-body .auth-card {
        padding: 36px 22px 22px;
        border-radius: 18px;
    }

    .auth-body .auth-logo-mark {
        width: 104px;
        height: 88px;
    }

    .auth-body .auth-card h2 {
        font-size: 26px;
    }

    .app-content,
    .grid-2,
    .grid-3,
    .shop-grid {
        gap: 22px;
    }
}

/* === Visual density pass === */
.app-main {
    padding: 18px 22px 20px;
}

.app-content {
    gap: 16px;
}

.topbar {
    gap: 14px;
    margin-bottom: 20px;
}

.metrics-grid,
.grid-2,
.grid-3,
.shop-grid {
    gap: 16px;
}

.metrics-grid {
    margin-bottom: 18px;
}

.grid-2,
.grid-3,
.shop-grid {
    align-items: start;
}

.panel,
.table-shell,
.summary-card,
.list-card {
    align-self: start;
}

.metric-card {
    padding: 15px 16px;
    gap: 12px;
}

.panel,
.summary-card,
.list-card {
    padding: 18px;
}

.panel-head,
.summary-head {
    margin-bottom: 14px;
}

.table-toolbar {
    padding: 15px 18px 0;
    gap: 14px;
}

.table-wrap {
    padding: 15px 18px 18px;
}

th,
td {
    padding: 10px 11px;
}

.detail-list,
.summary-list {
    gap: 10px;
}

.form-grid {
    gap: 12px;
}

.filter-group-title {
    padding: 9px 13px;
}

.filter-group-body {
    padding: 0 13px 12px;
    gap: 9px;
}

.limit-switcher {
    gap: 8px;
    margin-bottom: 12px;
}

.pagination-row {
    margin-top: 14px;
}

@media (max-width: 860px) {
    .app-main {
        padding: 16px;
    }

    .topbar {
        margin-bottom: 18px;
    }

    .panel,
    .table-shell,
    .summary-card,
    .list-card {
        border-radius: 16px;
    }
}

@media (max-width: 600px) {
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 14px;
    }

    .metric-card {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
        padding: 14px;
    }

    .metric-icon,
    .panel-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .metric-value {
        font-size: 22px;
    }

    .metric-label,
    .metric-meta {
        font-size: 12px;
    }

    .panel,
    .summary-card,
    .list-card {
        padding: 17px;
    }

    .table-toolbar {
        padding: 14px 14px 0;
    }

    .table-wrap {
        padding: 14px;
    }
}

@media (max-width: 380px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* === Character brand assets + compact sidebar pass === */
.sidebar {
    padding: 10px 12px;
    gap: 7px;
}

.sidebar-brand {
    gap: 9px;
    padding: 7px 10px;
    border-radius: 13px;
}

.sidebar-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(251, 124, 16, 0.22);
}

.sidebar-brand-title {
    font-size: 13.5px;
    line-height: 1.12;
}

.sidebar-brand-subtitle {
    font-size: 11.5px;
    line-height: 1.15;
}

.sidebar-section-label {
    padding: 3px 10px 1px;
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: 0.08em;
}

.sidebar-nav {
    flex: 0 1 auto;
    max-height: calc(100vh - 132px);
    gap: 1px;
}

.sidebar-link {
    gap: 8px;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 11px;
    font-size: 12.5px;
    line-height: 1.18;
}

.sidebar-link i {
    width: 16px;
    text-align: center;
    font-size: 13px;
}

.sidebar-footer {
    gap: 3px;
    margin-top: 5px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 11px;
}

.sidebar-footer-row {
    gap: 6px;
    line-height: 1.25;
}

.btn-logout {
    gap: 6px;
    font-size: 11px;
}

.empty-state::before {
    background-image: url('/design/assets/img/brand/roger-logo-64.png');
    border-radius: 50%;
}

.auth-body {
    background-color: #0c0c0b;
    background-image:
        radial-gradient(circle at 12% 12%, rgba(251, 124, 16, 0.12), transparent 32%),
        linear-gradient(90deg, rgba(12, 12, 11, 0.16) 0%, rgba(12, 12, 11, 0.36) 48%, rgba(12, 12, 11, 0.70) 100%),
        url('/design/assets/img/brand/roger-auth-bg.jpg?v=2');
    background-repeat: no-repeat;
    background-position: center, center, center;
    background-size: auto, cover, cover;
    background-attachment: fixed;
}

.auth-body .auth-logo {
    margin-bottom: -34px;
}

.auth-body .auth-logo-mark {
    width: 112px;
    height: 112px;
    border: 3px solid rgba(255, 248, 238, 0.9);
    border-radius: 50%;
    object-fit: cover;
    background: var(--accent);
    box-shadow: 0 18px 32px rgba(168, 84, 31, 0.32), 0 0 0 1px rgba(251, 124, 16, 0.24);
    filter: none;
    transform: translateY(2px);
}

.auth-body .auth-card {
    padding-top: 46px;
}

@media (max-width: 1180px) {
    .auth-body {
        background-image:
            radial-gradient(circle at 12% 12%, rgba(251, 124, 16, 0.12), transparent 32%),
            linear-gradient(90deg, rgba(12, 12, 11, 0.20) 0%, rgba(12, 12, 11, 0.46) 48%, rgba(12, 12, 11, 0.80) 100%),
            url('/design/assets/img/brand/roger-auth-bg.jpg?v=2');
        background-position: center, center, center;
        background-size: auto, cover, cover;
    }
}

@media (max-aspect-ratio: 4/3), (max-width: 920px) {
    .auth-body {
        background-image:
            radial-gradient(circle at 50% 8%, rgba(251, 124, 16, 0.12), transparent 34%),
            linear-gradient(180deg, rgba(12, 12, 11, 0.40), rgba(12, 12, 11, 0.78)),
            url('/design/assets/img/brand/roger-auth-bg.jpg?v=2');
        background-position: center, center, center;
        background-size: auto, cover, cover;
        background-attachment: scroll;
    }
}

@media (max-width: 560px) {
    .auth-body {
        background-image:
            radial-gradient(circle at 50% 8%, rgba(251, 124, 16, 0.12), transparent 34%),
            linear-gradient(180deg, rgba(12, 12, 11, 0.46), rgba(12, 12, 11, 0.82)),
            url('/design/assets/img/brand/roger-auth-bg.jpg?v=2');
        background-position: center, center, center;
        background-size: auto, cover, cover;
    }

    .auth-body .auth-logo-mark {
        width: 94px;
        height: 94px;
    }

    .auth-body .auth-logo {
        margin-bottom: -30px;
    }

    .auth-body .auth-card {
        padding-top: 40px;
    }
}

/* === Auth captcha polish pass === */
.auth-body .auth-form {
    gap: 20px;
}

.auth-body .auth-form .field {
    display: grid;
    gap: 10px;
}

.auth-body .field label {
    color: #3a2a1c;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
}

.auth-body .captcha-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 10px;
    width: 100%;
    align-items: stretch;
}

.auth-body .captcha-media,
.auth-body .captcha-refresh-btn {
    height: 56px;
    border-radius: 13px;
    border-color: rgba(168, 84, 31, 0.32);
    background: #fffaf3;
    box-shadow: none;
}

.auth-body .captcha-media {
    overflow: hidden;
}

.auth-body .captcha-media::before {
    display: none;
}

.auth-body .captcha-media img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: fill;
}

.auth-body .captcha-refresh-btn {
    width: 56px;
    color: #dd6508;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.auth-body .captcha-refresh-btn:hover,
.auth-body .captcha-refresh-btn:focus-visible {
    border-color: rgba(251, 124, 16, 0.58);
    background: #fff3e3;
    box-shadow: 0 0 0 3px rgba(251, 124, 16, 0.14);
    color: #b94d05;
    outline: none;
}

.auth-body .field-inline > i {
    color: rgba(108, 90, 74, 0.72);
}

.auth-body .field-inline button i {
    position: static;
    transform: none;
    color: inherit;
}

.auth-body .input,
.auth-body .field-inline .input {
    border-color: rgba(168, 84, 31, 0.32);
    background: #fffaf3;
}

.auth-body .input:focus {
    border-color: rgba(251, 124, 16, 0.68);
    box-shadow: 0 0 0 3px rgba(251, 124, 16, 0.16);
    background: #fffdf8;
}

.auth-body .auth-form .btn-primary {
    min-height: 50px;
    gap: 8px;
}

.auth-body .auth-form .btn-primary:hover {
    filter: brightness(0.98);
}

@media (max-width: 560px) {
    .auth-body .captcha-panel {
        grid-template-columns: minmax(0, 1fr) 54px;
        gap: 8px;
    }

    .auth-body .captcha-media,
    .auth-body .captcha-refresh-btn {
        height: 54px;
    }

    .auth-body .captcha-refresh-btn {
        width: 54px;
    }
}

/* === Minimal operational calm pass === */
body:not(.auth-body) {
    background:
        radial-gradient(circle at 18% -10%, rgba(251, 124, 16, 0.08), transparent 24%),
        linear-gradient(180deg, #171412 0%, #0c0c0b 100%);
}

body:not(.auth-body) .app-shell {
    grid-template-columns: 264px minmax(0, 1fr);
    background: linear-gradient(180deg, rgba(23, 20, 18, 0.76), rgba(12, 12, 11, 0.96));
}

body:not(.auth-body) .app-main {
    padding: 16px 20px 18px;
}

body:not(.auth-body) .app-content,
body:not(.auth-body) .metrics-grid,
body:not(.auth-body) .grid-2,
body:not(.auth-body) .grid-3,
body:not(.auth-body) .shop-grid {
    gap: 14px;
}

body:not(.auth-body) .topbar {
    gap: 12px;
    margin-bottom: 16px;
}

body:not(.auth-body) .topbar h1 {
    margin-top: 2px;
}

body:not(.auth-body) .sidebar {
    padding: 9px 10px;
    gap: 6px;
    background: rgba(18, 15, 13, 0.96);
    box-shadow: 7px 0 24px rgba(0, 0, 0, 0.18);
}

body:not(.auth-body) .sidebar-brand {
    gap: 10px;
    padding: 7px 9px;
    border-radius: 12px;
    background: rgba(33, 25, 22, 0.58);
    box-shadow: none;
}

body:not(.auth-body) .sidebar-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    box-shadow: none;
}

body:not(.auth-body) .sidebar-brand-title {
    font-size: 14px;
}

body:not(.auth-body) .sidebar-brand-subtitle {
    font-size: 11px;
}

body:not(.auth-body) .sidebar-section-label {
    padding: 0 8px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
}

body:not(.auth-body) .sidebar-nav {
    gap: 2px;
}

body:not(.auth-body) .sidebar-link {
    gap: 8px;
    padding: 6px 9px;
    border-radius: 10px;
    font-size: 12.5px;
}

body:not(.auth-body) .sidebar-link.is-active {
    background: rgba(251, 124, 16, 0.08);
    border-color: rgba(251, 124, 16, 0.22);
    box-shadow: inset 2px 0 0 rgba(255, 173, 69, 0.78);
}

body:not(.auth-body) .sidebar-footer,
body:not(.auth-body) .sidebar-card {
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(33, 25, 22, 0.46);
    box-shadow: none;
}

body:not(.auth-body) .sidebar-footer-row,
body:not(.auth-body) .btn-logout {
    gap: 5px;
    font-size: 10.5px;
}

body:not(.auth-body) .sidebar-brand,
body:not(.auth-body) .sidebar-footer,
body:not(.auth-body) .sidebar-card,
body:not(.auth-body) .metric-card,
body:not(.auth-body) .panel,
body:not(.auth-body) .table-shell,
body:not(.auth-body) .summary-card,
body:not(.auth-body) .list-card,
body:not(.auth-body) .overlay-card,
body:not(.auth-body) .token-modal-box,
body:not(.auth-body) .mini-list-item,
body:not(.auth-body) .preview-panel,
body:not(.auth-body) .news-item,
body:not(.auth-body) .faq-entry,
body:not(.auth-body) .wallet-address-panel,
body:not(.auth-body) .chat-thread,
body:not(.auth-body) .message-bubble {
    border-color: rgba(255, 173, 69, 0.12);
    background: rgba(29, 23, 20, 0.72);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

body:not(.auth-body) .metric-card::before,
body:not(.auth-body) .panel::before,
body:not(.auth-body) .summary-card::before,
body:not(.auth-body) .list-card::before {
    display: none;
}

body:not(.auth-body) .metric-card:nth-child(even),
body:not(.auth-body) .panel:nth-child(even),
body:not(.auth-body) .summary-card:nth-child(even),
body:not(.auth-body) .list-card:nth-child(even) {
    background: rgba(31, 24, 21, 0.72);
}

body:not(.auth-body) .metrics-grid {
    margin-bottom: 14px;
}

body:not(.auth-body) .metric-card {
    min-height: 0;
    padding: 12px 13px;
    gap: 9px;
}

body:not(.auth-body) .metric-icon,
body:not(.auth-body) .panel-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(251, 124, 16, 0.08);
    color: #dca160;
}

body:not(.auth-body) .metric-value {
    margin-top: 3px;
    font-size: 21px;
    font-weight: 760;
}

body:not(.auth-body) .metric-label,
body:not(.auth-body) .metric-meta {
    font-size: 11.5px;
}

body:not(.auth-body) .panel,
body:not(.auth-body) .summary-card,
body:not(.auth-body) .list-card {
    padding: 15px;
}

body:not(.auth-body) .panel-head,
body:not(.auth-body) .summary-head {
    margin-bottom: 11px;
}

body:not(.auth-body) .filters-card {
    top: 18px;
}

body:not(.auth-body) .filter-group,
body:not(.auth-body) .filter-group[open] {
    border-color: rgba(255, 173, 69, 0.16);
}

body:not(.auth-body) .form-grid,
body:not(.auth-body) .field,
body:not(.auth-body) .filter-group-body {
    gap: 8px;
}

body:not(.auth-body) .field label {
    font-size: 12px;
}

body:not(.auth-body) .input,
body:not(.auth-body) .select,
body:not(.auth-body) .textarea,
body:not(.auth-body) .control,
body:not(.auth-body) .field-inline .input {
    border-color: rgba(255, 173, 69, 0.13);
    border-radius: 10px;
    background: rgba(12, 12, 11, 0.38);
    padding: 10px 11px;
    box-shadow: none;
}

body:not(.auth-body) .input:focus,
body:not(.auth-body) .select:focus,
body:not(.auth-body) .textarea:focus,
body:not(.auth-body) .control:focus-within {
    border-color: rgba(255, 173, 69, 0.42);
    box-shadow: 0 0 0 3px rgba(255, 173, 69, 0.10);
}

body:not(.auth-body) .btn,
body:not(.auth-body) .icon-btn,
body:not(.auth-body) .segment,
body:not(.auth-body) .crypto-option,
body:not(.auth-body) .page-chip {
    border-radius: 10px;
    padding: 9px 12px;
}

body:not(.auth-body) .icon-btn,
body:not(.auth-body) .sidebar-toggle {
    width: 38px;
    height: 38px;
    padding: 0;
}

body:not(.auth-body) .btn-primary,
body:not(.auth-body) .format-token.is-active,
body:not(.auth-body) .auth-submit {
    background: linear-gradient(180deg, #dc720f, #b65a13);
    box-shadow: 0 8px 18px rgba(251, 124, 16, 0.18);
}

body:not(.auth-body) .btn-primary:hover {
    box-shadow: 0 10px 22px rgba(251, 124, 16, 0.22);
}

body:not(.auth-body) .filter-group-title {
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 11px;
    letter-spacing: 0.05em;
}

body:not(.auth-body) .filter-group-body {
    padding: 0 10px 10px;
}

body:not(.auth-body) .table-toolbar {
    padding: 12px 15px 0;
    gap: 10px;
}

body:not(.auth-body) .table-wrap {
    padding: 12px 15px 15px;
}

body:not(.auth-body) th,
body:not(.auth-body) td {
    padding: 8px 10px;
    border-color: rgba(255, 173, 69, 0.08);
}

body:not(.auth-body) th {
    font-size: 10.5px;
    letter-spacing: 0.06em;
}

body:not(.auth-body) tbody tr:hover,
body:not(.auth-body) .sidebar-link:hover,
body:not(.auth-body) .filter-group-title:hover,
body:not(.auth-body) .faq-question:hover,
body:not(.auth-body) .upload-drop-area:hover,
body:not(.auth-body) .upload-drop-area.is-dragover,
body:not(.auth-body) .mini-list-item[style*="cursor:pointer"]:hover,
body:not(.auth-body) .mini-list-item[data-user-base-link]:hover,
body:not(.auth-body) tr.has-unread,
body:not(.auth-body) .page-chip.is-active {
    background: rgba(251, 124, 16, 0.045);
}

body:not(.auth-body) .badge,
body:not(.auth-body) .format-chip {
    padding: 5px 8px;
    gap: 6px;
    background-color: rgba(251, 124, 16, 0.08);
}

body:not(.auth-body) .empty-state {
    padding: 22px 18px;
    border-color: rgba(255, 173, 69, 0.10);
    background: rgba(29, 23, 20, 0.48);
}

body:not(.auth-body) .empty-state::before {
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    opacity: 0.055;
}

body:not(.auth-body) .empty-state h3,
body:not(.auth-body) .empty-state strong {
    margin-bottom: 5px;
}

@media (max-width: 1180px) {
    body:not(.auth-body) .app-shell {
        grid-template-columns: 244px minmax(0, 1fr);
    }

    body:not(.auth-body) .shop-grid {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    body:not(.auth-body) .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.auth-body) .shop-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.auth-body) .filters-card {
        position: static;
    }

    body:not(.auth-body) .app-main {
        padding: 14px;
    }

    body:not(.auth-body) .panel,
    body:not(.auth-body) .table-shell,
    body:not(.auth-body) .summary-card,
    body:not(.auth-body) .list-card {
        border-radius: 13px;
    }

    body:not(.auth-body) .table-toolbar {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    body:not(.auth-body) {
        font-size: 12.75px;
    }

    body:not(.auth-body) .app-main {
        padding: 12px;
    }

    body:not(.auth-body) .topbar {
        margin-bottom: 12px;
    }

    body:not(.auth-body) .metrics-grid {
        gap: 9px;
        margin-bottom: 11px;
    }

    body:not(.auth-body) .metric-card {
        padding: 10px;
        gap: 7px;
    }

    body:not(.auth-body) .metric-icon,
    body:not(.auth-body) .panel-icon {
        width: 30px;
        height: 30px;
    }

    body:not(.auth-body) .metric-value {
        font-size: 19px;
    }

    body:not(.auth-body) .panel,
    body:not(.auth-body) .summary-card,
    body:not(.auth-body) .list-card {
        padding: 13px;
    }

    body:not(.auth-body) .filter-group-title {
        padding: 6px 9px;
        font-size: 10.5px;
    }

    body:not(.auth-body) .filter-group-body {
        padding: 0 9px 8px;
        gap: 6px;
    }

    body:not(.auth-body) .input,
    body:not(.auth-body) .select,
    body:not(.auth-body) .field-inline .input {
        padding: 8px 10px;
    }

    body:not(.auth-body) .field label {
        font-size: 11.5px;
    }

    body:not(.auth-body) .table-toolbar,
    body:not(.auth-body) .table-wrap {
        padding-left: 11px;
        padding-right: 11px;
    }

    body:not(.auth-body) .table-wrap {
        font-size: 12px;
    }

    body:not(.auth-body) th,
    body:not(.auth-body) td {
        padding: 7px 8px;
    }
}

/* === UX/UI defect sweep: contrast, hover, a11y === */

/* a11y: keyboard focus visibility on all interactive controls */
.btn:focus-visible,
.icon-btn:focus-visible,
.sidebar-toggle:focus-visible,
.sidebar-link:focus-visible,
.segment:focus-visible,
.crypto-option:focus-visible,
.page-chip:focus-visible,
.text-link:focus-visible,
.link-accent:focus-visible,
.btn-logout:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/* Danger buttons should not pick up the global orange hover ring */
.btn-danger:hover {
    border-color: rgba(239, 102, 120, 0.46);
    background: rgba(239, 102, 120, 0.18);
    color: #ffd1d6;
}

/* Ghost buttons on the dark surface — readable hover */
body:not(.auth-body) .btn-ghost:hover {
    color: var(--accent-strong);
    background: rgba(251, 124, 16, 0.10);
}

/* Cream auth-body: secondary / ghost buttons readable in default + hover */
.auth-body .btn-secondary {
    color: #3a2a1c;
    background: #fff3e3;
    border-color: rgba(168, 84, 31, 0.28);
}
.auth-body .btn-secondary:hover {
    color: #181513;
    background: #ffe7c9;
    border-color: rgba(168, 84, 31, 0.46);
    box-shadow: 0 6px 14px rgba(168, 84, 31, 0.12);
}
.auth-body .btn-ghost,
.auth-body .btn-sm {
    color: #6c5a4a;
}
.auth-body .btn-ghost:hover {
    color: #181513;
    background: rgba(168, 84, 31, 0.10);
    border-color: rgba(168, 84, 31, 0.22);
}

/* Soft variant of primary used for secondary action on cream cards */
.btn-primary.btn-soft {
    background: #fff3e3;
    color: #b94d05;
    box-shadow: none;
    border: 1px solid rgba(168, 84, 31, 0.28);
}
.btn-primary.btn-soft:hover {
    background: #ffe7c9;
    color: #8a3905;
    box-shadow: 0 6px 14px rgba(168, 84, 31, 0.16);
}

/* Cream auth-body: detail-row labels were using dark-theme --text-secondary */
.auth-body .detail-row span,
.auth-body .summary-row span {
    color: #6c5a4a;
}

/* ===========================================================
   Component calm pass — palette unchanged, visual noise removed.
   Targets: blur backdrops, glow shadows, button gradients,
   hover jitter, decorative inline icons, shadow scale.
   =========================================================== */

:root {
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.28);
    --shadow-press: 0 1px 0 rgba(0, 0, 0, 0.22);
}

/* 1. Solid surfaces — no blur, no glow. Keep palette tones. */
body:not(.auth-body) .sidebar,
body:not(.auth-body) .sidebar-brand,
body:not(.auth-body) .sidebar-card,
body:not(.auth-body) .metric-card,
body:not(.auth-body) .panel,
body:not(.auth-body) .table-shell,
body:not(.auth-body) .hero-card,
body:not(.auth-body) .summary-card,
body:not(.auth-body) .list-card,
body:not(.auth-body) .filters-card,
body:not(.auth-body) .topbar-card,
body:not(.auth-body) .preview-panel,
body:not(.auth-body) .overlay-card,
body:not(.auth-body) .token-modal-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-elevated, #171412);
    box-shadow: var(--shadow-1);
}

body:not(.auth-body) .sidebar {
    background: linear-gradient(180deg, #1a1614, #131110);
}

body:not(.auth-body) .panel,
body:not(.auth-body) .table-shell,
body:not(.auth-body) .summary-card,
body:not(.auth-body) .list-card,
body:not(.auth-body) .hero-card {
    border: 1px solid rgba(255, 173, 69, 0.10);
}

/* 2. Sidebar brand — flatten the floating "card" feel */
body:not(.auth-body) .sidebar-brand {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 6px 8px 14px;
}

/* 3. Buttons — flat orange, no gradient, no glow shadow */
.btn-primary,
.auth-form .btn-primary,
.auth-submit,
body:not(.auth-body) .btn-primary,
body:not(.auth-body) .auth-submit {
    background: var(--accent) !important;
    background-image: none !important;
    box-shadow: var(--shadow-1) !important;
    border: 1px solid transparent !important;
}

.btn-primary:hover,
.auth-form .btn-primary:hover,
.auth-submit:hover,
body:not(.auth-body) .btn-primary:hover,
body:not(.auth-body) .auth-submit:hover {
    background: var(--accent-strong) !important;
    box-shadow: var(--shadow-2) !important;
}

.btn-primary:active,
body:not(.auth-body) .btn-primary:active {
    background: var(--accent-deep, #dd6508) !important;
    box-shadow: var(--shadow-press) !important;
}

/* Auth (cream) primary keeps gradient — readable on cream. */
.auth-body .btn-primary {
    background: linear-gradient(180deg, var(--accent-strong), var(--accent)) !important;
    background-image: linear-gradient(180deg, var(--accent-strong), var(--accent)) !important;
    box-shadow: 0 4px 10px rgba(168, 84, 31, 0.18) !important;
}
.auth-body .btn-primary:hover {
    box-shadow: 0 6px 14px rgba(168, 84, 31, 0.26) !important;
    filter: brightness(0.98);
}

/* 4. Remove hover jitter (translateY) and orange ring on generic buttons */
.btn:hover,
.icon-btn:hover,
.sidebar-toggle:hover,
.segment:hover,
.crypto-option:hover,
.page-chip:hover {
    transform: none;
}

body:not(.auth-body) .btn:hover,
body:not(.auth-body) .icon-btn:hover,
body:not(.auth-body) .segment:hover,
body:not(.auth-body) .crypto-option:hover,
body:not(.auth-body) .page-chip:hover {
    background: rgba(251, 124, 16, 0.10);
    border-color: rgba(255, 173, 69, 0.24);
    color: var(--cream-50);
    box-shadow: none;
}

/* 5. Sidebar link active — calmer accent (no inset glow shadow) */
body:not(.auth-body) .sidebar-link.is-active {
    background: rgba(251, 124, 16, 0.10);
    border-color: rgba(251, 124, 16, 0.24);
    box-shadow: inset 2px 0 0 var(--accent);
}

/* 6. Inputs — softer focus ring, no glow */
body:not(.auth-body) .input:focus,
body:not(.auth-body) .select:focus,
body:not(.auth-body) .textarea:focus,
body:not(.auth-body) .control:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(251, 124, 16, 0.18);
}

/* 7. Metric / panel icons — calmer, smaller corner radius */
body:not(.auth-body) .metric-icon,
body:not(.auth-body) .panel-icon {
    background: rgba(251, 124, 16, 0.10);
    border-radius: 10px;
    width: 38px;
    height: 38px;
}

/* 8. Tone down auth-body card shadows */
.auth-body .auth-card {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 173, 69, 0.12) !important;
}

/* 9. Hide decorative icons in places that just create noise.
   Keep: sidebar, buttons, panel-icons, captcha, status, badges, mirror table. */
body:not(.auth-body) .detail-row > span > i,
body:not(.auth-body) .summary-row > span > i,
body:not(.auth-body) .field > label > i {
    display: none;
}

/* 10. Decorative section icons placed inside .panel-head right side stay,
   but trim the heavy inline icon sizes used in some empty-states */
body:not(.auth-body) .empty-state > i:first-child {
    font-size: 32px;
    margin-bottom: 10px;
    opacity: 0.7;
}

/* 11. Tables — reduce hover shimmer */
body:not(.auth-body) tbody tr:hover {
    background: rgba(251, 124, 16, 0.05);
}

/* 12. Badges — flatten (no inner border glow) */
body:not(.auth-body) .badge {
    box-shadow: none;
    font-weight: 600;
}

/* 13. Topbar — remove the floating card feel */
body:not(.auth-body) .topbar {
    margin-bottom: 18px;
}
body:not(.auth-body) .topbar h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
body:not(.auth-body) .topbar p {
    font-size: 13px;
    color: var(--text-muted);
}

/* 14. Captcha refresh button — calmer */
body:not(.auth-body) .captcha-refresh-btn {
    box-shadow: none;
}
body:not(.auth-body) .captcha-refresh-btn::before {
    display: none;
}

/* 15. Form-status calmer (no underline-glow), keep colors */
body:not(.auth-body) .form-status {
    box-shadow: none;
    border-radius: 8px;
}

/* ===========================================================
   Section A — Sidebar redesign (flat, no uppercase labels).
   =========================================================== */

body:not(.auth-body) .sidebar {
    padding: 18px 12px;
    gap: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}
body:not(.auth-body) .sidebar-brand {
    padding: 4px 12px 18px;
    gap: 10px;
    align-items: center;
}
body:not(.auth-body) .sidebar-logo-mark {
    width: 28px;
    height: 28px;
}
body:not(.auth-body) .sidebar-brand-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cream-50);
}

body:not(.auth-body) .sidebar-section-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 14px 12px 6px;
    opacity: 0.7;
}

body:not(.auth-body) .sidebar-link {
    padding: 7px 10px;
    border-radius: 8px;
    border: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    gap: 11px;
}
body:not(.auth-body) .sidebar-link i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.75;
}
body:not(.auth-body) .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.04);
    border: none;
    color: var(--cream-50);
}
body:not(.auth-body) .sidebar-link:hover i { opacity: 1; }
body:not(.auth-body) .sidebar-link.is-active {
    background: rgba(251, 124, 16, 0.10);
    color: var(--cream-50);
    border: none;
    box-shadow: none;
}
body:not(.auth-body) .sidebar-link.is-active i {
    color: var(--accent);
    opacity: 1;
}

body:not(.auth-body) .sidebar-footer {
    margin-top: auto;
    border: none;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;
    padding: 12px 12px 4px;
    gap: 4px;
    font-size: 11.5px;
}
body:not(.auth-body) .sidebar-footer-row i {
    color: var(--text-muted);
    opacity: 0.6;
}
body:not(.auth-body) .btn-logout {
    padding: 6px 0 0;
    font-size: 12px;
}

/* ===========================================================
   Sidebar collapse — creative compact rail mode.
   States on .app-shell:
     (default)            - 264px expanded sidebar
     .sidebar-collapsed   - 64px icon rail with hover tooltips
     .sidebar-floating    - rail + on hover slides expanded over content (peek)
   =========================================================== */

body:not(.auth-body) .sidebar-brand {
    position: relative;
    justify-content: flex-start;
}
body:not(.auth-body) .sidebar-collapse-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-size: 11px;
}
body:not(.auth-body) .sidebar-collapse-btn:hover {
    background: rgba(251, 124, 16, 0.10);
    border-color: rgba(251, 124, 16, 0.28);
    color: var(--accent);
}
body:not(.auth-body) .sidebar-collapse-btn i {
    transition: transform 0.2s ease;
}
body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-collapse-btn i {
    transform: rotate(180deg);
}

/* Smooth shell-grid transition */
body:not(.auth-body) .app-shell {
    transition: grid-template-columns 0.22s ease;
}

/* === Collapsed rail === */
@media (min-width: 1041px) {
    body:not(.auth-body) .app-shell.sidebar-collapsed {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar {
        padding: 14px 8px;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-brand {
        padding: 4px 0 14px;
        justify-content: center;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-brand-title {
        display: none;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-collapse-btn {
        position: static;
        transform: none;
        margin-left: 0;
        display: none; /* collapse triggered from topbar instead while collapsed */
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-link-label,
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-section-label > span {
        display: none;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-section-label {
        padding: 8px 0 4px;
        text-align: center;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-section-label::before {
        content: "";
        display: block;
        width: 18px;
        height: 1px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.08);
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-link {
        justify-content: center;
        padding: 10px 0;
        gap: 0;
        position: relative;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-link i {
        font-size: 15px;
        opacity: 0.85;
        width: auto;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-badge {
        position: absolute;
        top: 4px;
        right: 6px;
        transform: scale(0.8);
        transform-origin: top right;
    }

    /* Collapsed footer: icons only */
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-footer {
        align-items: center;
        padding: 10px 0 4px;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-footer-row {
        justify-content: center;
        width: 100%;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .btn-logout {
        font-size: 0;
        padding: 4px;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .btn-logout i {
        font-size: 13px;
    }

    /* Tooltip on hover (rail mode) */
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-link[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: #1d1916;
        color: var(--cream-50);
        font-size: 12px;
        font-weight: 500;
        padding: 6px 10px;
        border-radius: 6px;
        white-space: nowrap;
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.12s ease, transform 0.12s ease;
        z-index: 60;
    }
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-link:hover[data-tooltip]::after,
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar-link:focus-visible[data-tooltip]::after {
        opacity: 1;
        transform: translateY(-50%) translateX(2px);
    }
}

/* === Persistent expand chevron in topbar when collapsed === */
body:not(.auth-body) .topbar-expand-btn {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    align-self: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body:not(.auth-body) .topbar-expand-btn:hover {
    background: rgba(251, 124, 16, 0.10);
    border-color: rgba(251, 124, 16, 0.28);
    color: var(--accent);
}
body:not(.auth-body) .app-shell.sidebar-collapsed .topbar-expand-btn {
    display: inline-flex;
}

/* === Click-only collapse: no hover peek === */
@media (min-width: 1041px) {
    body:not(.auth-body) .app-shell.sidebar-collapsed .sidebar {
        transition: width 0.22s ease, padding 0.22s ease, background 0.22s ease;
    }
}

/* During transition, hide bleed-through */
body:not(.auth-body) .app-shell.is-toggling .sidebar {
    overflow: hidden;
}
body:not(.auth-body) .app-shell.is-toggling .sidebar-badge {
    display: none !important;
}

/* ===========================================================
   Section B — Metric statline (client + seller only).
   Replaces 4 separate metric-cards with a single horizontal
   strip, divider-separated stats. Admin keeps original grid.
   =========================================================== */

:is(.context-profile, .context-seller) .metrics-grid {
    grid-template-columns: 1fr;
    margin-bottom: 18px;
}

:is(.context-profile, .context-seller) .metrics-grid .metric-card {
    display: none;
}

:is(.context-profile, .context-seller) .metrics-grid {
    position: relative;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(33, 25, 22, 0.55), rgba(23, 20, 18, 0.55));
    box-shadow: var(--shadow-1);
}

:is(.context-profile, .context-seller) .metrics-grid::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.85;
}

/* JS-rendered statline rows go inside .metrics-grid as .statline */
:is(.context-profile, .context-seller) .statline {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    padding-left: 8px;
}

:is(.context-profile, .context-seller) .statline-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 22px;
    min-width: 0;
    flex: 1 1 auto;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

:is(.context-profile, .context-seller) .statline-item:last-child {
    border-right: none;
}

:is(.context-profile, .context-seller) .statline-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.85;
}

:is(.context-profile, .context-seller) .statline-value {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.2px;
    line-height: 1.2;
}

:is(.context-profile, .context-seller) .statline-meta {
    font-size: 11.5px;
    color: var(--text-muted);
    opacity: 0.7;
}

:is(.context-profile, .context-seller) .statline-icon {
    display: none; /* icons hidden in flat statline; meta carries the context */
}

@media (max-width: 980px) {
    :is(.context-profile, .context-seller) .statline {
        flex-wrap: wrap;
    }
    :is(.context-profile, .context-seller) .statline-item {
        flex: 1 1 45%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 8px 14px;
    }
    :is(.context-profile, .context-seller) .statline-item:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

@media (max-width: 560px) {
    :is(.context-profile, .context-seller) .statline-item {
        flex: 1 1 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    :is(.context-profile, .context-seller) .statline-item:last-child {
        border-bottom: none;
    }
}

/* ===========================================================
   Section C1 — Slim topbar (client + seller only).
   Single-row header: toggle | title · description | actions.
   No eyebrow. Title smaller. Description inline.
   Admin keeps the original 3-line topbar.
   =========================================================== */

:is(.context-profile, .context-seller) .topbar.topbar--slim {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 0;
    flex-wrap: nowrap;
}

:is(.context-profile, .context-seller) .topbar.topbar--slim .topbar-copy {
    flex: 1 1 auto;
    min-width: 0;
}

:is(.context-profile, .context-seller) .topbar-title-slim {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--cream-50);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
    line-height: 1.4;
}

:is(.context-profile, .context-seller) .topbar-title-text {
    flex: 0 0 auto;
}

:is(.context-profile, .context-seller) .topbar-title-sep {
    color: var(--text-muted);
    opacity: 0.4;
    font-weight: 400;
    flex: 0 0 auto;
}

:is(.context-profile, .context-seller) .topbar-title-desc {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

:is(.context-profile, .context-seller) .topbar.topbar--slim .topbar-actions {
    flex: 0 0 auto;
    gap: 8px;
}

/* Compact button size in slim topbar */
:is(.context-profile, .context-seller) .topbar.topbar--slim .topbar-actions .btn {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 8px;
}

@media (max-width: 720px) {
    :is(.context-profile, .context-seller) .topbar.topbar--slim {
        flex-wrap: wrap;
    }
    :is(.context-profile, .context-seller) .topbar-title-slim {
        flex-wrap: wrap;
    }
    :is(.context-profile, .context-seller) .topbar-title-desc {
        flex: 1 1 100%;
        white-space: normal;
        font-size: 12px;
    }
    :is(.context-profile, .context-seller) .topbar-title-sep {
        display: none;
    }
    :is(.context-profile, .context-seller) .topbar.topbar--slim .topbar-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

/* ===========================================================
   Section C4 — Cart layout: sticky summary on the right.
   Client + seller scope; admin not affected (admin has no cart).
   =========================================================== */

:is(.context-profile, .context-seller) .cart-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 16px;
}

:is(.context-profile, .context-seller) .cart-layout .summary-card {
    position: sticky;
    top: 16px;
    align-self: start;
    padding: 18px;
}

:is(.context-profile, .context-seller) .cart-layout .summary-head {
    margin-bottom: 14px;
    align-items: flex-start;
}

:is(.context-profile, .context-seller) .cart-layout .summary-head .panel-icon {
    display: none; /* receipt icon is decorative noise */
}

:is(.context-profile, .context-seller) .cart-layout .panel-kicker {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.7;
}

:is(.context-profile, .context-seller) .cart-layout .summary-title {
    font-size: 15px;
    margin-top: 2px;
    font-weight: 600;
}

/* Total row gets visual emphasis as the focal number */
:is(.context-profile, .context-seller) .cart-layout .summary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 14px;
}

:is(.context-profile, .context-seller) .cart-layout .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--text-secondary);
}

:is(.context-profile, .context-seller) .cart-layout .summary-row strong {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--cream-50);
    font-size: 13.5px;
}

/* Hero total — the second .summary-row holds the total */
:is(.context-profile, .context-seller) .cart-layout .summary-row:nth-child(2) {
    font-size: 14px;
    padding: 10px 0 4px;
}
:is(.context-profile, .context-seller) .cart-layout .summary-row:nth-child(2) span {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}
:is(.context-profile, .context-seller) .cart-layout .summary-row:nth-child(2) strong {
    font-size: 26px;
    color: var(--accent-strong);
    letter-spacing: -0.4px;
    line-height: 1;
}

/* Balance-after row colored by sufficient funds */
:is(.context-profile, .context-seller) .cart-layout .summary-row.is-deficit strong {
    color: #ff7a6e;
}
:is(.context-profile, .context-seller) .cart-layout .summary-row.is-ok strong {
    color: #6be0a8;
}

/* Action stack: confirm full-width primary, clear as quiet ghost */
:is(.context-profile, .context-seller) .cart-layout .detail-list.mt-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

:is(.context-profile, .context-seller) .cart-layout .detail-list.mt-section .btn {
    width: 100%;
    justify-content: center;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
}

:is(.context-profile, .context-seller) .cart-layout .detail-list.mt-section .btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-weight: 500;
}

:is(.context-profile, .context-seller) .cart-layout .detail-list.mt-section .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--cream-50);
}

/* Cart item row trim */
:is(.context-profile, .context-seller) .cart-item {
    padding: 14px 0;
    gap: 14px;
}

:is(.context-profile, .context-seller) .cart-item .stack {
    text-align: right;
    align-items: flex-end;
    min-width: 110px;
}

:is(.context-profile, .context-seller) .cart-item .stack strong {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--cream-50);
}

:is(.context-profile, .context-seller) .cart-item .stack .btn-ghost {
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 6px;
}
:is(.context-profile, .context-seller) .cart-item .stack .btn-ghost:hover {
    color: #ff7a6e;
    background: rgba(255, 122, 110, 0.08);
}

/* Mobile: drop sticky and stack */
@media (max-width: 980px) {
    :is(.context-profile, .context-seller) .cart-layout {
        grid-template-columns: 1fr;
    }
    :is(.context-profile, .context-seller) .cart-layout .summary-card {
        position: static;
    }
}

/* ===========================================================
   Section C4b — Cart row card (replaces cart-item).
   Three-zone card: brand · main (title/tags/meta) · price+remove.
   =========================================================== */

:is(.context-profile, .context-seller) .cart-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:is(.context-profile, .context-seller) .cart-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.012);
    transition: border-color 0.15s ease, background 0.15s ease;
}
:is(.context-profile, .context-seller) .cart-row:hover {
    border-color: rgba(255, 173, 69, 0.16);
    background: rgba(251, 124, 16, 0.03);
}

:is(.context-profile, .context-seller) .cart-row-brand {
    width: 44px;
    height: 30px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--cream-50);
    font-size: 18px;
    flex-shrink: 0;
}

:is(.context-profile, .context-seller) .cart-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

:is(.context-profile, .context-seller) .cart-row-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--cream-50);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}
:is(.context-profile, .context-seller) .cart-row-bin {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    color: var(--accent-strong);
    font-weight: 700;
}
:is(.context-profile, .context-seller) .cart-row-bank {
    font-weight: 600;
}
:is(.context-profile, .context-seller) .cart-row-bank::before {
    content: "·";
    color: var(--text-muted);
    opacity: 0.4;
    margin-right: 6px;
    font-weight: 400;
}
:is(.context-profile, .context-seller) .cart-row-country {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13px;
}
:is(.context-profile, .context-seller) .cart-row-country::before {
    content: "·";
    color: var(--text-muted);
    opacity: 0.4;
    margin-right: 6px;
    font-weight: 400;
}

:is(.context-profile, .context-seller) .cart-row-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
:is(.context-profile, .context-seller) .cart-row .chip {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    line-height: 1.2;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    background: transparent;
}
:is(.context-profile, .context-seller) .cart-row .chip-soft {
    color: var(--text-muted);
    border-color: rgba(255, 255, 255, 0.05);
}
:is(.context-profile, .context-seller) .cart-row .chip-valid {
    border-color: rgba(255, 173, 69, 0.16);
    color: var(--accent-strong);
}
:is(.context-profile, .context-seller) .cart-row .chip-valid.is-high {
    color: #6be0a8;
    border-color: rgba(107, 224, 168, 0.22);
}
:is(.context-profile, .context-seller) .cart-row .chip-valid.is-mid {
    color: var(--accent-strong);
    border-color: rgba(255, 173, 69, 0.22);
}
:is(.context-profile, .context-seller) .cart-row .chip-valid.is-low {
    color: #ff9c8e;
    border-color: rgba(255, 122, 110, 0.22);
}

:is(.context-profile, .context-seller) .cart-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
}
:is(.context-profile, .context-seller) .cart-row-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
:is(.context-profile, .context-seller) .cart-row-meta i {
    opacity: 0.6;
    font-size: 11px;
}
:is(.context-profile, .context-seller) .cart-row-info {
    color: var(--text-secondary);
}

:is(.context-profile, .context-seller) .cart-row-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

:is(.context-profile, .context-seller) .cart-row-price {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.2px;
    min-width: 64px;
    text-align: right;
}

:is(.context-profile, .context-seller) .cart-row-remove {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: 0.15s ease;
    font-size: 13px;
}
:is(.context-profile, .context-seller) .cart-row-remove:hover {
    color: #ff7a6e;
    background: rgba(255, 122, 110, 0.10);
    border-color: rgba(255, 122, 110, 0.24);
}

@media (max-width: 720px) {
    :is(.context-profile, .context-seller) .cart-row {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
    }
    :is(.context-profile, .context-seller) .cart-row-side {
        grid-column: 2;
        justify-content: flex-end;
    }
    :is(.context-profile, .context-seller) .cart-row-brand {
        width: 38px;
        height: 26px;
        font-size: 16px;
    }
}

/* ===========================================================
   Section C4c — Order summary redesign (cart sticky panel).
   Replaces summary-list. Hero "You pay" + tight list + hero CTA.
   =========================================================== */

:is(.context-profile, .context-seller) .order-summary {
    padding: 18px 18px 16px;
    border: 1px solid rgba(255, 173, 69, 0.10);
    background: linear-gradient(180deg, #1a1614 0%, #131110 100%);
}

:is(.context-profile, .context-seller) .order-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
:is(.context-profile, .context-seller) .order-summary-kicker {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--cream-50);
    line-height: 1.2;
}
:is(.context-profile, .context-seller) .order-summary-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Hero block — the focal "You pay $X.XX" */
:is(.context-profile, .context-seller) .order-summary-hero {
    position: relative;
    padding: 16px 18px 18px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(251, 124, 16, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(251, 124, 16, 0.08), rgba(251, 124, 16, 0.02));
    border: 1px solid rgba(255, 173, 69, 0.18);
    margin-bottom: 14px;
    overflow: hidden;
}
:is(.context-profile, .context-seller) .order-summary-hero::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 124, 16, 0.16), transparent 70%);
    pointer-events: none;
}
:is(.context-profile, .context-seller) .order-summary-hero-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.85;
    position: relative;
    z-index: 1;
}
:is(.context-profile, .context-seller) .order-summary-hero-value {
    margin-top: 6px;
    font-family: var(--font-sans);
    font-size: 36px;
    font-weight: 800;
    color: var(--cream-50);
    letter-spacing: -1.2px;
    line-height: 1;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 24px rgba(251, 124, 16, 0.12);
}

:is(.context-profile, .context-seller) .order-summary-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
:is(.context-profile, .context-seller) .order-summary-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
}
:is(.context-profile, .context-seller) .order-summary-list li > span:first-child {
    color: var(--text-muted);
}
:is(.context-profile, .context-seller) .order-summary-list li > span:last-child {
    color: var(--cream-50);
    font-weight: 600;
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
:is(.context-profile, .context-seller) .order-summary-after {
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
:is(.context-profile, .context-seller) .order-summary-after.is-ok > span:last-child {
    color: #6be0a8;
}
:is(.context-profile, .context-seller) .order-summary-after.is-ok i {
    color: #6be0a8;
    font-size: 11px;
}
:is(.context-profile, .context-seller) .order-summary-after.is-deficit > span:last-child {
    color: #ff7a6e;
}
:is(.context-profile, .context-seller) .order-summary-after.is-deficit i {
    color: #ff7a6e;
    font-size: 11px;
}

:is(.context-profile, .context-seller) .order-summary-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(255, 122, 110, 0.08);
    border: 1px solid rgba(255, 122, 110, 0.20);
    color: #ffb6ac;
    font-size: 12px;
    line-height: 1.45;
}
:is(.context-profile, .context-seller) .order-summary-warn i {
    color: #ff7a6e;
    margin-top: 2px;
}
:is(.context-profile, .context-seller) .order-summary-warn a {
    color: var(--accent-strong);
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 173, 69, 0.4);
}
:is(.context-profile, .context-seller) .order-summary-warn a:hover {
    border-bottom-color: var(--accent-strong);
}

:is(.context-profile, .context-seller) .order-summary-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

:is(.context-profile, .context-seller) .order-summary-pay {
    width: 100%;
    justify-content: space-between !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 16px rgba(251, 124, 16, 0.22) !important;
}
:is(.context-profile, .context-seller) .order-summary-pay i {
    font-size: 13px;
    transition: transform 0.18s ease;
}
:is(.context-profile, .context-seller) .order-summary-pay:hover i {
    transform: translateX(3px);
}
:is(.context-profile, .context-seller) .order-summary-pay[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none !important;
}

:is(.context-profile, .context-seller) .order-summary-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12.5px;
    padding: 6px 0;
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
:is(.context-profile, .context-seller) .order-summary-clear:hover {
    color: #ff7a6e;
}
:is(.context-profile, .context-seller) .order-summary-clear[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

:is(.context-profile, .context-seller) .order-summary-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 11px;
    opacity: 0.75;
}
:is(.context-profile, .context-seller) .order-summary-foot i {
    font-size: 10px;
}

/* The old generic summary-row rules don't apply now (different markup),
   but make sure padding/sticky behavior from C4 stays intact. */
:is(.context-profile, .context-seller) .cart-layout .order-summary {
    padding: 18px 18px 16px;
}

/* ===========================================================
   Mobile fixes for new client components.
   Repairs sidebar overlay + new statline / cart / topbar layout
   on screens <= 1040px and <= 720px.
   =========================================================== */

@media (max-width: 1040px) {
    /* Slim topbar must stay a row, not stack — looked broken on mobile */
    :is(.context-profile, .context-seller) .topbar.topbar--slim {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 0;
    }
    :is(.context-profile, .context-seller) .topbar.topbar--slim .topbar-copy {
        flex: 1 1 60%;
        order: 2;
    }
    :is(.context-profile, .context-seller) .topbar.topbar--slim .sidebar-toggle {
        order: 1;
        flex: 0 0 auto;
    }
    :is(.context-profile, .context-seller) .topbar.topbar--slim .topbar-actions {
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    /* Statline: single column on mobile, label/value stacked */
    :is(.context-profile, .context-seller) .metrics-grid.has-statline {
        padding: 12px 14px;
    }
    :is(.context-profile, .context-seller) .statline {
        padding-left: 6px;
    }

    /* Cart layout already collapses to one column at 980px;
       just make sure the new card row fits within mobile padding */
    :is(.context-profile, .context-seller) .cart-row {
        padding: 12px 12px;
    }
    :is(.context-profile, .context-seller) .order-summary-hero-value {
        font-size: 30px;
    }
}

@media (max-width: 560px) {
    :is(.context-profile, .context-seller) .topbar.topbar--slim h1.topbar-title-slim {
        font-size: 15px;
    }
    :is(.context-profile, .context-seller) .topbar-title-desc {
        display: none; /* keep header tight on phones */
    }
    :is(.context-profile, .context-seller) .topbar-title-sep {
        display: none;
    }
}

/* ===========================================================
   Section C3 — Wallet hero card.
   Replaces the statline on /profile/wallet with a single
   hero balance + meta + quick actions strip.
   =========================================================== */

/* Hide the slim statline on wallet — the hero takes its place */
.context-profile.page-wallet .metrics-grid.has-statline {
    display: none;
}

.wallet-hero {
    position: relative;
    padding: 22px 26px;
    border-radius: 14px;
    border: 1px solid rgba(255, 173, 69, 0.12);
    background:
        radial-gradient(circle at 100% 0%, rgba(251, 124, 16, 0.18), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(251, 124, 16, 0.08), transparent 50%),
        linear-gradient(180deg, #1a1614 0%, #131110 100%);
    overflow: hidden;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.wallet-hero::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 124, 16, 0.18), transparent 70%);
    pointer-events: none;
}

.wallet-hero::after {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-strong), var(--accent));
    border-radius: 0 3px 3px 0;
}

.wallet-hero-main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.wallet-hero-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.85;
}

.wallet-hero-value {
    margin-top: 6px;
    font-family: var(--font-sans);
    font-size: 44px;
    font-weight: 800;
    color: var(--cream-50);
    letter-spacing: -1.4px;
    line-height: 1;
    text-shadow: 0 0 32px rgba(251, 124, 16, 0.14);
}

.wallet-hero-meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    color: var(--text-muted);
    font-size: 12.5px;
}
.wallet-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wallet-hero-meta i {
    font-size: 10px;
    opacity: 0.7;
}
.wallet-hero-dot {
    opacity: 0.4;
}

.wallet-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    min-width: 140px;
}

.wallet-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(251, 124, 16, 0.14);
    border: 1px solid rgba(255, 173, 69, 0.22);
    color: var(--cream-50);
    font-size: 13px;
    font-weight: 600;
    transition: 0.15s ease;
    justify-content: flex-start;
}
.wallet-hero-link:hover {
    background: rgba(251, 124, 16, 0.22);
    border-color: rgba(255, 173, 69, 0.4);
}
.wallet-hero-link i {
    font-size: 11px;
    width: 14px;
    text-align: center;
    color: var(--accent-strong);
}
.wallet-hero-link.is-quiet {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-weight: 500;
}
.wallet-hero-link.is-quiet:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--cream-50);
}
.wallet-hero-link.is-quiet i {
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .wallet-hero {
        grid-template-columns: 1fr;
        padding: 20px 20px 18px;
        gap: 16px;
    }
    .wallet-hero-value {
        font-size: 36px;
        letter-spacing: -1.0px;
    }
    .wallet-hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .wallet-hero-link {
        flex: 1 1 30%;
        justify-content: center;
    }
}

/* ===========================================================
   Section C3b — Wallet deposit redesign.
   One full-width deposit card, network grid, hero CTA, address panel.
   =========================================================== */

.wallet-deposit-card {
    margin-bottom: 18px;
    padding: 22px 24px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: linear-gradient(180deg, #1a1614 0%, #131110 100%);
    box-shadow: var(--shadow-1);
}

.wallet-deposit-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.wallet-deposit-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.1px;
}
.wallet-deposit-sub {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.wallet-deposit-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.wallet-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-strong);
    background: rgba(251, 124, 16, 0.10);
    border: 1px solid rgba(255, 173, 69, 0.22);
    line-height: 1.3;
}
.wallet-tag i {
    font-size: 10.5px;
    opacity: 0.85;
}
.wallet-tag em {
    font-style: normal;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 2px;
}
.wallet-tag-quiet {
    color: var(--text-secondary);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    font-weight: 500;
}

/* === Network grid === */
.wallet-network-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

/* Override generic crypto-option styling for the new layout */
.wallet-network.crypto-option {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    min-width: 0;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.012);
    color: var(--text-secondary);
    transition: 0.15s ease;
    text-align: left;
    position: relative;
}
.wallet-network.crypto-option:hover {
    border-color: rgba(255, 173, 69, 0.30);
    background: rgba(251, 124, 16, 0.04);
    color: var(--cream-50);
}
.wallet-network.crypto-option.is-active {
    border-color: rgba(255, 173, 69, 0.5);
    background: rgba(251, 124, 16, 0.10);
    color: var(--cream-50);
    box-shadow: inset 0 0 0 1px rgba(255, 173, 69, 0.18);
}
.wallet-network.crypto-option.is-active::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(251, 124, 16, 0.7);
}
.wallet-network.crypto-option > i {
    font-size: 18px;
    width: 26px;
    text-align: center;
    color: var(--accent-strong);
    flex-shrink: 0;
    opacity: 0.95;
}
.wallet-network-symbol {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    color: var(--cream-50);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.wallet-network-name {
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* === CTA === */
.wallet-deposit-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}
.wallet-deposit-btn {
    width: 100%;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}
.wallet-deposit-btn i {
    font-size: 12px;
    transition: transform 0.18s ease;
}
.wallet-deposit-btn:hover i {
    transform: translateX(3px);
}
.wallet-deposit-helper {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    opacity: 0.8;
}

/* === Address panel === */
.wallet-deposit-card .wallet-address-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 173, 69, 0.16);
    border-radius: 10px;
    background: rgba(251, 124, 16, 0.04);
    display: grid;
    gap: 12px;
}
.wallet-address-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.85;
}
.wallet-address-head [data-wallet-address-label] {
    margin-top: 3px;
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--cream-50);
}
.wallet-address-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.15s ease;
}
.wallet-address-copy i {
    font-size: 11px;
}
.wallet-address-copy:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 173, 69, 0.28);
    color: var(--cream-50);
}
.wallet-deposit-card .wallet-address-code {
    margin: 0;
    padding: 12px 14px;
    min-height: auto;
    border-radius: 8px;
    background: #0c0a09;
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 13px;
    line-height: 1.4;
    color: var(--cream-50);
    word-break: break-all;
    white-space: pre-wrap;
}
.wallet-address-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.45;
}
.wallet-address-note i {
    color: var(--accent-strong);
    font-size: 11px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* === Recent deposits — calmer table-shell === */
.context-profile.page-wallet .table-shell {
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(33, 25, 22, 0.55), rgba(23, 20, 18, 0.55));
}
.context-profile.page-wallet .table-toolbar {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.context-profile.page-wallet .table-toolbar .badge.is-blue {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 11.5px;
    padding: 4px 9px;
    border-radius: 6px;
}
.context-profile.page-wallet .table-toolbar .badge.is-blue i {
    color: var(--accent-strong);
    font-size: 10px;
    opacity: 0.7;
}
.context-profile.page-wallet .table-wrap {
    padding: 4px 6px;
}
.context-profile.page-wallet .empty-state {
    padding: 40px 20px;
}
.context-profile.page-wallet .empty-state h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}
.context-profile.page-wallet .empty-state p {
    font-size: 12.5px;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .wallet-deposit-card {
        padding: 18px 16px 16px;
    }
    .wallet-network-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .wallet-network.crypto-option {
        padding: 10px;
    }
}

/* ===========================================================
   Section D1 — Shop toolbar (Live inventory header).
   Single-row title + bulk actions + per-page switcher.
   =========================================================== */

.context-profile .shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    min-height: 64px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}
.shop-toolbar-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.1px;
}
.shop-toolbar-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}
.shop-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Bulk actions */
.shop-bulk {
    display: inline-flex;
    gap: 6px;
}
.shop-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(255, 173, 69, 0.22);
    background: rgba(251, 124, 16, 0.08);
    color: var(--accent-strong);
    cursor: pointer;
    transition: 0.15s ease;
    line-height: 1;
}
.shop-bulk-btn i {
    font-size: 11px;
    opacity: 0.9;
}
.shop-bulk-btn:hover {
    background: rgba(251, 124, 16, 0.16);
    border-color: rgba(255, 173, 69, 0.4);
    color: var(--cream-50);
}
.shop-bulk-btn.is-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}
.shop-bulk-btn.is-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--cream-50);
}

/* Per-page switcher */
.shop-perpage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
}
.shop-perpage-label {
    padding: 0 8px 0 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.shop-perpage-btn {
    min-width: 30px;
    padding: 5px 8px;
    text-align: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: 0.12s ease;
    line-height: 1.2;
}
.shop-perpage-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--cream-50);
}
.shop-perpage-btn.is-active {
    background: var(--accent);
    color: #1a0c00;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

@media (max-width: 720px) {
    .context-profile .shop-toolbar {
        padding: 12px 14px;
    }
    .shop-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }
    .shop-perpage-label {
        display: none;
    }
}

/* ===========================================================
   Section D2 — Slim Filters card (client shop).
   Flat group accordions, active filter chips, sticky actions.
   =========================================================== */

.context-profile .filters-card--slim {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.context-profile .filters-card--slim .filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    min-height: 64px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.filters-head-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.1px;
}
.filters-head-clear {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-strong);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 6px;
    transition: 0.15s ease;
}
.filters-head-clear:hover {
    background: rgba(251, 124, 16, 0.08);
    color: var(--cream-50);
}

/* Active chips */
.filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.12);
}
.filters-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 9px;
    border-radius: 6px;
    border: 1px solid rgba(255, 173, 69, 0.22);
    background: rgba(251, 124, 16, 0.10);
    color: var(--cream-50);
    font-size: 11.5px;
    text-decoration: none;
    line-height: 1.3;
    max-width: 100%;
    transition: 0.12s ease;
}
.filters-chip-key {
    color: var(--text-muted);
    font-weight: 500;
}
.filters-chip-val {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}
.filters-chip i {
    font-size: 9px;
    opacity: 0.65;
    margin-left: 2px;
    padding: 2px;
    border-radius: 3px;
}
.filters-chip:hover {
    background: rgba(251, 124, 16, 0.18);
    border-color: rgba(255, 173, 69, 0.4);
}
.filters-chip:hover i {
    opacity: 1;
    background: rgba(0, 0, 0, 0.25);
}

/* Form area */
.context-profile .filters-form {
    padding: 12px 14px 14px;
    gap: 8px;
}

/* Slim filter group accordion */
.context-profile .filters-card--slim .filter-group {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    margin: 0 -14px;
    padding: 0 14px;
    background: transparent;
}
.context-profile .filters-card--slim .filter-group:first-of-type {
    border-top: none;
    margin-top: -4px;
}
.context-profile .filters-card--slim .filter-group[open] {
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.012);
}
.context-profile .filters-card--slim .filter-group-title {
    padding: 10px 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.context-profile .filters-card--slim .filter-group-title:hover {
    background: transparent;
    color: var(--cream-50);
}
.context-profile .filters-card--slim .filter-group-title > i:first-child {
    width: 14px;
    text-align: center;
    color: var(--accent-strong);
    font-size: 11px;
    opacity: 0.85;
}
.context-profile .filters-card--slim .filter-group-chevron {
    font-size: 9px;
    color: var(--text-muted);
}
.context-profile .filters-card--slim .filter-group-body {
    padding: 0 0 12px;
    gap: 8px;
}
.context-profile .filters-card--slim .filter-group-body .field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 4px;
}
.context-profile .filters-card--slim .filter-group-body .input,
.context-profile .filters-card--slim .filter-group-body .select {
    padding: 8px 11px;
    font-size: 12.5px;
    border-radius: 7px;
}

/* Sort field at the top of form */
.context-profile .filters-card--slim .filters-form > .field:first-child {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 4px;
}
.context-profile .filters-card--slim .filters-form > .field:first-child label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 4px;
}
.context-profile .filters-card--slim .filters-form > .field:first-child .select {
    padding: 8px 11px;
    font-size: 12.5px;
    border-radius: 7px;
}

/* Actions row */
.context-profile .filters-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 12px 14px 0;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.context-profile .filters-actions .btn {
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    justify-content: center;
}
.context-profile .filters-actions .btn-secondary {
    padding: 9px 11px;
}
.context-profile .filters-actions .btn-secondary span {
    display: none;
}

@media (max-width: 1040px) {
    .context-profile .filters-actions {
        padding: 12px 14px 0;
    }
}

/* ===========================================================
   Section D3 — Compact pager (client shop).
   First / Prev / [N / total] / Next / Last with jump-to-page.
   =========================================================== */

.context-profile .pagination-row.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}
.context-profile .pager-info {
    font-size: 12px;
    color: var(--text-muted);
}
.context-profile .pager-info strong {
    color: var(--cream-50);
    font-weight: 700;
}
.context-profile .pager-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
}
.pager-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 11px;
    transition: 0.12s ease;
}
.pager-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--cream-50);
}
.pager-btn.is-disabled {
    opacity: 0.32;
    pointer-events: none;
}
.pager-jump {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    margin: 0 2px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    height: 28px;
}
.pager-jump-input {
    width: 38px;
    height: 22px;
    padding: 0 4px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.3);
    color: var(--cream-50);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.pager-jump-input::-webkit-outer-spin-button,
.pager-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pager-jump-input:focus {
    outline: none;
    border-color: rgba(255, 173, 69, 0.4);
    box-shadow: 0 0 0 2px rgba(251, 124, 16, 0.16);
}
.pager-jump-total {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

@media (max-width: 720px) {
    .context-profile .pagination-row.pager {
        justify-content: center;
        padding: 12px;
    }
}

/* ===========================================================
   Section D4 — Shop table row visuals.
   Card cell with brand icon, type/level chips, valid pill, action buttons.
   =========================================================== */

.context-profile .shop-table {
    width: 100%;
    border-collapse: collapse;
}
.context-profile .shop-table th,
.context-profile .shop-table td {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
    vertical-align: middle;
}
.context-profile .shop-table th {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: left;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.12);
}
.context-profile .shop-table th.num,
.context-profile .shop-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.context-profile .shop-table th.action,
.context-profile .shop-table td.action {
    text-align: right;
    width: 88px;
}
.context-profile .shop-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.12s ease;
}
.context-profile .shop-table tbody tr:hover {
    background: rgba(251, 124, 16, 0.025);
}

/* Card / BIN cell */
.card-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.card-cell-icon {
    font-size: 18px;
    width: 22px;
    text-align: center;
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.95;
}
.card-cell-icon.brand-visa { color: #1a1f71; }
.card-cell-icon.brand-mc { color: #eb001b; }
.card-cell-icon.brand-amex { color: #2e77bb; }
.card-cell-icon.brand-disc { color: #ff6000; }
.card-cell-icon.brand-jcb { color: #0e4c96; }
.card-cell-icon.brand-diners { color: #0079be; }
/* Brighten brand colors on dark theme for legibility */
.context-profile .card-cell-icon.brand-visa { color: #5d8eff; }
.context-profile .card-cell-icon.brand-mc { color: #ff6f6f; }
.context-profile .card-cell-icon.brand-amex { color: #5fb0ff; }
.context-profile .card-cell-icon.brand-disc { color: #ff8a3d; }
.context-profile .card-cell-icon.brand-jcb { color: #6b9bff; }
.context-profile .card-cell-icon.brand-diners { color: #5dc1ff; }

.card-cell-bin {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cream-50);
    letter-spacing: 0.02em;
}
.cell-mono {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 12px;
    color: var(--text-secondary);
}

/* Generic chip */
.context-profile .shop-table .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Type chip — Credit/Debit/Other */
.type-chip.is-credit {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.22);
}
.type-chip.is-debit {
    color: #93c5fd;
    background: rgba(147, 197, 253, 0.10);
    border-color: rgba(147, 197, 253, 0.22);
}
.type-chip.is-other {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Level chip — semantic tiers */
.level-chip.is-premium {
    color: #f1d28a;
    background: rgba(241, 210, 138, 0.10);
    border-color: rgba(241, 210, 138, 0.22);
}
.level-chip.is-gold {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.20);
}
.level-chip.is-standard {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.level-chip.is-prepaid {
    color: #c4b5fd;
    background: rgba(196, 181, 253, 0.08);
    border-color: rgba(196, 181, 253, 0.20);
}

/* Valid pill — color reflects validity bucket */
.valid-pill {
    display: inline-block;
    min-width: 44px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.valid-pill.valid-high {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.22);
}
.valid-pill.valid-mid {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.22);
}
.valid-pill.valid-low {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Price cell emphasis */
.context-profile .shop-table .price-cell {
    color: var(--cream-50);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Row actions */
.row-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}
.row-act {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: 0.12s ease;
    padding: 0;
    font-size: 11px;
}
.row-act:hover {
    color: var(--cream-50);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 173, 69, 0.32);
}
.row-act-buy {
    background: rgba(251, 124, 16, 0.14);
    border-color: rgba(255, 173, 69, 0.32);
    color: var(--accent-strong);
}
.row-act-buy:hover {
    background: var(--accent);
    color: #1a0c00;
    border-color: var(--accent);
}

@media (max-width: 1280px) {
    .context-profile .shop-table .cell-mono,
    .context-profile .shop-table td {
        font-size: 12px;
    }
}

/* ===========================================================
   Section D5 — Profile Settings redesign.
   Slim cards, focused token block, clean rule rows.
   =========================================================== */

.context-profile .settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
@media (max-width: 1040px) { .context-profile .settings-grid { grid-template-columns: 1fr; } }

.context-profile .settings-card {
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: linear-gradient(180deg, #1a1614 0%, #131110 100%);
    box-shadow: var(--shadow-1);
    margin-bottom: 0;
}
.context-profile .settings-rules { margin-top: 16px; }

.settings-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.settings-card-kicker {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.settings-card-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.1px;
}
.settings-card-sub {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 520px;
}
.settings-card-icon {
    color: var(--accent-strong);
    font-size: 16px;
    opacity: 0.75;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 173, 69, 0.18);
    background: rgba(251, 124, 16, 0.06);
}

.settings-id-pill {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    color: var(--accent-strong);
    background: rgba(251, 124, 16, 0.08);
    border: 1px solid rgba(255, 173, 69, 0.22);
    letter-spacing: 0.04em;
}

/* Token block */
.settings-token {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-token-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-token-label > span:first-child {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.settings-token-hint {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.8;
}
.settings-token-row {
    display: flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.22);
}
.settings-token-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--cream-50);
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 6px 10px;
}
.settings-token-input:focus {
    box-shadow: none;
}
.settings-token-actions {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.settings-token-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: 0.12s ease;
}
.settings-token-btn:hover {
    color: var(--cream-50);
    background: rgba(255, 173, 69, 0.10);
    border-color: rgba(255, 173, 69, 0.32);
}
.settings-token-btn--lg {
    width: 38px;
    height: 38px;
    font-size: 13px;
}
.settings-token-foot {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
}
.settings-token-foot i {
    color: var(--accent-strong);
    margin-top: 2px;
    font-size: 11px;
    flex-shrink: 0;
}

/* Form on right card */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.settings-form .field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 6px;
}
.settings-form .input {
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 8px;
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
}
.settings-new-token {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.settings-new-token .input { flex: 1; }
.settings-helper {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    opacity: 0.85;
}
.settings-submit {
    align-self: flex-start;
    padding: 9px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* Auto-purchase rule rows */
.settings-rules-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.auto-purchase-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 32px;
    gap: 8px;
    align-items: end;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color 0.12s ease;
}
.auto-purchase-row:hover {
    border-color: rgba(255, 173, 69, 0.22);
}
.auto-purchase-row .ap-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.auto-purchase-row .ap-field label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.auto-purchase-row .input {
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 6px;
}
.auto-purchase-row .ap-remove {
    width: 32px;
    height: 32px;
    align-self: end;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: 0.12s ease;
}
.auto-purchase-row .ap-remove:hover {
    color: #ff8a8a;
    border-color: rgba(255, 138, 138, 0.32);
    background: rgba(255, 138, 138, 0.06);
}

.settings-rules-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.settings-add-rule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px dashed rgba(255, 173, 69, 0.32);
    background: transparent;
    color: var(--accent-strong);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.12s ease;
}
.settings-add-rule:hover {
    background: rgba(251, 124, 16, 0.06);
    border-style: solid;
}

@media (max-width: 720px) {
    .auto-purchase-row {
        grid-template-columns: 1fr 1fr;
    }
    .auto-purchase-row .ap-field:first-child { grid-column: 1 / -1; }
    .auto-purchase-row .ap-remove { grid-column: 2; justify-self: end; }
}

/* ===========================================================
   Section D6 — Seller dashboard hero + stats.
   Compact hero with primary actions and 3-column stat grid.
   =========================================================== */

.context-seller .seller-hero {
    margin-bottom: 16px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background:
        radial-gradient(circle at 0% 0%, rgba(251, 124, 16, 0.10), transparent 45%),
        linear-gradient(180deg, #1a1614 0%, #131110 100%);
    box-shadow: var(--shadow-1);
}
.seller-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.seller-hero-kicker {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.seller-hero-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.2px;
}
.seller-hero-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.seller-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.12s ease;
}
.seller-hero-btn i { font-size: 11px; opacity: 0.85; }
.seller-hero-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 173, 69, 0.32);
    color: var(--cream-50);
}
.seller-hero-btn.is-primary {
    background: var(--accent);
    color: #1a0c00;
    border-color: var(--accent);
}
.seller-hero-btn.is-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #1a0c00;
}

.seller-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
}
.seller-stat {
    padding: 14px 16px;
    background: rgba(13, 11, 10, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.seller-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.seller-stat-value {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.seller-stat-meta {
    font-size: 12px;
    color: var(--accent-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .seller-stat-grid { grid-template-columns: 1fr; }
    .context-seller .seller-hero { padding: 18px 16px; }
    .seller-hero-title { font-size: 16px; }
}

/* Reuse shop-table on seller pages */
.context-seller .shop-table { width: 100%; border-collapse: collapse; }
.context-seller .shop-table th,
.context-seller .shop-table td {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
    vertical-align: middle;
}
.context-seller .shop-table th {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.12);
}
.context-seller .shop-table th.num,
.context-seller .shop-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.context-seller .shop-table th.action,
.context-seller .shop-table td.action { text-align: right; width: 100px; }
.context-seller .shop-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.12s ease;
}
.context-seller .shop-table tbody tr:hover { background: rgba(251, 124, 16, 0.025); }
.context-seller .shop-table .price-cell { color: var(--cream-50); font-weight: 700; }
.context-seller .shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    min-height: 64px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

/* ===========================================================
   Section D7 — Seller bases layout (filters + table grid).
   =========================================================== */

.context-seller .seller-bases-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) { .context-seller .seller-bases-grid { grid-template-columns: 1fr; } }

.context-seller .filters-card.filters-card--slim {
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: linear-gradient(180deg, #1a1614 0%, #131110 100%);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.context-seller .filters-card .filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    min-height: 64px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.context-seller .filters-card .filters-head-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.1px;
}
.context-seller .filters-card .filters-head-clear {
    font-size: 11.5px;
    color: var(--accent-strong);
    text-decoration: none;
    font-weight: 600;
}
.context-seller .filters-card .filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 18px 0;
}
.context-seller .filters-card .filters-chip {
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(251, 124, 16, 0.06);
    border: 1px solid rgba(255, 173, 69, 0.18);
    padding: 4px 8px;
    border-radius: 999px;
}
.context-seller .filters-card .filters-chip b { color: var(--text-muted); font-weight: 600; margin-right: 3px; }
.context-seller .filters-card .filters-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px 16px;
}
.context-seller .filter-group { display: flex; flex-direction: column; gap: 5px; }
.context-seller .filter-group label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.context-seller .filter-group .input,
.context-seller .filter-group .select {
    padding: 8px 10px;
    font-size: 12.5px;
    border-radius: 7px;
}
.context-seller .filter-range {
    display: grid;
    grid-template-columns: 1fr 12px 1fr;
    gap: 6px;
    align-items: center;
}
.context-seller .filter-range > span {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}
.context-seller .filters-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 4px;
}
.context-seller .filters-actions .btn {
    padding: 8px 10px;
    font-size: 12.5px;
    border-radius: 7px;
}

/* Seller pager (reuse profile pager visuals) */
.context-seller .pagination-row.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.context-seller .pager-info { font-size: 12px; color: var(--text-muted); }
.context-seller .pager-controls { display: inline-flex; gap: 4px; }
.context-seller .pager-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 7px;
    text-decoration: none;
    font-size: 11px;
    transition: 0.12s ease;
}
.context-seller .pager-btn:hover { color: var(--cream-50); border-color: rgba(255, 173, 69, 0.32); }
.context-seller .pager-btn.is-disabled { opacity: 0.35; pointer-events: none; }

/* Seller chips: status colors */
.context-seller .chip.type-chip { padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.context-seller .chip.is-credit { background: rgba(72, 187, 120, 0.10); color: #66c98a; border: 1px solid rgba(72, 187, 120, 0.25); }
.context-seller .chip.is-debit { background: rgba(255, 173, 69, 0.10); color: var(--accent-strong); border: 1px solid rgba(255, 173, 69, 0.25); }
.context-seller .chip.is-rejected { background: rgba(255, 99, 99, 0.10); color: #ff7c7c; border: 1px solid rgba(255, 99, 99, 0.25); }
.context-seller .chip.is-other { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); border: 1px solid rgba(255, 255, 255, 0.06); }

.context-seller .valid-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.context-seller .valid-pill.valid-high { background: rgba(72, 187, 120, 0.10); color: #66c98a; border: 1px solid rgba(72, 187, 120, 0.20); }
.context-seller .valid-pill.valid-mid { background: rgba(255, 173, 69, 0.10); color: var(--accent-strong); border: 1px solid rgba(255, 173, 69, 0.22); }
.context-seller .valid-pill.valid-low { background: rgba(255, 99, 99, 0.10); color: #ff7c7c; border: 1px solid rgba(255, 99, 99, 0.20); }

.context-seller .row-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: 0.12s ease;
}
.context-seller .row-act:hover {
    color: var(--accent-strong);
    border-color: rgba(255, 173, 69, 0.32);
    background: rgba(251, 124, 16, 0.06);
}

.context-seller .cell-mono {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.context-seller .shop-toolbar-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.1px;
}
.context-seller .shop-toolbar-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}
.context-seller .shop-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.12s ease;
    cursor: pointer;
}
.context-seller .shop-bulk-btn:hover { color: var(--cream-50); border-color: rgba(255, 173, 69, 0.32); background: rgba(255, 255, 255, 0.03); }
.context-seller .shop-bulk-btn.is-primary {
    background: var(--accent);
    color: #1a0c00;
    border-color: var(--accent);
}
.context-seller .shop-bulk-btn.is-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #1a0c00;
}
.context-seller .shop-perpage {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    margin-left: 8px;
    padding: 3px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
}
.context-seller .shop-perpage-label { font-size: 10.5px; color: var(--text-muted); padding: 0 6px 0 4px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.context-seller .shop-perpage-btn {
    padding: 4px 9px;
    font-size: 11.5px;
    color: var(--text-secondary);
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
}
.context-seller .shop-perpage-btn.is-active { background: var(--accent); color: #1a0c00; }
.context-seller .shop-toolbar-right { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ===========================================================
   Section D8 — Sell Database banners (info + warn).
   =========================================================== */

.context-seller .sell-banners {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 980px) { .context-seller .sell-banners { grid-template-columns: 1fr; } }

.sell-banner {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, #1a1614 0%, #131110 100%);
}
.sell-banner-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 173, 69, 0.18);
    background: rgba(251, 124, 16, 0.06);
    color: var(--accent-strong);
    font-size: 13px;
}
.sell-banner--warn .sell-banner-icon {
    border-color: rgba(255, 99, 99, 0.22);
    background: rgba(255, 99, 99, 0.06);
    color: #ff8a8a;
}
.sell-banner-body { flex: 1; min-width: 0; }
.sell-banner-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.1px;
    margin-bottom: 2px;
}
.sell-banner-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.sell-banner-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.sell-banner-row .input { flex: 1 1 240px; padding: 8px 10px; font-size: 12.5px; }

/* ===========================================================
   Section D9 — Seller withdraw hero + form.
   =========================================================== */

.context-seller .withdraw-hero {
    margin-bottom: 16px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(251, 124, 16, 0.10), transparent 45%),
        linear-gradient(180deg, #1a1614 0%, #131110 100%);
    box-shadow: var(--shadow-1);
}
.withdraw-hero-kicker {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.withdraw-hero-amount {
    font-family: var(--font-sans);
    font-size: 38px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -1px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.withdraw-hero-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.withdraw-hero-meta span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.withdraw-hero-meta i { color: var(--accent-strong); font-size: 11px; }

.context-seller .withdraw-form-card {
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: linear-gradient(180deg, #1a1614 0%, #131110 100%);
}
.withdraw-form { display: flex; flex-direction: column; gap: 14px; }
.withdraw-form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}
@media (max-width: 720px) { .withdraw-form-row { grid-template-columns: 1fr; } }

.context-seller .wallet-network-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
}
.context-seller .wallet-network {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.012);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.12s ease;
}
.context-seller .wallet-network i { color: var(--accent-strong); font-size: 13px; }
.context-seller .wallet-network:hover { border-color: rgba(255, 173, 69, 0.32); color: var(--cream-50); }
.context-seller .wallet-network.is-active {
    border-color: var(--accent);
    background: rgba(251, 124, 16, 0.08);
    color: var(--cream-50);
}

/* ===========================================================
   Section D10 — Tools pages (BIN / Card checker).
   =========================================================== */

.context-profile .tools-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 980px) { .context-profile .tools-grid { grid-template-columns: 1fr; } }

.context-profile .tools-panel,
.context-profile .tools-aside {
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: linear-gradient(180deg, #1a1614 0%, #131110 100%);
    box-shadow: var(--shadow-1);
}
.context-profile .tools-panel .panel-head,
.context-profile .tools-aside .panel-head { margin-bottom: 14px; }

.context-profile .code-area {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 12.5px;
    line-height: 1.55;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 9px;
}

.tools-examples {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tools-example {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.tools-example > span:first-child {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}
.tools-example code,
.tools-example strong {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 12px;
    color: var(--cream-50);
    font-weight: 700;
}
.tools-hint {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* ===========================================================
   Section D11 — News / FAQ / Support calm pass.
   =========================================================== */

.context-profile .news-feed { display: flex; flex-direction: column; gap: 10px; }
.context-profile .news-item {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px;
    background: linear-gradient(180deg, #1a1614 0%, #131110 100%);
    transition: border-color 0.15s ease;
}
.context-profile .news-item:hover { border-color: rgba(255, 173, 69, 0.20); }
.context-profile .news-item.is-important {
    border-color: rgba(255, 173, 69, 0.32);
    background:
        linear-gradient(180deg, rgba(251, 124, 16, 0.04) 0%, transparent 60%),
        linear-gradient(180deg, #1a1614 0%, #131110 100%);
}
.context-profile .news-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.context-profile .news-item-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.1px;
    display: block;
    margin-bottom: 3px;
}
.context-profile .news-item-head .table-subtle { font-size: 11.5px; color: var(--text-muted); }
.context-profile .news-item-body { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

/* FAQ */
.context-profile .faq-list { display: flex; flex-direction: column; gap: 6px; }
.context-profile .faq-entry {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.012);
    transition: border-color 0.12s ease;
}
.context-profile .faq-entry[open] { border-color: rgba(255, 173, 69, 0.22); background: rgba(251, 124, 16, 0.025); }
.context-profile .faq-question {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cream-50);
}
.context-profile .faq-question::-webkit-details-marker { display: none; }
.context-profile .faq-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.15s ease; }
.context-profile .faq-entry[open] .faq-chevron { transform: rotate(180deg); color: var(--accent-strong); }
.context-profile .faq-answer {
    padding: 0 16px 14px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Support chat */
.context-profile .chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.22);
    margin-bottom: 14px;
    max-height: 420px;
    overflow-y: auto;
}
.context-profile .message-bubble {
    max-width: 78%;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cream-50);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.025);
}
.context-profile .message-bubble.is-user {
    align-self: flex-end;
    background: rgba(251, 124, 16, 0.10);
    border-color: rgba(255, 173, 69, 0.25);
}
.context-profile .message-bubble.is-admin {
    align-self: flex-start;
}
.context-profile .message-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.context-profile .message-meta strong { color: var(--accent-strong); font-weight: 700; }

/* ===========================================================
   Section D12 — Shop list (card-based, replaces shop-table).
   Concept: each row is a small horizontal "card" with brand
   plaque on the left, BIN+bank+meta in the middle, type/level
   chips, and a right-hand buy block. No more dense table.
   =========================================================== */

.context-profile.page-shop .table-wrap { padding: 0; }

.context-profile .shop-list {
    list-style: none;
    margin: 0;
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.context-profile .shop-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.012);
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.05s ease;
}
.context-profile .shop-card:hover {
    border-color: rgba(255, 173, 69, 0.22);
    background: rgba(251, 124, 16, 0.025);
}
.context-profile .shop-card[data-in-cart="1"] {
    border-color: rgba(255, 173, 69, 0.40);
    background: rgba(251, 124, 16, 0.05);
}

/* Brand plaque (left) */
.shop-card-brand {
    width: 56px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.32);
    flex-shrink: 0;
}
.shop-card-brand-label {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--cream-50);
}
.shop-card-brand.brand-visa     { background: linear-gradient(135deg, #1a1f71 0%, #0f1346 100%); border-color: rgba(63, 81, 181, 0.5); }
.shop-card-brand.brand-visa     .shop-card-brand-label { color: #f7c02b; }
.shop-card-brand.brand-mc       { background: linear-gradient(135deg, #4a1a16 0%, #2a0c0a 100%); border-color: rgba(235, 67, 49, 0.45); }
.shop-card-brand.brand-mc       .shop-card-brand-label { color: #ff8a3a; }
.shop-card-brand.brand-amex     { background: linear-gradient(135deg, #006fcf 0%, #00477f 100%); border-color: rgba(0, 111, 207, 0.5); }
.shop-card-brand.brand-amex     .shop-card-brand-label { color: #ffffff; }
.shop-card-brand.brand-disc     { background: linear-gradient(135deg, #3a2710 0%, #1a1208 100%); border-color: rgba(255, 117, 24, 0.45); }
.shop-card-brand.brand-disc     .shop-card-brand-label { color: #ff9933; }
.shop-card-brand.brand-jcb      { background: linear-gradient(135deg, #0a3a78 0%, #061f40 100%); border-color: rgba(8, 95, 184, 0.5); }
.shop-card-brand.brand-jcb      .shop-card-brand-label { color: #e84c3d; }
.shop-card-brand.brand-diners   { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); border-color: rgba(255, 255, 255, 0.18); }
.shop-card-brand.brand-union    { background: linear-gradient(135deg, #1a3a78 0%, #061a40 100%); border-color: rgba(228, 30, 38, 0.4); }
.shop-card-brand.brand-union    .shop-card-brand-label { color: #ff5b62; }
.shop-card-brand.brand-maestro  { background: linear-gradient(135deg, #06339b 0%, #021744 100%); border-color: rgba(0, 152, 207, 0.5); }
.shop-card-brand.brand-maestro  .shop-card-brand-label { color: #ffd24a; }
.shop-card-brand.brand-other    { background: rgba(255, 255, 255, 0.04); }

/* Main column */
.shop-card-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.shop-card-line { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }

.shop-card-line--head { gap: 10px; }
.shop-card-bin {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 14px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: 0.04em;
}
.shop-card-dot { color: var(--text-muted); opacity: 0.5; }
.shop-card-exp {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}
.shop-card-valid {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.shop-card-valid.valid-high { color: #66c98a; background: rgba(72, 187, 120, 0.10); border-color: rgba(72, 187, 120, 0.25); }
.shop-card-valid.valid-mid  { color: var(--accent-strong); background: rgba(255, 173, 69, 0.10); border-color: rgba(255, 173, 69, 0.25); }
.shop-card-valid.valid-low  { color: #ff7c7c; background: rgba(255, 99, 99, 0.10); border-color: rgba(255, 99, 99, 0.22); }

.shop-card-bank {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.shop-card-line--meta { gap: 12px; }
.shop-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.shop-card-meta i {
    font-size: 9.5px;
    color: var(--accent-strong);
    opacity: 0.7;
}
.shop-card-meta--info { color: var(--accent-strong); opacity: 0.85; }
.shop-card-meta--info i { color: var(--accent-strong); opacity: 1; }

/* Type / level tags column */
.shop-card-tags {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    flex-shrink: 0;
}
.shop-card-tag {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}
.shop-card-tag.tag-type.is-credit { color: #66c98a; background: rgba(72, 187, 120, 0.10); border-color: rgba(72, 187, 120, 0.25); }
.shop-card-tag.tag-type.is-debit  { color: var(--accent-strong); background: rgba(255, 173, 69, 0.10); border-color: rgba(255, 173, 69, 0.25); }
.shop-card-tag.tag-type.is-other  { color: var(--text-muted); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); }

.shop-card-tag.tag-level { font-weight: 600; text-transform: none; letter-spacing: 0.02em; }
.shop-card-tag.tag-level.is-premium  { color: #d8bea1; background: rgba(216, 190, 161, 0.07); border-color: rgba(216, 190, 161, 0.22); }
.shop-card-tag.tag-level.is-gold     { color: #f5b85b; background: rgba(245, 184, 91, 0.07); border-color: rgba(245, 184, 91, 0.22); }
.shop-card-tag.tag-level.is-standard { color: #a09a92; background: rgba(160, 154, 146, 0.07); border-color: rgba(160, 154, 146, 0.22); }
.shop-card-tag.tag-level.is-prepaid  { color: #8fb6d8; background: rgba(143, 182, 216, 0.07); border-color: rgba(143, 182, 216, 0.22); }

/* Buy block (right) */
.shop-card-buy {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.shop-card-price {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--cream-50);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
    min-width: 56px;
    text-align: right;
}
.shop-card-actions { display: inline-flex; gap: 4px; }
.shop-card-act {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: 0.12s ease;
}
.shop-card-act:hover {
    border-color: rgba(255, 173, 69, 0.32);
    color: var(--cream-50);
    background: rgba(251, 124, 16, 0.06);
}
.shop-card-act--buy:hover {
    background: var(--accent);
    color: #1a0c00;
    border-color: var(--accent);
}
.shop-card-act:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* In-cart visual state for the add button */
.shop-card[data-in-cart="1"] .shop-card-act--add {
    color: #66c98a;
    border-color: rgba(72, 187, 120, 0.35);
    background: rgba(72, 187, 120, 0.10);
}

/* Responsive collapse */
@media (max-width: 1080px) {
    .context-profile .shop-card { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .shop-card-tags {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        margin-top: 2px;
    }
    .shop-card-buy { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 720px) {
    .context-profile .shop-list { padding: 8px 8px 12px; }
    .context-profile .shop-card {
        grid-template-columns: 48px 1fr;
        gap: 10px;
        padding: 10px 12px;
    }
    .shop-card-brand { width: 48px; height: 34px; }
    .shop-card-brand-label { font-size: 9.5px; }
    .shop-card-tags {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .shop-card-buy {
        grid-column: 1 / -1;
        grid-row: auto;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding: 8px 0 0 0;
        margin-top: 4px;
        justify-content: space-between;
    }
    .shop-card-bank { font-size: 12px; }
    .shop-card-meta { font-size: 11px; max-width: 160px; }
}

/* ===========================================================
   Section D13 — Shop bar (replaces the 4 metric cards on /profile/shop).
   Single horizontal pill-strip just under the topbar.
   =========================================================== */

.context-profile.page-shop .metrics-grid { display: none !important; }

.context-profile.page-shop .shop-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 18px;
    margin: 0 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.012);
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.shop-bar-left, .shop-bar-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.shop-bar-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #66c98a;
    box-shadow: 0 0 0 0 rgba(102, 201, 138, 0.45);
    animation: shopBarPulse 2.4s ease-out infinite;
    flex-shrink: 0;
}
@keyframes shopBarPulse {
    0%   { box-shadow: 0 0 0 0 rgba(102, 201, 138, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(102, 201, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(102, 201, 138, 0); }
}
.shop-bar-stat { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.shop-bar-stat strong { color: var(--cream-50); font-weight: 700; margin-left: 4px; }
.shop-bar-stat--strong { color: var(--cream-50); font-weight: 700; }
.shop-bar-sep { color: var(--text-muted); opacity: 0.4; }

@media (max-width: 720px) {
    .context-profile.page-shop .shop-bar {
        padding: 9px 12px;
        font-size: 11.5px;
        gap: 10px;
    }
    .shop-bar-left, .shop-bar-right { gap: 6px; }
    .shop-bar-sep { display: none; }
}

/* ===========================================================
   Section D14 — Step 2: Card list refinements + Step 3 quick chips.
   - Brand plaque now carries BIN big + brand mini-label
   - Bank moves to head, exp+country+extras to meta line
   - Hover removed orange flood, only border accent
   - Quick chips above filter form
   =========================================================== */

/* Brand plaque: BIN big, brand small */
.context-profile .shop-card { gap: 12px; }
.context-profile .shop-card:hover { background: transparent; }
.context-profile .shop-card[data-in-cart="1"] { background: rgba(251, 124, 16, 0.04); }

.shop-card-brand {
    width: 78px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 8px;
}
.shop-card-brand-mini {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.10em;
    opacity: 0.85;
}
.shop-card-brand-bin {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--cream-50);
    align-self: flex-end;
    width: 100%;
    text-align: right;
}
.shop-card-brand.brand-other .shop-card-brand-bin { color: var(--text-secondary); }

/* Card head row: bank + valid */
.shop-card-line--head {
    align-items: baseline;
    gap: 10px;
}
.shop-card-bank {
    font-size: 13px;
    font-weight: 600;
    color: var(--cream-50);
}
.shop-card-line--head .shop-card-valid { margin-left: auto; }

/* Meta row: exp + country + base + seller + extras */
.shop-card-line--meta { gap: 10px; }
.shop-card-line--meta .shop-card-exp {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.shop-card-meta--muted { color: var(--text-muted); opacity: 0.75; max-width: 220px; }

/* Inline extras as small +chips */
.shop-card-extras {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}
.shop-card-extra {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    color: var(--accent-strong);
    background: rgba(255, 173, 69, 0.07);
    border: 1px solid rgba(255, 173, 69, 0.18);
    letter-spacing: 0.02em;
    text-transform: lowercase;
}
.shop-card-extra--more {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Tags inline (was column) */
.context-profile .shop-card-tags {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* In-cart add-button: green check style */
.shop-card[data-in-cart="1"] .shop-card-act--add { color: #66c98a; border-color: rgba(72, 187, 120, 0.35); background: rgba(72, 187, 120, 0.10); }

@media (max-width: 720px) {
    .shop-card-brand { width: 64px; height: 38px; padding: 3px 6px; }
    .shop-card-brand-mini { font-size: 7.5px; }
    .shop-card-brand-bin { font-size: 12px; }
    .shop-card-extras { width: 100%; margin-left: 0; }
}

/* ----- Quick chips above filter form ----- */
.filters-quick {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
}
.filters-quick-row { display: flex; flex-wrap: wrap; gap: 5px; }
.filters-quick-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: 0.12s ease;
    line-height: 1.5;
}
.filters-quick-chip:hover {
    border-color: rgba(255, 173, 69, 0.32);
    color: var(--cream-50);
}
.filters-quick-chip.is-on {
    border-color: var(--accent);
    background: rgba(251, 124, 16, 0.14);
    color: var(--cream-50);
}

/* Compact filters-card head */
.filters-head-title { font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); }

/* ===========================================================
   Section D15 — Step 4-6: pager refresh, mobile filter FAB
   bottom-sheet, in-cart inline toggle.
   =========================================================== */

.context-profile.page-shop .pager--shop {
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 4px;
}
.pager--shop .pager-info { color: var(--text-muted); font-size: 12px; }
.pager--shop .pager-info strong { color: var(--cream-50); font-weight: 700; font-variant-numeric: tabular-nums; }
.pager--shop .pager-controls { gap: 6px; }
.pager--shop .pager-btn {
    width: auto;
    padding: 0 12px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.018);
    text-decoration: none;
    transition: 0.12s ease;
}
.pager--shop .pager-btn:hover { border-color: rgba(255, 173, 69, 0.32); color: var(--cream-50); }
.pager--shop .pager-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.pager--shop .pager-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-muted);
    font-size: 12px;
}
.pager--shop .pager-jump-label { color: var(--text-muted); }
.pager--shop .pager-jump-input {
    width: 56px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    color: var(--cream-50);
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 12px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}
.pager--shop .pager-jump-input::-webkit-outer-spin-button,
.pager--shop .pager-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pager--shop .pager-jump-total { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ----- Floating filters FAB (mobile only) ----- */
.shop-filters-fab {
    display: none;
    position: fixed;
    right: 14px;
    bottom: 18px;
    z-index: 60;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 173, 69, 0.45);
    background: var(--accent);
    color: #1a0c00;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.shop-filters-fab:hover { filter: brightness(1.05); }

@media (max-width: 920px) {
    .context-profile .shop-grid { grid-template-columns: 1fr; }
    .pager--shop .pager-controls { flex-wrap: wrap; }
}
@media (min-width: 921px) {
    .shop-filters-fab { display: none !important; }
}

/* ----- In-cart visual flip (when JS toggles data-in-cart="1") ----- */
.shop-card[data-in-cart="1"] .shop-card-act--add::before {
    content: '\f00c'; /* fa check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}
.shop-card[data-in-cart="1"] .shop-card-act--add i { display: none; }

/* ===========================================================
   Section D16 — Wallet QR code on deposit address.
   =========================================================== */
.wallet-address-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: stretch;
    margin-top: 10px;
}
.wallet-address-qr {
    width: 168px;
    height: 168px;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.wallet-address-qr canvas, .wallet-address-qr img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    image-rendering: pixelated;
}
.wallet-address-qr:empty { display: none; }
.wallet-address-body .wallet-address-code {
    margin: 0;
    align-self: center;
    width: 100%;
    word-break: break-all;
    white-space: pre-wrap;
}
@media (max-width: 720px) {
    .wallet-address-body { grid-template-columns: 1fr; justify-items: center; }
    .wallet-address-qr { width: 148px; height: 148px; }
}

/* ===========================================================
   Section D17 — Shop layout v2:
   • Sidebar filters → off-canvas drawer (left edge), opened by
     a button in the toolbar. On desktop too — not just mobile.
   • Table-shell goes FULL WIDTH.
   • Card row tightened: smaller plaque, no extras wrap, single
     line meta with truncation.
   =========================================================== */

/* Make grid 1-column → table fills horizontally */
.context-profile.page-shop .shop-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
}

/* Hide the inline sidebar by default; we open it as drawer */
.context-profile.page-shop .filters-card--slim {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: 320px;
    max-width: 86vw;
    z-index: 80;
    border-radius: 0 14px 14px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: none;
    background: var(--surface, #14110d);
    transform: translateX(-105%);
    transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
    padding: 18px 16px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 18px 0 36px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
}
.context-profile.page-shop .filters-card--slim > form {
    flex: 1 1 auto;
    min-height: 0;
}
body.shop-filters-open .filters-card--slim,
body.shop-filters-open.context-profile.page-shop .filters-card--slim {
    transform: translateX(0) !important;
}
body.shop-filters-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 75;
}

/* Toolbar Filters trigger button */
.shop-toolbar .shop-filters-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.018);
    color: var(--cream-50);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.12s ease;
}
.shop-toolbar .shop-filters-trigger:hover {
    border-color: rgba(255, 173, 69, 0.36);
}
.shop-toolbar .shop-filters-trigger.has-active {
    border-color: var(--accent);
    background: rgba(251, 124, 16, 0.10);
}
.shop-toolbar .shop-filters-trigger .filters-trigger-count {
    background: var(--accent);
    color: #1a0c00;
    border-radius: 999px;
    padding: 1px 7px;
    font-weight: 800;
    font-size: 10.5px;
    line-height: 1.2;
}

/* Hide old mobile FAB — we use one trigger now */
.shop-filters-fab { display: none !important; }

/* ----------- Tighter card row (no overflow) ----------- */
.context-profile .shop-card {
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    gap: 12px;
    padding: 9px 14px;
    align-items: center;
}

/* Brand plaque smaller */
.shop-card-brand {
    width: 64px;
    height: 38px;
    padding: 3px 7px;
}
.shop-card-brand-mini { font-size: 8px; letter-spacing: 0.08em; }
.shop-card-brand-bin { font-size: 12.5px; }

/* Main column — single meta line, truncated, no overflowing extras */
.shop-card-main { gap: 2px; }
.shop-card-line--head .shop-card-bank {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.shop-card-line--meta {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 8px;
}
.shop-card-line--meta .shop-card-exp {
    font-size: 10.5px;
    padding: 1px 5px;
    flex-shrink: 0;
}
.shop-card-line--meta .shop-card-meta {
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}
.shop-card-line--meta .shop-card-meta--muted { max-width: 130px; }

/* Extras: allow wrap to 2 lines (no +N collapse, no truncation) */
.shop-card-extras {
    flex-wrap: wrap;
    margin-left: auto;
    flex-shrink: 0;
    max-width: 56%;
    row-gap: 3px;
    justify-content: flex-end;
}
.shop-card-extra {
    font-size: 9.5px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* Tags column tighter */
.context-profile .shop-card-tags {
    gap: 5px;
    flex-shrink: 0;
}
.shop-card-tag {
    font-size: 10px;
    padding: 2px 7px;
}

/* Buy block tighter */
.shop-card-buy {
    gap: 8px;
    padding-left: 10px;
}
.shop-card-price {
    font-size: 15px;
    min-width: 50px;
}
.shop-card-act {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 11px;
}

/* Responsive collapse — only the right-most chips wrap on narrow */
@media (max-width: 980px) {
    .context-profile .shop-card {
        grid-template-columns: 56px minmax(0, 1fr) auto;
    }
    .context-profile .shop-card-tags {
        grid-column: 2;
        grid-row: 2;
        margin-top: 2px;
    }
    .shop-card-buy { grid-column: 3; grid-row: 1 / span 2; }
    .shop-card-extras { display: none; }
}
@media (max-width: 720px) {
    .context-profile .shop-card {
        grid-template-columns: 48px 1fr;
        padding: 9px 11px;
    }
    .shop-card-brand { width: 48px; height: 32px; padding: 2px 5px; }
    .shop-card-brand-mini { font-size: 7px; }
    .shop-card-brand-bin { font-size: 11px; }
    .shop-card-tags { grid-column: 1 / -1; }
    .shop-card-buy {
        grid-column: 1 / -1;
        grid-row: auto;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding: 7px 0 0 0;
        margin-top: 4px;
        justify-content: space-between;
    }
}

/* D17 cont — drawer head */
.filters-head { display: flex; align-items: center; justify-content: space-between; }
.filters-head-actions { display: inline-flex; align-items: center; gap: 8px; }
.filters-head-close {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: 0.12s ease;
}
.filters-head-close:hover { color: var(--cream-50); border-color: rgba(255, 173, 69, 0.32); }

/* ===========================================================
   Section D18 — Topbar user meta (ID / clock / Logout)
   Placed top-right; replaces sidebar-footer for client/seller.
   =========================================================== */
.topbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.topbar-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.topbar-meta-row i {
    font-size: 11px;
    opacity: 0.75;
}
.topbar-meta-role {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 10.5px;
    padding-left: 4px;
    margin-left: 2px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.topbar-meta-row--clock { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.topbar-meta-logout {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.12s ease;
}
.topbar-meta-logout:hover {
    color: #ff7b6b;
    border-color: rgba(255, 123, 107, 0.4);
    background: rgba(255, 123, 107, 0.08);
}
@media (max-width: 720px) {
    .topbar-meta { gap: 8px; margin-left: 6px; padding-left: 8px; }
    .topbar-meta-row span:not([data-sidebar-clock]) { display: none; }
    .topbar-meta-role { display: none; }
}

/* ===========================================================
   Section D19 — Base field as searchable picker (chevron hint)
   =========================================================== */
.context-profile.page-shop .filters-form .field input[list] {
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.45) 50%),
                      linear-gradient(135deg, rgba(255, 255, 255, 0.45) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 26px;
}
.context-profile.page-shop .filters-form .field input[list]:focus {
    background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                      linear-gradient(135deg, var(--accent) 50%, transparent 50%);
}

/* ===========================================================
   Section D20 — Drawer fit: sticky Search bar + room for last field.
   Fixes "see Base but can't reach it" caused by Search overlapping.
   =========================================================== */
.context-profile.page-shop .filters-card--slim {
    padding-bottom: 0;
}
.context-profile.page-shop .filters-card--slim .filters-form {
    padding-bottom: 6px;
    grid-auto-rows: min-content;
}
.context-profile.page-shop .filters-card--slim .filters-actions {
    position: sticky;
    bottom: 0;
    margin: 12px -16px 0;
    padding: 12px 16px 14px;
    background: linear-gradient(180deg, rgba(20, 17, 13, 0.0) 0%, var(--surface, #14110d) 22%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 5;
}
/* Make sure every field, label and input is fully visible */
.context-profile.page-shop .filters-card--slim .filter-group[open] .filter-group-body { display: grid; }
.context-profile.page-shop .filters-card--slim .field { min-width: 0; }
.context-profile.page-shop .filters-card--slim .field .input,
.context-profile.page-shop .filters-card--slim .field .select { width: 100%; box-sizing: border-box; }