:root {
     --bg: #0b0d10;
     --panel: #12161b;
     --text: #e6edf3;
     --muted: #8b949e;
     --accent: #4f46e5;
     --border: #263241;
 }

 body {
     margin: 0;
     background: var(--bg);
     color: var(--text);
     font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
 }

 .grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 14px;
 }

 @media (min-width: 900px) {
     .grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .card {
     background: var(--panel);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 14px;
 }

 .card h2 {
     font-size: 15px;
     margin: 0 0 10px;
 }

 .chip {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     border: 1px solid var(--border);
     border-radius: 999px;
     padding: 6px 10px;
     user-select: none;
 }

 .muted {
     color: var(--muted);
 }

 input[type="date"],
 input[type="number"],
 select,
 button {
     background: #0f1318;
     color: var(--text);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 6px 8px;
 }

 button {
     cursor: pointer;
 }

 button.ghost {
     background: transparent;
 }