/* =====================================================
   访客留言本 —— 2026-09 白底版式（对齐全站线框语言）
   白底 + 1px #9db8d2 面板线框 + #336699 面板头；
   留言卡片紧凑化（高度比原版边框图窗口压缩约 1/4）；
   ajax：#lyList 内翻页/跳页/提交均局部刷新不跳页。
   ===================================================== */
.ly-page { padding: 12px 0 20px; }

/* 提交反馈提示 */
.ly-msg { max-width: 760px; margin: 0 auto 12px; padding: 8px 12px; border-radius: 3px; font-size: 13px; }
.ly-msg.ok  { background: #EAF7EC; color: #2E7D32; border: 1px solid #7FBF8B; }
.ly-msg.err { background: #FDEEEE; color: #990000; border: 1px solid #CC9999; }

/* ---------- 通用面板 ---------- */
.ly-panel, .ly-list-panel {
    max-width: 760px; margin: 0 auto 16px;
    background: #fff; border: 1px solid #9db8d2; border-radius: 3px;
    box-sizing: border-box; overflow: hidden;
}
.ly-panel-h, .ly-list-h {
    background: #F2F6FB; border-bottom: 2px solid #336699;
    color: #172E5B; font-size: 14px; font-weight: bold; letter-spacing: 1px;
    padding: 9px 14px;
}
.ly-panel-b { padding: 12px 14px 14px; }
.ly-list-b  { padding: 0 14px; }

/* ---------- 表单 ---------- */
.ly-form-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
.ly-form-tb td { padding: 5px 6px; color: #2C3E50; vertical-align: middle; }
.lylb { white-space: nowrap; width: 64px; text-align: right; color: #2C3E50; font-weight: bold; }
.ly-form-tb input[type=text], .ly-form-tb textarea {
    font-size: 13px; font-family: inherit; color: #2C3E50;
    border: 1px solid #B9CBDD; border-radius: 3px; background: #FBFDFF;
    padding: 5px 8px; max-width: 100%; box-sizing: border-box;
}
.ly-form-tb input[type=text]:focus, .ly-form-tb textarea:focus {
    outline: none; border-color: #336699; background: #fff;
    box-shadow: 0 0 0 2px rgba(51,102,153,.12);
}
.ly-form-tb textarea { width: 100%; resize: vertical; }
.ly-form-tb input[type=text].ly-wide { width: 100%; }
.ly-form-tb select { font-size: 13px; padding: 3px 4px; border: 1px solid #B9CBDD; border-radius: 3px; background: #fff; }
.ly-form-tb img { vertical-align: middle; }
.ly-form-tb a { color: #004080; text-decoration: none; margin-left: 6px; }
.ly-form-tb a:hover { color: #C0392B; text-decoration: underline; }
.ly-hint { color: #8A98A8; font-size: 12px; }
.ly-mood { margin: 0 8px 0 0; white-space: nowrap; }
.ly-mood img { vertical-align: middle; }
.ly-btnrow { padding-top: 10px !important; }

/* 按钮 */
.ly-btn {
    padding: 6px 22px; margin-right: 10px;
    background: #336699; color: #fff; border: 0; border-radius: 3px;
    font-size: 13px; letter-spacing: 2px; cursor: pointer;
}
.ly-btn:hover { background: #28527C; }
.ly-btn2 { background: #EDF1F6; color: #2C3E50; border: 1px solid #B9CBDD; }
.ly-btn2:hover { background: #E2E9F2; }

/* ---------- 分页条 ---------- */
.ly-nav {
    max-width: 760px; margin: 0 auto 10px;
    background: #fff; border: 1px solid #9db8d2; border-radius: 3px;
    font-size: 13px; color: #2C3E50;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    padding: 7px 12px; box-sizing: border-box;
}
.ly-nav a { color: #004080; text-decoration: none; }
.ly-nav a:hover { color: #C0392B; text-decoration: underline; }
.ly-nav-write { font-weight: bold; }
.ly-nav-write img { vertical-align: -3px; margin-right: 3px; }
.ly-nav-info { color: #5A6B80; }
.ly-goto { margin-left: auto; color: #5A6B80; white-space: nowrap; }
.ly-goto input {
    width: 44px; border: 1px solid #B9CBDD; border-radius: 3px;
    background: #FBFDFF; font-size: 13px; padding: 2px 5px; text-align: center;
}

/* ---------- 留言卡片 ---------- */
.ly-item { border-bottom: 1px solid #E8EEF4; padding: 10px 2px; }
.ly-item:last-child { border-bottom: 0; }
.ly-item-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.ly-no {
    background: #336699; color: #fff; font-size: 12px; font-weight: bold;
    padding: 2px 9px; border-radius: 10px; white-space: nowrap;
}
.ly-time { color: #8A98A8; font-size: 12px; }
.ly-time img { vertical-align: -2px; margin-right: 3px; }
.ly-meta { margin-left: auto; color: #5A6B80; font-size: 12px; white-space: nowrap; }
.ly-meta img { vertical-align: -2px; margin: 0 2px 0 8px; }
.ly-meta a { color: #004080; text-decoration: none; margin-left: 2px; }
.ly-meta a:hover { color: #C0392B; text-decoration: underline; }

.ly-item-b { display: flex; gap: 12px; }
.ly-who {
    flex: 0 0 88px; text-align: center; color: #2C3E50; font-size: 12px;
    background: #F7FAFD; border: 1px solid #E8EEF4; border-radius: 3px;
    padding: 8px 4px; align-self: flex-start;
}
.ly-who img { display: block; margin: 0 auto 5px; }
.ly-who-name { word-break: break-all; }
.ly-body { flex: 1; min-width: 0; }
.ly-subj { color: #172E5B; font-size: 13px; padding-bottom: 5px; border-bottom: 1px dashed #E2E8EE; }
.ly-subj img { vertical-align: -2px; margin-right: 4px; }
.ly-cont {
    color: #2C3E50; font-size: 13px; line-height: 1.8; padding-top: 6px;
    word-wrap: break-word; word-break: break-word;
}
.ly-cont img { vertical-align: middle; margin-right: 5px; }
.ly-secret { color: #990000; }
.ly-empty { text-align: center; padding: 30px 0; color: #8A98A8; font-size: 13px; }

/* ---------- 头像选择浮层（页内展开，替代原新窗口） ---------- */
.ly-face-btn {
    margin-left: 8px; padding: 4px 12px; font-size: 12px;
    background: #EDF1F6; color: #2C3E50;
    border: 1px solid #B9CBDD; border-radius: 3px; cursor: pointer;
    vertical-align: middle;
}
.ly-face-btn:hover { background: #E2E9F2; color: #172E5B; }

.ly-facemask {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(23, 46, 91, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.ly-facemask[hidden] { display: none; }
.ly-facelayer {
    background: #fff; border: 1px solid #9db8d2; border-radius: 6px;
    box-shadow: 0 12px 40px rgba(23, 46, 91, .28);
    width: 600px; max-width: 100%; max-height: min(82vh, 660px);
    display: flex; flex-direction: column; overflow: hidden;
}
.ly-face-h {
    background: #F2F6FB; border-bottom: 2px solid #336699;
    color: #172E5B; font-size: 14px; font-weight: bold; letter-spacing: 1px;
    padding: 10px 14px; flex: none;
    display: flex; align-items: center; justify-content: space-between;
}
.ly-face-x {
    background: none; border: 0; cursor: pointer;
    color: #5A6B80; font-size: 20px; line-height: 1; padding: 2px 6px;
    border-radius: 3px;
}
.ly-face-x:hover { background: #E2E9F2; color: #C0392B; }
.ly-face-grid {
    overflow: auto; padding: 12px 14px;
    display: grid; grid-template-columns: repeat(auto-fill, 62px);
    gap: 8px; justify-content: space-between;
}
.ly-face-cell {
    background: #F7FAFD; border: 1px solid #E8EEF4; border-radius: 4px;
    padding: 6px 2px 4px; cursor: pointer; font-family: inherit;
    text-align: center;
}
.ly-face-cell img { display: block; margin: 0 auto 3px; }
.ly-face-cell span { font-size: 11px; color: #5A6B80; }
.ly-face-cell:hover { border-color: #336699; background: #F2F6FB; }
.ly-face-cell.cur { border-color: #336699; background: #E8F0F8; box-shadow: 0 0 0 2px rgba(51,102,153,.15); }
.ly-face-cell.cur span { color: #172E5B; font-weight: bold; }

/* ---------- 移动端 ---------- */
@media (max-width: 660px) {
    .ly-form-tb, .ly-form-tb tbody, .ly-form-tb tr, .ly-form-tb td { display: block; width: 100%; box-sizing: border-box; }
    .lylb { text-align: left; padding: 6px 0 2px; width: auto; }
    .ly-form-tb input[type=text] { width: 100%; }
    .ly-btnrow { text-align: center; }
    .ly-nav-info { display: none; }      /* 手机收窄：页码信息让位给翻页链接 */
    .ly-item-b { flex-direction: column; }
    .ly-who { flex: none; display: flex; align-items: center; text-align: left; gap: 8px; padding: 6px 8px; }
    .ly-who img { margin: 0; }
    .ly-meta { margin-left: 0; }
}