*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d0d;--surface:#161616;--surface2:#1e1e1e;--border:#2a2a2a;
  --text:#f0f0f0;--muted:#888;--accent:#e63946;--accent2:#f4a261;
  --radius:12px;--font:"Inter",sans-serif;
}
html{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;object-fit:cover}

/* NAVBAR */
.navbar{position:sticky;top:0;z-index:100;background:rgba(13,13,13,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;gap:16px;max-width:1400px;margin:0 auto;padding:12px 20px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.15rem;flex-shrink:0}
.logo-play{color:var(--accent);font-size:1.3rem}
.logo-badge{background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:20px}
.search-wrap{flex:1;position:relative;max-width:480px;margin-left:auto}
.search-wrap input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 14px;color:var(--text);font-size:.9rem;outline:none;transition:border-color .2s}
.search-wrap input:focus{border-color:var(--accent)}
.suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface2);border:1px solid var(--border);border-radius:8px;overflow:hidden;z-index:200;display:none}
.suggestions.open{display:block}
.suggestion-item{padding:10px 14px;cursor:pointer;font-size:.9rem;border-bottom:1px solid var(--border)}
.suggestion-item:last-child{border-bottom:none}
.suggestion-item:hover{background:var(--border)}
.nav-actions{display:flex;gap:8px;flex-shrink:0}
.toggle-local{background:var(--surface2);border:1px solid var(--border);color:var(--muted);padding:7px 12px;border-radius:8px;cursor:pointer;font-size:.85rem;transition:all .2s;white-space:nowrap}
.toggle-local.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* TAG BAR */
.tag-bar{background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tag-bar::-webkit-scrollbar{display:none}
.tag-inner{display:flex;gap:8px;padding:10px 20px;width:max-content}
.tag-chip{background:transparent;border:1px solid var(--border);color:var(--muted);padding:5px 14px;border-radius:20px;cursor:pointer;font-size:.8rem;white-space:nowrap;transition:all .2s}
.tag-chip:hover{border-color:var(--text);color:var(--text)}
.tag-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* MAIN */
#app{max-width:1400px;margin:0 auto;padding:24px 20px}
.spinner-wrap{display:flex;justify-content:center;padding:60px}
.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* SECTION HEADER */
.section-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.section-header h2{font-size:1.1rem;font-weight:600}
.section-count{color:var(--muted);font-size:.85rem}

/* DRAMA GRID */
.drama-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
@media(min-width:600px){.drama-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
@media(min-width:1000px){.drama-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}

.drama-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid var(--border)}
.drama-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.drama-poster{position:relative;aspect-ratio:2/3;background:var(--surface2)}
.drama-poster img{width:100%;height:100%;object-fit:cover}
.drama-poster .no-img{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:3rem;color:var(--border)}
.local-badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.75);border:1px solid var(--accent);color:var(--accent);font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:4px}
.ep-badge{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.75);color:var(--muted);font-size:.65rem;padding:2px 6px;border-radius:4px}
.drama-info{padding:10px 12px}
.drama-title{font-size:.85rem;font-weight:600;line-height:1.3;margin-bottom:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.drama-meta{font-size:.75rem;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.drama-tag{background:var(--surface2);padding:2px 6px;border-radius:4px}

/* LOAD MORE */
.load-more-wrap{display:flex;justify-content:center;margin-top:32px}
.load-more-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:12px 32px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .2s}
.load-more-btn:hover{background:var(--border)}
.load-more-btn:disabled{opacity:.5;cursor:not-allowed}

/* PLAYER MODAL */
.player-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center}
.player-modal.hidden{display:none}
.player-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85)}
.player-container{position:relative;z-index:10;background:var(--surface);border-radius:16px;width:min(92vw,960px);max-height:92vh;overflow:hidden;display:flex;flex-direction:column}
.player-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.player-title-wrap{display:flex;flex-direction:column;gap:2px;min-width:0}
.player-drama-title{font-weight:700;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-ep-title{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-close{background:var(--surface2);border:none;color:var(--text);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;flex-shrink:0;transition:background .2s}
.player-close:hover{background:var(--accent)}
.video-wrap{flex:1;background:#000;min-height:0}
.video-wrap video{width:100%;display:block;max-height:55vh}
.ep-nav{padding:14px 16px;overflow-x:auto;display:flex;gap:8px;-webkit-overflow-scrolling:touch;border-top:1px solid var(--border);flex-shrink:0;scrollbar-width:thin}
.ep-btn{flex-shrink:0;padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;font-size:.8rem;transition:all .2s;white-space:nowrap}
.ep-btn:hover{border-color:var(--text);color:var(--text)}
.ep-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.ep-btn.has-local{border-color:#2d6a2d;color:#4ade80}
.ep-btn.has-local.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* EMPTY */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-icon{font-size:3rem;margin-bottom:12px}