* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font: 13px "Segoe UI", Tahoma, Arial, sans-serif; color: #10233b; background: #071b45; }

.win7-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 320px;
  min-height: 320px;
  overflow: hidden;

  --dp-taskbar-item-width: 128px;
  --dp-taskbar-item-height: 34px;
  --dp-taskbar-item-gap: 8px;
  --dp-taskbar-item-padding: 3px 9px;
  --dp-taskbar-item-radius: 4px;
  --dp-dock-bg: linear-gradient(rgba(22, 91, 167, .78), rgba(5, 43, 109, .94));
  --dp-dock-border: rgba(173, 219, 255, .68);
  --dp-dock-backdrop-filter: blur(14px) saturate(1.35);
}

.win7-shell::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 82% 9%, rgba(135, 213, 255, .76), transparent 24%),
    linear-gradient(150deg, transparent 0 46%, rgba(255,255,255,.12) 47%, transparent 55%),
    linear-gradient(25deg, transparent 0 53%, rgba(62, 172, 255, .23) 54%, transparent 68%),
    radial-gradient(ellipse at 42% 118%, rgba(3, 90, 183, .84), transparent 58%),
    linear-gradient(145deg, #3a9ada 0%, #1266b5 43%, #083c8a 100%);
}

.win7-desktop-root { position: relative; width: 100%; height: 100%; z-index: 1; }

.win7-github {
  position: fixed; right: 14px; top: 14px; z-index: 30000;
  min-height: 30px; display: inline-flex; align-items: center; padding: 0 11px;
  border: 1px solid rgba(255,255,255,.38); border-radius: 4px;
  color: #fff; text-decoration: none; text-shadow: 0 1px 2px #00366e;
  background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 2px 8px rgba(0,35,88,.28);
}

.win7-shell .dp-desktop { background: transparent !important; }
.win7-shell .dp-desktop-icon-area { bottom: 44px !important; }
.win7-shell .dp-window-area { bottom: 44px !important; }
.win7-shell .dp-dock.dp-dock-bottom {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 44px !important;
  padding: 5px 10px !important;
  gap: 4px;
  border: 0 !important;
  border-top: 1px solid rgba(190,228,255,.72) !important;
  background: linear-gradient(rgba(17, 83, 159, .82), rgba(3, 36, 101, .96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  z-index: 16000;
}
.win7-shell .dp-dock-leading,
.win7-shell .dp-dock-trailing { height: 100%; }
.win7-shell .dp-dock-items {
  gap: 5px;
  padding: 0 4px;
}
.win7-shell .dp-dock-item {
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 1px 4px rgba(0,22,70,.28);
  color: #fff;
  text-shadow: 0 1px 2px #001d46;
}
.win7-shell .dp-dock-item:hover {
  transform: none;
  background: linear-gradient(rgba(255,255,255,.38), rgba(100,175,255,.18));
}
.win7-shell .dp-dock-item.dp-dock-active {
  background: linear-gradient(rgba(255,255,255,.5), rgba(79,159,244,.26));
}
.win7-shell .dp-dock-item.dp-dock-active::after { display: none; }
.win7-shell .dp-dock-icon { width: 20px !important; height: 20px !important; font-size: 15px !important; flex: 0 0 auto; }
.win7-shell .dp-dock-label { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 12px; }

.win7-shell .dp-desktop-icon { width: 86px; color: #fff; text-shadow: 0 1px 2px #062752; }
.win7-shell .dp-desktop-icon-img {
  width: 54px; height: 48px; border: 1px solid rgba(255,255,255,.78); border-radius: 4px;
  box-shadow: inset 0 0 11px rgba(255,255,255,.42), 0 2px 5px rgba(0,20,62,.58);
  overflow: hidden;
}
.win7-shell .dp-desktop-icon-label { margin-top: 4px; color: #fff; font-size: 12px; line-height: 1.2; }
.win7-shell .dp-icon-selected .dp-desktop-icon-img { outline: 1px solid rgba(255,255,255,.9); outline-offset: 2px; }

.win7-icon { width: 100%; height: 100%; display: block; position: relative; }
.win7-icon.computer { background: linear-gradient(150deg, transparent 0 38%, rgba(255,255,255,.88) 39% 54%, transparent 55%), linear-gradient(#55a9ed, #0a3b73); }
.win7-icon.network { background: linear-gradient(#fff, #d6e6ff) center / 24px 16px no-repeat, linear-gradient(#8b99c3, #293d66); }
.win7-icon.monitor { background: linear-gradient(130deg, transparent 0 43%, #fff 44% 50%, transparent 51%) center / 26px 20px no-repeat, linear-gradient(50deg, transparent 0 43%, #fff 44% 50%, transparent 51%) center / 26px 20px no-repeat, linear-gradient(#ad7393, #4a2448); }
.win7-icon.docs { background: linear-gradient(#f7fbff, #bdd7fb); }
.win7-icon.docs::after { content: ""; position: absolute; left: 13px; right: 13px; top: 15px; height: 4px; background: #6b8fc3; box-shadow: 0 8px #6b8fc3, 0 16px #6b8fc3; }
.win7-icon.settings { background: radial-gradient(circle, #fff 0 20%, transparent 21%), conic-gradient(from 20deg, #7fd24d, #319be2, #f6d047, #db584f, #7fd24d); }

.win7-shell .dp-body { overflow: hidden; }

.win7-start-button {
  height: 34px; min-width: 80px; padding: 0 12px 0 8px; display: inline-flex; gap: 6px; align-items: center;
  border: 1px solid rgba(255,255,255,.72); border-radius: 5px;
  background: linear-gradient(#fff, #d7ebff 48%, #a9d6ff 49%, #74b6f2);
  color: #111; font: 700 13px "Segoe UI", sans-serif; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,35,88,.45), inset 0 1px rgba(255,255,255,.95);
}
.win7-start-button span { width: 18px; height: 18px; display: inline-block; border-radius: 4px; background: conic-gradient(#31a53a 0 25%, #f6c02f 0 50%, #2579da 0 75%, #db4437 0); }
.win7-start-button.active { filter: brightness(.96); box-shadow: inset 0 2px 6px rgba(0,0,0,.22); }
.win7-tray {
  --dp-tray-item-size: 28px;
  display: flex;
  width: 132px;
  height: 100%;
  flex: 0 0 132px;
  align-items: center;
  justify-content: flex-end;
}
.win7-tray .dp-system-tray-item {
  border: 1px solid transparent;
  color: #fff;
  text-shadow: 0 1px 2px #001d46;
}
.win7-tray .dp-system-tray-item:hover {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.16);
}
.win7-tray .dp-system-tray-icon { font-size: 13px; }
.win7-tray .dp-system-tray-badge { top: -1px; right: -1px; }
.win7-tray .dp-system-tray-item[data-id="clock"] {
  width: 72px;
  flex-basis: 72px;
  padding-inline: 3px;
}
.win7-clock { color: #fff; font-size: 12px; white-space: nowrap; text-shadow: 0 1px 2px #001d46; }


.win7-app { height: 100%; min-width: 0; min-height: 0; background: #fff; color: #111; }
.computer-app { display: grid; grid-template-columns: 222px minmax(0, 1fr); gap: 8px; padding: 8px; }
.win7-pane { min-width: 0; min-height: 0; border: 1px solid #9dbce7; background: #fff; overflow: hidden; }
.pane-title { height: 38px; padding: 8px; border-bottom: 1px solid #b8cef0; background: linear-gradient(#f9fcff, #e5f0ff); color: #073265; font-weight: 700; font-size: 18px; }
.win7-tree { padding: 18px 16px; font-size: 18px; line-height: 1.7; }
.win7-tree ul { margin: 0; padding-left: 24px; list-style: none; }
.win7-tree li { position: relative; white-space: nowrap; }
.win7-tree li::before { content: ""; position: absolute; left: -15px; top: 15px; width: 10px; border-top: 1px dotted #9aa9bd; }
.win7-tree .selected { color: #003d80; font-weight: 700; }
.center-pane { display: grid; grid-template-rows: 38px minmax(0, 1fr); }
.win7-tabs { display: flex; align-items: end; gap: 2px; padding: 0 16px; background: #dceafa; border-bottom: 1px solid #a7c3e8; }
.win7-tab { height: 34px; min-width: 86px; padding: 0 14px; border: 1px solid #98b8e4; border-bottom: 0; border-radius: 6px 6px 0 0; background: linear-gradient(#f8fbff, #dceaff); color: #002b61; font: 16px "Segoe UI", sans-serif; cursor: pointer; }
.win7-tab.active { background: #fff; font-weight: 800; height: 35px; margin-bottom: -1px; }
.tab-panel { display: none; min-height: 0; overflow: auto; padding: 16px; }
.tab-panel.active { display: block; }
.about-panel h2 { margin: 0 0 10px; color: #315c8e; font-size: 22px; }
.about-panel p { max-width: 620px; line-height: 1.65; }
.win7-grid { width: 100%; border-collapse: collapse; font-size: 18px; table-layout: fixed; }
.win7-grid th { height: 40px; border: 1px solid #c6cbd2; background: #eee; color: #7c7c7c; font-weight: 400; text-align: left; padding: 0 10px; }
.win7-grid td { height: 40px; border: 1px dotted #b8bec8; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win7-grid tbody tr:first-child td { background: #ffe58a; }
.win7-grid tbody tr:first-child td:first-child { outline: 2px solid #2f82d2; outline-offset: -2px; background: #eef7ff; }

.intro-app { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.window-intro { padding: 14px 16px 11px; border-bottom: 1px solid #d8e1ec; background: linear-gradient(#fff, #eef5fc); }
.window-intro h2 { margin: 0 0 4px; color: #315c8e; font-size: 20px; }
.window-intro p { margin: 0; color: #5c6f84; line-height: 1.45; }
.network-list { padding: 12px; overflow: auto; }
.status-online { color: #107c10; font-weight: 700; }
.status-standby { color: #9a6b00; font-weight: 700; }
.status-limited { color: #c0392b; font-weight: 700; }
.chart-wrap { padding: 18px; display: grid; gap: 16px; align-content: start; }
.chart { height: 220px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: end; padding: 14px; border: 1px solid #c7d8ef; background: linear-gradient(#fff, #f6fbff); }
.bar-group { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; height: 170px; }
.bar { border-radius: 3px 3px 0 0; min-height: 8px; box-shadow: inset 0 1px rgba(255,255,255,.5); }
.cpu { background: #2f80ed; }
.memory { background: #27ae60; }
.disk { background: #f2994a; }
.chart-label { text-align: center; color: #63758a; font-size: 12px; }
.legend { display: flex; gap: 18px; color: #4b5e75; }
.legend span::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.legend .cpu-l::before { background: #2f80ed; }
.legend .memory-l::before { background: #27ae60; }
.legend .disk-l::before { background: #f2994a; }

.settings-app { padding: 18px; overflow: auto; }
.settings-app h2 { margin: 0 0 14px; color: #315c8e; }
.setting-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; margin: 12px 0; }
.setting-row select, .setting-row input { height: 30px; border: 1px solid #9dbce7; padding: 0 8px; }

@media (max-width: 760px) {
  .computer-app { grid-template-columns: 1fr; }
  .west-pane { display: none; }
}