Create styles.css

styles.css

@@ -0,0 +1,133 @@
+:root {
+  color-scheme: dark;
+  --bg: #0b1020;
+  --panel: #121936;
+  --text: #ebf0ff;
+  --accent: #6ea8fe;
+  --border: #2f3f7a;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+body {
+  margin: 0;
+  background: radial-gradient(circle at top, #162147, var(--bg));
+  color: var(--text);
+}
+
+.topbar,
+footer {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.layout {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem 1rem;
+  display: grid;
+  grid-template-columns: 340px 1fr;
+  gap: 1rem;
+}
+
+.panel {
+  background: color-mix(in srgb, var(--panel) 90%, black);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 1rem;
+}
+
+.settings label {
+  display: grid;
+  gap: 0.5rem;
+  margin-bottom: 0.8rem;
+}
+
+input,
+select,
+textarea,
+button {
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: #0d1530;
+  color: var(--text);
+  padding: 0.65rem;
+}
+
+button {
+  background: linear-gradient(90deg, #3857dc, #5b8cff);
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.tabs {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.tab {
+  opacity: 0.65;
+}
+
+.tab.active {
+  opacity: 1;
+  outline: 2px solid var(--accent);
+}
+
+.tab-panel {
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
+.output {
+  min-height: 150px;
+  white-space: pre-wrap;
+  background: #070d1f;
+  padding: 0.75rem;
+  border-radius: 10px;
+  border: 1px solid #1f2d63;
+}
+
+.hint {
+  font-size: 0.85rem;
+  opacity: 0.8;
+}
+
+@media (max-width: 980px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  .tabs {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+
+.inline-control {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.inline-control input[type="checkbox"] {
+  width: auto;
+}