/* 一言古诗词 · 样式（朱红金褐，纸白底，与平台视觉一致） */
.yy-container { box-sizing: border-box; width: min(var(--brand-content-width), calc(100% - 32px)); margin: 0 auto; padding: 0 0 60px; }

/* ---------- 状态条 ---------- */
.yy-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0 14px; flex-wrap: wrap; }
.yy-meta { font-size: 12.5px; color: var(--text-muted); letter-spacing: .5px; }
.yy-stats { font-size: 12.5px; color: var(--accent-gold); letter-spacing: .5px; }

/* ---------- 说明条 ---------- */
.yy-note {
    font-size: 13px; line-height: 1.85; color: #5c5040; letter-spacing: .2px;
    background: linear-gradient(180deg,#fdf8ee,#faf3e4); border: 1px solid rgba(139,105,20,.22);
    border-left: 3px solid #b83a2b; border-radius: 10px; padding: 13px 18px; margin: 0 0 22px;
}
.yy-note b { color: #922c21; }
.yy-note code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12px; color: #8b6914; background: rgba(139,105,20,.08); padding: 1px 5px; border-radius: 4px; }

/* ---------- 布局 ---------- */
.yy-layout { display: grid; grid-template-columns: 232px 1fr; gap: 22px; align-items: start; }

/* ---------- 分类树 ---------- */
.yy-side {
    background: #fffdf8; border: 1px solid rgba(139,105,20,.22); border-radius: 12px;
    box-shadow: 0 8px 26px rgba(60,50,35,.06); padding: 16px 14px; position: sticky; top: 14px;
}
.yy-side-title { font-family: var(--brand-title-font); font-size: 16px; letter-spacing: 2px; color: #8b6914; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(139,105,20,.16); }
.yy-tree { display: flex; flex-direction: column; gap: 3px; }
.yy-group { margin: 8px 0 2px; font-size: 12px; color: rgba(139,105,20,.7); letter-spacing: 1.5px; padding: 0 8px; }
.yy-group:first-child { margin-top: 0; }
.yy-node {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
    width: 100%; text-align: left; font-family: inherit; font-size: 14px; color: #3a3025;
    padding: 8px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent;
    transition: background .2s, color .2s, border-color .2s;
}
.yy-node:hover { background: #f7efe0; color: #b83a2b; }
.yy-node.on { background: linear-gradient(135deg,#b83a2b,#922c21); color: #fff; box-shadow: 0 4px 12px rgba(184,58,43,.24); }
.yy-node .n { font-size: 11.5px; color: rgba(139,105,20,.7); }
.yy-node.on .n { color: rgba(255,255,255,.82); }

/* ---------- 主卡片 ---------- */
.yy-main { min-width: 0; }
.yy-card { background: #fffdf8; border: 1px solid rgba(139,105,20,.22); border-radius: 12px; box-shadow: 0 8px 26px rgba(60,50,35,.06); }

.yy-yiyan { padding: 40px 34px 34px; position: relative; min-height: 190px; display: flex; flex-direction: column; justify-content: center; }
.yy-yiyan::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(139,105,20,.12); border-radius: 8px; pointer-events: none; }
.yy-yiyan-content {
    font-family: var(--brand-title-font); font-size: clamp(24px, 3.2vw, 40px); line-height: 1.7;
    color: #3a3025; letter-spacing: 3px; text-align: center; word-break: break-word;
}
.yy-yiyan-meta { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap; font-size: 13.5px; letter-spacing: 1px; }
.yy-yiyan-meta .yy-ori { color: #8b6914; }
.yy-yiyan-meta .yy-auth { color: var(--text-secondary); }
.yy-yiyan-meta .yy-cat { color: #fff; background: linear-gradient(135deg,#b83a2b,#922c21); padding: 3px 12px; border-radius: 20px; font-size: 12px; letter-spacing: 1.5px; }

/* ---------- 操作按钮 ---------- */
.yy-actions { margin: 18px 0 22px; text-align: center; }
.yy-btn {
    font-family: var(--brand-title-font); font-size: 17px; letter-spacing: 3px; cursor: pointer;
    padding: 12px 40px; border: none; border-radius: 10px; color: #fff;
    background: linear-gradient(135deg,#b83a2b,#922c21); box-shadow: 0 6px 18px rgba(184,58,43,.26);
    transition: transform .2s, box-shadow .2s;
}
.yy-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(184,58,43,.34); }
.yy-btn:active { transform: translateY(0); }

/* ---------- 格式页签 ---------- */
.yy-tabs { display: flex; gap: 6px; margin: 0 0 16px; border-bottom: 1px solid rgba(139,105,20,.2); flex-wrap: wrap; }
.yy-tabs button {
    font-family: var(--brand-title-font); font-size: 16px; letter-spacing: 2px; cursor: pointer;
    padding: 10px 20px; border: none; background: transparent; color: #8b7355; position: relative;
    transition: color .22s;
}
.yy-tabs button:hover { color: #b83a2b; }
.yy-tabs button.on { color: #b83a2b; }
.yy-tabs button.on::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg,#b83a2b,#8b6914); }

/* ---------- SVG 参数滑块 ---------- */
.yy-svgctrl { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; background: #fbf6ec; border: 1px solid rgba(139,105,20,.18); border-radius: 10px; }
.yy-range { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6b5a42; letter-spacing: .5px; }
.yy-range input[type="range"] { width: 160px; accent-color: #b83a2b; }
.yy-range output { font-family: var(--brand-title-font); color: #8b6914; font-size: 15px; min-width: 34px; text-align: right; }

/* ---------- 输出面板 ---------- */
.yy-panel { background: #fffdf8; border: 1px solid rgba(139,105,20,.22); border-radius: 12px; box-shadow: 0 8px 26px rgba(60,50,35,.06); padding: 16px; overflow: auto; }
.yy-out {
    margin: 0; font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.7;
    color: #3a3025; white-space: pre-wrap; word-break: break-word;
}
.yy-svgbox { overflow: auto; padding: 6px; background: #fff; border-radius: 8px; border: 1px dashed rgba(139,105,20,.28); }
.yy-svgbox svg { display: block; }
.yy-pngbox { text-align: center; }
.yy-pngbox img { max-width: min(100%, 420px); border-radius: 10px; border: 1px solid rgba(139,105,20,.2); background: #fff; }
.yy-plain { font-family: inherit; white-space: pre-wrap; }
.yy-hint { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 0; letter-spacing: .3px; }

/* ---------- API 演示 ---------- */
.yy-api { margin-top: 26px; padding: 22px 24px 24px; }
.yy-api-title { font-family: var(--brand-title-font); font-size: 17px; letter-spacing: 2px; color: #8b6914; margin: 0 0 10px; }
.yy-api-tip { font-size: 13px; line-height: 1.85; color: #5c5040; margin: 0 0 14px; }
.yy-api-tip code, .yy-api-params code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12px; color: #8b6914; background: rgba(139,105,20,.08); padding: 1px 5px; border-radius: 4px; }
.yy-api-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.yy-api-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.yy-api-list .label { flex: none; color: var(--text-secondary); letter-spacing: .5px; min-width: 96px; }
.yy-api-list code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12.5px; color: #922c21; background: #fbf3e6; border: 1px solid rgba(139,105,20,.16); border-radius: 6px; padding: 4px 9px; }
.yy-api-params { font-size: 12.5px; color: var(--text-muted); line-height: 1.9; margin: 14px 0 0; }

.yy-empty, .yy-loading { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }

@media (max-width: 820px) {
    .yy-layout { grid-template-columns: 1fr; }
    .yy-side { position: static; }
    .yy-yiyan { padding: 30px 20px 26px; }
    .yy-tabs button { padding: 9px 12px; font-size: 15px; }
    .yy-range input[type="range"] { width: 120px; }
}