New redesign

Co-authored-by: Copilot <copilot@github.com>

app/globals.css

@@ -2,11 +2,14 @@
   --bg-1: #f8f2e6;
   --bg-2: #dce9f4;
   --card: #fff9f0;
+  --panel: #f9f8f3;
+  --panel-line: #d8d1c4;
   --ink: #1f2633;
   --muted: #586173;
   --primary: #0a5f94;
   --primary-press: #084d79;
   --disabled: #9fa9b8;
+  --controls-height: 10dvh;
 }
 
 * {
@@ -16,7 +19,7 @@
 html,
 body {
   margin: 0;
-  min-height: 100%;
+  height: 100%;
 }
 
 body {
@@ -25,56 +28,106 @@ body {
   background:
     radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 44%),
     linear-gradient(140deg, var(--bg-1), var(--bg-2));
+  overflow: hidden;
 }
 
-.page-shell {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  padding: 1.25rem;
+.home-layout {
+  height: 100dvh;
+  width: 100%;
+  padding: 1rem;
+  padding-bottom: calc(var(--controls-height) + 1rem);
 }
 
-.player-card {
-  width: min(30rem, 100%);
-  border-radius: 1.25rem;
-  background: var(--card);
+.website-zone {
+  height: calc(100dvh - var(--controls-height) - 1rem);
+  max-height: 90dvh;
+  min-height: 0;
+}
+
+.website-panel {
+  height: 100%;
+  border-radius: 1rem;
+  border: 1px solid var(--panel-line);
+  background: var(--panel);
   box-shadow:
-    0 1.5rem 3rem rgba(18, 50, 73, 0.17),
-    inset 0 0.1rem 0.25rem rgba(255, 255, 255, 0.6);
-  padding: 1.4rem;
-  text-align: center;
-  animation: card-enter 420ms ease-out;
+    0 1.2rem 2.2rem rgba(18, 50, 73, 0.12),
+    inset 0 0.1rem 0.2rem rgba(255, 255, 255, 0.7);
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
 }
 
-.eyebrow {
+.website-panel__header {
+  border-bottom: 1px solid var(--panel-line);
+  padding: 0.75rem 1rem;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(247, 242, 233, 0.9));
+}
+
+.website-panel__label {
   margin: 0;
   text-transform: uppercase;
-  letter-spacing: 0.14em;
+  letter-spacing: 0.12em;
+  font-size: 0.68rem;
   font-weight: 700;
-  font-size: 0.72rem;
   color: var(--muted);
 }
 
-h1 {
-  margin: 0.4rem 0 0.6rem;
-  font-size: clamp(2rem, 8vw, 2.8rem);
-  line-height: 1.1;
+.website-panel__url {
+  margin: 0.25rem 0 0;
+  font-size: clamp(0.82rem, 2.2vw, 0.96rem);
+  color: var(--ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.status {
-  margin: 0 0 1.2rem;
-  color: var(--muted);
-  font-size: 1rem;
-  min-height: 1.3rem;
+.website-panel__content {
+  min-height: 0;
 }
 
-.controls {
+.website-panel__frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: #ffffff;
+}
+
+.radio-controls-wrap {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--controls-height);
+  padding: 0.5rem 1rem;
+  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
+  border-top: 1px solid rgba(28, 41, 62, 0.16);
+  background: linear-gradient(180deg, rgba(255, 250, 242, 0.95), rgba(239, 235, 225, 0.98));
+  backdrop-filter: blur(7px);
+}
+
+.radio-controls {
+  height: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
   display: grid;
-  gap: 0.75rem;
-  grid-template-columns: 1fr 1fr;
+  gap: 0.55rem;
+  grid-template-columns: 1fr auto;
+  align-items: center;
 }
 
-button {
+.radio-controls__status {
+  margin: 0;
+  color: var(--muted);
+  font-size: clamp(0.8rem, 2.2vw, 1rem);
+}
+
+.radio-controls__buttons {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 0.6rem;
+}
+
+.radio-controls button {
   appearance: none;
   border: none;
   border-radius: 0.7rem;
@@ -87,39 +140,47 @@ button {
   transition: transform 120ms ease, background 120ms ease;
 }
 
-button.playpause {
-  width: 100%;
-  aspect-ratio: 1;
-  font-size: clamp(2rem, 25vw, 6em);
+.radio-controls button.playpause {
+  width: clamp(2.9rem, 9vw, 4rem);
+  aspect-ratio: 1 / 1;
+  font-size: clamp(1.15rem, 4vw, 1.7rem);
   padding: 0;
 }
 
-button:hover:not(:disabled) {
+.radio-controls button:hover:not(:disabled) {
   background: var(--primary-press);
 }
 
-button:active:not(:disabled) {
+.radio-controls button:active:not(:disabled) {
   transform: translateY(1px);
 }
 
-button:disabled {
+.radio-controls button:disabled {
   cursor: not-allowed;
   background: var(--disabled);
 }
 
-@keyframes card-enter {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @media (max-width: 560px) {
-  .controls {
+  .home-layout {
+    padding: 0.65rem;
+    padding-bottom: calc(var(--controls-height) + 0.65rem);
+  }
+
+  .website-zone {
+    height: calc(100dvh - var(--controls-height) - 0.65rem);
+  }
+
+  .radio-controls-wrap {
+    padding-left: 0.65rem;
+    padding-right: 0.65rem;
+  }
+
+  .radio-controls {
     grid-template-columns: 1fr;
+    gap: 0.35rem;
+  }
+
+  .radio-controls__buttons {
+    justify-content: start;
   }
 }