Add multi-file playground imports

site/decodal-site/src/style.css

@@ -49,6 +49,10 @@ a:hover {
   min-height: calc(100vh - 56px);
 }
 
+.playground-layout {
+  display: block;
+}
+
 .sidebar {
   background: #ffffff;
   border-right: 1px solid #e5e7eb;
@@ -94,7 +98,7 @@ main {
 }
 
 main.playground {
-  padding: 24px;
+  padding: 10px;
 }
 
 .markdown {
@@ -162,25 +166,41 @@ main.playground {
 }
 
 .playground-page {
-  height: calc(100vh - 104px);
+  height: calc(100vh - 76px);
 }
 
 .playground-header {
   align-items: center;
   display: flex;
+  gap: 16px;
   justify-content: space-between;
-  margin-bottom: 18px;
+  margin-bottom: 8px;
 }
 
 .playground-header h1 {
-  margin: 0 0 4px;
+  font-size: 20px;
+  margin: 0 0 2px;
 }
 
 .playground-header p {
   color: #4b5563;
+  font-size: 13px;
   margin: 0;
 }
 
+.playground-header code {
+  background: #eef2ff;
+  border-radius: 4px;
+  color: #3730a3;
+  padding: 1px 4px;
+}
+
+.playground-actions {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+}
+
 button {
   background: #2563eb;
   border: 0;
@@ -188,7 +208,7 @@ button {
   color: white;
   cursor: pointer;
   font-weight: 700;
-  padding: 10px 18px;
+  padding: 8px 14px;
 }
 
 button:disabled {
@@ -196,32 +216,103 @@ button:disabled {
   opacity: 0.5;
 }
 
-.playground-grid {
+.playground-shell {
   display: grid;
-  gap: 16px;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  height: calc(100% - 82px);
+  gap: 10px;
+  grid-template-columns: 220px minmax(360px, 1.25fr) minmax(320px, 1fr);
+  height: calc(100% - 52px);
+  min-height: 0;
 }
 
+.file-panel,
 .pane {
   background: white;
   border: 1px solid #e5e7eb;
-  border-radius: 12px;
+  border-radius: 10px;
   display: flex;
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
 }
 
+.panel-header,
 .pane > span {
+  align-items: center;
   border-bottom: 1px solid #e5e7eb;
   color: #374151;
+  display: flex;
   font-size: 13px;
   font-weight: 700;
-  padding: 10px 12px;
+  justify-content: space-between;
+  min-height: 38px;
+  padding: 0 10px;
   text-transform: uppercase;
 }
 
+.panel-header button {
+  font-size: 12px;
+  padding: 5px 8px;
+  text-transform: none;
+}
+
+.file-tree {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+}
+
+.file-tree ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 12px;
+}
+
+.file-tree > ul {
+  padding-left: 0;
+}
+
+.file-tree li {
+  margin: 2px 0;
+}
+
+.file-tree .folder {
+  color: #64748b;
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 4px 6px;
+}
+
+.file-tree .file {
+  background: transparent;
+  border-radius: 6px;
+  color: #334155;
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 5px 7px;
+  text-align: left;
+  width: 100%;
+}
+
+.file-tree .file:hover,
+.file-tree .file.active {
+  background: #dbeafe;
+  color: #1d4ed8;
+  text-decoration: none;
+}
+
+.danger-button {
+  background: transparent;
+  border-top: 1px solid #e5e7eb;
+  border-radius: 0;
+  color: #b91c1c;
+  padding: 9px 10px;
+  text-align: left;
+}
+
 .editor-wrap {
   background: #0f172a;
   flex: 1;
@@ -237,7 +328,7 @@ button:disabled {
   inset: 0;
   margin: 0;
   overflow: auto;
-  padding: 14px;
+  padding: 12px;
   position: absolute;
   tab-size: 2;
   white-space: pre;
@@ -273,6 +364,9 @@ button:disabled {
 
 .status {
   color: #4b5563;
+  font-size: 13px;
+  margin: 0;
+  white-space: nowrap;
 }
 
 @media (max-width: 900px) {