#idol-overview-view[hidden], #idol-competition-view[hidden], .ic-alert[hidden], .ic-pk-fields[hidden], .ic-lock-note[hidden], .ic-actions button[hidden] { display: none !important; }

.idol-view-tabs { display: inline-flex; gap: 5px; margin-top: 12px; padding: 4px; border: 1px solid rgba(139,161,205,.22); border-radius: 12px; background: rgba(8,18,35,.86); }
.idol-view-tabs button { min-height: 40px; border: 0; border-radius: 9px; padding: 8px 14px; display: inline-flex; align-items: center; gap: 7px; background: transparent; color: #91a4c5; font-weight: 800; cursor: pointer; }
.idol-view-tabs button.active { color: #fff; background: linear-gradient(135deg,#7457f5,#5d49d7); box-shadow: 0 8px 22px rgba(93,73,215,.28); }
.idol-view-tabs .material-symbols-rounded { font-size: 19px; }

#idol-competition-view { margin-top: 12px; }
.ic-hero { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid rgba(139,161,205,.24); border-radius: 16px; background: radial-gradient(circle at 72% 50%,rgba(116,87,245,.18),transparent 34%),linear-gradient(135deg,#0e203b,#081528); }
.ic-title { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ic-title > .material-symbols-rounded { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: #6ff4d4; background: rgba(20,184,166,.14); font-size: 31px; }
.ic-title h2 { margin: 3px 0 0; font-size: 1.32rem; }
.ic-title p { margin: 5px 0 0; max-width: 760px; color: #8fa3c3; font-size: .76rem; line-height: 1.5; }
.ic-clock { flex: 0 0 182px; display: grid; justify-items: center; padding: 12px 16px; border: 1px solid rgba(111,244,212,.25); border-radius: 14px; background: rgba(5,15,29,.72); }
.ic-clock > span { color: #6ff4d4; font-size: .65rem; font-weight: 900; letter-spacing: .08em; }
.ic-clock > strong { margin: 2px 0; color: #fff; font-size: 2rem; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.ic-clock > small { color: #7f94b6; font-size: .64rem; }

.ic-alert { margin-top: 10px; min-height: 54px; padding: 10px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(251,191,36,.4); border-radius: 12px; background: linear-gradient(135deg,rgba(245,158,11,.15),rgba(116,87,245,.12)); }
.ic-alert > .material-symbols-rounded { color: #fbbf24; font-size: 30px; }
.ic-alert div { min-width: 0; flex: 1; }
.ic-alert strong, .ic-alert small { display: block; }
.ic-alert strong { color: #fff1bb; font-size: .9rem; }
.ic-alert small { color: #aebbd0; margin-top: 3px; font-size: .69rem; }
.ic-alert button { border: 1px solid #fbbf24; border-radius: 9px; padding: 8px 12px; background: #f59e0b; color: #241700; font-weight: 900; cursor: pointer; }

.ic-layout { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 12px; margin-top: 12px; align-items: start; }
.ic-board-panel, .ic-settings { border: 1px solid rgba(139,161,205,.22); border-radius: 15px; background: rgba(9,22,40,.94); overflow: hidden; }
.ic-control-bar { min-height: 62px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(139,161,205,.18); }
.ic-control-bar > div:first-child strong, .ic-control-bar > div:first-child span { display: block; }
.ic-control-bar > div:first-child strong { color: #dcd5ff; font-size: .84rem; }
.ic-control-bar > div:first-child span { color: #8298b9; font-size: .68rem; margin-top: 2px; }
.ic-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.ic-actions button, .ic-save { min-height: 38px; border: 1px solid rgba(139,161,205,.28); border-radius: 9px; padding: 8px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: #11233e; color: #eaf1fc; font-size: .72rem; font-weight: 850; cursor: pointer; }
.ic-actions button.primary, .ic-save { border-color: #8f7aff; background: linear-gradient(135deg,#7457f5,#5d49d7); color: #fff; }
.ic-actions button.paused { border-color: #fb7185; background: linear-gradient(135deg,#e11d48,#be123c); }
.ic-actions button.danger { color: #fda4af; border-color: rgba(244,63,94,.3); background: rgba(190,18,60,.1); }
.ic-actions button:disabled, .ic-save:disabled { opacity: .38; cursor: not-allowed; }
.ic-actions .material-symbols-rounded, .ic-save .material-symbols-rounded { font-size: 18px; }

.ic-score-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 10px; padding: 13px; }
.ic-score-card { --ic-color:#7457f5; min-width: 0; padding: 13px; border: 1px solid color-mix(in srgb,var(--ic-color) 46%,transparent); border-radius: 13px; background: linear-gradient(145deg,color-mix(in srgb,var(--ic-color) 16%,#0b182c),rgba(7,17,32,.94)); }
.ic-score-card.winner { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--ic-color) 68%,transparent),0 0 25px color-mix(in srgb,var(--ic-color) 18%,transparent); }
.ic-score-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ic-score-card header span { color: #9badc8; font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.ic-score-card header b { border-radius: 999px; padding: 3px 7px; color: #072016; background: #6ff4d4; font-size: .6rem; }
.ic-score-card h3 { margin: 9px 0 3px; font-size: 1rem; }
.ic-score-card > strong { display: block; font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ic-score-card > small { color: #8298ba; font-size: .63rem; }
.ic-meter { height: 6px; margin: 12px 0 9px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.07); }
.ic-meter i { height: 100%; display: block; border-radius: inherit; background: var(--ic-color); transition: width .25s ease; }
.ic-score-card footer { display: flex; justify-content: space-between; gap: 8px; color: #94a7c4; font-size: .65rem; }
.ic-empty { grid-column: 1/-1; padding: 42px 16px; text-align: center; color: #7f94b6; }
.ic-empty.compact { padding: 24px 10px; }

.ic-feed { margin: 0 13px 13px; border: 1px solid rgba(139,161,205,.16); border-radius: 12px; overflow: hidden; }
.ic-feed > header { min-height: 43px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(18,34,58,.82); }
.ic-feed > header div { display: flex; align-items: center; gap: 6px; }
.ic-feed > header .material-symbols-rounded { color: #fbbf24; font-size: 19px; }
.ic-feed > header strong { font-size: .76rem; }
.ic-feed > header > span { color: #7086a7; font-size: .62rem; }
.ic-feed-list { max-height: 300px; overflow: auto; }
.ic-feed-list > div:not(.ic-empty) { min-height: 38px; padding: 7px 10px; display: grid; grid-template-columns: 58px minmax(90px,.7fr) minmax(120px,1fr) auto; align-items: center; gap: 8px; border-top: 1px solid rgba(139,161,205,.09); font-size: .68rem; }
.ic-feed-list time { color: #7389a9; font-variant-numeric: tabular-nums; }
.ic-feed-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-feed-list span { color: #9aacca; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-feed-list b { color: var(--ic-color); white-space: nowrap; }

.ic-settings > header { min-height: 60px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(139,161,205,.18); }
.ic-settings h3 { margin: 2px 0 0; font-size: .9rem; }
.ic-local-badge { border: 1px solid rgba(111,244,212,.26); border-radius: 999px; padding: 4px 7px; background: rgba(20,184,166,.1); color: #6ff4d4; font-size: .58rem; font-weight: 900; }
.ic-settings form { padding: 12px; }
.ic-settings label { display: grid; gap: 5px; margin-bottom: 10px; color: #91a4c5; font-size: .67rem; }
.ic-settings input, .ic-settings select { width: 100%; min-width: 0; min-height: 39px; box-sizing: border-box; border: 1px solid rgba(139,161,205,.25); border-radius: 8px; padding: 8px 9px; background: #071326; color: #edf4ff; }
.ic-settings input:disabled, .ic-settings select:disabled { opacity: .55; }
.ic-two-cols, .ic-pk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ic-switch-row { grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 9px; border: 1px solid rgba(139,161,205,.18); border-radius: 10px; background: rgba(17,34,59,.6); }
.ic-switch-row span strong, .ic-switch-row span small { display: block; }
.ic-switch-row span strong { color: #e6eefb; font-size: .72rem; }
.ic-switch-row span small { margin-top: 3px; color: #7f94b6; line-height: 1.4; }
.ic-switch-row input[type="checkbox"] { appearance: none; width: 42px; min-height: 24px; height: 24px; padding: 0; border-radius: 999px; background: #33445e; cursor: pointer; position: relative; }
.ic-switch-row input[type="checkbox"]::after { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; border-radius:50%; background:#fff; transition:.18s ease; }
.ic-switch-row input[type="checkbox"]:checked { background:#14b8a6; }
.ic-switch-row input[type="checkbox"]:checked::after { transform:translateX(18px); }
.ic-winner-tracks { padding-top: 2px; }
.ic-winner-tracks > strong { display: block; margin-bottom: 7px; color: #dce7f8; font-size: .71rem; }
.ic-winner-tracks label { grid-template-columns: 100px minmax(0,1fr); align-items: center; margin-bottom: 6px; }
.ic-winner-tracks label > span { display: flex; align-items: center; gap: 6px; min-width: 0; color: #b9c7dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-winner-tracks i { --ic-color:#7457f5; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--ic-color); }
.ic-save { width: 100%; }
.ic-lock-note { margin: 8px 0 0; color: #fcd58b; font-size: .65rem; line-height: 1.45; }

@media (max-width: 1100px) {
  .ic-layout { grid-template-columns: 1fr; }
  .ic-settings { order: -1; }
  .ic-settings form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 10px; }
  .ic-settings form > .ic-switch-row, .ic-settings form > .ic-winner-tracks, .ic-settings form > .ic-save, .ic-settings form > .ic-lock-note { grid-column: 1/-1; }
}

@media (max-width: 760px) {
  .idol-view-tabs { width: 100%; box-sizing: border-box; }
  .idol-view-tabs button { flex: 1; justify-content: center; padding-inline: 8px; }
  .ic-hero { align-items: stretch; flex-direction: column; }
  .ic-clock { flex-basis: auto; }
  .ic-control-bar { align-items: flex-start; flex-direction: column; }
  .ic-actions { width: 100%; display: grid; grid-template-columns: repeat(2,1fr); }
  .ic-actions button { width: 100%; min-height: 44px; }
  .ic-score-grid { grid-template-columns: 1fr; }
  .ic-settings form { display: block; }
  .ic-feed-list > div:not(.ic-empty) { grid-template-columns: 52px minmax(0,1fr) auto; }
  .ic-feed-list > div span { grid-column: 2/4; grid-row: 2; }
}

@media (max-width: 430px) {
  .ic-title { align-items: flex-start; }
  .ic-title > .material-symbols-rounded { width: 42px; height: 42px; }
  .ic-title p { font-size: .69rem; }
  .ic-two-cols, .ic-pk-fields { grid-template-columns: 1fr; gap: 0; }
  .ic-winner-tracks label { grid-template-columns: 1fr; }
}