:root { --primary-red: #c20000; --primary-gold: linear-gradient(90deg, #d8995e, #bb7330); --bg-color: #f9f9f9; --header-height: 85px; --header-hidden-height: 15px }
* { box-sizing: border-box }
a { text-decoration: none; color: inherit }
body.full-view-mode { padding-top: var(--header-hidden-height) }
.container { max-width: 600px; margin: 0 auto; padding: 20px; min-height: 80vh }
.hidden { display: none !important }
.system-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); z-index: 89; display: flex; align-items: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
.system-header.hidden { transform: translateY(-100%) }
.sys-scroll-container { flex: 1; overflow-x: auto; white-space: nowrap; padding-left: 10px; -webkit-overflow-scrolling: touch; display: flex; align-items: center }
.sys-scroll-container::-webkit-scrollbar { display: none }
.system-header::-webkit-scrollbar { display: none }
.sys-tab { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 8px; color: #888; transition: all 0.3s; opacity: 0.7; text-decoration: none; min-width: 60px }
.sys-tab img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 2px solid transparent; margin-bottom: 4px; transition: all 0.3s; background: #f0f0f0 }
.sys-tab span { font-size: 11px; font-weight: 500 }
.sys-tab.active { opacity: 1; color: var(--primary-red) }
.sys-tab.active img { border-color: var(--primary-red); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(194, 0, 0, 0.15) }
.header-toggle-btn { padding: 0 15px; color: #999; font-size: 16px; cursor: pointer; background: transparent; border: none; border-left: 1px solid #eee; height: 60px }
.header-trigger-zone { position: fixed; top: 0; left: 0; width: 100%; height: 15px; z-index: 901; display: none; justify-content: center; cursor: pointer }
.header-trigger-zone.active { display: flex }
.header-handle { width: 60px; height: 6px; background: rgba(0,0,0,0.1); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; transition: background 0.2s }
.header-trigger-zone:hover .header-handle { background: rgba(194, 0, 0, 0.5) }
.intro-box { text-align: center; margin-bottom: 20px }
.intro-box h1 { color: var(--primary-red); font-size: 1.8em; margin: 0; letter-spacing: 1px }
.intro-box p { color: #888; font-size: 0.9em; margin-top: 5px }
.mode-switch { display: flex; justify-content: center; margin-bottom: 30px; background: #e0e0e0; border-radius: 25px; padding: 4px; width: fit-content; margin: 0 auto 30px auto }
.mode-btn { padding: 8px 20px; border-radius: 20px; cursor: pointer; color: #666; font-size: 14px }
.mode-btn.active { background: #fff; color: var(--primary-red); font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.1) }
#auto-mode-area { text-align: center; min-height: 350px; position: relative }
#divinetool { width: 370px; height: auto; cursor: pointer; transform-origin: center bottom; margin-top: 20px; transition: transform 0.1s }
.ethereal-text { font-family: "Kaiti", "STKaiti", "KaiTi_GB2312", "Songti SC", serif; font-size: 1.4em; color: #d4af37; font-weight: bold; text-shadow: 0 0 10px rgba(212, 175, 55, 0.4), 0 0 20px rgba(255, 255, 255, 0.2); display: inline-block; opacity: 0; white-space: nowrap; animation: mistReveal 1.5s ease-in-out forwards }
@keyframes mistReveal {
    0% { opacity: 0; filter: blur(4px); transform: scale(0.95) translateY(5px) }
    20% { opacity: 1; filter: blur(0px); transform: scale(1) translateY(0) }
    80% { opacity: 1; filter: blur(0px); transform: scale(1) translateY(0) }
    100% { opacity: 0; filter: blur(5px); transform: scale(1.05) translateY(-5px) }
}

#divineindex { display: none; font-size: 1.5em; color: var(--primary-red); font-weight: bold; margin-top: 10px; min-height: 50px; transition: all 0.3s; display: flex; align-items: center; justify-content: center }
#jiaobei-area { margin-top: 20px; min-height: 120px; display: none }
.cup-img { width: 70px; height: auto; margin: 0 10px }
#btn-jiaobei { display: none; background: var(--primary-gold); color: #fff; border: none; padding: 10px 40px; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 20px; box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4) }
#txtresult { display: none; font-size: 1.2em; font-weight: bold; margin-top: 15px; color: #333; background: rgba(255,255,255,0.8); padding: 10px; border-radius: 8px }
.sys-intro-card { margin-top: 40px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #f0f0f0; text-align: left }
.sys-cover-img { width: 100%; height: auto; display: block }
.sys-info-body { padding: 20px }
.sys-info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px dashed #eee; padding-bottom: 10px }
.sys-info-title { font-size: 1.2em; font-weight: bold; color: #333 }
.sys-info-badge { background: #fff0f0; color: var(--primary-red); padding: 4px 10px; border-radius: 12px; font-size: 0.8em; font-weight: normal }
.sys-info-desc { font-size: 0.95em; color: #666; line-height: 1.8; text-align: justify }
#list-mode-area { display: none }
.poem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.poem-btn { border: 1px solid #ddd; background: #fffcf6; padding: 10px 5px; text-align: center; border-radius: 8px; font-size: 13px; color: #333; cursor: pointer }
.poem-btn:hover { border-color: var(--primary-red); color: var(--primary-red) }
.dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 99; display: none }
.custom-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background: #fff; border-radius: 12px; padding: 20px; z-index: 1000; display: none; max-height: 81vh; overflow-y: auto }
.lot-paper { border: 2px solid #e0c0a0; background: #fffaf0; padding: 15px; margin-top: 10px }
.lot-paper img { border-radius: 5px; max-width: 100% }
.lot-title { text-align: center; color: var(--primary-red); font-size: 1.2em; font-weight: bold; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px }
.lot-content { font-size: 1em; line-height: 1.6 }
.preset-tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px }
.preset-tag { background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 20px; padding: 6px 12px; font-size: 14px; color: #666; cursor: pointer; transition: all 0.2s; user-select: none }
.preset-tag:hover { background: #fff0f0; color: var(--primary-red); border-color: #ffcccc }
.preset-tag:active { transform: scale(0.98) }
.btn-ai { width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px; border-radius: 8px; margin-top: 15px; font-weight: bold; cursor: pointer }
#chat-dialog { background: #f5f5f5; padding: 0; display: flex; flex-direction: column; height: 80vh; max-height: 800px; overflow: hidden }
.chat-header { background: #ededed; padding: 5px; border-bottom: 1px solid #dcdcdc; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: bold; color: #000 }
.chat-body { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px }
.message-row { display: flex; align-items: flex-start; margin-bottom: 10px }
.message-row.user { flex-direction: row-reverse }
.avatar { width: 40px; height: 40px; border-radius: 4px; background-size: cover; flex-shrink: 0 }
.avatar.ai { background-image: url('images/avatar_ai.png'); background-color: #ddd; margin-right: 10px }
.avatar.user { background-image: url('images/avatar_user.png'); background-color: #ddd; margin-left: 10px }
.bubble { max-width: 70%; padding: 10px 14px; border-radius: 6px; font-size: 15px; line-height: 1.5; position: relative; word-wrap: break-word }
.bubble.ai { background: #fff; color: #000; border: 1px solid #ededed }
.bubble.ai::before { content: ""; position: absolute; left: -6px; top: 14px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #fff }
.bubble.user { background: #95ec69; color: #000 }
.bubble.user::before { content: ""; position: absolute; right: -6px; top: 14px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #95ec69 }
.system-msg { text-align: center; font-size: 12px; color: #b2b2b2; margin: 10px 0; background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 4px; align-self: center }
.chat-footer { background: #f7f7f7; border-top: 1px solid #dcdcdc; padding: 10px; display: flex; align-items: center; gap: 8px }
.chat-input { flex: 1; height: 40px; border: 1px solid #ddd; border-radius: 4px; padding: 5px 10px; font-size: 15px; outline: none; background: #fff }
.chat-input:focus { border-color: #95ec69 }
.btn-send { background: #07c160; color: white; border: none; padding: 0 15px; height: 40px; border-radius: 4px; font-weight: bold; cursor: pointer; width: 70px; transition: all 0.3s }
.btn-send:active { background: #06ad56 }
.btn-send:disabled { background: #e0e0e0; color: #aaa; cursor: not-allowed }
.admin-copy-btn { background: #f0ad4e; color: white; border: none; border-radius: 4px; padding: 5px 10px; font-size: 12px; cursor: pointer; margin-left: 10px; display: none }
.btn-card-auth { background: #6c757d; color: white; border: none; padding: 0 12px; height: 40px; border-radius: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 5px; transition: background 0.3s }
.btn-card-auth.active { background: #28a745; box-shadow: 0 0 5px rgba(40, 167, 69, 0.5) }
:root { --header-height: 85px; --header-hidden-height: 15px }
body { margin: 0; padding: 0; padding-top: var(--header-height); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: linear-gradient(180deg, #fef4df 0%, #f9f9f9 100%); color: #333; -webkit-tap-highlight-color: transparent; transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
body.full-view-mode { padding-top: var(--header-hidden-height) }
.system-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); z-index: 89; display: flex; align-items: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
.system-header.hidden { transform: translateY(-100%) }
.sys-scroll-container { flex: 1; overflow-x: auto; white-space: nowrap; padding-left: 10px; -webkit-overflow-scrolling: touch; display: flex; align-items: center }
.sys-scroll-container::-webkit-scrollbar { display: none }
.header-toggle-btn { padding: 0 15px; color: #666; font-size: 18px; cursor: pointer; background: transparent; border: none; border-left: 1px solid #eee; height: 60px; width: 60px }
.header-trigger-zone { position: fixed; top: 0; left: 0; width: 100%; height: 20px; z-index: 901; display: flex; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s }
.header-trigger-zone.active { opacity: 1; pointer-events: auto }
.header-handle { width: 60px; height: 6px; background: rgba(0,0,0,0.2); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1) }
.header-bottom-handle { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 60px; height: 12px; display: flex; justify-content: center; cursor: pointer; z-index: 902 }
.header-bottom-handle::after { content: ''; width: 40px; height: 4px; background: #e0e0e0; border-radius: 4px; margin-top: 2px }
.full-menu-drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(255,255,255,0.98); backdrop-filter: blur(15px); z-index: 2000; transform: translateY(-100%); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column }
.full-menu-drawer.open { transform: translateY(0) }
.full-menu-header { padding: 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 16px }
.full-menu-grid { padding: 20px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; overflow-y: auto }
.grid-item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: #666 }
.grid-item img { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 6px; background: #f5f5f5 }
.grid-item span { font-size: 12px }
.sys-tab { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 8px; color: #888; transition: all 0.3s; opacity: 0.7; text-decoration: none; min-width: 60px }
.sys-tab img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #f0f0f0 }
.sys-tab span { font-size: 11px; font-weight: 500 }
.sys-tab.active { opacity: 1; color: var(--primary-red) }
.sys-tab.active img { border-color: var(--primary-red); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(194, 0, 0, 0.15) }
.dialog-close { display: none !important }
.poem-btn span { font-size: 16px; font-weight: bold; background-color: cornsilk; color: #F44336; border-radius: 5px; padding: 0px 5px }
.custom-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background-color: #fff; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); z-index: 1000; padding: 40px 25px 25px 25px; }
.dialog-close2 { position: absolute; top: 10px; right: 15px; font-size: 24px; color: #aaa; cursor: pointer; transition: color 0.2s; }
.dialog-close2:hover { color: #333; }
#dialog-content { max-height: 60vh; overflow-y: auto; color: #333;}