/* Dark Platinum -- Mac OS 9 chrome, night palette.
   Written CSS1-first so Classilla / iCab / IE5 Mac get a usable page:
   every rule states a flat fallback BEFORE any var()/gradient, and layout
   uses absolute positioning + tables rather than flex. */

body {
  margin: 0;
  color: #d8d8e0;
  background: #14141a;
  font-family: Charcoal, Geneva, Verdana, sans-serif;
  font-size: 12px;
}

a { color: #7fd67f; }

/* ---------- menu bar ---------- */
#menubar {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 22px;
  background: #23232c;
  border-bottom: 1px solid #0e0e12;
  z-index: 9000;
}
#menubar table { border-collapse: collapse; width: 100%; height: 22px; }
#menubar td { padding: 0; white-space: nowrap; font-size: 12px; }

.menu-title { padding: 0 9px; cursor: default; }
.menu-title.open, .menu-title.hot { background: #3a3a46; }
.apple { color: #7fd67f; font-weight: bold; }
#clock { color: #8a8a98; padding: 0 8px; text-align: right; }

.menu-drop {
  position: absolute;
  top: 22px;
  width: 172px;
  background: #2a2a34;
  border: 1px solid #0e0e12;
  display: none;
  z-index: 9001;
}
.menu-drop.open { display: block; }
.menu-drop ul { margin: 0; padding: 3px 0; list-style: none; }
.menu-drop li { padding: 3px 16px; cursor: default; }
.menu-drop li.hot { background: #7fd67f; color: #10140f; }
.menu-drop li.sep {
  padding: 0; margin: 3px 0; height: 1px;
  background: #0e0e12; font-size: 1px; line-height: 1px;
}

/* ---------- desktop ---------- */
#desktop {
  position: absolute;
  top: 22px; left: 0;
  width: 100%;
}

.desk-icon { position: absolute; width: 78px; text-align: center; cursor: default; }
.desk-icon .glyph { font-size: 26px; }
.desk-icon .label { background: #1c1c26; padding: 0 3px; }
.desk-icon.selected .label { background: #7fd67f; color: #10140f; }

/* ---------- windows ---------- */
.win {
  position: absolute;
  width: 320px;
  background: #2a2a34;
  border: 1px solid #0e0e12;
}
.win-title {
  height: 20px;
  background: #33333f;
  border-bottom: 1px solid #0e0e12;
  cursor: move;
}
.win-title table { border-collapse: collapse; width: 100%; }
.win-title td { padding: 0 5px; font-size: 12px; }
.win-title td.name { text-align: center; width: 100%; }
.win.inactive .win-title { background: #2a2a34; color: #8a8a98; }
.win.inactive .tbtn { visibility: hidden; }

.tbtn {
  display: block;
  width: 11px; height: 11px;
  background: #3a3a46;
  border: 1px solid #0e0e12;
  cursor: default;
  font-size: 1px; line-height: 1px;
}
.win-body {
  background: #17171d;
  border: 1px solid #0e0e12;
  margin: 3px;
  padding: 12px 14px;
  overflow: auto;
}
.win.collapsed .win-body, .win.collapsed .resize { display: none; }

.resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 14px; height: 14px;
  background: #3a3a46;
  border-top: 1px solid #0e0e12;
  border-left: 1px solid #0e0e12;
  cursor: nwse-resize;
  font-size: 1px; line-height: 1px;
}

/* ---------- hello app ---------- */
.hello h1 { margin: 0 0 8px 0; font-size: 18px; }
.hello p { margin: 0 0 8px 0; }
.hello .sys { color: #8a8a98; }

.btn {
  padding: 2px 12px;
  color: #d8d8e0;
  background: #3a3a46;
  border: 1px solid #0e0e12;
  font-family: Charcoal, Geneva, Verdana, sans-serif;
  font-size: 12px;
  cursor: default;
}

/* ---------- modern-browser polish (old browsers skip these) ---------- */
@media screen and (min-width: 0px) {
  body {
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(120% 100% at 50% 0%, #1c1c26, #14141a 70%);
    -webkit-font-smoothing: none;
  }
  #menubar {
    position: fixed;
    background: linear-gradient(#23232c, #1b1b23);
    box-shadow: 0 1px 0 #4a4a58 inset;
  }
  #desktop { position: fixed; bottom: 0; right: 0; }
  .menu-drop { position: fixed; box-shadow: 2px 2px 0 rgba(0,0,0,.55); }
  .win {
    box-shadow: 0 0 0 1px #4a4a58 inset, 3px 3px 0 rgba(0,0,0,.55);
  }
  .win-title {
    background: repeating-linear-gradient(#33333f, #33333f 1px, #2a2a34 1px, #2a2a34 2px);
  }
  .tbtn {
    background: linear-gradient(#3a3a46, #17171d);
    box-shadow: 0 0 0 1px #4a4a58 inset;
  }
  .tbtn:active { background: #7fd67f; }
  .btn {
    background: linear-gradient(#3a3a46, #2a2a34);
    box-shadow: 0 0 0 1px #4a4a58 inset;
    border-radius: 8px;
    padding: 3px 14px;
  }
  .desk-icon .label { background: rgba(0,0,0,.35); }
  .resize {
    background:
      linear-gradient(135deg, transparent 45%, #4a4a58 45%, #4a4a58 55%, transparent 55%),
      linear-gradient(135deg, transparent 65%, #4a4a58 65%, #4a4a58 75%, transparent 75%);
    border: 0;
  }
}

@media screen and (max-width: 520px) {
  .win { width: auto; left: 8px; right: 8px; }
  .menu-title { padding: 0 6px; }
}