:root {
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a {
    color:#0ea5e9;
    text-decoration:none;
    font-weight:600;
}

 body {
     margin: 24px;
     color: #0f172a;
     background: #f8fafc;
}
 .card {
     background: white;
     border-radius: 16px;
     box-shadow: 0 6px 24px rgba(2,6,23,.06);
     padding: 16px;
     width: 100vw - 32px;
}
 .toolbar {
     display: grid;
     gap: 12px;
     grid-template-columns: 1fr;
     margin-bottom: 16px;
}
 @media (min-width: 760px) {
     .toolbar {
         grid-template-columns: 1fr repeat(5, 1fr);
         align-items: end;
    }
}
 label {
     font-size: 12px;
     color: #475569;
     display: block;
     margin-bottom: 6px;
}
 input, select, button {
     width: 100%;
     padding: 10px 12px;
     border-radius: 10px;
     border: 1px solid #e2e8f0;
     background: #fff;
}
 input:focus, select:focus {
     outline: none;
     border-color: #94a3b8;
     box-shadow: 0 0 0 3px rgba(148,163,184,.2);
}
 .range {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
}
 table {
     width: 100%;
     border-collapse: collapse;
     background: white;
     overflow: hidden;
     border-radius: 12px;
}
 thead th {
     text-align: left;
     font-size: 12px;
     color: #64748b;
     padding: 12px;
     background: #f1f5f9;
}
 tbody td {
     padding: 12px;
     border-top: 1px solid #e2e8f0;
}
 .right {
     text-align: right;
}
 .muted {
     color: #64748b;
     font-size: 12px;
}
 .row {
     display: flex;
     gap: 8px;
     align-items: center;
     justify-content: space-between;
}
 .pill {
     font-size: 12px;
     background: #eef2ff;
     color: #3730a3;
     padding: 2px 8px;
     border-radius: 999px;
}
 .footer {
     margin-top: 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .clear-btn, .copy-btn, .print-btn {
     width: auto;
     padding: 8px 12px;
     background: #0ea5e9;
     color:#fff;
     border:0;
     border-radius: 10px;
     cursor:pointer;
}
 .clear-btn:disabled {
     opacity:.5;
     cursor: not-allowed;
}
 input[type="number"] {
     width: 10vw;
}
 .toolbar>div {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
}