/* Shockwve — 2004–2007 computer / gadget look. Not a modern dashboard. */

:root {
  --xp-blue: #245edb;
  --xp-blue-dark: #1941a5;
  --xp-title: #0054e3;
  --xp-face: #ece9d8;
  --xp-face-2: #d4d0c8;
  --xp-green: #3c8d0d;
  --ink: #111;
  --lcd: #9bb88a;
  --lcd-ink: #1a2a12;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 13px;
}

body {
  background:
    linear-gradient(#7eb3e0 0%, #5b9bd5 42%, #87c15a 42%, #3d7c2a 100%);
  background-attachment: fixed;
}

a { color: #003399; }
a:hover { color: #cc0000; }

code, .filename {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}

#taskbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 8px;
  color: #fff;
  background: linear-gradient(#3c81f3, var(--xp-blue) 12%, var(--xp-blue-dark));
  border-bottom: 1px solid #0831d9;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.start-btn {
  background: linear-gradient(#7cc14a, var(--xp-green));
  border: 1px solid #2a6a08;
  border-radius: 0 12px 12px 0;
  padding: 4px 14px 4px 10px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #265a08;
  letter-spacing: 0.5px;
}

.task-nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }

.nav-link {
  color: #fff;
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid transparent;
}
.nav-link:hover { background: rgba(255,255,255,.12); }
.nav-link.active {
  background: rgba(0,0,0,.2);
  border-color: #89b0ff #003399 #003399 #89b0ff;
}

.tray {
  background: linear-gradient(#22b0d0, #0a7ea3);
  padding: 4px 10px;
  border-left: 1px solid #66d4ee;
  white-space: nowrap;
}

.desktop {
  max-width: 1100px;
  margin: 16px auto 40px;
  padding: 0 12px;
}

.window {
  background: var(--xp-face);
  border: 2px solid #0055ea;
  box-shadow: 4px 4px 0 rgba(0,0,0,.25);
}

.titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 0 #003399;
  background: linear-gradient(90deg, #0a246a, var(--xp-title) 8%, #3f8cff 55%, #0a246a);
}

.win-btns span {
  display: inline-block;
  width: 18px;
  height: 16px;
  margin-left: 3px;
  text-align: center;
  line-height: 14px;
  font-size: 11px;
  background: var(--xp-face);
  color: #000;
  border: 1px solid #fff;
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #404040;
}

.window-body { padding: 10px 12px 14px; }

#status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 10px;
  padding: 6px 8px;
  background: #fff;
  border: 2px inset #fff;
}

.btn {
  font-family: inherit;
  font-size: 12px;
  padding: 3px 12px;
  background: var(--xp-face-2);
  border-width: 2px;
  border-style: solid;
  border-color: #fff #404040 #404040 #fff;
  cursor: pointer;
}
.btn:active { border-color: #404040 #fff #fff #404040; }
.btn.primary {
  background: #3d6dad;
  color: #fff;
  border-color: #9cf #123 #123 #9cf;
}
.btn.danger {
  background: #6b1;
  color: #030;
  font-weight: bold;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hero {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.logo-box {
  background: #111;
  color: #9ff;
  text-align: center;
  padding: 18px 8px;
  border: 3px outset #666;
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 2px;
}
.logo-box span { display: block; color: #fc0; font-size: 11px; letter-spacing: 1px; }

.icon-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.desk-icon {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 2px outset #fff;
  padding: 10px;
  text-align: center;
}
.desk-icon:hover { background: #d4e4ff; }
.desk-icon .glyph { font-size: 28px; display: block; margin-bottom: 4px; }

.panel {
  background: #fff;
  border: 2px inset #fff;
  padding: 8px;
  margin-top: 10px;
}

.tiny { color: #555; font-size: 11px; }
.hist-note {
  font-size: 10px;
  color: #555;
  background: #fff8c4;
  border: 1px solid #c9b44a;
  padding: 0 4px;
  margin-left: 4px;
}

table.grid {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #808080;
}
table.grid th {
  text-align: left;
  background: var(--xp-face-2);
  border: 1px solid #fff;
  border-right-color: #808080;
  border-bottom-color: #808080;
  padding: 4px 6px;
}
table.grid td {
  padding: 4px 6px;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 6px;
  background: var(--xp-face-2);
  border: 1px solid #808080;
}
.toolbar input, .toolbar select {
  font-family: inherit;
  font-size: 12px;
  padding: 3px;
}

/* ShockPod hardware */
.pod-stage {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 760px) {
  .pod-stage, .hero { grid-template-columns: 1fr; }
}

.pod-body {
  width: 250px;
  margin: 0 auto;
  padding: 16px 18px 22px;
  border-radius: 28px;
  text-align: center;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 10px 18px rgba(0,0,0,.4);
}
.pod-brand {
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 8px;
  color: #333;
}
.pod-brand span { font-weight: bold; }

.pod-1g {
  background: linear-gradient(#f4f4f4, #b8b8b8);
  border: 2px solid #888;
}
.pod-mini {
  background: linear-gradient(#7ad17a, #2f8f4a);
  border: 2px solid #1d5c2c;
  border-radius: 36px 36px 42px 42px;
  width: 200px;
}
.pod-mini .pod-brand { color: #efe; }
.pod-2g {
  background: linear-gradient(#2a2a2e, #111);
  border: 2px solid #000;
  color: #ddd;
}
.pod-2g .pod-brand { color: #eee; }
.pod-video {
  width: 280px;
  background: linear-gradient(#e8e8ea, #9a9aa0);
  border: 2px solid #555;
  border-radius: 18px;
}
.pod-video .pod-screen { height: 130px; }

.pod-screen {
  height: 110px;
  margin: 0 auto 14px;
  background: linear-gradient(#c5d6b4, var(--lcd));
  border: 4px solid #222;
  color: var(--lcd-ink);
  text-align: left;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 11px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 12px rgba(0,40,0,.25);
}
/* The LCD body scrolls; the header row stays put. */
.lcd-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pod-screen .lcd-top { flex: 0 0 auto; }
.tiny-lcd { height: 36px; margin-bottom: 8px; }
.lcd-top {
  display: flex;
  justify-content: space-between;
  background: rgba(0,0,0,.12);
  padding: 2px 4px;
  font-size: 10px;
}
.lcd-list { list-style: none; margin: 0; padding: 0; }
.lcd-list li { padding: 3px 6px; }
.lcd-list li.sel { background: #2a4a18; color: #d8f0c8; }
.lcd-empty, .now-lcd { padding: 8px; line-height: 1.4; }
.eq { margin-top: 8px; letter-spacing: 3px; }

.click-wheel {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fafafa, #9a9a9a 70%, #666);
  border: 2px solid #555;
  box-shadow: inset 0 0 8px #fff;
}
.tiny-wheel { width: 54px; height: 54px; }
.cw {
  position: absolute;
  background: transparent;
  border: 0;
  color: #444;
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
}
.cw-menu { top: 14px; left: 0; right: 0; }
.cw-prev { left: 8px; top: 64px; }
.cw-next { right: 8px; top: 64px; }
.cw-play { bottom: 16px; left: 0; right: 0; }
.cw-center {
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #bbb);
  border: 1px solid #888;
  box-shadow: 0 1px 2px #000;
}
.pod-ports { margin-top: 10px; font-size: 10px; color: #444; }
.pod-2g .pod-ports { color: #aaa; }

.sync-row {
  display: block;
  padding: 4px 0;
  border-bottom: 1px dotted #bbb;
}

.empty-desk {
  padding: 24px;
  background: #fff;
  border: 2px inset #fff;
}

/* ShockTunes */
.tunes-app { background: #cfd6de; }
.album-head { display: flex; gap: 12px; margin-bottom: 10px; }
.jewel {
  width: 72px;
  height: 72px;
  background: repeating-linear-gradient(135deg, #222, #222 8px, #fc3 8px, #fc3 16px);
  border: 3px solid #ccc;
  box-shadow: 2px 2px 0 #000;
}
.ripped { color: #060; font-weight: bold; }

/* LemonWire */
.lemon-skin {
  background: #2a2a20;
  color: #d8d8c0;
}
.lemon-skin .titlebar {
  background: linear-gradient(90deg, #5a5a10, #c8c830);
  color: #111;
  text-shadow: none;
}
.lemon-skin a { color: #ef6; }
.lemon-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 8px;
  margin-bottom: 6px;
  background: #111;
  border: 1px solid #666633;
}
.lemon-row.exe { border-color: #a33; background: #2a1010; }
.progress-wrap {
  height: 16px;
  background: #111;
  border: 2px inset #666;
  margin: 8px 0;
  position: relative;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, #8c0, #8c0 8px, #6a0 8px, #6a0 16px);
}
.progress-wrap .speed {
  position: absolute;
  right: 6px;
  top: 0;
  font-size: 11px;
  color: #efe;
}
.guard-box, .dead-box, .ok-box {
  padding: 10px;
  margin-top: 8px;
  border: 3px double #000;
}
.guard-box { background: #ffc; color: #330; }
.dead-box { background: #400; color: #fcc; }
.ok-box { background: #243; color: #cfc; }
.row-btns { margin-top: 8px; display: flex; gap: 8px; }

/* Shop */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.product {
  background: #fff;
  border: 2px outset #fff;
  padding: 10px;
  text-align: center;
}
.product h3 { margin: 6px 0; }
.tag { font-size: 11px; color: #444; min-height: 32px; }
.specs { text-align: left; font-size: 12px; padding-left: 18px; }
.owned { background: #cfc; padding: 4px; font-weight: bold; }
.locked { background: #ddd; padding: 4px; }
.mini-preview { transform: scale(0.72); transform-origin: top center; margin-bottom: -40px; }
.product-pod { height: 160px; overflow: hidden; }

.disclaimer {
  margin-top: 12px;
  padding: 8px;
  background: #fff8c4;
  border: 1px solid #aa8;
  font-size: 11px;
}

/* =====================================================================
   BUILD 2 — Nano models, shell colors, small animations, mobile support
   Everything below is additive. Nothing above this line was removed.
   ===================================================================== */

/* ---- Nano hardware ------------------------------------------------ */
.pod-nano {
  width: 150px;
  background: linear-gradient(#f4f4f4, #b8b8b8);
  border: 2px solid #888;
  border-radius: 22px;
}
.pod-nano .pod-brand { font-size: 11px; letter-spacing: 2px; }
.pod-nano .pod-screen { height: 84px; margin-bottom: 10px; font-size: 10px; }
.pod-nano .click-wheel { width: 104px; height: 104px; }
.pod-nano .cw-menu { top: 8px; }
.pod-nano .cw-prev { left: 5px; top: 44px; }
.pod-nano .cw-next { right: 5px; top: 44px; }
.pod-nano .cw-play { bottom: 8px; }
.pod-nano .cw-center { width: 40px; height: 40px; margin: -20px 0 0 -20px; }

.pod-nano-2g {
  width: 150px;
  background: linear-gradient(#e8e8ea, #9a9aa0);
  border: 2px solid #555;
  border-radius: 22px;
}
.pod-nano-2g .pod-brand { font-size: 11px; letter-spacing: 2px; color: #333; }
.pod-nano-2g .pod-screen { height: 92px; margin-bottom: 10px; font-size: 10px; }
.pod-nano-2g .click-wheel { width: 108px; height: 108px; }
.pod-nano-2g .cw-menu { top: 8px; }
.pod-nano-2g .cw-prev { left: 5px; top: 46px; }
.pod-nano-2g .cw-next { right: 5px; top: 46px; }
.pod-nano-2g .cw-play { bottom: 8px; }
.pod-nano-2g .cw-center { width: 40px; height: 40px; margin: -20px 0 0 -20px; }

/* ---- Colorable shells (Mini / Nano / Nano 2G) --------------------- */
.pod-mini.pod-colorable,
.pod-nano.pod-colorable,
.pod-nano-2g.pod-colorable {
  background-color: var(--pod-shell, #c8c8c8);
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.18));
  border-color: var(--pod-ink, #777);
}
.pod-mini.pod-colorable .pod-brand,
.pod-nano.pod-colorable .pod-brand,
.pod-nano-2g.pod-colorable .pod-brand { color: var(--pod-text, #333); }
.pod-colorable .pod-ports { color: var(--pod-text, #444); opacity: .8; }

/* ---- Appearance (color picker) ------------------------------------ */
.appearance-panel {
  margin-top: 14px;
  padding: 8px;
  background: #fff;
  border: 2px inset #fff;
}
.appearance-panel h3 { margin: 0 0 4px; font-size: 13px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid #808080;
  background: var(--sw, #ccc);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch:active { transform: scale(.94); }
.swatch.selected {
  outline: 2px solid #0054e3;
  outline-offset: 1px;
  transform: translateY(-2px);
}

/* ---- Small animations --------------------------------------------- */
@keyframes swkfw-flicker { 0% { opacity: .25 } 20% { opacity: 1 } 35% { opacity: .45 } 55% { opacity: 1 } 100% { opacity: 1 } }
@keyframes swkfw-lcd-on { 0% { filter: brightness(2.4) contrast(.35); opacity: .3 } 55% { opacity: 1 } 100% { filter: none; opacity: 1 } }
@keyframes swkfw-lcd-tick { from { background: #d8f0c8; color: #1a2a12 } to { background: #2a4a18; color: #d8f0c8 } }
@keyframes swkfw-eq { 0%, 100% { height: 3px } 50% { height: 15px } }
@keyframes swkfw-batt { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes swkfw-wheel { 50% { box-shadow: inset 0 0 16px #fff, 0 0 0 4px rgba(255,255,255,.4) } }
@keyframes swkfw-sync { 0% { background: #d6ffcc } 100% { background: transparent } }

.eq-bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-top: 8px; }
.eq-bars span { display: block; width: 4px; height: 8px; background: #1a2a12; }
.lcd-top span.low { color: #7a1010; font-weight: bold; }

@media (prefers-reduced-motion: no-preference) {
  .logo-box { animation: swkfw-flicker .7s steps(2, end) 1; }
  .pod-screen.power-on { animation: swkfw-lcd-on .5s ease-out both; }
  .lcd-list li.sel { animation: swkfw-lcd-tick .18s ease-out; }
  .click-wheel.tick { animation: swkfw-wheel .18s ease-out; }
  .sync-row.sync-flash { animation: swkfw-sync .9s ease-out; }
  .eq-bars span { animation: swkfw-eq .9s ease-in-out infinite; }
  .eq-bars span:nth-child(2) { animation-delay: .15s; }
  .eq-bars span:nth-child(3) { animation-delay: .3s; }
  .eq-bars span:nth-child(4) { animation-delay: .45s; }
  .lcd-top span.low { animation: swkfw-batt 1.2s ease-in-out infinite; }
  .product { transition: transform .12s ease; }
  .product:hover { transform: translateY(-2px); }
  .btn { transition: transform .08s ease; }
  .btn:active:not(:disabled) { transform: translateY(1px); }
  .nav-link { transition: background .12s ease; }
  .start-btn { transition: transform .08s ease; }
  .start-btn:active { transform: translateY(1px); }
}

/* ---- Mobile / iPhone support -------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; overscroll-behavior-y: contain; }
button, a, input, select, .nav-link, .desk-icon, .cw, .swatch { touch-action: manipulation; }

@media (max-width: 640px) {
  .desktop { margin: 10px auto 28px; padding: 0 8px; }
  #taskbar { height: auto; flex-wrap: nowrap; padding: 5px 6px; gap: 6px; }
  .start-btn { padding: 6px 10px; font-size: 12px; }
  .task-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .task-nav::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; padding: 9px 10px; }
  .tray { font-size: 11px; padding: 5px 7px; }
  .titlebar { font-size: 12px; }
  .window-body { padding: 8px 8px 12px; }
  .btn { font-size: 13px; min-height: 34px; padding: 7px 12px; }
  .toolbar input, .toolbar select, #lib-q { font-size: 16px; }
  .pod-body { width: min(250px, 84vw); }
  .pod-mini { width: min(200px, 74vw); }
  .pod-video { width: min(280px, 88vw); }
  .click-wheel { transform: scale(1.08); transform-origin: center top; margin-bottom: 12px; }
  .sync-row { padding: 10px 0; }
  .sync-row input[type=checkbox] { width: 20px; height: 20px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Stacked "card" tables on phones */
@media (max-width: 640px) {
  table.grid thead { display: none; }
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid tr { background: #fff; border: 1px solid #808080; margin-bottom: 8px; }
  table.grid td { border-bottom: 1px dotted #ccc; padding: 6px 8px; }
  table.grid td:last-child { border-bottom: 0; }
  table.grid td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 76px;
    font-weight: bold;
    color: #444;
  }
}

/* Notch / home-indicator safe areas */
@supports (padding: env(safe-area-inset-left)) {
  #taskbar {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .desktop {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  body { padding-bottom: env(safe-area-inset-bottom); }
}