.sn-karaoke{--kr-brand:var(--main-color,#036444);--kr-line:#d5e3dc;--kr-muted:#596d63;box-sizing:border-box;width:100%;max-width:none;margin:0;padding:8px 0 40px;color:var(--main-text-color,#475569);font-size:15px;line-height:1.5}.sn-karaoke *{box-sizing:border-box}.sn-karaoke [hidden]{display:none!important}.sn-karaoke h1{font-size:28px;margin:6px 0}.sn-karaoke h2{font-size:20px;margin:0 0 12px}.sn-karaoke p{margin:8px 0}.sn-karaoke a{color:var(--kr-brand)}.sn-karaoke button,.sn-karaoke .kr-button{min-height:44px;padding:10px 15px;border:1px solid var(--kr-line);border-radius:10px;background:white;color:var(--main-text-color,#475569);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:6px}.sn-karaoke button:hover{background:#edf5f2;border-color:#8fb7a4}.sn-karaoke button:disabled{opacity:.5;cursor:wait}.sn-karaoke .kr-primary{background:var(--kr-brand);border-color:var(--kr-brand);color:white}.sn-karaoke .kr-danger{color:#a32130}.sn-karaoke input:not([type=checkbox]):not([type=range]),.sn-karaoke select{width:100%;min-height:44px;padding:10px 12px;border:1px solid #b8c9d6;border-radius:9px;background:white;color:var(--main-text-color,#475569);font:inherit;min-width:0}.sn-karaoke input[type=checkbox]{width:19px;height:19px;accent-color:var(--kr-brand);vertical-align:middle;margin-right:6px}.sn-karaoke input[type=range]{width:100%;accent-color:var(--main-highlight-color,#ED4408)}.sn-karaoke label{display:block}.sn-karaoke :focus-visible{outline:3px solid var(--main-highlight-color,#ED4408);outline-offset:2px}.kr-heading,.kr-room-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}.kr-heading p,.kr-panel>p,.kr-card small,.kr-legal{color:var(--kr-muted)}.kr-panel{padding:22px;background:#fff;border:1px solid var(--kr-line);border-radius:16px;margin-bottom:18px}.kr-lobby,.kr-workspace{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.kr-lobby form{display:grid;gap:12px}.kr-nav{display:inline-flex;gap:4px;padding:4px;margin-bottom:24px;max-width:100%;background:#eaf0ed;border:1px solid var(--kr-line);border-radius:12px;overflow-x:auto}.kr-nav a{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:8px;font-weight:600;white-space:nowrap;text-decoration:none;color:#496255}.kr-nav a:hover{background:#fff}.kr-nav a.is-active{background:var(--main-highlight-color,#ED4408);color:#fff;box-shadow:0 2px 5px #0001}.kr-inline,.kr-source-tabs,.kr-controls,.kr-player-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.kr-inline>input{flex:1;min-width:140px}.kr-inline h2{margin-right:auto}.kr-source-tabs{margin:18px 0}.kr-source-tabs button{padding:8px 10px;font-size:13px}.kr-now{padding:24px;border-radius:16px;background:#123e30;color:#fff;display:grid;grid-template-columns:1fr auto;gap:18px;margin-bottom:20px}.kr-eyebrow{color:#afd3c1;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px}.kr-now h2{margin:7px 0;overflow-wrap:anywhere}.kr-now p{color:#d9ebe2}.kr-time{min-width:150px;align-self:center}.kr-time span{display:block;margin-bottom:8px}.kr-time progress{width:100%;height:7px;accent-color:var(--main-highlight-color,#ED4408)}.kr-controls{grid-column:1/-1;border-top:1px solid #416253;padding-top:18px}.kr-controls label{max-width:180px;flex:1;min-width:115px}.kr-check{display:flex!important;align-items:center;font-size:14px}.kr-controls .kr-check{max-width:240px}.kr-warning{padding:12px 16px;background:#fff5df;color:#7d5018;border-radius:10px;margin-bottom:16px}.kr-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:15px 0;border-bottom:1px solid #e3ece6}.kr-card:last-child{border:0}.kr-card img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.kr-card h3{font-size:15px;line-height:1.4;margin:0 0 5px;overflow-wrap:anywhere}.kr-card small{display:block}.kr-card .kr-card-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.kr-card-actions button{font-size:13px;min-height:42px;padding:8px 11px}.kr-singer{display:grid;grid-template-columns:1fr;gap:8px;flex:1;min-width:150px}.kr-singer input:not([type=checkbox]){min-height:40px!important}.kr-drag{cursor:grab;touch-action:none}.kr-member,.kr-room-link{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--kr-line);align-items:center}.kr-room-link a{font-weight:600}.kr-tabs{display:none}.kr-legal{font-size:12px;margin-top:24px;line-height:1.8}.kr-stage{background:#101b16;aspect-ratio:16/9;min-height:200px;position:relative;display:flex;justify-content:center;align-items:center}.kr-stage iframe{width:100%;height:100%;min-height:200px;position:absolute;inset:0;border:0}.kr-stage:fullscreen{height:100vh;width:100vw;aspect-ratio:auto}.kr-stage #kr-player-idle{text-align:center;color:#e3eee7;padding:30px}.kr-player-actions{margin:14px 0 22px}.is-player{max-width:none}.is-player .kr-workspace,.is-player .kr-tabs{display:none}.is-player .kr-heading p,.is-player .kr-nav{display:none}.sn-karaoke dialog{border:0;border-radius:18px;padding:24px;max-width:min(94vw,440px);color:var(--main-text-color,#475569);box-shadow:0 15px 80px #0005}.sn-karaoke dialog::backdrop{background:#102a2099}.sn-karaoke dialog img{display:block;max-width:100%;height:auto;margin:10px auto}.sn-karaoke dialog form{margin-top:12px}.kr-welcome{max-width:680px;margin:30px auto;display:grid;gap:16px}.kr-policy{max-width:900px}.kr-policy p{margin:18px 0}.kr-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}#kr-notice:not(:empty){position:static;background:#edf7f1;color:#205b40;border:1px solid #b6d3c3;padding:12px 16px;border-radius:10px;margin-bottom:16px}#kr-connection{font-size:13px;color:var(--kr-muted)}#kr-queue-count{font-size:13px;background:#edf5f2;padding:3px 8px;border-radius:20px}.kr-panel summary{font-weight:600;cursor:pointer;min-height:30px}.kr-empty{padding:22px 0;color:var(--kr-muted)}
@media(max-width:700px){.sn-karaoke{padding:16px 12px 85px}.sn-karaoke h1{font-size:23px}.kr-heading{margin-bottom:18px}.kr-heading p{font-size:13px}.kr-lobby,.kr-workspace{grid-template-columns:1fr;gap:0}.kr-panel{padding:16px}.kr-now{padding:18px;grid-template-columns:1fr;gap:12px}.kr-time{width:100%}.kr-controls{gap:8px}.kr-controls button{flex:1;white-space:nowrap;padding:8px}.kr-controls label{max-width:none}.kr-tabs{display:flex;gap:8px;margin-bottom:12px}.kr-tabs button{flex:1}.kr-workspace[data-tab=search] #kr-queue-panel,.kr-workspace[data-tab=queue] #kr-search-panel{display:none}.kr-card{grid-template-columns:92px minmax(0,1fr);gap:10px}.kr-card img{width:92px}.kr-card-actions{gap:6px}.kr-singer{flex-basis:100%}.kr-source-tabs{gap:5px}.kr-source-tabs button{flex:1;padding:8px 5px}.kr-stage{min-height:220px}.kr-room-heading{gap:8px}.kr-nav a{padding:7px 10px;font-size:13px}.kr-player-actions button{flex:1}.is-player .kr-now{margin-top:14px}}

.sn-karaoke .kr-now h2{color:#fff}.sn-karaoke .kr-primary:hover{background:#064e38;color:#fff}.sn-karaoke .kr-stage h2{color:#fff}

.kr-field-label{position:relative;display:flex;align-items:center;gap:6px}.kr-help{display:inline-flex}.sn-karaoke .kr-help-trigger{min-height:28px;width:28px;padding:0;border:0;border-radius:50%;color:var(--kr-muted);background:transparent}.sn-karaoke .kr-help-trigger:hover{color:var(--main-highlight-color,#ED4408);background:#f3f6f4}.kr-help-content{pointer-events:none;display:none;position:absolute;top:calc(100% + 6px);left:0;width:min(360px,100%);padding:12px 14px;border-radius:9px;background:#173d31;color:white;font-size:13px;font-weight:400;line-height:1.6;z-index:30;box-shadow:0 6px 18px #0002}.kr-help:hover .kr-help-content,.kr-help:focus-within .kr-help-content{display:block}.kr-player-actions .is-player-active{background:#edf5f2;border-color:#9dc5b1;color:var(--kr-brand)}
@media(max-width:700px){.kr-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.kr-nav a{padding:10px 6px;white-space:normal;font-size:13px}}

.sn-karaoke .kr-primary:hover{background:#064e38;border-color:#064e38;color:#fff}.kr-help.is-dismissed .kr-help-content{display:none}
.sn-karaoke button i.fa-solid,.sn-karaoke a i.fa-solid{color:inherit}.sn-karaoke button:hover{transform:none}.sn-karaoke .kr-help-trigger{box-shadow:none}
