new tools modules & sass opti

website/src/styles/_shell.scss

@@ -0,0 +1,185 @@
+.app-shell {
+  display: grid;
+  grid-template-columns: 248px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.sidebar {
+  position: sticky;
+  top: 0;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+  gap: var(--space-5);
+  padding: var(--space-5);
+  border-right: 1px solid var(--color-border);
+  background: rgba(11, 14, 27, 0.82);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: var(--font-size-lg);
+  font-weight: 800;
+}
+
+.brand-mark {
+  display: block;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  background: var(--gradient-brand);
+  filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.28));
+  mask: url("/static/icons/controller.svg") center / contain no-repeat;
+  -webkit-mask: url("/static/icons/controller.svg") center / contain no-repeat;
+  transition: transform 0.8s var(--ease-standard), filter var(--duration-normal) var(--ease-standard);
+}
+
+.brand:hover .brand-mark {
+  filter: drop-shadow(0 0 22px rgba(139, 92, 246, 0.42));
+  transform: rotate(360deg);
+}
+
+.nav {
+  display: grid;
+  gap: 8px;
+}
+
+.nav-item {
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  transition: var(--duration-normal) var(--ease-standard);
+}
+
+.nav-icon {
+  display: block;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  background: var(--color-accent-cyan);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 20px 20px;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 20px 20px;
+}
+
+.nav-icon-home {
+  mask-image: url("/static/icons/home.svg");
+  -webkit-mask-image: url("/static/icons/home.svg");
+}
+
+.nav-icon-toolbox {
+  mask-image: url("/static/icons/toolbox.svg");
+  -webkit-mask-image: url("/static/icons/toolbox.svg");
+}
+
+.nav-icon-controller {
+  mask-image: url("/static/icons/controller.svg");
+  -webkit-mask-image: url("/static/icons/controller.svg");
+}
+
+.nav-item strong {
+  color: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+}
+
+.nav-item:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.nav-item.active {
+  border-color: var(--color-primary-border);
+  background: var(--color-primary-soft);
+  box-shadow: inset 3px 0 0 var(--color-primary);
+  color: var(--color-text-primary);
+}
+
+.sidebar-note {
+  margin-top: auto;
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: rgba(16, 20, 38, 0.62);
+}
+
+.sidebar-note p {
+  margin: 10px 0 0;
+  font-size: var(--font-size-sm);
+}
+
+.sidebar-storage-actions {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: var(--space-4);
+}
+
+.sidebar-action-button {
+  display: inline-flex;
+}
+
+.content-shell {
+  display: flex;
+  min-height: 100vh;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  min-height: 68px;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: 0 var(--space-8);
+  border-bottom: 1px solid var(--color-border);
+  background: rgba(7, 9, 19, 0.78);
+  backdrop-filter: blur(18px);
+}
+
+.topbar strong {
+  font-size: var(--font-size-lg);
+}
+
+.topbar .eyebrow {
+  margin-bottom: 2px;
+}
+
+.topbar-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.toolbox-icon-button {
+  padding: 0;
+}
+
+.toolbox-icon-button img {
+  width: 21px;
+  height: 21px;
+  object-fit: contain;
+}
+
+main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: min(1600px, calc(100% - 64px));
+  margin: 0 auto;
+  padding: var(--space-8) 0 var(--space-12);
+}