ui creation

src/styles/layout.css

@@ -0,0 +1,235 @@
+.app-shell {
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: 264px minmax(0, calc(100dvw - 264px));
+}
+
+.app-shell--sidebar-collapsed {
+  grid-template-columns: 76px minmax(0, calc(100dvw - 76px));
+}
+
+.sidebar {
+  position: sticky;
+  top: 0;
+  height: 100dvh;
+  padding: 20px 16px;
+  border-right: 1px solid var(--line);
+  background:
+    linear-gradient(180deg, rgba(15, 17, 21, 0.96), rgba(10, 13, 18, 0.92)),
+    var(--panel-strong);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 56px;
+  margin-bottom: 24px;
+}
+
+.brand img {
+  width: 38px;
+  height: 38px;
+  object-fit: contain;
+}
+
+.brand strong,
+.cloud-state strong {
+  display: block;
+  font-size: 0.96rem;
+}
+
+.brand span,
+.cloud-state span {
+  display: block;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.sidebar-toggle {
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: var(--radius);
+  background: rgba(2, 6, 23, 0.28);
+  color: #cbd5e1;
+  cursor: pointer;
+}
+
+.sidebar-toggle:hover {
+  border-color: var(--line-strong);
+  background: rgba(201, 122, 61, 0.12);
+}
+
+.app-shell--sidebar-collapsed .sidebar {
+  padding: 20px 12px;
+}
+
+.app-shell--sidebar-collapsed .brand {
+  justify-content: center;
+}
+
+.app-shell--sidebar-collapsed .brand img {
+  display: none;
+}
+
+.app-shell--sidebar-collapsed .brand__text,
+.app-shell--sidebar-collapsed .nav-label {
+  display: none;
+}
+
+.app-shell--sidebar-collapsed .sidebar-toggle {
+  margin-left: 0;
+}
+
+.app-shell--sidebar-collapsed .nav-item {
+  justify-content: center;
+  padding: 0;
+}
+
+.nav-list {
+  display: grid;
+  gap: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 42px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  color: #cbd5e1;
+  text-decoration: none;
+}
+
+.nav-item--button {
+  width: 100%;
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+}
+
+.nav-item:hover,
+.nav-item--active {
+  border-color: var(--line);
+  background: rgba(201, 122, 61, 0.11);
+  color: var(--text);
+}
+
+.sidebar-panel {
+  margin-top: 28px;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: rgba(201, 122, 61, 0.05);
+}
+
+.cloud-state {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.workspace {
+  min-width: 0;
+  height: 100dvh;
+  overflow: auto;
+  padding: 24px;
+}
+
+.workspace--archive,
+.workspace--equipment {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.workspace--equipment {
+  overflow: hidden;
+  padding: 14px;
+}
+
+.workspace--equipment .topbar {
+  flex: 0 0 auto;
+  margin-bottom: 12px;
+}
+
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 22px;
+}
+
+.topbar-actions,
+.toolbar,
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.topbar-actions {
+  justify-content: flex-end;
+}
+
+.edge-input input {
+  width: 150px;
+}
+
+@media (max-width: 1100px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .app-shell--sidebar-collapsed {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    position: static;
+    height: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .nav-list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 680px) {
+  .workspace {
+    padding: 16px;
+  }
+
+  .topbar,
+  .section-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .topbar-actions,
+  .toolbar {
+    justify-content: stretch;
+  }
+
+  .edge-input,
+  .edge-input input {
+    width: 100%;
+  }
+
+  .nav-list {
+    grid-template-columns: 1fr;
+  }
+}