admin mode

frontend/src/styles.css

@@ -96,6 +96,85 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .today-card p {
   margin: 0 0 0.75rem;
 }
+.admin-program-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  border: 1px solid #dbeafe;
+  border-radius: 16px;
+  background: #f8fbff;
+  padding: 0.85rem;
+}
+.admin-program-panel h3,
+.admin-program-panel p {
+  margin: 0;
+}
+.admin-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 0;
+  overflow-y: auto;
+}
+.admin-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 1rem;
+}
+.admin-header h1,
+.admin-header p,
+.admin-detail h2,
+.admin-detail p,
+.admin-empty h2,
+.admin-empty p,
+.admin-preview h2 {
+  margin: 0;
+}
+.admin-header span {
+  color: #64748b;
+  white-space: nowrap;
+}
+.admin-detail {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+.admin-student-card,
+.admin-empty {
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background: #f8fafc;
+  padding: 1rem;
+}
+.admin-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.admin-asset-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+}
+.admin-asset-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background: #f8fafc;
+  padding: 0.75rem;
+}
+.admin-asset-card img {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: contain;
+  border-radius: 12px;
+  background: white;
+}
 .session-user {
   margin-left: auto;
   display: flex;
@@ -382,6 +461,24 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   font-size: clamp(1rem, 2.2vw, 1.35rem);
   line-height: 1.5;
 }
+.lesson-assets {
+  min-height: 0;
+  flex: 1 1 auto;
+  display: flex;
+  gap: 0.75rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 0.25rem;
+}
+.lesson-assets img {
+  width: min(100%, 720px);
+  max-height: 100%;
+  flex: 0 0 min(100%, 720px);
+  object-fit: contain;
+  border: 1px solid #dbeafe;
+  border-radius: 14px;
+  background: white;
+}
 .lesson-bubble {
   min-height: 68px;
 }
@@ -471,6 +568,15 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
     justify-content: space-between;
   }
 
+  .admin-header,
+  .admin-detail {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-header {
+    flex-direction: column;
+  }
+
   .instruction-stage {
     flex: 0 0 auto;
     justify-content: flex-start;