:root{--navy:#0f1b2d;--navy2:#162336;--navy3:#1e3050;--gold:#c9a84c;--gold2:#e8c96a;--cream:#f5f0e8;--jade:#4c9a84;--jade2:#3a7a67;--muted:#8a9bb5;--border:#2a3f5c;--danger:#d47a8f}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--navy);color:var(--cream);font-family:Noto Sans Thai,sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}.topbar{background:var(--navy2);border-bottom:1px solid var(--border);padding:0 2rem;justify-content:space-between;height:60px;position:-webkit-sticky;position:sticky;top:0;z-index:200}.logo-wrap,.topbar{display:flex;align-items:center}.logo-wrap{gap:12px;cursor:pointer}.logo-th{font-family:"Noto Serif Thai",serif;font-size:1rem;font-weight:600;color:var(--gold)}.logo-en{font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}.nav{display:flex}.nav,.nav a{align-items:center}.nav a{color:var(--muted);font-size:.85rem;padding:0 1rem;height:60px;display:inline-flex;border-bottom:2px solid transparent;transition:all .2s}.nav a.active,.nav a:hover{color:var(--gold);border-bottom-color:var(--gold)}.topbar-right{display:flex;align-items:center;gap:10px}.btn{padding:7px 16px;border-radius:5px;font-size:.82rem;cursor:pointer;font-family:inherit;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted)}.btn-outline:hover{border-color:var(--gold);color:var(--gold)}.btn-primary{background:var(--gold);color:var(--navy);font-weight:600}.btn-primary:hover{background:var(--gold2)}.btn-jade{background:var(--jade);color:#fff;font-weight:600}.btn-jade:hover{background:var(--jade2)}.btn-danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}.btn-sm{padding:4px 10px;font-size:.75rem}.container{max-width:1100px;margin:0 auto;padding:1.8rem}.section-title{font-family:"Noto Serif Thai",serif;font-size:1.3rem;font-weight:600}.section-subtitle{font-size:.78rem;color:var(--muted);margin-top:2px;margin-bottom:1.2rem}.search-bar{display:flex;gap:8px;margin-bottom:1rem;flex-wrap:wrap}.search-input{flex:1 1;min-width:200px;background:var(--navy2);border:1px solid var(--border);color:var(--cream);padding:8px 12px;border-radius:5px;font-size:.88rem;font-family:inherit;outline:none}.search-input:focus{border-color:var(--gold)}.filter-select{background:var(--navy2);border:1px solid var(--border);color:var(--muted);padding:8px 10px;border-radius:5px;font-size:.8rem;font-family:inherit;outline:none;cursor:pointer}.table-wrap{background:var(--navy2);border:1px solid var(--border);border-radius:8px;overflow-x:auto}table{width:100%;border-collapse:collapse}thead tr{background:var(--navy3);border-bottom:1px solid var(--border)}th{text-align:left;padding:9px 12px;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap}td{padding:10px 12px;font-size:.86rem;border-bottom:1px solid rgba(42,63,92,.4);vertical-align:middle}tr:last-child td{border-bottom:none}tbody tr:hover td{background:hsla(0,0%,100%,.02)}.song-id{font-family:monospace;font-size:.74rem;color:var(--muted)}.song-name{color:var(--cream);font-weight:500}.song-name:hover{color:var(--gold)}.badge{display:inline-block;padding:2px 7px;border-radius:3px;font-size:.68rem;white-space:nowrap}.badge-variable{background:rgba(76,154,132,.15);color:var(--jade);border:1px solid rgba(76,154,132,.3)}.badge-fixed{background:rgba(201,168,76,.12);color:var(--gold);border:1px solid rgba(201,168,76,.3)}.badge-mixed{background:rgba(138,155,181,.1);color:var(--muted);border:1px solid var(--border)}.badge-pending{background:rgba(201,168,76,.15);color:var(--gold);border:1px solid rgba(201,168,76,.4)}.card{background:var(--navy2);border:1px solid var(--border);border-radius:8px;padding:1.4rem}.card,.form-group{margin-bottom:1rem}.form-label{font-size:.75rem;color:var(--muted);margin-bottom:5px;display:block}.form-input{width:100%;background:var(--navy3);border:1px solid var(--border);color:var(--cream);padding:9px 12px;border-radius:6px;font-size:.88rem;font-family:inherit;outline:none}.form-input:focus{border-color:var(--gold)}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:1rem;gap:1rem;margin-top:1rem}.video-card{background:var(--navy2);border:1px solid var(--border);border-radius:8px;overflow:hidden}.video-embed{position:relative;padding-bottom:56.25%}.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none}.video-body{padding:10px 12px}.video-title{font-size:.85rem}.video-meta{font-size:.72rem;color:var(--muted);margin-top:3px;display:flex;justify-content:space-between;align-items:center}.detail-hero{background:var(--navy2);border:1px solid var(--border);border-radius:10px;padding:1.5rem;margin-bottom:1.4rem}.detail-id{font-family:monospace;font-size:.7rem;color:var(--muted);letter-spacing:.08em}.detail-name{font-family:"Noto Serif Thai",serif;font-size:1.7rem;font-weight:700;margin:6px 0 10px}.detail-meta{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1rem}.meta-pill{display:flex;flex-direction:column}.meta-label{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.meta-value{font-size:.85rem;margin-top:2px}.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;flex-wrap:wrap;gap:8px}.page-btn{background:var(--navy2);border:1px solid var(--border);color:var(--muted);padding:5px 11px;border-radius:4px;font-size:.78rem;cursor:pointer;font-family:monospace}.page-btn.active,.page-btn:hover{border-color:var(--gold);color:var(--gold)}.page-btn:disabled{opacity:.3;cursor:default}.toast{position:fixed;bottom:2rem;right:2rem;z-index:999;background:var(--navy3);border:1px solid var(--jade);border-radius:8px;padding:12px 18px;font-size:.85rem}.footer{border-top:1px solid var(--border);padding:1.2rem 2rem;font-size:.72rem;color:var(--muted);margin-top:3rem}.footer,.lock-box{background:var(--navy2);text-align:center}.lock-box{border:1px solid var(--border);border-radius:8px;padding:2.5rem}