.data-client{--dc-gold:#9e6516;--dc-bg:#fff;--dc-muted:#e8e8e8;--dc-line:#dcdcdc;--dc-text:#111;--dc-sunday:#fff0f4;box-sizing:border-box;width:100%;max-width:900px;min-width:0;container-type:inline-size;margin:0 auto 24px;border:1px solid #caa35e;border-radius:15px;overflow:hidden;background:var(--dc-bg);color:var(--dc-text);font-family:Arial,sans-serif;font-size:15px;line-height:1.4}
.data-client *{box-sizing:border-box;font-family:Arial,sans-serif}
.data-client [hidden]{display:none!important}
.data-client.dc-dark{--dc-bg:#191b20;--dc-muted:#292c33;--dc-line:#41444b;--dc-text:#f3f3f3;--dc-sunday:#38252e;--dc-gold:#dfa74f}
.data-client .dc-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:17px 25px;background:var(--dc-muted);border-bottom:1px solid var(--dc-line)}
.data-client .dc-header h2{margin:0;padding:0;color:var(--dc-gold);font:700 25px/1.4 Arial,sans-serif;letter-spacing:normal;overflow-wrap:anywhere;flex:1 1 140px}
.data-client button{cursor:pointer;font-family:inherit;box-shadow:none;text-transform:none;letter-spacing:normal;min-height:0;margin:0}
.data-client .dc-theme{border:0;border-radius:30px;background:#9e6516;color:#fff;white-space:nowrap;font-size:13px;font-weight:700;padding:9px 17px;line-height:1.4}
.data-client .dc-title{margin:0;padding:19px 12px;color:var(--dc-gold);text-align:center;font:700 25px/1.25 Arial,sans-serif;letter-spacing:normal;overflow-wrap:anywhere;border-bottom:2px solid #9e6516}
.data-client .dc-tabs{display:flex;background:var(--dc-muted)}
.data-client .dc-tabs button{width:50%;border:0;border-right:1px solid var(--dc-line);border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--dc-gold);font-size:14px;font-weight:700;padding:14px 6px;line-height:1.3}
.data-client .dc-tabs button:last-child{border-right:0}
.data-client .dc-tabs button.is-active{border-bottom-color:#9e6516;background:var(--dc-bg)}
.data-client .dc-filter{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:12px;background:var(--dc-muted);border-bottom:1px solid var(--dc-line);color:var(--dc-gold);font-size:14px;font-weight:700;margin:0}
.data-client .dc-year{width:auto;max-width:100%;height:auto;margin:0;padding:8px 18px;border:1px solid #9e6516;border-radius:5px;background:var(--dc-bg);color:var(--dc-text);font:700 16px/1.4 Arial,sans-serif;appearance:auto}
.data-client .dc-content{padding:13px}
.data-client [data-dc-panel=weekly] .dc-content{padding-top:25px}
.data-client .dc-caption{text-align:center;background:#966119;color:#fff;font-weight:700;font-size:15px;padding:11px 6px}
.data-client .dc-scroll{overflow-x:auto;border:1px solid var(--dc-line);border-radius:0 0 10px 10px;-webkit-overflow-scrolling:touch}
.data-client .dc-table{width:100%;border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;color:var(--dc-text);background:var(--dc-bg);font-size:16px}
.data-client .dc-table th,.data-client .dc-table td{border:0;border-right:1px solid var(--dc-line);border-bottom:1px solid var(--dc-line);padding:12px 4px;text-align:center;vertical-align:middle;line-height:1.4}
.data-client .dc-table th{background:var(--dc-muted);color:var(--dc-gold);font-size:14px;font-weight:700}
.data-client .dc-weekly td{font-weight:700;height:47px}
.data-client .dc-table .dc-sunday{color:#ed1427;background:var(--dc-sunday)}
.data-client .dc-table th.dc-sunday{background:var(--dc-muted)}
.data-client [data-dc-panel=daily] .dc-scroll{margin-top:12px;border-radius:10px}.data-client .dc-daily{margin:0}
.data-client .dc-daily th:nth-child(1){width:20%}
.data-client .dc-daily th:nth-child(2){width:16%}
.data-client .dc-daily td{height:61px;color:var(--dc-gold);font-size:14px;font-weight:700;padding:10px 4px}
.data-client .dc-daily .dc-sunday td{color:#ed1427}
.data-client .dc-balls{display:flex;align-items:center;justify-content:center;gap:5px}
.data-client .dc-ball{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:clamp(18px,6cqi,40px);height:clamp(18px,6cqi,40px);border-radius:50%;color:#fff;background:radial-gradient(circle at 32% 20%,#ff7d7d 0%,#eb1717 36%,#c00000 62%,#430000 100%);box-shadow:0 3px 5px #0005;font:700 clamp(13px,3.5cqi,23px)/1 Arial,sans-serif}
.data-client button:focus-visible,.data-client select:focus-visible{outline:3px solid #2684ff;outline-offset:-3px}
.data-client .dc-table tr>*:last-child{border-right:0}
.data-client .dc-table tbody tr:last-child td{border-bottom:0}
.data-client .dc-table td{font-variant-numeric:tabular-nums;letter-spacing:normal}
.data-client .dc-weekly td{white-space:nowrap}
.data-client .dc-daily td:first-child,.data-client .dc-daily td:nth-child(2){white-space:nowrap}
.data-client .dc-caption{border-radius:8px 8px 0 0}
.data-client .dc-balls{gap:clamp(2px,.8cqi,5px)}
.data-client .dc-theme,.data-client .dc-tabs button,.data-client .dc-year{min-height:44px}
@media(max-width:600px){
    .data-client{border-radius:12px;font-size:13px}
    .data-client .dc-header{padding:12px;gap:8px}
    .data-client .dc-header h2{font-size:18px}
    .data-client .dc-theme{font-size:11px;padding:8px 12px}
    .data-client .dc-title{font-size:20px;padding:16px 10px}
    .data-client .dc-tabs button{font-size:12px;padding:12px 4px}
    .data-client .dc-filter{gap:8px;padding:10px;font-size:12px}
    .data-client .dc-year{font-size:14px;padding:7px 10px}
    .data-client .dc-content,.data-client [data-dc-panel=weekly] .dc-content{padding:12px 8px}
    .data-client .dc-caption{font-size:12px;padding:10px 5px}
    .data-client .dc-table{font-size:12px}
    .data-client .dc-table th{font-size:11px;padding:10px 2px}
    .data-client .dc-weekly td{height:42px;padding:10px 1px;font-size:clamp(9px,3cqi,13px)}
    .data-client .dc-daily th:nth-child(1){width:25%}
    .data-client .dc-daily th:nth-child(2){width:20%}
    .data-client .dc-daily td{height:52px;font-size:clamp(9px,2.7cqi,12px);padding:9px 2px}
    .data-client .dc-ball{width:clamp(16px,5.9cqi,30px);height:clamp(16px,5.9cqi,30px);font-size:clamp(11px,3.5cqi,18px)}
}
/* Also fit widgets embedded in narrow columns on otherwise wide pages. */
@container(max-width:420px){
    .data-client .dc-header{padding:12px;gap:8px}
    .data-client .dc-header h2{font-size:18px}
    .data-client .dc-theme{font-size:10px;padding:8px 10px}
    .data-client .dc-title{font-size:20px;padding:16px 10px}
    .data-client .dc-tabs button{font-size:11px;padding:12px 3px}
    .data-client .dc-content,.data-client [data-dc-panel=weekly] .dc-content{padding:12px 6px}
    .data-client .dc-caption{font-size:12px}
    .data-client .dc-table th{font-size:10px;padding:10px 1px}
    .data-client .dc-weekly td{font-size:clamp(9px,3cqi,12px);padding:10px 1px;height:42px}
    .data-client .dc-daily th:nth-child(1){width:25%}
    .data-client .dc-daily th:nth-child(2){width:20%}
    .data-client .dc-daily td{font-size:clamp(9px,2.7cqi,11px);padding:9px 2px;height:52px}
    .data-client .dc-ball{width:clamp(16px,5.9cqi,25px);height:clamp(16px,5.9cqi,25px);font-size:clamp(11px,3.5cqi,16px)}
}