:root {
    --ink: #18212f;
    --muted: #687386;
    --line: #d9e1ea;
    --paper: #f7f9fc;
    --panel: #ffffff;
    --brand: #0b73c7;
    --brand-dark: #075a9d;
    --accent: #d71920;
    --danger: #b42318;
    --ok: #16704a;
    --shadow: 0 10px 30px rgba(24, 33, 47, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: #111;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    line-height: 1.55;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

input, textarea, select, button {
    font: inherit;
}

input, textarea, select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
}

textarea { min-height: 92px; resize: vertical; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
[hidden] { display: none !important; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 14px clamp(16px, 4vw, 48px);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.site-shell {
    background: #111;
}

.admin-shell,
.install,
.login-page {
    background: var(--paper);
}

.site-top,
.site-container {
    width: min(1180px, calc(100% - 28px));
    margin-left: auto;
    margin-right: auto;
    background: #fff;
}

.site-top {
    margin-top: 0;
}

.top-strip {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    min-height: 38px;
    padding: 0 16px;
    align-items: center;
    color: #f7f7f7;
    background: #2a2a2a;
    font-size: 13px;
}

.masthead {
    display: grid;
    grid-template-columns: 220px auto minmax(260px, 400px);
    gap: 28px;
    align-items: center;
    padding: 26px 18px 10px;
}

.brand-logo {
    display: grid;
    gap: 2px;
    color: #d71920;
    line-height: 1;
}

.brand-logo strong {
    display: block;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #d71920;
    text-shadow: 1px 1px 0 #ffe1a4, 2px 2px 0 #7d3814;
}

.brand-logo em {
    width: max-content;
    padding: 3px 11px;
    border-radius: 999px;
    background: #d71920;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0;
}

.main-nav {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.main-nav a {
    display: inline-flex;
    min-width: 104px;
    height: 43px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: #888;
    color: #fff;
    font-size: 14px;
}

.main-nav a:first-child {
    background: var(--brand);
}

.main-nav a:hover {
    background: var(--brand-dark);
    color: #fff;
}

.head-search {
    display: grid;
    grid-template-columns: 1fr 74px;
    gap: 8px;
    padding: 8px;
    border: 1px solid #f0f0f0;
    background: #fafafa;
}

.head-search input {
    height: 34px;
    border-radius: 0;
    padding: 6px 9px;
}

.head-search button,
.search-btn {
    border: 0;
    border-radius: 0;
    background: #c80000;
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

.library-banner {
    height: 320px;
    margin: 0 6px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    background:
        radial-gradient(circle at 18% 58%, rgba(224, 192, 150, .54), transparent 23%),
        radial-gradient(circle at 78% 48%, rgba(104, 132, 160, .35), transparent 26%),
        linear-gradient(100deg, #efe6d6 0%, #f7f2e8 46%, #d7dde6 100%);
}

.library-banner div {
    min-width: 310px;
    padding: 20px 34px;
    text-align: center;
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(255, 255, 255, .75);
}

.library-banner strong {
    display: block;
    margin-bottom: 8px;
    color: #9c2d16;
    font-size: 34px;
    font-weight: 900;
    text-shadow: 1px 1px 0 #fff1a8;
}

.library-banner span {
    color: #946100;
    font-weight: 800;
}

.site-container {
    padding: 6px;
    margin-bottom: 0;
}

.notice-lines {
    padding: 16px 22px;
    border: 1px solid #f0f5e8;
    background: #fff;
    color: #83b253;
    font-size: 13px;
}

.notice-lines p {
    margin: 6px 0;
}

.category-panel,
.search-panel,
.package-bar {
    margin-top: 8px;
    padding: 12px 20px;
    border: 1px solid #f0f0f0;
    background: #fff;
}

.category-row {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    min-height: 40px;
    border-bottom: 1px dotted #ececec;
    font-size: 13px;
}

.category-row:last-child {
    border-bottom: 0;
}

.category-row b {
    color: #333;
}

.category-row a {
    padding: 5px 8px;
    color: #999;
}

.category-row a.active,
.category-row a:hover {
    border: 1px solid #f0a235;
    color: #f08b00;
}

.package-bar {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    align-items: stretch;
}

.bar-title {
    display: grid;
    place-items: center;
    color: #d71920;
    font-weight: 900;
    border-right: 1px solid #eee;
}

.package-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.package-pill {
    padding: 10px 12px;
    border: 1px solid #eee;
    background: #fffdf8;
}

.package-pill h3 {
    margin: 0 0 5px;
    font-size: 15px;
}

.package-pill strong {
    display: block;
    color: #d71920;
    font-size: 18px;
}

.package-pill p {
    margin: 4px 0 0;
    color: #777;
    font-size: 12px;
}

.table-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 10px 16px;
    border: 1px solid #ededed;
    border-bottom: 0;
    background: #fff;
    color: #666;
    font-size: 14px;
}

.table-title span {
    font-weight: 800;
}

.table-title em {
    color: #999;
    font-style: normal;
}

.library-search {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(100px, 1fr)) 76px 56px;
    gap: 8px;
    align-items: center;
}

.library-search input {
    height: 34px;
    border-radius: 0;
    padding: 6px 9px;
}

.search-btn {
    height: 34px;
}

.reset-link {
    display: inline-flex;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    color: #777;
    background: #fafafa;
}

.release-wrap {
    border-radius: 0;
    border-color: #ededed;
    box-shadow: none;
    overflow-x: hidden;
}

.release-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 13px;
}

.release-table .col-name { width: 55%; }
.release-table .col-date { width: 92px; }
.release-table .col-type { width: 86px; }
.release-table .col-ratio { width: 84px; }
.release-table .col-demo { width: 92px; }
.release-table .col-price { width: 86px; }
.release-table .col-detail { width: 88px; }

.release-table th,
.release-table td {
    padding: 9px 10px;
    border: 1px solid #ededed;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

.release-table th {
    height: 42px;
    background: linear-gradient(#fbfbfb, #f4f4f4);
    color: #777;
    font-size: 14px;
    font-weight: 800;
}

.release-table td:first-child,
.release-table th:first-child {
    text-align: left;
}

.release-name {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 800;
    white-space: normal;
    line-height: 1.55;
    max-height: 42px;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.color-0 { color: #1586a8; }
.color-1 { color: #6ea22e; }
.color-2 { color: #b11926; }
.color-3 { color: #4a8d25; }
.color-4 { color: #2f76ad; }
.color-5 { color: #c77700; }

.date-cell {
    color: #777;
    white-space: nowrap;
}

.demo-link {
    color: #d455bd;
    white-space: nowrap;
}

.price-cell {
    color: #e40000;
    font-weight: 900;
    white-space: nowrap;
}

.detail-link {
    color: #138300;
    font-weight: 800;
    white-space: nowrap;
}

.crumb {
    margin-top: 8px;
    padding: 12px 20px;
    border: 1px solid #eee;
    color: #777;
    background: #fff;
    font-size: 13px;
}

.crumb span {
    margin-left: 28px;
}

.release-detail {
    border-radius: 0;
    box-shadow: none;
}

.release-detail h1 {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid #eee;
    color: #c01824;
    font-size: 20px;
    line-height: 1.5;
}

.detail-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-actions {
    margin: 14px 0;
}

.version-intro {
    padding: 18px;
    border: 1px solid #eee;
    color: #555;
    background: #fff;
}

.version-intro h2 {
    margin: 0 0 10px;
    color: #555;
    font-size: 16px;
}

.logo {
    color: var(--ink);
    font-weight: 800;
    font-size: 20px;
}

.topbar nav,
.actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.container {
    width: min(1180px, calc(100% - 32px));
    margin: 28px auto 64px;
}

.hero-board,
.panel,
.filter-panel,
.detail-panel,
.price-card,
.login-card,
.install-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.hero-board {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 34px;
    border-top: 4px solid var(--brand);
}

.hero-board h1,
.detail-panel h1,
.install h1,
.admin-head h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
}

.hero-board p,
.detail-panel p,
.muted {
    color: var(--muted);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

.section-head,
.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin: 30px 0 14px;
}

.section-head h2,
.admin-head h1 {
    margin: 0;
}

.section-head span,
.admin-head p {
    color: var(--muted);
    margin: 0;
}

.price-grid,
.stat-grid,
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.price-card {
    padding: 20px;
}

.price-card h3 {
    margin: 0 0 12px;
}

.price {
    color: var(--brand-dark);
    font-size: 32px;
    font-weight: 900;
}

.btn,
.mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
}

.btn { min-height: 42px; padding: 10px 16px; }
.mini-btn { min-height: 32px; padding: 6px 10px; font-size: 13px; }
.btn:hover, .mini-btn:hover { background: var(--brand-dark); color: #fff; }
.btn.secondary { background: #e9eef5; color: var(--ink); }
.btn.full { width: 100%; }
.mini-btn.danger { background: var(--danger); }
.inline-form { display: inline; }
.mini-btn.secondary { background: #e9eef5; color: var(--ink); }
.mini-btn.disabled { background: #eef2f7; color: #9aa8ba; cursor: not-allowed; pointer-events: none; }
.admin-filter-bar, .admin-bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-filter-bar input { min-width: 220px; flex: 1 1 260px; }
.admin-filter-bar select, .admin-bulk-bar select { min-width: 140px; }
.admin-bulk-bar span { color: var(--muted); font-size: 12px; }
.admin-table .check-cell { width: 42px; text-align: center; }
.admin-table .check-cell input { width: 16px; height: 16px; }
.admin-row-actions { white-space: nowrap; }

.table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.pagination a {
    min-width: 34px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    text-align: center;
}

.pagination a.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    background: #edf3f8;
    color: #3f4b5f;
    font-size: 13px;
}

.version-table {
    min-width: 920px;
}

.intro-cell {
    max-width: 420px;
}

.strong {
    font-weight: 800;
}

.filter-panel,
.detail-panel,
.panel {
    padding: 22px;
    margin-bottom: 20px;
}

.filter-form,
.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.wide { grid-column: 1 / -1; }

.upload-progress-wrap { padding: 10px 0 2px; }
.upload-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #e7eef7; }
.upload-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: #2675d8; transition: width .15s ease; }
.upload-progress-text { margin: 7px 0 0; color: #64758c; font-size: 12px; }
.admin-check-line { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #dbe6f4; border-radius: 8px; background: #fff; color: #40536d; }
.admin-main .form-grid .admin-check-line input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }

.recognition-process {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(19, 37, 62, .28);
    backdrop-filter: blur(3px);
}
.recognition-process-dialog {
    width: min(440px, 100%);
    min-height: 112px;
    padding: 22px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid #dce7f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(24, 53, 91, .2);
}
.recognition-process-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf3ff;
}
.recognition-process-icon span {
    width: 22px;
    height: 22px;
    border: 3px solid #a8c8ee;
    border-top-color: #2675d8;
    border-radius: 50%;
    animation: recognition-spin .85s linear infinite;
}
.recognition-process strong { display: block; color: #203858; font-size: 16px; }
.recognition-process p { margin: 6px 0 0; color: #74859c; font-size: 12px; }
.recognition-process-dots { display: flex; gap: 4px; align-self: end; padding-bottom: 4px; }
.recognition-process-dots i { width: 5px; height: 5px; border-radius: 50%; background: #8eb9eb; animation: recognition-dot 1.1s ease-in-out infinite; }
.recognition-process-dots i:nth-child(2) { animation-delay: .16s; }
.recognition-process-dots i:nth-child(3) { animation-delay: .32s; }
.recognition-process.is-complete .recognition-process-icon { background: #e9f8ef; }
.recognition-process.is-complete .recognition-process-icon span { border: 0; animation: none; }
.recognition-process.is-complete .recognition-process-icon span::after { content: '\2713'; color: #24915b; font-size: 24px; font-weight: 700; }
.recognition-process.is-error .recognition-process-icon { background: #fff0ed; }
.recognition-process.is-error .recognition-process-icon span { border: 0; animation: none; }
.recognition-process.is-error .recognition-process-icon span::after { content: '!'; color: #c9473d; font-size: 24px; font-weight: 700; }
.recognition-streaming { border-color: #74a9e8 !important; box-shadow: 0 0 0 3px rgba(38, 117, 216, .1); background-image: linear-gradient(90deg, rgba(38,117,216,.04), transparent); }
@keyframes recognition-spin { to { transform: rotate(360deg); } }
@keyframes recognition-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.meta-grid div,
.delivery,
.stat,
.check {
    padding: 14px;
    background: #f6f9fb;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.meta-grid dt {
    color: var(--muted);
    font-size: 13px;
}

.meta-grid dd {
    margin: 4px 0 0;
    font-weight: 800;
}

.buy-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.empty,
.notice {
    padding: 14px;
    border-radius: 8px;
    background: #eef6f7;
    color: var(--brand-dark);
}

.notice.error,
.check.bad {
    background: #fff0ed;
    color: var(--danger);
}

.notice.success,
.check.ok {
    background: #effaf4;
    color: var(--ok);
}

.install,
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.install-panel {
    width: min(980px, 100%);
    padding: 28px;
}

.login-card {
    width: min(420px, 100%);
    padding: 28px;
    display: grid;
    gap: 14px;
}

.codebox {
    min-height: 180px;
    font-family: Consolas, monospace;
}

.admin-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 100vh;
}

.admin-sidebar {
    background: #14202e;
    color: #fff;
    padding: 22px;
}

.admin-sidebar .brand {
    font-weight: 900;
    margin-bottom: 22px;
}

.admin-sidebar nav {
    display: grid;
    gap: 8px;
}

.admin-sidebar a {
    color: #d7e2ef;
    padding: 10px 12px;
    border-radius: 6px;
}

.admin-sidebar a.active,
.admin-sidebar a:hover {
    background: #203349;
    color: #fff;
}

.admin-main {
    padding: 28px;
    overflow-x: hidden;
}

.admin-table input,
.admin-table textarea,
.admin-table select {
    min-width: 120px;
}

.stat strong {
    display: block;
    font-size: 32px;
}

.stat span {
    color: var(--muted);
}

.check span {
    display: inline-block;
    margin-right: 8px;
    font-weight: 800;
}

@media (max-width: 820px) {
    .site-top,
    .site-container {
        width: 100%;
    }

    .top-strip,
    .masthead,
    .package-bar,
    .library-search,
    .detail-meta {
        grid-template-columns: 1fr;
    }

    .top-strip {
        display: grid;
        padding: 8px 12px;
    }

    .masthead {
        gap: 14px;
        padding: 18px 12px 10px;
    }

    .brand-logo strong {
        font-size: 30px;
    }

    .main-nav {
        gap: 8px;
    }

    .main-nav a {
        min-width: 0;
        flex: 1 1 96px;
    }

    .library-banner {
        height: 210px;
    }

    .library-banner strong {
        font-size: 28px;
    }

    .category-panel,
    .search-panel,
    .package-bar,
    .notice-lines {
        padding: 12px;
    }

    .bar-title {
        min-height: 36px;
        border-right: 0;
        border-bottom: 1px solid #eee;
    }

    .release-wrap {
        overflow-x: auto;
    }

    .release-table {
        min-width: 760px;
    }

    .release-table .col-name { width: 330px; }

    .hero-board,
    .buy-box,
    .section-head {
        display: grid;
    }

    .filter-form,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
    }

    .admin-sidebar nav,
    .topbar {
        display: grid;
    }
}

/* Front library refresh */
body.site-shell,
.site-shell {
    background: #f5f8fd;
    color: #152746;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

.front-header {
    position: relative;
    z-index: 4;
    border-bottom: 1px solid #e8eef7;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
}

.front-header-inner,
.front-content {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.front-header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.front-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #12233f;
}

.front-brand:hover { color: #12233f; }

.front-brand > span:last-child { display: grid; gap: 2px; }
.front-brand strong { font-size: 18px; line-height: 1.2; letter-spacing: 0; }
.front-brand small { color: #8b9ab0; font-size: 11px; }

.front-brand-mark {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 3px;
    padding: 7px;
    border-radius: 10px;
    background: #eaf3ff;
}

.front-brand-mark i { width: 4px; border-radius: 4px; background: #2878e8; }
.front-brand-mark i:first-child { height: 10px; opacity: .6; }
.front-brand-mark i:nth-child(2) { height: 15px; }
.front-brand-mark i:last-child { height: 20px; opacity: .8; }

.front-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.front-nav a { position: relative; padding: 28px 0 25px; color: #64748b; font-size: 14px; }
.front-nav a:hover, .front-nav a.active { color: #1e69d2; }
.front-nav a.active:after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #2878e8; }
.front-nav-action { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid #d7e7fb; border-radius: 7px; color: #2878e8; font-size: 13px; font-weight: 700; }
.front-nav-action:hover { background: #eef5ff; color: #1b63c4; }
.front-nav-action b, .front-primary-button b, .front-detail-link b { font-size: 16px; font-weight: 400; }

.front-page { min-height: calc(100vh - 76px); overflow: hidden; }
.front-hero { width: min(1180px, calc(100% - 40px)); min-height: 470px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: 56px; align-items: center; }
.front-hero-copy { padding: 56px 0 42px; }
.front-eyebrow { display: inline-block; color: #2878e8; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.front-hero h1 { margin: 14px 0 12px; color: #12233f; font-size: clamp(38px, 5vw, 62px); line-height: 1.08; letter-spacing: 0; }
.front-hero-copy > p { margin: 0; color: #6c7d95; font-size: 18px; }
.front-benefits { display: flex; gap: 28px; margin: 30px 0; flex-wrap: wrap; }
.front-benefits span { display: inline-flex; align-items: center; gap: 7px; color: #41546f; font-size: 13px; }
.front-benefits b { color: #2878e8; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.front-primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 7px; background: #2878e8; color: #fff; box-shadow: 0 8px 18px rgba(40, 120, 232, .18); font-size: 13px; font-weight: 700; }
.front-primary-button:hover { background: #1d68d0; color: #fff; transform: translateY(-1px); }

.front-hero-visual { position: relative; min-height: 330px; display: grid; place-items: center; }
.visual-glow { position: absolute; width: 360px; height: 260px; border-radius: 50%; background: #eaf3ff; filter: blur(2px); }
.visual-window { position: relative; z-index: 1; width: min(500px, 100%); overflow: hidden; border: 1px solid #dbe8f8; border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: 0 22px 50px rgba(66, 111, 165, .16); transform: rotate(-2deg); }
.visual-window-bar { display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 15px; border-bottom: 1px solid #eaf0f7; background: #fbfdff; }
.visual-window-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d9e6f6; }
.visual-window-bar span { margin-left: 9px; color: #a1afc0; font-size: 9px; letter-spacing: 1.5px; }
.visual-window-body { display: grid; grid-template-columns: 74px 1fr; min-height: 260px; }
.visual-side { display: grid; align-content: start; gap: 18px; padding: 24px 20px; border-right: 1px solid #edf2f8; background: #f7faff; }
.visual-side b { width: 27px; height: 7px; border-radius: 4px; background: #d9e7f8; }
.visual-side b:first-child { width: 33px; background: #7db2f1; }
.visual-content { padding: 27px 30px; }
.visual-label { color: #8da1bc; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.visual-content > strong { display: block; margin: 6px 0 19px; color: #1c5fab; font-size: 38px; line-height: 1; }
.visual-content > strong span { color: #162e51; }
.visual-line { width: 63%; height: 7px; margin-bottom: 8px; border-radius: 4px; background: #e2ecf8; }
.visual-line.wide { width: 82%; background: #b9d6f8; }
.visual-line.short { width: 38%; }
.visual-row { display: grid; grid-template-columns: 10px 1fr 34px; gap: 9px; align-items: center; margin-top: 20px; }
.visual-row i { width: 10px; height: 10px; border-radius: 3px; background: #4b9bf1; }
.visual-row span, .visual-row em { height: 6px; border-radius: 4px; background: #e3edf8; }
.visual-row em { background: #c9e1fb; }
.visual-float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #e4edf8; border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 12px 28px rgba(55, 100, 150, .12); color: #647a99; font-size: 11px; }
.visual-float-top { top: 30px; right: 8px; color: #36a175; }
.visual-float-top:first-letter { color: #40bb84; }
.visual-float-bottom { bottom: 25px; left: 4px; }
.visual-float-bottom b { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; color: #fff; background: #2878e8; font-size: 12px; }

.front-content { padding: 62px 0 0; }
.front-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.front-section-heading h2, .front-page-title h1 { margin: 7px 0 0; color: #152746; font-size: 28px; letter-spacing: 0; }
.front-section-heading p, .front-page-title p { margin: 7px 0 0; color: #8290a4; font-size: 13px; }
.front-section-heading > a { color: #2878e8; font-size: 13px; font-weight: 700; }
.front-section-heading > a b { margin-left: 8px; font-size: 16px; font-weight: 400; }
.front-filter { display: grid; grid-template-columns: minmax(240px, 1.35fr) minmax(145px, .7fr) minmax(145px, .7fr) minmax(200px, 1fr) 74px; gap: 10px; align-items: end; padding: 14px; border: 1px solid #e4ecf6; border-radius: 10px; background: #fff; box-shadow: 0 9px 24px rgba(59, 95, 137, .05); }
.front-filter label { display: grid; gap: 6px; color: #8a99ad; font-size: 11px; }
.front-filter input, .front-filter select { height: 38px; padding: 0 11px; border: 1px solid #e1eaf4; border-radius: 6px; color: #263b5b; outline: none; font-size: 13px; }
.front-filter input:focus, .front-filter select:focus { border-color: #7db2f1; box-shadow: 0 0 0 3px #eef5ff; }
.front-search-field { position: relative; align-self: end; }
.front-search-field > span { position: absolute; z-index: 1; left: 11px; bottom: 8px; color: #7198c9; font-size: 19px; line-height: 1; }
.front-search-field input { padding-left: 34px; }
.front-price-range { display: grid; grid-template-columns: 1fr 10px 1fr; gap: 5px; align-items: center; }
.front-price-range i { color: #b1bece; font-style: normal; text-align: center; }
.front-filter > button { height: 38px; border: 0; border-radius: 6px; background: #2878e8; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.front-filter > button:hover { background: #1d68d0; }
.front-filter > button b { margin-left: 5px; font-size: 15px; font-weight: 400; }

.front-release-section { padding-top: 72px; }
.front-result-count, .front-library-toolbar > span { color: #9aa8ba; font-size: 12px; }
.front-table-scroll { overflow-x: auto; border: 1px solid #e3ebf5; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(45, 82, 124, .05); }
.front-release-table { min-width: 1040px; table-layout: fixed; }
.front-release-table th { padding: 15px 14px; border-bottom: 1px solid #e4ecf6; background: #fbfdff; color: #8a99ad; font-size: 11px; font-weight: 700; }
.front-release-table td { padding: 14px; border-bottom: 1px solid #eef3f8; color: #52657e; font-size: 12px; vertical-align: middle; }
.front-release-table tr:last-child td { border-bottom: 0; }
.front-release-table tr:hover td { background: #fbfdff; }
.front-release-table th:first-child, .front-release-table td:first-child { width: 36%; text-align: left; }
.front-release-table th:nth-child(2) { width: 10%; }
.front-release-table th:nth-child(3) { width: 10%; }
.front-release-table th:nth-child(4) { width: 9%; }
.front-release-table th:nth-child(5) { width: 10%; }
.front-release-table th:nth-child(6) { width: 9%; }
.front-release-table th:nth-child(7) { width: 9%; }
.front-release-table th:nth-child(8) { width: 11%; }
.front-release-name { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: start; color: #1e3659; }
.front-release-name:hover { color: #1d68d0; }
.front-version-code { display: inline-grid; place-items: center; width: 38px; height: 25px; border-radius: 5px; background: #eef5ff; color: #2878e8; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.front-release-name > span:last-child { min-width: 0; }
.front-release-name strong { display: block; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.front-release-name small { display: block; overflow: hidden; margin-top: 4px; color: #8998ab; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.front-release-name em { display: flex; gap: 6px; margin-top: 7px; font-style: normal; }
.front-release-name em i { padding: 2px 6px; border-radius: 4px; background: #f4f7fb; color: #8291a5; font-size: 10px; font-style: normal; }
.front-tag { display: inline-block; padding: 4px 7px; border-radius: 4px; font-size: 10px; white-space: nowrap; }
.front-tag-blue { background: #eef5ff; color: #357ed8; }
.front-engine { color: #687d98; font-size: 11px; white-space: nowrap; }
.front-ratio { color: #46627f; font-weight: 700; white-space: nowrap; }
.front-demo-link { color: #2878e8; font-size: 11px; white-space: nowrap; }
.front-price { color: #c7353b !important; font-size: 14px !important; font-weight: 800; white-space: nowrap; }
.front-date, .front-muted { color: #9aa8ba !important; white-space: nowrap; }
.front-detail-link { color: #2878e8; font-size: 11px; font-weight: 700; white-space: nowrap; }
.front-detail-link b { margin-left: 4px; }
.front-empty { padding: 42px 20px; color: #8c9aab; text-align: center; }
.front-pagination { display: flex; gap: 7px; justify-content: center; margin-top: 22px; }
.front-pagination a { display: grid; place-items: center; min-width: 32px; height: 32px; border: 1px solid #e1eaf4; border-radius: 6px; background: #fff; color: #71849d; font-size: 12px; }
.front-pagination a.active, .front-pagination a:hover { border-color: #2878e8; background: #2878e8; color: #fff; }

.front-package-section { padding-bottom: 4px; }
.front-package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.front-package { padding: 22px; border: 1px solid #e4ecf6; border-radius: 9px; background: #fff; box-shadow: 0 9px 24px rgba(59, 95, 137, .04); }
.front-package > span { color: #627895; font-size: 13px; font-weight: 700; }
.front-package strong { display: block; margin-top: 13px; color: #1b5fab; font-size: 28px; }
.front-package strong small { margin-right: 2px; color: #7d9bc0; font-size: 14px; }
.front-package p { min-height: 42px; margin: 10px 0 0; color: #8a99ad; font-size: 12px; }
.front-services { margin-top: 70px; padding: 58px 0 56px; border-top: 1px solid #e4ecf6; background: #fff; }
.front-service-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.front-service-grid article { min-height: 128px; padding: 18px 16px; border: 1px solid #e8eef6; border-radius: 8px; background: #fbfdff; }
.front-service-icon { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 16px; border-radius: 7px; background: #eef5ff; color: #2878e8; font-size: 17px; }
.front-service-grid strong { color: #2c4260; font-size: 13px; }
.front-service-grid p { margin: 6px 0 0; color: #8b99aa; font-size: 11px; }
.front-contact { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 42px; padding: 25px 28px; border-radius: 10px; background: #f1f6fd; }
.front-contact h3 { margin: 8px 0 3px; color: #1c3355; font-size: 20px; }
.front-contact p { margin: 0; color: #8090a5; font-size: 12px; }
.front-contact-list { display: flex; align-items: center; gap: 18px; }
.front-contact-list span { display: grid; gap: 3px; color: #526a89; font-size: 12px; }
.front-contact-list span b { color: #91a0b2; font-size: 10px; font-weight: 400; }
.front-contact-list a { display: inline-flex; gap: 8px; align-items: center; color: #2878e8; font-size: 12px; font-weight: 700; }

.front-page-title { padding-top: 54px; }
.front-page-title h1 { font-size: 36px; }
.front-library-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 32px 0 16px; }
.front-library-toolbar h2 { margin: 0; color: #1d3354; font-size: 21px; }
.front-library-toolbar + .front-filter { margin-bottom: 18px; }
.front-detail-page { padding-top: 46px; padding-bottom: 80px; }
.front-back-link { color: #71849d; font-size: 12px; }
.front-detail-header { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: start; margin-top: 32px; padding-bottom: 28px; border-bottom: 1px solid #e1eaf4; }
.front-detail-header h1 { margin: 8px 0 7px; color: #172c4b; font-size: 34px; }
.front-detail-header p { max-width: 680px; margin: 0; color: #8290a4; font-size: 13px; }
.front-detail-price { color: #c7353b; font-size: 28px; white-space: nowrap; }
.front-detail-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 24px 0; }
.front-detail-meta span { display: grid; gap: 6px; padding: 14px; border-radius: 7px; background: #f3f7fc; }
.front-detail-meta small { color: #8b9aae; font-size: 11px; }
.front-detail-meta b { color: #2f4768; font-size: 14px; }
.front-detail-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.front-buy-form { display: flex; gap: 8px; }
.front-buy-form input { width: 180px; height: 44px; padding: 0 12px; border: 1px solid #dfE8f3; border-radius: 7px; font-size: 12px; }
.front-detail-intro { max-width: 850px; margin-top: 35px; padding-top: 24px; border-top: 1px solid #e4ecf6; color: #64758c; font-size: 14px; }
.front-detail-intro h2 { margin: 0 0 14px; color: #203858; font-size: 18px; }
.front-payment-page { max-width: 760px; padding-top: 80px; padding-bottom: 120px; }
.front-payment-page h1 { margin: 10px 0; color: #1d3354; }
.front-payment-page p { color: #76869b; font-size: 13px; }
.front-delivery, .front-notice { margin-top: 25px; padding: 18px; border: 1px solid #dce9f8; border-radius: 8px; background: #fff; }
.front-delivery a { overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .front-hero { grid-template-columns: 1fr; gap: 0; padding-top: 15px; }
    .front-hero-copy { padding-bottom: 20px; }
    .front-hero-visual { min-height: 290px; padding-bottom: 20px; }
    .front-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front-filter .front-search-field, .front-filter > button { grid-column: 1 / -1; }
    .front-package-grid { grid-template-columns: 1fr; }
    .front-service-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .front-header-inner, .front-content, .front-hero { width: min(100% - 28px, 1180px); }
    .front-header-inner { min-height: 68px; gap: 10px; flex-wrap: wrap; padding: 10px 0; }
    .front-brand small, .front-nav-action { display: none; }
    .front-brand strong { font-size: 16px; }
    .front-nav { gap: 14px; }
    .front-nav a { padding: 10px 0; font-size: 12px; }
    .front-nav a.active:after { bottom: 2px; }
    .front-hero { min-height: 0; }
    .front-hero h1 { font-size: 42px; }
    .front-hero-copy > p { font-size: 15px; }
    .front-benefits { gap: 15px; margin: 22px 0; }
    .front-hero-visual { min-height: 240px; transform: scale(.94); }
    .visual-float-top { right: -2px; }
    .visual-float-bottom { left: -3px; }
    .front-content { padding-top: 45px; }
    .front-section-heading { align-items: start; }
    .front-section-heading h2 { font-size: 23px; }
    .front-result-count { padding-top: 24px; }
    .front-filter { grid-template-columns: 1fr; padding: 11px; }
    .front-filter .front-search-field, .front-filter > button { grid-column: auto; }
    .front-price-range { grid-template-columns: 1fr 10px 1fr; }
    .front-release-section { padding-top: 52px; }
    .front-services { margin-top: 52px; padding: 42px 0; }
    .front-service-grid { grid-template-columns: repeat(2, 1fr); }
    .front-contact { display: grid; padding: 20px; }
    .front-contact-list { align-items: start; flex-direction: column; gap: 12px; }
    .front-detail-header { grid-template-columns: 40px 1fr; }
    .front-detail-price { grid-column: 2; }
    .front-detail-header h1 { font-size: 28px; }
    .front-detail-meta { grid-template-columns: repeat(2, 1fr); }
    .front-buy-form { width: 100%; }
    .front-buy-form input { flex: 1; width: auto; }
}

/* Frontend v2: closer to the reference layout */
body {
    background: #eef4fb;
    color: #182235;
    font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
}

.site-shell {
    background: linear-gradient(180deg, #f7faff 0%, #eef4fb 100%);
}

.front-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #e6edf7;
    box-shadow: 0 8px 24px rgba(56, 89, 128, .04);
    backdrop-filter: blur(10px);
}

.front-header-inner {
    width: min(1180px, calc(100% - 32px));
    min-height: 74px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.front-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #132238;
}

.front-brand:hover { color: #132238; }

.front-brand > span:last-child {
    display: grid;
    gap: 2px;
}

.front-brand strong {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
}

.front-brand small {
    color: #8090a8;
    font-size: 12px;
}

.front-brand-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 7px 6px 6px;
    border-radius: 14px;
    background: linear-gradient(180deg, #4f95ff 0%, #2d6fe8 100%);
    box-shadow: 0 10px 18px rgba(45, 111, 232, .18);
}

.front-brand-mark i {
    width: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
}
.front-brand-mark i:first-child { height: 12px; opacity: .7; }
.front-brand-mark i:nth-child(2) { height: 18px; }
.front-brand-mark i:last-child { height: 24px; opacity: .85; }

.front-nav {
    display: flex;
    align-items: center;
    gap: 44px;
    margin-left: auto;
}

.front-nav a {
    position: relative;
    padding: 26px 0 24px;
    color: #556579;
    font-size: 15px;
}

.front-nav a:hover,
.front-nav a.active {
    color: #256fe0;
}

.front-nav a.active:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2f79ea 0%, #62a2ff 100%);
}

.front-nav-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin-left: 4px;
    padding: 0 16px;
    border: 1px solid #d7e6fb;
    border-radius: 10px;
    background: linear-gradient(180deg, #3f86f5 0%, #2c6be5 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(44, 107, 229, .16);
}

.front-nav-action:hover {
    color: #fff;
    transform: translateY(-1px);
}

.front-page {
    padding-bottom: 40px;
}

.front-content,
.front-hero-grid {
    width: min(1180px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.front-hero {
    padding: 26px 0 20px;
    background: linear-gradient(180deg, #edf4ff 0%, #eff5fb 100%);
}

.front-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    gap: 34px;
    align-items: center;
    min-height: 250px;
}

.front-hero-copy {
    padding: 22px 0 18px;
}

.front-eyebrow {
    display: none;
}

.front-hero-copy h1,
.front-page-title h1,
.front-section-heading h2,
.front-library-toolbar h2 {
    margin: 12px 0 8px;
    color: #132238;
    font-weight: 900;
    letter-spacing: 0;
}

.front-hero-copy h1 {
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.12;
}

.front-hero-copy > p {
    margin: 0;
    color: #55657b;
    font-size: 18px;
}

.front-benefits {
    display: flex;
    gap: 22px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.front-benefit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 150px;
}

.front-benefit-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: linear-gradient(180deg, #e9f2ff 0%, #d7e8ff 100%);
    box-shadow: inset 0 0 0 1px rgba(47, 115, 230, .08);
    position: relative;
}

.front-benefit-icon:before,
.front-benefit-icon:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #2f73e6;
    transform: translate(-50%, -50%);
}

.front-benefit-icon:before {
    width: 14px;
    height: 14px;
    border-radius: 5px;
    opacity: .95;
}

.front-benefit-icon:after {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #fff;
}

.front-benefit strong {
    display: block;
    color: #17243a;
    font-size: 15px;
}

.front-benefit small {
    color: #8090a8;
    font-size: 12px;
}

.front-hero-search {
    padding: 22px;
    border: 1px solid #e4edf9;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 40px rgba(62, 94, 138, .08);
}

.front-hero-search-field {
    display: grid;
    grid-template-columns: 1fr 94px;
    gap: 10px;
    align-items: center;
}

.front-hero-search-field input {
    height: 50px;
    padding: 0 16px;
    border: 1px solid #e0e8f4;
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
}

.front-hero-search-field button {
    height: 50px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #4c8ff7 0%, #2f72e6 100%);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 12px 20px rgba(47, 114, 230, .2);
}

.front-hot-search {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    color: #74849b;
    font-size: 13px;
}

.front-hot-search > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.front-hot-search a,
.front-hot-empty {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f2f7ff;
    color: #3a6ed9;
    font-size: 13px;
}

.front-hot-search a:hover {
    background: #e5f0ff;
    color: #235fca;
}

.front-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.front-section-heading h2,
.front-page-title h1 {
    margin-top: 8px;
    font-size: 28px;
}

.front-section-heading p,
.front-page-title p {
    margin: 6px 0 0;
    color: #8090a8;
    font-size: 13px;
}

.front-section-heading > a {
    color: #2f73e6;
    font-size: 13px;
    font-weight: 700;
}

.front-section-heading > a b {
    margin-left: 6px;
    font-weight: 400;
}

.front-filter {
    padding: 18px 20px 10px;
    border: 1px solid #e4edf9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(62, 94, 138, .05);
}

.front-filter-search {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(110px, .62fr) minmax(110px, .62fr) 92px;
    gap: 10px;
    align-items: end;
    margin-bottom: 14px;
}

.front-filter-search label {
    display: grid;
    gap: 6px;
    color: #7b8ca4;
    font-size: 12px;
}

.front-filter-search input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
}

.front-filter-search button {
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #4c8ff7 0%, #2f72e6 100%);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.front-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid #edf2f8;
}

.front-filter-row:first-of-type {
    border-top: 0;
}

.front-filter-label {
    min-width: 72px;
    color: #3f4f67;
    font-weight: 700;
    line-height: 32px;
}

.front-filter-chips {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 10px;
}

.front-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid #dbe6f4;
    border-radius: 999px;
    background: #fff;
    color: #516173;
    font-size: 13px;
}

.front-chip:hover,
.front-chip.active {
    border-color: #2f73e6;
    background: linear-gradient(180deg, #4e92fb 0%, #2f73e6 100%);
    color: #fff;
}

.front-sort-form {
    margin-left: auto;
}

.front-sort-form select {
    width: 140px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
    color: #54657d;
    font-size: 13px;
}

.front-release-section {
    padding-top: 18px;
}

.front-table-scroll {
    overflow-x: auto;
    border: 1px solid #e4edf9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(62, 94, 138, .05);
}

.front-release-table {
    min-width: 1040px;
    table-layout: fixed;
}

.front-release-table th {
    padding: 16px 14px;
    border-bottom: 1px solid #edf2f8;
    background: #fbfdff;
    color: #8b99ac;
    font-size: 12px;
    font-weight: 700;
}

.front-release-table td {
    padding: 15px 14px;
    border-bottom: 1px solid #f0f4fa;
    color: #4f5f75;
    font-size: 12px;
    vertical-align: middle;
}

.front-release-table tr:last-child td {
    border-bottom: 0;
}

.front-release-table tr:hover td {
    background: #fbfdff;
}

.front-release-table th:first-child,
.front-release-table td:first-child {
    width: 35%;
    text-align: left;
}

.front-release-table th:nth-child(2) { width: 10%; }
.front-release-table th:nth-child(3) { width: 10%; }
.front-release-table th:nth-child(4) { width: 9%; }
.front-release-table th:nth-child(5) { width: 10%; }
.front-release-table th:nth-child(6) { width: 9%; }
.front-release-table th:nth-child(7) { width: 10%; }
.front-release-table th:nth-child(8) { width: 10%; }

.front-release-name {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start;
    color: #1a2a44;
}

.front-release-name:hover {
    color: #2f73e6;
}

.front-version-code {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 25px;
    border-radius: 6px;
    background: #eaf2ff;
    color: #2f73e6;
    font-size: 11px;
    font-weight: 800;
}

.front-release-name strong {
    display: block;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.front-release-name small {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #8b99ac;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.front-release-name em {
    display: flex;
    gap: 6px;
    margin-top: 7px;
    font-style: normal;
}

.front-release-name em i {
    padding: 2px 6px;
    border-radius: 4px;
    background: #f4f7fb;
    color: #7d8ea5;
    font-size: 10px;
    font-style: normal;
}

.front-tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    white-space: nowrap;
}

.front-tag-blue {
    background: #eef5ff;
    color: #367de0;
}

.front-engine {
    color: #66798f;
    font-size: 11px;
    white-space: nowrap;
}

.front-ratio {
    color: #445c7a;
    font-weight: 700;
    white-space: nowrap;
}

.front-demo-link {
    color: #2f73e6;
    font-size: 11px;
    white-space: nowrap;
}

.front-price {
    color: #c4353d !important;
    font-size: 14px !important;
    font-weight: 800;
    white-space: nowrap;
}

.front-date,
.front-muted {
    color: #98a7ba !important;
    white-space: nowrap;
}

.front-detail-link {
    color: #2f73e6;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.front-detail-link b {
    margin-left: 4px;
}

.front-empty {
    padding: 42px 20px;
    color: #8c9aab;
    text-align: center;
}

.front-pagination {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-top: 20px;
}

.front-pagination a {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    border: 1px solid #dbe6f4;
    border-radius: 6px;
    background: #fff;
    color: #71849d;
    font-size: 12px;
}

.front-pagination a.active,
.front-pagination a:hover {
    border-color: #2f73e6;
    background: #2f73e6;
    color: #fff;
}

.front-package-section {
    padding-top: 18px;
}

.front-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.front-package {
    padding: 18px 18px 16px;
    border: 1px solid #e4edf9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(62, 94, 138, .04);
}

.front-package > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #61748d;
    font-size: 13px;
    font-weight: 700;
}
.front-package > span em {
    font-style: normal;
    color: #e1475d;
    font-size: 12px;
}

.front-package strong {
    display: block;
    margin-top: 10px;
    color: #1b5fab;
    font-size: 28px;
}

.front-package strong small {
    margin-right: 2px;
    color: #7d9bc0;
    font-size: 14px;
}
.front-package strong i {
    margin-left: 4px;
    color: #7d9bc0;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.front-package p {
    margin: 10px 0 0;
    color: #8a99ad;
    font-size: 12px;
}
.front-package .front-package-renew {
    min-height: 0;
    margin-top: 3px;
}
.front-package ul {
    display: grid;
    gap: 8px;
    min-height: 96px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.front-package li {
    color: #56677d;
    font-size: 12px;
    line-height: 1.45;
}
.front-package li:before {
    content: "✓";
    margin-right: 7px;
    color: #e1475d;
    font-weight: 800;
}
.front-package-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: 16px;
    border: 1px solid #d8e4f4;
    border-radius: 8px;
    color: #2d5fa8;
    font-size: 13px;
    font-weight: 800;
}
.front-package-contact:hover { border-color: #2f73e6; background: #f4f8ff; color: #2f73e6; }

.front-services {
    margin-top: 28px;
    padding: 36px 0 54px;
}

.front-service-band,
.front-contact-band {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 22px;
    align-items: center;
    padding: 24px 26px;
    border: 1px solid #e4edf9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(62, 94, 138, .05);
}

/* Admin product workspace v4 - final overrides */
.admin-shell {
    --admin-bg: #f4f5f7;
    --admin-surface: #ffffff;
    --admin-border: #dfe3e8;
    --admin-border-soft: #eaedf1;
    --admin-text: #171a1f;
    --admin-muted: #697386;
    --admin-accent: #2463eb;
    --admin-accent-hover: #174fc4;
    background: var(--admin-bg);
    color: var(--admin-text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.admin-shell .admin-sidebar {
    width: 232px;
    padding: 20px 12px;
    background: #101216;
}

.admin-shell .admin-brand {
    margin: 0 6px 18px;
    padding: 2px 8px 20px;
}

.admin-shell .admin-menu a,
.admin-shell .admin-exit {
    min-height: 38px;
    border-radius: 6px;
}

.admin-shell .admin-menu a:hover { transform: none; }
.admin-shell .admin-menu a.active {
    border-color: #30394a;
    background: #202633;
    box-shadow: inset 3px 0 0 #4f8cff;
}

.admin-shell .admin-main {
    margin-left: 232px;
    padding: 0 32px 48px;
    background: var(--admin-bg);
}

.admin-topbar {
    min-height: 64px;
    margin: 0 -32px 28px;
    padding: 0 32px;
    background: rgba(255, 255, 255, .94);
}

.admin-topbar strong { font-size: 15px; }
.admin-user-avatar { border-radius: 6px; }

.workspace-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 24px;
}

.workspace-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--admin-accent);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.workspace-header h1 {
    margin: 0;
    color: var(--admin-text);
    font-size: 27px;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.2;
}

.workspace-header p {
    max-width: 680px;
    margin: 7px 0 0;
    color: var(--admin-muted);
    font-size: 13px;
    line-height: 1.6;
}

.workspace-surface,
.admin-shell .admin-card,
.version-stat-card {
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: var(--admin-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
}

.workspace-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.workspace-section-head h2 {
    margin: 0;
    color: #20242b;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}

.workspace-section-head p {
    margin: 4px 0 0;
    color: #8992a1;
    font-size: 11px;
    line-height: 1.5;
}

.metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: var(--admin-surface);
}

.metric-cell {
    min-width: 0;
    padding: 18px 20px;
    border-right: 1px solid var(--admin-border-soft);
}

.metric-cell:last-child { border-right: 0; }
.metric-index { float: right; color: #c1c7d0; font: 10px/1 Consolas, monospace; }
.metric-cell small { display: block; color: #687386; font-size: 11px; font-weight: 650; }
.metric-cell strong { display: block; margin-top: 8px; color: #161a20; font-size: 26px; line-height: 1; }
.metric-cell p { margin: 8px 0 0; color: #9aa2af; font-size: 10px; }

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr);
    gap: 16px;
}

.dashboard-grid > * { padding: 20px; }
.quick-command-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quick-command-list a {
    display: grid;
    min-height: 108px;
    padding: 14px;
    border: 1px solid var(--admin-border-soft);
    border-radius: 6px;
    background: #fafbfc;
    transition: border-color .16s ease, background .16s ease;
}

.quick-command-list a:hover { border-color: #b9c9e9; background: #f7faff; }
.quick-command-list span { color: var(--admin-accent); font-size: 18px; }
.quick-command-list b { align-self: end; color: #202630; font-size: 12px; }
.quick-command-list em { color: #8993a2; font-size: 10px; font-style: normal; }
.health-panel dl { margin: 0; }
.health-panel dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--admin-border-soft); }
.health-panel dt, .health-panel dd { margin: 0; font-size: 11px; }
.health-panel dt { color: #7a8494; }
.health-panel dd { color: #303743; font-weight: 650; }
.health-panel dd i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22a06b; }

.split-workspace {
    display: grid;
    grid-template-columns: minmax(280px, .38fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.compact-editor,
.resource-stack,
.data-surface,
.settings-editor,
.editor-main,
.editor-side { padding: 20px; }

.workspace-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.workspace-fields.one-column { grid-template-columns: 1fr; }
.workspace-fields .span-all { grid-column: 1 / -1; }
.workspace-fields label,
.resource-editor-row label {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    color: #4f5968;
    font-size: 11px;
    font-weight: 650;
}

.workspace-fields input,
.workspace-fields select,
.workspace-fields textarea,
.resource-editor-row input,
.resource-editor-row select,
.resource-editor-row textarea,
.type-editor-row input,
.type-editor-row select,
.admin-shell .admin-filter-bar input,
.admin-shell .admin-filter-bar select,
.admin-shell .admin-bulk-bar select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 39px;
    padding: 0 11px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #fff;
    color: #272d36;
    font: inherit;
    font-weight: 450;
    outline: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.workspace-fields textarea,
.resource-editor-row textarea { min-height: 92px; padding-top: 10px; resize: vertical; }
.workspace-fields input:focus,
.workspace-fields select:focus,
.workspace-fields textarea:focus,
.resource-editor-row input:focus,
.resource-editor-row select:focus,
.resource-editor-row textarea:focus,
.type-editor-row input:focus,
.type-editor-row select:focus {
    border-color: #74a0f5;
    box-shadow: 0 0 0 3px rgba(36, 99, 235, .09);
}

.workspace-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.workspace-form-actions.vertical { display: grid; }
.workspace-form-actions.vertical > * { width: 100%; box-sizing: border-box; }
.admin-shell .btn,
.admin-shell .mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--admin-accent);
    border-radius: 6px;
    background: var(--admin-accent);
    box-shadow: none;
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
}

.admin-shell .btn:hover,
.admin-shell .mini-btn:hover { background: var(--admin-accent-hover); }
.admin-shell .btn.secondary,
.admin-shell .mini-btn.secondary { border-color: #d8dde5; background: #fff; color: #454f5e; }
.admin-shell .btn.secondary:hover,
.admin-shell .mini-btn.secondary:hover { border-color: #bfc7d2; background: #f8f9fb; }
.admin-shell .mini-btn { min-height: 30px; padding: 0 9px; }
.admin-shell .mini-btn.danger { border-color: #f1c9c7; background: #fff; color: #c53b35; }
.admin-shell .mini-btn.danger:hover { background: #fff5f4; }

.resource-editor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--admin-border-soft);
}

.resource-row-main { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr); gap: 10px; }
.resource-row-main textarea { min-height: 62px; }
.resource-row-meta { display: grid; grid-template-columns: 1fr 70px 88px auto; align-items: end; gap: 7px; }
.resource-row-meta input, .resource-row-meta select { height: 34px; }
.workspace-empty { padding: 32px 20px; color: #8b95a4; font-size: 12px; text-align: center; }

.type-editor-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 80px 100px 100px auto;
    align-items: center;
    gap: 9px;
    padding: 11px 0;
    border-top: 1px solid var(--admin-border-soft);
}

.type-editor-row input,
.type-editor-row select { height: 34px; }
.type-editor-row > div { display: flex; gap: 5px; }
.usage-count { color: #828c9b; font-size: 10px; }

.editor-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: 16px;
}

.editor-column { display: grid; gap: 16px; }
.sticky-editor { position: sticky; top: 82px; }
.source-fields > label { min-width: 0; }
.source-fields input[type="file"] { height: auto; min-height: 39px; padding: 7px; }
.admin-check-line { display: flex; align-items: center; gap: 8px; min-height: 39px; }
.admin-check-line input { width: 15px; height: 15px; }
.editor-note { margin-top: 16px; padding: 11px 12px; border-left: 3px solid #7d8da8; background: #f7f8fa; color: #697486; font-size: 10px; line-height: 1.6; }
.publish-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--admin-border-soft); border-bottom: 1px solid var(--admin-border-soft); color: #697486; font-size: 11px; }

.settings-workspace { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 16px; }
.settings-nav { display: grid; gap: 3px; padding: 6px; border: 1px solid var(--admin-border); border-radius: 8px; background: #fff; }
.settings-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 6px; color: #667181; }
.settings-nav a:hover { background: #f6f7f9; }
.settings-nav a.active { background: #edf3ff; color: #1e56bd; }
.settings-nav span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #dfe4ec; border-radius: 5px; background: #fff; font-size: 8px; font-weight: 750; }
.settings-nav b { font-size: 11px; font-weight: 650; }
.settings-fields { max-width: 820px; }
.settings-actions { padding-top: 18px; border-top: 1px solid var(--admin-border-soft); }
.workspace-fields input[type="color"] { width: 64px; padding: 4px; }

.admin-shell .admin-tabs { margin-bottom: 20px; border-radius: 7px; }
.admin-shell .admin-tabs a { border-radius: 5px; }
.version-stat-grid { gap: 10px; }
.version-stat-card { min-height: 102px; padding: 15px; }
.version-stat-card::after { display: none; }
.version-stat-card .stat-icon { border-radius: 6px; }
.admin-shell .admin-card { padding: 18px; }
.admin-shell .admin-filter-bar { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, .35fr)) auto auto; gap: 7px; padding: 10px; border-radius: 7px; }
.admin-shell .admin-bulk-bar { display: flex; align-items: center; gap: 7px; padding: 10px 0; }
.admin-shell .admin-bulk-bar select { width: 150px; height: 34px; }
.admin-shell .table-wrap { border-radius: 7px; }
.admin-shell .admin-table tbody tr:hover { background: #f8faff; box-shadow: inset 2px 0 0 var(--admin-accent); }
.admin-shell .status-badge { border-radius: 999px; }
.data-surface .table-wrap { margin-top: 4px; }
.order-table code { color: #485568; font: 10px Consolas, monospace; }

@media (max-width: 1180px) {
    .resource-editor-row { grid-template-columns: 1fr; }
    .resource-row-meta { grid-template-columns: 1fr 80px 100px auto; }
    .admin-shell .admin-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-cell:nth-child(2) { border-right: 0; }
    .metric-cell:nth-child(-n+2) { border-bottom: 1px solid var(--admin-border-soft); }
    .dashboard-grid,
    .split-workspace,
    .editor-workspace,
    .settings-workspace { grid-template-columns: 1fr; }
    .sticky-editor { position: static; }
    .settings-nav { display: flex; overflow-x: auto; }
    .settings-nav a { flex: 0 0 auto; }
}

@media (max-width: 720px) {
    .admin-shell .admin-main { margin-left: 0; padding: 0 14px 28px; }
    .admin-topbar { margin: 0 -14px 20px; padding: 0 14px; }
    .workspace-header { align-items: flex-start; flex-direction: column; gap: 14px; }
    .workspace-header h1 { font-size: 23px; }
    .metric-strip { grid-template-columns: 1fr 1fr; }
    .metric-cell { padding: 14px; }
    .quick-command-list { grid-template-columns: 1fr; }
    .quick-command-list a { min-height: 76px; }
    .workspace-fields,
    .resource-row-main,
    .resource-row-meta,
    .type-editor-row,
    .admin-shell .admin-filter-bar { grid-template-columns: 1fr; }
    .type-editor-row { align-items: stretch; }
    .version-stat-grid { grid-template-columns: 1fr 1fr; }
    .admin-shell .admin-row-actions { min-width: 190px; }
}

.front-contact-band {
    margin-top: 18px;
}

.front-service-intro h2,
.front-contact-copy h3 {
    margin: 8px 0 8px;
    color: #132238;
}

.front-service-intro p,
.front-contact-copy p {
    margin: 0;
    color: #8090a8;
    font-size: 13px;
}

.front-service-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.front-service-grid article {
    min-height: 112px;
    padding: 8px 10px;
    text-align: center;
}

.front-service-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: #eff5ff;
    color: #2f73e6;
    font-size: 16px;
}

.front-service-grid strong {
    color: #2c4260;
    font-size: 13px;
}

.front-service-grid p {
    margin: 6px 0 0;
    color: #8b99aa;
    font-size: 11px;
}

.front-contact-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
}

.front-contact-list span {
    display: grid;
    gap: 4px;
    color: #526a89;
    font-size: 12px;
}

.front-contact-list span b {
    color: #93a2b6;
    font-size: 10px;
    font-weight: 400;
}

/* Keep the admin design system last in the cascade. */
.admin-shell { background: #f4f5f7; color: #171a1f; }
.admin-shell .admin-sidebar { width: 232px; padding: 20px 12px; background: #101216; }
.admin-shell .admin-brand { margin: 0 6px 18px; padding: 2px 8px 20px; }
.admin-shell .admin-menu a,
.admin-shell .admin-exit { min-height: 38px; border-radius: 6px; }
.admin-shell .admin-menu a:hover { transform: none; }
.admin-shell .admin-menu a.active { border-color: #30394a; border-radius: 6px; background: #202633; box-shadow: inset 3px 0 0 #4f8cff; }
.admin-shell .admin-main { margin-left: 232px; padding: 0 32px 48px; background: #f4f5f7; }
.admin-topbar { min-height: 64px; margin: 0 -32px 28px; padding: 0 32px; }
.admin-topbar strong { font-size: 15px; }
.admin-user-avatar { border-radius: 6px; }
.admin-shell .admin-tabs { margin-bottom: 20px; border-radius: 7px; }
.admin-shell .admin-tabs a { border-radius: 5px; }
.admin-shell .admin-card,
.admin-shell .version-stat-card { border-radius: 8px; box-shadow: 0 1px 2px rgba(16, 24, 40, .035); }
.admin-shell .version-stat-card { min-height: 102px; padding: 15px; }
.admin-shell .version-stat-card::after { display: none; }
.admin-shell .version-stat-card .stat-icon { border-radius: 6px; }
.admin-shell .admin-filter-bar { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, .35fr)) auto auto; gap: 7px; padding: 10px; border-radius: 7px; }
.admin-shell .admin-filter-bar input,
.admin-shell .admin-filter-bar select { border-radius: 6px; }
.admin-shell .table-wrap { border-radius: 7px; }
.admin-shell .admin-table tbody tr:hover { background: #f8faff; box-shadow: inset 2px 0 0 #2463eb; }
.admin-shell .admin-row-actions .mini-btn { border-radius: 6px; }

@media (max-width: 1180px) {
    .admin-shell .admin-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .admin-shell .admin-sidebar { position: relative; width: 100%; }
    .admin-shell .admin-main { margin-left: 0; padding: 0 14px 28px; }
    .admin-topbar { margin: 0 -14px 20px; padding: 0 14px; }
    .admin-shell .admin-filter-bar { grid-template-columns: 1fr; }
}

.front-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px;
    background: linear-gradient(180deg, #4c8ff7 0%, #2f72e6 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 20px rgba(47, 114, 230, .2);
}

.front-contact-button:hover {
    color: #fff;
}

.front-page-title {
    padding-top: 32px;
}

.front-library-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 26px 0 14px;
}

.front-library-toolbar h2 {
    margin: 0;
    font-size: 22px;
}

.front-library-toolbar > span,
.front-result-count {
    color: #98a7ba;
    font-size: 12px;
}

.front-detail-page {
    padding-top: 38px;
    padding-bottom: 76px;
}

.front-back-link {
    color: #71849d;
    font-size: 12px;
}

.front-detail-header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 18px;
    align-items: start;
    margin-top: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e1eaf4;
}

.front-detail-header h1 {
    margin: 8px 0 7px;
    color: #172c4b;
    font-size: 34px;
}

.front-detail-header p {
    max-width: 680px;
    margin: 0;
    color: #8290a4;
    font-size: 13px;
}

.front-detail-price {
    color: #c7353b;
    font-size: 28px;
    white-space: nowrap;
}

.front-detail-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 24px 0;
}

.front-detail-meta span {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 10px;
    background: #f3f7fc;
}

.front-detail-meta small {
    color: #8b9aae;
    font-size: 11px;
}

.front-detail-meta b {
    color: #2f4768;
    font-size: 14px;
}

.front-detail-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.front-buy-form {
    display: flex;
    gap: 8px;
}

.front-buy-form input {
    width: 180px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dfe8f3;
    border-radius: 10px;
    font-size: 12px;
}

.front-detail-intro {
    max-width: 850px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #e4ecf6;
    color: #64758c;
    font-size: 14px;
}

.front-detail-intro h2 {
    margin: 0 0 14px;
    color: #203858;
    font-size: 18px;
}

.front-payment-page {
    max-width: 760px;
    padding-top: 72px;
    padding-bottom: 110px;
}

.front-payment-page h1 {
    margin: 10px 0;
    color: #1d3354;
}

.front-payment-page p {
    color: #76869b;
    font-size: 13px;
}

.front-delivery,
.front-notice {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #dce9f8;
    border-radius: 10px;
    background: #fff;
}

.front-delivery a {
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .front-header-inner {
        gap: 16px;
    }

    .front-nav {
        gap: 22px;
    }

    .front-hero-grid,
    .front-service-band,
    .front-contact-band {
        grid-template-columns: 1fr;
    }

    .front-hero-copy {
        padding-bottom: 0;
    }

    .front-package-grid,
    .front-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-detail-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .front-filter-search {
        grid-template-columns: 1fr 1fr;
    }

    .front-sort-form {
        margin-left: 0;
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .front-header-inner {
        min-height: 68px;
        gap: 10px;
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .front-brand small,
    .front-nav-action {
        display: none;
    }

    .front-brand strong {
        font-size: 16px;
    }

    .front-nav {
        gap: 14px;
    }

    .front-nav a {
        padding: 10px 0;
        font-size: 12px;
    }

    .front-nav a.active:after {
        bottom: 2px;
    }

    .front-hero-copy h1 {
        font-size: 32px;
    }

    .front-hero-copy > p {
        font-size: 15px;
    }

    .front-benefits {
        gap: 12px;
        margin-top: 20px;
    }

    .front-hero-search {
        padding: 16px;
    }

    .front-hero-search-field,
    .front-filter-search,
    .front-filter-row,
    .front-contact-list,
    .front-package-grid,
    .front-service-grid {
        grid-template-columns: 1fr;
    }

    .front-hero-search-field button,
    .front-filter-search button,
    .front-sort-form select {
        width: 100%;
    }

    .front-filter {
        padding: 14px 14px 8px;
    }

    .front-filter-row {
        padding: 10px 0;
    }

    .front-filter-label {
        min-width: 0;
        line-height: 1.4;
    }

    .front-sort-form {
        width: 100%;
    }

    .front-sort-form select {
        width: 100%;
        height: 38px;
    }

    .front-section-heading {
        align-items: start;
    }

    .front-section-heading h2,
    .front-page-title h1 {
        font-size: 22px;
    }

    .front-service-band,
    .front-contact-band {
        padding: 18px;
    }

    .front-detail-header {
        grid-template-columns: 40px 1fr;
    }

    .front-detail-price {
        grid-column: 2;
    }

    .front-detail-header h1 {
        font-size: 28px;
    }

    .front-buy-form {
        width: 100%;
    }

    .front-buy-form input {
        flex: 1;
        width: auto;
    }
}

/* layout fix v3: override earlier hero/filter collisions */
.front-hero {
    display: block;
    min-height: 0;
    padding: 22px 0 22px;
}

.front-hero .front-content,
.front-hero-grid {
    padding-top: 0;
}

.front-hero-grid {
    grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
    gap: 48px;
    align-items: center;
}

.front-hero-copy {
    padding: 8px 0 8px;
}

.front-hero-copy h1 {
    max-width: 540px;
    white-space: normal;
    word-break: keep-all;
    writing-mode: horizontal-tb;
}

.front-hero-search {
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

.front-hero-search-field {
    grid-template-columns: minmax(0, 1fr) 96px;
}

.front-filter {
    display: block;
}

.front-filter-row {
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.front-filter-label {
    min-width: 92px;
    white-space: nowrap;
}

.front-filter-chips {
    min-width: 0;
    flex: 1 1 auto;
}

.front-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

.front-sort-form {
    flex: 0 0 auto;
    margin-left: auto;
}

.front-sort-form select {
    white-space: nowrap;
}

.front-contact-band {
    align-items: center;
}

@media (max-width: 980px) {
    .front-hero-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 640px) {
    .front-filter-row {
        display: block;
    }

    .front-filter-label {
        display: block;
        margin-bottom: 10px;
    }

    .front-sort-form {
        margin-top: 10px;
    }
}

/* layout polish: closer to the reference hero */
.front-hero {
    padding: 14px 0 12px;
}

.front-hero-grid {
    min-height: 196px;
    align-items: start;
    gap: 44px;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
}

.front-hero-copy {
    padding: 18px 0 10px;
}

.front-hero-copy h1 {
    margin-top: 12px;
    max-width: 520px;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.04;
}

.front-hero-copy > p {
    font-size: 15px;
}

.front-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 460px;
    margin-top: 24px;
}

.front-benefit {
    min-width: 0;
    gap: 10px;
}

.front-benefit-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.front-benefit strong {
    font-size: 14px;
}

.front-benefit small {
    font-size: 11px;
}

.front-hero-search {
    width: 100%;
    max-width: 620px;
    justify-self: end;
    align-self: start;
    padding: 18px 20px 16px;
    border-radius: 16px;
}

.front-hero-search-field {
    grid-template-columns: minmax(0, 1fr) 94px;
    gap: 8px;
}

.front-hero-search-field input {
    height: 48px;
    font-size: 14px;
}

.front-hero-search-field button {
    height: 48px;
}

.front-hot-search {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 14px;
}

.front-hot-search > span {
    white-space: nowrap;
}

.front-hot-search a,
.front-hot-empty {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

/* release table polish: closer to the reference screenshot */
.front-release-section {
    padding-top: 14px;
}

.front-table-scroll {
    border-color: #e8eef7;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(62, 94, 138, .04);
}

.front-release-table {
    min-width: 0;
}

.front-release-table th {
    padding: 14px 12px;
    background: #fcfdff;
    color: #111827;
    font-size: 12px;
    font-weight: 400;
}

.front-release-table td {
    padding: 13px 12px;
    border-bottom-color: #eef3f9;
    color: #536274;
    font-size: 12px;
    font-weight: 400;
}

.front-release-table tr:hover td {
    background: #fff;
}

.front-release-name {
    grid-template-columns: 38px 1fr;
    gap: 10px;
}

.front-version-code {
    width: 34px;
    height: 24px;
    border-radius: 5px;
    background: #e9f1ff;
    color: #2e74e6;
    font-size: 11px;
    font-weight: 400;
}

.front-release-name strong {
    font-size: 14px;
    line-height: 1.25;
    font-weight: 400;
}

.front-release-name small {
    margin-top: 3px;
    color: #8e9aac;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 400;
}

.front-tag-blue {
    background: #fff4df;
    color: #e59b2e;
    font-weight: 400;
}

.front-engine {
    color: #38465a;
    font-size: 12px;
    font-weight: 400;
}

.front-ratio {
    color: #1f2f47;
    font-size: 12px;
    font-weight: 400;
}

.front-demo-link {
    color: #c85fb2;
    font-size: 12px;
    font-weight: 400;
}

.front-price {
    color: #d2202f !important;
    font-size: 16px !important;
    font-weight: 400;
}

.front-date,
.front-muted {
    color: #97a4b4 !important;
    font-size: 12px;
}

.front-detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid #cfe0f6;
    border-radius: 999px;
    background: #fff;
    color: #2f73e6;
    font-size: 12px;
    font-weight: 400;
}

.front-library-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.front-page-size-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.front-page-size-form label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7c8da3;
    font-size: 12px;
    font-weight: 400;
}

.front-page-size-form select {
    width: 110px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
    background: #fff;
    color: #54657d;
    font-size: 13px;
}

/* admin refresh: light blue SaaS style */
.admin-shell {
    background: #f4f8fd;
}

.admin-layout {
    grid-template-columns: 270px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-sidebar {
    padding: 22px 18px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    border-right: 1px solid #dce7f7;
    color: #1d3354;
}

.admin-brand {
    padding: 4px 8px 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e6edf7;
}

.admin-brand .brand {
    color: #183152;
    font-size: 20px;
    font-weight: 800;
}

.admin-brand .subtitle {
    margin-top: 6px;
    color: #7f90a5;
    font-size: 12px;
    line-height: 1.5;
}

.admin-menu {
    display: grid;
    gap: 16px;
}

.admin-menu-group {
    display: grid;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9eef7;
}

.admin-menu-group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.admin-menu .group-title {
    color: #93a2b6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.admin-menu a,
.admin-exit {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    color: #4e627b;
    font-size: 14px;
}

.admin-menu a.active,
.admin-menu a:hover,
.admin-exit:hover {
    background: #eaf2ff;
    color: #2468d6;
}

.admin-exit {
    margin-top: 8px;
    background: #f2f6fc;
}

.admin-main {
    padding: 28px;
    background: linear-gradient(180deg, #f5f8fd 0%, #f7faff 100%);
}

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin: 0 0 18px;
}

.admin-head h1 {
    margin: 0;
    color: #183152;
    font-size: 28px;
}

.admin-head p {
    margin: 6px 0 0;
    color: #7c8ca1;
}

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.admin-tabs a {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #dde8f5;
    border-radius: 999px;
    background: #fff;
    color: #5b6d84;
    font-size: 13px;
    box-shadow: 0 6px 16px rgba(40, 72, 122, .04);
}

.admin-tabs a.active {
    border-color: transparent;
    background: linear-gradient(135deg, #2a7bf4 0%, #5aa2ff 100%);
    color: #fff;
}

.admin-card,
.admin-main .panel {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid #e4edf8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(36, 68, 112, .05);
}

.admin-card .section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin: 0 0 16px;
}

.admin-card .section-head h2 {
    margin: 0;
    color: #1b3457;
    font-size: 20px;
}

.admin-card .section-head span {
    color: #7f90a5;
    font-size: 12px;
}

.admin-form-note {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border: 1px dashed #dce7f4;
    border-radius: 12px;
    background: #f7fafe;
    color: #8b99ad;
    font-size: 12px;
}

.admin-main .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-main .form-grid label {
    display: grid;
    gap: 8px;
    color: #5e6f86;
    font-size: 12px;
}

.admin-main .form-grid input,
.admin-main .form-grid select,
.admin-main .form-grid textarea {
    border: 1px solid #dbe6f4;
    border-radius: 10px;
    background: #fff;
}

.admin-main .table-wrap {
    overflow: hidden;
    border: 1px solid #e5edf7;
    border-radius: 14px;
}

.admin-main .admin-table thead th {
    background: #f8fbff;
    color: #172b4d;
    font-weight: 600;
}

.admin-main .admin-table tbody td {
    color: #4d5f77;
}

.admin-main .mini-btn,
.admin-main .btn {
    border-radius: 10px;
}

@media (max-width: 980px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        border-right: 0;
        border-bottom: 1px solid #dce7f7;
    }

    .admin-main .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .admin-main {
        padding: 18px;
    }

    .admin-main .form-grid {
        grid-template-columns: 1fr;
    }

    .admin-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* detail page v2 */
.front-detail-v2 {
    padding-top: 28px;
    padding-bottom: 54px;
}

/* SaaS admin workspace v3 */
.admin-shell { background: #f1f3f6; color: #1c2736; }
.admin-shell .admin-layout { display: block; min-height: 100vh; }
.admin-shell .admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 248px; box-sizing: border-box; padding: 24px 16px; overflow-y: auto; background: #111827; border: 0; color: #e5edf8; }
.admin-shell .admin-brand { padding: 4px 10px 24px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.09); }
.admin-shell .admin-brand .brand { color: #fff; font-size: 19px; letter-spacing: 0; }
.admin-shell .admin-brand .subtitle { color: #8491a5; font-size: 11px; }
.admin-shell .admin-menu { gap: 22px; }
.admin-shell .admin-menu-group { gap: 6px; padding-bottom: 16px; border-bottom-color: rgba(255,255,255,.08); }
.admin-shell .admin-menu .group-title { padding: 0 10px 6px; color: #65748a; font-size: 10px; letter-spacing: .13em; }
.admin-shell .admin-menu a, .admin-shell .admin-exit { min-height: 43px; gap: 11px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; color: #9daabd; font-size: 13px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.admin-shell .admin-menu a:hover { background: #1b2636; color: #eaf2ff; transform: translateX(2px); }
.admin-shell .admin-menu a.active { background: #2563eb; border-color: #3b82f6; color: #fff; box-shadow: 0 8px 18px rgba(37,99,235,.25); }
.admin-shell .admin-menu .nav-icon, .admin-shell .admin-exit .nav-icon { display: inline-grid; place-items: center; width: 20px; color: currentColor; font-size: 16px; line-height: 1; }
.admin-shell .admin-exit { margin-top: 10px; background: #192231; }
.admin-shell .admin-main { min-height: 100vh; margin-left: 248px; padding: 0 34px 50px; background: #f1f3f6; }
.admin-topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 76px; margin: 0 -34px 30px; padding: 0 34px; border-bottom: 1px solid #e2e7ee; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.admin-topbar-kicker { display: block; margin-bottom: 3px; color: #8b98a9; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.admin-topbar strong { color: #182434; font-size: 18px; font-weight: 700; }
.admin-topbar-actions { display: flex; align-items: center; gap: 18px; }
.topbar-link { color: #506078; font-size: 12px; font-weight: 600; }
.topbar-link:hover { color: #2563eb; }
.admin-user { display: inline-flex; align-items: center; gap: 9px; padding-left: 18px; border-left: 1px solid #e4e8ee; }
.admin-user-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #dbeafe; color: #2563eb; font-size: 12px; font-weight: 800; }
.admin-user b, .admin-user small { display: block; }
.admin-user b { color: #263448; font-size: 12px; }
.admin-user small { margin-top: 2px; color: #91a0b2; font-size: 10px; }
.admin-shell .admin-head { margin: 0 0 24px; align-items: end; }
.admin-shell .admin-head h1 { color: #172335; font-size: 30px; letter-spacing: -.02em; }
.admin-shell .admin-head p { color: #7b899b; font-size: 13px; }
.page-eyebrow { display: block; margin-bottom: 9px; color: #2563eb; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.version-head-action { min-height: 38px; padding: 0 15px; border-radius: 9px; background: #2563eb; box-shadow: 0 8px 18px rgba(37,99,235,.2); font-size: 12px; }
.admin-shell .admin-tabs { gap: 4px; margin-bottom: 24px; padding: 4px; width: fit-content; border: 1px solid #e1e6ed; border-radius: 10px; background: #e8ebf0; }
.admin-shell .admin-tabs a { height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: #6d7c8f; font-size: 12px; }
.admin-shell .admin-tabs a.active { background: #fff; color: #1e4fa8; box-shadow: 0 2px 7px rgba(21,35,55,.1); }
.version-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.version-stat-card { position: relative; min-height: 122px; padding: 18px 18px 16px; border: 1px solid #e1e6ed; border-radius: 13px; background: #fff; box-shadow: 0 8px 22px rgba(22,34,51,.04); overflow: hidden; }
.version-stat-card::after { position: absolute; right: -22px; bottom: -30px; width: 100px; height: 100px; border-radius: 50%; background: #f1f5f9; content: ''; }
.version-stat-card .stat-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 8px; background: #e8eef7; color: #536b89; font-size: 14px; }
.version-stat-card small, .version-stat-card strong, .version-stat-card em { position: relative; z-index: 1; display: block; }
.version-stat-card small { color: #748298; font-size: 11px; font-weight: 600; }
.version-stat-card strong { margin-top: 3px; color: #1b293b; font-size: 26px; line-height: 1.1; }
.version-stat-card em { margin-top: 5px; color: #a0abb9; font-size: 10px; font-style: normal; }
.version-stat-card.accent .stat-icon { background: #dcfce7; color: #15945b; }
.version-stat-card.warning .stat-icon { background: #fef3c7; color: #bd7a0a; }
.version-stat-card.violet .stat-icon { background: #ede9fe; color: #7654c7; }
.admin-shell .admin-card { padding: 20px; border: 1px solid #e1e6ed; border-radius: 13px; background: #fff; box-shadow: 0 8px 22px rgba(22,34,51,.04); }
.admin-shell .admin-card .section-head h2 { color: #1c2a3c; font-size: 16px; }
.admin-shell .admin-card .section-head span { color: #9aa6b5; }
.admin-filter-bar { padding: 12px; border: 1px solid #e6eaf0; border-radius: 10px; background: #f8fafc; }
.admin-filter-bar input, .admin-filter-bar select { height: 38px; border: 1px solid #dce3eb; border-radius: 8px; background: #fff; color: #394a60; font-size: 12px; }
.admin-filter-bar input:focus, .admin-filter-bar select:focus { border-color: #6194e8; box-shadow: 0 0 0 3px rgba(37,99,235,.1); outline: 0; }
.admin-shell .table-wrap { border: 1px solid #e5e9ef; border-radius: 10px; box-shadow: none; }
.admin-shell .admin-table { min-width: 980px; }
.admin-shell .admin-table thead th { height: 42px; padding: 0 13px; border-bottom: 1px solid #e5e9ef; background: #f8fafc; color: #8190a3; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-shell .admin-table tbody td { height: 58px; padding: 0 13px; border-bottom: 1px solid #edf0f4; color: #677589; font-size: 12px; }
.admin-shell .admin-table tbody tr { transition: background .18s ease, box-shadow .18s ease; }
.admin-shell .admin-table tbody tr:hover { background: #fbfdff; box-shadow: inset 3px 0 0 #4c88e9; }
.version-name { color: #243449; font-weight: 700; }
.version-tag, .ratio-value { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 6px; background: #eef2f7; color: #52657c; font-size: 11px; font-weight: 600; }
.ratio-value { background: #edf6ff; color: #2668ae; font-family: Consolas, monospace; }
.status-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.status-badge.is-active { background: #dcfce7; color: #15804d; }
.status-badge.is-draft { background: #f1f5f9; color: #8190a3; }
.updated-at { color: #9aa6b5 !important; font-size: 11px !important; white-space: nowrap; }
.admin-shell .admin-row-actions { display: flex; align-items: center; gap: 5px; }
.admin-shell .admin-row-actions .mini-btn { min-height: 28px; padding: 0 9px; border-radius: 7px; font-size: 11px; }

@media (max-width: 1050px) {
    .version-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-topbar-actions .topbar-link { display: none; }
}
@media (max-width: 720px) {
    .admin-shell .admin-sidebar { position: relative; width: 100%; min-height: auto; padding: 14px; }
    .admin-shell .admin-brand { margin-bottom: 12px; padding-bottom: 14px; }
    .admin-shell .admin-menu { display: flex; gap: 6px; overflow-x: auto; }
    .admin-shell .admin-menu-group { display: flex; flex: 0 0 auto; gap: 4px; padding: 0; border: 0; }
    .admin-shell .admin-menu .group-title, .admin-shell .admin-exit { display: none; }
    .admin-shell .admin-menu a { min-height: 36px; padding: 0 10px; }
    .admin-shell .admin-main { margin-left: 0; padding: 0 16px 30px; }
    .admin-topbar { margin: 0 -16px 22px; padding: 0 16px; }
    .admin-user { padding-left: 0; border-left: 0; }
    .version-stat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .version-stat-card { min-height: 108px; padding: 13px; }
    .version-head-action { display: none; }
}

.front-detail-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #8a97aa;
    font-size: 13px;
}

.front-detail-crumb a {
    color: #5f6f84;
}

.front-detail-crumb em {
    color: #1f2f47;
    font-style: normal;
}

.front-detail-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
}

.front-detail-main-card,
.front-detail-buy-card,
.front-detail-demo-card,
.front-detail-notes,
.front-detail-safe-bar {
    border: 1px solid #e3ebf6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(62, 94, 138, .05);
}

.front-detail-main-card {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
}

.front-detail-cover {
    display: grid;
    place-items: center;
    min-height: 245px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 48%, rgba(95, 164, 255, .24), transparent 32%),
        linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
}

.front-detail-cover span {
    width: 104px;
    height: 120px;
    clip-path: polygon(50% 0, 92% 20%, 88% 76%, 50% 100%, 12% 76%, 8% 20%);
    background: linear-gradient(180deg, rgba(81, 158, 246, .14), rgba(47, 115, 230, .06));
    position: relative;
}

.front-detail-cover span:after {
    content: "";
    position: absolute;
    left: 36px;
    top: 28px;
    width: 32px;
    height: 58px;
    border-radius: 16px 16px 7px 7px;
    background: linear-gradient(180deg, #87c8ff, #57a6f1);
    box-shadow: 0 0 18px rgba(68, 155, 245, .32);
}

.front-detail-summary h1 {
    margin: 18px 0 12px;
    color: #12233f;
    font-size: 30px;
    line-height: 1.2;
}

.front-detail-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.front-detail-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: #eef5ff;
    color: #2f73e6;
    font-size: 13px;
}

.front-detail-tags span:nth-child(2) {
    background: #ecf9ef;
    color: #2f9353;
}

.front-detail-tags span:nth-child(3) {
    background: #fff1df;
    color: #e58a20;
}

.front-detail-summary > p {
    min-height: 68px;
    margin: 0;
    color: #4e5d72;
    font-size: 14px;
    line-height: 1.9;
}

.front-detail-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
    padding: 16px;
    border-radius: 10px;
    background: #f8fbff;
}

.front-detail-stat-grid span {
    display: grid;
    gap: 4px;
    color: #8c9aae;
    font-size: 12px;
}

.front-detail-stat-grid i {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #e8f1ff;
}

.front-detail-stat-grid b {
    color: #33445d;
    font-size: 12px;
    font-weight: 400;
}

.front-detail-buy-card {
    padding: 28px 24px;
}

.front-detail-buy-card > span {
    color: #33445d;
    font-size: 14px;
}

.front-detail-buy-card strong {
    display: block;
    margin: 16px 0 14px;
    color: #f12935;
    font-size: 34px;
    line-height: 1;
}

.front-detail-buy-badges {
    display: flex;
    gap: 20px;
    margin-bottom: 22px;
    color: #5f8d72;
    font-size: 12px;
}

.front-detail-buy-badges em {
    font-style: normal;
}

.front-detail-buy-form button,
.front-detail-disabled {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(180deg, #ff303a, #f11825);
    color: #fff;
    cursor: pointer;
    font-size: 15px;
}

.front-detail-disabled {
    background: #ccd6e5;
    cursor: not-allowed;
}

.front-detail-buy-card p {
    margin: 18px 0 0;
    color: #66778e;
    font-size: 12px;
    line-height: 1.6;
}

.front-detail-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 16px;
    margin-top: 16px;
}

.front-detail-demo-card,
.front-detail-notes {
    padding: 24px;
}

.front-detail-demo-card h2,
.front-detail-notes h2 {
    margin: 0 0 20px;
    color: #17243a;
    font-size: 18px;
}

.front-detail-demo-card > p {
    margin: 0 0 20px;
    color: #66778e;
    font-size: 13px;
}

.front-detail-demo-box {
    display: grid;
    place-items: center;
    min-height: 190px;
    border-radius: 8px;
    background: #f7faff;
    text-align: center;
}

.front-detail-demo-box span {
    width: 38px;
    height: 30px;
    margin-bottom: 10px;
    border: 4px solid #2f73e6;
    border-radius: 4px;
}

.front-detail-demo-box h3 {
    margin: 0 0 6px;
    color: #17243a;
    font-size: 18px;
}

.front-detail-demo-box p {
    margin: 0 0 18px;
    color: #66778e;
    font-size: 13px;
}

.front-detail-demo-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 28px;
    border-radius: 8px;
    background: #2f73e6;
    color: #fff;
}

.front-detail-demo-box em {
    color: #8c9aae;
    font-style: normal;
}

.front-detail-notes ol {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.front-detail-notes li {
    position: relative;
    display: grid;
    gap: 4px;
    padding-left: 34px;
}

.front-detail-notes li:before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #2f73e6;
    color: #fff;
    font-size: 12px;
}

.front-detail-notes ol {
    counter-reset: item;
}

.front-detail-notes b {
    color: #17243a;
    font-size: 15px;
    font-weight: 400;
}

.front-detail-notes span {
    color: #66778e;
    font-size: 13px;
}

.front-detail-safe-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 16px;
    padding: 22px 28px;
}

.front-detail-safe-bar h2 {
    margin: 0 0 6px;
    color: #17243a;
    font-size: 20px;
}

.front-detail-safe-bar p {
    margin: 0;
    color: #66778e;
    font-size: 13px;
}

.front-detail-safe-bar ul {
    display: grid;
    grid-template-columns: repeat(4, 82px);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #53657d;
    font-size: 12px;
    text-align: center;
}

.front-detail-safe-bar li:before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    border-radius: 10px;
    background: #eef5ff;
}

@media (max-width: 980px) {
    .front-detail-top,
    .front-detail-lower,
    .front-detail-main-card {
        grid-template-columns: 1fr;
    }

    .front-detail-cover {
        min-height: 180px;
    }

    .front-detail-safe-bar {
        display: grid;
    }

    .front-detail-safe-bar ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

.front-release-table td:nth-child(2) {
    overflow: hidden;
}

.front-release-name {
    display: flex;
    align-items: baseline;
    gap: 0;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.front-release-name-main {
    flex: 0 0 auto;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-release-name-intro {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-release-name-sep {
    flex: 0 0 auto;
    margin: 0 3px;
}

.front-release-table th:nth-child(2),
.front-release-table td:nth-child(2) {
    width: 300px;
    max-width: 300px;
}

.front-detail-link:hover {
    border-color: #2f73e6;
    background: #f6faff;
}

.front-detail-link b {
    display: none;
}

.front-release-table th:first-child,
.front-release-table td:first-child {
    width: 42%;
}

.front-release-table th:nth-child(2) { width: 9%; }
.front-release-table th:nth-child(3) { width: 10%; }
.front-release-table th:nth-child(4) { width: 9%; }
.front-release-table th:nth-child(5) { width: 10%; }
.front-release-table th:nth-child(6) { width: 9%; }
.front-release-table th:nth-child(7) { width: 10%; }
.front-release-table th:nth-child(8) { width: 11%; }

/* service/contact bands: closer to the reference screenshot */
.front-services {
    margin-top: 18px;
    padding: 22px 0 42px;
}

.front-service-band,
.front-contact-band {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(62, 94, 138, .04);
}

.front-contact-band {
    margin-top: 16px;
}

.front-band-title {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 22px 24px;
    background: #f6f9ff;
    border-right: 1px solid #e6edf7;
}

.front-band-title h2 {
    margin: 0;
    color: #132238;
    font-size: 24px;
    line-height: 1.15;
}

.front-band-title p {
    margin: 0;
    color: #7f8ea5;
    font-size: 13px;
    line-height: 1.45;
}

.front-service-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 12px 10px;
}

.front-service-grid article {
    min-height: 120px;
    padding: 14px 8px 10px;
    text-align: center;
}

.front-service-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #eef5ff;
    color: #2f73e6;
    font-size: 15px;
}

.front-service-grid strong {
    display: block;
    color: #1c2a42;
    font-size: 13px;
    font-weight: 700;
}

.front-service-grid p {
    margin: 4px 0 0;
    color: #90a0b4;
    font-size: 11px;
    line-height: 1.45;
}

.front-contact-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 0 24px;
}

.front-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 84px;
}

.front-contact-item > div {
    display: grid;
    gap: 2px;
}

.front-contact-item b {
    color: #7f8ea5;
    font-size: 12px;
    font-weight: 400;
}

.front-contact-item strong {
    color: #17243a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.front-contact-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: #eef5ff;
}

.front-contact-icon:before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 5px;
    border: 2px solid #2f73e6;
}

.front-contact-icon-wechat {
    background: #edf9ef;
}

.front-contact-icon-wechat:before {
    border-color: #2f9f46;
}

.front-contact-button {
    min-width: 120px;
    min-height: 42px;
    padding: 0 24px;
    border-radius: 10px;
    background: linear-gradient(180deg, #4c8ff7 0%, #2f72e6 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 20px rgba(47, 114, 230, .18);
}

.front-contact-button:hover {
    color: #fff;
}

/* keep mobile readable */
@media (max-width: 980px) {
    .front-service-band,
    .front-contact-band {
        grid-template-columns: 1fr;
    }

    .front-band-title {
        border-right: 0;
        border-bottom: 1px solid #e6edf7;
    }

    .front-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-contact-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 18px 18px;
    }
}

@media (max-width: 640px) {
    .front-service-grid {
        grid-template-columns: 1fr;
    }

    .front-contact-item {
        min-height: 0;
    }

    .front-contact-button {
        width: 100%;
        min-width: 0;
    }
}

/* list layout v5: number column + inline name/intro */
.front-release-table th:first-child,
.front-release-table td:first-child {
    width: 72px;
    text-align: center;
}

.front-release-table th:nth-child(2),
.front-release-table td:nth-child(2) {
    width: 34%;
    text-align: left;
}

.front-release-table th:nth-child(3) { width: 10%; }
.front-release-table th:nth-child(4) { width: 10%; }
.front-release-table th:nth-child(5) { width: 9%; }
.front-release-table th:nth-child(6) { width: 10%; }
.front-release-table th:nth-child(7) { width: 9%; }
.front-release-table th:nth-child(8) { width: 10%; }
.front-release-table th:nth-child(9) { width: 10%; }

.front-release-table thead th {
    color: #111827;
    font-size: 13px;
    font-weight: 400;
}

.front-release-table tbody td {
    font-size: 13px;
}

.front-version-code {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 24px;
    margin: 0 auto;
    border-radius: 6px;
    background: #eaf2ff;
    color: #2e74e6;
    font-size: 12px;
    font-weight: 400;
}

.front-release-name {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    color: #111827;
    font-weight: 400;
    white-space: nowrap;
}

.front-release-name:hover {
    color: #111827;
}

.front-release-name-main,
.front-release-name-intro,
.front-release-name-sep {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
}

.front-release-name-main {
    flex: 0 0 auto;
}

.front-release-name-sep {
    margin: 0 3px;
    color: #111827;
}

.front-release-name-intro {
    overflow: hidden;
    color: #111827;
    text-overflow: ellipsis;
}

.front-name-color-0 { color: #2e74e6; }
.front-name-color-1 { color: #e6782e; }
.front-name-color-2 { color: #6f8f2d; }
.front-name-color-3 { color: #c24bb0; }
.front-name-color-4 { color: #6a58d9; }
.front-name-color-5 { color: #1f9a8a; }

.front-tag-blue {
    background: #fff4df;
    color: #e59b2e;
}

.front-tag {
    font-size: 11px;
}

.front-engine {
    color: #38465a;
    font-size: 13px;
    font-weight: 400;
}

.front-ratio {
    color: #1f2f47;
    font-size: 13px;
    font-weight: 400;
}

.front-demo-link {
    color: #c85fb2;
    font-size: 13px;
    font-weight: 400;
}

.front-price {
    color: #d2202f !important;
    font-size: 13px !important;
    font-weight: 400;
}

.front-date,
.front-muted {
    color: #97a4b4 !important;
    font-size: 13px;
    font-weight: 400;
}

.front-detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid #cfe0f6;
    border-radius: 999px;
    background: #fff;
    color: #2f73e6;
    font-size: 13px;
    font-weight: 400;
}


/* Front template: ??????? 141my ??????????? */
.legacy-front {
    min-height: 100vh;
    padding: 0 0 30px;
    background: #e8e8e8;
    font: 14px 'Microsoft Yahei', SimSun, Arial, sans-serif;
    color: #666;
}
.legacy-front a { color: #333; text-decoration: none; }
.legacy-front a:hover { color: #f60; }
.legacy-front #mian { width: 1186px; margin: 0 auto; background: #fff; }
.legacy-front #top { height: 40px; background: #959595; line-height: 40px; padding-left: 15px; color: #fff; box-sizing: border-box; }
.legacy-front #top span { float: right; background: rgba(255,255,255,.12); padding: 0 12px; }
.legacy-front #header { min-height: 118px; background: #fff; }
.legacy-front #logo { height: 100px; overflow: hidden; float: left; margin-right: 10px; }
.legacy-front #logo a { display: block; min-width: 330px; margin: 17px 0 0 10px; color: #c00000; }
.legacy-front #logo strong { display: block; font-size: 28px; line-height: 34px; font-weight: 900; letter-spacing: 1px; }
.legacy-front #logo small { display: block; margin-top: 5px; color: #777; font-size: 13px; }
.legacy-front #so { margin-right: 15px; background: #f8f8f8; padding: 5px; border: 1px solid #eee; position: relative; margin-top: 25px; float: right; }
.legacy-front #so .k { height: 35px; border: 1px solid #eee; width: 300px; padding: 0 10px; outline: none; box-sizing: border-box; }
.legacy-front #so button { width: 70px; height: 35px; border: none; background: #c00000; color: #fff; font-size: 14px; cursor: pointer; }
.legacy-front #so button:hover { background: #e00; }
.legacy-front #menu { line-height: 72px; float: left; }
.legacy-front #menu li { margin-left: 30px; float: left; list-style: none; }
.legacy-front #menu ul { overflow: hidden; margin: 0; padding: 0; }
.legacy-front #menu li a { border-radius: 3px; padding: 15px 20px; background: #888; color: #fff; }
.legacy-front #menu li a.cur,
.legacy-front #menu li a:hover { background: #06c; color: #fff; }
.legacy-front #x { padding: 6px 6px 30px; clear: both; }
.legacy-front #filt { padding: 10px 5px; margin: 5px 0 0; border: 1px solid #eee; }
.legacy-front #scre { min-height: 28px; padding: 10px 0; border-bottom: 1px dashed #eee; overflow: hidden; }
.legacy-front #scre b { float: left; color: #555; padding: 0 15px; line-height: 28px; display: block; }
.legacy-front #scre a { float: left; color: #999; padding: 0 6px; line-height: 28px; display: block; margin-right: 10px; border: 1px solid #fff; border-radius: 2px; }
.legacy-front #scre a:hover,
.legacy-front #scre a.hover { color: #f60; background: #ffe; border-color: #f60; }
.legacy-front #filt p { color: #89ad45; padding: 10px 15px; line-height: 28px; font-size: 13px; }
.legacy-front #form { padding: 5px; overflow: hidden; margin: 10px 0 0; border: 1px solid #f1f1f1; background: #f9f9f9; }
.legacy-front #be { width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 1px solid #eee; border-left: 1px solid #eee; }
.legacy-front #be tr { background: #fff; }
.legacy-front #be tr:hover { background: #f8f8f8; }
.legacy-front #be th,
.legacy-front #be td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.legacy-front #be th { color: #888; height: 45px; line-height: 45px; padding: 0 4px; font-size: 12px; font-weight: bold; text-align: center; background: #f5f5f5; border-right: 1px solid #eee; border-bottom: 2px solid #eee; }
.legacy-front #be td { color: #999; min-height: 40px; line-height: 22px; padding: 9px 4px; text-align: center; border-right: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; font-size: 12px; }
.legacy-front #be .center { text-align: left; padding-left: 10px; }
.legacy-front .legacy-date { color: #888; white-space: nowrap; }
.legacy-front .bold { font-weight: bold; }
.legacy-front .legacy-version-name { display: block; max-width: 100%; color: #ff0900; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legacy-front .legacy-version-title { color: #ff0900; }
.legacy-front .legacy-version-sep { color: #999; font-weight: normal; }
.legacy-front .legacy-version-intro { color: #777; font-weight: normal; margin-left: 4px; }
.legacy-front #be th:first-child,
.legacy-front #be td:first-child { width: 56px; }
.legacy-front #be th:nth-child(2),
.legacy-front #be td:nth-child(2) { width: 520px; }
.legacy-front #be th:nth-child(3),
.legacy-front #be td:nth-child(3) { width: 96px; }
.legacy-front #be th:nth-child(4),
.legacy-front #be td:nth-child(4) { width: 84px; }
.legacy-front #be th:nth-child(5),
.legacy-front #be td:nth-child(5) { width: 84px; }
.legacy-front #be th:nth-child(6),
.legacy-front #be td:nth-child(6) { width: 84px; }
.legacy-front #be th:nth-child(7),
.legacy-front #be td:nth-child(7) { width: 84px; }
.legacy-front #be th:nth-child(8),
.legacy-front #be td:nth-child(8) { width: 92px; }
.legacy-front #be th:nth-child(9),
.legacy-front #be td:nth-child(9) { width: 82px; }
.legacy-front #legacy-package { display: grid; grid-template-columns: 112px 1fr; gap: 0; margin: 10px 0 0; border: 1px solid #eee; background: #fff; }
.legacy-front .legacy-package-title { display: flex; align-items: center; justify-content: center; padding: 12px; border-right: 1px solid #eee; background: #fafafa; color: #c00000; font-size: 15px; font-weight: bold; }
.legacy-front .legacy-package-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; }
.legacy-front .legacy-package-item { min-height: 132px; padding: 13px 14px; border-right: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; box-sizing: border-box; overflow: hidden; }
.legacy-front .legacy-package-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: start; }
.legacy-front .legacy-package-item:nth-child(3n) { border-right: 1px solid #f1f1f1; }
.legacy-front .legacy-package-item b { display: block; color: #333; font-size: 13px; line-height: 20px; white-space: normal; overflow: visible; }
.legacy-front .legacy-package-item b em { margin-left: 6px; color: #c00000; font-size: 12px; font-style: normal; font-weight: normal; }
.legacy-front .legacy-package-item strong { display: block; color: #e00; font-size: 18px; line-height: 22px; text-align: right; white-space: nowrap; }
.legacy-front .legacy-package-item strong small { margin-left: 3px; color: #999; font-size: 12px; font-weight: normal; }
.legacy-front .legacy-package-item span { display: block; margin-top: 4px; color: #888; font-size: 12px; line-height: 18px; }
.legacy-front .legacy-package-renew { grid-column: 1 / -1; color: #888; }
.legacy-front .legacy-package-item ul { display: grid; gap: 3px; margin: 8px 0 0; padding: 0; list-style: none; }
.legacy-front .legacy-package-item li { color: #66717f; font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legacy-front .legacy-package-item li:before { content: "✓"; margin-right: 6px; color: #c00000; font-weight: bold; }
.legacy-front .legacy-package-item a { display: inline-block; margin-top: 5px; color: green; font-size: 12px; }
.legacy-front #page { margin: 10px 10px 0; text-align: center; }
.legacy-front #page li { display: inline-block; }
.legacy-front #page a { color: #888; line-height: 22px; display: inline-block; padding: 8px 18px; margin-left: 5px; background: #f5f5f5; }
.legacy-front #page a:hover,
.legacy-front #page li.active a { color: #fff; background: #888; }
.legacy-front #show { padding: 5px; border: 1px solid #eee; overflow: hidden; }
.legacy-front #show .pic { float: left; }
.legacy-front .legacy-cover { width: 300px; height: 300px; padding: 5px; border: 1px solid #eee; margin-right: 15px; background: linear-gradient(135deg,#f7f7f7,#e8e8e8); display: flex; align-items: center; justify-content: center; color: #c00000; font-size: 42px; font-weight: 900; box-sizing: border-box; }
.legacy-front #show .title { float: left; color: #e00; width: 810px; border: 1px solid #eee; padding: 20px 10px; background: #fafafa; box-sizing: border-box; }
.legacy-front #show .title h1 { font-size: 20px; font-weight: bold; }
.legacy-front #show .back { overflow: hidden; float: left; margin-top: 15px; color: #888; width: 820px; padding: 0; }
.legacy-front #show .back li { border: 1px solid #eee; float: left; padding: 0 15px 0 0; margin-right: 10px; margin-bottom: 15px; list-style: none; }
.legacy-front #show .back li b { border-right: 1px solid #eee; background: #fafafa; padding: 15px 10px; display: inline-block; margin-right: 15px; font-weight: normal; }
.legacy-front #show li i { color: #f00; font-weight: bold; font-style: normal; }
.legacy-front #show .p { padding: 5px 10px; background: #fafafa; border: 1px solid #eee; float: left; width: 808px; line-height: 25px; color: #888; min-height: 76px; box-sizing: border-box; }
.legacy-front #show .gou { float: left; border: 1px solid #eee; margin-top: 10px; width: 808px; min-height: 68px; box-sizing: border-box; }
.legacy-front #show .kq,
.legacy-front #show .kefu,
.legacy-front #show .gm { height: 48px; width: 150px; display: inline-block; margin-left: 15px; text-align: center; line-height: 48px; font-size: 16px; color: #fff; font-weight: bold; margin-top: 10px; border: 1px solid #eee; vertical-align: top; box-sizing: border-box; cursor: pointer; }
.legacy-front #show .kq { background: #06e; }
.legacy-front #show .kefu { background: #f00; }
.legacy-front #show .gm { background: #f39800; font-family: inherit; }
.legacy-front #show .gm:hover { background: #ff7800; }
.legacy-front .legacy-buy-form { display: inline-block; margin: 0; padding: 0; vertical-align: top; }
.legacy-front #content { padding: 10px; border: 1px solid #eee; margin-top: 15px; line-height: 25px; font-size: 13px; color: #888; background: #fafafa; border-top: 2px solid #eee; }
.legacy-front #tishi { padding: 6px; border: 1px solid #eee; }
@media (max-width: 1220px) {
    .legacy-front #mian { width: calc(100% - 20px); }
    .legacy-front #menu li { margin-left: 12px; }
    .legacy-front #show .title,
    .legacy-front #show .back,
    .legacy-front #show .p,
    .legacy-front #show .gou { width: calc(100% - 330px); }
}
@media (max-width: 760px) {
    .legacy-front #mian { width: 100%; }
    .legacy-front #logo,
    .legacy-front #so,
    .legacy-front #menu { float: none; }
    .legacy-front #so { margin: 10px; }
    .legacy-front #so .k { width: calc(100% - 78px); }
    .legacy-front #menu { line-height: 44px; padding: 0 10px 10px; }
    .legacy-front #menu li { margin: 6px 6px 0 0; }
    .legacy-front #menu li a { padding: 9px 12px; display: block; }
    .legacy-front #form { overflow-x: auto; }
    .legacy-front #be { min-width: 900px; }
    .legacy-front #legacy-package { grid-template-columns: 1fr; }
    .legacy-front .legacy-package-title { border-right: 0; border-bottom: 1px solid #eee; justify-content: flex-start; }
    .legacy-front .legacy-package-list { grid-template-columns: 1fr; }
    .legacy-front .legacy-package-item,
    .legacy-front .legacy-package-item:nth-child(3n) { border-right: 0; }
    .legacy-front .legacy-cover,
    .legacy-front #show .pic { display: none; }
    .legacy-front #show .title,
    .legacy-front #show .back,
    .legacy-front #show .p,
    .legacy-front #show .gou { width: 100%; }
}