/* ============================================================
   Windows XP (Luna Blue) theme — self-contained, no external assets
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  font-family: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
  font-size: 11px; -webkit-user-select: none; user-select: none;
}

/* ---- Bliss desktop ---- */
.desktop {
  position: fixed; inset: 0;
  background:
    linear-gradient(180deg, #4d90fe00 0%, #4d90fe00 55%, #5ba829 55%, #3f7d16 100%),
    linear-gradient(180deg, #2a63c9 0%, #4a90e2 40%, #78b6f0 55%, #79c94a 56%, #4e9a2e 75%, #367c1a 100%);
  overflow: hidden;
}

/* ---- Desktop icons ---- */
.icons { position: absolute; top: 12px; left: 12px; display: grid;
  grid-template-columns: repeat(auto-fill, 84px); gap: 6px; width: calc(100% - 24px); }
.icon { width: 84px; text-align: center; color: #fff; cursor: pointer;
  padding: 4px; border: 1px solid transparent; border-radius: 2px; }
.icon:hover { background: rgba(60,110,200,.35); border-color: rgba(255,255,255,.35); }
.icon.sel { background: rgba(60,110,200,.55); border-color: rgba(255,255,255,.6); }
.icon .glyph { font-size: 34px; line-height: 40px; text-shadow: 1px 1px 2px #0007; }
.icon .label { text-shadow: 1px 1px 2px #000a; word-wrap: break-word; margin-top: 2px; }
.icon .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle;}
.dot.online { background:#39d353; box-shadow:0 0 4px #39d353; }
.dot.offline{ background:#c0392b; }

/* ---- Windows ---- */
.window {
  position: absolute; min-width: 300px; max-width: 96vw; max-height: 92vh; background: #ece9d8;
  border: 1px solid #0831d9; border-radius: 8px 8px 0 0;
  box-shadow: 3px 3px 10px #0006; display: flex; flex-direction: column;
  animation: winIn .16s cubic-bezier(.2,.9,.3,1.1);
}
.window.active { box-shadow: 5px 6px 22px #0009; }
@keyframes winIn { from { opacity:0; transform: scale(.96) translateY(6px); } to { opacity:1; transform:none; } }
.title-bar {
  height: 28px; border-radius: 7px 7px 0 0; display: flex; align-items: center;
  padding: 0 4px 0 6px; color: #fff; font-weight: bold; cursor: move;
  background: linear-gradient(180deg, #3d95ff 0%, #2b76ea 8%, #145ee0 40%, #0f52d6 88%, #0a3fb8 100%);
  text-shadow: 1px 1px 1px #0007; gap: 4px;
}
.window:not(.active) .title-bar { background: linear-gradient(180deg,#8ba7e8,#7f9fe0 40%,#6f90d8); }
.title-bar .t-ico { font-size: 14px; }
.title-bar .t-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-bar .btns { display: flex; gap: 2px; }
.tb-btn {
  width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; color: #fff;
  font-weight: bold; font-size: 11px; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg,#4f9bff,#1d63e6); }
.tb-btn.close { background: linear-gradient(180deg,#f28e82,#e2452f); border-color:#fff; }
.tb-btn:hover { filter: brightness(1.12); }
.window-body { padding: 10px; overflow: auto; background:#ece9d8;
  border:2px solid; border-color:#fff #86846b #86846b #fff; margin:2px; flex:1;
  max-height: calc(92vh - 40px); }
.tabpane { overflow-x: auto; }
table.xp { min-width: 0; }
.window-body::-webkit-scrollbar { width:15px; height:15px; }
.window-body::-webkit-scrollbar-thumb { background:linear-gradient(90deg,#cfd8ef,#9fb4e0); border:1px solid #6f8bc0; border-radius:2px; }
.window-body::-webkit-scrollbar-track { background:#e4e9f5; }

/* ---- Controls ---- */
button.xp {
  font: 11px Tahoma; padding: 3px 12px; min-width: 72px; cursor: pointer;
  border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(180deg,#fff 0%,#ecebe5 45%,#d8d0c4 90%,#cec7ba 100%);
}
button.xp:hover { border-color:#e08a00; background: linear-gradient(180deg,#fff,#f4f0e8 45%,#e6dccb 90%); }
button.xp:active { background: linear-gradient(180deg,#cec7ba,#d8d0c4); }
button.xp.primary { font-weight: bold; }
button.xp.danger  { border-color:#8a1f1f; }
button.xp:disabled{ color:#888; cursor:default; filter:grayscale(.4); }

input.xp, select.xp, textarea.xp {
  font: 11px Tahoma; padding: 3px 5px; border: 1px solid #7f9db9; border-radius: 0;
  background: #fff; box-shadow: inset 1px 1px 1px #0001; width: 100%;
}
label.xp { display:block; margin: 6px 0 2px; color:#0a246a; }
fieldset.xp { border:1px solid #b0a58e; border-radius:3px; padding:8px; margin:8px 0; }
legend { color:#0a246a; font-weight:bold; padding:0 4px; }

table.xp { width:100%; border-collapse:collapse; background:#fff; }
table.xp th { background:linear-gradient(180deg,#f6f5ee,#e4e0cf); text-align:left; padding:4px 6px; border:1px solid #d0cbb8; }
table.xp td { padding:4px 6px; border:1px solid #ece9d8; }
table.xp tr:hover td { background:#eaf1fb; }

.badge { padding:1px 6px; border-radius:8px; font-size:10px; color:#fff; }
.badge.run { background:#2e8b2e; }
.badge.stop{ background:#8a8a8a; }
.badge.err { background:#c0392b; }

/* ---- Taskbar ---- */
.taskbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 30px; display: flex; align-items: stretch;
  background: linear-gradient(180deg,#2f8bff 0%,#1f6fe0 8%,#1560d8 45%,#1c72ec 92%,#0a44b5 100%);
  border-top: 1px solid #093ec9; z-index: 9999;
}
.start {
  display: flex; align-items: center; gap: 6px; padding: 0 22px 0 10px; font-style: italic;
  font-weight: bold; font-size: 15px; color: #fff; cursor: pointer;
  border-radius: 0 12px 12px 0; text-shadow: 1px 1px 1px #0006;
  background: linear-gradient(180deg,#5cb85c 0%,#3fa63f 8%,#2f8f2f 50%,#278027 92%,#1c6b1c 100%);
  box-shadow: inset 0 1px 1px #fff5;
}
.start:hover { filter: brightness(1.08); }
.start .flag { font-size:16px; }
.tasks { flex:1; display:flex; align-items:center; gap:3px; padding:2px 4px; overflow:hidden; }
.task-item { max-width:160px; height:24px; display:flex; align-items:center; gap:5px; padding:0 8px;
  color:#fff; font-size:11px; border:1px solid #0a44b5; border-radius:3px; cursor:pointer;
  background:linear-gradient(180deg,#3d92ff,#1a63e0); overflow:hidden; white-space:nowrap; }
.task-item.active { background:linear-gradient(180deg,#1657c6,#1e6ae4); box-shadow: inset 1px 1px 3px #0006; }
.tray { display:flex; align-items:center; gap:8px; padding:0 10px; color:#fff;
  background: linear-gradient(180deg,#1c8adb,#1467c9); border-left:1px solid #4aa0e8; font-size:11px; }

/* ---- Start menu ---- */
.startmenu { position: fixed; bottom: 30px; left: 4px; width: 300px; z-index: 10000;
  border:1px solid #0831d9; border-radius: 8px 8px 0 0; overflow:hidden; box-shadow:3px 3px 12px #0007; display:none; }
.startmenu.open { display:block; }
.startmenu .head { background:linear-gradient(180deg,#2b6fd6,#0f52d6); color:#fff; font-weight:bold;
  padding:8px 10px; font-size:13px; }
.startmenu .body { background:#fff; padding:6px; }
.startmenu .mi { padding:7px 10px; display:flex; gap:8px; align-items:center; cursor:pointer; border-radius:3px; color:#00248a; }
.startmenu .mi:hover { background:#2f71e0; color:#fff; }
.startmenu .foot { background:linear-gradient(180deg,#2b6fd6,#0f52d6); padding:6px; display:flex; justify-content:flex-end; gap:8px; }

/* ---- XP tabs ---- */
.tabbar { display:flex; gap:2px; padding:0 4px; margin: 2px 0 -1px; position:relative; z-index:2; flex-wrap:wrap; }
.tab { padding:4px 12px; font-size:11px; cursor:pointer; border:1px solid #a7a08c; border-bottom:0;
  border-radius:4px 4px 0 0; background:linear-gradient(180deg,#efece0,#dcd7c6); color:#333; position:relative; top:1px; }
.tab:hover { background:linear-gradient(180deg,#fbfaf5,#e8e3d3); }
.tab.active { background:#f4f1ea; top:0; padding-bottom:6px; font-weight:bold; color:#00248a; border-color:#8a836b; }
.tab .tb-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:4px; vertical-align:middle; }
.tabpane { border:1px solid #8a836b; border-radius:0 4px 4px 4px; background:#f4f1ea; padding:10px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:11px; }
.kv b { color:#00248a; }
.statline { display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding:6px 8px; margin-bottom:8px;
  background:linear-gradient(180deg,#fbfaf5,#eae5d5); border:1px solid #cec7b4; border-radius:4px; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:10px; font-size:11px;
  background:#fff; border:1px solid #cec7b4; }
.chip .d { width:8px; height:8px; border-radius:50%; }
.big-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.big-actions button { padding:8px 14px; font-weight:bold; }
.copystate { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:4px; margin-bottom:10px;
  font-weight:bold; border:1px solid; }
.copystate .d { width:11px; height:11px; border-radius:50%; }
.copystate.on  { background:#e7f6e7; border-color:#8ecb8e; color:#1e6b1e; }
.copystate.on .d  { background:#39d353; box-shadow:0 0 6px #39d353; animation:pulse 1.4s infinite; }
.copystate.off { background:#f0eeea; border-color:#bbb4a2; color:#666; }
.copystate.off .d { background:#b0b0b0; }
.copystate.warn { background:#fff6d5; border-color:#e0c268; color:#7a5a00; }
.copystate.warn .d { background:#e0a000; box-shadow:0 0 6px #e0a000; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ---- copy pipeline ---- */
.pipeline { border:1px solid #cec7b4; border-radius:5px; background:linear-gradient(180deg,#fbfaf5,#eee9d9); padding:8px 10px; margin-bottom:10px; }
.pipe-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
.pipe-row .pipe-ico { font-size:18px; }
.pipe-arrow { padding:2px 0 2px 26px; color:#888; font-size:16px; }

/* ---- XP message box ---- */
.msgbox { width: 360px; }
.msgbox .window-body { padding: 14px; }
.mb-row { display:flex; gap:14px; align-items:flex-start; }
.mb-ico { width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-weight:bold; font-size:22px; color:#fff; font-family:Georgia,serif; box-shadow:0 1px 3px #0004; }
.mb-ico.err  { background:radial-gradient(circle at 35% 30%,#ff8a8a,#d0201a); }
.mb-ico.warn { background:radial-gradient(circle at 35% 30%,#ffe07a,#e0a000); color:#5a4200; }
.mb-ico.info { background:radial-gradient(circle at 35% 30%,#8fd0ff,#1a76d0); }
.mb-msg { flex:1; font-size:12px; line-height:1.5; padding-top:4px; word-break:break-word; }
.mb-btns { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.mb-btns .xp { min-width:88px; }

/* ---- software install cards ---- */
.swgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.swcard { border:1px solid #b7ad93; border-radius:4px; padding:8px; background:linear-gradient(180deg,#fbfaf5,#efece0);
  display:flex; flex-direction:column; gap:6px; }
.swtop { display:flex; align-items:center; gap:6px; }
.swtop .swi { font-size:18px; }
.swstate { min-height:18px; }
.warnbar { background:#fff6d5; border:1px solid #e0c268; color:#7a5a00; padding:5px 8px; border-radius:3px; margin-bottom:6px; }
@media (max-width:520px){ .swgrid{ grid-template-columns:1fr; } }

/* ---- balloon-tip toasts (XP tray notifications) ---- */
#toasts { position: fixed; right: 10px; bottom: 40px; z-index: 20000; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast { width: 300px; max-width: 90vw; background: linear-gradient(180deg,#fffef4,#fbf6d8);
  border: 1px solid #c9b978; border-radius: 6px; box-shadow: 0 4px 14px #0005; padding: 9px 11px;
  display:flex; gap:9px; align-items:flex-start; position:relative;
  animation: toastIn .28s cubic-bezier(.2,.9,.3,1.1); }
.toast.out { animation: toastOut .3s ease forwards; }
.toast::after { content:''; position:absolute; right:22px; bottom:-8px; width:14px; height:14px;
  background: #fbf6d8; border-right:1px solid #c9b978; border-bottom:1px solid #c9b978; transform: rotate(45deg); }
.toast .ic { width:26px; height:26px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:bold; font-size:15px; }
.toast .ic.working { background:radial-gradient(circle at 35% 30%,#8fd0ff,#1a76d0); }
.toast .ic.success { background:radial-gradient(circle at 35% 30%,#9cf09c,#2e9e2e); }
.toast .ic.info    { background:radial-gradient(circle at 35% 30%,#8fd0ff,#1a76d0); }
.toast .ic.error   { background:radial-gradient(circle at 35% 30%,#ff8a8a,#d0201a); }
.toast.err { background:linear-gradient(180deg,#fff4f4,#ffe0e0); border-color:#e0a0a0; }
.toast.err::after { background:#ffe0e0; border-color:#e0a0a0; }
.toast.err .tt { color:#8a1a1a; } .toast.err .ms { color:#7a2a2a; }
.toast.ok { background:linear-gradient(180deg,#f4fff4,#e0ffe0); border-color:#a0d0a0; }
.toast.ok::after { background:#e0ffe0; border-color:#a0d0a0; }
.toast.ok .tt { color:#1a6b1a; } .toast.ok .ms { color:#2a5a2a; }
.toast .tx { flex:1; min-width:0; }
.toast .tt { font-weight:bold; color:#5a4a00; font-size:12px; }
.toast .ms { font-size:11px; color:#6b5c33; margin-top:1px; word-break:break-word; }
.toast .sp { display:inline-block; width:13px; height:13px; border:2px solid #cfe4ff; border-top-color:#1a76d0; border-radius:50%; animation: spin .7s linear infinite; }
@keyframes toastIn { from{opacity:0; transform: translateX(30px) scale(.95);} to{opacity:1; transform:none;} }
@keyframes toastOut { to{opacity:0; transform: translateX(30px) scale(.95);} }
@keyframes spin { to { transform: rotate(360deg); } }

/* spinner inside a button */
button.xp .bspin { display:inline-block; width:10px; height:10px; margin-right:5px; vertical-align:-1px;
  border:2px solid #b9c9e6; border-top-color:#20539b; border-radius:50%; animation: spin .7s linear infinite; }
button.xp[data-busy] { color:#20539b; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  html, body { font-size: 12px; }
  .window { left: 2vw !important; top: 1.5vh !important; width: 96vw !important; }
  .msgbox { width: 92vw !important; }
  .icons { grid-template-columns: repeat(auto-fill, 72px); }
  .icon { width: 72px; }
  .tab { padding: 4px 9px; }
  .big-actions { flex-direction: column; align-items: stretch; }
  .big-actions button { width: 100%; }
  .start { padding: 0 14px 0 8px; font-size: 13px; }
  .tray { padding: 0 6px; font-size: 10px; }
  #toasts { right: 5px; bottom: 36px; }
}
@media (max-width: 400px) {
  .task-item { max-width: 70px; }
}

/* ---- helpers ---- */
.row { display:flex; gap:8px; align-items:center; }
.row.wrap { flex-wrap:wrap; }
.grow { flex:1; }
.muted { color:#555; }
.mono { font-family: "Lucida Console", monospace; font-size:11px; }
.logbox { background:#000; color:#20e020; font-family:"Lucida Console",monospace; font-size:11px;
  padding:6px; height:150px; overflow:auto; white-space:pre-wrap; }
.hidden { display:none !important; }