| 1 | :root {
|
|---|
| 2 | --bg: #16181a;
|
|---|
| 3 | --card: #1f2224;
|
|---|
| 4 | --line: #33383b;
|
|---|
| 5 | --text: #e6e6e6;
|
|---|
| 6 | --muted: #9aa0a6;
|
|---|
| 7 | --accent: #8cc152;
|
|---|
| 8 | --warn: #e0a33e;
|
|---|
| 9 | font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|---|
| 10 | }
|
|---|
| 11 |
|
|---|
| 12 | * { box-sizing: border-box; }
|
|---|
| 13 |
|
|---|
| 14 | body {
|
|---|
| 15 | margin: 0;
|
|---|
| 16 | background: var(--bg);
|
|---|
| 17 | color: var(--text);
|
|---|
| 18 | }
|
|---|
| 19 |
|
|---|
| 20 | .app { max-width: 1000px; margin: 0 auto; padding: 24px 16px 64px; }
|
|---|
| 21 |
|
|---|
| 22 | header.top {
|
|---|
| 23 | display: flex; align-items: baseline; gap: 12px;
|
|---|
| 24 | border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px;
|
|---|
| 25 | }
|
|---|
| 26 | header.top h1 { margin: 0; font-size: 20px; color: var(--accent); }
|
|---|
| 27 | header.top .who { margin-left: auto; color: var(--muted); font-size: 14px; }
|
|---|
| 28 |
|
|---|
| 29 | nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
|
|---|
| 30 | nav button {
|
|---|
| 31 | background: var(--card); color: var(--text); border: 1px solid var(--line);
|
|---|
| 32 | padding: 7px 13px; border-radius: 6px; cursor: pointer; font-size: 14px;
|
|---|
| 33 | }
|
|---|
| 34 | nav button.active { border-color: var(--accent); color: var(--accent); }
|
|---|
| 35 |
|
|---|
| 36 | .card {
|
|---|
| 37 | background: var(--card); border: 1px solid var(--line);
|
|---|
| 38 | border-radius: 8px; padding: 14px; margin-bottom: 12px;
|
|---|
| 39 | }
|
|---|
| 40 | .card h3 { margin: 0 0 8px; font-size: 15px; }
|
|---|
| 41 |
|
|---|
| 42 | .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|---|
| 43 | .muted { color: var(--muted); font-size: 13px; }
|
|---|
| 44 | .kcal { color: var(--warn); font-weight: 600; }
|
|---|
| 45 |
|
|---|
| 46 | input, select, textarea {
|
|---|
| 47 | background: #14171a; color: var(--text); border: 1px solid var(--line);
|
|---|
| 48 | border-radius: 6px; padding: 7px 9px; font-size: 14px; font-family: inherit;
|
|---|
| 49 | }
|
|---|
| 50 | button.primary {
|
|---|
| 51 | background: var(--accent); color: #11210a; border: none;
|
|---|
| 52 | padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600;
|
|---|
| 53 | }
|
|---|
| 54 | button.small {
|
|---|
| 55 | background: transparent; color: var(--muted); border: 1px solid var(--line);
|
|---|
| 56 | padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 12px;
|
|---|
| 57 | }
|
|---|
| 58 |
|
|---|
| 59 | table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
|---|
| 60 | th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
|
|---|
| 61 | th { color: var(--muted); font-weight: 500; }
|
|---|
| 62 |
|
|---|
| 63 | .error {
|
|---|
| 64 | background: #3b1f1f; border: 1px solid #7a3b3b; color: #f0b5b5;
|
|---|
| 65 | padding: 9px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 14px;
|
|---|
| 66 | }
|
|---|
| 67 | .stack { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
|
|---|
