/* lostboywav.com replica — hand-authored stylesheet.
   Layout values measured from the live site at 1280x800. */

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: .625rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; }
body {
  background-color: #030303; color: #fff; font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.loading { overflow: hidden; }
html, body { overflow-x: hidden; max-width: 100%; }
.home-container { width: 100%; }
.dock-wrap { width: 100%; left: 0; }
img, svg, video, canvas { display: block; vertical-align: middle; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }

/* ---------- noise + loading ---------- */
.noise-overlay {
  pointer-events: none; z-index: 9990; opacity: .05; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.loading-screen {
  z-index: 9999; pointer-events: none; display: flex; justify-content: center; align-items: center;
  height: 100dvh; position: fixed; top: 0; left: 0; right: 0;
  transition: opacity .6s ease;
}
.loading-screen.done { opacity: 0; }
.curtain { z-index: -1; background-color: #121212; position: absolute; inset: 0; }
.loading-content { z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; width: 100%; position: relative; }
.logo-container { display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; }
.loading-logo { object-fit: contain; width: 120px; height: auto; }
.progress-container { background-color: #ffffff1a; border-radius: 2px; width: 300px; height: 4px; position: relative; overflow: hidden; }
.progress-bar { transform-origin: 0; background-color: #fff; width: 100%; height: 100%; transform: scaleX(0); transition: transform .12s linear; }
.counter { color: #fff; margin-top: .5rem; font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700; }

/* verse beneath the loading bar */
.loading-quote {
  --rose: #e9a3c0;
  margin: .25rem 0 0; padding: 0 24px; max-width: 560px; text-align: center; text-wrap: balance;
  font-family: "Playfair Display", "Times New Roman", Georgia, serif; color: var(--rose);
  animation: quote-in 1.6s cubic-bezier(.16, 1, .3, 1) .4s both;
}
.loading-quote blockquote {
  margin: 0; font-size: clamp(.8rem, 1.3vw, .92rem); font-weight: 400; font-style: italic; line-height: 1.5; letter-spacing: .01em;
  color: rgba(233, 163, 192, .8);
}
.loading-quote b { font-weight: 400; color: inherit; }
.loading-quote i { font-style: italic; font-weight: 400; }
.loading-quote .q-mark { opacity: .5; }
.loading-quote figcaption {
  margin-top: .4rem; font-style: normal; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(233, 163, 192, .45);
}
@keyframes quote-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------- desktop ---------- */
.page-lock { width: 100%; height: 100dvh; position: fixed; top: 0; left: 0; overflow: hidden; }
.background-video { object-fit: cover; z-index: -1; width: 100%; height: 100dvh; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-out; }
.background-video.ready { opacity: 1; }
.home-container {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100vw; min-height: 100vh; position: relative; overflow: hidden;
}

.intro-card {
  z-index: 10; display: flex; align-items: center;
  background: #1e1e1e99; border: 1px solid #ffffff1a; border-radius: 40px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  margin-top: -9rem; margin-bottom: 6rem; padding: 12px 20px 12px 12px;
  box-shadow: 0 4px 15px #0000004d;
}
.intro-avatar { object-fit: cover; object-position: 50% 50%; background: #2a2a2e; border-radius: 50%; width: 76px; height: 76px; margin-right: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.intro-flags { margin-top: 2px; }
.intro-flags .flag { margin-left: 0; }
.flag-wrap { position: relative; display: inline-block; margin-right: 4px; cursor: default; outline: none; }
.flag-wrap::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translate(-50%, 4px);
  white-space: nowrap; padding: 4px 8px; border-radius: 7px; font-size: 11px; font-weight: 500; letter-spacing: .01em;
  color: #fff; background: rgba(30, 30, 32, .92); border: .5px solid rgba(255, 255, 255, .18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 20;
}
.flag-wrap::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent; border-top-color: rgba(30, 30, 32, .92);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.flag-wrap:hover::after, .flag-wrap:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.flag-wrap:hover::before, .flag-wrap:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.intro-text { display: flex; flex-direction: column; justify-content: center; }
.intro-handle { color: #fff; font-size: 17px; font-weight: 600; line-height: 1.2; margin-bottom: 3px; }
.intro-role { color: #8a8a8e; font-size: 13px; line-height: 1.3; }
.intro-role .flag { display: inline-block; width: 18px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-left: 2px; box-shadow: 0 0 0 .5px rgba(255,255,255,.18); }

.grid-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); place-items: center; gap: .5rem; margin-top: -6rem; }
@media (min-width: 640px) { .grid-container { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; } }
.app-button {
  cursor: pointer; border-radius: 1rem; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  width: 7rem; height: 7rem; padding: 1.5rem; transition: background-color .15s, transform .15s;
}
.app-button:hover { background-color: #ffffff14; }
.app-button:active { transform: scale(.96); }
.icon-image { width: 3rem; height: 3rem; filter: drop-shadow(0 4px 8px #0006); }
.title-span { color: #fff; filter: drop-shadow(0 1px 1px #000c); margin-top: .5rem; font-size: .875rem; font-weight: 500; }

/* ---------- menu bar ---------- */
.menubar-wrap { position: fixed; top: 5%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 100%; z-index: 100; }
.menubar {
  height: 32px; background: rgba(40, 40, 40, .65); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.menubar-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 20px; }
.menubar-left, .menubar-right { display: flex; align-items: center; gap: 1rem; }
.menubar-logo img { width: 40px; height: 40px; object-fit: contain; transition: opacity .15s; }
.menubar-logo:hover img { opacity: .8; }
.menubar-icon { display: flex; cursor: pointer; transition: opacity .15s; }
.sound-toggle { padding: 0; }
.sound-toggle .ico-off { display: none; }
.sound-toggle[aria-pressed="false"] .ico-on { display: none; }
.sound-toggle[aria-pressed="false"] .ico-off { display: block; opacity: .6; }
.menubar-icon:hover { opacity: .8; }
.menubar-time { color: #fff; font-size: .875rem; font-weight: 500; user-select: none; margin-left: .25rem; cursor: pointer; }

/* ---------- dock ---------- */
.dock-wrap { position: fixed; bottom: 2rem; width: 100vw; display: flex; align-items: center; justify-content: center; z-index: 90; }
.dock {
  background: rgba(45, 45, 45, .75); border-radius: 25.6px; border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 6.4px 25.6px rgba(0, 0, 0, .4), 0 3.2px 12.8px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .2);
  padding: 9px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.dock-track { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.dock-item {
  width: 64px; height: 64px; display: flex; align-items: flex-end; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: center bottom; transition: transform .12s ease-out; will-change: transform;
}
.dock-item img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 1.92px 3.84px rgba(0, 0, 0, .2)); }
.dock-item:active { transform: scale(.95) !important; }

/* ---------- notification banners ---------- */
.notif-stack { position: fixed; top: 56px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.notif {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; width: 340px; padding: 12px 14px;
  background: rgba(44, 44, 46, .78); border: .5px solid rgba(255, 255, 255, .18); border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  color: #f2f2f7; animation: notif-in .45s cubic-bezier(.16, 1, .3, 1);
}
.notif.leaving { animation: notif-out .35s ease-in forwards; }
.notif-icon { width: 38px; height: 38px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.25; }
.notif-time { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.notif-msg { font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .82); margin-top: 2px; }
@keyframes notif-in { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes notif-out { to { opacity: 0; transform: translateX(40px) scale(.96); } }

/* ---------- modal windows ---------- */
.modal-overlay {
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 150; background-color: #0006;
  display: flex; justify-content: center; align-items: center; position: fixed; inset: 0;
  animation: fade-in .18s ease-out;
}
.modal-overlay[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }
.modal {
  background-color: #eee; border-radius: 1rem; width: 90%; max-height: 80vh; padding: 1.5rem; position: relative;
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d; animation: pop .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } }
@media (min-width: 768px) { .modal { width: 600px; } }
.dark-modal {
  -webkit-backdrop-filter: blur(35px) saturate(190%); backdrop-filter: blur(35px) saturate(190%);
  color: #f2f2f7; background: #1a1a1cf2; border: .5px solid #ffffff29;
  box-shadow: 0 24px 48px -12px #000c, 0 0 1px 1px #ffffff24;
}
.modal-controls { display: flex; gap: .5rem; position: absolute; top: 1rem; left: 1rem; }
.close-button, .minimize-button, .fullscreen-button { border-radius: 9999px; width: 1rem; height: 1rem; display: block; }
.close-button { background-color: #ef4444; } .close-button:hover { background-color: #dc2626; }
.minimize-button { background-color: #fbbf24; } .fullscreen-button { background-color: #22c55e; }
.title-container { display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; padding-top: .5rem; }
.modal-title { font-size: 1.25rem; font-weight: 600; color: #f2f2f7; }
.modal-content { max-height: calc(70vh - 100px); padding-right: .5rem; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #fff3 transparent; }
.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-thumb { background: #fff3; border-radius: 4px; }

/* music */
.credits-list { width: 100%; margin-top: 12px; }
.credits-item { border-bottom: 1px solid #7878801f; display: flex; align-items: center; padding: 12px 0; }
.credits-item:last-child { border-bottom: none; }
.cover-art { border-radius: 8px; width: 50px; height: 50px; margin-right: 14px; background: linear-gradient(135deg, var(--c), #000 160%); flex-shrink: 0; }
.credits-info { display: flex; flex-direction: column; }
.song-name { color: #fff; font-size: 16px; font-weight: 500; line-height: 1.3; }
.artist-name { color: #8a8a8e; font-size: 14px; line-height: 1.3; }
.section-heading { color: #ccc; text-align: center; margin-top: 32px; margin-bottom: 16px; font-size: 17px; font-weight: 600; }
.playlist-buttons { display: flex; flex-direction: column; gap: 12px; }
.playlist-btn { color: #fff; text-align: center; border-radius: 12px; display: flex; justify-content: center; align-items: center; padding: 14px 20px; font-size: 16px; font-weight: 600; transition: opacity .2s, transform .2s; }
.playlist-btn:hover { opacity: .85; } .playlist-btn:active { transform: scale(.98); }
.playlist-btn.sc { background-color: #ff5e00; } .playlist-btn.apple { background-color: #b9001f; }
.playlist-btn.spotify { background-color: #1db954; } .playlist-btn.youtube { background-color: red; }

.spotify-list { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
.spotify-embed { display: block; border: 0; border-radius: 12px; background: #121212; }

/* photos */
.photos-grid { column-count: 2; column-gap: 12px; padding: 6px 0; }
.photo-item { break-inside: avoid; border-radius: 10px; margin: 0 0 12px; overflow: hidden; background: #1a1a1a; cursor: zoom-in; }
.photo-item img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease, transform .3s; }
.photo-item img.loaded { opacity: 1; }
.photo-item:hover img { transform: scale(1.03); }
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade-in .15s ease-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .7); }

/* terminal */
.terminal { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; background: #0b0b0d; border-radius: 8px; padding: 12px; min-height: 280px; color: #e4e4e7; }
.terminal-out div { white-space: pre-wrap; word-break: break-word; }
.terminal-out .cmd { color: #99a1af; }
.terminal-line { display: flex; gap: 8px; align-items: center; margin-top: 4px; min-width: 0; }
.prompt { color: #05df72; white-space: nowrap; }
.terminal-input { flex: 1 1 0; min-width: 0; width: 100%; background: none; border: 0; outline: none; color: #fff; font: inherit; caret-color: #fff; }
.terminal { overflow-x: hidden; }

/* ---------- About (Notes) page ---------- */
.ios-notes-page {
  --yellow: #ffd60a; --yellow-hover: #ffe566; --text-body: #ebebf5; --secondary: #8e8e93; --border: #ffffff1f; --glass: #1c1c1ed1;
  background-color: #000; min-height: 100dvh; color: #fff; display: flex; flex-direction: column; position: relative; overflow-x: hidden;
}
.ios-notes-header { z-index: 50; background: var(--glass); -webkit-backdrop-filter: blur(25px) saturate(190%); backdrop-filter: blur(25px) saturate(190%); border-bottom: .5px solid var(--border); padding: 12px 18px; position: sticky; top: 0; }
.ios-notes-header-inner { display: flex; justify-content: space-between; align-items: center; max-width: 820px; margin: 0 auto; }
.ios-notes-nav-back { color: var(--yellow); letter-spacing: -.3px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 8px; font-size: 17px; transition: opacity .15s; }
.ios-notes-nav-back:hover { opacity: .8; }
.ios-notes-folder-title { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.ios-notes-btn { color: var(--yellow); border-radius: 50%; padding: 6px; display: flex; transition: all .15s; }
.ios-notes-btn:hover { color: var(--yellow-hover); transform: scale(1.1); }
.ios-notes-main { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 24px 20px 120px; }
.ios-notes-date-pill { text-align: center; color: var(--secondary); margin-bottom: 20px; font-size: 12px; }
.ios-notes-h1 { letter-spacing: -.6px; margin: 0 0 6px; font-size: 32px; font-weight: 700; line-height: 1.2; }
.ios-notes-sub { color: var(--secondary); margin: 0 0 24px; font-size: 15px; }
.ios-notes-article { display: flex; flex-direction: column; gap: 18px; }
.ios-notes-p { color: var(--text-body); font-size: 17px; line-height: 1.65; }
.ios-notes-p strong { color: #fff; font-weight: 600; }
.ios-notes-checklist-card { border: .5px solid var(--border); background: #ffffff0d; border-radius: 16px; display: flex; flex-direction: column; gap: 12px; margin: 10px 0 16px; padding: 16px 18px; }
.ios-checklist-row { color: var(--text-body); cursor: pointer; user-select: none; border-radius: 8px; display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; }
.ios-checklist-row strong { color: #fff; }
.ios-check-bubble { border: 1.5px solid var(--yellow); border-radius: 50%; flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 22px; height: 22px; margin-top: 1px; color: #000; }
.ios-check-bubble svg { display: none; }
.ios-checklist-row.is-checked .ios-check-bubble { background-color: var(--yellow); box-shadow: 0 2px 10px #ffd60a59; }
.ios-checklist-row.is-checked .ios-check-bubble svg { display: block; }
.ios-notes-link { color: var(--yellow); text-decoration: underline; text-decoration-color: #ffd60a73; text-underline-offset: 3px; }
.ios-notes-attachment { background: #2c2c2e; border: .5px solid #ffffff29; border-radius: 16px; margin-top: 14px; overflow: hidden; box-shadow: 0 8px 30px #00000080; }
.ios-notes-img-container { background: #111113; width: 100%; max-height: 460px; overflow: hidden; }
.ios-notes-photo { width: 100%; height: 360px; object-fit: cover; display: block; }
.ios-notes-attachment-meta { background: #00000073; border-top: .5px solid #ffffff14; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.ios-meta-name { font-size: 13px; font-weight: 500; }
.ios-meta-detail { color: var(--secondary); font-size: 12px; }
.ios-notes-toolbar { z-index: 50; background: var(--glass); -webkit-backdrop-filter: blur(25px) saturate(190%); backdrop-filter: blur(25px) saturate(190%); border-top: .5px solid var(--border); padding: 10px 20px 18px; position: fixed; bottom: 0; left: 0; right: 0; }
.ios-notes-toolbar-inner { display: flex; justify-content: space-between; align-items: center; max-width: 820px; margin: 0 auto; }
.ios-toolbar-action { color: var(--yellow); border-radius: 8px; padding: 6px; display: flex; transition: all .15s; }
.ios-toolbar-action:hover { color: var(--yellow-hover); background: #ffd60a26; }
.ios-toolbar-words { color: var(--secondary); font-size: 12px; }

/* Notes content when shown inside the desktop modal window */
.notes-in-modal { background: transparent; min-height: 0; display: block; overflow: visible; }
.notes-in-modal .ios-notes-main { padding: 4px 6px 12px; max-width: none; }
.notes-in-modal .ios-notes-h1 { font-size: 26px; }
.notes-in-modal .ios-notes-p { font-size: 15px; }
.notes-in-modal .ios-notes-photo { height: 260px; object-position: 50% 25%; }
.notes-entry { padding: 4px 0 18px; }
.notes-entry + .notes-entry { border-top: .5px solid rgba(255, 255, 255, .12); padding-top: 18px; }
.notes-entry .ios-notes-date-pill { margin-bottom: 12px; }
.notes-entry .ios-notes-p + .ios-notes-p { margin-top: 6px; }

/* ---------- Files (Finder) page ---------- */
.files-page {
  --win-bg: #1c1c1e; --sidebar-bg: #1c1c1ed9; --content-bg: #141416; --border: #ffffff1a; --border-subtle: #ffffff0f;
  --blue: #0a84ff; --blue-hover: #409cff; --text2: #8e8e93; --text3: #636366; --glass: #18181ad1;
  background-color: #000; min-height: 100dvh; color: #fff; display: flex; flex-direction: column; position: relative; overflow-x: hidden;
}
.files-ambient-glow { pointer-events: none; z-index: 0; filter: blur(60px); background: radial-gradient(circle, #0a84ff14 0%, #ff453a0a 40%, #0000 70%); width: min(1000px, 90vw); height: 500px; position: fixed; top: 10%; left: 50%; transform: translate(-50%); }
.files-container { z-index: 1; display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 1260px; margin: 0 auto; padding: 16px; position: relative; }
.files-window { background: var(--win-bg); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; flex: 1; min-height: calc(100dvh - 32px); overflow: hidden; box-shadow: 0 24px 60px #000000bf, 0 2px 10px #00000080, 0 0 0 1px #ffffff14; }
.files-toolbar { background: var(--glass); -webkit-backdrop-filter: blur(25px) saturate(190%); backdrop-filter: blur(25px) saturate(190%); border-bottom: 1px solid var(--border); z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; position: sticky; top: 0; }
.files-toolbar-left { display: flex; align-items: center; gap: 16px; }
.files-traffic-lights { display: flex; align-items: center; gap: 7px; padding-right: 4px; }
.traffic-dot { opacity: .9; border-radius: 50%; width: 12px; height: 12px; display: inline-block; }
.traffic-dot.red { background: #ff5f56; border: .5px solid #e0443e; }
.traffic-dot.yellow { background: #ffbd2e; border: .5px solid #dea123; }
.traffic-dot.green { background: #27c93f; border: .5px solid #1aab29; }
.files-nav-arrows { background: #ffffff0f; border-radius: 8px; display: flex; align-items: center; gap: 2px; padding: 2px; }
.files-nav-arrow-btn { color: #fff; border-radius: 6px; display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; }
.files-nav-arrow-btn:disabled { opacity: .3; cursor: not-allowed; }
.files-home-btn { color: var(--blue); background: #0a84ff1f; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 14px; font-weight: 500; transition: all .15s; }
.files-home-btn:hover { color: var(--blue-hover); background: #0a84ff38; }
.files-toolbar-center { flex: 1; display: flex; justify-content: center; align-items: center; min-width: 0; }
.breadcrumb-item { color: #fff; font-size: 13px; font-weight: 600; padding: 3px 6px; }
.files-toolbar-right { display: flex; align-items: center; gap: 10px; }
.files-view-switcher { background: #ffffff14; border-radius: 8px; display: flex; align-items: center; padding: 2px; }
.view-switch-btn { color: var(--text2); border-radius: 6px; display: flex; padding: 5px 8px; transition: all .15s; }
.view-switch-btn.active { color: #fff; background: #ffffff2e; box-shadow: 0 1px 4px #0006; }
.files-search-wrap { display: flex; align-items: center; position: relative; }
.files-search-icon { pointer-events: none; color: var(--text2); position: absolute; left: 8px; }
.files-search-input { color: #fff; background: #ffffff14; border: 1px solid #ffffff14; border-radius: 8px; outline: none; width: 170px; padding: 5px 28px; font-size: 13px; transition: all .2s; font-family: inherit; }
.files-search-input:focus { border-color: var(--blue); background: #ffffff1f; width: 220px; box-shadow: 0 0 0 3px #0a84ff40; }
.files-search-input::placeholder { color: var(--text3); }
.files-body { flex: 1; min-height: 0; display: flex; position: relative; }
.files-sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; gap: 20px; width: 210px; padding: 16px 10px; }
.sidebar-section-title { text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-bottom: 6px; padding: 0 8px; font-size: 11px; font-weight: 700; }
.sidebar-nav-list { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.sidebar-nav-item { color: var(--text2); text-align: left; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 10px; font-size: 13px; font-weight: 500; transition: all .12s; }
.sidebar-nav-item:hover { color: #fff; background: #ffffff0f; }
.sidebar-nav-item.active { background: var(--blue); color: #fff; }
.sidebar-item-left { display: flex; align-items: center; gap: 9px; }
.sidebar-tag-dot { border-radius: 50%; flex-shrink: 0; width: 10px; height: 10px; }
.sidebar-badge { color: var(--text2); background: #ffffff1a; border-radius: 10px; padding: 1px 6px; font-size: 11px; font-weight: 600; }
.sidebar-nav-item.active .sidebar-badge { color: #fff; background: #ffffff40; }
.files-content-area { background: var(--content-bg); display: flex; flex-direction: column; flex: 1; position: relative; overflow-y: auto; }
.files-viewport { flex: 1; padding: 20px 24px; }
.files-group-title { text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin: 0 0 14px 2px; font-size: 11px; font-weight: 700; }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; margin-bottom: 28px; }
.file-item-card { text-align: center; cursor: pointer; user-select: none; border: 1px solid #0000; border-radius: 10px; display: flex; flex-direction: column; align-items: center; padding: 12px 10px; transition: all .15s; position: relative; }
.file-item-card:hover { background: #ffffff0f; }
.file-item-card.selected { background: #0a84ff33; border-color: #0a84ff80; box-shadow: 0 0 0 1px #0a84ff4d; }
.file-item-icon-wrap { display: flex; justify-content: center; align-items: center; width: 64px; height: 64px; margin-bottom: 8px; }
.file-item-icon { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px #0006); transition: transform .15s; }
.file-item-card:hover .file-item-icon { transform: scale(1.05); }
.file-item-name { font-size: 12px; font-weight: 500; line-height: 1.35; }
.file-item-meta { color: var(--text2); margin-top: 3px; font-size: 11px; }
.files-status-bar { background: var(--glass); border-top: 1px solid var(--border); color: var(--text2); display: flex; justify-content: space-between; align-items: center; padding: 8px 18px; font-size: 11px; }
.status-storage { display: flex; align-items: center; gap: 6px; }

/* ---------- Beats page ---------- */
.beats-page { min-height: 100dvh; background: #050505; color: #fff; display: flex; flex-direction: column; align-items: center; padding: 96px 24px 60px; }
.sale-indicator-fixed { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); background: #ffd60a; color: #000; font-weight: 700; font-size: 12px; letter-spacing: .08em; padding: 6px 14px; border-radius: 999px; z-index: 110; }
.beats-list { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.beat-row { display: flex; align-items: center; gap: 14px; background: #141416; border: 1px solid #ffffff14; border-radius: 12px; padding: 12px 14px; }
.beat-art { width: 56px; height: 56px; border-radius: 8px; background: linear-gradient(135deg, var(--c), #000 160%); flex-shrink: 0; }
.beat-info { flex: 1; min-width: 0; }
.beat-name { font-weight: 600; }
.beat-meta { color: #8e8e93; font-size: 12px; }
.beat-actions { display: flex; gap: 8px; }
.btn { border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.btn.primary { background: #fff; color: #000; }
.btn.secondary { background: #ffffff14; color: #fff; }
.beats-title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.beats-sub { color: #8e8e93; margin-top: 4px; }
.beats-home { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1e1e22d1; border: .5px solid #ffffff2e; border-radius: 30px; padding: 10px 18px; font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  /* menu bar */
  .menubar-wrap { width: calc(100% - 20px); top: 0; transform: translate(-50%, 0); margin-top: max(10px, env(safe-area-inset-top)); }
  .menubar-inner { padding: 0 12px; }
  .menubar-logo img { width: 34px; height: 34px; }
  .menubar-right { gap: .7rem; }
  .menubar-time { font-size: .8rem; }

  /* intro card */
  .intro-card { margin-top: -4rem; margin-bottom: 2.2rem; padding: 10px 16px 10px 10px; border-radius: 32px; max-width: calc(100% - 32px); }
  .intro-avatar { width: 56px; height: 56px; margin-right: 12px; }
  .intro-handle { font-size: 15px; }
  .intro-role { font-size: 12px; }

  /* app grid */
  .grid-container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem .5rem; margin-top: -1rem; padding: 0 12px; }
  .app-button { width: 5.6rem; height: 5.6rem; padding: 1rem .5rem; }
  .icon-image { width: 2.9rem; height: 2.9rem; }
  .title-span { font-size: .78rem; }
  .app-button:hover { background: none; }

  /* dock */
  .dock-wrap { bottom: max(14px, env(safe-area-inset-bottom)); }
  .dock { padding: 7px; border-radius: 22px; }
  .dock-track { height: 50px; gap: 6px; }
  .dock-item, .dock-item img { width: 50px; height: 50px; }

  /* modal windows */
  .modal { width: calc(100% - 20px); max-height: 82dvh; padding: 1.1rem .9rem .9rem; border-radius: 14px; }
  .modal-controls { top: .8rem; left: .8rem; }
  .close-button, .minimize-button, .fullscreen-button { width: .8rem; height: .8rem; }
  .title-container { margin-bottom: .6rem; padding-top: .2rem; }
  .modal-title { font-size: 1.05rem; }
  .modal-content { max-height: calc(82dvh - 86px); padding-right: .25rem; }
  .terminal { font-size: 13px; min-height: 220px; padding: 10px; }
  .terminal-input { font-size: 16px; } /* 16px stops iOS from zooming the page on focus */
  .notes-in-modal .ios-notes-h1 { font-size: 22px; }
  .notes-in-modal .ios-notes-p { font-size: 15px; }
  .photos-grid { column-gap: 8px; }
  .photo-item { margin-bottom: 8px; border-radius: 8px; }
  .spotify-list { gap: 10px; }

  /* notifications */
  .notif-stack { top: max(52px, calc(env(safe-area-inset-top) + 50px)); right: 10px; left: 10px; align-items: stretch; }
  .notif { width: auto; padding: 10px 12px; }

  /* loading screen */
  .progress-container { width: 220px; }
  .loading-quote { padding: 0 20px; }
  .loading-quote blockquote { font-size: .85rem; }

  /* files page */
  .files-sidebar { display: none; }
}
@media (max-width: 380px) {
  .app-button { width: 5rem; height: 5rem; }
  .dock-track { height: 44px; gap: 5px; }
  .dock-item, .dock-item img { width: 44px; height: 44px; }
}
/* short landscape phones: keep the grid reachable */
@media (max-height: 480px) {
  .intro-card { margin-top: -1rem; margin-bottom: 1rem; }
  .grid-container { margin-top: 0; }
  .app-button { width: 5rem; height: 5rem; padding: .8rem .5rem; }
}