/* NikitaOS 95 — classic shell look, hand-rolled bevels */

@font-face {
  font-family: 'MS Sans Serif';
  src: url('ms_sans_serif.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'MS Sans Serif';
  src: url('ms_sans_serif_bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --silver: #c0c0c0;
  --white-lt: #dfdfdf;
  --white: #fff;
  --grey: #808080;
  --dknavy: #000080;
  --navy2: #1084d0;
  --teal: #008080;
  --navtext: #000088;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  background: var(--teal);
  overflow: hidden;
  user-select: none;
  cursor: default;
}

a { color: #0000ee; }

/* ---------- bevel primitives ---------- */
.out  { border: 1px solid; border-color: var(--white-lt) var(--grey) var(--grey) var(--white-lt);
        box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 #000; background: var(--silver); }
.in   { border: 1px solid; border-color: var(--grey) var(--white-lt) var(--white-lt) var(--grey);
        box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 var(--white); background: var(--white); }
.press { border-color: var(--grey) var(--white-lt) var(--white-lt) var(--grey) !important;
         box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 var(--white) !important; }

/* ---------- windows ---------- */
.win {
  position: absolute;
  background: var(--silver);
  border: 1px solid; border-color: var(--white-lt) var(--grey) var(--grey) var(--white-lt);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 #000, 1px 1px 0 rgba(0,0,0,.35);
  min-width: 260px;
  display: flex; flex-direction: column;
}
.win.minimized { display: none; }
.tbar {
  display: flex; align-items: center; gap: 4px;
  background: linear-gradient(90deg, var(--dknavy), var(--navy2));
  color: var(--white); font-weight: 700; font-size: 11px;
  padding: 3px 3px 3px 5px; cursor: move; flex: none;
}
.tbar .t-ico { flex: none; display: block; width: 24px; height: 24px; image-rendering: pixelated; }
.tbar .t-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbtns { display: flex; gap: 2px; }
.tbtn {
  width: 18px; height: 16px;
  font-family: 'MS Sans Serif', sans-serif; font-size: 10px; font-weight: 700; line-height: 1;
  display: grid; place-items: center; padding: 0;
  color: #000; cursor: pointer;
  border: 1px solid; border-color: var(--white-lt) var(--grey) var(--grey) var(--white-lt);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 #000;
  background: var(--silver);
}
.tbtn:active { border-color: var(--grey) var(--white-lt) var(--white-lt) var(--grey);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 var(--white); }
.menubar {
  display: flex; gap: 2px; padding: 2px 4px; flex: none;
  border-bottom: 1px solid var(--grey);
  box-shadow: 0 1px 0 var(--white);
}
.menubar button {
  font: inherit; color: #000; background: none; border: 1px solid transparent;
  padding: 2px 7px; cursor: pointer;
}
.menubar button:hover, .menubar button.open { background: var(--dknavy); color: var(--white); }
.wbody { padding: 10px; overflow: auto; }

/* dropdown menus */
.dropdown {
  position: fixed; z-index: 9000; min-width: 150px;
  background: var(--silver);
  border: 1px solid; border-color: var(--white-lt) var(--grey) var(--grey) var(--white-lt);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 #000, 2px 2px 0 rgba(0,0,0,.35);
  padding: 2px;
}
.dropdown button {
  display: flex; width: 100%; gap: 16px; justify-content: space-between;
  font: inherit; background: none; border: 0; padding: 4px 18px 4px 22px; cursor: pointer; color: #000;
}
.dropdown button:hover { background: var(--dknavy); color: var(--white); }
.dropdown .sep { height: 0; border-top: 1px solid var(--grey); border-bottom: 1px solid var(--white); margin: 2px 1px; }

/* ---------- desktop icons ---------- */
.desktop { position: absolute; inset: 0 0 34px 0; }
.dicon {
  position: absolute; width: 76px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; color: var(--white); cursor: pointer;
}
.dicon .pix { width: 48px; height: 48px; }
.dicon span.lbl { color: var(--white); padding: 1px 3px; line-height: 1.2; }
.dicon.selected .lbl { background: var(--dknavy); }
.dicon.selected .pix { filter: drop-shadow(0 0 0 var(--dknavy)); }
.pix { display: block; position: relative; width: 24px; height: 24px; }
.pix::before { content: ''; position: absolute; left: 0; top: 0; width: var(--s, 2px); height: var(--s, 2px); box-shadow: var(--sh, none); }

/* ---------- generic content ---------- */
.win.doc .wbody { background: var(--white); }
.win.doc h3 { font-size: 12px; margin-bottom: 8px; }
.win.doc ul { margin-left: 18px; }
.win.doc li { margin-bottom: 5px; line-height: 1.35; }
.props { display: flex; gap: 12px; }
.props .pix { width: 48px; height: 48px; }
.props table { border-collapse: collapse; }
.props td { padding: 2px 6px; line-height: 1.35; }
.props td:first-child { font-weight: 700; white-space: nowrap; }
.status-line { margin-top: 8px; }
.hero-text { font-size: 13px; line-height: 1.5; font-weight: 700; margin-bottom: 8px; }

/* folder details list */
.dlist { background: var(--white); border: 1px solid; border-color: var(--grey) var(--white-lt) var(--white-lt) var(--grey);
  box-shadow: inset 1px 1px 0 #000; padding: 2px; }
.dlist .lhead, .dlist .lrow {
  display: grid; grid-template-columns: 26px 1fr 130px 110px; gap: 8px; align-items: center;
  padding: 2px 4px;
}
.dlist .lhead { font-weight: 700; border-bottom: 1px solid var(--silver); padding-bottom: 3px; }
.dlist .lrow { cursor: pointer; }
.dlist .lrow:hover { background: #e8e8f8; }
.dlist .lrow.sel { background: var(--dknavy); color: var(--white); }
.dlist .lrow .sub { color: #555; }
.dlist .lrow.sel .sub { color: #cfcfff; }
.dlist .pix { width: 20px; height: 20px; }

/* skills */
fieldset { border: 1px solid var(--grey); box-shadow: 1px 1px 0 var(--white); padding: 8px; margin-bottom: 8px; }
legend { font-weight: 700; padding: 0 4px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 3px; }
.chip { border: 1px solid var(--grey); background: var(--white); padding: 1px 5px; margin: 1px 0; }

/* help */
.hlp details { margin-bottom: 4px; }
.hlp summary { cursor: pointer; padding: 3px 2px; }
.hlp summary:hover { background: #e8e8f8; }
.hlp details[open] summary { background: var(--dknavy); color: var(--white); }
.hlp p { padding: 6px 4px 8px 22px; line-height: 1.4; background: var(--white); border: 1px solid var(--grey); }

/* contact */
.mail td { padding: 3px 6px; }
.mail td:first-child { font-weight: 700; width: 60px; }
.mailbody { margin-top: 8px; padding: 10px; background: var(--white); border: 1px solid;
  border-color: var(--grey) var(--white-lt) var(--white-lt) var(--grey); line-height: 1.5; }

/* ---------- taskbar ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 34px; z-index: 8000;
  display: flex; align-items: stretch; gap: 4px; padding: 3px 3px;
  background: var(--silver);
  border-top: 1px solid var(--white-lt);
  box-shadow: 0 -1px 0 var(--grey);
}
.start {
  display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px;
  padding: 0 8px; cursor: pointer; border: 1px solid;
  border-color: var(--white-lt) var(--grey) var(--grey) var(--white-lt);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 #000;
  background: var(--silver);
}
.start .pix { width: 20px; height: 20px; }
.start.open, .taskapp.open { border-color: var(--grey) var(--white-lt) var(--white-lt) var(--grey);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 var(--white); }
.taskbar .divider { width: 1px; background: var(--grey); border-right: 1px solid var(--white); margin: 1px 2px; }
.tray { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 8px;
  border: 1px solid; border-color: var(--grey) var(--white-lt) var(--white-lt) var(--grey);
  box-shadow: inset 1px 1px 0 #000;
}
.tray .flag { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--dknavy); }
.tray .clock { min-width: 52px; text-align: center; }
.taskapp {
  display: flex; align-items: center; gap: 5px; min-width: 140px; max-width: 170px;
  padding: 0 8px; cursor: pointer; overflow: hidden; white-space: nowrap;
  border: 1px solid; border-color: var(--white-lt) var(--grey) var(--grey) var(--white-lt);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 #000; background: var(--silver);
}
.taskapp .pix { width: 18px; height: 18px; }
.taskapp.open { font-weight: 700; background: repeating-conic-gradient(var(--silver) 0 25%, #d8d8d8 0 50%) 0 0/4px 4px; }

/* boot / shutdown */
#shutdown-screen { position: fixed; inset: 0; z-index: 9999; background: #000; color: #ffa500;
  display: none; place-items: center; font-size: 20px; font-weight: 700; text-align: center;
  cursor: pointer; font-family: 'MS Sans Serif', Tahoma, sans-serif; }

/* small screens: stack windows instead of free drag */
@media (max-width: 700px) {
  body { overflow: auto; }
  .desktop { position: static; padding: 8px; display: flex; flex-direction: column; gap: 10px; }
  .win { position: static !important; width: 100% !important; }
  .dicon { position: static; flex-direction: row; width: 100%; justify-content: flex-start; }
  .tbar { cursor: default; }
  .taskbar { position: sticky; }
}