/* =========================================================
   KA CALENDAR V2
   MOBILE-FIRST FUTURISTIC CALENDAR
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --bg: #05080d;

    --surface: #0a1018;
    --surface-2: #0e1620;
    --surface-3: #121c27;

    --text: #f4f8fb;
    --text-soft: #aab7c4;
    --muted: #6e7d8c;

    --accent: #00d9ff;
    --accent-soft: rgba(0, 217, 255, 0.08);
    --accent-border: rgba(0, 217, 255, 0.25);

    --danger: #ff5364;
    --success: #00e99a;
    --warning: #ffae42;

    --border: rgba(255, 255, 255, 0.075);

    --shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);

    --radius: 16px;

    --transition:
        0.25s cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   LIGHT THEME
========================================================= */

body.light {

    --bg: #f4f7fa;

    --surface: #ffffff;
    --surface-2: #f5f8fb;
    --surface-3: #edf2f6;

    --text: #15202b;
    --text-soft: #51606d;
    --muted: #7c8995;

    --border: rgba(0, 0, 0, 0.08);

    --shadow:
        0 18px 50px rgba(31, 45, 61, 0.12);

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(0, 217, 255, 0.12),
            transparent 35%
        ),
        var(--bg);
}


/* =========================================================
   ACCENT COLORS
========================================================= */

body[data-accent="purple"] {
    --accent: #a77bff;
    --accent-soft: rgba(167, 123, 255, 0.09);
    --accent-border: rgba(167, 123, 255, 0.28);
}

body[data-accent="emerald"] {
    --accent: #00e99a;
    --accent-soft: rgba(0, 233, 154, 0.08);
    --accent-border: rgba(0, 233, 154, 0.28);
}

body[data-accent="red"] {
    --accent: #ff5364;
    --accent-soft: rgba(255, 83, 100, 0.08);
    --accent-border: rgba(255, 83, 100, 0.28);
}

body[data-accent="orange"] {
    --accent: #ffae42;
    --accent-soft: rgba(255, 174, 66, 0.08);
    --accent-border: rgba(255, 174, 66, 0.28);
}

body[data-accent="pink"] {
    --accent: #ff6fa8;
    --accent-soft: rgba(255, 111, 168, 0.08);
    --accent-border: rgba(255, 111, 168, 0.28);
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {

    min-height: 100vh;

    margin: 0;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(0, 217, 255, 0.12),
            transparent 34%
        ),
        var(--bg);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow-x: hidden;

    transition:
        background var(--transition),
        color var(--transition);
}


button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
}

button,
select {
    cursor: pointer;
}

input,
textarea,
select {
    outline: none;
}

textarea {
    resize: vertical;
}

::selection {
    background: var(--accent);
    color: #001018;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.012) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.012) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


/* =========================================================
   APP
========================================================= */

.app {

    width:
        min(760px, 100%);

    min-height:
        100vh;

    margin:
        0 auto;

    padding:
        env(safe-area-inset-top)
        12px
        calc(28px + env(safe-area-inset-bottom));

    position:
        relative;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {

    height:
        58px;

    display:
        grid;

    grid-template-columns:
        40px
        1fr
        40px;

    align-items:
        center;

    gap:
        8px;

    border-bottom:
        1px solid var(--border);
}


.icon-button {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        transparent;

    color:
        var(--text-soft);

    border:
        1px solid transparent;

    border-radius:
        10px;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


.icon-button:hover {

    background:
        var(--accent-soft);

    color:
        var(--accent);

    border-color:
        var(--accent-border);
}


.icon-button:active {

    transform:
        scale(0.9);
}


/* =========================================================
   MENU BUTTON
========================================================= */

.menu-button {

    flex-direction:
        column;

    gap:
        4px;
}


.menu-button span {

    width:
        16px;

    height:
        1.5px;

    background:
        currentColor;

    transition:
        transform var(--transition);
}


/* =========================================================
   BRAND
========================================================= */

.brand {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;
}


.brand-logo {

    width:
        31px;

    height:
        31px;

    flex:
        0 0 31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--accent);

    border:
        1px solid var(--accent-border);

    background:
        var(--accent-soft);

    border-radius:
        9px;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1px;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.brand-logo:active {

    transform:
        scale(0.9);

    box-shadow:
        0 0 25px var(--accent-soft);
}


.brand-content {

    min-width:
        0;

    text-align:
        left;
}


.brand-content h1 {

    font-size:
        14px;

    line-height:
        1.1;

    letter-spacing:
        0.8px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.brand-content p {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        5.5px;

    letter-spacing:
        0.2px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.brand-content strong {

    color:
        var(--text-soft);

    font-weight:
        600;
}


/* =========================================================
   MAIN
========================================================= */

.main-content {

    padding-top:
        10px;
}


/* =========================================================
   CALENDAR TOP
========================================================= */

.calendar-top {

    min-height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.calendar-heading {

    min-width:
        0;
}


.month-year-button {

    display:
        flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        5px;

    padding:
        0;

    background:
        transparent;

    color:
        var(--text);

    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        -0.5px;

    transition:
        color var(--transition);
}


.month-year-button:hover {

    color:
        var(--accent);
}


#currentYear {

    color:
        var(--accent);

    font-size:
        16px;
}


.small-chevron {

    margin-left:
        2px;

    color:
        var(--muted);

    font-size:
        9px;

    transition:
        transform var(--transition);
}


.month-year-button.open
.small-chevron {

    transform:
        rotate(180deg);

    color:
        var(--accent);
}


.todayLabel {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        5.5px;

    letter-spacing:
        1.5px;
}


/* =========================================================
   CALENDAR NAVIGATION
========================================================= */

.calendar-navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        3px;
}


.calendar-nav {

    width:
        29px;

    height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-soft);

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        8px;

    font-size:
        19px;

    transition:
        transform var(--transition),
        color var(--transition),
        background var(--transition),
        border-color var(--transition);
}


.calendar-nav:hover {

    color:
        var(--accent);

    border-color:
        var(--accent-border);

    background:
        var(--accent-soft);
}


.calendar-nav:active {

    transform:
        scale(0.88);
}


.today-button {

    height:
        31px;

    padding:
        0 9px;

    color:
        var(--accent);

    background:
        var(--accent-soft);

    border:
        1px solid var(--accent-border);

    border-radius:
        8px;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        0.8px;

    transition:
        transform var(--transition),
        background var(--transition);
}


.today-button:active {

    transform:
        scale(0.92);
}


/* =========================================================
   MONTH / YEAR PANEL
========================================================= */

.month-year-panel {

    position:
        absolute;

    top:
        117px;

    left:
        12px;

    right:
        12px;

    z-index:
        500;

    padding:
        13px;

    background:
        color-mix(
            in srgb,
            var(--surface) 96%,
            transparent
        );

    border:
        1px solid var(--accent-border);

    border-radius:
        14px;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.4),
        0 0 35px var(--accent-soft);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(-8px)
        scale(0.98);

    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition);
}


.month-year-panel.show {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0)
        scale(1);
}


.picker-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        10px;

    border-bottom:
        1px solid var(--border);

    color:
        var(--muted);

    font-size:
        6px;

    letter-spacing:
        1.5px;
}


.picker-header button {

    width:
        25px;

    height:
        25px;

    background:
        var(--surface-2);

    color:
        var(--muted);

    border:
        1px solid var(--border);

    border-radius:
        7px;

    font-size:
        16px;
}


.picker-tabs {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        5px;

    margin:
        10px 0;
}


.picker-tab {

    height:
        31px;

    background:
        var(--surface-2);

    color:
        var(--muted);

    border:
        1px solid var(--border);

    border-radius:
        7px;

    font-size:
        6px;

    font-weight:
        700;

    letter-spacing:
        1px;
}


.picker-tab.active {

    color:
        var(--accent);

    background:
        var(--accent-soft);

    border-color:
        var(--accent-border);
}


.picker-content {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        5px;

    max-height:
        220px;

    overflow-y:
        auto;
}


.picker-content button {

    min-height:
        34px;

    background:
        var(--surface-2);

    color:
        var(--text-soft);

    border:
        1px solid transparent;

    border-radius:
        7px;

    font-size:
        7px;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}


.picker-content button:hover,
.picker-content button.active {

    color:
        var(--accent);

    background:
        var(--accent-soft);

    border-color:
        var(--accent-border);
}


.hidden {
    display:
        none !important;
}


/* =========================================================
   CALENDAR
========================================================= */

.calendar {

    width:
        100%;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        13px;

    overflow:
        hidden;

    box-shadow:
        var(--shadow);
}


/* =========================================================
   WEEKDAYS
========================================================= */

.weekdays {

    display:
        grid;

    grid-template-columns:
        repeat(7, 1fr);

    border-bottom:
        1px solid var(--border);

    background:
        var(--surface-2);
}


.weekdays span {

    min-width:
        0;

    height:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--muted);

    font-size:
        5.5px;

    font-weight:
        700;

    letter-spacing:
        0.7px;
}


.weekdays .weekend {

    color:
        color-mix(
            in srgb,
            var(--danger) 65%,
            var(--muted)
        );
}


/* =========================================================
   DAYS GRID
========================================================= */

.days-grid {

    display:
        grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap:
        1px;

    background:
        var(--border);
}


/* =========================================================
   DAY
========================================================= */

.day {

    min-width:
        0;

    height:
        62px;

    position:
        relative;

    padding:
        5px;

    background:
        var(--surface);

    overflow:
        hidden;

    cursor:
        pointer;

    transition:
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


.day:hover {

    background:
        var(--surface-2);

    box-shadow:
        inset 0 0 0 1px var(--accent-border);

    z-index:
        2;
}


.day:active {

    transform:
        scale(0.94);
}


.day.other-month {

    opacity:
        0.23;

    cursor:
        default;
}


.day-number {

    width:
        22px;

    height:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-soft);

    font-size:
        9px;

    font-weight:
        650;

    border-radius:
        50%;

    transition:
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}


/* =========================================================
   TODAY
========================================================= */

.day.today {

    background:
        linear-gradient(
            135deg,
            var(--accent-soft),
            transparent
        );
}


.day.today .day-number {

    color:
        #001017;

    background:
        var(--accent);

    box-shadow:
        0 0 16px var(--accent-soft);
}


/* =========================================================
   EVENT INDICATOR
========================================================= */

.event-dot {

    position:
        absolute;

    right:
        6px;

    top:
        8px;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 9px var(--accent);
}


/* =========================================================
   EVENT LABEL
========================================================= */

.day-event {

    position:
        absolute;

    left:
        4px;

    right:
        4px;

    bottom:
        5px;

    padding:
        3px 4px;

    border-left:
        2px solid var(--accent);

    background:
        var(--accent-soft);

    color:
        var(--text-soft);

    font-size:
        5px;

    line-height:
        1.2;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


/* =========================================================
   FESTIVAL
========================================================= */

.day.has-festival {

    background:
        linear-gradient(
            145deg,
            rgba(255,174,66,0.045),
            transparent
        );
}


.festival-dot {

    position:
        absolute;

    right:
        6px;

    top:
        7px;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--warning);

    box-shadow:
        0 0 7px rgba(255,174,66,0.5);
}


.festival-label {

    position:
        absolute;

    left:
        4px;

    right:
        4px;

    bottom:
        5px;

    color:
        #dba35b;

    font-size:
        5px;

    line-height:
        1.1;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.day.has-event .festival-label {

    bottom:
        17px;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.quick-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1.25fr;

    gap:
        7px;

    margin-top:
        8px;
}


.quick-action {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        7px 10px;

    border:
        1px solid var(--border);

    border-radius:
        11px;

    background:
        var(--surface);

    color:
        var(--text);

    text-align:
        left;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition);
}


.quick-action:hover {

    background:
        var(--surface-2);

    border-color:
        var(--accent-border);
}


.quick-action:active {

    transform:
        scale(0.96);
}


.quick-action-icon {

    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--accent);

    border:
        1px solid var(--accent-border);

    background:
        var(--accent-soft);

    border-radius:
        8px;

    font-size:
        11px;
}


.quick-action small {

    display:
        block;

    color:
        var(--muted);

    font-size:
        5px;

    letter-spacing:
        1px;
}


.quick-action strong {

    display:
        block;

    margin-top:
        3px;

    font-size:
        10px;
}


.add-action {

    justify-content:
        center;

    color:
        var(--accent);

    background:
        var(--accent-soft);

    border-color:
        var(--accent-border);

    font-size:
        6.5px;

    font-weight:
        800;

    letter-spacing:
        1px;
}


.plus-icon {

    font-size:
        16px;

    line-height:
        1;
}


/* =========================================================
   HOME UPCOMING
========================================================= */

.home-upcoming {

    margin-top:
        18px;
}


.section-heading {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    margin-bottom:
        8px;
}


.section-heading span {

    color:
        var(--accent);

    font-size:
        5px;

    letter-spacing:
        1.7px;
}


.section-heading h2 {

    margin-top:
        3px;

    font-size:
        19px;

    letter-spacing:
        -0.3px;
}


.section-heading button {

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        6px;

    letter-spacing:
        1px;
}


.section-heading button:hover {

    color:
        var(--accent);
}


.home-event-list {

    display:
        grid;

    gap:
        5px;
}


.home-event {

    min-height:
        49px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    padding:
        7px 9px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        10px;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);
}


.home-event:hover {

    transform:
        translateX(3px);

    border-color:
        var(--accent-border);

    background:
        var(--surface-2);
}


.home-event-left {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.home-event-date {

    width:
        35px;

    height:
        35px;

    flex:
        0 0 35px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--accent-soft);

    border:
        1px solid var(--accent-border);

    border-radius:
        8px;
}


.home-event-date strong {

    color:
        var(--accent);

    font-size:
        12px;

    line-height:
        1;
}


.home-event-date small {

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        5px;
}


.home-event-content {

    min-width:
        0;
}


.home-event-content strong {

    display:
        block;

    font-size:
        8px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.home-event-content span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        5.5px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.home-event-type {

    flex:
        0 0 auto;

    color:
        var(--muted);

    font-size:
        5px;

    letter-spacing:
        0.8px;
}


.empty-state {

    padding:
        18px;

    text-align:
        center;

    color:
        var(--muted);

    background:
        var(--surface);

    border:
        1px dashed var(--border);

    border-radius:
        10px;

    font-size:
        7px;
}


/* =========================================================
   DRAWER OVERLAY
========================================================= */

.drawer-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        1000;

    background:
        rgba(0,0,0,0.58);

    backdrop-filter:
        blur(4px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}


.drawer-overlay.show {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* =========================================================
   SIDE DRAWER
========================================================= */

.side-drawer {

    position:
        fixed;

    top:
        0;

    left:
        0;

    bottom:
        0;

    z-index:
        1100;

    width:
        min(310px, 84vw);

    padding:
        calc(16px + env(safe-area-inset-top))
        14px
        calc(18px + env(safe-area-inset-bottom));

    background:
        var(--surface);

    border-right:
        1px solid var(--border);

    box-shadow:
        25px 0 70px rgba(0,0,0,0.35);

    transform:
        translateX(-105%);

    transition:
        transform 0.32s cubic-bezier(.2,.8,.2,1);
}


.side-drawer.show {

    transform:
        translateX(0);
}


.drawer-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    padding-bottom:
        15px;

    border-bottom:
        1px solid var(--border);
}


.drawer-kicker {

    color:
        var(--accent);

    font-size:
        5px;

    letter-spacing:
        2px;
}


.drawer-header h2 {

    margin-top:
        3px;

    font-size:
        22px;
}


.drawer-close {

    width:
        31px;

    height:
        31px;

    background:
        var(--surface-2);

    color:
        var(--muted);

    border:
        1px solid var(--border);

    border-radius:
        8px;

    font-size:
        18px;
}


.drawer-close:hover {

    color:
        var(--accent);

    border-color:
        var(--accent-border);
}


/* =========================================================
   DRAWER NAV
========================================================= */

.drawer-nav {

    margin-top:
        12px;

    display:
        grid;

    gap:
        3px;
}


.drawer-item {

    width:
        100%;

    min-height:
        42px;

    display:
        grid;

    grid-template-columns:
        30px 1fr auto;

    align-items:
        center;

    gap:
        7px;

    padding:
        0 10px;

    background:
        transparent;

    color:
        var(--text-soft);

    border:
        1px solid transparent;

    border-radius:
        9px;

    text-align:
        left;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}


.drawer-item:hover {

    background:
        var(--accent-soft);

    color:
        var(--accent);

    border-color:
        var(--accent-border);
}


.drawer-item:active {

    transform:
        scale(0.97);
}


.drawer-item.active {

    background:
        var(--accent-soft);

    color:
        var(--accent);

    border-color:
        var(--accent-border);
}


.drawer-item span {

    width:
        26px;

    height:
        26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        7px;

    background:
        var(--surface-2);

    font-size:
        12px;
}


.drawer-item strong {

    font-size:
        8px;

    font-weight:
        650;
}


.drawer-item em {

    min-width:
        19px;

    height:
        19px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--surface-3);

    color:
        var(--muted);

    border-radius:
        50%;

    font-size:
        6px;

    font-style:
        normal;
}


.drawer-divider {

    height:
        1px;

    margin:
        8px 3px;

    background:
        var(--border);
}


/* =========================================================
   DRAWER FOOTER
========================================================= */

.drawer-footer {

    position:
        absolute;

    left:
        14px;

    right:
        14px;

    bottom:
        calc(18px + env(safe-area-inset-bottom));

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding-top:
        12px;

    border-top:
        1px solid var(--border);
}


.drawer-logo {

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--accent);

    border:
        1px solid var(--accent-border);

    background:
        var(--accent-soft);

    border-radius:
        8px;

    font-size:
        8px;

    font-weight:
        900;
}


.drawer-footer strong {

    display:
        block;

    font-size:
        8px;
}


.drawer-footer small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        5px;
}


/* =========================================================
   MODAL OVERLAY
========================================================= */

.modal-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    background:
        rgba(0,0,0,0.62);

    backdrop-filter:
        blur(5px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}


.modal-overlay.show {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* =========================================================
   DATE SHEET
========================================================= */

.date-sheet {

    width:
        min(560px, 100%);

    max-height:
        88vh;

    overflow-y:
        auto;

    padding:
        12px
        16px
        calc(20px + env(safe-area-inset-bottom));

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-bottom:
        0;

    border-radius:
        18px
        18px
        0
        0;

    transform:
        translateY(105%);

    transition:
        transform 0.34s cubic-bezier(.2,.8,.2,1);
}


.modal-overlay.show
.date-sheet {

    transform:
        translateY(0);
}


.sheet-handle {

    width:
        35px;

    height:
        3px;

    margin:
        0 auto
        12px;

    border-radius:
        10px;

    background:
        var(--muted);
}


.sheet-close {

    position:
        absolute;

    top:
        13px;

    right:
        14px;

    width:
        29px;

    height:
        29px;

    background:
        var(--surface-2);

    color:
        var(--muted);

    border:
        1px solid var(--border);

    border-radius:
        8px;

    font-size:
        17px;
}


.sheet-close:hover {

    color:
        var(--accent);

    border-color:
        var(--accent-border);
}


/* =========================================================
   SELECTED DATE
========================================================= */

.selected-date-header {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        5px
        0
        13px;

    border-bottom:
        1px solid var(--border);
}


.selected-day {

    width:
        51px;

    height:
        51px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--accent-soft);

    color:
        var(--accent);

    border:
        1px solid var(--accent-border);

    border-radius:
        12px;

    font-size:
        21px;

    font-weight:
        850;
}


.selected-date-header small {

    color:
        var(--accent);

    font-size:
        5px;

    letter-spacing:
        1.5px;
}


.selected-date-header h2 {

    margin-top:
        4px;

    font-size:
        14px;
}


/* =========================================================
   SHEET SECTIONS
========================================================= */

.festival-section,
.mission-section {

    margin-top:
        13px;
}


.sheet-section-title {

    color:
        var(--muted);

    font-size:
        5.5px;

    letter-spacing:
        1.5px;
}


.festival-list {

    display:
        grid;

    gap:
        5px;

    margin-top:
        6px;
}


.festival-item {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px;

    background:
        rgba(255,174,66,0.055);

    border:
        1px solid rgba(255,174,66,0.18);

    border-radius:
        8px;
}


.festival-item-icon {

    width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--warning);

    background:
        rgba(255,174,66,0.08);

    border:
        1px solid rgba(255,174,66,0.18);

    border-radius:
        7px;

    font-size:
        9px;
}


.festival-item strong {

    display:
        block;

    color:
        #e5b56e;

    font-size:
        8px;
}


.festival-item small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        5px;
}


/* =========================================================
   MISSION SECTION
========================================================= */

.sheet-section-heading {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

}


.sheet-section-heading > div span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        5px;
}


.small-add-button {

    padding:
        6px 9px;

    color:
        var(--accent);

    background:
        var(--accent-soft);

    border:
        1px solid var(--accent-border);

    border-radius:
        7px;

    font-size:
        5.5px;

    font-weight:
        800;

    letter-spacing:
        0.7px;
}


.selected-event-list {

    display:
        grid;

    gap:
        5px;

    margin-top:
        7px;
}


.selected-event {

    padding:
        9px;

    background:
        var(--surface-2);

    border:
        1px solid var(--border);

    border-radius:
        9px;
}


.selected-event-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.selected-event h3 {

    margin-top:
        6px;

    font-size:
        10px;
}


.selected-event-info {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        6px;
}


.selected-event-actions {

    display:
        flex;

    gap:
        4px;

    margin-top:
        8px;
}


.selected-event-actions button {

    padding:
        6px 8px;

    background:
        var(--surface-3);

    color:
        var(--muted);

    border:
        1px solid var(--border);

    border-radius:
        6px;

    font-size:
        5px;
}


.selected-event-actions button:hover {

    color:
        var(--accent);

    border-color:
        var(--accent-border);
}


.no-events {

    padding:
        14px;

    color:
        var(--muted);

    background:
        var(--surface-2);

    border:
        1px dashed var(--border);

    border-radius:
        8px;

    text-align:
        center;

    font-size:
        6px;
}


/* =========================================================
   MISSION FORM
========================================================= */

.mission-form {

    display:
        none;

    margin-top:
        12px;

    padding:
        11px;

    background:
        var(--surface-2);

    border:
        1px solid var(--accent-border);

    border-radius:
        11px;
}


.mission-form.show {

    display:
        block;

    animation:
        formOpen 0.25s ease;
}


.form-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        9px;
}


.form-heading span {

    color:
        var(--accent);

    font-size:
        6px;

    letter-spacing:
        1.5px;
}


.form-heading button {

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        16px;
}


.mission-form input,
.mission-form select,
.mission-form textarea {

    width:
        100%;

    background:
        var(--surface);

    color:
        var(--text);

    border:
        1px solid var(--border);

    border-radius:
        7px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


.mission-form input:focus,
.mission-form select:focus,
.mission-form textarea:focus {

    border-color:
        var(--accent-border);

    box-shadow:
        0 0 15px var(--accent-soft);
}


.mission-form > input {

    height:
        37px;

    padding:
        0 9px;

    font-size:
        8px;
}


.form-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        6px;

    margin-top:
        7px;
}


.form-grid label,
.full-field {

    display:
        block;

    margin-top:
        7px;
}


.form-grid span,
.full-field > span {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--muted);

    font-size:
        5px;

    letter-spacing:
        0.8px;
}


.form-grid input,
.form-grid select,
.full-field select {

    height:
        35px;

    padding:
        0 8px;

    font-size:
        7px;
}


.full-field textarea {

    min-height:
        60px;

    padding:
        8px;

    font-size:
        7px;
}


.reminder-toggle {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        9px;

    color:
        var(--text-soft);

    font-size:
        6px;
}


.reminder-toggle input {

    display:
        none;
}


.custom-check {

    width:
        18px;

    height:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--border);

    border-radius:
        5px;

    background:
        var(--surface);
}


.reminder-toggle input:checked
+ .custom-check {

    background:
        var(--accent);

    border-color:
        var(--accent);

    box-shadow:
        0 0 12px var(--accent-soft);
}


.reminder-toggle input:checked
+ .custom-check::after {

    content:
        "✓";

    color:
        #001018;

    font-size:
        10px;

    font-weight:
        900;
}


.form-buttons {

    display:
        grid;

    grid-template-columns:
        0.75fr 1.25fr;

    gap:
        6px;

    margin-top:
        11px;
}


.secondary-button,
.primary-button {

    height:
        37px;

    border-radius:
        7px;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        0.6px;
}


.secondary-button {

    color:
        var(--muted);

    background:
        var(--surface);

    border:
        1px solid var(--border);
}


.primary-button {

    color:
        var(--accent);

    background:
        var(--accent-soft);

    border:
        1px solid var(--accent-border);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.primary-button:hover {

    box-shadow:
        0 0 22px var(--accent-soft);
}


.primary-button:active {

    transform:
        scale(0.96);
}


/* =========================================================
   PAGE OVERLAY
========================================================= */

.page-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        1500;

    background:
        var(--bg);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateX(20px);

    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition);
}


.page-overlay.show {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateX(0);
}


.inner-page {

    width:
        min(760px, 100%);

    height:
        100%;

    margin:
        0 auto;

    padding:
        env(safe-area-inset-top)
        13px
        calc(25px + env(safe-area-inset-bottom));

    overflow-y:
        auto;
}


.inner-page-header {

    min-height:
        59px;

    display:
        grid;

    grid-template-columns:
        36px 1fr 36px;

    align-items:
        center;

    gap:
        8px;

    border-bottom:
        1px solid var(--border);
}


.inner-page-header > div:nth-child(2) {

    text-align:
        center;
}


.inner-page-header span {

    color:
        var(--accent);

    font-size:
        5px;

    letter-spacing:
        1.5px;
}


.inner-page-header h2 {

    margin-top:
        3px;

    font-size:
        17px;
}


.header-spacer {

    width:
        36px;
}


.inner-page-content {

    padding-top:
        13px;
}


/* =========================================================
   APPEARANCE
========================================================= */

.appearance-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        3000;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    background:
        rgba(0,0,0,0.62);

    backdrop-filter:
        blur(5px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}


.appearance-overlay.show {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


.appearance-sheet {

    width:
        min(500px, 100%);

    padding:
        11px 16px
        calc(20px + env(safe-area-inset-bottom));

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-bottom:
        0;

    border-radius:
        18px 18px 0 0;

    transform:
        translateY(105%);

    transition:
        transform 0.32s cubic-bezier(.2,.8,.2,1);
}


.appearance-overlay.show
.appearance-sheet {

    transform:
        translateY(0);
}


.appearance-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin:
        5px 0 16px;
}


.appearance-header span {

    color:
        var(--accent);

    font-size:
        5px;

    letter-spacing:
        1.5px;
}


.appearance-header h2 {

    margin-top:
        3px;

    font-size:
        20px;
}


.appearance-header button {

    width:
        29px;

    height:
        29px;

    background:
        var(--surface-2);

    color:
        var(--muted);

    border:
        1px solid var(--border);

    border-radius:
        8px;

    font-size:
        16px;
}


.appearance-group {

    margin-top:
        15px;
}


.appearance-label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--muted);

    font-size:
        5px;

    letter-spacing:
        1.5px;
}


.mode-options {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        5px;
}


.mode-option {

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    background:
        var(--surface-2);

    color:
        var(--muted);

    border:
        1px solid var(--border);

    border-radius:
        8px;

    font-size:
        7px;
}


.mode-option.active {

    color:
        var(--accent);

    background:
        var(--accent-soft);

    border-color:
        var(--accent-border);
}


.color-options {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}


.color-option {

    width:
        28px;

    height:
        28px;

    border-radius:
        50%;

    background:
        var(--color);

    border:
        3px solid var(--surface);

    box-shadow:
        0 0 0 1px var(--border);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.color-option.active {

    box-shadow:
        0 0 0 2px var(--color),
        0 0 15px var(--color);
}


.color-option:active {

    transform:
        scale(0.88);
}


.custom-color-row {

    min-height:
        43px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        6px 9px;

    background:
        var(--surface-2);

    border:
        1px solid var(--border);

    border-radius:
        8px;

    color:
        var(--muted);

    font-size:
        7px;
}


.custom-color-row input {

    width:
        30px;

    height:
        30px;

    padding:
        0;

    border:
        0;

    background:
        transparent;
}


/* =========================================================
   TOAST
========================================================= */

.toast {

    position:
        fixed;

    z-index:
        5000;

    left:
        50%;

    bottom:
        calc(18px + env(safe-area-inset-bottom));

    width:
        min(360px, calc(100% - 24px));

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        10px;

    background:
        var(--surface);

    border:
        1px solid var(--accent-border);

    border-radius:
        11px;

    box-shadow:
        var(--shadow);

    transform:
        translate(-50%, 120px);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        transform 0.3s cubic-bezier(.2,.8,.2,1),
        opacity 0.3s ease;
}


.toast.show {

    transform:
        translate(-50%, 0);

    opacity:
        1;
}


.toast-icon {

    width:
        29px;

    height:
        29px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--accent);

    background:
        var(--accent-soft);

    border:
        1px solid var(--accent-border);

    border-radius:
        8px;

    font-size:
        10px;
}


.toast strong {

    display:
        block;

    color:
        var(--accent);

    font-size:
        6px;

    letter-spacing:
        1.3px;
}


.toast p {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        7px;
}


/* =========================================================
   CLICK ACTION EFFECT
========================================================= */

.action-effect {

    position:
        fixed;

    left:
        50%;

    top:
        50%;

    width:
        20px;

    height:
        20px;

    z-index:
        6000;

    pointer-events:
        none;

    opacity:
        0;

    transform:
        translate(-50%, -50%)
        scale(0);
}


.action-effect.fire {

    animation:
        actionPulse 0.55s ease-out forwards;
}


.effect-ring {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        30px;

    height:
        30px;

    border:
        1px solid var(--accent);

    border-radius:
        50%;

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 0 20px var(--accent);
}


.effect-core {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%);

    color:
        var(--accent);

    font-size:
        6px;

    font-weight:
        900;
}


/* =========================================================
   ANIMATIONS
   ONLY TRIGGERED BY USER ACTION
========================================================= */

@keyframes actionPulse {

    0% {

        opacity:
            0;

        transform:
            translate(-50%, -50%)
            scale(0.2);
    }

    25% {

        opacity:
            1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {

        opacity:
            0;

        transform:
            translate(-50%, -50%)
            scale(6);
    }
}


@keyframes formOpen {

    from {

        opacity:
            0;

        transform:
            translateY(6px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 700px) {

    .app {

        padding-top:
            18px;
    }


    .topbar {

        height:
            62px;
    }


    .day {

        height:
            76px;
    }


    .month-year-panel {

        top:
            126px;

        left:
            50%;

        right:
            auto;

        width:
            360px;

        transform:
            translateX(-50%)
            translateY(-8px)
            scale(0.98);
    }


    .month-year-panel.show {

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }


    .modal-overlay {

        align-items:
            center;
    }


    .date-sheet {

        border:
            1px solid var(--border);

        border-radius:
            18px;

        max-height:
            760px;

        transform:
            translateY(20px)
            scale(0.98);
    }


    .modal-overlay.show
    .date-sheet {

        transform:
            translateY(0)
            scale(1);
    }


    .appearance-sheet {

        border:
            1px solid var(--border);

        border-radius:
            18px;

        margin-bottom:
            20px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 370px) {

    .app {

        padding-left:
            7px;

        padding-right:
            7px;
    }


    .brand-content p {

        display:
            none;
    }


    .calendar-heading
    .month-year-button {

        font-size:
            17px;
    }


    #currentYear {

        font-size:
            14px;
    }


    .day {

        height:
            57px;

        padding:
            4px;
    }


    .day-number {

        width:
            20px;

        height:
            20px;

        font-size:
            8px;
    }


    .festival-label,
    .day-event {

        font-size:
            4.5px;
    }


    .quick-action {

        min-height:
            45px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}