push

openenv-polypharmacy/frontend/src/App.jsx

@@ -240,6 +240,7 @@ export default function App() {
       <header className="topbar glass">
         <div className="title-wrap">
           <h1>Polypharmacy Control Center</h1>
+          <p>Metaverse Clinical Ops Console</p>
         </div>
         <div className={`status-chip ${hasValidEpisode ? "live" : "idle"}`}>
           {hasValidEpisode ? "Session Live" : "Waiting for reset"}

openenv-polypharmacy/frontend/src/styles.css

@@ -1,15 +1,18 @@
 :root {
-  --bg: #eef5ff;
-  --panel: rgba(255, 255, 255, 0.82);
-  --panel-solid: #ffffff;
-  --text: #0b2445;
-  --muted: #5b7596;
-  --primary: #1f8bff;
-  --primary-2: #69beff;
-  --accent: #0dd3ff;
-  --border: rgba(93, 156, 219, 0.22);
-  --shadow: 0 20px 50px rgba(25, 83, 143, 0.12);
-  --shadow-strong: 0 20px 42px rgba(31, 112, 182, 0.24);
+  --bg: #070814;
+  --bg-layer: #0a1026;
+  --panel: rgba(14, 22, 44, 0.72);
+  --panel-solid: rgba(20, 28, 52, 0.92);
+  --text: #e8f1ff;
+  --muted: #9ab2db;
+  --primary: #37d4ff;
+  --primary-2: #5a8dff;
+  --accent: #9d59ff;
+  --success: #6dfbcf;
+  --border: rgba(122, 162, 255, 0.28);
+  --line: rgba(109, 143, 225, 0.18);
+  --shadow: 0 16px 45px rgba(5, 8, 23, 0.6);
+  --shadow-strong: 0 14px 32px rgba(44, 105, 255, 0.4);
 }
 
 * {
@@ -18,156 +21,197 @@
 
 body {
   margin: 0;
-  font-family: "Inter", "SF Pro Text", "Segoe UI", sans-serif;
-  background:
-    radial-gradient(circle at 8% 0%, #cce7ff 0%, rgba(204, 231, 255, 0) 42%),
-    radial-gradient(circle at 92% 100%, #d5efff 0%, rgba(213, 239, 255, 0) 42%),
-    var(--bg);
   color: var(--text);
+  font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", sans-serif;
+  background:
+    radial-gradient(circle at 8% 12%, rgba(121, 87, 255, 0.22), transparent 38%),
+    radial-gradient(circle at 88% 20%, rgba(59, 204, 255, 0.26), transparent 34%),
+    radial-gradient(circle at 50% 100%, rgba(43, 128, 255, 0.26), transparent 40%),
+    linear-gradient(145deg, var(--bg) 0%, var(--bg-layer) 60%, #04060f 100%);
+  background-attachment: fixed;
 }
 
 .shell {
   min-height: 100vh;
   position: relative;
-  padding: 28px 22px;
   overflow: hidden;
+  padding: 24px 16px 34px;
 }
 
 .container {
-  width: min(1300px, 100%);
+  width: min(1320px, 100%);
   margin: 0 auto;
   position: relative;
-  z-index: 1;
+  z-index: 2;
 }
 
 .bg-orb {
   position: absolute;
   border-radius: 50%;
-  filter: blur(18px);
+  pointer-events: none;
   opacity: 0.9;
+  filter: blur(18px);
 }
+
 .orb-a {
-  width: 420px;
-  height: 420px;
-  right: -120px;
-  top: -100px;
-  background: radial-gradient(circle, rgba(72, 168, 255, 0.5), rgba(72, 168, 255, 0.1));
+  width: min(46vw, 530px);
+  aspect-ratio: 1 / 1;
+  right: -9%;
+  top: -10%;
+  background: radial-gradient(circle, rgba(52, 203, 255, 0.35), rgba(52, 203, 255, 0.04) 70%);
 }
+
 .orb-b {
-  width: 360px;
-  height: 360px;
-  left: -100px;
-  bottom: -120px;
-  background: radial-gradient(circle, rgba(110, 200, 255, 0.4), rgba(141, 205, 255, 0.06));
+  width: min(40vw, 460px);
+  aspect-ratio: 1 / 1;
+  left: -9%;
+  bottom: -15%;
+  background: radial-gradient(circle, rgba(160, 102, 255, 0.3), rgba(160, 102, 255, 0.06) 72%);
 }
 
 .glass {
-  backdrop-filter: blur(12px);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
+    var(--panel);
   border: 1px solid var(--border);
-  background: var(--panel);
   box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
 }
 
 .topbar {
-  border-radius: 20px;
-  padding: 18px;
+  border-radius: 24px;
+  padding: clamp(14px, 2vw, 20px);
   display: grid;
-  grid-template-columns: 1.2fr auto 1fr;
-  justify-content: space-between;
+  gap: 12px 16px;
+  grid-template-columns: minmax(220px, 1.2fr) auto minmax(280px, 1fr);
   align-items: center;
-  gap: 12px;
 }
 
 .title-wrap h1 {
   margin: 0;
-  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
-  letter-spacing: 0.01em;
+  font-size: clamp(1.15rem, 2.2vw, 1.95rem);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: 0 0 16px rgba(106, 192, 255, 0.3);
 }
 
 .title-wrap p {
-  margin: 4px 0 0;
+  margin: 6px 0 0;
+  font-size: 0.84rem;
   color: var(--muted);
-  font-size: 0.92rem;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
 }
 
 .status-chip {
   justify-self: center;
+  padding: 7px 14px;
   border-radius: 999px;
-  padding: 7px 12px;
-  font-size: 0.76rem;
+  font-size: 0.72rem;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   border: 1px solid transparent;
 }
 
 .status-chip.live {
-  color: #0d6a3f;
-  background: rgba(130, 245, 195, 0.18);
-  border-color: rgba(70, 199, 142, 0.3);
+  color: #052c24;
+  background: linear-gradient(90deg, rgba(126, 255, 220, 0.9), rgba(84, 244, 196, 0.95));
+  box-shadow: 0 0 14px rgba(96, 244, 198, 0.36);
 }
 
 .status-chip.idle {
-  color: #24527f;
-  background: rgba(114, 194, 255, 0.18);
-  border-color: rgba(62, 152, 223, 0.28);
+  color: #d8e8ff;
+  border-color: rgba(117, 186, 255, 0.48);
+  background: rgba(60, 106, 198, 0.25);
 }
 
 .actions {
   display: flex;
   justify-content: flex-end;
-  gap: 10px;
   flex-wrap: wrap;
+  gap: 10px;
 }
 
 button,
 select,
 input {
-  border: 1px solid var(--border);
+  width: 100%;
+  min-height: 42px;
   border-radius: 12px;
-  padding: 10px 13px;
+  border: 1px solid var(--border);
   font-size: 0.92rem;
-  background: #fff;
+  padding: 10px 12px;
   color: var(--text);
-  min-height: 42px;
+  background: rgba(11, 19, 38, 0.84);
+}
+
+select,
+input {
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+select:focus,
+input:focus {
+  outline: none;
+  border-color: rgba(119, 200, 255, 0.88);
+  box-shadow: 0 0 0 2px rgba(95, 187, 255, 0.18);
 }
 
 button {
   cursor: pointer;
-  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 78%, var(--accent) 100%);
-  color: #fff;
-  border: none;
+  border: 0;
+  width: auto;
   font-weight: 700;
+  letter-spacing: 0.02em;
+  background: linear-gradient(135deg, var(--primary), var(--primary-2) 55%, var(--accent));
   box-shadow: var(--shadow-strong);
-  transition: transform 120ms ease, filter 120ms ease;
+  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
 }
 
 button:hover {
   transform: translateY(-1px);
-  filter: brightness(1.02);
+  filter: brightness(1.04);
+  box-shadow: 0 18px 32px rgba(50, 141, 255, 0.48);
+}
+
+button:active {
+  transform: translateY(0);
 }
 
 button.secondary {
-  background: linear-gradient(135deg, #68c2ff, #9dd9ff);
+  background: linear-gradient(135deg, rgba(95, 185, 255, 0.9), rgba(154, 102, 255, 0.86));
 }
 
 button:disabled {
-  opacity: 0.58;
+  opacity: 0.56;
   cursor: not-allowed;
+  filter: grayscale(0.2);
+  box-shadow: none;
   transform: none;
 }
 
 .layout {
-  margin-top: 18px;
+  margin-top: 16px;
   display: grid;
-  gap: 16px;
-  grid-template-columns: 1.15fr 0.85fr;
+  gap: 14px;
+  grid-template-columns: 1.12fr 0.88fr;
   align-items: start;
 }
 
 .panel {
-  border-radius: 18px;
-  padding: 18px;
+  border-radius: 20px;
+  padding: clamp(14px, 1.8vw, 20px);
+  position: relative;
+}
+
+.panel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid var(--line);
+  pointer-events: none;
 }
 
 .panel-wide {
@@ -177,31 +221,36 @@ button:disabled {
 .panel h2 {
   margin: 0 0 12px;
   font-size: 1rem;
-  letter-spacing: 0.01em;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
 .kpi-grid {
   display: grid;
+  gap: 10px;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
 }
 
 .kpi-grid div {
-  background: rgba(255, 255, 255, 0.9);
+  border-radius: 13px;
   border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 12px;
+  background: var(--panel-solid);
+  padding: 11px 12px;
 }
 
 .kpi-grid span {
   display: block;
-  font-size: 0.74rem;
-  color: var(--muted);
   margin-bottom: 4px;
+  font-size: 0.72rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .kpi-grid strong {
-  font-size: 1.05rem;
+  font-size: 1.06rem;
+  line-height: 1.2;
 }
 
 .action-row,
@@ -211,6 +260,13 @@ button:disabled {
   margin-bottom: 12px;
 }
 
+.action-row label {
+  color: var(--muted);
+  font-size: 0.78rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
 .stack-two {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -219,22 +275,22 @@ button:disabled {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
-  max-height: 420px;
+  max-height: 430px;
   overflow: auto;
-  padding-right: 2px;
+  padding-right: 4px;
 }
 
 .med-card {
-  border: 1px solid var(--border);
   border-radius: 14px;
-  padding: 12px;
+  border: 1px solid var(--border);
   background: var(--panel-solid);
-  transition: transform 120ms ease, box-shadow 120ms ease;
+  padding: 11px 12px;
+  transition: transform 130ms ease, border-color 130ms ease;
 }
 
 .med-card:hover {
   transform: translateY(-1px);
-  box-shadow: 0 10px 25px rgba(44, 105, 165, 0.12);
+  border-color: rgba(109, 224, 255, 0.72);
 }
 
 .med-card p {
@@ -243,37 +299,42 @@ button:disabled {
   text-transform: capitalize;
 }
 
+.med-card small {
+  color: #c7d9ff;
+}
+
 .logs {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
-  font-size: 0.85rem;
   max-height: 300px;
   overflow: auto;
+  padding-right: 4px;
   display: grid;
-  gap: 6px;
-  padding-right: 2px;
+  gap: 7px;
+  font-size: 0.84rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
 }
 
 .logs div {
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid var(--border);
   border-radius: 10px;
+  border: 1px solid var(--border);
+  background: rgba(10, 16, 31, 0.84);
   padding: 8px 10px;
+  color: #dbebff;
 }
 
 .muted {
-  color: var(--muted);
   margin: 0;
+  color: var(--muted);
 }
 
 .budget-note {
   margin-top: 10px;
-  padding: 10px 12px;
   border: 1px solid var(--border);
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.78);
+  padding: 10px 12px;
+  background: rgba(13, 22, 42, 0.82);
 }
 
-@media (max-width: 1120px) {
+@media (max-width: 1180px) {
   .layout {
     grid-template-columns: 1fr;
   }
@@ -293,7 +354,21 @@ button:disabled {
 
 @media (max-width: 760px) {
   .shell {
-    padding: 18px 12px;
+    padding: 14px 10px 24px;
+  }
+
+  .topbar,
+  .panel {
+    border-radius: 16px;
+  }
+
+  .actions {
+    width: 100%;
+  }
+
+  .actions button,
+  .actions select {
+    width: 100%;
   }
 
   .kpi-grid,
@@ -301,4 +376,8 @@ button:disabled {
   .stack-two {
     grid-template-columns: 1fr;
   }
+
+  .logs {
+    max-height: 240px;
+  }
 }