/* Windows 95/98/ME стиль — базовый UI + 16-bit look (градиенты, дизеринг, диалоги) */
:root {
  --bg-teal: #008080;
  --face: #C0C0C0;
  --light: #FFFFFF;
  --hilight: #B5B5B5;
  --shadow: #808080;
  --dark: #404040;
  --frame: #000000;
  --active-title: #000080;
  --active-title-2: #1A31A2;
  --inactive-title: #808080;
  --inactive-title-2: #BEBEBE;

  --text: #000;
  --taskbar-h: 36px;
  --font: "MS Sans Serif", Tahoma, Arial, sans-serif;

  /* Desktop theme */
  --desktop-bg-grad: linear-gradient(#008080, #008080);

  /* Icon grid slot (меняется в Properties, влияет на ширину ярлыков) */
  --icon-slot: 76px;
}

* {
  box-sizing: border-box
}

/* Fix resizing/dragging over iframes */
.is-resizing iframe {
  pointer-events: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0
}

body {
  font-family: var(--font);
  font-size: 12px;
  background: var(--bg-teal);
  color: var(--text);
  overflow: hidden
}

/* Desktop */
.desktop {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--bg-teal);
  background-image: var(--desktop-bg-grad);
  user-select: none;
}

.desktop.dither-16::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0 1px, rgba(255, 255, 255, .06) 1px 2px);
  mix-blend-mode: multiply;
  opacity: .35;
}

/* Icons area */
.icons {
  position: absolute;
  left: 8px;
  top: 8px;
  right: 8px;
  bottom: calc(var(--taskbar-h) + 8px);
}

/* Desktop icon */
.icon {
  position: absolute;
  width: var(--icon-slot);
  text-align: center;
  cursor: default;
  outline: none;
  user-select: none;
}

.icon:focus .icon-label,
.icon.selected .icon-label {
  background: #000080;
  color: #fff;
  outline: 1px dotted #fff
}

/* Иконка 32×32: если в стиле есть --icon-img:url('...'), используем её, иначе показываем «пустой» бедж */
.icon-image {
  width: 32px;
  height: 32px;
  margin: 0 auto 4px auto;
  /* двухслойный фон: 1) картинка (масштаб 32×32, contain), 2) стандартный градиент подложки */
  background-image: var(--icon-img, none), linear-gradient(#e8e8e8, #bdbdbd);
  background-size: contain, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
  image-rendering: pixelated;
  /* если картинка маленькая — «ретро»-скейл */
}

.icon.dragging .icon-image {
  opacity: .8;
}

.icon-label {
  display: inline-block;
  padding: 1px 2px;
}

.icon.ghost {
  opacity: .5;
}

/* Selection rectangle */
.marquee {
  position: absolute;
  border: 1px dashed #0000aa;
  background: rgba(0, 128, 255, .15);
  pointer-events: none;
  z-index: 9995;
  display: none;
}

/* Window */
.window {
  position: absolute;
  left: 120px;
  top: 80px;
  width: 480px;
  height: 320px;
  background: var(--face);
  color: var(--text);
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--dark), 4px 4px 0 rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
}

.titlebar {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  background-image:
    linear-gradient(#1a31a2, #1a31a2),
    linear-gradient(#000080, #000080);
  background-size: 100% 50%, 100% 50%;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  color: #fff;
  user-select: none;
  cursor: grab;
  border-bottom: 1px solid var(--dark);
  text-shadow: 1px 1px 0 #000;
}

.titlebar.inactive {
  background-image:
    linear-gradient(var(--inactive-title-2), var(--inactive-title-2)),
    linear-gradient(var(--inactive-title), var(--inactive-title));
  color: #eaeaea;
  text-shadow: none;
}

.title {
  flex: 1;
  font-weight: bold;
}

.controls {
  display: flex;
  gap: 4px
}

.btn-win {
  width: 18px;
  height: 18px;
  background: var(--face);
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.btn-win:active {
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--light);
}

.content {
  flex: 1;
  background: #fff;
  border-top: 1px solid var(--light);
  padding: 0;
  overflow: hidden;
}

.content>.inner {
  padding: 8px;
  overflow: auto;
  height: 100%;
}

/* iframe for module content */
.window .content iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: white;
}

/* Dialog (modal properties) with auto-size */
.dialog {
  width: auto;
  height: auto;
  min-width: 480px;
}

.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .15);
  z-index: 10000;
}

.window.modal {
  z-index: 10001;
}

.window.dialog .content {
  background: var(--face);
  overflow: visible;
}

.prop-body {
  background: #fff;
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
  padding: 10px;
  min-height: 0;
}

.tabs {
  display: flex;
  gap: 2px;
  margin: 2px 2px 6px 2px;
}

.tab-btn {
  padding: 3px 10px;
  background: var(--face);
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
  cursor: pointer;
  user-select: none;
}

.tab-btn.active {
  background: #fff;
  box-shadow: none;
  border-bottom: 1px solid #fff;
}

.tab-page {
  display: none;
}

.tab-page.active {
  display: block;
}

.prop-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 10px;
  align-items: center;
}

.prop-grid input[type="text"],
.prop-grid select {
  width: 100%;
}

.prop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.btn {
  padding: 4px 10px;
  cursor: pointer;
}

.btn-3d {
  background: var(--face);
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
}

.btn-3d:active {
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--light);
}

/* Grid preview in Properties */
.grid-preview {
  margin-top: 6px;
  background: var(--face);
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
  padding: 10px;
  width: 240px;
  height: 120px;
  position: relative;
}

.grid-preview::after {
  /* лёгкая сеточка-превью */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, .08) 1px, transparent 1px);
  background-size: var(--icon-slot) var(--icon-slot);
  opacity: .7;
}

/* Внутри превью используем «псевдоярлык», который не absolute */
.grid-preview .icon {
  position: relative;
  left: 0;
  top: 0;
  display: inline-block;
}

.grid-preview .icon-image {
  margin-top: 6px;
}

/* Taskbar */
.taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--taskbar-h);
  background: var(--face);
  border-top: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--dark);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  z-index: 100000;
}

.start-button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: var(--face);
  color: #000;
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
  cursor: pointer;
}

.start-button:active {
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--light);
}

.win-logo {
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.win-logo::before,
.win-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #F00 50%, #0F0 50%),
    linear-gradient(90deg, #00F 50%, #FF0 50%);
  background-size: 100% 50%;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  opacity: .9;
}

.task-list {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow: hidden
}

.task-entry {
  max-width: 220px;
  padding: 4px 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  background: var(--face);
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
}

.task-entry.minimized {
  opacity: .7
}

.tray {
  min-width: 100px;
  text-align: right
}

.clock {
  padding: 4px 8px;
  background: var(--face);
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
}

/* Start menu */
.start-menu {
  position: absolute;
  left: 6px;
  bottom: calc(var(--taskbar-h) + 4px);
  width: 280px;
  min-height: 260px;
  display: flex;
  background: var(--face);
  color: #000;
  border: 1px solid var(--frame);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25), inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--dark);
  z-index: 100001;
}

.start-menu.hidden {
  display: none
}

.start-brand {
  width: 34px;
  background: linear-gradient(#1a31a2, var(--active-title));
  color: #fff;
  padding: 8px 2px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
}

.start-brand .user {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.start-brand .user-avatar {
  width: 24px;
  height: 24px;
  margin-bottom: auto;
}

.start-brand .user-name {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin-top: auto;
}

.start-body {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.start-header {
  font-weight: bold;
  margin-bottom: 4px
}

.start-programs {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow: auto
}

.start-item {
  padding: 4px 6px;
  border: 1px solid transparent;
  cursor: pointer
}

.start-item:hover {
  background: #000080;
  color: #fff
}

.start-divider {
  height: 1px;
  background: var(--shadow)
}

/* Context menu */
.context-menu {
  position: fixed;
  z-index: 99990;
  min-width: 100px;
  background: var(--face);
  border: 1px solid var(--frame);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25), inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--dark);
}

.context-menu.hidden {
  display: none
}

.context-menu .cm-list {
  list-style: none;
  margin: 0;
  padding: 2px 0
}

.context-menu .cm-item {
  padding: 2px 10px;
  cursor: pointer;
}

.context-menu .cm-item:hover {
  background: #000080;
  color: #fff
}

.context-menu .cm-sep {
  height: 1px;
  background: var(--shadow);
  margin: 2px 4px;
}

.context-menu .cm-item.disabled {
  color: #777;
  background: none;
  cursor: default
}

/* Utility */
.hidden {
  display: none
}

.window-content { flex: 1; display: flex; flex-direction: column; }

/* System UI Elements for Dialogs */
.sys-btn {
  height: 22px;
  min-width: 75px;
  padding: 0 10px;
  background: var(--face);
  color: #000;
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
}
.sys-btn:active {
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--light);
}

.sys-input {
  border: 1px solid var(--frame);
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--light);
  padding: 2px 4px;
  background: #fff;
  font-family: var(--font);
  font-size: 11px;
}