@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@600;700&display=swap");:root{--font-body:"Source Sans 3","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;--font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;--bg-page:#162334;--bg-alt:#223248;--bg-elevated:#1a283a;--bg-player:rgba(12,18,28,0.96);--bg-input:#223248;--bg-cover:#162334;--border-strong:#314055;--border-soft:#3a4c66;--text-strong:#ffffff;--text-soft:#b6c2d4;--text-muted:#d8e2f0;--accent-strong:#ffdb57;--accent-contrast:#122033;--accent-soft:#2f4661;--shadow-color:rgba(0,0,0,0.32);font-family:var(--font-body);line-height:1.5;font-weight:400;color:var(--text-strong);background:radial-gradient(circle at top right,color-mix(in srgb,var(--accent-strong) 25%,transparent),transparent 20%),linear-gradient(180deg,color-mix(in srgb,var(--bg-page) 85%,white) 0,var(--bg-page) 35%,color-mix(in srgb,var(--bg-page) 92%,black) 100%);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg-page)}button,input,select{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--accent-strong) 28%,transparent);outline-offset:2px}h1,h2,h3{color:var(--text-strong);line-height:1.05}h1,h2{font-family:var(--font-display);letter-spacing:-.025em}h1{font-size:clamp(3rem,7vw,5.8rem)}h2{font-size:clamp(1.6rem,2vw,2.4rem)}h3{font-size:1.1rem}p{margin:0}a{color:inherit}#root{min-height:100vh}.app-shell{width:min(1280px,calc(100% - 32px));margin:0 auto;padding:22px 0 220px}.library-header{display:grid;grid-gap:18px;gap:18px;margin-bottom:18px}.detail-copy h2,.intro-label,.section-title{margin:0;color:var(--text-strong)}.toolbar{display:grid;grid-gap:16px;gap:16px}.toolbar-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}.toolbar-brand{display:grid;grid-gap:12px;gap:12px}.toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.brand-link{display:inline-flex;align-items:center;gap:14px;padding:0;border:0;background:transparent;text-align:left;cursor:pointer}.brand-logo{width:56px;height:56px;object-fit:contain;border-radius:16px;background:color-mix(in srgb,var(--bg-alt) 88%,transparent);border:1px solid var(--border-strong);padding:6px;box-shadow:0 10px 24px rgba(8,14,26,.12)}.brand-copy{display:grid;grid-gap:3px;gap:3px}.brand-copy strong{color:var(--text-strong);font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.1}.brand-copy small{color:var(--text-soft);font-size:.92rem}.toolbar-stats{display:inline-flex;gap:10px;flex-wrap:wrap}.detail-tags span,.toolbar-stats span{padding:8px 12px;border-radius:999px;color:var(--text-soft);font-size:.92rem}.admin-link,.detail-tags span,.toolbar-stats span{background:var(--bg-alt);border:1px solid var(--border-strong)}.admin-link{min-height:38px;padding:0 16px;border-radius:999px;color:var(--text-strong);cursor:pointer}.admin-link.active{background:var(--accent-strong);color:var(--accent-contrast);border-color:transparent;font-weight:700}.toolbar input{width:min(560px,100%);min-height:48px;padding:0 16px;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-input);color:var(--text-strong)}.chip-row,.detail-actions,.player-controls,.player-progress{display:flex;align-items:center}.chip-row{flex-wrap:wrap;gap:10px}.chip{border:1px solid var(--border-soft);border-radius:999px;padding:10px 14px;background:transparent;color:var(--text-soft);cursor:pointer}.chip.active{background:var(--accent-strong);color:var(--accent-contrast);border-color:transparent;font-weight:700}.detail-nav{display:flex;justify-content:flex-start}.back-link,.episode-play,.load-more-button,.player-controls button,.primary-btn,.recent-item,.secondary-btn,.story-cover,.story-title-link{border:0;cursor:pointer}.back-link{min-height:44px;padding:0 16px;border-radius:12px;background:var(--bg-alt);color:var(--text-strong);border:1px solid var(--border-strong)}.content{display:grid;grid-gap:32px;gap:32px}.breadcrumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--text-soft)}.breadcrumbs button{border:0;padding:0;background:transparent;color:var(--text-soft);cursor:pointer}.breadcrumbs strong{color:var(--text-strong)}.story-section{display:grid;grid-gap:18px;gap:18px}.section-title{font-size:clamp(1.7rem,2.8vw,2.4rem);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:var(--font-display);font-weight:600;letter-spacing:0;word-break:normal;overflow-wrap:normal;-webkit-hyphens:none;hyphens:none}.section-title small{color:var(--text-soft);font-size:.44em;font-weight:500}.story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:34px 24px;gap:34px 24px}.story-card{display:grid;grid-gap:8px;gap:8px;align-content:start}.story-cover{padding:0;border-radius:14px;overflow:hidden;background:radial-gradient(circle at top,rgba(255,255,255,.08),transparent 40%),var(--bg-cover);box-shadow:0 10px 24px var(--shadow-color);aspect-ratio:540/720;transition:transform .18s ease,box-shadow .18s ease}.back-link:hover,.episode-play:hover,.load-more-button:hover,.primary-btn:hover,.recent-item:hover,.secondary-btn:hover,.story-cover:hover,.story-title-link:hover{transform:translateY(-2px)}.detail-cover img,.story-cover img{display:block;width:100%;height:100%;aspect-ratio:540/720;object-fit:contain;object-position:center}.story-title-link{padding:0;background:transparent;color:var(--accent-strong);text-align:left;font-size:1.05rem;font-weight:700;line-height:1.3}.story-meta-line{margin:0;color:var(--text-strong);font-size:.98rem}.load-more-wrap{display:flex;justify-content:center}.genre-more-wrap{display:flex;justify-content:flex-end}.pagination{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}.pagination-nav,.pagination-page{min-width:42px;min-height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--border-strong);background:var(--bg-alt);color:var(--text-strong);cursor:pointer}.pagination-page.active{background:var(--accent-strong);color:var(--accent-contrast);border-color:transparent;font-weight:700}.pagination-nav:disabled,.pagination-page:disabled{opacity:.5;cursor:not-allowed}.load-more-button,.primary-btn,.secondary-btn{min-height:46px;padding:0 20px;border-radius:14px;font-weight:700}.episode-play,.load-more-button,.player-controls .main-control,.primary-btn{background:var(--accent-strong);color:var(--accent-contrast)}.secondary-btn{background:var(--bg-elevated);color:var(--text-muted)}.secondary-btn.active{background:var(--accent-soft)}.admin-panel,.detail-panel,.recent-panel,.story-hero{border:1px solid var(--border-strong);border-radius:22px;background:var(--bg-alt)}.detail-layout{display:grid;grid-template-columns:minmax(0,1.55fr) 340px;grid-gap:24px;gap:24px}.admin-panel,.detail-main,.detail-sidebar{display:grid;grid-gap:24px;gap:24px;align-content:start}.story-hero{display:grid;grid-template-columns:300px minmax(0,1fr);grid-gap:26px;gap:26px}.admin-panel,.detail-panel,.recent-panel,.story-hero{padding:24px}.admin-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);grid-gap:24px;gap:24px}.admin-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:16px;gap:16px}.admin-form input,.admin-form label,.admin-form select,.admin-form textarea{font:inherit}.admin-form label{display:grid;grid-gap:8px;gap:8px;color:var(--text-strong)}.admin-form input,.admin-form select,.admin-form textarea{width:100%;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-input);color:var(--text-strong);padding:12px 14px}.admin-form textarea{resize:vertical}.admin-form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);background-position:calc(100% - 22px) calc(50% - 3px),calc(100% - 16px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}.admin-form-full{grid-column:1/-1}.admin-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.admin-message{margin:0;color:var(--accent-strong);font-weight:600}.admin-audio-preview{display:grid;grid-gap:10px;gap:10px}.admin-audio-preview-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;color:var(--text-soft)}.admin-audio-preview-head strong{color:var(--text-strong)}.admin-audio-preview-list{display:grid;grid-gap:8px;gap:8px;max-height:220px;overflow:auto}.admin-audio-item{display:grid;grid-template-columns:88px minmax(0,1fr);grid-gap:10px;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border-strong);border-radius:12px;background:color-mix(in srgb,var(--bg-input) 82%,transparent)}.admin-audio-index{color:var(--accent-strong);font-weight:700}.admin-audio-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-soft)}.admin-db-status{display:grid;grid-gap:6px;gap:6px;padding:14px 16px;border-radius:16px;margin-bottom:18px;border:1px solid var(--border-strong)}.admin-db-status small,.admin-db-status span,.admin-db-status strong{margin:0}.admin-db-status.success{background:color-mix(in srgb,#1f8f5f 18%,var(--bg-elevated));border-color:color-mix(in srgb,#1f8f5f 42%,var(--border-strong))}.admin-db-status.warning{background:color-mix(in srgb,#b58311 14%,var(--bg-elevated));border-color:color-mix(in srgb,#b58311 32%,var(--border-strong))}.admin-search{width:100%;min-height:46px;margin-top:12px;padding:0 14px;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-input);color:var(--text-strong)}.admin-story-list{display:grid;grid-gap:14px;gap:14px}.admin-story-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-gap:14px;gap:14px;align-items:center;padding:14px;border-radius:16px;background:var(--bg-elevated)}.admin-story-thumb{width:72px;height:96px;border-radius:10px;object-fit:cover;background:var(--bg-cover)}.admin-story-copy{min-width:0;display:grid;grid-gap:4px;gap:4px}.admin-story-copy span,.admin-story-copy strong{overflow:hidden;text-overflow:ellipsis}.admin-story-copy span{color:var(--text-soft)}.secondary-btn.danger{background:color-mix(in srgb,#a53030 25%,var(--bg-elevated));color:#ffd9d9}.panel-heading{margin-bottom:18px}.detail-cover{border-radius:18px;overflow:hidden;aspect-ratio:540/720;background:radial-gradient(circle at top,rgba(255,255,255,.08),transparent 40%),var(--bg-cover)}.detail-copy{display:grid;align-content:start;grid-gap:16px;gap:16px}.intro-label{color:var(--accent-strong);font-size:.84rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em}.detail-title{margin:0;color:var(--text-strong);font-size:clamp(1.8rem,2.6vw,3rem);line-height:1.04;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;word-break:normal;overflow-wrap:normal;-webkit-hyphens:none;hyphens:none;text-wrap:pretty;max-width:100%}.genre-title{font-size:clamp(2rem,4vw,3.4rem)}.genre-subtitle{margin:-8px 0 0;color:var(--text-soft)}.detail-description{color:var(--text-soft);font-size:1.02rem}.detail-tags{display:flex;flex-wrap:wrap;gap:10px}.detail-actions{flex-wrap:wrap;gap:12px}.episode-list,.recent-list{display:grid;grid-gap:12px;gap:12px}.episode-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-gap:16px;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--bg-elevated)}.episode-row.current{outline:1px solid var(--accent-strong)}.episode-index{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--bg-elevated) 72%,var(--border-strong));color:var(--accent-strong);font-weight:700}.episode-copy h3,.recent-item strong{margin:0;color:var(--text-strong)}.episode-copy p,.recent-item span{margin:4px 0 0;color:var(--text-soft)}.episode-link{word-break:break-all}.episode-play{min-width:92px;min-height:42px;padding:0 16px;border-radius:12px;font-weight:700}.recent-item{display:grid;grid-gap:4px;gap:4px;padding:14px 16px;border-radius:14px;background:var(--bg-elevated);text-align:left}.sidebar-panel{border:1px solid var(--border-strong);border-radius:22px;background:var(--bg-alt);padding:20px}.sidebar-title{margin:0 0 14px;color:var(--text-strong);font-size:1.2rem;font-family:var(--font-display);font-weight:600;letter-spacing:0}.sidebar-list{display:grid;grid-gap:10px;gap:10px}.sidebar-item{border:0;border-radius:14px;background:var(--bg-elevated);padding:14px;display:grid;grid-template-columns:72px minmax(0,1fr);grid-gap:12px;gap:12px;align-items:center;text-align:left;cursor:pointer}.sidebar-thumb{width:72px;height:96px;display:block;border-radius:10px;object-fit:cover;background:var(--bg-cover)}.sidebar-copy{min-width:0;display:grid;grid-gap:4px;gap:4px}.sidebar-item strong{color:var(--text-strong);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sidebar-item span{color:var(--text-soft);font-size:.92rem}.empty-state{padding:28px;border-radius:18px;background:var(--bg-alt);color:var(--text-muted);border:1px solid var(--border-strong)}.empty-state h3{margin:0 0 8px;color:var(--text-strong)}.player-dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(1280px,calc(100% - 24px));display:grid;grid-template-columns:minmax(220px,.9fr) minmax(360px,1.4fr) minmax(220px,.9fr);grid-gap:18px;gap:18px;padding:18px 22px;border-radius:22px;background:var(--bg-player);color:var(--text-strong);box-shadow:0 22px 60px var(--shadow-color);z-index:20;transition:transform .22s ease,box-shadow .22s ease;overflow:visible}.player-core,.player-summary{display:grid;align-content:center;grid-gap:8px;gap:8px}.player-summary{grid-template-columns:72px minmax(0,1fr);align-items:center;column-gap:14px;padding:0;border:0;background:transparent;color:var(--text-strong);text-align:left;cursor:pointer}.player-summary-media{position:relative;width:72px;height:96px}.player-summary-thumb{width:72px;height:96px;border-radius:12px;object-fit:cover;background:var(--bg-cover)}.player-summary-copy{min-width:0;display:grid;grid-gap:6px;gap:6px;overflow:hidden}.player-summary-top{display:flex;align-items:center;justify-content:flex-start;gap:8px}.player-visualizer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:flex-end;justify-content:center;gap:3px;width:30px;height:30px;padding:6px 5px;border-radius:10px;background:rgba(8,12,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.player-visualizer span{width:3px;border-radius:999px;background:#fff8d6;animation:player-bars .9s ease-in-out infinite;transform-origin:bottom}.player-visualizer span:first-child{height:8px;animation-delay:0s}.player-visualizer span:nth-child(2){height:14px;animation-delay:.15s}.player-visualizer span:nth-child(3){height:11px;animation-delay:.3s}.player-visualizer span:nth-child(4){height:16px;animation-delay:.45s}@keyframes player-bars{0%,to{transform:scaleY(.45);opacity:.65}50%{transform:scaleY(1);opacity:1}}.player-toggle-handle{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:56px;height:32px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-player);color:var(--text-strong);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px var(--shadow-color);z-index:2}.player-toggle-icon{width:12px;height:12px;border-top:2px solid var(--accent-strong);border-left:2px solid var(--accent-strong);transform:rotate(45deg) translate(1px,1px);transition:transform .18s ease}.player-toggle-icon.expanded{transform:rotate(225deg) translate(-1px,-1px)}.player-error,.player-label,.player-progress span,.player-summary p{color:var(--text-soft)}.player-error,.player-label,.player-summary p,.player-summary strong{margin:0}.player-summary strong{display:block}.player-marquee{display:block;width:100%;overflow:hidden;white-space:nowrap}.player-marquee span{display:inline-block;min-width:100%;padding-right:28px}.player-marquee.is-overflowing span{animation:player-marquee 9s linear infinite}.player-meta-marquee{max-width:100%}@keyframes player-marquee{0%,12%{transform:translateX(0)}88%,to{transform:translateX(-100%)}}.player-controls,.player-progress{gap:12px}.player-controls{justify-content:center}.player-controls button{min-height:44px;padding:0 16px;border-radius:12px;background:var(--bg-alt);color:var(--text-strong)}.player-progress input{flex:1 1;accent-color:var(--accent-strong)}.player-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px}.player-tools label{display:grid;grid-gap:8px;gap:8px;color:var(--text-muted)}.player-tools input,.player-tools select{width:100%}.player-tools select{min-height:42px;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg-input);color:var(--text-strong);padding:0 12px}.player-tools input{accent-color:var(--accent-strong)}.player-dock.collapsed{transform:translate(-50%,calc(100% - 10px));box-shadow:none}.player-dock.collapsed .player-core,.player-dock.collapsed .player-error,.player-dock.collapsed .player-summary,.player-dock.collapsed .player-tools{display:none}@media (max-width:1120px){.story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-layout,.detail-layout,.player-dock,.story-hero{grid-template-columns:1fr}}@media (max-width:760px){.app-shell{width:min(100%,calc(100% - 16px));padding-top:16px;padding-bottom:330px}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.admin-panel,.detail-panel,.recent-panel,.story-hero{padding:16px}.brand-link{align-items:flex-start}.admin-actions,.detail-actions,.player-controls{flex-direction:column;align-items:stretch}.player-dock{width:min(100%,calc(100% - 16px));gap:14px;padding:16px;bottom:12px}.player-summary{grid-template-columns:64px minmax(0,1fr);column-gap:12px}.player-summary-media,.player-summary-thumb{width:64px;height:84px}.player-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;grid-row-gap:8px;row-gap:8px;grid-column-gap:12px;column-gap:12px}.player-progress input{grid-column:1/-1;grid-row:1}.player-progress span:first-child{grid-column:1;grid-row:2;justify-self:start}.player-progress span:last-child{grid-column:2;grid-row:2;justify-self:end}.player-summary-top{align-items:center;flex-direction:row}.episode-row{grid-template-columns:1fr}.episode-index{width:44px;height:44px}.player-tools{grid-template-columns:1fr}.player-dock.collapsed{transform:translate(-50%,calc(100% - 120px))}.player-dock.collapsed .player-summary{display:grid}.admin-audio-item,.admin-form,.admin-story-card{grid-template-columns:1fr}.brand-copy small{font-size:.86rem}}