/* =========================================================
   Kimai 可 · Design System
   主页样式统一版
   ---------------------------------------------------------
   规则：
   1. 主页 <style> 为最高视觉标准
   2. 删除旧的重复覆盖
   3. 保留动态页面 / 弹窗 / 搜索 / JB 模块
   4. iOS Light UI
   ========================================================= */


/* =========================================================
   01. Design Tokens
   ========================================================= */

:root {
    color-scheme: light !important;

    /* 页面 */
    --page: #ffffff;
    --page-bg-gradient:
        radial-gradient(
            circle at 50% 38%,
            rgba(185, 225, 255, 1) 0%,
            rgba(205, 235, 255, 0.85) 16%,
            rgba(225, 242, 255, 0.55) 32%,
            rgba(241, 248, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 75%
        );

    /* Surface */
    --surface: #ffffff;
    --soft: #f4f8fd;
    --card-bg-glass: rgba(255, 255, 255, 0.82);
    --card-border-glass: rgba(255, 255, 255, 0.9);

    /* Text */
    --ink: #20242d;
    --text-main: #1c1c1e;
    --muted: #727986;
    --text-sub: #8e8e93;

    /* Border */
    --line: #e6eaf0;

    /* Blue */
    --blue: #286df5;
    --blue-strong: #1262f0;
    --blue-soft: #e9f1ff;

    /* iOS blue */
    --ios-blue: #007aff;
    --ios-purple: #5856d6;

    /* Other */
    --green: #32a96d;
    --green-soft: #e9f8ef;
    --orange: #ef9741;
    --orange-soft: #fff1e4;

    /* Dock */
    --dock-active-bg: rgba(0, 122, 255, 0.12);

    /* Shadow */
    --shadow: 0 12px 34px rgba(44, 83, 132, .13);
    --shadow-soft: 0 8px 24px rgba(44, 83, 132, .09);

    /* Animation */
    --ease: cubic-bezier(.23, 1, .32, 1);
}


/* =========================================================
   02. Base
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100svh;

    margin: 0;

    padding-bottom:
        calc(90px + env(safe-area-inset-bottom));

    background:
        var(--page-bg-gradient);

    background-color: #ffffff;
    background-attachment: fixed;

    color: var(--text-main);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(40, 109, 245, .38);
    outline-offset: 3px;
}

.tab-content {
    display: none;
    width: 100%;
}

.tab-content.active {
    display: block;
}


/* =========================================================
   03. iOS Only
   ========================================================= */

.ios-only-notice {
    display: none;
}

html.non-apple-mobile body > :not(.ios-only-notice) {
    display: none !important;
}

html.non-apple-mobile .ios-only-notice {
    display: grid;
    min-height: 100svh;
    place-items: center;
    padding: 28px;
    color: #20242d;
    text-align: center;
}

.ios-only-notice div {
    max-width: 290px;
    padding: 32px 25px;

    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 28px;

    background: rgba(255, 255, 255, .78);

    box-shadow:
        0 20px 48px rgba(51, 100, 158, .12);
}

.ios-only-notice p {
    margin: 0 0 13px;

    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}

.ios-only-notice h1 {
    margin: 0;

    font-size: 24px;
    letter-spacing: -.05em;
}

.ios-only-notice span {
    display: block;
    margin-top: 12px;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   04. Home Header
   ========================================================= */

#tab-home {
    overflow: clip;
}

.site-header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 100;

    display: flex;

    width: 100% !important;
    min-height: 68px;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin: 0;

    padding:
        calc(8px + env(safe-area-inset-top))
        16px
        8px
        16px;

    background: #ffffff !important;
    background-color: #ffffff !important;

    border-bottom:
        .5px solid rgba(0, 0, 0, .08);

    box-shadow:
        0 2px 10px rgba(0, 0, 0, .03);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transition:
        transform .3s cubic-bezier(.25, .1, .25, 1),
        opacity .3s ease;
}

.site-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}


/* Brand */

.brand-lockup {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--ink);
    text-decoration: none;
}

.brand-mark {
    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

    border-radius: 11px;

    background: #ec2c3d;
    color: #fff;

    font-size: 16px;
    font-weight: 850;

    letter-spacing: -.08em;
}

.brand-name {
    display: block;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: -.055em;
}

.brand-caption {
    display: block;

    margin-top: 1px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 650;

    letter-spacing: .08em;
}


/* 联系客服 */

.header-contact,
.header-contact-link {
    display: inline-flex;

    min-height: 37px;

    align-items: center;

    gap: 6px;

    padding: 6px 14px 6px 8px;

    border: 0;
    border-radius: 999px;

    background: rgba(0, 122, 255, .08);

    color: #007aff;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .15s ease,
        background-color .15s ease;
}

.header-contact:active,
.header-contact-link:active {
    transform: scale(.95);
    background: rgba(0, 122, 255, .15);
}

.header-contact-icon {
    display: grid;

    width: 23px;
    height: 23px;

    place-items: center;

    border-radius: 50%;

    background: var(--blue-soft);
    color: var(--blue);
}

.header-contact-icon svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;

    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}


/* =========================================================
   05. Home Main
   ========================================================= */

.home-main {
    width: min(calc(100% - 32px), 600px);
    margin: 0 auto;
}


/* Hero */

.home-hero {
    position: relative;

    top: 40px;

    width: 100%;

    display: flex;

    flex-direction: column;
    align-items: center;

    padding:
        55px
        0
        52px;

    text-align: center;
}

.hero-eyebrow,
.section-eyebrow,
.contact-kicker {
    margin: 0 0 13px;

    color: #4c6079;

    font-size: 10px;
    font-weight: 750;

    letter-spacing: .08em;
}

.home-hero h1 {
    max-width: 760px;

    margin: 0;

    font-size: clamp(39px, 10vw, 57px);
    font-weight: 800;

    letter-spacing: -.075em;
    line-height: 1.18;
}

.home-hero h1::after {
    display: block;

    width: 100%;
    height: 8px;

    margin-top: 8px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #5aa7ff,
            #58e7b1
        );

    content: "";
}

.home-hero > p {
    max-width: 370px;

    margin: 21px 0 0;

    color: #526278;

    font-size: 13px;
    line-height: 1.8;
}

.hero-topic-row {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 22px;

    justify-content: center;
}

.hero-topic-row span {
    padding: 8px 11px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .72);

    color: #42516a;

    font-size: 10px;
    font-weight: 650;
}


/* Hero Showcase */

.hero-showcase {
    width: 100%;

    overflow: hidden;

    border-radius: 16px;
}

.hero-showcase img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    border-radius: 16px;
}


/* =========================================================
   06. Platform / Home Menu
   ========================================================= */

.platform-section {
    background-color: #FFFFFF !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0.5px solid var(--card-border-glass) !important;
    border-radius: 24px !important;
    padding: 20px 16px 16px 16px !important;
    margin-top: calc(56px + env(safe-area-inset-top));
    margin-bottom: 20px !important;
    /*box-shadow: 0 10px 30px rgba(0, 122, 255, 0.05);*/
    
    box-shadow: none !important;
    
}

.platform-frame {
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

.section-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;
}

.section-eyebrow {
    margin-bottom: 7px;

    color: var(--blue);

    font-size: 10px;
}

.section-heading h2 {
    margin: 0;

    font-size: 24px;
    font-weight: 800;

    letter-spacing: -.055em;
}

.section-heading > p {
    max-width: 140px;

    margin: 0;

    color: #5c6c82;

    font-size: 10px;
    line-height: 1.65;

    text-align: right;
}


/* 3 columns */

.menu-grid,
.menu-grid-2col {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 16px 10px !important;
}


/* Menu */

.menu-btn {
    display: flex !important;

    min-height: 93px;

    height: auto !important;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 10px 4px !important;

    border: none !important;
    border-radius: 17px;

    background: transparent !important;

    color: var(--ink);

    text-align: center;
    text-decoration: none;

    box-shadow: none !important;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.menu-btn:active {
    transform: scale(.9) !important;
    opacity: .7 !important;
}



.btn-icon { display: block; width: 58px; height: 58px; padding: 8px; border-radius: 18px; background: #f3f7fd; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06));}

.menu-btn > span,
.menu-btn span {
    display: block;

    max-width: 100%;

    overflow: hidden;

    color: #1c1c1e !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    letter-spacing: -.2px;

    line-height: 1.4;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Integrated footer */

.card-integrated-footer {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    margin-top: 18px;

    padding-top: 14px;

    border-top:
        .5px solid rgba(60, 60, 67, .08);
}

.footer-brand-text {
    color: var(--text-sub);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .2px;
}


/* Glow Divider */

.card-glow-divider {
    position: relative;

    width: 60%;
    height: 1px;

    margin: 22px auto;

    border: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 122, 255, .15) 30%,
            rgba(0, 122, 255, .3) 50%,
            rgba(0, 122, 255, .15) 70%,
            transparent 100%
        );
}

.card-glow-divider::after {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 122, 255, .2) 20%,
            rgba(0, 122, 255, .95) 45%,
            #5856d6 50%,
            rgba(0, 122, 255, .95) 55%,
            rgba(0, 122, 255, .2) 80%,
            transparent 100%
        );

    transform-origin: center center;

    will-change: transform, opacity;

    animation:
        spreadLight
        2.2s
        cubic-bezier(.4, 0, .2, 1)
        infinite;

    content: "";
}

@keyframes spreadLight {
    0% {
        transform: scaleX(0);
        opacity: .2;
        filter:
            drop-shadow(
                0 0 0 rgba(0, 122, 255, 0)
            );
    }

    50% {
        opacity: 1;
        filter:
            drop-shadow(
                0 0 3px rgba(0, 122, 255, .8)
            );
    }

    100% {
        transform: scaleX(1);
        opacity: 0;
        filter:
            drop-shadow(
                0 0 1px rgba(0, 122, 255, 0)
            );
    }
}


/* =========================================================
   07. Home Contact
   ========================================================= */

.home-contact-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;

    gap: 14px;

    margin: 42px 0 32px;

    padding: 18px;

    min-height: 150px;

    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            #f7fbff,
            #e5f1ff
        );

    color: var(--ink);
}

.contact-kicker {
    margin-bottom: 8px;

    color: var(--blue);
}

.home-contact-card h2 {
    margin: 0;

    font-size: 19px;
    font-weight: 800;

    letter-spacing: -.05em;
}

.home-contact-card p:not(.contact-kicker) {
    margin: 8px 0 0;

    color: #5d6b7f;

    font-size: 11px;
}

.home-contact-qr {
    width: 83px;
    height: 83px;

    padding: 5px;

    border-radius: 11px;

    background: #fff;

    object-fit: contain;
}


/* =========================================================
   08. Footer
   ========================================================= */

footer {
    width: min(calc(100% - 32px), 600px);

    margin: 0 auto;

    padding: 8px 0 34px;

    color: #63748a;

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   09. Dynamic Pages
   ========================================================= */

.container {
    width: min(calc(100% - 32px), 600px);

    margin: 0 auto;

    padding:
        29px
        0
        35px;
}

.page-intro {
    margin: 0 0 23px;
}

.page-intro-kicker {
    margin: 0 0 11px;

    color: var(--blue);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .1em;
}

.page-intro h1 {
    margin: 0;

    color: var(--ink);

    font-size: 36px;
    font-weight: 800;

    letter-spacing: -.07em;
}

.page-intro > p:last-child {
    max-width: 580px;

    margin: 12px 0 0;

    color: #5c6c82;

    font-size: 13px;
    line-height: 1.75;
}

.section-title {
    margin: 26px 0 13px;

    color: var(--ink);

    font-size: 15px;
    font-weight: 800;

    letter-spacing: -.025em;
}

.notice-link {
    display: inline-flex;

    margin-top: 9px;

    color: var(--blue);

    font-size: 12px;
    font-weight: 750;

    text-decoration: none;
}


/* =========================================================
   10. Generic List
   ========================================================= */

.list-group {
    overflow: hidden;

    padding: 3px 12px;

    border:
        1px solid rgba(225, 233, 244, .88);

    border-radius: 20px;

    background: var(--surface);

    box-shadow: var(--shadow);
}

.list-item {
    position: relative;

    display: flex;

    min-height: 74px;

    align-items: center;

    padding: 10px 2px;

    color: var(--ink);

    text-decoration: none;

    transition:
        background-color 150ms ease,
        transform 150ms var(--ease);
}

.list-item:not(:last-child)::after {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 58px;

    height: 1px;

    background: var(--line);

    content: "";
}

.list-item:active {
    transform: scale(.992);
}

.item-icon {
    display: block;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    margin-right: 10px;
    padding: 5px;

    border-radius: 14px;

    background: var(--soft);

    object-fit: contain;
}

.item-name {
    min-width: 0;

    flex: 1;

    font-size: 12px;
    font-weight: 750;

    line-height: 1.5;
}

.item-chevron {
    display: grid;

    min-width: 62px;
    height: 32px;

    flex: 0 0 auto;

    place-items: center;

    margin-left: 8px;

    border-radius: 999px;

    background: #f0f3f7;

    color: var(--blue);
}

.item-chevron::before {
    font-size: 11px;
    font-weight: 750;

    content: "打开";
}

.tools-empty-row {
    cursor: default;
}

.tool-row-copy {
    min-width: 0;
    flex: 1;
}

.tool-row-copy .item-name {
    display: block;
}

.tool-row-note {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.55;
}

.item-badge {
    flex: 0 0 auto;

    margin-left: 10px;

    padding: 6px 9px;

    border-radius: 999px;

    background: #f0f3f7;

    color: #7f8a9a;

    font-size: 10px;
    font-weight: 700;
}

.resource-list-item {
    align-items: flex-start;

    padding-top: 15px;
    padding-bottom: 15px;
}

.resource-list-item .item-chevron {
    margin-top: 9px;
}


/* =========================================================
   11. Notice
   ========================================================= */

.notice-card {
    margin: 0 0 18px;

    padding: 23px;

    border:
        1px solid rgba(225, 233, 244, .88);

    border-radius: 24px;

    background: var(--surface);

    box-shadow: var(--shadow);
}

.notice-title {
    margin: 0 0 9px;

    font-size: 19px;
    font-weight: 800;
}

.notice-content {
    margin: 0 0 10px;

    color: #5d6b7f;

    font-size: 13px;
    line-height: 1.75;
}

.notice-trigger {
    display: flex;

    width: 100%;
    min-height: 72px;

    align-items: center;

    gap: 13px;

    margin: 0 0 28px;

    padding: 14px 17px;

    border: 0;
    border-radius: 19px;

    background: #26364e;

    color: #fff;

    text-align: left;

    cursor: pointer;
}

.notice-trigger-mark {
    display: grid;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    place-items: center;

    border-radius: 14px;

    background: var(--blue);

    font-size: 18px;
    font-weight: 800;
}

.notice-trigger-copy {
    min-width: 0;
    flex: 1;
}

.notice-trigger-copy strong,
.notice-trigger-copy span {
    display: block;
}

.notice-trigger-copy strong {
    font-size: 14px;
}

.notice-trigger-copy span {
    margin-top: 4px;

    color: rgba(255, 255, 255, .7);

    font-size: 11px;
}

.notice-trigger-arrow {
    font-size: 24px;
}


/* =========================================================
   12. Announcement Dialog
   ========================================================= */

.announcement-dialog {
    width: min(560px, calc(100% - 32px));

    max-height:
        min(78svh, 620px);

    margin: auto;

    padding: 20px 18px;

    overflow: auto;

    border: 0;
    border-radius: 24px;

    background: var(--surface);

    color: var(--ink);

    box-shadow:
        0 22px 70px rgba(0, 0, 0, .24);
}

.announcement-dialog::backdrop {
    background: rgba(23, 39, 60, .5);
}

.announcement-dialog h2 {
    margin: 0 0 12px;

    font-size: 22px;
}

.announcement-dialog p {
    margin: 0 0 20px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.8;
}

.dialog-actions {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.dialog-actions form {
    margin: 0;
}

.dialog-close {
    min-height: 40px;

    padding: 0 14px;

    border: 0;
    border-radius: 999px;

    background: var(--blue);

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   13. List Disclosure
   ========================================================= */

.list-disclosure {
    margin: 11px 0 18px;
}

.more-toggle {
    display: flex;

    min-height: 48px;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 0 15px;

    border-radius: 15px;

    background: rgba(255, 255, 255, .7);

    color: #637188;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    list-style: none;
}

.more-toggle::-webkit-details-marker {
    display: none;
}

.more-toggle::after {
    color: var(--blue);

    content: "+";

    font-size: 18px;
}

details[open] > .more-toggle::after {
    content: "-";
}

.list-disclosure > .list-group {
    margin-top: 10px;
}


/* =========================================================
   14. Profile
   ========================================================= */

.profile-qr-wrap {
    display: grid;

    place-items: center;

    margin: 18px 0;

    padding: 16px;

    border-radius: 18px;

    background: var(--soft);
}

.profile-qr {
    display: block;

    width: min(100%, 270px);
    height: auto;

    padding: 5px;

    border-radius: 12px;

    background: #fff;
}

.profile-warning {
    margin-bottom: 0;

    text-align: center;
}


/* =========================================================
   15. Floating Dock
   ========================================================= */

/*
   主页最终版本：
   宽度 = 100%-60px
   最大 = 340px
   高度 = 56px
*/

html body div.floating-dock-wrap {
    position: fixed !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    bottom:
        calc(12px + env(safe-area-inset-bottom)) !important;

    width:
        min(calc(100% - 60px), 340px) !important;

    z-index: 2147483647 !important;

    pointer-events: none !important;

    display: flex !important;

    justify-content: center;
}

html body nav.floating-dock {
    width: 100% !important;

    min-height: 56px !important;

    padding: 4px !important;

    display: flex !important;

    align-items: center;

    justify-content: space-between;

    box-sizing: border-box;

    border:
        1px solid rgba(255, 255, 255, .9);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .82);

    box-shadow:
        0 4px 12px rgba(0, 100, 255, .08),
        inset 0 1px 0 rgba(255, 255, 255, .8);

    -webkit-backdrop-filter:
        blur(24px) saturate(160%);

    backdrop-filter:
        blur(24px) saturate(160%);

    pointer-events: auto !important;
}

html body .floating-dock .dock-item {
    position: relative;

    flex: 1 !important;

    min-width: 0 !important;
    min-height: 48px !important;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    border: 0;
    border-radius: 999px;

    background: transparent !important;

    color: var(--ink);

    font-size: 11px !important;
    font-weight: 760;

    pointer-events: auto !important;

    cursor: pointer !important;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s var(--ease);
}

.dock-item:active {
    transform: scale(.97);
}

html body .floating-dock .dock-icon {
    width: 18px !important;
    height: 18px !important;

    fill: currentColor;
}

.dock-item span {
    font-size: inherit;
    font-weight: inherit;
}


/* 分隔线 */

.dock-item:not(:last-child)::after {
    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;
    height: 34px;

    background:
        rgba(74, 89, 113, .26);

    content: "";

    transform: translateY(-50%);
}


/* 第三个项目分隔线保持 */

html body .floating-dock .dock-item:nth-child(3)::after {
    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;
    height: 34px;

    background:
        rgba(74, 89, 113, .26);

    content: "";

    transform: translateY(-50%);
}


/* 当前选中 */

.dock-item.active:not(.dock-item-help) {
    background: transparent !important;

    color: #286df5 !important;

    box-shadow: none !important;
}


/* 客服 */

.dock-item-help,
.dock-item-help.active {
    flex-direction: row;

    margin-left: 4px;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            #3478f6 0%,
            #459cf5 100%
        );

    box-shadow:
        0 5px 14px rgba(40, 109, 245, .20);
}

.dock-item-help .dock-icon {
    display: none;
}


/* 隐藏 */

.dock-hidden {
    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transform:
        translate(
            -50%,
            calc(100% + 26px)
        );
}


/* =========================================================
   16. Password / Modal
   ========================================================= */

.pwd-modal-backdrop,
.notice-modal-backdrop {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 10000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, .35);

    -webkit-backdrop-filter:
        blur(20px);

    backdrop-filter:
        blur(20px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.pwd-modal-backdrop.active,
.notice-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}


.pwd-modal-card,
.notice-modal-card {
    width: 100%;
    max-width: 310px;

    padding: 24px 20px 20px;

    border:
        .5px solid var(--card-border-glass);

    border-radius: 24px;

    background:
        var(--card-bg-glass);

    -webkit-backdrop-filter:
        blur(30px);

    backdrop-filter:
        blur(30px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .15);

    text-align: center;

    transform:
        scale(.92)
        translateY(10px);

    transition:
        transform .25s cubic-bezier(
            .175,
            .885,
            .32,
            1.275
        );
}

.pwd-modal-backdrop.active .pwd-modal-card,
.notice-modal-backdrop.active .notice-modal-card {
    transform:
        scale(1)
        translateY(0);
}


/* Icon */

.pwd-icon-wrap,
.notice-modal-icon-wrap {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 12px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #007aff,
            #5856d6
        );

    box-shadow:
        0 6px 16px rgba(0, 122, 255, .35);
}

.pwd-lock-icon,
.notice-modal-icon {
    width: 24px;
    height: 24px;

    fill: #fff;
}


/* Title */

.pwd-title,
.notice-modal-title {
    margin: 0;

    color: #1c1c1e;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -.3px;
}

.pwd-subtitle,
.notice-modal-content {
    margin-top: 8px;
    margin-bottom: 20px;

    color: #8e8e93;

    font-size: 13px;
    line-height: 1.6;
}


/* Input */

.pwd-input-wrap {
    width: 100%;

    margin-bottom: 6px;
}

.pwd-input {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    border:
        1px solid rgba(120, 120, 128, .2);

    border-radius: 12px;

    background:
        rgba(120, 120, 128, .08);

    color: #1c1c1e;

    font-size: 16px !important;

    outline: none;

    -webkit-appearance: none;
}

.pwd-input:focus {
    border-color: #007aff;

    background: #fff;
}


/* Error */

.pwd-error-msg {
    height: 18px;

    margin-bottom: 12px;

    color: #ff3b30;

    font-size: 12px;
    line-height: 18px;

    opacity: 0;

    transition:
        opacity .2s ease;
}

.pwd-error-msg.visible {
    opacity: 1;
}


/* Buttons */

.pwd-actions,
.notice-modal-actions {
    display: flex;

    gap: 10px;
}

.pwd-btn,
.notice-modal-btn {
    flex: 1;

    height: 44px;

    border: none;
    border-radius: 12px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}

.pwd-btn-cancel {
    background:
        rgba(120, 120, 128, .12);

    color: #8e8e93;
}

.pwd-btn-confirm,
.notice-modal-btn-confirm {
    background-color: #007aff;

    color: #fff;

    box-shadow:
        0 4px 12px rgba(0, 122, 255, .3);
}

.pwd-btn-confirm:disabled {
    opacity: .55;

    cursor: wait;
}


/* Shake */

@keyframes pwdShake {
    0%,
    100% {
        transform: translateX(0);
    }

    32% {
        transform: translateX(-4px);
    }

    68% {
        transform: translateX(4px);
    }
}

.pwd-modal-card.shake {
    animation:
        pwdShake
        180ms
        ease-out
        both;
}


/* =========================================================
   17. Notice Bubble
   ========================================================= */

.notice-bubble {
    position: fixed;

    right: 24px;
    bottom: 90px;

    width: 326px;
    max-width:
        calc(100vw - 32px);

    box-sizing: border-box;

    padding: 22px;

    overflow: hidden;

    z-index: 99999;

    background:
        linear-gradient(
            90deg,
            #5aa7ff,
            #58e7b1
        );

    border:
        1px solid rgba(255, 255, 255, .5);

    border-radius: 20px;

    box-shadow:
        0 14px 38px rgba(54, 139, 174, .25),
        0 4px 12px rgba(65, 147, 190, .12);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(18px)
        scale(.97);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;

    font-family: inherit;
}

.notice-bubble.show {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* Header */

.notice-bubble-header {
    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding-right: 25px;
}

.notice-bubble-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    background:
        rgba(255, 255, 255, .32);

    border:
        1px solid rgba(255, 255, 255, .48);

    border-radius: 14px;

    font-size: 22px;

    box-shadow:
        0 4px 12px rgba(33, 108, 139, .08);
}

.notice-bubble-title {
    color: #10334b;

    font-size: 16px;
    font-weight: 750;

    letter-spacing: .3px;

    line-height: 1.5;
}

.notice-bubble-subtitle {
    margin-top: 3px;

    color:
        rgba(16, 51, 75, .72);

    font-size: 11px;

    letter-spacing: .8px;
}


/* Close */

.notice-bubble-close {
    position: absolute;

    top: 11px;
    right: 11px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, .55);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .28);

    color: #17445a;

    font-size: 21px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.notice-bubble-close:hover {
    background:
        rgba(255, 255, 255, .65);

    transform:
        rotate(90deg);
}


/* Content */

.notice-bubble-content {
    position: relative;

    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid rgba(255, 255, 255, .5);

    color: #163c50;

    font-size: 13px;

    line-height: 1.9;

    overflow-wrap: anywhere;
}


/* Button */

.notice-bubble-button {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 18px;

    padding: 13px 16px;

    background:
        rgba(255, 255, 255, .92);

    border:
        1px solid rgba(255, 255, 255, .8);

    border-radius: 12px;

    color: #1767a2 !important;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none !important;

    box-shadow:
        0 5px 15px rgba(32, 104, 132, .12);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.notice-bubble-button:hover {
    background: #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px rgba(32, 104, 132, .18);
}

.notice-bubble-button span {
    font-size: 18px;

    transition:
        transform .2s ease;
}

.notice-bubble-button:hover span {
    transform:
        translateX(3px);
}


/* =========================================================
   18. JB Notice / Search / Cards
   ========================================================= */

.jb-notice-pill {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    background:
        rgba(40, 109, 245, .08);

    color:
        var(--blue);

    border: none;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    flex-shrink: 0;

    transition:
        transform .15s ease,
        background-color .15s ease;
}

.jb-notice-pill:active {
    transform: scale(.95);

    background:
        rgba(40, 109, 245, .15);
}

.jb-pill-dot {
    width: 6px;
    height: 6px;

    background-color: var(--blue);

    border-radius: 50%;
}


/* Search */

.jb-search-wrap {
    margin-bottom: 24px;
}

.jb-search-box {
    position: relative;

    display: flex;

    align-items: center;

    background:
        rgba(255, 255, 255, .85);

    -webkit-backdrop-filter:
        blur(20px);

    backdrop-filter:
        blur(20px);

    border:
        1px solid rgba(225, 233, 244, .95);

    border-radius: 18px;

    padding: 0 14px;

    box-shadow:
        0 8px 24px rgba(44, 83, 132, .05);
}

.jb-search-box:focus,
.jb-search-box:focus-within,
.jb-search-box:active {
    border-color:
        rgba(225, 233, 244, .95) !important;

    box-shadow:
        0 8px 24px rgba(44, 83, 132, .05) !important;

    outline: none !important;
}

.jb-search-icon {
    color: var(--muted);

    margin-right: 8px;

    flex-shrink: 0;
}

.jb-search-input {
    flex: 1;

    height: 44px;

    border: none !important;

    background: transparent !important;

    outline: none !important;

    box-shadow: none !important;

    font-size: 14px;

    color: var(--ink);

    -webkit-appearance: none;

    -webkit-tap-highlight-color: transparent;
}

.jb-search-input:focus {
    outline: none !important;

    border: none !important;

    box-shadow: none !important;
}

.jb-search-input::placeholder {
    color: var(--muted);
}

.jb-search-clear {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(114, 121, 134, .15);

    color: var(--muted);

    cursor: pointer;
}


/* JB Section */

.jb-section {
    margin-top: 24px;

    padding: 23px;

    border:
        1px solid rgba(225, 233, 244, .95);

    border-radius: 28px;

    background:
        rgba(255, 255, 255, .92);

    box-shadow:
        0 16px 38px rgba(44, 83, 132, .08);
}

.jb-section-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 19px;
}

.jb-section-heading h2 {
    margin: 0;

    color: var(--ink);

    font-size: 19px;
    font-weight: 800;

    letter-spacing: -.04em;
}

.jb-section-heading > span {
    color: var(--blue);

    font-size: 10px;
    font-weight: 750;

    letter-spacing: .06em;
}


/* JB Grid */

.jb-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.jb-card {
    display: flex;

    min-width: 0;
    min-height: 125px;

    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    padding: 15px 7px 13px;

    border:
        1px solid #edf2f8;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #f8fbff 100%
        );

    color: var(--ink);

    text-align: center;

    text-decoration: none;

    transition:
        transform .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.jb-icon-wrap {
    display: grid;

    width: 64px;
    height: 64px;

    flex: 0 0 auto;

    place-items: center;

    padding: 8px;

    border-radius: 19px;

    background: #f0f6ff;
}

.jb-icon-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.jb-name {
    display: block;

    width: 100%;

    overflow-wrap: anywhere;

    color: #263247;

    font-size: 12px;
    font-weight: 750;

    line-height: 1.45;
}

.jb-description {
    display: block;

    margin-top: -5px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.5;
}

.jb-card-disabled {
    cursor: default;

    opacity: .65;
}

.jb-more-grid[hidden] {
    display: none !important;
}

.jb-more-grid:not([hidden]) {
    display: grid;

    margin-top: 12px;

    animation:
        jbFadeIn
        .22s
        ease
        both;
}

.jb-expand-btn {
    display: flex;

    width: 100%;
    min-height: 43px;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 15px;

    padding: 8px 14px;

    border:
        1px solid #e5edfa;

    border-radius: 14px;

    background: #f3f8ff;

    color: var(--blue);

    font-size: 12px;
    font-weight: 750;

    cursor: pointer;

    transition:
        background-color .18s ease,
        transform .18s ease;
}

.jb-expand-btn:active {
    transform: scale(.99);
}

.jb-expand-icon {
    display: inline-block;

    font-size: 14px;

    line-height: 1;

    transition:
        transform .2s ease;
}

.jb-expand-btn.is-active .jb-expand-icon {
    transform:
        rotate(180deg);
}


/* Empty */

.jb-empty-state {
    padding: 40px 20px;

    color: var(--muted);

    text-align: center;
}

.jb-empty-state p {
    margin-bottom: 4px;

    color: var(--ink);

    font-size: 15px;
    font-weight: 700;
}

.jb-empty-state span {
    font-size: 12px;
}


/* Footer */

.jb-footer {
    margin-top: 35px;

    padding: 8px 0 20px;

    color: #63748a;

    font-size: 11px;

    text-align: center;
}

.jb-footer p {
    margin: 0;
}

.jb-footer a {
    color: inherit;

    text-decoration: none;
}


/* =========================================================
   19. JB Modal (精巧悬浮弹窗版)
   ========================================================= */

.jb-modal {
    /* 1. 强制居中浮动卡片形态，绝不拉伸 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;

    /* 2. 紧凑的弹窗尺寸（控制在小屏手机黄金宽度） */
    width: 86%;
    max-width: 310px;
    max-height: 75vh;

    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    border: 1px solid rgba(225, 233, 244, .95);
    border-radius: 20px;
    background: #fff;
    color: var(--ink, #0f172a);
    box-shadow: 0 20px 40px rgba(27, 63, 110, 0.22);
    box-sizing: border-box;
    z-index: 99999;
}

.jb-modal:not([open]) {
    display: none;
}

.jb-modal[open] {
    animation: jbModalIn .22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 3. 遮罩层毛玻璃 */
.jb-modal::backdrop {
    background: rgba(25, 48, 79, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.jb-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.jb-modal-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: #eaf2ff;
    font-size: 15px;
    flex-shrink: 0;
}

.jb-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 750;
}

.jb-modal-body {
    margin: 0 0 18px;
    color: #5c6c82;
    font-size: 13px;
    line-height: 1.6;
}

.jb-modal-footer {
    display: flex;
    gap: 8px;
}

.jb-modal-btn {
    display: inline-flex;
    min-width: 0;
    min-height: 38px;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 0;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.jb-modal-btn.secondary {
    background: #edf4ff;
    color: var(--blue, #2563eb);
}

.jb-modal-btn.primary {
    background: var(--blue, #2563eb);
    color: #fff;
}

@keyframes jbModalIn {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
/* =========================================================
   20. Loading / Error
   ========================================================= */

.tab-feedback {
    width: min(calc(100% - 40px), 560px);

    margin: 0 auto;

    padding: 90px 0;

    color: var(--muted);

    text-align: center;
}

.tab-feedback > p {
    margin: 12px 0 0;

    font-size: 13px;
}

.load-error-title {
    color: var(--ink);

    font-size: 18px !important;
    font-weight: 750;
}

.load-error-copy code {
    display: block;

    margin-top: 8px;

    overflow-wrap: anywhere;
}

.retry-button {
    min-height: 40px;

    margin-top: 18px;

    padding: 0 16px;

    border: 0;

    border-radius: 999px;

    background: var(--blue);

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.loading-spinner {
    width: 26px;
    height: 26px;

    margin: 0 auto;

    border:
        3px solid #dfe9f9;

    border-top-color:
        var(--blue);

    border-radius: 50%;

    animation:
        spin
        700ms
        linear
        infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   21. Hover
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .header-contact:hover,
    .header-contact-link:hover {
        background:
            rgba(0, 122, 255, .14);
    }

    .menu-btn:hover {
        background:
            rgba(0, 122, 255, .04) !important;

        transform:
            translateY(-2px);
    }

    .list-item[href]:hover {
        background: #f7faff;
    }

    .dock-item:hover {
        color: var(--blue);
    }

    .dock-item-help:hover,
    .dock-item-help.active:hover {
        color: #fff;
    }

    .jb-card[href]:hover {
        transform:
            translateY(-3px);

        border-color:
            #d8e7ff;

        background: #fff;

        box-shadow:
            0 10px 25px rgba(44, 83, 132, .09);
    }

    .jb-expand-btn:hover {
        background: #e9f2ff;
    }

    .jb-modal-btn.secondary:hover {
        background: #e3edff;
    }
}


/* =========================================================
   22. Mobile
   ========================================================= */

@media (max-width: 760px) {

    body {
        padding-bottom:
            calc(
                96px +
                env(safe-area-inset-bottom)
            );
    }

    .site-header {
        min-height: 68px;
    }

    .home-main,
    footer {
        width:
            min(calc(100% - 32px), 600px);
    }

    .container {
        width:
            min(calc(100% - 32px), 600px);
    }

    .brand-mark {
        width: 36px;
        height: 36px;

        border-radius: 11px;

        font-size: 16px;
    }

    .brand-name {
        font-size: 15px;
    }

    .brand-caption {
        font-size: 8px;
    }

    .header-contact,
    .header-contact-link {
        min-height: 37px;

        padding:
            6px
            12px
            6px
            7px;

        font-size: 11px;
    }

    .header-contact-icon {
        width: 23px;
        height: 23px;
    }

    .home-hero {
        padding:
            55px
            0
            52px;
    }

    .hero-eyebrow {
        font-size: 10px;
    }

    .home-hero h1 {
        font-size:
            clamp(39px, 10vw, 57px);

        line-height: 1.18;
    }

    .home-hero h1::after {
        height: 8px;

        margin-top: 8px;
    }

    .home-hero > p {
        max-width: 370px;

        margin-top: 21px;

        font-size: 13px;
    }

    .hero-topic-row {
        gap: 7px;

        margin-top: 22px;
    }

    .hero-topic-row span {
        padding: 8px 11px;

        font-size: 10px;
    }

    .platform-section {
        padding:
            20px
            16px
            16px;
    }

    .section-heading {
        align-items: flex-start;

        margin-bottom: 14px;
    }

    .section-heading h2 {
        font-size: 24px;
    }

    .section-heading > p {
        max-width: 140px;

        font-size: 10px;

        text-align: right;
    }

    .menu-grid,
    .menu-grid-2col {
        gap: 16px 10px !important;
    }

    .menu-btn {
        min-height: 93px;

        gap: 8px;

        padding: 10px 4px !important;

        border-radius: 17px;
    }

    .btn-icon { width: 43px; height: 43px; padding: 6px; border-radius: 13px; }

    .menu-btn > span,
    .menu-btn span {
        font-size: 13px !important;
    }

    .home-contact-card {
        min-height: 150px;

        gap: 14px;

        margin:
            42px 0 32px;

        padding: 18px;

        border-radius: 21px;
    }

    .home-contact-card h2 {
        font-size: 19px;
    }

    .home-contact-card p:not(.contact-kicker) {
        font-size: 11px;
    }

    .home-contact-qr {
        width: 83px;
        height: 83px;

        border-radius: 11px;
    }

    .container {
        padding-top: 29px;
    }

    .page-intro {
        margin-bottom: 23px;
    }

    .page-intro h1 {
        font-size: 36px;
    }

    .page-intro > p:last-child {
        font-size: 13px;
    }

    .section-title {
        margin-top: 26px;
    }

    .list-group {
        padding:
            3px
            12px;

        border-radius: 20px;
    }

    .list-item {
        min-height: 74px;

        padding:
            10px
            2px;
    }

    .item-icon {
        width: 44px;
        height: 44px;

        margin-right: 10px;

        border-radius: 14px;
    }

    .item-name {
        font-size: 12px;
    }

    .tool-row-note {
        font-size: 10px;
    }

    .item-chevron {
        min-width: 62px;
        height: 32px;

        margin-left: 8px;
    }

    .item-chevron::before {
        font-size: 11px;
    }

    .notice-trigger {
        min-height: 72px;

        border-radius: 19px;
    }

    .announcement-dialog {
        padding:
            20px
            18px;
    }

    .notice-bubble {
        right: 12px;
        bottom: 80px;

        width: 300px;
        max-width:
            calc(100vw - 24px);

        padding: 19px;

        border-radius: 18px;
    }

    .jb-section {
        padding: 18px;
    }

    .jb-grid {
        gap: 10px;
    }

    .jb-card {
        min-height: 118px;

        padding:
            13px
            6px
            12px;
    }

    .jb-icon-wrap {
        width: 56px;
        height: 56px;

        border-radius: 17px;
    }
}


/* =========================================================
   23. Very Small Devices
   ========================================================= */

@media (max-width: 370px) {

    .site-header,
    .home-main,
    footer,
    .container {
        width:
            calc(100% - 24px);
    }

    .site-header {
        width: 100% !important;
    }

    .brand-caption {
        display: none;
    }

    .home-hero h1 {
        font-size: 37px;
    }

    .menu-grid {
        gap: 6px !important;
    }

    .menu-btn {
        min-height: 83px;

        border-radius: 14px;
    }

    .btn-icon { width: 37px; height: 37px; }

    .menu-btn > span,
    .menu-btn span {
        font-size: 8px !important;
    }

    .row-action {
        min-width: 52px;
    }

    html body div.floating-dock-wrap {
        width:
            min(calc(100% - 42px), 320px) !important;
    }
}


/* =========================================================
   24. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }
}


/* =========================================================
   25. Final Safety Overrides
   ========================================================= */

/* 防止主页背景被旧规则覆盖 */

body {
    background:
        var(--page-bg-gradient) !important;

    background-color:
        #ffffff !important;
}


/* 顶栏永远纯白 */

.site-header {
    background:
        #ffffff !important;

    background-color:
        #ffffff !important;
}


/* 主页入口容器永远纯白 */

.platform-section {
    background-color:
        #ffffff !important;
}


/* 底栏尺寸最终标准 */

html body div.floating-dock-wrap {
    width:
        min(calc(100% - 60px), 340px) !important;

    bottom:
        calc(12px + env(safe-area-inset-bottom)) !important;
}

html body nav.floating-dock {
    min-height: 56px !important;
}




/* ==========================================
   Designer's Edition Header Style
   ========================================== */

/* 全局基线重置 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-top: 64px;
  background-color: #f8fafc;
}

/* 1. 顶栏主体：悬浮感 + 高透毛玻璃 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  
  /* 摒弃线框，采用细腻的弥散浅阴影与极淡高光 border */
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. 左侧：灵动的两道杠菜单（hover 时有长度错位感） */
.header-menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent !important;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.menu-line {
  display: block;
  height: 2px;
  background-color: #0f172a;
  border-radius: 99px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-line.top {
  width: 18px;
}

.menu-line.bottom {
  width: 12px;
}

/* Hover 错位交替展开特效 */
.header-menu-btn:hover .menu-line.top {
  width: 12px;
  background-color: #ef4444;
}

.header-menu-btn:hover .menu-line.bottom {
  width: 18px;
  background-color: #ef4444;
}


/* 3. 中间：绝对居中的品牌标 */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* Badge 采用深邃红渐变 + 精致内阴影与外发光 */
.brand-badge {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-symbol {
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: -0.5px;
}

.brand-title {
  display: flex;
  align-items: baseline;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-text-main {
  color: #0f172a;
}

.brand-text-accent {
  color: #e11d48;
  margin-left: 2px;
}

.brand-lockup:hover .brand-badge {
  transform: scale(1.08) rotate(-3deg);
}


/* 4. 右侧：带有微光呼吸点的客服图标 */
.header-contact-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #475569;
  text-decoration: none;
  background: transparent !important;
  border: none;
  transition: all 0.2s ease;
  z-index: 2;
}

.header-contact-btn svg {
  transition: transform 0.2s ease, color 0.2s ease;
}

/* 客服在线绿色呼吸点 */
.status-dot-pulse {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff;
}

/* 呼吸动画 */
.status-dot-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #10b981;
  animation: pulse-ring 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

.header-contact-btn:hover {
  color: #e11d48;
}

.header-contact-btn:hover svg {
  transform: scale(1.1);
}




/* 弹窗遮罩层与浮层 */
.asit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 16px;
}

.asit-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.asit-modal-content {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 24px;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.asit-modal-overlay.active .asit-modal-content {
    transform: scale(1) translateY(0);
}

.asit-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: #f5f5f7;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: #6e6e73;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.asit-close-btn:hover { background: #e8e8ed; color: #1d1d1f; }

/* 工具卡片基础 */
.asit-card {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}

.asit-title { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: #1d1d1f; }
.asit-sub { margin: 0 0 20px; color: #6e6e73; font-size: 14px; }
.asit-search-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.asit-search-box { position: relative; flex: 1; min-width: 0; }
.asit-search-icon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #86868b; pointer-events: none; }
.asit-input { display: block; width: 100%; height: 46px; padding: 0 16px 0 42px; border: 1px solid #d2d2d7; border-radius: 12px; outline: none; background: #f5f5f7; color: #1d1d1f; font-size: 15px; }
.asit-input:focus { background: #ffffff; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }
.asit-region { position: relative; flex: 0 0 130px; }
.asit-region-select { appearance: none; width: 100%; height: 46px; padding: 0 30px 0 12px; border: 1px solid #d2d2d7; border-radius: 12px; background: #f5f5f7; font-size: 13px; cursor: pointer; }
.asit-region::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid #6e6e73; border-bottom: 1.5px solid #6e6e73; transform: rotate(45deg); pointer-events: none; }
.asit-button { height: 46px; padding: 0 18px; border: 0; border-radius: 12px; background: #ef4444; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.asit-button:hover { opacity: 0.9; }
.asit-status { min-height: 20px; margin-top: 10px; color: #6e6e73; font-size: 13px; }
.asit-status.error { color: #dc2626; }
.asit-result { display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eeeeee; text-align: center; }
.asit-icon { width: 140px; height: 140px; margin: 0 auto; border-radius: 30px; object-fit: cover; box-shadow: 0 10px 25px rgba(0, 0, 0, .15); }
.asit-name { margin-top: 14px; font-size: 20px; font-weight: 600; }
.asit-meta { margin-top: 4px; color: #6e6e73; font-size: 13px; }
.asit-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.asit-download, .asit-store { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 500; }
.asit-download { background: #1d1d1f; color: #fff; }
.asit-store { background: #f5f5f7; color: #1d1d1f; }
.asit-history { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eeeeee; text-align: left; }
.asit-history-button { width: 100%; height: 42px; border: 0; border-radius: 10px; background: #f5f5f7; font-size: 14px; cursor: pointer; }
.asit-history-status { min-height: 20px; margin-top: 8px; color: #6e6e73; font-size: 13px; }
.asit-history-result { display: none; margin-top: 12px; }
.asit-history-current { padding: 10px 12px; border-radius: 8px; background: #f5f5f7; font-size: 13px; margin-bottom: 10px; }
.asit-history-table-wrap { max-height: 260px; overflow-y: auto; border: 1px solid #eeeeee; border-radius: 10px; }
.asit-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.asit-history-table th, .asit-history-table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; }
.asit-history-table th { background: #f5f5f7; }
.asit-tip { margin-top: 16px; color: #86868b; font-size: 12px; }
.asit-tip code { padding: 2px 5px; background: #f5f5f7; border-radius: 4px; }

@media (max-width: 650px) {
    .asit-search-row { display: grid; grid-template-columns: 1fr 100px; }
    .asit-search-box { grid-column: 1 / -1; }
    .asit-button { width: 100%; }
}



/* =========================================================
   END
   ========================================================= */