/* AOW5 玩家攻略站 共用样式
   设计语言参考 qoder.com：浅灰底 + 白卡 + 1px 发丝线 + 深绿主色；
   无装饰渐变、无玻璃拟态、hover 只变色不位移。图标统一 Lucide 线性 SVG。 */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #F5F6F7;            /* 页面底（中性浅灰） */
    --surface: #FFFFFF;       /* 卡片 */
    --surface-2: #F7F8F7;     /* 浅灰面板 / 表头 / 代码底 */
    --primary: #255A41;       /* 主按钮深绿 */
    --primary-hover: #517B67;
    --accent: #80C776;        /* 强调绿（focus / active / 图标） */
    --accent-text: #4B9A40;   /* 链接 hover 绿 */
    --text: #1F2321;
    --text-2: #636261;
    --text-3: #838280;
    --border: #E6E6E6;
    --border-light: #EFEFEF;
    --border-strong: #DDDDDD;
    --ok: #3E7B3B;
    --warn: #B07A18;
    --bad: #C0453A;
    --tip-bg: #F4F8F3;
    --tip-border: #D9E7D4;
    --warn-bg: #FBF5EA;
    --warn-border: #EBDCC0;
    --bad-bg: #FBF1EF;
    --bad-border: #ECD2CD;
    --radius-card: 16px;
    --radius-input: 10px;
}

body {
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    min-height: 100vh;
    padding: 20px 20px 28px;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.7;
}

.wrap { max-width: 960px; margin: 0 auto; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 4px rgba(12,12,13,.05);
    padding: 30px 28px;
    margin-bottom: 20px;
}

/* 顶部导航：分类 + 下拉菜单（白底、发丝线、hover 变色） */
.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.topnav .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 16px; text-decoration: none; letter-spacing: .5px; }
.topnav .brand .avatar { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); }
.topnav .brand:hover { color: var(--primary); }
.menu { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; list-style: none; }
.menu > li { position: relative; }
.menu > li > a {
    display: block;
    padding: 7px 18px;
    border-radius: 999px;
    color: var(--text-2);
    font-size: 15px;
    text-decoration: none;
    transition: color .2s ease, background .2s ease;
}
.menu > li > a:hover { color: var(--text); background: #E9EBEA; }
.menu > li > a.active { color: var(--primary); background: #EAF3E7; font-weight: 600; }
/* QQ 联系入口：深绿实底 CTA，点击复制 */
.menu > li.nav-qq > a { background: var(--primary); color: #ffffff; font-weight: 600; }
.menu > li.nav-qq > a:hover { background: #517B67; color: #ffffff; }
.menu > li.has-menu > a::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 3px;
    vertical-align: -1px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.submenu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 190px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(12,12,13,.08);
    padding: 5px;
    list-style: none;
    display: none;
    z-index: 40;
}
.menu > li:hover > .submenu,
.menu > li:focus-within > .submenu { display: block; }
.submenu a {
    display: block;
    padding: 8px 14px;
    border-radius: 7px;
    color: var(--text-2);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.submenu a:hover { background: var(--surface-2); color: var(--text); }
.submenu a.active { color: var(--primary); font-weight: 600; background: var(--surface-2); }
/* 桥接父项与子菜单间的 4px 间隙：鼠标下移经过间隙时保持 hover 不丢 */
.submenu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
}

/* 标题层级（参考：紧凑阶 + 中等字重） */
h1 { font-size: 28px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; color: var(--text); }
h2 { font-size: 20px; font-weight: 600; line-height: 1.5; margin: 26px 0 12px; color: var(--text); }
h3 { font-size: 16px; font-weight: 600; margin: 20px 0 8px; color: var(--text); }
p { margin: 8px 0; color: var(--text); }
.subtitle { color: var(--text-2); font-size: 14px; margin-bottom: 14px; }
.small { font-size: 12.5px; color: var(--text-2); line-height: 1.65; }

a { color: var(--primary); transition: color .2s ease; }
a:hover { color: var(--accent-text); }

/* 表格：水平发丝分隔线、浅灰表头、无竖线 */
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
th, td { border-bottom: 1px solid var(--border-light); padding: 9px 10px; text-align: left; vertical-align: top; }
th { background: var(--surface-2); color: var(--text-2); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 1px solid var(--border); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 提示框：语义浅底 + Lucide 图标（CSS mask 内联，随语义色着色） */
.tip, .warn, .bad {
    border-radius: 12px;
    padding: 13px 16px;
    margin: 12px 0;
    font-size: 14px;
    border: 1px solid;
}
.tip  { background: var(--tip-bg);  border-color: var(--tip-border); }
.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.bad  { background: var(--bad-bg);  border-color: var(--bad-border); }
.tip b, .warn b, .bad b { display: block; margin-bottom: 4px; }
.tip b::before, .warn b::before, .bad b::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    vertical-align: -2.5px;
    background-color: currentColor;
    -webkit-mask: var(--ico) no-repeat center / contain;
    mask: var(--ico) no-repeat center / contain;
}
.tip  { color: var(--text); }
.tip b  { color: var(--ok);   --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.warn b { color: var(--warn); --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.bad b  { color: var(--bad);  --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }

/* 徽章 */
.tag {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}
.tag.ok   { background: #E8F2E6; color: var(--ok); }
.tag.warn { background: #F8EEDC; color: var(--warn); }
.tag.bad  { background: #F9E9E6; color: var(--bad); }
.tag.info { background: #EAF3E7; color: var(--primary); }

/* 品质色点（替代彩色圆点字符） */
.swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.14);
    vertical-align: -1px;
    margin-right: 6px;
}

code {
    background: var(--surface-2);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 13px;
    font-family: ui-monospace, Consolas, Monaco, monospace;
    color: #A13A2E;
}
.formula {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 0;
    font-family: ui-monospace, Consolas, Monaco, monospace;
    font-size: 13.5px;
    overflow-x: auto;
    color: var(--primary);
}

/* 卡片网格（导航页用）：hover 只变色不位移 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tile {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 4px rgba(12,12,13,.05);
    padding: 22px 20px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tile:hover { border-color: #BCBBBA; box-shadow: 0 2px 10px rgba(12,12,13,.08); color: var(--text); }
.tile .ico {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #EAF3E7;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tile .ico svg { width: 15px; height: 15px; }
.tile .t { font-weight: 600; font-size: 15.5px; margin: 12px 0 5px; color: var(--text); }
.tile:hover .t { color: var(--primary); }
.tile .d { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* 计算器表单 */
.form-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.form-item { flex: 1 1 150px; min-width: 140px; }
.form-item label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 5px; }
.form-item input, .form-item select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-input);
    font-size: 14.5px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .2s ease, box-shadow .2s ease;
    font-family: inherit;
}
.form-item input:focus, .form-item select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(128,199,118,.18);
}
.btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: 999px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.btn.secondary:hover { background: #E3E3E3; border-color: var(--border-strong); color: var(--text); }

/* 结果展示 */
.result { margin-top: 18px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.stat {
    background: var(--surface-2);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 13px 14px;
    text-align: center;
}
.stat .v { font-size: 21px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.stat .k { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.stat.good { background: var(--tip-bg); border-color: var(--tip-border); }
.stat.good .v { color: var(--ok); }
.stat.bad-s { background: var(--bad-bg); border-color: var(--bad-border); }
.stat.bad-s .v { color: var(--bad); }

.bar { height: 16px; border-radius: 5px; background: var(--accent); min-width: 2px; }

details { margin: 10px 0; }
details summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 14px; }
details summary:hover { color: var(--accent-text); }

footer { text-align: center; color: var(--text-3); font-size: 12.5px; margin: 22px 0 6px; }
footer a { color: var(--text-2); }
footer a:hover { color: var(--accent-text); }

@media (max-width: 600px) {
    body { padding: 12px 12px 20px; }
    .card { padding: 22px 16px; }
    h1 { font-size: 24px; }
    table { font-size: 13px; }
    th, td { padding: 7px 8px; }
}