:root { --cal-orange: #f6a33b; --cal-red: #ff5e55; --cal-blue: #65a8ff; --cal-green: #55d69e; --cal-purple: #b88cff; }
.calendar-page { background: radial-gradient(circle at 88% 6%, rgba(246,163,59,.08), transparent 27rem), #0b0c0d; color: #f8f3ed; }
.calendar-main { padding-top: 112px; }
.calendar-shell { width: min(1380px, calc(100% - 36px)); }
.calendar-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,480px); gap: 42px; align-items: end; padding: 54px 0 42px; }
.calendar-hero-copy h1 { max-width: 800px; margin: 12px 0 18px; font: 800 clamp(38px,6vw,76px)/1.02 Unbounded,sans-serif; letter-spacing: -.055em; }
.calendar-hero-copy h1 em { color: var(--cal-orange); font-style: normal; }
.calendar-hero-copy p { max-width: 680px; color: rgba(248,243,237,.56); font-size: 16px; line-height: 1.75; }
.calendar-important-card { position: relative; display: flex; min-height: 180px; gap: 22px; align-items: center; padding: 28px; overflow: hidden; border: 1px solid rgba(255,112,76,.28); border-radius: 26px; background: radial-gradient(circle at 10% 10%, rgba(255,102,75,.15), transparent 18rem), linear-gradient(145deg,rgba(34,24,20,.97),rgba(16,16,17,.98)); box-shadow: 0 22px 70px rgba(0,0,0,.25); }
.calendar-important-card::after { content: "!"; position: absolute; right: 17px; bottom: -37px; color: rgba(255,255,255,.025); font: 900 150px/1 Unbounded; }
.calendar-important-card.is-empty { border-color: rgba(246,163,59,.12); background: linear-gradient(145deg,rgba(27,24,20,.9),rgba(14,15,16,.96)); }
.calendar-important-icon { position: relative; z-index: 1; display: grid; flex: 0 0 58px; height: 58px; place-items: center; border-radius: 18px; color: #1b1009; background: linear-gradient(135deg,#ffbd62,#f28b2c); box-shadow: 0 12px 34px rgba(242,139,44,.18); font-size: 21px; }
.calendar-important-card div { position: relative; z-index: 1; min-width: 0; }
.calendar-important-card small { display: block; margin-bottom: 7px; color: #ff936e; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.calendar-important-card strong { display: block; color: #fff9f2; font: 700 19px/1.3 Unbounded,sans-serif; }
.calendar-important-card p { margin: 9px 0 0; color: rgba(255,249,242,.54); font-size: 13px; line-height: 1.5; }
.calendar-important-card button { margin-top: 15px; padding: 0; border: 0; color: #ffc477; background: none; font-weight: 800; cursor: pointer; }
.calendar-board { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 30px; background: rgba(16,17,18,.9); box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.calendar-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 25px 28px; border-bottom: 1px solid rgba(255,255,255,.07); }
.calendar-navigation { display: flex; gap: 8px; }
.calendar-navigation button,.calendar-add { min-height: 42px; padding: 0 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.035); font: inherit; font-weight: 800; cursor: pointer; }
.calendar-navigation button:not(.calendar-today) { width: 42px; padding: 0; }
.calendar-navigation button:hover { border-color: rgba(246,163,59,.28); color: #ffc06b; }
.calendar-current { text-align: center; }
.calendar-current span { color: rgba(255,255,255,.35); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.calendar-current h2 { margin: 3px 0 0; font: 700 20px/1.25 Unbounded,sans-serif; }
.calendar-add { justify-self: end; color: #1a1109; border-color: transparent; background: linear-gradient(135deg,#ffc067,#f29a32); }
.calendar-layout { display: grid; grid-template-columns: minmax(0,1fr) 350px; }
.calendar-grid-shell { min-width: 0; border-right: 1px solid rgba(255,255,255,.07); }
.calendar-weekdays,.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-weekdays { border-bottom: 1px solid rgba(255,255,255,.07); }
.calendar-weekdays span { padding: 13px 8px; color: rgba(255,255,255,.33); text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.calendar-day { position: relative; min-height: 128px; padding: 10px 8px; overflow: hidden; border-right: 1px solid rgba(255,255,255,.055); border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.008); }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.is-outside { background: rgba(0,0,0,.12); opacity: .36; }
.calendar-day.is-today { background: linear-gradient(145deg,rgba(246,163,59,.075),transparent); box-shadow: inset 0 0 0 1px rgba(246,163,59,.22); }
.calendar-day-number { display: grid; width: 27px; height: 27px; margin: 0 0 7px 2px; place-items: center; border-radius: 9px; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 800; }
.calendar-day.is-today .calendar-day-number { color: #1c1209; background: #f6a33b; }
.calendar-event { position: relative; display: flex; width: 100%; min-width: 0; gap: 6px; align-items: center; margin: 4px 0 0; padding: 7px 8px; overflow: hidden; border: 1px solid transparent; border-radius: 9px; color: rgba(255,255,255,.8); background: rgba(101,168,255,.1); text-align: left; cursor: pointer; }
.calendar-event i { flex: 0 0 5px; height: 5px; border-radius: 50%; background: var(--cal-blue); }
.calendar-event span { overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.is-tournament { background: rgba(184,140,255,.1); }.calendar-event.is-tournament i { background: var(--cal-purple); }
.calendar-event.is-update { background: rgba(85,214,158,.1); }.calendar-event.is-update i { background: var(--cal-green); }
.calendar-event.is-maintenance { background: rgba(255,94,85,.1); }.calendar-event.is-maintenance i { background: var(--cal-red); }
.calendar-event.is-community { background: rgba(246,163,59,.1); }.calendar-event.is-community i { background: var(--cal-orange); }
.calendar-event.is-important { border-color: rgba(255,111,79,.34); background: linear-gradient(90deg,rgba(255,94,85,.2),rgba(246,163,59,.12)); color: #fff; }
.calendar-more { margin: 6px 0 0 8px; padding: 0; border: 0; color: rgba(255,255,255,.35); background: none; font-size: 10px; cursor: pointer; }
.calendar-agenda { padding: 25px 20px; background: rgba(0,0,0,.09); }
.calendar-agenda-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 17px; }
.calendar-agenda-head span { color: #f6a33b; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.calendar-agenda-head h2 { margin: 4px 0 0; font: 700 15px/1.3 Unbounded,sans-serif; }
.calendar-agenda-head b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #f6a33b; background: rgba(246,163,59,.1); }
.calendar-agenda-list { display: grid; gap: 9px; }
.calendar-agenda-item { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; align-items: center; width: 100%; padding: 11px; border: 1px solid rgba(255,255,255,.065); border-radius: 15px; color: inherit; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; transition: .25s ease; }
.calendar-agenda-item:hover { border-color: rgba(246,163,59,.22); background: rgba(255,255,255,.045); transform: translateY(-2px); }
.calendar-agenda-item.is-important { border-color: rgba(255,101,75,.26); background: linear-gradient(110deg,rgba(255,94,85,.1),rgba(246,163,59,.04)); }
.calendar-agenda-item time { display: grid; height: 48px; place-items: center; align-content: center; border-radius: 13px; color: #f7a846; background: rgba(246,163,59,.085); }
.calendar-agenda-item time b { font: 800 16px/1 Unbounded; }.calendar-agenda-item time span { margin-top: 3px; font-size: 9px; text-transform: uppercase; }
.calendar-agenda-item div { min-width: 0; }.calendar-agenda-item div small { display: block; color: rgba(255,255,255,.35); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.calendar-agenda-item div strong { display: block; margin-top: 4px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.calendar-agenda-item div span { display: block; margin-top: 5px; overflow: hidden; color: rgba(255,255,255,.38); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-agenda-empty { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 8px; color: rgba(255,255,255,.32); text-align: center; }.calendar-agenda-empty i { font-size: 28px; }.calendar-agenda-empty strong { color: rgba(255,255,255,.65); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 17px; padding: 17px 28px; color: rgba(255,255,255,.38); font-size: 10px; }.calendar-legend span,.calendar-legend strong { display: flex; gap: 7px; align-items: center; }.calendar-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--cal-blue); }.calendar-legend .is-tournament { background: var(--cal-purple); }.calendar-legend .is-update { background: var(--cal-green); }.calendar-legend .is-maintenance { background: var(--cal-red); }.calendar-legend .is-community { background: var(--cal-orange); }.calendar-legend strong { margin-left: auto; color: #ff8b6d; }.calendar-legend strong i { box-shadow: 0 0 0 4px rgba(255,94,85,.1); background: var(--cal-red); }
.calendar-dialog { width: min(760px,calc(100% - 24px)); max-height: calc(100vh - 30px); padding: 0; overflow: auto; border: 1px solid rgba(255,177,73,.16); border-radius: 25px; color: #f8f3ed; background: #121314; box-shadow: 0 32px 100px rgba(0,0,0,.62); }.calendar-dialog::backdrop { background: rgba(5,6,7,.78); backdrop-filter: blur(9px); }
.calendar-editor { position: relative; padding: 31px; }.calendar-editor h2 { margin: 7px 0 25px; font: 700 25px/1.2 Unbounded; }.calendar-dialog-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; color: #fff; background: rgba(255,255,255,.04); font-size: 22px; cursor: pointer; }
.calendar-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.calendar-form-grid label { display: grid; gap: 7px; }.calendar-form-grid .is-wide { grid-column: 1/-1; }.calendar-form-grid label>span { color: rgba(255,255,255,.55); font-size: 11px; font-weight: 800; }.calendar-form-grid small { color: rgba(255,255,255,.3); font-weight: 600; }.calendar-form-grid input,.calendar-form-grid select,.calendar-form-grid textarea { width: 100%; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; outline: 0; color: #fff; background: rgba(255,255,255,.035); font: inherit; }.calendar-form-grid input,.calendar-form-grid select { height: 45px; padding: 0 13px; }.calendar-form-grid textarea { min-height: 100px; padding: 13px; resize: vertical; }.calendar-form-grid input:focus,.calendar-form-grid select:focus,.calendar-form-grid textarea:focus { border-color: rgba(246,163,59,.45); box-shadow: 0 0 0 3px rgba(246,163,59,.07); }.calendar-form-grid select option { background: #171819; }
.calendar-editor-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }.calendar-editor-options label { display: flex; gap: 11px; padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; }.calendar-editor-options input { accent-color: #f6a33b; }.calendar-editor-options span { display: grid; gap: 4px; }.calendar-editor-options b { font-size: 12px; }.calendar-editor-options small { color: rgba(255,255,255,.38); font-size: 10px; line-height: 1.45; }
.calendar-form-status { min-height: 18px; margin: 13px 0 0; color: #ff987d; font-size: 12px; }.calendar-editor-actions { display: flex; gap: 9px; align-items: center; margin-top: 9px; }.calendar-editor-actions span { flex: 1; }.calendar-editor-actions button,.calendar-detail-actions button,.calendar-detail-actions a { min-height: 41px; padding: 0 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.04); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }.calendar-editor-actions .is-primary { color: #1a1109; border: 0; background: linear-gradient(135deg,#ffc067,#f29a32); }.calendar-editor-actions .is-danger { color: #ff8b77; }
.calendar-detail { position: relative; }.calendar-detail-card { position: relative; display: grid; grid-template-columns: 120px 1fr; min-height: 360px; overflow: hidden; }.calendar-detail-date { display: grid; place-items: center; align-content: center; color: #16100a; background: linear-gradient(155deg,#ffc06a,#ef9230); }.calendar-detail-date span { font: 900 45px/1 Unbounded; }.calendar-detail-date b { margin-top: 7px; text-transform: uppercase; }.calendar-detail-copy { padding: 40px 35px; }.calendar-event-type { color: #f6a33b; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.calendar-detail-copy h2 { margin: 10px 45px 15px 0; font: 700 25px/1.25 Unbounded; }.calendar-detail-copy>p { color: rgba(255,255,255,.55); line-height: 1.7; }.calendar-detail-facts { display: grid; gap: 8px; margin-top: 22px; }.calendar-detail-facts div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }.calendar-detail-facts span { color: rgba(255,255,255,.3); font-size: 11px; }.calendar-detail-facts strong { font-size: 12px; }.calendar-detail-actions { display: flex; gap: 9px; margin-top: 25px; }.calendar-detail-actions a { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 1050px) { .calendar-layout { grid-template-columns: 1fr; }.calendar-grid-shell { border-right: 0; }.calendar-agenda { border-top: 1px solid rgba(255,255,255,.07); }.calendar-agenda-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .calendar-main { padding-top: 88px; }.calendar-shell { width: min(100% - 20px,1380px); }.calendar-hero { grid-template-columns: 1fr; padding-top: 35px; }.calendar-hero-copy h1 { font-size: clamp(34px,11vw,52px); }.calendar-toolbar { grid-template-columns: 1fr auto; padding: 17px; }.calendar-current { grid-column: 1/-1; grid-row: 1; }.calendar-add { font-size: 0; width: 42px; padding: 0; }.calendar-add i { font-size: 15px; }.calendar-navigation { grid-row: 2; }.calendar-today { display: none; }.calendar-day { min-height: 91px; padding: 7px 4px; }.calendar-event { padding: 5px 4px; }.calendar-event i { display: none; }.calendar-event span { font-size: 8px; }.calendar-agenda-list { grid-template-columns: 1fr; }.calendar-legend { padding-inline: 17px; }.calendar-form-grid,.calendar-editor-options { grid-template-columns: 1fr; }.calendar-form-grid .is-wide { grid-column: auto; }.calendar-editor { padding: 26px 18px; }.calendar-detail-card { grid-template-columns: 1fr; }.calendar-detail-date { min-height: 110px; }.calendar-detail-copy { padding: 28px 20px; }.calendar-editor-actions { flex-wrap: wrap; }.calendar-editor-actions span { display: none; } }