:root {
  --calendar-gold: #e6c978;
  --calendar-green: #72d3a2;
  --calendar-red: #dc8a8b;
  --calendar-violet: #a092dc;
  --calendar-blue: #81a9e4;
  --calendar-ink: #f1eee4;
  --calendar-muted: #777d74;
  --calendar-line: rgba(224, 198, 116, .13);
}

.calendar-page { color: var(--calendar-ink); background: #060805; }
.calendar-scroll { padding: 42px clamp(20px, 3vw, 50px) 70px; }
.calendar-top-actions { gap: 10px; }
.timezone-control { display: flex; min-height: 38px; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--calendar-line); border-radius: 10px; background: rgba(9, 12, 9, .76); }
.timezone-control span { color: #747970; font: 400 7px/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.timezone-control select { max-width: 205px; border: 0; outline: 0; color: #d6d4ca; background: transparent; font: 400 9px/1 "DM Mono", monospace; }
.timezone-control option { background: #11130f; }
.calendar-live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(113, 212, 162, .17); border-radius: 99px; color: #78caa0; font: 400 7px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.calendar-live-badge i { width: 4px; height: 4px; border-radius: 50%; background: #78d8a8; box-shadow: 0 0 10px #78d8a8; animation: calendar-pulse 2.8s ease-in-out infinite; }

.calendar-hero { position: relative; display: grid; min-height: 260px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; max-width: 1500px; margin: 0 auto 22px; padding: 30px 2px 28px; border-bottom: 1px solid rgba(224, 198, 116, .1); }
.calendar-hero::before { position: absolute; top: -90px; right: 6%; width: 460px; height: 260px; content: ""; background: radial-gradient(ellipse, rgba(161, 145, 219, .09), transparent 68%); pointer-events: none; }
.calendar-hero > * { position: relative; z-index: 1; }
.calendar-hero h1 { max-width: 850px; margin: 15px 0 15px; font: 600 clamp(44px, 5vw, 72px)/.96 "Plus Jakarta Sans", sans-serif; letter-spacing: -.067em; }
.calendar-hero h1 em { display: block; color: var(--calendar-gold); font-style: normal; }
.calendar-hero > div:first-child > p:last-child { max-width: 710px; margin: 0; color: #7b8077; font-size: 10px; line-height: 1.78; }
.month-control { display: grid; grid-template-columns: 38px minmax(175px, 1fr) 38px; align-items: stretch; gap: 7px; padding-bottom: 4px; }
.month-control button, .month-control label { border: 1px solid var(--calendar-line); border-radius: 11px; background: rgba(12, 15, 11, .8); }
.month-control button { color: #b9a869; cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.month-control button:hover { border-color: rgba(230, 201, 120, .32); transform: translateY(-1px); }
.month-control label { display: grid; gap: 5px; padding: 10px 13px; }
.month-control label span { color: #666b63; font: 400 7px/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.month-control input { border: 0; outline: 0; color-scheme: dark; color: #dedbd1; background: transparent; font: 500 11px/1.2 "DM Mono", monospace; }

.calendar-summary { display: grid; max-width: 1500px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto 15px; overflow: hidden; border: 1px solid var(--calendar-line); border-radius: 17px; background: rgba(12, 15, 11, .78); }
.calendar-summary article { min-height: 105px; padding: 19px 21px; border-right: 1px solid rgba(224, 198, 116, .09); }
.calendar-summary article:last-child { border-right: 0; }
.calendar-summary span, .calendar-summary small { display: block; color: #6c7169; font-size: 8px; }
.calendar-summary strong { display: block; margin: 9px 0 7px; color: #e0ddd3; font: 400 21px/1 "DM Mono", monospace; }
.calendar-summary article:nth-child(3) strong { color: var(--calendar-gold); }

.currency-ledger { display: flex; max-width: 1500px; gap: 10px; margin: 0 auto 15px; overflow-x: auto; }
.currency-card { min-width: 220px; flex: 1; padding: 15px 17px; border: 1px solid var(--calendar-line); border-radius: 14px; background: linear-gradient(145deg, rgba(18, 21, 16, .9), rgba(8, 11, 8, .9)); }
.currency-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.currency-card header strong { color: #d7d4ca; font: 500 10px/1 "DM Mono", monospace; }
.currency-card header span { color: #676d65; font: 400 7px/1 "DM Mono", monospace; text-transform: uppercase; }
.currency-card > strong { display: block; margin: 12px 0 7px; font: 400 21px/1 "DM Mono", monospace; }
.currency-card.is-positive > strong { color: var(--calendar-green); }
.currency-card.is-negative > strong { color: var(--calendar-red); }
.currency-card footer { display: flex; justify-content: space-between; gap: 12px; color: #686d66; font-size: 7px; }
.calendar-loading { display: flex; min-height: 70px; flex: 1; align-items: center; justify-content: center; gap: 10px; color: #737970; font: 400 8px/1.5 "DM Mono", monospace; }
.calendar-loading span { width: 6px; height: 6px; border: 1px solid var(--calendar-violet); border-radius: 50%; animation: calendar-pulse 1.4s ease-in-out infinite; }

.calendar-stage { display: grid; max-width: 1500px; grid-template-columns: minmax(690px, 1.55fr) minmax(330px, .65fr); gap: 16px; margin: 0 auto; }
.calendar-board, .day-inspector { overflow: hidden; border: 1px solid var(--calendar-line); border-radius: 20px; background: linear-gradient(145deg, rgba(16, 19, 14, .92), rgba(7, 10, 7, .94)); box-shadow: 0 24px 80px rgba(0, 0, 0, .2); }
.calendar-board > header, .day-inspector > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 23px 24px 19px; border-bottom: 1px solid rgba(224, 198, 116, .08); }
.calendar-board h2, .day-inspector h2 { margin: 7px 0 0; font: 600 19px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: -.04em; }
.calendar-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.calendar-legend span { display: flex; align-items: center; gap: 6px; color: #676c65; font: 400 7px/1 "DM Mono", monospace; }
.calendar-legend i { width: 6px; height: 6px; border-radius: 2px; background: #555; }
.calendar-legend .positive { background: var(--calendar-green); box-shadow: 0 0 7px rgba(114, 211, 162, .45); }
.calendar-legend .negative { background: var(--calendar-red); box-shadow: 0 0 7px rgba(220, 138, 139, .4); }
.calendar-legend .mixed { background: var(--calendar-violet); box-shadow: 0 0 7px rgba(160, 146, 220, .4); }
.calendar-viewport { padding: 18px 19px 20px; overflow-x: auto; }
.weekday-row, .month-grid { min-width: 690px; }
.weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-row span { padding: 0 8px 11px; color: #5f645d; font: 400 7px/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.calendar-day, .calendar-spacer { min-height: 112px; border-radius: 12px; }
.calendar-spacer { border: 1px solid rgba(255, 255, 255, .018); background: rgba(255, 255, 255, .006); }
.calendar-day { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 10px; overflow: hidden; border: 1px solid rgba(223, 198, 118, .08); color: #989d94; background: rgba(255, 255, 255, .012); cursor: pointer; text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.calendar-day:hover, .calendar-day.is-selected { z-index: 1; border-color: rgba(231, 202, 120, .35); background: rgba(229, 201, 120, .04); transform: translateY(-2px); }
.calendar-day.is-selected { box-shadow: 0 0 0 1px rgba(231, 202, 120, .09), 0 14px 30px rgba(0, 0, 0, .25); }
.calendar-day.is-empty { cursor: default; opacity: .5; }
.calendar-day.is-empty:hover { border-color: rgba(223, 198, 118, .08); background: rgba(255, 255, 255, .012); transform: none; }
.calendar-day::before { position: absolute; inset: auto 0 0; height: calc(var(--intensity, 0) * 8%); content: ""; opacity: .23; background: linear-gradient(transparent, var(--day-color, transparent)); }
.calendar-day[data-outcome="positive"] { --day-color: var(--calendar-green); }
.calendar-day[data-outcome="negative"] { --day-color: var(--calendar-red); }
.calendar-day[data-outcome="mixed"] { --day-color: var(--calendar-violet); }
.day-number { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: #777c74; font: 400 9px/1 "DM Mono", monospace; }
.day-number i { width: 4px; height: 4px; border-radius: 50%; background: var(--day-color, #444); box-shadow: 0 0 8px var(--day-color, transparent); }
.day-result { position: relative; z-index: 1; display: grid; gap: 4px; margin: auto 0 9px; }
.day-result strong { color: #d0cec4; font: 500 11px/1.2 "DM Mono", monospace; }
.calendar-day[data-outcome="positive"] .day-result strong { color: var(--calendar-green); }
.calendar-day[data-outcome="negative"] .day-result strong { color: var(--calendar-red); }
.calendar-day[data-outcome="mixed"] .day-result strong { color: var(--calendar-violet); }
.day-result small, .day-footer { color: #62675f; font: 400 6.5px/1.25 "DM Mono", monospace; }
.day-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 6px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .04); }

.calendar-empty { min-height: 450px; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.calendar-empty:not([hidden]) { display: flex; }
.calendar-empty > span { display: grid; width: 56px; height: 56px; margin-bottom: 18px; place-items: center; border: 1px solid var(--calendar-line); border-radius: 50%; color: var(--calendar-gold); box-shadow: 0 0 40px rgba(225, 197, 117, .06); }
.calendar-empty strong { color: #d5d2c8; font-size: 14px; }
.calendar-empty p { max-width: 420px; margin: 9px 0 17px; color: #6e746b; font-size: 9px; line-height: 1.7; }
.calendar-empty a { color: var(--calendar-gold); font: 400 8px/1 "DM Mono", monospace; text-decoration: none; }

.day-inspector { min-height: 650px; }
.day-inspector > header > span { padding: 6px 8px; border: 1px solid rgba(160, 146, 220, .17); border-radius: 99px; color: #9488bd; font: 400 7px/1 "DM Mono", monospace; text-transform: uppercase; }
.inspector-empty { display: flex; min-height: 560px; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.inspector-orbit { position: relative; display: grid; width: 76px; height: 76px; margin-bottom: 21px; place-items: center; border: 1px solid rgba(225, 198, 117, .17); border-radius: 50%; animation: calendar-breathe 4s ease-in-out infinite; }
.inspector-orbit::before, .inspector-orbit::after { position: absolute; inset: 14px -7px; border: 1px solid rgba(160, 146, 220, .2); border-radius: 50%; content: ""; transform: rotate(35deg); }
.inspector-orbit::after { transform: rotate(-35deg); }
.inspector-orbit i { width: 6px; height: 6px; border-radius: 50%; background: var(--calendar-gold); box-shadow: 0 0 15px var(--calendar-gold); }
.inspector-empty strong { color: #d4d1c8; font-size: 13px; }
.inspector-empty p { max-width: 300px; margin: 9px 0 0; color: #6e746b; font-size: 9px; line-height: 1.7; }
.inspector-content { padding: 18px 20px 24px; }
.day-ledgers { display: grid; gap: 8px; }
.day-ledger { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid rgba(224, 198, 116, .09); border-radius: 11px; background: rgba(255, 255, 255, .012); }
.day-ledger span { display: grid; gap: 5px; }
.day-ledger small { color: #686e66; font: 400 7px/1 "DM Mono", monospace; }
.day-ledger strong { font: 500 14px/1 "DM Mono", monospace; }
.day-ledger.is-positive strong { color: var(--calendar-green); }
.day-ledger.is-negative strong { color: var(--calendar-red); }
.inspector-content section { margin-top: 22px; }
.inspector-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #777c74; font: 400 7px/1 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.inspector-section-head small { color: #5e635c; }
.account-attribution, .execution-ledger { display: grid; gap: 7px; }
.attribution-row, .execution-row-compact { display: grid; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid rgba(224, 198, 116, .07); border-radius: 10px; background: rgba(255, 255, 255, .01); }
.attribution-row { grid-template-columns: minmax(0, 1fr) auto; }
.attribution-row div, .execution-row-compact div { min-width: 0; }
.attribution-row strong, .execution-row-compact strong { display: block; overflow: hidden; color: #c8c6bd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.attribution-row small, .execution-row-compact small { display: block; margin-top: 4px; color: #656b63; font: 400 6.5px/1 "DM Mono", monospace; }
.attribution-row > span { color: #c7b16c; font: 500 10px/1 "DM Mono", monospace; }
.execution-row-compact { grid-template-columns: 31px minmax(0, 1fr) auto; }
.execution-side { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(129, 169, 228, .16); border-radius: 8px; color: var(--calendar-blue); font: 500 7px/1 "DM Mono", monospace; }
.execution-row-compact > span:last-child { font: 500 9px/1 "DM Mono", monospace; }
.execution-row-compact.is-positive > span:last-child { color: var(--calendar-green); }
.execution-row-compact.is-negative > span:last-child { color: var(--calendar-red); }
.calendar-footnote { display: flex; max-width: 1500px; align-items: flex-start; gap: 9px; margin: 20px auto 0; color: #5e645c; font: 400 7px/1.65 "DM Mono", monospace; }
.calendar-footnote > span { width: 4px; height: 4px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--calendar-green); box-shadow: 0 0 7px var(--calendar-green); }
.calendar-footnote b, .calendar-footnote strong { color: #858b81; font-weight: 400; }

@keyframes calendar-pulse { 50% { opacity: .52; transform: scale(1.27); } }
@keyframes calendar-breathe { 50% { transform: scale(1.05); box-shadow: 0 0 34px rgba(225, 198, 117, .07); } }

@media (max-width: 1250px) {
  .calendar-stage { grid-template-columns: 1fr; }
  .day-inspector { min-height: 0; }
  .inspector-empty { min-height: 270px; }
}

@media (max-width: 900px) {
  .calendar-scroll { padding: 28px 18px 55px; }
  .calendar-hero { grid-template-columns: 1fr; align-items: start; }
  .month-control { max-width: 310px; }
  .calendar-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-summary article:nth-child(2) { border-right: 0; }
  .calendar-summary article:nth-child(-n+2) { border-bottom: 1px solid rgba(224, 198, 116, .09); }
}

@media (max-width: 680px) {
  .calendar-top-actions { width: 100%; }
  .timezone-control { width: 100%; justify-content: space-between; }
  .timezone-control select { min-width: 0; max-width: 180px; }
  .calendar-live-badge { display: none; }
  .calendar-hero { min-height: 0; padding-top: 18px; }
  .calendar-hero h1 { font-size: 44px; }
  .month-control { max-width: none; }
  .calendar-summary article { min-height: 96px; padding: 16px; }
  .calendar-summary strong { font-size: 18px; }
  .calendar-board > header { display: grid; }
  .calendar-legend { justify-content: flex-start; }
  .calendar-viewport { padding-inline: 12px; }
  .weekday-row, .month-grid { min-width: 625px; }
  .calendar-day, .calendar-spacer { min-height: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-live-badge i, .calendar-loading span, .inspector-orbit { animation: none !important; }
  .calendar-day, .month-control button { transition: none; }
}