/* Colour and finish are independent appearance settings. */
#os{
  --panel-height:38px;
  --chrome-high:#68a9e5;
  --chrome-mid:#367fc9;
  --chrome-low:#205c9d;
  --chrome-deep:#174a84;
  --chrome-accent:#b9ddff;
  --chrome-edge:#124676;
  --chrome-glass:#205b96c9;
  --menu-hover:#dcefff;
  --menu-accent:#2b78c0;
}
#os.theme-sunset{--chrome-high:#ac8bc5;--chrome-mid:#845c9f;--chrome-low:#65447f;--chrome-deep:#54396d;--chrome-accent:#f5c6df;--chrome-edge:#54356f;--chrome-glass:#684981d1;--menu-hover:#f3e7fa;--menu-accent:#8555a4}
#os.theme-forest{--chrome-high:#72bbc2;--chrome-mid:#318d9b;--chrome-low:#1b6b7c;--chrome-deep:#155764;--chrome-accent:#b7eee4;--chrome-edge:#145568;--chrome-glass:#1c6875ce;--menu-hover:#e0f4ef;--menu-accent:#268c89}
#os.theme-midnight{--chrome-high:#547fa9;--chrome-mid:#2b577e;--chrome-low:#1b3e61;--chrome-deep:#122f4d;--chrome-accent:#9cdeea;--chrome-edge:#0b2945;--chrome-glass:#142f4bd9;--menu-hover:#35566e;--menu-accent:#51b6c9}

#os #desktop,#os .window-layer{bottom:var(--panel-height)}
#os[class*="theme-"] .taskbar{height:var(--panel-height);background:linear-gradient(var(--chrome-high),var(--chrome-mid) 47%,var(--chrome-low));border-top:1px solid var(--chrome-accent);box-shadow:0 -2px 8px #0628494a,inset 0 1px #ffffff50;color:#fff}
#os[class*="theme-"] .start-button{width:40px;min-width:40px;height:30px;align-self:center;justify-content:center;gap:0;margin-left:5px;padding:0;border:1px solid var(--chrome-edge);border-radius:7px;background:linear-gradient(var(--chrome-high),var(--chrome-low));box-shadow:inset 0 1px #ffffff70,0 1px 3px #082d5070;color:#fff;font-style:normal;text-shadow:none}
#os[class*="theme-"] .start-button img{width:23px;height:23px;filter:drop-shadow(0 1px 1px #082b4a77)}
#os[class*="theme-"] .start-button:hover{filter:brightness(1.12)}
#os[class*="theme-"] .start-button[aria-expanded=true]{background:var(--chrome-deep);box-shadow:inset 0 2px 4px #071b3970}
#os[class*="theme-"] .task-buttons{gap:4px;padding:3px 6px}
#os[class*="theme-"] .task-button{height:29px;min-width:82px;max-width:160px;padding:0 8px;gap:7px;border:1px solid #ffffff45;border-radius:5px;background:linear-gradient(var(--chrome-high),var(--chrome-mid));box-shadow:inset 0 1px #ffffff38;color:white;text-shadow:none}
#os[class*="theme-"] .task-button img{width:19px;height:19px}
#os[class*="theme-"] .task-button:hover{filter:brightness(1.12)}
#os[class*="theme-"] .task-button.active{border-color:var(--chrome-accent);background:linear-gradient(var(--chrome-mid),var(--chrome-deep));box-shadow:inset 0 -3px var(--chrome-accent),inset 0 1px #ffffff45}
#os[class*="theme-"] .tray{gap:8px;padding:0 10px;border-left:1px solid #ffffff55;background:linear-gradient(var(--chrome-mid),var(--chrome-low));box-shadow:inset 1px 0 #ffffff34}
#os[class*="theme-"] .tray time{min-width:54px}

#os[class*="theme-"] .start-menu{bottom:var(--panel-height);width:min(400px,96vw);border-color:var(--chrome-edge);border-radius:8px 8px 0 0;box-shadow:0 12px 24px #061e4080}
#os[class*="theme-"] .start-header{height:65px;padding:10px 15px;background:linear-gradient(var(--chrome-high),var(--chrome-mid) 55%,var(--chrome-low));border-bottom:2px solid var(--chrome-accent)}
#os[class*="theme-"] .start-header img{width:40px;height:40px;border-radius:7px}
#os[class*="theme-"] .start-header strong{font-size:18px}
#os[class*="theme-"] .start-body{min-height:290px}
#os[class*="theme-"] .start-item:hover{border-color:var(--menu-accent);background:var(--menu-hover)}
#os[class*="theme-"] .start-footer{height:40px;background:linear-gradient(var(--chrome-mid),var(--chrome-deep));border-top-color:var(--chrome-accent)}
#os[class*="theme-"] .start-footer button{padding:4px 8px}
#os.theme-sunset .start-main{background:#fff9fc}
#os.theme-sunset .start-side{background:#f1e6f5;border-left-color:#d9bfdf}
#os.theme-forest .start-main{background:#f9fdfa}
#os.theme-forest .start-side{background:#e4f3ef;border-left-color:#bbdad5}

#os[class*="theme-"] .window-titlebar{height:32px;min-height:32px;background:linear-gradient(var(--chrome-high),var(--chrome-mid) 55%,var(--chrome-low));border-bottom-color:var(--chrome-edge);box-shadow:inset 0 1px #ffffff58}
#os[class*="theme-"] .window-titlebar img{width:19px;height:19px}
#os[class*="theme-"] .window-title{font-size:13px;text-shadow:0 1px #071e3f69}
#os[class*="theme-"] .window.inactive .window-titlebar{background:linear-gradient(#9aabb9,#738ca2);border-bottom-color:#5c7388}
#os.theme-midnight .window.inactive .window-titlebar{background:linear-gradient(#587188,#38536d);border-bottom-color:#28445d}
#os[class*="theme-"] .window-control{width:25px;height:23px;border-color:#ffffff8c;background:linear-gradient(var(--chrome-high),var(--chrome-low));box-shadow:inset 0 1px #ffffff70,0 1px 2px #09244877;color:#fff}
#os[class*="theme-"] .window-control.close{border-color:#ffd0bd;background:linear-gradient(#ed9477,#c95244)}

/* Soft gradient keeps a little depth without restoring the oversized Start button. */
#os.finish-gradient .taskbar{background:linear-gradient(#ffffff4d 0%,var(--chrome-high) 10%,var(--chrome-mid) 50%,var(--chrome-low) 51%,var(--chrome-deep) 100%)}
#os.finish-gradient .start-button{background:linear-gradient(#ffffff5c,var(--chrome-high) 20%,var(--chrome-mid) 55%,var(--chrome-low));box-shadow:inset 0 1px #ffffffbb,0 2px 5px #071c4270}
#os.finish-gradient .task-button{background:linear-gradient(#ffffff3d,var(--chrome-high) 35%,var(--chrome-mid) 70%,var(--chrome-low))}
#os.finish-gradient .task-button.active{background:linear-gradient(var(--chrome-mid),var(--chrome-deep));box-shadow:inset 0 -3px var(--chrome-accent),inset 0 1px #ffffff6b}
#os.finish-gradient .tray{background:linear-gradient(var(--chrome-high),var(--chrome-low))}
#os.finish-gradient .start-header,#os.finish-gradient .start-footer,#os.finish-gradient .window-titlebar{box-shadow:inset 0 1px #ffffff78}

/* Matte removes the dimensional treatment and uses the accent as a focus cue. */
#os.finish-matte .taskbar{background:var(--chrome-deep);box-shadow:0 -1px 6px #071b344d}
#os.finish-matte .start-button{background:var(--chrome-mid);border-color:var(--chrome-low);box-shadow:none}
#os.finish-matte .task-button{background:#ffffff1a;border-color:#ffffff30;box-shadow:none}
#os.finish-matte .task-button.active{background:var(--chrome-mid);border-color:var(--chrome-accent);box-shadow:inset 0 -3px var(--chrome-accent)}
#os.finish-matte .tray{background:transparent;box-shadow:none}
#os.finish-matte .start-header,#os.finish-matte .start-footer,#os.finish-matte .window-titlebar{background:var(--chrome-mid);box-shadow:none}
#os.finish-matte .start-footer{background:var(--chrome-deep)}
#os.finish-matte .window{border-radius:5px 5px 4px 4px;box-shadow:0 10px 28px #061d3f67}
#os.finish-matte .window.inactive .window-titlebar{background:#7890a3}
#os.theme-midnight.finish-matte .window.inactive .window-titlebar{background:#3d5368}
#os.finish-matte .window-control{background:var(--chrome-low);box-shadow:none;border-color:#ffffff66}
#os.finish-matte .window-control.close{background:#c9574d;border-color:#efae9e}
#os.finish-matte .start-menu{box-shadow:0 8px 22px #061d3f75}

/* Translucent chrome reveals the wallpaper through frosted panel surfaces. */
#os.finish-glass .taskbar{background:var(--chrome-glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 -2px 16px #061b3e69,inset 0 1px #ffffff69}
#os.finish-glass .start-button,#os.finish-glass .task-button{background:#ffffff24;box-shadow:inset 0 1px #ffffff45,0 1px 3px #071f4060}
#os.finish-glass .task-button.active{background:#ffffff3e;box-shadow:inset 0 -3px var(--chrome-accent),inset 0 1px #ffffff83}
#os.finish-glass .tray{background:#ffffff12;box-shadow:inset 1px 0 #ffffff55}
#os.finish-glass .start-menu{background:transparent;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 14px 28px #06193384}
#os.finish-glass .start-header,#os.finish-glass .start-footer{background:var(--chrome-glass)}
#os.finish-glass .start-main{background:#ffffffbf}
#os.finish-glass .start-side{background:#e7f2ffc0}
#os.theme-midnight.finish-glass .start-main{background:#1d3047c5}
#os.theme-midnight.finish-glass .start-side{background:#25405bc9}
#os.finish-glass .window{background:transparent;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);box-shadow:0 14px 35px #071c4090}
#os.finish-glass .window-titlebar{background:var(--chrome-glass);box-shadow:inset 0 1px #ffffff6b}
#os.finish-glass .window-control{background:#ffffff2e;box-shadow:inset 0 1px #ffffff78}
#os.finish-glass .window-control.close{background:#d76358c7}

.appearance-card{grid-column:1/-1}
.appearance-group{margin-top:15px}
.appearance-group>strong{display:block;margin-bottom:8px;color:#315d82;font-size:12px}
#os.theme-midnight .appearance-group>strong{color:#b4d9f2}
.finish-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.finish-choice{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:7px;border:1px solid #abc0d1;border-radius:6px;background:#f8fafb;color:#24425c;text-align:left}
.finish-choice:hover{border-color:var(--menu-accent);background:#edf6fc}
.finish-choice[aria-pressed=true]{border-color:var(--menu-accent);box-shadow:0 0 0 2px var(--chrome-accent)}
.finish-name{font-weight:700;font-size:12px}
.finish-choice small{color:#677d8d;font-size:11px;line-height:1.25}
.finish-preview{position:relative;height:42px;margin-bottom:3px;border:1px solid #9eb5c6;border-radius:4px;background:linear-gradient(135deg,#a9d3ec,#608ea9 60%,#6aaa81);overflow:hidden}
.finish-preview span{position:absolute;display:block;left:12%;width:75%;border:1px solid #ffffff8c}
.preview-titlebar{top:8px;height:11px;border-radius:3px 3px 0 0}
.preview-panel{bottom:5px;height:11px;border-radius:2px}
.preview-gradient .preview-titlebar,.preview-gradient .preview-panel{background:linear-gradient(var(--chrome-high),var(--chrome-low))}
.preview-matte .preview-titlebar,.preview-matte .preview-panel{background:var(--chrome-deep)}
.preview-glass .preview-titlebar,.preview-glass .preview-panel{background:#ffffff70;backdrop-filter:blur(4px)}
#os.theme-midnight .finish-choice{border-color:#52718d;background:#20364d;color:#e8f3fb}
#os.theme-midnight .finish-choice:hover{background:#2c4a64}
#os.theme-midnight .finish-choice small{color:#bacddd}
@media(max-width:570px){.finish-options{grid-template-columns:1fr}.finish-preview{height:33px}}