.event-calendar-page { margin:0; min-height:100vh; background:#080d18; color:#edf1ff; font-family:Outfit,sans-serif; }
.ec-page { max-width:1440px; margin:auto; padding:42px 40px 28px; }
.ec-hero { position:relative; display:flex; align-items:center; min-height:310px; padding:10px 32px 32px; overflow:hidden; border-bottom:1px solid #ffffff12; background:radial-gradient(ellipse at 80% 55%,#73432733,transparent 55%); }
.ec-kicker { color:#bca77c; font-size:11px; letter-spacing:2.5px; font-weight:600; }
.ec-hero h1 { font-size:clamp(36px,4vw,58px); line-height:1.12; font-weight:500; letter-spacing:-1.5px; margin:20px 0 16px; }
.ec-hero h1 em { color:#f0c67d; font-style:normal; }
.ec-hero p { max-width:550px; color:#a0abc1; font-size:15px; line-height:1.7; }
.ec-hero-tags { display:flex; gap:20px; color:#b2bdd1; font-size:12px; margin-top:24px; }
.ec-hero-tags span:first-child { color:#efc886; }
.ec-hero-art { position:absolute; right:30px; top:-30px; width:40%; height:390px; pointer-events:none; }
.ec-hero-art img { width:100%; height:100%; object-fit:cover; object-position:50% 25%; mask-image:linear-gradient(to right,transparent,#000 25%,#000 75%,transparent),linear-gradient(to bottom,#000 55%,transparent 95%); mask-composite:intersect; opacity:.75; }
.ec-hero-art span { position:absolute; right:5%; bottom:52px; font-size:10px; letter-spacing:5px; color:#e9cda4; }
.ec-calendar { margin-top:28px; border:1px solid #a8bdd321; border-radius:16px; overflow:hidden; background:#101725; box-shadow:0 24px 60px #0003; }
.ec-toolbar { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:22px 24px; flex-wrap:wrap; }
.ec-month-nav { display:flex; align-items:center; gap:10px; }
.ec-month-nav h2 { font-size:20px; margin:0 8px; min-width:155px; font-weight:500; text-transform:capitalize; }
.ec-page button { font:inherit; cursor:pointer; color:inherit; }
.ec-month-nav button { border:1px solid #ffffff20; background:#ffffff05; border-radius:8px; min-width:36px; height:36px; font-size:22px; }
.ec-month-nav #ec-now { font-size:12px; padding:0 13px; color:#efc886; }
.ec-filters { display:flex; gap:4px; padding:4px; border:1px solid #ffffff10; border-radius:9px; background:#080d18; }
.ec-filters button { border:0; background:transparent; font-size:12px; padding:8px 17px; border-radius:6px; color:#a4afc4; }
.ec-filters button[aria-pressed=true] { background:#29354b; color:#fff; }
.ec-scroll { overflow-x:auto; scrollbar-color:#536078 #101725; }
.ec-grid { min-width:1190px; position:relative; }
.ec-grid-head,.ec-row { display:grid; grid-template-columns:200px minmax(0,1fr); }
.ec-row { min-height:96px; border-top:1px solid #ffffff09; }
.ec-row-label,.ec-grid-title { position:sticky; left:0; z-index:4; background:#121a29; padding:20px; border-right:1px solid #ffffff10; display:flex; align-items:center; gap:12px; }
.ec-grid-title { color:#78879e; font-size:10px; letter-spacing:2px; }
.ec-row-label img { width:40px; height:40px; object-fit:contain; }
.ec-row-label strong { display:block; font-weight:500; font-size:13px; }
.ec-row-label small { color:#8997b0; font-size:10px; letter-spacing:1px; display:block; margin-top:5px; }
.ec-days,.ec-track { display:grid; grid-template-columns:repeat(var(--days),minmax(0,1fr)); position:relative; }
.ec-day { text-align:center; border-right:1px solid #ffffff06; padding:14px 0; font-size:13px; color:#c3ccdc; }
.ec-day small { display:block; font-size:9px; color:#6f7e97; margin-top:4px; }
.ec-day.is-weekend { background:#ffffff03; }
.ec-day.is-today { background:#f0c67d22; color:#f7d599; }
.ec-day.is-today small { color:#f7d599; }
.ec-track { align-items:center; background:repeating-linear-gradient(to right,transparent 0,transparent calc(100% / var(--days) - 1px),#ffffff06 calc(100% / var(--days) - 1px),#ffffff06 calc(100% / var(--days))); }
.ec-today-line { position:absolute; top:0; bottom:0; width:calc(100% / var(--days)); background:#f0c67d08; border-inline:1px solid #f0c67d22; pointer-events:none; }
.ec-bar { --accent:#f6ae72; --shade:#713825; z-index:1; min-width:0; position:relative; display:flex; align-items:center; gap:12px; margin:12px 3px; padding:10px 14px; min-height:65px; border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:10px 24px 24px 10px; background:linear-gradient(110deg,var(--shade),color-mix(in srgb,var(--shade) 50%,#111a2d)); box-shadow:inset 0 1px #ffffff18,0 5px 15px #0003; text-align:left; overflow:hidden; }
.ec-bar::after { content:'›'; margin-left:auto; color:var(--accent); font-size:26px; }
.ec-bar img { width:45px; height:45px; object-fit:contain; flex-shrink:0; }
.ec-bar strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; font-weight:500; }
.ec-bar small { display:block; font-size:10px; margin-top:5px; color:var(--accent); }
.ec-bar-copy { min-width:0; }
.ec-bar.is-selected { outline:2px solid var(--accent); outline-offset:2px; }
.ec-bar.is-compact { padding:8px 4px; justify-content:center; border-radius:9px; }
.ec-bar.is-compact .ec-bar-copy,.ec-bar.is-compact::after { display:none; }
.ec-bar.is-compact img { width:28px; }
.ec-bar.is-ended { opacity:.65; }
.ec-blue { --accent:#91d4ff; --shade:#223d64; }
.ec-pink { --accent:#f6a6dd; --shade:#602b5e; }
.ec-purple { --accent:#c9a5ff; --shade:#49326c; }
.ec-gold { --accent:#f5d184; --shade:#5b4824; }
.ec-calendar-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:16px 24px; font-size:11px; color:#8997ae; border-top:1px solid #ffffff0b; }
.ec-calendar-footer i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#f0c67d; margin-right:6px; }
.ec-calendar-footer b { margin:0 8px; }
.ec-empty { padding:65px 24px; text-align:center; color:#9caac1; }
.ec-detail { display:grid; grid-template-columns:230px 1fr auto; align-items:center; gap:30px; border:1px solid #ffffff12; border-radius:14px; margin-top:24px; background:radial-gradient(ellipse at 0 50%,#54403033,transparent 60%),#101725; padding:22px 30px; min-height:200px; }
.ec-detail[hidden] { display:none; }
.ec-detail-art { height:180px; width:100%; object-fit:cover; object-position:50% 25%; border-radius:10px; mask-image:linear-gradient(to right,#000 70%,transparent); }
.ec-detail h2 { margin:10px 0; font-size:26px; font-weight:500; }
.ec-detail p { color:#a6b2c7; font-size:14px; line-height:1.65; margin:10px 0; max-width:660px; }
.ec-status { font-size:10px; letter-spacing:1px; color:#f1cb8f; }
.ec-detail time { font-size:12px; color:#d4dbea; }
.ec-rewards { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ec-rewards span { font-size:10px; border:1px solid #ffffff16; padding:6px 10px; border-radius:5px; color:#bac6d9; }
.ec-detail-actions { display:flex; flex-direction:column; gap:12px; min-width:175px; }
.ec-detail-actions a,.ec-detail-actions button { text-align:center; text-decoration:none; font-size:12px; padding:13px 16px; border:1px solid #ddbc7940; border-radius:7px; background:#ead09b; color:#191b23; font-weight:600; }
.ec-detail-actions button { background:transparent; color:#c0cadb; border-color:#ffffff20; }
.ec-note { color:#77859b; font-size:11px; line-height:1.7; margin:20px 4px; }
.ec-page button:hover { filter:brightness(1.2); }
.ec-page :focus-visible { outline:2px solid #f2cc87; outline-offset:4px; }
@media(min-width:1650px) { .ec-grid { min-width:100%; } }
@media(max-width:1000px) { .ec-page { padding:28px 20px; } .ec-detail { grid-template-columns:150px 1fr; gap:20px; } .ec-detail-actions { grid-column:2; flex-direction:row; } .ec-hero-art { right:-50px; opacity:.6; } }
@media(max-width:600px) { .ec-page { padding:18px 12px; } .ec-hero { padding:20px 12px; min-height:280px; } .ec-hero>div:first-child { position:relative; z-index:1; } .ec-kicker { font-size:9px; letter-spacing:1.4px; } .ec-hero p { font-size:13px; max-width:300px; } .ec-hero-art { width:80%; right:-90px; opacity:.3; } .ec-hero-tags { gap:12px; font-size:10px; } .ec-toolbar { padding:16px 12px; gap:14px; } .ec-month-nav h2 { font-size:17px; min-width:130px; margin:0; } .ec-month-nav { gap:6px; } .ec-filters { width:100%; } .ec-filters button { flex:1; } .ec-grid-head,.ec-row { grid-template-columns:130px minmax(0,1fr); } .ec-row-label,.ec-grid-title { padding:12px 8px; gap:7px; } .ec-row-label img { width:28px; height:28px; } .ec-row-label strong { font-size:11px; } .ec-row-label small { font-size:9px; } .ec-detail { grid-template-columns:1fr; padding:20px; gap:10px; } .ec-detail-art { height:150px; object-position:50% 30%; mask-image:linear-gradient(to bottom,#000 70%,transparent); } .ec-detail-actions { grid-column:auto; flex-direction:column; } .ec-calendar-footer { padding:12px; } }