:root {
    --qt-bg: #0a0f1e;
    --qt-surface: #161d31;
    --qt-border: #283046;
    --qt-neon-blue: #00f2ff;
    --qt-neon-purple: #bc00ff;
    --qt-text-main: #d0d2d6;
    --qt-text-sub: #82868b;
    --qt-price: #ff4c8b;
}
body { margin: 0; background: var(--qt-bg); color: var(--qt-text-main); font-family: 'JetBrains Mono', 'PingFang SC', sans-serif; padding-top: 80px; }
.qt-header { position: fixed; top: 0; width: 100%; height: 64px; background: rgba(10, 15, 30, 0.95); backdrop-filter: blur(10px); border-bottom: 2px solid var(--qt-neon-blue); z-index: 5000; box-shadow: 0 0 15px rgba(0, 242, 255, 0.2); }
.qt-nav-wrap { max-width: 1400px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; }
.qt-logo img { height: 24px; filter: drop-shadow(0 0 5px var(--qt-neon-blue)); }
.qt-menu { display: flex; gap: 35px; }
.qt-menu a { text-decoration: none; color: var(--qt-text-main); font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
.qt-menu a:hover { color: var(--qt-neon-blue); text-shadow: 0 0 10px var(--qt-neon-blue); }
.qt-container { max-width: 1440px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.qt-notice-bar { background: var(--qt-surface); border: 1px solid var(--qt-border); padding: 15px 25px; border-radius: 4px; margin-bottom: 30px; position: relative; overflow: hidden; }
.qt-notice-bar::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--qt-neon-purple); }
.qt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 15px; margin-bottom: 60px; }
.qt-card { background: var(--qt-surface); border: 1px solid var(--qt-border); border-radius: 4px; padding: 15px; text-decoration: none; transition: 0.3s; position: relative; }
.qt-card:hover { border-color: var(--qt-neon-blue); transform: scale(1.03); box-shadow: 0 0 20px rgba(0, 242, 255, 0.15); }
.qt-img-box { width: 100%; aspect-ratio: 1; background: #0e1423; border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; position: relative; overflow: hidden; }
.qt-img-box img { width: 65%; height: 65%; object-fit: contain; transition: 0.5s; }
.qt-card:hover .qt-img-box img { filter: brightness(1.2) contrast(1.1); }
.qt-name { font-size: 13px; font-weight: 500; color: #fff; height: 36px; line-height: 1.4; overflow: hidden; margin-bottom: 12px; }
.qt-footer-meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--qt-border); padding-top: 10px; }
.qt-price { color: var(--qt-price); font-weight: 800; font-size: 16px; text-shadow: 0 0 5px rgba(255, 76, 139, 0.3); }
.qt-sell { font-size: 10px; color: var(--qt-text-sub); font-family: monospace; }
.qt-tag { position: absolute; top: 0; right: 0; background: var(--qt-neon-purple); color: #fff; font-size: 9px; padding: 2px 6px; font-weight: bold; }
.qt-detail-grid { display: grid; grid-template-columns: 1fr 380px; gap: 30px; }
.qt-box { background: var(--qt-surface); border: 1px solid var(--qt-border); padding: 35px; border-radius: 4px; position: relative; }
.qt-input { width: 100%; height: 46px; background: #0a0f1e; border: 1px solid var(--qt-border); color: #fff; padding: 0 15px; box-sizing: border-box; outline: none; transition: 0.3s; margin-top: 10px; }
.qt-input:focus { border-color: var(--qt-neon-purple); box-shadow: 0 0 10px rgba(188, 0, 255, 0.2); }
.qt-btn { width: 100%; height: 50px; background: var(--qt-neon-blue); color: #000; border: none; font-size: 15px; font-weight: 900; cursor: pointer; transition: 0.3s; margin-top: 20px; text-transform: uppercase; }
.qt-btn:hover { background: #fff; box-shadow: 0 0 20px var(--qt-neon-blue); }
@media (max-width: 1300px) { .qt-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px) { .qt-grid { grid-template-columns: repeat(3, 1fr); } .qt-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .qt-grid { grid-template-columns: repeat(2, 1fr); } }