/* ============================================
   白兰地小屋 - Cyberpunk Gaming Theme
   ============================================ */

:root {
    --bg-primary: #f3f2f0;
    --bg-secondary: #faf9f7;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f4f2;
    --accent-cyan: #0098c7;
    --accent-cyan-dim: rgba(0, 152, 199, 0.08);
    --accent-cyan-glow: rgba(0, 152, 199, 0.25);
    --accent-amber: #e8950a;
    --accent-amber-dim: rgba(232, 149, 10, 0.08);
    --accent-amber-glow: rgba(232, 149, 10, 0.25);
    --text-primary: #1a1d28;
    --text-secondary: #5c6070;
    --text-muted: #9296a4;
    --border-color: rgba(0, 0, 0, 0.07);
    --border-glow-cyan: rgba(0, 152, 199, 0.22);
    --border-glow-amber: rgba(232, 149, 10, 0.22);
    --gradient-cyan: linear-gradient(135deg, #0098c7, #007aab);
    --gradient-amber: linear-gradient(135deg, #e8950a, #c97d08);
    --gradient-hero: linear-gradient(160deg, #e8ebf0 0%, #e2e8f5 25%, #f3f2f0 50%, #efeaf3 75%, #eef0f4 100%);
    --shadow-cyan: 0 0 30px rgba(0, 152, 199, 0.12);
    --shadow-amber: 0 0 30px rgba(232, 149, 10, 0.12);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --nav-height: 72px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    font-size: 17px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 15% 10%, rgba(0, 152, 199, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 85% 90%, rgba(147, 130, 200, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 60% 40%, rgba(232, 149, 10, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

#particleCanvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.page-content {
    position: relative;
    z-index: 1;
}

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

button {
    border: none;
    outline: none;
    cursor: pointer;
    font-family: var(--font-body);
}

/* ============================================
   Navbar
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    z-index: 1000;
    background: #0b131e;
    border-bottom: 1px solid rgba(41, 182, 219, 0.24);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.navbar.scrolled {
    background: #08111b;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

.nav-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent-cyan);
    text-shadow: 0 0 20px var(--accent-cyan-glow);
    flex-shrink: 0;
}

.logo-icon {
    font-size: 1.4rem;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { text-shadow: 0 0 10px var(--accent-cyan-glow); }
    50% { text-shadow: 0 0 25px var(--accent-cyan-glow), 0 0 50px rgba(0, 212, 255, 0.2); }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 1 auto;
    justify-content: flex-start;
    margin-left: 0;
}

.nav-product-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 3px 4px 3px 3px;
    border: 1px solid rgba(34, 211, 238, .3);
    border-radius: 7px;
    background: #101e2b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(8, 145, 178, .06);
}

.nav-product-identity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 9px;
    border-right: 1px solid rgba(103, 232, 249, .18);
    border-radius: 5px 2px 2px 5px;
    background: rgba(8, 145, 178, .13);
    color: #67e8f9;
}

.nav-product-identity-icon {
    display: grid;
    grid-template-columns: repeat(2, 4px);
    grid-template-rows: repeat(2, 4px);
    gap: 2px;
    width: 10px;
    height: 10px;
}

.nav-product-identity-icon i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 0 0 6px rgba(103, 232, 249, .36);
}

.nav-product-identity-text {
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
}

.nav-product-options {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.nav-product-swap-icon {
    display: inline-flex;
    flex: 0 0 20px;
    width: 20px;
    height: 28px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    line-height: 9px;
    opacity: .9;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, .32));
    pointer-events: none;
}

.nav-product-swap-icon i {
    display: block;
    height: 9px;
    font-style: normal;
}

.nav-product-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: rgba(255, 255, 255, .62);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nav-product-option:hover { color: #fff; border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .035); }
.nav-product-option.is-active { color: #fff; border-color: rgba(34, 211, 238, .48); background: rgba(8, 145, 178, .28); box-shadow: inset 0 -2px 0 rgba(103, 232, 249, .62); }
.nav-product-option.is-amber.is-active,
.nav-product-option.is-radar.is-active { border-color: rgba(245, 158, 11, .52); background: rgba(180, 109, 13, .3); box-shadow: inset 0 -2px 0 rgba(251, 191, 36, .68); }
.nav-product-mark { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; overflow: hidden; border-radius: 4px; background: #0891b2; color: #fff; font-size: .68rem; font-weight: 900; }
.nav-product-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nav-product-mark.has-image { background: rgba(255, 255, 255, .08); }
.nav-product-option.is-amber .nav-product-mark,
.nav-product-option.is-radar .nav-product-mark { background: #c47a10; }
.nav-product-option.is-slate .nav-product-mark { background: #52687b; }
.nav-product-option.is-green .nav-product-mark { background: #15803d; }

/* 胶囊容器 */
.nav-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px;
    background: #142231;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 滑动指示器 */
.nav-pill-indicator {
    position: absolute;
    top: 4px;
    left: 0;
    height: calc(100% - 8px);
    background: #0098c7;
    border-radius: 999px;
    transition: none;
    z-index: 1;
    pointer-events: none;
}

/* 指示器就绪后才启用滑动动画 */
.nav-pill-indicator.ready {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 导航链接 */
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 22px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.95);
}

.nav-link.active {
    color: #fff;
}

/* 强制清除所有可能的伪元素装饰 */
.nav-link::before,
.nav-link::after,
.nav-link:hover::before,
.nav-link:hover::after,
.nav-link.active::before,
.nav-link.active::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: var(--gradient-cyan);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.nav-cta:hover {
    box-shadow: var(--shadow-cyan);
    transform: translateY(-1px);
}

.nav-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    padding: 4px;
}

.nav-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--transition);
}

.nav-mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(20px);
    padding: 24px;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateY(-20px);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.mobile-link {
    display: block;
    padding: 14px 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--transition);
}

.mobile-link:hover {
    color: #22d3ee;
}

.mobile-cta {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 28px;
    background: var(--gradient-cyan);
    color: #000;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border-bottom: none;
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    position: relative;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--gradient-hero);
}

@supports not (height: 100svh) {
    .hero {
        height: 100vh;
    }
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/cesuo.v2.jpg') center 38% / cover no-repeat;
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15,23,42,0.6) 0%, rgba(15,23,42,0.5) 30%, rgba(15,23,42,0.55) 50%, rgba(15,23,42,0.75) 70%, rgba(15,23,42,0.88) 85%, rgba(15,23,42,0.95) 93%, var(--bg-primary) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-particles canvas {
    width: 100%;
    height: 100%;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    pointer-events: none;
}

.hero-glow.cyan {
    top: 10%;
    left: 20%;
    background: var(--accent-cyan);
}

.hero-glow.amber {
    bottom: 10%;
    right: 20%;
    background: var(--accent-amber);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: calc(var(--nav-height) + 20px) 24px 0;
    max-width: 800px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(0, 152, 199, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 50px;
    font-size: 0.8rem;
    color: #67e8f9;
    font-weight: 500;
    margin-bottom: 24px;
    animation: fadeInUp 0.8s ease;
}

.hero-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 16px;
    animation: fadeInUp 0.8s ease 0.1s both;
    color: #f1f5f9;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hero-title .cyan {
    color: #22d3ee;
    text-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
}

.hero-title .amber {
    color: #fbbf24;
    text-shadow: 0 0 40px rgba(245, 158, 11, 0.4);
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: #cbd5e1;
    margin-bottom: 40px;
    animation: fadeInUp 0.8s ease 0.2s both;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hero-subtitle span {
    color: #22d3ee;
    font-weight: 600;
}

.hero-highlight {
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    font-weight: 700;
    margin-top: 20px;
    animation: fadeInUp 0.8s ease 0.35s both;
    color: #e2e8f0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hero-highlight .hl-bp {
    color: #60a5fa;
}

.hero-highlight .hl-jy {
    color: #fbbf24;
}

.hero-note {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    color: #94a3b8;
    margin-top: 6px;
    opacity: 0.9;
    animation: fadeInUp 0.8s ease 0.4s both;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.hero-subsidy-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 18px 30px 18px 22px;
    background: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: fadeInUp 0.8s ease 0.5s both, subsidyPulse 2.5s ease-in-out infinite;
    box-shadow: 0 2px 12px rgba(245,158,11,0.25), inset 0 1px 0 rgba(255,255,255,0.6);
}
.hero-subsidy-badge:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 24px rgba(245,158,11,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
    border-color: #d97706;
}
@keyframes subsidyPulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(245,158,11,0.25), inset 0 1px 0 rgba(255,255,255,0.6); }
    50% { box-shadow: 0 4px 20px rgba(245,158,11,0.45), inset 0 1px 0 rgba(255,255,255,0.6); }
}
.subsidy-badge-icon {
    font-size: 1.7rem;
    animation: badgeBounce 1.5s ease infinite alternate;
}
@keyframes badgeBounce {
    from { transform: scale(1) rotate(-8deg); }
    to { transform: scale(1.15) rotate(8deg); }
}
.subsidy-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.subsidy-badge-text strong {
    font-size: 1.05rem;
    color: #92400e;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.subsidy-badge-text em {
    font-size: 0.84rem;
    color: #b45309;
    font-style: normal;
    font-weight: 500;
}
.subsidy-badge-arrow {
    font-size: 1.35rem;
    color: #d97706;
    font-weight: 800;
    transition: transform 0.3s;
}
.hero-subsidy-badge:hover .subsidy-badge-arrow {
    transform: translateX(3px);
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 0.3s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
    border: none;
    letter-spacing: 0.3px;
}

.btn-primary {
    background: var(--gradient-cyan);
    color: #000;
}

.btn-primary:hover {
    box-shadow: 0 0 30px var(--accent-cyan-glow);
    transform: translateY(-2px);
}

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

.btn-modal-cancel {
    background: #ffffff;
    color: var(--text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.btn-modal-cancel:hover {
    background: var(--bg-primary);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-secondary:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
}

.btn-buy {
    background: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
    color: #fff;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.btn-buy::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05) 40%, transparent 60%);
    pointer-events: none;
}

.btn-buy::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
    pointer-events: none;
}

.btn-buy:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    box-shadow: 0 4px 24px var(--accent-amber-glow), 0 0 40px rgba(232, 149, 10, 0.15), inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(251, 191, 36, 0.6);
}

.btn-amber {
    background: var(--gradient-amber);
    color: #000;
}

.btn-amber:hover {
    box-shadow: 0 0 30px var(--accent-amber-glow);
    transform: translateY(-2px);
}

.btn-large {
    padding: 16px 40px;
    font-size: 1rem;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================
   Section Styles
   ============================================ */
.section {
    padding: 100px 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.3;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.section-label::before, .section-label::after {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--accent-cyan);
    opacity: 0.5;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 16px;
}

.section-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   Product Showcase (Home) - Split Layout
   ============================================ */
.products-showcase {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.product-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 48px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.product-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.product-row.cyan::before {
    background: var(--gradient-cyan);
}

.product-row.amber::before {
    background: var(--gradient-amber);
}

.product-row:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.product-row.cyan:hover {
    box-shadow: var(--shadow-cyan);
    border-color: var(--border-glow-cyan);
}

.product-row.amber:hover {
    box-shadow: var(--shadow-amber);
    border-color: var(--border-glow-amber);
}

.product-row-info {
    position: relative;
    z-index: 1;
}

/* 产品页轮播展示框：当前选中高亮 / 非当前淡化 */
.product-row.row-active {
    border-width: 2px;
}
.product-row.cyan.row-active {
    border-color: var(--border-glow-cyan);
    box-shadow: var(--shadow-cyan);
}
.product-row.amber.row-active {
    border-color: var(--border-glow-amber);
    box-shadow: var(--shadow-amber);
}
.product-row.row-inactive {
    opacity: 0.78;
    transition: opacity 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.product-row.row-inactive:hover {
    opacity: 1;
}
.row-switch-hint {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 16px;
    border-radius: 6px;
    background: rgba(8, 145, 178, 0.08);
    color: #0891b2;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}
.product-row.amber .row-switch-hint {
    background: rgba(217, 119, 6, 0.08);
    color: #d97706;
}
.product-row-info:hover .row-switch-hint {
    transform: translateX(4px);
}

.product-row-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.product-row.cyan .product-row-badge {
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 212, 255, 0.25);
}

.product-row.amber .product-row-badge {
    background: var(--accent-amber-dim);
    color: var(--accent-amber);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.product-row-price {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 20px;
}

.product-row-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
}

.product-row.cyan .product-row-price {
    color: var(--accent-cyan);
}

.product-row.amber .product-row-price {
    color: var(--accent-amber);
}

.product-row-desc {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 28px;
    max-width: 480px;
}

.product-row-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-row-actions .btn {
    padding: 11px 22px;
    font-size: 0.85rem;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
}

.product-row-actions .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 2;
}

.product-row-actions .btn:hover::before {
    left: 120%;
}

.product-row-actions .btn:active {
    transform: translateY(1px) scale(0.98);
}

.product-row-actions .btn-trial {
    font-size: 0.8rem;
    padding: 9px 18px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.product-row-actions .btn-trial::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.06), transparent 60%);
    pointer-events: none;
}

.product-row-actions .btn-trial:hover {
    color: var(--text-primary);
}

.product-row.cyan .product-row-actions .btn-trial {
    border-color: rgba(0, 212, 255, 0.15);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(0, 212, 255, 0.02));
}

.product-row.cyan .product-row-actions .btn-trial::before {
    background: radial-gradient(ellipse at 30% 0%, rgba(0, 212, 255, 0.1), transparent 60%);
}

.product-row.cyan .product-row-actions .btn-trial:hover {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.12), inset 0 1px 0 rgba(0, 212, 255, 0.1);
}

.product-row.amber .product-row-actions .btn-trial {
    border-color: rgba(245, 158, 11, 0.15);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
}

.product-row.amber .product-row-actions .btn-trial::before {
    background: radial-gradient(ellipse at 30% 0%, rgba(245, 158, 11, 0.1), transparent 60%);
}

.product-row.amber .product-row-actions .btn-trial:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.12), inset 0 1px 0 rgba(245, 158, 11, 0.1);
}

/* Carousel */
.product-row-visual {
    position: relative;
    z-index: 1;
}

.product-carousel {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #0f172a;
    aspect-ratio: 16/10;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    will-change: transform, opacity;
}

.carousel-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* Arrow buttons */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.product-carousel:hover .carousel-arrow {
    opacity: 1;
}

.carousel-arrow:hover {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }

.product-row.cyan .carousel-arrow:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}

.product-row.amber .carousel-arrow:hover {
    border-color: var(--accent-amber);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

/* Progress bar */
.carousel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 3;
}

.carousel-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 0 2px 2px 0;
}

.product-row.cyan .carousel-progress-bar {
    background: linear-gradient(90deg, var(--accent-cyan), rgba(0, 212, 255, 0.5));
}

.product-row.amber .carousel-progress-bar {
    background: linear-gradient(90deg, var(--accent-amber), rgba(245, 158, 11, 0.5));
}

.carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.carousel-dots .dot.active {
    background: #fff;
    transform: scale(1.3);
}

.product-row.cyan .carousel-dots .dot.active {
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan-glow);
}

.product-row.amber .carousel-dots .dot.active {
    background: var(--accent-amber);
    box-shadow: 0 0 8px var(--accent-amber-glow);
}

/* Outline buttons - Glassmorphic */
.btn-outline-cyan {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.03));
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 212, 255, 0.25);
    text-align: center;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}

.btn-outline-cyan::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 25% 0%, rgba(0, 212, 255, 0.15), transparent 55%);
    pointer-events: none;
}

.btn-outline-cyan::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(0, 212, 255, 0.08);
    pointer-events: none;
}

.btn-outline-cyan:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(0, 212, 255, 0.06));
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(0, 212, 255, 0.15);
    transform: translateY(-2px);
}

.btn-outline-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.03));
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    color: var(--accent-amber);
    border: 1px solid rgba(245, 158, 11, 0.25);
    text-align: center;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.btn-outline-amber::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 25% 0%, rgba(245, 158, 11, 0.15), transparent 55%);
    pointer-events: none;
}

.btn-outline-amber::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(245, 158, 11, 0.08);
    pointer-events: none;
}

.btn-outline-amber:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(245, 158, 11, 0.15);
    transform: translateY(-2px);
}

/* ============================================
   Features Section
   ============================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    text-align: center;
    transition: var(--transition);
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}

.feature-card::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--accent-cyan);
    filter: blur(80px);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.feature-card:hover::after {
    opacity: 0.06;
}

.feature-card:hover {
    border-color: rgba(0, 212, 255, 0.2);
    transform: translateY(-2px);
}

.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 20px;
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.feature-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.feature-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================================
   Product Detail Page
   ============================================ */
.product-detail {
    padding-top: calc(var(--nav-height) + 20px);
    min-height: 100vh;
    position: relative;
}

.product-detail-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.product-particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.product-detail-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.product-detail-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}

.product-detail-glow.glow-1 {
    width: 500px;
    height: 500px;
    top: 10%;
    left: 15%;
    background: var(--accent-cyan);
    opacity: 0.06;
    animation: productGlow1 15s ease-in-out infinite alternate;
}

.product-detail-glow.glow-2 {
    width: 400px;
    height: 400px;
    bottom: 15%;
    right: 10%;
    background: var(--accent-amber);
    opacity: 0.04;
    animation: productGlow2 18s ease-in-out infinite alternate;
}

@keyframes productGlow1 {
    0% { transform: translate(0, 0); opacity: 0.06; }
    50% { transform: translate(30px, 20px); opacity: 0.08; }
    100% { transform: translate(-20px, 30px); opacity: 0.05; }
}

@keyframes productGlow2 {
    0% { transform: translate(0, 0); opacity: 0.04; }
    50% { transform: translate(-25px, -15px); opacity: 0.06; }
    100% { transform: translate(15px, -25px); opacity: 0.03; }
}

.product-detail > *:not(.product-detail-bg) {
    position: relative;
    z-index: 1;
}

.product-switcher {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
    padding: 0 24px;
}

.switcher-btn {
    padding: 12px 24px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.switcher-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.switcher-btn.active {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
}

.switcher-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.product-hero {
    position: relative;
    padding: 60px 24px;
    text-align: center;
    overflow: hidden;
}

.product-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 212, 255, 0.06) 0%, transparent 60%);
}

.product-hero.amber .product-hero-bg {
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(245, 158, 11, 0.06) 0%, transparent 60%);
}

.product-hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.product-hero.cyan .product-hero-glow {
    background: var(--accent-cyan);
}

.product-hero.amber .product-hero-glow {
    background: var(--accent-amber);
}

.product-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.product-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 24px;
}

.product-hero.cyan .product-hero-icon {
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.15);
}

.product-hero.amber .product-hero-icon {
    background: var(--accent-amber-dim);
    color: var(--accent-amber);
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.15);
}

.product-hero-name {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 8px;
}

.product-hero.cyan .product-hero-name {
    color: var(--accent-cyan);
    text-shadow: 0 0 30px var(--accent-cyan-glow);
}

.product-hero.amber .product-hero-name {
    color: var(--accent-amber);
    text-shadow: 0 0 30px var(--accent-amber-glow);
}

.product-hero-version {
    display: inline-flex;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.product-hero.cyan .product-hero-version {
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.product-hero.amber .product-hero-version {
    background: var(--accent-amber-dim);
    color: var(--accent-amber);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.product-hero-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Video Section */
.video-section {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 24px;
}

/* Showcase Section */
.showcase-section {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 24px;
}

.showcase-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.showcase-title::before {
    content: '🖼️';
    font-size: 1rem;
}

.showcase-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.showcase-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    cursor: pointer;
}

.showcase-item:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.showcase-item img {
    width: 100%;
    display: block;
    height: auto;
}

.showcase-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

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

.video-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.video-title::before {
    content: '▶';
    color: var(--accent-cyan);
    font-size: 0.8rem;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.bilibili-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
}

.video-cover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    cursor: pointer;
    z-index: 10;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.video-cover-overlay:hover {
    background: rgba(0, 0, 0, 0.35);
}

.video-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    z-index: 1;
}

.video-play-btn {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-cover-overlay:hover .video-play-btn {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.video-play-btn svg {
    width: 28px;
    height: 28px;
    fill: #fff;
    margin-left: 4px;
}

.video-play-hint {
    position: relative;
    z-index: 2;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    font-weight: 500;
}

/* 移动端视频全屏适配 */
@media (max-width: 768px) {
    .video-wrapper {
        padding-bottom: 56.25%; /* 保持16:9 */
        border-radius: var(--radius-md);
    }
    .bilibili-player {
        border-radius: var(--radius-md);
    }
}

.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(135deg, #e8ecf1, #f0f2f5);
}

.video-play-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.15);
    border: 2px solid rgba(0, 212, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
}

.video-play-btn:hover {
    background: rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
    transform: scale(1.05);
}

.video-play-btn svg {
    width: 28px;
    height: 28px;
    fill: var(--accent-cyan);
    margin-left: 4px;
}

.video-placeholder-text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Features List */
.features-list {
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 0 24px;
}

.features-list-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
}

.feature-item:last-child {
    border-bottom: none;
}

.feature-item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cyan .feature-item-icon {
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
}

.amber .feature-item-icon {
    background: var(--accent-amber-dim);
    color: var(--accent-amber);
}

.feature-item-text h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.feature-item-text p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Pricing Section */
.pricing-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

.pricing-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 24px;
    text-align: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.pricing-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.pricing-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.pricing-card.selected.cyan {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
}

.pricing-card.selected.amber {
    border-color: var(--accent-amber);
    background: var(--accent-amber-dim);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
}

.pricing-duration {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.pricing-card.selected .pricing-duration {
    color: var(--text-primary);
}

.pricing-price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.pricing-card.selected.cyan .pricing-price {
    color: var(--accent-cyan);
}

.pricing-card.selected.amber .pricing-price {
    color: var(--accent-amber);
}

.pricing-unit {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pricing-buy-btn {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* ============================================
   Purchase Page
   ============================================ */
.purchase-page {
    padding-top: calc(var(--nav-height) + 16px);
    min-height: 100vh;
    max-width: 720px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 80px;
}

.purchase-hero {
    text-align: center;
    margin-bottom: 20px;
}

.purchase-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 8px;
}

/* 购买页服务承诺横幅 */
.purchase-benefit-banner {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 152, 199, 0.3);
    border-radius: 8px;
    margin-bottom: 20px;
    color: var(--text-primary);
    box-shadow: 0 6px 20px rgba(26, 29, 40, 0.05);
}

/* Purchase product -> version -> duration hierarchy */
.purchase-product-family-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.purchase-family-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid #c9d8e4;
    border-radius: 6px;
    background: #f8fbfd;
    color: #173149;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.purchase-family-card:hover {
    border-color: #82bace;
    transform: translateY(-1px);
}
.purchase-family-card.selected {
    border-color: #159fbe;
    background: #e8f8fc;
    box-shadow: 0 0 0 2px rgba(21, 159, 190, .14);
}
.purchase-family-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: #0b91ae;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}
.purchase-family-icon.is-radar { background: #d18a19; }
.purchase-family-icon.is-accelerator { background: #52687b; }
.purchase-family-card.is-amber .purchase-family-icon { background: #d18a19; }
.purchase-family-card.is-slate .purchase-family-icon { background: #52687b; }
.purchase-family-card.is-green .purchase-family-icon { background: #15803d; }
.purchase-family-copy { min-width: 0; }
.purchase-family-copy strong,
.purchase-family-copy small { display: block; letter-spacing: 0; }
.purchase-family-copy strong { font-size: .94rem; }
.purchase-family-copy small { margin-top: 4px; color: #667d90; font-size: .75rem; line-height: 1.35; }
.purchase-family-status {
    position: absolute;
    right: 10px;
    top: 9px;
    color: #1689a3;
    font-size: .66rem;
    font-weight: 800;
}
.purchase-family-card.is-unavailable .purchase-family-status { color: #9a6a1a; }
.purchase-version-section[hidden] { display: none !important; }
.purchase-version-section .product-select-grid { margin-bottom: 0; }
.purchase-version-empty {
    padding: 20px 16px;
    border: 1px dashed #c8d5df;
    border-radius: 6px;
    color: #728698;
    background: #f8fafc;
    text-align: center;
    font-size: .84rem;
}
.purchase-version-empty[hidden] { display: none !important; }

@media (max-width: 760px) {
    .purchase-product-family-grid { grid-template-columns: 1fr; gap: 9px; }
    .purchase-family-card { min-height: 76px; padding: 12px 14px; }
}

/* Mobile purchase layout: keep cards and form controls stable on narrow screens. */
@media (max-width: 600px) {
    .purchase-checkout-page { width: 100% !important; max-width: 600px !important; }
    .purchase-checkout-page .purchase-workspace { width: 100%; }
    .purchase-workspace { display: block !important; }
    .purchase-side-support { position: static !important; margin-bottom: 18px; }
    .purchase-side-support .benefit-main { display: grid !important; }
    .purchase-page { width: 100%; max-width: 600px; padding: calc(var(--nav-height) + 16px) 12px 48px; box-sizing: border-box; }
    .purchase-benefit-banner .benefit-main { grid-template-columns: 1fr; gap: 14px; padding: 16px 14px 14px; }
    .purchase-benefit-banner .benefit-heading strong { font-size: .95rem; line-height: 1.45; }
    .purchase-benefit-banner .benefit-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-top: 12px; }
    .purchase-benefit-banner .benefit-item { padding: 0 10px; font-size: .78rem; line-height: 1.4; }
    .purchase-benefit-banner .benefit-item:first-child { padding-left: 0; }
    .purchase-benefit-banner .benefit-item:last-child { padding-right: 0; }
    .purchase-benefit-banner .benefit-contact { flex-wrap: wrap; gap: 3px 8px; padding: 8px 10px; text-align: center; }
    .purchase-section { padding: 18px 14px; }
    .product-select-grid { grid-template-columns: 1fr; gap: 10px; }
    .product-select-card { min-width: 0; padding: 14px; }
    .product-select-card .sub { overflow-wrap: anywhere; }
    .duration-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .duration-select-card { min-width: 0; padding: 14px 8px; }
    .form-group.form-row { align-items: stretch; flex-direction: column; gap: 6px; }
    .form-group.form-row .form-label { width: auto; }
    .form-group.form-row .form-input, .form-group.form-row .input-wrapper, .coupon-input-row { width: 100%; max-width: none; }
    .payment-grid { grid-template-columns: 1fr; }
    .payment-card { padding: 14px; }
    .purchase-pay-btn { min-height: 50px; padding: 13px 14px; }
}
@media (max-width: 360px) {
    .purchase-benefit-banner .benefit-services { grid-template-columns: 1fr; gap: 10px; }
    .purchase-benefit-banner .benefit-item, .purchase-benefit-banner .benefit-item:first-child, .purchase-benefit-banner .benefit-item:last-child { padding: 0; }
    .purchase-benefit-banner .benefit-item + .benefit-item { border-top: 1px solid var(--border-color); border-left: 0; padding-top: 10px; }
}

/* Product line switcher shared by home, detail, tutorial and checkout. */
.product-line-shell {
    display: block;
    min-height: 100vh;
    padding-top: var(--nav-height);
}
.product-line-content {
    min-width: 0;
    width: 100%;
}
.product-line-nav {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    align-self: start;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 168px;
    margin: 24px auto 0;
    padding: 14px 10px;
    border-right: 1px solid rgba(0, 152, 199, .18);
}
.product-line-nav-label {
    padding: 0 10px 8px;
    color: #7b8791;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.product-line-nav-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 56px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #596873;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.product-line-nav-item:hover { color: #173243; border-color: rgba(0, 152, 199, .24); background: rgba(0, 152, 199, .05); }
.product-line-nav-item.is-active { color: #173243; border-color: rgba(0, 152, 199, .35); background: #edf9fc; }
.product-line-nav-item b { display: block; font-size: 13px; line-height: 1.3; }
.product-line-nav-item small { display: block; margin-top: 2px; color: #84919a; font-size: 10px; line-height: 1.3; white-space: nowrap; }
.product-line-nav-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 800; }
.product-line-nav-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-line-nav-mark.is-cyan { background: #0898b5; }
.product-line-nav-mark.is-amber { background: #d7830b; }
.product-line-content > .page-enter { min-height: 0; }
.product-line-content > .page-enter > .gpd-page { min-height: 0; }
.product-line-content > .gpd-page { min-height: 0; }
.product-line-content > .gpd-page .gpd-hero-inner { padding-top: 44px; }
.product-line-content > .gpd-page[data-theme="unified"] .gpd-hero-inner { grid-template-columns: minmax(0, 920px); max-width: 1000px; }
.product-line-content > .purchase-page { padding-top: 24px; }
.product-line-content > .page-enter > .gpd-page .gpd-hero-inner { padding-top: 44px; }
.radar-coming-page { width: min(920px, calc(100% - 48px)); min-height: 430px; margin: 0 auto; padding: 92px 10px 60px; color: #172535; }
.radar-coming-kicker { display: flex; align-items: center; gap: 9px; color: #b26c07; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.radar-coming-kicker span { width: 28px; height: 2px; background: #d7830b; }
.radar-coming-body { display: flex; align-items: center; gap: 24px; margin-top: 56px; }
.radar-coming-mark { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid rgba(215, 131, 11, .4); border-radius: 12px; background: #fff6e7; color: #b26c07; font-size: 30px; font-weight: 800; }
.radar-coming-mark img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.radar-coming-body h1 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
.radar-coming-body p { margin: 0; color: #687783; font-size: 15px; }
.radar-coming-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; padding: 9px 12px; border: 1px solid rgba(215, 131, 11, .28); border-radius: 6px; color: #a66a12; font-size: 12px; font-weight: 700; }
.radar-coming-status .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #d7830b; box-shadow: 0 0 0 4px rgba(215, 131, 11, .12); }
.home-v2-status-panel { justify-content: center; min-height: 390px; padding: 28px; background: rgba(9, 18, 31, .78); border: 1px solid rgba(70, 181, 205, .25); border-radius: 12px; color: #f4fbff; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.home-v2-status-head { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.home-v2-status-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; background: #0898b5; color: #fff; font-size: 19px; font-weight: 800; }
.home-v2-status-head b { display: block; font-size: 17px; }.home-v2-status-head small { display: block; margin-top: 2px; color: rgba(255,255,255,.48); font-size: 10px; letter-spacing: 1px; }.home-v2-status-head em { margin-left: auto; color: #79e2bd; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.home-v2-status-list { display: grid; gap: 0; margin-top: 8px; }.home-v2-status-list > div { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; grid-template-rows: auto auto; column-gap: 9px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); }.home-v2-status-list > div > span { grid-row: 1 / span 2; color: #42c9e1; font-size: 11px; font-weight: 800; }.home-v2-status-list b { font-size: 13px; }.home-v2-status-list small { margin-top: 3px; color: rgba(255,255,255,.52); font-size: 10px; line-height: 1.45; }.home-v2-status-list i { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: #79e2bd; font-size: 9px; font-style: normal; font-weight: 800; }.home-v2-status-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: rgba(255,255,255,.62); font-size: 11px; }.home-v2-status-foot .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #79e2bd; box-shadow: 0 0 0 4px rgba(121,226,189,.1); }
@media (max-width: 520px) { .home-v2-status-panel { min-height: 0; padding: 20px 16px; }.home-v2-status-list > div { grid-template-columns: 26px minmax(0,1fr) auto; }.home-v2-status-list small { font-size: 9px; } }
@media (max-width: 900px) {
    .product-line-shell { display: block; padding-top: var(--nav-height); }
    .product-line-nav { position: sticky; top: var(--nav-height); display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 8px 12px; border-right: 0; border-bottom: 1px solid rgba(0, 152, 199, .16); background: rgba(243, 242, 240, .96); backdrop-filter: blur(12px); }
    .product-line-nav-label { padding: 0 4px; font-size: 9px; }
    .product-line-nav-item { min-height: 42px; grid-template-columns: 25px minmax(0, 1fr); gap: 7px; padding: 6px 8px; }
    .product-line-nav-item b { font-size: 12px; }
    .product-line-nav-item small { font-size: 9px; }
    .product-line-nav-mark { width: 25px; height: 25px; font-size: 11px; border-radius: 5px; }
    .product-line-content > .gpd-page .gpd-hero-inner,
    .product-line-content > .page-enter > .gpd-page .gpd-hero-inner { padding-top: 28px; }
    .product-line-content > .purchase-page { padding-top: 16px; }
    .radar-coming-page { width: min(100% - 32px, 640px); padding-top: 60px; }
}

/* Radar tutorial v3: tutorial-first layout with a compact trial toolbar. */
.radar-guide {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0 72px;
    color: #172433;
}
.radar-guide-section.radar-guide-setup {
    padding: 0;
    background: transparent;
}
.radar-guide-setup-layout,
.radar-guide-setup-body {
    display: block;
}
.radar-guide-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
    align-items: end;
    gap: 28px;
    margin-bottom: 16px;
    padding: 26px 30px;
    border: 1px solid #25394a;
    border-radius: 12px;
    background: linear-gradient(120deg, #102333 0%, #173b4a 60%, #1b5660 100%);
    box-shadow: 0 16px 36px rgba(16, 41, 55, .14);
}
.radar-guide-section-head::after { display: none; }
.radar-guide-section-head span { color: #8fe4dc; font-size: .65rem; letter-spacing: .14em; }
.radar-guide-section-head h2 { margin-top: 7px; color: #fff; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.02em; }
.radar-guide-section-head > p { max-width: none; margin: 0; color: #b9d2d7; font-size: .8rem; line-height: 1.65; }
.radar-trial-card {
    display: grid;
    grid-template-columns: minmax(190px, 1.2fr) minmax(280px, 1.8fr) auto;
    align-items: center;
    gap: 18px;
    margin: 0 0 24px;
    padding: 13px 16px;
    border: 1px solid #b9d9d5;
    border-left: 4px solid #1a958d;
    border-radius: 9px;
    background: #f7fffd;
    box-shadow: 0 8px 20px rgba(28, 99, 101, .08);
}
.radar-trial-card-top { display: block; }
.radar-trial-kicker { display: block; margin-bottom: 3px; color: #218b87; font-size: .58rem; letter-spacing: .12em; }
.radar-trial-card h3 { margin: 0; color: #143e43; font-size: 1rem; }
.radar-trial-card-top p { margin: 3px 0 0; color: #60797c; font-size: .68rem; line-height: 1.45; }
.radar-trial-status { justify-self: start; padding: 4px 8px; font-size: .6rem; }
.radar-trial-rule-grid { display: flex; gap: 6px; margin: 0; }
.radar-trial-rule-grid span { flex: 1; padding: 7px 8px; border-color: #d3e7e3; background: #fff; }
.radar-trial-rule-grid b { font-size: .58rem; }
.radar-trial-rule-grid strong { font-size: .78rem; }
.radar-trial-action-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 132px; }
#radarTrialReceiveBtn { min-height: 36px; padding: 7px 10px; font-size: .72rem; }
.radar-trial-action-row > span { font-size: .6rem; text-align: center; white-space: nowrap; }
.radar-trial-result { grid-column: 1 / -1; margin-top: 0; padding: 8px 10px; }
.radar-trial-message { grid-column: 1 / -1; margin: 0; font-size: .66rem; }
.radar-guide-setup-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
    gap: 24px;
    align-items: start;
}
.radar-guide-steps-panel { padding: 18px 22px; border: 1px solid #d8e1e5; border-radius: 10px; background: #fff; box-shadow: 0 10px 26px rgba(30, 53, 68, .06); }
.radar-guide-steps-panel::before { top: 84px; bottom: 24px; left: 39px; background: linear-gradient(#4daeb1, #d7e4e6 85%, transparent); }
.radar-guide-tutorial-marker { margin: 0 -2px 8px; padding: 0 0 14px 54px; border: 0; border-bottom: 1px solid #e1e8ea; background: transparent; }
.radar-guide-tutorial-marker span { color: #168aa6; font-size: .6rem; }
.radar-guide-tutorial-marker h2 { margin: 4px 0 2px; color: #182b3b; font-size: 1.35rem; }
.radar-guide-tutorial-marker p { color: #71828b; font-size: .7rem; }
.radar-guide-steps li { min-height: 78px; padding: 15px 0; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; border-top-color: #e1e8ea; }
.radar-guide-steps li > b { width: 30px; height: 30px; font-size: .68rem; box-shadow: 0 0 0 5px #fff; }
.radar-guide-steps h3 { margin: 0 0 3px; font-size: .92rem; }
.radar-guide-steps p { font-size: .74rem; line-height: 1.55; }
.radar-guide-steps li.has-download-action { grid-template-columns: 42px minmax(0, 1fr) 150px; }
.radar-guide-steps .radar-guide-download-action { width: 150px; min-height: 44px; border-radius: 6px; }
.radar-guide-shot-slot { position: sticky; top: calc(var(--nav-height, 72px) + 18px); }
.radar-guide-visual-card { border-radius: 10px; box-shadow: 0 12px 28px rgba(30, 53, 68, .08); }
.radar-guide-visual-card > .radar-stable-uptime--guide { min-height: 132px; padding: 18px; }
.radar-guide-side-info { padding: 10px; gap: 8px; }
.radar-guide-side-block { padding: 12px 13px; }
.radar-guide-side-block > strong { margin-bottom: 6px; font-size: .8rem; }
.radar-guide-side-block p, .radar-guide-side-block li { font-size: .68rem; line-height: 1.55; }
@media (max-width: 900px) {
    .radar-guide-section-head { grid-template-columns: 1fr; gap: 10px; }
    .radar-guide-setup-body { grid-template-columns: 1fr; }
    .radar-guide-shot-slot { position: static; }
}
@media (max-width: 640px) {
    .radar-guide { width: min(100% - 24px, 560px); padding-top: 14px; }
    .radar-guide-section-head { padding: 20px 18px; }
    .radar-trial-card { grid-template-columns: 1fr; gap: 10px; padding: 13px; }
    .radar-trial-status { justify-self: start; }
    .radar-trial-rule-grid { width: 100%; }
    .radar-trial-action-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .radar-trial-action-row > span { text-align: left; }
    #radarTrialReceiveBtn { width: 100%; }
    .radar-guide-steps-panel { padding: 14px 12px; }
    .radar-guide-steps-panel::before { left: 30px; }
    .radar-guide-tutorial-marker { padding-left: 42px; }
    .radar-guide-steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
    .radar-guide-steps li.has-download-action { grid-template-columns: 34px minmax(0, 1fr); }
    .radar-guide-steps .radar-guide-download-action { grid-column: 2; width: 100%; margin-top: 7px; }
}

/* Radar tutorial v18: use the side column for all auxiliary notices. */
.radar-guide-side-info { flex: 1 1 auto; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); align-content: stretch; gap: 12px; padding: 14px; border-top: 1px solid #d2dedf; background: #edf4f4; }
.radar-guide-side-block { min-height: 0; margin: 0; padding: 15px 16px; border-radius: 7px; }
.radar-guide-side-block > strong { display: block; margin-bottom: 8px; color: #1a4f58; font-size: .78rem; letter-spacing: .04em; }
.radar-guide-side-block ol { margin: 0; padding-left: 19px; }
.radar-guide-side-block li { padding: 0; border: 0; display: list-item; color: #52656b; font-size: .76rem; line-height: 1.65; }
.radar-guide-side-block p { color: #52656b; font-size: .78rem; line-height: 1.6; }
.radar-guide-side-block.radar-guide-warm-tips { border: 1px solid #ead6a8; border-left: 3px solid #c58318; background: #fffaf0; }
.radar-guide-side-block.radar-guide-compatibility { display: block; border: 1px solid #e5c6bf; border-left: 3px solid #bf594d; background: #fff7f4; box-shadow: none; }
.radar-guide-side-block.radar-guide-compatibility > strong { color: #a0443b; }
.radar-guide-side-block .radar-guide-support-group { width: 100%; min-height: 42px; margin-top: 12px; padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #8ab483; border-radius: 5px; background: #217a87; color: #fff; font-size: .75rem; font-weight: 800; }
.radar-guide-side-block .radar-guide-support-group b { color: #f6d17e; font-size: .66rem; }
.radar-guide-side-block .radar-guide-support-group i { font-style: normal; }
@media (max-width: 900px) { .radar-guide-side-info { padding: 12px; } }

/* Radar tutorial v22: command-center redesign. */
.radar-guide-setup { padding-top: 28px; background: #e8eef0; }
.radar-guide-setup-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); column-gap: 36px; }
.radar-guide-setup-copy { grid-column: 1 / -1; }
.radar-guide-section-head { position: relative; margin-bottom: 24px; padding: 28px 32px 30px; overflow: hidden; border: 1px solid #263b44; border-radius: 12px; background: #111c23; box-shadow: 0 16px 34px rgba(14, 31, 38, .14); }
.radar-guide-section-head::after { position: absolute; right: -30px; bottom: -58px; width: 170px; height: 170px; border: 1px solid rgba(74, 189, 191, .3); border-radius: 50%; content: ""; box-shadow: 0 0 0 18px rgba(74, 189, 191, .05), 0 0 0 36px rgba(74, 189, 191, .035); }
.radar-guide-section-head > div { position: relative; z-index: 1; }
.radar-guide-section-head span { color: #62d4d0; font-size: .68rem; letter-spacing: .12em; }
.radar-guide-section-head h2 { margin-top: 10px; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.03em; }
.radar-guide-section-head > p { position: relative; z-index: 1; max-width: 460px; margin-top: 12px; color: #a8bdc3; font-size: .9rem; line-height: 1.7; text-align: left; }
.radar-guide-setup-body { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); column-gap: 36px; align-items: start; }
.radar-guide-steps-panel { position: relative; padding: 4px 22px 4px 0; }
.radar-guide-steps-panel::before { position: absolute; top: 22px; bottom: 22px; left: 17px; width: 1px; background: linear-gradient(#5ab8bc, #cad7d9 85%, transparent); content: ""; }
.radar-guide-steps li { position: relative; min-height: 96px; padding: 20px 18px 20px 0; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; border: 0; border-top: 1px solid #c8d4d7; }
.radar-guide-steps li:last-child { border-bottom: 1px solid #c8d4d7; }
.radar-guide-steps li > b { position: relative; z-index: 1; width: 34px; height: 34px; border: 2px solid #55aeb2; background: #e8eef0; color: #23767c; box-shadow: 0 0 0 5px #e8eef0; }
.radar-guide-steps li:first-child > b { border-color: #d89a2e; background: #fff5dc; color: #a76a09; }
.radar-guide-steps h3 { margin: 1px 0 6px; color: #16242b; font-size: 1.06rem; }
.radar-guide-steps p { color: #5b6d74; font-size: .84rem; line-height: 1.7; }
.radar-guide-steps li.has-download-action { grid-template-columns: 52px minmax(0, 1fr) 176px; }
.radar-guide-steps .radar-guide-download-action { width: 176px; min-height: 54px; align-self: center; border-radius: 8px; background: #123f49; box-shadow: 0 10px 20px rgba(18, 63, 73, .18); }
.radar-guide-shot-slot { position: sticky; top: calc(var(--nav-height, 72px) + 18px); align-self: start; }
.radar-guide-visual-card { height: auto !important; min-height: 0; overflow: hidden; border: 1px solid #b8c9cd; border-radius: 12px; background: #f7fbfb; box-shadow: 0 20px 42px rgba(18, 43, 52, .14); }
.radar-guide-visual-card > .radar-stable-uptime--guide { min-height: 168px; padding: 24px 24px 22px; border: 0; border-left: 4px solid #36a89c; border-radius: 0; background: linear-gradient(145deg, #f7fffc 0%, #dff1ed 100%); box-shadow: none; }
.radar-guide-visual-card > .radar-stable-uptime--guide .radar-stable-uptime-copy strong { color: #153f3b; font-size: 1rem; }
.radar-guide-visual-card > .radar-stable-uptime--guide .radar-stable-uptime-value { justify-content: flex-start; gap: 8px; }
.radar-guide-visual-card > .radar-stable-uptime--guide .radar-stable-uptime-value b { color: #148b7d; font-size: 1.62rem; }
.radar-guide-side-info { display: grid; grid-template-rows: auto; gap: 10px; padding: 12px; border-top: 1px solid #d0dddd; background: #eaf2f2; }
.radar-guide-side-block { min-height: 0; margin: 0; padding: 16px 17px; border-radius: 8px; }
.radar-guide-side-label { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #6c858a; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.radar-guide-side-label i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #37a59a; box-shadow: 0 0 0 4px rgba(55, 165, 154, .13); }
.radar-guide-side-block > strong { margin-bottom: 9px; color: #173d43; font-size: .92rem; }
.radar-guide-preflight { border: 1px solid #c9dcdd; background: #f7fbfb; }
.radar-guide-preflight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.radar-guide-preflight-grid span,
.radar-guide-preflight-grid strong { padding: 9px 6px; border: 1px solid #d7e4e5; background: #fff; color: #53686e; font-size: .68rem; font-weight: 800; text-align: center; }
.radar-guide-side-block.radar-guide-warm-tips { border: 1px solid #ead5a5; border-left: 3px solid #cc8b1d; background: #fffaf0; box-shadow: none; }
.radar-guide-side-block.radar-guide-warm-tips > strong { color: #986511; }
.radar-guide-side-block.radar-guide-compatibility { display: block; border: 1px solid #e4c5c0; border-left: 3px solid #bf594d; background: #fff7f5; box-shadow: none; }
.radar-guide-side-block.radar-guide-compatibility > strong { color: #9f4038; }
.radar-guide-side-block ol { margin: 0; padding-left: 18px; }
.radar-guide-side-block li { padding: 0; border: 0; display: list-item; color: #5d6c70; font-size: .74rem; line-height: 1.62; }
.radar-guide-side-block p { color: #5d6c70; font-size: .76rem; line-height: 1.62; }
.radar-guide-side-block .radar-guide-support-group { width: 100%; min-height: 38px; margin-top: 10px; padding: 4px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 5px; background: #237f89; font-size: .72rem; }
.radar-guide-compatibility { display: none; }
@media (max-width: 900px) { .radar-guide-setup-layout, .radar-guide-setup-body { grid-template-columns: 1fr; row-gap: 24px; } .radar-guide-section-head { padding: 24px 22px; } .radar-guide-steps-panel { padding-right: 0; } .radar-guide-shot-slot { position: static; } .radar-guide-visual-card { height: auto !important; } .radar-guide-side-info { grid-template-rows: auto; } }
@media (max-width: 600px) { .radar-guide-steps li.has-download-action { grid-template-columns: 42px minmax(0, 1fr); } .radar-guide-steps .radar-guide-download-action { grid-column: 2; width: 100%; margin-top: 8px; } .radar-guide-preflight-grid { grid-template-columns: 1fr; } }

.radar-trial-card { margin-bottom: 24px; padding: 22px; border: 1px solid #9bc9c7; border-left: 4px solid #159c92; border-radius: 10px; background: linear-gradient(135deg, #f4fffd 0%, #e2f3f1 100%); box-shadow: 0 14px 30px rgba(24, 91, 93, .12); }
.radar-trial-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.radar-trial-kicker { color: #157c7b; font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.radar-trial-card h3 { margin: 7px 0 5px; color: #123d43; font-size: 1.3rem; }
.radar-trial-card-top p { margin: 0; color: #557276; font-size: .78rem; line-height: 1.55; }
.radar-trial-status { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #9fc7c4; border-radius: 999px; background: #fff; color: #4b7072; font-size: .68rem; font-weight: 900; white-space: nowrap; }
.radar-trial-status.is-ready { border-color: #8bd0b8; background: #effcf6; color: #147653; }
.radar-trial-status.is-success { border-color: #7ccdb1; background: #e7fbf3; color: #137653; }
.radar-trial-status.is-cooldown, .radar-trial-status.is-error { border-color: #e1b979; background: #fff9ec; color: #9a6512; }
.radar-trial-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 14px; }
.radar-trial-rule-grid span { padding: 10px; border: 1px solid #c9e1df; border-radius: 6px; background: rgba(255,255,255,.72); }
.radar-trial-rule-grid b, .radar-trial-rule-grid strong { display: block; }
.radar-trial-rule-grid b { color: #6a8587; font-size: .66rem; font-weight: 700; }
.radar-trial-rule-grid strong { margin-top: 4px; color: #1d5e63; font-size: .9rem; }
.radar-trial-action-row { display: flex; align-items: center; gap: 12px; }
#radarTrialReceiveBtn { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 43px; padding: 9px 13px 9px 16px; border: 0; border-radius: 6px; background: #176e73; color: #fff; font-size: .82rem; font-weight: 850; cursor: pointer; box-shadow: 0 8px 16px rgba(23,110,115,.2); }
#radarTrialReceiveBtn:hover:not(:disabled) { background: #0f555a; transform: translateY(-1px); }
#radarTrialReceiveBtn:disabled { cursor: not-allowed; opacity: .62; }
#radarTrialReceiveBtn b { color: #baf1e7; font-size: 1.1rem; }
.radar-trial-action-row > span { color: #557276; font-size: .72rem; font-weight: 700; }
.radar-trial-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; align-items: center; margin-top: 14px; padding: 12px; border: 1px solid #c6dedc; border-radius: 7px; background: rgba(255,255,255,.72); }
.radar-trial-result > div > span, .radar-trial-expiry > span { display: block; color: #71898a; font-size: .65rem; }
.radar-trial-result > div > strong { display: block; margin-top: 4px; color: #163e43; font: 800 .84rem/1.4 Consolas, monospace; word-break: break-all; }
.radar-trial-expiry { grid-column: 1 / -1; padding-top: 8px; border-top: 1px dashed #c8dcda; }
.radar-trial-expiry strong { display: block; margin-top: 3px; color: #28746e; font-size: .74rem; }
#radarTrialCopy { padding: 6px 9px; border: 1px solid #a4cfcc; border-radius: 5px; background: #f7fffe; color: #176e73; font-size: .7rem; font-weight: 800; cursor: pointer; }
.radar-trial-message { min-height: 18px; margin: 10px 0 0; color: #527174; font-size: .74rem; line-height: 1.55; }
.radar-trial-message.is-success { color: #157653; }
.radar-trial-message.is-error { color: #9a6512; }
@media (max-width: 600px) { .radar-trial-card { padding: 16px; } .radar-trial-card-top { flex-direction: column; gap: 10px; } .radar-trial-status { align-self: flex-start; } .radar-trial-rule-grid { grid-template-columns: 1fr; } .radar-trial-action-row { align-items: stretch; flex-direction: column; } #radarTrialReceiveBtn { width: 100%; } .radar-trial-action-row > span { text-align: center; } }
@media (max-width: 520px) {
    .product-line-nav { grid-template-columns: 1fr 1fr; }
    .product-line-nav-label { display: none; }
    .product-line-nav-item { width: 100%; }
    .radar-coming-body { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 40px; }
    .radar-coming-body p { font-size: 14px; }
}

/* Radar trial access stays compact so the tutorial remains the primary content. */
.radar-trial-card { margin-bottom: 14px; padding: 14px 16px; box-shadow: 0 8px 18px rgba(24, 91, 93, .09); }
.radar-trial-card h3 { margin: 4px 0 3px; font-size: 1.05rem; }
.radar-trial-card-top p { font-size: .73rem; }
.radar-trial-rule-grid { gap: 6px; margin: 11px 0 9px; }
.radar-trial-rule-grid span { padding: 7px 8px; }
.radar-trial-rule-grid strong { margin-top: 2px; font-size: .82rem; }
.radar-trial-action-row { gap: 8px; }
#radarTrialReceiveBtn { min-height: 37px; padding: 7px 11px 7px 13px; font-size: .76rem; }
.radar-trial-result { gap: 6px 9px; margin-top: 8px; padding: 8px 10px; }
.radar-trial-message { min-height: 0; margin-top: 6px; font-size: .7rem; }
.radar-guide-tutorial-marker { margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid #27b7d8; background: #f4fbfd; }
.radar-guide-tutorial-marker span { color: #168aa6; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.radar-guide-tutorial-marker h2 { margin: 5px 0 3px; color: #1c2b3d; font-size: 22px; }
.radar-guide-tutorial-marker p { margin: 0; color: #78879a; font-size: .78rem; line-height: 1.55; }

/* Keep the checkout form centered; the support card occupies the left gutter. */
@media (min-width: 901px) {
    .purchase-checkout-page { width: 100% !important; max-width: none !important; padding-left: 24px; padding-right: 24px; }
    .purchase-checkout-page .purchase-workspace { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); gap: 18px; align-items: start; }
    .purchase-checkout-page .purchase-side-support { grid-column: 1; grid-row: 1; justify-self: end; width: 100%; max-width: 300px; }
    .purchase-checkout-page .purchase-form-container { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; }
}

/* Rebuild the support list as an explicit vertical information panel. */
.purchase-checkout-page .purchase-side-support .benefit-main { display: block !important; padding: 20px 18px !important; }
.purchase-checkout-page .purchase-side-support .benefit-services { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin: 18px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid rgba(0, 152, 199, .16) !important; border-left: 0 !important; visibility: visible !important; opacity: 1 !important; }
.purchase-checkout-page .purchase-side-support .benefit-item,
.purchase-checkout-page .purchase-side-support .benefit-item:first-child,
.purchase-checkout-page .purchase-side-support .benefit-item:last-child { display: grid !important; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 8px; min-height: 48px; padding: 0 0 12px !important; color: #2c303b !important; font-size: .84rem !important; line-height: 1.45 !important; border: 0 !important; }
.purchase-checkout-page .purchase-side-support .benefit-item + .benefit-item { padding-top: 12px !important; border-top: 1px solid rgba(0, 152, 199, .12) !important; }
.purchase-checkout-page .purchase-side-support .benefit-item span { display: block !important; color: var(--accent-cyan) !important; font-size: .72rem !important; font-weight: 800 !important; line-height: 1.4 !important; }
.purchase-checkout-page .purchase-side-support .benefit-more { display: block !important; padding-top: 4px; color: rgba(0, 152, 199, .48); font-size: 16px; letter-spacing: 4px; line-height: 1; text-align: center; }

/* Purchase support sidebar stays beside the form on desktop. */
.purchase-workspace { display: grid; grid-template-columns: minmax(280px, 300px) minmax(0, 720px); align-items: start; gap: 18px; }
.purchase-checkout-page { width: min(1040px, calc(100% - 40px)); max-width: 1040px !important; margin-left: auto; margin-right: auto; }
.purchase-checkout-page .purchase-workspace { width: min(1038px, 100%); margin-left: auto; margin-right: auto; }
.purchase-side-support { position: sticky; top: calc(var(--nav-height) + 18px); margin: 0; z-index: 2; }
.purchase-side-support .benefit-main { display: block; padding: 18px 16px; }
.purchase-side-support .benefit-heading { gap: 7px; }
.purchase-side-support .benefit-heading strong { font-size: .92rem; line-height: 1.5; }
.purchase-side-support .benefit-heading strong { overflow-wrap: anywhere; }
.purchase-side-support .benefit-services { grid-template-columns: 1fr !important; margin-top: 14px; padding-top: 14px; }
.purchase-side-support .benefit-contact { padding: 10px 12px; }

/* Narrow screens use a single-column purchase flow. */
@media (max-width: 900px) {
    .purchase-workspace { display: grid; grid-template-columns: minmax(280px, 300px) minmax(0, 1fr); align-items: start; gap: 18px; }
    .purchase-side-support { position: sticky; top: calc(var(--nav-height) + 18px); margin: 0; z-index: 2; }
    .purchase-side-support .benefit-main { display: block; padding: 18px 16px; }
    .purchase-side-support .benefit-heading { gap: 7px; }
    .purchase-side-support .benefit-heading strong { font-size: .92rem; line-height: 1.5; }
    .purchase-side-support .benefit-services { margin-top: 14px; padding-top: 14px; }
    .purchase-side-support .benefit-contact { padding: 10px 12px; }
    .purchase-page { width: calc(100vw - 24px) !important; max-width: 680px; padding-left: 12px; padding-right: 12px; overflow-x: hidden; }
    .purchase-benefit-banner .benefit-main { grid-template-columns: 1fr; min-width: 0; }
    .purchase-benefit-banner .benefit-services { grid-template-columns: 1fr !important; border-top: 1px solid var(--border-color); border-left: 0; padding-top: 12px; gap: 10px; }
    .purchase-benefit-banner .benefit-item, .purchase-benefit-banner .benefit-item:first-child, .purchase-benefit-banner .benefit-item:last-child { padding: 0; min-width: 0; }
    .purchase-benefit-banner .benefit-item + .benefit-item { border-top: 1px solid var(--border-color); border-left: 0; padding-top: 10px; }
    .purchase-benefit-banner .benefit-contact { min-width: 0; overflow-wrap: anywhere; }
    .purchase-section { width: 100%; max-width: 100%; overflow: hidden; }
    .product-select-grid, .duration-select-grid, .payment-grid { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; }
    .product-select-card, .duration-select-card, .payment-card { width: 100%; min-width: 0; box-sizing: border-box; }
    .product-select-card { display: flex; flex-direction: row; align-items: center; }
    .product-select-card .product-card-info { min-width: 0; }
    .product-select-card .sub { overflow-wrap: anywhere; white-space: normal; }
    .duration-select-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
    .duration-select-card .dur-price { margin-top: 0; }
}

/* Mobile purchase pages omit the desktop-only after-sales sidebar. */
@media (max-width: 900px) {
    .purchase-checkout-page .purchase-side-support { display: none !important; }
}

/* Purchase option hierarchy: versions use text only; package price stays below duration. */
.purchase-version-section .product-select-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.purchase-version-section .product-select-card {
    display: block;
    min-height: 82px;
    padding: 17px 42px 17px 18px;
}
.purchase-version-section .product-card-info,
.purchase-version-section .product-card-info .name,
.purchase-version-section .product-card-info .sub {
    display: block;
    width: 100%;
}
@media (max-width: 600px) {
    .purchase-version-section .product-select-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Embedded trial delivery follow-up panels */
.trial-site-page .trial-access-flow span.is-done,
.trial-site-page .trial-access-flow span.is-done b { color: #67d9ad; }
.trial-site-page .trial-access-result.is-success { border-color: rgba(103, 217, 173, .58); }
.trial-site-page .trial-access-result.is-error { text-align: left; }
.trial-site-page .trial-access-result.is-error .trial-access-result-title { color: #ffc0a5; }
.trial-access-followup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 0 32px; }
.trial-access-followup-panel { padding: 23px; border: 1px solid rgba(148, 182, 204, .16); background: rgba(14, 28, 36, .72); }
.trial-access-followup-panel > span { color: #36cae7; font-size: 10px; font-weight: 850; letter-spacing: 1.8px; }
.trial-access-followup-panel h2 { margin: 8px 0 18px; color: #eaf6fb; font-size: 21px; }
.trial-access-followup-panel p { margin: 0; color: #8fa6b2; font-size: 12px; line-height: 1.75; }
.trial-access-followup-list { display: grid; gap: 13px; }
.trial-access-followup-list > div { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.trial-access-followup-list b { color: #48cde8; font: 11px/22px Consolas, monospace; }
.trial-access-followup-list strong { display: block; color: #d9edf5; font-size: 12px; }
.trial-access-followup-list small { display: block; margin-top: 2px; color: #78909b; font-size: 11px; line-height: 1.5; }
.trial-access-followup-action { display: inline-flex; align-items: center; gap: 12px; margin-top: 19px; padding: 9px 13px; border: 1px solid rgba(54, 202, 231, .45); color: #aeeaf2; background: rgba(54, 202, 231, .06); font-size: 12px; font-weight: 800; text-decoration: none; }
.trial-access-followup-action:hover { border-color: #48cde8; color: #f2fbff; }
.trial-access-followup-action span { color: #48cde8; font-size: 16px; }
.trial-access-purchase-points { display: grid; gap: 8px; margin-top: 17px; color: #b8d6dc; font-size: 11px; }
@media (max-width: 820px) { .trial-access-followup { grid-template-columns: 1fr; } }

/* 经验版原软件界面 */
.np-hero.bp-product-hero .jy-old-host {
    width: min(100%, 374px);
    max-height: 505px;
    aspect-ratio: 374 / 505;
    justify-self: end;
    margin-right: 40px;
}
.jy-old-host .bp-old-titlebar > strong {
    font-size: 15px;
}
.jy-old-quickbar {
    grid-template-columns: 118px minmax(0, 1fr) 38px;
}
.jy-old-quickbar > input {
    width: 100%;
    min-width: 0;
    height: 30px;
    border: 2px solid #777;
    background: #fff;
}
.jy-old-quickbar > strong {
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}
.jy-old-host .bp-old-info-row {
    grid-template-columns: minmax(0, 1fr) 62px;
}
.jy-old-host .jy-old-info-message {
    font-size: 12px;
}
.jy-old-host .jy-old-service-log {
    justify-content: center;
    gap: 2px;
    padding-left: 10px;
}
.jy-old-host .jy-old-service-log em {
    color: #d62f2f;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}
.jy-old-host .jy-old-service-log > span,
.jy-old-host .jy-old-service-log > strong {
    line-height: 15px;
}
.jy-old-host .bp-old-update-status {
    margin-left: auto;
}
.jy-old-basic-left label {
    grid-template-columns: 72px minmax(0, 1fr);
}
.jy-old-checks {
    gap: 0;
    padding: 2px;
    background: #fff;
}
.jy-old-checks label {
    min-height: 22px;
    gap: 2px;
}
.jy-old-checks .jy-old-password {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}
.jy-old-checks .jy-old-password input {
    width: 100%;
    height: 22px;
    min-width: 0;
    padding: 0 3px;
    border: 1px solid #555;
    background: #fff;
}
.jy-old-checks .jy-old-inline-value {
    width: 30px;
    height: 20px;
    flex: 0 0 30px;
    padding: 0 2px;
    border: 1px solid #777;
    background: #fff;
}
.jy-old-route-panel {
    padding: 8px;
}
.jy-old-route-grid {
    display: grid;
    grid-template-columns: 34% 35% minmax(0, 1fr);
    gap: 8px;
    height: 100%;
}
.jy-old-route-column {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.jy-old-route-column label {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    min-height: 28px;
}
.jy-old-route-column .bp-old-select {
    height: 25px;
}
.jy-old-route-column-middle > button {
    align-self: center;
    min-height: 31px;
    padding: 2px 8px;
}
.jy-old-route-column-middle > button:last-child {
    min-width: 92px;
    min-height: 52px;
    margin-top: 12px;
}
.jy-old-custom-state input {
    width: 100%;
    min-width: 0;
    height: 24px;
    border: 1px solid #777;
    background: #fff;
}
.jy-old-download-route label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}
.jy-old-download-route label > span {
    text-align: center;
}
.jy-old-feishu-panel.is-active {
    display: flex;
    flex-direction: column;
}
.jy-old-feishu-form {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    margin-top: auto;
}
.jy-old-feishu-form > button {
    height: 30px;
}
.jy-old-feishu-form .bp-old-feishu-fields {
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.jy-old-feishu-form .bp-old-feishu-fields label {
    grid-template-columns: 152px minmax(0, 1fr);
}
.jy-old-feishu-panel > p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.2;
}
.jy-old-account-panel {
    position: relative;
}
.jy-old-account-body {
    display: grid;
    grid-template-columns: 25% 25% minmax(0, 1fr);
    gap: 5px;
    height: calc(100% - 21px);
}
.jy-old-account-column {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 28px;
    gap: 3px;
    min-height: 0;
}
.jy-old-account-column > button {
    padding: 0 2px;
}
.jy-old-account-panel .bp-old-account-actions {
    padding-bottom: 120px;
}
.jy-old-switch-rules {
    position: absolute;
    top: 112px;
    right: 6px;
    bottom: 6px;
    left: calc(50% + 8px);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1px;
    margin: 0;
    padding: 3px;
}
.jy-old-switch-rules legend {
    line-height: 1.15;
}
.jy-old-switch-rules label {
    min-height: 22px;
}
.jy-old-switch-rules .bp-old-rule-value {
    width: 34px;
    flex-basis: 34px;
}
.jy-old-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.jy-old-tools button {
    min-height: 31px;
    font-size: 12px;
}
.jy-old-guide-panel .bp-old-guide-copy {
    margin-top: 10px;
    padding: 6px 0;
    border: 0;
    font-size: 13px;
    line-height: 1.25;
}

@media (max-width: 900px) {
    .np-hero.bp-product-hero .jy-old-host {
        width: min(100%, 330px);
        max-height: 400px;
        aspect-ratio: 330 / 400;
        justify-self: center;
        margin-right: 0;
    }
    .jy-old-host .bp-old-titlebar > strong {
        font-size: 10px;
    }
    .jy-old-quickbar {
        grid-template-columns: 90px minmax(0, 1fr) 30px;
    }
    .jy-old-quickbar > input {
        height: 22px;
        border-width: 1px;
    }
    .jy-old-host .bp-old-info-row {
        grid-template-columns: minmax(0, 1fr) 72px;
    }
    .jy-old-host .jy-old-info-message {
        font-size: 9px;
    }
    .jy-old-host .jy-old-service-log {
        gap: 0;
        padding-left: 6px;
    }
    .jy-old-host .jy-old-service-log em,
    .jy-old-host .jy-old-service-log > span,
    .jy-old-host .jy-old-service-log > strong {
        flex: 0 0 12px;
        line-height: 12px;
    }
    .jy-old-basic-left label {
        grid-template-columns: 62px minmax(0, 1fr);
    }
    .jy-old-checks label {
        min-height: 16px;
    }
    .jy-old-checks .jy-old-password input {
        height: 16px;
    }
    .jy-old-checks .jy-old-inline-value {
        width: 22px;
        height: 14px;
        flex-basis: 22px;
    }
    .jy-old-route-panel {
        padding: 5px;
    }
    .jy-old-route-grid {
        gap: 4px;
    }
    .jy-old-route-column {
        gap: 1px;
    }
    .jy-old-route-column label {
        grid-template-columns: 35px minmax(0, 1fr);
        min-height: 23px;
    }
    .jy-old-route-column .bp-old-select {
        height: 22px;
    }
    .jy-old-route-column-middle > button {
        min-height: 25px;
        padding: 1px 4px;
    }
    .jy-old-route-column-middle > button:last-child {
        min-width: 70px;
        min-height: 42px;
        margin-top: 7px;
    }
    .jy-old-feishu-form {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 4px;
    }
    .jy-old-feishu-form > button {
        height: 25px;
    }
    .jy-old-feishu-form .bp-old-feishu-fields label {
        grid-template-columns: 112px minmax(0, 1fr);
    }
    .jy-old-feishu-panel > p {
        font-size: 8px;
    }
    .jy-old-account-panel .bp-old-account-actions {
        padding-bottom: 92px;
    }
    .jy-old-account-column {
        grid-template-rows: minmax(0, 1fr) 23px;
    }
    .jy-old-switch-rules {
        top: 112px;
        right: 5px;
        bottom: 5px;
        left: calc(50% + 6px);
        padding: 2px;
    }
    .jy-old-switch-rules label {
        min-height: 17px;
    }
    .jy-old-switch-rules .bp-old-rule-value {
        width: 25px;
        flex-basis: 25px;
    }
    .jy-old-tools {
        gap: 4px;
    }
    .jy-old-tools button {
        min-height: 25px;
        font-size: 9px;
    }
    .jy-old-guide-panel .bp-old-guide-copy {
        margin-top: 6px;
        font-size: 9px;
    }
}


.purchase-benefit-banner .benefit-main {
    display: grid;
    grid-template-columns: minmax(260px, 0.97fr) minmax(290px, 1.03fr);
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
}

.purchase-benefit-banner .benefit-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    font-family: var(--font-heading);
}

.purchase-benefit-banner .benefit-eyebrow {
    color: var(--accent-cyan);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.purchase-benefit-banner .benefit-heading strong {
    color: #1a1d28;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.5;
}

.purchase-benefit-banner .benefit-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--border-color);
}

.purchase-benefit-banner .benefit-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 2px 16px;
    color: #2c303b;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
}

.purchase-benefit-banner .benefit-item + .benefit-item {
    border-left: 1px solid var(--border-color);
}

.purchase-benefit-banner .benefit-item span {
    color: var(--accent-cyan);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
}

.purchase-benefit-banner .benefit-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 38px;
    padding: 8px 18px;
    background: rgba(0, 152, 199, 0.055);
    border-top: 1px solid rgba(0, 152, 199, 0.12);
    color: #505563;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
}

.purchase-benefit-banner .benefit-contact-separator {
    width: 1px;
    height: 12px;
    background: rgba(0, 152, 199, 0.3);
    flex: 0 0 auto;
}

@media (max-width: 680px) {
    .purchase-benefit-banner .benefit-main {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px 16px 16px;
    }

    .purchase-benefit-banner .benefit-services {
        border-top: 1px solid var(--border-color);
        border-left: 0;
        padding-top: 14px;
    }

    .purchase-benefit-banner .benefit-item {
        padding: 0 12px;
        font-size: 0.84rem;
    }

    .purchase-benefit-banner .benefit-item:first-child {
        padding-left: 0;
    }

    .purchase-benefit-banner .benefit-item:last-child {
        padding-right: 0;
    }

    .purchase-benefit-banner .benefit-contact {
        flex-wrap: wrap;
        gap: 2px 8px;
        padding: 9px 12px;
        text-align: center;
    }
}

@media (max-width: 360px) {
    .purchase-benefit-banner .benefit-services {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .purchase-benefit-banner .benefit-item,
    .purchase-benefit-banner .benefit-item:first-child,
    .purchase-benefit-banner .benefit-item:last-child {
        padding: 0;
    }

    .purchase-benefit-banner .benefit-item + .benefit-item {
        border-top: 1px solid var(--border-color);
        border-left: 0;
        padding-top: 10px;
    }

    .purchase-benefit-banner .benefit-contact-separator {
        display: none;
    }

    .purchase-benefit-banner .benefit-contact span:not(.benefit-contact-separator) {
        width: 100%;
    }
}

.purchase-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-cyan);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.section-divider {
    height: 1px;
    background: var(--border-color);
    margin: 20px 0;
}

.purchase-form-container {
    margin-bottom: 8px !important;
}

.required-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 3px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    vertical-align: middle;
    letter-spacing: 1px;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* 限购提示：橙色警示色 */
.buy-limit-hint {
    color: #d97706;
    font-weight: 500;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* 限购时 + 按钮禁用样式 */
.qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.optional-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 3px;
    background: rgba(0, 152, 199, 0.12);
    color: var(--accent-cyan);
    vertical-align: middle;
    letter-spacing: 1px;
}

.coupon-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    min-width: 0;
    max-width: 260px;
}

.coupon-input {
    flex: 1;
    min-width: 0;
}

.btn-coupon-verify {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--accent-cyan);
    background: transparent;
    color: var(--accent-cyan);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    height: 36px;
}

.btn-coupon-verify:hover {
    background: var(--accent-cyan);
    color: #fff;
}

.btn-coupon-verify:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.coupon-hint {
    min-height: 1em;
}

/* 优惠码行允许换行，让 hint 提示移到输入框下方，避免挤压 input */
#couponSection.form-row {
    flex-wrap: wrap;
}

.form-group.form-row .coupon-hint {
    flex-basis: 100%;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 0;
}

.coupon-valid {
    color: #16a34a;
}

.coupon-invalid {
    color: #ef4444;
}

.order-summary-section .section-title {
    margin-bottom: 8px;
}

.order-summary-section {
    border-color: rgba(0, 152, 199, 0.25);
    background: linear-gradient(135deg, rgba(0,152,199,0.03), rgba(0,152,199,0.06));
    margin-top: 8px;
}

.order-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.order-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

.order-divider.final-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), transparent);
    margin: 10px 0;
}

.discount-value {
    color: #16a34a !important;
    font-weight: 700 !important;
}

.purchase-pay-btn {
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
}

.purchase-pay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   Query Order Page (查询订单页)
   ============================================ */
.qo-page {
    padding-top: calc(var(--nav-height) + 24px);
    min-height: 100vh;
    max-width: 640px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 48px;
}

.qo-header {
    text-align: center;
    margin-bottom: 28px;
}

.qo-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.qo-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* ---- Query Form ---- */
.qo-form {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.qo-field {
    margin-bottom: 18px;
}

.qo-field:last-of-type {
    margin-bottom: 22px;
}

.qo-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.qo-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.qo-input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 7px;
    box-sizing: border-box;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    pointer-events: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.qo-input {
    width: 100%;
    padding: 14px 16px 14px 52px;
    background: var(--bg-card);
    border: 1.5px solid #8a96a3;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: var(--font-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.qo-input::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}

.qo-input:hover {
    border-color: var(--accent-cyan);
}

.qo-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 152, 199, 0.1);
}

.qo-input:focus ~ .qo-input-icon {
    color: #fff;
    background: var(--accent-cyan);
}

.qo-submit {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--accent-cyan);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.qo-submit:hover {
    background: #007aab;
}

.qo-submit:active {
    transform: scale(0.99);
}

.qo-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ---- Result Area ---- */
.qo-result-area {
    margin-top: 24px;
}

/* Empty state */
.qo-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.qo-empty-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    opacity: 0.4;
}

.qo-empty-text {
    font-size: 0.82rem;
    opacity: 0.7;
}

/* Skeleton loading */
.qo-skeleton {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 14px;
}

.qo-skel-line {
    height: 12px;
    background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.05) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    margin-bottom: 10px;
    animation: qoShimmer 1.4s ease-in-out infinite;
}

.qo-skel-line--w60 { width: 60%; }
.qo-skel-line--w40 { width: 40%; }
.qo-skel-line--w30 { width: 30%; }

@keyframes qoShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Order Card ---- */
.qo-order {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    overflow: hidden;
}

.qo-order-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.qo-order-sn-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.qo-order-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.qo-order-sn {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
    word-break: break-all;
}

/* Status tags */
.qo-status {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}

.qo-status--done {
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
}

.qo-status--pending {
    color: #b45309;
    background: rgba(245, 158, 11, 0.1);
}

.qo-status--cancelled {
    color: #4b5563;
    background: rgba(107, 114, 128, 0.1);
}

.qo-status--failed {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.1);
}

.qo-status--default {
    color: #4b5563;
    background: rgba(107, 114, 128, 0.1);
}

/* Order body */
.qo-order-body {
    padding: 18px 20px;
}

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

.qo-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.qo-meta-item dt {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

.qo-meta-item dd {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
    word-break: break-word;
}

.qo-meta-price {
    color: #047857;
    font-size: 0.95rem;
    font-weight: 700;
}

/* Card key section */
.qo-key {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(0, 152, 199, 0.04);
    border: 1px solid rgba(0, 152, 199, 0.15);
    border-radius: var(--radius-sm);
}

.qo-key-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.qo-key-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.qo-key-copy {
    padding: 4px 12px;
    background: var(--accent-cyan);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.qo-key-copy:hover {
    background: #007aab;
}

.qo-key-value {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 700;
    word-break: break-all;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Delivery section */
.qo-delivery {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-card-hover);
    border-radius: var(--radius-sm);
}

.qo-delivery-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.qo-delivery-content {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.qo-delivery-content a {
    color: var(--accent-cyan);
    word-break: break-all;
}

/* Help block */
.qo-help-block {
    text-align: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.qo-help-text {
    font-size: 0.78rem;
    color: #000;
    margin: 0 0 12px;
}

.qo-qq-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #0098c7, #007aab);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 152, 199, 0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.qo-qq-btn:hover {
    background: linear-gradient(135deg, #007aab, #005f80);
    box-shadow: 0 6px 18px rgba(0, 152, 199, 0.4);
    transform: translateY(-1px);
    text-decoration: none;
}

.qo-qq-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 152, 199, 0.3);
}

.qo-qq-btn svg {
    flex-shrink: 0;
}

/* Result count badge */
.qo-count {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding: 3px 10px;
    background: var(--bg-card-hover);
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 640px) {
    .qo-page {
        padding-left: 16px;
        padding-right: 16px;
    }
    .qo-form {
        padding: 18px;
    }
    .qo-meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .qo-order-head {
        padding: 14px 16px;
    }
    .qo-order-body {
        padding: 14px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qo-skel-line {
        animation: none;
    }
    .qo-input,
    .qo-submit,
    .qo-key-copy,
    .qo-input-icon {
        transition: none;
    }
}

.order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.order-row.total {
    padding-top: 2px;
}

.order-label {
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.order-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.92rem;
}

.order-row.total .order-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.order-row.total .order-value {
    color: var(--accent-cyan);
    font-size: 1.4rem;
    font-weight: 800;
    font-family: var(--font-heading);
}

@media (max-width: 768px) {
    .duration-select-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-select-card {
        padding: 14px 16px;
    }
    .product-card-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .duration-select-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .purchase-hero h1 {
        font-size: 1.5rem;
    }
    .purchase-section {
        padding: 18px 16px;
    }
}

/* ============================================
   Steps Indicator
   ============================================ */
.steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
}

.step-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-muted);
    transition: var(--transition);
    font-size: 0.9rem;
}

.step-dot.active {
    background: var(--accent-cyan-dim);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.step-dot.completed {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #10b981;
}

.step-line {
    width: 60px;
    height: 2px;
    background: var(--border-color);
    transition: var(--transition);
}

.step-line.completed {
    background: #10b981;
}

/* ============================================
   Step Content
   ============================================ */
.step-content {
    display: none;
}

.step-content.active {
    display: block;
    animation: stepEnter 0.3s ease;
}

@keyframes stepEnter {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.step-nav {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 28px;
}

/* ============================================
   Form
   ============================================ */
.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-body);
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input.input-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    animation: inputShake 0.4s ease;
}

.input-wrapper {
    position: relative;
}

.input-status {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.status-ok {
    color: #16a34a;
    font-weight: 700;
}

.status-err {
    color: #ef4444;
    font-weight: 700;
}

.form-input.has-status {
    padding-right: 40px;
}

@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ============================================
   Product Select
   ============================================ */
.product-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.product-select-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--card-shadow);
}

.product-select-card:hover {
    border-color: var(--border-glow-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateY(-1px);
}

.product-select-card.selected {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    box-shadow: 0 0 0 1px var(--accent-cyan), var(--shadow-cyan);
}

.product-card-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.product-card-info {
    min-width: 0;
}

.product-select-card .name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.product-select-card .sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ============================================
   Duration Select
   ============================================ */
.duration-select-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dur-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    color: var(--text-muted);
    font-size: 14px;
}

.dur-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: dur-spin 0.6s linear infinite;
}

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

.duration-select-card {
    padding: 18px 12px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.duration-select-card:hover {
    border-color: var(--border-glow-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateY(-1px);
}

.duration-select-card.selected {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    box-shadow: 0 0 0 1px var(--accent-cyan), var(--shadow-cyan);
}

.duration-select-card .dur-name {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.duration-select-card .dur-price {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.dur-stock {
    font-size: 0.7rem;
    font-weight: 500;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.dur-stock.stock-normal {
    color: #10b981;
}

.dur-stock.stock-low {
    color: #f59e0b;
}

.dur-stock.stock-empty {
    color: #ef4444;
}

.dur-stock.stock-manual {
    color: #6366f1;
    font-weight: 700;
}

/* ============================================
   Payment Methods
   ============================================ */
.payment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.payment-card {
    padding: 20px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.payment-card:hover {
    border-color: var(--border-glow-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateY(-1px);
}

.payment-card.selected {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
}

.payment-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.payment-icon svg {
    display: block;
}

.wechat-icon {
    color: #07c160;
}

.alipay-icon {
    color: #1677ff;
}

.payment-name {
    font-weight: 600;
    font-size: 0.95rem;
}

/* ============================================
   Payment Pending
   ============================================ */
.payment-pending {
    text-align: center;
    padding: 60px 24px;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px;
}

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

.payment-pending h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.payment-pending p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.purchase-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0;
    text-align: center;
}

/* Steps Indicator */
.steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 48px;
}

.step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    color: var(--text-muted);
    transition: var(--transition);
    flex-shrink: 0;
}

.step-dot.active {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
}

.step-dot.completed {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan);
    color: #000;
}

.step-line {
    width: 60px;
    height: 2px;
    background: var(--border-color);
    transition: var(--transition);
}

.step-line.completed {
    background: var(--accent-cyan);
}

/* Step Content */
.step-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.step-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 24px;
}

/* Form Elements */
.form-group {
    margin-bottom: 12px;
}

.form-group.form-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-group.form-row .form-label {
    flex-shrink: 0;
    width: 72px;
    margin-bottom: 0;
    text-align: left;
}

.form-group.form-row .form-input,
.form-group.form-row .input-wrapper {
    flex: 1;
    min-width: 0;
    max-width: 260px;
}

.form-group.form-row .quantity-control {
    flex: none;
    min-width: 0;
}

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: var(--font-body);
    transition: var(--transition);
    height: 36px;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.form-input::placeholder {
    color: var(--text-muted);
}

/* Product Select */
.product-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.product-select-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--card-shadow);
}

.product-select-card:hover {
    border-color: var(--border-glow-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateY(-1px);
}

.product-select-card.selected {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    box-shadow: 0 0 0 1px var(--accent-cyan), var(--shadow-cyan);
}

.product-select-card .name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.product-select-card .sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Duration Select */
.duration-select-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.duration-select-card {
    padding: 18px 12px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.duration-select-card:hover {
    border-color: var(--border-glow-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateY(-1px);
}

.duration-select-card.selected {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    box-shadow: 0 0 0 1px var(--accent-cyan), var(--shadow-cyan);
}

.duration-select-card .dur-name {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.duration-select-card .dur-price {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

/* Payment Methods */
.payment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.payment-card {
    padding: 20px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: var(--card-shadow);
}

.payment-card:hover {
    border-color: var(--border-glow-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateY(-1px);
}

.payment-card.selected {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    box-shadow: 0 0 0 1px var(--accent-cyan), var(--shadow-cyan);
}

.payment-icon {
    font-size: 2rem;
}

.payment-name {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Order Summary */
.order-summary {
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
}

.order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.order-row.total .order-label,
.order-row.total .order-value {
    font-weight: 700;
    font-size: 1rem;
}

.order-row.total .order-value {
    color: var(--accent-cyan);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
}

.order-label {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.order-value {
    font-size: 0.92rem;
    font-weight: 600;
}

/* Step Navigation */
.step-nav {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.step-nav .btn {
    flex: 1;
}

/* Payment Pending */
.payment-pending {
    text-align: center;
    padding: 60px 24px;
}

.payment-pending .spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px;
}

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

.payment-pending h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.payment-pending p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Card Key Display */
.card-key-display {
    text-align: center;
    padding: 40px 24px;
}

.card-key-display .success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 24px;
}

.card-key-display h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 24px;
}

.card-key-box {
    background: var(--bg-card);
    border: 1px solid var(--accent-cyan);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
}

.card-key-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.card-key-value {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-all;
    user-select: all;
    white-space: pre-wrap;
}

.card-key-copy-btn {
    margin-top: 12px;
    padding: 8px 20px;
    background: var(--accent-cyan-dim);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--accent-cyan);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

.card-key-copy-btn:hover {
    background: rgba(0, 212, 255, 0.25);
}

.delivery-content-title {
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.accelerator-download-btn {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 9px 16px 9px 10px;
    border: 1px solid #0f766e;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.2);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.accelerator-download-btn:hover {
    background: #115e59;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 9px 24px rgba(15, 118, 110, 0.28);
    transform: translateY(-1px);
}

.accelerator-download-btn:focus-visible {
    outline: 3px solid rgba(13, 148, 136, 0.3);
    outline-offset: 3px;
}

.accelerator-download-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.accelerator-download-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.25;
    text-align: left;
}

.accelerator-download-copy strong {
    font-size: 0.92rem;
    font-weight: 750;
}

.accelerator-download-copy small {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 500;
}

.accelerator-download-btn--delivery {
    display: flex;
    width: min(100%, 300px);
    margin: 0 auto 32px;
}

.accelerator-download-btn--query {
    width: 100%;
    margin-top: 12px;
}

.countdown-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    padding: 16px 24px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md);
}

.countdown-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.countdown-timer {
    font-family: 'Courier New', monospace;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 4px;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
    transition: color 0.3s, text-shadow 0.3s;
}

.countdown-timer.countdown-urgent {
    color: #ef4444;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
    animation: countdown-pulse 1s ease-in-out infinite;
}

@keyframes countdown-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.expired-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 24px;
}

.download-box {
    background: var(--bg-card);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-top: 20px;
    text-align: left;
}

.download-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.download-link-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.download-link-row .card-key-copy-btn {
    margin-top: 0;
    flex-shrink: 0;
}

.download-link {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--accent-cyan);
    text-decoration: none;
    padding: 8px 12px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--radius-sm);
    word-break: break-all;
    transition: var(--transition);
    flex: 1;
    min-width: 0;
}

.download-link:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.3);
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
}

.download-pwd {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pwd-value {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 2px;
}

.qq-group-box {
    margin-top: 24px;
    text-align: center;
}

.btn-qq-group {
    display: inline-block;
    padding: 12px 32px;
    background: linear-gradient(135deg, #12b7f5, #0d9de6);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 12px rgba(18, 183, 245, 0.3);
}

.btn-qq-group:hover {
    background: linear-gradient(135deg, #0d9de6, #0a87cc);
    box-shadow: 0 4px 20px rgba(18, 183, 245, 0.45);
    transform: translateY(-1px);
}

.qq-group-hint {
    margin-top: 10px;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    font-weight: 600;
}

.qq-group-contact {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.card-key-warning {
    margin-top: 20px;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-sm);
    text-align: center;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.modal-box {
    background: var(--bg-card);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: var(--radius-md);
    padding: 28px 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.modal-msg {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 4px;
}

.modal-msg-sub {
    font-size: 0.9rem;
    color: var(--accent-cyan);
    font-weight: 600;
    margin-bottom: 24px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-actions .btn {
    min-width: 100px;
}

/* ============================================
   Tutorial Page
   ============================================ */
.tutorial-page {
    padding-top: 16px;
    min-height: 100vh;
    max-width: 1000px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 80px;
}

.tutorial-header {
    text-align: center;
    margin-bottom: 40px;
}

.tutorial-header h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.tutorial-header p {
    color: var(--text-secondary);
}

.tutorial-recommend-tip {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(8, 145, 178, 0.15));
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 8px;
    color: #06b6d4;
    font-size: 1rem;
    font-weight: 600;
}

/* Tutorial Header Cards */
.tutorial-header .tutorial-warn-tip {
    margin-top: 16px;
    padding: 14px 20px;
    text-align: center;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.20) 0%, rgba(245, 158, 11, 0.14) 100%);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 10px;
}

.tutorial-alert-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    vertical-align: -2px;
}

.tutorial-header .tutorial-warn-tip.tutorial-stability-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding: 13px 18px;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
    color: #111827;
    text-align: left;
}

.tutorial-stability-note .tutorial-alert-mark {
    width: 24px;
    height: 24px;
    margin-right: 0;
    flex: 0 0 24px;
    font-size: 16px;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.22);
}

.tutorial-stability-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.tutorial-stability-date {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f3f4f6;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.tutorial-stability-divider {
    width: 1px;
    height: 20px;
    flex: 0 0 1px;
    background: #d1d5db;
}

.tutorial-stability-message {
    min-width: 0;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
}

.tutorial-stability-message strong {
    color: #b91c1c;
    font-weight: 800;
}

.tutorial-stability-success {
    margin-left: 2px;
    color: #15803d;
    font-weight: 800;
}

@media (max-width: 600px) {
    .tutorial-header .tutorial-warn-tip.tutorial-stability-note {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 13px;
    }

    .tutorial-stability-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .tutorial-stability-divider {
        display: none;
    }

    .tutorial-stability-message {
        font-size: 14px;
    }
}

.tutorial-header-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.tutorial-header-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--card-shadow);
    transition: all 0.25s ease;
    text-decoration: none;
    color: inherit;
}

.tutorial-card-link {
    cursor: pointer;
}

.tutorial-card-link:hover {
    transform: translateY(-2px);
}

.tutorial-card-cyan:hover {
    border-color: rgba(0, 152, 199, 0.3);
    box-shadow: 0 8px 24px rgba(0, 152, 199, 0.1);
}

.tutorial-card-green:hover {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.1);
}

.tutorial-card-blue:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.1);
}

.tutorial-card-warn {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(245, 158, 11, 0.12) 100%);
    border-color: rgba(251, 191, 36, 0.35);
}

.tutorial-card-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.10) 100%);
    border-color: rgba(6, 182, 212, 0.3);
}

.tutorial-card-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.10) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.tutorial-card-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.10) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.tutorial-card-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
}

.tutorial-card-warn .tutorial-card-icon {
    background: rgba(251, 191, 36, 0.15);
}

.tutorial-card-cyan .tutorial-card-icon {
    background: rgba(6, 182, 212, 0.12);
}

.tutorial-card-green .tutorial-card-icon {
    background: rgba(16, 185, 129, 0.12);
}

.tutorial-card-blue .tutorial-card-icon {
    background: rgba(59, 130, 246, 0.12);
}

.tutorial-card-body {
    flex: 1;
    min-width: 0;
}

.tutorial-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.3;
}

.tutorial-card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.tutorial-card-arrow {
    font-size: 1.4rem;
    color: var(--text-tertiary);
    font-weight: 300;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.tutorial-card-link:hover .tutorial-card-arrow {
    transform: translateX(3px);
}

.tutorial-card-cyan:hover .tutorial-card-arrow {
    color: #06b6d4;
}

.tutorial-card-green:hover .tutorial-card-arrow {
    color: #10b981;
}

.tutorial-card-blue:hover .tutorial-card-arrow {
    color: #3b82f6;
}

@media (max-width: 768px) {
    .tutorial-header-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .tutorial-header-card {
        padding: 14px 16px;
    }
    .tutorial-card-icon {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
}

.tutorial-note {
    background: var(--accent-cyan-dim);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 32px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.tutorial-video-section {
    margin-bottom: 28px;
}

.tutorial-video-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tutorial-video-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.tutorial-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tutorial-video-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    text-decoration: none;
    transition: all 0.2s ease;
}

.tutorial-video-card:hover {
    border-color: #0891b2;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.15);
    transform: translateY(-1px);
}

.tutorial-video-card.amber:hover {
    border-color: #d97706;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15);
}

.tutorial-video-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.tutorial-video-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tutorial-video-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tutorial-video-res {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.tutorial-video-arrow {
    font-size: 1.1rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.tutorial-video-card:hover .tutorial-video-arrow {
    transform: translateX(3px);
    color: #0891b2;
}

.tutorial-video-card.amber:hover .tutorial-video-arrow {
    color: #d97706;
}

@media (max-width: 480px) {
    .tutorial-video-grid {
        grid-template-columns: 1fr;
    }
}

.tutorial-download-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    gap: 28px;
    background: #fff;
    border: 1px solid #dbe7ec;
    border-left: 4px solid #0891b2;
    border-radius: 8px;
    padding: 20px 22px;
    margin-bottom: 24px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.055);
}

.tutorial-download-box--accelerator {
    border-left-color: #d97706;
}

.tutorial-download-box--accelerator .tutorial-download-title::before {
    background: #d97706;
}

.tutorial-download-box--accelerator .tutorial-download-btn {
    background: #d97706;
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.24);
}

.tutorial-download-box--accelerator .tutorial-download-btn:hover {
    background: #b45309;
    box-shadow: 0 5px 14px rgba(180, 83, 9, 0.3);
}

.tutorial-download-info {
    min-width: 0;
}

.tutorial-download-title {
    position: relative;
    margin-bottom: 13px;
    padding-left: 12px;
    color: #111827;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.tutorial-download-title::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: #0891b2;
}

.tutorial-download-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 1.5;
}

.tutorial-download-row:last-child {
    margin-bottom: 0;
}

.tutorial-download-label {
    position: relative;
    padding-left: 10px;
    color: #475569;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.tutorial-download-link {
    min-width: 0;
    color: #0e7490;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    word-break: break-all;
}

.tutorial-download-link:hover {
    color: #155e75;
    text-decoration: underline;
}

.tutorial-download-password {
    color: #111827;
    font-family: 'Courier New', monospace;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 2px;
}

.tutorial-download-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 220px;
    min-height: 68px;
    margin: 0;
    padding: 14px 18px;
    background: #0891b2;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 3px 10px rgba(8, 145, 178, 0.24);
    line-height: 1.2;
}

.tutorial-download-btn:hover {
    background: #0e7490;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(8, 145, 178, 0.3);
    text-decoration: none;
    color: #fff;
}

.tutorial-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tutorial-download-main {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tutorial-download-pwd {
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.92;
    letter-spacing: 0.3px;
}

.tutorial-download-pwd::before {
    content: '🔑 ';
    font-size: 0.85rem;
}

.tutorial-note.tutorial-warn {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
    color: #dc2626;
    font-weight: 700;
}

.tutorial-config-alert {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding: 16px 18px 16px 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(127, 29, 29, 0.07);
}

.tutorial-config-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
}

.tutorial-config-alert-content {
    display: flex;
    align-items: baseline;
    min-width: 0;
    white-space: nowrap;
}

.tutorial-config-alert-title {
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.tutorial-config-alert-title strong {
    color: #b91c1c;
    font-weight: 800;
}

.tutorial-config-alert-detail {
    margin-top: 0;
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
}

.tutorial-config-alert-detail span {
    display: inline-block;
    margin: 0 3px;
    color: #9a3412;
    font-weight: 800;
}

.tutorial-auto-config-note {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 276px;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px 18px;
    color: #1f2937;
    background: #fff;
    border: 1px solid #dbe7ec;
    border-left: 4px solid #0891b2;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

@media (max-width: 850px) {
    .tutorial-auto-config-note {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .tutorial-auto-config-note .tutorial-tool-contact {
        grid-column: 1 / -1;
    }
}

.tutorial-auto-config-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: #0891b2;
    border-radius: 50%;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(8, 145, 178, 0.22);
}

.tutorial-auto-config-copy {
    min-width: 0;
}

.tutorial-auto-config-copy p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.65;
}

.tutorial-auto-config-copy p + p {
    margin-top: 3px;
    color: #475569;
    font-size: 14px;
}

.tutorial-auto-config-copy strong {
    color: #0e7490;
    font-weight: 800;
}

.tutorial-auto-config-copy strong.tutorial-auto-config-emphasis {
    color: #d97706;
}

@media (max-width: 600px) {
    .tutorial-auto-config-note {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: flex-start;
        gap: 11px;
        padding: 14px 13px;
    }

    .tutorial-auto-config-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .tutorial-auto-config-copy p {
        font-size: 14.5px;
    }

    .tutorial-auto-config-copy p + p {
        font-size: 13.5px;
    }
}

@media (max-width: 600px) {
    .tutorial-config-alert {
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: flex-start;
        gap: 11px;
        padding: 14px 13px 14px 12px;
        margin-bottom: 22px;
    }

    .tutorial-config-alert-icon {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .tutorial-config-alert-title {
        font-size: 15px;
        line-height: 1.5;
    }

    .tutorial-config-alert-content {
        display: block;
        white-space: normal;
    }

    .tutorial-config-alert-detail {
        margin-top: 6px;
        font-size: 14px;
    }
}

/* 操作步骤条（教程页） */
.tutorial-steps {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(26, 29, 40, 0.045);
}

.tutorial-steps-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 13px 18px;
    background: #f8fafb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.065);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
}

.tutorial-steps-label::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--accent-cyan);
    border-radius: 2px;
    flex: 0 0 auto;
}

.tutorial-steps-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
    padding: 20px 18px 22px;
}

.tutorial-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.tutorial-step::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 16px;
    left: 34px;
    right: -18px;
    height: 1px;
    background: rgba(0, 152, 199, 0.25);
}

.tutorial-step:last-child::before {
    display: none;
}

.tutorial-step-num {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px #fff;
}

.tutorial-step-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tutorial-step-title {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
    white-space: normal;
}

.tutorial-step-desc {
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.65;
    letter-spacing: 0;
    word-break: break-word;
}

.tutorial-step-arrow {
    display: none;
}

/* 响应式：移动端步骤条纵向排列 */
@media (max-width: 768px) {
    .tutorial-steps-label {
        padding: 12px 15px;
    }

    .tutorial-steps-track {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 17px 16px 18px;
    }

    .tutorial-step {
        width: 100%;
        min-height: 0;
        flex-direction: row;
        align-items: flex-start;
        gap: 13px;
        padding: 0 0 20px;
    }

    .tutorial-step::before {
        top: 34px;
        bottom: 0;
        left: 16px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .tutorial-step:last-child {
        padding-bottom: 0;
    }

    .tutorial-step-content {
        gap: 2px;
        padding-top: 3px;
    }
}

.tutorial-qq-section {
    text-align: center;
    margin-top: 40px;
    padding: 32px 24px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(0, 150, 255, 0.06));
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
}

.tutorial-screenshots {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%;
    margin: 0 auto;
}

.tutorial-screenshot-item {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.tutorial-screenshot-item:hover {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.tutorial-screenshot-img {
    width: 100%;
    height: auto;
    display: block;
}

.tutorial-screenshots .tutorial-screenshot-img {
    object-fit: contain;
}


@media (max-width: 640px) {
    .tutorial-screenshots {
        gap: 12px;
    }
}

.feishu-tutorial-btn {
    margin-top: 16px;
    display: inline-block;
    padding: 10px 24px;
    font-size: 14px;
}

.lanzou-download-btn {
    margin-left: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 16px rgba(16, 185, 129, 0.25);
}

.tutorial-video-jump-btn {
    margin-left: 12px;
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 2px 16px rgba(8, 145, 178, 0.25);
}

@media (max-width: 480px) {
    .lanzou-download-btn,
    .tutorial-video-jump-btn {
        margin-left: 0;
        margin-top: 12px;
    }
}

/* 教程页演示视频跳转大按钮（软件下载下方） - 视频缩略图卡片 */
.tutorial-video-hero-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0 24px;
    padding: 14px 18px;
    text-decoration: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    color: var(--text-primary);
    border: 1px solid var(--accent-cyan);
    box-shadow: 0 0 0 1px rgba(0, 152, 199, 0.05), 0 4px 14px rgba(0, 152, 199, 0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
    cursor: pointer;
}

.tutorial-video-hero-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(0, 152, 199, 0.08), 0 8px 24px rgba(0, 152, 199, 0.15);
    transform: translateY(-1px);
}

.tutorial-video-hero-btn .tvhb-thumb {
    position: relative;
    width: 84px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 152, 199, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tutorial-video-hero-btn .tvhb-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 152, 199, 0.1) 0%, rgba(6, 182, 212, 0.14) 100%);
}

.tutorial-video-hero-btn .tvhb-play {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent var(--accent-cyan);
    filter: drop-shadow(0 1px 2px rgba(0, 152, 199, 0.25));
    transition: transform 0.2s ease;
}

.tutorial-video-hero-btn:hover .tvhb-play {
    transform: scale(1.1);
}

.tutorial-video-hero-btn .tvhb-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    line-height: 1.4;
    flex: 1;
}

.tutorial-video-hero-btn .tvhb-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.tutorial-video-hero-btn .tvhb-sub {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 400;
}

@media (max-width: 480px) {
    .tutorial-video-hero-btn {
        padding: 12px 14px;
        gap: 12px;
    }
    .tutorial-video-hero-btn .tvhb-thumb {
        width: 72px;
        height: 46px;
    }
    .tutorial-video-hero-btn .tvhb-play {
        border-width: 7px 0 7px 11px;
    }
    .tutorial-video-hero-btn .tvhb-title { font-size: 14px; }
    .tutorial-video-hero-btn .tvhb-sub { font-size: 11px; }
}

.feishu-back-btn {
    margin-bottom: 16px;
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 2px 16px rgba(0, 212, 255, 0.25);
}

.feishu-content {
    max-width: 900px;
    margin: 0 auto;
}

.faq-content {
    max-width: 900px;
    margin: 0 auto;
}

.faq-back-float {
    position: fixed;
    top: calc(var(--nav-height) + 12px);
    left: 16px;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    line-height: 1;
}
.faq-back-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.5);
}

.faq-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 1rem;
    opacity: 0.7;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: var(--card-shadow);
}

.faq-item-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

.faq-item-hint {
    font-size: 0.9rem;
    color: #d97706;
    font-weight: 600;
    margin-bottom: 12px;
}

.faq-item-steps {
    margin: 0;
    padding-left: 20px;
    color: #1a1a1a;
    font-size: 0.95rem;
    line-height: 1.8;
}

.faq-item-steps li {
    margin-bottom: 6px;
}

.feishu-content .tutorial-screenshot-item {
    max-width: 550px;
    margin: 0 auto 16px auto;
}

.feishu-dual-images {
    display: flex;
    gap: 16px;
    max-width: 700px;
    margin: 0 auto 16px auto;
}

.feishu-dual-images .tutorial-screenshot-item {
    flex: 1;
    margin: 0;
}

.feishu-dual-images .tutorial-screenshot-item.feishu-preview-item {
    max-width: none;
}

.feishu-content .tutorial-screenshot-item:has(.feishu-wide-img) {
    max-width: 900px;
}

.feishu-content .tutorial-screenshot-item.feishu-preview-item {
    max-width: 400px;
}

.feishu-content .tutorial-screenshot-img {
    width: 100%;
    height: auto;
    display: block;
    background: #f3f4f6;
    min-height: 60px;
}

.feishu-preview-item {
    position: relative;
}

.feishu-preview-img {
    height: auto;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.feishu-wide-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 40px auto 40px auto;
}

.feishu-preview-label {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: #fff;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 2;
}

.feishu-part-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-top: 28px;
    margin-bottom: 8px;
    padding-left: 4px;
}

.feishu-step-text {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-left: 8px;
    line-height: 1.6;
}

.feishu-link {
    color: var(--accent-cyan);
    text-decoration: underline;
    word-break: break-all;
}

.feishu-link:hover {
    color: #fff;
}

.tutorial-qq-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.tutorial-qq-desc {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.tutorial-qq-btn {
    min-width: 240px;
}

.tutorial-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    margin-top: 8px;
}

.tutorial-subsection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 24px 0 12px;
    padding-left: 12px;
    border-left: 3px solid var(--accent-cyan, #06b6d4);
}

.tutorial-subsection-title .subsection-icon {
    font-size: 1.1rem;
}

.section-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gradient-cyan);
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.tutorial-system-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 8px 0;
    margin-bottom: 32px;
    transition: var(--transition);
}

.tutorial-system-card:hover {
    border-color: rgba(0, 212, 255, 0.2);
}

.tutorial-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.tutorial-col {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}

.tutorial-col:hover {
    border-color: rgba(0, 212, 255, 0.2);
}

.tutorial-tool-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
    margin: 0;
    padding: 12px 13px;
    text-align: left;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(146, 64, 14, 0.07);
}

.tutorial-tool-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    color: #fff;
    background: #eab308;
    border: 1px solid #ca8a04;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 9px rgba(202, 138, 4, 0.22);
}

.tutorial-tool-contact-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.tutorial-tool-contact-title {
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.tutorial-tool-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding: 7px 14px;
    color: #fff;
    background: #0e7490;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 3px 9px rgba(14, 116, 144, 0.24);
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tutorial-tool-contact-btn:hover {
    color: #fff;
    background: #0e7490;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(8, 145, 178, 0.28);
}

@media (max-width: 480px) {
    .tutorial-tool-contact {
        gap: 10px;
        padding: 12px;
    }

    .tutorial-tool-contact-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 20px;
    }

    .tutorial-tool-contact-title {
        font-size: 13.5px;
    }

}

/* Unified tutorial preview: uptime status and license screenshot share one frame. */
.radar-guide-visual-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #bbc3c9;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(22, 29, 35, .11);
}

.radar-guide-visual-card > .radar-stable-uptime--guide {
    width: auto;
    margin: 0;
    border: 0;
    border-left: 3px solid #3e9d8a;
    border-radius: 0;
    box-shadow: none;
    flex: 0 0 auto;
}

.radar-guide-visual-card > .radar-guide-shot {
    position: relative;
    inset: auto;
    min-height: 0;
    flex: 1 1 auto;
    border: 0;
    border-top: 1px solid #d7e0e3;
    border-radius: 0;
    box-shadow: none;
}

.radar-guide-visual-card > .radar-stable-uptime--guide .radar-stable-uptime-copy strong {
    color: #173c3a;
}

.radar-guide-visual-card > .radar-stable-uptime--guide .radar-stable-uptime-value b {
    color: #258b78;
}

.radar-guide-visual-card > .radar-stable-uptime--guide .radar-stable-uptime-value span {
    color: #5f7474;
}

.radar-guide-status-panel {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: #f6f8f8;
}

.radar-guide-status-head,
.radar-guide-status-footer {
    min-height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #172128;
    color: #dbe6e8;
    font-size: .7rem;
    letter-spacing: .04em;
}

.radar-guide-status-head span,
.radar-guide-status-footer span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.radar-guide-status-head i,
.radar-guide-status-footer i {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #43c28a;
    box-shadow: 0 0 0 4px rgba(67, 194, 138, .15);
}

.radar-guide-status-head b {
    color: #f2ba54;
    font-size: .7rem;
}

.radar-guide-status-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 30px;
}

.radar-guide-status-kicker {
    margin-bottom: 11px;
    color: #267d8a;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.radar-guide-status-body h3 {
    margin-bottom: 10px;
    color: #172128;
    font-size: 1.65rem;
    line-height: 1.2;
}

.radar-guide-status-copy {
    max-width: 34em;
    color: #5e6871;
    font-size: .88rem;
    line-height: 1.75;
}

.radar-guide-status-list {
    margin-top: 26px;
    display: grid;
    gap: 10px;
}

.radar-guide-status-list span {
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #d5e0e1;
    background: #fff;
    color: #43535b;
    font-size: .78rem;
}

.radar-guide-status-list b {
    color: #c58318;
    font-size: .7rem;
}

.radar-guide-status-footer {
    min-height: 54px;
    border-top: 1px solid #29363d;
}

.radar-guide-status-footer strong {
    color: #7ed0b1;
    font-size: .68rem;
    letter-spacing: .1em;
}

@media (min-width: 901px) {
    .radar-guide-setup-body {
        align-items: center;
    }

    .radar-guide-shot-slot {
        align-self: center;
    }

    .radar-guide-visual-card {
        height: clamp(620px, 70vh, 760px);
    }
}

@media (max-width: 900px) {
    .radar-guide-visual-card {
        height: auto;
    }

    .radar-guide-visual-card > .radar-guide-shot {
        position: static;
        flex: none;
    }
}

/* Repositioned uptime cards: compact status panel beneath the environment badge
   on the radar home, and a low-profile card after tutorial compatibility notes. */
.radar-stable-uptime--compact.radar-stable-uptime--hero {
    width: 100%;
    margin-top: 16px;
    padding: 12px 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    border: 1px solid rgba(117, 184, 106, .4);
    border-left: 3px solid #75b86a;
    border-radius: 6px;
    background: rgba(10, 22, 27, .78);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(8px);
}

.radar-stable-uptime--hero .radar-stable-uptime-copy strong {
    font-size: 14px;
}

.radar-stable-uptime--hero .radar-stable-uptime-value b {
    color: #ff8379;
    font-size: 1.35rem;
}

.radar-guide-compatibility + .radar-stable-uptime--guide {
    margin-top: 18px;
    margin-bottom: 0;
}

/* Keep the tutorial uptime status beside the activation note instead of
   consuming a separate block above the first tutorial section. */
.radar-guide-section-head.has-uptime {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: end;
    column-gap: 0;
    row-gap: 10px;
}

.radar-guide-section-head.has-uptime > div {
    grid-column: 1;
    grid-row: 1;
}

.radar-guide-section-head.has-uptime > p {
    display: none;
}

.radar-guide-section-head.has-uptime > .radar-stable-uptime--guide {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 11px;
    border: 1px solid #c7d9d5;
    border-left: 3px solid #3e9d8a;
    border-radius: 6px;
    background: #f8fbfa;
    box-shadow: 0 6px 16px rgba(22, 29, 35, .06);
}

.radar-guide-section-head.has-uptime > .radar-stable-uptime--guide .radar-stable-uptime-mark {
    grid-column: 1;
    grid-row: 1;
}

.radar-guide-section-head.has-uptime > .radar-stable-uptime--guide .radar-stable-uptime-copy {
    grid-column: 2;
    grid-row: 1;
}

.radar-guide-section-head.has-uptime > .radar-stable-uptime--guide .radar-stable-uptime-value {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    padding-top: 0;
    border-top: 0;
}

.radar-guide-section-head.has-uptime h2 {
    white-space: nowrap;
    font-size: clamp(1.55rem, 3vw, 2rem);
}

.radar-guide-section-head.has-uptime .radar-stable-uptime-copy strong {
    color: #173c3a;
    font-size: 14px;
}

.radar-guide-section-head.has-uptime .radar-stable-uptime-value b {
    color: #258b78;
    font-size: 1.28rem;
}

.radar-guide-section-head.has-uptime .radar-stable-uptime-value span {
    color: #5f7474;
}

@media (max-width: 480px) {
    .radar-stable-uptime--compact.radar-stable-uptime--hero {
        width: 100%;
        margin-top: 13px;
        padding: 11px 12px;
        gap: 10px;
    }

    .radar-guide-section-head.has-uptime {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .radar-guide-section-head.has-uptime > .radar-stable-uptime--guide {
        width: 100%;
        margin-top: 0;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .radar-guide-section-head.has-uptime > .radar-stable-uptime--guide .radar-stable-uptime-mark {
        grid-column: 1;
        grid-row: 1;
    }

    .radar-guide-section-head.has-uptime > .radar-stable-uptime--guide .radar-stable-uptime-copy {
        grid-column: 2;
        grid-row: 1;
    }

    .radar-guide-section-head.has-uptime > .radar-stable-uptime--guide .radar-stable-uptime-value {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        padding-top: 8px;
        border-top: 1px solid #dce9e5;
    }

    .radar-guide-shot-slot > .radar-stable-uptime--guide {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        padding: 11px 12px;
    }

    .radar-guide-shot-slot > .radar-stable-uptime--guide .radar-stable-uptime-value {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        padding-top: 8px;
        border-top: 1px solid #dce9e5;
    }
}

.tutorial-col-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 212, 255, 0.03);
}

.col-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background: var(--gradient-cyan);
    color: #000;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 1px;
}

.col-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tutorial-settings-card {
    padding: 8px 0;
}

.tutorial-resolution-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 18px 0 32px;
}

.tutorial-resolution-block {
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(26, 29, 40, 0.045);
}

.tutorial-resolution-block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 14px 18px;
    background: #f8fafb;
    border-bottom: 1px solid var(--border-color);
}

.tutorial-resolution-block-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 31px;
    padding: 0 10px;
    background: var(--accent-cyan);
    border-radius: 4px;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
}

.tutorial-resolution-block-title {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.45;
}

.tutorial-resolution-part + .tutorial-resolution-part {
    border-top: 6px solid #e9eef3;
}

.tutorial-resolution-part-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 0;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #eaf7fb;
    color: #075985;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0;
}

.tutorial-resolution-part-title::before {
    content: '';
    width: 4px;
    height: 19px;
    border-radius: 2px;
    background: var(--accent-cyan);
    flex: 0 0 auto;
}

.tutorial-resolution-part.is-game .tutorial-resolution-part-title {
    background: #fff6e5;
    color: #92400e;
}

.tutorial-resolution-part.is-game .tutorial-resolution-part-title::before {
    background: var(--accent-amber);
}

.tutorial-resolution-part.is-software .tutorial-resolution-part-title {
    background: #f1f5f9;
    color: #334155;
}

.tutorial-resolution-part.is-software .tutorial-resolution-part-title::before {
    background: #64748b;
}

.tutorial-resolution-part.is-software .tutorial-resolution-settings-grid {
    grid-template-columns: 1fr;
}

.tutorial-resolution-part.is-software .setting-row {
    border-right: 0;
}

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

.tutorial-resolution-settings-grid .setting-row {
    gap: 14px;
    min-width: 0;
    min-height: 56px;
    padding: 9px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.055);
}

.tutorial-resolution-settings-grid .setting-row:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, 0.055);
}

.tutorial-resolution-settings-grid .setting-row:last-child,
.tutorial-resolution-settings-grid .setting-row:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
}

.tutorial-resolution-settings-grid .setting-row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
}

.tutorial-resolution-part.is-game .tutorial-resolution-settings-grid {
    grid-auto-flow: column;
    grid-template-rows: repeat(5, minmax(56px, auto));
}

.tutorial-resolution-part.is-game .setting-row {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.055);
}

.tutorial-resolution-part.is-game .setting-row:nth-child(-n + 5) {
    border-right: 1px solid rgba(0, 0, 0, 0.055);
}

.tutorial-resolution-part.is-game .setting-row:nth-child(5),
.tutorial-resolution-part.is-game .setting-row:last-child {
    border-bottom: 0;
}

.tutorial-resolution-part.is-game .setting-row:nth-child(9) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.055);
}

.tutorial-resolution-part.is-game .setting-row:last-child:nth-child(odd) {
    grid-column: auto;
}

.tutorial-resolution-settings-grid .setting-name,
.tutorial-resolution-settings-grid .setting-value {
    font-size: 0.82rem;
    line-height: 1.5;
}

.tutorial-resolution-settings-grid .setting-name {
    min-width: 0;
}

.tutorial-resolution-settings-grid .setting-value {
    max-width: 46%;
    text-align: right;
    overflow-wrap: anywhere;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.setting-name {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.setting-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.setting-row.setting-diff {
    background: rgba(245, 158, 11, 0.06);
}

.setting-row.setting-diff .setting-name {
    color: var(--accent-amber);
}

.setting-row.setting-diff .setting-value {
    color: var(--accent-amber);
}

.setting-row.setting-highlight {
}

.setting-row.setting-highlight .setting-name {
}

.setting-row.setting-highlight .setting-value {
    font-weight: 700;
    color: #dc2626;
}

.setting-tip {
    display: block;
    font-size: 0.75rem;
    color: #f59e0b;
    font-weight: 400;
    margin-top: 2px;
}

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

    .tutorial-resolution-stack {
        gap: 16px;
        margin: 16px 0 28px;
    }

    .tutorial-resolution-block-header {
        min-height: 55px;
        padding: 12px 14px;
    }

    .tutorial-resolution-part-title {
        padding: 10px 14px;
    }

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

    .tutorial-resolution-settings-grid .setting-row {
        padding: 9px 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.055);
    }

    .tutorial-resolution-settings-grid .setting-row:nth-child(odd) {
        border-right: 0;
    }

    .tutorial-resolution-settings-grid .setting-row:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.055);
    }

    .tutorial-resolution-settings-grid .setting-row:last-child {
        grid-column: auto;
        border-bottom: 0;
    }

    .tutorial-resolution-part.is-game .tutorial-resolution-settings-grid {
        grid-auto-flow: row;
        grid-template-rows: none;
    }

    .tutorial-resolution-part.is-game .setting-row:nth-child(-n + 5) {
        border-right: 0;
    }

    .tutorial-resolution-part.is-game .setting-row:nth-child(5) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.055);
    }

    .tutorial-resolution-settings-grid .setting-value {
        max-width: 46%;
    }
}

/* ============================================
   Loyalty Roll Modal & Section
   ============================================ */
.loyalty-section {
    background: linear-gradient(135deg, rgba(0,152,199,0.06), rgba(245,158,11,0.08));
    border: 1px solid rgba(0,152,199,0.2);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-top: 4px;
}
.loyalty-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.loyalty-section-icon {
    font-size: 1.3rem;
}
.loyalty-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-cyan);
}
.loyalty-section-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.loyalty-roll-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0098c7, #007aab);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
}
.loyalty-roll-btn:hover {
    background: linear-gradient(135deg, #007aab, #006690);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,152,199,0.3);
}
.loyalty-roll-btn:active { transform: scale(0.97); }
.loyalty-roll-btn:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.loyalty-roll-btn:disabled:hover {
    background: #d1d5db;
    transform: none;
    box-shadow: none;
}
.loyalty-section-hint {
    color: #9ca3af;
    font-size: 0.85rem;
    margin: 4px 0 8px;
    text-align: center;
}
.loyalty-roll-btn .roll-btn-icon {
    display: inline-block;
    animation: btnShake 0.6s ease infinite alternate;
}
@keyframes btnShake {
    from { transform: rotate(-8deg); }
    to { transform: rotate(8deg); }
}
.loyalty-roll-btn:disabled .roll-btn-icon { animation: none; }

.loyalty-discount-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(22,163,74,0.08);
    border: 1px solid rgba(22,163,74,0.25);
    border-radius: var(--radius-sm);
    margin-top: 10px;
}
.loyalty-discount-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.loyalty-discount-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #16a34a;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.loyalty-new-user-hint {
    text-align: center;
    padding: 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Roll Modal */
.loyalty-roll-modal {
    max-width: 380px;
    text-align: center;
    padding: 32px 28px !important;
    position: relative;
}
.roll-close-top-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px; height: 32px;
    border: none;
    background: rgba(0,0,0,0.06);
    color: var(--text-muted);
    font-size: 1.2rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 5;
}
.roll-close-top-btn:hover {
    background: rgba(0,0,0,0.12);
    color: var(--text-primary);
}
.roll-remaining-info {
    margin-top: 8px;
    font-size: 0.78rem;
    color: #f59e0b;
    background: rgba(245,158,11,0.08);
    padding: 4px 14px;
    border-radius: 20px;
    display: inline-block;
}
.roll-remaining-info strong {
    color: #d97706;
    font-weight: 800;
}
.roll-header {
    margin-bottom: 24px;
}
.roll-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    animation: giftBounce 1s ease infinite alternate;
}
@keyframes giftBounce {
    from { transform: scale(1) rotate(-5deg); }
    to { transform: scale(1.1) rotate(5deg); }
}
.roll-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.roll-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.roll-display {
    margin-bottom: 20px;
}
.roll-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.roll-slot-machine {
    background: linear-gradient(180deg, #1a1d28 0%, #0f1117 100%);
    border: 2px solid rgba(0,212,255,0.3);
    border-radius: 16px;
    padding: 20px 28px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    box-shadow: inset 0 2px 12px rgba(0,0,0,0.5), 0 0 30px rgba(0,212,255,0.15);
}
.roll-currency {
    font-size: 1.8rem;
    font-weight: 800;
    color: #00d4ff;
    font-family: 'SF Mono', 'Consolas', monospace;
}
.roll-digits {
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.roll-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 52px;
    font-size: 2.4rem;
    font-weight: 900;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: #00d4ff;
    background: rgba(0,212,255,0.08);
    border-radius: 8px;
    margin: 0 2px;
    transition: color 0.1s, text-shadow 0.1s;
}
.roll-digit.rolling {
    animation: digitRoll 0.08s steps(1) infinite;
    color: #fff;
    text-shadow: 0 0 12px #00d4ff, 0 0 24px #00d4ff;
}
@keyframes digitRoll {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}
.roll-dot {
    font-size: 2rem;
    font-weight: 900;
    color: #00d4ff;
    font-family: 'SF Mono', 'Consolas', monospace;
}
.roll-result {
    animation: resultFadeIn 0.5s ease forwards;
}
@keyframes resultFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.result-amount {
    font-size: 2.2rem;
    font-weight: 900;
    color: #16a34a;
    font-family: 'SF Mono', 'Consolas', monospace;
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(22,163,74,0.3);
}
.result-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.roll-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    animation: confirmBtnPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.roll-confirm-btn {
    flex: 1;
    padding: 12px 20px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 48px;
}
.roll-confirm-btn:hover { background: linear-gradient(135deg, #15803d, #166534); transform: translateY(-1px); }
.roll-retry-btn {
    flex: 1;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0098c7, #007aab);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 48px;
}
.roll-retry-btn:hover { background: linear-gradient(135deg, #007aab, #006690); transform: translateY(-1px); }
.roll-close-btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
}
.roll-close-btn:hover { background: var(--bg-secondary); color: var(--text-secondary); }
@keyframes confirmBtnPop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* Order Summary - Loyalty Discount Row */
.order-row.loyalty-row {
    color: #16a34a;
}
.order-row.loyalty-row .order-value {
    color: #16a34a;
    font-weight: 700;
}
.order-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

@media (max-width: 768px) {
    .loyalty-roll-modal { padding: 24px 20px !important; max-width: 320px; }
    .roll-digit { min-width: 28px; height: 44px; font-size: 1.9rem; }
    .result-amount { font-size: 1.8rem; }
}

/* ============================================
   Footer
   ============================================ */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 40px 24px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--accent-cyan);
    margin-bottom: 12px;
}

.footer-copy {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================
   Toast
   ============================================ */
.toast-container {
    position: fixed;
    top: 90px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
    max-width: 360px;
    backdrop-filter: blur(10px);
}

.toast.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.toast.success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.toast.info {
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--accent-cyan);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(40px); }
}

/* ============================================
   Page Transitions
   ============================================ */
.page-enter {
    animation: pageEnter 0.5s ease forwards;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Loading
   ============================================ */
.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* 移动端导航：横向滑动条，替代汉堡菜单 */
    .nav-mobile-toggle,
    .mobile-menu,
    .nav-cta {
        display: none !important;
    }

    .nav-container {
        justify-content: space-between;
        padding: 0 14px;
        gap: 8px;
    }

    .nav-logo {
        display: none;
    }

    .nav-product-switcher {
        flex: 0 0 auto;
        gap: 3px;
        padding: 3px;
    }

    .nav-product-identity {
        min-height: 34px;
        padding: 0 7px;
    }

    .nav-product-identity-text {
        display: none;
    }

    .nav-product-option {
        gap: 5px;
        min-height: 34px;
        padding: 6px 8px;
        font-size: .72rem;
    }

    .nav-product-mark {
        width: 19px;
        height: 19px;
        font-size: .62rem;
    }

    .logo-icon {
        display: none;
    }

    /* nav-links 改为横向可滑动条 */
    .nav-links {
        display: flex !important;
        flex: 1;
        min-width: 0;
        justify-content: flex-start !important;
        gap: 4px;
        margin-left: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-pill {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 4px;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        flex-shrink: 0;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .nav-pill-indicator {
        top: 0;
        height: 100%;
    }

    .nav-link {
        font-size: 0.76rem;
        padding: 6px 11px;
        flex-shrink: 0;
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.6);
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

    .nav-link.active {
        color: #fff;
        font-weight: 600;
    }

    .products-showcase {
        gap: 24px;
    }

    .product-row {
        grid-template-columns: 1fr;
        padding: 28px 20px;
        gap: 24px;
    }

    .product-row-visual {
        order: -1;
    }

    .product-row-price {
        font-size: 2.2rem;
    }

    .product-row-actions {
        flex-direction: column;
    }

    .product-row-actions .btn {
        width: 100%;
        text-align: center;
    }

    .carousel-arrow {
        width: 32px;
        height: 32px;
        font-size: 18px;
        opacity: 0.7;
    }

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

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

    .product-select-grid {
        grid-template-columns: 1fr;
    }

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

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

    .tutorial-step {
        flex-direction: column;
        align-items: flex-start;
    }

    .steps-indicator {
        gap: 0;
    }

    .step-line {
        width: 30px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
}

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

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

    .section {
        padding: 60px 16px;
    }

    /* 超小屏：隐藏 logo 文字，给滑动条更多空间 */
    .logo-text {
        display: none;
    }

    .nav-logo {
        gap: 0;
    }
}

/* ===== Trial Modal ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
    overflow-y: auto;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    margin: auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 52px;
    height: 52px;
    border: none;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 34px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* 购买页限时优惠弹窗 */
.purchase-promo-overlay {
    background: rgba(8, 15, 28, 0.78);
    backdrop-filter: blur(12px);
}

.purchase-promo-dialog {
    width: min(720px, calc(100vw - 32px));
    max-width: 720px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f7fafc;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(8, 15, 28, 0.42);
}

.purchase-promo-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.82);
    font-size: 34px;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.purchase-promo-close:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    transform: rotate(6deg);
}

.purchase-promo-header {
    position: relative;
    padding: 28px 64px 26px 28px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 15%, rgba(34, 211, 238, 0.28), transparent 35%),
        radial-gradient(circle at 90% 90%, rgba(245, 158, 11, 0.24), transparent 38%),
        linear-gradient(120deg, #0e2f42 0%, #172033 58%, #35240e 100%);
}

.purchase-promo-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image: radial-gradient(rgba(255, 255, 255, 0.65) 0.7px, transparent 0.7px);
    background-size: 15px 15px;
}

.purchase-promo-badge,
.purchase-promo-header h2,
.purchase-promo-header p {
    position: relative;
    z-index: 1;
}

.purchase-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.purchase-promo-badge span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fb7185;
    box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.16);
}

.purchase-promo-header h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.purchase-promo-header p {
    max-width: 520px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.purchase-promo-prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 20px 22px 0;
}

.purchase-promo-card {
    padding: 16px 17px 12px;
    border: 1px solid #e7eaf0;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    box-shadow: 0 5px 16px rgba(31, 52, 75, 0.06);
}

.purchase-promo-card--bp {
    border-left: 4px solid var(--accent-cyan);
    background: linear-gradient(100deg, rgba(0, 152, 199, 0.08), #f8fafc 48%);
}

.purchase-promo-card--jy {
    border-left: 4px solid var(--accent-amber);
    background: linear-gradient(100deg, rgba(232, 149, 10, 0.09), #f8fafc 48%);
}

.purchase-promo-card-top,
.purchase-promo-price-row {
    display: flex;
    align-items: center;
}

.purchase-promo-card-top {
    justify-content: flex-start;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(138, 147, 163, 0.18);
}

.purchase-promo-plan {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 9px 0;
}

.purchase-promo-plan + .purchase-promo-plan {
    border-top: 1px solid rgba(138, 147, 163, 0.18);
}

.purchase-promo-plan-name {
    flex-shrink: 0;
    min-width: 0;
    color: #5f6877;
    font-size: 0.76rem;
    font-weight: 700;
}

.purchase-promo-product {
    color: #273142;
    font-size: 1.05rem;
    font-weight: 800;
}

.purchase-promo-save {
    padding: 3px 9px;
    border-radius: 999px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 0.7rem;
    font-weight: 700;
}

.purchase-promo-price-row {
    justify-content: flex-end;
    gap: 11px;
}

.purchase-promo-old {
    color: #8a93a3;
    font-size: 0.93rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
}

.purchase-promo-arrow {
    color: #b2b8c3;
    font-size: 1rem;
}

.purchase-promo-new {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.purchase-promo-new strong {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1;
}

.purchase-promo-new small {
    color: #667085;
    font-size: 0.78rem;
    font-weight: 600;
}

.purchase-promo-card--bp .purchase-promo-new strong {
    color: #007fa8;
}

.purchase-promo-card--jy .purchase-promo-new strong {
    color: #cf7c00;
}

.purchase-promo-note {
    margin: 16px 22px 0;
    text-align: center;
    color: #7b8494;
    font-size: 0.78rem;
}

.purchase-promo-action {
    display: block;
    width: min(250px, calc(100% - 44px));
    margin: 14px auto 22px;
    padding: 13px 20px;
    border-radius: 11px;
    background: linear-gradient(135deg, #0098c7, #0879a6);
    color: #fff;
    font-size: 0.96rem;
    font-weight: 750;
    box-shadow: 0 5px 14px rgba(0, 152, 199, 0.23);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.purchase-promo-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(0, 152, 199, 0.3);
}

.purchase-promo-action:active {
    transform: translateY(0);
}

@media (max-width: 520px) {
    .purchase-promo-overlay {
        padding: 16px;
    }

    .purchase-promo-dialog {
        border-radius: 18px;
    }

    .purchase-promo-close {
        top: 12px;
        right: 12px;
        width: 56px;
        height: 56px;
        padding: 0 0 4px;
        border: 2px solid rgba(255, 255, 255, 0.88);
        border-radius: 14px;
        background: rgba(5, 15, 28, 0.78);
        color: #fff;
        font-family: Arial, sans-serif;
        font-size: 42px;
        font-weight: 400;
        line-height: 1;
        box-shadow: 0 6px 18px rgba(3, 10, 20, 0.38);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .purchase-promo-close:active {
        background: rgba(5, 15, 28, 0.94);
        transform: scale(0.94);
    }

    .purchase-promo-header {
        padding: 28px 78px 24px 22px;
        text-align: left;
    }

    .purchase-promo-header h2 {
        font-size: 1.45rem;
    }

    .purchase-promo-prices {
        grid-template-columns: 1fr;
        padding: 16px 16px 0;
    }

    .purchase-promo-card {
        padding: 15px 14px;
    }

    .purchase-promo-plan {
        gap: 8px;
    }

    .purchase-promo-price-row {
        gap: 7px;
    }

    .purchase-promo-new strong {
        font-size: 1.45rem;
    }

    .purchase-promo-note {
        margin: 14px 16px 0;
    }

    .purchase-promo-action {
        width: calc(100% - 32px);
        margin: 14px auto 20px;
    }

}

/* 购买页弹窗：先建立本站信任，再展示简要优惠 */
.purchase-promo-hero {
    position: relative;
    padding: 28px 64px 25px 28px;
    background: #102a43;
    color: #fff;
    border-bottom: 3px solid #f59e0b;
}

.purchase-promo-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}

.purchase-promo-kicker span {
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
}

.purchase-promo-kicker-offer {
    border-color: rgba(251, 191, 36, 0.55) !important;
    color: #fcd34d;
}

.purchase-promo-hero h2 {
    margin: 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.62rem;
    font-weight: 800;
    letter-spacing: 0;
}

.purchase-promo-site {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 9px;
    color: #67e8f9;
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0;
}

.purchase-promo-site:hover {
    color: #cffafe;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.purchase-promo-site em {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 600;
}

.purchase-promo-hero p {
    max-width: 530px;
    margin: 9px auto 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    line-height: 1.65;
    text-align: center;
    letter-spacing: 0;
}

.purchase-promo-body {
    padding: 18px 22px 22px;
    background: #f7fafc;
}

.purchase-promo-support,
.purchase-promo-offers {
    padding: 14px 16px;
    border: 1px solid #e4e9f0;
    border-radius: 10px;
    background: #fff;
}

.purchase-promo-offers {
    margin-top: 12px;
}

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

.purchase-promo-section-head strong {
    color: #233044;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0;
}

.purchase-promo-section-head span {
    color: #8792a4;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
}

.purchase-promo-support-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.purchase-promo-support-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #edf1f5;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
}

.purchase-promo-support-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.67rem;
    font-weight: 800;
}

.purchase-promo-support-item + .purchase-promo-support-item .purchase-promo-support-index {
    background: #fef3c7;
    color: #a16207;
}

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

.purchase-promo-offer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 9px 0;
    border-top: 1px solid #eef2f6;
    color: #4b5563;
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0;
}

.purchase-promo-offer-row > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-promo-offer-row > span:last-child {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    flex-shrink: 0;
}

.purchase-promo-offer-row del {
    color: #9aa3b1;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration-thickness: 1px;
}

.purchase-promo-offer-row strong {
    color: #0e7490;
    font-size: 0.91rem;
    font-weight: 850;
    letter-spacing: 0;
}

.purchase-promo-warning {
    margin: 14px 0 0;
    color: #a16207;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0;
}

.purchase-promo-body .purchase-promo-note {
    margin: 5px 0 0;
    color: #8b95a5;
    font-size: 0.7rem;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0;
}

.purchase-promo-body .purchase-promo-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: min(340px, 100%);
    min-height: 54px;
    margin: 14px auto 0;
    padding: 8px 9px 8px 20px;
    border: 1px solid #076b86;
    border-radius: 8px;
    background: #087f9f;
    box-shadow: 0 7px 18px rgba(8, 127, 159, 0.24);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.purchase-promo-body .purchase-promo-action:hover {
    background: #076b86;
    border-color: #075b72;
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(8, 127, 159, 0.3);
}

.purchase-promo-body .purchase-promo-action:active {
    transform: translateY(0);
    box-shadow: 0 4px 11px rgba(8, 127, 159, 0.22);
}

.purchase-promo-body .purchase-promo-action:focus-visible {
    outline: 3px solid rgba(34, 211, 238, 0.35);
    outline-offset: 3px;
}

.purchase-promo-action-label {
    flex: 1;
    padding-left: 34px;
    text-align: center;
    white-space: nowrap;
}

.purchase-promo-action-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.purchase-promo-body .purchase-promo-action:hover .purchase-promo-action-arrow {
    background: rgba(255, 255, 255, 0.24);
    transform: translateX(2px);
}

@media (max-width: 520px) {
    .purchase-promo-hero {
        padding: 25px 48px 22px 22px;
    }

    .purchase-promo-body .purchase-promo-action {
        width: 100%;
        min-height: 52px;
        padding-left: 16px;
    }

    .purchase-promo-action-label {
        padding-left: 32px;
        font-size: 14.5px;
    }

    .purchase-promo-hero h2 {
        font-size: 1.42rem;
    }

    .purchase-promo-site {
        flex-wrap: wrap;
        row-gap: 2px;
        font-size: 0.97rem;
    }

    .purchase-promo-body {
        padding: 14px 16px 18px;
    }

    .purchase-promo-support-list,
    .purchase-promo-offer-grid {
        grid-template-columns: 1fr;
    }
}

/* 更新日志弹窗 */
.changelog-modal-content {
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.changelog-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px 4px 8px 0;
    margin-top: 8px;
}

.changelog-list::-webkit-scrollbar {
    width: 5px;
}

.changelog-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.changelog-item {
    padding: 0;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.changelog-item:last-child {
    margin-bottom: 0;
}

.changelog-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f7ff 0%, #eef2ff 100%);
    border-bottom: 1px solid #e5e7eb;
}

.changelog-version {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    padding: 3px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.changelog-date {
    font-size: 0.78rem;
    color: #6b7280;
}

.changelog-section {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.changelog-section:last-child {
    border-bottom: none;
}

.changelog-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
    padding-left: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.changelog-section-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: #3b82f6;
    border-radius: 2px;
}

.changelog-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.changelog-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    line-height: 1.6;
    text-align: left;
}

.changelog-entry-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
    margin-top: 8px;
}

.changelog-entry-text {
    font-size: 0.84rem;
    color: #374151;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.changelog-loading,
.changelog-empty {
    text-align: center;
    padding: 32px 16px;
    color: #9ca3af;
    font-size: 0.85rem;
}

.modal-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.modal-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.modal-desc {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.modal-qq-group {
    background: var(--bg-primary);
    border: 2px solid var(--accent-cyan);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.qq-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.qq-number {
    font-size: 32px;
    font-weight: 800;
    color: var(--accent-cyan);
    font-family: 'Orbitron', monospace;
}

.modal-btn {
    width: 100%;
    margin-bottom: 16px;
}

.modal-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
}

.modal-actions .btn {
    min-width: 128px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.modal-actions .btn-primary {
    background: var(--gradient-cyan);
    color: #fff;
    border: none;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 152, 199, 0.32);
}

.modal-actions .btn-primary:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 152, 199, 0.42);
    transform: translateY(-1px);
}

.modal-actions .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.modal-actions .btn-primary:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

.modal-note {
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* === Download Modal (redesigned) === */
.modal-content--download {
    max-width: 440px;
    padding: 36px 36px 32px;
    text-align: left;
    transform: translateY(0) scale(1);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 24px 48px -12px rgba(0, 152, 199, 0.12);
}

.modal-content--download .modal-close {
    background: transparent;
    color: var(--text-muted);
    font-weight: 300;
}

.modal-content--download .modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.modal-content--download .dl-header {
    margin-bottom: 20px;
}

.dl-eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.dl-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}

.dl-password {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(0, 152, 199, 0.18);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dl-password::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 152, 199, 0.3), transparent);
}

.dl-password-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.dl-password-value {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 0.4em;
    line-height: 1;
    text-indent: 0.4em;
    text-shadow: 0 0 20px rgba(0, 152, 199, 0.15);
}

.dl-hint {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 24px;
    text-align: center;
}

.modal-content--download .modal-actions {
    margin-top: 0;
}

/* Download modal content shown immediately (no stagger) */
.modal-content--download .dl-header,
.modal-content--download .dl-password,
.modal-content--download .dl-hint,
.modal-content--download .modal-actions {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .modal-content--download,
    .modal-content--download .dl-header,
    .modal-content--download .dl-password,
    .modal-content--download .dl-hint,
    .modal-content--download .modal-actions {
        transition: none !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .modal-content--download {
        max-width: 100%;
        padding: 28px 24px 24px;
    }
    .dl-password-value {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: auto;
        padding: 110px 16px 60px;
        text-align: center;
    }
    .hero-title {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }
    .hero-subtitle {
        font-size: 0.9rem;
    }
    .hero-badge {
        font-size: 0.78rem;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
    .hero-highlight {
        font-size: 0.88rem;
        padding: 0 4px;
    }
    .hero-note {
        font-size: 0.82rem;
        padding: 0 4px;
    }
    .section {
        padding: 44px 14px;
    }
    .section-header {
        margin-bottom: 28px;
    }
    .section-label {
        font-size: 0.7rem;
    }
    .section-header .section-title {
        font-size: 1.35rem;
    }
    .product-card {
        padding: 20px 14px;
    }
    .product-card-desc {
        font-size: 0.82rem;
    }
    .pricing-card {
        padding: 20px 14px;
    }
    .nav-logo {
        font-size: 0.95rem;
    }
    .logo-icon {
        font-size: 1.05rem;
    }
    .purchase-section {
        padding: 14px;
    }
    .card-key-display {
        font-size: 0.88rem;
        padding: 24px 14px;
        word-break: break-all;
    }
    .card-key-display .success-icon {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
        margin-bottom: 18px;
    }
    .card-key-display h3 {
        font-size: 1.1rem;
        margin-bottom: 18px;
    }
    .card-key-box {
        padding: 14px;
    }
    .card-key-value {
        font-size: 0.95rem;
    }
    /* 订单信息卡片移动端：左右分栏改为上下堆叠 */
    .order-info-box > div {
        flex-direction: column !important;
        gap: 4px !important;
    }
    .order-info-box {
        font-size: 0.78rem !important;
        padding: 10px 12px !important;
    }
    .delivery-content-box {
        font-size: 0.82rem !important;
        padding: 12px 14px !important;
    }
    .download-link-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .download-link-row .download-label {
        width: 100%;
    }
    .tutorial-page {
        padding: 10px 12px 20px;
    }
    .tutorial-download-box {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 14px;
    }
    .tutorial-download-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .tutorial-download-label {
        width: auto;
    }
    .tutorial-download-link {
        font-size: 0.85rem;
    }
    .tutorial-download-btn {
        width: 100%;
        min-height: 62px;
    }
    .footer {
        padding: 28px 14px;
        font-size: 0.82rem;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .duration-select-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .modal-content {
        padding: 30px 20px;
    }

    .modal-title {
        font-size: 24px;
    }

    .qq-number {
        font-size: 28px;
    }

    .purchase-page {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: calc(var(--nav-height) + 24px);
    }
    .purchase-section {
        padding: 18px;
        border-radius: var(--radius-md);
    }
    .product-select-grid {
        gap: 10px;
    }
    .pricing-grid {
        gap: 10px;
    }
    .form-input, .form-group {
        width: 100%;
    }
    .form-input {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    .purchase-section .section-title {
        font-size: 1rem;
        margin-bottom: 14px;
    }
    .product-select-grid {
        gap: 10px;
    }
}

/* ===== Quantity Control ===== */
.quantity-control {
    display: flex;
    align-items: center;
    gap: 0;
    width: fit-content;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
}

.qty-btn:active {
    background: rgba(0, 152, 199, 0.15);
}

.qty-input {
    width: 48px;
    height: 36px;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    font-family: var(--font-heading);
}

.qty-input:focus {
    outline: none;
    background: var(--accent-cyan-dim);
}

/* ===== Disclaimer Section ===== */
.disclaimer-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 60px 24px !important;
}

.disclaimer-box {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.disclaimer-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-amber);
    text-align: center;
    margin-bottom: 24px;
}

.disclaimer-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.disclaimer-content p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.disclaimer-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .disclaimer-box {
        padding: 24px;
    }

    .disclaimer-content p {
        font-size: 0.85rem;
    }
}

/* ============================================
   Premium Hero - 高级感首页（背景图）
   ============================================ */

.hero-premium {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hero-premium-bg {
    position: absolute;
    inset: 0;
    background-image: url('images/BJ.jpg?v=92');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    animation: bg-zoom 30s ease-in-out infinite alternate;
}

@keyframes bg-zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.hero-premium-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(10,14,23,0.88) 0%, rgba(10,14,23,0.72) 50%, rgba(10,14,23,0.85) 100%),
        radial-gradient(ellipse at top left, rgba(0,152,199,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(232,149,10,0.12) 0%, transparent 50%);
    z-index: 1;
}

.hero-premium-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 100px 48px 40px;
    flex: 1;
}

.hero-premium-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hero-premium-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    width: fit-content;
}

.hero-premium-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d4ff;
    box-shadow: 0 0 10px rgba(0,212,255,0.8);
    animation: pulse-dot 2s ease-in-out infinite;
}

.hero-premium-title {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-premium-title .title-cyan {
    background: linear-gradient(135deg, #00d4ff 0%, #0098c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(0,212,255,0.3);
}

.hero-premium-title .title-amber {
    background: linear-gradient(135deg, #ffb84d 0%, #e8950a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(232,149,10,0.3);
}

.hero-premium-desc {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    max-width: 500px;
    font-weight: 400;
}

.hero-premium-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
}

.premium-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.premium-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.premium-stat-value.cyan {
    background: linear-gradient(135deg, #00d4ff, #0098c7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-stat-value.amber {
    background: linear-gradient(135deg, #ffb84d, #e8950a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-stat-value.price {
    background: linear-gradient(135deg, #fff, #d0d0d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.premium-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.15);
}

.hero-premium-buttons {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.hero-premium-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* 新拟态风格按钮 */
.btn-premium-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.4),
                -6px -6px 12px rgba(255, 255, 255, 0.03),
                inset 1px 1px 1px rgba(255, 255, 255, 0.05);
    transition: all 0.25s ease;
}

.btn-premium-primary:hover {
    color: #22d3ee;
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5),
                -8px -8px 16px rgba(255, 255, 255, 0.04),
                inset 1px 1px 1px rgba(255, 255, 255, 0.06),
                0 0 20px rgba(6, 182, 212, 0.4);
}

.btn-premium-primary:active {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.5),
                inset -4px -4px 8px rgba(255, 255, 255, 0.03);
}

.btn-premium-primary .btn-p-arrow {
    transition: transform 0.25s ease;
}

.btn-premium-primary:hover .btn-p-arrow {
    transform: translateX(3px);
}

.btn-premium-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #1e293b;
    color: #22d3ee;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.4),
                -6px -6px 12px rgba(255, 255, 255, 0.03),
                inset 1px 1px 1px rgba(255, 255, 255, 0.04);
    transition: all 0.25s ease;
}

.btn-premium-outline:hover {
    color: #67e8f9;
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5),
                -8px -8px 16px rgba(255, 255, 255, 0.04),
                inset 1px 1px 1px rgba(255, 255, 255, 0.06),
                0 0 20px rgba(34, 211, 238, 0.4);
}

.btn-premium-outline:active {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.5),
                inset -4px -4px 8px rgba(255, 255, 255, 0.03);
}

.btn-premium-trial {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #2a1f0e;
    color: #fbbf24;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.4),
                -6px -6px 12px rgba(255, 255, 255, 0.03),
                inset 1px 1px 1px rgba(255, 255, 255, 0.04);
    transition: all 0.25s ease;
}

.btn-premium-trial:hover {
    color: #f59e0b;
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5),
                -8px -8px 16px rgba(255, 255, 255, 0.04),
                inset 1px 1px 1px rgba(255, 255, 255, 0.06),
                0 0 20px rgba(251, 191, 36, 0.4);
}

.btn-premium-trial:active {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.5),
                inset -4px -4px 8px rgba(255, 255, 255, 0.03);
}

/* Right Showcase Cards */
.hero-premium-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.premium-showcase-card {
    position: relative;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 24px;
    transition: all 0.4s;
    overflow: hidden;
}

.premium-showcase-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.premium-showcase-card.bp-card::before {
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
}

.premium-showcase-card.jy-card::before {
    background: linear-gradient(90deg, transparent, #ffb84d, transparent);
}

.premium-showcase-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.premium-showcase-card:hover::before {
    opacity: 1;
}

.showcase-card-body {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.showcase-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.showcase-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.showcase-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(0,212,255,0.15);
    color: #00d4ff;
}

.jy-card .showcase-card-icon {
    background: rgba(255,184,77,0.15);
    color: #ffb84d;
}

.showcase-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.showcase-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.showcase-card-subtitle {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

.showcase-card-maps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.showcase-card-maps .map-tag {
    padding: 4px 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
    transition: all 0.2s;
}

.bp-card .map-tag:hover {
    background: rgba(0,212,255,0.15);
    border-color: rgba(0,212,255,0.4);
    color: #00d4ff;
}

.jy-card .map-tag:hover {
    background: rgba(255,184,77,0.15);
    border-color: rgba(255,184,77,0.4);
    color: #ffb84d;
}

.showcase-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00d4ff;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: auto;
    text-decoration: none;
    transition: all 0.2s;
}

.jy-card .showcase-card-link {
    color: #ffb84d;
}

.showcase-card-link:hover {
    opacity: 0.8;
}

.showcase-card-link svg {
    transition: transform 0.2s;
}

.showcase-card-link:hover svg {
    transform: translateX(3px);
}

/* Bottom Bar */
.hero-premium-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 24px 48px 40px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.premium-bottom-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    font-weight: 500;
}

.premium-bottom-item svg {
    color: #00d4ff;
}

.premium-bottom-divider {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.2);
}

/* Responsive: Premium Hero */
@media (max-width: 1024px) {
    .hero-premium-content {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: calc(var(--nav-height) + 16px) 24px 24px;
    }
    .hero-premium-title {
        font-size: 3rem;
    }
    .hero-premium-bottom {
        gap: 16px;
        padding: 16px 24px 32px;
        flex-wrap: wrap;
    }
    .premium-bottom-divider {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-premium-content {
        padding: calc(var(--nav-height) + 12px) 16px 20px;
    }
    .hero-premium-title {
        font-size: 2.4rem;
        letter-spacing: -1px;
    }
    .hero-premium-desc {
        font-size: 0.95rem;
    }
    .hero-premium-stats {
        gap: 12px 16px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .premium-stat-value {
        font-size: 1.5rem;
    }
    .showcase-card-body {
        flex-direction: column;
    }
    .premium-showcase-card .showcase-carousel {
        width: 100%;
        height: 160px;
    }
    .hero-premium-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-premium-primary,
    .btn-premium-outline,
    .btn-premium-trial {
        justify-content: center;
    }
    .hero-premium-bottom {
        gap: 12px;
        padding: 12px 16px 24px;
    }
    .premium-bottom-item {
        font-size: 0.8rem;
    }
}

/* 超小屏幕（≤480px）：标题加长后进一步缩放，避免换行 */
@media (max-width: 480px) {
    .hero-premium-content {
        padding: calc(var(--nav-height) + 8px) 14px 16px;
    }
    .hero-premium-title {
        font-size: 2rem;
        letter-spacing: -0.5px;
        gap: 2px;
    }
    .hero-premium-desc {
        font-size: 0.85rem;
        line-height: 1.55;
    }
    .premium-stat-value {
        font-size: 1.3rem;
    }
    .premium-stat-label {
        font-size: 0.7rem;
    }
}

/* 极小屏幕（≤360px）：iPhone SE 等老机型 */
@media (max-width: 360px) {
    .hero-premium-title {
        font-size: 1.7rem;
        letter-spacing: -0.3px;
    }
}

/* ============================================
   End Premium Hero
   ============================================ */

/* ============================================
   体验卡领取页面
   ============================================ */
.trial-receive-page {
    min-height: calc(100vh - var(--nav-height, 64px));
    padding: calc(var(--nav-height, 64px) + 40px) 20px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-primary);
    position: relative;
}

.trial-back-float {
    position: absolute;
    top: calc(var(--nav-height, 64px) + 16px);
    left: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: var(--card-shadow);
    transition: all 0.2s;
    z-index: 10;
}
.trial-back-float:hover {
    color: var(--accent-cyan);
    border-color: var(--border-glow-cyan);
    transform: translateX(-2px);
}

.trial-receive-container {
    width: 100%;
    max-width: 440px;
}

.trial-receive-hero {
    text-align: center;
    margin-bottom: 24px;
}
.trial-receive-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
}
.trial-receive-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}
.trial-receive-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.trial-receive-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--card-shadow);
}

.trial-form-group {
    margin-bottom: 20px;
}
.trial-form-group:last-of-type {
    margin-bottom: 0;
}
.trial-form-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.trial-version-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.trial-version-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--card-shadow);
}
.trial-version-card:hover {
    border-color: var(--border-glow-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateY(-1px);
}
.trial-version-card.selected {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    box-shadow: 0 0 0 1px var(--accent-cyan), var(--shadow-cyan);
}
.trial-version-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.trial-version-name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.trial-captcha-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.trial-input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}
.trial-input:focus {
    border-color: var(--accent-cyan);
}
.trial-input::placeholder {
    color: var(--text-muted);
}
.trial-captcha-img {
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    flex-shrink: 0;
}

.trial-submit-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent-cyan);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 20px;
    font-family: inherit;
}
.trial-submit-btn:hover:not(:disabled) {
    background: #0080aa;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 152, 199, 0.3);
}
.trial-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}
.trial-submit-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.trial-result {
    display: none;
    margin-top: 18px;
    padding: 18px;
    border-radius: var(--radius-md);
}
.trial-result-success {
    background: #f0f9eb;
    border: 1px solid #e1f3d8;
}
.trial-result-error {
    background: #fef0f0;
    border: 1px solid #fde2e2;
    color: #f56c6c;
    text-align: center;
}
.trial-success-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #67c23a;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}
.trial-success-text {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #67c23a;
    margin-bottom: 12px;
}
.trial-serial {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    letter-spacing: 1.5px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px dashed #67c23a;
    user-select: all;
    word-break: break-all;
    margin-bottom: 8px;
}
.trial-end-time {
    font-size: 13px;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 6px;
}
.trial-warn {
    font-size: 12px;
    text-align: center;
    color: #e6a23c;
}

.trial-tips {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.trial-tips p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.9;
    margin: 0;
}

@media (max-width: 480px) {
    .trial-receive-card {
        padding: 24px 18px;
    }
    .trial-receive-title {
        font-size: 20px;
    }
}

/* ============================================
   End 体验卡领取页面
   ============================================ */

.hero-dark {
    position: relative;
    min-height: 100vh;
    background: var(--bg-primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 80px 48px 40px;
}

.hero-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(0,152,199,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(232,149,10,0.04) 0%, transparent 60%);
    z-index: 0;
}

.hero-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 0;
}

.hero-dark-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.hero-dark-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-dark-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: var(--accent-cyan-dim);
    border: 1px solid var(--border-glow-cyan);
    border-radius: 20px;
    color: var(--accent-cyan);
    font-size: 12px;
    font-weight: 500;
    width: fit-content;
}

.hero-dark-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hero-dark-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
    color: var(--text-primary);
    margin: 4px 0;
}

.hero-dark-title .cyan {
    background: linear-gradient(135deg, #0098c7, #007aab);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-dark-title .amber {
    background: linear-gradient(135deg, #e8950a, #c97d08);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-dark-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 480px;
}

.hero-dark-subtitle strong {
    color: var(--text-primary);
}

.hero-dark-stats {
    display: flex;
    gap: 28px;
    padding: 14px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.hero-dark-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-dark-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
}

.hero-dark-stat-value.cyan { color: var(--accent-cyan); }
.hero-dark-stat-value.amber { color: var(--accent-amber); }

.hero-dark-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-dark-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-dark-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--gradient-cyan);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0,152,199,0.25);
}

.btn-dark-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0,152,199,0.4);
}

.btn-dark-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: var(--card-shadow);
}

.btn-dark-outline:hover {
    border-color: var(--border-glow-cyan);
    background: var(--bg-card-hover);
}

.btn-dark-trial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: var(--accent-amber-dim);
    color: var(--accent-amber);
    border: 1px solid var(--border-glow-amber);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-dark-trial:hover {
    background: var(--accent-amber-glow);
}

/* Diagonal Dual Carousel */
.hero-dark-carousel {
    position: relative;
    width: 100%;
    height: 440px;
}

/* Hero showcase: mode cards + mini carousel */
.hero-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-resolution-bar {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    width: fit-content;
}

.hero-resolution-bar .res-icon {
    font-size: 1.5rem;
}

.hero-resolution-bar .res-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-resolution-bar .res-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.hero-resolution-bar .res-value {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.showcase-mode {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: var(--card-shadow);
    transition: all 0.3s;
}

.showcase-mode:hover {
    transform: translateY(-2px);
    border-color: var(--border-glow-cyan);
}

.showcase-mode.jy-mode:hover {
    border-color: var(--border-glow-amber);
}

.showcase-mode .mode-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.showcase-mode .mode-icon {
    font-size: 1.2rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent-cyan-dim);
}

.showcase-mode.jy-mode .mode-icon {
    background: var(--accent-amber-dim);
}

.showcase-mode .mode-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.showcase-mode .mode-maps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.showcase-mode .map-chip {
    padding: 5px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.showcase-mode .map-chip:hover {
    background: var(--accent-cyan-dim);
    border-color: var(--border-glow-cyan);
    color: var(--accent-cyan);
}

.showcase-mode.jy-mode .map-chip:hover {
    background: var(--accent-amber-dim);
    border-color: var(--border-glow-amber);
    color: var(--accent-amber);
}

.hero-mini-carousel {
    position: relative;
    height: 220px;
    margin-top: 8px;
}

.hero-mini-carousel .diagonal-card {
    width: 55%;
}

.hero-mini-carousel .bp-card {
    top: 0;
    left: 0;
}

.hero-mini-carousel .jy-card {
    bottom: 0;
    right: 0;
}

.hero-mini-carousel .diagonal-card img {
    height: 160px;
}

.hero-bottom-bar {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 48px;
    padding: 14px 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    box-shadow: var(--card-shadow);
    z-index: 2;
}

.hero-bottom-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.hero-bottom-item .bottom-icon {
    font-size: 1.1rem;
}

.diagonal-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.diagonal-card {
    position: absolute;
    width: 58%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--card-shadow);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
}

.diagonal-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.diagonal-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.5s;
}

.diagonal-card:hover::after {
    opacity: 1;
}

.diagonal-card:hover {
    transform: scale(1.03);
}

/* BP版 - 左上 */
.diagonal-card.bp-card {
    top: 0;
    left: 0;
    z-index: 2;
    animation: diagonal-bp-pulse 4s ease-in-out infinite;
}

.diagonal-card.bp-card::after {
    background: linear-gradient(135deg, rgba(0,152,199,0.1), transparent 60%);
}

/* 经验版 - 右下 */
.diagonal-card.jy-card {
    bottom: 0;
    right: 0;
    z-index: 2;
    animation: diagonal-jy-pulse 4s ease-in-out infinite;
}

.diagonal-card.jy-card::after {
    background: linear-gradient(135deg, transparent 40%, rgba(232,149,10,0.1));
}

@keyframes diagonal-bp-pulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(0,152,199,0), var(--card-shadow);
        border-color: var(--border-glow-cyan);
    }
    50% {
        box-shadow: 0 0 30px rgba(0,152,199,0.15), var(--card-shadow);
        border-color: rgba(0,152,199,0.4);
    }
}

@keyframes diagonal-jy-pulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(232,149,10,0), var(--card-shadow);
        border-color: var(--border-glow-amber);
    }
    50% {
        box-shadow: 0 0 30px rgba(232,149,10,0.15), var(--card-shadow);
        border-color: rgba(232,149,10,0.4);
    }
}

.diagonal-card-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    z-index: 3;
    backdrop-filter: blur(8px);
}

.diagonal-card-label.bp {
    background: rgba(0,152,199,0.85);
}

.diagonal-card-label.jy {
    background: rgba(232,149,10,0.85);
}

/* Dark Features Section */
.features-dark {
    background: #0d1220;
    padding: 80px 48px;
    position: relative;
}

.features-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0,152,199,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,152,199,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.features-dark .section-header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
}

.features-dark .section-label {
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: #00d4ff;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.features-dark .section-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.features-dark .section-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.45);
}

.features-dark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.feature-dark-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 32px 28px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.feature-dark-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--fc, #00d4ff), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

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

/* ============================================
   暴力查询警告弹窗
   ============================================ */
.query-warning-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: queryWarningFadeIn 0.2s ease-out;
}

@keyframes queryWarningFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes queryWarningSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.query-warning-modal {
    background: #fff;
    border-radius: 12px;
    padding: 32px 28px 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: queryWarningSlideIn 0.3s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.query-warning-icon {
    color: #ef4444;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.query-warning-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.query-warning-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 24px;
}

.query-warning-retry {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: -8px 0 20px;
    padding: 10px 14px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
}

.query-warning-retry[hidden] {
    display: none;
}

.query-warning-retry strong {
    min-width: 58px;
    color: #dc2626;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 20px;
    line-height: 1;
}

.query-warning-btn {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 10px 32px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.query-warning-btn:hover {
    background: #dc2626;
}

.query-warning-btn:active {
    transform: scale(0.97);
}

@media (max-width: 480px) {
    .query-warning-modal {
        padding: 24px 20px 20px;
    }
    .query-warning-title {
        font-size: 18px;
    }
    .query-warning-desc {
        font-size: 13px;
    }
}


.feature-dark-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-4px);
}

.feature-dark-icon {
    font-size: 2rem;
    margin-bottom: 16px;
}

.feature-dark-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.feature-dark-desc {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.6;
}

/* Disclaimer Dark */
.disclaimer-dark {
    background: #0a0e17;
    padding: 60px 48px 80px;
}

.disclaimer-dark .disclaimer-box {
    max-width: 1000px;
    margin: 0 auto;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 36px;
}

.disclaimer-dark .disclaimer-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f5a623;
    margin-bottom: 20px;
}

.disclaimer-dark .disclaimer-content p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.8;
    margin-bottom: 16px;
}

.disclaimer-dark .disclaimer-content p strong {
    color: rgba(255,255,255,0.75);
}

/* ============================================
   Dark Product Detail Page
   ============================================ */

.product-detail-dark {
    position: relative;
    min-height: 100vh;
    background: var(--bg-primary);
    padding: 100px 48px 60px;
    overflow: hidden;
}

.product-detail-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(0,152,199,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(232,149,10,0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.product-detail-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 0;
}

.product-particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.product-detail-dark > .product-particles-canvas ~ .pd-dark-inner,
.pd-dark-inner {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
}

/* Algorithm Strategy */
.pd-strategy {
    margin-bottom: 48px;
}

/* Brief Description Bar */
.pd-brief-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}
.pd-brief {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 24px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pd-brief-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
}
.pd-brief.pd-theme-bp .pd-brief-icon {
    background: rgba(34,211,238,0.1);
    border-color: rgba(34,211,238,0.3);
}
.pd-brief.pd-theme-exp .pd-brief-icon {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.3);
}
.pd-brief-content {
    flex: 1;
    min-width: 0;
    counter-reset: brief-item;
}
.pd-brief-title {
    font-size: 17px;
    font-weight: 700;
    color: #000;
    margin-bottom: 6px;
}
.pd-brief.pd-theme-bp .pd-brief-title {
    color: #0891b2;
}
.pd-brief.pd-theme-exp .pd-brief-title {
    color: #d97706;
}
.pd-brief-text {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    line-height: 1.6;
    counter-increment: brief-item;
}
.pd-brief-text::before {
    content: counter(brief-item) ". ";
    color: #0891b2;
    font-weight: 700;
}
.pd-brief.pd-theme-exp .pd-brief-text::before {
    color: #d97706;
}
.pd-brief-text.pd-brief-sub {
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 600;
    margin-top: 4px;
}

.pd-strategy .pd-section-head {
    margin-bottom: 16px;
}

.pd-strategy-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
}

.pd-strategy-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s;
    box-shadow: var(--card-shadow);
}

.pd-strategy-step:hover {
    transform: translateY(-2px);
    border-color: var(--border-glow-cyan);
    background: var(--bg-card-hover);
}

.pd-theme-jy .pd-strategy-step:hover {
    border-color: rgba(245, 158, 11, 0.3);
}

.pd-strategy-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.pd-strategy-text {
    flex: 1;
    min-width: 0;
}

.pd-strategy-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pd-strategy-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.pd-strategy-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: var(--text-tertiary);
    font-size: 1.2rem;
    font-weight: 300;
    user-select: none;
}

@media (max-width: 768px) {
    .pd-strategy-flow {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .pd-strategy-arrow {
        transform: rotate(90deg);
        padding: 2px 0;
        justify-self: center;
    }
    .pd-strategy-step {
        padding: 14px 16px;
    }
}

/* Version Tabs — Compact Segmented Control */
.pd-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.pd-tabs-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.03);
}

.pd-tab {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 22px;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    cursor: pointer;
}

.pd-tab:hover {
    color: rgba(255, 255, 255, 0.65);
}

.pd-tab.is-active {
    color: #fff;
}

.pd-tab-icon {
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.pd-tab.is-active .pd-tab-icon {
    transform: scale(1.1);
}

.pd-tab-text {
    letter-spacing: 0.2px;
}

.pd-tabs-thumb {
    position: absolute;
    top: 3px;
    left: 0;
    height: calc(100% - 6px);
    border-radius: 7px;
    z-index: 1;
    transition: none;
    pointer-events: none;
    opacity: 0;
}

.pd-tabs-thumb.is-ready {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-tabs-thumb[data-theme="cyan"] {
    background: #0098c7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.pd-tabs-thumb[data-theme="amber"] {
    background: #d97f0a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .pd-tabs-thumb.is-ready,
    .pd-tab-icon {
        transition: none;
    }
}

.pd-tabs-hint {
    margin: 10px 0 32px;
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
    opacity: 0.7;
    letter-spacing: 0.2px;
}

/* Product Carousel in Product Page */
.pd-carousel-section {
    margin-bottom: 48px;
}

.pd-screenshots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.pd-screenshot-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: all 0.3s;
}

.pd-screenshot-item:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow-cyan);
    box-shadow: 0 8px 24px rgba(0,152,199,0.12);
}

.pd-screenshot-item img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    display: block;
    transition: transform 0.5s;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    padding: 8px;
    box-sizing: border-box;
}

.pd-screenshot-item:hover img {
    transform: scale(1.03);
}

.pd-screenshot-num {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.premium-showcase-card .showcase-carousel {
    width: 42%;
    min-width: 160px;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    flex-shrink: 0;
}

.showcase-carousel {
    position: relative;
    width: 100%;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    margin: 10px 0 12px;
    flex-shrink: 0;
}

.sc-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.sc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 1;
}

.sc-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.sc-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.sc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.2s;
    z-index: 5;
    padding: 0;
}

.sc-nav:hover {
    background: rgba(0,0,0,0.8);
}

.sc-prev { left: 8px; }
.sc-next { right: 8px; }

.sc-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 5;
}

.sc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: all 0.2s;
}

.sc-dot.active {
    background: #fff;
    width: 16px;
    border-radius: 3px;
}

@media (max-width: 768px) {
    .showcase-carousel {
        height: 130px;
    }
}

@media (max-width: 768px) {
    .pd-screenshots-grid {
        grid-template-columns: 1fr;
    }
    .pd-screenshot-item img {
        max-height: 280px;
    }
}

/* Screenshot Lightbox */
.screenshot-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    animation: lightbox-fade-in 0.25s ease;
}

@keyframes lightbox-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.screenshot-lightbox-inner {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.screenshot-lightbox-inner img {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.screenshot-lightbox-inner video {
    display: block;
    width: min(90vw, 1280px);
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    background: #050505;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.screenshot-lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #333;
    border: none;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.screenshot-lightbox-close:hover {
    background: #f5f5f5;
}

.pd-carousel-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.pd-carousel-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* 产品页区块标题（实机画面/功能特性/选择套餐） */
.pd-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.pd-section-bar {
    width: 4px;
    height: 38px;
    border-radius: 2px;
    flex-shrink: 0;
}

.pd-theme-bp .pd-section-bar {
    background: linear-gradient(180deg, #06b6d4, #0891b2);
    box-shadow: 0 0 14px rgba(8, 145, 178, 0.35);
}

.pd-theme-jy .pd-section-bar {
    background: linear-gradient(180deg, #f59e0b, #d97706);
    box-shadow: 0 0 14px rgba(217, 119, 6, 0.35);
}

.pd-section-head-text {
    flex: 1;
    min-width: 0;
}

.pd-section-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.pd-section-num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.12;
    flex-shrink: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    letter-spacing: -1px;
}

.pd-theme-bp .pd-section-num {
    color: #0891b2;
}

.pd-theme-jy .pd-section-num {
    color: #d97706;
}

@media (max-width: 480px) {
    .pd-section-head {
        gap: 10px;
        margin-bottom: 18px;
        padding-bottom: 12px;
    }
    .pd-section-bar {
        height: 32px;
    }
    .pd-section-num {
        font-size: 1.6rem;
    }
    .pd-carousel-title,
    .pd-features-title,
    .pd-pricing-title {
        font-size: 1.25rem;
    }
}

.pd-carousel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pd-carousel-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--card-shadow);
    transition: all 0.4s;
    cursor: pointer;
    text-decoration: none;
}

.pd-carousel-card:hover {
    transform: translateY(-4px);
}

.pd-carousel-card.active-card {
    border-width: 2px;
}

.pd-carousel-card.active-card.cyan-border {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 30px rgba(0,152,199,0.12), var(--card-shadow);
}

.pd-carousel-card.active-card.amber-border {
    border-color: var(--accent-amber);
    box-shadow: 0 0 30px rgba(232,149,10,0.12), var(--card-shadow);
}

.pd-carousel-card.inactive-card {
    opacity: 0.6;
}

.pd-carousel-card.inactive-card:hover {
    opacity: 0.85;
}

.pd-carousel-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.pd-carousel-card-info {
    padding: 20px;
    background: var(--bg-card);
}

.pd-carousel-card-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.pd-carousel-card-badge.cyan { background: var(--accent-cyan); }
.pd-carousel-card-badge.amber { background: var(--accent-amber); }

.pd-carousel-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pd-carousel-card-hint {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--accent-cyan);
    font-weight: 600;
}

/* Features List Dark */
.pd-features-dark {
    margin-bottom: 48px;
}

.pd-features-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.pd-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.pd-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s;
    box-shadow: var(--card-shadow);
}

.pd-feature-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-glow-cyan);
}

.pd-feature-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.pd-feature-text h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pd-feature-text p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Pricing Dark */
.pd-pricing-dark {
    margin-bottom: 48px;
}

.pd-pricing-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.pd-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.pd-pricing-card {
    padding: 28px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--card-shadow);
}

.pd-pricing-card:hover {
    background: var(--bg-card-hover);
}

.pd-pricing-card.selected {
    border-width: 2px;
}

.pd-pricing-card.selected.cyan-selected {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    box-shadow: 0 0 30px rgba(0,152,199,0.12);
}

.pd-pricing-card.selected.amber-selected {
    border-color: var(--accent-amber);
    background: var(--accent-amber-dim);
    box-shadow: 0 0 30px rgba(232,149,10,0.12);
}

.pd-pricing-duration {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
}

.pd-pricing-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pd-pricing-unit {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.btn-dark-buy {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 16px 40px;
    background: var(--gradient-cyan);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0,152,199,0.25);
}

.btn-dark-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0,152,199,0.4);
}

/* Responsive: Dark Theme */
@media (max-width: 1024px) {
    .hero-dark {
        padding: 70px 24px 80px;
    }
    .hero-dark-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .hero-dark-carousel {
        height: 360px;
    }
    .hero-dark-title {
        font-size: 2.4rem;
    }
    .hero-bottom-bar {
        gap: 24px;
        padding: 12px 28px;
    }
    .hero-mini-carousel {
        height: 260px;
    }
    .hero-mini-carousel .diagonal-card img {
        height: 200px;
    }
    .pd-carousel-row {
        grid-template-columns: 1fr;
    }
    .pd-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-dark {
        padding: 70px 16px 100px;
        min-height: auto;
    }
    .hero-dark-title {
        font-size: 2rem;
    }
    .hero-dark-stats {
        gap: 20px;
        flex-wrap: wrap;
    }
    .hero-dark-stat-value {
        font-size: 1.3rem;
    }
    .hero-dark-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-dark-carousel {
        height: 300px;
    }
    .diagonal-card {
        width: 65%;
    }
    .hero-bottom-bar {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 24px;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .hero-bottom-item {
        font-size: 0.8rem;
    }
    .hero-mini-carousel {
        height: 220px;
    }
    .hero-mini-carousel .diagonal-card img {
        height: 160px;
    }
    .product-detail-dark {
        padding: 80px 16px 40px;
    }
    .pd-features-grid {
        grid-template-columns: 1fr;
    }
    .pd-pricing-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   新产品页样式 (np- = new product)
   打破上下堆叠，左右分栏 + bento 网格
   ============================================ */

/* 隐藏旧产品页组件 */
.pd-brief-list,
.pd-tabs,
.pd-tabs-hint,
.pd-strategy,
.pd-carousel-section,
.pd-features-dark,
.pd-pricing-dark {
    display: none !important;
}

/* Tab 切换 - 紧凑横排 */
.np-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 7px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--card-shadow);
}
.np-tabs-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 0 24px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.np-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}
.np-tab.is-active[data-theme="cyan"] {
    background: var(--gradient-cyan);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 152, 199, 0.3);
}
.np-tab.is-active[data-theme="amber"] {
    background: var(--gradient-amber);
    color: #fff;
    box-shadow: 0 4px 14px rgba(232, 149, 10, 0.3);
}
.np-tab-icon {
    font-size: 18px;
}

/* Hero 区 - 左右分栏 */
.np-hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 64px;
    padding: 8px 0 24px;
}
.np-hero-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 标题行：图标 + 名称 + 英文副标题 */
.np-hero-head {
    display: flex;
    align-items: center;
    gap: 16px;
}
.np-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
    background: var(--bg-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.np-theme-cyan .np-hero-icon {
    background: var(--accent-cyan-dim);
}
.np-theme-amber .np-hero-icon {
    background: var(--accent-amber-dim);
}
.np-hero-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.np-hero-version {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}
.np-theme-cyan .np-hero-version {
    color: var(--accent-cyan);
}
.np-theme-amber .np-hero-version {
    color: var(--accent-amber);
}
.np-hero-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* 一句话描述 */
.np-hero-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    font-weight: 500;
}

/* 核心收益编号清单 */
.np-hero-gains {
    width: 100%;
}
.np-hero-gains-head {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 2px 7px;
}
.np-hero-gains-head h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
}
.np-hero-gains-head span {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
}
.np-hero-stats {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}
.np-hero-stat {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--border-color);
    transition: padding 0.2s ease, background-color 0.2s ease;
}
.np-hero-stat:hover {
    padding-right: 6px;
    padding-left: 6px;
    background: rgba(15, 23, 42, 0.025);
}
.np-hero-stat-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1.02rem;
    font-weight: 800;
}
.np-theme-cyan .np-hero-stat-index {
    color: var(--accent-cyan);
}
.np-theme-amber .np-hero-stat-index {
    color: var(--accent-amber);
}
.np-hero-stat-body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
    line-height: 1.35;
}
.np-hero-stat-title {
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 700;
}
.np-hero-stat-colon {
    margin: 0 3px;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.np-hero-stat-value {
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.np-theme-cyan .np-hero-stat-value {
    color: var(--accent-cyan);
}
.np-theme-amber .np-hero-stat-value {
    color: var(--accent-amber);
}
.np-hero-stat-suffix {
    margin-left: 3px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}
.np-hero-stat-value.is-emphasis {
    color: #dc2626;
}
@media (min-width: 1180px) {
    .np-hero-gains-head {
        padding-bottom: 10px;
    }
    .np-hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        border-top: 0;
    }
    .np-hero-stat {
        min-height: 52px;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.56);
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .np-hero-stat:hover {
        padding: 10px 12px;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
    }
    .np-theme-cyan .np-hero-stat.is-key {
        border-color: rgba(0, 152, 199, 0.3);
        background: rgba(0, 152, 199, 0.065);
    }
    .np-theme-amber .np-hero-stat.is-key {
        border-color: rgba(232, 149, 10, 0.32);
        background: rgba(232, 149, 10, 0.07);
    }
    .np-hero-stat.is-key .np-hero-stat-value {
        margin-left: auto;
    }
    .np-hero-stat:not(.is-key):not([aria-label="更多收益"]) {
        grid-template-columns: 34px minmax(0, 1fr) 24px;
    }
    .np-hero-stat:not(.is-key):not([aria-label="更多收益"])::after {
        content: "✓";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        color: var(--text-muted);
        font-size: 0.72rem;
        font-weight: 800;
    }
    .np-hero-stat[aria-label="更多收益"] {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        min-height: 30px;
        padding: 2px 12px;
        border: 0;
        background: transparent;
    }
    .np-hero-stat[aria-label="更多收益"]:hover {
        padding: 2px 12px;
        transform: none;
        box-shadow: none;
    }
    .np-hero-stat[aria-label="更多收益"] .np-hero-stat-index {
        display: none;
    }
    .np-hero-stat[aria-label="更多收益"] .np-hero-stat-body {
        justify-content: center;
    }
    .np-hero-stat[aria-label="更多收益"] .np-hero-stat-title {
        color: var(--text-muted);
        font-size: 1rem;
    }
}
@media (max-width: 420px) {
    .np-hero-stat {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
    }
    .np-hero-stat-index {
        width: 26px;
        height: 26px;
        font-size: 0.96rem;
    }
    .np-hero-stat-title {
        font-size: 0.9rem;
    }
    .np-hero-stat-value {
        font-size: 1.02rem;
    }
}

/* MingTong DG tutorial */
.radar-guide {
    min-height: 100vh;
    background: #eef1f3;
    color: #15191e;
}

.radar-guide-hero {
    min-height: 390px;
    padding: 74px max(32px, calc((100% - 1180px) / 2));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    background: #101419;
    border-bottom: 5px solid #e6a228;
    color: #fff;
}

.radar-guide-hero-copy {
    max-width: 760px;
}

.radar-guide-kicker,
.radar-guide-section-head span,
.radar-guide-shot-bar,
.radar-guide-finish > span {
    letter-spacing: 0;
    font-size: .72rem;
    font-weight: 800;
}

.radar-guide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f2ba54;
}

.radar-guide-kicker i {
    width: 28px;
    height: 2px;
    background: #2cc5dd;
}

.radar-guide-hero h1 {
    margin: 18px 0 14px;
    font-size: 3.35rem;
    line-height: 1.08;
    letter-spacing: 0;
}

.radar-guide-hero h1 em {
    color: #f2ba54;
    font-style: normal;
}

.radar-guide-hero-copy > p {
    color: #b9c0c8;
    font-size: 1rem;
}

.radar-guide-download {
    width: fit-content;
    margin-top: 25px;
    padding: 13px 17px;
    display: inline-flex;
    align-items: center;
    gap: 24px;
    border: 1px solid #f2ba54;
    border-radius: 5px;
    background: #f2ba54;
    color: #15191e;
    font-weight: 800;
    transition: transform .2s ease, background .2s ease;
}

.radar-guide-download:hover {
    transform: translateY(-2px);
    background: #ffd178;
}

.radar-guide-hero-index {
    min-width: 150px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #434a52;
}

.radar-guide-hero-index span,
.radar-guide-hero-index small {
    color: #8c969f;
    font-size: .7rem;
    font-weight: 700;
}

.radar-guide-hero-index strong {
    margin: 5px 0;
    color: #2cc5dd;
    font-size: 4.2rem;
    line-height: 1;
}

.radar-guide-section,
.radar-guide-compatibility,
.radar-guide-finish {
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
}

.radar-guide-section {
    padding: 66px 0;
}

.radar-guide-section.radar-guide-setup {
    padding-top: 9px;
    padding-bottom: 34px;
}

.radar-guide-section + .radar-guide-section {
    border-top: 1px solid #cdd3d8;
}

.radar-guide-section-head {
    margin-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.radar-guide-section-head span {
    color: #267d8a;
}

.radar-guide-section-head h2 {
    margin-top: 4px;
    font-size: 2rem;
    line-height: 1.2;
}

.radar-guide-section-head > p {
    max-width: 420px;
    color: #667079;
    font-size: .88rem;
    text-align: right;
}

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

.radar-guide-feature-grid article {
    min-height: 148px;
    padding: 23px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid #d3d8dc;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(22, 29, 35, .05);
}

.radar-guide-feature-grid article > b {
    color: #d08a13;
    font-size: .75rem;
}

.radar-guide-feature-grid h3 {
    margin-bottom: 7px;
    font-size: 1.05rem;
}

.radar-guide-feature-grid p {
    color: #626b74;
    font-size: .82rem;
    line-height: 1.65;
}

.radar-guide-feature-grid article > span {
    position: absolute;
    right: 15px;
    bottom: 8px;
    color: #e4e7e9;
    font-size: 1.3rem;
    font-weight: 900;
}

.radar-guide-setup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
    column-gap: 42px;
}

.radar-guide-setup-copy {
    grid-column: 1;
    min-width: 0;
}

.radar-guide-setup-body {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
    column-gap: 42px;
    align-items: stretch;
}

.radar-guide-shot-slot {
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.radar-guide-shot-slot > .radar-guide-shot {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
}

.radar-guide-shot-slot > .radar-stable-uptime--guide {
    width: 100%;
    margin: 0;
    padding: 13px 15px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    border: 1px solid #c7d9d5;
    border-left: 3px solid #3e9d8a;
    border-radius: 6px;
    background: #f8fbfa;
    color: #173c3a;
    box-shadow: 0 6px 16px rgba(22, 29, 35, .06);
    flex: 0 0 auto;
}

.radar-guide-shot-slot > .radar-stable-uptime--guide .radar-stable-uptime-copy strong {
    color: #173c3a;
    font-size: 14px;
}

.radar-guide-shot-slot > .radar-stable-uptime--guide .radar-stable-uptime-value b {
    color: #258b78;
    font-size: 1.28rem;
}

.radar-guide-shot-slot > .radar-stable-uptime--guide .radar-stable-uptime-value span {
    color: #5f7474;
}

.radar-guide-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.radar-guide-steps-panel {
    min-width: 0;
}

.radar-guide-warm-tips {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #d8c79d;
    border-left: 3px solid #c58318;
    background: #fffaf0;
    color: #4f4a40;
}

.radar-guide-warm-tips > strong {
    display: block;
    margin-bottom: 7px;
    color: #9a6815;
    font-size: .8rem;
}

.radar-guide-warm-tips ol {
    margin: 0;
    padding-left: 20px;
}

.radar-guide-warm-tips li {
    padding: 0;
    border: 0;
    display: list-item;
    color: #5e6871;
    font-size: .78rem;
    line-height: 1.65;
}

.radar-guide-steps li {
    padding: 20px 0;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;
    border-top: 1px solid #cbd2d7;
}

.radar-guide-steps li:last-child {
    border-bottom: 1px solid #cbd2d7;
}

.radar-guide-steps li > b {
    color: #c58318;
    font-size: .82rem;
}

.radar-guide-steps h3 {
    margin-bottom: 5px;
    font-size: 1rem;
}

.radar-guide-steps p {
    color: #5e6871;
    font-size: .84rem;
    line-height: 1.65;
}

.radar-guide-steps a {
    max-width: 100%;
    margin-top: 7px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #217a87;
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.radar-guide-pin-tip {
    margin-top: 12px;
    padding: 11px 13px;
    border-left: 3px solid #267d8a;
    background: #e3ecef;
}

.radar-guide-pin-tip p {
    color: #45535b;
    font-size: .78rem;
    line-height: 1.65;
}

.radar-guide-pin-tip a {
    margin: 0;
    display: inline;
    color: #176b78;
    font-size: inherit;
    font-weight: 700;
}

.radar-guide-pin-tip b {
    color: #a96500;
    font-weight: 900;
}

.radar-guide-shot {
    margin: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid #bbc3c9;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(22, 29, 35, .11);
}

.radar-guide-shot-bar {
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #171c21;
    color: #c7ced4;
}

.radar-guide-shot-bar span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.radar-guide-shot-bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #39bd78;
}

.radar-guide-shot-bar b {
    color: #f2ba54;
}

.radar-guide-shot button {
    width: 100%;
    min-height: 0;
    padding: 0;
    flex: 1 1 auto;
    display: block;
    overflow: hidden;
    background: #eaf1f7;
}

.radar-guide-shot img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

.radar-guide-shot figcaption {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px solid #d7dde1;
}

.radar-guide-shot figcaption strong {
    font-size: .9rem;
}

.radar-guide-shot figcaption span {
    color: #69727a;
    font-size: .76rem;
}

.radar-guide-compatibility {
    margin-bottom: 14px;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid #e2bd75;
    border-left: 4px solid #c94b3f;
    background: #fff9ed;
    box-shadow: 0 6px 18px rgba(52, 42, 25, .06);
}

.radar-guide-compatibility-copy {
    min-width: 0;
}

.radar-guide-compatibility-copy span {
    display: block;
    margin-bottom: 4px;
    color: #9d3f37;
    font-size: .72rem;
    font-weight: 800;
}

.radar-guide-compatibility-copy p {
    color: #4d453a;
    font-size: .9rem;
    line-height: 1.6;
}

.radar-guide-compatibility > a {
    min-height: 52px;
    padding: 6px;
    padding-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    border: 1px solid #8ab483;
    border-radius: 6px;
    background: #217a87;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(34, 83, 44, .16), inset 3px 0 0 #a7db9d;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.radar-guide-compatibility > a b {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .14);
    font-size: .68rem;
}

.radar-guide-compatibility > a.radar-guide-support-group {
    background: #315f39;
}

.radar-guide-compatibility > a.radar-guide-support-group i {
    width: 30px;
    height: 30px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    font-size: 1rem;
    font-style: normal;
    transition: transform .2s ease;
}

.radar-guide-compatibility > a.radar-guide-support-group:hover {
    border-color: #b9e0b2;
    background: #254e2d;
    color: #fff;
    box-shadow: 0 11px 24px rgba(34, 83, 44, .24), inset 3px 0 0 #c3ecba;
    transform: translateY(-2px);
}

.radar-guide-compatibility > a.radar-guide-support-group:hover i {
    transform: translate(2px, -2px);
}

.radar-guide-compatibility > a:active {
    transform: translateY(0);
}

.radar-guide-compatibility > a:focus-visible {
    outline: 3px solid rgba(49, 95, 57, .24);
    outline-offset: 3px;
}

.radar-guide-finish {
    margin-bottom: 70px;
    padding: 24px 26px;
    display: grid;
    grid-template-columns: 145px 1fr auto;
    gap: 24px;
    align-items: center;
    border-left: 4px solid #2ab5cb;
    background: #171c21;
    color: #fff;
}

.radar-guide-finish > span {
    color: #f2ba54;
}

.radar-guide-finish strong {
    font-size: 1rem;
}

.radar-guide-finish p {
    color: #9ea7af;
    font-size: .8rem;
}

.radar-guide-finish a {
    min-height: 46px;
    padding: 6px 6px 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #f2ba54;
    border-radius: 6px;
    background: #f2ba54;
    color: #171c21;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-decoration: none;
    box-shadow: 0 9px 20px rgba(0, 0, 0, .22);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.radar-guide-finish a b {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(23, 28, 33, .12);
    font-size: 1rem;
    transition: transform .2s ease;
}

.radar-guide-finish a:hover {
    border-color: #ffd27a;
    background: #ffd27a;
    color: #171c21;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .28);
    transform: translateY(-2px);
}

.radar-guide-finish a:hover b {
    transform: translateX(2px);
}

.radar-guide-finish a:active {
    transform: translateY(0);
}

.radar-guide-finish a:focus-visible {
    outline: 3px solid rgba(242, 186, 84, .34);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .radar-guide-hero,
    .radar-guide-section,
    .radar-guide-finish {
        padding-right: 22px;
        padding-left: 22px;
    }

    .radar-guide-setup-layout {
        grid-template-columns: 1fr;
    }

    .radar-guide-setup-copy,
    .radar-guide-setup-body {
        grid-column: 1;
    }

    .radar-guide-setup-body {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    .radar-guide-shot-slot {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .radar-guide-shot {
        position: static;
        max-width: 560px;
    }

    .radar-guide-shot button {
        flex: none;
    }

    .radar-guide-shot img {
        height: auto;
        object-fit: initial;
    }

    .radar-guide-status-panel {
        min-height: 360px;
    }
}

@media (max-width: 680px) {
    .radar-guide-hero {
        min-height: 340px;
        padding-top: 48px;
        padding-bottom: 42px;
        align-items: flex-start;
        flex-direction: column;
        gap: 34px;
    }

    .radar-guide-hero h1 {
        font-size: 2.35rem;
    }

    .radar-guide-hero-index {
        min-width: 0;
        width: 100%;
        padding: 14px 0 0;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        border-top: 1px solid #434a52;
        border-left: 0;
    }

    .radar-guide-hero-index strong {
        grid-row: 1 / span 2;
        grid-column: 2;
        font-size: 3rem;
    }

    .radar-guide-section {
        padding: 48px 16px;
    }

    .radar-guide-section.radar-guide-setup {
        padding-bottom: 24px;
    }

    .radar-guide-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .radar-guide-section-head h2 {
        font-size: 1.65rem;
    }

    .radar-guide-section-head > p {
        text-align: left;
    }

    .radar-guide-feature-grid {
        grid-template-columns: 1fr;
    }

    .radar-guide-feature-grid article {
        min-height: 120px;
    }

    .radar-guide-steps li {
        grid-template-columns: 38px 1fr;
        gap: 8px;
    }

    .radar-guide-finish {
        margin: 0 16px 44px;
        padding: 22px;
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .radar-guide-finish a {
        width: fit-content;
    }

    .radar-guide-compatibility {
        margin: 0 16px 14px;
        padding: 18px;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .radar-guide-compatibility > a {
        width: 100%;
        justify-content: center;
    }
}

/* Mingtong DG radar home */
.radar-dg-home {
    --radar-ink: #12171d;
    --radar-paper: #f2f3f3;
    --radar-line: #cfd5d9;
    --radar-red: #c83a31;
    --radar-cyan: #168ca2;
    --radar-green: #75b86a;
    overflow: hidden;
    background: var(--radar-paper);
    color: var(--radar-ink);
    letter-spacing: 0;
}

.radar-dg-home *,
.radar-dg-home *::before,
.radar-dg-home *::after {
    box-sizing: border-box;
    letter-spacing: 0;
}

/* Stable service timer shared by the radar home and tutorial pages. */
.radar-stable-uptime {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    color: #eef5f6;
}

.radar-stable-uptime--compact {
    width: 100%;
    padding: 17px max(24px, calc((100% - 1240px) / 2));
    border-top: 1px solid #2d3a42;
    border-bottom: 1px solid #2d3a42;
    background: #182127;
}

.radar-stable-uptime--guide {
    width: min(1180px, calc(100% - 48px));
    margin: 28px auto 0;
    padding: 18px 22px;
    border: 1px solid #cbd6d9;
    border-left: 4px solid #c83a31;
    background: #fff;
    color: #172128;
    box-shadow: 0 8px 22px rgba(22, 29, 35, .07);
}

.radar-stable-uptime-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(117, 184, 106, .45);
    border-radius: 4px;
    background: rgba(117, 184, 106, .1);
    color: #91d487;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

.radar-stable-uptime--guide .radar-stable-uptime-mark {
    border-color: #b9d5b0;
    background: #f1f8ef;
    color: #3f6e38;
}

.radar-stable-uptime-mark i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #75b86a;
    box-shadow: 0 0 0 4px rgba(117, 184, 106, .16);
}

.radar-stable-uptime-copy {
    min-width: 0;
}

.radar-stable-uptime-copy span,
.radar-stable-uptime-copy strong,
.radar-stable-uptime-copy small {
    display: block;
}

.radar-stable-uptime-copy span {
    color: #90a2aa;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.radar-stable-uptime-copy strong {
    margin-top: 3px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.radar-stable-uptime-copy small {
    margin-top: 3px;
    color: #92a2aa;
    font-size: 11px;
    line-height: 1.4;
}

.radar-stable-uptime--guide .radar-stable-uptime-copy span {
    color: #77858c;
}

.radar-stable-uptime--guide .radar-stable-uptime-copy strong {
    color: #172128;
}

.radar-stable-uptime--guide .radar-stable-uptime-copy small {
    color: #65737a;
}

.radar-stable-uptime-value {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.radar-stable-uptime-value b {
    min-width: 2ch;
    color: #ff786e;
    font-family: "Courier New", monospace;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    text-align: right;
}

.radar-stable-uptime-value b:first-child {
    min-width: 3ch;
}

.radar-stable-uptime-value span {
    color: #9baab0;
    font-size: 11px;
    font-weight: 800;
}

.radar-stable-uptime--guide .radar-stable-uptime-value b {
    color: #c83a31;
}

.radar-stable-uptime--guide .radar-stable-uptime-value span {
    color: #68767c;
}

.radar-dg-inner {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}

.radar-dg-hero {
    position: relative;
    height: calc(100svh - var(--nav-height) - 52px);
    min-height: 620px;
    max-height: 760px;
    overflow: hidden;
    background: #0a0e12;
    color: #fff;
}

.radar-dg-hero-media,
.radar-dg-hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.radar-dg-hero-media {
    object-fit: cover;
    object-position: center;
    filter: saturate(.78) contrast(1.08);
    will-change: transform;
}

.radar-dg-hero-shade {
    background: rgba(5, 9, 13, .58);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -150px 150px rgba(4, 7, 10, .28);
}

.radar-dg-hero-copy {
    position: absolute;
    z-index: 2;
    top: 48%;
    right: max(5vw, 42px);
    width: min(590px, 46vw);
    transform: translateY(-50%);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .72);
}

.radar-dg-eyebrow,
.radar-dg-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d9e3e8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.radar-dg-eyebrow i {
    width: 34px;
    height: 2px;
    background: var(--radar-red);
}

.radar-dg-hero h1 {
    margin: 18px 0 0;
    color: #fff;
    font-size: 4.15rem;
    font-weight: 950;
    line-height: 1.02;
}

.radar-dg-slogan {
    margin: 10px 0 0;
    color: #ff6258;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.25;
}

.radar-dg-lead {
    max-width: 560px;
    margin: 22px 0 0;
    color: #eef3f5;
    font-size: 15px;
    line-height: 1.85;
}

.radar-dg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.radar-dg-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 156px;
    min-height: 54px;
    padding: 7px 7px 7px 18px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.radar-dg-button b {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .12);
    font-size: 18px;
    font-weight: 700;
    transition: background-color .2s ease, transform .2s ease;
}

.radar-dg-button.is-primary {
    border-color: #d94940;
    background: var(--radar-red);
    color: #fff;
    box-shadow: 0 11px 25px rgba(145, 27, 22, .32), inset 3px 0 0 #ff746b;
}

.radar-dg-button.is-primary:hover {
    border-color: #f15c52;
    background: #ad2e27;
    color: #fff;
    box-shadow: 0 14px 30px rgba(145, 27, 22, .4), inset 3px 0 0 #ff8a82;
    transform: translateY(-2px);
}

.radar-dg-button.is-secondary {
    border-color: rgba(255, 255, 255, .42);
    background: rgba(12, 17, 22, .52);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25), inset 3px 0 0 rgba(255, 255, 255, .5);
}

.radar-dg-button.is-secondary:hover {
    border-color: #fff;
    background: rgba(12, 17, 22, .78);
    color: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .34), inset 3px 0 0 #fff;
    transform: translateY(-2px);
}

.radar-dg-button.is-support-group {
    border-color: rgba(117, 184, 106, .78);
    background: rgba(20, 48, 33, .78);
    color: #d6f2d0;
    box-shadow: 0 10px 24px rgba(5, 26, 14, .3), inset 3px 0 0 #8fd083;
}

.radar-dg-button.is-support-group:hover {
    border-color: #9bd28f;
    background: rgba(29, 69, 45, .92);
    color: #fff;
    box-shadow: 0 14px 30px rgba(5, 26, 14, .4), inset 3px 0 0 #b5e5ab;
    transform: translateY(-2px);
}

.radar-dg-button:hover b {
    background: rgba(255, 255, 255, .2);
    transform: translateX(2px);
}

.radar-dg-button[data-radar-scroll]:hover b {
    transform: translateY(2px);
}

.radar-dg-button:active {
    box-shadow: none;
    transform: translateY(0);
}

.radar-dg-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .38);
    outline-offset: 3px;
}

.radar-dg-english {
    display: block;
    margin-top: 20px;
    color: rgba(255, 255, 255, .62);
    font-family: "Courier New", monospace;
    font-size: 11px;
}

.radar-dg-hero-signal {
    position: absolute;
    z-index: 2;
    left: 28px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 4px;
    background: rgba(8, 12, 16, .72);
    color: #cbd7dc;
    font-family: "Courier New", monospace;
    font-size: 10px;
}

.radar-dg-hero-signal span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.radar-dg-hero-signal i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--radar-green);
    box-shadow: 0 0 0 4px rgba(117, 184, 106, .14);
}

.radar-dg-hero-signal strong {
    color: #92d889;
    font-size: 10px;
}

.radar-dg-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 112px;
    border-bottom: 1px solid #2c353d;
    background: #11171d;
    color: #fff;
}

.radar-dg-facts > div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 20px 34px;
    border-right: 1px solid #303a43;
}

.radar-dg-facts > div:last-child {
    border-right: 0;
}

.radar-dg-facts strong,
.radar-dg-facts span {
    display: block;
}

.radar-dg-facts strong {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 900;
}

.radar-dg-facts > div:nth-child(1) strong,
.radar-dg-facts > div:nth-child(4) strong {
    color: #ef5b51;
}

.radar-dg-facts > div:nth-child(2) strong {
    color: #5bc1d2;
}

.radar-dg-facts > div:nth-child(3) strong {
    color: #91d487;
}

.radar-dg-facts span {
    margin-top: 6px;
    color: #8f9ba5;
    font-size: 12px;
}

.radar-dg-section {
    padding: 92px 0;
    background: var(--radar-paper);
}

.radar-dg-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: end;
    gap: 40px;
    margin-bottom: 30px;
}

.radar-dg-section-head span,
.radar-dg-kicker {
    color: var(--radar-red);
    font-size: 11px;
    font-weight: 900;
}

.radar-dg-section-head h2,
.radar-dg-live-copy h2,
.radar-dg-poster-copy h2 {
    margin: 8px 0 0;
    color: var(--radar-ink);
    font-size: 2.15rem;
    font-weight: 950;
    line-height: 1.2;
}

.radar-dg-section-head > p {
    margin: 0;
    color: #68737b;
    font-size: 13px;
    line-height: 1.75;
    text-align: right;
}

.radar-dg-mode-board {
    overflow: hidden;
    border: 1px solid #303840;
    border-radius: 6px;
    background: #171c22;
    color: #fff;
    box-shadow: 0 20px 55px rgba(23, 28, 34, .14);
}

.radar-dg-mode-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 22px;
    border-bottom: 1px solid #323b44;
    background: #20272e;
    color: #d8e0e4;
    font-family: "Courier New", monospace;
    font-size: 11px;
}

.radar-dg-mode-board-head span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.radar-dg-mode-board-head i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--radar-green);
}

.radar-dg-mode-board-head b {
    color: #7fc7d4;
    font-size: 10px;
}

.radar-dg-mode-board ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.radar-dg-mode-board li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 110px;
    align-items: center;
    gap: 18px;
    min-height: 106px;
    padding: 18px 22px;
    border-bottom: 1px solid #303840;
    transition: background-color .2s ease;
}

.radar-dg-mode-board li:last-child {
    border-bottom: 0;
}

.radar-dg-mode-board li:hover {
    background: #20272e;
}

.radar-dg-mode-board li > span {
    color: #ef5b51;
    font-family: "Courier New", monospace;
    font-size: 1.55rem;
    font-weight: 900;
}

.radar-dg-mode-board strong,
.radar-dg-mode-board p {
    display: block;
}

.radar-dg-mode-board strong {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 850;
}

.radar-dg-mode-board p {
    margin: 6px 0 0;
    color: #929da5;
    font-size: 12px;
    line-height: 1.6;
}

.radar-dg-mode-board em {
    justify-self: end;
    min-width: 96px;
    padding: 7px 9px;
    border: 1px solid #46525d;
    border-radius: 3px;
    color: #7fc7d4;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    text-align: center;
}

.radar-dg-live {
    padding: 92px 0;
    background: #151b21;
    color: #fff;
}

.radar-dg-live-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
    align-items: center;
    gap: 58px;
}

.radar-dg-media-button,
.radar-dg-control-grid article > button,
.radar-dg-poster {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid #3b454d;
    border-radius: 6px;
    background: #0d1115;
    cursor: zoom-in;
}

.radar-dg-media-button {
    aspect-ratio: 3 / 2;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.radar-dg-media-button img,
.radar-dg-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.radar-dg-media-button:hover img,
.radar-dg-control-grid article > button:hover img,
.radar-dg-poster:hover img {
    transform: scale(1.018);
}

.radar-dg-media-button > span {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 4px;
    background: rgba(7, 11, 15, .78);
    color: #e8eff2;
    font-size: 10px;
    font-weight: 750;
}

.radar-dg-live-copy .radar-dg-kicker {
    color: #65c5d5;
}

.radar-dg-live-copy h2 {
    color: #fff;
}

.radar-dg-live-copy > p {
    margin: 20px 0 0;
    color: #9ca8b0;
    font-size: 13px;
    line-height: 1.85;
}

.radar-dg-live-copy ul {
    display: grid;
    gap: 0;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.radar-dg-live-copy li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid #333c44;
}

.radar-dg-live-copy li > i {
    color: #ef5b51;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.radar-dg-live-copy li strong,
.radar-dg-live-copy li small {
    display: block;
}

.radar-dg-live-copy li strong {
    color: #f5f8f9;
    font-size: 13px;
}

.radar-dg-live-copy li small {
    margin-top: 4px;
    color: #7e8a93;
    font-size: 11px;
    line-height: 1.55;
}

.radar-dg-controls {
    background: #eceeee;
}

.radar-dg-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.radar-dg-control-grid article {
    overflow: hidden;
    border: 1px solid #c9d0d4;
    border-radius: 6px;
    background: #fff;
}

.radar-dg-control-grid article > button {
    height: 360px;
    border: 0;
    border-bottom: 1px solid #d6dcdf;
    border-radius: 0;
    background: #282d32;
}

.radar-dg-control-grid article > button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}

.radar-dg-control-grid article > div {
    min-height: 150px;
    padding: 20px;
}

.radar-dg-control-grid article span {
    color: var(--radar-red);
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 850;
}

.radar-dg-control-grid article h3 {
    margin: 8px 0 0;
    color: #171c21;
    font-size: 1.08rem;
    font-weight: 900;
}

.radar-dg-control-grid article p {
    margin: 8px 0 0;
    color: #6b757c;
    font-size: 12px;
    line-height: 1.7;
}

.radar-dg-poster-section {
    padding: 96px 0;
    background: #dfe3e5;
}

.radar-dg-poster-layout {
    display: grid;
    grid-template-columns: minmax(380px, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 72px;
}

.radar-dg-poster {
    aspect-ratio: 1;
    border-color: #7e878d;
    box-shadow: 0 24px 65px rgba(23, 31, 37, .22);
}

.radar-dg-poster-copy .radar-dg-kicker {
    color: var(--radar-red);
}

.radar-dg-poster-copy h2 {
    max-width: 590px;
    font-size: 2.6rem;
}

.radar-dg-poster-copy > p {
    max-width: 620px;
    margin: 22px 0 0;
    color: #58636a;
    font-size: 14px;
    line-height: 1.9;
}

.radar-dg-capabilities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 30px 0 28px;
    border-top: 1px solid #b9c1c5;
}

.radar-dg-capabilities > span {
    min-height: 82px;
    padding: 17px 16px 14px 0;
    border-bottom: 1px solid #b9c1c5;
}

.radar-dg-capabilities > span:nth-child(odd) {
    border-right: 1px solid #b9c1c5;
}

.radar-dg-capabilities > span:nth-child(even) {
    padding-left: 20px;
}

.radar-dg-capabilities b,
.radar-dg-capabilities small {
    display: block;
}

.radar-dg-capabilities b {
    color: #1a2228;
    font-size: 13px;
    font-weight: 900;
}

.radar-dg-capabilities small {
    margin-top: 5px;
    color: #6c777e;
    font-size: 11px;
}

.radar-dg-poster-copy .radar-dg-button {
    min-width: 168px;
}

@media (max-width: 1100px) {
    .radar-dg-hero-copy {
        right: 34px;
        width: 51vw;
    }

    .radar-dg-hero h1 {
        font-size: 3.55rem;
    }

    .radar-dg-live-layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
        gap: 36px;
    }

    .radar-dg-poster-layout {
        gap: 44px;
    }
}

@media (max-width: 900px) {
    .radar-dg-inner {
        width: min(100% - 32px, 760px);
    }

    .radar-dg-hero {
        min-height: 650px;
    }

    .radar-dg-hero-copy {
        top: auto;
        right: 26px;
        bottom: 66px;
        left: 26px;
        width: auto;
        transform: none;
    }

    .radar-dg-hero h1 {
        font-size: 3rem;
    }

    .radar-dg-hero-shade {
        background: rgba(4, 8, 12, .64);
    }

    .radar-dg-hero-signal {
        display: none;
    }

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

    .radar-dg-facts > div:nth-child(2) {
        border-right: 0;
    }

    .radar-dg-facts > div:nth-child(-n+2) {
        border-bottom: 1px solid #303a43;
    }

    .radar-dg-section,
    .radar-dg-live,
    .radar-dg-poster-section {
        padding: 72px 0;
    }

    .radar-dg-live-layout,
    .radar-dg-poster-layout {
        grid-template-columns: 1fr;
    }

    .radar-dg-live-copy {
        max-width: 680px;
    }

    .radar-dg-poster {
        width: min(560px, 100%);
        margin: 0 auto;
    }

    .radar-dg-control-grid article > button {
        height: 310px;
    }
}

@media (max-width: 760px) {
    .radar-dg-hero {
        height: calc(100svh - var(--nav-height) - 44px);
        min-height: 620px;
        max-height: 720px;
    }

    .radar-dg-hero-media {
        object-position: 42% center;
    }

    .radar-dg-hero-copy {
        right: 20px;
        bottom: 48px;
        left: 20px;
    }

    .radar-dg-hero h1 {
        margin-top: 13px;
        font-size: 2.8rem;
    }

    .radar-dg-slogan {
        font-size: 1.35rem;
    }

    .radar-dg-lead {
        margin-top: 15px;
        font-size: 13px;
        line-height: 1.72;
    }

    .radar-dg-actions {
        margin-top: 20px;
    }

    .radar-dg-english {
        margin-top: 14px;
    }

    .radar-dg-section-head {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 22px;
    }

    .radar-dg-section-head h2,
    .radar-dg-live-copy h2,
    .radar-dg-poster-copy h2 {
        font-size: 1.75rem;
    }

    .radar-dg-section-head > p {
        text-align: left;
    }

    .radar-dg-mode-board-head b {
        display: none;
    }

    .radar-dg-mode-board li {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
        min-height: 126px;
        padding: 18px;
    }

    .radar-dg-mode-board em {
        grid-column: 2;
        justify-self: start;
    }

    .radar-dg-control-grid {
        grid-template-columns: 1fr;
    }

    .radar-dg-control-grid article {
        display: grid;
        grid-template-columns: minmax(150px, 42%) minmax(0, 1fr);
    }

    .radar-dg-control-grid article > button {
        height: 300px;
        border-right: 1px solid #d6dcdf;
        border-bottom: 0;
    }

    .radar-dg-control-grid article > div {
        align-self: center;
        min-height: 0;
        padding: 18px;
    }

    .radar-dg-poster-copy > p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .radar-stable-uptime--compact {
        padding: 15px 16px;
    }

    .radar-stable-uptime--compact,
    .radar-stable-uptime--guide {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
    }

    .radar-stable-uptime--guide {
        width: calc(100% - 32px);
        margin-top: 18px;
        padding: 15px 16px;
    }

    .radar-stable-uptime-value {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 8px;
        border-top: 1px solid rgba(117, 184, 106, .22);
    }

    .radar-stable-uptime--guide .radar-stable-uptime-value {
        border-top-color: #e4e9e9;
    }

    .radar-stable-uptime-value b {
        font-size: 1.25rem;
    }

    .radar-dg-inner {
        width: calc(100% - 24px);
    }

    .radar-dg-hero-copy {
        right: 16px;
        left: 16px;
    }

    .radar-dg-hero h1 {
        font-size: 2.25rem;
    }

    .radar-dg-slogan {
        font-size: 1.12rem;
    }

    .radar-dg-lead {
        max-width: 350px;
    }

    .radar-dg-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .radar-dg-button {
        width: 100%;
    }

    .radar-dg-facts > div {
        min-height: 94px;
        padding: 16px 18px;
    }

    .radar-dg-facts strong {
        font-size: .95rem;
    }

    .radar-dg-facts span {
        font-size: 10px;
    }

    .radar-dg-section,
    .radar-dg-live,
    .radar-dg-poster-section {
        padding: 58px 0;
    }

    .radar-dg-control-grid article {
        grid-template-columns: 1fr;
    }

    .radar-dg-control-grid article > button {
        height: 290px;
        border-right: 0;
        border-bottom: 1px solid #d6dcdf;
    }

    .radar-dg-control-grid article > div {
        min-height: 132px;
    }

    .radar-dg-capabilities {
        grid-template-columns: 1fr;
    }

    .radar-dg-capabilities > span,
    .radar-dg-capabilities > span:nth-child(even) {
        min-height: 72px;
        padding: 15px 0;
        border-right: 0;
    }
}

/* 收益标签 chip 横向排列 */
.np-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.np-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-hero-tag-check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.np-theme-cyan .np-hero-tag-check {
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
}
.np-theme-amber .np-hero-tag-check {
    background: var(--accent-amber-dim);
    color: var(--accent-amber);
}
.np-theme-cyan .np-hero-tag:hover {
    border-color: rgba(0, 152, 199, 0.35);
    background: var(--accent-cyan-dim);
}
.np-theme-amber .np-hero-tag:hover {
    border-color: rgba(232, 149, 10, 0.35);
    background: var(--accent-amber-dim);
}

/* 双按钮区 */
.np-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Hero 购买按钮 */
.np-hero-buy {
    width: fit-content;
    padding: 13px 34px;
    border: none;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-theme-cyan .np-hero-buy {
    background: var(--gradient-cyan);
    box-shadow: 0 4px 16px rgba(0, 152, 199, 0.3);
}
.np-theme-amber .np-hero-buy {
    background: var(--gradient-amber);
    box-shadow: 0 4px 16px rgba(232, 149, 10, 0.3);
}
.np-hero-buy:hover {
    transform: translateY(-2px);
}
.np-theme-cyan .np-hero-buy:hover {
    box-shadow: 0 8px 24px rgba(0, 152, 199, 0.4);
}
.np-theme-amber .np-hero-buy:hover {
    box-shadow: 0 8px 24px rgba(232, 149, 10, 0.4);
}
.np-hero-trial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 20px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.np-theme-cyan .np-hero-trial {
    color: #047c9f;
    border-color: rgba(0, 152, 199, 0.7);
}
.np-theme-amber .np-hero-trial {
    color: #b45309;
    border-color: rgba(232, 149, 10, 0.7);
}
.np-hero-trial:hover {
    transform: translateY(-2px);
    text-decoration: none;
}
.np-theme-cyan .np-hero-trial:hover {
    background: #eaf8fc;
    box-shadow: 0 5px 16px rgba(0, 152, 199, 0.16);
}
.np-theme-amber .np-hero-trial:hover {
    background: #fff6e8;
    box-shadow: 0 5px 16px rgba(232, 149, 10, 0.16);
}
.np-hero-tutorial {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 8px 4px;
    transition: color 0.2s ease;
}
.np-hero-tutorial:hover {
    color: var(--accent-cyan);
}
.np-theme-amber .np-hero-tutorial:hover {
    color: var(--accent-amber);
}

/* Hero 右侧大图 - 容器比例贴合图片实际尺寸 373:450 */
.np-hero-right {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
    aspect-ratio: 373 / 450;
    max-height: 450px;
}
.np-hero-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-hero-right:hover .np-hero-img {
    transform: scale(1.04);
}
.np-hero-img-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    z-index: 3;
    pointer-events: none;
}

/* Hero 区轮播 */
.np-carousel {
    cursor: grab;
}
.np-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.np-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}
.np-carousel-slide .np-hero-img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, opacity 0.2s ease;
    z-index: 3;
    opacity: 0;
    backdrop-filter: blur(6px);
}
.np-carousel:hover .np-carousel-arrow {
    opacity: 1;
}
.np-carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}
.np-carousel-prev { left: 12px; }
.np-carousel-next { right: 12px; }
.np-carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 3;
}
.np-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-carousel-dot.is-active {
    background: #fff;
    width: 22px;
    border-radius: 4px;
}
.np-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.85);
}

/* 通用 section 标题（去掉编号和色条模板） */
.np-section-head {
    margin-bottom: 28px;
}
.np-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.np-section-sub {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* 实机画廊 - 2x2 等分网格，容器比例贴合图片实际尺寸 373:450 */
.np-gallery {
    margin-bottom: 80px;
    max-width: 920px;
}
.np-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}
.np-gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    background: var(--bg-card);
    aspect-ratio: 373 / 450;
}

@media (min-width: 901px) {
    .np-hero-right {
        justify-self: end;
    }
}
.np-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-gallery-item:hover img {
    transform: scale(1.06);
}
.np-gallery-main {
    grid-row: auto;
}
.np-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.np-gallery-item:hover::after {
    opacity: 1;
}

/* 执行策略 - 独立区块，横向 3 列紧凑卡片 */
.np-strategy-col {
    display: flex;
    flex-direction: column;
    margin-bottom: 56px;
}
.np-strategy-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.np-strategy-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.np-strategy-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    width: auto;
    bottom: auto;
    opacity: 0;
    transition: opacity 0.3s;
}
.np-theme-cyan .np-strategy-step::before { background: var(--accent-cyan); }
.np-theme-amber .np-strategy-step::before { background: var(--accent-amber); }
.np-strategy-step:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.np-strategy-step:hover::before {
    opacity: 1;
}
.np-strategy-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.np-theme-cyan .np-strategy-num {
    background: var(--accent-cyan-dim);
    color: var(--accent-cyan);
}
.np-theme-amber .np-strategy-num {
    background: var(--accent-amber-dim);
    color: var(--accent-amber);
}
.np-strategy-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    line-height: 1;
}
.np-strategy-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

/* 功能列 */
.np-features-col {
    display: flex;
    flex-direction: column;
    margin-bottom: 80px;
}

/* BP 软件网页交互演示 */
.bp-console-section {
    margin-bottom: 80px;
}
.bp-console-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.bp-console-demo-badge {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid rgba(0, 152, 199, 0.28);
    border-radius: 6px;
    background: rgba(0, 152, 199, 0.07);
    color: #007fa8;
    font-size: 0.78rem;
    font-weight: 800;
}
.bp-console-shell {
    overflow: hidden;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    background: #f7f9fb;
    box-shadow: 0 12px 30px rgba(20, 28, 38, 0.09);
}
.bp-console-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
    padding: 14px 18px;
    background: #202327;
    color: #fff;
}
.bp-console-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.bp-console-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: #00a0ce;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
}
.bp-console-brand div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bp-console-brand strong {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-console-brand span:last-child {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
}
.bp-console-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.bp-console-button,
.bp-console-icon-button,
.bp-tool-row button,
.bp-guide-link {
    min-height: 38px;
    border: 1px solid #cbd3dc;
    border-radius: 6px;
    background: #fff;
    color: #27313c;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.bp-console-button {
    padding: 8px 13px;
}
.bp-console-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
    font-size: 1rem;
}
.bp-console-button:hover,
.bp-console-icon-button:hover,
.bp-tool-row button:hover,
.bp-guide-link:hover {
    border-color: #00a0ce;
    color: #007fa8;
    transform: translateY(-1px);
}
.bp-console-button.is-primary {
    border-color: #00a0ce;
    background: #00a0ce;
    color: #fff;
}
.bp-console-button.is-primary.is-running {
    border-color: #dc5a5a;
    background: #dc5a5a;
}
.bp-console-button.is-warm,
.bp-tool-row button.is-warm {
    border-color: #e5aa28;
    background: #f8c44f;
    color: #3b2b06;
}
.bp-console-session {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.7fr);
    border-bottom: 1px solid #d8dee6;
    background: #fff;
}
.bp-console-session-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 8px;
    padding: 16px 18px;
    border-right: 1px solid #e0e5ea;
}
.bp-console-session-fields span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #d8dee6;
    border-radius: 5px;
    color: #687382;
    font-size: 0.78rem;
}
.bp-console-session-fields strong {
    color: #1f2933;
    font-size: 0.82rem;
}
.bp-console-session-log {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 18px;
    color: #586474;
    font-size: 0.78rem;
    line-height: 1.45;
}
.bp-console-session-log span:last-child {
    color: #25303b;
    font-weight: 700;
}
.bp-console-update {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 18px;
    border-bottom: 1px solid #e0e5ea;
    background: #fff9ed;
    color: #7a5b16;
    font-size: 0.78rem;
}
.bp-console-update strong {
    margin-right: auto;
    color: #c43c3c;
}
.bp-console-update-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}
.bp-console-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid #ced6df;
    background: #edf1f4;
    scrollbar-width: none;
}
.bp-console-tabs::-webkit-scrollbar {
    display: none;
}
.bp-console-tab {
    position: relative;
    flex: 1 0 132px;
    min-height: 48px;
    padding: 10px 14px;
    border: 0;
    border-right: 1px solid #d6dde4;
    background: transparent;
    color: #566170;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}
.bp-console-tab::after {
    content: '';
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
}
.bp-console-tab:hover {
    color: #007fa8;
}
.bp-console-tab.is-active {
    background: #fff;
    color: #007fa8;
}
.bp-console-tab.is-active::after {
    background: #00a0ce;
}
.bp-console-workspace {
    display: flex;
    align-items: stretch;
    min-width: 0;
    background: #f7f9fb;
}
.bp-console-panels {
    flex: 1 1 auto;
    min-width: 0;
}
.bp-console-panel {
    min-height: 430px;
    padding: 24px;
}
.bp-basic-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: 28px;
}
.bp-setting-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bp-field {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 40px;
}
.bp-field > span,
.bp-secret-fields label > span {
    color: #35414e;
    font-size: 0.84rem;
    font-weight: 800;
}
.bp-field select,
.bp-field input,
.bp-secret-fields input,
.bp-check-with-input input[type="number"] {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #cbd4de;
    border-radius: 5px;
    outline: none;
    background: #fff;
    color: #26323e;
    font: inherit;
    font-size: 0.84rem;
}
.bp-field select:focus,
.bp-field input:focus,
.bp-secret-fields input:focus,
.bp-check-with-input input[type="number"]:focus {
    border-color: #00a0ce;
    box-shadow: 0 0 0 3px rgba(0, 160, 206, 0.1);
}
.bp-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
}
.bp-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #dbe1e7;
    border-radius: 5px;
    background: #fff;
    color: #35414e;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.bp-check input[type="checkbox"],
.bp-switch-rules input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #00a0ce;
}
.bp-check-with-input {
    display: grid;
    grid-template-columns: 18px auto 48px 1fr;
}
.bp-check-with-input input[type="number"] {
    height: 28px;
    padding: 0 6px;
}
.bp-check-with-input em {
    font-style: normal;
    white-space: nowrap;
}
.bp-panel-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.bp-custom-layout {
    display: grid;
    grid-template-columns: minmax(210px, 0.75fr) minmax(0, 1.6fr);
    min-height: 320px;
    border: 1px solid #d7dee6;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.bp-route-library {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-right: 1px solid #d7dee6;
    background: #f1f4f7;
}
.bp-route-library button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #42505f;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.bp-route-library button:hover,
.bp-route-library button.is-selected {
    background: #fff;
    color: #007fa8;
}
.bp-route-library strong {
    color: #74808d;
    font-size: 0.72rem;
}
.bp-custom-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    text-align: center;
}
.bp-custom-empty strong {
    color: #26323e;
    font-size: 1rem;
}
.bp-custom-empty p {
    max-width: 440px;
    margin: 8px 0 0;
    color: #778290;
    font-size: 0.82rem;
    line-height: 1.65;
}
.bp-feishu-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.3fr);
    gap: 28px;
}
.bp-check-grid-compact {
    grid-template-columns: 1fr;
}
.bp-secret-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bp-secret-fields label {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}
.bp-secret-fields .bp-console-button {
    align-self: flex-end;
}
.bp-console-note {
    margin: 24px 0 0;
    padding: 12px 14px;
    border-left: 3px solid #f0b238;
    background: #fff8e9;
    color: #6c571f;
    font-size: 0.8rem;
    line-height: 1.6;
}
.bp-account-layout {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 130px minmax(180px, 1fr);
    gap: 14px;
    align-items: stretch;
}
.bp-account-column {
    min-height: 280px;
    border: 1px solid #d7dee6;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.bp-column-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 10px 12px;
    border-bottom: 1px solid #dce2e8;
    color: #34414e;
    font-size: 0.82rem;
}
.bp-column-title span {
    color: #84909d;
    font-size: 0.72rem;
}
.bp-account-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}
.bp-account-list button,
.bp-account-list span {
    min-height: 34px;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: #f2f5f7;
    color: #485563;
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
}
.bp-account-list button {
    cursor: pointer;
}
.bp-account-list button.is-selected {
    background: #dff5fb;
    color: #007fa8;
    font-weight: 800;
}
.bp-account-list p {
    margin: 44px 0;
    color: #929ca7;
    font-size: 0.78rem;
    text-align: center;
}
.bp-account-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}
.bp-switch-rules {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 2px 0 0;
    padding: 14px;
    border: 1px solid #d7dee6;
    border-radius: 6px;
    background: #fff;
}
.bp-switch-rules legend {
    padding: 0 7px;
    color: #566270;
    font-size: 0.78rem;
    font-weight: 800;
}
.bp-switch-rules label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #3f4b57;
    font-size: 0.8rem;
    font-weight: 700;
}
.bp-tool-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bp-tool-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.bp-tool-row:nth-child(2) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bp-tool-row:nth-child(3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bp-tool-row button {
    padding: 9px 12px;
}
.bp-guide-copy {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #dce2e8;
}
.bp-guide-copy strong {
    color: #27323e;
    font-size: 0.92rem;
}
.bp-guide-copy ol {
    margin: 10px 0 0;
    padding-left: 22px;
    color: #5b6774;
    font-size: 0.82rem;
    line-height: 1.75;
}
.bp-guide-link {
    width: 100%;
    margin-top: 18px;
    padding: 10px 14px;
}
.bp-config-summary {
    flex: 0 0 280px;
    border-left: 1px solid #d8dee6;
    background: #fff;
}
.bp-config-summary > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}
.bp-config-summary p {
    margin: 0;
    padding: 9px 10px;
    border-radius: 5px;
    background: #f2f5f7;
    color: #566270;
    font-size: 0.76rem;
    line-height: 1.5;
}
.bp-console-feedback {
    min-height: 42px;
    padding: 12px 18px;
    border-top: 1px solid #d8dee6;
    background: #fff;
    color: #78838f;
    font-size: 0.78rem;
    transition: color 0.18s ease, background-color 0.18s ease;
}
.bp-console-feedback.is-active {
    background: #eaf8fc;
    color: #007fa8;
    font-weight: 800;
}

@media (max-width: 900px) {
    .bp-console-section-head {
        align-items: flex-start;
    }
    .bp-console-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .bp-console-actions {
        justify-content: flex-start;
        width: 100%;
    }
    .bp-console-session {
        grid-template-columns: 1fr;
    }
    .bp-console-session-fields {
        border-right: 0;
        border-bottom: 1px solid #e0e5ea;
    }
    .bp-console-update {
        flex-wrap: wrap;
    }
    .bp-console-update strong {
        flex: 1 1 calc(100% - 28px);
        margin-right: 0;
    }
    .bp-console-panel {
        min-height: 0;
        padding: 18px;
    }
    .bp-basic-grid,
    .bp-feishu-layout {
        grid-template-columns: 1fr;
    }
    .bp-custom-layout {
        grid-template-columns: 1fr;
    }
    .bp-route-library {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid #d7dee6;
    }
    .bp-custom-empty {
        min-height: 180px;
    }
    .bp-account-layout {
        grid-template-columns: 1fr 1fr;
    }
    .bp-account-controls {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .bp-switch-rules {
        grid-row: 3;
        flex-wrap: wrap;
    }
    .bp-console-workspace {
        flex-direction: column;
    }
    .bp-config-summary {
        flex-basis: auto;
        border-top: 1px solid #d8dee6;
        border-left: 0;
    }
}

@media (max-width: 560px) {
    .bp-console-section-head {
        flex-direction: column;
        gap: 10px;
    }
    .bp-console-actions .bp-console-button {
        flex: 1 1 calc(50% - 8px);
    }
    .bp-console-session-fields,
    .bp-check-grid,
    .bp-route-library,
    .bp-account-layout {
        grid-template-columns: 1fr;
    }
    .bp-field,
    .bp-secret-fields label {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .bp-account-controls {
        grid-column: 1;
        grid-row: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bp-switch-rules {
        grid-column: 1;
        grid-row: auto;
    }
    .bp-tool-row,
    .bp-tool-row:nth-child(2),
    .bp-tool-row:nth-child(3) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* BP 原软件界面：桌面端收窄显示，保留完整纵向操作区 */
.np-hero.bp-product-hero {
    gap: 20px;
}
.np-hero.bp-product-hero .bp-old-host {
    justify-self: end;
    margin-right: 40px;
}
.np-hero-right.bp-old-host {
    isolation: isolate;
    width: min(100%, 374px);
    aspect-ratio: 374 / 505;
    max-height: 505px;
    overflow: visible;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}
.np-hero-right.bp-old-host::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -40px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #eef2f6;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
    pointer-events: none;
}
.bp-old-preview-label {
    position: absolute;
    z-index: 2;
    right: -8px;
    bottom: calc(100% + 1px);
    left: -8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 30px;
    padding: 4px 8px;
    border: 0;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: "Microsoft YaHei", sans-serif;
    letter-spacing: 0;
}
.bp-old-preview-label strong {
    padding-left: 7px;
    border-left: 3px solid #149c94;
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
}
.bp-old-window,
.bp-old-window * {
    box-sizing: border-box;
}
.bp-old-window {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1.5px solid #111;
    border-radius: 7px;
    background: #fff;
    color: #111;
    font-family: SimSun, "宋体", serif;
    font-size: 14px;
    line-height: 1.1;
}
.bp-old-window button,
.bp-old-window input,
.bp-old-window select {
    font: inherit;
    color: #111;
}
.bp-old-window button {
    min-width: 0;
    border: 2px solid #333;
    border-radius: 5px;
    background: #fff;
    box-shadow: none;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.bp-old-window button:hover {
    border-color: #111;
    background: #f7f7f7;
}
.bp-old-window button:focus-visible,
.bp-old-window input:focus-visible,
.bp-old-window select:focus-visible {
    outline: 2px solid rgba(0, 164, 184, 0.38);
    outline-offset: 1px;
}
.bp-old-window button:active,
.bp-old-window button.is-selected {
    background: #27a9dc;
    color: #fff;
}
.bp-old-window button.is-yellow {
    border-color: #b78720;
    background: #f9c642;
    color: #111;
}
.bp-old-window [aria-disabled="true"],
.bp-old-window input[readonly] {
    pointer-events: none;
    cursor: default;
}
.bp-old-window button[data-old-display-action="true"] {
    cursor: pointer;
}
.bp-old-window button[data-old-display-action="true"].is-demo-pressed {
    transform: translateY(1px);
    border-color: #147fa8 !important;
    background: #27a9dc !important;
    color: #fff !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.bp-old-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    flex: 0 0 40px;
    padding: 4px 6px;
    border-bottom: 2px solid #444;
    background: #fff;
}
.bp-old-titlebar > img {
    width: 24px;
    height: 24px;
    image-rendering: auto;
}
.bp-old-titlebar > strong {
    overflow: hidden;
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-old-window-tools {
    display: flex;
    gap: 5px;
}
.bp-old-window-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border-color: #4d5359;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
}
.bp-old-window-tools button:first-child {
    background: linear-gradient(180deg, #b8f76e 0%, #8add3e 100%);
}
.bp-old-window-tools button:last-child {
    background: linear-gradient(180deg, #ffd66a 0%, #f4b735 100%);
}
.bp-old-quickbar {
    display: grid;
    grid-template-columns: 126px minmax(72px, 1fr) minmax(72px, 1fr) 74px;
    align-items: center;
    gap: 3px;
    height: 40px;
    flex: 0 0 40px;
    padding: 4px 5px;
    background: #fff;
}
.bp-old-quickbar button {
    height: 32px;
    padding: 0 5px;
}
.bp-old-quickbar .bp-old-main-button {
    font-size: 14px;
}
.bp-old-quickbar .bp-old-main-button.is-running {
    background: #9bf149;
}
.bp-old-quickbar label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    height: 30px;
    border: 2px solid #555;
    border-radius: 3px;
    background: #fff;
    white-space: nowrap;
}
.bp-old-quickbar label input {
    width: 100%;
    min-width: 0;
    height: 26px;
    border: 0;
    outline: 0;
    background: transparent;
}
.bp-old-info-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    height: 100px;
    flex: 0 0 100px;
    border-top: 2px solid #666;
    border-bottom: 2px solid #666;
    background: #fff;
}
.bp-old-log {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 3px 6px;
    border-right: 2px solid #aaa;
    color: #111;
}
.bp-old-log span {
    font-family: "Arial Narrow", SimSun, "宋体", serif;
    font-size: 15px;
    line-height: 18px;
    white-space: nowrap;
}
.bp-old-site-notice {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: auto;
    line-height: 14px;
    white-space: nowrap;
}
.bp-old-site-notice em {
    overflow: hidden;
    color: #d62f2f;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-old-site-notice small {
    overflow: hidden;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-old-side-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 3px;
}
.bp-old-side-actions button {
    height: 34px;
    padding: 0 3px;
}
.bp-old-update {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 27px;
    flex: 0 0 27px;
    padding: 3px 6px;
    border-bottom: 2px solid #666;
    background: #f0f0f0;
    white-space: nowrap;
}
.bp-old-update strong {
    color: #e22929;
    font-size: 14px;
}
.bp-old-update-status {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}
.bp-old-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    height: 31px;
    flex: 0 0 31px;
    padding: 2px 4px 0;
    border-bottom: 2px solid #087a75;
    background: #eef8f7;
    box-shadow: inset 0 0 0 1px #149c94;
}
.bp-old-tabs::before {
    content: attr(data-interactive-hint);
    position: absolute;
    z-index: 2;
    top: -23px;
    left: 4px;
    height: 19px;
    padding: 0 6px;
    border: 1px solid #087a75;
    border-radius: 3px 3px 0 0;
    background: #149c94;
    color: #fff;
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
    pointer-events: none;
    white-space: nowrap;
}
.bp-old-tabs button {
    overflow: hidden;
    height: 27px;
    padding: 0 2px;
    border-color: #333;
    border-radius: 5px 5px 0 0;
    font-size: 10.5px;
    text-overflow: clip;
    white-space: nowrap;
}
.bp-old-tabs button.is-active {
    border-color: #a54c58;
    background: linear-gradient(180deg, #f7b3ba 0%, #ef949f 100%);
    color: #251416;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.bp-old-panels {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}
.bp-old-panel {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
}
.bp-old-panel.is-active {
    display: block;
}
.bp-old-panel[data-old-panel="basic"].is-active {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: 8px;
}
.bp-old-basic-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 0;
    background: #fff;
    border-right: 1px solid #aaa;
}
.bp-old-basic-left label {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    align-items: center;
    height: 28px;
    gap: 1px;
}
.bp-old-basic-left label > span {
    color: #111;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.bp-old-basic-left select,
.bp-old-basic-left input {
    width: 100%;
    min-width: 0;
    height: 25px;
    padding: 0 22px 0 5px;
    border: 2px solid #555;
    border-radius: 2px;
    outline: 0;
    background-color: #fff;
}
.bp-old-basic-left select {
    border-color: #111;
    background-image: linear-gradient(to right, transparent calc(100% - 25px), #9ce9e6 0);
}
.bp-old-basic-left select option {
    background: #fff;
    color: #111;
}
.bp-old-native-select {
    display: none !important;
}
.bp-old-select {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 25px;
}
.bp-old-select-trigger {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: stretch !important;
    width: 100% !important;
    height: 25px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 2px solid #111 !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #111 !important;
    font-weight: 400 !important;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.bp-old-select-value {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}
.bp-old-select-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #087a75;
    background: #149c94;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.bp-old-select-arrow::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-right: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(45deg);
    transition: margin-top 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.bp-old-select-trigger:hover .bp-old-select-arrow {
    background: #149c94;
}
.bp-old-select.is-open .bp-old-select-arrow {
    border-left-color: #087a75;
    background: #149c94;
}
.bp-old-select.is-open .bp-old-select-arrow::before {
    margin-top: 3px;
    border-color: #fff;
    transform: rotate(225deg);
}
.bp-old-select-menu {
    position: absolute;
    z-index: 300;
    top: calc(100% - 1px);
    left: 0;
    width: 100%;
    max-height: 210px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 2px solid #111;
    background: #fff;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.bp-old-select-menu button {
    display: block;
    width: 100%;
    height: 24px;
    min-height: 24px;
    padding: 0 5px;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-weight: 400 !important;
    line-height: 24px;
    text-align: left;
    text-overflow: clip;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.bp-old-select-menu button:hover,
.bp-old-select-menu button:focus-visible,
.bp-old-select-menu button.is-selected {
    outline: 0;
    background: #1687d2 !important;
    color: #fff !important;
}
.bp-old-host.has-open-dropdown {
    z-index: 20;
}
.bp-old-host.has-open-dropdown,
.bp-old-host.has-open-dropdown .bp-old-window,
.bp-old-host.has-open-dropdown .bp-old-panels,
.bp-old-host.has-open-dropdown .bp-old-panel.is-active {
    overflow: visible;
}
.bp-old-basic-left select:focus,
.bp-old-basic-left input:focus {
    border-color: #20bcb7;
}
.bp-old-checks {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 1px 2px;
    background: #f1f1f1;
}
.bp-old-checks label,
.bp-old-feishu-checks label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    white-space: nowrap;
}
.bp-old-checks input,
.bp-old-feishu-checks input,
.bp-old-switch-rules input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    accent-color: #3fc7c2;
}
.bp-old-checks .bp-old-inline-value {
    width: 30px;
    height: 20px;
    flex: 0 0 30px;
    padding: 0 2px;
    border: 1px solid #777;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}
.bp-old-checks input[type="checkbox"],
.bp-old-feishu-checks input[type="checkbox"] {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid #59616d;
    border-radius: 3px;
    outline: 0;
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.bp-old-checks input[type="checkbox"]:hover,
.bp-old-feishu-checks input[type="checkbox"]:hover {
    border-color: #0f8f89;
}
.bp-old-checks input[type="checkbox"]:checked,
.bp-old-feishu-checks input[type="checkbox"]:checked {
    border-color: #087a75;
    background: #149c94;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.bp-old-checks input[type="checkbox"]:checked::after,
.bp-old-feishu-checks input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 46%;
    left: 50%;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
}
.bp-old-checks input[type="checkbox"]:focus-visible,
.bp-old-feishu-checks input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(20, 156, 148, 0.35);
    outline-offset: 1px;
}
.bp-old-checks span {
    overflow: hidden;
    text-overflow: clip;
}
.bp-old-custom-actions {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 8px;
    height: 33px;
    margin-bottom: 5px;
}
.bp-old-custom-actions button {
    height: 30px;
    font-size: 10.5px;
}
.bp-old-custom-body {
    display: grid;
    grid-template-columns: 38% 62%;
    min-height: calc(100% - 38px);
    border: 1px solid #555;
    border-radius: 3px;
    background: #fff;
}
.bp-old-route-list {
    display: flex;
    flex-direction: column;
    padding: 2px;
    border-right: 1px solid #666;
    background: #fff;
}
.bp-old-route-list button {
    height: 20px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-weight: 400;
    text-align: left;
}
.bp-old-route-list button:hover {
    background: #f1f1f1;
}
.bp-old-route-list button.is-selected {
    background: #169bc9;
    color: #fff;
}
.bp-old-custom-copy {
    padding: 5px;
    color: #111;
    font-size: 11px;
    line-height: 1.25;
}
.bp-old-feishu-top {
    display: grid;
    grid-template-columns: 1fr 72px;
    gap: 5px;
}
.bp-old-feishu-checks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bp-old-feishu-top > button {
    align-self: start;
    height: 30px;
    background: #fff;
}
.bp-old-feishu-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 12px 5px 0;
    padding: 5px;
    border: 1px solid #555;
    border-radius: 3px;
    background: #fff;
}
.bp-old-feishu-fields label {
    display: grid;
    grid-template-columns: 85px 1fr;
    align-items: center;
}
.bp-old-feishu-fields span {
    text-align: right;
}
.bp-old-feishu-fields input {
    height: 22px;
    border: 1px solid #555;
    border-radius: 2px;
    outline: 0;
}
.bp-old-panel[data-old-panel="feishu"] > p {
    margin: 6px 2px 0;
    font-size: 9px;
    line-height: 1.2;
}
.bp-old-account-head {
    display: grid;
    grid-template-columns: 25% 25%;
    gap: 5px;
    height: 21px;
}
.bp-old-account-body {
    display: grid;
    grid-template-columns: 25% 25% 1fr;
    gap: 5px;
    height: 150px;
}
.bp-old-account-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #555;
    border-radius: 3px;
    background: #fff;
}
.bp-old-account-list button,
.bp-old-account-list span {
    height: 20px;
    padding: 2px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    font-size: 9px;
    font-weight: 400;
    text-align: left;
}
.bp-old-account-list button.is-selected {
    background: #159cc9;
    color: #fff;
}
.bp-old-account-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 4px;
}
.bp-old-account-actions button {
    height: 26px;
}
.bp-old-switch-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 4px 0 0;
    padding: 4px;
    border: 1px solid #555;
    border-radius: 3px;
    background: #fff;
}
.bp-old-switch-rules legend {
    padding: 0 3px;
    font-size: 9px;
}
.bp-old-switch-rules label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.bp-old-switch-rules .bp-old-rule-value {
    width: 28px;
    height: 18px;
    flex: 0 0 28px;
    padding: 0 2px;
    border: 1px solid #555;
    border-radius: 2px;
    background: #fff;
}
.bp-old-tools {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.bp-old-tools button {
    min-height: 27px;
    padding: 2px;
    background: #fff;
}
.bp-old-tools button:nth-child(5),
.bp-old-tools button:nth-child(6),
.bp-old-tools button:nth-child(7) {
    grid-column: span 1;
}
.bp-old-guide-copy {
    margin-top: 8px;
    padding: 7px;
    border: 1px solid #555;
    border-radius: 3px;
    background: #fff;
    color: #111;
    font-size: 9px;
    line-height: 1.35;
}
.bp-old-guide-link {
    width: 100%;
    min-height: 26px;
    margin-top: 7px;
}

@media (max-width: 900px) {
    .np-hero.bp-product-hero {
        gap: 32px;
    }
    .np-hero.bp-product-hero .bp-old-host {
        width: min(100%, 330px);
        aspect-ratio: 330 / 400;
        max-height: 400px;
        justify-self: center;
        margin-right: 0;
    }
    .bp-old-window {
        font-size: 9px;
    }
    .bp-old-preview-label {
        right: -6px;
        bottom: calc(100% + 1px);
        left: -6px;
        min-height: 25px;
        padding: 3px 6px;
    }
    .np-hero-right.bp-old-host::before {
        top: -34px;
        right: -6px;
        bottom: -6px;
        left: -6px;
    }
    .bp-old-preview-label strong {
        padding-left: 6px;
        font-size: 13px;
    }
    .bp-old-titlebar {
        height: 26px;
        flex-basis: 26px;
    }
    .bp-old-titlebar > strong {
        font-size: 11px;
    }
    .bp-old-titlebar > img {
        width: 18px;
        height: 18px;
    }
    .bp-old-window-tools button {
        width: 19px;
        height: 19px;
        font-size: 13px;
    }
    .bp-old-quickbar {
        grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 66px;
        gap: 2px;
        height: 28px;
        flex-basis: 28px;
        padding: 2px 3px;
    }
    .bp-old-quickbar button {
        height: 24px;
        padding: 0 2px;
    }
    .bp-old-quickbar .bp-old-main-button {
        font-size: 10px;
    }
    .bp-old-quickbar label {
        height: 24px;
        border-width: 1px;
    }
    .bp-old-quickbar label input {
        height: 20px;
    }
    .bp-old-info-row {
        height: 72px;
        flex-basis: 72px;
    }
    .bp-old-log {
        padding: 2px 5px;
    }
    .bp-old-log span {
        flex: 0 0 13px;
        font-size: 10px;
        line-height: 13px;
    }
    .bp-old-site-notice {
        flex: 0 0 12px;
        line-height: 12px;
    }
    .bp-old-site-notice em {
        line-height: 12px;
    }
    .bp-old-side-actions button {
        height: 24px;
    }
    .bp-old-update {
        height: 20px;
        flex-basis: 20px;
    }
    .bp-old-tabs {
        height: 27px;
        flex-basis: 27px;
    }
    .bp-old-tabs::before {
        top: -18px;
        height: 15px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 14px;
    }
    .bp-old-tabs button {
        height: 23px;
        font-size: 9px;
    }
    .bp-old-basic-left {
        gap: 2px;
    }
    .bp-old-basic-left label {
        height: 24px;
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .bp-old-basic-left select,
    .bp-old-basic-left input {
        height: 22px;
    }
    .bp-old-select,
    .bp-old-select-trigger {
        height: 22px !important;
    }
    .bp-old-select-menu button {
        height: 22px;
        min-height: 22px;
        line-height: 22px;
    }
    .bp-old-checks label {
        min-height: 16px;
    }
    .bp-old-checks input,
    .bp-old-feishu-checks input,
    .bp-old-switch-rules input {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
    .bp-old-checks .bp-old-inline-value {
        width: 22px;
        height: 14px;
        flex-basis: 22px;
    }
    .bp-old-checks input[type="checkbox"]:checked::after,
    .bp-old-feishu-checks input[type="checkbox"]:checked::after {
        width: 3px;
        height: 6px;
        border-width: 0 1.5px 1.5px 0;
    }
    .bp-old-switch-rules .bp-old-rule-value {
        width: 26px;
        height: 16px;
        flex-basis: 26px;
    }
}
.np-features-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.np-feature {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.np-theme-cyan .np-feature:hover { border-color: var(--border-glow-cyan); }
.np-theme-amber .np-feature:hover { border-color: var(--border-glow-amber); }
.np-feature-large {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.np-feature-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.np-feature-body h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.np-feature-body p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 套餐区 */
.np-pricing {
    margin-bottom: 40px;
}
.np-pricing-row {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
}
.np-pricing-row > .pd-pricing-card {
    flex: 1;
    margin: 0;
}
.np-buy-btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 16px 56px;
    border: none;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-theme-cyan .np-buy-btn {
    background: var(--gradient-cyan);
    box-shadow: 0 6px 20px rgba(0, 152, 199, 0.3);
}
.np-theme-amber .np-buy-btn {
    background: var(--gradient-amber);
    box-shadow: 0 6px 20px rgba(232, 149, 10, 0.3);
}
.np-buy-btn:hover {
    transform: translateY(-2px);
}
.np-theme-cyan .np-buy-btn:hover {
    box-shadow: 0 10px 28px rgba(0, 152, 199, 0.4);
}
.np-theme-amber .np-buy-btn:hover {
    box-shadow: 0 10px 28px rgba(232, 149, 10, 0.4);
}

/* 响应式 - 移动端 */
@media (max-width: 900px) {
    .np-tabs-hint {
        margin-bottom: 42px;
    }
    .np-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .np-hero-right {
        order: -1;
        aspect-ratio: 373 / 450;
        max-height: 400px;
    }
    .np-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .np-gallery-main {
        grid-row: auto;
    }
    .np-capabilities {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .np-strategy-flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .np-features-bento {
        grid-template-columns: 1fr 1fr;
    }
    .np-pricing-row {
        flex-direction: column;
    }
    /* 移动端轮播箭头始终显示（无 hover） */
    .np-carousel-arrow {
        opacity: 0.85;
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
    .np-carousel-arrow:hover {
        background: rgba(0, 0, 0, 0.42);
    }
}
@media (max-width: 600px) {
    .np-features-bento {
        grid-template-columns: 1fr;
    }
    .np-feature-large {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 首页售后群说明与发货页QQ群入口 */
.btn-premium-group-note {
    cursor: default;
    pointer-events: none;
    color: #f8fafc;
    white-space: nowrap;
}

.delivery-qq-group-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.delivery-qq-group-btn svg {
    flex-shrink: 0;
}

.delivery-support-benefits {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.09);
}

/* ============================================
   GSAP Product Detail — gpd-
   ============================================ */

.gpd-page {
    --gpd-accent: #0898b5;
    --gpd-accent-strong: #047b94;
    --gpd-accent-soft: #e7f7fa;
    --gpd-accent-border: rgba(8, 152, 181, 0.3);
    min-height: 100vh;
    background: #f4f6f7;
    color: #17191b;
    overflow: hidden;
}

.gpd-page[data-theme="amber"] {
    --gpd-accent: #d7830b;
    --gpd-accent-strong: #ad6305;
    --gpd-accent-soft: #fff4df;
    --gpd-accent-border: rgba(215, 131, 11, 0.34);
}

.gpd-page[data-theme="unified"] {
    --gpd-accent: #0898b5;
    --gpd-accent-strong: #047b94;
    --gpd-accent-soft: #e7f7fa;
    --gpd-accent-border: rgba(8, 152, 181, 0.3);
}

.gpd-version-bar {
    padding: calc(var(--nav-height) + 14px) 32px 14px;
    border-bottom: 1px solid #dfe3e6;
    background: #fff;
}

.gpd-version-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    width: min(1200px, 100%);
    margin: 0 auto;
}

.gpd-version-label,
.gpd-version-meta {
    color: #687077;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.gpd-version-meta {
    justify-self: end;
}

.gpd-tabs {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    min-width: 280px;
    padding: 3px;
    border: 1px solid #d9dee2;
    border-radius: 8px;
    background: #eef1f3;
}

.gpd-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 18px;
    border-radius: 6px;
    color: #606970;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.gpd-tab:hover {
    color: #17191b;
}

.gpd-tab.is-active {
    background: #fff;
    color: #17191b;
    box-shadow: 0 1px 4px rgba(20, 24, 27, 0.12);
}

.gpd-tab-mark {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}

.gpd-tab-mark-cyan {
    background: #0898b5;
}

.gpd-tab-mark-amber {
    background: #d7830b;
}

.gpd-unified-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 20px;
    border: 1px solid #d9dee2;
    border-radius: 7px;
    background: #f4f6f7;
    color: #25292c;
    font-size: 0.88rem;
}

.gpd-hero {
    position: relative;
    background: #17191b;
    color: #fff;
}

.gpd-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: var(--gpd-accent);
}

.gpd-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.9fr);
    align-items: center;
    gap: 44px;
    width: min(1200px, 100%);
    min-height: 590px;
    margin: 0 auto;
    padding: 44px 0 48px;
}

.gpd-hero-copy {
    min-width: 0;
}

.gpd-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: #afb7bc;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
}

.gpd-kicker-line {
    width: 34px;
    height: 2px;
    background: var(--gpd-accent);
}

.gpd-title-block {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 14px;
}

.gpd-brand-name {
    color: #fff;
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.gpd-title-block h1 {
    margin: 0;
    color: var(--gpd-accent);
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.gpd-hero-description {
    max-width: 620px;
    margin: 0 0 22px;
    color: #c7cdd1;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.75;
}

.gpd-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #3a3e41;
    border-bottom: 1px solid #3a3e41;
}

.gpd-metric {
    min-width: 0;
    padding: 16px 16px;
    border-right: 1px solid #3a3e41;
}

.gpd-metric:first-child {
    padding-left: 0;
}

.gpd-metric:last-child {
    border-right: 0;
}

.gpd-metric-label {
    display: block;
    margin-bottom: 7px;
    color: #929ba1;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.35;
}

.gpd-metric strong {
    display: block;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.gpd-benefit-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 16px;
}

.gpd-benefit-list > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #b6bec3;
    font-size: 0.8rem;
    font-weight: 700;
}

.gpd-benefit-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--gpd-accent-border);
    border-radius: 50%;
    color: var(--gpd-accent);
    font-size: 0.65rem;
    font-style: normal;
}

.gpd-benefit-list b {
    color: #fff;
}

.gpd-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.gpd-primary-action,
.gpd-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 25px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.gpd-primary-action {
    border: 1px solid var(--gpd-accent);
    background: var(--gpd-accent);
    color: #fff;
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.22);
}

.gpd-primary-action:hover {
    transform: translateY(-2px);
    border-color: var(--gpd-accent-strong);
    background: var(--gpd-accent-strong);
}

.gpd-secondary-action {
    border: 1px solid #6b747a;
    background: transparent;
    color: #fff;
}

.gpd-secondary-action:hover {
    transform: translateY(-2px);
    border-color: #fff;
    background: #fff;
    color: #17191b;
}

.gpd-text-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 4px;
    color: #b6bec3;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.gpd-text-action:hover {
    color: #fff;
}

.gpd-text-action span {
    color: var(--gpd-accent);
}

.gpd-console-column {
    min-width: 0;
}

.gpd-console-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    color: #afb7bc;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0;
}

.gpd-console-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gpd-console-heading i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #42bd7b;
    box-shadow: 0 0 0 4px rgba(66, 189, 123, 0.12);
}

.gpd-console-heading strong {
    color: var(--gpd-accent);
    font-size: 0.68rem;
    letter-spacing: 0;
}

.gpd-console-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 530px;
    padding: 20px;
    border: 1px solid #3c4145;
    border-radius: 8px;
    background: #222527;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
}

.gpd-console-wrap > .np-hero-right.bp-old-host {
    width: min(100%, 374px);
    max-height: 505px;
    margin: 0;
    justify-self: auto;
}

.gpd-console-wrap > .np-hero-right.bp-old-host::before,
.gpd-console-wrap .bp-old-preview-label {
    display: none;
}

.gpd-main {
    width: min(1200px, calc(100% - 64px));
    margin: 0 auto;
    padding: 48px 0 68px;
}

.gpd-section {
    margin-bottom: 52px;
}

.gpd-section:last-child {
    margin-bottom: 0;
}

.gpd-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: end;
    gap: 48px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ccd2d6;
}

.gpd-section-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--gpd-accent-strong);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0;
}

.gpd-section-head h2 {
    margin: 0;
    color: #17191b;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0;
}

.gpd-section-head > p {
    margin: 0;
    color: #657078;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.7;
}

.gpd-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 2px solid #25292c;
    border-bottom: 1px solid #cdd3d7;
}

.gpd-workflow-step {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
    gap: 15px;
    min-height: 126px;
    padding: 20px 20px 20px 0;
    border-right: 1px solid #cdd3d7;
}

.gpd-workflow-step + .gpd-workflow-step {
    padding-left: 20px;
}

.gpd-workflow-step:last-child {
    border-right: 0;
}

.gpd-workflow-number {
    color: var(--gpd-accent-strong);
    font-size: 0.7rem;
    font-weight: 900;
}

.gpd-workflow-icon {
    font-size: 1.55rem;
    line-height: 1;
}

.gpd-workflow-step h3 {
    margin: 0 0 8px;
    color: #1b1e20;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
}

.gpd-workflow-step p {
    margin: 0;
    color: #69737a;
    font-size: 0.82rem;
    line-height: 1.65;
}

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

.gpd-feature {
    display: flex;
    flex-direction: column;
    min-height: 160px;
    padding: 18px;
    border: 1px solid #d8dde0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(25, 30, 34, 0.045);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.gpd-feature:hover {
    transform: translateY(-4px);
    border-color: var(--gpd-accent-border);
    box-shadow: 0 12px 28px rgba(25, 30, 34, 0.085);
}

.gpd-feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.gpd-feature-icon {
    font-size: 1.55rem;
    line-height: 1;
}

.gpd-feature-index {
    color: #a2a9ae;
    font-size: 0.68rem;
    font-weight: 900;
}

.gpd-feature h3 {
    margin: 0 0 8px;
    color: #1b1e20;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
}

.gpd-feature p {
    margin: 0;
    color: #69737a;
    font-size: 0.82rem;
    line-height: 1.65;
}

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

.gpd-gallery-item {
    position: relative;
    display: block;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d5dadd;
    border-radius: 8px;
    background: #fff;
    aspect-ratio: 373 / 450;
    cursor: pointer;
    box-shadow: 0 7px 22px rgba(25, 30, 34, 0.07);
}

.gpd-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.gpd-gallery-item:hover img {
    transform: scale(1.035);
}

.gpd-gallery-caption {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(18, 20, 21, 0.88);
    color: #fff;
    backdrop-filter: blur(8px);
}

.gpd-gallery-caption b {
    color: var(--gpd-accent);
    font-size: 0.68rem;
}

.gpd-gallery-caption span {
    font-size: 0.76rem;
    font-weight: 800;
}

.gpd-gallery-caption i {
    color: #aeb7bc;
    font-size: 0.9rem;
    font-style: normal;
}

.gpd-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.gpd-pricing-grid > .pd-pricing-card {
    min-width: 0;
    margin: 0;
    padding: 26px 20px;
    border: 1px solid #d7dcdf;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(25, 30, 34, 0.045);
}

.gpd-pricing-grid > .pd-pricing-card:hover {
    transform: translateY(-3px);
    border-color: var(--gpd-accent-border);
}

.gpd-pricing-grid > .pd-pricing-card.selected,
.gpd-pricing-grid > .pd-pricing-card.cyan-selected,
.gpd-pricing-grid > .pd-pricing-card.amber-selected {
    border: 2px solid var(--gpd-accent);
    background: var(--gpd-accent-soft);
    box-shadow: 0 8px 24px rgba(25, 30, 34, 0.08);
}

.gpd-pricing-grid .pd-pricing-price {
    color: #17191b;
}

.gpd-pricing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 24px 26px;
    border-radius: 8px;
    background: #202326;
    color: #fff;
}

.gpd-pricing-footer > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gpd-pricing-footer strong {
    font-size: 1rem;
    font-weight: 900;
}

.gpd-pricing-footer span {
    color: #aeb7bc;
    font-size: 0.8rem;
}

/* Unified 0820 software preview and license layout */
.gpd-console-wrap > .np-hero-right.bp-old-host.full-old-host {
    width: min(100%, 510px);
    max-height: 590px;
    aspect-ratio: 815 / 943;
}

.full-old-host .bp-old-window {
    font-size: 15px;
}

.full-old-host .bp-old-titlebar {
    height: 34px;
    flex-basis: 34px;
}

.full-old-host .bp-old-titlebar > img {
    width: 20px;
    height: 20px;
}

.full-old-host .bp-old-titlebar > strong {
    font-size: 13px;
}

.full-old-host .bp-old-window-tools button {
    width: 23px;
    height: 23px;
    font-size: 15px;
}

.full-old-summary {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 7px;
    min-height: 130px;
    flex: 0 0 130px;
    padding: 5px 6px;
    border-bottom: 1px solid #d2d2d2;
    background: #fff;
}

.full-old-summary-actions {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
}

.full-old-summary-actions button {
    padding: 0 4px;
    font-size: 12px;
}

.full-old-user-info,
.full-old-chest,
.full-old-feishu-panel fieldset,
.full-old-exp-tools fieldset {
    min-width: 0;
    margin: 0;
    padding: 5px 8px 6px;
    border: 2px solid #333;
    border-radius: 6px;
}

.full-old-user-info legend,
.full-old-chest legend,
.full-old-feishu-panel legend,
.full-old-exp-tools legend {
    padding: 0 5px;
    font-size: 14px;
    font-weight: 800;
}

.full-old-user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.full-old-user-info span {
    flex: 0 0 auto;
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.full-old-user-info span.is-notice {
    display: block;
    font-size: 13.5px;
    line-height: 19px;
    text-overflow: clip;
    white-space: normal;
}

.bp-old-tabs.full-old-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    height: 32px;
    flex-basis: 32px;
    border-bottom-color: #d6d6d6;
    background: #f5f5f5;
    box-shadow: none;
}

.full-old-tabs button {
    font-size: 11px;
}

.full-old-host .bp-old-panel {
    padding: 8px;
}

.full-old-host .bp-old-panel[data-old-panel="basic"].is-active {
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: 7px;
}

.full-old-host .bp-old-basic-left {
    gap: 4px;
    border-right: 0;
}

.full-old-host .bp-old-basic-left label {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 2px;
    height: 29px;
}

.full-old-host .bp-old-basic-left label > span {
    font-size: 12px;
}

.full-old-host .bp-old-basic-left select,
.full-old-host .bp-old-basic-left input,
.full-old-host .bp-old-select-trigger,
.full-old-host .bp-old-select-value {
    font-size: 12px;
}

.full-old-checks {
    justify-content: center;
    gap: 8px;
    padding-left: 8px;
    background: #fff;
}

.full-old-checks label,
.full-old-choice-list label,
.full-old-exp-tools > label,
.full-old-switch-rules label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

.full-old-checks input,
.full-old-choice-list input,
.full-old-exp-tools input[type="checkbox"],
.full-old-switch-rules input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #68d5cb;
}

.full-old-chest {
    grid-column: 1 / -1;
    display: grid;
    align-content: center;
    gap: 4px;
}

.full-old-chest label {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 19px;
    font-size: 11.5px;
}

.full-old-chest input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #68d5cb;
}

.full-old-host .full-old-bp-panel.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 12px 20px;
    padding: 42px 28px;
}

.full-old-bp-fields {
    gap: 8px !important;
}

.full-old-choice-list {
    display: grid;
    align-content: start;
    gap: 16px;
    padding-top: 4px;
}

.full-old-inline-action {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    align-self: start;
}

.full-old-inline-action button {
    min-height: 30px;
    padding: 0 12px;
}

.full-old-inline-action strong {
    font-size: 12px;
}

.full-old-host .full-old-exp-panel.is-active {
    display: grid;
    grid-template-columns: minmax(190px, 0.82fr) minmax(0, 1.18fr);
    gap: 10px;
}

.full-old-route-fields {
    overflow-y: auto;
    padding-right: 6px !important;
}

.full-old-route-fields label {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    height: 24px !important;
}

.full-old-route-fields .bp-old-select,
.full-old-route-fields .bp-old-select-trigger {
    height: 23px !important;
}

.full-old-exp-tools {
    display: grid;
    grid-template-rows: auto 74px 1fr;
    gap: 8px;
    min-width: 0;
}

.full-old-exp-tools fieldset input[type="range"] {
    width: 100%;
    accent-color: #65d7cd;
}

.full-old-route-pool {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 4px;
    overflow: hidden;
}

.full-old-route-pool > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #777;
    font-size: 9px;
}

.full-old-route-pool > div strong,
.full-old-route-pool > div span {
    padding: 3px;
}

.full-old-route-pool > div span {
    overflow-y: auto;
}

.full-old-route-pool button {
    min-height: 24px;
    font-size: 10px;
}

.full-old-route-pool button:last-child {
    grid-column: 2;
}

.full-old-host .full-old-account-panel.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px minmax(150px, 0.9fr);
    gap: 8px;
}

.full-old-account-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.full-old-account-lists > div {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    gap: 5px;
    text-align: center;
}

.full-old-account-lists .bp-old-account-list {
    min-height: 0;
    border: 1px solid #666;
}

.full-old-account-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.full-old-account-actions button {
    min-height: 27px;
    font-size: 10px;
}

.full-old-switch-rules {
    align-self: center;
    padding: 8px;
}

.full-old-switch-rules label {
    min-height: 30px;
}

.full-old-host .full-old-feishu-panel.is-active {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    padding: 28px 26px;
}

.full-old-feishu-panel fieldset {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 100px;
    align-items: center;
    gap: 5px 8px;
}

.full-old-feishu-panel label {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.full-old-feishu-panel input:not([type="checkbox"]) {
    width: 100%;
    height: 23px;
    border: 1px solid #777;
}

.full-old-feishu-panel button {
    grid-column: 3;
    grid-row: 1 / 4;
    min-height: 34px;
}

.full-old-host .full-old-guide-panel.is-active {
    display: block;
    padding: 26px 48px;
}

.full-old-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 28px;
}

.full-old-tools button {
    min-height: 34px;
    padding: 4px 8px;
    font-size: 10px;
}

.gpd-license-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 2px solid #25292c;
    border-bottom: 1px solid #cdd3d7;
}

.gpd-license-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 24px;
    padding: 22px 24px;
    background: transparent;
}

.gpd-license-card + .gpd-license-card {
    border-left: 1px solid #cdd3d7;
}

.gpd-license-card > div span,
.gpd-pricing-version header span {
    color: #687077;
    font-size: 0.66rem;
    font-weight: 900;
}

.gpd-license-card h3,
.gpd-pricing-version h3 {
    margin: 3px 0 0;
    font-size: 1.15rem;
}

.gpd-license-card > strong {
    align-self: end;
    color: #047b94;
    font-size: 1rem;
}

.gpd-license-card.is-jy > strong {
    color: #ad6305;
}

.gpd-license-card p {
    grid-column: 1 / -1;
    margin: 4px 0 8px;
    color: #657078;
    font-size: 0.82rem;
    line-height: 1.6;
}

.gpd-license-card button,
.gpd-pricing-version header button {
    width: fit-content;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid #b9c1c6;
    border-radius: 5px;
    background: #fff;
    color: #25292c;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

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

.gpd-gallery-grid-unified .gpd-gallery-item {
    aspect-ratio: 815 / 943;
}

.gpd-pricing-versions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gpd-pricing-version {
    min-width: 0;
    padding: 18px;
    border: 1px solid #d3d9dd;
    border-top: 3px solid #0898b5;
    border-radius: 7px;
    background: #fff;
}

.gpd-pricing-version.is-jy {
    border-top-color: #d7830b;
}

.gpd-pricing-version header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.gpd-pricing-version .gpd-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}

.gpd-pricing-version .pd-pricing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 114px;
    padding: 14px 8px;
}

.gpd-pricing-version .pd-pricing-price {
    display: block;
    margin: 5px 0 2px;
    font-size: 1.35rem;
}

@media (max-width: 1264px) {
    .gpd-hero-inner {
        width: calc(100% - 64px);
        gap: 42px;
    }
}

@media (max-width: 1050px) {
    .gpd-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
        gap: 32px;
    }

    .gpd-brand-name,
    .gpd-title-block h1 {
        font-size: 2.25rem;
    }

    .gpd-console-wrap {
        min-height: 500px;
        padding: 18px;
    }

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

@media (max-width: 900px) {
    .gpd-version-bar {
        padding-right: 20px;
        padding-left: 20px;
    }

    .gpd-hero-inner {
        grid-template-columns: 1fr;
        width: min(680px, calc(100% - 40px));
        min-height: 0;
        padding: 38px 0 42px;
    }

    .gpd-console-column {
        margin-top: 6px;
    }

    .gpd-console-wrap {
        min-height: 0;
        padding: 20px;
    }

    .gpd-console-wrap > .np-hero-right.bp-old-host {
        width: min(100%, 374px);
        max-height: 505px;
        aspect-ratio: 374 / 505;
    }

    .gpd-main {
        width: min(680px, calc(100% - 40px));
        padding-top: 40px;
    }

    .gpd-section {
        margin-bottom: 40px;
    }

    .gpd-section-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gpd-workflow {
        grid-template-columns: 1fr;
    }

    .gpd-workflow-step,
    .gpd-workflow-step + .gpd-workflow-step {
        min-height: 0;
        padding: 22px 0;
        border-right: 0;
        border-bottom: 1px solid #d2d7da;
    }

    .gpd-workflow-step:last-child {
        border-bottom: 0;
    }

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

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

    .gpd-pricing-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .gpd-version-inner {
        grid-template-columns: 1fr;
    }

    .gpd-version-label,
    .gpd-version-meta {
        display: none;
    }

    .gpd-tabs {
        width: 100%;
        min-width: 0;
    }

    .gpd-unified-status {
        width: 100%;
    }

    .gpd-hero-inner,
    .gpd-main {
        width: calc(100% - 28px);
    }

    .gpd-kicker {
        margin-bottom: 18px;
        font-size: 0.66rem;
    }

    .gpd-title-block {
        display: block;
    }

    .gpd-brand-name,
    .gpd-title-block h1 {
        display: block;
        font-size: 2rem;
        line-height: 1.12;
    }

    .gpd-title-block h1 {
        margin-top: 5px;
    }

    .gpd-hero-description {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .gpd-metrics {
        grid-template-columns: 1fr;
    }

    .gpd-metric,
    .gpd-metric:first-child {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 13px 0;
        border-right: 0;
        border-bottom: 1px solid #3a3e41;
    }

    .gpd-metric:last-child {
        border-bottom: 0;
    }

    .gpd-metric-label {
        margin-bottom: 0;
    }

    .gpd-metric strong {
        font-size: 1.2rem;
        text-align: right;
    }

    .gpd-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gpd-text-action {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .gpd-console-wrap {
        padding: 18px 10px;
    }

    .gpd-console-wrap > .np-hero-right.bp-old-host {
        width: min(100%, 330px);
        max-height: 400px;
        aspect-ratio: 330 / 400;
    }

    .gpd-console-wrap > .np-hero-right.bp-old-host.full-old-host {
        max-height: 430px;
        aspect-ratio: 815 / 1000;
    }

    .gpd-section-head h2 {
        font-size: 1.65rem;
    }

    .gpd-feature-grid,
    .gpd-gallery-grid {
        grid-template-columns: 1fr;
    }

    .gpd-license-grid,
    .gpd-pricing-versions {
        grid-template-columns: 1fr;
    }

    .gpd-license-card + .gpd-license-card {
        border-top: 1px solid #cdd3d7;
        border-left: 0;
    }

    .gpd-pricing-version .gpd-pricing-grid {
        grid-template-columns: 1fr;
    }

    .gpd-feature {
        min-height: 0;
    }

    .gpd-pricing-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .gpd-pricing-footer .gpd-primary-action {
        width: 100%;
    }

    .full-old-summary {
        grid-template-columns: 68px minmax(0, 1fr);
        min-height: 138px;
        flex-basis: 138px;
    }

    .full-old-host .full-old-bp-panel.is-active {
        grid-template-columns: minmax(0, 1fr) 120px;
        gap: 10px;
        padding: 20px 12px;
    }

    .full-old-host .full-old-exp-panel.is-active {
        grid-template-columns: 145px minmax(0, 1fr);
    }

    .full-old-host .full-old-account-panel.is-active {
        grid-template-columns: minmax(0, 1fr) 72px 110px;
        gap: 5px;
    }

    .full-old-host .full-old-feishu-panel.is-active {
        padding: 18px 10px;
    }

    .full-old-feishu-panel fieldset {
        grid-template-columns: 78px minmax(0, 1fr) 70px;
    }

    .full-old-feishu-panel label {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .full-old-host .full-old-guide-panel.is-active {
        padding: 22px 16px;
    }

    .full-old-tools {
        gap: 14px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gpd-page *,
    .gpd-page *::before,
    .gpd-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.delivery-support-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.45;
}

.delivery-support-heading::before {
    content: '';
    width: 3px;
    height: 14px;
    flex: 0 0 3px;
    border-radius: 2px;
    background: #0098c7;
}

.delivery-support-list {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    column-gap: 16px;
}

.delivery-support-item {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 8px 0 7px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.delivery-support-index {
    width: 27px;
    flex: 0 0 27px;
    color: #087f9f;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
}

.delivery-support-item:nth-child(2) .delivery-support-index {
    color: #b45309;
}

.delivery-support-text {
    color: #1f2937;
    font-size: 0.81rem;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 420px) {
    .delivery-support-list {
        grid-template-columns: 1fr;
    }
}

/* 合并卡密页面 */
.merge-page {
    max-width: 720px;
    min-height: 100vh;
    margin: 0 auto;
    padding: calc(var(--nav-height) + 28px) 24px 48px;
}

.merge-header {
    margin-bottom: 20px;
    text-align: center;
}

.merge-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--accent-cyan);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.merge-title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 800;
}

.merge-title-note {
    margin: 5px 0 0;
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.6;
}

.merge-subtitle {
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.merge-service-notice {
    margin: 0 0 14px;
    color: #000;
    font-size: 1rem;
    font-weight: 700;
}

.merge-service-notice-primary {
    color: var(--accent-cyan);
}

.merge-form {
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
}
.merge-field {
    margin-bottom: 20px;
}

.merge-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.merge-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font: inherit;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.merge-input::placeholder {
    color: var(--text-tertiary);
}

.merge-input:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 152, 199, 0.12);
}

.merge-textarea {
    min-height: 54px;
    resize: vertical;
}

.merge-direction-field {
    margin: 4px 0 20px;
    padding: 18px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.merge-direction-heading .merge-label {
    margin-bottom: 4px;
}

.merge-direction-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.merge-direction-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.merge-direction-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.merge-direction-option.is-selected {
    color: var(--accent-cyan);
    background: rgba(0, 152, 199, 0.08);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(0, 152, 199, 0.1);
}

.merge-direction-option:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 152, 199, 0.2);
}

.merge-source-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 4px 0 26px;
    padding: 18px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.merge-source-field .merge-label {
    margin-bottom: 4px;
}

.merge-field-hint {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.78rem;
}

.merge-source-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.merge-source-state {
    min-width: 76px;
    color: var(--accent-cyan);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
}

.merge-switch {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 28px;
    cursor: pointer;
}

.merge-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.merge-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #94a3b8;
    transition: background 0.2s ease;
}

.merge-switch-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease;
}

.merge-switch input:checked + .merge-switch-track {
    background: var(--accent-cyan);
}

.merge-switch input:checked + .merge-switch-track .merge-switch-thumb {
    transform: translateX(20px);
}

.merge-switch input:focus-visible + .merge-switch-track {
    box-shadow: 0 0 0 3px rgba(0, 152, 199, 0.2);
}

.merge-submit-area {
    text-align: center;
}

.merge-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 180px;
}

.merge-submit-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}

.merge-status {
    min-height: 1.4em;
    margin: 14px 0 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

.merge-status.pending {
    color: var(--text-secondary);
}

.merge-status.success {
    color: #059669;
}

.merge-status.error {
    color: #dc2626;
}

.merge-notice-overlay {
    z-index: 10020;
}

.merge-notice-modal {
    width: min(500px, calc(100vw - 32px));
    padding: 30px 28px 26px;
    text-align: center;
}

.merge-notice-modal.is-external-first {
    border-top: 4px solid #f59e0b;
}

.merge-notice-external-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    margin: -4px auto 10px;
    padding: 4px 10px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

.merge-notice-x {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #4b5563;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.merge-notice-x:hover {
    background: rgba(15, 23, 42, 0.07);
    color: var(--text-primary);
}

.merge-notice-x:active {
    transform: scale(0.94);
}

.merge-notice-x:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 1px;
}

.merge-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    border-radius: 50%;
    color: #a16207;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    font-size: 1.25rem;
    font-weight: 800;
}

.merge-notice-icon.is-error {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fca5a5;
    font-size: 1.55rem;
}

.merge-notice-icon.is-success {
    color: #047857;
    background: #d1fae5;
    border-color: #6ee7b7;
    font-size: 1.35rem;
}

.merge-notice-modal h2 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.merge-notice-modal p {
    margin: 14px 0 22px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.8;
}

.merge-notice-modal .merge-notice-message.is-emphasized {
    color: var(--text-primary);
    font-weight: 600;
}

.merge-notice-modal .merge-notice-extra {
    margin-top: -10px;
    color: var(--text-tertiary);
    font-size: 0.82rem;
    line-height: 1.7;
}

.merge-notice-modal .merge-notice-secondary {
    margin: -10px 0 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
}

.merge-notice-details {
    margin: 2px 0 22px;
    text-align: left;
}

.merge-notice-detail-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--border-color);
}

.merge-notice-detail-row:last-child {
    border-bottom: 1px solid var(--border-color);
}

.merge-notice-detail-row dt,
.merge-notice-detail-row dd {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
}

.merge-notice-detail-row dt {
    color: var(--text-tertiary);
    font-weight: 600;
}

.merge-notice-detail-row dd {
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
    user-select: text;
}

.merge-notice-detail-row.is-primary dt,
.merge-notice-detail-row.is-primary dd {
    color: #047857;
    font-weight: 700;
}

.merge-notice-site-reminder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -4px 0 20px;
    padding: 12px 14px;
    text-align: left;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-left: 4px solid #0891b2;
    border-radius: 8px;
}

.merge-notice-site-reminder > span {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.merge-notice-site-reminder > strong {
    min-width: 0;
    color: #0e7490;
    font-size: 14px;
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

.merge-notice-site-reminder small {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.merge-notice-services {
    margin: 0 0 18px;
    background: rgba(0, 152, 199, 0.045);
    border-top: 1px solid rgba(0, 152, 199, 0.18);
    border-bottom: 1px solid rgba(0, 152, 199, 0.18);
    text-align: left;
}

.merge-notice-service {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 13px 6px;
}

.merge-notice-service + .merge-notice-service {
    border-top: 1px solid rgba(0, 152, 199, 0.12);
}

.merge-notice-service-index {
    color: var(--accent-cyan);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.merge-notice-service-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.merge-notice-service-content strong {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
}

.merge-notice-service-content small {
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.55;
}

.merge-notice-modal .merge-notice-footnote {
    margin: -8px 0 20px;
    color: #7c2d12;
    font-size: 0.84rem;
    font-weight: 600;
}

.merge-notice-close {
    min-width: 120px;
}

.merge-notice-actions {
    flex-wrap: wrap;
    margin-top: 0;
}

.merge-admin-contact {
    min-width: 140px;
}

@media (max-width: 640px) {
    .merge-notice-modal {
        padding: 26px 18px 22px;
    }

    .merge-notice-detail-row {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
    }

    .merge-notice-site-reminder {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .merge-notice-site-reminder > strong {
        text-align: left;
    }

    .merge-notice-service {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 4px;
    }

    .merge-page {
        padding: calc(var(--nav-height) + 20px) 12px 32px;
    }

    .merge-form {
        padding: 22px 16px;
    }

    .merge-source-field {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .merge-source-control {
        width: 100%;
        justify-content: flex-end;
    }

    .merge-direction-options {
        grid-template-columns: 1fr;
    }
}

/* Reassert experience-console variants after the shared legacy-console rules. */
.np-hero.bp-product-hero .jy-old-host {
    margin-right: 40px;
}
.jy-old-host .jy-old-quickbar {
    grid-template-columns: 118px minmax(0, 1fr) 38px;
}
.jy-old-host .jy-old-basic-left label {
    grid-template-columns: 72px minmax(0, 1fr);
}
.jy-old-host .jy-old-checks {
    gap: 0;
    padding: 2px;
    background: #fff;
}
.jy-old-host .jy-old-checks label {
    min-height: 22px;
    gap: 2px;
}
.jy-old-host .jy-old-route-panel {
    padding: 8px;
}
.jy-old-host .jy-old-feishu-panel > p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.2;
}
.jy-old-host .jy-old-switch-rules {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1px;
    margin: 0;
    padding: 3px;
}
.jy-old-host .jy-old-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

@media (max-width: 900px) {
    .np-hero.bp-product-hero .jy-old-host {
        margin-right: 0;
    }
    .jy-old-host .jy-old-quickbar {
        grid-template-columns: 90px minmax(0, 1fr) 30px;
    }
    .jy-old-host .jy-old-basic-left label {
        grid-template-columns: 62px minmax(0, 1fr);
    }
    .jy-old-host .jy-old-checks label {
        min-height: 16px;
    }
    .jy-old-host .jy-old-route-panel {
        padding: 5px;
    }
    .jy-old-host .jy-old-feishu-panel > p {
        font-size: 8px;
    }
    .jy-old-host .jy-old-switch-rules {
        padding: 2px;
    }
    .jy-old-host .jy-old-tools {
        gap: 4px;
    }
}

/* 0820 homepage: fixed three-screen software showcase. */
.home-v2-content {
    grid-template-columns: minmax(420px, 0.82fr) minmax(600px, 1.18fr);
    gap: 28px;
    max-width: 1480px;
    padding-top: calc(var(--nav-height) + 34px);
    padding-bottom: 24px;
}

.home-v2-copy {
    gap: 15px;
}

.home-v2-brand {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.home-v2-brand > img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
}

.home-v2-brand > div > span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
}

.home-v2 .hero-premium-title {
    margin: 0;
    font-size: 3.4rem;
    letter-spacing: 0;
}

.home-v2 .hero-premium-title .title-amber {
    font-size: 0.76em;
}

.home-v2 .hero-premium-desc {
    max-width: 560px;
    margin: 0;
}

.home-v2-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 570px;
}

.home-v2-yield {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 12px 15px 13px 17px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 4px;
    background: rgba(6, 12, 19, 0.6);
}

.home-v2-yield::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #22d3ee;
}

.home-v2-yield.is-exp::before {
    background: #f5a623;
}

.home-v2-yield-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.home-v2-yield-head span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 800;
}

.home-v2-yield-head i {
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 800;
}

.home-v2-yield strong {
    display: flex;
    align-items: baseline;
    color: #fff;
    line-height: 1.2;
}

.home-v2-yield strong b {
    color: #22d3ee;
    font-size: 1.48rem;
    font-weight: 900;
}

.home-v2-yield.is-exp strong b {
    color: #f5a623;
}

.home-v2-yield strong em {
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 800;
}

.home-v2-yield strong small {
    margin-left: 2px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.7rem;
}

.home-v2-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    max-width: 570px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.home-v2-benefits > span {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
    min-height: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.home-v2-benefits i {
    color: #22d3ee;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
}

.home-v2-benefits b {
    min-width: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 750;
}

.home-v2-benefits em {
    margin-left: auto;
    color: #f5a623;
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.home-v2-benefits-more {
    width: min(100%, 570px);
    margin-top: -10px;
    color: #22d3ee;
    font-family: "Courier New", monospace;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.home-v2-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.home-v2-detail-link span {
    color: #22d3ee;
    transition: transform 0.2s ease;
}

.home-v2-detail-link:hover span {
    transform: translateX(4px);
}

.home-v2-visual {
    position: relative;
    display: block;
    min-width: 0;
    perspective: 1500px;
}

.home-v2-stage {
    position: relative;
    width: min(100%, 780px);
    height: 590px;
    margin: 0 auto;
    transform-style: preserve-3d;
    will-change: transform;
}

.home-v2-screen {
    position: absolute;
    width: 330px;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 6px;
    background: #101418;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.home-v2-screen:hover {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 34px 72px rgba(0, 0, 0, 0.64);
}

.home-v2-screen.is-basic {
    top: 96px;
    left: 12px;
    z-index: 3;
    transform: rotateY(14deg) rotateZ(-1deg) translateZ(20px);
    transform-origin: right center;
}

.home-v2-screen.is-exp {
    top: 6px;
    left: 50%;
    z-index: 1;
    width: 380px;
    transform: translateX(-50%) translateZ(-12px);
}

.home-v2-screen.is-bp {
    top: 96px;
    right: -30px;
    z-index: 2;
    transform: rotateY(-14deg) rotateZ(1deg) translateZ(20px);
    transform-origin: left center;
}

.home-v2-screen-head {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 9px;
    height: 32px;
    padding: 0 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.home-v2-screen-head span {
    color: #22d3ee;
    font-size: 0.65rem;
    font-weight: 900;
}

.home-v2-screen.is-exp .home-v2-screen-head span {
    color: #f5a623;
}

.home-v2-screen-head strong {
    font-size: 0.76rem;
}

.home-v2-screen-head i {
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.home-v2-screen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 815 / 943;
    object-fit: cover;
    image-rendering: auto;
    transform: translateZ(0);
}

.home-v2-screen figcaption {
    min-height: 38px;
    padding: 10px 11px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    line-height: 1.45;
}

.home-v2-visual-note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    width: min(100%, 780px);
    margin: -2px auto 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0;
}

.home-v2-visual-note span {
    width: 34px;
    height: 1px;
    background: #22d3ee;
}

/* Keep the product page compact while preserving every version section. */
.gpd-page .gpd-hero-inner {
    min-height: 530px;
    padding-top: calc(var(--nav-height) + 18px);
    padding-bottom: 36px;
}

.gpd-page .gpd-console-wrap {
    min-height: 490px;
}

.gpd-page .gpd-main {
    padding-top: 34px;
    padding-bottom: 48px;
}

.gpd-page .gpd-section {
    margin-bottom: 34px;
}

.gpd-page .gpd-section-head {
    margin-bottom: 18px;
    padding-bottom: 12px;
}

.gpd-page .gpd-feature {
    min-height: 142px;
    padding: 16px;
}

.gpd-page .gpd-feature-top {
    margin-bottom: 12px;
}

.gpd-license-benefits {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gpd-license-benefits li {
    position: relative;
    min-height: 30px;
    padding: 7px 0 7px 17px;
    border-top: 1px solid #e1e5e7;
    color: #4d5960;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.4;
}

.gpd-license-benefits li::before {
    content: '✓';
    position: absolute;
    top: 7px;
    left: 0;
    color: #078aa5;
    font-weight: 900;
}

.gpd-license-card.is-jy .gpd-license-benefits li::before {
    color: #c87508;
}

.gpd-license-card p b {
    color: #ad6305;
}

@media (max-width: 1260px) {
    .home-v2-content {
        grid-template-columns: minmax(360px, 0.78fr) minmax(540px, 1.22fr);
        padding-right: 28px;
        padding-left: 28px;
    }

    .home-v2 .hero-premium-title {
        font-size: 2.9rem;
    }

    .home-v2-stage {
        transform: scale(0.9);
    }
}

@media (max-width: 1024px) {
    .home-v2-content {
        grid-template-columns: 1fr;
        width: min(760px, 100%);
        gap: 18px;
        padding-top: calc(var(--nav-height) + 22px);
    }

    .home-v2-copy {
        width: min(100%, 640px);
        margin: 0 auto;
    }

    .home-v2-stage {
        transform: none;
    }

    .home-v2 .hero-premium-bottom {
        padding-top: 4px;
    }
}

@media (max-width: 720px) {
    .gpd-page .gpd-hero-inner {
        padding-top: calc(var(--nav-height) + 20px);
    }

    .home-v2-brand {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 12px;
    }

    .home-v2-brand > img {
        width: 80px;
        height: 80px;
    }

    .home-v2 .hero-premium-title {
        font-size: 2.2rem;
        letter-spacing: 0;
    }

    .home-v2-yield strong b {
        font-size: 1.32rem;
    }

    .home-v2-stage {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
        height: auto;
    }

    .home-v2-screen,
    .home-v2-screen.is-basic,
    .home-v2-screen.is-bp,
    .home-v2-screen.is-exp {
        position: relative;
        inset: auto;
        width: auto;
        transform: none;
    }

    .home-v2-screen-head {
        grid-template-columns: auto 1fr;
        height: 29px;
        padding: 0 7px;
    }

    .home-v2-screen-head i,
    .home-v2-screen figcaption {
        display: none;
    }

    .home-v2-visual-note {
        margin-top: 10px;
    }
}

@media (max-width: 520px) {
    .home-v2-content {
        padding-right: 14px;
        padding-left: 14px;
    }

    .home-v2-brand {
        grid-template-columns: 66px minmax(0, 1fr);
    }

    .home-v2-brand > img {
        width: 66px;
        height: 66px;
    }

    .home-v2 .hero-premium-title {
        font-size: 1.75rem;
        letter-spacing: 0;
    }

    .home-v2-yield {
        padding: 10px 9px 10px 13px;
    }

    .home-v2-yield-head span {
        font-size: 0.64rem;
    }

    .home-v2-yield-head i {
        font-size: 0.48rem;
    }

    .home-v2-yield strong b {
        font-size: 1.16rem;
    }

    .home-v2-yield strong em {
        font-size: 0.75rem;
    }

    .home-v2-yield strong small {
        font-size: 0.6rem;
    }

    .home-v2-benefits {
        column-gap: 10px;
    }

    .home-v2-benefits > span {
        gap: 5px;
    }

    .home-v2-benefits b {
        font-size: 0.66rem;
    }

    .home-v2-benefits em {
        font-size: 0.58rem;
    }

    .home-v2 .hero-premium-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .home-v2 .btn-premium-primary {
        grid-column: 1 / -1;
    }

    .home-v2 .hero-premium-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gpd-license-benefits {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-v2-stage,
    .home-v2-screen,
    .home-v2-detail-link span {
        transition: none;
    }
}

@font-face {
    font-family: "CSZS Software UI";
    src: url("fonts/cszs-software-ui.ttf?v=1") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.np-hero-right.bp-old-host .bp-old-window,
.np-hero-right.bp-old-host .bp-old-window * {
    font-family: "CSZS Software UI", "Microsoft YaHei", sans-serif;
}

.np-hero-right.bp-old-host .full-old-route-fields .bp-old-select-value {
    font-size: 11px;
}

/* Tutorial v2: compact operations guide */
.tutorial-page-v2 {
    width: min(1180px, calc(100% - 40px));
    max-width: none;
    padding: 16px 0 80px;
    color: #182333;
}

.tutorial-v2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(350px, 0.94fr);
    gap: 32px;
    align-items: stretch;
    min-height: 360px;
    margin-bottom: 20px;
    padding: 42px 44px;
    overflow: hidden;
    background: #101a2a;
    border: 1px solid #25364e;
    border-radius: 8px;
    color: #f8fafc;
}

.tutorial-v2-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.tutorial-eyebrow,
.tutorial-section-index,
.tutorial-kicker {
    color: #27b7d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.tutorial-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.tutorial-eyebrow span {
    width: 24px;
    height: 2px;
    background: #27b7d8;
}

.tutorial-v2-hero .tutorial-title {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(2rem, 4vw, 3.55rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.tutorial-v2-hero .tutorial-title em {
    color: #f6ae3b;
    font-style: normal;
}

.tutorial-v2-hero-desc {
    max-width: 620px;
    margin: 20px 0 0;
    color: #a9b8cb;
    font-size: 15px;
    line-height: 1.8;
}

.tutorial-v2-hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}

.tutorial-v2-primary,
.tutorial-v2-secondary,
.tutorial-v2-support-actions a,
.tutorial-v2-support-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.tutorial-v2-primary {
    gap: 12px;
    background: #27b7d8;
    color: #071521;
}

.tutorial-v2-primary span {
    font-size: 18px;
}

.tutorial-v2-secondary {
    border: 1px solid #49627f;
    color: #dbe8f6;
}

.tutorial-v2-feishu-action { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 7px 13px 7px 9px; border: 1px solid rgba(39, 183, 216, 0.55); border-radius: 5px; background: rgba(39, 183, 216, 0.1); color: #eafaff; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.tutorial-v2-feishu-action:hover { border-color: #55d3f0; background: rgba(39, 183, 216, 0.2); color: #fff; transform: translateY(-1px); }
.tutorial-v2-feishu-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 4px; background: #27b7d8; color: #071521; font-size: 15px; font-weight: 900; }
.tutorial-v2-feishu-action > span:last-child { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.tutorial-v2-feishu-action b { color: #f4fbff; font-size: 12px; line-height: 1.25; }
.tutorial-v2-feishu-action small { color: #9fc6d4; font-size: 10px; line-height: 1.25; }

.tutorial-v2-hero-panel {
    align-self: center;
    overflow: hidden;
    background: #142238;
    border: 1px solid #3a526f;
    border-radius: 6px;
    box-shadow: 0 18px 42px rgba(3, 10, 22, 0.32);
}

.tutorial-v2-hero-panel-top,
.tutorial-v2-hero-panel-foot,
.tutorial-v2-hero-panel-line {
    display: flex;
    align-items: center;
}

.tutorial-v2-hero-panel-top,
.tutorial-v2-hero-panel-foot {
    justify-content: space-between;
}

.tutorial-v2-hero-panel-top {
    min-height: 62px;
    padding: 0 20px;
    border-bottom: 1px solid #2c4058;
    background: #1b2c44;
    color: #f4f8fc;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
}

.tutorial-v2-hero-panel-top b {
    padding: 5px 9px;
    border: 1px solid rgba(246, 174, 59, 0.45);
    border-radius: 4px;
    background: rgba(246, 174, 59, 0.1);
    color: #ffc866;
    font-size: 12px;
    line-height: 1;
}

.tutorial-v2-hero-panel-line {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 72px;
    padding: 9px 20px;
    border-bottom: 1px solid #2c4058;
    background: rgba(255, 255, 255, 0.012);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tutorial-v2-hero-panel-line:hover {
    border-bottom-color: #3b5877;
    background: rgba(39, 183, 216, 0.075);
}

.tutorial-v2-hero-panel-line i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(39, 183, 216, 0.48);
    border-radius: 4px;
    background: rgba(39, 183, 216, 0.1);
    color: #55d3f0;
    font-size: 15px;
    font-style: normal;
    font-weight: 900;
}

.tutorial-v2-hero-panel-line span {
    color: #f4f8fc;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

/* Purchase v2: focused checkout workspace */
.purchase-page { width: min(1040px, calc(100% - 40px)); max-width: none; padding-top: calc(var(--nav-height) + 34px); }
.purchase-hero { margin: 0 0 24px; padding: 28px 32px 24px; border: 1px solid #c8d8e7; border-radius: 8px; background: linear-gradient(120deg, #102137 0%, #18334d 66%, #174a60 100%); color: #f5fbff; text-align: left; box-shadow: 0 18px 45px rgba(17, 44, 70, 0.16); }
.purchase-hero-kicker { display: flex; align-items: center; gap: 9px; color: #78d8ed; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; }
.purchase-hero-kicker > span { width: 22px; height: 2px; background: #36c4e3; }
.purchase-hero-kicker strong { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(126, 226, 184, 0.45); border-radius: 4px; color: #7ee2b8; font-size: 10px; letter-spacing: 0; }
.purchase-hero h1 { margin: 14px 0 5px; color: #fff; font-size: clamp(1.8rem, 3vw, 2.55rem); font-weight: 900; letter-spacing: 0; }
.purchase-hero p { margin: 0; color: #b9ccdd; font-size: 14px; }
.purchase-hero-meta { display: flex; align-items: center; gap: 12px; margin-top: 24px; color: #dcebf6; font-size: 13px; font-weight: 700; }
.purchase-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.purchase-hero-meta b { color: #52d1ed; font-size: 11px; }
.purchase-hero-meta i { width: 30px; height: 1px; background: #4b6a84; }
.purchase-benefit-banner { margin-bottom: 18px; border-color: #c9dbe9; border-radius: 8px; box-shadow: 0 8px 24px rgba(26, 53, 77, 0.07); }
.purchase-benefit-banner .benefit-main { grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr); padding: 18px 24px; }
.purchase-benefit-banner .benefit-heading strong { font-size: 1.05rem; }
.purchase-benefit-banner .benefit-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.purchase-section { padding: 28px 30px; border-color: #cddbe7; border-radius: 8px; box-shadow: 0 10px 30px rgba(24, 50, 74, 0.06); }
.purchase-section .section-title { margin-bottom: 18px; color: #1b334a; font-size: 1.08rem; font-weight: 850; }
.section-num { width: 28px; height: 28px; border-radius: 6px; font-size: 0.8rem; }
.product-select-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; }
.product-select-card { position: relative; min-height: 112px; align-items: flex-start; padding: 20px 18px; border: 1px solid #cbd9e5; border-radius: 6px; background: #f9fbfd; box-shadow: none; }
.product-select-card::after { content: ""; position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border: 2px solid #b4c6d5; border-radius: 50%; }
.product-select-card.selected::after { border-color: #fff; background: #fff; box-shadow: 0 0 0 3px #27b7d8; }
.product-select-card.selected { border-color: #159fbe; background: #e8f8fc; box-shadow: 0 0 0 2px rgba(21, 159, 190, 0.16); }
.product-card-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: #e4f3f8; font-size: 1.45rem; }
.product-card-info .name { color: #18334b; font-size: 1.02rem; font-weight: 850; }
.product-select-card .sub { margin-top: 5px; color: #647b8e; font-size: 0.8rem; line-height: 1.45; }
.duration-select-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.duration-select-card { min-height: 92px; padding: 16px 10px; border: 1px solid #cbd9e5; border-radius: 6px; background: #fbfcfe; box-shadow: none; }
.duration-select-card.selected { border-color: #159fbe; background: #e8f8fc; box-shadow: 0 0 0 2px rgba(21, 159, 190, 0.14); }
.duration-select-card .dur-name { color: #29445b; font-size: 0.9rem; font-weight: 800; }
.duration-select-card .dur-price { margin-top: 7px; color: #078aa8; font-size: 1.25rem; }
.form-group.form-row .form-label { width: 88px; color: #35536a; font-weight: 750; }
.form-group.form-row .form-input, .form-group.form-row .input-wrapper { max-width: 420px; }
.payment-grid { grid-template-columns: minmax(180px, 260px); }
.payment-card { padding: 14px 18px; border: 1px solid #cbd9e5; border-radius: 6px; background: #fbfcfe; box-shadow: none; }
.payment-card.selected { border-color: #159fbe; background: #e8f8fc; box-shadow: 0 0 0 2px rgba(21, 159, 190, 0.14); }
.purchase-pay-btn { min-height: 56px; margin-top: 22px; border-radius: 6px; background: #119fbe; font-size: 1.08rem; }
.purchase-pay-btn:not(:disabled):hover { background: #087f9f; transform: translateY(-1px); }
.tutorial-qq-section { margin-top: 24px; padding: 22px 24px; border-radius: 8px; }
@media (max-width: 760px) { .purchase-page { width: min(100% - 24px, 620px); padding-top: calc(var(--nav-height) + 20px); } .purchase-hero { padding: 22px 20px; } .purchase-hero-meta { align-items: flex-start; flex-direction: column; gap: 8px; } .purchase-hero-meta i { display: none; } .purchase-benefit-banner .benefit-main { grid-template-columns: 1fr; } .purchase-section { padding: 22px 18px; } .product-select-grid, .duration-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .product-select-grid, .duration-select-grid { grid-template-columns: 1fr; } .form-group.form-row { align-items: stretch; flex-direction: column; gap: 6px; } .form-group.form-row .form-label { width: auto; } .form-group.form-row .form-input, .form-group.form-row .input-wrapper { max-width: none; } }

/* Restore the original purchase-page composition. */
.purchase-page { width: auto; max-width: 720px; padding-top: calc(var(--nav-height) + 16px); }
.purchase-benefit-banner { margin-bottom: 20px; border-color: rgba(0, 152, 199, 0.3); border-radius: 8px; box-shadow: 0 6px 20px rgba(26, 29, 40, 0.05); }
.purchase-benefit-banner .benefit-main { grid-template-columns: minmax(260px, 0.97fr) minmax(290px, 1.03fr); gap: 18px; padding: 20px 22px; }
.purchase-benefit-banner .benefit-heading strong { font-size: 0.98rem; }
.purchase-section { padding: 24px; border-color: var(--border-color); border-radius: var(--radius-lg); box-shadow: none; }
.purchase-section .section-title { margin-bottom: 16px; color: var(--text-primary); font-size: 1rem; font-weight: 600; }
.section-num { width: 22px; height: 22px; border-radius: 50%; font-size: 0.72rem; }
.product-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.product-select-card { position: static; min-height: 0; align-items: center; padding: 18px 20px; border: 2px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--card-shadow); }
.product-select-card::after { display: none; }
.product-select-card.selected { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); box-shadow: 0 0 0 1px var(--accent-cyan), var(--shadow-cyan); }
.product-card-icon { display: block; width: auto; height: auto; border-radius: 0; background: transparent; font-size: 1.8rem; }
.product-card-info .name { color: inherit; font-size: 0.95rem; font-weight: 600; }
.product-select-card .sub { margin-top: 0; color: var(--text-secondary); font-size: 0.78rem; }
.duration-select-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.duration-select-card { min-height: 0; padding: 18px 12px; border: 2px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--card-shadow); }
.duration-select-card.selected { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); box-shadow: 0 0 0 1px var(--accent-cyan), var(--shadow-cyan); }
.duration-select-card .dur-name { color: inherit; font-size: 0.85rem; }
.duration-select-card .dur-price { margin-top: 0; font-size: 1.1rem; }
.form-group.form-row .form-label { width: 72px; color: var(--text-secondary); font-weight: 500; }
.form-group.form-row .form-input, .form-group.form-row .input-wrapper { max-width: 260px; }
.payment-grid { grid-template-columns: repeat(2, 1fr); }
.payment-card { padding: 20px; border: 2px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); box-shadow: none; }
.payment-card.selected { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); box-shadow: none; }
.purchase-pay-btn { min-height: 0; margin-top: 20px; border-radius: var(--radius-md); background: var(--gradient-cyan); font-size: 1.05rem; }
.tutorial-qq-section { margin-top: 40px; padding: 32px 24px; border-radius: 12px; }
@media (max-width: 760px) { .purchase-page { width: min(100% - 24px, 600px); padding-top: calc(var(--nav-height) + 24px); } .purchase-section { padding: 18px 16px; border-radius: var(--radius-md); } .product-select-grid, .duration-select-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .product-select-grid, .duration-select-grid { grid-template-columns: repeat(2, 1fr); } }

.tutorial-v2-hero-panel-line b {
    min-width: 54px;
    padding: 5px 7px;
    border-radius: 4px;
    background: #223650;
    color: #a9bed5;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    letter-spacing: 0;
}

.tutorial-v2-hero-panel-foot {
    min-height: 54px;
    padding: 0 20px;
    background: #101c2e;
    color: #a9b8cb;
    font-size: 13px;
    font-weight: 700;
}

.tutorial-v2-hero-panel-foot .status-dot {
    color: #7ee2b8;
}

.status-dot::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #41d39b;
    vertical-align: 1px;
}

.tutorial-v2-notice {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 52px;
    padding: 17px 20px;
    border: 1px solid #f1d19c;
    border-left: 4px solid #e49b27;
    border-radius: 6px;
    background: #fffaf0;
}

.tutorial-v2-notice-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e49b27;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.tutorial-v2-notice strong {
    color: #7b4d0b;
    font-size: 15px;
}

.tutorial-v2-notice p {
    margin: 4px 0 0;
    color: #8a6a39;
    font-size: 13px;
    line-height: 1.6;
}

.tutorial-v2-section {
    margin-bottom: 56px;
    scroll-margin-top: calc(var(--nav-height) + 24px);
}

.tutorial-v2-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.tutorial-v2-section-head h2 {
    margin: 7px 0 0;
    color: #1c2b3d;
    font-size: 26px;
    line-height: 1.15;
}

.tutorial-v2-section-head p {
    max-width: 420px;
    margin: 0 0 2px;
    color: #78879a;
    font-size: 13px;
    line-height: 1.6;
    text-align: right;
}

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

.tutorial-download-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-width: 0;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid #c8e6ee;
    border-left: 4px solid #139fc1;
    border-radius: 6px;
    background: #fff;
}

.tutorial-download-card.is-accelerator {
    border-color: #f0d3a6;
    border-left-color: #da9220;
}

.tutorial-download-card-main {
    min-width: 0;
    padding: 24px 20px;
}

.tutorial-download-card .tutorial-kicker {
    color: #118ca9;
}

.tutorial-download-card.is-accelerator .tutorial-kicker {
    color: #b16b10;
}

.tutorial-download-card h2 {
    margin: 12px 0 8px;
    color: #1c2b3d;
    font-size: 20px;
}

.tutorial-download-card p {
    margin: 0;
    color: #78879a;
    font-size: 13px;
    line-height: 1.6;
}

.tutorial-download-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: #8291a2;
    font-size: 12px;
}

.tutorial-download-meta strong {
    color: #1d2d40;
    font-family: "Courier New", monospace;
    font-size: 16px;
    letter-spacing: 2px;
}

.tutorial-download-meta button {
    margin-left: 8px;
    padding: 4px 8px;
    border: 1px solid #c5d4df;
    border-radius: 4px;
    background: #fff;
    color: #5b6f84;
    font-size: 11px;
    cursor: pointer;
}

.tutorial-download-action {
    display: flex;
    flex: 0 0 122px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: #139fc1;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.tutorial-download-card.is-accelerator .tutorial-download-action {
    background: #da9220;
}

.tutorial-download-action b {
    font-size: 25px;
    font-weight: 400;
}

.tutorial-v2-workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #dbe4ec;
    border-bottom: 1px solid #dbe4ec;
}

.tutorial-v2-workflow > div {
    min-width: 0;
    min-height: 150px;
    padding: 20px 18px;
    border-right: 1px solid #dbe4ec;
}

.tutorial-v2-workflow > div:last-child {
    border-right: 0;
}

.tutorial-v2-workflow span {
    color: #139fc1;
    font-size: 12px;
    font-weight: 900;
}

.tutorial-v2-workflow strong {
    display: block;
    margin-top: 20px;
    color: #1c2b3d;
    font-size: 15px;
}

.tutorial-v2-workflow p {
    margin: 7px 0 0;
    color: #78879a;
    font-size: 12px;
    line-height: 1.6;
}

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

.tutorial-resolution-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    background: #fff;
}

.tutorial-resolution-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
    background: #f4f8fb;
    border-bottom: 1px solid #d5e0e8;
}

.tutorial-resolution-badge {
    display: grid;
    place-items: center;
    width: 48px;
    height: 32px;
    flex: 0 0 48px;
    border-radius: 4px;
    background: #19334e;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.tutorial-resolution-card-head h3 {
    margin: 0;
    color: #1c2b3d;
    font-size: 16px;
}

.tutorial-resolution-card-head p {
    margin: 4px 0 0;
    color: #7b8b9d;
    font-size: 11px;
}

.tutorial-setting-group {
    padding: 16px 18px 0;
}

.tutorial-setting-group + .tutorial-setting-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e1e8ee;
}

.tutorial-setting-group.is-game-group {
    background: #fbfdfe;
}

.tutorial-setting-group.is-software-group {
    padding-bottom: 18px;
}

.tutorial-setting-group-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.tutorial-setting-group-head span {
    color: #139fc1;
    font-size: 10px;
    font-weight: 900;
}

.tutorial-setting-group-head h3 {
    margin: 0;
    color: #415267;
    font-size: 12px;
    letter-spacing: 0;
}

.tutorial-setting-list {
    border-top: 1px solid #e3eaf0;
}

.tutorial-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 34px;
    border-bottom: 1px solid #e3eaf0;
}

.tutorial-setting-name {
    min-width: 0;
    color: #68788a;
    font-size: 12px;
    line-height: 1.4;
}

.tutorial-setting-value {
    color: #33475c;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}

.tutorial-setting-row.is-cyan .tutorial-setting-name,
.tutorial-setting-row.is-cyan .tutorial-setting-value {
    color: #087b99;
}

.tutorial-setting-row.is-amber .tutorial-setting-value {
    color: #ae6c12;
}

.tutorial-video-shell {
    overflow: hidden;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    background: #152337;
}

.tutorial-video-switches {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #31445a;
}

.tutorial-v2-tabs {
    display: flex;
    gap: 6px;
}

.tutorial-v2-tabs button {
    min-height: 31px;
    padding: 0 12px;
    border: 1px solid #52667c;
    border-radius: 4px;
    background: transparent;
    color: #c2d0df;
    font-size: 12px;
    cursor: pointer;
}

.tutorial-v2-tabs button.is-active {
    border-color: #27b7d8;
    background: #27b7d8;
    color: #071521;
    font-weight: 800;
}

.tutorial-v2-tabs.is-res button.is-active {
    border-color: #f1ad43;
    background: #f1ad43;
}

.tutorial-video-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #09111d;
}

.tutorial-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.tutorial-chapters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
}

.tutorial-chapters button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #40566e;
    border-radius: 4px;
    background: transparent;
    color: #b8c7d8;
    font-size: 11px;
    cursor: pointer;
}

.tutorial-chapters button:hover {
    border-color: #27b7d8;
    color: #fff;
}

.tutorial-chapters b {
    color: #f1ad43;
    font-size: 11px;
}

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

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

.tutorial-shot-card {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    background: #fff;
}

.tutorial-shot-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: #eef3f7;
}

.tutorial-shot-card figcaption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    color: #46586c;
    font-size: 12px;
}

.tutorial-shot-card figcaption i {
    color: #8a9aaa;
    font-size: 11px;
    font-style: normal;
}

.tutorial-v2-support {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border: 1px solid #c9e4eb;
    border-left: 4px solid #139fc1;
    border-radius: 6px;
    background: #f5fbfd;
}

.tutorial-v2-support h2 {
    margin: 8px 0 5px;
    color: #1c2b3d;
    font-size: 19px;
}

.tutorial-v2-support p {
    margin: 0;
    color: #708195;
    font-size: 13px;
}

.tutorial-v2-support-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.tutorial-v2-support-actions a,
.tutorial-v2-support-actions button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #b9d4df;
    background: #fff;
    color: #0c7895;
    font-size: 11px;
}

.tutorial-v2-support-actions a:first-child {
    border-color: #139fc1;
    background: #139fc1;
    color: #fff;
}

@media (max-width: 900px) {
    .tutorial-v2-hero {
        grid-template-columns: 1fr;
        padding: 32px 28px;
    }

    .tutorial-v2-hero-panel {
        max-width: 640px;
    }

    .tutorial-resolution-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .tutorial-page-v2 {
        width: min(100% - 24px, 600px);
        padding-top: 10px;
        padding-bottom: 48px;
    }

    .tutorial-v2-hero {
        gap: 26px;
        padding: 28px 20px;
    }

    .tutorial-v2-hero .tutorial-title {
        font-size: 2.25rem;
    }

    .tutorial-v2-hero-desc {
        font-size: 14px;
    }

    .tutorial-v2-hero-actions,
    .tutorial-v2-section-head,
    .tutorial-v2-support {
        align-items: flex-start;
        flex-direction: column;
    }

    .tutorial-v2-feishu-action { width: 100%; justify-content: flex-start; }

    .tutorial-v2-section {
        margin-bottom: 42px;
    }

    .tutorial-v2-section-head p {
        text-align: left;
    }

    .tutorial-download-grid,
    .tutorial-shot-grid,
    .tutorial-shot-grid-three {
        grid-template-columns: 1fr;
    }

    .tutorial-download-card {
        min-height: 0;
    }

    .tutorial-download-card-main {
        padding: 20px 16px;
    }

    .tutorial-download-action {
        flex-basis: 96px;
        padding: 10px;
    }

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

    .tutorial-v2-workflow > div:nth-child(2) {
        border-right: 0;
    }

    .tutorial-v2-workflow > div:nth-child(-n + 2) {
        border-bottom: 1px solid #dbe4ec;
    }

    .tutorial-video-switches {
        align-items: flex-start;
        flex-direction: column;
    }

    .tutorial-v2-support-actions {
        justify-content: flex-start;
    }
}



@media (max-width: 420px) {
    .tutorial-v2-hero .tutorial-title {
        font-size: 1.95rem;
    }

    .tutorial-v2-hero-panel {
        width: 100%;
    }

    .tutorial-v2-hero-panel-top,
    .tutorial-v2-hero-panel-foot {
        padding-right: 14px;
        padding-left: 14px;
    }

    .tutorial-v2-hero-panel-line {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 68px;
        padding: 8px 14px;
    }

    .tutorial-v2-hero-panel-line i {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .tutorial-v2-hero-panel-line span {
        font-size: 14px;
    }

    .tutorial-v2-hero-panel-line b {
        min-width: 48px;
        padding-right: 5px;
        padding-left: 5px;
        font-size: 10px;
    }

    .tutorial-v2-hero-panel-foot {
        gap: 12px;
        font-size: 12px;
    }

    .tutorial-download-action {
        flex-basis: 82px;
    }

    .tutorial-download-action span {
        font-size: 11px;
        text-align: center;
    }

    .tutorial-setting-row {
        grid-template-columns: minmax(0, 1fr) minmax(84px, auto);
        gap: 8px;
    }

    .tutorial-setting-name,
    .tutorial-setting-value {
        font-size: 11px;
    }
}

/* Tutorial trial-card workspace */
.tutorial-trial-section {
    scroll-margin-top: calc(var(--nav-height) + 18px);
}

.tutorial-trial-shell {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid #c9dce5;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(30, 67, 90, 0.07);
}

.tutorial-trial-intro {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 28px 24px;
    background: #102237;
    color: #c9d8e1;
}

.tutorial-trial-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 1px solid rgba(89, 211, 239, 0.65);
    border-radius: 6px;
    color: #69d9ee;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    letter-spacing: 1px;
}

.tutorial-trial-intro strong {
    display: block;
    margin: 3px 0 8px;
    color: #d6e4eb;
    font-size: 17px;
}

.tutorial-trial-intro p {
    margin: 0;
    color: #a9bfd0;
    font-size: 12px;
    line-height: 1.7;
}

.tutorial-trial-rule-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.tutorial-trial-rule-list span {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    color: #aabdc9;
    font-size: 10px;
}

.tutorial-trial-rule-list b {
    color: #f4bb5b;
    font-size: 13px;
}

.tutorial-trial-card {
    min-width: 0;
    padding: 22px 24px 20px;
    background: #fbfdfe;
}

.tutorial-trial-card-head,
.tutorial-trial-controls,
.tutorial-trial-fields > div {
    display: flex;
    align-items: center;
}

.tutorial-trial-card-head {
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e9ee;
}

.tutorial-trial-card-head span {
    color: #148da9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.tutorial-trial-card-head h3 {
    margin: 5px 0 0;
    color: #1d3448;
    font-size: 18px;
}

.tutorial-trial-status {
    padding: 5px 8px;
    border: 1px solid #d3dfe7;
    border-radius: 4px;
    color: #718397;
    font-size: 11px;
    white-space: nowrap;
}

.tutorial-trial-status.is-success {
    border-color: #a8ddc8;
    background: #effbf6;
    color: #16805e;
}

.tutorial-trial-status.is-error {
    border-color: #efc3b8;
    background: #fff7f5;
    color: #b6533e;
}

.tutorial-trial-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    padding: 14px 0 15px;
}

.tutorial-trial-fields > div {
    min-width: 0;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    border-bottom: 1px solid #e7eef2;
}

.tutorial-trial-fields span {
    color: #8293a2;
    font-size: 11px;
    white-space: nowrap;
}

.tutorial-trial-fields strong {
    min-width: 0;
    overflow: hidden;
    color: #29455b;
    font-family: "SF Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tutorial-trial-fields > .tutorial-trial-validity {
    grid-column: 1 / -1;
}

.tutorial-trial-fields > .tutorial-trial-validity strong {
    overflow: visible;
    white-space: normal;
}

.tutorial-trial-controls {
    gap: 10px;
}

.tutorial-trial-controls label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tutorial-trial-controls label span {
    color: #708295;
    font-size: 11px;
    white-space: nowrap;
}

.tutorial-trial-controls select {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #c7d9e2;
    border-radius: 4px;
    background: #fff;
    color: #29455b;
    font-size: 12px;
}

#tutorialTrialReceiveBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid #118eaa;
    border-radius: 4px;
    background: #139fbe;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}

#tutorialTrialReceiveBtn:hover:not(:disabled) {
    background: #087f9f;
}

#tutorialTrialReceiveBtn:disabled {
    cursor: wait;
    opacity: 0.65;
}

.tutorial-trial-copy {
    min-height: 30px;
    margin-top: 12px;
    padding: 0 11px;
    border: 1px solid #b8d8e2;
    border-radius: 4px;
    background: #fff;
    color: #087f9f;
    font-size: 11px;
    cursor: pointer;
}

.tutorial-trial-message {
    min-height: 18px;
    margin: 11px 0 0;
    color: #7b8d9c;
    font-size: 11px;
    line-height: 1.5;
}

.tutorial-trial-message.is-success { color: #16805e; }
.tutorial-trial-message.is-error { color: #b6533e; }

/* Compact first-screen trial module */
.tutorial-trial-section {
    margin-bottom: 20px;
}

.tutorial-trial-shell {
    grid-template-columns: minmax(210px, 0.58fr) minmax(0, 1.42fr);
    box-shadow: 0 8px 18px rgba(30, 67, 90, 0.06);
}

.tutorial-trial-intro {
    gap: 10px;
    padding: 11px 15px;
}

.tutorial-trial-mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 9px;
}

.tutorial-trial-intro strong {
    margin: 0 0 3px;
    font-size: 13px;
}

.tutorial-trial-intro p {
    font-size: 10px;
    line-height: 1.35;
}

.tutorial-trial-rule-list {
    gap: 7px;
    margin-top: 7px;
}

.tutorial-trial-rule-list b {
    font-size: 10px;
}

.tutorial-trial-rule-list span {
    font-size: 8px;
}

.tutorial-trial-card {
    padding: 10px 15px 8px;
}

.tutorial-trial-card-head {
    padding-bottom: 6px;
}

.tutorial-trial-card-head h3 {
    margin-top: 2px;
    font-size: 14px;
}

.tutorial-trial-fields {
    gap: 0 12px;
    padding: 5px 0 6px;
}

.tutorial-trial-fields > div {
    min-height: 22px;
}

.tutorial-trial-controls {
    justify-content: flex-end;
}

#tutorialTrialReceiveBtn {
    min-height: 30px;
    padding: 0 11px;
    font-size: 10px;
}

.tutorial-trial-message {
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.35;
}

.tutorial-trial-status.is-cooldown {
    border-color: #e7c98e;
    background: #fffaf0;
    color: #a06b16;
}

.tutorial-trial-status.is-upstream-busy {
    border-color: #b8d8e7;
    background: #eef9fc;
    color: #147c9b;
}

@media (max-width: 760px) {
    .tutorial-trial-shell { grid-template-columns: 1fr; }
    .tutorial-trial-intro { padding: 11px 15px; }
    .tutorial-trial-card { padding: 10px 15px 8px; }
}

@media (max-width: 480px) {
    .tutorial-trial-fields { grid-template-columns: 1fr; }
    .tutorial-trial-controls { align-items: stretch; flex-direction: column; }
    .tutorial-trial-controls label { align-items: flex-start; flex-direction: column; gap: 5px; }
    #tutorialTrialReceiveBtn { width: 100%; }
}

/* Trial card layout refinement */
.tutorial-trial-shell {
    grid-template-columns: minmax(460px, 0.92fr) minmax(0, 1.08fr);
}

.tutorial-trial-intro {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 14px 24px;
}

.tutorial-trial-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 10px;
}

.tutorial-trial-intro strong {
    margin: 0 0 4px;
    color: #d9e7ee;
    font-size: 16px;
    line-height: 1.25;
}

.tutorial-trial-intro p {
    color: #b4c7d1;
    font-size: 13px;
    line-height: 1.35;
}

.tutorial-trial-rule-list {
    gap: 6px 14px;
    margin-top: 10px;
}

.tutorial-trial-rule-list b {
    font-size: 12px;
}

.tutorial-trial-rule-list span {
    gap: 4px;
    color: #b1c1ca;
    font-size: 10px;
}

.tutorial-trial-rule-list--summary {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 5px 14px;
}

.tutorial-trial-rule-list--summary span {
    display: inline-block;
    color: #b4c7d1;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}

.tutorial-trial-rule-list--summary b {
    color: #f4bb5b;
    font-size: inherit;
    font-weight: 800;
}

.tutorial-trial-card {
    display: flex;
    flex-direction: column;
    padding: 14px 24px 12px;
}

.tutorial-trial-card-head {
    padding-bottom: 7px;
}

.tutorial-trial-card-head span {
    font-size: 11px;
}

.tutorial-trial-card-head h3 {
    margin-top: 3px;
    color: #1a354a;
    font-size: 18px;
    line-height: 1.2;
}

.tutorial-trial-status {
    padding: 5px 9px;
    color: #536b7e;
    font-size: 11px;
}

.tutorial-trial-fields {
    gap: 2px 20px;
    padding: 8px 0 5px;
}

.tutorial-trial-fields > div {
    display: grid;
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
    gap: 8px;
    min-height: 27px;
    padding: 0 0 5px;
    align-items: center;
}

.tutorial-trial-fields span {
    color: #4e687b;
    font-size: 13px;
}

.tutorial-trial-fields strong {
    color: #17374d;
    font-size: 14px;
}

.tutorial-trial-controls {
    justify-content: flex-end;
    margin-top: 3px;
    padding-top: 2px;
}

#tutorialTrialReceiveBtn {
    min-height: 34px;
    padding: 0 14px;
    font-size: 11px;
}

.tutorial-trial-copy {
    align-self: flex-end;
    margin-top: 8px;
    font-size: 11px;
}

.tutorial-trial-message {
    margin-top: 5px;
    color: #647d91;
    font-size: 10px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .tutorial-trial-shell { grid-template-columns: 1fr; }
    .tutorial-trial-intro {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
        padding: 16px 18px;
    }
    .tutorial-trial-mark {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }
    .tutorial-trial-card { padding: 16px 18px 14px; }
    .tutorial-trial-rule-list--summary { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 480px) {
    .tutorial-trial-fields { grid-template-columns: 1fr; }
    .tutorial-trial-controls { align-items: stretch; flex-direction: column; }
    #tutorialTrialReceiveBtn { width: 100%; }
}

/* Trial credential and validity reminder. */
.tutorial-trial-serial-panel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 10px;
    padding: 11px 12px 12px;
    border: 1px solid #c9e0e8;
    border-left: 3px solid #1695b1;
    border-radius: 5px;
    background: #f1f9fb;
}

.tutorial-trial-serial-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tutorial-trial-serial-head > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tutorial-trial-serial-head span {
    color: #3f6376;
    font-size: 12px;
    font-weight: 800;
}

.tutorial-trial-serial-head small {
    color: #77909f;
    font-size: 10px;
}

.tutorial-trial-serial-value {
    display: block;
    min-width: 0;
    padding: 9px 11px;
    overflow-wrap: anywhere;
    border: 1px dashed #a8ccd8;
    border-radius: 4px;
    color: #143d53;
    background: #fff;
    font-family: "SF Mono", Consolas, monospace;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
}

.tutorial-trial-serial-panel .tutorial-trial-copy {
    align-self: center;
    min-height: 30px;
    margin: 0;
    white-space: nowrap;
}

.tutorial-trial-validity-notice {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 9px 10px;
    border: 1px solid #d8e4e9;
    border-radius: 5px;
    background: #fff;
}

.tutorial-trial-validity-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    background: #d5942f;
    font-size: 13px;
    font-weight: 900;
}

.tutorial-trial-validity-notice > div:last-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.tutorial-trial-validity-notice > div > span {
    color: #3f596c;
    font-size: 11px;
    font-weight: 850;
}

.tutorial-trial-validity-notice > div > small {
    color: #7a8d9a;
    font-size: 10px;
    line-height: 1.4;
}

#tutorialTrialValidity {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
}

#tutorialTrialValidity > i {
    color: #718796;
    font-size: 13px;
    font-style: normal;
    text-align: center;
}

.tutorial-trial-time {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.tutorial-trial-time small {
    color: inherit;
    font-size: 9px;
    font-weight: 850;
}

.tutorial-trial-time b {
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    color: inherit;
    font-family: "SF Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.3;
}

.tutorial-trial-time.is-start {
    border-color: #b9decf;
    color: #167451;
    background: #eef9f4;
}

.tutorial-trial-time.is-end {
    border-color: #efc5c5;
    color: #b83232;
    background: #fff3f3;
}

.tutorial-trial-validity-empty {
    grid-column: 1 / -1;
    padding: 6px 8px;
    border: 1px dashed #d6e1e6;
    border-radius: 4px;
    color: #8395a1;
    background: #f8fafb;
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 560px) {
    #tutorialTrialValidity {
        grid-template-columns: 1fr;
    }

    #tutorialTrialValidity > i {
        line-height: 1;
        transform: rotate(90deg);
    }
}

@media (max-width: 480px) {
    .tutorial-trial-serial-head {
        align-items: stretch;
        flex-direction: column;
    }

    .tutorial-trial-serial-panel .tutorial-trial-copy {
        width: 100%;
    }
}

/* Compact trial-pass workspace: status/actions and credential details share rows. */
@media (min-width: 901px) {
    .tutorial-trial-shell {
        grid-template-columns: minmax(390px, 0.9fr) minmax(0, 1.1fr);
    }

    .tutorial-trial-intro {
        padding: 18px 22px;
    }

    .tutorial-trial-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head head"
            "fields controls"
            "serial serial"
            "message message";
        gap: 0 16px;
        padding: 12px 20px 10px;
    }

    .tutorial-trial-card-head {
        grid-area: head;
        padding-bottom: 7px;
    }

    .tutorial-trial-fields {
        grid-area: fields;
        gap: 0 16px;
        padding: 5px 0;
    }

    .tutorial-trial-fields > div {
        min-height: 26px;
        padding-bottom: 3px;
    }

    .tutorial-trial-controls {
        grid-area: controls;
        align-self: center;
        margin: 0;
        padding: 0;
    }

    #tutorialTrialReceiveBtn {
        min-height: 32px;
        padding: 0 13px;
    }

    .tutorial-trial-serial-panel {
        grid-area: serial;
        display: grid;
        grid-template-columns: minmax(220px, 0.92fr) minmax(0, 1.2fr);
        grid-template-areas:
            "serial-head validity"
            "serial-value validity";
        gap: 6px 10px;
        margin-top: 6px;
        padding: 8px 10px;
    }

    .tutorial-trial-serial-head {
        grid-area: serial-head;
    }

    .tutorial-trial-serial-value {
        grid-area: serial-value;
        align-self: end;
        padding: 7px 9px;
        font-size: 12px;
        line-height: 1.25;
    }

    .tutorial-trial-validity-notice {
        grid-area: validity;
        align-self: stretch;
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 7px;
        padding: 7px 9px;
    }

    .tutorial-trial-validity-icon {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .tutorial-trial-validity-notice > div:last-child {
        gap: 3px;
    }

    #tutorialTrialValidity {
        gap: 5px;
    }

    .tutorial-trial-time {
        padding: 5px 7px;
    }

    .tutorial-trial-time b {
        font-size: 10px;
    }

    .tutorial-trial-message {
        grid-area: message;
        min-height: 0;
        margin-top: 4px;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .tutorial-trial-serial-panel {
        grid-template-columns: 1fr;
        grid-template-areas:
            "serial-head"
            "serial-value"
            "validity";
    }
}

@media (max-width: 900px) {
    .tutorial-trial-shell {
        grid-template-columns: 1fr;
    }

    .tutorial-trial-intro,
    .tutorial-trial-card {
        padding: 12px 16px;
    }

    .tutorial-trial-serial-panel {
        gap: 7px;
        margin-top: 6px;
        padding: 9px 10px;
    }

    .tutorial-trial-message {
        min-height: 0;
        margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .tutorial-trial-serial-head {
        align-items: center;
        flex-direction: row;
    }

    .tutorial-trial-serial-panel .tutorial-trial-copy {
        width: auto;
        min-height: 28px;
    }
}

/* Trial receive primary action. */
#tutorialTrialReceiveBtn {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 10px;
    align-items: center;
    min-width: 142px;
    min-height: 38px;
    padding: 3px 3px 3px 15px;
    overflow: hidden;
    border: 1px solid #0c7892;
    border-radius: 5px;
    color: #f7fcfe;
    background: #123c50;
    box-shadow: 0 5px 12px rgba(19, 68, 89, 0.14);
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

#tutorialTrialReceiveBtn::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #35c7de;
    content: "";
}

#tutorialTrialReceiveBtn > span {
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 850;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tutorialTrialReceiveBtn > b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    color: #fff;
    background: #1aa8c5;
    font-size: 13px;
    line-height: 1;
    transition: transform 160ms ease, background-color 160ms ease;
}

#tutorialTrialReceiveBtn:hover:not(:disabled) {
    border-color: #1599b5;
    background: #0d3144;
    box-shadow: 0 7px 16px rgba(19, 68, 89, 0.2);
    transform: translateY(-1px);
}

#tutorialTrialReceiveBtn:hover:not(:disabled) > b {
    background: #2fc1da;
    transform: translateX(1px);
}

#tutorialTrialReceiveBtn:active:not(:disabled) {
    box-shadow: 0 3px 8px rgba(19, 68, 89, 0.15);
    transform: translateY(0);
}

#tutorialTrialReceiveBtn:focus-visible {
    outline: 3px solid rgba(43, 190, 216, 0.3);
    outline-offset: 2px;
}

#tutorialTrialReceiveBtn:disabled {
    border-color: #cbd8de;
    color: #667b88;
    background: #e9f0f3;
    box-shadow: none;
    cursor: wait;
    opacity: 1;
}

#tutorialTrialReceiveBtn:disabled::before {
    background: #a9bbc4;
}

#tutorialTrialReceiveBtn:disabled > b {
    color: #667b88;
    background: #d4dfe4;
}

@media (max-width: 480px) {
    #tutorialTrialReceiveBtn {
        grid-template-columns: minmax(0, 1fr) 34px;
        min-height: 42px;
        padding-left: 17px;
    }

    #tutorialTrialReceiveBtn > span {
        text-align: center;
    }

    #tutorialTrialReceiveBtn > b {
        width: 34px;
        height: 34px;
    }
}

/* Align trial status metrics and the primary action as one clear row. */
@media (min-width: 901px) {
    .tutorial-trial-card {
        row-gap: 6px;
    }

    .tutorial-trial-card-head {
        padding-bottom: 5px;
    }

    .tutorial-trial-fields {
        align-self: center;
        gap: 0;
        padding: 4px 8px;
        border: 1px solid #dce7ec;
        border-radius: 5px;
        background: #f7fafb;
    }

    .tutorial-trial-fields > div {
        min-height: 28px;
        padding: 0 9px;
        border-bottom: 0;
    }

    .tutorial-trial-fields > div:first-child {
        padding-left: 0;
    }

    .tutorial-trial-fields > div + div {
        padding-right: 0;
        border-left: 1px solid #dce7ec;
    }

    .tutorial-trial-controls {
        align-self: center;
    }

    .tutorial-trial-serial-panel,
    .tutorial-trial-message {
        margin-top: 0;
    }
}

/* Expired locally saved trial card. */
.tutorial-trial-validity-expired {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #efbcbc;
    border-radius: 4px;
    color: #b52f2f;
    background: #fff1f1;
    font-size: 13px;
    font-weight: 900;
}

.tutorial-download-card-icon {
    display: grid;
    place-items: center;
    width: 88px;
    flex: 0 0 88px;
    padding: 14px 8px;
    border-right: 1px solid #d7eaf0;
    background: #f3fbfd;
}

.tutorial-download-card.is-accelerator .tutorial-download-card-icon {
    border-right-color: #f0dfbf;
    background: #fffaf1;
}

.tutorial-download-card-icon img {
    display: block;
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.tutorial-download-address {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    margin-top: 16px;
    padding: 8px 0;
    border-top: 1px solid #e1eaf0;
    border-bottom: 1px solid #e1eaf0;
    color: #8291a2;
    font-size: 11px;
    line-height: 1.45;
}

.tutorial-download-address span {
    color: #5d7185;
    font-weight: 800;
    white-space: nowrap;
}

.tutorial-download-address a {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #0b7895;
    font-weight: 700;
    text-decoration: none;
}

.tutorial-download-address a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .tutorial-download-card-icon {
        width: 72px;
        flex-basis: 72px;
    }

    .tutorial-download-card-icon img {
        width: 54px;
        height: 54px;
    }
}

@media (max-width: 420px) {
    .tutorial-download-card {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .tutorial-download-card-icon {
        width: auto;
        grid-row: 1;
        grid-column: 1;
        flex-basis: auto;
        border-right: 0;
    }

    .tutorial-download-card-main {
        grid-row: 1;
        grid-column: 2;
        padding: 18px 12px 18px 8px;
    }

    .tutorial-download-action {
        grid-row: 2;
        grid-column: 1 / -1;
        min-height: 48px;
        flex-basis: auto;
    }
}

.tutorial-download-card .tutorial-password-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 44px;
    margin-top: 12px;
    padding: 7px 9px;
    border: 1px solid #cfe2e9;
    border-radius: 5px;
    background: #f5fafc;
}

.tutorial-download-card .tutorial-password-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4d6579;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.tutorial-download-card .tutorial-password-row span::before {
    content: "KEY";
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 21px;
    border-radius: 3px;
    background: #139fc1;
    color: #fff;
    font-size: 8px;
    letter-spacing: .5px;
}

.tutorial-download-card .tutorial-password-row strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 29px;
    padding: 0 12px;
    border: 1px solid #9fcbd7;
    border-radius: 4px;
    background: #fff;
    color: #087b99;
    font-family: "Courier New", monospace;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1;
}

.tutorial-download-card.is-accelerator .tutorial-password-row {
    border-color: #ead5b2;
    background: #fffaf1;
}

.tutorial-download-card.is-accelerator .tutorial-password-row span::before {
    background: #da9220;
}

.tutorial-download-card.is-accelerator .tutorial-password-row strong {
    border-color: #e2bd7e;
    color: #a9660d;
}

@media (max-width: 420px) {
    .tutorial-download-card .tutorial-password-row {
        gap: 8px;
        padding: 7px;
    }

    .tutorial-download-card .tutorial-password-row strong {
        min-width: 64px;
        padding: 0 8px;
        font-size: 15px;
        letter-spacing: 2px;
    }
}

.tutorial-environment-intro {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #bfe3eb;
    border-left: 4px solid #139fc1;
    border-radius: 6px;
    background: #f4fbfd;
}

.tutorial-environment-intro-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 42px;
    border: 1px solid #73c8d8;
    border-radius: 4px;
    background: #dff5f9;
    color: #087b99;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

.tutorial-environment-intro strong {
    color: #1d4e62;
    font-size: 15px;
}

.tutorial-environment-intro p {
    margin: 4px 0 0;
    color: #638092;
    font-size: 13px;
    line-height: 1.65;
}

.tutorial-environment-contact {
    display: grid;
    grid-template-columns: 44px max-content max-content;
    align-items: center;
    justify-content: start;
    gap: 12px;
    margin-top: 18px;
    padding: 15px 16px;
    border: 1px solid #badfe7;
    border-left: 4px solid #20b7d5;
    border-radius: 6px;
    background: #f4fbfd;
    box-shadow: 0 8px 18px rgba(20, 94, 112, .08);
}

.tutorial-environment-contact-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #72cede;
    border-radius: 4px;
    background: #dff5f9;
    color: #087b99;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}

.tutorial-environment-contact-copy span {
    display: block;
    margin-bottom: 3px;
    color: #0b88a5;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.tutorial-environment-contact-copy strong {
    display: block;
    color: #17394d;
    font-size: 16px;
    line-height: 1.35;
}

.tutorial-environment-contact-copy p {
    margin: 3px 0 0;
    color: #607b8c;
    font-size: 13px;
    line-height: 1.5;
}

.tutorial-environment-contact-copy p b {
    color: #17394d;
    font-weight: 800;
}

.tutorial-environment-contact > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 148px;
    min-height: 44px;
    margin-left: 4px;
    padding: 9px 13px 9px 9px;
    border: 1px solid #102f45;
    border-radius: 4px;
    background: #102f45;
    color: #fff;
    box-shadow: 0 6px 13px rgba(16, 47, 69, .16);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.tutorial-environment-contact > a:hover {
    border-color: #194966;
    background: #194966;
    color: #fff;
    transform: translateY(-1px);
}

.tutorial-environment-contact > a b {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    background: #26bdd9;
    color: #08283a;
    font-size: 18px;
    line-height: 1;
}

.tutorial-environment-grid {
    display: grid;
    grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr);
    gap: 18px;
    align-items: start;
}

.tutorial-environment-shot {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #d1dce5;
    border-radius: 6px;
    background: #fff;
}

.tutorial-environment-shot-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid #dce5eb;
    background: #f7fafc;
}

.tutorial-environment-shot-label span {
    color: #139fc1;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.tutorial-environment-shot-label strong {
    color: #33485c;
    font-size: 13px;
}

.tutorial-environment-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 330px;
    padding: 16px;
    background: #edf2f5;
}

.tutorial-environment-image img {
    display: block;
    max-width: 100%;
    max-height: 540px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.tutorial-environment-shot:first-child .tutorial-environment-image img {
    max-height: 520px;
}

.tutorial-environment-shot figcaption {
    padding: 11px 15px 13px;
    color: #708195;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .tutorial-environment-grid {
        grid-template-columns: 1fr 1.25fr;
    }
}

@media (max-width: 700px) {
    .tutorial-environment-intro {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tutorial-environment-contact {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 11px;
        row-gap: 9px;
        padding: 15px;
    }

    .tutorial-environment-contact > a {
        grid-column: 2;
        justify-self: start;
        width: auto;
        margin-left: 0;
    }

    .tutorial-environment-grid {
        grid-template-columns: 1fr;
    }

    .tutorial-environment-image {
        min-height: 0;
        padding: 10px;
    }

    .tutorial-environment-image img,
    .tutorial-environment-shot:first-child .tutorial-environment-image img {
        max-height: 520px;
    }
}
/* Integrated trial receive page */
.trial-access-page {
    min-height: calc(100vh - var(--nav-height));
    padding: calc(var(--nav-height) + 26px) 20px 56px;
    color: #e9f6ff;
    background: #07080a;
}
.trial-access-shell { width: min(1180px, 100%); margin: 0 auto; }
.trial-access-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 2px 0 26px; border-bottom: 1px solid rgba(148, 182, 204, 0.14); }
.trial-access-brand { display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto; column-gap: 10px; color: #f6fbff; text-decoration: none; }
.trial-access-brand > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #24c7e4; border-radius: 8px; color: #07151c; background: #35d2ec; font-size: 12px; font-weight: 900; }
.trial-access-brand strong { align-self: end; font-size: 15px; line-height: 1.1; }
.trial-access-brand small { align-self: start; color: #7995a5; font-size: 8px; letter-spacing: 1.2px; }
.trial-access-online { display: flex; align-items: center; gap: 8px; color: #8fd8bc; font-size: 12px; }
.trial-access-online i { width: 7px; height: 7px; border-radius: 50%; background: #40d39e; box-shadow: 0 0 0 4px rgba(64, 211, 158, 0.12); }
.trial-access-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 470px); align-items: center; gap: clamp(38px, 7vw, 100px); padding: clamp(46px, 8vw, 92px) 0 74px; }
.trial-access-copy { max-width: 600px; }
.trial-access-tag, .trial-access-features > div:first-child > span { color: #36cae7; font-size: 11px; font-weight: 850; letter-spacing: 2px; }
.trial-access-copy h1 { margin: 18px 0; color: #f4fbff; font-size: clamp(2.2rem, 5vw, 4.7rem); font-weight: 900; line-height: 1.08; letter-spacing: 0; }
.trial-access-copy h1 em { color: #39c9e7; font-style: normal; }
.trial-access-copy > p { max-width: 560px; margin: 0; color: #9fb4c2; font-size: 15px; line-height: 1.9; }
.trial-access-metrics { display: flex; gap: clamp(20px, 5vw, 56px); margin-top: 34px; }
.trial-access-metrics div { display: grid; gap: 3px; }
.trial-access-metrics b { color: #f4fbff; font-size: 24px; line-height: 1; }
.trial-access-metrics span { color: #758c9b; font-size: 10px; letter-spacing: 1px; }
.trial-access-promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 42px; padding-top: 18px; border-top: 1px solid rgba(148, 182, 204, 0.16); }
.trial-access-promise span { display: grid; gap: 5px; }
.trial-access-promise b { color: #d9eaf2; font-size: 12px; }
.trial-access-promise small { color: #718896; font-size: 10px; line-height: 1.5; }
.trial-access-card { position: relative; padding: 28px; overflow: hidden; border: 1px solid rgba(49, 181, 211, 0.42); border-radius: 10px; background: linear-gradient(145deg, rgba(16, 36, 48, 0.98), rgba(8, 17, 23, 0.98)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255,255,255,0.03) inset; }
.trial-access-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: #36c9e7; box-shadow: 0 0 22px rgba(54, 201, 231, 0.8); }
.trial-access-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.trial-access-card-head span { color: #48cde8; font-size: 10px; letter-spacing: 1.8px; }
.trial-access-card-head h2 { margin: 8px 0 0; color: #f2fbff; font-size: 27px; line-height: 1.1; }
.trial-access-card-head > b { color: #5a7381; font-size: 24px; }
.trial-access-flow { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; align-items: center; gap: 7px; margin: 28px 0 30px; color: #718b98; font-size: 10px; }
.trial-access-flow span { display: grid; gap: 7px; }
.trial-access-flow span b { color: #617d8b; font-size: 10px; }
.trial-access-flow .is-active, .trial-access-flow .is-active b { color: #4bd0ea; }
.trial-access-flow i { height: 1px; background: #294551; }
.trial-access-field { display: grid; gap: 9px; }
.trial-access-field > span { color: #aac0cb; font-size: 12px; font-weight: 700; }
.trial-access-field select { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid #365362; border-radius: 6px; outline: 0; color: #e9f9ff; background: #0d202a; font: inherit; cursor: pointer; }
.trial-access-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; margin-top: 18px; padding: 0 18px; border: 1px solid #38cbe7; border-radius: 6px; color: #06131a; background: #42cee8; font: inherit; font-weight: 850; cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.trial-access-submit:hover:not(:disabled) { transform: translateY(-1px); background: #69ddf1; }
.trial-access-submit:disabled { opacity: .62; cursor: wait; }
.trial-access-submit b { font-size: 20px; }
.trial-access-rules { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 16px; color: #77919e; font-size: 10px; }
.trial-access-rules span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: #3dc5dd; }
.trial-access-safe { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px; border: 1px solid rgba(63, 204, 166, 0.2); border-radius: 6px; background: rgba(63, 204, 166, 0.06); }
.trial-access-safe > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #071b18; background: #47d2a9; font-size: 13px; }
.trial-access-safe span { display: grid; gap: 3px; }
.trial-access-safe strong { color: #99e5cd; font-size: 11px; }
.trial-access-safe small { color: #718f8b; font-size: 10px; }
.trial-access-result { margin-top: 16px; padding: 16px; border: 1px solid rgba(64, 205, 169, 0.45); border-radius: 6px; background: rgba(40, 168, 137, 0.1); text-align: center; }
.trial-access-result[hidden] { display: none; }
.trial-access-result.is-error { border-color: rgba(246, 146, 110, 0.48); color: #ffc0a5; background: rgba(167, 61, 36, 0.12); }
.trial-access-result-title { color: #9cebd0; font-size: 12px; font-weight: 850; }
.trial-access-serial { margin-top: 10px; padding: 11px; overflow-wrap: anywhere; border: 1px dashed rgba(139, 232, 206, 0.45); border-radius: 5px; color: #e5fff7; background: rgba(0, 0, 0, 0.18); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; font-weight: 800; }
.trial-access-result p { margin: 9px 0 0; color: #a5c8bc; font-size: 11px; }
.trial-access-copy { margin-top: 10px; padding: 7px 11px; border: 1px solid rgba(139, 232, 206, 0.5); border-radius: 4px; color: #bdf4e2; background: transparent; cursor: pointer; }
.trial-access-features { padding: 34px 0 0; border-top: 1px solid rgba(148, 182, 204, 0.14); }
.trial-access-features h2 { margin: 8px 0 24px; color: #eaf6fb; font-size: 22px; }
.trial-access-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trial-access-feature-grid article { padding: 18px; border: 1px solid rgba(148, 182, 204, 0.15); border-radius: 6px; background: rgba(14, 28, 36, 0.72); }
.trial-access-feature-grid article > b { color: #3fc9e6; font-size: 19px; }
.trial-access-feature-grid h3 { margin: 12px 0 6px; color: #d9edf5; font-size: 14px; }
.trial-access-feature-grid p { margin: 0; color: #78909b; font-size: 11px; line-height: 1.6; }
.trial-access-notice { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 15px 16px; border: 1px solid rgba(149, 176, 193, 0.15); border-radius: 6px; color: #8fa6b2; background: rgba(14, 28, 36, 0.58); font-size: 11px; line-height: 1.7; }
.trial-access-notice > b { color: #48cde8; font-size: 18px; line-height: 1; }
.trial-access-notice p { margin: 0; }
.trial-access-notice strong { color: #d2e7ee; margin-right: 8px; }
@media (max-width: 820px) {
    .trial-access-layout { grid-template-columns: 1fr; gap: 38px; padding-top: 46px; }
    .trial-access-copy { max-width: 680px; }
    .trial-access-copy h1 { font-size: clamp(2.35rem, 10vw, 4rem); }
    .trial-access-card { max-width: 560px; }
}
@media (max-width: 560px) {
    .trial-access-page { padding: calc(var(--nav-height) + 18px) 14px 38px; }
    .trial-access-nav { padding-bottom: 18px; }
    .trial-access-layout { padding: 34px 0 48px; }
    .trial-access-card { padding: 21px 17px; }
    .trial-access-copy h1 { font-size: 2.45rem; }
    .trial-access-copy > p { font-size: 13px; }
    .trial-access-metrics { gap: 18px; }
    .trial-access-metrics b { font-size: 19px; }
    .trial-access-promise { gap: 10px; }
    .trial-access-promise small { font-size: 9px; }
    .trial-access-feature-grid { grid-template-columns: 1fr; }
}

/* Tutorial parameter presets: BP and experience categories */
.tutorial-preset-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
    padding: 8px;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    background: #edf3f7;
}
.tutorial-preset-switcher button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    min-width: 0;
    min-height: 70px;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #66778a;
    text-align: left;
    cursor: pointer;
}
.tutorial-preset-switcher button > span {
    grid-row: 1 / 3;
    color: #178eab;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}
.tutorial-preset-switcher button:nth-child(2) > span { color: #b87318; }
.tutorial-preset-switcher button strong,
.tutorial-preset-switcher button small { min-width: 0; letter-spacing: 0; }
.tutorial-preset-switcher button strong { align-self: end; color: #2c3e52; font-size: 16px; }
.tutorial-preset-switcher button small { align-self: start; margin-top: 3px; color: #7a8999; font-size: 11px; }
.tutorial-preset-switcher button.is-active {
    border-color: #b9dce5;
    background: #fff;
    box-shadow: 0 4px 12px rgba(33, 62, 86, 0.08);
}
.tutorial-preset-switcher button:nth-child(2).is-active { border-color: #ead2ac; }
.tutorial-preset-switcher button:focus-visible,
.tutorial-preset-card:focus-visible { outline: 3px solid rgba(39, 183, 216, 0.28); outline-offset: 2px; }
.tutorial-preset-panel { padding-top: 2px; }
.tutorial-preset-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    min-height: 70px;
    padding: 14px 2px 13px;
    border-bottom: 1px solid #d8e2e9;
}
.tutorial-preset-panel-head span { color: #178eab; font-size: 10px; font-weight: 900; letter-spacing: 0; }
[data-preset-panel="exp"] .tutorial-preset-panel-head span { color: #b87318; }
.tutorial-preset-panel-head h3 { margin: 5px 0 0; color: #1d2e41; font-size: 20px; line-height: 1.2; letter-spacing: 0; }
.tutorial-preset-panel-head p { margin: 0 0 2px; color: #728296; font-size: 12px; }
.tutorial-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 16px;
}
.tutorial-preset-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tutorial-preset-card:hover { border-color: #96cbd8; box-shadow: 0 12px 28px rgba(34, 60, 82, 0.12); transform: translateY(-2px); }
[data-preset-panel="exp"] .tutorial-preset-card:hover { border-color: #dfbd87; }
.tutorial-preset-image {
    display: grid;
    width: 100%;
    aspect-ratio: 544 / 630;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid #dce5eb;
    background: #edf2f5;
}
.tutorial-preset-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tutorial-preset-caption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 66px;
    padding: 10px 12px;
}
.tutorial-preset-caption > b { color: #139fc1; font-size: 11px; }
[data-preset-panel="exp"] .tutorial-preset-caption > b { color: #c07a1b; }
.tutorial-preset-caption > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.tutorial-preset-caption strong,
.tutorial-preset-caption small { overflow-wrap: anywhere; letter-spacing: 0; }
.tutorial-preset-caption strong { color: #26384c; font-size: 13px; }
.tutorial-preset-caption small { color: #7a8998; font-size: 10px; line-height: 1.35; }
.tutorial-preset-caption i { color: #8a9aaa; font-size: 17px; font-style: normal; }
@media (max-width: 700px) {
    .tutorial-preset-grid { grid-template-columns: 1fr; }
    .tutorial-preset-switcher { gap: 6px; padding: 6px; }
    .tutorial-preset-switcher button {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 2px;
        min-height: 82px;
        padding: 10px;
    }
    .tutorial-preset-switcher button > span { grid-row: auto; font-size: 9px; }
    .tutorial-preset-switcher button strong { font-size: 14px; }
    .tutorial-preset-switcher button small { font-size: 10px; }
    .tutorial-preset-panel-head { align-items: flex-start; flex-direction: column; gap: 6px; }
    .tutorial-preset-panel-head p { line-height: 1.5; }
}

/* Unified preset selector and content workspace */
.tutorial-preset-workspace {
    --preset-accent: #159fbe;
    --preset-accent-soft: #e8f7fb;
    overflow: hidden;
    border: 1px solid #cbd9e2;
    border-top: 3px solid var(--preset-accent);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(35, 57, 75, 0.08);
    transition: border-top-color 0.22s ease;
}
.tutorial-preset-workspace[data-active-preset="exp"] {
    --preset-accent: #bd781c;
    --preset-accent-soft: #fff4e4;
}
.tutorial-preset-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
    gap: 16px;
    align-items: stretch;
    padding: 14px;
    border-bottom: 1px solid #d6e1e8;
    background: #f3f7f9;
}
.tutorial-preset-guide {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    color: #344a5e;
}
.tutorial-preset-guide > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--preset-accent) 42%, #d7e2e8);
    border-radius: 50%;
    background: var(--preset-accent-soft);
    color: var(--preset-accent);
    font-size: 20px;
    font-weight: 900;
    transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}
.tutorial-preset-guide > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.tutorial-preset-guide strong {
    color: #21364a;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0;
}
.tutorial-preset-guide small {
    color: #6c7f90;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0;
}
.tutorial-preset-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.tutorial-preset-switcher button {
    position: relative;
    min-height: 68px;
    padding: 11px 14px;
    border: 1px solid #d2dde4;
    border-radius: 5px;
    background: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tutorial-preset-switcher button:hover {
    border-color: #9ebcc9;
    transform: translateY(-1px);
}
.tutorial-preset-switcher button.is-active {
    border-color: #79c7d9;
    background: #edfafd;
    box-shadow: inset 0 -3px 0 #159fbe, 0 4px 12px rgba(25, 126, 151, 0.1);
}
.tutorial-preset-switcher button:nth-child(2).is-active {
    border-color: #deb77d;
    background: #fff7eb;
    box-shadow: inset 0 -3px 0 #bd781c, 0 4px 12px rgba(154, 99, 25, 0.1);
}
.tutorial-preset-switcher button:nth-child(2):focus-visible {
    outline-color: rgba(189, 120, 28, 0.3);
}
.tutorial-preset-stage {
    padding: 0 16px 16px;
    background: #fff;
}
.tutorial-preset-panel {
    padding-top: 0;
}
.tutorial-preset-panel-head {
    min-height: 76px;
    padding: 16px 2px 14px;
}
.tutorial-preset-grid {
    padding-top: 16px;
}
@media (max-width: 820px) {
    .tutorial-preset-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }
    .tutorial-preset-guide { padding: 3px 4px; }
}
@media (max-width: 700px) {
    .tutorial-preset-workspace { border-top-width: 3px; }
    .tutorial-preset-toolbar { gap: 11px; padding: 11px; }
    .tutorial-preset-guide > span { width: 34px; height: 34px; flex-basis: 34px; font-size: 18px; }
    .tutorial-preset-guide strong { font-size: 14px; }
    .tutorial-preset-guide small { font-size: 10px; }
    .tutorial-preset-switcher { gap: 7px; padding: 0; }
    .tutorial-preset-switcher button {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 2px;
        min-height: 78px;
        padding: 9px 10px;
    }
    .tutorial-preset-switcher button > span { grid-row: auto; font-size: 9px; }
    .tutorial-preset-switcher button strong { font-size: 14px; }
    .tutorial-preset-switcher button small { font-size: 10px; line-height: 1.3; }
    .tutorial-preset-stage { padding: 0 11px 11px; }
    .tutorial-preset-panel-head { min-height: 0; padding: 14px 1px 12px; }
    .tutorial-preset-grid { gap: 12px; padding-top: 12px; }
}

/* Tutorial preset selector redesign: prominent route choices */
.tutorial-preset-workspace {
    border-top: 0;
    background: #fbfcfd;
    box-shadow: 0 14px 34px rgba(35, 57, 75, 0.1);
}
.tutorial-preset-toolbar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px 16px 16px;
    background: #eef4f7;
}
.tutorial-preset-guide {
    justify-content: flex-start;
    padding: 0 2px 11px;
    border-bottom: 1px solid #d5e1e8;
}
.tutorial-preset-guide > span {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 5px;
    font-size: 19px;
}
.tutorial-preset-guide strong {
    color: #172d42;
    font-size: 17px;
    font-weight: 900;
}
.tutorial-preset-guide small {
    color: #62788b;
    font-size: 12px;
}
.tutorial-preset-switcher {
    gap: 10px;
}
.tutorial-preset-switcher button {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    grid-template-rows: 1fr;
    column-gap: 14px;
    align-items: center;
    min-height: 82px;
    padding: 12px 14px;
    border-color: #cbd9e2;
    background: #fff;
    text-align: left;
}
.tutorial-preset-switcher button > span {
    grid-row: auto;
    min-width: 0;
}
.tutorial-preset-route-code {
    display: grid;
    width: 48px;
    height: 54px;
    place-content: center;
    gap: 1px;
    border: 1px solid #b9dfe8;
    border-radius: 5px;
    background: #edfafd;
    color: #108ca9;
    text-align: center;
}
.tutorial-preset-route-code b,
.tutorial-preset-route-code em {
    letter-spacing: 0;
}
.tutorial-preset-route-code b {
    font-size: 19px;
    line-height: 1;
}
.tutorial-preset-route-code em {
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}
.tutorial-preset-switcher button:nth-child(2) .tutorial-preset-route-code {
    border-color: #e4c89f;
    background: #fff6e8;
    color: #ae6a13;
}
.tutorial-preset-route-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tutorial-preset-switcher .tutorial-preset-route-copy strong {
    align-self: auto;
    color: #172d42;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.2;
}
.tutorial-preset-switcher .tutorial-preset-route-copy small {
    align-self: auto;
    margin: 0;
    color: #657a8d;
    font-size: 12px;
    font-weight: 700;
}
.tutorial-preset-switcher button > i {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid #c8d7df;
    border-radius: 50%;
    color: transparent;
    background: #f4f7f9;
    font-size: 13px;
    font-style: normal;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.tutorial-preset-switcher button.is-active {
    border-color: #69bdd0;
    background: #f3fcfe;
    box-shadow: inset 4px 0 0 #159fbe, 0 8px 18px rgba(25, 126, 151, 0.12);
}
.tutorial-preset-switcher button:nth-child(2).is-active {
    border-color: #d9a85f;
    background: #fff9f0;
    box-shadow: inset 4px 0 0 #bd781c, 0 8px 18px rgba(154, 99, 25, 0.12);
}
.tutorial-preset-switcher button.is-active > i {
    border-color: var(--preset-accent);
    color: #fff;
    background: var(--preset-accent);
}
.tutorial-preset-stage {
    padding: 0 18px 18px;
    background: #fbfcfd;
}
.tutorial-preset-panel-head {
    min-height: 88px;
    padding: 18px 2px 15px;
    border-bottom: 2px solid #dbe5eb;
}
.tutorial-preset-panel-head span {
    color: var(--preset-accent);
    font-size: 11px;
}
.tutorial-preset-panel-head h3 {
    margin-top: 6px;
    color: #172d42;
    font-size: 25px;
    font-weight: 950;
}
.tutorial-preset-panel-head p {
    color: #607589;
    font-size: 13px;
    font-weight: 650;
}
@media (max-width: 700px) {
    .tutorial-preset-toolbar { gap: 10px; padding: 12px; }
    .tutorial-preset-guide { padding: 0 1px 10px; }
    .tutorial-preset-guide > span { width: 34px; height: 34px; flex-basis: 34px; }
    .tutorial-preset-guide strong { font-size: 16px; }
    .tutorial-preset-guide small { font-size: 11px; }
    .tutorial-preset-switcher { grid-template-columns: 1fr; gap: 8px; }
    .tutorial-preset-switcher button {
        grid-template-columns: 44px minmax(0, 1fr) 25px;
        grid-template-rows: 1fr;
        gap: 11px;
        min-height: 72px;
        padding: 9px 11px;
    }
    .tutorial-preset-route-code { width: 44px; height: 48px; }
    .tutorial-preset-route-code b { font-size: 17px; }
    .tutorial-preset-switcher .tutorial-preset-route-copy strong { font-size: 17px; }
    .tutorial-preset-switcher .tutorial-preset-route-copy small { font-size: 11px; }
    .tutorial-preset-stage { padding: 0 12px 12px; }
    .tutorial-preset-panel-head { padding: 15px 1px 13px; }
    .tutorial-preset-panel-head h3 { font-size: 22px; }
.tutorial-preset-panel-head p { font-size: 12px; }
}

/* Final desktop centering override must come after legacy purchase rules. */
@media (min-width: 901px) {
    .purchase-checkout-page { width: 100% !important; max-width: none !important; }
    .purchase-checkout-page .purchase-workspace { width: 100% !important; max-width: none !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); gap: 18px; }
    .purchase-checkout-page .purchase-side-support { grid-column: 1; width: 100%; max-width: 300px; justify-self: end; }
    .purchase-checkout-page .purchase-form-container { grid-column: 2; width: 100%; min-width: 0; }
}

/* Final mobile purchase overrides. */
@media (max-width: 600px) {
    .purchase-page { width: 100%; max-width: 600px; padding: calc(var(--nav-height) + 16px) 12px 48px; box-sizing: border-box; }
    .purchase-benefit-banner .benefit-main { grid-template-columns: 1fr; gap: 14px; padding: 16px 14px 14px; }
    .purchase-benefit-banner .benefit-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-top: 12px; }
    .purchase-benefit-banner .benefit-item { padding: 0 10px; font-size: .78rem; line-height: 1.4; }
    .purchase-benefit-banner .benefit-item:first-child { padding-left: 0; }
    .purchase-benefit-banner .benefit-item:last-child { padding-right: 0; }
    .purchase-benefit-banner .benefit-contact { flex-wrap: wrap; gap: 3px 8px; padding: 8px 10px; text-align: center; }
    .purchase-section { padding: 18px 14px; }
    .product-select-grid { grid-template-columns: 1fr; gap: 10px; }
    .product-select-card { min-width: 0; padding: 14px; }
    .product-select-card .sub { overflow-wrap: anywhere; }
    .duration-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .duration-select-card { min-width: 0; padding: 14px 8px; }
    .form-group.form-row { align-items: stretch; flex-direction: column; gap: 6px; }
    .form-group.form-row .form-label { width: auto; }
    .form-group.form-row .form-input, .form-group.form-row .input-wrapper, .coupon-input-row { width: 100%; max-width: none; }
    .payment-grid { grid-template-columns: 1fr; }
    .payment-card { padding: 14px; }
    .purchase-pay-btn { min-height: 50px; padding: 13px 14px; }
}
@media (max-width: 360px) {
    .purchase-benefit-banner .benefit-services { grid-template-columns: 1fr; gap: 10px; }
    .purchase-benefit-banner .benefit-item, .purchase-benefit-banner .benefit-item:first-child, .purchase-benefit-banner .benefit-item:last-child { padding: 0; }
    .purchase-benefit-banner .benefit-item + .benefit-item { border-top: 1px solid var(--border-color); border-left: 0; padding-top: 10px; }
}

/* Mobile navigation: product selector above four equal-width page tabs. */
@media (max-width: 600px) {
    :root {
        --nav-height: 104px;
    }

    .navbar {
        height: var(--nav-height);
        background: #09131e;
        border-bottom-color: rgba(34, 211, 238, .22);
        box-shadow: 0 8px 22px rgba(4, 10, 17, .28);
    }

    .navbar.scrolled {
        background: #07111a;
    }

    .nav-container {
        width: 100%;
        max-width: none;
        padding: 7px 10px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 40px 36px;
        align-content: center;
        gap: 6px;
    }

    .nav-product-switcher {
        width: 100%;
        height: 40px;
        padding: 3px;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 4px;
        border-color: rgba(34, 211, 238, .34);
        border-radius: 6px;
        background: #10202e;
    }

    .nav-product-identity {
        width: 32px;
        min-width: 32px;
        min-height: 32px;
        padding: 0;
        border: 0;
        border-right: 1px solid rgba(103, 232, 249, .18);
        border-radius: 4px;
        background: rgba(8, 145, 178, .16);
        color: #67e8f9;
    }

    .nav-product-identity-icon {
        display: grid;
    }

    .nav-product-identity-text {
        display: none;
    }

    .nav-product-options {
        width: 100%;
        min-width: 0;
        gap: 2px;
    }

    .nav-product-swap-icon {
        flex-basis: 16px;
        width: 16px;
        height: 24px;
        font-size: 10px;
        line-height: 8px;
    }

    .nav-product-swap-icon i {
        height: 8px;
    }

    .nav-product-option {
        min-width: 0;
        flex: 1 1 0;
        justify-content: center;
        min-height: 32px;
        gap: 5px;
        padding: 4px 7px;
        border-radius: 4px;
        font-size: .7rem;
    }

    .nav-product-mark {
        display: grid;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        border-radius: 3px;
    }

    .nav-product-mark > span {
        line-height: 20px;
    }

    .nav-product-option > span:last-child {
        min-width: 0;
        overflow: hidden;
        line-height: 1.15;
        text-overflow: ellipsis;
    }

    .nav-links {
        width: 100%;
        height: 36px;
        margin: 0;
        justify-content: stretch !important;
        overflow: visible;
        -webkit-mask-image: none;
                mask-image: none;
    }

    .nav-pill {
        width: 100%;
        height: 36px;
        padding: 3px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        border-radius: 6px;
        background: #121e2b;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .nav-pill-indicator {
        top: 3px;
        height: calc(100% - 6px);
        border-radius: 4px;
    }

    .navbar .nav-link {
        min-width: 0;
        min-height: 30px;
        padding: 5px 4px;
        border-radius: 4px;
        font-size: .72rem;
        font-weight: 650;
        letter-spacing: 0;
    }

    .navbar .nav-link.active {
        color: #fff;
    }
}

@media (max-width: 340px) {
    .nav-container {
        padding-right: 7px;
        padding-left: 7px;
    }

    .nav-product-switcher {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .nav-product-identity {
        width: 28px;
        min-width: 28px;
    }

    .nav-product-option {
        gap: 4px;
        padding-right: 5px;
        padding-left: 5px;
        font-size: .66rem;
    }

    .nav-product-mark {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }
}

/* First-entry product chooser */
.home-product-chooser {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 100svh;
    padding: calc(var(--nav-height) + 52px) 24px 58px;
    overflow: hidden;
    isolation: isolate;
    background: #0a1119 url('images/BJ.jpg') center 42% / cover no-repeat;
    color: #fff;
}

.home-product-chooser.page-enter {
    opacity: 1;
    transform: none;
    animation: none;
}

.home-product-chooser::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(5, 12, 20, .76);
}

.home-product-chooser-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    width: min(1180px, 100%);
    margin: 0 auto 30px;
}

.home-product-chooser-heading {
    min-width: 0;
}

.home-product-chooser-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: #70d8ef;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0;
}

.home-product-chooser-kicker i {
    width: 22px;
    height: 2px;
    background: #38bdda;
}

.home-product-chooser-head h1 {
    font-size: 3rem;
    line-height: 1.08;
    letter-spacing: 0;
}

.home-product-chooser-head p {
    max-width: 620px;
    margin-top: 12px;
    color: rgba(255, 255, 255, .7);
    font-size: .98rem;
    line-height: 1.65;
}

.home-product-chooser-count {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding-bottom: 4px;
    color: rgba(255, 255, 255, .52);
}

.home-product-chooser-count strong {
    color: #fff;
    font-size: 2.7rem;
    font-weight: 800;
    line-height: 1;
}

.home-product-chooser-count span {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .2);
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.35;
}

.home-product-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 18px;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.home-product-choice {
    position: relative;
    display: flex;
    min-height: 334px;
    padding: 24px 26px 22px;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(8, 20, 31, .94);
    color: #fff;
    text-align: left;
    transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
    will-change: transform;
}

.home-product-choice:hover,
.home-product-choice:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(69, 211, 239, .74);
    background: rgba(10, 35, 48, .96);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .26), inset 0 3px 0 rgba(56, 189, 218, .7);
}

.home-product-choice.is-amber:hover,
.home-product-choice.is-amber:focus-visible {
    border-color: rgba(245, 166, 35, .8);
    background: rgba(48, 34, 13, .96);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .26), inset 0 3px 0 rgba(245, 166, 35, .72);
}

.home-product-choice-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.home-product-choice-index,
.home-product-choice-status {
    color: rgba(255, 255, 255, .48);
    font-size: .64rem;
    font-weight: 800;
}

.home-product-choice-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #79ddec;
}

.home-product-choice-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdd9;
    box-shadow: 0 0 8px rgba(56, 189, 217, .68);
}

.home-product-choice.is-amber .home-product-choice-status {
    color: #f6bd5d;
}

.home-product-choice.is-amber .home-product-choice-status i {
    background: #f2a72d;
    box-shadow: 0 0 8px rgba(242, 167, 45, .68);
}

.home-product-choice-body {
    display: grid;
    grid-template-columns: 122px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 24px 0 20px;
}

.home-product-choice-visual {
    display: grid;
    place-items: center;
    width: 122px;
    height: 122px;
    border: 1px solid rgba(61, 207, 236, .38);
    border-radius: 7px;
    background: #0b819d;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
}

.home-product-choice.is-amber .home-product-choice-visual {
    border-color: rgba(245, 166, 35, .45);
    background: #b96f0b;
}

.home-product-choice-visual.has-image {
    padding: 8px;
    background: rgba(255, 255, 255, .96);
}

.home-product-choice-visual img,
.purchase-family-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

.home-product-choice-copy {
    min-width: 0;
}

.home-product-choice-copy strong,
.home-product-choice-copy small,
.home-product-choice-copy > span {
    display: block;
    letter-spacing: 0;
}

.home-product-choice-copy strong {
    margin-top: 7px;
    font-size: 1.72rem;
    line-height: 1.2;
}

.home-product-choice-copy small {
    color: #69d4eb;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.4;
}

.home-product-choice.is-amber .home-product-choice-copy small {
    color: #f5b64d;
}

.home-product-choice-copy > span {
    margin-top: 9px;
    color: rgba(255, 255, 255, .64);
    font-size: .8rem;
    line-height: 1.5;
}

.home-product-choice-features {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.home-product-choice-features > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .72);
    font-size: .7rem;
    font-weight: 700;
}

.home-product-choice-features i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #46c7df;
}

.home-product-choice.is-amber .home-product-choice-features i {
    background: #f2ad39;
}

.home-product-choice-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-top: auto;
    padding-top: 21px;
}

.home-product-choice-path {
    color: rgba(255, 255, 255, .36);
    font-size: .66rem;
    font-weight: 700;
}

.home-product-choice-action {
    color: #69d4eb;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.home-product-choice.is-amber .home-product-choice-action {
    color: #f5b64d;
}

.home-product-choice-action b {
    display: inline-block;
    margin-left: 7px;
    font-size: 1.1rem;
    transition: transform .2s ease;
}

.home-product-choice:hover .home-product-choice-action b,
.home-product-choice:focus-visible .home-product-choice-action b {
    transform: translateX(4px);
}

.purchase-family-icon.has-image {
    padding: 4px;
    border: 1px solid #d7e1e8;
    background: #fff !important;
}

@media (max-width: 760px) {
    .home-product-chooser {
        align-content: start;
        min-height: 100svh;
        padding: calc(var(--nav-height) + 24px) 14px 34px;
        background-position: 46% center;
    }

    .home-product-chooser-head {
        align-items: start;
        margin-bottom: 18px;
    }

    .home-product-chooser-head h1 {
        font-size: 2.15rem;
    }

    .home-product-chooser-count {
        display: none;
    }

    .home-product-choice-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-product-choice {
        min-height: 246px;
        padding: 16px;
    }

    .home-product-choice-topline {
        padding-bottom: 11px;
    }

    .home-product-choice-body {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 15px;
        padding: 15px 0 13px;
    }

    .home-product-choice-visual {
        width: 82px;
        height: 82px;
        font-size: 1.55rem;
    }

    .home-product-choice-copy strong {
        margin-top: 4px;
        font-size: 1.2rem;
    }

    .home-product-choice-copy > span {
        margin-top: 6px;
        font-size: .72rem;
        line-height: 1.42;
    }

    .home-product-choice-features {
        gap: 6px;
    }

    .home-product-choice-features > span {
        min-height: 25px;
        padding: 4px 7px;
        font-size: .64rem;
    }

    .home-product-choice-footer {
        padding-top: 14px;
    }
}

@media (max-width: 420px) {
    .home-product-chooser-head p {
        font-size: .8rem;
    }

    .home-product-chooser-head h1 {
        font-size: 1.85rem;
    }

    .home-product-choice-visual {
        width: 76px;
        height: 76px;
    }

    .home-product-choice-body {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
    }

    .home-product-choice-copy small {
        font-size: .58rem;
    }

    .home-product-choice-path {
        display: none;
    }

    .home-product-choice-footer {
        justify-content: flex-end;
    }
}

/* Final purchase package layout override. */
.duration-select-grid { align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.duration-select-grid:has(> .duration-select-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duration-select-card { position: relative; display: flex; min-width: 0; min-height: 150px; padding: 20px 18px 16px; flex-direction: column; align-items: stretch; justify-content: space-between; overflow: hidden; border: 1px solid #d0d8e0; border-radius: 8px; background: #fff; box-shadow: 0 4px 14px rgba(27, 51, 74, .05); color: #1b334a; text-align: left; }
.duration-select-card { transition: border-color 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out; }
.duration-select-card.has-description { min-height: 168px; }
.duration-select-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: transparent; content: ""; transition: background-color 120ms ease-out; }
.duration-select-card::after { position: absolute; top: 16px; right: 16px; display: block; width: 13px; height: 13px; border: 2px solid #b8c8d5; border-radius: 50%; content: ""; transition: border-color 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out; }
.duration-select-card:hover { border-color: #79bfd0; box-shadow: 0 8px 22px rgba(8, 138, 168, .1); transform: translateY(-2px); }
.duration-select-card.selected { border-color: #159fbe; background: #f3fbfd; box-shadow: 0 0 0 2px rgba(21, 159, 190, .12), 0 8px 22px rgba(8, 138, 168, .1); }
.duration-select-card.selected::before { background: #159fbe; }
.duration-select-card.selected::after { border-color: #159fbe; background: #159fbe; box-shadow: inset 0 0 0 3px #fff; }
.dur-card-head, .dur-card-meta, .dur-price-wrap, .duration-select-card .dur-name, .duration-select-card .dur-price, .duration-select-card .dur-stock { display: block; }
.dur-card-head { display: flex; width: 100%; min-width: 0; padding: 0 24px 0 0; flex-direction: column; align-items: flex-start; gap: 7px; }
.duration-select-card .dur-name { margin: 0; color: #18334b; font-size: 1.03rem; font-weight: 850; line-height: 1.35; overflow-wrap: anywhere; }
.duration-select-card .dur-description { display: -webkit-box; overflow: hidden; color: #667789; font-size: .75rem; font-weight: 550; line-height: 1.55; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.duration-select-card .dur-card-meta { display: flex; width: 100%; margin-top: 16px; padding-top: 13px; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 10px; border-top: 1px solid #e3e9ee; }
.duration-select-card .dur-price-wrap { display: block; min-width: 0; }
.duration-select-card .dur-price { margin: 0; color: #078aa8; font-size: 1.5rem; font-weight: 850; line-height: 1; white-space: nowrap; }
.duration-select-card .dur-price small { margin-right: 2px; font-size: .72rem; font-weight: 750; }
.duration-select-card .dur-card-status { display: flex; min-width: 0; align-items: flex-end; flex-direction: column; gap: 5px; }
.duration-select-card .dur-stock, .duration-select-card .dur-limit { display: inline-flex; margin: 0; padding: 5px 8px; align-items: center; gap: 5px; border-radius: 5px; background: #eef4f6; font-size: .66rem; font-weight: 750; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
.duration-select-card .dur-limit { background: #f4f1ff; color: #6941c6; }
.duration-select-card .dur-stock i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.duration-select-card .dur-stock.stock-normal { background: #eaf8f2; }
.duration-select-card .dur-stock.stock-low { background: #fff6e5; }
.duration-select-card .dur-stock.stock-empty { background: #fff0f0; }
@media (max-width: 760px) { .duration-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .duration-select-card { min-height: 158px; padding: 18px 14px 14px; } }
@media (max-width: 520px) { .duration-select-grid { grid-template-columns: 1fr; gap: 10px; } .duration-select-card { min-height: 142px; } .duration-select-card .dur-card-meta { margin-top: 11px; padding-top: 10px; } }

/* Package-card type hierarchy: title first, supporting copy second. */
.duration-select-card .dur-card-head { gap: 9px; }
.duration-select-card .dur-name { color: #102a43; font-size: 1.18rem; font-weight: 850; letter-spacing: 0; line-height: 1.25; }
.duration-select-card .dur-description { max-width: 30ch; color: #667085; font-size: .76rem; font-weight: 500; letter-spacing: 0; line-height: 1.55; }
.duration-select-card.selected .dur-name { color: #0b3854; }

/* Radar guide step 01 download action. */
.radar-guide-steps li.has-download-action { grid-template-columns: 52px minmax(0, 1fr) 184px; align-items: center; }
.radar-guide-steps .radar-guide-download-action { width: 184px; min-height: 58px; margin: 0; padding: 9px 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 15px; align-items: center; gap: 9px; border: 1px solid #278a98; border-radius: 6px; background: #173f49; color: #fff; box-shadow: 0 7px 16px rgba(23, 63, 73, .14); overflow-wrap: normal; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.radar-guide-steps .radar-guide-download-action:hover { border-color: #49b9c7; background: #0f5663; color: #fff; box-shadow: 0 9px 20px rgba(23, 63, 73, .2); transform: translateY(-2px); }
.radar-guide-steps .radar-guide-download-action:focus-visible { outline: 3px solid rgba(39, 138, 152, .28); outline-offset: 3px; }
.radar-guide-download-action > b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 4px; background: #2d8794; color: #fff; font-size: 1rem; line-height: 1; }
.radar-guide-download-action > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.radar-guide-download-action small { color: #9cd8df; font-size: .56rem; font-weight: 750; line-height: 1; }
.radar-guide-download-action strong { color: #fff; font-size: .78rem; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.radar-guide-download-action > i { color: #8ed4dc; font-size: .9rem; font-style: normal; transition: transform .2s ease; }
.radar-guide-download-action:hover > i { transform: translate(2px, -2px); }
@media (max-width: 760px) {
    .radar-guide-steps li.has-download-action { grid-template-columns: 38px minmax(0, 1fr); align-items: start; }
    .radar-guide-steps .radar-guide-download-action { grid-column: 2; width: 100%; min-height: 54px; margin-top: 4px; }
}

/* Match the unified preview frame to the exact top and bottom of the five-step list. */
@media (min-width: 901px) {
    .radar-guide-setup-body {
        align-items: start;
    }

    .radar-guide-shot-slot,
    .radar-guide-visual-card {
        align-self: start;
    }

    .radar-guide-visual-card {
        height: auto;
    }
}

/* Radar tutorial v17: timer-only side panel and refreshed guide layout. */
.radar-guide-setup {
    background: #eef2f3;
}

.radar-guide-setup-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    column-gap: 52px;
}

.radar-guide-setup-copy {
    grid-column: 1 / -1;
}

.radar-guide-section-head {
    margin-bottom: 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid #c7d1d5;
}

.radar-guide-section-head h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    letter-spacing: -.02em;
}

.radar-guide-setup-body {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    column-gap: 52px;
    align-items: start;
}

.radar-guide-steps-panel {
    min-width: 0;
}

.radar-guide-steps li {
    min-height: 92px;
    padding: 22px 0;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    border-top-color: #c3ced2;
}

.radar-guide-steps li > b {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #d5a958;
    border-radius: 50%;
    background: #fff8e9;
    color: #a66d0e;
    font-size: .72rem;
}

.radar-guide-steps h3 {
    margin-bottom: 6px;
    color: #172128;
    font-size: 1.05rem;
}

.radar-guide-steps p {
    max-width: 58em;
    line-height: 1.7;
}

.radar-guide-shot-slot {
    align-self: start;
    position: sticky;
    top: calc(var(--nav-height, 72px) + 18px);
}

.radar-guide-visual-card {
    height: auto;
    min-height: 0;
    border-color: #b9c9cc;
    border-radius: 10px;
    background: #f8fbfb;
    box-shadow: 0 18px 40px rgba(19, 43, 49, .12);
}

.radar-guide-visual-card > .radar-stable-uptime--guide {
    min-height: 156px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    border: 0;
    border-left: 4px solid #3e9d8a;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8fffc 0%, #e7f4f0 100%);
    box-shadow: none;
}

.radar-guide-visual-card > .radar-stable-uptime--guide .radar-stable-uptime-copy strong {
    font-size: 1rem;
}

.radar-guide-visual-card > .radar-stable-uptime--guide .radar-stable-uptime-value {
    justify-content: flex-start;
    gap: 8px;
}

.radar-guide-visual-card > .radar-stable-uptime--guide .radar-stable-uptime-value b {
    font-size: 1.55rem;
}

.radar-guide-warm-tips {
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(73, 58, 27, .05);
}

/* Final cascade for the radar tutorial redesign. */
.radar-guide { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 72px; }
.radar-guide .radar-guide-setup { padding: 0; background: transparent; }
.radar-guide .radar-guide-setup-layout, .radar-guide .radar-guide-setup-body { display: block; }
.radar-guide .radar-guide-section-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,380px); align-items: end; gap: 28px; margin-bottom: 16px; padding: 26px 30px; border-radius: 12px; background: linear-gradient(120deg,#102333,#173b4a 60%,#1b5660); box-shadow: 0 16px 36px rgba(16,41,55,.14); }
.radar-guide .radar-guide-section-head::after { display: none; }
.radar-guide .radar-guide-section-head h2 { margin-top: 7px; font-size: clamp(1.7rem,3vw,2.35rem); }
.radar-guide .radar-guide-section-head > p { max-width: none; margin: 0; font-size: .8rem; }
.radar-guide .radar-trial-card { display: grid; grid-template-columns: minmax(190px,1.2fr) minmax(280px,1.8fr) auto; align-items: center; gap: 18px; margin: 0 0 24px; padding: 13px 16px; border-left: 4px solid #1a958d; border-radius: 9px; background: #f7fffd; box-shadow: 0 8px 20px rgba(28,99,101,.08); }
.radar-guide .radar-trial-card-top { display: block; }
.radar-guide .radar-trial-card h3 { margin: 0; font-size: 1rem; }
.radar-guide .radar-trial-card-top p { margin: 3px 0 0; font-size: .68rem; }
.radar-guide .radar-trial-rule-grid { display: flex; gap: 6px; margin: 0; }
.radar-guide .radar-trial-rule-grid span { flex: 1; padding: 7px 8px; }
.radar-guide .radar-trial-action-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 132px; }
.radar-guide #radarTrialReceiveBtn { min-height: 36px; padding: 7px 10px; font-size: .72rem; }
.radar-guide .radar-trial-result { grid-column: 1 / -1; margin-top: 0; padding: 8px 10px; }
.radar-guide .radar-trial-message { grid-column: 1 / -1; margin: 0; font-size: .66rem; }
.radar-guide .radar-guide-setup-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,350px); gap: 24px; align-items: start; }
.radar-guide .radar-guide-steps-panel { padding: 18px 22px; border: 1px solid #d8e1e5; border-radius: 10px; background: #fff; box-shadow: 0 10px 26px rgba(30,53,68,.06); }
.radar-guide .radar-guide-steps-panel::before { top: 84px; bottom: 24px; left: 39px; }
.radar-guide .radar-guide-tutorial-marker { margin: 0 -2px 8px; padding: 0 0 14px 54px; border: 0; border-bottom: 1px solid #e1e8ea; background: transparent; }
.radar-guide .radar-guide-tutorial-marker h2 { margin: 4px 0 2px; font-size: 1.35rem; }
.radar-guide .radar-guide-steps li { min-height: 78px; padding: 15px 0; grid-template-columns: 42px minmax(0,1fr); gap: 12px; }
.radar-guide .radar-guide-steps h3 { margin: 0 0 3px; font-size: .92rem; }
.radar-guide .radar-guide-steps p { font-size: .74rem; line-height: 1.55; }
.radar-guide .radar-guide-steps li.has-download-action { grid-template-columns: 42px minmax(0,1fr) 150px; }
.radar-guide .radar-guide-steps .radar-guide-download-action { width: 150px; min-height: 44px; border-radius: 6px; }
.radar-guide .radar-guide-steps-panel::before { display: none !important; }
.radar-guide .radar-guide-steps li > b { box-shadow: none !important; }
.radar-guide .radar-guide-steps li.has-download-action { grid-template-columns: 42px minmax(0,1fr) 150px !important; align-items: center; }
.radar-guide .radar-guide-steps .radar-guide-download-action { width: 150px !important; min-height: 44px !important; margin: 0 !important; padding: 7px 9px !important; display: grid; grid-template-columns: 26px minmax(0,1fr) 12px; gap: 7px; border-radius: 6px; transform: none; }
.radar-guide .radar-guide-steps .radar-guide-download-action > b { width: 26px; height: 26px; font-size: .85rem; }
.radar-guide .radar-guide-steps .radar-guide-download-action strong { font-size: .68rem; white-space: normal; }
.radar-guide .radar-guide-shot-slot { position: sticky; top: calc(var(--nav-height,72px) + 18px); }
.radar-guide .radar-guide-visual-card { border-radius: 10px; box-shadow: 0 12px 28px rgba(30,53,68,.08); }
@media (max-width: 900px) { .radar-guide .radar-guide-section-head { grid-template-columns: 1fr; gap: 10px; } .radar-guide .radar-guide-setup-body { grid-template-columns: 1fr; } .radar-guide .radar-guide-shot-slot { position: static; } }
@media (max-width: 640px) { .radar-guide { width: min(100% - 24px,560px); padding-top: 14px; } .radar-guide .radar-guide-section-head { padding: 20px 18px; } .radar-guide .radar-trial-card { grid-template-columns: 1fr; gap: 10px; padding: 13px; } .radar-guide .radar-trial-rule-grid { width: 100%; } .radar-guide .radar-trial-action-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; } .radar-guide .radar-guide-steps-panel { padding: 14px 12px; } .radar-guide .radar-guide-tutorial-marker { padding-left: 42px; } .radar-guide .radar-guide-steps li, .radar-guide .radar-guide-steps li.has-download-action { grid-template-columns: 34px minmax(0,1fr); gap: 8px; } .radar-guide .radar-guide-steps .radar-guide-download-action { grid-column: 2; width: 100%; margin-top: 7px; } }

@media (max-width: 900px) {
    .radar-guide-setup-layout,
    .radar-guide-setup-body {
        grid-template-columns: 1fr;
        row-gap: 26px;
    }

    .radar-guide-shot-slot {
        position: static;
        width: 100%;
    }

    .radar-guide-visual-card > .radar-stable-uptime--guide {
        min-height: 132px;
    }
}

/* Final full-width polish for radar tutorial and home actions. */
.radar-guide { width: 100%; max-width: none; margin: 0; padding: 28px 0 18px; }
.radar-guide .radar-guide-setup-layout { width: min(1380px, calc(100% - 48px)); margin: 0 auto; }
.radar-guide .radar-guide-setup-body { width: 100%; }
.radar-guide .radar-guide-steps-panel { min-width: 0; }
.radar-guide .radar-guide-steps-panel::before { display: none !important; }
.radar-guide .radar-guide-steps li > b { box-shadow: none !important; }
.radar-guide .radar-guide-steps li.has-download-action { grid-template-columns: 42px minmax(0,1fr) 170px !important; }
.radar-guide .radar-guide-steps .radar-guide-download-action { width: 170px !important; min-height: 48px !important; margin: 0 !important; padding: 8px 10px !important; display: grid; grid-template-columns: 28px minmax(0,1fr) 12px; align-items: center; gap: 8px; border-radius: 8px; transform: none; }
.radar-guide .radar-guide-steps .radar-guide-download-action > b { width: 28px; height: 28px; }
.radar-guide .radar-guide-steps .radar-guide-download-action strong { font-size: .7rem; white-space: normal; }
.radar-dg-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 720px; }
.radar-dg-button { min-width: 0; min-height: 58px; padding: 8px 9px 8px 16px; border-radius: 10px; font-size: .78rem; letter-spacing: .01em; }
.radar-dg-button b { width: 40px; height: 40px; flex-basis: 40px; border-radius: 8px; }
.radar-dg-button.is-primary { background: linear-gradient(135deg, #d94c43, #9f2724); }
.radar-dg-button.is-secondary { border-color: rgba(137, 224, 229, .7); background: linear-gradient(135deg, rgba(18, 54, 65, .9), rgba(13, 30, 39, .9)); }
.radar-dg-button.is-support-group { border-color: rgba(146, 211, 132, .8); background: linear-gradient(135deg, #245b39, #163e29); }
@media (max-width: 900px) { .radar-guide .radar-guide-setup-layout { width: min(100% - 32px, 720px); } .radar-dg-actions { max-width: 640px; } }
@media (max-width: 640px) { .radar-guide { padding-top: 16px; } .radar-guide .radar-guide-setup-layout { width: calc(100% - 24px); } .radar-guide .radar-guide-steps li.has-download-action { grid-template-columns: 34px minmax(0,1fr) !important; } .radar-guide .radar-guide-steps .radar-guide-download-action { grid-column: 2; width: 100% !important; margin-top: 8px !important; } .radar-dg-actions { grid-template-columns: 1fr; width: 100%; max-width: none; } .radar-dg-button { width: 100%; } }

/* Radar operations module v2: dashboard-style visual panel. */
.radar-guide .radar-guide-visual-card { overflow: hidden; border: 0; border-radius: 16px; background: #0e202d; box-shadow: 0 18px 38px rgba(11, 31, 44, .18); }
.radar-guide .radar-guide-visual-card > .radar-stable-uptime--guide { min-height: 208px; padding: 25px 24px 22px; border: 0; border-radius: 0; background: radial-gradient(circle at 78% 18%, rgba(84, 209, 190, .2), transparent 36%), linear-gradient(145deg, #102b3b, #0b1a27); color: #fff; }
.radar-guide .radar-stable-uptime--guide .radar-stable-uptime-mark { width: fit-content; padding: 7px 11px; border: 1px solid rgba(153, 224, 183, .42); border-radius: 8px; background: rgba(212, 255, 224, .08); }
.radar-guide .radar-stable-uptime--guide .radar-stable-uptime-mark i { width: 9px; height: 9px; background: #7ed36d; box-shadow: 0 0 0 6px rgba(126, 211, 109, .15); }
.radar-guide .radar-stable-uptime--guide .radar-stable-uptime-mark b { color: #d8f5d2; font-size: .66rem; letter-spacing: .16em; }
.radar-guide .radar-stable-uptime--guide .radar-stable-uptime-copy { margin-top: 22px; }
.radar-guide .radar-stable-uptime--guide .radar-stable-uptime-copy span { color: #8db0b6; font-size: .62rem; letter-spacing: .16em; }
.radar-guide .radar-stable-uptime--guide .radar-stable-uptime-copy strong { color: #f2fbfb; font-size: 1.38rem; letter-spacing: -.02em; }
.radar-guide .radar-stable-uptime--guide .radar-stable-uptime-value { justify-content: flex-start; gap: 7px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(185, 225, 222, .16); }
.radar-guide .radar-stable-uptime--guide .radar-stable-uptime-value b { color: #56d3bf; font-size: 1.6rem; }
.radar-guide .radar-stable-uptime--guide .radar-stable-uptime-value span { color: #9bb3b6; font-size: .68rem; }
.radar-guide .radar-guide-side-info { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; padding: 12px; border: 0; background: #122c3a; }
.radar-guide .radar-guide-side-block { min-width: 0; padding: 14px; border: 1px solid rgba(160, 211, 213, .16); border-radius: 11px; background: rgba(239, 252, 250, .96); box-shadow: none; }
.radar-guide .radar-guide-side-label { margin-bottom: 9px; color: #6c8d92; font-size: .57rem; letter-spacing: .14em; }
.radar-guide .radar-guide-side-label i { width: 7px; height: 7px; background: #38a99f; box-shadow: 0 0 0 5px rgba(56, 169, 159, .12); }
.radar-guide .radar-guide-side-block > strong { color: #173e46; font-size: .9rem; }
.radar-guide .radar-guide-preflight { grid-column: 1 / -1; }
.radar-guide .radar-guide-preflight-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.radar-guide .radar-guide-preflight-grid strong { min-height: 48px; padding: 8px 5px; display: grid; place-items: center; border: 1px solid #d7e8e7; border-radius: 7px; background: #fff; color: #597278; font-size: .65rem; line-height: 1.3; }
.radar-guide .radar-guide-warm-tips { border: 1px solid #efd39a; border-left: 3px solid #d69116; background: #fffaf0; }
.radar-guide .radar-guide-warm-tips > strong { color: #9b660d; }
.radar-guide .radar-guide-compatibility { display: block; border: 1px solid #edc2bb; border-left: 3px solid #c95248; background: #fff7f5; }
.radar-guide .radar-guide-compatibility > strong { color: #a03e38; }
.radar-guide .radar-guide-side-block p, .radar-guide .radar-guide-side-block li { color: #687d83; font-size: .69rem; line-height: 1.55; }
.radar-guide .radar-guide-support-group { min-height: 38px; margin-top: 11px; border-radius: 7px; background: #28633b; box-shadow: 0 6px 12px rgba(27, 89, 48, .14); }
.radar-guide .radar-guide-support-group b { background: rgba(255,255,255,.16); }
.radar-dg-button::before { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: -5px; border: 1px solid rgba(255,255,255,.28); border-radius: 6px; color: rgba(255,255,255,.75); font-size: .58rem; font-weight: 900; }
.radar-dg-button.is-primary::before { content: '01'; }
.radar-dg-button.is-secondary::before { content: '02'; }
.radar-dg-button.is-support-group::before { content: '03'; }
@media (max-width: 700px) { .radar-guide .radar-guide-side-info { grid-template-columns: 1fr; } .radar-guide .radar-guide-preflight, .radar-guide .radar-guide-compatibility, .radar-guide .radar-guide-warm-tips { grid-column: auto; } .radar-guide .radar-guide-preflight-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Radar operations console v3: compact status dashboard with no fixed-width internals. */
.radar-guide .radar-ops-console { overflow: hidden; border: 1px solid #cbdde0; border-radius: 18px; background: #eef5f5; box-shadow: 0 18px 42px rgba(21, 62, 70, .14); }
.radar-guide .radar-ops-header { min-height: 198px; padding: 20px 22px 18px; color: #f5ffff; background: linear-gradient(145deg, #103342 0%, #0f2939 54%, #152c3a 100%); }
.radar-guide .radar-ops-header-line, .radar-guide .radar-ops-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.radar-guide .radar-ops-kicker { display: inline-flex; align-items: center; gap: 8px; color: #82c7c5; font: 800 .61rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.radar-guide .radar-ops-kicker i, .radar-guide .radar-ops-online i, .radar-guide .radar-ops-footer i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #65d8a0; box-shadow: 0 0 0 5px rgba(101,216,160,.14); }
.radar-guide .radar-ops-online { display: inline-flex; align-items: center; gap: 8px; color: #c0d4d7; font-size: .66rem; font-weight: 800; }
.radar-guide .radar-ops-title-row { align-items: end; margin-top: 26px; }
.radar-guide .radar-ops-title-row div > span { display: block; color: #82a6ae; font-size: .65rem; letter-spacing: .08em; }
.radar-guide .radar-ops-title-row strong { display: block; margin-top: 5px; color: #f5ffff; font-size: 1.35rem; letter-spacing: -.02em; }
.radar-guide .radar-ops-title-row > b { padding: 7px 9px; border: 1px solid rgba(126,212,185,.36); border-radius: 7px; color: #9be0c4; background: rgba(91,190,159,.1); font-size: .62rem; white-space: nowrap; }
.radar-guide .radar-ops-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 18px; padding-top: 13px; border-top: 1px solid rgba(177, 218, 222, .17); }
.radar-guide .radar-ops-metrics > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 3px; min-width: 0; }
.radar-guide .radar-ops-metrics small { grid-column: 1 / -1; color: #7f9ca2; font-size: .57rem; }
.radar-guide .radar-ops-metrics strong { color: #57d1be; font: 800 clamp(1.2rem,2.5vw,1.6rem)/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.radar-guide .radar-ops-metrics em { color: #a2b7b9; font-size: .59rem; font-style: normal; }
.radar-guide .radar-ops-body { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; background: #e9f2f2; }
.radar-guide .radar-ops-card { min-width: 0; padding: 14px; border: 1px solid #d3e3e3; border-radius: 12px; background: #fbfefe; box-shadow: 0 5px 14px rgba(30,76,80,.05); }
.radar-guide .radar-ops-preflight { grid-column: 1 / -1; }
.radar-guide .radar-ops-card-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.radar-guide .radar-ops-card-head > div { min-width: 0; flex: 1; }
.radar-guide .radar-ops-card-head > div > span { display: block; color: #719096; font: 800 .56rem/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; }
.radar-guide .radar-ops-card-head strong { display: block; margin-top: 4px; color: #173e46; font-size: .92rem; }
.radar-guide .radar-ops-card-head > b { padding: 4px 6px; border-radius: 5px; color: #17735c; background: #e8f8ef; font-size: .58rem; white-space: nowrap; }
.radar-guide .radar-ops-index { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 8px; color: #1c857f; background: #e6f5f2; font: 800 .65rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.radar-guide .radar-ops-checks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 13px; }
.radar-guide .radar-ops-checks span { display: flex; min-width: 0; align-items: center; gap: 7px; padding: 9px 8px; border: 1px solid #d8e8e8; border-radius: 8px; color: #566f75; background: #fff; font-size: .65rem; line-height: 1.3; }
.radar-guide .radar-ops-checks i { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; border-radius: 50%; color: #167a63; background: #dff6e9; font-size: .65rem; font-style: normal; }
.radar-guide .radar-ops-checks b { overflow-wrap: anywhere; }
.radar-guide .radar-ops-tips { border-color: #ead7ac; background: #fffaf0; }
.radar-guide .radar-ops-tips .radar-ops-index { color: #a66b0f; background: #fff0ca; }
.radar-guide .radar-ops-tips ol { display: grid; gap: 7px; margin: 12px 0 0; padding: 0 0 0 18px; color: #6c6a64; font-size: .68rem; line-height: 1.55; }
.radar-guide .radar-ops-tips li::marker { color: #c4891a; font-weight: 800; }
.radar-guide .radar-ops-compatibility { border-color: #e4c6c1; background: #fff8f6; }
.radar-guide .radar-ops-compatibility .radar-ops-index { color: #b34d45; background: #fde8e4; }
.radar-guide .radar-ops-compatibility .radar-ops-card-head > b { color: #a34d45; background: #fde9e6; }
.radar-guide .radar-ops-compatibility p { margin: 12px 0 0; color: #756d6b; font-size: .68rem; line-height: 1.55; }
.radar-guide .radar-ops-console .radar-guide-support-group { min-height: 38px; margin-top: 12px; border: 0; border-radius: 8px; background: #28633b; box-shadow: 0 7px 14px rgba(27, 89, 48, .14); }
.radar-guide .radar-ops-console .radar-guide-support-group b { min-width: 38px; background: rgba(255,255,255,.16); }
.radar-guide .radar-ops-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 15px; color: #6f8588; background: #e0ebeb; font-size: .62rem; }
.radar-guide .radar-ops-footer span { display: inline-flex; align-items: center; gap: 8px; color: #2f7d69; font-weight: 800; }
.radar-guide .radar-ops-footer b { color: #789094; font-weight: 700; }
.radar-guide .radar-trial-rule-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.radar-guide .radar-trial-activation-note { grid-column: 1 / -1; padding-top: 8px; border-top: 1px dashed #c8dcda; }
.radar-guide .radar-trial-activation-note span { display: block; color: #71898a; font-size: .65rem; }
.radar-guide .radar-trial-activation-note strong { display: block; margin-top: 3px; color: #28746e; font-size: .72rem; }
@media (min-width: 901px) {
    .radar-guide .radar-guide-steps-panel { height: 100%; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 640px) {
    .radar-guide .radar-trial-card,
    .radar-guide .radar-trial-card > * { min-width: 0; }
    .radar-guide .radar-trial-rule-grid { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0,1fr)); }
    .radar-guide .radar-trial-rule-grid span { min-width: 0; padding: 7px 5px; }
    .radar-guide .radar-trial-rule-grid b { font-size: .54rem; }
    .radar-guide .radar-trial-action-row { display: flex; flex-direction: column; align-items: stretch; }
    .radar-guide .radar-trial-action-row > span { text-align: center; }
}
@media (max-width: 700px) {
    .radar-guide .radar-ops-header { min-height: 188px; padding: 18px 16px 16px; }
    .radar-guide .radar-ops-title-row { margin-top: 22px; }
    .radar-guide .radar-ops-title-row strong { font-size: 1.18rem; }
    .radar-guide .radar-ops-body { grid-template-columns: 1fr; gap: 8px; padding: 9px; }
    .radar-guide .radar-ops-preflight { grid-column: auto; }
    .radar-guide .radar-ops-card { padding: 12px; }
    .radar-guide .radar-ops-checks { gap: 5px; }
    .radar-guide .radar-ops-checks span { padding: 8px 6px; gap: 5px; font-size: .6rem; }
    .radar-guide .radar-ops-footer { min-height: 36px; padding: 0 12px; }
}
@media (max-width: 390px) {
    .radar-guide .radar-ops-kicker { font-size: .54rem; letter-spacing: .08em; }
    .radar-guide .radar-ops-online { font-size: .58rem; }
    .radar-guide .radar-ops-metrics strong { font-size: 1.1rem; }
    .radar-guide .radar-ops-checks span { align-items: flex-start; flex-direction: column; }
    .radar-guide .radar-ops-checks i { width: 15px; height: 15px; flex-basis: 15px; }
}

/* Radar support CTA v2: readable action with a dedicated QQ mark and arrow affordance. */
.radar-guide .radar-ops-console .radar-guide-support-group { display: grid; grid-template-columns: 34px minmax(0,1fr) 28px; align-items: center; gap: 10px; min-height: 52px; padding: 7px 9px 7px 8px; border: 1px solid rgba(132, 224, 166, .48); border-radius: 10px; background: linear-gradient(135deg, #214f35, #173e2b); color: #f4fff4; box-shadow: 0 8px 17px rgba(25, 84, 47, .17); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.radar-guide .radar-ops-console .radar-guide-support-group:hover { border-color: #91e2ad; box-shadow: 0 11px 22px rgba(25, 84, 47, .24); transform: translateY(-2px); }
.radar-guide .radar-ops-console .radar-guide-support-group:focus-visible { outline: 3px solid rgba(73, 177, 123, .3); outline-offset: 3px; }
.radar-guide .radar-ops-console .radar-support-icon { display: grid; width: 34px; height: 34px; min-width: 34px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; color: #e4ffd8; background: rgba(255,255,255,.14); font: 900 .94rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.radar-guide .radar-ops-console .radar-support-copy { display: grid; min-width: 0; gap: 3px; }
.radar-guide .radar-ops-console .radar-support-copy small { color: #a7d9b0; font: 800 .52rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .11em; }
.radar-guide .radar-ops-console .radar-support-copy strong { overflow: hidden; color: #fff; font-size: .73rem; font-weight: 850; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.radar-guide .radar-ops-console .radar-support-arrow { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; color: #d9f6dc; background: rgba(255,255,255,.1); font-size: .9rem; font-style: normal; transition: transform .2s ease; }
.radar-guide .radar-ops-console .radar-guide-support-group:hover .radar-support-arrow { transform: translate(2px, -2px); }
@media (max-width: 390px) { .radar-guide .radar-ops-console .radar-guide-support-group { grid-template-columns: 32px minmax(0,1fr) 26px; gap: 7px; } .radar-guide .radar-ops-console .radar-support-icon { width: 32px; height: 32px; min-width: 32px; } .radar-guide .radar-ops-console .radar-support-copy strong { font-size: .68rem; } }

/* Radar tutorial typography: improve reading size without changing the compact layout. */
.radar-guide .radar-guide-tutorial-marker span { font-size: .7rem; }
.radar-guide .radar-guide-tutorial-marker h2 { font-size: 1.55rem; }
.radar-guide .radar-guide-tutorial-marker p { font-size: .88rem; }
.radar-guide .radar-guide-steps li > b { font-size: .78rem; }
.radar-guide .radar-guide-steps h3 { font-size: 1.05rem; }
.radar-guide .radar-guide-steps p,
.radar-guide .radar-guide-steps a { font-size: .84rem; }
.radar-guide .radar-guide-steps .radar-guide-download-action small { font-size: .62rem; }
.radar-guide .radar-guide-steps .radar-guide-download-action strong { font-size: .8rem; }
.radar-guide .radar-trial-kicker { font-size: .64rem; }
.radar-guide .radar-trial-card h3 { font-size: 1.1rem; }
.radar-guide .radar-trial-card-top p { font-size: .76rem; }
.radar-guide .radar-trial-rule-grid b { font-size: .64rem; }
.radar-guide .radar-trial-rule-grid strong { font-size: .88rem; }
.radar-guide #radarTrialReceiveBtn { font-size: .78rem; }
.radar-guide .radar-trial-action-row > span { font-size: .68rem; }
.radar-guide .radar-trial-result > div > span,
.radar-guide .radar-trial-activation-note span { font-size: .7rem; }
.radar-guide .radar-trial-result > div > strong { font-size: .9rem; }
.radar-guide .radar-trial-activation-note strong { font-size: .78rem; }
.radar-guide .radar-trial-message { font-size: .74rem; }
.radar-guide .radar-ops-kicker { font-size: .68rem; }
.radar-guide .radar-ops-online { font-size: .72rem; }
.radar-guide .radar-ops-title-row div > span { font-size: .72rem; }
.radar-guide .radar-ops-title-row strong { font-size: 1.5rem; }
.radar-guide .radar-ops-title-row > b { font-size: .68rem; }
.radar-guide .radar-ops-metrics small,
.radar-guide .radar-ops-metrics em { font-size: .72rem; }
.radar-guide .radar-ops-card-head > div > span { font-size: .62rem; }
.radar-guide .radar-ops-card-head strong { font-size: 1rem; }
.radar-guide .radar-ops-card-head > b { font-size: .64rem; }
.radar-guide .radar-ops-checks span { font-size: .72rem; }
.radar-guide .radar-ops-tips ol,
.radar-guide .radar-ops-compatibility p { font-size: .76rem; }
.radar-guide .radar-ops-footer { font-size: .7rem; }
.radar-guide .radar-ops-console .radar-support-copy small { font-size: .58rem; }
.radar-guide .radar-ops-console .radar-support-copy strong { font-size: .8rem; }
@media (max-width: 700px) {
    .radar-guide .radar-guide-tutorial-marker h2 { font-size: 1.4rem; }
    .radar-guide .radar-guide-tutorial-marker p { font-size: .84rem; }
    .radar-guide .radar-guide-steps h3 { font-size: 1rem; }
    .radar-guide .radar-guide-steps p,
    .radar-guide .radar-guide-steps a { font-size: .82rem; }
    .radar-guide .radar-ops-kicker { font-size: .62rem; }
    .radar-guide .radar-ops-online { font-size: .66rem; }
    .radar-guide .radar-ops-title-row strong { font-size: 1.3rem; }
    .radar-guide .radar-ops-checks span { font-size: .68rem; }
    .radar-guide .radar-ops-tips ol,
    .radar-guide .radar-ops-compatibility p { font-size: .72rem; }
}
@media (max-width: 390px) {
    .radar-guide .radar-ops-console .radar-support-copy strong { font-size: .74rem; }
}

/* Optional radar overlay step: compact, neutral and action-focused. */
.radar-guide-optional-step { grid-template-columns: 56px minmax(0, 1fr) !important; align-items: start; padding: 12px 14px 12px 0 !important; border: 0 !important; border-top: 1px solid #c8d4d7 !important; border-radius: 0; background: transparent; }
.radar-guide-optional-step > b.radar-guide-optional-badge { display: inline-flex; width: 48px !important; min-width: 48px; height: 30px; padding: 0 8px; flex: 0 0 48px; align-items: center; justify-content: center; border: 1px solid #4e9ca0 !important; border-radius: 6px; background: #e8f6f5 !important; color: #267477 !important; box-shadow: 0 0 0 4px #e8eef0 !important; font-size: .72rem; font-weight: 850; line-height: 1; white-space: nowrap; word-break: keep-all; writing-mode: horizontal-tb; }
.radar-guide-optional-card { padding: 13px 15px; border: 1px solid #d6e4e5; border-left: 3px solid #4e9ca0; border-radius: 7px; background: #fbfdfd; }
.radar-guide-step-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.radar-guide-step-title h3 { margin: 0 !important; color: #1e353a; font-size: 1.02rem; }
.radar-guide-step-title > span { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 23px; padding: 2px 8px; border: 1px solid #a7cdce; border-radius: 4px; color: #267477; background: #edf8f7; font-size: .68rem; font-weight: 800; }
.radar-guide-optional-card > p { margin: 7px 0 0; color: #5d7074; font-size: .79rem; line-height: 1.6; }
.radar-guide-optional-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
.radar-guide-optional-actions > a,
.radar-guide-optional-actions > button { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 6px 10px; border: 1px solid transparent; border-radius: 5px; font-size: .74rem; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.radar-guide-optional-actions > a:hover,
.radar-guide-optional-actions > button:hover { transform: translateY(-1px); }
.radar-guide-optional-actions i { margin-left: auto; font-size: .88rem; font-style: normal; }
.radar-guide-optional-qq { color: #fff !important; background: #246f74; box-shadow: 0 4px 10px rgba(45, 117, 120, .16); }
.radar-guide-optional-qq:hover { background: #2d7377; }
.radar-guide-preview-action { border-color: #8dbfc0 !important; color: #1d6266 !important; background: #fff; }
.radar-guide-preview-action:hover { border-color: #76b4b5 !important; background: #f2fbfa; }
.radar-guide-optional-actions > a,
.radar-guide-optional-actions > button { min-height: 42px; padding: 8px 12px; border-radius: 6px; letter-spacing: .01em; }
.radar-guide-optional-qq { justify-content: center !important; gap: 9px !important; }
.radar-guide-optional-qq i,
.radar-guide-preview-action i { font-size: 1rem; }
.radar-guide-preview-action { justify-content: center !important; gap: 9px !important; }
@media (max-width: 640px) {
    .radar-guide-optional-step { grid-template-columns: 52px minmax(0, 1fr) !important; gap: 8px; padding: 12px 0 !important; }
    .radar-guide-optional-card { padding: 13px 12px; }
    .radar-guide-step-title { gap: 8px; }
    .radar-guide-step-title h3 { font-size: .98rem; }
    .radar-guide-optional-actions { grid-template-columns: 1fr; }
    .radar-guide-optional-actions > a,
    .radar-guide-optional-actions > button { width: 100%; }
}

/* Purchase package copy and selected-state refinement. */
.duration-select-card.has-description { min-height: 150px; }
.duration-select-card .dur-description {
    display: block;
    max-width: 34ch;
    overflow: visible;
    color: #667789;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-line-clamp: unset;
}
.duration-select-card.selected,
.duration-select-card.selected:hover {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(21, 159, 190, .2), 0 5px 16px rgba(24, 50, 74, .05);
}
.duration-select-card.selected::before { background: transparent; }

/* Final package safeguards: never let status badges cover the price. */
.duration-select-card .dur-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 8px;
}
.duration-select-card .dur-price-wrap {
    min-width: 140px;
    flex: 1 1 140px;
    overflow: hidden;
}
.duration-select-card .dur-price {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.duration-select-card .dur-card-status {
    flex: 0 0 auto;
}
.duration-select-card.selected,
.duration-select-card.selected:hover,
.duration-select-card.selected:focus-visible {
    border-color: #159fbe !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: 0 0 0 1px rgba(21, 159, 190, .28) !important;
}
.duration-select-card.selected::before { display: none !important; background: transparent !important; opacity: 0 !important; }
@media (max-width: 760px) {
    .duration-select-card .dur-price-wrap { min-width: 118px; flex-basis: 118px; }
    .duration-select-card .dur-price { font-size: 1.35rem; }
}
@media (max-width: 520px) {
    .duration-select-card .dur-price-wrap { min-width: 0; flex-basis: 120px; }
}

/* Package badge placement and selected motion v2. */
.duration-select-card {
    justify-content: flex-start;
}
.duration-select-card::before {
    background: transparent;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: background-color 240ms cubic-bezier(.22, .61, .36, 1), transform 240ms cubic-bezier(.22, .61, .36, 1);
}
.duration-select-card .dur-card-head {
    flex: 0 0 auto;
}
.duration-select-card .dur-card-meta {
    display: grid;
    width: 100%;
    min-width: 0;
    margin-top: auto;
    padding-top: 15px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-items: start;
    row-gap: 9px;
}
.duration-select-card .dur-price-wrap {
    width: 100%;
    min-width: 0;
    flex: none;
    overflow: visible;
}
.duration-select-card .dur-price {
    overflow: visible;
    text-overflow: clip;
}
.duration-select-card .dur-card-status {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}
.duration-select-card .dur-stock,
.duration-select-card .dur-limit {
    min-height: 27px;
    padding: 5px 9px;
}
.duration-select-card.selected,
.duration-select-card.selected:hover,
.duration-select-card.selected:focus-visible {
    border-color: #159fbe !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: 0 -7px 18px rgba(21, 159, 190, .12), 0 0 0 1px rgba(21, 159, 190, .28), 0 8px 18px rgba(24, 50, 74, .06) !important;
}
.duration-select-card.selected::before {
    display: block !important;
    top: -1px;
    height: 3px;
    background: #159fbe !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
    transform-origin: left center;
    transition: transform 240ms cubic-bezier(.22, .61, .36, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
    .duration-select-card.selected::before { transition: none !important; }
}

/* Package status badges v3: right-aligned, text-only indicators. */
.duration-select-card .dur-card-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    justify-items: stretch;
    column-gap: 14px;
    row-gap: 8px;
}
.duration-select-card .dur-price-wrap {
    width: auto;
    min-width: 0;
    overflow: hidden;
}
.duration-select-card .dur-price {
    overflow: hidden;
    text-overflow: ellipsis;
}
.duration-select-card .dur-card-status {
    width: auto;
    max-width: 100%;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.duration-select-card .dur-stock,
.duration-select-card .dur-limit {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.2;
}
.duration-select-card .dur-stock i { width: 6px; height: 6px; flex-basis: 6px; }
.duration-select-card .dur-stock.stock-normal { color: #0f9f72; }
.duration-select-card .dur-stock.stock-low { color: #b77908; }
.duration-select-card .dur-stock.stock-empty { color: #c24141; }
.duration-select-card .dur-limit { color: #6554b7; }
@media (max-width: 760px) {
    .duration-select-card .dur-card-meta { column-gap: 10px; }
    .duration-select-card .dur-price { font-size: 1.35rem; }
    .duration-select-card .dur-card-status { gap: 6px; }
}