/* ============================================================
   daniellindeen.com — Windows XP (Luna) theme
   Original recreation. No Microsoft assets are used; every
   icon, wallpaper and chrome element is drawn with CSS/SVG.
   ============================================================ */

:root{
  --luna-blue-1:#0a246a;
  --luna-blue-2:#3f8cf3;
  --title-1:#0058e6;
  --title-2:#3f93ff;
  --title-3:#0054e3;
  --title-inactive-1:#7ba2e7;
  --title-inactive-2:#a8c0ea;
  --face:#ece9d8;        /* XP dialog face */
  --face-dark:#d4d0c8;
  --taskbar-1:#3f8cf3;
  --taskbar-2:#245edb;
  --taskbar-3:#1941a5;
  --start-1:#3f9e42;
  --start-2:#2a7d2e;
  --sel:#316ac5;
  --font-ui:Tahoma,"Segoe UI",Geneva,Verdana,sans-serif;
  --font-mono:"Lucida Console","Courier New",monospace;
  --taskbar-h:34px;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:11px;
  color:#000;
  overflow:hidden;
  background:#5a7edc;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

button{font-family:inherit;font-size:inherit}
a{color:#0000ee}

/* Screen-reader only */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99999;
  background:#fff;color:#000;padding:8px 14px;border:2px solid var(--title-3);
}
.skip-link:focus{left:8px;top:8px}

/* ============================================================
   BOOT + LOGIN
   ============================================================ */

.screen{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
}
.screen[hidden]{display:none}

/* --- BIOS/boot --- */
#boot{background:#000;color:#c8c8c8;font-family:var(--font-mono);font-size:13px}
.boot-inner{width:min(560px,88vw);text-align:center}
.boot-logo{
  font-family:var(--font-ui);font-size:34px;font-weight:700;color:#fff;
  letter-spacing:-1px;margin-bottom:6px;
}
.boot-logo span{color:#f3a11b}
.boot-sub{color:#8f8f8f;font-size:12px;margin-bottom:34px;font-family:var(--font-ui)}
.boot-bar{
  width:180px;height:14px;margin:0 auto;border:1px solid #4a4a4a;
  padding:2px;display:flex;gap:3px;overflow:hidden;
}
.boot-bar i{
  width:20px;height:100%;background:#3f8cf3;flex:none;
  animation:bootslide 2s linear infinite;
}
@keyframes bootslide{
  from{transform:translateX(-26px)}
  to{transform:translateX(200px)}
}
.boot-hint{margin-top:28px;color:#6f6f6f;font-size:11px;font-family:var(--font-ui)}

/* --- Login (welcome) screen --- */
#login{
  background:
    radial-gradient(ellipse at 50% 0%,#5a9bea 0%,#2b5fc4 55%,#123a86 100%);
  color:#fff;
}
.login-bar{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#0d47a1,#f0a30a,#0d47a1);
}
.login-bar.top{top:16%}
.login-bar.bottom{bottom:16%}
.login-wrap{
  display:flex;align-items:center;gap:0;width:min(760px,92vw);
}
.login-left{
  flex:1;text-align:right;padding-right:34px;
  border-right:1px solid rgba(255,255,255,.45);
}
.login-left h1{
  font-size:26px;font-weight:400;margin:0 0 6px;text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.login-left p{font-size:12px;margin:0;color:#cfe0ff}
.login-right{flex:1;padding-left:34px}
.user-tile{
  display:flex;align-items:center;gap:12px;padding:8px;border:0;
  background:transparent;color:#fff;cursor:pointer;border-radius:4px;text-align:left;
}
.user-tile:hover,.user-tile:focus-visible{background:rgba(255,255,255,.16);outline:none}
.user-pic{
  width:58px;height:58px;border-radius:4px;flex:none;
  border:2px solid rgba(255,255,255,.85);object-fit:cover;background:#c8d8f0;
}
.user-name{font-size:17px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.user-role{font-size:11px;color:#cfe0ff}
.login-foot{
  position:absolute;bottom:calc(16% - 44px);left:0;right:0;text-align:center;
  font-size:11px;color:#dbe7ff;
}

/* ============================================================
   DESKTOP
   ============================================================ */

#desktop{
  position:fixed;inset:0 0 var(--taskbar-h) 0;
  overflow:hidden;
}
/* Bliss-style wallpaper: original SVG scene, not the MS photo */
.wallpaper{
  position:absolute;inset:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23205fb8'/%3E%3Cstop offset='45%25' stop-color='%234f9be8'/%3E%3Cstop offset='78%25' stop-color='%239ed0f5'/%3E%3Cstop offset='100%25' stop-color='%23d8ecfb'/%3E%3C/linearGradient%3E%3ClinearGradient id='hill' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%237fbf3f'/%3E%3Cstop offset='40%25' stop-color='%235da42c'/%3E%3Cstop offset='100%25' stop-color='%233f7d1e'/%3E%3C/linearGradient%3E%3ClinearGradient id='hill2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%2396d155'/%3E%3Cstop offset='100%25' stop-color='%236aad33'/%3E%3C/linearGradient%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23sky)'/%3E%3Cg filter='url(%23blur)' fill='%23ffffff' opacity='.92'%3E%3Cellipse cx='300' cy='210' rx='150' ry='42'/%3E%3Cellipse cx='390' cy='185' rx='100' ry='36'/%3E%3Cellipse cx='1180' cy='150' rx='185' ry='40'/%3E%3Cellipse cx='1290' cy='128' rx='110' ry='32'/%3E%3Cellipse cx='800' cy='300' rx='210' ry='30' opacity='.55'/%3E%3Cellipse cx='620' cy='110' rx='90' ry='24' opacity='.7'/%3E%3C/g%3E%3Cpath d='M0 690 C 300 560 560 545 820 610 C 1080 675 1340 700 1600 645 L1600 1000 L0 1000 Z' fill='url(%23hill2)'/%3E%3Cpath d='M0 760 C 340 640 700 622 1010 700 C 1260 762 1430 782 1600 758 L1600 1000 L0 1000 Z' fill='url(%23hill)'/%3E%3Cpath d='M0 860 C 420 792 900 800 1600 880 L1600 1000 L0 1000 Z' fill='%2335701a' opacity='.55'/%3E%3C/svg%3E") center/cover no-repeat,
    linear-gradient(#4f9be8,#3f7d1e);
}

/* --- Desktop icons --- */
#icons{
  position:absolute;top:8px;left:8px;bottom:8px;
  display:flex;flex-direction:column;flex-wrap:wrap;
  align-content:flex-start;gap:2px;
}
.icon{
  width:82px;padding:6px 3px 7px;border:1px dotted transparent;
  background:transparent;cursor:default;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:11px;line-height:1.25;text-align:center;
}
.icon svg{width:34px;height:34px;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45))}
.icon .label{
  text-shadow:1px 1px 2px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.6);
  padding:1px 3px;word-break:break-word;
}
.icon.selected .label{background:var(--sel);text-shadow:none}
.icon.selected{border-color:#fff}
.icon:focus-visible{outline:1px dotted #fff;outline-offset:-1px}

/* ============================================================
   WINDOWS
   ============================================================ */

.win{
  position:absolute;
  min-width:260px;min-height:140px;
  background:var(--title-3);
  border-radius:8px 8px 0 0;
  box-shadow:2px 3px 12px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  padding:0 4px 4px;
}
.win.inactive{background:#7fa8e8}
.win[hidden]{display:none}
.win.maximized{border-radius:0}

.titlebar{
  height:28px;flex:none;display:flex;align-items:center;gap:5px;
  padding:0 3px 0 6px;
  background:linear-gradient(180deg,var(--title-2) 0%,var(--title-1) 12%,var(--title-3) 55%,#0a4bc4 88%,#1e63d8 100%);
  border-radius:7px 7px 0 0;
  color:#fff;font-weight:700;font-size:12px;
  text-shadow:1px 1px 2px rgba(0,0,0,.55);
  cursor:default;
}
.win.inactive .titlebar{
  background:linear-gradient(180deg,var(--title-inactive-2) 0%,var(--title-inactive-1) 40%,#88a9e0 100%);
  color:#e6eeff;
}
.win.maximized .titlebar{border-radius:0}
.titlebar .ticon{width:16px;height:16px;flex:none}
.titlebar .ttext{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tbtns{display:flex;gap:2px;flex:none}
.tbtn{
  width:21px;height:21px;border:1px solid rgba(255,255,255,.75);
  border-radius:3px;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#5f9df5,#2565d8 60%,#1d55c0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  padding:0;color:#fff;
}
.tbtn:hover{filter:brightness(1.18)}
.tbtn.close{background:linear-gradient(180deg,#f08a6a,#d64826 55%,#b4331a)}
.tbtn svg{width:9px;height:9px;stroke:#fff;stroke-width:2.1;fill:none;stroke-linecap:round}

.winbody{
  flex:1;background:var(--face);overflow:auto;
  border:1px solid #0a2a7a;border-top:0;
}
.win.has-menu .winbody{border-top:0}

/* Menu bar */
.menubar{
  flex:none;background:var(--face);display:flex;gap:2px;padding:2px 3px;
  border-left:1px solid #0a2a7a;border-right:1px solid #0a2a7a;
  font-size:11px;
}
.menubar span{padding:2px 7px;border:1px solid transparent}
.menubar span:hover{background:var(--sel);color:#fff}

/* Status bar */
.statusbar{
  flex:none;height:20px;background:var(--face);
  border:1px solid #0a2a7a;border-top:1px solid #aca899;
  display:flex;align-items:center;gap:6px;padding:0 6px;font-size:11px;color:#3b3b3b;
}
.statusbar .cell{
  border:1px solid #d4d0c8;border-top-color:#aca899;border-left-color:#aca899;
  padding:1px 8px;
}

.resize-handle{
  position:absolute;right:0;bottom:0;width:16px;height:16px;
  cursor:nwse-resize;
}

/* ============================================================
   WINDOW CONTENT (Explorer-ish)
   ============================================================ */

.content{padding:14px 18px;user-select:text;color:#000;font-size:12px;line-height:1.55}
.content h2{
  font-size:16px;margin:0 0 4px;color:#0a246a;font-weight:700;
}
.content h3{font-size:13px;margin:16px 0 3px;color:#1c3f94}
.content p{margin:0 0 10px}
.content a{color:#0645ad}
.content a:hover{color:#d64826}
.content ul{margin:0 0 10px;padding-left:18px}
.content li{margin-bottom:4px}
.rule{height:1px;background:#c8c4b4;margin:14px 0;border:0}

/* Explorer left pane */
.explorer{display:flex;min-height:100%}
.exp-side{
  width:170px;flex:none;padding:10px 8px;
  background:linear-gradient(180deg,#7ba0e8,#6d92dd);
  color:#fff;
}
.exp-panel{background:#fff;border-radius:4px;margin-bottom:10px;overflow:hidden}
.exp-panel h4{
  margin:0;padding:5px 9px;font-size:11px;color:#0c3d91;
  background:linear-gradient(180deg,#f0f4fd,#d8e4fb);
}
.exp-panel .body{padding:7px 9px;color:#1c3f94;font-size:11px;line-height:1.5}
.exp-panel .body a{display:block;color:#1c3f94;margin-bottom:3px}
.exp-main{flex:1;background:#fff;padding:12px 16px;overflow:auto}

/* File/tile list */
.tiles{display:flex;flex-direction:column;gap:2px}
.tile{
  display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border:1px solid transparent;
  cursor:default;
}
.tile:hover{background:#eaf1ff;border-color:#c3d6f5}
.tile svg{width:32px;height:32px;flex:none}
.tile .t-name{font-weight:700;color:#0a246a;font-size:12px}
.tile .t-meta{color:#555;font-size:11px;margin-top:2px;line-height:1.45}
.award{
  display:inline-block;background:#fff6d8;border:1px solid #e0c869;
  color:#7a5c00;font-size:10px;padding:1px 5px;margin:2px 4px 2px 0;border-radius:2px;
}

/* Buttons */
.xpbtn{
  font-size:11px;padding:3px 14px;min-width:76px;
  background:linear-gradient(180deg,#fff,#f0efe4 45%,#dfdcc8);
  border:1px solid #7f7f74;border-radius:3px;cursor:pointer;
  box-shadow:inset 0 0 0 1px #fff;
}
.xpbtn:hover{border-color:#e8a33d;box-shadow:inset 0 0 0 1px #ffe8b0}
.xpbtn:active{background:#d8d4c0}
.xpbtn.primary{font-weight:700}

/* Photo grid */
.photogrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:12px;padding:4px 0;
}
.photocell{
  border:1px solid transparent;padding:5px;text-align:center;cursor:pointer;
  background:none;font:inherit;
}
.photocell:hover{background:#eaf1ff;border-color:#c3d6f5}
.photocell:focus-visible{outline:1px dotted #0a246a}
.photocell img{
  width:100%;height:88px;object-fit:cover;display:block;
  border:1px solid #808080;background:#fff;padding:2px;
}
.photocell .cap{font-size:10px;color:#333;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Image viewer */
.viewer{background:#5b5b5b;display:flex;flex-direction:column;height:100%}
.viewer .stage{flex:1;display:grid;place-items:center;overflow:hidden;padding:8px}
.viewer .stage img{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 3px 14px rgba(0,0,0,.6)}
.viewer .bar{
  flex:none;background:var(--face);border-top:1px solid #aca899;
  padding:5px;display:flex;gap:6px;justify-content:center;align-items:center;
}

/* Media player */
.wmp{background:#1d2b45;display:flex;flex-direction:column;height:100%}
.wmp .stage{flex:1;display:grid;place-items:center;background:#000;overflow:hidden}
.wmp video{max-width:100%;max-height:100%;display:block}
.wmp .bar{
  flex:none;padding:7px 10px;color:#c9dcff;font-size:11px;
  background:linear-gradient(180deg,#3d5b8f,#1b2c4b);
  border-top:1px solid #4d6da4;
}

/* Notepad */
.notepad{
  background:#fff;height:100%;padding:8px 10px;overflow:auto;
  font-family:var(--font-mono);font-size:12px;line-height:1.6;color:#000;
  user-select:text;white-space:pre-wrap;
}

/* Form */
.field{margin-bottom:9px;display:flex;flex-direction:column;gap:3px;max-width:340px}
.field label{font-size:11px;color:#333}
.field input,.field textarea{
  font-family:var(--font-ui);font-size:12px;padding:3px 5px;
  border:1px solid #7f9db9;background:#fff;
}
.field textarea{min-height:78px;resize:vertical}

/* ============================================================
   TASKBAR
   ============================================================ */

#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:var(--taskbar-h);z-index:8000;
  display:flex;align-items:stretch;
  background:linear-gradient(180deg,#2b7ae5 0%,#1c5fd4 8%,#2f7ce8 40%,#2064da 88%,#1941a5 100%);
  border-top:1px solid #4a95f0;
}

#startbtn{
  flex:none;display:flex;align-items:center;gap:6px;
  padding:0 20px 2px 9px;border:0;cursor:pointer;color:#fff;
  font-size:14px;font-weight:700;font-style:italic;
  text-shadow:1px 1px 2px rgba(0,0,0,.5);
  background:linear-gradient(180deg,#63b74e 0%,#48a03a 10%,#369130 45%,#2b7d2a 88%,#54a544 100%);
  border-radius:0 9px 9px 0;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.25);
}
#startbtn:hover{filter:brightness(1.12)}
#startbtn .flag{width:19px;height:19px;flex:none}
#startbtn[aria-expanded="true"]{filter:brightness(.9)}

#tasks{flex:1;display:flex;align-items:center;gap:3px;padding:0 5px;overflow:hidden}
.taskbtn{
  display:flex;align-items:center;gap:5px;
  min-width:120px;max-width:165px;height:23px;padding:0 8px;
  border:1px solid #2a5fbd;border-radius:3px;cursor:pointer;
  background:linear-gradient(180deg,#4d95f0,#2f74e0 50%,#1f5cc6);
  color:#fff;font-size:11px;text-shadow:0 1px 1px rgba(0,0,0,.4);
  overflow:hidden;
}
.taskbtn svg{width:14px;height:14px;flex:none}
.taskbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.taskbtn:hover{filter:brightness(1.14)}
.taskbtn.active{
  background:linear-gradient(180deg,#1b4fae,#2a67cc 55%,#3d7ce0);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.45);
}

#tray{
  flex:none;display:flex;align-items:center;gap:8px;padding:0 11px 0 12px;
  background:linear-gradient(180deg,#1a8fe0,#1478d0 45%,#0f60b8);
  box-shadow:inset 1px 0 0 rgba(0,0,0,.3);
  color:#fff;font-size:11px;text-shadow:0 1px 1px rgba(0,0,0,.35);
}
#tray svg{width:15px;height:15px}
#clock{min-width:56px;text-align:center}

/* ============================================================
   START MENU
   ============================================================ */

#startmenu{
  position:fixed;left:2px;bottom:var(--taskbar-h);z-index:8500;
  width:398px;border-radius:8px 8px 0 0;overflow:hidden;
  box-shadow:2px -2px 14px rgba(0,0,0,.5);
  border:1px solid #0d3a9e;border-bottom:0;
}
#startmenu[hidden]{display:none}
.sm-head{
  height:56px;display:flex;align-items:center;gap:10px;padding:0 12px;
  background:linear-gradient(180deg,#1c62d8,#1450bd 55%,#0d3a9e);
  color:#fff;font-size:15px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5);
  border-bottom:2px solid #e88b1e;
}
.sm-head img{
  width:42px;height:42px;border-radius:4px;border:2px solid #cfe0ff;object-fit:cover;
}
.sm-cols{display:flex;background:#fff}
.sm-left{
  flex:1;background:#fff;padding:5px;border-right:1px solid #b6cdf0;
}
.sm-right{
  width:158px;flex:none;padding:5px;
  background:linear-gradient(180deg,#d3e5fa,#c2daf7);
}
.sm-item{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:6px 8px;border:0;background:transparent;cursor:pointer;
  text-align:left;font-size:11px;color:#000;border-radius:2px;
}
.sm-item:hover,.sm-item:focus-visible{background:var(--sel);color:#fff;outline:none}
.sm-item:hover .sm-sub{color:#dbe7ff}
.sm-item svg{width:24px;height:24px;flex:none}
.sm-right .sm-item svg{width:20px;height:20px}
.sm-item .sm-name{font-weight:700}
.sm-item .sm-sub{display:block;font-weight:400;color:#666;font-size:10px;margin-top:1px}
.sm-sep{height:1px;background:#c6d9f2;margin:4px 6px}
.sm-foot{
  display:flex;justify-content:flex-end;gap:8px;padding:6px 10px;
  background:linear-gradient(180deg,#1c62d8,#1450bd 55%,#0d3a9e);
  border-top:2px solid #e88b1e;
}
.sm-foot button{
  display:flex;align-items:center;gap:6px;background:transparent;border:0;
  color:#fff;font-size:11px;cursor:pointer;padding:3px 6px;border-radius:3px;
  text-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.sm-foot button:hover{background:rgba(255,255,255,.18)}
.sm-foot svg{width:19px;height:19px}

/* ============================================================
   DIALOGS
   ============================================================ */
#modal{
  position:fixed;inset:0;z-index:8800;background:rgba(0,0,0,.35);
  display:grid;place-items:center;
}
#modal[hidden]{display:none}
.dialog{
  width:min(400px,92vw);background:var(--title-3);border-radius:8px 8px 0 0;
  padding:0 4px 4px;box-shadow:3px 4px 18px rgba(0,0,0,.5);
}
.dialog .winbody{padding:18px;background:var(--face);display:flex;gap:14px}
.dialog .actions{
  padding:0 18px 16px;background:var(--face);
  border:1px solid #0a2a7a;border-top:0;
  display:flex;gap:8px;justify-content:flex-end;
}

/* ============================================================
   NOSCRIPT / RESPONSIVE
   ============================================================ */
#nojs{
  position:fixed;inset:0;z-index:9999;background:#ece9d8;color:#000;
  overflow:auto;padding:28px;font-size:14px;line-height:1.6;
}
#nojs a{color:#0645ad}
#nojs h1{color:#0a246a}

@media (max-width:760px){
  :root{--taskbar-h:40px}
  body{font-size:12px}
  .win{border-radius:6px 6px 0 0}
  .exp-side{display:none}
  .login-wrap{flex-direction:column;gap:22px;text-align:center}
  .login-left{border-right:0;border-bottom:1px solid rgba(255,255,255,.4);
    padding:0 0 18px;text-align:center}
  .login-right{padding-left:0}
  #startmenu{width:calc(100vw - 4px)}
  .taskbtn{min-width:44px}
  .taskbtn span{display:none}
  .icon{width:74px;font-size:11px}
  #tray{padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}