/* =====================================================
   外贸单证通 TradeDocs · 全站样式
   设计语言：墨蓝（Ink Navy）× 香槟金（Champagne Gold）
   定位：高端外贸单证平台 —— 沉稳、克制、有质感
   ===================================================== */

/* ---------------- 设计变量 ---------------- */
:root {
    /* 香槟金系 */
    --gold: #b08d57;
    --gold-deep: #96733f;
    --gold-bright: #d6bc8c;
    --gold-ink: #6e5530;
    --gold-grad: linear-gradient(135deg, #d6bc8c 0%, #b08d57 100%);
    --gold-soft: #f7f3ea;
    --gold-line: #e6d9c2;

    /* 墨蓝系（主操作色） */
    --primary: #1e3252;
    --primary-dark: #16243d;
    --primary-deep: #0e1730;
    --primary-grad: linear-gradient(135deg, #16243d 0%, #1e3252 55%, #2e4b7e 100%);
    --sidebar-grad: linear-gradient(180deg, #0d1730 0%, #0a1122 55%, #080e1c 100%);

    /* 画布与文本（暖调象牙白，配金更显质感） */
    --bg: #f4f4f1;
    --card: #ffffff;
    --text: #232a3b;
    --text-2: #3d4457;
    --muted: #71758a;
    --muted-2: #9a9dab;
    --line: #e5e3dc;
    --line-2: #efeee9;

    /* 功能色（降饱和，避免廉价感） */
    --danger: #a34050;
    --ok: #2f6b52;
    --warn: #a67c2e;

    --radius-sm: 9px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-xs: 0 1px 2px rgba(23, 28, 45, .05);
    --shadow: 0 1px 2px rgba(23, 28, 45, .03), 0 8px 24px -8px rgba(23, 28, 45, .09);
    --shadow-md: 0 2px 4px rgba(23, 28, 45, .03), 0 18px 44px -12px rgba(23, 28, 45, .16);
    --ring: 0 0 0 3px rgba(176, 141, 87, .22);
    --ease: cubic-bezier(.4, .14, .3, 1);
    --side-w: 248px;
    --font-display: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body {
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--primary-dark); }
b, strong { font-weight: 600; }
small { font-size: 12px; }
::selection { background: rgba(214, 188, 140, .45); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfcabd; border: 3px solid transparent; background-clip: content-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #b9b3a4; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 图标 */
.ico { width: 18px; height: 18px; flex: 0 0 18px; }
.ico-sm { width: 15px; height: 15px; flex: 0 0 15px; }
.ico-lg { width: 22px; height: 22px; }
.ico-xl { width: 26px; height: 26px; }

/* ---------------- Flash 提示 ---------------- */
.flash {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px;
    border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; border: 1px solid transparent;
    box-shadow: var(--shadow-xs); animation: flash-in .32s var(--ease);
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.flash .ico-sm { flex: 0 0 15px; }
.flash-success { background: #eef4ef; color: var(--ok); border-color: #cfdfd3; }
.flash-error { background: #f9eef0; color: var(--danger); border-color: #e8ccd2; }
.flash-info { background: #f5f2ea; color: var(--gold-ink); border-color: var(--gold-line); }

/* ---------------- 按钮 ---------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 17px; border-radius: 10px; border: 1px solid var(--line);
    background: #fff; color: var(--text-2); cursor: pointer; font-size: 13.5px; font-weight: 500;
    font-family: inherit; line-height: 1.4; white-space: nowrap;
    transition: all .16s var(--ease); box-shadow: var(--shadow-xs);
}
.btn:hover { border-color: #d5d1c6; color: var(--text); box-shadow: 0 4px 12px -3px rgba(23, 28, 45, .14); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
    background: var(--primary-grad); color: #f4efe3; border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 22px -12px rgba(22, 36, 61, .85);
}
.btn-primary:hover { color: #fff; filter: brightness(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 28px -12px rgba(22, 36, 61, .9); }
.btn-soft { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }
.btn-soft:hover { background: #f2ecdf; border-color: #d9c9a8; color: var(--gold-ink); }
.btn-danger { background: #fff; color: var(--danger); border-color: #e8ccd2; }
.btn-danger:hover { background: #f9eef0; border-color: #dcb2bc; color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 12.8px; border-radius: 9px; gap: 5px; }
.btn-lg { padding: 14px 34px; font-size: 15.5px; border-radius: 12px; }
.btn-ghost { background: rgba(255, 255, 255, .07); border-color: rgba(214, 188, 140, .35); color: #eadfc6; box-shadow: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, .13); border-color: rgba(214, 188, 140, .6); color: #f6eeda; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* 深色底上的反白按钮 */
.btn-invert { background: #fff; color: var(--primary-deep); border-color: transparent; box-shadow: 0 14px 34px -14px rgba(4, 8, 18, .8); }
.btn-invert:hover { background: #fff; color: var(--primary-deep); transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(4, 8, 18, .9); }

/* ---------------- 卡片 / 表格 ---------------- */
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 18px; position: relative;
}
.card-title {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 15.5px; font-weight: 650; letter-spacing: .2px;
    padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.card-title .btn { font-weight: 500; }
.table-wrap { overflow-x: auto; margin: 0 -22px -20px; padding: 0 22px 4px; }
.table-wrap table.tbl { min-width: 100%; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.tbl th {
    text-align: left; padding: 10px 12px; background: #faf9f5; color: #6d7282;
    font-weight: 600; font-size: 12.5px; letter-spacing: .4px; white-space: nowrap;
    border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
}
table.tbl th:first-child { border-radius: 9px 0 0 9px; }
table.tbl th:last-child { border-radius: 0 9px 9px 0; }
table.tbl td { padding: 13px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; color: var(--text-2); }
table.tbl tbody tr:hover td { background: #fbf9f3; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td b { color: var(--text); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--muted-2); padding: 40px 12px; font-size: 13.5px; }
.empty-ico {
    display: flex; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px;
    align-items: center; justify-content: center; background: var(--gold-soft); border: 1px dashed var(--gold-line); color: var(--gold);
}

/* 表格操作区 */
.acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acts form { display: inline-flex; margin: 0; }
.sub-note { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 5px; vertical-align: -2px; margin-left: 7px; box-shadow: inset 0 0 0 1px rgba(23, 28, 45, .14); }
code { background: #f7f6f2; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 12.5px; font-family: "SFMono-Regular", Consolas, monospace; color: #5c5546; }

/* ---------------- 徽章 ---------------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    font-size: 11.8px; font-weight: 600; letter-spacing: .2px; white-space: nowrap;
}
.badge-blue { background: #e9edf6; color: #33456e; }
.badge-green { background: #e7f1ea; color: #2f5d50; }
.badge-gray { background: #eeedea; color: #63676f; }
.badge-orange { background: #f5ecdd; color: #8c6a2f; }
.badge-trial { background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold-line); }
.badge-pro { background: var(--primary-grad); color: #e7d3a8; }
.badge-warn { background: #f7f2e3; color: #8c6a2f; border: 1px solid var(--gold-line); }
.badge-dark { background: rgba(255, 255, 255, .08); color: #d6bc8c; border: 1px solid rgba(214, 188, 140, .3); }

/* ---------------- 表单 ---------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12.8px; color: var(--text-2); margin-bottom: 7px; font-weight: 600; }
.field label .req { color: var(--danger); margin-left: 3px; }
.field input[type=text], .field input[type=password], .field input[type=email], .field input[type=number],
.field input[type=date], .field input[type=tel], .field select, .field textarea {
    width: 100%; padding: 10px 13px; border: 1px solid #dedbd2; border-radius: 10px; font-size: 13.8px;
    background: #fff; color: var(--text); transition: all .16s var(--ease); font-family: inherit;
    box-shadow: 0 1px 2px rgba(23, 28, 45, .03) inset;
}
.field input::placeholder, .field textarea::placeholder { color: #a9a69b; }
.field select {
    appearance: none; cursor: pointer; padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371758a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
.field textarea { resize: vertical; min-height: 80px; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--gold-bright); box-shadow: var(--ring); background: #fff;
}
.field input[readonly] { background: #f8f7f4; color: var(--muted); }
.field .hint { font-size: 12px; color: var(--muted-2); margin-top: 5px; line-height: 1.6; }
.form-actions { margin-top: 20px; display: flex; gap: 10px; align-items: center; }

/* ---------------- 应用外壳 ---------------- */
.app-body { background: var(--bg); }
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--side-w); flex: 0 0 var(--side-w); background: var(--sidebar-grad); color: #aeb8cc;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    border-right: 1px solid rgba(214, 188, 140, .14); z-index: 30;
}
.sidebar::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 280px; pointer-events: none;
    background: radial-gradient(430px 190px at 18% 0%, rgba(214, 188, 140, .12), transparent 70%);
}
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); background-clip: content-box; }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 22px 20px 16px; position: relative; }
.side-logo {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: var(--gold-grad);
    display: flex; align-items: center; justify-content: center; color: #16213c;
    box-shadow: 0 8px 18px -8px rgba(176, 141, 87, .75), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.side-logo .ico { width: 20px; height: 20px; }
.sb-text { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.sb-text b { color: #f3ecdb; font-size: 16px; letter-spacing: .4px; font-family: var(--font-display); }
.sb-text small { color: #8d97ad; font-size: 11px; letter-spacing: 1.5px; }

.side-tenant {
    margin: 4px 16px 8px; padding: 12px 14px; border-radius: 12px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(214, 188, 140, .14);
}
.st-name { font-size: 13.2px; color: #e3e8f2; font-weight: 600; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-nav { padding: 8px 14px 18px; flex: 1; }
.side-nav a {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 3px;
    color: #9daac2; border-radius: 11px; font-size: 13.6px; font-weight: 500; position: relative;
    transition: all .16s var(--ease); border: 1px solid transparent;
}
.side-nav a .ico { opacity: .75; }
.side-nav a:hover { background: rgba(255, 255, 255, .05); color: #dfe6f3; }
.side-nav a:hover .ico { opacity: 1; }
.side-nav a.active {
    background: linear-gradient(135deg, rgba(214, 188, 140, .2), rgba(214, 188, 140, .07));
    border-color: rgba(214, 188, 140, .32); color: #f0e4c8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.side-nav a.active .ico { opacity: 1; color: var(--gold-bright); }
.side-nav a.active::before {
    content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #d6bc8c, #b08d57);
}
.nav-group {
    font-size: 11px; letter-spacing: 1.6px; color: rgba(214, 188, 140, .5); padding: 16px 12px 7px; font-weight: 700;
}
.side-foot {
    padding: 14px 20px 20px; font-size: 11.5px; color: #6d788f; line-height: 1.7;
    border-top: 1px solid rgba(214, 188, 140, .12); background: rgba(0, 0, 0, .16);
}
.side-foot .sf-tip { display: flex; align-items: center; gap: 6px; color: #b8a87f; font-weight: 600; margin-bottom: 2px; }
.side-scrim { display: none; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    height: 62px; padding: 0 26px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title { font-size: 16.5px; font-weight: 650; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.sidebar-toggle {
    display: none; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line);
    background: #fff; color: var(--text-2); cursor: pointer; align-items: center; justify-content: center;
}
.sidebar-toggle:hover { background: #f8f6f0; }

.user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.uc-text { display: flex; flex-direction: column; line-height: 1.25; }
.uc-text b { font-size: 13px; }
.uc-text small { color: var(--muted-2); font-size: 11px; }
.avatar {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    background: var(--primary-grad); color: #e7d3a8;
    display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(214, 188, 140, .35);
}
.logout {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 6px 11px; border-radius: 999px;
    color: var(--muted); font-size: 12.5px; background: #f5f4f0;
}
.logout:hover { background: #f9eef0; color: var(--danger); }

.content { padding: 24px 26px 48px; max-width: 1320px; width: 100%; }
.notice {
    display: flex; align-items: center; gap: 8px; padding: 11px 26px; font-size: 13.2px; font-weight: 500;
    border-bottom: 1px solid transparent;
}
.notice a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.notice-warn { background: linear-gradient(90deg, #f9f3e3, #f7f2e6); color: #7a5c22; border-bottom-color: var(--gold-line); }
.notice-warn a { color: #5e461a; }
.notice-info { background: linear-gradient(90deg, #f3f5fa, #f7f8fb); color: #33456e; border-bottom-color: #dde3ee; }
.notice-info a { color: #24355e; }

/* ---------------- 统计卡 ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
    box-shadow: var(--shadow); position: relative; overflow: hidden; transition: all .2s var(--ease);
}
.stat::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, rgba(176, 141, 87, .95), rgba(214, 188, 140, .55) 55%, transparent);
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d9d4c8; }
a.stat { display: block; color: inherit; }
a.stat:hover { color: inherit; }
.stat .s-val { font-size: 27px; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; line-height: 1.25; color: var(--primary-dark); }
.stat .s-label { font-size: 12.6px; color: var(--muted); margin-top: 3px; }
.stat .s-ico {
    width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px; color: #f2ecdd; box-shadow: 0 8px 18px -8px rgba(23, 28, 45, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.stat .s-ico .ico { width: 20px; height: 20px; }
.s-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* 图标底色：低饱和莫兰迪 + 金点缀 */
.ico-blue { background: linear-gradient(135deg, #24355e, #3e5c9a); }
.ico-green { background: linear-gradient(135deg, #1f5c4a, #3b8b6e); }
.ico-orange { background: linear-gradient(135deg, #8c6a2f, #c8a464); }
.ico-violet { background: linear-gradient(135deg, #4a3a63, #7a5c9e); }
.ico-cyan { background: linear-gradient(135deg, #2e5a73, #5a8ca6); }
.ico-rose { background: linear-gradient(135deg, #7a3040, #a65a6a); }
.ico-slate { background: linear-gradient(135deg, #3a4354, #5e6a80); }

/* 进度条 */
.meter { height: 8px; background: #ebe9e2; border-radius: 99px; overflow: hidden; margin-top: 9px; }
.meter-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #b08d57, #d6bc8c); transition: width .5s var(--ease); }
.meter-fill.is-warn { background: linear-gradient(90deg, #a67c2e, #d9a94e); }

/* ---------------- 业务面板 ---------------- */
.dash-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; align-items: start; }
.ad-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }

.kv { display: grid; gap: 9px; font-size: 13.3px; }
.kv .kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px dashed var(--line-2); }
.kv .kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv .kv-k { color: var(--muted); }

.onboard-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.onboard-step {
    display: block; padding: 16px 18px; border-radius: var(--radius-sm); text-decoration: none;
    background: linear-gradient(160deg, #fdfbf6, #f7f1e4); border: 1px dashed var(--gold-line); color: var(--text-2);
    transition: all .18s var(--ease);
}
.onboard-step:hover { border-style: solid; border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(150, 115, 63, .55); color: var(--text); }
.onboard-step .ob-h { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gold-ink); margin-bottom: 4px; }
.onboard-step .ob-n { width: 22px; height: 22px; border-radius: 7px; background: var(--gold-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.onboard-step span { color: var(--muted); font-size: 12.8px; }

/* 筛选栏 / 分页 */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: center; }
.filter-bar input, .filter-bar select {
    padding: 9px 13px; border: 1px solid #dedbd2; border-radius: 10px; font-size: 13.5px; background: #fff;
    font-family: inherit; color: var(--text); transition: all .16s var(--ease); min-width: 180px;
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--gold-bright); box-shadow: var(--ring); }
.pager { display: flex; gap: 6px; justify-content: flex-end; margin-top: 16px; }
.pager a, .pager span {
    min-width: 36px; text-align: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px;
    font-size: 13px; background: #fff; color: var(--text-2); transition: all .16s var(--ease);
}
.pager a:hover { border-color: var(--gold-line); color: var(--gold-ink); }
.pager .cur { background: var(--primary-grad); color: #f4efe3; border-color: transparent; box-shadow: 0 6px 14px -8px rgba(22, 36, 61, .9); }

/* ---------------- 订单录入 ---------------- */
.item-table input, .item-table select {
    width: 100%; padding: 8px 9px; border: 1px solid #dedbd2; border-radius: 8px; font-size: 13px;
    background: #fff; font-family: inherit; color: var(--text); transition: all .14s var(--ease);
}
.item-table input:focus, .item-table select:focus { outline: none; border-color: var(--gold-bright); box-shadow: var(--ring); }
.item-table .num-in, .item-table .in-qty, .item-table .in-price, .item-table .in-ctn,
.item-table .in-nw, .item-table .in-gw, .item-table .in-vol { text-align: right; font-variant-numeric: tabular-nums; }
.row-no { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.cell-amt { font-weight: 600; color: var(--primary-dark); font-variant-numeric: tabular-nums; text-align: right; display: block; }
.btn-del-row {
    border: 1px solid #e8ccd2; background: #fff; color: var(--danger); border-radius: 8px;
    width: 30px; height: 30px; cursor: pointer; font-size: 15px; line-height: 1; transition: all .16s var(--ease);
}
.btn-del-row:hover { background: #f9eef0; }
.totals-box {
    margin: 14px 0 0 auto; width: 360px; max-width: 100%;
    background: linear-gradient(160deg, #fbfaf7, #f4f1e9); border: 1px solid var(--gold-line);
    border-radius: var(--radius); padding: 16px 20px; font-size: 13.4px;
}
.totals-box .row, .totals-box .sub, .totals-box .sub2 { display: flex; justify-content: space-between; padding: 5px 0; color: var(--text-2); }
.totals-box .sub2 { font-variant-numeric: tabular-nums; }
.totals-box .grand {
    border-top: 2px solid var(--gold); margin-top: 8px; padding-top: 11px; font-size: 16px;
    font-weight: 700; color: var(--primary-dark); font-variant-numeric: tabular-nums;
}
.rate-tip { font-size: 12.4px; color: var(--muted); margin-top: 15px; line-height: 1.7; }
.gen-box {
    background: linear-gradient(135deg, #faf7f0, #f4f0e4); border: 1px solid var(--gold-line);
    border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-xs);
}
.gen-types { display: flex; gap: 12px; margin: 14px 0 16px; flex-wrap: wrap; }
.gen-type {
    display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--gold-line);
    padding: 11px 16px; border-radius: 11px; cursor: pointer; font-weight: 500; color: var(--text-2);
    transition: all .16s var(--ease); box-shadow: var(--shadow-xs);
}
.gen-type:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(150, 115, 63, .6); }
.gen-type input { accent-color: var(--gold); width: 16px; height: 16px; }

/* ---------------- 单证文档（预览 / 打印，务必保持 A4 输出稳定） ---------------- */
.doc-page {
    background: #fff; width: 210mm; min-height: 297mm; margin: 0 auto 24px; padding: 14mm;
    box-shadow: 0 4px 24px rgba(23, 28, 45, .14); font-family: "Times New Roman", "SimSun", serif;
    color: #111; font-size: 12px; position: relative;
}
.doc-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 12px; border-bottom: 3px solid var(--doc-accent, #1e3a8a); }
.doc-header .co-name { font-size: 20px; font-weight: bold; letter-spacing: .5px; color: var(--doc-accent, #1e3a8a); }
.doc-header .co-info { font-size: 10.5px; color: #444; margin-top: 6px; line-height: 1.7; }
.doc-header .doc-title { text-align: right; }
.doc-header .doc-title h2 { font-size: 19px; letter-spacing: 2px; color: var(--doc-accent, #1e3a8a); }
.doc-header .doc-title .no { font-size: 12px; margin-top: 6px; }
.doc-parties { display: flex; gap: 24px; margin: 14px 0; }
.doc-parties .party { flex: 1; }
.doc-parties .party .ph { font-size: 10.5px; font-weight: bold; background: #eef2f7; padding: 4px 8px; border-left: 3px solid var(--doc-accent, #1e3a8a); margin-bottom: 6px; }
.doc-parties .party .pb { line-height: 1.75; font-size: 11px; }
.doc-meta { display: flex; gap: 24px; margin-bottom: 12px; }
.doc-meta .mi { flex: 1; }
.doc-meta .mi b { font-size: 10px; color: #666; display: block; text-transform: uppercase; }
.doc-meta .mi span { font-size: 11.5px; }
table.doc-tbl { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.doc-tbl th { background: var(--doc-accent, #1e3a8a); color: #fff; padding: 7px 8px; font-size: 10.5px; border: 1px solid var(--doc-accent, #1e3a8a); text-transform: uppercase; }
table.doc-tbl td { border: 1px solid #b6c2d4; padding: 6px 8px; font-size: 11px; }
table.doc-tbl tr:nth-child(even) td { background: #f7f9fc; }
.doc-tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.doc-tbl .c { text-align: center; }
.doc-total { display: flex; justify-content: space-between; margin-top: 10px; align-items: center; flex-wrap: wrap; gap: 8px; }
.doc-words { flex: 1; font-size: 11px; font-weight: bold; }
.doc-grand { font-size: 15px; font-weight: bold; color: var(--doc-accent, #1e3a8a); }
.doc-block { margin-top: 14px; font-size: 11px; line-height: 1.8; }
.doc-block .bh { font-weight: bold; font-size: 10.5px; margin-bottom: 3px; }
.doc-sign { display: flex; justify-content: space-between; margin-top: 46px; }
.doc-sign .sig { width: 44%; }
.doc-sign .sig .line { border-bottom: 1px solid #333; height: 34px; }
.doc-sign .sig .tip { font-size: 9.5px; color: #666; margin-top: 4px; }
.doc-footer-note { margin-top: 26px; text-align: center; font-size: 9.5px; color: #777; }
.print-actions { max-width: 210mm; margin: 18px auto; display: flex; gap: 10px; }
@media print {
    body { background: #fff; }
    .print-actions, .flash, .no-print { display: none !important; }
    .doc-page { box-shadow: none; width: 100%; margin: 0; padding: 0; }
    @page { size: A4; margin: 12mm; }
}

/* ---------------- 营销落地页 ---------------- */
.page-landing { background: #fff; }
.land-nav {
    position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center;
    padding: 14px 6vw; background: rgba(10, 17, 34, .55); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(214, 188, 140, .18);
}
.land-nav .ln-brand { color: #f3ecdb; font-size: 18.5px; font-weight: 700; display: flex; gap: 10px; align-items: center; letter-spacing: .4px; font-family: var(--font-display); }
.land-nav .ln-brand .side-logo { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; }
.land-nav .ln-links { display: flex; align-items: center; }
.land-nav .ln-links a { color: rgba(243, 236, 219, .8); margin-left: 26px; font-size: 14px; }
.land-nav .ln-links a:hover { color: #fff; }
.hero {
    background:
        radial-gradient(900px 420px at 82% -10%, rgba(46, 75, 126, .5), transparent 60%),
        linear-gradient(155deg, #0c1428 0%, #101c38 48%, #1a2c50 100%);
    color: #eef0f6; padding: 150px 6vw 118px; text-align: center; position: relative; overflow: hidden;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(640px 280px at 14% 6%, rgba(214, 188, 140, .16), transparent 68%);
}
.hero::after {
    content: ""; position: absolute; inset: 0; opacity: .45;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 38%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 38%, #000, transparent 72%);
}
.hero > * { position: relative; z-index: 1; }
.hero .hero-tag {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 999px; margin-bottom: 26px;
    background: rgba(214, 188, 140, .1); border: 1px solid rgba(214, 188, 140, .38); color: #e3d3b0;
    font-size: 13px; font-weight: 500; letter-spacing: .6px;
}
.hero h1 { font-size: 48px; line-height: 1.3; font-weight: 700; letter-spacing: 1px; font-family: var(--font-display); }
.hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #e7d3a8, #c8a464);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero .sub { font-size: 17px; opacity: .82; margin: 22px auto 0; max-width: 680px; line-height: 2; color: #c3cadb; }
.hero .cta { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .trust { margin-top: 36px; font-size: 13px; color: #9aa5bd; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.hero .trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero .trust .ico-sm { color: var(--gold-bright); }
.land-section { padding: 84px 6vw; max-width: 1180px; margin: 0 auto; }
.land-section h2 { text-align: center; font-size: 32px; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; font-family: var(--font-display); }
.land-section .sub2 { text-align: center; color: var(--muted); margin-bottom: 48px; font-size: 15px; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 20px; }
.feat {
    background: #fff; border-radius: var(--radius); padding: 26px; border: 1px solid var(--line);
    box-shadow: var(--shadow); transition: all .22s var(--ease);
}
.feat:hover { transform: translateY(-4px); border-color: var(--gold-line); box-shadow: 0 18px 42px -18px rgba(150, 115, 63, .4); }
.feat .fi {
    width: 46px; height: 46px; border-radius: 13px; background: var(--gold-soft); color: var(--gold);
    border: 1px solid var(--gold-line); display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
}
.feat h3 { font-size: 16.5px; margin-bottom: 8px; letter-spacing: .2px; }
.feat p { color: var(--muted); line-height: 1.8; font-size: 13.5px; }
.pain-gain {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line);
}
.pg-col { padding: 38px 36px; }
.pg-col.pain { background: linear-gradient(160deg, #faf6f6, #f8f1f2); }
.pg-col.gain { background: linear-gradient(160deg, #f5f8f6, #eef4f0); }
.pg-col.pain h3 { color: #8f4450; }
.pg-col.gain h3 { color: #2f5d50; }
.pg-col h3 { margin-bottom: 16px; font-size: 18.5px; display: flex; align-items: center; gap: 9px; }
.pg-col li { margin: 11px 0 11px 20px; font-size: 14px; line-height: 1.75; color: var(--text-2); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 22px; align-items: stretch; }
.price-card {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 32px 28px;
    border: 1.5px solid var(--line); display: flex; flex-direction: column; position: relative;
    transition: all .22s var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card.hot { border-color: var(--gold); transform: scale(1.035); box-shadow: 0 22px 52px -22px rgba(150, 115, 63, .55); }
.price-card.hot:hover { transform: scale(1.035) translateY(-4px); }
.price-card .pc-tag {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--gold-grad); color: #fff; font-size: 12px; padding: 5px 17px; border-radius: 999px;
    font-weight: 600; letter-spacing: .4px; box-shadow: 0 8px 18px -8px rgba(150, 115, 63, .9); white-space: nowrap;
}
.price-card h3 { font-size: 18px; margin-bottom: 5px; font-family: var(--font-display); letter-spacing: .5px; }
.price-card .pc-for { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.price-card .pc-price { font-size: 42px; font-weight: 700; color: var(--primary-dark); letter-spacing: -1.5px; line-height: 1.1; }
.price-card .pc-price small { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.price-card ul { list-style: none; margin: 20px 0 26px; flex: 1; }
.price-card li { padding: 7px 0; font-size: 13.6px; color: var(--text-2); border-bottom: 1px dashed var(--line-2); }
.price-card li::before { content: "✓"; color: var(--gold); font-weight: 700; margin-right: 9px; }
.land-cta-band {
    background:
        radial-gradient(700px 280px at 50% 0%, rgba(214, 188, 140, .14), transparent 70%),
        linear-gradient(155deg, #0c1428, #101c38 60%, #1a2c50);
    color: #eef0f6; text-align: center; padding: 76px 6vw; position: relative; overflow: hidden;
}
.land-cta-band > * { position: relative; }
.land-cta-band h2 { font-size: 29px; margin-bottom: 12px; letter-spacing: 1px; font-family: var(--font-display); }
.land-cta-band p { opacity: .78; margin-bottom: 30px; font-size: 15px; color: #c3cadb; }
.land-footer { padding: 34px 6vw 40px; text-align: center; color: var(--muted); font-size: 13px; background: #fff; border-top: 1px solid var(--line); line-height: 2; }

/* ---------------- 登录 / 注册 ---------------- */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(700px 320px at 82% 8%, rgba(46, 75, 126, .5), transparent 62%),
        radial-gradient(620px 300px at 10% 88%, rgba(214, 188, 140, .1), transparent 65%),
        linear-gradient(150deg, #0c1428, #101c38 50%, #16263f);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px 16px; position: relative; overflow: hidden;
}
.auth-wrap { display: flex; gap: 56px; align-items: center; max-width: 960px; width: 100%; position: relative; }
.auth-brand { flex: 1; color: #eef0f6; }
.auth-logo {
    width: 56px; height: 56px; border-radius: 17px; background: var(--gold-grad); color: #16213c;
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
    box-shadow: 0 14px 28px -12px rgba(176, 141, 87, .8);
}
.auth-logo .ico { width: 28px; height: 28px; }
.auth-brand h1 { font-size: 32px; letter-spacing: 1px; font-family: var(--font-display); }
.auth-brand h1 span { font-size: 15px; font-weight: 400; opacity: .6; margin-left: 8px; letter-spacing: .5px; }
.auth-brand > p { opacity: .72; margin: 14px 0 24px; line-height: 1.85; font-size: 14.5px; color: #c3cadb; }
.auth-points { list-style: none; }
.auth-points li { padding: 8px 0; opacity: .9; font-size: 14px; color: #c3cadb; }
.auth-points li::before { content: "✓"; margin-right: 10px; font-weight: 700; color: var(--gold-bright); }
.auth-card {
    width: 408px; background: #fff; border-radius: var(--radius-lg); padding: 36px 36px 30px;
    box-shadow: 0 30px 70px -20px rgba(4, 8, 18, .65); border-top: 3px solid var(--gold); flex-shrink: 0;
}
.auth-card h2 { font-size: 22px; letter-spacing: .5px; margin-bottom: 5px; font-family: var(--font-display); }
.auth-card .ac-sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; }
.auth-card .field { margin-bottom: 15px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.auth-links { display: flex; justify-content: space-between; margin-top: 18px; font-size: 13px; }
.auth-copyright { color: rgba(214, 188, 140, .55); font-size: 12px; margin-top: 28px; position: relative; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
    .dash-grid, .ad-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .sidebar {
        position: fixed; inset: 0 auto 0 0; transform: translateX(-102%); transition: transform .26s var(--ease);
        box-shadow: 0 0 60px rgba(4, 8, 18, .55);
    }
    .sidebar.is-open { transform: none; }
    .side-scrim {
        display: block; position: fixed; inset: 0; background: rgba(8, 14, 28, .5);
        opacity: 0; visibility: hidden; transition: opacity .24s var(--ease); z-index: 29;
    }
    .side-scrim.is-open { opacity: 1; visibility: visible; }
    .sidebar-toggle { display: inline-flex; }
    .content { padding: 18px 16px 40px; }
    .topbar { padding: 0 16px; }
    .notice { padding: 10px 16px; }
    .uc-text { display: none; }
    .card { padding: 16px; border-radius: 12px; }
    .table-wrap { margin: 0 -16px -16px; padding: 0 16px 4px; }
    .pain-gain { grid-template-columns: 1fr; }
    .price-card.hot { transform: none; }
    .price-card.hot:hover { transform: translateY(-4px); }
    .hero { padding: 120px 6vw 84px; }
    .hero h1 { font-size: 33px; }
    .hero .sub { font-size: 15.5px; }
    .land-section { padding: 56px 6vw; }
    .land-section h2 { font-size: 25px; }
    .land-nav .ln-links a { margin-left: 16px; font-size: 13px; }
    .dash-grid, .ad-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .auth-brand { display: none; }
    .auth-card { width: 100%; padding: 28px 24px 24px; }
    .auth-wrap { gap: 0; }
}