:root {
    --site-bg: #071513;
    --site-bg-soft: #0d2521;
    --site-surface: rgba(12, 38, 33, 0.90);
    --site-paper: #f5eedc;
    --site-paper-soft: #fffaf0;
    --site-ink: #2a2117;
    --site-muted: #776b59;
    --site-gold: #f1d27a;
    --site-gold-deep: #b7842f;
    --site-green: #1d6b5b;
    --site-green-bright: #2c8b73;
    --site-copper: #a74f35;
    --site-line: rgba(241, 210, 122, 0.22);
    --site-radius: 22px;
    --site-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--site-gold);
    background:
        radial-gradient(circle at 14% 8%, rgba(44, 139, 115, 0.18), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(183, 132, 47, 0.14), transparent 27%),
        linear-gradient(145deg, #06110f 0%, #0b201c 54%, #071513 100%);
    background-attachment: fixed;
}

a { color: inherit; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 14px max(24px, calc((100vw - 1360px) / 2));
    border-bottom: 1px solid var(--site-line);
    background: rgba(5, 20, 17, 0.88);
    backdrop-filter: blur(18px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.logo {
    color: var(--site-gold);
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-menu a {
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #d7cba9;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: 160ms ease;
}

.nav-menu a:hover {
    color: var(--site-gold);
    border-color: var(--site-line);
    background: rgba(255, 255, 255, 0.04);
}

.nav-menu a.active-nav {
    color: #13221e !important;
    border-color: rgba(241, 210, 122, 0.72);
    background: linear-gradient(135deg, #f5df99, #c7953e);
    box-shadow: 0 6px 18px rgba(183, 132, 47, 0.22);
}

.container,
.site-container {
    width: min(1360px, calc(100% - 32px));
    margin: 0 auto;
    padding: 38px 0 64px;
}

.site-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 6vw, 76px);
    border: 1px solid var(--site-line);
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(16, 61, 52, 0.96), rgba(8, 31, 27, 0.94));
    box-shadow: var(--site-shadow);
}

.site-hero::after {
    content: "贰";
    position: absolute;
    right: 3%;
    bottom: -34%;
    color: rgba(241, 210, 122, 0.07);
    font: 900 clamp(180px, 24vw, 340px)/1 KaiTi, serif;
    pointer-events: none;
}

.site-kicker {
    display: inline-flex;
    padding: 7px 12px;
    border: 1px solid rgba(241, 210, 122, 0.32);
    border-radius: 999px;
    color: var(--site-gold);
    background: rgba(0, 0, 0, 0.16);
    font-weight: 800;
}

.site-hero h1 {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 18px 0 14px;
    color: #fff4cf;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.08;
}

.site-hero p {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    color: #d9d3bd;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.9;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.tool-card {
    min-height: 190px;
    padding: 26px;
    border: 1px solid rgba(241, 210, 122, 0.18);
    border-radius: var(--site-radius);
    color: var(--site-ink);
    text-decoration: none;
    background: linear-gradient(160deg, var(--site-paper-soft), #efe3c5);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.tool-card:hover {
    transform: translateY(-5px);
    border-color: rgba(241, 210, 122, 0.78);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.26);
}

.tool-card .tool-icon { font-size: 30px; }
.tool-card h2 { margin: 18px 0 8px; color: #224b42; font-size: 23px; }
.tool-card p { margin: 0; color: var(--site-muted); line-height: 1.75; }
.tool-card .tool-state { display: inline-block; margin-top: 18px; color: var(--site-copper); font-size: 13px; font-weight: 800; }

.placeholder-card {
    min-height: 55vh;
    display: grid;
    place-items: center;
    padding: 42px;
    text-align: center;
    border: 1px solid var(--site-line);
    border-radius: 28px;
    background: var(--site-paper);
    color: var(--site-ink);
    box-shadow: var(--site-shadow);
}
.placeholder-card h1 { margin: 14px 0; color: #225b4f; font-size: clamp(34px, 6vw, 60px); }
.placeholder-card p { color: var(--site-muted); line-height: 1.8; }
.placeholder-card a { display: inline-block; margin-top: 18px; padding: 11px 18px; border-radius: 999px; color: #fff; background: var(--site-green); text-decoration: none; font-weight: 800; }

.footer {
    padding: 32px;
    border-top: 1px solid rgba(241, 210, 122, 0.12);
    color: #9f9478;
    text-align: center;
    background: rgba(0, 0, 0, 0.16);
}

@media (max-width: 900px) {
    .topbar { align-items: flex-start; gap: 14px; flex-direction: column; }
    .nav-menu { justify-content: flex-start; }
    .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .container, .site-container { width: min(100% - 20px, 1360px); padding-top: 20px; }
    .topbar { padding: 13px 16px; }
    .logo { font-size: 21px; }
    .nav-menu { gap: 3px; }
    .nav-menu a { padding: 7px 9px; font-size: 13px; }
    .site-hero { padding: 28px 22px; border-radius: 22px; }
    .tool-grid { grid-template-columns: 1fr; }
}