baa-conductor

controller.css

  1:root {
  2  --bg: #f3efe3;
  3  --panel: rgba(255, 251, 240, 0.92);
  4  --ink: #1b1b1b;
  5  --muted: #625e52;
  6  --line: rgba(27, 27, 27, 0.14);
  7  --accent: #1f6f5f;
  8  --warn: #a6512f;
  9  --off: #7f7a70;
 10}
 11
 12* {
 13  box-sizing: border-box;
 14}
 15
 16body {
 17  margin: 0;
 18  min-height: 100vh;
 19  color: var(--ink);
 20  background:
 21    radial-gradient(circle at top left, rgba(31, 111, 95, 0.18), transparent 35%),
 22    radial-gradient(circle at top right, rgba(166, 81, 47, 0.18), transparent 28%),
 23    linear-gradient(180deg, #faf6ea 0%, var(--bg) 100%);
 24  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
 25}
 26
 27.shell {
 28  max-width: 1120px;
 29  margin: 0 auto;
 30  padding: 24px;
 31}
 32
 33.topbar {
 34  display: flex;
 35  gap: 16px;
 36  align-items: end;
 37  margin-bottom: 18px;
 38}
 39
 40.eyebrow {
 41  margin: 0 0 4px;
 42  font-size: 12px;
 43  text-transform: uppercase;
 44  letter-spacing: 0.18em;
 45  color: var(--muted);
 46}
 47
 48h1, h2, p {
 49  margin: 0;
 50}
 51
 52h1 {
 53  font-size: 42px;
 54  line-height: 1;
 55}
 56
 57h2 {
 58  font-size: 18px;
 59}
 60
 61.actions,
 62.settings {
 63  display: flex;
 64  gap: 10px;
 65  align-items: center;
 66  flex-wrap: wrap;
 67}
 68
 69.actions {
 70  margin-bottom: 18px;
 71  padding: 14px;
 72  border: 1px solid var(--line);
 73  border-radius: 18px;
 74  background: var(--panel);
 75  backdrop-filter: blur(12px);
 76}
 77
 78label {
 79  font-size: 13px;
 80  color: var(--muted);
 81}
 82
 83input,
 84button {
 85  font: inherit;
 86}
 87
 88input {
 89  min-width: 320px;
 90  padding: 10px 12px;
 91  border-radius: 999px;
 92  border: 1px solid var(--line);
 93  background: rgba(255, 255, 255, 0.72);
 94  color: var(--ink);
 95}
 96
 97button {
 98  padding: 10px 14px;
 99  border-radius: 999px;
100  border: 1px solid var(--line);
101  background: #fffdf6;
102  color: var(--ink);
103  cursor: pointer;
104}
105
106button:hover {
107  border-color: rgba(27, 27, 27, 0.28);
108}
109
110.grid {
111  display: grid;
112  grid-template-columns: repeat(3, minmax(0, 1fr));
113  gap: 14px;
114  margin-bottom: 18px;
115}
116
117.card,
118.panel {
119  border: 1px solid var(--line);
120  border-radius: 20px;
121  background: var(--panel);
122  backdrop-filter: blur(12px);
123}
124
125.card {
126  padding: 18px;
127}
128
129.label {
130  font-size: 12px;
131  letter-spacing: 0.14em;
132  text-transform: uppercase;
133  color: var(--muted);
134}
135
136.value {
137  margin-top: 12px;
138  font-size: 28px;
139  line-height: 1;
140}
141
142.value.on {
143  color: var(--accent);
144}
145
146.value.warn {
147  color: var(--warn);
148}
149
150.value.off {
151  color: var(--off);
152}
153
154.meta {
155  margin-top: 10px;
156  font-size: 13px;
157  color: var(--muted);
158}
159
160.panel {
161  margin-bottom: 18px;
162  overflow: hidden;
163}
164
165.panel-head {
166  display: flex;
167  justify-content: space-between;
168  align-items: center;
169  padding: 16px 18px;
170  border-bottom: 1px solid var(--line);
171}
172
173.code {
174  margin: 0;
175  padding: 18px;
176  min-height: 100px;
177  max-height: 300px;
178  overflow: auto;
179  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
180  font-size: 12px;
181  line-height: 1.55;
182  white-space: pre-wrap;
183  word-break: break-word;
184}
185
186@media (max-width: 640px) {
187  .shell {
188    padding: 16px;
189  }
190
191  .topbar {
192    flex-direction: column;
193    align-items: start;
194  }
195
196  .grid {
197    grid-template-columns: 1fr;
198  }
199
200  input {
201    min-width: 0;
202    width: 100%;
203  }
204}