/**
 * DiGrav Portal - 共享样式（2026-08 新设计体系）
 *
 * 设计语言：白底 / navy (#071a4d) / cobalt (#075cf2)，对齐官网原型。
 *
 * 包含营销页 + 交易页 + 后台页通用：
 *   - 设计 tokens（:root）
 *   - Header（sticky 白底毛玻璃，含移动端汉堡菜单）
 *   - Footer（极简 ICP）
 *   - 通用按钮（.btn / .btn-primary / .btn-outline / .btn-danger / .btn-sm）
 *   - 通用徽章（.badge / .badge-*）
 *   - 布局容器（.portal-container / .content-wrap）
 *   - 空状态 / 加载态 / 分页 / admin 卡片列表
 *   - 移动端断点：768px（折叠导航 + admin 表格转卡片）、414px
 *
 * 行为类名（JS 依赖，不可改名）：.header.nav-open、.nav-dropdown.open、
 * .portal-user-dropdown.show、.portal-icon、#auth-buttons
 */

:root {
    --blue: #075cf2;
    --blue-2: #0b78ff;
    --navy: #071a4d;
    --muted: #53617c;
    --line: #dce7f8;
    --pale: #f7faff;
    scroll-behavior: smooth;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
    background: #fff; color: var(--navy); min-height: 100vh;
    display: flex; flex-direction: column; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* ========== 布局容器 ========== */
.portal-container { max-width: 1220px; margin: 0 auto; padding: 0 24px; width: 100%; }
.content-wrap { width: min(1220px, calc(100% - 64px)); margin: 0 auto; }
.eyebrow { color: var(--blue); font-weight: 650; font-size: 14px; letter-spacing: .06em; margin: 0 0 18px; }
.crumb { display: flex; align-items: center; gap: 9px; color: #8190aa; font-size: 13px; }
.crumb a:hover { color: var(--blue); }

/* ========== Header（白底 sticky 毛玻璃） ========== */
.header {
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid #e6eefb;
    padding: 0; position: sticky; top: 0; z-index: 100;
}
.header-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 64px; position: relative; }
.logo { display: inline-flex; align-items: baseline; width: max-content; gap: 7px; color: var(--navy); text-decoration: none; }
.logo strong { color: #0752c9; font-size: 25px; letter-spacing: -.7px; font-weight: 730; }
.logo span { font-size: 15px; }

/* Nav links */
.nav-links { display: flex; gap: 44px; height: 100%; align-items: center; }
.nav-link {
    color: #09183e; text-decoration: none; font-size: 15px; padding: 20px 2px 18px;
    display: flex; align-items: center; transition: color .2s, border-color .2s;
    position: relative; cursor: pointer; border-bottom: 2px solid transparent; height: 100%;
}
.nav-link:hover, .nav-link:focus { color: var(--blue); border-bottom-color: var(--blue); outline: none; }
.nav-link.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 650; }

/* Dropdown（产品菜单） */
.nav-dropdown { position: relative; display: flex; align-items: center; height: 100%; }
.nav-dropdown-toggle {
    color: #09183e; font-size: 15px; padding: 20px 2px 18px; display: flex; align-items: center; gap: 4px;
    cursor: pointer; height: 100%; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.nav-dropdown-toggle:hover { color: var(--blue); border-bottom-color: var(--blue); }
.nav-dropdown-toggle .arrow { font-size: 10px; transition: transform .2s; }
.nav-dropdown.open .nav-dropdown-toggle { color: var(--blue); border-bottom-color: var(--blue); }
.nav-dropdown.open .nav-dropdown-toggle .arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 18px 50px rgba(28,65,128,.15); min-width: 190px; padding: 8px; overflow: hidden; z-index: 1000;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block; padding: 11px 12px; font-size: 14px; color: var(--navy); text-decoration: none;
    border-radius: 8px; transition: background .2s, color .2s; white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: #f1f6ff; color: var(--blue); }

/* Auth buttons (right side) */
#auth-buttons { display: flex; gap: 28px; align-items: center; }
#auth-buttons .nav-link { color: #09183e; text-decoration: none; font-size: 15px; padding: 8px 0; }
#auth-buttons .nav-link:hover { color: var(--blue); }

/* Hamburger button (mobile only) */
.nav-hamburger { display: none; background: none; border: none; color: var(--navy); cursor: pointer; padding: 8px; border-radius: 8px; align-items: center; justify-content: center; }
.nav-hamburger:hover { background: #f1f6ff; }
.nav-hamburger svg { width: 24px; height: 24px; }

/* ========== Footer（极简 ICP） ========== */
.footer {
    background: #fbfdff; color: #687994; text-align: center;
    padding: 18px 24px; font-size: 12px; margin-top: auto;
    border-top: 1px solid var(--line); line-height: 22px;
}
.footer a { color: #687994; text-decoration: none; }
.footer a:hover { color: var(--blue); }

/* ========== 共享按钮 ========== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 22px; min-height: 44px; border-radius: 8px; font-size: 14px; font-weight: 650;
    text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
    border: 1px solid transparent; cursor: pointer; text-align: center; line-height: 1.3;
}
.btn:focus-visible { outline: 3px solid rgba(5,92,242,.24); outline-offset: 3px; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: #004bd4; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(5,92,242,.22); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline { border-color: var(--blue); color: var(--blue); background: #fff; }
.btn-outline:hover { background: #eff5ff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(5,92,242,.14); }
.btn-danger { background: #d92d20; color: #fff; border-color: #d92d20; }
.btn-danger:hover { background: #b42318; transform: translateY(-2px); }
.btn-sm { padding: 0 12px; min-height: 32px; font-size: 12px; border-radius: 6px; }
.btn .portal-icon svg { transition: transform .25s; }
.btn:hover .portal-icon svg { transform: translateX(3px); }

/* ========== 共享徽章 ========== */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.badge-pending  { background: #fef0c7; color: #b54708; }
.badge-paid     { background: #d1fadf; color: #067647; }
.badge-cancelled{ background: #fee4e2; color: #b42318; }
.badge-expired  { background: #f2f4f7; color: #475467; }
.badge-active   { background: #d1fadf; color: #067647; }
.badge-inactive { background: #fee4e2; color: #b42318; }

/* ========== 空状态 / 加载态 ========== */
.empty-state { text-align: center; padding: 48px 24px; color: #94a1b6; }
.empty-state .icon { font-size: 48px; margin-bottom: 16px; color: #c3cee0; }
.loading { text-align: center; padding: 40px; color: #94a1b6; font-size: 14px; }

/* ========== Portal icon（注入目标） ========== */
.portal-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 0; }
.portal-icon svg { display: block; }

/* ========== 分页（共享） ========== */
.pagination-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; gap: 12px; flex-wrap: wrap; }
.pagination-info { font-size: 14px; color: var(--muted); }
.pagination-info strong { color: var(--blue); }
.pagination-info select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; cursor: pointer; color: var(--navy); background: #fff; }
.pagination-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination-buttons button { min-width: 36px; height: 36px; padding: 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--navy); transition: all .2s; }
.pagination-buttons button:hover:not(:disabled):not(.active) { background: #f1f6ff; border-color: var(--blue); color: var(--blue); }
.pagination-buttons button.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.pagination-buttons button:disabled { opacity: .45; cursor: not-allowed; }

/* ========== 表格（admin / orders 共享形态） ========== */
.portal-table-wrapper { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.portal-table-wrapper table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.portal-table-wrapper th { text-align: left; padding: 12px 14px; background: var(--pale); color: var(--navy); font-weight: 650; border-bottom: 1px solid var(--line); white-space: nowrap; }
.portal-table-wrapper td { padding: 12px 14px; border-bottom: 1px solid #eef3fb; color: #34415b; vertical-align: middle; }
.portal-table-wrapper tbody tr:last-child td { border-bottom: none; }
.portal-table-wrapper tbody tr:hover td { background: var(--pale); }
.portal-table-wrapper th.resizable { cursor: col-resize; user-select: none; }

/* ========== Admin 卡片列表（移动端） ========== */
.admin-card-list { display: none; }
.admin-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(28,65,128,.05); }
.admin-card .row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; gap: 12px; }
.admin-card .row .label { color: var(--muted); flex-shrink: 0; min-width: 60px; }
.admin-card .row .value { color: #34415b; text-align: right; word-break: break-all; }
.admin-card .row.header { font-size: 14px; font-weight: 700; padding: 6px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.admin-card .actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* ========== 输入控件（交易/admin 页共享形态） ========== */
.form-input, .form-select {
    padding: 10px 14px; border: 1px solid #cedcf1; border-radius: 8px; outline: none;
    color: var(--navy); background: #fff; font: inherit; font-weight: 400;
    transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(5,92,242,.1); }

/* ========== Responsive — Tablet 768px ========== */
@media (max-width: 768px) {
    body { font-size: 14px; }

    /* Header collapses to hamburger */
    .header-inner { padding: 0 18px; height: 60px; }
    .logo strong { font-size: 22px; }
    .logo span { font-size: 13px; }
    .nav-hamburger { display: inline-flex; }
    .nav-links {
        display: none; position: absolute; top: 59px; left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: stretch;
        padding: 10px 22px 26px; box-shadow: 0 18px 40px rgba(28,65,128,.12);
        border-bottom: 1px solid var(--line); height: auto; z-index: 99; gap: 0;
    }
    .header.nav-open .nav-links { display: flex; }
    .nav-links .nav-link,
    .nav-links .nav-dropdown { width: 100%; }
    .nav-links .nav-link { padding: 16px 2px; border-bottom: 1px solid var(--line); height: auto; font-size: 16px; }
    .nav-links .nav-dropdown-toggle { padding: 16px 2px; width: 100%; justify-content: space-between; height: auto; font-size: 16px; border-bottom: 1px solid var(--line); }
    .nav-links .nav-dropdown-menu { position: static; transform: none; box-shadow: none; min-width: 0; background: var(--pale); border: none; border-radius: 8px; margin: 8px 0; }
    .nav-links .nav-dropdown-menu a { color: #34415b; border-bottom: none; }
    .nav-links .nav-dropdown-menu a:hover { background: #e8f1ff; }

    #auth-buttons { gap: 8px; }
    #auth-buttons .nav-link { padding: 0 8px; font-size: 13px; }

    .footer { padding: 14px 16px; font-size: 12px; }
    .portal-container { padding: 0 16px; }
    .content-wrap { width: calc(100% - 40px); }

    /* Admin: hide table, show card list */
    .portal-table-wrapper { display: none !important; }
    .admin-card-list { display: flex !important; flex-direction: column; gap: 0; }

    .pagination-bar { padding: 12px; font-size: 12px; }
    .pagination-buttons button { min-width: 28px; height: 28px; font-size: 12px; }
}

/* ========== Responsive — Phone 414px ========== */
@media (max-width: 414px) {
    body { font-size: 13px; }
    .header-inner { padding: 0 12px; }
    .logo strong { font-size: 20px; }
    .logo span { font-size: 12px; }
    .portal-container { padding: 0 12px; }
    .admin-card { padding: 12px; }
    .admin-card .row { font-size: 12px; }
    .btn { width: 100%; }
    .btn-sm { width: auto; padding: 6px 12px; font-size: 12px; }
}

/* ========== 动效减弱 ========== */
@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}