/* =====================================================================
 * gt-dark.css — Fresh "shark.lc-like" dark UI for Faka Tokyo theme
 * Target: Tokyo theme's tokyo-* class structure (don't change templates)
 * Override: Tokyo's default light styling entirely
 * Last updated: 2026-09-16
 * ===================================================================== */

:root {
    --gt-bg:           #05070c;
    --gt-bg-soft:      #0c0f15;
    --gt-surface:      rgba(16, 22, 30, 0.75);
    --gt-surface-2:    rgba(22, 28, 38, 0.85);
    --gt-line:         rgba(255, 255, 255, 0.08);
    --gt-line-strong:  rgba(255, 255, 255, 0.15);
    --gt-text:         #eef2f8;
    --gt-text-muted:   #97a4b8;
    --gt-text-dim:     #5b6b84;
    --gt-accent:       #5a7cbf;
    --gt-accent-light: #7fa1e6;
    --gt-accent-glow:  rgba(90, 124, 191, 0.35);
    --gt-accent-rgb:   90, 124, 191;
    --gt-danger:       #f87171;
    --gt-success:      #34d399;
    --gt-warn:         #fbbf24;
    --gt-radius-sm:    8px;
    --gt-radius-md:    14px;
    --gt-radius-lg:    20px;
    --gt-radius-pill:  9999px;
    --gt-shadow-soft:  0 3px 6px rgba(0,0,0,0.4);
    --gt-shadow-elev:  0 10px 24px rgba(0,0,0,0.5);
    --gt-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- Base / Page ---------- */
html, body {
    margin: 0;
    padding: 0;
    background: var(--gt-bg);
    color: var(--gt-text);
    font-family: var(--gt-font);
    font-size: 14px;
    line-height: 1.5;
}
body.tokyo-theme {
    background:
        radial-gradient(60% 80% at 50% -10%, rgba(90,124,191,0.18), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(155,89,182,0.10), transparent 70%),
        var(--gt-bg);
    background-attachment: fixed;
    color: var(--gt-text);
}

/* Hide Tokyo's original starfield / decoration if any */
body.tokyo-theme::before { display: none !important; }

/* ---------- Page Frame ---------- */
.tokyo-page-frame {
    min-height: 100vh;
    background: transparent;
}
.tokyo-main {
    padding: 0 0 80px;
    margin: 0 auto;
    max-width: 1200px;
}
.tokyo-shell {
    width: calc(100% - 32px);
    margin: 0 auto;
    padding-top: 0 !important;
}

/* ---------- Top Navigation ---------- */
.tokyo-nav-shell {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0;
    margin: 0;
    background: transparent;
    border-bottom: none;
}
.tokyo-nav-wrap {
    width: calc(100% - 64px);
    max-width: 1200px;
    margin: 0 auto;
}
.tokyo-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 36px;
    background: rgba(16, 22, 30, 0.88);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.tokyo-brand-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.tokyo-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.tokyo-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: var(--gt-radius-pill);
    object-fit: cover;
    border: 2px solid var(--gt-accent);
    background: var(--gt-bg-soft);
}
.tokyo-brand-name {
    color: var(--gt-text) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.02em;
    text-shadow:
        0 0 8px var(--gt-accent-glow),
        0 0 16px rgba(var(--gt-accent-rgb), 0.4);
}
.tokyo-nav-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}
.tokyo-nav-links {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tokyo-nav-link {
    color: var(--gt-text-muted) !important;
    padding: 8px 6px !important;
    border-radius: var(--gt-radius-pill) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    transition: 0.2s;
    background: transparent !important;
    gap: 4px !important;
}
.tokyo-nav-link:hover,
.tokyo-nav-link.is-active {
    color: var(--gt-text) !important;
    background: rgba(var(--gt-accent-rgb), 0.15) !important;
    box-shadow: 0 0 12px rgba(var(--gt-accent-rgb), 0.2);
}
.tokyo-nav-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tokyo-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--gt-line-strong);
    border-radius: var(--gt-radius-pill);
    background: var(--gt-surface);
    color: var(--gt-text);
}
.tokyo-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2a30;
}
.tokyo-user-name {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---------- Mobile nav toggle (hide by default - we use sidebar) ---------- */
.tokyo-nav-toggle,
.tokyo-mobile-sidebar-backdrop,
.tokyo-mobile-sidebar-close,
.tokyo-mobile-filter-trigger {
    display: none !important;
}

/* ---------- Shop Layout (grid) ---------- */
.tokyo-shop-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

/* ---------- Sidebar (category tree) ---------- */
.tokyo-sidebar-panel {
    position: sticky;
    top: 96px;
    background: var(--gt-surface) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--gt-line) !important;
    border-radius: var(--gt-radius-lg);
    overflow: hidden;
    box-shadow: var(--gt-shadow-soft);
}
.tokyo-sidebar-panel .panel-header {
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--gt-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-kicker {
    color: var(--gt-accent) !important;
    font-size: 0.7rem !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
    text-shadow: 0 0 8px var(--gt-accent-glow);
}
.tokyo-panel-title,
.panel-title,
.tokyo-current-name {
    color: var(--gt-text) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.02em;
    margin: 0;
}
.tokyo-sidebar-panel .panel-body {
    padding: 12px 12px 16px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.tokyo-category-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tokyo-tree-feedback {
    padding: 16px 8px;
    color: var(--gt-text-muted);
    font-size: 0.86rem;
    text-align: center;
}
.tokyo-category-node { display: contents; }
.tokyo-category-row { padding-left: 0 !important; }
.tokyo-category-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--gt-radius-md) !important;
    background: transparent !important;
    color: var(--gt-text-muted) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    transition: 0.2s;
}
.tokyo-category-link:hover,
.tokyo-category-link.is-active {
    background: rgba(var(--gt-accent-rgb), 0.12) !important;
    border-color: rgba(var(--gt-accent-rgb), 0.4) !important;
    color: var(--gt-text) !important;
    box-shadow: 0 0 12px rgba(var(--gt-accent-rgb), 0.15);
}
.tokyo-category-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--gt-radius-sm);
    background: center/cover no-repeat var(--gt-bg-soft);
    flex: 0 0 30px;
}
.tokyo-category-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
}
.tokyo-category-count {
    background: rgba(var(--gt-accent-rgb), 0.2) !important;
    color: var(--gt-accent-light) !important;
    border-radius: var(--gt-radius-pill) !important;
    padding: 2px 8px !important;
    font-size: 0.7rem !important;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

/* ---------- Catalog (right side) ---------- */
.tokyo-catalog-panel {
    background: var(--gt-surface) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--gt-line) !important;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--gt-shadow-soft);
    min-height: 600px;
}
.tokyo-catalog-panel .panel-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--gt-line);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.tokyo-catalog-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.tokyo-search-combo {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--gt-radius-pill);
    background: rgba(16, 22, 30, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-width: 240px;
    transition: border-color 0.15s, background 0.15s;
}
.tokyo-search-combo:focus-within {
    border-color: rgba(74, 144, 226, 0.5);
    background: rgba(16, 22, 30, 0.7);
}
.tokyo-searchbox-combo {
    flex: 1;
    height: 30px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--gt-text);
    outline: none;
    font-size: 0.86rem;
}
.tokyo-searchbox-combo::placeholder { color: var(--gt-text-dim); }

.tokyo-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    border: 1px solid var(--gt-line-strong) !important;
    border-radius: var(--gt-radius-pill) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: 0.2s;
}
.tokyo-button-light {
    background: rgba(255,255,255,0.04) !important;
    color: var(--gt-text) !important;
}
.tokyo-button-light:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: var(--gt-accent) !important;
}
.tokyo-button-dark {
    background: var(--gt-accent) !important;
    color: #fff !important;
    border-color: var(--gt-accent) !important;
    box-shadow: 0 0 12px var(--gt-accent-glow);
}
.tokyo-button-dark:hover {
    background: var(--gt-accent-light) !important;
    box-shadow: 0 0 20px var(--gt-accent-glow);
    transform: translateY(-1px);
}

.tokyo-catalog-body { padding: 0; }
.tokyo-table-wrap {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: auto;
    min-height: 400px;
    position: relative;
}
.tokyo-table-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0,0,0,0.5);
    color: var(--gt-text-muted);
    font-size: 0.86rem;
    z-index: 5;
}
.tokyo-table-loading.is-loading { display: flex; }
.tokyo-table-loading[aria-hidden="true"]:not(.is-loading) { display: none !important; }
.tokyo-table-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gt-line-strong);
    border-top-color: var(--gt-accent);
    border-radius: 50%;
    animation: gt-spin 0.8s linear infinite;
}
@keyframes gt-spin { to { transform: rotate(360deg); } }

.tokyo-commodity-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.tokyo-commodity-table thead th {
    background: rgba(0,0,0,0.3);
    color: var(--gt-text-muted);
    padding: 14px 16px;
    border-bottom: 1px solid var(--gt-line);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}
.tokyo-commodity-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gt-line);
    vertical-align: middle;
    color: var(--gt-text);
}
.tokyo-commodity-table tbody tr {
    transition: background 0.2s;
}
.tokyo-commodity-table tbody tr:hover {
    background: rgba(var(--gt-accent-rgb), 0.06);
}
.tokyo-commodity-row {
    transition: 0.3s;
}
.tokyo-commodity-anchor {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tokyo-commodity-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--gt-radius-md);
    background: center/cover no-repeat var(--gt-bg-soft);
    flex: 0 0 50px;
    border: 1px solid var(--gt-line);
}
.tokyo-commodity-name {
    color: var(--gt-text);
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tokyo-commodity-price,
.tokyo-commodity-price-main {
    color: var(--gt-accent-light) !important;
    font-size: 0.95rem !important;
    font-weight: 700;
}
.tokyo-commodity-stock,
.tokyo-commodity-muted {
    color: var(--gt-text-muted);
    font-size: 0.86rem;
}
.tokyo-commodity-action-link {
    background: var(--gt-accent) !important;
    color: #fff !important;
    border: 1px solid var(--gt-accent) !important;
    border-radius: var(--gt-radius-pill) !important;
    padding: 6px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}
.tokyo-commodity-action-link:hover {
    background: var(--gt-accent-light) !important;
    box-shadow: 0 0 16px var(--gt-accent-glow);
    transform: translateY(-1px);
}
.tokyo-empty-row td {
    padding: 60px 20px !important;
    color: var(--gt-text-muted) !important;
    text-align: center !important;
    font-size: 0.9rem;
}

/* ---------- Inline Item Panel (master-detail) ---------- */
#tokyo-inline-item-panel {
    background: rgba(12, 16, 24, 0.7) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--gt-line) !important;
    border-radius: var(--gt-radius-lg);
    margin-top: 18px;
    box-shadow: var(--gt-shadow-elev);
    overflow: hidden;
}
.tokyo-item-unified-panel {
    background: transparent !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 1024px) {
    .tokyo-shop-layout {
        grid-template-columns: 1fr;
    }
    .tokyo-sidebar-panel {
        position: static;
    }
    .tokyo-catalog-panel .panel-header {
        flex-direction: column;
        gap: 12px;
    }
    .tokyo-search-combo { width: 100%; min-width: 0; }
}
@media (max-width: 640px) {
    .tokyo-shell { width: calc(100% - 16px); }
    .tokyo-commodity-table thead th,
    .tokyo-commodity-table tbody td { padding: 10px 8px; font-size: 0.82rem; }
    .tokyo-commodity-thumb { width: 40px; height: 40px; flex-basis: 40px; }
}
/* =====================================================================
 * gt-dark-fix1.css — patch over gt-dark.css to fix nav rendering
 * Fixes:
 *   - "购物车" looking like a button (Bootstrap nav-link default override)
 *   - "简" character from lang chip looking bare
 *   - Spacing between nav items
 * ===================================================================== */

/* Reset Bootstrap nav-link defaults that leak through */
.tokyo-nav .nav-link,
.tokyo-nav-links .nav-link,
.tokyo-nav-link {
    color: var(--gt-text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 8px 14px !important;
    border-radius: var(--gt-radius-pill) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: 0.18s ease !important;
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
}
.tokyo-nav .nav-link:hover,
.tokyo-nav-links .nav-link:hover,
.tokyo-nav-link:hover,
.tokyo-nav-link.is-active {
    color: var(--gt-text) !important;
    background: rgba(var(--gt-accent-rgb), 0.14) !important;
    box-shadow: 0 0 10px rgba(var(--gt-accent-rgb), 0.18) !important;
}
.tokyo-nav .nav-link:focus,
.tokyo-nav-links .nav-link:focus,
.tokyo-nav-link:focus {
    box-shadow: 0 0 0 2px rgba(var(--gt-accent-rgb), 0.4) !important;
}

/* Bootstrap's li.nav-item default - remove extra spacing */
.tokyo-nav-links .nav-item,
.tokyo-nav .nav-item {
    margin: 0 !important;
}

/* Lang chip button - make it look like a small inline pill */
.tokyo-lang-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 36px !important;
    min-width: 70px !important;
    padding: 0 14px !important;
    border: 1px solid var(--gt-line-strong) !important;
    border-radius: var(--gt-radius-pill) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--gt-text-muted) !important;
    font-size: 0.85rem !important;
    cursor: pointer;
    transition: 0.18s;
}
.tokyo-lang-chip:hover,
.tokyo-lang-chip[aria-expanded="true"] {
    color: var(--gt-text) !important;
    border-color: var(--gt-accent) !important;
    background: rgba(var(--gt-accent-rgb), 0.12) !important;
}
.tokyo-lang-chip [data-lang-label] {
    color: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    min-width: 16px;
    text-align: center;
}

/* Bootstrap dropdown-menu override */
.tokyo-dropdown-menu {
    background: var(--gt-surface-2) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--gt-line-strong) !important;
    border-radius: var(--gt-radius-md) !important;
    box-shadow: var(--gt-shadow-elev) !important;
    padding: 6px !important;
    min-width: 180px;
}
.tokyo-dropdown-menu .dropdown-item {
    color: var(--gt-text) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.86rem !important;
    transition: 0.15s;
}
.tokyo-dropdown-menu .dropdown-item:hover,
.tokyo-dropdown-menu .dropdown-item:focus {
    background: rgba(var(--gt-accent-rgb), 0.18) !important;
    color: var(--gt-text) !important;
}
.tokyo-dropdown-divider-wrap {
    padding: 4px 0;
}
.tokyo-dropdown-divider-wrap .dropdown-divider,
.tokyo-dropdown-menu .dropdown-divider {
    border-color: var(--gt-line) !important;
    margin: 0 !important;
}

/* User chip - balance text styling */
.tokyo-user-balance {
    color: var(--gt-text-muted) !important;
    font-size: 0.72rem !important;
    display: block;
    margin-top: 1px;
}

/* Force the navbar collapse to always show on desktop (Bootstrap might hide it) */
.tokyo-nav .navbar-collapse,
.tokyo-nav .collapse {
    display: flex !important;
    flex-basis: auto !important;
}
.tokyo-nav .collapse:not(.show) {
    display: flex !important;
}

/* Hide mobile toggle on desktop since we're forcing collapse to show */
.tokyo-nav-toggle {
    display: none !important;
}

/* Brand area fix */
.tokyo-brand-chip {
    display: inline-flex;
    align-items: center;
}
/* =====================================================================
 * gt-dark-fix2.css — add subtle noise/starfield texture to body bg
 * Matches shark.lc's cellular grain aesthetic
 * ===================================================================== */

/* Layered noise via inline data URI SVG fractal noise — no extra HTTP request */
body.tokyo-theme {
    background:
        radial-gradient(60% 80% at 50% -10%, rgba(90,124,191,0.18), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(155,89,182,0.10), transparent 70%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.6 0 0 0 0 0.9 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        var(--gt-bg);
    background-attachment: fixed, fixed, fixed, fixed;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-size: auto, auto, 160px 160px, auto;
}

/* Subtle vignette to draw eye to center */
body.tokyo-theme::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
    z-index: 0;
}

/* Keep content above the vignette */
.tokyo-page-frame, .tokyo-nav-shell {
    position: relative;
    z-index: 1;
}
.tokyo-page-frame {
    z-index: 1;
}/* =====================================================================
 * gt-dark-fix3.css — fix user chip layout
 * Issue: tokyo-user-avatar was position:absolute, pushing user name
 *        awkwardly to top-right of avatar instead of inline next to it
 * Fix: avatar becomes inline-flex, sits next to text horizontally
 * ===================================================================== */

.tokyo-user-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 16px 4px 4px !important;
}
.tokyo-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    border: 1.5px solid var(--gt-line-strong) !important;
    flex-shrink: 0 !important;
}
.tokyo-user-meta {
    display: inline-flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
    align-items: flex-start !important;
    position: static !important;
    text-align: left !important;
    margin-left: 0 !important;
}
.tokyo-user-name {
    color: var(--gt-text) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
}
.tokyo-user-balance {
    color: var(--gt-text-muted) !important;
    font-size: 0.7rem !important;
    margin-top: 1px !important;
}

/* Bootstrap caret on dropdown-toggle was bleeding as text-only - hide it */
.tokyo-user-chip.dropdown-toggle::after,
.tokyo-lang-chip.dropdown-toggle::after {
    display: inline-block !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    color: var(--gt-text-muted) !important;
    opacity: 0.7 !important;
}/* =====================================================================
 * gt-dark-fix4.css — push user chip + lang chip to far right
 * Issue: tokyo-nav-main had flex:1, taking full width and squashing
 *        tokyo-nav-tools against nav-links instead of pushing to right
 * Fix: nav-links takes auto width (shrinks to content), nav-main
 *      uses space-between, nav-tools sits at far right
 * ===================================================================== */

.tokyo-nav-wrap {
    width: calc(100% - 32px);
    max-width: 1200px;
    margin: 0 auto;
}

.tokyo-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 16px !important;
}

.tokyo-nav-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.tokyo-nav-links {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.tokyo-nav-tools {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-left: auto !important;
}

.tokyo-brand-wrap {
    flex-shrink: 0 !important;
}/* =====================================================================
 * gt-dark-fix5.css — constrain nav width to 1200px max
 * Issue: fix4 made nav-wrap 100% wide with the rounded outer panel
 *        stretching to full viewport — too wide
 * Fix: re-add max-width 1200px on nav-wrap, center horizontally
 *      Keep padding for outer breathing room
 * ===================================================================== */

.tokyo-nav-shell {
    width: 100% !important;
    padding: 16px 0 !important;
    display: flex !important;
    justify-content: center !important;
}

.tokyo-nav-wrap {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}/* =====================================================================
 * gt-dark-fix6.css — convert Tokyo category tree to shark.lc-style grid
 * Match shark.lc reference: circular 50px icons + name, 10 per row
 * Tokyo's buildTree() produces .tokyo-category-node .tokyo-category-row
 * .tokyo-category-link with .tokyo-category-icon (round bg image),
 * .tokyo-category-name, and .tokyo-category-count.
 * We flatten the recursive structure visually via CSS grid + flex.
 * ===================================================================== */

.tokyo-sidebar-panel .panel-body {
    padding: 16px !important;
    max-height: none !important;
}

#tokyo-category-tree,
.tokyo-category-tree {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Each tree node becomes a grid cell */
.tokyo-category-node {
    display: contents !important;
}

/* Inner row becomes the visible card */
.tokyo-category-row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Flatten recursive depth - hide indent */
.tokyo-category-row[style*="--tokyo-depth"] {
    margin-left: 0 !important;
}

/* Card button - shark.lc style: rounded pill with icon + name */
.tokyo-category-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 56px !important;
    padding: 6px 10px 6px 6px !important;
    border: 1px solid var(--gt-line, rgba(255,255,255,0.12)) !important;
    border-radius: 14px !important;
    background: rgba(20, 22, 30, 0.85) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    color: var(--gt-text, #e8edf5) !important;
    text-decoration: none !important;
    transition: 0.15s !important;
    text-align: left !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    font-weight: 600 !important;
    outline: none !important;
    cursor: pointer !important;
}
.tokyo-category-link:hover {
    background: rgba(90, 124, 191, 0.12) !important;
    border-color: rgba(90, 124, 191, 0.4) !important;
    transform: translateY(-1px) !important;
}
.tokyo-category-link.is-active {
    background: rgba(90, 124, 191, 0.22) !important;
    border-color: var(--gt-accent, #5a7cbf) !important;
    box-shadow: 0 0 12px rgba(90, 124, 191, 0.25) !important;
}

/* Circular icon */
.tokyo-category-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background-color: rgba(255,255,255,0.05) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Text container */
.tokyo-category-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
}

.tokyo-category-name {
    color: var(--gt-text, #e8edf5) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.tokyo-category-side {
    display: none !important;
}

/* Responsive grid breakpoints */
@media (max-width: 1280px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(8, 1fr) !important;
    }
}
@media (max-width: 1024px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}
@media (max-width: 768px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}
@media (max-width: 640px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
@media (max-width: 480px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Hide empty-tree fallback message styling */
.tokyo-tree-feedback {
    color: var(--gt-text-muted, #8a96ad) !important;
    font-size: 0.85rem !important;
    padding: 24px !important;
    text-align: center !important;
    grid-column: 1 / -1 !important;
}/* =====================================================================
 * gt-dark-fix7.css — A: categories on top banner, catalog full-width below
 * Move category tree from sidebar to top of main area as full-width grid.
 * Hide sidebar visually but keep DOM (so Faka JS still works).
 * ===================================================================== */

.tokyo-shop-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
}

.tokyo-sidebar-panel {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(20,28,40,0.55) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
    padding: 20px 24px !important;
    order: 1 !important;
}

.tokyo-sidebar-panel .tokyo-index-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.tokyo-sidebar-panel .tokyo-index-heading .panel-kicker {
    color: var(--gt-accent) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}
.tokyo-sidebar-panel .tokyo-index-heading .panel-title {
    color: var(--gt-text) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin: 4px 0 0 0 !important;
}
.tokyo-sidebar-panel .tokyo-mobile-sidebar-close {
    display: none !important;
}
.tokyo-sidebar-panel .tokyo-mobile-sidebar-backdrop {
    display: none !important;
}

.tokyo-catalog-panel {
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
    background: rgba(20,28,40,0.45) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
    overflow: hidden !important;
}

.tokyo-catalog-panel .panel-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.tokyo-sidebar-panel .panel-body {
    padding: 0 !important;
    max-height: none !important;
}

#tokyo-category-tree, .tokyo-category-tree {
    grid-template-columns: repeat(10, 1fr) !important;
    gap: 10px !important;
}

.tokyo-category-link {
    height: 64px !important;
    padding: 8px 12px 8px 8px !important;
    gap: 10px !important;
    border-radius: 16px !important;
}
.tokyo-category-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
}
.tokyo-category-name {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

.tokyo-catalog-heading .panel-title {
    color: var(--gt-text) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
}
.tokyo-catalog-heading .panel-kicker {
    color: var(--gt-accent) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

@media (max-width: 1024px) {
    .tokyo-shop-layout {
        flex-direction: row !important;
    }
    .tokyo-sidebar-panel {
        width: 220px !important;
        flex-shrink: 0 !important;
    }
    .tokyo-catalog-panel {
        flex: 1 !important;
    }
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}/* =====================================================================
 * gt-dark-fix8.css — proper gaps between category banner, catalog, items
 * Issues from fix7: category grid cards overlap catalog panel; commodity
 * table rows have no padding between them.
 * Fixes:
 *   - Add bigger gap between category banner and catalog panel
 *   - Use grid auto-rows with explicit row gap
 *   - Add spacing between commodity table rows
 *   - Make category-tree grid NOT collapse parent panel
 * ===================================================================== */

.tokyo-shop-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px 40px !important;
    width: 100% !important;
}

.tokyo-sidebar-panel {
    margin-bottom: 0 !important;
}

.tokyo-sidebar-panel,
.tokyo-catalog-panel {
    align-self: stretch !important;
    width: 100% !important;
}

.tokyo-sidebar-panel {
    padding: 22px 26px !important;
}

.tokyo-sidebar-panel .panel-body {
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

#tokyo-category-tree,
.tokyo-category-tree {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 12px 10px !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.tokyo-category-node {
    display: block !important;
}
.tokyo-category-row {
    display: block !important;
    width: 100% !important;
}
.tokyo-category-link {
    height: 64px !important;
    padding: 8px 12px 8px 8px !important;
    gap: 10px !important;
    border-radius: 16px !important;
    margin: 0 !important;
}

.tokyo-catalog-panel .panel-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.tokyo-table-wrap {
    padding: 8px 12px 24px !important;
}

.tokyo-commodity-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

.tokyo-commodity-table tbody tr {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
}
.tokyo-commodity-table tbody tr td {
    padding: 16px 18px !important;
    border: 0 !important;
}
.tokyo-commodity-table tbody tr td:first-child {
    border-top-left-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
}
.tokyo-commodity-table tbody tr td:last-child {
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}

.tokyo-empty-row td {
    text-align: center !important;
    color: var(--gt-text-muted) !important;
    padding: 40px 20px !important;
    background: transparent !important;
}

.tokyo-catalog-panel {
    padding: 0 !important;
}
.tokyo-catalog-panel .panel-body {
    padding: 0 !important;
}

.tokyo-mobile-sidebar-backdrop,
.tokyo-mobile-sidebar-close,
.tokyo-mobile-filter-trigger {
    display: none !important;
}

@media (max-width: 1024px) {
    .tokyo-shop-layout {
        flex-direction: row !important;
        gap: 16px !important;
    }
    .tokyo-sidebar-panel {
        width: 220px !important;
        flex-shrink: 0 !important;
        padding: 16px 18px !important;
    }
    .tokyo-catalog-panel {
        flex: 1 !important;
    }
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .tokyo-mobile-sidebar-backdrop,
    .tokyo-mobile-sidebar-close {
        display: block !important;
    }
    .tokyo-mobile-filter-trigger {
        display: inline-flex !important;
    }
}/* =====================================================================
 * gt-dark-fix9.css — REAL root cause fix
 * Faka Tokyo's ORIGINAL .tokyo-shop-layout used:
 *   display: grid;
 *   grid-template-columns: 320px 1fr;
 * This creates the two-column layout (sidebar 320px + catalog).
 * fix7/fix8 used `display: flex !important` which OVERRODE grid BUT
 * didn't override grid-template-columns — leaving a 320px column intact.
 * Result: layout still two-column, just with flex instead of grid.
 *
 * FIX: use display:grid with grid-template-columns: 1fr (single column)
 * and gap. This properly makes sidebar full-width above catalog.
 * ===================================================================== */

.tokyo-shop-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 24px !important;
    align-items: stretch !important;
    max-width: 1200px !important;
    margin: 24px auto 0 !important;
    padding: 0 20px 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tokyo-sidebar-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    top: auto !important;
}

.tokyo-catalog-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 1024px) {
    .tokyo-shop-layout {
        grid-template-columns: 220px 1fr !important;
        grid-template-rows: auto !important;
        gap: 16px !important;
    }
    .tokyo-sidebar-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
    }
    .tokyo-catalog-panel {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
    }
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}/* =====================================================================
 * gt-dark-fix10.css — 8-column grid with centered justify
 * User noted asymmetry: 7 cols × 4 rows with last row having only 3.
 * Switch to 8 cols (24 categories = 3 full rows).
 * Larger card width to fill the 1200px container better.
 * ===================================================================== */

#tokyo-category-tree,
.tokyo-category-tree {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 14px 14px !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.tokyo-category-node {
    display: block !important;
}

.tokyo-category-row {
    display: block !important;
    width: 100% !important;
}

.tokyo-category-link {
    width: 100% !important;
    height: 72px !important;
    padding: 10px 14px 10px 10px !important;
    gap: 10px !important;
    border-radius: 16px !important;
}

.tokyo-category-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
}

.tokyo-category-name {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

/* Responsive: fewer cols on smaller screens */
@media (max-width: 1280px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(7, 1fr) !important;
    }
}
@media (max-width: 1024px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}
@media (max-width: 768px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
@media (max-width: 640px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 480px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}/* =====================================================================
 * gt-dark-fix11.css — match shark.lc density
 * Shark.lc reference: 10+ columns, compact cards, small icons, tight gaps
 * User has 24 categories: use 12 cols = 2 perfect rows
 * Reduce card height to 60px, icon to 38px, gap to 8px
 * ===================================================================== */

#tokyo-category-tree,
.tokyo-category-tree {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.tokyo-category-node {
    display: block !important;
}

.tokyo-category-row {
    display: block !important;
    width: 100% !important;
}

.tokyo-category-link {
    width: 100% !important;
    height: 60px !important;
    padding: 6px 8px 6px 6px !important;
    gap: 8px !important;
    border-radius: 12px !important;
}

.tokyo-category-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
}

.tokyo-category-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    line-height: 1.15 !important;
}

.tokyo-category-name {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

@media (max-width: 1280px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(10, 1fr) !important;
    }
}
@media (max-width: 1024px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(8, 1fr) !important;
    }
}
@media (max-width: 768px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}
@media (max-width: 640px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}
@media (max-width: 480px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}/* =====================================================================
 * gt-dark-fix12.css — fix outer container overflow
 * Faka .tokyo-main had max-width:1200px; .tokyo-shell width:calc(100%-32px)
 * Inner .tokyo-shop-layout was capped at 1200px but children
 * (sidebar/catalog panels) overflowed because the outer container was wider.
 * Result: banner stretched past 1200px and got cut off at 1366px viewport.
 *
 * Fix: cap tokyo-main at 1200px, tokyo-shell 100%, sidebar panel max 100%.
 * Also cap tokyo-page-frame max-width and overflow:hidden.
 * ===================================================================== */

.tokyo-page-frame {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    overflow: visible !important;
}

.tokyo-main {
    max-width: 1200px !important;
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: 24px 0 80px !important;
    box-sizing: border-box !important;
}

.tokyo-shell {
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
}

.tokyo-shop-layout {
    width: calc(100% - 32px) !important;
    max-width: 1200px !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.tokyo-sidebar-panel,
.tokyo-catalog-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}/* =====================================================================
 * gt-dark-fix13.css — 8 cols (24 cats = 3 perfect rows)
 * User feedback: do 8 per row
 * 24 categories / 8 cols = 3 perfect rows
 * Bigger cards (72px tall, 50px icon, 14px radius) so 8 fit nicely
 * ===================================================================== */

#tokyo-category-tree,
.tokyo-category-tree {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.tokyo-category-node {
    display: block !important;
}

.tokyo-category-row {
    display: block !important;
    width: 100% !important;
}

.tokyo-category-link {
    width: 100% !important;
    height: 72px !important;
    padding: 8px 12px 8px 8px !important;
    gap: 10px !important;
    border-radius: 14px !important;
}

.tokyo-category-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 50% !important;
}

.tokyo-category-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
}

.tokyo-category-name {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

@media (max-width: 1280px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}
@media (max-width: 1024px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}
@media (max-width: 768px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
@media (max-width: 640px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 480px) {
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}/* =====================================================================
 * gt-dark-fix14.css — make grid respect banner inner padding
 * User reported: category cards overflow past banner right edge.
 * Fix:
 * 1. minmax(0, 1fr) prevents min-content from forcing track wider
 * 2. Reduce shop-layout padding (banner has its own padding)
 * 3. box-sizing + max-width + min-width:0 everywhere
 * ===================================================================== */

.tokyo-shop-layout {
    padding: 0 !important;
    margin: 24px auto 0 !important;
}

.tokyo-sidebar-panel {
    padding: 20px !important;
}

.tokyo-sidebar-panel .panel-body {
    padding: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#tokyo-category-tree,
.tokyo-category-tree {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.tokyo-category-node,
.tokyo-category-row {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.tokyo-category-link {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 72px !important;
    padding: 8px 12px 8px 8px !important;
    gap: 10px !important;
    border-radius: 14px !important;
}

.tokyo-category-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.tokyo-category-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
}

.tokyo-category-name {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}/* =====================================================================
 * gt-dark-fix15.css — reduce icon size from 50px to 38px
 * User: icon could be smaller
 * Smaller icons let 8 cards fit more comfortably within 1200px banner
 * ===================================================================== */

.tokyo-category-link {
    height: 58px !important;
    padding: 6px 10px 6px 6px !important;
    gap: 8px !important;
    border-radius: 12px !important;
}

.tokyo-category-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border-radius: 50% !important;
}

.tokyo-category-name {
    font-size: 0.75rem !important;
}/* =====================================================================
 * gt-dark-fix16.css — cards adapt to name length (shark.lc style)
 * Switch from fixed grid columns to flex-wrap where each card
 * takes only as much width as its content needs (icon + name).
 * Result: long-named cards are wider, short ones narrower, like SHARK.
 * ===================================================================== */

#tokyo-category-tree,
.tokyo-category-tree {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.tokyo-category-node {
    display: contents !important;
}

.tokyo-category-row {
    display: block !important;
}

.tokyo-category-link {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    height: 44px !important;
    padding: 6px 14px 6px 6px !important;
    gap: 8px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.025) !important;
    color: var(--gt-text, #e8edf5) !important;
    box-sizing: border-box !important;
    transition: 0.15s !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.tokyo-category-link:hover {
    background: rgba(90,124,191,0.12) !important;
    border-color: rgba(90,124,191,0.4) !important;
    transform: translateY(-1px) !important;
}

.tokyo-category-link.is-active {
    background: rgba(90,124,191,0.22) !important;
    border-color: var(--gt-accent, #5a7cbf) !important;
    box-shadow: 0 0 12px rgba(90,124,191,0.25) !important;
}

.tokyo-category-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 50% !important;
    background-color: rgba(255,255,255,0.05) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.tokyo-category-copy {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.tokyo-category-name {
    color: var(--gt-text, #e8edf5) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tokyo-category-side {
    display: none !important;
}/* =====================================================================
 * gt-dark-fix17.css — explicit flex-direction: row
 * Faka original .tokyo-category-tree was:
 *   display: flex; flex-direction: column; // vertical list!
 * My fix16 set display:flex + flex-wrap but didn't force direction,
 * so cards stacked 1 per row.
 *
 * Fix: explicitly force flex-direction:row + flex-wrap:wrap
 * ===================================================================== */

#tokyo-category-tree,
.tokyo-category-tree {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.tokyo-category-node {
    display: contents !important;
}

.tokyo-category-row {
    display: inline-flex !important;
}

.tokyo-category-link {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    height: 44px !important;
    padding: 6px 14px 6px 6px !important;
    gap: 8px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.025) !important;
    color: var(--gt-text, #e8edf5) !important;
    box-sizing: border-box !important;
    transition: 0.15s !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.tokyo-category-link:hover {
    background: rgba(90,124,191,0.12) !important;
    border-color: rgba(90,124,191,0.4) !important;
    transform: translateY(-1px) !important;
}

.tokyo-category-link.is-active {
    background: rgba(90,124,191,0.22) !important;
    border-color: var(--gt-accent, #5a7cbf) !important;
    box-shadow: 0 0 12px rgba(90,124,191,0.25) !important;
}

.tokyo-category-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 50% !important;
    background-color: rgba(255,255,255,0.05) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.tokyo-category-copy {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.tokyo-category-name {
    color: var(--gt-text, #e8edf5) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tokyo-category-side {
    display: none !important;
}/* =====================================================================
 * gt-dark-fix19.css — NUCLEAR: replace Faka original grid + sidebar at top
 * Despite fix9 setting display:grid + 1fr + width 100% on sidebar,
 * sidebar is still rendering at 220px. The Faka original .tokyo-shop-layout
 * at line 190 sets display:grid;grid-template-columns:320px 1fr.
 *
 * Strategy: highest specificity selectors + !important + grid-column span.
 * body .class beats .class. double-class (c.c) beats single class.
 * Force sidebar to span full width via grid-column: 1 / -1.
 * ===================================================================== */

body .tokyo-shop-layout,
.tokyo-shop-layout.tokyo-shop-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 24px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    max-width: 1200px !important;
    margin: 24px auto 0 !important;
    padding: 0 20px 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: row !important;
}

body .tokyo-sidebar-panel,
.tokyo-sidebar-panel.tokyo-sidebar-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body .tokyo-catalog-panel,
.tokyo-catalog-panel.tokyo-catalog-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}
/* =====================================================================
 * gt-dark-fix20.css — only collapse to sidebar layout on true mobile
 * Previous fix used @media (max-width:1024px) which matched user's
 * viewport (~1024px), forcing sidebar into 220px. Bump to 768px.
 * Also add explicit width:100% on sidebar inside the layout grid
 * so cards inside (flex-wrap) get full banner width to flow into.
 * ===================================================================== */

@media (max-width: 768px) {
    .tokyo-shop-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .tokyo-sidebar-panel {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .tokyo-catalog-panel {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }
    #tokyo-category-tree, .tokyo-category-tree {
        grid-template-columns: repeat(4, 1fr) !important;
        flex-direction: row !important;
    }
}
/* =====================================================================
 * gt-dark-fix31.css — node width: 100% → auto
 * Tree is flex row, but Node (direct child) had width:100% from old fixes.
 * Each Node took full row, so cards stacked vertically. Fix: Node auto-width.
 * ===================================================================== */
/* =====================================================================
 * gt-dark-fix30.css — flex-direction: row
 * fix29 forgot to override flex-direction. Base layer (gt-dark.css L252)
 * had flex-direction: column, so cards stacked vertically. Now row.
 * ===================================================================== */
/* =====================================================================
 * gt-dark-fix29.css — flex-wrap auto-sizing
 * User: cards should adapt to icon+name length, not fixed cols.
 * grid → flex-wrap; .tokyo-category-link width:100% → auto (intrinsic).
 * Responsive: removed column counts (irrelevant with flex-wrap), kept gap tweaks.
 * ===================================================================== */
/* =====================================================================
 * gt-dark-fix28.css — panel radius = card radius (consistency)
 * User wants outer panel arc to match the cards' arc. Both now 14px.
 * ===================================================================== */
/* =====================================================================
 * gt-dark-fix27.css — outer panel: 9999 pill was too oval
 * User wanted a LENGTH value, not 9999px. Panel is 1300×350 (wider than tall),
 * so 9999 makes it an oval/pill. 40px gives a clear rounded rectangle.
 * ===================================================================== */
/* =====================================================================
 * gt-dark-fix26.css — outer panel pill radius
 * User clarified: '圆边长度不够' was about the OUTER container around the grid,
 * not the inner cards. Card radius reverted 9999 → 14 (shark.lc style).
 * Panel radius bumped to 9999 (full pill outer). Padding added so content
 * doesn't touch the pill curve.
 * ===================================================================== */
/* =====================================================================
 * gt-dark-fix25.css — full pill (radius 9999)
 * User said round edge length still not enough after fix22 (14), fix23 (26),
 * fix24 (14). Going max: border-radius: 9999px = pill at any size.
 * ===================================================================== */
/* =====================================================================
 * gt-dark-fix24.css — match shark.lc spacing
 * 7→9 cols, 10→14 gap, 26→14 radius.
 * Shark uses modest radius + visible gap so cards don't "kiss" the grid.
 * ===================================================================== */
/* =====================================================================
 * gt-dark-fix21.css — FINAL: shark.lc-style category grid
 *
 * Goal: collapse the 320px sidebar tree into a full-width 7-col grid
 *       at the top of the page, like shark.lc, then let the catalog
 *       table sit below.
 *
 * Strategy: highest specificity (body .x.x) + !important on every rule,
 *           so the older fix1-fix20 attempts cannot win back.
 * ===================================================================== */

/* ---------- 1. Shop layout: single column, full width ---------- */
body .tokyo-shop-layout,
.tokyo-shop-layout.tokyo-shop-layout {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 24px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    max-width: 1200px !important;
    width: calc(100% - 32px) !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ---------- 2. Sidebar: collapse to top banner ---------- */
body .tokyo-sidebar-panel,
.tokyo-sidebar-panel.tokyo-sidebar-panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    overflow: visible !important;
}

body .tokyo-sidebar-panel .panel-header,
.tokyo-sidebar-panel.tokyo-sidebar-panel .panel-header {
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--gt-line) !important;
    margin-bottom: 16px !important;
}

body .tokyo-sidebar-panel .panel-body,
.tokyo-sidebar-panel.tokyo-sidebar-panel .panel-body {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Hide the "close" mobile button — no longer needed */
.tokyo-mobile-sidebar-close,
.tokyo-mobile-sidebar-backdrop,
.tokyo-mobile-filter-trigger {
    display: none !important;
}

/* ---------- 3. Catalog: full width, sits below ---------- */
body .tokyo-catalog-panel,
.tokyo-catalog-panel.tokyo-catalog-panel {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* ---------- 4. Category tree: 7-col grid ---------- */
body #tokyo-category-tree,
body .tokyo-category-tree,
#tokyo-category-tree#tokyo-category-tree,
.tokyo-category-tree.tokyo-category-tree {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* ---------- 5. Node / row: clear block containers ---------- */
body .tokyo-category-node,
.tokyo-category-node.tokyo-category-node {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

body .tokyo-category-row,
.tokyo-category-row.tokyo-category-row {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ---------- 6. Card link: shark.lc style pill ---------- */
body .tokyo-category-link,
.tokyo-category-link.tokyo-category-link {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 52px !important;
    padding: 6px 14px 6px 6px !important;
    border-radius: 14px !important;
    flex: 0 0 auto !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: var(--gt-text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.15s ease,
                box-shadow 0.15s ease !important;
}

body .tokyo-category-link:hover,
.tokyo-category-link:hover.tokyo-category-link:hover {
    background: rgba(90, 124, 191, 0.12) !important;
    border-color: rgba(90, 124, 191, 0.45) !important;
    color: var(--gt-text) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

body .tokyo-category-link.is-active,
.tokyo-category-link.is-active.tokyo-category-link.is-active {
    background: rgba(90, 124, 191, 0.22) !important;
    border-color: rgba(90, 124, 191, 0.6) !important;
    color: var(--gt-text) !important;
    box-shadow: 0 0 14px rgba(90, 124, 191, 0.35) !important;
}

/* ---------- 7. Circular icon ---------- */
body .tokyo-category-icon,
.tokyo-category-icon.tokyo-category-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex: 0 0 38px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
}

/* ---------- 8. Copy + name: inherit brand color from inline style ---------- */
body .tokyo-category-copy,
.tokyo-category-copy.tokyo-category-copy {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

/* The category names carry inline style="color:#xxx" — let them through. */
body .tokyo-category-name,
.tokyo-category-name.tokyo-category-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    /* Inherit color from inline HTML; only nudge font. */
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

/* Let inline <b style="color:..."> on the name breathe. */
body .tokyo-category-name b,
.tokyo-category-name.tokyo-category-name b {
    font-weight: 600 !important;
}

/* ---------- 9. Hide count badge + expand toggle (flat grid, no tree UI) ---------- */
body .tokyo-category-side,
.tokyo-category-side.tokyo-category-side,
body .tokyo-category-count,
.tokyo-category-count.tokyo-category-count,
body .tokyo-category-toggle,
.tokyo-category-toggle.tokyo-category-toggle {
    display: none !important;
}

/* ---------- 10. Tablet: 5 cols ---------- */
@media (max-width: 1200px) {
    body #tokyo-category-tree,
    body .tokyo-category-tree,
    .tokyo-category-tree.tokyo-category-tree {
        gap: 12px !important;
    }
    body .tokyo-category-link,
    .tokyo-category-link.tokyo-category-link {
        height: 48px !important;
        padding: 5px 12px 5px 5px !important;
        gap: 8px !important;
    }
    body .tokyo-category-icon,
    .tokyo-category-icon.tokyo-category-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        flex: 0 0 34px !important;
    }
}

/* ---------- 11. Mobile: 4 cols (compact) ---------- */
@media (max-width: 768px) {
    body #tokyo-category-tree,
    body .tokyo-category-tree,
    .tokyo-category-tree.tokyo-category-tree {
        gap: 10px !important;
    }
    body .tokyo-category-link,
    .tokyo-category-link.tokyo-category-link {
        height: 44px !important;
        padding: 4px 10px 4px 4px !important;
        gap: 6px !important;
        font-size: 0.78rem !important;
    }
    body .tokyo-category-icon,
    .tokyo-category-icon.tokyo-category-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        flex: 0 0 30px !important;
    }
    body .tokyo-category-name,
    .tokyo-category-name.tokyo-category-name {
        font-size: 0.78rem !important;
    }
}

/* ---------- 12. Small mobile: 3 cols ---------- */
@media (max-width: 480px) {
    body #tokyo-category-tree,
    body .tokyo-category-tree,
    .tokyo-category-tree.tokyo-category-tree {
        gap: 8px !important;
    }
}

/* =====================================================================
 * gt-dark-fix32.css — inline detail panel (shark.lc master-detail)
 * Three stacked panels: categories → catalog → inline detail.
 * Detail starts empty, AJAX-loads on product click, pushState URL.
 * ===================================================================== */

/* Stack the three panels as one continuous page */
.tokyo-shell {
    padding-bottom: 60px !important;
}

/* Detail panel — same surface as catalog, sits below */
.tokyo-inline-detail-panel {
    position: relative !important;
    width: 100% !important;
    margin-top: 24px !important;
    background: var(--gt-surface) !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    scroll-margin-top: 96px !important; /* offset sticky nav */
}

.tokyo-inline-detail-panel.is-loading {
    min-height: 200px !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s !important;
}

.tokyo-detail-placeholder {
    padding: 40px 20px !important;
    text-align: center !important;
    color: var(--gt-text-muted) !important;
    font-size: 0.92rem !important;
}

/* When detail content is loaded, strip its outer Header/Footer styles */
.tokyo-inline-detail .tokyo-item-panel,
.tokyo-inline-detail .tokyo-description-panel {
    background: rgba(16, 22, 30, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin: 0 0 18px !important;
    box-shadow: none !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.tokyo-inline-detail .tokyo-item-panel .panel-body {
    padding: 0 !important;
}

.tokyo-inline-detail .panel-header {
    display: none !important; /* hide internal panel headers in inline mode */
}

/* Smooth scroll on detail load */
html {
    scroll-behavior: smooth !important;
}

/* Mobile: detail panel stacks below catalog */
@media (max-width: 768px) {
    .tokyo-inline-detail-panel {
        margin-top: 16px !important;
    }
}

/* =====================================================================
 * gt-dark-fix34.css — hide empty panels on homepage
 * Catalog and detail panels default to .is-empty (display:none).
 * When user clicks category/product, JS removes .is-empty.
 * ===================================================================== */

.tokyo-catalog-panel.is-empty,
.tokyo-inline-detail-panel.is-empty {
    display: none !important;
}

.tokyo-catalog-panel,
.tokyo-inline-detail-panel {
    transition: opacity 0.2s ease !important;
}

.tokyo-catalog-panel.is-empty,
.tokyo-inline-detail-panel.is-empty {
    opacity: 0 !important;
}

/* =====================================================================
 * gt-dark-fix37.css — catalog as shark.lc-style card grid
 * ===================================================================== */

.tokyo-commodity-table,
.tokyo-table-wrap {
    display: none !important;
}

.tokyo-catalog-grid-wrap {
    width: 100% !important;
}

.tokyo-catalog-grid {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
}

.tokyo-catalog-empty {
    width: 100% !important;
    padding: 40px 20px !important;
    text-align: center !important;
    color: var(--gt-text-muted) !important;
    font-size: 0.92rem !important;
}

.tokyo-catalog-card {
    min-height: 96px !important;
    background-color: var(--gt-surface) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid var(--gt-line) !important;
    border-top-color: rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    box-sizing: border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
}

.tokyo-catalog-card:hover {
    background-color: rgba(20, 28, 38, 0.85) !important;
    border-color: rgba(125, 200, 255, 0.45) !important;
    border-top-color: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-3px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(125, 200, 255, 0.18) !important;
}

.tokyo-catalog-card.is-soldout {
    opacity: 0.55 !important;
    pointer-events: none !important;
}

.tokyo-catalog-card-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.tokyo-catalog-card-icon {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    border-radius: 12px !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--gt-line) !important;
    box-sizing: border-box !important;
}

.tokyo-catalog-card-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.tokyo-catalog-card-name {
    display: block !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--gt-text) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

.tokyo-catalog-card-name b {
    font-weight: 600 !important;
}

.tokyo-catalog-card-name b {
    font-weight: 600 !important;
}

.tokyo-catalog-card-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-height: 18px !important;
}

.tokyo-catalog-card-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 4px !important;
}

.tokyo-catalog-card-price {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.tokyo-catalog-card-price-main {
    color: var(--gt-accent-light) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tokyo-catalog-card-price-note {
    color: var(--gt-text-muted) !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
}

.tokyo-catalog-card-action {
    flex-shrink: 0 !important;
}

.tokyo-catalog-card-buy {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    background: rgba(90, 124, 191, 0.18) !important;
    color: var(--gt-accent-light) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.tokyo-catalog-card-soldout {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    background: rgba(248, 113, 113, 0.15) !important;
    color: #f87171 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.tokyo-catalog-card .tokyo-pill-mobile-only {
    display: none !important;
}

/* Responsive card sizes handled via grid-template-columns in media queries below */

.tokyo-catalog-card-hot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, #ff6b35 0%, #ff3333 100%) !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 4px rgba(255, 60, 60, 0.5) !important;
}

.tokyo-catalog-card-sub {
    display: none !important; /* hide by default — we don't have this data field */
}

/* =====================================================================
 * gt-dark-fix43.css — hide loading indicator when content is loaded
 * ===================================================================== */

.tokyo-catalog-loading {
    display: none !important;
    padding: 40px 20px !important;
    text-align: center !important;
    color: var(--gt-text-muted) !important;
    font-size: 0.88rem !important;
}

.tokyo-catalog-grid-wrap.is-loading .tokyo-catalog-loading {
    display: block !important;
}

.tokyo-catalog-loading-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(90, 124, 191, 0.25) !important;
    border-top-color: var(--gt-accent-light) !important;
    border-radius: 50% !important;
    animation: tokyo-catalog-spin 0.8s linear infinite !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

@keyframes tokyo-catalog-spin {
    to { transform: rotate(360deg); }
}

/* =====================================================================
 * gt-dark-fix44.css — flush catalog cards to panel edges
 * shark.lc style: cards touch the panel border (no inner gap).
 * Header keeps its own padding so the title doesn't touch the border.
 * ===================================================================== */

.tokyo-catalog-panel {
    padding: 0 !important;
}

.tokyo-catalog-panel .panel-header {
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--gt-line) !important;
    margin: 0 !important;
}

.tokyo-catalog-panel .panel-body.tokyo-catalog-body {
    padding: 14px !important;
}

/* Cards grid: slightly darker background to distinguish from panel header */
.tokyo-catalog-grid-wrap {
    padding: 14px !important;
    background-color: rgba(8, 14, 28, 0.55) !important;
    border-top: 1px solid rgba(125, 180, 255, 0.08) !important;
}

.tokyo-catalog-grid {
    gap: 10px !important;
}

/* Also flush the sidebar panel content (category tree) for visual consistency */
.tokyo-sidebar-panel {
    padding: 0 !important;
}

.tokyo-sidebar-panel > .panel-header {
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--gt-line) !important;
    margin: 0 !important;
}

.tokyo-sidebar-panel > .panel-body {
    padding: 14px !important;
}

/* =====================================================================
 * gt-dark-fix51.css — align border between categories and catalog panel
 * Both panels get identical border + shadow so visual edges match.
 * ===================================================================== */

body .tokyo-sidebar-panel,
body .tokyo-catalog-panel {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* =====================================================================
 * gt-dark-fix55.css — final override for nav-wrap width
 * Previous fixes at line 80-84 were overridden by older rules at line 763+
 * (same specificity, later wins). Append !important at file end to win.
 * ===================================================================== */

.tokyo-nav-wrap {
    width: calc(100% - 64px) !important;
    max-width: 1200px !important;
}

/* =====================================================================
 * gt-dark-fix56.css — shop-layout width: 100% !important
 * Previous fixes set shell and main to calc(100%-32px), but shop-layout
 * had its own calc(100%-32px) inside shell, making panels 32px narrower
 * than nav-wrap. Override to width:100% so panels fill shell exactly.
 * ===================================================================== */

body .tokyo-shop-layout,
.tokyo-shop-layout.tokyo-shop-layout {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* =====================================================================
 * gt-dark-fix58.css — also constrain .tokyo-nav-shell itself
 * Even though my fix55 already sets nav-wrap to calc(100%-64px) !important,
 * older rules may still bleed through via specificity cascades. By
 * constraining .tokyo-nav-shell itself, both parent and child agree.
 * ===================================================================== */

body .tokyo-nav-shell,
.tokyo-nav-shell.tokyo-nav-shell {
    width: calc(100% - 32px) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 16px 0 !important;
}

body .tokyo-nav-wrap,
.tokyo-nav-wrap.tokyo-nav-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* =====================================================================
 * gt-dark-fix59.css — shell also width:100% (no own calc)
 * nav-shell already does calc(100%-32px) = 1168px wide
 * But .tokyo-shell was doing ANOTHER calc(100%-32px) = 1136px wide
 * This made panels 32px narrower than nav.
 * Override shell to width:100% so it fills main exactly (no extra gap).
 * ===================================================================== */

body .tokyo-shell,
.tokyo-shell.tokyo-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* =====================================================================
 * gt-dark-fix62.css — body background = pic-3-1.png logo
 * User's logo (2560x1440 PNG) at Assets/pic-3-1.png.
 * Cover-style fit, dark overlay over the image for readability,
 * radial gradient fallback if image fails to load.
 * ===================================================================== */

html, body.tokyo-theme {
    background: transparent !important;
}

body.tokyo-theme {
    background:
        url("/app/View/User/Theme/Tokyo/Assets/pic-3-1.png") center/cover no-repeat fixed !important;
    background-color: #05070c !important;
}

/* Ensure page-frame content sits above the fixed background */
.tokyo-page-frame {
    background: transparent !important;
}

/* Main area keeps a subtle dark wash so cards stay readable over image */
.tokyo-main {
    background: transparent !important;
}

/* =====================================================================
 * gt-dark-fix65.css — sidebar + catalog panel darker glass
 * Body bg = pic-3-1.png logo. Sidebar / catalog panels were var(--gt-surface)
 * = rgba(16,22,30,0.75) — too transparent, logo bled through.
 * Override to deeper + backdrop-filter blur for true "frosted glass" effect.
 * ===================================================================== */

body .tokyo-sidebar-panel,
.tokyo-sidebar-panel.tokyo-sidebar-panel {
    background: rgba(16, 22, 30, 0.88) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}

body .tokyo-catalog-panel,
.tokyo-catalog-panel.tokyo-catalog-panel {
    background: rgba(16, 22, 30, 0.88) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}

/* =====================================================================
 * gt-dark-fix68.css — override dim brand colors in category names
 * Some games store brand colors too dark (#572908, #4a4f48, #253C44...)
 * which fail contrast on dark bg. Override inline styles with !important
 * to force a unified bright color while preserving bold weight.
 * ===================================================================== */

/* Reset (fix68 override removed) — let inline brand colors show through.
   Brightening handled at the database level instead (fix69 SQL update). */

/* =====================================================================
 * gt-dark-fix80.css — item page reshark (cover + form panel)
 * Wider panel, larger cover, prominent price, full-width buy button.
 * Matches shark.lc /item/{id} visual.
 * ===================================================================== */

.tokyo-item-page {
    background: transparent !important;
}

.tokyo-item-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: calc(100% - 32px) !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.tokyo-item-page .panel {
    background: rgba(16, 22, 30, 0.88) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
}

/* Item main panel: 2-col grid (cover + form) */
.tokyo-item-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 32px !important;
}

@media (max-width: 992px) {
    .tokyo-item-grid {
        grid-template-columns: 1fr !important;
    }
}

.tokyo-item-cover-col,
.tokyo-item-form-col {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.tokyo-item-cover-col {
    gap: 24px !important;
}

.tokyo-item-cover-card {
    position: relative !important;
    width: 100% !important;
    min-height: 480px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tokyo-item-cover-trigger {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: zoom-in !important;
    position: relative !important;
}

.tokyo-item-cover-trigger img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.tokyo-item-cover-trigger:hover img {
    transform: scale(1.03) !important;
}

.tokyo-item-cover-hint {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #fff !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}

.tokyo-item-cover-trigger:hover .tokyo-item-cover-hint {
    opacity: 1 !important;
}

/* Item form right column */
.tokyo-item-form-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;  /* 区域间更紧凑 (was 12px in v4.231) */
}

.tokyo-item-inline-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.tokyo-item-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* 立即支付 section */
.tokyo-pay-section {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.tokyo-pay-section-label {
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

.tokyo-pay-section-body {
    padding: 12px !important;  /* 上下 padding 压缩 (was 16px) */
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;  /* 区域间 gap 压缩 (was 14px) */
}

.tokyo-item-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    color: #ff6b35 !important;
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    padding: 8px 0 !important;
}

.tokyo-item-price .price {
    background: linear-gradient(135deg, #4a90e2 0%, #7c3aed 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-size: 2.4rem !important;
    font-weight: 800 !important;
}

.tokyo-button-buy-now {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 18px 24px !important;
    background: linear-gradient(135deg, #ff6b35 0%, #ff3333 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
    box-shadow: 0 4px 20px rgba(255, 60, 60, 0.4) !important;
    margin-top: 16px !important;
    letter-spacing: 0.05em !important;
}

.tokyo-button-buy-now:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(255, 60, 60, 0.5) !important;
    filter: brightness(1.08) !important;
}



/* Description panel */
.tokyo-description-panel .panel-header,
.tokyo-features-panel .panel-header,
.tokyo-notes-panel .panel-header,
.tokyo-payment-methods-panel .panel-header,
.tokyo-disclaimer-panel {
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.tokyo-description-panel .panel-title,
.tokyo-features-panel .panel-title,
.tokyo-notes-panel .panel-title,
.tokyo-payment-methods-panel .panel-title {
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.tokyo-item-description {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    color: #c0c8d4 !important;
    line-height: 1.7 !important;
    font-size: 0.9rem !important;
}

.tokyo-item-description img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
}

.tokyo-item-description p,
.tokyo-item-description div,
.tokyo-item-description span {
    color: #c0c8d4 !important;
}

/* Features grid */
.tokyo-features-body,
.tokyo-notes-body,
.tokyo-payment-methods-body,
.tokyo-disclaimer-body {
    padding: 20px !important;
}

.tokyo-features-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

@media (max-width: 768px) {
    .tokyo-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.tokyo-feature-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #e8edf5 !important;
    font-size: 0.88rem !important;
    text-align: center !important;
}

.tokyo-feature-item i {
    font-size: 1.6rem !important;
    color: #7fa1e6 !important;
}

/* Notes list */
.tokyo-notes-list {
    color: #c0c8d4 !important;
    line-height: 1.8 !important;
    padding-left: 20px !important;
    margin: 0 !important;
}

.tokyo-notes-list li {
    margin-bottom: 8px !important;
}

/* Payment methods grid */
.tokyo-payment-methods-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

@media (max-width: 768px) {
    .tokyo-payment-methods-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.tokyo-payment-method {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #e8edf5 !important;
    font-size: 0.9rem !important;
}

.tokyo-payment-method i {
    font-size: 1.3rem !important;
    color: #7fa1e6 !important;
}

/* Disclaimer */
.tokyo-disclaimer-body {
    color: #8a96ad !important;
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
}

.tokyo-disclaimer-body h3 {
    color: #e8edf5 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 0 12px !important;
}

.tokyo-disclaimer-body p {
    margin: 0 0 8px !important;
}

/* Form fields override (in case item.js expects different layout) */
.tokyo-form-stack {
    gap: 8px !important;  /* field 之间紧凑 (was 20px in v4.230) - 用户要求整体紧凑 */
}

.tokyo-form-stack .tokyo-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 4px 14px !important;  /* 上下 padding 压缩 (was 7px) */
}

.tokyo-form-stack .tokyo-field label,
.tokyo-form-stack .form-label {
    color: #eef2f8 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 0 !important;  /* 取消 Bootstrap mb-1 覆盖 (was 0 0 2px) - 紧凑 chip */
    letter-spacing: 0.02em !important;
}

.tokyo-form-stack .form-control {
    background: rgba(8, 12, 20, 0.85) !important;
    border: 1px solid rgba(126, 200, 255, 0.35) !important;
    border-radius: 8px !important;
    color: #fff !important;
    height: 38px !important;
    padding: 6px 12px !important;
    line-height: 1.5 !important;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.tokyo-form-stack .form-control::placeholder {
    color: #7ec8ff !important;
    opacity: 0.85 !important;
}

.tokyo-form-stack .form-control:focus {
    border-color: #7fa1e6 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 0 0 0.2rem rgba(127, 161, 230, 0.25) !important;
    color: #fff !important;
}

/* Hide old grid-template in row/g-4 (was using bootstrap) */
.tokyo-item-page .row,
.tokyo-item-page [class*="col-"] {
    all: revert !important;
}

/* Description col (right side) — long product description text */
.tokyo-item-description-col {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.tokyo-item-description {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    color: #c0c8d4 !important;
    line-height: 1.7 !important;
    font-size: 0.9rem !important;
    flex: 1 1 auto !important;
}

.tokyo-item-description img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
}

.tokyo-item-description p,
.tokyo-item-description div,
.tokyo-item-description span {
    color: #c0c8d4 !important;
}

/* =====================================================================
 * gt-dark-fix99.css — item right col shark.lc fidelity
 * Title row (icon + name), section labels per field, disclaimer at bottom.
 * ===================================================================== */

/* Title row: cover icon + name horizontal */
.tokyo-item-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
    min-height: 80px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.tokyo-item-icon {
    flex-shrink: 0 !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    border-radius: 12px !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.tokyo-item-inline-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    align-self: center !important;
}

/* Section labels for each field */
.tokyo-field-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;  /* 2→6px - 用户: 拉开一点 */
    padding: 4px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tokyo-field-section:first-of-type {
    border-top: none !important;
    padding-top: 0 !important;
}

.tokyo-field-label {
    color: #eef2f8 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;  /* 自身 margin 取消 (was 0 0 2px) - 紧凑 chip */
}

/* Buy button section */
.tokyo-button-section {
    margin-top: 8px !important;
}

/* Disclaimer text at bottom of form col */
.tokyo-disclaimer-text {
    margin-top: 24px !important;
    padding: 16px !important;
    background: rgba(255, 200, 0, 0.05) !important;
    border: 1px dashed rgba(255, 200, 0, 0.25) !important;
    border-radius: 8px !important;
    color: #c0c8d4 !important;
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
}

.tokyo-disclaimer-text p {
    margin: 0 0 4px !important;
}

.tokyo-disclaimer-text p:last-child {
    margin-bottom: 0 !important;
}

/* =====================================================================
 * gt-dark-fix100.css — shark.lc col ratio (description 2/3, form 1/3)
 * User feedback: "右撤还是有区别" — right (form) col too wide vs shark.lc.
 * Solution: 2fr 1fr grid ratio + reduce gap to 16px + remove padding-right
 * ===================================================================== */

.tokyo-item-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 24px 32px 24px 32px !important;
}

.tokyo-item-description-col {
    min-width: 0 !important;
}

.tokyo-item-form-col {
    min-width: 0 !important;
}

.tokyo-item-description {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
    color: #c5cdd9 !important;
    padding: 20px 24px !important;
    background: transparent !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Form col adjustments — no border (matches user preference) */
.tokyo-item-form-wrap {
    padding: 20px 18px 20px 14px !important;
    background: transparent !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Wider price + better badge alignment */
.tokyo-item-price {
    font-size: 2.2rem !important;
    color: #4a90e2 !important;
    margin: 12px 0 !important;
}

.tokyo-item-price .price {
    background: linear-gradient(135deg, #4a90e2 0%, #7c3aed 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.tokyo-item-price .currency {
    background: linear-gradient(135deg, #4a90e2 0%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-size: 1.4rem !important;
}

.tokyo-item-badges {
    display: flex !important;
    gap: 8px !important;
    margin: 12px 0 !important;
    flex-wrap: wrap !important;
}

/* =====================================================================
 * gt-dark-fix101.css — equal column ratio (1fr 1fr)
 * User feedback: shark.lc is EQUAL width 1:1, not 2:1.
 * I had it as 2fr 1fr in fix100 — wrong interpretation.
 * Now: 1fr 1fr equal cols.
 * ===================================================================== */

.tokyo-item-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 20px !important;
}

/* =====================================================================
 * gt-dark-fix102.css — hide duplicate form labels
 * User feedback: "有重复字" — section label + form label both visible.
 * Hide the Faka .form-label inside .tokyo-field-section (we keep section label).
 * ===================================================================== */

.tokyo-field-section > .form-label,
.tokyo-field-section > label,
.tokyo-field-section .tokyo-button-section .form-label,
.tokyo-field-section > .cash-pay > label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =====================================================================
 * gt-dark-fix103.css — payment method card border
 * User feedback: "没有边框效果" — 支付宝/微信/余额 buttons lack card border.
 * Wrap them as cards with hover effect.
 * ===================================================================== */

.tokyo-pay-list,
.cash-pay .pay-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

/* Each payment method = card */
.tokyo-pay-list > *,
.cash-pay .pay-list > *,
.tokyo-pay-list label,
.cash-pay .pay-list label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    color: #d8e0eb !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
}

.tokyo-pay-list > *:hover,
.cash-pay .pay-list > *:hover,
.tokyo-pay-list label:hover,
.cash-pay .pay-list label:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    transform: translateY(-1px) !important;
}

.tokyo-pay-list > * img,
.cash-pay .pay-list > * img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
}

/* Selected payment method */
.tokyo-pay-list > *.active,
.cash-pay .pay-list > *.active,
.tokyo-pay-list input[type="radio"]:checked + label,
.cash-pay .pay-list input[type="radio"]:checked + label {
    background: rgba(90, 124, 191, 0.15) !important;
    border-color: rgba(90, 124, 191, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(90, 124, 191, 0.3) !important;
}







/* =====================================================================
 * gt-dark-fix110b.css — 3 distinct colored badge cards
 * User feedback: "三个颜色可以不一样方便区分"
 * - 自动发货: green border (auto-delivery = green = ready to ship)
 * - 库存: amber border (stock count = caution/quantity)
 * - 分享: blue border (share = social/interactive)
 * ===================================================================== */

.tokyo-item-badges {
    display: flex !important;
    gap: 10px !important;
    margin: 12px 0 20px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.tokyo-item-badges .badge-soft {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    margin: 0 !important;
    line-height: 1 !important;
    backdrop-filter: blur(8px) !important;
    color: #d8e0eb !important;
}

.tokyo-item-badges .badge-soft i {
    font-size: 1rem !important;
}

/* 自动发货 — green */
.tokyo-item-badges .item-delivery {
    border: 1px solid rgba(93, 211, 158, 0.40) !important;
    background: rgba(93, 211, 158, 0.10) !important;
    color: #aeead0 !important;
}
.tokyo-item-badges .item-delivery i {
    color: #5dd39e !important;
}

/* 库存 — amber/orange (different from auto-delivery green) */
.tokyo-item-badges .item-stock {
    border: 1px solid rgba(245, 158, 11, 0.40) !important;
    background: rgba(245, 158, 11, 0.10) !important;
    color: #f9d29b !important;
}
.tokyo-item-badges .item-stock i {
    color: #f59e0b !important;
}

/* 分享 — blue */
.tokyo-item-badges .shared-button {
    border: 1px solid rgba(126, 200, 255, 0.40) !important;
    background: rgba(126, 200, 255, 0.10) !important;
    color: #c5dcf2 !important;
}
.tokyo-item-badges .shared-button i {
    color: #7ec8ff !important;
}

/* Hover — boost border + background */
.tokyo-item-badges .item-delivery:hover {
    background: rgba(93, 211, 158, 0.18) !important;
    border-color: rgba(93, 211, 158, 0.55) !important;
}
.tokyo-item-badges .item-stock:hover {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
}
.tokyo-item-badges .shared-button:hover {
    background: rgba(126, 200, 255, 0.18) !important;
    border-color: rgba(126, 200, 255, 0.55) !important;
}

/* =====================================================================
 * gt-dark-fix112.css — remove description/form border (user: "太多边框了")
 * Drop border + background from .tokyo-item-description and .tokyo-item-form-wrap.
 * Keep only padding so columns still feel grouped.
 * ===================================================================== */

.tokyo-item-description {
    background: transparent !important;
    border: none !important;
    padding: 12px 16px !important;
}

.tokyo-item-form-wrap {
    padding: 12px 16px !important;
    background: transparent !important;
    border: none !important;
}

/* Also remove panel border if it's still there */
.tokyo-item-panel {
    border: none !important;
    background: transparent !important;
}

/* =====================================================================
 * gt-dark-fix113.css — kill .tokyo-pay-section outer border
 * User: "包裹右侧那个价格那个边框也可以取消"
 * Keep inner field sections clean (no borders), only badges are bordered.
 * ===================================================================== */

.tokyo-pay-section {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =====================================================================
 * gt-dark-fix114.css — SKU pill buttons with floating price badge
 * User request: "宝贝类型月卡 ¥42 / 永久 ¥78" style (pill button + price badge)
 * ===================================================================== */

.tokyo-form-stack .sku-list {
    display: flex !important;
    flex-wrap: wrap !important;
    column-gap: 8px !important;  /* 6→8px */
    row-gap: 10px !important;  /* 6→10px - 用户再拉开一点 */
    margin: 0 !important;
}

.tokyo-form-stack .sku-list .sku {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 4px 10px !important;  /* 上下 6→4px 左右 12→10px - chip 更紧凑 */
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(20, 28, 40, 0.40) !important;
    color: #d8e0eb !important;
    font-size: 0.9rem !important;  /* 0.95→0.9 rem */
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.tokyo-form-stack .sku-list .sku:hover {
    background: rgba(40, 60, 90, 0.6) !important;
    border-color: rgba(126, 200, 255, 0.5) !important;
    color: #fff !important;
}

.tokyo-form-stack .sku-list .sku.is-primary {
    background: linear-gradient(135deg, #4a90e2 0%, #4a90e2 70%, #7c3aed 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    border-width: 1px !important;  /* 2→1px */
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: none !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;  /* 1→0.9 rem */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 0.02em !important;
}

/* SKU label (just the name) */
.tokyo-form-stack .sku-list .sku-label {
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

/* Price badge — floating top-right of pill (blue accent) */
.tokyo-form-stack .sku-list .badge-money {
    position: absolute !important;
    top: -7px !important;  /* -8→-7px */
    right: -10px !important;
    min-width: 32px !important;  /* 36→32px */
    padding: 2px 6px !important;  /* 3px 8px→2px 6px */
    background: linear-gradient(135deg, #4a90e2, #7ec8ff) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;  /* 1.5→1px */
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 0.75rem !important;  /* 0.78→0.75 rem */
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.40) !important;
}

/* Hide money amount inside the pill text — it's now a floating badge */
.tokyo-form-stack .sku-list .sku.has-money {
    padding-right: 18px !important;
    padding-left: 18px !important;
}

/* =====================================================================
 * gt-dark-fix115.css — qty group = single pill (matches shark.lc screenshot)
 * Outer wrapper = pill border, [-] and [+] = subtle side buttons, [1] = wide input
 * ===================================================================== */

body .qty-group,
body .input-group.qty-group,
body body .qty-group,
body body .input-group.qty-group {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    gap: 0 !important;
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    flex-wrap: nowrap !important;
    height: 36px !important;
    border: 1px solid rgba(126, 200, 255, 0.25) !important;
    border-radius: 999px !important;
    background: rgba(20, 26, 50, 0.6) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
    box-sizing: content-box !important;
}
body .qty-group .change-num-sub,
body .qty-group .change-num-add,
body body .qty-group .change-num-sub,
body body .qty-group .change-num-add {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 100% !important;
    min-height: 36px !important;
    flex: 0 0 32px !important;
    border-radius: 0 !important;
    background: rgba(74, 144, 226, 0.15) !important;
    color: #c8b5ff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
    margin: 0 !important;
}
body .qty-group .change-num-sub:hover,
body .qty-group .change-num-add:hover,
body body .qty-group .change-num-sub:hover,
body body .qty-group .change-num-add:hover {
    background: rgba(126, 200, 255, 0.45) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}
body .qty-group .change-num-sub:active,
body .qty-group .change-num-add:active,
body body .qty-group .change-num-sub:active,
body body .qty-group .change-num-add:active {
    background: rgba(126, 200, 255, 0.6) !important;
    transform: scale(0.95) !important;
}
.qty-group .change-num-sub:hover,
.qty-group .change-num-add:hover {
    background: rgba(126, 200, 255, 0.08) !important;
    color: #c8b5ff !important;
}
.qty-group .change-num-sub:hover,
.qty-group .change-num-add:hover {
    background: rgba(126, 200, 255, 0.22) !important;
}
body .qty-group input.form-control,
body .qty-group input[type="number"],
body body .qty-group input.form-control,
body body .qty-group input[type="number"] {
    background: transparent !important;
    color: #ffffff !important;
    text-align: center !important;
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 100% !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
}
    background: rgba(20, 28, 40, 0.40) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.qty-group .change-num-sub,
.qty-group .change-num-add {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #c8b5ff !important;
    font-size: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.qty-group .change-num-sub:hover,
.qty-group .change-num-add:hover {
    background: rgba(126, 200, 255, 0.15) !important;
    color: #fff !important;
}

/* Center number — wide input */
.qty-group input[type="number"],
.qty-group .form-control {
    flex: 1 1 auto !important;
    min-width: 80px !important;
    max-width: 120px !important;
    width: 80px !important;
    height: 44px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -moz-appearance: textfield !important;
}

.qty-group input[type="number"]::-webkit-inner-spin-button,
.qty-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* =====================================================================
 * gt-dark-fix115b.css — shrink qty pill to fit content (no full-width stretch)
 * User: "是不是有点长边框" — qty pill is taking whole row, should be compact.
 * ===================================================================== */

.qty-group {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 240px !important;
}

.qty-group input[type="number"],
.qty-group .form-control {
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 0 !important;
    max-width: 80px !important;
}

/* =====================================================================
 * gt-dark-fix233.css — unify password input border with other form controls
 * (reverted fix116 red pill — user wants consistent styling across form)
 * ===================================================================== */

.tokyo-form-stack input[name="password"],
.tokyo-form-stack input[type="password"],
.tokyo-form-stack input.password-input {
    border: 1px solid rgba(126, 200, 255, 0.35) !important;
    border-radius: 8px !important;
    background: rgba(8, 12, 20, 0.85) !important;
    height: 38px !important;
    padding: 6px 12px !important;
    line-height: 1.5 !important;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.tokyo-form-stack input[name="password"]:focus,
.tokyo-form-stack input[type="password"]:focus,
.tokyo-form-stack input.password-input:focus {
    border-color: #7fa1e6 !important;
    box-shadow: 0 0 0 0.2rem rgba(127, 161, 230, 0.25) !important;
}

/* =====================================================================
 * gt-dark-fix119.css — divider line under "商品详情" panel header
 * ===================================================================== */

.tokyo-inline-detail-panel .panel-header,
.tokyo-detail-heading {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

/* =====================================================================
 * gt-dark-fix120.css — wrap price (¥125) in a bordered glass card
 * User: "可以价格边框包围不"
 * ===================================================================== */

.tokyo-item-price {
    border: 1.5px solid rgba(126, 200, 255, 0.35) !important;
    border-radius: 14px !important;
    background: rgba(74, 144, 226, 0.08) !important;
    padding: 16px 22px !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    margin: 12px 0 20px !important;
    backdrop-filter: blur(8px) !important;
}

.tokyo-item-price .price {
    background: linear-gradient(135deg, #4a90e2 0%, #7c3aed 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.tokyo-item-price .currency {
    background: linear-gradient(135deg, #4a90e2 0%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-size: 1.4rem !important;
}

/* =====================================================================
 * gt-dark-fix121.css — wrap "可付款" payment section in outer border card
 * User: "没有加边框把他们包围啊"
 * Outer container = bordered glass card, inner buttons keep their own borders.
 * ===================================================================== */

.tokyo-form-stack .cash-pay.tokyo-field-section,
.cash-pay.tokyo-field-section {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    background: rgba(20, 28, 40, 0.40) !important;
    padding: 16px 18px !important;
    margin-top: 4px !important;
}

.tokyo-form-stack .tokyo-field-label {
    color: #97a4b8 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 0 12px !important;
}

/* =====================================================================
 * gt-dark-fix122.css — unify all colors in product description
 * User: "把字改成一样把" — description has many inline <font color> styles,
 * unify them all to one readable text color.
 * ===================================================================== */

.tokyo-item-description,
.tokyo-item-description * {
    color: #c8d2e0 !important;
}

.tokyo-item-description a {
    display: inline-block !important;
    padding: 8px 16px !important;
    margin: 4px 0 !important;
    border: 1.5px solid rgba(126, 200, 255, 0.45) !important;
    border-radius: 8px !important;
    background: rgba(74, 144, 226, 0.08) !important;
    color: #7ec8ff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: border-color 0.18s, background 0.18s, transform 0.18s !important;
}
.tokyo-item-description a:hover {
    border-color: rgba(126, 200, 255, 0.85) !important;
    background: rgba(74, 144, 226, 0.18) !important;
    transform: translateY(-1px) !important;
}
.tokyo-item-description a * {
    color: inherit !important;
}

/* =====================================================================
 * gt-dark-fix123.css — disclaimer larger + better readable (matches screenshot)
 * User showed: bigger text, more padding, clean dashed border.
 * ===================================================================== */

.tokyo-disclaimer-text {
    margin-top: 20px !important;
    padding: 22px 18px !important;
    background: rgba(255, 200, 0, 0.05) !important;
    border: 1px dashed rgba(255, 200, 0, 0.30) !important;
    border-radius: 12px !important;
    color: #c0c8d4 !important;
    font-size: 0.92rem !important;
    line-height: 1.85 !important;
    text-align: center !important;
}

.tokyo-disclaimer-text p {
    margin: 0 0 8px !important;
    color: #c0c8d4 !important;
}

.tokyo-disclaimer-text p:last-child {
    margin-bottom: 0 !important;
}

/* =====================================================================
 * gt-dark-fix125.css — remove ¥125 price border (user: "不需要边框")
 * Keep the blue color + larger size, drop the wrapping border card.
 * ===================================================================== */

.tokyo-item-price {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 4px 0 !important;
    backdrop-filter: none !important;
    margin: 8px 0 16px !important;
}

.tokyo-item-price .price {
    background: linear-gradient(135deg, #4a90e2 0%, #7c3aed 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.tokyo-item-price .currency {
    background: linear-gradient(135deg, #4a90e2 0%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-size: 1.4rem !important;
}

/* =====================================================================
 * gt-dark-fix126.css — shark.lc style notice modal
 * Modal: dark glass card with brand title + red/blue rules + quick links
 * ===================================================================== */

/* Modal container */
.tokyo-notice-modal {
    background: rgba(8, 12, 18, 0.95) !important;
    border: 1px solid rgba(126, 200, 255, 0.20) !important;
    border-radius: 14px !important;
    padding: 28px 32px !important;
    max-width: 560px !important;
    color: #d8e0eb !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(20px) !important;
}

.tokyo-notice-modal-head {
    margin-bottom: 16px !important;
}

.tokyo-notice-kicker {
    display: inline-block !important;
    color: #7a8aa0 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

.tokyo-notice-title {
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Brand title (big stroked text) */
.tokyo-notice-brand {
    text-align: center !important;
    font-size: 3rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    margin: 8px 0 12px !important;
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 0 20px rgba(126, 200, 255, 0.4) !important;
    font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
}

.tokyo-notice-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    margin: 12px 0 16px !important;
}

/* Red rules */
.tokyo-notice-rules-red {
    margin-bottom: 12px !important;
}

.tokyo-notice-rules-red p {
    color: #ff6b6b !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin: 0 0 4px !important;
    text-align: center !important;
}

/* Blue rules */
.tokyo-notice-rules-blue {
    margin-bottom: 18px !important;
}

.tokyo-notice-rules-blue p {
    color: #7ec8ff !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin: 0 0 4px !important;
    text-align: center !important;
}

/* Quick link buttons */
.tokyo-notice-quicklinks {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    flex-wrap: wrap !important;
}

.tokyo-notice-link-btn {
    display: inline-block !important;
    padding: 8px 20px !important;
    background: rgba(126, 200, 255, 0.10) !important;
    border: 1px solid rgba(126, 200, 255, 0.40) !important;
    border-radius: 8px !important;
    color: #7ec8ff !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.tokyo-notice-link-btn:hover {
    background: rgba(126, 200, 255, 0.20) !important;
    border-color: rgba(126, 200, 255, 0.65) !important;
    color: #fff !important;
}

/* Action buttons row */
.tokyo-notice-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-top: 18px !important;
}

.tokyo-notice-tip {
    color: #7a8aa0 !important;
    font-size: 0.78rem !important;
    text-align: right !important;
    margin: 8px 0 0 !important;
}

/* =====================================================================
 * gt-dark-fix127.css — shark.lc notice modal (admin notice wrapped)
 * Strips default styles from admin notice content + applies shark.lc visual.
 * ===================================================================== */

.tokyo-notice-popup-inner {
    text-align: center !important;
    font-size: 0.92rem !important;
    line-height: 1.85 !important;
    color: #d8e0eb !important;
    padding: 8px 4px 16px !important;
}

.tokyo-notice-popup-inner p {
    margin: 0 0 6px !important;
    color: #d8e0eb !important;
}

.tokyo-notice-popup-inner strong {
    color: #d8e0eb !important;
    font-weight: 500 !important;
}

.tokyo-notice-popup-inner a {
    color: #7ec8ff !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(126, 200, 255, 0.5) !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}

.tokyo-notice-popup-inner a:hover {
    color: #fff !important;
    border-color: #fff !important;
}

/* =====================================================================
 * gt-dark-fix130.css — tighten section gaps (user: "距离间隔有点大")
 * Reduce vertical spacing between form sections + badges + price.
 * ===================================================================== */

.tokyo-item-title-row {
    margin-bottom: 6px !important;
}

.tokyo-item-badges {
    margin: 6px 0 10px !important;
    gap: 8px !important;
}

.tokyo-item-price {
    margin: 6px 0 8px !important;
    padding: 6px 0 !important;
}

.tokyo-form-stack {
    gap: 10px !important;
}

.tokyo-form-stack .tokyo-field-section {
    padding: 4px 0 !important;  /* v4.232 紧凑 (was 7px 14px) */
    margin-bottom: 0 !important;
    gap: 8px !important;  /* 2→8px - 用户: 宝贝类型上下拉一点 */
}

.tokyo-form-stack .tokyo-field-label {
    margin: 0 !important;
}

.tokyo-button-section {
    margin-top: 8px !important;
}

.tokyo-disclaimer-text {
    margin-top: 12px !important;
    padding: 14px 14px !important;
    line-height: 1.7 !important;
}

.tokyo-disclaimer-text p {
    margin: 0 0 4px !important;
}

/* =====================================================================
 * gt-dark-fix131.css — fill layui modal container (no white edge)
 * Layer container is 760px; remove max-width so modal fills it edge-to-edge.
 * ===================================================================== */

.tokyo-notice-modal {
    max-width: none !important;
    width: 100% !important;
    background: rgba(8, 12, 18, 0.95) !important;
}

/* Override layui layer default white background */
.layui-layer.tokyo-layer-popup .layui-layer-content {
    background: rgba(8, 12, 18, 0.95) !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.layui-layer.tokyo-layer-popup {
    background: transparent !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* =====================================================================
 * gt-dark-fix132.css — shrink .tokyo-pay-section-body gap (was 16px/14px)
 * User: "125价格这个区域间隔可以缩小点吗"
 * The big gap was actually pay-section-body padding + flex gap, not price itself.
 * ===================================================================== */

.tokyo-pay-section-body {
    padding: 4px 0 !important;
    gap: 6px !important;
}

.tokyo-item-price {
    margin: 2px 0 !important;
    padding: 4px 0 !important;
    font-size: 2rem !important;
    line-height: 1.1 !important;
}

.tokyo-item-badges {
    margin: 4px 0 4px !important;
}

/* fix133 REMOVED — conflicted with fix233, password input was taller than contact.
   Now password uses fix233 styles (1px border, 8px radius, height 38px, padding 6px 12px). */

/* =====================================================================
 *gt-dark-fix134.css — bold up text in all right-col areas (except ¥125)
 * User: "这个区域的字可以加粗吗, 除了价格不动"
 * ===================================================================== */

/* Section labels (宝贝类型 / 查询密码 / 购买数量 / 可付款) */
.tokyo-field-label {
    font-weight: 700 !important;
    color: #d8e0eb !important;
    font-size: 0.88rem !important;
}

/* Badge text (自动发货 / 库存充足 / 分享) */
.tokyo-item-badges .badge-soft {
    font-weight: 700 !important;
}

/* SKU button labels (月卡 / 永久) */
.tokyo-form-stack .sku-list .sku-label {
    font-weight: 700 !important;
}

/* Quantity number */
.qty-group input[type="number"] {
    font-weight: 700 !important;
}

/* Payment method button text */
.tokyo-pay-list > *,
.cash-pay .pay-list > *,
.tokyo-pay-list label,
.cash-pay .pay-list label {
    font-weight: 700 !important;
}

/* Password placeholder text in input — make non-italic + bold */
.tokyo-form-stack input[name="password"]::placeholder,
.tokyo-form-stack input[type="password"]::placeholder,
.tokyo-form-stack input.password-input::placeholder {
    font-style: normal !important;
    font-weight: 700 !important;
}

/* Disclaimer text */
.tokyo-disclaimer-text,
.tokyo-disclaimer-text p {
    font-weight: 600 !important;
}

/* =====================================================================
 * gt-dark-fix135.css — make section labels bigger + bolder (user feedback)
 * 宝贝类型 / 查询密码 / 购买数量 / 可付款 — make them stand out more.
 * ===================================================================== */

.tokyo-field-label {
    font-weight: 800 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 0 6px !important;
}

/* =====================================================================
 * gt-dark-fix136.css — outrank .tokyo-form-stack .tokyo-field-label (specificity 0,2,0)
 * Use body prefix + class.class repeat for (0,2,1) specificity.
 * ===================================================================== */

body .tokyo-field-label.tokyo-field-label {
    font-weight: 800 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 0 6px !important;
}

/* =====================================================================
 * gt-dark-fix137.css — make ¥125 price glow brighter (user: 颜色可以调好看点)
 * Use neon cyan-blue gradient + text glow + heavier weight.
 * ===================================================================== */

.tokyo-item-price,
body .tokyo-item-price {
    background: linear-gradient(135deg, #00d4ff 0%, #4a90e2 50%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 2.4rem !important;
    font-weight: 900 !important;
    text-shadow: 0 0 24px rgba(0, 212, 255, 0.45) !important;
    letter-spacing: -0.02em !important;
    margin: 8px 0 !important;
    padding: 4px 0 !important;
}

.tokyo-item-price .price,
body .tokyo-item-price .price {
    background: linear-gradient(135deg, #00d4ff 0%, #4a90e2 50%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900 !important;
}

.tokyo-item-price .currency,
body .tokyo-item-price .currency {
    background: linear-gradient(135deg, #00d4ff, #4a90e2) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
}

/* =====================================================================
 * gt-dark-fix138.css — SKU price badges use same neon gradient as ¥125
 * ===================================================================== */

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    background: linear-gradient(135deg, #4a90e2 0%, #7c3aed 50%, #c084fc 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.30) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    box-shadow: 0 3px 12px rgba(124, 58, 237, 0.5), 0 0 16px rgba(74, 144, 226, 0.35) !important;
    padding: 4px 10px !important;
    letter-spacing: 0.01em !important;
}

.tokyo-form-stack .sku-list .sku {
    border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.tokyo-form-stack .sku-list .sku:hover {
    border-color: rgba(126, 200, 255, 0.7) !important;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.30) !important;
}

/* =====================================================================
 * gt-dark-fix139.css — pull SKU price badge closer to button (user: 贴合价格)
 * ===================================================================== */

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    top: -6px !important;
    right: -6px !important;
    padding: 4px 9px !important;
    font-size: 0.78rem !important;
}

.tokyo-form-stack .sku-list .sku,
body .tokyo-form-stack .sku-list .sku {
    padding: 4px 10px !important;  /* 14 20 → 4 10 - chip 紧凑 */
    min-width: 0 !important;  /* 90 → 0 - 不强制 */
}

/* =====================================================================
 * gt-dark-fix140.css — SKU badge: tall wine-red pill with white text
 * User: "可以把价格改成这样的款式吗 白色不改变"
 * ===================================================================== */

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    background: linear-gradient(180deg, #5c1f2e 0%, #3e1722 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 4px 14px rgba(94, 31, 46, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    padding: 8px 12px !important;
    min-width: 44px !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* =====================================================================
 * gt-dark-fix141.css — SKU badge: tall rugby-ball pill (shape only)
 * User: "不改变颜色 这个边框效果想要这样的"
 * Keep the neon cyan-purple gradient — change shape to tall pill.
 * ===================================================================== */

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    background: linear-gradient(180deg, #00d4ff 0%, #4a90e2 50%, #7c3aed 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.02em !important;
    box-shadow:
        0 6px 20px rgba(0, 212, 255, 0.45),
        0 0 28px rgba(124, 58, 237, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    padding: 18px 12px !important;
    min-width: 48px !important;
    height: auto !important;
    min-height: 64px !important;
    text-align: center !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
    transform: translateY(-4px) !important;
}

/* =====================================================================
 * gt-dark-fix142.css — SKU badge: TALL OVAL (not ball)
 * User: "改的不对" — fix141 made it a ball because min-width + 999px radius.
 * Solution: fixed narrow width + tall height + 999px radius = rugby oval.
 * ===================================================================== */

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #00d4ff 0%, #4a90e2 50%, #7c3aed 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.01em !important;
    box-shadow:
        0 6px 20px rgba(0, 212, 255, 0.45),
        0 0 28px rgba(124, 58, 237, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    border-radius: 999px !important;
    text-align: center !important;
    line-height: 1.05 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-6px) !important;
    top: -4px !important;
    right: -4px !important;
}

/* =====================================================================
 * gt-dark-fix143.css — SKU price badge: SPEECH BUBBLE (with triangle tail)
 * User: "认真看它的价格边框款式是这种带三角尾巴的对话气泡"
 * - Main bubble: oval/dark fill
 * - Triangle tail pointing down to SKU button
 * - Position above button, centered horizontally
 * ===================================================================== */

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    width: auto !important;
    min-width: 60px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 36px !important;
    max-height: none !important;
    padding: 8px 14px !important;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    text-align: center !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    top: -32px !important;
    right: 50% !important;
    margin-right: -30px !important;
    white-space: nowrap !important;
    position: absolute !important;
}

/* Triangle tail (CSS ::after pointing DOWN, near LEFT of bubble - pointing to chip center) */
.tokyo-form-stack .sku-list .badge-money::after,
body .tokyo-form-stack .sku-list .badge-money::after {
    content: "" !important;
    position: absolute !important;
    bottom: -7px !important;
    left: 20% !important;  /* 85%→20% - 指针移到气泡左边 (指向 chip 中央) */
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-top: 8px solid #1a1a1a !important;
}

/* Inner triangle (LEFT side of bubble) */
.tokyo-form-stack .sku-list .badge-money::before,
body .tokyo-form-stack .sku-list .badge-money::before {
    content: "" !important;
    position: absolute !important;
    bottom: -9px !important;
    left: 20% !important;  /* 85%→20% - 同步 */
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 9px solid rgba(255, 255, 255, 0.25) !important;
    z-index: -1 !important;
}

/* SKU button container — make room for bubble above */
.tokyo-form-stack .sku-list .sku,
body .tokyo-form-stack .sku-list .sku {
    margin-top: 0 !important;  /* 取消 margin-top 14px (原) - chip 紧贴 */
    padding: 4px 10px !important;  /* padding 12 20 → 4 10 - chip 紧凑 */
}

/* =====================================================================
 * gt-dark-fix144.css — center speech bubble above SKU button (user: 是不是居中了)
 * The button (.sku) needs position:relative so badge centers on the button itself,
 * not on the flex container (which has different widths for different buttons).
 * ===================================================================== */

.tokyo-form-stack .sku-list .sku,
body .tokyo-form-stack .sku-list .sku {
    position: relative !important;
    margin-top: 0 !important;  /* margin-top 14px→0 - chip 紧贴 */
}

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    position: absolute !important;
    left: 50% !important;
    top: -32px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* =====================================================================
 * gt-dark-fix145.css — shift badge right (user: 价格可以往右边移动不太居中了)
 * ===================================================================== */

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    left: 60% !important;
    transform: translateX(-30%) !important;
}

/* =====================================================================
 * gt-dark-fix146.css — push badge more to the right (user: 还可以移动点不)
 * 60% → 75%
 * ===================================================================== */

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    left: 75% !important;
    transform: translateX(-15%) !important;
}

/* =====================================================================
 * gt-dark-fix147.css — tighten SKU button (user: 月卡永久这个区域边框大了点)
 * Reduce padding + border width on the SKU buttons.
 * ===================================================================== */

.tokyo-form-stack .sku-list .sku,
body .tokyo-form-stack .sku-list .sku {
    padding: 4px 10px !important;  /* 8 16 → 4 10 */
    min-width: 70px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    font-size: 0.88rem !important;
    margin-top: 0 !important;  /* 16 → 0 */
}

.tokyo-form-stack .sku-list .sku-label {
    font-size: 0.88rem !important;
}

/* =====================================================================
 * gt-dark-fix148.css — align speech bubble exactly over each SKU button center
 * User: "价格那个气泡可以对准 月卡 季卡 永久这个区域不"
 * Restore center alignment (left:50% + translateX(-50%)) so tail points to button center.
 * ===================================================================== */

.tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    left: 50% !important;
    transform: translateX(-50%) !important;
}


/* Last SKU → bubble aligned to button's right edge */
.tokyo-form-stack .sku-list .sku:last-child .badge-money,
body .tokyo-form-stack .sku-list .sku:last-child .badge-money {
    left: auto !important;
    right: -28px !important;
    transform: none !important;
}

/* Middle SKUs → badge even further right (-28) */
.tokyo-form-stack .sku-list .sku:not(:first-child):not(:last-child) .badge-money,
body .tokyo-form-stack .sku-list .sku:not(:first-child):not(:last-child) .badge-money {
    left: auto !important;
    right: -36px !important;  /* -28→-36 */
    transform: none !important;
}

/* Single SKU (only-child) → badge even further right (-28) */
.tokyo-form-stack .sku-list .sku:only-child .badge-money,
body .tokyo-form-stack .sku-list .sku:only-child .badge-money {
    left: auto !important;
    right: -28px !important;
    transform: none !important;
}


/* Last SKU → badge very right */
body .tokyo-form-stack .sku-list .sku.sku:last-child .badge-money.badge-money,
body .tokyo-form-stack .sku-list .sku.sku:last-child .badge-money.badge-money {
    left: auto !important;
    right: -28px !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Single SKU → badge even further right (-28) */
body .tokyo-form-stack .sku-list .sku.sku:only-child .badge-money.badge-money {
    left: auto !important;
    right: -28px !important;
    transform: none !important;
    margin: 0 !important;
}

/* Middle SKUs → badge even further right (-28) */
body .tokyo-form-stack .sku-list .sku.sku:not(:first-child):not(:last-child) .badge-money.badge-money {
    left: auto !important;
    right: -28px !important;
    transform: none !important;
    margin: 0 !important;
}


/* =====================================================================
 * gt-dark-fix155.css — smaller font + nowrap on SKU price badge
 * User: "价格可以把字体改小一点吗"
 * ¥280.00 / ¥480.00 etc. were wrapping inside the oval badge.
 * ===================================================================== */

body .tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    min-width: 56px !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    line-height: 1.1 !important;
}

/* =====================================================================
 * gt-dark-fix156.css — shark.lc exact SKU badge positioning
 * Source: shark.lc Tokyo-Index.js + shark-Style.css (downloaded 2026-09-16)
 * Key insight: shark.lc uses FIXED `top: -22px; right: -16px` for ALL badges.
 * No :first-child / :last-child logic — every badge sits in top-right of its button.
 * Visual effect: looks "edge-aligned" because the offset is small relative to badge width.
 * ===================================================================== */

body .tokyo-form-stack .sku-list .sku,
body .tokyo-form-stack .sku-list .sku {
    position: relative !important;
    overflow: visible !important;
}

body .tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    position: absolute !important;
    top: -22px !important;
    right: -8px !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    isolation: isolate !important;
    z-index: 5 !important;
}

/* Triangle tail (LEFT side of bubble - pointing to chip center) */
body .tokyo-form-stack .sku-list .badge-money::after,
body .tokyo-form-stack .sku-list .badge-money::after {
    content: "" !important;
    position: absolute !important;
    left: 20% !important;  /* 80%→20% - 指针在气泡左边 */
    bottom: -6px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-top: 7px solid #1a1a1a !important;
    z-index: -1 !important;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.20)) !important;
}

/* Outer triangle stroke (LEFT side of bubble) */
body .tokyo-form-stack .sku-list .badge-money::before,
body .tokyo-form-stack .sku-list .badge-money::before {
    content: "" !important;
    position: absolute !important;
    left: 20% !important;  /* 80%→20% - 同步 */
    bottom: -8px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-top: 8px solid rgba(255, 255, 255, 0.20) !important;
    z-index: -2 !important;
}

/* =====================================================================
 * gt-dark-fix160.css — comprehensive mobile responsive fixes
 * User: "现在改好的所有主题元素，手机端好像不是很兼容哦"
 * ===================================================================== */

@media (max-width: 768px) {

    /* Shell narrower on mobile */
    .tokyo-shell {
        width: calc(100% - 16px) !important;
    }

    /* Item page grid — single column on mobile */
    .tokyo-item-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 12px !important;
    }

    /* Price ¥125 — smaller on mobile (was 2.4rem too big) */
    .tokyo-item-price {
        font-size: 1.6rem !important;
        margin: 4px 0 8px !important;
    }

    .tokyo-item-price .currency {
        font-size: 1.2rem !important;
    }

    /* Title row — icon smaller */
    .tokyo-item-icon {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
    }

    .tokyo-item-inline-title {
        font-size: 1rem !important;
    }

    /* Catalog cards — 2 columns on mobile */
    .tokyo-catalog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .tokyo-catalog-card {
        padding: 10px !important;
    }

    .tokyo-catalog-card-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
    }

    /* Field sections — smaller padding */
    .tokyo-field-section {
        padding: 10px 12px !important;
    }

    /* Pay buttons — wrap better */
    .tokyo-pay-list > *,
    .cash-pay .pay-list > *,
    .tokyo-pay-list label,
    .cash-pay .pay-list label {
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
    }

    /* Notice modal — full width on mobile */
    .layui-layer.tokyo-layer-popup {
        width: calc(100% - 16px) !important;
        left: 8px !important;
    }

    .tokyo-notice-modal {
        padding: 18px 16px !important;
        max-width: none !important;
    }

    .tokyo-notice-brand {
        font-size: 2rem !important;
    }

    /* Nav — smaller padding */
    .tokyo-nav {
        padding: 6px 10px !important;
    }

    /* Section labels — slightly smaller */
    .tokyo-field-label {
        font-size: 0.92rem !important;
    }

    /* Disclaimer — smaller padding */
    .tokyo-disclaimer-text {
        padding: 12px !important;
        font-size: 0.82rem !important;
    }

    /* Item badges — wrap */
    .tokyo-item-badges {
        gap: 6px !important;
    }

    .tokyo-item-badges .badge-soft {
        padding: 6px 10px !important;
        font-size: 0.78rem !important;
    }

    /* Shop layout — sidebar hidden on mobile, items shown stacked */
    .tokyo-shop-layout {
        grid-template-columns: 1fr !important;
    }

    .tokyo-sidebar-panel {
        position: relative !important;
        top: 0 !important;
    }

    /* Detail panel — full width */
    .tokyo-inline-detail-panel {
        margin-top: 16px !important;
    }

    /* Form wrap — narrower padding */
    .tokyo-item-form-wrap {
        padding: 8px 10px !important;
    }
}

/* Very narrow phones */
@media (max-width: 480px) {

    .tokyo-catalog-grid {
        grid-template-columns: 1fr !important;
    }

    .tokyo-catalog-card {
        flex-direction: row !important;
        text-align: left !important;
    }

    .tokyo-item-icon {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }

    .tokyo-notice-brand {
        font-size: 1.5rem !important;
    }
}

/* =====================================================================
 * gt-dark-fix161.css — mobile catalog card: allow name to wrap (was 1 char per line)
 * User: "看不到商品名称只能看图片" — white-space:nowrap forced single char per line.
 * ===================================================================== */

@media (max-width: 768px) {

    .tokyo-catalog-card {
        min-height: 96px !important;
        padding: 12px !important;
    }

    .tokyo-catalog-card-link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .tokyo-catalog-card-icon {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        flex-shrink: 0 !important;
    }

    .tokyo-catalog-card-body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .tokyo-catalog-card-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0.85rem !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        max-height: 2.6em !important;
        overflow: hidden !important;
    }

    .tokyo-catalog-card-hot {
        font-size: 0.62rem !important;
        padding: 2px 5px !important;
    }
}

/* =====================================================================
 * gt-dark-fix162.css — FORCE column layout on mobile (max specificity)
 * User: "还是这样的效果手机端" — fix161 was overridden by higher-specificity
 * rule in fix42's catalog-card-body (display:flex row + nowrap).
 * ===================================================================== */

@media (max-width: 768px) {
    body .tokyo-catalog-card .tokyo-catalog-card-link.tokyo-catalog-card-link,
    body .tokyo-catalog-card .tokyo-catalog-card-link.tokyo-catalog-card-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    body .tokyo-catalog-card .tokyo-catalog-card-body.tokyo-catalog-card-body,
    body .tokyo-catalog-card .tokyo-catalog-card-body.tokyo-catalog-card-body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    body .tokyo-catalog-card .tokyo-catalog-card-name.tokyo-catalog-card-name,
    body .tokyo-catalog-card .tokyo-catalog-card-name.tokyo-catalog-card-name {
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        max-width: 100% !important;
        width: 100% !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        font-weight: 600 !important;
    }
}

/* Tablet portrait too */
@media (max-width: 1024px) and (max-aspect-ratio: 1/1) {
    body .tokyo-catalog-card .tokyo-catalog-card-body.tokyo-catalog-card-body {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    body .tokyo-catalog-card .tokyo-catalog-card-name.tokyo-catalog-card-name {
        white-space: normal !important;
        max-width: 100% !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
}

/* =====================================================================
 * gt-dark-fix163.css — MOBILE: single column for catalog cards (shark.lc parity)
 * Shark.lc mobile shows catalog cards as single column (1 card per row).
 * Category cards stay 2 columns.
 * ===================================================================== */

@media (max-width: 768px) {

    /* Catalog grid — single column on mobile */
    body .tokyo-catalog-grid.tokyo-catalog-grid,
    body .tokyo-catalog-grid.tokyo-catalog-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        grid-template-columns: none !important;
    }

    /* Catalog card — full width row layout */
    body .tokyo-catalog-card.tokyo-catalog-card,
    body .tokyo-catalog-card.tokyo-catalog-card {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: row !important;
        display: flex !important;
        min-height: 96px !important;
        padding: 12px !important;
    }

    body .tokyo-catalog-card .tokyo-catalog-card-link.tokyo-catalog-card-link,
    body .tokyo-catalog-card .tokyo-catalog-card-link.tokyo-catalog-card-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    body .tokyo-catalog-card .tokyo-catalog-card-icon.tokyo-catalog-card-icon,
    body .tokyo-catalog-card .tokyo-catalog-card-icon.tokyo-catalog-card-icon {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        flex-shrink: 0 !important;
    }

    body .tokyo-catalog-card .tokyo-catalog-card-body.tokyo-catalog-card-body,
    body .tokyo-catalog-card .tokyo-catalog-card-body.tokyo-catalog-card-body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    body .tokyo-catalog-card .tokyo-catalog-card-name.tokyo-catalog-card-name,
    body .tokyo-catalog-card .tokyo-catalog-card-name.tokyo-catalog-card-name {
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        max-width: 100% !important;
        width: 100% !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        font-weight: 600 !important;
    }

    /* HOT badge — smaller */
    body .tokyo-catalog-card .tokyo-catalog-card-hot.tokyo-catalog-card-hot,
    body .tokyo-catalog-card .tokyo-catalog-card-hot.tokyo-catalog-card-hot {
        font-size: 0.66rem !important;
        padding: 2px 6px !important;
    }

    /* Category tree — 2 columns */
    body .tokyo-category-tree.tokyo-category-tree,
    body .tokyo-category-tree.tokyo-category-tree {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Catalog heading — smaller */
    body .tokyo-catalog-heading .tokyo-index-panel-title,
    body .tokyo-catalog-heading .tokyo-index-panel-title {
        font-size: 1rem !important;
    }
}

/* Larger phones / tablets — 2 columns for catalog */
@media (min-width: 769px) and (max-width: 1024px) {
    body .tokyo-catalog-grid.tokyo-catalog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =====================================================================
 * gt-dark-fix164.css — mobile drawer sidebar (default hidden, slide in)
 * User: "我们顶栏手机端效果是这样的" — sidebar should be drawer-style.
 * JS already adds `body.tokyo-mobile-drawer-open` on filter trigger click.
 * ===================================================================== */

@media (max-width: 768px) {

    /* Sidebar default hidden off-screen */
    body .tokyo-sidebar-panel.tokyo-sidebar-panel,
    body .tokyo-sidebar-panel.tokyo-sidebar-panel {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 86% !important;
        max-width: 340px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1050 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 0 16px 16px 0 !important;
        background: rgba(16, 22, 30, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        overflow-y: auto !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
    }

    /* When drawer-open — sidebar slides in */
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel.tokyo-sidebar-panel {
        left: 0 !important;
    }

    /* Backdrop — visible when drawer-open */
    body .tokyo-mobile-sidebar-backdrop.tokyo-mobile-sidebar-backdrop,
    body .tokyo-mobile-sidebar-backdrop.tokyo-mobile-sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(2px) !important;
        z-index: 1040 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }

    body.tokyo-mobile-drawer-open .tokyo-mobile-sidebar-backdrop.tokyo-mobile-sidebar-backdrop {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Close button visible on mobile */
    body .tokyo-mobile-sidebar-close.tokyo-mobile-sidebar-close,
    body .tokyo-mobile-sidebar-close.tokyo-mobile-sidebar-close {
        display: inline-flex !important;
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
    }

    /* Filter trigger button visible on mobile */
    body .tokyo-mobile-filter-trigger.tokyo-mobile-filter-trigger,
    body .tokyo-mobile-filter-trigger.tokyo-mobile-filter-trigger {
        display: inline-flex !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* Sidebar category tree — 2 columns */
    body .tokyo-category-tree.tokyo-category-tree,
    body .tokyo-category-tree.tokyo-category-tree {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 16px 14px !important;
        max-height: calc(100vh - 100px) !important;
    }

    /* Shop layout — single column on mobile (sidebar removed from flow) */
    body .tokyo-shop-layout.tokyo-shop-layout,
    body .tokyo-shop-layout.tokyo-shop-layout {
        display: block !important;
    }

    /* Detail panel — full width on mobile */
    body .tokyo-inline-detail-panel.tokyo-inline-detail-panel,
    body .tokyo-inline-detail-panel.tokyo-inline-detail-panel {
        margin-top: 16px !important;
    }
}

/* =====================================================================
 * gt-dark-fix165.css — MOBILE: collapse navbar into hamburger menu
 * User: "鲨鱼手机端顶栏是这样的" — shark.lc mobile has clean nav (brand + 3 icons).
 * Our current mobile: 5+ buttons crammed in top bar.
 * Fix: hide navbar-collapse by default on mobile, show hamburger toggle.
 * ===================================================================== */

@media (max-width: 768px) {

    /* Hamburger toggle visible on mobile */
    body .tokyo-nav .tokyo-nav-toggle.tokyo-nav-toggle,
    body .tokyo-nav .tokyo-nav-toggle.tokyo-nav-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin-left: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        color: #fff !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        order: 99 !important;
    }

    body .tokyo-nav .tokyo-nav-toggle .navbar-toggler-icon,
    body .tokyo-nav .tokyo-nav-toggle .navbar-toggler-icon {
        width: 18px !important;
        height: 18px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M5 7h20M5 15h20M5 23h20'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    /* Navbar collapse — hidden by default on mobile */
    body .tokyo-nav .navbar-collapse.navbar-collapse,
    body .tokyo-nav .navbar-collapse.navbar-collapse {
        display: none !important;
    }

    /* When toggled open — show as fullscreen drawer */
    body .tokyo-nav .navbar-collapse.show.navbar-collapse,
    body .tokyo-nav .navbar-collapse.show.navbar-collapse {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        right: 8px !important;
        left: auto !important;
        width: calc(100% - 16px) !important;
        max-width: 360px !important;
        background: rgba(16, 22, 30, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        z-index: 1060 !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    }

    /* Nav links inside collapse — stack vertically */
    body .tokyo-nav .navbar-collapse .tokyo-nav-links.tokyo-nav-links,
    body .tokyo-nav .navbar-collapse .tokyo-nav-links.tokyo-nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .tokyo-nav .navbar-collapse .tokyo-nav-links .nav-item,
    body .tokyo-nav .navbar-collapse .tokyo-nav-links .nav-item {
        width: 100% !important;
    }

    body .tokyo-nav .navbar-collapse .tokyo-nav-link.tokyo-nav-link,
    body .tokyo-nav .navbar-collapse .tokyo-nav-link.tokyo-nav-link {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        font-size: 0.92rem !important;
    }

    body .tokyo-nav .navbar-collapse .tokyo-auth-actions,
    body .tokyo-nav .navbar-collapse .tokyo-auth-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
    }

    body .tokyo-nav .navbar-collapse .tokyo-button,
    body .tokyo-nav .navbar-collapse .tokyo-button {
        width: 100% !important;
    }

    /* Brand name — shorter on mobile */
    body .tokyo-brand-name.tokyo-brand-name,
    body .tokyo-brand-name.tokyo-brand-name {
        font-size: 0.95rem !important;
    }

    /* Brand-mark (favicon) */
    body .tokyo-brand-mark.tokyo-brand-mark,
    body .tokyo-brand-mark.tokyo-brand-mark {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    /* Hide search combo on mobile (move to drawer) */
    body .tokyo-nav .tokyo-search-combo.tokyo-search-combo,
    body .tokyo-nav .tokyo-search-combo.tokyo-search-combo {
        display: none !important;
    }

    /* Nav padding tighter */
    body .tokyo-nav.tokyo-nav,
    body .tokyo-nav.tokyo-nav {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    body .tokyo-nav-shell.tokyo-nav-shell,
    body .tokyo-nav-shell.tokyo-nav-shell {
        padding: 8px 0 0 !important;
    }
}

/* =====================================================================
 * gt-dark-fix167.css — mobile: show category sidebar directly (no drawer on homepage)
 * User: "为什么打开首页手机端显示的不是商品分类"
 * Mobile homepage = show category list (let user pick), no drawer.
 * Drawer is only for showing/hiding sidebar AFTER user navigates elsewhere.
 * ===================================================================== */

@media (max-width: 768px) {

    /* Sidebar visible by default on mobile (categories accessible) */
    body .tokyo-sidebar-panel.tokyo-sidebar-panel,
    body .tokyo-sidebar-panel.tokyo-sidebar-panel {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        z-index: 1 !important;
        transition: none !important;
        border-radius: 16px !important;
        background: rgba(16, 22, 30, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        margin-bottom: 16px !important;
    }

    /* Hide backdrop on mobile (no overlay needed) */
    body .tokyo-mobile-sidebar-backdrop.tokyo-mobile-sidebar-backdrop {
        display: none !important;
    }

    /* Show close button only when in drawer mode (it won't be on homepage now) */
    body .tokyo-mobile-sidebar-close.tokyo-mobile-sidebar-close {
        display: none !important;
    }

    /* Show filter trigger as a button at top of sidebar to enable drawer mode later */
    body .tokyo-mobile-filter-trigger.tokyo-mobile-filter-trigger {
        display: none !important;
    }

    /* Shop layout — single column stack on mobile */
    body .tokyo-shop-layout.tokyo-shop-layout,
    body .tokyo-shop-layout.tokyo-shop-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Sidebar comes first */
    body .tokyo-sidebar-panel.tokyo-sidebar-panel {
        order: 1 !important;
    }

    /* Catalog panel comes second */
    body .tokyo-catalog-panel.tokyo-catalog-panel {
        order: 2 !important;
    }

    /* Inline detail panel comes third */
    body .tokyo-inline-detail-panel.tokyo-inline-detail-panel {
        order: 3 !important;
        margin-top: 16px !important;
    }
}

/* =====================================================================
 * gt-dark-fix168.css — close button visible when drawer is open
 * User: "手机端打开收缩键显示是这样的是不是有问题"
 * Drawer opened via ☰ but no close button (X) shown to dismiss it.
 * ===================================================================== */

@media (max-width: 768px) {

    /* When drawer-open — show close button INSIDE the sidebar */
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-sidebar-close,
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-sidebar-close {
        display: inline-flex !important;
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 1100 !important;
        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        color: #fff !important;
        width: 36px !important;
        height: 36px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        cursor: pointer !important;
    }

    /* When drawer-open — show backdrop */
    body.tokyo-mobile-drawer-open .tokyo-mobile-sidebar-backdrop.tokyo-mobile-sidebar-backdrop,
    body.tokyo-mobile-drawer-open .tokyo-mobile-sidebar-backdrop.tokyo-mobile-sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: blur(2px) !important;
        z-index: 1040 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Sidebar becomes drawer ONLY when body has tokyo-mobile-drawer-open */
    /* Default state (homepage): show inline (already set by fix167) */
}

@media (min-width: 769px) {
    /* Desktop: always hide mobile drawer elements */
    body .tokyo-mobile-sidebar-close.tokyo-mobile-sidebar-close,
    body .tokyo-mobile-sidebar-backdrop.tokyo-mobile-sidebar-backdrop,
    body .tokyo-mobile-filter-trigger.tokyo-mobile-filter-trigger {
        display: none !important;
    }
}

/* =====================================================================
 * gt-dark-fix169.css — MOBILE DRAWER (shark.lc parity): all nav + brand in one drawer
 * User: "鲨鱼点击打开收缩键它显示是这样的"
 * Shark.lc mobile drawer contains:
 *   1. Brand logo + name + lang switcher + close button
 *   2. Nav links (购物 / 订单查询 / 公告 / 在线客服) — full-width buttons
 *   3. Auth buttons (登录 / +创建账号) — side by side
 *   4. Brand big text (SHARK CHEATS)
 *   5. CATEGORIES title + category grid
 * ===================================================================== */

@media (max-width: 768px) {

    /* When drawer is OPEN — sidebar becomes full-screen drawer (overrides fix167 inline) */
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel.tokyo-sidebar-panel,
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel.tokyo-sidebar-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1050 !important;
        border-radius: 0 !important;
        background: rgba(8, 12, 20, 0.98) !important;
        backdrop-filter: blur(24px) !important;
        overflow-y: auto !important;
        padding: 16px !important;
        margin-bottom: 0 !important;
    }

    /* Move nav links INSIDE the drawer on mobile — use the navbar collapse */
    /* When drawer-open: show navbar-collapse content in drawer flow */
    body.tokyo-mobile-drawer-open .tokyo-nav .navbar-collapse.show.navbar-collapse,
    body.tokyo-mobile-drawer-open .tokyo-nav .navbar-collapse.show.navbar-collapse {
        display: flex !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 12px 0 !important;
        box-shadow: none !important;
        margin-bottom: 12px !important;
    }

    /* Drawer close button — bottom right (shark.lc style) */
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel .tokyo-mobile-sidebar-close,
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel .tokyo-mobile-sidebar-close {
        display: inline-flex !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        top: auto !important;
        z-index: 1100 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #1a1a1a !important;
        width: 48px !important;
        height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    }

    /* When drawer-open — show backdrop with click-to-close */
    body.tokyo-mobile-drawer-open .tokyo-mobile-sidebar-backdrop,
    body.tokyo-mobile-drawer-open .tokyo-mobile-sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: blur(2px) !important;
        z-index: 1040 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Category tree — full width grid in drawer */
    body.tokyo-mobile-drawer-open .tokyo-category-tree.tokyo-category-tree,
    body.tokyo-mobile-drawer-open .tokyo-category-tree.tokyo-category-tree {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 8px !important;
        max-height: none !important;
    }
}

/* =====================================================================
 * gt-dark-fix171.css — mobile nav block inside sidebar drawer (shark.lc parity)
 * Adds brand, nav links, auth buttons, hero text inside sidebar.
 * ===================================================================== */

/* Hidden on desktop */
.tokyo-mobile-nav-block {
    display: none !important;
}

@media (max-width: 768px) {
    /* Visible only on mobile */
    .tokyo-mobile-nav-block {
        display: block !important;
        padding: 12px 14px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-bottom: 16px !important;
    }

    .tokyo-mobile-brand {
        margin-bottom: 14px !important;
    }

    .tokyo-mobile-brand-name {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        color: #fff !important;
    }

    .tokyo-mobile-nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .tokyo-mobile-nav-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 12px !important;
        color: #d8e0eb !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
    }

    .tokyo-mobile-nav-link:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(126, 200, 255, 0.40) !important;
        color: #fff !important;
    }

    .tokyo-mobile-nav-link i {
        color: #7ec8ff !important;
        font-size: 1.05rem !important;
        width: 22px !important;
        text-align: center !important;
    }

    .tokyo-mobile-auth-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .tokyo-mobile-auth-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
    }

    .tokyo-mobile-auth-login {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
    }

    .tokyo-mobile-auth-register {
        background: linear-gradient(135deg, #4a90e2, #7c3aed) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
    }

    .tokyo-mobile-auth-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.35) !important;
    }

    .tokyo-mobile-brand-hero {
        text-align: center !important;
        font-size: 1.8rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.05em !important;
        background: linear-gradient(135deg, #00d4ff, #4a90e2, #7c3aed) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        padding: 8px 0 !important;
        text-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important;
    }
}

/* =====================================================================
 * gt-dark-fix172.css — CORRECT shark.lc mobile pattern (per user feedback)
 * Default state: brand + hero text + categories all visible inline.
 * ☰ toggle: insert/remove nav links block between hero text and categories.
 * NO full-screen overlay drawer.
 * ===================================================================== */

@media (max-width: 768px) {

    /* Sidebar always inline (not drawer, not fixed) */
    body .tokyo-sidebar-panel.tokyo-sidebar-panel,
    body .tokyo-sidebar-panel.tokyo-sidebar-panel {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        z-index: 1 !important;
        border-radius: 16px !important;
        background: rgba(16, 22, 30, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        margin-bottom: 16px !important;
    }

    /* Mobile nav block — hidden by default */
    body .tokyo-mobile-nav-block.tokyo-mobile-nav-block,
    body .tokyo-mobile-nav-block.tokyo-mobile-nav-block {
        display: none !important;
        padding: 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-bottom: 16px !important;
        animation: slideDown 0.3s ease-out !important;
    }

    /* When ☰ toggled — show nav block */
    body.tokyo-mobile-drawer-open .tokyo-mobile-nav-block.tokyo-mobile-nav-block,
    body.tokyo-mobile-drawer-open .tokyo-mobile-nav-block.tokyo-mobile-nav-block {
        display: block !important;
    }

    @keyframes slideDown {
        from { opacity: 0; max-height: 0; }
        to { opacity: 1; max-height: 800px; }
    }

    /* Hide backdrop and the sidebar-close X on mobile (no drawer mode) */
    body .tokyo-mobile-sidebar-backdrop.tokyo-mobile-sidebar-backdrop,
    body .tokyo-mobile-sidebar-close.tokyo-mobile-sidebar-close {
        display: none !important;
    }

    /* Brand hero text — visible by default (shark.lc style) */
    .tokyo-mobile-brand-hero {
        display: block !important;
        text-align: center !important;
        font-size: 1.6rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        background: linear-gradient(135deg, #00d4ff, #4a90e2, #7c3aed) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        padding: 10px 0 !important;
        margin-bottom: 12px !important;
        text-shadow: 0 0 16px rgba(0, 212, 255, 0.3) !important;
    }

    /* Show brand hero always (not just inside nav block) */
    .tokyo-sidebar-panel .tokyo-mobile-brand-hero {
        display: block !important;
    }

    /* Move brand hero OUT of nav block (always visible above nav links) */
    /* This is done via JS — see fix173 */

    /* Nav links inside block — vertical stack */
    body.tokyo-mobile-drawer-open .tokyo-mobile-nav-links.tokyo-mobile-nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    body.tokyo-mobile-drawer-open .tokyo-mobile-nav-link.tokyo-mobile-nav-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 18px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 14px !important;
        color: #d8e0eb !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    body.tokyo-mobile-drawer-open .tokyo-mobile-nav-link i {
        color: #7ec8ff !important;
        font-size: 1.05rem !important;
        width: 22px !important;
        text-align: center !important;
    }

    /* Auth buttons — side by side */
    body.tokyo-mobile-drawer-open .tokyo-mobile-auth-actions.tokyo-mobile-auth-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    body.tokyo-mobile-drawer-open .tokyo-mobile-auth-btn.tokyo-mobile-auth-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    body.tokyo-mobile-drawer-open .tokyo-mobile-auth-login.tokyo-mobile-auth-login {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
    }

    body.tokyo-mobile-drawer-open .tokyo-mobile-auth-register.tokyo-mobile-auth-register {
        background: linear-gradient(135deg, #4a90e2, #7c3aed) !important;
        color: #fff !important;
    }
}

/* =====================================================================
 * gt-dark-fix173.css — STRONGEST specificity override for nav block
 * User: "鲨鱼的分类是固定的，点开三点展开是滚动的分类自动下滑"
 * Default state: nav block COMPLETELY hidden. Only drawer-open reveals it.
 * Override fix171's `display: block` with maximum specificity.
 * ===================================================================== */

@media (max-width: 768px) {
    body .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-nav-block.tokyo-mobile-nav-block,
    body .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-nav-block.tokyo-mobile-nav-block {
        display: none !important;
    }

    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-nav-block.tokyo-mobile-nav-block,
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-nav-block.tokyo-mobile-nav-block {
        display: block !important;
        animation: tokyoNavSlideDown 0.3s ease-out !important;
    }

    @keyframes tokyoNavSlideDown {
        from { opacity: 0; max-height: 0; }
        to { opacity: 1; max-height: 800px; }
    }
}

/* =====================================================================
 * gt-dark-fix174.css — nav block smooth max-height transition
 * User: "鲨鱼是这样的主页进去后它的分类是固定的，我点击三点他会弹出选项，
 *         分类页好像会下滑展示三点内容，在点三点分类就上滑回到进刚刚进页面的那种布置"
 * Shark.lc pattern: nav block uses max-height transition.
 * When ☰ clicked → max-height: 0 → 800px (smooth slide down).
 * Categories section naturally pushed down (document flow).
 * When ☰ clicked again → max-height 800px → 0 (smooth slide up).
 * ===================================================================== */

@media (max-width: 768px) {

    /* Nav block: ALWAYS in flow, max-height controls visibility */
    body .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-nav-block.tokyo-mobile-nav-block,
    body .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-nav-block.tokyo-mobile-nav-block {
        display: block !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease-out,
                    padding 0.35s ease-out,
                    margin 0.35s ease-out,
                    border 0.35s ease-out !important;
    }

    /* When drawer-open — slide down */
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-nav-block.tokyo-mobile-nav-block,
    body.tokyo-mobile-drawer-open .tokyo-sidebar-panel.tokyo-sidebar-panel .tokyo-mobile-nav-block.tokyo-mobile-nav-block {
        max-height: 800px !important;
        opacity: 1 !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        margin-top: 12px !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Smooth transition on the downstream category panel */
    body .tokyo-sidebar-panel.tokyo-sidebar-panel .panel-header.tokyo-index-heading,
    body .tokyo-sidebar-panel.tokyo-sidebar-panel .panel-body {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* =====================================================================
 * gt-dark-fix175.css — HIDE navbar-collapse on mobile (avoid duplicate nav with sidebar)
 * User: "购物 + 登录 + 创建账号保留在外面了" — they're from navbar-collapse dropdown.
 * We use sidebar nav block instead — hide navbar-collapse always on mobile.
 * ===================================================================== */

@media (max-width: 768px) {
    body .tokyo-nav .navbar-collapse.navbar-collapse,
    body .tokyo-nav .navbar-collapse.navbar-collapse,
    body .tokyo-nav .navbar-collapse.show.navbar-collapse {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide auth buttons in navbar (they were duplicated) */
    body .tokyo-nav .tokyo-auth-actions.tokyo-auth-actions,
    body .tokyo-nav .tokyo-auth-actions.tokyo-auth-actions {
        display: none !important;
    }

    /* Hide nav tools (lang switcher, etc) — only show brand + toggle */
    body .tokyo-nav .tokyo-nav-tools.tokyo-nav-tools,
    body .tokyo-nav .tokyo-nav-tools.tokyo-nav-tools {
        display: none !important;
    }
}

/* =====================================================================
 * gt-dark-fix176.css — MOBILE: remove nested scroll on category tree
 * User: "点击商品分类不会滑到商品列表, 滑动分类会自动上下移动不受控制"
 * Cause: .tokyo-category-tree had max-height: calc(100vh - 100px) + overflow-y: auto,
 * creating a nested scroll container that fights the page scroll.
 * Fix: on mobile let category tree flow naturally (no max-height, no overflow).
 * ===================================================================== */

@media (max-width: 768px) {
    body .tokyo-category-tree.tokyo-category-tree,
    body #tokyo-category-tree#tokyo-category-tree,
    body .tokyo-category-tree.tokyo-category-tree,
    body .tokyo-sidebar-panel .tokyo-category-tree.tokyo-category-tree {
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
        height: auto !important;
        padding: 14px !important;
    }

    /* Sidebar panel itself — no nested scroll on mobile (use page scroll) */
    body .tokyo-sidebar-panel.tokyo-sidebar-panel {
        overflow: visible !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* =====================================================================
 * gt-dark-fix186.css — catalog cards: auto-stretch last row (fill empty space)
 * User: "详情页可以自适应大小不哦， 商品多少而变化"
 * When there are fewer cards than the column count (e.g. 4-col grid with only 2 items),
 * the last row stretches each card to fill the row width — no awkward right-side whitespace.
 * ===================================================================== */

/* 5-col grid (1280+) — keep same behavior */
@media (min-width: 1280px) {
}

/* Tablet / smaller desktops — 3-col */
@media (max-width: 1024px) and (min-width: 769px) {
}

/* Mobile (already handled by fix163) — single column full width */
@media (max-width: 768px) {
    body .tokyo-catalog-card.tokyo-catalog-card,
    .tokyo-catalog-card {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* =====================================================================
 * gt-dark-fix187.css — catalog auto-fit grid (shark.lc + smarter)
 * Uses `repeat(auto-fit, minmax(N, 1fr))` — columns scale with viewport AND
 * last-row cards stretch to fill empty space.
 * - 1440px+ viewport: ~4 columns, min 300px each
 * - 1024px viewport: ~3 columns
 * - 768px viewport: ~2 columns
 * - <480px: 1 column
 * Shark.lc pattern: cards grow when there are few products.
 * ===================================================================== */

.tokyo-catalog-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 14px !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

.tokyo-catalog-card {
    width: auto !important;
    flex: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 768px) {
    body .tokyo-catalog-grid.tokyo-catalog-grid,
    .tokyo-catalog-grid {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }
}



/* =====================================================================
 * gt-dark-fix190.css — CLEAN catalog grid (no flex remnants)
 * Removed ALL flex layout + fixed width leftovers.
 * Desktop: ALWAYS 4 columns, equal-width cards, last row stays empty.
 * Mobile: single column.
 * Shark.lc parity achieved.
 * ===================================================================== */

/* Desktop ≥769px: 4 columns, equal width via 1fr */
@media (min-width: 769px) {
    body .tokyo-catalog-grid.tokyo-catalog-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 14px !important;
    }
}

/* Mobile ≤768px: 1 column */
@media (max-width: 768px) {
    body .tokyo-catalog-grid.tokyo-catalog-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}


/* fix199 — Shark.lc mobile drawer: user card + 2x2 grid + logout */
.tokyo-mobile-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.tokyo-mobile-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1f2530;
  flex: 0 0 44px;
  object-fit: cover;
}
.tokyo-mobile-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.tokyo-mobile-user-name {
  font-size: 1rem;
  font-weight: 600;
  color: #eef2f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tokyo-mobile-user-balance {
  font-size: 0.85rem;
  color: rgba(238, 242, 248, 0.7);
}
.tokyo-mobile-user-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.tokyo-mobile-user-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #eef2f8;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.tokyo-mobile-user-tile:hover,
.tokyo-mobile-user-tile:focus {
  background: rgba(74, 144, 226, 0.15);
  border-color: rgba(74, 144, 226, 0.4);
  color: #7fa1e6;
}
.tokyo-mobile-user-tile i {
  font-size: 1.6rem;
  color: #7fa1e6;
}
.tokyo-mobile-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  margin-top: 14px;
  background: transparent;
  border: 1px solid rgba(220, 80, 80, 0.5);
  border-radius: 14px;
  color: #e88a8a;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.tokyo-mobile-logout-btn:hover,
.tokyo-mobile-logout-btn:focus {
  background: rgba(220, 80, 80, 0.15);
  border-color: rgba(220, 80, 80, 0.8);
  color: #ffb0b0;
}


/* fix200 — Bolder category names (outer 500→700, inner <b> 600→800) */
body .tokyo-category-name {
    font-weight: 700 !important;
}
body .tokyo-category-name b,
.tokyo-category-name.tokyo-category-name b,
.tokyo-category-name.tokyo-category-name.tokyo-category-name b {
    font-weight: 800 !important;
}


/* fix201 — Big "SHOP CHEATS" hero banner (desktop only) */
.tokyo-hero-banner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(15, 23, 42, 0.85) 0%,
        rgba(30, 41, 75, 0.85) 50%,
        rgba(15, 23, 42, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tokyo-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(74, 144, 226, 0.25), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.20), transparent 50%);
    pointer-events: none;
}
.tokyo-hero-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: clamp(2rem, 6vw, 6rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    line-height: 1;
    font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
}
/* ZHIYU + CHEATS — 统一单色紫色 (不再渐变) */
.tokyo-hero-text,
.tokyo-hero-accent {
    background: linear-gradient(90deg, #c084fc 0%, #d8b4fe 50%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 100% 100%;
}

html body 


/* Shark.lc style: on hover, change to white with cyan glow */



/* Mobile banner padding (title font-size handled by base clamp rule) */
@media (max-width: 1024px) {
    .tokyo-hero-banner {
        padding: 18px 14px;
        margin: 0;
        border-radius: 14px;
        max-width: 100%;
    }
    .tokyo-hero-title {
        white-space: nowrap;
    }
}


/* fix205 — Hide old small "SHOP CHEATS" brand hero (replaced by fix201 big banner) */
.tokyo-mobile-brand-hero {
    display: none !important;
}


/* fix206 — Force-hide old brand hero with higher specificity (defeats mobile !important overrides) */
body body body .tokyo-mobile-brand-hero,
body body .tokyo-mobile-brand-hero,
body .tokyo-sidebar-panel .tokyo-mobile-brand-hero {
    display: none !important;
}


/* fix208 — REVERT fix207 — restore "搜索" text on search button (shark.lc parity) */
/* (fix207 was wrong — user wants shark.lc-style button with icon + text) */


/* fix210 — Bolder catalog card names (600 → 700 outer, 600 → 800 inner <b>) */
body .tokyo-catalog-card-name {
    font-weight: 700 !important;
}
body .tokyo-catalog-card-name b,
.tokyo-catalog-card-name.tokyo-catalog-card-name b {
    font-weight: 800 !important;
}


/* fix211 — Visual fallback for empty/broken cover images */
.tokyo-catalog-card-icon:not([style*="background-image"]):empty::before,
.tokyo-catalog-card-icon {
    background-color: rgba(255, 255, 255, 0.04);
}
/* When background-image is set but image fails, still show a subtle pattern */
.tokyo-catalog-card-icon {
    background-blend-mode: normal;
}
/* Fallback: when no image, show a subtle first-letter hint via ::before */
.tokyo-catalog-card-icon:not([style*="background-image"])::before {
    content: "📦";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    opacity: 0.4;
}
.tokyo-catalog-card-icon {
    position: relative;
}


/* fix258 — Let DB inline brand colors flow naturally (no CSS override) */
/* Inline style="color:#XXX" should win — don't override with !important */
/* Mobile shows these correctly; desktop was being overridden by old fix215 */


/* fix230 — Hide wholesale pricing table (user opt-out) */
.wholesale-table {
    display: none !important;
}


/* fix234 — Override Chrome autofill background (light blue → our dark bg) */
.tokyo-form-stack .form-control:-webkit-autofill,
.tokyo-form-stack .form-control:-webkit-autofill:hover,
.tokyo-form-stack .form-control:-webkit-autofill:focus,
.tokyo-form-stack input[name="password"]:-webkit-autofill,
.tokyo-form-stack input[type="password"]:-webkit-autofill,
.tokyo-form-stack input[type="text"]:-webkit-autofill,
.tokyo-form-stack input[type="email"]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.3) inset !important;
    -webkit-text-fill-color: #fff !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #fff !important;
}


/* fix261 — Bubble text also purple-blue gradient (darken bg for contrast) */
body body .tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    background: linear-gradient(135deg, rgba(15, 20, 45, 0.95) 0%, rgba(10, 12, 30, 0.95) 100%) !important;
    border: 1.5px solid rgba(126, 200, 255, 0.4) !important;
    box-shadow:
        0 4px 14px rgba(124, 58, 237, 0.45),
        0 0 20px rgba(74, 144, 226, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    color: transparent !important;
}
body body .tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    background-image:
        linear-gradient(135deg, #4a90e2 0%, #7c3aed 50%, #c084fc 100%),
        linear-gradient(135deg, rgba(15, 20, 45, 0.95) 0%, rgba(10, 12, 30, 0.95) 100%) !important;
    -webkit-background-clip: text, padding-box !important;
    background-clip: text, padding-box !important;
}
body body .tokyo-form-stack .sku-list .badge-money,
body .tokyo-form-stack .sku-list .badge-money {
    -webkit-text-fill-color: transparent !important;
}


/* fix256 — Lift SKU bubble even higher (-48 → -56) + give pill more room */
body body body .tokyo-form-stack .sku-list .badge-money,
body body .tokyo-form-stack .sku-list .badge-money {
    top: -56px !important;
}
body body body .tokyo-form-stack .sku-list .sku,
body body .tokyo-form-stack .sku-list .sku {
    margin-top: 0 !important;  /* 取消 36px margin-top (body body body specificity) */
}


/* fix257 — Allow overflow so SKU bubbles can extend above pills */
.tokyo-item-form-wrap,
.tokyo-item-panel,
.tokyo-item-panel .panel-body,
.tokyo-item-grid,
.tokyo-pay-section,
.tokyo-pay-section-body {
    overflow: visible !important;
}


/* fix259 — Soften overly bright inline brand colors via CSS filter */
.tokyo-catalog-card-name b[style*="color"],
.tokyo-catalog-card-name span[style*="color"] {
    filter: brightness(0.92) saturate(0.7);
}


/* fix260 — Abacus price uses purple-blue gradient (¥50 etc.) */
.tokyo-item-price.abacus .unit,
.tokyo-item-price.abacus .amount,
.tokyo-item-price.abacus {
    background: linear-gradient(135deg, #4a90e2 0%, #7c3aed 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}


/* fix262 — Bubble text bolder + brighter for readability */
body body body .tokyo-form-stack .sku-list .badge-money,
body body .tokyo-form-stack .sku-list .badge-money {
    font-weight: 900 !important;
    -webkit-text-stroke: 0.5px rgba(126, 200, 255, 0.6) !important;
    background-image:
        linear-gradient(135deg, #7DD3FC 0%, #A78BFA 50%, #F0ABF2 100%),
        linear-gradient(135deg, rgba(20, 26, 50, 0.92) 0%, rgba(10, 12, 30, 0.95) 100%) !important;
}


/* fix272 — Maximum boldness: thicker stroke + bigger size + strong shadow */
body body body body body .tokyo-form-stack .sku-list .badge-money,
body body body body .tokyo-form-stack .sku-list .badge-money {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-stretch: normal !important;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    padding: 0 18px !important;
    margin: 0 !important;
    color: #ffffff !important;
    text-shadow:
        0 0 10px rgba(192, 132, 252, 1),
        0 0 20px rgba(167, 139, 250, 0.8),
        0 0 30px rgba(167, 139, 250, 0.5) !important;
    -webkit-text-stroke: 2.5px rgba(167, 139, 250, 1) !important;
    background: linear-gradient(135deg, rgba(15, 20, 45, 0.95) 0%, rgba(10, 12, 30, 0.95) 100%) !important;
    box-shadow:
        0 4px 16px rgba(167, 139, 250, 0.7),
        0 0 28px rgba(192, 132, 252, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    border: 2px solid rgba(192, 132, 252, 0.8) !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    text-align: center !important;
    vertical-align: middle !important;
    gap: 0 !important;
}



/* fix291 — Wider qty pill (240px total) */
html body body .qty-group,
html body body .input-group.qty-group,
body body body body body .qty-group,
body body body body body .input-group.qty-group {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    justify-content: center !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border: 1px solid rgba(126, 200, 255, 0.3) !important;
    border-radius: 999px !important;
    background: rgba(20, 26, 50, 0.7) !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}
html body body .qty-group .change-num-sub,
html body body .qty-group .change-num-add,
body body body body body .qty-group .change-num-sub,
body body body body body .qty-group .change-num-add {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 44px !important;
}
html body body .qty-group input.form-control,
html body body .qty-group input[type="number"],
body body body body body .qty-group input.form-control,
body body body body body .qty-group input[type="number"] {
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 152px !important;
}


/* fix299 — FINAL: WHITE price text in bubble (highest priority) */
body body body body body body .tokyo-form-stack .sku-list .badge-money,
body body body body body .tokyo-form-stack .sku-list .badge-money {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.8) !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
}


/* fix300 — NUCLEAR: force white text + no stroke + no text-fill trick */
html body body body body body body .tokyo-form-stack .sku-list .badge-money,
html body body body body body .tokyo-form-stack .sku-list .badge-money,
body body body body body body body .tokyo-form-stack .sku-list .badge-money,
body body body body body body .tokyo-form-stack .sku-list .badge-money {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 6px rgba(192, 132, 252, 0.5) !important;
    background-image: none !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
}


/* fix301 — NUCLEAR: NUKE all text-stroke + force white fill on bubble */
html body body body body body body body .tokyo-form-stack .sku-list .badge-money,
html body body body body body body body .tokyo-form-stack .sku-list .badge-money *,
html body body body body body body body .tokyo-form-stack .sku-list .badge-money span,
html body body body body body body body .tokyo-form-stack .sku-list .badge-money i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    background: none !important;
    background-image: none !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
}


/* fix303 — Lift bubble above pill (no overlap with pill border) */
body body body body body body .tokyo-form-stack .sku-list .badge-money,
html body body body body body body .tokyo-form-stack .sku-list .badge-money {
    top: -60px !important;
}
.tokyo-form-stack .sku-list .sku,
body .tokyo-form-stack .sku-list .sku,
html body .tokyo-form-stack .sku-list .sku {
    margin-top: 6px !important;  /* 3→6px 再开一点 */
}


/* fix309 — Unselected SKU: OPAQUE background (no bubble bleed-through) */
body body body body body body .tokyo-form-stack .sku-list .sku:not(.is-primary),
html body body body body body body body .tokyo-form-stack .sku-list .sku:not(.is-primary) {
    border: 2px solid rgba(100, 220, 255, 0.7) !important;
    background: rgba(12, 20, 40, 0.98) !important;
    color: rgba(220, 240, 255, 0.98) !important;
    box-shadow: inset 0 0 8px rgba(100, 220, 255, 0.2) !important;
    transition: all 0.2s ease !important;
}
body body body body body body .tokyo-form-stack .sku-list .sku:not(.is-primary):hover,
html body body body body body body body .tokyo-form-stack .sku-list .sku:not(.is-primary):hover {
    border-color: rgba(100, 220, 255, 1) !important;
    background: rgba(100, 220, 255, 0.2) !important;
    box-shadow: 0 0 12px rgba(100, 220, 255, 0.4), inset 0 0 8px rgba(100, 220, 255, 0.2) !important;
}
body body body body body body .tokyo-form-stack .sku-list .sku:hover,
html body body body body body .tokyo-form-stack .sku-list .sku:hover {
    border-color: rgba(126, 200, 255, 0.85) !important;
    background: rgba(74, 144, 226, 0.15) !important;
}


/* fix424 — Force is-primary chip badge to right corner (highest specificity) */
html body body body body body body body .tokyo-form-stack .sku-list .sku.is-primary .badge-money,
body body body body body body body body .tokyo-form-stack .sku-list .sku.is-primary .badge-money {
    right: -28px !important;
    left: auto !important;
    transform: none !important;
}

/* fix424b — Force first-child chip badge to right (ultra-high specificity) */
html body body body body body body body body .tokyo-form-stack .sku-list .sku:first-child .badge-money,
body body body body body body body body body .tokyo-form-stack .sku-list .sku:first-child .badge-money,
html body body body body body body body body .tokyo-form-stack .sku-list .sku.is-primary:first-child .badge-money,
body body body body body body body body body .tokyo-form-stack .sku-list .sku.is-primary:first-child .badge-money {
    right: -28px !important;
    left: auto !important;
    transform: none !important;
}

/* fix308 — Bubble even further right (-28px) */
body body body body body body body .tokyo-form-stack .sku-list .badge-money,
html body body body body body body body .tokyo-form-stack .sku-list .badge-money {
    width: auto !important;
    min-width: 40px !important;
    max-width: 56px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    top: -14px !important;  /* -10→-14px - 气泡抬高贴边 */
    right: -36px !important;  /* -36px - 气泡更右凸 */
    left: auto !important;
    transform: none !important;
    margin-right: 0 !important;
    padding: 2px 8px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
}




/* fix322 — Sticky nav (minimal: just position, no background) */
.tokyo-nav-shell {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: transparent !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}


/* fix362 — Tighter row for mobile (3 buttons in one row) */
.tokyo-notice-quick-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: -4px 0 12px !important;
    flex-wrap: wrap !important;
}
.tokyo-notice-quick-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    border: 1.5px solid #4a90e2 !important;
    border-radius: 6px !important;
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    min-width: 0 !important;
    text-align: center !important;
}
.tokyo-notice-quick-link:hover {
    background: rgba(74, 144, 226, 0.15) !important;
    border-color: #7ec8ff !important;
    color: #7ec8ff !important;
    transform: translateY(-1px) !important;
}
.tokyo-notice-popup-inner p:last-child {
    margin-bottom: 0 !important;
}
.tokyo-notice-quick-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(126, 200, 255, 0.4) !important;
    border-radius: 999px !important;
    background: rgba(20, 26, 50, 0.6) !important;
    color: rgba(200, 181, 255, 0.95) !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.tokyo-notice-quick-link:hover {
    background: rgba(74, 144, 226, 0.2) !important;
    border-color: rgba(126, 200, 255, 0.8) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}


/* fix358 — Preserve notice inner p gradient (override .tokyo-notice-popup-inner p { color }) */
html body .tokyo-notice-popup-inner p[style*="background-image"] {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}


/* fix363+364 — Mobile-only: smaller notice text font + stretch buttons (PC unchanged) */
@media (max-width: 768px) {
    .tokyo-notice-popup-inner p {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }
    .tokyo-notice-popup-inner a {
        font-size: 0.9rem !important;
    }
    .tokyo-notice-quick-link {
        font-size: 0.85rem !important;
        padding: 7px 12px !important;
        flex: 1 1 auto !important;  /* Mobile only: stretch to fill row */
    }
    .tokyo-notice-actions button {
        font-size: 0.9rem !important;
    }
}





/* fix373 — Force-hide mobile brand hero at all viewports (replaces fix205/206 with even higher specificity) */
html body body .tokyo-mobile-brand-hero,
html body .tokyo-sidebar-panel .tokyo-mobile-brand-hero {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}


/* fix384+394+417+v4.186 — 统一紫色 ZHIYU + CHEATS (no per-span color) */
.tokyo-hero-letter {
    display: inline-block !important;
    margin-right: 0.08em !important;
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #c084fc !important;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.3) !important;
    transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.3s ease !important;
}
.tokyo-hero-letter:last-child {
    margin-right: 0 !important;
}
.tokyo-hero-accent .tokyo-hero-letter {
    color: #c084fc !important;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.3) !important;
}



/* =====================================================================
 * fix424c — NUCLEAR: Force EVERY chip badge to right corner (10 bodies)
 * ===================================================================== */
html body body body body body body body body body .tokyo-form-stack .sku-list .sku .badge-money,
html body body body body body body body body body .tokyo-form-stack .sku-list .sku.is-primary .badge-money,
html body body body body body body body body body .tokyo-form-stack .sku-list .sku:first-child .badge-money,
html body body body body body body body body body .tokyo-form-stack .sku-list .sku:last-child .badge-money,
html body body body body body body body body body .tokyo-form-stack .sku-list .sku:nth-child(1) .badge-money,
html body body body body body body body body body .tokyo-form-stack .sku-list .sku:nth-child(2) .badge-money,
html body body body body body body body body body .tokyo-form-stack .sku-list .sku:nth-child(3) .badge-money {
    top: -14px !important;  /* -10→-14px - 气泡抬高 */
    right: -36px !important;  /* -28→-36 - 气泡更右凸 */
    left: auto !important;
    transform: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}