/* ============================================================
   飞客云 FKYUN - 科技清爽主题  (fk.css)
   配色：科技蓝 + 青色渐变 / 白底卡片 / 轻投影 / 微交互
   适用：前台首页、产品详情页、会员区（头部与首页一致）、登录/注册页
   ============================================================ */

:root {
    /* 主色与渐变 */
    --primary:        #2563eb;
    --primary-dark:   #1d4ed8;
    --accent:         #06b6d4;
    --gradient:       linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    --gradient-soft:  linear-gradient(135deg, #eff6ff 0%, #ecfeff 100%);

    /* 背景与边框 */
    --bg:            #f4f7fb;
    --card-bg:       #ffffff;
    --border:        #e6ebf2;
    --border-strong: #d3dce8;

    /* 文字 */
    --text:          #1e293b;
    --text-sub:      #64748b;
    --text-light:    #94a3b8;

    /* 尺寸与阴影 */
    --radius:    16px;
    --radius-sm: 10px;
    --shadow-sm: 0 2px 10px rgba(30, 64, 175, .06);
    --shadow-md: 0 10px 30px rgba(30, 64, 175, .10);
    --shadow-lg: 0 20px 50px rgba(30, 64, 175, .16);

    --maxw: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; transition: color .2s ease; }
img { max-width: 100%; display: block; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 22px;
}

/* ============================================================
   顶栏  header
   ============================================================ */
header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.header-inner {
    height: 66px;
    display: flex; align-items: center; justify-content: space-between;
}
.logo {
    font-size: 1.55rem; font-weight: 800; letter-spacing: .5px;
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.user-links { display: flex; align-items: center; gap: 6px; }
.user-links a {
    font-size: .92rem; color: var(--text-sub);
    padding: 7px 14px; border-radius: 999px; transition: all .2s ease;
}
.user-links a:hover { color: var(--primary); background: var(--gradient-soft); }
.user-links .link-items { color: var(--text); font-weight: 600; pointer-events: none; }

/* ============================================================
   导航  nav
   ============================================================ */
nav {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 66px; z-index: 90;
}
.nav-links {
    display: flex; align-items: center; gap: 6px;
    height: 56px; overflow-x: auto; white-space: nowrap;
}
.nav-links a {
    position: relative;
    font-size: .95rem; color: var(--text-sub); font-weight: 500;
    padding: 8px 16px; border-radius: 10px; transition: all .2s ease;
}
.nav-links a:hover { color: var(--primary); background: var(--gradient-soft); }
.nav-links a.active {
    color: #fff; background: var(--gradient); box-shadow: var(--shadow-sm);
}

/* ============================================================
   Hero 横幅（首页顶部科技感）
   ============================================================ */
.hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(1200px 400px at 10% -20%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(900px 360px at 95% 0%, rgba(6,182,212,.16), transparent 55%),
        var(--gradient-soft);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 54px 40px;
    margin: 26px 0 8px;
}
.hero::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(6,182,212,.22), transparent 70%);
}
.hero h1 {
    font-size: 2.4rem; font-weight: 800; line-height: 1.25; letter-spacing: .5px;
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    position: relative; z-index: 1;
}
.hero p {
    margin-top: 14px; font-size: 1.06rem; color: var(--text-sub);
    max-width: 640px; position: relative; z-index: 1;
}
.hero .hero-tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; }
.hero .hero-tags span {
    font-size: .88rem; color: var(--primary-dark); font-weight: 600;
    background: #fff; border: 1px solid var(--border);
    padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow-sm);
}

/* ============================================================
   版块  section
   ============================================================ */
main { padding-bottom: 60px; }
section { margin-top: 48px; scroll-margin-top: 140px; }
.section-title {
    display: flex; align-items: center; gap: 12px;
    font-size: 1.5rem; font-weight: 700; color: var(--text);
    margin-bottom: 26px;
}
.section-title::before {
    content: ""; width: 6px; height: 22px; border-radius: 4px;
    background: var(--gradient);
}

/* ============================================================
   产品卡片网格
   ============================================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 22px;
}
.product-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex; flex-direction: column;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(37,99,235,.35);
}
.product-card h3 { font-size: 1.16rem; font-weight: 700; margin-bottom: 12px; }
.product-card h3 a { color: var(--text); }
.product-card h3 a:hover { color: var(--primary); }
.product-card .specs {
    font-size: .9rem; color: var(--text-sub); line-height: 1.8;
    padding: 12px 0 18px; margin-bottom: 16px;
    border-top: 1px dashed var(--border-strong);
}
.product-card .price {
    font-size: 1.55rem; font-weight: 800; color: var(--primary);
    margin-bottom: 18px;
}
.product-card .price span { font-size: .82rem; font-weight: 500; color: var(--text-light); margin-right: 12px; }

.btn-buy {
    display: block; text-align: center;
    background: var(--gradient); color: #fff;
    font-weight: 600; font-size: .96rem;
    padding: 11px 0; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm); transition: all .2s ease;
    margin-top: auto;
}
.btn-buy:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.05); }

/* ============================================================
   联系方式 / 收款码
   ============================================================ */
.contact-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px; box-shadow: var(--shadow-sm);
}
.qr-group { display: flex; gap: 24px; flex-wrap: wrap; }
.qr-item { text-align: center; }
.qr-placeholder {
    width: 150px; height: 150px; border-radius: var(--radius-sm);
    background: var(--gradient-soft); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; padding: 8px; transition: box-shadow .25s ease;
}
.qr-placeholder:hover { box-shadow: var(--shadow-md); }
.qr-placeholder img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.qr-label { margin-top: 10px; font-size: .9rem; color: var(--text-sub); font-weight: 600; }

/* ============================================================
   产品详情页  view
   ============================================================ */
.detail-title { font-size: 2.1rem; font-weight: 800; margin-bottom: 8px; letter-spacing: .3px; }
.detail-desc { color: var(--text-sub); margin-bottom: 28px; }

.purchase-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 30px; margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
}
.purchase-price { font-size: 2rem; font-weight: 800; color: var(--primary); }
.purchase-price span { font-size: .95rem; font-weight: 500; color: var(--text-light); margin-right: 16px; }
.btn-buy-large {
    background: var(--gradient); color: #fff;
    font-weight: 700; font-size: 1.05rem;
    padding: 14px 46px; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); transition: all .2s ease; white-space: nowrap;
}
.btn-buy-large:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); filter: brightness(1.05); }

.detail-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px; margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.detail-section h2 {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.25rem; font-weight: 700; margin-bottom: 22px; color: var(--text);
}
.detail-section h2::before {
    content: ""; width: 5px; height: 18px; border-radius: 3px; background: var(--gradient);
}

.specs-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.spec-item {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--gradient-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
}
.spec-label { color: var(--text-sub); font-size: .92rem; }
.spec-value { color: var(--text); font-weight: 700; font-size: .98rem; }

.description-content { color: var(--text); font-size: .98rem; line-height: 1.9; }

.requirements-content p { color: var(--text-sub); margin-bottom: 14px; }
.requirements-content ul { list-style: none; }
.requirements-content li {
    position: relative; padding-left: 26px; margin-bottom: 12px;
    color: var(--text); font-size: .95rem;
}
.requirements-content li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 8px; height: 8px; border-radius: 2px;
    background: var(--gradient); transform: rotate(45deg);
}

/* ============================================================
   页脚  footer
   ============================================================ */
footer {
    background: #0f172a; color: #94a3b8;
    padding: 34px 0; margin-top: 20px; text-align: center;
}
footer p { font-size: .88rem; margin: 4px 0; }
footer a { color: #cbd5e1; }
footer a:hover { color: #fff; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 720px) {
    .header-inner { height: 58px; }
    nav { top: 58px; }
    .logo { font-size: 1.3rem; }
    .hero { padding: 36px 24px; }
    .hero h1 { font-size: 1.7rem; }
    .purchase-bar { flex-direction: column; align-items: stretch; text-align: center; }
    .btn-buy-large { width: 100%; }
    .section-title { font-size: 1.25rem; }
    .detail-title { font-size: 1.5rem; }
}

/* ============================================================
   会员区  member   （头部/导航/页脚复用前台，保持一致）
   ============================================================ */
.member-layout {
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: 24px;
    align-items: start;
    margin: 26px 0 8px;
}

/* 左侧菜单卡片 */
.member-menu {
    position: sticky;
    top: 140px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* 注意：交互样式只放在 <a> 与激活态上，
   .menu-item 本身不设 cursor / display，避免误伤链接点击 */
.menu-item a {
    display: block;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    color: var(--text-sub);
    font-size: .95rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all .2s ease;
}
.menu-item a:hover {
    color: var(--primary);
    background: var(--gradient-soft);
    border-left-color: var(--accent);
}
.menu-item.active a {
    color: #fff;
    font-weight: 600;
    background: var(--gradient);
    border-left-color: transparent;
    box-shadow: var(--shadow-sm);
}

/* 右侧内容区 —— 后台管理卡片风格 */
.member-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 30px;
    box-shadow: var(--shadow-sm);
    min-height: 420px;
}
.content-title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border);
}
.content-title::before {
    content: "";
    width: 6px; height: 22px; border-radius: 4px;
    background: var(--gradient);
}
/* 数据表格：表头圆角外露，边框只包内容区 */
.data-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .93rem;
    border: none; /* 去掉整个表格的外边框 */
}

.data-table thead th {
    background-color: #dbeafe;
    color: #1e3a8a;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    white-space: nowrap;
    border-bottom: 1px solid #bfdbfe;
}

.data-table thead th:first-child { border-top-left-radius: 8px; }
.data-table thead th:last-child  { border-top-right-radius: 8px; }

/* 边框只给内容区：左右两条竖线 */
.data-table tbody td:first-child { border-left: 1px solid var(--border); }
.data-table tbody td:last-child  { border-right: 1px solid var(--border); }

.data-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-sub);
    line-height: 1.6;
    vertical-align: middle;
}

/* 最后一行补一条底边框，让内容区闭合 */
.data-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }

/* 最后一行左右两角做圆角，整体更协调（不需要可删） */
.data-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.data-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 8px; }

.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover td { background-color: #f8fafc; }

.data-table tbody td a { color: var(--primary); font-weight: 500; }
.data-table tbody td a:hover { text-decoration: underline; }
/* 小按钮 */
.btn-sm {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1;
    transition: all .2s ease;
    white-space: nowrap;
}
.btn-renew {
    background: var(--gradient);
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}
.btn-renew:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.05); text-decoration: none; }

/* 空表占位 */
.data-table .empty-row td {
    text-align: center;
    color: var(--text-light);
    padding: 40px 16px;
}

/* ============================================================
   资料页
   ============================================================ */

        .profile-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 一行两列 */
            gap: 16px; /* 卡片间距 */
            margin-top: 20px;
        }
        .profile-card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
        }
        .profile-card .label {
            font-size: 13px;
            color: #64748b;
            margin-bottom: 6px;
        }
        .profile-card .value {
            font-size: 15px;
            color: #1e293b;
            font-weight: 600;
            display: flex;
            align-items: center;
            word-break: break-all;
        }
        .profile-actions {
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid #f1f5f9;
        }
/* 购买页 */
		.profile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.profile-label {
    color: var(--text-sub, #64748b);
    font-size: .88rem;
    white-space: nowrap;
}

.profile-value {
    color: var(--text, #1e293b);
    font-weight: 600;
}

/* 下拉框统一风格 */
.profile-item select {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text, #1e293b);
    font-size: .9rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.profile-item select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* 价格那一行突出显示 */
.profile-item.is-price {
    background: #dbeafe;
    border-color: #bfdbfe;
}
.profile-item.is-price .profile-value {
    color: #1e3a8a;
    font-size: 1.05rem;
}

.profile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.result-message {
    font-size: .9rem;
}
/* ============================================================
   登录 / 注册页  auth  (科技清爽 · 与全站同色)
   ============================================================ */
.auth-body {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1000px 400px at 10% -10%, rgba(37,99,235,.14), transparent 60%),
        radial-gradient(800px 360px at 95% 10%, rgba(6,182,212,.14), transparent 55%),
        var(--bg);
}
.auth-card {
    width: 100%; max-width: 460px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 42px 40px;
}
.auth-card.wide { max-width: 540px; }
.auth-header { text-align: center; margin-bottom: 30px; }
.auth-header .logo {
    font-size: 2rem; font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    display: inline-block; margin-bottom: 8px;
}
.auth-header p { color: var(--text-sub); font-size: .92rem; }
.auth-error {
    background: #fef2f2; border: 1px solid #fecaca; color: #dc2626;
    padding: 12px 14px; border-radius: 10px; margin-bottom: 20px;
    font-size: .9rem; text-align: center; display: none;
}
.form-row { display: flex; gap: 18px; }
.form-group { margin-bottom: 18px; flex: 1; }
.form-group label { display: block; margin-bottom: 8px; color: var(--text-sub); font-size: .9rem; font-weight: 500; }
.form-group input {
    width: 100%; padding: 12px 15px;
    background: #f8fafc; border: 1px solid var(--border-strong);
    border-radius: 10px; color: var(--text); font-size: .95rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: .88rem; color: var(--text-sub); }
.form-options a { color: var(--primary); }
.terms { display: flex; align-items: flex-start; margin-bottom: 24px; font-size: .88rem; color: var(--text-sub); }
.terms input { margin: 3px 8px 0 0; }
.terms a { color: var(--primary); }
.btn-auth {
    width: 100%; padding: 13px; border: none; cursor: pointer;
    background: var(--gradient); color: #fff;
    font-size: 1rem; font-weight: 700; border-radius: 10px;
    box-shadow: var(--shadow-md); transition: all .2s ease;
}
.btn-auth:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: var(--shadow-lg); }
.btn-auth:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.auth-footer { margin-top: 24px; text-align: center; font-size: .9rem; color: var(--text-sub); }
.auth-footer a { color: var(--primary); font-weight: 600; }
.auth-back { display:block; text-align:center; margin-top:16px; font-size:.88rem; color:var(--text-light); }
.auth-back a { color: var(--text-sub); }
.auth-back a:hover { color: var(--primary); }
@media (max-width: 540px) { .form-row { flex-direction: column; gap: 0; } .auth-card { padding: 32px 22px; } }