/* 蓬莱飘渺阁 v1.6.0 —— 全站样式（阳光清新 · 天空蓝×暖阳橙 · 原创 CSS，无外部图片） */
:root{
  --bg:#eef7ff; --card:#ffffff; --ink:#22303e; --muted:#6b8299;
  --acc:#1e8fff; --acc-dark:#0d6fd6; --acc-soft:#e3f2ff; --acc2:#ff9d2e;
  --line:#d9e9f7; --line-soft:#e6f1fb;
  --danger:#e5484d; --ok:#18b566; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1300px 460px at 50% -160px, #fff8e1 0%, rgba(255,248,225,0) 62%),
    radial-gradient(1100px 500px at 85% -100px, #ffe9c9 0%, rgba(255,233,201,0) 55%),
    var(--bg);
  color:var(--ink);
  font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
::selection{background:#c9e6ff}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.topbar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;color:var(--ink);letter-spacing:.5px}
.brand:hover{text-decoration:none}
.brand .logo{width:28px;height:28px}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav a{padding:6px 13px;border-radius:999px;color:var(--muted);font-size:14px;transition:background .15s,color .15s}
.nav a:hover{background:var(--acc-soft);color:var(--acc-dark);text-decoration:none}
.nav a.active{background:linear-gradient(135deg,#1e8fff,#3fb0ff);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(30,143,255,.32)}
.nav a.userchip{color:var(--acc-dark);font-weight:600}
.userchip b{color:var(--acc2)}

/* ---------- 版块 ---------- */
.hero{padding:44px 0 14px;text-align:center}
.hero h1{
  font-size:30px;margin:10px 0 6px;letter-spacing:3px;font-weight:800;
  background:linear-gradient(100deg,#0d6fd6 15%,#1e8fff 45%,#ff9d2e 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .slogan{color:var(--muted);font-size:14px;letter-spacing:1px}
.badge-line{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.badge{display:inline-block;font-size:12px;color:var(--acc-dark);background:var(--acc-soft);border:1px solid #b9dcff;border-radius:999px;padding:3px 12px}
.badge.warn{color:#a8631a;background:#fff3dd;border-color:#ffd9a0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:24px 0}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  box-shadow:0 1px 2px rgba(30,110,190,.06),0 5px 16px rgba(30,110,190,.07);
}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:13px}
.card .go{display:inline-block;margin-top:12px;font-size:13px;font-weight:600}
/* 首页功能入口：整卡可点击 */
a.go-card{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:box-shadow .18s,transform .18s,border-color .18s}
a.go-card:hover,a.go-card:focus-visible{box-shadow:0 10px 26px rgba(30,110,190,.18);border-color:#8fc6ff;transform:translateY(-3px)}
a.go-card .go{color:var(--acc)}
a.go-card:hover .go{text-decoration:underline}
/* 识图：按纠错记忆自动改正的输入框（绿色标注） */
.auto-fixed{background:#eafaf1;border:1.5px solid var(--ok);border-radius:6px}
.sec{margin:28px 0}
.sec h2{font-size:20px;border-left:4px solid var(--acc2);padding-left:11px;margin:0 0 12px;letter-spacing:1px}

/* ---------- 表单 ---------- */
label.f{display:block;margin:10px 0 4px;font-size:13px;color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  font:inherit;background:#ffffff;color:var(--ink);transition:border-color .15s,box-shadow .15s
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(30,143,255,.15)}
textarea{min-height:90px;resize:vertical}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.hint.err{color:var(--danger)}

button,.btn{
  display:inline-block;border:1px solid var(--acc);background:linear-gradient(135deg,#1e8fff,#3fa9ff);color:#fff;
  padding:8px 17px;border-radius:9px;font:inherit;font-size:14px;cursor:pointer;
  box-shadow:0 2px 6px rgba(30,143,255,.30);transition:background .15s,transform .1s,box-shadow .15s
}
button:hover,.btn:hover{background:linear-gradient(135deg,#0d6fd6,#2b93f5);text-decoration:none;box-shadow:0 3px 10px rgba(30,143,255,.36)}
button:active,.btn:active{transform:translateY(1px);box-shadow:none}
button.ghost{background:#fff;color:var(--acc-dark);box-shadow:none;border-color:#b9dcff}
button.ghost:hover{background:var(--acc-soft)}
button.danger{background:#fff;border-color:var(--danger);color:var(--danger);box-shadow:none}
button.danger:hover{background:var(--danger);color:#fff}
button.small{padding:4px 11px;font-size:13px}
button:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>*{flex:0 0 auto}
.grow{flex:1 1 auto}

/* ---------- 表格（横线式 · 行悬停） ---------- */
table.t{
  width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-size:14px;
  border:1px solid var(--line);border-radius:11px;overflow:hidden
}
table.t th,table.t td{border:none;border-bottom:1px solid var(--line-soft);padding:8px 11px;text-align:left}
table.t thead th{background:#e9f4ff;font-weight:600;white-space:nowrap;border-bottom:1px solid var(--line);color:#14538f}
table.t tfoot th{background:#f4faff;border-top:1px solid var(--line);border-bottom:none}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr:hover td{background:#f5fbff}
table.t td input{padding:4px 8px}
table.t .num{text-align:right;font-variant-numeric:tabular-nums}
table.t td.center,table.t th.center{text-align:center}
/* 推荐升级：最后一列最高值金色高亮（写在 hover 规则之后，悬停时金色不丢） */
table.t tbody tr td.hot{background:#fff3d6;font-weight:700;color:#8a5a00}
tr.rank1 td{background:#fff6e0}
tr.rank2 td{background:#eef6ff}
tr.rank3 td{background:#fff0e6}

/* ---------- 星级 ---------- */
.stars{display:inline-flex;gap:2px;cursor:pointer;user-select:none}
.stars .s{font-size:20px;color:#d4e3f2;transition:color .1s}
.stars .s.on{color:#ffb02e}

/* ---------- 顶层标签页（下划线式） ---------- */
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin:16px 0 8px;border-bottom:2px solid var(--line)}
.tabs button{
  background:transparent;border:none;box-shadow:none;border-radius:9px 9px 0 0;
  color:var(--muted);padding:9px 18px;font-size:14.5px;font-weight:600;position:relative
}
.tabs button:hover{background:var(--acc-soft);color:var(--ink);box-shadow:none}
.tabs button.active{background:transparent;color:var(--acc-dark)}
.tabs button.active::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-2px;height:3px;
  border-radius:99px;background:linear-gradient(90deg,#1e8fff,#ff9d2e)
}

/* ---------- 二级分段控件（iOS 式） ---------- */
.third-tabs{display:inline-flex;background:#e2eefb;border-radius:10px;padding:3px;gap:2px;margin:4px 0 12px}
.third-tabs button{
  background:transparent;border:none;box-shadow:none;border-radius:8px;
  color:var(--muted);padding:5px 15px;font-size:13px
}
.third-tabs button:hover{color:var(--ink);background:transparent}
.third-tabs button.active{background:#fff;color:var(--acc-dark);font-weight:600;box-shadow:0 1px 4px rgba(30,110,190,.22)}

/* ---------- 块内小工具卡 ---------- */
.tool-block{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:12px;background:#fbfeff}
.tool-block h4{margin:0 0 10px;font-size:15px;color:var(--acc-dark)}

/* ---------- 提示 ---------- */
.toast{position:fixed;right:18px;bottom:18px;z-index:200;max-width:340px;background:#1c3a5e;color:#fff;
  padding:11px 15px;border-radius:11px;font-size:14px;box-shadow:0 6px 18px rgba(20,60,110,.35);display:none}
.toast.err{background:var(--danger)}
.notice{background:#fff8e1;border:1px solid #ffe19b;color:#8a5c12;border-radius:11px;padding:10px 14px;margin:12px 0;font-size:13px}
.notice.blue{background:#e8f4ff;border-color:#b9dcff;color:#14538f}
.danger-zone{border:1px dashed #f3b1b3;background:#fff5f5}

/* ---------- 进度条 ---------- */
.pbar{height:8px;background:#e2eefb;border-radius:99px;overflow:hidden;margin:8px 0}
.pbar>i{display:block;height:100%;background:linear-gradient(90deg,#1e8fff,#41d0ff);width:0;transition:width .2s}

/* ---------- 文章 ---------- */
.art-list .card{margin-bottom:12px}
.art h1{font-size:22px;margin:10px 0}
.art .meta{color:var(--muted);font-size:13px;margin-bottom:14px}
.art .body{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.art .body h2{font-size:17px;margin:18px 0 8px;border-left:3px solid var(--acc2);padding-left:8px}
.art .body ul{padding-left:20px}
.art .body li{margin:4px 0}

/* ---------- 评论区 ---------- */
.cmt-item{border-bottom:1px dashed var(--line);padding:10px 2px}
.cmt-item:last-child{border-bottom:none}
.cmt-head{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cmt-head b{color:var(--ink)}
.cmt-body{margin-top:3px;white-space:pre-wrap;word-break:break-word}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);margin-top:44px;padding:20px 0 32px;color:var(--muted);font-size:12.5px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,244,220,.55))}
footer .foot-links{margin-bottom:6px}
footer .disclaimer{max-width:760px;margin:6px auto 0}

/* ---------- 其他 ---------- */
.muted{color:var(--muted);font-size:13px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:14px;align-items:center}
.kv b{color:var(--acc-dark)}
.result-box{background:#f0f8ff;border:1px solid #bfe1ff;border-left:3px solid var(--acc);border-radius:10px;padding:12px 15px;margin-top:10px;font-size:14px}
.big-num{font-size:24px;font-weight:700;color:var(--acc-dark);font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .hero h1{font-size:23px}
  table.t{font-size:13px}
  .nav{margin-left:0}
}

/* ---------- 数据存储提示（每次打开网页显示，至少 3 秒后才可关闭） ---------- */
.storage-mask{position:fixed;inset:0;background:rgba(20,40,70,.66);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.storage-box{background:#fff;border-radius:16px;max-width:540px;width:100%;box-shadow:0 24px 70px rgba(10,35,75,.4);padding:30px 28px 24px;text-align:center;animation:storage-pop .3s ease}
@keyframes storage-pop{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.storage-box .st-ic{font-size:42px;line-height:1}
.storage-box h3{margin:12px 0 12px;font-size:19px;color:var(--danger)}
.storage-box .st-txt{font-size:14.5px;line-height:1.9;color:var(--ink);text-align:left;background:#fff7e8;border:1px solid #ffd9a0;border-radius:10px;padding:14px 16px}
.storage-box button{margin-top:18px;min-width:210px}
.storage-box .st-tip{margin-top:10px;font-size:12px;color:var(--muted)}