/* ==========================================================================
   mtcms 应用市场（app/store，服务端渲染）

   设计语言与开发者平台（public/dev-static/app.css）同源，改令牌两边一起改：
     · 白底，不铺灰底；层次靠 1px 细线 + 字重 + 灰度，而不是阴影
     · 圆角克制（4 / 6 / 10），阴影只出现在真正「浮起」的层（登录卡、弹层）
     · 品牌绿退到强调位：选中态、免费、状态点、品牌标；主按钮用近墨黑
     · 字号阶梯 11.5 / 12 / 13 / 13.5 / 15 / 20 / 26 / 40，正文 13.5

   市场端比门户多的只有一组「交易色」，别和品牌色混：
     · --c-price 价格（暖红橙）—— 中文电商的既定预期，看到红=要付钱
     · --c-error 错误（正红）—— 只在「出问题了」时出现
   两者刻意不同色：价格每天出现，错误不该天天刺眼。

   ⚠️ --c-brand 只做**文字与图标**，填充一律用 --c-brand-fill。
      混用会让白底上的绿字浅到看不清（#07c160 在白底对比度不足）。
   ========================================================================== */

:root {
    /* 品牌 */
    --c-brand: #0a8b4a;
    --c-brand-fill: #07c160;
    --c-brand-hover: #077239;
    --c-brand-bg: #eff9f3;
    --c-brand-border: #cbeddd;

    /* 主按钮（近墨黑）：与门户同一个取值，三端按钮不该有两种气质 */
    --c-ink: #16181d;
    --c-ink-hover: #262a33;

    /* 评分星（琥珀）。全站一处取值，别再散落 #f0a020 */
    --c-star: #e08b1f;

    /* 交易色 */
    --c-price: #c2410c;
    --c-price-bg: #fff4ee;
    --c-price-border: #f6d9c9;

    /* 状态 */
    --c-success: #0a8b4a;
    --c-success-bg: #eff9f3;
    --c-success-border: #cbeddd;
    --c-warning: #b45f06;
    --c-warning-bg: #fdf4e7;
    --c-warning-border: #f3ddc0;
    --c-error: #d13b30;
    --c-error-bg: #fdf1f0;
    --c-error-border: #f5cdc9;

    /* 文字 */
    --c-text-1: #111318;
    --c-text-2: #565b66;
    --c-text-3: #868b96;
    --c-text-4: #b6bac4;

    /* 面 */
    --c-bg-page: #ffffff;
    --c-bg-card: #ffffff;
    --c-bg-hover: #f4f5f7;
    --c-bg-soft: #fafafa;
    --c-border: #e9eaee;
    --c-border-strong: #dfe1e7;
    --c-border-weak: #f0f1f4;

    /* 形状 */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-1: 0 1px 2px rgba(16, 18, 24, .05);
    --shadow-2: 0 4px 18px rgba(16, 18, 24, .09);
    --shadow-pop: 0 1px 2px rgba(16, 18, 24, .06), 0 0 0 1px var(--c-border);

    /* 字号 */
    --fs-2xs: 11.5px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 13.5px;
    --fs-lg: 15px;
    --fs-xl: 20px;
    --fs-2xl: 26px;
    --fs-3xl: 40px;

    /* 骨架尺寸。sticky 侧栏（筛选 / 购买箱 / 账号菜单）直接用它们算 top，
       改高度不改这里，滚动时会被顶栏切掉一截 */
    --topbar-h: 58px;
    --subnav-h: 44px;
    --wrap: 1200px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--c-bg-page);
    color: var(--c-text-1);
    font: var(--fs-base)/1.6 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 顶栏那条 2px 品牌渐隐线**已删除**：它固定在最顶层，滚动时会压在筛选条的
   圆角上，看起来像渲染错位；品牌感改由 brand-mark 的绿色方块承担 */

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-brand); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.011em; }
p { margin: 0; }
input, button, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--c-brand-bg); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
input, button, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- 顶栏 ---------- */
.topbar {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 40;
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    height: var(--topbar-h);
}

.brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 15px; font-weight: 600; }

.brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: var(--c-brand-fill);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1;
    flex: none;
}

.brand b { letter-spacing: -.012em; }

/* 一级导航用「胶囊选中」而不是顶栏下划线：下划线要按顶栏高度算负偏移，
   顶栏一改高度就会飘到页面中间去（v3 就是这么错的） */
.nav { display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; overflow: hidden; }

.nav-item {
    padding: 6px 11px;
    border-radius: var(--radius);
    color: var(--c-text-2);
    font-size: var(--fs-base);
    white-space: nowrap;
    position: relative;
}

.nav-item:hover { background: var(--c-bg-hover); color: var(--c-text-1); }
.nav-item.on { color: var(--c-text-1); font-weight: 500; background: var(--c-bg-hover); }

/* 搜索是云市场的核心入口，给足尺寸，不做成装饰。
   整条做成一个控件（不是「输入框 + 绿按钮」两截），绿色只留给真正的主操作 */
.search {
    flex: 0 1 380px;
    height: 36px;
    display: flex;
    align-items: stretch;
    margin-left: auto;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-soft);
    overflow: hidden;
    transition: border-color .16s, background .16s, box-shadow .16s;
}

.search:focus-within {
    border-color: var(--c-brand-border);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, .12);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 0 12px;
}

.search-box input {
    border: 0;
    outline: 0;
    background: none;
    width: 100%;
    font-size: var(--fs-sm);
}

.search-box input::placeholder { color: var(--c-text-3); }

.search-btn {
    flex: none;
    padding: 0 14px;
    border: 0;
    background: none;
    color: var(--c-text-2);
    font-size: var(--fs-sm);
    cursor: pointer;
    white-space: nowrap;
}

.search-btn:hover { background: var(--c-bg-hover); color: var(--c-text-1); }

.topbar-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.ghost-link { font-size: var(--fs-sm); color: var(--c-text-2); }
.ghost-link:hover { color: var(--c-text-1); }

/* 顶栏里的退出按钮：看起来是链接，实际是表单提交（GET 登出可被任意图片触发） */
.inline-form { margin: 0; display: inline-flex; }

.link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-text-3);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.link-btn:hover { color: var(--c-text-1); }

/* ---------- 二级分类条 ---------- */
/* 10 个分类挤在 44px 里，每项都做胶囊底色会变成「一排按钮」；
   这里只做文字链接，hover 变深 —— 与门户顶栏同一处理 */
.subnav { background: #fff; border-bottom: 1px solid var(--c-border); }

.subnav-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--subnav-h);
    overflow: hidden;
}

.subnav a {
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    white-space: nowrap;
    flex: none;
}

.subnav a:hover { background: var(--c-bg-hover); color: var(--c-text-1); }
.subnav .all { margin-left: auto; color: var(--c-brand); font-weight: 500; }

/* ---------- 按钮 ---------- */
/* 主按钮近墨黑：绿色留给「免费 / 已选中 / 品牌标」，
   一个页面里出现三四个绿按钮时，用户反而找不到该点哪个 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 15px;
    border: 1px solid var(--c-ink);
    border-radius: var(--radius);
    background: var(--c-ink);
    color: #fff;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.btn:hover { background: var(--c-ink-hover); border-color: var(--c-ink-hover); color: #fff; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(22, 24, 29, .16); }
.btn.sm { height: 30px; padding: 0 12px; font-size: var(--fs-xs); }
.btn.lg { height: 42px; padding: 0 22px; font-size: var(--fs-base); border-radius: 8px; }

.btn.primary { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* 少数确实需要品牌绿的地方（如「立即购买」）单独挂 .brand，
   不要在模板里随手把 .btn 换成绿 —— 那是两个事实源 */
.btn.brand { background: var(--c-brand-fill); border-color: var(--c-brand-fill); color: #fff; }
.btn.brand:hover { background: #06a94f; border-color: #06a94f; }

.btn.ghost {
    background: #fff;
    color: var(--c-text-1);
    border-color: var(--c-border-strong);
}

.btn.ghost:hover { border-color: var(--c-text-4); color: var(--c-text-1); background: #fff; }
.btn.block { width: 100%; height: 42px; font-size: var(--fs-base); border-radius: 8px; }

/* ---------- 徽标 / 标签 ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: var(--c-bg-hover);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.badge.on { background: var(--c-brand-bg); border-color: var(--c-brand-border); color: var(--c-brand); }
.badge.hot { background: var(--c-warning-bg); border-color: var(--c-warning-border); color: var(--c-warning); }
/* 「主题」以前是紫色：调色板里只有绿一个彩色，紫色纯属噪音。
   类型是标签不是状态，用中性描边区分即可 */
.badge.purple { background: #fff; border-color: var(--c-border-strong); color: var(--c-text-2); }
.badge.off { background: var(--c-bg-hover); color: var(--c-text-3); }

.tag-chip {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    font-size: var(--fs-xs);
}

.tag-chip:hover { background: var(--c-brand-bg); border-color: var(--c-brand-border); color: var(--c-brand); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ---------- 主体 ---------- */
.main { padding: 0 20px 64px; min-height: calc(100vh - 200px); }

/* ---------- 首页 hero ----------
   以前的「绿色渐变 + 右侧四个悬浮卡片」已删除：渐变在两个绿之间过渡，
   在普通笔记本屏幕上会发灰；悬浮卡片还要靠阴影 + translateY 才浮得起来，
   与「细线分层」的语言冲突。现在整块是白底，只留一条底边线。 */
.banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 48px;
    padding: 52px 0 44px;
    border-bottom: 1px solid var(--c-border);
}

.banner-txt { min-width: 0; }

.banner-txt .kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 24px;
    padding: 0 10px;
    border-radius: 20px;
    background: var(--c-brand-bg);
    color: var(--c-brand);
    font-size: var(--fs-xs);
    font-weight: 500;
    margin-bottom: 16px;
}

.banner-txt .kicker::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-brand-fill);
}

.banner-txt h1 {
    font-size: var(--fs-3xl);
    line-height: 1.28;
    letter-spacing: -.032em;
    max-width: 17em;
    /* 中文没有空格，浏览器会在任意字之间断行 —— 实测断成了
       「…挑一个能长期 / 用的插件」，把一个词劈两半。balance 让两行等高 */
    text-wrap: balance;
}
.banner-txt h1 em { font-style: normal; color: var(--c-brand); }
.banner-txt p { margin-top: 12px; color: var(--c-text-2); font-size: var(--fs-lg); line-height: 1.7; max-width: 36em; }
.banner-act { display: flex; gap: 10px; margin-top: 22px; }

/* 数字不是卡片，是「分格」：靠竖线分开，滚动时不抢主标题的视线 */
.banner-side {
    display: grid;
    grid-template-columns: repeat(4, minmax(76px, auto));
    border-left: 1px solid var(--c-border);
}

.bside {
    padding: 2px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: opacity .16s;
}

.bside + .bside { border-left: 1px solid var(--c-border); }
.bside b { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bside span { font-size: var(--fs-xs); color: var(--c-text-3); }
.bside:hover b { color: var(--c-brand); }

/* 只有两三个统计时不要空出半行 */
.banner-side.few { grid-template-columns: repeat(auto-fit, minmax(76px, auto)); }

/* ---------- 首页分类快捷入口 ----------
   8 个格子拼成一块，靠 1px 缝隙当分隔线（gap 用背景色填），
   比 8 张带阴影的卡片安静得多，也少 8 次重绘 */
.cats {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 32px;
}

.cat {
    background: #fff;
    padding: 18px 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: background .14s;
}

.cat:hover { background: var(--c-bg-soft); }
.cat svg { width: 20px; height: 20px; stroke: var(--c-brand); fill: none; stroke-width: 1.7; }
.cat span { font-size: var(--fs-sm); color: var(--c-text-2); text-align: center; }
.cat:hover span { color: var(--c-text-1); }

/* 旧的首页分类导航（已由 .cats 取代，保留以防模板回退） */
.catnav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    margin-top: 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.cn-row { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; }
.cn-row + .cn-row { border-top: 1px dashed var(--c-border); }
.cn-type { flex: none; width: 56px; font-weight: 600; }
.cn-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cn-link { font-size: var(--fs-sm); color: var(--c-text-2); }
.cn-link:hover { color: var(--c-brand-hover); }

/* ---------- 区块 ---------- */
.sec { margin-top: 48px; }

.sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

/* 区块标题压到 15px：首页 h1 已经是 40px，二级标题再放大就变成
   三个同等重量的标题互抢，页面的「主次」反而消失 */
.sec-head h2 { font-size: var(--fs-lg); }
.sec-note { font-size: var(--fs-xs); color: var(--c-text-3); }
.sec-head .more { margin-left: auto; font-size: var(--fs-sm); color: var(--c-text-3); }
.sec-head .more:hover { color: var(--c-text-1); }

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* 编辑推荐只有一个包时，四列网格会空掉 3/4 屏 —— 那种「数据好像丢了」的
   观感比任何间距问题都刺眼。此时把这一张摊成横向推荐条。 */
.grid.single { grid-template-columns: 1fr; }

.grid.single .card {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
    min-height: 0;
}

.grid.single .card-top { flex: 1; align-items: center; gap: 14px; }
.grid.single .card-cover { width: 52px; height: 52px; border-radius: 10px; }
.grid.single .card-cover span { font-size: 18px; }
.grid.single .card-body { gap: 3px; }
.grid.single .card-title { font-size: var(--fs-lg); }
.grid.single .card-sub { -webkit-line-clamp: 1; min-height: 0; font-size: var(--fs-base); }
.grid.single .card-meta { margin-top: 0; }
.grid.single .card-foot { margin-top: 0; padding-top: 0; flex-direction: column; align-items: flex-end; gap: 2px; }

/* ---------- 卡片 ---------- */
.card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    min-height: 148px;
    transition: border-color .16s, box-shadow .18s;
}

/* hover 只改描边 + 一层极浅阴影，不位移：整行 12 张卡同时 translateY
   会让网格边缘抖动，看起来像加载中 */
.card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-1);
}

.card-top { display: flex; gap: 11px; align-items: flex-start; }

/* 封面：40px 圆角方块 —— 一屏能多放一行卡片，标题与描述拿到整行宽度 */
.card-cover {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, hsl(var(--h, 150), 62%, 52%), hsl(var(--h, 150), 58%, 40%));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.card-cover span { font-size: 14px; font-weight: 600; opacity: .95; }

.tag-sale {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--c-price-bg);
    border: 1px solid var(--c-price-border);
    color: var(--c-price);
    font-size: var(--fs-2xs);
    font-style: normal;
    line-height: 1.5;
}

.card-body { flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.card-title {
    font-weight: 600;
    font-size: var(--fs-base);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.card-sub {
    color: var(--c-text-3);
    font-size: var(--fs-sm);
    line-height: 1.55;
    /* 固定两行高度：一行和两行的卡片混排时底部价格会错位 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.1em;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--c-text-3);
    font-size: var(--fs-2xs);
    overflow: hidden;
    white-space: nowrap;
}

.card-meta .star { color: var(--c-star); }

.card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    /* 用 auto 而不是固定间距：meta 行是条件渲染的（分类/版本/评分全空时整行不出现），
       写死间距会让「没版本号」的卡价格比同排的高一截 */
    margin-top: auto;
    padding-top: 12px;
}

/* 两个子项都不许收缩：flex 默认允许收缩，窄卡片下「¥199.00」会被压成两行 */
.card-foot .price { flex: none; }
.card-foot .downloads { flex: none; margin-left: auto; }

.price {
    color: var(--c-price);
    font-weight: 600;
    font-size: var(--fs-lg);
    letter-spacing: -.012em;
    font-variant-numeric: tabular-nums;
}
.price small { font-size: var(--fs-2xs); font-weight: 400; color: var(--c-text-3); margin-left: 2px; }
.price.free { color: var(--c-brand); }
.downloads { color: var(--c-text-3); font-size: var(--fs-2xs); }

/* ---------- 列表页两栏 ---------- */
.crumb {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    padding: 14px 0 0;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.crumb a:hover { color: var(--c-text-1); }
.crumb .sep { color: var(--c-text-4); }

.list-wrap {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 18px;
    margin-top: 12px;
    align-items: start;
}

.filter {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: calc(var(--topbar-h) + var(--subnav-h) + 16px);
}

.filter-h {
    padding: 11px 13px;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
}

.filter-h .reset { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-3); font-weight: 400; }
.filter-h .reset:hover { color: var(--c-brand-hover); }

.fgroup { padding: 11px 13px; border-bottom: 1px solid var(--c-border-weak); }
.fgroup:last-child { border-bottom: 0; }
.fgroup > b { display: block; font-size: var(--fs-xs); color: var(--c-text-3); font-weight: 400; margin-bottom: 6px; }

.fopt {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.fopt:hover { color: var(--c-text-1); background: var(--c-bg-hover); }
.fopt.on { color: var(--c-brand); font-weight: 500; background: var(--c-brand-bg); }
.fopt .n { float: right; font-size: var(--fs-xs); color: var(--c-text-3); }

.filter select {
    width: 100%;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: var(--fs-sm);
    color: var(--c-text-2);
}

.result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.result-head h1 { font-size: var(--fs-xl); }
.result-head .cnt { font-size: var(--fs-sm); color: var(--c-text-3); }

.sorts { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.sorts a,
.sorts span {
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    display: inline-flex;
    align-items: center;
}

.sorts a:hover { background: var(--c-bg-hover); color: var(--c-text-1); }
.sorts .on { background: var(--c-bg-hover); color: var(--c-text-1); font-weight: 500; }

/* 列表页商品网格固定 3 列：左侧已经占了 196px，4 列会把中文副标题压成竖排 */
.list-main .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 页面头（账号页 / 开发者页在用） ----------
   标题与副标题**垂直堆叠**：模板里它们是两个并列子元素，
   用 space-between 会把「共 9 个应用」推到右边缘，看起来像操作区 */
.page-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 20px 0 12px;
}

.page-head h1 { font-size: var(--fs-2xl); }
.page-sub { color: var(--c-text-3); font-size: var(--fs-sm); }

/* ---------- 旧的顶部筛选条（榜单页等仍在用） ---------- */
.filters {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 2px 16px;
    margin-bottom: 16px;
}

.filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border-weak);
}

.filter-row:last-child { border-bottom: none; }
.filter-label { color: var(--c-text-3); font-size: var(--fs-sm); min-width: 56px; }
.filter-label.push-right { margin-left: auto; min-width: 0; }

.chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--c-text-2);
    font-size: var(--fs-sm);
}

.chip:hover { border-color: var(--c-brand-border); color: var(--c-brand-hover); }

.chip.on {
    background: var(--c-brand-bg);
    border-color: var(--c-brand-border);
    color: var(--c-brand);
    font-weight: 500;
}

.filter-form select, .sort-select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: var(--fs-sm);
    color: var(--c-text-2);
}

/* 原生 select 的宽度跟着当前选项走，切到「综合」两个字时只剩 70px，
   下一项是「下载最多」时宽度会跳一下 —— 给个下限 */
.sort-select { min-width: 104px; }

/* ---------- 分页 ---------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 22px 0 8px;
}

.pg {
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--c-text-2);
    font-size: var(--fs-sm);
}

.pg:hover { border-color: var(--c-brand-border); color: var(--c-brand-hover); }
.pg.on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 600; }
.pg.disabled { color: var(--c-text-4); background: var(--c-bg-hover); }
.pg.gap { border: none; background: none; color: var(--c-text-4); }

/* ---------- Tabs（榜单维度切换 / 详情页内容分栏共用） ---------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--c-border);
    margin: 0 0 16px;
}

.tabs.flush { margin: 0; }

.tab {
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--c-text-2);
    font-size: 13.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tab:hover { color: var(--c-text-1); }
.tab.on { color: var(--c-text-1); border-bottom-color: var(--c-brand-fill); font-weight: 500; }
.tab .n { font-size: var(--fs-xs); color: var(--c-text-3); font-weight: 400; }

/* 内容分栏：**默认全部展开**（没有 JS 时按文档流顺序读完所有内容），
   只有 html 上挂了 .js 才折叠成一次显示一栏 —— 见 base 布局里的 1 行内联脚本 */
.tabpane { display: block; }
html.js .tabpane { display: none; }
html.js .tabpane.active { display: block; }

/* ---------- 详情页 ---------- */
.detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    padding: 20px 0 40px;
    align-items: start;
}

.detail-main, .detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.panel {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.panel.flush { padding: 0; overflow: hidden; }
.panel h2 { font-size: var(--fs-lg); margin-bottom: 14px; }
/* 无 padding 的面板内部自带一层 padding：分栏的标签条要能贴到卡片边缘 */
.panel-body { padding: 20px; }
.panel .tabs { margin: 0; padding: 0 20px; border-bottom: 1px solid var(--c-border); }

.detail-head { padding-top: 0; overflow: hidden; }

/* 详情页头部：60px 方图标 + 标题区，不再用 148px 出血大色块 ——
   色块占掉的位置能放完「标题 + 副标题 + 四个标签 + 统计」 */
.detail-cover {
    position: relative;
    margin: 0;
    width: 60px;
    height: 60px;
    flex: none;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, hsl(var(--h, 150), 62%, 48%), hsl(var(--h, 150), 58%, 34%));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.detail-cover span { font-size: 20px; font-weight: 700; opacity: .95; }

.d-head { display: flex; gap: 14px; align-items: flex-start; }
.detail-head-main { min-width: 0; flex: 1; }
.detail-head-main h1 { font-size: var(--fs-2xl); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-sub { margin-top: 6px; color: var(--c-text-2); font-size: var(--fs-base); line-height: 1.65; }

.detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    color: var(--c-text-3);
    font-size: var(--fs-xs);
}

.detail-meta .star { color: var(--c-star); }

/* 统计条：四个数字横向排，是详情页最快的「值不值得」判断依据 */
.d-stats {
    display: flex;
    gap: 30px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--c-border-weak);
}

.d-stats div { display: flex; flex-direction: column; gap: 1px; }
.d-stats b { font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; }
.d-stats span { font-size: var(--fs-xs); color: var(--c-text-3); }

.shots { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0; }
.shots img { height: 190px; border: 1px solid var(--c-border); border-radius: var(--radius); }

.desc {
    white-space: pre-wrap;
    color: var(--c-text-2);
    font-size: 13.5px;
    line-height: 1.85;
    /* 详情页内容区在宽屏上接近 900px，一行能塞 60 多个汉字 ——
       阅读时眼睛难以从行尾回到行首，限制到 ~74 字符 */
    max-width: 74ch;
}

/* 评分摘要 */
.rating-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border-weak);
}

.rating-score { min-width: 92px; text-align: center; }
.rating-score b { display: block; font-size: 30px; line-height: 1.15; }
.rating-score .star { color: var(--c-star); }
.rating-score i { font-style: normal; color: var(--c-text-3); font-size: var(--fs-xs); }

.rating-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

.rating-bar-row .bar {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--c-border-weak);
    overflow: hidden;
}

.rating-bar-row .bar span { display: block; height: 100%; background: var(--c-star); }

/* 评价 */
.comment-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

.comment { padding-bottom: 14px; border-bottom: 1px solid var(--c-border-weak); }
.comment:last-child { padding-bottom: 0; border-bottom: none; }
.comment-head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.comment-head .star { color: var(--c-star); }
.comment-head .dim { margin-left: auto; }
.comment-body { margin-top: 6px; color: var(--c-text-2); font-size: 13px; line-height: 1.75; }

.comment-reply {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--c-bg-hover);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
}

/* 版本记录 */
.ver-list { display: flex; flex-direction: column; }

.ver-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--c-border-weak);
    font-size: var(--fs-sm);
}

.ver-row:last-child { border-bottom: none; }
.ver-no { min-width: 62px; font-weight: 600; }
.ver-log { flex: 1; color: var(--c-text-2); }

/* 技术信息 */
.info-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.info-table th { width: 104px; padding: 6px 0; text-align: left; color: var(--c-text-3); font-weight: 400; vertical-align: top; }
.info-table td { padding: 6px 0; color: var(--c-text-1); word-break: break-all; }
.info-table a { color: var(--c-brand-hover); }

/* 常见问题（详情页 FAQ 栏，静态文案） */
.faq { padding: 14px 0; border-bottom: 1px solid var(--c-border-weak); }
.faq:first-child { padding-top: 0; }
.faq:last-child { border-bottom: 0; padding-bottom: 0; }
.faq b { display: block; font-size: var(--fs-base); margin-bottom: 5px; }
.faq p { color: var(--c-text-2); font-size: 13px; line-height: 1.75; }

/* ---------- 购买箱 ---------- */
/* sticky 只在桌面生效：手机上购买箱在页面下方，跟着滚会盖住内容 */
.buybox {
    position: sticky;
    top: calc(var(--topbar-h) + var(--subnav-h) + 12px);
    padding: 18px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.big-price { font-size: 30px; font-weight: 600; color: var(--c-price); line-height: 1.2; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
/* 「免费 / 免费版」不是价格，别用价格红：红在这里读作「要付钱」 */
.big-price.free { color: var(--c-brand); }
.price-line i { font-style: normal; color: var(--c-text-3); font-size: var(--fs-sm); }
.was { color: var(--c-text-4); font-size: var(--fs-xs); text-decoration: line-through; }

.field-label { margin-bottom: 8px; color: var(--c-text-2); font-size: var(--fs-sm); }
.field-label .dim { font-size: var(--fs-xs); }

.sku {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 9px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.sku:hover { border-color: var(--c-brand-border); }
.sku.on { border-color: var(--c-brand); background: var(--c-brand-bg); }
.sku input { margin: 0; }
.sku-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sku-main b { font-size: var(--fs-sm); font-weight: 600; }
.sku-main i { font-style: normal; color: var(--c-text-3); font-size: var(--fs-xs); }
.sku-price { color: var(--c-price); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

.renew { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; }
.renew i { font-style: normal; color: var(--c-text-3); font-size: var(--fs-xs); }

.site-select {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: var(--fs-sm);
}

.site-one { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); flex-wrap: wrap; }

.license-details { border-top: 1px solid var(--c-border-weak); padding-top: 12px; margin-top: 12px; }
.license-details summary { cursor: pointer; color: var(--c-text-2); font-size: var(--fs-sm); }

.license-body {
    margin-top: 10px;
    color: var(--c-text-3);
    font-size: var(--fs-xs);
    line-height: 1.9;
}

.doc-link { display: inline-block; margin-top: 8px; color: var(--c-brand-hover); font-size: var(--fs-xs); }

/* ---------- 提示块 ---------- */
.notice {
    padding: 9px 11px;
    border: 1px solid var(--c-brand-border);
    border-radius: var(--radius);
    background: var(--c-brand-bg);
    color: #136c42;
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.notice.ok { background: var(--c-success-bg); border-color: var(--c-success-border); }
/* `.notice` 默认是绿底（「已生效」），但站点绑定/授权中的「改用域名验证」
   这类**需要用户去做点什么**的提示也套了 `.notice` —— 不给 .warn 上色的话
   它会以成功提示的样子出现，读起来像「已经好了」 */
.notice.warn { background: var(--c-warning-bg); border-color: #f5e0c0; color: #8a5b00; }

.hint { margin-top: 8px; color: var(--c-text-3); font-size: var(--fs-xs); line-height: 1.8; }
.hint.center { text-align: center; }

.hint.warn {
    padding: 9px 11px;
    border: 1px solid #ffe2a8;
    border-radius: var(--radius);
    background: #fff8e6;
    color: #8a5b00;
}

/* ---------- 开发者 ---------- */
.dev-hero { display: flex; align-items: center; gap: 16px; padding: 22px 0 16px; }

.dev-avatar {
    width: 64px;
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(150deg, hsl(var(--h, 150), 62%, 52%), hsl(var(--h, 150), 58%, 40%));
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}

.dev-avatar.sm { width: 36px; height: 36px; border-radius: 9px; font-size: 15px; }
.dev-hero-main h1 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2xl); flex-wrap: wrap; }

.dev-row { display: flex; align-items: center; gap: 10px; }
.dev-row-main { display: flex; flex-direction: column; }
.dev-row-main b { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.dev-row-main i { font-style: normal; color: var(--c-text-3); font-size: var(--fs-xs); }

.mini-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border-weak);
}

.mini-row:last-child { border-bottom: none; }
.mini-row:hover .mini-main b { color: var(--c-brand-hover); }
.mini-main { min-width: 0; display: flex; flex-direction: column; }
.mini-main b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-main i { font-style: normal; color: var(--c-text-3); font-size: var(--fs-xs); }

/* ---------- 榜单 ----------
   以前是 flex + 每个统计列各自定宽：宽度一旦和内容对不上，几列数字就会
   忽远忽近地散开（实测同一行里「下载」到「已售」隔了 110px，
   「评分」到「更新」只隔 60px）。改成固定列网格，并加一行表头替掉
   每个数字下面重复的「下载/已售/评分」小字。 */
.rank-list {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rank-head,
.rank-row {
    display: grid;
    grid-template-columns: 26px 40px minmax(0, 1fr) 72px 64px 56px 88px 104px;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
}

.rank-head {
    height: 34px;
    background: var(--c-bg-soft);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-2xs);
    color: var(--c-text-3);
}

.rank-head span { text-align: right; }
.rank-head span:nth-child(3) { text-align: left; }

.rank-row {
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--c-border-weak);
    transition: background .14s;
}

.rank-row:last-child { border-bottom: none; }
.rank-row:hover { background: var(--c-bg-soft); }

.rank-no {
    text-align: center;
    font-weight: 600;
    color: var(--c-text-4);
    font-variant-numeric: tabular-nums;
}
.rank-no.top-1 { color: #b8791f; }
.rank-no.top-2 { color: #7b8794; }
.rank-no.top-3 { color: #a9724c; }

.rank-cover {
    width: 40px;
    height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(150deg, hsl(var(--h, 150), 62%, 52%), hsl(var(--h, 150), 58%, 40%));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.rank-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-base); flex-wrap: wrap; }

.rank-sub {
    color: var(--c-text-3);
    font-size: var(--fs-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-stat { text-align: right; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rank-stat b { font-weight: 500; }
/* 表头已经写明这是什么数，行内不再重复一次小字标签 */
.rank-stat i { display: none; }
.rank-stat.wide { width: auto; }

.rank-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.rank-price b { color: var(--c-price); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rank-price i { font-style: normal; color: var(--c-text-4); font-size: var(--fs-2xs); text-decoration: line-through; }
.rank-price.free b { color: var(--c-brand); }

/* ---------- 登录 ---------- */
.auth {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 56px 0 72px;
    min-height: calc(100vh - 220px);
}

/* 单张卡片居中：周围全是白底时，靠 1px 边 + 一层很浅的投影把它「托」起来，
   不需要深灰背景来反衬 */
.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 18, 24, .04), 0 12px 32px -12px rgba(16, 18, 24, .10);
}

.auth-card h1 { font-size: var(--fs-xl); margin-bottom: 6px; letter-spacing: -.02em; }
.auth-card .muted { color: var(--c-text-3); font-size: var(--fs-sm); margin: 0 0 22px; }
.auth-card .muted.sm { margin: 18px 0 0; font-size: var(--fs-xs); line-height: 1.7; }

.field { display: block; margin-bottom: 14px; }
.form-actions { margin-top: 8px; }
.field span { display: block; margin-bottom: 7px; font-size: var(--fs-sm); color: var(--c-text-2); }

.field input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #fff;
    outline: none;
    font-size: var(--fs-base);
    transition: border-color .15s, box-shadow .15s;
}

.field input:focus { border-color: var(--c-brand-border); box-shadow: 0 0 0 3px rgba(7, 193, 96, .12); }

.alert {
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    margin-bottom: 14px;
    line-height: 1.7;
}

.alert.err { background: var(--c-error-bg); border: 1px solid var(--c-error-border); color: var(--c-error); }
.alert.ok { background: var(--c-brand-bg); border: 1px solid var(--c-brand-border); color: var(--c-brand); }

/* ---------- 空态 / 占位 ---------- */
.empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--c-text-3);
    background: #fff;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-lg);
}

.empty.tall { padding: 88px 24px; }
.empty b { display: block; color: var(--c-text-1); font-size: var(--fs-lg); margin-bottom: 8px; }
.empty p { margin: 6px 0; font-size: var(--fs-sm); }

/* 空态插图：原来用的是 emoji（🌐 🧾 ↻），在 Windows 上是黑白字形、
   在 macOS 上是彩色，字号还压不住。统一成线性图标 */
.empty .ico-lg {
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto 12px;
    fill: none;
    stroke: var(--c-text-4);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--c-border); background: #fff; margin-top: 34px; }

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
    color: var(--c-text-3);
    font-size: var(--fs-xs);
    flex-wrap: wrap;
}

.footer-links { display: flex; gap: 16px; }
.footer-links a:hover { color: var(--c-text-1); }

/* ============================================================
   账号中心（/account 及其三个分页）
   左侧固定 220px 侧栏 + 右侧内容区。980px 以下侧栏折成横向菜单条，
   而不是隐藏 —— 账号导航只有 4 项，藏进汉堡等于让手机用户找不到「我的订单」。
   ============================================================ */

.acc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    padding-top: 14px;
    align-items: start;
}

.acc-side {
    position: sticky;
    top: calc(var(--topbar-h) + var(--subnav-h) + 12px);
    padding: 14px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

.acc-me { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border-weak); }
.acc-me-text { min-width: 0; display: flex; flex-direction: column; }
.acc-me-text b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-me-text span { font-size: var(--fs-xs); color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acc-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    background: var(--c-brand-fill);
}

.acc-avatar.lg { width: 56px; height: 56px; font-size: 21px; }

.acc-menu { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }

.acc-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
}

/* 线性图标（引用布局里的 <symbol>）。stroke 跟随 currentColor ——
   选中态改文字色时图标自动同步，不需要第二套配色 */
.acc-menu-item .ico {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.acc-menu-item:hover { background: var(--c-bg-hover); color: var(--c-text-1); }
.acc-menu-item.on { background: var(--c-brand-bg); color: var(--c-brand); font-weight: 500; }

/* 待支付订单数：唯一一个「这里有事等你做」的计数 */
.acc-dot {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--c-warning);
    color: #fff;
    font-size: var(--fs-xs);
    font-style: normal;
    line-height: 18px;
    text-align: center;
}

.acc-foot { padding-top: 12px; border-top: 1px solid var(--c-border-weak); font-size: var(--fs-sm); }

.acc-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.acc-head { display: flex; align-items: center; gap: 14px; padding: 2px 0; flex-wrap: wrap; }
.acc-name { font-size: var(--fs-xl); font-weight: 600; }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-head h2 { margin-bottom: 0; }

/* 只读资料行：键固定宽度、值占满 —— 扫读时不用每行重新定位 */
.acc-rows { display: flex; flex-direction: column; }

.acc-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--c-border-weak);
    font-size: var(--fs-sm);
}

.acc-row:last-child { border-bottom: none; }
.acc-row .k { flex: none; width: 84px; color: var(--c-text-3); }
.acc-row .v { min-width: 0; color: var(--c-text-1); }
.acc-row .v .dim { margin-left: 8px; font-size: var(--fs-xs); }

/* 表单：两列网格（昵称/邮箱、头像/手机号各一对），窄屏自动折成一列 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    align-items: start;
}

.form-grid .field.wide, .form-grid .form-actions { grid-column: 1 / -1; }
.form-grid .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

/* `.field` 原本只给 `span` 做了标签样式，账号页用的是 `<label for>` ——
   无障碍上更正确，但必须有同样的外观 */
.field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    color: var(--c-text-2);
}

.field label .req {
    /* ⚠️ 必须显式 inline：`.field span` 是 display:block，继承下来
       会让必填星号自己占一行，标签下面挂一颗红点 */
    display: inline;
    margin: 0;
    color: var(--c-error);
}

/* ---------- 行式列表（订单 / 站点 / 订阅共用骨架） ---------- */
.acc-list { display: flex; flex-direction: column; gap: 10px; }

.site-row, .order-row, .sub-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

.site-ico {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.row-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text-1);
}

.row-title a { color: inherit; }
.row-title a:hover { color: var(--c-brand-hover); }
.row-sub { font-size: var(--fs-xs); color: var(--c-text-3); }
.row-side { flex: none; display: flex; align-items: center; gap: 8px; }

/* 订单/订阅右侧是「金额 + 一个按钮」的竖排，和站点那排横按钮不同 */
.order-side { flex-direction: column; align-items: flex-end; gap: 6px; min-width: 116px; }
.order-amount { font-size: var(--fs-lg); font-weight: 600; color: var(--c-price); font-variant-numeric: tabular-nums; }

.warn-text { color: var(--c-warning); }
.danger-text { color: var(--c-error); }

/* 域名验证的挑战内容：等宽 + 可横向滚动，长 hash 不撑破卡片 */
.copy-box {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--c-bg-hover);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    font-size: 12px;
    word-break: break-all;
    user-select: all;
}

/* ---------- 工具类 ---------- */
.dim { color: var(--c-text-3); font-size: var(--fs-sm); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.center { text-align: center; }
.big { font-size: var(--fs-xl); font-weight: 600; }
.v { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.off { color: var(--c-text-4); }
.danger { color: var(--c-error); }
.btn.danger { background: #fff; border-color: var(--c-error-border); color: var(--c-error); }
.btn.danger:hover { background: var(--c-error-bg); border-color: var(--c-error); color: var(--c-error); }

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1180px) {
    .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .list-wrap { grid-template-columns: 1fr; }
    .filter { display: none; }
    .list-main .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .banner-side { display: none; }
    /* hero 现在没有底色和边框，不能再留 24px 内边距（那会把标题挤成两侧缩进） */
    .banner { grid-template-columns: 1fr; height: auto; padding: 36px 0 32px; gap: 0; }
}

@media (max-width: 980px) {
    .detail { grid-template-columns: 1fr; padding-top: 12px; }
    .buybox { position: static; }
    /* 少一列必须同时改列定义：只 display:none 会让后面每一列都左移一格，
       表头与数据整体错位（比不隐藏更糟） */
    .rank-head, .rank-row { grid-template-columns: 26px 40px minmax(0, 1fr) 64px 56px 48px 96px; }
    .rank-head span:nth-child(7) { display: none; }
    .rank-stat.wide { display: none; }
    .acc { grid-template-columns: 1fr; }
    .acc-side { position: static; }
    .acc-menu { flex-direction: row; flex-wrap: wrap; }
    .acc-menu-item { flex: 1 1 auto; }
    .form-grid { grid-template-columns: 1fr; }
    .order-row, .site-row, .sub-row { flex-wrap: wrap; }
    .row-side, .order-side { width: 100%; justify-content: flex-end; }
}

@media (max-width: 860px) {
    .nav, .subnav { display: none; }
    .search { flex: 1; }
    .grid, .list-main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards, .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .banner-txt h1 { font-size: var(--fs-2xl); }
    .banner-txt p { font-size: var(--fs-base); }
    .result-head .sorts { width: 100%; margin-left: 0; overflow-x: auto; }
}

@media (max-width: 640px) {
    .grid, .list-main .grid { grid-template-columns: 1fr; }
    .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wrap, .main { padding-left: 14px; padding-right: 14px; }
    /* 顶栏在 390px 下只剩 362px：品牌 + 搜索 + 开放平台 + 登录四个东西会把
       搜索框压成「搜」一个字。收掉「开放平台」（页脚还留着入口）与搜索按钮，
       输入框保留 —— 手机上用键盘的「搜索」键提交 */
    .ghost-link { display: none; }
    .search-btn { display: none; }
    .search { flex: 1 1 auto; min-width: 0; }
    .topbar-inner { gap: 12px; }
    .brand { font-size: var(--fs-base); }
    /* 榜单的标题列只剩 ~120px：类型 + 分类两个徽标会把「站点公告条」挤成
       三行。分类在列表页/面包屑里都有，这里只留类型 */
    .rank-title em:nth-of-type(2) { display: none; }
    /* 用 nth-child（按位置）而不是 nth-of-type：这里全是 span，
       :nth-of-type(2) 命中的是封面而不是第二个统计列 */
    .rank-head, .rank-row { grid-template-columns: 22px 36px minmax(0, 1fr) 56px 88px; gap: 10px; padding-left: 12px; padding-right: 12px; }
    .rank-head span:nth-child(5), .rank-head span:nth-child(6) { display: none; }
    .rank-row > span:nth-child(5), .rank-row > span:nth-child(6) { display: none; }
    /* 页脚：桌面是「左版权 + 右链接」的固定 64px 一行。手机上版权文案（约 27 个汉字）
       与两个链接挤不进一行，`height:64px` 会把换行后的第二行压出边界 ——
       改成纵向居中、高度自适应 */
    .footer-inner {
        height: auto;
        min-height: 64px;
        padding: 16px 0;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }
}