.cl-wrapper { max-width:1200px; margin:0 auto; padding-top:10px; box-sizing:border-box; }
.cl-layout  { display:flex; gap:16px; align-items:flex-start; }
.cl-center  { flex:1 1 auto; min-width:0; }
.cl-ad { flex:0 0 160px; width:160px; }
.cl-ad .cl-ad-slot { width:160px; min-height:600px; background:#fafafa; border:1px dashed #d1d5db; border-radius:8px; display:flex; align-items:center; justify-content:center; font:500 12px/1.2 system-ui; color:#6b7280; }
@media (max-width:1024px){ .cl-ad-left{display:none;} .cl-ad-right{width:100%; flex:0 0 auto;} .cl-ad-right .cl-ad-slot{width:100%; min-height:120px;} }

.cl-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cl-title { margin:0;}
.cl-actions { display:flex; gap:8px; }
.cl-btn { padding:8px 8px; background:#0073eb; border-radius:6px; font: 500 15px / 1 system-ui; color:#ffffff; }
.cl-btn--primary { background:#0073eb; color:#fff; }

.cl-cal-wrap { border:0; overflow:hidden; box-shadow: 0 0 10px rgb(227 227 227 / 83%); }
.cl-calendar { width:100%; border-collapse:collapse; table-layout:fixed; border:1px solid #e5e7eb; }
.cl-calendar col.cl-weekcol { width:48px; }
.cl-wrapper[data-month] .cl-calendar col.cl-weekcol { width:40px; }
.cl-calendar thead th { font-size: 19px; background:#ffffff; text-align:center; padding:2px 0; color:#111827; border-bottom: 3px solid #6b6b6b; }
.cl-calendar thead th.is-weekend { background:#6b6b6b; color: #ffffff; }
.cl-calendar td, .cl-calendar th { border-right:1px solid #e5e7eb; }
.cl-calendar tr td:last-child, .cl-calendar tr th:last-child { border-right:0; }

.cl-td { padding:0; border-bottom:1px solid #e5e7eb; vertical-align:top; }
.cl-td.cl-weekend .cl-cell { background:#f7f7f7c7; }

.cl-cell { width:100%; max-height: 85px; position:relative; padding:6px; box-sizing:border-box; aspect-ratio:1/1; height:auto; background:#fff; }
.cl-daynum { position:absolute; top:6px; left:6px; font:16px / 1 system-ui; }

.cl-events {
        position:absolute; left:0; right:0; top:23px;
        max-height: 60px;
        display:flex; flex-direction:column; gap:2px;
        overflow-y:auto; padding-right:1px;
        scrollbar-gutter: stable both-edges;
        scrollbar-width: thin;
        scrollbar-color: #2563eb #e5e7eb;
}
.cl-events::-webkit-scrollbar { width:8px; }
.cl-events::-webkit-scrollbar-track { background:#e5e7eb; }
.cl-events::-webkit-scrollbar-thumb { background:#2563eb; border-radius:8px; }

input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:40px;height:21px;background-color:#ccc;border-radius:16px;position:relative;cursor:pointer;outline:none;transition:background-color .2s ease-in-out}input[type="checkbox"]:checked{background-color:#0073eb}input[type="checkbox"]::before{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;background-color:#fff;border-radius:50%;transition:transform .2s ease-in-out}input[type="checkbox"]:checked::before{transform:translateX(19px)}

.cl-pill {
        display:block; width:100%; padding:4px 4px; border-radius:5px;
        font:13px/1.1 system-ui;
        border:1px solid rgba(0,0,0,.1);
        color:#ffffff;
        background:rgba(var(--rgb,96,165,250),1);
        border-color:rgba(var(--rgb,96,165,250),1);
}

.cl-weekcol { text-align:center; background:#f9fafb; color:#374151; }
.cl-weeknum-cell { text-align:center; background:#ffffff; font:500 14px/1.2 system-ui; color:#374151; }
.cl-weeknum-cell .cl-cell { height:auto; display:flex; align-items:center; justify-content:center; padding:0; background:#ffffff; }

.cl-td.is-today .cl-cell { background:#eff7ff; outline:4px solid #0073eb; outline-offset: -3px; }

.cl-holiday-list { display:none; margin-top:12px; }
.cl-holiday-list ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.cl-holiday-list li { display:flex; align-items:center; gap:8px; color:#111827; }
.cl-dot { width:10px; height:5px; flex:0 0 20px; background: rgb(var(--rgb,96,165,250)); }

.cl-moon { position:absolute; top:6px; right:6px; width:16px; height:16px; pointer-events:none; user-select:none; }
.cl-moon + .cl-moon { right:24px; }
@media (max-width:1024px){ .cl-wrapper[data-month] .cl-moon { display:none; } }

.cl-moon-row { margin-top:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cl-moon-pair { display:inline-flex; align-items:center; gap:6px; font-size: 15px; color:#111827; }
.cl-moon-day { display:inline-block; min-width:16px; text-align:right; }
.cl-moon-badge { width:15px; height:15px; display:inline-block; vertical-align:middle; }

.cl-wrapper[data-month] .cl-moon-row--month { display:none; }
@media (max-width:1024px){
        .cl-wrapper[data-month] .cl-moon-row--month { display:flex; justify-content: center; }
}

.cl-year-grid .cl-moon-row--year { display:flex; justify-content: center; }

@media (max-width:1024px){
        .cl-layout { flex-direction:column; }
        .cl-title { width:100%; text-align:center; }
        .cl-actions { width:100%; justify-content:center; }
}

@media (max-width:1024px){
        .cl-wrapper[data-month] .cl-cell { display:flex; align-items:center; justify-content:center; padding:0; }
        .cl-wrapper[data-month] .cl-events { display:none; }
        .cl-wrapper[data-month] .cl-daynum { position:static; font-size:20px; }
        .cl-wrapper[data-month] .cl-calendar thead th { padding:4px 0; font-size:14px; }
        .cl-wrapper[data-month] .cl-weekcol { width:36px; }
        .cl-wrapper[data-month] .cl-holiday-list { display:block; }
        .cl-wrapper[data-month] .cl-td.has-events .cl-cell { background: rgba(var(--evrgb,96,165,250), .08); border: 2px solid rgba(var(--evrgb,96,165,250), 1); }
}

@media (max-width:640px){
        .cl-cell { display:flex; align-items:center; justify-content:center; padding:0; }
        .cl-weeknum-cell .cl-cell { height:auto; display:flex; align-items:center; justify-content:center; }
        .cl-events { display:none; }
        .cl-daynum { position:static; font-size:20px; }
        .cl-calendar thead th { padding:8px 4px; font-weight:700; font-size:12px; }
        .cl-weekcol { width:36px; }
        .cl-wrapper .cl-holiday-list { display:block; }
        .cl-td.has-events .cl-cell { background: rgba(var(--evrgb,96,165,250), .10); border: 1px solid rgba(var(--evrgb,96,165,250), .35); }
}

.cl-modal[aria-hidden="false"] { display:block; }
.cl-modal[hidden] { display:none; }
.cl-modal { position:fixed; inset:0; z-index:9999; }
.cl-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.cl-modal__dialog { position:relative; margin:0 auto; top:50%; transform:translateY(-50%); background:#fff; width:min(560px,92vw); border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.25); padding:18px; }
.cl-modal__title { margin:0 0 6px; font:700 18px/1.2 system-ui; color:#111827; }
.cl-modal__body { padding:6px 0 10px; display:grid; gap:8px; }
.cl-checkbox { display:flex; align-items:center; gap:8px; font: 17px / 1.5 system-ui; color:#111827; }
.cl-modal__footer { display:flex; gap:8px; justify-content:flex-start; }

.cl-year-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1024px){ .cl-year-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cl-year-grid { grid-template-columns:1fr; } }
.cl-month { background:#fff; border-radius:12px; }
.cl-month-title { font-size: 20px; margin: 6px 4px 6px; text-align:center; color:#111827; font-weight: 600; }
.cl-month-link { text-decoration:none; color:inherit; font-size: 20px; }
.cl-month-link:hover { text-decoration:underline; }

.cl-calendar.cl-mini col.cl-weekcol { width:36px; }
.cl-calendar.cl-mini .cl-cell { height:auto; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:0; }
.cl-calendar.cl-mini .cl-weeknum-cell .cl-cell { height:auto !important; aspect-ratio:auto !important; display:flex; align-items:center; justify-content:center; }

.cl-calendar.cl-mini .cl-events { display:none !important; }
.cl-calendar.cl-mini .cl-daynum { position: static; font-size:16px; }
.cl-calendar.cl-mini thead th { padding:4px 0; font-size:14px; }
.cl-calendar.cl-mini .cl-td.has-events .cl-cell { background: rgba(var(--evrgb,96,165,250), .08); border: 2px solid rgba(var(--evrgb,96,165,250), 1); }

.cl-year-grid .cl-holiday-list { display:block; margin-top:8px; }
.cl-year-grid .cl-holiday-list li { font-size:16px; line-height:1.2; }