*{box-sizing:border-box;}
:root{
  --bg:#090909;
  --panel:#151515;
  --panel2:#1f1f1f;
  --line:rgba(255,255,255,.12);
  --text:#fff;
  --muted:#aaa;
  --yellow:#ffcc00;
  --orange:#ff6b28;
  --red:#ff4f6d;
  --pink:#ff7ab8;
  --blue:#6aa9ff;
  --green:#57e389;
}
body{
  margin:0;
  background:
    radial-gradient(circle at top right, rgba(255,190,0,.18), transparent 34%),
    radial-gradient(circle at 12% 10%, rgba(255,90,42,.18), transparent 28%),
    linear-gradient(135deg,#1d1d1d,#090909 58%,#030303);
  color:white;
  font-family:Arial,"Noto Sans KR",sans-serif;
}
button,input,select,textarea{font-family:inherit;}
button{cursor:pointer;}
button:disabled{cursor:not-allowed;opacity:.42;}
.hidden{display:none!important;}

/* vote UI */
.vote-shell{min-height:100vh;padding-bottom:96px;}
.vote-header{
  position:sticky;top:0;z-index:50;
  padding:20px 28px 16px;
  background:rgba(8,8,8,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
}
.brand-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:14px;}
.brand-main{min-width:280px;}
.header-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:min(760px,54vw);} 
.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--yellow);font-weight:900;text-transform:uppercase;}
.brand-row h1{margin:4px 0 0;font-size:34px;line-height:1.1;}
.header-actions{display:flex;gap:10px;align-items:center;}
.ghost-btn,.admin-link.small{
  border:1px solid var(--line);background:rgba(255,255,255,.07);color:#fff;
  border-radius:12px;padding:12px 14px;font-weight:800;text-decoration:none;white-space:nowrap;
}
.ghost-btn:hover,.admin-link.small:hover{border-color:var(--yellow);background:rgba(255,204,0,.12);}
.section-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;}
.section-tab{
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;
  padding:12px 16px;border-radius:999px;font-weight:900;white-space:nowrap;display:flex;gap:8px;align-items:center;
}
.section-tab small{font-size:11px;color:#222;background:#aaa;border-radius:999px;padding:2px 7px;}
.section-tab.active{background:linear-gradient(90deg,var(--yellow),var(--orange));color:#111;border-color:transparent;box-shadow:0 8px 26px rgba(255,130,0,.22);}
.section-tab.disabled:not(.active){opacity:.72;}
.vote-status-bar{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:8px;width:100%;max-width:760px;margin:0;}
.status-pill{border:1px solid var(--line);background:rgba(255,255,255,.075);border-radius:14px;padding:8px 10px;min-height:58px;}
.status-top{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;}
.status-top span{color:#111;background:var(--yellow);border-radius:999px;padding:3px 7px;font-size:11px;font-weight:900;}
.status-count{font-size:20px;font-weight:900;margin:4px 0 5px;}
.status-pill small{color:#bbb;font-size:11px;}
.meter{height:5px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden;margin-bottom:3px;}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:99px;}
.status-pill.favorite .meter i{background:linear-gradient(90deg,#fff06a,var(--yellow));}
.status-pill.love .meter i{background:linear-gradient(90deg,#ff83c6,var(--pink));}
.status-pill.normal .meter i{background:linear-gradient(90deg,#85bcff,var(--blue));}
.status-pill.simple .meter i{background:linear-gradient(90deg,#73ffaf,var(--green));}
.search-row{display:flex;gap:10px;}
.search-select,.search-input{
  border:1px solid var(--line);background:#191919;color:#fff;border-radius:14px;padding:14px;font-size:17px;outline:none;
}
.search-select{min-width:130px;font-weight:900;}
.search-input{flex:1;}
.search-select:focus,.search-input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,204,0,.13);}
.content-wrap{padding:24px 28px;}
.section-info{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:8px;}
.section-info h2{margin:4px 0 6px;font-size:28px;}
.section-info p{margin:0;color:#cfcfcf;}
.result-meta{color:#aaa;margin:10px 0 18px;font-size:14px;}
.vote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;align-items:start;}
.vote-card{
  width:100%;height:430px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 12px 34px rgba(0,0,0,.25);transition:transform .15s,border-color .15s,box-shadow .15s;
}
.vote-card:hover{transform:translateY(-3px);border-color:rgba(255,204,0,.58);box-shadow:0 16px 40px rgba(0,0,0,.38);}
.card-image-wrap{height:156px;background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line);}
.card-image-wrap img{width:100%;height:100%;object-fit:contain;background:#111;}
.song-vote-card .card-image-wrap img{object-fit:cover;}
.video-wrap iframe{width:100%;height:100%;border:0;background:#000;}
.card-body{padding:12px 13px 8px;min-height:116px;}
.card-title{font-size:18px;line-height:1.2;font-weight:900;height:44px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.card-sub{display:flex;justify-content:space-between;gap:8px;align-items:center;color:#ccc;font-size:12px;margin-top:8px;min-height:22px;}
.type-badge{border-radius:999px;padding:4px 8px;font-weight:900;background:#333;color:#fff;}
.type-badge.djmax{background:rgba(255,204,0,.18);color:#ffe066;border:1px solid rgba(255,204,0,.28);}
.type-badge.collab{background:rgba(255,122,184,.16);color:#ff9fd0;border:1px solid rgba(255,122,184,.26);}
.type-badge.etc{background:rgba(106,169,255,.16);color:#9cc8ff;border:1px solid rgba(106,169,255,.26);}
.card-desc{color:#9d9d9d;font-size:12px;line-height:1.35;height:34px;overflow:hidden;margin-top:6px;}
.video-btn{margin-top:8px;width:100%;border:1px solid rgba(255,204,0,.4);background:rgba(255,204,0,.12);color:#ffe47a;padding:7px;border-radius:10px;font-weight:900;}
.no-video{margin-top:8px;color:#777;font-size:12px;}
.tier-controls{margin-top:auto;padding:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px;background:rgba(0,0,0,.18);}
.tier-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:12px;padding:7px 8px;background:rgba(255,255,255,.055);}
.tier-row span{font-size:13px;font-weight:900;white-space:nowrap;}
.tier-row.favorite span{color:#ffe866;}.tier-row.love span{color:#ff9fd0;}.tier-row.normal span{color:#9cc8ff;}
.stepper{display:flex;align-items:center;gap:5px;}
.stepper button{width:27px;height:27px;border:0;border-radius:9px;background:#333;color:white;font-size:18px;font-weight:900;line-height:1;}
.stepper button:not(:disabled):hover{background:var(--yellow);color:#111;}
.stepper b{min-width:18px;text-align:right;font-size:16px;}
.stepper small{color:#aaa;min-width:24px;}
.dlc-hero{height:156px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,204,0,.28),rgba(255,90,42,.1));border-bottom:1px solid var(--line);}
.dlc-hero span{font-size:52px;font-weight:1000;letter-spacing:.05em;color:rgba(255,255,255,.9);}
.simple-controls{margin-top:auto;padding:12px;border-top:1px solid var(--line);}
.simple-vote-btn{width:100%;padding:14px;border:0;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;font-weight:1000;font-size:16px;}
.simple-vote-btn:not(:disabled):hover,.simple-vote-btn.selected{background:linear-gradient(90deg,var(--green),#c9ff70);color:#101010;}
.selected-simple{border-color:rgba(87,227,137,.65);}
.empty-box{grid-column:1/-1;border:1px dashed var(--line);border-radius:22px;padding:42px;text-align:center;color:#bbb;background:rgba(255,255,255,.04);}
.survey-panel{max-width:900px;display:grid;gap:16px;}
.survey-card{border:1px solid var(--line);background:rgba(255,255,255,.065);border-radius:20px;padding:18px;}
.survey-card label{display:block;font-size:18px;font-weight:1000;margin-bottom:12px;color:#ffe47a;}
.survey-card input,.survey-card textarea{width:100%;background:#121212;color:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:16px;outline:none;}
.survey-card textarea{min-height:140px;resize:vertical;}
.difficulty-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.difficulty-grid div span{display:block;margin:0 0 6px;font-weight:900;color:#ddd;}
.choice-row{display:flex;gap:10px;flex-wrap:wrap;}
.choice-btn{border:1px solid var(--line);background:#222;color:#fff;border-radius:14px;padding:14px 24px;font-size:17px;font-weight:1000;}
.choice-btn.active{background:linear-gradient(90deg,var(--yellow),var(--orange));color:#111;border-color:transparent;}
.submit-footer{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:14px 28px;background:rgba(8,8,8,.9);border-top:1px solid var(--line);backdrop-filter:blur(16px);display:flex;gap:14px;align-items:center;justify-content:space-between;}
.save-hint{color:#aaa;font-size:13px;}
.submit-btn{border:0;border-radius:16px;background:linear-gradient(90deg,var(--yellow),var(--orange));color:#111;font-size:18px;font-weight:1000;padding:15px 28px;white-space:nowrap;}

/* legacy admin UI */
.app{display:grid;grid-template-columns:58% 42%;min-height:100vh;}
.left-panel{padding:30px;border-right:1px solid rgba(255,255,255,.1);}
.right-panel{padding:30px;background:rgba(0,0,0,.35);}
.top-tabs{display:flex;gap:6px;margin-bottom:20px;overflow-x:auto;}
.tab{background:#333;border:none;color:white;padding:14px 20px;font-weight:bold;white-space:nowrap;}
.tab.active{background:linear-gradient(90deg,#ff5a2a,#ffd000);color:black;}
.toolbar{display:flex;gap:10px;margin-bottom:20px;}
.toolbar input{flex:1;padding:16px;background:#222;border:none;color:white;font-size:20px;}
.admin-link,.save-btn{background:#ffcc00;color:black;border:none;padding:16px 20px;text-decoration:none;font-weight:900;cursor:pointer;white-space:nowrap;}
.song-list{max-height:calc(100vh - 130px);overflow-y:auto;}
.song-item{display:flex;gap:14px;align-items:center;padding:12px;border-left:5px solid #ffcc00;cursor:pointer;transition:.15s;}
.song-item:hover,.song-item.selected{background:linear-gradient(90deg,#ffcc00,#ff5a2a);}
.song-item img{width:64px;height:64px;object-fit:cover;background:#444;}
.song-title{font-size:22px;font-weight:bold;}.song-artist,.song-dlc{color:#ddd;font-size:14px;}
.selected-info{margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:18px;}.selected-info h1{font-size:40px;margin:10px 0;}.label{color:#ffcc00;font-weight:bold;}
.character-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.character-card{background:#222;border:2px solid transparent;overflow:hidden;cursor:pointer;transition:.15s;}.character-card:hover{border-color:#ffcc00;transform:translateY(-3px);}.character-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#444;}.character-name{padding:10px 10px 4px;font-size:18px;font-weight:bold;}.character-type{padding:0 10px 10px;color:#aaa;font-size:13px;}
.editor-top{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:20px;}.big-add-btn{width:100%;padding:18px;font-size:20px;background:#ffcc00;color:black;border:none;font-weight:900;cursor:pointer;}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:999;}.modal-content{width:min(760px,92vw);max-height:92vh;overflow-y:auto;background:#181818;padding:24px;display:flex;flex-direction:column;gap:12px;border:1px solid #555;}.modal-content input,.modal-content textarea,.modal-content select{background:#222;border:1px solid #555;color:white;padding:14px;font-size:16px;}.preview-image{width:220px;height:220px;object-fit:cover;background:#444;border:1px solid #555;}.modal-actions{display:flex;gap:10px;}.modal-actions button{flex:1;padding:14px;font-weight:bold;border:none;cursor:pointer;}.danger{background:#d84a4a;color:white;}.auto-results{display:flex;flex-direction:column;gap:6px;max-height:120px;overflow-y:auto;background:#111;border:1px solid #444;padding:8px;}.auto-item{padding:10px;background:#252525;cursor:pointer;border-left:4px solid #ffcc00;}.char-auto-item{display:flex;gap:10px;align-items:center;}.char-auto-item img{width:40px;height:40px;object-fit:cover;background:#333;}.song-tags{display:flex;flex-wrap:wrap;gap:8px;}.song-tag{background:#333;border:1px solid #666;border-radius:999px;padding:7px 9px;}.song-tag button{margin-left:8px;border:0;background:#555;color:#fff;border-radius:50%;}.youtube-status,.youtube-box{margin:12px 0;padding:12px;background:#191919;border:1px solid #444;}.youtube-input{width:100%;}

@media (max-width:900px){
  .vote-status-bar{grid-template-columns:1fr;}
  .brand-row,.submit-footer{flex-direction:column;align-items:stretch;}
  .difficulty-grid{grid-template-columns:1fr 1fr;}
  .vote-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
  .vote-card{height:424px;}
  .app{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .vote-header,.content-wrap,.submit-footer{padding-left:14px;padding-right:14px;}
  .search-row{display:grid;grid-template-columns:120px 1fr;}
  .search-row .ghost-btn{grid-column:1/-1;}
  .vote-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vote-card{height:420px;border-radius:16px;}
  .card-image-wrap{height:132px;}
  .card-title{font-size:15px;height:38px;}
  .tier-row{padding:6px;}.tier-row span{font-size:12px;}.stepper button{width:25px;height:25px;}
}

/* optimized loading */
.load-more-card{
  min-height:260px;border:1px dashed rgba(255,255,255,.18);border-radius:22px;
  background:rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;color:#ddd;padding:18px;grid-column:auto;
}
.load-more-card b{font-size:24px;color:#ffe47a;}
.load-more-card span{color:#aaa;line-height:1.4;}
.load-more-card button{
  border:0;border-radius:14px;background:linear-gradient(90deg,var(--yellow),var(--orange));
  color:#111;font-weight:1000;font-size:16px;padding:13px 18px;
}
.card-image-wrap img[src^="data:image/svg"]{opacity:.85;}

/* pack filter */
.pack-filter-panel{
  margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:20px;
  background:rgba(255,255,255,.045);box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.pack-title-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;}
.pack-title-row b{display:block;font-size:22px;color:#fff;letter-spacing:.02em;}
.pack-title-row span{display:block;color:#aaa;font-size:13px;margin-top:3px;}
.pack-reset{border:1px solid var(--line);background:#222;color:#fff;border-radius:14px;padding:11px 18px;font-weight:1000;white-space:nowrap;}
.pack-reset.active,.pack-reset:hover{background:linear-gradient(90deg,var(--yellow),var(--orange));color:#111;border-color:transparent;}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;}
.pack-chip{
  min-height:56px;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:#333;color:#fff;
  box-shadow:0 8px 16px rgba(0,0,0,.25);font-weight:1000;font-size:18px;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;position:relative;overflow:hidden;
  transform:skew(-4deg);transition:transform .12s, box-shadow .12s, border-color .12s, filter .12s;
}
.pack-chip span,.pack-chip small{transform:skew(4deg);position:relative;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.3);}
.pack-chip small{font-size:11px;opacity:.75;font-weight:800;position:absolute;right:8px;bottom:5px;}
.pack-chip:hover,.pack-chip.active{transform:skew(-4deg) translateY(-2px);filter:saturate(1.15);box-shadow:0 13px 28px rgba(0,0,0,.38);border-color:rgba(255,255,255,.55);}
.pack-chip.active::after{content:"";position:absolute;inset:0;border:3px solid rgba(255,255,255,.88);box-shadow:inset 0 0 0 2px rgba(0,0,0,.38);pointer-events:none;}
.pack-current{margin-top:10px;color:#aaa;font-size:13px;}.pack-current b{color:#ffe47a;}
.dlc-hero[class*="pack-"]{height:156px;border-bottom:1px solid var(--line);box-shadow:inset 0 -22px 46px rgba(0,0,0,.18);}
.dlc-hero span{font-size:26px;line-height:1.1;text-align:center;max-width:92%;}
.pack-respect{background:linear-gradient(100deg,#ff6e7a,#ffc400);}
.pack-respectv{background:linear-gradient(100deg,#ffb000 35%,#a654f2);}
.pack-portable1{background:linear-gradient(100deg,#ad52f1,#19c3c9);}
.pack-portable2{background:linear-gradient(100deg,#ff3fa2,#e5174f);}
.pack-emotional{background:linear-gradient(100deg,#238ac6,#39e935);}
.pack-vext{background:linear-gradient(100deg,#ff6b22,#4ba5c8);}
.pack-groove,.pack-cytus,.pack-deemo,.pack-chunithm,.pack-gfl,.pack-nexon,.pack-musedash,.pack-ez2on,.pack-maple,.pack-falcom,.pack-tekken,.pack-bluearchive,.pack-arcaea,.pack-ongeki{background:#333;}
.pack-groove{color:#f0dca6;border:6px solid #d7bd7e;}
.pack-cytus{color:#ff2d5f;border:6px solid #ec214a;}
.pack-deemo{color:#9fe9da;border:6px solid #9fe9da;}
.pack-trilogy{background:linear-gradient(100deg,#72e0ef,#4c63fa);}
.pack-guilty{background:#333;color:#ff693d;border:6px solid #e55530;}
.pack-black{background:linear-gradient(100deg,#e71256,#8d2534);}
.pack-clazziquai{background:linear-gradient(100deg,#ffffff 0 65%,#d5b538 65% 80%,#f3f3f3 80%);color:#fff;}
.pack-technika1{background:linear-gradient(100deg,#fb1592,#7f63e9);}
.pack-technika2{background:linear-gradient(100deg,#ff6d2c,#ffbe20,#1ed2e9);}
.pack-technika3{background:linear-gradient(100deg,#744bea,#3a80d8);}
.pack-chunithm{color:#ffd31f;border:6px solid #f2d100;}
.pack-gfl{color:#eca516;border:6px solid #d98f00;}
.pack-portable3{background:linear-gradient(100deg,#ffa61b,#d68122);}
.pack-estimate{color:#e9d7a6;border:6px solid #d8c17d;}
.pack-nexon{color:#20a9df;border-left:8px solid #20a9df;border-right:8px solid #b6d02b;}
.pack-vext2{background:linear-gradient(100deg,#c54261,#ff9f65);}
.pack-musedash{color:#ffd35b;border:6px solid #ff143d;}
.pack-tq{background:linear-gradient(100deg,#d4d4d4,#42db32);}
.pack-vext3{background:repeating-linear-gradient(0deg,#6525db 0 9px,#8d30f1 9px 18px);}
.pack-ez2on{color:#29cde1;border:6px solid #29cde1;}
.pack-vext4{background:linear-gradient(100deg,#bd152d,#7b1e21);}
.pack-clearpass{background:linear-gradient(100deg,#ffc315,#ff821e);}
.pack-maple{color:#ffa728;border:6px solid #e65e32;}
.pack-vext5{background:linear-gradient(130deg,#ffbf16 0 16%,#173b63 16% 100%);}
.pack-falcom{color:#e089d1;border-left:8px solid #e089d1;border-right:8px solid #71d0e5;}
.pack-vliberty{background:linear-gradient(0deg,#f35dae 0 30%,#efff5c 30% 60%,#54eff3 60%);}
.pack-tekken{color:#d8d3b6;border:6px solid #bdb491;}
.pack-vliberty2{background:linear-gradient(135deg,#302d70 0 70%,#82d839 70%);}
.pack-tribute1{color:#d8d3b6;border:6px solid #bdb491;}
.pack-bluearchive{color:#4ccfec;border:6px solid #34bddd;}
.pack-vliberty3{background:linear-gradient(100deg,#c94d6d,#e07095);}
.pack-sixfour{color:#3477ee;border:6px solid #3477ee;}
.pack-arcaea{color:#fff;border:6px solid #f2f2f2;}
.pack-vliberty4{background:#f8f6eb;color:#aaa;border:6px solid #d9c796;}
.pack-tribute2{color:#c777bb;border-left:8px solid #c777bb;border-right:8px solid #7fd4ea;}
.pack-ongeki{color:#b7ffb6;border-left:8px solid #b7ffb6;border-right:8px solid #ff9fd4;}
.pack-default{background:linear-gradient(100deg,#444,#222);}

@media (max-width:560px){
  .pack-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .pack-chip{min-height:48px;font-size:14px;}
  .pack-title-row{align-items:flex-start;flex-direction:column;}
  .pack-reset{width:100%;}
}

/* pack filter v2: one-line horizontal carousel - compact */
.pack-filter-panel{
  margin-top:8px;
  padding:6px 10px 5px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));
}
.pack-title-row.compact{
  margin-bottom:5px;
  align-items:center;
}
.pack-title-row.compact b{
  font-size:15px;
  line-height:1.05;
}
.pack-title-row.compact span{
  font-size:10px;
  margin-top:1px;
  color:#999;
}
.pack-actions{
  display:flex;
  gap:5px;
  align-items:center;
  flex:0 0 auto;
}
.pack-arrow,.pack-reset{
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:#242424;
  color:#fff;
  font-weight:1000;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.pack-arrow{
  width:31px;
  padding:0;
  font-size:15px;
}
.pack-reset{
  padding:0 12px;
  font-size:12px;
}
.pack-arrow:hover,.pack-reset:hover,.pack-reset.active{
  background:linear-gradient(90deg,var(--yellow),var(--orange));
  color:#111;
  border-color:transparent;
}
.pack-rail-wrap{
  position:relative;
  overflow:hidden;
}
.pack-rail{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  padding:1px 3px 6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,204,0,.65) rgba(255,255,255,.08);
}
.pack-rail::-webkit-scrollbar{height:5px;}
.pack-rail::-webkit-scrollbar-track{background:rgba(255,255,255,.075);border-radius:99px;}
.pack-rail::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:99px;}
.pack-chip{
  flex:0 0 154px;
  min-height:28px;
  height:28px;
  font-size:13px;
  padding:2px 25px 2px 10px;
  border-radius:2px;
  transform:skew(-5deg);
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.pack-chip:hover,.pack-chip.active{
  transform:skew(-5deg) translateY(-1px);
}
.pack-chip.active::after{
  border-width:2px;
}
.pack-chip small{
  right:6px;
  bottom:2px;
  font-size:8px;
}
.pack-chip span{
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:112px;
}
.pack-current{
  margin-top:-1px;
  font-size:10px;
  line-height:1;
}
.dlc-hero[class*="pack-"]{
  height:88px;
}
.dlc-hero span{
  font-size:19px;
}

@media (max-width:560px){
  .pack-title-row.compact{flex-direction:row;align-items:center;}
  .pack-title-row.compact span{display:none;}
  .pack-actions{gap:5px;}
  .pack-arrow{width:34px;height:32px;}
  .pack-reset{width:auto;height:32px;padding:0 12px;}
  .pack-chip{flex-basis:175px;height:36px;min-height:36px;font-size:14px;}
  .pack-chip span{max-width:126px;}
}

@media (max-width:980px){
  .brand-row{flex-direction:column;}
  .header-right{width:100%;min-width:0;align-items:stretch;}
  .header-actions{justify-content:flex-end;}
  .vote-status-bar{max-width:none;}
}
@media (max-width:560px){
  .vote-status-bar{grid-template-columns:1fr;}
}

/* split search UI overhaul */
.brand-row{align-items:flex-start;}
.header-right{min-width:420px;max-width:680px;gap:8px;}
.vote-status-bar.compact,.vote-status-bar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:none;}
.mini-status{min-width:104px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.065);border-radius:12px;padding:7px 9px;display:grid;grid-template-columns:1fr auto;gap:2px 7px;align-items:center;box-shadow:0 8px 18px rgba(0,0,0,.2);}
.mini-status span{font-size:12px;color:#d8d8d8;font-weight:900;white-space:nowrap;}
.mini-status b{font-size:16px;line-height:1;font-weight:1000;color:#fff;}
.mini-status em{grid-column:1/-1;font-style:normal;font-size:11px;color:#111;background:var(--yellow);width:max-content;border-radius:999px;padding:2px 7px;font-weight:1000;}
.mini-status.favorite{border-color:rgba(255,204,0,.25)}
.mini-status.love{border-color:rgba(255,122,184,.25)}
.mini-status.normal{border-color:rgba(106,169,255,.25)}
.search-row{margin-top:8px;}
.search-select{min-width:140px;}
.content-wrap{padding-top:14px;}
.section-info{display:none;}
.result-meta{margin:4px 0 12px;padding:0 2px;font-size:13px;}

.split-vote-layout{display:grid;grid-template-columns:minmax(430px,40%) minmax(0,1fr);gap:14px;align-items:stretch;min-height:calc(100vh - 360px);}
.split-panel{border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(0,0,0,.30);overflow:hidden;min-height:520px;box-shadow:0 16px 34px rgba(0,0,0,.24);}
.split-panel.left-panel,.split-panel.right-panel{padding:0;border-right:1px solid rgba(255,255,255,.13);}
.split-head{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.11);background:linear-gradient(90deg,rgba(255,204,0,.14),rgba(255,255,255,.03));display:flex;justify-content:space-between;gap:10px;align-items:end;}
.split-head b{font-size:19px;color:#fff;}
.split-head span{font-size:12px;color:#bdbdbd;text-align:right;line-height:1.3;}
.result-list{height:min(720px,calc(100vh - 390px));min-height:440px;overflow:auto;padding:10px;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.34));scrollbar-color:rgba(255,204,0,.65) rgba(255,255,255,.08);scrollbar-width:thin;}
.result-list::-webkit-scrollbar{width:9px;}.result-list::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}.result-list::-webkit-scrollbar-thumb{background:linear-gradient(var(--yellow),var(--orange));border-radius:99px;}
.list-row{width:100%;border:0;border-left:4px solid transparent;background:rgba(255,255,255,.035);color:#fff;text-align:left;border-radius:12px;margin:0 0 8px;padding:10px;display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;transition:background .12s,border-color .12s,transform .12s;}
.list-row:hover{background:rgba(255,255,255,.075);border-left-color:rgba(255,204,0,.55);}
.list-row.active{background:linear-gradient(90deg,rgba(255,204,0,.22),rgba(255,255,255,.06));border-left-color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(255,204,0,.18);}
.list-thumb{width:58px;height:58px;border-radius:8px;background:#111;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.list-thumb img{width:100%;height:100%;object-fit:cover;}
.character-row .list-thumb img{object-fit:contain;}
.list-main{min-width:0;display:block;}
.list-main b{display:block;font-size:17px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-main small{display:block;color:#ddd;font-size:13px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-main em{display:block;color:#9d9d9d;font-size:12px;font-style:normal;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.right-panel{padding:0;}
.detail-head{padding:18px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:16px;background:radial-gradient(circle at top right,rgba(255,204,0,.14),transparent 38%);}
.detail-head h2{margin:4px 0 6px;font-size:30px;line-height:1.12;}
.detail-head p{margin:0;color:#cfcfcf;font-size:14px;}
.mode-label{font-size:12px;font-weight:1000;letter-spacing:.08em;color:var(--yellow);}
.detail-image{width:112px;height:112px;flex:0 0 112px;border-radius:16px;background:#111;overflow:hidden;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;}
.detail-image img{width:100%;height:100%;object-fit:contain;}
.compact-character-list{padding:12px;height:min(720px,calc(100vh - 455px));overflow:auto;display:grid;gap:10px;}
.vote-row-card{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(310px,420px);gap:12px;align-items:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:10px;}
.vote-row-card .row-thumb{width:64px;height:64px;background:#111;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.vote-row-card .row-thumb img{width:100%;height:100%;object-fit:contain;}
.row-info b{display:block;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-info small{display:block;color:#aaa;margin-top:4px;}
.vote-row-card .tier-controls,.detail-vote-block .tier-controls{margin:0;padding:0;border:0;background:transparent;gap:5px;}
.vote-row-card .tier-row,.detail-vote-block .tier-row{padding:6px 8px;}
.vote-row-card .stepper button,.detail-vote-block .stepper button{width:26px;height:26px;}
.detail-vote-block{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1);}
.detail-vote-block .tier-controls{max-width:560px;}
.right-panel h3{margin:16px 18px 8px;font-size:20px;}
.mini-song-list{margin:0 18px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-height:310px;overflow:auto;padding-right:4px;}
.mini-song-list div{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:9px 10px;}
.mini-song-list b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-song-list small{display:block;color:#aaa;font-size:12px;margin-top:3px;}
.detail-video{height:260px;margin:16px 18px 10px;background:#080808;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.detail-video img{width:100%;height:100%;object-fit:contain;}.detail-video iframe{width:100%;height:100%;border:0;}
.video-btn.wide{width:calc(100% - 36px);margin:0 18px 14px;padding:11px;}
.pack-mini{height:44px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:1000;transform:skew(-5deg);overflow:hidden;text-align:center;padding:0 6px;}
.dlc-detail-panel .dlc-hero.large{height:128px;margin:18px;border-radius:6px;border:0;}
.simple-controls.large{border:0;padding:0 18px 14px;}.simple-controls.large .simple-vote-btn{max-width:420px;}
.empty-box.small{padding:22px;font-size:13px;}

@media (max-width:1100px){
  .split-vote-layout{grid-template-columns:1fr;}
  .result-list,.compact-character-list{height:auto;max-height:520px;}
  .vote-row-card{grid-template-columns:56px 1fr;}.vote-row-card .tier-controls{grid-column:1/-1;}
}
@media (max-width:780px){
  .header-right{min-width:0;width:100%;align-items:stretch;}.vote-status-bar{justify-content:flex-start;}.mini-status{min-width:96px;}
  .search-row{display:grid;grid-template-columns:1fr;}.search-select{width:100%;}
  .detail-head h2{font-size:24px;}.mini-song-list{grid-template-columns:1fr;}
}

/* final tweak: move remaining vote summary to the left of login/admin buttons */
.brand-row{align-items:flex-start;}
.header-right{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:flex-end;
  gap:12px;
  min-width:min(980px,64vw);
  max-width:none;
}
.header-actions{order:2;display:flex;align-items:flex-start;gap:10px;flex:0 0 auto;}
#voteStatusBar.vote-status-bar{
  order:1;
  flex:0 1 auto;
  width:auto;
  justify-content:flex-end;
  align-self:flex-start;
}
#voteStatusBar .mini-status{
  min-width:92px;
  padding:6px 8px;
}
#voteStatusBar .mini-status span{font-size:11px;}
#voteStatusBar .mini-status b{font-size:15px;}
#voteStatusBar .mini-status em{font-size:10px;padding:2px 6px;}

@media (max-width:1180px){
  .brand-row{flex-direction:column;}
  .header-right{width:100%;min-width:0;justify-content:space-between;}
  #voteStatusBar.vote-status-bar{justify-content:flex-start;}
}
@media (max-width:780px){
  .header-right{flex-direction:column-reverse;align-items:stretch;}
  .header-actions{justify-content:flex-end;}
}

/* requested header layout: title | remaining-vote summary | login buttons */
.vote-header .brand-row{
  display:grid;
  grid-template-columns:minmax(360px,1fr) auto;
  align-items:start;
  gap:24px;
  margin-bottom:58px;
}
.vote-header .brand-main{min-width:0;}
.vote-header .header-right{
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  gap:18px!important;
  min-width:0!important;
  max-width:none!important;
  width:auto!important;
  margin-left:0!important;
}
.vote-header #voteStatusBar.vote-status-bar{
  order:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:flex-end!important;
  align-items:flex-start!important;
  gap:8px!important;
  width:auto!important;
  max-width:none!important;
  margin:18px 6px 0 0!important;
  flex:0 0 auto!important;
}
.vote-header .header-actions{
  order:1!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:12px!important;
  flex:0 0 auto!important;
}
.vote-header #voteStatusBar .mini-status{
  min-width:118px;
  height:58px;
  padding:8px 11px;
  border-radius:12px;
  grid-template-columns:auto auto;
}
.vote-header #voteStatusBar .mini-status span{font-size:12px;}
.vote-header #voteStatusBar .mini-status b{font-size:20px;}
.vote-header #voteStatusBar .mini-status em{font-size:11px;padding:2px 9px;}
.vote-header .section-tabs{margin-top:-40px;margin-bottom:12px;}

@media (max-width:1350px){
  .vote-header .brand-row{grid-template-columns:1fr;margin-bottom:16px;}
  .vote-header .header-right{justify-content:space-between!important;width:100%!important;}
  .vote-header #voteStatusBar.vote-status-bar{margin:0!important;}
  .vote-header .section-tabs{margin-top:0;}
}
@media (max-width:820px){
  .vote-header .header-right{flex-direction:column-reverse!important;align-items:stretch!important;}
  .vote-header .header-actions{justify-content:flex-end!important;}
  .vote-header #voteStatusBar.vote-status-bar{justify-content:flex-start!important;flex-wrap:wrap!important;}
}

/* === EXACT HEADER LAYOUT FIX (requested screenshot) ===
   Top row: title on left, remaining-vote summary between title and login, buttons on far right.
   Tabs stay on the next row under the title. */
.vote-header{
  padding:18px 16px 14px !important;
}
.vote-header .brand-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:28px !important;
  margin:0 0 72px 0 !important;
  width:100% !important;
}
.vote-header .brand-main{
  flex:1 1 auto !important;
  min-width:420px !important;
  max-width:760px !important;
}
.vote-header .eyebrow{
  font-size:13px !important;
  letter-spacing:.22em !important;
}
.vote-header .brand-row h1{
  font-size:52px !important;
  line-height:1.03 !important;
  margin:8px 0 0 !important;
  white-space:nowrap !important;
}
.vote-header .header-right{
  flex:0 0 min(1120px,58vw) !important;
  width:min(1120px,58vw) !important;
  min-width:760px !important;
  max-width:1120px !important;
  margin-left:auto !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:26px !important;
}
.vote-header #voteStatusBar.vote-status-bar{
  order:0 !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:10px !important;
  width:auto !important;
  max-width:none !important;
  margin:20px 0 0 0 !important;
  flex:0 0 auto !important;
}
.vote-header #voteStatusBar .mini-status{
  min-width:120px !important;
  width:120px !important;
  height:58px !important;
  padding:7px 11px !important;
  border-radius:13px !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:2px 8px !important;
  align-items:center !important;
}
.vote-header #voteStatusBar .mini-status span{
  font-size:12px !important;
  line-height:1 !important;
}
.vote-header #voteStatusBar .mini-status b{
  font-size:20px !important;
  line-height:1 !important;
}
.vote-header #voteStatusBar .mini-status em{
  grid-column:1 / -1 !important;
  font-size:11px !important;
  line-height:1 !important;
  padding:3px 10px !important;
}
.vote-header .header-actions{
  order:1 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  gap:12px !important;
  margin:0 !important;
  flex:0 0 auto !important;
}
.vote-header .header-actions .ghost-btn,
.vote-header .header-actions .admin-link.small{
  padding:16px 24px !important;
  border-radius:16px !important;
  font-size:17px !important;
  min-height:58px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.vote-header .section-tabs{
  margin-top:0 !important;
  margin-bottom:22px !important;
  padding-bottom:0 !important;
}
.vote-header .section-tab{
  padding:18px 28px !important;
  font-size:18px !important;
  border-radius:999px !important;
}
.vote-header .search-row{
  margin-top:0 !important;
}

@media (max-width:1500px){
  .vote-header .brand-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-bottom:22px !important;
  }
  .vote-header .brand-main{
    min-width:0 !important;
    max-width:none !important;
  }
  .vote-header .header-right{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    flex-basis:auto !important;
    justify-content:space-between !important;
  }
  .vote-header #voteStatusBar.vote-status-bar{
    margin:0 !important;
  }
}
@media (max-width:900px){
  .vote-header .brand-row h1{font-size:38px !important;}
  .vote-header .header-right{
    flex-direction:column-reverse !important;
    align-items:stretch !important;
  }
  .vote-header .header-actions{
    justify-content:flex-end !important;
  }
  .vote-header #voteStatusBar.vote-status-bar{
    flex-wrap:wrap !important;
  }
  .vote-header .section-tab{
    padding:14px 18px !important;
    font-size:15px !important;
  }
}

/* === NON-STICKY HEADER FIX ===
   Header/top area should scroll away normally instead of staying fixed at the top. */
.vote-header{
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
}

/* === RIGHT CHARACTER GALLERY UPDATE ===
   When a song is selected, show its characters as large fixed cards like the reference image.
   When a character is selected from character search, enlarge the right-side image. */
.song-character-head{
  padding:14px 18px !important;
}
.right-character-gallery{
  padding:18px;
  height:min(760px,calc(100vh - 430px));
  min-height:430px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
  background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.30));
  scrollbar-color:rgba(255,204,0,.65) rgba(255,255,255,.08);
  scrollbar-width:thin;
}
.right-character-gallery::-webkit-scrollbar{width:9px;}
.right-character-gallery::-webkit-scrollbar-track{background:rgba(255,255,255,.06);}
.right-character-gallery::-webkit-scrollbar-thumb{background:linear-gradient(var(--yellow),var(--orange));border-radius:99px;}
.right-character-card{
  min-height:430px;
  background:#202020;
  border:2px solid rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .12s,border-color .12s,box-shadow .12s;
}
.right-character-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,204,0,.62);
  box-shadow:0 16px 38px rgba(0,0,0,.38);
}
.right-character-image{
  height:230px;
  background:#111;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.right-character-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.right-character-body{
  padding:14px 16px 8px;
  min-height:104px;
}
.right-character-body b{
  display:block;
  font-size:22px;
  line-height:1.18;
  font-weight:1000;
  color:#fff;
  word-break:keep-all;
}
.right-character-body small{
  display:block;
  margin-top:8px;
  color:#b9c7dc;
  font-size:14px;
  font-weight:800;
}
.right-character-body em{
  display:block;
  margin-top:4px;
  color:#969696;
  font-size:12px;
  font-style:normal;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.right-character-controls{
  margin-top:auto;
  padding:0 12px 12px;
}
.right-character-controls .tier-controls{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  gap:6px;
}
.right-character-controls .tier-row{
  padding:7px 8px;
  border-radius:10px;
}
.right-character-controls .tier-row span{
  font-size:12px;
}
.right-character-controls .stepper button{
  width:26px;
  height:26px;
}
.right-character-controls .stepper b{
  font-size:15px;
}
.character-focus-panel{
  display:grid;
  grid-template-columns:minmax(280px,380px) minmax(0,1fr);
  gap:22px;
  padding:22px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:radial-gradient(circle at top right,rgba(255,204,0,.16),transparent 38%);
}
.character-focus-image{
  height:380px;
  background:#111;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.character-focus-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.character-focus-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
}
.character-focus-info h2{
  margin:6px 0 0;
  font-size:40px;
  line-height:1.12;
  word-break:keep-all;
}
.character-focus-info p{
  margin:0 0 8px;
  color:#cfcfcf;
  font-size:15px;
}
.focus-vote{
  padding:0 !important;
  border:0 !important;
  margin-top:8px;
}
.focus-vote .tier-controls{
  max-width:520px;
}

@media (max-width:1300px){
  .right-character-gallery{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
  .right-character-card{min-height:400px;}
  .right-character-image{height:210px;}
  .right-character-body b{font-size:20px;}
  .character-focus-panel{grid-template-columns:260px 1fr;}
  .character-focus-image{height:310px;}
}
@media (max-width:900px){
  .right-character-gallery{height:auto;max-height:620px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:12px;gap:12px;}
  .right-character-card{min-height:360px;}
  .right-character-image{height:180px;}
  .right-character-body{padding:11px 12px 6px;min-height:88px;}
  .right-character-body b{font-size:17px;}
  .character-focus-panel{grid-template-columns:1fr;padding:14px;}
  .character-focus-image{height:320px;}
  .character-focus-info h2{font-size:30px;}
}

/* === COMPACT TOP TITLE AREA UPDATE ===
   Reduce the non-voting title/header space like V-ARCHIVE's compact nav. */
.vote-header{
  padding:10px 16px 12px !important;
  background:rgba(8,8,8,.92) !important;
}
.vote-header .brand-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin:0 0 14px 0 !important;
}
.vote-header .brand-main{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:none !important;
}
.vote-header .eyebrow{
  font-size:11px !important;
  letter-spacing:.18em !important;
  line-height:1 !important;
  margin:0 !important;
}
.vote-header .brand-row h1{
  font-size:30px !important;
  line-height:1.05 !important;
  margin:4px 0 0 !important;
  white-space:nowrap !important;
}
.vote-header .header-right{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
}
.vote-header #voteStatusBar.vote-status-bar{
  margin:0 !important;
  gap:7px !important;
  align-items:center !important;
}
.vote-header #voteStatusBar .mini-status{
  width:104px !important;
  min-width:104px !important;
  height:46px !important;
  padding:5px 9px !important;
  border-radius:11px !important;
  gap:1px 6px !important;
}
.vote-header #voteStatusBar .mini-status span{
  font-size:10px !important;
}
.vote-header #voteStatusBar .mini-status b{
  font-size:17px !important;
}
.vote-header #voteStatusBar .mini-status em{
  font-size:10px !important;
  padding:2px 8px !important;
}
.vote-header .header-actions{
  gap:8px !important;
  align-items:center !important;
}
.vote-header .header-actions .ghost-btn,
.vote-header .header-actions .admin-link.small{
  min-height:46px !important;
  padding:10px 18px !important;
  border-radius:13px !important;
  font-size:15px !important;
}
.vote-header .section-tabs{
  margin:0 0 12px 0 !important;
  padding-bottom:0 !important;
  gap:8px !important;
}
.vote-header .section-tab{
  padding:12px 20px !important;
  font-size:15px !important;
  border-radius:999px !important;
}
.vote-header .section-tab small{
  font-size:10px !important;
  padding:1px 6px !important;
}
.vote-header .search-row{
  margin-top:0 !important;
  gap:8px !important;
}
.vote-header .search-select,
.vote-header .search-input{
  padding:11px 13px !important;
  font-size:15px !important;
  border-radius:12px !important;
}
.vote-header .search-select{min-width:112px !important;}
.vote-header #clearSearchBtn{
  min-height:0 !important;
  padding:11px 15px !important;
  border-radius:12px !important;
  font-size:14px !important;
}
.pack-filter-panel{
  margin-top:8px !important;
}
.content-wrap{
  padding-top:14px !important;
}

@media (max-width:1100px){
  .vote-header .brand-row{
    flex-wrap:wrap !important;
    align-items:flex-start !important;
  }
  .vote-header .header-right{
    width:100% !important;
    justify-content:space-between !important;
  }
  .vote-header .brand-row h1{font-size:26px !important;}
}
@media (max-width:720px){
  .vote-header #voteStatusBar.vote-status-bar{flex-wrap:wrap !important;}
  .vote-header .header-right{flex-direction:column-reverse !important;align-items:stretch !important;}
  .vote-header .header-actions{justify-content:flex-end !important;}
  .vote-header .search-row{display:grid !important;grid-template-columns:110px 1fr auto !important;}
}


/* === FOOTER STATUS / NO RERENDER PATCH === */
.vote-shell{padding-bottom:92px !important;}
.vote-header #voteStatusBar{display:none !important;}
.vote-header .header-right{width:auto !important;min-width:0 !important;max-width:none !important;flex:0 0 auto !important;}
.vote-header .header-actions{margin-left:auto !important;}
.submit-footer{
  position:fixed !important;
  left:0 !important;right:0 !important;bottom:0 !important;z-index:80 !important;
  min-height:74px !important;
  padding:10px 24px !important;
  background:rgba(8,8,8,.92) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(16px) !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:16px !important;
}
.footer-status.vote-status-bar{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  flex:1 1 auto !important;
}
.footer-status .mini-status{
  min-width:110px !important;
  width:auto !important;
  height:48px !important;
  padding:6px 10px !important;
  border-radius:13px !important;
  display:grid !important;
  grid-template-columns:auto auto !important;
  gap:2px 8px !important;
  align-items:center !important;
}
.footer-status .mini-status span{font-size:12px !important;line-height:1 !important;}
.footer-status .mini-status b{font-size:18px !important;line-height:1 !important;}
.footer-status .mini-status em{grid-column:1/-1 !important;font-size:11px !important;line-height:1 !important;padding:3px 9px !important;}
.footer-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.reset-votes-btn{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:16px;
  font-size:17px;
  font-weight:1000;
  padding:15px 24px;
  white-space:nowrap;
}
.reset-votes-btn:hover{border-color:var(--yellow);background:rgba(255,204,0,.12);}
.submit-btn{padding:15px 30px !important;}
@media (max-width:820px){
  .submit-footer{flex-direction:column !important;align-items:stretch !important;}
  .footer-status.vote-status-bar{justify-content:flex-start !important;}
  .footer-actions{justify-content:flex-end;}
  .vote-shell{padding-bottom:150px !important;}
}


/* Google official login modal */
.google-login-panel{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
}
.google-login-panel.show{display:flex;}
.google-login-box{
  position:relative;
  width:min(380px,calc(100vw - 40px));
  padding:24px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(28,28,28,.98),rgba(10,10,10,.98));
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  color:#fff;
  text-align:center;
}
.google-login-box b{
  display:block;
  margin:4px 40px 8px;
  font-size:24px;
  font-weight:1000;
}
.google-login-box p{
  margin:0 0 18px;
  color:#cfcfcf;
  font-size:14px;
  line-height:1.45;
}
.google-login-close{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:22px;
  line-height:1;
}
.google-login-close:hover{
  border-color:var(--yellow);
  background:rgba(255,204,0,.16);
}
#googleSignInButton{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#loginBtn.logged-in{
  border-color:rgba(87,227,137,.45);
  background:rgba(87,227,137,.12);
  color:#caffdd;
}

/* === 2026-05 compact voting layout update ===
   1) Remove oversized title area.
   2) Make tabs/search/pack filter more compact.
   3) Limit the left song/list area to about 3.5 rows so voting controls are reached faster. */
.vote-header{
  padding:8px 14px 10px !important;
}
.vote-header .brand-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin:0 0 8px 0 !important;
}
.vote-header .brand-main{
  display:none !important;
}
.vote-header .header-right{
  width:auto !important;
  min-width:0 !important;
  flex:0 0 auto !important;
  margin-left:auto !important;
}
.vote-header .header-actions .ghost-btn,
.vote-header .header-actions .admin-link.small{
  min-height:38px !important;
  padding:8px 14px !important;
  border-radius:12px !important;
  font-size:14px !important;
}
.vote-header .section-tabs{
  margin:0 0 8px 0 !important;
  gap:7px !important;
}
.vote-header .section-tab{
  padding:10px 16px !important;
  font-size:15px !important;
  min-height:42px !important;
}
.vote-header .section-tab small{
  font-size:9px !important;
}
.vote-header .search-row{
  gap:7px !important;
}
.vote-header .search-select,
.vote-header .search-input{
  padding:9px 12px !important;
  font-size:14px !important;
  border-radius:11px !important;
}
.vote-header #clearSearchBtn{
  padding:9px 14px !important;
  font-size:14px !important;
}
.pack-filter-panel{
  margin-top:7px !important;
  padding:8px 10px !important;
  border-radius:14px !important;
}
.pack-title-row.compact{
  margin-bottom:6px !important;
}
.pack-title-row.compact b{
  font-size:17px !important;
}
.pack-title-row.compact span{
  display:none !important;
}
.pack-current{
  margin-top:4px !important;
  font-size:11px !important;
}
.pack-chip{
  flex-basis:145px !important;
  min-height:32px !important;
  height:32px !important;
  font-size:13px !important;
  padding:5px 8px !important;
}
.pack-chip span{max-width:108px !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pack-chip small{font-size:9px !important;right:6px !important;bottom:3px !important;}
.pack-arrow{width:32px !important;height:30px !important;}
.pack-reset{height:30px !important;padding:0 12px !important;font-size:13px !important;}
.content-wrap{
  padding:10px 18px 18px !important;
}
.result-meta{
  margin:2px 0 8px !important;
  font-size:12px !important;
}
.split-vote-layout{
  min-height:0 !important;
  align-items:start !important;
}
.split-panel{
  min-height:0 !important;
  border-radius:16px !important;
}
.split-head{
  padding:10px 13px !important;
}
.split-head b{
  font-size:17px !important;
}
.split-head span{
  font-size:11px !important;
}
.result-list{
  height:286px !important;
  min-height:0 !important;
  max-height:286px !important;
  padding:8px !important;
}
.list-row{
  min-height:72px !important;
  margin-bottom:7px !important;
  padding:8px !important;
  grid-template-columns:50px 1fr !important;
  gap:10px !important;
}
.list-thumb{
  width:50px !important;
  height:50px !important;
}
.list-main b{
  font-size:15px !important;
}
.list-main small{
  font-size:12px !important;
}
.list-main em{
  font-size:11px !important;
}
.right-character-gallery{
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
}
.detail-head{
  padding:12px 14px !important;
}
.detail-head h2{
  font-size:24px !important;
}
.detail-video{
  height:220px !important;
  margin:12px 14px 8px !important;
}
.video-btn.wide{
  width:calc(100% - 28px) !important;
  margin:0 14px 12px !important;
}
.detail-vote-block{
  padding:12px 14px !important;
}
.dlc-detail-panel .dlc-hero.large{
  height:96px !important;
  margin:12px 14px !important;
}
.mini-song-list{
  max-height:220px !important;
  margin:0 14px 14px !important;
}
@media (max-width:1100px){
  .split-vote-layout{grid-template-columns:1fr !important;}
  .result-list{height:268px !important;max-height:268px !important;}
}
@media (max-width:720px){
  .vote-header{padding:7px 10px 9px !important;}
  .vote-header .brand-row{margin-bottom:6px !important;}
  .vote-header .section-tabs{gap:6px !important;}
  .vote-header .section-tab{padding:9px 13px !important;font-size:14px !important;}
  .vote-header .search-row{grid-template-columns:96px 1fr auto !important;}
  .pack-chip{flex-basis:132px !important;}
  .content-wrap{padding:8px 10px 14px !important;}
  .result-list{height:250px !important;max-height:250px !important;}
}

/* live results */
body.results-mode .search-row,
body.results-mode .pack-filter-panel,
body.results-mode .footer-actions{display:none!important;}
body.results-mode .submit-footer{justify-content:flex-end;}
.results-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;}
.results-refresh-btn{border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;border-radius:14px;padding:11px 16px;font-weight:1000;white-space:nowrap;}
.results-refresh-btn:hover{border-color:var(--yellow);background:rgba(255,204,0,.12);}
.result-rank-card{border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:20px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.25);}
.result-rank-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(255,204,0,.16),rgba(255,107,40,.08));}
.result-rank-head b{font-size:20px;}.result-rank-head span{color:#bbb;font-size:13px;}
.rank-list{display:flex;flex-direction:column;}
.rank-row{display:grid;grid-template-columns:40px 58px minmax(0,1fr) auto 88px;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.075);}
.rank-row:last-child{border-bottom:0;}
.rank-no{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2a2a2a;color:#ffe47a;font-weight:1000;}
.rank-thumb{width:54px;height:54px;border-radius:12px;overflow:hidden;background:#111;display:block;}
.rank-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.rank-pack{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;font-weight:1000;line-height:1.05;padding:4px;overflow:hidden;}
.rank-main{min-width:0;}.rank-main b{display:block;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.rank-main small{display:block;color:#aaa;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-breakdown{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.rank-breakdown em{font-style:normal;font-size:11px;color:#ccc;background:rgba(255,255,255,.075);border-radius:999px;padding:4px 7px;}
.rank-row strong{text-align:right;color:#ffe47a;font-size:18px;white-space:nowrap;}
.rank-empty{padding:24px;color:#aaa;text-align:center;}
.mini-status.results{border-color:rgba(255,204,0,.25);}
@media (max-width:980px){.results-layout{grid-template-columns:1fr;}.rank-row{grid-template-columns:34px 52px minmax(0,1fr) 72px;}.rank-breakdown{display:none;}.rank-row strong{font-size:16px;}}
@media (max-width:560px){.rank-row{grid-template-columns:30px 46px minmax(0,1fr) 64px;gap:8px;padding:10px;}.rank-thumb,.rank-pack{width:46px;height:46px}.result-rank-head b{font-size:17px}.rank-main b{font-size:14px}.rank-row strong{font-size:14px}}


/* === 2026-05 pack mapping/display fix ===
   Keep compact layout, but allow V EXTENSION 2~5 / V LIBERTY 2~4 labels to remain visible. */
.pack-chip{
  flex-basis:164px !important;
  min-width:164px !important;
  font-size:12px !important;
  letter-spacing:0 !important;
}
.pack-chip span{
  max-width:136px !important;
  padding-right:18px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.pack-chip small{
  font-size:8px !important;
  right:5px !important;
  bottom:2px !important;
}
@media (max-width:720px){
  .pack-chip{flex-basis:150px !important;min-width:150px !important;font-size:11px !important;}
  .pack-chip span{max-width:126px !important;padding-right:16px !important;}
}

/* PLI pack display should stay as PLI1~PLI4, while VL codes display as V LIBERTY. */
.pack-pli1,.pack-pli2,.pack-pli3,.pack-pli4{
  background:linear-gradient(100deg,#333,#555);
  color:#ffe47a;
  border-left:6px solid rgba(255,204,0,.85);
  border-right:6px solid rgba(255,107,40,.75);
}

/* save consent + submission summary modal */
.vote-modal{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(10px);
}
.vote-modal-card{
  width:min(760px,94vw);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#202020,#111);
  border:1px solid rgba(255,255,255,.18);border-radius:24px;box-shadow:0 26px 80px rgba(0,0,0,.6);
  padding:24px;position:relative;color:#fff;
}
.summary-card{width:min(1120px,96vw);padding-bottom:14px;}
.vote-modal-close{
  position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;font-weight:900;
}
.vote-modal-close:hover{background:rgba(255,204,0,.18);border-color:var(--yellow);}
.modal-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--yellow);font-weight:1000;margin-bottom:8px;}
.vote-modal-card h2{margin:0 44px 10px 0;font-size:30px;line-height:1.2;}
.modal-lead{margin:0 0 14px;color:#ddd;line-height:1.55;}
.modal-note{margin:12px 0 0;color:#bdbdbd;font-size:14px;line-height:1.55;background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:14px;padding:12px;}
.consent-list{margin:0;padding:12px 14px 12px 32px;border:1px solid rgba(255,204,0,.18);border-radius:16px;background:rgba(255,204,0,.06);line-height:1.7;color:#f2f2f2;}
.vote-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.modal-primary,.modal-secondary{
  border:0;border-radius:14px;padding:13px 18px;font-weight:1000;font-size:16px;
}
.modal-primary{background:linear-gradient(90deg,var(--yellow),var(--orange));color:#111;}
.modal-secondary{background:#2a2a2a;color:#fff;border:1px solid var(--line);}
.modal-secondary:hover{border-color:var(--yellow);background:rgba(255,204,0,.1);}
.summary-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px;}
.summary-section{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.045);overflow:hidden;}
.summary-section.empty{opacity:.72;}
.summary-section.empty p{margin:0;padding:0 16px 16px;color:#aaa;}
.summary-section-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(255,204,0,.12),rgba(255,107,40,.05));}
.summary-section-head h3{margin:0;font-size:19px;}.summary-section-head span{font-size:13px;color:#ffe47a;font-weight:1000;white-space:nowrap;}
.summary-label{font-size:13px;color:#bbb;font-weight:1000;margin:13px 16px 8px;}
.summary-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;padding:0 14px 14px;}
.favorite-grid .summary-mini-card{border-color:rgba(255,204,0,.38);background:rgba(255,204,0,.07);}
.summary-mini-card{min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(0,0,0,.22);overflow:hidden;display:flex;gap:9px;padding:9px;align-items:center;}
.summary-thumb,.summary-pack{width:54px;height:54px;border-radius:12px;overflow:hidden;background:#111;flex:0 0 auto;}
.summary-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.summary-pack{display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;font-size:10px;font-weight:1000;line-height:1.05;color:#fff;}
.summary-mini-body{min-width:0;display:flex;flex-direction:column;gap:3px;}
.summary-mini-body b{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.summary-mini-body small{font-size:11px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.summary-tier{font-style:normal;align-self:flex-start;border-radius:999px;padding:3px 7px;font-size:10px;font-weight:1000;background:rgba(255,255,255,.1);color:#eee;}
.summary-tier.favorite{background:rgba(255,204,0,.2);color:#ffe47a;}.summary-tier.love{background:rgba(255,122,184,.16);color:#ff9fd0;}.summary-tier.normal{background:rgba(106,169,255,.16);color:#9cc8ff;}.summary-tier.simple{background:rgba(87,227,137,.16);color:#92ffbd;}
.summary-tier em{font-style:normal;margin-left:3px;}
.summary-empty-line{grid-column:1/-1;color:#888;border:1px dashed var(--line);border-radius:12px;padding:12px;text-align:center;font-size:13px;}
.sticky-actions{position:sticky;bottom:0;margin:18px -24px -14px;padding:12px 24px 0;background:linear-gradient(180deg,rgba(17,17,17,0),#111 38%);}
@media (max-width:860px){.summary-sections{grid-template-columns:1fr;}.vote-modal-card h2{font-size:25px;}.summary-card-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}}
@media (max-width:560px){.vote-modal{padding:10px;align-items:flex-end;}.vote-modal-card{border-radius:20px;padding:18px;max-height:94vh;}.summary-card{width:100%;}.summary-card-grid{grid-template-columns:1fr 1fr;padding-left:10px;padding-right:10px;}.summary-mini-card{gap:7px;padding:7px;}.summary-thumb,.summary-pack{width:46px;height:46px}.vote-modal-actions{flex-direction:column-reverse}.modal-primary,.modal-secondary{width:100%;}.sticky-actions{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;}}


/* result summary image download */
.summary-capture-area{
  background:linear-gradient(180deg,#202020,#151515);
  border-radius:20px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
}
.capture-title-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:10px;
}
.capture-title-row h2{margin-right:0;}
.capture-date{
  color:#aaa;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  margin-top:4px;
}
[data-action="download-image"]:disabled{opacity:.65;cursor:wait;}
@media (max-width:560px){
  .summary-capture-area{padding:14px;}
  .capture-title-row{flex-direction:column;gap:4px;}
  .capture-date{white-space:normal;}
}

/* survey input guidance */
.survey-help{
  margin: -4px 0 12px;
  color:#bbb;
  font-size:13px;
  line-height:1.45;
}
.survey-card input[type="number"],
.survey-card input[type="month"]{
  appearance:textfield;
}
.survey-card input[type="number"]::-webkit-outer-spin-button,
.survey-card input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.no-video.large{
  margin:14px;
  padding:42px 16px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:16px;
  text-align:center;
  background:rgba(255,255,255,.04);
}
.detail-video.youtube-ready{
  background:#000;
}

/* song alias / emoticon / DLC image extensions */
.emoticon-card .emoticon-image-wrap img{object-fit:contain;background:#111;}
.dlc-image-hero{
  height:156px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-bottom:1px solid var(--line);background:#222;box-shadow:inset 0 -22px 46px rgba(0,0,0,.2);
}
.dlc-image-hero.large{height:260px;border-radius:22px;border:1px solid var(--line);margin-bottom:16px;}
.dlc-image-hero img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05);}
.dlc-image-hero span{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:1;padding:8px 10px;border-radius:12px;
  background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.18));color:#fff;font-size:24px;font-weight:1000;text-shadow:0 2px 8px #000;text-align:left;
}
.dlc-image-hero:not(.large) span{font-size:20px;}
.dlc-image-hero.fallback img{display:none;}
.dlc-image-hero.fallback{background:linear-gradient(135deg,rgba(255,204,0,.28),rgba(255,90,42,.1));}
.dlc-image-hero.fallback span{position:static;background:transparent;text-align:center;font-size:26px;}
.dlc-rank-thumb img{object-fit:cover;}
@media (max-width:560px){
  .dlc-image-hero.large{height:190px;}
  .dlc-image-hero span{font-size:18px;}
}


/* admin autocomplete scroll height upgrade */
#registeredCharResults.char-auto-results,
#songAutoResults.auto-results{
  max-height:340px;
}
#songAutoResults.auto-results{
  max-height:380px;
}
@media (max-width:900px){
  #registeredCharResults.char-auto-results,
  #songAutoResults.auto-results{max-height:260px;}
}

/* admin extended managers */
.admin-app{grid-template-columns:58% 42%;grid-template-rows:auto 1fr;}
.admin-tabs{grid-column:1/-1;display:flex;gap:10px;overflow-x:auto;padding:16px 24px;background:rgba(0,0,0,.5);border-bottom:1px solid rgba(255,255,255,.12);position:sticky;top:0;z-index:30;}
.admin-tab{border:1px solid #555;background:#202020;color:#fff;border-radius:999px;padding:13px 18px;font-weight:900;white-space:nowrap;}
.admin-tab.active{background:linear-gradient(90deg,#ffcc00,#ff6b28);color:#111;border-color:transparent;}
.admin-tab-panel{display:none;}
.admin-tab-panel.active{display:block;}
.left-panel.admin-tab-panel.active,.right-panel.admin-tab-panel.active{display:block;}
.admin-manager.admin-tab-panel.active{display:block;grid-column:1/-1;min-height:calc(100vh - 78px);padding:30px;background:rgba(0,0,0,.28);}
.admin-manager-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12);}
.admin-manager-head h1{font-size:38px;margin:8px 0;}.admin-manager-head p{color:#cfcfcf;margin:0;line-height:1.5;}
.admin-form-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.2fr);gap:20px;align-items:start;}
.admin-form-card{background:#181818;border:1px solid #444;padding:18px;display:flex;flex-direction:column;gap:12px;}
.admin-form-card input,.admin-form-card textarea{background:#222;border:1px solid #555;color:white;padding:14px;font-size:16px;}
.admin-big-textarea,#charAliases{min-height:150px;line-height:1.5;resize:vertical;}
#charAliases{height:150px;}
.admin-large-results.auto-results,#registeredCharResults.char-auto-results,#songAutoResults.auto-results{max-height:460px;}
#songAutoResults.auto-results{max-height:520px;}
.admin-db-list{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow-y:auto;background:#111;border:1px solid #444;padding:10px;}
.admin-db-item{background:#242424;border-left:4px solid #ffcc00;padding:12px;cursor:pointer;line-height:1.45;}
.admin-db-item:hover,.auto-item:hover{background:#303030;}
.media-item{display:flex;gap:12px;align-items:center;}.media-item img{width:64px;height:64px;object-fit:cover;background:#333;border:1px solid #555;}
.preview-image.wide{width:360px;max-width:100%;height:200px;object-fit:cover;}
@media (max-width:900px){
  .admin-app{grid-template-columns:1fr;}
  .admin-form-grid{grid-template-columns:1fr;}
  .admin-manager-head{flex-direction:column;}
  .admin-large-results.auto-results,#registeredCharResults.char-auto-results,#songAutoResults.auto-results{max-height:320px;}
}


/* DLC detail hero image: the large right panel is the registered DLC image slot. */
.dlc-detail-panel .dlc-image-hero.large{
  height:340px !important;
  margin:0 0 16px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:#101010;
}
.dlc-detail-panel .dlc-image-hero.large img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.dlc-detail-panel .dlc-image-hero.large span{display:none;}
.dlc-detail-panel .dlc-image-hero.large.fallback{
  background:linear-gradient(135deg,rgba(255,204,0,.20),rgba(255,90,42,.08));
}
.dlc-detail-panel .dlc-image-hero.large.fallback span{
  display:block;
  position:static;
  background:transparent;
  text-align:center;
  font-size:24px;
  color:#fff;
  text-shadow:0 2px 8px #000;
}
@media (max-width:560px){
  .dlc-detail-panel .dlc-image-hero.large{height:220px !important;}
}


/* DLC list album art: use registered DLC images on the left list too. */
.dlc-row{
  grid-template-columns:86px minmax(0,1fr) !important;
}
.dlc-list-image{
  width:86px !important;
  height:58px !important;
  border-radius:8px !important;
  overflow:hidden !important;
  background:#111 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
}
.dlc-list-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.dlc-list-image span{
  display:none !important;
}
.dlc-list-image.fallback{
  background:linear-gradient(135deg,rgba(255,204,0,.30),rgba(255,90,42,.12)) !important;
}
.dlc-list-image.fallback span{
  display:block !important;
  position:static !important;
  background:transparent !important;
  color:#fff !important;
  font-size:11px !important;
  line-height:1.2 !important;
  text-align:center !important;
  padding:4px !important;
}
@media (max-width:560px){
  .dlc-row{grid-template-columns:74px minmax(0,1fr) !important;}
  .dlc-list-image{width:74px !important;height:50px !important;}
}


/* admin memory-safe list mode */
.admin-list-info{
  padding:10px 12px;
  margin:0 0 8px;
  border:1px solid rgba(255,204,0,.28);
  background:rgba(255,204,0,.08);
  color:#ffd84a;
  border-radius:10px;
  font-size:13px;
  font-weight:800;
}
.song-item.song-item-text-only{
  display:grid;
  grid-template-columns:72px 1fr;
  align-items:center;
  min-height:76px;
}
.song-item.song-item-text-only img{display:none!important;}
.song-list-index{
  width:54px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,204,0,.28);
  border-radius:10px;
  color:#ffcc00;
  background:rgba(255,204,0,.08);
  font-weight:900;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.character-card img,.media-item img,.char-auto-item img{
  content-visibility:auto;
}

/* results survey expansion */
.result-survey-card{
  grid-column:1/-1;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.button-pop-card,.difficulty-rank-card{padding:18px;border-bottom:1px solid var(--line);}
.survey-result-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;}
.survey-result-title b{font-size:18px;}
.survey-result-title span{font-size:13px;color:#bbb;}
.button-pop-bar{height:56px;border-radius:999px;overflow:hidden;display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);}
.button-pop-segment{display:flex;align-items:center;justify-content:center;min-width:0;color:#fff;font-size:16px;font-weight:900;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.25);}
.button-pop-segment:empty{display:none;}
.button-pop-segment.btn-4b{background:#6b48f2;}
.button-pop-segment.btn-5b{background:#91d8c8;}
.button-pop-segment.btn-6b{background:#f4ca8b;}
.button-pop-segment.btn-8b{background:#ed8fb1;}
.button-pop-segment.note-circle{background:linear-gradient(90deg,#5ac8ff,#6aa9ff);}
.button-pop-segment.note-bar{background:linear-gradient(90deg,#ffcc00,#ff6b28);}
.note-pop-bar{margin-bottom:2px;}

.difficulty-result-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px;padding:18px;border-bottom:1px solid var(--line);}
.difficulty-chart-card{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(0,0,0,.18);overflow:hidden;}
.difficulty-chart-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(90deg,rgba(255,204,0,.14),rgba(106,169,255,.08));border-bottom:1px solid rgba(255,255,255,.08);}
.difficulty-chart-head b{font-size:22px;color:#fff;}
.difficulty-chart-head span{color:#bbb;font-size:13px;}
.difficulty-stats{display:flex;gap:10px;padding:12px 16px;color:#bbb;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08);}
.difficulty-stats b{color:#fff;font-size:16px;}
.difficulty-bins{display:flex;flex-direction:column;gap:5px;padding:12px 16px 16px;}
.difficulty-bin-row{display:grid;grid-template-columns:128px minmax(0,1fr) 34px;gap:10px;align-items:center;min-height:24px;font-size:12px;color:#cfcfcf;}
.difficulty-bin-row i{display:block;height:14px;border-radius:999px;background:var(--bar-color,var(--yellow));box-shadow:0 0 12px rgba(255,204,0,.14);}
.difficulty-bin-row em{font-style:normal;text-align:right;color:#ddd;}
.difficulty-rank-table{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:8px;}
.difficulty-rank-row{display:grid;grid-template-columns:32px 1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);}
.difficulty-rank-row span{color:var(--yellow);font-weight:900;}
.difficulty-rank-row b{font-size:16px;}
.difficulty-rank-row em{font-style:normal;color:#ddd;font-weight:800;}
.difficulty-rank-row small{color:#aaa;}
.rank-empty.small{padding:10px;color:#aaa;}
@media (max-width:900px){
  .difficulty-result-grid,.difficulty-rank-table{grid-template-columns:1fr;}
  .button-pop-segment{font-size:13px;}
}
@media (max-width:560px){
  .button-pop-bar{height:44px;}
  .button-pop-segment{font-size:11px;}
  .difficulty-rank-row{grid-template-columns:28px 1fr;}
  .difficulty-rank-row em,.difficulty-rank-row small{grid-column:2;color:#bbb;}
}

/* compact emoticon cards: image + select button only */
.emoticon-compact-card{
  height:auto;
  min-height:0;
}
.emoticon-compact-card .emoticon-image-wrap{
  height:220px;
  border-bottom:1px solid var(--line);
}
.emoticon-compact-card .emoticon-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#111;
}
.emoticon-simple-controls{
  margin-top:0;
  padding:12px;
}
@media (max-width:700px){
  .emoticon-compact-card .emoticon-image-wrap{height:180px;}
}

/* composer vote */
.composer-card{height:430px;}
.composer-letter-art{background:linear-gradient(135deg,rgba(255,204,0,.28),rgba(255,90,42,.12));}
.composer-letter-art span{display:flex;align-items:center;justify-content:center;width:86%;height:74%;border-radius:18px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.16);color:#ffe47a;font-size:42px;font-weight:1000;letter-spacing:.02em;text-align:center;line-height:1;overflow:hidden;text-shadow:0 8px 20px rgba(0,0,0,.35);}
.composer-card-body{min-height:116px;}
.composer-title{-webkit-line-clamp:2;}
.composer-sub{min-height:22px;}
.composer-badge{background:rgba(255,204,0,.18);color:#ffe066;border:1px solid rgba(255,204,0,.28);}
.composer-rank-thumb{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--yellow),var(--orange));color:#111;font-size:26px;font-weight:1000;}
@media (max-width:560px){.composer-card{height:420px}.composer-letter-art span{font-size:32px;border-radius:14px}}

/* composer split UI + limited list */
.list-more-btn{
  width:100%;border:1px dashed rgba(255,204,0,.45);background:rgba(255,204,0,.10);color:#ffe47a;
  border-radius:14px;padding:13px 14px;font-weight:1000;margin:8px 0 2px;
}
.list-more-btn:hover{background:rgba(255,204,0,.18);border-color:rgba(255,204,0,.75);}
.composer-vote-mode .right-panel{min-height:520px;}
.composer-list-thumb{
  width:58px;height:58px;border-radius:12px;background:linear-gradient(135deg,rgba(255,204,0,.28),rgba(255,90,42,.14));
  border:1px solid rgba(255,204,0,.28);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.composer-list-thumb span{font-size:18px;font-weight:1000;color:#ffe47a;letter-spacing:.02em;text-align:center;line-height:1;text-shadow:0 5px 14px rgba(0,0,0,.42);}
.composer-detail-panel{border:1px solid rgba(255,204,0,.22);border-radius:22px;background:linear-gradient(135deg,rgba(255,204,0,.13),rgba(0,0,0,.45));overflow:hidden;min-height:100%;}
.composer-detail-head{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);gap:28px;align-items:center;padding:30px;border-bottom:1px solid var(--line);}
.composer-detail-art{height:300px;border-radius:0;border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 44px rgba(0,0,0,.28);}
.composer-detail-art span{font-size:64px;width:86%;height:72%;}
.composer-detail-head h2{font-size:48px;margin:8px 0 8px;line-height:1.05;word-break:break-word;}
.composer-detail-head p{color:#ddd;font-size:18px;margin:0 0 22px;}
.composer-detail-controls{padding:0;border-top:0;background:transparent;max-width:340px;}
.composer-detail-panel .detail-section{padding:24px 30px;}
.composer-detail-panel .mini-song-list{max-height:420px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;}
.composer-detail-panel .mini-song-row{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 13px;color:#ddd;}
.composer-rank-thumb{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--yellow),var(--orange));color:#111;font-size:26px;font-weight:1000;}
@media (max-width:900px){
  .composer-detail-head{grid-template-columns:1fr;padding:18px;gap:16px;}
  .composer-detail-art{height:220px;}
  .composer-detail-head h2{font-size:34px;}
}
@media (max-width:560px){
  .composer-detail-art{height:170px;}
  .composer-detail-art span{font-size:42px;}
  .composer-detail-panel .mini-song-list{grid-template-columns:1fr;}
}

/* composer image support */
.composer-image-box{display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:#111;border:0!important;box-shadow:none!important;padding:0!important;}
.composer-image-box img{width:100%;height:100%;object-fit:cover;background:#111;display:block;}
.composer-letter-box{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.composer-letter-box span{display:flex;align-items:center;justify-content:center;width:86%;height:74%;border-radius:18px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.16);color:#ffe47a;font-weight:1000;letter-spacing:.02em;text-align:center;line-height:1;overflow:hidden;text-shadow:0 8px 20px rgba(0,0,0,.35);}
.composer-list-thumb .composer-image-box{border-radius:12px;}
.composer-list-thumb .composer-letter-box span{font-size:18px;}
.composer-detail-art .composer-image-box{border-radius:0;}
.composer-detail-art .composer-letter-box span{font-size:64px;}
.card-image-wrap.composer-letter-art .composer-letter-box span{font-size:42px;}
.composer-rank-thumb .composer-image-box{border-radius:8px;}
.composer-rank-thumb .composer-letter-box span{font-size:18px;border-radius:8px;width:100%;height:100%;}