@charset "utf-8";
/* ==========================================================================
   北极云站长导航 - 前台主题样式（对标 dh.shuangyun.net 目录站样式）
   设计语言：琥珀金主色 + 玻璃拟态卡片 + 亮/暗双主题（默认亮色）
   本文件同时兼容本站既有 class（wrap/main-col/sidebar/panel/site-card 等）
   ========================================================================== */

/* ---------- 1. 设计 token ---------- */
:root{
  --accent:#f59e0b;
  --accent2:#fbbf24;
  --accent-ink:#a76b07;
  --glass:rgba(255,255,255,.72);
  --glass2:rgba(255,255,255,.92);
  --border:rgba(17,24,39,.10);
  --border2:rgba(17,24,39,.16);
  --glow:rgba(245,158,11,.35);
  --text:#1f2530;
  --dim:#646c80;
  --radius:16px;
  --shadow:0 8px 32px rgba(23,32,58,.10);
  --shadow-hi:0 16px 48px rgba(245,158,11,.18);
  --sheet:rgba(255,255,255,.78);
  --bg1:#ffffff;
  --bg2:#eef2f8;
  --head:rgba(255,255,255,.78);
  --foot:rgba(255,255,255,.66);
}
html[data-theme="dark"]{
  --glass:rgba(255,255,255,.07);
  --glass2:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.14);
  --border2:rgba(255,255,255,.22);
  --text:#e8e8e8;
  --dim:#8a8a96;
  --shadow:0 8px 32px rgba(0,0,0,.30);
  --shadow-hi:0 16px 48px rgba(245,158,11,.16);
  --sheet:rgba(255,255,255,.06);
  --bg1:#141621;
  --bg2:#0a0a0f;
  --head:rgba(18,20,28,.72);
  --foot:rgba(255,255,255,.05);
  --accent-ink:#fbbf24;
}

/* ---------- 2. 基础 ---------- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{
  font-family:"Microsoft YaHei","PingFang SC",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;color:var(--text);overflow-x:hidden;overflow-x:clip;
  background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 50%,var(--bg1) 100%);
  background-attachment:fixed;min-height:100vh;
}
a{text-decoration:none;color:inherit;transition:color .2s,border-color .2s}
img{max-width:100%;border:0;vertical-align:middle}
h1,h2,h3,h4,h5{font-weight:bold;line-height:1.35}
small{font-size:12px;color:var(--dim);font-weight:normal}
ul,ol{list-style:none}
input,select,textarea,button{font-family:inherit}

/* ---------- 3. 顶部加载条 ---------- */
#loaderBar{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:1100;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 12px var(--accent);transition:width .3s ease,opacity .4s ease;
}
#loaderBar.done{opacity:0}

/* ---------- 4. 吸顶顶栏 ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;background:var(--head);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);
}
.nav-row{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:11px 16px;
}
.nav-brand{display:flex;align-items:center;gap:8px;flex:none}
.nav-logo{
  font-size:18px;font-weight:800;letter-spacing:.5px;white-space:nowrap;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.nav-mark{
  width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:9px;font-size:16px;font-weight:800;color:#1a1a1a;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 14px var(--glow);-webkit-text-fill-color:#1a1a1a;
}
.nav-badge{
  font-size:10px;font-weight:bold;padding:2px 7px;border-radius:999px;
  color:var(--accent-ink);background:rgba(245,158,11,.14);
  border:1px solid rgba(245,158,11,.32);white-space:nowrap;
}
.nav-menu{display:flex;align-items:center;gap:2px;flex:none}
.nav-menu a{
  display:block;padding:8px 13px;border-radius:9px;font-size:13px;font-weight:bold;
  color:var(--dim);white-space:nowrap;
}
.nav-menu a:hover,.nav-menu a.active{color:var(--accent);background:rgba(245,158,11,.1)}
.nav-search{flex:1;min-width:120px;display:flex;align-items:center;gap:0}
.nav-search input{
  flex:1;min-width:0;height:38px;padding:0 14px;font-size:13px;color:var(--text);
  background:var(--sheet);border:1px solid var(--border);border-right:0;
  border-radius:11px 0 0 11px;outline:none;transition:.2s;
}
.nav-search input::placeholder{color:var(--dim)}
.nav-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.14)}
.nav-search button{
  flex:none;height:38px;padding:0 18px;border:0;border-radius:0 11px 11px 0;cursor:pointer;
  font-size:13px;font-weight:bold;color:#1a1a1a;
  background:linear-gradient(135deg,var(--accent),var(--accent2));transition:.2s;
}
.nav-search button:hover{filter:brightness(1.06)}
.nav-user{display:flex;align-items:center;gap:6px;flex:none}
.nav-user a{display:block}
.nav-btn{
  padding:8px 13px;border-radius:10px;font-size:13px;font-weight:bold;color:var(--dim);
  background:var(--sheet);border:1px solid var(--border);white-space:nowrap;transition:.2s;
}
.nav-btn:hover{color:var(--accent);border-color:var(--accent)}
.nav-btn-primary{
  color:#1a1a1a;border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 14px var(--glow);
}
.nav-btn-primary:hover{color:#1a1a1a;filter:brightness(1.06)}
.nav-btn-admin{color:var(--accent-ink);border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.1)}
.theme-toggle{
  flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;color:var(--accent);border-radius:11px;
  background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.theme-toggle:hover{border-color:var(--accent);box-shadow:0 0 16px rgba(245,158,11,.25)}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-ico{display:none}
html[data-theme="dark"] .theme-ico.moon{display:flex}
html[data-theme="light"] .theme-ico.sun,html:not([data-theme]) .theme-ico.sun{display:flex}
.nav-burger{
  display:none;flex:none;width:38px;height:38px;align-items:center;justify-content:center;
  padding:0;cursor:pointer;color:var(--accent);border-radius:11px;
  background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.nav-burger svg{width:18px;height:18px}

/* 分类条 */
.nav-cats{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:2px 16px 10px;
}
.nav-row2{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;
}
.nav-row2::-webkit-scrollbar{display:none}
.nav-cat{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:bold;color:var(--dim);white-space:nowrap;
  background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.nav-cat:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.nav-cat.active{
  color:#1a1a1a;border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 16px rgba(245,158,11,.2);
}
.nav-cat-ico{
  width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:6px;font-size:11px;font-weight:bold;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.nav-cat.active .nav-cat-ico{background:rgba(26,26,26,.22);color:#1a1a1a}
.nav-cats-arrow{
  flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;
  border-radius:50%;background:var(--sheet);border:1px solid var(--border2);
  color:var(--dim);cursor:pointer;transition:.2s;
}
.nav-cats-arrow:hover:not(:disabled){color:var(--accent);border-color:var(--accent);background:rgba(245,158,11,.1)}
.nav-cats-arrow:disabled{opacity:.3;cursor:default}
.nav-cats-arrow svg{width:14px;height:14px}
.nav-cats-arrow.prev svg{transform:rotate(180deg)}
.nav-cats.no-scroll .nav-cats-arrow{display:none}

/* 公告条 */
.notice-bar{
  position:relative;z-index:10;background:rgba(245,158,11,.13);
  border-bottom:1px solid rgba(245,158,11,.3);
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
}
.notice-inner{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px}
.notice-dot{
  flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);animation:pulse 1.8s infinite;
}
.notice-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:13px;color:#8a6d1f}
html[data-theme="dark"] .notice-text{color:#d4c9a8}
.notice-text span{display:inline-block;animation:scroll 25s linear infinite;padding-left:100%}
.notice-bar.static .notice-text span{animation:none;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.notice-close{
  flex:none;background:none;border:0;color:var(--dim);cursor:pointer;font-size:18px;
  padding:2px 6px;line-height:1;
}
.notice-close:hover{color:var(--accent)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* 移动端抽屉 */
.nav-mask{
  position:fixed;inset:0;z-index:1400;background:rgba(10,15,30,.55);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.nav-mask.open{opacity:1;visibility:visible}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:1500;width:min(86vw,340px);
  display:flex;flex-direction:column;background:var(--glass2);
  border-left:1px solid var(--border);transform:translateX(105%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);
}
.nav-drawer.open{transform:translateX(0)}
.drawer-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.drawer-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  font-size:20px;line-height:1;color:var(--dim);background:var(--sheet);
  border:1px solid var(--border);border-radius:9px;
}
.drawer-close:hover{color:var(--accent)}
.drawer-scroll{flex:1;overflow-y:auto;padding:12px 16px 24px}
.drawer-block{margin-bottom:16px}
.drawer-block-title{
  display:flex;align-items:center;gap:6px;margin-bottom:8px;
  font-size:12px;font-weight:bold;color:var(--dim);
}
.drawer-block-title::before{
  content:'';width:3px;height:13px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.drawer-links{display:flex;flex-direction:column;gap:2px}
.drawer-link{
  display:block;padding:9px 11px;border-radius:10px;font-size:13.5px;color:var(--text);
  background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.drawer-link:hover{color:var(--accent);border-color:var(--accent)}
.drawer-cats{display:flex;flex-wrap:wrap;gap:7px}
.drawer-cats a{
  padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:bold;
  color:var(--dim);background:var(--sheet);border:1px solid var(--border);
}
.drawer-cats a:hover{color:var(--accent);border-color:var(--accent)}
.drawer-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-radius:12px;
  background:var(--sheet);border:1px solid var(--border);
}
.drawer-stat{text-align:center}
.drawer-stat .num{
  font-size:17px;font-weight:bold;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.drawer-stat .label{font-size:10.5px;color:var(--dim);margin-top:2px}
html.nav-lock,body.nav-lock{overflow:hidden}

/* ---------- 5. 页面容器与两栏布局 ---------- */
/*
 * 布局约定（全站前台唯一方案）：
 *   页面级容器  -> templates/default/header.php 的 .wrap（max-width:1200px + 左右 padding）
 *   两栏结构    -> .clearfix + .main-col（左，主内容）+ .sidebar（右，侧栏）
 *   纵向节奏    -> 见第 21 章 .wrap{padding-top/padding-bottom}
 * 旧 .page-layout 与 .wrap 职责重叠，同时使用会造成双 max-width + 双 padding 嵌套，
 * 且全站 0 处引用，故已移除。清浮动语义统一由 .clearfix 承担。
 */
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.main-col{float:left;width:calc(100% - 284px);min-width:0}
.sidebar{float:right;width:268px}
.layout-main{min-width:0}
.clearfix{zoom:1}
.clearfix::after{content:'';display:block;clear:both}
.clearfix::before{content:'';display:table}
.left{float:left}
.right{float:right}
.row::after,.cols::after{content:'';display:block;clear:both}
.grid{display:grid;gap:14px}

/* ---------- 6. 通用卡片 ---------- */
.panel,.section,.card,.form-panel{
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
  backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
  box-shadow:var(--shadow);
}
.panel{margin-bottom:16px;overflow:hidden}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;font-size:15px;font-weight:bold;border-bottom:1px solid var(--border);
}
.panel-head::before{
  content:'';width:3px;height:16px;border-radius:2px;margin-right:8px;flex:none;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.panel-head{justify-content:flex-start}
.panel-head small{margin-left:auto}
.panel-body{padding:16px}
.section{margin-bottom:16px;padding:16px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.section-title,.section-head h2{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:17px;font-weight:bold;color:var(--text);
}
.section-title::before,.section-head h2::before{
  content:'';width:3px;height:18px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.section-head .more,
.subsites-head .more{
  display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:bold;
  padding:5px 12px;border-radius:999px;color:var(--accent-ink);
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);transition:.2s;
}
.section-head .more:hover,
.subsites-head .more:hover{background:rgba(245,158,11,.18);box-shadow:0 0 16px rgba(245,158,11,.2)}
.section-head .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acts a{font-size:12.5px;font-weight:bold;padding:5px 11px;border-radius:999px;color:var(--dim);background:var(--sheet);border:1px solid var(--border)}
.acts a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- 7. 面包屑 ---------- */
.crumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:14px;
  padding:9px 14px;border-radius:12px;font-size:12.5px;color:var(--dim);
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--accent)}
.crumb .crumb-sep{opacity:.5}
.crumb .crumb-cur{color:var(--accent-ink);font-weight:bold}

/* ---------- 8. 数据统计条 ---------- */
.statbar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;margin-bottom:16px;
  padding:14px;border-radius:var(--radius);
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
}
.statbar .item{text-align:center;min-width:0}
.statbar .num{
  font-size:21px;font-weight:bold;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.statbar .label{font-size:11.5px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 9. 站点卡片（截图排版：图文左右，竖排三行） ---------- */
.site-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.site-card{
  display:flex;align-items:center;gap:10px;min-width:0;padding:12px;
  background:var(--sheet);border:1px solid var(--border);border-radius:14px;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.site-card:hover{
  transform:translateY(-3px);border-color:rgba(245,158,11,.5);
  box-shadow:0 14px 36px rgba(245,158,11,.14);
}
.site-card .ico{
  flex:0 0 auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:11px;overflow:hidden;font-size:17px;font-weight:bold;color:var(--accent);
  background:rgba(245,158,11,.1);border:1px solid var(--border);
}
.site-card .ico img{width:100%;height:100%;object-fit:cover;display:block}
.site-card .info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.site-card .name{
  display:flex;align-items:center;gap:4px;min-width:0;
  font-size:13px;font-weight:bold;color:var(--text);line-height:1.35;
}
.site-card .name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-card .name em{
  flex:0 0 auto;font-style:normal;font-size:9px;font-weight:bold;line-height:1.6;
  padding:0 4px;border-radius:5px;color:#fff;background:#ef4444;white-space:nowrap;
  transform:scale(.95);transform-origin:left center;
}
.site-card .name em.new{background:#ef4444}
.site-card .name em.recommend{background:var(--accent)}
.site-card .name em.top{background:#8b5cf6}
.site-card .desc{
  font-size:11px;color:var(--dim);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.site-card .meta{display:flex;align-items:center;gap:6px;font-size:10.5px;line-height:1.3}
.site-card .views{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stars{display:inline-flex;align-items:center;gap:1px;font-size:10.5px;flex:0 0 auto}
.stars .star{font-style:normal;line-height:1}
.stars .star.on{color:var(--accent)}
.stars .star.off{color:rgba(17,24,39,.18)}
html[data-theme="dark"] .stars .star.off{color:rgba(255,255,255,.18)}
.site-card .txt{flex:1;min-width:0}
/* 站点详情 */
.site-detail{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.site-detail .ico{
  flex:none;width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  border-radius:16px;overflow:hidden;font-size:24px;font-weight:bold;color:var(--accent);
  background:rgba(245,158,11,.1);border:1px solid var(--border);
}
.site-detail .ico img{width:100%;height:100%;object-fit:cover;display:block}
.site-detail .head-info{flex:1;min-width:200px}
.site-detail .head-info h1{font-size:20px;margin-bottom:6px}
.site-detail .url{font-size:12px;color:var(--accent);word-break:break-all}
.site-detail .meta2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--dim)}
.info-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
.info-list .item,.info{
  display:flex;gap:8px;padding:9px 0;font-size:12.5px;border-bottom:1px dashed var(--border);
}
.info-list .label,.info .label{flex:none;width:76px;color:var(--dim)}
.info-list .txt,.info .txt{flex:1;min-width:0;word-break:break-all}

/* ---------- 10. 表格 ---------- */
table,.table{width:100%;border-collapse:collapse;font-size:12.5px}
table th,.table th{
  text-align:left;padding:10px 12px;font-size:12px;font-weight:bold;color:var(--dim);
  background:rgba(17,24,39,.03);border-bottom:1px solid var(--border);white-space:nowrap;
}
html[data-theme="dark"] table th,html[data-theme="dark"] .table th{background:rgba(255,255,255,.04)}
table td,.table td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
table tr:last-child td{border-bottom:0}
table tr:hover td{background:rgba(17,24,39,.02)}
html[data-theme="dark"] table tr:hover td{background:rgba(255,255,255,.03)}
table a{color:var(--accent-ink)}
table a:hover{color:var(--accent)}

/* ---------- 11. 表单 ---------- */
.form-panel{padding:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row{margin-bottom:14px}
.form-group{margin-bottom:14px}
.form-row label,.form-group label,.form-panel label{
  display:block;margin-bottom:6px;font-size:12.5px;font-weight:bold;color:var(--text);
}
.form-row label .req,.form-group label .req{color:#ef4444;margin-left:3px}
input[type=text],input[type=password],input[type=email],input[type=url],input[type=number],
input[type=tel],input[type=search],select,textarea{
  width:100%;padding:10px 12px;font-size:13px;color:var(--text);
  background:var(--glass2);border:1px solid var(--border2);border-radius:11px;outline:none;transition:.2s;
}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:.85}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.14);
}
textarea{min-height:96px;resize:vertical;line-height:1.7}
select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.tip{font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.7}
.form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
input[type=checkbox],input[type=radio]{width:auto;vertical-align:-2px;margin-right:5px;accent-color:var(--accent)}
.inline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px}
.inline label{margin:0;font-weight:normal;cursor:pointer}

/* ---------- 12. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 20px;border:1px solid transparent;border-radius:11px;cursor:pointer;
  font-size:13px;font-weight:bold;color:#1a1a1a;white-space:nowrap;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 16px var(--glow);transition:.2s;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 8px 22px rgba(245,158,11,.35)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-sm{padding:6px 13px;font-size:12px;border-radius:9px}
.btn-block{width:100%}
.btn-gray{
  color:var(--dim);background:var(--sheet);border-color:var(--border2);box-shadow:none;
}
.btn-gray:hover{color:var(--accent);border-color:var(--accent);box-shadow:none;transform:none}

/* ---------- 13. 提示条 ---------- */
.alert,.flash{
  padding:11px 15px;border-radius:12px;font-size:13px;line-height:1.7;margin-bottom:14px;
  border:1px solid transparent;
}
.alert-success,.alert-ok,.alert-info{background:rgba(21,128,61,.1);color:#15803d;border-color:rgba(21,128,61,.28)}
.alert-error,.alert-err{background:rgba(185,28,28,.1);color:#b91c1c;border-color:rgba(185,28,28,.28)}
.alert-warn{background:rgba(245,158,11,.12);color:var(--accent-ink);border-color:rgba(245,158,11,.32)}
html[data-theme="dark"] .alert-success,html[data-theme="dark"] .alert-ok,html[data-theme="dark"] .alert-info{color:#4ade80}
html[data-theme="dark"] .alert-error,html[data-theme="dark"] .alert-err{color:#fca5a5}
.empty,.ok-list{
  padding:26px 14px;text-align:center;font-size:13px;color:var(--dim);
  border:1px dashed var(--border2);border-radius:14px;background:var(--sheet);
}
.empty a,.ok-list a{color:var(--accent);font-weight:bold}
.ok-list{text-align:left;line-height:1.9;padding:16px}

/* ---------- 14. 排行 / 标签 / 列表 ---------- */
.rank-list{display:flex;flex-direction:column;gap:2px}
.rank-list .item{
  display:flex;align-items:center;gap:9px;padding:7px 4px;border-radius:9px;
  font-size:12.5px;transition:.2s;
}
.rank-list .item:hover{background:rgba(245,158,11,.08)}
.rank-list .no{
  flex:none;width:19px;height:19px;display:flex;align-items:center;justify-content:center;
  border-radius:7px;font-size:10.5px;font-weight:bold;color:var(--dim);
  background:rgba(17,24,39,.06);
}
html[data-theme="dark"] .rank-list .no{background:rgba(255,255,255,.08)}
.rank-list .item:nth-child(1) .no{background:linear-gradient(135deg,#ef4444,#f87171);color:#fff}
.rank-list .item:nth-child(2) .no{background:linear-gradient(135deg,var(--accent),#fbbf24);color:#1a1a1a}
.rank-list .item:nth-child(3) .no{background:linear-gradient(135deg,#facc15,#fde68a);color:#1a1a1a}
.rank-list .name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-list .num{flex:none;font-size:11px;color:var(--dim)}
.rank-list .views{flex:none;font-size:11px;color:var(--dim)}
.rank-list li{
  display:flex;align-items:center;gap:9px;padding:7px 4px;border-radius:9px;
  font-size:12.5px;list-style:none;transition:.2s;
}
.rank-list li:hover{background:rgba(245,158,11,.08)}
.rank-list li:nth-child(1) .no{background:linear-gradient(135deg,#ef4444,#f87171);color:#fff}
.rank-list li:nth-child(2) .no{background:linear-gradient(135deg,var(--accent),#fbbf24);color:#1a1a1a}
.rank-list li:nth-child(3) .no{background:linear-gradient(135deg,#facc15,#fde68a);color:#1a1a1a}
.rank-list .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.rank-list .t:hover{color:var(--accent)}
.tag-list{display:flex;flex-wrap:wrap;gap:7px}
.tag-list a{
  padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:bold;
  color:var(--dim);background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.tag-list a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.ad-strip{display:flex;flex-wrap:wrap;gap:8px}
.ad-strip a,.ad-tag{
  padding:5px 12px;border-radius:9px;font-size:12.5px;font-weight:bold;
  color:var(--accent-ink);background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
}
.ad-strip a:hover{background:rgba(245,158,11,.18)}
.ad-carousel{position:relative;overflow:hidden;border-radius:var(--radius);margin-bottom:16px}
.ad-carousel .slides{display:flex;transition:transform .5s ease}
.ad-carousel .slides>a{flex:none;width:100%;line-height:0}
.ad-carousel .slides img{width:100%;height:auto;display:block}
.ad-carousel .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.ad-carousel .dots i{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:.2s;
}
.ad-carousel .dots i.on{width:18px;border-radius:4px;background:var(--accent)}
.ad-banner,.ad-slot{
  display:block;border-radius:12px;overflow:hidden;line-height:0;
  border:1px solid var(--border);background:var(--sheet);transition:.2s;margin-bottom:14px;
}
.ad-banner img{width:100%;height:auto;display:block}
.ad-banner:hover{transform:translateY(-2px);border-color:rgba(245,158,11,.5);box-shadow:0 10px 28px rgba(245,158,11,.16)}
.ad-slot-empty{
  display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:12px;
  border:1px dashed rgba(245,158,11,.45);background:rgba(245,158,11,.07);
  color:var(--accent-ink);font-size:12px;font-weight:bold;transition:.2s;
}
.ad-slot-empty:hover{background:rgba(245,158,11,.15);border-color:var(--accent)}

/* ---------- 15. 分页 ---------- */
.pagination,.pager{margin-top:18px;text-align:center}
.pagination ul,.pager ul{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pagination a,.pagination span,.pager a,.pager span,.pager li>span{
  display:inline-flex;align-items:center;justify-content:center;min-width:33px;height:33px;
  padding:0 10px;border-radius:10px;font-size:12.5px;font-weight:bold;
  color:var(--dim);background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.pagination a:hover,.pager a:hover{color:var(--accent);border-color:var(--accent)}
.pagination .active,.pagination .on,.pager .active,.pager .on{
  color:#1a1a1a;border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 14px var(--glow);
}
.pagination .disabled,.pager .disabled{opacity:.42;cursor:default}

/* ---------- 16. 标签页按钮组 ---------- */
.tabbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- 17. 页脚 ---------- */
.footer{
  position:relative;z-index:1;margin-top:24px;padding:26px 16px 18px;font-size:12px;
  background:var(--foot);border-top:1px solid var(--border);
  backdrop-filter:blur(32px) saturate(170%);-webkit-backdrop-filter:blur(32px) saturate(170%);
}
.footer .wrap{padding:0}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--border);
}
.footer-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:bold}
.footer-brand img{height:32px;width:auto;border-radius:8px}
.footer-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer-nav a{color:var(--dim);font-size:12.5px}
.footer-nav a:hover{color:var(--accent)}
.footer-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:20px;padding:18px 0}
.footer-cols h4{font-size:13px;margin-bottom:10px}
.footer-cols p{color:var(--dim);line-height:1.9}
.footer-cols a{color:var(--dim)}
.footer-cols a:hover{color:var(--accent)}
.footer-cols .col{min-width:0}
.footer-main{padding:16px 0;border-top:1px solid var(--border)}
.footer-disc{color:var(--dim);line-height:1.9}
.footer-friend{
  padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
}
.footer-friend .fl-label{flex:none;font-weight:bold;color:var(--text)}
.footer-friend .fl-links{display:flex;flex-wrap:wrap;gap:12px}
.footer-friend a{color:var(--dim);font-size:12px}
.footer-friend a:hover{color:var(--accent)}
.footer-sponsors{padding:14px 0;border-bottom:1px solid var(--border)}
.footer-sponsors-title{font-weight:bold;margin-bottom:10px;color:var(--text)}
.footer-sponsor-list{display:flex;flex-wrap:wrap;gap:10px}
.footer-sponsor{
  width:280px;max-width:100%;height:72px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:10px;background:rgba(255,255,255,.86);
  border:1px solid rgba(17,24,39,.1);transition:.2s;
}
.footer-sponsor img{max-width:100%;max-height:100%;display:block}
.footer-sponsor:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,23,42,.14)}
.footer-contact{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:16px}
.contact-item{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:12px;
  font-size:12.5px;font-weight:bold;color:var(--dim);
  background:var(--sheet);border:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:.2s;
}
.contact-item:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 28px rgba(245,158,11,.2)}
.contact-item.is-text{cursor:default}
.contact-item.is-text:hover{transform:none;box-shadow:none;color:var(--dim);border-color:var(--border)}
.footer-join{
  display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:11px;
  font-size:12.5px;font-weight:bold;color:#1a1a1a;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 16px rgba(245,158,11,.35);transition:.2s;
}
.footer-join:hover{transform:translateY(-1px);filter:brightness(1.05)}
.footer-copy{text-align:center;padding-top:14px;color:var(--dim);line-height:1.9}
.footer-copy a{color:var(--dim)}
.footer-copy a:hover{color:var(--accent)}
.footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:20px;padding:18px 0}
.footer .cols h4{font-size:13px;margin-bottom:10px}
.footer .cols p{color:var(--dim);line-height:1.9}
.footer .cols a{color:var(--dim)}
.footer .cols a:hover{color:var(--accent)}
.footer .bottom{text-align:center;padding-top:14px;color:var(--dim);line-height:1.9;border-top:1px solid var(--border)}
.footer .bottom a{color:var(--dim)}
.footer .foot-links{padding:12px 0;border-top:1px solid var(--border);color:var(--dim)}
.footer .foot-links a{color:var(--dim);margin-right:14px}
.footer .foot-links a:hover{color:var(--accent)}

/* ---------- 18. 回到顶部 / 悬浮广告 ---------- */
.to-top{
  position:fixed;right:18px;bottom:22px;z-index:900;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  color:var(--accent);border-radius:50%;background:var(--sheet);border:1px solid var(--border2);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 8px 28px rgba(15,23,42,.16);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s,border-color .2s,box-shadow .2s,color .2s;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{border-color:var(--accent);box-shadow:0 10px 30px rgba(245,158,11,.28)}
.to-top svg{width:20px;height:20px;display:block}
.float-tip{
  position:fixed;right:22px;bottom:78px;z-index:880;width:250px;max-width:calc(100vw - 32px);
  padding:14px;border-radius:var(--radius);background:var(--glass2);
  border:1px solid var(--border);backdrop-filter:blur(28px) saturate(170%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);box-shadow:var(--shadow);
}
.float-tip h5{font-size:13.5px;margin-bottom:6px;color:var(--text)}
.float-tip p{font-size:12px;color:var(--dim);line-height:1.7;margin-bottom:10px}
.float-tip .close{
  position:absolute;top:6px;right:8px;background:none;border:0;color:var(--dim);
  font-size:18px;line-height:1;cursor:pointer;padding:2px 5px;
}
.float-tip .close:hover{color:var(--accent)}

/* ---------- 19. 响应式 ---------- */
@media(max-width:1080px){
  .theme-toggle span{display:none}
}
@media(max-width:980px){
  .main-col{float:none;width:auto}
  .sidebar{float:none;width:auto}
  .site-grid{grid-template-columns:repeat(2,1fr)}
  .footer-cols,.footer .cols{grid-template-columns:1fr 1fr}
  .info-list{grid-template-columns:1fr}
  .statbar{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .nav-menu,.nav-search,.nav-user{display:none}
  .nav-burger{display:flex}
  .nav-row{gap:10px;padding:10px 14px}
  .nav-logo{font-size:16px}
  .nav-cats{padding:0 14px 9px}
  .nav-cats-arrow{display:none}
  .notice-inner{padding:9px 14px}
  .notice-text{font-size:12px}
  .wrap{padding-top:14px;padding-bottom:28px}
  .section{padding:14px;border-radius:14px}
  .panel-body{padding:14px}
  .form-grid{grid-template-columns:1fr}
  .site-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .site-card{padding:10px;gap:9px;border-radius:13px}
  .site-card .ico{width:38px;height:38px;font-size:15px;border-radius:10px}
  .site-card .name{font-size:12px;gap:3px}
  .site-card .name em{font-size:8.5px;padding:0 3px}
  .site-card .desc{font-size:10px}
  .site-card .meta{font-size:9.5px;gap:5px}
  .stars{font-size:9.5px}
  .statbar{padding:12px;gap:10px}
  .statbar .num{font-size:18px}
  .footer-cols,.footer .cols{grid-template-columns:1fr;gap:14px}
  .footer-sponsor{width:100%}
  .float-tip{right:12px;bottom:70px;width:calc(100vw - 24px)}
  table th,table td{padding:9px 10px}
}
@media(max-width:480px){
  .site-grid{grid-template-columns:1fr 1fr;gap:8px}
  .site-card{padding:9px;gap:8px;border-radius:12px}
  .site-card .ico{width:34px;height:34px;font-size:14px;border-radius:9px}
  .site-card .name{font-size:11.5px;gap:3px}
  .site-card .name em{font-size:8px;padding:0 3px;border-radius:4px}
  .site-card .desc{font-size:9.5px}
  .site-card .meta{font-size:9px;gap:4px}
  .stars{font-size:9px}
  .to-top{right:14px;bottom:16px;width:40px;height:40px}
  .to-top svg{width:18px;height:18px}
  .footer-sponsor{height:64px}
}
@media(max-width:380px){
  .site-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- 20. 入场动效 ---------- */
.reveal{animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.page-enter{animation:pageFadeIn .35s ease both}
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}

/* 兜底：任何情况下都不让 body 变成 fixed 元素的包含块（否则回顶按钮/加载条会被推到底部） */
body.page-enter{transform:none !important}

/* ---------- 21. 主体容器纵向节奏 ---------- */
.wrap{padding-top:18px;padding-bottom:36px}

/* ---------- 22. 首页通栏长横幅 + 广告位三形态 ---------- */
.banner-full{width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--glass);line-height:0}
.banner-full img{width:100%;height:auto;display:block}
.banner-full.banner-xl{aspect-ratio:1180/70}
.banner-full.banner-xl img{height:100%;object-fit:cover}
.ad-text-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ad-text{display:flex;align-items:center;justify-content:center;height:44px;padding:0 8px;border-radius:10px;font-size:13px;font-weight:bold;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(135deg,var(--c1,#f59e0b),var(--c2,#fbbf24));transition:transform .25s,filter .25s}
.ad-text:hover{transform:translateY(-2px);filter:brightness(1.07)}
.ad-bs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ad-empty-sm{aspect-ratio:630/60}
.ad-empty-xl{aspect-ratio:1180/70}
.ad-slot-empty.has-img{padding:0;border-style:solid;overflow:hidden}
.ad-slot-empty.has-img img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:768px){
  .ad-text-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .ad-bs-grid{grid-template-columns:1fr}
  .ad-empty-sm:not(.has-img),.ad-empty-xl:not(.has-img){aspect-ratio:auto;min-height:44px}
  .ad-full{grid-column:auto}
}

/* ---------- 23. 分类区块头（查看更多） ---------- */
.subsites-head,.topsites-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.subsites-head .section-title,.topsites-head .section-title{margin:0}
.subcat-more{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:bold;color:var(--accent-ink);background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);transition:background .25s,box-shadow .25s}
.subcat-more:hover{background:rgba(245,158,11,.18);box-shadow:0 0 16px rgba(245,158,11,.2)}

/* ---------- 24. 快捷联系按钮条（对标 gc-bar） ---------- */
.gc-bar{max-width:1200px;margin:0 auto;padding:12px 16px 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.gc-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}
.gc-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:6px 17px 6px 6px;border-radius:999px;color:#fff;font-size:13px;font-weight:bold;background:linear-gradient(135deg,var(--gc-a,#2563eb),var(--gc-b,#1e40af));box-shadow:0 6px 18px -8px rgba(37,99,235,.6),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .25s,filter .25s}
a.gc-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.gc-ico{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22);font-size:12px;font-weight:bold}
.gc-name{white-space:nowrap}
.gc-btn.gc-qq{--gc-a:#12b7f5;--gc-b:#0b8fd0}
.gc-btn.gc-wx{--gc-a:#07c160;--gc-b:#05a04d}
.gc-btn.gc-mail{--gc-a:#f59e0b;--gc-b:#d97706}
@media(max-width:768px){
  .gc-bar{padding:10px 16px 0}
  .gc-btn{padding:5px 13px 5px 5px;font-size:12px}
  .gc-ico{width:22px;height:22px}
}

/* ---------- 25. 置顶榜 / 分区卡片 / 购买弹窗（1:1 对标目标站 top.php） ---------- */

/* 25.1 玻璃分区卡片（目标站 .section-card） */
.section-card{
  position:relative;z-index:1;margin:0 0 16px;padding:16px;border-radius:18px;
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
  box-shadow:var(--shadow);
}
.section-card>.topsites-head,.section-card>.subsites-head,.section-card>.ads-head{margin:0 0 16px}
.section-card.topsites{border-color:rgba(245,158,11,.35);box-shadow:0 12px 40px rgba(245,158,11,.14)}
.section-card.ads{border-color:var(--border2)}

/* 25.2 广告位区块头（目标站 .ads-head） */
.ads-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.ads-head-tag{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:bold;color:var(--accent-ink);
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.32);
}

/* 25.3 广告区块（通栏 + 双列招租位） */
.ad-block{margin-bottom:14px}
.ad-block:last-child{margin-bottom:0}
.ad-block-title{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:12.5px;font-weight:bold;color:var(--dim)}
.ad-block-title .flag{
  flex:none;font-size:10px;font-weight:bold;line-height:1.7;padding:0 6px;border-radius:6px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.ad-full{grid-column:1/-1;width:100%}

/* 25.4 置顶站点 / 分区站点网格（目标站 .top-grid / .top-card） */
.top-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.top-card{
  display:flex;align-items:center;gap:12px;min-width:0;padding:14px;
  background:var(--sheet);border:1px solid var(--border);border-radius:16px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.top-card:hover{
  transform:translateY(-4px);border-color:rgba(245,158,11,.5);
  box-shadow:0 16px 48px rgba(245,158,11,.16);
}
.top-card .top-icon{
  flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;overflow:hidden;font-size:20px;font-weight:bold;color:var(--accent);
  background:rgba(245,158,11,.1);border:1px solid var(--border);
}
.top-card .top-icon img{width:100%;height:100%;object-fit:cover;display:block}
.top-card .top-info{flex:1;min-width:0;display:block}
.top-card .top-name{
  display:flex;align-items:center;gap:5px;min-width:0;
  font-size:14px;font-weight:bold;color:var(--text);
}
.top-card .top-name .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-card .top-name em{
  flex:none;font-style:normal;font-size:9.5px;font-weight:bold;line-height:1.6;
  padding:0 5px;border-radius:6px;color:#fff;background:#ef4444;
}
.top-card .top-name em.recommend{background:var(--accent)}
.top-card .top-name em.top{background:#8b5cf6}
.top-card .top-desc{
  display:block;font-size:11.5px;color:var(--dim);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.top-card .top-meta{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11px;color:var(--accent)}
.top-stars{display:inline-flex;align-items:center;gap:1px;font-size:11px}
.top-visits{color:var(--dim)}

/* 25.5 侧栏卡片（目标站 .side-card / .side-cats / .side-cat） */
.side-card{
  margin-bottom:16px;border-radius:var(--radius);overflow:hidden;
  background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
  box-shadow:var(--shadow);
}
.side-head{
  display:flex;align-items:center;gap:8px;padding:14px 16px;
  font-size:15px;font-weight:bold;border-bottom:1px solid var(--border);
}
.side-head::before{
  content:'';width:3px;height:16px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.side-head small{margin-left:auto;font-size:11px;font-weight:normal;color:var(--dim)}
.side-body{padding:16px}
.side-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.side-stat{
  text-align:center;padding:11px 6px;border-radius:12px;
  background:var(--sheet);border:1px solid var(--border);min-width:0;
}
.side-stat .num{
  font-size:18px;font-weight:bold;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.side-stat .label{font-size:11px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-cats{display:flex;flex-direction:column;gap:8px}
.side-cat{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px;
  font-size:13px;font-weight:bold;color:var(--text);
  background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.side-cat:hover{color:var(--accent);border-color:var(--accent);transform:translateX(3px)}
.side-cat .ico{
  flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:9px;font-size:12px;font-weight:bold;color:#fff;
  background:linear-gradient(135deg,var(--c1,#f59e0b),var(--c2,#fbbf24));
}
.side-cat .cnt{margin-left:auto;font-size:11px;font-weight:normal;color:var(--dim)}

/* 25.6 权益购买弹窗（目标站 .top-buy-mask / .top-buy-box / .top-buy-item） */
.top-buy-mask{
  position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,12,20,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.top-buy-mask.on{display:flex}
.top-buy-box{
  width:100%;max-width:768px;max-height:86vh;overflow:auto;padding:22px;border-radius:20px;
  background:var(--glass2);border:1px solid var(--border2);box-shadow:var(--shadow-hi);
}
.top-buy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.top-buy-title{font-size:18px;font-weight:bold;color:var(--text)}
.top-buy-sub{font-size:11.5px;color:var(--dim);margin-top:5px;line-height:1.7}
.top-buy-close{
  flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;font-size:20px;line-height:1;color:var(--dim);cursor:pointer;
  background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.top-buy-close:hover{color:var(--accent);border-color:var(--accent)}
.top-buy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.top-buy-item{
  display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;
  background:var(--sheet);border:1px solid var(--border);transition:.25s;
}
.top-buy-item:hover{transform:translateY(-3px);border-color:rgba(245,158,11,.5);box-shadow:0 12px 32px rgba(245,158,11,.16)}
.top-buy-name{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:bold;color:var(--text)}
.top-buy-name em{
  flex:none;font-style:normal;font-size:9.5px;font-weight:bold;line-height:1.7;padding:0 5px;border-radius:6px;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.top-buy-desc{font-size:11.5px;color:var(--dim);line-height:1.75}
.top-buy-price{font-size:20px;font-weight:bold;color:var(--accent-ink)}
.top-buy-price small{font-size:11px;font-weight:normal;color:var(--dim);margin-left:2px}
.top-buy-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.top-buy-btn{
  flex:1;min-width:104px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 12px;border-radius:10px;font-size:12.5px;font-weight:bold;color:#1a1a1a;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 14px var(--glow);transition:.2s;
}
.top-buy-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.top-buy-btn.ghost{color:var(--dim);background:var(--sheet);border:1px solid var(--border2);box-shadow:none}
.top-buy-btn.ghost:hover{color:var(--accent);border-color:var(--accent)}
.top-buy-foot{
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--border);
  font-size:11.5px;color:var(--dim);line-height:1.9;
}

@media(max-width:900px){
  .top-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .section-card{padding:13px;border-radius:16px}
  .top-card{padding:11px;gap:10px}
  .top-card .top-icon{width:38px;height:38px;font-size:17px;border-radius:10px}
  .top-buy-box{padding:16px}
  .top-buy-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .top-grid{grid-template-columns:1fr}
  .top-card{padding:10px}
  .top-card .top-icon{width:34px;height:34px;font-size:15px}
  .side-stats{grid-template-columns:1fr 1fr}
}

/* ---------- 26. 文章列表 / 文章详情（1:1 对标目标站资讯页） ---------- */
.art-list{display:flex;flex-direction:column;gap:12px}
.art-item{
  display:flex;gap:14px;padding:14px;border-radius:14px;
  background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.art-item:hover{
  border-color:rgba(245,158,11,.5);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(245,158,11,.12);
}
.art-thumb{
  flex:none;width:132px;height:88px;border-radius:11px;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  color:#1a1a1a;font-size:26px;font-weight:bold;line-height:0;
}
.art-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.art-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.art-title{
  font-size:14.5px;font-weight:bold;color:var(--text);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.art-title:hover{color:var(--accent)}
.art-summary{
  font-size:12.5px;color:var(--dim);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.art-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);margin-top:auto}
.art-meta .m{display:inline-flex;align-items:center;gap:4px}
.art-tag{
  flex:none;display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:bold;
  color:var(--accent-ink);background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);
}
.art-empty{padding:40px 0;text-align:center;color:var(--dim);font-size:13px}
.art-cats{display:flex;flex-wrap:wrap;gap:8px}
.art-cats a{
  padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:bold;
  color:var(--dim);background:var(--sheet);border:1px solid var(--border);transition:.2s;
}
.art-cats a:hover,.art-cats a.on{color:var(--accent-ink);border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12)}
/* 详情 */
.art-detail{
  background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:22px;
  backdrop-filter:blur(28px) saturate(170%);box-shadow:var(--shadow);
}
.art-head{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.art-h1{font-size:20px;font-weight:bold;color:var(--text);line-height:1.45;margin:0 0 10px}
.art-sub{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.art-body{font-size:14px;line-height:1.9;color:var(--text);word-break:break-word}
.art-body p{margin:0 0 14px}
.art-body img{max-width:100%;height:auto;border-radius:12px;margin:6px 0}
.art-body h2,.art-body h3{margin:20px 0 10px;line-height:1.5;color:var(--text)}
.art-body h2{font-size:17px}
.art-body h3{font-size:15.5px}
.art-body ul,.art-body ol{margin:0 0 14px;padding-left:22px}
.art-body li{margin:5px 0}
.art-body a{color:var(--accent)}
.art-body blockquote{
  margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--accent);
  background:rgba(245,158,11,.07);border-radius:0 10px 10px 0;color:var(--dim);
}
.art-body pre,.art-body code{font-family:ui-monospace,Menlo,Consolas,monospace}
.art-body pre{
  margin:0 0 14px;padding:12px 14px;border-radius:12px;overflow:auto;font-size:12.5px;
  background:rgba(17,24,39,.05);border:1px solid var(--border);
}
html[data-theme="dark"] .art-body pre{background:rgba(255,255,255,.05)}
.art-body code{padding:1px 5px;border-radius:5px;font-size:12.5px;background:rgba(17,24,39,.06)}
html[data-theme="dark"] .art-body code{background:rgba(255,255,255,.08)}
.art-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--border)}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.art-nav a{
  padding:10px 14px;border-radius:12px;font-size:12.5px;color:var(--dim);
  background:var(--sheet);border:1px solid var(--border);transition:.2s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.art-nav a:hover{color:var(--accent);border-color:var(--accent)}
.art-nav a.next{text-align:right}
/* 26.1 详情补充：摘要导语 / 标签行 / 上下篇空态 */
.art-lead{
  margin:0 0 16px;padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.8;
  color:var(--dim);background:rgba(245,158,11,.07);border-left:3px solid var(--accent);
}
.art-tags{display:flex;flex-wrap:wrap;gap:8px}
.art-tags a{
  padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:bold;
  color:var(--accent-ink);background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);transition:.2s;
}
.art-tags a:hover{background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.5)}
.art-nav-empty{
  padding:10px 14px;border-radius:12px;font-size:12.5px;color:var(--dim);
  background:var(--sheet);border:1px dashed var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.art-nav-empty.next{text-align:right}
@media(max-width:560px){
  .art-thumb{width:92px;height:70px;font-size:20px}
  .art-item{padding:12px;gap:10px}
  .art-detail{padding:16px}
  .art-h1{font-size:17px}
  .art-nav{grid-template-columns:1fr}
}