dasdasd

modules/mining-checker/assets/css/app.css

@@ -36,6 +36,87 @@
   padding: 0;
 }
 
+#mining-checker-app .mc-app-shell {
+  display: grid;
+  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+#mining-checker-app .mc-sidebar,
+#mining-checker-app .mc-hero-panel {
+  border: 1px solid var(--mc-line);
+  border-radius: 18px;
+  background: var(--mc-surface);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
+}
+
+#mining-checker-app .mc-sidebar {
+  padding: 20px;
+  display: grid;
+  gap: 18px;
+  position: sticky;
+  top: 0;
+}
+
+#mining-checker-app .mc-sidebar-brand,
+#mining-checker-app .mc-nav-list,
+#mining-checker-app .mc-main {
+  display: grid;
+  gap: 14px;
+}
+
+#mining-checker-app .mc-sidebar-title {
+  font-size: 1.35rem;
+}
+
+#mining-checker-app .mc-nav-button {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  padding: 14px 16px;
+  text-align: left;
+  border-radius: 16px;
+  border: 1px solid var(--mc-line);
+  background: #fff;
+  color: var(--mc-text);
+  cursor: pointer;
+  transition: 160ms ease;
+}
+
+#mining-checker-app .mc-nav-button:hover {
+  border-color: var(--mc-line-strong);
+  transform: translateY(-1px);
+}
+
+#mining-checker-app .mc-nav-button.is-active {
+  border-color: var(--mc-accent);
+  background: #eff6ff;
+  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
+}
+
+#mining-checker-app .mc-nav-button strong {
+  color: var(--mc-text);
+}
+
+#mining-checker-app .mc-nav-meta {
+  font-size: 0.85rem;
+  line-height: 1.45;
+  color: var(--mc-text-muted);
+}
+
+#mining-checker-app .mc-hero-panel {
+  padding: 20px 22px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+#mining-checker-app .mc-inline-row--wrap {
+  flex-wrap: wrap;
+}
+
 #mining-checker-app .mc-stack {
   display: grid;
   gap: 16px;
@@ -260,6 +341,20 @@
   font-weight: 700;
 }
 
+@media (max-width: 980px) {
+  #mining-checker-app .mc-app-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  #mining-checker-app .mc-sidebar {
+    position: static;
+  }
+
+  #mining-checker-app .mc-hero-panel {
+    flex-direction: column;
+  }
+}
+
 #mining-checker-app .mc-button--secondary {
   background: #ffffff;
   border-color: #cbd5e1;