/* Material artwork is decoration only: never hides live content or owns clicks. */
body.theme-style-active { --skin-nine-frame:none; --skin-material-art:none; --skin-frame-size:10px; }
body.theme-style-active :is(.titlebar,.app-sidebar,.profile-chip,.channels-panel,.info-panel),
body.theme-style-active #nowView :is(.approved-panel,.approved-metrics > div,.approved-home-hero),
body.theme-style-active #settingsOverlay :is(.settings-card,.settings-nav,.settings-header),
body.theme-style-active :is(.section-page .hub-panel,.section-page > .hub-header,.plugin-market-card,.streaming-browser,.ai-main-card,.ai-preview-panel,.server-modal) { position:relative; }
body.theme-style-active :is(.titlebar,.app-sidebar,.profile-chip,.channels-panel,.info-panel)::after,
body.theme-style-active #nowView :is(.approved-panel,.approved-metrics > div,.approved-home-hero)::after,
body.theme-style-active #settingsOverlay :is(.settings-card,.settings-nav,.settings-header)::after,
body.theme-style-active :is(.section-page .hub-panel,.section-page > .hub-header,.plugin-market-card,.streaming-browser,.ai-main-card,.ai-preview-panel,.server-modal)::after {
  content:"" !important; display:block !important; position:absolute; inset:0; pointer-events:none !important;
  border:var(--skin-frame-size) solid transparent; border-image:var(--skin-nine-frame) 22% / 22px / 0 stretch;
  background:none !important; opacity:1; z-index:4; box-shadow:none !important; transform:none !important; animation:none !important;
}
body.theme-style-active #nowView .approved-panel { background-image:var(--skin-material-art) !important; background-color:var(--skin-panel) !important; background-size:256px 256px !important; }
body.theme-style-active #nowView .approved-metrics > div { background-image:var(--skin-material-art) !important; background-color:var(--skin-deep) !important; background-size:256px 256px !important; }
body.theme-style-active .app-sidebar { background-image:var(--skin-material-art) !important; background-color:var(--skin-deep) !important; background-size:256px 256px !important; }
body.theme-style-active #nowView .approved-panel > header { min-height:44px; padding-inline:20px; }
body.theme-style-active #nowView .approved-panel > header :is(h2,button) { position:relative; z-index:5; }
body.theme-style-active #nowView .approved-panel > .approved-panel-body { padding-inline:18px; }
body.theme-style-active .app-sidebar .rail-item { grid-template-columns:34px minmax(0,1fr); gap:11px; padding-block:5px; }
body.theme-style-active .app-sidebar .rail-item [data-icon] { display:grid; place-items:center; width:32px; height:32px; padding:5px; border-radius:var(--skin-button-radius); }
body.theme-style-active .app-sidebar .rail-item [data-icon] svg { width:21px; height:21px; }
body.theme-style-active #nowView .approved-live-cover :is(b,span) { z-index:5; }
body.theme-style-active #nowView .now-actions > button { position:relative; z-index:5; font-weight:700; }
body.theme-style-active .titlebar { border:0; box-shadow:var(--skin-bevel); }
body.theme-style-active .titlebar :is(.global-search,.window-actions,.brand-lockup) { z-index:5; }
body.theme-style-active .profile-quick-controls { position:relative; z-index:5; }
body.theme-style-active #nowView .home-sponsor-card { border:0 !important; }
body.theme-style-active #nowView .home-sponsor-card::after,body.theme-style-active .app-sidebar .home-sponsor-card::after {
  content:"" !important;display:block !important;position:absolute;inset:0;z-index:2;pointer-events:none;
  border:7px solid transparent;border-image:var(--skin-nine-frame) 22% / 17px / 0 stretch;background:none !important;
}
body.theme-style-active .home-sponsor-arrow { z-index:5; }
body.theme-style-active .home-sponsor-copy { z-index:3; }
body.theme-style-active #settingsOverlay .settings-header::after { border-image-width:12px; }
body.theme-style-active #settingsOverlay .settings-header > div { position:relative;z-index:5; }
body.theme-style-active #settingsOverlay .settings-header > div > span { display:block;line-height:11px; }
body.theme-style-active #settingsOverlay .settings-header h2 { margin-top:2px;line-height:24px; }
body.theme-style-active #settingsOverlay #settingsSubtitle { margin-top:3px;font-size:11px;line-height:14px; }

/* Physical icon plates, glass capsules and gothic trims match the approved skins. */
body[data-theme-id="metal-lcd"] { --skin-nine-frame:url('/themes/metal-lcd/assets/frame.png'); --skin-material-art:url('/themes/metal-lcd/assets/material.svg'); --skin-frame-size:11px; --skin-radius:10px; }
body[data-theme-id="metal-lcd"] .app-sidebar .rail-item { border:1px solid #344047; background:linear-gradient(#1a242a,#0d1419) !important; color:#e6edf2 !important; box-shadow:inset 0 1px #fff2,inset 0 -1px #000; border-radius:4px !important; }
body[data-theme-id="metal-lcd"] .app-sidebar .rail-item [data-icon] { background:linear-gradient(125deg,#f5f7f6,#84919a 50%,#c8d1d5); color:#0d1821 !important; border:1px solid #d9e3e8; box-shadow:inset 0 1px #fff,inset 0 -2px #2229,0 1px 2px #0009; }
body[data-theme-id="metal-lcd"] .app-sidebar .rail-item.active { background:linear-gradient(120deg,#c9d6df,#718698) !important; color:#101b25 !important; outline:1px solid #72a4ff; box-shadow:inset 0 1px #fff,0 0 7px #287aff !important; }
body[data-theme-id="metal-lcd"] #nowView .approved-panel > header { background:linear-gradient(135deg,#ced7dc 0%,#8b989f 73%,#18212a 73.5%) !important; color:#0d1821 !important; }
body[data-theme-id="metal-lcd"] #nowView .approved-panel > header button { color:#7bb9ff !important; padding-inline:8px; background:#0d171f; border:1px solid #70818d; border-radius:3px; }
body[data-theme-id="metal-lcd"] #nowView .now-actions > button:first-child { background:linear-gradient(105deg,#ae0cf0,#243eff) !important; color:white !important; border:2px solid #c0b4ff !important; box-shadow:0 0 0 2px #251145,inset 0 1px white,0 0 12px #8723db66 !important; }
body[data-theme-id="metal-lcd"] #nowView .approved-home-copy h1 strong { background:linear-gradient(90deg,#cb32ff,#3691ff) !important; background-clip:text !important;-webkit-text-fill-color:transparent !important; }
body[data-theme-id="tactical-sponsor"] { --skin-nine-frame:url('/themes/tactical-sponsor/assets/frame.png'); --skin-material-art:url('/themes/tactical-sponsor/assets/material.svg'); --skin-frame-size:10px; --skin-accent:#ff962b; --skin-primary-top:#ffac3c; --skin-primary-bottom:#e97715; --skin-title:#ff942b; --skin-radius:2px; }
body[data-theme-id="tactical-sponsor"] { --skin-hero:url('/themes/tactical-sponsor/assets/hero-v2.png'); }
body[data-theme-id="tactical-sponsor"] .app-sidebar .rail-item.active { border-left:5px solid #ff9c27; background:linear-gradient(100deg,#633b18,#2c2418) !important;color:#fff1d2 !important; }
body[data-theme-id="tactical-sponsor"] .app-sidebar .rail-item.active [data-icon] { color:#ffa43a !important; }
body[data-theme-id="tactical-sponsor"] #nowView .now-actions > button { clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
body[data-theme-id="studio-glass"] { --skin-nine-frame:url('/themes/studio-glass/assets/frame.png'); --skin-material-art:url('/themes/studio-glass/assets/material.svg'); --skin-frame-size:8px; --skin-panel:#e9f0f8; --skin-deep:#dbe5f1; --skin-text:#101635; --skin-muted:#3f4b70; --skin-radius:16px; }
body[data-theme-id="studio-glass"] .app-sidebar .rail-item [data-icon] { color:#163783; }
body[data-theme-id="studio-glass"] .app-sidebar .rail-item.active { background:linear-gradient(100deg,#7b2dff,#9b80ff 60%,#67e6f3) !important;color:white !important;box-shadow:inset 0 1px #fff,0 0 10px #9078ff !important; }
body[data-theme-id="studio-glass"] #nowView .now-actions > button:first-child { background:linear-gradient(100deg,#bd19ff,#374cff 70%,#53dff7) !important;color:white !important;border:2px solid white !important;box-shadow:0 0 7px #b076f5 !important; }
body[data-theme-id="studio-glass"] #nowView .approved-home-copy h1 strong { background:linear-gradient(90deg,#bb1be7,#2776ff) !important;background-clip:text !important;-webkit-text-fill-color:transparent !important; }
body[data-theme-id="halloween"] { --skin-nine-frame:url('/themes/halloween/assets/frame.png'); --skin-material-art:url('/themes/halloween/assets/material.svg'); --skin-frame-size:12px; --skin-panel:#151211; --skin-deep:#0e0d0d; --skin-texture:none; --skin-frame:#9d5526; --skin-primary-top:#ffb94b; --skin-primary-bottom:#e67018; }
body[data-theme-id="halloween"] #nowView .approved-panel > header { background:linear-gradient(#23170f,#0f0e0c) !important; }
body[data-theme-id="halloween"] .app-sidebar .rail-item.active { background:linear-gradient(#6f2f0a,#35170b) !important;color:#fff3df !important; box-shadow:inset 0 1px #ffc372,0 0 10px #ff831e77 !important; }
body[data-theme-id="halloween"] .app-sidebar .rail-item [data-icon] { color:#eea35e;filter:drop-shadow(0 1px 1px #ce5b08); }
body[data-theme-id="halloween"] .app-sidebar .rail-item[data-app-view="now"] [data-icon] { background:url('/themes/halloween/assets/pumpkin.svg') center/30px 30px no-repeat; }
body[data-theme-id="halloween"] .app-sidebar .rail-item[data-app-view="now"] [data-icon] svg { visibility:hidden; }
body[data-theme-id="halloween"] #nowView .now-actions > button:first-child { color:#fff5de !important;border:2px solid #ffbd63 !important;box-shadow:inset 0 1px #fff2c2,0 0 0 2px #50230b,0 0 16px #f9872155 !important;text-shadow:0 1px #7b2b02; }
body[data-theme-id="winter-lounge"] { --skin-nine-frame:url('/themes/winter-lounge/assets/frame.png'); --skin-material-art:url('/themes/winter-lounge/assets/material.svg'); --skin-frame-size:11px; --skin-panel:#06291f; --skin-deep:#041e18; --skin-frame:#d6b87a; }
body[data-theme-id="winter-lounge"] { --skin-hero:url('/themes/winter-lounge/assets/hero-v2.png'); }
body[data-theme-id="winter-lounge"] .app-sidebar .rail-item [data-icon] { color:#f4e3b2; }
body[data-theme-id="winter-lounge"] #nowView .now-actions > button:first-child { border:2px solid #ffe2a0 !important;box-shadow:inset 0 1px #fff1cc,0 0 0 1px #53370e,0 0 9px #dd9d4138 !important; }
body[data-theme-id="spring-bloom"] { --skin-nine-frame:url('/themes/spring-bloom/assets/frame.png'); --skin-material-art:url('/themes/spring-bloom/assets/material.svg'); --skin-frame-size:10px; --skin-text:#321343; --skin-muted:#684f71; --skin-panel:#fcf9f1; --skin-radius:18px; }
body[data-theme-id="spring-bloom"] { --skin-hero:url('/themes/spring-bloom/assets/hero-v2.png'); }
body[data-theme-id="spring-bloom"] .app-sidebar .rail-item.active { background:linear-gradient(#f0dbff,#cdabea) !important;border:2px solid white;box-shadow:0 1px 4px #9469ba77 !important; }
body[data-theme-id="spring-bloom"] .app-sidebar .rail-item.active [data-icon] { background:linear-gradient(#be8be3,#8c57b9);border:1px solid white;border-radius:50%;color:white !important;box-shadow:0 0 6px #b58ad7; }
body[data-theme-id="spring-bloom"] #nowView .now-actions > button:first-child { background:linear-gradient(#c574f0,#9b38d7 45%,#7624c4) !important;border:2px solid white !important;color:white !important;box-shadow:0 0 0 1px #ad74cc,0 2px 7px #9273b2 !important; }
body[data-theme-id="spring-bloom"] #nowView .now-actions > button+button { background:linear-gradient(#e3fff2,#a8dcc7) !important;color:#234c43 !important;border:2px solid white !important; }
body[data-theme-id="blackout"] { --skin-nine-frame:url('/themes/blackout/assets/frame.png'); --skin-material-art:url('/themes/blackout/assets/material.svg'); --skin-frame-size:10px; --skin-panel:#10171b; --skin-deep:#080f13; --skin-frame:#55616a; --skin-primary-top:#661b2b; --skin-primary-bottom:#35111b; }
body[data-theme-id="blackout"] .app-sidebar .rail-item.active { border:2px solid #73636a; box-shadow:inset 4px 0 #e94460,inset 0 1px #af8b8e !important; }
body[data-theme-id="blackout"] #nowView .now-actions > button:first-child { border:2px solid #c65367 !important;box-shadow:inset 0 1px #e88696,0 0 10px #d42b4a55 !important; }

/* Calendar and sound settings are functional content, not part of the artwork. */
#settingsOverlay .skin-experience { grid-column:1/-1; min-width:0; padding:20px; }
#settingsOverlay .skin-experience-head h3 { margin:0 0 6px; font-size:16px; }
#settingsOverlay .skin-experience p,#settingsOverlay .skin-experience small { font-size:12px;line-height:1.6;color:var(--skin-muted); }
#settingsOverlay .skin-option { display:flex;align-items:flex-start;gap:12px;margin:16px 0;cursor:pointer; }
#settingsOverlay .skin-option input,#settingsOverlay .skin-calendar-name input { width:18px;height:18px;flex:none;margin:3px 0;accent-color:var(--skin-accent); }
#settingsOverlay .skin-option span { display:flex;flex-direction:column;gap:5px; }
#settingsOverlay .skin-option strong { font-size:13px; }
#settingsOverlay .skin-sound-tools { display:flex;align-items:center;flex-wrap:wrap;gap:13px;padding:12px;background:var(--skin-deep);border-radius:var(--skin-button-radius); }
#settingsOverlay .skin-sound-tools label { font-size:12px; }
#settingsOverlay .skin-sound-tools input { flex:1 1 160px;accent-color:var(--skin-accent); }
#settingsOverlay .skin-sound-tools output { margin-left:8px; }
#settingsOverlay #skinSeasonalStatus { border-left:3px solid var(--skin-accent);padding:9px 12px;background:var(--skin-deep); }
#settingsOverlay .skin-calendar { margin-top:16px; }
#settingsOverlay .skin-calendar summary { padding:12px 0;cursor:pointer;font-size:13px;font-weight:650; }
#settingsOverlay .skin-calendar-rows { display:grid;gap:9px; }
#settingsOverlay .skin-calendar-row { display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(170px,1fr) 95px 95px;align-items:center;gap:12px;padding:12px;background:var(--skin-deep);border:1px solid var(--skin-frame);border-radius:var(--skin-button-radius); }
#settingsOverlay .skin-calendar-row label { display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--skin-muted);min-width:0; }
#settingsOverlay .skin-calendar-row .skin-calendar-name { flex-direction:row;align-items:center;gap:10px; }
#settingsOverlay .skin-calendar-name span { display:flex;flex-direction:column;gap:4px; }
#settingsOverlay .skin-calendar-row :is(select,input[type=number]),#settingsOverlay .skin-calendar-add :is(select,input) { width:100%;min-width:0;height:35px;padding:5px 8px;background:var(--skin-panel);border:1px solid var(--skin-frame);border-radius:var(--skin-button-radius);color:var(--skin-text);font:inherit; }
#settingsOverlay .skin-calendar-row [data-event-remove] { grid-column:1/-1;justify-self:end; }
#settingsOverlay .skin-calendar-add { margin:18px 0 0;display:grid;grid-template-columns:2fr 65px 65px 2fr;gap:12px;border:1px solid var(--skin-frame);border-radius:var(--skin-button-radius);padding:14px;min-width:0; }
#settingsOverlay .skin-calendar-add label { display:flex;flex-direction:column;gap:6px;font-size:11px;min-width:0; }
#settingsOverlay .skin-calendar-add button { grid-column:1/-1;justify-self:start; }
@media (min-width:768px) and (max-height:800px) {body.theme-style-active .app-sidebar .rail-item [data-icon] {width:25px;height:25px;padding:3px;} body.theme-style-active .app-sidebar .rail-item {grid-template-columns:25px minmax(0,1fr);gap:9px;} }
@media (max-width:1100px) {#settingsOverlay .skin-calendar-row {grid-template-columns:minmax(120px,1fr) minmax(120px,1fr);} #settingsOverlay .skin-calendar-add {grid-template-columns:1fr 1fr;} }
@media (max-width:767px) {body.theme-style-active {--skin-frame-size:7px;} #settingsOverlay .skin-experience {padding:14px;} #settingsOverlay .skin-calendar-row {grid-template-columns:1fr 1fr;padding:10px;gap:10px;} #settingsOverlay .skin-calendar-name {grid-column:1/-1;} #settingsOverlay .skin-calendar-add {grid-template-columns:1fr 1fr;} #settingsOverlay .skin-calendar-add label:first-of-type,#settingsOverlay .skin-calendar-add label:last-of-type {grid-column:1/-1;} }