/* ============================================================
 * graduation-luggage-ship-calc.css
 * 毕业行李寄运比价计算器 —— 独立视觉：驿站称重台
 * 冷灰蓝机身 + 警示黄指针 + 邮政绿签收 + 运单撕口
 * ============================================================ */

.gls {
    --gls-navy: #1f3348;
    --gls-navy-2: #2d4864;
    --gls-steel: #5d7488;
    --gls-yellow: #efad1c;
    --gls-yellow-soft: #fff5dc;
    --gls-green: #1d7a5b;
    --gls-green-soft: #e6f4ee;
    --gls-red: #bf3b2c;
    --gls-red-soft: #fdeeeb;
    --gls-text: #2b3d4f;
    --gls-text-soft: #60768a;
    --gls-line: #d9e2ea;
    --gls-line-soft: #eaf0f5;
    --gls-bg: #edf1f5;
    --gls-card: #ffffff;
    --gls-shadow: 0 12px 30px rgba(26, 47, 70, .10);
    --gls-shadow-sm: 0 4px 14px rgba(26, 47, 70, .07);
    --gls-mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Courier New", monospace;
    --gls-serif: "Songti SC", "STSong", Georgia, serif;
}

:root[data-theme="dark"] .gls {
    --gls-navy: #0d1620;
    --gls-navy-2: #16273a;
    --gls-steel: #8aa2b6;
    --gls-yellow: #f5bd3d;
    --gls-yellow-soft: #33280f;
    --gls-green: #46c295;
    --gls-green-soft: #12312a;
    --gls-red: #f08a7c;
    --gls-red-soft: #33191a;
    --gls-text: #dde7f0;
    --gls-text-soft: #93a8bb;
    --gls-line: #27384a;
    --gls-line-soft: #1c2a38;
    --gls-bg: #0c1219;
    --gls-card: #141e29;
    --gls-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    --gls-shadow-sm: 0 4px 14px rgba(0, 0, 0, .32);
}

/* ---------- Hero：称重台 ---------- */
.gls-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 130% at 88% -10%, rgba(239, 173, 28, .20) 0%, rgba(239, 173, 28, 0) 55%),
        linear-gradient(135deg, var(--gls-navy) 0%, var(--gls-navy-2) 62%, #3d5b78 100%);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    padding: 26px 28px 22px;
    box-shadow: var(--gls-shadow);
    color: #eaf1f7;
}

.gls-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: repeating-linear-gradient(45deg, rgba(239, 173, 28, .12) 0 10px, rgba(239, 173, 28, 0) 10px 20px);
    pointer-events: none;
}

.gls-hero > * { position: relative; z-index: 1; }

.gls-hero .neo-hero-head { display: flex; gap: 16px; align-items: flex-start; }
@media (min-width: 1081px) {
    .gls-hero .neo-hero-head { padding-right: 196px; }
}
.gls-hero .neo-hero-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 27px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
}
.gls-hero h1 {
    font-family: var(--gls-serif);
    font-style: normal;
    font-size: 27px;
    line-height: 1.32;
    margin: 2px 0 10px;
    letter-spacing: .5px;
    color: #ffffff;
}
.gls-hero p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.95;
    color: #d3e0ea;
    max-width: 940px;
}
.gls-hero p b { color: var(--gls-yellow); font-weight: 700; }

.gls-scale {
    position: absolute;
    right: 18px;
    top: 12px;
    width: 168px;
    height: 168px;
    opacity: .92;
    pointer-events: none;
}

.gls-hero-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.gls-hero-acts .neo-btn {
    background: var(--gls-yellow);
    color: #23313f;
    border-color: rgba(0, 0, 0, .06);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(239, 173, 28, .35);
}
.gls-hero-acts .neo-btn:hover { filter: brightness(1.06); }
.gls-hero-acts .neo-btn--ghost {
    background: rgba(255, 255, 255, .10);
    color: #eaf1f7;
    border-color: rgba(255, 255, 255, .28);
    box-shadow: none;
}

/* ---------- KPI：电子秤读数 ---------- */
.gls-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.gls-kpis > div {
    background: rgba(9, 17, 25, .40);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 12px;
    color: #b9cbd9;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gls-kpis b {
    font-family: var(--gls-mono);
    font-size: 21px;
    font-weight: 700;
    color: #7fe3bb;
    letter-spacing: .3px;
    white-space: nowrap;
}
:root[data-theme="dark"] .gls-kpis b { color: #6ee0b4; }

/* ---------- 布局 ---------- */
.gls-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}
.gls-col { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.gls-full { margin-top: 20px; }
.gls > .gls-errs, .gls > .gls-warns { margin-top: 18px; }
.gls > .gls-errs + .gls-warns, .gls > .gls-warns + .gls-full, .gls > .gls-errs + .gls-full { margin-top: 12px; }

.gls .neo-card {
    background: var(--gls-card);
    border: 1px solid var(--gls-line);
    border-radius: var(--gls-radius);
    box-shadow: var(--gls-shadow-sm);
    border-top: 3px solid var(--gls-navy-2);
}
.gls .neo-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gls-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gls .neo-card-title .neo-sub { font-size: 12px; color: var(--gls-text-soft); font-weight: 400; }

/* 主按钮统一为警示黄，与主题一致 */
.gls .neo-btn:not(.neo-btn--ghost) {
    background: var(--gls-yellow);
    color: #23313f;
    border-color: rgba(0, 0, 0, .06);
    font-weight: 700;
}
.gls .neo-btn:not(.neo-btn--ghost):hover { filter: brightness(1.06); color: #23313f; }

/* ---------- 提示条 ---------- */
.gls-errs, .gls-warns {
    display: none;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13.5px;
    line-height: 1.75;
    border-left: 4px solid;
}
.gls-errs.on { display: block; background: var(--gls-red-soft); border-color: var(--gls-red); color: var(--gls-red); }
.gls-warns.on { display: block; background: var(--gls-yellow-soft); border-color: var(--gls-yellow); color: #8a6208; }
:root[data-theme="dark"] .gls-warns.on { color: var(--gls-yellow); }

/* ---------- 表格：装箱单 ---------- */
.gls-list, .gls-detail-wrap { overflow-x: auto; }
.gls-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 13px;
}
.gls-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--gls-text-soft);
    padding: 8px 9px;
    background: var(--gls-line-soft);
    border-bottom: 1px solid var(--gls-line);
    white-space: nowrap;
}
.gls-table td {
    padding: 7px 9px;
    border-bottom: 1px dashed var(--gls-line);
    vertical-align: middle;
    color: var(--gls-text);
}
.gls-table tbody tr:hover { background: var(--gls-line-soft); }
.gls-muted { color: var(--gls-text-soft); font-family: var(--gls-mono); white-space: nowrap; }
.gls-strong { color: var(--gls-navy-2); font-family: var(--gls-mono); font-weight: 700; white-space: nowrap; }
.gls-sum td { background: var(--gls-line-soft); font-weight: 700; border-top: 2px solid var(--gls-line); }
.gls-empty {
    border: 1px dashed var(--gls-line);
    border-radius: 12px;
    padding: 26px 18px;
    text-align: center;
    color: var(--gls-text-soft);
    font-size: 13.5px;
    line-height: 1.9;
    background: var(--gls-line-soft);
}
.gls-in { min-width: 54px; }
.gls-num { width: 74px; font-family: var(--gls-mono); }
.gls-table input[type="number"] {
    padding: 8px 6px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.gls-table input[type="number"]::-webkit-outer-spin-button,
.gls-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.gls-dims { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.gls-dims > span { color: var(--gls-text-soft); font-size: 12px; }
.gls-dim { width: 56px; flex: 0 0 56px; min-width: 56px; margin-right: 0; }
.gls-del {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--gls-line);
    background: transparent;
    color: var(--gls-text-soft);
    cursor: pointer;
    line-height: 1;
}
.gls-del:hover { background: var(--gls-red-soft); color: var(--gls-red); border-color: var(--gls-red); }

/* ---------- 方案卡：运单标签 ---------- */
.gls-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gls-plan {
    position: relative;
    background: var(--gls-card);
    border: 1px solid var(--gls-line);
    border-radius: 14px;
    padding: 16px 16px 14px;
    box-shadow: var(--gls-shadow-sm);
    overflow: hidden;
}
.gls-plan::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--gls-steel);
}
.gls-plan.is-cheap { border-color: var(--gls-green); background: linear-gradient(180deg, var(--gls-green-soft) 0%, var(--gls-card) 46%); }
.gls-plan.is-cheap::before { background: var(--gls-green); }
.gls-plan.is-fast { border-color: var(--gls-yellow); }
.gls-plan.is-fast::before { background: var(--gls-yellow); }
.gls-plan-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gls-plan-h b { font-size: 15px; color: var(--gls-text); }
.gls-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .5px;
}
.gls-badge.cheap { background: var(--gls-green); color: #fff; }
.gls-badge.fast { background: var(--gls-yellow); color: #3a2c05; }
.gls-plan-v {
    font-family: var(--gls-mono);
    font-size: 27px;
    font-weight: 700;
    color: var(--gls-navy-2);
    margin: 8px 0 2px;
    line-height: 1.15;
}
:root[data-theme="dark"] .gls-plan-v { color: #eaf1f7; }
.gls-plan-v small { font-size: 13px; margin-left: 3px; color: var(--gls-text-soft); font-family: inherit; }
.gls-plan-m { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--gls-text-soft); margin-bottom: 6px; }
.gls-plan-n { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--gls-text-soft); }

/* ---------- 占比条 ---------- */
.gls-bar {
    display: inline-block;
    width: 96px;
    height: 7px;
    border-radius: 4px;
    background: var(--gls-line-soft);
    margin-right: 7px;
    vertical-align: middle;
    overflow: hidden;
}
.gls-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gls-navy-2), var(--gls-yellow)); border-radius: 4px; }

/* ---------- 计价规则行 ---------- */
.gls-params { display: flex; flex-direction: column; gap: 10px; }
.gls-line {
    border: 1px solid var(--gls-line);
    border-left: 3px solid var(--gls-navy-2);
    border-radius: 10px;
    padding: 10px 13px;
    background: var(--gls-line-soft);
}
.gls-line span { font-size: 13.5px; font-weight: 600; color: var(--gls-text); }
.gls-line b { float: right; font-family: var(--gls-mono); font-size: 15px; color: var(--gls-navy-2); }
:root[data-theme="dark"] .gls-line b { color: #7fe3bb; }
.gls-line small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.7; color: var(--gls-text-soft); }

/* ---------- 说明表 ---------- */
.gls-note-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gls-note-table th {
    width: 104px;
    text-align: left;
    vertical-align: top;
    padding: 11px 12px;
    color: var(--gls-navy-2);
    font-weight: 700;
    background: var(--gls-line-soft);
    border-bottom: 1px solid var(--gls-line);
    white-space: nowrap;
}
.gls-note-table td {
    padding: 11px 12px;
    line-height: 1.95;
    color: var(--gls-text-soft);
    border-bottom: 1px dashed var(--gls-line);
}
.gls-note-table td b { color: var(--gls-text); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
    .gls-layout { grid-template-columns: minmax(0, 1fr); }
    .gls-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gls-scale { display: none; }
}
@media (max-width: 720px) {
    .gls-hero { padding: 20px 16px 18px; border-radius: 16px; }
    .gls-hero h1 { font-size: 22px; }
    .gls-hero p { font-size: 13.5px; line-height: 1.9; }
    .gls-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .gls-kpis b { font-size: 18px; }
    .gls-plans { grid-template-columns: minmax(0, 1fr); }
    .gls-note-table th { width: auto; display: block; border-bottom: none; padding-bottom: 2px; }
    .gls-note-table td { display: block; padding-top: 2px; }
    .gls .neo-card { padding: 16px 14px; }
}
@media (max-width: 420px) {
    .gls-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 打印稿（与页面分离） ---------- */
.gls-print { display: none; }

@media print {
    body * { visibility: hidden !important; }
    .gls-print, .gls-print * { visibility: visible !important; }
    .gls-print {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
    }
    .gls-doc {
        font-family: "Songti SC", "STSong", Georgia, serif;
        color: #16222e;
        font-size: 13px;
    }
    .gls-doc h1 { font-size: 20px; margin: 0 0 6px; text-align: center; letter-spacing: 1px; }
    .gls-doc h2 { font-size: 15px; margin: 18px 0 6px; }
    .gls-doc-sub { text-align: center; font-size: 12px; color: #55697c; margin: 0 0 14px; }
    .gls-doc-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
    .gls-doc-table th, .gls-doc-table td {
        border: 1px solid #9fb0be;
        padding: 6px 8px;
        font-size: 12px;
        text-align: left;
    }
    .gls-doc-table th { background: #eef2f6; font-weight: 700; }
    .gls-doc-table tr { page-break-inside: avoid; }
    .gls-doc-table thead { display: table-header-group; }
}