:root {
--co-gold:#FFBE7A; --co-orange:#F2A663; --co-cream:#F2E4C9; --co-beige:#CBBFA2;
--co-dark:#0A131C; --co-dark-2:#0D1A26; --co-dark-3:#1F3A4A; --co-dark-4:#0D2633;
--co-btn-bg:#F2E4C9; --co-btn-text:#152635; --co-btn-hover:#FFBE7A;
--co-font-title:'Marcellus SC', serif; --co-font-body:'Inter', sans-serif;
--co-line:rgba(255,190,122,.16); --co-line-2:rgba(242,228,201,.08);
--co-radius:14px; --co-ease:cubic-bezier(.2,.7,.2,1);
}
.co-wrapper { font-family:var(--co-font-body); color:var(--co-cream); width:100%; margin:0 auto; padding:0 0 12px; container-type:inline-size; container-name:oni-cal; line-height:1.45; -webkit-font-smoothing:antialiased; }
.co-wrapper *, .co-wrapper *::before, .co-wrapper *::after { box-sizing:border-box; }
.co-wrapper [hidden] { display:none !important; }
.co-wrapper h2, .co-wrapper h3 { font-family:var(--co-font-title); font-weight:400; letter-spacing:.02em; margin:0; color:var(--co-gold); }
.co-wrapper button { font-family:inherit; }
.co-wrapper .iconify, .co-wrapper svg.iconify { flex-shrink:0; vertical-align:-.14em; }
html.co-lock { overflow:hidden; padding-right:var(--co-sbw,0); } .co-panel { position:relative; background:radial-gradient(1100px 420px at 50% -15%, #13304a 0%, var(--co-dark-2) 58%, var(--co-dark) 100%);
border:1px solid var(--co-line); border-radius:18px; padding:22px 24px; margin-bottom:16px; box-shadow:0 22px 56px rgba(0,0,0,.45); isolation:isolate; }
.co-panel::before { content:''; position:absolute; top:-1px; left:16%; right:16%; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--co-gold),transparent); }
.co-panel::after { content:''; position:absolute; inset:5px; border:1px solid var(--co-line-2); border-radius:14px; pointer-events:none; z-index:-1; } .co-head { display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; margin-bottom:16px; }
.co-head__title { display:flex; align-items:center; gap:14px; min-width:0; }
.co-title-ic { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
background:linear-gradient(145deg,rgba(255,190,122,.16),rgba(255,190,122,.04)); border:1px solid rgba(255,190,122,.28); box-shadow:inset 0 0 18px rgba(255,190,122,.08); }
.co-head h2 { font-size:clamp(1.25rem,2.6cqi,1.65rem); line-height:1.15; }
.co-list-subtitle { margin:3px 0 0; color:var(--co-beige); font-size:.86rem; opacity:.85; }
.co-head__actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .co-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:38px; padding:0 16px; border-radius:50px; border:1px solid transparent;
background:var(--co-btn-bg); color:var(--co-btn-text) !important; font-size:.84rem; font-weight:600; text-decoration:none !important; cursor:pointer; white-space:nowrap;
transition:background .2s, color .2s, transform .2s var(--co-ease), box-shadow .2s, border-color .2s; line-height:1; }
.co-btn:hover { background:var(--co-btn-hover); transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,190,122,.22); }
.co-btn:focus-visible, .co-nav-btn:focus-visible, .co-chip:focus-visible, .co-event-card:focus-visible, .co-cal-day:focus-visible { outline:2px solid var(--co-gold); outline-offset:2px; }
.co-btn--add { height:36px; padding:0 14px 0 11px; }
.co-btn--add .iconify { font-size:18px; }
.co-btn-ghost { background:transparent; color:var(--co-cream) !important; border-color:rgba(242,228,201,.25); }
.co-btn-ghost:hover { background:rgba(255,190,122,.1); border-color:var(--co-gold); color:var(--co-gold) !important; box-shadow:none; }
.co-btn-icon { width:38px; padding:0; background:transparent; color:var(--co-beige) !important; border-color:rgba(242,228,201,.2); }
.co-btn-icon:hover { color:var(--co-gold) !important; border-color:var(--co-gold); background:rgba(255,190,122,.08); box-shadow:none; }
.co-btn-icon.is-ok { color:#5fd497 !important; border-color:#5fd497; }
.co-monthnav { display:flex; align-items:center; gap:2px; height:38px; padding:0 3px; border-radius:50px; background:rgba(13,38,51,.75); border:1px solid var(--co-line); }
.co-current-label { min-width:118px; text-align:center; font-family:var(--co-font-title); color:var(--co-cream); font-size:.95rem; letter-spacing:.03em; }
.co-nav-btn { width:32px; height:32px; border-radius:50%; border:0; background:transparent; color:var(--co-gold); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; transition:background .2s, transform .2s; padding:0; }
.co-nav-btn:hover { background:rgba(255,190,122,.14); }
.co-nav-btn:active { transform:scale(.92); }
.co-today-btn { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 13px; border-radius:50px; background:transparent; border:1px solid var(--co-line);
color:var(--co-beige); font-size:.8rem; cursor:pointer; transition:all .2s; }
.co-today-btn:hover { color:var(--co-gold); border-color:rgba(255,190,122,.45); background:rgba(255,190,122,.06); }
.co-today-btn .iconify { font-size:16px; } .co-filters { display:flex; gap:7px; overflow-x:auto; padding:2px 2px 12px; margin:-4px 0 6px; scrollbar-width:none; }
.co-filters::-webkit-scrollbar { display:none; }
.co-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:50px; border:1px solid var(--co-line); background:rgba(13,38,51,.55);
color:var(--co-beige); font-size:.78rem; cursor:pointer; white-space:nowrap; transition:all .2s; }
.co-chip i { width:8px; height:8px; border-radius:50%; background:var(--chip,var(--co-gold)); box-shadow:0 0 8px var(--chip,var(--co-gold)); }
.co-chip:hover { border-color:rgba(255,190,122,.4); color:var(--co-cream); }
.co-chip.is-active { background:var(--co-btn-bg); color:var(--co-btn-text); border-color:var(--co-btn-bg); font-weight:600; } .co-skeleton { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.co-skeleton div, .co-skeleton--grid { height:118px; border-radius:var(--co-radius); background:linear-gradient(90deg,rgba(31,58,74,.35) 0%,rgba(31,58,74,.65) 50%,rgba(31,58,74,.35) 100%); background-size:200% 100%; animation:coShimmer 1.3s linear infinite; }
.co-skeleton--grid { height:420px; }
@keyframes coShimmer { to { background-position:-200% 0; } } .co-list-body, .co-cal-grid { transition:opacity .17s ease, transform .17s ease; }
.co-out-l { opacity:0; transform:translateX(-14px); } .co-out-r { opacity:0; transform:translateX(14px); }
.co-in-r { animation:coInR .3s var(--co-ease); } .co-in-l { animation:coInL .3s var(--co-ease); }
@keyframes coInR { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@keyframes coInL { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:none; } } .co-no-events { text-align:center; padding:34px 16px 30px; color:var(--co-beige); }
.co-no-events__ic { display:inline-flex; width:76px; height:76px; border-radius:50%; align-items:center; justify-content:center; background:rgba(203,191,162,.06); border:1px dashed rgba(203,191,162,.25); margin-bottom:12px; }
.co-no-events p { margin:0; font-size:.92rem; line-height:1.6; opacity:.85; } .co-events-list { display:grid; grid-template-columns:1fr; gap:12px; }
@container oni-cal (min-width:860px) { .co-events-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.co-event-card { --ev:#FFBE7A; position:relative; display:flex; gap:14px; align-items:stretch; padding:14px 14px 14px 12px; border-radius:var(--co-radius); cursor:pointer;
background:linear-gradient(135deg, color-mix(in srgb, var(--ev) 7%, rgba(13,38,51,.92)) 0%, rgba(13,26,38,.92) 60%);
border:1px solid color-mix(in srgb, var(--ev) 22%, transparent); transition:transform .25s var(--co-ease), box-shadow .25s, border-color .25s; overflow:hidden; }
.co-event-card::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--ev); box-shadow:0 0 12px var(--ev); }
.co-event-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--ev) 50%, transparent); box-shadow:0 12px 30px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb, var(--ev) 15%, transparent); }
.co-card-date { width:56px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-radius:12px; padding:8px 0;
background:rgba(10,19,28,.6); border:1px solid color-mix(in srgb, var(--ev) 25%, transparent); align-self:flex-start; }
.co-card-date__dow { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--co-beige); opacity:.75; }
.co-card-date__day { font-family:var(--co-font-title); font-size:1.65rem; line-height:1.05; color:var(--ev); }
.co-card-date__day--sm { font-size:1.15rem; }
.co-card-date__mon { font-family:var(--co-font-title); font-size:.68rem; letter-spacing:.08em; color:var(--co-beige); }
.co-card-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.co-card-tags { display:flex; flex-wrap:wrap; gap:5px; }
.co-type-badge, .co-zone-badge, .co-recur-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:50px; font-size:.68rem; font-weight:600; letter-spacing:.02em; line-height:1.5; }
.co-type-badge { color:var(--ev); background:color-mix(in srgb, var(--ev) 13%, transparent); border:1px solid color-mix(in srgb, var(--ev) 32%, transparent); }
.co-zone-badge { color:var(--z); background:color-mix(in srgb, var(--z) 9%, transparent); border:1px solid color-mix(in srgb, var(--z) 25%, transparent); }
.co-recur-badge { color:var(--co-beige); border:1px solid rgba(203,191,162,.22); }
.co-card-title { font-family:var(--co-font-title) !important; font-size:1.06rem !important; color:var(--co-cream) !important; line-height:1.25; display:flex; align-items:flex-start; gap:7px; }
.co-card-title .iconify { margin-top:2px; }
.co-card-title span { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.co-card-meta { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.78rem; color:var(--co-cream); opacity:.92; }
.co-card-meta--2 { color:var(--co-beige); }
.co-meta { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.co-meta--muted { color:var(--co-beige); }
.co-meta--dates { flex-wrap:wrap; gap:4px; }
.co-date-pill { display:inline-block; font-size:.7rem; padding:1px 8px; border-radius:50px; background:rgba(255,190,122,.09); border:1px solid rgba(255,190,122,.2); color:var(--co-cream); white-space:nowrap; }
.co-date-pill.is-cur { background:color-mix(in srgb, var(--ev) 25%, transparent); border-color:var(--ev); }
.co-event-status:empty, .co-progress-slot:empty { display:none; }
.co-status-live, .co-status-ended { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; }
.co-status-live { color:#5fd497; } .co-status-ended { color:var(--co-beige); opacity:.75; }
.co-live-dot { width:8px; height:8px; border-radius:50%; background:#4caf6a; box-shadow:0 0 0 0 rgba(76,175,106,.6); animation:coPulse 1.6s infinite; }
@keyframes coPulse { 70% { box-shadow:0 0 0 8px rgba(76,175,106,0); } 100% { box-shadow:0 0 0 0 rgba(76,175,106,0); } }
.co-progress-row { display:flex; align-items:center; gap:10px; }
.co-progress-bar { flex:1; padding:4px 0; }
.co-progress-track { position:relative; height:4px; border-radius:4px; background:rgba(242,228,201,.08); overflow:visible; }
.co-progress-fill { height:100%; border-radius:4px; background:linear-gradient(90deg, color-mix(in srgb, var(--pc) 55%, transparent), var(--pc)); box-shadow:0 0 8px color-mix(in srgb, var(--pc) 60%, transparent); transition:width .6s var(--co-ease); }
.co-progress-orb { position:absolute; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:radial-gradient(circle,#fff 0%,var(--pc) 55%); box-shadow:0 0 10px 3px color-mix(in srgb, var(--pc) 65%, transparent); }
.co-countdown { font-size:.72rem; color:var(--co-gold); white-space:nowrap; font-weight:600; letter-spacing:.02em; }
.co-card-actions { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:7px; flex-shrink:0; }
.co-card-actions .co-btn { height:34px; padding:0 14px; font-size:.78rem; }
.co-btn-ticket { background:transparent; color:var(--co-gold) !important; border-color:rgba(255,190,122,.45); }
.co-btn-ticket:hover { background:rgba(255,190,122,.12); color:var(--co-gold) !important; box-shadow:none; }
.co-btn-ticket-inactive, .co-btn-ticket.co-btn-ended { opacity:.4; pointer-events:none; filter:grayscale(.6); }
.co-btn-full { background:rgba(224,82,82,.12); color:#ff8a80 !important; border-color:rgba(224,82,82,.4); cursor:default; }
.co-btn-full:hover { transform:none; box-shadow:none; background:rgba(224,82,82,.12); }
.co-btn-admin { display:inline-flex; align-items:center; justify-content:center; height:30px; border-radius:50px; border:1px dashed rgba(203,191,162,.3); text-decoration:none; transition:all .2s; }
.co-btn-admin:hover { border-color:var(--co-gold); background:rgba(255,190,122,.08); }
.co-event-card.co-event-live { border-color:rgba(76,175,106,.5); box-shadow:0 0 0 1px rgba(76,175,106,.18), 0 10px 26px rgba(0,0,0,.35); }
.co-event-card.co-event-live::before { background:#4caf6a; box-shadow:0 0 12px #4caf6a; }
.co-event-card.co-event-ended { opacity:.55; filter:saturate(.55); }
.co-event-card.co-event-ended:hover { opacity:.8; }
@container oni-cal (max-width:560px) {
.co-panel { padding:16px 14px; border-radius:16px; }
.co-head { gap:12px; }
.co-head__actions { width:100%; justify-content:space-between; }
.co-monthnav { flex:1; justify-content:space-between; }
.co-current-label { min-width:0; font-size:.9rem; }
.co-today-btn span:last-child, .co-btn--add .co-btn__label { display:none; }
.co-today-btn, .co-btn--add { width:38px; padding:0; justify-content:center; }
.co-title-ic { width:42px; height:42px; }
.co-event-card { flex-wrap:wrap; gap:10px 12px; padding:12px; }
.co-card-date { width:50px; }
.co-card-body { flex:1 1 calc(100% - 62px); }
.co-card-actions { flex-direction:row; width:100%; }
.co-card-actions .co-btn { flex:1; height:38px; }
.co-card-actions .co-btn-admin { flex:0 0 44px; height:38px; }
.co-skeleton { grid-template-columns:1fr; }
} .co-cal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.co-cal-nav { display:flex; align-items:center; gap:6px; }
.co-cal-title { font-size:1.3rem !important; min-width:190px; text-align:center; }
.co-view-toggle { display:inline-flex; padding:3px; border-radius:50px; background:rgba(13,38,51,.75); border:1px solid var(--co-line); }
.co-view-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:50px; border:0; background:transparent; color:var(--co-beige); font-size:.78rem; cursor:pointer; transition:all .2s; }
.co-view-btn.is-active { background:var(--co-btn-bg); color:var(--co-btn-text); font-weight:600; }
.co-view-btn:not(.is-active):hover { color:var(--co-gold); } .co-month { --lane-h:20px; --top-h:30px; border-radius:12px; overflow:hidden; border:1px solid var(--co-line-2); }
.co-weekdays, .co-cal-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.co-cal-weekday { text-align:center; padding:9px 0; font-family:var(--co-font-title); font-size:.75rem; letter-spacing:.08em; color:var(--co-gold); background:rgba(13,38,51,.85); border-bottom:1px solid var(--co-line); }
.co-cal-week { position:relative; }
.co-cal-week + .co-cal-week .co-cal-day { border-top:1px solid var(--co-line-2); }
.co-cal-day { position:relative; min-height:96px; padding:calc(var(--top-h) + var(--lane-count,0) * var(--lane-h) + 2px) 5px 6px; background:rgba(10,19,28,.35);
border-left:1px solid var(--co-line-2); transition:background .2s; background-size:cover; background-position:center; overflow:hidden; }
.co-cal-day:first-child { border-left:0; }
.co-cal-empty { background:rgba(10,19,28,.65); }
.co-cal-day.co-has-events { cursor:pointer; }
.co-cal-day.co-has-events:hover { background-color:rgba(31,58,74,.45); }
.co-cal-day.co-past:not(.co-bg-img) { opacity:.6; }
.co-cal-day.co-bg-img::before { content:''; position:absolute; inset:0; background:var(--cal-mask,rgba(13,26,38,.5)); z-index:0; }
.co-cal-day > * { position:relative; z-index:1; }
.co-cal-day.co-hatch { background-image:repeating-linear-gradient(-45deg, var(--hatch) 0 6px, transparent 6px 13px); box-shadow:inset 0 0 0 1px var(--hatch-b); }
.co-day-top { position:absolute !important; top:5px; left:6px; right:5px; display:flex; align-items:center; justify-content:space-between; gap:4px; }
.co-day-num { font-size:.8rem; font-weight:600; color:var(--co-cream); width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.co-today .co-day-num { background:var(--co-gold); color:var(--co-dark-4); box-shadow:0 0 12px rgba(255,190,122,.55); }
.co-today { background:rgba(255,190,122,.07); box-shadow:inset 0 0 0 1px rgba(255,190,122,.4); }
.co-day-zones { display:inline-flex; gap:2px; }
.co-zone-chip { font-size:12px; opacity:.9; }
.co-day-events { display:flex; flex-direction:column; gap:3px; }
.co-day-ev { display:flex; align-items:center; gap:4px; padding:2px 5px; border-radius:5px; font-size:.68rem; line-height:1.3; color:var(--co-cream);
background:color-mix(in srgb, var(--ev) 16%, rgba(10,19,28,.5)); border-left:2px solid var(--ev); min-width:0; }
.co-day-ev-time { color:var(--ev); font-weight:600; flex-shrink:0; }
.co-day-ev-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-day-more { font-size:.66rem; color:var(--co-gold); padding-left:5px; }
.co-day-dots { display:none; gap:3px; justify-content:center; margin-top:2px; }
.co-day-dots i { width:6px; height:6px; border-radius:50%; background:var(--ev); box-shadow:0 0 6px var(--ev); }
.co-span-band { position:absolute; z-index:2; top:calc(var(--top-h) + var(--band-lane) * var(--lane-h)); height:calc(var(--lane-h) - 3px);
left:calc(var(--band-col) * 100% / 7 + 3px); width:calc(var(--band-span) * 100% / 7 - 6px);
display:flex; align-items:center; gap:4px; padding:0 7px; font-size:.68rem; font-weight:600; color:var(--co-cream); cursor:pointer; overflow:hidden; white-space:nowrap;
background:linear-gradient(90deg, color-mix(in srgb, var(--ev) 45%, rgba(13,26,38,.6)), color-mix(in srgb, var(--ev) 28%, rgba(13,26,38,.6))); border:1px solid color-mix(in srgb, var(--ev) 60%, transparent); border-radius:3px; transition:filter .2s; }
.co-span-band span { overflow:hidden; text-overflow:ellipsis; }
.co-span-band .iconify { color:var(--ev); }
.co-span-band:hover { filter:brightness(1.2); }
.co-span-start { border-top-left-radius:10px; border-bottom-left-radius:10px; }
.co-span-end { border-top-right-radius:10px; border-bottom-right-radius:10px; }
.co-span-band.co-past { opacity:.5; }
.co-span-muted { background:color-mix(in srgb, var(--ev) 14%, rgba(13,26,38,.6)); border-style:dashed; }
@container oni-cal (max-width:640px) {
.co-month { --lane-h:7px; --top-h:28px; }
.co-cal-day { min-height:58px; padding-left:2px; padding-right:2px; }
.co-day-top { left:3px; right:2px; justify-content:center; }
.co-day-num { font-size:.74rem; width:22px; height:22px; }
.co-day-zones, .co-day-events { display:none; }
.co-day-dots { display:flex; }
.co-span-band { font-size:0; padding:0; height:5px; border:0; border-radius:3px !important; }
.co-span-band .iconify, .co-span-band span { display:none; }
.co-cal-weekday { font-size:.66rem; letter-spacing:.02em; }
.co-cal-title { min-width:0; font-size:1.1rem !important; }
.co-cal-header { justify-content:center; }
.co-cal-nav { width:100%; justify-content:space-between; }
} .co-weekgrid { border-radius:12px; overflow:hidden; border:1px solid var(--co-line-2); }
.co-wg-scroll { overflow-x:auto; }
.co-wg-scroll > * { min-width:620px; }
.co-wg-head, .co-wg-allday { display:grid; grid-template-columns:52px repeat(7,minmax(0,1fr)); }
.co-wg-head { background:rgba(13,38,51,.85); border-bottom:1px solid var(--co-line); }
.co-wg-dayhead { text-align:center; padding:8px 0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.co-wg-dayname { font-family:var(--co-font-title); font-size:.7rem; letter-spacing:.08em; color:var(--co-gold); }
.co-wg-daynum { font-size:1rem; font-weight:600; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.co-wg-today .co-wg-daynum { background:var(--co-gold); color:var(--co-dark-4); }
.co-wg-dayhead.co-past { opacity:.55; }
.co-wg-allday { border-bottom:1px solid var(--co-line); background:rgba(10,19,28,.5); }
.co-wg-allday-label { font-size:.62rem; color:var(--co-beige); text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; justify-content:center; }
.co-wg-allday-grid { grid-column:2 / -1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; padding:4px; }
.co-wg-aditem { display:flex; align-items:center; gap:4px; padding:3px 7px; border-radius:6px; font-size:.7rem; font-weight:600; color:var(--co-cream); cursor:pointer; overflow:hidden; white-space:nowrap;
background:color-mix(in srgb, var(--ev) 30%, rgba(13,26,38,.6)); border:1px solid color-mix(in srgb, var(--ev) 55%, transparent); }
.co-wg-aditem span { overflow:hidden; text-overflow:ellipsis; }
.co-wg-aditem.co-past { opacity:.5; }
.co-wg-body { display:grid; grid-template-columns:52px 1fr; max-height:560px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,190,122,.3) transparent; }
.co-wg-gutter { background:rgba(13,38,51,.55); border-right:1px solid var(--co-line-2); }
.co-wg-hourlabel { font-size:.62rem; color:var(--co-beige); opacity:.7; text-align:right; padding-right:6px; transform:translateY(-6px); }
.co-wg-cols { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.co-wg-col { position:relative; border-left:1px solid var(--co-line-2); background:rgba(10,19,28,.3); }
.co-wg-col:first-child { border-left:0; }
.co-wg-today-col { background:rgba(255,190,122,.045); }
.co-wg-hourline { position:absolute; left:0; right:0; border-top:1px solid rgba(242,228,201,.05); }
.co-wg-nowline { position:absolute; left:0; right:0; height:2px; background:#ff6b6b; z-index:3; box-shadow:0 0 8px rgba(255,107,107,.6); }
.co-wg-nowline::before { content:''; position:absolute; left:-4px; top:-4px; width:10px; height:10px; border-radius:50%; background:#ff6b6b; }
.co-wg-event { position:absolute; z-index:2; border-radius:7px; padding:3px 6px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; gap:1px;
background:color-mix(in srgb, var(--ev) 22%, rgba(13,26,38,.85)); border-left:3px solid var(--ev); color:var(--co-cream); box-shadow:0 2px 8px rgba(0,0,0,.3); transition:filter .2s, transform .2s; }
.co-wg-event:hover { filter:brightness(1.15); transform:scale(1.01); z-index:4; }
.co-wg-event.co-past { opacity:.5; }
.co-wg-ev-time { font-size:.62rem; color:var(--ev); font-weight:700; }
.co-wg-ev-title { font-size:.7rem; font-weight:600; line-height:1.25; } .co-cal-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }
.co-zone-legend { display:flex; flex-wrap:wrap; gap:6px 14px; }
.co-zl { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--co-beige); }
.co-sub-link { display:inline-flex; align-items:center; gap:6px; font-size:.75rem; color:var(--co-beige) !important; text-decoration:none !important; padding:6px 12px; border-radius:50px; border:1px solid var(--co-line); transition:all .2s; margin-left:auto; }
.co-sub-link:hover { color:var(--co-gold) !important; border-color:rgba(255,190,122,.45); } .co-modal-overlay { position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center; padding:20px;
background:rgba(5,10,16,.72); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); opacity:0; transition:opacity .18s ease; }
.co-modal-overlay.is-open { opacity:1; }
.co-modal { position:relative; width:min(620px,100%); max-height:min(88vh,860px); overflow-y:auto; overscroll-behavior:contain; border-radius:20px;
background:radial-gradient(800px 300px at 50% -10%, #143049 0%, var(--co-dark-2) 55%, var(--co-dark) 100%); border:1px solid var(--co-line);
box-shadow:0 30px 80px rgba(0,0,0,.6); transform:translateY(14px) scale(.98); transition:transform .25s var(--co-ease); scrollbar-width:thin; scrollbar-color:rgba(255,190,122,.3) transparent; }
.co-modal-overlay.is-open .co-modal { transform:none; }
.co-modal::before { content:''; position:absolute; top:-1px; left:16%; right:16%; height:2px; background:linear-gradient(90deg,transparent,var(--co-gold),transparent); z-index:3; }
.co-modal-close { position:sticky; top:12px; float:right; margin:12px 12px -50px 0; z-index:4; width:38px; height:38px; border-radius:50%; border:1px solid var(--co-line);
background:rgba(10,19,28,.75); color:var(--co-cream); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; transition:all .2s; backdrop-filter:blur(4px); }
.co-modal-close:hover { color:var(--co-gold); border-color:var(--co-gold); transform:rotate(90deg); }
.co-m-hero { position:relative; height:120px; display:flex; align-items:center; justify-content:center;
background:radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--ev) 35%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--ev) 10%, transparent), transparent); }
.co-m-hero.has-img { height:200px; }
.co-modal-img { width:100%; height:100%; object-fit:cover; display:block; -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent); mask-image:linear-gradient(180deg,#000 60%,transparent); }
.co-m-hero__ic { width:76px; height:76px; border-radius:22px; display:flex; align-items:center; justify-content:center; background:rgba(10,19,28,.6); border:1px solid color-mix(in srgb, var(--ev) 40%, transparent); box-shadow:0 0 30px color-mix(in srgb, var(--ev) 35%, transparent); }
.co-m-body { padding:6px 24px 24px; display:flex; flex-direction:column; gap:12px; }
.co-m-body--list { padding-top:24px; }
.co-modal-title { font-size:1.45rem !important; color:var(--co-cream) !important; line-height:1.2; display:flex; align-items:flex-start; gap:9px; padding-right:40px; }
.co-modal-title .iconify { margin-top:2px; }
.co-m-state { display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-size:.75rem; font-weight:600; padding:4px 11px; border-radius:50px; color:var(--co-gold); background:rgba(255,190,122,.08); border:1px solid rgba(255,190,122,.22); }
.co-m-state.is-live { color:#5fd497; background:rgba(76,175,106,.1); border-color:rgba(76,175,106,.35); }
.co-m-state.is-ended { color:var(--co-beige); background:rgba(203,191,162,.06); border-color:rgba(203,191,162,.2); }
.co-modal-meta { display:flex; flex-direction:column; gap:2px; background:rgba(10,19,28,.45); border:1px solid var(--co-line-2); border-radius:14px; padding:6px 14px; }
.co-m-row { display:flex; gap:12px; align-items:flex-start; padding:8px 0; font-size:.86rem; }
.co-m-row + .co-m-row { border-top:1px solid var(--co-line-2); }
.co-m-row__ic { width:22px; display:flex; justify-content:center; padding-top:1px; }
.co-m-row strong { color:var(--co-cream); font-weight:600; }
.co-m-row small { display:block; color:var(--co-beige); font-size:.78rem; margin-top:2px; }
.co-m-dates { display:flex; flex-wrap:wrap; gap:5px; }
.co-full-txt { color:#ff8a80; }
.co-modal-desc { font-size:.9rem; line-height:1.65; color:var(--co-cream); opacity:.92; }
.co-modal-desc p { margin:0 0 .7em; } .co-modal-desc p:last-child { margin:0; }
.co-modal-desc a { color:var(--co-gold); }
.co-modal-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:4px; }
.co-addcal { position:relative; }
.co-addcal-menu { position:absolute; bottom:calc(100% + 6px); left:0; z-index:5; min-width:220px; padding:6px; border-radius:14px; background:#10263a; border:1px solid var(--co-line); box-shadow:0 14px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; }
.co-addcal-menu a, .co-addcal-menu button { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:9px; border:0; background:transparent; color:var(--co-cream) !important; text-decoration:none !important; font-size:.82rem; cursor:pointer; text-align:left; }
.co-addcal-menu a:hover, .co-addcal-menu button:hover { background:rgba(255,190,122,.1); color:var(--co-gold) !important; }
.co-daylist { display:flex; flex-direction:column; gap:7px; }
.co-daylist__item { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border-radius:12px; text-align:left; cursor:pointer; color:var(--co-cream);
background:color-mix(in srgb, var(--ev) 7%, rgba(10,19,28,.6)); border:1px solid color-mix(in srgb, var(--ev) 22%, transparent); transition:all .2s; }
.co-daylist__item:hover { border-color:var(--ev); transform:translateX(3px); }
.co-daylist__ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(10,19,28,.6); flex-shrink:0; }
.co-daylist__txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.co-daylist__txt strong { font-weight:600; font-size:.9rem; }
.co-daylist__txt small { color:var(--co-beige); font-size:.76rem; }
@media (max-width:600px) {
.co-modal-overlay { padding:0; align-items:flex-end; }
.co-modal { width:100%; max-height:92vh; border-radius:20px 20px 0 0; transform:translateY(40px); }
.co-m-body { padding:4px 16px 22px; }
.co-m-hero.has-img { height:170px; }
.co-modal-title { font-size:1.25rem !important; }
.co-modal-actions .co-btn:not(.co-btn-icon) { flex:1 1 auto; }
.co-addcal { flex:1 1 100%; } .co-addcal .co-btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
.co-wrapper *, .co-modal-overlay, .co-modal { animation:none !important; transition:none !important; }
}.ocm-overlay { position:fixed; inset:0; z-index:99995; display:flex; align-items:center; justify-content:center; padding:20px;
background:rgba(5,10,16,.75); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); opacity:0; transition:opacity .18s ease; font-family:var(--co-font-body,'Inter',sans-serif); }
.ocm-overlay[hidden] { display:none !important; }
.ocm-overlay.is-open { opacity:1; }
.ocm-overlay *, .ocm-overlay *::before, .ocm-overlay *::after { box-sizing:border-box; }
.ocm-modal { position:relative; width:min(640px,100%); max-height:min(90vh,900px); overflow-y:auto; overscroll-behavior:contain; color:var(--co-cream,#F2E4C9);
background:radial-gradient(800px 300px at 50% -10%, #143049 0%, var(--co-dark-2,#0D1A26) 55%, #0A131C 100%); border:1px solid rgba(255,190,122,.18); border-radius:20px;
padding:24px 24px 22px; box-shadow:0 30px 80px rgba(0,0,0,.6); transform:translateY(14px) scale(.98); transition:transform .25s cubic-bezier(.2,.7,.2,1); scrollbar-width:thin; scrollbar-color:rgba(255,190,122,.3) transparent; }
.ocm-overlay.is-open .ocm-modal { transform:none; }
.ocm-modal::before { content:''; position:absolute; top:-1px; left:16%; right:16%; height:2px; background:linear-gradient(90deg,transparent,var(--co-gold,#FFBE7A),transparent); }
.ocm-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,190,122,.18); background:rgba(10,19,28,.6);
color:var(--co-cream,#F2E4C9); display:flex; align-items:center; justify-content:center; font-size:19px; cursor:pointer; transition:all .2s; }
.ocm-close:hover { color:var(--co-gold,#FFBE7A); border-color:var(--co-gold,#FFBE7A); transform:rotate(90deg); }
.ocm-head { display:flex; align-items:center; gap:13px; margin:0 44px 18px 0; }
.ocm-head-ic { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--co-gold,#FFBE7A); flex-shrink:0;
background:linear-gradient(145deg,rgba(255,190,122,.16),rgba(255,190,122,.04)); border:1px solid rgba(255,190,122,.28); }
.ocm-head h3 { margin:0; font-family:var(--co-font-title,'Marcellus SC',serif); font-weight:400; font-size:1.35rem; color:var(--co-gold,#FFBE7A); }
.ocm-steps { margin:4px 0 0; display:flex; gap:6px; flex-wrap:wrap; }
.ocm-steps span { font-size:.68rem; padding:2px 9px; border-radius:50px; color:var(--co-beige,#CBBFA2); border:1px solid rgba(203,191,162,.18); opacity:.6; transition:all .2s; }
.ocm-steps span.is-on { opacity:1; color:var(--co-btn-text,#152635); background:var(--co-gold,#FFBE7A); border-color:var(--co-gold,#FFBE7A); font-weight:600; }
.ocm-intro { margin:0 0 16px; font-size:.9rem; line-height:1.6; color:var(--co-cream,#F2E4C9); opacity:.9; }
.ocm-intro strong { color:var(--co-gold,#FFBE7A); }
.ocm-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ocm-col-full { grid-column:1 / -1; }
.ocm-field { display:flex; flex-direction:column; gap:6px; min-width:0; margin-bottom:2px; }
.ocm-field > label { font-size:.76rem; font-weight:600; color:var(--co-beige,#CBBFA2); letter-spacing:.02em; }
.ocm-req { color:var(--co-gold,#FFBE7A); }
.ocm-field input[type=text], .ocm-field input[type=number], .ocm-field input[type=date], .ocm-field input[type=time], .ocm-field select, .ocm-field textarea {
width:100%; min-height:42px; padding:9px 13px; border-radius:11px; border:1px solid rgba(203,191,162,.2); background:rgba(10,19,28,.65);
color:var(--co-cream,#F2E4C9); font-size:.88rem; font-family:inherit; transition:border-color .2s, box-shadow .2s; color-scheme:dark; margin:0; box-shadow:none; }
.ocm-field textarea { resize:vertical; min-height:74px; line-height:1.5; }
.ocm-field input::placeholder, .ocm-field textarea::placeholder { color:rgba(203,191,162,.45); }
.ocm-field input:focus, .ocm-field select:focus, .ocm-field textarea:focus { outline:none; border-color:var(--co-gold,#FFBE7A); box-shadow:0 0 0 3px rgba(255,190,122,.15); }
.ocm-field select { appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFBE7A' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:20px; }
.ocm-field select option { background:#0D1A26; color:#F2E4C9; }
#ocm-code { font-size:1.25rem; letter-spacing:.2em; text-align:center; text-transform:uppercase; font-weight:600; min-height:52px; font-family:ui-monospace,Menlo,monospace; }
.ocm-dt { display:flex; gap:6px; }
.ocm-dt input[type=date] { flex:1 1 60%; min-width:0; } .ocm-dt input[type=time] { flex:1 1 40%; min-width:92px; }
.ocm-check { display:inline-flex !important; align-items:center; gap:9px; cursor:pointer; font-size:.86rem !important; color:var(--co-cream,#F2E4C9) !important; font-weight:500 !important; }
.ocm-check input { width:18px; height:18px; accent-color:var(--co-gold,#FFBE7A); margin:0; }
.ocm-zones { display:flex; flex-wrap:wrap; gap:7px; }
.ocm-zone { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:50px; border:1px solid rgba(203,191,162,.2); background:rgba(10,19,28,.55);
color:var(--co-cream,#F2E4C9); font-size:.8rem; cursor:pointer; transition:all .2s; font-family:inherit; }
.ocm-zone .iconify { color:var(--zone-color); font-size:17px; }
.ocm-zone:hover { border-color:color-mix(in srgb, var(--zone-color) 60%, transparent); transform:translateY(-1px); }
.ocm-zone.active { background:color-mix(in srgb, var(--zone-color) 20%, rgba(10,19,28,.6)); border-color:var(--zone-color); box-shadow:0 0 0 2px color-mix(in srgb, var(--zone-color) 30%, transparent); font-weight:600; }
.ocm-icon-picker { display:flex; gap:7px; align-items:center; }
.ocm-icon-preview-wrap { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; background:rgba(10,19,28,.65); border:1px solid rgba(203,191,162,.2); color:var(--co-gold,#FFBE7A); }
.ocm-hint { margin:0; font-size:.7rem; color:var(--co-beige,#CBBFA2); opacity:.7; }
.ocm-field-color input[type=color] { width:100%; height:42px; border-radius:11px; border:1px solid rgba(203,191,162,.2); background:rgba(10,19,28,.65); padding:4px; cursor:pointer; }
.ocm-field-color input[type=color]::-webkit-color-swatch-wrapper { padding:0; } .ocm-field-color input[type=color]::-webkit-color-swatch { border:0; border-radius:8px; }
.ocm-code-ok { display:flex; align-items:center; gap:8px; padding:9px 13px; margin-bottom:16px; border-radius:11px; font-size:.82rem; color:#7fe0a8; background:rgba(76,175,106,.1); border:1px solid rgba(76,175,106,.3); }
.ocm-msg { display:none; margin:14px 0 0; padding:10px 13px; border-radius:11px; font-size:.82rem; line-height:1.5; }
.ocm-msg.show { display:block; }
.ocm-msg.error { color:#ffb3ad; background:rgba(224,82,82,.1); border:1px solid rgba(224,82,82,.35); }
.ocm-msg ul { margin:6px 0 0 16px; padding:0; }
.ocm-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:42px; padding:0 20px; border-radius:50px; border:1px solid transparent;
font-size:.86rem; font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit; }
.ocm-btn-primary { background:var(--co-btn-bg,#F2E4C9); color:var(--co-btn-text,#152635); }
.ocm-btn-primary:hover { background:var(--co-btn-hover,#FFBE7A); transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,190,122,.22); }
.ocm-btn-ghost { background:transparent; color:var(--co-cream,#F2E4C9); border-color:rgba(242,228,201,.25); }
.ocm-btn-ghost:hover { border-color:var(--co-gold,#FFBE7A); color:var(--co-gold,#FFBE7A); }
.ocm-btn:disabled { opacity:.6; cursor:wait; transform:none; }
.ocm-btn.is-loading .iconify { animation:ocmSpin 1s linear infinite; }
@keyframes ocmSpin { to { transform:rotate(360deg); } }
#ocm-step-code .ocm-btn { width:100%; margin-top:14px; }
.ocm-actions { display:flex; justify-content:space-between; gap:10px; margin-top:18px; }
.ocm-done { text-align:center; padding:20px 6px 6px; }
.ocm-done-ic { display:inline-flex; width:76px; height:76px; border-radius:50%; align-items:center; justify-content:center; font-size:42px; color:#5fd497; background:rgba(76,175,106,.1); border:1px solid rgba(76,175,106,.35); box-shadow:0 0 30px rgba(76,175,106,.25); }
.ocm-done p { margin:16px auto 20px; max-width:420px; font-size:.92rem; line-height:1.6; }
@media (max-width:600px) {
.ocm-overlay { padding:0; align-items:flex-end; }
.ocm-modal { border-radius:20px 20px 0 0; max-height:94vh; padding:20px 16px 18px; transform:translateY(40px); }
.ocm-grid { grid-template-columns:1fr; gap:12px; }
.ocm-actions { flex-direction:column-reverse; } .ocm-actions .ocm-btn { width:100%; }
.ocm-field input, .ocm-field select, .ocm-field textarea { font-size:16px !important; } }