/* ==========================================================
   拼音大师 · 样式（水墨古韵，与平台视觉一致）
   ========================================================== */
.pm-container { box-sizing: border-box; width: min(var(--brand-content-width), calc(100% - 32px)); margin: 0 auto; padding: 0 0 60px; }

/* 区块标题 */
.pm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.pm-section-title { font-family: var(--brand-title-font); font-size: 21px; font-weight: 400; letter-spacing: 4px; color: #5b4c37; position: relative; padding-left: 14px; margin: 0; }
.pm-section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, #b83a2b, #8b6914); }
.pm-section-sub { font-size: 12.5px; color: var(--text-muted); letter-spacing: 1px; }

/* 卡片 */
.pm-card {
    margin: 0 0 22px; padding: 22px 24px 24px; border-radius: 12px;
    background: #fffdf8; border: 1px solid rgba(139,105,20,.2);
    box-shadow: 0 8px 26px rgba(60,50,35,.06);
    position: relative;
}
.pm-card::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(139,105,20,.09); border-radius: 8px; pointer-events: none; }
.pm-card > * { position: relative; }

/* 输入区 */
.pm-input {
    width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical;
    padding: 14px 16px; font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif; font-size: 17px; line-height: 1.9;
    color: var(--text-primary); background: #fffefb; letter-spacing: 1px;
    border: 1.5px solid rgba(139,105,20,.25); border-radius: 10px; outline: none;
    transition: border-color .25s, box-shadow .25s;
}
.pm-input:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(139,105,20,.08); }

/* 示例按钮 */
.pm-samples { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.pm-samples-label { font-size: 12.5px; color: var(--accent-gold); letter-spacing: 1px; margin-right: 2px; }
.pm-chip {
    font-family: inherit; font-size: 13px; cursor: pointer; color: #6b5a42;
    padding: 5px 13px; border-radius: 16px; background: #fbf6ec;
    border: 1px solid rgba(139,105,20,.24); transition: all .2s;
}
.pm-chip:hover { background: linear-gradient(135deg,#b83a2b,#922c21); color: #fff; border-color: transparent; transform: translateY(-1px); }

/* 选项行 */
.pm-options { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 16px 0 0; }
.pm-field { display: flex; flex-direction: column; gap: 6px; }
.pm-field.grow { flex: 1; min-width: 180px; }
.pm-field > span { font-size: 12px; color: #8b7355; letter-spacing: 1px; padding-left: 2px; }
.pm-field select, .pm-field .pm-line {
    font-family: inherit; font-size: 13.5px; color: var(--text-primary);
    padding: 9px 12px; background: #fffefb; border: 1.5px solid rgba(139,105,20,.24);
    border-radius: 9px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.pm-field select { cursor: pointer; padding-right: 26px; }
.pm-field .pm-line:focus, .pm-field select:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(139,105,20,.08); }

.pm-btn {
    font-family: inherit; font-size: 14px; letter-spacing: 2px; cursor: pointer; color: #fff;
    padding: 10px 22px; border: none; border-radius: 9px;
    background: linear-gradient(135deg,#b83a2b,#922c21);
    box-shadow: 0 5px 16px rgba(184,58,43,.26); transition: transform .2s, box-shadow .2s;
}
.pm-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(184,58,43,.34); }
.pm-btn.ghost { color: #8b7355; background: transparent; border: 1.5px solid rgba(139,105,20,.32); box-shadow: none; }
.pm-btn.ghost:hover { background: rgba(139,105,20,.08); box-shadow: none; }

/* 结果区 */
.pm-result {
    margin: 16px 0 0; padding: 16px 18px; min-height: 22px; border-radius: 10px;
    background: radial-gradient(ellipse 70% 100% at 0% 0%, rgba(184,58,43,.04), transparent 60%), #fbf7ef;
    border: 1px dashed rgba(139,105,20,.28);
    font-size: 18px; line-height: 2; letter-spacing: 2px; color: #33302a;
    font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif;
    word-break: break-all;
}
.pm-result .arr { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 10px; border-radius: 7px; background: #fffdf8; border: 1px solid rgba(139,105,20,.2); font-size: 16px; }
.pm-result .ok { color: #2e7d32; font-weight: 700; }
.pm-result .no { color: #b83a2b; font-weight: 700; }
.pm-result .mono { font-family: Consolas, 'Courier New', monospace; letter-spacing: 1px; color: #555; font-size: 14px; }
.pm-result .hit { background: rgba(184,58,43,.12); color: #912c20; border-radius: 4px; padding: 0 3px; }

/* ruby 注音 */
.pm-ruby { text-align: center; padding: 6px 4px 14px; font-size: 26px; line-height: 2.2; }
.pm-ruby ruby { margin: 0 5px; }
.pm-ruby rt { font-size: 12px; color: var(--accent-gold); letter-spacing: 0; font-family: 'Noto Serif SC', serif; }

/* 拆分表 */
.pm-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid rgba(139,105,20,.16); }
.pm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pm-table th {
    font-weight: 400; font-size: 12.5px; letter-spacing: 2px; color: #7a6647;
    background: linear-gradient(180deg,#f8f0e2,#f2e6d3); padding: 10px 12px; text-align: center;
    border-bottom: 1px solid rgba(139,105,20,.2); white-space: nowrap;
}
.pm-table td { padding: 9px 12px; text-align: center; border-bottom: 1px solid rgba(139,105,20,.1); color: #3a3025; white-space: nowrap; }
.pm-table tbody tr:last-child td { border-bottom: none; }
.pm-table tbody tr:nth-child(even) { background: rgba(139,105,20,.035); }
.pm-table .zi { font-family: 'Noto Serif SC', serif; font-size: 19px; color: #b83a2b; }
.pm-table .tone { color: var(--accent-gold); font-weight: 700; }
.pm-table .empty-cell { color: rgba(139,105,20,.45); }
.pm-tip { padding: 22px 18px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* 多音字 */
.pm-poly { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pm-poly-item {
    padding: 14px 16px; border-radius: 10px; background: #fbf7ef;
    border: 1px solid rgba(139,105,20,.18);
}
.pm-poly-zi { font-family: 'Noto Serif SC', serif; font-size: 26px; color: #b83a2b; float: left; margin: 0 14px 0 0; line-height: 1.5; }
.pm-poly-reads { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.pm-poly-read { font-size: 13.5px; color: #5b4c37; background: #fffdf8; padding: 3px 10px; border-radius: 6px; border: 1px solid rgba(139,105,20,.2); }

/* 自定义词典列表 */
.pm-dict { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pm-dict-item { display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 9px; background: #fbf7ef; border: 1px solid rgba(139,105,20,.2); font-size: 14px; }
.pm-dict-item b { font-family: 'Noto Serif SC', serif; font-size: 16px; color: #3a3025; font-weight: 400; }
.pm-dict-item i { font-style: normal; color: var(--accent-gold); letter-spacing: .5px; }
.pm-dict-item button { border: none; background: transparent; cursor: pointer; color: rgba(184,58,43,.7); font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 5px; }
.pm-dict-item button:hover { background: rgba(184,58,43,.12); color: #b83a2b; }
.pm-dict-empty { color: var(--text-muted); font-size: 13px; }

@media (max-width: 640px) {
    .pm-card { padding: 18px 15px 20px; }
    .pm-result { font-size: 16px; }
    .pm-ruby { font-size: 22px; }
    .pm-options { align-items: stretch; }
    .pm-field select, .pm-field .pm-line { width: 100%; box-sizing: border-box; }
    .pm-btn { flex: 1; }
}