@charset "utf-8";

    :root {
        --text-dark: #0f172a;
        --text-body: #475569;
        --text-light: #94a3b8;
        --border: #e2e8f0;
        --border-light: #f1f5f9;
        --card-bg: #ffffff;
        --page-bg: #f8fafc;
        --shadow-sm: 0 1px 3px rgba(15,23,42,0.04);
        --shadow-xl: 0 20px 40px rgba(15,23,42,0.1);
        --radius-sm: 8px;
        --radius-lg: 14px;
        --radius-xl: 18px;
        --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
        --container-max: 1480px;
        --container-pad: 10px;
        --pl-sidebar-w: 300px;
        --pl-gap: 30px;
    }

    *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--page-bg); font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing: antialiased; color: var(--text-body); line-height: 1.6; overflow-x: hidden; }
    img { max-width: 100%; height: auto; }
    a { text-decoration: none; color: inherit; }
    .container-1480 { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }

    /* ===== Hero Banner ===== */
    .hero-banner { position: relative; min-height: 420px; display: flex; align-items: center; background-size: cover; background-position: center; overflow: hidden; }
    .hero-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg,rgba(0,10,32,.94) 0%,rgba(0,32,72,.8) 40%,rgba(var(--primary-rgb,10,95,255),.35) 100%); z-index: 1; }
    .hero-banner .container-1480 { position: relative; z-index: 3; }
    .banner-content { max-width: 1200px; padding: 68px 0 88px; animation: fadeUp .7s ease-out; }
    @keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
    .banner-content h1 { font-size: clamp(1.75rem,3.6vw,2.8rem); font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.2; }
    .banner-content p { font-size: clamp(.95rem,1.3vw,1.1rem); color: rgba(255,255,255,.82); margin-bottom: 28px; line-height: 1.7; }
    .cta-button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 34px; background: var(--primary-blue,#0a5fff); color: #fff; font-size: .95rem; font-weight: 600; border-radius: 50px; border: none; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 16px rgba(var(--primary-rgb,10,95,255),.35); }
    .cta-button:hover { background: var(--hover-blue,#0043cc); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--primary-rgb,10,95,255),.45); }
    .cta-button::after { content: '→'; font-size: 1.1rem; transition: transform .3s; }
    .cta-button:hover::after { transform: translateX(4px); }

    /* ===== Breadcrumb + Search ===== */
    .breadcrumb-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 16px 0; margin-bottom: 4px; border-bottom: 1px solid #f1f5f9; }
    .breadcrumb-bar .breadcrumb-list { flex: 1; min-width: 0; }
    .popup-search-wrap { position: relative; display: flex; align-items: center; width: 280px; flex-shrink: 0; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 9999px; transition: all .25s ease; }
    .popup-search-wrap:hover { background: #fff; border-color: #cbd5e1; }
    .popup-search-wrap:focus-within { background: #fff; border-color: var(--primary-blue,#2563eb); box-shadow: 0 0 0 3px rgba(var(--primary-rgb,37,99,235),.12); width: 340px; }
    .popup-search-wrap .field { flex: 1; width: 100%; height: 40px; padding: 0 8px 0 18px; border: none; outline: none; background: transparent; font-size: 14px; color: #0f172a; font-family: inherit; }
    .popup-search-wrap .field::placeholder { color: #94a3b8; }
    .popup-search-wrap .search-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 3px; border-radius: 50%; background: var(--search-btn-bg,var(--primary-blue,#2563eb)); color: #fff; border: none; cursor: pointer; flex-shrink: 0; transition: all .25s ease; }
    .popup-search-wrap .search-icon:hover { background: var(--search-btn-hover,var(--hover-blue,#1d4ed8)); transform: scale(1.05); }
    .popup-search-wrap .search-icon svg { width: 15px; height: 15px; }

    /* ===== TWO-COLUMN LAYOUT ===== */
    .pl-layout {
        display: flex;
        flex-direction: row;
        gap: var(--pl-gap);
        align-items: flex-start;
        padding: 24px 0 60px;
        width: 100%;
    }

    /* ===== Left Sidebar ===== */
    .pl-sidebar {
        width: var(--pl-sidebar-w);
        min-width: var(--pl-sidebar-w);
        flex-shrink: 0;
        position: sticky;
        top: 20px;
        order: 0;
    }

    .sb-block {
        background: var(--card-bg);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-light);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        margin-bottom: 20px;
    }

    .sb-title {
        background: var(--gradient-blue,linear-gradient(135deg,var(--primary-blue,#0a5fff),var(--accent-blue,#3385ff)));
        color: #fff; font-size: 1.05rem; font-weight: 700;
        padding: 14px 20px; margin: 0;
    }

    /* Category */
    .sb-cat-list { list-style: none; padding: 0; margin: 0; }
    .sb-cat-item { border-bottom: 1px solid var(--border-light); }
    .sb-cat-item:last-child { border-bottom: none; }
    .sb-cat-link { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-size: .94rem; font-weight: 500; color: var(--text-dark); transition: var(--transition); cursor: pointer; }
    .sb-cat-link:hover { background: var(--primary-light,#eef4ff); color: var(--primary-blue,#0a5fff); }
    .sb-cat-item.active > .sb-cat-link { color: var(--primary-blue,#0a5fff); font-weight: 700; background: var(--primary-light,#eef4ff); }
    .sb-arrow { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-light); transition: transform .3s ease,color .3s; cursor: pointer; }
    .sb-cat-link:hover .sb-arrow { color: var(--primary-blue,#0a5fff); }
    .sb-cat-item.open > .sb-cat-link .sb-arrow { transform: rotate(90deg); color: var(--primary-blue,#0a5fff); }
    .sb-sub-list { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fafcff; }
    .sb-cat-item.open .sb-sub-list { max-height: 500px; }
    .sb-sub-item a { display: block; padding: 10px 20px 10px 38px; font-size: .88rem; color: var(--text-body); transition: var(--transition); border-bottom: 1px solid var(--border-light); position: relative; }
    .sb-sub-item:last-child a { border-bottom: none; }
    .sb-sub-item a::before { content: ''; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--text-light); transition: background .3s; }
    .sb-sub-item a:hover { color: var(--primary-blue,#0a5fff); background: var(--primary-light,#eef4ff); }
    .sb-sub-item a:hover::before { background: var(--primary-blue,#0a5fff); }
    .sb-sub-item.active a { color: var(--primary-blue,#0a5fff); font-weight: 600; background: var(--primary-light,#eef4ff); }
    .sb-sub-item.active a::before { background: var(--primary-blue,#0a5fff); }

    /* ===== Recommended Products ===== */
    .sb-rec-list {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .sb-rec-card {
        display: flex;
        flex-direction: column;
        border-radius: var(--radius-sm);
        overflow: hidden;
        border: 1px solid var(--border-light);
        background: var(--card-bg);
        transition: var(--transition);
        text-decoration: none;
        color: inherit;
    }
    .sb-rec-card:hover {
        border-color: var(--primary-blue,#0a5fff);
        box-shadow: 0 6px 18px rgba(var(--primary-rgb,10,95,255),.12);
        transform: translateY(-3px);
    }
    .sb-rec-img {
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: #f1f5f9;
    }
    .sb-rec-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .5s cubic-bezier(.4,0,.2,1);
    }
    .sb-rec-card:hover .sb-rec-img img { transform: scale(1.06); }
    .sb-rec-title {
        padding: 12px 14px;
        font-size: .88rem;
        font-weight: 600;
        color: var(--text-dark);
        line-height: 1.4;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color .3s;
    }
    .sb-rec-card:hover .sb-rec-title { color: var(--primary-blue,#0a5fff); }

    /* ===== Right Content ===== */
    .pl-main {
        flex: 1;
        min-width: 0;
        order: 0;
    }

    .pl-section { margin-bottom: 24px; }

    /* Rich Content - 去除卡片化外框，与上下区域融为一体 */
    .pl-rich-wrap {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        font-size: 1rem;
        line-height: 1.85;
        color: var(--text-body);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .pl-rich-wrap > *:first-child { margin-top: 0; }
    .pl-rich-wrap > *:last-child { margin-bottom: 0; }
    .pl-rich-wrap h1,.pl-rich-wrap h2,.pl-rich-wrap h3,.pl-rich-wrap h4 { color: var(--text-dark); margin: 1.5em 0 .65em; font-weight: 700; line-height: 1.3; }
    .pl-rich-wrap h1 { font-size: 1.75rem; }
    .pl-rich-wrap h2 { font-size: 1.45rem; }
    .pl-rich-wrap h3 { font-size: 1.22rem; }
    .pl-rich-wrap p { margin-bottom: 1em; }
    .pl-rich-wrap a { color: var(--primary-blue,#0a5fff); text-decoration: underline; text-underline-offset: 3px; }
    .pl-rich-wrap a:hover { color: var(--hover-blue,#0043cc); }
    .pl-rich-wrap ul,.pl-rich-wrap ol { padding-left: 1.5em; margin-bottom: 1em; }
    .pl-rich-wrap li { margin-bottom: .4em; }
    .pl-rich-wrap blockquote { margin: 1.4em 0; padding: 16px 22px; border-left: 4px solid var(--primary-blue,#0a5fff); background: var(--primary-light,#eef4ff); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--text-dark); }
    .pl-rich-wrap img { max-width: 100%; height: auto !important; border-radius: 6px; margin: 12px 0; display: block; }
    .pl-rich-wrap table { width: 100%; border-collapse: collapse; font-size: .92rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: 20px 0; }
    .pl-rich-wrap table th,.pl-rich-wrap table td { padding: 12px 16px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
    .pl-rich-wrap table th { background: var(--primary-light,#eef4ff); color: var(--text-dark); font-weight: 600; }
    .pl-rich-wrap table tr:nth-child(even) { background: #fafcff; }
    .pl-rich-wrap table tr:hover { background: var(--primary-light,#eef4ff); }

    /* ===== Product Grid ===== */
    .pl-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
    .pl-card {
        display: flex; flex-direction: column;
        background: var(--card-bg); border-radius: var(--radius-lg);
        overflow: hidden; border: 1px solid var(--border-light);
        transition: var(--transition); box-shadow: var(--shadow-sm);
        opacity: 0; transform: translateY(18px);
        animation: plCardIn .45s ease forwards;
    }
    @keyframes plCardIn { to { opacity: 1; transform: translateY(0); } }
    .pl-card:nth-child(1) { animation-delay: .04s; }
    .pl-card:nth-child(2) { animation-delay: .08s; }
    .pl-card:nth-child(3) { animation-delay: .12s; }
    .pl-card:nth-child(4) { animation-delay: .16s; }
    .pl-card:nth-child(5) { animation-delay: .20s; }
    .pl-card:nth-child(6) { animation-delay: .24s; }
    .pl-card:nth-child(7) { animation-delay: .28s; }
    .pl-card:nth-child(8) { animation-delay: .32s; }
    .pl-card:nth-child(9) { animation-delay: .36s; }
    .pl-card:nth-child(10) { animation-delay: .40s; }
    .pl-card:nth-child(11) { animation-delay: .44s; }
    .pl-card:nth-child(12) { animation-delay: .48s; }
    .pl-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; }
    .pl-card-img { position: relative; overflow: hidden; background: #f1f5f9; aspect-ratio: 4/3; }
    .pl-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.4,0,.2,1); }
    .pl-card:hover .pl-card-img img { transform: scale(1.06); }
    .pl-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; text-align: center; }
    .pl-card-name { font-size: .95rem; font-weight: 650; color: var(--text-dark); margin-bottom: 14px; line-height: 1.45; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; }
    .pl-card:hover .pl-card-name { color: var(--primary-blue,#0a5fff); }
    .pl-card-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--primary-blue,#0a5fff); padding: 8px 24px; border: 1px solid var(--primary-blue,#0a5fff); border-radius: 50px; transition: var(--transition); align-self: center; }
    .pl-card:hover .pl-card-btn { background: var(--primary-blue,#0a5fff); color: #fff; }

    /* ===== Pagination ===== */
    .pl-pagination { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border-light); }
    .pl-fenye { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; }
    .pl-fenye a,.pl-fenye span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; font-size: .88rem; font-weight: 500; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-body); transition: var(--transition); text-decoration: none; }
    .pl-fenye a:hover { border-color: var(--primary-blue,#0a5fff); color: var(--primary-blue,#0a5fff); background: var(--primary-light,#eef4ff); }
    .pl-fenye .current,.pl-fenye span.current { background: var(--primary-blue,#0a5fff); color: #fff; border-color: var(--primary-blue,#0a5fff); box-shadow: 0 3px 10px rgba(var(--primary-rgb,10,95,255),.3); }
    .pl-fenye .disabled { color: #9ca3af; background: transparent; border: 1px solid #f3f4f6; cursor: not-allowed; }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    main.main-content { padding-bottom: 0 !important; }

    /* ===== Mobile sidebar heading ===== */
    .mob-sidebar-heading {
        display: none;
    }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    @media (max-width: 1280px) {
        :root { --container-pad: 22px; --pl-sidebar-w: 260px; --pl-gap: 24px; }
    }

    @media (max-width: 991px) {
        :root { --container-pad: 18px; --pl-sidebar-w: 230px; --pl-gap: 20px; }
        .hero-banner { min-height: 340px; }
        .banner-content { padding: 52px 0 68px; }
        .pl-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }

        .sb-rec-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 10px;
        }
    }

    @media (max-width: 767px) {
        :root { --container-pad: 8px; }

        /* ★ KEY: sidebar goes BELOW main content ★ */
        .pl-layout {
            flex-direction: column;
            gap: 0;
            padding: 16px 0 40px;
        }
        .pl-main {
            order: 1;
            width: 100%;
        }
        .pl-sidebar {
            order: 2;
            width: 100%;
            min-width: 100%;
            position: static;
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-top: 36px;
        }

        /* Mobile sidebar heading */
        .mob-sidebar-heading {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 19px;
            font-weight: 700;
            color: var(--text-dark);
            margin: 0 0 16px;
            padding: 0 0 14px;
            border-bottom: 2px solid var(--border-light);
            position: relative;
        }
        .mob-sidebar-heading::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 60px;
            height: 2px;
            background: var(--primary-blue, #0a5fff);
            border-radius: 2px;
        }
        .mob-sidebar-heading svg {
            width: 22px;
            height: 22px;
            color: var(--primary-blue, #0a5fff);
            flex-shrink: 0;
        }

        .sb-block { margin-bottom: 16px; }

        /* Categories collapsed by default on mobile */
        .sb-categories .sb-cat-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease;
        }
        .sb-categories.expanded .sb-cat-list {
            max-height: 2000px;
        }
        .sb-title {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            user-select: none;
            padding: 14px 18px;
            font-size: 1rem;
        }
        .sb-title::after {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(45deg);
            transition: transform .3s;
            flex-shrink: 0;
        }
        .sb-categories.expanded .sb-title::after {
            transform: rotate(-135deg);
        }

        /* ★ Recommended products: 2-column grid (not horizontal scroll) ★ */
        .sb-rec-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            padding: 12px;
            overflow-x: visible;
        }
        .sb-rec-card {
            min-width: 0;
            max-width: none;
            flex-shrink: 1;
        }
        .sb-rec-img {
            aspect-ratio: 4/3;
        }
        .sb-rec-title {
            font-size: .82rem;
            padding: 10px 10px;
        }

        /* Hero */
        .hero-banner { min-height: 280px; }
        .banner-content { padding: 40px 0 56px; }
        .banner-content h1 { font-size: 1.45rem; }
        .banner-content p { font-size: .92rem; margin-bottom: 22px; }
        .cta-button { padding: 12px 28px; font-size: .9rem; }

        .pl-rich-wrap { padding: 0 12px; font-size: .92rem; border-radius: 0; }

        .pl-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
        .pl-card-body { padding: 12px 12px 14px; }
        .pl-card-name { font-size: .86rem; margin-bottom: 10px; }
        .pl-card-btn { font-size: .76rem; padding: 6px 18px; }

        .pl-pagination { margin-top: 24px; }
        .pl-fenye { gap: 5px; }
        .pl-fenye a,.pl-fenye span { min-width: 34px; height: 34px; padding: 0 10px; font-size: .8rem; }

        /* Breadcrumb */
        .breadcrumb-bar { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 0; }
        .popup-search-wrap { width: 100%; }
        .popup-search-wrap:focus-within { width: 100%; }
    }

    @media (max-width: 480px) {
        :root { --container-pad: 6px; }
        .pl-rich-wrap { padding: 0 10px; border-radius: 0; }
        .pl-grid { gap: 8px; }
        .pl-card-img { aspect-ratio: 1/1; }
        .pl-card-body { padding: 10px 10px 12px; }
        .pl-card-name { font-size: .82rem; margin-bottom: 8px; }
        .pl-card-btn { font-size: .72rem; padding: 5px 14px; }

        .sb-rec-list { gap: 8px; padding: 8px; }
        .sb-rec-title { font-size: .76rem; padding: 8px 8px; }
    }

    @media (max-width: 360px) {
        /* Very small screens: single column */
        .pl-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }
        .pl-card-img { aspect-ratio: 4/3; }
        .pl-card-name { font-size: .88rem; }
        .pl-card-btn { font-size: .78rem; padding: 7px 18px; }

        .sb-rec-list {
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 10px;
        }
    }

    @media print {
        .pl-sidebar, .popup-search-wrap, .hero-banner, .pl-pagination { display: none !important; }
        .pl-layout { display: block; }
        .pl-grid { grid-template-columns: repeat(2,1fr); }
    }
.sb-cat-link-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.sb-cat-link-wrap .sb-cat-link {
    flex: 1;
    min-width: 0;
}
.sb-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}
.sb-toggle-btn .sb-arrow {
    transition: transform 0.3s ease;
}
.sb-cat-item.open > .sb-cat-link-wrap .sb-arrow {
    transform: rotate(90deg);
}
    .iq-status-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.72);
        z-index: 999999;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .iq-status-overlay.is-visible {
        display: flex;
    }
    .iq-status-box {
        background: #fff;
        padding: 44px 32px 36px;
        border-radius: 18px;
        text-align: center;
        max-width: 380px;
        width: 88%;
        min-width: 260px;
        box-shadow: 0 30px 90px rgba(0,0,0,0.32);
        animation: iqBoxPop .38s cubic-bezier(.34,1.56,.64,1);
        box-sizing: border-box;
    }
    @keyframes iqBoxPop {
        0% { transform: scale(0.65) translateY(30px); opacity: 0; }
        100% { transform: scale(1) translateY(0); opacity: 1; }
    }
    .iq-status-box * { box-sizing: border-box; }
    .iq-spinner {
        width: 54px; height: 54px;
        border: 5px solid #e8edf2;
        border-top-color: #007bff;
        border-radius: 50%;
        animation: iqSpinR .75s linear infinite;
        margin: 0 auto 24px;
    }
    @keyframes iqSpinR { to { transform: rotate(360deg); } }
    .iq-progress { width: 100%; height: 4px; background: #edf0f4; border-radius: 3px; margin-top: 20px; overflow: hidden; }
    .iq-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg,#007bff,#28a745); border-radius: 3px; transition: width .35s ease; }
    .iq-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; line-height: 1.4; }
    .iq-desc { font-size: 13px; color: #6c757d; margin: 0; line-height: 1.55; }
    .iq-countdown { font-size: 12px; color: #adb5bd; margin-top: 12px; }
    .iq-icon-ok { width: 64px; height: 64px; margin: 0 auto 20px; }
    .iq-icon-ok .iq-cir {
        fill: none; stroke: #28a745; stroke-width: 3;
        stroke-dasharray: 166; stroke-dashoffset: 166;
        animation: iqDraw .6s ease forwards;
    }
    .iq-icon-ok .iq-chk {
        fill: none; stroke: #28a745; stroke-width: 3;
        stroke-linecap: round; stroke-linejoin: round;
        stroke-dasharray: 48; stroke-dashoffset: 48;
        animation: iqDraw .4s .45s ease forwards;
    }
    @keyframes iqDraw { to { stroke-dashoffset: 0; } }
    .iq-icon-err { width: 64px; height: 64px; margin: 0 auto 20px; }
    .iq-icon-err .iq-cir {
        fill: none; stroke: #dc3545; stroke-width: 3;
        stroke-dasharray: 166; stroke-dashoffset: 166;
        animation: iqDraw .6s ease forwards;
    }
    .iq-icon-err .iq-x {
        fill: none; stroke: #dc3545; stroke-width: 3; stroke-linecap: round;
        stroke-dasharray: 22; stroke-dashoffset: 22;
        animation: iqDraw .32s .5s ease forwards;
    }
    .iq-err-detail {
        font-size: 12px; color: #dc3545; margin: 12px 0 0;
        line-height: 1.55; max-height: 100px; overflow-y: auto;
        word-break: break-word; padding: 0 6px;
    }
    .iq-retry-btn {
        display: inline-block; margin-top: 20px; padding: 11px 40px;
        background: #007bff; color: #fff; border: none; border-radius: 7px;
        font-size: 15px; cursor: pointer; transition: background .2s, transform .1s;
        font-weight: 600; letter-spacing: .3px;
    }
    .iq-retry-btn:hover { background: #0056b3; }
    .iq-retry-btn:active { transform: scale(.97); }
    @media (max-width: 480px) {
        .iq-status-box { padding: 32px 20px 28px; }
        .iq-title { font-size: 16px; }
    }
.sb-cat-item.has-sub .sb-arrow {
    padding: 6px;
    margin: -6px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}