/* ===== Win98 theme ===== */
:root {
  --w98-face: #c0c0c0;
  --w98-face-dark: #808080;
  --w98-face-darker: #404040;
  --w98-face-light: #dfdfdf;
  --w98-face-lighter: #ffffff;
  --w98-desktop: #008080;
  --w98-title-from: #000080;
  --w98-title-to: #1084d0;
  --w98-title-inactive-from: #808080;
  --w98-title-inactive-to: #b5b5b5;
  --w98-text: #000000;
  --w98-highlight: #000080;
  --w98-highlight-text: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--w98-desktop);
  color: var(--w98-text);
  font-family: "Tahoma", "MS Sans Serif", Geneva, sans-serif;
  font-size: 13px;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.hidden { display: none !important; }

button, input, select, textarea { font-family: inherit; font-size: 13px; }

/* ---------- Bevel helpers ---------- */
.bevel-out {
  border: 2px solid;
  border-color: var(--w98-face-lighter) var(--w98-face-darker) var(--w98-face-darker) var(--w98-face-lighter);
  background: var(--w98-face);
}
.bevel-in {
  border: 2px solid;
  border-color: var(--w98-face-darker) var(--w98-face-lighter) var(--w98-face-lighter) var(--w98-face-darker);
}
.bevel-well {
  border: 2px solid;
  border-color: var(--w98-face-dark) var(--w98-face-light) var(--w98-face-light) var(--w98-face-dark);
  background: #ffffff;
}

.btn98 {
  background: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-face-lighter) var(--w98-face-darker) var(--w98-face-darker) var(--w98-face-lighter);
  padding: 5px 14px;
  color: var(--w98-text);
  cursor: pointer;
  min-height: 30px;
}
.btn98:active {
  border-color: var(--w98-face-darker) var(--w98-face-lighter) var(--w98-face-lighter) var(--w98-face-darker);
  padding: 6px 13px 4px 15px;
}
.btn98-primary { font-weight: bold; }
.btn98:disabled { color: var(--w98-face-dark); cursor: default; }

input[type=text], input[type=email], input[type=password], textarea, select {
  border: 2px solid;
  border-color: var(--w98-face-darker) var(--w98-face-lighter) var(--w98-face-lighter) var(--w98-face-darker);
  background: #fff;
  padding: 5px 6px;
  outline: none;
}

/* ---------- Desktop ---------- */
#desktop {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) 0 0 / 4px 4px,
    var(--w98-desktop);
  overflow: hidden;
}

.desktop-icons {
  position: absolute;
  top: 12px;
  left: 8px;
  right: 8px;
  bottom: 52px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  grid-auto-rows: 84px;
  gap: 4px;
  overflow-y: auto;
  align-content: start;
}

.desktop-icon {
  width: 76px;
  height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px dotted transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.desktop-icon:active,
.desktop-icon.selected {
  border-color: #fff;
  background: rgba(0,0,128,0.35);
}

.icon-glyph {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
}

.icon-label {
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
}

/* ---------- Taskbar ---------- */
#taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  z-index: 500;
  border-top: 2px solid var(--w98-face-lighter);
  background: var(--w98-face);
}

#start-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  padding: 5px 10px;
}
#start-btn .icon-glyph { width: auto; height: auto; font-size: 16px; filter: none; }

#taskbar-windows {
  flex: 1;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  height: 100%;
  align-items: center;
}

.taskbar-item {
  min-width: 110px;
  max-width: 160px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.taskbar-item.active {
  border-color: var(--w98-face-darker) var(--w98-face-lighter) var(--w98-face-lighter) var(--w98-face-darker);
}

#clock {
  padding: 4px 10px;
  font-size: 12px;
  min-width: 62px;
  text-align: center;
}

/* ---------- Start menu ---------- */
#start-menu {
  position: fixed;
  left: 3px;
  bottom: 45px;
  width: 220px;
  z-index: 900;
  padding: 3px;
  display: flex;
}

#start-menu .side-banner {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--w98-highlight);
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  padding: 10px 4px;
  letter-spacing: 1px;
}

#start-menu .menu-items {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.start-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
}
.start-menu-item:hover, .start-menu-item:active {
  background: var(--w98-highlight);
  color: var(--w98-highlight-text);
}
.start-menu-sep { height: 1px; background: var(--w98-face-dark); margin: 3px 4px; border-bottom: 1px solid var(--w98-face-lighter); }

.start-menu-item.has-submenu { position: relative; }
.start-menu-item .arrow { margin-left: auto; }

.submenu {
  position: fixed;
  width: 200px;
  padding: 3px;
  z-index: 950;
  max-height: 60vh;
  overflow-y: auto;
}

/* ---------- Context menu ---------- */
.context-menu {
  position: fixed;
  min-width: 160px;
  padding: 3px;
  z-index: 980;
}
.context-menu-item {
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.context-menu-item:hover, .context-menu-item:active {
  background: var(--w98-highlight);
  color: var(--w98-highlight-text);
}
.context-menu-item.danger:hover { background: #a00000; }

/* ---------- Windows ---------- */
#windows-layer {
  position: fixed;
  inset: 0;
  bottom: 42px;
  pointer-events: none;
}

.win98-window {
  position: absolute;
  top: 14px;
  left: 10px;
  right: 10px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.45);
  min-width: 220px;
  min-height: 160px;
}

.win-titlebar { cursor: move; touch-action: none; }
.win98-window.dialog .win-titlebar { cursor: default; }
.win98-window.dragging, .win98-window.resizing { user-select: none; opacity: 0.96; }

.win-resize-handle {
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 40%, var(--w98-face-dark) 40% 46%, transparent 46% 60%, var(--w98-face-dark) 60% 66%, transparent 66% 80%, var(--w98-face-dark) 80% 86%, transparent 86%);
}

.win98-window.dialog {
  top: auto; bottom: auto; left: 50%; right: auto;
  width: min(340px, 92vw);
  max-height: 88vh;
  transform: translateX(-50%);
  top: 50%;
  margin-top: calc(-1 * min(44vh, 260px));
}

.win-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 6px;
  background: linear-gradient(90deg, var(--w98-title-from), var(--w98-title-to));
  color: #fff;
  font-weight: bold;
  flex: none;
}
.win98-window.inactive .win-titlebar {
  background: linear-gradient(90deg, var(--w98-title-inactive-from), var(--w98-title-inactive-to));
}

.win-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
}

.win-controls { display: flex; gap: 2px; }
.win-control-btn {
  width: 20px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-face-lighter) var(--w98-face-darker) var(--w98-face-darker) var(--w98-face-lighter);
  color: #000;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}
.win-control-btn:active {
  border-color: var(--w98-face-darker) var(--w98-face-lighter) var(--w98-face-lighter) var(--w98-face-darker);
}

.win-menubar {
  display: flex;
  gap: 2px;
  padding: 2px 4px;
  background: var(--w98-face);
  flex: none;
  border-bottom: 1px solid var(--w98-face-dark);
}
.win-menu-label {
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
}
.win-menu-label:hover, .win-menu-label:active { background: var(--w98-highlight); color: #fff; }

.win-toolbar {
  display: flex;
  gap: 6px;
  padding: 4px 6px;
  background: var(--w98-face);
  flex: none;
  border-bottom: 1px solid var(--w98-face-dark);
}

.win-body {
  flex: 1;
  overflow-y: auto;
  background: var(--w98-face);
  padding: 8px;
  min-height: 0;
}

.win-body.sunken {
  margin: 6px;
  padding: 10px;
  background: #fff;
  border: 2px solid;
  border-color: var(--w98-face-dark) var(--w98-face-light) var(--w98-face-light) var(--w98-face-dark);
}

.win-statusbar {
  flex: none;
  display: flex;
  padding: 3px 6px;
  font-size: 11px;
  background: var(--w98-face);
  border-top: 1px solid var(--w98-face-lighter);
}
.win-statusbar span {
  border: 1px solid;
  border-color: var(--w98-face-dark) var(--w98-face-light) var(--w98-face-light) var(--w98-face-dark);
  padding: 2px 8px;
}

/* ---------- Explorer icon grid (items inside a category window) ---------- */
.explorer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 84px);
  grid-auto-rows: 96px;
  gap: 6px;
  align-content: start;
}

.explorer-icon {
  width: 84px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  cursor: pointer;
  border: 1px dotted transparent;
}
.explorer-icon:active { background: var(--w98-highlight); border-color: #000; }
.explorer-icon:active .explorer-icon-label { color: #fff; }

.explorer-thumb {
  width: 48px; height: 48px;
  object-fit: cover;
  border: 2px solid;
  border-color: var(--w98-face-dark) var(--w98-face-light) var(--w98-face-light) var(--w98-face-dark);
  background: #fff;
}
.explorer-thumb-placeholder {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-face-lighter) var(--w98-face-darker) var(--w98-face-darker) var(--w98-face-lighter);
}

.explorer-icon-label {
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
  max-height: 2.4em;
  overflow: hidden;
}

.empty-note { color: #444; padding: 20px 8px; text-align: center; }

/* ---------- Forms inside windows ---------- */
.win-form { display: flex; flex-direction: column; gap: 12px; }
.win-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.win-form .optional { font-weight: normal; color: #555; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form-actions .danger-btn { margin-right: auto; }

/* ---------- Photo picker ---------- */
.photo-picker-98 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.photo-thumb-box {
  width: 72px; height: 72px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: 26px;
}
.photo-thumb-box img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Category manager list ---------- */
.category-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--w98-face-dark);
}
.category-list-row .cat-icon { font-size: 18px; width: 24px; text-align: center; }
.category-list-row .cat-name { flex: 1; }
.category-list-row .btn98 { min-height: 24px; padding: 2px 8px; font-size: 12px; }

/* ---------- Login / register (Win98 dialog on desktop) ---------- */
.auth-desktop {
  position: fixed;
  inset: 0;
  background: var(--w98-desktop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.auth-window {
  position: static;
  inset: auto;
  top: auto; left: auto; right: auto; bottom: auto;
  transform: none;
  width: min(320px, 100%);
  box-shadow: 3px 3px 8px rgba(0,0,0,0.45);
}
.auth-window .win-body { padding: 16px 14px; }
.auth-window .app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 14px;
}
.alert98 {
  background: #fff;
  border: 2px solid;
  border-color: var(--w98-face-dark) var(--w98-face-light) var(--w98-face-light) var(--w98-face-dark);
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.switch-link { margin-top: 14px; font-size: 12px; text-align: center; }
.switch-link a { color: var(--w98-highlight); }

/* ---------- Message box (alert dialog) ---------- */
.win98-window.msgbox { width: min(300px, 92vw); }
.msgbox-body { display: flex; gap: 12px; align-items: flex-start; }
.msgbox-icon { font-size: 28px; }