/* --- 字体引入 (使用国内镜像 loli.net) --- */
@import url('https://fonts.loli.net/css2?family=Poppins:wght@400;600;700&family=Noto+Sans+SC:wght@400;700&display=swap');

/* --- 全局变量与基础设定 --- */
:root {
    /* 颜色体系 */
    --clr-primary: #2c3e50;
    --clr-secondary: #3498db;
    --clr-accent: #e74c3c;
    --clr-background: #f4f7f9;
    --clr-card-bg: #ffffff;
    --clr-text: #333333;
    --clr-text-muted: #8898aa;
    --clr-border: #e6e9ed;
    --clr-shadow: rgba(44, 62, 80, 0.12);
    --clr-shadow-light: rgba(44, 62, 80, 0.08);
    --clr-shadow-hover: rgba(44, 62, 80, 0.2);

    /* 字体 */
    --font-primary: 'Poppins', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-secondary: 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* 尺寸与间距 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 0.75rem;  /* 12px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-xxl: 3rem;    /* 48px */

    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Refined transition for details */
    --transition-details: max-height 0.35s ease-in-out, padding 0.35s ease-in-out, margin 0.35s ease-in-out, border 0.35s ease-in-out;

    /* 播放器高度 */
    --player-height: 160px;
    --player-height-mobile: 180px;
}

/* --- 重置与全局样式 --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-secondary);
    font-weight: 400;
    line-height: 1.7;
    background-color: var(--clr-background);
    color: var(--clr-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: scroll;
    padding-bottom: var(--player-height);
    min-height: 100vh;
}

/* 标题 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--clr-primary);
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
}
h1 { font-size: 2.2rem; margin-bottom: var(--spacing-lg); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; font-weight: 600; }
h4 { font-size: 1.1rem; }

p { margin-bottom: var(--spacing-md); }
p:last-child { margin-bottom: 0; }
a { color: var(--clr-secondary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--clr-primary); }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } /* Ensure button text color inherits */

/* --- 页面布局 --- */
.header {
    background: linear-gradient(135deg, var(--clr-primary) 0%, #3a506b 100%);
    color: #ffffff;
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid var(--clr-secondary);
}
.header h1 { color: #ffffff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); margin: 0; }
.container { max-width: 1140px; margin: var(--spacing-xl) auto; padding: 0 var(--spacing-lg); }

/* --- 栏目与节目列表 --- */
.channel-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-xl); margin-bottom: var(--spacing-xxl); }
.card { background-color: var(--clr-card-bg); border-radius: var(--radius-lg); padding: 0; box-shadow: 0 8px 25px var(--clr-shadow); border: 1px solid var(--clr-border); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-base); overflow: hidden; display: flex; flex-direction: column; border-top: 5px solid var(--clr-secondary); }
.card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 15px 35px var(--clr-shadow-hover); border-color: var(--clr-secondary); border-top-color: var(--clr-primary); }
.channel-item { cursor: pointer; min-height: 220px; text-align: center; }
.channel-item-content { padding: var(--spacing-lg); padding-top: var(--spacing-xl); display: flex; flex-direction: column; align-items: center; justify-content: space-between; flex-grow: 1; position: relative; }
.channel-item-content::before { content: ''; display: block; font-size: 3.5rem; line-height: 1; color: var(--clr-secondary); margin-bottom: var(--spacing-lg); transition: transform var(--transition-smooth), color var(--transition-base); }
.channel-item[data-channel="文学播创"] .channel-item-content::before { content: '📚'; }
.channel-item[data-channel="四海漫游"] .channel-item-content::before { content: '🌍'; }
.channel-item[data-channel="声声不息"] .channel-item-content::before { content: '🔊'; }
.channel-item[data-channel="筹备栏目"] .channel-item-content::before { content: '⏳'; }
.channel-item:hover .channel-item-content::before { transform: scale(1.1) rotate(-5deg); color: var(--clr-primary); }
.channel-item h2 { color: var(--clr-primary); font-size: 1.4rem; margin-top: 0; margin-bottom: var(--spacing-sm); }
.channel-item .status-text { color: var(--clr-text-muted); font-size: 0.9rem; margin-bottom: 0; padding-top: var(--spacing-sm); min-height: 1.5em; }

/* Program List Specifics */
.program-list-wrapper { animation: fadeIn 0.5s ease forwards; margin-bottom: var(--spacing-xl); }
/* Updated Channel Title Area */
.program-list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* Align baselines of title and manager */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: var(--spacing-sm);
    border-bottom: 2px solid var(--clr-border);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-lg); /* Increased margin below header */
}
.program-list-header h2 {
    margin-bottom: 0; /* Remove margin from h2 */
    font-size: 1.8rem;
    color: var(--clr-primary);
    flex-shrink: 0; /* Prevent title from shrinking too much */
}
.channel-manager {
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    font-weight: 400;
    white-space: nowrap; /* Prevent manager name from wrapping */
}
.channel-manager strong {
    font-weight: 600;
    color: var(--clr-primary);
}

.program-list { display: flex; flex-direction: column; gap: var(--spacing-md); margin-top: var(--spacing-sm); }

/* Program Item */
.program-item { background-color: var(--clr-card-bg); border-radius: var(--radius-md); border: 1px solid var(--clr-border); box-shadow: 0 2px 5px var(--clr-shadow-light); transition: border-color var(--transition-base), box-shadow var(--transition-base); overflow: hidden; }
.program-item:hover { border-color: var(--clr-secondary); box-shadow: 0 4px 8px var(--clr-shadow); }
.program-item.playing { border-left: 5px solid var(--clr-secondary); }
.program-item-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) var(--spacing-lg); cursor: pointer; transition: background-color var(--transition-fast); }
.program-item-header:hover { background-color: #f8fafd; }
.program-item-info { flex-grow: 1; margin-right: var(--spacing-md); }
.program-item h3 { color: var(--clr-primary); margin-bottom: var(--spacing-xs); font-size: 1.1rem; line-height: 1.4; }
.program-item p { color: var(--clr-text-muted); font-size: 0.85rem; margin-bottom: 0; line-height: 1.3; }

/* Program Item Play Button */
.program-play-btn { background-color: var(--clr-secondary); color: #ffffff; padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; gap: var(--spacing-xs); transition: background-color var(--transition-fast), transform var(--transition-fast); flex-shrink: 0; }
.program-play-btn svg { width: 1em; height: 1em; fill: currentColor; }
.program-play-btn:hover { background-color: var(--clr-primary); transform: scale(1.05); }
.program-play-btn:active { transform: scale(0.98); }

/* Program Details Section - Updated for multi-line content */
.program-details {
    font-size: 0.9rem;
    color: var(--clr-text);
    line-height: 1.6;
    max-height: 0; /* Initially hidden */
    overflow: hidden;
    transition: var(--transition-details); /* Use refined transition */
    /* Reset padding/margin/border when closed */
    padding: 0 var(--spacing-lg);
    margin-top: 0;
    border-top: 1px solid transparent; /* Start transparent */
}
.program-details p {
    margin-bottom: var(--spacing-xs); /* Add space between lines */
    line-height: 1.5; /* Adjust line height for readability */
}
.program-details p:last-child {
    margin-bottom: 0;
}
.program-details p strong { /* Style for the key part (e.g., "简介:") */
    font-weight: 600;
    color: var(--clr-primary);
    margin-right: 0.3em; /* Space after the colon */
}

.program-item.expanded .program-details {
    max-height: 500px; /* Increased max-height for potentially longer content */
    padding-top: var(--spacing-md); /* Add top/bottom padding when open */
    padding-bottom: var(--spacing-md);
    margin-top: var(--spacing-sm); /* Add margin when visible */
    border-top-color: var(--clr-border); /* Fade in border */
}


/* Back Button */
.back-btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); background-color: transparent; border: 2px solid var(--clr-secondary); color: var(--clr-secondary); padding: calc(var(--spacing-sm) * 0.9) calc(var(--spacing-lg) * 1); font-size: 0.95rem; border-radius: var(--radius-md); font-family: var(--font-primary); font-weight: 600; line-height: 1; transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-fast); margin-bottom: var(--spacing-lg); }
.back-btn:hover { background-color: var(--clr-secondary); color: #ffffff; transform: scale(1.03); }
.back-btn:active { transform: scale(0.98); }
.back-btn svg { width: 1em; height: 1em; fill: currentColor; margin-right: 2px; }

/* --- 音频播放器 --- */
.player-wrapper { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--clr-card-bg); box-shadow: 0 -8px 25px rgba(44, 62, 80, 0.15); border-top: 1px solid var(--clr-border); padding: var(--spacing-md); z-index: 1000; transition: transform var(--transition-smooth); max-height: var(--player-height); }
.player-container { max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--spacing-sm); }
audio#audioPlayer { display: none; }

/* Player Info */
.player-info { font-size: 0.9rem; color: var(--clr-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--spacing-xs); min-height: 1.2em; }
#currentProgramTitle { font-weight: 600; }
#playerMessage { color: var(--clr-accent); font-weight: normal; font-size: 0.85rem; }

.player-controls { display: flex; flex-direction: column; gap: var(--spacing-sm); }
#progressBar { width: 100%; height: 8px; cursor: pointer; appearance: none; -webkit-appearance: none; background: linear-gradient(to right, var(--clr-secondary) 0%, var(--clr-secondary) 0%, var(--clr-border) 0%, var(--clr-border) 100%); border-radius: var(--radius-sm); outline: none; transition: background 0.1s linear; /* Keep gradient transition */ }

/* Webkit (Chrome, Safari) 滑块 */
#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; /* Thumb width */
    height: 18px; /* Thumb height */
    background-color: var(--clr-secondary);
    border-radius: 50%;
    cursor: pointer;
    /* Adjust vertical alignment: (track_height - thumb_height) / 2 */
    /* (8px - 18px) / 2 = -5px. Let's try slightly lower for better visual centering */
    margin-top: -5px; /* Adjusted from -5px. Try -6px or -5.5px if still off */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    position: relative; /* Needed for z-index potentially, but often not required */
    z-index: 2; /* Ensure thumb is visually above the track gradient */
}
#progressBar:hover::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }
#progressBar:active::-webkit-slider-thumb { transform: scale(1.05); background-color: var(--clr-primary); }

/* WebKit Track */
/* It's often better to style the track background directly */
#progressBar::-webkit-slider-runnable-track {
    height: 8px;
    background-color: transparent; /* Let the input's gradient show through */
    border-radius: var(--radius-sm);
    z-index: 1; /* Ensure track is behind thumb */
}


/* Firefox 滑块 */
#progressBar::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background-color: var(--clr-secondary);
    border-radius: 50%;
    cursor: pointer;
    border: none; /* Important */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
#progressBar:hover::-moz-range-thumb { transform: scale(1.15); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }
#progressBar:active::-moz-range-thumb { transform: scale(1.05); background-color: var(--clr-primary); }

/* Firefox Track & Progress */
/* Use ::-moz-range-progress for the fill, ensuring better sync */
#progressBar::-moz-range-track {
    height: 8px;
    background-color: var(--clr-border); /* Background for the unfilled part */
    border-radius: var(--radius-sm);
}
#progressBar::-moz-range-progress {
    height: 8px;
    background-color: var(--clr-secondary); /* Background for the filled part */
    border-radius: var(--radius-sm);
}
/* Remove the JS gradient update if relying solely on moz-range-progress */
/* However, for cross-browser consistency using the gradient is okay, */
/* but ::-moz-range-progress offers native sync. Let's keep the gradient for now */
/* If sync issues persist in FF, remove the gradient JS update and rely on this */


.time-display { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--clr-text-muted); padding: 0 var(--spacing-xs); margin-top: -4px; }

/* Controls Row */
.controls-row { display: flex; gap: var(--spacing-md); /* Reduced gap */ align-items: center; justify-content: center; margin-top: var(--spacing-xs); }

/* Play/Pause Button */
#playPauseBtn { background: linear-gradient(135deg, var(--clr-secondary) 0%, #5dade2 100%); color: #ffffff; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-base); display: inline-flex; align-items: center; gap: var(--spacing-xs); min-width: 110px; justify-content: center; line-height: 1; }
#playPauseBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4); }
#playPauseBtn:active { transform: translateY(0px) scale(0.98); box-shadow: 0 2px 8px rgba(52, 152, 219, 0.25); }
#playPauseBtn svg { fill: currentColor; transition: transform var(--transition-fast); }

/* Speed Select - Ensure text visibility */
#speedSelect {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 0 var(--spacing-md); /* Vertical padding adjusted via height/line-height */
    padding-right: calc(var(--spacing-md) * 2.5);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--clr-text); /* Explicitly set text color */
    height: calc(2 * var(--spacing-sm) + 2px); /* Match button height */
    line-height: calc(2 * var(--spacing-sm) + 2px); /* Center text vertically */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%20viewBox%3D%220%200%20292.4%20292.4%22%3E%3Cpath%20fill%3D%22%238898aa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    background-size: 0.7em;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    flex-shrink: 0; /* Prevent shrinking */
}
#speedSelect:hover { border-color: var(--clr-secondary); }
#speedSelect:focus { outline: none; border-color: var(--clr-secondary); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); }
/* Style options inside the select */
#speedSelect option {
    color: var(--clr-text);
    background-color: var(--clr-card-bg);
    padding: var(--spacing-sm); /* Add some padding to options */
}

/* Share Button */
#shareBtn {
    background-color: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-muted);
    padding: 0 var(--spacing-md); /* Match select padding */
    height: calc(2 * var(--spacing-sm) + 2px); /* Match button height */
    line-height: calc(2 * var(--spacing-sm) + 2px); /* Center icon/text */
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0; /* Prevent shrinking */
}
#shareBtn:hover {
    color: var(--clr-secondary);
    border-color: var(--clr-secondary);
    transform: scale(1.03);
}
#shareBtn:active {
    transform: scale(0.98);
}
#shareBtn svg {
    fill: currentColor;
    width: 1.1em; /* Slightly larger icon */
    height: 1.1em;
}

/* Error message */
.error { color: var(--clr-accent); text-align: center; padding: var(--spacing-xl); font-weight: 600; background-color: var(--clr-card-bg); border: 1px solid var(--clr-accent); border-radius: var(--radius-md); }

/* --- Animation --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* --- Site Footer --- */
.site-footer {
    text-align: center;
    /* margin: auto; Removed margin auto */
    padding: var(--spacing-lg) var(--spacing-md);
    margin-top: var(--spacing-xl); /* Add space above the footer */
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    /* Ensure footer is above the player, but respects body padding */
    /* No special positioning needed, it flows before the fixed player */
}
.site-footer p {
    margin-bottom: var(--spacing-xs);
    line-height: 1.5;
}
.site-footer a {
    color: var(--clr-text-muted); /* Match surrounding text */
    text-decoration: underline;
    transition: color var(--transition-fast);
}
.site-footer a:hover {
    color: var(--clr-secondary);
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    :root { --player-height: var(--player-height-mobile); }
    body { padding-bottom: var(--player-height-mobile); line-height: 1.6; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.05rem; }
    .container { margin: var(--spacing-lg) auto; padding: 0 var(--spacing-md); }
    .channel-list { gap: var(--spacing-lg); grid-template-columns: 1fr; }
    .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px var(--clr-shadow); }
    .channel-item { min-height: 200px; }
    .channel-item-content::before { font-size: 3rem; }
    .program-list-header h2 { font-size: 1.6rem; } /* Adjust title size */
    .channel-manager { font-size: 0.85rem; }
    .program-item-header { padding: var(--spacing-sm) var(--spacing-md); }
    .program-item h3 { font-size: 1rem; }
    .program-item p { font-size: 0.8rem; }
    .program-play-btn { padding: 5px 10px; font-size: 0.8rem; }
    .program-details { padding-left: var(--spacing-md); padding-right: var(--spacing-md); font-size: 0.85rem; }
    .back-btn { padding: calc(var(--spacing-sm) * 0.8) calc(var(--spacing-lg) * 0.8); font-size: 0.9rem; }
    .player-wrapper { padding: var(--spacing-sm); max-height: var(--player-height-mobile); }
    .player-container { gap: var(--spacing-xs); }
    .player-info { font-size: 0.85rem; margin-bottom: 0; }
    .controls-row { gap: var(--spacing-sm); flex-wrap: wrap; justify-content: center; }
    #playPauseBtn { padding: var(--spacing-sm) var(--spacing-lg); font-size: 0.95rem; min-width: 100px; }
    #speedSelect { padding: 0 var(--spacing-md); padding-right: calc(var(--spacing-md) * 2.2); font-size: 0.85rem; background-position: right calc(var(--spacing-md) * 0.8) center; height: calc(1.9 * var(--spacing-sm) + 2px); line-height: calc(1.9 * var(--spacing-sm) + 2px); }
    #shareBtn { height: calc(1.9 * var(--spacing-sm) + 2px); line-height: calc(1.9 * var(--spacing-sm) + 2px); padding: 0 var(--spacing-sm); }
    #shareBtn span { display: none; }
    #shareBtn svg { margin-right: 0; }
    .site-footer { margin-top: var(--spacing-lg); padding: var(--spacing-md); font-size: 0.8rem;} /* Adjust footer spacing */
}

@media (max-width: 480px) {
    html { font-size: 15px; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1rem; }
    .header { padding: var(--spacing-md) var(--spacing-sm); border-bottom-width: 3px; }
    .header h1 { font-size: 1.5rem; }
    .container { margin: var(--spacing-md) auto; padding: 0 var(--spacing-sm); }
    .channel-item h2 { font-size: 1.2rem; }
    .channel-item-content::before { font-size: 2.8rem; }
    .program-list-header { align-items: flex-start; flex-direction: column; gap: var(--spacing-xs); } /* Stack title and manager */
    .back-btn { padding: calc(var(--spacing-sm) * 0.7) calc(var(--spacing-lg) * 0.7); font-size: 0.85rem; }
    .player-wrapper { padding-bottom: var(--spacing-md); }
    .controls-row { margin-top: var(--spacing-sm); justify-content: space-around; }
    #playPauseBtn, #speedSelect, #shareBtn { flex-grow: 1; min-width: 80px; margin: 2px; }
    #shareBtn { min-width: 50px; flex-grow: 0;}
    .site-footer { font-size: 0.75rem; } /* Further adjust footer size */
}