:root{color-scheme:light;box-sizing:border-box}
*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;overflow:hidden;font:12px Tahoma,Verdana,"Segoe UI",sans-serif;color:#000}
button{font:inherit;cursor:pointer}
.scr{position:fixed;inset:0;display:none}.scr.on{display:block}
#power.on{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:#aaa;font-size:14px}
.pw{width:84px;height:84px;border-radius:50%;border:3px solid #3a6fd8;background:radial-gradient(#2250c0,#0a1a45);color:#fff;font-size:38px;box-shadow:0 0 24px #2a64e099}
.logo{color:#fff;font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;display:inline-flex;flex-direction:column;align-items:flex-start;gap:10px}
.logo i{font-size:14px;font-style:normal;letter-spacing:1.5px;opacity:.9;text-transform:uppercase;line-height:1}
.logo b{display:flex;align-items:center;gap:8px;font-size:52px;font-style:italic;font-weight:700;line-height:1}
.logo sup{font-size:24px;color:#ff7b1c;align-self:flex-start}
#boot{text-align:center;padding-top:28vh;color:#fff}
.pb{width:190px;height:18px;margin:48px auto 0;border:2px solid #b4b4b4;border-radius:6px;overflow:hidden;position:relative}
.pb u{position:absolute;top:2px;left:-60px;width:56px;height:10px;background:repeating-linear-gradient(90deg,#3a74ee 0 16px,transparent 16px 19px);animation:mv 1.6s linear infinite}
@keyframes mv{to{left:190px}}
.fr{background:#5a7edc;flex-direction:column;color:#fff}.fr.on{display:flex}
.top{height:12vh;min-height:56px;background:#00309c;position:relative}
.top::after,.bot::before{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,#0000,#fff 50%,#0000)}
.top::after{bottom:-2px}
.bot{height:14vh;min-height:64px;background:#00309c;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:13px;gap:12px}
.bot::before{top:-2px;background:linear-gradient(90deg,#0000,#f7a04b 50%,#0000)}
.bot button{background:none;border:0;color:#fff;font-size:14px;display:flex;align-items:center;gap:8px}
.bot i{font-style:normal;background:#d9441f;border-radius:5px;border:1px solid #fff;width:28px;height:28px;display:grid;place-items:center}
.mid{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 24px;background:radial-gradient(ellipse at 30% 40%,#7b9bea,#5a7edc 70%);overflow:hidden}
.lf{flex:1;min-width:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:16px;padding-right:28px;font-size:16px}
.lf p{max-width:280px;line-height:1.4}
.dv{width:2px;height:60%;background:linear-gradient(#0000,#fff,#0000);opacity:.7;flex-shrink:0}
.rt{flex:1;min-width:0;padding-left:28px;display:flex;flex-direction:column;gap:10px}
.u{display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:8px;font-size:20px;cursor:pointer;width:fit-content;border:1px solid transparent}
.u:hover{background:#0a31a866;border-color:#ffffff66}
.av{width:56px;height:56px;border:2px solid #fff;border-radius:6px;background:linear-gradient(#f9d85a,#e0891a);font-size:32px;display:grid;place-items:center}
.wl{font:italic 40px "Trebuchet MS",Tahoma,sans-serif;text-shadow:2px 2px 3px #0a1e78}
@media(max-width:640px){.mid{flex-direction:column;gap:14px;padding:12px 6px}.lf{align-items:center;text-align:center;padding:0}.rt{padding:0;align-items:center;width:100%;max-width:320px}.user-tiles{width:100%;max-width:280px}.dv{width:80%;height:2px;background:linear-gradient(90deg,#0000,#fff,#0000)}.bot span{display:none}}
#desk.on{display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
#area{flex:1;position:relative;overflow:hidden;background:
radial-gradient(ellipse 60% 8% at 22% 24%,#fffd,#fff0 70%),
radial-gradient(ellipse 45% 6% at 74% 15%,#fffc,#fff0 70%),
radial-gradient(ellipse 130% 60% at 25% 112%,#6dbb33,#3f8c1c 61%,#0000 62%),
radial-gradient(ellipse 150% 52% at 95% 112%,#4fa326,#2f7a14 60%,#0000 61%),
linear-gradient(#1757c8,#4a92ea 40%,#a9d2f5 62%,#d5eafb)}
#icons{position:absolute;top:0;left:0;bottom:0;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;padding:6px}
.ic{width:80px;padding:4px 2px;text-align:center;color:#fff;font-size:11px;text-shadow:1px 1px 2px #000;cursor:default}
.ic .em{display:block;font-size:34px;line-height:1.15;filter:drop-shadow(1px 2px 1px #0006)}
.ic b{font-weight:400;padding:1px 3px}.ic.s b{background:#316ac5;outline:1px dotted #fff}
#bar{height:calc(30px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);display:flex;align-items:flex-start;position:relative;z-index:1000;background:linear-gradient(#3168d5,#4993e6 3%,#2a6ce6 6%,#245edb 50%,#1d54c9 92%,#1941a5)}
#st{height:30px;padding:0 20px 0 10px;border:0;border-radius:0 14px 14px 0;color:#fff;font:italic 700 20px "Trebuchet MS",Tahoma,sans-serif;text-shadow:1px 2px 2px #1a3a10;background:linear-gradient(#63b963,#3b9a3b 12%,#2f8a2f 50%,#2a7c2a 90%,#276f27);box-shadow:inset 2px 0 5px #b4e6b4;display:flex;align-items:center;gap:6px}
#st.on{filter:brightness(.85)}
.fl{width:17px;height:17px;display:grid;grid-template:1fr 1fr/1fr 1fr;gap:1px;transform:skew(-8deg,-8deg)}.fl i{display:block}
#tasks{flex:1;display:flex;gap:3px;padding:3px 6px;overflow:hidden;min-width:0}
.tk{flex:0 1 150px;min-width:0;height:24px;border:1px solid #1a3fa0;border-radius:3px;background:linear-gradient(#3c81f3,#2b6ee0);color:#fff;text-align:left;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.tk.a{background:#1e52b7;box-shadow:inset 1px 1px 3px #0b2a7a}
#tray{height:30px;padding:0 12px;display:flex;align-items:center;gap:8px;color:#fff;border-left:1px solid #0b3a9a;background:linear-gradient(#0f8cea,#0c7ae0 20%,#0a6cd0 90%);box-shadow:inset 1px 0 2px #5bb8ff}
#menu{display:none;position:absolute;left:0;bottom:100%;width:min(390px,100vw);border:1px solid #0831d9;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:2px -2px 8px #0008}
#menu.on{display:block}
.mh{height:56px;background:linear-gradient(#1c5bd6,#4d8df0 20%,#1d56c9);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px;padding:0 10px;text-shadow:1px 1px 1px #0008}
.mh .av{width:40px;height:40px;font-size:22px}
.mc{display:flex}.ml{flex:1.1;padding:6px 3px;background:#fff}.mr{flex:1;padding:6px 3px;background:#d3e5fa;border-left:1px solid #95bdee}
.mi{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;background:none;text-align:left;color:#000}
.mi .em{font-size:24px}.mr .mi{font-weight:700;color:#1a2a5a}
.mi:hover{background:#316ac5;color:#fff}
.mf{height:38px;background:linear-gradient(#4282d6,#1d56c9);display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:0 10px}
.mf button{background:none;border:0;color:#fff;display:flex;align-items:center;gap:6px}.mf i{font-style:normal;background:#e0592a;border:1px solid #fff;border-radius:4px;padding:1px 4px}
.win{position:absolute;display:flex;flex-direction:column;background:#0831d9;border:3px solid #0831d9;border-top:0;border-radius:8px 8px 0 0;box-shadow:3px 3px 12px #0008}
.win.max{inset:0!important;width:auto!important;height:auto!important;border-radius:0}.win.mn{display:none}
.tb{height:28px;flex:none;display:flex;align-items:center;gap:2px;padding:0 3px 0 6px;color:#fff;font:700 13px "Trebuchet MS",Tahoma,sans-serif;text-shadow:1px 1px #0a1e78;background:linear-gradient(#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7);border-radius:7px 7px 0 0;touch-action:none}
.win.bg .tb{filter:saturate(.35) brightness(1.2)}
.ti{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.b{width:22px;height:22px;border:1px solid #fff;border-radius:4px;background:linear-gradient(135deg,#7aa8ff,#2a5de0 60%,#2350c8);color:#fff;font-weight:700;line-height:1;font-size:12px}
.b.x{background:linear-gradient(135deg,#f4a285,#d8472a 60%,#c0381c)}
.wb{flex:1;background:#ece9d8;overflow:auto;min-height:0;display:flex;flex-direction:column}
.mb{display:flex;gap:6px;padding:6px 8px;background:#ece9d8;border-bottom:1px solid #aca899;align-items:center;flex-wrap:wrap}
.mb button{padding:3px 10px;border:1px solid #003c74;border-radius:3px;background:linear-gradient(#ffffff 0%,#ece9d8 45%,#d6d0c0 100%);color:#000000!important;font:11px Tahoma,Verdana,sans-serif;box-shadow:inset 0 1px 0 #ffffff;cursor:pointer;outline:none}
.mb button:hover{background:linear-gradient(#fff9e8 0%,#ffe391 40%,#ffc84a 70%,#f7ab2b 100%);border-color:#e5a700}
.mb button:active,.mb button.act{background:linear-gradient(#cfc7b0 0%,#dad2bc 100%);box-shadow:inset 1px 1px 2px rgba(0,0,0,0.3)}
.mb input,.mb select,input.kl,input.kn,select.kt{background:#ffffff!important;color:#000000!important;border:1px solid #7f9db9!important;border-radius:2px;padding:3px 6px;font:11px Tahoma,Verdana,sans-serif;user-select:text}
.mb input::placeholder,input.kl::placeholder,input.kn::placeholder{color:#777777!important}
.note{flex:1;border:0;resize:none;padding:4px;font:13px "Lucida Console",monospace;outline:0;user-select:text;background:#fff;color:#000}
.ex{padding:10px;display:flex;flex-direction:column;gap:6px;background:#fff;flex:1;color:#000}
.ex h4{font:700 12px Tahoma,Verdana,sans-serif;color:#fff;background:linear-gradient(90deg,#4f7fe8,#a9c4f5);padding:4px 8px;margin-top:6px;border-radius:3px;text-shadow:1px 1px 1px #0a246a}
.ex .mi{width:auto;color:#000}.ex .mi:hover{background:#316ac5;color:#fff}
.pg{flex:1;background:#fff;padding:20px;overflow:auto;text-align:center;user-select:text;color:#000}
.pg h2{font:700 30px "Trebuchet MS",sans-serif;color:#1c5bd6;margin:14px 0}
.pg h3{color:#00309c;text-align:left;font-size:18px}.pg p{text-align:left;margin:8px 0;line-height:1.5}
.dl{display:flex;gap:14px;padding:16px 16px 8px;align-items:flex-start}.dl span{font-size:30px}.dl p{font-size:12px;line-height:1.4;user-select:text;color:#000}
.dk{padding:0 16px 14px;text-align:center}.dk button{min-width:76px;padding:4px 14px;border:1px solid #003c74;border-radius:3px;background:linear-gradient(#ffffff 0%,#ece9d8 45%,#d6d0c0 100%);color:#000000!important;font:11px Tahoma,Verdana,sans-serif;box-shadow:inset 0 1px 0 #ffffff;cursor:pointer}
.dk button:hover{background:linear-gradient(#fff9e8 0%,#ffe391 40%,#ffc84a 70%,#f7ab2b 100%);border-color:#e5a700}
.dk button:active{background:linear-gradient(#cfc7b0 0%,#dad2bc 100%);box-shadow:inset 1px 1px 2px rgba(0,0,0,0.3)}
.mg{display:grid;grid-template-columns:repeat(9,28px);border:3px solid;border-color:#808080 #fff #fff #808080}
.cx{width:28px;height:28px;border:3px solid;border-color:#fff #808080 #808080 #fff;background:#c0c0c0;font:700 15px Arial;padding:0;display:grid;place-items:center}.cx.o{border:1px solid #808080}
#hint{display:none;position:absolute;left:8px;bottom:calc(100% + 10px);background:#ffffe1;border:1px solid #000;border-radius:8px;padding:8px 12px;font-size:12px;box-shadow:2px 2px 5px #0006;color:#000}
#hint.on{display:block}#hint::after{content:"";position:absolute;left:22px;bottom:-9px;border:8px solid transparent;border-top-color:#000;border-bottom:0}
#bsod{background:#0000aa;color:#fff;font:15px "Lucida Console",monospace;padding:8vh 6vw;line-height:1.6;white-space:pre-wrap}
.fi{width:260px;max-width:100%;padding:7px 9px;border:2px solid #7f9db9;border-radius:4px;font:14px Tahoma,sans-serif;user-select:text;background:#fff!important;color:#000!important}
.xb{padding:5px 14px;border:1px solid #003c74;border-radius:3px;background:linear-gradient(#ffffff 0%,#ece9d8 45%,#d6d0c0 100%);font:11px Tahoma,Verdana,sans-serif;color:#000000!important;box-shadow:inset 0 1px 0 #ffffff;cursor:pointer}
.xb:hover{background:linear-gradient(#fff9e8 0%,#ffe391 40%,#ffc84a 70%,#f7ab2b 100%);border-color:#e5a700}
.xb:active{background:linear-gradient(#cfc7b0 0%,#dad2bc 100%);box-shadow:inset 1px 1px 2px rgba(0,0,0,0.3)}
.mb input[type=checkbox]{flex:none;min-width:0}
@media(max-width:640px){.lf p{display:none}.mid{overflow:auto}}
@media(max-width:640px){.ic{width:72px}.mi{padding:10px 8px}.tk{flex:0 1 96px}#menu{max-height:calc(100dvh - 44px);overflow:auto}}

.ov{display:none;position:fixed;inset:0;z-index:5000;background:#000a;align-items:center;justify-content:center;padding:12px}.ov.on{display:flex}
.lbox{background:#ece9d8;border:3px solid #0831d9;border-radius:8px;max-width:640px;max-height:88vh;overflow:auto;padding:16px;color:#000;user-select:text;line-height:1.5;font-size:13px}.lbox h3{margin-bottom:8px}.lbox p{margin:8px 0}
.lk{padding:3px 8px;font-size:12px}.lks{display:flex;gap:8px}
#ctx{display:none;position:fixed;z-index:3000;background:#fff;border:1px solid #888;box-shadow:2px 2px 4px #0006;width:180px}#ctx button{display:block;width:100%;text-align:left;padding:7px 10px;border:0;background:none}#ctx button:hover{background:#316ac5;color:#fff}
.ic{touch-action:none}

/* Windows XP System Tray Volume Popup */
#vol-popup{position:fixed;right:52px;bottom:32px;width:115px;background:#ece9d8;border:2px solid #00136b;border-radius:4px 4px 0 0;box-shadow:2px 2px 10px rgba(0,0,0,0.45);z-index:4000;display:flex;flex-direction:column;user-select:none;font-family:Tahoma,Verdana,sans-serif}
.vol-hdr{height:22px;background:linear-gradient(#0997ff,#0053ee 8%,#0050ee 40%,#0066ff 88%,#003dd7);color:#fff;font:700 11px "Trebuchet MS",Tahoma,sans-serif;text-shadow:1px 1px #0a1e78;display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 6px;border-radius:2px 2px 0 0}
.vol-close{width:16px;height:16px;border:1px solid #fff;border-radius:3px;background:linear-gradient(135deg,#f4a285,#d8472a 60%,#c0381c);color:#fff;font-weight:700;font-size:10px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.vol-body{padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:6px}
.vol-slider-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.vol-lbl{font-size:10px;color:#333}
.vol-slider{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:24px;height:105px;background:transparent;cursor:pointer}
.vol-slider::-webkit-slider-runnable-track{width:4px;background:#aca899;border-radius:2px;box-shadow:inset 1px 1px 1px #716f64,inset -1px -1px 1px #fff}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:11px;background:linear-gradient(#ffffff,#ece9d8 50%,#d6d0c0);border:1px solid #003c74;border-radius:2px;box-shadow:1px 1px 2px rgba(0,0,0,0.3);cursor:pointer}
.vol-mute-box{border-top:1px solid #aca899;box-shadow:0 1px 0 #fff;width:100%;padding-top:6px;text-align:center}
.vol-mute-box label{font-size:11px;color:#000;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
#tr-vol{cursor:pointer;user-select:none;display:inline-block;padding:2px 4px;border-radius:2px}
#tr-vol:hover{background:rgba(255,255,255,0.2)}
#tr-cpu{display:flex;align-items:center;cursor:pointer;padding:1px;border-radius:2px}
#tr-cpu:hover{background:rgba(255,255,255,0.2)}

/* Windows XP Task Manager & Telemetry */
.tm-tabs{display:flex;gap:2px;padding:4px 6px 0 6px;background:#ece9d8;border-bottom:1px solid #919b9c}
.tm-tab{padding:3px 12px;background:linear-gradient(#f0eee1,#e3dfce);border:1px solid #919b9c;border-bottom:0;border-radius:4px 4px 0 0;font:11px Tahoma,Verdana,sans-serif;color:#000;cursor:pointer;position:relative;bottom:-1px}
.tm-tab:hover{background:#fff}
.tm-tab.act{background:#fff;border-color:#7f9db9;border-bottom:1px solid #fff;font-weight:700;padding-top:4px}
.tm-content{flex:1;background:#ece9d8;padding:8px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.tm-perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tm-group{border:1px solid #aca899;border-radius:4px;padding:6px 8px;background:#ece9d8;font:11px Tahoma,Verdana,sans-serif}
.tm-group legend{font-weight:700;color:#00309c;padding:0 4px}
.tm-meter-row{display:flex;gap:8px;align-items:center}
.tm-meter-bar{width:32px;height:84px;background:#000;border:2px inset #808080;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:2px;box-sizing:border-box}
.tm-meter-fill{background:linear-gradient(to top,#00ff00 0%,#00e000 80%,#ffef00 95%,#ff0000 100%);width:100%;transition:height .25s ease;box-shadow:0 0 4px #00ff00}
.tm-cv{flex:1;height:84px;background:#000;border:2px inset #808080;display:block}
.tm-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-size:11px;line-height:1.4}
.tm-stat-row{display:flex;justify-content:space-between;border-bottom:1px dotted #ccc;padding:1px 0}
.tm-stat-lbl{color:#444}
.tm-stat-val{font-weight:700;color:#000;user-select:text}
.tm-status-bar{height:20px;background:#ece9d8;border-top:1px solid #aca899;padding:2px 8px;font:11px Tahoma,Verdana,sans-serif;color:#333;display:flex;gap:16px;align-items:center}
.pve-card{background:#fff;border:1px solid #7f9db9;border-radius:4px;padding:8px;margin-bottom:6px;display:flex;flex-direction:column;gap:4px}
.pve-badge{display:inline-block;padding:1px 6px;border-radius:3px;font:700 10px Tahoma,sans-serif;background:#28a745;color:#fff}
.pve-badge.warn{background:#ffc107;color:#000}
.pve-bar-wrap{background:#e0e0e0;border-radius:3px;height:12px;overflow:hidden;position:relative;border:1px solid #aaa}
.pve-bar-fill{background:linear-gradient(90deg,#3b82f6,#10b981);height:100%;transition:width .3s ease}
@media(max-width:640px){.tm-perf-grid{grid-template-columns:1fr}.tm-stat-grid{grid-template-columns:1fr}}

/* ===================================================
   WINDOWS XP THEMES (Luna Blue, Silver, Olive, Classic)
   =================================================== */

/* Theme: Luna Silber (Silver / Metallic) */
body.theme-luna-silver #bar {
  background: linear-gradient(#b2b5bb 0%, #8a8d95 50%, #767980 100%);
}
body.theme-luna-silver #st {
  background: linear-gradient(#6a9675 0%, #4e7a59 12%, #3d6848 50%, #2f5639 90%);
  box-shadow: inset 2px 0 5px #b0dab5;
}
body.theme-luna-silver #tray {
  background: linear-gradient(#9ea2ac 0%, #8b8f99 50%, #7a7e88 100%);
  border-left-color: #6a6e78;
  box-shadow: inset 1px 0 2px #d2d5de;
}
body.theme-luna-silver .tk {
  background: linear-gradient(#b0b3bc, #8b8e98);
  border-color: #5d606a;
}
body.theme-luna-silver .tk.a {
  background: #70737c;
  box-shadow: inset 1px 1px 3px #40434b;
}
body.theme-luna-silver .win {
  background: #7e818b;
  border-color: #7e818b;
}
body.theme-luna-silver .tb {
  background: linear-gradient(#f2f3f5 0%, #d8d9de 15%, #b5b7c0 50%, #9fa1ab 100%);
  color: #000;
  text-shadow: 1px 1px #fff;
}
body.theme-luna-silver .win.bg .tb {
  background: linear-gradient(#e4e5ea 0%, #cacbd2 50%, #b2b4bc 100%);
  color: #555;
}
body.theme-luna-silver .b {
  background: linear-gradient(135deg, #dcdde2, #9ea1ab 60%, #858892);
  color: #000;
}
body.theme-luna-silver .b.x {
  background: linear-gradient(135deg, #f4a285, #d8472a 60%, #c0381c);
  color: #fff;
}
body.theme-luna-silver #menu {
  border-color: #6e717b;
}
body.theme-luna-silver .mh {
  background: linear-gradient(#b8bac2, #8b8e98);
}
body.theme-luna-silver .mr {
  background: #e2e4e8;
  border-left-color: #b0b3bc;
}
body.theme-luna-silver .mf {
  background: linear-gradient(#9ea2ac, #7e818b);
}

/* Theme: Luna Olivegrün (Homestead / Olive Green) */
body.theme-luna-olive #bar {
  background: linear-gradient(#a2b582 0%, #879c65 15%, #6f854b 60%, #576d33 100%);
}
body.theme-luna-olive #st {
  background: linear-gradient(#d69e38 0%, #bd8420 50%, #9a6510 100%);
  box-shadow: inset 2px 0 5px #ffe090;
}
body.theme-luna-olive #tray {
  background: linear-gradient(#8ca06c 0%, #728751 50%, #5e733c 100%);
  border-left-color: #4f632d;
  box-shadow: inset 1px 0 2px #bcd499;
}
body.theme-luna-olive .tk {
  background: linear-gradient(#9cb07b, #748953);
  border-color: #49592f;
}
body.theme-luna-olive .tk.a {
  background: #5d703e;
  box-shadow: inset 1px 1px 3px #384520;
}
body.theme-luna-olive .win {
  background: #7a8c5e;
  border-color: #7a8c5e;
}
body.theme-luna-olive .tb {
  background: linear-gradient(#b2c78f 0%, #9cb277 15%, #79934e 50%, #637d36 100%);
  color: #fff;
  text-shadow: 1px 1px #2d3b18;
}
body.theme-luna-olive .win.bg .tb {
  background: linear-gradient(#c7d4b0 0%, #a8ba8d 50%, #8c9e71 100%);
  color: #3b4d24;
}
body.theme-luna-olive .b {
  background: linear-gradient(135deg, #cbe0a4, #7d9651 60%, #617b35);
}
body.theme-luna-olive .b.x {
  background: linear-gradient(135deg, #f4a285, #d8472a 60%, #c0381c);
}
body.theme-luna-olive #menu {
  border-color: #61773e;
}
body.theme-luna-olive .mh {
  background: linear-gradient(#9cb277, #6f854b);
}
body.theme-luna-olive .mr {
  background: #e5ecd6;
  border-left-color: #a8bc8b;
}
body.theme-luna-olive .mf {
  background: linear-gradient(#79934e, #53692f);
}

/* Theme: Windows Klassisch (Win 98 / 2000 Classic) */
body.theme-classic #bar {
  background: #d4d0c8;
  border-top: 2px solid #fff;
  box-shadow: none;
}
body.theme-classic #st {
  border-radius: 0;
  background: #d4d0c8;
  color: #000;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  text-shadow: none;
  border: 2px outset #fff;
  box-shadow: none;
  height: 24px;
  margin: 3px 2px;
  padding: 0 8px;
}
body.theme-classic #st.on, body.theme-classic #st:active {
  border-style: inset;
}
body.theme-classic #tray {
  background: #d4d0c8;
  border: 1px solid #808080;
  border-bottom-color: #fff;
  border-right-color: #fff;
  color: #000;
  box-shadow: inset 1px 1px #404040;
}
body.theme-classic .tk {
  border-radius: 0;
  background: #d4d0c8;
  color: #000;
  border: 2px outset #fff;
}
body.theme-classic .tk.a {
  border-style: inset;
  background: #ece9d8;
  box-shadow: none;
}
body.theme-classic .win {
  border-radius: 0;
  border: 2px outset #fff;
  background: #d4d0c8;
  box-shadow: 2px 2px 0 #000;
}
body.theme-classic .tb {
  border-radius: 0;
  background: linear-gradient(to right, #0a246a, #a6caf0);
  color: #fff;
  text-shadow: none;
  height: 20px;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
}
body.theme-classic .win.bg .tb {
  background: linear-gradient(to right, #808080, #c0c0c0);
  color: #d4d0c8;
}
body.theme-classic .b {
  border-radius: 0;
  background: #d4d0c8;
  color: #000;
  border: 1px outset #fff;
  width: 16px;
  height: 14px;
  font-size: 10px;
}
body.theme-classic .b.x {
  background: #d4d0c8;
  color: #000;
}
body.theme-classic #menu {
  border-radius: 0;
  border: 2px outset #fff;
}
body.theme-classic .mh {
  background: linear-gradient(to right, #0a246a, #a6caf0);
}
body.theme-classic .mf {
  background: #d4d0c8;
  border-top: 1px solid #808080;
}
body.theme-classic .wb, body.theme-classic .mb, body.theme-classic .tm-content, body.theme-classic .tm-group, body.theme-classic #vol-popup {
  background: #d4d0c8!important;
}

/* ===================================================
   CMD.EXE / EINGABEAUFFORDERUNG
   =================================================== */
.cmd-term {
  flex: 1;
  background: #000;
  color: #fff;
  font: 13px 'Lucida Console', 'Courier New', monospace;
  padding: 8px 10px;
  overflow: auto;
  user-select: text;
  display: flex;
  flex-direction: column;
}
.cmd-out {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.35;
}
.cmd-line {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.cmd-prompt {
  white-space: nowrap;
  margin-right: 6px;
}
.cmd-in {
  flex: 1;
  background: transparent!important;
  color: inherit!important;
  border: 0!important;
  outline: none!important;
  font: inherit!important;
  padding: 0!important;
  caret-color: #fff;
  user-select: text;
}

/* ===================================================
   DRAG & DROP DROPZONE OVERLAY
   =================================================== */
.drop-overlay {
  position: absolute;
  inset: 10px;
  border: 3px dashed #316ac5;
  background: rgba(49, 106, 197, 0.22);
  border-radius: 8px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: #0a246a;
  font: 700 18px Tahoma, sans-serif;
  text-shadow: 0 1px 2px #fff;
  pointer-events: none;
}
.drop-overlay span {
  font-size: 38px;
}

/* ===================================================
   WELCOME SCREEN MULTI-USER TILES
   =================================================== */
.user-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.user-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.15s, border-color 0.15s;
}
.user-tile:hover, .user-tile.act {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.7);
}
.user-tile-av {
  width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 6px;
  background: linear-gradient(#ffd54f, #ff8f00);
  font-size: 24px;
  display: grid;
  place-items: center;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.user-tile-info {
  display: flex;
  flex-direction: column;
}
.user-tile-name {
  font: 700 15px Tahoma, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 2px #0a1e78;
}
.user-tile-sub {
  font: 11px Tahoma, sans-serif;
  color: #d8e2ff;
}

/* ===================================================
   EIGENSCHAFTEN VON ANZEIGE (desk.cpl)
   =================================================== */
.disp-preview-wrap {
  width: 220px;
  height: 140px;
  margin: 6px auto 12px auto;
  background: #333;
  border: 4px solid #555;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.disp-preview-desk {
  flex: 1;
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: #3a6ea5;
}
.disp-preview-win {
  position: absolute;
  top: 14px;
  left: 20px;
  width: 140px;
  height: 70px;
  border: 2px solid #0055ea;
  border-radius: 4px 4px 0 0;
  background: #ece9d8;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.disp-preview-tb {
  height: 16px;
  background: linear-gradient(#0058ee, #0026bd);
  color: #fff;
  font: 700 9px Tahoma;
  padding: 0 4px;
  display: flex;
  align-items: center;
  border-radius: 2px 2px 0 0;
}
.disp-preview-bar {
  height: 16px;
  background: linear-gradient(#3168d5, #1941a5);
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.disp-preview-btn {
  height: 12px;
  padding: 0 6px;
  background: linear-gradient(#63b963, #276f27);
  border-radius: 0 6px 6px 0;
  font: italic 700 8px Tahoma;
  color: #fff;
}

/* ==========================================================================
   Windows Media Player 9/10 Authentic Skin
   ========================================================================== */
.wmp-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(#1e3c72, #0d1b34);
  color: #fff;
  font-family: Tahoma, sans-serif;
  user-select: none;
}
.wmp-menu {
  display: flex;
  gap: 12px;
  padding: 3px 8px;
  background: #0a1426;
  font-size: 11px;
  border-bottom: 1px solid #234277;
}
.wmp-menu span {
  cursor: pointer;
  color: #c0d4f5;
}
.wmp-menu span:hover {
  color: #fff;
}
.wmp-main {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 4px;
  padding: 6px;
}
.wmp-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
  border: 2px solid #2c4c87;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}
.wmp-lcd {
  background: linear-gradient(#051124, #0a1f42);
  padding: 6px 10px;
  border-bottom: 1px solid #1c3561;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wmp-track-title {
  font-weight: 700;
  font-size: 13px;
  color: #60a5fa;
  text-shadow: 0 0 8px #2563eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.wmp-track-artist {
  font-size: 10px;
  color: #94a3b8;
}
.wmp-time {
  font-family: 'Lucida Console', monospace;
  font-size: 13px;
  color: #38bdf8;
  letter-spacing: 1px;
}
.wmp-vis-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
}
.wmp-vis-cv {
  width: 100%;
  height: 100%;
  max-height: 190px;
  display: block;
}
.wmp-vis-mode-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid #38bdf8;
  color: #38bdf8;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.wmp-vis-mode-btn:hover {
  background: #38bdf8;
  color: #000;
}
.wmp-seek-bar {
  background: #071224;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wmp-seek-slider {
  flex: 1;
  height: 4px;
  accent-color: #38bdf8;
  cursor: pointer;
}
.wmp-side {
  width: 210px;
  display: flex;
  flex-direction: column;
  background: #0f2347;
  border: 1px solid #234277;
  border-radius: 6px;
  overflow: hidden;
}
.wmp-side-hdr {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(#1c3a6f, #132a53);
  border-bottom: 1px solid #234277;
  color: #cbd5e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wmp-side-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wmp-pl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  color: #cbd5e1;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
}
.wmp-pl-item:hover {
  background: #1e3a6f;
  color: #fff;
}
.wmp-pl-item.act {
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 700;
}
.wmp-deck {
  background: linear-gradient(#1a3463 0%, #0d1e3d 50%, #081329 100%);
  border-top: 1px solid #3b629b;
  box-shadow: inset 0 1px 2px #5f87c2;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wmp-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wmp-ctl-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #60a5fa;
  background: linear-gradient(#3b82f6, #1d4ed8);
  color: #fff;
  font-size: 13px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 1px 2px #93c5fd, 0 2px 4px rgba(0,0,0,0.4);
}
.wmp-ctl-btn:hover {
  background: linear-gradient(#60a5fa, #2563eb);
}
.wmp-ctl-btn.play-btn {
  width: 40px;
  height: 40px;
  font-size: 16px;
  background: linear-gradient(#22c55e, #15803d);
  border-color: #86efac;
}
.wmp-ctl-btn.play-btn:hover {
  background: linear-gradient(#4ade80, #16a34a);
}
.wmp-vol-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 12px;
}
.wmp-vol-slider {
  width: 70px;
  height: 4px;
  accent-color: #38bdf8;
  cursor: pointer;
}

/* ==========================================================================
   Internet Explorer Retro Layout & Styles
   ========================================================================== */
.ie-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  background: #ece9d8;
  border-bottom: 1px solid #aca899;
  font-size: 11px;
}
.ie-nav span {
  cursor: pointer;
  padding: 1px 4px;
}
.ie-nav span:hover {
  background: #316ac5;
  color: #fff;
}
.ie-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid #dcd8c8;
}
.ie-tool-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  font: 11px Tahoma, sans-serif;
}
.ie-tool-btn:hover {
  border-color: #316ac5;
  background: #e0e8f8;
}
.ie-addr-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
}
.ie-addr-in {
  flex: 1;
  border: 1px solid #7f9db9;
  padding: 3px 6px;
  font: 12px 'Trebuchet MS', Tahoma, sans-serif;
  background: #fff;
}
.ie-fav-bar {
  display: flex;
  gap: 6px;
  padding: 2px 6px;
  background: #f4f2e8;
  border-bottom: 1px solid #d4d0c0;
}
.ie-fav-link {
  color: #0b388f;
  text-decoration: underline;
  cursor: pointer;
  font-size: 11px;
  padding: 1px 4px;
}
.ie-fav-link:hover {
  color: #ff0000;
}
.ie-viewport {
  flex: 1;
  background: #fff;
  overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif;
}

/* MSN 2001 Style */
.msn-portal {
  background: #fff;
  color: #000;
  font-family: Verdana, sans-serif;
}
.msn-hdr {
  background: linear-gradient(#003399, #002266);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msn-logo-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.msn-butterfly {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px #000);
}
.msn-brand {
  font: 700 22px 'Trebuchet MS', sans-serif;
  color: #fff;
}
.msn-nav-strip {
  background: #ea4335;
  display: flex;
  gap: 16px;
  padding: 4px 14px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.msn-body {
  padding: 12px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
.msn-hero {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  background: #f8fafc;
}
.msn-hero h2 {
  margin: 0 0 6px 0;
  font-size: 16px;
  color: #003399;
}
.msn-sidebar {
  border: 1px solid #e2e8f0;
  padding: 8px;
  background: #f1f5f9;
  border-radius: 4px;
}

/* Wikipedia 2001 Style */
.wiki-portal {
  padding: 14px;
  font-family: 'Times New Roman', Times, serif;
  color: #000;
  background: #fff;
}
.wiki-title-box {
  border-bottom: 2px solid #555;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

/* ==========================================================================
   Schüler-Portfolio & Webprojekte
   ========================================================================== */
.port-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: #fff;
}
.port-tabs {
  display: flex;
  gap: 2px;
  background: #ece9d8;
  padding: 4px 6px 0 6px;
  border-bottom: 1px solid #aca899;
}
.port-tab {
  padding: 4px 10px;
  font: 11px Tahoma, sans-serif;
  border: 1px solid #999;
  border-bottom: none;
  background: #e4e0d2;
  cursor: pointer;
  border-radius: 3px 3px 0 0;
}
.port-tab.act {
  background: #fff;
  font-weight: 700;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}
.port-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.port-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.port-card {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.port-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-color: #3b82f6;
}
.port-card-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
}
.port-card-title {
  font-weight: 700;
  font-size: 13px;
  color: #1e3a8a;
}
.port-card-desc {
  font-size: 11px;
  color: #475569;
  flex: 1;
}
.port-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.port-preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

/* ================= WEBSEITEN HUB (Explorer Style) ================= */
.webhub-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  background: #fff;
}
.webhub-sidebar {
  width: 180px;
  background: #6b8ec6;
  border-right: 1px solid #4a6fa5;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.webhub-pane {
  background: #dbe4f4;
  border: 1px solid #fff;
  border-radius: 4px;
  overflow: hidden;
}
.webhub-pane-hdr {
  background: linear-gradient(90deg, #215dc6, #7da5ea);
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.webhub-pane-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.webhub-pane-link {
  background: none;
  border: none;
  color: #0c2a68;
  font-size: 11px;
  text-align: left;
  padding: 2px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 2px;
}
.webhub-pane-link:hover {
  background: #fff;
  color: #ff6600;
  text-decoration: underline;
}
.webhub-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
}
.webhub-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.webhub-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #0055ea;
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.webhub-section-title {
  font-weight: bold;
  font-size: 13px;
  color: #0c2a68;
  display: flex;
  align-items: center;
  gap: 6px;
}
.webhub-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: bold;
}
.webhub-badge-locked {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #f87171;
}
.webhub-badge-open {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #6ee7b7;
}
.webhub-badge-public {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}
.webhub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.webhub-card {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 8px;
  background: #f8fafc;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  transition: all 0.15s;
}
.webhub-card:hover {
  background: #e6f0fa;
  border-color: #3b82f6;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.webhub-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.webhub-card-icon {
  font-size: 20px;
}
.webhub-card-name {
  font-weight: bold;
  font-size: 12px;
  color: #0c2a68;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhub-card-desc {
  font-size: 11px;
  color: #475569;
  line-height: 1.3;
}
.webhub-card-url {
  font-size: 10px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================= SPIELE (Games Folder) ================= */
.games-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow-y: auto;
  padding: 12px;
  gap: 12px;
}
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.games-card {
  border: 1px solid #7f9db9;
  border-radius: 6px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.08);
  transition: all 0.15s;
}
.games-card:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 10px rgba(37,99,235,0.2);
  transform: translateY(-2px);
}
.games-card-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.games-card-icon {
  font-size: 26px;
}
.games-card-title {
  font-weight: bold;
  font-size: 13px;
  color: #1e3a8a;
}
.games-card-sub {
  font-size: 10px;
  color: #64748b;
}
.games-card-desc {
  font-size: 11px;
  color: #334155;
  line-height: 1.35;
  margin-bottom: 10px;
}
.games-card-btn {
  padding: 4px 12px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(#ffffff 0%, #ece9d8 45%, #d6d0c0 100%);
  font-weight: bold;
  font-size: 11px;
  color: #000;
  cursor: pointer;
  align-self: flex-start;
}
.games-card-btn:hover {
  background: linear-gradient(#fff9e8 0%, #ffe391 40%, #ffc84a 70%, #f7ab2b 100%);
  border-color: #e5a700;
}

/* ================= RETRO PONG ================= */
.pong-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #090d16;
  color: #00ffcc;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
}
.pong-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin-bottom: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0,255,204,0.6);
}
.pong-canvas {
  background: #000;
  border: 2px solid #00ffcc;
  box-shadow: 0 0 16px rgba(0,255,204,0.3);
  cursor: crosshair;
  display: block;
}
.pong-bar {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

/* ================= KLONDIKE SOLITAIRE ================= */
.sol-table {
  flex: 1;
  background: #007a33;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  user-select: none;
}
.sol-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.sol-left-piles, .sol-foundations {
  display: flex;
  gap: 10px;
}
.sol-pile-slot {
  width: 62px;
  height: 86px;
  border: 1px dashed rgba(255,255,255,0.4);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.4);
  font-size: 20px;
  position: relative;
  background: rgba(0,0,0,0.08);
}
.sol-card {
  width: 62px;
  height: 86px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #777;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 5px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  cursor: pointer;
  position: relative;
}
.sol-card.back {
  background: repeating-linear-gradient(45deg, #1c52a3, #1c52a3 4px, #276fd6 4px, #276fd6 8px);
  border: 2px solid #fff;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
.sol-card.red {
  color: #cc0000;
}
.sol-card.black {
  color: #111111;
}
.sol-card.selected {
  outline: 2px solid #ffdd00;
  box-shadow: 0 0 8px #ffdd00;
}
.sol-tableau {
  display: grid;
  grid-template-columns: repeat(7, 62px);
  gap: 10px;
  flex: 1;
  min-height: 250px;
}
.sol-col {
  display: flex;
  flex-direction: column;
  position: relative;
}
.sol-col .sol-card {
  margin-top: -64px;
}
.sol-col .sol-card:first-child {
  margin-top: 0;
}
.sol-status-bar {
  display: flex;
  justify-content: space-between;
  padding: 3px 8px;
  background: #ece9d8;
  border-top: 1px solid #999;
  font-size: 11px;
}

/* Extra Apps Styles: Search, Radio, MSN, Photo Viewer, Pinball */
.srch-row:hover {
  background: #e6f2ff!important;
}
.rad-item:hover {
  background: #f7f5ee;
}
.rad-item.act {
  background: #dbeefd!important;
  border-left: 3px solid #245edb;
}
.msn-c-item:hover {
  background: #f0f7ff;
}
.msn-c-item.act {
  background: #e1efff!important;
  border-left: 3px solid #245edb;
}
@keyframes msnShake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-10px, 6px); }
  40% { transform: translate(10px, -6px); }
  60% { transform: translate(-8px, -4px); }
  80% { transform: translate(8px, 4px); }
  100% { transform: translate(0, 0); }
}
.msn-shaking {
  animation: msnShake 0.4s ease-in-out infinite;
}
#rover-tail {
  transform-origin: 72px 62px;
  animation: roverTailWag 1.2s ease-in-out infinite alternate;
}
@keyframes roverTailWag {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(18deg); }
}