/* Approved charcoal mockup: neutral controls, provider colors, golden favorite stars. */
body.reference-layout{background:#131415!important;color:#f7f7f8!important;font-family:Arial,'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif!important;padding:0 22px}
.reference-layout .header{position:relative!important;top:auto!important;max-width:1280px!important;margin:28px auto 0!important;border:1px solid #636467!important;border-radius:17px 17px 0 0;background:linear-gradient(120deg,#242527,#1c1d1f)!important;box-shadow:none!important}
.reference-layout .header>.wrap{display:flex;align-items:center;gap:23px;min-height:83px;padding:9px 20px!important;max-width:none!important}
.reference-layout .head-row{display:contents!important}.reference-layout .head-row>div:first-child{position:relative;min-width:330px;padding-left:66px;flex:1;line-height:1.2}
.reference-layout .brand{font-size:28px!important;font-weight:750!important;letter-spacing:-.6px!important;white-space:nowrap}
.reference-layout .brand-description{display:block!important;font-size:13px!important;line-height:1.4;margin-top:2px;color:white!important}
.reference-layout .head-row>div:first-child::before{content:'';position:absolute;left:0;top:2px;width:49px;height:46px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 54' fill='none' stroke='white' stroke-width='3.4' stroke-linejoin='round'%3E%3Crect x='3' y='10' width='50' height='40' rx='5'/%3E%3Cpath d='M3 19h50M15 3v13M41 3v13' stroke-linecap='round'/%3E%3Cpath d='M24 25v17l13-8.5z' fill='white' stroke='none'/%3E%3C/svg%3E")}
.reference-layout .tagline,.reference-layout .header-source-note,.reference-layout .header-refresh,.reference-layout .header-help,.reference-layout .header .lang{display:none!important}
.reference-layout .tabs{display:flex!important;align-items:center;gap:9px!important;flex-wrap:nowrap!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important}
body.reference-layout .tabs .tab{position:relative;min-height:38px!important;padding:8px 13px!important;background:transparent!important;border:0!important;border-radius:9px!important;color:#f5f5f6!important;white-space:nowrap;font-size:15px!important;font-weight:700!important;box-shadow:none!important}
body.reference-layout .tabs .tab::before{display:none!important}body.reference-layout .tabs .selected{background:linear-gradient(#747578,#5d5e61)!important;color:white!important}
.reference-layout .tabs .selected::after{content:'';height:3px;position:absolute;left:2px;right:2px;bottom:-9px;background:#eee;border-radius:4px}
body.reference-layout .creator-register-link{flex:none;margin:0!important;border-radius:12px!important;padding:10px 17px!important;min-height:42px!important;font-size:14px!important;font-weight:700;background:linear-gradient(#303134,#242527)!important;border:1px solid #aaa!important;white-space:nowrap}
.reference-layout .ref-menu-button{display:none}
.reference-layout main.wrap{max-width:1280px!important;margin:0 auto!important;border:1px solid #636467;border-top:0;border-radius:0 0 17px 17px;padding:20px 19px 13px!important;background:linear-gradient(115deg,#18191a,#111213)!important}
.reference-layout #guide>.guide-date-panel,.reference-layout #guide>.guide-quickbar,.reference-layout #guide>.guide-filter-disclosure,.reference-layout #guide>.preview-note,.reference-layout #guideModeNote,.reference-layout #eventStrip,.reference-layout #eventGuideNotice,.reference-layout .site-readiness,.reference-layout #guide .line:has(#guideSearch),.reference-layout #guideFilterDisclosure,.reference-layout #guide .onboarding,.reference-layout .guide-filter-summary,.reference-layout #guide .guide-status-control{display:none!important}
.reference-layout .ref-toolbar{display:grid;grid-template-columns:190px 1fr 145px 320px;align-items:center;gap:20px 16px;margin:0 10px 20px}
.reference-layout .ref-guide-heading{font-size:29px;line-height:1.4;margin:0;letter-spacing:1px;font-weight:800;white-space:nowrap}
.reference-layout .ref-guide-heading::before{content:'▦';display:inline-block;font-size:31px;margin-right:13px}
body.reference-layout #dates{display:flex!important;gap:10px!important;background:none!important;padding:0!important;border:0!important;margin:0!important;overflow:visible!important}
body.reference-layout .date,body.reference-layout .guide-identity-filters .chip{border-radius:22px!important;min-height:36px!important;padding:6px 20px!important;font-size:15px!important;font-weight:650;line-height:1.25!important;background:linear-gradient(#303134,#242527)!important;border:1px solid #626367!important;box-shadow:none!important;color:#f6f6f7!important;white-space:nowrap}
body.reference-layout .date.selected,body.reference-layout .guide-identity-filters .chip.selected{background:linear-gradient(#909194,#7b7c80)!important;color:white!important;border-color:#96979b!important;box-shadow:none!important}
.reference-layout #layoutFilters{display:flex!important;gap:0!important;border:1px solid #626367!important;border-radius:20px!important;overflow:hidden!important;min-height:36px!important;background:#242527!important}
body.reference-layout #layoutFilters .chip{font-size:15px!important;padding:6px 19px!important;min-height:34px!important;border-radius:19px!important;border:0!important;background:transparent!important;color:white!important;box-shadow:none!important;flex:1}
body.reference-layout #layoutFilters .selected{background:linear-gradient(#939497,#797a7e)!important;color:white!important}
body.reference-layout #guideSearch{display:block!important;width:100%!important;height:39px!important;min-width:0!important;margin:0!important;border:1px solid #77787b!important;border-radius:12px!important;background:#27282a!important;color:white!important;font-size:14px!important;padding:8px 14px!important}
.reference-layout .guide-identity-filters{grid-column:1/-1;display:flex!important;gap:28px!important;margin:0!important;border:0!important;padding:0!important;align-items:center;flex-wrap:wrap!important}
.reference-layout #guideProviderFilters,.reference-layout #guideStyleFilters{gap:10px;flex-wrap:nowrap!important}
.reference-layout #guideStyleFilters{padding-left:25px;border-left:1px solid #888}
.reference-layout .guide-identity-filters .filter-label{color:white!important;font-size:15px!important;font-weight:650;white-space:nowrap}
body.reference-layout .guide-identity-filters .chip{padding:7px 19px!important;min-height:35px!important;font-size:14px!important}
.reference-layout #guideProviderFilters [data-identity-filter=Twitch] .provider-dot,.reference-layout #guideProviderFilters [data-identity-filter=TwitCasting] .provider-dot{display:inline-flex;justify-content:center;align-items:center;width:20px;height:23px;border-radius:5px;color:white;background:#a024ff;font-size:14px}
.reference-layout #guideProviderFilters [data-identity-filter=TwitCasting] .provider-dot{background:#00aeed}
body.reference-layout #schedule{display:block!important;margin:0!important;padding:0!important;min-height:0!important}
.ref-hour-group{display:grid;grid-template-columns:92px minmax(0,1fr);padding:7px 11px 5px 15px;border:1px solid #3d3e41;border-radius:14px;margin-bottom:10px;background:linear-gradient(110deg,#2a2b2d,#232426);box-shadow:0 5px 15px #0002}
.ref-hour{font-size:27px;line-height:1.3;margin:2px 0 0;font-weight:750;letter-spacing:-.7px}
.ref-hour-rows{min-width:0}.ref-row{display:grid;grid-template-columns:154px 49px 130px minmax(100px,1fr) 193px 32px;gap:14px;align-items:center;min-height:76px;padding:0 0 4px;position:relative}
.ref-row+.ref-row{border-top:1px solid #4d4e50;padding-top:5px}
.ref-thumb,.ref-avatar,.ref-event-picture{display:block;flex:none;background-repeat:no-repeat;border-radius:7px;overflow:hidden}
.ref-thumb{width:154px;height:66px}.ref-avatar{width:49px;height:49px;border-radius:50%;box-shadow:0 0 0 1px #ffffff5c}
.ref-identity{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}.ref-name{font-size:18px;white-space:nowrap}.ref-style{font-size:12px;line-height:1;padding:3px 9px;border:1px solid #696a6d;border-radius:13px;background:#393a3c;white-space:nowrap}
.ref-content{border-left:1px solid #8b8c8d;padding-left:22px;min-width:0}.ref-title{font-size:18px;line-height:1.45;margin:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ref-description{font-size:13px;line-height:1.4;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eee}
.ref-badges{display:flex;justify-content:space-between;align-items:center;gap:8px}.ref-provider{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.2;font-weight:700;border-radius:7px;padding:5px 8px;color:white;white-space:nowrap;box-shadow:inset 0 1px 1px #ffffff30}.ref-provider.twitch{background:linear-gradient(#af36ff,#8214eb)}.ref-provider.casting{background:linear-gradient(#00b9ff,#0096d8)}.ref-provider-icon{font-size:16px;line-height:12px}.ref-status{font-size:12px;font-weight:700;white-space:nowrap;background:linear-gradient(#747578,#555658);border:1px solid #858689;border-radius:13px;padding:5px 9px;line-height:1.1}.ref-status.live{background:#064d25;border-color:transparent}.ref-status.live::before{content:'';display:inline-block;background:#00ef6b;border-radius:50%;width:10px;height:10px;margin-right:4px}
body.reference-layout .ref-star{display:flex!important;justify-content:center;align-items:center;width:32px!important;min-width:32px!important;height:38px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#f5f5f5!important}.ref-star svg{width:29px!important;height:29px!important}body.reference-layout .ref-star.on{color:#ffc64b!important}body.reference-layout .ref-star.on svg{fill:#ffc64b!important}
.ref-more{display:block;margin:3px auto 7px;color:#bdbec2;background:none;border:0;border-bottom:1px solid #5b5c60;font-size:11px;padding:2px 7px;cursor:pointer}
.ref-events{margin-top:22px}.ref-event-heading{display:flex;align-items:center;gap:22px;margin-bottom:12px}.ref-event-heading h2{font-size:28px;line-height:1.3;margin:0;letter-spacing:1px}.ref-event-heading>span{font-size:14px}.ref-event-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.ref-event-card{display:grid;grid-template-columns:49% 1fr;gap:19px 20px;padding:15px 15px 13px;position:relative;border:1px solid #424346;border-top:7px solid #9c9da1;border-radius:14px;background:linear-gradient(120deg,#303133,#242527);min-width:0}.ref-event-picture{width:100%;height:auto;aspect-ratio:1.81}.ref-event-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}.ref-event-label{background:#707174;border-radius:12px;padding:3px 11px;font-size:11px;font-weight:bold;line-height:1.2;margin-bottom:4px}.ref-event-copy h3,.ref-event-copy>strong{font-size:17px;line-height:1.4;margin:0;font-weight:750}.ref-event-copy p{font-size:12px;line-height:1.45;margin:1px 0 6px}.ref-event-button{font-size:13px;font-weight:700;padding:7px 23px;color:white;background:linear-gradient(#808185,#66676a);border:1px solid #78797c;border-radius:9px;cursor:pointer;margin-top:auto}.ref-event-button:hover{filter:brightness(1.18)}.ref-event-panel{grid-column:1/-1;border-top:1px solid #55565a;padding-top:10px}.ref-event-panel[hidden]{display:none}.ref-event-stream{display:flex;gap:10px;align-items:center;padding:6px;font-size:13px}.ref-event-stream .ref-avatar{width:35px;height:35px}.ref-event-stream .star{margin-left:auto}
.ref-demo-note{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin:0 auto 10px;padding:10px 14px;border:1px solid #9b7837;border-radius:12px;background:#30271b;color:#ffd787;font-size:13px}.ref-demo-note a{color:inherit;text-decoration:underline}.reference-layout .foot{max-width:1280px;margin:10px auto;font-size:11px}.reference-layout[data-design-demo=true] #events:has(#refEventPage)>.event-heading,.reference-layout[data-design-demo=true] #events:has(#refEventPage)>.event-toolbar,.reference-layout[data-design-demo=true] #events:has(#refEventPage)>#eventList,.reference-layout[data-design-demo=true] #events:has(#refEventPage)>#eventsNote{display:none!important}
body.reference-layout[data-guide-layout=cards] .ref-hour-rows{display:grid;grid-template-columns:1fr 1fr;gap:15px}body.reference-layout[data-guide-layout=cards] .ref-hour-group{display:block}body.reference-layout[data-guide-layout=cards] .ref-row{display:flex;flex-wrap:wrap;border:1px solid #555;padding:12px;border-radius:10px}body.reference-layout[data-guide-layout=cards] .ref-thumb{width:100%;height:auto;aspect-ratio:2.33}body.reference-layout[data-guide-layout=cards] .ref-content{border:0;padding:0;width:100%}body.reference-layout[data-guide-layout=cards] .ref-star{margin-left:auto}
@media(min-width:721px) and (max-width:1190px){.reference-layout .header>.wrap{gap:10px}.reference-layout .head-row>div:first-child{min-width:290px}.reference-layout .brand{font-size:25px!important}.reference-layout .tabs .tab{padding:8px!important;font-size:13px!important}.reference-layout .ref-toolbar{grid-template-columns:165px 1fr 135px 250px}.ref-row{grid-template-columns:135px 42px 110px minmax(100px,1fr) 171px 29px;gap:10px}.ref-thumb{width:135px;height:62px}.ref-avatar{width:42px;height:42px}.ref-name,.ref-title{font-size:16px}.ref-content{padding-left:14px}.ref-provider{font-size:11px;padding:5px}.ref-status{font-size:11px;padding:5px}.ref-hour-group{grid-template-columns:85px 1fr}.reference-layout .guide-identity-filters{gap:18px!important}.reference-layout #guideStyleFilters{padding-left:18px}.reference-layout .guide-identity-filters .chip{padding:7px 13px!important}}
@media(max-width:720px){body.reference-layout{padding:0 10px!important}.reference-layout .header{margin:12px auto 0!important;border-radius:15px 15px 0 0}.reference-layout .header>.wrap{display:grid!important;grid-template-columns:1fr 30px;padding:11px 13px 0!important;gap:13px 3px}.reference-layout .head-row>div:first-child{grid-column:1;padding-left:49px;min-width:0!important}.reference-layout .head-row>div:first-child::before{width:37px;height:37px;top:2px}.reference-layout .brand{font-size:23px!important;letter-spacing:-.7px!important}.reference-layout .brand-description{font-size:9px!important;white-space:nowrap}.reference-layout .ref-menu-button{display:block;grid-column:2;grid-row:1;border:0;background:none;color:#eee;font-size:24px;padding:0}.reference-layout .tabs{grid-column:1/-1;width:100%;justify-content:space-between;gap:2px!important;padding-bottom:12px!important}.reference-layout .tabs .tab{padding:5px 3px!important;font-size:12px!important;min-height:29px!important;border-radius:5px!important}.reference-layout .tabs .selected{background:none!important}.reference-layout .tabs .selected::after{bottom:-9px;left:1px;right:1px}.reference-layout .creator-register-link{position:absolute;right:14px;top:125px;z-index:2;font-size:11px!important;padding:8px 11px!important;min-height:34px!important;border-radius:11px!important}.reference-layout main.wrap{padding:18px 13px 12px!important}.reference-layout .ref-toolbar{grid-template-columns:1fr 108px;gap:13px 8px;margin:0 0 15px}.reference-layout .ref-guide-heading{grid-column:1/-1;font-size:23px;min-height:37px;display:flex;align-items:center;letter-spacing:0}.reference-layout .ref-guide-heading::before{font-size:25px;margin-right:9px}.reference-layout #dates{gap:5px!important;grid-column:1;grid-row:2}.reference-layout .date{font-size:12px!important;padding:6px 10px!important;min-height:30px!important}.reference-layout #layoutFilters{grid-column:2;grid-row:2;min-height:30px!important}.reference-layout #layoutFilters .chip{font-size:12px!important;padding:5px 11px!important;min-height:28px!important}.reference-layout #guideSearch{grid-column:1/-1;grid-row:3;height:36px!important;font-size:12px!important;padding:7px 11px!important;border-radius:10px!important}.reference-layout .guide-identity-filters{grid-column:1/-1;display:flex!important;flex-direction:column;align-items:stretch!important;gap:10px!important}.reference-layout #guideProviderFilters,.reference-layout #guideStyleFilters{gap:5px!important;justify-content:space-between;padding:0!important;border:0!important}.reference-layout .guide-identity-filters .filter-label{font-size:11px!important;margin:0!important}.reference-layout .guide-identity-filters .chip{font-size:10px!important;padding:5px 9px!important;min-height:27px!important;letter-spacing:-.3px}.reference-layout #guideProviderFilters .provider-dot{width:14px!important;height:17px!important;margin-right:3px;font-size:10px!important}.ref-hour-group{display:block;border-radius:11px;padding:0 8px 6px;margin-bottom:9px}.ref-hour{font-size:23px;line-height:1.3;padding:4px 0 3px;margin:0;border-bottom:1px solid #4a4b4e}.ref-row{grid-template-columns:104px minmax(0,1fr) 23px;grid-template-rows:auto auto auto;gap:3px 10px;padding:8px 0 3px;min-height:87px;align-items:center}.ref-row+.ref-row{padding-top:8px;margin-top:6px}.ref-thumb{grid-column:1;grid-row:1/4;width:104px;height:72px;border-radius:6px}.ref-row>.ref-avatar{display:none}.ref-identity{grid-column:2;grid-row:1;flex-direction:row;gap:7px;align-items:center}.ref-name{font-size:12px}.ref-style{font-size:10px;padding:3px 7px}.ref-content{grid-column:2;grid-row:2;padding:0;border:0}.ref-title{font-size:12px;line-height:1.45;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:35px}.ref-description{display:none}.ref-badges{grid-column:2;grid-row:3;justify-content:flex-start;gap:7px}.ref-provider{font-size:10px;padding:4px 6px;border-radius:5px;gap:3px}.ref-provider-icon{font-size:12px}.ref-status{font-size:10px;padding:4px 6px;border-radius:9px}.ref-status.live::before{width:8px;height:8px;margin-right:3px}body.reference-layout .ref-star{grid-column:3;grid-row:1/4;min-width:23px!important;width:23px!important;height:30px!important}.ref-star svg{width:24px!important;height:24px!important}.ref-more{font-size:10px;margin-top:8px}.ref-events{margin-top:22px}.ref-event-heading{display:block}.ref-event-heading h2{font-size:24px}.ref-event-heading>span{font-size:11px;display:block;margin-top:5px;line-height:1.7}.ref-event-grid{grid-template-columns:1fr;gap:12px}.ref-event-card{gap:11px;padding:11px;border-top-width:5px;grid-template-columns:43% 1fr}.ref-event-copy h3,.ref-event-copy>strong{font-size:12px}.ref-event-copy p{font-size:10px}.ref-event-label{font-size:9px;padding:3px 8px}.ref-event-button{font-size:11px;padding:6px 11px}.ref-event-picture{aspect-ratio:1.3}.ref-demo-note{font-size:9px}.reference-layout .foot{font-size:10px}.reference-layout.ref-menu-open .header .lang,.reference-layout.ref-menu-open .header-help,.reference-layout.ref-menu-open .header-refresh{display:inline-block!important}.reference-layout.ref-menu-open .header>.wrap{padding-bottom:12px!important}.reference-layout.ref-menu-open .creator-register-link{display:none}body.reference-layout[data-guide-layout=cards] .ref-hour-rows{grid-template-columns:1fr}body.reference-layout[data-guide-layout=cards] .ref-row{margin-top:8px}body.reference-layout[data-guide-layout=cards] .ref-identity{width:calc(100% - 40px)}}
@media(max-width:370px){.reference-layout .brand{font-size:20px!important}.reference-layout .date{padding:6px 8px!important}.reference-layout .guide-identity-filters .chip{padding:5px 6px!important}.ref-row{grid-template-columns:88px minmax(0,1fr) 21px;gap:3px 7px}.ref-thumb{width:88px;height:68px}.ref-name{font-size:11px}.ref-identity{gap:4px}.ref-style{font-size:9px;padding:3px 5px}.ref-provider,.ref-status{font-size:9px}.ref-badges{gap:4px}}
/* Final alignment against the supplied reference. */
.reference-layout .brand::before{display:none!important}
.reference-layout #guide>.guide-filter-panel{display:none!important}
body.reference-layout #layoutFilters{flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important}
body.reference-layout #dates .date{flex:0 0 auto!important;width:auto!important;min-width:84px!important}
body.reference-layout .ref-star::after{display:none!important;content:none!important}
.reference-layout .ref-provider-icon{display:inline-block;width:14px;height:14px;background-repeat:no-repeat;flex:none}
.reference-layout .foot>p{display:none}.reference-layout .foot{padding:10px 0 0!important;text-align:center;border:0!important}.reference-layout .foot .footer-links{display:inline-flex!important;gap:10px!important;margin:0 8px!important;font-size:10px}
@media(max-width:720px){body.reference-layout #dates .date{min-width:0!important}.reference-layout .ref-toolbar{margin-top:0!important}.reference-layout .foot{line-height:1.7}.reference-layout .foot .footer-links{margin:2px 5px!important}.reference-layout #refGuideEvents{display:block}}
@media(min-width:721px){.ref-row{min-height:70px;padding-bottom:0}.ref-row+.ref-row{padding-top:5px}.ref-hour-group{padding-bottom:5px}}
body.reference-layout #guideSearch::placeholder{color:#e5e5e8!important;opacity:1}
.reference-layout .ref-guide-heading::before{content:'';width:28px;height:28px;flex:none;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='24' height='22' rx='3'/%3E%3Cpath d='M4 13h24M10 3v8M22 3v8M10 19h5M10 24h3M21 18l-3 5 5-2'/%3E%3C/svg%3E")}
@media(max-width:720px){
 body.reference-layout .tabs .tab{padding:5px 2px!important;font-size:12px!important;min-height:29px!important;background:transparent!important}
 body.reference-layout .tabs .tab.selected{background:transparent!important}
 body.reference-layout .creator-register-link{font-size:11px!important;padding:8px 11px!important;min-height:34px!important}
 body.reference-layout .ref-toolbar{grid-template-columns:minmax(0,1fr) 108px;gap:13px 8px}
 body.reference-layout #dates{gap:5px!important;min-width:0!important}
 body.reference-layout #dates .date{flex:1 1 0!important;min-width:0!important;font-size:12px!important;padding:6px 8px!important;min-height:30px!important;white-space:nowrap!important}
 body.reference-layout #layoutFilters{min-width:0!important;min-height:30px!important}
 body.reference-layout #layoutFilters .chip{min-width:0!important;white-space:nowrap!important;font-size:12px!important;padding:5px 9px!important;min-height:28px!important}
 body.reference-layout #guideSearch{height:36px!important;font-size:12px!important;padding:7px 11px!important}
 body.reference-layout .guide-identity-filters .chip{font-size:10px!important;padding:5px 7px!important;min-height:27px!important;letter-spacing:-.4px!important}
 body.reference-layout .guide-identity-filters .filter-label{font-size:11px!important;margin:0!important}
 body.reference-layout #guideProviderFilters,body.reference-layout #guideStyleFilters{min-width:0!important;padding:0!important;gap:5px!important;border:0!important}
 body.reference-layout .ref-row{min-height:87px}
}

.ref-event-heading h2::before{content:'';display:inline-block;vertical-align:middle;width:32px;height:32px;margin-right:12px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 12l17-7v25l-17-7H7a5 5 0 0 1 0-11h6zM13 12v11M7 23l3 10h5l-3-10M33 12v9'/%3E%3C/svg%3E")}
body.reference-layout .brand{padding-left:0!important;background:none!important}
body.reference-layout #guideSearch{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E")!important;background-position:13px center!important;background-repeat:no-repeat!important;background-size:20px!important;padding-left:43px!important}
@media(max-width:720px){body.reference-layout #guideSearch{background-size:18px!important;background-position:11px center!important;padding-left:36px!important}}

.ref-row > .ref-open-detail {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.ref-row > .ref-star { position: relative; z-index: 2; }
.ref-row:hover { background-color: #ffffff08; }
.ref-badges .status-badge { white-space: nowrap; }

.reference-layout #detailOverlay:not([hidden]) {
  place-items: stretch end;
  padding: 0;
}
.reference-layout #detailOverlay .detail-dialog {
  width: min(440px, 100%);
  height: 100%;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 16px 0 0 16px;
  padding: 20px;
}
.reference-layout .detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.detail-panel-state { display: flex; align-items: center; gap: 9px; }
.reference-layout #detailClose { min-width: 42px; min-height: 42px; }
.reference-layout #detailMedia .detail-image { width: 100%; aspect-ratio: 16 / 9; }
.reference-layout .detail-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
}
.reference-layout #detailAvatar :is(.avatar,.ref-avatar) {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.reference-layout #detailTitle {
  font-size: 21px;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.reference-layout #detailTime { margin: 8px 0 14px; }
.reference-layout #detailActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.reference-layout .detail-watch {
  flex: 1;
  text-align: center;
  min-height: 42px;
}
.reference-layout .detail-watch:disabled { opacity: .55; cursor: default; }
.reference-layout .detail-watch-note { flex-basis: 100%; margin: 0; font-size: 12px; }

@media (max-width: 720px) {
  .reference-layout #detailOverlay:not([hidden]) { place-items: end stretch; }
  .reference-layout #detailOverlay .detail-dialog {
    width: 100%;
    height: auto;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    padding: 16px 16px max(18px, env(safe-area-inset-bottom));
  }
}

/* Keep stream status, favorites and card density as independent controls. */
body.reference-layout .ref-toolbar {
  grid-template-columns: max-content max-content minmax(max-content, 1fr) 145px minmax(180px, 320px);
  column-gap: 12px;
}
.ref-schedule-modes { display: flex; flex-wrap: nowrap; gap: 6px; }
body.reference-layout .ref-schedule-modes .chip {
  min-height: 36px;
  padding: 6px 13px !important;
  border-radius: 20px;
  font-size: 14px;
  white-space: nowrap;
}
.ref-start-time {
  display: block;
  color: #dddde2;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  margin-bottom: 2px;
}
.ref-hour-date { display: block; color: #c5c5cc; font-size: 12px; margin-bottom: 3px; }
.ref-row > img.ref-thumb { object-fit: cover; }
.ref-thumb-placeholder { display: grid; place-items: center; background: #323338; }
.ref-row > .avatar { width: 49px; height: 49px; object-fit: cover; }
@media (min-width: 721px) and (max-width: 1060px) {
  body.reference-layout .ref-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  body.reference-layout .ref-guide-heading { grid-column: 1 / -1; }
  body.reference-layout #guideSearch { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body.reference-layout .ref-toolbar {
    grid-template-columns: minmax(0, 1fr) 108px;
  }
  body.reference-layout .ref-schedule-modes { grid-column: 1 / -1; grid-row: 2; }
  body.reference-layout .ref-favorites-toggle { grid-column: 1; grid-row: 3; }
  body.reference-layout #layoutFilters { grid-column: 2; grid-row: 3; }
  body.reference-layout #guideSearch { grid-column: 1 / -1; grid-row: 4; }
  .ref-row > .avatar { display: none; }
  .ref-start-time { font-size: 11px; }
}


body.reference-layout .ref-favorites-toggle {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 10px !important;
  border-radius: 20px;
  font-size: 13px;
  white-space: nowrap;
}
.ref-favorites-state {
  min-width: 32px;
  padding: 2px 5px;
  border-radius: 10px;
  background: #222328;
  color: #e3e3ea;
  text-align: center;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
}
.ref-favorites-toggle[aria-checked="true"] .ref-favorites-state {
  background: #f5c451;
  color: #25201a;
}
@media (max-width: 720px) {
  body.reference-layout .ref-favorites-toggle {
    gap: 5px;
    min-height: 32px;
    padding: 4px 7px !important;
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  body.reference-layout .header .head-row > div:first-child > .brand-description {
    padding-left: 0;
    white-space: normal;
  }
  body.reference-layout #guideProviderFilters,
  body.reference-layout #guideStyleFilters {
    flex-wrap: wrap !important;
    justify-content: flex-start;
  }
  .reference-layout .guide-identity-filters .filter-label { flex-basis: 100%; }
  .reference-layout .ref-badges { flex-wrap: wrap; }
}