/* ============================================================
   HitokotoGo — Minimal / Industrial 前端样式
   单色中性色 · 发丝线边框 · 非对称网格 · 克制微交互
   ============================================================ */

:root {
    /* 极简中性色板（奶白 / 冷灰 / 炭黑） */
    --bg: #fafaf9;
    --surface: #ffffff;
    --border: #e7e5e4;
    --border-strong: #d6d3d1;
    --text: #1c1917;
    --text-2: #57534e;
    --text-3: #a8a29e;
    --accent: #1c1917;
    --accent-text: #fafaf9;

    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Cascadia Mono", monospace;
    --sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.mono {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dim { color: var(--text-3); }

/* ---------- 顶部栏 ---------- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px;
}

.wordmark {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.wordmark strong { font-weight: 800; }

.nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.nav a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-2);
    transition: color 0.2s ease-out;
}

.nav a:hover { color: var(--text); }

.nav .arrow { font-size: 11px; color: var(--text-3); }

/* ---------- 主按钮（唯一的高对比强调组件） ---------- */
.btn {
    appearance: none;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 11px 22px;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.btn:hover { opacity: 0.82; }

.btn:active { transform: translateY(1px); }

/* ============================================================
   首页 — 大字号排版 + 大面积留白
   ============================================================ */
.index-page body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.index-page .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: transparent;
}

/* 左侧竖向标注：克制的“科技感”细节 */
.edge {
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--text-3);
    z-index: 5;
    pointer-events: none;
}

.stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 120px clamp(24px, 8vw, 128px) 120px;
    position: relative;
    z-index: 1;
}

.quote-text {
    margin: 0;
    max-width: 21em;                    /* 非对称：句子只占版面约 2/3 */
    /* 字号随句子长度自适应：JS 设置 --quote-scale（0.55 ~ 1） */
    font-size: calc(clamp(1.9rem, 5vw, 4.4rem) * var(--quote-scale, 1));
    font-weight: 300;                   /* 大字号 + 低字重 */
    letter-spacing: -0.035em;
    line-height: var(--quote-lh, 1.22); /* 长句行高略增 */
    color: var(--text);
    transition: font-size 0.25s ease-out, line-height 0.25s ease-out;
}

.quote-meta {
    margin-top: 30px;
    font-size: 15px;
    color: var(--text-2);
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

/* 底部栏 */
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px;
    z-index: 10;
    background: transparent;
}

.footer-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-2);
    font-size: 12px;
}

.footer-meta .sep { color: var(--text-3); }

/* 背景图模式：图片尽量通透，仅保留极轻的雾化层保证文字可读 */
body.has-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.has-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(250, 250, 249, 0.45); /* 中性默认：无法采样时保证深色文字可读 */
    pointer-events: none;
    z-index: 0;
}

/* 暗色背景图 → 白色文字主题 */
body.has-bg.text-on-dark {
    --text: #fafaf9;
    --text-2: rgba(250, 250, 249, 0.82);
    --text-3: rgba(250, 250, 249, 0.55);
    --accent: #fafaf9;
    --accent-text: #1c1917;
}

body.has-bg.text-on-dark::before {
    background: rgba(28, 25, 23, 0.25);
}

/* 亮色背景图 → 黑色文字主题 */
body.has-bg.text-on-light {
    --text: #1c1917;
    --text-2: rgba(28, 25, 23, 0.78);
    --text-3: rgba(28, 25, 23, 0.52);
    --accent: #1c1917;
    --accent-text: #fafaf9;
}

body.has-bg.text-on-light::before {
    background: rgba(250, 250, 249, 0.30);
}

/* ============================================================
   统计页 — 非对称网格 + 数据行
   ============================================================ */
.stats-page body {
    padding: 32px clamp(20px, 5vw, 72px) 96px;
}

.stats {
    max-width: 1080px;
    margin: 0 auto;
}

.stats-hero { margin-bottom: 56px; }

.kicker {
    margin: 0 0 14px;
    color: var(--text-3);
}

.stats-title {
    margin: 0;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.stats-subtitle {
    margin: 18px 0 0;
    color: var(--text-2);
}

.stats-subtitle a {
    color: var(--text-2);
    border-bottom: 1px solid var(--border-strong);
    transition: color 0.2s ease-out;
}

.stats-subtitle a:hover { color: var(--text); }

/* 非对称概览：总数面板 3 : 状态面板 2 */
.stats-overview {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.panel {
    background: var(--surface);
    padding: 34px 36px;
}

.panel-label {
    margin: 0 0 12px;
    color: var(--text-3);
}

.total-number {
    margin: 0;
    font-family: var(--mono);
    font-size: clamp(3rem, 8vw, 5.8rem);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.panel-note {
    margin: 24px 0 0;
    font-size: 12px;
    color: var(--text-3);
}

/* 状态区：发丝线分隔的数据行，而非等宽卡片 */
.panel-status { display: flex; flex-direction: column; justify-content: center; }

.status-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}

.status-row:first-child { padding-top: 4px; }
.status-row:last-child { border-bottom: none; }

.status-row > .mono { color: var(--text-2); }

.status-value {
    font-size: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: right;
    white-space: nowrap;
}

/* 分类区：发丝线数据行 */
.category-section { margin-top: 80px; }

.category-section .kicker { margin-bottom: 20px; }

.category-list { border-top: 1px solid var(--border); }

.category-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 15px 10px;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s ease-out;
}

.category-row:hover { background: var(--surface); }

.category-key {
    font-family: var(--mono);
    font-size: 12px;
    text-align: center;
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 0;
    width: 40px;
}

.category-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.category-name {
    font-size: 15px;
    font-weight: 500;
}

.category-desc {
    font-size: 12px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-count {
    font-family: var(--mono);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    text-align: right;
}

/* ============================================================
   文档页
   ============================================================ */
.docs-page body {
    padding: 32px clamp(20px, 5vw, 72px) 96px;
}

.docs {
    max-width: 1080px;
    margin: 0 auto;
}

.docs-title {
    margin: 0 0 40px;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

/* Swagger 内嵌样式微调，融入中性底色 */
.docs .swagger-ui .wrapper { padding: 0; }
.docs .swagger-ui .info .title { font-weight: 500; }
.docs .swagger-ui .opblock { border-radius: 6px; }

/* ---------- 加载 / 错误 ---------- */
.loading,
.error-msg {
    padding: 40px 0;
    margin: 0;
    font-size: 13px;
    color: var(--text-3);
}

.error-msg { color: #b91c1c; }

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
    .site-header { padding: 16px 20px; }
    .site-footer { padding: 16px 20px; }
    .stage { padding: 110px 20px 110px; }
    .edge { display: none; }
    .nav { gap: 16px; }

    .stats-overview { grid-template-columns: 1fr; }
    .panel { padding: 26px 22px; }
    .category-row { grid-template-columns: 44px 1fr auto; gap: 14px; }
    .category-desc { display: none; }
}