/* ============================================================
           Header · 纸感毛玻璃 + 朱砂胶囊 VIP + 迷你用户卡
           专业印章制作网站 · 东方传统美学
           ============================================================ */

        /* Header 本体 */
        .seal-header {
            height: 72px !important;
            border-bottom: 1px solid rgba(27, 23, 18, .06);
            transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
        }
        /* 毛玻璃放在伪元素上：header 自身设置 backdrop-filter 会形成包含块，
           使内部 position: fixed 的登录弹窗相对 header 定位而被顶部裁切 */
        .seal-header::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .seal-header.scrolled {
            background-color: rgba(244, 239, 228, .94) !important;
            box-shadow: 0 1px 0 rgba(27, 23, 18, .08), 0 16px 34px -26px rgba(27, 23, 18, .45);
            border-bottom-color: rgba(176, 141, 79, .25);
        }
        .seal-header.scrolled::before {
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        .seal-header__brand { gap: 14px; }
        .seal-header__chop {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: linear-gradient(160deg, rgba(158, 43, 33, .10) 0%, rgba(176, 141, 79, .06) 100%);
            border: 1px solid rgba(158, 43, 33, .22);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
            transition: transform .2s ease;
        }
        .seal-header__chop:hover { transform: rotate(-6deg) scale(1.06); }

        .seal-header__nav {
            gap: 2px;
            margin: 0 32px;
        }
        .seal-header__link {
            position: relative;
            display: inline-flex;
            align-items: center;
            padding: 8px 14px;
            font-size: 14px;
            font-weight: 500;
            color: #3b342b;
            letter-spacing: .02em;
            border-radius: 8px;
            transition: color .2s ease, background-color .2s ease;
        }
        .seal-header__link:hover { color: var(--seal-cinnabar); background-color: rgba(158, 43, 33, .05); }
        .seal-header__link--cinnabar {
            color: var(--seal-cinnabar);
            background-color: rgba(158, 43, 33, .06);
        }
        .seal-header__link--cinnabar:hover {
            background-color: rgba(158, 43, 33, .10);
            color: var(--seal-cinnabar);
        }
        .seal-header__link--active::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 2px;
            width: 18px;
            height: 2px;
            border-radius: 2px;
            background-color: var(--seal-cinnabar);
            transform: translateX(-50%);
        }

        .seal-header__actions { gap: 14px; }

        /* VIP 朱砂胶囊按钮 */
        .seal-vip-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px 8px 14px;
            font-size: 13px;
            font-weight: 600;
            color: #fff8f2;
            letter-spacing: .03em;
            border-radius: 20px;
            background: linear-gradient(160deg, #b3352a 0%, #8d2118 100%);
            border: 1px solid #8d2118;
            box-shadow: 0 8px 18px -10px rgba(141, 33, 24, .85), inset 0 1px 0 rgba(255, 225, 200, .25);
            transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
        }
        .seal-vip-btn::before {
            content: "";
            position: absolute;
            top: 1px; left: 14px; right: 14px;
            height: 8px;
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(255, 245, 230, .35), rgba(255, 245, 230, 0));
            pointer-events: none;
        }
        .seal-vip-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(141, 33, 24, .95); filter: brightness(1.03); }
        .seal-vip-btn:active { transform: translateY(0); }
        .seal-vip-btn__arrow { transition: transform .2s ease; }
        .seal-vip-btn:hover .seal-vip-btn__arrow { transform: translateX(2px); }

        /* 登录按钮 */
        .seal-login-btn {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 500;
            color: var(--seal-cinnabar);
            letter-spacing: .02em;
            border: 1.5px solid rgba(158, 43, 33, .55);
            border-radius: 20px;
            background-color: rgba(255, 255, 255, .55);
            cursor: pointer;
            transition: all .2s ease;
        }
        .seal-login-btn:hover {
            color: #fff8f2;
            background-color: var(--seal-cinnabar);
            border-color: var(--seal-cinnabar);
            box-shadow: 0 8px 18px -10px rgba(141, 33, 24, .85);
        }

        /* 用户下拉 */
        .seal-user { position: relative; }
        .seal-user__trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 5px 12px 5px 5px;
            border-radius: 24px;
            background-color: rgba(255, 255, 255, .6);
            border: 1px solid rgba(27, 23, 18, .08);
            cursor: pointer;
            transition: all .2s ease;
        }
        .seal-user__trigger:hover {
            background-color: rgba(255, 255, 255, .85);
            border-color: rgba(176, 141, 79, .4);
            box-shadow: 0 6px 14px -8px rgba(27, 23, 18, .25);
        }
        .seal-user__avatar {
            width: 32px; height: 32px;
            border-radius: 50%;
            object-fit: cover;
            border: 1.5px solid rgba(255, 255, 255, .9);
            box-shadow: 0 0 0 1px rgba(27, 23, 18, .08);
        }
        .seal-user__badge {
            font-size: 10px;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 8px;
            line-height: 1.4;
            letter-spacing: .05em;
            background: linear-gradient(160deg, #c9a45f 0%, #8a6a2e 100%);
            color: #fffdf0;
        }
        .seal-user__badge--forever,
        .seal-user__badge--svip { background: linear-gradient(160deg, #b3352a 0%, #7a1a12 100%); }
        .seal-user__badge--year   { background: linear-gradient(160deg, #c9a45f 0%, #8a6a2e 100%); }
        .seal-user__badge--month  { background: linear-gradient(160deg, #4a7a9b 0%, #2f4f66 100%); }
        .seal-user__badge--none   { background: linear-gradient(160deg, #8c8375 0%, #5a5347 100%); }
        .seal-user__name { font-size: 13px; font-weight: 500; color: var(--seal-ink); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .seal-user__caret { font-size: 11px; color: #8c8375; transition: transform .2s ease; }
        .seal-user__caret.is-open { transform: rotate(180deg); color: var(--seal-cinnabar); }

        /* 用户下拉卡片 */
        .seal-user__card {
            position: absolute;
            top: calc(100% + 12px);
            right: 0;
            width: 320px;
            padding: 0;
            background: var(--seal-card);
            border: 1px solid rgba(27, 23, 18, .08);
            border-radius: 14px;
            box-shadow: 0 20px 50px -22px rgba(27, 23, 18, .45), 0 2px 0 rgba(255, 255, 255, .9) inset;
            overflow: hidden;
            z-index: 200;
        }
        .seal-user__card::before {
            content: "";
            position: absolute;
            top: -7px;
            right: 16px;
            width: 12px; height: 12px;
            background: var(--seal-card);
            border-top: 1px solid rgba(27, 23, 18, .08);
            border-left: 1px solid rgba(27, 23, 18, .08);
            transform: rotate(45deg);
        }
        .seal-user__card-head {
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 18px 20px 14px;
            background: linear-gradient(180deg, #fffefb 0%, #fbf4e5 100%);
            border-bottom: 1px solid rgba(27, 23, 18, .06);
        }
        .seal-user__card-avatar-wrap { position: relative; }
        .seal-user__card-avatar {
            width: 50px; height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 0 0 2px rgba(158, 43, 33, .2);
        }
        .seal-user__card-badge {
            position: absolute;
            left: 50%;
            bottom: -6px;
            transform: translateX(-50%);
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 8px;
            background: linear-gradient(160deg, #c9a45f 0%, #8a6a2e 100%);
            color: #fffdf0;
            white-space: nowrap;
            box-shadow: 0 2px 6px -2px rgba(27, 23, 18, .3);
        }
        .seal-user__card-meta { flex: 1; min-width: 0; padding-top: 4px; }
        .seal-user__card-nick { font-size: 15px; font-weight: 700; color: var(--seal-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .seal-user__card-id { font-size: 12px; color: #8c8375; margin-top: 2px; letter-spacing: .02em; }

        .seal-user__card-stats {
            display: flex;
            align-items: center;
            padding: 14px 18px;
            border-bottom: 1px solid rgba(27, 23, 18, .06);
        }
        .seal-user__stat { flex: 1; text-align: center; }
        .seal-user__stat-divider { width: 1px; height: 28px; background-color: rgba(27, 23, 18, .08); }
        .seal-user__stat-val { font-size: 17px; font-weight: 700; color: var(--seal-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
        .seal-user__stat-val--cinnabar { color: var(--seal-cinnabar); }
        .seal-user__stat-val--gold { color: #8a6a2e; font-size: 13px; }
        .seal-user__stat-total { font-size: 13px; font-weight: 400; color: #8c8375; }
        .seal-user__stat-lbl { font-size: 11px; color: #8c8375; margin-top: 3px; letter-spacing: .05em; }

        .seal-user__card-upgrade {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 14px 18px 10px;
            padding: 10px 14px;
            border-radius: 10px;
            background: linear-gradient(160deg, #b3352a 0%, #8d2118 100%);
            color: #fff8f2;
            font-size: 13px;
            font-weight: 600;
            box-shadow: 0 8px 18px -10px rgba(141, 33, 24, .85);
            transition: transform .18s ease, box-shadow .2s ease;
        }
        .seal-user__card-upgrade:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(141, 33, 24, .95); }
        .seal-user__card-upgrade .el-icon-arrow-right { margin-left: auto; font-size: 13px; }

        .seal-user__card-foot { padding: 6px 8px; border-top: 1px solid rgba(27, 23, 18, .04); }
        .seal-user__card-logout {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 0;
            font-size: 12.5px;
            color: #8c8375;
            border-radius: 8px;
            transition: all .2s ease;
        }
        .seal-user__card-logout:hover { color: var(--seal-cinnabar); background-color: rgba(158, 43, 33, .05); }

        /* 下拉过渡 */
        .seal-fade-enter-active, .seal-fade-leave-active { transition: opacity .2s ease, transform .2s ease; }
        .seal-fade-enter, .seal-fade-leave-to { opacity: 0; transform: translateY(-6px); }

        /* ============================================================
           登录弹窗 · 纸感 + 朱砂标题标签
           ============================================================ */
        .seal-login-mask {
            position: fixed; inset: 0;
            background: radial-gradient(ellipse at center, rgba(27, 23, 18, .72) 0%, rgba(27, 23, 18, .85) 100%);
            display: flex; align-items: center; justify-content: center;
            z-index: 9999;
            backdrop-filter: blur(3px);
        }
        .seal-login-modal {
            display: flex;
            width: min(92vw, 760px);
            min-height: 480px;
            max-height: 90vh;
            background: var(--seal-card);
            box-shadow: 0 30px 70px -30px rgba(27, 23, 18, .7);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, .6);
        }
        .seal-login-modal__aside {
            position: relative;
            flex: 0 0 40%;
            min-width: 260px;
            overflow: hidden;
        }
        .seal-login-modal__aside-overlay {
            position: absolute; inset: 0;
            display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
            padding: 24px 20px;
            background: linear-gradient(180deg, rgba(27, 23, 18, 0) 40%, rgba(27, 23, 18, .75) 100%);
            text-align: center;
            color: #fff;
        }
        .seal-login-modal__aside-overlay svg { margin-bottom: 12px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
        .seal-login-modal__aside-title { font-size: 16px; font-weight: 600; letter-spacing: .1em; margin-bottom: 4px; font-family: var(--seal-serif); }
        .seal-login-modal__aside-sub { font-size: 12px; color: rgba(255, 255, 255, .75); letter-spacing: .04em; }

        .seal-login-modal__main {
            flex: 1;
            padding: 36px 36px 28px;
            background: var(--seal-card);
        }
        .seal-login-modal__title {
            font-family: var(--seal-serif);
            font-size: 22px;
            font-weight: 700;
            color: var(--seal-ink);
            display: flex; align-items: center; gap: 8px;
            margin: 0 0 6px; letter-spacing: .04em;
        }
        .seal-login-modal__title-tag {
            font-size: 12px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 10px;
            background: rgba(158, 43, 33, .08);
            color: var(--seal-cinnabar);
            letter-spacing: .08em;
        }
        .seal-login-modal__desc { font-size: 13px; color: #8c8375; margin: 0 0 18px; letter-spacing: .03em; }
        .seal-login-modal__qr {
            width: 180px; height: 180px;
            border: 1px solid rgba(27, 23, 18, .1);
            padding: 8px;
            background: #fff;
            display: flex; align-items: center; justify-content: center;
            box-shadow: inset 0 0 0 1px rgba(176, 141, 79, .2);
        }
        .seal-login-modal__qr img { width: 100%; height: 100%; object-fit: contain; }
        .seal-login-modal__refresh {
            font-size: 12px; color: #8c8375; margin-top: 8px; cursor: pointer; letter-spacing: .05em;
        }
        .seal-login-modal__refresh:hover { color: var(--seal-cinnabar); }
        .seal-login-modal__phone { width: 88%; margin-top: 6px; }
        .seal-login-modal__divider {
            display: flex; align-items: center; gap: 12px;
            width: 100%; margin: 22px 0 14px;
        }
        .seal-login-modal__divider div { flex: 1; height: 1px; background-color: rgba(27, 23, 18, .1); }
        .seal-login-modal__divider span { font-size: 12px; color: #8c8375; letter-spacing: .06em; white-space: nowrap; }
        .seal-login-modal__switch { display: flex; gap: 32px; font-size: 14px; color: #8c8375; }
        .seal-login-modal__switch-item { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 2px solid transparent; transition: all .2s ease; }
        .seal-login-modal__switch-item.is-active { color: var(--seal-cinnabar); border-bottom-color: var(--seal-cinnabar); }

        .seal-login-modal__close {
            position: absolute; top: 14px; right: 16px;
            font-size: 18px; color: #8c8375; cursor: pointer;
            width: 28px; height: 28px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            transition: all .2s ease;
        }
        .seal-login-modal__close:hover { background-color: rgba(158, 43, 33, .08); color: var(--seal-cinnabar); }

        /* ============================================================
           Footer · 墨色 + 金色分隔 + 朱砂小印
           ============================================================ */
        .seal-footer {
            margin-top: 60px;
            background-color: #14110b;
            color: #b4ab99;
            font-size: 13px;
            border-top: 1px solid rgba(176, 141, 79, .18);
        }
        .seal-footer__inner {
            max-width: 1240px; margin: 0 auto; padding: 36px 48px 28px;
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr;
            gap: 36px;
        }
        .seal-footer__brand p { margin-top: 10px; font-size: 13px; line-height: 1.8; color: #8c8375; }
        .seal-footer__chop {
            display: inline-flex; align-items: center; justify-content: center;
            width: 48px; height: 48px; border-radius: 10px;
            background: linear-gradient(160deg, rgba(158, 43, 33, .9) 0%, #6f170f 100%);
            box-shadow: 0 8px 18px -6px rgba(141, 33, 24, .6);
        }
        .seal-footer__col h4 {
            font-size: 14px;
            font-weight: 600;
            color: #fffdf0;
            letter-spacing: .08em;
            margin-bottom: 16px;
            padding-bottom: 10px;
            position: relative;
        }
        .seal-footer__col h4::after {
            content: "";
            position: absolute;
            bottom: 0; left: 0;
            width: 24px; height: 1.5px;
            background: linear-gradient(90deg, #c9a45f 0%, transparent 100%);
            border-radius: 2px;
        }
        .seal-footer__col a {
            display: block;
            font-size: 13px;
            color: #b4ab99;
            line-height: 2;
            letter-spacing: .02em;
            transition: color .2s ease, padding-left .2s ease;
        }
        .seal-footer__col a:hover { color: #e7d08a; padding-left: 4px; }

        .seal-footer__links {
            border-top: 1px solid rgba(176, 141, 79, .12);
            padding: 14px 48px;
            max-width: 1240px;
            margin: 0 auto;
            display: flex; flex-wrap: wrap; gap: 6px 22px;
            align-items: center;
            font-size: 12.5px;
            color: #7a7262;
        }
        .seal-footer__links-label { color: #c9a45f; font-weight: 600; letter-spacing: .06em; margin-right: 6px; }
        .seal-footer__links a { color: #8c8375; transition: color .2s ease; }
        .seal-footer__links a:hover { color: #e7d08a; }

        .seal-footer__bottom {
            background-color: #0e0b07;
            border-top: 1px solid rgba(176, 141, 79, .10);
            padding: 14px 48px;
            text-align: center;
            font-size: 12px;
            color: #6b6357;
            letter-spacing: .04em;
            line-height: 1.9;
        }
        .seal-footer__bottom a { color: #8c8375; transition: color .2s ease; }
        .seal-footer__bottom a:hover { color: #c9a45f; }
        .seal-footer__icp { display: inline-flex; align-items: center; gap: 6px; }
        .seal-footer__icp img { width: 14px; height: 14px; }
        .seal-footer__pipe { color: rgba(176, 141, 79, .3); margin: 0 10px; }

        @media (max-width: 1100px) {
            .seal-header__nav { display: none; }
            .seal-footer__inner { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 720px) {
            .seal-footer__inner { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; }
            .seal-footer__links, .seal-footer__bottom { padding-left: 20px; padding-right: 20px; }
        }