/* ============================================================
   海报渲染样式 - 用CSS替代Pillow
   ============================================================ */

/* 拖拽模块高亮 */
[data-draggable] {
    transition: outline 0.2s;
    outline: 2px solid transparent;
    outline-offset: 4px;
}

[data-draggable]:hover {
    outline: 2px dashed rgba(255,215,0,0.4);
}

/* 海报容器 - 固定9:16比例 */
.poster {
    width: 1080px;
    height: 1920px;
    position: relative;
    overflow: hidden;
    font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    color: #fff;
}

/* === 背景层 === */
.poster-bg {
    position: absolute;
    inset: 0;
}

/* === 经典演唱会 === */
.poster.classic_concert .poster-bg {
    background:
        radial-gradient(ellipse 600px 400px at 80% 15%, rgba(255,90,90,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 20% 10%, rgba(255,215,0,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 800px 600px at 50% 80%, rgba(30,60,120,0.3) 0%, transparent 70%),
        linear-gradient(180deg, #060e30 0%, #0a1538 35%, #0d1a40 65%, #050a20 100%);
}

/* === 黑金奢华 === */
.poster.luxury_gold .poster-bg {
    background:
        radial-gradient(ellipse 600px 400px at 70% 20%, rgba(255,200,50,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 30% 60%, rgba(200,150,50,0.05) 0%, transparent 70%),
        linear-gradient(180deg, #08060e 0%, #12101a 35%, #1a1510 65%, #0a0808 100%);
}

/* === 赛博霓虹 === */
.poster.neon_stage .poster-bg {
    background:
        radial-gradient(ellipse 600px 400px at 75% 15%, rgba(0,255,200,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 25% 50%, rgba(0,200,255,0.05) 0%, transparent 70%),
        linear-gradient(180deg, #030810 0%, #061420 35%, #081a28 65%, #040a10 100%);
}

/* === 城市剪影 === */
.poster-city {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(0deg, #000 0%, transparent 100%);
    pointer-events: none;
}

.poster-city::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background:
        /* 模拟城市建筑剪影 */
        linear-gradient(90deg,
            transparent 0%, rgba(20,25,40,0.9) 3%, transparent 6%,
            transparent 8%, rgba(15,20,35,1) 12%, transparent 15%,
            transparent 18%, rgba(25,30,50,0.8) 22%, transparent 25%,
            transparent 28%, rgba(18,22,38,1) 35%, transparent 38%,
            transparent 42%, rgba(20,28,45,0.9) 48%, transparent 52%,
            transparent 55%, rgba(15,18,32,1) 60%, transparent 64%,
            transparent 68%, rgba(22,25,42,0.8) 75%, transparent 78%,
            transparent 82%, rgba(18,22,38,1) 88%, transparent 92%,
            transparent 95%, rgba(20,25,40,0.9) 100%
        );
    mask-image: linear-gradient(0deg, #000 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 100%);
}

/* === 放射光线 === */
.poster-rays {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 900px;
    background: conic-gradient(
        from 250deg at 50% 100%,
        transparent 0deg,
        rgba(255,215,0,0.03) 5deg,
        transparent 10deg,
        rgba(255,215,0,0.02) 18deg,
        transparent 25deg,
        rgba(255,215,0,0.04) 35deg,
        transparent 42deg,
        rgba(255,215,0,0.02) 55deg,
        transparent 62deg,
        rgba(255,215,0,0.03) 72deg,
        transparent 80deg,
        rgba(255,215,0,0.02) 90deg,
        transparent 100deg
    );
    pointer-events: none;
}

/* === 星星粒子 === */
.poster-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 40% 22%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 55% 5%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 70% 18%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 85% 12%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 15% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 35% 35%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 60% 28%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 80% 25%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 45% 40%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90% 8%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 5% 45%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 75% 38%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 20% 50%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 50% 42%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 95% 20%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 65% 48%, rgba(255,255,255,0.7), transparent);
    pointer-events: none;
}

/* === 散景光斑 === */
.poster-bokeh {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(40px 40px at 15% 25%, rgba(255,215,0,0.06), transparent),
        radial-gradient(60px 60px at 80% 15%, rgba(255,215,0,0.04), transparent),
        radial-gradient(30px 30px at 50% 50%, rgba(255,215,0,0.05), transparent),
        radial-gradient(50px 50px at 25% 70%, rgba(255,215,0,0.03), transparent),
        radial-gradient(35px 35px at 70% 60%, rgba(255,215,0,0.04), transparent),
        radial-gradient(45px 45px at 90% 40%, rgba(255,215,0,0.03), transparent);
    pointer-events: none;
}

/* === 内容层 === */
.poster-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 60px;
}

/* --- 年份+城市 --- */
.poster-year {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-top: 100px;
}

/* --- 金色装饰线 --- */
.poster-line {
    width: 80%;
    height: 3px;
    margin: 14px 0;
    position: relative;
}

.poster-line::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
    opacity: 0.7;
}

.poster-line::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--gold);
    transform: translateX(-50%) rotate(45deg);
}

/* --- 主标题 --- */
.poster-title {
    font-size: 76px;
    font-weight: 900;
    text-align: center;
    line-height: 1.15;
    letter-spacing: 6px;
    margin: 6px 0;
}

/* --- 歌手标签 --- */
.poster-artist-badge {
    margin: 18px 0 28px;
    padding: 10px 36px;
    border-radius: 14px;
    border: 2px solid;
    font-size: 50px;
    font-weight: 900;
    letter-spacing: 4px;
}

/* --- 演出信息 --- */
.poster-info {
    font-size: 28px;
    font-weight: 400;
    text-align: center;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
    margin: 4px 0;
}

/* --- 歌单区域 --- */
.poster-songs {
    width: 100%;
    margin-top: 24px;
    flex: 1;
}

.poster-songs-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 22px;
    letter-spacing: 2px;
}

.poster-songs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    column-gap: 24px;
}

.poster-songs-list[style*="repeat(3"],
.poster-songs-list[style*="repeat(4"] {
    gap: 0 16px;
}

.poster-songs-list[style*="repeat(3"] .poster-song-item,
.poster-songs-list[style*="repeat(4"] .poster-song-item {
    font-size: 18px;
}

.poster-song-item {
    font-size: 22px;
    color: rgba(255,255,255,0.75);
    padding: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 底部声明 --- */
.poster-footer {
    position: absolute;
    bottom: 140px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 24px;
    color: rgba(255,255,255,0.5);
    z-index: 10;
    letter-spacing: 3px;
}

/* === 经典演唱会配色 === */
.poster.classic_concert {
    --gold: #FFD700;
    --accent: #ff5a5a;
    --accent-bg: rgba(255,90,90,0.15);
}
.poster.classic_concert .poster-year { color: #FFD700; }
.poster.classic_concert .poster-title {
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255,215,0,0.4), 0 0 40px rgba(255,215,0,0.2), 0 0 60px rgba(255,215,0,0.1);
}
.poster.classic_concert .poster-artist-name {
    color: #fff;
    text-shadow: 0 0 40px rgba(255,90,90,0.4), 0 0 80px rgba(255,90,90,0.2);
}
.poster.classic_concert .poster-artist-badge {
    color: #fff;
    border-color: #ff5a5a;
    background: rgba(255,90,90,0.15);
}
.poster.classic_concert .poster-songs-title { color: #ff5a5a; }

/* === 黑金奢华配色 === */
.poster.luxury_gold {
    --gold: #FFC832;
    --accent: #FFAA28;
    --accent-bg: rgba(255,170,40,0.15);
}
.poster.luxury_gold .poster-year { color: #FFC832; }
.poster.luxury_gold .poster-title {
    color: #FFC832;
    text-shadow: 0 0 20px rgba(255,200,50,0.4), 0 0 40px rgba(255,200,50,0.2), 0 0 60px rgba(255,200,50,0.1);
}
.poster.luxury_gold .poster-artist-name {
    color: #FFC832;
    text-shadow: 0 0 40px rgba(255,170,40,0.4), 0 0 80px rgba(255,170,40,0.2);
}
.poster.luxury_gold .poster-artist-badge {
    color: #fff;
    border-color: #FFAA28;
    background: rgba(255,170,40,0.15);
}
.poster.luxury_gold .poster-songs-title { color: #FFAA28; }

/* === 赛博霓虹配色 === */
.poster.neon_stage {
    --gold: #00FFC8;
    --accent: #00C8FF;
    --accent-bg: rgba(0,200,255,0.15);
}
.poster.neon_stage .poster-year { color: #00FFC8; }
.poster.neon_stage .poster-title {
    color: #00FFC8;
    text-shadow: 0 0 20px rgba(0,255,200,0.5), 0 0 40px rgba(0,255,200,0.25), 0 0 60px rgba(0,255,200,0.1);
}
.poster.neon_stage .poster-artist-name {
    color: #fff;
    text-shadow: 0 0 40px rgba(0,200,255,0.5), 0 0 80px rgba(0,200,255,0.25);
}
.poster.neon_stage .poster-artist-badge {
    color: #fff;
    border-color: #00C8FF;
    background: rgba(0,200,255,0.15);
}
.poster.neon_stage .poster-songs-title { color: #00C8FF; }

/* === 玫瑰梦境 === */
.poster.rose_dream .poster-bg {
    background:
        radial-gradient(ellipse 600px 400px at 75% 20%, rgba(255,100,150,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 25% 50%, rgba(255,130,170,0.05) 0%, transparent 70%),
        linear-gradient(180deg, #1e0814 0%, #140810 35%, #0f0510 65%, #08030a 100%);
}
.poster.rose_dream {
    --gold: #ff82aa;
    --accent: #ff6496;
    --accent-bg: rgba(255,100,150,0.15);
}
.poster.rose_dream .poster-year { color: #ff82aa; }
.poster.rose_dream .poster-title {
    color: #ff82aa;
    text-shadow: 0 0 20px rgba(255,130,170,0.4), 0 0 40px rgba(255,130,170,0.2);
}
.poster.rose_dream .poster-artist-name {
    color: #fff;
    text-shadow: 0 0 40px rgba(255,100,150,0.4);
}
.poster.rose_dream .poster-artist-badge {
    color: #fff;
    border-color: #ff6496;
    background: rgba(255,100,150,0.15);
}
.poster.rose_dream .poster-songs-title { color: #ff6496; }

/* === 极光之夜 === */
.poster.aurora_night .poster-bg {
    background:
        radial-gradient(ellipse 700px 500px at 50% 30%, rgba(100,255,200,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 500px 400px at 20% 60%, rgba(150,100,255,0.06) 0%, transparent 70%),
        linear-gradient(180deg, #051419 0%, #0a0a1e 35%, #0a1420 65%, #050810 100%);
}
.poster.aurora_night {
    --gold: #64ffc8;
    --accent: #9664ff;
    --accent-bg: rgba(150,100,255,0.15);
}
.poster.aurora_night .poster-year { color: #64ffc8; }
.poster.aurora_night .poster-title {
    color: #64ffc8;
    text-shadow: 0 0 20px rgba(100,255,200,0.4), 0 0 40px rgba(100,255,200,0.2);
}
.poster.aurora_night .poster-artist-name {
    color: #fff;
    text-shadow: 0 0 40px rgba(150,100,255,0.4);
}
.poster.aurora_night .poster-artist-badge {
    color: #c8b0ff;
    border-color: #9664ff;
    background: rgba(150,100,255,0.15);
}
.poster.aurora_night .poster-songs-title { color: #9664ff; }

/* === 落日余晖 === */
.poster.sunset_glow .poster-bg {
    background:
        radial-gradient(ellipse 600px 400px at 80% 20%, rgba(255,100,50,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 30% 50%, rgba(255,160,60,0.05) 0%, transparent 70%),
        linear-gradient(180deg, #280f0a 0%, #1f0c08 35%, #150805 65%, #0a0403 100%);
}
.poster.sunset_glow {
    --gold: #ffa03c;
    --accent: #ff6432;
    --accent-bg: rgba(255,100,50,0.15);
}
.poster.sunset_glow .poster-year { color: #ffa03c; }
.poster.sunset_glow .poster-title {
    color: #ffa03c;
    text-shadow: 0 0 20px rgba(255,160,60,0.4), 0 0 40px rgba(255,160,60,0.2);
}
.poster.sunset_glow .poster-artist-name {
    color: #fff;
    text-shadow: 0 0 40px rgba(255,100,50,0.4);
}
.poster.sunset_glow .poster-artist-badge {
    color: #fff;
    border-color: #ff6432;
    background: rgba(255,100,50,0.15);
}
.poster.sunset_glow .poster-songs-title { color: #ff6432; }

/* === 冰蓝深海 === */
.poster.ice_blue .poster-bg {
    background:
        radial-gradient(ellipse 600px 400px at 70% 25%, rgba(80,180,255,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 30% 55%, rgba(130,200,255,0.04) 0%, transparent 70%),
        linear-gradient(180deg, #050f23 0%, #0a1932 35%, #0e1932 65%, #060a14 100%);
}
.poster.ice_blue {
    --gold: #82c8ff;
    --accent: #50b4ff;
    --accent-bg: rgba(80,180,255,0.15);
}
.poster.ice_blue .poster-year { color: #82c8ff; }
.poster.ice_blue .poster-title {
    color: #82c8ff;
    text-shadow: 0 0 20px rgba(130,200,255,0.4), 0 0 40px rgba(130,200,255,0.2);
}
.poster.ice_blue .poster-artist-name {
    color: #fff;
    text-shadow: 0 0 40px rgba(80,180,255,0.4);
}
.poster.ice_blue .poster-artist-badge {
    color: #fff;
    border-color: #50b4ff;
    background: rgba(80,180,255,0.15);
}
.poster.ice_blue .poster-songs-title { color: #50b4ff; }

/* === 紫夜幻想 === */
.poster.violet_fantasy .poster-bg {
    background:
        radial-gradient(ellipse 600px 400px at 75% 15%, rgba(180,100,255,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 25% 50%, rgba(200,160,255,0.05) 0%, transparent 70%),
        linear-gradient(180deg, #120823 0%, #0e0520 35%, #0a0518 65%, #060310 100%);
}
.poster.violet_fantasy {
    --gold: #c8a0ff;
    --accent: #b464ff;
    --accent-bg: rgba(180,100,255,0.15);
}
.poster.violet_fantasy .poster-year { color: #c8a0ff; }
.poster.violet_fantasy .poster-title {
    color: #c8a0ff;
    text-shadow: 0 0 20px rgba(200,160,255,0.4), 0 0 40px rgba(200,160,255,0.2);
}
.poster.violet_fantasy .poster-artist-name {
    color: #fff;
    text-shadow: 0 0 40px rgba(180,100,255,0.4);
}
.poster.violet_fantasy .poster-artist-badge {
    color: #e0d0ff;
    border-color: #b464ff;
    background: rgba(180,100,255,0.15);
}
.poster.violet_fantasy .poster-songs-title { color: #b464ff; }

/* === 森林秘境 === */
.poster.forest_green .poster-bg {
    background:
        radial-gradient(ellipse 600px 400px at 70% 20%, rgba(80,200,100,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 30% 55%, rgba(120,230,120,0.04) 0%, transparent 70%),
        linear-gradient(180deg, #08160c 0%, #0a140a 35%, #070f08 65%, #040a05 100%);
}
.poster.forest_green {
    --gold: #78e678;
    --accent: #50c864;
    --accent-bg: rgba(80,200,100,0.15);
}
.poster.forest_green .poster-year { color: #78e678; }
.poster.forest_green .poster-title {
    color: #78e678;
    text-shadow: 0 0 20px rgba(120,230,120,0.4), 0 0 40px rgba(120,230,120,0.2);
}
.poster.forest_green .poster-artist-name {
    color: #fff;
    text-shadow: 0 0 40px rgba(80,200,100,0.4);
}
.poster.forest_green .poster-artist-badge {
    color: #d0ffd0;
    border-color: #50c864;
    background: rgba(80,200,100,0.15);
}
.poster.forest_green .poster-songs-title { color: #50c864; }

/* === 人像模式 === */
.poster.photo-mode .poster-content {
    align-items: flex-start;
    padding: 0 60px;
}

.poster.photo-mode .poster-title {
    font-size: 58px;
    text-align: left;
    margin: 12px 0 8px;
}

.poster.photo-mode .poster-artist-badge {
    font-size: 42px;
    margin: 0 0 16px;
    display: inline-block;
}

.poster.photo-mode .poster-info {
    text-align: left;
    font-size: 24px;
}

.poster.photo-mode .poster-photo {
    width: 100%;
    height: 680px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 3px var(--gold);
    margin: 12px 0 20px;
}

.poster.photo-mode .poster-songs {
    margin-top: 16px;
}

.poster.photo-mode .poster-songs-title {
    font-size: 22px;
    text-align: left;
    margin-bottom: 16px;
}

.poster.photo-mode .poster-song-item {
    font-size: 20px;
}

/* ============================================================
   纯文字模式 - 独立布局
   ============================================================ */

/* --- 艺人名称 - 重点突出 --- */
.poster-artist-name {
    font-size: 52px;
    font-weight: 900;
    letter-spacing: 8px;
    margin: 20px 0 24px;
    color: #fff;
    text-shadow: 0 0 30px var(--accent-bg), 0 2px 8px rgba(0,0,0,0.5);
}

/* --- 演出信息行 --- */
.poster-show-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 26px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.poster-show-info .info-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.6;
    flex-shrink: 0;
}

/* --- 歌单网格 --- */
.poster-songs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    padding: 10px 0;
    row-gap: 10px;
}

/* 3列/4列时自动缩小字号和间距 */
.poster-songs-grid[style*="repeat(3"],
.poster-songs-grid[style*="repeat(4"] {
    gap: 0 20px;
}

.poster-songs-grid .poster-song-item {
    font-size: 24px;
    color: rgba(255,255,255,0.82);
    padding: 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.poster-songs-grid[style*="repeat(3"] .poster-song-item,
.poster-songs-grid[style*="repeat(4"] .poster-song-item {
    font-size: 20px;
    padding: 5px 0;
}

.poster-songs-grid .poster-song-item span {
    color: var(--gold);
    font-weight: 700;
    margin-right: 6px;
}

/* ============================================================
   音乐节模式 - 多歌手
   ============================================================ */

.poster.multi-artist-mode .poster-content {
    align-items: flex-start;
}

.ma-artists-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px;
}

.ma-section {
    width: 100%;
}

.ma-artist-badge {
    display: inline-block;
    padding: 8px 28px;
    border-radius: 50px;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 10px;
    border: 2px solid;
}

.ma-songs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    padding-left: 4px;
}

.ma-songs .poster-song-item {
    font-size: 22px;
    color: rgba(255,255,255,0.8);
    padding: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ma-songs .poster-song-item span {
    color: rgba(255,255,255,0.4);
    font-weight: 700;
    margin-right: 6px;
    font-size: 18px;
}