/* ============================================================
 * 宅男导航 · 网址详情页（单一入口：template/single.php）
 * v1.7.18.70「豆腐卡片」重排版
 *   · 白色大圆角卡片 + 柔和投影 + 留白充足
 *   · hero 卡：图标 / 标题 / 元信息（浏览·评论·日期）/ 右侧双按钮
 *   · section 卡：图标方块 + 标题 + 右侧小标（基础数据…）
 *   · 信息区改为「标签在上、内容在下」的定义列表
 * ============================================================ */

/* ---------- 设计变量（只作用于本页 main.zn-detail） ---------- */
.zn-detail{
    --z-t1:#1e293b;      /* 主文字 */
    --z-t2:#475569;      /* 次文字 */
    --z-t3:#94a3b8;      /* 弱文字 */
    --z-line:#eef1f5;    /* 分隔线 */
    --z-tag:#f1f5f9;     /* 标签底 */
    --z-card:#ffffff;
    --z-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 30px -16px rgba(15,23,42,.14);
    --z-shadow-h:0 1px 2px rgba(15,23,42,.04), 0 16px 40px -18px rgba(15,23,42,.20);
    --z-r-lg:18px;
    --z-r-md:12px;
    --z-r-sm:9px;
}
/* 主列与侧栏间距、卡片间距同步放大，呼吸感更好 */
.home-main.zn-detail{gap:22px;justify-content:center}
.zn-detail .left-content{gap:20px;width:100%;max-width:1040px}

/* ============================================================
 * 面包屑
 * ============================================================ */
.zn-breadcrumb{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    font-size:13px;
    color:var(--z-t3);
    padding:2px 2px 0;
}
.zn-breadcrumb a{color:var(--z-t2);text-decoration:none;transition:color .15s}
.zn-breadcrumb a:hover{color:var(--color-primary)}
.zn-crumb-icon{font-size:12px;color:#cbd5e1}
.zn-crumb-sep{font-size:10px;color:#cbd5e1}
.zn-crumb-cur{color:var(--z-t3);max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
 * Hero 卡：灵感版 — 大图标 + 标题/简介/标签 + 分隔线 + 底部操作行
 * ============================================================ */
.zn-hero{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:22px;
    background:var(--z-card);
    border-radius:var(--z-r-lg);
    padding:28px 30px;
    box-shadow:var(--z-shadow);
}
.zn-hero-main{
    display:flex;
    align-items:flex-start;
    gap:22px;
}
.zn-hero-ava{
    flex:none;
    width:90px;height:90px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--z-line);
    background:#ffffff;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    z-index:1;
    box-shadow:0 4px 14px -6px rgba(59,130,246,.25);
}
.zn-hero-ava img{width:100%;height:100%;object-fit:cover;display:block}
.zn-hero-letter{font-size:34px;font-weight:700;color:#3b82f6;line-height:1}
.zn-hero-body{flex:1;min-width:0;position:relative;z-index:1}
.zn-hero-title{
    font-size:26px;
    font-weight:700;
    color:var(--z-t1);
    letter-spacing:-.01em;
    line-height:1.25;
    margin:0 0 8px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.zn-hero-sub{
    font-size:14px;
    color:var(--z-t2);
    line-height:1.75;
    margin:0 0 14px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.zn-hero-sub-label{color:var(--z-t1);font-weight:600;margin-right:2px}
.zn-hero-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--z-t3);margin-bottom:10px}
.zn-meta-item{display:inline-flex;align-items:center;gap:5px}
.zn-meta-item i{font-size:12px;opacity:.7}

/* 顶部标签/按钮行 */
.zn-hero-tags{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.zn-hero-chip{
    display:inline-flex;align-items:center;gap:6px;
    height:34px;padding:0 14px;
    border-radius:999px;
    font-size:13px;font-weight:500;
    text-decoration:none;cursor:pointer;white-space:nowrap;
    border:1px solid transparent;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.zn-hero-chip-primary{
    background:#10b981;color:#fff;border-color:#10b981;
    box-shadow:0 4px 12px -5px rgba(16,185,129,.45);
}
.zn-hero-chip-primary:hover{background:#059669;color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(16,185,129,.55)}
.zn-hero-chip-primary i{font-size:12px}
.zn-hero-chip-light{
    background:#f1f5f9;color:#475569;border-color:#e2e8f0;
}
.zn-hero-chip-light:hover{background:#e2e8f0;color:var(--color-primary);border-color:#cbd5e1}
.zn-hero-chip-tag{
    background:#f8fafc;color:#64748b;border-color:#e2e8f0;
}
.zn-hero-chip-tag:hover{background:#f1f5f9;color:var(--color-primary);border-color:#bfdbfe}

/* 分隔线 */
.zn-hero-divider{height:1px;background:linear-gradient(90deg,transparent,var(--z-line),transparent);border:0;margin:0}

/* 底部操作按钮行：5 个按钮均分，文字过长省略 */
.zn-hero-actions-row{
    display:flex;align-items:center;gap:10px;
    flex-wrap:wrap;
}
.zn-hero-action{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    flex:1;min-width:0;
    height:40px;padding:0 14px;
    border-radius:999px;
    background:#fff;color:var(--z-t2);
    border:1px solid #e2e8f0;
    font-family:inherit;font-size:13px;font-weight:500;
    text-decoration:none;cursor:pointer;white-space:nowrap;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.zn-hero-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zn-hero-action:hover{background:#f8fafc;color:var(--color-primary);border-color:#bfdbfe;transform:translateY(-1px)}
.zn-hero-action i{font-size:13px}
.zn-hero-action-primary{
    background:var(--color-primary);color:#fff;border-color:var(--color-primary);
    box-shadow:0 4px 14px -6px rgba(59,130,246,.55);
}
.zn-hero-action-primary:hover{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 20px -8px rgba(59,130,246,.7)}
.zn-hero-action-red{
    background:#ef4444;color:#fff;border-color:#ef4444;
    box-shadow:0 4px 14px -6px rgba(239,68,68,.45);
}
.zn-hero-action-red:hover{background:#dc2626;color:#fff;border-color:#dc2626;box-shadow:0 8px 20px -8px rgba(239,68,68,.55)}
.zn-hero-action:focus-visible{outline:2px solid #bfdbfe;outline-offset:2px}

/* 旧按钮兼容（保留 class，避免其它模块引用报错） */
.zn-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    height:40px;padding:0 20px;
    border-radius:10px;
    font-family:inherit;font-size:14px;font-weight:500;
    text-decoration:none;cursor:pointer;
    border:1px solid transparent;
    white-space:nowrap;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.zn-btn-primary{
    background:var(--color-primary);
    color:#fff;
    box-shadow:0 4px 14px -7px rgba(59,130,246,.85);
}
.zn-btn-primary:hover{background:#2563eb;color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(59,130,246,.9)}
.zn-btn-primary:active{transform:translateY(0)}
.zn-btn-primary i{font-size:12px}
.zn-btn-ghost{background:#fff;color:var(--z-t2);border-color:#e6eaf0}
.zn-btn-ghost:hover{background:#f8fafc;color:var(--color-primary);border-color:#bfdbfe}
.zn-btn-ghost i{font-size:12.5px}
.zn-btn:focus-visible{outline:2px solid #bfdbfe;outline-offset:2px}

/* 复制成功提示 */
.zn-copy-toast{
    position:fixed;left:50%;bottom:90px;transform:translateX(-50%) scale(.9);
    background:rgba(15,23,42,.85);color:#fff;
    padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:500;
    z-index:5000;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
    backdrop-filter:blur(4px);
}
.zn-copy-toast.is-show{opacity:1;transform:translateX(-50%) scale(1)}

/* ============================================================
 * 分享成功弹窗
 * ============================================================ */
.zn-share-modal .zn-modal-panel{
    position:relative;
    width:min(380px,90vw);
    background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
    border-radius:22px;
    padding:40px 28px 32px;
    text-align:center;
    overflow:hidden;
    transform:translateY(10px) scale(.98);
    transition:transform .22s;
}
.zn-share-modal.is-open .zn-modal-panel{transform:translateY(0) scale(1)}
.zn-share-modal .zn-modal-panel::before{
    content:"";
    position:absolute;top:0;left:0;right:0;height:5px;
    background:linear-gradient(90deg,#10b981,#3b82f6);
}
.zn-share-modal .zn-modal-close{
    position:absolute;top:14px;right:14px;
    width:32px;height:32px;border-radius:50%;
    border:0;background:#e2e8f0;color:#475569;
    font-size:20px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:.15s;
}
.zn-share-modal .zn-modal-close:hover{background:#cbd5e1;color:#0f172a}
.zn-share-body{display:flex;flex-direction:column;align-items:center;gap:14px}
.zn-share-icon{
    width:74px;height:74px;border-radius:50%;
    background:#fff;
    color:#10b981;
    display:flex;align-items:center;justify-content:center;
    font-size:34px;
    box-shadow:0 8px 22px -7px rgba(16,185,129,.35);
}
.zn-share-body h3{margin:4px 0 0;font-size:21px;font-weight:700;color:#10b981}
.zn-share-body p{margin:0;font-size:13.5px;color:#475569;line-height:1.75}
.zn-share-domain{
    margin-top:8px;padding-top:18px;border-top:1px solid #dbeafe;
    width:100%;
    display:flex;align-items:center;justify-content:center;gap:12px;
    font-size:13px;font-weight:600;color:#3b82f6;
}
.zn-share-domain::before,.zn-share-domain::after{
    content:"";
    width:38px;height:1px;
    background:#dbeafe;
}

/* ============================================================
 * 内容卡（豆腐卡）
 * ============================================================ */
.zn-card{
    background:var(--z-card);
    border-radius:var(--z-r-lg);
    padding:24px 28px 26px;
    box-shadow:var(--z-shadow);
}
.zn-card-hd{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin:0 0 18px;
}
.zn-card-ico{
    flex:none;
    width:28px;height:28px;
    border-radius:var(--z-r-sm);
    background:rgba(59,130,246,.10);
    color:var(--color-primary);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:13px;
}
.zn-card-title{
    font-size:17px;font-weight:700;color:var(--z-t1);
    letter-spacing:-.01em;line-height:1.3;margin:0;
}
.zn-card-tag{margin-left:auto;font-size:12px;color:var(--z-t3)}
.zn-card-more{
    margin-left:auto;font-size:12.5px;font-weight:500;
    color:var(--color-primary);text-decoration:none;
}
.zn-card-more:hover{text-decoration:underline}

/* ============================================================
 * 信息定义列表：标签在上 / 内容在下
 * ============================================================ */
.zn-info-grid{display:grid;grid-template-columns:1fr;gap:5px;margin:0}
.zn-info-grid dt{
    font-size:14.5px;font-weight:700;color:#2a2e34;
    line-height:1.45;letter-spacing:-.01em;
}
.zn-info-grid dd{
    margin:0 0 13px;
    font-size:14px;color:#4b5460;line-height:1.75;
    word-break:break-all;
}
.zn-info-grid dd:last-child{margin-bottom:0}
.zn-info-grid dd a{
    color:var(--color-primary);text-decoration:none;
    border-bottom:1px solid rgba(59,130,246,.32);
    transition:border-color .15s;
}
.zn-info-grid dd a:hover{border-bottom-color:var(--color-primary)}
.zn-muted{color:var(--z-t3)}
.zn-tags{display:inline-flex;flex-wrap:wrap;gap:7px}
.zn-tag{
    padding:3px 11px;border-radius:99px;
    background:var(--z-tag);border:1px solid var(--z-line);
    color:#5a6675;font-size:12.5px;font-weight:500;line-height:1.6;
}

/* 提示条 */
.zn-notice{
    display:flex;gap:9px;
    margin-top:20px;padding:12px 15px;
    border-radius:var(--z-r-md);
    background:#fff8ec;border:1px solid #fbe3bd;
    color:#8a5a12;font-size:13px;line-height:1.7;
}
.zn-notice i{color:#f59e0b;flex:none;margin-top:3px;font-size:14px}
.zn-notice strong{color:#b45309;font-weight:700}
.zn-notice-grey{background:#f8fafc;border-color:#e8edf3;color:#64748b;margin-top:0}
.zn-notice-grey i{color:#94a3b8}

/* ============================================================
 * 网站截图
 * ============================================================ */
.zn-shot{
    display:block;position:relative;
    border-radius:14px;overflow:hidden;
    border:1px solid var(--z-line);
    background:#f4f6f9;
    cursor:zoom-in;text-decoration:none;
}
.zn-shot img{width:100%;display:block}
.zn-shot-mask{
    position:absolute;inset:0;
    background:rgba(15,23,42,0);color:#fff;
    display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:13px;font-weight:500;
    opacity:0;transition:opacity .2s,background .2s;pointer-events:none;
}
.zn-shot:hover .zn-shot-mask{background:rgba(15,23,42,.45);opacity:1}
.zn-lightbox{
    position:fixed;inset:0;z-index:3000;
    background:rgba(15,23,42,.85);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .2s;
}
.zn-lightbox.is-open{opacity:1;pointer-events:auto}
.zn-lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.5);transform:scale(.94);transition:transform .25s}
.zn-lightbox.is-open img{transform:scale(1)}
.zn-lightbox-bg{position:absolute;inset:0;cursor:zoom-out;display:block}
.zn-lightbox-close{
    position:absolute;top:18px;right:24px;width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:22px;line-height:1;border:0;cursor:pointer;transition:background .15s,transform .15s;
}
.zn-lightbox-close:hover{background:rgba(255,255,255,.35);transform:rotate(90deg)}

/* ============================================================
 * 相关推荐（沿用 .app-card 结构，只调间距）
 * ============================================================ */
.zn-rel-grid{gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){ .zn-rel-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .zn-rel-grid{grid-template-columns:repeat(6,1fr)} }

/* ============================================================
 * 站点反馈
 * ============================================================ */
.zn-feedback-sec .zn-card-hd{margin-bottom:16px}
.zn-feedback-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.zn-fb-chip-big{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:17px 8px 13px;
    border:1px solid var(--z-line);border-radius:14px;
    background:#fff;color:var(--z-t2);
    font-family:inherit;cursor:pointer;text-align:center;
    transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.zn-fb-chip-big>i{font-size:21px;color:var(--color-primary);transition:transform .18s ease}
.zn-fb-chip-big>span{font-size:13.5px;font-weight:600;color:var(--z-t1)}
.zn-fb-chip-big>em{font-style:normal;font-size:11.5px;color:var(--z-t3);margin-top:1px}
.zn-fb-chip-big:hover{
    border-color:#bfdbfe;background:#f6faff;transform:translateY(-3px);
    box-shadow:0 12px 24px -14px rgba(59,130,246,.55);
}
.zn-fb-chip-big:hover>i{transform:scale(1.12)}
.zn-fb-chip-big:active{transform:translateY(-1px)}
.zn-fb-chip-big[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* 高亮闪一下（hero 反馈按钮滚过去） */
.zn-flash{animation:znFlash 2.4s ease-out 1}
@keyframes znFlash{
    0%{box-shadow:0 0 0 0 rgba(99,102,241,.55)}
    20%{box-shadow:0 0 0 8px rgba(99,102,241,.18)}
    60%{box-shadow:0 0 0 14px rgba(99,102,241,0)}
    100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}
}

/* ============================================================
 * 评分（保留）
 * ============================================================ */
.zn-rate{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:stretch}
.zn-rate-score{
    background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:20px;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;text-align:center;
}
.zn-rate-num{font-size:44px;font-weight:800;color:var(--color-primary);line-height:1;letter-spacing:-.02em}
.zn-rate-stars{color:#fbbf24;font-size:16px;display:flex;gap:2px;justify-content:center}
.zn-rate-sub{font-size:12px;color:#64748b;margin-top:4px}
.zn-rate-bars{display:flex;flex-direction:column;justify-content:center;gap:8px}
.zn-rate-bar{display:flex;align-items:center;gap:10px}
.zn-rate-bar label{width:44px;font-size:13px;color:#475569;text-align:right;flex:none}
.zn-rate-track{flex:1;height:12px;background:#f1f5f9;border-radius:99px;overflow:hidden}
.zn-rate-fill{height:100%;background:var(--color-primary);border-radius:99px;transition:width .6s ease;width:0}
.zn-rate-cnt{width:54px;font-size:12.5px;color:#94a3b8;flex:none;text-align:left}
.zn-rate-act{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid #eef2f6}
.zn-rate-act>span{font-size:13.5px;color:#475569}
.zn-stars{display:flex;gap:5px;font-size:22px;color:#cbd5e1;cursor:pointer}
.zn-stars i{transition:color .15s;cursor:pointer}
.zn-stars i.on{color:#fbbf24}
.zn-rate-hint{margin-left:auto;font-size:12px;color:#475569;background:#eff6ff;padding:4px 12px;border-radius:99px;font-weight:500}
.zn-stars.is-locked{opacity:.4;pointer-events:none}

/* ============================================================
 * 评论（保留）
 * ============================================================ */
.zn-comment-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px dashed #e2e8f0}
.zn-cmt-count{font-size:12.5px;color:#94a3b8}
.zn-cmt-count em{font-style:normal;color:var(--color-primary);font-weight:600}
.zn-cmt-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.zn-cmt-item{
    background:var(--bg-white);border:1px solid #eef2f6;border-radius:var(--z-r-md);
    padding:14px 16px;display:flex;gap:12px;align-items:flex-start;
}
.zn-cmt-avatar{
    width:38px;height:38px;border-radius:50%;flex:none;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:16px;background:var(--color-primary);
}
.zn-cmt-main{flex:1;min-width:0}
.zn-cmt-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:13px}
.zn-cmt-name{font-weight:600;color:#1e293b;font-size:14px}
.zn-cmt-name a{color:inherit;text-decoration:none}
.zn-cmt-site{
    color:#64748b;font-size:12px;background:#f8fafc;
    padding:2px 10px;border-radius:6px;word-break:break-all;
    border:1px solid #eef2f6;text-decoration:none;
}
.zn-cmt-site,.zn-cmt-site a{color:#64748b !important;text-decoration:none !important;pointer-events:none;cursor:default}
.zn-cmt-time{color:#94a3b8;font-size:12px;margin-left:auto}
.zn-cmt-text{font-size:14px;color:#475569;line-height:1.7;word-break:break-word;margin-bottom:8px}
.zn-cmt-text img{max-width:100%;border-radius:6px;margin:4px 0}
.zn-cmt-action{display:flex;gap:18px;font-size:12.5px;color:#94a3b8}
.zn-cmt-action a{color:#94a3b8;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .15s;cursor:pointer}
.zn-cmt-action a:hover{color:var(--color-primary)}
.zn-cmt-action a em{font-style:normal;font-weight:500}
.zn-cmt-action a i{font-size:13px}
.zn-cmt-item .zn-cmt-item{margin-top:10px;margin-left:50px;background:#f8fafc}
.zn-cmt-item .zn-cmt-item .zn-cmt-item{margin-left:46px;background:#fff;border-style:dashed}
.zn-cmt-item .zn-cmt-item .zn-cmt-avatar{width:30px;height:30px;font-size:13px}
.zn-cmt-form-card{margin-top:14px;padding:18px;background:#f8fafc;border:1px solid #eef2f6;border-radius:var(--z-r-md)}
.zn-cmt-anon-tip{display:flex;align-items:center;gap:12px;font-size:13px;color:#475569;margin-bottom:14px}
.zn-cmt-avatar-anon{
    flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-primary);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;
}
.zn-cmt-anon-tip b{color:#1e293b;font-weight:600}
.zn-cmt-locked{
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;margin-bottom:14px;border-radius:var(--z-r-md);
    background:#ecfdf5;border:1px solid #a7f3d0;
}
.zn-cmt-locked i{color:#059669;font-size:22px;flex:none}
.zn-cmt-locked-text{display:flex;flex-direction:column;line-height:1.6}
.zn-cmt-locked-text b{color:#065f46;font-size:14px;font-weight:600}
.zn-cmt-locked-text span{color:#047857;font-size:12.5px}
.zn-cmt-disabled{opacity:.55}
.zn-cmt-disabled .zn-cmt-form{cursor:not-allowed}
.zn-cmt-form{display:flex;flex-direction:column;gap:10px}
.zn-cmt-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zn-cmt-form-row input{
    width:100%;height:42px;padding:0 14px;
    border:1px solid #e2e8f0;border-radius:8px;
    background:#fff;font:inherit;font-size:13.5px;color:#334155;
    transition:border-color .15s,box-shadow .15s;
}
.zn-cmt-form-row input::placeholder{color:#cbd5e1}
.zn-cmt-form-row input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
#zn-cmt-textarea{
    width:100%;min-height:90px;padding:12px 14px;
    border:1px solid #e2e8f0;border-radius:8px;
    background:#fff;font:inherit;font-size:14px;line-height:1.65;
    color:#334155;outline:0;resize:vertical;transition:border-color .15s,box-shadow .15s;
}
#zn-cmt-textarea::placeholder{color:#cbd5e1}
#zn-cmt-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.zn-cmt-form-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:#94a3b8}
.zn-cmt-submit{
    display:inline-flex;align-items:center;gap:6px;padding:0 22px;height:40px;border-radius:8px;
    background:var(--color-primary);color:#fff;font-size:13.5px;font-weight:600;border:0;cursor:pointer;transition:.15s;
}
.zn-cmt-submit:hover{background:#2563eb;transform:translateY(-1px)}
.zn-cmt-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ============================================================
 * 反馈模态框
 * ============================================================ */
.zn-modal{
    position:fixed;inset:0;z-index:4000;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .18s;
}
.zn-modal[hidden]{display:none}
.zn-modal.is-open{opacity:1;pointer-events:auto}
.zn-modal-bg{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.zn-modal-panel{
    position:relative;width:min(440px,92vw);max-height:90vh;overflow:auto;
    background:var(--bg-white);border-radius:16px;box-shadow:0 24px 60px rgba(15,23,42,.35);
    transform:translateY(10px) scale(.98);transition:transform .22s;
}
.zn-modal.is-open .zn-modal-panel{transform:translateY(0) scale(1)}
.zn-modal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px;border-bottom:1px dashed #e2e8f0;
}
.zn-modal-head h3{margin:0;font-size:16px;font-weight:600;color:#0f172a;display:flex;align-items:center;gap:8px}
.zn-modal-head h3 i{color:var(--color-primary)}
.zn-modal-close{
    width:32px;height:32px;border-radius:50%;border:0;background:#f1f5f9;color:#475569;
    font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:.15s;
}
.zn-modal-close:hover{background:#e2e8f0;color:#0f172a}
.zn-modal-tip{
    margin:14px 22px 0;padding:10px 14px;
    background:#e0f2fe;border:1px solid #bae6fd;color:#0369a1;
    border-radius:8px;font-size:12.5px;line-height:1.6;
}
.zn-modal-body{padding:18px 22px 4px;display:flex;flex-direction:column;gap:14px}
.zn-fb-types{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zn-fb-type{position:relative;display:block;cursor:pointer}
.zn-fb-type input{position:absolute;opacity:0;pointer-events:none}
.zn-fb-type span{
    display:flex;align-items:center;gap:8px;
    padding:11px 14px;border:1px solid #e2e8f0;border-radius:8px;
    font-size:13.5px;color:#475569;background:#fff;transition:.15s;
}
.zn-fb-type span i{color:#94a3b8;font-size:14px;transition:.15s}
.zn-fb-type input:checked + span{
    border-color:var(--color-primary);background:#eff6ff;color:var(--color-primary);font-weight:600;
}
.zn-fb-type input:checked + span i{color:var(--color-primary)}
.zn-fb-type:hover span{border-color:#bfdbfe}
#zn-fb-text{
    width:100%;min-height:72px;padding:10px 14px;
    border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;
    font:inherit;font-size:13.5px;line-height:1.6;color:#334155;outline:0;resize:vertical;
    transition:border-color .15s,box-shadow .15s;
}
#zn-fb-text:focus{border-color:var(--color-primary);background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.zn-modal-foot{
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    padding:14px 22px 20px;font-size:12.5px;color:#94a3b8;
}
.zn-modal-btns{display:flex;gap:8px}
.zn-modal-cancel,.zn-modal-submit{
    display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 18px;border-radius:8px;
    font:inherit;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:.15s;
}
.zn-modal-cancel{background:#fff;color:#475569;border-color:#e5e7eb}
.zn-modal-cancel:hover{background:#f1f5f9;color:#0f172a}
.zn-modal-submit{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.zn-modal-submit:hover{background:#2563eb;border-color:#2563eb;transform:translateY(-1px)}
.zn-modal-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ============================================================
 * 响应式
 * ============================================================ */
@media (max-width:960px){
    .zn-rate{grid-template-columns:1fr;gap:16px}
    .zn-rate-score{padding:16px}
}
@media (max-width:768px){
    .home-main.zn-detail{gap:16px}
    .zn-detail .left-content{gap:16px}
    .zn-hero{padding:22px 18px;gap:18px;text-align:center}
    .zn-hero-main{flex-direction:column;align-items:center;gap:14px}
    .zn-hero-ava{width:72px;height:72px;border-radius:18px}
    .zn-hero-letter{font-size:26px}
    .zn-hero-body{width:100%;text-align:center}
    .zn-hero-title{font-size:20px;margin-bottom:6px;white-space:normal}
    .zn-hero-sub{font-size:13px;line-height:1.65;margin-bottom:10px;-webkit-line-clamp:2}
    .zn-hero-meta{gap:12px;font-size:12px;margin-bottom:8px;justify-content:center}
    .zn-hero-tags{gap:8px;justify-content:center}
    .zn-hero-chip{height:32px;padding:0 12px;font-size:12.5px}
    .zn-hero-divider{margin:2px 0}
    .zn-hero-actions-row{gap:9px}
    .zn-hero-action{height:38px;padding:0 10px;font-size:12px}
    .zn-hero-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .zn-card{padding:18px 16px 20px}
    .zn-card-hd{gap:9px;margin-bottom:15px}
    .zn-card-title{font-size:16px}
    .zn-info-grid dt{font-size:14px}
    .zn-info-grid dd{font-size:13.5px;margin-bottom:12px}
    .zn-notice{font-size:12.5px;padding:11px 13px;margin-top:16px}
    .zn-feedback-chips{grid-template-columns:repeat(2,1fr);gap:10px}
    .zn-feedback-sec .zn-card-tag{display:none}
    .zn-fb-chip-big{padding:14px 6px 11px}
    .zn-fb-chip-big>i{font-size:19px}
    .zn-lightbox-close{top:14px;right:14px;width:36px;height:36px;font-size:20px}
    .zn-cmt-form-card{padding:14px 16px}
    .zn-cmt-form-row{grid-template-columns:1fr}
    .zn-cmt-form-foot{flex-direction:column;align-items:stretch}
    .zn-cmt-submit{justify-content:center}
    .zn-cmt-item .zn-cmt-item{margin-left:22px}
    .zn-cmt-item .zn-cmt-item .zn-cmt-item{margin-left:16px}
    .zn-rate-bar label{width:38px}
    .zn-fb-types{grid-template-columns:1fr}
    .zn-crumb-cur{max-width:34vw}
}
@media (max-width:640px){
    .zn-hero-actions-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .zn-hero-action{flex:none;width:auto;min-width:0;height:40px;padding:0 12px;font-size:12.5px}
    .zn-hero-action-red{grid-column:1 / -1}
}
@media (max-width:480px){
    .zn-feedback-chips{grid-template-columns:1fr;gap:8px}
    .zn-fb-chip-big{flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 14px}
    .zn-fb-chip-big>i{font-size:18px}
    .zn-fb-chip-big>span{font-size:13px}
    .zn-fb-chip-big>em{margin-top:0;margin-left:auto}
}