:root {
    color-scheme: light;
    --background: #ffffff;
    --foreground: #171717;
    --card: #ffffff;
    --card-foreground: #171717;
    --muted: #f5f5f5;
    --muted-foreground: #737373;
    --border: #ebebeb;
    --primary: #171717;
    --primary-foreground: #fafafa;
    --destructive: #dc2626;
    --radius: 10px;
    --wrap: 1152px;
    --wrap-narrow: 768px;
    /* Mac/iOS 用 PingFang；其它系统拉七牛上的 Noto Sans SC */
    --font-sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-brand: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

    /* legacy aliases */
    --gf-ink: var(--foreground);
    --gf-muted: var(--muted-foreground);
    --gf-line: var(--border);
    --gf-accent: var(--primary);
    --gf-accent-deep: #000;
    --gf-accent-soft: var(--muted);
    --gf-paper: var(--background);
    --gf-white: var(--card);
    --gf-danger: var(--destructive);
    --gf-danger-bg: #fef2f2;
    --gf-info-bg: var(--muted);
    --gf-radius: var(--radius);
    --gf-wrap: var(--wrap);
    --gf-read: var(--wrap-narrow);
    --font-display: var(--font-sans);
    --font-body: var(--font-sans);
    --brand: var(--primary);
    --brand-dark: #000;
    --text: var(--foreground);
    --bg: var(--background);
    --danger: var(--destructive);
    --qs-ink: var(--foreground);
    --qs-muted: var(--muted-foreground);
    --qs-line: var(--border);
    --qs-accent: var(--primary);
    --qs-accent-deep: #000;
    --qs-accent-soft: #f5f5f5;
    /* 限免 / 特惠：同明度结构的柔和色 */
    --gf-free: #059669;
    --gf-free-deep: #047857;
    --gf-free-soft: #ecfdf5;
    --gf-free-line: #a7f3d0;
    --gf-deal: #ea580c;
    --gf-deal-deep: #c2410c;
    --gf-deal-soft: #fff7ed;
    --gf-deal-line: #fed7aa;
    --qs-paper: var(--background);
    --qs-white: var(--card);
}

*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
    touch-action: manipulation; /* 减少双击缩放 */
}
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 16px; /* 微信内基准字号，避免被系统字体缩放压小 */
    color: var(--foreground);
    background: var(--background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
    touch-action: manipulation;
}
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button, input, textarea, select { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }
.wrap--narrow { max-width: var(--wrap-narrow); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* —— Header —— */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(235,235,235,.9);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.site-header__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 56px;
}
.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--foreground);
    text-decoration: none;
    min-width: 0;
    font-family: var(--font-brand);
}
.brand:hover { text-decoration: none; }
.brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    overflow: hidden;
    flex-shrink: 0;
}
.brand__mark img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}
.brand__name {
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.brand__badge {
    display: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--muted-foreground);
}
@media (min-width: 640px) { .brand__badge { display: inline-block; } }

/* Desktop home: text「果粉查询首页」instead of logo; other pages: logo + name. */
@media (min-width: 769px) {
    .brand__mark {
        display: inline-flex;
        width: 34px;
        height: 34px;
    }
    .brand__mark img {
        width: 30px;
        height: 30px;
    }
    .site-header--home .brand__mark { display: none; }
    .site-header--home .brand__badge { display: none; }
    .site-header--home .brand__name {
        display: inline;
        font-family: var(--font-brand);
        font-size: 15px;
        font-weight: 600;
        color: var(--foreground);
    }
    .site-header--home .brand__home-label {
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0 8px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted-foreground);
        letter-spacing: .02em;
    }
}

.brand__home-label { display: none; }

/* Mobile: home =「果粉查询」+「首页」文字（无 logo）；other pages = logo + 果粉查询 */
@media (max-width: 768px) {
    .brand__badge { display: none !important; }
    .brand__mark { display: inline-flex; }
    .brand__name {
        display: inline;
        font-family: var(--font-brand);
        font-size: 15px;
        font-weight: 600;
        color: var(--foreground);
    }
    .site-header--home .brand__mark {
        display: none !important;
    }
    .site-header--home .brand__name { display: inline; }
    .site-header--home .brand__home-label {
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0 7px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted-foreground);
    }
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle__bars {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    height: 0;
    box-shadow: none;
    background: transparent;
    position: relative;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before,
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--foreground);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }
.nav a {
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    color: var(--muted-foreground);
    transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: var(--muted); color: var(--foreground); text-decoration: none; }
.nav a.is-strong { color: var(--foreground); font-weight: 500; }
.site-header__quick {
    display: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    white-space: nowrap;
}
.site-header__quick:hover {
    color: var(--foreground);
    text-decoration: none;
}
.site-header__cta {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    background: var(--foreground);
    color: var(--primary-foreground) !important;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    transition: opacity .15s ease;
    white-space: nowrap;
}
.site-header__cta:hover { opacity: .9; text-decoration: none; }
.site-header__ghost {
    display: none;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s ease;
}
.site-header__ghost:hover { background: var(--muted); text-decoration: none; }
@media (min-width: 769px) {
    .site-header__ghost { display: inline-flex; }
    .site-header__bar { height: 64px; }
}
.site-header__balance {
    display: inline-flex;
    align-items: center;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
}
.site-header__balance:hover { background: var(--muted); text-decoration: none; }
.site-header__user {
    display: inline-flex;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--muted);
}
.site-header__user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.site-header__user:hover { opacity: .9; }

.gf-pay-waiting h1 { line-height: 1.3; }
.gf-pay-waiting__box {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--background);
}
.gf-pay-waiting__qr {
    display: inline-block;
    width: 220px;
    height: 220px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}
.gf-pay-waiting__status {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-pay-leave-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(2px);
}
.gf-pay-leave-backdrop.is-open { display: flex; }
.gf-pay-leave-modal {
    width: min(100%, 400px);
    padding: 22px 20px 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
.gf-pay-leave-modal h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.02em;
}
.gf-pay-leave-modal__lead {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted-foreground);
}
.gf-pay-leave-modal__query {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
}
.gf-pay-leave-modal__tips {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--muted) 65%, transparent);
    list-style: none;
}
.gf-pay-leave-modal__tips li {
    position: relative;
    padding-left: 14px;
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--foreground);
}
.gf-pay-leave-modal__tips li:last-child { margin-bottom: 0; }
.gf-pay-leave-modal__tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--foreground);
}
.gf-pay-leave-modal__actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
}
.gf-pay-leave-modal__actions .gf-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
}
.gf-recharge { display: grid; gap: 20px; }
.gf-recharge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}
.gf-recharge-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 148px;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    padding: 18px 16px 16px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.gf-recharge-card:hover {
    border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
    transform: translateY(-1px);
}
.gf-recharge-card.is-selected {
    border-color: var(--foreground);
    background: color-mix(in srgb, var(--muted) 55%, #fff);
    box-shadow: 0 0 0 1px var(--foreground);
}
.gf-recharge-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gf-recharge-card__badge {
    position: absolute;
    top: 0;
    right: 12px;
    transform: translateY(-50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
    line-height: 1.2;
}
.gf-recharge-card__hot {
    position: absolute;
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(234, 88, 12, .35);
}
.gf-recharge-card--hot {
    border-color: color-mix(in srgb, #ea580c 40%, var(--border));
}
@media (max-width: 640px) {
    .gf-recharge-card__hot {
        top: -1px;
        left: -1px;
        transform: none;
        border-radius: 10px 0 10px 0;
        padding: 5px 10px;
        font-size: 10px;
    }
    .gf-recharge-card--hot .gf-recharge-card__badge {
        display: none;
    }
}
.gf-recharge-card__name {
    font-size: 14px;
    font-weight: 650;
    color: var(--foreground);
}
.gf-recharge-card__pay {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
}
.gf-recharge-card__pay em {
    font-style: normal;
    font-size: 28px;
    font-weight: 720;
    letter-spacing: -.03em;
    line-height: 1;
}
.gf-recharge-card__pay small {
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-recharge-card__grant {
    margin-top: auto;
    display: grid;
    gap: 2px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-recharge-card__grant b {
    font-weight: 650;
    color: var(--foreground);
}
.gf-recharge-card__bonus {
    color: #b45309;
    font-weight: 600;
}
.gf-recharge__footer {
    display: grid;
    gap: 10px;
    max-width: 420px;
}
.gf-recharge__hint {
    margin: 0;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-recharge__submit {
    width: 100%;
    justify-content: center;
    min-height: 46px;
}
.gf-recharge__note {
    margin: 0;
    font-size: 12px;
    color: var(--muted-foreground);
}
@media (max-width: 640px) {
    .gf-recharge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gf-recharge-card { min-height: 136px; padding: 16px 14px 14px; }
    .gf-recharge-card__pay em { font-size: 24px; }
    .gf-recharge__footer { max-width: none; }
}

main { padding: 0 0 0; }
main > .wrap { padding-top: 40px; padding-bottom: 64px; }
main:has(.gf-hero) > .wrap { padding-top: 0; padding-bottom: 0; }

/* —— Footer —— */
.site-footer {
    border-top: 1px solid var(--border);
    background: rgba(245,245,245,.3);
}
.site-footer__grid {
    display: grid;
    gap: 40px;
    padding: 56px 0;
}
@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.site-footer__brand p {
    margin: 16px 0 0;
    max-width: 20rem;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted-foreground);
}
.site-footer h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.site-footer ul { list-style: none; margin: 16px 0 0; padding: 0; }
.site-footer li + li { margin-top: 10px; }
.site-footer a {
    font-size: 14px;
    color: var(--muted-foreground);
    transition: color .15s ease;
}
.site-footer a:hover { color: var(--foreground); }
.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding: 24px 0;
    font-size: 12px;
    color: var(--muted-foreground);
}
@media (min-width: 640px) {
    .site-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* —— Page primitives —— */
.gf-page { padding-bottom: 8px; }
.gf-page-head { margin-bottom: 28px; }
.gf-page-head h1,
.gf-title {
    margin: 0 0 8px;
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.gf-lead, .subtitle {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 15px;
    max-width: 42em;
}
.gf-section { margin-top: 40px; scroll-margin-top: 80px; }
.gf-help-step { scroll-margin-top: 80px; }
.gf-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}
.gf-section__head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
}
.gf-section__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
}
.gf-section__title-row h2 { margin: 0; }
.gf-section__title-row .gf-find-sn-link {
    position: relative;
    top: -1px;
}
.gf-section__title-row + p { margin-top: 6px; }
.gf-section__head p { margin: 0; color: var(--muted-foreground); font-size: 14px; }
.gf-find-sn__row--hl {
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
    border-radius: 6px;
    margin: 0 -4px;
    padding: 2px 4px;
}
.gf-find-sn__row--hl b {
    color: var(--foreground);
}
.gf-eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.gf-btn, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--foreground);
    color: var(--primary-foreground) !important;
    border: 1px solid var(--foreground);
    border-radius: 12px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    transition: opacity .15s ease;
}
.gf-btn:hover, .btn:hover { opacity: .9; }
.gf-btn--outline {
    background: transparent;
    color: var(--foreground) !important;
    border-color: var(--border);
}
.gf-btn--outline:hover { background: var(--muted); opacity: 1; }
.gf-btn--ghost {
    background: transparent;
    color: var(--foreground) !important;
    border-color: var(--border);
}
.gf-btn--ghost:hover { background: var(--muted); opacity: 1; }
.gf-btn.gf-btn--danger-ghost {
    background: #fff !important;
    border: 1px solid #f1a5a5 !important;
    color: #b91c1c !important;
}
.gf-btn.gf-btn--danger-ghost:hover {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
    color: #991b1b !important;
    opacity: 1;
}

.gf-result-report {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.gf-result-report__msg {
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-result-report__msg.is-error {
    color: var(--destructive);
}

.gf-alert, .alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid var(--border);
    background: var(--card);
}
.gf-alert--info, .alert-info { background: var(--muted); }
.gf-alert--error, .alert-error {
    background: var(--gf-danger-bg);
    border-color: rgba(220,38,38,.25);
    color: var(--destructive);
}

.gf-table, .result-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}
.gf-table th, .gf-table td,
.result-table th, .result-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: top;
}
.gf-table tr:last-child th,
.gf-table tr:last-child td,
.result-table tr:last-child th,
.result-table tr:last-child td { border-bottom: 0; }
.gf-table th, .result-table th {
    width: 34%;
    color: var(--muted-foreground);
    font-weight: 500;
    background: rgba(245,245,245,.5);
}
.gf-table td, .result-table td {
    color: var(--foreground);
    font-weight: 500;
    word-break: break-word;
}

.gf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.gf-list a, .gf-list > li > span {
    display: block;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--foreground);
    transition: border-color .15s ease, background .15s ease;
}
.gf-list a:hover {
    border-color: rgba(23,23,23,.3);
    background: rgba(245,245,245,.4);
    text-decoration: none;
}

.gf-form .form-row, .form-row { margin-bottom: 16px; }
.gf-form label, .form-row > label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}
.gf-form input[type=text],
.gf-form input[type=email],
.gf-form input[type=number],
.gf-form input[type=password],
.gf-form textarea,
.gf-form select,
input[type=text],
input[type=email],
input[type=number],
input[type=password],
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    color: var(--foreground);
    background: var(--background);
}
.gf-form input:focus,
.gf-form textarea:focus,
.gf-form select:focus,
input[type=text]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(23,23,23,.4);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}
.price-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    background: var(--muted);
    border-radius: 6px;
    margin-bottom: 16px;
}
.gf-prose { font-size: 15px; line-height: 1.8; }
.gf-prose h2, .gf-prose h3 { margin: 1.6em 0 .6em; font-weight: 600; }
.gf-prose p { margin: 0 0 1em; }
.gf-prose img { max-width: 100%; height: auto; }

.gf-user-shell {
    position: relative;
    margin: 0 -16px;
    padding: 8px 16px 32px;
}
@media (min-width: 640px) {
    .gf-user-shell { margin: 0 -24px; padding: 12px 24px 40px; }
}
.gf-user-shell__grid {
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: .035;
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.gf-user {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    min-width: 0;
}
.gf-user__aside {
    position: sticky;
    top: 52px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 -16px;
    padding: 6px 12px 10px;
    min-width: 0;
    max-width: none;
    width: auto;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--background) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.gf-user__aside-head {
    display: none;
}
.gf-user__aside-head strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.02em;
}
.gf-user__nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 6px 10px 6px 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    scroll-padding-inline: 10px;
    box-sizing: border-box;
}
.gf-user__nav::-webkit-scrollbar { display: none; }
.gf-user__nav a {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 9px 13px;
    border-radius: 10px;
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    min-height: 36px;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gf-user__nav a:hover {
    background: var(--muted);
    color: var(--foreground);
    text-decoration: none;
}
.gf-user__nav a.is-active {
    background: var(--foreground);
    color: var(--background);
    font-weight: 600;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.gf-user__nav-divider {
    display: none;
}
.gf-user__aside-link {
    display: none;
}
.gf-user__main {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .gf-user {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 28px;
    }
    .gf-user__aside {
        position: sticky;
        top: 80px;
        z-index: auto;
        gap: 12px;
        margin: 0;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 0;
    }
    .gf-user__aside-head {
        display: block;
        padding: 4px 4px 0;
    }
    .gf-user__nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        overflow: visible;
        padding: 8px;
        border-radius: 16px;
    }
    .gf-user__nav a {
        flex: none;
        padding: 10px 12px;
        white-space: normal;
        min-height: 0;
        border: 0;
        box-shadow: none;
    }
    .gf-user__nav a:hover,
    .gf-user__nav a.is-active {
        background: var(--muted);
        color: var(--foreground);
    }
    .gf-user__nav a.is-active {
        font-weight: 650;
    }
    .gf-user__nav-divider {
        display: block;
        height: 1px;
        margin: 6px 8px;
        background: var(--border);
    }
    .gf-user__aside-link {
        display: inline-flex;
        align-items: center;
        padding: 0 6px;
        font-size: 12px;
        color: var(--muted-foreground);
    }
}

.gf-user-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px 16px;
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.06);
}
.gf-user-hero--guest { align-items: flex-start; }
.gf-user-hero__profile {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.gf-user-hero__avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 1px solid var(--border);
    object-fit: cover;
    background: var(--muted);
    flex: 0 0 auto;
}
.gf-user-hero__meta { min-width: 0; }
.gf-user-hero__meta h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.02em;
    word-break: break-word;
}
.gf-user-hero__meta p {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-user-hero__meta strong {
    color: var(--foreground);
    font-weight: 700;
}
.gf-user-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}
.gf-user-hero__actions .gf-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    font-weight: 600;
}
@media (min-width: 1024px) {
    .gf-user-hero {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 24px 20px;
        border-radius: 20px;
    }
    .gf-user-hero__avatar {
        width: 72px;
        height: 72px;
        border-radius: 999px;
    }
    .gf-user-hero__meta h2 { font-size: 20px; }
    .gf-user-hero__actions {
        width: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .gf-user-hero__actions .gf-btn {
        width: auto;
        min-height: 0;
    }
}
.gf-user-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.gf-user-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 118px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 16px;
    background: var(--card);
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gf-user-stat:hover {
    border-color: rgba(23,23,23,.28);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.08);
}
.gf-user-stat__label {
    font-size: 12px;
    color: var(--muted-foreground);
    font-weight: 500;
}
.gf-user-stat__value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--foreground);
}
.gf-user-stat__hint {
    margin-top: auto;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-user-stat--accent {
    background: var(--foreground);
    border-color: var(--foreground);
    color: var(--primary-foreground);
}
.gf-user-stat--accent .gf-user-stat__label,
.gf-user-stat--accent .gf-user-stat__hint,
.gf-user-stat--accent .gf-user-stat__value {
    color: var(--primary-foreground);
}
.gf-user-stat--accent .gf-user-stat__hint { opacity: .78; }
.gf-user-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gf-user-logout { margin-top: 28px; }
.gf-user-panel {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.gf-user-panel__scroll { overflow-x: auto; }
.gf-user-panel .gf-table { margin: 0; }
.gf-user-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 24px 20px;
    border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--muted) 35%, transparent);
}
.gf-user-empty p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 14px;
}

/* —— User center list (orders / query logs) —— */
.gf-user-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gf-user-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gf-user-item:hover {
    border-color: color-mix(in srgb, var(--foreground) 20%, var(--border));
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .08);
}
@media (min-width: 1024px) {
    .gf-user-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px 20px;
        padding: 18px;
        border-radius: 16px;
    }
    .gf-user-item:hover {
        transform: translateY(-1px);
    }
}
.gf-user-item--abandoned {
    opacity: .72;
}
.gf-user-item--abandoned .gf-user-item__amount {
    color: var(--muted-foreground);
    font-weight: 600;
}
.gf-user-item__main {
    min-width: 0;
    flex: 1;
}
.gf-user-item__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 6px;
}
.gf-user-item__title {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.35;
    color: var(--foreground);
}
.gf-user-item__amount {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
}
.gf-user-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.5;
}
.gf-user-item__meta > span:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-left: 12px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
    vertical-align: middle;
    transform: translateY(-1px);
}
.gf-user-item__mono {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .01em;
}
.gf-user-item__sn {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-user-item__sn--lg {
    margin: 2px 0 8px;
    font-size: 13px;
    color: var(--foreground);
}
.gf-user-item__sn code {
    font-family: var(--font-mono);
    font-size: inherit;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--muted) 70%, transparent);
    color: var(--foreground);
    word-break: break-all;
}
.gf-user-item__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
@media (min-width: 1024px) {
    .gf-user-item__actions {
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 8px;
        padding-top: 0;
        border-top: 0;
    }
}
.gf-user-item__hint {
    font-size: 12px;
    color: var(--muted-foreground);
    white-space: nowrap;
}
.gf-user-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    border: 1px solid transparent;
}
.gf-user-badge--ok {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}
.gf-user-badge--warn {
    color: #9a3412;
    background: #ffedd5;
    border-color: #fed7aa;
}
.gf-user-badge--bad {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}
.gf-user-badge--muted {
    color: var(--muted-foreground);
    background: color-mix(in srgb, var(--muted) 80%, transparent);
    border-color: var(--border);
}
.gf-btn--sm {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 10px;
}
.gf-user-pager {
    margin-top: 18px;
}
.gf-user-pager nav {
    display: flex;
    justify-content: center;
}

.gf-user-log__value {
    font-family: var(--font-mono);
    letter-spacing: .02em;
}
.gf-user-log__meta {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-user-log__link {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    color: var(--muted-foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gf-user-log__link:hover { color: var(--foreground); }

/* —— WeChat scan login —— */
.gf-login-page { max-width: 420px; margin: 0 auto; }
.gf-login-card {
    margin-top: 8px;
    padding: 22px 18px 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    text-align: center;
}
.gf-login-card__qr {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
}
.gf-login-card__qr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gf-login-card__loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.88);
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-login-card__loading[hidden] { display: none !important; }
.gf-login-card__code {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--muted);
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-login-card__code strong {
    font-size: 22px;
    letter-spacing: .18em;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}
.gf-login-card__code[hidden] { display: none !important; }
.gf-login-card__tip {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted-foreground);
}
.gf-login-card__status {
    min-height: 1.4em;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--muted-foreground);
}

/* —— Support chat (zip1 style) —— */
.gf-support { position: relative; z-index: 60; }
.gf-support__fab {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 61;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--foreground);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    cursor: pointer;
    transition: transform .15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .gf-support__fab:hover { transform: scale(1.05); }
}
.gf-support__fab-icon--close { display: none; }
.gf-support__fab.is-open .gf-support__fab-icon--chat { display: none; }
.gf-support__fab.is-open .gf-support__fab-icon--close { display: block; }
.gf-support__fab.is-open .gf-support__ping { display: none; }
.gf-support__ping {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #10b981;
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(16,185,129,.5);
    animation: gf-support-ping 1.8s ease-out infinite;
}
@keyframes gf-support-ping {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); }
    70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.gf-support__panel {
    position: fixed;
    right: 20px;
    bottom: 96px;
    z-index: 61;
    width: min(400px, calc(100vw - 2.5rem));
    height: min(600px, calc(100vh - 8rem));
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 24px 60px rgba(0,0,0,.16);
    overflow: hidden;
}
.gf-support__panel[hidden] {
    display: none !important;
}
.gf-support__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 55%, #fff);
}
.gf-support__avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--foreground);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.gf-support__meta { flex: 1; min-width: 0; }
.gf-support__meta strong { display: block; font-size: 14px; }
.gf-support__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-support__meta span i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #10b981;
}
.gf-support__icon-btn {
    border: 0;
    background: transparent;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--muted-foreground);
}
.gf-support__icon-btn:hover { background: var(--muted); color: var(--foreground); }
.gf-support__body {
    flex: 1;
    overflow: auto;
    padding: 14px;
    display: grid;
    gap: 12px;
    align-content: start;
}
.gf-support__msg {
    max-width: 92%;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.85;
    word-break: break-word;
}
.gf-support__msg--bot {
    background: var(--muted);
    color: var(--foreground);
    border-bottom-left-radius: 6px;
    white-space: normal;
}
.gf-support__msg--bot p {
    margin: 0 0 0.85em;
}
.gf-support__msg--bot p:last-child { margin-bottom: 0; }
.gf-support__msg--bot br {
    content: "";
    display: block;
    margin-top: 0.45em;
}
.gf-support__msg--user {
    margin-left: auto;
    background: var(--foreground);
    color: #fff;
    border-bottom-right-radius: 6px;
    white-space: pre-wrap;
    line-height: 1.65;
}
.gf-support__link {
    color: inherit;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
.gf-support__msg--bot .gf-support__link { color: var(--foreground); }
.gf-support__faqs { display: flex; flex-wrap: wrap; gap: 6px; }
.gf-support__faq {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}
.gf-support__faq:hover { border-color: var(--foreground); }
.gf-support__typing { font-size: 12px; color: var(--muted-foreground); }
.gf-support__composer {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}
.gf-support__composer input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 14px;
    background: #fff;
    font-size: 16px; /* 微信/iOS：小于 16px 的 focus 会整页放大 */
    line-height: 1.25;
    -webkit-appearance: none;
    appearance: none;
}
.gf-support__composer button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: var(--foreground);
    color: #fff;
    cursor: pointer;
}
.gf-support__disclaimer {
    margin: 0;
    padding: 0 14px 10px;
    font-size: 11px;
    color: var(--muted-foreground);
    text-align: center;
}

/* —— 404 —— */
.gf-404 {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: min(78vh, 720px);
    display: grid;
    place-items: center;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(90% 70% at 50% -20%, #e8eef6 0%, transparent 58%),
        radial-gradient(50% 40% at 100% 100%, #f3f5f8 0%, transparent 55%),
        linear-gradient(180deg, #f6f7f9 0%, #ffffff 68%);
}
.gf-404__glow {
    position: absolute;
    inset: 18% 20% auto;
    height: 42%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 23, 23, .06), transparent 70%);
    filter: blur(28px);
    animation: gf-404-pulse 6.5s ease-in-out infinite;
}
.gf-404__grid {
    pointer-events: none;
    position: absolute;
    inset: -10%;
    opacity: .04;
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gf-404-drift 28s linear infinite;
}
.gf-404__orbit {
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.gf-404__orbit span {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: rgba(23, 23, 23, .22);
    white-space: nowrap;
    animation: gf-404-float 14s ease-in-out infinite;
}
.gf-404__orbit span:nth-child(1) { top: 18%; left: 8%; animation-delay: 0s; }
.gf-404__orbit span:nth-child(2) { top: 28%; right: 10%; animation-delay: -3s; }
.gf-404__orbit span:nth-child(3) { bottom: 22%; left: 14%; animation-delay: -6s; }
.gf-404__orbit span:nth-child(4) { bottom: 18%; right: 16%; animation-delay: -9s; }
.gf-404__inner {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 56px 20px 64px;
    text-align: center;
    animation: gf-404-rise .7s cubic-bezier(.22, 1, .36, 1) both;
}
.gf-404__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--foreground);
}
.gf-404__brand img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}
.gf-404__code {
    margin: 0;
    font-family: var(--font-mono);
    font-size: clamp(4.5rem, 18vw, 7.5rem);
    font-weight: 600;
    line-height: .9;
    letter-spacing: -.06em;
    color: var(--foreground);
    text-shadow: 0 18px 40px rgba(23, 23, 23, .08);
    animation: gf-404-soft 5s ease-in-out infinite;
}
.gf-404__title {
    margin: 18px 0 0;
    font-size: clamp(1.35rem, 3.6vw, 1.75rem);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.35;
}
.gf-404__lead {
    margin: 12px auto 0;
    max-width: 34em;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted-foreground);
}
.gf-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}
.gf-404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
.gf-404__links a {
    font-size: 13px;
    color: var(--muted-foreground);
    transition: color .15s ease;
}
.gf-404__links a:hover { color: var(--foreground); }
@keyframes gf-404-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes gf-404-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-48px, -48px, 0); }
}
@keyframes gf-404-float {
    0%, 100% { transform: translateY(0); opacity: .35; }
    50% { transform: translateY(-10px); opacity: .55; }
}
@keyframes gf-404-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: .9; transform: scale(1.06); }
}
@keyframes gf-404-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .gf-404__glow,
    .gf-404__grid,
    .gf-404__orbit span,
    .gf-404__inner,
    .gf-404__code { animation: none; }
}
@media (max-width: 639px) {
    .gf-404 { min-height: min(72vh, 640px); }
    .gf-404__inner { padding: 40px 16px 48px; }
    .gf-404__brand { margin-bottom: 20px; font-size: 1.2rem; }
    .gf-404__orbit span:nth-child(3),
    .gf-404__orbit span:nth-child(4) { display: none; }
}

/* —— Home / query surface —— */
.gf-hero {
    position: relative;
    overflow: clip;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(120% 80% at 50% -10%, #eef2f7 0%, transparent 55%),
        linear-gradient(180deg, #f7f8fa 0%, #ffffff 72%);
}
.gf-hero__grid {
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: .035;
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 56px 56px;
}
.gf-hero__inner {
    position: relative;
    max-width: 768px;
    margin: 0 auto;
    padding: 28px 16px 24px;
    text-align: center;
}
@media (min-width: 640px) {
    .gf-hero__inner { padding: 56px 24px 40px; }
}
.gf-hero__brand {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.gf-hero__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    font-family: var(--font-brand);
    font-size: clamp(1.75rem, 5.5vw, 3rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--foreground);
}
.gf-hero__logo img {
    width: clamp(36px, 8vw, 52px);
    height: clamp(36px, 8vw, 52px);
    object-fit: contain;
    flex: 0 0 auto;
}
.gf-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    padding: 4px 12px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-hero__badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}
.gf-hero h1:not(.gf-hero__logo) {
    margin: 0;
    font-size: clamp(1.55rem, 5.2vw, 3rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.18;
    text-wrap: balance;
}
.gf-hero__lead {
    margin: 8px auto 0;
    max-width: 28rem;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted-foreground);
}
@media (min-width: 640px) {
    .gf-hero__lead { margin-top: 10px; font-size: 15px; }
}

.gf-search { margin: 18px auto 0; max-width: 42rem; text-align: left; }
.gf-search--hero {
    margin-top: 20px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, #c8d0dc);
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 10px 28px rgba(15,23,42,.06);
}
.gf-search--query {
    margin: 12px 0 0;
    max-width: none;
}
@media (min-width: 640px) {
    .gf-search--hero {
        margin-top: 28px;
        padding: 18px;
        border-radius: 20px;
    }
}
.gf-search__field {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gf-search__field:focus-within {
    border-color: rgba(23,23,23,.45);
    box-shadow: 0 0 0 3px rgba(23,23,23,.06), 0 8px 24px rgba(0,0,0,.05);
}
.gf-search__field input {
    flex: 1;
    min-width: 0;
    height: 64px;
    border: 0;
    background: transparent;
    padding: 0 140px 0 18px !important;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: .02em;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.gf-search__field input::placeholder {
    font-family: var(--font-sans);
    letter-spacing: normal;
    color: var(--muted-foreground);
}
.gf-search__field input:focus { outline: none; }
.gf-search__btn {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--foreground);
    color: var(--primary-foreground);
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.gf-search__btn:hover { opacity: .9; }
.gf-search__btn:disabled,
.gf-search__btn.is-loading,
.gf-panel__row button:disabled,
.gf-panel__row button.is-loading {
    opacity: .78;
    cursor: wait;
}
.gf-search__btn.is-loading { min-width: 108px; }
.gf-search__btn-arrow { line-height: 1; }
.gf-query-wait {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
}
.gf-query-wait[hidden] { display: none !important; }
.gf-query-wait__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--background) 72%, transparent);
    backdrop-filter: blur(6px);
}
.gf-query-wait__card {
    position: relative;
    width: min(100%, 360px);
    padding: 26px 22px 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--muted) 80%, transparent), transparent 55%),
        var(--card);
    box-shadow: 0 16px 48px rgba(0,0,0,.08);
    text-align: center;
}
.gf-query-wait__spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 14px;
    border-radius: 999px;
    border: 2px solid var(--border);
    border-top-color: var(--foreground);
    animation: gf-query-spin .7s linear infinite;
}
.gf-query-wait__title {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.02em;
}
.gf-query-wait__hint {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.5;
}
.gf-query-wait__tip {
    margin-top: 16px;
    padding: 12px 12px 11px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--muted) 55%, transparent);
    text-align: left;
    min-height: 74px;
}
.gf-query-wait__tip-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.gf-query-wait__tip-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--foreground);
    transition: opacity .18s ease, transform .18s ease;
}
.gf-query-wait__tip-text.is-out {
    opacity: 0;
    transform: translateY(4px);
}
.gf-query-wait__tip-text.is-in {
    opacity: 1;
    transform: translateY(0);
}
@keyframes gf-query-spin {
    to { transform: rotate(360deg); }
}
html.gf-query-waiting,
html.gf-query-waiting body {
    overflow: hidden;
}
.gf-search__meta {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-search__meta-top {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.gf-search__desc {
    min-width: 0;
}
.gf-search__desc-clamp {
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted-foreground);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.gf-search__desc-clamp.is-open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.gf-search__desc-clamp p { margin: 0 0 .4em; }
.gf-search__desc-clamp p:last-child { margin-bottom: 0; }
.gf-search__desc-toggle {
    margin-top: 4px;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--foreground);
    cursor: pointer;
}
.gf-search__desc-toggle:hover { opacity: .7; }
.gf-search__meta > .gf-search__chips {
    width: 100%;
    max-width: 100%;
}
.gf-search__service {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gf-search__service::-webkit-scrollbar { display: none; }
.gf-search__service-name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gf-search__service-links {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    margin-left: 0;
    white-space: nowrap;
}
.gf-search__service-sep {
    margin: 0 3px;
    color: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
    font-size: 12px;
    line-height: 1;
    user-select: none;
}
.gf-search__service-links .gf-search__extra-btn {
    font-size: 12px;
    letter-spacing: 0;
}
.gf-search__extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-top: 2px;
}
.gf-search__extras a,
.gf-search__extra-btn {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
}
.gf-search__extras a:hover,
.gf-search__extra-btn:hover,
.gf-search__extra-btn.is-active {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gf-search__service > .gf-limit-free,
.gf-search__service > .gf-deal-price,
.gf-search__service > .gf-search__service-price {
    flex: 0 0 auto;
}
.gf-search__service-price {
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-deal-price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    font-weight: 650;
    color: var(--gf-deal-deep);
    line-height: 1.35;
    vertical-align: middle;
}
.gf-deal-zhe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--gf-deal-soft);
    border: 1px solid var(--gf-deal-line);
    color: var(--gf-deal-deep);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
}
.gf-deal-price .gf-price-strike {
    color: var(--gf-deal);
    opacity: .72;
}
.gf-limit-free {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    border-radius: 999px;
    background: var(--gf-free-soft);
    border: 1px solid var(--gf-free-line);
    color: var(--gf-free-deep);
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .04em;
    line-height: 1.35;
    vertical-align: middle;
}
.gf-limit-free .gf-price-strike {
    margin-left: 0;
    color: var(--gf-free);
    font-weight: 500;
    opacity: .72;
}
.gf-price-strike {
    margin-left: 4px;
    font-weight: 400;
    color: var(--muted-foreground);
    text-decoration: line-through;
    opacity: .72;
}
.gf-query-info__price .gf-limit-free {
    margin-left: 6px;
}
.gf-search__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    row-gap: 12px;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 8px 6px 2px;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
.gf-search__chips::-webkit-scrollbar { display: none; width: 0; height: 0; }
.gf-search__chips > span {
    flex: 0 0 auto;
    color: rgba(115,115,115,.7);
    white-space: nowrap;
    font-size: 13px;
}
.gf-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    padding: 7px 14px 7px 10px;
    font-size: 13px;
    color: var(--foreground);
    transition: background .15s ease;
    box-sizing: border-box;
    overflow: visible;
}
.gf-chip:hover { background: var(--muted); text-decoration: none; }
.gf-chip.is-active { background: var(--foreground); border-color: var(--foreground); color: var(--primary-foreground); }

/* Quick service mini-cards (home / query) */
.gf-svc-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.gf-svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 9px 12px 8px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--foreground);
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
.gf-svc-card:hover {
    border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
    background: color-mix(in srgb, var(--muted) 70%, #fff);
    text-decoration: none;
}
.gf-svc-card.is-active {
    border-color: #525252;
    background: #f4f4f5;
    color: var(--foreground);
    box-shadow: none;
}
.gf-svc-card.is-active .gf-card__icon {
    background: color-mix(in srgb, var(--muted) 80%, #e5e5e5);
    color: inherit;
}
.gf-svc-card.is-active .gf-chip__corner {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 55%, #fff);
}
.gf-svc-card__top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.gf-svc-card__top .gf-card__icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    flex: 0 0 auto;
}
.gf-svc-card__name {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
    line-height: 1.25;
    white-space: nowrap;
}
.gf-svc-card__blurb {
    display: block;
    padding-left: 26px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 11.5rem;
}
.gf-svc-card--more .gf-svc-card__blurb { padding-left: 0; }
.gf-svc-card--link .gf-svc-card__blurb { padding-left: 26px; }
.gf-svc-card.is-free .gf-card__icon {
    background: var(--gf-free-soft);
    color: var(--gf-free);
}
.gf-svc-card.is-deal .gf-card__icon {
    background: var(--gf-deal-soft);
    color: var(--gf-deal);
}
.gf-svc-card.is-featured { /* hot corner already positioned */ }
.gf-chip .gf-card__icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--muted);
}
.gf-chip.is-active .gf-card__icon {
    background: rgba(255,255,255,.14);
    color: inherit;
}
.gf-chip--free .gf-card__icon {
    background: var(--gf-free-soft);
    color: var(--gf-free);
}
.gf-chip--deal .gf-card__icon {
    background: var(--gf-deal-soft);
    color: var(--gf-deal);
}
.gf-chip--free.is-active .gf-card__icon {
    background: rgba(255,255,255,.18);
    color: #6ee7b7;
}
.gf-chip--deal.is-active .gf-card__icon {
    background: rgba(255,255,255,.18);
    color: #fdba74;
}
.gf-chip__text {
    line-height: 1.2;
}
.gf-chip__corner {
    position: absolute;
    top: -7px;
    right: -6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 0 0 2px var(--background);
    pointer-events: none;
}
.gf-chip__corner--hot {
    background: #ea580c;
    color: #fff;
}
.gf-chip.is-active .gf-chip__corner {
    box-shadow: 0 0 0 2px var(--foreground);
}
.gf-chip--featured {
    gap: 6px;
}
.gf-chip--oneclick {
    gap: 6px;
    margin-top: 0;
    border: 1px solid rgba(23,23,23,.28);
    background: var(--card);
    color: var(--foreground);
    padding: 5px 12px 5px 8px;
    font-size: 13px;
    font-weight: 600;
}
.gf-chip--oneclick:hover {
    background: var(--muted);
    border-color: rgba(23,23,23,.4);
    color: var(--foreground);
    text-decoration: none;
}
.gf-chip--hot {
    gap: 6px;
    padding-left: 10px;
}
.gf-chip__hot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 4px;
    background: #ea580c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    flex: 0 0 auto;
}
.gf-chip--free { gap: 6px; }
.gf-chip--deal { gap: 6px; }
.gf-chip__free {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 4px;
    background: var(--gf-free);
    color: #fff;
    flex: 0 0 auto;
    line-height: 0;
}
.gf-chip__free svg {
    display: block;
    flex: 0 0 auto;
}
.gf-chip__deal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    border-radius: 4px;
    background: var(--gf-deal);
    color: #fff;
    flex: 0 0 auto;
    line-height: 0;
}
.gf-chip__deal svg {
    display: block;
    flex: 0 0 auto;
}
.gf-chip.is-active .gf-chip__free {
    background: #fff;
    color: var(--gf-free-deep);
}
.gf-chip.is-active .gf-chip__deal {
    background: #fff;
    color: var(--gf-deal-deep);
}
.gf-chip__arrow {
    font-size: 11px;
    opacity: .65;
}
.gf-chip__rec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    border-radius: 4px;
    background: #0f766e;
    color: #fff;
    flex: 0 0 auto;
    line-height: 0;
}
.gf-chip__rec svg {
    display: block;
    flex: 0 0 auto;
}
.gf-chip.is-active .gf-chip__rec {
    background: #fff;
    color: #0f766e;
}
.gf-chip__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--foreground);
    color: var(--primary-foreground);
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
}
.gf-chip__arrow {
    opacity: .65;
    font-weight: 500;
}
.gf-chip--more {
    border-style: dashed;
    color: var(--muted-foreground);
    font-weight: 500;
}
.gf-chip--more:hover {
    border-style: solid;
    border-color: rgba(23,23,23,.35);
    color: var(--foreground);
    background: var(--muted);
}
.gf-home-service {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--muted) 70%, #fff);
    text-align: left;
}
.gf-home-service__clamp {
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted-foreground);
}
.gf-home-service__clamp.is-open {
    display: block;
}
.gf-home-service__clamp p { margin: 0 0 .45em; }
.gf-home-service__clamp p:last-child { margin-bottom: 0; }
.gf-home-service__example-body {
    margin-top: 14px;
    text-align: left;
    max-height: min(70vh, 520px);
    overflow: auto;
}
.gf-home-service__example-body .gf-example,
.gf-home-service__example-body .gf-example__row,
.gf-home-service__example-body .gf-example__row dt,
.gf-home-service__example-body .gf-example__row dd {
    text-align: left;
}
#home-query-error.gf-search__error {
    margin-top: 10px;
}
.gf-search__error {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(220,38,38,.25);
    border-radius: 12px;
    background: var(--gf-danger-bg);
    color: var(--destructive);
    font-size: 14px;
}
.gf-search__hint {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, #0f766e 22%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, #0f766e 8%, #fff);
    color: #0f766e;
    font-size: 13px;
    line-height: 1.5;
}

.gf-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin: 48px auto 0;
    max-width: 42rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--border);
}
@media (min-width: 640px) { .gf-stats { grid-template-columns: repeat(4, 1fr); } }
.gf-stats > div { background: var(--card); padding: 20px 16px; }
.gf-stats dt { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.gf-stats dd { margin: 4px 0 0; font-size: 12px; color: var(--muted-foreground); }

.gf-block { max-width: var(--wrap); margin: 0 auto; padding: 64px 16px; }
@media (min-width: 640px) { .gf-block { padding: 80px 24px; } }
.gf-block--muted {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(245,245,245,.3);
}
.gf-block__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 640px) {
    .gf-block__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}
.gf-block__head h2 {
    margin: 8px 0 0;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -.02em;
}
.gf-block__head p {
    margin: 8px 0 0;
    max-width: 36rem;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted-foreground);
}
.gf-block__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
}
.gf-block__more:hover { text-decoration: underline; }

.gf-cards {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}
@media (min-width: 640px) { .gf-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gf-cards { grid-template-columns: repeat(3, 1fr); } }
.gf-cards--4 { }
@media (min-width: 640px) { .gf-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gf-cards--4 { grid-template-columns: repeat(4, 1fr); } }

.gf-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 14px 16px;
    transition: border-color .15s ease, background .15s ease;
}
.gf-card--service {
    position: relative;
    padding: 10px 12px;
}
.gf-card--service.is-free .gf-card__icon {
    background: var(--gf-free-soft);
    color: var(--gf-free);
}
.gf-card--service.is-deal .gf-card__icon {
    background: var(--gf-deal-soft);
    color: var(--gf-deal);
}
.gf-card--service .gf-chip__corner {
    top: 8px;
    right: 8px;
}
.gf-card:hover { border-color: rgba(23,23,23,.3); }
.gf-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.gf-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--muted);
    color: var(--foreground);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.gf-card__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--muted-foreground);
    font-size: 12px;
}
.gf-card__go:hover { background: var(--muted); color: var(--foreground); text-decoration: none; }
.gf-card h3 {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}
.gf-card--service h3 { margin-top: 6px; }
.gf-card h3 a:hover { color: rgba(23,23,23,.7); }
.gf-card__desc {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-foreground);
}
.gf-card__price {
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-card__free-tag {
    margin-right: 6px;
    vertical-align: middle;
}
.gf-card details { margin-top: 8px; }
.gf-card summary {
    list-style: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-foreground);
}
.gf-card summary::-webkit-details-marker { display: none; }
.gf-card summary:hover { color: var(--foreground); }
.gf-card details:not([open]) .gf-card__summary-open { display: none; }
.gf-card details[open] .gf-card__summary-closed { display: none; }
.gf-card__detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted-foreground);
}
.gf-card__desc-full { margin: 0; }
.gf-card__example-wrap { margin-top: 10px; }
.gf-card__example-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--foreground);
}
.gf-card__detail-link { margin: 10px 0 0; }
.gf-card__links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.gf-card__links a {
    font-size: 12px;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gf-card__links a:hover { opacity: .7; }
.gf-card--links { cursor: default; }
.gf-card--links:hover { border-color: var(--border); }

.gf-example {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--muted);
    overflow: hidden;
}
.gf-example__row {
    display: grid;
    grid-template-columns: minmax(72px, 96px) 1fr;
    gap: 8px;
    padding: 7px 10px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    line-height: 1.45;
}
.gf-example__row:first-child { border-top: 0; }
.gf-example__row dt {
    margin: 0;
    color: var(--muted-foreground);
    font-weight: 500;
}
.gf-example__row dd {
    margin: 0;
    color: var(--foreground);
    word-break: break-word;
}
.gf-example__plain {
    grid-column: 1 / -1;
    color: var(--foreground);
}
.gf-example--raw {
    padding: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}
.gf-example__more {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-example__note {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.gf-example-panel {
    margin-top: 12px;
    padding: 12px !important;
    max-width: 100%;
    overflow: hidden;
}
@media (min-width: 640px) {
    .gf-example-panel { margin-top: 16px; padding: 14px 16px !important; }
}
.gf-example-panel > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}
.gf-example-panel .gf-card__detail {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gf-query-related {
    margin-top: 28px;
}
.gf-query-related h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.gf-query-related .gf-service-rows {
    margin-top: 12px;
    gap: 8px;
}
.gf-query-related .gf-service-row {
    padding: 12px;
}
.gf-query-back {
    margin-top: 36px;
}
.gf-query-back a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
}
@media (min-width: 640px) {
    .gf-query-related { margin-top: 48px; }
    .gf-query-related .gf-service-rows { margin-top: 16px; }
    .gf-query-back { margin-top: 56px; }
}

.gf-reviews {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 16px 16px 10px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
@media (min-width: 640px) {
    .gf-reviews { padding: 20px 24px 12px; }
}
.gf-reviews__head {
    max-width: 720px;
    margin: 0 auto 10px;
    padding: 0;
    text-align: center;
}
.gf-reviews__head .gf-eyebrow {
    margin-bottom: 0;
}
.gf-reviews__head h2 {
    margin: 2px 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
@media (min-width: 640px) {
    .gf-reviews__head h2 { font-size: 1.2rem; }
}
.gf-reviews__head > p:last-child {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-foreground);
}
.gf-reviews__viewport {
    position: relative;
    overflow: hidden;
    padding: 2px 0 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gf-reviews__viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
.gf-reviews__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}
.gf-reviews__group {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    flex: 0 0 auto;
}
.gf-review-card {
    flex: 0 0 min(280px, 78vw);
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gf-reviews__viewport.is-animated .gf-review-card {
    animation: gf-review-float 4.8s ease-in-out infinite;
}
.gf-reviews__viewport.is-animated .gf-reviews__group:first-child .gf-review-card:nth-child(2n) {
    animation-delay: -.8s;
}
.gf-reviews__viewport.is-animated .gf-reviews__group:first-child .gf-review-card:nth-child(3n) {
    animation-delay: -1.6s;
}
.gf-reviews__viewport.is-animated .gf-reviews__group:first-child .gf-review-card:nth-child(4n) {
    animation-delay: -2.4s;
}
.gf-reviews__viewport:hover .gf-review-card,
.gf-reviews__viewport:focus-within .gf-review-card {
    animation-play-state: paused;
}
.gf-review-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--foreground) 18%, var(--border));
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.gf-review-card__user {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.gf-review-card__avatar {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--muted);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.gf-review-card__meta {
    min-width: 0;
    display: grid;
    gap: 1px;
}
.gf-review-card__who-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
}
.gf-review-card__who-row strong {
    font-size: 12px;
    font-weight: 650;
    color: var(--foreground);
}
.gf-review-card__who-row span {
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-review-card__time {
    font-size: 11px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}
.gf-review-card__time::before {
    content: '·';
    margin-right: 5px;
    opacity: .7;
}
.gf-review-card__code {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 10px;
    color: var(--muted-foreground);
}
.gf-review-card__code em {
    flex: 0 0 auto;
    font-style: normal;
    font-weight: 650;
    font-size: 9px;
    letter-spacing: .04em;
    color: var(--muted-foreground);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 5px;
    background: var(--muted);
}
.gf-review-card__code code {
    font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .02em;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gf-review-card__stars {
    display: inline-flex;
    gap: 0;
    color: #d4d4d4;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .02em;
    align-self: start;
    margin-top: 1px;
}
.gf-review-card__stars i {
    font-style: normal;
}
.gf-review-card__stars i.is-on {
    color: #f59e0b;
    text-shadow: none;
}
.gf-review-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--foreground);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
@keyframes gf-review-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

.gf-channels {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 20px 16px 0;
}
@media (min-width: 640px) { .gf-channels { padding: 24px 24px 0; } }
.gf-channels__grid {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .gf-channels__grid { grid-template-columns: repeat(3, 1fr); } }
.gf-channel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 12px 12px 12px 42px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.gf-channel--static {
    cursor: default;
}
a.gf-channel:hover,
button.gf-channel:hover {
    border-color: rgba(23,23,23,.3);
    background: var(--muted);
    text-decoration: none;
}
.gf-channel__icon {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground);
}
.gf-channel__tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.gf-channel__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    padding-right: 16px;
}
.gf-channel__desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-foreground);
}
.gf-channel__go {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-channel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 8px;
}
.gf-channel__links a,
.gf-channel__links button {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.gf-channel__links a:hover,
.gf-channel__links button:hover {
    opacity: .7;
}

.gf-modal[hidden] { display: none !important; }
.gf-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gf-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, .45);
}
.gf-modal__panel {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: min(88vh, 720px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    padding: 24px 22px;
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
    text-align: left;
}
.gf-modal__panel h3,
.gf-modal__panel > p {
    text-align: left;
}
.gf-modal__panel--wide { width: min(560px, 100%); }
.gf-modal__panel h3 {
    margin: 0 28px 0 0;
    font-size: 18px;
    font-weight: 600;
}
.gf-modal__panel > p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted-foreground);
}
.gf-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.gf-modal__close:hover { background: var(--muted); color: var(--foreground); }
.gf-modal__qr {
    display: block;
    width: 220px;
    height: 220px;
    margin: 20px auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    object-fit: cover;
}
.gf-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.gf-find-sn {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}
.gf-find-sn__card {
    display: grid;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--background);
    padding: 12px;
}
@media (min-width: 560px) {
    .gf-find-sn__card {
        grid-template-columns: 132px 1fr;
        align-items: start;
        padding: 14px;
    }
}
.gf-find-sn__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    border-radius: 12px;
    background: linear-gradient(160deg, #f3f3f3 0%, #ebebeb 100%);
}
.gf-find-sn__visual--photo {
    padding: 0;
    overflow: hidden;
    background: #111;
}
.gf-find-sn__photo-link {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 132px;
}
.gf-find-sn__photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 132px;
    object-fit: cover;
    object-position: center;
}
.gf-find-sn__model-compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    width: 100%;
}
.gf-find-sn__model-arrow {
    color: var(--muted-foreground);
    font-size: 14px;
    line-height: 1;
}
.gf-find-sn__model-pill {
    width: 100%;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--border);
    text-align: center;
}
.gf-find-sn__model-pill span {
    display: block;
    font-size: 10px;
    color: var(--muted-foreground);
    margin-bottom: 2px;
}
.gf-find-sn__model-pill strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}
.gf-find-sn__model-pill.is-off {
    opacity: .72;
    background: #fafafa;
}
.gf-find-sn__model-pill.is-off strong {
    text-decoration: line-through;
    color: var(--muted-foreground);
    font-weight: 600;
}
.gf-find-sn__model-pill.is-on {
    border-color: color-mix(in srgb, #0f766e 45%, var(--border));
    background: color-mix(in srgb, #0f766e 8%, #fff);
}
.gf-find-sn__model-pill.is-on strong {
    color: #0f766e;
}
.gf-find-sn__body { min-width: 0; }
.gf-find-sn__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: var(--foreground);
    color: var(--primary-foreground);
    font-size: 11px;
    font-weight: 700;
}
.gf-find-sn__body h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
}
.gf-find-sn__body p,
.gf-find-sn__body li {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted-foreground);
}
.gf-find-sn__body ul,
.gf-find-sn__body ol {
    margin: 8px 0 0;
    padding-left: 1.15em;
}
.gf-find-sn__body li + li { margin-top: 4px; }
.gf-find-sn__body strong { color: var(--foreground); font-weight: 600; }
.gf-find-sn__tip {
    margin-top: 8px !important;
    font-size: 12px !important;
}
.gf-find-sn__code {
    display: inline-block;
    margin: 8px 0 !important;
    border: 1px dashed rgba(23,23,23,.25);
    border-radius: 8px;
    background: var(--muted);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 16px !important;
    font-weight: 600;
    color: var(--foreground) !important;
    letter-spacing: .04em;
}

.gf-find-sn__box {
    position: relative;
    width: 78px;
    height: 78px;
    border: 1.5px solid rgba(23,23,23,.35);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 0 rgba(23,23,23,.06);
}
.gf-find-sn__box-lid {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    height: 10px;
    border-radius: 3px;
    background: rgba(23,23,23,.08);
}
.gf-find-sn__label {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(23,23,23,.2);
    border-radius: 4px;
    background: #fff;
    padding: 5px 6px;
    font-size: 8px;
    font-weight: 600;
    color: rgba(23,23,23,.7);
    letter-spacing: .02em;
}
.gf-find-sn__barcode {
    display: block;
    height: 10px;
    border-radius: 1px;
    background: repeating-linear-gradient(
        90deg,
        #171717 0 1px,
        transparent 1px 2px,
        #171717 2px 3px,
        transparent 3px 5px,
        #171717 5px 6px,
        transparent 6px 7px
    );
}

.gf-find-sn__phone {
    width: 92px;
    height: 148px;
    border: 2px solid #171717;
    border-radius: 14px;
    background: #111;
    padding: 7px 6px 9px;
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
    box-sizing: border-box;
}
.gf-find-sn__phone-screen {
    height: 100%;
    border-radius: 8px;
    background: #f2f2f7;
    overflow: hidden;
    padding: 8px 6px;
    box-sizing: border-box;
}
.gf-find-sn__settings {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gf-find-sn__settings-title {
    display: block;
    margin-bottom: 2px;
    font-size: 9px;
    font-weight: 700;
    color: #171717;
    text-align: center;
    white-space: nowrap;
}
.gf-find-sn__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    border-radius: 6px;
    background: #fff;
    padding: 5px 6px;
    line-height: 1.2;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.gf-find-sn__row i {
    display: block;
    width: 100%;
    color: #8e8e93;
    font-style: normal;
    font-size: 7px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gf-find-sn__row b {
    display: block;
    width: 100%;
    color: #171717;
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gf-find-sn__phone-screen--dial {
    background: #fff;
    padding: 10px 6px 6px;
}
.gf-find-sn__dial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    height: 100%;
}
.gf-find-sn__dial-code {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #171717;
    letter-spacing: .03em;
    white-space: nowrap;
}
.gf-find-sn__dial-imei {
    border-radius: 5px;
    background: #f0f0f0;
    padding: 4px 5px;
    font-size: 7px;
    color: #525252;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gf-find-sn__keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
    margin-top: auto;
}
.gf-find-sn__keys i {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ececec;
}

.gf-guide { margin-top: 16px; display: grid; gap: 8px; }
.gf-guide__item {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
    overflow: hidden;
}
.gf-guide__item summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
}
.gf-guide__item summary::-webkit-details-marker { display: none; }
.gf-guide__item[open] summary { border-bottom: 1px solid var(--border); }
.gf-guide__body { padding: 12px 14px 14px; font-size: 13px; line-height: 1.55; }
.gf-guide__risk { margin: 0; color: var(--foreground); }
.gf-guide__label {
    margin: 10px 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-foreground);
}
.gf-guide__body ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted-foreground);
}
.gf-guide__body li + li { margin-top: 4px; }
.gf-guide__body a { font-weight: 500; }

.gf-toggle-wrap { display: flex; justify-content: center; margin-top: 32px; }
.gf-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.gf-toggle:hover { background: var(--muted); }
.gf-more-catalog { margin-top: 40px; }
.gf-more-catalog[hidden] { display: none !important; }
.gf-cat + .gf-cat { margin-top: 40px; }
.gf-cat__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.gf-cat__head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.gf-cat__head i { flex: 1; height: 1px; background: var(--border); }
.gf-cat__head span {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-service-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 16px;
    transition: border-color .15s ease, background .15s ease;
}
.gf-service-row.is-free .gf-card__icon {
    background: var(--gf-free-soft);
    color: var(--gf-free);
}
.gf-service-row.is-deal .gf-card__icon {
    background: var(--gf-deal-soft);
    color: var(--gf-deal);
}
.gf-service-row .gf-chip__corner {
    top: -7px;
    right: -6px;
}
.gf-service-row:hover {
    border-color: rgba(23,23,23,.3);
    background: rgba(245,245,245,.4);
    text-decoration: none;
}
.gf-service-row.is-active {
    border-color: var(--foreground);
    background: var(--muted);
}
.gf-service-row__body { min-width: 0; flex: 1; }
.gf-service-row__name { display: block; font-size: 14px; font-weight: 500; }
.gf-service-row__meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gf-service-row.is-deal .gf-service-row__meta {
    color: var(--gf-deal);
}
.gf-service-row.is-deal .gf-service-row__meta s {
    color: var(--muted-foreground);
}
.gf-service-row.is-free .gf-service-row__meta s {
    color: var(--gf-free);
}
.gf-service-rows {
    display: grid;
    gap: 12px;
}
@media (min-width: 640px) { .gf-service-rows { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gf-service-rows { grid-template-columns: repeat(3, 1fr); } }

.gf-article-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    padding: 24px;
    transition: border-color .15s ease;
}
.gf-article-card:hover { border-color: rgba(23,23,23,.3); text-decoration: none; }
.gf-article-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.gf-article-card__tag {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-article-card h3 {
    margin: 16px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}
.gf-article-card p {
    margin: 8px 0 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted-foreground);
}
.gf-article-card__more {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
}

.gf-knowledge-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 24px;
}
.gf-knowledge-list {
    display: grid;
    gap: 14px;
}
.gf-knowledge-card {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    padding: 12px;
    color: inherit;
    text-decoration: none !important;
    transition: border-color .15s ease, background .15s ease;
}
.gf-knowledge-card:hover {
    border-color: rgba(23,23,23,.28);
    background: color-mix(in srgb, var(--muted) 35%, #fff);
}
.gf-knowledge-card__media {
    display: block;
    width: 168px;
    height: 112px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--muted);
}
.gf-knowledge-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gf-knowledge-card__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 600;
}
.gf-knowledge-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 4px 2px 0;
}
.gf-knowledge-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-knowledge-card__tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    line-height: 1.4;
}
.gf-knowledge-card__title {
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--foreground);
}
.gf-knowledge-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gf-knowledge-card__more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 550;
    color: var(--foreground);
}
.gf-knowledge-pager { margin-top: 28px; }
.gf-knowledge .gf-device-yanji,
.gf-knowledge-detail .gf-device-yanji {
    margin: 0 0 22px;
}
.gf-knowledge-detail .gf-prose + .gf-device-yanji {
    margin-top: 28px;
    margin-bottom: 18px;
}
.gf-knowledge-detail__cover {
    margin: 0 0 24px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--muted);
}
.gf-knowledge-detail__cover img {
    display: block;
    width: 100%;
    height: auto;
}
.gf-knowledge-detail__back {
    margin-top: 32px;
    font-size: 14px;
}
@media (max-width: 639px) {
    .gf-knowledge-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .gf-knowledge-card__media {
        width: 100%;
        height: 160px;
    }
}

/* —— Service query page —— */
.gf-query-page {
    max-width: 1024px;
    margin: 0 auto;
    padding: 16px max(16px, env(safe-area-inset-left)) 64px max(16px, env(safe-area-inset-right));
    box-sizing: border-box;
    width: 100%;
    overflow-x: clip;
}
@media (min-width: 640px) {
    .gf-query-page { padding: 56px 24px 80px; }
}
@media (max-width: 768px) {
    .gf-query-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(120% 70% at 50% -8%, #eef2f7 0%, transparent 52%),
            linear-gradient(180deg, #f7f8fa 0%, #ffffff 48%);
    }
}
.gf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted-foreground);
    max-width: 100%;
}
.gf-breadcrumb a:hover { color: var(--foreground); }
.gf-query-layout {
    display: grid;
    gap: 28px;
    margin-top: 20px;
    min-width: 0;
}
@media (min-width: 640px) {
    .gf-query-layout { gap: 40px; margin-top: 32px; }
}
@media (min-width: 1024px) {
    .gf-query-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .gf-query-layout--single { grid-template-columns: minmax(0, 1fr); }
}
.gf-query-layout > * { min-width: 0; }
.gf-query-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
@media (min-width: 640px) {
    .gf-query-title { gap: 16px; }
}
.gf-query-title__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--foreground);
    color: var(--primary-foreground);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.gf-query-title__icon .gf-card__icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: inherit;
}
.gf-query-title__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}
@media (min-width: 640px) {
    .gf-query-title__icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 14px;
    }
    .gf-query-title__icon svg {
        width: 22px;
        height: 22px;
    }
}
.gf-query-title h1 {
    margin: 0;
    font-size: clamp(1.35rem, 5vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    word-break: break-word;
}
.gf-query-title p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted-foreground);
}
.gf-query-desc {
    margin: 24px 0 0;
    max-width: 42rem;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted-foreground);
}
.gf-query-info {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
@media (min-width: 640px) {
    .gf-query-info { margin-top: 14px; padding-top: 14px; }
}
.gf-query-info__price {
    margin: 0;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-query-info__desc { margin-top: 8px; }
.gf-query-info__clamp {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted-foreground);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.gf-query-info__clamp.is-open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.gf-query-info__clamp p { margin: 0 0 .5em; }
.gf-query-info__clamp p:last-child { margin-bottom: 0; }
.gf-query-info__toggle {
    margin-top: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--foreground);
    cursor: pointer;
}
.gf-query-info__toggle:hover { opacity: .7; }
.gf-panel {
    margin-top: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, #c8d0dc);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    padding: 14px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: visible;
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 10px 28px rgba(15,23,42,.05);
}
@media (min-width: 640px) {
    .gf-panel {
        margin-top: 32px;
        border-radius: 18px;
        padding: 24px;
    }
}
.gf-panel .gf-search__chips {
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 10px;
    row-gap: 12px;
    padding-bottom: 0;
}
.gf-search__chips--actions {
    flex-wrap: wrap;
    overflow: visible;
}
.gf-search__meta .gf-search__chips {
    flex-wrap: wrap;
    overflow: visible;
    gap: 10px;
    row-gap: 12px;
}
.gf-tool-banners-slot--aside { display: none; }
.gf-catalog-layout .gf-tool-banners-slot--aside { display: block; }
@media (min-width: 1024px) {
    .gf-tool-banners-slot--main { display: none; }
    .gf-tool-banners-slot--aside { display: block; }
}
.gf-tool-banners {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
@media (min-width: 640px) {
    .gf-tool-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gf-aside__box--tools .gf-tool-banners {
    margin-top: 12px;
    grid-template-columns: 1fr;
}
.gf-aside__box--tools .gf-tool-banner {
    min-height: 0;
    background: color-mix(in srgb, var(--muted) 55%, #fff);
}
.gf-tool-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 88px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--muted) 85%, transparent), transparent 58%),
        var(--card);
    text-decoration: none !important;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gf-tool-banner:hover {
    border-color: rgba(23,23,23,.28);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,.04);
}
.gf-tool-banner__tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, #fff 70%, transparent);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-foreground);
}
.gf-tool-banner__title {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--foreground);
}
.gf-tool-banner__hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted-foreground);
}
.gf-panel label { display: block; font-size: 14px; font-weight: 500; }
.gf-panel__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.gf-panel__label-row > label { margin: 0; }
.gf-find-sn-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.gf-find-sn-link:hover {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gf-find-sn-link svg { flex: 0 0 auto; opacity: .85; }
.gf-search__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
}
.gf-search__label-row--end {
    justify-content: flex-end;
}
.gf-search__label-row > label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}
.gf-panel__select {
    display: block;
    width: 100%;
    margin-top: 8px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
    padding: 0 14px;
    font-size: 14px;
    color: var(--foreground);
    appearance: auto;
}
.gf-panel__select:focus {
    outline: none;
    border-color: rgba(23,23,23,.4);
}
.gf-panel__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-panel__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    align-items: stretch;
}
@media (min-width: 640px) {
    .gf-panel__row {
        flex-direction: row;
        align-items: center;
    }
}
.gf-panel__row input {
    flex: 0 0 auto;
    width: 100%;
    min-height: 58px;
    height: 58px;
    box-sizing: border-box;
    border: 1.5px solid #d4d4d4;
    border-radius: 14px;
    background: #fff;
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 17px;
    line-height: 1.25;
    color: var(--foreground);
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
@media (min-width: 640px) {
    .gf-panel__row input {
        flex: 1 1 auto;
        width: auto;
        min-height: 48px;
        height: 48px;
        font-size: 14px;
        border-width: 1px;
        border-color: var(--border);
        border-radius: 12px;
        padding: 12px 14px;
        box-shadow: none;
    }
}
.gf-panel__row input:focus {
    outline: none;
    border-color: #171717;
    box-shadow: 0 0 0 3px rgba(23,23,23,.08);
}
@media (min-width: 640px) {
    .gf-panel__row input:focus {
        border-color: rgba(23,23,23,.4);
        box-shadow: none;
    }
}
.gf-panel__row button {
    flex: 0 0 auto;
    width: 100%;
    min-height: 52px;
    height: 52px;
    box-sizing: border-box;
    border: 0;
    border-radius: 14px;
    background: var(--foreground);
    color: var(--primary-foreground);
    padding: 0 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
@media (min-width: 640px) {
    .gf-panel__row button {
        width: auto;
        min-height: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 500;
    }
}
.gf-panel__row button:hover { opacity: .9; }
.gf-panel__hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 640px) {
    .gf-aside { gap: 24px; }
}
.gf-aside__box {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(245,245,245,.3);
    padding: 14px;
}
@media (min-width: 640px) {
    .gf-aside__box {
        border-radius: 16px;
        padding: 20px;
    }
}
.gf-aside__box--card { background: var(--card); }
.gf-aside__box h2 { margin: 0; font-size: 14px; font-weight: 600; }
.gf-aside__box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.gf-aside__link-btn {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.gf-aside__link-btn:hover { opacity: .7; }
.gf-aside__cta {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    padding: 7px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--foreground);
    cursor: pointer;
}
.gf-aside__cta:hover {
    background: var(--muted);
}
.gf-aside__box ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.gf-aside__box li {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-foreground);
}
.gf-aside__links { margin-top: 12px; }
.gf-aside__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 8px;
    padding: 8px;
    font-size: 14px;
}
.gf-aside__links a:hover { background: var(--muted); text-decoration: none; }
.gf-aside__links a.is-active { background: var(--muted); font-weight: 500; }
.gf-aside__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.gf-aside__services {
    margin-top: 10px;
    display: grid;
    gap: 4px;
}
.gf-aside__service {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit;
}
.gf-aside__service:hover { background: var(--muted); }
.gf-aside__service.is-active { background: var(--muted); }
.gf-aside__service.is-free .gf-card__icon {
    background: var(--gf-free-soft);
    color: var(--gf-free);
}
.gf-aside__service.is-deal .gf-card__icon {
    background: var(--gf-deal-soft);
    color: var(--gf-deal);
}
.gf-aside__service .gf-card__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}
.gf-aside__service-body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}
.gf-aside__service-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.gf-aside__service .gf-chip__corner {
    top: -4px;
    right: -2px;
}
.gf-aside__service-price {
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-aside__service-price s {
    color: var(--gf-free);
    text-decoration: line-through;
}
.gf-aside__service.is-deal .gf-aside__service-price {
    color: var(--gf-deal);
}
.gf-aside__service.is-deal .gf-aside__service-price s {
    color: var(--muted-foreground);
}
.gf-aside__service-go {
    color: var(--muted-foreground);
    font-size: 13px;
}
.gf-aside__empty {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted-foreground);
}

/* Related services: desktop aside card; mobile right dock */
.gf-related {
    position: relative;
}
.gf-related-fab {
    display: none;
}
.gf-related-scrim {
    display: none;
}
.gf-related-close {
    display: none;
}
@media (max-width: 1023px) {
    .gf-related-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 0;
        top: 42%;
        z-index: 55;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        letter-spacing: .18em;
        border: 1px solid var(--border);
        border-right: 0;
        border-radius: 12px 0 0 12px;
        background: var(--card);
        color: var(--foreground);
        box-shadow: -4px 8px 24px rgba(0,0,0,.08);
        padding: 14px 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .gf-related.is-open .gf-related-fab {
        opacity: 0;
        pointer-events: none;
    }
    .gf-related-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 56;
        background: rgba(11, 18, 32, .36);
        backdrop-filter: blur(2px);
    }
    .gf-related-scrim[hidden] { display: none !important; }
    .gf-aside__box--related {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 57;
        width: min(320px, calc(100vw - 48px));
        margin: 0;
        border-radius: 16px 0 0 16px;
        border-right: 0;
        padding: 16px 14px calc(20px + env(safe-area-inset-bottom, 0));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(104%);
        transition: transform .22s ease;
        box-shadow: -12px 0 40px rgba(0,0,0,.14);
    }
    .gf-aside__box--related.is-open {
        transform: translateX(0);
    }
    .gf-related-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin-left: 2px;
        border: 0;
        border-radius: 8px;
        background: var(--muted);
        color: var(--foreground);
        font: inherit;
        font-size: 14px;
        cursor: pointer;
    }
    html.gf-related-dock-open,
    html.gf-related-dock-open body {
        overflow: hidden;
    }
}
@media (min-width: 1024px) {
    .gf-related-fab,
    .gf-related-scrim,
    .gf-related-close {
        display: none !important;
    }
    .gf-aside__box--related {
        position: static;
        transform: none !important;
        width: auto;
        box-shadow: none;
    }
}

.gf-related-editor {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0,0,0,.35);
}
.gf-related-editor[hidden] { display: none !important; }
.gf-related-editor__panel {
    width: min(420px, 100%);
    max-height: min(80vh, 640px);
    overflow: auto;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    padding: 16px;
}
.gf-related-editor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.gf-related-editor__tip {
    margin: 8px 0 12px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-related-editor__list {
    display: grid;
    gap: 6px;
    max-height: 46vh;
    overflow: auto;
}
.gf-related-editor__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}
.gf-related-editor__item:hover { background: var(--muted); }
.gf-related-editor__item input { margin-top: 3px; }
.gf-related-editor__item-main { display: grid; gap: 2px; min-width: 0; }
.gf-related-editor__item-main strong { font-size: 13px; }
.gf-related-editor__item-main em {
    font-style: normal;
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-related-editor__actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.gf-aside__cats { margin-top: 10px; }
.gf-aside__cat {
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.gf-aside__cat:last-child { border-bottom: 0; }
.gf-aside__cat > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
}
.gf-aside__cat > summary::-webkit-details-marker { display: none; }
.gf-aside__cat > summary:hover strong { opacity: .75; }
.gf-aside__cat-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-foreground);
    flex: 0 0 auto;
}
.gf-aside__cat-chevron {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
    opacity: .7;
    transition: transform .15s ease;
}
.gf-aside__cat[open] > summary .gf-aside__cat-chevron {
    transform: rotate(225deg);
    margin-top: 2px;
}
.gf-aside__cat-list {
    display: grid;
    gap: 2px;
    padding: 0 0 10px;
}
.gf-aside__cat-list a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    color: var(--foreground);
    text-decoration: none;
}
.gf-aside__cat-list a:hover { background: var(--muted); }
.gf-aside__cat-list a.is-active {
    background: var(--muted);
    font-weight: 600;
}
.gf-aside__cat-list a .gf-chip__corner {
    top: -5px;
    right: -4px;
}
.gf-aside__cat-price {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-aside__cat-list a.is-deal .gf-aside__cat-price {
    color: var(--gf-deal);
}
.gf-aside__cat-list a.is-deal .gf-aside__cat-price s {
    color: var(--muted-foreground);
    text-decoration: line-through;
}
.gf-aside__cat-list a.is-free .gf-aside__cat-price s {
    color: var(--gf-free);
    text-decoration: line-through;
}
.gf-aside__cat strong { font-weight: 600; }
.gf-aside__cat span { color: var(--muted-foreground); }

.gf-catalog-page .gf-query-title { margin-bottom: 0; }
.gf-catalog-layout {
    display: grid;
    gap: 28px;
    margin-top: 8px;
}
@media (min-width: 768px) {
    .gf-catalog-layout { gap: 40px; }
}
@media (min-width: 1024px) {
    .gf-catalog-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
.gf-catalog-main { min-width: 0; display: grid; gap: 20px; }
.gf-catalog-panel { margin-top: 0; }
.gf-catalog-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.gf-catalog-fold {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
    overflow: hidden;
}
.gf-catalog-fold[hidden] { display: none !important; }
.gf-catalog-fold summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gf-catalog-fold summary::-webkit-details-marker { display: none; }
.gf-catalog-fold summary::after {
    content: '+';
    color: var(--muted-foreground);
    font-weight: 500;
    font-size: 14px;
}
.gf-catalog-fold[open] summary::after { content: '−'; }
.gf-catalog-fold summary:hover { background: var(--muted); }
.gf-catalog-fold__body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted-foreground);
}
.gf-catalog-fold__body p { margin: 10px 0 0; }
.gf-catalog-fold__body .gf-example { margin-top: 10px; }
.gf-catalog-oneclick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.gf-catalog-oneclick__hint {
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-result-guides {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
.gf-result-guides h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.gf-result-guides > p {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-result-guides__grid {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}
@media (min-width: 640px) {
    .gf-result-guides__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .gf-result-guides--tools .gf-result-guides__grid { grid-template-columns: repeat(3, 1fr); }
}
.gf-result-guide {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gf-result-guide:hover {
    border-color: rgba(23,23,23,.4);
    background: var(--muted);
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(15,15,15,.06);
    transform: translateY(-1px);
}
.gf-result-guide__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #171717;
    color: #fff;
    flex: 0 0 auto;
}
.gf-result-guide__icon .gf-card__icon {
    width: auto;
    height: auto;
    background: transparent;
    color: inherit;
    border-radius: 0;
}
.gf-result-guide__body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gf-result-guide__body strong {
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--foreground);
}
.gf-result-guide__body > span {
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted-foreground);
}
.gf-result-guide__go {
    flex: 0 0 auto;
    color: var(--muted-foreground);
    font-size: 15px;
    line-height: 1;
}
.gf-result-guide:hover .gf-result-guide__go {
    color: var(--foreground);
}
.gf-result-guide--primary {
    border-color: rgba(23,23,23,.32);
}
.gf-result-guide--primary .gf-result-guide__icon {
    background: #171717;
}
.gf-result-guide--ext {
    background: rgba(245,245,245,.7);
}
.gf-result-guide--ext .gf-result-guide__icon {
    background: #3f3f46;
}
.gf-result-guide[data-icon="idsuo"] .gf-result-guide__icon { background: #18181b; }
.gf-result-guide[data-icon="wangluosuo"] .gf-result-guide__icon { background: #1d4ed8; }
.gf-result-guide[data-icon="jianguansuo"] .gf-result-guide__icon { background: #0f766e; }
.gf-result-guide[data-icon="shouhouweixiujilu"] .gf-result-guide__icon,
.gf-result-guide[data-icon="gsx-xiaoshouren-anli"] .gf-result-guide__icon { background: #9a3412; }
.gf-result-guide[data-icon="yanjibaogao"] .gf-result-guide__icon { background: #171717; }
.gf-result-guide[data-icon="sensor"] .gf-result-guide__icon { background: #4338ca; }
.gf-result-guide[data-icon="paofen"] .gf-result-guide__icon { background: #b45309; }

.gf-inline-result {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    padding: 20px;
}
@media (min-width: 640px) { .gf-inline-result { padding: 24px; } }
.gf-inline-result--under-input {
    margin-top: 16px;
    background:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--muted) 70%, transparent), transparent 55%),
        var(--background);
}
.gf-inline-result__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.gf-inline-result__head h2 {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 600;
}
.gf-inline-result__head > div > p:last-child {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted-foreground);
}

.gf-ai-card {
    margin-bottom: 18px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    overflow: hidden;
}
.gf-ai-card--safe { border-color: color-mix(in srgb, #10b981 35%, var(--border)); }
.gf-ai-card--warn { border-color: color-mix(in srgb, #f59e0b 35%, var(--border)); }
.gf-ai-card--danger { border-color: color-mix(in srgb, #ef4444 35%, var(--border)); }
.gf-ai-card--pending {
    border-color: color-mix(in srgb, var(--foreground) 16%, var(--border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--muted) 50%, #fff), var(--card));
}
.gf-ai-card__icon--pulse {
    animation: gf-ai-pulse 1.4s ease-in-out infinite;
}
@keyframes gf-ai-pulse {
    0%, 100% { opacity: .55; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1); }
}
.gf-ai-card--pending .gf-ai-card__chip {
    background: color-mix(in srgb, var(--foreground) 8%, var(--muted));
    color: var(--foreground);
}
.gf-ai-card--pending .gf-ai-card__verdict { font-size: 17px; }
.gf-ai-card__summary--pending {
    color: var(--muted-foreground);
}
.gf-ai-card__pending-bar {
    margin: 0 16px 16px;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 80%, #fff);
    overflow: hidden;
}
.gf-ai-card__pending-bar > span {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, var(--foreground) 55%, #94a3b8);
    animation: gf-ai-bar 1.2s ease-in-out infinite;
}
@keyframes gf-ai-bar {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
.gf-ai-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 0;
    margin-bottom: 0;
}
.gf-ai-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex: 0 0 auto;
}
.gf-ai-card--safe .gf-ai-card__icon { background: #ecfdf5; color: #047857; }
.gf-ai-card--warn .gf-ai-card__icon { background: #fffbeb; color: #b45309; }
.gf-ai-card--danger .gf-ai-card__icon { background: #fef2f2; color: #b91c1c; }
.gf-ai-card__titles { flex: 1; min-width: 0; }
.gf-ai-card__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gf-ai-card__chip {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--muted);
}
.gf-ai-card--safe .gf-ai-card__chip { background: #ecfdf5; color: #047857; }
.gf-ai-card--warn .gf-ai-card__chip { background: #fffbeb; color: #b45309; }
.gf-ai-card--danger .gf-ai-card__chip { background: #fef2f2; color: #b91c1c; }
.gf-ai-card__device {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-ai-card__eyebrow {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.gf-ai-card__verdict {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.25;
}
.gf-ai-card--safe .gf-ai-card__verdict { color: #166534; }
.gf-ai-card--warn .gf-ai-card__verdict { color: #92400e; }
.gf-ai-card--danger .gf-ai-card__verdict { color: #991b1b; }
.gf-ai-card__score {
    flex: 0 0 auto;
    min-width: 72px;
    text-align: right;
}
.gf-ai-card__score strong {
    display: inline;
    font-size: 28px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.gf-ai-card--safe .gf-ai-card__score strong { color: #047857; }
.gf-ai-card--warn .gf-ai-card__score strong { color: #b45309; }
.gf-ai-card--danger .gf-ai-card__score strong { color: #b91c1c; }
.gf-ai-card__score span {
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-ai-card__score em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-ai-card__summary {
    margin: 12px 0 0;
    padding: 12px 16px;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--muted) 45%, #fff);
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted-foreground);
}
.gf-ai-card__details { margin: 0; padding: 0 16px 14px; }
.gf-ai-card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #fff 70%, transparent);
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
}
.gf-ai-card__toggle::-webkit-details-marker { display: none; }
.gf-ai-card__toggle::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .65;
    transition: transform .15s ease;
}
.gf-ai-card__details[open] > .gf-ai-card__toggle::after {
    transform: rotate(225deg);
    margin-top: 4px;
}
.gf-ai-card__toggle-less { display: none; }
.gf-ai-card__details[open] > .gf-ai-card__toggle .gf-ai-card__toggle-more { display: none; }
.gf-ai-card__details[open] > .gf-ai-card__toggle .gf-ai-card__toggle-less { display: inline; }
.gf-ai-card__body {
    margin-top: 12px;
    padding-top: 2px;
}
.gf-ai-card__answers {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}
.gf-ai-card__qa {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, #fff 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.gf-ai-card__qa strong {
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-ai-card__qa span {
    font-size: 13px;
    line-height: 1.55;
    color: var(--foreground);
}
.gf-ai-card__inline-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gf-ai-card__inline-link:hover {
    opacity: .82;
}
.gf-ai-card__block h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
}
.gf-ai-card__block ul {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--foreground);
}
.gf-ai-card__block li + li { margin-top: 4px; }
.gf-ai-card__note {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-inline-result__ai {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--muted);
    border: 1px solid var(--border);
}
.gf-inline-result__ai strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-foreground);
}
.gf-inline-result__ai p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--foreground);
}
.gf-result-fields-wrap { margin-top: 8px; }
.gf-result-fields__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.gf-result-fields__head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.gf-result-fields__head p { margin: 0; font-size: 12px; color: var(--muted-foreground); }

.gf-result-device-params {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background:
        radial-gradient(90% 120% at 0% 0%, #f3f6fa 0%, transparent 55%),
        var(--card, #fff);
}
.gf-result-device-params__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.gf-result-device-params__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
}
.gf-result-device-params__head p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.5;
}
.gf-result-device-params__more {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 550;
    color: var(--muted-foreground);
    white-space: nowrap;
}
.gf-result-device-params__more:hover { color: var(--foreground); }
.gf-result-device-params__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.gf-result-device-params__card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    min-width: 0;
}
.gf-result-device-params__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-foreground);
}
.gf-result-device-params__value {
    font-size: 13px;
    line-height: 1.45;
    color: var(--foreground);
}
.gf-result-device-params__value .gf-spec-pill,
.gf-result-device-params__value .gf-spec-lines {
    gap: 4px;
}
.gf-result-device-params__foot {
    margin-top: 12px;
}
.gf-result-device-params__cta {
    width: 100%;
    justify-content: center;
    text-align: center;
}
@media (max-width: 640px) {
    .gf-result-device-params { padding: 14px; }
    .gf-result-device-params__grid { grid-template-columns: 1fr; }
    .gf-result-device-params__head { flex-direction: column; gap: 6px; }
}

.gf-inline-result__table {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
}
.gf-inline-result__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.55;
}
.gf-inline-result__row:nth-child(even) {
    background: transparent;
}
.gf-inline-result__row:first-child { border-top: 0; }
.gf-inline-result__row dt {
    margin: 0;
    flex: 0 0 auto;
    min-width: 6.5em;
    max-width: 42%;
    color: var(--muted-foreground);
    font-weight: 600;
    white-space: nowrap;
}
.gf-inline-result__row dt::after {
    content: "：";
    font-weight: 500;
    margin-left: 1px;
}
.gf-inline-result__row dd {
    margin: 0;
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--foreground);
    word-break: break-word;
}
.gf-result-value {
    margin-right: 6px;
}
.gf-result-perf-row {
    background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.gf-result-perf-link {
    margin-left: 4px;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.gf-result-perf-link:hover { opacity: .85; }
.gf-result-perf-link--cta {
    margin-left: 0;
}
.gf-result-anno {
    display: inline;
    margin-left: 2px;
}
.gf-result-anno[open] {
    display: block;
    margin-top: 8px;
    margin-left: 0;
}
.gf-result-anno__trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 70%, transparent);
    color: var(--muted-foreground);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    user-select: none;
}
.gf-result-anno__trigger::-webkit-details-marker { display: none; }
.gf-result-anno__trigger::marker { content: ''; }
.gf-result-anno[open] > .gf-result-anno__trigger,
.gf-result-anno__trigger:hover {
    color: var(--foreground);
    border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
    background: var(--background);
}
.gf-result-anno--warn > .gf-result-anno__trigger {
    color: #9a3412;
    border-color: #fdba74;
    background: #fff7ed;
}
.gf-result-anno--warn[open] > .gf-result-anno__trigger,
.gf-result-anno--warn > .gf-result-anno__trigger:hover {
    color: #7c2d12;
    border-color: #fb923c;
}
.gf-result-anno__panel {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--muted) 35%, var(--background));
    color: var(--foreground);
    font-size: 12px;
    line-height: 1.55;
}
.gf-result-anno--warn .gf-result-anno__panel {
    background: #fff7ed;
    border-color: #fdba74;
}
.gf-result-anno__current {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--muted) 55%, transparent);
}
.gf-result-anno--warn .gf-result-anno__current {
    background: #fff7ed;
}
.gf-result-anno__block + .gf-result-anno__block {
    margin-top: 10px;
}
.gf-result-anno__block h4 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 650;
}
.gf-result-anno__codes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
}
.gf-result-anno__codes li {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--muted-foreground);
}
.gf-result-anno__codes li.is-active {
    color: var(--foreground);
    font-weight: 650;
}
.gf-result-anno__codes code {
    flex: 0 0 auto;
    min-width: 2.25em;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    color: inherit;
}
.gf-result-anno__more {
    margin: 10px 0 0;
}
.gf-result-anno__more a {
    color: var(--muted-foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gf-result-anno__more a:hover { color: var(--foreground); }

.gf-result-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 18px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--muted) 70%, transparent), transparent 60%),
        var(--background);
}
.gf-result-hero__media {
    width: min(180px, 46vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.gf-result-hero__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.12));
}
.gf-result-hero__model {
    margin: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 650;
    color: var(--foreground);
}
.gf-result-alerts {
    margin-bottom: 18px;
}
.gf-result-alerts__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 10px;
}
.gf-result-alerts__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}
.gf-result-alerts__head p {
    margin: 0;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-result-alerts__list,
.gf-result-alerts__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.gf-result-alert {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
}
.gf-result-alert > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    min-height: 44px;
    user-select: none;
}
.gf-result-alert > summary::-webkit-details-marker { display: none; }
.gf-result-alert > summary::marker { content: ''; }
.gf-result-alert__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #10b981;
    flex: 0 0 auto;
}
.gf-result-alert--warning .gf-result-alert__dot { background: #f59e0b; }
.gf-result-alert--danger .gf-result-alert__dot { background: #ef4444; }
.gf-result-alert--success .gf-result-alert__dot { background: #10b981; }
.gf-result-alert__text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 650;
}
.gf-result-alert__hint {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-result-alert__body {
    padding: 0 12px 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    font-size: 12px;
    line-height: 1.55;
    color: var(--foreground);
}
.gf-result-alert__body p { margin: 10px 0 0; }
.gf-result-alert__tip {
    color: var(--muted-foreground);
}
.gf-result-alert--success {
    border-color: #86efac;
    background: #f0fdf4;
}
.gf-result-alert--success .gf-result-alert__text { color: #166534; }
.gf-result-alert--warning {
    border-color: #fcd34d;
    background: #fffbeb;
}
.gf-result-alert--warning .gf-result-alert__text { color: #92400e; }
.gf-result-alert--danger {
    border-color: #fca5a5;
    background: #fef2f2;
}
.gf-result-alert--danger .gf-result-alert__text { color: #991b1b; }
.gf-result-alert[open] > summary {
    background: color-mix(in srgb, #fff 55%, transparent);
}
.gf-inline-result__note {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-inline-result__pay {
    margin-top: 8px;
    font-size: 13px;
    word-break: break-all;
}
@media (max-width: 520px) {
    .gf-inline-result__row {
        gap: 2px 6px;
    }
    .gf-inline-result__row dt {
        min-width: 5.5em;
    }
}

@media (max-width: 768px) {
    .nav-toggle { display: inline-flex; }
    .site-header__bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "brand actions toggle"
            "nav nav nav";
        align-items: center;
        gap: 0 8px;
        height: auto;
        min-height: 52px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .brand { grid-area: brand; }
    .nav-toggle { grid-area: toggle; }
    .site-header__actions {
        grid-area: actions;
        margin-left: 0;
        gap: 6px;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    .nav {
        grid-area: nav;
        display: none;
        flex: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 4px;
        padding: 4px 0 8px;
        border-top: 1px solid var(--border);
    }
    .nav.is-open { display: flex; }
    .nav a {
        width: 100%;
        padding: 12px 2px;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        font-size: 15px;
        font-weight: 500;
        color: var(--foreground);
    }
    .nav a:last-child { border-bottom: 0; }
    .site-header__cta {
        padding: 0 12px;
        height: 34px;
        font-size: 13px;
    }
    .site-header__balance {
        height: 34px;
        padding: 0 8px;
        font-size: 12px;
    }
    .site-header__user {
        width: 32px;
        height: 32px;
    }

    .gf-hero__inner { padding: 22px 16px 20px; }
    .gf-hero__brand { margin-bottom: 6px; font-size: 12px; }
    .gf-hero__logo { gap: 10px; font-size: 1.65rem; }
    .gf-hero h1:not(.gf-hero__logo) { font-size: 1.5rem; }
    .gf-hero__lead {
        margin-top: 6px;
        font-size: 13px;
        max-width: 22rem;
    }

    .gf-search--hero {
        margin-top: 16px;
        padding: 14px 12px 12px;
        border-radius: 16px;
        overflow: visible;
    }
    .gf-search--hero .gf-search__field {
        flex-direction: column;
        align-items: stretch;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
        gap: 10px;
    }
    .gf-search--hero .gf-search__field:focus-within {
        border-color: transparent;
        box-shadow: none;
    }
    .gf-search--hero .gf-search__field input {
        display: block;
        width: 100%;
        box-sizing: border-box;
        min-height: 56px;
        height: 56px !important;
        padding: 14px 16px !important;
        border: 2px solid #737373 !important;
        border-radius: 14px;
        background: #f4f4f5 !important;
        font-size: 16px !important;
        font-weight: 500;
        line-height: 1.25;
        color: var(--foreground);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
        -webkit-appearance: none;
        appearance: none;
    }
    .gf-search--hero .gf-search__field input::placeholder {
        color: #737373;
        font-weight: 400;
        opacity: 1;
    }
    .gf-search--hero .gf-search__field input:focus {
        border-color: #171717 !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(23,23,23,.12);
        outline: none;
    }
    .gf-search--hero .gf-search__btn {
        position: static;
        width: 100%;
        height: 52px;
        border-radius: 14px;
        padding: 0 16px;
        font-size: 16px;
    }
    .gf-search--hero .gf-search__btn-arrow { display: none; }
    .gf-search--hero .gf-search__meta {
        margin-top: 14px;
        gap: 12px;
        overflow: visible;
    }
    .gf-search--hero .gf-search__meta-top {
        order: 0;
        width: 100%;
    }
    .gf-search--hero .gf-search__service {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        text-align: left;
        order: 0;
    }
    .gf-search--hero .gf-search__chips,
    .gf-search__meta > .gf-search__chips {
        order: 1;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap !important;
        justify-content: flex-start;
        align-content: flex-start;
        gap: 8px !important;
        row-gap: 10px !important;
        overflow: visible !important;
        padding: 10px 0 2px !important;
        margin: 0 !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }
    .gf-search--hero .gf-svc-cards,
    .gf-search__meta > .gf-svc-cards {
        order: 1;
        width: 100%;
        margin-top: 10px;
        gap: 8px;
    }
    .gf-svc-card {
        flex: 1 1 calc(50% - 8px);
        min-width: calc(50% - 8px);
        max-width: calc(50% - 4px);
        padding: 8px 10px 7px;
    }
    .gf-svc-card__blurb {
        max-width: none;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .gf-search--hero .gf-chip {
        padding: 8px 12px 8px 10px;
        font-size: 13px;
        min-height: 38px;
        max-width: 100%;
    }
    .gf-chip {
        padding: 9px 14px 9px 11px;
        font-size: 13px;
        min-height: 40px;
    }
    .gf-search__meta {
        display: flex;
        flex-direction: column;
    }

    /* Query / catalog pages — match home mobile */
    .gf-query-page {
        padding-top: 12px;
        padding-bottom: 56px;
    }
    .gf-breadcrumb {
        font-size: 11px;
        gap: 4px;
        margin-bottom: 2px;
    }
    .gf-query-layout,
    .gf-catalog-layout {
        margin-top: 12px;
        gap: 18px;
    }
    .gf-query-title {
        gap: 10px;
        align-items: center;
    }
    .gf-query-title__icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .gf-query-title h1 {
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -.03em;
    }
    .gf-query-title p {
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.45;
    }
    .gf-panel {
        margin-top: 12px;
        padding: 12px;
        border-radius: 16px;
    }
    .gf-catalog-panel { margin-top: 0; }
    .gf-catalog-main { gap: 14px; }
    .gf-panel__label-row { margin-bottom: 10px; }
    .gf-panel__row { gap: 10px; margin-top: 0; }
    .gf-panel__select {
        height: 52px;
        border-radius: 14px;
        border-width: 1.5px;
        font-size: 15px;
        margin-top: 10px;
    }
    .gf-panel__hint { font-size: 12px; margin-top: 10px; }
    .gf-panel__meta { margin-top: 12px; font-size: 13px; }
    .gf-query-info {
        margin-top: 14px;
        padding-top: 14px;
    }
    .gf-panel .gf-search__chips,
    .gf-panel .gf-search__chips--actions {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
        row-gap: 0 !important;
        padding: 4px 2px 6px !important;
        margin-top: 14px !important;
        mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
    .gf-panel .gf-search__chips > span {
        flex: 0 0 auto;
    }
    .gf-tool-banners {
        margin-top: 12px;
        gap: 8px;
    }
    .gf-tool-banner {
        min-height: 0;
        padding: 12px 14px;
    }
    .gf-example-panel {
        margin-top: 12px;
        border-radius: 14px;
    }
    .gf-query-related {
        margin-top: 20px;
    }
    .gf-query-related h2 {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    .gf-catalog-fold {
        border-radius: 14px;
    }
    .gf-catalog-oneclick {
        margin-top: 14px;
        padding-top: 12px;
        gap: 8px 10px;
    }
    .gf-related-fab {
        top: auto;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        padding: 12px 7px;
        font-size: 12px;
        letter-spacing: .12em;
        box-shadow: -2px 6px 16px rgba(0,0,0,.07);
    }

    .gf-block { padding: 40px 16px; }
    .gf-block__head h2 { margin-top: 4px; }
    .gf-block__head > div > p:last-child {
        font-size: 13px;
        line-height: 1.6;
    }
    .gf-eyebrow { font-size: 11px; }

    .gf-reviews { padding-top: 28px; }
    .gf-channels { padding-top: 12px; }

    .gf-user-shell {
        margin: 0 -16px;
        padding: 4px 12px 28px;
        overflow-x: clip;
    }
    .gf-user {
        gap: 16px;
    }
    .gf-user__aside {
        margin: 0 -12px;
    }
    .gf-user__main {
        padding-top: 4px;
    }
    .gf-user-hero__actions,
    .gf-user-stats,
    .gf-user-shortcuts,
    .gf-recharge,
    .gf-recharge-grid {
        min-width: 0;
        max-width: 100%;
    }
    .gf-user-shortcuts {
        display: flex;
        flex-wrap: wrap;
    }
    .gf-user .gf-page-head {
        margin-bottom: 16px;
    }
    .gf-user .gf-page-head .gf-eyebrow {
        font-size: 10px;
        letter-spacing: .08em;
    }
    .gf-user .gf-page-head h1 {
        font-size: 1.4rem;
        letter-spacing: -.035em;
        line-height: 1.2;
        font-weight: 700;
    }
    .gf-user .gf-page-head .gf-lead,
    .gf-user .gf-page-head > p {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.65;
        color: var(--muted-foreground);
    }
    .gf-user .gf-section {
        margin-top: 22px;
    }
    .gf-user .gf-section__head {
        margin-bottom: 12px;
    }
    .gf-user .gf-section__head h2 {
        font-size: 1.05rem;
    }
    .gf-user .gf-section__head p {
        font-size: 12px;
    }
    .gf-user-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .gf-user-stat {
        min-height: 0;
        padding: 14px 12px;
        border-radius: 14px;
        gap: 6px;
        text-align: center;
    }
    .gf-user-stat:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0,0,0,.06);
    }
    .gf-user-stat__label { font-size: 11px; }
    .gf-user-stat__value {
        font-size: 17px;
        letter-spacing: -.02em;
        word-break: break-all;
    }
    .gf-user-stat__hint {
        display: none;
    }
    .gf-user-shortcuts {
        gap: 8px;
    }
    .gf-user-shortcuts .gf-chip {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 36px;
    }
    .gf-user-logout { margin-top: 22px; }
    .gf-user-logout .gf-btn {
        width: 100%;
        min-height: 44px;
    }
    .gf-user-list { gap: 10px; }
    .gf-user-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
        border-radius: 14px;
    }
    .gf-user-item__top {
        gap: 8px;
        align-items: flex-start;
    }
    .gf-user-item__title {
        font-size: 14px;
        line-height: 1.4;
        word-break: break-word;
    }
    .gf-user-item__amount {
        font-size: 19px;
        margin: 0 0 6px;
    }
    .gf-user-item__meta {
        gap: 4px 10px;
        font-size: 11px;
        line-height: 1.45;
    }
    .gf-user-item__mono,
    .gf-user-item__sn code {
        word-break: break-all;
    }
    .gf-user-item__actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    }
    .gf-user-item__actions .gf-btn {
        min-height: 38px;
        padding: 0 14px;
    }
    .gf-user-panel {
        border-radius: 12px;
        padding: 14px;
    }
    .gf-user-panel__scroll {
        margin: 0 -2px;
        padding: 0 2px;
        -webkit-overflow-scrolling: touch;
    }
    .gf-user-panel .gf-table {
        font-size: 12px;
        min-width: 480px;
    }
    .gf-user-panel .gf-table th,
    .gf-user-panel .gf-table td {
        padding: 10px 8px;
        vertical-align: top;
    }
    .gf-user-empty {
        padding: 20px 16px;
        gap: 14px;
        border-radius: 14px;
    }
    .gf-user-empty .gf-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
    .gf-user .gf-form,
    .gf-user .gf-form[style] {
        max-width: none !important;
    }
    .gf-user .gf-form .gf-btn,
    .gf-user form > .gf-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    .gf-user .gf-form input,
    .gf-user .gf-form select,
    .gf-user .gf-form textarea {
        font-size: 16px; /* avoid iOS zoom */
    }
    .gf-user .gf-prose,
    .gf-user .gf-prose[style] {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }
    .gf-user .gf-prose ol,
    .gf-user .gf-prose ul {
        padding-left: 1.15em;
    }
    .gf-user .gf-prose li {
        margin: 0.45em 0;
    }
    .gf-user .gf-alert {
        font-size: 13px;
        line-height: 1.6;
        word-break: break-word;
        padding: 12px 14px;
        border-radius: 12px;
    }
    .gf-user .gf-alert ul {
        padding-left: 1.15em;
    }
    .gf-user .gf-login-card {
        max-width: none !important;
        margin: 0 !important;
        padding: 18px 14px;
        border-radius: 14px;
    }
    .gf-user .gf-login-card__qr img {
        width: min(200px, 58vw);
        height: auto;
    }
    .gf-user .gf-api-creds,
    .gf-user dl.gf-api-creds {
        gap: 12px !important;
    }
    .gf-recharge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .gf-recharge-card {
        min-height: 0;
        padding: 16px 14px 14px;
        border-radius: 14px;
        border-width: 1.5px;
    }
    .gf-recharge-card.is-selected {
        border-color: var(--foreground);
        background: color-mix(in srgb, var(--muted) 45%, #fff);
        box-shadow: 0 0 0 1.5px var(--foreground);
    }
    .gf-recharge-card__name {
        font-size: 12px;
        line-height: 1.3;
    }
    .gf-recharge-card__pay em { font-size: 22px; }
    .gf-recharge-card__grant {
        font-size: 11px;
        line-height: 1.4;
    }
    .gf-recharge__footer {
        max-width: none;
        gap: 12px;
    }
    .gf-recharge__hint {
        font-size: 12px;
        line-height: 1.45;
    }
    .gf-recharge__submit {
        width: 100%;
        min-height: 46px;
    }
    .gf-recharge__note {
        font-size: 12px;
        line-height: 1.7;
    }
    .gf-user-pager {
        margin-top: 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .gf-user-pager nav {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 4px;
    }
}

@media (max-width: 380px) {
    .gf-user-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .gf-user-stat {
        text-align: left;
        padding: 12px 14px;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 4px 10px;
    }
    .gf-user-stat__hint {
        display: none;
    }
    .gf-recharge-grid {
        grid-template-columns: 1fr;
    }
}

/* —— Toolbox pages (zip1) —— */
.gf-tool-page { padding-bottom: 48px; }
.gf-tool-head { margin-bottom: 20px; }
.gf-tool-head h1 { margin: 4px 0 0; font-size: 1.6rem; letter-spacing: -.02em; }
.gf-tool-head > p { margin: 6px 0 0; color: var(--muted-foreground); font-size: 14px; }
.gf-tool-search {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.gf-tool-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 14px;
    background: #fff;
}
.gf-tool-search button {
    height: 44px;
    border: 0;
    border-radius: 12px;
    padding: 0 16px;
    background: var(--foreground);
    color: #fff;
    cursor: pointer;
}
.gf-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-ipsw { max-width: none; width: 100%; }
.gf-ipsw-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    background: var(--card);
}
.gf-ipsw-search__icon {
    color: var(--muted-foreground);
    font-size: 16px;
    line-height: 1;
}
.gf-ipsw-search input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 0;
    padding: 0;
    background: transparent;
    outline: none;
    font: inherit;
}
.gf-ipsw-search__clear {
    color: var(--muted-foreground);
    font-size: 22px;
    line-height: 1;
    text-decoration: none !important;
    padding: 0 4px;
}
.gf-ipsw-search button {
    height: 34px;
    border: 0;
    border-radius: 10px;
    padding: 0 14px;
    background: var(--foreground);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
}
.gf-ipsw-tabs {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-top: 0;
    background: var(--card);
    -webkit-overflow-scrolling: touch;
}
.gf-ipsw-tabs__track {
    display: flex;
    min-width: max-content;
    padding: 0 8px;
}
.gf-ipsw-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    color: var(--muted-foreground);
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.gf-ipsw-tab__count {
    min-width: 1.2em;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.gf-ipsw-tab:hover { color: var(--foreground); }
.gf-ipsw-tab.is-active {
    color: #0071e3;
    font-weight: 650;
}
.gf-ipsw-tab.is-active .gf-ipsw-tab__count {
    background: #e8f0fe;
    color: #0071e3;
}
.gf-ipsw-tab.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: #0071e3;
}
.gf-ipsw-search-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 12px 0;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-ipsw-search-meta p { margin: 0; }
.gf-ipsw-panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    padding: 4px 10px 12px;
}
.gf-ipsw-tabs + .gf-ipsw-panel {
    border-top: 0;
    border-radius: 0 0 14px 14px;
}
.gf-ipsw-panel + .gf-ipsw-panel {
    margin-top: 14px;
}
.gf-ipsw-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 6px 8px;
}
.gf-ipsw-panel__head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 550;
    color: var(--muted-foreground);
}
.gf-ipsw-panel__head span {
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-ipsw-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 2px 6px;
}
@media (max-width: 1023px) {
    .gf-ipsw-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .gf-ipsw-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 479px) {
    .gf-ipsw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gf-ipsw-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    padding: 12px 10px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--muted) 55%, #fff);
    color: inherit;
    text-decoration: none !important;
    transition: background .15s ease, transform .15s ease;
}
.gf-ipsw-card:hover {
    background: #e8f0fe;
    transform: translateY(-1px);
}
.gf-ipsw-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.gf-ipsw-card__img {
    display: block;
    width: 78%;
    height: 78%;
    max-width: 140px;
    max-height: 140px;
    object-fit: contain;
}
.gf-ipsw-card__img--empty {
    width: 42%;
    height: 42%;
    border-radius: 8px;
    background: color-mix(in srgb, var(--muted) 70%, #fff);
}
.gf-ipsw-card__body {
    min-width: 0;
    display: grid;
    gap: 2px;
    text-align: center;
}
.gf-ipsw-card__body strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gf-ipsw-card__body code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--muted-foreground);
    background: transparent;
    padding: 0;
}
.gf-ipsw-empty {
    padding: 28px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-ipsw-hint {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-ipsw-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
    color: #0071e3;
    font-size: 14px;
    font-weight: 550;
    text-decoration: none !important;
}
.gf-ipsw-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.gf-ipsw-detail-head__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 14px;
    background: color-mix(in srgb, var(--muted) 55%, #fff);
}
.gf-ipsw-detail-head h1 {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: -.02em;
}
.gf-ipsw-detail-head code {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted-foreground);
    background: transparent;
    padding: 0;
}
.gf-ipsw-hero {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    border-left: 4px solid #34c759;
    background: var(--card);
}
.gf-ipsw-hero__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.gf-ipsw-hero__ver {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.03em;
}
.gf-ipsw-hero__meta {
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-ipsw-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--muted);
    color: var(--muted-foreground);
}
.gf-ipsw-badge.is-on {
    background: #e8f8ee;
    color: #1d8c3e;
}
.gf-ipsw-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}
.gf-ipsw-stats > div {
    display: grid;
    justify-items: center;
    gap: 2px;
}
.gf-ipsw-stats strong {
    font-size: 1.25rem;
    font-weight: 700;
}
.gf-ipsw-stats strong.is-on { color: #34c759; }
.gf-ipsw-stats span {
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-fw-row.is-signed {
    border-left: 3px solid #34c759;
    padding-left: 11px;
}
.gf-tool-pager { margin-top: 20px; }
.gf-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}
.gf-pager__meta {
    margin: 0;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-pager__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gf-pager__item a,
.gf-pager__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--foreground);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}
.gf-pager__item a:hover {
    background: var(--muted);
}
.gf-pager__item.is-active span {
    border-color: var(--foreground);
    background: var(--foreground);
    color: var(--background, #fff);
    font-weight: 600;
}
.gf-pager__item.is-disabled span {
    opacity: .45;
    cursor: not-allowed;
}

.gf-status-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-bottom: 10px;
}
.gf-status-banner--ok { background: #ecfdf5; border-color: #a7f3d0; }
.gf-status-banner--warn { background: #fffbeb; border-color: #fcd34d; }
.gf-status-banner strong { font-size: 15px; }
.gf-status-banner span { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.gf-status-source {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.5;
}
.gf-status-source a { color: #0071e3; }
.gf-status-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 720px) { .gf-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gf-status-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}
.gf-status-card__dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: #10b981;
    flex: 0 0 auto;
}
.gf-status-card--issue .gf-status-card__dot { background: #f59e0b; }
.gf-status-card__body { min-width: 0; flex: 1; }
.gf-status-card__name { display: block; font-size: 14px; }
.gf-status-card strong { display: block; font-size: 14px; }
.gf-status-card p { margin: 4px 0 0; font-size: 12px; color: var(--muted-foreground); }
.gf-status-events {
    display: grid;
    gap: 4px;
    margin-top: 4px;
}
.gf-status-event { position: relative; }
.gf-status-event > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.gf-status-event > summary::-webkit-details-marker { display: none; }
.gf-status-event__link {
    color: #0071e3;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gf-status-event__link:hover { color: #0077ed; }
.gf-status-event__pop {
    position: absolute;
    z-index: 20;
    left: 0;
    top: calc(100% + 10px);
    width: min(360px, calc(100vw - 48px));
    padding: 14px 16px;
    border-radius: 10px;
    background: #f5f5f7;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.gf-status-event__pop::before {
    content: '';
    position: absolute;
    left: 18px;
    top: -6px;
    width: 12px;
    height: 12px;
    background: #f5f5f7;
    border-left: 1px solid rgba(0,0,0,.06);
    border-top: 1px solid rgba(0,0,0,.06);
    transform: rotate(45deg);
}
.gf-status-event__title {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--foreground);
}
.gf-status-event__title strong { display: inline; font-size: inherit; }
.gf-status-event__tone--ok { color: #1d8c3e; font-weight: 650; }
.gf-status-event__tone--warn { color: #c2410c; font-weight: 650; }
.gf-status-event__range,
.gf-status-event__users,
.gf-status-event__msg {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6e6e73;
}
.gf-status-event__msg { color: #1d1d1f; }
.gf-status-history {
    margin-top: 28px;
    padding-top: 8px;
}
.gf-status-history__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.gf-status-history__head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
}
.gf-status-history__head span {
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-status-history__list {
    display: grid;
    gap: 8px;
}
.gf-status-history__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
}
.gf-status-history__item--warn { border-left: 3px solid #f59e0b; }
.gf-status-history__item--ok { border-left: 3px solid #22c55e; }
.gf-status-history__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}
.gf-status-history__item--warn .gf-status-history__badge {
    background: #fff7ed;
    color: #c2410c;
}
.gf-status-history__item--ok .gf-status-history__badge {
    background: #ecfdf5;
    color: #15803d;
}
.gf-status-history__main { min-width: 0; flex: 1; }
.gf-status-history__main strong {
    display: block;
    font-size: 14px;
}
.gf-status-history__main em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-status-history__main p {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.5;
}
.gf-status-history__msg { color: #1d1d1f !important; }
.gf-status-history__empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    font-size: 13px;
    color: var(--muted-foreground);
    text-align: center;
}

.gf-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--muted);
    margin-bottom: 16px;
}
.gf-seg__item {
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-foreground);
}
.gf-seg__item.is-active {
    background: var(--foreground);
    color: #fff;
}
.gf-rank-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--muted) 55%, #fff);
}
.gf-rank-filters__field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 220px;
    min-width: min(100%, 220px);
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-rank-filters__label {
    flex: 0 0 auto;
    white-space: nowrap;
    letter-spacing: 0;
}
.gf-rank-filters__field select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    font: inherit;
    color: var(--foreground);
}
.gf-rank-filters__devices {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 3px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
}
.gf-rank-filters__device {
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit;
}
.gf-rank-filters__device input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gf-rank-filters__device span {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-foreground);
}
.gf-rank-filters__device.is-active span,
.gf-rank-filters__device:has(input:checked) span {
    background: var(--foreground);
    color: #fff;
}
.gf-rank-filters__device:hover span {
    color: var(--foreground);
}
.gf-rank-filters__device.is-active:hover span {
    color: #fff;
}
@media (max-width: 639px) {
    .gf-rank-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .gf-rank-filters__field {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
    .gf-rank-filters__field select {
        max-width: none;
    }
    .gf-rank-filters__devices {
        width: 100%;
        justify-content: stretch;
    }
    .gf-rank-filters__device {
        flex: 1 1 auto;
        text-align: center;
    }
    .gf-rank-filters__device span {
        width: 100%;
        justify-content: center;
    }
}
.gf-rank-tabs { margin-bottom: 14px; }
.gf-rank-boards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 960px) {
    .gf-rank-tabs { display: none; }
    .gf-rank-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gf-rank-board { display: block !important; }
}
.gf-rank-board {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    padding: 12px;
    min-width: 0;
}
@media (max-width: 959px) {
    .gf-rank-board { display: none; }
    .gf-rank-board.is-active { display: block; }
}
.gf-rank-board__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--border);
}
.gf-rank-board__head h2 { margin: 0; font-size: 15px; }
.gf-rank-board__head h2 a {
    color: inherit;
    text-decoration: none;
}
.gf-rank-board__head h2 a:hover { text-decoration: underline; }
.gf-rank-board__head span { font-size: 12px; color: var(--muted-foreground); }
.gf-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    max-height: min(70vh, 820px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.gf-rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
}
.gf-rank-item:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.gf-rank-item__n {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--muted);
    color: var(--muted-foreground);
    flex: 0 0 auto;
}
.gf-rank-item__n.is-top { background: var(--foreground); color: #fff; }
.gf-rank-item__icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.gf-rank-item__meta { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.gf-rank-item__meta strong { font-size: 13px; }
.gf-rank-item__meta span {
    font-size: 11px;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gf-paofen-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--muted) 55%, transparent);
}
.gf-paofen-cta__copy { min-width: 0; flex: 1 1 220px; }
.gf-paofen-cta__copy h2 { margin: 0; font-size: 1.1rem; }
.gf-paofen-cta__copy p { margin: 6px 0 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.55; }
.gf-paofen-cta__btn { flex: 0 0 auto; }

.gf-paofen-board { margin-top: 28px; }
.gf-paofen-board__lead { margin: 6px 0 0; font-size: 14px; }

.gf-paofen-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.gf-paofen-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: start;
    padding: 14px 14px;
    border-top: 1px solid var(--border);
}
.gf-paofen-row:first-child { border-top: 0; }
.gf-paofen-row__rank {
    width: 32px;
    height: 32px;
    margin-top: 1px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--muted);
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}
.gf-paofen-row.is-top .gf-paofen-row__rank {
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--paofen-medal, #c9a227);
}
.gf-paofen-row--gold { --paofen-medal: #c9a227; }
.gf-paofen-row--silver { --paofen-medal: #8a929c; }
.gf-paofen-row--bronze { --paofen-medal: #b47845; }
.gf-paofen-row--gold { background: linear-gradient(90deg, #fff8e8 0%, #fff 42%); }
.gf-paofen-row--silver { background: linear-gradient(90deg, #f6f7f9 0%, #fff 42%); }
.gf-paofen-row--bronze { background: linear-gradient(90deg, #fcf6f0 0%, #fff 42%); }
.gf-paofen-medal-icon {
    display: block;
    width: 28px;
    height: 28px;
}
.gf-paofen-row.is-top .gf-paofen-medal-icon {
    width: 32px;
    height: 32px;
}
.gf-paofen-row__main {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding-top: 2px;
}
.gf-paofen-row__model {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}
.gf-paofen-row.is-top .gf-paofen-row__model {
    font-size: 1.15rem;
    font-weight: 700;
}
.gf-paofen-row--gold .gf-paofen-row__model { font-size: 1.22rem; }
.gf-paofen-row__chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    width: fit-content;
    max-width: 100%;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-foreground);
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none !important;
}
.gf-paofen-row__chip:hover {
    color: var(--foreground);
}
.gf-paofen-row__chip-cpu,
.gf-paofen-row__chip-mem {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gf-paofen-row__chip-cpu::before {
    content: "处理器";
    opacity: .62;
}
.gf-paofen-row__chip-mem::before {
    content: "内存";
    opacity: .62;
}
.gf-paofen-row.is-top .gf-paofen-row__chip { font-size: 13px; }
.gf-paofen-row__score {
    text-align: right;
    padding-top: 2px;
    white-space: nowrap;
}
.gf-paofen-row__score strong {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.gf-paofen-row.is-top .gf-paofen-row__score strong {
    font-size: 1.35rem;
    font-weight: 800;
}
.gf-paofen-row--gold .gf-paofen-row__score strong { font-size: 1.45rem; }
.gf-paofen-row__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
}
.gf-paofen-row.is-top .gf-paofen-row__metrics { font-size: 13px; }
.gf-paofen-row__metrics em {
    font-style: normal;
    margin-right: 3px;
    opacity: 0.72;
}
.gf-paofen-row__metrics span { white-space: nowrap; }

.gf-paofen-faq-sec { margin-top: 36px; }
.gf-paofen-faq { margin: 12px 0 0; display: grid; gap: 14px; }
.gf-paofen-faq dt { font-weight: 600; margin: 0 0 4px; }
.gf-paofen-faq dd { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }

@media (max-width: 720px) {
    .gf-paofen-cta { padding: 16px; }
    .gf-paofen-cta__btn { width: 100%; text-align: center; justify-content: center; }
    .gf-paofen-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        padding: 12px;
        gap: 4px 10px;
    }
    .gf-paofen-row__score { padding-top: 1px; }
}
.gf-rank-item__price {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.gf-free-banner, .gf-store-bar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--muted) 70%, #fff);
    border: 1px solid var(--border);
    margin-bottom: 14px;
    font-size: 13px;
}
.gf-store-bar__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.gf-store-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 16px;
}
.gf-store-filters label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-store-filters select {
    min-width: 140px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card, #fff);
    font: inherit;
    color: var(--foreground);
}
.gf-store-nearby {
    margin: 0 0 18px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 35%, #fff);
}
.gf-store-nearby h2 { margin: 0; font-size: 16px; }
.gf-store-nearby__hint {
    margin: 6px 0 12px;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-free-grid, .gf-store-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 720px) {
    .gf-free-grid, .gf-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gf-free-card, .gf-store-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
}
.gf-free-card__icon { width: 56px; height: 56px; border-radius: 14px; flex: 0 0 auto; }
.gf-free-card__body { min-width: 0; flex: 1; }
.gf-free-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.gf-free-card__top h2 { margin: 0; font-size: 15px; }
.gf-free-card__badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gf-free-soft);
    border: 1px solid var(--gf-free-line);
    color: var(--gf-free-deep);
    font-size: 11px;
    font-weight: 700;
}
.gf-free-card__cat, .gf-free-card__desc { margin: 4px 0 0; font-size: 12px; color: var(--muted-foreground); }
.gf-free-card__price { margin: 8px 0 0; font-size: 14px; }
.gf-free-card__price s { margin-left: 6px; color: var(--muted-foreground); }
.gf-free-card__foot {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}
.gf-free-card--link {
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gf-free-card--link:hover {
    border-color: color-mix(in srgb, var(--gf-free-deep) 35%, var(--border));
    box-shadow: 0 8px 24px rgba(4, 120, 87, .08);
}
.gf-free-card__sources { color: var(--muted-foreground); }
.gf-free-tabs { margin: 0 0 14px; }
.gf-free-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-free-crumb a { color: inherit; text-decoration: none; }
.gf-free-crumb a:hover { color: var(--gf-free-deep); }
.gf-free-detail {
    display: grid;
    gap: 18px;
}
@media (min-width: 900px) {
    .gf-free-detail {
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: start;
    }
}
.gf-free-hero {
    display: flex;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--gf-free-soft), var(--card));
}
.gf-free-hero__icon {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    flex: 0 0 auto;
}
.gf-free-hero__body { min-width: 0; flex: 1; }
.gf-free-hero__body h1 {
    margin: 4px 0 0;
    font-size: 1.55rem;
    letter-spacing: -.02em;
}
.gf-free-hero__meta {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-free-hero__price {
    margin: 12px 0 0;
    font-size: 18px;
}
.gf-free-hero__price s {
    margin-left: 8px;
    color: var(--muted-foreground);
    font-size: 14px;
}
.gf-free-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
@media (min-width: 640px) {
    .gf-free-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gf-free-meta > div {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}
.gf-free-meta span {
    display: block;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-free-meta strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
}
.gf-free-section {
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
}
.gf-free-section h2 {
    margin: 0 0 10px;
    font-size: 16px;
}
.gf-free-section__body {
    font-size: 14px;
    line-height: 1.7;
    color: color-mix(in srgb, var(--foreground) 88%, transparent);
}
.gf-free-kv {
    display: grid;
    gap: 10px;
    margin: 0;
}
.gf-free-kv > div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    font-size: 13px;
}
.gf-free-kv dt { margin: 0; color: var(--muted-foreground); }
.gf-free-kv dd { margin: 0; word-break: break-word; }
.gf-free-download {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    display: grid;
    gap: 10px;
}
.gf-free-download__tip {
    margin: 0;
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.5;
}
.gf-free-related {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
}
.gf-free-related h2 { margin: 0 0 12px; font-size: 15px; }
.gf-free-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gf-free-related a {
    display: flex;
    gap: 10px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
.gf-free-related img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex: 0 0 auto;
}
.gf-free-related strong {
    display: block;
    font-size: 13px;
    line-height: 1.35;
}
.gf-free-related em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 12px;
    color: var(--gf-free-deep);
}
.gf-store-card { flex-direction: column; }
.gf-store-card__top { display: flex; justify-content: space-between; gap: 8px; }
.gf-store-card__type {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gf-store-card h2 { margin: 6px 0 0; font-size: 16px; }
.gf-store-card p { margin: 6px 0 0; font-size: 13px; color: var(--muted-foreground); }
.gf-store-card__nav {
    margin-top: 12px;
    display: inline-flex;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--foreground);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
}

.gf-fw-legend { display: flex; gap: 14px; margin-bottom: 12px; font-size: 12px; color: var(--muted-foreground); }
.gf-fw-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d4d4d4;
    margin-right: 5px;
}
.gf-fw-legend i.is-on { background: #10b981; }
.gf-fw-list {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--card);
}
.gf-fw-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
}
.gf-fw-row:first-child { border-top: 0; }
.gf-fw-row strong { display: block; font-size: 14px; }
.gf-fw-row span { font-size: 12px; color: var(--muted-foreground); }
.gf-fw-row__meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted-foreground); }
.gf-fw-tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-foreground);
}
.gf-fw-tag.is-on { color: #047857; }
.gf-btn--sm { padding: 7px 12px; font-size: 12px; border-radius: 9px; }

.gf-device-cats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 640px) { .gf-device-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gf-device-cat {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}
.gf-device-cat:hover { border-color: color-mix(in srgb, var(--foreground) 25%, var(--border)); }
.gf-device-cat__main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.gf-device-cat strong { display: block; font-size: 15px; }
.gf-device-cat__desc {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 12px;
    color: var(--muted-foreground);
    font-weight: 400;
}
.gf-device-cat > span:last-child { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }

.gf-device-home { margin-top: 4px; }
.gf-device-home__search {
    margin: 0 0 18px;
    max-width: 100%;
}
.gf-device-home__cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 720px) {
    .gf-device-home__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gf-device-home__cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 14px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    text-align: center;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gf-device-home__cat:hover {
    border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .04);
}
.gf-device-home__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--muted) 70%, #fff);
    color: var(--foreground);
}
.gf-device-home__cat strong {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.gf-device-home__meta {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-foreground);
}
.gf-device-home__results { margin-top: 4px; }
.gf-device-home__results-label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-foreground);
}
.gf-device-home__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.gf-device-home__list li { border-top: 1px solid var(--border); }
.gf-device-home__list li:first-child { border-top: 0; }
.gf-device-home__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none !important;
    color: inherit;
}
.gf-device-home__list a:hover { background: color-mix(in srgb, var(--muted) 45%, #fff); }
.gf-device-home__list-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.gf-device-home__list-main strong {
    font-size: 14px;
    font-weight: 600;
}
.gf-device-home__list-meta {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--muted-foreground);
    white-space: nowrap;
}
.gf-device-home__empty {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--muted-foreground);
}
.gf-device-home__other { margin-top: 28px; }
.gf-device-home__other-label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-foreground);
}
.gf-device-home__other-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gf-device-home__other-links a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: inherit;
    text-decoration: none !important;
}
.gf-device-home__other-links a:hover {
    border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
}
.gf-device-home-faq { margin-top: 36px; }
.gf-device-home-faq__list { margin: 12px 0 0; display: grid; gap: 14px; }
.gf-device-home-faq__list dt { font-weight: 600; margin: 0 0 4px; }
.gf-device-home-faq__list dd { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
.gf-device-type-icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: color-mix(in srgb, var(--muted-foreground) 70%, var(--foreground));
    margin-top: 1px;
}
.gf-device-type-icon svg { display: block; }
.gf-device-series {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 640px) { .gf-device-series { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .gf-device-series { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gf-device-series__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}
.gf-device-series__card:hover { border-color: color-mix(in srgb, var(--foreground) 25%, var(--border)); }
.gf-device-series__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.gf-device-series__card strong { font-size: 15px; }
.gf-device-series__card > span { font-size: 12px; color: var(--muted-foreground); }
.gf-device-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.gf-device-layout > .gf-device-panel { grid-column: 2; grid-row: 1; }
.gf-device-layout > .gf-device-aside { grid-column: 1; grid-row: 1; }
.gf-device-dock { display: none; }
.gf-device-sheet-scrim { display: none; }
.gf-device-picker { display: grid; gap: 10px; }
.gf-device-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-device-crumb a { color: var(--muted-foreground); }
.gf-device-crumb a:hover { color: var(--foreground); }
.gf-device-aside { display: grid; gap: 10px; }
.gf-device-tree {
    display: grid;
    gap: 6px;
    align-content: start;
    max-height: 70vh;
    overflow: auto;
    padding-right: 2px;
    min-height: 0;
}
.gf-device-folder {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    min-width: 0;
}
.gf-device-folder__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--card);
}
.gf-device-folder[open] > .gf-device-folder__summary {
    border-bottom: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
}
.gf-device-folder__summary::-webkit-details-marker { display: none; }
.gf-device-folder__chevron {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--muted-foreground);
    transition: transform .15s ease;
    flex: 0 0 auto;
}
.gf-device-folder[open] > .gf-device-folder__summary .gf-device-folder__chevron {
    transform: rotate(90deg);
}
.gf-device-folder__name { flex: 1 1 auto; min-width: 0; }
.gf-device-folder__count {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}
.gf-device-folder__list {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: grid;
    gap: 4px;
    max-height: min(48vh, 420px);
    overflow: auto;
}
.gf-device-folder__list .gf-device-list__item {
    padding: 9px 10px;
    border-radius: 10px;
    font-weight: 500;
}
.gf-device-other {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.gf-device-other__label {
    margin: 0 0 6px;
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-device-other__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
}
.gf-device-other__links a { color: var(--muted-foreground); }
.gf-device-other__links a:hover { color: var(--foreground); }
.gf-device-search {
    position: relative;
    display: block;
}
.gf-device-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    font-size: 14px;
    pointer-events: none;
}
.gf-device-search input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 10px 12px 10px 32px;
    font-size: 14px;
    outline: none;
}
.gf-device-search input:focus { border-color: color-mix(in srgb, var(--foreground) 35%, var(--border)); }
.gf-device-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    max-height: 70vh;
    overflow: auto;
}
.gf-device-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    font-size: 13px;
    font-weight: 500;
}
.gf-device-list__item time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    color: var(--muted-foreground);
}
.gf-device-list__item:hover { border-color: color-mix(in srgb, var(--foreground) 30%, var(--border)); }
.gf-device-list__item.is-active {
    border-color: var(--foreground);
    background: var(--foreground);
    color: #fff;
}
.gf-device-list__item.is-active time { color: rgba(255,255,255,.7); }
.gf-device-list__empty {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--muted-foreground);
}
.gf-device-panel {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    padding: 22px;
}
.gf-device-panel__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.gf-device-panel__head h2 { margin: 0; font-size: 1.45rem; letter-spacing: -0.02em; }
.gf-device-panel__head p { margin: 6px 0 0; font-size: 13px; color: var(--muted-foreground); }
.gf-device-modelid {
    border-radius: 10px;
    background: var(--muted, #f4f4f5);
    padding: 8px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-device-panel__media {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.gf-device-panel__media img {
    width: 140px;
    height: auto;
    object-fit: contain;
}
.gf-device-specs {
    margin: 8px 0 0;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}
.gf-device-specs[hidden],
.gf-cmos-cam-panel[hidden] {
    display: none !important;
}
.gf-cmos-cam-panel {
    scroll-margin-top: 72px;
}
.gf-device-specs__row {
    display: grid;
    grid-template-columns: minmax(88px, 112px) minmax(0, 1fr);
    gap: 10px 14px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.gf-device-specs__row dt {
    margin: 0;
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.45;
}
.gf-device-specs__icon {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 1px;
    color: color-mix(in srgb, var(--muted-foreground) 88%, var(--foreground));
    opacity: .92;
}
.gf-device-specs__icon svg { display: block; }
.gf-device-specs__row dd {
    margin: 0;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.55;
    word-break: break-word;
}
.gf-spec-colors {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.gf-spec-swatch {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.gf-spec-swatch.is-light {
    border-color: color-mix(in srgb, var(--foreground) 22%, var(--border));
}
.gf-spec-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 96px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 0;
    box-shadow:
        rgba(210, 210, 210, 0.55) 1.5px 1.5px 1px -1px inset,
        rgba(210, 210, 210, 0.55) -1px -1px 1px 0 inset;
    background: #eceff1;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
    color: #1f2937;
}
.gf-spec-pill--cpu {
    background-color: #B0E0E6;
}
.gf-spec-pill--mem {
    background-color: #DCDCDC;
}
.gf-spec-pill--battery {
    background-color: #C8E6C9;
}
.gf-spec-pill--screen {
    background-color: #BBDEFB;
}
.gf-spec-pill--price {
    background-color: #FFE0B2;
}
.gf-spec-pill--default {
    background-color: #e8edf2;
}
.gf-spec-pill span { display: block; }
.gf-spec-lines {
    display: grid;
    gap: 3px;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.45;
}
.gf-spec-text { word-break: break-word; }
.gf-spec-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--foreground);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(23, 23, 23, .28);
}
.gf-spec-link:hover {
    text-decoration-color: currentColor;
}
.gf-device-specs__row dd .gf-spec-pill { align-items: flex-start; text-align: left; }
.gf-device-more {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.gf-device-more__hint {
    flex: 1 1 100%;
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted-foreground);
}
.gf-device-source {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #0f766e 28%, var(--border));
    background:
        linear-gradient(135deg, color-mix(in srgb, #0f766e 10%, #fff), color-mix(in srgb, #0369a1 8%, #fff));
}
.gf-device-source__badge {
    flex: 0 0 auto;
    margin-top: 1px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.gf-device-source p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--foreground) 88%, var(--muted-foreground));
}
.gf-device-source a {
    font-weight: 700;
    color: #0f766e;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gf-device-yanji {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #b45309 26%, var(--border));
    background:
        linear-gradient(135deg, color-mix(in srgb, #f59e0b 12%, #fff), color-mix(in srgb, #ea580c 7%, #fff));
}
.gf-device-yanji.is-compact {
    margin-top: 16px;
    margin-bottom: 0;
}
.gf-paofen-cta + .gf-device-yanji {
    margin-top: 14px;
    margin-bottom: 0;
}
.gf-paofen-cta + .gf-device-yanji + .gf-paofen-board {
    margin-top: 28px;
}
.gf-device-yanji__body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1 1 240px;
}
.gf-device-yanji__badge {
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #c2410c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.gf-device-yanji__copy strong {
    display: block;
    font-size: 14px;
    line-height: 1.4;
}
.gf-device-yanji__copy p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--foreground) 78%, var(--muted-foreground));
}
.gf-device-yanji__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.gf-device-yanji__actions .gf-btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
}
@media (max-width: 640px) {
    .gf-device-yanji { align-items: stretch; }
    .gf-device-yanji__actions { width: 100%; }
    .gf-device-yanji__actions .gf-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}
.gf-device-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 8px 0;
    background: color-mix(in srgb, var(--background, #fff) 92%, transparent);
    backdrop-filter: blur(8px);
}
.gf-device-viewtabs {
    display: inline-flex;
    padding: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--muted) 80%, #fff);
    border: 1px solid var(--border);
}
.gf-device-viewtabs__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
}
.gf-device-viewtabs__btn.is-active {
    background: var(--card, #fff);
    color: var(--foreground);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.gf-device-paramfilter {
    position: relative;
}
.gf-device-toolbar .gf-device-paramfilter {
    margin-left: auto;
}
.gf-device-compare-actions .gf-device-paramfilter {
    margin-left: 0;
}
.gf-device-compare-actions .gf-device-paramfilter__panel {
    right: auto;
    left: 0;
    z-index: 30;
}
.gf-device-paramfilter__toggle {
    font-size: 13px;
    padding: 7px 12px;
}
.gf-device-paramfilter__toggle.is-active {
    border-color: color-mix(in srgb, var(--foreground) 35%, var(--border));
    background: color-mix(in srgb, var(--muted) 55%, #fff);
}
.gf-device-paramfilter__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(360px, calc(100vw - 32px));
    max-height: min(70vh, 420px);
    overflow: auto;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card, #fff);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    z-index: 20;
}
.gf-device-paramfilter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.gf-device-paramfilter__head strong { font-size: 13px; }
.gf-device-paramfilter__presets {
    display: inline-flex;
    gap: 4px;
}
.gf-device-paramfilter__presets .gf-btn {
    font-size: 12px;
    padding: 4px 8px;
}
.gf-device-paramfilter__hint {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted-foreground);
}
.gf-device-paramfilter__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}
.gf-device-paramfilter__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
}
.gf-device-paramfilter__item input { accent-color: var(--foreground); }
.gf-spec-size {
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.gf-spec-size__svg {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
}
.gf-spec-size__body {
    fill: color-mix(in srgb, var(--muted, #f1f5f9) 70%, #fff);
    stroke: #64748b;
    stroke-width: 1.4;
}
.gf-spec-size__screen {
    fill: color-mix(in srgb, #e2e8f0 80%, #fff);
    stroke: #94a3b8;
    stroke-width: 0.8;
}
.gf-spec-size__depth {
    fill: color-mix(in srgb, #cbd5e1 55%, #fff);
    stroke: #64748b;
    stroke-width: 1;
}
.gf-spec-size__kbd,
.gf-spec-screen__base {
    fill: color-mix(in srgb, #94a3b8 28%, #fff);
    stroke: #64748b;
    stroke-width: 1;
}
.gf-spec-size__hinge {
    stroke: #64748b;
    stroke-width: 1.2;
    stroke-linecap: round;
}
.gf-spec-size__band {
    stroke: #64748b;
    stroke-width: 2.2;
    stroke-linecap: round;
    fill: none;
}
.gf-spec-watch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    justify-content: center;
}
.gf-spec-watch__item {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 4px;
}
.gf-spec-watch__svg { display: block; overflow: visible; }
.gf-spec-watch__case {
    fill: color-mix(in srgb, var(--muted, #f1f5f9) 70%, #fff);
    stroke: #64748b;
    stroke-width: 1.4;
}
.gf-spec-watch__glass {
    fill: color-mix(in srgb, #dbeafe 55%, #fff);
    stroke: #94a3b8;
    stroke-width: 0.8;
}
.gf-spec-watch__band {
    fill: color-mix(in srgb, #cbd5e1 45%, #fff);
    stroke: #94a3b8;
    stroke-width: 0.8;
}
.gf-spec-watch__crown {
    fill: #94a3b8;
    stroke: #64748b;
    stroke-width: 0.6;
}
.gf-spec-watch__mm {
    fill: #0f172a;
    font-size: 9px;
    font-weight: 700;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.gf-spec-watch__cap {
    display: grid;
    gap: 1px;
    text-align: center;
    font-size: 11px;
    line-height: 1.25;
}
.gf-spec-watch__cap strong { font-size: 12px; }
.gf-spec-watch__cap span { color: var(--muted-foreground, #64748b); font-size: 10px; }
.gf-device-compare__table tbody td .gf-spec-watch { gap: 6px; }
.gf-device-compare__table tbody td .gf-spec-watch__cap strong { font-size: 11px; }
.gf-device-compare__table tbody td .gf-spec-watch__cap span { font-size: 9px; }
.gf-spec-size__guide {
    stroke: #94a3b8;
    stroke-width: 1;
}
.gf-spec-size__label {
    fill: #0f172a;
    font-size: 12px;
    font-weight: 700;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.gf-spec-size__label--d {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
}
.gf-spec-size__caption {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    justify-content: center;
    margin-top: 2px;
}
.gf-spec-size__dims {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}
.gf-spec-size__weight {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.01em;
}
.gf-spec-storage {
    display: grid;
    gap: 8px;
    min-width: min(100%, 280px);
}
.gf-spec-storage__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.gf-spec-storage__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 0;
    box-shadow:
        rgba(210, 210, 210, 0.55) 1.5px 1.5px 1px -1px inset,
        rgba(210, 210, 210, 0.55) -1px -1px 1px 0 inset;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: #1f2937;
    white-space: nowrap;
}
.gf-spec-storage__chip--ram {
    background-color: #DCDCDC;
}
.gf-spec-storage__chip--rom {
    background-color: #e8edf2;
}
.gf-device-compare__table tbody td .gf-spec-size {
    margin: 0 auto;
}
.gf-device-compare__table tbody td .gf-spec-size__svg {
    width: auto;
    max-width: 110px;
    height: auto;
}
.gf-device-compare__table tbody td .gf-spec-size__label { font-size: 11px; }
.gf-device-compare__table tbody td .gf-spec-size__dims,
.gf-device-compare__table tbody td .gf-spec-size__weight { font-size: 11px; }
.gf-device-compare__table tbody td .gf-spec-storage {
    min-width: 100px;
    max-width: 148px;
    margin: 0 auto;
    gap: 6px;
}
.gf-device-compare__table tbody td .gf-spec-storage__chip {
    min-height: 26px;
    padding: 4px 8px;
    font-size: 11px;
}
.gf-device-compare__table tbody td .gf-spec-storage__row {
    gap: 4px;
    justify-content: center;
}
.gf-spec-meters {
    display: grid;
    gap: 7px;
    min-width: min(100%, 220px);
    width: 100%;
    max-width: 280px;
}
.gf-spec-meter__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}
.gf-spec-meter__label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}
.gf-spec-meter__value {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.gf-spec-meter__track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted, #e2e8f0) 85%, #fff);
    overflow: hidden;
}
.gf-spec-meter__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #94a3b8;
    min-width: 2px;
    transition: width .2s ease;
}
.gf-spec-meters--endurance .gf-spec-meter__fill { background: linear-gradient(90deg, #86efac, #22c55e); }
.gf-spec-meters--battery .gf-spec-meter__fill { background: linear-gradient(90deg, #a7f3d0, #10b981); }
.gf-spec-meters--brightness .gf-spec-meter__fill { background: linear-gradient(90deg, #fde68a, #f59e0b); }
.gf-spec-meters--refresh .gf-spec-meter__fill { background: linear-gradient(90deg, #93c5fd, #3b82f6); }
.gf-spec-meters--memory .gf-spec-meter__fill { background: linear-gradient(90deg, #d4d4d8, #71717a); }
.gf-spec-screen {
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.gf-spec-screen__svg { display: block; overflow: visible; }
.gf-spec-screen__body {
    fill: #f8fafc;
    stroke: #64748b;
    stroke-width: 1.3;
}
.gf-spec-screen__glass {
    fill: #e2e8f0;
    stroke: #94a3b8;
    stroke-width: 0.7;
}
.gf-spec-screen__inch {
    fill: #0f172a;
    font-size: 9px;
    font-weight: 700;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.gf-spec-screen__panel {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    text-align: center;
    max-width: 120px;
    line-height: 1.3;
}
.gf-device-compare__table tbody td .gf-spec-size {
    margin: 0 auto;
}
.gf-device-compare__table tbody td .gf-spec-size__svg {
    width: 72px;
    height: auto;
}
.gf-device-compare__table tbody td .gf-spec-size__label { font-size: 7.5px; }
.gf-device-compare__table tbody td .gf-spec-size__weight { font-size: 10px; }
.gf-device-compare__table tbody td .gf-spec-meters {
    min-width: 88px;
    max-width: 120px;
    margin: 0 auto;
    gap: 5px;
}
.gf-device-compare__table tbody td .gf-spec-meter__label { font-size: 10px; }
.gf-device-compare__table tbody td .gf-spec-meter__value { font-size: 11px; }
.gf-device-compare__table tbody td .gf-spec-meter__track { height: 5px; }
.gf-device-compare__table tbody td .gf-spec-screen { margin: 0 auto; }
.gf-device-compare__table tbody td .gf-spec-screen__panel { font-size: 10px; max-width: 100px; }
.gf-device-compare-actions {
    display: none !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.gf-device-compare.is-fullscreen .gf-device-compare-actions {
    display: flex !important;
}
.gf-device-compare-actions .gf-btn {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}
.gf-device-compare-actions .gf-btn.is-active,
.gf-device-compare-actions .gf-btn:not(:disabled) {
    border-color: color-mix(in srgb, var(--foreground) 35%, var(--border));
}
.gf-device-compare-diff {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--muted-foreground);
    user-select: none;
}
html.gf-device-compare-open,
body.gf-device-compare-open {
    overflow: hidden !important;
}
.gf-device-compare {
    min-width: 0;
    display: none !important;
}
.gf-device-compare.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex !important;
    flex-direction: column;
    background: #fff;
    min-width: 0;
}
.gf-device-compare[hidden] {
    display: none !important;
}
.gf-device-compare__chrome {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 45%, #fff);
}
.gf-device-compare__chrome-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
}
.gf-device-compare__title {
    font-size: 13px;
    font-weight: 700;
}
.gf-device-compare__hint {
    margin: 0;
    font-size: 11px;
    color: var(--muted-foreground);
}
.gf-device-compare__exit {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}
.gf-device-compare__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    background: var(--card);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.gf-device-compare__scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.gf-device-compare__scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--foreground) 28%, #d4d4d4);
    border-radius: 8px;
    border: 2px solid #fff;
}
.gf-device-compare__scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--muted) 70%, #fff);
}
.gf-device-compare__table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: max(100%, 720px);
    font-size: 12px;
}
.gf-device-compare__table th,
.gf-device-compare__table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #eceff1;
    vertical-align: middle;
    text-align: left;
    background: #fff;
    font-size: 12px;
    line-height: 1.4;
}
.gf-device-compare__table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f3f4f6;
    box-shadow: 0 1px 0 #d1d5db;
    font-size: 11px;
}
.gf-device-compare__sticky {
    position: sticky;
    left: 0;
    z-index: 4;
    min-width: 92px;
    max-width: 118px;
    width: 104px;
    background: #f8fafc !important;
    font-weight: 650;
    color: #4b5563;
    font-size: 11px;
}
.gf-device-compare__corner,
.gf-device-compare__table thead .gf-device-compare__sticky {
    z-index: 8;
    background: #e8edf2 !important;
    top: 0;
    left: 0;
}
.gf-device-compare__label {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.35;
}
.gf-device-compare__label .gf-device-specs__icon {
    margin-top: 1px;
    opacity: .75;
}
.gf-device-compare__label .gf-device-specs__icon svg {
    width: 12px;
    height: 12px;
}
.gf-device-compare__col {
    min-width: 120px;
    max-width: 160px;
}
.gf-device-compare__col[hidden],
.gf-device-compare__row[hidden] { display: none !important; }
.gf-device-compare__table tbody tr:nth-child(even) td,
.gf-device-compare__table tbody tr:nth-child(even) > .gf-device-compare__sticky {
    background: #fafbfc !important;
}
.gf-device-compare__table tbody tr:hover td {
    background: #f3f8fc !important;
}
.gf-device-compare__table tbody tr:hover > .gf-device-compare__sticky {
    background: #eaf2f8 !important;
}
.gf-device-compare__pick {
    display: grid;
    justify-items: center;
    gap: 3px;
    cursor: pointer;
    text-align: center;
    font-size: 10px;
    position: relative;
    padding-top: 2px;
    min-height: 54px;
    transition: min-height .15s ease;
}
.gf-device-compare__check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gf-device-compare__box {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1.5px solid color-mix(in srgb, var(--foreground) 35%, var(--border));
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
}
.gf-device-compare__check:checked + .gf-device-compare__box {
    background: var(--foreground);
    border-color: var(--foreground);
    box-shadow: inset 0 0 0 2px #fff;
}
.gf-device-compare__thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    transition: opacity .12s ease, height .12s ease, margin .12s ease;
}
.gf-device-compare__name {
    font-size: 10px;
    font-weight: 650;
    line-height: 1.25;
}
.gf-device-compare__year {
    font-style: normal;
    color: var(--muted-foreground);
    font-size: 9px;
}
.gf-device-compare__scroll.is-scrolled-y .gf-device-compare__pick {
    min-height: 0;
    gap: 0;
}
.gf-device-compare__scroll.is-scrolled-y .gf-device-compare__thumb,
.gf-device-compare__scroll.is-scrolled-y .gf-device-compare__year {
    display: none;
}
.gf-device-compare__scroll.is-scrolled-y .gf-device-compare__table thead th {
    padding-top: 5px;
    padding-bottom: 5px;
}
.gf-device-compare__table tbody td {
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    word-break: break-word;
}
.gf-device-compare__table tbody td .gf-spec-colors { justify-content: center; gap: 5px; }
.gf-device-compare__table tbody td .gf-spec-lines {
    justify-items: center;
    text-align: center;
    gap: 2px;
    font-size: 11px;
    color: #374151;
}
.gf-device-compare__table tbody td .gf-spec-pill {
    margin: 0 auto;
    min-width: 88px;
    max-width: 140px;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 10px;
}
.gf-device-compare__table tbody td .gf-spec-pill--cpu {
    background-color: #B0E0E6;
}
.gf-device-compare__table tbody td .gf-spec-pill--mem {
    background-color: #DCDCDC;
}
.gf-device-compare__table tbody td .gf-spec-pill--battery {
    background-color: #C8E6C9;
}
.gf-device-compare__table tbody td .gf-spec-pill--screen {
    background-color: #BBDEFB;
}
.gf-device-compare__table tbody td .gf-spec-pill--price {
    background-color: #FFE0B2;
}
.gf-device-compare__table tbody td .gf-spec-swatch {
    width: 13px;
    height: 13px;
}
.gf-device-compare__table tbody td .gf-spec-text {
    font-size: 12px;
    color: #1f2937;
}
.gf-device-compare.is-fullscreen .gf-device-ai {
    flex: 0 0 auto;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    max-height: 36vh;
    overflow: auto;
}
.gf-device-ai {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, #0369a1 28%, var(--border));
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, #0369a1 8%, #fff), #fff);
}
.gf-device-ai__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.gf-device-ai__head h3 { margin: 0 0 4px; font-size: 15px; }
.gf-device-ai__head p { margin: 0; font-size: 12px; color: var(--muted-foreground); line-height: 1.5; }
.gf-device-ai__ask {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.gf-device-ai__ask textarea {
    width: 100%;
    resize: vertical;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    font: inherit;
    color: var(--foreground);
    line-height: 1.5;
}
.gf-device-ai__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.gf-device-ai__meta { font-size: 12px; color: var(--muted-foreground); }
.gf-device-ai__result {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 13px;
    line-height: 1.7;
    white-space: normal;
    max-height: min(50vh, 480px);
    overflow: auto;
}
.gf-device-ai__diff { color: #9a3412; }
@media (max-width: 860px) {
    .gf-device-layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }
    .gf-device-layout > .gf-device-panel,
    .gf-device-layout > .gf-device-aside {
        grid-column: auto;
        grid-row: auto;
    }
    .gf-tool-head {
        margin-bottom: 10px;
    }
    .gf-tool-head h1 {
        font-size: 1.25rem;
        margin-top: 2px;
    }
    .gf-tool-head > p {
        display: none;
    }
    .gf-device-crumb { margin-bottom: 8px; }
    .gf-device-source { display: none; }
    .gf-device-source + .gf-device-yanji:not(.is-compact),
    .gf-tool-head + .gf-device-yanji:not(.is-compact) { display: none; }
    .gf-device-toolbar {
        top: env(safe-area-inset-top, 0);
        margin-bottom: 8px;
        gap: 8px;
    }
    .gf-device-viewtabs { width: 100%; }
    .gf-device-viewtabs__btn { flex: 1 1 0; text-align: center; }
    .gf-device-paramfilter { margin-left: 0; width: 100%; }
    .gf-device-paramfilter__toggle { width: 100%; }
    .gf-device-paramfilter__panel { left: 0; right: 0; width: auto; }
    .gf-device-panel {
        padding: 16px;
        border-radius: 14px;
        order: 1;
    }
    .gf-device-panel__head {
        padding-bottom: 12px;
        gap: 8px;
    }
    .gf-device-panel__head h2 { font-size: 1.28rem; }
    .gf-device-panel__media { margin-top: 12px; }
    .gf-device-panel__media img { width: 108px; }
    .gf-device-specs__row {
        grid-template-columns: minmax(72px, 30%) minmax(0, 1fr);
        gap: 8px 10px;
        padding: 10px 0;
    }

    .gf-device-aside {
        order: 2;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 46;
        display: flex;
        flex-direction: column;
        gap: 0;
        max-height: min(78vh, 640px);
        margin: 0;
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        border: 1px solid var(--border);
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
        background: var(--card);
        box-shadow: 0 -10px 32px rgba(15, 23, 42, .12);
        transform: translateY(calc(100% - 88px));
        transition: transform .24s ease;
    }
    .gf-device-aside.is-open {
        transform: translateY(0);
    }
    .gf-device-dock {
        display: grid;
        gap: 0;
        flex: 0 0 auto;
        border-bottom: 1px solid transparent;
    }
    .gf-device-aside.is-open .gf-device-dock {
        border-bottom-color: var(--border);
    }
    .gf-device-dock__handle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px 4px;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }
    .gf-device-dock__grip {
        position: absolute;
        left: 50%;
        top: 5px;
        width: 32px;
        height: 3px;
        margin-left: -16px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--border) 40%, #a3a3a3);
    }
    .gf-device-dock__label {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    .gf-device-dock__label strong {
        font-size: 13px;
        font-weight: 650;
        letter-spacing: -.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .gf-device-dock__label em {
        font-style: normal;
        font-size: 11px;
        color: var(--muted-foreground);
        flex: 0 0 auto;
    }
    .gf-device-dock__chevron {
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--muted-foreground);
        border-bottom: 2px solid var(--muted-foreground);
        transform: rotate(45deg);
        transition: transform .2s ease;
        flex: 0 0 auto;
        margin-bottom: 4px;
    }
    .gf-device-aside.is-open .gf-device-dock__chevron {
        transform: rotate(225deg);
        margin-bottom: 0;
        margin-top: 4px;
    }
    .gf-device-dock__series {
        display: flex;
        gap: 6px;
        padding: 0 12px 10px;
        padding-right: 72px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gf-device-dock__series::-webkit-scrollbar { display: none; }
    .gf-device-dock__series-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex: 0 0 auto;
        height: 32px;
        padding: 0 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--background);
        color: var(--foreground);
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }
    .gf-device-dock__series-btn.is-active {
        background: var(--foreground);
        border-color: var(--foreground);
        color: var(--primary-foreground);
    }
    .gf-device-dock__series-btn .gf-device-type-icon {
        width: 14px;
        height: 14px;
    }
    .gf-device-picker {
        display: none;
        gap: 10px;
        padding: 0 12px 12px;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
    }
    .gf-device-aside.is-open .gf-device-picker {
        display: grid;
    }
    .gf-device-tree {
        max-height: none;
        display: grid;
        gap: 6px;
        overflow: visible;
        padding-right: 0;
    }
    .gf-device-folder {
        flex: none;
        max-height: none;
        overflow: visible;
        display: block;
    }
    .gf-device-folder__list {
        max-height: min(38vh, 320px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .gf-device-list {
        display: grid;
        gap: 6px;
        max-height: min(48vh, 420px);
        overflow: auto;
        padding-bottom: 0;
    }
    .gf-device-list li[data-name] { flex: none; }
    .gf-device-list__item { white-space: normal; }
    .gf-device-sheet-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(15, 23, 42, .28);
        backdrop-filter: blur(2px);
    }
    .gf-device-sheet-scrim[hidden] { display: none !important; }
    html.gf-device-picker-open,
    html.gf-device-picker-open body {
        overflow: hidden;
    }
    html.gf-device-compare-open .gf-device-aside,
    html.gf-device-compare-open .gf-device-sheet-scrim {
        display: none !important;
    }
    body:has(.gf-device-aside) .gf-support__fab {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }
    .gf-device-compare-actions { width: 100%; }
    .gf-device-compare__col { min-width: 96px; max-width: 120px; }
    .gf-device-compare__sticky { min-width: 72px; max-width: 92px; width: 84px; font-size: 10px; }
    .gf-device-compare__thumb { width: 28px; height: 28px; }
    .gf-device-compare__chrome { padding: 6px 8px; }
    .gf-device-compare__hint { display: none; }
}

/* CMOS camera compare (HubWeb-style device groups) */
.gf-cmos-camtabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--muted) 80%, #fff);
    border: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 3;
}
.gf-cmos-camtabs__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
}
.gf-cmos-camtabs__btn.is-active {
    background: var(--card, #fff);
    color: var(--foreground);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.gf-cmos-groups {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--muted) 70%, #fff);
    border: 1px solid var(--border);
}
.gf-cmos-groups__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.gf-cmos-groups__btn.is-active {
    background: var(--card, #fff);
    color: var(--foreground);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.gf-cmos-compare .gf-device-compare__sticky {
    min-width: 52px;
    max-width: 68px;
    width: 60px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 10px;
    letter-spacing: 0;
}
.gf-cmos-compare .gf-device-compare__corner {
    font-size: 10px;
    font-weight: 700;
}
.gf-cmos-compare__table thead .gf-cmos-compare__device-row > th {
    top: 0;
    z-index: 6;
}
.gf-cmos-compare__table thead .gf-cmos-compare__role-row > th {
    top: var(--gf-cmos-head-device, 52px);
    z-index: 5;
    box-shadow: 0 1px 0 #d1d5db;
}
.gf-cmos-compare__table thead .gf-cmos-compare__corner {
    top: 0;
    z-index: 9;
}
.gf-cmos-compare__table thead .gf-cmos-compare__device {
    vertical-align: bottom;
    border-bottom: 0;
}
.gf-cmos-compare__table thead .gf-cmos-compare__role {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted-foreground);
    padding-top: 4px;
    padding-bottom: 8px;
    min-width: 72px;
    max-width: 96px;
    background: #f3f4f6;
}
.gf-cmos-compare__table tbody td.gf-cmos-compare__cell {
    font-size: 12px;
    text-align: center;
    min-width: 72px;
    max-width: 96px;
}
.gf-cmos-compare .gf-device-compare__pick {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.gf-cmos-compare .gf-device-compare__name {
    font-size: 11px;
    text-align: center;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gf-cmos-compare__scroll.is-scrolled-y .gf-cmos-compare__device-row .gf-device-compare__name {
    display: -webkit-box;
    font-size: 10px;
}
.gf-cmos-compare__scroll.is-scrolled-y .gf-cmos-compare__role-row > th {
    top: var(--gf-cmos-head-device, 36px);
}

/* iPhone model detail */
.gf-model-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:18px 0 22px}.gf-model-detail-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px}.gf-model-detail-card span{display:block;font-size:12px;color:var(--muted-foreground);margin-bottom:4px}.gf-model-detail-card strong{font-size:15px}.gf-model-detail-body{font-size:14px;line-height:1.7;color:var(--foreground)}.gf-model-detail-body ul{padding-left:1.2em;margin:8px 0 16px}.gf-model-detail-promo{margin:22px 0;padding:16px;border-radius:12px;background:var(--muted);border:1px solid var(--border)}.gf-model-detail-promo h2{font-size:16px;margin:0 0 8px}.gf-model-detail-promo p{margin:0 0 12px;font-size:13px;color:var(--muted-foreground)}.gf-model-detail-promo__actions{display:flex;flex-wrap:wrap;gap:8px}.gf-model-detail-related{margin-top:28px}.gf-model-detail-related h2,.gf-model-detail-faq h2{font-size:18px;margin:0 0 12px}.gf-model-detail-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.gf-model-detail-related__grid a{display:block;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card);text-decoration:none;color:inherit}.gf-model-detail-related__grid a:hover{border-color:var(--foreground)}.gf-model-detail-related__grid strong{display:block;font-size:13px}.gf-model-detail-related__grid span{font-size:12px;color:var(--muted-foreground)}.gf-model-detail-faq{margin-top:28px}.gf-model-detail-faq__item{padding:12px 0;border-bottom:1px solid var(--border)}.gf-model-detail-faq__item h3{font-size:15px;margin:0 0 6px}.gf-model-detail-faq__item p{margin:0;font-size:13px;color:var(--muted-foreground);line-height:1.6}.gf-breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted-foreground);margin-bottom:8px}.gf-breadcrumb a{color:var(--foreground);text-decoration:none}.gf-breadcrumb a:hover{text-decoration:underline}

/* SEO yanji hub */
.site-footer__seo-entry{margin:0 0 10px}.site-footer__seo-entry a{color:var(--foreground);font-weight:600;text-decoration:none}.site-footer__seo-entry a:hover{text-decoration:underline}.gf-yanji-hub-cta,.gf-yanji-device-cta{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 22px}.gf-yanji-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}.gf-yanji-toc a{display:inline-flex;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:13px;color:inherit;text-decoration:none}.gf-yanji-toc a:hover{background:var(--muted)}.gf-yanji-group{margin:0 0 32px}.gf-yanji-group h2{font-size:20px;margin:0 0 6px}.gf-yanji-group__lead{margin:0 0 14px;font-size:13px;color:var(--muted-foreground)}.gf-yanji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.gf-yanji-card{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card);text-decoration:none;color:inherit;min-height:72px}.gf-yanji-card:hover{border-color:var(--foreground)}.gf-yanji-card strong{font-size:14px;line-height:1.35}.gf-yanji-card span{font-size:12px;color:var(--muted-foreground)}.gf-yanji-note{margin-top:12px;padding:16px;border-radius:12px;background:var(--muted);border:1px solid var(--border)}.gf-yanji-note h2{font-size:16px;margin:0 0 8px}.gf-yanji-note ul{margin:0;padding-left:1.2em;font-size:13px;line-height:1.7;color:var(--muted-foreground)}.gf-yanji-device-body{font-size:14px;line-height:1.75}.gf-yanji-device-body h2{font-size:17px;margin:22px 0 8px}.gf-yanji-device-body ul,.gf-yanji-device-body ol{padding-left:1.25em;margin:0 0 12px}.gf-yanji-device-tip{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--muted);font-size:13px;color:var(--muted-foreground)}.gf-yanji-related{margin-top:28px}.gf-yanji-related h2{font-size:18px;margin:0 0 12px}