:root {
  --green: #39ff6a;
  --green-dim: #1a7a35;
  --cyan: #00e5ff;
  --yellow: #ffd600;
  --red: #ff5f57;
  --purple: #c084fc;
  --white: #e8e8e8;
  --muted: #555;
  --glow: 0 0 8px #39ff6a55;
}

/*
  FIX 1 — WHITE RECTANGLE FLASH:
  The flash is the browser's default tap highlight rendered as a white rectangle.
  Setting -webkit-tap-highlight-color: transparent on the universal selector
  kills it on every element including the window buttons and titlebar.
*/
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

html, body {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  overscroll-behavior: none;
  background: #030806;
}

/* ═══════════ BOOT ═══════════ */
#sys-boot {
  position: fixed; inset: 0; background: #030806; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--green); font-size: 14px; transition: opacity 0.6s ease-out;
}
.boot-text { font-weight: 600; letter-spacing: 2px; text-shadow: var(--glow); }
#boot-bar-container { width: 240px; height: 2px; background: rgba(57,255,106,0.15); margin-top: 18px; border-radius: 2px; overflow: hidden; }
#boot-bar-fill { height: 100%; width: 0%; background: var(--green); box-shadow: 0 0 10px var(--green); transition: width 0.2s ease-out; }
.boot-status { margin-top: 12px; font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 0.1em; }

/* ═══════════ BACKGROUND ═══════════ */
#bg { position: fixed; inset: 0; background: #030806; z-index: 0; }
#bg-canvas { position: absolute; inset: 0; }
#bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(57,255,106,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,106,0.03) 1px, transparent 1px);
  background-size: 44px 44px;
}
#vignette { position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(3,8,6,0.85) 100%); z-index: 1; pointer-events: none; }
#scanlines { position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px); z-index: 2; pointer-events: none; }

/* ═══════════ LAUNCHER ═══════════ */
#launcher { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 5; }
#launcher.visible { display: flex; }
.launcher-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; animation: launchIn 0.4s cubic-bezier(.34,1.56,.64,1); }
@keyframes launchIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
.launcher-icon {
  width: 88px; height: 88px; background: rgba(57,255,106,0.07);
  border: 1px solid rgba(57,255,106,0.3); border-radius: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
  cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 0 24px rgba(57,255,106,0.12), inset 0 0 20px rgba(57,255,106,0.04);
  outline: none; user-select: none;
}
.launcher-icon:hover { background: rgba(57,255,106,0.14); box-shadow: 0 0 40px rgba(57,255,106,0.25); transform: scale(1.06); }
.launcher-icon:active { transform: scale(0.96); }
.launcher-label { font-size: 13px; color: rgba(57,255,106,0.7); letter-spacing: 0.12em; text-shadow: 0 0 10px rgba(57,255,106,0.4); }
.launcher-hint { font-size: 10px; color: #333; letter-spacing: 0.06em; }

/* ═══════════ FLOATING WINDOW ═══════════ */
#window {
  position: fixed; width: 860px; height: 580px; min-width: 420px; min-height: 300px;
  background: rgba(8,10,9,0.97); border: 1px solid #1c281c; border-radius: 11px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.9), 0 0 0 0.5px rgba(57,255,106,0.12), 0 0 60px rgba(57,255,106,0.06);
  display: flex; flex-direction: column; overflow: hidden; z-index: 10;
}
#window.anim-open    { animation: winOpen    0.24s cubic-bezier(.34,1.3,.64,1) forwards; }
#window.anim-close   { animation: winClose   0.20s ease-in forwards; }
#window.anim-minimize{ animation: winMin     0.20s ease-in forwards; }
#window.anim-restore { animation: winRestore 0.22s cubic-bezier(.34,1.3,.64,1) forwards; }
@keyframes winOpen    { from{opacity:0;transform:scale(0.92) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes winClose   { from{opacity:1;transform:scale(1)}                    to{opacity:0;transform:scale(0.94) translateY(6px)} }
@keyframes winMin     { from{opacity:1;transform:scale(1) translateY(0)}      to{opacity:0;transform:scale(0.88) translateY(30px)} }
@keyframes winRestore { from{opacity:0;transform:scale(0.88) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
#window.gone { display: none !important; }
#window.maximized { border-radius:0!important; border:none!important; box-shadow:none!important; }
#window.maximized #resize-grip { display: none; }
#resize-grip { position:absolute; bottom:0; right:0; width:18px; height:18px; cursor:se-resize; z-index:20; }
#resize-grip::after { content:''; position:absolute; bottom:3px; right:3px; width:9px; height:9px; border-right:2px solid #252525; border-bottom:2px solid #252525; }

/* ── TITLE BAR ── */
#titlebar {
  display:flex; align-items:center; padding:0 14px; height:40px;
  background:#0e0e0e; border-bottom:1px solid #181818; flex-shrink:0;
  cursor:grab; gap:10px; user-select:none; touch-action:none;
}
#titlebar.dragging { cursor:grabbing; }

.win-btns { display:flex; gap:2px; flex-shrink:0; z-index:50; margin-left:-6px; }

.wbtn-wrap {
  padding: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  outline: none;
  background: transparent;
  border: none;
  -webkit-user-select: none; user-select: none;
}
.wbtn-wrap:focus        { outline: none; box-shadow: none; }
.wbtn-wrap:focus-visible{ outline: none; box-shadow: none; }

.wbtn {
  width:13px; height:13px; border-radius:50%; border:none;
  position:relative; display:flex; align-items:center; justify-content:center;
  transition:filter 0.15s, transform 0.15s; pointer-events:none;
}
.wbtn-wrap:active .wbtn { transform:scale(0.82); filter:brightness(0.8); }
.wbtn.close    { background:#ff5f57; box-shadow:0 0 8px #ff5f57bb, 0 0 22px #ff5f5755; }
.wbtn.minimize { background:#febc2e; box-shadow:0 0 8px #febc2ebb, 0 0 22px #febc2e55; }
.wbtn.maximize { background:#28c840; box-shadow:0 0 8px #28c840bb, 0 0 22px #28c84055; }
.wbtn-wrap:hover .wbtn         { filter:brightness(1.3); transform:scale(1.1); }
.win-btns:hover .wbtn::before  { font-size:8px; font-weight:900; color:rgba(0,0,0,0.6); line-height:1; }
.win-btns:hover .wbtn.close::before    { content:'✕'; }
.win-btns:hover .wbtn.minimize::before { content:'−'; }
.win-btns:hover .wbtn.maximize::before { content:'⤢'; }

.win-title { flex:1; text-align:center; font-size:11.5px; color:#383838; letter-spacing:0.07em; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.win-ver   { font-size:10px; color:#222; flex-shrink:0; }

/* ── TERMINAL ── */
#terminal { flex:1; overflow-y:auto; overflow-x:hidden; padding:18px 22px 6px; scroll-behavior:smooth; }
#terminal::-webkit-scrollbar { width:3px; }
#terminal::-webkit-scrollbar-thumb { background:#1e1e1e; border-radius:2px; }

.line { line-height:1.72; font-size:13px; white-space:pre-wrap; word-break:break-word; animation:fi 0.12s ease; }
@keyframes fi { from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)} }
.line.spacer  { height:6px; display:block; }
.line.output  { color:#888; }
.line.success { color:var(--green); text-shadow:var(--glow); }
.line.error   { color:var(--red); }
.line.info    { color:var(--cyan); }
.line.warn    { color:var(--yellow); }
.line.comment { color:#404040; font-style:italic; }
.line.pline   { color:var(--white); }
.typing::after { content:'▋'; margin-left:1px; animation:blink .8s step-end infinite; color:var(--green); }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }
.prompt-u { color:var(--green); text-shadow:var(--glow); }
.prompt-p { color:var(--cyan); }
.prompt-b { color:var(--purple); }

.sbox { border:1px solid var(--green-dim); border-radius:4px; padding:11px 15px; margin:7px 0 11px; background:#080e0a; animation:fi .22s ease; }
.sbox-title { color:var(--green); font-size:12.5px; font-weight:700; letter-spacing:.08em; margin-bottom:7px; text-shadow:var(--glow); }
.kv { display:flex; gap:10px; margin:2px 0; font-size:12px; }
.k  { color:var(--yellow); min-width:128px; flex-shrink:0; }
.v  { color:var(--white); }
.v a { color:var(--cyan); text-decoration:none; }
.v a:hover { text-decoration:underline; }
.skills-grid { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.stag { background:#0d250f; border:1px solid var(--green-dim); color:var(--green); padding:1px 9px; border-radius:3px; font-size:11.5px; transition:background .14s; cursor:default; }
.stag:hover { background:#1a4020; box-shadow:var(--glow); }
.pcard { border-left:2px solid var(--green); padding:6px 12px; margin:5px 0; background:#08120a; animation:fi .18s ease; }
.pcard-name { color:var(--yellow); font-weight:600; font-size:12.5px; }
.pcard-desc { color:#777; font-size:11.5px; margin-top:1px; }
.pcard-tech { color:var(--cyan); font-size:11px; margin-top:3px; }
.pcard-link { color:#444; font-size:10.5px; margin-top:3px; }
.pcard-link a { color:var(--cyan); text-decoration:none; }
.htbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.htbl td { padding:2px 0; }
.htbl .hc { color:var(--yellow); width:200px; }
.htbl .hd { color:#777; }
.ascii { color:var(--green); font-size:10px; line-height:1.3; text-shadow:0 0 5px #39ff6a22; white-space:pre; }
.pbar { height:5px; background:#1a1a1a; border-radius:3px; margin:3px 0; overflow:hidden; }
.pfill { height:100%; background:linear-gradient(90deg,var(--green),var(--cyan)); border-radius:3px; box-shadow:0 0 6px var(--green); width:0; transition:width .25s; }

/* ── INPUT BAR ── */
.ibar { display:flex; align-items:center; padding:7px 22px 9px; border-top:1px solid #111; background:rgba(0,0,0,0.3); flex-shrink:0; }
.iprompt { font-size:13px; white-space:nowrap; flex-shrink:0; padding-right:4px; }

#cmd-input {
  flex:1 1 0%; min-width:0; width:100%;
  background:transparent; border:none; outline:none;
  color:var(--white); font-family:'JetBrains Mono',monospace;
  font-size:13px; caret-color:var(--green);
  -webkit-text-fill-color: var(--white);
  resize: none;
  overflow: hidden;
  white-space: pre;
  padding: 0;
  height: 20px;
  line-height: 20px;
}
#cmd-input:-webkit-autofill,
#cmd-input:-webkit-autofill:hover,
#cmd-input:-webkit-autofill:focus,
#cmd-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #080e0a inset !important;
  -webkit-text-fill-color: var(--white) !important;
  caret-color: var(--green);
}

/* ── STATUS BAR ── */
.sbar { display:flex; align-items:center; gap:14px; padding:3px 22px; background:#0a0a0a; border-top:1px solid #111; font-size:10.5px; color:var(--muted); flex-shrink:0; }
.sdot { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 4px var(--green); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.3} }
.spage { color:var(--cyan); }

/* ── TASKBAR ── */
#taskbar {
  position:fixed; bottom:0; left:0; right:0; height:34px;
  background:rgba(6,6,6,0.95); border-top:1px solid #181818;
  display:flex; align-items:center; padding:0 16px; gap:10px;
  z-index:20; backdrop-filter:blur(16px);
}
.tb-dot { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 5px var(--green); animation:pulse 2s infinite; }
.tb-label { font-size:11px; color:#555; letter-spacing:0.06em; }
.tb-sep { width:1px; height:14px; background:#1e1e1e; }
.tb-btn {
  background:rgba(57,255,106,0.13); border:1px solid #39ff6a44;
  color:var(--green); font-family:inherit; font-size:10.5px; padding:4px 12px;
  border-radius:4px; cursor:pointer; transition:all 0.15s; letter-spacing:0.03em;
  display:flex; align-items:center; gap:6px; outline:none;
}
.tb-btn:hover  { background:rgba(57,255,106,0.2); }
.tb-btn.tb-min { background:transparent; border-color:#333; color:#888; }
.tb-btn.tb-min:hover { background:rgba(255,255,255,0.05); border-color:#555; color:#bbb; }
.tb-btn.tb-off { display:none; }
.tb-clock { margin-left:auto; font-size:11px; color:#444; }

.mobile-helpers { display: none; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  #window { width:100%!important; height:var(--vh, 100dvh)!important; top:0!important; left:0!important; border-radius:0!important; border:none!important; min-width:0; }
  #resize-grip { display:none; }
  .win-btns .wbtn-wrap:nth-child(2),
  .win-btns .wbtn-wrap:last-child { display: none; }
  #taskbar, .sbar { display: none; }
  #titlebar { padding:0 10px; }
  #terminal { padding:12px 14px 6px; }
  #cmd-input { font-size:16px; height: 24px; line-height: 24px; }
  .ibar { padding:6px 10px 8px; }
  .prompt-b { display:none; }
  .iprompt { font-size:11.5px; }
  .wbtn-wrap { padding:6px; }
  .htbl td { display:block; padding:2px 0; }
  .htbl .hc { width:auto; color:var(--green); font-weight:600; }
  .htbl tr { margin-bottom:8px; display:block; border-bottom:1px dashed #222; padding-bottom:4px; }
  .kv { flex-direction:column; gap:2px; margin-bottom:8px; }
  .k { min-width:auto; }
  .neofetch-wrap { flex-direction:column!important; gap:10px!important; }
  .ascii { font-size:5.5px!important; letter-spacing:0; }

  .mobile-helpers {
    display: flex; gap: 8px; padding: 8px 10px; overflow-x: auto;
    background: rgba(0,0,0,0.3); border-top: 1px solid #111;
    scrollbar-width: none; flex-shrink: 0;
  }
  .mobile-helpers::-webkit-scrollbar { display: none; }
  .m-chip {
    background: rgba(57,255,106,0.1); border: 1px solid rgba(57,255,106,0.3);
    color: var(--green); border-radius: 12px; padding: 5px 12px;
    font-size: 12px; white-space: nowrap; font-family: 'JetBrains Mono', monospace;
    cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
  }
  .m-chip:active { background: rgba(57,255,106,0.2); }
}