:root {
  --mb-height: 28px;
  --status-height: 44px;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.65);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.os {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  background: url('/images/wallpaper.svg') center / cover no-repeat;
}

/* ---------- TOP BAR ---------- */
.top-bar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--mb-height);
  padding: 0 10px;
  background: rgba(28, 28, 30, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--text);
  font-size: 13px;
  user-select: none;
}

.tb-left,
.tb-right,
.tb-mobile {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tb-mobile {
  display: none;
}

.tb-logo,
.tb-appname {
  font-weight: 600;
}

.tb-logo {
  display: inline-flex;
}

.tb-appname {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.tb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tb-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ---------- LANGUAGE SWITCH ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.lang-link {
  padding: 2px 4px;
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  transition: color 0.15s, background 0.15s;
}

.lang-link:hover {
  color: var(--text);
}

.lang-link.is-active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.2);
}

.lang-sep {
  color: var(--text-dim);
  opacity: 0.5;
}

/* ---------- SCREEN / WINDOW ---------- */
.screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  position: relative;
}

.window {
  width: min(860px, 90vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: rgba(45, 45, 55, 0.55);
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  backdrop-filter: saturate(160%) blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.window-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  cursor: default;
  user-select: none;
}

.window-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-inline: auto;
  transform: translateX(-28px);
}

.traffic-lights {
  display: flex;
  gap: 8px;
}

.tl {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.tl-close {
  background: #ff5f57;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.tl-min {
  background: #febc2e;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.tl-max {
  background: #28c840;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.window-body {
  padding: 22px 26px;
  overflow-y: auto;
  line-height: 1.6;
}

.app-content {
  text-align: center;
}

.app-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px;
}

.app-sub {
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 14px;
  font-size: 15px;
}

.app-text {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ---------- DOCK (desktop) ---------- */
.dock {
  position: relative;
  z-index: 100;
  align-self: center;
  display: flex;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: rgba(60, 60, 68, 0.4);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
}

.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  color: #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dock-icon--home {
  background: linear-gradient(160deg, #4aa8ff, #1d5fd6);
}

.dock-icon--cv {
  background: linear-gradient(160deg, #ff8f4a, #e03e2f);
}

.dock-icon--projects {
  background: linear-gradient(160deg, #4ade80, #138a4b);
}

.dock-item:hover .dock-icon {
  transform: scale(1.2) translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

/* =====================================================
   MOBILE (iPhone)
   ===================================================== */
@media (max-width: 767px) {
  :root {
    --status-height: 44px;
  }

  .os {
    background: url('/images/wallpaper-mobile.svg') center / cover no-repeat;
  }

  .top-bar {
    height: calc(var(--status-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: 24px;
    padding-right: 16px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tb-left,
  .tb-right {
    display: none;
  }

  .tb-mobile {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .tb-clock--mobile {
    font-size: 15px;
    font-weight: 600;
  }

  .tb-mobile-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .lang-switch {
    gap: 4px;
  }

  .lang-link {
    font-size: 11px;
  }

  /* window becomes a full-screen "app" */
  .screen {
    display: block;
    padding: 0;
    overflow-y: auto;
  }

  .window {
    width: 100%;
    max-height: none;
    min-height: 100%;
    border-radius: 0;
    border: none;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
  }

  .window-titlebar {
    height: 46px;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .window-title {
    transform: none;
    font-size: 16px;
    font-weight: 700;
  }

  .traffic-lights {
    display: none;
  }

  .window-body {
    padding: 20px;
  }

  /* dock becomes iOS dock */
  .dock {
    align-self: stretch;
    justify-content: center;
    gap: 18px;
    margin: 0 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 26px;
    background: rgba(90, 90, 100, 0.35);
  }

  .dock-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .dock-item:hover .dock-icon {
    transform: scale(0.94);
    box-shadow: none;
  }

  .dock-label {
    display: none;
  }
}