:root{
  --bg: #0e0e10;
  --panel: #1a1a1d;
  --line: #2c2c30;
  --ink: #f0f0f0;
  --ink-dim: #8a8a8f;
  --mint: #4ce8b8;
  --pink: #ff4fa3;
  --alert: #ffcf4d;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px),
    var(--bg);
  color: var(--ink);
  font-family:"Space Mono", monospace;
  font-size:14px;
  overflow-x:hidden;
}

.mono{ font-family:"Space Mono", monospace; }
.small{ font-size:12px; }
.dim{ color: var(--ink-dim); }
ul.plain{ list-style:none; padding:0; margin:8px 0 0; }
ul.plain li{ padding:3px 0; font-size:13px; }

/* ---- top system bar ---- */
.topbar{
  background:#050506;
  border-bottom:1px solid var(--line);
  padding:6px 14px;
  display:flex;
  justify-content:space-between;
  font-family:"Silkscreen", monospace;
  font-size:11px;
  letter-spacing:.05em;
  color: var(--mint);
  position: sticky;
  top:0;
  z-index: 500;
}
.topbar .clock{ color: var(--ink-dim); font-family:"Space Mono",monospace; }

/* ---- desktop area ---- */
.desktop{
  position:relative;
  min-height: calc(100vh - 34px);
  padding: 20px;
}

/* ---- desktop icons ---- */
.icons{
  display:flex;
  flex-direction:column;
  gap: 14px;
  position:absolute;
  right: 20px;
  top: 70px;
  z-index: 10;
}
.icon{
  background:none;
  border:1px solid transparent;
  color: var(--ink);
  font-family:"Silkscreen", monospace;
  font-size:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
  width: 74px;
  padding: 8px 4px;
}
.icon:hover, .icon:focus{
  border-color: var(--line);
  background: rgba(255,255,255,0.03);
}
.icon .glyph{ font-size:22px; }
.icon .icon-label{ text-align:center; letter-spacing:.02em; line-height:1.3; }

/* ---- windows ---- */
.window{
  position:absolute;
  left: var(--x, 20px);
  top: var(--y, 70px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.35);
  z-index: 20;
}
.window.hidden{ display:none; }
.window.front{ z-index: 100; }

.titlebar{
  background:#050506;
  border-bottom:1px solid var(--line);
  padding:6px 8px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor: grab;
  font-family:"Silkscreen", monospace;
  font-size:10px;
  letter-spacing:.05em;
}
.titlebar:active{ cursor: grabbing; }
.titlebar.accent-mint{ border-bottom-color: var(--mint); }
.titlebar.accent-pink{ border-bottom-color: var(--pink); }
.titlebar.accent-alert{ border-bottom-color: var(--alert); }

.dots{ display:flex; gap:5px; }
.dots i{
  width:7px; height:7px;
  background: var(--line);
  display:block;
  border-radius:50%;
}
.wtitle{ flex:1; color: var(--ink-dim); }
.close{
  background:none;
  border:1px solid var(--line);
  color: var(--ink-dim);
  width:18px; height:18px;
  line-height:1;
  cursor:pointer;
  font-family:"Space Mono",monospace;
}
.close:hover{ color: var(--pink); border-color: var(--pink); }

.wbody{
  padding: 14px 16px;
}
.wbody p{ margin: 0 0 10px; font-size:13.5px; line-height:1.55; }
.wbody p:last-child{ margin-bottom:0; }

.row{
  display:flex;
  justify-content:space-between;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line);
}
.row:last-child{ border-bottom:none; }
.row .ok{ color: var(--mint); }

/* ---- tabs ---- */
.tabs{
  display:flex;
  gap:2px;
  margin-bottom:10px;
  border-bottom:1px solid var(--line);
}
.tab{
  background:none;
  border:none;
  color: var(--ink-dim);
  font-family:"Silkscreen",monospace;
  font-size:9px;
  padding:6px 8px;
  cursor:pointer;
  letter-spacing:.05em;
}
.tab.active{ color: var(--ink); border-bottom:2px solid var(--pink); }
.tabpanel.hidden{ display:none; }

/* ---- companion ---- */
.companion{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 300;
  display:flex;
  align-items:flex-end;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.companion-sprite{
  width:46px; height:46px;
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  box-shadow: 0 0 12px rgba(255,79,163,0.25);
}
.companion-msg{
  background: var(--panel);
  border:1px solid var(--line);
  padding:6px 10px;
  font-size:11px;
  max-width:150px;
}

/* ---- fake error easter egg ---- */
.fake-error{
  position:fixed;
  left:50%; top:40%;
  transform: translate(-50%,-50%);
  width: 260px;
  background: var(--panel);
  border:1px solid var(--alert);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
  z-index: 400;
}
.fake-error.hidden{ display:none; }

/* ---- mobile: stack, no drag ---- */
@media (max-width: 720px){
  .icons{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom: 16px;
  }
  .desktop{ padding: 16px; }
  .window{
    position:static !important;
    width:100% !important;
    margin-bottom: 16px;
  }
  .titlebar{ cursor:default; }
}