/* style.css - 增强双层质感版 */
:root {
    --bg-gradient: linear-gradient(135deg, #2a0845 0%, #6441A5 50%, #feada6 100%);
    --card-bg: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --accent-cyan: #00f3ff;
    --accent-pink: #ff0055;
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
}

html, body { overflow-x: hidden; width: 100%; }
body { font-family: 'Segoe UI', sans-serif; background: var(--bg-gradient); color: var(--text-main); margin: 0; padding: 20px; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; }
.container { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 20px; padding-bottom: 50px; box-sizing: border-box; }

header { text-align: center; margin-bottom: 10px; }
header h1 { font-size: 28px; margin: 0; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
.badge { background: var(--accent-pink); font-size: 12px; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
header p { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 5px; }

.card { background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: var(--glass-border); border-radius: 16px; padding: 20px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 15px; width: 100%; box-sizing: border-box; }
.highlight-border { border: 1px solid rgba(0, 243, 255, 0.4); box-shadow: 0 0 20px rgba(0, 243, 255, 0.15); }

.input-group { display: flex; flex-direction: column; gap: 8px; position: relative; width: 100%; }
label { font-size: 13px; color: var(--accent-cyan); font-weight: 600; }
input, textarea, select { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; border-radius: 8px; padding: 12px; font-size: 14px; position: relative; z-index: 100; width: 100%; box-sizing: border-box; }
input:focus, textarea:focus, select:focus { border-color: var(--accent-cyan); background: rgba(0, 0, 0, 0.4); outline: none; }

.btn-main { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; padding: 14px; border-radius: 8px; color: white; font-weight: bold; font-size: 16px; cursor: pointer; position: relative; z-index: 101; width: 100%; }
.btn-copy { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; margin-left: auto; white-space: nowrap; }

.grid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.flex-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.footer { text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 20px; }

/* === 核心：找回双层背景质感 === */
#render-canvas {
    width: 1080px; height: 1440px;
    background: #fff; /* 这里会被JS换成你的背景图 */
    position: relative;
    flex-shrink: 0; display: flex; flex-direction: column;
    overflow: hidden; 
}

.card-container { 
    width: 100%; height: 100%; padding: 40px; /* 外边距：露出更多背景图 */
    box-sizing: border-box; display: flex; flex-direction: column; 
}

.inner-card { 
    /* 关键：高不透明度白色，形成鲜明对比 */
    background: #ffffff; 
    border-radius: 24px; /* 更圆润 */
    flex: 1; 
    padding: 50px 60px; 
    display: flex; flex-direction: column; 
    /* 关键：立体投影 */
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.02); 
    position: relative; overflow: hidden; 
}

.novel-font { font-family: "Source Han Serif CN", "Songti SC", "SimSun", serif; }
.body-text { display: block; flex: 1; }
.body-text p { font-size: 38px; line-height: 1.7; text-align: justify; text-indent: 2em; margin-top: 0; margin-bottom: 15px; font-weight: 500; }

.cover-card .inner-card { padding-top: 40px !important; }
.cover-card .main-title { font-size: 82px !important; margin-bottom: 20px !important; line-height: 1.15 !important; font-weight: 900 !important; }
.cover-card .cover-header { margin-bottom: 30px !important; border-bottom: 3px dashed rgba(0,0,0,0.1) !important; padding-bottom: 20px !important; }
.cover-card .body-text p { font-size: 54px !important; line-height: 1.5 !important; font-weight: 600 !important; margin-bottom: 30px !important; }

.cover-header { text-align: center; margin-bottom: 30px; border-bottom: 2px dashed rgba(0,0,0,0.1); padding-bottom: 20px; }
.main-title { font-size: 68px; font-weight: 900; line-height: 1.2; margin-bottom: 15px; letter-spacing: -2px; }
.type-tag { display: inline-block; font-size: 28px; color: #666; background: #f4f4f4; padding: 10px 30px; border-radius: 50px; font-weight: bold; }
.page-indicator { position: absolute; top: 40px; right: 50px; font-size: 26px; color: rgba(255,255,255,0.9); font-family: sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.footer-inside { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid rgba(0,0,0,0.06); font-family: sans-serif; color: #888; font-size: 26px; min-height: 50px; }
.header-outside { display: flex; justify-content: space-between; align-items: center; padding: 15px 10px 25px 10px; height: 60px; font-family: -apple-system, sans-serif; color: #333; font-size: 30px; font-weight: 700; text-shadow: 0 1px 2px rgba(255,255,255,0.8); }
.keyword-footer { width: 100%; text-align: center; font-size: 34px; font-weight: bold; padding: 25px 0; margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.1); font-family: -apple-system, sans-serif; }

@media screen and (max-width: 768px) {
    body { padding: 10px; } .container { padding: 5px; padding-bottom: 80px; }
    .grid-row { grid-template-columns: 1fr !important; gap: 10px; }
    .flex-row { flex-wrap: wrap; }
    input, textarea, select, button { font-size: 16px !important; }
    #titleColorInput, #bodyColorInput { height: 45px !important; }
    header h1 { font-size: 22px; } .card { padding: 15px; }
}